/* =========================================================================
   Health Lab — base styles
   Reset · accessibility (focus-visible + reduced-motion) · base components ·
   responsive app shell (mobile <=430px, desktop >=1024px).
   Component anatomy mirrors proto.css / proto2.css; the fixed 330x712 phone
   and 1180x740 desktop frames of the prototype become responsive breakpoints.
   ========================================================================= */

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }

/* ---------- accessibility: visible keyboard focus (mouse stays clean) ---------- */
:where(button, a, input, textarea, select, [tabindex], image-slot):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

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

/* suppress transitions for one frame on theme switch so var()-derived colors
   don't get stuck mid-transition (see app.js switchTheme) */
.app-root.switching, .app-root.switching * { transition: none !important; }

/* =========================================================================
   App shell — responsive
   ========================================================================= */
.app-root {
  position: fixed;
  /* Pin to the REAL visible viewport. --app-h / --app-top are set in JS from
     window.visualViewport (see index.html). This is the only reliable way on
     Android Chrome: position:fixed there anchors to the tall layout viewport, so
     bottom:0 / 100dvh let the bottom nav slip under the system bar when the URL
     bar shows on reload or slides on scroll. We size+offset to visualViewport
     instead, so the nav always sits at the true visible bottom. The 100dvh/100vh
     fallbacks cover first paint (before JS) and browsers without visualViewport. */
  left: 0; right: 0;
  top: var(--app-top, 0px);
  height: 100vh;            /* fallback for first paint / no-JS */
  height: 100dvh;
  height: var(--app-h, 100dvh);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--canvas);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* layout column that holds appbar + scrollable body + bottom nav (mobile AND desktop) */
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

/* scrollable content region */
.app-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

/* content column — readable max width, centered */
.app-col {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 17px 28px;
}

/* ---------- mobile bottom nav (default, <=1023px) ---------- */
.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.nav .it {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  color: var(--dim-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color .2s;
}
/* Fixed icon-pill container on every tab so tinting the active one causes no layout shift. */
.nav .it .ni {
  display: grid;
  place-items: center;
  width: 46px;
  height: 30px;
  border-radius: 999px;
  transition: background .2s;
}
/* Active section — mirrors the bulletin's active tab: the icon sits in an accent-tinted pill and
   the item goes deep-green, so the current tab reads at a glance (not just a subtle color shift). */
.nav .it.on { color: var(--accent); font-weight: 700; }
.nav .it.on .ni { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.nav .it svg { width: 26px; height: 26px; }
.nav .fab {
  width: 50px; height: 50px;
  border-radius: 17px;
  background: var(--action);
  color: var(--on-action);
  display: flex; align-items: center; justify-content: center;
  margin-top: -24px;
  box-shadow: 0 8px 22px oklch(0.7 0.17 142 / 0.4);
}
.nav .fab:active { transform: scale(0.94); }

/* desktop rail is hidden on mobile */
.rail { display: none; }

/* ---------- desktop (>=1024px): left rail + fluid content ---------- */
@media (min-width: 1024px) {
  .app-root { flex-direction: row; }
  .rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 216px;
    flex-shrink: 0;
    padding: 22px 16px;
    border-right: 1px solid var(--line);
    background: color-mix(in oklab, var(--bg) 70%, var(--surf));
  }
  .rail .brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--disp);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    padding: 0 8px;
  }
  .rail .brand svg { width: 22px; height: 22px; }
  .rail .qadd {
    display: flex; align-items: center; justify-content: flex-start; gap: 9px;
    background: var(--action); color: var(--on-action); border: none; cursor: pointer;
    font-family: var(--disp); font-weight: 700; font-size: 13.5px;
    padding: 11px 14px; border-radius: 12px; margin-bottom: 10px;
    box-shadow: 0 6px 18px oklch(0.7 0.17 142 / 0.25);
  }
  .rail .qadd svg { width: 16px; height: 16px; }
  .rail .who {
    margin-top: auto; display: flex; align-items: center; gap: 9px;
    padding: 10px 8px; border-top: 1px solid var(--line); cursor: pointer; text-align: left;
  }
  .rail .who .av { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--bg); flex-shrink: 0; }
  .rail .who .nm { font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--text); }
  .rail .who .nm span { display: block; font-size: 9.5px; color: var(--dim-2); font-weight: 600; letter-spacing: 0.04em; }
  .rail .it {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--dim);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13.5px;
    transition: background .15s, color .15s;
  }
  .rail .it svg { width: 20px; height: 20px; }
  .rail .it.on { background: color-mix(in oklab, var(--accent) 15%, var(--surf)); color: var(--text); }
  .rail .it:hover:not(.on) { color: var(--text); }

  .nav { display: none; }            /* no bottom nav on desktop */
  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .app-col { max-width: 1080px; padding: 26px 34px 44px; }

  /* ---- desktop screen compositions ---- */
  .dhead { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 16px; }
  .dhead h3 { font-family: var(--disp); font-weight: 800; font-size: 29px; letter-spacing: -0.02em; }
  .dhead .sub { font-size: 13.5px; color: var(--dim); margin-top: 4px; max-width: 52ch; }
  .dbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--action); color: var(--on-action); border: none; cursor: pointer; font-family: var(--disp); font-weight: 700; font-size: 14px; padding: 12px 20px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 6px 20px oklch(0.7 0.17 142 / 0.25); }
  .dbtn.ghost { background: var(--surf); color: var(--dim); border: 1px solid var(--line); box-shadow: none; }
  .dbtn.done { background: var(--surf); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line)); box-shadow: none; }
  .dbtn svg { width: 15px; height: 15px; }
  .d3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
  .d2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
  .d2b { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .dstat { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
  .dstat .lab, .dstat-lab { font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim-2); }
  .dstat .big { font-family: var(--disp); font-weight: 800; font-size: 31px; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .dstat .big .u { font-size: 14px; color: var(--dim-2); }
  .dstat .tr { font-size: 11.5px; margin-top: 4px; font-weight: 600; }
  .dpanel { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
  .dpanel h4 { font-family: var(--disp); font-weight: 700; font-size: 16px; }
  .dpanel .psub { font-size: 12px; color: var(--dim); margin-top: 2px; margin-bottom: 16px; }
  .dweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .dweek .col { text-align: center; }
  .dweek .col .dl { font-size: 10px; color: var(--dim-2); font-weight: 700; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .05em; }
  .dweek .col.today .dl { color: var(--accent); }
  .dweek .col .cell { height: 74px; border-radius: 11px; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px 3px; }
  .dweek .col.today .cell { border-color: var(--accent); }
  .dweek .col .cell .ct { font-family: var(--disp); font-weight: 700; font-size: 9px; line-height: 1.05; color: var(--dim); }
  .dweek .col .cell svg { width: 15px; height: 15px; }
  .dsess { display: flex; align-items: center; gap: 13px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-bottom: 9px; width: 100%; text-align: left; }
  .dsess.today { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 10%, var(--surf)), var(--surf)); }
  .dsess .day { width: 42px; text-align: center; flex-shrink: 0; }
  .dsess .day b { font-family: var(--disp); font-weight: 800; font-size: 15px; display: block; }
  .dsess .day span { font-size: 9px; color: var(--dim-2); font-weight: 600; text-transform: uppercase; }
  .dsess .tag { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .dsess .tag svg { width: 18px; height: 18px; }
  .dsess .nm { font-family: var(--disp); font-weight: 700; font-size: 15px; }
  .dsess .sub { font-size: 11.5px; color: var(--dim); margin-top: 1px; }
  .dsess .end { margin-left: auto; }
  .dwo { display: grid; grid-template-columns: 260px 1fr; gap: 16px; }
  .dwo .exlist { display: flex; flex-direction: column; gap: 7px; }
  .dexrow { display: flex; align-items: center; gap: 11px; background: var(--surf); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; cursor: pointer; text-align: left; width: 100%; }
  .dexrow.on { border-color: color-mix(in oklab, var(--c-strength) 50%, var(--line)); background: color-mix(in oklab, var(--c-strength) 8%, var(--surf)); }
  .dexrow .n { width: 24px; height: 24px; border-radius: 8px; background: var(--surf-3); display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 12px; color: var(--dim); flex-shrink: 0; }
  .dexrow .n svg { width: 13px; height: 13px; }
  .dexrow.done .n { background: var(--accent); color: var(--on-action); }
  .dexrow .nm { font-family: var(--disp); font-weight: 700; font-size: 13px; }
  .dexrow .sub { font-size: 10px; color: var(--dim); }
  .dexrow .st { margin-left: auto; font-size: 10px; color: var(--dim-2); font-weight: 600; }
  .dmeal { display: flex; align-items: center; gap: 13px; background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 12px 15px; margin-bottom: 8px; cursor: pointer; width: 100%; text-align: left; }
  .dmeal:hover { background: var(--surf-2); }
  .dmeal .tag { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .dmeal .tag svg { width: 18px; height: 18px; }
  .dmeal .nm { font-family: var(--disp); font-weight: 700; font-size: 14px; }
  .dmeal .sub { font-size: 11px; color: var(--dim); }
  .dmeal .mac { margin-left: auto; display: flex; gap: 16px; text-align: right; }
  .dmeal .mac div { font-family: var(--disp); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
  .dmeal .mac div span { display: block; font-family: var(--sans); font-weight: 600; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); }
  .mp-grid { display: flex; flex-direction: column; gap: 8px; }
  .mp-col-head { display: grid; grid-template-columns: 64px repeat(4, 1fr); gap: 8px; padding: 0 2px; }
  .mp-col-head span { font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); }
  .mp-grid-row { display: grid; grid-template-columns: 64px repeat(4, 1fr); gap: 8px; align-items: stretch; }
  .mp-d { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .mp-d b { font-family: var(--disp); font-weight: 800; font-size: 13px; }
  .mp-d span { font-size: 9.5px; color: var(--dim-2); font-weight: 600; }
  .mp-cell { background: color-mix(in oklab, var(--bg) 40%, var(--surf)); border: 1px solid var(--line); border-radius: 11px; padding: 11px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 58px; }
  .mp-cell:hover { border-color: color-mix(in oklab, var(--c-nutri) 35%, var(--line)); }
  .mp-cell.filled { border-color: color-mix(in oklab, var(--c-nutri) 30%, var(--line)); background: color-mix(in oklab, var(--c-nutri) 6%, var(--surf)); }
  .mp-cell b { font-family: var(--disp); font-weight: 700; font-size: 12.5px; line-height: 1.15; }
  .mp-cell span { font-size: 10px; color: var(--dim-2); font-weight: 600; }
  .mp-cell .add { color: var(--dim-2); align-self: center; }
  .mp-cell .add svg { width: 14px; height: 14px; }
}

/* =========================================================================
   Base components (anatomy from proto.css)
   ========================================================================= */
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim-2);
}
.h-title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 3px 0 0;
}
@media (min-width: 1024px) { .h-title { font-size: 29px; } }

.card {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.card-pad { padding: 16px; }
/* Consistent breathing room when a card sits directly above a list row or another
   card (cards carry no margin of their own — they rely on ad-hoc inline spacing,
   which left gaps like Today's-progress → Morning check-in touching). */
.card + .listrow, .card + .card { margin-top: 10px; }

.tnum { font-variant-numeric: tabular-nums; font-family: var(--disp); }

.chip-s {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 7px;
  display: inline-block;
}

.sec-lab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 2px 9px;
}
.sec-lab .t { font-family: var(--disp); font-weight: 700; font-size: 14px; }
.sec-lab .m {
  font-family: var(--sans); font-weight: 600; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2);
}

/* primary pill button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 30px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform .12s, background .15s, border-color .15s;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }   /* keep icons from ballooning a full-width button */
.btn:active { transform: scale(0.98); }
.btn.action { background: var(--action); color: var(--on-action); border-color: var(--action); }
.btn.ghost  { background: transparent; }

/* =========================================================================
   Screens & flows (anatomy from proto.css) — added per phase
   ========================================================================= */
.screen { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .screen { animation: scrIn .28s ease; } }
@keyframes scrIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Delight Batch (Phase 1): shared count-up settle pop. delight.js adds .dl-pop when a
   value count-up animates (never under reduced-motion — the class is only added when motion
   is allowed, and the keyframe is also guarded here). A subtle scale nudge as it lands. */
@media (prefers-reduced-motion: no-preference) { .dl-pop { animation: dl-pop .6s ease; } }
@keyframes dl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* Today warmth (Phase 2): a rotating one-liner under the greeting, and a quiet brand mark in the
   brand-new/first-run hero. (The focus word moved into the Phase 3 focus banner.) */
