/* ============================================================================
   SLABPRICING — design system
   Dark-first. Cobalt near-black ground (blue pivot, doc 30), cool ink, gold reserved for
   selection and emphasis. Figures are the typography.
   Tokens follow docs/design/03-ux-design-system.md section 5.2.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  color-scheme: dark;

  /* ---- Ground & surface (cool navy near-black; never pure #000) ---- */
  --sp-bg:            #0A0E15;
  --sp-surface-1:     #10151E;
  --sp-surface-2:     #161C27;
  --sp-surface-3:     #1D2431;
  --sp-scrim:         rgb(2 6 12 / 0.62);

  /* ---- Line. non-text: boundaries only ---- */
  --sp-line:          #232B38;   /* 1.33:1 vs bg — dividers, non-essential */
  --sp-line-strong:   #35404F;   /* 1.81:1 — table heads, emphasis rules */
  --sp-line-control:  #61708A;   /* 3.26:1 vs bg ✓ AA non-text — every
                                    interactive border MUST use this */

  /* ---- Ink. worst case = on --sp-surface-3 ---- */
  --sp-ink:           #E9EDF2;   /* 17.14 bg · 13.71 s3 ✓ */
  --sp-ink-muted:     #A3ADBC;   /*  8.07 bg ·  6.45 s3 ✓ */
  --sp-ink-faint:     #8B95A4;   /*  5.84 bg ·  4.67 s3 ✓  <- REPLACES the
                                    failing --sl-ink-faint #6C6C68 (3.70) */
  --sp-ink-invert:    #0A0E15;

  /* ---- GOLD: the four-value metallic system. See §2.1–2.2 for the law. ---- */
  --sp-gold-hi:       #F0D68C;   /* 13.77 bg · 11.02 s3 ✓  highlight / knockout */
  --sp-gold:          #D4A93C;   /*  8.94 bg ·  7.15 s3 ✓  THE brand mid */
  --sp-gold-deep:     #8A6A16;   /*  3.82 bg — non-text: edges, engraved ground */
  --sp-gold-mute:     #7E6E40;   /*  3.14 on surface-3 ✓ — the meter's quantity fill.
                                    Deliberately 2.3x off --sp-gold so a quantity can
                                    never be mistaken for the struck Gold Tier metal. */
  --sp-gold-wash:     rgb(212 169 60 / 0.10);
  --sp-gold-text:     #F0D68C;   /* 13.77 bg ✓ — the gold that is safe as TEXT */
  --sp-gold-edge:     inset 0 1px 0 0 rgb(240 214 140 / 0.28);

  /* ---- Direction. Hue is never the only channel (glyph + sign + lightness) --- */
  --sp-up:            #4ED8A0;   /* 10.92 bg ·  8.73 s3 ✓ */
  --sp-down:          #FF7D6B;   /*  7.87 bg ·  6.29 s3 ✓ */
  --sp-flat:          #A3ADBC;   /*  8.07 bg ·  6.45 s3 ✓ */
  --sp-up-wash:       rgb(78 216 160 / 0.12);
  --sp-down-wash:     rgb(255 125 107 / 0.12);

  /* ---- Confidence (Lumen §4.6 tiers) ---- */
  --sp-conf-high:     #4ED8A0;   /* 10.92 bg ·  8.73 s3 ✓ */
  --sp-conf-thin:     #E8B44A;   /* 10.36 bg ·  8.29 s3 ✓ */
  --sp-conf-stale:    #95A0AF;   /*  6.81 bg ·  5.45 s3 ✓ */
  --sp-conf-none:     #8B95A4;   /*  5.84 bg ·  4.67 s3 ✓ */
  /* NEVER dim a confidence state with opacity — Facet §1.6 measured
     opacity:.48 on a no-data cell at ~2:1. Dim with the token, not the layer. */


  /* ---- Chart series. Encodes GRADE, never direction. CVD-safe ramp. ---- */
  --sp-s1: #E9EDF2;  /* selected grade — always ink, always boldest  17.14 ✓ */
  --sp-s2: #6FA8FF;  /*  8.17 ✓ */
  --sp-accent: #7FA9F0;  /*  8.13 bg · 7.70 s1 ✓ — internal links */
  --sp-s3: #D4A93C;  /*  8.94 ✓ */
  --sp-s4: #C58BFF;  /*  7.97 ✓ */
  --sp-s-gold: #D4A93C;  /* the gold benchmark overlay — 1px, always dashed */
  --sp-grid: #151B25;    /* non-text */

  /* ---- Type ---- */
  --sp-font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sp-font-ui:      "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sp-font-mono:    "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Scale — 1.250 major third, 16px base */
  --sp-t-display:  clamp(2.75rem, 1.8rem + 4.2vw, 4.5rem); /* 44→72 · display · 400 · lh 1.05 · ls -0.02em */
  --sp-t-h1:       clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); /* 28→40 · display · 400 · lh 1.10 · ls -0.018em */
  --sp-t-h2-lead:  clamp(1.625rem, 1.35rem + 1.1vw, 2rem); /* 26→32 · display · 400 · lh 1.15 · ls -0.015em · PAYOFF SECTIONS ONLY */
  --sp-t-h2:       clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); /* 20→22 · display · 400 · lh 1.2 · ls -0.01em */
  --sp-t-h3:       1.0625rem;   /* 17 · ui · 600 · lh 1.3 · ls 0 */
  --sp-t-body:     1rem;        /* 16 · ui · 400 · lh 1.55 · ls 0 */
  --sp-t-sm:       0.875rem;    /* 14 · ui · 400 · lh 1.45 · ls 0 */
  --sp-t-xs:       0.75rem;     /* 12 · ui · 400 · lh 1.4  · ls 0.005em */
  --sp-t-micro:    0.6875rem;   /* 11 · MONO · 500 · lh 1.2 · ls 0.09em · ALL-CAPS ONLY */

  /* Figures — mono, tabular, everywhere */
  --sp-t-price-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40→64 · mono 500 · lh 1.0 · ls -0.02em */
  --sp-t-price-lg:   1.75rem;   /* 28 · mono 500 · lh 1.1  · ls -0.01em */
  --sp-t-price-md:   1.125rem;  /* 18 · mono 500 · lh 1.15 · ls -0.005em */
  --sp-t-price-sm:   0.875rem;  /* 14 · mono 400 · lh 1.3  · ls 0 */

  --sp-lh-tight: 1.05;  --sp-lh-snug: 1.25;  --sp-lh-body: 1.55;
  --sp-track-caps: 0.09em;  --sp-track-display: -0.02em;

  /* ---- Space (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --sp-gutter: clamp(16px, 4vw, 32px);
  --sp-measure: 68ch;
  --sp-max: 1280px;

  /* ---- Radius. Radius means CLICKABLE (Facet §4 move 3). ---- */
  --sp-r-0:    0px;    /* data surfaces: stat band, ladder, tables, chart plot */
  --sp-r-xs:   3px;    /* badges, glyph boxes */
  --sp-r-sm:   6px;    /* interactive: grade cells, buttons, fields, listing cards */
  --sp-r-md:   10px;   /* containers that genuinely float: dialog, sheet */
  --sp-r-pill: 999px;  /* meters only */

  /* ---- Elevation. Shadow is for things that FLOAT. Four users, total:
         toast, chart tooltip, search results, dialog. Nothing else. ---- */
  --sp-e-0: none;
  --sp-e-raise: none;   /* dark elevates with light + hairline, never shadow */
  --sp-e-float: 0 1px 0 0 rgb(255 255 255 / 0.06) inset, 0 12px 40px rgb(2 6 12 / 0.55);
  --sp-focus: 0 0 0 2px var(--sp-bg), 0 0 0 4px var(--sp-gold-hi);

  /* ---- Motion ---- */
  --sp-dur-1: 120ms; --sp-dur-2: 200ms; --sp-dur-3: 320ms;
  --sp-dur-snap: 70ms;   /* crosshair snap settle, 60-90ms band (doc 31 s4) */
  --sp-ease:     cubic-bezier(0.2, 0, 0, 1);
  --sp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --sp-header-h: 56px;
  --sp-gradebar-h: 60px;
  --sp-sticky-h: calc(var(--sp-header-h) + var(--sp-gradebar-h) + 12px);
  --sp-z-header: 100; --sp-z-gradebar: 90; --sp-z-drawer: 200; --sp-z-toast: 300;
}

/* ============================ LIGHT ====================================== */
[data-theme="light"] {
  color-scheme: light;

  /* ---- Ground: three real steps. Page is cool paper, cards lift ABOVE
     it, chrome and insets step DOWN. In dark, elevation is light + hairline;
     on paper it is a lighter surface, a visible border and a soft shadow.
     Same idea, different medium. L*: 95.2 / 99.3 / 91.0 / 85.7 ---- */
  /* THE GROUND IS BLUE. The first light palette was cool gray with a blue
     slant — #F2F4F7 reads as paper, not as this brand — and once light became
     the served default that slant was the only face most visitors would ever
     see. The blue identity had been living entirely in the dark theme's
     ink-navy, which was now opt-in. Hue ~218 across the ramp, with enough
     chroma that a thumbnail reads blue rather than gray.
     The three-step rule is unchanged: ground in the middle, cards lift ABOVE
     it, chrome and insets step DOWN. */
  --sp-bg:            #E7EDF6;   /* the page: clearly blue-tinted light */
  --sp-surface-1:     #F8FAFD;   /* cards, chips, grade cells — lifts off the ground */
  --sp-surface-2:     #DDE6F4;   /* raised chrome: table heads, panels, sheets */
  --sp-surface-3:     #CFDCEE;   /* inset / pressed / meter tracks — deepest blue */
  --sp-scrim:         rgb(9 18 36 / 0.44);

  --sp-line:          #C9D5E8;   /* non-text hairline */
  --sp-line-strong:   #A8B8D0;   /* non-text emphasis */
  --sp-line-control:  #5D6B84;   /*  4.57 page ✓ — every interactive border */

  /* Ink pulls to deep navy, not warm black: on a blue ground a neutral black
     reads muddy, and navy keeps the whole page one temperature. */
  --sp-ink:           #16233A;   /* 13.36 page · 11.32 s3 ✓ */
  --sp-ink-muted:     #3F4E66;   /*  7.16 page ·  6.07 s3 ✓ */
  --sp-ink-faint:     #4A5970;   /*  6.04 page ·  5.12 s3 ✓ */
  --sp-ink-invert:    #F8FAFD;

  /* The interactive blue. Links get a real blue rather than borrowing the ink,
     so "this is a link" and "this is a heading" are not one colour at two
     weights. */
  --sp-accent:        #1E48B8;   /*  6.67 page ·  7.51 s1 ·  5.66 s3 ✓ */

  /* ---- Gold leans BRONZE on paper. A yellow gold goes olive against cream;
     bronze keeps the metal. Restraint Law unchanged: gold is earned. ---- */
  --sp-gold-hi:       #96691B;   /*  3.49 s3 — NON-TEXT: edges, rules, knockouts */
  --sp-gold:          #7F5618;   /*  5.50 page ·  4.66 s3 ✓ non-text fills and borders */
  --sp-gold-deep:     #4E3308;   /* 12.15 page · 10.30 s3 ✓ */
  --sp-gold-mute:     #8E6C3A;   /*  3.71 s3 — the meter's quantity fill */
  --sp-gold-text:     #6E4A12;   /*  6.73 page ·  5.70 s3 ✓ — the gold safe as text.
     Deepened one step: bronze holds its metal against blue paper, where the
     previous value began drifting olive. Restraint Law unchanged — gold
     appears on ounce surfaces and nowhere else. */
  --sp-gold-wash:     rgb(127 86 24 / 0.09);
  --sp-gold-edge:     inset 0 1px 0 0 rgb(255 255 255 / 0.6);

  --sp-up:            #0B6340;   /*  6.21 page ·  5.26 s3 ✓ */
  --sp-down:          #A62A13;   /*  6.02 page ·  5.11 s3 ✓ */
  --sp-flat:          #49525F;
  --sp-up-wash:       rgb(11 99 64 / 0.10);
  --sp-down-wash:     rgb(166 42 19 / 0.10);

  --sp-conf-high:     #0B6340;
  --sp-conf-thin:     #7A4F06;   /*  4.70 s3 ✓ */
  --sp-conf-stale:    #515A67;
  --sp-conf-none:     #515A67;

  --sp-s1: #16233A; --sp-s2: #1E48B8; --sp-s3: #7F5618; --sp-s4: #6E37AB;
  --sp-s-gold: #7F5618;
  --sp-grid: #D3DEEE;

  /* On paper, elevation is a shadow. In dark it stays `none` — a shadow on a
     near-black ground is a smudge, which is why Chroma budgeted four. */
  --sp-e-raise: 0 1px 2px rgb(12 26 52 / 0.07), 0 2px 10px rgb(12 26 52 / 0.06);
  --sp-e-float: 0 12px 40px rgb(12 26 52 / 0.18);
}

/* The light palette used to be declared TWICE — once on [data-theme="light"]
   and once again inside @media (prefers-color-scheme: light), byte-identical.
   Since wave 7.2 the server stamps data-theme on <html> unconditionally, so
   the media copy could never match a case the attribute selector did not
   already cover. Two copies of a palette drift; this one is deleted rather
   than kept in sync, and V17 asserts the stamp is on every page so the
   attribute can never go missing. Dark remains on bare :root. */


