/* Throughline
   ---------------------------------------------------------------------------
   PHOTOSENSITIVE SAFETY (WCAG 2.3.1) IS ENFORCED HERE BY ABSENCE.

   This stylesheet contains no `transition`, no `animation`, and no `@keyframes`.
   That is deliberate and it is checked in CI by tools/check-motion.mjs.
   Every visual change over time in this app is driven by js/motion.js, which
   rate-limits luminance changes to fewer than three per second, honours
   prefers-reduced-motion, and refuses large saturated-red transitions.

   If you need something to move or fade, import motion.js. Do not add a
   transition here. The build will fail.
   --------------------------------------------------------------------------- */

/* ── Palette ────────────────────────────────────────────────────────────────
   No saturated reds anywhere. The most "warning-like" colour in the app is a
   muted clay (#a8674f), whose red fraction stays well under the 0.8 threshold
   that WCAG 2.3.1 treats as saturated red.                                    */

/* Calm — sage and deep teal on a warm off-white. The default. */
:root {
  --bg:          #f6f5f2;
  --bg-sunk:     #eceae5;
  --surface:     #ffffff;
  --surface-2:   #f1efea;
  --line:        #d9d5cc;
  --line-strong: #8f8878;
  --ink:         #262421;
  --ink-2:       #524d45;
  --ink-3:       #6f6a61;
  --accent:      #2f6f6a;
  --accent-soft: #dcebe9;
  --accent-ink:  #ffffff;
  --amber:       #7a5e18;
  --amber-soft:  #f3ead4;
  --clay:        #8f5540;
  --clay-soft:   #f0e3dd;
  --guide:       #99aeab;
  --guide-strong:#6d8985;
  --trace:       #2b4a68;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  --pad: clamp(16px, 3.2vw, 28px);
  --tap: 56px;           /* minimum interactive height; affected-hand friendly */
  --shadow: 0 1px 2px rgba(38,36,33,.06), 0 6px 18px rgba(38,36,33,.06);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Warm — cream and umber. */
body[data-theme="warm"] {
  --bg:          #f8f3ea;
  --bg-sunk:     #efe6d6;
  --surface:     #fffdf8;
  --surface-2:   #f4ebdc;
  --line:        #e0d4bf;
  --line-strong: #8d8067;
  --ink:         #2b2620;
  --ink-2:       #574d3f;
  --ink-3:       #746856;
  --accent:      #7a5216;
  --accent-soft: #f0e4cd;
  --amber:       #6f5410;
  --amber-soft:  #f2e7cd;
  --clay:        #8a4f38;
  --clay-soft:   #f1e2d9;
  --guide:       #b6a485;
  --guide-strong:#8a7859;
  --trace:       #4a3a63;
}

/* Meadow — soft green. */
body[data-theme="meadow"] {
  --bg:          #f3f6f1;
  --bg-sunk:     #e6ece2;
  --surface:     #ffffff;
  --surface-2:   #edf2ea;
  --line:        #d3ddcc;
  --line-strong: #7f8b79;
  --ink:         #22271f;
  --ink-2:       #4c5347;
  --ink-3:       #646d5d;
  --accent:      #3c6b3a;
  --accent-soft: #dfeddc;
  --amber:       #6b580f;
  --amber-soft:  #efe9cf;
  --clay:        #8a5340;
  --clay-soft:   #f0e2dc;
  --guide:       #9bb096;
  --guide-strong:#6d8768;
  --trace:       #2d4a5e;
}

/* Harbour — cool blue. */
body[data-theme="harbour"] {
  --bg:          #f2f5f8;
  --bg-sunk:     #e4eaf1;
  --surface:     #ffffff;
  --surface-2:   #ecf1f6;
  --line:        #cfd9e4;
  --line-strong: #7a8694;
  --ink:         #1f242a;
  --ink-2:       #48505a;
  --ink-3:       #5f6874;
  --accent:      #2a5f86;
  --accent-soft: #dbe8f2;
  --amber:       #6a5410;
  --amber-soft:  #efe8d2;
  --clay:        #8a5240;
  --clay-soft:   #f1e3dd;
  --guide:       #99acbe;
  --guide-strong:#697f93;
  --trace:       #1f3f5c;
}

/* Heather — quiet purple. */
body[data-theme="heather"] {
  --bg:          #f6f3f7;
  --bg-sunk:     #eae4ed;
  --surface:     #ffffff;
  --surface-2:   #f1ecf3;
  --line:        #ded4e2;
  --line-strong: #877c8e;
  --ink:         #262029;
  --ink-2:       #524a58;
  --ink-3:       #6a6171;
  --accent:      #5c467a;
  --accent-soft: #e7dff0;
  --amber:       #6c5414;
  --amber-soft:  #f0e8d3;
  --clay:        #8a5240;
  --clay-soft:   #f1e3dd;
  --guide:       #aea1ba;
  --guide-strong:#7b6c8c;
  --trace:       #3a3560;
}

/* Bold — highest contrast, for visual-field or acuity trouble. */
body[data-theme="bold"] {
  --bg:          #ffffff;
  --bg-sunk:     #f0f0f0;
  --surface:     #ffffff;
  --surface-2:   #f4f4f4;
  --line:        #595959;
  --line-strong: #2b2b2b;
  --ink:         #000000;
  --ink-2:       #1a1a1a;
  --ink-3:       #333333;
  --accent:      #00403c;
  --accent-soft: #d3e5e3;
  --amber:       #4a3800;
  --amber-soft:  #f0e8cc;
  --clay:        #6b3520;
  --clay-soft:   #f0e0d9;
  --guide:       #8c8c8c;
  --guide-strong:#4a4a4a;
  --trace:       #001b33;
  --shadow: none;
}

/* Dusk — dark and cool. */
body[data-theme="dusk"] {
  --bg:          #1a1e1f;
  --bg-sunk:     #131617;
  --surface:     #23282a;
  --surface-2:   #2c3234;
  --line:        #3b4245;
  --line-strong: #6d7679;
  --ink:         #eeece7;
  --ink-2:       #c2bcb1;
  --ink-3:       #a09a8e;
  --accent:      #7fc4bb;
  --accent-soft: #1f3a38;
  --accent-ink:  #10201f;
  --amber:       #d9bd7d;
  --amber-soft:  #362f20;
  --clay:        #cf9c85;
  --clay-soft:   #36281f;
  --guide:       #5c7376;
  --guide-strong:#7d9a99;
  --trace:       #a8c8e8;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3);
}

/* Ember — dark and warm. */
body[data-theme="ember"] {
  --bg:          #1e1a17;
  --bg-sunk:     #161311;
  --surface:     #292420;
  --surface-2:   #332d28;
  --line:        #443c35;
  --line-strong: #7a6e63;
  --ink:         #f0ebe4;
  --ink-2:       #c8bfb2;
  --ink-3:       #a79c8d;
  --accent:      #e0b877;
  --accent-soft: #3a2f1c;
  --accent-ink:  #1d1811;
  --amber:       #e2c384;
  --amber-soft:  #38301f;
  --clay:        #d59d80;
  --clay-soft:   #3a2a22;
  --guide:       #6d6152;
  --guide-strong:#8b7c69;
  --trace:       #b9cfe0;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.5 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
        "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Every control opts out of double-tap-to-zoom.
 *
 * An affected hand bounces. A tremor or a rebound on a button reads to iOS as a
 * double-tap, which zooms the page and leaves it zoomed — confusing, and fiddly
 * to undo one-handed. `manipulation` keeps panning and pinch-zoom working while
 * removing the double-tap gesture from the controls specifically, which is the
 * right trade: deliberate zoom stays, accidental zoom goes. */
button, .chip, .tile, .card, .pcard, .choice, .swatch, .toggle, label, a {
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Boot splash ──────────────────────────────────────────────────────────── */

.boot {
  position: fixed; inset: 0; display: grid; place-content: center;
  gap: 14px; justify-items: center; background: var(--bg); z-index: 50;
}
.boot[hidden] { display: none; }
.boot__mark {
  width: 96px; height: 40px;
  border-bottom: 3px solid var(--accent);
  border-radius: 0 0 48px 48px;
}
.boot__text { color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; font-size: 13px; }

/* ── App frame ────────────────────────────────────────────────────────────── */

.app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: var(--safe-t) var(--safe-r) 0 var(--safe-l);
}
.app[hidden] { display: none; }

.appbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 6px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.appbar[data-bare="true"] { border-bottom-color: transparent; }

.appbar__back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 2px;
  min-height: 48px; padding: 6px 12px 6px 4px;
  background: none; border: 0; border-radius: var(--r-full);
  color: var(--accent); font-size: 17px; cursor: pointer;
}
.appbar__back[hidden] { display: none; }

.appbar__title {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.appbar__reps {
  justify-self: end;
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 14px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
}
.appbar__reps[hidden] { display: none; }
.appbar__reps-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.appbar__reps-l { font-size: 12px; opacity: .85; }

.screen {
  min-width: 0;
  padding-bottom: calc(96px + var(--safe-b));
}
.screen:focus { outline: none; }
.screen[data-full="true"] { padding-bottom: 0; display: grid; grid-template-rows: 1fr; min-height: 0; }

/* ── The off-ramp. One tap, from anywhere. ────────────────────────────────── */

.offramp {
  position: fixed;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  z-index: 20;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 20px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 16px; font-weight: 500;
  cursor: pointer;
}
.offramp[hidden] { display: none; }
.offramp:active { background: var(--surface-2); }

/* ── Layout helpers ───────────────────────────────────────────────────────── */

.wrap { width: min(760px, 100%); margin: 0 auto; padding: var(--pad); }
.wrap--wide { width: min(1100px, 100%); }
.stack { display: grid; gap: 16px; }
.stack--tight { gap: 10px; }
.stack--loose { gap: 28px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.h2 { font-size: clamp(22px, 4.4vw, 28px); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.h3 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface); color: var(--ink);
  font-size: 17px; font-weight: 550; text-align: center;
  cursor: pointer; user-select: none;
}
.btn:active { background: var(--surface-2); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:active { background: var(--accent); filter: brightness(.94); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--accent); }
.btn--quiet:active { background: var(--surface-2); }
.btn--wide { width: 100%; }
.btn--lg { min-height: 64px; font-size: 19px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-2);
  font-size: 15px; cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card--flat { box-shadow: none; }
.card--sunk { background: var(--bg-sunk); box-shadow: none; }

/* ── Home ─────────────────────────────────────────────────────────────────── */

.hero { display: grid; gap: 6px; padding: 4px 0 8px; }
.hero__hi { font-size: clamp(26px, 6vw, 36px); font-weight: 650; letter-spacing: -.025em; }

.repbig {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px;
  padding: 20px 22px;
}
.repbig__n {
  font-size: clamp(56px, 14vw, 86px); font-weight: 700; line-height: .9;
  letter-spacing: -.04em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.repbig__l { display: block; font-size: 17px; color: var(--ink-2); }
.repbig__sub { display: block; font-size: 14px; color: var(--ink-3); margin-top: 4px; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.tile {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px;
  min-height: 84px; padding: 14px 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); cursor: pointer;
}
.tile:active { background: var(--surface-2); }
.tile__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent);
}
.tile__name { display: block; font-size: 17px; font-weight: 600; }
.tile__note { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.tile__reps {
  min-width: 42px; text-align: right;
  font-size: 20px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.tile__reps[data-has="true"] { color: var(--accent); }

/* ── Exercise stage ───────────────────────────────────────────────────────── */

.stage {
  position: relative;
  display: grid; grid-template-rows: 1fr auto;
  min-height: 0; height: 100%;
  background: var(--bg-sunk);
}
.stage__surface { position: relative; min-height: 0; overflow: hidden; }
.stage__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; -ms-touch-action: none;
  cursor: crosshair;
}

.stage__prompt {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 3; max-width: min(92%, 620px);
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 16px; text-align: center; color: var(--ink-2);
}
.stage__prompt[hidden] { display: none; }
.stage__prompt b { color: var(--ink); font-weight: 650; }

.stage__bar {
  z-index: 3;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px calc(14px + var(--safe-r)) calc(12px + var(--safe-b)) calc(14px + var(--safe-l));
  background: var(--surface); border-top: 1px solid var(--line);
}
.stage__count {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 16px; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
}
.stage__count b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stage__count span { font-size: 13px; }

.hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 3; max-width: 90%;
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--amber-soft); color: var(--amber);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font-size: 15px; text-align: center;
}
.hint[hidden] { display: none; }

