@charset "utf-8";
/* =========================================================================
   GAUGE — Weekly Exercise Schedule
   One accent hue. It means "done" and nothing else.
   Focus hues live only on 1.75–3px strokes and 12px eyebrow text.
   Butt caps, hard gaps, no glow, no round caps, anywhere.
   ========================================================================= */

/* ---------- 1. TOKENS · DARK (default) ---------------------------------- */
:root {
  color-scheme: dark;

  --bg-base:         #0B0C0E;
  --bg-raised:       #131519;
  --bg-raised-2:     #1A1D22;
  --bg-sunken:       #08090A;
  --hairline:        #23272E;
  --hairline-strong: #2F343C;
  --scrim:           rgba(6,7,9,.72);

  --text-hi:  #F2F4F7;
  --text-mid: #A8B0BC;
  --text-lo:  #7C8592;

  --accent:       #C7F53D;
  --accent-press: #A8DC1E;
  --accent-ink:   #0B0C0E;
  --accent-text:  #C7F53D;
  --accent-edge:  transparent;
  --accent-wash:  rgba(199,245,61,.14);
  --accent-fill:  rgba(199,245,61,.075);
  --accent-bar:   #C7F53D;   /* thin meters: readable as-is on dark */

  --focus-strength: #FF8B5E;
  --focus-cardio:   #4FB8FF;
  --focus-mobility: #B69CFF;
  --focus-rest:     #8E99A8;

  --danger: #FF7B72;

  --edge-top:     inset 0 1px 0 rgba(255,255,255,.035);
  --edge-bottom:  inset 0 -1px 0 rgba(0,0,0,.50);
  --shadow-slab:  none;
  --shadow-dock:  0 -12px 32px rgba(0,0,0,.55);
  --shadow-sheet: 0 -16px 40px rgba(0,0,0,.60);

  /* spacing */
  --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:12px;
  --s-6:16px; --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px; --s-11:56px;

  /* radii */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

  /* motion */
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --ease-snap:  cubic-bezier(.34,1.4,.64,1);
  --d-fast:120ms; --d-base:220ms; --d-slow:320ms; --d-view:380ms;

  /* layout */
  --gutter: 16px;
  --measure: 34rem;
  --dock-h: 0px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
             "Roboto Mono", Menlo, Consolas, monospace;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 1.2 TOKENS · LIGHT (a second design, not an inversion) ------- */
/* Lime is FILL ONLY on light — 1.27:1 on white. Never text, never a hairline. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-base:#F4F5F7; --bg-raised:#FFFFFF; --bg-raised-2:#F0F2F5; --bg-sunken:#E4E7EC;
    --hairline:#DDE1E7; --hairline-strong:#C6CCD5; --scrim:rgba(16,19,24,.35);
    --text-hi:#101318; --text-mid:#4A5260; --text-lo:#6B7484;
    --accent:#C7F53D; --accent-press:#B4E82A; --accent-ink:#14180A;
    --accent-text:#3F5B00; --accent-edge:#93BE1C;
    --accent-wash:rgba(199,245,61,.28); --accent-fill:rgba(199,245,61,.18);
    --accent-bar:#4F7000;   /* thin meters: lime is ~1:1 on pale tracks in light mode */
    --focus-strength:#B4460F; --focus-cardio:#0B63A8; --focus-mobility:#5B3FC4; --focus-rest:#5A6472;
    --danger:#B42318;
    --edge-top:none; --edge-bottom:none;
    --shadow-slab:0 1px 1px rgba(16,19,24,.04), 0 1px 2px rgba(16,19,24,.05);
    --shadow-dock:0 -1px 0 var(--hairline), 0 -8px 28px rgba(16,19,24,.10);
    --shadow-sheet:0 -8px 28px rgba(16,19,24,.14);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-base:#F4F5F7; --bg-raised:#FFFFFF; --bg-raised-2:#F0F2F5; --bg-sunken:#E4E7EC;
  --hairline:#DDE1E7; --hairline-strong:#C6CCD5; --scrim:rgba(16,19,24,.35);
  --text-hi:#101318; --text-mid:#4A5260; --text-lo:#6B7484;
  --accent:#C7F53D; --accent-press:#B4E82A; --accent-ink:#14180A;
  --accent-text:#3F5B00; --accent-edge:#93BE1C;
  --accent-wash:rgba(199,245,61,.28); --accent-fill:rgba(199,245,61,.18);
  --accent-bar:#4F7000;   /* thin meters: lime is ~1:1 on pale tracks in light mode */
  --focus-strength:#B4460F; --focus-cardio:#0B63A8; --focus-mobility:#5B3FC4; --focus-rest:#5A6472;
  --danger:#B42318;
  --edge-top:none; --edge-bottom:none;
  --shadow-slab:0 1px 1px rgba(16,19,24,.04), 0 1px 2px rgba(16,19,24,.05);
  --shadow-dock:0 -1px 0 var(--hairline), 0 -8px 28px rgba(16,19,24,.10);
  --shadow-sheet:0 -8px 28px rgba(16,19,24,.14);
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- 2. GLOBAL --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-hi);
  font: 450 1rem/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  min-block-size: 100dvh;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button, a.rail-link, .pip, .slab { touch-action: manipulation; user-select: none; -webkit-user-select: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}