.today-rotline { margin: 4px 0 2px; font-size: 13px; color: var(--dim); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.today-mark { color: var(--accent); opacity: .5; width: 44px; margin: 2px 0 8px; }
.today-mark svg { width: 100%; height: auto; }

/* Train feel (Phase 3): rest-timer final-countdown pulse, wider-PR line, superset bracket
   linking a pair, and a load-type color dot. All motion reduced-motion-gated. */
@media (prefers-reduced-motion: no-preference) { .rt.pulse { animation: rt-pulse .5s ease; } }
@keyframes rt-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: var(--accent); } 100% { transform: scale(1); } }
.summary-extra { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.summary-extra svg { width: 15px; height: 15px; }
.ss-bracket { position: relative; padding-left: 11px; }
.ss-bracket::before { content: ''; position: absolute; left: 2px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: color-mix(in oklab, var(--c-strength) 45%, var(--line)); }
.lt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* Fuel delight (Phase 4): protein-streak ring, water fill-pop, grocery strike wipe, full-macro
   cue, and the big-text cooking mode. Motion is reduced-motion-gated. */
.pstreak-ring { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.pstreak-ring .in { width: 34px; height: 34px; border-radius: 50%; background: var(--surf); display: grid; place-items: center; }
.pstreak-ring .in b { font-size: 15px; color: var(--c-strength); }
.water-dot { display: inline-block; }
.mbar.full .bar i { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent); }
.mbar.full .top { color: var(--accent); }
/* grocery: an animated line-through wipe on the item just checked (static full line otherwise) */
.gro-toggle.on { text-decoration: none; }
.gro-toggle.on .gn { position: relative; }
.gro-toggle.on .gn::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .gro-toggle.on.dl-strike .gn::after { animation: gro-strike .28s ease both; } }
@keyframes gro-strike { from { width: 0; } to { width: 100%; } }
.cooking { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; padding: 20px max(20px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)); }
.cook-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cook-dots { display: flex; gap: 5px; margin-top: 12px; }
.cook-dots span { flex: 1; height: 3px; border-radius: 2px; background: var(--surf-3); }
.cook-dots span.on { background: var(--c-nutri); }
.cook-dots span.past { background: color-mix(in oklab, var(--c-nutri) 45%, var(--surf-3)); }
.cook-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.cook-step { font-size: clamp(24px, 6vw, 40px); line-height: 1.28; font-weight: 650; text-align: center; max-width: 20ch; }
.cook-nav { display: flex; gap: 10px; }
.cook-nav .btn { flex: 1; padding: 15px; font-size: 16px; }

/* Speed-workout runner — full-screen hands-free countdown for bodyweight circuits.
   Mirrors the cooking takeover (fixed, z-index 60). --sp-col is set per phase. */
.speed-run { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)); }
.speed-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.speed-mute { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--dim); background: var(--surf-2); border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.speed-mute.off { color: var(--dim-2); opacity: .8; }
/* body scrolls if a small phone can't fit the clock + 6-row circuit list; centered otherwise */
.speed-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; min-height: 0; overflow-y: auto; padding: 4px 0; }
.speed-phase { font-family: var(--disp); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
/* "get ready" cue — a reserved line (no layout jump) that names the last-3s transition. Visible for
   muted AND reduced-motion users; the clock also glows (static) and pulses (motion only). */
.speed-getready { min-height: 15px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-col); }
/* mid-work "switch sides" banner for one-side-at-a-time moves */
.speed-switch { min-height: 0; height: 0; overflow: hidden; opacity: 0; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--heat); transition: opacity .2s ease; }
.speed-switch.on { height: auto; min-height: 22px; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .speed-switch.on { animation: speed-ready-pulse .7s ease-in-out infinite; } }
/* pause overlay */
.speed-paused { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 5; }
.speed-paused-in { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.speed-paused-t { font-family: var(--disp); font-weight: 800; font-size: 30px; letter-spacing: .04em; color: var(--ink); }
.speed-clock { font-family: var(--disp); font-weight: 800; font-size: clamp(64px, 22vw, 132px); line-height: .92; color: var(--sp-col); font-variant-numeric: tabular-nums; }
.speed-clock.ready { text-shadow: 0 0 26px color-mix(in oklab, var(--sp-col) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .speed-clock.ready { animation: speed-ready-pulse 1s ease-in-out infinite; }
  .speed-move { animation: speed-pop .3s ease; }
}
@keyframes speed-ready-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes speed-pop { 0% { transform: scale(.92); opacity: .45; } 100% { transform: scale(1); opacity: 1; } }
.speed-move { font-family: var(--disp); font-weight: 800; font-size: clamp(20px, 5.5vw, 30px); letter-spacing: -.01em; max-width: 22ch; }
.speed-cue { font-size: 13px; color: var(--dim); max-width: 34ch; line-height: 1.4; }
.speed-reps { margin-top: 12px; }
.speed-reps-lab { font-size: 13px; color: var(--dim); font-weight: 650; }
.speed-reps-skip { font-size: 11px; color: var(--dim-2); margin-top: 6px; }
/* persistent circuit list */
.speed-list { width: 100%; max-width: 360px; margin-top: 14px; text-align: left; }
.speed-list-head { font-size: 11px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin: 0 4px 6px; }
.speed-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid transparent; }
.speed-row + .speed-row { margin-top: 3px; }
.speed-row-ic { flex: 0 0 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surf-3); color: var(--dim-2); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.speed-row-ic svg { width: 14px; height: 14px; }
.speed-row-nm { font-weight: 650; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.speed-row.current { background: color-mix(in oklab, var(--sp-col) 12%, var(--surf)); border-color: color-mix(in oklab, var(--sp-col) 40%, var(--line)); border-left: 3px solid var(--sp-col); padding-left: 8px; }
.speed-row.current .speed-row-ic { background: var(--sp-col); color: var(--on-action); }
.speed-row.current .speed-row-nm { font-weight: 800; }
.speed-row.done { opacity: .5; }
.speed-row.done .speed-row-ic { background: color-mix(in oklab, var(--action) 22%, var(--surf)); color: var(--action); }
.speed-row.done .speed-row-nm { text-decoration: line-through; text-decoration-color: var(--dim-2); }
.speed-row.upcoming { opacity: .6; }
.speed-bar { height: 6px; border-radius: 99px; background: var(--surf-3); overflow: hidden; }
.speed-bar i { display: block; height: 100%; border-radius: 99px; transition: width .5s linear; }
@media (min-width: 860px) { .speed-run { max-width: 680px; margin: 0 auto; } .speed-body { gap: 8px; } }
/* Morning wake-up ritual — reuses the whole .speed-* runner but with a sunrise identity: --sp-col is
   set to a warm amber inline (so the clock, cue line, list highlight and progress bar all pick it up),
   plus a soft dawn glow behind the clock so it never reads as "the purple workout screen". */
.wake-run { background: radial-gradient(120% 62% at 50% 0%, color-mix(in oklab, var(--sp-col) 15%, var(--bg)) 0%, var(--bg) 62%); }
.wake-run .speed-switch { color: var(--sp-col); }

/* Mind delight (Phase 5): breath orb, meditation dim, mood trail, streak flame, ambient toggle.
   All motion reduced-motion-gated (the orb snaps to a static size, dim/flicker stop). */
.breath-orb-wrap { display: grid; place-items: center; height: 180px; margin: 4px 0; }
.breath-orb { width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; color: var(--c-recover);
  background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--c-recover) 42%, var(--surf)), color-mix(in oklab, var(--c-recover) 12%, var(--surf)));
  box-shadow: 0 0 44px color-mix(in oklab, var(--c-recover) 30%, transparent); transition: transform linear; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .breath-orb { transition: none !important; transform: scale(1) !important; } }
.sheet-scrim.med-dim { background: color-mix(in oklab, #000 76%, transparent); }
@media (prefers-reduced-motion: no-preference) { .sheet-scrim.med-dim { animation: med-dim-in 1.2s ease; } }
@keyframes med-dim-in { from { background: color-mix(in oklab, #000 40%, transparent); } to { background: color-mix(in oklab, #000 76%, transparent); } }
.mood-trail { display: flex; gap: 6px; font-size: 18px; margin: 6px 0 8px; }
.mood-trail .empty { color: var(--dim-2); opacity: .5; }
.mind-flame .flame-glyph { line-height: 1; filter: drop-shadow(0 0 7px color-mix(in oklab, var(--heat) 45%, transparent)); }
@media (prefers-reduced-motion: no-preference) { .mind-flame .flame-glyph { animation: flame-flicker 2.4s ease-in-out infinite; } }
@keyframes flame-flicker { 0%, 100% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.07) rotate(1deg); } }
.ambient-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surf-2); color: var(--dim); cursor: pointer; }
.ambient-toggle svg { width: 14px; height: 14px; }
.ambient-toggle.on { color: var(--c-recover); border-color: color-mix(in oklab, var(--c-recover) 40%, var(--line)); background: color-mix(in oklab, var(--c-recover) 12%, var(--surf)); }

/* Body delight (Phase 6): lowest-in-N badge + new-low sparkline glow, honest measurement recap,
   and a draggable before/after photo slider. */
.low-badge { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in oklab, var(--accent) 16%, var(--surf)); color: var(--accent); font-weight: 700; }
.low-badge svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: no-preference) { .spark-low-glow { animation: spark-glow 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } }
@keyframes spark-glow { 0%, 100% { r: 3.4; opacity: 1; } 50% { r: 4.6; opacity: .75; } }
.meas-recap { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--accent); margin: 8px 2px 0; }
.meas-recap svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.ptl-slider { position: relative; width: 100%; aspect-ratio: 3 / 4; max-height: 340px; border-radius: 12px; overflow: hidden; background: var(--surf-3); margin-top: 2px; }
.ptl-slide { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ptl-slide-top { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.ptl-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); transform: translateX(-1px); pointer-events: none; }
.ptl-divider::after { content: '⇔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #333; display: grid; place-items: center; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ptl-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ptl-cmp-tag { position: absolute; bottom: 8px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 999px; pointer-events: none; }
.ptl-cmp-tag.a { left: 8px; } .ptl-cmp-tag.b { right: 8px; }

/* Insights delight (Phase 7): consistency heatmap, whisper card, flashback + wrapped recap,
   streak crown, PR ribbon, and a chart draw-in (all reduced-motion-gated). */
.hm-grid { display: flex; gap: 3px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--surf-3); flex: 0 0 auto; }
.hm-l1 { background: color-mix(in oklab, var(--c-body) 30%, var(--surf-3)); }
.hm-l2 { background: color-mix(in oklab, var(--c-body) 52%, var(--surf-3)); }
.hm-l3 { background: color-mix(in oklab, var(--c-body) 74%, var(--surf-3)); }
.hm-l4 { background: var(--c-body); }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; color: var(--dim-2); }
.hm-legend .hm-cell { width: 9px; height: 9px; }
/* Consistency — one row per pillar, a filled dot per day you showed up (clearer than an intensity heatmap). */
.cons-grid { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.cons-row { display: flex; align-items: center; gap: 10px; }
.cons-lab { width: 62px; flex: 0 0 auto; font-size: 12px; font-weight: 650; color: var(--ink); }
.cons-days { flex: 1; display: flex; gap: 3px; min-width: 0; }
.cons-dot { flex: 1 1 0; min-width: 0; height: 16px; border-radius: 4px; background: var(--surf-3); border: 1px solid var(--line); }
.cons-count { flex: 0 0 auto; width: 34px; text-align: right; font-size: 12.5px; font-weight: 700; }
.cons-axis { display: flex; justify-content: space-between; margin: 8px 0 0 72px; font-size: 10px; color: var(--dim-2); }
.whisper-card { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 8%, var(--surf)); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line)); }
.whisper-card p { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); margin: 3px 0; }
.whisper-card svg { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.flashback h4 { display: flex; align-items: center; gap: 6px; }
.flashback svg { width: 15px; height: 15px; }
.wrapped-headline { font-size: 18px; font-weight: 750; margin: 6px 0 8px; }
.wrapped-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.wrapped .wrapped-lines .chip-s { background: color-mix(in oklab, var(--c-strength) 14%, var(--surf)); color: var(--c-strength); }
.crown { font-size: .7em; vertical-align: middle; }
.pr-ribbon { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-top: 6px; }
.pr-ribbon .pr-row { flex: 0 0 auto; min-width: 190px; }
@media (prefers-reduced-motion: no-preference) { .ins-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: ins-draw 1s ease forwards; } }
@keyframes ins-draw { to { stroke-dashoffset: 0; } }

/* Cross-cutting (Phase 8): boot splash, loading skeletons, century crown. Motion gated. */
.boot-splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--bg); z-index: 100; }
.bs-mark, .boot-mark { color: var(--accent); width: 58px; }
.bs-mark svg, .boot-mark svg { width: 100%; height: auto; }
.boot-mark { margin: 0 auto 10px; }
.bs-name { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--dim); }
@media (prefers-reduced-motion: no-preference) { .bs-mark, .boot-mark { animation: bs-pulse 1.6s ease-in-out infinite; } }
@keyframes bs-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.skel-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.skel-row { height: 44px; border-radius: 12px; background: var(--surf-2); }
@media (prefers-reduced-motion: no-preference) { .skel-row { background: linear-gradient(90deg, var(--surf-2) 25%, var(--surf-3) 37%, var(--surf-2) 63%); background-size: 400% 100%; animation: skel-shimmer 1.4s ease infinite; } }
@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.crown.century { font-size: .8em; }

/* app bar (mobile) */
.appbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 6px; }
.appbar .brand { display: flex; align-items: center; gap: 9px; }
.appbar .wm { font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.appbar .abr { display: flex; align-items: center; gap: 6px; }
.iconbtn { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--dim); border: 1px solid transparent; }
.iconbtn:hover { color: var(--text); }
.iconbtn svg { width: 20px; height: 20px; }
.avatar { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 13px; color: var(--bg); }

/* hero session cta */
.hero { background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 26%, var(--surf)), var(--surf)); border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line)); border-radius: 18px; padding: 16px; display: flex; align-items: center; gap: 13px; margin-top: 14px; width: 100%; text-align: left; transition: transform .2s; }
.hero:active { transform: scale(0.985); }
.hero.done { background: var(--surf); border-color: var(--line); cursor: default; }
.hero .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--accent); color: var(--on-action); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero.done .ico { background: color-mix(in oklab, var(--accent) 22%, var(--surf)); color: var(--accent); }
.hero .tx { flex: 1; min-width: 0; }
.hero .tx b { font-family: var(--disp); font-weight: 800; font-size: 17px; display: block; letter-spacing: -0.01em; }
.hero .tx span { font-size: 11.5px; color: var(--dim); }
.hero .arr { color: var(--accent); flex-shrink: 0; }
/* Check-in lead (Today Habits + Goals rework Phase 6): the check-in LEADS Today until it's done —
   a prominent recover-tinted prompt at the top of the day. Once checked in it retires and the
   readiness score folds into the quiet "Today so far" glances. */
