/* =========================================================================
   Primed — design system
   Dark is first-class; light is the base (no attribute) and dark comes from prefers-color-scheme or
   :root[data-theme='dark']. Accent via :root[data-accent=…] (gold is the signature default).

   Token map (old names stay as aliases — every feature stylesheet uses them):
     surfaces   --bg (canvas) · --card (surface 1) · --card2 (surface 2: inset controls) · --surface-3 (pressed)
     lines      --line (hairline) · --line-2 (strong) · --track (empty bars/rings) · --grid (chart lines)
     ink        --ink (primary) · --sub (secondary) · --faint (tertiary, still ≥ 4.5:1 on every light surface)
     accent     --accent (fills) · --accent-hi / --accent-lo (gradient ends) · --accent-ink (text/icons on
                surfaces) · --on-accent (text on accent fills) · --focus (focus ring)
     semantic   --good / --warn / --bad / --info (fills, icons) · --good-ink / … (text on tinted surfaces)
     type       --display (+ --display-stretch) for headlines and numbers · --body for everything else
                --t-xs 12 · --t-sm 13 · --t-md 15 · --t-base 16 · --t-lg 17 · --t-xl 20 · --t-2xl 24 · --t-3xl 30
     space      --gutter (page side padding) · --col (content width)
     radius     --r-sm 10 · --r-md 14 · --r-lg 20 · --r-xl 28 · --r-pill
     elevation  --shadow-1 (cards) · --shadow-2 (raised) · --shadow-3 (sheets, toasts) · --hl (top highlight)
     motion     --dur-1 120ms · --dur-2 200ms · --dur-3 320ms · --ease-out · --ease-spring (all 0 when the
                user asks for reduced motion)
   ========================================================================= */
:root {
  --bg: #f3f3f0;
  --card: #ffffff;
  --card2: #f1f1ed;
  --surface-3: #e7e6e1;
  --line: #e3e2dc;
  --line-2: #d3d2cb;
  --track: #e6e5df;
  --grid: #ebeae5;
  --ink: #0e0f12;
  --sub: #565b65;
  --faint: #62676f;
  --accent: #eaa50c;
  --accent-hi: #fbc94a;
  --accent-lo: #d68c00;
  --accent-ink: #855900;
  --on-accent: #1a1300;
  --good: #14803d;
  --warn: #b45309;
  --bad: #d42d3a;
  --info: #2160e0;
  --good-ink: #116a32;
  --warn-ink: #8f4207;
  --bad-ink: #b31f2c;
  --info-ink: #1a4ec0;
  --on-good: #ffffff;
  --on-bad: #ffffff;
  --focus: color-mix(in srgb, var(--accent) 80%, var(--ink));
  --scrim: rgba(12, 12, 10, 0.42);
  --shadow-1: 0 1px 2px rgba(24, 22, 14, 0.05), 0 6px 18px -8px rgba(24, 22, 14, 0.1);
  --shadow-2: 0 2px 6px rgba(24, 22, 14, 0.06), 0 14px 32px -12px rgba(24, 22, 14, 0.2);
  --shadow-3: 0 28px 64px -16px rgba(24, 22, 14, 0.32), 0 4px 14px rgba(24, 22, 14, 0.08);
  --hl: rgba(255, 255, 255, 0);
  --seg-on: #ffffff;
  --glow: color-mix(in srgb, var(--accent) 30%, transparent);
  /* aliases */
  --shadow: var(--shadow-1);
  /* type */
  --display: 'Archivo', 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --display-stretch: 112%;
  --body: 'Inter', -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-base: 1rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.5rem;
  --t-3xl: 1.875rem;
  /* space */
  --gutter: 16px;
  --col: 560px;
  /* radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  /* motion */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --tabh: 52px;
  /* The tab bar sits closer to the iPhone home indicator than other footers (labels may overlap its clear zone; the
     buttons stay above it) so the bar takes ~70px instead of ~96px. */
  --tab-pb: max(0px, calc(var(--safe-b) - 16px));
  /* Bottom inset the footer bars and sheets pad by. --shim-pad / --gap-out come from initViewport() (ui.tsx):
     they correct iOS home-screen apps whose viewport stops short of the physical bottom edge. */
  --safe-b: max(0px, calc(max(env(safe-area-inset-bottom, 0px), var(--shim-pad, 0px)) - var(--gap-out, 0px)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0a0b0d;
    --card: #14161a;
    --card2: #1c1f25;
    --surface-3: #262a31;
    --line: #23262d;
    --line-2: #33373f;
    --track: #262a31;
    --grid: #20232a;
    --ink: #f5f6f8;
    --sub: #a4aab4;
    --faint: #8b919c;
    --accent: #f7b928;
    --accent-hi: #ffd76e;
    --accent-lo: #e69a08;
    --accent-ink: #fbc443;
    --on-accent: #1a1300;
    --good: #3dd68c;
    --warn: #f5a524;
    --bad: #ff6369;
    --info: #6fa3ff;
    --good-ink: #4ade94;
    --warn-ink: #f7b04a;
    --bad-ink: #ff7a7f;
    --info-ink: #86b2ff;
    --on-good: #04210f;
    --on-bad: #1f0306;
    --focus: var(--accent);
    --scrim: rgba(0, 0, 0, 0.62);
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35);
    --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 28px -10px rgba(0, 0, 0, 0.7);
    --shadow-3: 0 30px 70px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --hl: rgba(255, 255, 255, 0.045);
    --seg-on: #2c3039;
    --glow: color-mix(in srgb, var(--accent) 26%, transparent);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a0b0d;
  --card: #14161a;
  --card2: #1c1f25;
  --surface-3: #262a31;
  --line: #23262d;
  --line-2: #33373f;
  --track: #262a31;
  --grid: #20232a;
  --ink: #f5f6f8;
  --sub: #a4aab4;
  --faint: #8b919c;
  --accent: #f7b928;
  --accent-hi: #ffd76e;
  --accent-lo: #e69a08;
  --accent-ink: #fbc443;
  --on-accent: #1a1300;
  --good: #3dd68c;
  --warn: #f5a524;
  --bad: #ff6369;
  --info: #6fa3ff;
  --good-ink: #4ade94;
  --warn-ink: #f7b04a;
  --bad-ink: #ff7a7f;
  --info-ink: #86b2ff;
  --on-good: #04210f;
  --on-bad: #1f0306;
  --focus: var(--accent);
  --scrim: rgba(0, 0, 0, 0.62);
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 28px -10px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 30px 70px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --hl: rgba(255, 255, 255, 0.045);
  --seg-on: #2c3039;
  --glow: color-mix(in srgb, var(--accent) 26%, transparent);
}
:root[data-theme='light'] { color-scheme: light; }

/* ---------- accents (light) — text contrast >= 4.5:1: accent-ink on --card2, on-accent on --accent ----------
   --accent-hi / --accent-lo (button gradient ends) follow the accent automatically. */
:root:not([data-accent='gold'], :not([data-accent])) { --accent-hi: color-mix(in srgb, var(--accent) 78%, #fff); --accent-lo: color-mix(in srgb, var(--accent) 88%, #000); }
:root[data-accent='blue'] { --accent: #2563eb; --accent-ink: #1d4ed8; --on-accent: #ffffff; }
:root[data-accent='green'] { --accent: #15803d; --accent-ink: #166534; --on-accent: #ffffff; }
:root[data-accent='red'] { --accent: #e11d48; --accent-ink: #be123c; --on-accent: #ffffff; }
:root[data-accent='purple'] { --accent: #7c3aed; --accent-ink: #6d28d9; --on-accent: #ffffff; }
:root[data-accent='orange'] { --accent: #f26a1b; --accent-ink: #b93c0a; --on-accent: #1f0a00; }
:root[data-accent='teal'] { --accent: #0f766e; --accent-ink: #115e59; --on-accent: #ffffff; }
:root[data-accent='pink'] { --accent: #db2777; --accent-ink: #be185d; --on-accent: #ffffff; }
/* ---------- accents (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-accent='blue']:not([data-theme='light']) { --accent: #5b8cff; --accent-ink: #86a9ff; --on-accent: #0b0c0f; }
  :root[data-accent='green']:not([data-theme='light']) { --accent: #34d27a; --accent-ink: #4ade80; --on-accent: #04210f; }
  :root[data-accent='red']:not([data-theme='light']) { --accent: #ff5c73; --accent-ink: #ff8394; --on-accent: #1f0208; }
  :root[data-accent='purple']:not([data-theme='light']) { --accent: #a78bfa; --accent-ink: #bba5ff; --on-accent: #130a2a; }
  :root[data-accent='orange']:not([data-theme='light']) { --accent: #fb8c3c; --accent-ink: #fd9f5c; --on-accent: #1f0a00; }
  :root[data-accent='teal']:not([data-theme='light']) { --accent: #2dd4bf; --accent-ink: #2dd4bf; --on-accent: #022420; }
  :root[data-accent='pink']:not([data-theme='light']) { --accent: #f472b6; --accent-ink: #f78bc3; --on-accent: #2a0717; }
}
:root[data-theme='dark'][data-accent='blue'] { --accent: #5b8cff; --accent-ink: #86a9ff; --on-accent: #0b0c0f; }
:root[data-theme='dark'][data-accent='green'] { --accent: #34d27a; --accent-ink: #4ade80; --on-accent: #04210f; }
:root[data-theme='dark'][data-accent='red'] { --accent: #ff5c73; --accent-ink: #ff8394; --on-accent: #1f0208; }
:root[data-theme='dark'][data-accent='purple'] { --accent: #a78bfa; --accent-ink: #bba5ff; --on-accent: #130a2a; }
:root[data-theme='dark'][data-accent='orange'] { --accent: #fb8c3c; --accent-ink: #fd9f5c; --on-accent: #1f0a00; }
:root[data-theme='dark'][data-accent='teal'] { --accent: #2dd4bf; --accent-ink: #2dd4bf; --on-accent: #022420; }
:root[data-theme='dark'][data-accent='pink'] { --accent: #f472b6; --accent-ink: #f78bc3; --on-accent: #2a0717; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* The document never scrolls (no whole-page rubber-band on iPhone); only .scroller does.
   The html background is the "canvas" color iOS paints anywhere the app doesn't reach — including a strip under
   the viewport that some iOS versions leave at the bottom of home-screen apps. It always matches the footer
   (tab bar / sheet = --card, onboarding bar / plain pages = --bg), so that strip reads as part of the bar. */
html { --foot-bg: var(--bg); background: var(--foot-bg); }
html:has(.tabbar), html:has(.sheet-backdrop) { --foot-bg: var(--card); }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: transparent; }
/* iPhone app (html.native, see initViewport): no home-screen strip exists there, and the keyboard plugin tints the
   area behind the keyboard from the body color — so body carries the same color as html. No long-press link/image
   menus (they offer "Open" inside a preview, which is not how an app behaves). */
html.native body { background: var(--foot-bg); }
html.native a, html.native img { -webkit-touch-callout: none; }
body { margin: 0; color: var(--ink); font-family: var(--body); font-size: var(--t-base); line-height: 1.45; letter-spacing: -0.008em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-wrap: break-word; }
#root { height: 100%; }
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
/* No double-tap zoom on fast repeated taps (steppers, checklists). */
button, a, label, input, select, textarea, summary, [role='button'] { touch-action: manipulation; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- app shell ----------
   .shell      fixed, full screen, column: [top bar] [main] [footer: tab bar / onboarding bar]
   .shell-main the only flexible row; holds the scroller and the floating feedback button
   .scroller   the one scroll container (overscroll contained so the chrome never moves)            */
/* Full screen: top/left/right 0 and the bottom pushed past the layout viewport by --shim-b when iOS reports a
   viewport shorter than what it actually shows (initViewport). min-height 100dvh covers the same bug where the
   dynamic viewport is taller than the layout one. Neither applies while the keyboard is up. */
.shell { position: fixed; top: 0; left: 0; right: 0; bottom: calc(0px - var(--shim-b, 0px)); min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
html.kb-open .shell, html.kb-open .sheet-backdrop { bottom: 0; min-height: 0; }
.shell-main { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.scroller { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 12px; scroll-padding-bottom: 24px; }
.shell:not(:has(.tabbar, .onboard-bar)) .scroller { padding-bottom: var(--safe-b); }
/* An open sheet locks the page behind it. */
body:has(.sheet-backdrop) .scroller { overflow: hidden; }

/* ---------- page frame ---------- */
.page { position: relative; max-width: var(--col); margin: 0 auto; padding-inline: var(--gutter); padding-block: 14px 36px; min-height: 100%; }
.page.with-tabs { padding-bottom: 36px; }
.page-center { display: flex; flex-direction: column; justify-content: center; }
/* Screen change (Shell adds .enter-*): a short fade + nudge; `top`/`left` (not transform) so fixed bars inside the
   page (rest timer) keep their place while it runs. */
.page.enter-tab { animation: page-in-tab var(--dur-3) var(--ease-out); }
.page.enter-push { animation: page-in-push var(--dur-3) var(--ease-out); }
.page.enter-pop { animation: page-in-pop var(--dur-3) var(--ease-out); }
@keyframes page-in-tab { from { opacity: 0; top: 8px; } }
@keyframes page-in-push { from { opacity: 0; left: 18px; } }
@keyframes page-in-pop { from { opacity: 0; left: -18px; } }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.stack-xs { display: flex; flex-direction: column; gap: 4px; }
.row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; }
.grow2 { flex: 2; }
.center { text-align: center; }
.block { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.section { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding-inline: 4px; }
.section-head .linkbtn { min-height: 44px; margin-block: -8px; }

/* ---------- type ---------- */
/* The display face (Archivo, set wide) carries headlines and every big number. */
.display, .h2, .h3, .score, .bigtime, .restnum, .sheet h2,
.wt-input, .wt-latest, .pend-head, .fc-code, .fc-input, .fc-avatar, .bulk-surplus-num, .ob-h2, .home-countdown .num,
.home-level-badge, .home-level-row strong, .home-body-empty strong, .set-group-title, .otp-box, .ad-count, .ad-kpi strong,
.rstart-btn, .rstat-v, .rbest-v, .rl-guide-label, .rl-guide-left .num, .rl-big, .rl-metric-v, .rl-state h2,
.ssn-title, .ssn-rx-big, .wk-num, .lp-goal-big, .stp-now strong, .tg-av, .tr-load-w, .tr-wnum, .mx-num, .auth-wordmark {
  font-family: var(--display);
  font-stretch: var(--display-stretch);
}
.display { font-weight: 800; font-size: var(--t-3xl); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.h2 { font-weight: 750; font-size: var(--t-xl); line-height: 1.18; letter-spacing: -0.02em; }
.h3 { font-weight: 700; font-size: var(--t-lg); line-height: 1.28; letter-spacing: -0.012em; }
.label { font-size: var(--t-xs); font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.3; }
.sub { color: var(--sub); font-size: var(--t-md); line-height: 1.45; }
.small { color: var(--sub); font-size: var(--t-sm); line-height: 1.4; }
/* Numbers line up in columns and don't jitter as they tick. */
.num, .score, .bigtime, .restnum { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
.muted { color: var(--sub); }
.accent-ink { color: var(--accent-ink); }
.good-ink { color: var(--good-ink); }
.danger-ink { color: var(--bad-ink); }
.info-ink { color: var(--info-ink); }
.warn-text { color: var(--warn-ink); font-size: 0.875rem; font-weight: 600; }
.lr-title { font-weight: 600; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--sub); text-align: center; padding: 18px 12px; font-size: 0.875rem; line-height: 1.45; text-wrap: balance; }
.empty-loading { display: flex; flex-direction: column; gap: 10px; }
.empty-loading .skel:nth-child(2) { opacity: 0.6; }
.empty-ico { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--card2); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- cards ---------- */
.card { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-1), inset 0 1px 0 var(--hl); text-align: left; width: 100%; }
.card.tight { padding: 12px 14px; gap: 6px; border-radius: 16px; }
button.card { border: 1px solid var(--line); font: inherit; color: inherit; }
.tappable { transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease, border-color var(--dur-2) ease; }
.tappable:active { transform: scale(0.982); }
@media (hover: hover) { button.card.tappable:hover, .listrow.tappable:hover { border-color: var(--line-2); } }
.card-accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.card-bad { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--card)); }
.card-info { border-color: color-mix(in srgb, var(--info) 40%, var(--line)); background: color-mix(in srgb, var(--info) 7%, var(--card)); }
.today-card { border: 1.5px solid color-mix(in srgb, var(--accent) 75%, var(--line)); box-shadow: var(--shadow-1), 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 var(--hl); }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: var(--r-md); border: 1px solid transparent; font-weight: 700; font-size: var(--t-base); letter-spacing: -0.012em; line-height: 1.15; text-decoration: none; user-select: none; -webkit-user-select: none; transition: transform var(--dur-1) var(--ease-out), filter var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.42; cursor: default; transform: none; box-shadow: none; }
.btn[aria-busy='true'] { opacity: 1; }
.btn-primary { background: var(--accent); background-image: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo)); color: var(--on-accent); border-color: color-mix(in srgb, var(--accent-lo) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -8px var(--glow); }
.btn-primary:active { filter: brightness(0.94); }
.btn-secondary { background: var(--card2); border-color: var(--line); color: var(--ink); box-shadow: inset 0 1px 0 var(--hl); }
.btn-secondary:active { background: var(--surface-3); }
.btn-ghost { background: transparent; color: var(--accent-ink); }
.btn-ghost:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn-danger { background: var(--bad); color: var(--on-bad); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--bad) 60%, transparent); }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
  .btn-secondary:hover:not(:disabled) { border-color: var(--line-2); }
}
.btn-sm { min-height: 44px; font-size: 0.875rem; padding: 0 14px; border-radius: 12px; }
.btn-block { width: 100%; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 0; background: transparent; color: var(--ink); flex: none; text-decoration: none; transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); }
.iconbtn:active { background: var(--card2); transform: scale(0.94); }
.iconbtn:disabled { opacity: 0.3; }
.linkbtn { background: none; border: 0; color: var(--accent-ink); font-weight: 700; font-size: 0.875rem; padding: 8px 2px; min-height: 44px; min-width: 44px; }
.linkbtn:active { opacity: 0.6; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin 0.75s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- chips / inputs ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-align: left; overflow-wrap: anywhere; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; box-shadow: 0 6px 16px -10px var(--glow); }
.chip:active { transform: scale(0.96); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-wrap { position: relative; display: flex; }
.field-wrap input { padding-right: 52px; }
.field-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: none; color: var(--sub); }
.field-eye:active { background: var(--track); }
.field-err { color: var(--bad-ink); font-weight: 600; }
.field-bad input, .field-bad textarea { border-color: var(--bad); }
.field-bad input:focus, .field-bad textarea:focus { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
input, textarea, select { width: 100%; font-size: 1rem; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-height: 52px; transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }
textarea { resize: vertical; line-height: 1.45; }
input[type='time'], input[type='date'] { -webkit-appearance: none; appearance: none; }
input.mini { width: 62px; min-height: 44px; padding: 6px; text-align: center; font-variant-numeric: tabular-nums; }
input.mini.time { width: 124px; }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 1.375rem; font-weight: 500; line-height: 1; box-shadow: inset 0 1px 0 var(--hl); transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease; }
.stepper button:active { background: var(--surface-3); transform: scale(0.92); }
.stepper .num { min-width: 58px; text-align: center; font-family: var(--display); font-stretch: var(--display-stretch); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.02em; white-space: nowrap; }
.stepper .num small { font-family: var(--body); font-size: 0.8125rem; font-weight: 600; color: var(--sub); letter-spacing: 0; }
/* Two steppers side by side (grid2 / pairs) must fit a 375 px phone. */
.grid2 > * { min-width: 0; }
.grid2 .stepper { gap: 4px; }
.grid2 .stepper .num { min-width: 36px; flex: 1; }
.scale { display: flex; flex-direction: column; gap: 6px; }
.scale-row { display: flex; gap: 6px; }
.scale-row button { flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; transition: background-color var(--dur-2) ease, transform var(--dur-1) var(--ease-out); }
.scale-row button:active { transform: scale(0.95); }
.scale-row button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: 0 6px 16px -10px var(--glow); }
.toggle { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 51px; height: 31px; border-radius: 99px; background: var(--track); position: relative; flex: none; transition: background-color var(--dur-2) ease; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.25); transition: transform var(--dur-2) var(--ease-spring); }
.toggle input:checked + .switch { background: var(--accent); }
.toggle input:checked + .switch::after { transform: translateX(20px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--focus); outline-offset: 2px; }
input.sw { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent); flex: none; }
.remrow { gap: 10px; min-height: 52px; }
/* A field with its button on the same line: bottoms line up with the input, not the label. */
.inline-form { display: flex; align-items: flex-end; gap: 8px; }
.inline-form > .btn { flex: none; min-width: 72px; }

/* ---------- data bits ---------- */
.ring { position: relative; flex: none; }
.ring svg { display: block; overflow: visible; }
.ring-arc { transition: stroke-dashoffset 0.6s var(--ease-out); }
:root:not([data-theme='light']) .ring-arc { filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 45%, transparent)); }
@media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .ring-arc { filter: none; } }
.ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.score { font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.035em; }
.score.big { font-size: 2.875rem; }
.score.fuel-left { font-size: 1.6875rem; }
.bigtime { font-weight: 800; font-size: 2.125rem; line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; }
.ampm { font-family: var(--body); font-size: 0.9375rem; font-weight: 700; margin-left: 4px; color: var(--sub); letter-spacing: 0; }
.bar { background: var(--track); border-radius: 99px; overflow: hidden; width: 100%; }
.bar > div { height: 100%; border-radius: 99px; transition: width 0.5s var(--ease-out); }
.why { background: var(--card2); border-radius: var(--r-md); padding: 12px 14px 12px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.why::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.why ul { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--sub); font-size: 0.875rem; }
.why li::marker { color: var(--faint); }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: var(--t-xs); font-weight: 750; letter-spacing: 0.035em; text-transform: uppercase; white-space: nowrap; line-height: 1.25; }
.pill-accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.pill-good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-ink); }
.pill-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn-ink); }
.pill-bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad-ink); }
.pill-info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info-ink); }
.pill-muted { background: var(--card2); color: var(--sub); box-shadow: inset 0 0 0 1px var(--line); }
.listrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 56px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); text-align: left; }
.listrow:last-child { border-bottom: 0; }
button.listrow:active, a.listrow:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.listrow > svg:first-child.accent-ink { flex: none; }
.lr-title { overflow-wrap: anywhere; }
.check { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; background: none; border: 0; color: var(--ink); text-align: left; padding: 6px 0; }
.check-box { width: 28px; height: 28px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sub) 65%, transparent); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring); }
.check:active .check-box { transform: scale(0.9); }
.check.done .check-box { background: var(--good); border-color: var(--good); color: var(--on-good); }
.check.done .lr-title { color: var(--sub); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--sub) 60%, transparent); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--body); font-size: 0.7813rem; font-variant-numeric: tabular-nums; }
.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--sub); }
.resources { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; user-select: text; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs button { padding: 0; border: 0; background: none; }
.thumbs img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; }
.thumbs.big img { width: 104px; height: 138px; }
.thumbs figure { display: flex; flex-direction: column; gap: 2px; }
/* Loading placeholder: a block with a moving sheen (Skeleton in ui.tsx). */
.skel { display: block; border-radius: 10px; background: var(--card2); background-image: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 80%); background-size: 220% 100%; background-repeat: no-repeat; animation: skel 1.4s ease-in-out infinite; }
.skel.card { background-color: var(--card); border: 1px solid var(--line); }
@keyframes skel { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ---------- today ---------- */
.readiness { flex-direction: row !important; align-items: center; gap: 18px !important; }
/* The readiness card is the hero of Today: a soft glow of the accent behind the ring. */
.home-readiness { position: relative; overflow: hidden; isolation: isolate; }
.home-readiness::before { content: ''; position: absolute; z-index: -1; left: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent); pointer-events: none; }
.home-readiness.rd-empty::before { opacity: 0.5; }
.rings { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
.ringcell { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; min-width: 0; min-height: 44px; color: var(--ink); transition: transform var(--dur-1) var(--ease-out); }
.ringcell:active { transform: scale(0.94); }
.ringcell .small { font-weight: 600; }
.nudges { display: flex; flex-direction: column; gap: 8px; }
.nudge { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; text-align: left; box-shadow: var(--shadow-1); }
.nudge svg:first-child { color: var(--accent-ink); flex: none; }
.nudge.lvl2 { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, var(--card)); color: var(--warn-ink); }
.nudge.lvl2 svg:first-child { color: var(--warn-ink); }
.nudge.lvl3 { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.nudge.lvl3 svg:first-child { color: var(--on-bad); }

/* ---------- train ---------- */
.setrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.setrow.done .sub { color: var(--good-ink); }
.setno { width: 18px; font-weight: 800; color: var(--sub); font-variant-numeric: tabular-nums; }
.setcheck { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--card2); color: var(--sub); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring); }
.setcheck:active { transform: scale(0.9); }
.setrow.done .setcheck { background: var(--good); border-color: var(--good); color: var(--on-good); box-shadow: 0 6px 14px -8px var(--good); }
.swap { border-top: 1px solid var(--line); padding-top: 10px; }
.altrow { display: flex; align-items: center; gap: 8px; text-align: left; min-height: 56px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card2); color: var(--ink); }
.restbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabh) + var(--tab-pb) + 10px); max-width: 536px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 18px; border-radius: 20px; background: color-mix(in srgb, var(--ink) 94%, transparent); color: var(--bg); z-index: 30; box-shadow: var(--shadow-3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: rise var(--dur-3) var(--ease-out); }
.restbar button { background: none; border: 0; color: var(--bg); font-weight: 800; min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 12px; }
.restbar button:active { background: color-mix(in srgb, var(--bg) 14%, transparent); }
.restbar .accent-ink { color: var(--accent); }
:root:not([data-theme='dark']) .restbar .accent-ink { color: var(--accent-hi); }
.restnum { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.035em; }
.small.inv { color: var(--bg); opacity: 0.78; }
.fooditem { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.evtime { width: 128px; flex: none; }
.testrow { min-height: 44px; gap: 10px; }
.imp { width: 56px; text-align: right; }

/* ---------- squad / progress ---------- */
.seg { display: flex; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 11px; background: none; color: var(--sub); font-weight: 700; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.seg button:active:not(.on) { color: var(--ink); }
.seg button.on { background: var(--seg-on); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 3px 10px -4px rgba(16, 24, 40, 0.18), inset 0 1px 0 var(--hl); }
.lbrow { display: flex; align-items: center; gap: 10px; min-height: 50px; border-bottom: 1px solid var(--line); }
.lbrow:last-of-type { border-bottom: 0; }
.lbrow.me { font-weight: 800; }
.rank { width: 28px; height: 28px; border-radius: 50%; background: var(--card2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8125rem; flex: none; font-variant-numeric: tabular-nums; }
.lbrow:nth-child(1) .rank { background: var(--accent); color: var(--on-accent); }
.compare { display: flex; flex-direction: column; gap: 4px; }
.cmp-you { width: 104px; text-align: right; }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 6px; }
.badge:not(.on) strong, .badge:not(.on) .small { color: var(--faint); }
.badge:not(.on) .medal { opacity: 0.7; }
.badge.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.badge strong { font-size: 0.8125rem; line-height: 1.25; }
.badge .small { font-size: 0.75rem; }
.medal { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--track); color: var(--sub); }
.badge.on .medal { background: linear-gradient(160deg, var(--accent-hi), var(--accent-lo)); color: var(--on-accent); box-shadow: 0 6px 14px -8px var(--glow); }

/* ---------- chrome ---------- */
.topbar { flex: none; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
.backbtn { display: flex; align-items: center; gap: 2px; max-width: var(--col); margin: 0 auto; width: 100%; min-height: 50px; padding: 0 8px; border: 0; background: none; font-weight: 700; font-size: 1rem; color: var(--accent-ink); }
.backbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backbtn:active { opacity: 0.6; }
/* The footers' backgrounds keep going below their box (the offset box-shadow), so if iOS draws anything under the
   shell it is the bar's color, never a strip of page background. */
.tabbar { flex: none; position: relative; z-index: 25; display: flex; justify-content: center; background: var(--card); border-top: 1px solid var(--line); padding-bottom: var(--tab-pb); box-shadow: 0 60px 0 60px var(--card); }
.tabbar button { position: relative; flex: 1; max-width: 112px; height: var(--tabh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; background: none; color: var(--sub); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; }
.tabbar button svg { box-sizing: content-box; padding: 3px 14px; border-radius: 999px; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-2) var(--ease-spring); }
.tabbar button:active svg { transform: scale(0.88); }
.tabbar button.on { color: var(--ink); font-weight: 700; }
.tabbar button.on svg { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
/* Active indicator: a short bar on the top edge of the tab bar. */
.tabbar button::before { content: ''; position: absolute; top: -1px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--accent); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
.tabbar button.on::before { transform: scaleX(1); }
.tabbar button:focus-visible { outline-offset: -4px; border-radius: 14px; }
.onboard { display: flex; flex-direction: column; gap: 16px; }
.onboard-bar { flex: none; z-index: 25; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px calc(10px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 60px 0 60px var(--bg); }
.onboard-bar > * { width: 100%; max-width: 528px; margin-inline: auto; }
/* While typing on a phone the keyboard covers the bottom of the screen: hide the fixed bottom chrome instead
   of letting iOS push it around mid-screen. It comes back as soon as the keyboard closes. */
html.kb-open .tabbar, html.kb-open .onboard-bar, html.kb-open .fb-fab, html.kb-open .restbar { display: none; }

/* ---------- sheets ---------- */
.sheet-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: calc(0px - var(--shim-b, 0px)); min-height: 100dvh; z-index: 50; background: var(--scrim); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); padding-bottom: var(--kb, 0px); overscroll-behavior: contain; animation: fade var(--dur-2) ease; }
.sheet { position: relative; width: 100%; max-width: var(--col); max-height: min(100%, calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 12px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; flex: none; background: var(--card); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 26px 18px calc(18px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; animation: sheet-up var(--dur-3) var(--ease-out); box-shadow: 0 80px 0 0 var(--card), var(--shadow-3), inset 0 1px 0 var(--hl); }
/* Grabber: says "this slides up from the bottom". */
.sheet::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 99px; background: var(--line-2); z-index: 3; pointer-events: none; }
.sheet > * { flex-shrink: 0; }
html.kb-open .sheet { padding-bottom: 14px; }
/* Long sheets: title/close stay on top, main actions stay reachable at the bottom. */
.sheet-head { position: sticky; top: -26px; z-index: 2; margin: -26px -18px 0; padding: 26px 18px 8px; background: var(--card); }
.sheet-foot { position: sticky; bottom: calc(-18px - var(--safe-b)); z-index: 2; display: flex; gap: 8px; margin: 0 -18px calc(-18px - var(--safe-b)); padding: 12px 18px calc(18px + var(--safe-b)); background: var(--card); border-top: 1px solid var(--line); }
html.kb-open .sheet-foot { bottom: -14px; margin-bottom: -14px; padding-bottom: 14px; }
.sheet h2 { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: anywhere; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0.4; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
@keyframes drop { from { transform: translateY(-12px) scale(0.97); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } }
.toast { position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 12px); width: fit-content; max-width: min(460px, calc(100% - 32px)); margin: 0 auto; z-index: 60; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--ink) 95%, transparent); color: var(--bg); border-radius: 16px; padding: 13px 18px; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: drop var(--dur-3) var(--ease-spring); pointer-events: none; }
.splash { flex: 1; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.splash .mark { animation: pop var(--dur-3) var(--ease-spring); }
.mark { position: relative; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(180deg, #faf7f0 0%, #e8e1d2 100%); color: #15161a; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 2.375rem; letter-spacing: -0.04em; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

@media (min-width: 600px) {
  .display { font-size: 2.125rem; }
}
/* Desktop / tablet: the app is a centered column on a quiet canvas (it is a phone app; lines stay readable). */
@media (min-width: 760px) {
  html { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg) 60%) fixed, var(--bg); }
  html:has(.tabbar), html:has(.sheet-backdrop) { --foot-bg: var(--bg); }
  .shell { left: calc(50% - 320px); right: calc(50% - 320px); border-inline: 1px solid var(--line); box-shadow: var(--shadow-3); }
  .tabbar { box-shadow: none; }
  .sheet-backdrop { justify-content: center; padding-bottom: 24px; }
  .sheet { border-radius: var(--r-xl); max-height: min(86vh, 860px); padding-bottom: 20px; animation: pop var(--dur-3) var(--ease-out); }
  .sheet::before { display: none; }
  .sheet-foot { bottom: -20px; margin-bottom: -20px; padding-bottom: 20px; border-radius: 0 0 var(--r-xl) var(--r-xl); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- account ---------- */
.page.page-auth { padding-top: 0; }
.auth { padding-top: 0; }
.auth-head { display: flex; flex-direction: column; gap: 4px; }
.auth-head .h2 { font-size: 1.375rem; }
.auth-rule { display: flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 0.8125rem; font-weight: 600; color: var(--sub); }
.auth-rule.ok { color: var(--good-ink); }
.auth-err { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bad) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad-ink); font-weight: 600; font-size: 0.875rem; }
.auth-err .linkbtn { padding: 4px 0; min-height: 44px; }
.auth-note { padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--good) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); color: var(--good-ink); font-weight: 600; font-size: 0.875rem; }
.auth-link { align-self: center; }
code.url { display: block; font-family: var(--mono); font-size: 0.75rem; background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; word-break: break-all; user-select: all; }