/* ---- CVD mode: blue/amber, unambiguous for all common types ---- */
[data-cvd="deuter"]                    { --sp-up:#5FB8FF; --sp-down:#E8B44A; }  /* 9.17 · 10.36 ✓ */
[data-cvd="deuter"][data-theme="light"]{ --sp-up:#1F5FA8; --sp-down:#8A5A08; }  /* 6.17 ·  5.67 ✓ */

/* ---- Figures rule. Non-negotiable, every number, everywhere. ---- */
.num, .price, td[data-type="num"], .tier__meter-val, .cell__price {
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.005em;
}
.price__sym  { font-size:.6em; color:var(--sp-ink-muted); vertical-align:.35em; margin-right:.08em; }
.price__cents{ font-size:.5em; color:var(--sp-ink-muted); vertical-align:.42em; }
.gold-eq     { font-family:var(--sp-font-mono); color:var(--sp-ink-muted); font-variant-numeric:tabular-nums; }
.gold-eq b   { color:var(--sp-ink); font-weight:500; }

/* ---- The metallic treatment. This is all of it. ---- */

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}


/* ------------------------------------------------------------------ 2. BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sp-bg);
  color: var(--sp-ink);
  font-family: var(--sp-font-ui);
  font-size: var(--sp-t-body);
  line-height: var(--sp-lh-body);
  -webkit-font-smoothing: antialiased;
}

/* NO overflow on <html> or <body>. Both of the obvious spellings are traps:
   `hidden` makes <body> a scroll container and breaks the sticky header and
   grade rail; `clip` is worse and much quieter. Per CSS Overflow 3, when one
   axis is `clip` and the other is `visible`, the `visible` one COMPUTES TO
   `clip` — so `overflow-x: clip` silently clips the Y axis too. Because <html>
   is `visible`, <body>'s used overflow propagates to the viewport, the viewport
   becomes a clip container, and the page stops scrolling at the bottom of the
   initial scrollport. That is what made the card-page footer unreachable at
   scrollY 6,758 of a 11,332px document.
   Horizontal overflow is prevented structurally instead, and V08 asserts it at
   360/375/390/414/430/768/1440. If a component ever does bleed, it clips
   itself — never the document. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--sp-lh-snug); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--sp-focus); border-radius: var(--sp-r-xs);
}
img, svg { display: block; max-width: 100%; }
::selection { background: var(--sp-gold-wash); color: var(--sp-ink); }

/* the non-negotiable figures rule */
.num, .price, .chip__price, .tile dd, td.num, th.num {
  font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.005em;
}
.price__sym  { font-size: 0.6em; color: var(--sp-ink-muted); vertical-align: 0.35em; margin-right: 0.08em; }
.price__cents{ font-size: 0.5em; color: var(--sp-ink-muted); vertical-align: 0.42em; }

.wrap { max-width: var(--sp-max); margin-inline: auto; padding-inline: var(--sp-gutter); }
.eyebrow {
  font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-muted); margin: 0;
}
.rule { border: 0; border-top: 1px solid var(--sp-line); margin: 0; }
.serif { font-family: var(--sp-font-display); letter-spacing: var(--sp-track-display); font-weight: 400; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--sp-ink-muted); }
.faint { color: var(--sp-ink-faint); }

/* delta */
.delta {
  font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-sm); letter-spacing: 0; white-space: nowrap;
}
.delta[data-dir="up"]   { color: var(--sp-up); }
.delta[data-dir="down"] { color: var(--sp-down); }
.delta[data-dir="flat"] { color: var(--sp-flat); }
.delta[data-dir="none"] { color: var(--sp-ink-faint); }
.delta::before { content: attr(data-glyph) " "; font-size: 0.8em; }

/* confidence dot */
.conf {
  display: inline-block; inline-size: 7px; block-size: 7px;
  border-radius: 50%; margin-right: 6px; flex: 0 0 auto;
}
.conf[data-level="confident"] { background: var(--sp-conf-high); }
.conf[data-level="thin"]      { background: var(--sp-conf-thin); }
.conf[data-level="stale"]     { background: var(--sp-conf-stale); }
.conf[data-level="no-data"]   { background: var(--sp-conf-none); }

/* badge */
.badge {
  display: inline-block; font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--sp-r-xs);
  border: 1px solid var(--sp-line-strong); color: var(--sp-ink-muted); white-space: nowrap;
}
.badge--thin     { border-color: var(--sp-conf-thin); color: var(--sp-conf-thin); }
.badge--stale    { border-color: var(--sp-conf-stale); color: var(--sp-ink-faint); }
.badge--modeled  { border-color: var(--sp-s4); color: var(--sp-s4); }
.badge--up       { border-color: var(--sp-up); color: var(--sp-up); }
.badge--down     { border-color: var(--sp-down); color: var(--sp-down); }
.badge--accent   { border-color: var(--sp-gold); color: var(--sp-gold-text); }
.badge--excluded { border-color: var(--sp-conf-thin); color: var(--sp-conf-thin); }

/* button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: 40px; padding-inline: var(--sp-4);
  border-radius: var(--sp-r-sm); font: inherit; font-size: var(--sp-t-sm);
  border: 1px solid var(--sp-line-strong); background: var(--sp-surface-1);
  color: var(--sp-ink); cursor: pointer;
  transition: background var(--sp-dur-1) var(--sp-ease), border-color var(--sp-dur-1) var(--sp-ease);
}
.btn:hover { background: var(--sp-surface-3); }
.btn--primary { background: var(--sp-ink); color: var(--sp-ink-invert); border-color: var(--sp-ink); }
.btn--primary:hover { background: var(--sp-gold-hi); border-color: var(--sp-gold-hi); color: #0A0E15; }
.btn--ghost { background: transparent; border-color: var(--sp-line); }
.btn--sm { min-block-size: 32px; font-size: var(--sp-t-xs); padding-inline: var(--sp-3); }

/* segmented control */
.seg-group { display: inline-flex; gap: 2px; padding: 3px;
  background: var(--sp-surface-1); border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm); }
.seg {
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  min-block-size: 30px; padding-inline: var(--sp-3);
  border: 1px solid transparent; border-radius: var(--sp-r-xs);
  background: transparent; color: var(--sp-ink-muted); cursor: pointer;
  transition: background var(--sp-dur-1) var(--sp-ease), color var(--sp-dur-1) var(--sp-ease);
}
.seg:hover { color: var(--sp-ink); }
.seg[aria-pressed="true"] { background: var(--sp-surface-3); color: var(--sp-ink); border-color: var(--sp-line-strong); }
.seg--sep { margin-inline-start: var(--sp-3); box-shadow: -1px 0 0 var(--sp-line); }

/* sparkline */
.spark { stroke: currentColor; fill: none; stroke-width: 1.4; overflow: visible;
  stroke-linejoin: round; stroke-linecap: round; }
.spark--up   { color: var(--sp-up); }
.spark--down { color: var(--sp-down); }
.spark--flat { color: var(--sp-ink-faint); }

/* ---------------------------------------------------------------- 3. HEADER */
.hdr {
  position: sticky; top: 0; z-index: var(--sp-z-header);
  min-block-size: var(--sp-header-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding-inline: var(--sp-gutter);
  background: color-mix(in srgb, var(--sp-bg) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* in light the navy scope below overrides this to an opaque panel */
  border-bottom: 1px solid var(--sp-line);
}
.hdr__mark {
  font-family: var(--sp-font-display); font-size: 1.5rem; line-height: 1;
  letter-spacing: var(--sp-track-display); color: var(--sp-ink); white-space: nowrap;
}
.hdr__mark span { color: var(--sp-gold-text); }
.hdr__nav { display: flex; gap: var(--sp-4); margin-left: auto; font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.hdr__nav a { padding-block: var(--sp-2); }
.hdr__nav a:hover { color: var(--sp-ink); }
.hdr__tools { display: flex; align-items: center; gap: var(--sp-2); }
.cmd-trigger {
  flex: 1; max-width: 380px; display: flex; align-items: center; gap: var(--sp-2);
  min-block-size: 34px; padding-inline: var(--sp-3);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm);
  background: var(--sp-surface-1); color: var(--sp-ink-muted);
  font: inherit; font-size: var(--sp-t-sm); cursor: text; text-align: start;
}
.cmd-trigger:hover { border-color: var(--sp-line-strong); }
.cmd-trigger kbd {
  margin-left: auto; font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-xs); padding: 1px 5px;
}
.theme-toggle {
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm);
  background: var(--sp-surface-1); color: var(--sp-ink-muted); cursor: pointer; font-size: 14px;
}
.theme-toggle:hover { color: var(--sp-ink); border-color: var(--sp-line-strong); }
@media (max-width: 860px) { .hdr__nav { display: none; } }

/* ------------------------------------------------------------ 4. SEARCH BOX */
.search { position: relative; }
.search__field {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--sp-surface-1); border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-r-md); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sp-e-float);
  transition: border-color var(--sp-dur-1) var(--sp-ease);
}
.search__field:focus-within { border-color: var(--sp-gold); box-shadow: var(--sp-focus); }
.search__input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--sp-ink);
  font: inherit; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); padding-block: var(--sp-1);
}
.search__input:focus { outline: 2px solid transparent; outline-offset: 0; box-shadow: none; }
.search__input::placeholder { color: var(--sp-ink-faint); }
.search__hint { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); margin-top: var(--sp-3); }
.search__hint code {
  font-family: var(--sp-font-mono); font-size: 0.95em;
  background: var(--sp-surface-2); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-xs); padding: 1px 5px; color: var(--sp-ink-muted);
}
.search__results {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--sp-surface-2); border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-r-md); box-shadow: var(--sp-e-float);
  max-height: 380px; overflow-y: auto; padding: var(--sp-2);
}
.search__results[hidden] { display: none; }
.sres {
  display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--sp-r-sm); cursor: pointer;
}
.sres[aria-selected="true"], .sres:hover { background: var(--sp-surface-3); }
.sres__thumb {
  inline-size: 34px; block-size: 48px; border-radius: var(--sp-r-xs);
  background: linear-gradient(150deg, var(--sp-surface-3), var(--sp-surface-1));
  border: 1px solid var(--sp-line); display: grid; place-items: center;
  font-size: 9px; color: var(--sp-ink-faint); font-family: var(--sp-font-mono);
}
.sres__name { font-size: var(--sp-t-sm); }
.sres__set { display: block; font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.sres__price { font-size: var(--sp-t-price-sm); text-align: end; }
.sres__grade { display: block; font-size: var(--sp-t-micro); color: var(--sp-ink-faint);
  letter-spacing: var(--sp-track-caps); }
.sres--empty { padding: var(--sp-4); font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }

/* --------------------------------------------------------------- 5. LANDING */
.landing {
  padding-block: clamp(48px, 9vw, 112px) var(--sp-8);
  border-bottom: 1px solid var(--sp-line);
  position: relative; overflow: hidden;
}
.landing::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 78% -10%, var(--sp-gold-wash), transparent 70%),
    radial-gradient(40% 60% at 10% 110%, rgb(111 168 255 / 0.06), transparent 70%);
}
.landing__inner { position: relative; z-index: 1; max-width: 860px; }
.landing h1 {
  font-family: var(--sp-font-display); font-weight: 400;
  font-size: var(--sp-t-display); line-height: var(--sp-lh-tight);
  letter-spacing: var(--sp-track-display); margin-block: var(--sp-4) var(--sp-4);
}
.landing h1 em { font-style: italic; color: var(--sp-gold-text); }
.landing__sub { font-size: clamp(1rem, 0.94rem + 0.35vw, 1.18rem); color: var(--sp-ink-muted);
  max-width: 56ch; margin-bottom: var(--sp-6); }
.landing__proof { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.landing__proof div { display: flex; flex-direction: column; gap: 2px; }
.landing__proof b { font-family: var(--sp-font-mono); font-size: var(--sp-t-price-md);
  font-variant-numeric: tabular-nums; font-weight: 500; }

/* index strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--sp-line); border-block: 1px solid var(--sp-line); }
.strip__cell { background: var(--sp-bg); padding: var(--sp-4) var(--sp-gutter); display: flex;
  flex-direction: column; gap: var(--sp-1); }
.strip__cell b { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-md); font-weight: 500; }
.strip__row { display: flex; align-items: center; gap: var(--sp-3); }
.strip__row svg { inline-size: 62px; block-size: 22px; margin-left: auto; }
@media (max-width: 900px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* section frame */
.sec { padding-block: var(--sp-8); }
.sec__hd { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.sec__hd h2 { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h1);
  letter-spacing: var(--sp-track-display); }
.sec__hd p { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: 46ch; }

/* movers grid */
.movers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 1100px) { .movers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .movers { grid-template-columns: 1fr; } }
.mover {
  display: block; background: var(--sp-surface-1); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-md); padding: var(--sp-4); 
  transition: border-color var(--sp-dur-1) var(--sp-ease), transform var(--sp-dur-1) var(--sp-ease),
              background var(--sp-dur-1) var(--sp-ease);
}
.mover:hover { border-color: var(--sp-line-strong); background: var(--sp-surface-2); transform: translateY(-2px); }
.mover__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.mover__game { font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-faint); }
.mover__name { font-size: var(--sp-t-body); margin-top: var(--sp-1); }
.mover__set { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.mover__price { font-size: var(--sp-t-price-lg); margin-top: var(--sp-4); line-height: 1; }
.mover__foot { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3); }
.mover__foot svg { inline-size: 74px; block-size: 24px; }
.mover__n { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); display: flex; align-items: center; }

/* game tiles */
.games { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
@media (max-width: 1000px) { .games { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .games { grid-template-columns: 1fr; } }
.game {
  position: relative; overflow: hidden; display: block; padding: var(--sp-5) var(--sp-4);
  min-block-size: 168px; border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  background: linear-gradient(165deg, var(--sp-surface-2), var(--sp-surface-1));
  transition: border-color var(--sp-dur-1) var(--sp-ease);
  display: flex; flex-direction: column; justify-content: space-between;
}
.game:hover { border-color: var(--sp-gold); }
.game::before {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -30%;
  inline-size: 150px; block-size: 150px; border-radius: 50%;
  background: var(--sp-gold-wash); filter: blur(24px);
}
.game h3 { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h3);
  letter-spacing: var(--sp-track-display); position: relative; }
.game__note { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); position: relative; margin-top: var(--sp-2); }
.game__stat { font-family: var(--sp-font-mono); font-size: var(--sp-t-sm);
  font-variant-numeric: tabular-nums; color: var(--sp-ink); position: relative; }
.game__stat span { color: var(--sp-ink-faint); }