.checkin-lead { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; margin-top: 14px; padding: 15px; border-radius: 18px; background: color-mix(in oklab, var(--c-recover) 12%, var(--surf)); border: 1px solid color-mix(in oklab, var(--c-recover) 40%, var(--line)); transition: transform .2s; }
.checkin-lead:active { transform: scale(0.985); }
.checkin-lead .cl-ic { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--c-recover) 26%, var(--surf)); color: var(--c-recover); }
.checkin-lead .cl-ic svg { width: 20px; height: 20px; }
.checkin-lead .cl-tx { flex: 1; min-width: 0; }
.checkin-lead .cl-tx b { font-family: var(--disp); font-weight: 800; font-size: 16px; display: block; letter-spacing: -0.01em; }
.checkin-lead .cl-tx span { font-size: 11.5px; color: var(--dim); }
.checkin-lead .cl-ar { color: var(--c-recover); flex-shrink: 0; }
.checkin-lead .cl-ar svg { width: 18px; height: 18px; }

/* Morning wake-up ritual card on Today (Phase 5) — a sunrise-tinted Start card between the check-in
   lead and the habits block, or a quiet one-liner once the ritual is done. Weekly-cadence copy only. */
.wake-card { margin-top: 12px; }
.wake-start { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 14px 15px; border-radius: 18px; background: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 13%, var(--surf)); border: 1px solid color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 42%, var(--line)); transition: transform .2s; }
.wake-start:active { transform: scale(0.985); }
.wake-start .wk-ic { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 22%, var(--surf)); }
.wake-start .wk-tx { flex: 1; min-width: 0; }
.wake-start .wk-tx b { font-family: var(--disp); font-weight: 800; font-size: 16px; display: block; letter-spacing: -0.01em; }
.wake-start .wk-tx span { font-size: 11.5px; color: var(--dim); }
.wake-start .wk-ar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-family: var(--disp); font-weight: 800; font-size: 12px; color: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 60%, var(--ink)); }
.wake-start .wk-ar svg { width: 16px; height: 16px; }
.wake-reoffer { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0 4px; padding: 5px 11px; border-radius: 99px; background: var(--surf-2); border: 1px solid var(--line); color: var(--dim); font-family: var(--sans); font-weight: 700; font-size: 11.5px; }
.wake-reoffer svg { width: 13px; height: 13px; }
.wake-swap { display: inline-flex; align-items: center; gap: 5px; margin: 8px 0 0 4px; padding: 5px 12px; border-radius: 99px; background: var(--surf-2); border: 1px solid var(--line); color: var(--dim); font-family: var(--sans); font-weight: 700; font-size: 11.5px; }
.wake-swap:active { transform: scale(0.96); }
.wake-swap svg { width: 13px; height: 13px; }
/* "Note to tomorrow" reminder banner(s) pinned at the top of Today */
.today-reminders { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.today-reminder { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 13px; border-radius: 14px; background: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 12%, var(--surf)); border: 1px solid color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 40%, var(--line)); }
.today-reminder .tr-ic { font-size: 15px; line-height: 1.35; flex: 0 0 auto; }
.today-reminder .tr-tx { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); font-weight: 600; word-break: break-word; }
.today-reminder .tr-x { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: transparent; border: none; color: var(--dim); cursor: pointer; }
.today-reminder .tr-x:active { background: var(--surf-2); }
.today-reminder .tr-x svg { width: 15px; height: 15px; }
.wake-done { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 9px 13px; border-radius: 13px; background: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 9%, var(--surf)); border: 1px solid color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 26%, var(--line)); }
.wake-done .wk-done-lab { font-family: var(--disp); font-weight: 800; font-size: 13px; letter-spacing: 0.01em; }
.wake-done .wk-done-pace { font-size: 12px; color: var(--dim); }
/* Mind-screen "Morning" ritual row (Phase 6) — a listrow with a sunrise emoji tag. */
.wake-prac .wake-tag { background: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 20%, var(--surf)); font-size: 19px; }
.wake-prac .end svg { color: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 55%, var(--ink)); }
/* glute8 extras (band selector + progression nudge + guidance note) — siblings of the Start button. */
.wake-extra { margin: 4px 0 10px 4px; display: flex; flex-direction: column; gap: 6px; }
.wake-band { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wake-band-lab { font-size: 11px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.band-chip { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surf-2); color: var(--dim); font-family: var(--sans); font-weight: 700; font-size: 11.5px; text-transform: capitalize; }
.band-chip:active { transform: scale(0.96); }
.band-chip.on { background: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 20%, var(--surf)); border-color: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 45%, var(--line)); color: var(--ink); }
.wake-nudge { font-size: 12px; font-weight: 700; color: color-mix(in oklab, var(--sunrise, oklch(0.79 0.13 68)) 60%, var(--ink)); }
.wake-note { font-size: 11.5px; line-height: 1.45; color: var(--dim); }
/* Practice rows with a trailing "✓ Did it" chip (Phase 6): the row is a container, not a button, so
   the main-start button and the Did-it button sit side by side without nesting. */
.prac-row { padding-right: 8px; gap: 8px; }
.prac-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; }
.prac-main:active { transform: scale(0.99); }
.prac-did { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 99px; background: color-mix(in oklab, var(--action) 12%, var(--surf)); border: 1px solid color-mix(in oklab, var(--action) 30%, var(--line)); color: var(--action); font-family: var(--disp); font-weight: 700; font-size: 11px; white-space: nowrap; }
.prac-did svg { width: 12px; height: 12px; }

/* Focus / priority banner (Today Habits + Goals rework Phase 3): the day's priority under the
   greeting — a colored focus word (Build/Steady/Recover, from today's readiness check-in) stacked
   above the coach's balance next-move line. Deliberately stacked (not one inline sentence): the two
   are UNRELATED computations (readiness score vs. 14-day region coverage) and used to read as one
   fused claim ("Steady — a good balance...") when laid out on a single baseline row. The "Coach"
   tag + separate row makes clear the line is a distinct, separately-computed observation. Honest:
   the render omits it entirely when there's no signal, so it never shows an empty strip. */
.focus-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; padding: 10px 13px; border-radius: 13px; background: color-mix(in oklab, var(--fb, var(--accent)) 12%, var(--surf)); border: 1px solid color-mix(in oklab, var(--fb, var(--accent)) 32%, var(--line)); border-left-width: 3px; }
.focus-banner .fb-word { font-family: var(--disp); font-weight: 800; font-size: 14px; letter-spacing: 0.01em; color: var(--fb, var(--accent)); }
.focus-banner .fb-coach { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.focus-banner .fb-tag { font-family: var(--sans); font-weight: 700; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); flex-shrink: 0; }
.focus-banner .fb-line { font-size: 12.5px; color: var(--dim); min-width: 0; }
.focus-banner .fb-counts { font-size: 11px; color: var(--dim-2); }

/* Log-training affordance (Today Habits + Goals rework Phase 2): three quick log chips under the
   "Log today's training" hero, dispatching the same quick-add actions as the ➕ sheet. */
.today-logrow { display: flex; gap: 8px; margin-top: 8px; }
.today-logchip { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); color: var(--ink); font-family: var(--disp); font-weight: 700; font-size: 12px; transition: .15s; }
.today-logchip:active { transform: scale(0.98); }
.today-logchip svg { width: 15px; height: 15px; color: var(--dim); flex-shrink: 0; }

