:root {
  /* ---------- Light-first theme + dark parity (S2, fable-ui-audit-2026-08-25.md §9/§12) ----------
     Every surface/ink/status color below is a semantic custom property;
     components never reference a raw hex. The @media (prefers-color-scheme:
     dark) block further down remaps these exact same names to the §9 dark
     values — that one block is the entire dark theme. Deep blue is the
     owner-approved accent (2026-08-25); teal was rejected as it visually
     approaches the semantic --success green in dark mode. */
  color-scheme: light dark;
  --bg: #F6F7F9;
  --bg-glow: rgba(10,90,224,.05);
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --surface-3: #EBEEF2;
  --ink: #111827;
  --ink-2: #475467;
  --ink-3: #667085;
  --accent: #0A5AE0;
  --accent-pressed: #084BBB;
  --accent-ink: #FFFFFF;        /* on-accent text; ≈5.9:1 on --accent */
  --accent-soft-bg: rgba(10,90,224,.08);
  --accent-soft-border: rgba(10,90,224,.24);
  --focus-ring: rgba(10,90,224,.18);
  --success: #157F3D;
  --success-ink: #FFFFFF;       /* on-success text; ≈5.1:1 on --success */
  --success-bg: #EAF6EE;
  --danger: #B42318;
  --danger-bg: #FDECEA;
  --border: #E4E7EC;
  --border-soft: #E4E7EC;
  --border-strong: #D0D5DD;
  --focus: var(--accent);
  /* Training-calendar heat scale (1/2/3+ sessions). --heat-count-ink is
     measured on --heat-1/2 (12.15:1 and 6.40:1); 3+ uses the existing
     on-accent pair. */
  --heat-1: #BFD7FF;
  --heat-2: #5B9BFF;
  --heat-3: var(--accent);
  --heat-count-ink: #101828;
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 8px 24px rgba(16,24,40,.08);
  --shadow: var(--shadow-sm);
  --tap: 44px;

  /* Type scale — one coherent set of semantic sizes/weights/spacing.
     Values match the existing rendering; centralizing keeps hierarchy consistent. */
  --fs-eyebrow: .72rem;
  --fs-caption: .74rem;
  --fs-label: .9rem;
  --fs-body: 1rem;
  --fs-h3: 1.05rem;
  --fs-h2: 1.35rem;
  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --ls-eyebrow: .16em;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Spacing scale — intra-component through section separation. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
}

/* ---------- Dark parity ----------
   Same semantic property names, §9 dark values only. No selector below this
   point should hold a raw hex/rgba surface, ink, or status color — every one
   consumes a token above, so this single block is the entire dark theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1116;
    --bg-glow: rgba(108,168,255,.10);
    --surface: #151B22;
    --surface-2: #1D2530;
    --surface-3: #232C39;
    --ink: #F2F5F8;
    --ink-2: #A8B3C1;
    --ink-3: #7A8797;
    --accent: #6CA8FF;
    --accent-pressed: #8CBBFF;
    --accent-ink: #08121F;      /* on-accent text; ≈7.8:1 on --accent */
    --accent-soft-bg: rgba(108,168,255,.16);
    --accent-soft-border: rgba(108,168,255,.32);
    --focus-ring: rgba(108,168,255,.22);
    --success: #4ADE80;
    --success-ink: #08121F;
    --success-bg: rgba(74,222,128,.14);
    --danger: #F97066;
    --danger-bg: rgba(249,112,102,.14);
    --border: rgba(255,255,255,.09);
    --border-soft: rgba(255,255,255,.06);
    --border-strong: rgba(255,255,255,.16);
    --heat-1: #2A4A78;
    --heat-2: #3E6FB0;
    --heat-3: var(--accent);
    --heat-count-ink: #FFFFFF; /* 8.94:1 and 5.12:1 on dark heat-1/2 */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: radial-gradient(120% 90% at 50% -8%, var(--bg-glow), transparent 60%), var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  max-width: 100%;
  overflow-x: hidden;
}
body.food-capture-open { overflow: hidden; overscroll-behavior: none; }

/* ---------- Layout ---------- */
.shell {
  width: min(760px, calc(100% - 28px));
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right)) 40px max(0px, env(safe-area-inset-left));
}
.app-stack { display: grid; gap: 14px; }

/* ---------- Typography ---------- */
.hero { margin: 6px 0 18px; }
.eyebrow { color: var(--accent); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: var(--fs-eyebrow); margin: 0 0 .45rem; }
h1 { font-size: clamp(1.7rem, 5.4vw, 2.6rem); line-height: var(--lh-tight); margin: .12em 0; letter-spacing: -.01em; overflow-wrap: break-word; }
h2 { margin-top: 0; font-size: var(--fs-h2); letter-spacing: -.01em; overflow-wrap: break-word; }
h3 { margin: .2rem 0 .6rem; font-size: var(--fs-h3); overflow-wrap: break-word; }
p { color: var(--ink-3); margin: .4rem 0; line-height: var(--lh-body); }

/* ---------- Navigation ---------- */
.tab-nav {
  position: sticky; top: 10px; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
  padding: 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); backdrop-filter: blur(18px);
}
.tab-button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; color: var(--ink-3); border: 0; border-radius: 999px;
  padding: 8px 6px; font-size: .8rem; font-weight: 600; cursor: pointer;
  min-height: var(--tap); transition: color .18s ease, background .18s ease;
}
.tab-icon { width: 22px; height: 22px; display: block; }
.tab-label { max-width: 100%; white-space: nowrap; text-align: center; }
.tab-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-button.active { background: var(--accent); color: var(--accent-ink); }
.tab-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Cards & forms ---------- */
.card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); }
.row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.overview-actions { display: flex; gap: 8px; align-items: center; }
.form { display: grid; gap: 14px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.full { grid-column: 1 / -1; }
label { display: grid; gap: 6px; color: var(--ink-2); font-size: var(--fs-label); font-weight: var(--fw-medium); overflow-wrap: break-word; }
input, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink); padding: 12px 14px;
  font: inherit; font-size: 16px; min-height: var(--tap);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Native iOS date/select controls have a wide intrinsic minimum. Let controls
   and their grid items shrink instead of widening the page or review sheet. */
input, textarea, select { min-width: 0; max-width: 100%; }
.two-col > *, .review-grid > *, .review-controls > * { min-width: 0; }
textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: 1; }

button { border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 12px 18px; font: inherit; cursor: pointer; min-height: var(--tap); transition: transform .12s ease, background .15s ease, opacity .15s ease; }
button:active { transform: scale(.97); }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
button.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bg); }