/* ── Pairs (card matching) ────────────────────────────────────────────────────
   No transition or animation here: the flip is a rotateY driven frame by frame
   from js/motion.js, so it shares the one loop and honours reduced motion.

   The class is `.pcard`, not `.card`. `.card` is the design-system content card
   used by every panel in the app, and naming a playing card the same thing made
   the later rule win the cascade — every card in Throughline inherited
   `aspect-ratio: 1/1`, `padding: 0` and `border: 0`, which blew the home
   screen's rep counter up to a full square and pushed the exercises below the
   fold. Game classes stay namespaced.                                          */

.stage__surface--pad {
  display: grid;
  place-items: center;
  /* --prompt-space is measured in JS, because the prompt wraps to two or three
     lines depending on width and a fixed guess is wrong at some size. The space
     stays reserved after the prompt hides, deliberately: the board must not jump
     the moment she taps her first card. */
  padding: var(--prompt-space, 62px) clamp(10px, 2.4vmin, 26px) clamp(10px, 2.4vmin, 26px);
}

.board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: clamp(8px, 1.6vmin, 18px);
  width: min(100%, 760px);
  max-height: 100%;
}
/* Big-reach mode: fill the stage edge to edge so the arm has to travel. */
.board[data-sweep="true"] {
  width: 100%;
  max-width: none;
  gap: clamp(10px, 2.6vmin, 34px);
}