:root[data-theme="light"] :focus-visible { outline-color: var(--accent-text); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) :focus-visible { outline-color: var(--accent-text); } }

.vh {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* type helpers */
.eyebrow { font-size: .75rem; line-height: 1.35; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.mono    { font-family: var(--font-mono); font-size: .875rem; line-height: 1.3; font-weight: 500; letter-spacing: .01em; }
.mono-lg { font-family: var(--font-mono); font-size: .9375rem; line-height: 1.2; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sl { letter-spacing: .08em; }

/* ---------- 3. APP SHELL ------------------------------------------------ */
.app { min-block-size: 100dvh; }
.view {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: calc(var(--dock-h) + var(--s-8));
}
.view[hidden] { display: none; }

/* ---------- 4. HEADER --------------------------------------------------- */
#sentinel { block-size: 1px; margin-block-end: -1px; }
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-base);
  padding-block-start: env(safe-area-inset-top);
  transition: background-color var(--d-fast) linear, box-shadow var(--d-fast) linear;
}
.hdr.is-stuck { background: var(--bg-raised-2); box-shadow: inset 0 -1px 0 var(--hairline); }
.hdr-in {
  block-size: 56px;
  max-inline-size: var(--measure); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--s-2);
}
.hdr-read { color: var(--text-mid); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-read.is-past { color: var(--accent-text); }
.iconbtn {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  color: var(--text-mid); border-radius: var(--r-md);
}
.iconbtn svg { inline-size: 22px; block-size: 22px; }
@media (hover: hover) and (pointer: fine) {
  .iconbtn:hover { color: var(--text-hi); background: var(--bg-raised-2); }
}

/* day-view header variant */
.hdr-in.is-day { grid-template-columns: 44px 1fr auto; }
.hdr-day-name { font-size: 1.5rem; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; }
.hdr-day-date { color: var(--text-lo); }
.hdr-progress { block-size: 3px; background: var(--hairline); position: relative; overflow: hidden; }
.hdr-progress > i { display: block; block-size: 100%; inline-size: 0%; background: var(--accent-bar); transition: inline-size var(--d-slow) var(--ease-out); }
.hdr-progress > b {                      /* the day-completion sweep */
  position: absolute; inset: 0; background: var(--accent-bar);
  transform: scaleX(0); transform-origin: left center; opacity: 0;
}
@keyframes sweep {
  0%   { transform: scaleX(0); opacity: 1; }
  62%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.app:not(.is-day) .hdr-progress { visibility: hidden; }

/* week nav */
.weeknav {
  max-inline-size: var(--measure); margin-inline: auto; padding-inline: var(--gutter);
  block-size: 44px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
}
.weeknav .lbl { text-align: center; color: var(--text-lo); }
.weeknav button { inline-size: 44px; block-size: 44px; display: grid; place-items: center; color: var(--text-mid); border-radius: var(--r-md); }
.weeknav button[disabled] { color: var(--hairline-strong); cursor: default; }

/* ---------- 5. INSTRUMENT CARD ------------------------------------------ */
.instrument {
  background: var(--bg-raised); border-radius: var(--r-xl);
  padding: var(--s-7); box-shadow: var(--edge-top), var(--edge-bottom), var(--shadow-slab);
  margin-block-start: var(--s-2);
}
:root[data-theme="light"] .instrument,
:root[data-theme="light"] .rail-row,
:root[data-theme="light"] .slab { border: 1px solid var(--hairline); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .instrument,
  :root:not([data-theme="dark"]) .rail-row,
  :root:not([data-theme="dark"]) .slab { border: 1px solid var(--hairline); }
}

.ring-wrap { display: grid; place-items: center; position: relative; }
.ring { inline-size: 132px; block-size: 132px; display: block; }
.ring circle { fill: none; stroke-linecap: butt; }
.ring .fill { transition: stroke-dasharray 420ms var(--ease-out); }
.ring-centre {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  pointer-events: none; text-align: center;
}
.ring-num { font-size: 2.75rem; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--text-hi); }
.ring-num small { font-size: 1.1875rem; line-height: 1; font-weight: 600; letter-spacing: -.01em; color: var(--text-lo); }
.ring-eyebrow { color: var(--text-lo); margin-block-start: var(--s-3); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-block-start: var(--s-7); }
.stat { min-block-size: 56px; display: grid; place-content: center; justify-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2); text-align: center; }
.stat + .stat { box-shadow: inset 1px 0 0 var(--hairline); }
.stat .k { color: var(--text-lo); font-size: .6875rem; letter-spacing: .08em; }
.stat .v { font-size: 1.75rem; line-height: 1; font-weight: 700; letter-spacing: -.025em; }
.stat .v small { font-size: 1rem; font-weight: 600; color: var(--text-lo); }
button.stat { inline-size: 100%; border-radius: var(--r-sm); }