/* mini stat row */
.ring-row { display: flex; gap: 9px; margin-top: 13px; }
.minicard { flex: 1; background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; text-align: left; }
.minicard .lab { font-family: var(--sans); font-weight: 600; font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim-2); }
.minicard .big { font-family: var(--disp); font-weight: 800; font-size: 22px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.minicard .big .u { font-size: 11px; color: var(--dim-2); font-weight: 600; }

/* list rows (agenda / sessions / meals) */
.listrow { display: flex; align-items: center; gap: 11px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin-bottom: 8px; width: 100%; text-align: left; transition: .15s; }
.listrow.static { cursor: default; }
.listrow:not(.static):active { transform: scale(0.99); background: var(--surf-2); }
.listrow .tag { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.listrow .tag svg { width: 18px; height: 18px; }
.listrow .nm { font-family: var(--disp); font-weight: 700; font-size: 13.5px; }
.listrow .sub { font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.listrow .end { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.listrow .end svg { width: 16px; height: 16px; color: var(--dim-2); }

.linktext { background: none; border: none; cursor: pointer; font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--accent); padding: 10px 2px 2px; display: inline-flex; align-items: center; gap: 5px; }
.linktext svg { width: 13px; height: 13px; flex-shrink: 0; }
.profile-note { font-size: 11px; color: var(--dim-2); text-align: center; padding: 8px 0 2px; }

/* readiness check-in */
.checkin-head { display: flex; align-items: center; gap: 12px; padding-top: 2px; }
.bk { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surf-2); color: var(--dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bk svg { width: 16px; height: 16px; }
.qrow .ql .ic svg { width: 16px; height: 16px; }
.qrow { background: var(--surf); border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px; margin-bottom: 9px; }
.qrow .ql { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qrow .ql .lhs { display: flex; align-items: center; gap: 9px; }
.qrow .ql .ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qrow .ql b { font-family: var(--disp); font-weight: 700; font-size: 14.5px; }
.qrow .ql .v { font-size: 11px; color: var(--dim); font-weight: 600; }
.scale { display: flex; gap: 6px; }
.scale button { flex: 1; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 45%, var(--surf)); font-family: var(--disp); font-weight: 800; font-size: 15px; color: var(--dim-2); transition: .12s; }
.scale button:active { transform: scale(0.95); }
/* Selected chips carry a value-aware inline fill (see screenCheckin); this is the fallback. */
.scale button.on { background: var(--accent); color: var(--on-action); border-color: var(--accent); }
.ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 9.5px; color: var(--dim-2); font-weight: 600; }
.score-card { background: linear-gradient(150deg, color-mix(in oklab, var(--ring-col, var(--accent)) 22%, var(--surf)), var(--surf)); border: 1px solid color-mix(in oklab, var(--ring-col, var(--accent)) 38%, var(--line)); border-radius: 18px; padding: 16px; margin-top: 12px; display: flex; align-items: center; gap: 15px; }
.score-card .ring { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.score-card .ring .in { width: 58px; height: 58px; border-radius: 50%; background: var(--surf); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-card .ring .in b { font-family: var(--disp); font-weight: 800; font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
.score-card .tx b { font-family: var(--disp); font-weight: 800; font-size: 17px; display: block; letter-spacing: -0.01em; }
.score-card .tx span { font-size: 12px; color: var(--dim); }

/* Equal-weight body + mind result card (readiness/mind redesign): two rings side by side, each its
   own facet, on a neutral surface so neither color dominates (equal weight, not readiness-first). */
.dual-score { display: flex; align-items: stretch; text-align: center; background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 16px 10px; margin-top: 14px; }
.dual-score .ds-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.dual-score .ds-div { flex: 0 0 auto; width: 1px; background: var(--line); margin: 6px 8px; }
.dual-score .ds-ring { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dual-score .ds-in { width: 54px; height: 54px; border-radius: 50%; background: var(--surf); display: flex; align-items: center; justify-content: center; }
.dual-score .ds-in b { font-family: var(--disp); font-weight: 800; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.dual-score .ds-name { font-family: var(--disp); font-weight: 700; font-size: 13px; margin-top: 9px; }
.dual-score .ds-lbl { font-size: 11.5px; margin-top: 2px; line-height: 1.25; }

/* quick-add sheet + generic bottom sheet */
.sheet-scrim { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; z-index: 40; }
@media (min-width: 1024px) { .sheet-scrim { align-items: center; } }
/* max-height + overflow-y keep the sheet inside the visible viewport. When the
   mobile keyboard opens, .app-root (and therefore this scrim) shrinks to the
   visualViewport height; without an internal scroll the bottom-anchored sheet's
   top — including any focused input — would overflow above the clipped app-root
   and be unreachable. Capping the height makes the sheet scroll internally so the
   focused field can be scrolled into view. */
.sheet { width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--surf-2); border: 1px solid var(--line); border-radius: 22px 22px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-lg); }
/* drag-grab handle on every bottom sheet (design: .sheet .grab) */
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 3px; background: var(--surf-3); margin: -2px auto 12px; }
@media (min-width: 1024px) { .sheet::before { display: none; } }
@media (min-width: 1024px) { .sheet { border-radius: 22px; } }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: sheetUp .32s cubic-bezier(.2,.7,.2,1); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet h3 { font-family: var(--disp); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 10px; }
.sheet-row { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-radius: 12px; width: 100%; text-align: left; }
.sheet-row:hover { background: var(--surf-2); }
.sheet-row .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--surf-2); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.sheet-row .ic svg { width: 19px; height: 19px; }
.sheet-row b { font-family: var(--disp); font-weight: 700; font-size: 14px; display: block; }
.sheet-row span { font-size: 11px; color: var(--dim); }

/* toast */
.toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--surf-3); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; box-shadow: var(--shadow-lg); z-index: 60; }
.toast svg { width: 15px; height: 15px; color: var(--accent); }
.toast-undo { margin-left: 4px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.toast-undo:active { transform: scale(.96); }
@media (prefers-reduced-motion: no-preference) { .toast { animation: toastIn .3s ease; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }

/* ---- Program ---- */
.weeks { display: flex; gap: 5px; margin-top: 14px; }
.wk { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.wk i { width: 100%; height: 4px; border-radius: 4px; background: var(--track); display: block; }
.wk i.done { background: var(--accent); }
.wk i.cur { background: var(--c-strength); }
.wk span { font-size: 9px; font-weight: 600; color: var(--dim-2); font-variant-numeric: tabular-nums; }
.wk.cur span { color: var(--text); }
.cal { display: flex; gap: 6px; margin-top: 12px; }
.cal .d { flex: 1; background: var(--surf); border: 1px solid var(--line); border-radius: 12px; padding: 9px 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cal .d.today { border-color: var(--accent); }
.cal .dl { font-family: var(--disp); font-weight: 700; font-size: 12px; }
.cal .dot { width: 14px; height: 4px; border-radius: 3px; }
.cal .d .chk { color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cal .d .chk svg { width: 14px; height: 14px; }
.cal .chk { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 20%, var(--surf)); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cal .chk svg { width: 12px; height: 12px; }
.sessrow { display: flex; align-items: center; gap: 10px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.sessrow.today { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.sessrow .day { width: 34px; flex-shrink: 0; }
.sessrow .day b { font-family: var(--disp); font-weight: 800; font-size: 13px; display: block; }
.sessrow .day span { font-size: 8.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sessrow .tag { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sessrow .tag svg { width: 17px; height: 17px; }
.sessrow .nm { font-family: var(--disp); font-weight: 700; font-size: 13px; }
.sessrow .sub { font-size: 10px; color: var(--dim); margin-top: 1px; }
.sessrow .end { margin-left: auto; }
.startbtn { background: var(--action); color: var(--on-action); border: none; border-radius: 30px; font-family: var(--disp); font-weight: 700; font-size: 12px; padding: 8px 16px; min-height: 36px; }
.cue { display: flex; gap: 11px; align-items: center; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-top: 10px; }
.cue .ci { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 20%, var(--surf)); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cue.warn .ci { background: color-mix(in oklab, var(--heat) 20%, var(--surf)); color: var(--heat); }
.cue .ci svg { width: 18px; height: 18px; }
.cue p { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.cue p b { color: var(--text); font-weight: 700; }

/* ---- Live workout ---- */
.wo-prog { display: flex; gap: 5px; margin: 10px 0 4px; }
.wo-prog i { flex: 1; height: 4px; border-radius: 4px; background: var(--track); }
.wo-prog i.done { background: var(--accent); }
.wo-prog i.cur { background: var(--c-strength); }
.wo-head { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 10px; gap: 10px; }
.wo-name { display: flex; align-items: center; gap: 7px; color: var(--text); }
.wo-name .h-title { font-size: 21px; }
.rest { text-align: right; flex-shrink: 0; }
.rest .eyebrow { font-size: 9px; }
.rest .rt { font-family: var(--disp); font-weight: 800; font-size: 20px; }
.rest.idle .rt { color: var(--dim-2); }
.setrow { display: grid; grid-template-columns: 24px 1fr 1fr 44px; align-items: center; gap: 8px; padding: 7px 2px; }
.setrow .si { font-family: var(--disp); font-weight: 700; color: var(--dim-2); font-size: 12px; }
.setrow .box { text-align: center; background: color-mix(in oklab, var(--bg) 40%, var(--surf)); border: 1px solid var(--line); border-radius: 9px; padding: 7px 4px; font-family: var(--disp); font-weight: 700; font-size: 13px; }
.setrow .box small { display: block; font-size: 8px; color: var(--dim-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.setrow .box .boxrep { width: 100%; background: none; border: none; outline: none; text-align: center; font-family: var(--disp); font-weight: 700; font-size: inherit; color: inherit; padding: 0; -moz-appearance: textfield; }
.setrow .box .boxrep::-webkit-outer-spin-button, .setrow .box .boxrep::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.setrow .box.cur { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }
.setrow .box.done { background: color-mix(in oklab, var(--accent) 15%, var(--surf)); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.setrow .chk { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); background: var(--surf-2); color: var(--dim-2); display: flex; align-items: center; justify-content: center; }
.setrow .chk.on { background: var(--accent); color: var(--on-action); border-color: var(--accent); }
.wo-actions { display: flex; gap: 9px; padding: 12px 0 4px; position: sticky; bottom: 0; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.wo-actions .btn { flex: 1; }

/* ---- summary / confirm overlay ---- */
.summary { background: var(--surf); border: 1px solid var(--line); border-radius: 22px; padding: 22px; max-width: 360px; width: 100%; text-align: center; box-shadow: var(--shadow-lg); }
.summary .seal { width: 74px; height: 74px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 18%, var(--surf)); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); margin: 0 auto 14px; }
.summary .seal svg { width: 34px; height: 34px; }
.summary h3 { font-family: var(--disp); font-weight: 800; font-size: 20px; }
.summary p { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
.summary .row { display: flex; gap: 9px; margin: 16px 0; }
.summary .minicard { text-align: center; }
.summary .minicard .lab { font-size: 8.5px; }
.summary .minicard .big { font-size: 24px; }

/* ---- RPE ---- */
.rpe-big { font-family: var(--disp); font-weight: 800; font-size: 56px; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; }
.rpe-desc { text-align: center; color: var(--dim); font-size: 13px; margin-top: 4px; }
.rpe-slider { width: 100%; margin: 18px 0 6px; accent-color: var(--accent); height: 30px; }
.rpe-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim-2); font-weight: 600; }

/* ---- Nutrition ---- */
.macro { display: flex; gap: 15px; align-items: center; padding: 14px; }
.donut { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.donut .in { width: 64px; height: 64px; border-radius: 50%; background: var(--surf); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut .in b { font-family: var(--disp); font-weight: 800; font-size: 19px; line-height: 1; }
.donut .in span { font-size: 9px; color: var(--dim-2); margin-top: 2px; }
.mbars { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.mbar .top { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-bottom: 4px; }
.mbar .top b { color: var(--text); font-family: var(--disp); }
.mbar .bar { height: 7px; border-radius: 5px; background: var(--track); overflow: hidden; }
.mbar .bar i { display: block; height: 100%; border-radius: 5px; }
/* Sugar tracking Phase 4: the "of which sugar" awareness sub-line under the Carbs bar. Pulled up
   snug beneath its parent bar (undercutting the .mbars gap) and set quiet — it informs, never scolds. */
.mbar-sub { margin-top: -4px; font-size: 10px; color: var(--dim-2); line-height: 1.3; padding-left: 1px; }
.mbar-sub b { color: var(--dim); font-family: var(--disp); font-variant-numeric: tabular-nums; font-weight: 700; }
.mbar-sub .sug-add { color: var(--dim-2); }
.mbar-sub .sug-flag { color: color-mix(in oklab, var(--heat-2) 70%, var(--dim-2)); }
.gro-cat { font-family: var(--sans); font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); margin: 8px 2px 5px; }
.gro { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 8px 0; color: var(--dim); border-bottom: 1px solid var(--line-2); }
.gro .gd { width: 7px; height: 7px; border-radius: 50%; background: var(--c-nutri); flex-shrink: 0; }
.gro b { margin-left: auto; font-family: var(--disp); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* interactive grocery rows (Phase 13): tap to check off, line-through when done */
.gro-toggle { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 12.5px; padding: 8px 0; color: var(--dim); background: none; border: none; border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer; }
.gro-toggle .gd { width: 7px; height: 7px; border-radius: 50%; background: var(--c-nutri); flex-shrink: 0; }
.gro-toggle .gn { flex: 1; min-width: 0; }
.gro-toggle b { margin-left: auto; font-family: var(--disp); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gro-toggle.on { opacity: .5; text-decoration: line-through; }
.gro-toggle.on .gd { background: var(--dim-2); }
.gro-row { display: flex; align-items: center; border-bottom: 1px solid var(--line-2); }
.gro-row .gro-toggle { border-bottom: none; flex: 1; min-width: 0; }
.gro-rm { background: none; border: none; color: var(--dim-2); cursor: pointer; padding: 4px 6px; flex-shrink: 0; display: inline-flex; }
.gro-add { display: flex; gap: 8px; margin-top: 10px; }

/* forms (recipe / fields) */
.field { display: block; margin-top: 10px; }
.field > span { display: block; font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim-2); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-family: var(--disp); font-weight: 600; font-size: 14px; color: var(--text); outline: none; }
.field input:focus, .field textarea:focus { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); }
.segfield { margin-top: 12px; }
.segrow { display: flex; gap: 5px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.segrow button { flex: 1; border: none; background: none; font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--dim); padding: 8px 6px; border-radius: 9px; }
.segrow button.on { background: var(--accent); color: var(--on-action); }
/* compact reps/time toggle on an exercise card */
.seg-mini { display: inline-flex; gap: 2px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 9px; padding: 2px; flex: none; }
.seg-mini button { border: none; background: none; font-family: var(--disp); font-weight: 700; font-size: 10.5px; letter-spacing: .02em; color: var(--dim); padding: 4px 9px; border-radius: 7px; cursor: pointer; }
.seg-mini button.on { background: var(--accent); color: var(--on-action); }
.ar-ing { display: flex; gap: 6px; margin-bottom: 7px; align-items: stretch; }
.ar-ing input.grow { flex: 1; min-width: 0; }
.ar-ing input.qty { width: 48px; flex: 0 0 auto; padding: 9px 7px; text-align: center; }
.ar-ing input { background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--disp); font-weight: 600; font-size: 13px; color: var(--text); outline: none; }
.ar-unit { flex: 0 0 auto; width: 62px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 10px; padding: 9px 4px; font-family: var(--disp); font-weight: 600; font-size: 12.5px; color: var(--text); outline: none; }
.ar-rm { width: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surf-2); color: var(--dim-2); display: flex; align-items: center; justify-content: center; }
.ar-rm svg { width: 15px; height: 15px; }
/* per-ingredient label scan: the readout + its correctable multiplier, tucked under its row */
.ar-ing-scan { display: flex; flex-direction: column; gap: 3px; margin: -3px 0 9px; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--c-nutri) 8%, var(--surf-2)); border: 1px solid color-mix(in oklab, var(--c-nutri) 22%, var(--line)); }
.ar-ing-scan.warn { background: color-mix(in oklab, var(--heat-2) 8%, var(--surf-2)); border-color: color-mix(in oklab, var(--heat-2) 30%, var(--line)); }
.ar-ing-scan.err { background: color-mix(in oklab, var(--heat) 8%, var(--surf-2)); border-color: color-mix(in oklab, var(--heat) 28%, var(--line)); }
.ar-ing-scan-t { font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.ar-ing-scan-t svg { width: 13px; height: 13px; flex: 0 0 auto; }
.ar-ing-scan-m { font-size: 10.5px; color: var(--dim); }
.ar-ing-scan-m svg { width: 12px; height: 12px; vertical-align: -2px; }
.ar-ing-scan-x { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.ar-ing-scan-x label { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim-2); }
.ar-ing-scan-x input { width: 56px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; text-align: center; font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--text); outline: none; }
/* batch recipes: "Makes N servings" + the derived per-serving readout */
.ar-serv { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 12px; border-radius: 12px; background: var(--surf-2); border: 1px solid var(--line); }
.ar-serv-l b { display: block; font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--text); }
.ar-serv-l span { display: block; font-size: 10px; color: var(--dim-2); margin-top: 1px; }
.ar-serv-step { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ar-serv-step button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surf); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ar-serv-step button svg { width: 14px; height: 14px; }
.ar-serv-step button:disabled { opacity: .35; cursor: default; }
.ar-serv-step b { min-width: 26px; text-align: center; font-family: var(--disp); font-weight: 800; font-size: 17px; }
.ar-per-serv { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 10px 11px; border-radius: 11px; background: color-mix(in oklab, var(--accent) 9%, var(--surf-2)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line)); }
.ar-per-serv .t { font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--accent); }
.ar-per-serv .m { font-size: 11.5px; color: var(--text); }
.ar-per-serv .n { font-size: 10px; color: var(--dim-2); }
/* recipe detail: per-serving note + the log-servings stepper */
.rd-perserv { font-size: 10.5px; color: var(--dim-2); margin: 6px 0 0; }
.rd-log { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surf-2); border: 1px solid var(--line); }
.rd-log-step { display: inline-flex; align-items: center; gap: 6px; }
.rd-log-step button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surf); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rd-log-step button svg { width: 14px; height: 14px; }
.rd-log-step button:disabled { opacity: .35; cursor: default; }
.rd-log-n { min-width: 62px; text-align: center; }
.rd-log-n b { display: block; font-family: var(--disp); font-weight: 800; font-size: 17px; line-height: 1.1; }
.rd-log-n span { font-size: 9.5px; color: var(--dim-2); }
.rd-log-tot { font-size: 11px; color: var(--dim); text-align: right; }
/* the scanned-vs-estimated tally above the macro fields */
.ar-scan-sum { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; padding: 10px 11px; border-radius: 11px; background: color-mix(in oklab, var(--c-nutri) 9%, var(--surf-2)); border: 1px solid color-mix(in oklab, var(--c-nutri) 24%, var(--line)); }
.ar-scan-sum-t { font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--c-nutri); }
.ar-scan-sum-m { font-size: 11.5px; color: var(--text); }
.ar-scan-sum-n { font-size: 10px; color: var(--dim-2); }
.ar-ai { margin: 14px 0; background: color-mix(in oklab, var(--c-strength) 7%, var(--surf-2)); border: 1px solid color-mix(in oklab, var(--c-strength) 22%, var(--line)); border-radius: 15px; padding: 13px; }
.ar-ai-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid color-mix(in oklab, var(--c-strength) 40%, var(--line)); background: color-mix(in oklab, var(--c-strength) 18%, var(--surf)); color: var(--c-strength); font-family: var(--disp); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.ar-ai-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }   /* keep the spark icon small (unsized svg would balloon under svg{max-width:100%}) */
.ar-ai-btn:disabled { opacity: .5; }
.ar-ai-btn.busy { opacity: .8; }
/* manual macro inputs in the recipe sheet */
.ar-macs { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-mac { flex: 1 1 56px; display: flex; flex-direction: column; gap: 3px; }
.ar-mac span { font-size: 10px; color: var(--dim); }
.ar-mac input { width: 100%; box-sizing: border-box; text-align: center; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 9px; padding: 9px 6px; font-family: var(--disp); font-weight: 700; font-size: 14px; color: var(--text); outline: none; }
.ar-mac small { font-size: 9px; color: var(--dim-2); text-align: center; }
.ar-ai-row { margin-top: 10px; }
.ar-err-line { font-size: 12px; color: var(--heat); margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }
.ar-err-line svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* recipe-library group labels */
.rl-grouplab { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-2); margin: 12px 2px 6px; }
.ar-ai-off .l { display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--dim); }
.ar-ai-off .l svg { width: 16px; height: 16px; }
.ar-est { margin-top: 12px; }
.ar-est-macros { display: flex; gap: 10px; }
.ar-est-macros > div { flex: 1; text-align: center; background: var(--surf-2); border-radius: 10px; padding: 8px 4px; }
.ar-est-macros b { font-family: var(--disp); font-weight: 800; font-size: 16px; display: block; }
.ar-est-macros span { font-size: 9px; color: var(--dim-2); }
.ar-conf { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 11px; color: var(--dim); }
.ar-conf .bar { flex: 1; height: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
.ar-conf .bar i { display: block; height: 100%; }
.ar-caution { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--heat-2); }
.ar-err { display: flex; align-items: center; gap: 9px; margin-top: 10px; background: color-mix(in oklab, var(--heat) 10%, var(--surf)); border: 1px solid color-mix(in oklab, var(--heat) 30%, var(--line)); border-radius: 11px; padding: 10px; }
.ar-err svg { color: var(--heat); width: 16px; height: 16px; flex-shrink: 0; }
.ar-err b { font-family: var(--disp); font-weight: 700; font-size: 12.5px; display: block; }
.ar-err span { font-size: 10.5px; color: var(--dim); }
.ar-retry { margin-left: auto; background: var(--surf-3); border: none; border-radius: 8px; color: var(--text); font-weight: 700; font-size: 11px; padding: 6px 11px; }
.ar-note { font-size: 10px; color: var(--dim-2); margin-top: 9px; }
.ar-import { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ar-import-err { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--heat); }
.ar-import-err svg { width: 13px; height: 13px; }

/* offline / sync banner */
.banner { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 11.5px; font-weight: 600; }
.banner.offline { background: color-mix(in oklab, var(--dim-2) 14%, var(--surf)); color: var(--dim); }
.banner.failed { background: color-mix(in oklab, var(--heat) 14%, var(--surf)); color: var(--heat); }
.banner svg { width: 15px; height: 15px; }
.banner .retry { margin-left: auto; background: transparent; border: 1px solid currentColor; border-radius: 7px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; color: inherit; }

/* ---- Body ---- */
.bigcard { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 15px; margin-top: 13px; }
.bigcard .top { display: flex; justify-content: space-between; align-items: flex-start; }
.bigcard .lab { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); }
.bigcard .num { font-family: var(--disp); font-weight: 800; font-size: 32px; margin-top: 2px; }
.bigcard .num .u { font-size: 14px; color: var(--dim-2); }
.delta { font-family: var(--sans); font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 8px; }
.delta.down { background: color-mix(in oklab, var(--accent) 16%, var(--surf)); color: var(--accent); }
.delta.up { background: color-mix(in oklab, var(--heat) 16%, var(--surf)); color: var(--heat); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.meas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; }
.stat .lab { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); }
.stat .big { font-family: var(--disp); font-weight: 800; font-size: 23px; margin-top: 3px; }
.stat .big .u { font-size: 11px; color: var(--dim-2); }
.stat .tr { font-size: 10px; margin-top: 2px; }
.recomp { display: flex; gap: 11px; align-items: flex-start; background: linear-gradient(150deg, color-mix(in oklab, var(--c-body) 22%, var(--surf)), var(--surf)); border: 1px solid color-mix(in oklab, var(--c-body) 40%, var(--line)); border-radius: 16px; padding: 13px; margin-top: 10px; }
.recomp .ri { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--c-body) 30%, var(--surf)); color: var(--c-body); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recomp .ri svg { width: 18px; height: 18px; }
.recomp p { font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.recomp b { color: var(--text); }
.photo-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.photo-slot { aspect-ratio: 3/4; border: 1px dashed var(--line); border-radius: 13px; background: var(--surf-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dim-2); font-size: 10px; font-weight: 600; }
.photo-slot svg { width: 18px; height: 18px; }
button.photo-slot { cursor: pointer; font-family: inherit; position: relative; padding: 0; }
.photo-slot.has-photo { border-style: solid; background-size: cover; background-position: center; }
.photo-slot .photo-rm { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in oklab, var(--bg) 70%, transparent); color: #fff; display: flex; align-items: center; justify-content: center; }
.photo-slot .photo-rm svg { width: 13px; height: 13px; }

/* Dated progress-photo timeline + compare (Body R2 Phase 7). Angle picker, a horizontal strip of
   dated thumbnails (newest-first) with an add tile, and a two-up before/after compare card. */
.ptl-angles { margin: 4px 0 12px; }
.ptl-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; }
.ptl-item { position: relative; flex: 0 0 auto; width: 96px; }
.ptl-thumb { width: 96px; aspect-ratio: 3/4; border: 1px solid var(--line); border-radius: 12px; background: var(--surf-2); background-size: cover; background-position: center; cursor: pointer; padding: 0; position: relative; display: block; }
.ptl-item.sel .ptl-thumb { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent); }
.ptl-badge { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--accent); color: var(--on-action); font-family: var(--disp); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ptl-rm { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 50%; background: color-mix(in oklab, var(--bg) 70%, transparent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ptl-rm svg { width: 13px; height: 13px; }
.ptl-date { margin-top: 5px; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.ptl-add .ptl-addbtn { border-style: dashed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--dim-2); font-size: 10px; font-weight: 700; }
.ptl-add .ptl-addbtn svg { width: 18px; height: 18px; }
.ptl-dateinput { width: 96px; margin-top: 5px; }
.ptl-empty, .ptl-hint { align-self: center; font-size: 12px; color: var(--dim-2); padding: 10px 4px; }
.ptl-compare { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--surf); }
.ptl-cmp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptl-cmp-col { display: flex; flex-direction: column; gap: 6px; }
.ptl-cmp-img { aspect-ratio: 3/4; border-radius: 10px; background: var(--surf-2); background-size: cover; background-position: center; }
.ptl-cmp-date { text-align: center; font-size: 11px; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; }
.ptl-cmp-meta { margin-top: 10px; text-align: center; font-size: 12px; color: var(--dim); }
.ptl-cmp-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Insights ---- */
.panel { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-top: 12px; }
.panel h4 { font-family: var(--disp); font-weight: 800; font-size: 15px; }
.panel .psub { font-size: 10.5px; color: var(--dim-2); margin: 2px 0 8px; }
.pr-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--line); }
.pr-row .ic { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--c-strength) 18%, var(--surf)); color: var(--c-strength); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pr-row .ic svg { width: 16px; height: 16px; }
.pr-row .nm { font-family: var(--disp); font-weight: 700; font-size: 12.5px; }
.pr-row .sub { font-size: 10px; color: var(--dim); }
.pr-row .v { margin-left: auto; font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---- Journal ---- */
.histrow { display: flex; align-items: center; gap: 11px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; width: 100%; text-align: left; }
.histrow .tag { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.histrow .tag svg { width: 17px; height: 17px; }
.histrow .hx { min-width: 0; }
.histrow .nm { font-family: var(--disp); font-weight: 700; font-size: 13px; }
.histrow .sub { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.histrow .end { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rpe-chip { font-size: 9px; font-weight: 700; color: var(--dim); background: var(--surf-3); padding: 4px 7px; border-radius: 7px; }
.sd-stats { display: flex; gap: 8px; }
.sd-stats .minicard { flex: 1; }
.sd-ex { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sd-ex b { font-family: var(--disp); font-weight: 700; font-size: 13px; display: block; }
.sd-ex span { font-size: 10.5px; color: var(--dim); }

/* ---- stepper (body log) ---- */
.stepper { display: flex; align-items: center; gap: 8px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 12px; padding: 5px; }
.stepper.sm { padding: 3px; }
.stepper button { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--surf-3); color: var(--text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stepper.sm button { width: 30px; height: 30px; }
.stepper .val { flex: 1; text-align: center; font-family: var(--disp); font-weight: 800; font-size: 18px; }
.stepper .val span { font-size: 11px; color: var(--dim-2); font-weight: 600; margin-left: 2px; }
.bl-hint { text-align: center; font-size: 11px; color: var(--dim-2); margin-top: 12px; font-weight: 600; }
.bl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 10px 14px; }
.bl-row > span { font-family: var(--disp); font-weight: 700; font-size: 14px; }
.bl-row .stepper { width: 150px; }
/* Body-composition scan: the review chips in the log sheet + the tile grid on the Body page. */
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bc-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surf); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.bc-k { font-size: 11.5px; color: var(--dim); }
.bc-v { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.bc-edit { display: inline-flex; align-items: baseline; gap: 3px; min-width: 0; }
.bc-in { width: 4.2em; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--ink); background: transparent; border: none; border-bottom: 1px dashed var(--line-2, var(--line)); border-radius: 0; padding: 1px 2px; font-family: inherit; -moz-appearance: textfield; }
.bc-in:focus { outline: none; border-bottom-color: var(--c-body); }
.bc-u { font-size: 10.5px; font-weight: 600; color: var(--dim-2); }
.bc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bc-tile { background: var(--surf); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: center; }
.bc-t-k { font-size: 10.5px; color: var(--dim); margin-bottom: 3px; }
.bc-t-v { font-size: 15px; font-weight: 800; color: var(--c-body); letter-spacing: -0.01em; }
@media (max-width: 380px) { .bc-tiles { grid-template-columns: 1fr 1fr; } }
.bl-tabs { display: flex; gap: 5px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.bl-tabs button { flex: 1; border: none; background: none; font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--dim); padding: 8px 6px; border-radius: 9px; }
.bl-tabs button.on { background: var(--accent); color: var(--on-action); }

/* ---- Onboarding / Restore (full-screen takeover) ---- */
.ob-root { position: absolute; inset: 0; z-index: 80; background: var(--canvas); color: var(--text); display: flex; align-items: center; justify-content: center; padding: 16px; }
@media (prefers-reduced-motion: no-preference) { .ob-root { animation: scrIn .35s ease; } }
.ob-card { width: 100%; max-width: 420px; height: 100%; max-height: 720px; background: var(--surf); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.ob-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.ob-prog { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 4px; padding: 0; }
.ob-prog .seg { flex: 1; height: 4px; background: var(--track); }
.ob-prog .seg.done { background: var(--accent); }
.ob-prog .seg.cur { background: var(--c-strength); }
.ob-back { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surf-2); color: var(--dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ob-back svg { width: 16px; height: 16px; }
.ob-stepname { flex: 1; font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2); }
.ob-skip { background: none; border: none; color: var(--dim-2); font-family: var(--sans); font-weight: 600; font-size: 11.5px; }
.ob-body { flex: 1; overflow-y: auto; padding: 6px 22px 12px; scrollbar-width: none; }
.ob-body::-webkit-scrollbar { display: none; }
.ob-foot { padding: 14px 22px calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.ob-link { display: block; width: 100%; text-align: center; background: none; border: none; color: var(--dim); font-family: var(--sans); font-weight: 600; font-size: 12.5px; margin-top: 12px; }
.ob-step h2, .ob-welcome h1 { font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em; }
.ob-step h2 { font-size: 24px; margin-top: 6px; }
.ob-lede { font-size: 12.5px; color: var(--dim); margin: 6px 0 14px; line-height: 1.45; }
.ob-welcome { text-align: center; padding-top: 18px; }
.ob-mark { display: flex; justify-content: center; color: var(--accent); margin-bottom: 14px; }
.ob-mark svg { width: 72px; height: auto; }
.ob-welcome h1 { font-size: 34px; margin: 4px 0 8px; }
.ob-welcome p { font-size: 13px; color: var(--dim); line-height: 1.5; }
.ob-bullets { text-align: left; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.ob-bullets > div { display: flex; align-items: center; gap: 11px; }
.ob-bullets .ic { width: 34px; height: 34px; border-radius: 11px; background: var(--surf-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ob-bullets .ic svg { width: 17px; height: 17px; }
.ob-bullets .bt { font-size: 12.5px; font-weight: 600; }
.ob-stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ob-stat-row .field { flex: 1 1 84px; min-width: 0; margin-top: 0; }
/* compact steppers so Age · Height · Weight fit one row on a phone */
.ob-stat-row .stepper { width: 100%; padding: 4px; gap: 2px; min-width: 0; }
.ob-stat-row .stepper button { width: 26px; height: 26px; flex-shrink: 0; }
.ob-stat-row .stepper .val { min-width: 0; font-size: 15px; }
.ob-stat-row .stepper .val span { font-size: 9px; }
.ob-check { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; cursor: pointer; }
.cbox { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--on-action); flex-shrink: 0; }
.cbox svg { width: 12px; height: 12px; }
.cbox.on { background: var(--accent); border-color: var(--accent); }
.ob-check b { font-family: var(--disp); font-weight: 700; font-size: 13.5px; display: block; }
.ob-check em { font-style: normal; font-size: 11px; color: var(--dim); }
.ob-card-pick { display: flex; align-items: center; gap: 13px; background: color-mix(in oklab, var(--bg) 40%, var(--surf)); border: 1px solid var(--line); border-radius: 15px; padding: 13px 14px; width: 100%; text-align: left; margin-bottom: 8px; }
.ob-card-pick.on { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); background: color-mix(in oklab, var(--accent) 10%, var(--surf)); }
.ob-card-pick .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--surf-2); border: 1px solid var(--line); color: var(--c-strength); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ob-card-pick.on .ic { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.ob-card-pick .ic svg { width: 20px; height: 20px; }
.ob-card-pick b { font-family: var(--disp); font-weight: 700; font-size: 15px; display: block; }
.ob-card-pick span.s { font-size: 11.5px; color: var(--dim); }
.ob-card-pick .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); margin-left: auto; flex-shrink: 0; }
.ob-card-pick.on .radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 40%, transparent 46%); }
.ob-preview { margin-top: 16px; background: color-mix(in oklab, var(--accent) 8%, var(--surf)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line)); border-radius: 15px; padding: 14px; }
.ob-macros { display: flex; gap: 8px; margin-top: 8px; }
.ob-macros > div { flex: 1; text-align: center; }
.ob-macros b { font-family: var(--disp); font-weight: 800; font-size: 19px; display: block; }
.ob-macros span { font-size: 9px; color: var(--dim-2); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ob-pill { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 30px; padding: 8px 13px; font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--dim); background: var(--surf-2); }
.ob-pill.on { color: var(--text); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.ob-summary { margin-top: 16px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 15px; padding: 14px; }
.ob-sum-rows > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.ob-sum-rows > div:last-child { border-bottom: none; }
.ob-sum-rows span { color: var(--dim); }
.ob-sum-rows b { font-family: var(--disp); font-weight: 700; }

/* restore */
.rs-prof { display: flex; align-items: center; gap: 13px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; width: 100%; text-align: left; margin-bottom: 9px; }
.rs-prof:hover { border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); }
.rs-av { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 19px; color: var(--bg); flex-shrink: 0; }
.rs-prof b { font-family: var(--disp); font-weight: 800; font-size: 16px; display: block; }
.rs-prof .sub { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.rs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.rs-prof .arr { margin-left: auto; color: var(--dim-2); }
.rs-center { text-align: center; padding-top: 36px; }
.rs-center h2 { font-family: var(--disp); font-weight: 800; font-size: 23px; margin-top: 14px; letter-spacing: -0.02em; }
.rs-seal { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.rs-seal.ok { background: color-mix(in oklab, var(--accent) 18%, var(--surf)); border: 2px solid var(--accent); color: var(--accent); }
.rs-seal.warn { background: color-mix(in oklab, var(--heat) 16%, var(--surf)); border: 2px solid var(--heat); color: var(--heat); }
.rs-seal svg { width: 32px; height: 32px; }
.rs-spin { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--track); border-top-color: var(--accent); margin: 0 auto; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rs-spin { animation: none; border-top-color: var(--accent); } }

/* ---- Settings ---- */
.set-group { margin-top: 16px; }
.set-cap { font-family: var(--sans); font-weight: 700; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim-2); margin: 0 2px 8px; }
.set-card { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: none; }
.set-tx b { font-family: var(--disp); font-weight: 700; font-size: 13.5px; display: block; }
.set-tx span { font-size: 10.5px; color: var(--dim); }
.set-ctrl { flex-shrink: 0; }
.seg-sm { display: inline-flex; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg-sm button { border: none; background: none; font-family: var(--disp); font-weight: 700; font-size: 11px; color: var(--dim); padding: 6px 10px; border-radius: 8px; }
.seg-sm button.on { background: var(--accent); color: var(--on-action); }
.tgl { width: 44px; height: 26px; border-radius: 20px; background: var(--surf-3); border: none; position: relative; transition: background .15s; }
.tgl.on { background: var(--accent); }
.tgl .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); transition: transform .15s; }
.tgl.on .knob { transform: translateX(18px); background: var(--on-action); }
.set-key { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; }
.set-key svg { width: 14px; height: 14px; color: var(--dim-2); }
.set-key input { flex: 1; min-width: 0; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--mono, monospace); font-size: 12px; color: var(--text); outline: none; }
.set-key-eye { flex: 0 0 auto; cursor: pointer; background: var(--surf-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font-family: var(--sans); font-weight: 600; font-size: 11px; color: var(--dim); }
.set-key-eye:hover { color: var(--text); border-color: var(--dim-2); }
.set-key-status { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dim-2); margin: 6px 14px 0; }
.set-key-status.ok { color: var(--accent); }
.set-key-status svg { width: 13px; height: 13px; flex: 0 0 auto; }
.set-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; width: 100%; text-align: left; border-top: 1px solid var(--line); background: none; }
.set-action svg { width: 16px; height: 16px; color: var(--dim-2); }
.set-retry { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--heat); color: var(--heat); border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 700; }
.set-retry svg { width: 13px; height: 13px; }
.set-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent); }
.set-stat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.set-stat.off { color: var(--dim); }
.set-stat.off .dot { background: var(--dim-2); }

