/* StrikeSimple design system — reference/reference.css
   What this is: the page chrome of the four reference pages (index, foundation, landing, app):
   the sticky section nav, the section heads, the cards, the swatch grids, the ramps, the token
   readouts, the type-role rows, the spacing bars and the small specimen stages. Nothing in here is
   a design-system component; every specimen on the pages is drawn by dist/css/<surface>.css. This
   file only frames them.
   Where it came from: app/design/page.tsx in the demo — SectionNav, SectionHeading, TokenSwatch,
   BorderSwatch, TypeRoleRow, the SPACE_STEPS bars, GalleryCell and the Card wrapper — translated
   from Tailwind utilities into plain classes on the .ref-* prefix, so they can never be confused
   with a .sx-* or .lp-* component class.
   How the two surfaces share one chrome: every .ref-* rule reads ONLY the --ref-* properties
   declared in the two blocks right below. The first block maps them onto the APP tokens, which is
   what index.html, foundation.html and app.html load (dist/css/app.css, SPEC §6: "page chrome using
   APP tokens on index/foundation/app"). The second block, scoped to <html data-surface="landing">,
   remaps the same names onto LANDING tokens and nothing else, because landing.html loads
   dist/css/landing.css and the app's names (--surface-panel, --fs-*, --gutter …) do not exist
   there. A reference page therefore never needs both surfaces at once, which is the rule the
   whole system is built on (SPEC §1: "a consumer loads exactly one surface file").
   Literals: the chrome keeps a handful of small pixel values (a 1px rule, a 2px bar, a 6px dot)
   and derives its rhythm from --ref-gap (one 16px step on both surfaces) rather than declaring a
   second spacing scale. No colour is ever written as a hex here — every colour is a token read
   through a --ref-* property, so the chrome follows the app's theme toggle and the landing's
   grounds for free. */

/* ══ Chrome properties ═══════════════════════════════════════════════════════════════════════ */

/* App mapping (index.html, foundation.html, app.html — dist/css/app.css is loaded). The names on
   the right are the app surface's: the quiet page, the panel a card sits on, the row tone, the
   five-step text ramp, the hairline border, the exact cobalt and its bright step, the round-12
   radii and shadows, the --gutter that steps 16 → 24 → 32 with the viewport, and the one monospace
   (--font-code) that globals.css reserves for "the token names on /design" — which is exactly what
   these pages are. */
:root {
  --ref-font: var(--font-display);
  --ref-code: var(--font-code);
  --ref-bg: var(--bg-page);
  --ref-panel: var(--surface-panel);
  --ref-row: var(--surface-row);
  --ref-hover: var(--surface-hover);
  --ref-text: var(--text-body);
  --ref-strong: var(--text-strong);
  --ref-muted: var(--text-muted);
  --ref-faint: var(--text-faint);
  /* The chrome's quietest TEXT tone. /design sets its token names in --text-dim, but that step is
     chrome-grade in the app (2.5:1 on the panel in both themes) and the token names on these pages
     are the most numerous text on them — read, not decoration — so the chrome's "dim" is the app's
     muted step (7:1 on panel, page and row in both themes). The app's own --text-dim is still shown
     as a specimen on app.html; it is not used to set anything that has to be read here. */
  --ref-dim: var(--text-muted);
  --ref-border: var(--border);
  --ref-border-soft: var(--border-tertiary);
  --ref-accent: var(--accent);
  /* Link and badge ink. The app's --accent-bright (blue-400) is a stroke-and-mark colour: on the
     dark panel it measures 3.5:1 as 11–16px text, so the chrome's links take the lavender
     --accent-soft (blue-300, 7:1 on the panel) in the dark theme and the deep blue-600 on the light
     theme (7.6:1 on white) — the same two steps the landing already uses for accent text on its dark
     and light grounds (--accent-text, blue-300 kickers). */
  --ref-accent-ink: var(--accent-soft);
  --ref-accent-tint: var(--accent-tint);
  --ref-onaccent: var(--text-onaccent);
  --ref-focus: var(--focus-ring);
  --ref-radius: var(--radius-lg);
  --ref-radius-sm: var(--radius-md);
  --ref-radius-xs: var(--radius-sm);
  --ref-shadow: var(--shadow-card);
  --ref-shadow-float: var(--shadow-popover);
  --ref-gap: var(--space-4);
  --ref-gutter: var(--gutter);
  --ref-max: var(--container-max);
  --ref-fs-3xs: var(--fs-3xs);
  --ref-fs-2xs: var(--fs-2xs);
  --ref-fs-xs: var(--fs-xs);
  --ref-fs-sm: var(--fs-sm);
  --ref-fs-base: var(--fs-base);
  --ref-fs-md: var(--fs-md);
  --ref-fs-lg: var(--fs-lg);
  --ref-fs-xl: var(--fs-xl);
  --ref-fs-2xl: var(--fs-2xl);
  --ref-fs-3xl: var(--fs-3xl);
  --ref-tracking-label: var(--tracking-label);
  --ref-tracking-tight: var(--tracking-tight);
  --ref-ease: var(--ease-out);
  --ref-dur: var(--dur-base);
}
/* The light theme's link ink (see --ref-accent-ink above). blue-600 is a foundation step, which is
   why it can be named here without an app alias: the app has no --accent-text of its own. */
:root[data-theme="light"] {
  --ref-accent-ink: var(--blue-600);
}

/* Landing mapping (landing.html — dist/css/landing.css is loaded). Only landing and foundation
   names appear on the right: the cool gray-100 page (--bg-page), the white card (--surface-card),
   the gray-50 and gray-200 steps for rows and hovers (--surface, --bg-page-deep), the landing's
   text ramp, hairline, accent and the deeper blue-600 --accent-text that holds AA on the light
   page, the sharp landing radii (8 / 5 / 3), the whisper shadows, the 1200px --container and the
   landing's rem type scale. The code face is IBM Plex Mono (--font-mono), which is the landing's
   own data face. The gutter steps 16 → 24 → 32 like the app's, but from the landing's rem scale,
   in the two media blocks below — the landing has no --gutter token. */
:root[data-surface="landing"] {
  --ref-font: var(--lp-font);
  --ref-code: var(--font-mono);
  --ref-bg: var(--bg-page);
  --ref-panel: var(--surface-card);
  --ref-row: var(--surface);
  --ref-hover: var(--bg-page-deep);
  --ref-text: var(--text-body);
  --ref-strong: var(--text-strong);
  --ref-muted: var(--text-muted);
  --ref-faint: var(--text-faint);
  --ref-dim: var(--text-muted); /* gray-600: 5.9:1 on the white card, 5.1:1 on the page; gray-400 was 2.2:1 */
  --ref-border: var(--border);
  --ref-border-soft: var(--border-faint);
  --ref-accent: var(--accent);
  --ref-accent-ink: var(--accent-text);
  --ref-accent-tint: var(--lp-rm-light-tag-bg);
  --ref-onaccent: var(--text-onaccent);
  --ref-focus: var(--focus-ring);
  --ref-radius: var(--radius-lg);
  --ref-radius-sm: var(--radius-md);
  --ref-radius-xs: var(--radius-sm);
  --ref-shadow: var(--shadow-xs);
  --ref-shadow-float: var(--shadow-lg);
  --ref-gap: var(--space-4);
  --ref-gutter: var(--space-4);
  --ref-max: var(--container);
  --ref-fs-3xs: var(--text-2xs);
  --ref-fs-2xs: var(--text-2xs);
  --ref-fs-xs: var(--text-xs);
  --ref-fs-sm: var(--text-sm);
  --ref-fs-base: var(--text-base);
  --ref-fs-md: var(--text-md);
  --ref-fs-lg: var(--text-lg);
  --ref-fs-xl: var(--text-xl);
  --ref-fs-2xl: var(--text-2xl);
  --ref-fs-3xl: var(--text-3xl);
  --ref-tracking-label: var(--tracking-wide);
  --ref-tracking-tight: var(--tracking-display);
  --ref-ease: var(--ease-out);
  --ref-dur: var(--dur-base);
}
@media (min-width: 768px) {
  :root[data-surface="landing"] { --ref-gutter: var(--space-5); }
}
@media (min-width: 1280px) {
  :root[data-surface="landing"] { --ref-gutter: var(--space-6); }
}

/* ══ Page frame ══════════════════════════════════════════════════════════════════════════════ */

/* The body is already set by each surface's base layer; this restates the ground and the face
   through the chrome properties so both pages look the same in their own tokens. */