/* trust strip */
.trust { background: var(--sp-surface-1); border-block: 1px solid var(--sp-line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
  padding-block: var(--sp-8); }
@media (max-width: 900px) { .trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (max-width: 520px) { .trust__grid { grid-template-columns: 1fr; } }
.trust__item h3 { font-size: var(--sp-t-sm); margin-bottom: var(--sp-2); }
.trust__item p { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.trust__num { font-family: var(--sp-font-display); font-size: 2.4rem; line-height: 1;
  color: var(--sp-gold); display: block; margin-bottom: var(--sp-3); }

/* footer */

/* =========================================================== 6. CARD DETAIL */
.crumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-size: var(--sp-t-xs); color: var(--sp-ink-muted); padding-block: var(--sp-4) 0; }
.crumb a:hover { color: var(--sp-ink); }
.crumb [aria-current="page"] { color: var(--sp-ink); }
.crumb__sep { color: var(--sp-ink-faint); }

/* hero */
.hero { display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  gap: var(--sp-7); padding-block: var(--sp-6) var(--sp-7); align-items: start; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: var(--sp-5); } }

.gal__frame {
  aspect-ratio: 5 / 7; background:
    linear-gradient(155deg, var(--sp-surface-2) 0%, var(--sp-surface-1) 60%, var(--sp-surface-2) 100%);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-md); overflow: hidden;
  display: grid; place-items: center; position: relative; box-shadow: var(--sp-e-float);
}
.gal__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 0.045) 50%, transparent 58%);
}
.gal__ph { text-align: center; padding: var(--sp-5); color: var(--sp-ink-faint); }
.gal__ph .glyph { font-family: var(--sp-font-display); font-size: 3.4rem; color: var(--sp-gold);
  line-height: 1; margin-bottom: var(--sp-3); }
.gal__ph .num { font-size: var(--sp-t-sm); display: block; margin-top: var(--sp-2); }
.gal__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.gal__thumb { inline-size: 44px; aspect-ratio: 5/7; border-radius: var(--sp-r-xs);
  border: 1px solid var(--sp-line); background: var(--sp-surface-2); cursor: pointer; }
.gal__thumb[aria-selected="true"] { outline: 2px solid var(--sp-gold); outline-offset: 2px; }

.hero__title { font-family: var(--sp-font-display); font-weight: 400;
  font-size: var(--sp-t-display); line-height: var(--sp-lh-tight);
  letter-spacing: var(--sp-track-display); }
.hero__meta { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); margin-top: var(--sp-2); }
.hero__meta .num { color: var(--sp-ink); }

.vsel { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-5); }
.vsel button {
  font-size: var(--sp-t-sm); min-block-size: 44px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm);
  background: var(--sp-surface-1); color: var(--sp-ink-muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: start;
  transition: background var(--sp-dur-1) var(--sp-ease), border-color var(--sp-dur-1) var(--sp-ease);
}
.vsel button:hover { background: var(--sp-surface-3); color: var(--sp-ink); }
.vsel button[aria-pressed="true"] { background: var(--sp-surface-3); color: var(--sp-ink);
  border-color: var(--sp-line-strong);  }
.vsel .vsel__p { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  font-variant-numeric: tabular-nums; color: var(--sp-ink-faint); }
.vsel button[aria-pressed="true"] .vsel__p { color: var(--sp-gold-text); }
.vsel__tell { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); margin-top: calc(var(--sp-3) * -1);
  margin-bottom: var(--sp-5); }

.hero__price { border-top: 1px solid var(--sp-line); padding-top: var(--sp-5); }
.hero__price .price { font-size: var(--sp-t-price-hero); line-height: 1;
  margin: var(--sp-2) 0 var(--sp-2); display: block; }
.hero__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3); }
.hero__evidence { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); margin-top: var(--sp-2);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-2); }
.hero__note { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); margin-top: var(--sp-3);
  max-width: 54ch; border-left: 2px solid var(--sp-conf-thin); padding-left: var(--sp-3); }
.hero__note[hidden] { display: none; }
.hero__ci { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); margin-top: var(--sp-2); }
.hero__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); flex-wrap: wrap; }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); margin: 0; }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--sp-surface-1); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-0); padding: var(--sp-4);  }
.tile dt { font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-muted);
  display: flex; gap: 6px; align-items: center; min-block-size: 28px; }
.tile dd { margin: var(--sp-2) 0 0; font-size: var(--sp-t-price-md); }
.tile__rangebar { block-size: 4px; border-radius: var(--sp-r-pill);
  background: var(--sp-surface-3); margin-top: var(--sp-3); position: relative; }
.tile__rangebar span { position: absolute; inset-block: 0; border-radius: inherit;
  background: var(--sp-gold); inset-inline-start: var(--lo); inline-size: calc(var(--hi) - var(--lo)); }
.tile__sub { font-size: var(--sp-t-micro); color: var(--sp-ink-faint); margin-top: var(--sp-2); }

/* chart */
.chart { margin: 0; position: relative; }
.chart__hd { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chart__hd h2 { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h2);
  letter-spacing: var(--sp-track-display); }
.chart__ctl { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.chart__plot { position: relative; block-size: 360px; inline-size: 100%;
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  background: var(--sp-surface-1); overflow: hidden; }
@media (max-width: 720px) { .chart__plot { block-size: 260px; } }
.chart__plot svg { inline-size: 100%; block-size: 100%; }
.chart__tip {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3);
  background: var(--sp-surface-2); border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-r-sm); box-shadow: var(--sp-e-float);
  padding: var(--sp-2) var(--sp-3); pointer-events: none; min-inline-size: 176px; z-index: 3;
}
.chart__tip[hidden] { display: none; }
.chart__tip b { font-family: var(--sp-font-mono); font-size: var(--sp-t-price-md);
  font-variant-numeric: tabular-nums; font-weight: 500; display: block; }
.chart__tip small { font-size: var(--sp-t-micro); color: var(--sp-ink-muted);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; }
.chart__engine { font-size: var(--sp-t-micro); color: var(--sp-ink-faint); margin-top: var(--sp-2);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; }
.chart__a11y { margin-top: var(--sp-4); font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.chart__a11y summary { cursor: pointer; }
.chart__a11y table { margin-top: var(--sp-3); }

/* grade ladder */
.ladder { display: grid; gap: 0; }
.ladder__row { display: grid; grid-template-columns: 92px 1fr 104px; align-items: center;
  gap: var(--sp-3); min-block-size: 32px; border-bottom: 1px solid var(--sp-line);
  padding-block: var(--sp-1); cursor: pointer; background: none; border-inline: 0;
  border-top: 0; color: inherit; font: inherit; text-align: start; width: 100%; }
.ladder__row:hover { background: var(--sp-surface-1); }
.ladder__lab { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-muted); white-space: nowrap; }
.ladder__bar { block-size: 8px; border-radius: var(--sp-r-pill);
  background: var(--sp-surface-3); position: relative; overflow: hidden; }
.ladder__fill { position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: inherit; background: var(--sp-ink-faint);
  transition: width var(--sp-dur-2) var(--sp-ease); }
.ladder__row[aria-current="true"] .ladder__fill { background: var(--sp-gold); }
.ladder__row[aria-current="true"] .ladder__lab { color: var(--sp-gold-hi); }
.ladder__row[data-conf="no-data"] .ladder__fill,
.ladder__row[data-conf="stale"] .ladder__fill {
  background: repeating-linear-gradient(90deg, var(--sp-ink-faint) 0 3px, transparent 3px 6px);
}
.ladder__val { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-sm); text-align: end; }
.ladder__axis { display: flex; justify-content: space-between; font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); color: var(--sp-ink-faint); margin-top: var(--sp-2);
  padding-inline: 92px 104px; }
@media (max-width: 640px) {
  .ladder__row { grid-template-columns: 74px 1fr 82px; gap: var(--sp-2); }
  .ladder__axis { padding-inline: 74px 82px; }
}

/* market data panel */
.mdd { background: var(--sp-surface-1); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-md); overflow: hidden; }
.mdd__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sp-line);
  background: var(--sp-surface-2); overflow-x: auto; scrollbar-width: none; }
.mdd__tab { font: inherit; font-size: var(--sp-t-sm); padding: var(--sp-3) var(--sp-5);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--sp-ink-muted); cursor: pointer; white-space: nowrap; min-block-size: 44px; }
.mdd__tab:hover { color: var(--sp-ink); }
.mdd__tab[aria-selected="true"] { color: var(--sp-ink); border-bottom-color: var(--sp-gold);
  background: var(--sp-surface-1); }
.mdd__tab .num { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); margin-left: 6px; }
.mdd__panel { padding: var(--sp-4); }
.mdd__panel[hidden] { display: none; }
.mdd__note { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: var(--sp-measure); }

/* tables */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { inline-size: 100%; border-collapse: separate; border-spacing: 0; min-inline-size: 640px; }
.tbl caption { text-align: start; font-size: var(--sp-t-xs); color: var(--sp-ink-faint);
  padding-bottom: var(--sp-3); }
.tbl th { background: var(--sp-surface-2); font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-muted); text-align: start;
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--sp-line-strong);
  font-weight: 500; white-space: nowrap; }
.tbl th[aria-sort] { cursor: pointer; user-select: none; }
.tbl th[aria-sort]:hover { color: var(--sp-ink); }
.tbl th[aria-sort]::after { content: " ⇅"; font-size: 0.8em; color: var(--sp-ink-faint); }
.tbl th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.7em; color: var(--sp-gold); }
.tbl th[aria-sort="ascending"]::after  { content: " ▲"; font-size: 0.7em; color: var(--sp-gold); }
.tbl td { padding: var(--sp-3); border-bottom: 1px solid var(--sp-line);
  font-size: var(--sp-t-sm); vertical-align: middle; }
.tbl td.num, .tbl th.num { text-align: end; }
.tbl tbody tr:hover { background: var(--sp-surface-1); }
.tbl tr[data-excluded="true"] { color: var(--sp-ink-muted); }
.tbl tr[data-excluded="true"] td.num { text-decoration: line-through; text-decoration-thickness: 1px; }
.tbl .why { font-size: var(--sp-t-xs); color: var(--sp-conf-thin); display: block; margin-top: 4px;
  max-width: 62ch; line-height: 1.45; }
.tbl__title { display: block; max-width: 46ch; }
.tbl__meta { font-size: var(--sp-t-micro); color: var(--sp-ink-faint); display: block; margin-top: 2px; }
.tbl__thumb { inline-size: 34px; block-size: 48px; border-radius: var(--sp-r-xs);
  border: 1px solid var(--sp-line); background: linear-gradient(150deg, var(--sp-surface-3), var(--sp-surface-1));
  display: grid; place-items: center; font-size: 8px; color: var(--sp-ink-faint);
  font-family: var(--sp-font-mono); }
.tbl__toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tbl__stmt { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: 62ch; }
.tbl__stmt b { color: var(--sp-ink); font-weight: 500; }
.pop-row-current { background: var(--sp-gold-wash); }

/* active listings — the affiliate module */
.rail { border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  background: var(--sp-surface-1); padding: var(--sp-5); }
.rail__hd { margin-bottom: var(--sp-4); }
.rail__hd h2 { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h2);
  letter-spacing: var(--sp-track-display); }
.rail__stmt { font-size: var(--sp-t-sm); color: var(--sp-ink); margin-top: var(--sp-2); max-width: 60ch; }
.rail__stmt b { color: var(--sp-gold-text); font-weight: 500; }
.rail__disc { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); margin-top: var(--sp-3);
  max-width: 66ch; line-height: 1.5; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: var(--sp-3);
  overflow-x: auto; scroll-snap-type: x proximity; padding-block: var(--sp-2) var(--sp-3);
  scrollbar-width: thin; }
.lcard { scroll-snap-align: start; background: var(--sp-surface-2); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-md); padding: var(--sp-4); display: flex; flex-direction: column;
  gap: var(--sp-2); }
.lcard__grade { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-muted); }
.lcard__t { font-size: var(--sp-t-sm); line-height: 1.4; min-block-size: 3.2em; }
.lcard__p { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-lg); line-height: 1; }
.lcard__ship { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.lcard__seller { font-size: var(--sp-t-xs); color: var(--sp-ink-faint); margin-top: auto; }
.lcard__cta { margin-top: var(--sp-3); }
.lcard__paid { font-size: var(--sp-t-micro); color: var(--sp-ink-faint);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; text-align: center; }

/* methodology callout */
.method { border: 1px solid var(--sp-line); border-radius: var(--sp-r-md);
  background: var(--sp-surface-1); padding: var(--sp-5); display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr auto; align-items: center; }
@media (max-width: 700px) { .method { grid-template-columns: 1fr; } }
.method p { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: 68ch; }
.method b { color: var(--sp-ink); font-weight: 500; }

/* section spacing on the card page */
.cardsec { padding-block: var(--sp-7); border-top: 1px solid var(--sp-line); }
.cardsec > h2 { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h2);
  letter-spacing: var(--sp-track-display); margin-bottom: var(--sp-2); }
.cardsec > .lede { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: 64ch;
  margin-bottom: var(--sp-5); }
.scroll-anchor { scroll-margin-block-start: calc(var(--sp-header-h) + var(--sp-gradebar-h) + 12px); }

/* toast + live region */
.toast { position: fixed; inset-block-end: var(--sp-5); inset-inline: 0; margin-inline: auto;
  width: max-content; max-width: calc(100vw - 32px); z-index: var(--sp-z-toast);
  background: var(--sp-surface-2); border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-r-pill); box-shadow: var(--sp-e-float);
  padding: var(--sp-2) var(--sp-5); font-size: var(--sp-t-sm);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--sp-dur-2) var(--sp-ease), transform var(--sp-dur-2) var(--sp-ease); }
.toast[data-show="true"] { opacity: 1; transform: translateY(0); }