/* Reviewed body-history deletion (v101). */
.body-delete-review-sheet {
  width: min(100%, 30rem); max-height: min(760px, calc(100dvh - 28px));
  display: flex; flex-direction: column; overflow: hidden;
  color: var(--ink); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.body-delete-review-scroll { padding: var(--space-6); overflow: auto; overscroll-behavior: contain; }
.body-delete-review-scroll h2 { margin-top: 0; }
.body-delete-review-fields { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.body-delete-review-fields dt { color: var(--ink-2); font-weight: var(--fw-semibold); }
.body-delete-review-fields dd { margin: 0; overflow-wrap: anywhere; }
.body-delete-review-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-6) max(var(--space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.body-delete-review-actions button { flex: 1 1 8rem; }
.body-undo-region { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; padding: var(--space-4); background: var(--success-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.body-undo-region p { margin: var(--space-1) 0 0; }
/* Reviewed workout-session deletion (v102) reuses the body review sheet. */
/* Exact summary values need the full line on narrow review sheets. */
#nutrition-summary-delete-review-fields { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
#nutrition-summary-delete-review-fields dd { margin: 0 0 var(--space-3); white-space: pre-wrap; }
#nutrition-summary-delete-review-knowledge { padding-left: var(--space-5); overflow-wrap: anywhere; }
.workout-delete-review-sets { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding-left: var(--space-6); overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .body-delete-review-scroll { padding: var(--space-4); }
  .body-delete-review-actions { padding-inline: var(--space-4); }
}
.icon-btn { width: var(--tap); height: var(--tap); padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-row, .mini-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-actions button { padding: 9px 14px; font-size: .85rem; min-height: var(--tap); }
.compact { width: auto; padding-inline: 16px; min-height: var(--tap); }
.primary-action { width: 100%; margin-top: 4px; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }
.error, .message.error { color: var(--danger); }
.message.ok { color: var(--success); }
.message { min-height: 1.2em; margin: 6px 0 0; font-size: .92rem; }
.muted { color: var(--ink-3); margin: 0; }
.hidden { display: none !important; }

/* ---------- Overview ---------- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.status-grid article { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; }
.status-grid article.status-wide { grid-column: 1 / -1; }
.status-grid span { display: block; color: var(--ink-2); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.status-grid strong { display: block; font-size: 1.02rem; line-height: var(--lh-snug); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.progression-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.progression-list li { display: grid; gap: 3px; }
.progression-list span { text-transform: none; letter-spacing: 0; margin: 0; font-size: .9rem; }

/* ---------- Today command center ----------
   S3: compact Monitor + Operate surface. One Now card, four operational rows,
   a read-only weekly strip, then collapsed evidence. */
.today-command-center { display: grid; gap: var(--space-3); }
.today-command-center > .row { margin-bottom: 0; }
.today-now {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius); background: var(--accent-soft-bg); min-width: 0;
}
.today-now-main { display: grid; gap: 3px; min-width: 0; }
.today-now-chip {
  justify-self: start; margin: 0; padding: 3px 8px; border-radius: 999px;
  background: var(--surface); color: var(--accent); border: 1px solid var(--accent-soft-border);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.today-now h3 { margin: 0; font-size: 1.12rem; line-height: var(--lh-snug); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
.today-now p { margin: 0; color: var(--ink-2); }
.today-now-cta:empty { display: none; }
.today-now-cta .today-plan-cta { width: 100%; min-height: var(--tap); }
.day-loop-rail {
  display: grid; gap: 0; border: 1px solid var(--border-soft);
  border-radius: var(--radius); background: var(--surface-2); overflow: hidden; min-width: 0;
}
.day-loop-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3);
  align-items: center; min-height: var(--tap); width: 100%; padding: 9px 12px;
  border-radius: 0; background: transparent; color: var(--ink); box-shadow: none;
  border-top: 1px solid var(--border-soft); text-align: left;
}
.day-loop-row:first-child { border-top: 0; }
.day-loop-row:active { transform: none; background: var(--accent-soft-bg); }
.day-loop-copy { display: grid; gap: 1px; min-width: 0; }
.day-loop-label { color: var(--ink-3); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.day-loop-value { font-size: .94rem; line-height: var(--lh-snug); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.day-loop-note { color: var(--ink-3); font-size: .78rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.day-loop-action { color: var(--accent); font-size: .86rem; font-weight: var(--fw-bold); white-space: nowrap; }
.day-loop-row.is-complete .day-loop-value { color: var(--success); }
.readiness-completion {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 8px 10px 8px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink-2); min-width: 0;
}
.readiness-completion p { margin: 0; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.readiness-completion-dismiss {
  width: var(--tap); min-width: var(--tap); min-height: var(--tap); padding: 0; flex: 0 0 auto;
  border: 0; background: transparent; color: var(--ink-3); box-shadow: none; font-size: 1.25rem;
}
.weekly-today-strip {
  border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2);
  padding: 9px 12px; display: grid; gap: var(--space-1); min-width: 0;
}
.weekly-today-strip summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: var(--fw-bold); }
.weekly-today-strip p { margin: 0; font-size: .86rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.weekly-today-strip .weekly-rec-rationale { color: var(--ink-3); }
.today-plan-secondary { margin: 0; padding: 0; border-left-width: 1px; }
.today-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0 0; }
.today-action {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  text-align: left; padding: 14px; min-height: 72px; width: 100%;
  border-radius: var(--radius); background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border); color: var(--ink); box-shadow: none;
}
.today-action:active { transform: scale(.99); }
.today-action-icon {
  width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--accent); color: var(--accent-ink);
}
.today-action-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.today-action-body { display: grid; gap: 2px; min-width: 0; }
.today-action-label { font-weight: var(--fw-heavy); font-size: var(--fs-body); }
.today-action-sub { color: var(--ink-3); font-size: .76rem; font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* Goal-aware daily snapshot: a vertical stack of "remaining vs target" metric
   rows reads more clearly at 430px (and with larger text) than cramped columns. */
.today-snapshot { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.today-snapshot:empty { display: none; }
.snapshot-metrics { display: grid; gap: var(--space-2); }
.snapshot-metric { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.snapshot-metric-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.snapshot-metric-label { color: var(--ink-3); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; }
.snapshot-metric-value { font-size: 1.02rem; line-height: var(--lh-snug); font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.snapshot-metric-sub { color: var(--ink-3); font-size: .8rem; font-variant-numeric: tabular-nums; margin-top: 0; overflow-wrap: anywhere; }
.snapshot-metric .progress-track { margin-top: var(--space-1); }
.snapshot-metric--plain .snapshot-metric-sub { margin-top: 0; }
/* Over target is neutral, never alarming — protein/calorie overshoot is not "bad". */
.snapshot-metric.is-over .snapshot-metric-value { color: var(--ink-2); }
.progress-fill.is-over { background: var(--border-strong); }
.snapshot-empty, .snapshot-error { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space-3); display: grid; gap: var(--space-1); }
.snapshot-empty strong { font-size: 1rem; font-weight: var(--fw-bold); }
.snapshot-empty span { color: var(--ink-3); font-size: .86rem; }
.snapshot-error { border-color: var(--danger-bg); }
.snapshot-error span { color: var(--danger); font-size: .86rem; }
.snapshot-goals-link { justify-self: start; width: auto; margin-top: var(--space-1); padding: var(--space-2) 14px; min-height: var(--tap); background: transparent; border: 1px solid var(--border); color: var(--accent); font-weight: var(--fw-semibold); font-size: .86rem; border-radius: var(--radius-sm); }

/* ---------- S8 shared tab-level loading/empty/error/retry primitive (issue #41) ----------
   One coherent visual language reused by Nutrition, Workouts, Trends, and
   Settings top-level loads (Today keeps its already-shipped equivalent
   .snapshot-empty/.snapshot-error/.snapshot-goals-link markup above, which
   this mirrors so every tab reads as one system). Empty by default so an
   idle/successful tab spends no layout space on it. */
.tab-state { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space-3); display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--ink-3); font-size: .86rem; overflow-wrap: anywhere; }
.tab-state:empty { display: none; margin: 0; padding: 0; border: 0; }
.tab-state p { margin: 0; color: var(--ink-3); font-size: .86rem; overflow-wrap: anywhere; }
.tab-state-error { border-color: var(--danger-bg); color: var(--danger); }
.tab-state-error p { color: var(--danger); }
.tab-state-retry { justify-self: start; width: auto; padding: var(--space-2) 14px; min-height: var(--tap); background: transparent; border: 1px solid var(--border); color: var(--accent); font-weight: var(--fw-semibold); font-size: .86rem; border-radius: var(--radius-sm); }
.app-hydration-status,
.tab-hydration-status {
  min-height: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center;
  color: var(--ink-3); font-size: .9rem; font-weight: var(--fw-semibold);
}
.hydration-retry {
  width: auto; min-height: var(--tap); padding: var(--space-2) 18px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--accent); font: inherit;
}
.app-hydration-status[hidden],
.tab-hydration-status[hidden] { display: none; }
.tab-panel { position: relative; }
.tab-panel > .tab-hydration-status {
  position: absolute; inset: 0 0 auto; z-index: 2;
  box-sizing: border-box; padding: var(--space-2);
  background: var(--surface);
}
#app-card.is-initial-hydrating > :not(.app-hydration-status),
.tab-panel.is-initial-hydrating > :not(.tab-hydration-status) { visibility: hidden; }

/* ---------- S8 global connectivity/recovery banner (issue #41) ----------
   Hidden (zero layout height) when online/healthy; expands only to report a
   real navigator.onLine transition (see index.html CONNECTIVITY_BANNER).
   Same :empty-collapse technique as .tab-state above, deliberately *not*
   max-height/overflow:hidden: a fixed max-height can clip the message at
   larger text sizes, which would defeat Dynamic Type resilience, and
   in some fixed-size collapse techniques an element that's still occupying
   zero rendered height reads as not-currently-visible to some assistive
   tech. Setting text and un-collapsing happen in the same synchronous
   update, so the role="status" content change stays announceable, and an
   empty banner is honestly "nothing to say," not a clipped one. */
.connectivity-banner {
  padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--fs-label);
  font-weight: var(--fw-semibold); overflow-wrap: anywhere; text-align: center;
}
.connectivity-banner:empty { display: none; margin: 0; padding: 0; border: 0; }
/* Update ready: a new shell is installed but a reload would destroy an open
   dialog, unsaved input, or a running workout. Sits above the modal backdrop
   (z-index 60) and the workout keypad (80) so it stays visible in exactly the
   states that deferred it. */
.update-ready {
  position: fixed; z-index: 90;
  top: calc(var(--space-2) + env(safe-area-inset-top));
  left: max(var(--space-3), env(safe-area-inset-left));
  right: max(var(--space-3), env(safe-area-inset-right));
  display: grid; gap: var(--space-2); padding: var(--space-3);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
  border: 1px solid var(--accent-soft-border); box-shadow: var(--shadow-md);
}
.update-ready-title { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.update-ready-detail { margin: 0; color: var(--ink-2); font-size: var(--fs-caption); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.update-ready-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--space-2); }
.update-ready-actions button { min-height: var(--tap); }
.connectivity-banner-offline { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-soft); }
.connectivity-banner-online { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-bg); }
.tab-state-offline, .snapshot-offline {
  background: var(--surface-2); color: var(--ink-3); border-color: var(--border-soft);
}
.offline-action-blocked {
  opacity: .56;
  cursor: not-allowed;
  filter: saturate(.55);
}
/* Grounded Coach's note (issues #26/#28): one calm synthesized line from stored
   data, distinguished by an accent edge. Hidden entirely when there is nothing
   grounded to say (the .hidden utility carries !important, so the JS toggle wins). */
.today-coach { margin: var(--space-4) 0 0; padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); display: grid; gap: var(--space-2); }
.today-coach-label { margin: 0; color: var(--ink-3); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-semibold); }
.today-coach-body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-snug); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.today-coach-provenance { margin: 0; color: var(--ink-3); font-size: .76rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
/* Today Plan (issue #63): 0-4 bounded, read-only actions. Each item discloses
   its full contract (freshness/confidence/tradeoff/next feedback) behind a
   44px-floor <details> toggle so the collapsed card stays compact. */
.today-plan { margin: var(--space-4) 0 0; padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); display: grid; gap: var(--space-2); min-width: 0; max-width: 100%; }
.today-plan.today-plan-secondary { margin: 0; padding: 0; border-left-width: 1px; }
.today-plan-label { margin: 0; color: var(--ink-3); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-semibold); }
.today-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); min-width: 0; }
.today-plan-item { background: var(--surface-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); display: grid; gap: var(--space-1); min-width: 0; max-width: 100%; }
.today-plan-action { margin: 0; font-size: var(--fs-body); line-height: var(--lh-snug); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.today-plan-why { margin: 0; color: var(--ink-3); font-size: .86rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
/* A real, wide 44px CTA — this is a navigating action, not a subtle link. */
.today-plan-cta { width: 100%; min-height: var(--tap); padding: 10px 16px; font-size: .9rem; }
.today-plan-secondary-disclosure > summary {
  min-height: var(--tap); padding: 0 12px; cursor: pointer; display: flex;
  align-items: center; list-style: none; color: var(--accent); font-weight: var(--fw-bold);
}
.today-plan-secondary-disclosure > summary::marker { content: ''; }
.today-plan-secondary-disclosure > summary::-webkit-details-marker { display: none; }
.today-plan-secondary-disclosure > summary::after {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s ease;
}
.today-plan-secondary-disclosure[open] > summary::after { transform: rotate(45deg); }
.today-plan-secondary-disclosure > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.today-plan-secondary-body { padding: 0 var(--space-3) var(--space-3); }
.today-plan-details summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; gap: 6px; list-style: none; color: var(--accent); font-weight: var(--fw-semibold); font-size: .84rem; }
/* display:flex on <summary> already suppresses the native marker in most
   engines; hide it explicitly (incl. WebKit's own pseudo) and draw an
   accessible chevron cue that flips with [open] so disclosure state stays
   visible without depending on a browser-default triangle. */
.today-plan-details summary::marker { content: ''; }
.today-plan-details summary::-webkit-details-marker { display: none; }
.today-plan-details summary::after {
  content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .18s ease;
}
.today-plan-details[open] summary::after { transform: rotate(45deg); }
.today-plan-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.today-plan-meta { margin: var(--space-1) 0 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px var(--space-2); font-size: .8rem; min-width: 0; }
.today-plan-meta dt { color: var(--ink-3); font-weight: var(--fw-semibold); }
.today-plan-meta dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.all-stats-card { margin-top: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 4px 14px; background: var(--surface-3); }
.all-stats-card > summary { cursor: pointer; font-weight: var(--fw-bold); font-size: var(--fs-h3); min-height: var(--tap); display: flex; align-items: center; }
.all-stats-card[open] > summary { margin-bottom: 2px; }
.all-stats-card .status-grid { margin-top: 6px; margin-bottom: 8px; }
.settings-account { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; overflow-wrap: anywhere; }
.settings-account .muted { margin: 0; }

/* ---------- Coaching profile (issue #74) ----------
   A compact single-column disclosure inside Settings: every control keeps the
   44px tap floor and a zero-minimum track, so the long form cannot widen the
   page on a 430px phone. */
.coaching-profile-status { margin: 6px 0 10px; font-size: .88rem; overflow-wrap: anywhere; }
.coaching-profile-card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.coaching-profile-card > summary { cursor: pointer; font-weight: var(--fw-semibold); min-height: var(--tap); display: flex; align-items: center; color: var(--accent); }
.coaching-profile-card > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.coaching-profile-form { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
.coaching-profile-form > * { min-width: 0; max-width: 100%; }
.coaching-profile-form .profile-answered { grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: var(--tap); font-size: .86rem; }
.coaching-profile-form .profile-answered input { width: 22px; min-width: 22px; min-height: 22px; margin: 0; }
.coaching-profile-form .profile-abstain { margin: 0; font-size: .84rem; overflow-wrap: anywhere; }
.coaching-profile-form button[disabled], .coaching-profile-form input[disabled], .coaching-profile-form select[disabled], .coaching-profile-form textarea[disabled] { opacity: .55; }

/* ---------- Weekly recommendation status (issues #29 / #50) ----------
   A read-only verdict under the coaching profile. Every track is
   zero-minimum and every sentence wraps, so a long reason cannot widen a
   430px phone. Nothing here is tappable: it states status only. */
.weekly-eligibility-status { margin: 6px 0 10px; font-size: .88rem; overflow-wrap: anywhere; }
.weekly-eligibility { display: grid; gap: var(--space-2); min-width: 0; max-width: 100%; }
.weekly-eligibility > * { min-width: 0; max-width: 100%; }
.weekly-eligibility-lane { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); display: grid; gap: var(--space-1); min-width: 0; }
.weekly-eligibility-lane-head { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.weekly-eligibility-lane-name { font-weight: var(--fw-semibold); overflow-wrap: anywhere; min-width: 0; }
.weekly-eligibility-verdict { justify-self: end; border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: var(--fw-semibold); white-space: nowrap; }
.weekly-eligibility-verdict.is-possible { background: var(--success-bg); color: var(--success); }
.weekly-eligibility-verdict.is-blocked { background: var(--surface-3); color: var(--ink-2); }
.weekly-eligibility-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.weekly-eligibility-reasons li { color: var(--ink-2); font-size: .86rem; line-height: var(--lh-snug); overflow-wrap: anywhere; min-width: 0; }
.weekly-eligibility-clear { margin: 0; color: var(--ink-2); font-size: .86rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.weekly-eligibility-meta { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px var(--space-2); font-size: .8rem; min-width: 0; }
.weekly-eligibility-meta dt { color: var(--ink-3); font-weight: var(--fw-semibold); }
.weekly-eligibility-meta dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.weekly-eligibility-note { margin: 0; color: var(--ink-3); font-size: .8rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }

/* ---------- Weekly review (v59) ---------- */
.weekly-review-status { margin: 6px 0 10px; font-size: .88rem; overflow-wrap: anywhere; }
.weekly-review-view { display: grid; gap: var(--space-2); min-width: 0; max-width: 100%; }
.weekly-review-view[hidden] { display: none; }
.weekly-review-view > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.weekly-review-card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); display: grid; gap: var(--space-3); min-width: 0; }
.weekly-review-card h3, .weekly-review-card p { margin: 0; overflow-wrap: anywhere; }
.weekly-review-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
.weekly-review-metric { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-2); display: grid; gap: 3px; min-width: 0; }
.weekly-review-metric-label, .weekly-review-metric-detail { color: var(--ink-3); font-size: .78rem; overflow-wrap: anywhere; }
:is(.weekly-review-sources, .weekly-review-context-sources) { min-width: 0; border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; font-size: .8rem; overflow-wrap: anywhere; }
:is(.weekly-review-sources, .weekly-review-context-sources) summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 2px; }
:is(.weekly-review-sources, .weekly-review-context-sources) summary:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 2px; }
:is(.weekly-review-sources, .weekly-review-context-sources) ul { margin: 4px 0 0; padding-inline-start: 1.25rem; }
:is(.weekly-review-sources, .weekly-review-context-sources) li { overflow-wrap: anywhere; }
:is(.weekly-review-sources, .weekly-review-context-sources) p { margin: 4px 0 0; }
.weekly-review-section { border-top: 1px solid var(--border-soft); padding-top: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.weekly-review-disclaimer { color: var(--ink-3); font-size: .8rem; line-height: var(--lh-snug); }
.weekly-review-proposal-cta { min-height: var(--tap); width: 100%; min-width: 0; }
@media (max-width: 360px) { .weekly-review-metrics { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Weekly recommendation ---------- */
.weekly-recommendation-view { display: grid; gap: var(--space-2); min-width: 0; max-width: 100%; }
.weekly-recommendation-view > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.weekly-rec-card { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); display: grid; gap: var(--space-1); min-width: 0; }
.weekly-rec-code { font-weight: var(--fw-semibold); color: var(--ink); overflow-wrap: anywhere; }
.weekly-rec-summary { margin: 0; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.weekly-rec-rationale { margin: 0; color: var(--ink-2); font-size: .86rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.weekly-rec-tradeoffs { margin: 0; padding: 0 0 0 var(--space-2); display: grid; gap: 4px; }
.weekly-rec-tradeoffs li { color: var(--ink-2); font-size: .84rem; line-height: var(--lh-snug); overflow-wrap: anywhere; min-width: 0; }
.weekly-rec-confidence { margin: 0; font-size: .8rem; color: var(--ink-3); overflow-wrap: anywhere; }
.weekly-rec-decision-row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.weekly-rec-decision-row button { flex: 1 1 auto; min-width: 0; }
.weekly-rec-modification { width: 100%; min-width: 0; box-sizing: border-box; }
.weekly-rec-disclaimer { margin: 0; font-size: .8rem; color: var(--ink-3); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.weekly-rec-status { margin: 6px 0 10px; font-size: .88rem; overflow-wrap: anywhere; }

/* ---------- Trends overview charts (S6 issue #41; v52 axes/calendar correction) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.trend-block { min-width: 0; max-width: 100%; }
.trend-block + .trend-block { margin-top: var(--space-4); }
.trend-block h3 { margin: 0 0 8px; font-size: var(--fs-h3); }
.trend-chart { min-width: 0; max-width: 100%; overflow: hidden; display: block; }
.activity-chart { min-width: 0; max-width: 100%; overflow: hidden; }
.trend-svg { width: 100%; height: 150px; max-width: 100%; display: block; }
.trend-line { stroke: var(--accent); stroke-width: 2; fill: none; }
.trend-dot { fill: var(--accent); }
.trend-dot-endpoint { fill: var(--accent); stroke: var(--surface); stroke-width: 1; }
.trend-gridline { stroke: var(--border); stroke-width: 1; }
.trend-tick { stroke: var(--border-strong); stroke-width: 1; }
.trend-axis-label { fill: var(--ink-3); font-size: 8px; }
.trend-axis-y { text-anchor: end; dominant-baseline: middle; }
.trend-axis-x { text-anchor: middle; }
.trend-point-label { fill: var(--ink-2); font-size: 8px; font-weight: 700; text-anchor: middle; }
.trend-caption { margin: 8px 0 0; color: var(--ink-3); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.trend-empty { margin: 0; color: var(--ink-3); font-size: .95rem; }

/* 12-week training-activity calendar/heatmap (replaces the S6 bars view). */
.calendar-wrap { width: 100%; max-width: 100%; min-width: 0; }
.calendar-months { display: flex; padding-left: 18px; gap: 3px; }
.calendar-month-label { flex: 1 1 0; min-width: 0; font-size: 9px; color: var(--ink-3); }
.calendar-body { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.calendar-weekdays { display: flex; flex-direction: column; gap: 3px; width: 14px; flex-shrink: 0; }
.calendar-weekday-label { font-size: 8px; line-height: 15px; height: 15px; color: var(--ink-3); text-align: center; }
.calendar-grid { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; }
.calendar-week-col { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; max-width: 18px; }
.calendar-cell {
  width: 100%; aspect-ratio: 1 / 1; max-width: 18px; max-height: 18px;
  border-radius: 3px; border: 1px solid var(--border); background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 700; color: var(--ink-3); line-height: 1;
}
.calendar-cell.calendar-level-1 { background: var(--heat-1); border-color: transparent; color: var(--heat-count-ink); }
.calendar-cell.calendar-level-2 { background: var(--heat-2); border-color: transparent; color: var(--heat-count-ink); }
.calendar-cell.calendar-level-3 { background: var(--heat-3); border-color: transparent; color: var(--accent-ink); }
.calendar-cell.calendar-future { background: transparent; border-style: dashed; opacity: .4; }
.calendar-legend { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.calendar-legend-item { display: flex; align-items: center; gap: 3px; font-size: var(--fs-caption); color: var(--ink-3); overflow-wrap: anywhere; }
.calendar-legend-item .calendar-cell { width: 12px; height: 12px; max-width: 12px; max-height: 12px; flex-shrink: 0; }

/* ---------- History ---------- */
.history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.history-list li { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.history-list li:first-child { border-top: 0; }
.history-list strong { font-weight: 600; }
.history-list span { color: var(--ink-3); font-size: .9rem; }

/* ---------- Nutrition macro cards ---------- */
.macro-dashboard { display: grid; gap: 10px; margin-top: 16px; }
.macro-card { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px; }
.macro-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.macro-row strong { font-size: 1rem; font-weight: 600; }
.macro-row span { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .92rem; }
.macro-card.no-target { display: flex; justify-content: space-between; align-items: baseline; }
.macro-card.no-target .macro-row { margin: 0; }
.macro-card.no-target .macro-amount { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.progress-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.quick-copy-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 0 14px; }
.quick-copy-row p { margin: 0; }
.copy-nutrition-card summary { cursor: pointer; font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.copy-nutrition-card > .muted { margin: 8px 0 14px; }
.copy-nutrition-card .form { margin-bottom: 14px; }
.copy-preview { margin: 12px 0; padding: 13px; border: 1px solid var(--accent-soft-border); border-radius: var(--radius); background: var(--accent-soft-bg); }
.copy-preview-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; color: var(--ink); font-weight: var(--fw-semibold); }
.copy-preview-head span:last-child { text-align: right; }
.copy-preview-list { margin: 8px 0 0; padding-left: 20px; max-height: 190px; overflow-y: auto; }
.copy-preview-list li { margin: 5px 0; overflow-wrap: anywhere; }

/* ---------- Saved meals / templates ---------- */
.saved-meals-card summary { cursor: pointer; font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.saved-meals-card > .muted { margin: 8px 0 14px; }
.saved-meals-card .form { margin-bottom: 14px; }
.saved-meals-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 8px; }
.inline-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.inline-check input { width: auto; min-height: 0; }
.saved-meals-list { display: grid; gap: 10px; }
.saved-meal-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; }
.saved-meal-item.archived { opacity: .62; }
.saved-meal-item > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.saved-meal-item strong { overflow-wrap: anywhere; }
.saved-meal-item span { color: var(--ink-3); font-size: .85rem; overflow-wrap: anywhere; }
.apply-meal-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--accent-soft-border); border-radius: var(--radius); background: var(--accent-soft-bg); }
.apply-meal-head { margin-bottom: 10px; }
.apply-meal-panel .form { margin-bottom: 12px; }

/* ---------- Pantry & shopping (v1: explicit inventory only) ---------- */
.pantry-shopping-card summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.pantry-shopping-counts { font-size: .78rem; font-weight: var(--fw-semibold); color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pantry-item-add-details summary, .pantry-preferences-details summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; color: var(--accent); font-weight: var(--fw-semibold); }
.pantry-item-list { display: grid; gap: 10px; margin: 10px 0 16px; }
.pantry-item-row { min-width: 0; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; }
.pantry-item-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pantry-item-row-head strong { overflow-wrap: anywhere; min-width: 0; }
.pantry-item-row-head span { color: var(--ink-3); font-size: .82rem; overflow-wrap: anywhere; }
.pantry-item-notes { margin: 4px 0 0; font-size: .82rem; overflow-wrap: anywhere; }
.pantry-item-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pantry-item-controls .pantry-adjust-amount { width: 72px; flex: 0 0 auto; min-height: var(--tap); }
.pantry-item-controls button { min-height: var(--tap); padding: 0 12px; flex: 1 1 auto; min-width: 0; }

/* >>> PANTRY_PURCHASE_V75 — reviewed mobile purchase sheet */
.purchase-review-panel {
  background: var(--surface); width: min(100%, 560px); max-width: 100%; max-height: min(88dvh, 760px);
  margin-top: auto; border-radius: 20px 20px 0 0; overflow: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.purchase-review-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); }
.purchase-review-header h2 { margin: 0; overflow-wrap: anywhere; }
.purchase-review-body, .purchase-options, .purchase-candidates { display: grid; gap: 10px; min-width: 0; }
.purchase-snapshot, .purchase-add-preview, .purchase-candidate { max-width: 100%; min-width: 0; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; }
.purchase-options { border: 0; padding: 0; margin: 16px 0; }
.purchase-options > label, .purchase-candidate { min-height: var(--tap); display: flex; align-items: center; gap: 10px; }
.purchase-options input[type="radio"] { width: 22px; height: 22px; flex: 0 0 auto; }
.purchase-review-panel button, .purchase-review-panel input { min-height: var(--tap); }
.purchase-review-panel[aria-busy="true"] { cursor: wait; }
/* <<< PANTRY_PURCHASE_V75 */

/* ---------- Recipes (free-form, portion-scaled) ---------- */
.recipes-card summary { cursor: pointer; font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.recipes-card > .muted { margin: 8px 0 14px; }
.recipe-builder { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 14px; }
.recipe-builder .form { margin: 0; }
.recipe-ingredient-search-wrap { display: grid; gap: 6px; font-size: .9rem; color: var(--ink-3); }
.recipe-ingredient-results { max-height: 210px; overflow-y: auto; }
.recipe-ingredient-results:empty { display: none; }
.recipe-ingredient-list { display: grid; gap: 8px; }
.recipe-ingredient-row { display: grid; grid-template-columns: minmax(0, 1fr) 66px 84px 40px; gap: 6px; align-items: center; }
.recipe-ingredient-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.recipe-ingredient-main strong { overflow-wrap: anywhere; font-size: .92rem; }
.recipe-ingredient-main span { font-size: .78rem; }
.recipe-ingredient-row input, .recipe-ingredient-row select { min-height: 40px; padding: 6px 8px; }
.recipe-ing-remove { min-height: 40px; padding: 0; font-size: 1.2rem; line-height: 1; }
.recipe-builder-totals { display: grid; gap: 4px; }
.recipe-builder-totals:empty { display: none; }
.recipe-builder-actions { display: grid; gap: 8px; }

/* ---------- Recent training timeline ---------- */
.timeline-list { display: grid; gap: 10px; margin-top: 16px; }
.timeline-item { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; }
.timeline-item strong { font-weight: 600; }
.timeline-item span { display: block; color: var(--ink-3); font-size: .88rem; margin-top: 3px; }

/* ---------- Workout summary ---------- */
.summary-card { border: 1px solid var(--accent-soft-border); border-radius: var(--radius); background: var(--accent-soft-bg); padding: 14px; margin-top: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.summary-grid article { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.summary-grid span { display: block; color: var(--ink-3); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.summary-grid strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* ---------- Strong-style workout card ----------
   Was its own light-surface --w-* island; now consumes the shared semantic
   tokens like every other card, so it follows the app's light/dark theme
   instead of forcing a fixed light surface. */
.workout-card { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.strong-workout-card { max-width: 560px; margin-inline: auto; width: 100%; }
.workout-card p, .workout-card .muted, .workout-card label { color: var(--ink-2); }
.recent-card { background: var(--surface); color: var(--ink); }
.recent-card .muted { color: var(--ink-3); }

.strong-topbar {
  position: sticky; top: 8px; z-index: 35;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin: -4px -4px 14px; padding: 8px 8px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px); border-radius: 16px;
}
.timer-stack { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.top-icon-button { width: 44px; min-height: 44px; padding: 0; background: var(--surface-2); color: var(--ink); border-radius: 14px; border: 1px solid var(--border); font-size: 1.1rem; }
.elapsed-wrap { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.elapsed-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 700; }
.elapsed-wrap strong { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.finish-green { background: var(--success); color: var(--success-ink); border-radius: 14px; padding: 12px 22px; }
.finish-green:disabled { opacity: .42; box-shadow: none; cursor: not-allowed; }

.strong-workout-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.strong-workout-head h2 { color: var(--ink); font-size: 1.6rem; margin: 0 0 4px; letter-spacing: -.01em; }
.workout-meta { margin: 2px 0; font-size: .95rem; color: var(--ink-2); }
.workout-card .compact { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }

.workout-unit-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0; color: var(--ink-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.workout-unit-toggle { display: inline-grid; grid-template-columns: repeat(2, minmax(48px, 1fr)); gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.workout-unit-toggle button { min-width: 48px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); box-shadow: none; }
.workout-unit-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.rest-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 11px; margin: 0; }
.rest-pill span { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); font-weight: 700; }
.rest-pill strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 1rem; }

.template-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; margin: 0; scrollbar-width: none; max-width: 100%; }
.template-strip::-webkit-scrollbar { display: none; }
.template-chip { flex: 0 0 auto; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: .9rem; min-height: 40px; width: auto; }
.template-chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.workout-start-panel { border: 1px solid var(--border); border-radius: 16px; padding: 14px; background: var(--surface); display: grid; gap: 10px; }
.workout-start-panel p { margin: 0; }

/* Saved-draft Resume/Discard prompt shown on the clean idle workout screen. */
.workout-resume-prompt { display: grid; gap: 12px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--accent-soft-border); border-radius: 16px; background: var(--accent-soft-bg); }
.workout-resume-prompt .resume-copy { display: grid; gap: 4px; }
.workout-resume-prompt h3 { color: var(--accent); margin: 0; font-size: .82rem; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; }
.workout-resume-prompt .resume-summary { margin: 0; color: var(--ink); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.workout-resume-prompt .resume-date { margin: 0; color: var(--ink-2); font-size: .85rem; }
.workout-resume-prompt .button-row button { flex: 1 1 40%; min-height: var(--tap); }
.workout-resume-prompt .button-row .secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }

.simple-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 2px; }
.simple-add-row input { background: var(--surface); color: var(--ink); border-color: var(--border); }
.exercise-suggestions { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.exercise-suggestions::-webkit-scrollbar { display: none; }
.quick-exercise { flex: 0 0 auto; width: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 9px 13px; min-height: 40px; font-size: .86rem; }
.quick-exercise span { color: var(--ink-2); font-size: .78rem; margin-left: 4px; }
.add-exercises-wide, .cancel-workout-wide {
  width: 100%; border-radius: 12px; padding: 12px 14px; min-height: 48px; font-weight: 800;
}
.add-exercises-wide { background: var(--accent-soft-bg); color: var(--accent); border: 1px solid var(--accent-soft-border); }
.cancel-workout-wide { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bg); margin-top: 2px; }

.strong-exercises { display: grid; gap: 22px; margin-top: 6px; min-width: 0; }
.exercise-block { display: grid; gap: 8px; }
.exercise-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.exercise-head h3 { color: var(--accent); font-size: 1.1rem; margin: 0; font-weight: 700; }

/* Read-only pre-workout "Suggested next" hint: informational only, styled to
   read as guidance (never as a tappable/editable control). */
.suggested-next-slot { display: grid; min-width: 0; max-width: 100%; overflow: hidden; }
.suggested-next { display: grid; gap: 2px; background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 7px 10px; margin: 0; min-width: 0; max-width: 100%; overflow: hidden; }
.suggested-label { color: var(--accent); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.suggested-body { display: grid; gap: 1px; min-width: 0; }
.suggested-target { color: var(--ink); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.suggested-rationale { color: var(--ink); font-size: .8rem; line-height: var(--lh-snug); overflow-wrap: anywhere; }
.suggested-source { color: var(--ink-2); font-size: .74rem; font-variant-numeric: tabular-nums; }

.strong-table-head, .strong-set-line { display: grid; grid-template-columns: 44px minmax(72px, 1fr) 1fr 1fr 48px 38px; gap: 8px; align-items: center; }
.strong-table-head { color: var(--ink-2); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 0 2px 2px; }
.strong-set-line { background: transparent; border: 0; padding: 0; }
.set-index-pill, .strong-set-line input, .done-set, .remove-set { border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-weight: 700; text-align: center; padding: 10px 6px; min-height: var(--tap); font-size: 16px; }
.set-index-pill { color: var(--ink-2); }
.previous-value { color: var(--ink-3); font-weight: 600; text-align: center; font-size: .9rem; }
.done-set { color: var(--success); padding: 0; font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; }
.remove-set { color: var(--danger); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.set-done .done-set { background: var(--success); color: var(--success-ink); }
.set-done input.set-weight, .set-done input.set-reps { background: var(--success-bg); }
.workout-card button.secondary.add-set-wide { width: 100%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 12px; padding: 11px; font-weight: 700; }
.workout-card button.secondary.add-set-wide:hover { background: var(--surface-3); }

.template-editor-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface); color: var(--ink); margin-top: 2px; }
.template-editor-card summary { font-weight: 700; cursor: pointer; color: var(--ink); min-height: var(--tap); display: flex; align-items: center; }
.template-editor-card .muted { color: var(--ink-2); }
.template-editor-card textarea { background: var(--surface-2); color: var(--ink); border-color: var(--border); margin-top: 8px; }
.template-editor-card .button-row button { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); }
.workout-card .primary-action { background: var(--accent); color: var(--accent-ink); }
.template-builder { display: grid; gap: 8px; margin: 12px 0; }
.template-empty { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 14px; padding: 12px; text-align: center; }
.template-bubble {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto auto 36px; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 8px; box-shadow: var(--shadow-sm); touch-action: manipulation;
}
.template-bubble.dragging { opacity: .55; transform: scale(.985); }
.template-bubble.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.drag-handle, .template-remove { width: 36px; height: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.drag-handle { background: var(--surface-2); color: var(--ink-2); cursor: grab; border-radius: 12px; }
.template-edit { width: auto; min-height: 34px; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft-bg); color: var(--accent); font-size: .78rem; }
.template-remove { background: var(--danger-bg); color: var(--danger); border-radius: 999px; font-size: 1.2rem; line-height: 1; }
.template-bubble-text { min-width: 0; }
.template-bubble-text strong { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template-bubble-text span { display: block; color: var(--ink-2); font-size: .82rem; margin-top: 1px; }
.template-set-stepper { display: inline-grid; grid-template-columns: 32px 28px 32px; align-items: center; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.template-set-stepper button { width: 32px; min-height: 32px; height: 32px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: none; }
.template-set-stepper span { color: var(--ink); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.template-reorder-controls { display: inline-grid; grid-template-columns: 30px 30px; gap: 3px; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.template-reorder-controls button { width: 30px; height: 30px; min-height: 30px; padding: 0; background: var(--surface); color: var(--ink-2); box-shadow: none; }

/* ---------- Exercise picker modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
}
.exercise-picker-sheet {
  width: min(560px, 100%); max-height: min(760px, 88dvh); display: grid; grid-template-rows: auto auto auto auto 1fr;
  background: var(--surface); color: var(--ink); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md);
}
.exercise-picker-header { display: grid; grid-template-columns: 44px auto 1fr auto; align-items: center; gap: 4px; padding: 12px 14px 8px; }
.exercise-picker-header h2 { margin: 0; text-align: center; color: var(--ink-2); font-size: 1rem; font-weight: 700; }
.sheet-close, .sheet-link { width: auto; min-height: var(--tap); padding: 6px 10px; background: transparent; color: var(--accent); box-shadow: none; overflow-wrap: anywhere; }
.sheet-close { width: var(--tap); min-width: var(--tap); border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: 1.5rem; line-height: 1; }
.sheet-link.muted-action { color: var(--ink-3); }
.exercise-search-wrap { margin: 0 20px 12px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 0 10px; color: var(--ink-3); }
.exercise-search-wrap input { background: transparent; border: 0; box-shadow: none; color: var(--ink); padding-inline: 4px; }
.exercise-search-wrap input:focus { box-shadow: none; }
.new-exercise-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 0 20px 12px; }
.new-exercise-form > label, .new-exercise-form > .message { grid-column: 1 / -1; }
.new-exercise-form > label { color: var(--ink-2); font-size: .86rem; font-weight: var(--fw-semibold); }
.new-exercise-form > .message:empty { display: none; }
.new-exercise-form input { background: var(--surface); border-color: var(--border); color: var(--ink); }
.picker-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 78px; gap: 10px; padding: 0 20px 12px; }
.filter-pill { width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: .86rem; }
.filter-pill.icon-only { font-size: .82rem; white-space: nowrap; }
#sort-exercises { overflow: hidden; text-overflow: ellipsis; }
.exercise-picker-list { overflow: auto; padding: 0 20px 18px; }
.picker-letter { color: var(--ink-2); font-weight: 700; padding: 12px 6px 6px; border-bottom: 1px solid var(--border); }
.exercise-picker-row { width: 100%; display: grid; grid-template-columns: 54px 1fr 42px; align-items: center; gap: 10px; border-radius: 0; background: var(--surface); color: var(--ink); padding: 10px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.exercise-picker-row.selected { background: var(--accent-soft-bg); }
.exercise-thumb { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; }
.exercise-info { min-width: 0; }
.exercise-info strong, .exercise-info small { display: block; }
.exercise-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
.exercise-info small { color: var(--ink-2); font-size: .9rem; margin-top: 2px; }
.exercise-row-action { justify-self: end; min-width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft-bg); color: var(--accent); font-weight: 900; }
.picker-empty { display: grid; gap: 10px; justify-items: stretch; text-align: center; padding: 24px 0; }

/* ---------- Strong-style workout keypad ---------- */
.workout-keypad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 12px;
  padding: 16px max(18px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md);
  border-top: 1px solid var(--border);
}
.keypad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.keypad-actions { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.workout-keypad button { min-height: 54px; border-radius: 12px; background: transparent; color: var(--ink); font-size: 1.35rem; box-shadow: none; }
.workout-keypad button:active { background: var(--surface-2); }
.keypad-actions button { background: var(--surface-2); font-size: 1.25rem; }
.keypad-actions .keypad-next { grid-column: 1 / -1; background: var(--accent); color: var(--accent-ink); font-size: 1.05rem; }
.workout-number:focus { border: 2px solid var(--focus); box-shadow: 0 0 0 2px var(--focus-ring); }

/* ---------- Cronometer-style nutrition diary ---------- */
.nutrition-day-card { display: grid; gap: var(--space-3); }
.nutrition-day-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--space-3); align-items: end; }
.nutrition-day-actions .capture-action { margin: 0; min-height: 72px; }
.nutrition-date-picker { margin: 0; max-width: 220px; }
.nutrition-diary { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.daily-overview { display: grid; gap: var(--space-3); padding-block: var(--space-2); border-block: 1px solid var(--border-soft); }
.daily-overview-heading { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.daily-overview-heading h3, .daily-overview-heading span, .daily-overview .nutrient-status { margin: 0; }
.daily-overview-heading span { color: var(--ink-2); font-size: .86rem; }
.daily-overview-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.daily-overview-secondary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.daily-overview-metric { display: grid; gap: 3px; min-width: 0; }
.daily-overview-metric strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.daily-overview-metric small { color: var(--ink-2); font-size: .78rem; }
.daily-overview-stale p { margin: 0; color: var(--danger); }
.diary-total span, .meal-group header span, .food-entry span, .food-entry small { color: var(--ink-3); }
.diary-total strong { font-variant-numeric: tabular-nums; }
.meal-group { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.meal-group header { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-soft); }
.meal-group h3 { margin: 0; }
.food-entry { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-soft); }
.food-entry:first-of-type { border-top: 0; }
.food-entry strong, .food-entry span, .food-entry small { display: block; }
.food-entry .nutrient-compact,
.food-entry .nutrient-compact-item { display: grid; }
.food-entry small { margin-top: 2px; font-size: .82rem; }
.empty-meal { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; min-height: 52px; padding: var(--space-1) var(--space-3); color: var(--ink-2); }
.empty-meal button { width: auto; min-height: 44px; }
.food-entry-primary-action { min-height: 44px; }
.food-entry-details { grid-column: 1 / -1; margin-top: 0; }
.food-entry-details > p { margin: var(--space-2) 0; }
.manual-nutrition-card { margin-top: 16px; border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; background: var(--surface-2); }
.manual-nutrition-card summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--ink); padding: 12px 14px;
  font: inherit; font-size: 16px; min-height: var(--tap);
}

/* ---------- Sheet & modal control contrast ----------
   Sheets now share the app's semantic surface/ink tokens instead of a
   separately-themed light island, so .secondary/.danger/.message/placeholder
   controls stay legible (WCAG AA) automatically in both light and dark. */
.food-sheet .secondary, .exercise-picker-sheet .secondary, .readiness-sheet .secondary {
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border);
}
.food-sheet .danger, .exercise-picker-sheet .danger, .readiness-sheet .danger {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-bg);
}
.food-sheet .message.ok, .exercise-picker-sheet .message.ok, .readiness-sheet .message.ok { color: var(--success); }
.food-sheet .message.error, .exercise-picker-sheet .message.error, .readiness-sheet .message.error { color: var(--danger); }
.food-sheet input::placeholder, .food-sheet textarea::placeholder,
.exercise-picker-sheet input::placeholder,
.readiness-sheet input::placeholder, .readiness-sheet textarea::placeholder { color: var(--ink-2); opacity: 1; }
.food-sheet :focus-visible, .exercise-picker-sheet :focus-visible { outline-color: var(--focus); }
.readiness-sheet :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Start camera is the primary scan action; give it a filled accent that
   meets AA on the sheet surface in both themes. Stop camera keeps the
   legible neutral .secondary treatment above. Both keep the 44px touch
   target (the .compact size would otherwise shrink them to 40). */
#start-scan { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: var(--fw-bold); }
.scan-controls .secondary { min-height: var(--tap); }

/* ---------- Workout polish ---------- */
body.keypad-open .strong-workout-form { padding-bottom: 190px; }
.previous-value { border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); font-weight: 700; text-align: center; font-size: .9rem; padding: 8px 2px; min-height: 38px; }
.previous-value:not(:empty):active { background: var(--accent-soft-bg); color: var(--accent); }
.rest-pill button { min-height: 30px; width: auto; padding: 3px 7px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); font-size: .75rem; box-shadow: none; }
.body-metric-history { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.body-metric-history h3 { margin-bottom: 2px; }
.body-metric-history > p { margin: 0 0 10px; }

/* ---------- Mobile: bottom nav + tighter layout ---------- */
@media (max-width: 680px) {
  .shell { width: min(100% - 16px, 760px); padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: calc(3 * (36px + .82rem) + 60px + env(safe-area-inset-bottom)); }
  .hero { margin: 4px 0 12px; }
  .hero p:not(.eyebrow) { display: none; }
  body.signed-in .hero h1 { display: none; }
  body.signed-in .hero { margin: 2px 0 8px; }
  h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  h2 { font-size: 1.2rem; }
  .card { padding: 14px; border-radius: 18px; }

  .tab-nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; border-radius: 0;
    border: 0; border-top: 1px solid var(--border);
    padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: var(--surface);
  }
  .tab-button { flex: 1 1 max-content; width: auto; min-width: 0; border-radius: 14px; font-size: .68rem; gap: 3px; padding: 6px 2px; }
  .tab-icon { width: 24px; height: 24px; }
  .tab-button.active { background: transparent; color: var(--accent); }
  body.software-keyboard-open .tab-nav { display: none; }

  .two-col, .exercise-adder { grid-template-columns: minmax(0, 1fr); }
  button { width: 100%; }
  .compact, .template-chip, .finish-green, .mini-actions button, .icon-btn, .overview-actions button, .quick-exercise, .done-set, .remove-set { width: auto; }
  .overview-actions .icon-btn, .icon-btn { width: var(--tap); }
  .quick-copy-row { grid-template-columns: 1fr; }
  .quick-copy-row .compact { width: 100%; }
  .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .overview-actions { justify-content: flex-end; }

  .strong-workout-head h2 { font-size: 1.4rem; }
  .strong-topbar { top: 6px; grid-template-columns: 44px minmax(0, 1fr) auto; margin-inline: -6px; }
  .finish-green { padding-inline: 16px; }
  .rest-pill span { display: none; }
  .strong-table-head, .strong-set-line { grid-template-columns: 34px minmax(44px, 1fr) 1fr 1fr 42px 34px; gap: 5px; }
  .template-bubble { grid-template-columns: 32px minmax(0, 1fr) 68px 42px 104px 32px; gap: 5px; padding: 7px; }
  .drag-handle, .template-remove { width: 32px; height: 32px; min-height: 32px; }
  .template-set-stepper { grid-template-columns: 30px 24px 30px; }
  .template-set-stepper button { width: 30px; height: 30px; min-height: 30px; }
  .exercise-picker-sheet { max-height: 86dvh; border-radius: 22px; }
  .exercise-picker-header { padding-inline: 12px; }
  .exercise-search-wrap, .picker-filters, .new-exercise-form { margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; }
  .exercise-picker-list { padding-left: 14px; padding-right: 14px; }
  .elapsed-wrap strong { font-size: 1.4rem; }
}

@media (min-width: 390px) and (max-width: 480px) {
  .shell { width: min(100% - 18px, 440px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Food capture: actions, finder & review sheets ---------- */
.capture-action {
  display: grid; gap: 3px; justify-items: start; text-align: left; padding: 14px;
  min-height: 88px; border-radius: var(--radius); background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border); color: var(--ink); box-shadow: none;
}
.capture-action:active { transform: scale(.99); }
.capture-action-solo { width: 100%; margin: 4px 0 0; }
.capture-icon { width: 26px; height: 26px; color: var(--accent); }
.capture-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.capture-label { font-weight: var(--fw-heavy); font-size: var(--fs-body); }
.capture-sub { color: var(--ink-3); font-size: .76rem; font-weight: 500; }

.food-sheet {
  width: min(560px, 100%); max-height: min(820px, 90dvh); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-md);
}
.food-sheet-header { flex: 0 0 auto; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 6px; padding: 12px 16px 8px; }
.food-sheet-header h2 { margin: 0; text-align: center; color: var(--ink); font-size: 1.05rem; font-weight: 800; }
#food-review-modal #confirm-food-review { display: none; }
.review-commit-context { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 4px 16px 10px; border-bottom: 1px solid var(--border); color: var(--ink-2); min-width: 0; max-height: min(30dvh, 180px); overflow-y: auto; overflow-wrap: anywhere; }
.review-commit-context strong { flex-basis: 100%; color: var(--ink); }
.review-commit-bar { flex: 0 0 auto; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.review-commit-bar .primary-action { width: 100%; min-height: var(--tap); margin: 0; }
.food-sheet:has(#review-add-button.hidden) .review-commit-bar { display: none; }
.entry-correction-sheet { max-height: calc(100dvh - max(36px, env(safe-area-inset-top)) - max(36px, env(safe-area-inset-bottom))); }
.entry-correction-scroll {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden;
  padding: 4px 16px 12px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: grid; gap: 12px;
}
.entry-correction-scroll > *, #entry-correction-form, #entry-correction-fields,
#entry-edit-controls, #entry-portion-controls, #entry-replacement-controls { min-width: 0; max-width: 100%; }
#entry-correction-form, #entry-correction-fields, #entry-edit-controls,
#entry-portion-controls, #entry-replacement-controls { display: grid; gap: 12px; }
#entry-correction-fields { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
#entry-correction-fields legend { width: 100%; margin: 0 0 2px; padding: 0; color: var(--ink); font-weight: var(--fw-bold); }
.entry-correction-actions {
  flex: 0 0 auto; display: grid; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}
.entry-correction-actions .primary-action { margin: 0; }
.entry-correction-actions { gap: var(--space-2); }
.entry-more-changes { margin-top: var(--space-3); border-top: 1px solid var(--border-soft); }
.entry-more-changes > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.entry-more-changes[open] > summary { margin-bottom: var(--space-3); }
.entry-correction-change { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); }
.entry-correction-change > p { margin: 0 0 var(--space-2); }
.sheet-header-spacer { width: 44px; }
.food-sheet label { color: var(--ink-2); }
.food-sheet input, .food-sheet select { background: var(--surface); border-color: var(--border); color: var(--ink); }
.food-sheet input:focus, .food-sheet select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.food-sheet .muted { color: var(--ink-2); }

.finder-mode-toggle { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 4px 16px 10px; padding: 5px; background: var(--surface-2); border-radius: 28px; }
.mode-tab { min-width: 0; min-height: var(--tap); padding: 8px 4px; border-radius: 999px; background: transparent; color: var(--ink-2); font-weight: 700; line-height: 1.2; box-shadow: none; }
.mode-tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.readiness-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 16px; background: var(--surface-2); }
.readiness-card p { margin: 3px 0 0; overflow-wrap: anywhere; }
.readiness-card-actions { display: flex; gap: 8px; align-items: center; }
/* One quiet line for the exact-date pain answer. Factual weight, not an alert
   colour: the card states the answer and never interprets it. */
.readiness-pain { color: var(--ink-3); font-size: var(--fs-label); }
.readiness-pain[data-pain="present"] { color: var(--ink); font-weight: var(--fw-semibold); }
.readiness-sheet { width: min(100%, 430px); max-width: 430px; max-height: 90dvh; overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 16px; }
.readiness-sheet form { grid-template-columns: minmax(0,1fr); }
.readiness-sheet form > * { min-width: 0; max-width: 100%; }
.readiness-sheet input, .readiness-sheet select, .readiness-sheet textarea { background: var(--surface); border-color: var(--border); color: var(--ink); }
.readiness-sheet label, .readiness-sheet .readiness-scale legend, .readiness-sheet .modal-head h2 { color: var(--ink); }
.readiness-sheet .modal-head { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; align-items: center; }
.readiness-sheet .modal-head h2 { margin: 0; }
#save-readiness { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.readiness-scale { display: grid; grid-template-columns: repeat(5,minmax(44px,1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.readiness-scale legend { width: 100%; margin-bottom: 6px; font-weight: 700; }
.readiness-scale legend span { float: right; color: var(--ink-2); font-size: .78rem; font-weight: 500; }
.readiness-scale button { min-width: 44px; min-height: var(--tap); padding: 0; background: var(--surface-2); color: var(--ink); box-shadow: none; }
.readiness-scale button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.finder-mode { flex: 1 1 auto; min-height: 0; padding: 0 16px 18px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.finder-hint { font-size: .82rem; margin: 8px 2px; }
.food-search-wrap { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 4px; background: var(--surface-2); border-radius: 12px; padding: 0 10px; color: var(--ink-3); }
.food-search-wrap input { background: transparent; border: 0; box-shadow: none; color: var(--ink); padding-inline: 4px; }
.food-search-wrap input:focus { box-shadow: none; }
.food-results { display: grid; gap: 8px; margin-top: 4px; }
.finder-meal-label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; }
.finder-meal-label select { min-height: 44px; }
.food-result-section { display: grid; gap: 8px; }
.food-result-section h3 { margin: 10px 2px 0; font-size: .9rem; color: var(--ink-2); }
.food-result-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 6px; align-items: stretch; }
.food-result { display: grid; gap: 3px; text-align: left; justify-items: start; width: 100%; min-height: var(--tap); padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); box-shadow: none; }
.favorite-toggle { min-width: 48px; min-height: 48px; padding: 0; border-radius: 12px; background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); color: var(--accent); box-shadow: none; font-size: 1.5rem; }
.food-result:active { background: var(--accent-soft-bg); }
.food-result-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; max-width: 100%; font-size: .98rem; }
.food-result-main strong { min-width: 0; overflow-wrap: anywhere; }
.food-result-sub { color: var(--ink-2); font-size: .82rem; font-weight: 500; }