/* ---------- tester feedback ---------- */
.fb-fab { position: absolute; right: 14px; bottom: 14px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; }
.fb-fab:active { transform: scale(0.92); }
.fb-fab.away { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
/* The floating button sits in .shell-main, so it is always just above the tab bar / onboarding bar. */
.shell-main:has(.restbar) .fb-fab { bottom: 96px; }
.fb-fab svg { color: var(--accent-ink); }
.shell:not(:has(.tabbar, .onboard-bar)) .fb-fab { bottom: calc(14px + var(--safe-b)); }
.fb-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--bad); color: var(--on-bad); font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
/* Room at the end of every page so the floating button never covers the last control. */
.page.with-fab { padding-bottom: 84px; }
.page:has(.restbar) { padding-bottom: 120px; }
.fb-sheet textarea { min-height: 110px; }
.fb-thumb { position: relative; align-self: flex-start; }
.fb-thumb img { display: block; max-height: 140px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.fb-thumb .iconbtn { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; }
.fb-card { gap: 8px; cursor: pointer; }
.fb-card.fb-new { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-body { font-size: 1.0625rem; line-height: 1.5; }
.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fb-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.fb-filters::-webkit-scrollbar { display: none; }
.fb-filters .chip { flex: none; }
.fb-vote { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 56px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); font-weight: 800; font-size: 0.875rem; color: var(--sub); }
.fb-vote.on { background: color-mix(in srgb, var(--accent) 20%, var(--card)); border-color: var(--accent); color: var(--accent-ink); }
.fb-meta { display: inline-flex; align-items: center; gap: 4px; }
.fb-who { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-img { padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card2); align-self: flex-start; max-width: 100%; }
.fb-img img { display: block; max-width: 100%; max-height: 360px; }
.fb-img-loading { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.fb-zoom { align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(var(--safe-b) + 12px); }
.fb-zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.fb-reply { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.fb-reply.mine { background: var(--card2); }
.fb-reply.admin { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.fb-admin-tag { margin-left: 6px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-ink); }
.fb-x { border: 0; background: none; color: var(--sub); width: 44px; height: 44px; margin: -6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.fb-replybox { display: flex; gap: 8px; align-items: flex-end; }
.fb-replybox textarea { min-height: 52px; }
.fb-verify { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--info) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 40%, var(--line)); }
.fb-verify .btn { margin-top: 2px; }
.fb-report { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--sub); font-weight: 600; font-size: 0.8125rem; }
.fb-card.fb-hidden { opacity: 0.6; border-style: dashed; }

/* Accessibility (rollout 13) ---------------------------------------------------------------------------------------
   Text size: every font size is in rem (scripts/rem-type.mjs keeps it that way), so it follows the browser's
   default size, and on iPhone the Text Size / Dynamic Type setting: initViewport (ui.tsx) sets --type-scale from
   the system body size (1 at the default Large, up to ~1.35). Inputs never drop under 16 px (iOS zooms into those). */
html { font-size: calc(100% * var(--type-scale, 1)); }
input, textarea, select { font-size: max(1rem, 16px); }

/* Sheets and full-screen dialogs take focus themselves (so screen readers announce them) without a ring;
   everything inside keeps the normal :focus-visible ring. */
[role='dialog'][tabindex='-1']:focus, [role='alertdialog'][tabindex='-1']:focus { outline: none; }


/* Contrast (WCAG AA). Text: --accent-ink / --sub / --faint are ≥ 4.5:1 on every light surface (scripts/
   reliability-tests.ts checks the tokens). Controls: gold (#eaa50c) is only ~2.1:1 on white, so in light mode a
   selected chip / scale button / switch and the primary button get a darker gold edge (≥ 3:1, WCAG 1.4.11), and the
   keyboard focus ring uses the gold text color. Other accents and dark mode already pass with the accent itself. */
:root { --accent-edge: var(--accent); }
:root:not([data-accent]), :root[data-accent='gold'] { --accent-edge: #a87100; --focus: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --accent-edge: var(--accent); --focus: var(--accent); }
}
:root[data-theme='dark'] { --accent-edge: var(--accent); --focus: var(--accent); }
.chip.on, .scale-row button.on { border-color: var(--accent-edge); }
.toggle input:checked + .switch { box-shadow: inset 0 0 0 1.5px var(--accent-edge); }
.btn-primary { border-color: var(--accent-edge); }

/* A stepper at its limit says so (the button is disabled, not silently ignored). */
.stepper button:disabled { opacity: 0.4; }

/* Rollout 15 · billing: the pricing heads-up sheet (screens/pricingnotice.tsx; the plan rows reuse .pw-plan from
   paywall.css), "Free for life" + history in Admin › Subscriptions, and Admin › Funnel (screens/admin.tsx). */
.pn-sheet { gap: 14px; }
.pn-sheet h2 { margin: 2px 0 0; }
.pn-text { margin: 0; font-size: 1rem; line-height: 1.5; }
.pn-sheet .pw-plans { display: flex; flex-direction: column; gap: 10px; }
.pn-terms { margin: 0; }
.pn-legal { margin: 0; color: var(--sub); }

.adm-life { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.adm-life p { margin: 0; }
.adm-log { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-wrap: anywhere; }

.ad-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ad-funnel { min-width: 560px; }
.ad-funnel td:first-child, .ad-funnel th:first-child { white-space: nowrap; }

/* =========================================================================
   Core and stretching blocks (rollout 15, C28): src/app/screens/blocks.tsx
   ========================================================================= */

/* "Core and stretching" card on a workout / planned day */
.blk-card { display: flex; flex-direction: column; gap: 10px; }
.blk-head { display: flex; flex-direction: column; gap: 2px; }
.blk-rows { display: flex; flex-direction: column; gap: 6px; }
.blk-rows:empty { display: none; }
.blk-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-md); background: var(--card2); }
.blk-row .linkbtn { flex: none; min-height: 44px; }
.blk-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.blk-acts:empty { display: none; }
.blk-acts .btn { flex: 1 1 140px; }

/* Header above a block (and "Main workout" after a start block) in the exercise list */
.blk-sep { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin: 6px 2px -4px; font-family: var(--display, inherit); font-size: var(--t-sm, 0.875rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); }
.blk-sep .small { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Tag on a block exercise */
.blk-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; margin-right: 6px; border-radius: 7px; font-family: var(--body); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; vertical-align: 2px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
.blk-tag.stretch { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-ink); }

