/* Forge — dark-first mobile PWA */
:root {
  color-scheme: dark;
  /* spacing scale (UI-PASS stage 3) — themes never override these. New and
     edited rules use it; older rules convert as they're touched. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  /* type scale — hero / value / title / body / meta / label. Converted rules use
     these; the rest of the sheet still has literals (listed in UI-PASS.md). */
  --fs-hero: 36px;
  --fs-value: 23px;
  --fs-title: 16px;
  --fs-body: 14px;
  --fs-meta: 12px;
  --fs-label: 11px;
  /* surfaces & ink (reference dark palette) */
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #242422;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #8e8c86;   /* v51: was #898781, 4.33:1 on surface-2 */
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255,255,255,0.10);
  /* series (dark-stepped) */
  --blue: #3987e5;
  --orange: #d95926;
  --aqua: #199e70;
  --violet: #9085e9;
  /* status (fixed) */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  /* red as TEXT: --critical is a fill/border colour and reads at ~3.4:1 on the dark
     surfaces. ≥4.6:1 on every surface of every dark theme; light overrides it. */
  --critical-ink: #dd7272;
  --radius: 14px;
  --tabbar-h: 62px;
}

/* ---------- themes (color-only overrides; layout/spacing vars stay fixed) ---------- */
:root[data-theme="pink"] {
  --page: #170c12;
  --surface: #26141d;
  --surface-2: #331b26;
  --ink: #fff2f7;
  --ink-2: #e7bdd1;
  --muted: #a9829a;
  --grid: #3a2130;
  --baseline: #45283a;
  --border: rgba(255,192,220,0.14);
  --blue: #ff7ab3;
  --orange: #ff9ecb;
  --aqua: #f0559b;
  --violet: #c96fd6;
}
:root[data-theme="ocean"] {
  --page: #071216;
  --surface: #0f1f26;
  --surface-2: #142933;
  --ink: #eef8fb;
  --ink-2: #b7cdd4;
  --muted: #7f979e;
  --grid: #1a333d;
  --baseline: #204049;
  --border: rgba(180,230,245,0.12);
  --blue: #2fb4e5;
  --orange: #ff9d5c;
  --aqua: #23c9a8;
  --violet: #6fa8e9;
}
:root[data-theme="forest"] {
  --page: #0c130d;
  --surface: #182118;
  --surface-2: #202c20;
  --ink: #f3faf1;
  --ink-2: #c4d3c0;
  --muted: #8a9c86;
  --grid: #2b382a;
  --baseline: #37452f;
  --border: rgba(200,230,180,0.12);
  --blue: #5fae5a;
  --orange: #d99a3a;
  --aqua: #4fc08c;
  --violet: #8fae57;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #ecebe6;
  --ink: #17160f;
  --ink-2: #4a4840;
  --muted: #6b6961;   /* v51: was #7c7a71, 3.61:1 on surface-2 */
  --critical-ink: #bf3636;
  --grid: #ddd9d0;
  --baseline: #cfcbc0;
  --border: rgba(0,0,0,0.10);
  --blue: #1f6fd0;
  --orange: #c14e1a;
  --aqua: #0f8a5f;
  --violet: #6d5fd6;
}

/* touch-action: manipulation kills the double-tap-to-zoom delay/gesture on
   buttons and taps everywhere, without disabling pinch-zoom (kept for WCAG
   1.4.4 — see the viewport meta comment in index.html) */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Natural document flow with min-height:100dvh — the same shell as the sibling
   "Our Thing" app, which renders edge-to-edge on the same phone. A rigid
   position:fixed + overflow:hidden shell makes iOS hand the page a shortened
   viewport with zero safe-area insets (the bottom-gap bug); normal flow lets
   iOS go full-screen and report real insets, which the sticky top/bottom bars
   then pad against. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea {
  font: inherit; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
/* 44px targets for every text field and picker (Grocery's add field was 41px) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select { min-height: 44px; }
input[type=number] { -moz-appearance: textfield; }
label { display: block; font-size: 13px; color: var(--ink-2); margin: 12px 0 5px; }

/* ---------- layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grid);
}
.topbar-title { display: flex; align-items: center; gap: 8px; }
.logo-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--orange); display: inline-block; }
.topbar h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; }
.topbar-date { flex: 1; text-align: right; font-size: 13px; color: var(--muted); }
.icon-btn {
  font-size: 20px; color: var(--ink-2);
  min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0;
  display: inline-flex; align-items: center; justify-content: center;
}

.view {
  flex: 1 1 auto;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 16px 16px 32px;
}

.tabbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex;
  background: rgba(13,13,13,0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--grid);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; color: var(--muted); padding-top: 6px;
}
.tab .tab-ico { font-size: 19px; line-height: 1; }
.tab.active { color: var(--ink); }
.tab.active .tab-ico { color: var(--orange); }
/* a live workout dims the tabs that aren't it — still tappable, just quieter */
.tabbar.gym-mode .tab:not([data-tab="train"]):not([data-tab="today"]) { opacity: 0.35; }

/* ---------- quick-add FAB ---------- */
#fab-root {
  position: fixed; right: 16px;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  z-index: 25; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 26px; font-weight: 400; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.2s;
}
.fab.open { transform: rotate(45deg); }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fab-menu[hidden] { display: none; }
.fab-item {
  padding: 9px 14px; border-radius: 99px; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); font-size: 13px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ---------- cards & common ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card h2 { font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-3); letter-spacing: 0.02em; }