.scanner-stage { position: relative; border-radius: 16px; overflow: hidden; background: #0b0f1a; aspect-ratio: 4 / 3; margin-bottom: 10px; }
#scanner-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-reticle { position: absolute; inset: 18% 12%; border: 2px solid rgba(56,165,255,.9); border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.28); }
.scan-controls { display: flex; gap: 8px; justify-content: center; }
.label-photo-picker { display: grid; gap: 8px; min-width: 0; }
.label-photo-picker input { width: 100%; min-width: 0; }
.label-preview-canvas { display: block; width: auto; max-width: 100%; max-height: min(42vh, 420px); margin: 10px auto; border: 1px solid var(--border); border-radius: 14px; }
.label-photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.label-photo-actions button { min-width: 0; min-height: var(--tap); }
.label-transcription-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.label-transcription-controls > label { min-width: 0; }
.label-transcription-controls input, .label-transcription-controls select { width: 100%; min-width: 0; }
@media (max-width: 360px) {
  .label-photo-actions, .label-transcription-controls { grid-template-columns: minmax(0, 1fr); }
}

/* Plate photo reference (issue #25) — a collapsed one-line disclosure inside
   Search so the four-mode selector above it is untouched. Semantic tokens only,
   so light/dark parity comes from the one theme block. */
.plate-reference { margin: 10px 0 4px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.plate-reference-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-height: var(--tap); min-width: 0; padding: 6px 12px; cursor: pointer;
  color: var(--accent); font-weight: var(--fw-semibold); font-size: .86rem;
  line-height: var(--lh-snug); list-style: none;
}
.plate-reference-summary::-webkit-details-marker { display: none; }
.plate-reference-badge {
  min-width: 0; padding: 2px 10px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); overflow-wrap: anywhere;
}
.plate-reference-body { display: grid; gap: 8px; min-width: 0; padding: 0 12px 12px; }
.plate-reference-body > * { min-width: 0; max-width: 100%; }
.plate-photo-picker { display: grid; gap: 8px; min-width: 0; }
.plate-photo-picker input { width: 100%; min-width: 0; }
.plate-preview-canvas {
  display: block; width: auto; max-width: 100%; max-height: min(38vh, 360px);
  margin: 4px auto; border: 1px solid var(--border); border-radius: var(--radius);
}
.plate-photo-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.plate-photo-actions button { min-width: 0; min-height: var(--tap); }
.barcode-manual-form { display: grid; gap: 10px; margin-top: 10px; }
.barcode-manual-form label { color: var(--ink-2); font-weight: 600; }
#scan-add-custom { display: block; width: 100%; text-align: center; margin-top: 8px; }