/* ---- empty / first-run states ---- */
.empty { text-align: center; padding: 34px 18px 20px; }
.empty .ico { width: 56px; height: 56px; border-radius: 17px; background: var(--surf-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--dim-2); }
.empty .ico svg { width: 24px; height: 24px; }
.empty h3 { font-family: var(--disp); font-weight: 800; font-size: 17px; }
.empty p { font-size: 12.5px; color: var(--dim); margin: 6px auto 16px; max-width: 30ch; line-height: 1.45; }
.empty .acts { display: flex; flex-direction: column; gap: 8px; max-width: 260px; margin: 0 auto; }

/* visually-hidden (screen-reader only) */
.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; }

/* ---- exercise detail ---- */
.ex-prog { display: flex; align-items: center; justify-content: space-between; background: color-mix(in oklab, var(--accent) 8%, var(--surf)); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ex-prog-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--disp); font-weight: 800; font-size: 16px; color: var(--accent); margin-top: 3px; }
.ex-prog-state svg { width: 16px; height: 16px; }
.ex-asym { display: flex; gap: 11px; align-items: center; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-top: 9px; }
.ex-asym .ci { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ex-asym .ci svg { width: 16px; height: 16px; }
.ex-asym p { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.ex-types { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-type { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 30px; padding: 7px 12px; font-family: var(--disp); font-weight: 700; font-size: 11.5px; color: var(--dim); background: var(--surf-2); }
.ex-type .dot { width: 8px; height: 8px; border-radius: 50%; }
.ex-hist { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.ex-hist:last-of-type { border-bottom: none; }
.ex-hist .d { font-family: var(--disp); font-weight: 700; font-size: 12px; width: 48px; flex-shrink: 0; color: var(--dim-2); }
.ex-hist .s b { font-family: var(--disp); font-weight: 800; font-size: 14px; }
.ex-hist .s span { font-size: 10px; color: var(--dim); margin-left: 6px; }
.ex-hist .end2 { margin-left: auto; }
.ex-note { width: 100%; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-family: var(--sans); font-size: 12.5px; color: var(--text); outline: none; resize: vertical; }

/* ---- exercise library ---- */
.lib-search { display: flex; align-items: center; gap: 8px; background: color-mix(in oklab, var(--bg) 45%, var(--surf)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 9px; }
.lib-search svg { width: 16px; height: 16px; color: var(--dim-2); }
.lib-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 13px; font-family: var(--sans); }
.lib-new { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 11px; border: 1px dashed var(--line); border-radius: 12px; color: var(--accent); font-family: var(--disp); font-weight: 700; font-size: 12.5px; background: none; margin-bottom: 10px; }
.lib-row { display: flex; align-items: center; gap: 11px; background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px; margin-bottom: 7px; width: 100%; text-align: left; }
.lib-row .tag { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lib-row .tag svg { width: 17px; height: 17px; }
.lib-row .nm { font-family: var(--disp); font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.lib-row .sub { font-size: 10px; color: var(--dim); }
.lib-row .add { margin-left: auto; color: var(--accent); }
.lib-badge { font-size: 8px; font-weight: 800; letter-spacing: .05em; color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, var(--surf)); padding: 2px 5px; border-radius: 5px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.gchip { border: 1px solid var(--line); border-radius: 30px; padding: 7px 12px; font-family: var(--disp); font-weight: 700; font-size: 11.5px; color: var(--dim); background: var(--surf-2); display: inline-flex; align-items: center; gap: 6px; }
.gchip svg { width: 14px; height: 14px; flex: 0 0 auto; }  /* keep any icon inside a chip from ballooning (global svg is max-width:100%) */
.gchip.on { background: var(--accent); color: var(--on-action); border-color: var(--accent); }

/* Suggested goals — collapsed-by-default disclosure (Mind + Fuel) */
.suggest { margin: 8px 0 0; }
.suggest-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--dim); }
.suggest-head:hover { border-color: var(--dim-2); color: var(--text); }
.suggest-head .suggest-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--dim-2); font-family: var(--sans); font-weight: 600; font-size: 11px; }
.suggest-head .suggest-meta svg { width: 14px; height: 14px; transition: transform .18s ease; }
.suggest-head.open .suggest-meta svg { transform: rotate(180deg); }
.suggest-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--surf); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.suggest-row:hover { border-color: var(--dim-2); }
.suggest-name { min-width: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--text); }
.suggest-cad { font-family: var(--sans); font-weight: 600; font-size: 10.5px; color: var(--dim-2); white-space: nowrap; }
.suggest-add { flex: 0 0 auto; font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, var(--surf)); border-radius: 20px; padding: 5px 12px; }