/* voice line — the only place the app speaks */
.voice {
  font-style: italic; color: var(--text-mid); text-wrap: balance;
  max-inline-size: 28rem; margin: var(--s-7) auto var(--s-8); text-align: center;
}

/* ---------- 6. DAY RAIL ------------------------------------------------- */
.rail { display: grid; gap: var(--s-4); }
.rail-row {
  position: relative; background: var(--bg-raised); border-radius: var(--r-lg);
  min-block-size: 84px; box-shadow: var(--edge-top), var(--edge-bottom), var(--shadow-slab);
  display: grid; grid-template-columns: 1fr auto 12px 56px; align-items: center;
  padding: 14px 14px 14px 18px; gap: var(--s-2);
}
.rail-row::before {                 /* focus spine */
  content: ""; position: absolute; inset-block: 10px; inset-inline-start: 7px;
  inline-size: 3px; border-radius: var(--r-xs); background: var(--spine, transparent);
}
.rail-row[data-cat="strength"] { --spine: var(--focus-strength); }
.rail-row[data-cat="cardio"]   { --spine: repeating-linear-gradient(to bottom, var(--focus-cardio) 0 10px, transparent 10px 14px); }
.rail-row[data-cat="mobility"] { --spine: repeating-linear-gradient(to bottom, var(--focus-mobility) 0 3px, transparent 3px 8px); }
.rail-row[data-cat="rest"]     { --spine: none; background: var(--bg-sunken); }
.rail-row[data-cat="rest"]::before { inline-size: 1px; inset-inline-start: 8px; background: var(--hairline-strong); }

.rail-row.is-today { background: var(--bg-raised-2); box-shadow: var(--edge-top), var(--edge-bottom), inset 0 0 0 1px var(--accent-wash); }
.rail-row.is-done::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 2px;
  background: var(--accent-bar); opacity: .3; border-radius: var(--r-lg) 0 0 var(--r-lg);
}

.rail-link { display: grid; gap: var(--s-2); min-inline-size: 0; border-radius: var(--r-md); }
.rail-l1 { display: flex; align-items: baseline; gap: var(--s-4); }
.rail-day { font-size: 1.1875rem; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.rail-date { color: var(--text-lo); }
.rail-l2 { display: flex; align-items: center; gap: var(--s-3); color: var(--fc, var(--text-mid)); min-inline-size: 0; }
.rail-l2 svg { inline-size: 16px; block-size: 16px; flex: none; }
.rail-l2 .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row[data-cat="strength"] .rail-l2 { --fc: var(--focus-strength); }
.rail-row[data-cat="cardio"]   .rail-l2 { --fc: var(--focus-cardio); }
.rail-row[data-cat="mobility"] .rail-l2 { --fc: var(--focus-mobility); }
.rail-row[data-cat="rest"]     .rail-l2 { --fc: var(--focus-rest); }
.rail-today-tag { color: var(--accent-text); }
.rail-l3 { font-size: .875rem; line-height: 1.4; font-weight: 500; color: var(--text-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rail-meter { display: grid; gap: var(--s-3); justify-items: end; }
.rail-meter .dur { color: var(--text-lo); white-space: nowrap; }
.segbar { display: flex; gap: 3px; inline-size: 64px; }
.segbar > i { flex: 1; block-size: 3px; border-radius: 2px; background: var(--hairline-strong); overflow: hidden; }
.segbar > i > b { display: block; block-size: 100%; inline-size: 0%; background: var(--accent-bar); }
.segbar.is-rest > i { background: transparent; box-shadow: inset 0 0 0 1px var(--focus-rest); opacity: .5; }

/* one-tap DONE */
.daydone {
  inline-size: 56px; block-size: 56px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--text-lo);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  transition: background-color var(--d-fast) linear, box-shadow var(--d-fast) linear, color var(--d-fast) linear;
}
.daydone svg { inline-size: 20px; block-size: 20px; }
.daydone[data-state="done"] {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}
.daydone[data-state="rest"] { box-shadow: inset 0 0 0 1.5px var(--focus-rest); color: var(--focus-rest); }
.daydone[data-state="skipped"] { color: var(--text-lo); }
@media (hover: hover) and (pointer: fine) {
  .daydone:hover { background: var(--bg-raised-2); }
  .daydone[data-state="done"]:hover { background: var(--accent-press); }
  .rail-link:hover .rail-day { color: var(--text-hi); }
}

/* ---------- 7. FOOTER --------------------------------------------------- */
.foot { margin-block: var(--s-9) var(--s-8); display: grid; gap: var(--s-5); justify-items: start; }
.foot-btn { block-size: 44px; display: inline-flex; align-items: center; color: var(--text-lo); border-radius: var(--r-sm); }
.foot p { font-size: .875rem; line-height: 1.4; color: var(--text-lo); max-inline-size: 30rem; }
.foot .backup { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-lo); }

/* ---------- 8. DAY VIEW ------------------------------------------------- */
.sess-head { padding-block: var(--s-7) var(--s-8); display: grid; gap: var(--s-5); }
.sess-focus { display: flex; align-items: center; gap: var(--s-3); color: var(--fc, var(--text-mid)); }
.sess-focus svg { inline-size: 20px; block-size: 20px; flex: none; }
.sess-head[data-cat="strength"] { --fc: var(--focus-strength); }
.sess-head[data-cat="cardio"]   { --fc: var(--focus-cardio); }
.sess-head[data-cat="mobility"] { --fc: var(--focus-mobility); }
.sess-head[data-cat="rest"]     { --fc: var(--focus-rest); }
.sess-meta { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.chip-dur {
  block-size: 28px; display: inline-flex; align-items: center; padding-inline: var(--s-5);
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--text-mid);
}
.sess-presc { color: var(--text-lo); }
.sess-sub { font-size: .875rem; line-height: 1.4; color: var(--text-mid); max-inline-size: 34rem; }

.items { display: grid; gap: var(--s-4); }

/* ---------- 9. THE SLAB ------------------------------------------------- */
.slab-wrap { display: grid; gap: var(--s-2); }
.slab {
  position: relative; overflow: hidden; isolation: isolate; text-align: start; inline-size: 100%;
  min-block-size: 88px; padding: 16px 18px; border-radius: var(--r-lg);
  background: var(--bg-raised); box-shadow: var(--edge-top), var(--edge-bottom), var(--shadow-slab);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
  column-gap: var(--s-5); row-gap: var(--s-3); align-items: start;
  transition: transform 180ms var(--ease-out), background-color var(--d-fast) linear, box-shadow 160ms var(--ease-out);
}
.slab::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1;
  inline-size: calc(var(--p, 0) * 100%);
  background: var(--accent-fill);
  transition: inline-size var(--d-slow) var(--ease-out);
}
/* a hard leading edge, never a gradient — and only once there is progress */
.slab[data-started]::before { box-shadow: inset -2px 0 0 var(--accent-bar); }