/* Hold timer on a timed block set */
.blk-hold { flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; border-radius: 22px; border: 1.5px solid var(--line-2); background: var(--card2); color: var(--ink); font: inherit; font-size: var(--t-sm, 0.875rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.blk-hold.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #1a1300); }

/* Program › Core and stretching */
.blk-prefs { display: flex; flex-direction: column; gap: 16px; }
.blk-pref p { margin: 0; }

/* =========================================================================
   Rollout 8 — body, fuel & sleep: weigh-in sheet, Weight screen, readiness inputs, naps, photos waiting for the AI
   ========================================================================= */

/* ---- Weigh-in sheet ---- */
.wt-big { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 4px; }
.wt-step { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 1.75rem; line-height: 1; font-weight: 600; }
.wt-step:active { background: var(--track); }
.wt-val { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wt-input { width: 3.9em; min-height: 64px; padding: 4px 6px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: none; color: var(--ink); text-align: center; font-size: 2.75rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.wt-input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; background: none; }
.wt-unit-label { font-weight: 700; color: var(--sub); font-size: 1.125rem; }
.wt-unit { flex: none; min-width: 110px; }
.wt-unit button { min-height: 44px; }
.wt-sheet .warn-text { margin: 0; }

/* ---- Weight screen ---- */
.wt-latest { font-size: 2.125rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.wt-pace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wt-pace-grid .h3 { overflow-wrap: anywhere; }
.wt-range { margin-bottom: 4px; }
.wt-list { gap: 0; }
.wt-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
.wt-row:last-of-type { border-bottom: 0; }
.wt-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.wt-row-date { min-width: 0; }
.wt-row-date .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-row-lb { font-weight: 700; white-space: nowrap; }
.wt-row-chg { width: 44px; flex: none; text-align: right; color: var(--sub); }
.wt-row-chg.up { color: var(--warn-ink); }
.wt-row-chg.down { color: var(--info-ink); }
.wt-rem .remrow + .remrow { min-height: 44px; }
.wt-day { min-height: 44px; flex: 1; min-width: 0; }
.set-weight { gap: 8px; flex-wrap: wrap; }
.set-weight > .grow { min-width: 120px; }

/* ---- Readiness inputs ---- */
.rd-parts { display: flex; gap: 3px; height: 8px; width: 100%; max-width: 280px; }
.rd-seg { flex-basis: 0; min-width: 6px; border-radius: 99px; background: var(--track); transition: background-color 0.2s ease; }
.rd-seg.on { background: var(--accent); }
.rd-empty .score { color: var(--sub); }
.rd-missing { gap: 4px; }
.rd-miss-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.rd-miss-row:last-child { border-bottom: 0; }
.rd-miss-row .btn { flex: none; }
.home-nutrition { gap: 4px; }
.home-nutrition .sub { margin: 0; }

/* ---- Naps ---- */
.nap-card { gap: 10px; }
.nap-timer { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--info) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); }
.nap-list, .nap-day { display: flex; flex-direction: column; gap: 2px; }
.nap-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; width: 100%; }
.nap-days { gap: 8px; }
.nap-day { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.nap-day:last-child { border-bottom: 0; padding-bottom: 0; }
.nap-day .nap-row { min-height: 44px; padding-left: 10px; color: var(--sub); }
.nap-quick { gap: 8px; }

/* ---- Meal photos waiting for the AI ---- */
.pend-card { gap: 10px; }
.pend-head { font-size: 1rem; }
.pend-row { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--info) 25%, transparent); }
.pend-thumb { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 10px; display: block; }
.pend-row .btn { min-width: 0; }

/* Connected devices (screens/devices.tsx): Apple Health; Oura and Garmin through it (rollout 15) */
.dv-card { gap: 10px; }
.dv-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--card2); color: var(--sub); }
.dv-ico.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-ink); }
.dv-link .small { overflow-wrap: anywhere; }
.dv-scores { font-variant-numeric: tabular-nums; margin-top: -4px; }
.dv-today { color: var(--sub); font-variant-numeric: tabular-nums; }
.dv-oura-note-actions { gap: 8px; }

/* exercise stream styles: body map, exercise sheet + animation, muscle progress */

/* ---------- body map ---------- */
.body-map {
  --body-base: color-mix(in srgb, var(--ink) var(--body-base-mix, 9%), var(--card));
  --body-muscle: color-mix(in srgb, var(--ink) var(--body-muscle-mix, 19%), var(--card));
  --body-gap: var(--body-base);
  display: block;
  flex: none;
  overflow: visible;
}
.body-sil { fill: var(--body-base); }
.body-detail { fill: none; stroke: var(--body-muscle); stroke-width: 0.9; stroke-linecap: round; }
.body-m { stroke: var(--body-gap); stroke-width: 0.7; stroke-linejoin: round; transition: fill 0.35s ease; }
.body-hit { fill: transparent; stroke: transparent; stroke-width: 9; stroke-linejoin: round; pointer-events: all; }
.tappable-map .body-m { cursor: pointer; }
.body-sel { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; }

/* Light mode: a little more ink so the figure reads against the pale panel. */
:root { --body-base-mix: 12%; --body-muscle-mix: 24%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --body-base-mix: 9%; --body-muscle-mix: 19%; } }
:root[data-theme='dark'] { --body-base-mix: 9%; --body-muscle-mix: 19%; }

/* ---------- exercise animation ---------- */
.ex-fig {
  --ex-body: color-mix(in srgb, var(--ink) 80%, var(--card));
  --ex-far: color-mix(in srgb, var(--ink) 40%, var(--card));
  --ex-prop: color-mix(in srgb, var(--ink) 34%, var(--card));
  --ex-prop2: color-mix(in srgb, var(--ink) 13%, var(--card));
  --ex-steel: color-mix(in srgb, var(--ink) 58%, var(--card));
  --ex-hi-n: color-mix(in srgb, var(--accent) 88%, var(--ex-body));
  --ex-hi-f: color-mix(in srgb, var(--accent) 88%, var(--ex-far));
  --ex-lo: color-mix(in srgb, var(--accent) 50%, var(--ex-far));
  --ex-water: color-mix(in srgb, var(--info) 13%, var(--card2));
  --ex-accent-soft: color-mix(in srgb, var(--accent) 22%, var(--card));
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.ex-seg.n { fill: var(--ex-body); }
.ex-seg.f { fill: var(--ex-far); }
.ex-seg.n.hi { fill: var(--ex-hi-n); }
.ex-seg.f.hi { fill: var(--ex-hi-f); }
.ex-seg.lo { fill: var(--ex-lo); }
.ex-ground { stroke: var(--line); stroke-width: 1.2; }
.ex-prop { fill: var(--ex-prop); }
.ex-prop2 { fill: var(--ex-prop2); stroke: var(--ex-prop); stroke-width: 0.8; }
.ex-leg { fill: var(--ex-prop); }
.ex-line { fill: none; stroke: var(--ex-prop); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ex-line.thick { stroke-width: 2.6; }
.ex-rail { fill: var(--ex-prop2); }
.ex-mat { fill: var(--ex-accent-soft); }
.ex-plate circle { fill: var(--ex-steel); }
.ex-plate .ex-plate-in { fill: none; stroke: color-mix(in srgb, var(--ink) 32%, var(--card)); stroke-width: 0.9; }
.ex-plate .ex-hub { fill: var(--ex-prop2); }
.ex-plate path.ex-hub { fill: none; stroke: var(--ex-steel); stroke-width: 1.2; }
.ex-plate.far circle { fill: color-mix(in srgb, var(--ink) 30%, var(--card)); }
.ex-bar { fill: var(--ex-steel); }
.ex-cable { stroke: var(--ex-steel); stroke-width: 0.9; fill: none; }
.ex-band { stroke: var(--accent); stroke-opacity: 0.75; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.ex-bandend { fill: var(--accent); }
.ex-belt { fill: var(--ex-prop); }
.ex-dash rect { fill: var(--line); }
.ex-cone { fill: var(--warn); }
.ex-pack { fill: var(--ex-steel); }
/* water: tinted body behind the swimmer, a translucent layer in front so submerged limbs read as underwater */
.ex-water { fill: var(--ex-water); }
.ex-water.front { fill: var(--info); fill-opacity: 0.1; }
.ex-surface { fill: none; stroke: var(--info); stroke-opacity: 0.7; stroke-width: 1.1; stroke-linejoin: round; }
/* road bike */
.ex-tire { fill: none; stroke: var(--ex-steel); stroke-width: 2.4; }
.ex-spoke { fill: none; stroke: var(--ex-prop); stroke-width: 0.5; }
.ex-hubc { fill: var(--ex-steel); }
.ex-frame { fill: none; stroke: var(--ex-steel); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ex-frame.thin { stroke-width: 1.6; }
.ex-bars { fill: none; stroke: var(--ex-steel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-saddle { fill: var(--ex-steel); }
.ex-ring { fill: none; stroke: var(--ex-steel); stroke-width: 1.2; }
.ex-crank { stroke: var(--ex-steel); stroke-width: 2; stroke-linecap: round; }
.ex-crank.far { stroke: var(--ex-prop); }
.ex-pedal { fill: var(--ex-steel); }
/* soft tissue + walls */
.ex-roller circle { fill: var(--ex-prop2); stroke: var(--ex-prop); stroke-width: 0.8; }
.ex-roller .ex-roller-in { fill: none; stroke: var(--ex-prop); stroke-width: 0.6; }
.ex-roller-mark { stroke: var(--ex-prop); stroke-width: 1.1; stroke-linecap: round; }
.ex-ball { fill: var(--accent); stroke: var(--ex-steel); stroke-width: 0.5; }
.ex-wall { fill: var(--ex-prop2); stroke: var(--ex-prop); stroke-width: 0.8; }
/* breathing pacer */
.ex-breath-max { fill: none; stroke: var(--line); stroke-width: 0.6; stroke-dasharray: 1.2 1.6; }
.ex-breath-ring { fill: var(--ex-accent-soft); stroke: var(--accent); stroke-width: 1.2; }
.ex-breath text { fill: var(--ink); font: 700 0.35rem var(--body); letter-spacing: 0.02em; }

/* iOS 15.4–16.1 has no color-mix(): without this the figure falls back to black (invisible in dark mode). */
@supports not (color: color-mix(in srgb, red, blue)) {
  .ex-fig { --ex-body: var(--ink); --ex-far: var(--sub); --ex-prop: var(--sub); --ex-prop2: var(--line); --ex-steel: var(--sub); --ex-hi-n: var(--accent); --ex-hi-f: var(--accent); --ex-lo: var(--accent); --ex-water: var(--card2); --ex-accent-soft: var(--card2); }
  .ex-seg.lo { fill-opacity: 0.55; }
  .ex-seg.f.hi { fill-opacity: 0.8; }
  .ex-plate .ex-plate-in, .ex-plate.far circle { stroke: var(--sub); }
  .ex-plate.far circle { fill: var(--sub); }
  .body-map { --body-base: var(--card2); --body-muscle: var(--line); }
  .ex-dot { background: var(--accent); opacity: 0.55; }
  .ex-dot.on { opacity: 1; }
}

.ex-stage { position: relative; display: block; flex: none; width: 100%; padding: 8px 12px 4px; border: 0; border-radius: 14px; background: var(--card2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* short phones: cap the figure so muscles + cues stay in reach; the SVG letterboxes inside */
.ex-stage .ex-fig { max-height: min(38vh, 300px); margin: 0 auto; }
.ex-play { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-height: 44px; padding: 0 18px 0 14px; border-radius: 99px; display: flex; align-items: center; gap: 8px; background: var(--accent); background-image: linear-gradient(180deg, var(--accent-hi), var(--accent-lo)); color: var(--on-accent); font-weight: 800; font-size: 0.9375rem; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.4); }
.ex-play svg { fill: currentColor; }
.ex-stage.paused .ex-fig { opacity: 0.9; }
.ex-pausehint { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; background: color-mix(in srgb, var(--card) 70%, transparent); opacity: 0.75; }
.ex-pausehint i { display: block; width: 3px; height: 10px; border-radius: 1px; background: var(--sub); }
.ex-thumb { display: block; width: 100%; border-radius: 10px; background: var(--card2); padding: 2px 4px 0; overflow: hidden; }
.ex-thumb .ex-fig { pointer-events: none; }

/* ---------- exercise sheet ---------- */
.ex-sheet:focus { outline: none; }
/* height cap + scrolling come from the shared .sheet rule (visual-viewport aware); the header stays pinned */
.ex-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; gap: 14px; padding-top: 0; }
.ex-head { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 2; margin: 0 -18px; padding: 18px 18px 8px; background: var(--card); }
.ex-actions { padding-bottom: 2px; }
html.ex-lock, html.ex-lock body { overflow: hidden; }
.ex-note { background: var(--card2); border-radius: 12px; padding: 10px 12px; }
.ex-note p { margin: 2px 0 0; font-size: 0.9375rem; color: var(--ink); }
.ex-head h2 { line-height: 1.1; }
.ex-close { margin-right: -8px; }
.ex-muscles { display: flex; align-items: center; gap: 14px; }
.ex-mrow { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.ex-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--accent) 62%, var(--card2)); }
.ex-dot.on { background: var(--accent); }
.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-tag { padding: 5px 11px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); font-size: 0.875rem; font-weight: 600; }
.ex-cues { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); font-size: 0.9375rem; }
.ex-name { position: relative; display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Exercise names are text links: the tap area reaches 44 px tall without changing the line. */
.ex-name::after { content: ''; position: absolute; inset: -11px -6px; }

/* ---------- muscle progress ---------- */
.mus-card { gap: 12px; }
.mus-strong { font-size: 1.0625rem; line-height: 1.25; }
.mus-strong .muted { font-weight: 600; }
.mus-figure { display: flex; justify-content: center; padding: 4px 0; }
.mus-detail { text-align: center; font-size: 0.875rem; color: var(--ink); background: var(--card2); border-radius: 10px; padding: 8px 10px; min-height: 36px; }
.mus-list { display: flex; flex-direction: column; }
.mus-row { display: grid; grid-template-columns: 92px 40px 1fr 44px; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: 10px; background: none; text-align: left; }
.mus-row + .mus-row { border-top: 1px solid var(--line); border-radius: 0; }
.mus-row.on { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 10px; }
.mus-row.on + .mus-row { border-top-color: transparent; }
.mus-name { font-weight: 600; font-size: 0.9375rem; }
.mus-lv { font-size: 0.8125rem; font-weight: 800; color: var(--sub); }
.mus-bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.mus-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.mus-gain { font-size: 0.8125rem; font-weight: 700; text-align: right; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.mus-gain.muted { color: var(--sub); font-weight: 500; }

/* ---------- train: daily muscle maps ---------- */
.tr-day { gap: 8px; }
.tr-dayhead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; min-height: 44px; }
.tr-dayhead .small { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.tr-mini { margin: -6px 0; }
.tr-day.skipped .tr-mini { opacity: 0.45; }
.tr-muscles { display: flex; align-items: center; gap: 14px; }
.tr-main { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.tr-today { padding: 12px 14px; }
.tr-exlist { display: flex; flex-direction: column; }
.tr-exrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--line); }
.tr-exrow .ex-name { font-size: 0.9375rem; font-weight: 600; }
.tr-exrow .small { flex: none; text-align: right; }
.tr-altinfo { display: block; padding: 0; border: 0; background: none; text-align: left; min-height: 44px; }
.altrow { gap: 10px; }

/* ---------- demo affordances (recovery steps, sleep wind-down, fitness test) ---------- */
.ex-demo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: -8px 0; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent; }
.ex-demo-pill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent-ink); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.ex-demo-pill svg { fill: currentColor; flex: none; }
.ex-demo:active .ex-demo-pill { transform: scale(0.96); }
.ex-steps { gap: 4px; padding-left: 22px; }
.ex-steps li { padding: 2px 0; }
.ex-steps li::marker { color: var(--sub); font-weight: 700; }
.ex-step-text { color: var(--ink); }
.ex-step-demos { display: inline-flex; flex-wrap: wrap; gap: 0 6px; margin-left: 8px; vertical-align: middle; }
.ex-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ex-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 44px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.ex-tile .ex-thumb { margin-bottom: 4px; }
.ex-tile-name { font-weight: 700; font-size: 0.875rem; line-height: 1.2; }
.ex-tile-dose { font-size: 0.8125rem; color: var(--sub); }
.ex-tile-play { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); }
.ex-tile-play svg { fill: currentColor; margin-left: 1px; }
.ex-tile:active { transform: scale(0.98); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .ex-demo-pill { background: var(--card2); border-color: var(--line); }
  .ex-pausehint { background: var(--card); }
}

/* ---------- recovery screen: move thumbnails on each routine ---------- */
.rec-moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: -2px; }
.rec-move, .rec-more { position: relative; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.rec-move .ex-thumb { height: 48px; display: flex; align-items: flex-end; padding: 2px 2px 0; }
.rec-move::after { content: ''; position: absolute; right: 4px; top: 4px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--accent-ink); opacity: 0.9; }
.rec-more { background: var(--card2); color: var(--sub); font-weight: 700; font-size: 0.875rem; }
/* fitness test: demo link under the field */
.tst-demo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.tst-demo-row .small { margin: 0; }

/* Social feed (rollout 10): Squad → Feed, posts, cards, photos, comments, composer */
.sq-seg { margin-top: -4px; }
.fd-hub { gap: 12px; }
.fd-compose-cta { cursor: pointer; }
.fd-compose-cta .sub { margin: 0; }
.fd-compose-cta:active { transform: scale(0.99); }

.fd-post { gap: 10px; }
.fd-post > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fd-head { min-width: 0; }
.fd-head .lr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-head .small { margin: 0; }
.fd-more { flex: none; width: 44px; height: 44px; margin: -10px -12px -10px 0; border: 0; border-radius: 12px; background: none; color: var(--sub); display: inline-flex; align-items: center; justify-content: center; }
.fd-more:active { background: var(--card2); }
.fd-text { margin: 0; font-size: 1rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.fd-detail .fd-text { cursor: auto; }

.fd-photos { display: grid; gap: 4px; border-radius: var(--r-md); overflow: hidden; }
.fd-photos.n1 { grid-template-columns: 1fr; }
.fd-photos.n2, .fd-photos.n4 { grid-template-columns: 1fr 1fr; }
.fd-photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fd-photos.n3 .fd-photo:first-child { grid-row: span 2; }
.fd-photo { position: relative; background: var(--card2); min-height: 120px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.fd-photos.n1 .fd-photo { aspect-ratio: auto; max-height: 420px; }
.fd-photos.n3 .fd-photo:first-child { aspect-ratio: auto; }
.fd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-photos.n1 .fd-photo img { object-fit: contain; max-height: 420px; }
.fd-photo .small { color: var(--sub); }
.fd-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; background-clip: content-box; padding: 7px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

.fd-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--line); }
.fd-card-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.fd-card .small { margin: 2px 0 0; }
.fd-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; }
.fd-top li { display: flex; gap: 8px; }
.fd-top .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.fd-route { flex: none; width: 84px; height: 84px; border-radius: 12px; background: var(--card); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.fd-runstats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.875rem; color: var(--sub); margin: 4px 0; }
.fd-runstats strong { color: var(--ink); font-size: 1.0625rem; }

.fd-actions { margin: -2px 0 -6px -8px; }
.fd-act { min-width: 64px; height: 44px; border: 0; background: none; color: var(--sub); display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 12px; font-weight: 700; font-size: 0.9375rem; }
.fd-act:active { background: var(--card2); }
.fd-act.on { color: var(--bad-ink); }
.fd-act.on svg path { fill: currentColor; }
.fd-act.on svg { animation: fd-pop 260ms ease-out; }
@keyframes fd-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fd-act.on svg { animation: none; } }

.fd-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--card2); }
.fd-panel .small { margin: 0; }
.fd-menu { flex-direction: row; flex-wrap: wrap; }
.fd-guidelines .h3 { margin-bottom: 4px; }