/* mobile table -> card list */
@media (max-width: 720px) {
  .tbl { min-inline-size: 0; }
  .tbl--stack thead { display: none; }
  .tbl--stack tbody tr { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--sp-line); }
  .tbl--stack td { border: 0; padding: 0; }
  .tbl--stack td[data-col="thumb"] { display: none; }
  .tbl--stack td[data-col="title"] { grid-column: 1 / 2; grid-row: 2; }
  .tbl--stack td[data-col="date"] { grid-column: 1 / 2; grid-row: 1;
    font-family: var(--sp-font-mono); font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
  .tbl--stack td[data-col="price"] { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center;
    font-size: var(--sp-t-price-md); }
  .tbl--stack td[data-col="source"] { grid-column: 1 / 3; grid-row: 3; }
}

/* ================================================== 7. SMALL-SCREEN TRIMS */
.cmd-trigger { min-width: 0; }
.sres > span { min-width: 0; }
.sres__name, .sres__set { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .cmd-trigger > span, .cmd-trigger kbd { display: none; }
  .cmd-trigger { flex: 0 0 auto; inline-size: 34px; justify-content: center; padding-inline: 0; }
  .hdr { gap: var(--sp-2); }
  .hdr__mark { font-size: 1.25rem; }
  .landing__proof { gap: var(--sp-4); }
  .landing__proof div { flex: 1 0 40%; }
  .search__field { padding: var(--sp-3); }
  .chip { min-inline-size: 96px; }
  .rail { padding: var(--sp-4); }
  .rail__track { grid-auto-columns: 210px; }
}

@media (prefers-contrast: more) {
  :root { --sp-line: var(--sp-line-strong); --sp-ink-muted: var(--sp-ink); }
  .chip[data-conf="stale"], .chip[data-conf="no-data"] { opacity: 1; }
}

/* print: the page should still read as a document */
@media print {
  .hdr, .gradebar-outer, .rail, .hero__actions, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================ 8. LINK CONTRACT AFFORDANCES
   docs/architecture/08-link-contract-freshness.md — rung 4 of the degradation
   ladder is a DESIGNED state, so it gets a design. `.lk-none` marks something
   that is deliberately not a link: no pointer, no underline, no hover lift, and
   a visible difference from the things that are clickable. */
.lk-none {
  color: var(--sp-ink-faint);
  cursor: default;
  text-decoration: none;
  border-color: var(--sp-line) !important;
}
.lk-none::after { content: ""; }
a[data-link-state] { color: inherit; text-decoration: none; }
a[data-link-state="sold-search"],
a[data-link-state="search"],
a[data-link-state="item"],
a[data-link-state="cert"],
a[data-link-state="cert-form"],
a[data-link-state="archive"] {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sp-gold) 55%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a[data-link-state]:hover { text-decoration-color: var(--sp-gold-text); color: var(--sp-ink); }
a.btn[data-link-state] { text-decoration: none; }
a.btn[data-link-state]:hover { text-decoration: none; }

.mover--nolink, .game--nolink { border-style: dashed; }
.mover--nolink:hover, .game--nolink:hover { transform: none; border-color: var(--sp-line); }
.game--nolink:hover { border-color: var(--sp-line); }
.mover__n.lk-none { font-size: var(--sp-t-micro); letter-spacing: var(--sp-track-caps);
  text-transform: uppercase; }
.tbl__meta.lk-none { color: var(--sp-ink-faint); font-style: italic; }
.tbl caption { line-height: 1.5; max-width: 88ch; }
time { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .tbl--stack td[data-col="cert"] { grid-column: 1 / 3; grid-row: 4;
    text-align: start; font-size: var(--sp-t-micro); color: var(--sp-ink-faint); }
}

/* ==========================================================================
   9. v3 — SABLE'S BLUEPRINT
   Grade rail (Facet 2.2–2.8), gold line + tier badges (Chroma 2.4),
   chart mark language (Vault 2.3), indicator refusals (Quant 3.5).
   ========================================================================== */

/* ---- P0: one global scroll-margin, not one element (Sable 2.1 item 3) ---- */
:where(main [id], main h2, main h3, .cardsec, .grail, .tbl tbody tr) {
  scroll-margin-block-start: var(--sp-sticky-h);
}
@media (max-width: 640px) { :root { --sp-sticky-h: 112px; } }

/* ---------------------------------------------------------- GRADE RAIL --- */
.grail { display: grid; gap: var(--sp-3) 0; margin-block: var(--sp-5); }
.grail__label { font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: var(--sp-track-caps); color: var(--sp-ink-muted); font-family: var(--sp-font-mono); }
.grail__primary,
.grail__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 1.6vw, 10px); }
@media (max-width: 1023px) { .grail__primary, .grail__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grail__primary, .grail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.gcell {
  position: relative; display: grid; align-content: space-between; gap: 2px;
  min-block-size: 92px; padding: 12px 14px; text-align: start;
  background: var(--sp-surface-1);
  border: 1px solid var(--sp-line-control);      /* 3.26:1 — WCAG non-text */
  border-radius: var(--sp-r-sm);                 /* radius means clickable */
  color: var(--sp-ink); cursor: pointer; font: inherit;
  transition: background var(--sp-dur-1) var(--sp-ease), border-color var(--sp-dur-1) var(--sp-ease);
}
@media (max-width: 640px) { .gcell { min-block-size: 64px; padding: 8px 10px; } }
.gcell:hover { background: var(--sp-surface-3); }
.gcell:focus-visible { outline: none; box-shadow: var(--sp-focus); z-index: 2; }
.gcell[aria-selected="true"] {
  background: var(--sp-gold-wash); border-color: var(--sp-gold);
  box-shadow: inset 0 -2px 0 0 var(--sp-gold);
}
.gcell[aria-selected="true"] .gcell__grade { color: var(--sp-gold-text); }
.gcell[aria-selected="true"] .gcell__price { color: var(--sp-ink); font-weight: 500; }
.gcell__grade { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro); font-weight: 500;
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  padding-inline-end: 20px; display: flex; align-items: center; gap: 5px; min-width: 0; }
.gcell__grade > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.gcell__price { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 4.2vw, 24px); line-height: 1.05; letter-spacing: -0.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .gcell__price { font-size: 18px; } }
.gcell__price em { font-style: italic; color: var(--sp-ink-muted); }
.gcell__price--none { font-size: var(--sp-t-xs); font-family: var(--sp-font-ui);
  color: var(--sp-ink-faint); line-height: 1.3; }
.gcell__foot { display: flex; align-items: center; gap: var(--sp-2); min-block-size: 16px; }
.gcell__n { font-size: var(--sp-t-micro); font-family: var(--sp-font-mono);
  color: var(--sp-ink-muted); }          /* muted, never faint — Facet 1.6 */
.gcell__spark { inline-size: 44px; block-size: 16px; margin-left: auto; }
@media (max-width: 640px) { .gcell__spark { display: none; } }
.gcell .delta { font-size: var(--sp-t-micro); }
/* confidence ring — arc length = min(n,20)/20. Encodes tier AND magnitude. */
.gcell__ring { position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  inline-size: 14px; block-size: 14px; }
.gcell__ring circle { fill: none; stroke-width: 2; }
.gcell__ring .ring-track { stroke: var(--sp-surface-3); }
.gcell__ring .ring-arc { transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: butt; }
.gcell[data-conf="confident"] .ring-arc { stroke: var(--sp-conf-high); }
.gcell[data-conf="thin"]      .ring-arc { stroke: var(--sp-conf-thin); }
.gcell[data-conf="stale"]     .ring-arc { stroke: var(--sp-conf-stale); }
.gcell[data-conf="no-data"]   .ring-track { stroke: var(--sp-conf-none); stroke-dasharray: 2 2; }
/* never dim with opacity — dim with a contrast-guaranteed token */
.gcell[data-conf="stale"] .gcell__price,
.gcell[data-conf="no-data"] .gcell__price { color: var(--sp-ink-muted); }
.gcell[data-conf="no-data"] { border-style: dashed; }

.gcell--more { align-content: center; justify-items: start; gap: 3px; }
.gcell--more .gcell__count { font-family: var(--sp-font-mono); font-size: 24px; line-height: 1; }
.gcell--more .gcell__hint { font-size: var(--sp-t-micro); color: var(--sp-ink-muted);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; }
@media (max-width: 640px) { .gcell--more { grid-column: span 2; } }

.grail__more { display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--sp-dur-2) var(--sp-ease); }
.grail__more > div { overflow: hidden; min-height: 0; }
.grail[data-open="true"] .grail__more { grid-template-rows: 1fr; }
.grail__moreinner { display: grid; gap: var(--sp-3); padding-block-start: var(--sp-3); }
.grail__grouphd { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  border-top: 1px solid var(--sp-line); padding-block-start: var(--sp-2); margin-block-start: var(--sp-2); }

/* condensed sticky rail — only this sticks, never the 7-cell grid (C9) */
.grail__condensed { position: sticky; top: var(--sp-header-h); z-index: var(--sp-z-gradebar);
  display: none; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none;
  background: var(--sp-surface-1);              /* opaque — one blur layer only */
  border-block: 1px solid var(--sp-line); padding: var(--sp-2) var(--sp-gutter);
  block-size: var(--sp-gradebar-h); align-items: center; }
.grail__condensed[data-stuck="true"] { display: flex; }
.grail__condensed::-webkit-scrollbar { display: none; }
.ccell { flex: 0 0 auto; min-block-size: 44px; padding: 4px 10px; display: grid; gap: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--sp-r-sm);
  color: var(--sp-ink-muted); cursor: pointer; font: inherit; text-align: start; }
.ccell[aria-selected="true"] { border-color: var(--sp-gold); background: var(--sp-gold-wash); color: var(--sp-ink); }
.ccell b { font-family: var(--sp-font-mono); font-size: var(--sp-t-price-sm);
  font-variant-numeric: tabular-nums; font-weight: 500; }
.ccell span { font-size: var(--sp-t-micro); letter-spacing: var(--sp-track-caps);
  text-transform: uppercase; font-family: var(--sp-font-mono); }

/* ------------------------------------------- GAME HUBS (docs 57-59) ------ */
.hub__eyebrow { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-muted);
  order: -1; margin-block-end: var(--sp-2); }
.prose .hub__facts { font-family: var(--sp-font-mono); font-size: var(--sp-t-sm);
  color: var(--sp-ink-muted); margin-block-end: var(--sp-2); }
.hub__facts .num { color: var(--sp-ink); }
.prose .hub__cover { font-size: var(--sp-t-xs); margin-block-end: var(--sp-5); }
.hub__cards { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid;
  gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.hub__cards li { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); }
.hub__cards h3 { font-size: var(--sp-t-sm); font-weight: 600; margin: 0; }
.hub__cards p { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); margin: 0; flex: 1; }
.hub__cards .lk-none { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  color: var(--sp-ink-faint); padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--sp-line); }
.hub__gallery { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid;
  gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.hub__gallery li { padding: var(--sp-4); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-0); background: var(--sp-surface-1); }
.hub__gallery h3 { font-size: var(--sp-t-sm); font-weight: 600; margin-block-end: 4px; }
.hub__gallery p { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); margin: 0; }
.hub__gallery .num { font-family: var(--sp-font-mono); color: var(--sp-ink); }
.hub__gallery-meta { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.06em; color: var(--sp-ink-faint); margin-block-end: var(--sp-2) !important; }
.hub__cards .hub__eyebrow { margin-block-end: 4px; }

/* ------------------------------------------- THE LOCKUP (wave 7.4) ------- *
   SVG mark + HTML wordmark. The type is HTML so it uses the page's own font
   stack with real fallbacks: if Instrument Serif has not loaded, the browser
   substitutes a serif at its natural width instead of an SVG layout rule
   forcing glyphs apart to hit a fixed pixel width. */
.lk { display: inline-flex; align-items: center; gap: 0.42em; line-height: 1; }
.lk__mark { display: block; inline-size: 0.72em; flex: none; }
.lk__mark svg { display: block; inline-size: 100%; block-size: auto; }
.lk__word { font-family: var(--sp-font-display); font-weight: 400;
  letter-spacing: -0.015em; white-space: nowrap; }
.lk__slab { color: var(--sp-ink); }
.lk__gilt { color: var(--sp-gold-text); }
/* the header variant spends no gold on type, keeping the budget for the badge */
.lk--restrained .lk__gilt { color: var(--sp-ink); }
.ftr__mark .lk { font-size: 1.6rem; }
.hdr__mark .lk { font-size: inherit; }

/* ================= NAVY CHROME, LIGHT MODE ONLY (wave 7.3) ================
   The header and the footer bookend the page in ink-navy. That pairing is what
   makes this read as a blue site at a glance rather than a gray one with blue
   accents — Jay's "where is the blue".

   Same self-scoping discipline as .ftr: the block declares its own ground, its
   own ink, and RE-POINTS the --sp-* tokens its children read, so nothing
   inside it can half-flip. Children keep using --sp-ink / --sp-surface-1 and
   simply resolve them to navy values inside this scope.

   SCOPED TO [data-theme="light"] ON PURPOSE — dark is untouched this wave, and
   in dark the header is already navy-on-navy with a blur.

   MY CALL on the condensed sticky rail: it goes navy too. It sticks directly
   beneath the header (top: var(--sp-header-h)) and is read as one continuous
   sticky stack; leaving it light would put a pale band between the navy header
   and the page, which breaks the bookend at exactly the moment the reader is
   scrolling past it. Its selected cell needs the BRIGHT gold, not the paper
   bronze, so the gold tokens are re-pointed inside the scope. */
