/* The expense editor — increment E (wave M, review findings 4 and 6).
 *
 * Everything the editor draws that is new: the way in from a day card, the two
 * fields and the Remove control of the ₹ sheet's edit mode, the Month
 * ledger's Change control, its Open day link and its Removed list, and the
 * expense History sheet — and (step 2, finding 6) the space the paid-from
 * chips need now that they sit under the pad.
 * The sheet itself (.sheet__card, the pad, the grid, the chips) is capture.css,
 * a card is cards.css and a ledger row is ledger.css — other increments' files
 * this wave, and nothing here restyles what they style. (The one rule on
 * another file's class is the last: Undo Amend's line in exports.css, a file
 * no increment of this wave owns.) Colours are tokens.css's only; sizes are
 * rem; every control is a 44 px target (--touch).
 */

/* ───────────────────────────────────────── the way in, on a day card
 *
 * The card's amount-and-words row opens the editor on a tap (cards.js
 * tapToChange): a pointer on a desk, nothing more — the Change button beside
 * it is what says so. */

.entry [data-tap="edit"] {
  cursor: pointer;
  /* Chrome on Android paints a blue box over a tapped clickable for a moment;
   * here it would flash over the sheet the same tap opens. */
  -webkit-tap-highlight-color: transparent;
}

/* `Change`, floated under the amount at the card's right edge (it follows the
 * amount in the card, cards.js openMain), so the words wrap beside it and the
 * card does not gain a row: under the amount's line (1.3125rem) the button's
 * own 44 px, less the 0.5rem it reaches up towards the amount and the 0.5rem
 * it reaches down into the card's padding. Measured on the phone shapes: a
 * card of three lines does not grow, one of two grows 7 px (60 → 67). Its top
 * stays under the amount's middle, so a tap on the amount is the amount's —
 * though both open the same editor. */
.entry__change {
  float: right;
  clear: right;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: var(--touch);
  min-height: var(--touch);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) var(--space-2);
  padding: 0 var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  cursor: pointer;
}

.entry__change:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Beside the amount, to its left, its 44 px centred on that line — on the
 * desk since step 1 (a one-line card stays 46 px), and on the phone since
 * the wave's integration (review of E: under the amount a one-line card grew
 * 46 → 67 px). Measured on the merged wave, card heights under → beside, in
 * px: 360 wide 85 → 85, 68 → 63, 68 → 63; 412 wide 85 → 63, 68 → 63,
 * 68 → 46; 320 wide 108 → 85, 85 → 85, 68 → 63. Never taller. */
.entry__change {
  clear: none;
  align-items: center;
  margin-block: calc((1.3125rem - var(--touch)) / 2);
  margin-inline: var(--space-2) 0;
  padding: 0 var(--space-2);
}

/* A row its pack holds, and an expense typed in a private entry: the control
 * explains or shows first, so it is quieter than the one that edits. */
.entry__change--locked,
.entry__change--veiled {
  color: var(--ink-muted);
}

/* The dark money wash (--tint-money, #1E3525): the dark accent on it is
 * 3.96:1, under the 4.5:1 a 13 px label needs; --ok is 5.85:1 (tokens.css). */
@media (prefers-color-scheme: dark) {
  .entry[data-kind="expense"] .entry__change:not(.entry__change--locked, .entry__change--veiled) {
    color: var(--ok);
  }
}

/* ───────────────────────────────────────── the ₹ sheet's order (review finding 6)
 *
 * 2026-10-10: the paid-from chips sit under the pad, above the category grid
 * (keypad.js paidFromBlock), on a new expense's sheet and a correction's
 * alike. capture.css gave the pad no space under it — the grid's own margin
 * followed — so the chips' row brings its own; the grid's margin (capture.css
 * .cats) is the space under them. */
.sheet__card > .sheet__paid {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* ───────────────────────────────────────── the ₹ sheet, opened on a saved expense */

/* Amend is open: where this change will show. Under the held head, scrolling
 * with the pad. */
.sheet__lead {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--emphasis-edge);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--tint-warn);
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.4;
}