.fd-comment { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fd-comment:last-child { border-bottom: 0; }
.fd-comment .iconbtn { color: var(--sub); }
.fd-ctext { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fc-avatar.sm { width: 32px; height: 32px; font-size: 0.75rem; }
.fd-reply { display: flex; gap: 8px; align-items: flex-end; }
.fd-reply > :first-child { flex: 1; min-width: 0; }
.fd-reply .btn { flex: none; min-height: 50px; }

.fd-compose .seg { margin-bottom: 4px; }
.fd-attached { display: flex; flex-direction: column; gap: 8px; }
.fd-attached .btn { align-self: flex-start; }
.fd-pick { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); padding: 12px 2px; font-size: 0.9375rem; min-height: 44px; }
.fd-pick:last-child { border-bottom: 0; }
.fd-pick:active { background: var(--card2); }
.fd-share .sub { margin: 0; }
.fd-blocked { padding: 8px 0; }

/* App flow (rollout 12): workout-in-progress bar, offline strip, verify strip, notification prompt, morning check-in,
   tab headers with the Settings gear, Apple Health status line and a few small additions. */

/* ---------- tab headers: title + actions (gear) on one row ---------- */
.tab-head { align-items: center; gap: 8px; }
.tab-head .display { min-width: 0; }
.tr-head { gap: 8px; }

/* ---------- "Workout in progress · Resume" above the tab bar ---------- */
.wbar {
  flex: none; position: relative; z-index: 26; display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 16px; border: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--ink); font: inherit; font-size: 0.875rem; text-align: left;
}
.wbar:active { background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.wbar > svg { color: var(--accent-ink); flex: none; }
.wbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbar-rest { color: var(--accent-ink); font-weight: 700; }
.wbar-go { flex: none; font-weight: 700; color: var(--accent-ink); }

/* ---------- offline / sync problem strip (top of the app) ---------- */
.sync-strip {
  flex: none; z-index: 21; padding: 6px 16px; text-align: center;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--warn) 18%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
}

/* ---------- one-line "Confirm your email" strip ---------- */
.vf-strip {
  display: flex; align-items: center; gap: 2px; border-radius: 14px; padding-right: 2px;
  background: color-mix(in srgb, var(--accent) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.vf-strip-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px 6px 12px;
  border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.875rem; text-align: left; border-radius: 12px;
}
.vf-strip-main > svg { color: var(--accent-ink); flex: none; }
.vf-strip-go { flex: none; font-weight: 700; color: var(--accent-ink); }
.vf-strip-x { flex: none; color: var(--sub); }

/* ---------- first-run notification prompt ---------- */
.np { padding-top: 12px; }
.np-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent-ink);
}
.np-picks { display: flex; flex-direction: column; gap: 4px; }
.np-pick { min-height: 52px; }

/* ---------- morning check-in (Readiness) ---------- */
.ci-card { scroll-margin-top: 12px; }
.ci-done { gap: 6px; }

/* ---------- onboarding: who's signed in, weight unit ---------- */
.ob-who { margin-top: 4px; overflow-wrap: anywhere; }
.ob-unit { max-width: 360px; }
.ob-event .chip { align-self: flex-start; }

/* ---------- Program: your dates ---------- */
.pg-events { gap: 4px; }
.pg-event { min-height: 44px; }
.pg-event .grow { min-width: 0; overflow-wrap: anywhere; }
.pg-mine .row { min-height: 40px; }

/* ---------- Apple Health one-line status (Sleep tab, Run tab) ---------- */
.hs-line {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; font-size: 0.875rem; text-align: left;
}
.hs-line > svg { color: var(--bad); flex: none; }
.hs-line .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hs-toggle { padding-top: 4px; }
.sl-manage { align-self: flex-start; text-align: left; }

/* ---------- misc ---------- */
.home-event, .rr-card { cursor: pointer; }
.home-injury .sub { margin: 0; }
.wg-trend { display: flex; flex-direction: column; gap: 6px; }
.act-run { gap: 10px; }
.sq-unshared { margin: 0; }
.fd-opts { gap: 8px; }
.fd-opts .toggle { min-height: 44px; }
[data-section] { scroll-margin-top: 12px; }
html.kb-open .wbar { display: none; }
/* Fuel: the four ways to log food, named like the screens they open, on one line each at 375 px */
.fuel-log .btn { padding-left: 8px; padding-right: 8px; gap: 6px; font-size: 0.9063rem; white-space: nowrap; }
.fuel-log .btn svg { width: 18px; height: 18px; }

/* =========================================================================
   Fuel (rollout 13): folded sections, one-tap water, log again, database badges, barcode scanning
   ========================================================================= */

/* ---------- folded (non-core) sections: src/app/fuelsections.ts ---------- */
.fuel-fold { border-radius: var(--r-lg, 18px); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.fuel-fold-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 16px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; }
.fuel-fold-head:active { background: var(--card2); }
.fuel-fold-head svg { flex: none; color: var(--sub); }
.fuel-fold-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fuel-fold-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.fuel-fold-body > .card { box-shadow: none; }
.fuel-fold.open .fuel-fold-head { border-bottom: 1px solid var(--line); margin-bottom: 12px; }

.mini-fold-btn { display: inline-flex; align-items: center; gap: 4px; padding-left: 0; }
.mini-fold-btn svg { flex: none; }

/* ---------- calories follow your weight (§1.8) ---------- */
.fuel-check { display: flex; flex-direction: column; gap: 4px; }
.fuel-change { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 600; line-height: 1.4; color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.fuel-change svg { flex: none; margin-top: 2px; color: var(--accent-ink); }
.fuel-next { margin: 0; }

/* ---------- log a meal + log again ---------- */
.fuel-logcard { gap: 12px; }
.fuel-logcard .fuel-log { gap: 8px; }
.recent-meals { display: flex; flex-direction: column; gap: 6px; }
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid var(--line); }
.recent-row:first-child { border-top: 0; }
.recent-text { min-width: 0; }
.recent-text .lr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-log { flex: none; min-width: 56px; }
.recent-star { color: var(--faint, var(--sub)); }
.recent-star.on { color: var(--accent-ink); }
.recent-star.on svg { fill: var(--accent); stroke: var(--accent-ink); }

/* ---------- water ---------- */
.fuel-water-head { flex-wrap: wrap; }
.water-quick { flex: none; min-width: 72px; }

/* ---------- AI result: where the numbers came from ---------- */
.src-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.03em; vertical-align: 1px; white-space: nowrap; }
.src-usda { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-ink); }
.src-ai { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn-ink); }
.food-src-note { margin: 0; }

/* ---------- barcode scanning ---------- */
.barcode-box { gap: 10px; }
.scan-view { position: relative; display: flex; flex-direction: column; gap: 8px; }
.scan-video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: #000; }
.scan-frame { position: absolute; left: 12%; right: 12%; top: 30%; height: 24%; border: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.25); pointer-events: none; }
.product-form .card { margin: 0; }
.fuel-logcard .fuel-log .btn svg { flex: none; }

/* ---------- rollout 15: "Describe it instead" on the photo screen, correct an estimate in a sentence ---------- */
.food-alt { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.food-alt p { margin: 0; }
.food-fix { padding-top: 4px; }

/* Friend codes (Squad + Settings) */
.fc-card { gap: 14px; }
.fc-codebox { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-center { align-items: center; text-align: center; gap: 6px; }
.fc-code { font-weight: 800; font-size: 2.5rem; line-height: 1.1; letter-spacing: 0.04em; color: var(--ink); background: none; border: 0; padding: 2px 6px; margin: 0; border-radius: 10px; min-height: 44px; white-space: nowrap; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.fc-code:active { background: var(--card2); }
.fc-code-sm { font-size: 1.625rem; padding: 0; text-align: left; letter-spacing: 0.03em; }
.fc-code-wait { color: var(--sub); font-size: 0.875rem; min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; text-align: left; }
button.fc-code-wait { color: var(--accent-ink); font-weight: 700; }
.fc-btnlabel { display: inline-flex; align-items: center; gap: 6px; }
.fc-iconbtn { flex: none; width: 60px; min-height: 56px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 0.75rem; font-weight: 700; padding: 0; }
.fc-iconbtn svg { width: 18px; height: 18px; }
.fc-iconbtn:active { transform: scale(0.96); }
.fc-iconbtn:disabled { opacity: 0.5; }
.fc-compact .label { white-space: nowrap; }
.fc-cancel { flex: none; }
.btn .fc-btnlabel, .fc-add .btn > span { white-space: nowrap; }
.fc-divider { height: 1px; background: var(--line); margin: 2px 0; }

.fc-add { display: flex; flex-direction: column; gap: 10px; }
.fc-add > .btn-ghost { align-self: center; }
.fc-inputrow { display: flex; gap: 8px; align-items: stretch; }
.fc-inputrow .btn { min-height: 50px; flex: none; padding: 0 18px; }
.fc-input { flex: 1; min-width: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.fc-input::placeholder { color: var(--sub); opacity: 0.55; font-weight: 600; }
.fc-msg { font-size: 0.875rem; font-weight: 600; color: var(--sub); margin: 0; }
.fc-msg.fc-bad { color: var(--bad-ink); }

.fc-found { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 10%, var(--card2)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.fc-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 18%, var(--card2)); }

.fc-friend { gap: 8px; }
.fc-friend .iconbtn { color: var(--sub); margin: -8px -10px -8px 0; }
.fc-friend-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.fc-friend-main .lr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fc-friend > .small { margin: 0; }
.fc-incoming { gap: 12px; }
.fc-empty { gap: 6px; }
.fc-empty .small { margin: 0; }
.fc-friend-main .pill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================================
   Fuel (stream C): bulking card, AI error card
   ========================================================================= */

/* ---------- bulking ---------- */
.bulk-card { gap: 10px; }
.bulk-surplus { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bulk-surplus-num { font-size: 2.125rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--accent-ink); }
.bulk-target { display: flex; flex-direction: column; gap: 6px; }
.bulk-meter { position: relative; height: 12px; border-radius: 99px; background: var(--track); margin-top: 2px; }
.bulk-band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--good) 45%, transparent); }
.bulk-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid var(--card); background: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.bulk-dot.on_track { background: var(--good); }
.bulk-dot.slow, .bulk-dot.fast { background: var(--warn); }
.bulk-dot.losing { background: var(--bad); }
.bulk-scale { display: flex; justify-content: space-between; color: var(--sub); }
.bulk-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bulk-style { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--ink); padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); border: 1.5px solid transparent; min-height: 44px; }
.bulk-style.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.bulk-style-name { font-weight: 800; font-size: 0.9375rem; }
.bulk-style-kcal { font-weight: 700; font-size: 0.8125rem; color: var(--accent-ink); }

/* ---------- AI error ---------- */
.ai-err { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--warn) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.ai-err-head { align-items: flex-start; }
.ai-err-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-ink); }
.ai-err-msg { font-weight: 600; font-size: 0.9375rem; line-height: 1.4; color: var(--ink); margin: 4px 0 0; }

/* =========================================================================
   Goals & onboarding (stream 2): goal picker, setup steps, setup reminder, mm:ss field
   ========================================================================= */

/* ---------- goal picker ---------- */
.goal-picker { display: flex; flex-direction: column; gap: 10px; }
.goal-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 28px; }
.goal-sum-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9375rem; }
.goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 104px; padding: 12px 12px 12px 14px; text-align: left; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  box-shadow: var(--shadow, none);
  transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.goal-card:active { transform: scale(0.98); }
.goal-card.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--card));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.goal-card.dim { opacity: 0.6; }
.goal-card.wide { min-height: 64px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.goal-card.wide { padding-right: 48px; }
.goal-card.wide .goal-top { width: auto; margin-bottom: 0; }
.goal-card.wide .goal-rank { position: absolute; right: 12px; top: 50%; margin-top: -13px; }
.goal-card.wide .goal-hint { flex-basis: 100%; padding-left: 32px; margin-top: -2px; }
.goal-card.goal-other:not(.on) { border-style: dashed; background: transparent; }
.goal-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 4px; min-height: 26px; }
.goal-ico { color: var(--accent-ink); flex: none; }
.goal-card.on .goal-ico { color: var(--ink); }
.goal-title { font-weight: 700; font-size: 0.9375rem; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.goal-hint { color: var(--sub); font-size: 0.8125rem; line-height: 1.3; }
.goal-rank {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 0.875rem; font-variant-numeric: tabular-nums;
  animation: goal-pop 0.18s ease-out;
}
.goal-rank.sm { width: 22px; height: 22px; font-size: 0.75rem; animation: none; }
@keyframes goal-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.goal-other-box {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-md, 14px);
}
.goal-other-box input { background: var(--card); }
.goal-other-box .chip { background: var(--card); }
.goal-other-box .chip.on { background: var(--ink); color: var(--bg); }
.goal-sugg { max-height: none; }
.goal-note { margin-top: -6px; }

/* ---------- onboarding ---------- */
.ob-progress { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.ob-progress-row { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.ob-progress-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-progress-title { color: var(--ink); font-weight: 700; }
.ob-back { margin-left: -10px; color: var(--accent-ink); }
.ob-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.ob-seg > span { height: 5px; border-radius: 99px; background: var(--track); transition: background-color 0.25s ease; }
.ob-seg > span.done { background: color-mix(in srgb, var(--accent) 55%, var(--track)); }
.ob-seg > span.cur { background: var(--accent); }
/* Skip is available on every step but deliberately quieter than Next. */
.ob-skip {
  flex: none; min-height: 44px; min-width: 56px; padding: 0 12px; margin-right: -8px; border: 0; border-radius: 999px; background: transparent;
  color: var(--sub); font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
}
.ob-skip:active { background: var(--card2); color: var(--ink); }
.ob-kicker { display: flex; align-items: center; gap: 6px; min-height: 32px; margin-bottom: 4px; color: var(--good-ink); font-size: 0.875rem; font-weight: 700; }
.ob-intro { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.ob-facts { list-style: none; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md, 14px); }
.ob-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; line-height: 1.35; }
.ob-facts svg { flex: none; color: var(--accent-ink); margin-top: 1px; }
.ob-defaults { align-self: flex-start; padding-inline: 0; text-align: left; font-size: 0.9375rem; }
.ob-title { gap: 6px; }
.ob-h2 { font-weight: 750; font-size: 1.3125rem; line-height: 1.2; letter-spacing: -0.015em; margin-top: 8px; }
.ob-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-pair > div:not(.stepper) { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ob-pair > .stepper { min-width: 0; }
.ob-pair .stepper { gap: 4px; }
.ob-pair .stepper .num { min-width: 0; flex: 1; font-size: 1.0625rem; white-space: nowrap; }
.ob-pair .stepper { display: flex; }
.ob-blocker { display: flex; align-items: flex-start; gap: 6px; color: var(--warn-ink); font-weight: 600; font-size: 0.875rem; line-height: 1.35; margin: 0; }
.ob-blocker svg { flex: none; margin-top: 1px; }
.ob-inline-err { color: var(--warn-ink); font-weight: 600; font-size: 0.875rem; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: color-mix(in srgb, var(--warn) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); }
.ob-more { border: 1px solid var(--line); border-radius: var(--r-md, 14px); background: var(--card); }
.ob-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px;
  list-style: none; cursor: pointer; font-weight: 600; font-size: 0.9375rem; border-radius: var(--r-md, 14px);
}
.ob-more > summary:active { background: var(--card2); }
.ob-more > summary::-webkit-details-marker { display: none; }
.ob-more-chev { color: var(--sub); transition: transform 0.15s ease; flex: none; }
.ob-more[open] > summary .ob-more-chev { transform: rotate(90deg); }
.ob-more > .stack { padding: 2px 14px 14px; }

/* ---------- finish setup ---------- */
.setup-flow { padding-bottom: 8px; }
.setup-actions { display: flex; gap: 10px; margin-top: 6px; }
.setup-flow .ob-progress { margin-top: -4px; }
.setup-done { padding-top: 24px; }

/* ---------- "Missed: …" reminder on Home ---------- */
.setup-rem {
  display: flex; align-items: stretch; gap: 4px; padding: 4px 4px 4px 0;
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--r-md, 14px);
}
.setup-rem-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px 6px 12px;
  border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; border-radius: 12px;
}
.setup-rem-main:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.setup-rem-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--on-accent);
}
.setup-rem-text { display: flex; flex-direction: column; min-width: 0; }
.setup-rem-t { font-weight: 700; font-size: 0.9375rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.setup-rem-s { display: inline-flex; align-items: center; gap: 2px; color: var(--accent-ink); font-weight: 700; font-size: 0.8125rem; }
.setup-rem-later {
  flex: none; min-width: 60px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--sub); font-weight: 600; font-size: 0.875rem;
}
.setup-rem-later:active { background: var(--card2); }

/* ---------- mm:ss duration field ---------- */
.dur-row { display: flex; align-items: center; gap: 6px; }
.dur-box { position: relative; display: block; width: 96px; }
.dur-box input {
  width: 100%; min-height: 54px; padding: 8px 40px 8px 12px; text-align: right;
  font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.dur-box input::placeholder { color: color-mix(in srgb, var(--sub) 55%, transparent); font-weight: 600; }
.dur-unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--sub); font-size: 0.8125rem; font-weight: 600; pointer-events: none; }
.dur-colon { font-size: 1.625rem; font-weight: 800; color: var(--sub); line-height: 1; padding-bottom: 2px; }
.dur-bad input[aria-invalid='true'] { border-color: var(--bad); }
.ob-fast .btn { font-size: 0.9375rem; padding: 0 12px; }

/* ---------- Rollout 13 · launch, billing, retention: Help & support, cancel sheet, invite friends, first-week
   preview on the paywall, "Set your starting maxes" on Today ---------- */

/* Settings › Help & support (screens/support.tsx) */
.sup-card { display: flex; flex-direction: column; gap: 12px; }
.sup-addr { display: inline-block; margin: 2px 0 4px; font-weight: 700; color: var(--accent-ink); overflow-wrap: anywhere; }
.sup-mail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.sup-faq { padding-top: 4px; padding-bottom: 4px; }
.sup-q { padding: 12px 0; }
.sup-q + .sup-q { border-top: 1px solid var(--line); }
.sup-q summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 28px; }
.sup-q summary::-webkit-details-marker { display: none; }
.sup-q summary::after { content: '+'; margin-left: auto; color: var(--sub); font-weight: 600; font-size: 1.125rem; }
.sup-q[open] summary::after { content: '–'; }
.sup-q p { margin: 6px 0 4px; }

/* Paywall: "Your first week" (screens/paywall.tsx → FirstWeek; rows from src/app/firstweek.ts) */
.pw-week { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px 12px; }
.pw-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pw-week-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--sub); }
.pw-week-list { list-style: none; margin: 0; padding: 0; }
.pw-day { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; }
.pw-day + .pw-day { border-top: 1px solid var(--line); }
.pw-day-d { flex: none; width: 52px; font-weight: 700; font-size: 0.8125rem; color: var(--sub); padding-top: 1px; }
.pw-day.today .pw-day-d { color: var(--accent-ink); }
.pw-day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-day-t { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-day.rest .pw-day-t { color: var(--sub); font-weight: 600; }
.pw-day-test { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--card2)); color: var(--accent-ink); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.pw-day-x { font-size: 0.8125rem; color: var(--sub); overflow-wrap: anywhere; }
.pw-day-min { flex: none; font-size: 0.8125rem; color: var(--sub); font-variant-numeric: tabular-nums; padding-top: 1px; }
.pw-week-foot { margin: 6px 0 0; }

/* Today: "Set your starting maxes" (screens/startmaxes.tsx) */
.sm-card { display: flex; flex-direction: column; gap: 10px; }
.sm-card p { margin: 0; }
.sm-actions { flex-wrap: wrap; }

/* Cancel flow (screens/cancelflow.tsx) and Settings › Subscription */
.subs-cancel { align-self: center; color: var(--sub); }
.cf-sheet { gap: 12px; }
.cf-head { display: flex; align-items: center; gap: 8px; }
.cf-reasons { display: flex; flex-direction: column; gap: 6px; }
.cf-reason { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); text-align: left; font: inherit; }
.cf-reason.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.cf-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--on-accent); }
.cf-reason.on .cf-dot { background: var(--accent); border-color: var(--accent); }
.cf-notewrap { display: flex; flex-direction: column; gap: 4px; }
.cf-note { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--card2); color: var(--ink); resize: vertical; }
.cf-offer { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-lg); background: var(--card2); }
.cf-offer p { margin: 0; }
.cf-cancel { background: transparent; border: 1px solid var(--line); }

