/* The sheets' frame, and the ₹ keypad that was the first of them.
 *
 * Moved out of capture.css in wave M (increment D), rule for rule and in the
 * same order, when that file stood at 715 of HARD RULE 8's 800 lines: it is
 * linked right after capture.css, where these rules stood, so nothing that
 * follows (photo.css, day-sheets.css, tray.css …) meets them in a new order.
 *
 * `.sheet`, `.sheet__card`, the held head and the held answer row are every
 * sheet's — the keypad (#keypad), the day's (#day-sheet) and the Photo
 * sheet (#photo-sheet). `.pad`, `.cats` and the paid-from chips are the
 * keypad's own. Every colour comes from tokens.css.
 *
 * Nothing here depends on the ORDER of the keypad's sections: the pad, the
 * category grid and the paid-from chips each carry their own margins. */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-2);
  background: rgb(55 52 53 / 45%);
  overflow-y: auto;
}

.sheet__card {
  width: 100%;
  max-width: 32rem;
  /* A panel on a desk: `margin-block: auto` centres it. Below 1100 px F6
   * (after .sheet__save) puts it on the foot of the phone instead; this
   * `auto` alone centred it there too. Never taller than the screen, at any
   * width: a longer card scrolls inside itself (F6). */
  margin-block: auto;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -4px 24px rgb(26 28 26 / 18%);
}

.sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sheet__title {
  margin: 0;
  font-size: 1.05rem;
}

.sheet__note {
  margin: var(--space-3) 0 0;
  /* Orange TEXT is --warn-ink (tokens.css: 5.57:1 on white); --warn is the
   * deep orange for edges, 3.3:1 as text (V3T round 2, measured in Edge). */
  color: var(--warn-ink);
  font-size: var(--text-sm);
}

.sheet__note:empty {
  display: none;
}

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

/* The keypad's answer row (keypad.js footBlock), held on screen with Save:
 * a bank's UPI · Net banking, then the note saying why Save waits, each a
 * line of its own (F6; review of F, finding 2). */
.sheet__foot > :is(.sheet__picks, .sheet__note) {
  flex: 1 0 100%;
  margin: 0;
}

/* At 320 px (Display size turned up) "Net banking" went to a line of its own
 * and the answer row covered two of the six paid-from chips on a bank's
 * correction (review of E). The label takes two lines instead and the two
 * answers stay on one — E's proposal, applied and measured at integration. */
@media (max-width: 340px) {
  .sheet__foot > .sheet__picks > .sheet__pick-label {
    flex: 0 1 4.75rem;
  }
}

.sheet__save {
  flex: 1 1 auto;
  width: auto;
}

/* F6 (NEXT-PLAN §4): no sheet is taller than the screen — the keypad,
 * #day-sheet (C2, C3) and #photo-sheet (E). A card that fits keeps its size;
 * a taller one fills the screen and its body scrolls under the answer row, so
 * Save, Cancel or the answers never leave it (the keypad measured 921 px on
 * an 844 px phone with Save's foot at 912, and 823 px on a 720 px desk). The
 * answer row is each card's LAST child (keypad.js footBlock, day-sheet.js
 * cardOf, photo-sheet.js), so `bottom` takes it over the card's own bottom
 * padding. D's Close day card (day.css `.sheet__card.close`) has its own
 * head, body and foot, and keeps them. */
.sheet__card:not(.close) > :is(.sheet__foot, .sheet__choices):last-child {
  position: sticky;
  bottom: calc(-1 * var(--space-4));
  z-index: 1;
  padding-block: var(--space-3);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* The held head, the answer row's twin: the keypad's title, Close and amount
 * (keypad.js topBlock) stay on screen while the body scrolls under them, so
 * what is being saved is in view at Save (review of F, finding 1). Its
 * negative margin takes it over the card's top padding, where it holds. */
.sheet__top {
  position: sticky;
  top: calc(-1 * var(--space-4));
  z-index: 1;
  margin: calc(-1 * var(--space-4)) 0 var(--space-2);
  padding-top: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Below 1100 px every sheet sits on the foot of the phone, under the thumb,
 * above the safe area. At 1100 px and above it stays centred. */
@media (max-width: 1099.98px) {
  .sheet {
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom, 0px));
  }

  .sheet__card {
    margin-block: auto 0;
  }
}

/* The Photo sheet (increment E, §6) is photo.css since the wave-1 merge. */

/* ------------------------------------------------------------- the pad */

/* Review of F, round 2: the held head names the sheet's answers as the card
 * will (keypad.js answersLine), beside the amount, which never wraps. */
