/* today.css — the Today tab only (REVAMP-DESIGN §2.2, §11 WP7).
 *
 * Every class is prefixed today-; anything foreign (the hero, the rail, a
 * chip, a card) is base.css's kit and is only PLACED here, never restyled.
 * Colours are the tokens: greyscale, the person's accent where the kit puts
 * it, red only past a limit. No text under 13px, sentence case, and width
 * rules answer to the column (@container), never to the viewport.
 */

/* ------------------------------------------------------------- the face -- */

/* One stable node the tab refills in place (tab_today.js `faceOf`). A grid
 * item of #view, so it takes the column's width and never its own. */
.today-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
}

/* The views mounts (§2.1): empty until an agent's view lands in one. */
.today-views-top,
.today-views-bottom { display: grid; gap: 12px; min-width: 0; }
.today-views-top:empty,
.today-views-bottom:empty { display: none; }
.today-views-top:not(:empty) { margin: 4px 0 14px; }
.today-views-bottom:not(:empty) { margin-top: 14px; }

/* The hairline between the hero and the day, edge to edge of the column. */
.today-rule {
  height: 1px;
  margin: 0 calc(-1 * var(--pad));
  background: var(--line);
}

/* ------------------------------------------------------------- the hero -- */

.today-hero { padding-top: 6px; }

/* Past a ceiling: the caption says so in red (text on --bg, 5.0 / 5.8). A
 * floor met is good news and stays in ink. */
.today-over { color: var(--red); font-weight: 560; }
.today-floor-met,
.today-lands { color: var(--ink-2); }
/* "Plan lands at 2,190, 60 under" holds together; the eaten words to its
 * left wrap. A narrow column (a 320 phone) stacks the two, as the mock does:
 * the caption is the hero's third row (top, meter, caption, foot). */
.today-lands { white-space: nowrap; }
@container (max-width: 300px) {
  .today-hero > :nth-child(3) { flex-direction: column; gap: 2px; }
  .today-hero > :nth-child(3) > :last-child { text-align: left; }
  .today-lands { white-space: normal; }
}

/* The foot: water on the left, +8 oz and Log food on the right. */
.today-foot {
  display: flex;
  /* The glass gauge's foot sits on the pills' foot: one line under both. */
  align-items: flex-end;
  gap: var(--s-2);
  width: 100%;
  min-width: 0;
}

.today-water-block {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.today-water-label { font: var(--t-cap); color: var(--ink-2); }
.today-water-value { font: 560 var(--t-body-size)/1.3 var(--font); white-space: nowrap; }
/* A glass waiting to send: the clock mark beside the total (§6). */
.today-water-wait { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; color: var(--ink-2); }
.today-water-bar {
  position: relative;
  display: block;
  height: 4px;
  max-width: 128px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.today-water-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: var(--ink-2);
}
/* One segment per glass (tab_today.js glassGauge): empty glasses are a
 * visible step on either ground (--line-strong), a drunk one is ink-2, a
 * glass under way fills from the left. */
.today-water-bar.today-glasses,
.today-water-gauge {
  display: flex;
  gap: 3px;
  height: 6px;
  max-width: 184px;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.today-glasses i,
.today-water-gauge i {
  position: relative;
  inset: auto;
  flex: 1 1 0;
  min-width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.today-glasses i.today-glass-full,
.today-water-gauge i.today-glass-full { background: var(--ink-2); }
.today-glasses i b,
.today-water-gauge i b {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink-2);
}
.today-glasses.today-glasses-met i,
.today-water-gauge.today-glasses-met i { background: var(--ink); }

.today-glass,
.today-log { flex: none; }

/* A narrow column (a 320 phone): the water says its number alone, as the
 * 320 mock does, and the two pills keep their full words. */
@container (max-width: 300px) {
  .today-water-label { display: none; }
  .today-water-value { font-size: var(--t-sub-size); }
}

/* Under 720 tall the hero compacts (base.css), and the water folds into the
 * foot as its number: the morning block must still show on a 375 x 667. */
@media (max-height: 719.98px) {
  .today-water-label,
  .today-water-bar { display: none; }
}

/* ------------------------------------------------------------- the rail -- */

.today-rail { padding-bottom: 8px; }


/* Chips under an item wrap, never scroll (the kit's .chips); an item's pill
 * keeps its words at 320. */
.today-weigh-in,
.today-meal-log,
.today-usual-log,
.today-doses-all,
.today-review { flex: none; }

/* The quit counter: one quiet line at the foot of the rail (§2.2 item 6). */
.today-quit {
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  padding: 6px 0 0 34px;
}
.today-quit-line { margin: 0; font: var(--t-sub); color: var(--ink-2); }
.today-quit-line b { font-weight: 600; color: var(--ink); }

/* The rail's fallback, when the engine could not load: plain rows. */
.today-rail-plain { padding-top: 8px; }

/* ------------------------------------------------------------ the title -- */

/* A past day's subtitle: the line, then Back to today IN the same line
 * (§2.2 item 1): the words take the row and wrap in their own column beside
 * the pill, so the hero never drops a row. Only where the words would get
 * under 200px (a 320 phone) does the pill take a line of its own. */
.today-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; }
.today-sub .today-sub-text { flex: 1 1 200px; min-width: 0; text-wrap: pretty; }
.today-back-today { flex: none; }

/* ------------------------------------------------------------ Food today -- */

.today-food { display: grid; gap: 18px; min-width: 0; }

/* Three macros across: the name, "64 of 175 g", a thin bar. Protein is a
 * floor and wears the person's mark; carbs and fat are grey, and a ceiling
 * crossed turns its number red. */
.today-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.today-macro { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; min-width: 0; }
.today-macro-name { font: var(--t-cap); color: var(--ink-2); }
.today-macro-value { font: 450 var(--t-cap-size)/1.35 var(--font); color: var(--ink-2); }
.today-macro-value b { font: 600 var(--t-body-size)/1.2 var(--font); color: var(--ink); }
.today-macro-bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.today-macro-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--ink-3);
}
.today-macro-protein .today-macro-bar i { background: var(--accent-mark); }
.today-macro[data-past] .today-macro-value b { color: var(--red); }
/* Some entries do not state the macro (§1: partial is a dashed track and the
 * word "incomplete"); none do: "Not stated" and an empty dashed track. */
