/* ── Ginger Ninjalytics design tokens (ADR-001 / DRIP ADR-0007) ────────────────── Tokens are defined only here, in the shell. Module RCLs consume these variables and must never define their own. Load order is load-bearing: this file must load AFTER bootstrap.min.css (see App.razor) — the Bootstrap remaps in section 2 beat Bootstrap's own :root/[data-bs-theme] blocks purely by source order at equal specificity. THREE ATTRIBUTES ON , AND THEY ARE NOT THE SAME THING (ADR-044 §2): data-mode the user's PREFERENCE — auto | light | dark. Server-rendered, never written by script, and nothing in CSS selects on it. data-scheme the RESOLVED ground — light | dark. This is what CSS keys on. Server-rendered when the preference is not `auto`; the head script in App.razor resolves `auto` against the OS before the first paint, which is the whole reason that script is inline. data-theme the palette key (ADR-003 claim). A palette block outranks the light ground by source order, so §1b must stay BELOW §1a — both are (0,2,0) and only order separates them. Token NAMES are a runtime contract, not just CSS: game.js:749, game.words.js:70 and contact-gauntlet.js:186 read --gn-accent / --gn-text / --gn-text-muted / --gn-danger / --gn-bg / --gn-font / --gn-word-* off the computed style. Rewriting a value is free; renaming one silently repaints or blanks a game. */ /* ── 1. Token values — the dark default ground (ADR-044 §2: charcoal + verdigris) Every colour below is checked against the ground it actually sits on: body text and semantic hues ≥4.5:1 on --gn-bg / --gn-surface / --gn-surface-2, control boundaries ≥3:1, and --gn-on-accent ≥4.5:1 on every fill including its hover and active mixes. S2.2 authors the other ten palettes and re-checks these two. */ :root { color-scheme: dark; /* The type scale's root. A percentage (not rem) so it resolves against the reader's own browser default rather than against itself — everything below is in rem, so this single value is the user's type-scale step (ADR-044 §3). */ --gn-fs-root: 100%; font-size: var(--gn-fs-root); --gn-bg: #15181b; --gn-surface: #1d2125; --gn-surface-2: #262c31; --gn-border: #333b41; /* Separators may be quiet; a CONTROL boundary may not (WCAG 1.4.11 wants 3:1). Two tokens rather than one loud border on every card and comment rule. */ --gn-border-strong: #6c7883; --gn-text: #e2e7ea; --gn-text-muted: #98a3ab; --gn-accent: #2fa89f; --gn-accent-hover: #3ec4ba; /* THE SECOND HUE (owner, 2026-08-10). Derived, not picked — see the recipe below §1a. Used sparingly and only to draw an eye: selection controls, the DAFUQ glow, the selected state of a widget. Never a second brand colour, never a button fill. */ --gn-accent-2: #a784c7; --gn-on-accent-2: #04120f; /* The ink for ANY filled control — accent or semantic. Dark here because this theme's fills are bright; the light ground flips it to white. */ --gn-on-accent: #04120f; /* Which way a fill moves on hover/active. Darkening a bright fill drags it toward the dark ink and drops btn-danger's active state to 4.48:1 — so a dark ground lightens instead. One token, both directions correct. */ --gn-fill-shade: white; --gn-link: #5accc2; --gn-link-hover: #84dcd4; --gn-success: #54b988; --gn-danger: #f0736f; --gn-warning: #e2b04a; --gn-info: #5cb8dc; /* Inline . Bootstrap ships a fixed pink here and nothing routed it through the tokens, so it survived every persona theme unchanged. */ --gn-code: #e9a06d; --gn-focus-ring: rgba(47, 168, 160, .32); /* ADR-044 §4's default, and it is only honest now that §1c self-hosts the face: naming Cascadia Mono in a stack used to mean Windows saw it, macOS fell through to SF Mono and Linux to whatever `monospace` resolves to. The fallbacks stay for the moment between first paint and the file arriving. Readers override this per §1c. */ --gn-font: "Cascadia Mono", ui-monospace, Consolas, monospace; --gn-font-heading: var(--gn-font); /* L3's geometry, not a preference: the console look IS hard edges. Kept as three tokens rather than deleted, because Bootstrap's --bs-border-radius-* remap in §2 needs something to point at and a later palette could soften them. */ --gn-radius: 0; --gn-radius-sm: 0; --gn-radius-lg: 0; --gn-shadow: none; --gn-sidebar-bg: #1d2125; --gn-sidebar-text: #c8d0d5; /* Literal RGB triplets Bootstrap consumes via rgba(var(...)) — cannot be derived from the hex tokens; keep in sync with --gn-bg/--gn-text/--gn-danger. */ --bs-body-bg-rgb: 21, 24, 27; --bs-body-color-rgb: 226, 231, 234; --bs-danger-rgb: 240, 115, 111; /* Spacing scale */ --gn-space-1: .25rem; --gn-space-2: .5rem; --gn-space-3: 1rem; --gn-space-4: 2rem; --gn-space-5: 4rem; /* ── Type scale (ADR-044 §4) ─────────────────────────────────────────────── There was none: sizes were literal rem values scattered through this file, so "make the text bigger" had nothing to turn. Every step is a rem, so --gn-fs-root above moves the whole scale at once. Ratio ≈1.2. */ /* The step below xs, and it is ON the ratio (.75 / 1.2), not a special case: L3's console type leans on it for every micro-label — column heads, kickers, tag chips, status pills — and the alternative was a literal, which would sit outside --gn-fs-root and stop moving when the reader changes their type size (ADR-044 §4). Added by row S4.1. */ --gn-fs-2xs: .625rem; --gn-fs-xs: .75rem; --gn-fs-sm: .875rem; --gn-fs-md: 1rem; --gn-fs-lg: 1.125rem; --gn-fs-xl: 1.35rem; --gn-fs-2xl: 1.6rem; --gn-fs-3xl: 2rem; --gn-fs-4xl: 2.5rem; --gn-lh-tight: 1.25; --gn-lh: 1.6; --gn-measure: 68ch; /* ADR-042 §7 — ch, never px: every font has its own character width */ /* ── Responsive floors (ADR-042 §8) ──────────────────────────────────────── The numbers, in one place, so no later row re-derives them. Breakpoints are deliberately NOT here: custom properties cannot be used in @media. */ --gn-touch: 44px; /* minimum touch target on a coarse pointer */ --gn-touch-gap: 8px; /* minimum separation between two of them */ --gn-bar-h: 56px; /* fixed top bar — S1.2 consumes this */ --gn-strip-h: 56px; /* low strip, IDLE state; §3a raises it under body.gn-playing */ /* The shell's horizontal gutter — bar, main and strip share it, so their contents line up vertically at every width. */ --gn-gut: clamp(.75rem, 3vw, 2rem); /* The shell's outer width cap (.gn-wrap). A token and not a literal since 2026-08-16, because the bleed float has to know where the PAGE ends, and the page is not the viewport on any window wider than this — that mistake clipped bleeding images on wide screens for exactly as long as the number lived in one place only. */ --gn-wrap-max: 1360px; /* Word-role highlight colours (ADR-008): the game glows categorized blog words in these. Intentionally constant across persona themes — a colour means one thing everywhere. In Paragraph Parkour the colour IS the material, so each one now looks like what it does: adjective is frost, verb is fire, and both of those spread to the words around them. */ --gn-word-adjective: #dceeff; /* frost — near-white blue, and it creeps */ --gn-word-contraction: #35c8d6; /* sticky — the cling surface */ --gn-word-jargon: #ff5c7a; /* jargon — the towers you have to climb */ --gn-word-noun: #5aa0ff; /* springboard */ --gn-word-verb: #ff6a1a; /* fire — hotter than the old amber, and it spreads */ --gn-word-reserved: #b57bff; /* profanity — turrets */ --gn-word-hedge: #9d94c4; /* hedging — platforms that will not commit to existing */ /* AI usage label (ADR-040). Theme-invariant for the same reason as --gn-word-* above: a disclosure about how something was made has to mean one thing under every persona, or it is not a disclosure. Absent from every :root[data-theme] block on purpose — that omission IS the invariance. The plate is doing real work, not decoration. It used to be justified against hot-dog-stand's #b71c1c body; that theme is retired, and ADR-044 §3 puts the lock on better grounds — twelve user-selectable palettes are twelve different grounds, and a token that must mean one thing in all of them needs its own plate more than ever, not less. The tuner overrides the two hues per-instance. */ /* DAFUQ's glow (ADR-045 §10, row S3.8). NOT theme-invariant like the two families above, and derived rather than authored twelve times: --gn-link is each palette's secondary interactive colour and --gn-link-hover is its BRIGHT form — which is what a glow wants (owner, 2026-08-10). Already checked against that palette's ground, so this follows the theme for free and a palette that wants its own glow overrides this one line. The glow is a halo AROUND text that stays --gn-text, so it carries no text-contrast obligation of its own — the magnifier glyph, not the colour, is what satisfies §2 rule 11. */ /* Now the second hue rather than a brighter primary — the glow's whole job is drawing an eye, and --gn-link-hover could only ever be the accent turned up (owner, 2026-08-10). */ --gn-dafuq-glow: var(--gn-accent-2); --gn-c3-plate: #1b2029; /* only the breakdown's rings still sit on this */ /* THE TWO HUES NOW FOLLOW THE PALETTE (owner, 2026-08-11). This reverses ADR-040's theme-invariance for --gn-c3-human/--gn-c3-ai; the amendment on ADR-040 carries the reasoning and the cost. Two things made it defensible rather than merely asked for: the plate came off these rings in 2026-08-07, so they already sit on the page ground and the fixed cyan/pink were already under 3:1 on grounds near their own hue — the accents are the one pair that HAS been measured against every ground (ADR-044, accent2.py). And #14b0d9 sat 17deg off the default accent, which read as a failed match rather than as a distinct mark. WHAT THIS COSTS: the accents are 60deg apart by Material's harmony rule, where the old pair was 148deg. Human and AI are now closer in hue than they have ever been, and the glyph inside each ring — not the colour — is what a reader who cannot tell them apart has left. Do not remove the glyphs. */ --gn-c3-human: var(--gn-accent); --gn-c3-ai: var(--gn-accent-2); } /* ── --gn-accent-2, and where its twelve values came from ──────────────────── Material's rule, not a taste call. Their generator (material-color-utilities, core_palette.ts) builds the contrasting accent as hue + 60° off the primary at half its chroma, and M2 said the same thing in words: a secondary "can be analogous or complementary… but should not simply be a light or dark variation of your primary" and "should be applied sparingly as an accent". That last line is why --gn-link could never be it — --gn-link IS a light variation of --gn-accent in all twelve palettes, and in terminal-light it is literally the same hex. Two documented departures, both forced by things Material doesn't have to deal with: 1. THE HUE STEP IS 60° BUT NOT ALWAYS THE FIRST ONE. Material reserves exactly one hue (error, HCT 25). We reserve six — accent, code, success, danger, warning, info — so +60 often lands on a hue that already means something here: +60 off terminal's green is cyan, which is --gn-info, and +60 off console's magenta is orange, which is --gn-code. So we keep Material's 60° step and skip occupied stops, taking the first that clears every reserved hue by 30°. Most palettes land on +120; blueprint and noir take Material's +60 unchanged; ember needs +240. 2. CHROMA IS THE PRIMARY'S, NOT HALF. Material halves it — but only after flooring the primary at HCT chroma 48. Our accents are authored below that floor, so halving them produced greys (#7b97b3, #b6a6c4) rather than accents. Keeping the primary's own chroma is what preserves each palette's character: noir's stays restrained, terminal's stays electric. Tone is the free variable, because Material fixes a tone only by owning the background, and we have twelve. Each value is the lightness that DELIVERS the most chroma (asking green's chroma of a blue at green's lightness gamut-clips to near-white, which reads as disabled) while clearing 4.5:1 on --gn-bg, --gn-surface AND --gn-surface-2, and never exceeding its own primary's contrast by more than a quarter — a colour used rarely must not outshine the one used everywhere. To retune a palette or author a thirteenth, re-run the derivation rather than eyeballing a hex; the constraint set above is what makes these twelve mutually consistent. */ /* ── 1a. The light ground — ADR-044 §2's paper sibling of the default ──────── Colours only: the scale, spacing, radii and floors above are ground-agnostic and are NOT repeated here. Two of the twelve palettes; S2.2 authors the rest. Selects on data-scheme (the resolved ground), never data-mode (the preference) — `auto` is a preference and can never be a ground. */ :root[data-scheme="light"] { color-scheme: light; --gn-bg: #f5f3ee; --gn-surface: #ffffff; --gn-surface-2: #e9e6df; --gn-border: #d8d3c8; --gn-border-strong: #7d7869; --gn-text: #20242a; --gn-text-muted: #585f66; --gn-accent: #0d6d66; --gn-accent-hover: #0a5852; --gn-accent-2: #72598b; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; /* fills are deep on paper, so the ink flips to white */ --gn-fill-shade: black; /* …and hover/active darken rather than lighten */ --gn-link: #0b625c; --gn-link-hover: #084b46; --gn-success: #1c6b46; --gn-danger: #a92620; --gn-warning: #7a5406; --gn-info: #0f5f79; --gn-code: #9a4a12; --gn-focus-ring: rgba(13, 109, 102, .28); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #e9e6df; --gn-sidebar-text: #2f353b; --bs-body-bg-rgb: 245, 243, 238; --bs-body-color-rgb: 32, 36, 42; --bs-danger-rgb: 169, 38, 32; /* The word-role colours, re-toned for a light ground (S7.0 item C2, owner 2026-08-13). ADR-008's rule holds — a colour still means ONE role — but it now means it per GROUND: the dark set in §1 was measured at 1.05–2.74:1 on the light grounds (adjective was white-on-white) and no single hue can serve both. Keyed on data-scheme, NOT per palette (the owner's call: light/dark is the render state, twelve styles are not), so a light-ground palette worn in the dark slot still gets the dark set — a corner a reader can only reach on purpose. Derived in OKLCH: same hue, L walked down until ≥4.5:1 against every light palette's bg AND surface; both game engines and the power-up chips read these off computed style at level build, so no engine change. Verified by the same sweep that found the failure — re-run it before touching a hex. */ --gn-word-adjective: #5d7081; --gn-word-contraction: #507478; --gn-word-jargon: #d71551; --gn-word-noun: #1a6cd1; --gn-word-verb: #ba4a0a; --gn-word-reserved: #9046de; --gn-word-hedge: #71669a; } /* ADR-042 §8: below a 560px viewport height the chrome shrinks, so a short viewport is not mostly bar and strip. A height query — the min-width-only rule governs width. */ @media (max-height: 560px) { :root { --gn-bar-h: 48px; --gn-strip-h: 48px; } } /* ── 1b. The palette catalogue (ADR-003 mechanism, ADR-044 §2 content) ────── data-theme on comes from the user's theme_mode claim (App.razor). Twelve palettes in six families, each family a dark-ground and a light-ground member; the keys are seeded in BlogContext and the colours are authored HERE (ADR-044 §7 — the admin surface edits metadata only, never hues). Every block declares the FULL token set, colours and color-scheme alike. Anything a block omits leaks through from the ground underneath, which is how a dark palette parked in the light slot ends up with color-scheme: light. EACH BLOCK CARRIES A SECOND SELECTOR, [data-gn-palette="…"], so a palette can be worn by ONE ELEMENT instead of by the page. That is what lets /Account/Manage/Appearance show twelve swatch rows without a single hex leaving this file — the swatches are var(--gn-bg) and friends, resolved against whichever block the row opted into. The root selector is (0,2,0) and this one is (0,1,0); specificity is per-selector in a list, so adding it changes nothing about how the page-level palette resolves. Every value below was checked by script, not by eye: text and semantic hues ≥4.5:1 on bg AND surface AND surface-2, --gn-border-strong ≥3:1 (WCAG 1.4.11), and --gn-on-accent ≥4.5:1 on every filled control including Bootstrap's 15%/20% hover and active shades in the --gn-fill-shade direction. MUST STAY BELOW §1a. :root[data-theme=…] and :root[data-scheme=…] are both (0,2,0); only source order decides, and a chosen palette has to beat the ground it is being shown on (ADR-044 §2 — all twelve are eligible for either slot, so a dark palette in the light slot is a legal choice, not a bug). */ /* The default, and the same values as the dark ground in §1 — repeated here in full because a palette block must declare the whole set (a partial block leaks the OTHER ground through when it is used in the opposite slot). */ :root[data-theme="verdigris-dark"], [data-gn-palette="verdigris-dark"] { color-scheme: dark; --gn-bg: #15181b; --gn-surface: #1d2125; --gn-surface-2: #262c31; --gn-border: #333b41; --gn-border-strong: #6c7883; --gn-text: #e2e7ea; --gn-text-muted: #98a3ab; --gn-accent: #2fa89f; --gn-accent-hover: #3ec4ba; --gn-accent-2: #a784c7; --gn-on-accent-2: #04120f; --gn-on-accent: #04120f; --gn-fill-shade: white; --gn-link: #5accc2; --gn-link-hover: #84dcd4; --gn-success: #54b988; --gn-danger: #f0736f; --gn-warning: #e2b04a; --gn-info: #5cb8dc; --gn-code: #e9a06d; --gn-focus-ring: rgba(47, 168, 159, .30); --gn-shadow: none; --gn-sidebar-bg: #1d2125; --gn-sidebar-text: #c8d0d5; --bs-body-bg-rgb: 21, 24, 27; --bs-body-color-rgb: 226, 231, 234; --bs-danger-rgb: 240, 115, 111; } /* The paper sibling, and the same values as the light ground in §1a, repeated for the same reason. */ :root[data-theme="verdigris-light"], [data-gn-palette="verdigris-light"] { color-scheme: light; --gn-bg: #f5f3ee; --gn-surface: #ffffff; --gn-surface-2: #e9e6df; --gn-border: #d8d3c8; --gn-border-strong: #7d7869; --gn-text: #20242a; --gn-text-muted: #585f66; --gn-accent: #0d6d66; --gn-accent-hover: #0a5852; --gn-accent-2: #72598b; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; --gn-fill-shade: black; --gn-link: #0b625c; --gn-link-hover: #084b46; --gn-success: #1c6b46; --gn-danger: #a92620; --gn-warning: #7a5406; --gn-info: #0f5f79; --gn-code: #9a4a12; --gn-focus-ring: rgba(13, 109, 102, .30); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #e9e6df; --gn-sidebar-text: #2f353b; --bs-body-bg-rgb: 245, 243, 238; --bs-body-color-rgb: 32, 36, 42; --bs-danger-rgb: 169, 38, 32; } /* Near black with a magenta cursor. */ :root[data-theme="console-dark"], [data-gn-palette="console-dark"] { color-scheme: dark; --gn-bg: #0c0c11; --gn-surface: #14141c; --gn-surface-2: #1d1d27; --gn-border: #2e2e3c; --gn-border-strong: #71718a; --gn-text: #e9e7f2; --gn-text-muted: #a4a1b8; --gn-accent: #ff5fb0; --gn-accent-hover: #ff8cc8; --gn-accent-2: #aeb408; --gn-on-accent-2: #14000c; --gn-on-accent: #14000c; --gn-fill-shade: white; --gn-link: #ff7ec0; --gn-link-hover: #ffa8d5; --gn-success: #52c48e; --gn-danger: #ff6f75; --gn-warning: #e8b24c; --gn-info: #6cbcf0; --gn-code: #e9a06d; --gn-focus-ring: rgba(255, 95, 176, .30); --gn-shadow: none; --gn-sidebar-bg: #14141c; --gn-sidebar-text: #cdc9dd; --bs-body-bg-rgb: 12, 12, 17; --bs-body-color-rgb: 233, 231, 242; --bs-danger-rgb: 255, 111, 117; } /* The console palette with the lights on: the magenta goes deep enough to be read as ink. */ :root[data-theme="console-light"], [data-gn-palette="console-light"] { color-scheme: light; --gn-bg: #f7f5f9; --gn-surface: #ffffff; --gn-surface-2: #eceaf1; --gn-border: #d3cddd; --gn-border-strong: #7c7590; --gn-text: #1c1a22; --gn-text-muted: #57536a; --gn-accent: #a3005f; --gn-accent-hover: #820049; --gn-accent-2: #677001; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; --gn-fill-shade: black; --gn-link: #9c005b; --gn-link-hover: #7a0047; --gn-success: #1c6b46; --gn-danger: #b02020; --gn-warning: #7a5406; --gn-info: #0f5f79; --gn-code: #9a4a12; --gn-focus-ring: rgba(163, 0, 95, .30); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #eceaf1; --gn-sidebar-text: #2c2937; --bs-body-bg-rgb: 247, 245, 249; --bs-body-color-rgb: 28, 26, 34; --bs-danger-rgb: 176, 32, 32; } /* Predates the catalogue and keeps its key — live theme_mode claims hold this string. Ratios re-checked here (ADR-044 §2), and the four semantic hues it never had are authored: before this block it inherited red/amber/blue from the ground, on a screen of phosphor green. --gn-font is deliberately NOT set: after ADR-044 §3 the font is the reader's, not the palette's, and S2.3 makes a mono face the site default anyway. */ :root[data-theme="terminal-green"], [data-gn-palette="terminal-green"] { color-scheme: dark; --gn-bg: #0a0f0a; --gn-surface: #101810; --gn-surface-2: #162116; --gn-border: #1f4d1f; --gn-border-strong: #3f9e3f; --gn-text: #33ff33; --gn-text-muted: #23c223; --gn-accent: #33ff33; --gn-accent-hover: #66ff66; --gn-accent-2: #4481ff; --gn-on-accent-2: #000000; --gn-on-accent: #000000; --gn-fill-shade: white; --gn-link: #66ff66; --gn-link-hover: #99ff99; --gn-success: #4dff8f; --gn-danger: #ff6b6b; --gn-warning: #ffd24d; --gn-info: #4de0ff; --gn-code: #ffb86b; --gn-focus-ring: rgba(51, 255, 51, .30); --gn-shadow: none; --gn-sidebar-bg: #071207; --gn-sidebar-text: #33ff33; --bs-body-bg-rgb: 10, 15, 10; --bs-body-color-rgb: 51, 255, 51; --bs-danger-rgb: 255, 107, 107; } /* Phosphor ink on a pale ground. The green has to darken a long way to be readable as text rather than glow. */ :root[data-theme="terminal-light"], [data-gn-palette="terminal-light"] { color-scheme: light; --gn-bg: #eef2ec; --gn-surface: #ffffff; --gn-surface-2: #e2e8df; --gn-border: #c9d2c5; --gn-border-strong: #6f7d6b; --gn-text: #10240f; --gn-text-muted: #46543f; --gn-accent: #146b14; --gn-accent-hover: #0f5210; --gn-accent-2: #325bb1; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; --gn-fill-shade: black; --gn-link: #146b14; --gn-link-hover: #0f5210; --gn-success: #1c6b46; --gn-danger: #a92620; --gn-warning: #6d4c05; --gn-info: #0f5f79; --gn-code: #8a4413; --gn-focus-ring: rgba(20, 107, 20, .30); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #e2e8df; --gn-sidebar-text: #1c2f1a; --bs-body-bg-rgb: 238, 242, 236; --bs-body-color-rgb: 16, 36, 15; --bs-danger-rgb: 169, 38, 32; } /* Cyanotype blue under white rules. */ :root[data-theme="blueprint-dark"], [data-gn-palette="blueprint-dark"] { color-scheme: dark; --gn-bg: #0b1d33; --gn-surface: #12283f; --gn-surface-2: #1a334c; --gn-border: #27455f; --gn-border-strong: #6b90ad; --gn-text: #e6eef5; --gn-text-muted: #9db3c6; --gn-accent: #6ecbff; --gn-accent-hover: #9adcff; --gn-accent-2: #c0abfd; --gn-on-accent-2: #041220; --gn-on-accent: #041220; --gn-fill-shade: white; --gn-link: #7fd2ff; --gn-link-hover: #a6e2ff; --gn-success: #56c68f; --gn-danger: #ff7b7b; --gn-warning: #e9b552; --gn-info: #79d8e8; --gn-code: #f0a878; --gn-focus-ring: rgba(110, 203, 255, .30); --gn-shadow: none; --gn-sidebar-bg: #12283f; --gn-sidebar-text: #cfe0ee; --bs-body-bg-rgb: 11, 29, 51; --bs-body-color-rgb: 230, 238, 245; --bs-danger-rgb: 255, 123, 123; } /* Drafting stock, blue rules, graphite type. */ :root[data-theme="blueprint-light"], [data-gn-palette="blueprint-light"] { color-scheme: light; --gn-bg: #eef1f5; --gn-surface: #ffffff; --gn-surface-2: #e2e7ee; --gn-border: #cdd5df; --gn-border-strong: #6f7a88; --gn-text: #1e242b; --gn-text-muted: #545c66; --gn-accent: #1a5490; --gn-accent-hover: #133f6e; --gn-accent-2: #7d5095; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; --gn-fill-shade: black; --gn-link: #17558f; --gn-link-hover: #10406d; --gn-success: #1c6b46; --gn-danger: #a92620; --gn-warning: #74500a; --gn-info: #0f5f79; --gn-code: #92440f; --gn-focus-ring: rgba(26, 84, 144, .30); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #e2e7ee; --gn-sidebar-text: #2b323a; --bs-body-bg-rgb: 238, 241, 245; --bs-body-color-rgb: 30, 36, 43; --bs-danger-rgb: 169, 38, 32; } /* Slate, smoke and a cold blue. */ :root[data-theme="noir-dark"], [data-gn-palette="noir-dark"] { color-scheme: dark; --gn-bg: #121417; --gn-surface: #1a1d21; --gn-surface-2: #23272c; --gn-border: #31363d; --gn-border-strong: #6a727c; --gn-text: #dfe3e8; --gn-text-muted: #969da6; --gn-accent: #7fb2e6; --gn-accent-hover: #a3caf0; --gn-accent-2: #b694d1; --gn-on-accent-2: #08111c; --gn-on-accent: #08111c; --gn-fill-shade: white; --gn-link: #8dbcec; --gn-link-hover: #b0d3f4; --gn-success: #5cbb8c; --gn-danger: #ef7373; --gn-warning: #dfae4e; --gn-info: #64bcd9; --gn-code: #e0a17a; --gn-focus-ring: rgba(127, 178, 230, .30); --gn-shadow: none; --gn-sidebar-bg: #1a1d21; --gn-sidebar-text: #c5cbd2; --bs-body-bg-rgb: 18, 20, 23; --bs-body-color-rgb: 223, 227, 232; --bs-danger-rgb: 239, 115, 115; } /* Pale linen and deep indigo. */ :root[data-theme="noir-light"], [data-gn-palette="noir-light"] { color-scheme: light; --gn-bg: #f4f2ee; --gn-surface: #fdfcfa; --gn-surface-2: #e8e5df; --gn-border: #d6d2ca; --gn-border-strong: #77726a; --gn-text: #1f2229; --gn-text-muted: #565a62; --gn-accent: #2f4478; --gn-accent-hover: #23335a; --gn-accent-2: #582c5a; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; --gn-fill-shade: black; --gn-link: #2c4074; --gn-link-hover: #1f2e55; --gn-success: #1c6b46; --gn-danger: #a92620; --gn-warning: #7a5406; --gn-info: #0f5f79; --gn-code: #9a4a12; --gn-focus-ring: rgba(47, 68, 120, .30); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #e8e5df; --gn-sidebar-text: #2c3038; --bs-body-bg-rgb: 244, 242, 238; --bs-body-color-rgb: 31, 34, 41; --bs-danger-rgb: 169, 38, 32; } /* Warm dark browns around one live coal. --gn-code is pulled off the orange ramp so it stays tellable from the accent. */ :root[data-theme="ember-dark"], [data-gn-palette="ember-dark"] { color-scheme: dark; --gn-bg: #17120f; --gn-surface: #1f1915; --gn-surface-2: #29211c; --gn-border: #3a2f27; --gn-border-strong: #8a7565; --gn-text: #efe6de; --gn-text-muted: #b2a294; --gn-accent: #ff8f4d; --gn-accent-hover: #ffae7d; --gn-accent-2: #9d8bf9; --gn-on-accent-2: #1a0c02; --gn-on-accent: #1a0c02; --gn-fill-shade: white; --gn-link: #ffa268; --gn-link-hover: #ffc19a; --gn-success: #64c08d; --gn-danger: #ff7a72; --gn-warning: #e6b74f; --gn-info: #66bcda; --gn-code: #e8c07d; --gn-focus-ring: rgba(255, 143, 77, .30); --gn-shadow: none; --gn-sidebar-bg: #1f1915; --gn-sidebar-text: #d5c8bc; --bs-body-bg-rgb: 23, 18, 15; --bs-body-color-rgb: 239, 230, 222; --bs-danger-rgb: 255, 122, 114; } /* Warm neutrals and a clay accent. */ :root[data-theme="ember-light"], [data-gn-palette="ember-light"] { color-scheme: light; --gn-bg: #f7f2e9; --gn-surface: #fffdf8; --gn-surface-2: #ece5d8; --gn-border: #dcd3c2; --gn-border-strong: #7e7462; --gn-text: #241f19; --gn-text-muted: #5c5449; --gn-accent: #9c4213; --gn-accent-hover: #7c340e; --gn-accent-2: #615bb2; --gn-on-accent-2: #ffffff; --gn-on-accent: #ffffff; --gn-fill-shade: black; --gn-link: #96400f; --gn-link-hover: #74300b; --gn-success: #1c6b46; --gn-danger: #a92620; --gn-warning: #6f4c05; --gn-info: #0f5f79; --gn-code: #7a4a12; --gn-focus-ring: rgba(156, 66, 19, .30); --gn-shadow: 0 1px 2px rgba(31, 29, 24, .06), 0 4px 12px rgba(31, 29, 24, .07); --gn-sidebar-bg: #ece5d8; --gn-sidebar-text: #302a22; --bs-body-bg-rgb: 247, 242, 233; --bs-body-color-rgb: 36, 31, 25; --bs-danger-rgb: 169, 38, 32; } /* hot-dog-stand was here. Retired 2026-08-09 (ADR-044 §6): the goal is letting readers read comfortably, not offering hostility as a novelty. Its ThemeMode row is DEACTIVATED rather than deleted, so live users holding the key fall back to the default with no user-database migration. Do not reintroduce the block — a stored key with no active row is the intended dead end. */ /* ── 1c. The font list (ADR-044 §4) ───────────────────────────────────────── data-font on comes from the reader's choice (App.razor). The list is short on purpose: every self-hosted face is bytes on the wire. PER-CHOICE LOADING IS NOT A MECHANISM, IT IS THE ABSENCE OF ONE. A browser fetches an @font-face file only when a rule actually renders text in that family, and exactly one --gn-font wins per document — so declaring all four families below costs nothing to a reader who picked none of them. Do not "optimise" this into per-choice s or a conditional loader; that would make it worse and slower. ADR-044 §4's finding is that the evidence is about SPACING, not typefaces — the accessibility work is the type scale, --gn-lh and --gn-measure in §1, not this section. The honest labelling that goes with each entry lives in Data/FontChoices.cs, next to the keys, because a label that drifts from its font is worse than no label. Files are woff2 only (every browser that runs this site supports it) and named by US, not by upstream — see wwwroot/fonts/README.md. font-display: swap so text is readable in the fallback while the file arrives. No real italics: browsers synthesise a passable oblique and a second file per family is not worth the bytes for a preference feature. */ @font-face { font-family: "Cascadia Mono"; src: url("fonts/cascadia-mono.woff2") format("woff2"); font-weight: 200 700; /* variable */ font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lexend"; src: url("fonts/lexend.woff2") format("woff2"); font-weight: 100 900; /* variable */ font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("fonts/opendyslexic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("fonts/opendyslexic-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; /* variable */ font-style: normal; font-display: swap; } /* One block per FontChoices key. (0,2,0), so these beat §1's default whatever the order. Every stack keeps a system fallback: if a woff2 is missing the page is plain, not broken. EACH BLOCK CARRIES A SECOND SELECTOR, [data-gn-font="…"], for exactly the reason §1b's palettes carry [data-gn-palette]: so a choice can be worn by ONE ELEMENT instead of by the page, and /styleguide can show all eight specimens at once (row S4.5). The root selector stays (0,2,0) and the element one is (0,1,0) — specificity is per-selector in a list, so adding it changes nothing about how the page-level font resolves. Add a font and it needs BOTH selectors, or it is invisible to the preview. Cascadia has no block: it is the :root default in §1, and a [data-gn-font="cascadia"] element inherits it already. */ :root[data-font="system-sans"], [data-gn-font="system-sans"] { --gn-font: var(--bs-font-sans-serif); } /* Bootstrap has no serif variable — this is the only stack written out by hand. */ :root[data-font="system-serif"], [data-gn-font="system-serif"] { --gn-font: Georgia, Cambria, "Times New Roman", serif; } :root[data-font="system-mono"], [data-gn-font="system-mono"] { --gn-font: var(--bs-font-monospace); } :root[data-font="atkinson"], [data-gn-font="atkinson"] { --gn-font: "Atkinson Hyperlegible", var(--bs-font-sans-serif); } :root[data-font="lexend"], [data-gn-font="lexend"] { --gn-font: "Lexend", var(--bs-font-sans-serif); } :root[data-font="opendyslexic"], [data-gn-font="opendyslexic"] { --gn-font: "OpenDyslexic", var(--bs-font-sans-serif); } :root[data-font="source-sans"], [data-gn-font="source-sans"] { --gn-font: "Source Sans 3", var(--bs-font-sans-serif); } /* --gn-font is a token, not a font-family rule: nothing reads it unless something says `font-family: var(--gn-font)`. On the page that is --bs-body-font-family in §2, which `body` picks up — but a [data-gn-font] specimen is a DIV, and it inherits whatever body already resolved. This is the one line that makes the attribute do anything on its own. */ [data-gn-font] { font-family: var(--gn-font); } /* ── 1d. The size and measure dials (ADR-044 §3/§4) ────────────────────────── Where ADR-044 §4's accessibility budget actually gets spent: the evidence is about spacing, not typefaces, so these two matter more than the list above them. THE PERCENTAGES AND THE ch VALUES LIVE HERE AND NOWHERE ELSE. Data/AppearanceChoices.cs holds the keys and the words; putting a number in both would be two places to disagree. data-size moves --gn-fs-root, which §1 declares as `font-size` on :root — so it moves EVERY step of the scale at once, headings included, because every step is a rem. That is also why no rule on this site may write a literal font-size: a literal resolves against nothing the reader can turn, and drops silently out of this control. A percentage, never a rem or a px: it resolves against the reader's own browser default, so "Default" honours someone who already set 20px in their browser instead of overriding them back down to 16. `md` therefore needs no block — it IS §1's 100%. No [data-gn-size] / [data-gn-measure] element twins, unlike §1b's palettes and §1c's fonts. Those exist so /styleguide can show twelve palettes at once; a size specimen is already the whole page, and a --gn-fs-root that resolved per element would mean rem meaning two different things in one document. */ :root[data-size="xs"] { --gn-fs-root: 80%; } :root[data-size="sm"] { --gn-fs-root: 90%; } :root[data-size="lg"] { --gn-fs-root: 115%; } :root[data-size="xl"] { --gn-fs-root: 130%; } /* ch, never px (ADR-042 §7): the line holds the same number of CHARACTERS whichever face §1c resolved, and a px width silently becomes a 95-character line on a narrow one. */ :root[data-measure="sm"] { --gn-measure: 56ch; } :root[data-measure="lg"] { --gn-measure: 84ch; } /* Selection controls, site-wide — M2's own list for the second hue ("selection controls like sliders and switches… progress bars"). One rule replaces every hand-set accent-color. On the ELEMENTS, deliberately, not on :root. accent-color: var(…) set at the root would compute to one colour there and inherit as that colour, so a [data-gn-palette] subtree could never show its own — which is exactly what the palette picker's rows need. Resolved per element, each one reads whichever palette it actually sits in. */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--gn-accent-2); } /* ── 2. Bootstrap 5.3 remaps — route Bootstrap through the tokens ─────────── */ :root { --bs-body-font-family: var(--gn-font); --bs-body-font-size: var(--gn-fs-md); --bs-body-line-height: var(--gn-lh); --bs-body-bg: var(--gn-bg); --bs-body-color: var(--gn-text); /* Bootstrap hardcodes #d63384 / #e685b5 here and nothing routed it through the tokens, so inline stayed pink under every persona theme. */ --bs-code-color: var(--gn-code); --bs-secondary-color: var(--gn-text-muted); --bs-secondary-bg: var(--gn-surface-2); --bs-tertiary-bg: var(--gn-surface); --bs-border-color: var(--gn-border); --bs-border-radius: var(--gn-radius); --bs-border-radius-sm: var(--gn-radius-sm); --bs-border-radius-lg: var(--gn-radius-lg); --bs-link-color: var(--gn-link); --bs-link-hover-color: var(--gn-link-hover); --bs-focus-ring-color: var(--gn-focus-ring); --bs-box-shadow: var(--gn-shadow); --bs-form-valid-color: var(--gn-success); --bs-form-valid-border-color: var(--gn-success); --bs-form-invalid-color: var(--gn-danger); --bs-form-invalid-border-color: var(--gn-danger); } /* 5.3 anchors read RGB-triplet vars (rgba(var(--bs-link-color-rgb),…)); route them through the hex tokens instead so only hex needs maintaining. Costs the (unused) link-opacity utilities. */ a { color: var(--bs-link-color); } a:hover { color: var(--bs-link-hover-color); } /* Bootstrap has no heading-font variable. Sizes come off the scale rather than Bootstrap's own ladder, so a type-scale step moves the headings too — otherwise the reader turns the dial and only the body text answers. h1/h2 keep a fluid middle term because Bootstrap's already were; the clamp BOUNDS are scale tokens, so the user's step still moves both ends. Anything fluid beyond these two is parked (PLAN Parking Lot). */ h1, h2, h3, h4, h5, h6 { font-family: var(--gn-font-heading); line-height: var(--gn-lh-tight); } h1 { font-size: clamp(var(--gn-fs-3xl), 1.375rem + 1.5vw, var(--gn-fs-4xl)); } h2 { font-size: clamp(var(--gn-fs-2xl), 1.325rem + .9vw, var(--gn-fs-3xl)); } h3 { font-size: var(--gn-fs-2xl); } h4 { font-size: var(--gn-fs-xl); } h5 { font-size: var(--gn-fs-lg); } h6 { font-size: var(--gn-fs-md); } /* Same problem as the headings, one class further down: Bootstrap's .lead is a bare `font-size: 1.25rem; font-weight: 300`, so a reader turning the type dial moved every paragraph on the page EXCEPT the standfirst. On the scale it becomes --gn-fs-lg. The weight goes back to 400 as well — 300 is a face this site does not load (Cascadia Mono ships one weight), so it was already synthesising or silently falling back. Row S4.5. */ .lead { font-size: var(--gn-fs-lg); font-weight: 400; } /* The ground, the ink and the face — on OUR side of the seam (S7.0 item B1, 2026-08-13). These three used to reach the page only through §2's remaps feeding Bootstrap's reboot `body` rule, which put the site's most identity-defining values on the wrong side of ADR-043 §6's test: pull the vendored sheet and the page rendered transparent Times New Roman. The remaps above stay — Bootstrap's own plumbing still reads them — this rule is what makes the identity survive without them. margin: 0 is here for the same reason; it is reboot's, and without it the seam test grows an 8px halo. */ body { margin: 0; background-color: var(--gn-bg); color: var(--gn-text); font-family: var(--gn-font); font-size: var(--gn-fs-md); line-height: var(--gn-lh); } /* ── Responsive floors that are genuinely global (ADR-042 §8) ──────────────── Only the two that can be stated once for the whole site live here. The 44px touch target is a --gn-touch number for each component to honour, not a blanket min-height: growing every control in one rule would resize the entire site from a token row, and ADR-042 §8's own wording is "grow the target, keep the ink small". */ /* iOS zooms the page when a focused input computes under 16px and never zooms back. max() so the floor survives a reader dialling the type scale down. */ [data-gn-input="coarse"] :is(input, select, textarea) { font-size: max(16px, var(--gn-fs-md)); } /* WCAG 1.4.11: a control's boundary needs 3:1, which a quiet card separator does not. --gn-border stays quiet for cards and rules; controls take the strong one. */ .form-control, .form-select, .form-check-input, .form-range { border-color: var(--gn-border-strong); } /* ── Buttons — OURS (ADR-043 §2, migrated by S7.0 item B2, 2026-08-13) ─────── The .btn-* class NAMES stay Bootstrap's — ~150 call sites keep working and renaming them buys no reader anything. The RULES are ours: styled directly off the tokens, winning over the vendored sheet purely by source order (same specificity, later file), keeping the exact geometry Bootstrap gave them so nothing moved the day they landed. Before this, the blocks here only fed --bs-btn-* variables into rules that lived in bootstrap.min.css, so ADR-043 §6's test failed on every button (the fills went grey). Now: pull the vendored sheet and a button keeps its look. Two deliberate changes from Bootstrap's originals: - sizes sit ON THE SCALE (--gn-fs-md/sm/lg), not literal rems, so button text follows the reader's type dial like everything else (ADR-044 §4); - there are NO .btn-outline-* rules. Filled, never transparent (owner rule, 2026-07-22) — the four outline remap blocks were deleted here, not migrated (S7.0 item B3). An outline class in markup now renders as a plain .btn. Hover/active shades reproduce the remap-era math: 15%/20% toward --gn-fill-shade, the same mix palette-contrast.py walks when it checks --gn-on-accent (its shade() is this color-mix in Python). gn-cta is always used as `btn gn-cta`. */ .btn { display: inline-block; padding: .375rem .75rem; font-family: var(--gn-font); font-size: var(--gn-fs-md); font-weight: 400; line-height: var(--gn-lh); text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: var(--gn-radius); background-color: transparent; color: var(--gn-text); transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn:focus-visible { outline: 0; box-shadow: 0 0 0 .25rem var(--gn-focus-ring); } .btn:disabled, .btn.disabled, fieldset:disabled .btn { pointer-events: none; opacity: .65; } /* Sign-in T&C checkbox (ADR-016 amendment 2026-08-13): while the box in .gn-terms-check is unticked, the form's submit buttons wear the disabled look. The checkbox's `required` attribute is the real gate — pointer-events stays on so a click surfaces the browser's "check this box" message instead of dying silently. Static SSR pages, hence CSS not JS. */ form:has(.gn-terms-check input:not(:checked)) button[type="submit"] { opacity: .65; cursor: not-allowed; } .btn-sm { padding: .25rem .5rem; font-size: var(--gn-fs-sm); border-radius: var(--gn-radius-sm); } .btn-lg { padding: .5rem 1rem; font-size: var(--gn-fs-lg); border-radius: var(--gn-radius-lg); } .btn-primary, .gn-cta { color: var(--gn-on-accent); background-color: var(--gn-accent); border-color: var(--gn-accent); } .btn-primary:hover, .gn-cta:hover, .btn-primary:active, .gn-cta:active { color: var(--gn-on-accent); background-color: var(--gn-accent-hover); border-color: var(--gn-accent-hover); } .btn-secondary { color: var(--gn-text); background-color: var(--gn-surface-2); border-color: var(--gn-border); } .btn-secondary:hover, .btn-secondary:active { color: var(--gn-text); background-color: var(--gn-border); border-color: var(--gn-border); } .btn-danger { color: var(--gn-on-accent); background-color: var(--gn-danger); border-color: var(--gn-danger); } .btn-danger:hover { color: var(--gn-on-accent); background-color: color-mix(in srgb, var(--gn-danger) 85%, var(--gn-fill-shade)); border-color: color-mix(in srgb, var(--gn-danger) 85%, var(--gn-fill-shade)); } .btn-danger:active { color: var(--gn-on-accent); background-color: color-mix(in srgb, var(--gn-danger) 80%, var(--gn-fill-shade)); border-color: color-mix(in srgb, var(--gn-danger) 80%, var(--gn-fill-shade)); } .btn-success { color: var(--gn-on-accent); background-color: var(--gn-success); border-color: var(--gn-success); } .btn-success:hover { color: var(--gn-on-accent); background-color: color-mix(in srgb, var(--gn-success) 85%, var(--gn-fill-shade)); border-color: color-mix(in srgb, var(--gn-success) 85%, var(--gn-fill-shade)); } .btn-success:active { color: var(--gn-on-accent); background-color: color-mix(in srgb, var(--gn-success) 80%, var(--gn-fill-shade)); border-color: color-mix(in srgb, var(--gn-success) 80%, var(--gn-fill-shade)); } /* Ink comes off --gn-on-accent like every other fill, so warning needs no special case: the dark ground already resolves it to dark ink. */ .btn-warning { color: var(--gn-on-accent); background-color: var(--gn-warning); border-color: var(--gn-warning); } .btn-warning:hover { color: var(--gn-on-accent); background-color: color-mix(in srgb, var(--gn-warning) 85%, var(--gn-fill-shade)); border-color: color-mix(in srgb, var(--gn-warning) 85%, var(--gn-fill-shade)); } .btn-warning:active { color: var(--gn-on-accent); background-color: color-mix(in srgb, var(--gn-warning) 80%, var(--gn-fill-shade)); border-color: color-mix(in srgb, var(--gn-warning) 80%, var(--gn-fill-shade)); } /* The one sanctioned non-filled variant: an inline text action wearing button bones. */ .btn-link { color: var(--gn-link); text-decoration: underline; background-color: transparent; border-color: transparent; } .btn-link:hover, .btn-link:active { color: var(--gn-link-hover); background-color: transparent; border-color: transparent; } .nav-pills { --bs-nav-pills-link-active-color: var(--gn-on-accent); --bs-nav-pills-link-active-bg: var(--gn-accent); } /* Bootstrap hardcodes these focus/checked colors — no variable exists. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--gn-accent); outline: 0; box-shadow: 0 0 0 .25rem var(--gn-focus-ring); } .form-check-input:checked { background-color: var(--gn-accent); border-color: var(--gn-accent); } /* ── 3a. The shell frame — ADR-042 (bar · drawer · strip) ──────────────────── Global, not scoped .razor.css, for three reasons that each rule out scoping on their own: the classes are `gn-*` (this file's job by the css-tokens contract); the drawer is driven by `#gn-nav:checked ~ …`, which crosses a component boundary the moment the drawer's contents are their own component; and `body` / `html` cannot be reached by scoped CSS at all — Blazor rewrites the selector to `body[b-xxxxx]`, which matches nothing. THE Z-STACK, DECIDED ONCE (ADR-042 Consequences). Nothing on the site may invent a new layer without changing this comment: 1000 chrome: .gn-bar, .gn-strip 1010 game canvas + overlay (game.js #gn-game-overlay; its handle prompt at 1012) — ABOVE the chrome since 2026-08-13 (owner, S7.0 close-out): the ship flies over the strip, not under it. Chrome is inert while playing and the canvas is pointer-events:none, so the swap steals no clicks in either state. 900 is retired, not reassigned. 1050 .gn-scrim 1100 .gn-drawer 1150 #gn-win — the cleared-the-run screen. Over the strip on purpose: it ends the run, so the readout behind it is finished with 1150 .gn-toast — same reason, same clearance. The two never co-exist: a toast follows a form post, and a form post ends a run 1150 the EasyMDE editor in full screen (blog.js raises it there, not here — the vendor stylesheet is injected at runtime and would win the tie). It ships at z-index 8/9, which put it UNDER the chrome: full screen with the bar sitting on top of its toolbar, and no visible way back out 1200 .gn-skip, #blazor-error-ui — always reachable, over everything .gn-dafuq-panel is NOT on this list and does not need to be: a shown [popover] is in the browser's TOP LAYER, which sits above every stacking context here regardless of z-index. Row S3.8 added it without touching a number — the same is true of anything else that ever uses the popover API, which is the reason to prefer it. 1090 used to hold the Bootstrap toast container. Row S4.7 retired it — the trophy earn announcement is a row in the document now, at no layer at all. Bootstrap's own .modal-backdrop (1050) and .toast-container (1090) still exist in the vendored CSS and DRIP's nine compiled modals still raise a backdrop on DRIP routes, which ADR-043 §4 states plainly rather than pretends away; nothing this repo authors goes there any more. The bar and the strip are opaque (--gn-surface), never translucent, so neither needs a gradient to read as chrome over the page. */ body { padding-top: var(--gn-bar-h); padding-bottom: calc(var(--gn-strip-h) + env(safe-area-inset-bottom)); } /* WCAG 2.4.11 Focus Not Obscured: a focused element must never land under fixed chrome. FocusOnNavigate targets h1 on every navigation, so this is load-bearing, not a nicety. */ html { scroll-padding-top: calc(var(--gn-bar-h) + 8px); scroll-padding-bottom: calc(var(--gn-strip-h) + 8px); /* Reserve the scrollbar's gutter permanently. Without it, locking the scroll below hands those ~15px back to the layout and the whole page — bar, strip and prose — jumps sideways the instant the drawer opens. It also stops the same jump between a short page and a long one. */ scrollbar-gutter: stable; } /* THE PAGE DOES NOT SCROLL BEHIND AN OPEN DRAWER (owner, 2026-08-08 — this reverses ADR-042 §3's "no body-scroll lock"). Two scrollbars side by side was the complaint and it is a fair one: shell.js already marks the bar, main and strip `inert` while the drawer is open, so the page behind it is not reachable — leaving it scrollable only offers a second bar that moves content nobody can touch. §3's other two refusals stand: still no aria-modal, still no focus trap. On the root, not on body: body's overflow only propagates to the viewport while the root's is `visible`, which is a condition another rule can quietly break. CSS-only, like the rest of the drawer — no JS to fall out of step with the checkbox. Known ceiling: iOS Safari ignores overflow:hidden here, and the fix for that is a position:fixed body plus scroll-position restore in JS — worth it only if the owner sees it on a real device. */ :root:has(.gn-nav-toggle:checked) { overflow: hidden; } .gn-skip { position: absolute; left: -9999px; top: 0; z-index: 1200; background: var(--gn-accent); color: var(--gn-on-accent); padding: .7rem 1rem; font-weight: 700; text-decoration: none; } .gn-skip:focus { left: 0; color: var(--gn-on-accent); } /* The drawer's ONE focusable control (ADR-042 §3). Visually hidden but NOT display:none — it keeps its place in the tab order and Space still toggles it. aria-label pins its name: the Menu button and the X are further