/* The advance area: one huge sloppy target covering the whole slab.
   Pips and the action cluster sit above it, so precise taps still land. */
.adv {
  position: absolute; inset: 0; z-index: 1;
  border-radius: var(--r-lg); background: transparent;
}
.slab-row3 { position: relative; }
.pips, .slab-acts { position: relative; z-index: 2; }
.slab-acts { z-index: 3; }
.slab::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(100% / var(--sets, 1) - 1px),
    var(--hairline) calc(100% / var(--sets, 1) - 1px) calc(100% / var(--sets, 1)));
}
.slab[data-sets="1"]::after { background: none; }
.slab.is-pressed { transform: scale(.985); background: var(--bg-raised-2); box-shadow: inset 0 0 0 1px var(--hairline-strong); transition-duration: 90ms; }
.slab[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--accent-bar); }

.slab-name {
  grid-column: 1; grid-row: 1;
  font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; color: var(--text-hi);
  text-wrap: pretty; overflow-wrap: break-word;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 1.5px;
  transition: background-size 300ms var(--ease-out), color 200ms linear;
  display: inline; padding-inline-end: 2px;
}
.slab[aria-checked="true"] .slab-name { background-size: 100% 1.5px; color: var(--text-mid); }
.slab-name .qual { font-weight: 450; color: var(--text-mid); font-size: .9em; }
.slab-presc { grid-column: 1; grid-row: 2; font-family: var(--font-mono); font-size: .875rem; font-weight: 500; color: var(--text-lo); }
/* a suggested figure, where the source plan is silent — dotted, so it never
   reads as something the plan actually printed */
.slab-presc .sug {
  font-weight: 500; color: var(--text-mid);
  border-block-end: 1px dotted var(--hairline-strong);
}
.slab-presc .last { font-style: normal; color: var(--text-lo); opacity: .8; }
.slab-presc .last::before { content: "· "; }

/* variants + logging inside the info disclosure */
.info .swaps { display: grid; gap: var(--s-4); }
.info .swaps p { font-size: .875rem; line-height: 1.45; color: var(--text-mid); }
.info .swaps .chip-src { margin-inline-end: var(--s-4); }
.logrow { display: grid; gap: var(--s-4); justify-items: start; padding-block-start: var(--s-2); }
.logrow .eyebrow { color: var(--text-lo); }
.stepper { display: flex; align-items: center; gap: var(--s-2); }
.stepper button {
  inline-size: 44px; block-size: 44px; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--text-hi);
  font-size: 1.25rem; font-weight: 600; line-height: 1;
}
.stepper output {
  min-inline-size: 84px; text-align: center;
  font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text-hi);
}
@media (hover: hover) and (pointer: fine) { .stepper button:hover { background: var(--bg-raised-2); } }

.timer-digits.is-over { color: var(--text-mid); }