.card h2 .h2-right { float: right; font-weight: 400; color: var(--muted); font-size: var(--fs-meta); }

.row { display: flex; gap: 10px; align-items: center; }
.row > .grow { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-secondary { margin-top: var(--sp-2); gap: var(--sp-2); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* stat tiles */
.stat { text-align: center; }
.stat .sv { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.stat .sl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }

/* training calendar */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  max-width: 252px; margin: 0 auto;
}
.cal-day { aspect-ratio: 1; border-radius: 5px; background: var(--surface-2); }
.cal-day.lift { background: var(--orange); }
.cal-day.cardio { background: var(--blue); }
.cal-legend {
  display: flex; gap: 14px; justify-content: center; margin-top: 12px;
  font-size: 11px; color: var(--muted);
}
.cal-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: middle; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 11px 16px; font-weight: 600; font-size: 15px;
  width: 100%;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--blue); border-color: transparent; color: #fff; }
.btn.accent { background: var(--orange); border-color: transparent; color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 12px; font-size: 13px; width: auto; min-width: 44px; border-radius: 9px; }
.btn.danger { color: var(--critical-ink); }
.btn:disabled { opacity: 0.5; }

.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 13px; }
.center { text-align: center; }
.spread { display: flex; justify-content: space-between; align-items: center; }
.mt { margin-top: 12px; }
.mb0 { margin-bottom: 0; }

/* status pill */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--border); color: var(--ink-2);
}
.pill.good { color: var(--good); }
.pill.warn { color: var(--warning); }
.pill.crit { color: var(--critical-ink); }

/* ---------- lists ---------- */
.list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; border-bottom: 1px solid var(--grid);
}
.list-item:last-child { border-bottom: none; }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .li-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.list-item .li-val { font-weight: 600; font-size: 15px; text-align: right; }
.list-item .li-val .unit { font-size: 11px; color: var(--muted); font-weight: 400; }
/* full 44pt target: this deletes things, and it lives next to other controls */
.x-btn {
  color: var(--muted); font-size: 17px;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* a list row whose body opens an editor */
.li-tap { flex: 1; min-width: 0; min-height: 44px; text-align: left; padding: 2px 0; }
.li-tap:active { opacity: 0.6; }

/* ---------- macro bars ---------- */
.macro-row { margin-bottom: 10px; }
.macro-row:last-child { margin-bottom: 0; }
.macro-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.macro-head .name { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.macro-head .val { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.bar-track { height: 8px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; min-width: 2px; transition: width .4s ease; }

/* ---------- modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .15s ease;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 560px;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto;
  padding: 20px 18px calc(env(safe-area-inset-bottom) + 20px);
  animation: slideUp .22s ease;
}
.modal h3 { font-size: 18px; margin-bottom: 4px; }
.modal .modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0.5; } }

/* segmented control */
.seg { display: flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 3px; }
.seg button {
  flex: 1; padding: 9px 6px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted);
}
.seg button.on { background: var(--blue); color: #fff; }

/* stepper */
.stepper { display: flex; align-items: center; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.stepper button { padding: 10px 14px; font-size: 18px; font-weight: 700; color: var(--ink-2); }
.stepper input { border: none; border-radius: 0; text-align: center; padding: 10px 2px; background: transparent; }

/* theme picker */
.theme-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.theme-swatch {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px; min-height: 40px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink-2); font-size: 13px; font-weight: 600;
}
.theme-swatch.on { border-color: var(--blue); color: var(--ink); }
.theme-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2); }

/* toast */
#toast-root { position: fixed; bottom: calc(var(--tabbar-h) + 20px); left: 0; right: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  padding: 10px 18px; border-radius: 99px; font-size: 14px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  animation: toastIn .2s ease;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px);
  /* the root is pointer-events:none so toasts never block the UI; a toast that
     carries an Undo button has to opt back in */
  pointer-events: auto;
}
.toast-action {
  color: var(--blue); font-weight: 700; font-size: 14px;
  min-height: 32px; padding: 0 4px; flex-shrink: 0;
}
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }

/* hero numbers */
.hero-num { font-size: 34px; font-weight: 800; line-height: 1.05; }
.hero-num .unit { font-size: 15px; font-weight: 500; color: var(--muted); }