/* Admin › Subscriptions › Why people cancel (screens/adminretention.tsx) */
.adm-reasons { display: flex; flex-direction: column; gap: 8px; }
.adm-reason-counts, .adm-reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.adm-reason-counts li { display: flex; gap: 8px; }
.adm-reason-list li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }

/* Settings › Invite friends (screens/referral.tsx) */
.ref-card { display: flex; flex-direction: column; gap: 10px; }
.ref-card p { margin: 0; }
.ref-link { display: block; padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); color: var(--ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }
.ref-count { color: var(--sub); }

/* Rollout 14 — health data stays on the device: Settings → Your data "What's stored where" card, the sign-out
   choice and the one-time note (src/app/screens/healthdata.tsx). */
.hd-card .hd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; }
.hd-card .hd-cols > div { min-width: 0; }
.hd-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.45; }
.hd-list li { margin: 2px 0; overflow-wrap: anywhere; }
.hd-move { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.hd-move .row { margin-top: 8px; }
.hd-move label.btn { cursor: pointer; }
.hd-move label.btn.is-disabled { opacity: 0.55; pointer-events: none; }
.so-remove { margin: 8px 0 14px; align-items: flex-start; }
.so-remove .switch { margin-top: 4px; flex: none; }
.hd-note h2 { margin: 0; }
.hd-note .sub { margin: 10px 0 16px; }
@media (max-width: 380px) {
  .hd-card .hd-cols { grid-template-columns: 1fr; }
}

/* =========================================================================
   Apple Health sources (Garmin / Oura / Apple Watch via Health) + Today's steps line
   ========================================================================= */
.hs-list { display: flex; flex-direction: column; }
.hs-row { padding: 8px 0; gap: 10px; min-height: 0; }

.hs-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--card2); color: var(--sub); }
.hs-help .steps { margin: 4px 0 0; font-size: 0.875rem; }
.hs-help .btn { align-self: flex-start; margin-top: 10px; }

/* Today → Today's training: steps / active calories + workouts from Apple Health */
.hs-today { display: flex; flex-direction: column; gap: 6px; }
.hs-today-row { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.hs-today-row strong { color: var(--ink); font-weight: 700; }
.hs-today-row .hs-ico { width: 24px; height: 24px; }
.rvo2 { margin-top: 10px; }
.rvo2 strong { color: var(--ink); }

/* home stream styles — Home (Today), Customize sheet, Appearance settings, brand */

/* ---------- brand ---------- */
.mark svg { display: block; }

/* ---------- sign in ---------- */
.auth { gap: 18px; }
.auth-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 0 calc(-1 * var(--gutter)); padding: 22px var(--gutter) 6px; overflow: hidden; isolation: isolate; }
.auth-hero::before { content: ''; position: absolute; z-index: -1; inset: -40% -30% 10% 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.auth-arc { position: absolute; z-index: -1; right: -58px; top: -26px; width: 230px; height: 230px; color: var(--ink); opacity: 0.9; pointer-events: none; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-wordmark { font-weight: 800; font-size: 1.35rem; letter-spacing: 0.01em; line-height: 1; color: var(--ink); }
.auth-title { font-family: var(--display); font-stretch: var(--display-stretch); font-weight: 850; font-size: 2.75rem; line-height: 0.98; letter-spacing: -0.035em; margin-top: 18px; max-width: 9ch; text-wrap: balance; }
.auth-lede { color: var(--sub); font-size: 1.0625rem; line-height: 1.45; max-width: 32ch; }
.auth-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.auth-point-ico { flex: none; width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
.auth-card { gap: 16px; padding: 20px 18px; border-radius: var(--r-xl); box-shadow: var(--shadow-2), inset 0 1px 0 var(--hl); }
@media (max-height: 740px) {
  /* Short phones: keep the form in view. */
  .auth-hero { gap: 10px; padding-top: 12px; }
  .auth-title { font-size: 2.25rem; margin-top: 8px; }
  .auth-points { display: none; }
  .auth-arc { width: 180px; height: 180px; right: -50px; top: -30px; }
}
@media (min-width: 760px) {
  .auth-hero { padding-top: 40px; overflow: visible; }
  .auth-title { font-size: 3.25rem; }
}

/* ---------- home frame ---------- */
.home { gap: 14px; }
.home-hello { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; padding-bottom: 2px; }
.home-hello-top { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.home-hello .display { font-size: 1.875rem; overflow-wrap: anywhere; }
.home-hello .iconbtn { background: var(--card); border: 1px solid var(--line); width: 44px; height: 44px; border-radius: 13px; box-shadow: var(--shadow); }
.home-hello .iconbtn:active { background: var(--card2); }
.home-hello .iconbtn svg { width: 20px; height: 20px; }
.home-slot { display: flex; flex-direction: column; }
.home-slot > .section { margin-top: 4px; }
.home-foot { display: flex; justify-content: center; padding-top: 4px; }
.home-alert-icon { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bad); color: #fff; flex: none; }
.home-tile-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-ink); }
.home-tile-icon.info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); }
.home-countdown { display: inline-flex; align-items: baseline; gap: 4px; }
.home-countdown .num { font-weight: 800; font-size: 1.625rem; letter-spacing: -0.03em; color: var(--accent-ink); }
.home-readiness .h2 { font-size: 1.25rem; }

/* ---------- level strip ---------- */
.home-level { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.home-level-badge { width: 52px; height: 52px; border-radius: 16px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 100%, #fff 12%), color-mix(in srgb, var(--accent) 80%, #000 12%)); color: var(--on-accent); font-family: var(--display); font-weight: 800; font-size: 1.375rem; line-height: 1; letter-spacing: -0.03em; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.home-level-lv { font-family: var(--body); font-stretch: 100%; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.12em; opacity: 0.8; margin-bottom: 2px; }
.home-level-mid { display: flex; flex-direction: column; gap: 7px; }
.home-level-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.home-level-row strong { font-size: 1rem; letter-spacing: -0.01em; }
.home-streak { display: inline-flex; align-items: center; gap: 4px; min-width: 52px; height: 36px; justify-content: center; padding: 0 10px; border-radius: 99px; background: var(--card2); border: 1px solid var(--line); color: var(--sub); font-weight: 800; font-size: 0.9375rem; flex: none; }
.home-streak.on { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--card)); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }

/* ---------- muscle hero ---------- */
.home-body { gap: 14px; overflow: hidden; position: relative; background:
  radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--card); }
.home-body-head { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-bottom: -8px; }
.home-body-title { font-size: 1.25rem; }
.home-chip-stat { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 99px; font-size: 0.8125rem; font-weight: 800; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); white-space: nowrap; flex: none; }
.home-chip-unit { font-weight: 600; opacity: 0.85; }
.home-body-figure { position: relative; display: flex; justify-content: center; align-items: center; min-height: 200px; border-radius: 16px; background: color-mix(in srgb, var(--card2) 70%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: 12px 8px; }
.home-bodymap { max-width: 100%; }
.home-bodymap svg { max-width: 100%; height: auto; }
.home-body-empty { position: absolute; inset: auto 12px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 12px; border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); }
.home-body-empty strong { font-size: 1rem; letter-spacing: -0.01em; }
.home-body-empty .btn { margin-top: 4px; }
.home-xp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-xp { display: flex; flex-direction: column; gap: 6px; min-height: 64px; padding: 10px 11px; border-radius: 14px; border: 1px solid var(--line); background: var(--card2); text-align: left; min-width: 0; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease; }
.home-xp:active { transform: scale(0.98); }
.home-xp.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); box-shadow: 0 0 0 1px var(--accent); }
.home-xp.zero .home-xp-name, .home-xp.zero .home-xp-lvl { color: var(--sub); }
.home-xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.home-xp-name { font-weight: 700; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-xp-lvl { font-size: 0.75rem; font-weight: 800; color: var(--accent-ink); flex: none; font-variant-numeric: tabular-nums; }
.home-xp-bar { display: block; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.home-xp-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent)); transition: width 0.5s ease; }
.home-xp-gain { font-size: 0.75rem; color: var(--sub); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-xp-gain.up { color: var(--good); }
.home-more { align-self: center; margin-top: -4px; }

/* ---------- customize sheet ---------- */
.home-sheet { gap: 14px; }
.home-sheet-head { display: flex; align-items: flex-start; gap: 8px; }
.home-sheet-head .iconbtn { margin: -8px -8px 0 0; }
.home-edit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card2); }
.home-edit-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; min-height: 60px; border-bottom: 1px solid var(--line); background: var(--card); transition: opacity 0.15s ease; }
.home-edit-row:last-child { border-bottom: 0; }
.home-edit-row.off .home-edit-text, .home-edit-row.off .home-edit-icon { opacity: 0.45; }
.home-edit-icon { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.home-edit-text .lr-title { font-size: 0.9375rem; display: block; }
.home-edit-text .small { font-size: 0.8125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-edit-move { display: inline-flex; flex: none; }
.home-edit-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--sub); border-radius: 10px; }
.home-edit-btn:active { background: var(--card2); color: var(--ink); }
.home-edit-btn:disabled { opacity: 0.25; cursor: default; }
.home-edit-toggle { min-height: 44px; flex: none; gap: 0; }
.home-edit-toggle.locked .switch { opacity: 0.45; }

/* ---------- settings: appearance ---------- */
.appear-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.appear-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.appear-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; min-height: 44px; color: var(--sub); font-size: 0.8125rem; font-weight: 600; }
.appear-dot { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: box-shadow 0.15s ease, transform 0.12s ease; }
.appear-swatch:active .appear-dot { transform: scale(0.94); }
.appear-swatch.on { color: var(--ink); font-weight: 700; }
.appear-swatch.on .appear-dot { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--sw); }
.appear-preview { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); }
.appear-preview .bar { flex: 1; }
.set-group-title { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); margin-top: 20px; margin-bottom: -4px; padding-inline: 2px; }
.set-group-title:first-of-type { margin-top: 4px; }
.set-tabrow { display: flex; align-items: center; gap: 12px; }
.set-tabrow .home-tile-icon { width: 36px; height: 36px; border-radius: 11px; }
.auth-card .seg button { white-space: nowrap; font-size: 0.9375rem; min-width: 0; }
.home-body-figure.is-empty { flex-direction: column; gap: 12px; padding-bottom: 14px; }
.home-body-figure.is-empty .home-bodymap { opacity: 0.55; }
.home-body-figure.is-empty .home-body-empty { position: static; inset: auto; background: none; border: 0; padding: 0 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- settings: "More settings" disclosure ---------- */
.set-more { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin-top: 12px; padding: 12px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; box-shadow: var(--shadow); }
.set-more > svg:first-child { color: var(--accent-ink); flex: none; }
.set-more > svg:last-child { color: var(--sub); flex: none; }
.set-more:active { background: var(--card2); }
.set-more-body { gap: 4px; }
.set-diag { padding: 4px 4px 0; font-size: 0.75rem; overflow-wrap: anywhere; }

/* ---------- settings: notifications ---------- */
.push-status { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card2); }
.push-status > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.push-status > div:last-child { border-bottom: 0; }
.push-status dt { color: var(--sub); font-size: 0.875rem; }
.push-status dd { margin: 0; font-weight: 700; font-size: 0.875rem; text-align: right; }
.push-result { padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: 0.875rem; }
.push-result.ok { color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); }
.push-result.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--bad) 45%, var(--line)); }
.push-help-toggle { align-self: flex-start; }
.push-help { margin: -6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--sub); font-size: 0.875rem; }
.home-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-readiness { gap: 16px !important; }
.home-readiness .score { font-size: 1.75rem; }

/* Leaflet 1.9.4 map styles (node_modules/leaflet/dist/leaflet.css), trimmed for the Run tab maps:
   no layers control, no default marker icons, no VML — so nothing here loads an image. BSD-2-Clause, (c) Vladimir Agafonkin, (c) CloudMade. */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* Admin tools → Accounts (rollout 13): looked-up account and the moderation log. */
.adm-account { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); }
.adm-account strong { overflow-wrap: anywhere; }
.adm-modlog { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.adm-modlog li { overflow-wrap: anywhere; }

/* Multisport: swim / bike / brick badges, set logging, "Which sports?" picker */
.ms-ico { flex: none; display: block; }
.ms-dayline { flex-wrap: wrap; }
.ms-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 99px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; margin-right: 2px; background: color-mix(in srgb, var(--badge) 16%, transparent); color: var(--badge); }
.ms-badge-t { margin-left: 1px; }
.ms-swim { --badge: var(--info-ink); }
.ms-bike { --badge: var(--warn-ink); }
.ms-run { --badge: var(--good-ink); }
.ms-brick { --badge: var(--accent-ink); }

/* Day preview: brick parts */
.ms-exname { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ms-part { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.ms-part.block { display: block; margin-bottom: 6px; }

/* Set logging: target on top, inputs under it */
.ms-setrow { align-items: flex-start; padding: 10px 0; }
.ms-setrow .setno { padding-top: 2px; }
.ms-setrow .setcheck { margin-top: 4px; }
.ms-inputs { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.ms-in { display: inline-flex; align-items: center; gap: 6px; }
.ms-in input.mini { width: 76px; }
.ms-in input.mini.time { width: 84px; }
.ms-setrow.done .ms-in input { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }

/* "Which sports?" picker (GoalPicker) */
.ms-picker { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); }
.ms-picker .goal-note { margin-top: -6px; }
.ms-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ms-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--sub); font-size: 0.875rem; font-weight: 700; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.ms-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--ink); }
.ms-chip.on .ms-ico { color: var(--accent-ink); }
.ms-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Rollout 8: email code entry, mail buttons, admin tools (App health, Usage, Pro grants), the Pro placeholder. */

/* 6-digit code: six boxes over one real input (iOS one-time-code autofill + paste). */
.otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; cursor: text; }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 1rem; color: transparent; background: transparent; caret-color: transparent; z-index: 1; }
.otp-box { height: 52px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--card); display: flex; align-items: center; justify-content: center; font: 700 1.5rem/1 var(--display); font-stretch: var(--display-stretch); color: var(--ink); font-variant-numeric: tabular-nums; }
.otp-box.full { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.otp.focus .otp-box.cur { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.otp.off { opacity: 0.6; }
@media (max-width: 360px) { .otp { gap: 5px; } .otp-box { height: 46px; font-size: 1.3125rem; } }
.vf-code .btn { width: 100%; }
.vf-spam { margin: 0; }
.vf-mail { flex-wrap: wrap; }
.vf-mail-btn { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fb-verify .vf-code, .fb-verify .vf-mail { margin: 8px 0; }

/* Admin tools */
.ad-list { display: grid; gap: 10px; }
.ad-err { display: grid; gap: 4px; }
.ad-err-msg { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; color: var(--ink); }
.ad-meta { color: var(--sub); font-size: 0.8125rem; }
.ad-count { font: 800 1.25rem/1 var(--display); font-stretch: var(--display-stretch); color: var(--accent-ink); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.ad-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ad-kpi { background: var(--card2); border-radius: var(--r-sm); padding: 10px; text-align: center; }
.ad-kpi strong { display: block; font: 800 1.25rem/1.1 var(--display); font-stretch: var(--display-stretch); font-variant-numeric: tabular-nums; }
.ad-kpi span { font-size: 0.75rem; color: var(--sub); }
.ad-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ad-table th { text-align: left; font-weight: 600; color: var(--sub); font-size: 0.75rem; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.ad-table th.num, .ad-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-table td { padding: 8px 4px; border-bottom: 1px solid var(--grid); vertical-align: top; overflow-wrap: anywhere; }
.ad-table th button { all: unset; cursor: pointer; }
.ad-table th button[aria-pressed='true'] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ad-bar { height: 4px; border-radius: 2px; background: var(--accent); margin-top: 4px; opacity: 0.7; }

/* ---------- Paywall (src/app/screens/paywall.tsx) and Settings → Subscription (screens/subscription.tsx) ---------- */
.page-paywall { padding-bottom: calc(32px + var(--safe-b)); }
.pw { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin: 0 auto; width: 100%; }
.pw-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 12px 4px 4px; }
.pw-hero .display { font-size: 1.875rem; max-width: 17ch; }
.pw-nowrap { white-space: nowrap; }
.pw-hero .sub { max-width: 34ch; }
.pw-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, var(--card2)); color: var(--accent-ink); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.01em; }

.pw-features { list-style: none; margin: 0; padding: 6px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pw-features li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.pw-features li + li { border-top: 1px solid var(--line); }
.pw-features strong { font-size: 0.9375rem; line-height: 1.3; }
.pw-ficon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, var(--card2)); color: var(--accent-ink); }

.pw-plans { display: flex; flex-direction: column; gap: 10px; }
.pw-plan { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; min-height: 68px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); transition: border-color 0.15s ease, background-color 0.15s ease; }
.pw-plan.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pw-plan:active { transform: scale(0.995); }
.pw-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--on-accent); }
.pw-plan.on .pw-radio { background: var(--accent); border-color: var(--accent); }
.pw-plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-plan-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 800; font-size: 1rem; }
.pw-plan-sub { color: var(--sub); font-size: 0.8125rem; }
.pw-save { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pw-plan-price { flex: none; text-align: right; display: flex; align-items: baseline; gap: 1px; }
.pw-plan-price strong { font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.pw-plan-price span { color: var(--sub); font-size: 0.8125rem; }

.pw-terms { margin: 0; text-align: center; font-size: 0.875rem; line-height: 1.45; color: var(--ink); }
.pw-cta { min-height: 54px; font-size: 1.0625rem; }
.pw-msg { margin: -4px 0 0; text-align: center; }
.pw-bad { color: var(--bad); }
.pw-restore { align-self: center; }
.pw-legal { text-align: center; margin: 0; }
.pw-legal a { color: var(--accent-ink); font-weight: 600; }
.pw-account { display: flex; flex-direction: column; gap: 4px; }
.pw-account .linkbtn { align-self: flex-start; }
.pw-email { overflow-wrap: anywhere; }

.pw-finishing { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; max-width: 420px; margin: 0 auto; }
.pw-finishing .display { font-size: 1.625rem; }
.pw-spin { width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid var(--accent); border-right-color: transparent; animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pw-spin { animation-duration: 2.4s; } }

/* Settings → Subscription */
.subs-card { display: flex; flex-direction: column; gap: 10px; }
.subs-icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, var(--card2)); color: var(--accent-ink); }
.subs-line { padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); }
.subs-line p { margin: 2px 0 0; }
.subs-past_due { background: color-mix(in srgb, var(--bad) 12%, var(--card2)); }
.subs-past_due strong { color: var(--bad); }

/* Admin → Subscriptions */
.adm-subs .grid2 { align-items: end; }
.adm-sources { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adm-sources li { display: flex; gap: 8px; align-items: baseline; font-size: 0.875rem; }
.adm-comps { display: flex; flex-direction: column; gap: 2px; }
.adm-comps .lr-title { overflow-wrap: anywhere; }

/* Sign-up: Terms + Privacy line under "Create account" (screens/account.tsx) */
.auth-legal { text-align: center; margin: 2px 0 0; }
.auth-legal a { color: var(--accent-ink); font-weight: 600; }

/* training calendar: rest days, block / week header, busy week, supersets, test days (rollout 8) */

/* ---------- rest-day picker ---------- */
.rd-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rd-day { min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-weight: 800; font-size: 0.875rem; letter-spacing: -0.01em; }
.rd-day.on { background: color-mix(in srgb, var(--accent) 20%, var(--card2)); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent-ink); }
.rd-day:active { transform: scale(0.96); }

/* ---------- block / week header (Train tab) ---------- */
.blk { display: flex; flex-direction: column; gap: 8px; }
.blk-busy { min-height: 44px; }
.blk-rest { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font-size: 0.875rem; text-align: left; }
.blk-rest svg { color: var(--sub); flex: none; }
.tr-est { white-space: nowrap; }
.tr-phase { color: var(--sub); font-weight: 600; }