.ref-body {
  margin: 0;
  min-height: 100%;
  background: var(--ref-bg);
  color: var(--ref-text);
  font-family: var(--ref-font);
  font-size: var(--ref-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Phones: nothing may scroll sideways; a wide specimen scrolls inside its own box instead. The
   rule sits on <html> alone: on <body> it would make the body its own scroll container, and a
   position: sticky element (the section nav) sticks to the nearest scrolling ancestor — it would
   scroll away with the page instead of pinning to the viewport. */
html { overflow-x: hidden; }

/* The document column: centred at the surface's container width, gutter-padded (16px on a phone),
   with two and a half gaps between sections — /design's `sx-container flex flex-col gap-10 py-8`. */
.ref-page {
  width: 100%;
  max-width: var(--ref-max);
  margin-inline: auto;
  padding: calc(var(--ref-gap) * 1.5) var(--ref-gutter) calc(var(--ref-gap) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--ref-gap) * 2.5);
}

/* The page header: eyebrow, h1 and a one-paragraph description on the left, a control (the theme
   toggle on app.html) on the right. */
.ref-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ref-gap);
}
.ref-header__text { min-width: 0; flex: 1 1 20rem; }
.ref-header h1 {
  margin: 0.2em 0 0;
  font-size: var(--ref-fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ref-tracking-tight);
  color: var(--ref-strong);
}
.ref-header p {
  margin: 0.5em 0 0;
  max-width: 44rem;
  font-size: var(--ref-fs-sm);
  color: var(--ref-muted);
}
.ref-header__tools { display: flex; align-items: center; gap: calc(var(--ref-gap) / 2); }
/* A wordmark in the header text column stands on its own line (index.html has it alone; app.html
   puts it under the eyebrow): the recipe's .sx-wordmark is an inline-block, which would otherwise
   sit on the eyebrow's line with its baseline 9px off. */
.ref-header__text > .sx-wordmark { display: block; }
.ref-header__text > .ref-eyebrow + .sx-wordmark { margin-top: calc(var(--ref-gap) / 2); }

/* The eyebrow the chrome uses for its own labels. On app pages it matches the app's .sx-eyebrow
   (11px / 600 / 0.06em caps) in everything but tone; on the landing it takes the landing's 0.04em
   --tracking-wide, not the 0.14em mono eyebrow — the chrome is not a landing specimen, and the
   landing's own .sx-eyebrow is shown on landing.html as one. The tone is the muted step, not the
   app's faint one: faint is "chrome, 3:1 on page and panel" in the app's own contrast rule, and
   these eyebrows are the labels a reader navigates the cards by, so they hold 4.5:1 (the faint step
   measures 4.2:1 on the panel and 3.9:1 on the light page; the landing's gray-500 3.5:1 on white). */
.ref-eyebrow {
  display: inline-block;
  font-family: var(--ref-font);
  font-size: var(--ref-fs-2xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--ref-tracking-label);
  text-transform: uppercase;
  color: var(--ref-muted);
}

/* ══ Sticky section nav (/design SectionNav) ═════════════════════════════════════════════════ */

/* `sticky top-0 z-30 -mx-[var(--gutter)] flex flex-wrap gap-x-0.5 gap-y-1 overflow-x-auto border-b
   border-border bg-page/95 px-[var(--gutter)] py-2 backdrop-blur` — bleeds to the viewport edge by
   the gutter it then pads back in, so the rule under it runs full width. The 95% page tone is
   mixed from the token with color-mix rather than written as an rgba literal. */
.ref-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--ref-gap) / 8) calc(var(--ref-gap) / 8);
  margin-inline: calc(-1 * var(--ref-gutter));
  padding: calc(var(--ref-gap) / 2) var(--ref-gutter);
  border-bottom: 1px solid var(--ref-border);
  background: color-mix(in srgb, var(--ref-bg) 95%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ref-nav a {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: var(--ref-radius-xs);
  font-family: var(--ref-font);
  font-size: var(--ref-fs-xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ref-tracking-label);
  text-transform: uppercase;
  color: var(--ref-muted); /* muted, not faint: a nav label is read (see .ref-eyebrow) */
  text-decoration: none;
  transition: background-color var(--ref-dur) var(--ref-ease), color var(--ref-dur) var(--ref-ease);
}
.ref-nav a:hover,
.ref-nav a[aria-current="true"] {
  background: var(--ref-hover);
  color: var(--ref-strong);
}
/* The landing surface has no global focus ring (the app's base.css draws one on *:focus-visible),
   so the chrome draws its own on the nav, in the surface's ring token, and the two pages match. */
.ref-nav a:focus-visible { outline: 2px solid var(--ref-focus); outline-offset: 2px; }
/* Phones: one row that scrolls sideways (/design's `overflow-x-auto`), never a wrapped stack. The
   app page has nineteen links; wrapped at 390px they stood five rows tall — a fifth of the viewport
   pinned over the content, and taller than the anchor margin, so every #hash jump landed its
   heading under the nav. The scrollbar is hidden: the row's cut-off last link is the affordance,
   and reference.js scrolls the current section's link into view as the page scrolls. The links take
   two more pixels of padding top and bottom so each is a 33px-tall touch target in the row. */
@media (max-width: 767px) {
  .ref-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ref-nav::-webkit-scrollbar { display: none; }
  .ref-nav a { padding: 8px 10px; }
}

/* ══ Sections and cards ══════════════════════════════════════════════════════════════════════ */

/* The sections' landmark: a flex column with the page's own gap between sections, so wrapping
   them in <main> changes nothing about the rhythm. */
.ref-main {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ref-gap) * 2.5);
}

/* A section: its head, then its cards, a gap and a quarter apart; the scroll margin keeps the
   sticky nav off an anchored heading (/design `scroll-mt-20`). The nav's height depends on how
   many rows its links wrap to at this width, so reference.js measures it into --ref-nav-h on <html>
   (a ResizeObserver keeps it current); the 4.5rem fallback is the one-row nav with script off. */
.ref-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ref-gap) * 1.25);
  scroll-margin-top: calc(var(--ref-nav-h, 4.5rem) + var(--ref-gap));
}
.ref-section-head h2 {
  margin: 0.2em 0 0;
  font-size: var(--ref-fs-xl);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--ref-tracking-tight);
  color: var(--ref-strong);
}
.ref-section-head p,
.ref-note {
  margin: 0.4em 0 0;
  max-width: 46rem;
  font-size: var(--ref-fs-sm);
  line-height: 1.5;
  color: var(--ref-muted);
}
.ref-note { margin: 0; }
.ref-note strong { color: var(--ref-strong); font-weight: 600; }
.ref-note a, .ref-section-head a { color: var(--ref-accent-ink); }
.ref-note--small { font-size: var(--ref-fs-2xs); line-height: 1.45; }
/* A recorded inconsistency between the two apps, or between an app and its own brief — the
   FINDING convention of the token files, rendered: a cobalt rule down the left. */
.ref-finding {
  padding-left: calc(var(--ref-gap) * 0.75);
  border-left: 2px solid var(--ref-accent-ink);
}
.ref-finding::before {
  content: "Finding";
  display: block;
  font-size: var(--ref-fs-3xs);
  font-weight: 700;
  letter-spacing: var(--ref-tracking-label);
  text-transform: uppercase;
  color: var(--ref-accent-ink);
}

/* The card the specimens sit in: /design's `Card className="flex flex-col gap-4 p-5"` — panel tone,
   a hairline, the surface's card radius and its barely-there shadow. On the landing the same shape
   is a white card on the gray-100 page. */
.ref-card {
  display: flex;
  flex-direction: column;
  gap: var(--ref-gap);
  min-width: 0;
  padding: calc(var(--ref-gap) * 1.25);
  background: var(--ref-panel);
  border: 1px solid var(--ref-border);
  border-radius: var(--ref-radius);
  box-shadow: var(--ref-shadow);
}
.ref-card--flush { padding: 0; overflow: hidden; }
.ref-card__title {
  margin: 0;
  font-size: var(--ref-fs-md);
  font-weight: 700;
  color: var(--ref-strong);
}
.ref-card__title small {
  margin-left: 0.5em;
  font-family: var(--ref-code);
  font-size: var(--ref-fs-2xs);
  font-weight: 400;
  color: var(--ref-dim);
}

/* A well: the page tone sunk into a card for a specimen to stand on (/design GalleryCell,
   `rounded-md bg-page p-3`; the stages under the Card and modal mocks, `bg-page p-6`). */
.ref-well {
  display: flex;
  flex-direction: column;
  gap: calc(var(--ref-gap) / 2);
  min-width: 0;
  padding: calc(var(--ref-gap) * 0.75);
  background: var(--ref-bg);
  border-radius: var(--ref-radius-sm);
}
.ref-well--stage {
  align-items: center;
  justify-content: center;
  padding: calc(var(--ref-gap) * 1.5);
}
.ref-well--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.ref-well__label {
  font-family: var(--ref-code);
  font-size: var(--ref-fs-3xs);
  color: var(--ref-dim);
}

