/* ============================================================================
PageSpeedAudit design system v2 — "precision instrument"
Single file, no framework, no JS. Mobile-first. WCAG 2.2 AA contrast.
Display face: Space Grotesk (variable, self-hosted, 22 KB). Body: system stack.
============================================================================ */
/* The @font-face for Space Grotesk deliberately does NOT live here — it is emitted inline in
App.razor's . A static .css file cannot resolve the build's content fingerprint, so the
src would have to name the raw /fonts/space-grotesk-var.woff2 path while
(which CAN resolve it, via @Assets) names the hashed one. That mismatch made the browser fetch
the same 22 KB face twice: once at high priority from the preload, then discarded, then again
late via CSS discovery — on the raw path's 4-hour revalidating cache instead of the hashed
path's immutable year. Declaring it in Razor lets preload and @font-face share one
fingerprint-resolved URL, so they can never drift apart again. */
:root {
/* ink + surfaces */
--ink: #10211a; /* deep pine */
--ink-soft: #33433a;
--muted: #4b5b53; /* 7.03:1 on paper (AAA) */
--paper: #fbfdfb;
--card: #ffffff;
--wash: #eef4f0;
--wash-deep: #e2ece5;
--line: #d8e2db;
--line-soft: #e6eee8;
/* brand */
--brand: #0d6b3c; /* 6.1:1 on paper */
--brand-strong: #0a4f2d;
--brand-deep: #07391f;
--brand-wash: #e3f2e8;
/* dark sections */
--dark-bg: #0b1812;
--dark-bg-2: #102219;
--dark-line: #24382d;
--dark-ink: #eef6f0;
--dark-soft: #b9cfc1; /* 9.5:1 on dark-bg */
--signal: #8df0a6; /* the wow accent — dark surfaces only (11:1 on dark-bg) */
/* semantic */
--good: #0e7a3e; --warn: #8a5800; --bad: #b3261e;
--good-dark: #8df0a6; --warn-dark: #ffd28a; --bad-dark: #ffb1aa;
--focus: #1456d8;
/* shape + depth */
--radius: 14px;
--radius-sm: 9px;
--shadow-1: 0 1px 2px rgb(13 33 23 / .05), 0 2px 8px rgb(13 33 23 / .05);
--shadow-2: 0 2px 4px rgb(13 33 23 / .06), 0 12px 32px -8px rgb(13 33 23 / .14);
--ring: inset 0 1px 0 rgb(255 255 255 / .14);
/* type */
--font-display: "Space Grotesk", system-ui, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "Cascadia Code", SFMono-Regular, Consolas, monospace;
--text-sm: .875rem;
--text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
--text-lg: clamp(1.125rem, 1.04rem + .4vw, 1.3125rem);
--text-xl: clamp(1.3125rem, 1.16rem + .75vw, 1.75rem);
--text-2xl: clamp(1.625rem, 1.32rem + 1.5vw, 2.375rem);
--text-3xl: clamp(2rem, 1.5rem + 2.4vw, 3.125rem);
--text-hero: clamp(2.375rem, 1.6rem + 3.9vw, 4.25rem);
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
--space-16: 4rem; --space-20: 5rem;
}
/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
color: var(--ink);
background: var(--paper);
min-height: 100dvh;
display: flex;
flex-direction: column;
text-rendering: optimizeLegibility;
}
main { flex: 1; }
img, svg, iframe { max-width: 100%; }
img, svg { height: auto; display: block; }
h1, h2, h3, .display {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.022em;
margin: 0 0 .5em;
text-wrap: balance;
color: var(--ink);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.lede { font-size: var(--text-lg); color: var(--ink-soft); max-width: 56ch; text-wrap: pretty; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }
small { font-size: var(--text-sm); }
code { font-family: var(--font-mono); font-size: .88em; background: var(--wash); border: 1px solid var(--line-soft); padding: .1em .4em; border-radius: 6px; overflow-wrap: anywhere; }
/* Inside a
the code element is just the block's text — drop the inline-chip background/border so it
doesn't paint a light box over a dark code block (that was hiding the API-keys quick-start curl). */
pre code { background: transparent; border: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.num, .metric { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px var(--focus); border-radius: 3px; }
/* Blazor's moves focus to the page
for screen readers; that programmatic
focus must not paint a visible ring on a non-interactive heading (it isn't keyboard-tabbable). */
/* FocusOnNavigate parks focus on the page heading after in-app navigation (an a11y feature we keep) —
but a heading isn't interactive, so it gets no visible ring: clear the box-shadow too, not just the
outline, or the global focus style's blue glow paints a rectangle around every routed-to h1. */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }
::selection { background: #cdebd7; }
.container { width: min(100% - 2.5rem, 71rem); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.skip-link {
position: absolute; left: -200vw; top: 0; z-index: 200;
background: var(--brand-deep); color: #fff; padding: .75rem 1.25rem;
border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }
/* main is focusable only so the skip link can move focus there; it should not draw a ring when
it receives that programmatic focus — the ring belongs to whatever the user Tabs to next. */
#main:focus { outline: none; }
/* ---------------------------------------------------------------- header */
/* One source of truth for the sticky header's height. scroll-padding-top reads the same variable,
so an anchor jump can never land behind the bar again (it did: 6rem was hard-coded for the
desktop header and fell 119px short of the mobile one). */
:root { --header-h: 72px; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgb(251 253 251 / .86);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line-soft);
}
/* The toggle checkbox itself is never seen — only its label, and only on small screens. It has to
LEAVE the tab order with its label: above the breakpoint .nav-toggle is display:none, so a
focusable 1px checkbox there is a tab stop with nothing visible to put a ring on (WCAG 2.4.7).
display:none removes it from the tab order without touching the :checked sibling selectors. */
.nav-toggle-cb { display: none; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; }
/* Two-class selectors on purpose: the phone rule `.nav-toggle { display: inline-flex }` must not
show the popover button in a browser without popover support. */
.nav-toggle.nav-toggle--pop { display: none; font: inherit; }
.nav-links > .nav-scrim { display: none; }
/* The list carries the popover attribute for the phone menu. On wide screens it is an ordinary row,
so the browser's popover defaults (fixed, centred, bordered, hidden while closed) are undone. */
.nav-links[popover] {
position: static; inset: auto; width: auto; height: auto; overflow: visible;
border: 0; color: inherit; background: transparent;
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); padding-block: .8rem; }
.brand {
font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
color: var(--ink); text-decoration: none; letter-spacing: -.03em;
display: inline-flex; align-items: center; gap: .5rem;
}
.brand:hover { color: var(--brand-strong); }
.brand-mark { width: 1.6rem; height: 1.6rem; flex: none; }
.brand { min-height: 44px; }
.brand .tld { color: var(--brand); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a:not(.btn) {
display: inline-flex; align-items: center; padding: .55rem .35rem; min-height: 44px;
color: var(--ink-soft); text-decoration: none; font-weight: 550; font-size: .96rem;
}
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--brand-strong); box-shadow: inset 0 -2px 0 var(--brand); }
.nav-cta { margin-left: var(--space-2); }
/* JS-free nav dropdown (): works on static-SSR pages, keyboard-operable out of the
box (summary is focusable, Enter/Space toggles). Styled to read like a sibling nav link. */
.nav-drop { position: relative; }
.nav-drop > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center;
padding: .55rem .35rem; min-height: 44px; color: var(--ink-soft); font-weight: 550; font-size: .96rem;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: "▾"; font-size: .7em; margin-left: .35rem; }
.nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--brand-strong); }
.nav-drop > ul {
position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50;
min-width: 13.5rem; margin: 0; padding: .4rem; list-style: none;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.nav-links .nav-drop > ul a:not(.btn) { display: block; padding: .5rem .7rem; border-radius: 6px; min-height: 0; white-space: nowrap; }
.nav-links .nav-drop > ul a:not(.btn):hover { background: var(--wash); box-shadow: none; }
/* Below 56rem the six nav items wrapped onto three lines inside the sticky bar: 214.6px, 26.4% of
a 375x812 viewport, held at every scroll position, with page content ghosting through the
translucent backdrop. The footer already had three breakpoints; the header had none but @media
print. A checkbox and its label collapse it with no JavaScript, so it works on the static-SSR
pages too — and "Get your audit" stays outside the toggle, because it is the page's conversion.
( is the tidier markup and cannot be used: a closed hides its content in the
UA shadow DOM, where no media query can bring it back for the desktop layout.) */
@media (max-width: 56rem) {
:root { --header-h: 64px; }
/* wrap, not nowrap: the opened list (flex-basis 100%) must drop onto its own row. With nowrap it
was squeezed into the bar beside Menu and pushed the page 45px wider than a 430px phone. */
.nav { flex-wrap: wrap; gap: var(--space-2); padding-block: .55rem; }
.brand { font-size: 1.1rem; }
.nav-toggle {
display: inline-flex; align-items: center; gap: .45rem;
order: 3; margin-left: auto;
min-height: 44px; padding: .45rem .8rem;
border: 1.5px solid var(--line); border-radius: 8px; background: var(--card);
font-weight: 600; font-size: .92rem; color: var(--ink-soft); cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
display: block; width: 1.05rem; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
/* Here the label IS on screen, so the checkbox rejoins the tab order (Tab reaches it, Space
toggles it); the ring is drawn on the label, which is the thing the eye is actually on. */
.nav-toggle-cb { display: block; }
.nav-toggle-cb:focus-visible ~ .nav-toggle { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Closed: the list is out of the flow entirely, so the bar is one row high. */
.nav-links {
display: none;
order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch;
gap: 0; margin: .5rem 0 .35rem;
border-top: 1px solid var(--line-soft); padding-top: .35rem;
}
.nav-toggle-cb:checked ~ .nav-links { display: flex; }
.nav-links a:not(.btn) { padding: .7rem .35rem; font-size: 1rem; }
/* Ordering: brand, CTA, Menu on the bar itself; the list drops beneath it when opened.
The CTA sits OUTSIDE the collapsible list on purpose — it is the page's conversion and
must not cost a tap to find. */
.brand { order: 1; }
.nav-cta { order: 2; margin-left: auto; }
.nav-toggle { order: 3; margin-left: .5rem; }
.nav-links { order: 4; }
.nav-cta .btn { padding-inline: .75rem; font-size: .88rem; white-space: nowrap; }
}
/* Popover menu, where the browser supports it: Escape and a tap outside close it, focus returns to
Menu, and no script is involved. The checkbox and its label stand down; older browsers keep them.
The open list sits in the top layer, so it is placed just under the sticky header (--header-h). */
@supports selector(:popover-open) {
@media (max-width: 56rem) {
.nav-toggle-cb, .nav-toggle.nav-toggle--cb { display: none; }
.nav-toggle.nav-toggle--pop { display: inline-flex; font-weight: 600; font-size: .92rem; }
.nav-toggle--pop:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* The popover fills everything under the header: the links on a card, then the dimmed scrim,
which is part of the popover so a tap there closes the menu and reaches nothing else. */
.nav-links:popover-open {
display: flex; position: fixed; inset: var(--header-h) 0 0 0;
width: auto; height: auto; overflow-y: auto; overscroll-behavior: contain;
margin: 0; padding: 0; border: 0; background: rgb(13 33 23 / .18);
}
.nav-links:popover-open > li:not(.nav-scrim) { background: var(--card); padding-inline: max(1.25rem, (100% - 71rem) / 2); }
.nav-links:popover-open > li:first-child { padding-top: .35rem; }
.nav-links:popover-open > li:nth-last-child(2) { padding-bottom: .6rem; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgb(13 33 23 / .12); }
.nav-links:popover-open > .nav-scrim { display: block; flex: 1 0 3rem; }
.nav-scrim > button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
}
}
/* ≤ 480px the single bar cannot hold brand + CTA + Menu: their minimum widths sum past
the viewport and the nowrap flex row clips the CTA — the one element that must never
be clipped. Two deliberate rows instead: brand + Menu on top, the CTA full-width
beneath, the collapsible list still dropping under both. --header-h follows so
anchor targets keep clearing the taller sticky bar. */
@media (max-width: 30rem) {
/* Two 44px rows + the gap and padding: 112px. The popover menu opens exactly here. */
:root { --header-h: 112px; }
.nav {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; gap: .4rem .6rem; padding-block: .5rem .55rem;
}
.brand { grid-column: 1; grid-row: 1; min-width: 0; }
.nav-toggle { grid-column: 2; grid-row: 1; margin-left: 0; }
.nav-cta { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
.nav-cta .btn { width: 100%; }
.nav-links { grid-column: 1 / -1; grid-row: 3; margin: .1rem 0 .3rem; }
}
/* ---------------------------------------------------------------- buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
min-height: 46px; padding: .65rem 1.45rem;
font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: .002em;
text-decoration: none; text-align: center; white-space: nowrap;
border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
/* nowrap keeps button labels on one line — but a label longer than the phone ("Secondary
evidence — Heričko 2021 Table 2 (CSV)") then pushes the whole PAGE into sideways scroll,
measured at up to 171px past a 360px viewport. On phones the label wraps instead; max-width
stops a flex/grid parent from letting the pill itself poke out of the column. */
@media (max-width: 40rem) {
.btn { white-space: normal; max-width: 100%; }
}
.btn-primary {
background: linear-gradient(180deg, var(--brand), var(--brand-strong));
color: #fff; box-shadow: var(--shadow-1), var(--ring);
}
.btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2), var(--ring); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: var(--card); color: var(--brand-strong); border-color: var(--brand); }
.btn-secondary:hover { background: var(--brand-wash); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }
.btn-danger { background: var(--card); color: var(--bad); border-color: var(--bad); }
.btn-danger:hover { background: #fbeae9; }
.btn-lg { min-height: 56px; padding: .9rem 2.1rem; font-size: 1.13rem; }
.btn-sm { min-height: 36px; padding: .25rem 1rem; font-size: .92rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
/* on-dark button variants */
.section-dark .btn-primary { background: var(--signal); color: var(--brand-deep); box-shadow: 0 8px 28px -8px rgb(141 240 166 / .45); }
.section-dark .btn-primary:hover { color: var(--brand-deep); background: #a4f5b8; }
.section-dark .btn-secondary { background: transparent; color: var(--dark-ink); border-color: var(--dark-line); }
.section-dark .btn-secondary:hover { background: var(--dark-bg-2); border-color: var(--dark-soft); }
/* ---------------------------------------------------------------- forms */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .97rem; }
.hint { color: var(--muted); font-size: var(--text-sm); margin-top: .35rem; }
/* Exclusion-based, NOT a list of types. The old rule enumerated text/email/password/url and so
silently excluded number and file — which is why the sample-size calculator's δ, α, power, n and
both JSON uploads rendered as 21px browser defaults in 13px Arial: below the WCAG 2.2 SC 2.5.8
24px target minimum, and a different design system from the field directly above them. Written
this way, any type added later inherits the design system instead of falling out of it. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
textarea, select {
width: 100%; min-height: 48px; padding: .6rem .9rem;
font: inherit; color: var(--ink); background: var(--card);
border: 1.5px solid #b9c6be; border-radius: var(--radius-sm);
transition: border-color .12s ease;
}
/* Fields inherit their font, so one inside a small label came out at 13.4px — and iOS zooms the whole
page when a field under 16px is tapped. On phone layouts and touch screens a field is never smaller
than 16px (1em here is the size it inherits, so larger fields keep theirs). */
@media (max-width: 56rem), (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
textarea, select { font-size: max(16px, 1em); }
}
/* A number field is semantically short — that is a WIDTH goal, never a height one. */
input[type="number"] { max-width: 9rem; }
.field-wide input[type="number"] { max-width: 14rem; }
/* A file input's box cannot be sized like a text field, so the button part carries the presence. */
input[type="file"] { padding: .45rem .5rem; cursor: pointer; color: var(--ink-soft); }
input[type="file"]::file-selector-button {
min-height: 40px; margin: 0 .8rem 0 0; padding: .45rem 1rem;
font: inherit; font-weight: 600; color: var(--brand-strong);
background: var(--brand-wash); border: 1.5px solid var(--brand);
border-radius: var(--radius-sm); cursor: pointer;
transition: border-color .12s ease, background-color .12s ease;
}
input[type="file"]::file-selector-button:hover { border-color: var(--brand-strong); background: var(--card); }
input:hover, textarea:hover { border-color: var(--muted); }
textarea { min-height: 8.5rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
input[disabled] { background: var(--wash); color: var(--muted); }
.error-text { color: var(--bad); font-weight: 600; margin: var(--space-2) 0; }
.success-text { color: var(--good); font-weight: 600; margin: var(--space-2) 0; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.form-row input { flex: 1 1 14rem; }
/* ---------------------------------------------------------------- cards */
.card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem);
box-shadow: var(--shadow-1);
}
.card.lift { transition: transform .18s ease, box-shadow .18s ease; }
.card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card + .card { margin-top: var(--space-4); }
/* …but inside a grid the `gap` already spaces cards. Without this reset the
stacking margin above pushes every card after the first down within its
cell, so a row's card tops (and their bottom-aligned buttons) don't line up. */
.grid-2 > .card + .card, .grid-3 > .card + .card { margin-top: 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.panel { background: var(--wash); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); }
.icon-tile {
width: 2.75rem; height: 2.75rem; border-radius: 12px; margin-bottom: var(--space-3);
display: grid; place-items: center;
background: var(--brand-wash); color: var(--brand-strong);
}
.icon-tile svg { width: 1.4rem; height: 1.4rem; }
/* ---------------------------------------------------------------- badges & chips */
.badge {
display: inline-flex; align-items: center; gap: .35rem;
padding: .14rem .7rem; border-radius: 999px;
font-family: var(--font-display); font-size: .82rem; font-weight: 600;
border: 1.5px solid currentColor; white-space: nowrap;
}
.badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.badge-queued, .badge-starting { color: var(--warn); }
.badge-running { color: #155cb0; }
.badge-running::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.badge-succeeded, .badge-active { color: var(--good); }
.badge-failed, .badge-timedout, .badge-revoked { color: var(--bad); }
.badge-expired, .badge-canceled { color: var(--muted); }
/* Ticket taxonomy: status stays green/gray, the LLM CATEGORY is blue, and the arrival
CHANNEL (opened by email instead of the form) is violet — three facts, three colors. */
.badge-category { color: #155cb0; }
.badge-channel { color: #8b5cf6; }
/* A partner asset written TO the partner (tracking explainer, economics sheet), never for
their audience. Muted on purpose: a fact about the block, not a warning. */
.badge-private { color: var(--muted); }
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--font-display); color: var(--brand-strong); font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; font-size: .78rem;
margin-bottom: var(--space-3);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--brand); border-radius: 2px; }
.section-dark .eyebrow { color: var(--signal); }
.section-dark .eyebrow::before { background: var(--signal); }
/* ---------------------------------------------------------------- tables */
/* A table wider than the phone scrolls inside its own box rather than widening the page. WCAG 2.2
SC 1.4.10 (Reflow) exempts data tables from the no-two-dimensional-scrolling rule, so this IS the
conformant answer — but a scroll container then has to be reachable by keyboard (SC 2.1.1), which
is why every .table-wrap is marked up as a focusable, named region. */
.table-wrap {
overflow-x: auto;
/* A grid/flex child defaults to min-width:auto and refuses to shrink below its own content, so
the PAGE scrolls sideways instead of the table. Same trap already fixed for .hero-grid. */
min-width: 0;
/* A horizontal swipe across the table must not trigger the browser's back gesture. */
overscroll-behavior-x: contain;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
/* Overlay scrollbars (macOS, and Windows since 11) are invisible at rest, so a table that
scrolls looks identical to one that doesn't. Styling the scrollbar at all opts the container
out of overlay behaviour, giving a permanent cue — and it costs no height when the table
fits, because overflow-x:auto only creates the bar when there IS overflow.
The usual alternative, background-gradient scroll shadows, is wrong for THIS table: the
shadow layers paint behind the cells, and `table.data thead th` is opaque (--wash), so the
shadow would be interrupted across the header row and read as a rendering fault. */
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
}
.table-wrap::-webkit-scrollbar { height: .5rem; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.table-wrap:hover::-webkit-scrollbar-thumb { background: var(--ink-soft); }
/* The global focus ring squares off the corners; keep the wrapper's own radius. */
.table-wrap:focus-visible { border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .94rem; }
table.data th, table.data td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* Figures and timestamps break into nonsense when wrapped mid-value ("2026-07-25" over three
lines). Scoped to tbody on purpose: .num is also used on header cells whose text is a prose
label ("Desktop break-even (r ≈ 0.986)"), and pinning those would widen the table into a scroll
it does not currently need. Values never wrap; the words naming them still do. */
table.data tbody .num { white-space: nowrap; }
table.data thead th { background: var(--wash); font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #f6faf7; }
/* That wash is a light-mode value. Inside a dark section it paints a near-white row under the
section's light text — 1.05:1 for the emphasis column, unreadable. Lift the row within the
dark palette instead: the hover affordance survives and the text stays at 9.8:1 / 14.7:1. */
.section-dark table.data tbody tr:hover { background: rgb(255 255 255 / .06); }
/* A row that IS the problem — an overdue worker, a dependency that has stopped answering. Scanning
a status table is a search for the bad rows, and a badge in one column makes that search a
column-by-column read; tinting the whole line makes it a glance.
Three cues, not one: tint, a heavy left rule and bolder ink. Colour alone fails anyone with a
red-green deficiency, and on the printed page an operator forwards to someone — and the State
cell still says "Stale" in words for whoever the colour never reaches at all.
The left rule is an inset shadow rather than a border because `border-collapse: collapse` would
reflow the cell by its width; a shadow paints inside the box the cell already occupies.
The tint is deliberately barely-there: --ink measures 15.3:1 on it and 14.3:1 on the hover
shade, against 16.8:1 on white. The row is marked without becoming harder to read, which is the
usual failure of helpful status colouring. */
table.data tbody tr.row-bad { background: #fdf2f1; }
table.data tbody tr.row-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.data tbody tr.row-bad td { font-weight: 500; }
table.data tbody tr.row-bad:hover { background: #fbe9e7; }
/* ---------------------------------------------------------------- stacked tables (phones) */
/* Opt-in card layout for tables that were MEASURED to overflow a 360px viewport — a fitting
table keeps its grid (comparison down a column beats cards). Contract for .table-stack:
every
carries data-label (the column header it stacks under), and the table carries
explicit ARIA roles (table/rowgroup/row/columnheader/cell) because switching display strips
the implicit ones in Chrome and Safari. The thead is display:none on phones; the per-cell
::before labels — announced by modern screen readers — take over its job.
This block must stay AFTER the table.data base rules: the overrides (td padding/border,
.num wrapping, row hover) tie them on specificity, so source order is what decides. */
@media (max-width: 40rem) {
table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100%; }
table.table-stack thead { display: none; }
table.table-stack tr {
border: 1px solid var(--line-soft);
border-radius: 8px;
background: var(--card);
margin: .6rem;
padding: .35rem .85rem;
width: auto;
}
table.table-stack tbody tr:hover { background: var(--card); } /* row hover is a grid affordance */
/* Cards paint their own background and border on the
, so the grid's row marking would
vanish here. Same three cues, restated in the card's own shape. */
table.table-stack tbody tr.row-bad,
table.table-stack tbody tr.row-bad:hover { background: #fdf2f1; border-color: var(--bad); border-left-width: 3px; }
table.table-stack tbody tr.row-bad td:first-child { box-shadow: none; }
table.table-stack td { border-bottom: 0; padding: .35rem 0; }
table.table-stack td::before {
content: attr(data-label);
display: block;
font-family: var(--font-display);
font-size: .75rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Values may wrap freely in cards — the no-wrap rule exists for grid columns. */
table.table-stack tbody .num { white-space: normal; }
table.table-stack caption { display: block; }
/* Once the table stacks, nothing overflows and the scroll wrapper is just a frame around
cards — drop it so they read as cards, not as cards boxed inside a card. Browsers without
:has() keep the frame; the layout still works, it is merely double-framed. */
.table-wrap:has(> table.table-stack) { border: 0; background: transparent; }
.table-wrap:has(> table.table-stack) table.table-stack tr { margin: .6rem 0; }
/* The card treatment above paints var(--card) — light — on the