/* =============================================================
   Checkers + Hex — design tokens (CCD round 2, docs/design/visual-v2/)
   Every colour, size, spacing, radius and timing lives here.
   Light is the default; [data-theme="dark"] swaps tokens only —
   the layout and the signals are identical in both themes.
   ============================================================= */

:root {
  /* ── colour: one meaning per token ─────────────────────────── */
  --c-bg: #FFF8EC;              /* canvas */
  --c-surface: #FFFFFF;         /* footer, cards, drawer, toasts */
  --c-neutral-bar: #EDE8DC;     /* bar when it is nobody's turn */
  --c-line: #17171C;            /* outlines of controls and panels */
  --c-soft: #D9D3C7;            /* quiet dividers, inactive borders */
  --c-text: #17171C;
  --c-muted: #55525E;
  --c-ink: #26338F;             /* Ink pieces + Ink's bar · circle */
  --c-ink-on: #FFFFFF;
  --c-ink-stroke: #17171C;
  --c-ink-dot: #FFFFFF;
  --c-chalk: #FFFFFF;           /* Chalk pieces + Chalk's bar · diamond */
  --c-chalk-on: #17171C;
  --c-chalk-stroke: #17171C;
  --c-chalk-dot: #17171C;
  --c-capture: #FFD12E;         /* capture only: ring, arc, ×, stripe, MUST JUMP */
  --c-capture-on: #17171C;
  --c-landing-fill: #FFF0A8;    /* landing cell */
  --c-land-stroke: #17171C;
  --c-edge: #17171C;            /* casing around capture and win marks */
  --c-win: #12B886;             /* win only: path line, lit rails, CONNECTED */
  --c-win-on: #17171C;
  --c-rail: #17171C;            /* the four neutral goal edges */
  --c-cell: #ECE6DA;            /* round 5: the board is tinted, not the piece (Chalk stays #FFFFFF) */
  --c-cell-stroke: #17171C;
  --c-locked: #DDD6C8;          /* can't place now · always with hatching · page > board > locked */
  --c-hatch: #BDB4A3;
  --c-rail-inner: #FFF8EC;      /* round 5: the thin inner line of the double (left/right) rails = page colour */
  --c-nbr-tint: rgba(23, 23, 28, .08);   /* round 5: six neighbours on piece hover (desktop) */
  --c-ghost: #6E6B78;           /* the past: removed ghosts, trails */
  --c-no: #55525E;              /* neutral "no" mark */
  --c-guide: #17171C;           /* hover outline, axis guides */
  --c-faint: #17171C;           /* "capture here" marks inside cards */
  --c-piece-shadow: #17171C;
  --c-btn: #FFFFFF;
  --c-btn-on: #17171C;
  --c-primary: #17171C;
  --c-primary-on: #FFFFFF;
  --c-scrim: rgba(255, 248, 236, .8);
  --c-tag-bg: #17171C;
  --c-tag-on: #FFFFFF;
  /* round 4 (4g) */
  --c-scan: #17171C;            /* where the computer looks (M10, Easy/Medium) · dashed, neutral */
  --c-stopped: var(--c-ghost);  /* a jump a win stopped (M19) · dashed arc + stop bar */
  --c-count-on: #17171C;        /* repeat counter dot, filled (outlined = off) */

  /* ── stroke and shadow ─────────────────────────────────────── */
  --bw: 3px;
  --bw-control: 2.5px;
  --bw-thin: 2px;
  --bar-border: 3px solid #17171C;
  --piece-border: 2.5px solid #17171C;
  --shadow: 4px 4px 0 #17171C;
  --shadow-sticker: 3px 3px 0 #17171C;
  /* ── hosting: "Work in progress" note on S1 (site.js, docs/deploy/PAGES.md) ── */
  --c-wip-bg: var(--c-surface);
  --c-wip-text: var(--c-muted);
  --c-wip-border: var(--c-soft);
  --c-wip-tag: var(--c-neutral-bar);
  --c-wip-tag-on: var(--c-text);
  --wip-max: 360px;             /* never wider than the left column; the board stays clear */
  --wip-close: 32px;            /* desktop close target; phones use --ph-btn (44px) */

  /* ── type ──────────────────────────────────────────────────── */
  /* Bricolage Grotesque is bundled in fonts/ (see fonts.css); fallbacks kept. */
  --font-family: 'Bricolage Grotesque', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --fs-display: 104px;
  --fs-bar: 44px;
  --fs-bar-instr: 19px;
  --fs-bar-long: 34px;          /* names over 12 characters */
  --fs-title: 36px;
  --fs-menu-title: 30px;
  --fs-pitch: 28px;
  --fs-drawer-title: 26px;
  --fs-play: 22px;
  --fs-sticker: 21px;
  --fs-lg: 20px;
  --fs-md: 18px;
  --fs-body: 17px;
  --fs-sm: 16px;
  --fs-xs: 15px;
  --fs-aid: 13px;
  --fs-label: 12px;
  --ph-kicker: 13px;            /* S1 kicker on phones/tablets (mouse: fluid, see the (pointer: fine) block) */
  --fs-bar-instr-fl: clamp(15px, calc(15px + 4 * (100vw - 1024px) / 76), 19px);   /* desktop bar instruction: 15 at 1024 → 19 at 1100 */
  --fs-goal-fl: clamp(15px, calc(15px + 2 * (100vw - 1024px) / 76), 17px);        /* desktop footer goal: 15 at 1024 → 17 at 1100 */
  --fw-display: 800;
  --fw-bold: 700;
  --fw-semi: 600;
  --ls-display: -.04em;
  --ls-bar: -.03em;
  --ls-label: .1em;
  --lh-display: .86;
  --lh-tight: 1.2;
  --lh-body: 1.3;

  /* ── space · radius · layout ───────────────────────────────── */
  --sp-half: 2px;
  --sp-3q: 3px;
  --sp-1h: 5px;
  --bw-heavy: 3px;
  --fs-tag-xs: 11px;
  --sz-btn-icon: 36px;
  --sz-shape-20: 20px;
  --sz-shape-20d: 16px;
  --sz-shape-24: 24px;
  --sz-shape-24d: 18px;
  --sz-shape-26: 26px;
  --sz-shape-26d: 20px;
  --sz-replay-btn: 38px;
  --sz-replay-btn-h: 34px;
  --sz-replay-play: 46px;
  --sz-frame-n: 28px;
  --sz-frame-n-inset: 10px;
  --sz-dot: 10px;
  --sz-switch-w: 52px;
  --sz-switch-h: 30px;
  --sz-switch-knob: 19px;
  --sz-switch-on: 25px;
  --sz-theme-btn-w: 42px;       /* round 4f: S4 theme icon button (≥ 40 px touch target) */
  --sz-theme-btn-h: 40px;
  --sz-theme-icon: 20px;
  --sz-count-dot: 10px;         /* repeat counter */
  --seat-card-w: 210px;         /* round 4d: seat cards on S2 */
  --cpu-panel-w: 420px;
  --aid-key-w: 62px;
  --card-rule-w: 320px;
  --board-cell-hero: 28;
  --board-cell-setup: 13;
  --board-cell-card: 24;
  --board-cell-card-full: 11;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 40px;
  --sp-8: 56px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --bar-h: 84px;
  --stripe-h: 12px;
  --stripe-band: 12px;
  --footer-h: 62px;
  --side-col: 190px;            /* UP NEXT / info columns beside the board */
  /* toast + NEW RULE chip: empty bottom-left corner of the board area (CCD amendment 1) */
  --toast-x: 24px;
  --toast-y: 18px;
  --toast-w: 210px;
  --toast-gap: 8px;
  --toast-pad: 12px 14px;
  --toast-r: 14px;
  --toast-fs: 16px;
  --toast-fw: 600;
  --toast-lh: 1.25;
  --toast-btn-fs: 15px;
  --toast-btn-fw: 700;
  --toast-btn-pad: 6px 12px;
  --toast-btn-bw: 2px;
  --toast-btn-r: 9px;
  --chip-max-w: 190px;
  --card-w: 560px;              /* round 5: one stage that loops (was three frames, 860) */
  --card-stage-h: 300px;
  --drawer-w: 480px;
  --drawer-pad: 16px 22px;
  --drawer-gap: 9px;
  --menu-w: 380px;
  --setup-side: 300px;
  --hero-w: 620px;
  --icon-bar: 40px;
  --icon-bar-diamond: 30px;
  --icon-bar-border: 4px;
  --icon-sm: 22px;
  --name-max: 16;               /* typed names, visible characters (graphemes) */
  /* optional names on S2 — layout-tokens.json setup.names (CCD names answer) */
  --name-field-h: 48px;
  --name-field-r: 12px;
  --name-field-px: 14px;
  --name-gap: 12px;
  --name-seat-w: 52px;
  --name-seat-fs: 12.5px;
  --name-value-fs: 16px;        /* ≥ 16 px: no iOS zoom on focus */
  --name-value-fs-desk: 17px;
  --name-ph-fs: 16px;
  --name-icon: 20px;
  --name-clear-hit: 44px;
  --name-helper-fs: 13px;
  --name-label-fs: 11.5px;
  --name-label-ls: .1em;
  --name-desk-gap: 12px;
  --name-bw: 2.5px;             /* light rest: 2.5 line · dark 1.5 line */
  --name-bw-focus: 2.5px;       /* light focus: 2.5 line + ring · dark 2 accent, no ring */
  --name-fill: var(--c-surface);
  --name-border-focus: var(--c-line);
  --name-ring: 0 0 0 3px var(--c-accent);
  --c-accent: var(--c-ink);     /* CCD "accent": no accent colour exists; Ink blue (QUESTIONS NAMES-1) */
  --sticker-tilt: -3deg;
  --dim: .5;                    /* board while the computer thinks / on draw */
  --scrubber-h: 8px;
  --scrubber-knob: 18px;

  /* ── round 5: phones and tablets (docs/design/visual-v2/round5/layout-tokens.json) ──
     Regular chrome by default; [data-chrome] blocks below swap the set. */
  --touch-target: 44px;
  --hit-edge: 12px;             /* edge hover zone along each rail (desktop) */
  --line-key-w: 28px;           /* the line key glyph */
  --line-key-h: 20px;
  --line-key-sw: 2.5px;
  --ph-bar: 60px;
  --ph-dock: 64px;
  --ph-setup-dock: var(--ph-dock);   /* S2 footer; mouse windows ramp it 72 → 80 (CCD setupDock) */
  --ph-title: 24px;
  --ph-line2: 13.5px;
  --ph-glyph: 26px;
  --ph-sticker: 12.5px;
  --ph-stripe: 6px;
  --ph-text: 14px;
  --ph-text2: 15.5px;
  --ph-label: 10.5px;
  --ph-label2: 12.5px;
  --ph-pad: 14px;
  --ph-gap: 11px;
  --ph-btn: 44px;
  --ph-btn-fs: 15px;
  --ph-btn-primary: 48px;
  --ph-btn-launch: 56px;
  --ph-action: 36px;
  --ph-toast-min: 50px;
  --ph-replay-extra: 44px;
  --ph-stage-v: 12px;           /* stage padding, [vertical total, horizontal total] */
  --ph-stage-h: 8px;
  --ph-rail-w: 120px;
  --ph-sheet-r: 20px;
  --ph-handle-w: 40px;
  --ph-handle-h: 5px;
  --ph-sheet-land: 620px;
  --ph-sheet-md: 560px;
  --ph-sheet-gap: 8px;
  --ph-howto-head: 56px;
  --ph-max-cell: 0;             /* 0 = no cap; tablet boards stop at s = 36 (62 px cells) */
  --ph-btn-wide: 56px;
  --ph-seg-setup: 46px;
  --ph-s1-pitch: 22px;
  --ph-dock-pad: 6px;
  --ph-box-r: 12px;
  --card-stage-pad: 14px;       /* s = min((stageW − 14) / boardW, (stageH − 14) / boardH) */
  --land-stage-w: min(300px, 48%);
  --sz-cap-n: 20px;
  --sz-step-dot: 8px;
  --ph-upnext: 18px;
  --ph-up: 16px;                /* tablet bar: UP NEXT column text (mouse: fluid) */
  --ph-s1-title: 60px;
  --ph-s1-tag: 20px;
  --ph-theme-half: 72px;
  --card-stage-crop: 240px;     /* rule card stage height, phone regular */
  --card-stage-full: 320px;
  --card-title: 23px;
  --card-text: 15px;
  --card-cap-min: 40px;
  --card-cell-max: 28;          /* desktop crop cells stop at s = 28 */

  /* ── board geometry (multiples of the cell radius) ─────────── */
  --board-cell: 26;             /* px on a laptop, before scaling to fit */
  --bd-inset: 1;
  --bd-cell-sw: 1.5;            /* px */
  --bd-rail-w: .3;
  --bd-rail-trim: .62;
  --bd-rail-inner: .12;         /* round 5: double-rail inner line (left/right) */
  --bd-edge-hot: 1.6;           /* round 5: edge hover/focus widens both rails of the pair */
  --bd-pad-tight: .14;          /* round 5: phone/tablet pad = s × (rail × .5 + this) */
  --bd-pending-sw: .12;         /* round 5: two-tap pending outline */
  --bd-press-halo: 1.45;        /* round 5: touch press halo radius */
  --bd-piece-r: .54;
  --bd-ink-sw: .06;
  --bd-chalk-sw: .09;
  --bd-diamond: 1.22;
  --bd-sh-x: .07;
  --bd-sh-y: .09;
  --bd-glow: 0;                 /* 1 = soft glow behind rings (Dark) */
  --bd-ring: .8;
  --bd-ring-sw: .1;
  --bd-ring-sel-sw: .16;
  --bd-ring-case: .2;
  --bd-ring-sel-case: .26;
  --bd-ring-outer: 1.02;
  --bd-landing: .4;
  --bd-landing-sw: .08;
  --bd-dot: .1;
  --bd-last-dot: .12;
  --bd-cross: .26;
  --bd-cross-sw: .1;
  --bd-cross-case: .2;
  --bd-arc-lift: 1.15;
  --bd-arc-sw: .09;
  --bd-arc-case: .2;
  --bd-win-sw: .24;
  --bd-win-case: .4;
  --bd-win-dot: .11;
  --bd-win-dot-case: .17;
  --bd-threat: .72;
  --bd-threat-sw: .1;
  --bd-ghost-sw: .06;
  --bd-trail-sw: .07;
  --bd-no: .34;
  --bd-no-sw: .09;
  --bd-hatch-sw: .05;
  --bd-hover-sw: .08;
  --bd-preview-op: .42;
  --bd-pad: .3;
  --bd-fly-lift: var(--m-jump-arc-lift);   /* A2 flight arc (the drawn arcs use --bd-arc-lift) */

  /* ── motion: CCD round 3 + 4, from docs/design/visual-v2/motion-tokens.json ──
     One set for Light and Dark. Reduced motion (below) makes movement instant
     and keeps --dur-fade for the fades that replace it. */
  --dur-instant: 0ms;
  --dur-lift: 60ms;
  --dur-land: 60ms;
  --dur-appear: 80ms;
  --dur-hint-out: 100ms;
  --dur-text-swap: 110ms;
  --dur-fade: 120ms;
  --dur-node: 120ms;
  --dur-trail: 140ms;
  --dur-ghost-in: 140ms;
  --dur-sticker-pop: 140ms;
  --dur-place: 160ms;
  --dur-ghost: 200ms;
  --dur-rail: 200ms;
  --dur-handoff: 220ms;
  --dur-jump: 320ms;
  --dur-path: 600ms;
  --dur-focus-dim: 140ms;
  --dur-chain-stop: 120ms;
  --dur-warn-in: 200ms;
  --delay-ghost-outline: 60ms;
  --delay-dot-in: 80ms;
  --delay-text-in: 110ms;
  --delay-cross: 120ms;
  --delay-apex: 160ms;
  --delay-land: 260ms;
  --delay-trail: 320ms;
  --delay-rails: 500ms;
  --delay-win-bar: 600ms;
  --delay-win-label-in: 710ms;
  --ease-linear: linear;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --m-jump-arc-lift: 1.5;        /* flight curve control point, × cell radius */
  --m-trail-arc-lift: 1.15;
  --m-lift-scale: 1.12;
  --m-place-start-scale: 1.15;
  --m-ghost-in-scale: .9;            /* A3 dashed ghost grows .9 → 1 */
  --m-ghost-end-scale: 0.6;
  --m-sticker-start-scale: .9;       /* A5 CONNECTED sticker .9 → 1 */
  --m-jump-shadow-op: .55;           /* A2 ground shadow while the piece is in the air */
  --m-label-rise: 6px;
  --m-max-wait: 1000ms;          /* the player never waits longer to act */
  --m-win-input: calc(var(--delay-win-label-in) + var(--dur-sticker-pop));   /* S6 buttons open (850 ms) */
  --op-unfocused: .3;                /* round 4: jumps not in focus (mouse / keyboard) */
  --t-scan-max: 3;
  /* effect clocks: time already elapsed in each running effect; app.js sets them on #game (0 = just started) */
  --fx-drop: 0ms;
  --fx-jump: 0ms;
  --fx-win: 0ms;
  --fx-bar: 0ms;
  --fx-warn: 0ms;
  --fx-focus: 0ms;
  --fx-scan: 0ms;                   /* round 4: at most 3 cells where the computer looks */

  /* ── older motion names (round 2), now aliases of the round 3 tokens where they match ── */
  --t-fast: var(--dur-sticker-pop);
  --t-base: var(--dur-ghost);
  --t-turn: var(--dur-handoff);
  --t-place: var(--dur-place);
  --t-select: 180ms;
  --t-hold: var(--dur-place);   /* placement settles (A1), then the jump starts (A2) */
  --t-jump: var(--dur-jump);
  --t-path: var(--dur-path);
  --t-pulse: 900ms;
  --t-beat: 650ms;              /* how long a finished turn stays before handing over; capped so input opens within --m-max-wait */
  --t-ai-min: 400ms;
  --t-ai-max: 900ms;
  --t-replay-step: 700ms;
  --t-watch-step: 640ms;        /* "Watch again": half speed */
  --t-card-frame: 1200ms;
  --t-card-step: 2000ms;        /* round 5: rule cards loop 1 → 2 → 3, 2 s a step (6 s) */
  --t-cue-delay: 250ms;         /* round 5: capture-line cue after a 250 ms hover (touch: no delay) */
  --t-pending-idle: 6000ms;     /* round 5: a two-tap pending piece clears after 6 s idle */
  --t-toast-dwell: 4000ms;      /* round 5: a dock toast stays 4 s */
  --t-toast-life: 6000ms;
  /* round 6 — orientation (layout-tokens orientationFlow, motion-tokens round6) */
  --t-orient-land: 300ms;       /* sideways must hold this long before the turn card leaves */
  --t-orient-port: 400ms;       /* upright must hold this long before the Paused card shows */
  --dur-turn-loop: 3400ms;      /* turn picture: 0.5 s upright, 800 ms turn, hold, 300 ms fade */
  --dur-turn: 800ms;
  --ease-turn: cubic-bezier(0.6, 0, 0.2, 1);
}