.pcard {
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 700px;
  -webkit-tap-highlight-color: transparent;
}
.pcard[disabled] { cursor: default; }

.pcard__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.pcard__side {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.pcard__back { background: var(--surface-2); }
.pcard__front { background: var(--surface); transform: rotateY(180deg); }

.pcard__glyph { width: 62%; height: 62%; display: block; }
.pcard__glyph--back { width: 46%; height: 46%; opacity: .5; }

.pcard[data-matched="true"] .pcard__side {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.pcard[data-matched="true"] .pcard__front { background: var(--accent-soft); }

/* ── Sorting (drag to place) ──────────────────────────────────────────────────
   No transition here either: a drag writes `transform` straight from the pointer
   handler, and the two automatic movements are tweened from js/motion.js.        */

.field-board { position: absolute; inset: 0; touch-action: none; }

.hole, .piece, .tray {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  will-change: transform;
}

.hole {
  border-radius: var(--r-md);
  opacity: .75;
}
.hole svg { width: 78%; height: 78%; display: block; }
.hole[data-filled="true"] { opacity: .3; }
/* Pointed out only after several returns on the same piece. */
.hole[data-pointed="true"] {
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent);
}

.tray {
  border: 3px dashed var(--guide-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  align-content: end;
  padding-bottom: 10px;
  opacity: .9;
}
.tray__label {
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.piece {
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.14));
}
.piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.piece[data-held="true"] {
  cursor: grabbing;
  z-index: 5;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.26));
}
/* A piece that is home must never intercept the next drag. The window-level
   listeners already guarantee a drag completes, but taking these out of hit
   testing entirely is the belt to that braces. */
