/* KurenaiOS — css/tokens.css · @layer tokens
   The design tokens every other layer reads: the approved "Graphite"
   design (UI rebuild; the handoff's README is the source of every value —
   docs/ui-rebuild/PLAN.md).

   Graphite is a dark, flat interface: surfaces step up in lightness from a
   blue-leaning graphite ground, there are no borders on cards and no boxes
   nested in boxes, and one crimson accent marks the primary action and
   the current place. Colours are oklch, as the design specifies; a script
   that needs a plain rgb() resolves them through a canvas (KOS.labPalette).

   THEMES (design part 2, frames 21a–21h). Graphite (= Atelier Dusk) is
   the default; Atelier Dawn is its light twin and the 23 shop themes are
   dark variants. css/themes.css overrides the colour ROLES below and
   nothing else: every derived token in the second block is written
   relative to a role (oklch(from var(--crimson) …)), so a theme re-tints
   it without restating it, and the offsets reproduce Graphite's values
   exactly. Only Dawn, whose lightness runs the other way, restates the
   few derived tokens that are bound to a dark ground.

   THE FIVE BREAKPOINTS (invariant 47) — the only widths a media query may
   use, written widest-first (invariant 48):
     1240 — wide workspace: the topic inspector folds under the content
     1080 — compact rail: the main rail shows its kanji tiles only
      860 — compact: the spec spine becomes an overlay drawer
      700 — phone: bottom tab bar, bottom sheets, 16px inputs
      560 — small phone: every grid collapses to one column
   Custom properties cannot appear in a media query, so --bp-* below are
   documentation for scripts, not selectors. The design is desktop-first at
   1280; the phone composition keeps the app usable until its own design.

   Convention for every layer file: its rules sit inside ONE @layer block,
   and the block's contents are not indented, so line-anchored tooling
   (tools/lib/css.js, the smoke suites) reads them like top-level rules. */
@layer tokens, base, layout, components, views, themes;