/* scan */
.scan-drop {
  border: 2px dashed var(--baseline); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; color: var(--muted);
}
.scan-preview { width: 100%; border-radius: 12px; max-height: 260px; object-fit: cover; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto;
  border: 3px solid var(--surface-2); border-top-color: var(--blue);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* set logging table */
/* 44pt targets, and the destructive ✕ pushed away from the ✓ it used to sit 6px
   from. Deleting a set is undoable, but not hitting it at all is better. */
.set-row { display: grid; grid-template-columns: 34px 1fr 1fr 44px 54px; gap: 6px; align-items: center; margin-bottom: 8px; }
/* 44pt target, right-aligned in a wider column: keeps a real gap from ✓ without
   shrinking the button back below the minimum */
.set-row .x-btn { justify-self: end; }
.set-row.planned input { color: var(--muted); border-style: dashed; }
.set-row.planned .set-no { opacity: 0.65; }
.set-row .set-no {
  color: var(--muted); font-size: 13px; font-weight: 600; text-align: center;
  min-height: 40px; border-radius: 7px; background: var(--surface-2);
}
.set-row input { text-align: center; padding: 9px 4px; min-width: 0; }
.set-row.done input { border-color: rgba(12,163,12,0.5); color: var(--ink-2); }
/* weight/reps + their +/- steppers share the set-row's 1fr column */
.stepper-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.stepper-group input { flex: 1; min-width: 0; }
.stepper-btn {
  flex-shrink: 0; width: 26px; height: 36px; border-radius: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); font-size: 15px; font-weight: 700; line-height: 1;
}
.stepper-btn:active { background: var(--baseline); }
.done-btn {
  height: 44px; border-radius: 9px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--muted); font-size: 17px; font-weight: 800;
  transition: background 0.2s, border-color 0.2s;
}
.done-btn.on { background: var(--good); border-color: transparent; color: #fff; animation: setConfirm 0.35s ease; }
@keyframes setConfirm { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.set-row.done { animation: setRowFlash 0.5s ease; }
@keyframes setRowFlash { from { background: rgba(12,163,12,0.18); } to { background: transparent; } }
/* a finished exercise recedes so the scroll is about what's left */
.card.ex-complete { opacity: 0.72; }
.card.ex-complete .ex-name { color: var(--ink-2); }

/* ---------- dashboard: subview header ---------- */
.sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.back-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 11px; background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); font-size: 24px; line-height: 1; padding-bottom: 3px;
}
.back-btn:active { background: var(--surface-2); }
.sub-title { font-size: 19px; font-weight: 700; }

/* ---------- food: day navigator ---------- */
.day-nav { display: flex; align-items: center; gap: 8px; }
.dn-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink); font-size: 21px; line-height: 1; padding-bottom: 2px;
}
.dn-btn:disabled { opacity: 0.3; }
.dn-label { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; }