.slab-count {
  grid-column: 2; grid-row: 1; justify-self: end;
  font-size: 1.125rem; line-height: 1; font-weight: 700; letter-spacing: .01em;
  color: var(--text-lo); display: flex; align-items: center; gap: var(--s-3);
  min-inline-size: 44px; justify-content: flex-end; padding-block-start: 3px;
}
.slab-count .num { color: var(--text-hi); }
.slab-count.is-zero .num { color: var(--text-lo); }
.slab[aria-checked="true"] .slab-count { color: var(--accent-text); }
.slab[aria-checked="true"] .slab-count .num { color: var(--accent-text); }
.slab-check { inline-size: 24px; block-size: 24px; flex: none; color: var(--accent-text); }
.slab-check path { stroke-dasharray: 26; stroke-dashoffset: 26; }
.slab[aria-checked="true"] .slab-check path { stroke-dashoffset: 0; transition: stroke-dashoffset 220ms var(--ease-inout) 60ms; }
.slab-ring { inline-size: 26px; block-size: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hairline-strong); }
.slab[aria-checked="true"] .slab-ring { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.beat { animation: beat 300ms var(--ease-snap); }
@keyframes beat { 0%{transform:scale(1)} 45%{transform:scale(1.08)} 100%{transform:scale(1)} }

.slab-row3 { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 12px; }
.pips { display: flex; gap: 0; flex: 1; min-inline-size: 0; }
.pip {
  block-size: 44px; flex: 1 1 0; min-inline-size: 36px; max-inline-size: 56px;
  display: grid; place-items: center; background: transparent;
}
.pip > i {
  inline-size: 16px; block-size: 16px; border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.pip[aria-checked="true"] > i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.pip.is-optional > i { box-shadow: inset 0 0 0 1.5px var(--hairline); opacity: .55; }
.pip.is-optional[aria-checked="true"] > i { background: var(--accent); opacity: .55; }
.slab-acts { display: flex; gap: var(--s-4); flex: none; }
.slab-act {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  color: var(--text-lo); border-radius: var(--r-md);
}
.slab-act svg { inline-size: 20px; block-size: 20px; }
.slab-act[aria-expanded="true"] { color: var(--text-hi); background: var(--bg-raised-2); }
@media (hover: hover) and (pointer: fine) {
  .slab-act:hover { color: var(--text-hi); background: var(--bg-raised-2); }
  .slab:hover { background: var(--bg-raised-2); }
}

/* bookends */
.slab.is-bookend { background: var(--bg-sunken); min-block-size: 72px; }
.slab.is-bookend .slab-name { font-size: 1.0625rem; font-style: italic; color: var(--text-mid); font-weight: 500; }
.slab.is-bookend::before { inset-inline-start: 0; }
.slab.is-bookend > .dash {
  position: absolute; inset-block: 12px; inset-inline-start: 6px; inline-size: 0;
  box-shadow: inset 1.5px 0 0 var(--hairline-strong);
  border-inline-start: 1.5px dashed var(--hairline-strong);
}
.chip-src {
  display: inline-flex; align-items: center; block-size: 22px; padding-inline: var(--s-4);
  border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-lo); white-space: nowrap;
}

/* info disclosure */
.info {
  background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--s-6);
  display: grid; gap: var(--s-5);
}
.info p { font-size: 1rem; line-height: 1.45; color: var(--text-mid); }
.info .prov { display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap; }
.info .note { font-size: .875rem; line-height: 1.45; color: var(--text-lo); }
.info ul { display: grid; gap: var(--s-3); }
.info li { font-size: .875rem; line-height: 1.4; color: var(--text-mid); padding-inline-start: var(--s-5); position: relative; }
.info li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em; inline-size: 5px; block-size: 1px; background: var(--text-lo); }

/* note field */
.noterow { block-size: 44px; display: flex; align-items: center; gap: var(--s-4); color: var(--text-lo); border-radius: var(--r-sm); }
.noterow .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent-text); }
.notebox { inline-size: 100%; background: var(--bg-sunken); border: 0; border-radius: var(--r-md);
  padding: var(--s-5); color: var(--text-hi); resize: vertical; min-block-size: 84px; }
.notebox::placeholder { color: var(--text-lo); }

/* the day's guideline */
.gl-card { background: var(--bg-sunken); border-radius: var(--r-lg); padding: var(--s-7); display: grid; gap: var(--s-5); margin-block-start: var(--s-8); }
.gl-card p { color: var(--text-mid); max-inline-size: 34ch; }
.gl-card sup { font-family: var(--font-mono); color: var(--text-lo); font-size: .75rem; margin-inline-end: var(--s-3); }