[data-theme="light"] .hdr,
[data-theme="light"] .grail__condensed {
  --hdr-bg:     #12203A;
  --hdr-raise:  #1B2C4A;   /* dropdown panel, hover, the search field */
  --hdr-deep:   #0D1830;   /* inset */
  --hdr-ink:    #EAF0FA;   /* 14.18 on --hdr-bg ✓ */
  --hdr-mute:   #B8C7DE;   /*  9.48 ✓ */
  --hdr-faint:  #93A6C4;   /*  6.57 ✓ */
  --hdr-line:   #2A3A57;
  --hdr-line-2: #3C4E6E;

  /* what the children read */
  --sp-ink:           var(--hdr-ink);
  --sp-ink-muted:     var(--hdr-mute);
  --sp-ink-faint:     var(--hdr-faint);
  --sp-surface-1:     var(--hdr-raise);
  --sp-surface-2:     var(--hdr-raise);
  --sp-surface-3:     var(--hdr-deep);
  --sp-line:          var(--hdr-line);
  --sp-line-strong:   var(--hdr-line-2);
  --sp-line-control:  #7386A6;
  /* Gold Restraint Law holds: gold still only appears on ounce surfaces —
     the Gold Tier nav item and the rail's selected-cell hallmark. On navy it
     takes the dark-theme values, because bronze on navy is mud. */
  --sp-gold:          #D4A93C;
  --sp-gold-hi:       #F0D68C;
  --sp-gold-text:     #F0D68C;   /* 11.37 on --hdr-bg ✓ */
  --sp-gold-wash:     rgb(212 169 60 / 0.16);
  --sp-accent:        #9FC0FF;

  background: var(--hdr-bg);
  color: var(--hdr-ink);
}
[data-theme="light"] .hdr { border-bottom-color: var(--hdr-line); }
[data-theme="light"] .grail__condensed { border-block-color: var(--hdr-line); }
/* the panel lifts off the bar rather than matching it */
[data-theme="light"] .mn__panel { background: var(--hdr-raise); border-color: var(--hdr-line-2); }
/* the search field reads as an inset well, not a white card dropped on navy */
[data-theme="light"] .cmd-trigger,
[data-theme="light"] .theme-toggle { background: var(--hdr-deep); color: var(--hdr-mute);
  border-color: var(--hdr-line-2); }
[data-theme="light"] .cmd-trigger:hover,
[data-theme="light"] .theme-toggle:hover { border-color: var(--sp-line-control); }

/* ------------------------------------------------ GOLD LINE + TIER BADGE -- */
.gold { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-3); }
.gold__line { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-md); color: var(--sp-ink-muted); }
.gold__line b { color: var(--sp-ink); font-weight: 500; }
.gold__dist { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.gold__receipt { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  color: var(--sp-ink-muted); letter-spacing: 0.02em; margin-block-start: var(--sp-2); }
.gold__disc { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); max-width: 68ch;
  margin-block-start: var(--sp-2); }

/* --------------------------------------------------------- STAT BAND ----- */
/* One ruled row, five cells, no boxes, no shadows (C10). */
.band { display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--sp-line);
  margin: 0; }
.band__cell { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-inline-start: 1px solid var(--sp-line); }
.band__cell:first-child { border-inline-start: 0; }
.band__cell:not(:first-child) { padding-inline-start: var(--sp-4); }
.band dt { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted); }
.band dd { margin: var(--sp-2) 0 0; font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.band dd.band__gate { font-size: var(--sp-t-sm); font-family: var(--sp-font-ui);
  color: var(--sp-ink-muted); line-height: 1.4; }
.band__sub { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); margin-block-start: var(--sp-2); }
.band__bar { block-size: 4px; background: var(--sp-surface-3); position: relative;
  margin-block-start: var(--sp-3); }
.band__bar span { position: absolute; inset-block: 0; background: var(--sp-gold);
  inset-inline-start: var(--lo); inline-size: calc(var(--hi) - var(--lo)); }
@media (max-width: 1023px) { .band { grid-template-columns: repeat(3, 1fr); }
  .band__cell:nth-child(4) { border-inline-start: 0; } }
@media (max-width: 640px)  { .band { grid-template-columns: repeat(2, 1fr); }
  .band__cell { border-inline-start: 1px solid var(--sp-line); padding-inline-start: var(--sp-3); }
  .band__cell:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .band dd { font-size: 20px; } }

/* --------------------------------------------------- CHART MARK LANGUAGE - */
.plot { position: relative; block-size: 460px; inline-size: 100%;
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); overflow: hidden; }
@media (max-width: 720px) { .plot { block-size: 386px; } }
.plot svg { inline-size: 100%; block-size: 100%; display: block; }
.mark-o { stroke: var(--sp-surface-1); stroke-width: 1.5; fill: var(--sp-s1); }
.mark-a-whisker { stroke: var(--sp-s1); stroke-width: 1.5; opacity: 0.45; }
.mark-a-tick { stroke: var(--sp-s1); stroke-width: 2; }
.mark-void { fill: var(--sp-surface-3); opacity: 0.5; }
.mark-voidlabel { fill: var(--sp-ink-faint); font-size: 10px; font-family: var(--sp-font-mono);
  letter-spacing: 0.09em; text-transform: uppercase; }
.mark-gold { stroke: var(--sp-s-gold); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
/* doc 46 §2 — the confidence wash. Per-segment fill, opacity set inline from
   that segment's own gap class. There is deliberately NO gradient across the
   whole series: a continuous sheet would assert continuous data, and a void
   band is never filled at all. */
.mark-wash { fill: var(--sp-s1); stroke: none; }

/* ---------------------------------------------- SEARCH v1 (doc 53) ------- *
   A result whose page is not built renders as a disabled row WITH its reason,
   never as a link and never dropped: dropping it would let the reader
   conclude we do not have the card, when in fact we have not published it. */
.cmd__group { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-faint);
  padding: var(--sp-3) var(--sp-3) 4px; list-style: none; }
.cmd__hit { display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--sp-ink);
  border-radius: var(--sp-r-xs); }
/* hover and focus are separate rules on purpose: combining them put
   `outline: none` on :hover, which strips the focus ring from a keyboard user
   whose pointer happens to rest on the row. V09 caught it. */
a.cmd__hit:hover { background: var(--sp-surface-2); }
a.cmd__hit:focus-visible { background: var(--sp-surface-2); outline: none;
  box-shadow: var(--sp-focus); }
.cmd__name { flex: 1; min-inline-size: 0; }
.cmd__meta { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.cmd__hit em { font-style: normal; font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); color: var(--sp-ink-faint); }
.cmd__none { padding: var(--sp-4); font-size: var(--sp-t-sm); color: var(--sp-ink-muted);
  list-style: none; }

/* ------------------------------------- RETENTION (doc 45, D-097) --------- *
   The meter fills to its true width ON PAINT. There is deliberately NO
   transition on the fill: condition 3 says completing a set is a state
   change, not a celebration, and D-068 says motion never carries data. Adding
   `transition: inline-size` here would break both at once. */
.ret__note { font-size: var(--sp-t-xs); color: var(--sp-ink-muted);
  margin-block-start: var(--sp-3); max-inline-size: 60ch; }
.ret__meter { margin-block-start: var(--sp-6); padding: var(--sp-4);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); max-inline-size: 32rem; }
.ret__meter[hidden] { display: none; }
.ret__meter h3 { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-muted); }
.ret__count { font-size: var(--sp-t-sm); margin-block: var(--sp-2) var(--sp-3); }
.ret__count .num { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  color: var(--sp-ink); }
.ret__bar { block-size: 6px; background: var(--sp-surface-3); border-radius: 999px;
  overflow: hidden; }
.ret__bar span { display: block; block-size: 100%; background: var(--sp-gold);
  transition: none; }

/* ------------------------------------ LINK MESH (doc 45 §3 / doc 42) ----- *
   Every row is a span today. The spans and the anchors share .mesh__link so
   that flipping a row to an anchor changes its colour and nothing else —
   the layout must not jump on the day a page ships. */
.mesh__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--sp-line); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-0); overflow: hidden; }
.mesh__row { background: var(--sp-surface-1); }
.mesh__link { display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); text-decoration: none; color: inherit;
  font-size: var(--sp-t-sm); }
a.mesh__link:hover { background: var(--sp-surface-2); }
.mesh__name { flex: 1; min-inline-size: 0; }
.mesh__band { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  color: var(--sp-ink); }
.mesh__link em { font-style: normal; font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); letter-spacing: 0.06em; color: var(--sp-ink-faint); }
.mesh__group { margin-block-start: var(--sp-5); }
.mesh__cat { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-muted);
  margin-block-end: var(--sp-2); }
@media (min-width: 900px) {
  #universe-home .mesh__group { display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--sp-4);
    align-items: start; }
}

/* ------------------------------------------ VS GOLD BAND (doc 48) -------- *
   THE TYPOGRAPHY RULE: .vg__result is ONE class. A loss and a gain differ by
   the data-dir colour and the arrow, and by nothing else — same font, same
   size, same weight, same position. Do not add a .vg__result--loss. If a loss
   is ever set quieter than a gain this module is marketing. */
.vg__lede { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 68ch;
  margin-block-end: var(--sp-4); }
.vg__refusal { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 68ch;
  padding: var(--sp-4); border: 1px dashed var(--sp-line); border-radius: var(--sp-r-0);
  margin-block-end: var(--sp-5); }
.vg__refusal b, .vg__refusal .num { color: var(--sp-ink); }
.vg__market { padding: var(--sp-5); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-0); background: var(--sp-surface-1); }
.vg__pair { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-block: var(--sp-4); }
.vg__pair dt { font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--sp-ink-muted); font-family: var(--sp-font-mono); }
.vg__pair dd { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price); margin: 4px 0 0; }
.vg__counter { font-size: var(--sp-t-sm); color: var(--sp-ink); max-inline-size: 68ch; }
.vg__counter .num { font-family: var(--sp-font-mono); }
.vg__attrib { font-size: var(--sp-t-xs); color: var(--sp-ink-faint);
  margin-block-start: var(--sp-3); max-inline-size: 68ch; }
.vg__calc { margin-block-start: var(--sp-6); padding: var(--sp-5);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-0); }
.vg__calc h3 { font-size: var(--sp-t-lg); font-weight: 600; margin-block-end: var(--sp-3); }
.vg__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  margin-block-end: var(--sp-4); }
.vg__form label { display: flex; flex-direction: column; gap: 6px;
  font-size: var(--sp-t-micro); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sp-ink-muted); font-family: var(--sp-font-mono); }
.vg__form input { padding: var(--sp-2) var(--sp-3); background: var(--sp-surface-2);
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-xs);
  color: var(--sp-ink); font-family: var(--sp-font-mono); font-size: var(--sp-t-sm);
  min-inline-size: 12ch; }
.vg__form input:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.vg__result { font-family: var(--sp-font-mono); font-size: var(--sp-t-price);
  font-variant-numeric: tabular-nums; font-weight: 500; margin-block-end: var(--sp-3);
  color: var(--sp-ink); }
.vg__result[data-dir="up"] { color: var(--sp-up); }
.vg__result[data-dir="down"] { color: var(--sp-down); }
.vg__oz { font-size: var(--sp-t-sm); color: var(--sp-ink); margin-block-end: var(--sp-3); }
.vg__oz .num { font-family: var(--sp-font-mono); }
/* the three honesty clauses are never collapsible and never below the fold of
   the result — doc 48 §3.2 clause 1 is explicit about it */
.vg__clauses { display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--sp-t-xs); color: var(--sp-ink-muted); max-inline-size: 72ch;
  margin-block-start: var(--sp-4); }
.vg__disc { font-size: var(--sp-t-xs); color: var(--sp-ink-faint);
  margin-block-start: var(--sp-4); max-inline-size: 72ch; }
.vg__verdict { font-size: var(--sp-t-lg); }

/* ------------------------------- MARKET DATA PANEL v2 (doc 60) ----------- *
   A RIGHT RAIL that slides, not a centred modal; a full-screen sheet ≤720px.

   D-081 GOVERNS THIS BLOCK: nothing here sets overflow, height or max-height
   on <html> or <body>. The panel scrolls itself and the document keeps its own
   scrollbar, so opening never reflows the page behind it. Every panel library
   ships a scroll lock; check-layout.mjs fails the build if one appears. */
.mkt__strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  justify-content: space-between; padding: var(--sp-4);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); }
.mkt__stripstats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; color: var(--sp-ink-muted); }
.mkt__stripstats b { color: var(--sp-ink); font-size: var(--sp-t-sm); }
.mkt-record { margin-block-start: var(--sp-4); }
.mkt-record > summary { cursor: pointer; font-size: var(--sp-t-sm);
  color: var(--sp-ink-muted); padding: var(--sp-3) 0; }
.mkt-record > summary:focus-visible { outline: none; box-shadow: var(--sp-focus); }

.vs[hidden] { display: none; }
.vs { position: fixed; inset: 0; z-index: 80; }
.vs__backdrop { position: absolute; inset: 0; background: var(--sp-scrim);
  opacity: 0; transition: opacity 200ms var(--sp-ease); }
.vs[data-open="true"] .vs__backdrop { opacity: 1; }
.vs__box { position: fixed; inset-block: 0; inset-inline-end: 0;
  /* min() rather than a bare 480px + max-inline-size: the panel behaves the
     same either way, but the static layout check reads declarations and a
     bare 480px reads as an overflow at 375. State the real constraint. */
  inline-size: min(480px, 100vw);
  display: flex; flex-direction: column;
  background: var(--sp-surface-1); border-inline-start: 1px solid var(--sp-line);
  transform: translateX(100%); transition: transform 150ms var(--sp-ease); }
.vs[data-open="true"] .vs__box { transform: translateX(0); transition-duration: 200ms; }
@media (max-width: 1023px) { .vs__box { inline-size: min(440px, 92vw); } }
@media (max-width: 720px) {
  .vs__box { inset: 0; inline-size: 100%; block-size: 100dvh;
    border-inline-start: 0; transform: translateY(100%); }
  .vs[data-open="true"] .vs__box { transform: translateY(0); }
  .vs__backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vs__box, .vs__backdrop { transition-duration: 0ms; }
}
.vs__hd { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-block-end: 1px solid var(--sp-line); }
.vs__hd h2 { font-size: var(--sp-t-lg); font-weight: 600; }
.mkt__scope { display: block; margin-block-start: var(--sp-2); }
.mkt__scope select { font: inherit; font-size: var(--sp-t-xs);
  font-family: var(--sp-font-mono); padding: 4px var(--sp-2);
  background: var(--sp-surface-2); color: var(--sp-ink);
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-xs); }
.vs__x { inline-size: 44px; block-size: 44px; flex: none;
  border: 1px solid var(--sp-line-control); border-radius: 999px;
  background: none; color: var(--sp-ink); cursor: pointer; font-size: 20px; line-height: 1; }