.pad__preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pad__line {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.pad__amount {
  display: block;
  flex: none;
  padding: var(--space-2) 0;
  color: var(--ink);
  font-family: var(--font-mono);
  /* The amount is the one number on this sheet, and it is read at arm's length
   * beside a fuel pump. Everything else here is deliberately smaller. */
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
}

.pad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.pad__key {
  min-height: calc(var(--touch) * 1.15);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.pad__key:active {
  background: var(--surface-sunken);
}

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

/* -------------------------------------------------- the category grid */

.cats {
  display: grid;
  /* Four across on a phone, more on a desk: thirteen categories have to be one
   * glance, not a scroll. */
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: calc(var(--touch) * 1.3);
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink-muted);
  font: inherit;
  /* 12 px, the floor for a label on a phone: the names were 11 px (the phone
   * review of 2026-10-10, section 1). Three tiles across at 320 and at 360 px
   * still, and the longest single word — "Miscellaneous" — still fits a tile
   * at 320; `overflow-wrap` is for a category the owner names longer than
   * that (Settings → Money), which breaks rather than runs out of its tile. */
  font-size: var(--text-xs);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
  cursor: pointer;
}

.cat[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--tint-chosen);
  color: var(--ink);
  font-weight: 600;
}

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

.cat__icon {
  font-size: 1.25rem;
  line-height: 1;
}

/* The keypad's paid-from chips, §8 Q3's UPI · Net banking row and the scope
 * chip beside Save are tapped standing at a pump: 44 px, which `.chip` alone
 * does not give (only the capture bar's chips have it). */
.chip--fund,
.chip--mode,
.sheet__foot > .chip--scope {
  min-height: var(--touch);
}

/* Wave E (keypad-scope.js): Business · Personal while a company-card spend
 * waits for whose it is — orange edges, as every chip that means "this needs
 * you" (.chip--choose); the words in --warn-ink, the orange that reads as text
 * (5.57:1 on white, tokens.css). Save's "Pick a category ↑" keeps Save's own
 * look: it is the row's one action either way. */
.sheet__foot > .chip--whose.chip--choose {
  color: var(--warn-ink);
}

.chip--fund[aria-pressed="true"],
.chip--mode[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ------------------------------------------- the paid-from rows (K)
 *
 * Increment K, 2026-10-13: four company cards made the six buttons ten
 * (keypad-paid.js). They are drawn in labelled rows — the company's accounts
 * and cash, its cards, the owner's own money — each a small label over a
 * grid of buttons. A grid, not the wrap the six had: wrapped, "ICICI card
 * 0002" took a line to itself at 320 px and the four cards alone were 200 px
 * of the sheet. Three columns at every width: a name too long for its cell
 * takes a second line inside its own 44 px rather than a row of the sheet, so
 * the ten are four lines of buttons on any phone — and after a paid-from tap
 * the first row of categories is on screen under them, at 320 px too (two
 * columns there were six lines, and put the grid under the answer row).
 * The block's place under the pad is expense-edit.css's. */
.paid + .paid {
  margin-top: var(--space-2);
}

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

.paid__chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

/* A cell of the grid: its name centred, and broken at a space, never run out
 * of the cell. The sheet's chips are otherwise capture.css's `.chip`. */
.paid__chips > .chip--fund {
  justify-content: center;
  min-width: 0;
  padding-inline: var(--space-2);
  border-radius: var(--radius);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Under 360 px a cell is 85 px: the narrower padding keeps "(company)" and
 * "HDFC card" whole on their lines. */
@media (max-width: 359.98px) {
  .paid__chips > .chip--fund {
    padding-inline: var(--space-1);
  }
}

/* ------------------------------------------------ the day line (K)
 *
 * "Spent on: Today" (keypad-day.js): one quiet line under the held head,
 * above the pad — never a step of the sheet. The words are for the eye; a
 * real date field lies over the whole line, invisible, so a thumb anywhere on
 * it opens the phone's own calendar and a screen reader meets a named field.
 * 44 px tall, like everything else tapped here. */
.sheet__day {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-3);
  min-height: var(--touch);
  margin: 0 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.sheet__day-words {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}

/* The day itself is the one word on the line that is read. */
.sheet__day-value {
  color: var(--ink);
  font-weight: 600;
}

.sheet__day-action {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sheet__day-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  /* 16 px: Chrome on Android zooms the page in on a smaller field. */
  font-size: 1rem;
  opacity: 0;
  cursor: pointer;
}

/* On a desk a click lands on a date field's digits; its calendar button is
 * stretched over the whole line, so the click opens the calendar there too. */
.sheet__day-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

/* The field is invisible, so the line wears its focus — on its own box, not
 * outside it: the pad's first keys are 4 px below. */
.sheet__day:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

/* A receipt dated another day: "Bill is dated 9 Oct — file it on that day".
 * An offer, so it is a button with an edge and no fill — it never looks like
 * something already done — across the sheet, under the reading's words. */
.sheet__offer {
  display: block;
  width: 100%;
  min-height: var(--touch);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

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