/* ---------- 10. DOCK ---------------------------------------------------- */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  background: var(--bg-raised); box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-dock);
  padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
}
.dock-in { max-inline-size: var(--measure); margin-inline: auto; display: grid; gap: var(--s-5); }
.dock-seg { display: flex; gap: 3px; }
.dock-seg > i { flex: 1; block-size: 6px; border-radius: 3px; background: color-mix(in srgb, var(--hairline-strong) 40%, transparent); overflow: hidden; }
.dock-seg > i > b { display: block; block-size: 100%; inline-size: 0%; background: var(--accent-bar); transition: inline-size 200ms linear; }
.dock-ctl { display: grid; grid-template-columns: 44px 1fr 44px 44px; gap: var(--s-4); align-items: center; }
.dock-next {
  block-size: 56px; border-radius: var(--r-md); background: var(--bg-raised-2);
  box-shadow: inset 0 0 0 1px var(--hairline); color: var(--text-hi);
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  padding-inline: var(--s-5); overflow: hidden;
}
.dock-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-next.is-earned { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.dock-next[data-state="done"] { color: var(--text-mid); }
.dock-nav { inline-size: 44px; block-size: 44px; display: grid; place-items: center; color: var(--text-mid); border-radius: var(--r-md); }
.dock-nav[disabled] { color: var(--hairline-strong); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .dock-next:hover { background: var(--bg-sunken); }
  .dock-next.is-earned:hover { background: var(--accent-press); }
  .dock-nav:hover { color: var(--text-hi); background: var(--bg-raised-2); }
}

/* ---------- 11. SHEETS -------------------------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity 220ms linear; }
.scrim.is-open { opacity: 1; }
.sheet {
  position: fixed; inset: auto 0 0 0; z-index: 61;
  background: var(--bg-raised); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-sheet);
  max-block-size: 92dvh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform var(--d-slow) var(--ease-out);
  padding-block-end: max(12px, env(safe-area-inset-bottom));
}
.sheet.is-open { transform: translateY(0); }
.sheet-in { max-inline-size: var(--measure); inline-size: 100%; margin-inline: auto; padding-inline: var(--gutter); overflow-y: auto; overscroll-behavior: contain; }
.grab { block-size: 44px; display: grid; place-items: center; flex: none; }
.grab > i { inline-size: 40px; block-size: 4px; border-radius: 2px; background: var(--hairline-strong); }
.sheet h2 { color: var(--text-lo); margin-block: var(--s-7) var(--s-5); }
.sheet-sec + .sheet-sec { box-shadow: inset 0 1px 0 var(--hairline); padding-block-start: var(--s-2); }
.sheet-row {
  min-block-size: 56px; inline-size: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); text-align: start; color: var(--text-hi); border-radius: var(--r-sm);
  box-shadow: inset 0 -1px 0 var(--hairline); padding-block: var(--s-4);
}
.sheet-row:last-child { box-shadow: none; }
.sheet-row .r { color: var(--text-lo); font-family: var(--font-mono); font-size: .875rem; flex: none; }
.sheet-row.is-danger { color: var(--danger); }
@media (hover: hover) and (pointer: fine) { .sheet-row:hover { color: var(--text-hi); background: var(--bg-raised-2); } }

.gl-list { display: grid; gap: var(--s-6); padding-block-end: var(--s-6); }
.gl-list li { color: var(--text-mid); max-inline-size: 34ch; }
.gl-list sup { font-family: var(--font-mono); color: var(--text-lo); font-size: .75rem; margin-inline-end: var(--s-3); }
.tipbox { background: var(--bg-sunken); border-radius: var(--r-lg); padding: var(--s-7); font-style: italic; color: var(--text-mid); }
.plan-title { display: grid; gap: var(--s-3); padding-block-end: var(--s-6); }
.plan-title strong { font-size: 1.1875rem; font-weight: 650; letter-spacing: -.01em; }
.plan-title span { font-size: .875rem; color: var(--text-mid); line-height: 1.45; }

/* segmented control */
.seg3 { display: inline-flex; background: var(--bg-sunken); border-radius: var(--r-sm); padding: 3px; gap: 3px; }
.seg3 button { block-size: 38px; padding-inline: var(--s-5); border-radius: 6px; color: var(--text-lo);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.seg3 button[aria-pressed="true"] { background: var(--bg-raised-2); color: var(--text-hi); box-shadow: inset 0 0 0 1px var(--hairline); }
.tgl { inline-size: 52px; block-size: 32px; border-radius: var(--r-pill); background: var(--hairline-strong); position: relative; flex: none; transition: background-color var(--d-fast) linear; }
.tgl::after { content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px; inline-size: 24px; border-radius: 50%; background: var(--text-hi); transition: transform var(--d-fast) var(--ease-out); }
.tgl[aria-pressed="true"] { background: var(--accent); }
.tgl[aria-pressed="true"]::after { transform: translateX(20px); background: var(--accent-ink); }

/* history */
.hist { display: grid; }
.hist-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5);
  min-block-size: 56px; inline-size: 100%; text-align: start; box-shadow: inset 0 -1px 0 var(--hairline); }