/* Layout helpers. */
.ref-reset { margin: 0; }
.ref-inline { display: inline-block; line-height: 0; }
.ref-tail { opacity: 0.6; } /* a split item's second half, set back (landing.css .lp-split-tail) */
.ref-grid {
  display: grid;
  gap: var(--ref-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.ref-grid--tight { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.ref-grid--cells { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--ref-gap) * 0.75); }
.ref-row--baseline { align-items: baseline; }
.ref-row--end { align-items: flex-end; }
.ref-stack { display: flex; flex-direction: column; gap: calc(var(--ref-gap) / 2); }
.ref-divider { height: 1px; border: 0; margin: 0; background: var(--ref-border); }

/* ══ Token readouts ══════════════════════════════════════════════════════════════════════════ */

/* A token name, in the code face, in the chrome's dim tone — /design's `font-code text-3xs
   text-dim` (the tone itself is the muted step; see --ref-dim). Clicking it copies the name:
   reference.js adds .is-copied for a moment. The copy is a pointer convenience, not a control — the
   name is not focusable and carries no role (several hundred of them on a page would flood the tab
   order, and on index.html they sit inside link cards), so the affordance is the copy cursor, a
   dotted underline on hover and the "· copied" flash; the text itself is selectable to copy by hand.
   The padding and the matching negative margin give the pointer a 23px-tall target without moving a
   single glyph (the margin box is unchanged). */
.ref-var {
  display: inline-block;
  padding: 4px 2px;
  margin: -4px -2px;
  font-family: var(--ref-code);
  font-size: var(--ref-fs-2xs);
  line-height: 1.4;
  color: var(--ref-dim);
  overflow-wrap: anywhere;
  cursor: copy;
  border-radius: var(--ref-radius-xs);
  text-underline-offset: 2px;
}
.ref-var:hover { color: var(--ref-text); text-decoration: underline dotted; }
/* A token name inside a link or a button belongs to that control: no copy, no copy cursor. */
.ref-var--inert, .ref-var--inert:hover { cursor: inherit; text-decoration: none; }
.ref-var.is-copied { color: var(--ref-accent-ink); }
.ref-var.is-copied::after { content: " · copied"; font-weight: 600; }
/* The LIVE value, filled by reference.js from getComputedStyle — never written in the markup
   (/design: "a hard-coded value here silently goes stale the moment the scale moves"). Muted, like
   the name: a value is the point of the page, and the faint step fails 4.5:1 at this size. */
.ref-val {
  display: inline-block;
  font-family: var(--ref-code);
  font-size: var(--ref-fs-2xs);
  line-height: 1.4;
  color: var(--ref-muted);
  overflow-wrap: anywhere;
}
.ref-val--clip {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inline code in prose: `rounded-sm bg-row px-1 py-0.5 font-code text-2xs` on /design. */
.ref-code {
  padding: 1px 5px;
  border-radius: var(--ref-radius-xs);
  background: var(--ref-row);
  font-family: var(--ref-code);
  font-size: var(--ref-fs-2xs);
  color: var(--ref-text);
  overflow-wrap: anywhere;
}
/* The "this is the shipped default" marker (/design ActiveBadge): `rounded-sm bg-accent-tint
   px-1.5 py-0.5 font-display text-3xs font-bold uppercase tracking-wide text-accent-bright`. */
.ref-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--ref-radius-xs);
  background: var(--ref-accent-tint);
  font-family: var(--ref-font);
  font-size: var(--ref-fs-3xs);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ref-tracking-label);
  text-transform: uppercase;
  color: var(--ref-accent-ink);
  vertical-align: middle;
}

/* ══ Swatches ════════════════════════════════════════════════════════════════════════════════ */

/* /design TokenSwatch: a chip, then label / var / value stacked under it. The chip paints the
   --swatch property, which the markup sets inline from a token (`style="--swatch: var(--up)"`) —
   the only inline style the pages use, and never a literal colour. */
.ref-swatches {
  display: grid;
  gap: var(--ref-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}
.ref-swatches--narrow { grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); }
.ref-swatches--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.ref-swatch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ref-swatch__chip {
  --swatch: transparent;
  height: 2.75rem;
  border-radius: var(--ref-radius-sm);
  border: 1px solid var(--ref-border-soft);
  background: var(--swatch);
}
.ref-swatch__chip--tall { height: 4rem; }
/* /design BorderSwatch: the token drawn as a 2px edge around a panel-tone box. */
.ref-swatch__chip--border {
  background: var(--ref-panel);
  border: 2px solid var(--swatch);
}
/* A shadow token: a panel-tone box casting it (the page tone shows through around it). */
.ref-swatch__chip--shadow {
  --swatch: none;
  border: 0;
  background: var(--ref-panel);
  box-shadow: var(--swatch);
}
/* A radius token: a row-tone box with the token as its corner (/design RADIUS_STEPS). */
.ref-swatch__chip--radius {
  --swatch: 0;
  height: 3.5rem;
  border: 1px solid var(--ref-border);
  border-radius: var(--swatch);
  background: var(--ref-row);
}
/* A solid fill with text on it — category blocks, the yellow trio, DTE cells. The ink comes from
   data-ink, set by the markup or computed by reference.js from the painted background (the same
   WCAG luminance pick /design's contrastTextFor makes); the two on-fill tokens are the app's. */
.ref-swatch__chip--pill { display: inline-flex; min-width: 9rem; }
.ref-swatch__chip--fill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-family: var(--ref-font);
  font-size: var(--ref-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ref-tracking-label);
  text-align: center;
  color: var(--text-on-fill-light);
}
[data-ink="dark"] { color: var(--text-on-fill-dark); }
[data-ink="light"] { color: var(--text-on-fill-light); }
/* A category's TINT under body text (/design: `h-8 … text-2xs font-semibold uppercase text-body`). */
.ref-swatch__chip--tint {
  height: 2rem;
  font-size: var(--ref-fs-2xs);
  color: var(--ref-text);
}
/* /design's mood chips: each portfolio mood resolved through the ACTIVE action palette, over a 13%
   wash of its colour (`${color}22`), mixed from the token with color-mix. /design sets the label in
   the colour itself, which is a palette readout on a dev page, not a shipped component (MoodPanel.tsx
   uses the colour only for its bar) and measures about 2:1 for the yellow and orange buckets on the
   light theme; here the label is strong text and a leading dot carries the colour. */
.ref-mood {
  --swatch: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--ref-radius-xs);
  background: color-mix(in srgb, var(--swatch) 13%, transparent);
  color: var(--ref-strong);
  font-family: var(--ref-font);
  font-size: var(--ref-fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ref-tracking-label);
}
.ref-mood::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--swatch);
}
.ref-swatch__label {
  font-size: var(--ref-fs-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ref-strong);
}
.ref-swatch .ref-note--small { margin-top: 2px; }

/* A ramp: the steps as one bar (lightest → darkest), the readouts as a legend under it, so a
   ten-step bar still fits a phone. */
.ref-ramp { display: flex; flex-direction: column; gap: calc(var(--ref-gap) / 2); }
.ref-ramp__bar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px;
  border-radius: var(--ref-radius-sm);
  overflow: hidden;
}
.ref-ramp__step {
  --swatch: transparent;
  height: 2.5rem;
  background: var(--swatch);
  /* A hairline inside every step: a step that equals the panel (the app's navy-900 IS the panel in
     the dark theme; the 50s are white in the light one) would otherwise read as a missing cell. */
  box-shadow: inset 0 0 0 1px var(--ref-border);
}
.ref-ramp__bar--tall .ref-ramp__step { height: 3.5rem; }
.ref-ramp__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
.ref-ramp__legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ref-dot {
  --swatch: transparent;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--ref-border); /* the 8%-alpha soft border vanished with a panel-tone dot */
  background: var(--swatch);
}

/* The two neutral ramps side by side (foundation.html): two columns of eleven steps, each step a
   chip with its name and value under it, so the cool and the navy ramp sit level step for step. */