/* ---- conditioning ---- */
.cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cond-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px 9px 10px; font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--dim); background: color-mix(in oklab, var(--bg) 40%, var(--surf)); text-align: left; }
.cond-chip.on { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); color: var(--text); background: var(--surf); }
.cond-chip .ci { color: var(--dim-2); display: flex; }
.cond-chip .ci svg { width: 16px; height: 16px; }
.cond-load { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--dim); }
.cond-load .dot { width: 9px; height: 9px; border-radius: 50%; }

/* ---- reschedule ---- */
.rs-days { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.rs-day { border: 1px solid var(--line); border-radius: 12px; padding: 11px 8px; background: var(--surf-2); text-align: center; }
.rs-day b { font-family: var(--disp); font-weight: 800; font-size: 14px; display: block; }
.rs-day span { font-size: 9px; color: var(--dim); }
.qa { display: flex; align-items: center; gap: 11px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; margin-bottom: 8px; width: 100%; text-align: left; }
.qa .qi { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qa .qi svg { width: 18px; height: 18px; }
.qa .qt b { font-family: var(--disp); font-weight: 700; font-size: 13.5px; display: block; }
.qa .qt span { font-size: 10.5px; color: var(--dim); }
.qa .qarr { margin-left: auto; color: var(--dim-2); }
.qa .qarr svg { width: 16px; height: 16px; }

/* ---- baseline ---- */
.bl-test { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-bottom: 8px; }
.bl-id { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.bl-id .tag { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bl-id .tag svg { width: 16px; height: 16px; }
.bl-id .nm { font-family: var(--disp); font-weight: 700; font-size: 14px; }
.bl-id .sub { font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.bl-ctrl { display: flex; align-items: center; gap: 11px; }
.bl-ctrl .stepper { flex: 1; }
.bl-prev { font-family: var(--sans); font-weight: 600; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim-2); text-align: center; flex-shrink: 0; }
.bl-prev b { display: block; font-family: var(--disp); font-weight: 700; font-size: 13px; color: var(--dim); letter-spacing: 0; text-transform: none; margin-top: 2px; }
.bl-delta { font-family: var(--disp); font-weight: 800; font-size: 15px; width: 38px; text-align: center; flex-shrink: 0; }
.bl-delta.up { color: var(--accent); }
.bl-delta.down { color: var(--heat); }
.bl-delta.flat { color: var(--dim-2); }
.bl-banner { display: flex; align-items: center; justify-content: space-between; background: color-mix(in oklab, var(--accent) 10%, var(--surf)); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); border-radius: 14px; padding: 12px 14px; margin-top: 10px; color: var(--accent); }
.bl-banner b { font-family: var(--disp); font-weight: 800; font-size: 20px; }
.bl-banner span { font-size: 11px; color: var(--dim); margin-left: 7px; }

/* ---- recipe detail ---- */
.rd-macros { display: flex; align-items: center; gap: 16px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px; margin-bottom: 6px; }
.rd-kcal { text-align: center; flex-shrink: 0; padding-right: 16px; border-right: 1px solid var(--line); }
.rd-kcal b { font-family: var(--disp); font-weight: 800; font-size: 26px; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.rd-kcal span { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); font-weight: 600; }
.rd-bars { flex: 1; display: flex; justify-content: space-between; }
.rd-mac { text-align: center; }
.rd-mac .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-bottom: 4px; }
.rd-mac b { font-family: var(--disp); font-weight: 800; font-size: 15px; display: block; font-variant-numeric: tabular-nums; }
.rd-mac span { display: block; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim-2); font-weight: 600; }
.rd-steps { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rd-steps li { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.rd-steps .n { width: 22px; height: 22px; border-radius: 7px; background: color-mix(in oklab, var(--c-nutri) 18%, var(--surf)); color: var(--c-nutri); display: flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 800; font-size: 11px; flex-shrink: 0; }
.rd-source { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--dim-2); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.rd-source svg { width: 14px; height: 14px; flex: 0 0 auto; }   /* unsized svg would balloon under svg{max-width:100%} */

/* ---- meal planner ---- */
.plan-day { background: var(--surf); border: 1px solid var(--line); border-radius: 15px; padding: 12px; margin-bottom: 9px; }
.plan-day .ph { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.plan-day .ph b { font-family: var(--disp); font-weight: 800; font-size: 14px; }
.plan-day .ph span { font-size: 10px; color: var(--dim-2); }
.plan-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.plan-slot { border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; background: var(--surf-2); text-align: left; min-height: 50px; }
.plan-slot.empty { border-style: dashed; color: var(--dim-2); display: flex; align-items: center; gap: 6px; }
.plan-slot .sl { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); }
.plan-slot .rn { font-family: var(--disp); font-weight: 700; font-size: 11.5px; margin-top: 2px; }

/* ---- archive ---- */
.arc-summary { display: flex; gap: 9px; align-items: flex-start; background: color-mix(in oklab, var(--c-body) 9%, var(--surf)); border: 1px solid color-mix(in oklab, var(--c-body) 26%, var(--line)); border-radius: 13px; padding: 12px; margin-top: 12px; }
.arc-summary .ri { color: var(--c-body); flex-shrink: 0; }
.arc-summary svg { width: 17px; height: 17px; }
.arc-summary p { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
.arc-summary b { color: var(--text); }

/* simple placeholder for not-yet-built screens */
.soon { margin-top: 22px; padding: 22px; border: 1px dashed var(--line); border-radius: 16px; color: var(--dim); font-size: 13px; text-align: center; }

/* dev-only verification dock (Phase 0 scaffold; removed once real nav lands) */
.devdock {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 14px;
  background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  z-index: 50;
}
.devdock .seg { display: inline-flex; background: var(--surf-2); border: 1px solid var(--line); border-radius: 30px; padding: 3px; }
.devdock .seg button { font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--dim); padding: 6px 12px; border-radius: 30px; min-height: 0; }
.devdock .seg button.on { background: var(--surf-3); color: var(--text); }
.devdock .lbl { font-family: var(--sans); font-weight: 600; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-2); }

/* ---- manual workout scheduler (Train) ---- */
.train-weeknav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 10px; }
.train-weeklabel { font-family: var(--disp); font-weight: 800; font-size: 14px; color: var(--ink); }
.train-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.train-day { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surf); cursor: pointer; min-height: 74px; }
.train-day.today { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
.train-day.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.train-day .td-dl { font-family: var(--disp); font-weight: 700; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.train-day .td-dn { font-family: var(--disp); font-weight: 800; font-size: 16px; color: var(--ink); }
.td-dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 8px; }
.td-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim-2); }
.td-dot.empty { background: var(--surf-3); }
.td-dot.done { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent); }