.hist-row .wk { font-family: var(--font-mono); font-size: .875rem; color: var(--text-mid); white-space: nowrap; }
.hist-row .tot { font-family: var(--font-mono); font-size: .875rem; color: var(--text-lo); }
.hist-sq { display: flex; gap: 4px; justify-content: center; }
.hist-sq > i { inline-size: 14px; block-size: 14px; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--hairline-strong); position: relative; overflow: hidden; }
.hist-sq > i[data-s="done"] { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.hist-sq > i[data-s="rest"] { box-shadow: inset 0 0 0 1px var(--focus-rest); border-style: dashed; opacity: .7; }
.hist-sq > i[data-s="skipped"]::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline: 3px; block-size: 1px; background: var(--text-lo); }
.hist-sq > i > b { position: absolute; inset: auto 0 0 0; background: var(--accent-bar); }
.hist-tot { display: flex; gap: var(--s-8); padding-block: var(--s-7); font-family: var(--font-mono); font-size: .875rem; color: var(--text-lo); flex-wrap: wrap; }
.empty { font-style: italic; color: var(--text-mid); padding-block: var(--s-8); }

/* timer sheet */
.timer { display: grid; justify-items: center; gap: var(--s-5); padding-block: var(--s-6) var(--s-8); }
.timer-phase { color: var(--fc, var(--text-mid)); }
.timer-digits { font-family: var(--font-mono); font-size: 3.5rem; line-height: 1; font-weight: 700; color: var(--text-hi); letter-spacing: -.02em; }
.timer-sub { font-size: .875rem; color: var(--text-lo); text-align: center; max-inline-size: 30ch; line-height: 1.4; }
.timer-rounds { display: flex; gap: 3px; inline-size: 100%; }
.timer-rounds > i { flex: 1; block-size: 6px; border-radius: 3px; background: var(--hairline-strong); }
.timer-rounds > i.on { background: var(--accent-bar); }
.timer-adj { display: flex; gap: var(--s-5); }
.timer-adj button { inline-size: 56px; block-size: 56px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-mid); font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; }
.timer-main { inline-size: 100%; block-size: 64px; border-radius: var(--r-md); background: var(--bg-raised-2);
  box-shadow: inset 0 0 0 1px var(--hairline); color: var(--text-hi);
  font-family: var(--font-mono); font-size: .9375rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.timer-main.is-earned { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.timer-close { block-size: 44px; color: var(--text-lo); font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

/* ---------- 12. TOAST & BANNERS ----------------------------------------- */
.toast {
  position: fixed; z-index: 70; inset-inline: var(--gutter); max-inline-size: calc(var(--measure) - var(--gutter) * 2);
  margin-inline: auto; bottom: calc(var(--dock-h) + 12px + env(safe-area-inset-bottom));
  min-block-size: 48px; border-radius: var(--r-md); background: var(--bg-raised-2);
  box-shadow: inset 0 0 0 1px var(--accent-wash), 0 8px 24px rgba(0,0,0,.4);
  display: flex; align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6);
  opacity: 0; transform: translateY(12px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events: none;
}
.toast.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast .msg { flex: 1; font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast .undo { block-size: 44px; padding-inline: var(--s-5); border-radius: var(--r-sm); color: var(--accent-text);
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  display: flex; align-items: center; gap: var(--s-4); flex: none; }
.toast .undo svg { inline-size: 14px; block-size: 14px; }
.toast .undo circle { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 50% 50%; }
@keyframes drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 37.7; } }

.banner {
  background: var(--bg-raised-2); box-shadow: inset 0 0 0 1px var(--hairline-strong);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin-block-start: var(--s-5);
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  font-size: .875rem; line-height: 1.4; color: var(--text-hi);
}
.banner .act { color: var(--accent-text); font-weight: 600; block-size: 44px; display: inline-flex; align-items: center; }
.banner.is-error { box-shadow: inset 0 0 0 1px var(--danger); }
.banner-host { max-inline-size: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 13. VIEW TRANSITIONS ---------------------------------------- */
#view-week, #view-day { transition: transform var(--d-view) var(--ease-inout), opacity var(--d-view) var(--ease-inout); }
.app.is-day #view-week { transform: translateX(-12%); opacity: .4; }
#view-day { transform: translateX(100%); opacity: .6; }
.app.is-day #view-day { transform: translateX(0); opacity: 1; }
.app:not(.is-day) #view-day { position: absolute; inset-block-start: 0; inline-size: 100%; pointer-events: none; }
.app.is-day #view-week { position: absolute; inset-block-start: 0; inline-size: 100%; pointer-events: none; }
.app { position: relative; overflow-x: clip; }

/* ---------- 14. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  /* selectively restore — a state change that is instant AND silent is easy to miss mid-set */
  .slab, .pip > i, .dock-next, .daydone, .toast, .scrim, .sheet {
    transition: background-color 120ms linear, box-shadow 120ms linear,
                color 120ms linear, opacity 120ms linear !important;
  }
  .slab.is-pressed { transform: none; }
  #view-week, #view-day { transition: opacity 100ms linear !important; transform: none !important; }
  .app.is-day #view-week { opacity: 0; }
  .sheet { transform: none !important; opacity: 0; pointer-events: none; }
  .sheet.is-open { opacity: 1; pointer-events: auto; }
  .beat { animation: none; }
}

/* ---------- 15. RESPONSIVE ---------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  .slab { min-block-size: 84px; padding: 14px 16px; }
  .rail-row { min-block-size: 84px; }
  .ring { inline-size: 120px; block-size: 120px; }
  .stat { grid-auto-flow: row; }
}
@media (min-width: 400px) {
  .slab-name { font-size: 1.375rem; }
}
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .dock { position: sticky; inset: auto auto 24px auto; background: var(--bg-raised);
          border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-dock);
          max-inline-size: var(--measure); margin-inline: auto; }
  .instrument { display: grid; grid-template-columns: auto 1fr; gap: var(--s-9); align-items: center; }
  .ring { inline-size: 144px; block-size: 144px; }
  .stats { grid-template-columns: 1fr; margin-block-start: 0; }
  .stat + .stat { box-shadow: inset 0 1px 0 var(--hairline); }
  .stat { justify-items: start; text-align: start; }
}

/* desktop — a genuine two/three-pane instrument, not a stretched phone */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 340px minmax(0,1fr);
         max-inline-size: 1180px; margin-inline: auto; gap: 32px; padding-inline: 32px; align-items: start; }
  .app > .hdr { grid-column: 1 / -1; }
  #view-week, #view-day { position: static !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  #view-day[hidden] { display: none !important; }
  #view-week { grid-column: 1; max-inline-size: none; padding-inline: 0;
               position: sticky; top: 88px; max-block-size: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
  #view-day  { grid-column: 2; max-inline-size: 46rem; padding-inline: 0; }
  .weeknav { max-inline-size: none; padding-inline: 0; }
  .rail-row.is-active { background: var(--bg-raised-2); }
  .rail-row.is-active::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 2px; background: var(--accent-bar); opacity: 1; border-radius: var(--r-lg) 0 0 var(--r-lg); }
  .slab-name { font-size: 1.5rem; }
  .dock { max-inline-size: 640px; margin-inline: 0; }
  .dock-in { max-inline-size: none; }
  .hdr-in { max-inline-size: none; padding-inline: 0; }
  .hdr-in.is-day { display: none; }
  .banner-host { max-inline-size: none; padding-inline: 0; }
  .marginalia { display: none; }
}
@media (min-width: 1280px) {
  .app { grid-template-columns: 340px minmax(0,1fr) 240px; max-inline-size: 1440px; }
  .marginalia { display: grid !important; grid-column: 3; gap: var(--s-7); position: sticky; top: 88px;
                box-shadow: inset 1px 0 0 var(--hairline); padding-inline-start: 32px; padding-block: var(--s-7); }
  .marginalia li { font-size: .875rem; line-height: 1.4; color: var(--text-lo); }
  .marginalia sup { font-family: var(--font-mono); font-size: .6875rem; margin-inline-end: var(--s-3); }
  .marginalia .tip { font-style: italic; color: var(--text-lo); font-size: .875rem; line-height: 1.45; }
}
.marginalia { display: none; }