[data-theme="dark"] {
  --name-bw: 1.5px;
  --name-bw-focus: 2px;
  --name-fill: var(--c-bg);
  --name-border-focus: var(--c-accent);
  --name-ring: none;
  --c-bg: #101418;
  --c-surface: #171C22;
  --c-neutral-bar: #232A33;
  --c-line: #3A4350;
  --c-soft: #2A313B;
  --c-text: #E8EAED;
  --c-muted: #9AA3AE;
  --c-ink: #8096FF;
  --c-ink-on: #101418;
  --c-ink-stroke: none;
  --c-ink-dot: #101418;
  --c-chalk: #F1E8D6;
  --c-chalk-on: #101418;
  --c-chalk-stroke: none;
  --c-chalk-dot: #101418;
  --c-capture: #FFB020;
  --c-capture-on: #101418;
  --c-landing-fill: rgba(255, 176, 32, .14);
  --c-land-stroke: #FFB020;
  --c-edge: #101418;
  --c-win: #34D399;
  --c-win-on: #101418;
  --c-rail: #AEB5BF;
  --c-cell: #1D232B;
  --c-cell-stroke: #2F3742;
  --c-rail-inner: #101418;
  --c-nbr-tint: rgba(232, 234, 237, .08);
  --c-locked: #161B21;
  --c-hatch: #2C3540;
  --c-ghost: #7C8592;
  --c-no: #9AA3AE;
  --c-guide: #AEB5BF;
  --c-faint: #FFB020;
  --c-piece-shadow: rgba(0, 0, 0, .5);
  --c-btn: #171C22;
  --c-btn-on: #E8EAED;
  --c-primary: #E8EAED;
  --c-primary-on: #101418;
  --c-scrim: rgba(16, 20, 24, .8);
  --c-tag-bg: #E8EAED;
  --c-tag-on: #101418;
  --c-scan: #AEB5BF;
  --c-count-on: #E8EAED;

  --bw: 1.5px;
  --bar-border: 1px solid #2A313B;
  --piece-border: 0px solid transparent;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --shadow-sticker: 3px 3px 0 #101418;

  --bd-inset: .92;
  --bd-cell-sw: 1;
  --bd-rail-w: .2;              /* round 5: widened from .14 for the double rails */
  --bd-rail-inner: .08;
  --bd-piece-r: .56;
  --bd-ink-sw: 0;
  --bd-chalk-sw: 0;
  --bd-sh-x: 0;
  --bd-glow: 1;
}