/* Week/Month toggle (segmented control) */
.train-toggle { display: inline-flex; gap: 2px; padding: 3px; margin: 12px 0 2px; background: var(--surf-3); border-radius: 11px; }
.train-toggle .seg { font: 600 12px var(--disp); padding: 6px 16px; border: none; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; }
.train-toggle .seg.on { background: var(--surf); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Read-only month overview */
.train-monthdow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 2px; }
.train-monthdow .tm-dow { text-align: center; font: 700 10px var(--disp); color: var(--dim-2); text-transform: uppercase; letter-spacing: .04em; }
.train-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.tm-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surf); cursor: pointer; min-height: 46px; }
.tm-cell.out { opacity: .4; }
.tm-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tm-cell .tm-dn { font: 700 13px var(--disp); color: var(--ink); }
.tm-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; min-height: 6px; }
.tm-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dim-2); }
.tm-dot.empty { background: var(--surf-3); }
.tm-dot.done { box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); }
.tm-more { font: 700 8px var(--disp); color: var(--dim-2); line-height: 5px; }

/* Day-drawer recurrence authoring (Phase 6) */
.recur-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.recur-toggle { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--disp); padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surf); color: var(--dim); cursor: pointer; }
.recur-toggle.on { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surf)); }
.recur-toggle svg { width: 14px; height: 14px; }
.wd-row { display: flex; gap: 5px; margin-top: 9px; }
.wd-chip { flex: 1; font: 700 12px var(--disp); padding: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surf); color: var(--dim); cursor: pointer; }
.wd-chip.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* Mind page responsive composition (Mind v9 Phase 8): full-width Today card, then a
   journal-left / habits-right two-column split that collapses to one column on phones. */