/* ---------- supersets ---------- */
.ss-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; margin-right: 6px; border-radius: 7px; background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info-ink); font-family: var(--body); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; vertical-align: 2px; }
.ss-note { color: var(--info-ink); font-weight: 600; line-height: 1.35; margin-top: 2px; }

/* ---------- test day ---------- */
.tst-card { display: flex; flex-direction: column; gap: 10px; }
.tst-row { padding-top: 8px; border-top: 1px solid var(--line); }
.tst-row:first-of-type { border-top: 0; padding-top: 0; }

/* ---------- Settings: your training week ---------- */
.set-week { display: flex; flex-direction: column; gap: 10px; }
.set-sug { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 9%, var(--card2)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); }

/* Rollout 13 (W3a): undo on the toast, your weekly schedule, build-your-own workouts, hybrid lean, short first week */

/* ---------- toast with a button (Undo) ---------- */
.toast.has-act { gap: 14px; }
.toast .toast-act { pointer-events: auto; flex: none; min-height: 36px; margin: -6px -8px -6px 0; padding: 6px 10px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); font: inherit; font-weight: 800; cursor: pointer; }
.toast .toast-act:active { background: color-mix(in srgb, var(--bg) 28%, transparent); }

/* ---------- your weekly schedule ---------- */
.wt-days { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.wt-day { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: inherit; font-size: 1rem; cursor: pointer; }
.wt-day:last-child { border-bottom: 0; }
.wt-day:active { background: var(--card2); }
.wt-day.rest .wt-what { color: var(--sub); }
.wt-dow { flex: none; width: 40px; font-weight: 800; color: var(--sub); }
.wt-what { font-weight: 600; min-width: 0; }
.wt-warn { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, var(--card)); }
.wt-warn p { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.wt-warn svg { flex: none; margin-top: 2px; color: var(--warn); }
.wt-sheet .label { margin-top: 6px; }
.wt-more summary { cursor: pointer; padding: 8px 0; }

/* ---------- build your own workouts ---------- */
.ow-day { gap: 8px; }
.ow-row { display: flex; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--line); padding-top: 6px; }
.ow-name { min-width: 0; }
.ow-name .small { color: var(--sub); }
.ow-btns { display: flex; flex: none; }
.ow-btns .iconbtn { width: 36px; height: 36px; }
.ow-role { display: block; color: var(--sub); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- hybrid lean ---------- */
.hl { padding-bottom: 4px; }

/* ---------- short first week (season started midweek) ---------- */
.ssn-short { margin: 0; color: var(--ink); }
.ssn-bar .ssn-w.short { background-image: linear-gradient(90deg, transparent 0 45%, color-mix(in srgb, var(--card) 55%, transparent) 45% 100%); }

/* =========================================================================
   Run tab: tab bar with 6 tabs, maps, charts, the live run screen, finish + detail pages
   ========================================================================= */
.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; }

/* Six tabs fit a 375 px phone: narrower icon pills, same 11 px labels. */
.tabbar.many button { min-width: 0; }
.tabbar.many button svg { padding: 4px 11px; }
@media (max-width: 360px) {
  .tabbar.many button svg { padding: 4px 7px; }
  .tabbar.many button { font-size: 0.75rem; letter-spacing: -0.01em; }
}

/* ---------- map (Leaflet + OpenStreetMap) ---------- */
.rmap { position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--card2); }
.rmap-el { position: absolute; inset: 0; background: var(--card2); font: 0.75rem/1.4 var(--body); }
.rmap .leaflet-container { background: var(--card2); }
.rmap path.rmap-line { stroke: var(--accent); }
.rmap path.rmap-casing { stroke: #0b0c0f; stroke-opacity: 0.35; }
.rmap path.rmap-start { stroke: #fff; fill: var(--good); fill-opacity: 1; }
.rmap path.rmap-end { stroke: #fff; fill: #0f1115; fill-opacity: 1; }
.rmap path.rmap-now { stroke: #fff; fill: var(--info); fill-opacity: 1; }
.rmap .leaflet-control-attribution { font-size: 0.6875rem; line-height: 1.3; padding: 1px 6px; background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--sub); border-top-left-radius: 8px; }
.rmap .leaflet-control-attribution a { color: var(--ink); }
.rmap .leaflet-bar { border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 10px; overflow: hidden; }
.rmap .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
.rmap .leaflet-bar a.leaflet-disabled { background: var(--card2); color: var(--sub); }
/* Dark theme: dim + invert the (light) street tiles so the map isn't a white slab at night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .rmap .rmap-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); }
  :root:not([data-theme='light']) .rmap path.rmap-casing { stroke: #000; stroke-opacity: 0.6; }
}
:root[data-theme='dark'] .rmap .rmap-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); }
:root[data-theme='dark'] .rmap path.rmap-casing { stroke: #000; stroke-opacity: 0.6; }
.rthumb { display: block; color: var(--accent-ink); }

/* ---------- Run tab ---------- */
.run .rplan { gap: 10px; }
.rplan-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-ink); }
.rplan-targets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.rstart { display: flex; flex-direction: column; gap: 8px; }
.rstart-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 76px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent-lo) 60%, transparent); background: var(--accent); background-image: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo)); color: var(--on-accent); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.015em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -10px var(--glow); transition: transform 0.12s ease; }
.rstart-btn:active { transform: scale(0.98); }
.rstart-btn.secondary { min-height: 60px; font-size: 1.125rem; background: var(--card); background-image: none; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.rstart .small { padding-inline: 8px; }

.rstats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rstat { min-width: 0; }
.rstat-v { font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rstat-v small { font-family: var(--body); font-stretch: 100%; font-size: 0.75rem; font-weight: 700; color: var(--sub); letter-spacing: 0; }
.rstat.big .rstat-v { font-size: 1.625rem; }
.rstat-l { font-size: 0.75rem; color: var(--sub); font-weight: 600; }
.rweek, .rchart { display: flex; flex-direction: column; gap: 4px; }
.rweek-read { min-height: 18px; }
.rweek-read strong { color: var(--ink); }
.rweek-bar, .rchart-pt { cursor: pointer; }

.rbests { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rbest { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; color: var(--ink); }
.rbest:disabled { opacity: 1; }
.rbest.tappable:active { background: var(--card2); }
.rbest-l { font-size: 0.75rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; }
.rbest-v { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.rbest:disabled .rbest-v { color: var(--sub); }

.rlist { padding-block: 4px; gap: 0; }
.rrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); min-height: 72px; }
.rrow:last-child { border-bottom: 0; }
.rrow:active { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.rrow-thumb { flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.rrow-main { display: flex; flex-direction: column; gap: 1px; }
.rrow-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.875rem; color: var(--sub); }
.rrow-nums strong { color: var(--ink); }

/* splits: pace bar longer = faster */
.rsplits { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.rsplits th { text-align: left; font-size: 0.75rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 6px 6px 0; }
.rsplits td { padding: 7px 6px 7px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.rsplits td:first-child, .rsplits th:first-child { width: 48px; }
.rsplits td:nth-child(2) { width: 60px; }
.rsplits .rsplits-barcol { width: 100%; }
.rsplit-bar { display: block; height: 10px; border-radius: 0 5px 5px 0; background: color-mix(in srgb, var(--accent) 55%, transparent); min-width: 6px; }
.rsplit-bar.best { background: var(--accent); }
.rsplits td:last-child { text-align: right; padding-right: 0; }

/* ---------- Settings / Train / Today entry points ---------- */
.tr-gps { gap: 10px; }
.tr-gpsbtn { align-self: flex-start; }
.home-runlog { align-self: center; min-height: 44px; padding-block: 4px; }

/* ---------- Live run layer ---------- */
html.run-live .shell-main, html.run-live .tabbar, html.run-live .topbar { visibility: hidden; }
.rl { position: fixed; inset: 0; bottom: calc(0px - var(--shim-b, 0px)); z-index: 45; display: flex; flex-direction: column; gap: 12px; background: var(--bg); padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 16px) calc(var(--safe-b) + 14px) calc(env(safe-area-inset-left, 0px) + 16px); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; animation: fade 0.2s ease; }
.rl > * { width: 100%; max-width: 560px; margin-inline: auto; flex: none; }
.rl-top { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.rl-gps { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.rl-gps rect { fill: var(--track); }
.rl-gps.q-good rect.on { fill: var(--good); }
.rl-gps.q-ok rect.on { fill: var(--accent); }
.rl-gps.q-poor rect.on { fill: var(--warn); }
.rl-gps.q-none { color: var(--bad); }
.rl-acc { color: var(--sub); font-weight: 600; }
.rl-flag { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; animation: rlblink 1.6s ease-in-out infinite; }
.rl-icon { width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.rl-icon.on { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rl-icon.off { color: var(--sub); }
.rl-icon:disabled { opacity: 0.4; }
.rl-note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.8438rem; line-height: 1.4; color: var(--ink); padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--info) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); }
.rl-note svg { flex: none; margin-top: 1px; color: var(--info); }
.rl-guide { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.rl-guide-step { font-size: 0.75rem; font-weight: 800; color: var(--sub); text-transform: uppercase; letter-spacing: 0.07em; }
.rl-guide-label { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.rl-guide-pace { font-size: 0.9375rem; font-weight: 700; color: var(--accent-ink); }
.rl-guide-left { text-align: right; }
.rl-guide-left .num { font-size: 1.875rem; font-weight: 800; line-height: 1; }

.rl-main-area { flex: 1 1 auto !important; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.rl-map { flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; }
.rl-map .rmap { flex: 1 1 auto; height: auto !important; min-height: 150px; }
.rl-hero { text-align: center; }
.rl-big { font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(56px, min(27vw, 13.5vh), 136px); line-height: 0.92; letter-spacing: -0.045em; }
.rl-big-l { font-size: 0.9375rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }
.rl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rl-metric { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; min-width: 0; }
.rl-metric-v { font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(24px, min(10vw, 5.4vh), 42px); line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
.rl-metric-v small { font-family: var(--body); font-stretch: 100%; font-size: 0.875rem; font-weight: 700; color: var(--sub); letter-spacing: 0; margin-left: 2px; }
.rl-metric-l { font-size: 0.75rem; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
.rl.with-map .rl-main-area { justify-content: flex-start; gap: 10px; }
.rl.with-map .rl-big { font-size: clamp(56px, 17vw, 80px); }
.rl.with-map .rl-metric { padding: 8px 12px; }
.rl.with-map .rl-metric-v { font-size: clamp(24px, 7.5vw, 32px); }
.rl.is-paused .rl-big, .rl.is-paused .rl-metric-v { color: var(--sub); }

.rl-controls { display: flex; gap: 12px; }
.rl-btn { position: relative; overflow: hidden; flex: 1; min-height: 84px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; touch-action: none; -webkit-touch-callout: none; }
.rl-btn > * { position: relative; }
.rl-btn:active { transform: scale(0.985); }
.rl-main { flex: 1.25; background: var(--accent); background-image: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo)); border-color: color-mix(in srgb, var(--accent-lo) 60%, transparent); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -10px var(--glow); }
.rl-sec.wide { flex: 1; }
.rl-finish-fill { position: absolute !important; inset: 0; background: color-mix(in srgb, var(--bad) 30%, transparent); transform: scaleX(0); transform-origin: left center; }
.rl-finish.holding .rl-finish-fill { transform: scaleX(1); transition: transform 0.9s linear; }
.rl-finish svg { color: var(--bad-ink); }

.rl-state { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding-inline: 8px; overflow-y: auto; }
.rl-state h2 { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; }
.rl-state-icon { position: relative; width: 84px; height: 84px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent-ink); }
.rl-state-icon.bad { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad-ink); }
.rl-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: rlpulse 1.6s ease-out infinite; }
.rl-steps { text-align: left; margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.9375rem; line-height: 1.45; max-width: 420px; }
@keyframes rlpulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes rlblink { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .rl-pulse, .rl-flag { animation: none; } }
@media (max-height: 700px) {
  .rl { gap: 8px; }
  .rl-note.ok { display: none; }
  .rl-guide { padding: 8px 12px; }
  .rl-guide-label { font-size: 1.125rem; }
  .rl-main-area { gap: 10px; }
  .rl-btn { min-height: 72px; }
  .rl-metric { padding: 9px 12px; }
}

/* finish screen: scrolls, buttons stay at the bottom */
.rl-finishscreen { gap: 0; padding-bottom: 0; user-select: text; -webkit-user-select: text; }
.rf-scroll { flex: 1 1 auto !important; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-width: none !important; margin: 0 -16px !important; width: auto !important; }
.rf-page { max-width: 560px; margin: 0 auto; padding: 4px 16px 20px; }
.rf-controls { padding: 12px 0 calc(var(--safe-b) + 14px); border-top: 1px solid var(--line); background: var(--bg); }
.rf-controls .btn { min-height: 56px; }
html.kb-open .rf-controls { display: none; }

/* ---------- run detail ---------- */
.rd-title { overflow-wrap: anywhere; margin-top: 2px; }
.rd-tags { margin-top: 8px; }
.rd-note { margin-top: 8px; white-space: pre-wrap; }
.rd-more { padding-top: 10px; border-top: 1px solid var(--line); }
.rd-privacy { padding: 4px 2px; }
.rd-efforts { padding-block: 6px; gap: 0; }
.rd-effort { min-height: 46px; border-bottom: 1px solid var(--line); }
.rd-effort:last-child { border-bottom: 0; }
.rd-foot { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rpriv-link { align-self: center; }
.rscale .scale-row { gap: 4px; }
.rscale .scale-row button { padding: 0; white-space: nowrap; font-size: 0.9375rem; }
.rd-hidden { flex-direction: row; align-items: center; gap: 12px; }
.rd-hidden svg { flex: none; }
.rstart-gps { display: flex; align-items: center; justify-content: center; gap: 10px; }
.rstart-err { gap: 6px; }
.rl-note.ok { background: color-mix(in srgb, var(--good) 10%, var(--card)); border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.rl-note.ok svg { color: var(--good); }
.rl-lost { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; font-weight: 600; line-height: 1.4; padding: 10px 12px; border-radius: 14px; color: var(--warn-ink); background: color-mix(in srgb, var(--warn) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); }
.rl-lost svg { flex: none; margin-top: 2px; }
.rl-guide.k-recover, .rl-guide.k-cooldown, .rl-guide.k-warmup { background: color-mix(in srgb, var(--info) 12%, var(--card)); border-color: color-mix(in srgb, var(--info) 40%, var(--line)); }
.rl-guide.k-done { background: color-mix(in srgb, var(--good) 12%, var(--card)); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.rl-guide-next { font-size: 0.8125rem; color: var(--sub); font-weight: 600; margin-top: 2px; }
.rl-ap { display: inline-flex; align-items: center; gap: 1px; font-weight: 800; font-size: 0.9375rem; }
.rl-state-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 360px; margin-top: 6px; }

/* Rollout 15 "safety": the AI consent sheet + Settings card (screens/aiconsent.tsx), the notice banner and the
   update-required screen (screens/notice.tsx), Admin › Ops (screens/adminmod.tsx). */
.aic-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; margin: 4px 0 2px; }
.aic-list dt { font-weight: 700; font-size: 0.875rem; margin-top: 8px; }
.aic-list dd { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--sub); overflow-wrap: anywhere; }
.aic-actions { gap: 8px; }
.aic-card { gap: 8px; }
/* Notice banner (screens/notice.tsx): below the offline strip, above the page; never wider than the screen. */
.notice-strip { flex: none; display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px 8px 16px; font-size: 0.875rem; line-height: 1.4; border-bottom: 1px solid var(--line); }
.notice-strip.info { background: color-mix(in srgb, var(--info) 12%, var(--bg)); color: var(--ink); }
.notice-strip.warn { background: color-mix(in srgb, var(--warn) 18%, var(--bg)); color: var(--ink); }
.notice-strip p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.notice-strip > svg { flex: none; margin-top: 2px; }
.notice-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -4px -6px 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.notice-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Update required (iPhone app below config/public.minBuild). */
.upd-gate { max-width: 460px; margin: 0 auto; padding-top: 12vh; text-align: center; }
.upd-hero { display: grid; justify-items: center; gap: 10px; }
/* Admin tools › Ops (screens/adminmod.tsx) */
.ops-card { gap: 10px; }
.ops-current { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md, 12px); background: var(--card2); }
.ops-current p { margin: 0; overflow-wrap: anywhere; }

/* Train tab revamp (rollout 11): season timeline, week strip, selected day, swap sheet, lift plan, Program screen */
:root {
  --ph-intro: color-mix(in srgb, var(--sub) 55%, var(--card2));
  --ph-base: color-mix(in srgb, var(--info) 70%, var(--card2));
  --ph-build: #e3a008; /* amber: the same in every accent, so Base (blue) and Build never look alike */
  --ph-peak: var(--warn);
  --ph-deload: color-mix(in srgb, var(--good) 75%, var(--card2));
  --ph-max: var(--bad);
}
.ph-intro { --ph: var(--ph-intro); }
.ph-base { --ph: var(--ph-base); }
.ph-build { --ph: var(--ph-build); }
.ph-peak { --ph: var(--ph-peak); }
.ph-deload { --ph: var(--ph-deload); }
.ph-max { --ph: var(--ph-max); }

.tr-head { align-items: center; }
.tr-head .btn { flex: none; }
.tr-weeknav { align-items: center; }

/* ---------- season card ---------- */
.ssn { display: flex; flex-direction: column; gap: 10px; }
.ssn-top { align-items: flex-start; }
.ssn-title { display: block; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ssn-target { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.ssn-bar { list-style: none; margin: 2px 0 0; padding: 0; display: flex; gap: 3px; height: 22px; }
.ssn-w { flex: 1; min-width: 0; border-radius: 6px; background: color-mix(in srgb, var(--ph) 34%, var(--card2)); display: flex; align-items: center; justify-content: center; color: var(--on-accent); position: relative; }
.ssn-w.done { background: color-mix(in srgb, var(--ph) 70%, var(--card2)); }
.ssn-w.cur { background: var(--ph); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); z-index: 1; }
.ssn-w.busy::after { content: ''; position: absolute; inset: 7px 30%; border-radius: 99px; background: color-mix(in srgb, var(--card) 70%, transparent); }
.ssn-w.ph-max { color: #fff; background: color-mix(in srgb, var(--ph) 55%, var(--card2)); }
.ssn-w.ph-max.cur { background: var(--ph); }
.ssn-runs { display: flex; gap: 3px; margin-top: -4px; }
.ssn-run { flex-basis: 0; min-width: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--ph) 80%, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ssn-why { line-height: 1.45; }
.ssn-rx { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 9%, var(--card2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); }
.ssn-rx .small { margin: 0; line-height: 1.35; }
.ssn-rx-big { flex: none; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---------- 7-day strip ---------- */
.wk-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.wk-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 84px; padding: 8px 2px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow); min-width: 0; }
.wk-day:active { transform: scale(0.97); }
.wk-dow { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); }
.wk-num { font-size: 1.125rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.wk-role { width: 100%; font-size: 0.75rem; font-weight: 700; line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent-ink); padding: 0 2px; }
.wk-day.rest .wk-role { color: var(--sub); font-weight: 600; }
.wk-day.test .wk-role { color: var(--bad); }
.wk-dot { height: 14px; display: inline-flex; align-items: center; color: var(--good); }
.wk-day.test .wk-dot { color: var(--bad); }
.wk-day.today { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wk-day.today .wk-dow { color: var(--accent-ink); }
.wk-day.sel { background: var(--ink); color: var(--card); border-color: var(--ink); }
.wk-day.sel .wk-dow, .wk-day.sel .wk-role, .wk-day.sel .wk-dot { color: var(--card); opacity: 0.92; }
.wk-day.st-skipped { background: var(--card2); box-shadow: none; }
.wk-day.st-skipped .wk-num, .wk-day.st-skipped .wk-role { color: var(--sub); }
.wk-day.st-skipped .wk-role { text-decoration: line-through; }

/* ---------- selected day ---------- */
.tr-sel .tr-dayhead { display: flex; align-items: flex-start; gap: 10px; }
.tr-mainline { margin-top: 4px; color: var(--ink); font-weight: 600; }
.tr-dayactions { margin-top: 4px; }
.tr-dayactions .btn:not(.btn-sm) { flex: 1 1 180px; }
.tr-more summary { cursor: pointer; padding: 10px 0; color: var(--sub); font-weight: 600; min-height: 44px; }
.tr-more[open] summary { margin-bottom: 6px; }

/* ---------- swap / pick sheets ---------- */
.swap-list { display: flex; flex-direction: column; }
.swap-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font-size: 1rem; }
.swap-row:last-child { border-bottom: 0; }
.swap-row:active { background: var(--card2); }
.swap-row svg { color: var(--sub); flex: none; }
.swap-row.on { font-weight: 700; }
.swap-row.on svg { color: var(--accent-ink); }
.swap-day { flex: none; min-width: 64px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- main lifts this season ---------- */
.lp { display: flex; flex-direction: column; gap: 14px; }
.lp-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lp-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.lp-head { align-items: baseline; }
.lp-head .small { margin: 0; white-space: nowrap; }
.lp-bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.lp-bar { flex: 1; min-width: 0; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--ph) 36%, var(--card2)); }
.lp-bar.done { background: color-mix(in srgb, var(--ph) 65%, var(--card2)); }
.lp-bar.cur { background: var(--ph); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--ink); }
.lp-row .small { margin: 0; }

/* ---------- More tools ---------- */
.tr-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.tr-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow); font-size: 0.8125rem; font-weight: 700; text-align: center; }
.tr-tool svg { color: var(--accent-ink); }
.tr-tool:active { background: var(--card2); }