/* round 5 chrome sets (app.js sets data-chrome on <html> from the live viewport) */
[data-chrome="compact"] {
  --ph-bar: 50px; --ph-dock: 56px; --ph-title: 21px; --ph-line2: 12.5px; --ph-glyph: 22px; --ph-sticker: 11px; --ph-stripe: 5px;
  --ph-text: 13px; --ph-text2: 14.5px; --ph-label: 10px; --ph-label2: 12px; --ph-pad: 12px; --ph-gap: 10px; --ph-btn-fs: 14px; --ph-toast-min: 44px;
  --ph-stage-v: 8px; --card-stage-crop: 196px; --card-stage-full: 250px;
}
[data-lay="xs"] { --ph-title: 20px; --card-stage-full: 232px; --card-title: 21px; --card-text: 14px; --card-cap-min: 54px; --ph-s1-title: 50px; }
[data-chrome="tablet"] {
  --ph-bar: 84px; --ph-dock: 80px; --ph-title: 40px; --ph-line2: 17px; --ph-glyph: 34px; --ph-sticker: 17px; --ph-stripe: 10px;
  --ph-text: 17px; --ph-text2: 18px; --ph-label: 12px; --ph-label2: 14px; --ph-pad: 28px; --ph-gap: 16px; --ph-btn-fs: 16px; --ph-toast-min: 60px;
  --ph-stage-v: 32px; --ph-stage-h: 48px; --ph-max-cell: 36; --card-stage-crop: 280px; --card-stage-full: 320px; --card-title: 28px; --ph-s1-title: 104px; --ph-s1-tag: 28px;
}
[data-chrome="rail"] {
  --ph-title: 17px; --ph-line2: 12px; --ph-glyph: 20px; --ph-sticker: 11px; --ph-text: 12.5px; --ph-text2: 13.5px; --ph-label: 10px; --ph-label2: 11px;
  --ph-pad: 10px; --ph-gap: 8px; --ph-btn-fs: 14px; --ph-stripe: 6px; --ph-stage-v: 8px; --ph-s1-title: 54px;
}
[data-lay="sm"][data-wide="1"] { --ph-s1-title: 66px; }
/* round 6 (docs/design/visual-v2/round6/layout-tokens.json turnCard, sheets, ruleCard.land) */
:root {
  --tc-title: 28px; --tc-body: 15.5px; --tc-hint: 12.5px; --tc-text-max: 340px; --tc-summary-max: 400px; --tc-summary-min: 56px;
  --tc-btn: 48px; --tc-bezel: 6px; --tc-border: 3px; --tc-gap: 12px; --tc-pill: 12.5px;
  --land-howto-head: 48px; --land-card-title: 20px; --land-card-text: 13.5px; --land-margin: 12px;
}
[data-lay="xs"] { --tc-title: 25px; --tc-body: 14.5px; }