.mind-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.mind-col { min-width: 0; }
/* collapsed journal preview + editable reflection rows */
/* in-the-moment stress shortcut + featured (Wim Hof) breath row */
.stress-now { width: 100%; display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 11px 14px; background: color-mix(in oklab, var(--heat) 12%, var(--surf)); border: 1px solid color-mix(in oklab, var(--heat) 30%, var(--line)); border-radius: 12px; cursor: pointer; text-align: left; }
.stress-now:hover { border-color: var(--heat); }
.stress-now .nm { font-family: var(--disp); font-weight: 700; font-size: 13.5px; color: var(--text); }
.stress-now .sub { font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.stress-now .end { margin-left: auto; color: var(--heat); display: inline-flex; }
.stress-now .end svg { width: 16px; height: 16px; }
.listrow.listrow-feat { border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line)); background: color-mix(in oklab, var(--accent) 6%, var(--surf)); }
/* Today pillar completion: obvious filled chips (was a dim inline ✓ that blended in) */
.listrow.listrow-done { border-color: color-mix(in oklab, var(--accent) 38%, var(--line)); background: color-mix(in oklab, var(--accent) 5%, var(--surf)); }
.tickchip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-weight: 700; font-size: 10.5px; padding: 2px 9px; border-radius: 999px; background: var(--surf-3); color: var(--dim-2); border: 1px solid var(--line); }
.tickchip.on { background: color-mix(in oklab, var(--accent) 22%, var(--surf)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 42%, var(--line)); padding-left: 6px; }
.tickchip svg { width: 12px; height: 12px; }
.journal-preview { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 14px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: left; }
.journal-preview:hover { border-color: var(--dim-2); }
.journal-preview .jp-body { flex: 1; min-width: 0; }
.journal-preview .jp-line { font-size: 13.5px; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal-preview .jp-sub { font-size: 10.5px; color: var(--dim-2); margin-top: 2px; }
.journal-preview .jp-edit { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--accent); }
.journal-preview .jp-edit svg { width: 16px; height: 16px; }
.jr-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 2px; border: none; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.jr-row:hover .jr-snip { color: var(--text); }
.jr-row .jr-snip { font-size: 12.5px; color: var(--ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-row .jr-edit { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--dim-2); }
.jr-row .jr-edit svg { width: 15px; height: 15px; }
.jr-row:hover .jr-edit { color: var(--accent); }
@media (min-width: 860px) {
  .mind-grid { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
}

/* One responsive live-workout screen (Live Workout rework Phase 3): the same screenWorkout for all
   widths (deskWorkout retired). On desktop the scroll content + the sticky action bar center at a
   comfortable reading width instead of stretching the full viewport. */
@media (min-width: 1024px) {
  .wo-screen .app-col { max-width: 840px; margin-inline: auto; width: 100%; }
}

/* One responsive Body page (Body redesign Phase 2): weight glance + goal, then a
   composition/measurements | photos split that collapses to one column on phones. */
.body-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.body-col { min-width: 0; }
@media (min-width: 860px) {
  .body-screen { max-width: 1040px; }
  .body-grid { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
}

/* One responsive Insights hub (Body/Insights redesign Phase 3): the same screenInsights for all
   widths (deskInsights retired), centered at a comfortable reading width on desktop. */
@media (min-width: 860px) { .insights-screen { max-width: 900px; } }

/* Settings (Body/Insights/Settings redesign Phase 4): a centered column that widens on
   desktop/tablet instead of staying one narrow strip. */
.set-screen { max-width: 560px; margin: 0 auto; }
@media (min-width: 900px) { .set-screen { max-width: 760px; } }

/* Training log (Check-in/Training-log rework Phase 6): one responsive log that widens on
   desktop/tablet instead of a single 540px column. */
.log-screen { max-width: 540px; margin: 0 auto; }
@media (min-width: 900px) { .log-screen { max-width: 760px; } }

/* Fuel page responsive composition (Fuel v10 Phase 7): full-width macro hero, then a
   meals-left / targets+habits+grocery-right split that collapses to one column on phones.
   The .fuel-screen wrapper widens on desktop so the two columns have room to breathe. */
.fuel-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.fuel-col { min-width: 0; }
@media (min-width: 860px) {
  .fuel-screen { max-width: 1080px; }
  .fuel-grid { grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
}

/* One responsive Today (Today rebuild Phase 3, bento refresh): the same screenToday for all widths.
   Phones = a single stacked column. Desktop = a bento dashboard: hero full-width, then a MAIN
   column (catch-up, on-deck, and the pillar glances laid out 2-up) beside a sticky COACH RAIL, so
   the width is filled instead of leaving an empty on-deck column when there's nothing on deck. */
.today-dash { display: grid; grid-template-columns: 1fr; gap: 0; }
.today-main { min-width: 0; }
.today-rail { min-width: 0; }
/* the pillar glances (Fuel / Mind / Habits / Readiness / Body) — one column on phones, 2-up on
   desktop. Cards carry their own top margins for the stacked layout; neutralise them in the grid. */
.glance-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.glance-grid > * { margin-top: 0 !important; }
@media (min-width: 860px) {
  .today-screen { max-width: 1080px; }
  .today-dash { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
  .today-rail { position: sticky; top: 18px; }
  .glance-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* Today habits block (Today Habits + Goals rework Phase 1): the STAR of Today — a distinct
   accent-bordered card (not a plain listrow) with a progress ring, best-streak, and a tap
   circle per cadence goal. Deliberately louder than the pillar glances so habits "pop". */
.today-habits { margin-top: 16px; background: color-mix(in oklab, var(--accent) 5%, var(--surf)); border: 1.5px solid color-mix(in oklab, var(--accent) 32%, var(--line)); border-radius: 18px; padding: 15px 15px 13px; }
.today-habits .th-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.today-habits .th-head-tx { min-width: 0; flex: 1; }
.today-habits .th-title { font-family: var(--disp); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.today-habits .th-meta { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.today-habits .th-streak { font-weight: 700; color: var(--heat-2); }
.today-habits .th-ring { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.today-habits .th-ring-in { width: 40px; height: 40px; border-radius: 50%; background: var(--surf); display: flex; align-items: center; justify-content: center; }
.today-habits .th-ring-in b { font-family: var(--disp); font-weight: 800; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
.today-habits .th-ring-in i { font-size: 10px; color: var(--dim-2); font-style: normal; }
/* Collapse-when-done (Phase 8): once every habit is ticked the block folds to a single celebratory
   row (ring + "All done today 🎉 · streak"); tap to expand the full list. */
.today-habits.th-collapsed { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; }
.today-habits.th-collapsed .th-head-tx { flex: 1; min-width: 0; }
.today-habits.th-collapsed .th-collapse-ar { margin-left: auto; color: var(--dim-2); font-size: 13px; flex-shrink: 0; }
.today-habits .th-collapse-btn { background: none; border: 0; color: var(--dim-2); font-size: 13px; line-height: 1; padding: 2px 6px; cursor: pointer; flex-shrink: 0; }
.today-habits .th-rows { display: flex; flex-direction: column; gap: 7px; }
.today-habits .th-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px; transition: .15s; }
.today-habits .th-row:active { transform: scale(0.99); }
.today-habits .th-row.on { background: color-mix(in oklab, var(--accent) 8%, var(--surf)); border-color: color-mix(in oklab, var(--accent) 32%, var(--line)); }
.today-habits .th-check { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surf-3); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--pill, var(--accent)) 45%, var(--line)); color: var(--pill, var(--accent)); }
.today-habits .th-row.on .th-check { background: var(--pill, var(--accent)); box-shadow: none; color: #fff; }
.today-habits .th-check svg { width: 16px; height: 16px; }
.today-habits .th-txt { min-width: 0; flex: 1; }
.today-habits .th-name { display: block; font-family: var(--disp); font-weight: 700; font-size: 13.5px; }
.today-habits .th-row.on .th-name { color: var(--dim); }
.today-habits .th-sub { display: block; font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.today-habits .th-row-streak { margin-left: auto; flex-shrink: 0; font-family: var(--sans); font-weight: 700; font-size: 10.5px; color: var(--heat-2); font-variant-numeric: tabular-nums; }
.today-habits .th-add { width: 100%; margin-top: 10px; }
.today-habits.th-empty .th-invite { font-size: 12.5px; color: var(--dim); margin: 4px 2px 12px; max-width: 46ch; }

/* Goals / outcomes block (Today Habits + Goals rework Phase 5): "What I'm working toward" — a
   DIFFERENT visual species from the habit check circles: trend arrows, a segmented consistency
   bar, and a stat. Quieter surface (plain card) so the habits block stays the star. */
.today-goals { margin-top: 14px; background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; }
.today-goals .tg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.today-goals .tg-title { font-family: var(--disp); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; }
.today-goals .tg-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.today-goals .tg-row:first-of-type { border-top: none; }
.today-goals .tg-tx { min-width: 0; flex: 1; }
.today-goals .tg-name { display: block; font-family: var(--disp); font-weight: 700; font-size: 13px; }
.today-goals .tg-sub { display: block; font-size: 11px; color: var(--dim); margin-top: 1px; font-variant-numeric: tabular-nums; }
.today-goals .tg-trend { font-size: 18px; font-weight: 800; line-height: 1; flex-shrink: 0; }
.today-goals .tg-stat { font-family: var(--disp); font-weight: 800; font-size: 18px; color: var(--c-strength); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.today-goals .tg-bar { display: flex; gap: 3px; flex-shrink: 0; }
.today-goals .tg-seg { width: 8px; height: 18px; border-radius: 3px; background: var(--surf-3); }
.today-goals .tg-seg.on { background: var(--c-nutri); }

/* Celebration system (Mind v9 Phase 9): a pillar-colored radial bloom + kinetic number,
   scaled across Micro/Standard/Milestone. Non-blocking (pointer-events:none); the layer
   lives outside #root so the render loop never touches it. Reduced-motion → calm fade. */
#celebrate-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.celeb { position: absolute; transform: translate(-50%, -50%); pointer-events: none; will-change: transform, opacity; }
.celeb-bloom {
  position: absolute; left: 50%; top: 50%; width: var(--celeb-bloom, 160px); height: var(--celeb-bloom, 160px);
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--celeb-c, var(--accent)) 72%, transparent) 0%, transparent 68%);
}
.celeb-kin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.celeb-num { display: block; font-family: var(--disp); font-weight: 800; font-size: 34px; line-height: 1; color: var(--celeb-c, var(--accent)); text-shadow: 0 2px 18px color-mix(in oklab, var(--celeb-c, var(--accent)) 40%, transparent); }
.celeb-milestone .celeb-num { font-size: 58px; }
.celeb-lab { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }

/* full motion — bloom expands + fades, number pops and settles */
@media (prefers-reduced-motion: no-preference) {
  .celeb:not(.celeb-calm) .celeb-bloom { animation: celeb-bloom var(--celeb-ms, 1200ms) ease-out forwards; }
  .celeb:not(.celeb-calm) .celeb-kin { animation: celeb-pop var(--celeb-ms, 1200ms) cubic-bezier(.2,.9,.25,1) forwards; }
}
@keyframes celeb-bloom { 0% { transform: translate(-50%,-50%) scale(.25); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
@keyframes celeb-pop {
  0% { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  30% { transform: translate(-50%,-50%) scale(1.12); opacity: 1; }
  78% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}
/* calm fallback — a gentle fade, no scale/particles (wellness context; non-negotiable) */
.celeb-calm .celeb-bloom, .celeb-calm .celeb-kin { animation: celeb-fade var(--celeb-ms, 1200ms) ease-out forwards; }
@keyframes celeb-fade { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* Custom strength-day preset editor (Phase 9) */
.preset-ex { display: flex; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surf); margin-bottom: 8px; }
.preset-ex-ctl { display: flex; gap: 14px; margin-top: 8px; }
.ministep { display: inline-flex; align-items: center; gap: 6px; }
.ministep .tnum { font: 800 15px var(--disp); color: var(--ink); min-width: 20px; text-align: center; }
.ministep small { color: var(--dim-2); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.iconbtn.xs { width: 26px; height: 26px; padding: 0; }
.gchip.xs { padding: 5px 10px; font-size: 11px; }

.bal-card { border: 1px solid var(--line); border-radius: 16px; background: var(--surf); padding: 14px; margin-top: 14px; }
.bal-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.bal-l { width: 42px; font-family: var(--disp); font-weight: 700; font-size: 11.5px; color: var(--dim); }
.bal-track { flex: 1; height: 8px; border-radius: 5px; background: var(--surf-3); overflow: hidden; }
.bal-fill { height: 100%; border-radius: 5px; transition: width .25s ease; }
.bal-v { width: 26px; text-align: right; font-size: 12px; color: var(--ink); }
.bal-sum { font-size: 12.5px; color: var(--ink); margin: 10px 0 8px; }
.bal-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--dim); }
.bal-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bal-meta svg { width: 14px; height: 14px; }
/* Strength-vs-cardio modality split — a distinct sub-section (its own header + top rule) so it
   reads as a different question from the body-region bars above. */
.bal-split { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bal-splitbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surf-3); }
.bal-splitbar > div { height: 100%; min-width: 0; transition: width .25s ease; }
.bal-splitleg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; font-size: 11.5px; color: var(--dim); }
.bal-splitleg span { display: inline-flex; align-items: center; gap: 6px; }
.bal-splitleg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.bal-splitempty { font-size: 11.5px; color: var(--dim-2); margin: 2px 0 0; }

.drawer-act { display: flex; align-items: center; gap: 10px; background: var(--surf-2); border: 1px solid var(--line); border-radius: 13px; padding: 9px 10px; margin-bottom: 8px; }
.drawer-ops { display: flex; gap: 2px; }
.iconbtn.sm { width: 30px; height: 30px; border-radius: 9px; }
.iconbtn.sm svg { width: 16px; height: 16px; }
.iconbtn.sm:disabled { opacity: .3; }
.drawer-addrow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.drawer-addrow .btn { flex: 1; min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.drawer-add { margin-top: 14px; }

/* ---- Insights progression rows ---- */
.prog-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.prog-row:last-child { border-bottom: 0; }
.prog-row .nm { font-family: var(--disp); font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-row .sub { font-size: 11px; }

/* =========================================================================
   Wim Hof — cinematic breathing overlay (ui/wimhof-cinematic.js)
   A full-screen takeover that lives outside #root; its own token scope is set
   in tokens.css (.wimhof-cine). Full-bleed canvas + a pointer-events-none HUD.
   ========================================================================= */
.wimhof-cine {
  position: fixed; inset: 0; z-index: 200;
  background: #06100d; color: #fff;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain; touch-action: none;
}
.wh-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* while a begin/end veil is up, fade the HUD out so its text doesn't bleed through the
   veil's translucent centre (most visible on the light Daylight canvas) */
.wh-hud { transition: opacity .3s ease; }
.wimhof-cine.veiled .wh-hud { opacity: 0; pointer-events: none; }

/* HUD overlay */
.wh-hud { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; color: #fff; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.wh-top { padding: 22px 24px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wh-eyebrow { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.66); text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
.wh-status { font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.8); text-align: right; text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
.wh-status b { font-variant-numeric: tabular-nums; }
.wh-status span { opacity: .7; font-weight: 500; }
.wh-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; padding: 0 22px; }
.wh-phase { font-family: var(--disp); font-weight: 700; font-size: 30px; letter-spacing: -0.01em; text-shadow: 0 2px 26px rgba(0,0,0,0.55); transition: color .8s; }
.wh-big { font-family: var(--disp); font-weight: 800; font-size: 84px; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.wh-big .u { font-size: 30px; font-weight: 700; color: rgba(255,255,255,0.62); letter-spacing: 0; }
.wh-sub { font-family: var(--sans); font-weight: 500; font-size: 13px; color: rgba(255,255,255,0.62); text-shadow: 0 1px 14px rgba(0,0,0,0.5); min-height: 18px; margin-top: 4px; }
.wh-held { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums; margin-top: 4px; }
.wh-held .tg { color: rgba(255,255,255,0.5); font-weight: 500; }
.wh-bottom { padding: 0 22px 26px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.wh-holdbtn { pointer-events: auto; cursor: pointer; font-family: var(--disp); font-weight: 700; font-size: 15px; color: #fff; background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.5); border-radius: 15px; padding: 15px 26px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 22px rgba(0,0,0,0.28); display: inline-flex; align-items: center; gap: 9px; transition: background .18s, border-color .18s, transform .12s; min-width: 220px; justify-content: center; }
.wh-holdbtn:hover { background: rgba(255,255,255,0.24); }
.wh-holdbtn:active { transform: scale(0.97); }
/* Release is the primary hold control now (always on-screen during a hold) — make it clearly visible. */
.wh-holdbtn.release { background: color-mix(in oklab, var(--c-recover) 66%, rgba(20,18,28,0.32)); border-color: color-mix(in oklab, var(--c-recover) 95%, transparent); box-shadow: 0 6px 26px color-mix(in oklab, var(--c-recover) 42%, transparent); }
.wh-holdbtn svg { width: 15px; height: 15px; }
.wh-stopbtn { pointer-events: auto; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); background: transparent; border: none; padding: 8px 12px; }
.wh-stopbtn:hover { color: #fff; }
.wh-mute { position: absolute; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); right: 22px; pointer-events: auto; cursor: pointer; width: 38px; height: 38px; border-radius: 11px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); display: none; align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wh-mute svg { width: 17px; height: 17px; }
.wh-mute.off { color: rgba(255,255,255,0.55); }
/* the mute affordance only appears once a session is running (HUD + Stop is the in-session
   chrome); JS adds .live in the session lifecycle. */
.wh-mute.live { display: flex; }

/* Daylight legibility — the canvas goes light, so tint in-session HUD text dark.
   (Veils keep white text — their overlay scrim stays dark in both themes.) */
.wimhof-cine[data-theme="light"] .wh-hud { color: #15302a; }
.wimhof-cine[data-theme="light"] .wh-eyebrow { color: rgba(21,48,42,0.72); text-shadow: 0 1px 10px rgba(255,255,255,0.5); }
.wimhof-cine[data-theme="light"] .wh-status { color: rgba(21,48,42,0.88); text-shadow: 0 1px 10px rgba(255,255,255,0.5); }
.wimhof-cine[data-theme="light"] .wh-sub, .wimhof-cine[data-theme="light"] .wh-held { color: rgba(21,48,42,0.82); text-shadow: 0 1px 10px rgba(255,255,255,0.5); }
.wimhof-cine[data-theme="light"] .wh-held .tg { color: rgba(21,48,42,0.55); }
.wimhof-cine[data-theme="light"] .wh-phase, .wimhof-cine[data-theme="light"] .wh-big { text-shadow: 0 2px 18px rgba(255,255,255,0.55); }
.wimhof-cine[data-theme="light"] .wh-big .u { color: rgba(21,48,42,0.5); }
.wimhof-cine[data-theme="light"] .wh-holdbtn { color: #15302a; background: rgba(21,48,42,0.08); border-color: rgba(21,48,42,0.3); }
.wimhof-cine[data-theme="light"] .wh-holdbtn:hover { background: rgba(21,48,42,0.14); }
.wimhof-cine[data-theme="light"] .wh-stopbtn { color: rgba(21,48,42,0.6); }
.wimhof-cine[data-theme="light"] .wh-stopbtn:hover { color: #15302a; }
.wimhof-cine[data-theme="light"] .wh-mute { background: rgba(255,255,255,0.5); border-color: rgba(21,48,42,0.2); color: rgba(21,48,42,0.8); }

/* veils (begin + end) — dark scrim in both themes, white text */
.wh-veil { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 32px; background: radial-gradient(120% 80% at 50% 40%, rgba(8,18,15,0.6), rgba(4,10,8,0.94)); transition: opacity .42s ease; opacity: 1; }
.wh-veil.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.wh-vk { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.wh-veil h2 { font-family: var(--disp); font-weight: 700; font-size: 26px; color: #fff; letter-spacing: -0.01em; max-width: 16ch; line-height: 1.15; }
.wh-veil p { font-size: 12.5px; color: rgba(255,255,255,0.66); max-width: 32ch; line-height: 1.5; }
.wh-begin { cursor: pointer; font-family: var(--disp); font-weight: 700; font-size: 15px; color: #0e1a14; background: #fff; border: none; border-radius: 40px; padding: 14px 30px; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.wh-begin svg { width: 17px; height: 17px; }
.wh-donebtn { cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); background: transparent; border: none; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
.wh-donebtn svg { width: 13px; height: 13px; }
.wh-donebtn:hover { color: #fff; }
.wh-veilclose { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 20px; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.3); color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; }
.wh-veilclose svg { width: 16px; height: 16px; }

/* begin-veil preference controls (difficulty / sound / motion) */
.wh-opts { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; margin-top: 6px; }
.wh-togs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wh-tog { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 11.5px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 11px; padding: 8px 12px; }
.wh-tog .sw { width: 32px; height: 19px; border-radius: 20px; background: rgba(255,255,255,0.18); position: relative; transition: background .18s; flex-shrink: 0; }
.wh-tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,0.7); transition: transform .18s, background .18s; }
.wh-tog.on { color: #fff; border-color: color-mix(in oklab, var(--c-recover) 60%, transparent); }
.wh-tog.on .sw { background: color-mix(in oklab, var(--c-recover) 65%, rgba(255,255,255,0.15)); }
.wh-tog.on .sw::after { transform: translateX(13px); background: #fff; }

@media (max-width: 440px) {
  .wh-big { font-size: 72px; }
  .wh-phase { font-size: 26px; }
}
@media (min-width: 760px) {
  /* on a wide screen, keep the immersive scene but cap the HUD column so text isn't lost */
  .wh-hud { max-width: 520px; margin: 0 auto; }
  .wh-mute { right: calc(50% - 260px + 22px); }
}