/* The dash is drawn INSIDE the track's own 6px (an outline grew it to 10 and
 * sat it off the protein bar's line): short strokes of the empty track's
 * step, so the three bars share one top and one bottom. */
.today-macro[data-coverage] .today-macro-bar {
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 10px);
}
.today-macro[data-coverage="none"] .today-macro-value b { display: block; font-weight: 500; color: var(--ink-2); }

@container (max-width: 300px) {
  .today-macros { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* The sections of Food today are sections, not boxes (§4.6: no cards inside
 * cards, rows and sections have no box). */
.today-food > section {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.today-food > section > h2 {
  margin: 0 0 8px;
  font: var(--t-head);
  letter-spacing: -.01em;
}

/* The day's line in words (Build Spec 4 §B1, 7 §B): the ruled figures as
 * sentences ("Ceiling 1,800 kcal. Protein floor 175 g."), then where they
 * came from and any rule that moved them, one sentence each. */
.today-day {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.today-day-line {
  margin: 0;
  font: 600 var(--t-body-size)/1.4 var(--font);
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.today-day-meta {
  margin: 0;
  font: var(--t-sub);
  color: var(--ink-2);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.today-day-rule-name { font-weight: 560; color: var(--ink); }
.today-day-why { color: var(--ink-2); }

.today-earned {
  margin: 0;
  font: var(--t-sub);
  color: var(--ink-2);
}
.today-earned-kcal { font-weight: 600; color: var(--ink); }

/* The day's food, by slot: the one list Food today and the wide pane both
 * draw (§2.2): entries solid, planned meals outlined, each with its time. */
.today-foodlist { display: grid; min-width: 0; }
.today-slot + .today-slot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.today-slot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  margin-bottom: -4px;
}
.today-slot-name { margin: 0; font: 600 var(--t-row-size)/1.25 var(--font); letter-spacing: -.01em; }
.today-slot-sum { flex: 1 1 auto; min-width: 0; font: var(--t-sub); color: var(--ink-2); }
.today-slot-add { margin-left: auto; }
.today-slot-add,
.today-item-menu {
  flex: none;
  width: var(--tap);
  min-width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  color: var(--ink-2);
}
.today-slot-add svg,
.today-item-menu svg { width: 20px; height: 20px; }

.today-ledger-dup { margin: 0; }
.today-ledger-dup-body { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.today-ledger-dup-lede { margin: 0; }
.today-ledger-dup-line { color: var(--ink-2); font-weight: 400; }

/* The deficit monitor, amber (fb_b84bb749): the house caution — a red edge
 * and a mark, past a limit — as one tappable line under the hero. */
.today-monitor {
  width: 100%;
  margin: var(--s-2) 0 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.today-monitor-body { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.today-monitor-sub { color: var(--ink-2); font-weight: 400; }

/* The pool line (tab_today.js poolNode, fb_35d2172b): where a shared
 * budget stands on a pooled day. Quiet, as the kitchen card is. */
.today-pool { display: grid; gap: 4px; margin: var(--s-2) 0 var(--s-3); min-width: 0; }
.today-pool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.today-pool-k { font: 600 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.today-pool-total { font: 600 var(--t-row-size)/1.2 var(--font); white-space: nowrap; }
.today-pool-sub { font: 400 var(--t-sub-size)/1.35 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }

/* The Kitchen board (tab_today.js kitchenNode): the household's meal
 * announced now, under the hero — the kit's card, placed; the pans are the
 * kit's tags. Quiet: greyscale, no accent, nothing to tap. */
.today-kitchen { display: grid; gap: 6px; margin: var(--s-2) 0 var(--s-3); min-width: 0; }
.today-kitchen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.today-kitchen-k { font: 600 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.today-kitchen-when { font: 500 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); white-space: nowrap; }
.today-kitchen-name { font: 600 var(--t-row-size)/1.3 var(--font); overflow-wrap: anywhere; }
.today-kitchen-sub { font: 400 var(--t-sub-size)/1.35 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.today-kitchen-pans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.today-kitchen-note { font: 400 var(--t-cap-size)/1.3 var(--font); color: var(--ink-3); }

/* ---------------------------------------------------------- Earlier today - */

.today-earlier-list { display: grid; }
.today-earlier-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 9px 0;
}
.today-earlier-row + .today-earlier-row { border-top: 1px solid var(--line); }
.today-earlier-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.today-earlier-title { font: var(--t-row); overflow-wrap: anywhere; }
.today-earlier-sub { font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
.today-earlier-remove,
.today-earlier-open { flex: none; }

.today-empty {
  margin: 0;
  font: var(--t-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.today-hint { margin: 0; font: var(--t-sub); color: var(--ink-2); text-wrap: pretty; }
/* A past day with nothing logged (§6 "Empty"): one line, one quiet action. */
.today-rail-empty { display: grid; gap: 12px; justify-items: start; padding: 4px 0 8px; }

/* ------------------------------------------------------------- the water - */

.today-water { display: grid; gap: 14px; }
.today-water-taps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.today-water-add,
.today-water-custom { width: 100%; min-width: 0; padding-inline: 4px; }
.today-water-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
}
.today-water-left {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--t-sub);
  color: var(--ink-2);
}
.today-water-undo { flex: none; width: auto; min-width: 0; padding: 10px 12px; }
/* The screen shows the day as glasses (the gauge, larger) in place of the
 * kit's bar, and the day's taps under the buttons, newest first. */
.today-water-track { display: none; }
.today-water-figure { font: 600 var(--t-stat-size, 24px)/1.1 var(--font); font-stretch: 92%; color: var(--ink); }
.today-water .today-water-gauge { max-width: none; height: 12px; gap: 4px; margin-top: -4px; }
.today-water .today-water-gauge i { border-radius: 3px; }
.today-water-log { display: grid; margin-top: 6px; }
.today-water-log-head { margin: 0 0 4px; font: 600 var(--t-sub-size)/1.3 var(--font); color: var(--ink-2); }
.today-water-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border-top: 1px solid var(--line);
  font: var(--t-body);
}
.today-water-at { color: var(--ink-2); }
.today-water-amt { font-weight: 560; }
.today-water-entry.today-water-back .today-water-amt { font-weight: 450; color: var(--ink-2); }
.today-water-more { margin: 8px 0 0; font: var(--t-sub); color: var(--ink-2); }
.today-watersheet,
.today-waterform { display: grid; gap: 12px; }

/* -------------------------------------------------------------- the note -- */

.today-note { display: grid; gap: 8px; }
.today-note-text {
  min-height: 180px;
  resize: vertical;
  line-height: 1.5;
}
.today-note-foot { display: flex; align-items: center; min-height: 24px; }
.today-note-status { font: var(--t-cap); color: var(--ink-2); }

/* ------------------------------------------------- a change to approve --- */

.today-proposal { display: grid; gap: 12px; }
.today-proposal-change {
  margin: 0;
  font: var(--t-body);
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.today-proposal-why,
.today-proposal-meta,
.today-proposal-note {
  margin: 0;
  font: var(--t-sub);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.today-proposal-note { padding-top: 12px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ the Day sheet */

.today-daysheet { display: grid; gap: 14px; }
.today-daysheet-label { margin: 0; font: 600 var(--t-sub-size)/1.2 var(--font); color: var(--ink-2); }
.today-flags { min-width: 0; }
.today-copy { display: grid; gap: 6px; justify-items: start; }
.today-daysheet-today { justify-self: start; }

/* --------------------------------------------------------- the wide pane -- */

/* "Saturday, as it goes" (§3.4): the day's line, then Food today and the
 * week against its line. The pane is its own container. */
.today-wide { display: grid; gap: 14px; min-width: 0; }
.today-wide-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding-top: 10px;
}
/* The words join the head's grid: the title and the note pill share a row
 * (the face title's line), the sentence runs under both. */
.today-wide-words { display: contents; }
.today-wide-words > .today-wide-sub { grid-column: 1 / -1; grid-row: 2; }
.today-wide-title { margin: 0; font: var(--t-title); letter-spacing: -.02em; }
.today-wide-sub { margin: 0; font: var(--t-body); color: var(--ink-2); }
.today-wide-note { flex: none; }

/* One row of the day's food (Food today and the pane): a dot (solid logged,
 * outlined planned), the time, the name with what else is known, kcal over
 * protein, and the row's one action (its menu; a + on a planned meal). */
.today-wide-row {
  display: grid;
  /* The last column holds the row's one action: the ⋯ menu (44 square,
   * set to the right edge) or a planned meal's Log pill (52). */
  grid-template-columns: 10px 40px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.today-wide-row + .today-wide-row { border-top: 1px solid var(--line); }
button.today-wide-row { cursor: pointer; }
button.today-wide-row:hover { background: var(--surface-2); }
.today-wide-dot {
  display: inline-grid;
  place-items: center;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent-mark);
}
.today-wide-planned .today-wide-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent-mark);
}
/* Waiting to send (§6): the clock mark in place of the dot until it lands. */
.today-item.today-item-queued .today-wide-dot { width: 13px; height: 13px; background: none; color: var(--ink-2); }
.today-item.today-item-queued .today-wide-dot svg { width: 13px; height: 13px; }
.today-wide-time { font: var(--t-cap); color: var(--ink-2); }
.today-wide-untimed .today-wide-time { display: none; }
.today-wide-untimed .today-wide-name { grid-column: 2 / 4; }
.today-wide-name { display: grid; gap: 2px; min-width: 0; }
.today-item-name { font: 500 var(--t-body-size)/1.3 var(--font); overflow-wrap: anywhere; }
.today-wide-planned .today-item-name { color: var(--ink-2); font-weight: 450; }
.today-item-qty { color: var(--ink-2); font-weight: 450; }
.today-item-macros,
.today-chip-rule,
.today-chip-held { font: var(--t-cap); color: var(--ink-2); overflow-wrap: anywhere; }
.today-chip-ruled .today-chip-rule { color: var(--ink); }
/* A flag on a row is a neutral tag in words: nothing here is past a limit,
 * so nothing here is red (§1 rule 3). */
.today-item-flag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font: var(--t-cap);
  color: var(--ink-2);
}
.today-wide-kcal { display: grid; justify-items: end; text-align: right; }
.today-wide-kcal b { font: 600 var(--t-body-size)/1.2 var(--font); }
.today-wide-kcal span { font: var(--t-cap); color: var(--ink-2); }
.today-wide-kcal b .today-kcal-u { font: 450 var(--t-cap-size)/1 var(--font); color: var(--ink-2); }
/* A planned meal's action says what the tap does, the way the rail says it:
 * a quiet Log pill (the row itself is the button). A + here stood under the
 * slot's own + and read as the same action twice. */
.today-chip-add {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 32px;
  justify-self: end;
  border-radius: 999px;
  background: var(--quiet-bg);
  color: var(--ink);
  font: 560 var(--t-sub-size)/1 var(--font);
  transition: background-color .16s var(--ease);
}
button.today-wide-row:hover .today-chip-add { background: var(--quiet-press); }
.today-wide-row > .today-item-menu { justify-self: end; }
.today-item-menu-gap { width: var(--tap); justify-self: end; }
.today-wide-week { min-width: 0; }

/* ---------------------------------------------------------- the add sheet */

.today-sheet { display: grid; gap: 14px; }
.today-pane { display: grid; gap: 12px; }
.today-panehead { display: flex; align-items: center; gap: 10px; }
.today-back { width: auto; min-width: 0; padding: 8px 12px; border: 0; }
.today-panetitle {
  font: 600 var(--t-sub-size)/1.3 var(--font);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-options { display: grid; gap: 8px; }
.today-opt {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
}
.today-opt-label { font: 600 var(--t-body-size)/1.25 var(--font); color: var(--ink); }
.today-opt-hint { font: var(--t-sub); color: var(--ink-2); }
/* A route that cannot open right now keeps its label and says why, in text
 * that stays readable (AA): the row is quiet — an outline, no fill — rather
 * than faded, because the reason is the part a person needs to read. */
.today-opt.today-opt-blocked[aria-disabled="true"] {
  opacity: 1;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.today-opt.today-opt-blocked .today-opt-label { color: var(--ink-2); }

.today-results,
.today-recents {
  display: grid;
  max-height: 46dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.today-result,
.today-recent-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.today-result + .today-result,
.today-recent-row + .today-recent-row { border-top: 1px solid var(--line); }
.today-result:hover,
.today-recent-item:hover { background: var(--surface-2); }
.today-result-name { font: 500 var(--t-body-size)/1.3 var(--font); overflow-wrap: anywhere; }
.today-result-meta { font: var(--t-sub); color: var(--ink-2); }
.today-recent-row { display: flex; align-items: center; gap: 8px; }
.today-recent-item { flex: 1 1 auto; min-width: 0; }
.today-recent-edit { flex: none; width: auto; min-width: 72px; padding: 10px 12px; }
/* The slot segmented appears at the top of the add sheet and inside the
 * manual form; zero minimum so four labels never set the sheet's width. */
.today-slotpick { min-width: 0; }

.today-form { display: grid; gap: 12px; }
.today-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.today-weighed-head { display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
.today-weighed-toggle {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--accent-mark);
  cursor: pointer;
}
.today-form-total { margin: 0; min-height: 1em; font: 500 var(--t-sub-size)/1.4 var(--font); color: var(--ink-2); }
.today-form-actions { display: grid; gap: 10px; }

.today-menu { display: grid; gap: 10px; }
.today-menu-macros { margin: 0; font: var(--t-sub); color: var(--ink-2); }

/* ------------------------------------------------------------ the barcode */

.today-scan { gap: 10px; }
.today-scan-stage {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  line-height: 0;
}
.today-scan-stage[hidden] { display: none; }
.today-scan-video { display: block; width: 100%; max-height: 46dvh; object-fit: cover; }
.today-scan-controls { display: grid; gap: 8px; }
.today-scan-status {
  min-height: 1.45em;
  font: var(--t-sub);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.today-scan-manual {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.today-scan-code { font-variant-numeric: tabular-nums; }
.today-scan-hint { margin: 0; font: var(--t-sub); color: var(--ink-2); }

/* ------------------------------------------------------ the duplicate sheet */

/* MCP QA 2026-09-01 §1: what is already in the slot, what is about to go in,
 * and the choice. Two stacked blocks and two buttons, so the two numbers can
 * be compared at a glance. */
.today-dup { display: grid; gap: 12px; }
.today-dup-lede { margin: 0; font: var(--t-body); color: var(--ink-2); }
.today-dup-entry {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.today-dup-new { background: none; border-style: dashed; border-color: var(--edge); }
.today-dup-name { font: 600 var(--t-body-size)/1.3 var(--font); color: var(--ink); overflow-wrap: anywhere; }
.today-dup-meta { font: var(--t-sub); color: var(--ink-2); overflow-wrap: anywhere; }
.today-dup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.today-dup-yes,
.today-dup-no { width: 100%; min-width: 0; padding-inline: 6px; }

/* -------------------------------------------------------- report, errors -- */

.today-report-body { display: grid; gap: 14px; }
.today-report-section { display: grid; gap: 4px; }
.today-report-h { margin: 0 0 2px; font: var(--t-head); letter-spacing: -.01em; }
.today-report-line,
.today-report-partial,
.today-report-wait,
.today-report-error { margin: 0; font: var(--t-body); color: var(--ink-2); text-wrap: pretty; }

.today-error { display: grid; gap: 4px; }