@layer tokens {

:root {
color-scheme: dark;

/* ---------- colour roles (Graphite) ---------- */
--bg: oklch(0.165 0.008 265);
--s1: oklch(0.2 0.009 265);
--s2: oklch(0.235 0.01 265);
--s3: oklch(0.14 0.008 265);
--line: oklch(0.27 0.01 265);
--text: oklch(0.95 0.005 265);
--text-2: oklch(0.78 0.01 265);
--muted: oklch(0.62 0.012 265);

--crimson: oklch(0.68 0.16 18);
--crimson-ink: oklch(0.16 0.02 18);
--teal: oklch(0.74 0.11 190);
--amber: oklch(0.8 0.12 80);
--green: oklch(0.72 0.13 150);
--red: oklch(0.66 0.17 22);
/* R/A/G read as a verdict, so they run deeper than the tones (review A) */
--rag-r: oklch(0.62 0.21 25);
--rag-a: oklch(0.76 0.16 68);
--rag-g: oklch(0.68 0.17 150);
--gold: oklch(0.84 0.11 85);
--bloom: oklch(0.8 0.08 350);
/* the heroes' ground (Home, the Governor): each theme sets its own */
--hero-tint: oklch(0.2 0.03 235);

/* the four subject hues (invariant 26) and the four media */
--cs: oklch(0.74 0.11 190);
--maths: oklch(0.72 0.12 270);
--it: oklch(0.72 0.12 325);
/* Code, the fourth study space (design 26·hue: Sky). Pass and fail never
   use it; they keep the fixed green and red with a mark and a word. */
--code: oklch(0.815 0.095 224);
--code-ink: oklch(0.22 0.03 224);
/* Japanese, the fifth study space: 珊瑚 Sango (design turn 28, chosen over Shu). It sits near the
   crimson accent, so a Sango chip never stands unlabelled beside a crimson button; each shop theme
   restates it clear of its own accent and Code hue. Never pass or fail. */
--ja: oklch(0.73 0.14 30);
--ja-ink: oklch(0.2 0.04 30);
/* Creatives, the sixth study space: 萌黄 Moegi, the colour of new shoots (design turn 31·hue).
   It sits in the one open gap on the wheel, between amber and green, lighter and yellower than
   the done green so a Moegi chip never reads as "done". Like Code and Japanese it marks place,
   never pass or fail; each shop theme restates it clear of its own accent and Code hue. */
--cr: oklch(0.85 0.135 118);
--cr-ink: oklch(0.22 0.045 118);
/* Mind (roadmap 5.9, design 32·hue): 藤 Fuji, wisteria — between Maths and IT, lighter and greyer */
--mind: oklch(0.78 0.1 302);
--mind-ink: oklch(0.2 0.04 302);
/* the media moment's fixed surfaces: a manga page is paper and ink in every theme, and a VN text
   box is dark glass over the art in every theme (the art does not change with the theme) */
--ja-paper: oklch(1 0 0);
--ja-paper-ink: oklch(0.16 0 0);
--ja-vn-glass: oklch(0.16 0.01 265 / 0.86);
--ja-vn-ink: oklch(0.98 0 0);
--ja-vn-ruby: oklch(0.88 0.07 50);
--anime: oklch(0.72 0.13 250);
--books: oklch(0.78 0.11 70);
--vn: oklch(0.72 0.14 330);
--games: oklch(0.74 0.12 155);

/* the one accent: crimson, retinted to the subject inside a study page
   (KOS.show sets --accent on #main, invariant 26) */
--accent: var(--crimson);
--on-accent: var(--crimson-ink);
--focus-ring: var(--crimson);

/* calendar categories (invariant 46): hue angles for --ev-hue, drawn as
   oklch(var(--cal-l) var(--cal-c) var(--ev-hue)) */
--cal-l: 0.74;
--cal-c: 0.11;
--cal-iris: 275;
--cal-brass: 80;
--cal-sage: 150;
--cal-clay: 30;
--cal-sky: 230;
--cal-plum: 330;
--cal-jade: 190;
--cal-slate: 255;
/* placeholder covers (invariant 61): deterministic hue, fixed tone */
--ph-l: 0.3;
--ph-c: 0.05;

/* ---------- type ---------- */
--font-ui: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-kanji: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
/* Japanese (design 28·type): body text, the model glyph to copy, and their metrics */
--font-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
--font-hand: "Klee One", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
--ja-lh: 2;
--ja-lh-20: 1.9;
--ja-lh-28: 1.8;
--ja-ruby: 0.5em;
--font-read: "Newsreader", "Iowan Old Style", Georgia, serif;

/* 11 is the floor (invariant 63); 13.5 is body */
--fs-11: 11px;
--fs-11-5: 11.5px;
--fs-12: 12px;
--fs-12-5: 12.5px;
--fs-13: 13px;
--fs-13-5: 13.5px;
--fs-14: 14px;
--fs-14-5: 14.5px;
--fs-15: 15px;
--fs-15-5: 15.5px;
--fs-16: 16px;
--fs-16-5: 16.5px;
--fs-17: 17px;
--fs-18: 18px;
--fs-20: 20px;
--fs-22: 22px;
--fs-24: 24px;
--fs-26: 26px;
--fs-27: 27px;
--fs-32: 32px;
--fs-38: 38px;
--fs-40: 40px;
--fs-52: 52px;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-body: 1.5;
--lh-read: 1.65;
--track-h1: -0.025em;
--track-head: -0.02em;
--track-kicker: 0.14em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;

/* ---------- space (the handoff's scale, named by value) ---------- */
--sp-0: 0;
--sp-2: 2px;
--sp-3: 3px;
--sp-4: 4px;
--sp-5: 5px;
--sp-6: 6px;
--sp-7: 7px;
--sp-8: 8px;
--sp-9: 9px;
--sp-10: 10px;
--sp-12: 12px;
--sp-14: 14px;
--sp-16: 16px;
--sp-18: 18px;
--sp-20: 20px;
--sp-22: 22px;
--sp-24: 24px;
--sp-26: 26px;
--sp-28: 28px;
--sp-32: 32px;
--sp-40: 40px;
--sp-48: 48px;
--sp-64: 64px;

/* ---------- shape ---------- */
--r-2: 2px;
--r-6: 6px;
--r-8: 8px;
--r-9: 9px;
--r-10: 10px;
--r-12: 12px;
--r-14: 14px;
--r-16: 16px;
--r-18: 18px;
--r-20: 20px;
--r-22: 22px;
--r-24: 24px;
--r-26: 26px;
--r-28: 28px;
--r-30: 30px;
--r-pill: 999px;
--hairline: 1px;
--bar-3: 3px;
--bar-4: 4px;
--bar-6: 6px;
--bar-7: 7px;
--rail-mark: 3px;
--focus-width: 2px;
--focus-offset: 2px;

/* hit areas (invariant 69) */
--hit: 32px;
--hit-coarse: 44px;
--hit-dense: 24px;
/* an empty state's text never narrower than this: below it, the actions
   wrap under the text instead of crushing it into a one-word column */
--empty-txt-min: 200px;
/* a card header's meta keeps at least this much line before the header's
   own action wraps under it */
--card-meta-min: 120px;

/* ---------- the shell's measures ---------- */
--topbar-h: 60px;
--brand-w: 194px;
--brand-logo: 34px;
--search-w: 480px;
--search-results-min: 480px;
--search-h: 34px;
--rail-w: var(--rail-w-full);
--rail-w-full: 212px;
--rail-w-compact: 72px;
--spine-w: 284px;
--inspector-w: 284px;
--pagehead-txt-min: 18rem;
/* the ink engine (design turn 30): tool buttons, the docked bar, popovers;
   paper rules are in page widths (cqw), so ink and lines scale together */
--ink-tool-w: 54px;
--ink-tool-h: 48px;
--ink-bar-r: 18px;
--ink-pop-w: 330px;
--ink-swatch: 26px;
--ink-glyph: 20px;
--ink-page-max: 780px;
--ink-thumb-min: 150px;
--ink-rule: 4.6cqw;
--ink-square: 2.38cqw;
--ink-margin: 10cqw;
--ink-cue: 30cqw;
--ink-marks: 88cqw;
--ink-pal-r: 22px;
--ink-pal-tool: 56px;
--ink-tip-max: 260px;
--ink-strip-max: 900px;
--ink-side-w: 430px;
--ink-thumbs-w: 132px;
--ink-dlg-w: 920px;
/* files plan R1–R3: the Files page, Storage, the scan, pinned notes */
--files-side-w: 320px;
--files-card-min: 260px;
--st-card-min: 320px;
--cx-kind-min: 150px;
--scan-handle: 30px;
--scan-thumb: 84px;
--pv-pin: 26px;
--pv-pins-w: 300px;
--fc-pic-max-h: 260px;
--att-pdfcard-max: 900px;
--aside-w: 400px;
--menu-w: 300px;
--menu-w-wide: 340px;
--menu-max-h: 560px;
--dialog-w: 520px;
--toast-max: 560px;
--watermark-size: 220px;
--tile: 30px;
--icon-btn: 38px;
--icon-btn-sm: 28px;
--icon-glyph: 20px;
--icon-glyph-sm: 16px;
/* the profile popover and status editor */
--pc-w: 320px;
--pc-band-h: 84px;
--pc-ring: 76px;
--pc-key-w: 40px;
--pe-w: 460px;
/* charts */
--chart-multi-min: 200px;
--donut-w: 200px;
--donut-w-lg: 252px;
--bk-cmp-label-w: 64px;
--bk-of-w: 72px;
--bk-volrec-n-w: 64px;
--medit-url-min: 150px;
--bk-ctl-h: 40px;
--medit-score-w: 76px;
--vn-chs-w: 150px;
--vn-chs-cover-w: 44px;
--mx-ep-count-w: 72px;
--hours-goal-w: 48px;
--hbar-label-w: 140px;
--chart-wide-h: 240px;
--chart-fit-min: 150px;
/* the image cropper */
--crop-url-min: 220px;
--crop-preview-max-h: 360px;
/* labs (frame 8h) */
--lab-search-w: 240px;
--lab-card-min: 180px;
--wk-step-n: 28px;          /* a worked step's number (20g) */
--lab-areas-w: 210px;       /* the index's area rail (20h) */
--lab-thumb-ratio: 200 / 110;
--lab-lock-side-w: 300px;   /* a locked lab (20i) */
--lab-lock-h: 420px;
--lab-lock-card-w: 400px;
--lab-side-min: 220px;
--lab-field-w: 120px;
--lab-field-h: 34px;
--lab-range-w: 150px;
--lab-note-h: 80px;
--lab-stage-h: 220px;
--lab-read-w: 300px;        /* the lab system's readout column (20a) */
--lab-mini-w: 150px;        /* the stage's minimap while a drawing pans */
--lab-toggle-w: 34px;
--lab-toggle-h: 20px;
--lab-speed-w: 90px;
--lab-trace-h: 440px;       /* the Trace Lab's table scrolls past this */
--lab-chart-ar: 52 / 17;      /* a text lab's in-pane chart (the cipher's letter frequencies) */
--lab-tt-w: 420px;
--lab-switch-w: 58px;
--lab-bit-sw-w: 32px;
--lab-bit: 44px;
--lab-bit-sm: 34px;
--lab-cell-w: 36px;
--lab-cell-h: 40px;
--lab-px: 28px;
--lab-swatch-w: 40px;
--lab-swatch-h: 30px;
--lab-swatch-ink: oklch(0.98 0 0);
--lab-rec-w: 420px;
--lab-reg-w: 84px;
--lab-mem-w: 680px;
--lab-code-w: 340px;
--oop-card-w: 232px;         /* a class card on the diagram (KOS.oop.CARD) */
--ide-h: 640px;              /* the IDE's working height (19a) */
--ide-tree-w: 210px;
--ide-cs-w: 360px;
--ide-ln-w: 44px;            /* the editor's line-number gutter */
--ide-mini-w: 160px;
--ide-mini-h: 100px;
--ide-dot-grid: 22px;
--box: 18px;
--tabbar-h: 56px;
--tab-tile: 28px;
--sheet-row-h: 56px;
--sheet-glyph: 36px;
--sheet-grabber-w: 36px;
--sheet-grabber-h: 5px;

/* ---------- Home (frame 7a) ---------- */
--home-hero-h: 196px;
--perm-area-w: 110px;
--perm-count-w: 64px;
--perm-tier-w: 34px;
--fx-dock-h: 52px;
--fx-dock-phone-h: 112px;
--fx-mini-compact: 236px;
--fx-mini-large: 340px;
--fx-mini-warn: 276px;
--fx-mini-ring: 28px;
--fx-mini-ring-w: 4px;
--fx-cd: 84px;
--fx-cd-sm: 44px;
--fx-cd-w: 4px;
--fx-idle-w: 560px;
--fx-drag-corner: 16px;
--home-avatar-ring: 104px;
--home-avatar: 94px;
--home-ring-sm: 64px;
--home-desk-phone-w: 82%;
--home-goal-w: 250px;
--home-xp-w: 200px;
--home-next-w: 340px;
--home-chart-h: 96px;
--desk-ring: 46px;
--desk-ring-hole: 38px;
--desk-arrow: 32px;
--desk-row-h: 34px;
--day-dot: 36px;
--row-bar-w: 70px;
--check: 20px;
--check-sm: 16px;
--ring-1-5: 1.5px;
--kv-k-w: 62px;
--desk-k-w: 58px;

/* ---------- Study (frames 8a–9e) ---------- */
--subj-side-w: 290px;
/* Japanese (design turn 28) */
--ja-insp-w: 300px;
/* Creatives (design turn 31) */
--cr-emblem: 132px;
--cr-emblem-sm: 104px;
--cr-unit-w: 196px;
--cr-paper-h: 420px;
--cr-paper-measure: 720px;
--cr-side-w: 300px;
--cr-thumb-h: 160px;
--cr-day: 40px;
--cr-num-w: 88px;
--ja-unit-w: 196px;
--ja-runner-w: 640px;
--ja-genko: 300px;
--ja-genko-md: 260px;
--ja-genko-sm: 200px;
--ja-model: 120px;
--ja-kana-tile: 200px;
--ja-chart-cell: 44px;
--ja-radar: 190px;
--ja-stone: 40px;
--ja-seal: 96px;
--ja-seal-sm: 64px;
--ja-scene-w: 820px;
--ja-opt-h: 50px;
--ja-tile-h: 44px;
--ja-word-big: 56px;
--ja-manga-stroke: 5px;
--ja-manga-border: 3px;
/* Mind (design turn 32) */
--mind-sheet-w: 640px;
--mind-sheet-wide: 760px;
--mind-scene-w: 900px;
--mind-run-w: 640px;   /* as --ja-runner-w */
--mind-opt-h: 48px;
--mind-grade-h: 60px;
--mind-avatar: 40px;
--mind-bar-w: 5px;
--mind-bar-h: 22px;
--mind-bar-lg: 36px;
--mind-pladder-h: 26px;
--mind-indent: 26px;
--mind-tl-h: 220px;
--mind-col-w: 340px;
--mind-unit-w: 196px;
--mind-pcard-min: 270px;
--mind-tl-min: 520px;
--mind-search-w: 220px;
/* the Badge Wall (roadmap 5.16): medallions, the set panels, the overlay and the ping */
--ach-medal: 88px;
--ach-medal-sm: 44px;
--ach-medal-xs: 32px;
--ach-medal-md: 120px;
--ach-medal-lg: 208px;
--ach-ring: 4px;
--ach-ring-sm: 3px;      /* the rim: 3 px at 44, 4 at 88, 5 at 120, 6 at 208 (35·medal) */
--ach-ring-md: 5px;
--ach-ring-lg: 6px;
--ach-seat: oklch(from var(--bg) calc(l - 0.035) c h);   /* the dark seat between rim and disc */
--ach-b0: 0.38;          /* the dim: brightness(b0 + b1·p) opacity(o0 + o1·p); Dawn swaps to opacity */
--ach-b1: 0.52;
--ach-o0: 1;
--ach-o1: 0;
--ach-panel-h: 280px;    /* a two-column panel at 1440, a true 21:9 */
--ach-panel-name-sm: 228px;
--ach-panel-name-wide: 300px;
--ach-plaque-h: 74px;
--ach-title-side: 400px;
--gv-stage-h: 700px;     /* the Governor's Seat, the Stage (35a) */
--gv-stage-left: 560px;
/* the Gold Shop (design turn 34g–34i) */
--gv-shop-stage-h: 300px;
--gv-studio-h: 220px;
--gv-studio-ctl-w: 520px;
--gv-media-k-w: 108px;
--gv-try-w: 400px;
--gv-shop-fig-w: 220px;
--gv-sheet-w: 1060px;
--fs-56: 56px;
--fs-36: 36px;
--sp-30-5: 30.5px;
--sp-15: 15px;
--sp-11: 11px;
--sp-17: 17px;
--sp-23: 23px;
--sp-29: 29px;
--ring-2: 2px;
--gv-stage-right: 640px;
--gv-stage-arc-h: 196px;
--gv-ring-xl: 180px;
--gv-area-h: 250px;
--gv-edit-prev: 797px;
--gv-arc-m: 80px;
--gv-stage-pad: 36px;
--gv-ring-zoom-ph: 0.6;  /* the Stage's 180 ring on a phone */
--gv-stage-pad-start: 44px;        /* a showcase medal on the Stage's arc */
--gv-stage-w: 1328px;    /* the Stage at 1440, the width Edit seat scales from */
--ach-dlg-w: 760px;
--ach-medal-ph: 104px;   /* a tier on the phone's sheet, 2 × 2 */
--ach-medal-lg-ph: 184px; /* the overlay's medal under 700 */
--ach-pick-cols: 10;
--fs-ach-name: 44px;     /* the overlay's badge name */
--fs-gv-level: 58px;     /* the Stage's level */
--fs-plaque: 22px;
--fs-micro: 11px;
--ach-hit: 44px;         /* the dialog's round ‹ ›, a plaque's glyph */
--ach-row-col: 60px;     /* the list's medal column */
--ach-row-h: 74px;
--ach-row-date: 120px;
--ach-plaque-pad: 72px;
--ach-mini-w: 92px;
--ach-plaque-big: 120px;
--ach-light: white;      /* the enamel's highlight and the light's glint */
--ach-dark: black;       /* the enamel's depth and the medal's drop shadow */
--ach-lay: fit;          /* how a panel lays its medals: fit (rows) or cols (the phone) */
--ach-pip: 7px;
--ach-panel-min-h: 300px;
--ach-panel-name: 280px;
--ach-ping-w: 340px;
--ach-row-medal: 52px;
--ach-dossier-side: 300px;
--ach-burst: 360px;
--subj-ring: 132px;
--subj-ring-hole: 114px;
--subj-go: 34px;
--unit-w: 196px;
--track-name: -0.025em;
--track-figure: -0.015em;
--track-label: 0.12em;
--track-spine: 0.1em;
--topic-step: 34px;
--prose-w: 620px;
--fc-persp: 1400px;
--fc-flip: 0.55s;
--topic-w: 1040px;
--insp-row: 32px;
--spine-bar: 3px;
--spine-bar-h: 32px;
--spine-dot: 9px;
--rag-pick: 32px;
--spine-ref-w: 28px;
--spec-cols: 150px;
--dot-wide: 22px;
--dot-narrow: 8px;
--syn-kw: oklch(0.76 0.13 320);
--syn-fn: oklch(0.8 0.1 240);
--syn-op: oklch(0.82 0.08 200);
--syn-num: oklch(0.82 0.12 60);
--syn-str: oklch(0.8 0.12 140);
--syn-self: oklch(0.78 0.1 20);
--kv-key-w: 150px;
--wk-label-w: 84px;
--step-dot: 32px;
--diagram-art-w: 64px;
--diagram-art-h: 48px;
--rv-side-w: 340px;
--rv-go-w: 200px;
--rv-chart-h: 90px;
--rv-ref-w: 78px;
--asg-panel-w: 360px;
--asg-prog-w: 110px;
--asg-due-w: 120px;
--asg-status-w: 96px;
--dialog-w-lg: 720px;
--mstats-w: 1040px;
--trk-date-w: 64px;
--trk-score-w: 150px;
--trk-marks-w: 70px;
--trk-grade-w: 70px;
--empty-art: 200px;      /* a first-run page's spot (34a, 34c) */
--empty-art-sm: 120px;
--mn-ghost-h: 72px;
--trk-trend-h: 44px;
--fs-64: 64px;
--track-huge: -0.04em;
--fc-w: 560px;
--fc-h: 250px;
--fc-pip: 20px;
--fc-rate-w: 92px;
--fc-rate-h: 60px;
--track-kind: 0.18em;
--att-side-w: 240px;
--att-badge: 34px;
--att-preview-h: 70vh;

/* ---------- Code (design turn 26) ---------- */
--cx-lh: 20px;              /* one editor line: the overlay and the textarea share it */
--cx-lh-phone: 24px;
--cx-ed-max-h: 520px;
--cx-ed-compact-max-h: 360px;
--cx-gutter-w: 48px;
--cx-task-w: 400px;         /* the task panel (26f); 340 at 1080 */
--cx-task-w-1080: 340px;
--cx-strip-w: 44px;         /* the collapsed task strip */
--cx-sq: 34px;              /* a unit on the stage path */
--cx-sq-compact: 28px;
--cx-sq-phone: 30px;
--cx-dia: 20px;             /* a capstone diamond */
--cx-dot: 8px;              /* the freshness dot */
--cx-age-w: 40px;
--cx-key-w: 40px;           /* the phone's symbol key bar (26v) */
--cx-key-h: 44px;
--cx-key-w-sm: 34px;
--cx-key-h-sm: 40px;
--cx-rlist-w: 260px;        /* the retrieval due list (26h) */
--cx-skside-w: 320px;       /* the skill map's side panel (26i) */
--cx-skname-w: 240px;       /* a skill row's concept name column */
--cx-skrow-h: 40px;
--cx-spill-w: 104px;        /* the skill map's status pill: one size for every state */
--cx-spill-h: 24px;
--cx-spill-w-sm: 84px;
--cx-age-w-sm: 28px;
--cx-acc-ring: 26px;        /* a unit card's progress ring */
--cx-acc-ref-w: 28px;
--cx-acc-bar-min: 60px;
--cx-acc-t-w: 300px;        /* a unit card title column, so every bar starts on one line */
--cx-acc-n-w: 64px;
--cx-acc-chev: 16px;
--cx-refcol: 720px;         /* Reference mode's reading column (26d) */
--cx-res-max-h: 420px;
--cx-map-side-w: 360px;
--cx-mapcol-n: 64px;
--cx-mapcol-s: 190px;
--cx-mapcol-w: 150px;
--cx-mapcol-st: 130px;
--cx-set-min: 280px;
--cx-when-w: 104px;
--cx-cap-side-w: 360px;      /* a capstone step's side panel (26l) */
--cx-ws-ms-w: 360px;        /* the workspace's Milestones window (26k) */
--cx-ws-ms-max-h: 560px;
--cx-capwrite-h: 220px;
--cx-rub-mark-w: 200px;      /* the rubric's Mark column: five marks */
--cx-step-n: 26px;          /* a stepper number */
--cx-rt-bar-h: 8px;          /* the full runtime's download bar (26g) */
--cx-rt-ic: 44px;            /* its package mark */
--cx-rp-n: 28px;             /* a Rider project's setup step number (26m) */
--cx-rp-drop-h: 168px;       /* the report drop zone (26n) */

/* ---------- Productivity (frames 10a–10g) ---------- */
--fx-side-w: 340px;
--fx-dial-w: 260px;
--fx-dial: 240px;
--fx-hm-w: 64px;
--fx-until-side-min: 220px;
--seg-grid-min: 120px;
--tp-panel-h: 560px;
--it-agg-l: 220px;
--it-agg-r: 340px;
--it-year-w: 44px;
--it-mark-w: 180px;
--it-grade-w: 120px;
--it-row-h: 56px;
--it-mark-in-w: 64px;
--it-target-min: 56px;
--it-bar-min: 72px;
--insp-qn-h: 88px;
--shr-order-cover: 32px;
--pv-shelf-scale: 0.55;
--gv-pv-pod-w: 36px;
--gv-pv-pod-h: 50px;
--fx-ring-w: 10px;
--fx-stage-ring: 400px;
--fx-stage-ring-w: 13px;
--fx-stage-mid: 420px;
--fx-stage-side: 320px;
--fx-glow-w: 900px;
--fx-glow-h: 600px;
--fx-seg-w: 60px;
--fx-seg-h: 5px;
--fx-when-w: 110px;
--fx-dur-w: 70px;
--fx-result-w: 96px;
--fx-row-bar-h: 22px;
--fx-row-bar-w: 4px;
--fx-switch-w: 34px;
--fx-switch-h: 20px;
--fs-58: 58px;
--fs-96: 96px;
--track-clock: -0.05em;
--rem-side-w: 200px;
--rem-insp-w: 320px;
--rem-check: 20px;
--rem-glyph-w: 18px;
--hb-side-w: 360px;
--hb-tick: 26px;
--hb-days-w: 260px;
--hb-streak-w: 90px;
--hb-act-w: 36px;
--hb-cell-h: 26px;
--hb-heat-h: 130px;
--hb-sq: 14px;              /* a phone habit row's day square (15h) */
--dir-tick: 18px;
--cal-side-w: 300px;
--cal-cell-h: 104px;
--cal-hour-h: 52px;
--cal-gutter-w: 56px;
/* Routines and the Daily Review (design turn 33). The review tints are a
   GROUND, never a status: each is written relative to a role, so every
   theme re-tints it (Dawn restates the evening and night in themes.css) */
--rv-morning: color-mix(in oklch, var(--gold) 26%, var(--s1));
--rv-morning-2: color-mix(in oklch, var(--bloom) 12%, var(--s1));
--rv-afternoon: var(--s2);
--rv-afternoon-2: var(--s1);
--rv-evening: oklch(from var(--s1) calc(l - 0.025) calc(c * 3.2) h);
--rv-evening-2: oklch(from var(--s1) calc(l - 0.01) calc(c * 1.8) h);
--rv-night: oklch(from var(--bg) calc(l - 0.05) calc(c * 3) h);
--rv-panel-w: 1120px;
--rv-panel-h: 820px;
--rv-panel-min: 600px;
--rv-head-min: 172px;
--rv-portrait-w: 200px;
--rv-portrait-h: 158px;
--rv-portrait-img: 560px;     /* the sprite's height in the header crop: head to waist */
--rv-step-dot: 22px;
--rv-strip-h: 52px;
--rv-tile: 34px;
--rv-tile-sm: 28px;
--rv-check: 22px;
--rv-sub: 4px;
--rv-tl-time: 50px;
--rv-tl-mark: 12px;
--rv-tap: 44px;
--rv-strip-time-h: 96px;
--rv-player-w: 980px;
--rv-player-h: 780px;
--rv-player-side: 340px;
--rv-clock: 260px;
--rv-clock-sm: 220px;
--rv-preflight-w: 640px;
--rt-cover-h: 96px;
--rt-cover-h-lg: 110px;
--rt-heat: 12px;
--rt-heat-max: 36px;
--rt-strip-cell: 9px;
--rt-grid-cell: 28px;
--rt-spot-w: 200px;
--rt-spot-h: 160px;
--rt-hm-label: 200px;
--rt-hab-w: 620px;
--rt-hab-label: 110px;
--rt-num-w: 80px;
--rt-bars-h: 130px;
--rt-slot-time: 100px;
--cal-dot: 5px;
--cal-key-dot: 7px;
--cal-cd-days-w: 44px;
--cal-row-bar-w: 4px;
--cal-kv-w: 110px;
--cal-when-w: 48px;         /* the phone agenda's time column (15g) */
--cal-sday-h: 60px;         /* a week-strip day */
--cal-mday-h: 48px;         /* a phone month cell: the number over its dots */
--cal-mday-num: 30px;       /* the circle that marks today / the pick */
--pace-wk-w: 104px;
--pace-seg-h: 4px;
--pace-hero-seg-h: 8px;
--pace-hero-segs-w: 280px;
--pace-dot: 9px;
--pace-tick: 18px;
--pace-keycol-w: 116px;
--pace-keycol-w-sm: 86px;   /* the phone braid's pinned key (15i) */
--pace-braid-title-w: 180px;
--pace-merge-ref-w: 90px;
--pace-merge-tone-w: 170px;

/* ---------- Collection (frames 11a–11k) ---------- */
--st-inProgress: var(--anime);
--st-completed: var(--green);
--st-planned: var(--muted);
--st-onHold: var(--amber);
--st-dropped: var(--red);
--mrail-w: 190px;
--mcard-min: 184px;
--mcard-ratio: 2 / 3.05;
--mscore-w: 40px;
--mscore-h: 30px;
--mfav: 34px;
--mdot: 7px;
--vhero-h: 240px;
--vhero-cover-w: 132px;
--vhero-cover-h: 192px;
--vhero-cover-w-sm: 88px;   /* the phone spotlight's cover (15j) */
--vhero-cover-h-sm: 124px;
--vhero-body-w: 600px;
--vhero-bar-w: 340px;
--fs-30: 30px;
--mrow-cover-w: 40px;
--mrow-cover-h: 52px;
--mrow-status-w: 116px;
--mrow-score-w: 48px;
--mrow-act-w: 64px;
--mrow-cols: var(--mrow-cover-w) minmax(0, 2fr) var(--mrow-status-w) minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 1fr) var(--mrow-score-w) var(--mrow-act-w);
--msearch-w: 240px;
--scard-cover-w: 72px;
--scard-cover-h: 104px;
--season-hero-h: 200px;
--fs-42: 42px;
--medit-w: 680px;
--medit-cover-w: 120px;
--medit-cover-w-sm: 84px;
--medit-wash-cut: 40%;
--airing-bg: oklch(0.35 0.07 155 / 0.85);
--airing-edge: oklch(0.72 0.13 155 / 0.6);
--airing-ink: oklch(0.9 0.08 155);
/* the bookshelf's dark-jewel spines, dealt by title (books.spineColor) */
--spine-0: oklch(0.44 0.12 12);
--spine-1: oklch(0.5 0.13 15);
--spine-2: oklch(0.58 0.1 85);
--spine-3: oklch(0.47 0.07 170);
--spine-4: oklch(0.45 0.1 260);
--spine-5: oklch(0.43 0.12 300);
--spine-6: oklch(0.47 0.08 50);
--spine-7: oklch(0.38 0.03 230);
--spine-8: oklch(0.42 0.1 340);
--spine-9: oklch(0.38 0.07 280);
--bk-vol-min: 5.5rem;
--bk-spine-w: 34px;
--bk-spine-h: 180px;
--mk-mark: 40px;
--mk-work-min: 11rem;
--mk-cover-w: 44px;
--mk-cover-h: 62px;
--mx-now-min: 9rem;
--mx-now-w: 150px;
--mx-ep-cover-w: 30px;
--mx-ep-cover-h: 42px;
--mx-stand-name-w: 110px;
--mx-stand-h: 8px;
--mx-door-mark: 64px;
/* the Shrine (frame 11g) */
--shr-gold: var(--gold);
--shr-gold-ink: oklch(0.2 0.03 70);
--shr-scrim: oklch(0.13 0.02 60);
--shr-bronze: oklch(0.78 0.08 60);
--shr-pod-h: 232px;
--shr-pod-medal: 86px;
--shr-hero-h: 330px;
/* a hero cover leans a little, the way a card on a table does (review A) */
--cover-tilt: 3deg;
--shr-poster-col: 190px;
--shr-poster-w: 180px;
--shr-poster-h: 260px;
--shr-score-w: 150px;
--shr-ledger-w: 300px;
--shr-pod-cover-w: 112px;
--shr-pod-cover-h: 162px;
--shr-preview-col: 444px;
--shr-swatch-w: 96px;
--shr-swatch-h: 120px;
--shr-dialog-w: 1060px;
--fs-76: 76px;
/* the Budget Planner (frame 11h) */
--pl-allow-w: 340px;
--pl-hero-min: 250px;
--pl-cover-w: 164px;
--pl-cover-h: 240px;
--pl-search-w: 200px;
--pl-lead-w: 22px;
--pl-rank-w: 24px;
--pl-prio-w: 72px;
--pl-type-w: 112px;
--pl-rel-w: 132px;
--pl-act-w: 150px;
--pl-thumb-col: 40px;
--pl-thumb-w: 36px;
--pl-thumb-h: 50px;
--pl-aux-w: 96px;
--pl-price-w: 80px;
--pl-dialog-w: 720px;
/* Sync & Import (frame 11i) and the provider profiles */
--sy-badge: 40px;
--sy-btn-w: 124px;
--sy-log-when: 90px;
--sy-log-svc: 80px;
--pf-avatar: 96px;
--pf-hero-min: 190px;
--pf-fav-w: 92px;
--pf-person: 36px;
--pf-row-img: 32px;

/* ---------- Governor (frames 12a–12d) ---------- */
--fs-34: 34px;
--gv-side-w: 300px;
--gv-hero-h: 300px;
--gv-xp-w: 240px;
--gv-about-w: 440px;
--gv-seal-badge: 34px;
--gv-rec-w: 400px;
--gv-buy: linear-gradient(oklch(0.84 0.12 85), oklch(0.74 0.12 75));
--gv-buy-ink: oklch(0.22 0.04 70);
--gv-rail-w: 200px;
--gv-pv-h: 112px;
--gv-pv-thumb: 64px;        /* a phone ware's preview thumb (15k) */
--gv-pv-zoom: 0.4;
--gv-id-w: 400px;
--gv-id-band-h: 130px;
--gv-seal: 40px;
--gv-entry-w: 330px;
--gv-row-time: 50px;
--gv-row-chip: 92px;
--gv-theme-min: 170px;
--gv-theme-pv-h: 84px;
/* ---------- Assistant (frames 13a–13f) ---------- */
--asst-nav-w: 236px;
--asst-presence-w: 300px;
--asst-fig-h: 440px;
--asst-tile: 26px;
--asst-tile-bg: linear-gradient(150deg, var(--bloom-hi), var(--bloom-lo));
--asst-tile-ink: oklch(0.2 0.03 350);
--asst-mark: 30px;
--asst-emblem-sm: 28px;
--asst-send: 40px;
--asst-mascot-sm-w: 76px;
--asst-mascot-sm-h: 78px;
--asst-drawer-w: 440px;
--asst-drawer-h: 760px;
--asst-drawer-stage: 360px;
--asst-go-ink: oklch(0.22 0.04 70);
--asst-route-k-w: 200px;
--asst-perm-tier-w: 130px;
--asst-perm-sel-w: 190px;
--asst-audit-when: 72px;
--asst-audit-phase: 92px;
--asst-audit-tier: 128px;
--asst-audit-out: 88px;
--asst-filter-w: 200px;
--asst-caret-w: 2px;

/* ---------- Archive (frames 14a–14c) and the Compare dialog ---------- */
--bk-side-w: 400px;
--bk-tile: 30px;
--bk-reset-mark: 44px;
--nt-side-w: 300px;
--nt-mark: 32px;
--nt-pop-w: 380px;
--help-nav-w: 230px;
--help-aside-w: 250px;
--help-read-w: 620px;
--help-fig-field: 220px;
--help-fig-ring: 84px;
--gv-sc-stack-w: 104px;
--pf-tile-min: 120px;
--mstat-min: 120px;
--pf-spread-h: 120px;
--cmp-w: 1100px;

/* avatar frames and bookshelf skins (Gold Shop cosmetics) */
--frame-gold: var(--gold);
--frame-b-s: 2px;
--frame-b-m: 3px;
--frame-b-l: 5px;
--frame-gap-s: 2px;
--frame-gap-m: 3px;
--frame-gap-l: 5px;
--frame-moon-s: 5px;
--frame-moon-l: 9px;
--frame-crimson: var(--crimson);
--frame-jade: var(--cs);
--frame-amethyst: var(--it);
--shelf-walnut: oklch(0.45 0.08 50);
--shelf-lacquer: oklch(0.2 0.01 265);
--shelf-vermilion: oklch(0.55 0.17 30);
--shelf-walnut-dk: oklch(from var(--shelf-walnut) calc(l - 0.14) c h);
--shelf-walnut-md: oklch(from var(--shelf-walnut) calc(l - 0.06) c h);
--shelf-walnut-lt: oklch(from var(--shelf-walnut) calc(l + 0.06) c h);
--shelf-lacquer-sheen: oklch(from var(--shelf-lacquer) calc(l + 0.1) c h);
--shelf-kasagi: oklch(0.16 0.01 265);
--shelf-shrine-bg: oklch(from var(--shelf-vermilion) 0.14 calc(c * 0.2) h);
--shelf-shide: oklch(0.96 0.01 90);

/* the share card (frame 11k). An exported image keeps its own palette
   whatever the app theme, so these are fixed values, not theme tokens;
   the canvas and the style swatches both read them. */
--card-foil-1: oklch(0.86 0.11 85);
--card-foil-2: oklch(0.8 0.1 20);
--card-foil-3: oklch(0.82 0.08 200);
--card-foil-4: oklch(0.88 0.1 95);
--card-foil-5: oklch(0.8 0.12 330);
--card-gold-accent: oklch(0.84 0.11 85);
--card-gold-bg: oklch(0.12 0.018 60);
--card-crimson-accent: oklch(0.72 0.16 22);
--card-crimson-bg: oklch(0.14 0.03 18);
--card-ink-accent: oklch(0.92 0.01 265);
--card-ink-bg: oklch(0.12 0.005 265);
/* frame 22d: the three Shrine styles as share-card looks */
--card-gilded-accent: oklch(0.82 0.13 82);
--card-gilded-bg: oklch(0.13 0.02 60);
--card-inkbrush-accent: oklch(0.22 0.01 265);
--card-inkbrush-bg: oklch(0.93 0.02 85);
--card-inkbrush-ivory: oklch(0.18 0.01 265);
--card-inkbrush-meta: oklch(0.3 0.01 265);
--card-inkbrush-quote: oklch(0.22 0.01 265);
--card-inkbrush-faint: oklch(0.45 0.01 265);
--card-neon-accent: oklch(0.86 0.14 200);
--card-neon-accent2: oklch(0.72 0.21 350);
--card-neon-bg: oklch(0.11 0.03 290);
--shr-ink-shadow: oklch(0.08 0.005 265 / 0.85);
--shr-ink-stroke: oklch(0.85 0.01 80 / 0.28);
--shr-ink-wash: oklch(0.16 0.005 265);
--shr-bone: oklch(0.92 0.02 85);
--shr-neon: oklch(0.86 0.14 200);
--shr-neon2: oklch(0.72 0.21 350);
--shr-neon-glow: oklch(0.86 0.14 200 / 0.45);
--shr-neon-glow2: oklch(0.72 0.21 350 / 0.5);
--shr-neon-grid: oklch(0.86 0.14 200 / 0.06);
--card-ivory: oklch(0.97 0.01 80);
--card-meta: oklch(0.8 0.01 265);
--card-quote: oklch(0.95 0.01 80);
--card-faint: oklch(0.62 0.01 265);
--card-shadow: oklch(0.05 0.01 265 / 0.6);

/* ---------- elevation (invariant 79): in the derived block below ---------- */

/* ---------- stacking (invariant 70) ---------- */
--z-base: 0;
--z-stage: 10;
--z-sticky: 20;
--z-topbar: 30;
--z-drawer: 40;
--z-tabbar: 50;
--z-focus: 60;
--z-menu: 110;
--z-modal: 120;
--z-toast: 130;

/* ---------- Reports (design turns 24–25, css/views/reports.css) ---------- */
--rp-side-w: 340px;          /* the Earlier reports column and overview sides */
--rp-spark-w: 52px;
--rp-spark-h: 26px;
--rp-split-h: 10px;          /* the subject / status split bar */
--rp-dot: 8px;
--rp-heat-h: 12px;           /* one heat-grid cell */
--rp-tile-min: 124px;
--rp-rank-w: 22px;
--rp-ref-w: 68px;
--rp-cover-mini: 22px;       /* the dashboard mosaic */
--rp-cover-tiny: 24px;       /* Genre DNA's three covers */
--rp-cell-min: 84px;         /* the overview's cover grid */
--rp-hist-h: 96px;
--rp-tl-h: 22px;             /* one day row of the Focus timeline */
--rp-mark: 22px;             /* the plan's ✓ / → tile */
--rp-ghost: 160px;           /* the persona's ghost kanji */
--rp-chart-max: 560px;
--rp-read-w: 780px;          /* the narrative's measure */
/* the story player: a dark stage in every theme (like the Shrine card,
   an export-like surface keeps its own ground), 450 × 800 scaled to fit */
--rp-stage-w: 450px;
--rp-stage-h: 800px;
--rp-stage-bg: oklch(0.135 0.012 265);
--rp-stage-ink: oklch(0.95 0.005 265);
--rp-stage-ink-2: oklch(0.85 0.01 265);
--rp-stage-muted: oklch(0.75 0.01 265);
--rp-stage-glass: oklch(1 0 0 / 0.08);
--rp-stage-glass-2: oklch(1 0 0 / 0.12);
--rp-stage-track: oklch(1 0 0 / 0.18);
--rp-stage-fill: oklch(0.97 0.005 265);
--rp-stage-line: oklch(1 0 0 / 0.15);
--rp-stage-shadow: 0 30px 80px oklch(0 0 0 / 0.55);
--rp-stage-on-hue: oklch(0.14 0.02 18);
--rp-stage-big: 84px;        /* the big-number story's figure */
--rp-stage-kanji: 300px;     /* the intro's outlined kanji */
--rp-stage-ghost: 230px;     /* the persona's ghost kanji */
--rp-stage-name: 52px;       /* the persona's name */
--rp-stage-title: 34px;
--rp-stage-bars-h: 250px;
--rp-stage-cover-w: 84px;
--rp-stage-cover-h: 118px;
--rp-thumb-w: 74px;
--rp-thumb-h: 130px;
--rp-seal: 30px;
--rp-stroke: 1.5px;
--rp-export-w: 520px;
--rp-home-w: 420px;
--rp-home-row-h: 52px;
--rp-export-preview-h: 320px;
--rp-stage-head-top: 26px;
--rp-stage-body-top: 84px;
--rp-stage-foot-h: 52px;
/* the pages after the layout review (25a/24a measured): */
--fs-28: 28px;
--rp-period-w: 400px;        /* the Weekly · Monthly · Termly · Yearly track */
--rp-words-w: 210px;         /* the Template | ✦ Kurenai switch */
--rp-mini-switch-w: 170px;   /* Time | Sessions */
--rp-hero-btn: 44px;         /* ▶ Play and the words pill */
--rp-genre-l: 96px;          /* a Genre DNA label */
--rp-coll-side: 250px;       /* the week's Collection card: DNA beside the mosaic */
--rp-badge: 20px;            /* a cover's score badge and ✓ */
--rp-topic-time: 60px;
--rp-topic-rev: 44px;
--rp-topic-st: 72px;
--rp-cover-hilo: 34px;
--rp-cover-row: 36px;
--rp-cover-creator: 34px;
--rp-ycol-h: 120px;          /* the year table's hours column */
--rp-home-chart-min: 72px;
--rp-ride-gap: 16px;
--rp-flow-cols: 3;           /* masonry columns at this width (reports.css narrows it) */
--rp-hero-left: 470px;       /* the hero keeps this for its words before thumbnails */
--rp-vs-name: 144px;         /* the plan-against-class name and end columns */
--rp-chapter-d: 352px;

/* ---------- Money and Goals (design turn 27, roadmap 5.4) ---------- */
--fs-46: 46px;
--fs-60: 60px;
/* the primitives */
--period: 16px;              /* a period-history square */
--period-sm: 13px;
--period-xs: 12px;
--period-lg: 18px;
--period-xl: 20px;
--ring-hero: 164px;          /* the goal ring: hero, card, phone */
--ring-md: 96px;
--ring-sm: 92px;
--goal-num: 44px;            /* Home's days-left circle with its ring */
--goal-num-in: 36px;
--catbar-dot: 8px;
--amount-field-h: 48px;
--amount-field-h-lg: 56px;
--amount-field-h-xl: 72px;
--pic-btn: 32px;
/* Money's pages */
--mn-side-w: 340px;          /* the Overview's side column, the rule editor */
--mn-side-sm: 320px;         /* Transactions' and Budgets' side panels */
--mn-hero-side: 300px;       /* Safe to spend today */
--mn-hero-mark: 300px;       /* the 円 watermark */
--mn-chart-h: 96px;          /* the day chart */
--mn-chart-h-phone: 56px;
--mn-chart-gap: 3px;
--mn-dot: 6px;               /* a no-spend day; a day still to come */
--mn-day-w: 62px;
--mn-search-w: 250px;        /* Transactions' search */            /* "Mon 2 Nov" in Next 14 days */
--rp-mfig-w: 76px;           /* a Reports money figure (27o) */
--mn-tx-cat: 150px;          /* a transaction row: box · category · payee · amount */
--mn-tx-amt: 112px;
--mn-dialog-w: 600px;        /* the entry editor */
--mn-split-amt: 120px;
--mn-roll-w: 170px;          /* Budgets: the rollover note */
--mn-sub-next: 120px;        /* Subscriptions: Next · a month · a year */
--mn-sub-fig: 92px;
--mn-pot-pic: 240px;         /* the pot hero's picture */
--mn-pot-plan: 280px;        /* the plan timeline */
--mn-pot-hero-h: 300px;
--mn-pot-band: 124px;        /* a pot card's picture band */
--mn-pot-tile-min: 300px;
--mn-node: 9px;              /* a timeline node; now is larger */
--mn-node-now: 12px;
--mn-node-col: 16px;
--mn-node-date: 50px;
--mn-cmp-now: 100px;         /* Month: October · September · Change */
--mn-cmp-then: 120px;
--mn-cmp-change: 170px;
--mn-year-h: 200px;
--mn-year-bar: 140px;
--mn-map-col: 120px;         /* CSV import: a column · its sample · → · to */
--mn-map-to: 170px;
--mn-map-w: 420px;
--mn-pv-state: 150px;
--mn-pv-date: 74px;
--mn-pv-amt: 90px;
--mn-drop-h: 150px;
--mn-fab: 56px;
--mn-chip-min: 24px;         /* a Calendar derived chip (the dense exception) */
/* Goals */
--gl-side-w: 320px;          /* the hero's run panel */
--gl-band: 96px;             /* a goal card's picture band */
--gl-band-phone: 84px;
--gl-wash-kanji: 96px;
--gl-wash-kanji-sm: 56px;
--gl-hero-mark: 280px;
--gl-card-min: 320px;
--gl-tpl-min: 180px;
--gl-dialog-w: 760px;
--gl-chart-h: 220px;
--gl-hist-h: 150px;
--gl-bar-max: 110px;
/* Exams & Deadlines (roadmap 5.8; drawn before design turn 29 lands) */
--ex-side-w: 340px;          /* the hub's and an assessment's side column */
--ex-step-m: 220px;           /* a worked step's mark column (29p) */
--ex-vkey: 30px;              /* a variation's letter badge */
--ex-vkey-sm: 22px;
--ex-arow-f: 92px;            /* a shape row's frequency column */
--ex-arow-v: 64px;            /* a shape row's marks or variations column */
--ex-unit-min: 340px;         /* a unit card in the full Companion's grid */
--ex-date-w: 58px;           /* a timetable row's date tile */
--ex-q-w: 64px;              /* the per-question table's narrow columns */
--ex-dialog-w: 760px;         /* the assessment editor and the importer (29c, 29y) */
--ex-dialog-sm: 560px;        /* the send, why and pack dialogs */
--ex-side-sm: 280px;          /* the side column at 1080 */
--ex-band-w: 168px;           /* a timetable row's band column (29b) */
--ex-days-w: 52px;            /* a timetable row's days-left column */
--ex-after-w: 300px;          /* the hero's "After that" column */
--ex-mark: 220px;             /* the hero's kanji watermark */
--ex-num-w: 44px;             /* a mono label column (a leaf ref, a number box) */
--ex-ref-w: 64px;             /* a leaf ref column (4.9.4.4) */
--ex-bar-w: 140px;            /* a recall or loss bar column */
--ex-q-topic: 120px;          /* marks by question's topic column (29i) */
--ex-ch-topic: 200px;         /* what changed's topic column, its floor (29aa) */
--ex-ch-bar: 104px;           /* what changed's two bar columns */
--ex-chart-h: 170px;          /* the trend chart and the question ramp */
--ex-calib-max: 300px;        /* the calibration scatter */
--ex-load-h: 180px;           /* a load-view day cell's height */
--ex-photo-h: 168px;          /* teacher feedback's photo slot */
--ex-room-ring: 400px;        /* the Exam Room's ring (29n) */
--ex-room-ring-sm: 340px;
--ex-room-ring-phone: 280px;
--ex-room-side: 360px;        /* the Exam Room's side columns, at most */
--ex-tick-h: 6px;             /* a recall or coverage bar */
--ex-wide-w: 96px;            /* a spark, the hours field, a library file column */
--ex-ums-w: 72px;             /* results day's UMS column */
/* the Companion, the playbook and the paper (phase 5: 29o–29u, 29ac) */
--ex-drawer-w: 540px;         /* the playbook drawer (29r) */
--ex-drawer-sm: 420px;
--ex-cmd-w: 120px;            /* the command-word column */
--ex-heat-topic: 180px;       /* trend and likelihood's topic column (29s) */
--ex-heat-cell: 30px;
--ex-lab-art: 160px;          /* a lab's picture column in the guide */
--ex-flash-h: 86px;           /* a cram-deck card */
--ex-tile-max: 210px;         /* a key-note tile's rule, at most (it fades past it) */
--ex-frow-max: 132px;         /* a booklet or memorise row, at most */
--ex-tnav-b: 30px;            /* a timed paper's navigator square */
--ex-line-h: 22px;            /* one dotted answer line */
--ex-paper-w: 595px;          /* an A4 page on screen (29u) */
--ex-paper-h: 842px;
--ex-paper: #ffffff;          /* printed and on-screen paper: black on white in every theme */
--ex-paper-ink: #111111;
--ex-paper-soft: #444444;
--ex-paper-rule: #9a9a9a;
--ex-paper-edge: #c9c9c9;
--ex-paper-head: #eeeeee;
--gl-detail-side: 320px;

/* ---------- motion: 150–200ms ease-out; drawers slide 240ms ---------- */
--ease: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 150ms;
--dur: 200ms;
--dur-drawer: 240ms;

/* ---------- documentation only (see the header) ---------- */
--bp-wide: 1240px;
--bp-rail: 1080px;
--bp-compact: 860px;
--bp-phone: 700px;
--bp-small: 560px;
}