/* ---------- Program screen ---------- */
.pg-card { display: flex; flex-direction: column; gap: 12px; }
.pg-row { align-items: center; min-height: 48px; }
.pg-toggle { min-height: 48px; }
.pg-target { align-items: center; padding: 8px 10px; border-radius: var(--r-md); background: color-mix(in srgb, var(--bad) 8%, var(--card2)); }
.pg-target svg { color: var(--bad); flex: none; }
.pg-targetin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 520px) { .pg-targetin { grid-template-columns: 200px minmax(0, 1fr); } }
.pg-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pg-opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card2); color: var(--ink); text-align: left; min-width: 0; }
.pg-opt .small { margin: 0; line-height: 1.3; }
.pg-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card2)); box-shadow: 0 0 0 1px var(--accent) inset; }
.pg-note { margin: -4px 0 4px; }
.pg-day { gap: 6px; }
.pg-slot { align-items: center; min-height: 44px; border-top: 1px solid var(--line); padding-top: 6px; }
.pg-role { flex: none; width: 84px; color: var(--sub); font-weight: 700; font-size: 0.8125rem; margin: 0; white-space: nowrap; }
.pg-ex { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .pg-opts.three { grid-template-columns: 1fr; }
  .wk-day { min-height: 78px; }
}

/* PR goals (rollout 11.1) */
.lp-goal { display: flex; align-items: baseline; gap: 10px; }
.lp-goal-big { flex: none; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lp-goal-big small { font-family: var(--body); font-stretch: 100%; margin-left: 2px; font-size: 0.8125rem; font-weight: 700; color: var(--sub); }
.lp-goal .small { margin: 0; line-height: 1.35; }
.lp-edit { align-self: flex-start; }
.pg-gain .stepper .num { min-width: 70px; }

/* Security: verify-email banner, delete-account card */
.sec-verify { gap: 12px; }
.sec-verify-head { align-items: flex-start; }
.sec-verify .small { margin: 2px 0 0; }
.sec-verify-icon, .sec-delete-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.sec-verify-icon { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 20%, var(--card2)); }
.sec-email { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.sec-verify .btn { min-height: 44px; }
.sec-msg { margin: 0; font-weight: 600; }
.sec-bad { color: var(--bad-ink); }

.sec-delete { gap: 12px; }
.sec-delete .small { margin: 2px 0 0; }
.sec-delete-icon { color: var(--bad-ink); background: color-mix(in srgb, var(--bad) 12%, var(--card2)); }
.sec-danger-ghost { color: var(--bad-ink); }
.sec-delete-form { display: flex; flex-direction: column; gap: 12px; }
.sec-cancel { flex: none; }

/* The website's pages inside the app (rollout 15, screens/site.tsx): /start, /account, the sign-in intro on them, and
   the iPhone app's link-out to liftready.app. */
.page-site { padding-bottom: calc(32px + var(--safe-b)); }
.site { max-width: 520px; margin: 0 auto; width: 100%; gap: 16px; }
.site-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 16px; }
.site-head .display { font-size: 1.75rem; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.site-word { font-family: var(--display); font-stretch: 112%; font-weight: 850; font-size: 1.125rem; letter-spacing: -0.01em; }
.site-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0 4px; }
.site-intro .display { font-size: 1.75rem; }
.site-plan-line { padding: 10px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); font-size: 0.9375rem; }
.site-plan-line a { color: var(--accent-ink); font-weight: 700; }
.site-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8125rem; color: var(--sub); }
.site-steps li { display: inline-flex; align-items: center; gap: 6px; }
.site-steps li.on { color: var(--ink); font-weight: 700; }
.site-steps li.done { color: var(--ink); }
.site-step-n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); font-size: 0.6875rem; font-weight: 800; }
.site-steps li.on .site-step-n, .site-steps li.done .site-step-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.site-who { text-align: center; }
.site-who .linkbtn { display: inline; min-height: 0; padding: 0; }
.site-wait { min-height: 50vh; }
.site-help p + p { margin-top: 8px; }
.site-linkout { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--r-xl); }
.pw-already { text-align: center; margin-bottom: -10px; }

/* =========================================================================
   Automatic sleep (stream C): status card + guided iPhone Shortcuts setup
   ========================================================================= */

/* ---------- status card ---------- */
.sl-card { gap: 10px; }
.sl-state-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--card2); color: var(--sub); }
.sl-state-ico.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good-ink); }
.sl-state-ico.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-ink); }
.sl-state-ico.waiting { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info-ink); }
.sl-line { font-weight: 700; font-size: 0.9375rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.sl-foot { border-top: 1px solid var(--line); padding-top: 4px; margin-bottom: -6px; }

/* ---------- link checks ---------- */
.sl-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--card2); }
.sl-check-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--track); color: var(--sub); }
.sl-check.ok .sl-check-ico { background: var(--good); color: var(--on-good); }
.sl-check.bad .sl-check-ico { background: var(--bad); color: var(--on-bad); }
.sl-check.ok > .small:last-child { color: var(--good-ink); font-weight: 700; }
.sl-check.bad > .small:last-child { color: var(--bad-ink); font-weight: 700; }

/* ---------- setup sheet ---------- */
.sl-sheet { gap: 14px; }
.sl-head { display: flex; flex-direction: column; gap: 8px; }
.sl-head .iconbtn { margin: -8px -8px -8px 0; }
.sl-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.sl-seg > span { height: 4px; border-radius: 99px; background: var(--track); transition: background-color 0.25s ease; }
.sl-seg > span.on { background: var(--accent); }
.sl-body { display: flex; flex-direction: column; gap: 14px; font-size: 1rem; line-height: 1.45; }
.sl-body > p { margin: 0; }
.sl-body b { font-weight: 800; color: var(--ink); }
.sl-body code { font-size: 0.8125rem; background: var(--card2); padding: 1px 5px; border-radius: 6px; }

.sl-flow { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0 4px; }
.sl-flow-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--card2); color: var(--ink); }
.sl-flow-ico.accent { background: var(--accent); color: var(--on-accent); }
.sl-flow-arrow { width: 28px; height: 2px; background: var(--line); position: relative; }
.sl-flow-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--line); border-right: 0; }

.sl-choice { display: flex; flex-direction: column; gap: 8px; }
.sl-choice button { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--ink); padding: 12px 14px; border-radius: var(--r-md); background: var(--card2); border: 1.5px solid transparent; min-height: 60px; }
.sl-choice button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

.sl-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sl-steps li { display: flex; gap: 10px; align-items: flex-start; }
.sl-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 0.8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.sl-see { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); border: 1px dashed var(--line); background: color-mix(in srgb, var(--info) 5%, transparent); }
.sl-see .label { color: var(--info-ink); }

/* Mock of the finished automation (Shortcuts look: rounded rows, blue token) */
.sl-mock { display: flex; flex-direction: column; gap: 1px; border-radius: 12px; overflow: hidden; background: var(--line); }
.sl-mock-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); font-size: 0.875rem; line-height: 1.3; }
.sl-mock-row strong { display: block; font-size: 0.875rem; }
.sl-mock-sub { display: block; font-size: 0.75rem; color: var(--sub); }
.sl-mock-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex: none; color: #fff; }
.sl-mock-moon { background: #5e5ce6; }
.sl-mock-web { background: #0a84ff; }
.sl-mock-action { min-width: 0; overflow-wrap: anywhere; }
.sl-mock-url { display: inline-block; white-space: nowrap; margin-top: 2px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, #0a84ff 16%, transparent); color: #0a84ff; font-weight: 600; font-size: 0.8125rem; }

/* Big copy button */
.sl-copy { display: flex; flex-direction: column; gap: 8px; }
.sl-copy-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px 16px; border-radius: var(--r-md); border: 0; font: inherit; font-size: 1.125rem; font-weight: 800; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); transition: transform 0.1s ease, background-color 0.2s ease; }
.sl-copy-btn:active { transform: scale(0.98); }
.sl-copy-btn.done { background: var(--good); color: var(--on-good); }
.sl-url { display: block; font-size: 0.75rem; line-height: 1.4; color: var(--sub); background: var(--card2); padding: 8px 10px; border-radius: var(--r-sm); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }

/* Live events while testing */
.sl-live { display: flex; flex-direction: column; gap: 6px; }
.sl-live-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--card2); font-size: 0.9375rem; }
.sl-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sub); flex: none; animation: sl-pulse 1.4s ease-in-out infinite; }
.sl-live-row.ok .sl-live-dot { background: var(--good); animation: none; }
.sl-live-row.ok .small { color: var(--good-ink); font-weight: 700; }
@keyframes sl-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .sl-live-dot { animation: none; } }

.sl-done-ico { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--good); color: var(--on-good); margin-top: 6px; }
.sl-extra { border-top: 1px solid var(--line); padding-top: 10px; }
.sl-extra summary { font-weight: 700; color: var(--accent-ink); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.sl-extra .sl-steps { font-size: 0.9375rem; margin-top: 4px; }

/* ---------- Apple Health (iPhone app) ---------- */
.hk-card .sl-state-ico.ok { background: color-mix(in srgb, #ff2d55 14%, transparent); color: #ff2d55; }
.hk-stages { font-variant-numeric: tabular-nums; margin-top: -4px; }
.hk-help .btn { align-self: flex-start; margin-top: 10px; }
.hk-help[open] summary { margin-bottom: 4px; }
.hk-app { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hk-app a { color: var(--accent-ink); font-weight: 700; }
/* Rollout 13: the private key button inside an automation step, and the renew notice. */
.sl-copy-key { min-height: 48px; margin-top: 8px; font-size: 1rem; width: 100%; }
.sl-renew { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--warn); }

/* Steps card (Today, rollout 11) */
.stp { display: flex; flex-direction: column; gap: 10px; }
.stp .ring { color: var(--accent-ink); }
.stp-now { font-size: 0.9375rem; }
.stp-now strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stp .small { margin: 2px 0 0; }
.stp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 64px; align-items: end; }
.stp-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.stp-bar { width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--accent) 35%, var(--card2)); }
.stp-bar[data-hit] { background: color-mix(in srgb, var(--good) 70%, var(--card2)); }
.stp-day.cur .stp-bar { background: var(--accent); }
.stp-day.cur .stp-bar[data-hit] { background: var(--good); }
.stp-dow { font-size: 0.75rem; font-weight: 700; color: var(--sub); line-height: 1; }
.stp-day.cur .stp-dow { color: var(--ink); }

/* Edit a logged meal (Fuel, rollout 11) */
.meal-row { gap: 4px; align-items: center; }
.meal-open { display: block; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; min-height: 44px; }
.meal-open .small { overflow: hidden; text-overflow: ellipsis; }
.meal-edited { color: var(--sub); font-weight: 600; font-size: 0.8125rem; }
.meal-item { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.meal-share { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.meal-share-btn { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 0.8125rem; font-weight: 700; }
.meal-share-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Rollout 14 · Terms of Service signature: the Create account form's signature, the "Review and sign the
   updated Terms" gate, Settings › Help & support › Terms you signed (screens/terms.tsx) ---------- */

/* Checkbox + typed name */
.tos-sign { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--line); }
.tos-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 0.875rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.tos-check input.sw { margin: 1px 0 0; }
.tos-check a { color: var(--accent-ink); font-weight: 700; }
.tos-check.bad input.sw { outline: 2px solid var(--bad); outline-offset: 2px; border-radius: 4px; }
.tos-sign > .field-err { margin-top: -8px; }
.tos-sign .field input { font-size: 1.0625rem; }

/* The gate */
.tos-gate { max-width: 560px; margin-inline: auto; width: 100%; padding-bottom: 24px; }
.tos-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; }
.tos-hero .display { font-size: 1.875rem; }
.tos-changes { display: flex; flex-direction: column; gap: 8px; }
.tos-changes ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9375rem; line-height: 1.45; }
.tos-changes a { color: var(--accent-ink); font-weight: 700; }
.tos-version { color: var(--sub); }
.tos-out { text-align: center; color: var(--sub); }

/* Terms you signed */
.tos-signed { display: flex; flex-direction: column; gap: 12px; }
.tos-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 0.9375rem; }
.tos-dl dt { color: var(--sub); font-weight: 600; }
.tos-dl dd { margin: 0; overflow-wrap: anywhere; }
.tos-sig { font-style: italic; font-weight: 700; }
.tos-signed-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.tos-signed-actions .btn { text-decoration: none; text-align: center; }

/* Train together: invite sheet, partner strip, badges, inbox cards */
.tg-block { display: flex; flex-direction: column; gap: 8px; }
.tg-block.compact { gap: 6px; }
.tg-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--ink); font-weight: 600; margin: 0; }
.tg-subs { margin: 0; color: var(--warn-ink); }
.tg-wait { margin: 0; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-actions:empty { display: none; }

.tg-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tg-strip::-webkit-scrollbar { display: none; }
.tg-person { flex: 0 0 auto; min-width: 104px; max-width: 150px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--line); }
.tg-person .bar, .tg-person > :last-child { grid-column: 1 / -1; }
.tg-person.done { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.tg-av { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 18%, var(--card)); }
.tg-person.done .tg-av { color: var(--good-ink); background: color-mix(in srgb, var(--good) 16%, var(--card)); }
.tg-pname { font-weight: 700; font-size: 0.8438rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tg-pnum { font-size: 0.7813rem; color: var(--sub); font-weight: 700; }

.tg-card { gap: 12px; }
.tg-inbox .card { margin: 0; }
.tg-row { margin-top: 2px; }
.tg-row { flex-wrap: nowrap; }
.tg-row .pill { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.tg-row .btn { flex: none; }
.tg-row .btn > span, .tg-actions .btn > span { white-space: nowrap; }
.tg-divider { height: 1px; background: var(--line); }

.tg-sheet .sheet-head .small { margin-top: 4px; }
.tg-pick { display: flex; flex-direction: column; gap: 6px; }
.tg-friend { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; font: inherit; }
.tg-friend.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.tg-friend:disabled { opacity: 0.7; }
.tg-friend-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tg-check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--on-accent); }
.tg-check.on { background: var(--accent); border-color: var(--accent); }

/* Ways in to the Train together screen: Squad card, workout link */
.tg-entry .small { display: block; }
.tg-more { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; min-height: 44px; }
.tg-block-empty { margin-top: -4px; }

/* training stream: suggested weights, labeled swap button, swap / add-exercise / custom-exercise sheets */

/* ---------- exercise card header ---------- */
.tr-exhead { align-items: center; }
.tr-swapbtn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; }
.tr-swapbtn:active { transform: scale(0.97); }
.tr-swapbtn svg { color: var(--accent-ink); }

/* ---------- suggested weight ---------- */
.tr-load { border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 9%, var(--card2)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); padding: 8px 6px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.tr-load.none { background: var(--card2); border-color: var(--line); }
.tr-load-top { display: flex; align-items: baseline; gap: 8px; padding-top: 2px; }
.tr-load-bot { display: flex; align-items: center; gap: 6px; }
.tr-load-bot .small { line-height: 1.35; }
.tr-load-ic { color: var(--accent-ink); flex: none; align-self: center; }
.tr-load-w { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tr-load-per { font-family: var(--body); font-stretch: 100%; font-size: 0.8125rem; font-weight: 600; color: var(--sub); letter-spacing: 0; }
.tr-load-hint { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.tr-why { flex: none; font-size: 0.8125rem; padding: 8px 6px; white-space: nowrap; }
.tr-load-lines { margin: 4px 0 2px; padding: 8px 6px 2px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--ink); }
.tr-load-lines li::marker { color: var(--sub); font-weight: 700; }
.tr-altdose { color: var(--accent-ink); font-weight: 600; }

/* ---------- swap sheet ---------- */
.tr-swap-head { display: flex; align-items: flex-start; gap: 8px; }
.tr-swap-head h2 { margin-bottom: 2px; }
.tr-swap-sheet .altrow { gap: 6px; padding: 8px 8px 8px 12px; }

/* ---------- custom exercise editor / add sheet ---------- */
.cx-head { display: flex; align-items: center; gap: 8px; }
.cx-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-kind { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 56px; border-radius: var(--r-md); padding: 8px 12px; }
.cx-kind-l { font-weight: 700; font-size: 0.9375rem; }
.cx-kind-s { font-size: 0.75rem; font-weight: 500; color: inherit; }
.cx-chips { gap: 6px; }
.cx-chips .chip { padding: 0 13px; font-size: 0.875rem; }
.cx-primary { text-transform: none; letter-spacing: 0; color: var(--accent-ink); font-weight: 700; }
.cx-err { color: var(--bad); }
.cx-demo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: var(--r-md); background: var(--card2); }
.cx-demo-fig { width: 104px; flex: none; border-radius: 10px; background: var(--card); overflow: hidden; }
.cx-dose { border-radius: var(--r-md); padding: 10px 12px; background: color-mix(in srgb, var(--accent) 9%, var(--card2)); border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line)); display: flex; flex-direction: column; gap: 4px; }
.cx-foot .btn { min-height: 48px; }
.cx-row { gap: 4px; padding: 8px 8px 8px 12px; }
.cx-edit { color: var(--sub); }
.ex-yours { color: var(--sub); }