.review-body { flex: 1 1 auto; min-height: 0; padding: 4px 16px 18px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; display: grid; gap: 12px; }
.review-body > * { min-width: 0; max-width: 100%; }
.review-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.review-heading strong { font-size: 1.1rem; }
.source-badge { flex: 0 0 auto; white-space: nowrap; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.source-badge.source-off { background: var(--success-bg); color: var(--success); }
.source-badge.source-usda { background: var(--surface-3); color: var(--ink-2); }
.source-badge.source-cnf { background: var(--accent-soft-bg); color: var(--accent); }
.source-badge.source-user { background: var(--accent-soft-bg); color: var(--accent); }
.cnf-section { border-top: 1px solid var(--border-soft); padding-top: 8px; min-width: 0; }
.cnf-result-row { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cnf-result-row .food-result-main, .cnf-result-row .food-result-sub { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.cnf-attribution { color: var(--ink-2); font-size: .76rem; line-height: 1.45; margin: 8px 2px 2px; overflow-wrap: anywhere; }
.cnf-attribution a { color: var(--accent); }
.cnf-limitation { margin: 2px 0; padding: 10px 12px; border: 1px solid var(--danger-bg); border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.review-cnf-fields { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); min-width: 0; }
.review-cnf-fields > * { min-width: 0; max-width: 100%; }
.review-cnf-fields p { margin: 0; overflow-wrap: anywhere; }
.review-cnf-fields select { width: 100%; min-height: var(--tap); }
.usda-fallback { margin-top: 10px; }
.usda-section { border-top: 1px dashed var(--border); padding-top: 8px; }
.usda-attribution { color: var(--ink-2); font-size: .72rem; margin: 8px 2px 2px; }
.review-custom-fields { display: grid; gap: 10px; }
.review-edit-food { width: 100%; min-height: 44px; }
.review-edit-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: sticky; bottom: 0; padding: 8px 0; background: var(--surface); }
.review-edit-actions button { min-height: 48px; margin: 0; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.review-per100 { width: 100%; table-layout: fixed; border-collapse: collapse; }
.review-per100 caption { text-align: left; color: var(--ink-2); font-size: .8rem; padding-bottom: 6px; }
.review-per100 th, .review-per100 td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.review-per100 td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.review-per100 th { color: var(--ink-2); font-weight: 600; }
.review-catalog-details { min-width: 0; border-top: 1px solid var(--border); padding-top: 8px; }
.review-catalog-details summary { color: var(--ink-2); cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.review-catalog-details[open] { display: grid; gap: 10px; }
.review-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.review-totals { border-radius: 14px; background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); padding: 12px; display: grid; gap: 10px; }
.review-totals, .totals-grid, .total-pill { min-width: 0; max-width: 100%; }
.totals-head { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-2); }
.totals-head strong { color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.totals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.total-pill { display: grid; gap: 1px; padding: 6px 4px; border-radius: 10px; background: var(--surface); text-align: center; }
.total-pill span { color: var(--ink-2); font-size: .68rem; font-weight: 600; }
.total-pill strong { font-size: .82rem; font-variant-numeric: tabular-nums; }
#review-add-button { background: var(--accent); color: var(--accent-ink); }
.catalog-add-review #close-food-review { padding: 4px 0; flex: 0 0 var(--tap); }
.catalog-add-review #review-totals p { margin: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.catalog-add-review .review-body { grid-auto-rows: max-content; align-content: start; }
.catalog-add-review .food-sheet-header { display: flex; flex-wrap: wrap; }
.catalog-add-review .food-sheet-header h2 { flex: 1 1 6em; }
.catalog-add-review .sheet-link { flex: 0 0 auto; margin-left: auto; overflow-wrap: normal; }

@media (max-width: 680px) {
  .food-sheet { max-height: 90dvh; border-radius: 22px; }
  .review-controls.two-col { grid-template-columns: minmax(0, 1fr); }
  .totals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Recommendation follow-through card (issue #29, v58).
   Observation only: it reports logged sessions against the recorded target and
   what the user confirmed. It never styles a verdict about whether the
   recommendation worked. */
.followthrough-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-4);
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.followthrough-heading {
  margin: 0;
  font-size: 1rem;
}

.followthrough-window,
.followthrough-observed,
.followthrough-pending,
.followthrough-inapplicable,
.followthrough-recorded,
.followthrough-recorded-note,
.followthrough-question {
  margin: 0;
}

.followthrough-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.followthrough-choice {
  min-height: 44px;
  flex: 1 1 45%;
  min-width: 0;
}

.followthrough-choice[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.followthrough-note {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}

.followthrough-submit {
  min-height: 44px;
}

.followthrough-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.followthrough-confirm[hidden] {
  display: none;
}

.followthrough-confirm-action {
  min-height: 44px;
}

/* ---------- Current split audit (v60) ---------- */
.current-split-audit-status { margin: 6px 0 10px; overflow-wrap: anywhere; }
.current-split-audit-view,
.current-split-card,
.current-split-exercises,
.current-split-progression { min-width: 0; }
.current-split-card { display: grid; gap: var(--space-3); }
.current-split-card > p { margin: 0; overflow-wrap: anywhere; }
.current-split-exercises { display: grid; gap: var(--space-3); }
.current-split-exercise { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); overflow-wrap: anywhere; }
.current-split-exercise p { margin: var(--space-2) 0 0; }
.current-split-exercise-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-width: 0; min-height: 44px; padding-right: 28px; cursor: pointer; }
.current-split-exercise-head::-webkit-details-marker { display: none; }
.current-split-exercise-head::after { content: ''; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-65%) rotate(45deg); }
.current-split-exercise[open] > .current-split-exercise-head::after { transform: translateY(-35%) rotate(225deg); }
.current-split-exercise-head h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.split-chip { flex: 0 0 auto; max-width: 48%; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); font-size: .75rem; font-weight: var(--fw-semibold); text-align: center; }
.split-chip-template_only, .split-chip-observed_only { border-color: var(--accent-soft-border); background: var(--accent-soft-bg); color: var(--accent); }
.current-split-progression { display: grid; gap: 4px; margin-top: var(--space-2); }
.split-progression { display: block; overflow-wrap: anywhere; }
.current-split-safety { padding: var(--space-3); border: 1px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger); overflow-wrap: anywhere; }
.current-split-safety-unknown { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-2); overflow-wrap: anywhere; }
.current-split-limits { border-top: 1px solid var(--border); }
.current-split-limits summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-semibold); }
.current-split-limits ul { margin-bottom: 0; padding-left: 1.25rem; }
@media (max-width: 430px) {
  .current-split-exercise-head { flex-direction: column; }
  .split-chip { max-width: 100%; }
  .current-split-card, .current-split-exercise { max-width: 100%; }
}

