/* ────────────────────────────────────────────────────────────────────────────
THE TYPEFACE. One family, self-hosted.
Inter variable, latin subset, 48KB. Self-hosted rather than linked from Google so
first paint does not depend on a third party — and because a font request to another
origin is a request this desk cannot see, cache or guarantee.
ONE @font-face for the whole 400-700 range: a variable font carries every weight in a
single file, so asking for 600 costs nothing beyond the 400 already downloaded. That is
most of why one family can replace three without a payload increase — the three faces
this replaces were three separate downloads.
`swap` because the alternative is invisible text: this is a data product read at a
glance, and a metrics-compatible fallback shifting to Inter is a smaller cost than a
blank board while a font loads.
──────────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/inter-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ────────────────────────────────────────────────────────────────────────────
THE EDITORIAL FACES. Two more, and ONLY the editorial palette ever asks for them.
A @font-face file is fetched when a rule that USES the family first matches a
rendered element — never merely because the declaration was parsed. Both families
below are named only from `:root[data-palette="editorial"]`, so a reader on slate,
warm or teal downloads neither and pays nothing for their existence. That is also
why neither is ed the way Inter is: Inter is on every page in
every palette and is worth discovering early, whereas preloading these two would
hand every reader a 213KB bill for a palette they may never select.
Self-hosted for the same reason Inter is — a font request to another origin is a
request this desk cannot see, cache or guarantee — even though the CSP would in
fact still permit fonts.gstatic.com. Both are SIL Open Font License 1.1; see
fonts/OFL.txt. Latin subset only, matching Inter's unicode-range exactly, and both
variable, so the whole weight range costs one file.
The editorial design draws headlines at weight 500 and labels at 600; the ranges
below cover both without a second file.
──────────────────────────────────────────────────────────────────────────── */
@font-face {
font-family: "Merriweather";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("../fonts/merriweather-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/jetbrains-mono-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ════════════════════════════════════════════════════════════════════════════
DESIGN TOKEN LAYER — four palettes × two modes, on two independent axes.
────────────────────────────────────────────────────────────────────────────
The file is laid out in four parts and nothing else may define a colour:
1. :root — STRUCTURAL only. Type, the radius scale, the motion system.
Nothing here varies by palette or mode.
2. Eight complete palette blocks, one per palette × mode. Each block defines
the SAME full token list; none omits a token and leans on inheritance,
because a missing token would silently inherit the previous palette's
value and no test would notice.
3. The no-attribute default (slate/dark) plus the prefers-color-scheme
light fallback for :root:not([data-theme]) — the no-JS first paint.
A palette block's specificity (0,3,0) beats these (0,1,0)/(0,2,0), so
source order between them does not matter.
4. The LEGACY ALIAS block, exactly once. Custom-property substitution
resolves at USE time, so `--panel: var(--surface)` automatically follows
whichever palette block won — which is why the aliases are declared once
rather than six times.
PALETTES
slate the original Pinstripe Ledger. Byte-for-byte what production shipped
before palettes existed — it is the reference, so it is not retuned.
⚠ It carries two known accessibility shortfalls that are DELIBERATELY
left in place: bull-vs-bear separates by only 1.17:1 (dark) / 1.008:1
(light) under deuteranopia against a 1.25 bar, and --text-faint runs
2.6–3.4:1 against a 4.5 bar.
warm brown/ochre-leaning charcoal and stone (dark) / oat paper (light),
copper-bronze accent. warn sits at a yellower gold than the accent so
"interactive" and "caution" stay distinguishable in a warm palette.
teal deep blue-green canvas and desaturated teal surfaces (dark) / pale
mint-grey (light), clear cyan-teal accent.
editorial the financial-press look: cool paper and white cards (light) /
ink-navy (dark), a saturated print blue, and the ONLY palette whose
up/down pair is the newsprint green-against-red rather than the
blue/terracotta the other three share. It is also the flattest — its
--shadow-1 is a 1px hairline drop, because this palette carries depth
with a rule rather than a glow, so a card here sits ON the page instead
of above it. Its greens and reds are far enough apart in LIGHTNESS that
the pair survives colour blindness (below); do not retune one leg
without re-running that check, since green/red is exactly the pair that
fails it by default.
warm, teal and editorial were not eyeballed. Every foreground is declared as an
intended hue/saturation/lightness and then VERIFIED: body text ≥7:1 on every surface it
appears on; secondary, muted, faint and every semantic text ≥4.5:1 against both
the plain surface AND its own tint composited over that surface; hairlines
visible but quieter than muted text; and bull-vs-bear separated by ≥1.25:1
under a Viénot deuteranopia projection AND by ≥8 L* — so up and down stay
distinct by lightness, not by hue alone. Measured worst cases at the time of
writing: warm/dark 4.51 · warm/light 4.56 · teal/dark 4.54 · teal/light 4.61 ·
editorial/dark 5.17 · editorial/light 4.59, body text 11.3–16.3:1 throughout.
Editorial's bull/bear text pair separates by 1.50:1 (dark) / 1.81:1 (light)
under deuteranopia at ΔL* 18.9 / 10.3 — the widest of the four, which is what
buys a green/red palette the right to exist here.
Hairlines keep the SAME alpha across palettes; only the RGB triplet swaps, via
--hairline-rgb. Borders are written as rgba(var(--hairline-rgb), ) so
they track the palette without a second token per alpha.
════════════════════════════════════════════════════════════════════════════ */
/* ── 1. STRUCTURAL — theme-invariant ──────────────────────────────────────── */
:root {
/* ---- type ----
TWO tokens, and the second is an alias of the first. This replaced a trio — Space
Grotesk for running text, IBM Plex Mono for every label and figure, Newsreader for
headlines — where the family itself carried meaning: serif said "editorial voice",
mono said "machine output".
That distinction is now carried by WEIGHT, SIZE, TRACKING and COLOUR instead. It has
to be, because there is only one family left to say it with.
`--font-display` is kept as a separate name even though it resolves to the same
stack, so the ~25 headline sites stay addressable: putting a display face back is
then one line here rather than a hunt through nine stylesheets. Today they are
identical and must stay identical.
The mono face was doing real work — aligning digits down the strength board, the
score columns, the countdown. That job moves to `font-variant-numeric: tabular-nums`
below, which is an OpenType feature of THIS font rather than a second family. */
--font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
--font-display: var(--font-sans);
/* The third role the page stylesheets already name for themselves (--cd-mono,
--pd-mono): the face figures and tracked-caps labels are set in. It resolves to
the sans here, which is what those files were doing by hand, so naming it changes
nothing for slate, warm or teal — it just gives the editorial palette one place
to answer differently. `font-variant-numeric: tabular-nums` below still does the
column-alignment work whichever family wins. */
--font-mono: var(--font-sans);
/* ---- radius scale ----
Nested surfaces step DOWN one rung: an --r-md panel holds --r-sm children.
A child radius equal to or larger than its parent's reads as a mistake, so
the rung is chosen by what a component CONTAINS, not by its own size.
Data-table CELLS stay square; only a table's outer frame rounds. Full-bleed
dividers, hairlines and the pinstripe never take a radius. */
/* Rungs taken from the design's own measured values rather than guessed: it
draws at 2-3px (marks), 5-7px (chips), 8-9px (buttons, inner panels) and
11-12px (cards), which is exactly this ladder. */
--r-xs: 3px; /* marks, meter fills, pips */
--r-sm: 7px; /* chips, tags, inline badges */
--r-md: 10px; /* buttons, inputs, inner panels */
--r-lg: 13px; /* cards */
--r-xl: 16px; /* section groups, the header bar */
--r-frame: 24px; /* the page shell and full-screen modals */
--r-pill: 999px; /* toggles, segmented controls, status pills only */
/* The vertical rhythm between a view's top-level cards. It is a TOKEN because
two files need to agree on it: the view stacks its real blocks with it, and
the skeleton stacks its placeholders with it. When only the view had it, the
skeleton sat flush and every page shifted by ~90px on the swap to data. */
--gap-stack: clamp(14px, 1.8vw, 22px);
/* Legacy aliases. They exist because ~130 call sites across the per-page
stylesheets were authored against `var(--r)` / `var(--r, 0)` before the scale
existed; renaming every one of them in a restyle would be a diff nobody could
review. They are kept so those call sites keep resolving, and they now point
AT the scale rather than at the old square geometry:
--r -> --r-md (the panel/card default the old sites mostly wanted)
--r-soft -> --r-xs (the chip/tag escape hatch it always meant)
New code names a rung directly; these two are for the legacy sites only. */
--r: var(--r-md);
--r-soft: var(--r-xs);
/* ---- motion system — the single source of timing ----
Every duration and easing in the app comes from here. A literal ms or
cubic-bezier() anywhere else is a bug: it puts one component on a clock
nothing else shares, and it is what makes a palette swap smear. */
--dur-instant: 0ms; /* palette/theme token swaps — never animated */
--dur-micro: 90ms; /* hover tint, focus ring, pip fill */
--dur-fast: 140ms; /* press, checkbox, chip select */
--dur-base: 220ms; /* element reveal, tab crossfade, tooltip */
--dur-slow: 320ms; /* panel expand/collapse, drawer, modal */
--dur-flash: 600ms; /* changed-value tint flash (fade-out only) */
--dur-shimmer: 1400ms; /* skeleton sweep cycle */
--dur-pulse: 1800ms; /* the live-feed dot's breath — slow enough to read
as a heartbeat rather than a blink, and the only
thing on the page that loops indefinitely */
--ease-out: cubic-bezier(.22,.61,.36,1); /* things arriving (default) */
--ease-in: cubic-bezier(.55,.06,.68,.19); /* things leaving */
--ease-inout: cubic-bezier(.45,.05,.55,.95); /* moving in place / height */
--ease-shimmer: ease-in-out; /* skeleton only */
/* Three delays the system needs by name. A tooltip opens late and closes
later still, so crossing between two adjacent triggers cannot strobe; an
incoming panel starts while the outgoing one is still leaving, which is a
short overlap rather than a hard cut. */
/* Every digit the same width, everywhere. This is what replaces the monospace face:
without it, Inter's proportional figures make a column of scores ragged and a ticking
countdown jitter as the numerals change width. It is INHERITED, so declaring it once
here covers the whole tree; the few places proportional figures genuinely read better
(digits inside running prose) can opt out locally. This is a data product — when in
doubt the column wins. */
font-variant-numeric: tabular-nums;
--delay-pop-open: 120ms;
--delay-pop-close: 60ms;
--delay-swap-overlap: 60ms;
--stagger-step: 40ms; /* per-child delay */
--stagger-max: 8; /* children past the 8th share the 8th delay */
}
/* ── 2. PALETTE BLOCKS — six complete sets ────────────────────────────────── */
/* slate/dark — Cool Slate at night. Slate-green canvas, the accent lifts to a pale blue. */
:root[data-palette="slate"][data-theme="dark"] {
/* canvas */
--app-bg: #1B2224;
--surface: #242D2F;
--surface-raised: #242D2F;
--surface-sunken: #262f31;
--surface-row-active: #2E3839;
--surface-kpi: #293234;
/* frame */
--hairline-rgb: 62,74,74;
--frame-border: rgba(62,74,74,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(62,74,74,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(62,74,74,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.55);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.55);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.62);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.70);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.70);
--scrim: rgba(0,0,0,.55);
/* text */
--text: #DCEDFF;
--text-2: #A9BFD8;
--text-muted: #A9BFD8;
--text-faint: #90a1ab;
--colhead: #90a1ab;
/* accent */
--accent: #94B0DA;
--on-accent: #242D2F;
--accent-edge: rgba(148,176,218,.42);
--diff-hi: rgba(148,176,218,.18);
--cell-hi: rgba(148,176,218,.16);
--seg-empty: rgba(62,74,74,.45);
/* semantic */
--bull-text: #c4d4f1;
--bull-tint: rgba(148,176,218,.15);
--bull-edge: rgba(148,176,218,.4);
--bull-dot: #94B0DA;
--bear-text: #daada1;
--bear-tint: rgba(201,139,127,.17);
--bear-edge: rgba(201,139,127,.44);
--bear-dot: #C98B7F;
--warn-text: #d0b386;
--warn-tint: rgba(196,167,110,.15);
--warn-edge: rgba(196,167,110,.42);
--warn-dot: #c4a76e;
--mixed-text: #c3a6e0;
--mixed-tint: rgba(167,110,196,.18);
--mixed-edge: rgba(167,110,196,.44);
--mixed-dot: #a76ec4;
--info-text: #a2b5de;
--info-tint: rgba(110,147,196,.16);
--info-edge: rgba(110,147,196,.42);
--info-dot: #6e93c4;
--risk-text: #d9ac98;
--risk-tint: rgba(196,142,110,.16);
--risk-edge: rgba(196,142,110,.42);
--risk-dot: #c48e6e;
--new-text: #7acab9;
--new-tint: rgba(110,196,179,.16);
--new-edge: rgba(110,196,179,.42);
--new-dot: #6ec4b3;
/* chart */
--candle-up: #94B0DA;
--candle-down: #C98B7F;
--chart-grid: rgba(62,74,74,.35);
--chart-rate1: #6E90C4;
--chart-rate2: #cf916e;
--bull-dot-rgb: 148,176,218;
--bear-dot-rgb: 201,139,127;
--live-rgb: 201,139,127;
/* identity */
--cat-1: #7398c9;
--cat-2: #73c97f;
--cat-3: #c9b273;
--cat-4: #ac73c9;
--cat-5: #c97673;
--cat-6: #73b8c9;
--cat-7: #c9739e;
--cat-8: #afc973;
--cat-9: #73c9b8;
--cat-10: #c973c9;
}
/* slate/light — Cool Slate. Pale blue ground, white cards, a mid-blue accent. */
:root[data-palette="slate"][data-theme="light"] {
/* canvas */
--app-bg: #F1F6FE;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-sunken: #f9fcff;
--surface-row-active: #DCEDFF;
--surface-kpi: #eef6ff;
/* frame */
--hairline-rgb: 203,220,243;
--frame-border: rgba(203,220,243,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(203,220,243,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(203,220,243,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.30);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.28);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.30);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.35);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.35);
--scrim: rgba(20,28,40,.34);
/* text */
--text: #343F3E;
--text-2: #505A5B;
--text-muted: #505A5B;
--text-faint: #5d6c76;
--colhead: #5d6c76;
/* accent */
--accent: #4C74AE;
--on-accent: #FFFFFF;
--accent-edge: rgba(76,116,174,.42);
--diff-hi: rgba(76,116,174,.18);
--cell-hi: rgba(76,116,174,.16);
--seg-empty: rgba(203,220,243,.45);
/* semantic */
--bull-text: #316184;
--bull-tint: rgba(62,110,158,.15);
--bull-edge: rgba(62,110,158,.4);
--bull-dot: #3E6E9E;
--bear-text: #633f36;
--bear-tint: rgba(176,115,106,.17);
--bear-edge: rgba(176,115,106,.44);
--bear-dot: #B0736A;
--warn-text: #79591e;
--warn-tint: rgba(163,126,51,.15);
--warn-edge: rgba(163,126,51,.42);
--warn-dot: #a37e33;
--mixed-text: #7e33a3;
--mixed-tint: rgba(126,51,163,.18);
--mixed-edge: rgba(126,51,163,.44);
--mixed-dot: #7e33a3;
--info-text: #2b5c93;
--info-tint: rgba(51,100,163,.16);
--info-edge: rgba(51,100,163,.42);
--info-dot: #3364a3;
--risk-text: #854d24;
--risk-tint: rgba(163,92,51,.16);
--risk-edge: rgba(163,92,51,.42);
--risk-dot: #a35c33;
--new-text: #1a6b56;
--new-tint: rgba(49,155,134,.16);
--new-edge: rgba(49,155,134,.42);
--new-dot: #319b86;
/* chart */
--candle-up: #3E6E9E;
--candle-down: #B0736A;
--chart-grid: rgba(203,220,243,.35);
--chart-rate1: #94B0DA;
--chart-rate2: #a15d36;
--bull-dot-rgb: 62,110,158;
--bear-dot-rgb: 176,115,106;
--live-rgb: 176,115,106;
/* identity */
--cat-1: #3364a3;
--cat-2: #30993e;
--cat-3: #a18433;
--cat-4: #7e33a3;
--cat-5: #a33733;
--cat-6: #338da3;
--cat-7: #a3336b;
--cat-8: #74912e;
--cat-9: #2f9581;
--cat-10: #a333a3;
}
/* warm/dark — Warm Ash at night. Near-black olive, the accent lifts to pale ash. */
:root[data-palette="warm"][data-theme="dark"] {
/* canvas */
--app-bg: #1D201C;
--surface: #262A25;
--surface-raised: #262A25;
--surface-sunken: #282c27;
--surface-row-active: #31352F;
--surface-kpi: #2c302a;
/* frame */
--hairline-rgb: 69,74,67;
--frame-border: rgba(69,74,67,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(69,74,67,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(69,74,67,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.55);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.55);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.62);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.70);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.70);
--scrim: rgba(0,0,0,.55);
/* text */
--text: #E0E2DB;
--text-2: #B8BDB5;
--text-muted: #B8BDB5;
--text-faint: #909e9e;
--colhead: #909e9e;
/* accent */
--accent: #B8BDB5;
--on-accent: #262A25;
--accent-edge: rgba(184,189,181,.42);
--diff-hi: rgba(184,189,181,.18);
--cell-hi: rgba(184,189,181,.16);
--seg-empty: rgba(69,74,67,.45);
/* semantic */
--bull-text: #cdd2ca;
--bull-tint: rgba(184,189,181,.15);
--bull-edge: rgba(184,189,181,.4);
--bull-dot: #B8BDB5;
--bear-text: #d4aea0;
--bear-tint: rgba(199,154,134,.17);
--bear-edge: rgba(199,154,134,.44);
--bear-dot: #C79A86;
--warn-text: #ceb182;
--warn-tint: rgba(196,167,110,.15);
--warn-edge: rgba(196,167,110,.42);
--warn-dot: #c4a76e;
--mixed-text: #c2a4df;
--mixed-tint: rgba(167,110,196,.18);
--mixed-edge: rgba(167,110,196,.44);
--mixed-dot: #a76ec4;
--info-text: #9eb1dc;
--info-tint: rgba(110,147,196,.16);
--info-edge: rgba(110,147,196,.42);
--info-dot: #6e93c4;
--risk-text: #d7a894;
--risk-tint: rgba(196,142,110,.16);
--risk-edge: rgba(196,142,110,.42);
--risk-dot: #c48e6e;
--new-text: #74c7b6;
--new-tint: rgba(110,196,179,.16);
--new-edge: rgba(110,196,179,.42);
--new-dot: #6ec4b3;
/* chart */
--candle-up: #B8BDB5;
--candle-down: #C79A86;
--chart-grid: rgba(69,74,67,.35);
--chart-rate1: #889696;
--chart-rate2: #cf916e;
--bull-dot-rgb: 184,189,181;
--bear-dot-rgb: 199,154,134;
--live-rgb: 199,154,134;
/* identity */
--cat-1: #7398c9;
--cat-2: #73c97f;
--cat-3: #c9b273;
--cat-4: #ac73c9;
--cat-5: #c97673;
--cat-6: #73b8c9;
--cat-7: #c9739e;
--cat-8: #afc973;
--cat-9: #73c9b8;
--cat-10: #c973c9;
}
/* warm/light — Warm Ash. Oat ground, bone cards, a grey-green accent. */
:root[data-palette="warm"][data-theme="light"] {
/* canvas */
--app-bg: #E9EBE3;
--surface: #F8F9F4;
--surface-raised: #F8F9F4;
--surface-sunken: #f4f5ef;
--surface-row-active: #DDDFD4;
--surface-kpi: #eaece4;
/* frame */
--hairline-rgb: 184,189,181;
--frame-border: rgba(184,189,181,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(184,189,181,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(184,189,181,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.30);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.28);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.30);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.35);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.35);
--scrim: rgba(20,28,40,.34);
/* text */
--text: #2C3432;
--text-2: #55605E;
--text-muted: #55605E;
--text-faint: #566568;
--colhead: #566568;
/* accent */
--accent: #4F6564;
--on-accent: #F8F9F4;
--accent-edge: rgba(79,101,100,.42);
--diff-hi: rgba(79,101,100,.18);
--cell-hi: rgba(79,101,100,.16);
--seg-empty: rgba(184,189,181,.45);
/* semantic */
--bull-text: #304444;
--bull-tint: rgba(79,101,100,.15);
--bull-edge: rgba(79,101,100,.4);
--bull-dot: #4F6564;
--bear-text: #645241;
--bear-tint: rgba(158,111,94,.17);
--bear-edge: rgba(158,111,94,.44);
--bear-dot: #9E6F5E;
--warn-text: #6f511b;
--warn-tint: rgba(161,124,51,.15);
--warn-edge: rgba(161,124,51,.42);
--warn-dot: #a17c33;
--mixed-text: #742d97;
--mixed-tint: rgba(126,51,163,.18);
--mixed-edge: rgba(126,51,163,.44);
--mixed-dot: #7e33a3;
--info-text: #255687;
--info-tint: rgba(51,100,163,.16);
--info-edge: rgba(51,100,163,.42);
--info-dot: #3364a3;
--risk-text: #7b481f;
--risk-tint: rgba(163,92,51,.16);
--risk-edge: rgba(163,92,51,.42);
--risk-dot: #a35c33;
--new-text: #18614d;
--new-tint: rgba(46,145,125,.16);
--new-edge: rgba(46,145,125,.42);
--new-dot: #2e917d;
/* chart */
--candle-up: #4F6564;
--candle-down: #9E6F5E;
--chart-grid: rgba(184,189,181,.35);
--chart-rate1: #889696;
--chart-rate2: #a15d36;
--bull-dot-rgb: 79,101,100;
--bear-dot-rgb: 158,111,94;
--live-rgb: 158,111,94;
/* identity */
--cat-1: #3364a3;
--cat-2: #2d8f3a;
--cat-3: #957a2f;
--cat-4: #7e33a3;
--cat-5: #a33733;
--cat-6: #32879d;
--cat-7: #a3336b;
--cat-8: #6a862a;
--cat-9: #2c8c78;
--cat-10: #a333a3;
}
/* teal/dark — Deep Teal at night. Deep blue-green, a bright cyan accent. */
:root[data-palette="teal"][data-theme="dark"] {
/* canvas */
--app-bg: #0C1D1F;
--surface: #122B2B;
--surface-raised: #122B2B;
--surface-sunken: #132d2e;
--surface-row-active: #183A3B;
--surface-kpi: #153233;
/* frame */
--hairline-rgb: 34,73,75;
--frame-border: rgba(34,73,75,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(34,73,75,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(34,73,75,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.55);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.55);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.62);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.70);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.70);
--scrim: rgba(0,0,0,.55);
/* text */
--text: #EAF3E5;
--text-2: #BFD7B5;
--text-muted: #BFD7B5;
--text-faint: #81a598;
--colhead: #81a598;
/* accent */
--accent: #12A8B8;
--on-accent: #122B2B;
--accent-edge: rgba(18,168,184,.42);
--diff-hi: rgba(18,168,184,.18);
--cell-hi: rgba(18,168,184,.16);
--seg-empty: rgba(34,73,75,.45);
/* semantic */
--bull-text: #12c4d4;
--bull-tint: rgba(18,168,184,.15);
--bull-edge: rgba(18,168,184,.4);
--bull-dot: #12A8B8;
--bear-text: #ebc2ab;
--bear-tint: rgba(226,149,95,.17);
--bear-edge: rgba(226,149,95,.44);
--bear-dot: #E2955F;
--warn-text: #ceb182;
--warn-tint: rgba(196,167,110,.15);
--warn-edge: rgba(196,167,110,.42);
--warn-dot: #c4a76e;
--mixed-text: #c2a4df;
--mixed-tint: rgba(167,110,196,.18);
--mixed-edge: rgba(167,110,196,.44);
--mixed-dot: #a76ec4;
--info-text: #a0b3dd;
--info-tint: rgba(110,147,196,.16);
--info-edge: rgba(110,147,196,.42);
--info-dot: #6e93c4;
--risk-text: #d7a894;
--risk-tint: rgba(196,142,110,.16);
--risk-edge: rgba(196,142,110,.42);
--risk-dot: #c48e6e;
--new-text: #78c9b8;
--new-tint: rgba(110,196,179,.16);
--new-edge: rgba(110,196,179,.42);
--new-dot: #6ec4b3;
/* chart */
--candle-up: #12A8B8;
--candle-down: #E2955F;
--chart-grid: rgba(34,73,75,.35);
--chart-rate1: #F7D2B5;
--chart-rate2: #cf916e;
--bull-dot-rgb: 18,168,184;
--bear-dot-rgb: 226,149,95;
--live-rgb: 226,149,95;
/* identity */
--cat-1: #7398c9;
--cat-2: #73c97f;
--cat-3: #c9b273;
--cat-4: #ac73c9;
--cat-5: #c97673;
--cat-6: #73b8c9;
--cat-7: #c9739e;
--cat-8: #afc973;
--cat-9: #73c9b8;
--cat-10: #c973c9;
}
/* teal/light — Deep Teal. Pale sage ground, white cards, a strong cyan accent. */
:root[data-palette="teal"][data-theme="light"] {
/* canvas */
--app-bg: #F3F7EF;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-sunken: #fbfcf9;
--surface-row-active: #E3EEDC;
--surface-kpi: #f1f6ee;
/* frame */
--hairline-rgb: 201,220,190;
--frame-border: rgba(201,220,190,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(201,220,190,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(201,220,190,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.30);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.28);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.30);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.35);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.35);
--scrim: rgba(20,28,40,.34);
/* text */
--text: #103A3D;
--text-2: #265E5F;
--text-muted: #265E5F;
--text-faint: #507066;
--colhead: #507066;
/* accent */
--accent: #028090;
--on-accent: #FFFFFF;
--accent-edge: rgba(2,128,144,.42);
--diff-hi: rgba(2,128,144,.18);
--cell-hi: rgba(2,128,144,.16);
--seg-empty: rgba(201,220,190,.45);
/* semantic */
--bull-text: #025253;
--bull-tint: rgba(2,128,144,.15);
--bull-edge: rgba(2,128,144,.4);
--bull-dot: #028090;
--bear-text: #894f21;
--bear-tint: rgba(206,116,64,.17);
--bear-edge: rgba(206,116,64,.44);
--bear-dot: #CE7440;
--warn-text: #79591e;
--warn-tint: rgba(163,126,51,.15);
--warn-edge: rgba(163,126,51,.42);
--warn-dot: #a37e33;
--mixed-text: #7e33a3;
--mixed-tint: rgba(126,51,163,.18);
--mixed-edge: rgba(126,51,163,.44);
--mixed-dot: #7e33a3;
--info-text: #2b5c93;
--info-tint: rgba(51,100,163,.16);
--info-edge: rgba(51,100,163,.42);
--info-dot: #3364a3;
--risk-text: #854d24;
--risk-tint: rgba(163,92,51,.16);
--risk-edge: rgba(163,92,51,.42);
--risk-dot: #a35c33;
--new-text: #1a6954;
--new-tint: rgba(49,155,134,.16);
--new-edge: rgba(49,155,134,.42);
--new-dot: #319b86;
/* chart */
--candle-up: #028090;
--candle-down: #CE7440;
--chart-grid: rgba(201,220,190,.35);
--chart-rate1: #1A5E63;
--chart-rate2: #a15d36;
--bull-dot-rgb: 2,128,144;
--bear-dot-rgb: 206,116,64;
--live-rgb: 206,116,64;
/* identity */
--cat-1: #3364a3;
--cat-2: #30993e;
--cat-3: #9f8232;
--cat-4: #7e33a3;
--cat-5: #a33733;
--cat-6: #338da3;
--cat-7: #a3336b;
--cat-8: #74912e;
--cat-9: #2f9581;
--cat-10: #a333a3;
}
/* editorial/dark — Editorial at night. Ink-navy ground, the accent lifts to a bright sky
blue, and up/down are the newsprint pair (emerald against rose) rather than the
blue/terracotta the other three use. */
:root[data-palette="editorial"][data-theme="dark"] {
/* canvas */
--app-bg: #0B1120;
--surface: #0D1528;
--surface-raised: #0D1528;
--surface-sunken: #141F38;
--surface-row-active: #141F38;
--surface-kpi: #141F38;
/* frame */
--hairline-rgb: 44,57,75;
--frame-border: rgba(44,57,75,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(44,57,75,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(44,57,75,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 2px 8px -2px rgba(0,0,0,.55);
--shadow-1: 0 1px 2px rgba(0,0,0,.45);
--shadow-2: 0 2px 6px -1px rgba(0,0,0,.50);
--modal-shadow: 0 12px 34px -14px rgba(0,0,0,.72);
--drawer-shadow: -12px 0 34px -14px rgba(0,0,0,.72);
--scrim: rgba(6,11,22,.62);
/* text */
--text: #F8FAFC;
--text-2: #CBD5E1;
--text-muted: #CBD5E1;
--text-faint: #94A3B8;
--colhead: #94A3B8;
/* accent */
--accent: #35A5FF;
--on-accent: #0B1120;
--accent-edge: rgba(53,165,255,.42);
--diff-hi: rgba(53,165,255,.18);
--cell-hi: rgba(53,165,255,.16);
--seg-empty: rgba(44,57,75,.45);
/* semantic */
--bull-text: #6EE7B7;
--bull-tint: rgba(52,211,153,.15);
--bull-edge: rgba(52,211,153,.4);
--bull-dot: #34D399;
--bear-text: #FB7185;
--bear-tint: rgba(244,63,94,.17);
--bear-edge: rgba(244,63,94,.44);
--bear-dot: #F43F5E;
--warn-text: #FCD34D;
--warn-tint: rgba(251,191,36,.15);
--warn-edge: rgba(251,191,36,.42);
--warn-dot: #FBBF24;
--mixed-text: #C4B5FD;
--mixed-tint: rgba(167,139,250,.18);
--mixed-edge: rgba(167,139,250,.44);
--mixed-dot: #A78BFA;
--info-text: #7DD3FC;
--info-tint: rgba(56,189,248,.16);
--info-edge: rgba(56,189,248,.42);
--info-dot: #38BDF8;
--risk-text: #FDBA74;
--risk-tint: rgba(251,146,60,.16);
--risk-edge: rgba(251,146,60,.42);
--risk-dot: #FB923C;
--new-text: #5EEAD4;
--new-tint: rgba(45,212,191,.16);
--new-edge: rgba(45,212,191,.42);
--new-dot: #2DD4BF;
/* chart */
--candle-up: #34D399;
--candle-down: #F43F5E;
--chart-grid: rgba(44,57,75,.35);
--chart-rate1: #018DFF;
--chart-rate2: #FB923C;
--bull-dot-rgb: 52,211,153;
--bear-dot-rgb: 244,63,94;
--live-rgb: 244,63,94;
/* identity */
--cat-1: #60A5FA;
--cat-2: #4ADE80;
--cat-3: #FBBF24;
--cat-4: #A78BFA;
--cat-5: #FB7185;
--cat-6: #22D3EE;
--cat-7: #F472B6;
--cat-8: #A3E635;
--cat-9: #2DD4BF;
--cat-10: #E879F9;
}
/* editorial/light — Editorial. Cool paper, white cards, a saturated print blue, and the
flattest shadow of the four: this palette carries depth with a hairline, not a glow. */
:root[data-palette="editorial"][data-theme="light"] {
/* canvas */
--app-bg: #F8FAFC;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-sunken: #F1F5F9;
--surface-row-active: #F1F5F9;
--surface-kpi: #F1F5F9;
/* frame */
--hairline-rgb: 206,216,229;
--frame-border: rgba(206,216,229,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(206,216,229,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(206,216,229,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 2px 8px -2px rgba(11,17,32,.16);
--shadow-1: 0 1px 2px rgba(11,17,32,.06),0 1px 1px rgba(11,17,32,.04);
--shadow-2: 0 2px 6px -1px rgba(11,17,32,.10),0 1px 2px rgba(11,17,32,.06);
--modal-shadow: 0 12px 34px -14px rgba(11,17,32,.24);
--drawer-shadow: -12px 0 34px -14px rgba(11,17,32,.24);
--scrim: rgba(11,17,32,.34);
/* text */
--text: #0F172A;
--text-2: #334155;
--text-muted: #334155;
--text-faint: #5D6B7E;
--colhead: #5D6B7E;
/* accent */
--accent: #0066CC;
--on-accent: #FFFFFF;
--accent-edge: rgba(0,102,204,.42);
--diff-hi: rgba(0,102,204,.18);
--cell-hi: rgba(0,102,204,.16);
--seg-empty: rgba(206,216,229,.45);
/* semantic */
--bull-text: #14532D;
--bull-tint: rgba(22,101,52,.15);
--bull-edge: rgba(22,101,52,.4);
--bull-dot: #166534;
--bear-text: #C21100;
--bear-tint: rgba(227,20,0,.13);
--bear-edge: rgba(227,20,0,.44);
--bear-dot: #E31400;
--warn-text: #92400E;
--warn-tint: rgba(180,83,9,.15);
--warn-edge: rgba(180,83,9,.42);
--warn-dot: #B45309;
--mixed-text: #6D28D9;
--mixed-tint: rgba(109,40,217,.16);
--mixed-edge: rgba(109,40,217,.44);
--mixed-dot: #6D28D9;
--info-text: #075985;
--info-tint: rgba(3,105,161,.16);
--info-edge: rgba(3,105,161,.42);
--info-dot: #0369A1;
--risk-text: #9A3412;
--risk-tint: rgba(194,65,12,.16);
--risk-edge: rgba(194,65,12,.42);
--risk-dot: #C2410C;
--new-text: #0F5A55;
--new-tint: rgba(15,118,110,.16);
--new-edge: rgba(15,118,110,.42);
--new-dot: #0F766E;
/* chart */
--candle-up: #166534;
--candle-down: #E31400;
--chart-grid: rgba(206,216,229,.35);
--chart-rate1: #018DFF;
--chart-rate2: #C2410C;
--bull-dot-rgb: 22,101,52;
--bear-dot-rgb: 227,20,0;
--live-rgb: 227,20,0;
/* identity */
--cat-1: #2563EB;
--cat-2: #16A34A;
--cat-3: #A16207;
--cat-4: #7C3AED;
--cat-5: #E11D48;
--cat-6: #0891B2;
--cat-7: #DB2777;
--cat-8: #65A30D;
--cat-9: #0D9488;
--cat-10: #C026D3;
}
/* ── 2b. THE EDITORIAL SUPPLEMENT — type and masthead ────────────────────────
Two things Editorial carries that a colour block cannot say, both keyed on the
PALETTE alone because neither varies by light/dark.
TYPE. The other three palettes are Inter throughout: one family, with weight,
size, tracking and colour carrying the distinctions a second family used to.
Editorial is the palette that puts the families back, because that IS the look —
a Merriweather headline over tracked JetBrains Mono labels is what makes it read
as a printed page rather than a terminal. Naming them here rather than in :root
keeps the other three byte-identical and keeps both downloads opt-in.
MASTHEAD. Editorial's signature move is a dark band at the top of the page in
BOTH modes — white headline on ink navy even when the rest of the page is paper.
The tokens below describe that band; the desks apply them to the hero they
already lay out. They are deliberately NOT given :root defaults: a default of
`--hero-text: var(--text)` would form a reference cycle the moment the hero
rebinds `--text: var(--hero-text)`, and a cycle makes BOTH properties invalid
rather than falling back. So the rebinding rules are palette-scoped instead, and
the other three palettes never see them.
These are supplementary rules, not palette blocks: part 2's eight blocks each
define the same canvas token list and are identified by carrying --app-bg.
──────────────────────────────────────────────────────────────────────────── */
:root[data-palette="editorial"] {
/* type */
--font-display: "Merriweather", Georgia, "Times New Roman", serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* masthead — mode-invariant half */
--hero-text: #FFFFFF;
--hero-text-2: #CBD5E1;
--hero-text-3: #94A3B8;
--hero-line: #1E293B;
--hero-panel: #0D1528;
--hero-accent: #35A5FF;
--hero-bull: #34D399;
--hero-bear: #FB7185;
/* the band bleeds back out through the page padding it sits inside, which on
both desks is 36px 40px — hence exactly these three numbers. */
--hero-pad: 40px 40px 44px;
--hero-bleed-y: -36px;
--hero-bleed-x: -40px;
/* light-mode ground: the band is darker than the page, which is the whole point */
--hero-bg: #0B1120;
--hero-panel-2: #101A31;
}
/* In dark mode the band has to go DARKER than an already-dark page or it stops
reading as a band at all. */
:root[data-palette="editorial"][data-theme="dark"] {
--hero-bg: #060B16;
--hero-panel-2: #141F38;
}
/* ── 3. DEFAULTS — no attributes at all (no-JS, or a pre-paint fault) ──────── */
/* slate/dark, matching part 2 value-for-value. The pre-paint script in
index.html normally stamps both attributes before the stylesheet is read, so
this is the safety net rather than the usual path. */
:root {
--app-bg: #1B2224;
--surface: #242D2F;
--surface-raised: #242D2F;
--surface-sunken: #262f31;
--surface-row-active: #2E3839;
--surface-kpi: #293234;
--hairline-rgb: 62,74,74;
--frame-border: rgba(62,74,74,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(62,74,74,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(62,74,74,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.55);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.55);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.62);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.70);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.70);
--scrim: rgba(0,0,0,.55);
--text: #DCEDFF;
--text-2: #A9BFD8;
--text-muted: #A9BFD8;
--text-faint: #90a1ab;
--colhead: #90a1ab;
--accent: #94B0DA;
--on-accent: #242D2F;
--accent-edge: rgba(148,176,218,.42);
--diff-hi: rgba(148,176,218,.18);
--cell-hi: rgba(148,176,218,.16);
--seg-empty: rgba(62,74,74,.45);
--bull-text: #c4d4f1;
--bull-tint: rgba(148,176,218,.15);
--bull-edge: rgba(148,176,218,.4);
--bull-dot: #94B0DA;
--bear-text: #daada1;
--bear-tint: rgba(201,139,127,.17);
--bear-edge: rgba(201,139,127,.44);
--bear-dot: #C98B7F;
--warn-text: #d0b386;
--warn-tint: rgba(196,167,110,.15);
--warn-edge: rgba(196,167,110,.42);
--warn-dot: #c4a76e;
--mixed-text: #c3a6e0;
--mixed-tint: rgba(167,110,196,.18);
--mixed-edge: rgba(167,110,196,.44);
--mixed-dot: #a76ec4;
--info-text: #a2b5de;
--info-tint: rgba(110,147,196,.16);
--info-edge: rgba(110,147,196,.42);
--info-dot: #6e93c4;
--risk-text: #d9ac98;
--risk-tint: rgba(196,142,110,.16);
--risk-edge: rgba(196,142,110,.42);
--risk-dot: #c48e6e;
--new-text: #7acab9;
--new-tint: rgba(110,196,179,.16);
--new-edge: rgba(110,196,179,.42);
--new-dot: #6ec4b3;
--candle-up: #94B0DA;
--candle-down: #C98B7F;
--chart-grid: rgba(62,74,74,.35);
--chart-rate1: #6E90C4;
--chart-rate2: #cf916e;
--bull-dot-rgb: 148,176,218;
--bear-dot-rgb: 201,139,127;
--live-rgb: 201,139,127;
--cat-1: #7398c9;
--cat-2: #73c97f;
--cat-3: #c9b273;
--cat-4: #ac73c9;
--cat-5: #c97673;
--cat-6: #73b8c9;
--cat-7: #c9739e;
--cat-8: #afc973;
--cat-9: #73c9b8;
--cat-10: #c973c9;
}
/* Honour the OS preference when the reader has made no explicit choice. Scoped
to :root:not([data-theme]) so it can never fight an attribute that IS set. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--app-bg: #F1F6FE;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-sunken: #f9fcff;
--surface-row-active: #DCEDFF;
--surface-kpi: #eef6ff;
--hairline-rgb: 203,220,243;
--frame-border: rgba(203,220,243,.55);
--header-grad: linear-gradient(var(--surface-raised),var(--surface));
--header-rule: 1px solid rgba(203,220,243,.55);
--pinstripe: repeating-linear-gradient(90deg,rgba(203,220,243,.28) 0 1px,transparent 1px 7px);
--tooltip-shadow: 0 12px 30px -18px rgba(0,0,0,.30);
--shadow-1: 0 6px 18px -12px rgba(0,0,0,.28);
--shadow-2: 0 12px 30px -18px rgba(0,0,0,.30);
--modal-shadow: 0 30px 80px -40px rgba(0,0,0,.35);
--drawer-shadow: -30px 0 80px -40px rgba(0,0,0,.35);
--scrim: rgba(20,28,40,.34);
--text: #343F3E;
--text-2: #505A5B;
--text-muted: #505A5B;
--text-faint: #5d6c76;
--colhead: #5d6c76;
--accent: #4C74AE;
--on-accent: #FFFFFF;
--accent-edge: rgba(76,116,174,.42);
--diff-hi: rgba(76,116,174,.18);
--cell-hi: rgba(76,116,174,.16);
--seg-empty: rgba(203,220,243,.45);
--bull-text: #316184;
--bull-tint: rgba(62,110,158,.15);
--bull-edge: rgba(62,110,158,.4);
--bull-dot: #3E6E9E;
--bear-text: #633f36;
--bear-tint: rgba(176,115,106,.17);
--bear-edge: rgba(176,115,106,.44);
--bear-dot: #B0736A;
--warn-text: #79591e;
--warn-tint: rgba(163,126,51,.15);
--warn-edge: rgba(163,126,51,.42);
--warn-dot: #a37e33;
--mixed-text: #7e33a3;
--mixed-tint: rgba(126,51,163,.18);
--mixed-edge: rgba(126,51,163,.44);
--mixed-dot: #7e33a3;
--info-text: #2b5c93;
--info-tint: rgba(51,100,163,.16);
--info-edge: rgba(51,100,163,.42);
--info-dot: #3364a3;
--risk-text: #854d24;
--risk-tint: rgba(163,92,51,.16);
--risk-edge: rgba(163,92,51,.42);
--risk-dot: #a35c33;
--new-text: #1a6b56;
--new-tint: rgba(49,155,134,.16);
--new-edge: rgba(49,155,134,.42);
--new-dot: #319b86;
--candle-up: #3E6E9E;
--candle-down: #B0736A;
--chart-grid: rgba(203,220,243,.35);
--chart-rate1: #94B0DA;
--chart-rate2: #a15d36;
--bull-dot-rgb: 62,110,158;
--bear-dot-rgb: 176,115,106;
--live-rgb: 176,115,106;
--cat-1: #3364a3;
--cat-2: #30993e;
--cat-3: #a18433;
--cat-4: #7e33a3;
--cat-5: #a33733;
--cat-6: #338da3;
--cat-7: #a3336b;
--cat-8: #74912e;
--cat-9: #2f9581;
--cat-10: #a333a3;
}
}
/* ── The palette switcher's swatch previews ───────────────────────────────────
Each swatch must show a palette OTHER than the active one, so it cannot read
var(--app-bg) — that resolves to whichever palette is live. These are the four
palettes' own ground and accent, and they vary by MODE only, which is why they
are declared once per mode rather than eight times.
The GROUND is previewed rather than the card: this design's cards are white or
near-white in all four light palettes, so a card-based swatch gave four chips
nobody could tell apart. Keep these in step with the palette blocks above — a
preview that has drifted is worse than no preview. */
:root {
--sw-slate-bg: #1B2224; --sw-slate-fg: #94B0DA;
--sw-warm-bg: #1D201C; --sw-warm-fg: #B8BDB5;
--sw-teal-bg: #0C1D1F; --sw-teal-fg: #12A8B8;
--sw-editorial-bg: #0B1120; --sw-editorial-fg: #35A5FF;
}
:root[data-theme="light"] {
--sw-slate-bg: #F1F6FE; --sw-slate-fg: #4C74AE;
--sw-warm-bg: #E9EBE3; --sw-warm-fg: #4F6564;
--sw-teal-bg: #F3F7EF; --sw-teal-fg: #028090;
--sw-editorial-bg: #F8FAFC; --sw-editorial-fg: #0066CC;
}
/* ── 4. LEGACY ALIASES — declared ONCE; they follow whichever palette won ──── */
/* --line / --line2 carry a much higher alpha than they used to. The palette this
replaces drew hairlines as a CONTRASTING triplet at .12 (light lines on a dark
ground); this design ships a solid line colour meant to be used near full
strength, so the old alphas rendered it invisible — 1.04:1 against the card. */
:root {
--bg: var(--surface);
--bg2: var(--surface-raised);
--panel: var(--surface);
--panel2: var(--surface-row-active);
--line: rgba(var(--hairline-rgb), .55);
--line2: rgba(var(--hairline-rgb), .80);
--txt: var(--text);
--muted: var(--text-muted);
--faint: var(--text-faint);
--grn: var(--bull-text); --grn-dim: var(--bull-dot); --grn-soft-fg: var(--bull-text); --grn-bg: var(--bull-tint);
--red: var(--bear-text); --red-dim: var(--bear-dot); --red-soft-fg: var(--bear-text); --red-bg: var(--bear-tint);
--amber: var(--warn-text); --amber-dim: var(--warn-dot);
--vio: var(--mixed-text); --vio-dim: var(--mixed-dot);
--accent-dim: var(--diff-hi);
/* Banner = info (amber/warn family); Warn = alert (bear/red family). */
--banner-bg: var(--warn-tint); --banner-border: var(--warn-edge); --banner-fg: var(--warn-text);
--warn-bg: var(--bear-tint); --warn-border: var(--bear-edge); --warn-fg: var(--bear-text);
--login-grad: var(--surface-raised);
--frame-shadow: var(--shadow-2);
}
*, *::before, *::after { box-sizing: border-box; }
/* A view being switched TO. selectView writes `hidden` on every section, so an
incoming view is just a section losing that attribute -- enough to trigger an
animation with no JS at all. Gated on data-revealed="1", which the staged
reveal sets once a view has had its first entrance: on first paint the reveal
owns the sequence, and running both would fade the container while its own
children were still staggering inside it. */
/* `backwards`, NOT `both`. With `both` the view keeps the animation's final
keyframe applied for ever, and a keyframed `transform: none` computes to the
identity matrix rather than releasing the property. A non-`none` transform --
even the identity -- makes the element a containing block for every
`position: fixed` descendant, so the pair drawer's `top: 0; bottom: 0` resolved
against the whole scrolling view instead of the viewport: open it from a
section near the foot of the page and it appeared a screen and a half ABOVE the
fold, stretched to the full height of the document. `backwards` still applies
the first keyframe before the animation starts, so the entrance is unchanged;
it just lets go afterwards. This is view-wide on purpose -- every page's
drawers and modals live inside a `.view` and had the same latent bug. */
.view[data-revealed="1"]:not([hidden]) {
animation: g10-view-in var(--dur-base) var(--ease-out) backwards;
}
@keyframes g10-view-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.view[data-revealed="1"]:not([hidden]) {
animation: g10-view-fade var(--dur-fast) linear backwards;
}
@keyframes g10-view-fade { from { opacity: 0; } to { opacity: 1; } }
}
[hidden] { display: none !important; }
html, body {
margin: 0; padding: 0;
background: var(--app-bg); /* warm-grey canvas behind the card frame */
color: var(--txt);
font: 14px/1.6 var(--font-mono);
/* AFTER the shorthand on purpose -- `font:` resets font-variant-numeric to normal, so
declaring it before this line would be silently undone. See the [class][class] rule
below for the other half. */
font-variant-numeric: tabular-nums;
/* Inter at these sizes is noticeably heavy without smoothing on both engines; the
Firefox/macOS half was missing, so the same text rendered darker there. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Tabular figures, for real. The :root and body declarations above cover everything that
inherits; this covers everything that does NOT, because its own rule sets type with the
`font:` shorthand and so resets the feature. (0,2,0) beats the single-class rules that
do that, in any stylesheet, in any load order. */
[class][class] { font-variant-numeric: tabular-nums; }
button { font: inherit; cursor: pointer; }
/* Form controls do not inherit type from the document -- they take a UA default, which is
how a select on Standing and one hidden input were still rendering in Arial while every
other glyph on the page was not. FAMILY only, deliberately: `font: inherit` would pull
the size across too and move the boxes, and this pass is not allowed to change layout.
`option` is listed because the native popup list is a separate rendering surface. */
input, select, textarea, optgroup, option { font-family: inherit; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--font-sans); font-size: 12px; }
/* ── Login / landing masthead ────────────────────────────────────────────── */
/* Full-bleed pinstripe canvas (same warm-grey / navy as the app gutters); the
hero content floats centred with no card frame (design landing). */
.login {
position: fixed; inset: 0; overflow: auto;
display: grid; place-items: center;
background: var(--app-bg); padding: 40px 20px;
}
.login::before {
content: ""; position: fixed; inset: 0; z-index: 0;
background-image: var(--pinstripe); pointer-events: none;
}
.login-hero { position: relative; z-index: 1; width: 400px; max-width: 100%; text-align: center; }
/* Pre-login theme toggle — borderless ☾/☀, pinned top-right of the canvas. */
.login-theme-switch { position: fixed; top: 16px; right: 20px; z-index: 3; }
/* Masthead wordmark. The wide POSITIVE tracking is deliberate and survives the move to
one family: this is a logotype, not running text, and its letterspacing is what makes
it read as a mark. It is the one place on the page where large type carries positive
tracking. */
.login-brand {
font: 600 30px/1 var(--font-display); letter-spacing: .22em;
color: var(--text); margin-left: .22em; /* optical-centre the tracked caps */
}
.login-sub {
margin-top: 9px; font: 600 10px/1 var(--font-mono); letter-spacing: .34em;
text-transform: uppercase; color: var(--colhead);
}
.login-tagline {
margin: 20px auto 0; max-width: 360px;
font: 400 13px/1.55 var(--font-sans); color: var(--text-muted);
}
/* Feature grid — 4 hairline-bordered cells (KPI-strip aesthetic). */
.login-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
margin: 22px 0 0; background: rgba(var(--hairline-rgb), .18);
border: 1px solid rgba(var(--hairline-rgb), .55);
}
.login-feat { background: var(--surface); padding: 11px 8px; }
.login-feat-l { font: 600 11.5px/1.2 var(--font-sans); color: var(--text); }
.login-feat-s { margin-top: 4px; font: 400 9px/1.3 var(--font-sans); color: var(--text-muted); }
/* Sign-in — navy cosmetic button with the real (transparent) GIS button on top
receiving the clicks. */
.login-google { position: relative; width: 100%; height: 46px; margin: 22px 0 0; }
.login-google-btn {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
gap: 10px; background: var(--accent); color: var(--on-accent);
border: 0; border-radius: var(--r-sm); pointer-events: none;
font: 600 13px/1 var(--font-sans); letter-spacing: .01em;
}
.login-google-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: var(--on-accent); color: var(--accent); font: 700 11px/1 var(--font-display);
}
.login-google-gis { position: absolute; inset: 0; opacity: 0; z-index: 2; }
.login-google-gis > div, .login-google-gis iframe { width: 100% !important; }
.login-foot { margin: 14px 0 0; font: 11px/1.5 var(--font-sans); color: var(--text-faint); }
.login-error { color: var(--red); margin: 12px 0 0; font-size: 13px; }
/* ── Shell ─────────────────────────────────────────────────────────────────── */
/* Widened 1100 → 1520 → 1800 so both tables read like a wide institutional
scoreboard: currency rows (Last Changed + What Changed columns) and the
pairs view get a generous Summary; the +3-card currencies sidebar still
leaves the list column wide on a 1920 screen (1800 + 48 pad = 1848). */
/* The whole terminal is a bordered card floating on the warm-grey canvas
(matches the design frame: 1px hairline + soft shadow, square corners). The
header is full-bleed inside it via a negative inline margin. */
/* Content is centred at a comfortable max-width (no ultra-wide stretch); the
page background is the surface colour so there are no empty margins around it. */
#app {
max-width: 1800px; margin: 0 auto; padding: 0 22px 40px;
background: var(--surface);
border: 1px solid var(--frame-border); box-shadow: var(--frame-shadow);
min-height: 100vh;
}
.topbar {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; gap: 18px;
height: 50px; margin: 0 -22px; padding: 0 22px;
background: var(--header-grad);
border-bottom: var(--header-rule); /* dark: 1px hairline · light: 3px double broadsheet rule */
}
/* Header pinstripe overlay (subtle vertical hairlines every 7px) sits behind
the header content. */
.topbar::before {
content: ""; position: absolute; inset: 0;
background-image: var(--pinstripe);
pointer-events: none; z-index: 0;
}
.topbar > * { position: relative; z-index: 1; }
/* Wordmark; "Thesis Evolution" is the muted subtitle beside it. */
.brand {
font: 600 14px/1 var(--font-display); letter-spacing: .16em;
color: var(--text); white-space: nowrap;
}
/* "Thesis Evolution" subtitle — a separate header child (design spacing via the
topbar's gap:18px), plain colhead-grey sans (no serif, no leading bullet);
--colhead (#8e99b0) byte-matches the design subtitle. */
.brand-sub {
font: 400 12px/1 var(--font-sans); letter-spacing: normal; color: var(--colhead);
white-space: nowrap;
}
/* Nav — sits LEFT, right after the wordmark + subtitle (design header);
underline-on-active (no pills). The ☾/Log-out group is pushed right by
.theme-toggle's margin-left:auto below. */
.tabs { display: flex; gap: 20px; margin-left: 14px; align-items: center; }
.tab {
background: transparent; border: 0;
border-bottom: 2px solid transparent; border-radius: 0; /* underline tab: the 2px bottom rule IS the control, nothing to round */
color: var(--text-muted); padding: 5px 1px;
font: 500 12.5px/1 var(--font-sans);
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab:hover:not(.active) { color: var(--text); }
/* ── Grouped nav (dropdowns) ─────────────────────────────────────────────────
A `.navgroup` bundles related tabs behind a trigger that matches .tab
typography. The menu opens on HOVER (desktop) or on click/Enter (touch +
keyboard, via js/nav.js). js/nav.js hides a group whose child tabs are all
ungranted and mirrors the active child's underline onto the trigger.
On mobile the groups FLATTEN (display:contents) back into the single
scrollable tab strip, so touch users keep today's flat nav. */
.navgroup { position: relative; display: inline-flex; align-items: center; }
.navgroup[hidden] { display: none; }
.navgroup-btn {
background: transparent; border: 0;
border-bottom: 2px solid transparent; border-radius: 0; /* underline tab, as .tab above */
color: var(--text-muted); padding: 5px 1px; cursor: pointer;
display: inline-flex; align-items: center; gap: 4px;
font: 500 12.5px/1 var(--font-sans);
transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.navgroup-btn:hover, .navgroup:hover .navgroup-btn { color: var(--text); }
.navgroup-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.navgroup-caret { font-size: 9px; line-height: 1; opacity: .65; }
.navgroup-menu {
position: absolute; top: 100%; left: -8px; z-index: 50;
display: none; flex-direction: column; min-width: 176px;
padding: 6px; margin-top: 7px; gap: 2px;
background: var(--surface-raised); border: 1px solid rgba(var(--hairline-rgb), .80);
border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
/* Invisible hover bridge across the trigger→menu gap so the menu doesn't close
when the cursor crosses the 7px margin. */
.navgroup-menu::before {
content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px;
}
.navgroup:hover .navgroup-menu, .navgroup.open .navgroup-menu { display: flex; }
.navgroup-menu .tab {
border-bottom: 0; padding: 7px 10px; text-align: left; white-space: nowrap;
border-radius: var(--r-sm); /* inset 6px inside the --r-md menu, so it steps down a rung */
}
.navgroup-menu .tab:hover:not(.active) {
color: var(--text); background: var(--surface-sunken);
}
.navgroup-menu .tab.active {
color: var(--text); border-bottom: 0; background: rgba(var(--hairline-rgb), .18);
}
.navgroup-menu .tab[hidden] { display: none; }
.ghost {
background: transparent; border: 1px solid rgba(var(--hairline-rgb), .80);
color: var(--text-muted); border-radius: var(--r-sm); padding: 5px 11px;
font: 500 12px/1 var(--font-sans);
transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.ghost:hover { color: var(--text); border-color: rgba(var(--hairline-rgb), 1); }
/* ☾ + Log-out group — borderless plain-text spans, pushed to the far right,
14px apart (design header). */
.topbar-actions {
margin-left: auto; display: flex; align-items: center; gap: 14px;
}
/* ── Palette switcher ─────────────────────────────────────────────────────────
Three swatches showing each palette's own surface + accent, then the existing
sun/moon. The active ring is drawn on the GROUP, not on each swatch, so it can
slide between them (a ring that disappears and reappears reads as two events).
Sized to the header's existing 12px/1 density — no row-height change. */
.theme-switch {
position: relative; display: inline-flex; align-items: center; gap: 6px;
padding: 3px; border-radius: var(--r-pill);
border: 1px solid rgba(var(--hairline-rgb), .55);
}
.theme-switch::before {
/* the sliding active ring; --pal-i is set by app.js (0|1|2) */
content: ""; position: absolute; top: 3px; left: 3px;
width: 16px; height: 16px; border-radius: 50%;
box-shadow: 0 0 0 1.5px var(--accent);
transform: translateX(calc(var(--pal-i, 0) * 22px));
transition: transform var(--dur-fast) var(--ease-inout);
pointer-events: none;
}
.pal-swatch {
background: transparent; border: 0; padding: 0; cursor: pointer;
width: 16px; height: 16px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.pal-swatch-i {
width: 14px; height: 14px; border-radius: 50%;
border: 1px solid rgba(var(--hairline-rgb), .80);
/* half the palette's surface, half its accent — the swatch IS the palette */
transition: border-color var(--dur-micro) var(--ease-out);
}
.pal-swatch:hover .pal-swatch-i { border-color: rgba(var(--hairline-rgb), .44); }
.pal-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Each swatch previews ITS palette, not the active one, so the choice is legible
before it is made. Values are the palettes' own --surface / --accent. */
.pal-swatch-i {
background: linear-gradient(135deg,
var(--sw-surface) 0 50%, var(--sw-accent) 50% 100%);
}
[data-palette-set="slate"] .pal-swatch-i { --sw-surface: var(--sw-slate-bg); --sw-accent: var(--sw-slate-fg); }
[data-palette-set="warm"] .pal-swatch-i { --sw-surface: var(--sw-warm-bg); --sw-accent: var(--sw-warm-fg); }
[data-palette-set="teal"] .pal-swatch-i { --sw-surface: var(--sw-teal-bg); --sw-accent: var(--sw-teal-fg); }
[data-palette-set="editorial"] .pal-swatch-i { --sw-surface: var(--sw-editorial-bg); --sw-accent: var(--sw-editorial-fg); }
/* Screen-reader-only label for each swatch (the visual is the colour itself). */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* A palette swap must be INSTANT. A 200ms colour interpolation across a whole
terminal reads as a fault, and every frame in between belongs to neither
palette. app.js sets this attribute for exactly one frame around the swap,
which also stops in-flight hover/tint transitions from finishing in the wrong
palette. */
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
transition: none !important;
animation-duration: var(--dur-instant) !important;
}
/* Theme toggle — icon-only, borderless; swaps glyph via ::before per theme. */
.theme-toggle {
background: transparent; border: 0; border-radius: var(--r-sm); padding: 0;
display: inline-flex; align-items: center; cursor: pointer;
font: 12px/1 var(--font-sans); color: var(--colhead);
transition: color var(--dur-micro) var(--ease-out);
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .theme-toggle-i {
display: inline-block;
transition: opacity var(--dur-fast) var(--ease-out);
}
/* Log out — borderless plain sans text, design colour. */
.logout-btn {
background: transparent; border: 0; border-radius: var(--r-sm); padding: 0;
cursor: pointer; font: 12px/1 var(--font-sans); color: var(--colhead);
transition: color var(--dur-micro) var(--ease-out);
}
.logout-btn:hover { color: var(--text); }
/* Show moon in dark mode (click → go light); sun in light mode (click → go dark). */
:root[data-theme="light"] .theme-toggle .theme-toggle-i::before { content: "☀"; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-i::before,
:root:not([data-theme]) .theme-toggle .theme-toggle-i::before { content: "☾"; }
.banner {
background: var(--banner-bg); border: 1px solid var(--banner-border); color: var(--banner-fg);
padding: 9px 36px 9px 14px; border-radius: var(--r-md); margin: 16px 0 0;
font-size: 12.5px; position: relative;
}
.banner-x {
position: absolute; right: 10px; top: 7px; background: none; border: 0;
color: var(--banner-fg); font-size: 16px; line-height: 1;
}
.warnings {
background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-fg);
padding: 10px 14px; border-radius: var(--r-md); margin: 8px 0;
font-size: 12.5px; white-space: pre-wrap;
}
/* ── Generic row / accordion ───────────────────────────────────────────────── */
/* Rows are hairline-divided lines inside one table frame (NOT separate cards) —
the compact ledger look from the design. Square corners; the divider is the
only border. */
.row {
background: transparent; border: 0;
border-bottom: 1px solid rgba(var(--hairline-rgb), .22);
border-radius: 0; /* full-bleed ledger row: its bottom hairline is the only edge */ margin: 0; overflow: hidden;
}
.row:last-child { border-bottom: 0; }
.row-head {
display: flex; align-items: center; gap: 12px;
min-height: 40px; padding: 0 12px; cursor: pointer; flex-wrap: nowrap;
}
.row-head:hover { background: var(--surface-row-active); }
.row.open .row-head {
background: var(--surface-row-active);
border-bottom: 1px solid rgba(var(--hairline-rgb), .55);
}
/* Fixed-width columns so every row aligns regardless of content length */
.code {
font-weight: 500; font-family: var(--font-sans); font-size: 13px; color: var(--text);
flex: 0 0 72px; /* fits "GBP/USD" (pairs) and "NZD" (currencies) */
}
.name { flex: 0 0 154px; color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "New Zealand Dollar" */
/* Bias/direction chip — widest is "strong bearish" (~95px text + 20px padding) */
.row-head .chip { flex: 0 0 118px; text-align: center; }
/* Confidence / conviction — widest is "MEDIUM-HIGH" */
.row-head .conf { flex: 0 0 94px; }
/* Policy rate — widest is "4.35%" */
.row-head .rate { flex: 0 0 50px; }
/* Last bias/confidence change — absolute "YYYY-MM-DD HH:MMZ" form
(currencies + pairs share the same width). */
.row-head .changed {
flex: 0 0 130px; font-family: var(--font-sans); font-size: 11px; color: var(--muted);
}
.row-head .changed.none { color: var(--faint); }
/* Which field moved at that change — "bias" / "confidence" / "bias/confidence"
for currencies; pairs widen this in #view-pairs scope below to fit the
joined "direction · conviction" / "direction · persistence" forms. */
.row-head .whatchanged {
flex: 0 0 116px; font-size: 12px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-head .whatchanged.none { color: var(--faint); }
#view-pairs .row-head .whatchanged { flex: 0 0 156px; }
/* Forward durability of the current bias/direction (V3_09 §4.11 /
V3_06 §4.3b) — a separate column from confidence (present strength). */
.row-head .persist {
flex: 0 0 134px; font-size: 12px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.row-head .persist.none { color: var(--faint); }
/* In book / dropped badge */
.row-head .badge { flex: 0 0 74px; text-align: center; }
/* Two-line preview (line-clamp) — much more readable than 1-line + "..." */
.summary {
flex: 1; color: var(--text-muted); font-size: 11.5px; line-height: 1.45;
overflow: hidden; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-line-clamp: 2;
min-width: 0;
}
.caret { color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); flex: 0 0 auto; margin-left: 2px; font-size: 11px; }
.row.open .caret { transform: rotate(90deg); }
/* Currency-list column header. Padding = .row border (1px) + .row-head
padding-left (18px) so each label sits exactly over its column's values;
widths mirror the .code/.name/.chip/.conf/.rate/.changed/.whatchanged/
.summary flex-basis above. */
.cur-colhead {
display: flex; align-items: center; gap: 12px;
height: 32px; padding: 0 12px; margin: 0;
background: var(--surface-sunken);
font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .09em;
color: var(--colhead); border-bottom: 1px solid rgba(var(--hairline-rgb), .55);
}
.cur-colhead > span { flex: 0 0 auto; }
.cur-colhead .h-code { flex: 0 0 72px; }
.cur-colhead .h-name { flex: 0 0 154px; }
.cur-colhead .h-bias { flex: 0 0 118px; text-align: center; }
.cur-colhead .h-conf { flex: 0 0 94px; }
.cur-colhead .h-rate { flex: 0 0 50px; }
.cur-colhead .h-changed { flex: 0 0 130px; }
.cur-colhead .h-whatchanged { flex: 0 0 116px; }
.cur-colhead .h-persist { flex: 0 0 134px; }
.cur-colhead .h-sum { flex: 1; min-width: 0; }
.cur-colhead .h-caret { flex: 0 0 auto; width: 12px; margin-left: 2px; }
/* ── Column-header tooltips (design gm-tip) — BIAS / CONFIDENCE / PERSISTENCE ── */
.cur-colhead .gm-tip {
position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: help;
}
.gm-tip .gm-tip-i {
font: 8px/1 var(--font-sans); color: var(--text-faint); text-transform: none;
border: 1px solid rgba(var(--hairline-rgb), .4); border-radius: 50%;
width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center;
}
.gm-tipbox {
position: absolute; z-index: 60; top: 100%; left: 0; width: 252px; margin-top: 4px;
opacity: 0; visibility: hidden; transform: translateY(4px);
/* 4px rise, with a delayed open and a delayed close so crossing between two
adjacent triggers cannot strobe. `visibility` is named because it HOLDS its
old value for the duration -- that hold is what keeps the box painted while
it fades out. */
transition: opacity var(--dur-micro) var(--ease-out) var(--delay-pop-close),
visibility var(--dur-micro) var(--ease-out) var(--delay-pop-close),
transform var(--dur-micro) var(--ease-out) var(--delay-pop-close);
background: var(--surface); border: 1px solid rgba(var(--hairline-rgb), .80);
box-shadow: var(--tooltip-shadow); padding: 12px 13px;
text-transform: none; letter-spacing: normal;
}
.gm-tip:hover .gm-tipbox, .gm-tip:focus-within .gm-tipbox {
opacity: 1; visibility: visible; transform: none;
transition: opacity var(--dur-micro) var(--ease-out) var(--delay-pop-open),
visibility var(--dur-micro) var(--ease-out) var(--delay-pop-open),
transform var(--dur-micro) var(--ease-out) var(--delay-pop-open);
}
.gm-tip-t { display: block; font: 600 11px/1.2 var(--font-display); color: var(--text); margin-bottom: 6px; }
.gm-tip-intro { display: block; font: 10.5px/1.5 var(--font-sans); color: var(--text-muted); margin-bottom: 10px; }
.gm-tip-row { display: flex; gap: 9px; margin-bottom: 6px; }
.gm-tip-rl { font: 600 10px/1.4 var(--font-sans); width: 64px; flex: none; }
.gm-tip-rd { font: 10px/1.4 var(--font-sans); color: var(--text-muted); }
.gm-tip-foot {
display: block; font: 9.5px/1.45 var(--font-sans); color: var(--text-faint);
margin-top: 7px; padding-top: 8px; border-top: 1px solid rgba(var(--hairline-rgb), .80);
}
/* Pairs-list column header — rendered ONCE per .group-h conviction-tier
band so the labels sit directly above the rows they describe (a reader
scanning a tier never has to glance back to the top of the list). Same
19px left pad as .cur-colhead (1px .row border + 18px .row-head
padding-left) so labels sit over their values; widths mirror the pair
.code/.chip/.conf/.badge/.persist/.summary flex-basis above. */
.pair-colhead {
display: flex; align-items: center; gap: 12px;
height: 30px; padding: 0 12px; margin: 0;
background: var(--surface-sunken);
font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
color: var(--colhead); border-bottom: 1px solid rgba(var(--hairline-rgb), .80);
}
.pair-colhead > span { flex: 0 0 auto; }
.pair-colhead .h-pair { flex: 0 0 72px; }
.pair-colhead .h-dir { flex: 0 0 118px; text-align: center; }
.pair-colhead .h-conv { flex: 0 0 94px; }
.pair-colhead .h-changed { flex: 0 0 130px; }
.pair-colhead .h-whatchanged { flex: 0 0 156px; }
.pair-colhead .h-persist { flex: 0 0 134px; }
.pair-colhead .h-reinf { flex: 0 0 224px; }
.pair-colhead .h-sum { flex: 1; min-width: 0; }
.pair-colhead .h-caret { flex: 0 0 auto; width: 12px; margin-left: 2px; }
.row-body {
padding: 18px 20px 22px; display: none;
background: var(--surface-raised);
border-bottom: 1px solid rgba(var(--hairline-rgb), .55);
}
.row.open .row-body {
display: block;
/* Content entrance only -- the HEIGHT still snaps, deliberately. Easing it
means grid-template-rows 0fr->1fr, which requires the collapsed body to stay
in layout. Here that would put 35 pair expansions (one of them holding a
chart that measures its own width at mount) through layout on every render
instead of being display:none, and would expose collapsed content to screen
readers, which display:none currently hides. The entrance already carries
the causality; the height is not worth those three costs. */
animation: g10-row-open var(--dur-slow) var(--ease-out) both;
}
@keyframes g10-row-open {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.row.open .row-body { animation: g10-row-fade var(--dur-fast) linear both; }
@keyframes g10-row-fade { from { opacity: 0; } to { opacity: 1; } }
}
/* Two-column expansions (design currency 1.35fr / 1fr, pair 1.3fr / 1fr). */
.cur-exp-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; }
.pair-exp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
.cur-exp-col { min-width: 0; }
@media (max-width: 1100px) {
.cur-exp-grid, .pair-exp-grid { grid-template-columns: 1fr; gap: 18px; }
}
/* Full directional-bias text above the breakdown — same text the row shows
clipped; now readable in full without clicking into the breakdown */
.pair-bias-full {
font-size: 14.5px; color: var(--txt); line-height: 1.7;
margin: 10px 0 18px; padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
/* ── Chips ─────────────────────────────────────────────────────────────────── */
/* Square ~21px chip: semantic TEXT on a same-hue tint + same-hue border. */
.chip {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 21px; padding: 0 9px;
font: 500 11px/1 var(--font-sans); white-space: nowrap;
border-radius: var(--r-xs); border: 1px solid rgba(var(--hairline-rgb), .80);
color: var(--text-2); flex-shrink: 0;
}
/* Bias maps to four semantic kinds: bullish→bull, bearish→bear, neutral→warn
(range/neutral share the amber axis per the handoff), mixed→mixed. The
slight_* variants ride the same hue as their full counterpart. */
.b-strong_bullish, .b-bullish, .b-slight_bullish, .dir-long, .badge.in {
color: var(--bull-text); background: var(--bull-tint); border-color: var(--bull-edge);
}
.b-strong_bearish, .b-bearish, .b-slight_bearish, .dir-short, .badge.out {
color: var(--bear-text); background: var(--bear-tint); border-color: var(--bear-edge);
}
.b-neutral, .dir-range {
color: var(--warn-text); background: var(--warn-tint); border-color: var(--warn-edge);
}
.b-mixed {
color: var(--mixed-text); background: var(--mixed-tint); border-color: var(--mixed-edge);
}
/* ── Market Drivers (V3_13) ─────────────────────────────────────────────────── */
.dir-watch { color: var(--text-2); background: rgba(var(--hairline-rgb), .22); border-color: rgba(var(--hairline-rgb), .80); }
.drv-head { margin: 4px 0 14px; }
.drv-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drv-class { font: 600 13px/1 var(--font-sans); text-transform: capitalize; letter-spacing: .04em; color: var(--accent); }
.drv-driver { font: 500 18px/1.35 var(--font-sans); margin: 8px 0 4px; }
.drv-meta { font-size: 11px; }
.drv-plain-toggle { margin-top: 8px; font: 500 11px/1 var(--font-sans); padding: 5px 10px; border: 1px solid rgba(var(--hairline-rgb), .80); background: none; color: var(--text-2); cursor: pointer; }
.drv-plain-toggle:hover { border-color: rgba(var(--hairline-rgb), .45); }
.drv-conf-high { color: var(--bull-text); background: var(--bull-tint); border-color: var(--bull-edge); }
.drv-conf-medium { color: var(--warn-text); background: var(--warn-tint); border-color: var(--warn-edge); }
.drv-conf-low, .drv-conf-none { color: var(--text-2); background: var(--surface-sunken); }
.drv-hold { margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--warn-edge); background: var(--warn-tint); color: var(--warn-text); font: 500 12px/1.5 var(--font-sans); }
/* Data vintage strip — how old the feeds under this page are. Quiet by
intent: it is a standing fact, not an alert, and an amber freshness line on
every page every day is a line nobody reads by the second week. */
.vintage-strip {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
margin: 0 0 12px; padding: 6px 0;
border-bottom: 1px solid rgba(var(--hairline-rgb), .55);
font: 400 11.5px/1.4 var(--font-sans); color: var(--text-muted);
}
.vintage-lead { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.vintage-item { display: inline-flex; align-items: baseline; gap: 5px; cursor: help; }
.vintage-label { color: var(--text-muted); }
.vintage-val { color: var(--text-2); font-variant-numeric: tabular-nums; }
.vintage-item.is-missing .vintage-val { color: var(--warn-text); font-style: italic; }
@media (max-width: 520px) { .vintage-strip { gap: 2px 10px; font-size: 11px; } }
/* Explains the hold above rather than raising a second alarm — deliberately
neutral, not amber, because the two surfaces disagreeing is expected. */
.drv-bridge {
margin: -6px 0 14px; padding: 9px 12px;
border-left: 3px solid rgba(var(--hairline-rgb), .80);
color: var(--text-2); font: 400 12px/1.55 var(--font-sans);
}
.drv-card { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(var(--hairline-rgb), .55); }
.drv-card-h { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 8px; }
.drv-card-b { font: 400 13px/1.55 var(--font-sans); }
.drv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.drv-tk { padding: 10px 0; border-top: 1px solid rgba(var(--hairline-rgb), .55); }
.drv-tk:first-of-type { border-top: 0; }
.drv-tk-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drv-tk-pair { font: 600 13px/1 var(--font-sans); letter-spacing: .02em; }
.drv-tk-rat { font: 400 12.5px/1.5 var(--font-sans); margin-top: 6px; }
.drv-tk-fals { font-size: 11.5px; margin-top: 4px; }
.drv-tk-note { font: 500 11.5px/1.45 var(--font-sans); margin-top: 4px; color: var(--warn-text); }
.drv-flag-conflict { color: var(--bear-text); background: var(--bear-tint); border-color: var(--bear-edge); }
.drv-flag-tension { color: var(--warn-text); background: var(--warn-tint); border-color: var(--warn-edge); }
.drv-gap { font-size: 11.5px; line-height: 1.5; }
.drv-tl-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid rgba(var(--hairline-rgb), .22); }
.drv-tl-row:first-of-type { border-top: 0; }
.drv-tl-date { flex: 0 0 92px; font-size: 11px; color: var(--text-2); }
.drv-tl-class { flex: 0 0 130px; font: 600 11.5px/1.4 var(--font-sans); text-transform: capitalize; color: var(--accent); }
.drv-tl-drv { font: 400 12px/1.4 var(--font-sans); }
/* Evidence panel (Phase 7) — the deterministic proof: correlation heatmap +
σ-move / z-score tables + self-grade. All values are computed, not LLM-authored. */
.drv-ev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.drv-ev-sub { font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 2px 0 8px; }
.drv-heat { border-collapse: collapse; }
.drv-heat th { font: 500 11px/1 var(--font-sans); color: var(--muted); padding: 5px 8px; text-align: center; font-weight: 500; }
.drv-heat td { padding: 9px 11px; text-align: center; min-width: 50px; font: 500 13px/1 var(--font-sans); border: 1px solid rgba(var(--hairline-rgb), .55); color: var(--text); }
.drv-heat td.rowh { text-align: right; color: var(--muted); border: 0; padding-right: 11px; min-width: 0; font-size: 11px; }
/* Correlation-heatmap legend — green/red swatch key + a plain-English how-to-read. */
.drv-heat-legend { margin-top: 13px; max-width: 48ch; }
.drv-heat-key { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 7px; }
.drv-heat-keyitem { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-sans); color: var(--text-2); }
.drv-heat-sw { width: 13px; height: 13px; display: inline-block; border: 1px solid rgba(var(--hairline-rgb), .80); }
/* Sampled from the SAME ramp _drvCorrColor draws (js/app.js): the triplet is
the token, the alpha is the correlation magnitude. .55 is |r| ~= 0.61. A key
that restates the colour instead of sampling it stops matching the map. */
.drv-heat-sw.pos { background: rgba(var(--bull-dot-rgb), .55); }
.drv-heat-sw.neg { background: rgba(var(--bear-dot-rgb), .55); }
.drv-heat-note { font: 400 11.5px/1.55 var(--font-sans); color: var(--muted); }
.drv-master { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.drv-proof { width: 100%; border-collapse: collapse; }
.drv-proof th { font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); text-align: right; padding: 2px 7px 6px; }
.drv-proof th:first-child { text-align: left; }
.drv-proof td { padding: 4px 7px; text-align: right; font: 500 11px/1.3 var(--font-sans); border-top: 1px solid rgba(var(--hairline-rgb), .22); color: var(--text); }
.drv-proof td:first-child { text-align: left; font-family: var(--font-sans); font-weight: 400; }
.drv-held { color: var(--bull-text); }
.drv-reverted { color: var(--muted); }
.drv-grade-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.drv-grade-correct { color: var(--bull-text); background: var(--bull-tint); border-color: var(--bull-edge); }
.drv-grade-wrong { color: var(--bear-text); background: var(--bear-tint); border-color: var(--bear-edge); }
/* Drivers — narrative-spine view (2026-06-24) */
.drv-controls { display: flex; align-items: center; justify-content: flex-end; margin: 2px 0 16px; }
.drv-controls .drv-plain-toggle { margin-top: 0; }
.drv-hero { margin: 0 0 16px; padding: 16px 18px; border: 1px solid rgba(var(--hairline-rgb), .18); border-left: 3px solid var(--accent); background: var(--surface-sunken); }
.drv-hero-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.drv-hero-line { font: 500 22px/1.4 var(--font-sans); letter-spacing: -.01em; }
.drv-hero-meta { margin-top: 10px; font-size: 11.5px; text-transform: capitalize; }
.drv-section { margin: 0 0 18px; }
.drv-sec-h { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 9px; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--hairline-rgb), .55); }
.drv-story { font: 400 14.5px/1.65 var(--font-sans); color: var(--text-2); }
.drv-gap-lead { font: 400 12px/1.55 var(--font-sans); color: var(--muted); margin-bottom: 8px; max-width: 76ch; }
.drv-proof-read { margin-bottom: 16px; }
.drv-keymoves { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.drv-keymoves-lab { font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.drv-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; align-items: start; }
.drv-two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-bottom: 18px; }
.drv-two-up .drv-section { margin-bottom: 0; }
.drv-more { margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(var(--hairline-rgb), .55); }
.drv-more .drv-sec-h { color: var(--text-2); }
.conf { font-size: 10.5px; color: var(--text-2); text-transform: capitalize; letter-spacing: .03em; flex-shrink: 0; }
/* Bias-persistence indicator + label, both painted by the durability colour
(anchored→accent, firm→muted, fragile→warn). Per the design the glyph differs
by table: PAIRS use a 6px round dot (base rule), CURRENCIES use a 2px×16px
vertical bar (scoped below). The renderer's glyph text is collapsed to
font-size:0 so .pp-g reads purely as the shape. */
.persist { color: var(--text-muted); letter-spacing: 0; flex-shrink: 0; font-size: 11.5px; display: inline-flex; align-items: center; gap: 7px; }
.persist .pp-g {
font-size: 0; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; display: inline-block; flex: 0 0 auto;
}
#view-currencies .persist .pp-g { width: 2px; height: 16px; border-radius: 0; /* currencies use a 2x16 tick BAR, not a dot - a radius on a 2px-wide bar is invisible */ }
.pp-anchored, .pp-v.pp-anchored { color: var(--accent); }
.pp-firm, .pp-v.pp-firm { color: var(--text-muted); }
.pp-fragile, .pp-v.pp-fragile { color: var(--warn-text); }
.pp-v { font-weight: 500; }
/* Bias-persistence breakdown card: chip headline, one-line "flips if:"
rationale, then the ≤5 "what keeps it here" durability bullets (§4.11
drivers). Full-width block inside the fcard value column. */
.pp-card { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.pp-rat { font-size: 13px; color: var(--muted); line-height: 1.55; }
/* "Flips if:" / "Falsifier:" prefix rides in the gold warn accent per design
(dark #d8b072 / light #876625 = --warn-text); the catalyst text stays muted. */
.pp-rat-lbl { color: var(--warn-text); font-weight: 600; }
.pp-grp {
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: var(--faint); margin-top: 3px;
}
.pp-bul li { font-size: 13px; }
/* list / driver nodes used AS an fcard value must span the value column
(the §4.12 stance_drivers card reuses the change_drivers .snode-bullets
renderer; framework drivers use .fdrv which is already width:100%). */
.fv > .pp-card, .fv > .snode-bullets, .fv > .fdrv { flex: 1 1 100%; }
.rate { font-family: var(--font-sans); font-size: 12.5px; color: var(--accent); flex-shrink: 0; text-align: right; }
.rate.stale { color: var(--warn-text); }
/* Book status — a small square lifecycle chip (in book = bull, dropped = bear). */
.badge {
display: inline-flex; align-items: center; justify-content: center;
height: 18px; padding: 0 8px;
font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em;
border-radius: var(--r-xs); border: 1px solid rgba(var(--hairline-rgb), .80);
color: var(--text-faint); flex-shrink: 0;
}
.badge.in { color: var(--bull-text); background: var(--bull-tint); border-color: var(--bull-edge); }
.badge.out { color: var(--bear-text); background: var(--bear-tint); border-color: var(--bear-edge); }
.src-producer { color: var(--bull-text); border-color: var(--bull-edge); }
.src-diff { color: var(--accent); border-color: var(--accent-dim); }
.src-initial, .src-unchanged { color: var(--faint); }
/* ── Stance-changes list (collapsible, plain stacked — no timeline rail) ────── */
/* Rows sit flush (no gaps) — adjacent borders collapse so the history reads as
one continuous list, per design. */
.chain { margin: 10px 0 0; display: flex; flex-direction: column; gap: 0; }
.chain .snode + .snode { border-top: none; }
.snode {
border: 1px solid rgba(var(--hairline-rgb), .55); border-radius: 0; /* stacked stance rows collapse their borders into one continuous list (see .chain above) - rounding each node would pinch every join */
background: var(--surface); overflow: hidden;
}
.snode.open { border-color: var(--accent); }
.snode-h {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
cursor: pointer; flex-wrap: nowrap; min-width: 0;
}
.snode-h:hover { background: var(--surface-row-active); }
.snode.open > .snode-h { background: var(--surface-row-active); border-bottom: 1px solid rgba(var(--hairline-rgb), .55); }
.snode-h .caret { order: -1; }
.snode.open > .snode-h .caret { transform: rotate(90deg); }
.snode-date { font-family: var(--font-sans); font-size: 12px; color: var(--muted); flex: 0 0 auto; }
/* Fixed-width bias chip so every row's chip is the same length and the bias
word reads centred down the column (user request — not in the handoff). */
.snode-h .chip { flex: 0 0 110px; justify-content: center; }
/* Fixed-width too, so confidence lines up down the column alongside the bias
chip (longest value "MODERATE" fits 78px). */
.snode-h .conf { flex: 0 0 78px; text-transform: uppercase; letter-spacing: .05em; }
.snode-h .rate { flex: 0 0 auto; }
/* delta_source badge (diff/producer/initial) is internal pipeline metadata */
.snode-h .badge { display: none; }
/* one-line preview of what changed; hidden once expanded (the bullets in the
body restate it more precisely) */
.snode-prev {
flex: 1; color: var(--muted); font-size: 13px; line-height: 1.5;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.snode.open .snode-prev { display: none; }
/* "reinforced N× since DATE" badge — surfaced when the server collapsed
adjacent same-signature regens into one row. */
.snode-reinforced {
flex: 0 0 auto; margin-left: auto;
font-family: var(--font-sans); font-size: 10px; color: var(--text-faint);
background: none; border: 0; border-radius: 0; /* bare text button: no fill, no border, no padding - nothing to round */ padding: 0;
white-space: nowrap; cursor: help;
}
/* Collapsed pair-row "Reinforced" column — "N× Reinforcement since DATE"
(date-only). Plain text matching the sibling meta columns; faint "—" when the
stance has no reinforcement yet. Fixed width so it aligns under its header
(.pair-colhead .h-reinf) instead of crowding Summary. The full badge + log
live in the expanded pair timeline. */
.row-head .pair-reinf {
flex: 0 0 224px; font-family: var(--font-sans); font-size: 10px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-head .pair-reinf.none { color: var(--faint); }
/* Earlier-reinforcements disclosure body (option 2 client-side grouping):
each row is one prior regen's narrative with a tiny mono date prefix. */
.earlier-reinf-list { display: flex; flex-direction: column; gap: 8px; }
.earlier-reinf-item {
display: flex; gap: 10px; padding: 6px 8px;
background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm);
font-size: 12.5px; line-height: 1.5; color: var(--txt);
}
.earlier-reinf-date {
flex: 0 0 auto; font-family: var(--font-sans); font-size: 11px;
color: var(--muted); white-space: nowrap;
}
.earlier-reinf-text { flex: 1; min-width: 0; }
.earlier-reinf-count {
flex: 0 0 auto; font-family: var(--font-sans); font-size: 11px;
color: var(--faint); white-space: nowrap; cursor: help; align-self: flex-start;
}
.snode-b { display: none; padding: 12px 14px 14px; }
.snode.open > .snode-b { display: block; }
/* Stance-change body: the delta catalyst box at the top, then a "what
changed" group of computed transition bullets, then the long-form
thesis narrative. */
.snode-grp {
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: var(--faint); margin: 14px 0 6px;
}
.snode-grp:first-child { margin-top: 0; }
.snode-bullets { list-style: none; margin: 0; padding: 0; }
.snode-bullets li {
position: relative; padding-left: 16px; margin: 5px 0;
font-size: 13.5px; line-height: 1.6; color: var(--txt);
}
.snode-bullets li::before {
content: "–"; position: absolute; left: 2px; color: var(--faint);
}
/* transition bullet: "