.vs__x:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.vs__tabs { display: flex; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5) 0;
  border-block-end: 1px solid var(--sp-line); flex: none; }
.vs__tab { background: none; border: 0; border-block-end: 2px solid transparent;
  padding: var(--sp-2) var(--sp-3); font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); letter-spacing: 0.09em; color: var(--sp-ink-muted);
  cursor: pointer; }
.vs__tab[aria-selected="true"] { color: var(--sp-ink); border-block-end-color: var(--sp-gold); }
.vs__tab:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.vs__panel { padding: var(--sp-4) var(--sp-5) var(--sp-6); overflow-y: auto;
  overscroll-behavior: contain; flex: 1; min-block-size: 0; }
.vs__stmt { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); margin-block-end: var(--sp-4); }
.vs__none { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 56ch;
  padding: var(--sp-5); border: 1px dashed var(--sp-line); border-radius: var(--sp-r-0); }
.vs__list { list-style: none; margin: 0; padding: 0; }
.vs__row { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: baseline; padding-block: var(--sp-3);
  border-block-end: 1px solid var(--sp-line); font-size: var(--sp-t-sm); }
.vs__price { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums; }
.vs__date { display: none; }   /* the group header carries the date (doc 60 §4.1) */

.mkt__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--sp-line); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-0); overflow: hidden; margin-block-end: var(--sp-4); }
.mkt__stat { background: var(--sp-surface-1); padding: var(--sp-3) var(--sp-4); }
.mkt__statlab { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-muted); }
.mkt__statval { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-sm); color: var(--sp-ink); margin-block: 4px 2px; }
.mkt__statsub { font-size: var(--sp-t-micro); color: var(--sp-ink-muted); }
.mkt__group { margin-block-end: var(--sp-4); }
.mkt__grouphd { position: sticky; inset-block-start: 0; z-index: 1;
  display: flex; justify-content: space-between; gap: var(--sp-3);
  background: var(--sp-surface-2); padding: var(--sp-2) var(--sp-3);
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-muted); }
.mkt__foot { display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-block-start: var(--sp-5); }
.badge--warn { color: var(--sp-warn, var(--sp-down)); }

/* ------------------------------------------ VS GOLD BAND (doc 48) -------- *
   THE TYPOGRAPHY RULE: .vg__result is ONE class. A loss and a gain differ by
   the data-dir colour and the arrow, and by nothing else — same font, same
   size, same weight, same position. Do not add a .vg__result--loss. If a loss
   is ever set quieter than a gain this module is marketing. */
.vg__lede { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 68ch;
  margin-block-end: var(--sp-4); }
.vg__refusal { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 68ch;
  padding: var(--sp-4); border: 1px dashed var(--sp-line); border-radius: var(--sp-r-0);
  margin-block-end: var(--sp-5); }
.vg__refusal b, .vg__refusal .num { color: var(--sp-ink); }
.vg__market { padding: var(--sp-5); border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-0); background: var(--sp-surface-1); }
.vg__pair { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-block: var(--sp-4); }
.vg__pair dt { font-size: var(--sp-t-micro); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--sp-ink-muted); font-family: var(--sp-font-mono); }
.vg__pair dd { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price); margin: 4px 0 0; }
.vg__counter { font-size: var(--sp-t-sm); color: var(--sp-ink); max-inline-size: 68ch; }
.vg__counter .num { font-family: var(--sp-font-mono); }
.vg__attrib { font-size: var(--sp-t-xs); color: var(--sp-ink-faint);
  margin-block-start: var(--sp-3); max-inline-size: 68ch; }
.vg__calc { margin-block-start: var(--sp-6); padding: var(--sp-5);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-0); }
.vg__calc h3 { font-size: var(--sp-t-lg); font-weight: 600; margin-block-end: var(--sp-3); }
.vg__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
  margin-block-end: var(--sp-4); }
.vg__form label { display: flex; flex-direction: column; gap: 6px;
  font-size: var(--sp-t-micro); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--sp-ink-muted); font-family: var(--sp-font-mono); }
.vg__form input { padding: var(--sp-2) var(--sp-3); background: var(--sp-surface-2);
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-xs);
  color: var(--sp-ink); font-family: var(--sp-font-mono); font-size: var(--sp-t-sm);
  min-inline-size: 12ch; }
.vg__form input:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.vg__result { font-family: var(--sp-font-mono); font-size: var(--sp-t-price);
  font-variant-numeric: tabular-nums; font-weight: 500; margin-block-end: var(--sp-3);
  color: var(--sp-ink); }
.vg__result[data-dir="up"] { color: var(--sp-up); }
.vg__result[data-dir="down"] { color: var(--sp-down); }
.vg__oz { font-size: var(--sp-t-sm); color: var(--sp-ink); margin-block-end: var(--sp-3); }
.vg__oz .num { font-family: var(--sp-font-mono); }
/* the three honesty clauses are never collapsible and never below the fold of
   the result — doc 48 §3.2 clause 1 is explicit about it */
.vg__clauses { display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--sp-t-xs); color: var(--sp-ink-muted); max-inline-size: 72ch;
  margin-block-start: var(--sp-4); }
.vg__disc { font-size: var(--sp-t-xs); color: var(--sp-ink-faint);
  margin-block-start: var(--sp-4); max-inline-size: 72ch; }
.vg__verdict { font-size: var(--sp-t-lg); }

/* doc 46 item 4 — the snapped dot exists only in the ON-SALE state. */
[data-snap-dot] { opacity: 0; }
[data-crosshair="onsale"] [data-snap-dot] { opacity: 1; }

/* doc 46 §6.3 — a disabled pill is inert and legible, never hidden: the
   reader can still read why the window is off. */
.seg[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.chart-key { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: var(--sp-3);
  font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key svg { inline-size: 26px; block-size: 10px; overflow: visible; }
.readout { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: baseline;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--sp-line); min-block-size: 46px; }
.readout b { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-lg); font-weight: 500; }
.readout span { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.readout .gold-eq { font-size: var(--sp-t-sm); }

/* The wave-3 centred-modal styles for .vs lived here. Doc 60 §2.1 replaces
   that geometry with a sliding right rail (see MARKET DATA PANEL v2 above),
   and leaving the old block below the new one meant the later rule won — the
   scrim went back to a literal rgb() and the box back to centred. Deleted
   rather than overridden. */

/* ---------------------------------------------- CROSSHAIR (doc 31) ------- *
   The whole scroll-safety story is this one declaration. The browser owns the
   vertical axis: a mostly-vertical finger scrolls the page natively and sends
   us pointercancel. There is no touchmove listener and no preventDefault
   anywhere in the chart, so the chart can never hijack a scroll.            */
.plot { touch-action: pan-y; }
.plot:focus-visible { outline: none; box-shadow: var(--sp-focus); }

/* Free tracking is frame-synchronous — 0ms. Only the final <=R-px travel onto
   a mark (and the release off it) eases, and only while JS says so. */
[data-cross-group] { transition: none; }
.is-snapping [data-cross-group] {
  transition: transform var(--sp-dur-snap) var(--sp-ease);
}

/* At rest the whole group is absent, not transparent-but-hit-testable. */
[data-crosshair="rest"] [data-cross-group] { opacity: 0; }
[data-cross] { stroke: var(--sp-line-control); }
[data-snap-tick],
[data-snap-ring] { opacity: 0; transition: opacity var(--sp-dur-1) var(--sp-ease); }

/* ON-SALE: solid hairline, gold axis tick, ring on the mark. */
[data-crosshair="onsale"] [data-snap-tick],
[data-crosshair="onsale"] [data-snap-ring] { opacity: 1; }

/* BETWEEN: the hairline follows the pointer freely and says so by being
   dashed. The readout prefixes ~ and suppresses n. */
[data-crosshair="between"] [data-cross] { stroke-dasharray: 4 3; }

/* VOID: dashed at 30%. No price is rendered at all — the refusal is the
   product, so there is nothing here to style but the absence. */
[data-crosshair="void"] [data-cross] { stroke-dasharray: 4 3; opacity: 0.3; }

.readout [data-readout-price].is-est { font-style: italic; color: var(--sp-ink-muted); }
.readout [data-readout-n] { font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); letter-spacing: 0.09em; text-transform: uppercase; }
.readout [data-readout-n]:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .is-snapping [data-cross-group],
  [data-snap-tick], [data-snap-ring] { transition: none; }
}

/* ---------------------------------------- CONTENT PAGES (V1) ------------ *
   /methodology, /about, /accuracy, /data-sources, /worth. One measure, one
   rhythm; these pages are read, not scanned. */
.prose { max-inline-size: 74ch; padding-block: var(--sp-7) var(--sp-8); }
.prose h1 { font-family: var(--sp-font-display); font-weight: 400;
  font-size: var(--sp-t-display); letter-spacing: -0.015em; line-height: 1.08;
  margin-block-end: var(--sp-5); }
.prose h2 { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h1);
  letter-spacing: -0.01em; margin-block: var(--sp-7) var(--sp-3);
  padding-block-start: var(--sp-5); border-block-start: 1px solid var(--sp-line); }
.prose h3 { font-size: var(--sp-t-lg); font-weight: 600; margin-block: var(--sp-5) var(--sp-2); }
.prose p { margin-block-end: var(--sp-4); line-height: 1.62; color: var(--sp-ink); }
.prose p.answer { font-size: var(--sp-t-lg); color: var(--sp-ink); line-height: 1.5; }
.prose ul { margin-block-end: var(--sp-4); padding-inline-start: var(--sp-5);
  color: var(--sp-ink); line-height: 1.62; }
.prose li { margin-block-end: var(--sp-2); }
.prose strong { color: var(--sp-ink); font-weight: 600; }
.prose a { color: var(--sp-accent); text-underline-offset: 3px;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--sp-accent) 45%, transparent); }
.prose a:hover { text-decoration-color: var(--sp-accent); }
/* outbound links keep the gold underline (the established link language,
   Restraint Law's one sanctioned non-ounce use); INTERNAL links take the
   accent blue, so the two are told apart by colour and not by memory. */
a.mesh__link { color: var(--sp-accent); }
.prose .tbl { margin-block-end: var(--sp-4); }
.prose .num { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums; }
.prose .btn { text-decoration: none; }

/* ------------------------------- LIVE GAME BLOCK (doc 49 defect 7) ------- *
   One live block and one sentence. There is deliberately no ".game--soon"
   rule here: the component has no branch that renders an empty tile, so the
   layout cannot regrow four of them by accident. */
.gamesrow { display: grid; gap: var(--sp-5); }
.gamelive { display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border: 1px solid var(--sp-line); border-radius: var(--sp-r-1);
  background: var(--sp-surface-1); text-decoration: none; color: inherit;
  transition: border-color var(--sp-dur-1) var(--sp-ease); }
.gamelive:hover { border-color: var(--sp-line-control); }
.gamelive:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.gamelive__hd { display: flex; align-items: center; gap: var(--sp-3); }
.gamelive__note { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.gamelive__rungs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding-block-start: var(--sp-3); border-block-start: 1px solid var(--sp-line); }
.gamelive__rung { display: inline-flex; align-items: baseline; gap: 8px;
  font-size: var(--sp-t-sm); }
.gamelive__rung .num { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums; }
.gameline { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 68ch; }
.gameline .num { font-family: var(--sp-font-mono); color: var(--sp-ink); }

/* doc 49 defect 5 — one line where two vendorware panes used to be. */
.ind-line { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 72ch;
  padding: var(--sp-4); border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); }
.ind-line .num { font-family: var(--sp-font-mono); color: var(--sp-ink); }

/* ------------------------------------------------- HOT SETS (docs 38/40) - *
   A catalogue, not a price board. There is no price type in here at all,
   which is the point: nothing in this module can grow a number by accident. */
.hot__row + .hot__row { margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-6); border-block-start: 1px solid var(--sp-line); }
.sec__h { font-family: var(--sp-font-display); font-weight: 400; font-size: var(--sp-t-h1);
  letter-spacing: -0.01em; }
.sec__lede { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-inline-size: 62ch;
  margin-block-start: var(--sp-2); }
.hot__game { display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--sp-t-micro); letter-spacing: 0.09em; text-transform: uppercase;
  font-family: var(--sp-font-mono); color: var(--sp-ink-muted);
  margin-block: var(--sp-6) var(--sp-3); }
.hot__ic { inline-size: 18px; block-size: 18px; flex: none; color: var(--sp-gold); }
.hot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.hot__set { display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-4); border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); min-inline-size: 0; }
.hot__code { font-family: var(--sp-font-mono); font-size: var(--sp-t-sm); font-weight: 500;
  color: var(--sp-ink); }
.hot__name { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.hot__chase { font-size: var(--sp-t-sm); color: var(--sp-ink); margin-block-start: var(--sp-2); }
.hot__k { display: block; font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-ink-faint); }
.hot__note { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); flex: 1; }
.hot__cta { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.06em; color: var(--sp-ink-faint);
  padding-block-start: var(--sp-3); border-block-start: 1px solid var(--sp-line); }

/* ---------------------------------------------- METALS TICKER (doc 39) --- *
   Rule 3 of the eight-line spec, in one declaration: the bar is the last
   child of <main> and sticks to the bottom of THAT box. A sticky element
   releases at its container's end, so the bar docks at the bottom of <main>
   and scrolls away with it the moment the footer arrives — the legal band is
   never overlapped, with no JS, no observer, no body padding, and nothing
   position:fixed. Do not "improve" this to position:fixed.               */
:root { --sp-ticker-h: 36px; }
@media (max-width: 720px) { :root { --sp-ticker-h: 32px; } }

.tick {
  position: sticky; inset-block-end: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--sp-2);
  block-size: var(--sp-ticker-h);
  padding-inline: var(--sp-4);
  background: var(--sp-surface-2); color: var(--sp-ink);
  border-block-start: 1px solid var(--sp-line);
  font-size: var(--sp-t-xs);
}
.tick__row { display: flex; align-items: center; gap: var(--sp-2);
  min-inline-size: 0; flex: 1; white-space: nowrap; overflow: hidden; }