/* ---------- 28-day stabilization block (v63) ---------- */
.four-week-proposal-status { margin: 6px 0 10px; overflow-wrap: anywhere; }
.four-week-proposal-view,
.four-week-proposal-card,
.four-week-proposal-weeks { min-width: 0; }
.four-week-proposal-card { display: grid; gap: var(--space-3); }
.four-week-proposal-card > p { margin: 0; overflow-wrap: anywhere; }
.four-week-proposal-boundary { padding: var(--space-3); border: 1px solid var(--accent-soft-border); border-radius: var(--radius-md); background: var(--accent-soft-bg); color: var(--ink); }
.four-week-proposal-abstained,
.four-week-proposal-unavailable { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); overflow-wrap: anywhere; }
.four-week-proposal-abstained h3,
.four-week-proposal-unavailable h3 { margin-top: 0; }
.four-week-proposal-weeks { display: grid; gap: var(--space-2); }
.four-week-proposal-week { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); overflow-wrap: anywhere; }
.four-week-proposal-week-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: var(--space-2) 36px var(--space-2) var(--space-3); cursor: pointer; font-weight: var(--fw-semibold); }
.four-week-proposal-week-head::-webkit-details-marker { display: none; }
.four-week-proposal-week-head::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-65%) rotate(45deg); }
.four-week-proposal-week[open] > .four-week-proposal-week-head::after { transform: translateY(-35%) rotate(225deg); }
.four-week-proposal-week-head span { min-width: 0; overflow-wrap: anywhere; }
.four-week-proposal-week-body { padding: 0 var(--space-3) var(--space-3); }
.four-week-proposal-week-body p { margin-top: 0; }
.four-week-proposal-week-body dl { display: grid; gap: var(--space-2); margin: 0; }
.four-week-proposal-week-body dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.four-week-proposal-week-body dt { color: var(--ink-2); }
.four-week-proposal-week-body dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.four-week-proposal-templates,
.four-week-proposal-limits,
.four-week-proposal-templates > div,
.four-week-proposal-limits > div,
.four-week-proposal-templates section,
.four-week-proposal-limits section,
.four-week-proposal-templates h4,
.four-week-proposal-limits p,
.four-week-proposal-templates ul,
.four-week-proposal-limits ul,
.four-week-proposal-templates li,
.four-week-proposal-limits li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.four-week-proposal-templates,
.four-week-proposal-limits { border-top: 1px solid var(--border); }
.four-week-proposal-templates > summary,
.four-week-proposal-limits > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-semibold); }
.four-week-proposal-templates ul,
.four-week-proposal-limits ul { margin-bottom: 0; padding-left: 1.25rem; }
@media (max-width: 430px) {
  .four-week-proposal-card, .four-week-proposal-week { max-width: 100%; }
  .four-week-proposal-week-head { align-items: flex-start; flex-direction: column; }
  .four-week-proposal-week-body dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .four-week-proposal-week-body dd { text-align: left; }
}