.piece[data-placed="true"] { cursor: default; pointer-events: none; }
.piece[disabled] { cursor: default; }

/* ── Word / target readouts ───────────────────────────────────────────────── */

.wordcard { text-align: center; display: block; }
.wordcard__w, .wordcard__d { display: block; }
.wordcard__w { font-size: clamp(30px, 7vw, 46px); font-weight: 600; letter-spacing: .01em; }
.wordcard__d { font-size: 15px; color: var(--ink-2); }

/* ── Progress gallery ─────────────────────────────────────────────────────── */

.pair { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plate {
  display: grid; gap: 10px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.plate__cap { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.plate__box {
  aspect-ratio: 16 / 7; width: 100%;
  background: var(--surface); border-radius: var(--r-sm);
}
.plate__box svg { display: block; width: 100%; height: 100%; }

/* ── Tables ───────────────────────────────────────────────────────────────── */

.tablewrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th, table.t td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.t th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
table.t td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Form controls ────────────────────────────────────────────────────────── */

.field { display: grid; gap: 8px; }
.field__label { font-size: 15px; font-weight: 600; }
.field__help { font-size: 14px; color: var(--ink-3); }

.input {
  min-height: var(--tap); padding: 0 16px; width: 100%;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); font-size: 18px;
}
.input--name { font-size: 24px; font-weight: 600; text-align: center; }

textarea.input { padding: 12px 16px; min-height: 92px; line-height: 1.45; resize: vertical; }

.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice {
  display: grid; gap: 4px; align-content: center;
  min-height: 76px; padding: 12px 16px; text-align: left;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
}
.choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.choice__t { display: block; font-size: 16.5px; font-weight: 600; }
.choice__d { display: block; font-size: 13.5px; color: var(--ink-3); }
.choice[aria-pressed="true"] .choice__d { color: var(--accent); }

.swatchrow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.swatch {
  border-radius: var(--r-md);
  border: 2px solid var(--line); cursor: pointer; padding: 10px 8px 8px; overflow: hidden;
  display: grid; gap: 8px; justify-items: center;
}
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Each swatch previews itself: the app's mark, in that scheme's own colours. */
.swatch__mark { display: block; position: relative; width: 100%; height: 26px; }
.swatch__dot {
  position: absolute; left: 6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
}
.swatch__rule {
  position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; border-radius: 2px;
}
.swatch__n { font-size: 12px; font-weight: 600; }

.toggle {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  min-height: var(--tap); padding: 12px 0; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer;
}
.toggle:last-child { border-bottom: 0; }
.toggle__t { display: block; font-size: 16.5px; font-weight: 550; }
.toggle__d { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.toggle__sw {
  width: 54px; height: 32px; border-radius: var(--r-full);
  background: var(--line); border: 1px solid var(--line-strong);
  position: relative; flex: none;
}
.toggle[aria-pressed="true"] .toggle__sw { background: var(--accent); border-color: var(--accent); }
.toggle__sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
}
.toggle[aria-pressed="true"] .toggle__sw::after { left: auto; right: 3px; }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper__b {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.stepper__v { min-width: 64px; text-align: center; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ── Sheet (break prompts, session end, confirmations) ────────────────────── */

.sheet-host {
  position: fixed; inset: 0; z-index: 60;
  display: grid; align-items: end; justify-items: center;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  padding: calc(16px + var(--safe-t)) 12px calc(16px + var(--safe-b));
}
.sheet-host[hidden] { display: none; }
@media (min-width: 640px) { .sheet-host { align-items: center; } }

.sheet {
  width: min(520px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  padding: 24px;
  display: grid; gap: 16px;
  max-height: 86vh; overflow: auto;
}
.sheet__t { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.sheet__b { font-size: 16.5px; color: var(--ink-2); line-height: 1.5; }
.sheet__acts { display: grid; gap: 10px; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */

.toast-host {
  position: fixed; z-index: 70;
  left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b));
  display: grid; gap: 8px; justify-items: center;
  width: min(560px, calc(100% - 24px));
  pointer-events: none;
}
.toast {
  padding: 12px 20px; border-radius: var(--r-full);
  background: var(--ink); color: var(--bg);
  font-size: 15.5px; text-align: center;
  box-shadow: var(--shadow);
}

/* ── Charts (in-app; the OT export has its own inlined styles) ────────────── */

.chart { width: 100%; display: block; }
.chart text { font: 11px ui-rounded, system-ui, sans-serif; fill: var(--ink-3); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .series { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { fill: var(--accent); }
.chart .rough { fill: var(--clay); }
.chart .bar { fill: var(--accent); }
.chart .bar-2 { fill: var(--guide-strong); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-2); }
.legend__i { display: inline-flex; align-items: center; gap: 6px; }
.legend__k { width: 12px; height: 12px; border-radius: 3px; }

.note {
  font-size: 13.5px; line-height: 1.45; color: var(--ink-3);
  border-left: 3px solid var(--line); padding-left: 12px;
}

/* ── Full-day acknowledgement ─────────────────────────────────────────────── */

.goalmoment { display: grid; gap: 12px; justify-items: center; text-align: center; }
.goalmark {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}
.goalmoment__line { font-size: 19px; font-weight: 600; }
.goalmoment__sub { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

/* ── Install-to-Home-Screen card ──────────────────────────────────────────── */

.install { border-left: 4px solid var(--amber); }
.install__steps {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.install__steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 15px;
  line-height: 1.45;
}
.install__n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px; font-weight: 700;
}

/* ── Inline document preview (the therapist report) ───────────────────────── */

.docframe {
  width: 100%;
  height: min(60vh, 560px);
  /* A floor in absolute units. Viewport units briefly report zero during an
     iPad rotation, and a preview that collapses to a hairline looks like the
     report failed to build. */
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  display: block;
}

/* ── Empty states ─────────────────────────────────────────────────────────── */

.empty { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 36px 16px; color: var(--ink-3); }
.empty__t { font-size: 17px; color: var(--ink-2); font-weight: 550; }

/* ── Print (the in-app progress view is not the export, but let it print) ─── */

@media print {
  .offramp, .appbar { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; }
}