/* ---------- 16. FORCED COLORS ------------------------------------------- */
@media (forced-colors: active) {
  .rail-row::before, .segbar > i, .dock-seg > i { forced-color-adjust: none; background: CanvasText !important; }
  .pip[aria-checked="true"] > i, .daydone[data-state="done"], .dock-next.is-earned,
  .hist-sq > i[data-s="done"] { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; }
  .slab::before { background: transparent; box-shadow: none; }
  .slab[aria-checked="true"] { outline: 2px solid Highlight; }
  :focus-visible { outline: 2px solid Highlight; }
}

/* ---------- 17. PRINT --------------------------------------------------- */
@media print {
  :root {
    --bg-base:#fff; --bg-raised:#fff; --bg-raised-2:#fff; --bg-sunken:#fff;
    --text-hi:#000; --text-mid:#333; --text-lo:#555; --hairline:#bbb; --hairline-strong:#888;
    --edge-top:none; --edge-bottom:none; --shadow-slab:none;
  }
  .hdr, .dock, .sheet, .scrim, .toast, .weeknav, .slab-acts, .voice, .banner,
  .foot-btn, .daydone, .noterow, .notebox, .marginalia { display: none !important; }
  body { background: #fff; color: #000; }
  .app { display: block; }
  #view-week, #view-day { position: static !important; transform: none !important; opacity: 1 !important; max-inline-size: none; }
  #view-day[hidden] { display: none !important; }
  .rail-row, .slab, .instrument { break-inside: avoid; box-shadow: none; border: 1px solid #bbb; }
  .pip > i { box-shadow: inset 0 0 0 1px #666; }
  .pip[aria-checked="true"] > i { background: #000; }
  .slab::before, .slab::after { display: none; }
  .print-only { display: block !important; }
}
.print-only { display: none; }