.ref-neutrals {
  display: grid;
  gap: var(--ref-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ref-neutrals__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ref-neutrals__head { margin-bottom: 4px; }
.ref-neutrals__step { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-neutrals__chip {
  --swatch: transparent;
  height: 1.75rem;
  border-radius: var(--ref-radius-xs);
  border: 1px solid var(--ref-border); /* the navy ramp holds the panel's own step; the edge keeps it a cell */
  background: var(--swatch);
}
.ref-neutrals__meta { display: flex; flex-wrap: wrap; gap: 0 8px; }

/* A tone stack (app.html Surfaces): each row painted in its own token, label / var / value /
   note across it (/design SURFACE_TONES). */
.ref-tones {
  display: flex;
  flex-direction: column;
  border-radius: var(--ref-radius-sm);
  overflow: hidden;
  border: 1px solid var(--ref-border-soft);
}
.ref-tone {
  --swatch: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding: 12px 16px;
  background: var(--swatch);
}
.ref-tone__name {
  width: 7rem;
  flex-shrink: 0;
  font-size: var(--ref-fs-sm);
  font-weight: 700;
  color: var(--ref-strong);
}
.ref-tone .ref-note--small { flex: 1 1 14rem; }
/* The readouts on a tone row sit on that row's tone, not the panel: body text clears the two
   hover tones in both themes where the muted step is a shade short on hover-light. */
.ref-tone .ref-var, .ref-tone .ref-val { color: var(--ref-text); }

/* A badge on its status tint (foundation.html). The landing bundle's Badge sets the 500 hue as the
   label ON the bg tint, and that pair is under AA at 11px: sage 2.99:1, amber 3.17:1, oxblood
   3.98:1 (slate 5.9 passes). The bundle's Alert, the other consumer of the tints, puts the label in
   the cool gray-700 and carries the hue on a bar instead — so the specimen does the same: the label
   in --neutral-cool-700 (7:1 and up on every tint; it is the landing's --gray-700, named through
   the foundation because this page loads no surface's aliases), the hue as a leading dot. The
   tokens are untouched; the pairing is recorded as a finding under the specimen. */
.ref-tint-badge {
  --swatch: transparent;
  --hue: currentColor;
  --ink: var(--neutral-cool-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 1.5rem;
  padding: 0 10px 0 8px;
  border-radius: var(--ref-radius-xs);
  background: var(--swatch);
  color: var(--ink);
  font-size: var(--ref-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ref-tracking-label);
  text-transform: uppercase;
}
.ref-tint-badge__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hue);
}

/* ══ Type rows ═══════════════════════════════════════════════════════════════════════════════ */

/* /design TypeRoleRow and the FONT_SCALE rows: name, measured px, the sample in its own style,
   and the usage note; rows separated by the hairline. The sample's size is measured off the
   rendered element by reference.js, never typed in. */
.ref-type-rows { display: flex; flex-direction: column; }
.ref-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--ref-border);
}
.ref-type-row:first-child { border-top: 0; padding-top: 0; }
.ref-type-row:last-child { padding-bottom: 0; }
.ref-type-row__name {
  width: 8rem;
  flex-shrink: 0;
  font-family: var(--ref-code);
  font-size: var(--ref-fs-2xs);
  color: var(--ref-dim);
  overflow-wrap: anywhere;
}
.ref-type-row__px {
  width: 5.5rem;
  flex-shrink: 0;
  font-family: var(--ref-code);
  font-size: var(--ref-fs-2xs);
  color: var(--ref-muted);
}
/* The full measurement — size · weight · line-height · letter-spacing — for the role rows. */
.ref-type-row__px--wide { width: 17rem; }
/* The sample wraps and is never ellipsized: a type-role specimen that reads "Your thesis dese…" shows
   a truncated headline instead of the role, and the measurement beside it is unaffected by the
   wrap. Display-size samples (--wrap) take the whole row, so the measurement sits above them and
   the usage note below. */
.ref-type-row__sample {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ref-type-row__sample--wrap { flex: 1 1 100%; }
.ref-type-row__use {
  flex: 1 1 100%;
  min-width: 0; /* a flex item's min-width is auto: without this a nowrap readout inside it (a font stack) widens the row past the phone */
  font-size: var(--ref-fs-2xs);
  color: var(--ref-muted);
}
@media (min-width: 900px) {
  .ref-type-row__use { flex: 0 1 16rem; text-align: right; }
}

/* ══ Bars (spacing, widths) ══════════════════════════════════════════════════════════════════ */

/* /design SPACE_STEPS: the bar is drawn AT var(--space-N) and the readout resolves the same token,
   "so this page can't tell you a number the stylesheet disagrees with". */
.ref-bars { display: flex; flex-direction: column; gap: 6px; }
.ref-bar {
  display: grid;
  grid-template-columns: 7rem 4rem minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
}
.ref-bar__fill {
  --swatch: 0;
  height: 12px;
  width: var(--swatch);
  max-width: 100%;
  border-radius: 2px;
  background: var(--ref-accent);
}
.ref-bar__use {
  grid-column: 1 / -1;
  font-size: var(--ref-fs-2xs);
  color: var(--ref-muted);
}
@media (min-width: 900px) {
  .ref-bar { grid-template-columns: 7rem 4rem minmax(0, 1fr) minmax(0, 1.2fr); }
  .ref-bar__use { grid-column: auto; }
}

/* ══ Tables ══════════════════════════════════════════════════════════════════════════════════ */

.ref-table-wrap { max-width: 100%; overflow-x: auto; }
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ref-fs-sm);
}
.ref-table th,
.ref-table td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--ref-border);
}
.ref-table th {
  border-top: 0;
  padding-top: 0;
  font-size: var(--ref-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ref-tracking-label);
  text-transform: uppercase;
  color: var(--ref-muted);
}
.ref-table td:first-child { color: var(--ref-strong); font-weight: 600; }
/* A readout in a table cell stays on one line: auto table layout hands a column its min-content
   width, and with overflow-wrap: anywhere that is one character — "1280px" became "1280p / x". The
   wrapper scrolls sideways if the table is wider than a phone. */
.ref-table .ref-val, .ref-table .ref-var { white-space: nowrap; overflow-wrap: normal; }

/* ══ Lists ═══════════════════════════════════════════════════════════════════════════════════ */

/* The numbered laws (/design RulesSection) and the drift list (index.html): a two-digit index in
   the code face, the rule in bold, its detail under it. */
.ref-laws { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ref-laws li {
  display: flex;
  gap: var(--ref-gap);
  padding: 12px 0;
  border-top: 1px solid var(--ref-border);
}
.ref-laws li:first-child { border-top: 0; padding-top: 0; }
.ref-laws li:last-child { padding-bottom: 0; }
.ref-laws__n {
  width: 1.5rem;
  flex-shrink: 0;
  font-family: var(--ref-code);
  font-size: var(--ref-fs-xs);
  color: var(--ref-dim);
}
.ref-laws__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-laws__rule { font-size: var(--ref-fs-sm); font-weight: 700; color: var(--ref-strong); }
.ref-laws__detail { font-size: var(--ref-fs-xs); color: var(--ref-muted); }

/* Link cards (index.html): the three layers and the four pages. */
.ref-link-card {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ref-dur) var(--ref-ease), background-color var(--ref-dur) var(--ref-ease);
}
.ref-link-card:hover { border-color: var(--ref-accent-ink); }
.ref-link-card .ref-card__title { color: var(--ref-accent-ink); }
.ref-link-card:focus-visible { outline: 2px solid var(--ref-focus); outline-offset: 2px; }

/* The chrome's own transitions stop under reduced motion. The app's base.css has a global kill
   switch, but the landing surface has none, so without this rule landing.html kept its nav and
   link-card transitions while every specimen animation had stopped. */
@media (prefers-reduced-motion: reduce) {
  .ref-nav a, .ref-var, .ref-link-card, .ref-motion__dot { transition: none; }
}

/* ══ The brand mark (foundation.html) ════════════════════════════════════════════════════════ */

/* The four lines of the mark are attributes on the svg (the foundation's --mark-ray-* / --mark-
   diag-* numbers, 4 / 96 / 19 / 81); the stroke and the cap are the surface's choice, so each
   variant reads its own foundation token: the landing's inline 8 with square caps, the landing
   favicon's 11 (drawn at 0.74 scale by a group transform in the markup), the app's 12 with butt
   caps on the padded viewBox. stroke-width takes a unitless number in CSS for SVG, and
   stroke-linecap takes the token's keyword. */
.ref-mark {
  display: block;
  flex: none;
  overflow: visible;
  color: var(--blue-500);
  fill: none;
  stroke: currentColor;
}
.ref-mark--inline  { stroke-width: var(--mark-stroke-inline);  stroke-linecap: var(--mark-linecap-landing); }
.ref-mark--favicon { stroke-width: var(--mark-stroke-favicon); stroke-linecap: var(--mark-linecap-landing); }
.ref-mark--app     { stroke-width: var(--mark-stroke-app);     stroke-linecap: var(--mark-linecap-app); }
.ref-mark-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ref-gap); }
.ref-mark-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ══ Motion replay (foundation.html) — CSS only ══════════════════════════════════════════════ */

/* Two lanes, one dot each, travelling on the two foundation curves at six times --dur-base (120
   and 200 ms are real UI timings and too quick to compare by eye; the ratio is what the demo
   shows). The "Replay" control is a checkbox under a label: each toggle swaps the lane's
   animation-name between two identical keyframe sets, which restarts the animation — no script. */