/* ---------- food: one-tap chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 11px; border-radius: 11px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  max-width: 100%;
}
.chip:active { border-color: var(--blue); transform: scale(0.97); }
.chip-name { font-size: 13px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-sub { font-size: 11.5px; color: var(--muted); }
.chip-more { justify-content: center; align-items: center; font-size: 12px; color: var(--ink-2); }

.tag-ai {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--blue); border: 1px solid var(--blue); border-radius: 4px;
  padding: 0 3px; vertical-align: 1px;
}

/* ---------- today: focus line ---------- */
.focus {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--grid); padding-top: 12px;
}
.fc-ico { font-size: 16px; flex-shrink: 0; }
.fc-text { flex: 1; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.focus .btn.small { flex-shrink: 0; }

/* ---------- today: quick log ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.qa {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 2px 9px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-2);
}
.qa:active { border-color: var(--blue); transform: scale(0.97); }
/* icons, not emoji: ICONS in ui.js is the only source (UI-PASS stage 3) */
.qa-i { display: flex; line-height: 1; color: var(--ink-2); }
.qa-i .ico { width: 22px; height: 22px; }

/* ---------- dashboard: glance strip ---------- */
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gl {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border);
}
.gl:active { border-color: var(--blue); }
.gl .gv { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.gl .gl-l { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; line-height: 1.25; }

/* ---------- dashboard: drill-in rows ---------- */
.nav-row {
  display: grid; grid-template-columns: 26px 1fr auto 14px;
  align-items: center; gap: 10px; width: 100%;
  padding: 13px 2px; border-bottom: 1px solid var(--grid); text-align: left;
}
.nav-row:last-child { border-bottom: none; }
.nav-row:active { background: var(--surface-2); }
.nr-ico { display: flex; align-items: center; justify-content: center; width: 22px; color: var(--muted); }
.nr-ico .ico { width: 20px; height: 20px; }
.nr-label { font-size: 15px; font-weight: 500; }
.nr-value { font-size: 12px; text-align: right; }
.nr-chev { color: var(--baseline); font-size: 19px; }

/* ---------- dashboard: compact session plan ---------- */
.plan { border-top: 1px solid var(--grid); padding-top: 4px; }
.plan-row {
  display: grid; grid-template-columns: 16px 1fr auto;
  align-items: baseline; gap: 9px; padding: 7px 0;
}
.plan-row + .plan-row { border-top: 1px solid rgba(255,255,255,0.04); }
.pl-cue { font-weight: 800; font-size: 12px; }
.pl-name { font-size: 14px; min-width: 0; }
.pl-note { font-size: 11px; color: var(--muted); }
.pl-val { font-size: 14px; font-weight: 700; white-space: nowrap; }
.pl-val .unit { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ---------- day switcher ---------- */
.day-chips { display: flex; gap: 6px; overflow-x: auto; margin: 14px -2px 12px; padding: 0 2px 2px; scrollbar-width: none; }
.day-chips::-webkit-scrollbar { display: none; }
.day-chip {
  flex: 0 0 auto; position: relative;
  padding: 9px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  min-height: 44px;
}
.day-chip.on { background: var(--surface-2); border-color: var(--orange); color: var(--ink); }
.dc-next {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--orange); margin-left: 6px; vertical-align: 1px;
}

/* ---------- cue legend ----------
   The ▲ → ▼ column is the plan's whole vocabulary and nothing on screen used to
   define it. Only the cues actually in today's plan are listed. */
.cue-key {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  border-top: 1px solid var(--grid); margin-top: 10px; padding-top: 9px;
  font-size: 11px; color: var(--muted);
}
.cue-key b { font-size: 12px; margin-right: 3px; }

/* ---------- plate indicator ---------- */
.plates { display: block; text-align: left; width: 100%; }
.pl-stack { display: flex; align-items: flex-end; gap: 3px; min-height: 42px; }
.pl-base {
  font-size: 10px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--baseline);
  border-radius: 4px; padding: 3px 6px; margin-right: 3px; white-space: nowrap;
}
.pl-plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 0 4px; border-radius: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.pl-text { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.pl-none { font-size: 12px; color: var(--muted); }
/* the indicator is also the control that corrects it */
.plate-btn { display: block; width: 100%; text-align: left; padding: 8px 0 2px; }
.plate-btn:active { opacity: 0.6; }
.plate-hint {
  font-size: 11px; color: var(--muted); text-align: left;
  min-height: 32px; display: flex; align-items: center;
}

/* plate preview inside the compact plan list — the name keeps its own ellipsis
   so the second line can exist without the row clipping it */
.pl-plates { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.pl-nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- routine editor ---------- */
.day-head {
  display: grid; grid-template-columns: 1fr auto 14px; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 2px 0;
}
.dh-name { font-size: 16px; font-weight: 600; }
.dh-meta { font-size: 12px; color: var(--muted); }
.day-head .nr-chev { transition: transform .15s ease; }

.re-row {
  display: grid; grid-template-columns: 1fr auto 34px 34px 40px;
  align-items: center; gap: 6px;
  padding: 7px 0; border-top: 1px solid var(--grid);
}
.re-row:first-of-type { margin-top: 10px; }
.re-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-target {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 9px; min-height: 34px; white-space: nowrap;
}
.re-btn {
  min-height: 34px; border-radius: 8px; color: var(--ink-2); font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.re-btn:disabled { opacity: 0.3; }
.re-row .x-btn { min-width: 40px; min-height: 40px; justify-self: end; }

/* ---------- exercise picker ---------- */
.pk-groups { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.pk-g {
  padding: 7px 10px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  min-height: 34px;
}
.pk-g.on { background: var(--blue); border-color: transparent; color: #fff; }
.pk-list { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pk-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; min-height: 46px;
  padding: 10px 2px; border-bottom: 1px solid var(--grid);
}
.pk-item:active { background: var(--surface-2); }
.pk-n { font-size: 15px; }
.pk-m { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.pk-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--aqua); border: 1px solid var(--aqua); border-radius: 4px; padding: 0 3px;
}

/* ---------- coach suggestions ---------- */
.coach {
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 3px solid var(--blue); border-radius: 8px;
  background: var(--surface-2); padding: 10px 12px; font-size: 13px;
  margin-bottom: 10px;
}
.coach:last-of-type { margin-bottom: 0; }
.coach.good { border-left-color: var(--good); }
.coach.warn { border-left-color: var(--warning); }
.coach .a-body { color: var(--ink-2); }
.coach .a-body b { display: block; margin-bottom: 2px; color: var(--ink); }
.coach-rows { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.coach-rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--border); }
.coach-rows li:first-child { border-top: 0; }
.coach-rows .cr-n { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.coach-rows .cr-a { display: flex; gap: var(--sp-2); margin-left: auto; }

/* muscle volume rows */
.mv-row { margin-bottom: 11px; }
.mv-row:last-of-type { margin-bottom: 4px; }
.mv-track { position: relative; }
.mv-mev { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-2); opacity: 0.75; border-radius: 1px; }

/* milestone quip */
.quip {
  font-size: 13px; color: var(--ink-2); line-height: 1.4;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 12px;
}
.quip.fresh { border-color: var(--orange); color: var(--ink); animation: quipPop .5s ease; }
@keyframes quipPop { from { transform: scale(0.96); opacity: 0; } }

/* action dock (rest timer + the workout's main action) — sits directly above the tab bar */
#rest-root { position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

.exercise-block { border-top: 1px solid var(--grid); padding-top: 12px; margin-top: 12px; }
.exercise-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.ex-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.ex-head .ex-name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; }
.ex-head .ex-target { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.ex-head .x-btn { margin: -10px -6px -10px 0; }
.last-time { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

/* grocery */
.g-item { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--grid); }
.g-item:last-child { border-bottom: none; }
/* the whole name row is the check-off target; the steppers and ✕ sit outside it
   so they can never be hit by someone ticking an item off mid-aisle */
.g-tap { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; padding: 12px 2px; }
.g-check {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--baseline);
  display: flex; align-items: center; justify-content: center; font-size: 15px; color: transparent; flex-shrink: 0;
}
.g-item.done .g-check { background: var(--good); border-color: var(--good); color: #fff; }
.g-item.done .g-name { text-decoration: line-through; color: var(--muted); }
.g-name { flex: 1; font-size: 15px; min-width: 0; }
.g-qty { font-size: 12px; font-weight: 700; color: var(--orange); }
.g-sub { font-size: 12px; color: var(--muted); }
.g-step {
  width: 34px; min-height: 40px; flex-shrink: 0; border-radius: 8px;
  color: var(--ink-2); font-size: 17px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border);
}
.g-item.done .g-step { opacity: 0.35; }
/* aisle headings */
.aisle {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 2px;
}
.aisle:first-child { margin-top: 2px; }
.aisle-n {
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  background: var(--surface-2); border-radius: 99px; padding: 1px 7px;
}

/* ---------- sleep logging ---------- */
/* nudge buttons flanking the time input: the correction most mornings need is
   ±15 minutes, and spinning an OS wheel for that is the whole complaint */
.time-row { display: grid; grid-template-columns: 44px 44px 1fr 44px 44px; gap: 5px; align-items: center; }
.time-row input { text-align: center; padding: 11px 2px; }
.t-nudge {
  min-height: 44px; border-radius: 9px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
}
.t-nudge:active { border-color: var(--blue); transform: scale(0.96); }
.sl-dur-line {
  text-align: center; font-size: 13px; color: var(--muted);
  margin-top: 12px; padding: 9px; border-radius: 10px; background: var(--surface-2);
}
.sl-dur-line b { color: var(--ink); font-size: 16px; }

/* quality as five targets, not a slider to drag to a number nobody can feel */
.q-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.q-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px; min-height: 62px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.q-grid button.on { border-color: var(--violet); background: rgba(144,133,233,0.15); color: var(--ink); }
.q-face { font-size: 20px; line-height: 1; }
.q-lab { font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; }

.staple-chip {
  display: inline-flex; flex-direction: column; gap: 1px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 8px 12px; margin: 0 8px 8px 0; text-align: left;
}
.staple-chip .s-name { font-size: 13px; font-weight: 600; }
.staple-chip .s-sub { font-size: 11px; color: var(--muted); }

/* alerts */
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-left: 3px solid var(--warning);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
  background: var(--surface);
}
.alert.crit { border-left-color: var(--critical); }
.alert.good { border-left-color: var(--good); }
.alert .a-ico { font-size: 15px; }
.alert .a-body b { display: block; margin-bottom: 2px; }
.alert .a-body { color: var(--ink-2); }

/* onboarding */
.ob-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.ob-step-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--baseline); }
.ob-step-dots span.on { background: var(--blue); }