.tick__k { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: 0.09em; color: var(--sp-ink-muted); }
.tick__m { display: inline-flex; align-items: center; gap: 4px; }
.tick__m .num { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums; }
.tick__m--none { color: var(--sp-ink-muted); }
.tick__sep { color: var(--sp-ink-faint); }
.tick__as { color: var(--sp-ink-muted); margin-inline-start: auto; }
/* live-layer only (doc 41). Numbers never animate on refresh — the text swaps
   in one frame and nothing pulses or flashes (D-068). */
/* doc 49 defect 10 — the ticker's justification, on-surface. Above 720px it
   sits inline after the numbers; at ≤720px, where the strip has no room, it
   drops to a second line inside the bar and the bar grows to fit. It is never
   a title attribute alone, on any width. */
.tick__why { color: var(--sp-ink-muted); font-size: var(--sp-t-micro);
  max-inline-size: 46ch; margin: 0; }
@media (min-width: 721px) {
  .tick__why { flex: 1 1 22ch; min-inline-size: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}
/* doc 39 rule 1 — the bar is ONE LINE at every width: 36px desktop, 32px
   mobile, hard caps 40/36. My first pass let it wrap so the justification
   could sit on a second line; measured at 375px it grew to 81px, more than
   twice the cap. Wrapping is not an option the spec leaves open.

   So the strip stays a single nowrap flex row and DROPS SEGMENTS IN PRIORITY
   ORDER as space runs out — the Au price and the timestamp are the two things
   that must survive, in that order. The justification the reader needs is not
   deleted: it moves into the collapse-to-pill state, which is where doc 39
   puts overflow, and it stays on-surface (never title-only) at ≥721px. */
@media (max-width: 720px) {
  :root { --sp-ticker-h: 32px; }
  .tick { flex-wrap: nowrap; padding-inline: var(--sp-3); }
  .tick__row { flex-wrap: nowrap; overflow: hidden; }
  /* priority order, least important dropped first */
  .tick__why { display: none; }
  .tick__m--none { display: none; }
  .tick__sep { display: none; }
  .tick__as { margin-inline-start: auto; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-inline-size: 14ch; }
  .tick__m { white-space: nowrap; }
}
@media (max-width: 380px) {
  /* last stop before the price itself: the source name goes, the clock stays */
  .tick__hide-sm { display: none; }
}

.tick__conf { color: var(--sp-ink-faint); font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); }
/* THE DELTA SLOT (wave 8.6). It ships EMPTY and INVISIBLE from the server —
   a change needs two prints and the server holds one. The class rule must
   therefore default to display:none, not inline-flex: a bare `.tick__d`
   selector would beat the UA's `[hidden]{display:none}` on specificity and
   the empty span would still eat a flex gap on every static page. It becomes
   visible only when the live layer writes data-dir, which it only ever does
   from a real Pyth print. */
.tick__d { display: none; align-items: center; gap: 4px;
  color: var(--sp-ink-muted); font-size: var(--sp-t-micro);
  font-family: var(--sp-font-mono); letter-spacing: 0.04em; white-space: nowrap; }
.tick__d[data-dir] { display: inline-flex; }
.tick__d[hidden] { display: none; }
.tick__d[data-dir="up"] { color: var(--sp-up); }
.tick__d[data-dir="down"] { color: var(--sp-down); }

/* THE EXPANDED PANEL (wave 8.6). It is absolutely positioned ABOVE the strip
   inside the sticky box, so opening it cannot change the strip's own height —
   doc 39 rule 1's 36px/32px cap survives however much content the panel
   holds. `.tick` is already position:sticky, which is a positioned element,
   so it is the containing block; no extra position declaration is needed and
   none should be added. */
.tick__panel { display: none; position: absolute; inset-inline: 0;
  inset-block-end: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--sp-surface-2); color: var(--sp-ink);
  border-block-start: 1px solid var(--sp-line);
  border-block-end: 1px solid var(--sp-line);
  max-block-size: 40vh; overflow-y: auto; }
.tick[data-expanded="true"] .tick__panel { display: block; }
.tick[data-collapsed="true"] .tick__panel { display: none; }
.tick__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px;
  max-inline-size: 92ch; }
.tick__rows li { font-size: var(--sp-t-xs); color: var(--sp-ink-muted);
  line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick__rows .num { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  color: var(--sp-ink); font-weight: 500; }
.tick__note { font-size: var(--sp-t-micro); color: var(--sp-ink-faint);
  margin: var(--sp-2) 0 0; max-inline-size: 92ch; }
@media (max-width: 720px) {
  .tick__rows li { white-space: normal; }
}
.tick, .tick * { transition: none; }
.tick__chev { transition: transform var(--sp-dur-1) var(--sp-ease); }
.tick__x { flex: none; inline-size: 28px; block-size: 28px; display: grid; place-items: center;
  background: none; border: 1px solid var(--sp-line-control); border-radius: 999px;
  color: var(--sp-ink-muted); cursor: pointer; }
.tick__x:focus-visible { outline: none; box-shadow: var(--sp-focus); }
.tick__chev { display: block; transition: transform var(--sp-dur-1) var(--sp-ease); }

/* Collapse, not dismiss: the strip narrows to the coin pill and the numbers
   go, but the control that brings them back never does. */
.tick[data-collapsed="true"] { inline-size: max-content; margin-inline-start: auto;
  border-inline-start: 1px solid var(--sp-line); }
.tick[data-collapsed="true"] .tick__row { display: none; }
.tick[data-collapsed="true"] .tick__chev { transform: rotate(180deg); }
.tick[data-collapsed="true"] .tick__x { border-color: var(--sp-gold); color: var(--sp-gold); }

@media (max-width: 720px) { .tick__hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { .tick__chev { transition: none; } }
@media print { .tick { display: none; } }

/* ------------------------------------------------- INDICATOR REFUSALS ---- */
.pane { border: 1px solid var(--sp-line); border-radius: var(--sp-r-0);
  background: var(--sp-surface-1); margin-block-start: var(--sp-4); }
.pane__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--sp-line);
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted); }
.pane__hd b { color: var(--sp-ink); font-weight: 500; }
.pane__body { padding: var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-4);
  min-block-size: 168px; align-content: center; }
.pane__shortfall { font-size: var(--sp-t-h3); color: var(--sp-ink); max-width: 60ch; line-height: 1.4; }
.pane__shortfall .num { color: var(--sp-gold-text); }
.pane__meter { inline-size: 100%; max-inline-size: 420px; block-size: 6px;
  background: var(--sp-surface-3); position: relative; }
.pane__meter i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--sp-conf-thin); }
.pane__sub { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.pane__rail { display: flex; align-items: center; gap: var(--sp-3); block-size: 22px;
  padding-inline: var(--sp-4); border: 1px solid var(--sp-line); border-top: 0;
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  background: var(--sp-surface-1); }

/* --------------------------------------------------- ANALYTIC PACK ------- */
.pack { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  border-block: 1px solid var(--sp-line); padding-block: var(--sp-5); margin-block-start: var(--sp-6); }
@media (max-width: 1023px) { .pack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pack { grid-template-columns: 1fr; gap: var(--sp-4); } }
.pack__item h3 { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  font-weight: 500; }
.pack__head { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-lg); margin-block: var(--sp-2); display: block; }
.pack__item p { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: 46ch; }

/* --------------------------------------------------------- MISC v3 ------- */
.answer { font-size: var(--sp-t-body); color: var(--sp-ink-muted); max-width: 68ch;
  margin-block-start: var(--sp-4); line-height: var(--sp-lh-body); }
.answer b { color: var(--sp-ink); font-weight: 500; }
.hero__price .price { min-inline-size: var(--price-ch, 9ch); display: inline-block; }
.notadvice { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); max-width: 68ch;
  margin-block-start: var(--sp-3); }
.excl { border-inline-start: 2px solid var(--sp-conf-thin); padding-inline-start: var(--sp-4); }
.excl h3 { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro); font-weight: 500;
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-conf-thin); }
.excl li { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); padding-block: var(--sp-3);
  border-bottom: 1px solid var(--sp-line); }
.excl li b { display: block; color: var(--sp-ink-muted); text-decoration: line-through; font-weight: 400; }
.excl li em { display: block; font-style: normal; color: var(--sp-conf-thin);
  font-size: var(--sp-t-xs); margin-block-start: 4px; }
.comps-wrap { display: grid; grid-template-columns: minmax(0,3fr) minmax(220px,1fr); gap: var(--sp-6); }
@media (max-width: 1023px) { .comps-wrap { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. v4 — THE OUNCE (D-071), THE MEGA NAV (D-074), GOLDSMITH'S SUITE
   ========================================================================== */

/* ---- sprite plumbing ---- */
.ic-box { inline-size: 20px; block-size: 20px; flex: 0 0 auto; color: inherit; }
.oz-badge-ref { inline-size: 18px; block-size: 18px; flex: 0 0 auto; vertical-align: -3px; }
.gtm-wrap { display: inline-block; line-height: 0; }
.gtm-wrap svg { inline-size: 100%; block-size: auto; }
.oz-meter-wrap { inline-size: 100%; max-inline-size: 360px; margin-block-start: var(--sp-3); }
.gold__receipt--lesson { margin-block-start: var(--sp-1); color: var(--sp-ink-muted); }
.gold__receipt--lesson b { color: var(--sp-ink); font-weight: 500; }
.oz-meter-wrap svg { inline-size: 100%; block-size: auto; }
.gll-wrap { display: inline-block; inline-size: 48px; line-height: 0; vertical-align: middle; }
.gll-wrap svg { inline-size: 100%; block-size: auto; }
@media (max-width: 420px) { .oz-meter-wrap { --ozm-detail: 0; } }

/* ---- the mega nav ---- */
.hdr { gap: var(--sp-4); }
.hdr__mark { display: inline-flex; align-items: center; inline-size: 150px; }
.hdr__mark svg { inline-size: 100%; block-size: auto; }
.mn { margin-inline-end: auto; }
.mn__row { display: flex; align-items: center; gap: var(--sp-1); }
.mn__link, .mn__trigger {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: 38px; padding-inline: var(--sp-3);
  font: inherit; font-size: var(--sp-t-sm); color: var(--sp-ink-muted);
  background: transparent; border: 1px solid transparent; border-radius: var(--sp-r-sm);
  cursor: pointer; white-space: nowrap;
}
.mn__link:hover, .mn__trigger:hover { color: var(--sp-ink); background: var(--sp-surface-2); }
.mn__link--gold { color: var(--sp-gold-text); }
.mn__trigger[aria-expanded="true"] { color: var(--sp-ink); background: var(--sp-surface-2);
  border-color: var(--sp-line-control); }
.mn__caret { inline-size: 0; block-size: 0; margin-inline-start: 2px;
  border-inline: 3.5px solid transparent; border-block-start: 4px solid currentColor; }
.mn__trigger[aria-expanded="true"] .mn__caret { transform: rotate(180deg); }
.mn__item { position: relative; }
.mn__panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 60;
  inline-size: min(460px, calc(100vw - 32px));
  background: var(--sp-surface-2); border: 1px solid var(--sp-line-control);
  border-radius: var(--sp-r-md); box-shadow: var(--sp-e-float); padding: var(--sp-4);
}
.mn__panel[hidden] { display: none; }
.mn__panelhd { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  margin-block-end: var(--sp-3); }
.mn__games { display: grid; gap: 2px; }
.mn__game { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--sp-3);
  align-items: center; padding: var(--sp-2) var(--sp-2); border-radius: var(--sp-r-sm);
  color: var(--sp-ink); }
.mn__game .mn__ic { grid-row: span 2; }
.mn__gname { font-size: var(--sp-t-sm); }
.mn__gnote { grid-column: 2; font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
a.mn__game:hover { background: var(--sp-surface-3); }
.mn__game--soon { color: var(--sp-ink-muted); }
.mn__soon { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-faint);
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-xs); padding: 0 4px; }
.mn__panelft { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); max-width: 52ch;
  border-top: 1px solid var(--sp-line); margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); }
.mn__panelft a { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---- wave 9: one panel per catalogue (D-105) ----
   Three tabs, three panels. A long list (data-cols="2") flows into two
   columns so Trading Cards' ten rows sit in five-and-five instead of a
   scroll; Sports' seven and Collectibles' six stay single-column, narrower.
   Same row component in every panel — the tabs differ in contents, never
   in grammar. */
.mn__panel--wide { inline-size: min(560px, calc(100vw - 32px)); }
.mn__panel--tcg { inline-size: min(640px, calc(100vw - 32px)); }
.mn__panel--sports, .mn__panel--collectibles { inline-size: min(360px, calc(100vw - 32px)); }
.mn__games[data-cols="2"] { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
.mn__league { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-faint);
  margin-inline-start: 2px; }
.mn__game--live .mn__gname { font-weight: 600; }
/* ---- the featured card (D-104) --------------------------------------------
   Replaces wave 8's nested printing ladder. One tile, above the two catalogue
   columns, on the panel's own surface-1 so it reads as a card sitting ON the
   panel rather than as another menu row. Identity on the left, figures right-
   aligned on the right; below 520px the two halves stack.

   --sp-gold-text is spent on the ounce line and nowhere else in this tile
   (D-071): gold marks the unit, not the dollar and not the grade. */
.mn__feat { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--sp-4); padding: var(--sp-3); margin-block-end: var(--sp-4);
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-sm);
  background: var(--sp-surface-1); color: var(--sp-ink); }