/* ---------- derived tokens ----------
   Every value here is written relative to a colour role, so a theme that
   overrides the roles re-tints it; the offsets reproduce Graphite's values
   exactly. Chroma scales (c * k) rather than subtracts, so a theme with a
   quiet accent keeps a quiet tint instead of going grey. Re-declared on
   every [data-theme] too, so a scoped theme (a shop card's live preview)
   re-resolves. (The legacy bridge was retired at M14.) */
:root, [data-theme] {
/* the accent's steps */
--crimson-hi: oklch(from var(--crimson) calc(l + 0.06) calc(c * 0.9375) h);
--crimson-lo: oklch(from var(--crimson) calc(l - 0.12) c h);
--crimson-glow: oklch(from var(--crimson) calc(l - 0.18) c h / 0.25);
--crimson-soft: oklch(from var(--crimson) calc(l + 0.14) calc(c * 0.375) h);
--red-soft: oklch(from var(--red) calc(l + 0.14) calc(c * 0.47) h);
/* STATUS IS NOT THE ACCENT. Overdue, late, Critical and error states read
   these, never --crimson: a shop theme re-tints the accent (teal, gold,
   near-white), and a "critical" painted in the accent turned teal or white
   and stopped meaning danger (review after part 2). --red is fixed in
   every theme, so danger stays red everywhere. */
--alarm: var(--red);
--alarm-soft: var(--red-soft);
--alarm-ink: oklch(from var(--red) 0.16 0.02 h);
--alarm-wash: color-mix(in oklch, var(--red) 22%, var(--s1));
--bloom-hi: oklch(from var(--bloom) calc(l + 0.04) c h);
--bloom-lo: oklch(from var(--bloom) calc(l - 0.14) calc(c * 1.25) h);
--collection-hue: oklch(from var(--crimson) calc(l + 0.02) calc(c * 0.875) h);
/* the dark washes: Critical (from the fixed red, so it means danger in
   every theme — the offsets reproduce Graphite's crimson-based values),
   then the Focus stage (the accent's) */
--crit-wash: linear-gradient(120deg, oklch(from var(--red) 0.26 calc(c * 0.2941) calc(h - 4)), var(--s1) 60%);
--home-crit-bg: oklch(from var(--red) 0.21 calc(c * 0.2635) calc(h - 4));
--home-crit-scrim: linear-gradient(90deg, oklch(from var(--red) 0.21 calc(c * 0.3529) calc(h - 4) / 0.85) 0%, oklch(from var(--red) 0.21 calc(c * 0.3529) calc(h - 4) / 0.6) 30%, oklch(from var(--red) 0.21 calc(c * 0.3529) calc(h - 4) / 0.18) 54%, transparent 64%, oklch(from var(--red) 0.17 calc(c * 0.2353) calc(h - 4) / 0.55) 78%, oklch(from var(--red) 0.17 calc(c * 0.2353) calc(h - 4) / 0.75) 100%);
--home-crit-ink: oklch(from var(--red) 0.8 calc(c * 0.4706) calc(h - 4));
--home-crit-track: oklch(from var(--red) 0.32 calc(c * 0.2941) calc(h - 4));
--fx-wash: oklch(from var(--crimson) 0.25 calc(c * 0.25) h);
--fx-stage-glow: oklch(from var(--crimson) 0.23 calc(c * 0.3125) h);
--fx-stage-track: oklch(from var(--crimson) 0.26 calc(c * 0.125) h);
--fx-stage-well: oklch(from var(--crimson) 0.18 calc(c * 0.094) h);
--fx-stage-seg: oklch(from var(--crimson) 0.28 calc(c * 0.125) h);
/* the time-paid modes' stage is teal (frame 16c) */
--fx-teal-glow: oklch(from var(--teal) 0.25 calc(c * 0.35) h);
--fx-teal-track: oklch(from var(--teal) 0.26 calc(c * 0.15) h);
--fx-teal-well: oklch(from var(--teal) 0.17 calc(c * 0.1) h);
/* the IT desk's dashed run from the marks banked to the target */
--it-run: oklch(from var(--it) l c h / 0.45);
--mx-wash: oklch(from var(--crimson) 0.26 calc(c * 0.3125) h);
--gv-rec-bg: linear-gradient(120deg, oklch(from var(--crimson) 0.27 calc(c * 0.375) h), var(--s1) 60%);
--bk-hero-bg: linear-gradient(130deg, oklch(from var(--crimson) 0.25 calc(c * 0.219) h), var(--s1) 55%);
--bk-kicker-ink: var(--crimson-soft);
/* the amber washes: behind on the plan, Strained, the balance, a proposal */
--pace-wash: oklch(from var(--amber) 0.27 calc(c * 0.417) h / 0.55);
--gv-rec-bg-strained: linear-gradient(120deg, oklch(from var(--amber) 0.28 calc(c * 0.5) h / 0.7), var(--s1) 60%);
--gv-bal-bg: linear-gradient(120deg, oklch(from var(--amber) 0.28 calc(c * 0.5) h / 0.55), var(--s1) 60%);
--asst-confirm-bg: linear-gradient(150deg, oklch(from var(--amber) 0.27 calc(c * 0.417) h / 0.45), var(--s1) 60%);
/* the heroes (Home frame 7a, the Governor 12a) on the theme's hero tint */
--home-hero-bg: var(--hero-tint);
--home-hero-scrim: linear-gradient(90deg, oklch(from var(--hero-tint) l calc(c + 0.005) h / 0.8) 0%, oklch(from var(--hero-tint) l calc(c + 0.005) h / 0.55) 30%, oklch(from var(--hero-tint) l calc(c + 0.005) h / 0.12) 54%, transparent 64%, oklch(from var(--hero-tint) calc(l - 0.03) calc(c - 0.01) h / 0.5) 78%, oklch(from var(--hero-tint) calc(l - 0.03) calc(c - 0.01) h / 0.7) 100%);
--home-hero-ink: oklch(from var(--hero-tint) 0.8 calc(c + 0.02) h);
--home-goal-ink: oklch(from var(--hero-tint) 0.82 calc(c + 0.01) calc(h - 35));
--home-ring-track: oklch(from var(--hero-tint) calc(l + 0.12) c h);
--home-xp-track: oklch(from var(--hero-tint) calc(l + 0.1) calc(c - 0.01) h);
--gv-hero-bg: oklch(from var(--hero-tint) calc(l + 0.02) c calc(h + 25));
--gv-hero-scrim: linear-gradient(90deg, oklch(from var(--hero-tint) calc(l - 0.04) calc(c - 0.01) calc(h + 25) / 0.72) 18%, oklch(from var(--hero-tint) calc(l - 0.04) calc(c - 0.01) calc(h + 25) / 0.22) 60%, transparent);
--gv-rank-ink: oklch(from var(--hero-tint) 0.82 calc(c + 0.02) calc(h + 15));
/* glass, scrims and overlays over the ground (covers, heroes, the stage) */
--mcard-scrim: oklch(from var(--bg) calc(l - 0.045) calc(c + 0.002) h / 0.78);
--mcard-scrim-deep: oklch(from var(--bg) calc(l - 0.065) calc(c + 0.002) h / 0.95);
--mcard-glass: oklch(from var(--bg) calc(l - 0.025) calc(c + 0.002) h / 0.7);
--gv-glass: oklch(from var(--bg) calc(l - 0.025) calc(c + 0.002) h / 0.72);
--asst-note-bg: oklch(from var(--bg) calc(l - 0.025) calc(c + 0.002) h / 0.82);
--asst-scrim: oklch(from var(--bg) calc(l - 0.065) calc(c + 0.002) h / 0.45);
/* a phone sheet's scrim (15a) */
--sheet-scrim: oklch(from var(--bg) calc(l - 0.065) calc(c + 0.002) h / 0.64);
--vhero-scrim-0: oklch(from var(--bg) l c h / 0.92);
--vhero-scrim-1: oklch(from var(--bg) l c h / 0.78);
--vhero-scrim-2: oklch(from var(--bg) l c h / 0.3);
--vhero-scrim-3: oklch(from var(--bg) l c h / 0.1);
/* the text colour, faintly: tracks, edges and watermarks on any ground */
--fx-note-fill: oklch(from var(--text) l c h / 0.06);
--mcard-edge: oklch(from var(--text) l c h / 0.08);
--mcard-track: oklch(from var(--text) l c h / 0.1);
--gv-xp-track: oklch(from var(--text) l c h / 0.12);
--kanji-watermark: oklch(from var(--text) l c h / 0.05);
/* quieter inks */
--asst-id-ink: oklch(from var(--muted) calc(l - 0.12) c h);
--syn-com: oklch(from var(--muted) calc(l - 0.07) calc(c + 0.008) h);
--shr-silver: oklch(from var(--text-2) calc(l + 0.02) calc(c + 0.01) h);
--code-bg: var(--s3);
/* elevation (invariant 79): surfaces are flat; only floating layers (menus,
   dialogs, the share card) cast a shadow, inked from the theme's own
   deepest tone */
--shadow-base: oklch(from var(--bg) calc(l - 0.065) calc(c + 0.002) h);
--shadow-ink: color-mix(in oklch, var(--shadow-base) 72%, transparent);
--elev-0: none;
--elev-1: 0 1px 2px var(--shadow-ink);
--elev-2: 0 8px 24px -6px var(--shadow-ink);
--elev-3: 0 20px 50px var(--shadow-ink);
--elev-4: 0 30px 70px var(--shadow-ink);
/* text over a lightly scrimmed hero picture */
--hero-text-shadow: 0 1px 3px var(--shadow-ink);
/* the lit rail tile's glow */
--tile-lift: 0 1px 2px var(--shadow-ink), 0 4px 14px var(--crimson-glow);
/* a chip's wash: an accent at ~18% over whatever sits behind it */
--wash-crimson: color-mix(in oklch, var(--crimson) 18%, transparent);
--wash-teal: color-mix(in oklch, var(--teal) 16%, transparent);
--wash-amber: color-mix(in oklch, var(--amber) 16%, transparent);
--wash-green: color-mix(in oklch, var(--green) 16%, transparent);
--wash-red: color-mix(in oklch, var(--red) 16%, transparent);
--wash-bloom: color-mix(in oklch, var(--bloom) 18%, transparent);
--hover: var(--s2);
--selection: color-mix(in oklch, var(--crimson) 32%, transparent);

/* painted art behind live content (design turn 34k–34n): the picture's
   opacity per slot, scrims made from the ground itself so a theme's art
   always fades into its own --bg, and the Seat's glass. Dawn restates the
   dials (themes.css); Decorative art off zeroes them (:root[data-art=off]). */
--art-op-hero: 0.62;
--art-op-stage: 0.9;
--art-op-hall: 0.8;
--art-filter: none;
--art-scrim-l: linear-gradient(90deg, oklch(from var(--bg) l c h / 0.94) 0%, oklch(from var(--bg) l c h / 0.82) 34%, oklch(from var(--bg) l c h / 0.32) 64%, oklch(from var(--bg) l c h / 0.12) 100%);
--art-scrim-b: linear-gradient(0deg, oklch(from var(--bg) l c h / 0.92) 0%, oklch(from var(--bg) l c h / 0.5) 38%, transparent 70%);
--art-scrim-stage: radial-gradient(60% 70% at 50% 50%, oklch(from var(--bg) l c h / 0.55), oklch(from var(--bg) l c h / 0.25) 70%, oklch(from var(--bg) l c h / 0.6));
/* a desk carries words on both sides, so its scrim holds the right too */
--art-scrim-desk: linear-gradient(90deg, oklch(from var(--s1) l c h / 0.92) 0%, oklch(from var(--s1) l c h / 0.7) 34%, oklch(from var(--s1) l c h / 0.38) 55%, oklch(from var(--s1) l c h / 0.74) 78%, oklch(from var(--s1) l c h / 0.8) 100%);
--art-scrim-ph: linear-gradient(0deg, oklch(from var(--bg) l c h / 0.96) 0%, oklch(from var(--bg) l c h / 0.72) 45%, oklch(from var(--bg) l c h / 0.2) 100%);
--art-glass: var(--gv-glass);
--art-glass-edge: color-mix(in oklch, var(--gold) 22%, transparent);
--art-spot: 160px;
--art-spot-ph: 128px;
--art-drawer-w: 560px;
--gold-ink: var(--shr-gold-ink);
/* notebook papers (34p), from the theme's own line */
--paper-kraft: oklch(from var(--s1) l calc(c + 0.035) 70);
--paper-ink: color-mix(in oklch, var(--line) 70%, var(--text) 30%);
}

/* ---------- the five tiers, widest first ---------- */
@media (max-width: 1080px) {
:root { --rail-w: var(--rail-w-compact); --search-w: 360px; }
}

@media (max-width: 860px) {
:root { --brand-w: auto; --search-w: 280px; }
}

@media (max-width: 700px) {
:root { --topbar-h: 52px; }
}

@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur: 0ms; --dur-drawer: 0ms; }
}

}