/* Confirmed OpenAI vision review (v69). */
.vision-controls,
.vision-confirm,
.vision-estimate { min-width: 0; max-width: 100%; margin-top: var(--space-3); }
.vision-confirm,
.vision-estimate { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); overflow-wrap: anywhere; }
.vision-confirm-title,
.vision-confirm p,
.vision-estimate p { margin: 0; }
.vision-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.vision-confirm-actions button,
.vision-controls button,
.vision-component button { min-height: 44px; }
.vision-components,
.vision-assumptions { min-width: 0; max-width: 100%; margin: 0; padding-left: 1.25rem; }
.vision-component { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.vision-component input,
.vision-component span,
.vision-component button { min-width: 0; max-width: 100%; }
.vision-component span { align-self: center; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 430px) {
  .vision-component { grid-template-columns: minmax(0, 1fr); }
  .vision-confirm-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Task 7 — B/A hybrid information architecture (v79). */
.quick-actions { display: grid; gap: var(--space-2); min-width: 0; }
.quick-actions-title {
  margin: 0; color: var(--ink-3); font-size: var(--fs-caption);
  font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
}
.day-loop-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
.day-loop-step {
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--accent-soft-border); border-radius: 999px;
  background: var(--accent-soft-bg); color: var(--accent);
  font-size: var(--fs-caption); font-weight: var(--fw-heavy);
}
.day-loop-row.is-complete .day-loop-step {
  border-color: var(--success-border); background: var(--success-bg); color: var(--success);
}
.nutrition-primary-card { gap: var(--space-3); }
.nutrition-primary-card .capture-action { margin: 0; }
.nutrition-primary-card .nutrition-date-picker { margin-top: 0; }
.weekly-insights-card { gap: var(--space-3); }
.weekly-insights-card > h2,
.weekly-insights-card > p { margin: 0; }
.weekly-insights-card > h2:not(:first-of-type) {
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
}
.settings-account-card .settings-account { margin-bottom: 0; }
.settings-preferences-card,
.settings-security-card,
.workout-template-management-card { min-width: 0; }
.workout-template-management-card .template-editor-card {
  margin: 0; padding: 0; border: 0; background: transparent;
}
.body-metric-card { order: 99; scroll-margin-top: var(--space-3); }
.template-chip,
.quick-exercise { min-height: var(--tap); }
.rest-pill button { min-width: var(--tap); min-height: var(--tap); }
.previous-value { min-height: var(--tap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done-set,
.remove-set { min-width: var(--tap); }
.drag-handle,
.template-remove { width: var(--tap); height: var(--tap); min-height: var(--tap); }
.template-edit { min-width: var(--tap); min-height: var(--tap); }
.template-reorder-controls { grid-template-columns: var(--tap) var(--tap); }
.template-reorder-controls button { width: var(--tap); height: var(--tap); min-height: var(--tap); }
.template-set-stepper { grid-template-columns: var(--tap) 24px var(--tap); }
.template-set-stepper button { width: var(--tap); height: var(--tap); min-height: var(--tap); }
.filter-pill { min-height: var(--tap); }
.previous-label-compact { display: none; }
#nutrition-panel details > summary { min-height: var(--tap); display: flex; align-items: center; }
.trend-axis-label,
.trend-point-label { font-size: 11px; }
.calendar-month-label { font-size: 11px; }
.calendar-weekday-label { font-size: 10px; }
.calendar-cell { font-size: 9px; }
@media (max-width: 430px) {
  .day-loop-row { gap: var(--space-2); }
  .day-loop-action { font-size: var(--fs-caption); }
  .strong-table-head,
  .strong-set-line { grid-template-columns: 30px minmax(44px, 1fr) repeat(4, 44px); gap: 2px; }
  .template-bubble {
    grid-template-columns: var(--tap) minmax(0, 1fr) var(--tap);
    grid-template-areas: "drag text remove" "reorder edit stepper";
    gap: 6px; padding: 8px;
  }
  .drag-handle { grid-area: drag; }
  .template-bubble-text { grid-area: text; }
  .template-remove { grid-area: remove; }
  .template-reorder-controls { grid-area: reorder; justify-self: start; }
  .template-edit { grid-area: edit; justify-self: center; }
  .template-set-stepper { grid-area: stepper; justify-self: end; }
}
.exercise-info strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
@media (max-width: 360px) {
  .previous-label-wide { display: none; }
  .previous-label-compact { display: inline; }
}

/* PWA v81 real-iPhone acceptance remediation with Today alignment. */
.day-loop-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  border: 0;
  background: transparent;
  overflow: visible;
}
.day-loop-action-button {
  grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "step copy" "action action";
  align-items: start;
  align-content: stretch;
  gap: var(--space-2);
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--accent-soft-border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.day-loop-action-button:first-child { border-top: 1px solid var(--accent-soft-border); }
.day-loop-action-button .day-loop-step { grid-area: step; }
.day-loop-action-button .day-loop-copy { grid-area: copy; }
.day-loop-action-button .day-loop-action {
  grid-area: action;
  display: flex;
  align-items: center;
  align-self: end;
  justify-content: center;
  justify-self: stretch;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--accent-soft-border);
  border-radius: 999px;
  background: var(--accent-soft-bg);
  color: var(--accent);
  font-size: .9rem;
}
.day-loop-action-button.is-complete .day-loop-action {
  background: var(--success-bg);
  color: var(--success);
}
.nutrition-primary-card .capture-action {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.nutrition-primary-card .capture-icon,
.nutrition-primary-card .capture-sub { color: var(--accent-ink); }
.nutrition-primary-card > p:not(.eyebrow) { margin-bottom: 0; }

#workouts-panel {
  --workout-weight-column: 60px;
  --workout-reps-column: 44px;
}
@media (max-width: 430px) {
  .day-loop-rail { grid-template-columns: minmax(0, 1fr); }
  .day-loop-action-button {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "step copy action";
    align-items: center;
    min-height: 72px;
    padding: 8px 10px;
  }
  .day-loop-action-button .day-loop-copy { min-width: 0; }
  .day-loop-action-button .day-loop-action {
    align-self: center;
    justify-self: end;
    min-height: var(--tap);
    max-width: 100%;
    padding: 6px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* The dated food target is too wide to share a phone row with the totals. */
  .day-loop-action-button[data-loop-row="food"] {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "step copy" "action action";
  }
  .day-loop-action-button[data-loop-row="food"] .day-loop-action {
    justify-self: stretch;
    text-align: center;
  }
  .strong-table-head,
  .strong-set-line {
    grid-template-columns: 30px minmax(52px, 1fr) var(--workout-weight-column) var(--workout-reps-column) 44px 44px;
    gap: 2px;
  }
  .strong-set-line input.set-weight { min-width: 0; width: 100%; padding-inline: 3px; }
  .strong-set-line input.set-reps { min-width: 0; width: 100%; padding-inline: 3px; }
  .exercise-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .exercise-head .mini-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
  }
  .exercise-head .mini-actions button { width: 100%; }
  .workout-resume-prompt .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workout-resume-prompt .button-row button { width: 100%; }
}
@media (max-width: 360px) {
  #workouts-panel {
    --workout-weight-column: 58px;
    --workout-reps-column: 44px;
  }
  .strong-table-head,
  .strong-set-line { grid-template-columns: 28px minmax(46px, 1fr) var(--workout-weight-column) var(--workout-reps-column) 44px 44px; }
  .previous-value { font-size: .82rem; }
}

.trend-snapshot-grid { display: grid; gap: var(--space-2); }
.trend-snapshot {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  min-width: 0;
}
.trend-snapshot > strong { color: var(--ink); }
.trend-snapshot .trend-caption { margin: 0; color: var(--ink-2); }
.body-entry-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: var(--space-3);
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.body-entry-shortcut:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.trend-disclosure { min-width: 0; }
.trend-disclosure.card { padding: 0; overflow: hidden; }
.trend-disclosure-summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 14px 42px 14px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.trend-disclosure-summary::-webkit-details-marker { display: none; }
.trend-disclosure-summary::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
}
.trend-disclosure[open] > .trend-disclosure-summary::after { transform: translateY(-35%) rotate(225deg); }
.trend-disclosure[open] > .trend-disclosure-summary { border-bottom: 1px solid var(--border-soft); }
.trend-disclosure-summary > span { display: grid; gap: 3px; min-width: 0; }
.trend-disclosure-summary strong { font-size: var(--fs-h3); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.trend-disclosure-summary .eyebrow { margin: 0; }
.trend-disclosure-summary .muted,
.trend-disclosure-summary > span > span:last-child {
  margin: 0;
  color: var(--ink-2);
  font-size: .84rem;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.trend-disclosure-summary .muted:empty { display: none; }
.trend-disclosure-body { display: grid; gap: var(--space-3); padding: 0 16px 16px; min-width: 0; }
.trend-disclosure-body > p { margin: 0; }
.trend-chart-disclosure { margin-top: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.trend-chart-details { padding-top: 16px; }
.trend-disclosure-nested { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface-2); }
.trend-disclosure-nested + .trend-disclosure-nested { margin-top: var(--space-2); }
.trend-disclosure-nested .trend-disclosure-summary { min-height: 64px; }
.trend-disclosure-nested .trend-disclosure-body { padding-top: var(--space-3); background: var(--surface); }
.weekly-insights-card > .muted { margin-bottom: 0; }
.weekly-insights-card .weekly-review-status,
.weekly-insights-card .weekly-eligibility-status,
.weekly-insights-card .weekly-rec-status,
.weekly-insights-card .followthrough-status { margin: 0; }

/* Reliable meal logging: the current renderer owns one full-width overview.
   Do not let the retired multi-card macro grid narrow that overview. */
#nutrition-dashboard { display: block; margin-top: 0; min-width: 0; }
#nutrition-dashboard > .daily-overview { width: 100%; min-width: 0; }
#nutrition-dashboard .macro-card:first-child,
#nutrition-dashboard .macro-card:nth-child(2) { grid-column: 1 / -1; }
#nutrition-dashboard .macro-card:nth-child(n+3) { display: grid; gap: 4px; min-width: 0; padding: 10px 8px; font-size: .9rem; }
#nutrition-dashboard .macro-card:nth-child(n+3) .macro-amount { font-size: 1rem; overflow-wrap: anywhere; }
.meal-draft-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.meal-draft-bar p { flex: 1; min-width: 0; margin: 0; font-size: .9rem; }
.meal-draft-bar button { width: auto; }
.meal-draft-panel { min-height: 0; min-width: 0; overflow-y: auto; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.meal-draft-item { border-bottom: 1px solid var(--border-soft); padding: 12px 0; overflow-wrap: anywhere; }
.meal-draft-item p { margin: 6px 0; color: var(--ink-2); }
.meal-draft-actions { display: grid; gap: 8px; }
.meal-draft-panel input, .meal-draft-panel select { min-width: 0; width: 100%; box-sizing: border-box; }

/* Explicit mode stays readable in narrow cards and with enlarged text. */
.body-form-mode {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
#body-cancel-edit {
  min-height: 44px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#body-cancel-edit[hidden] { display: none; }
#trends-panel { min-width: 0; grid-template-columns: minmax(0, 1fr); }

/* v95 mobile nutrient presentation: compact first, full truth on demand. */
.food-sheet,
.food-sheet *,
.meal-draft-panel,
.meal-draft-panel *,
#meal-draft-items,
#meal-draft-items *,
#meal-draft-totals,
#meal-draft-totals *,
.nutrient-compact,
.nutrient-compact *,
.nutrient-details,
.nutrient-details * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.meal-draft-panel { overflow-x: hidden; overflow-y: auto; }
.meal-draft-panel input,
.meal-draft-panel select,
.meal-draft-panel textarea { width: 100%; min-width: 0; max-width: 100%; }
.food-sheet p,
.food-sheet strong,
.food-sheet small,
.food-entry-content,
.meal-draft-content,
.nutrient-value,
.nutrient-details small { overflow-wrap: anywhere; }

.nutrient-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 6px; }
.nutrient-compact-item { display: grid; gap: 2px; }
.nutrient-label { color: var(--ink-2); font-size: .78rem; font-weight: 600; overflow-wrap: normal; word-break: normal; hyphens: none; }
.nutrient-value { color: var(--ink); font-size: .94rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nutrient-status { grid-column: 1 / -1; color: var(--ink-2); font-size: .82rem; }
.day-loop-value > .nutrient-compact { margin-top: 0; }
.nutrient-details { width: 100%; margin-top: var(--space-1); color: var(--ink-2); }
.nutrient-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .88rem; font-weight: 700; }
.nutrient-details ul, .nutrient-detail-list { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3); list-style: none; border-radius: var(--radius-sm); background: var(--surface-2); }
.nutrient-details li, .nutrient-detail-list li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2px var(--space-2); }
.nutrient-details li small { grid-column: 1 / -1; color: var(--ink-3); line-height: 1.4; }
.nutrient-coverage-note { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3) 0; border-top: 1px solid var(--border-soft); color: var(--ink-2); font-size: .78rem; line-height: var(--lh-snug); }