/* The payee and the note: under the category grid, above Remove. */
.sheet__details {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.sheet__details .sheet__field {
  margin: 0;
}

/* 16 px in the field: Chrome on Android zooms the page in on a smaller one. */
.sheet__details .field__input {
  font-size: 1rem;
}

/* Remove this spend: in the scrolled body, a line of its own, well clear of
 * Save in the held row below — never beside it. */
.sheet__danger {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.sheet__remove {
  border-color: var(--danger);
  color: var(--danger);
  background: transparent;
  font-size: var(--text-base);
}

.sheet__remove:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--surface-sunken);
}

.sheet__history {
  color: var(--ink-muted);
  font-size: var(--text-base);
}

/* ───────────────────────────────────────── the Month ledger */

/* A removed spend's row: its words struck through, never its amount in a total. */
.ledger__removed {
  margin-top: var(--space-6);
}

.ledger__removed-title {
  margin: 0 0 var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ledger__removed-lede {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-md);
}

/* Below the desk the sentence keeps to the measure (tokens.css), as S's
 * .panel__lede does: 97 characters a line at 800px (wave M integration). */
@media (max-width: 1099.98px) {
  .ledger__removed-lede {
    max-width: var(--measure);
  }
}

.ledger__row--removed .ledger__words > span:first-child,
.ledger__row--removed .ledger__amount {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.ledger__row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* The ledger's Change and Amend are buttons where the row's control was a
 * link: the same box. */
button.ledger__link {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* A row's two controls (ledger.js rowActs): Open day, then Change or Amend.
 * At a desk they are the row's last cell, side by side. On the phone they are
 * the row's second line, across its whole width — Open day at its start under
 * the time, the control at its end where it was — and a pair too long for a
 * narrow phone (a private entry's `Private — tap to show`) wraps instead of
 * running into each other. The row grows by nothing: the control's line was
 * there. */
.ledger__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 var(--space-2);
  min-width: 0;
}

@media (max-width: 599px) {
  .ledger__acts {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

/* Open day: the row's second link, quieter than its control — words, no box —
 * and still a 44 px target. Its padding is taken back at the row's edge on
 * the phone, so its words start where the time above them does. */
.ledger__open {
  display: inline-flex;
  align-items: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--text-md);
  text-decoration: none;
  white-space: nowrap;
}

.ledger__open:hover {
  text-decoration: underline;
}

.ledger__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (max-width: 599px) {
  .ledger__open {
    margin-left: calc(-1 * var(--space-2));
  }
}

/* ───────────────────────────────────────── an expense's History sheet */

.xhist__changes {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-base);
}

.xhist__change {
  display: grid;
  grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-1);
}

.xhist__label {
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.xhist__value {
  overflow-wrap: anywhere;
}

.xhist__was {
  color: var(--ink-muted);
  text-decoration: line-through;
}

/* The new value: said by its weight, not by <ins>'s underline, which reads as a link. */
ins.xhist__now {
  font-weight: 600;
  text-decoration: none;
}

.xhist__kind {
  font-weight: 600;
}

.xhist__kind--removed {
  color: var(--danger);
}

.xhist__status {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-base);
}

/* ───────────────────────────────────────── Settings → Exports
 *
 * An open row's link to its day (exports-card.js): on Undo Amend's line, at
 * its other end, so the row grows by nothing. Both are placed on the row's
 * second line here — exports.css puts Undo Amend there by its order alone. */

.exports__row > .exports__day {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-1);
  text-decoration: none;
}

.exports__row > .exports__undo {
  grid-row: 2;
}

/* Wave E (E5): "Bill and billing" on Change this spend (keypad-bill.js) — one
 * closed group under the payee and the note; its summary and checkboxes are
 * 44 px targets, its select the native one (a wheel on the phone). */
.sheet__bill {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.sheet__bill-title {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.sheet__bill-body,
.sheet__bill-sub {
  display: grid;
  gap: var(--space-2);
}

.sheet__bill-sub[hidden] {
  display: none;
}

.sheet__bill .sheet__field {
  margin: 0;
}

.sheet__bill .field__input {
  font-size: 1rem;
}

.sheet__bill select.field__input {
  appearance: auto;
  max-width: 100%;
}

.sheet__bill-hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.sheet__bill-note {
  margin: 0;
  color: var(--warn-ink);
  font-size: var(--text-sm);
}

.sheet__bill-note:empty {
  display: none;
}