.ref-motion { display: flex; flex-direction: column; gap: calc(var(--ref-gap) / 2); }
.ref-motion__input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden; }
.ref-motion__replay {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 12px;
  border-radius: var(--ref-radius-sm);
  background: var(--ref-row);
  color: var(--ref-strong);
  font-size: var(--ref-fs-xs);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.ref-motion__replay:hover { background: var(--ref-hover); }
.ref-motion__input:focus-visible + .ref-motion__replay { outline: 2px solid var(--ref-focus); outline-offset: 2px; }
.ref-motion__lane {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 12px;
  border-radius: var(--ref-radius-sm);
  background: var(--ref-bg);
}
.ref-motion__lane .ref-var { position: relative; z-index: 1; }
.ref-motion__dot {
  --lane-ease: var(--ease-out);
  --lane-dur: calc(var(--dur-base) * 6);
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  border-radius: 50%;
  background: var(--ref-accent);
  animation: ref-travel-a var(--lane-dur) var(--lane-ease) both;
}
.ref-motion__dot--inout { --lane-ease: var(--ease-inout); }
.ref-motion__dot--fast { --lane-dur: calc(var(--dur-fast) * 6); }
.ref-motion__input:checked ~ .ref-motion__lane .ref-motion__dot { animation-name: ref-travel-b; }
@keyframes ref-travel-a { from { left: 0; } to { left: calc(100% - 1.25rem); } }
@keyframes ref-travel-b { from { left: 0; } to { left: calc(100% - 1.25rem); } }

/* ══ Specimen stages shared by the surface pages ═════════════════════════════════════════════ */

/* A fixed-height stage for a rail specimen: the rails are position: absolute / fixed in their
   recipes; here they sit statically inside a clipped box at their two widths. The app rail's slot
   and panel (surfaces.css .sx-rail-slot / .sx-rail) are made static the same way: the slot takes
   its own width in the flow and the panel fills it; data-expanded still picks the width. */
.ref-rail-stage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ref-gap);
  align-items: stretch;
  min-height: 18rem;
  overflow: hidden;
  border-radius: var(--ref-radius-sm);
}
.ref-rail-stage .sx-rail-slot { display: block; height: auto; }
.ref-rail-stage .sx-rail-slot[data-pinned]:not([data-pinned="false"]) { width: var(--rail-w-expanded); }
.ref-rail-stage .sx-rail { position: relative; inset: auto; height: auto; min-height: 18rem; border-radius: var(--ref-radius-sm); border: 1px solid var(--ref-border); }
@media (max-width: 639px) {
  .ref-rail-stage .sx-rail-slot { display: block; }
}
/* A specimen's fixed-width wrapper that scrolls in its own box on a phone, never the page. A
   segmented control inside it keeps its natural width: the recipe is an inline-grid of equal 1fr
   columns, which shrink-fits a narrow wrapper and squeezes "Verdant→Crimson" into a 77px cell
   instead of letting the wrapper scroll. */
.ref-scroll-x { max-width: 100%; overflow-x: auto; }
.ref-scroll-x > .sx-segmented { min-width: max-content; }

/* The CSS-only palette preview (app.html Action Score / DTE): the segmented control's radios
   choose which palette the strip reads. Each option maps the strip's --p-* properties onto that
   palette's tokens with :has(); the strip's cells read only --p-*. Without :has() the strip shows
   the active palette, which is what the defaults below name. */
.ref-preview {
  --p-low: var(--action-verdant-crimson-low);
  --p-mid: var(--action-verdant-crimson-mid);
  --p-high: var(--action-verdant-crimson-high);
  --p-critical: var(--action-verdant-crimson-critical);
  --p-gt30: var(--dte-ember-gt30);
  --p-d21-30: var(--dte-ember-d21-30);
  --p-d14-21: var(--dte-ember-d14-21);
  --p-d7-14: var(--dte-ember-d7-14);
  --p-d3-7: var(--dte-ember-d3-7);
  --p-d0-2: var(--dte-ember-d0-2);
  --p-today: var(--dte-ember-today);
}
.ref-preview:has(input[value="signal"]:checked) {
  --p-low: var(--action-signal-low); --p-mid: var(--action-signal-mid);
  --p-high: var(--action-signal-high); --p-critical: var(--action-signal-critical);
}
.ref-preview:has(input[value="cobalt-heat"]:checked) {
  --p-low: var(--action-cobalt-heat-low); --p-mid: var(--action-cobalt-heat-mid);
  --p-high: var(--action-cobalt-heat-high); --p-critical: var(--action-cobalt-heat-critical);
}
.ref-preview:has(input[value="vital"]:checked) {
  --p-low: var(--action-vital-low); --p-mid: var(--action-vital-mid);
  --p-high: var(--action-vital-high); --p-critical: var(--action-vital-critical);
}
.ref-preview:has(input[value="verdant-crimson"]:checked) {
  --p-low: var(--action-verdant-crimson-low); --p-mid: var(--action-verdant-crimson-mid);
  --p-high: var(--action-verdant-crimson-high); --p-critical: var(--action-verdant-crimson-critical);
}
.ref-preview:has(input[value="abyss"]:checked) {
  --p-gt30: var(--dte-abyss-gt30); --p-d21-30: var(--dte-abyss-d21-30); --p-d14-21: var(--dte-abyss-d14-21);
  --p-d7-14: var(--dte-abyss-d7-14); --p-d3-7: var(--dte-abyss-d3-7); --p-d0-2: var(--dte-abyss-d0-2); --p-today: var(--dte-abyss-today);
}
.ref-preview:has(input[value="verdant-crimson-dte"]:checked) {
  --p-gt30: var(--dte-verdant-crimson-gt30); --p-d21-30: var(--dte-verdant-crimson-d21-30); --p-d14-21: var(--dte-verdant-crimson-d14-21);
  --p-d7-14: var(--dte-verdant-crimson-d7-14); --p-d3-7: var(--dte-verdant-crimson-d3-7); --p-d0-2: var(--dte-verdant-crimson-d0-2); --p-today: var(--dte-verdant-crimson-today);
}
.ref-preview:has(input[value="ember"]:checked) {
  --p-gt30: var(--dte-ember-gt30); --p-d21-30: var(--dte-ember-d21-30); --p-d14-21: var(--dte-ember-d14-21);
  --p-d7-14: var(--dte-ember-d7-14); --p-d3-7: var(--dte-ember-d3-7); --p-d0-2: var(--dte-ember-d0-2); --p-today: var(--dte-ember-today);
}
.ref-preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--ref-gap) * 0.75);
}

/* /design ActionSampleStrip: a mini position-card row (score chips) and a calendar-marker dot row,
   both coloured by bucket. The chip is `flex min-w-[76px] items-center justify-between gap-2
   rounded-sm bg-row px-2.5 py-1.5`, its POS tag `rounded-sm bg-hover px-1.5 py-0.5 font-display
   text-3xs font-semibold uppercase text-strong`. The SCORE is drawn as the shipped card draws it,
   not as the /design strip did: ActionPositionCard.tsx sets it `text-3xl font-bold tabular-nums`
   (28px) on `color-mix(in srgb, <score> 14%, var(--surface-row))` — "the tint keeps text on the
   card contrast-safe in both themes: the score hue is mixed into the row surface rather than used
   as a solid fill behind text" — so that is the pair this strip measures; the strip's own 13px on
   a plain row was a size and a ground the product never shows. The score is a NUMBER, so the system
   sets it in the figure face (--font-num) rather than the code face the specimen used (FINDING, see
   surfaces.css .sx-stat). The bucket colour is set on the chip (--swatch) so both the tint and the
   numeral read it. */
.ref-scores { display: flex; flex-wrap: wrap; gap: calc(var(--ref-gap) / 2); }
.ref-score {
  --swatch: currentColor;
  display: flex;
  min-width: 76px;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--ref-gap) / 2);
  padding: 6px 10px;
  border-radius: var(--ref-radius-xs);
  background: color-mix(in srgb, var(--swatch) 14%, var(--ref-row));
}
.ref-score__tag {
  padding: 2px 6px;
  border-radius: var(--ref-radius-xs);
  background: var(--ref-hover);
  font-family: var(--ref-font);
  font-size: var(--ref-fs-3xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ref-strong);
}
.ref-score__n {
  font-family: var(--ref-font);
  font-variant-numeric: tabular-nums;
  font-size: var(--ref-fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--swatch);
}
.ref-dots { display: flex; align-items: center; gap: 10px; }
.ref-dots .ref-dot { width: 10px; height: 10px; border: 0; }
/* bucket → preview property */
.ref-score--low, .ref-dot--low { --swatch: var(--p-low); }
.ref-score--mid, .ref-dot--mid { --swatch: var(--p-mid); }
.ref-score--high, .ref-dot--high { --swatch: var(--p-high); }
.ref-score--critical, .ref-dot--critical { --swatch: var(--p-critical); }

/* /design DteSampleWeek: seven cells, `grid grid-cols-7 gap-1.5`, each `rounded-sm px-1 py-2.5`
   in its bracket's colour, the day number `font-code text-base font-bold tabular-nums` (figure
   face here, same FINDING) and the bracket label under it. /design draws that label at 75%
   opacity; here it is the on-fill ink at full alpha — at 10px the label already recedes, and the
   75% put it under 4.5:1 on every saturated fill even where the ink pick was right (the shipped
   calendar never draws a bracket label; the 75% is the dev page's own affordance). The ink is
   computed by reference.js from the painted fill (data-ink-auto), because the far brackets'
   light-theme values are pale and the near ones deep — a fixed ink would fail one of them. The two
   [data-ink] rules below are written on the cell itself so they outrank the cell's default ink:
   the bare [data-ink] rules earlier in this file tie with .ref-week__day on specificity and lose
   to it on order. */