.macro-card.no-target { display: grid; align-items: start; }
.macro-card .nutrient-details { grid-column: 1 / -1; }
.diary-total,
.meal-group header { align-items: start; }
.diary-total > div,
.meal-group header > div { flex: 1; min-width: 0; }
.food-entry,
.meal-draft-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; max-width: 100%; }
.food-entry > .mini-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.meal-draft-item > .mini-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.food-entry > .mini-actions button,
.meal-draft-item > .mini-actions button { width: 100%; min-width: 0; min-height: 44px; white-space: normal; }
#meal-draft-totals { display: grid; gap: 6px; padding-block: 12px; }

@media (max-width: 430px) {
  #nutrition-panel { gap: var(--space-2); }
  .nutrition-primary-card,
  .nutrition-diary-card { padding: 10px 12px; }
  .nutrition-primary-card { gap: var(--space-2); }
  .nutrition-primary-card > h2,
  .nutrition-diary-card > h2 { margin: 0; font-size: 1.05rem; }
  .nutrition-diary-card > .eyebrow { margin-bottom: 2px; }
  .nutrition-day-actions { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .nutrition-day-actions .capture-action { min-height: 60px; padding: 8px 10px; }
  .nutrition-day-actions .capture-action-solo {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-2);
    row-gap: 2px;
    align-content: center;
  }
  .nutrition-day-actions .capture-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .nutrition-day-actions .capture-label { grid-column: 2; grid-row: 1; }
  .nutrition-day-actions .capture-sub { grid-column: 2; grid-row: 2; }
  .nutrition-date-picker { max-width: none; }
  .daily-overview { gap: var(--space-2); padding-block: var(--space-1); }
  .daily-overview-heading { align-items: start; }
  .daily-overview-primary { gap: var(--space-2); }
  .daily-overview-secondary { gap: var(--space-1); }
  .nutrition-diary { margin-top: var(--space-1); }
  .diary-total,
  .meal-group header { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 360px) and (max-width: 430px) {
  .nutrition-day-actions { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; }
  .daily-overview { display: flex; flex-wrap: wrap; align-items: center; }
  .daily-overview-heading,
  .daily-overview-primary,
  .daily-overview-secondary { flex: 1 0 100%; }
  .daily-overview > .nutrient-status { flex: 1 1 9rem; }
  .daily-overview > .nutrient-details { width: auto; flex: 0 1 auto; margin-top: 0; }
  .daily-overview > .nutrient-details[open] { width: 100%; flex-basis: 100%; }
  .nutrition-diary-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-2);
    align-items: baseline;
  }
  .nutrition-diary-card > .eyebrow { margin: 0; }
  #nutrition-diary-state,
  .nutrition-diary-card > .nutrition-diary { grid-column: 1 / -1; }
  .meal-group header { display: flex; align-items: start; }
  .meal-group header .nutrient-compact { margin-top: 0; }
}

/* At 200% zoom on a narrow phone, give the dated food CTA a full row. */
@media (max-width: 280px) {
  .day-loop-action-button {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "step copy" "action action";
  }
  .day-loop-action-button .day-loop-action {
    justify-self: stretch;
    text-align: center;
  }
}