.chart-note { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* svg text uses ink tokens */
svg text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* settings key input */
.key-row { display: flex; gap: 8px; align-items: center; }
.key-row input { flex: 1; }
.key-set {
  flex: 1; min-width: 0; font-size: 13px; font-family: ui-monospace, monospace;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

details.adv { margin-top: 10px; }
details.adv summary { color: var(--muted); font-size: 13px; cursor: pointer; min-height: 32px; display: flex; align-items: center; }

/* an input that should span both columns of a .grid-2 */
.grid-2-span { grid-column: 1 / -1; }

/* checkbox + label row (optional quality rating, etc.) */
.check-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin: 12px 0 0; color: var(--ink-2); font-size: 13px;
}
.check-row input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- scan review: every estimate is editable ---------- */
.scan-item {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; margin-top: 10px; background: var(--surface-2);
}
.scan-item .si-head { display: flex; align-items: center; gap: 10px; margin: 0; }
.scan-item .si-head input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
.scan-item .si-name { font-weight: 600; }
.scan-item .si-portion { margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.si-macros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.si-macros label {
  margin: 0; font-size: 10.5px; color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.si-macros input { text-align: center; padding: 8px 2px; margin-top: 3px; font-size: 14px; }

/* ---------- muscle tagging grid ---------- */
.mus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mus-grid button {
  min-height: 44px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.mus-grid button.on { background: var(--blue); border-color: transparent; color: #fff; }

/* in-modal back link (onboarding steps) */
.back-link {
  color: var(--muted); font-size: 13px; font-weight: 600;
  min-height: 40px; display: inline-flex; align-items: center; margin-bottom: 4px;
}

/* =====================================================================
   Focused training — Today hero, Train overview, one-exercise workout.
   Bold numbers, quiet secondary text, one obvious action per screen.
   Colours only ever come from theme tokens, so every theme inherits it.
   ===================================================================== */
.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; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }
.modal:focus-visible { outline: none; }
html {
  scroll-padding-top: calc(env(safe-area-inset-top) + 76px);
  scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--dock-h, 0px) + 16px);
}
.view { padding-bottom: calc(32px + var(--dock-h, 0px)); }
#toast-root { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--dock-h, 0px) + 14px); }
body.in-workout #fab-root { display: none; }
#fab-root { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--dock-h, 0px) + 16px); }
.btn, .btn.small { min-height: 44px; }
.tab { min-height: 44px; }
.tab .tab-ico svg { width: 23px; height: 23px; display: block; }
.ico { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.notices { margin-top: 20px; }
.grow { flex: 1; min-width: 0; }

.eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.eyebrow .ico { width: 15px; height: 15px; }
.eyebrow.good { color: var(--good); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: 0.35; } }

/* ---------- hero card (Today + Train) ---------- */
.hero-card { padding: 20px 18px 18px; }
.hero-title, .card h2.hero-title {
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em;
  margin: 8px 0 6px; overflow-wrap: anywhere; color: var(--ink);
}
.hero-meta { font-size: 14px; color: var(--ink-2); }
.hero-card.live { border-color: var(--good); }
.btn.big { min-height: 56px; font-size: 17px; font-weight: 750; border-radius: 14px; letter-spacing: 0.01em; }
.btn.big .ico { width: 20px; height: 20px; }
.hero-list { list-style: none; margin: 16px 0 0; border-top: 1px solid var(--grid); }
.hero-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--grid); font-size: 15px;
}
.hl-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-v { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hl-v .unit, .pl-val .unit { font-size: 12px; color: var(--muted); font-weight: 500; }
.hl-more { color: var(--muted); font-size: 13px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 16px; }
.hs-v { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hs-l { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.empty-inline { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }

/* ---------- Today: three glance tiles ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
  min-height: 96px; padding: var(--sp-3); min-width: 0; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
}
.tile:active { border-color: var(--blue); }
.tile-l { display: flex; align-items: center; gap: var(--sp-1); max-width: 100%; overflow-wrap: anywhere; font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tile-l .ico { width: 14px; height: 14px; }
.tile-v { font-size: var(--fs-value); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-v small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.tile-v.tile-empty { font-size: var(--fs-title); color: var(--ink-2); white-space: normal; }
/* one line, always: a wrapping sub made Today's strip taller than Food's. The tile's
   aria-label carries the full meaning, so the rare ellipsis loses nothing. */
.tile-s { max-width: 100%; font-size: var(--fs-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-bar { align-self: stretch; height: 5px; margin-top: auto; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.tile-bar span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.focus-line { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; }

/* ---------- Train overview: the plan as tappable rows ---------- */
.plan { list-style: none; }
.plan li + li .plan-row { border-top: 1px solid var(--grid); }
.plan-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 8px 0; text-align: left;
}
.plan-row .pl-val { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan-row .pl-nm { font-size: 15px; font-weight: 600; }
.pl-chev { display: flex; color: var(--muted); }
.pl-chev .ico { width: 16px; height: 16px; }
details.why { border-top: 1px solid var(--grid); }
details.why summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
details.why summary::-webkit-details-marker { display: none; }
details.why summary::after { content: "\203A"; margin-left: auto; font-size: 20px; color: var(--muted); transition: transform 0.15s; }
details.why[open] summary::after { transform: rotate(90deg); }
.why-body { padding-bottom: 4px; }
.why-body .cue-key { border-top: none; margin-top: 0; padding-top: 0; }

/* ---------- active workout: header ---------- */
.wk-head { padding: 4px 2px 16px; }
.wk-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.wk-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; min-width: 0; overflow-wrap: anywhere; }
.wk-clock { font-size: 22px; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.wk-bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 12px 0 8px; }
.wk-bar span { display: block; height: 100%; border-radius: 3px; background: var(--good); transition: width 0.3s ease; }
.wk-meta { font-size: 13px; color: var(--muted); }
.wk-meta b { color: var(--ink); font-size: 15px; }
/* Numbers that change while you watch — set counts, the set label, the plate
   maths, the dock's "Complete set N of M" — keep fixed-width digits so the line
   doesn't shuffle each tap. Timers and tile values carry their own. */
.wk-meta, .eyebrow, .se-label, .ss-no, .pl-base, .pl-plate, .pl-text, .pl-plates, .dock-main { font-variant-numeric: tabular-nums; }
.wk-foot { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.empty-state h3 { font-size: 22px; margin-bottom: 6px; }

/* ---------- active workout: exercise list ---------- */
.ex-list { display: flex; flex-direction: column; gap: 8px; }
.ex-list .card { margin-bottom: 0; }
.ex-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 9px 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
}
.ex-row:active { border-color: var(--blue); }
.exr-badge {
  width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.ex-row.complete .exr-badge { background: var(--good); color: #fff; }
.ex-row.complete .exr-name { color: var(--ink-2); }
.exr-name { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exr-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.exr-chev { display: flex; color: var(--muted); }
.exr-chev .ico { width: 16px; height: 16px; }

.ex-focus {
  border: 2px solid var(--blue); padding: 14px 14px 16px;
  scroll-margin-top: calc(env(safe-area-inset-top) + 80px);
  scroll-margin-bottom: calc(var(--tabbar-h) + var(--dock-h, 0px) + 16px);
}
.exf-head { display: flex; align-items: flex-start; gap: 6px; }
.exf-title { font-size: 25px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin-top: 5px; overflow-wrap: anywhere; }
.exf-tag { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.icon-btn2 {
  width: 44px; height: 44px; flex-shrink: 0; margin: -6px -8px 0 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.icon-btn2:active, .set-more:active { background: var(--surface-2); }
.exf-coach { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: baseline; column-gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 650; }
.exf-cue { font-weight: 800; }
.exf-cue-text { min-width: 0; }
.exf-coach .link-btn { grid-column: 2; justify-self: start; margin: -4px 0 0; }
.link-btn {
  min-height: 44px; padding: 0 2px;
  color: var(--blue); font-size: 13px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px;
}
.exf-prev { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.set-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.set-line { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; align-items: center; }
.set-sum {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px; border-radius: 11px; text-align: left;
  background: var(--surface-2); border: 1px solid transparent;
}
.ss-no { font-size: 13px; font-weight: 800; color: var(--muted); text-align: center; }
.ss-val { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-state { display: flex; font-size: 12px; color: var(--muted); }
.set-line.done .ss-state { color: var(--good); }
.set-line.done .ss-val { color: var(--ink-2); }
.set-line.next .set-sum { border-color: var(--baseline); }
.set-line.next .ss-state { color: var(--ink-2); font-weight: 700; }
.set-more {
  width: 44px; height: 44px; border-radius: 10px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}

.set-edit { border: 2px solid var(--blue); border-radius: 13px; padding: 8px 10px 12px; background: var(--surface); }
.set-edit.done { border-color: var(--good); }
.se-head { display: flex; align-items: center; gap: 8px; }
.se-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.se-prev { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.se-head .set-more { margin: -4px -6px -4px 0; }
.se-field { display: grid; grid-template-columns: 56px 48px minmax(0, 1fr) 48px; align-items: center; gap: 6px; margin-top: 8px; }
.se-field label { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.se-field label span { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.se-step {
  height: 54px; border-radius: 11px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.se-step:active { background: var(--baseline); }
.se-field input {
  height: 54px; min-width: 0; padding: 4px; text-align: center;
  font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.set-edit.planned input { color: var(--ink-2); border-style: dashed; }
.exf-actions { display: flex; gap: 8px; margin-top: 12px; }
.exf-actions .btn { flex: 1; }

/* ---------- the dock ---------- */
.dock {
  max-width: 560px; margin: 0 auto; padding: 8px 16px 10px;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.22);
}
.dock.rest-only { padding-bottom: 6px; }
.dock-rest { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; }
.dock-rest + .dock-main { margin-top: 6px; }
.rest-track { position: absolute; left: -16px; right: -16px; top: -8px; height: 3px; background: var(--surface-2); }
.rest-fill { height: 100%; width: 0; background: var(--blue); transition: width 1s linear; }
.dock-rest.done .rest-fill { background: var(--good); }
.rest-time { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 58px; }
.dock-rest.done .rest-time { color: var(--good); }
.rest-label { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-rest .btn.small { padding: 0 10px; }
.dock-main { min-height: 54px; font-size: 17px; font-weight: 800; border-radius: 14px; }
.dock-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sheets ---------- */
.sheet-list { display: flex; flex-direction: column; margin-top: 6px; }
.sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 0 4px; text-align: left; font-size: 16px; font-weight: 550;
  border-bottom: 1px solid var(--grid);
}
.sheet-item:last-child { border-bottom: none; }
.sheet-item:active { background: var(--surface-2); }
.sheet-item:disabled { opacity: 0.4; }
.sheet-item.danger { color: var(--critical-ink); }
.sheet-item[aria-checked="true"] { font-weight: 750; color: var(--ink); }
.sheet-item[aria-checked="true"] .ico { color: var(--good); }
.sheet-h { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 18px 0 6px; }
.sheet-p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.why-big { font-size: 42px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.why-big .unit { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.review-ex { padding: 11px 0; border-bottom: 1px solid var(--grid); }
.review-ex b { display: block; font-size: 15px; }
.rv-sets { font-size: 13px; color: var(--ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rv-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rv-left { font-size: 12px; color: var(--warning); margin-top: 2px; }

/* 'CALORIES' + its icon needs 84px; a tile only has that from a 378px viewport. Below
   it, overflow-wrap broke labels mid-word (PROTEI/N). The icon is decorative
   (aria-hidden), so narrow phones drop it rather than the word. */
@media (max-width: 379px) {
  .tile-l .ico { display: none; }
}
@media (max-width: 359px) {
  .hero-title, .card h2.hero-title { font-size: 30px; }
  .se-field { grid-template-columns: 48px 44px minmax(0, 1fr) 44px; gap: 5px; }
  .se-field input { font-size: 22px; }
  .tile { padding: var(--sp-2); }
  .tile-v { font-size: 19px; }
  .ex-focus { padding: 12px 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- reorder sheet (v40) ---------- */
.ro-row { display:grid; grid-template-columns:26px minmax(0,1fr) 44px 44px auto; align-items:center;
  gap:6px; padding:8px 2px; border-bottom:1px solid var(--grid); }
.ro-row:last-of-type { border-bottom:0; }
.ro-row.complete .ro-name { color:var(--muted); }
.ro-pos { color:var(--muted); font-weight:700; font-size:13px; text-align:center; }
.ro-name { display:flex; flex-direction:column; min-width:0; font-weight:600; }
.ro-name small { color:var(--muted); font-weight:500; font-size:12px; }
.ro-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; color:var(--ink-2); }
.ro-btn:disabled { opacity:.3; }
.ro-btn:active:not(:disabled) { border-color:var(--baseline); }
.ro-spacer { display:block; width:74px; }

/* ---------- coach (coach.js) ---------- */
.coach-card { border-left: 3px solid var(--blue); }
.coach-card.good { border-left-color: var(--good); }
.coach-card.warn { border-left-color: var(--warning); }
/* the look comes from .eyebrow — one eyebrow style app-wide; this only spaces it */
.coach-eyebrow { margin-bottom: var(--sp-1); }
.coach-h { display: block; font-size: var(--fs-title); color: var(--ink); margin-bottom: 4px; }
.coach-b { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.45; margin: 0; }
.coach-sub { color: var(--muted); font-size: 13px; margin-top: 8px; }
.coach-actions { gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.coach-actions .btn { min-height: 44px; }
.coach-opt {
  display: block; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; min-height: 44px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; color: var(--ink-2); font-size: 13px;
}
.coach-opt b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
.coach-opt span { display: block; }
.coach-opt em { display: block; font-style: normal; color: var(--muted); margin-top: 4px; }
.coach-opt:focus-visible, .voice-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.debrief { list-style: none; padding: 0; margin: 12px 0 0; }
.debrief li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--grid); font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.debrief li:first-child { border-top: 0; }
.debrief li b { color: var(--ink); }
.db-ico { width: 16px; flex: none; text-align: center; color: var(--muted); font-weight: 700; }
.db-pr .db-ico, .db-up .db-ico { color: var(--good); }
.db-below .db-ico { color: var(--warning); }
.db-watch { color: var(--muted); }
.db-goal { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.db-coach { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.db-coach b { display: block; color: var(--ink); margin-bottom: 2px; }

.voice-picker { display: grid; gap: 8px; margin-top: 6px; }
.voice-opt {
  text-align: left; padding: 10px 12px; min-height: 44px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; color: var(--ink-2); font-size: 13px;
}
.voice-opt b { display: block; color: var(--ink); font-size: 14px; }
.voice-opt span { display: block; color: var(--muted); margin-top: 2px; }
.voice-opt.on { border-color: var(--blue); }

.chart-table { margin-top: 6px; font-size: 13px; }
.chart-table summary { color: var(--muted); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.chart-table table { width: 100%; border-collapse: collapse; }
.chart-table th, .chart-table td { text-align: left; padding: 5px 0; border-top: 1px solid var(--grid); color: var(--ink-2); font-weight: 400; }
.chart-table th { color: var(--muted); }
.ck-stats { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); flex-wrap: wrap; }
.ck-stat { flex: 1 1 64px; background: var(--surface-2); border-radius: 10px; padding: var(--sp-2); }
.ck-stat b { display: block; font-size: var(--fs-title); color: var(--ink); }
.ck-stat span { font-size: var(--fs-meta); color: var(--muted); }
.coach-line.warn { border-left: 3px solid var(--warning); }
.coach-line.good { border-left: 3px solid var(--good); }

/* ---------- log anything (custom.js) ---------- */
.seg.seg-wrap { flex-wrap: wrap; }
.seg.seg-wrap button { flex: 1 1 auto; min-height: 40px; padding: 9px 10px; }
.rt-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--grid); }
.rt-row:first-of-type { border-top: 0; }
.rt-row.on b { color: var(--ink); }
.pk-tag + .pk-tag { margin-left: 2px; }
.dock-check { display: flex; align-items: center; gap: 6px; padding: 6px 2px 2px; flex-wrap: wrap; }
.dc-q { font-size: 13px; color: var(--ink-2); margin-right: auto; }
.dc-btn { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.dc-btn.on { border-color: var(--blue); color: var(--ink); }

/* ---------- gym floor (v45) ---------- */
/* keyboard open: the tab bar goes, the dock rides on top of the keyboard */
body.kbd-open .tabbar { display: none; }
body.kbd-open #rest-root { bottom: var(--kbd-h, 0px); }
body.kbd-open #fab-root { display: none; }
/* the + button and toasts stop sitting on content: reserve its height, and
   float toasts above it when it's showing */
body:not(.in-workout) .view { padding-bottom: calc(96px + var(--dock-h, 0px)); }
body:not(.in-workout) #toast-root { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 84px); }
.ss-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); vertical-align: 1px; }

/* ---------- looks & access (v46) ----------
   Button text on accent fills passes 4.5:1 in every theme. Measured, not
   guessed: white on the dark theme's own blue/orange was 3.6/3.9, and 1.9–2.7 on
   pink, ocean and forest. The dark theme keeps white text on slightly deeper
   fills (chart colours are untouched); the three bright themes use dark ink. */
:root {
  --fill-blue: #3275c7; --fill-orange: #c35022; --on-accent: #ffffff;
  --bar-bg: rgba(13, 13, 13, 0.93);
}
:root[data-theme="pink"]   { --fill-blue: var(--blue); --fill-orange: var(--orange); --on-accent: #16090f; --bar-bg: rgba(23, 12, 18, 0.93); }
:root[data-theme="ocean"]  { --fill-blue: var(--blue); --fill-orange: var(--orange); --on-accent: #06141a; --bar-bg: rgba(7, 18, 22, 0.93); }
:root[data-theme="forest"] { --fill-blue: var(--blue); --fill-orange: var(--orange); --on-accent: #0b140b; --bar-bg: rgba(12, 19, 13, 0.93); }
/* light: its accents already pass with white; its bars were hard-coded black,
   and its warning/good text was 1.8 and 3.4 on white */
:root[data-theme="light"]  { --fill-blue: var(--blue); --fill-orange: var(--orange); --on-accent: #ffffff; --bar-bg: rgba(245, 244, 240, 0.93);
  --warning: #8a5a00; --good: #1a7a1a; }

.topbar, .tabbar { background: var(--bar-bg); }
.btn.primary, .seg button.on, .pk-g.on, .mus-grid button.on, .fab { background: var(--fill-blue); color: var(--on-accent); }
.btn.accent { background: var(--fill-orange); color: var(--on-accent); }
.tabbar.gym-mode .tab:not([data-tab="train"]):not([data-tab="today"]) { opacity: 0.6; }

/* iOS zooms any focused input under 16px */
.si-macros input { font-size: 16px; }

/* 44px targets everywhere a thumb goes */
.seg button, .pk-g, .day-head, .theme-swatch, .back-link { min-height: 44px; }
.g-step { min-width: 44px; min-height: 44px; }

/* landscape on notched phones: nothing under the notch */
.topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.view { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.tabbar, #rest-root { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
#fab-root { right: calc(16px + env(safe-area-inset-right)); }
.sub-title:focus { outline: none; }
.sub-title:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* ---------- onboarding (v47) ---------- */
.ob-splits { display: grid; gap: 8px; margin-top: 6px; }
.ob-split { text-align: left; padding: 10px 12px; min-height: 44px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); font-size: 13px; }
.ob-split b { display: block; color: var(--ink); font-size: 14px; }
.ob-split span { display: block; color: var(--muted); margin-top: 2px; }
.ob-split.on { border-color: var(--blue); }