.ref-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.ref-week__day {
  --swatch: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--ref-radius-xs);
  background: var(--swatch);
  color: var(--text-on-fill-light);
}
.ref-week__day[data-ink="dark"] { color: var(--text-on-fill-dark); }
.ref-week__day[data-ink="light"] { color: var(--text-on-fill-light); }
.ref-week__n {
  font-family: var(--ref-font);
  font-variant-numeric: tabular-nums;
  font-size: var(--ref-fs-base);
  font-weight: 700;
}
.ref-week__label {
  font-family: var(--ref-font);
  font-size: var(--ref-fs-3xs);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--ref-tracking-label);
  text-align: center;
}
/* bracket → preview property (the preview strip); the per-palette weeks set --swatch inline. */
.ref-week__day--gt30 { --swatch: var(--p-gt30); }
.ref-week__day--d21-30 { --swatch: var(--p-d21-30); }
.ref-week__day--d14-21 { --swatch: var(--p-d14-21); }
.ref-week__day--d7-14 { --swatch: var(--p-d7-14); }
.ref-week__day--d3-7 { --swatch: var(--p-d3-7); }
.ref-week__day--d0-2 { --swatch: var(--p-d0-2); }
.ref-week__day--today { --swatch: var(--p-today); }

/* The focus-ring demo (app.html Semantic): the ring drawn permanently, as /design does, in the
   app's ring tokens. */
.ref-focus-demo {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--ref-radius-sm);
  background: var(--ref-bg);
  font-size: var(--ref-fs-xs);
  font-weight: 700;
  color: var(--ref-text);
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ref-selectable { cursor: pointer; user-select: all; }
/* The Themes card's native select keeps its native look (the point of the specimen is that the
   browser paints it in the page's color-scheme) but stands at the app's small control height, so
   it is a touch target rather than a 21px text line. */
.ref-select { min-height: var(--control-h-sm); font-size: var(--ref-fs-base); }

/* The underlying glyphs (app.html Underlyings): data/underlyings.ts's own paths, bare at the three
   sizes /design shows and inside the disc UnderlyingGlyphs.tsx puts them in — `rounded-full
   bg-page text-faint shadow-[0_0_0_1px_var(--border-strong)]`, sized `size + 7`, so 20px around a
   13px glyph. The disc's 20px is the demo's arithmetic, not a token (the doc says so); the fills
   are the --underlying-*-glyph tokens, set on the paths in the markup. */
.ref-glyph { display: block; flex: none; }
.ref-glyph-disc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--bg-page);
  color: var(--text-faint);
  box-shadow: 0 0 0 1px var(--border-strong);
}

/* The theme toggle shows the sun in the dark theme and the moon in the light one. */
:root[data-theme="light"] .ref-only-dark { display: none; }
:root:not([data-theme="light"]) .ref-only-light { display: none; }

/* A square the specimen glyph icons draw into (the 16-unit icon grid of components/icons.tsx). */
.ref-icon { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* The icon set (app.html Icons): every export of components/icons.tsx at the three size tokens in
   one well each, the three sizes on a common baseline as they would sit in a toolbar, the export
   name under them in the code face. The swatch grids above are sized for a chip plus two readouts
   (11–13rem) and would stack thirty-nine cells one per row on a phone; a cell here needs only the
   three glyphs (16 + 18 + 24 and two gaps) and a name, so the floor is 8.5rem — two columns at
   390px, eight on a desktop. */
.ref-icon-grid {
  display: grid;
  gap: calc(var(--ref-gap) / 2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}
.ref-icon-grid .ref-well { align-items: center; text-align: center; }
.ref-icon-grid .ref-well__label { overflow-wrap: anywhere; }

/* The two-thumb band (app.html Gallery #range): BandSlider.tsx's own elements under the two
   .sx-range inputs — the `relative h-5` box, the track `absolute inset-x-0 top-1/2 h-1
   -translate-y-1/2 rounded-sm bg-row`, the halo `h-2 … bg-hover-light` at the chain's span, the
   selection `h-1 … bg-accent` at the band — with the label row above and the hint below, as the
   component draws them. The 20px box, 4px track and 8px halo are the component's utilities and not
   the recipe's (range-and-flip.md says so), so they are this chrome's literals; every colour is the
   token the utility resolves to. The halo's and selection's left / width percentages are inline in
   the markup, as the component sets them; reference.js moves the selection with the thumbs. */
.ref-band { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 17rem; }
.ref-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ref-band__readout {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.ref-band__box { position: relative; height: 20px; }
.ref-band__track, .ref-band__halo, .ref-band__selection {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: var(--radius-sm);
}
.ref-band__track { left: 0; right: 0; height: 4px; background: var(--surface-row); }
.ref-band__halo { height: 8px; background: var(--surface-hover-light); }
.ref-band__selection { height: 4px; background: var(--accent); }
.ref-band__hint { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--text-dim); }

/* The card flip (app.html Gallery #flip): FlipCard.tsx's two faces and what StrategyCard puts on
   them, on the recipe's .sx-flip / .sx-flip-inner / .sx-flip-face. The card is 16rem tall
   (STRATEGY_CARD_HEIGHT, "arithmetic rather than taste") in a grid of 17rem columns 12px apart
   (CARD_GRID). The front is `rounded-md bg-panel` holding one button — `flex h-full w-full
   flex-col gap-1.5 rounded-md p-3 text-left transition-colors hover:bg-row` — with CardFace's rows:
   the instrument in mono faint, the side chip, the Λ trunk (`font-mono text-2xl font-bold
   leading-none tabular-nums text-accent-bright` under a 3xs caps headline), the payoff spark in the
   viz pair, and "Flip ▸" / symbol / structure along the bottom. The back is `rounded-md bg-row p-3`:
   a title bar with the small Back (`rounded-sm bg-panel px-1.5 py-0.5 … text-faint
   hover:text-strong`), a scrolling list of CardGroup / CardRow pairs, and the footer pinned under
   it. Caps labels take --tracking-label where the demo wrote tracking-wide (the system's rule). */
.ref-flip-grid {
  display: grid;
  width: 100%;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.ref-flip { height: 16rem; }
.ref-flip-face { border-radius: var(--radius-md); }
.ref-flip-face--front { background: var(--surface-panel); }
.ref-flip-face--back { background: var(--surface-row); padding: var(--space-3); }
.ref-flip-front {
  appearance: none;
  margin: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-ui);
}
@media (hover: hover) {
  .ref-flip-front:hover { background: var(--surface-row); }
}
.ref-flip-front__top { display: flex; align-items: center; gap: var(--space-2); }
.ref-flip-front__instrument {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}
.ref-flip-front__mid { display: flex; flex: 1; min-height: 0; align-items: center; gap: var(--space-3); }
.ref-flip-front__trunk { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 2px 0; }
.ref-flip-front__headline,
.ref-flip-front__structure,
.ref-flip-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
}
.ref-flip-front__structure { font-size: var(--fs-2xs); }
.ref-flip-front__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
}
.ref-flip-front__spark { flex: 1; min-width: 0; height: 3rem; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ref-flip-front__bottom { display: flex; align-items: center; gap: 6px; }
.ref-flip-front__flip {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
}
.ref-flip-front__symbol { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--text-strong); }
.ref-flip-back__bar { display: flex; flex-shrink: 0; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: 6px; }
.ref-flip-back__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-strong);
}
.ref-flip-back__btn {
  appearance: none;
  margin: 0;
  border: 0;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-ui);
}
@media (hover: hover) {
  .ref-flip-back__btn:hover { color: var(--text-strong); }
}
.ref-flip-back__list { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: var(--space-1); }
.ref-flip-back__footer { flex-shrink: 0; padding-top: 6px; }
.ref-flip-group { display: flex; flex-direction: column; }
.ref-flip-group__title { padding-bottom: 2px; color: var(--text-dim); }
/* CardRow: `flex items-baseline justify-between gap-2 py-px`, the label `font-display text-2xs
   text-faint`, the value `font-mono text-2xs tabular-nums` in body, up or down. */
.ref-flip-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 1px 0; }
.ref-flip-row > :first-child { flex-shrink: 0; font-family: var(--font-display); font-size: var(--fs-2xs); color: var(--text-faint); }
.ref-flip-row > :last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-body);
}
.ref-flip-row > .ref-flip-row__up { color: var(--up); }
.ref-flip-row > .ref-flip-row__down { color: var(--down); }

/* The filter checkbox (app.html Gallery #checkbox): drawn by this chrome because components/app/
   has no .sx-checkbox yet (filter-checkbox.md: two tokens first, for the 14px box and the 2px
   corner, both off the scale). The toggle is /design's `flex items-center gap-1.5 font-display
   text-sm font-semibold uppercase` button with aria-pressed; the box `h-3.5 w-3.5 rounded-[2px]
   border transition-colors` — `border-border-strong bg-transparent` off, `background` and
   `borderColor` = categoryColor(id) on — and the 9px CheckIcon in categoryTextOn(id). The fill and
   its ink arrive as --chip-fill / --chip-ink on the toggle, the two properties the chip recipe
   already reads, and are painted only while the toggle is pressed: the fill is the state. The word
   is set at --tracking-label where the demo writes tracking-wide. FiltersBar's All box is the same
   shape in the accent (data-on) or, when only some categories are on, an accent outline with an
   --accent-bright minus (data-partial). */
