/* ============================================================ NerdStack retro console theme — spec-ui-foundations.md Visual source of truth: NerdStack_Shell_Mockup_v2_Retro.html ============================================================ */ /* ---- self-hosted fonts (spec §2: no Google Fonts CDN in prod) ---- */ @font-face{ font-family:'Press Start 2P';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/press-start-2p-400.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap; src:url('/fonts/ibm-plex-mono-700.woff2') format('woff2'); } /* Outfit — the DexHQ brand face (S5). Self-hosted like the two above; no fonts.googleapis.com (DECISIONS 2026-07-28), same offline/PWA reasoning as the vendored Chart.js. License SIL OFL 1.1: wwwroot/fonts/OFL.txt ships beside the files because the license requires it, not as housekeeping. Provenance: fonts.gstatic.com, Outfit v15, fetched 2026-07-28 — the gstatic URLs are content-hashed, so record the version if these are ever refreshed. ONE @font-face per unicode-range, NOT one per weight. Outfit is a VARIABLE font, so the scoping note's "trim 5 weights to 400/600/700" would have saved nothing: Google serves the SAME file for every requested weight. Confirmed at table level rather than by URL identity — both subsets carry an `fvar` table declaring `wght 100..900` (WOFF2 stores fvar/cmap untransformed, so it parses straight out of the brotli stream). `font-weight:100 900` is the range syntax that hands that whole axis to the browser; three fixed-weight blocks pointing at one variable file would download it once and then throw the axis away. 46 KB for every weight, versus ~90 KB for five static cuts. NOT covered by either subset: U+2726 ✦ and U+25C6 ◆, the two DEX glyphs. See --mono/--px in the dexhq block for the fallback and why it has to be explicit. */ @font-face{ font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap; src:url('/fonts/outfit-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:'Outfit';font-style:normal;font-weight:100 900;font-display:swap; src:url('/fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F, U+A720-A7FF; } /* ---- design tokens (spec §1) ---- THE token block. Every colour and every shape constant the shell paints is declared here; nothing below this block may carry a colour literal. The one deliberate exception is the barcode label preview (.barcode) — see the comment there. Adding a theme therefore means overriding VALUES in this block under a [data-theme=…] scope. No rule below it should need to change. Tokens that happen to share a value today (--ink-dark == --bg, --chart-green == --good, …) are kept SEPARATE on purpose: they answer different questions and a light-ground theme pulls them apart. Do not "simplify" by aliasing. ---- THEME SCOPING (S3) ---- The block is scoped to BOTH :root and [data-theme="retro"] as ONE selector list, not two copies — a duplicated 60-token block would be exactly the drift this contract exists to prevent. * [data-theme="retro"] is the real scope. ThemeService resolves the theme cookie server-side and stamps it into in the first byte (App.razor), so the right tokens are live before the first paint. That is why the preference is a cookie and not localStorage. * :root is the FALLBACK, and it is load-bearing: it is what renders the shell correctly if the attribute is ever missing or holds something we do not recognise. An unknown cookie already resolves to the default theme server-side, so this is a second line of defence — but a theme system whose failure mode is an unstyled page is not one worth having. S9 NOTE, written down because it is exactly the kind of quiet wrongness this programme keeps finding: since S9 the cookie-less DEFAULT is dexhq, so this :root fallback is no longer the default theme's block. It cannot diverge in practice — App.razor is the only page that links this stylesheet and it always stamps a resolved, registered key, so data-theme is never absent — which is why :root was deliberately NOT moved onto the dexhq block. Moving it is also not the one-line change it looks like: :root and [data-theme="retro"] have EQUAL specificity (0,1,0 each), so a :root sitting in the LATER dexhq block would win over the retro block and break retro outright. What :root promises is "the shell renders", not "the shell renders the default theme". ThemeContractTests.Every_token_with_a_csharp_reader_matches_the_css_declaration_for_every_theme pins that reading (every token with a C# reader resolves to that theme's own value under every registered theme, dexhq included, even though dexhq is not sourced from :root) - it does NOT prove dexhq redeclares those tokens in its own block; EffectiveTokens merges :root first, so a token dexhq omitted and silently inherited would still pass this one. The own-block guarantee is Every_registered_theme_declares_every_token_the_fallback_declares, six lines below - so nobody re-derives either reading as a bug. Adding a theme = a [data-theme="dexhq"]{…} block AFTER this one. Equal specificity, so source order decides and the later block wins. It MUST redeclare every token here: any token it omits silently inherits retro's value through :root. ThemeContractTests (Every_registered_theme_declares_every_token_the_fallback_declares) enforces that, because "silently inherited a dark-theme colour into a light theme" is precisely the class of bug a screenshot review reads straight past. */ :root, [data-theme="retro"]{ /* ---- brand + status hues ---- */ --accent:#b45bff; /* nerd purple — active nav, links, primary buttons */ --accent2:#4df3ff; /* cyan — section headings, secondary actions */ /* --info has NO css consumer. It exists so MudBlazor's Info slot is named by a token instead of the loose hex that used to sit in NerdTheme.cs — the last un-tokenized colour in the app. CORRECTION (S10, measured; S10b, gated): "no css rule uses it" was read for two slices as "no surface uses it", which is why the contrast gate never listed it. MUDBLAZOR USES IT — it is a GROUND, and Mud paints its own white ContrastText on it. Sync Health fires Severity.Info on every queued run, and #fff on this blue was 2.47:1: worse than either of the two button pairs already escalated to Miguel. RESOLVED (S12, Miguel approved): the VALUE does not move and the INK does. On this theme --good/--warn/--bad/--info are also the status INK painted on dark grounds (.s-ok, .hp.warn, .t-kill, .banner .bang …), so darkening them to carry white would break their primary job in order to fix their secondary one. NerdTheme now hands MudBlazor --ink-dark as the ContrastText for all four severity slots — which is exactly what --ink-dark has always meant on this theme, "dark ink ON a bright fill". Measured on the UNCHANGED hues: --good 10.70, --warn 12.88, --bad 6.16, --info 7.52, all clear of the 5.27 house floor, and no shell pixel moves. */ --info:#5ba8ff; /* MudBlazor Info surfaces — 7.52:1 under --ink-dark */ /* --dex is THE brand value (DexHQ brand guide, "the one to protect"). It is a FILL/BORDER colour: button grounds, rules, the 3px .dexrow spine, the ✦/◆ chip outlines. --dex-text is the INK value — NEVER paint text with --dex on this theme's dark grounds. Why they had to split: #EC4FA1 is 0.10 darker in OKLCH L than the old #ff7bd5, which costs ~2.3 points of contrast. Measured on --panel it lands at 5.02:1 against the §8 floor of 5.27:1 (= --dim on --panel, read theme-relatively per the 2026-07-28 ledger line), and it fails on every other dex ground too — --panel2 4.60, dexrow 4.65, --dex-draft-bg 4.99. As a BORDER it is fine: 4.65–5.02:1 all clear the 3:1 WCAG 1.4.11 non-text floor, so the brand value keeps every job where legibility isn't the question. --dex-text is #EC4FA1 lifted to OKLCH L 0.71 at its EXACT chroma (0.207) and hue (352°) — still in sRGB gamut, so it is the same pink, not a different one, and NOT a quiet revert to #ff7bd5 (which sits at hue 341°, C 0.189). It clears both readings of §8 on all seven dex grounds (worst case 5.37:1 on --panel2 vs a 5.27 floor). A light-ground theme overrides both: there --dex-text will be a DARKENED pink, which is exactly why this is a token and not a filter. */ --dex:#EC4FA1; /* Dex pink — fills, borders, marks */ --dex-text:#fa5dad; /* Dex pink as INK on a dark ground — see note above */ --good:#3ee06c; --warn:#ffd23e; --bad:#ff5b6a; /* ---- grounds, darkest → lightest ---- */ --shadow:#0a0a12; /* hard offset shadow */ --inset:#0d0d16; /* sunken ground: inputs, wells, run log, thumb boxes */ --inset-2:#101019; /* one step up — sticky head inside a sunken menu */ --bg:#12121c; /* deep console navy */ --inset-3:#151521; /* two steps up — placeholder fill in a sunken menu */ --panel:#1b1b28; --panel2:#222234; --dex-draft-bg:#2a1626; /* DEX✦ DESCRIBE draft state — pink-tinted panel */ /* ---- ink ---- */ --text:#e8e6f2; --dim:#8f8cab; --text-bright:#fff; /* one step brighter than --text: h1, KPI value, active nav */ /* --ink-dark is the ink for EVERY saturated fill on this theme as of S12: the cyan/green/pink buttons and the avatar already used it, and .btn.primary / .btn.danger / .toggle button.on moved onto it because white on --accent (3.57) and on --bad (3.02) FAILED WCAG AA outright. It is also what MudBlazor now paints on the four severity fills (see the --info note). */ --ink-dark:#12121c; /* dark ink ON a bright fill — every fill, this theme */ /* --ink-light is DECLARED AND UNPAINTED on this theme as of S12, and that is the honest state rather than an oversight: its only two consumers were the two WCAG failures above. It stays because it is the vocabulary counterpart to --ink-dark that a theme with DARK saturated fills would need, and because the wordmark gate's positive control measures it. Collapsing the pair into one --ink-on-fill token is a follow-up, not a fix this slice was asked for. */ --ink-light:#fff; /* light ink on a saturated fill — no shell rule paints it */ /* ---- icon cutouts (S4) ---- The "hole" tone in the two-tone sprites: the ground seen THROUGH the icon, not a colour of the icon. It is var(--bg) because that is the surface the sprites were drawn against, and because a light theme then gets a correct page-ground hole for free by overriding --bg. It is NOT aliased to --bg in the rule, and it is not var(--panel) either, because icons draw on several grounds at once (page --bg, sidebar --panel, hovered/active nav --panel2, KPI card --panel): one value cannot be right for all of them. Keeping it a separate, INHERITED token is what lets a container restate it per surface later without touching the sprite table. */ --icon-hole:var(--bg); /* ground showing through a sprite cutout — see .pix .hole */ /* ---- rules ---- */ --line:#39395a; /* chunky 2px borders */ --hairline:#2a2a40; /* 1px table/list rule — quieter than --line */ /* ---- structural constants (spec §1/§7: the retro shell is square + chunky) ---- These are what a rounded, hairline theme overrides. Today's values are the retro ones, so declaring them changes nothing; they exist so a theme never has to touch a rule. */ --radius:0; /* corner radius on panels/buttons */ --border-w:2px; /* the chunky border weight */ --shadow-offset:4px 4px; /* hard offset of the panel drop shadow */ /* ---- alpha tints ---- Washes over a ground, so they must be re-derived per theme (a .09 purple over navy and a .09 purple over paper are not the same wash). Named by ROLE, not by value; the near-duplicate alphas below are historical drift, preserved deliberately. */ --accent-sel:rgba(180,91,255,.09); /* selected row / card / rate card */ --accent-zebra:rgba(180,91,255,.07); /* grouped band: family row, lane zebra, and (S5c) the EXPANDED parent row of a disclosure table — PO, shipment, PO-detail shipment. Same question: "this row heads a group of rows below it." */ --accent-hover:rgba(180,91,255,.06); /* hovered tappable row */ --accent-wash:rgba(180,91,255,.12); /* active module tab gradient wash */ --accent-press:rgba(180,91,255,.2); /* hovered tool button in a gallery cell */ --accent-sub:rgba(180,91,255,.03); /* S5c: ground of a nested sub-TABLE revealed by a disclosure (GearDex forecast months). Quieter than -zebra because the band it sits in already carries one. */ --accent2-tint:rgba(77,243,255,.05); /* info banner fill */ --warn-tint:rgba(255,210,62,.06); /* warn box + warn banner + (S5c) the buy-list top-up consolidation row: the generic warn wash at the generic alpha. */ --warn-tint-row:rgba(255,210,62,.05); /* S5c: table row flagged for attention — an ENDING rate/rule (RoyalDex terms), a licensor tagged with no deal to pay them. Distinct alpha from --warn-tint: historical drift, preserved per the note above. */ --bad-tint-row:rgba(255,91,106,.06); /* failed table row fill */ --bad-tint-banner:rgba(255,91,106,.07); /* bad banner fill */ --bad-tint-conflict:rgba(255,91,106,.05); /* S5c: a GROUP flagged as an overlap conflict — a design whose products are also on another design (double-pay risk). */ --bad-tint-conflict-item:rgba(255,91,106,.07); /* S5c: the ITEM inside that group — a product also carried by a sibling design. Same alpha as --bad-tint-banner and a different question; see the drift note. */ --bad-press:rgba(255,91,106,.2); /* hovered destructive tool button */ /* S5c: NEUTRAL lifts — no hue, just "one step off the ground it sits on". These are the two washes that were written as rgba(255,255,255,…) in Razor, i.e. lift-by-adding-white, which is only a lift on a DARK ground. On paper the same ROLE has to be a darken, so the token is named for the effect (lift off the ground) and each theme supplies the direction. */ --lift-band:rgba(255,255,255,.04); /* subtotal band inside a report table */ --lift-cell:rgba(255,255,255,.03); /* populated cell in a matrix */ /* UI-7 — alternating COLUMN band in a wide numeric matrix (.matrixwrap). TRANSPARENT ON RETRO BY DECISION, not by omission: Miguel asked for this after a DexHQ screenshot and said nothing about retro, and retro is a shipped surface. `transparent` composites to exactly --panel, so retro's PNGs are byte-identical BY CONSTRUCTION and turning it on later is a one-value edit here, not new code. Miguel: "The banding should be Retro also but we can add it later if needed." THE RETRO VALUE IS ALREADY DERIVED, so switching it on is a substitution and not a fresh piece of work: replace `transparent` with rgba(180,91,255,.06). composite over --panel #1b1b28 -> #241F35 --dim on it 4.92:1 (retro's house floor is --dim on --panel, 5.28; every wash on this theme sits under it BY CONSTRUCTION because a wash lifts the ground off the very pair that defines the floor — the documented wash debt, S12. 4.92 is mid-cohort and clears WCAG AA 4.5.) --text on it 12.88:1 CIELAB dE 8.11 vs the bare card, against retro's own card-against-page separation of 4.68. It is the accent family's HOVER rung (.06), one below the row zebra (.07) — the same relative position DexHQ's band takes in its own family, so the two themes were derived by one rule and not by two tastes. NOT the DexHQ alpha: retro LIFTS off --panel with --bg below it, DexHQ DARKENS off white with --bg immediately below, so the alphas are not portable in either direction (S10b). SWITCHING IT ON IS A TWO-LINE CHANGE, NOT ONE — verified by doing it and watching the build go red. The pair (--dim, [--col-band, --panel]) is already in ContrastGateTests and already runs on both themes, so it starts measuring 4.92 on its own; but 4.92 is under retro's 5.27 house floor and the gate fails it. That is the DOCUMENTED wash debt every retro wash carries (--accent-zebra 4.86, --lift-cell 4.88, --bad-tint-row 4.92 — every one of them exempted), so it needs a companion entry in the retro exemption block at 4.92 with the same reason. Anything else would be pretending this wash is different from the fifteen already there. */ --col-band:transparent; /* --dex-line CLOSED (S12, Miguel approved). It carried the PRE-brand pink #ff7bd5 at .45 alpha and composited to 2.44 / 2.50 / 2.53 on --panel2 / --panel / --bg — under the 3:1 non-text floor on every ground the chip lands on. The approved answer is the one DexHQ already took in S5: a SOLID border, not a re-derived alpha. Written as var(--dex) rather than a copy of #EC4FA1 so it can never drift from the brand value it is. Measured: 4.60 / 5.02 / 5.49. (DexHQ's --dex-line stays its own separately-derived #D63C90 — on paper the brand pink as a border is a different problem, and S5 solved it there.) --dex-tint is UNCHANGED and needs nothing: it is a .05 BACKGROUND wash, not a mark, so it owes no 3:1 of its own, and the inks that land on it measure --dex-text 5.43 and --dim 4.88 — the latter being the by-construction retro wash debt (every wash lifts the ground off --panel, the darkest card ground, which IS the floor), not a --dex-tint defect. It still carries #ff7bd5 rather than the brand #EC4FA1; at .05 that difference is sub-LSB, so re-hueing it would move pixels for no measurable gain and is left alone. */ --dex-tint:rgba(255,123,213,.05); /* DEX ◆ explain sub-row fill */ --dex-line:var(--dex); /* active DEX chip border — SOLID brand pink */ /* S5: the three dex washes that were hard-coded in RAZOR inline styles, out of reach of DesignTokenTests (which scans app.css only). Named by ROLE and kept at their EXACT existing alphas rather than collapsed onto --dex-tint — the alphas differ by site, and S1's rule for this block is that near-duplicate alphas are preserved deliberately, not tidied. Values are byte-for-byte what those three inline styles carried, so retro renders identically. */ --dex-box:rgba(255,123,213,.06); /* Dex advisory box fill (PO detail) */ --dex-band:rgba(255,123,213,.10); /* Dex-highlighted total row band */ --dex-sel:rgba(255,123,213,.12); /* selected cell in a Dex matrix */ /* ---- scrims (modal/overlay veils) ---- */ --scrim-heavy:rgba(10,10,18,.92); /* lightbox + gallery cell toolbar */ --scrim-reconnect:rgba(10,10,18,.82); /* Blazor reconnect overlay */ --scrim-confirm:rgba(10,10,18,.72); /* .modalwrap confirm overlay */ --scrim-gdmodal:rgba(6,6,12,.66); /* .gdmodal-back — note: deeper base */ --scanline:rgba(255,255,255,.015); /* CRT overlay stripe */ /* ---- gradient stripe darks ---- The darker band of each repeating-linear-gradient bar. Paired with the hue it stripes; the -alt pair belongs to the cash calendar, which was drawn separately from the HP bar. */ --stripe-good:#2fbf59; --stripe-warn:#d8ae23; --stripe-bad:#d4414f; --stripe-accent:#9a3fe0; --stripe-warn-alt:#d1ad33; --stripe-bad-alt:#cc4855; /* ---- chart series palette (read by wwwroot/js/nerd-charts.js AND Platform/Ui/ChartPalette.cs) ---- A CATEGORICAL palette: its job is mutual distinguishability, which is a different job from --good/--warn/--bad meaning something. Kept independent even where a value coincides today. Any change here must be mirrored in ChartPalette.cs (ChartPaletteTests locks the two together). */ --chart-blue:#5b8def; --chart-green:#3ee06c; --chart-red:#ff5b6a; --chart-cyan:#4df3ff; --chart-grey:#8f8cab; --chart-purple:#b45bff; --chart-yellow:#ffd23e; --chart-orange:#ff9f43; --chart-pink:#ff7bd5; /* S7 — the AMAZON MARKETPLACE RAMP. Not two new identities: two further steps of the SINGLE green identity, because Amazon US/CA/MX are one channel in three marketplaces and the palette doc's entity-binding rule says green follows the entity. Monthly.razor painted all three the same green, so the three bars were indistinguishable. Construction (one rule, applied per theme, so a third theme derives its own): keep the base green's OKLCH hue and chroma, step L by -0.14 and -0.28, clamp chroma to the sRGB gamut. Measured with the S5 palette port: every step clears the 3:1 graphic floor on BOTH of its theme's grounds (worst 3.31, retro -3 on --panel), adjacent steps separate by >=13.5 dE under the worst of protan/deutan/tritan (target 8.0), and the CATEGORICAL all-pairs worst-CVD is UNCHANGED in both themes (retro 2.86 blue<->purple, dexhq 4.19 red<->yellow) — i.e. the ramp adds no new worst pair. -0.14 specifically: -0.13 puts retro's mid step at 2.30 against --chart-orange, under retro's own floor. */ --chart-green-2:#00b048; /* Amazon CA — base green, L-0.14 6.47 bg / 5.92 panel */ --chart-green-3:#007f32; /* Amazon MX — base green, L-0.28 3.62 bg / 3.31 panel */ --chart-compare:#7a8aa0; /* the "same period last week" reference line */ --chart-grid:rgba(57,57,90,.35); /* axis grid — --line, backed off */ /* ---- type ---- */ --px:'Press Start 2P',monospace; /* headings / flavor */ --mono:'IBM Plex Mono',Consolas,monospace; /* data / body */ /* ---- PER-ELEMENT --px SIZE OVERRIDES (UI-3 / UI-4) -------------------------------------- Two sizes that are per-THEME rather than per-element, because --px is not one typeface: it is Press Start 2P here (a pixel font with a fixed 1em advance, so every size in this stylesheet was chosen on its grid) and proportional Outfit on DexHQ, where the same number simply reads small. Miguel asked for both by name, at exact values. THESE TWO ARE DELIBERATE EXCEPTIONS TO THE --px-scale SLICE THAT IS COMING, not a competing mechanism, and they are named to sit beside it. A single scale cannot produce them: 10 -> 14 is 1.40x and 19 -> 24 is 1.26x. The follow-up scale slice should honour these as overrides. A general scale was considered here and rejected for this branch on its own merits too — it would drag along every other --px element, including the wordmark and .logo (which SET the topbar's 56.9px height, S11) and the mobile tab label S12 deliberately put on the 8px PS2P grid. Adding a third: declare it in BOTH blocks. :root also matches [data-theme="dexhq"], so a token left out here does not go missing, it silently inherits retro's value — ThemeContractTests.Every_registered_theme_declares_every_token_the_fallback_declares is the alarm. */ --px-modtab:10px; /* module-switcher labels: .modules a + the mobile menu (UI-1) */ --px-kpi:19px; /* .kpi .value — the KPI headline number */ } /* ============================================================================================ DexHQ — the light-ground brand theme (S5). THE SECOND THEME. Palette derived 2026-07-28 with the dataviz categorical method and accepted (see docs/design/dexhq-light-palette.md for every workings, ratio and ΔE). Ground truth from the brand guide — #EC4FA1 / #D63C90 / #0E1116 / #FFFFFF / #F4F5F7 / #6B7280 / #E6E8EC — is used as given and NOT re-derived here. ---- WHY THIS BLOCK RESTATES ALL 63 TOKENS ---- The shared block above is scoped ":root, [data-theme=retro]". :root ALSO matches , so a token omitted here does not go missing — it silently keeps RETRO's value. A near-black ground surviving into a light theme reads as a rendering nit in a screenshot review and is actually an unreadable control. ThemeContractTests' Every_registered_theme_declares_every_token_the_fallback_declares is the alarm; it was written in S3 for exactly this moment. Do not "tidy up" by dropping tokens whose value looks unchanged. ---- CONTRAST RAIL (spec §8, read theme-relatively per DECISIONS 2026-07-28) ---- Text floor = this theme's --dim on --panel = #6B7280 on #FFFFFF = 4.83:1, and 4.43:1 against the --bg surface, which is the binding ground because it is darker than the card. Graphic (non-text) floor = 3:1, WCAG 1.4.11. Both readings are checked in docs/design/dexhq-light-palette.md §1; the absolute retro number (5.27:1) is unsatisfiable here because the LOCKED muted is itself 4.43:1 on the LOCKED surface. ============================================================================================ */ [data-theme="dexhq"]{ /* ---- brand + status hues ---- */ --accent:#8D2FDA; /* nerd purple, deepened — 5.42:1 surface / 5.91:1 card */ --accent2:#007D88; /* teal — link + heading ink, 4.49 / 4.90 */ /* See retro's --info note: Mud consumes this as a GROUND and paints ink on it, so it owes the text floor. #fff on the old #2C8BFF was 3.36:1, under this theme's 4.43. RESOLVED (S12, Miguel approved) THE OTHER WAY ROUND FROM RETRO, and the asymmetry is the point: on paper the severity tokens are FILLS ONLY (the status INK here is --good/--warn/--bad read on white, which is the same token doing the same job at 4.85-4.88), and --ink-dark is itself #FFFFFF on this theme, so there is no darker ink to swap to. The fix therefore has to move the hue — and only --info's, because its three siblings already sit at 4.85-4.88 and this one was simply never pulled into their band. DERIVED, not eyeballed, by the S7 Amazon-ramp method: take #2C8BFF to OKLCH, step L down at CONSTANT chroma and hue until white clears the floor with the siblings' margin. L 0.6439 -> 0.5543 (-0.09) at C 0.193 / H 256.1deg gives #006EE0 = 4.88:1, landing between --good 4.88 and --bad 4.85. Chroma is preserved to 0.0001, so it is the same blue, darker — still unmistakably an info blue and not a navy. --chart-blue keeps #2C8BFF: a series stroke owes 3:1, which that value clears, and the two tokens are independent by the rule this block already states. */ --info:#006EE0; /* MudBlazor Info surfaces — 4.88:1 with white ink */ /* THE DEX PINK ON A LIGHT GROUND — the split S2 introduced still holds, but it INVERTS. On #12121c the brand #EC4FA1 was fine as a fill and too dark as ink. Here it is the opposite: as ink on paper #EC4FA1 measures 3.11:1, well under the 4.43 text floor, and as a BUTTON GROUND it cannot carry any ink at text grade (white on it is 3.39:1, near-black is 5.65:1 but `.btn.dex` paints --ink-dark, and see the --ink-dark note below for why that is white here). So --dex takes the derived text-grade pink #CB2F85 for BOTH roles: 4.49/4.90 as ink, 4.49 as a border, and white-on-it is 4.90 so `.btn.dex` and `.freshness .runnow:hover` clear the floor. --dex-text is a further step down because `.dex-chip.on` paints it on --panel2, the darkest ground any dex ink lands on. The brand #EC4FA1 itself is NOT absent: it is --dex-tint's hue and --chart-pink, both of which owe 3:1 or nothing at all. The two tokens therefore hold the SAME value here — the split S2 introduced is real on navy and collapses on paper, which is the whole reason it is two tokens and not one filter. */ --dex:#CB2F85; /* Dex pink — fills, borders, marks */ --dex-text:#CB2F85; /* Dex pink as INK on paper — 4.90 card / 4.49 surface */ --good:#00833A; --warn:#A06400; --bad:#E01536; /* ---- grounds ---- THE ELEVATION LADDER IS COMPRESSED, AND THAT IS A MEASURED RESULT, NOT A ROUGH DRAFT. Two brand values are locked: the muted --dim #6B7280 and the surface --bg #F4F5F7. Their contrast is 4.43:1 — which IS this theme's binding text floor (see the header). So --dim has exactly ZERO headroom: any ground darker than --bg puts secondary text under the floor. Measured on the first draft of this block: a #ECEEF2 --panel2 gave 4.16:1 on `.dex-chip`, a #E9EBF0 --inset gave 4.05:1 on `.runlog` and 4.11:1 on `.vbadge` — under the house floor and under WCAG AA's absolute 4.5:1 as well. So every ground here sits between --bg and --panel. The retro ORDER survives (--inset and --panel2 deepest, then --inset-2, then --inset-3, then --panel); only the RANGE is squeezed and the direction inverted. The consequence worth knowing before S7: on DexHQ a "sunken" or "selected" ground is a step TOWARD the page colour rather than away from it, so `.tabs a.on` and `.sidenav a:hover` read as state against the WHITE card, not against the page. The accepted derivation left --panel2 and --shadow as explicitly unvalidated placeholders; this is the pass it asked for, and the compression is the answer it did not have. */ --shadow:#00000000; /* NO hard shadow. See the structural note below. */ --inset:#F4F5F7; /* sunken ground: inputs, wells, run log, thumb boxes */ --inset-2:#F7F8FA; /* one step up — sticky head inside a sunken menu */ --bg:#F4F5F7; /* paper — the locked surface */ --inset-3:#FAFBFC; /* two steps up — placeholder fill in a sunken menu */ --panel:#FFFFFF; /* the locked card */ --panel2:#F4F5F7; --dex-draft-bg:#FDF0F7; /* DEX✦ DESCRIBE draft state — pink-tinted panel */ /* ---- ink ---- */ --text:#0E1116; --dim:#6B7280; --text-bright:#000000; /* one step STRONGER than --text: h1, KPI value, active nav */ /* --ink-dark and --ink-light hold the SAME value here, and that is a measured result, not an oversight — which is exactly why S1 split them rather than aliasing. The four fills that paint --ink-dark (--accent2 on .btn, --good on .btn.good/.bigbtn, --dex on .btn.dex/.runnow:hover, --accent on .avatar) all sit at 4.88–5.91:1 against WHITE and at 3.24–3.93:1 against near-black — i.e. white is the only ink that clears the text floor on all four. That is forced, not chosen: for one fill to carry BOTH inks at 4.43:1 it would need relative luminance ≥0.193 (for dark ink) and ≤0.187 (for light ink) at the same time. Impossible. On #12121c the two tokens genuinely differ; here they converge. S12 note: the two extra fills that moved onto --ink-dark on retro (--accent on .btn.primary / .toggle button.on, --bad on .btn.danger) were ALREADY white here, so those rules render byte-identically on this theme — the fix is retro-only in pixels and both-themes in vocabulary. Mud's four severity ContrastText slots now read --ink-dark too, which on this theme is the white they already were. */ --ink-dark:#FFFFFF; /* ink ON a saturated fill — white on paper-theme fills */ --ink-light:#FFFFFF; /* ink ON a saturated fill (primary/danger btn) */ /* Same reasoning as retro: the hole is the PAGE ground seen through the sprite, so it follows --bg. The retro sprites are what DexHQ still draws (the Material Rounded set is S6), and on paper an off-white hole on a white card is a hairline artefact rather than the near-black block the baked #12121c produced. */ --icon-hole:var(--bg); /* ---- rules ---- */ --line:#E6E8EC; /* the locked hairline */ --hairline:#F0F2F5; /* quieter than --line — closer to the card */ /* ---- structural constants — THE point of S1 declaring these ---- Rounded cards, a true hairline, and no hard offset shadow. --shadow-offset zeroes the .panel shadow, but `.btn`/`.bigbtn`/`.thumbbig` hard-code their own 3px/6px offsets, so the offset token alone would leave buttons wearing a retro shadow. --shadow:#00000000 (fully transparent) is what actually removes every hard shadow in the theme without touching a rule. */ --radius:16px; --border-w:1px; --shadow-offset:0 0; /* ---- alpha tints ---- THE HUES ARE RE-DERIVED AND SO ARE THE ALPHAS. S5 wrote "alphas preserved: a wash is a ROLE, and the retro alphas read the same on paper (a dark tint dropping out of white) as they do on navy (a light tint lifting off it)". S10 MEASURED that claim on live GearDex Transfers and Admin Sync Health rows and it is FALSE — five washes composited to a ground DARKER than --bg, putting --dim under this theme's own 4.43:1 floor (--dex-sel 4.20, --dex-band 4.30, --bad-tint-conflict-item / --bad-tint-banner 4.31, --accent-zebra 4.35). S10b re-measured every wash in this block and found three more the QA pass had not rendered (--accent-sel 4.21, --bad-tint-row 4.39, --accent-hover 4.41). WHY THE ALPHAS COULD NOT SURVIVE THE PORT — the asymmetry is structural, not a tuning slip. Retro washes LIFT off --panel #1b1b28 and the binding ground --bg #12121c is BELOW them, so a wash moves AWAY from the constraint and has effectively unlimited room. DexHQ washes DARKEN off --panel #FFFFFF and the binding ground --bg #F4F5F7 is immediately BELOW them, so a wash moves STRAIGHT AT the constraint. The whole usable band is #FFFFFF → #F4F5F7. Retro's alphas spend more than that band contains. THE DERIVATION RULE (values-only, mechanical, re-runnable for a third theme): 1. The grounds rule this block states about itself — "no ground may be darker than --bg" — is measured as: --dim on (wash over --panel) >= --dim on --bg = 4.4318:1. That is not a proxy, it is EQUIVALENT: contrast against a ground is monotone in the ground's luminance for any ink darker than both, so a wash no darker than --bg keeps EVERY ink that already clears the floor on --bg. One check certifies the lot. 2. That gives each HUE a maximum alpha on white: accent .0575, bad .0537, dex .0741, warn .0675, accent2 .0648, neutral --text .0422. 3. Inside a hue family the RUNG ORDER is what carries meaning, so the family is scaled from the top rung down until it fits under the ceiling. A rung is left alone once it already clears the floor AND still sits below the rung above it — which is why --accent-sub, --accent2-tint, --warn-tint, --warn-tint-row, --lift-band and --lift-cell are untouched, and why --bad-tint-conflict / --dex-tint / --dex-box moved even though they passed: the rungs above them had to come down THROUGH them. 4. Visibility floor: a wash must separate from its unwashed neighbour by at least the separation this theme already relies on being visible — the card against the page, CIELAB dE 3.65 (#FFFFFF vs #F4F5F7). Every re-derived wash lands 3.78–5.89. Measured results are on each line: composite over --panel, then --dim on it, then dE vs the bare card. ContrastGateTests now measures all seventeen, in both themes, so this cannot rot. NOT re-derived, and deliberately: --accent-wash, --accent-press and --bad-press are CONTROL states, not row/card/banner grounds — they carry one named ink each (--text-bright, --accent, --bad) and never carry --dim. --accent-press / --bad-press also sit inside .gcelltools, which is a --scrim-heavy bar over arbitrary product PHOTOGRAPHY: there is no token underneath, so no gate can measure it and no alpha here can fix it. --accent here is rgb(141,47,218), --accent2 rgb(0,125,136), --warn rgb(160,100,0), --bad rgb(224,21,54), --dex-tint's brand pink rgb(236,79,161), the neutral lift rgb(14,17,22). */ --accent-sel:rgba(141,47,218,.05); /* selected row / card / rate card .09→.05 #F9F5FD 4.48 dE 5.58 */ --accent-zebra:rgba(141,47,218,.04); /* grouped band + expanded parent .07→.04 #FAF7FE 4.55 dE 4.46 */ --accent-hover:rgba(141,47,218,.035); /* hovered tappable row .06→.035 #FBF8FE 4.59 dE 3.90 */ --accent-wash:rgba(141,47,218,.12); /* active module tab gradient wash — CONTROL, ink --text-bright */ --accent-press:rgba(141,47,218,.2); /* hovered tool button in a gallery cell — CONTROL, over photos */ --accent-sub:rgba(141,47,218,.03); /* nested sub-table ground unchanged #FCF9FE 4.62 */ --accent2-tint:rgba(0,125,136,.05); /* info banner fill unchanged #F2F8F9 4.52 */ --warn-tint:rgba(160,100,0,.06); /* warn box + banner + top-up row unchanged #F9F6F0 4.48 */ --warn-tint-row:rgba(160,100,0,.05); /* table row flagged for attention unchanged #FAF7F2 4.53 */ --bad-tint-row:rgba(224,21,54,.045); /* failed table row fill .06→.045 #FEF4F6 4.50 dE 4.43 */ --bad-tint-banner:rgba(224,21,54,.05); /* bad banner fill .07→.05 #FDF3F5 4.46 dE 4.92 */ --bad-tint-conflict:rgba(224,21,54,.04); /* conflicting group row .05→.04 #FEF6F7 4.53 dE 3.93 */ --bad-tint-conflict-item:rgba(224,21,54,.05); /* conflicting item row .07→.05 #FDF3F5 4.46 dE 4.92 */ --bad-press:rgba(224,21,54,.2); /* hovered destructive tool button — CONTROL, over photos */ /* The neutral lifts INVERT here, and that is the whole reason they are tokens. Retro lifts a row off a dark ground by adding white; on paper white-on-white is nothing at all, so DexHQ darkens instead — derived from --text rgb(14,17,22) at the same alphas, exactly as the scrims are. Both composite LIGHTER than --bg (#F5F5F6 and #F8F8F8 over --panel — S5 wrote #F7F7F8/#F8F8F9, which was a slip; corrected here after S10b re-measured every wash), so they respect this theme's "no ground darker than --bg" rule; --dim on either reads at or above its 4.43:1 floor, because the ground moved away from --dim, not toward it. --lift-band at .04 is the neutral hue's ceiling almost exactly (.0422), which is why it is the only wash in this block that is already at the edge and could not have taken one more step. */ --lift-band:rgba(14,17,22,.04); /* subtotal band in a report unchanged #F5F5F6 4.45 */ --lift-cell:rgba(14,17,22,.03); /* populated matrix cell unchanged #F8F8F8 4.55 */ /* UI-7 — the column band, derived by the S10b method above rather than eyeballed. It is the ACCENT family's .035 rung (the one --accent-hover already occupies), chosen as the LOWEST rung that still clears the theme's visibility floor: composite over --panel #FBF8FE, --dim on it 4.59:1 against the 4.43 floor, CIELAB dE 3.90 against the 3.65 floor. The next rung down (--accent-sub .03) measures dE ~3.34 and would be a band nobody can see; the rung above (--accent-zebra .04, dE 4.46) is the ROW zebra, and a column band should not outweigh the row band that groups records. A NEUTRAL grey band cannot do this job at all: the darkest neutral that clears 4.43 is #F5F5F5 at dE 3.46, i.e. under the visibility floor — the hue is what buys the separation. */ --col-band:rgba(141,47,218,.035); /* wide-matrix column band #FBF8FE 4.59 dE 3.90 */ /* The retro pair is an OPEN QUESTION for Miguel (--dex-line composited over --panel2 measures 2.43:1 there, already under the 3:1 non-text floor on main today) and is deliberately NOT touched by this slice — it changes a shipped surface and the fix is a design call. DexHQ has no shipped surface, so its equivalents are derived properly and the two are DECOUPLED: --dex-tint keeps the alpha wash form at the real brand pink, and is a BACKGROUND, so it owes no ratio of its own (the --dim/--dex-text it carries are measured against the composite). --dex-line is SOLID, not an alpha — that is the recommendation from the same open question, taken here because there is nothing to regress. It is the locked brand pink-dark #D63C90, which measures 3.92:1 on --bg, 4.28:1 on --panel and 3.72:1 on --panel2, i.e. it clears the 3:1 non-text floor on every ground the chip can land on, with margin. */ /* The four dex WASHES are one family and take the same S10b derivation as the tints above: the brand pink's ceiling on white is alpha .0741, and retro spent .12 on the top rung alone. The ladder sel > band > tint > box is preserved by scaling from the top, which is why --dex-tint and --dex-box moved despite already clearing the floor — the two rungs above them had to come down through them. --dex-line is SOLID and is not part of this: it owes 3:1 as a border, not a ground, and it is untouched. */ --dex-tint:rgba(236,79,161,.05); /* DEX ◆ explain sub-row fill .07→.05 #FEF6FA 4.56 dE 4.20 */ --dex-line:#D63C90; /* active DEX chip border — solid, 3.72:1 worst */ --dex-box:rgba(236,79,161,.045); /* Dex advisory box (PO detail) .06→.045 #FEF7FB 4.59 dE 3.78 */ --dex-band:rgba(236,79,161,.06); /* Dex-highlighted total band .10→.06 #FEF4F9 4.51 dE 5.04 */ --dex-sel:rgba(236,79,161,.07); /* selected cell in a Dex matrix .12→.07 #FEF3F8 4.45 dE 5.89 */ /* ---- scrims (modal/overlay veils) ---- A veil darkens whatever it covers, on paper as much as on navy, so these stay dark — derived from --text rgb(14,17,22) with the retro alphas, and --scrim-gdmodal keeps its deeper base. */ --scrim-heavy:rgba(14,17,22,.92); /* lightbox + gallery cell toolbar */ --scrim-reconnect:rgba(14,17,22,.82); /* Blazor reconnect overlay */ --scrim-confirm:rgba(14,17,22,.72); /* .modalwrap confirm overlay */ --scrim-gdmodal:rgba(6,7,10,.66); /* .gdmodal-back — note: deeper base */ /* The CRT scanline is a RETRO conceit, not a shell feature. A white stripe over paper is invisible and a dark one would be a texture nobody asked for, so DexHQ turns the overlay off the only way a values-only theme can: a fully transparent stripe. body::after still paints; it paints nothing. */ --scanline:rgba(255,255,255,0); /* ---- gradient stripe darks ---- One step deeper than the hue each stripes, same relationship as retro. */ --stripe-good:#006B2F; --stripe-warn:#855300; --stripe-bad:#B8102C; --stripe-accent:#7526B5; --stripe-warn-alt:#8A5700; --stripe-bad-alt:#C01230; /* ---- chart series palette ---- The light-ground categorical set from the derivation: all nine clear 3:1 on BOTH grounds, and as an ordered adjacent set it passes all six dataviz checks (worst adjacent CVD ΔE 14.90 vs a target of 8.0; worst normal-vision ΔE 20.85 vs a floor of 15.0) — genuinely stronger than the retro chart colours. *** S5's DECLARED GAP IS CLOSED BY S7. These tokens were read by nerd-charts.js for chart CHROME while Chart.js DATASET colours came from a static C# ChartPalette with one set of values — so a DexHQ page drew light-ground chrome around RETRO-coloured series, and S5b's capture measured retro cyan #4DF3FF on a #FFFFFF panel at ~1.3:1. ChartPalette is now built PER THEME from NerdThemes' token map, and ThemeContractTests locks that map against this block in both directions — so these values are now the ones a DexHQ chart actually draws. *** */ --chart-blue:#2C8BFF; --chart-green:#00873C; --chart-red:#E62A3F; --chart-cyan:#00919D; --chart-grey:#6B7280; --chart-purple:#8D2FDA; --chart-yellow:#A88800; --chart-orange:#B65400; --chart-pink:#EC4FA1; /* The Amazon marketplace ramp, derived by the SAME rule as retro's (base green OKLCH L-0.14 / L-0.28, hue and chroma held) — which is the point of it being a rule and not two hand-picked hexes. 7.84/8.55 and 13.62/14.86 against --bg/--panel. */ --chart-green-2:#005925; /* Amazon CA */ --chart-green-3:#002f0f; /* Amazon MX */ --chart-compare:#7E8899; /* the "same period last week" reference line */ --chart-grid:rgba(107,114,128,.22); /* axis grid — --dim, backed off */ /* ---- type ---- Outfit for both tiers: DexHQ is one brand face at two weights/sizes, and Press Start 2P is a retro conceit that cannot follow it. See the @font-face note at the top of this file for why one variable file covers every weight. THE SYMBOL FALLBACK IS LOAD-BEARING, NOT DEFENSIVE. ✦ (U+2726) and ◆ (U+25C6) are the DEX glyph grammar (2026-07-22: ✦ = Dex makes, ◆ = Dex knows) and they appear in the DEX✦HQ lockup, every .dex-sfx module suffix, .dex-insight-body h3::before, and the BuyList ◆ math trail. Neither is in either Outfit subset. Verified by parsing the cmap tables directly: they are in NEITHER Outfit subset, NEITHER self-hosted IBM Plex Mono cut, NOT Press Start 2P, and NOT Consolas — i.e. NOTHING WE SHIP OR NAME RESOLVES THEM TODAY. On this box they render only because Chrome's last-resort fallback reaches Segoe UI Symbol, which is an accident of the platform and not something the retro stack asks for. Naming the symbol faces makes that explicit and portable; the generic sans-serif is the last stop. (RESIDUAL: a Linux box with none of the three named symbol faces installed still shows tofu — unchanged from today, and the real fix is drawing the two brand marks as SVG, which is a lockup change, not a theme.) */ --px:'Outfit','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2',sans-serif; --mono:'Outfit','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2',sans-serif; /* UI-3 / UI-4 — the two sizes Miguel named on this theme. Outfit is proportional, so retro's on-grid 10px/19px read small here. Exact values, not a ratio: see the fallback block. */ --px-modtab:14px; /* was inheriting retro's 10px */ --px-kpi:24px; /* was inheriting retro's 19px */ } *{box-sizing:border-box;margin:0} html,body{height:100%} body{ font-family:var(--mono);background:var(--bg);color:var(--text); min-height:100vh;font-size:16px;-webkit-font-smoothing:auto; } a{color:var(--accent2);text-decoration:none} /* faint CRT scanline overlay — spec §1/§8: subtle, removable via .no-crt on */ body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:99; background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px); } body.no-crt::after{display:none} /* pixel-corner panel helper — THE card archetype. Border weight, corner radius and shadow offset come from the structural tokens, so a rounded/hairline theme is a value change in :root and nowhere else. border-radius is stated explicitly even though it computes to 0 today: without the declaration a theme has no property to override. */ .panel{background:var(--panel);border:var(--border-w) solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-offset) 0 var(--shadow)} /* ================= TOP BAR: brand + MODULE SELECT ================= */ .topbar{background:var(--panel);border-bottom:var(--border-w) solid var(--line);display:flex;align-items:center;gap:0;position:sticky;top:0;z-index:10; padding:env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 0} /* logo box spans the 200px left-panel width (matches .frame's sidenav track) and centres the mark; with the topbar's left padding + gap removed, .modules then begins exactly at the sidenav edge. */ .logo{width:200px;flex:none;padding:15px 0;white-space:nowrap;display:flex;align-items:center;justify-content:center} .logo img{height:26px;width:auto;display:block} .logo span{color:var(--accent)} /* ---- the wordmark LOCKUP (S11) — used by the themes whose IWordmark is "lockup" ------------- The DexHQ brand guide does not ship the wordmark as an image; it BUILDS it: DEX in Dex Pink, the four-point star as the divider, HQ in ink, with gap .16em / weight 800 / letter-spacing -.02em / star .65em. Those five numbers are the guide's own, ported not invented. Colours come from tokens and never from literals here — that is what makes this mark measurable by ContrastGateTests, which the raster it replaces never was (S10 FINDING 1: its "HQ" was pure #FFFFFF on DexHQ's #FFFFFF --panel, i.e. 1.00:1, on all 24 pages and on the sign-in screen). --wm-box is the BOX height and is set to exactly the height the raster's had at each site, so the lockup occupies the same layout slot: .logo is the tallest thing in .topbar and therefore sets the topbar's height, and a taller mark would move every pixel on every page. The glyph ink overshoots that box by ~1.5px top and bottom (font-size is 1.14x the box so the CAP height lands where the raster's did) — deliberate, unclipped, and well inside .topbar's 15px padding. DEX and the star share ONE token on purpose: the guide's first Don't is "recolor the star", and two tokens that merely happen to be equal today would let a future theme drift them apart. */ .wordmark{display:inline-flex;align-items:center;gap:.16em;height:var(--wm-box,26px); font-family:var(--px);font-weight:800;font-size:calc(var(--wm-box,26px) * 1.14);letter-spacing:-.02em;line-height:1} .wordmark .wm-dex{color:var(--dex-text)} .wordmark .wm-star{width:.65em;height:.65em;flex:none;color:var(--dex-text)} .wordmark .wm-hq{color:var(--text-bright)} .modules{display:flex;gap:2px;flex:1;overflow-x:auto} .modules a{font-family:var(--px);font-size:var(--px-modtab);color:var(--dim);text-decoration:none;padding:18px 15px 14px;border-bottom:3px solid transparent;white-space:nowrap} .modules a:hover{color:var(--text)} .modules a.active{color:var(--text-bright);border-bottom-color:var(--accent);background:linear-gradient(180deg,transparent 60%,var(--accent-wash))} .modules a.locked{opacity:.35;cursor:not-allowed} /* DEX brand suffix — the "DEX" in every module label renders in Dex pink (--dex) while the prefix keeps its own colour. Shared by the top selector + the sidebar module-name header (.modname). */ .dex-sfx{color:var(--dex-text)} .userchip{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);white-space:nowrap} .userchip .hp{color:var(--good)} .userchip .hp.warn{color:var(--warn)} .userchip .hp.bad{color:var(--bad)} .userchip a{color:var(--dim)} .avatar{width:30px;height:30px;background:var(--accent);color:var(--ink-dark);display:grid;place-items:center;font-family:var(--px);font-size:12px} /* ---- ACCOUNT MENU / THEME SELECTOR (S8) ---- The avatar is a disclosure trigger (theme choices + Sign out); see UserMenu.razor for why this is a disclosure and not an ARIA menu. THE CLOSED STATE MUST NOT MOVE A PIXEL. This topbar is photographed on all 24 harness pages in both themes, so .usermenu-trigger exists to strip every default a