/* ---------- specific weights: plan lines, set weight chips, warm-ups (loads stream) ---------- */
.tr-exrow { flex-wrap: wrap; }
.tr-exrow .tr-planw { flex: 0 1 auto; max-width: 64%; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tr-exrow .tr-warmline { flex: 1 1 100%; text-align: left; margin-top: -4px; }
.tr-plan { font-size: 0.875rem; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; line-height: 1.35; margin: 2px 0 1px; }
.tr-set { gap: 6px; }
.tr-settxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tr-setnote { font-weight: 600; }
.tr-diff { font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-diff.up { color: var(--good); }
.tr-diff.down { color: var(--warn); }
.tr-wchip { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; min-height: 44px; padding: 3px 8px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--card2)); color: var(--ink); line-height: 1.05; }
.tr-wchip:active { transform: scale(0.97); }
.tr-wchip.open { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.tr-set.changed .tr-wchip { border-color: var(--accent); }
.tr-wchip:disabled { opacity: 1; background: var(--card2); border-color: var(--line); }
.tr-wnum { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tr-wunit { font-size: 0.75rem; font-weight: 700; color: var(--sub); letter-spacing: 0.01em; }
input.mini.tr-reps { width: 50px; }
.tr-wedit { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 4px; margin: 0 0 4px 24px; border-radius: var(--r-md); background: var(--card2); border: 1px solid var(--line); }
.tr-wstep { display: flex; align-items: center; gap: 8px; }
.tr-step { flex: none; min-width: 56px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-step:active { transform: scale(0.96); }
.tr-win { display: inline-flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
.tr-win input.mini { width: 76px; font-size: 1.125rem; font-weight: 700; }
.tr-wacts { display: flex; flex-wrap: wrap; column-gap: 12px; }
.tr-wacts .linkbtn { font-size: 0.8438rem; text-align: left; }
.tr-maxlink { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-height: 44px; padding: 6px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--accent-ink); font-size: 0.8438rem; font-weight: 700; text-align: left; }
.tr-warm { display: flex; flex-direction: column; border-radius: var(--r-md); border: 1px dashed var(--line); padding: 6px 10px; }
.tr-warm-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 2px; }
.tr-warmrow { display: flex; align-items: center; gap: 8px; min-height: 48px; border-top: 1px solid var(--line); }
.tr-warm-w { flex: none; min-width: 84px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-warm-x { color: var(--sub); font-weight: 600; }
.tr-warmcheck { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: var(--card2); color: var(--sub); display: inline-flex; align-items: center; justify-content: center; }
.tr-warmrow.done .tr-warmcheck { background: color-mix(in srgb, var(--good) 75%, var(--card2)); border-color: transparent; color: var(--on-good); }
.tr-warmrow.done .tr-warm-w { color: var(--sub); }

/* ---------- My maxes ---------- */
.mx-head { align-items: flex-start; }
.mx-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.mx-now { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.mx-num { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mx-mode .chip { font-size: 0.875rem; padding: 0 14px; }
.mx-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-examples { display: flex; flex-direction: column; }
.mx-ex { min-height: 44px; border-top: 1px solid var(--line); }

/* ---------- per-set schemes: each set's own weight × reps, auto-regulation, effort ---------- */
.tr-setplan { font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.setrow.done .tr-setplan { color: var(--good); }
.tr-adjust { font-weight: 700; color: var(--accent-ink); }
.tr-scheme { margin-top: 1px; line-height: 1.35; }
.tr-scheme.straight { color: var(--sub); }
.tr-effort { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -2px 0 6px 24px; }
.tr-effbtn { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 0.8438rem; font-weight: 600; }
.tr-effbtn.on { background: color-mix(in srgb, var(--accent) 22%, var(--card2)); border-color: var(--accent); }

/* ---------- Rollout 13 · app UX (W4a): tabs, quick log, what's new, readiness links, progress, invites ---------- */

/* Settings › Tabs */
.toggle.is-off { opacity: 0.62; }
.toggle.is-off .switch { cursor: not-allowed; }
.set-starttab { margin-top: 2px; }
.page.no-tabs { padding-bottom: 28px; }

/* Today › Readiness: the card opens the breakdown; each missing input links to its own fix */
.readiness-card { gap: 12px; }
.rd-open { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: 14px; }
.rd-open:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.rd-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.rd-links > .small { margin-right: 2px; }
.rd-link { min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--card)); color: var(--accent-ink); font-size: var(--t-sm); font-weight: 700; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) ease; }
.rd-link:active { transform: scale(0.96); }
.rd-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Progress › Consistency calendar */
.cal-card { gap: 10px; }
.cal-head .iconbtn:disabled { opacity: 0.3; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-weight: 700; color: var(--sub); padding-bottom: 2px; }
.cal-pad { height: 44px; }
.cal-day { position: relative; height: 44px; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1.5px solid transparent; background: none; color: var(--ink); font-size: var(--t-sm); font-weight: 700; padding: 0; transition: transform var(--dur-1) var(--ease-out); }
.cal-day:active { transform: scale(0.92); }
.cal-day:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cal-day.m-none { color: var(--sub); font-weight: 500; }
.cal-day.m-rest, .cal-swatch.m-rest { background: var(--card2); color: var(--ink); font-weight: 600; }
.cal-day.m-trained, .cal-swatch.m-trained { background: var(--accent); color: var(--on-accent); }
.cal-day.m-partial, .cal-swatch.m-partial { background: linear-gradient(135deg, var(--accent) 0 50%, color-mix(in srgb, var(--accent) 22%, var(--card)) 50% 100%); color: var(--ink); }
.cal-day.m-planned, .cal-swatch.m-planned { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); color: var(--ink); }
.cal-day.m-skipped, .cal-swatch.m-skipped { border-style: dashed; border-color: var(--warn); color: var(--warn-ink); }
.cal-day.m-missed, .cal-swatch.m-missed { background: color-mix(in srgb, var(--bad) 12%, var(--card)); border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); color: var(--bad-ink); }
.cal-day.is-extra::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--on-accent); opacity: 0.7; }
.cal-day.is-today { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.cal-day.is-picked { transform: scale(1.06); }
.cal-picked { min-height: 1.4em; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.cal-key { display: inline-flex; align-items: center; gap: 5px; }
.cal-swatch { width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid transparent; display: inline-block; }
.cal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.cal-streak { display: inline-flex; align-items: center; gap: 4px; color: var(--warn-ink); }
.pg-level { flex-direction: row; }
/* the streak count in the level card as readable text (warn-ink, AA contrast on its tint) */
.home-streak.on { color: var(--warn-ink); }
/* the level badge's "LVL" at the 12 px minimum (it shows on Progress now, not only on an optional Today card) */
.home-level-lv { font-size: 0.75rem; letter-spacing: 0.06em; }

/* Progress › photos: side by side or a slider over the two photos */
.pc-card { gap: 12px; }
.pc-pick .field { display: flex; flex-direction: column; gap: 6px; }
.pc-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-side figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-side img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; display: block; background: var(--card2); }
.pc-slider { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--card2); touch-action: pan-y; }
.pc-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-slider .pc-after { clip-path: inset(0 0 0 var(--pos)); }
.pc-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; }
.pc-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.pc-tag { position: absolute; bottom: 10px; padding: 3px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.55); color: #fff; font-weight: 700; pointer-events: none; }
.pc-tag-l { left: 10px; }
.pc-tag-r { right: 10px; }
.pc-slider input[type='range'] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; border: 0; background: none; }
.pc-slider:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pc-thumbs figcaption { display: flex; align-items: center; gap: 2px; }
.pg-add .btn { min-height: 44px; padding: 0 14px; font-size: var(--t-sm); border-radius: var(--r-pill); }
.pg-add .btn svg { width: 16px; height: 16px; }

/* "+" quick log: the button in every tab header and its sheet */
.iconbtn.ql-plus { background: var(--accent); color: var(--on-accent); border-radius: 50%; width: 44px; height: 44px; box-shadow: 0 6px 16px -10px var(--glow); }
.iconbtn.ql-plus:active { background: var(--accent); filter: brightness(0.94); }
.iconbtn.ql-plus:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ql-sheet { gap: 14px; }
.ql-group { display: flex; flex-direction: column; gap: 8px; }
.ql-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.ql-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card2); color: var(--ink); text-align: left; transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-2) ease; }
.ql-tile:active { transform: scale(0.96); }
.ql-tile:focus-visible, .ql-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ql-tile strong { font-size: var(--t-sm); line-height: 1.25; }
.ql-tile-txt { display: flex; flex-direction: column; gap: 2px; }
.ql-ico { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--accent-ink); }
.ql-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 0; }
.ql-chip { min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-weight: 700; font-size: var(--t-md); transition: transform var(--dur-1) var(--ease-out); }
.ql-chip:active { transform: scale(0.95); }
.ql-recent { display: flex; flex-direction: column; gap: 6px; }
.ql-meal { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border-radius: var(--r-md); min-height: 48px; }
.ql-meal .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-naps { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: 6px; }
.ql-naps-label { display: inline-flex; align-items: center; gap: 6px; padding-right: 4px; }
.ql-naps .ql-chip { padding: 0 6px; }

/* Invite links: the sheet, the note on the sign-in screen, the Squad walkthrough */
.inv-note { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--card)); font-size: var(--t-sm); line-height: 1.45; }
.inv-sheet { gap: 12px; }
.inv-sheet h2 { margin: 0; }
.inv-avatar { width: 44px; height: 44px; font-size: 1rem; }
.inv-walk { gap: 10px; }
.inv-steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 14px; }
.inv-steps li { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 6px; counter-increment: step; }
.inv-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: var(--t-sm); }
.inv-link { font-family: var(--mono); font-size: 0.7813rem; overflow-wrap: anywhere; color: var(--sub); }

/* What's new sheet */
.wn-sheet { gap: 14px; }
.wn-sheet h2 { margin: 2px 0 0; }
.wn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wn-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-md); line-height: 1.45; }
.wn-ico { flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent-ink); }
.wn-fixed { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.wn-post { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card2); color: var(--ink); text-align: left; font-size: var(--t-sm); }
.wn-post .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Beta board · admin "Mark fixed in this release" */
.fb-bulk { gap: 8px; }
.fb-pickable { cursor: pointer; }
.fb-picked { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.fb-pickbox { width: 24px; height: 24px; }
.fb-pickbox.on { background: var(--good); border-color: var(--good); color: var(--on-good); }

/* Settings › Account › Change email */
.ce-open { margin-top: 2px; font-size: var(--t-sm); }
.ce-pending { margin-top: 4px; }
.ce-current { overflow-wrap: anywhere; }
.ce-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* vitamins stream styles: Vitamins checklist + add/edit sheet (.vit-*), wellness bits (.well-*) */
.vit-card { gap: 0; padding-top: 12px; padding-bottom: 6px; }
.vit-progress { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vit-item { border-bottom: 1px solid var(--line); }
.vit-item:last-child, .vit-item:has(+ .vit-detail:last-child) { border-bottom: 0; }
.vit-row { display: flex; align-items: center; gap: 4px; }
.vit-check { flex: 1; min-width: 0; min-height: 56px; padding: 8px 0; }
.vit-text { min-width: 0; }
.vit-text .lr-title { overflow-wrap: anywhere; }
.vit-tag { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 99px; font-size: 0.75rem; line-height: 19px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; vertical-align: 1px; text-decoration: none; background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info-ink); }
.vit-item.done .vit-tag { background: var(--card2); color: var(--sub); }
.vit-note { font-style: italic; opacity: 0.85; }
.vit-more svg { transition: transform 0.15s ease; transform: rotate(90deg); color: var(--sub); }
.vit-more.open svg { transform: rotate(-90deg); }
.vit-move { display: flex; }
.vit-move .iconbtn:disabled { opacity: 0.25; }
.vit-down svg { transform: rotate(180deg); }
.vit-detail { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 10px 40px; border-bottom: 1px solid var(--line); }
.vit-detail:last-child { border-bottom: 0; }
.vit-remove { color: var(--bad-ink); align-self: flex-start; min-height: 44px; }
.vit-hidden { display: flex; flex-direction: column; gap: 8px; }
.vit-hidden > .linkbtn { align-self: flex-start; min-height: 44px; }
.vit-hidden-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.vit-hidden-row + .vit-hidden-row { border-top: 1px solid var(--line); padding-top: 12px; }
.vit-hidden-row .btn { min-height: 44px; flex: none; }
.vit-safety { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--sub); font-size: 0.875rem; }
.vit-links { display: flex; flex-direction: column; }
.vit-links .listrow { color: var(--ink); text-decoration: none; min-height: 56px; }

/* Add/edit sheet */
.vit-sheet { gap: 14px; }
.vit-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -10px; }
.vit-sheet-head h2 { font-size: 1.5rem; line-height: 1.1; }
.vit-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.vit-preset { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.vit-preset-have, .vit-preset:disabled { opacity: 0.6; cursor: default; }
.vit-preset-have svg { color: var(--good-ink); }
.vit-sheet .chips .chip { min-height: 44px; }
.vit-sheet-actions { display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 1; background: var(--card); margin: 0 -18px; padding: 10px 18px calc(16px + var(--safe-b, env(safe-area-inset-bottom, 0px))); border-top: 1px solid var(--line); }
html.kb-open .vit-sheet { padding-bottom: 0; }
html.kb-open .vit-sheet-actions { padding-bottom: 12px; }
.vit-sheet { padding-bottom: 0; }
.vit-sheet-actions .grow { flex: 1; }
.vit-del { color: var(--bad-ink); }

/* Wellness */
.well-res a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.well-res a:active { opacity: 0.7; }

/* =========================================================================
   Body-weight goal (gain / maintain / lose): picker, Fuel card, calorie math
   ========================================================================= */
.wg-picker { display: flex; flex-direction: column; gap: 10px; }
.wg-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; }
.wg-eq { font-weight: 800; font-size: 1rem; line-height: 1; }
.wg-paces.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-paces .bulk-style { min-width: 0; }
.wg-paces.n3 .bulk-style { padding: 10px 8px; }
.wg-paces.n3 .bulk-style-name { font-size: clamp(13px, 3.4vw, 15px); letter-spacing: -0.01em; }
.wg-paces .small { overflow-wrap: anywhere; }
.wg-step { display: flex; flex-direction: column; gap: 8px; }
.wg-math { color: var(--sub); font-weight: 600; margin: 0; }
.wg-label { font-weight: 700; color: var(--sub); }
.bulk-surplus-num.wg-neg { color: var(--info-ink); }
.wg-reached { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--good) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); }
.wg-reached p { margin: 0; }
.wg-toggle { align-self: flex-start; }
.wg-anchor { scroll-margin-top: 12px; }
.fuel-math { display: block; text-align: left; font-size: 0.8125rem; font-weight: 700; padding: 4px 0; min-height: 44px; }
@media (max-width: 360px) {
  .wg-paces.n3 { grid-template-columns: 1fr; }
}

/* workout screen (rollout 13): effort tags, plate math, last time, exercise history, why it changed, workout tools */

/* ---------- Train header: "SEASON 1 · STRENGTH" got split over two lines next to the "Max-out in 9 wk" pill at 375 px.
   The label gets its own row; the pill sits next to the big title ("Base 1") instead, at every width. ---------- */
.ssn-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'label label' 'title pill'; align-items: center; column-gap: 10px; row-gap: 2px; }
.ssn-top > .grow { display: contents; }
.ssn-top > .grow > .label { grid-area: label; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssn-top > .grow > .ssn-title { grid-area: title; min-width: 0; }
.ssn-top > .pill { grid-area: pill; justify-self: end; }

/* ---------- effort: every done set shows its answer and can change it ---------- */
.tr-efftag { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 2px 0 0; padding: 2px 10px; border-radius: 999px; border: 1px dashed var(--line-2, var(--line)); background: none; color: var(--sub); font-size: 0.7813rem; font-weight: 700; position: relative; }
.tr-efftag.set { border-style: solid; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--card2)); color: var(--ink); }
.tr-efftag svg { opacity: 0.7; }
.tr-efftxt { font-weight: 600; color: var(--sub); }
.tr-set.done .tr-settxt { cursor: pointer; }

/* ---------- plate math (inside the weight editor) ---------- */
.tr-plates { display: flex; align-items: center; gap: 10px; padding: 2px 0 4px; }
.tr-plates-bar { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-left: 2px; }
.tr-plates-sleeve { width: 18px; height: 6px; border-radius: 2px; background: var(--sub); opacity: 0.5; }
.tr-plate { display: inline-flex; align-items: center; justify-content: center; width: 22px; border-radius: 3px; color: #fff; font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0; line-height: 1; }
.tr-plate.p45 { height: 44px; background: #2f5fb3; }
.tr-plate.p35 { height: 36px; background: #c9a227; color: #1b1b1b; }
.tr-plate.p25 { height: 32px; background: #2f8f4e; }
.tr-plate.p10 { height: 26px; background: #4a4a4a; }
.tr-plate.p5 { height: 24px; background: #8a2d2d; }
.tr-plate.p2_5 { height: 26px; width: 18px; background: #777; }

/* ---------- "Last time" line under each exercise ---------- */
.tr-last { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 4px; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 10px; background: var(--card2); color: var(--ink); font-size: 0.8125rem; font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; }
.tr-last-k { color: var(--accent-ink); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; }
.tr-last-d { color: var(--sub); font-weight: 500; }

/* ---------- exercise history sheet ---------- */
.exh-sheet .ex-head { display: flex; align-items: flex-start; gap: 8px; }
.exh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.exh-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); min-width: 0; }
.exh-stat strong { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.exh-chart { margin: 0 -4px; }
.exh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.exh-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.exh-row-top { display: flex; align-items: baseline; gap: 8px; }
.exh-row-top .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exh-sets { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---------- why did my workout change? ---------- */
.wt-change { display: flex; flex-direction: column; gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.wt-change.kept { border-color: var(--line); }
.wt-change-top { display: flex; align-items: flex-start; gap: 10px; }
.wt-change-top p { line-height: 1.45; }
.wt-change-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, var(--card2)); color: var(--accent-ink); }
.wt-change-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.wt-change-acts:empty { display: none; }

/* ---------- workout tools ---------- */
.wt-tools { display: flex; flex-direction: column; gap: 4px; }
.wt-tools-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wt-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 6px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; text-align: center; }
.wt-tool svg { color: var(--accent-ink); }
.wt-tool.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.wt-tool:active { transform: scale(0.97); }
.wt-status { line-height: 1.45; }
.wt-undo { min-height: 44px; padding: 2px 4px; }
.wt-preview { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card2); }
.wt-preview ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.wt-safety { color: var(--warn-ink, var(--sub)); font-weight: 600; }
.wt-foot { flex-direction: column; }

/* ---------- fitness test: where a max comes from ---------- */
.tst-src { margin-top: -4px; }

/* Training zones: zone colours, the zone chip on session cards (tap for "why"), and the Training zones tables */
:root {
  --z1: #7b8798;
  --z2: #15803d;
  --z3: #a16207;
  --z4: #c2410c;
  --z5: #d92d3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --z1: #8f9aab;
    --z2: #3dd68c;
    --z3: #facc15;
    --z4: #fb923c;
    --z5: #ff6369;
  }
}
:root[data-theme='dark'] {
  --z1: #8f9aab;
  --z2: #3dd68c;
  --z3: #facc15;
  --z4: #fb923c;
  --z5: #ff6369;
}

.zn-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--z2); }
.zn-dot.z1 { background: var(--z1); }
.zn-dot.z2 { background: var(--z2); }
.zn-dot.z3 { background: var(--z3); }
.zn-dot.z4 { background: var(--z4); }
.zn-dot.z5 { background: var(--z5); }

/* Chip on a session card */
.zn-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.zn { min-width: 0; }
.zn-chip { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card2); color: var(--ink); font-size: 0.8438rem; font-weight: 700; text-align: left; line-height: 1.3; }
.zn-chip:active { opacity: 0.75; }
.zn-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zn-lbl { flex: none; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); }
.zn-line { flex: 1 1 auto; min-width: 0; }
.zn-bit { white-space: nowrap; }
.zn-why-btn { flex: none; margin-left: auto; font-size: 0.8125rem; font-weight: 700; color: var(--accent-ink); }
.zn-why { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.zn-why p { margin: 0; font-size: 0.8438rem; line-height: 1.45; }
.zn-why .small { font-size: 0.8125rem; }
.zn-link { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; min-height: 44px; padding: 4px 0; }
.tr-day > .zn-list { margin-top: 6px; }

/* Live run: inside the guide banner */
.zn-live { margin-top: 6px; }
.zn-live .zn-chip { min-height: 44px; padding: 5px 9px; background: var(--card); font-size: 0.8125rem; }
.zn-live .zn-why { background: var(--card); }

/* Training zones screen */
.zones .zn-seg { margin: 4px 0 2px; }
.zones .zn-seg button { font-size: 0.875rem; }
.zn-table { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.zn-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.zn-row:first-child { border-top: 0; }
.zn-row .zn-dot { margin-top: 5px; }
.zn-row p { margin: 2px 0 0; }
.zn-row-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: space-between; }
.zn-val { font-weight: 800; font-size: 0.9375rem; white-space: nowrap; }
.zn-tag { font-size: 0.75rem; font-weight: 800; color: var(--sub); letter-spacing: 0.04em; margin-left: 2px; }
.zn-builds { color: var(--ink); opacity: 0.85; }
.zn-basis { margin: 4px 0 0; }
.zn-2col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.zn-types { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.zn-types dt { font-weight: 800; font-size: 0.9375rem; }
.zn-types dd { margin: 2px 0 0; }