.mn__feat:hover { background: var(--sp-surface-3); }
.mn__feat__id { display: grid; gap: 2px; min-inline-size: 0; }
.mn__feat__kicker { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  color: var(--sp-ink-muted); }
.mn__feat__name { font-size: var(--sp-t-h3); font-weight: 600; line-height: 1.2; }
.mn__feat__no { color: var(--sp-ink-muted); font-size: var(--sp-t-sm); }
.mn__feat__meta { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.mn__feat__fig { display: grid; justify-items: end; gap: 2px; text-align: end; }
.mn__feat__grade { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  color: var(--sp-ink-muted); border: 1px solid var(--sp-line-control);
  border-radius: var(--sp-r-xs); padding: 0 4px; }
.mn__feat__price { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-md); color: var(--sp-ink); }
.mn__feat__oz { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-sm); color: var(--sp-gold-text); }
.mn__feat__n { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  color: var(--sp-ink-muted); }
@media (max-width: 520px) {
  .mn__feat { grid-template-columns: 1fr; }
  .mn__feat__fig { justify-items: start; text-align: start; }
}
.mn__burger { display: none; inline-size: 38px; block-size: 38px; padding: 9px 8px;
  flex-direction: column; justify-content: space-between; background: transparent;
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-sm); cursor: pointer; }
.mn__burger span { display: block; block-size: 1.5px; background: var(--sp-ink); }
.theme-toggle { inline-size: 38px; block-size: 38px; }

@media (max-width: 1100px) {
  .mn__burger { display: flex; order: 3; }
  .hdr { flex-wrap: wrap; }
  .mn { order: 5; flex-basis: 100%; margin: 0; display: none; }
  .mn[data-open="true"] { display: block; padding-block: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--sp-line); }
  .mn__row { flex-direction: column; align-items: stretch; gap: 2px; }
  .mn__link, .mn__trigger { min-block-size: 46px; justify-content: flex-start; }
  .mn__item { position: static; }
  .mn__panel { position: static; inline-size: auto; box-shadow: none;
    background: var(--sp-surface-1); margin-block-start: var(--sp-2); }
  .mn__games[data-cols="2"] { grid-template-columns: 1fr; }
}

/* ---- gold, in ounces ---- */
.gold { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-4); }
.gold__line { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-md); color: var(--sp-ink-muted); }
.gold__line b { color: var(--sp-ink); font-weight: 500; }
.gold__dist { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); }
.gold__receipt { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  color: var(--sp-ink-muted); letter-spacing: 0.02em; margin-block-start: var(--sp-3); }
.gold--struck { align-items: center; gap: var(--sp-5);
  border-block: 1px solid var(--sp-line); padding-block: var(--sp-5); }
.gold__tierline { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-gold-text); }
.gold--struck .gold__line { font-size: var(--sp-t-price-lg); color: var(--sp-ink); }
.gold--struck .gold__line b { color: var(--sp-gold-text); }
.gold__struckcopy { display: grid; gap: var(--sp-2); }
@media (max-width: 640px) { .gold--struck { gap: var(--sp-4); }
  .gtm-wrap { width: 64px !important; } }

/* ---- crest plate ---- */
/* Intrinsic ratio so the plate can never collapse to 0 height, even if the
   asset module fails to load. The failure mode must be an empty framed box,
   not the identity text overprinting the caption beneath it. */
.plate-wrap { position: relative; aspect-ratio: 340 / 476; inline-size: 100%;
  background: var(--sp-surface-1); border: 1px solid var(--sp-line); }
.plate-wrap svg { inline-size: 100%; block-size: 100%; display: block; }
.plate-wrap:has(> svg) { border: 0; background: none; }
@media (max-width: 300px) { .plate-wrap { --cp-detail: 0; } }
.plate-lockup { position: absolute; inset: 0; display: grid; align-content: center;
  justify-items: center; gap: 4px; text-align: center; padding: 12% 14%; pointer-events: none; }
.plate-lockup__set { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-gold-text); }
.plate-lockup__name { font-family: var(--sp-font-display); font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 2.75rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--sp-ink); }
.plate-lockup__num { font-size: var(--sp-t-price-lg); color: var(--sp-gold-text); }
.plate-lockup__meta { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  margin-block-start: var(--sp-3); }
.fidelity { display: inline-flex; align-items: center; gap: 5px; margin-block-start: var(--sp-3);
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--sp-ink-muted);
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-xs); padding: 3px 7px; }

/* ---- how-we-compute disclosure (D-072) ---- */
.howcompute { margin-block-start: var(--sp-4); border-top: 1px solid var(--sp-line);
  padding-block-start: var(--sp-3); }
.howcompute > summary { font-size: var(--sp-t-sm); color: var(--sp-ink-muted); cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; }
.howcompute > summary::-webkit-details-marker { display: none; }
.howcompute > summary::after { content: "▾"; font-size: .8em; }
.howcompute[open] > summary::after { content: "▴"; }
.howcompute > summary:hover { color: var(--sp-ink); }
.howcompute__body { display: grid; gap: var(--sp-3); padding-block-start: var(--sp-3);
  font-size: var(--sp-t-sm); color: var(--sp-ink-muted); max-width: 66ch; }

/* ---- homepage: uneven module rhythm, not a template ---- */
.landing { padding-block: clamp(40px, 7vw, 88px) 0; }
.landing::after { display: none; }          /* Chroma rule 7: texture is data, not gradient */
.landing h1 { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.25rem); }
.landing h1 em { font-style: italic; color: var(--sp-gold-text); }
.search__ic { inline-size: 20px; block-size: 20px; color: var(--sp-ink-faint); }
.cmd-trigger__ic { inline-size: 16px; block-size: 16px; }

.tape { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin-block-start: var(--sp-7); border-top: 1px solid var(--sp-line); }
.tape__cell { padding: var(--sp-4) var(--sp-4) var(--sp-5) 0;
  border-inline-start: 1px solid var(--sp-line); }
.tape__cell:first-child { border-inline-start: 0; }
.tape__cell:not(:first-child) { padding-inline-start: var(--sp-4); }
.tape__row { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-2); }
.tape__row b { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; }
.tape__row svg { margin-inline-start: auto; }
@media (max-width: 860px) { .tape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tape__cell:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } }

.goldstrip { background: var(--sp-surface-1); border-block: 1px solid var(--sp-line);
  padding-block: var(--sp-7); }
.goldstrip__in { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6);
  align-items: center; }
.goldstrip__mark { line-height: 0; }
.goldstrip__nums { display: flex; flex-wrap: wrap; gap: var(--sp-7); }
.goldstrip__nums b { display: block; font-family: var(--sp-font-mono);
  font-variant-numeric: tabular-nums; font-size: clamp(22px, 2.6vw, 34px); font-weight: 500;
  margin-block-start: var(--sp-1); }
.goldstrip__ref { grid-column: 2; font-size: var(--sp-t-xs); color: var(--sp-ink-muted);
  max-width: 78ch; }
@media (max-width: 720px) { .goldstrip__in { grid-template-columns: 1fr; gap: var(--sp-4); }
  .goldstrip__ref { grid-column: 1; } .goldstrip__nums { gap: var(--sp-5); } }

.gtgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--sp-line); border: 1px solid var(--sp-line); }
.gt { background: var(--sp-bg); padding: var(--sp-5); display: grid;
  grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.gt--lead { grid-column: span 2; grid-row: span 2; align-content: center; }
.gt--lead .gt__oz { font-size: clamp(38px, 5vw, 60px); }
.gt--lead .gt__name { font-size: var(--sp-t-h3); }
.gt--synth { color: var(--sp-ink-muted); }
.gt__oz { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 500; color: var(--sp-gold-text); line-height: 1; }
.gt__oz span { font-size: .45em; color: var(--sp-ink-muted); letter-spacing: .09em; }
.gt__name { font-size: var(--sp-t-sm); margin-block-start: var(--sp-2); }
.gt__set { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.gt__price { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-md); margin-block-start: var(--sp-2); }
.gt__n { font-size: var(--sp-t-micro); color: var(--sp-ink-muted); margin-block-start: var(--sp-2);
  letter-spacing: .04em; }
.gt__mark { line-height: 0; }
a.gt:hover { background: var(--sp-surface-1); }
@media (max-width: 900px) { .gtgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt--lead { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .gtgrid { grid-template-columns: 1fr; }
  .gt--lead { grid-column: span 1; } }

.ozrow { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: var(--sp-3);
  font-family: var(--sp-font-mono); font-size: var(--sp-t-micro); color: var(--sp-ink-muted); }
.mover__n { gap: var(--sp-2); flex-wrap: wrap; }

.gamesrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.game { position: relative; display: grid; gap: var(--sp-2); justify-items: start;
  min-block-size: auto; padding: var(--sp-4); background: var(--sp-surface-1);
  border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm); }
.game::before { display: none; }
.game__ic { inline-size: 24px; block-size: 24px; color: var(--sp-gold-text); }
.game__name { font-size: var(--sp-t-sm); color: var(--sp-ink); }
.game__count { font-family: var(--sp-font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--sp-t-price-md); }
.game__note { font-size: var(--sp-t-xs); color: var(--sp-ink-muted); }
.game__live, .game__soon { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  border: 1px solid var(--sp-line-control); border-radius: var(--sp-r-xs); padding: 1px 5px; }
.game__live { color: var(--sp-gold-text); border-color: var(--sp-gold); }
.game__soon { color: var(--sp-ink-faint); }
.game--nolink { border-style: dashed; }
@media (max-width: 1000px) { .gamesrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .gamesrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   11. THE FOOTER — a designed object, dark ink in BOTH schemes.
   Every colour below is a SCOPED LITERAL, not a page token. That is the whole
   point: in v4 the footer inherited the page palette and rendered ink-on-ink
   in light. A chrome block that declares its own ground and its own ink cannot
   half-flip, whichever way the rest of the page goes.
   ========================================================================== */
.ftr {
  --ftr-bg:    #10151E;
  --ftr-panel: #161C27;
  --ftr-ink:   #E9EDF2;   /* 16.6:1 on --ftr-bg */
  --ftr-mute:  #A3ADBC;   /*  7.8:1 */
  --ftr-faint: #8B95A4;   /*  5.6:1 */
  --ftr-line:  #2A3340;
  --ftr-gold:  #F0D68C;   /* 13.3:1 */
  /* the inlined lockup reads page tokens; re-point them inside this panel */
  --sp-ink: var(--ftr-ink);
  --sp-gold-text: var(--ftr-gold);
  background: var(--ftr-bg);
  color: var(--ftr-ink);
  margin-block-start: var(--sp-9);
}
.ftr a { color: var(--ftr-mute); }
.ftr a:hover { color: var(--ftr-ink); text-decoration-color: var(--ftr-gold); }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-6); }
.ftr__brand { max-width: 34ch; }
.ftr__mark { display: inline-block; inline-size: 178px; }
.ftr__mark svg { inline-size: 100%; block-size: auto; }
.ftr__promise { font-size: var(--sp-t-sm); color: var(--ftr-mute); line-height: 1.55;
  margin-block-start: var(--sp-4); }
.ftr__col h4 { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  text-transform: uppercase; letter-spacing: var(--sp-track-caps); color: var(--ftr-faint);
  margin-block-end: var(--sp-3); font-weight: 500; }
.ftr__col li { font-size: var(--sp-t-sm); color: var(--ftr-mute); padding-block: 4px; }
.ftr__col li > a, .ftr__col li > span { display: inline-flex; align-items: center; gap: 8px; }
.ftr__ic { inline-size: 16px; block-size: 16px; color: var(--ftr-faint); }
.ftr .lk-none { color: var(--ftr-faint); }
.ftr .lk-none::after { content: none; }
.ftr .lk-none em { font-style: normal; font-family: var(--sp-font-mono);
  font-size: var(--sp-t-micro); letter-spacing: var(--sp-track-caps); text-transform: uppercase;
  color: var(--ftr-faint); border: 1px solid var(--ftr-line); border-radius: var(--sp-r-xs);
  padding: 0 4px; }
/* ---- legal strip v3: three labelled cells + one fine-print line -----------
   The size stays --sp-t-sm and the ink stays --ftr-mute (7.8:1) because
   check-compliance refuses a legal block set at 12px or in a faint page token:
   FTC clear-and-conspicuous is a CSS property here, not a copy decision.
   The labels borrow .ftr__col h4's mono-caps voice so the strip reads as part
   of the footer instrument instead of pasted boilerplate. */
.ftr__legal { border-top: 1px solid var(--ftr-line); padding-block: var(--sp-5) var(--sp-8);
  display: grid; gap: var(--sp-5);
  font-size: var(--sp-t-sm); line-height: 1.55; color: var(--ftr-mute); }
/* the divider hangs on the GRID, not on the fine-print paragraph: the paragraph
   is measure-capped at 104ch, so a rule drawn on it would stop mid-strip and
   read as a rendering bug rather than a boundary. Comment stays OUTSIDE the
   block — several checkers parse declarations naively. */
.ftr__disc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  border-block-end: 1px solid var(--ftr-line); padding-block-end: var(--sp-5); }
.ftr__d h4 { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  text-transform: uppercase; letter-spacing: var(--sp-track-caps); color: var(--ftr-faint);
  font-weight: 500; margin-block-end: var(--sp-2); }
.ftr__d p { max-width: 44ch; }
.ftr__fine { color: var(--ftr-faint); max-width: 104ch; }
.ftr__legal b { color: var(--ftr-ink); font-weight: 600; }
.ftr__legal em { font-style: normal; color: var(--ftr-faint); }
.ftr__legal a { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ftr-gold) 55%, transparent); }
.ftr__copy { font-family: var(--sp-font-mono); font-size: var(--sp-t-micro);
  letter-spacing: var(--sp-track-caps); text-transform: uppercase; color: var(--ftr-faint); }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__disc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ftr__disc { grid-template-columns: 1fr; gap: var(--sp-4); } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* ---- light-theme depth: cards lift off paper with a border and a shadow ---- */
.mover, .gcell, .lcard, .game, .tile, .search__field, .mn__panel, .gt, .pane {
  box-shadow: var(--sp-e-raise);
}
.gcell, .vsel button, .btn, .seg-group, .search__field, .mn__panel {
  border-color: var(--sp-line-control);
}
.goldstrip { background: var(--sp-surface-2); }   /* a distinct band on paper too */
.howcompute > summary { border: 1px solid var(--sp-line-control);
  border-radius: var(--sp-r-sm); padding-inline: var(--sp-3); background: var(--sp-surface-1);
  color: var(--sp-ink); }
.howcompute > summary:hover { background: var(--sp-surface-3); }