/* Fluid resizing with a mouse — CCD fluid model (notes/CCD-fluid-model-2026-10-11.md).
   Mouse windows: sm < 600 · md 600–1199 (tablet chrome) · lg ≥ 1200 (desktop chrome).
   md chrome is a straight line from phone "regular" at 600 to the tablet size at 1200,
   clamp(min, a + b·vw, max) in rem: flat below 600 (sm meets md there), fixed above 1200.
   The board is capped in app.js (layout.js mdCap / lgCell). Touch phones and tablets do not
   match this block and keep the round-5/6 sets above; landscape rails keep theirs too.
   Same table as layout.js MD_RAMP (tests/fluid.test.js). */
@media (pointer: fine) {
  :root:not([data-lay="land"]) {
    --ph-title: clamp(1.5rem, calc(0.5rem + 2.6667vw), 2.5rem);
    --ph-line2: clamp(0.84375rem, calc(0.625rem + 0.5833vw), 1.0625rem);
    --ph-glyph: clamp(1.625rem, calc(1.125rem + 1.3333vw), 2.125rem);
    --ph-sticker: clamp(0.78125rem, calc(0.5rem + 0.75vw), 1.0625rem);
    --ph-stripe: clamp(0.375rem, calc(0.125rem + 0.6667vw), 0.625rem);
    --ph-text: clamp(0.875rem, calc(0.6875rem + 0.5vw), 1.0625rem);
    --ph-label: clamp(0.65625rem, calc(0.5625rem + 0.25vw), 0.75rem);
    --ph-pad: clamp(0.875rem, calc(0rem + 2.3333vw), 1.75rem);
    --ph-bar: clamp(3.75rem, calc(2.25rem + 4vw), 5.25rem);
    --ph-dock: clamp(4rem, calc(3rem + 2.6667vw), 5rem);
    --ph-toast-min: clamp(3.125rem, calc(2.5rem + 1.6667vw), 3.75rem);
    --ph-setup-dock: clamp(4.5rem, calc(4rem + 1.3333vw), 5rem);
    --ph-stage-v: clamp(0.5rem, calc(-1rem + 4vw), 2rem);
    --ph-stage-h: clamp(0.5rem, calc(-2rem + 6.6667vw), 3rem);
    --card-title: clamp(1.4375rem, calc(0.625rem + 2.1667vw), 2.25rem);
    --card-stage-crop: clamp(15rem, calc(12.5rem + 6.6667vw), 17.5rem);
    --ph-text2: clamp(0.96875rem, calc(0.8125rem + 0.4167vw), 1.125rem);
    --ph-label2: clamp(0.78125rem, calc(0.6875rem + 0.25vw), 0.875rem);
    --ph-gap: clamp(0.6875rem, calc(0.375rem + 0.8333vw), 1rem);
    --ph-btn-fs: clamp(0.9375rem, calc(0.875rem + 0.1667vw), 1rem);
    --ph-kicker: clamp(0.8125rem, calc(0.6875rem + 0.3333vw), 0.9375rem);
    --ph-s1-pitch: clamp(1.375rem, calc(1rem + 1vw), 1.75rem);
    --ph-s1-tag: clamp(1.25rem, calc(0.75rem + 1.3333vw), 1.75rem);
    --ph-s1-title: clamp(3.125rem, calc(1.89773rem + 6.1364vw), 6.5rem);
    --ph-max-cell: 0;
  }
}

.reduced-motion {
  /* nothing moves or scales: travel is instant, delays vanish, changes fade (--dur-fade) */
  --dur-lift: 0ms;
  --dur-land: 0ms;
  --dur-jump: 0ms;
  --dur-path: 0ms;
  --dur-node: 0ms;
  --dur-place: 0ms;
  --dur-handoff: 0ms;
  --delay-ghost-outline: 0ms;
  --delay-dot-in: 0ms;
  --delay-text-in: 0ms;
  --delay-cross: 0ms;
  --delay-apex: 0ms;
  --delay-land: 0ms;
  --delay-trail: 0ms;
  --delay-rails: 0ms;
  --delay-win-bar: 0ms;
  --delay-win-label-in: 0ms;
  --m-win-input: 0ms;
  --t-fast: 0ms;
  --t-base: 0ms;
  --t-select: 0ms;
  --t-pulse: 0ms;
  --t-card-frame: 0ms;
}