.ref-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.ref-check {
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-faint);
  transition: color var(--dur-micro) var(--ease-ui);
}
.ref-check--static { cursor: default; }
@media (hover: hover) {
  .ref-check[aria-pressed="false"]:hover { color: var(--text-body); }
}
.ref-check[aria-pressed="true"], .ref-check[data-on="true"], .ref-check[data-partial="true"] { color: var(--text-strong); }
.ref-check__box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 14px; /* h-3.5 w-3.5: off the 4px grid, no token yet */
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 2px; /* rounded-[2px]: under --radius-xs, no token yet */
  background: transparent;
  color: var(--chip-ink, var(--text-on-fill-light));
  transition: background-color var(--dur-micro) var(--ease-ui), border-color var(--dur-micro) var(--ease-ui);
}
.ref-check[aria-pressed="true"] .ref-check__box, .ref-check[data-on="true"] .ref-check__box { background: var(--chip-fill); border-color: var(--chip-fill); }
.ref-check[data-partial="true"] .ref-check__box { border-color: var(--accent); color: var(--accent-bright); }
.ref-check__mark { display: none; stroke-width: 2; }
.ref-check[aria-pressed="true"] .ref-check__mark, .ref-check[data-on="true"] .ref-check__mark, .ref-check[data-partial="true"] .ref-check__mark { display: block; }

/* ══ Landing-only chrome (landing.html) ══════════════════════════════════════════════════════ */

/* Everything from here down is used only on landing.html and reads only landing / foundation
   names, so the landing page shows its specimens on the landing's own two grounds. */

/* The two grounds every landing specimen is shown on: the light hero ground (the cool gray-100
   page, with .lp-hero on it so the frosted secondary pill applies, as the landing's hero does) and
   the dark section ground --lp-bg-dark with [data-on-dark] (the attribute kicker.css reads). */
.ref-ground {
  display: flex;
  flex-direction: column;
  gap: var(--ref-gap);
  min-width: 0;
  padding: calc(var(--ref-gap) * 1.5);
  border-radius: var(--ref-radius);
}
.ref-ground--light {
  background: var(--bg-page);
  border: 1px solid var(--border);
}
.ref-ground--dark {
  background: var(--lp-bg-dark);
  color: var(--lp-text);
}
.ref-ground--dark .ref-eyebrow { color: var(--gray-500); }
.ref-ground--dark .ref-var { color: var(--gray-500); }
.ref-ground--dark .ref-var:hover { color: var(--gray-300); }
.ref-ground--dark .ref-val { color: var(--gray-500); }
.ref-ground--dark .ref-note, .ref-ground--dark .ref-note--small { color: var(--gray-400); }
.ref-ground--dark .ref-note strong { color: var(--gray-100); }
.ref-ground--dark .ref-swatch__label { color: var(--gray-100); }
.ref-ground--dark .ref-swatch__chip { border-color: var(--lp-hairline-dark); }
.ref-ground--dark .ref-type-row { border-color: var(--lp-hairline-dark); }
.ref-ground--dark .ref-type-row__name, .ref-ground--dark .ref-type-row__px, .ref-ground--dark .ref-type-row__use { color: var(--gray-500); }
.ref-ground--dark .ref-swatch__chip--shadow { background: var(--lp-stage-top); }
.ref-grounds {
  display: grid;
  gap: var(--ref-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start; /* each ground ends with its content; stretched, the shorter dark column of the type roles trailed 1000px of empty panel */
}
/* A translucent-white hairline token (the dark band's rules, the pill's edge on dark, the popover's
   border) drawn as a border swatch: the box it rings is the dark ground, not the white card, or a
   9% white edge on a white chip on a white card is an empty cell. */
.ref-swatch__chip--on-dark { background: var(--lp-bg-dark); }

/* The landing's own kicker role, coloured as SectionHead colours it, gets its spacing from
   kicker.css; the chrome only places the specimens. The band specimens stack with no gap so the
   four themes read as one column of bands, each drawn at the band's own padding, which is large —
   the specimen halves it so four fit a screen (the token itself is read out beside them). */
.ref-bands { display: flex; flex-direction: column; border-radius: var(--ref-radius); overflow: hidden; }
.ref-bands .lp-band { padding-block: calc(var(--ref-gap) * 2.5); }

/* The roadmap PATTERN (band.css: ".lp-roadmap* — NOT ported; the roadmap is documented as a
   pattern"): the band's --rm-* properties, drawn as the four small pieces a consumer's roadmap CSS
   reads them for — the dot in its halo, the tag pill, the caption, the featured gold pill — on a
   band ground reduced to a strip. The measurements are the landing's (a 14px dot in a 6px halo;
   the 20px tag; the 22px feature pill), read from the roadmap tokens where one exists. */
.ref-rm-stage { padding: var(--ref-gap) calc(var(--ref-gap) * 1.5); text-align: left; }
.ref-rm-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--ref-gap) * 1.25); }
.ref-rm-dot {
  display: inline-block;
  width: var(--lp-roadmap-dot);
  height: var(--lp-roadmap-dot);
  margin: var(--lp-roadmap-halo);
  border-radius: 50%;
  background: var(--rm-dot);
  box-shadow: 0 0 0 var(--lp-roadmap-halo) var(--rm-halo), 0 0 18px var(--rm-glow);
}
.ref-rm-dot--on {
  background: var(--rm-dot-on);
  box-shadow: 0 0 0 var(--lp-roadmap-halo-on) var(--rm-halo-on), 0 0 28px var(--rm-glow-on);
}
.ref-rm-line { flex: 1 1 4rem; height: 1px; background: var(--rm-line); }
.ref-rm-name { color: var(--rm-name); }
.ref-rm-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--lp-pill);
  color: var(--rm-tag-text);
  background: var(--rm-tag-bg);
  white-space: nowrap;
}
.ref-rm-caption { color: var(--rm-caption); }
.ref-rm-feature {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--lp-pill);
  color: var(--rm-feature-ink);
  background: var(--rm-feature-bg);
  box-shadow: inset 0 0 0 1px var(--rm-feature-glow), 0 0 18px -6px var(--rm-feature-glow);
  white-space: nowrap;
}
.ref-rm-tile {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--rm-tile);
  box-shadow: 0 0 0 1.5px var(--rm-feature), 0 0 26px -6px var(--rm-feature-glow);
}
/* The popover sketch holds what the landing's popover holds — the step's title with its tag, the
   explanation, a preview square with its caption — because the tag and caption inks (--rm-tag-text,
   --rm-caption) are tuned for the popover's ground: on the cobalt band the popover is white and
   those inks are cobalt, so drawn on the band itself they would vanish (landing.css only re-inks
   them when the phone layout puts the popover inline on the band). */
.ref-rm-pop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-xl);
  background: var(--rm-pop-bg);
  border: 1px solid var(--rm-pop-border);
  box-shadow: var(--rm-pop-shadow);
  color: var(--rm-pop-text);
  text-align: left;
}
.ref-rm-pop .lp-step-name { color: var(--rm-pop-title); }
.ref-rm-pop__head, .ref-rm-pop__previews { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* The cobalt band's PHONE layout (landing.html Roadmap, the fifth strip): at and below 860px the
   popover's detail sits inline on the cobalt ground and landing.css re-inks the --rm-* pieces for
   it — the four translucent whites of landing.band.cobalt.inline.* and the theme's own whites, its
   keyword lavender and its gold (band.css's media block, rule for rule). The strip restates that
   block on a class so the inline look shows at every viewport beside the desktop one; the values
   are the same tokens, nothing of this file's own. Inline, the popover has no box of its own
   (landing.css: `background: none; border: 0; box-shadow: none; padding: 0`), its text takes the
   band's, and its title is hidden because the step's label already names it. */
.ref-rm-stage--inline {
  --rm-tag-text: var(--white);
  --rm-tag-bg: var(--lp-rm-cobalt-inline-tag-bg);
  --rm-tile: var(--lp-rm-cobalt-inline-tile);
  --rm-soon-text: var(--white);
  --rm-soon-mark: var(--white);
  --rm-soon-hatch: var(--lp-rm-cobalt-inline-soon-hatch);
  --rm-soon-glow: var(--lp-rm-cobalt-inline-soon-glow);
  --rm-caption: var(--lp-band-cobalt-hl);
  --rm-feature: var(--lp-rm-cobalt-feature);
  --rm-feature-ink: var(--lp-rm-cobalt-feature-ink);
  --rm-feature-glow: var(--lp-rm-cobalt-feature-glow);
}
.ref-rm-stage--inline .ref-rm-pop {
  padding: 0;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--band-text);
}
/* The "coming soon" preview square (landing.css .lp-roadmap-frame.is-soon): "a hatched square lit
   from below, the brand mark turning slowly over the note" — the glow as a radial from under the
   bottom edge, the hatch as 1px lines every 8px, on the tile; the note in --rm-soon-text at the
   landing's 9.5px / 0.14em caps and the mark in --rm-soon-mark. Drawn at rest here: the turn is the
   landing's own animation. */
.ref-rm-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 70% at 50% 110%, var(--rm-soon-glow), transparent 70%),
    repeating-linear-gradient(135deg, var(--rm-soon-hatch) 0 1px, transparent 1px 8px),
    var(--rm-tile);
  font: 500 9.5px/1 var(--lp-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rm-soon-text);
}
.ref-rm-soon .ref-mark { color: var(--rm-soon-mark); }
/* A translucent-white roadmap token drawn on the cobalt band it is meant for: the swatch's own
   colour layered over the band's gradient, ringed in the band's hairline. */
.ref-swatch__chip--on-cobalt {
  background: linear-gradient(var(--swatch), var(--swatch)), var(--lp-band-cobalt-bg);
  border-color: var(--lp-band-cobalt-hairline);
}

/* The split-section PATTERN: the stage (landing.css .lp-split-stage — a vertical gradient from
   --lp-stage-top to --lp-stage-bottom behind a dot grid, a hairline on its left) and the
   closed / open item labels, which are the .lp-item-label roles in gray-500 and gray-100. */
.ref-split-stage {
  position: relative;
  min-height: 16rem;
  overflow: hidden;
  border-radius: var(--ref-radius);
  border-left: 1px solid var(--lp-hairline-dark-soft);
  background: linear-gradient(180deg, var(--lp-stage-top) 0%, var(--lp-stage-bottom) 100%);
}
.ref-split-closed { color: var(--gray-500); }
.ref-split-open { color: var(--gray-100); }
.ref-split-text { color: var(--gray-400); }
.ref-split-strong { font-weight: 400; color: var(--gray-100); } /* landing.css .lp-split-text strong */

/* The footer specimen is the real .lp-footer; its own padding and breakpoints apply. */
.ref-footer-stage { border-radius: var(--ref-radius); overflow: hidden; }

/* The rail specimens: the real .lp-rail, held static at its two widths on the two grounds —
   position relative instead of fixed, and the hover / focus widening switched off, so each box
   shows exactly one width ("static widths only"). The glass needs something behind it: the stage
   paints the hero ground on the left half and the dark ground on the right. */
.ref-rail-ground {
  position: relative;
  display: flex;
  justify-content: space-between; /* the slim rail over the light half, the open rail over the dark half */
  min-height: 29rem; /* the logo cell plus four cells at their 96px maximum, so nothing is clipped */
  overflow: hidden;
  border-radius: var(--ref-radius);
  background: linear-gradient(90deg, var(--bg-page) 0 50%, var(--lp-bg-dark) 50% 100%);
}
.ref-rail-ground .lp-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  align-self: stretch;
}
.ref-rail-ground .lp-rail--slim, .ref-rail-ground .lp-rail--slim:hover { width: var(--lp-rail-width); box-shadow: none; }
.ref-rail-ground .lp-rail--open, .ref-rail-ground .lp-rail--open:hover { width: var(--lp-rail-width-open); box-shadow: var(--shadow-lg); }
.ref-rail-ground .lp-rail--open .lp-rail-label, .ref-rail-ground .lp-rail--open .lp-rail-wordmark { opacity: 1; }
.ref-rail-ground .lp-rail--open .lp-rail-mark { opacity: 0; }
.ref-rail-ground .lp-rail--slim .lp-rail-label, .ref-rail-ground .lp-rail--slim .lp-rail-wordmark { opacity: 0; }
.ref-rail-ground .lp-rail-cell { --rail-count: 4; }
.ref-rail-ground .lp-rail-glyph {
  --swatch: var(--rail-dot);
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--swatch);
}
.ref-rail-ground .lp-rail-cell.is-active .lp-rail-glyph { --swatch: var(--rail-accent); background: var(--swatch); }
.ref-rail-ground .lp-rail-logo > span { gap: 14px; align-items: center; }
.ref-rail-ground .lp-rail-wordmark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap; }
/* The rail's tone variables, read out from inside a toned cell (data-var-from="self"). */
.ref-rail-tones { display: grid; gap: var(--ref-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ref-rail-tones .lp-rail { position: relative; width: auto; overflow: visible; }
.ref-rail-tones .ref-tone-cell {
  padding: calc(var(--ref-gap) * 0.75);
  border-radius: var(--ref-radius-sm);
  background: var(--rail-tint);
  color: var(--rail-fg);
}
.ref-tone-cell .ref-var, .ref-tone-cell .ref-val, .ref-tone-cell .ref-swatch__label { color: var(--rail-fg); }

/* The payoff chart specimen stands on the dark stage, as PayoffChart.jsx does. */
.ref-payoff-stage {
  padding: calc(var(--ref-gap) * 1.5);
  border-radius: var(--ref-radius);
  background: var(--lp-bg-dark);
}
.ref-payoff-stage .lp-payoff { max-width: 560px; }

/* The Products showcase pattern (Landing.jsx PRODUCTS_CSS): the card is `.lp-showcase` — the white
   surface-card with the hairline border at --radius-lg, the medium shadow — and inside it the
   screenshot frame `.lp-showcase-frame`, rounded --radius-md on its top corners only, ringed in
   --border-faint with no bottom edge, overhanging the card's clipped bottom. Here the stage gradient
   stands in for the screenshot, and the media pill is shown (its rise-in lives in PRODUCTS_CSS, so
   the specimen holds it visible). */
.ref-showcase-card {
  max-width: 420px;
  padding: var(--ref-gap) var(--ref-gap) 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.ref-showcase-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(180deg, var(--lp-stage-top) 0%, var(--lp-stage-bottom) 100%);
  border: 1px solid var(--border-faint);
  border-bottom: 0;
}
.ref-showcase-frame .lp-media-cta { opacity: 1; transform: none; pointer-events: auto; }
/* The split stage's dot grid, as landing.css draws it (a radial-gradient dot every 28px, masked to
   the centre), in the landing's own stage colours. landing.css paints the dots as white at 14%
   (an alpha with no token in SPEC §4.2); the same tint is mixed here from the foundation's --white
   so no colour literal is written, and the mask's opaque stop is the keyword black, which only
   contributes alpha. */
.ref-stage-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--white) 14%, transparent) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, black 0%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 50%, black 0%, transparent 100%);
}
.ref-stage-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(42% 42% at 50% 50%, var(--lp-glow-cobalt), transparent);
}
/* The split deck pattern: two cards, the lower one nudged up, shrunk and dimmed as .lp-split-card
   does with --d = 1 (translateY −7%, scale 0.95, a 55% ink veil). */
.ref-deck { position: relative; display: grid; place-items: center; padding: calc(var(--ref-gap) * 1.5) calc(var(--ref-gap) * 2); }
.ref-deck__card {
  grid-area: 1 / 1;
  width: min(100%, 320px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  background: var(--gray-900);
  border: 1px solid var(--lp-hairline-dark-soft);
}
.ref-deck__card--behind { transform: translateY(-7%) scale(0.95); opacity: 0.45; }
/* The wire grid pattern: GridField()'s square cells — about 92px, its `cell` default, fitted to a
   whole number of columns on the page — in the hairline tone of each ground, with a cobalt patch
   where the spotlight would be. The stage is two cells tall so the squares read as squares. */
.ref-wire {
  --wire: var(--gray-300);
  position: relative;
  min-height: 12rem;
  border-radius: var(--ref-radius-sm);
  background-image: linear-gradient(var(--wire) 1px, transparent 1px), linear-gradient(90deg, var(--wire) 1px, transparent 1px);
  background-size: 92px 92px;
}
.ref-wire--dark { --wire: var(--gray-700); }
.ref-wire__spot {
  position: absolute;
  inset: 20% 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--lp-glow-cobalt), transparent);
}
/* The cursor pattern: the mark at its rest, link and pressed sizes, with the ring — Cursor.jsx's
   `.lp-cursor-ring { border: 1px solid var(--blue-400) }` (white only under `difference` in the
   link state, which a static sketch cannot show). */
.ref-cursor { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--blue-400); }
.ref-cursor--rest { width: 28px; height: 28px; }
.ref-cursor--link { width: 40px; height: 40px; }
.ref-cursor--press { width: 22px; height: 22px; }

/* Radii / shadow / spacing specimens on the landing read the landing's tokens through the shared
   swatch classes above; only the ground differs. */

/* The type-scale samples (app.html): the step's size inline (a var pass), the weight and tone here —
   semibold strong for the content scale (/design FONT_SCALE: `font-display font-semibold
   text-strong`), extrabold with the display ramp's tight tracking for the numerals. */
.ref-scale-sample { font-family: var(--ref-font); font-weight: 600; color: var(--ref-strong); }
.ref-scale-sample--display { font-weight: 800; letter-spacing: var(--ref-tracking-tight); }
/* A short vertical rule between a button and a control (/design `h-5 w-px bg-border`). */
.ref-vdivider { display: inline-block; width: 1px; height: 1.25rem; background: var(--ref-border); }