/* SAT Traffic Lights — aligned aesthetic (v2).
* Visual system mirrors homepage v4-refined (the shipping aidroplets.com look):
* • Geist + Geist Mono
* • Single calibrated lavender accent (no rainbow gradients)
* • Dark canvas, restrained card chrome
* • Status colors (green/yellow/red) reserved for the confidence signal only
* • Tabular figures on numeric content
*
* HTML structure and class names are unchanged from the previous stylesheet so
* app.js continues to work without modification. Only the look-and-feel moves.
*/
:root {
/* Font stack — body stays Geist (highly readable sans) and titles
* use Space Grotesk (geometric oddball, more character). Both load
* via Google Fonts in index.html. The `--stl-font-display` var lets
* us swap heading fonts in one place without combing through every
* h1/h2/h3 rule. */
--stl-font-body: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--stl-font-display: "Space Grotesk", "Geist", system-ui, sans-serif;
--stl-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
/* surfaces — never pure black */
--stl-bg-deep: #050509;
--stl-bg: #0a0b12;
--stl-bg-2: #0d0e18;
--stl-surface: rgba(255, 255, 255, 0.035);
--stl-surface-2: rgba(255, 255, 255, 0.055);
--stl-surface-3: rgba(255, 255, 255, 0.075);
--stl-hairline: rgba(255, 255, 255, 0.07);
--stl-hairline-hi: rgba(255, 255, 255, 0.12);
/* text — never pure white */
--stl-text: #f0f2f7;
--stl-text-muted: #a8b0c4;
/* WCAG AA fix 2026-08-17. Was #6b7288 = 4.01:1 on --stl-bg-2 and 4.10:1 on
--stl-bg, under the 4.5:1 AA floor for normal text — across all 138 uses.
#787e92 clears it with headroom (4.76:1 worst case) and is 13 RGB points
lighter, so the step down from --stl-text-muted is unchanged.
Same value as /beta/'s --subtle: same token, and the two are meant to
read as one product. Light theme needed no change (already 5.33:1).
Pinned by tests/text-contrast.test.js. */
--stl-text-subtle: #787e92;
--stl-text-faint: #494f60;
/* one accent per surface */
--stl-accent: #8b86ff;
--stl-accent-2: #5d8dff;
--stl-accent-soft: rgba(139, 134, 255, 0.12);
--stl-accent-line: rgba(139, 134, 255, 0.4);
/* functional status colors (signal only) — saturated mid-tones for
* dots, chips, borders, and gradient sweeps where saturation reads
* cleanly against the dark canvas. */
--stl-green: #4ade80;
--stl-yellow: #facc15;
--stl-red: #fb7185;
/* RGB triplets of the three above, for rgba() composition. Same
* convention as --stl-rainbow-mid-rgb and --tile-tint: a box-shadow
* needs a colour with alpha, and you cannot get one out of a hex
* custom property without them. Keep in step with the hexes. */
--stl-green-rgb: 74, 222, 128;
--stl-yellow-rgb: 250, 204, 21;
--stl-red-rgb: 251, 113, 133;
/* Text-on-dark variants of the same hues — lighter pastels so big
* numerals and stat labels stay readable. The mid-tone signal
* colors above look fine as small marks but visibly recede when
* blown up to 40+px text against #050509. These are roughly the
* Tailwind 300-tier siblings of the values above. */
--stl-green-text: #86efac;
--stl-yellow-text: #fde047;
--stl-red-text: #fda4af;
/* FIXLIST P1 (2026-08-18) — colours that were shipping as literals with
* no token to reach for:
* amber : the "gap" outcome + admin activity warnings ("#f59e0b, a
* seventh signal-adjacent colour with no token" — GAPS.md)
* blue : the insane tier / AI-generated hue (#60a5fa family, was
* hardcoded in app.css AND signal-theme.css independently)
* Light values follow the same rule as the signal trio: saturated
* mid-tones that pass on white. */
--stl-amber: #f59e0b;
--stl-amber-rgb: 245, 158, 11;
--stl-amber-text: #fcd34d;
--stl-blue: #60a5fa;
--stl-blue-rgb: 96, 165, 250;
--stl-blue-text: #93c5fd;
/* The opaque interior + hover interior for the rainbow gradient-border
* trick (background: linear-gradient(fill,fill) padding-box, rainbow
* border-box). Was hardcoded #15161d/#1c1d25 at ~10 sites, each needing
* its own light-theme patch; now the token flips once. */
--stl-rainbow-fill: #15161d;
--stl-rainbow-fill-hover: #1c1d25;
/* Frosted-glass surface for FLOATING panels — menus, dropdowns,
* popovers. ~92% tint + a backdrop blur ON THE CONSUMER (the blur
* cannot live in a colour token): behind-content reads as a soft glow,
* never as legible text. The failure this replaces was the user menu
* at 5.5% --stl-surface-2 — readable page text through the menu
* (Joshua 2026-08-18); his follow-up: fully opaque lost the depth,
* "I still wanted some opacity." Same recipe as the toast. */
--stl-panel: rgba(22, 23, 33, 0.92);
/* Input hover border. Was raw rgba(255,255,255,.18), which VANISHES in
* light mode (lighter than the resting border on a white canvas). */
--stl-hairline-hover: rgba(255, 255, 255, 0.18);
/* ============ Generic "rainbow" accent (G5+teal — Stripe tri-tone + green) ============
* Teal → sky → violet → pink, four-stop gradient. The teal at the
* cool end transitions into sky through aqua, so the green reads
* as part of the cool-palette family rather than a separate hue
* jump. Used in place of a single white/lavender accent for any
* surface that's NOT bound to a specific test type. Lives at :root
* so any file can pull it directly. The single-color fallback
* (--stl-rainbow-mid) is the violet near-midpoint — used in glows,
* shadows, and other places where a CSS gradient can't apply
* (e.g. box-shadow color, rgba alpha tints). The RGB triplet
* (--stl-rainbow-mid-rgb) lets rgba(...) calls compose against it
* the same way --stl-tint does for test colors.
*
* Previous gradient: G5 Stripe-style (no green)
* linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f0abfc 100%)
* Older fallback: G2 cool spectrum
* linear-gradient(90deg, #a855f7 0%, #6366f1 33%, #3b82f6 66%, #06b6d4 100%)
* mid #6366f1 / 99, 102, 241
* Both stored in the rainbow-gradients reference memory for easy
* fallback if this doesn't land.
*
* The canvas-gradient version (for the Chart.js radar polygon)
* lives in app.js → buildRainbowCanvasGradient; both must change
* together when swapping. */
--stl-rainbow: linear-gradient(90deg, #5eead4 0%, #60a5fa 33%, #a78bfa 66%, #f0abfc 100%);
--stl-rainbow-soft: linear-gradient(90deg,
rgba( 94, 234, 212, 0.16) 0%,
rgba(var(--stl-blue-rgb), 0.16) 33%,
rgba(167, 139, 250, 0.16) 66%,
rgba(240, 171, 252, 0.16) 100%);
--stl-rainbow-mid: #a78bfa; /* violet near-midpoint */
--stl-rainbow-mid-rgb: 167, 139, 250;
/* spacing — raw step scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
/* Vertical-spacing INTENT tokens — use these (not raw --s-* values)
* when separating chunks of content inside a hero card so every page
* follows the same rhythm. Picking by intent means "all subsection
* separators look the same across pages" without anyone having to
* remember which step is the right one.
*
* --gap-hug : 8px — paired title + its immediate subtitle
* --gap-tight : 12px — items within a single group (chip row,
* ledger row internals)
* --gap-normal : 16px — default subsection separator; the gap
* between distinct chunks inside one card
* --gap-section : 20px — major section break inside the same card
* (e.g. head → main, main → CTA)
* --gap-hero : 32px — between a card's hero head and its first
* real interactive section (used sparingly)
*
* Rule of thumb when deciding which to use:
* "Are these two siblings the same kind of thing?" → --gap-tight
* "Same area of the page, just different parts?" → --gap-normal
* "These are distinctly separate areas?" → --gap-section
*/
--gap-hug: var(--s-2);
--gap-tight: var(--s-3);
--gap-normal: var(--s-4);
--gap-section: var(--s-5);
--gap-hero: var(--s-7);
/* radius */
--r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 9999px;
/* shell width (2026-08-06)
* Spacing, gap and radius all had scales and stayed consistent. Width
* and breakpoints never had one, and those are exactly the two
* dimensions that drifted — the teacher shell alone ended up with two
* competing "canonical" numbers, 1000 and 1080. So: four shells, and a
* single governing rule.
*
* THE RULE: only .stl-main sets page width. Inner elements may cap
* measure (in ch) but never shell (in px). Overlays that float above
* the page — modals, dialogs, the printable worksheet — are the one
* exemption, because they are not laid out inside the column.
*
* --shell-focus : auth cards, confirm dialogs, single-purpose panels
* --shell-read : picker, quiz, results, review, score, history
* --shell-work : teacher — panels plus a side rail
* --shell-data : admin — tables and database views
*/
--shell-focus: 440px;
--shell-read: 760px;
--shell-work: 1000px;
--shell-data: 1280px;
/* measure — how many characters a line of text may run before it gets
* hard to track back to the next one. These four values were already
* in the stylesheet as raw numbers in a dozen places; naming them just
* makes the existing convention enforceable. Unlike shell width, any
* element may set its own measure — that is the whole point of the
* distinction. */
--measure-title: 18ch; /* h1 */
--measure-lede: 56ch; /* subheads, intro paragraphs */
--measure-body: 44ch; /* body copy, notes */
--measure-meta: 30ch; /* captions, truncated labels */
/* motion
* --ease-out : gentle settle for screen transitions
* --ease-spring: light bounce for "alive" hover states (Trench-inspired)
* --dur-fast : :active rebound, removed states
* --dur-base : most hover transitions
* --dur-slow : decorative reveals (underline grows, background washes)
*/
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.2, 0.6, 0.2, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 280ms;
}
/* ===========================================================
* LIGHT MODE — token overrides
* ===========================================================
*
* Activated by stamping `data-theme="light"` on . The inline
* boot script in index.html applies the saved value before first
* paint so light-mode users don't see a dark flash.
*
* Design philosophy:
* • Page surface is a slightly-cool off-white (#fafbfd) — pure
* #fff feels clinical against the rainbow accents. The same
* amount of contrast off the page reads as "less harsh."
* • Text is near-black with a faint blue cast (#16181f) — pairs
* with the cool surface, avoids the muddy-brown look pure
* #000 picks up next to the lavender accent.
* • Surface layers darken instead of lighten (the dark theme
* lightens by adding white at low opacity; here we add slate at
* low opacity to the white). Same depth perception, opposite
* direction.
* • Hairlines roughly double in opacity vs dark mode — what reads
* as a subtle 7% white on near-black needs ~14% slate on
* near-white to feel equivalent.
* • The lavender accent steps slightly darker (#6963e8 vs #8b86ff)
* so it stays legible against white. The rainbow gradient stays
* identical — it's bright enough against either surface.
* • Status colors flip to their saturated mid-tones (text-only
* greens/yellows/reds darken to #16a34a / #ca8a04 / #dc2626)
* so they pass contrast on white.
*/
:root[data-theme="light"] {
--stl-bg-deep: #f3f4f8;
--stl-bg: #fafbfd;
--stl-bg-2: #f3f5f9;
/* Surface tints — same "translucent depth" idea as dark mode but
* we layer slate over white instead of white over near-black. */
--stl-surface: rgba(15, 23, 42, 0.025);
--stl-surface-2: rgba(15, 23, 42, 0.045);
--stl-surface-3: rgba(15, 23, 42, 0.065);
/* Hairlines roughly 2x opacity to compensate for the white field. */
--stl-hairline: rgba(15, 23, 42, 0.10);
--stl-hairline-hi: rgba(15, 23, 42, 0.18);
/* Text scale flipped — near-black down to faint slate gray. WCAG AA
* for the muted variants:
* --stl-text-muted (#3f4555) on #fafbfd surface ≈ 9.4:1
* --stl-text-subtle (#5e6573) ≈ 6.3:1
* --stl-text-faint (#7e8493) ≈ 4.5:1 (minimum for normal text)
* Faint stays at exactly the floor so it reads as "low-emphasis"
* without being illegible. Earlier values were too washed out
* (#757b8d, #a0a6b5) — table headers + captions came out near gray
* fog against the page. */
--stl-text: #16181f;
--stl-text-muted: #3f4555;
--stl-text-subtle: #5e6573;
--stl-text-faint: #7e8493;
/* Accent steps darker so it stays legible on white. The companion
* --stl-accent-2 matches the new center but holds the blue-violet
* angle the dark-mode pair had. */
--stl-accent: #6963e8;
--stl-accent-2: #4a6cd1;
--stl-accent-soft: rgba(105, 99, 232, 0.10);
--stl-accent-line: rgba(105, 99, 232, 0.40);
/* Status colors. Two layers:
* • --stl-green-text / --stl-yellow-text / --stl-red-text ← used
* as PILL / CHART LABEL text. Already at the darker saturated
* mid-tones in dark mode and we keep that here.
* • --stl-green / --stl-yellow / --stl-red ← used as SOLID-COLOR
* KPI numbers, status dots, gradient sweeps. In dark mode these
* are pastel mid-tones (#4ade80 etc.) which are unreadable as
* TEXT against white. Override to the same darker saturated
* versions so admin KPIs like "LIVE 2123" stop looking pale.
* The visual identity (green = good, yellow = caution, red = bad)
* is preserved — just at a richer saturation that pops on white. */
--stl-green: #16a34a;
--stl-yellow: #ca8a04;
--stl-red: #dc2626;
--stl-green-rgb: 22, 163, 74;
--stl-yellow-rgb: 202, 138, 4;
--stl-red-rgb: 220, 38, 38;
--stl-amber: #b45309;
--stl-amber-rgb: 180, 83, 9;
--stl-amber-text: #92400e;
--stl-blue: #2563eb;
--stl-blue-rgb: 37, 99, 235;
--stl-blue-text: #1d4ed8;
--stl-rainbow-fill: #ffffff;
--stl-rainbow-fill-hover: #f6f7fb;
--stl-panel: rgba(255, 255, 255, 0.92);
--stl-hairline-hover: rgba(15, 23, 42, 0.28);
--stl-green-text: #15803d;
--stl-yellow-text: #a16207;
--stl-red-text: #b91c1c;
/* When a test isn't active, --stl-tint defaults from the dark
* theme would render too pale against white. JS sets --stl-tint
* inline on the html element via applyTestAccent — that flows
* through unchanged; this is only the unset fallback. */
}
/* ---- Light-mode hardcoded-color overrides ----
*
* A few rules in this file use hex colors directly instead of the
* tokens above (typically because they pair specific shades with a
* specific gradient). Light mode flips those inline. */
:root[data-theme="light"] body,
:root[data-theme="light"] {
background: var(--stl-bg);
color: var(--stl-text);
color-scheme: light;
}
:root[data-theme="light"] .stl-header {
background: rgba(250, 251, 253, 0.92);
border-bottom-color: var(--stl-hairline);
}
/* The .stl-outline / picker tile / Tests-row use the
* `linear-gradient(#15161d, #15161d) padding-box` double-background
* trick to draw a rainbow border with a dark fill. Light mode swaps
* the fill to a near-white so the rainbow border still works. */
:root[data-theme="light"] .stl-btn--outline {
background:
linear-gradient(#fafbfd, #fafbfd) padding-box,
var(--stl-rainbow) border-box;
}
:root[data-theme="light"] .stl-btn--outline:hover {
background:
linear-gradient(#f0f2f7, #f0f2f7) padding-box,
var(--stl-rainbow) border-box;
}
/* ============================================================
* Rainbow-border focal elements — light-mode fill swap
* ============================================================
* Several elements in the app use the padding-box/border-box
* double-background trick to paint a rainbow border with a solid
* dark interior (#15161d). That interior is hardcoded for the dark
* canvas. On light mode (#fafbfd page bg), every one of these
* renders as a black pill with whatever white text or icon glyph
* lives inside becoming invisible.
*
* The fix is uniform: swap the padding-box fill to white in light
* mode. The rainbow border stays — it's theme-independent and reads
* fine on either canvas. Text/icon color is already `var(--stl-text)`
* in most cases, which auto-flips to dark in light mode.
*
* If a NEW element ever adopts the dark+rainbow pattern, add its
* selector to this group rather than scattering overrides. The
* elsewhere-fixed pair (.stl-btn--pill-rainbow + the usermenu panel)
* use `#ffffff` for the same intent — same convention.
*/
:root[data-theme="light"] .stl-header__nav-link[aria-current="page"] .stl-header__nav-icon,
:root[data-theme="light"] .stl-history__chip[data-history-filter="all"].is-active,
:root[data-theme="light"] button.stl-admin__kpi[data-kind="total"][aria-pressed="true"],
:root[data-theme="light"] .stl-admin__tab[aria-selected="true"] .stl-admin__tab-count {
background:
linear-gradient(#ffffff, #ffffff) padding-box,
var(--stl-rainbow) border-box;
}
/* The "All" history chip's count badge has the rainbow as its full
* background with text colored `var(--stl-bg)`. In dark mode that
* resolves to #0b0c11 — strong contrast on the bright gradient. In
* light mode it resolves to #fafbfd — fails contrast against the
* lighter stops of the rainbow. Force dark text in light mode. */
:root[data-theme="light"] .stl-history__chip[data-history-filter="all"].is-active .stl-history__chip-n {
color: var(--stl-text);
}
/* @media (hover: none) explicitly re-applies the dark fill to
* .stl-btn--outline on touch devices to clear the lift/shadow. That
* undoes our light-mode swap above for touch. Re-apply the light
* fill inside the same query so touch + light mode behaves. */
@media (hover: none) {
:root[data-theme="light"] .stl-btn--outline:hover {
background:
linear-gradient(#fafbfd, #fafbfd) padding-box,
var(--stl-rainbow) border-box;
}
}
/* --primary is now a border-only rainbow rectangle (see the block near
* `.stl-btn--primary` further down). Its padding-box fill is hardcoded
* #15161d for the dark canvas, so light mode needs the usual swap to
* white — same convention as --pill-rainbow and the rest of the
* rainbow-border group below. Before 2026-08-05 this pair softened the
* glass rim of the FILLED primary; that treatment is gone. */
:root[data-theme="light"] .stl-btn--primary,
:root[data-theme="light"] .stl-btn--rainbow-outline {
background:
linear-gradient(#ffffff, #ffffff) padding-box,
var(--stl-rainbow) border-box;
color: var(--stl-text);
box-shadow: none;
}
/* The picker's "why it works" band uses the same double-background
* trick and so needs the same swap. It is listed separately rather
* than added to the selector above because it is not a button: it has
* no hover fill and no shadow, so folding it in would hand it both. */
:root[data-theme="light"] .stl-whyband {
background:
linear-gradient(#ffffff, #ffffff) padding-box,
var(--stl-rainbow) border-box;
}
:root[data-theme="light"] .stl-btn--primary:hover,
:root[data-theme="light"] .stl-btn--rainbow-outline:hover {
background:
linear-gradient(#f6f7fb, #f6f7fb) padding-box,
var(--stl-rainbow) border-box;
box-shadow: 0 10px 24px -10px rgba(var(--stl-rainbow-mid-rgb), 0.35);
}
/* Touch devices persist :hover after a tap, so the hover fill would
* stick. Re-state the resting light fill inside the same query. */
@media (hover: none) {
:root[data-theme="light"] .stl-btn--primary:hover,
:root[data-theme="light"] .stl-btn--rainbow-outline:hover {
background:
linear-gradient(#ffffff, #ffffff) padding-box,
var(--stl-rainbow) border-box;
box-shadow: none;
}
}
/* ===========================================================
* Theme-toggle button (header chip)
* ===========================================================
*
* Lives next to the Highlight toggle. Same ghost-button base; we
* only override icon visibility based on the current theme. Moon
* shows in dark mode (so the user clicks "moon → go light"); sun
* shows in light mode (so user clicks "sun → go dark"). The label
* text updates from JS to match. */
.stl-theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
}
.stl-theme-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
}
/* Default theme = dark: show the moon (action = go light). */
.stl-theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .stl-theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .stl-theme-toggle__icon--sun { display: inline-flex; }
*, *::before, *::after { box-sizing: border-box; }
/* ====================================================================
* `hidden` MEANS HIDDEN. Read this before adding another
* `.thing[hidden] { display: none }` rule — you do not need one.
*
* The user-agent stylesheet says `[hidden] { display: none }`, and ANY
* author `display` declaration beats it, because author styles outrank
* UA styles regardless of specificity or order. So every component with
* `display: flex` / `grid` / `inline-flex` in this file silently ignores
* the hidden attribute, and every one of them is a latent bug the moment
* JavaScript sets `el.hidden = true` and trusts it.
*
* That has shipped at least five separate times: the toast text, the
* teacher "← Dashboard" button, `.stl-score__target`, the menu-sheet Sign
* out / Teacher rows visible to guests, and — found by the audit that
* produced this rule — `#btn-switch-mode`, which was rendering at
* 186×36px in the account menu while marked hidden. Each was fixed with
* one more per-element guard; there are ~76 of those in this file, which
* is the same fix written seventy-six times.
*
* This kills the class. `!important` is load-bearing and is the correct
* tool here: the whole point is to outrank an author `display` on the
* same element, which normal specificity cannot reliably do.
*
* Scoped to descendants of body (the app root class lives ON ),
* which covers overlays appended to body at runtime — the countdown, the
* print root, modals — not just markup inside the screens.
*
* VERIFIED SAFE before adding: no rule anywhere sets a `[hidden]`
* element to a visible display, so nothing was relying on the bug except
* the one dead button named above. If you ever genuinely need a hidden
* element to render, do not fight this rule — that element should not be
* carrying the hidden attribute.
* ================================================================== */
.stl-app [hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html {
/* Reserve the gutter, do NOT force a scrollbar (Josh 2026-08-12:
* "remove the unnecessary vertical scrolling ... it should only
* scroll if needed"). This used to be `overflow-y: scroll`, which
* pinned a permanently visible bar on every page, short ones
* included. scrollbar-gutter alone still holds the space in every
* engine that supports it (Safari has since 18.2), so the original
* bug it was guarding — centered layouts shifting sideways when
* content crossed the viewport height — stays fixed without the
* always-on scrollbar. */
scrollbar-gutter: stable;
/* clip horizontal overflow so the card-slide View Transition never
* paints a horizontal scrollbar mid-animation when the leaving card
* is at translateX(-110%) */
overflow-x: clip;
/* iOS: prevent text-size auto-bumping when rotating to landscape */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Touch baseline. `manipulation` removes the 300ms double-tap-zoom
* delay on iOS Safari for these affordances; the tap-highlight reset
* kills the gray flash that fires on every tap. Hover states are
* scoped to hover-capable pointers below so they don't get "stuck"
* after a touch. */
.stl-btn,
.dc-btn,
.stl-signal__btn,
.stl-choice,
.stl-choice--chart,
.stl-tier,
.stl-stepnav__btn,
.stl-input,
.stl-quiz__gridin-input {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Anti-banding via EASED GRADIENTS, not noise (Josh 2026-08-10:
* "remove the noise"). The old approach dithered 8-bit quantization
* rings with an feTurbulence grain tile; the rings themselves come
* from two-stop gradients, whose linear alpha ramp has derivative
* kinks at both ends — exactly where the eye finds Mach bands. Every
* ambient gradient below now uses ~8 stops following a half-cosine
* falloff (alpha × 0.5+0.5·cos(πt) at t = 0, .15, .3, .45, .6, .75,
* .9, 1): each segment's per-pixel delta is a fraction of a
* quantization step and the curve enters and leaves the ramp with
* zero slope, so there is no edge to find. No texture, no filter
* cost. If a ramp ever bands again, add stops — don't re-add grain. */
.stl-app {
font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-feature-settings: "ss01", "cv11";
font-size: 15px;
line-height: 1.55;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--stl-text);
background: var(--stl-bg-deep);
min-height: 100dvh;
/* Sticky-footer column (Josh 2026-08-11: "there's a lot of extra space
* at the bottom of pages ... it's adding unnecessary scrollbars").
* Several screens used to fill the viewport with their own
* `min-height: 100dvh` (or `100dvh - 60px` under the header). None of
* them knew the legal footer existed, so the footer's ~122px landed
* PAST the fold and every one of those screens shipped a scrollbar
* that revealed nothing but the footer. Laying body out as a column
* and letting .stl-main take the slack means "fill the viewport" is
* computed from what's actually left over — header and footer
* included — instead of from a hardcoded viewport fraction. */
display: flex;
flex-direction: column;
position: relative;
/* MUST be `clip`, never `hidden`. `overflow-x: hidden` forces the
* other axis to compute to `auto` (CSS Overflow 3: a visible axis
* paired with a non-visible/non-clip axis becomes auto), which turns
* into a real scroll container. Body's overflow would normally
* propagate up to the viewport instead — but only when 's
* overflow is `visible`, and ours is `scroll`/`clip` (see the html
* rule above), so propagation never happens and body keeps a
* scrollport of its own that never actually scrolls. Every
* `position: sticky` descendant then scopes itself to that dead
* scrollport and silently never latches: the site header and the
* worksheet builder aside both scrolled clean off the top. `clip`
* pairs legally with `visible`, so the horizontal clipping we want
* survives while body stops being a scroll container. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
/* single soft ambient glow, top-right (matches homepage). Pulls
* --stl-tint so the glow matches the active test (orange for ACT,
* green for ISEE, etc.) — and stays neutral white on the picker /
* splash screens where applyNeutralAccent has set --stl-tint to
* 255, 255, 255. We tone the alpha down a hair for the white state
* (which reads brighter than colored at the same alpha) via a
* separate rule below. */
.stl-app::before {
content: "";
position: fixed;
top: -300px;
right: -200px;
width: 800px;
height: 800px;
/* Zero-alpha same-hue end stop, not bare `transparent` — see the
* ::after rule below for why. This orb bands less than the others
* because the 40px blur already dithers it, but the muddying toward
* black is visible on the tint crossfade. */
background: radial-gradient(closest-side,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.16) 0%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.151) 10.5%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.127) 21%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.093) 31.5%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.055) 42%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.023) 52.5%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.004) 63%,
rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0) 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
/* Smooth the white → test-color crossfade when the user enters a
* test from the picker (and back). Longer than the per-element
* hover duration since this is a page-scale change. */
transition: background var(--dur-slow) var(--ease-out);
}
/* Neutral state — pink-purple (Joshua 2026-07-20), blended from the
* rainbow's violet #a78bfa + pink #f0abfc stops. Only the NEUTRAL
* (picker/splash) state is pinned; inside a test the orb still
* crossfades to that test's tint via the rule above. */
html:not(.stl-test-active) .stl-app::before {
background: radial-gradient(closest-side,
rgba(212, 140, 250, 0.15) 0%,
rgba(212, 140, 250, 0.142) 10.5%,
rgba(212, 140, 250, 0.119) 21%,
rgba(212, 140, 250, 0.087) 31.5%,
rgba(212, 140, 250, 0.052) 42%,
rgba(212, 140, 250, 0.022) 52.5%,
rgba(212, 140, 250, 0.004) 63%,
rgba(212, 140, 250, 0) 70%);
}
html[data-theme="light"]:not(.stl-test-active) .stl-app::before {
background: radial-gradient(closest-side,
rgba(168, 85, 247, 0.13) 0%,
rgba(168, 85, 247, 0.123) 10.5%,
rgba(168, 85, 247, 0.103) 21%,
rgba(168, 85, 247, 0.075) 31.5%,
rgba(168, 85, 247, 0.045) 42%,
rgba(168, 85, 247, 0.019) 52.5%,
rgba(168, 85, 247, 0.003) 63%,
rgba(168, 85, 247, 0) 70%);
}
/* Two more ambient orbs (Joshua, 2026-07-20): brand blue-green on the
* left, deeper brand blue center — both big enough to overlap each
* other (and reach toward the top-right tint orb). Colors come from
* the rainbow ramp: teal stop #5eead4, and a deepened cousin of the
* sky stop (#60a5fa → #2563eb). One full-viewport fixed layer, two
* radial backgrounds; no filter blur (the soft stops do the work, and
* a viewport-sized blur would tax Safari compositing). */
.stl-app::after {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 0;
/* All three orbs sit in one horizontal band along the top, level
* with the pink top-right orb (whose center lands ~100px into the
* viewport): teal left corner, deep blue top-center, pink right. */
/* Three anti-banding measures, in order of how much they matter:
*
* 1. Eased (half-cosine) stop ramps — see the note above .stl-app.
* This replaced the grain tile 2026-08-10.
* 2. Zero-alpha stops of the SAME hue instead of bare `transparent`.
* `transparent` is rgba(0,0,0,0), so ramping to it interpolates
* toward BLACK, which both muddies the colour and adds a third
* channel with its own quantization steps to band on.
* 3. A max radius in px. The rings only showed up at wide widths
* because vmax kept stretching the ramp, giving each step more
* pixels to be visible across. Past ~1600px wide the orb now
* stops growing instead of getting flatter. */
background:
radial-gradient(circle min(48vmax, 760px) at 3% 8%,
rgba(45, 212, 191, 0.15) 0%,
rgba(45, 212, 191, 0.142) 10.5%,
rgba(45, 212, 191, 0.119) 21%,
rgba(45, 212, 191, 0.087) 31.5%,
rgba(45, 212, 191, 0.052) 42%,
rgba(45, 212, 191, 0.022) 52.5%,
rgba(45, 212, 191, 0.004) 63%,
rgba(45, 212, 191, 0) 70%),
radial-gradient(circle min(54vmax, 860px) at 50% 6%,
rgba(59, 130, 246, 0.19) 0%,
rgba(59, 130, 246, 0.180) 10.5%,
rgba(59, 130, 246, 0.151) 21%,
rgba(59, 130, 246, 0.110) 31.5%,
rgba(59, 130, 246, 0.066) 42%,
rgba(59, 130, 246, 0.028) 52.5%,
rgba(59, 130, 246, 0.005) 63%,
rgba(59, 130, 246, 0) 70%);
}
/* Light theme: SEPARATE tuning, not just dimmed dark values. Diffuse
* washes vanish on white (peak alpha spread too thin) and the light
* hero card is near-opaque so nothing glows through it — so the
* light orbs are TIGHTER (steeper stops, concentrated color, like
* the top-right orb that already worked) and the blue is wide enough
* that its flanks tint the gutters around the card. */
:root[data-theme="light"] .stl-app::after {
/* 2026-07-22 (Joshua): both light orbs read too loud against the
* white canvas — teal 0.30 → 0.16, center blue 0.22 → 0.12. Same
* tight geometry, roughly half the ink. */
/* Same anti-banding measures as the dark rule above (eased stops,
* same-hue zero-alpha ends, px radius cap). Light bands less (the
* ramp sits in the top of the 8-bit range where a step is a smaller
* relative jump) but it still bands, and ramping to bare
* `transparent` on a white canvas is the worst case for the
* black-interpolation problem. */
background:
radial-gradient(circle min(36vmax, 620px) at 4% 8%,
rgba(20, 184, 166, 0.16) 0%,
rgba(20, 184, 166, 0.151) 9.3%,
rgba(20, 184, 166, 0.127) 18.6%,
rgba(20, 184, 166, 0.093) 27.9%,
rgba(20, 184, 166, 0.055) 37.2%,
rgba(20, 184, 166, 0.023) 46.5%,
rgba(20, 184, 166, 0.004) 55.8%,
rgba(20, 184, 166, 0) 62%),
radial-gradient(circle min(62vmax, 980px) at 50% 6%,
rgba(37, 99, 235, 0.12) 0%,
rgba(37, 99, 235, 0.113) 9.3%,
rgba(37, 99, 235, 0.095) 18.6%,
rgba(37, 99, 235, 0.069) 27.9%,
rgba(37, 99, 235, 0.041) 37.2%,
rgba(37, 99, 235, 0.018) 46.5%,
rgba(37, 99, 235, 0.003) 55.8%,
rgba(37, 99, 235, 0) 62%);
}
.stl-app > * { position: relative; z-index: 1; }
/* numeric content gets tabular figures by default */
.stl-app input[type="number"],
.stl-quiz__counter,
.stl-pill {
font-variant-numeric: tabular-nums;
}
a { color: inherit; text-decoration: none; }
/* --- top bar --------------------------------------------------------- */
.stl-header {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
/* Height grows by the iOS safe-area inset so the bar still measures
* 60px below the notch. The horizontal padding takes the larger of
* the design padding or the device-specific safe-area inset (left
* landscape on a notched phone), so content never tucks under the
* hardware. */
height: calc(60px + env(safe-area-inset-top));
padding-top: env(safe-area-inset-top);
padding-right: max(clamp(var(--s-4), 4vw, var(--s-7)), env(safe-area-inset-right));
padding-bottom: 0;
padding-left: max(clamp(var(--s-4), 4vw, var(--s-7)), env(safe-area-inset-left));
/* Higher opacity + lower saturation so the ambient page-glow under
* .stl-app::before (which carries the active test's tint) doesn't
* bleed up through the navbar's backdrop blur as a colored cast.
* Reads as a stable dark surface across all screens / test colors. */
background: rgba(10, 11, 18, 0.92);
backdrop-filter: saturate(120%) blur(14px);
-webkit-backdrop-filter: saturate(120%) blur(14px);
border-bottom: 1px solid var(--stl-hairline);
}
.stl-header__brand {
display: inline-flex;
align-items: center;
gap: var(--s-3);
}
.stl-header__titles {
display: flex;
align-items: baseline;
gap: 8px;
line-height: 1.1;
}
.stl-header__name {
font-weight: 600;
font-size: 14.5px;
letter-spacing: -0.02em;
color: var(--stl-text);
}
.stl-header__eyebrow {
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--stl-text-subtle);
text-transform: lowercase;
}
/* Left-side header group — brand + primary nav tabs grouped together,
* with auth/chrome pushed to the right by the parent's space-between.
* Uses align-items: stretch so the nav can fill the full header height,
* which is what lets the underline indicator sit on the navbar hairline
* (the indicator is pinned to the BOTTOM of the link, so the link must
* extend to the bottom of the header — otherwise it floats mid-air). */
.stl-header__left {
display: inline-flex;
align-items: stretch;
/* Self-stretch is critical: the parent .stl-header is
* `align-items: center`, which would shrink this group to its
* content height and leave the nav link's "bottom" floating in the
* middle of the navbar. align-self: stretch overrides that so the
* link runs floor-to-ceiling and the underline indicator lands on
* the navbar's actual hairline. */
align-self: stretch;
gap: var(--s-5);
/* Allow the group to shrink so the right-side actions stay reachable
* if a long user email needs room. The nav itself can ellipsize/hide
* via the breakpoint rules below if the bar gets tight. */
min-width: 0;
}
/* Brand link sits inside the stretched container — center it vertically
* so the wordmark stays at the visual midline despite the stretch. */
.stl-header__brand { align-self: center; }
/* Primary nav — text-only tab strip that sits to the right of the
* wordmark. Each link is a button (calls into showScreen rather than
* navigating a URL), styled like a desktop nav tab with a hairline
* underline indicator on the active page. */
.stl-header__nav {
display: inline-flex;
align-items: stretch;
gap: 0;
/* Anchor for the sliding indicator; the bar is absolutely positioned
* inside the nav so it can move between tabs independently. */
position: relative;
}
.stl-header__nav-link {
/* Reset button chrome — these are plain text tabs, not pills. */
appearance: none;
background: transparent;
border: 0;
font: inherit;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
gap: 9px; /* spacing between leading icon and label */
/* Stretch to full header height so the sliding indicator, pinned to
* the nav's bottom edge, lands right on the navbar's hairline. */
align-self: stretch;
padding: 0 var(--s-3);
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--stl-text-muted);
transition: color var(--dur-base) ease;
/* Never wrap. .stl-header__left carries min-width: 0 so the group can
* shrink, and a shrinking flex item lets its text collapse to
* min-content — the longest WORD. That is why the tabs folded into
* two lines inside a fixed-height bar instead of overflowing
* visibly (Josh 2026-08-11). With nowrap the bar fails loudly at the
* tier boundaries below, where we can actually see and fix it. */
white-space: nowrap;
}
/* Short label — swapped in for the full one at the tightest desktop
* tier. Both spans stay in the a11y tree; each nav button carries an
* explicit aria-label so its accessible name never changes with the
* viewport. */
.stl-header__nav-label-sm { display: none; }
.stl-header__nav-link[hidden] { display: none; }
/* Rounded-square chip behind each icon. Anchors the icon as a visual
* unit and gives the nav a more app-shell feel than naked glyphs.
* Default state is a muted surface with a hairline; hover lifts the
* surface a step, and the active tab fills with the accent tint so
* the chip becomes a second indicator that pairs with the underline. */
.stl-header__nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--stl-surface);
border: 1px solid var(--stl-hairline);
color: var(--stl-text-muted);
/* Tween bg+border+color so the chip flows into its active state in
* step with the rest of the tab transition. */
transition:
background var(--dur-base) ease,
border-color var(--dur-base) ease,
color var(--dur-base) ease,
box-shadow var(--dur-base) ease;
}
.stl-header__nav-icon svg {
display: block;
flex-shrink: 0;
}
.stl-header__nav-link:hover .stl-header__nav-icon {
background: var(--stl-surface-2);
border-color: var(--stl-hairline-hi);
color: var(--stl-text);
}
.stl-header__nav-link[aria-current="page"] .stl-header__nav-icon {
/* Gradient-border treatment for the active tab's icon chip — the
* padding-box / border-box trick, 1.5px transparent border filled by the
* rainbow (which signal-theme.css retunes to the green→yellow→red signal
* ramp), opaque interior so the icon glyph stays legible inside.
*
* History, so this does not get re-litigated from scratch: this went GREY
* on 2026-08-18 at Joshua's request, then came back the same day after he
* saw the alternatives side by side (`redesigns/nav-selected/`). The grey
* version and three hard-stop variants are all still on that page if the
* question reopens. Reverted deliberately, not by accident. */
border: 1.5px solid transparent;
background:
linear-gradient(var(--stl-rainbow-fill), var(--stl-rainbow-fill)) padding-box,
var(--stl-rainbow) border-box;
color: var(--stl-text);
box-shadow: none;
}
.stl-header__nav-link:hover {
color: var(--stl-text);
}
/* FIXLIST P0 (2026-08-18): this rule used to be `:hover, :focus-visible
* { outline: none }` — the primary nav actively deleted its focus ring on
* every screen, the only place in the codebase that removed one. */
.stl-header__nav-link:focus-visible {
color: var(--stl-text);
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
/* Active tab text — the underline itself lives on the shared indicator
* below, so this rule only handles the text color promotion. */
.stl-header__nav-link[aria-current="page"] { color: var(--stl-text); }
/* Sliding active-tab underline. A single shared bar absolutely
* positioned at the bottom of the nav; JS measures the active tab and
* sets `transform: translateX(...)` + `width: ...px`. The transition
* gives the spring-out ease most tab strips use (overshoot a touch,
* settle). Opacity gates first paint so it doesn't slide in from x=0
* before JS has measured the active tab. */
.stl-header__nav-indicator {
position: absolute;
bottom: -1px; /* sit on top of the header border */
left: 0;
height: 2px;
width: 0;
/* Rainbow accent for the navbar's active-tab marker. The navbar is global
* chrome (not bound to any single test), so the brand's "all tests"
* gradient is the right default here. Briefly grey on 2026-08-18 — see the
* note on the icon chip above and `redesigns/nav-selected/` for the
* variants that were compared. */
background: var(--stl-rainbow);
border-radius: 0;
opacity: 0;
pointer-events: none;
transform: translateX(0);
/* Transitions only kick in once .is-ready lands. Before that the
* indicator is in its "first positioning" phase and snaps directly
* to its target — without this, the very first paint after page
* load would slide the bar from x=0 (the CSS default) to its real
* position while opacity was rising, reading as a visible flash. */
transition: none;
}
.stl-header__nav-indicator.is-ready {
opacity: 1;
/* easeOutCubic — pure deceleration, no overshoot. The previous
* cubic-bezier(0.32, 0.72, 0, 1) had a faint rubber-band feel on
* arrival that read as a "bounce" on tab clicks. This curve
* settles flat. */
transition:
transform 280ms cubic-bezier(0.33, 1, 0.68, 1),
width 280ms cubic-bezier(0.33, 1, 0.68, 1),
opacity 180ms ease;
}
/* Honor reduced motion — no slide, just instant placement. */
@media (prefers-reduced-motion: reduce) {
.stl-header__nav-indicator,
.stl-header__nav-indicator.is-ready {
transition: opacity 120ms ease;
}
}
/* Self-click bounce: when the user clicks the tab they're already on,
* showScreen would no-op (same → same), which feels dead. JS adds
* .is-bouncing for a beat so the underline gives a small "yep, here"
* pulse using a spring curve. The animation runs on top of the
* existing translateX, so we use a CSS variable to compose:
* indicator's transform already includes translateX(Xpx); we add the
* scaleY pulse via a sibling animation property. */
@keyframes stl-nav-indicator-bounce {
0% { transform: translateX(var(--nav-indicator-x, 0)) scaleY(1) scaleX(1); }
35% { transform: translateX(var(--nav-indicator-x, 0)) scaleY(2.2) scaleX(0.92); }
70% { transform: translateX(var(--nav-indicator-x, 0)) scaleY(0.7) scaleX(1.06); }
100% { transform: translateX(var(--nav-indicator-x, 0)) scaleY(1) scaleX(1); }
}
.stl-header__nav-indicator.is-bouncing {
/* Spring curve — peak occurs near 35%, settles in two damped
* half-cycles. The animation overrides the inline transform for
* its duration; the CSS variable carries the translateX position
* so the bounce composes cleanly with the current slide offset. */
animation: stl-nav-indicator-bounce 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
transform-origin: center bottom;
}
@media (prefers-reduced-motion: reduce) {
.stl-header__nav-indicator.is-bouncing { animation: none; }
}
.stl-header__actions { display: flex; gap: var(--s-2); align-items: center; }
/* New Test header CTA — feature-styled action button anchored on the
* right side of the navbar. Inherits the primary-button gradient/glow
* (already themed by --stl-accent) but at a compact header scale so it
* doesn't dominate the chrome. The leading + icon visually distinguishes
* it from the text-only nav tabs on the left. */
.stl-header__cta {
display: inline-flex;
align-items: center;
gap: 8px;
/* Symmetric horizontal padding — the visual lopsidedness at smaller
* paddings comes from the icon being narrower than the trailing
* text. 16px each side + 8px gap reads balanced even with the
* narrower icon on the left. Slightly compact vertical padding to
* keep the button at navbar scale. */
padding: 8px 16px;
font-size: 13px;
min-height: 0; /* override mobile .stl-btn min-height */
letter-spacing: -0.005em;
white-space: nowrap; /* "New test" must not fold — see nav-link */
}
.stl-header__cta svg { flex-shrink: 0; display: block; }
@media (max-width: 560px) {
/* On phones the splash screen owns the entry point, so this button
* just adds chrome — keep it visible but tighten its footprint so
* it doesn't fight the auth pill for space. */
.stl-header__cta { padding: 9px 14px; min-height: 0; }
}
/* Header math-color toggle. Two states:
* aria-pressed="true" → highlighting ON (default). Dot fills with
* accent color and the label sits in the canvas text color.
* aria-pressed="false" → highlighting OFF. Dot is hollow + muted,
* the label drops to text-subtle so the whole control reads
* visually inactive without changing layout.
* The label is hidden on phones to save header room — the dot still
* reads as a toggle indicator and the aria-label keeps it accessible. */
.stl-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
}
.stl-toggle__dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1.5px solid currentColor;
background: transparent;
transition: background var(--dur-base) ease,
border-color var(--dur-base) ease,
box-shadow var(--dur-base) ease;
flex-shrink: 0;
}
.stl-toggle[aria-pressed="true"] .stl-toggle__dot {
background: var(--stl-accent);
border-color: var(--stl-accent);
box-shadow: 0 0 6px var(--stl-accent-line);
}
.stl-toggle[aria-pressed="false"] {
color: var(--stl-text-subtle);
}
@media (max-width: 640px) {
.stl-toggle__lbl { display: none; }
.stl-toggle { padding: 6px; }
}
/* Live elapsed-time pill — sits next to the Restart button in the
* sticky header, visible only while a test is in progress. Mono font
* with tabular numerals so the digits don't shift width on tick.
* The leading dot pulses subtly to telegraph "this is live, not a
* static label." */
.stl-header__timer {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: var(--stl-surface-2);
border: 1px solid var(--stl-hairline);
font-family: var(--stl-font-mono);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--stl-text-muted);
font-variant-numeric: tabular-nums;
}
.stl-header__timer[hidden] { display: none; }
.stl-header__timer::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--stl-accent);
box-shadow: 0 0 8px var(--stl-accent);
animation: stl-timer-pulse 2s ease-in-out infinite;
}
@keyframes stl-timer-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
@media (max-width: 560px) {
.stl-header__timer { font-size: 12px; padding: 4px 10px; }
/* On narrow phones the brand subtitle ("aidroplets") already hides;
* keep the timer visible because it's the most useful header item
* during a test. */
}
@media (prefers-reduced-motion: reduce) {
.stl-header__timer::before { animation: none; opacity: 0.85; }
}
/* ── Brand mark (studysignal wordmark + traffic-light dots) ──
Replaces the legacy .stl-logo dot-pill. SVG ships inline in index.html;
text uses currentColor so it inherits via .stl-brand color. */
.stl-brand {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--stl-text);
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-base) var(--ease-out);
}
.stl-brand:hover { color: var(--stl-text); }
.stl-brand:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 4px;
border-radius: 4px;
}
.stl-brand__svg {
display: block;
height: 28px;
width: auto;
color: var(--stl-text);
}
.stl-brand__svg--lg { height: 40px; }
/* --- main / screens --------------------------------------------------- */
.stl-main {
max-width: var(--shell-read);
/* width:100% is load-bearing, not belt-and-braces. main is a flex item
* of the body column now, and a flex item with auto side margins does
* NOT stretch to the cross axis — the auto margins win and it
* shrink-wraps its content instead. That made the shell width follow
* whatever happened to be on screen: the teacher shell measured 1000px
* on the dashboard but 401px on the Manage tabs and 743px on the
* worksheet builder, so the H1 and the whole column slid sideways on
* every navigation (Josh 2026-08-11: "the width is jumping around for
* each of the teacher pages"). Asking for the full width explicitly
* restores the pre-flex behavior; max-width still caps it and the auto
* margins still center it. */
width: 100%;
margin: 0 auto;
/* Bottom padding takes the larger of the design value or the iOS
* home-indicator safe area, so the last row of buttons never sits
* under the indicator on a notched phone. Side padding takes the
* larger of the design value or the landscape safe-area insets. */
padding-top: clamp(var(--s-6), 5vw, var(--s-8));
padding-right: max(clamp(var(--s-4), 4vw, var(--s-7)), env(safe-area-inset-right));
/* Was clamp(--s-7, 6vw, 64px). Together with the footer's own 40px
* top margin that left a ~104px void between the last control and
* the legal line, and pushed short pages over the fold (Josh
* 2026-08-12). Half the padding, same breathing room. */
padding-bottom: max(clamp(var(--s-5), 3vw, 36px), env(safe-area-inset-bottom));
padding-left: max(clamp(var(--s-4), 4vw, var(--s-7)), env(safe-area-inset-left));
display: grid;
/* Take the slack in body's column so main fills whatever is left
* between the header and the footer. Grow but never shrink: content
* taller than the viewport still pushes the footer down normally. */
flex: 1 0 auto;
transition: max-width var(--dur-base) var(--ease-out);
}
/* Admin is a database view — it benefits from horizontal real estate
* the way reading-focused screens (quiz, results, review) don't. We
* widen .stl-main only when the admin screen is mounted, leaving the
* rest of the app at its tighter reading column. */
.stl-main:has([data-screen="admin"]:not([hidden])) {
max-width: min(var(--shell-data), calc(100vw - 32px));
}
/* ONE canonical width for the ENTIRE teacher shell (Josh 2026-07-26):
* previously main was 760px for most teacher panels but jumped to
* 1280px when the worksheets panel mounted (and the shell capped
* itself at 880), so the H1 shifted sideways on every tab change and
* again when empty states loaded in. Now the teacher screen always
* gets the same main width — no panel-dependent :has() — and this
* declaration is the single number that governs title, subhead, and
* every panel in both empty and populated states. .stl-teacher itself
* carries no max-width (2026-08-06); see the note on that rule. */
.stl-main:has([data-screen="teacher"]:not([hidden])) {
max-width: min(var(--shell-work), calc(100vw - 32px));
}
/* min-width: 0 is the phone-width firewall (Josh 2026-08-25, Android:
* "some things didn't fit nicely"). .stl-main is a grid, so every
* screen is a grid item, and a grid item's default min-width:auto means
* ONE unbreakable descendant widens the entire page. That is exactly
* what happened: a 405px-wide step-viz row inside the how screen forced
* every section to 455px at a 360px viewport — content pinned wider
* than the phone, uniformly, on every block. With min-width:0 the
* screen honors the shell width and an oversized element overflows its
* OWN box, where it is visible and locally fixable, instead of silently
* widening all of them. */
.stl-screen { display: grid; gap: var(--s-6); min-width: 0; }
/* Rows must NOT absorb the screen's leftover height. main is body's
* flex-grow child, so it fills the viewport; its grid row stretches the
* screen, the screen's row stretches the card, and — because most cards
* ARE grids (.stl-results, .stl-score, .stl-history, .stl-learn) — the
* slack gets dealt out to their auto rows and every child inflates.
* That is the whole family of "why is this button HUGE on refresh"
* bugs: it bites hardest on first paint, when a data row is still
* hidden and the buttons are the only rows left to absorb the height
* (Josh 2026-08-11, Analysis then Results). Packing rows to the top
* makes each one its natural height and leaves the slack at the bottom
* of the screen where it belongs. --auth is excluded: it centers its
* card in the viewport on purpose via place-items. */
.stl-screen:not(.stl-screen--auth) { align-content: start; }
.stl-screen[hidden] { display: none; }
/* --- shared card ------------------------------------------------------ */
.stl-card {
background: var(--stl-surface);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
padding: clamp(var(--s-5), 3vw, var(--s-7));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.stl-card--hero {
/* the only "lift" surface in the app */
background:
linear-gradient(165deg, rgba(148, 163, 184, 0.06) 0%, rgba(255, 255, 255, 0.02) 50%, transparent 80%),
var(--stl-surface);
border-color: var(--stl-hairline-hi);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 1px 0 rgba(0, 0, 0, 0.35),
0 18px 50px -12px rgba(0, 0, 0, 0.45);
}
/* Light-mode override — the dark hairline (rgba(0,0,0,0.35)) reads as
* a harsh underline on white. Soften the bottom edge: a near-invisible
* 1px shadow + a much lighter, more diffused drop shadow that's tuned
* for the white canvas. The inset highlight gets bumped because pure
* white needs more separation against the card surface. */
:root[data-theme="light"] .stl-card--hero {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.6),
0 1px 2px rgba(0, 0, 0, 0.04),
0 12px 32px -16px rgba(15, 23, 42, 0.12);
}
/* --- score screen ----------------------------------------------------- */
.stl-score { display: grid; gap: var(--gap-section); }
.stl-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--stl-font-mono);
font-size: 11px;
/* One authority for the letterspaced-subtitle format (Josh
* 2026-08-11: some were caps, some weren't). Uppercase lives HERE,
* not in the copy, so source strings stay sentence case and every
* eyebrow — "All-time topic mastery", "Strengths", "Weaknesses",
* "Explanation" — renders identically. Tracking is 0.12em because
* caps need more air than the old 0.04em gave them. Don't re-declare
* letter-spacing or text-transform on individual eyebrows. */
text-transform: uppercase;
letter-spacing: 0.12em;
/* Weight lives here too. Two eyebrows are
(the Results and
* Analysis radar titles) and were inheriting the user-agent's bold
* while every
-based eyebrow sat at the body's 400 — same class,
* two weights, depending on which element it happened to land on
* (Josh 2026-08-11). Pinning it means the tag never leaks through.
* Everything in this block is the format: font, size, weight,
* tracking, case. Scoped overrides may re-declare COLOR only. */
font-weight: 400;
color: var(--stl-text-subtle);
margin: 0;
}
.stl-eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
/* Per-instance overrides via --eyebrow-dot-bg and --eyebrow-dot-glow
* let a specific eyebrow track a different signal than the page's
* global accent (e.g. the AI Analysis radar title tracks the
* filter chip, not the active test). Defaults preserve the
* original "accent-tinted" look. */
background: var(--eyebrow-dot-bg, var(--stl-accent));
/* Glow tracks the current accent — purple by default, white on the
* picker (no test selected), or the test's color on score/quiz.
* Transition both background and shadow so the recolor on test
* change reads as a smooth fade rather than a snap. */
box-shadow: 0 0 8px var(--eyebrow-dot-glow, rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.55));
transition: background var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
/* When --eyebrow-dot-bg is set to the brand rainbow gradient, KEEP
* the dot a clean 6×6 circle (matching every other eyebrow dot in
* the app). The earlier pill experiment looked broken next to the
* solid round dots on other filter chips. */
.stl-eyebrow--rainbow-dot::before {
width: 6px;
height: 6px;
border-radius: 50%;
}
.stl-h1 {
margin: 0;
font-family: var(--stl-font-display);
font-size: clamp(1.9rem, 4.5vw, 2.75rem);
letter-spacing: -0.025em; /* Space Grotesk wants slightly less tight tracking than Geist */
font-weight: 600;
line-height: 1.05;
color: var(--stl-text);
max-width: var(--measure-title);
}
/* Inline empty-state for the score screen — shown when the
* currently-selected test has no live questions yet. Replaces the
* score input form with a friendly message + a "Pick a different
* test" link (when other tests are Active). Padding + gap match
* the surrounding card chrome so it doesn't feel orphaned. */
.stl-score__empty {
display: grid;
gap: var(--s-3);
padding: var(--s-4) 0;
}
.stl-score__empty[hidden] { display: none; }
/* Inline back link — used at the top of the score screen card to
* route back to the picker when 2+ tests are Active. Subtle by
* design (just text + a chevron) so it doesn't compete with the
* primary headline. Picks up accent color on hover. */
.stl-back-link {
appearance: none; -webkit-appearance: none;
background: transparent; border: 0; padding: 0;
font: inherit; color: var(--stl-text-muted);
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px;
font-weight: 500;
margin-bottom: var(--s-2);
margin-left: -2px;
border-radius: var(--r-sm);
transition: color var(--dur-base) ease;
}
.stl-back-link:hover {
color: var(--stl-accent);
}
.stl-back-link:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 4px;
}
.stl-back-link svg {
flex-shrink: 0;
transition: transform var(--dur-fast) var(--ease-spring);
}
.stl-back-link:hover svg {
transform: translateX(-2px);
}
/* Gradient text for the test-name token in the score-screen headline.
* Lavender → blue diagonal sweep matching the rest of the v2 palette.
* Uses background-clip: text (well-supported in modern browsers,
* gracefully degrades to flat accent color via the fallback rule). */
.stl-grad-text {
color: var(--stl-accent); /* fallback */
background: linear-gradient(120deg, var(--stl-accent) 0%, var(--stl-accent-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700; /* a notch heavier so the test name pops */
letter-spacing: -0.025em;
}
/* ============== TEST PICKER GRID ==============
* Shown when 2+ tests are Active. Each tile is a click-to-start
* shortcut — the wordmark dominates the visual hierarchy, with the
* test name + tagline below. Hover lifts the tile and tints the
* border with the test's --tile-tint var (set inline per tile). */
.stl-picker {
/* Same visual chrome as .stl-score so the picker feels like a
* sibling entry-step, not a separate UI mode. */
display: grid;
gap: var(--s-4);
}
.stl-picker__grid {
display: grid;
/* Wider min so the side-by-side icon + text layout doesn't get
* cramped at narrower viewports. */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-4);
margin-top: var(--s-3);
}
.stl-picker__tile {
appearance: none; -webkit-appearance: none;
font: inherit; color: inherit; text-align: left;
cursor: pointer;
/* Side-by-side layout: icon on the left at its natural size,
* meta (name + tagline) fills the rest. align-items:center
* vertically aligns the icon's midpoint with the text block. */
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: var(--s-4);
padding: var(--s-4);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
background: var(--stl-surface);
position: relative;
overflow: hidden;
transition:
transform var(--dur-fast) var(--ease-spring),
border-color var(--dur-base) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-spring);
}
.stl-picker__tile::before {
/* Soft tinted glow per test — uses the inline --tile-tint
* (e.g., "139, 134, 255" for SAT, "74, 222, 128" for ISEE). */
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.10), transparent 60%);
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-spring);
}
.stl-picker__tile:hover {
transform: translateY(-2px);
border-color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.55);
box-shadow: 0 12px 28px -14px rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.45);
}
.stl-picker__tile:active { transform: translateY(0); }
.stl-picker__tile:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 3px;
}
.stl-picker__mark {
position: relative;
/* Side-by-side layout in the tile — icon at 64px reads as the
* dominant element next to the acronym + tagline without
* crowding the text. */
display: flex;
align-items: center;
--stl-mark-icon-size: 64px;
}
.stl-picker__tile {
/* Color cascade: each tile applies its own tint via color, which
* the inner currentColor SVG fills inherit. */
color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 1);
}
/* Shared wordmark layout used by the picker tile and the admin
* Tests panel rows. Icon stacks above the acronym in both contexts. */
.stl-test-mark {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
line-height: 1;
}
.stl-test-mark__icon {
display: inline-flex;
width: var(--stl-mark-icon-size, 32px);
height: var(--stl-mark-icon-size, 32px);
/* Color is inherited from the parent (the picker tile or Tests
* row), which sets it to the test's tint. The SVGs use
* fill="currentColor" so they pick up that color. */
color: inherit;
}
.stl-test-mark__icon svg {
width: 100%;
height: 100%;
display: block;
}
.stl-picker__meta {
position: relative;
display: grid;
gap: 4px;
}
.stl-picker__name {
/* The only place the test acronym appears on the tile (the
* wordmark dropped its inline acronym to avoid duplication).
* Tinted to match the tile's --tile-tint so it visually pairs
* with the icon. Uses the display font for heading-tier weight. */
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
font-family: var(--stl-font-display);
color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 1);
}
.stl-picker__tagline {
font-size: 0.875rem;
color: var(--stl-text-muted);
}
@media (max-width: 640px) {
.stl-picker__grid { grid-template-columns: 1fr; }
.stl-picker__tile { padding: var(--s-4); }
}
.stl-sub {
margin: 0;
color: var(--stl-text-muted);
font-size: 1rem;
line-height: 1.6;
max-width: var(--measure-lede);
}
.stl-score__form { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.stl-field { display: grid; gap: var(--s-2); }
.stl-label {
font-family: var(--stl-font-mono);
font-size: 11px;
font-weight: 400; /* pin it — otherwise .stl-label on an
inherits the UA bold while on a it
reads 400, which looked inconsistent. */
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--stl-text-subtle);
}
.stl-input {
width: 100%;
padding: 14px 16px;
font-size: 1.25rem;
font-weight: 500;
font-family: inherit;
color: var(--stl-text);
background: var(--stl-bg);
border: 1px solid var(--stl-hairline-hi);
border-radius: var(--r-md);
outline: none;
transition: border-color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.stl-input:hover { border-color: var(--stl-hairline-hover); }
.stl-input:focus-visible,
.stl-input:focus {
border-color: var(--stl-accent);
background: var(--stl-bg-2);
box-shadow: 0 0 0 4px var(--stl-accent-soft);
}
.stl-hint {
font-size: 13px;
color: var(--stl-text-subtle);
/* Zero the browser's default
margins so a hint paragraph
* doesn't add ~16px of space above + below itself. The CSS grid
* `gap` on the parent section handles the rhythm; native margins
* just pile on extra padding inside subcards. */
margin: 0;
}
.stl-hint.is-error { color: var(--stl-red); }
/* Tier shortcut buttons — clicking one fills the score input with
* that tier's top-of-range score and applies the active treatment.
*
* Desktop: a 4-up grid of card-shaped tiles, similar visual weight
* to the test-type picker tiles. Each tile has the tier name as the
* dominant text + the score range as a quiet subtitle below.
*
* Mobile: collapses to a horizontal pill row (existing behavior).
* Reuses the same DOM, just restacks via CSS. The .__range span
* stays visible but inlines next to .__name in the pill. */
.stl-score__tiers {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-2);
}
/* Length picker: lay ALL options (incl. Custom) on a single equal-width
row regardless of how many there are, instead of wrapping after 4.
Desktop only — the mobile rule below keeps the 2-up wrap. */
@media (min-width: 641px) {
#score-length {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
/* Difficulty: Tailored sits IN the row with the four tiers rather than on
* its own full-width line below (Joshua 2026-08-17).
*
* Scoped to #score-tiers and to desktop on purpose. The mobile layout
* (@media max-width 640) is a flex wrap where Tailored takes `flex: 1 0
* 100%` to hold its own line, and at phone width five tiles across would
* be unreadable — leaving that block alone is the whole reason this is a
* min-width block instead of a specificity fight. The teacher composer
* (#composer-tiers) renders its own tiers and is untouched.
*
* Measured before shipping, at the real --shell-read 760px: five equal
* columns give 133px tiles, one row, "Auto adjusted" needs 78.2px of the
* 99px available — 20.8px of slack. (The first measurement of that used
* scrollWidth, which on a block element equals its content box whenever
* the text fits and so reported zero slack; a Range around the text node
* gives the real number.)
*
* The original full-width treatment existed so Tailored could not "read as
* a fifth difficulty". That still holds here without the extra row,
* because it is the only tile with no colour tint and no numeric range,
* and the only one carrying the signal dots. A hairline separator was
* tried and dropped: invisible at this size, and complexity for nothing.
*/
#score-tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#score-tiers .stl-tier--tailored { grid-column: auto; }
/* 9.5px/0.1em fitted the old full-width tile; in a fifth of the row it
* wants the slack back. */
#score-tiers .stl-tier--tailored .stl-tier__range {
font-size: 9px;
letter-spacing: 0.05em;
}
}
/* "Only this difficulty" switch row — sits between the tier pills
* and the score input. Two-line layout: switch + label on top, one-
* line hint below explaining the current state. The switch reuses
* .stl-switch from the admin Tests panel for visual consistency. */
.stl-score__mix {
display: grid;
gap: 4px;
padding: var(--s-2) 0;
}
.stl-score__mix-switch {
/* Override the admin context's tile tint — the score-screen mix
* switch uses the canvas accent so it harmonizes with the gradient
* test name + the primary submit button. */
--tile-tint: 74, 222, 128;
align-self: start;
padding-left: 0;
}
.stl-score__mix-hint {
margin: 0;
/* Keep the hint inline with the switch's left edge for a clean
* vertical line — no extra indentation since the switch label
* already starts flush at the left. */
}
/* ---- Score screen sectioning -------------------------------------
* The score form is split into two visually-grouped sections:
* 1. Subjects — pick what to study (the "what")
* 2. Difficulty — pick how hard it should be (the "how hard"),
* bundling tier pills + the include-lower toggle +
* the target-score input under one heading
* Each section renders as a labeled block with a consistent header
* row so they read as parallel decisions, not stacked controls. */
.stl-score__section {
/* Each section reads as its own bordered subcard inside the main
* score card. Visual hierarchy: outer card = the screen, inner
* cards = the two grouped decisions (Subjects + Difficulty).
* Toggle + target-score live INSIDE the Difficulty card so they
* visually belong to it. */
display: grid;
gap: var(--s-3);
padding: var(--s-4) var(--s-4);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-md);
background: var(--stl-surface);
}
.stl-score__section[hidden] { display: none; }
.stl-score__section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
}
/* Within the difficulty section, the tier pills, mix toggle, and
* target-score input read tighter together than the cross-section
* gap. The mix toggle gets a top border so it visually anchors as
* a sub-section of Difficulty (not a third floating control). */
.stl-score__difficulty .stl-score__mix {
padding: var(--s-3) 0 0; /* zero the inherited 8px bottom — the section's own padding handles it */
border-top: 1px solid var(--stl-hairline);
}
.stl-score__difficulty .stl-score__mix + .stl-score__target,
.stl-score__difficulty .stl-score__tiers + .stl-score__target {
padding-top: var(--s-3);
border-top: 1px solid var(--stl-hairline);
}
.stl-score__target { display: grid; gap: var(--s-2); }
/* ---- Subject picker on the score screen ---------------------------
* A pill row that lets the user enable/disable each subject the test
* covers (e.g. ACT: English, Math, Reading, Science). Pills carry an
* icon + label and use aria-pressed (toggle), not aria-selected
* (single choice), since multiple can be on at once. */
/* Selectors chain .stl-link. for specificity (0,2,0) so they
* beat .stl-link (0,1,0). Without the chain, .stl-link's `font: inherit`
* shorthand wins source order and the link renders at the inherited
* body 15px regular Geist instead of the 11px mono medium we want. */
.stl-link.stl-score__subjects-toggle,
.stl-link.stl-score__custom-toggle,
.stl-score__subjects-toggle,
.stl-score__custom-toggle {
font-size: 11px;
font-family: var(--stl-font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
color: var(--stl-text-subtle);
}
.stl-link.stl-score__subjects-toggle:hover,
.stl-link.stl-score__custom-toggle:hover {
color: var(--stl-accent);
}
/* Target-score "Set custom score" reveal — sits in the difficulty
* section header next to the label. Hidden by default, toggleable.
* The wrapper [hidden] rule is needed because the field grid CSS
* (display: grid) wins over the user-agent [hidden] selector. */
.stl-score__target[hidden] { display: none; }
/* Back-to-picker link below the Start CTA — centered, muted,
* reads as a tertiary action under the primary one. Tightened:
* smaller font, no extra padding, gap pulled in so the chevron
* sits flush against the label. */
.stl-score__back-foot {
justify-self: center;
margin: 0 auto;
padding: 0;
gap: 4px;
font-size: 11.5px;
font-weight: 500;
color: var(--stl-text-subtle);
line-height: 1.2;
}
.stl-score__back-foot svg { width: 12px; height: 12px; }
.stl-score__back-foot:hover { color: var(--stl-text); }
/* ── Paired action row (Josh 2026-08-07, back-button standardization) ──
* Back stops being an 11.5px footer link tucked under the CTA and
* becomes a real button sitting BESIDE the primary action, equal width.
*
* The chosen treatment is "equal · ghost back": equal footprint,
* unequal fill. Hierarchy lives in the background, not the geometry —
* so back reads as a legitimate choice rather than an escape hatch,
* while the rainbow CTA still obviously owns the screen. Sizing is
* pinned to .stl-radar__cta.stl-btn--pill-rainbow (13px/14px/pill) so
* the two halves are the same height without a magic number.
*
* THE RULE, and it is the whole design:
* exactly ONE primary action on the screen → .stl-actionpair (2-up)
* zero, or two or more primary actions → .stl-actionpair--solo
* (full width, LAST element
* of the action block)
* The solo form exists so back is never paired with a destructive
* sibling — on `regen` the 2-up form would sit "Back to results" next
* to "Start over with a new score" at identical weight. Position stays
* constant either way (end of the action block), which is what keeps
* the control learnable across screens.
*
* Destination is never written in the markup: [data-back] carries no
* target, and applyBackLabels() in app.js resolves it through
* SCREEN_PARENT + SCREEN_TITLE at render time. One label formula,
* one routing table. */
.stl-actionpair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
align-items: stretch;
margin-top: var(--s-5);
}
.stl-actionpair--solo { grid-template-columns: 1fr; }
/* --stack: one column, both halves full width, primary on top (Joshua
* 2026-08-16, score screen). Distinct from --solo, which is one FULL-WIDTH
* control; this is two stacked. The score screen earns the exception
* because Start is the entire purpose of the screen and the 2-up form gave
* Back an equal footprint next to it. Order comes from the DOM (Start is
* written first) rather than `order:`, so reading, tab and visual order
* cannot drift apart. */
.stl-actionpair--stack { grid-template-columns: 1fr; }
/* A pair whose second half is conditionally hidden collapses to one
* column rather than leaving back marooned at 50% beside a gap. Results
* is the case: writeStats hides "Run the Signal" once there is nothing
* left to drill, and back has to survive that on its own. */
.stl-actionpair:has(> [hidden]) { grid-template-columns: 1fr; }
/* Children own the cell, not their own width/margin — the grid is the
* single spacing authority. .stl-radar__cta carries width:100% plus a
* margin-top for the un-paired layout; both have to go here.
* The .stl-radar__cta selector is doubled up because `.stl-assess
* .stl-radar__cta` (0,2,0) sets its own margin-top ~10k lines below
* this rule, and at equal specificity the later rule wins — that margin
* pushed the grid row 20px taller than the CTA, so the stretched back
* button rendered 67px against the CTA's 47px. */
.stl-actionpair > .stl-btn { width: 100%; margin-top: 0; }
.stl-actionpair > .stl-btn.stl-radar__cta { margin-top: 0; }
/* Doubled class (0,2,0) on purpose: the `.stl-btn` base block lives at
* ~line 4370, well after this one, so a single `.stl-btn--back` (0,1,0)
* loses every shared property to it on source order — padding and
* font-size silently fell back to the base 9px/13.5px and the pair
* stopped matching the CTA's box. */
.stl-btn.stl-btn--back {
background: var(--stl-surface-2);
border: 1px solid var(--stl-hairline);
color: var(--stl-text-muted);
font-weight: 500;
/* Match the hero CTA's box exactly (see .stl-radar__cta.stl-btn--pill-rainbow). */
padding: 13px 18px;
font-size: 14px;
border-radius: var(--r-pill);
gap: 6px;
min-width: 0;
box-shadow: none;
}
.stl-btn.stl-btn--back:hover {
color: var(--stl-text);
border-color: var(--stl-accent-line);
background: var(--stl-accent-soft);
transform: none;
}
.stl-btn.stl-btn--back svg {
flex: none;
width: 15px; height: 15px;
transition: transform var(--dur-fast) var(--ease-spring);
}
.stl-btn.stl-btn--back:hover svg { transform: translateX(-2px); }
/* The label is written by JS and varies with the resolved parent, so
* it has to survive a narrow cell without wrapping the button taller
* than its rainbow twin. */
.stl-btn.stl-btn--back .stl-btn__lbl {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Compact variant — the signal screen's flow header, where the exit has
* to sit beside a progress readout rather than in an action row. */
.stl-btn.stl-btn--back-sm {
padding: 7px 13px;
font-size: 12.5px;
}
.stl-btn.stl-btn--back-sm svg { width: 13px; height: 13px; }
/* The second sanctioned form: the CRUMB. Used only for stepping UP a
* sub-view inside a screen (learn: practice → lesson → index), where a
* top-left crumb is the honest affordance and an action-row button
* would read as "leave this screen". Screen-level back always takes the
* action-row form above. Two forms, one rule — down from six positions
* and six weights before this. */
.stl-backcrumb {
appearance: none; -webkit-appearance: none;
background: transparent; border: 0; padding: 0;
font: inherit; font-size: 13px; font-weight: 500;
color: var(--stl-text-muted);
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
justify-self: start;
margin-bottom: var(--s-4);
border-radius: var(--r-sm);
transition: color var(--dur-base) ease;
}
.stl-backcrumb svg {
width: 14px; height: 14px; flex: none;
transition: transform var(--dur-fast) var(--ease-spring);
}
.stl-backcrumb:hover { color: var(--stl-text); }
.stl-backcrumb:hover svg { transform: translateX(-2px); }
.stl-backcrumb:focus-visible { outline: 2px solid var(--stl-accent); outline-offset: 4px; }
.stl-backcrumb[hidden] { display: none; }
@media (max-width: 640px) {
.stl-btn.stl-btn--back { padding: 13px 12px; font-size: 13px; }
.stl-actionpair { gap: 6px; }
}
.stl-score__subjects-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.stl-subject-pill {
appearance: none; -webkit-appearance: none;
font: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 11px;
border-radius: var(--r-pill);
border: 1px solid var(--stl-hairline);
background: var(--stl-surface);
color: var(--stl-text-subtle);
font-size: 13px;
font-weight: 500;
transition: border-color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.stl-subject-pill:hover {
border-color: var(--stl-accent-line);
color: var(--stl-text);
}
.stl-subject-pill__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
color: inherit;
transition: color var(--dur-base) var(--ease-out);
}
.stl-subject-pill__icon svg { width: 100%; height: 100%; display: block; }
.stl-subject-pill[aria-pressed="true"] {
border-color: var(--stl-accent);
background: var(--stl-accent-soft);
color: var(--stl-text);
}
.stl-subject-pill[aria-pressed="true"] .stl-subject-pill__icon {
color: var(--stl-accent);
filter: drop-shadow(0 0 4px rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.45));
}
.stl-subject-pill:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
.stl-tier {
/* native button reset */
appearance: none;
-webkit-appearance: none;
font: inherit;
cursor: pointer;
text-align: left;
/* tile chrome */
display: grid;
gap: 4px;
padding: 14px 16px;
border-radius: var(--r-md);
border: 1px solid var(--stl-hairline);
background: var(--stl-surface);
color: var(--stl-text-muted);
position: relative;
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-spring),
background var(--dur-base) var(--ease-spring),
color var(--dur-base) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-spring),
transform var(--dur-fast) var(--ease-spring);
}
.stl-tier__name {
font-family: var(--stl-font-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--stl-text);
}
.stl-tier__range {
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--stl-text-subtle);
}
/* Composer difficulty tiers carry no range subtitle (the teacher just
* toggles tiers), so center the single label instead of top-left-
* aligning it like the score screen's two-line pills. The composer
* form column is narrow (teacher shell is 880px max, split 1.4:1),
* so a 4-up row squeezed tiles narrower than their labels and
* clipped "Medium"/"Insane" off-center — lay them 2×2 instead. */
#composer-tiers {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#composer-tiers .stl-tier {
align-content: center;
justify-items: center;
text-align: center;
min-height: 56px;
padding: 12px 10px;
}
/* Mobile: the generic ≤640px rule below turns .stl-tier into a tiny
* inline pill (baseline-aligned, 6px padding) which, combined with the
* 56px min-height above, rendered the composer tiers as squished ovals
* with the label overflowing the button. Keep the composer tiers as a
* clean 2×2 grid of centered tiles instead. */
@media (max-width: 640px) {
#composer-tiers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
#composer-tiers .stl-tier {
display: grid;
gap: 2px;
min-height: 48px;
padding: 10px 12px;
border-radius: var(--r-md);
background: var(--stl-surface);
}
#composer-tiers .stl-tier__name { font-size: 14px; font-family: var(--stl-font-display); font-weight: 600; }
#composer-tiers .stl-tier__range { font-size: 10.5px; }
}
.stl-tier:hover {
transform: translateY(-1px);
border-color: var(--stl-accent-line);
background: var(--stl-surface-2);
box-shadow: 0 6px 16px -10px rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.4);
}
.stl-tier:active { transform: translateY(0); }
.stl-tier:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
@media (hover: none) {
.stl-tier:hover { transform: none; box-shadow: none; }
}
/* Active = the tier the current score sits in. Lavender border +
* subtle accent fill so the user can see at a glance which band
* their target lands in. */
.stl-tier.is-active {
border-color: var(--stl-accent);
background: var(--stl-accent-soft);
}
.stl-tier.is-active .stl-tier__name { color: var(--stl-text); }
.stl-tier.is-active:hover {
border-color: var(--stl-accent);
background: var(--stl-accent-soft);
}
/* NOTE ON POSITION: this block lives HERE, after the generic .stl-tier
* rules, and not up with the other score-screen layout. It was written
* there first and lost every property it shares with `.stl-tier` and
* `.stl-tier.is-active` on source order at equal specificity — the
* selected tile came out wearing the theme accent (green) instead of the
* neutral it asks for. Same trap as the two `.stl-btn--back` and
* `.stl-radar__cta` notes elsewhere in this file. Moving it down fixes
* desktop; the mobile score-screen override needs its own rule because
* `[data-screen="score"] .stl-tier.is-active` outranks it on specificity.
*/
/* ---- Tailored: "auto adjusted" difficulty (Joshua 2026-08-16) --------
* Spans the full row UNDER the four buckets rather than sitting in them
* as a fifth column. That is the whole layout argument: Tailored is not
* a peer of Easy/Medium/Hard/Insane, it is an alternative to choosing at
* all, and a fifth equal column would have said otherwise (as well as
* squeezing four legible tiles into five cramped ones).
*
* It wears NO tier colour. Easy/Medium/Hard/Insane own green/yellow/red/
* accent, and borrowing any of them would imply a fixed difficulty for a
* control whose entire point is that it moves. The signal trio carries
* the meaning instead: it spans the range. */
.stl-tier--tailored {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
gap: var(--s-2);
text-align: left;
}
.stl-tier--tailored .stl-tier__range {
/* The subtext sits beside the name, not under it, so the full-width
* tile stays one line tall instead of towering over the four above. */
margin: 0;
font-family: var(--stl-font-mono);
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ACTIVE: the rainbow gradient treatment (Joshua 2026-08-17).
*
* Same device as the first-timer lead card and the hero CTA — a border-box
* gradient border over a padding-box fill, plus a masked --stl-rainbow-soft
* wash inside. Under the signal theme --stl-rainbow IS the red→yellow→green
* ramp, which is why it is the right treatment for this tile specifically:
* Tailored spans the whole range, so it wears the whole range.
*
* It replaces the signal dots, which said the same thing in three 9px
* circles and were the widest element in a 133px tile once Tailored moved
* into the row.
*
* WHAT THE OLD COMMENT HERE WARNED ABOUT, and why the gradient is not the
* same mistake: the first version of this active state used --stl-accent,
* which under the signal theme paints GREEN — so a selected Tailored tile
* sat beside a green "Easy" pill wearing the same green and read as a
* difficulty. The rainbow cannot be confused for a tier because no tier
* wears more than one hue. That was always the argument for the dots; it
* transfers intact.
*
* Border width stays 1px, matching the inactive state, so selecting the
* tile does not reflow the row. (1.5px, as the lead card uses, shifted
* every tile beside it by half a pixel and the whole row jittered on
* toggle.) */
/* The padding-box fill MUST be opaque. The first version used
* --stl-surface-2, which is rgba(255,255,255,0.055) — so the
* full-saturation border-box rainbow underneath showed straight through and
* painted the entire tile at near-full chroma, drowning "Auto adjusted". Both
* existing users of this device (.stl-assess-entry--lead, .stl-btn--pill-
* rainbow) use an opaque colour, and that is why. --stl-bg is theme-aware, so
* this stays correct in light mode where a hardcoded hex would not. */
.stl-tier--tailored.is-active {
border-color: transparent;
background:
linear-gradient(var(--stl-bg), var(--stl-bg)) padding-box,
var(--stl-rainbow) border-box;
}
.stl-tier--tailored.is-active::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--stl-rainbow-soft);
/* Fades out across the tile so the label side stays legible rather than
* sitting on full chroma — same mask as .stl-assess-entry--lead::before. */
-webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.62) 55%, transparent 100%);
mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.62) 55%, transparent 100%);
pointer-events: none;
}
.stl-tier--tailored.is-active .stl-tier__name { color: var(--stl-text); }
.stl-tier--tailored.is-active .stl-tier__range { color: var(--stl-text-muted); }
/* The name and range sit above the wash. The base tile is a grid with no
* z-index anywhere, so without this the ::before paints over them. */
.stl-tier--tailored.is-active .stl-tier__name,
.stl-tier--tailored.is-active .stl-tier__range { position: relative; }
/* Disabled tier — no live questions for this test/subject yet. Reads as
inert (greyed, no hover lift, not-allowed cursor) so the empty tier
(e.g. SAT-math Insane) is visibly unavailable rather than producing an
empty test. */
.stl-tier:disabled,
.stl-tier[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
background: transparent;
}
.stl-tier:disabled:hover,
.stl-tier[aria-disabled="true"]:hover {
transform: none;
box-shadow: none;
border-color: var(--stl-hairline);
}
/* Mobile collapse: row of pills with the tier name + range inline. */
@media (max-width: 640px) {
.stl-score__tiers {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.stl-tier {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 6px 12px;
border-radius: var(--r-pill);
background: transparent;
}
.stl-tier__name { font-size: 12px; font-family: var(--stl-font-body); font-weight: 500; }
.stl-tier__range { font-size: 11px; }
/* The container is flex here, not grid, so `grid-column: 1 / -1` does
* nothing — Tailored needs flex-basis to keep its own row. Without this
* it wraps in beside a bucket pill and reads as a fifth difficulty. */
.stl-tier--tailored {
flex: 1 0 100%;
justify-content: flex-start;
align-items: center;
padding: 8px 12px;
}
.stl-tier--tailored .stl-tier__range { font-size: 9px; }
}
/* --- quiz top bar ----------------------------------------------------- */
.stl-quiz__top { display: grid; gap: var(--s-3); }
.stl-quiz__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
align-items: center;
}
.stl-quiz__counter {
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--stl-text-muted);
}
/* Signal-segmented progress — one tick per question. Ticks start as
* faint track marks, the current question carries an accent underline,
* and each commit paints its tick in the chosen signal color (gray for
* skip). The bar doubles as a live confidence map of the whole test. */
.stl-quiz__progress {
display: flex;
gap: 2px;
height: 3px;
}
.stl-quiz__seg {
flex: 1;
min-width: 1px;
border-radius: 2px;
background: var(--stl-surface-2);
transition: background 240ms var(--ease-out);
}
.stl-quiz__seg.is-current { background: var(--stl-accent-line); }
.stl-quiz__seg.is-green { background: var(--stl-green); }
.stl-quiz__seg.is-yellow { background: var(--stl-yellow); }
.stl-quiz__seg.is-red { background: var(--stl-red); }
.stl-quiz__seg.is-skip { background: var(--stl-hairline-hi); }
/* 60+ question tests (full-length ACT/HSPT): tighter gaps, square ticks. */
.stl-quiz__progress--dense { gap: 1px; }
.stl-quiz__progress--dense .stl-quiz__seg { border-radius: 1px; }
/* Bluebook-style math tools (Desmos calculator, reference sheet later) */
.stl-quiz__tools {
display: inline-flex;
flex-wrap: wrap;
gap: var(--s-2);
margin-left: auto;
}
@media (max-width: 640px) {
.stl-quiz__tools { display: none; }
}
.stl-quiz-tool {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 4px 12px;
border-radius: var(--r-pill);
border: 1px solid var(--stl-hairline);
background: var(--stl-surface);
color: var(--stl-text);
font-family: var(--stl-font-body);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.stl-quiz-tool:hover {
border-color: var(--stl-accent-line);
background: var(--stl-surface-2);
}
.stl-quiz-tool:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
.stl-quiz-tool__icon {
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--stl-accent);
}
.stl-mobile-bar__accessory--tools {
display: inline-flex;
align-items: center;
gap: 8px;
}
@media (min-width: 641px) {
#btn-quiz-calculator-mobile { display: none !important; }
}
/* Desmos calculator panel (dialog) */
.stl-desmos-panel {
/* Non-modal side dock (Mike item 14b): the panel opens pinned to the
* right so the problem stays visible beside it. Draggable by the head
* (JS sets left/top) and resizable from the corner. */
position: fixed;
inset: auto;
right: 16px;
top: 64px;
/* Taller + a touch wider (Mike 2026-07-25, raised again same day):
* when the Desmos on-screen keypad drops down it takes ~280px of
* the instance — at the old 560px height it buried the expression
* list, so you couldn't see the equation you were typing. 780px
* (viewport-capped) keeps the expression rows clearly visible above
* an open keypad in EVERY section: tests, lessons, Run the Signal. */
/* Wider still (Mike 2026-07-26): at 480px Desmos squeezed the graph
* into a thin zoomed strip on the right. ~680px lets the expression
* list and the graph each take roughly half the panel. */
width: min(680px, calc(100vw - 48px));
max-width: none;
height: min(780px, calc(100vh - 96px));
max-height: calc(100vh - 32px);
min-width: 320px;
min-height: 300px;
margin: 0;
padding: 0;
resize: both;
overflow: hidden;
z-index: 90;
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
/* Solid themed surface (Mike bug 2026-07-25): --stl-surface-1 is
* UNDEFINED and resolved to transparent, so the panel chrome (head +
* any gap around the Desmos iframe) showed the page through it — on
* Run the Signal you could read "3 of 10" behind the calculator.
* Same fix the reference sheet already carries. */
background: var(--stl-bg-2);
color: var(--stl-text);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.stl-desmos-panel[open] {
display: flex;
flex-direction: column;
}
/* Only paints if a legacy engine fell back to showModal(). */
.stl-desmos-panel::backdrop {
background: rgba(5, 5, 9, 0.35);
}
.stl-desmos-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--stl-hairline);
cursor: move;
user-select: none;
touch-action: none;
flex: none;
}
.stl-desmos-panel__title {
margin: 0;
font-family: var(--stl-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.stl-desmos-panel__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--stl-hairline);
border-radius: var(--r-pill);
background: transparent;
color: var(--stl-text-muted);
cursor: pointer;
}
.stl-desmos-panel__close:hover { color: var(--stl-text); border-color: var(--stl-hairline-hi); }
.stl-desmos-panel__body {
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
@media (max-width: 640px) {
/* Full-screen sheet on phones — no room for side-by-side there. */
.stl-desmos-panel {
top: 0;
right: 0;
left: 0;
width: 100vw;
max-height: 100vh;
height: 100vh;
min-width: 0;
margin: 0;
border-radius: 0;
resize: none;
}
.stl-desmos-panel__head { cursor: default; }
.stl-desmos-panel__body {
min-height: 280px;
}
}
/* Harden the quiz-tools hide: the author `display:inline-flex` on the
* container and buttons wins over the UA `[hidden]{display:none}` (author
* origin beats UA regardless of specificity), so the hidden attr alone
* wouldn't collapse them on non-math questions. Force it. Covers the
* calculator (existing) and the reference button (FR-1, new). */
.stl-quiz__tools[hidden] { display: none !important; }
.stl-quiz-tool[hidden] { display: none !important; }
/* ---- SAT/PSAT math reference sheet (dialog) — FR-1 Bluebook parity ----
* Modal overlay you glance at and close. Our own markup (KaTeX + inline
* SVG), themed to tokens so it renders crisply in light/dark. Free on
* every SAT/PSAT math question — never gated. */
.stl-refsheet {
/* Docked NON-MODAL side panel (Mike 2026-07-26, Bluebook parity;
* moved to the RIGHT 2026-07-30 per Mike — both tools now dock on
* the same side and the problem always slides LEFT, so opening
* either tool feels identical). Draggable by the head (JS) +
* resizable from the corner, same treatment as the Desmos panel.
* If BOTH are open the later one sits on top; either can be dragged
* aside. */
position: fixed;
inset: auto;
right: 16px;
top: 64px;
width: min(640px, calc(100vw - 48px));
max-width: none;
height: min(780px, calc(100vh - 96px));
max-height: calc(100vh - 32px);
min-width: 320px;
min-height: 260px;
margin: 0;
padding: 0;
resize: both;
z-index: 90;
border: 1px solid var(--stl-hairline-hi);
border-radius: var(--r-lg);
/* Solid, defined, themed surface — NOT the undefined --stl-surface-1 the
* Desmos panel leaned on (that resolves to transparent). The reference sheet
* carries text/formulas, so it needs an opaque readable background. */
background: var(--stl-bg-2);
color: var(--stl-text);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.stl-refsheet[open] { display: flex; flex-direction: column; }
/* Only paints if a legacy engine fell back to showModal(). */
.stl-refsheet::backdrop { background: rgba(5, 5, 9, 0.35); }
/* ── Bluebook-style content slide (Mike 2026-07-26; unified RIGHT dock
* 2026-07-30) ─────────────────────────────────────────────────────────
* When a tool docks, the QUESTION slides out from under it: body
* padding reserves the dock's strip on the RIGHT, and .stl-main
* re-centers in the remaining space. BOTH tools dock right now, so
* the slide direction is always the same; with both open the single
* strip is sized for the wider panel (the calculator's rule is
* declared last, so it wins when both classes are present). Phones
* show the panels full-screen instead. */
@media (min-width: 981px) {
body { transition: padding 0.28s ease; }
html.stl-ref-open body { padding-right: calc(min(680px, 48vw) + 24px); }
html.stl-calc-open body { padding-right: calc(min(680px, 48vw) + 24px); }
/* ...but NOT the navbar. The reservation is padding on , and the
* header is a child of body, so it was getting squeezed along with the
* question — at 1440px the bar shrank from 1440 to 736 and the nav
* links piled on top of each other (Josh 2026-08-11: "it caused the
* navbar to squish (even though the calculator is supposed to be
* floating on top)"). The header is chrome, not content: it should
* stay full-bleed under the floating panel. A negative right margin
* exactly equal to the reservation walks it back out to the padding
* edge — it never crosses it, so no horizontal overflow. The matching
* transition keeps it from snapping while the content slides. */
.stl-header { transition: margin-right 0.28s ease; }
html.stl-ref-open .stl-header { margin-right: calc(-1 * (min(680px, 48vw) + 24px)); }
html.stl-calc-open .stl-header { margin-right: calc(-1 * (min(680px, 48vw) + 24px)); }
/* Panels cap at the same vw the strip reserves, so panel and strip
* always agree and the question is never covered. */
.stl-refsheet { width: min(640px, 46vw); }
.stl-desmos-panel { width: min(680px, 48vw); }
/* Both open: nudge the sheet so the calculator's head stays visible. */
html.stl-calc-open .stl-refsheet[open] { top: 96px; right: 32px; }
}
@media (max-width: 640px) {
/* Full-screen sheet on phones — no room for side-by-side there. */
.stl-refsheet {
top: 0; left: 0; right: 0;
width: 100vw; height: 100vh;
max-height: 100vh; min-width: 0;
border-radius: 0; resize: none;
}
}
.stl-refsheet__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--stl-hairline);
flex: none;
}
/* The clean pre-rendered sheet (Mike 2026-07-25): white SVG artwork
* displayed verbatim — rounded, full width, crisp at any size. */
.stl-refsheet__img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
background: #fff;
}
.stl-refsheet__title {
margin: 0;
font-family: var(--stl-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.stl-refsheet__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--stl-hairline);
border-radius: var(--r-pill);
background: transparent;
color: var(--stl-text-muted);
cursor: pointer;
transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.stl-refsheet__close:hover { color: var(--stl-text); border-color: var(--stl-hairline-hi); }
.stl-refsheet__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--s-4);
}
.stl-refsheet__note {
margin: 0 0 var(--s-3);
font-family: var(--stl-font-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stl-text-subtle);
}
.stl-refsheet__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
gap: var(--s-3);
}
.stl-refsheet__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 9px;
padding: var(--s-3);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-md);
background: var(--stl-surface-2);
text-align: center;
}
.stl-refsheet__fig {
display: flex;
align-items: center;
justify-content: center;
height: 88px;
width: 100%;
color: var(--stl-text-muted);
}
.stl-refsheet__fig svg { max-height: 88px; width: auto; overflow: visible; }
.stl-refsheet__fig text {
fill: var(--stl-text-muted);
font-family: var(--stl-font-mono);
font-size: 11px;
font-style: italic;
}
.stl-refsheet__formula {
font-size: 15px;
line-height: 1.5;
color: var(--stl-text);
}
.stl-refsheet__formula .katex { font-size: 1.05em; }
.stl-refsheet__facts {
margin-top: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--stl-hairline);
display: grid;
gap: 9px;
}
.stl-refsheet__fact {
display: flex;
gap: 9px;
align-items: baseline;
font-size: 13px;
line-height: 1.5;
color: var(--stl-text-muted);
}
.stl-refsheet__fact::before {
content: "";
flex: none;
width: 5px;
height: 5px;
margin-top: 7px;
border-radius: 50%;
background: var(--stl-accent);
}
@media (max-width: 640px) {
.stl-refsheet {
width: 100vw;
max-width: 100vw;
max-height: 100vh;
height: 100dvh;
border-radius: 0;
border: 0;
}
.stl-refsheet__grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
}
/* Live-quiz step nav — back · skip/next (Joshua 2026-08-16).
*
* One axis, one cluster, centred under the signal buttons: chevron-left
* "Back", a hairline, then the forward control with a chevron-right. The
* hairline is what makes the pair read as a single navigation control
* rather than two unrelated links; without it "Back" floats and looks
* like a stray.
*
* These are deliberately QUIETER than the signal buttons — subtle text,
* no fill, no border. The commit controls have to stay the loudest thing
* in the footer, because choosing a signal is the point of the screen and
* navigating away from it is the exception.
*
* HISTORY: this pair previously lived beside the question counter, on the
* theory that navigation belongs with position and that putting it in the
* footer would shift the signal buttons whenever Back appeared on question
* 2. That second concern was real, and is solved here by keeping Back
* permanently mounted and merely disabled on question 1, so the row's
* height and width never change. The first concern lost to a simpler
* truth: nobody found it up there. */
.stl-stepnav {
justify-self: center;
display: flex;
align-items: center;
gap: var(--s-2);
margin-top: var(--s-1);
}
/* No per-element [hidden] guard here any more: the blanket
* `.stl-app [hidden] { display: none !important }` near the top of this
* file covers it. This is the rule that used to live here, and it is why
* that blanket rule exists — Skip and Next were both visible on question 1
* because `display: inline-flex` below beat the UA's [hidden]. */
.stl-stepnav__rule {
width: 1px;
height: 15px;
background: var(--stl-hairline-hi);
flex: 0 0 auto;
}
.stl-stepnav__btn {
appearance: none; -webkit-appearance: none;
display: inline-flex;
align-items: center;
gap: 7px;
padding: var(--s-2) var(--s-2);
background: none;
border: 0;
border-radius: var(--r-sm);
font: inherit;
font-size: 0.85rem;
line-height: 1.2;
color: var(--stl-text-subtle);
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: color var(--dur-base) var(--ease-out),
opacity var(--dur-base) var(--ease-out);
}
/* The label carries the underline, not the button — otherwise the rule
* runs under the chevron too and the arrow looks struck through. */
.stl-stepnav__btn > span {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--stl-hairline-hi);
transition: text-decoration-color var(--dur-base) var(--ease-out);
}
.stl-stepnav__chev {
flex: 0 0 auto;
opacity: 0.75;
transition: transform var(--dur-base) var(--ease-spring),
opacity var(--dur-base) var(--ease-out);
}
.stl-stepnav__btn:hover:not(:disabled) { color: var(--stl-text); }
.stl-stepnav__btn:hover:not(:disabled) > span { text-decoration-color: var(--stl-text-muted); }
.stl-stepnav__btn:hover:not(:disabled) .stl-stepnav__chev { opacity: 1; }
/* The chevron nudges the way the button travels. Two pixels — enough to
* say "this moves you", not enough to be a performance. */
.stl-stepnav__btn--back:hover:not(:disabled) .stl-stepnav__chev { transform: translateX(-2px); }
.stl-stepnav__btn--fwd:hover:not(:disabled) .stl-stepnav__chev { transform: translateX(2px); }
.stl-stepnav__btn:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
/* Question 1: present but inert, so the row keeps its shape and the
* student learns the control exists before they need it. */
.stl-stepnav__btn:disabled {
opacity: 0.38;
cursor: default;
}
.stl-stepnav__btn:disabled > span { text-decoration-color: transparent; }
@media (prefers-reduced-motion: reduce) {
.stl-stepnav__chev { transition: opacity var(--dur-base) var(--ease-out); }
.stl-stepnav__btn--back:hover:not(:disabled) .stl-stepnav__chev,
.stl-stepnav__btn--fwd:hover:not(:disabled) .stl-stepnav__chev { transform: none; }
}
/* pills — semantic but quiet */
.stl-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--stl-font-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: var(--r-pill);
background: transparent;
border: 1px solid var(--stl-hairline);
color: var(--stl-text-muted);
font-weight: 500;
}
.stl-pill::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--stl-text-faint);
}
.stl-pill[data-d="easy"] { color: var(--stl-green-text); border-color: rgba(var(--stl-green-rgb), 0.28); }
.stl-pill[data-d="easy"]::before { background: var(--stl-green); box-shadow: 0 0 6px var(--stl-green); }
.stl-pill[data-d="medium"] { color: var(--stl-yellow-text); border-color: rgba(var(--stl-yellow-rgb), 0.28); }
.stl-pill[data-d="medium"]::before { background: var(--stl-yellow); box-shadow: 0 0 6px var(--stl-yellow); }
.stl-pill[data-d="hard"] { color: var(--stl-red-text); border-color: rgba(var(--stl-red-rgb), 0.32); }
.stl-pill[data-d="hard"]::before { background: var(--stl-red); box-shadow: 0 0 6px var(--stl-red); }
.stl-pill[data-d="insane"] { color: var(--stl-blue-text); border-color: rgba(var(--stl-blue-rgb), 0.32); }
.stl-pill[data-d="insane"]::before { background: var(--stl-blue); box-shadow: 0 0 6px var(--stl-blue); }
/* Light-mode difficulty pills — the pale 200-tier text colors above
* (#fde68a etc.) are tuned for the dark canvas and disappear on
* white. Yellow is the worst offender (lightest hue) but all four
* need bumping down to ~700-tier so they actually read. Borders also
* darkened slightly so the pill chrome doesn't ghost out. The dots
* stay bright — they're the color signal, not the text. */
:root[data-theme="light"] .stl-pill[data-d="easy"] { color: #15803d; border-color: rgba(var(--stl-green-rgb), 0.45); }
:root[data-theme="light"] .stl-pill[data-d="medium"] { color: #a16207; border-color: rgba(202, 138, 4, 0.50); }
:root[data-theme="light"] .stl-pill[data-d="hard"] { color: #b91c1c; border-color: rgba(var(--stl-red-rgb), 0.50); }
:root[data-theme="light"] .stl-pill[data-d="insane"] { color: #1d4ed8; border-color: rgba(37, 99, 235, 0.50); }
/* Static elapsed-time pill — used on the Results screen for the
* frozen total-time + per-question pacing summary. Same .stl-pill
* chrome as the live timer but no pulse animation (test is over).
* Number sits brighter (var(--stl-text)) so the value pops against
* the muted unit label. */
.stl-results__pacing {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.stl-pill--time {
color: var(--stl-text-muted);
border-color: rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.32);
gap: 8px;
}
.stl-pill--time::before {
background: rgb(var(--stl-tint, var(--stl-rainbow-mid-rgb)));
box-shadow: 0 0 6px rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.45);
}
.stl-pill__num {
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--stl-text);
letter-spacing: 0;
text-transform: none;
font-size: 11.5px;
}
.stl-pill__unit {
color: var(--stl-text-subtle);
}
/* Live elapsed-time pill — sits inline with the question meta row.
* Dot pulses subtly to telegraph "this is live, ticking". Color
* pulls from --stl-tint so the timer wears the active test's color
* (orange ACT, green ISEE, etc.) — same identity logic as the
* difficulty pills inherit per-test. Number text is mono with
* tabular-nums so digits don't shift width as the timer ticks. */
.stl-pill--timer {
color: var(--stl-text);
border-color: rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.32);
}
.stl-pill--timer::before {
background: rgb(var(--stl-tint, var(--stl-rainbow-mid-rgb)));
box-shadow: 0 0 6px rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.55);
animation: stl-timer-pulse 2s ease-in-out infinite;
}
.stl-pill--timer #quiz-timer-text {
font-variant-numeric: tabular-nums;
}
@keyframes stl-timer-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.stl-pill--timer::before { animation: none; opacity: 0.85; }
}
/* Signal-state chips ("Green · Correct" … "Red · Incorrect"), used by
* Run the Signal cards and the review sheet. Coloring rule (Mike
* 2026-07-26): the chip is tinted by the SIGNAL COLOR it names — the
* first word is a color, so the chip must be that color (the old
* outcome-based tints made "Green · Incorrect" render red and left
* "Red · Incorrect" gray). Correct = outline only; Incorrect = same
* color with a soft filled background so needs-attention states pop
* without contradicting the label. Chips never wrap. */
.stl-pill[data-result] { white-space: nowrap; }
.stl-pill[data-result="mastery"] {
color: var(--stl-green-text);
border-color: rgba(var(--stl-green-rgb), 0.45);
}
.stl-pill[data-result="mastery"]::before {
background: var(--stl-green);
box-shadow: 0 0 6px var(--stl-green);
}
.stl-pill[data-result="misconception"] {
color: var(--stl-green-text);
border-color: rgba(var(--stl-green-rgb), 0.7);
background: rgba(var(--stl-green-rgb), 0.12);
}
.stl-pill[data-result="misconception"]::before {
background: var(--stl-green);
box-shadow: 0 0 6px var(--stl-green);
}
.stl-pill[data-result="lucky"] {
color: var(--stl-yellow-text);
border-color: rgba(var(--stl-yellow-rgb), 0.45);
}
.stl-pill[data-result="lucky"]::before {
background: var(--stl-yellow);
box-shadow: 0 0 6px var(--stl-yellow);
}
.stl-pill[data-result="gap"] {
color: var(--stl-yellow-text);
border-color: rgba(var(--stl-yellow-rgb), 0.7);
background: rgba(var(--stl-yellow-rgb), 0.12);
}
.stl-pill[data-result="gap"]::before {
background: var(--stl-yellow);
box-shadow: 0 0 6px var(--stl-yellow);
}
.stl-pill[data-result="missed"],
.stl-pill[data-result="fluke"] {
color: #fecaca;
border-color: rgba(var(--stl-red-rgb), 0.45);
}
.stl-pill[data-result="missed"]::before,
.stl-pill[data-result="fluke"]::before {
background: var(--stl-red);
box-shadow: 0 0 6px var(--stl-red);
}
.stl-pill[data-result="cold"] {
color: #fecaca;
border-color: rgba(var(--stl-red-rgb), 0.7);
background: rgba(var(--stl-red-rgb), 0.12);
}
.stl-pill[data-result="cold"]::before {
background: var(--stl-red);
box-shadow: 0 0 6px var(--stl-red);
}
/* The outcome WORD inside a signal chip keeps its own color (Mike
* 2026-07-26): Correct is always green, Incorrect is always red —
* regardless of the chip's signal tint around it. */
.stl-pill[data-result] .stl-pill__outcome--correct { color: var(--stl-green); }
.stl-pill[data-result] .stl-pill__outcome--incorrect { color: var(--stl-red); }
/* Light-mode contrast for result pills. The dark-theme pastels above
* (#bbf7d0 / #fde68a / #fecaca) wash out on white — same problem the
* admin status badges had. Switch to the darker saturated status-text
* tokens, which clear WCAG AA, and bump the border/background tint to
* match. */
:root[data-theme="light"] .stl-pill[data-result="mastery"] {
color: var(--stl-green-text);
border-color: rgba(var(--stl-green-rgb), 0.55);
}
:root[data-theme="light"] .stl-pill[data-result="misconception"] {
color: var(--stl-green-text);
border-color: rgba(var(--stl-green-rgb), 0.7);
background: rgba(var(--stl-green-rgb), 0.12);
}
:root[data-theme="light"] .stl-pill[data-result="lucky"] {
color: var(--stl-yellow-text);
border-color: rgba(202, 138, 4, 0.55);
}
:root[data-theme="light"] .stl-pill[data-result="gap"] {
color: var(--stl-yellow-text);
border-color: rgba(202, 138, 4, 0.7);
background: rgba(202, 138, 4, 0.12);
}
:root[data-theme="light"] .stl-pill[data-result="missed"],
:root[data-theme="light"] .stl-pill[data-result="fluke"] {
color: var(--stl-red-text);
border-color: rgba(var(--stl-red-rgb), 0.55);
}
:root[data-theme="light"] .stl-pill[data-result="cold"] {
color: var(--stl-red-text);
border-color: rgba(var(--stl-red-rgb), 0.7);
background: rgba(var(--stl-red-rgb), 0.12);
}
:root[data-theme="light"] .stl-pill[data-result] .stl-pill__outcome--correct { color: var(--stl-green-text); }
:root[data-theme="light"] .stl-pill[data-result] .stl-pill__outcome--incorrect { color: var(--stl-red-text); }
/* --- quiz card -------------------------------------------------------- */
.stl-quiz__card { display: grid; gap: var(--gap-section); }
.stl-quiz__passage {
font-size: 0.95rem;
line-height: 1.6;
color: var(--stl-text-muted);
border-left: 2px solid var(--stl-hairline-hi);
padding: var(--s-2) var(--s-4);
white-space: pre-wrap;
}
.stl-quiz__stem {
font-size: clamp(1.1rem, 2vw, 1.25rem);
line-height: 1.45;
margin: 0;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--stl-text);
}
/* Variable letters in stems / passages / explanations — italicized and
* lavender-tinted so they read as math typography rather than narrative
* text. The renderer (formatStemHtml in app.js) wraps standalone single
* letters in this span at render time, so no per-question markup is
* needed. SAT print typesets all variables italic; this matches that
* convention while picking up the v2-aligned accent color so they pop. */
.stl-quiz__var {
font-style: italic;
color: var(--stl-accent);
/* Slight reduction in font weight when bold-adjacent (e.g., next to
* the stem's medium-weight body text) keeps the variable from looking
* heavier than the surrounding text. */
font-weight: 500;
}
/* Math expression run — produced by wrapExpressions() in app.js.
* Wraps any contiguous run that contains a variable plus math chars
* (operators, digits, parens) so the WHOLE expression inherits the
* accent color. Without this, (x + 4)(x + 2) reads as purple x's and
* parens but white digits — breaking the visual unit of the equation.
* Inner .stl-quiz__var keeps its italic; the operators/digits/parens
* pick up the color via inheritance from this span. */
.stl-quiz__expr {
color: var(--stl-accent);
/* Match weight to the surrounding stem text so the expression reads
* as a unit at the same density (the variable's italic still sets
* it apart inside the run). */
font-weight: 500;
/* Equations must never break across lines (Mike QA 2026-07-02: a stem
* rendered "f(x) = (x+4)(x−" with the rest orphaned on the next line).
* nowrap forbids internal breaks; inline-block makes the run a single
* atomic box, so when it can't fit the remaining line width the WHOLE
* equation drops to its own row. On viewports too narrow for the full
* equation we accept light horizontal overflow over the alternative —
* an equation broken in the middle of an operator. */
white-space: nowrap;
display: inline-block;
max-width: 100%;
}
/* View-driven: Classic view adds stl-no-math-color to (Modern
* removes it — see applyView/applyMathColorPref in app.js), reverting both
* variable letters and full expression runs to the surrounding text color.
* Italic on variables is preserved — it's typesetting, not chroma. */
body.stl-no-math-color .stl-quiz__var,
body.stl-no-math-color .stl-quiz__expr {
color: inherit;
}
/* KaTeX-rendered math segments ($…$ / $$…$$ in the bank). KaTeX output
* inherits color, so tinting this wrapper tints the whole expression —
* Modern view shows it in the accent (matching .stl-quiz__expr), Classic
* leaves it the body color. Inline by default; $$…$$ becomes a centered
* display block. */
.stl-katex { color: var(--stl-accent); }
body.stl-no-math-color .stl-katex { color: inherit; }
/* KaTeX splits inline math into several top-level chunks and lets the
* browser line-break between them (after binary/relational operators) —
* which is how "f(x) = (x+4)(x−" ended up cut mid-equation (Mike QA
* 2026-07-02). Inline equations are atomic: nowrap forbids the internal
* breaks and inline-block drops the WHOLE equation to its own row when
* it can't fit the remaining line. Applies to stems, choices, and
* explanations (formatRich is the single funnel). Display math is
* already a block. */
.stl-katex:not(.stl-katex--display) {
display: inline-block;
white-space: nowrap;
max-width: 100%;
}
.stl-katex--display { display: block; }
.stl-katex--display > .katex-display { margin: 0.5em 0; }
/* Stacked display equations (systems) sit tight — one gap, not two
* (Mike, 2026-07-23: "noticeably large gap between the two equations"). */
.stl-katex--display + .stl-katex--display > .katex-display { margin-top: 0.15em; }
/* KaTeX's own error color shouldn't fight the accent tint. */
.stl-katex .katex-error { color: var(--stl-red) !important; }
/* ============== ADMIN: TESTS PANEL ==============
* One row per test type with wordmark + name + question counts +
* Active/Hidden switch. Same visual chrome as the existing question
* rows so the admin feels like one cohesive surface. */
.stl-tests-panel {
display: grid;
gap: var(--s-3);
margin-top: var(--s-3);
}
/* Global test-length options editor (top of the admin Tests panel). */
.stl-tests-globals {
display: grid;
gap: var(--s-1);
padding: var(--s-3);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-md);
background: var(--stl-surface);
}
.stl-tests-globals__head { display: grid; gap: 2px; }
.stl-tests-globals__row {
display: flex;
gap: var(--s-2);
align-items: center;
}
.stl-tests-globals__row .stl-input { flex: 1; min-width: 0; }
.stl-btn--sm { padding: 6px 14px; font-size: 13px; }
/* Length picker on the create-test screen reuses the .stl-tier tiles. */
.stl-score__length-custom { margin-top: var(--s-2); }
.stl-score__length-custom[hidden] { display: none; }
.stl-tests-row {
display: grid;
gap: 0;
padding: 0;
border: 1px solid var(--stl-hairline);
border-radius: var(--r-md);
background: var(--stl-surface);
position: relative;
overflow: hidden;
/* Per-test hover: border + glow tint matches the user-facing
* .stl-picker__tile so admin Tests rows feel like the same surface
* users click in the create-test flow. No translate — keeps the
* expanded subjects panel below from jumping with the row. */
transition:
opacity var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-spring);
}
.stl-tests-row:hover {
border-color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.55);
box-shadow: 0 12px 28px -14px rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.45);
}
/* Hidden test — whole row dims to .55 (matching the subject-row
* fade), so admins instantly see which tests are off. The toggle
* itself stays at full opacity (overridden inside the row) so the
* path back is obvious. */
.stl-tests-row[data-active="0"] .stl-tests-row__main > :not([data-test-toggle]) {
opacity: 0.55;
transition: opacity var(--dur-base) var(--ease-out);
}
.stl-tests-row::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.06), transparent 60%);
pointer-events: none;
}
/* Main row — wordmark / meta / counts / toggle. The whole row main
* acts as a click target for collapse/expand (see initTestsPanel) —
* buttons inside the row keep their own click handlers via
* data-attribute matching, so they don't fall through to the
* expand-zone. No separate chevron control; the cursor + background
* hover lift signal the affordance. */
.stl-tests-row__main {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--s-4);
padding: var(--s-4);
position: relative;
transition: background var(--dur-base) var(--ease-out);
}
.stl-tests-row__main[data-test-expand-zone] { cursor: pointer; }
/* Click-zone hover background tints in the active test's accent so the
* expand affordance reads in the test's own color instead of the old
* uniform lavender. Pairs with the per-tint border + glow on the
* surrounding .stl-tests-row:hover. */
.stl-tests-row__main[data-test-expand-zone]:hover {
background: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.06);
}
.stl-tests-row__main[data-test-expand-zone]:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: -2px;
}
/* Subjects sub-section — indented under the parent test row. Each
* row is one subject with a compact toggle. When the parent test is
* Hidden (data-parent-active="0"), the whole block dims so admins
* can see the subject state without it competing visually. */
.stl-tests-row__subjects {
display: grid;
gap: 0;
padding: 0 var(--s-4) var(--s-3);
margin-top: -4px;
position: relative;
border-top: 1px dashed var(--stl-hairline);
}
/* Author display:grid above wins over the user-agent [hidden] rule,
* so we explicitly hide the collapsed state. Without this, toggling
* the chevron rotated the icon but left the subjects block painted. */
.stl-tests-row__subjects[hidden] { display: none; }
.stl-tests-row__subjects[data-parent-active="0"] {
opacity: 0.55;
}
.stl-tests-subject {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--s-3);
padding: 9px 0 9px var(--s-5);
border-bottom: 1px solid var(--stl-hairline);
transition: opacity var(--dur-base) var(--ease-out);
}
.stl-tests-subject:last-child { border-bottom: 0; }
/* Disabled subject row — same .55 dim treatment used for the whole
* block when the parent test is off. Keeps the visual hierarchy
* consistent: anything not contributing to the live pool reads as
* recessed. The toggle itself stays at full opacity so the user can
* see/click the path back on. */
.stl-tests-subject[data-enabled="0"] .stl-tests-subject__meta {
opacity: 0.55;
}
.stl-tests-subject__meta {
display: flex;
align-items: baseline;
gap: var(--s-3);
min-width: 0;
}
.stl-tests-subject__name {
font-size: 13.5px;
font-weight: 500;
color: var(--stl-text);
}
.stl-tests-subject__count {
font-family: var(--stl-font-mono);
font-size: 11px;
color: var(--stl-text-subtle);
letter-spacing: 0.02em;
}
/* Editable composition row — small numeric input + live-derived %
* pill. Sits between the subject name and the live/total count so
* the admin sees: [name] [12 q | 40%] [85 live · 120 total]
* The input width fits 3 digits; arrow buttons clipped on Firefox
* via -moz-appearance, on Chrome via webkit-appearance. */
.stl-tests-subject__comp {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.stl-tests-subject__count-input {
width: 52px;
padding: 2px 6px;
border: 1px solid var(--stl-hairline);
border-radius: var(--r-sm);
background: var(--stl-bg);
color: var(--stl-text);
font-family: var(--stl-font-mono);
font-size: 12px;
font-weight: 600;
text-align: right;
-moz-appearance: textfield;
appearance: textfield;
}
/* Hide the spin buttons on WebKit/Blink — admin types or pastes the
* number, the arrow controls steal horizontal space and feel chunky
* in this dense row. */
.stl-tests-subject__count-input::-webkit-outer-spin-button,
.stl-tests-subject__count-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stl-tests-subject__count-input:focus {
outline: none;
border-color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.7);
background: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.05);
}
.stl-tests-subject__comp-pct {
font-family: var(--stl-font-mono);
font-size: 11px;
font-weight: 500;
color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.85);
letter-spacing: 0.02em;
padding: 1px 7px;
border-radius: var(--r-pill);
background: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.10);
}
/* Disabled-subject dim — mirror the existing rule. */
.stl-tests-subject[data-enabled="0"] .stl-tests-subject__comp { opacity: 0.55; }
/* Theme color picker row inside the expanded test config. Swatch +
* label + native , with an optional Reset link
* when the current tint differs from the hardcoded default. Hides the
* native picker UI behind the swatch — clicking the chip opens the
* eyedropper without showing the OS color input itself. */
/* Labeled switches on each test row: Active + Coming soon
* (2026-08-10). A 2×2 grid rather than two stacked flex rows: labels
* right-align against a shared switch column so both toggles sit on
* the same vertical line, and a hairline on the left separates the
* control cluster from the count stats. display: contents lets the
* label wrapper contribute its text + switch as siblings to the grid.
* Coming soon reads amber when it's actually biting (test Active). */
.stl-tests-row__switches {
display: grid;
grid-template-columns: auto auto;
align-items: center;
column-gap: 12px;
row-gap: 12px;
flex: 0 0 auto;
padding-left: 22px;
margin-left: 8px;
border-left: 1px solid var(--stl-hairline);
align-self: center;
}
.stl-tests-row__swlabel { display: contents; }
.stl-tests-row__swtext {
font-size: 10.5px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--stl-text-subtle);
white-space: nowrap;
text-align: right;
justify-self: end;
}
.stl-tests-row__switches .stl-switch { justify-self: start; }
.stl-tests-row[data-comingsoon="1"][data-active="1"] .stl-tests-row__swlabel--cs .stl-tests-row__swtext {
color: var(--stl-yellow-text);
}
.stl-tests-row__cs-dot { color: var(--stl-yellow); font-size: 9px; vertical-align: 1px; }
/* ---- admin Metrics tab (2026-08-10): interest rollup cards ---- */
.stl-metrics {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.stl-metrics__empty { grid-column: 1 / -1; display: grid; gap: 6px; padding: 28px 0; }
.stl-metrics__card {
padding: 18px;
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
background:
linear-gradient(165deg, rgba(var(--tile-tint), 0.06) 0%, transparent 55%),
var(--stl-surface);
}
.stl-metrics__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.stl-metrics__name { font-family: var(--stl-font-display); font-size: 16px; font-weight: 600; color: var(--stl-text); }
.stl-metrics__badge {
font-family: var(--stl-font-mono);
font-size: 10px; letter-spacing: 0.06em;
padding: 3px 9px;
border: 1px solid rgba(var(--stl-yellow-rgb), 0.45);
border-radius: var(--r-pill);
color: var(--stl-yellow-text);
white-space: nowrap;
}
.stl-metrics__badge--off { border-color: var(--stl-hairline-hi); color: var(--stl-text-subtle); }
.stl-metrics__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.stl-metrics__stats dt { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stl-text-subtle); margin-bottom: 2px; }
.stl-metrics__stats dd { margin: 0; font-family: var(--stl-font-display); font-size: 22px; font-weight: 650; color: var(--stl-text); font-variant-numeric: tabular-nums; }
.stl-metrics__spark { display: flex; align-items: flex-end; gap: 3px; height: 42px; }
.stl-metrics__spark i {
flex: 1;
min-height: 2px;
border-radius: 2px 2px 0 0;
background: rgb(var(--tile-tint));
opacity: 0.85;
}
.stl-metrics__spark i[data-zero="1"] { background: var(--stl-surface-3); opacity: 1; height: 2px !important; }
/* Site-traffic card (2026-08-25): the PostHog rollup spans the grid and
adds a four-up stat row + ranked screen list. Same card anatomy as the
interest cards — tint flows through --tile-tint, everything tokens. */
.stl-metrics__card--wide { grid-column: 1 / -1; }
.stl-metrics__stats--four { grid-template-columns: repeat(4, 1fr); }
.stl-metrics__rows { display: grid; gap: 6px; margin-top: 14px; }
.stl-metrics__row {
display: grid;
grid-template-columns: minmax(72px, 140px) 1fr auto;
align-items: center;
gap: 10px;
}
.stl-metrics__row-label {
font-family: var(--stl-font-mono);
font-size: 11.5px;
color: var(--stl-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stl-metrics__row-bar {
height: 6px;
border-radius: var(--r-pill);
background: var(--stl-surface-3);
position: relative;
overflow: hidden;
}
.stl-metrics__row-bar::after {
content: "";
position: absolute; inset: 0;
width: var(--w, 0%);
border-radius: inherit;
background: rgba(var(--tile-tint), 0.75);
}
.stl-metrics__row-n {
font-family: var(--stl-font-mono);
font-size: 11.5px;
color: var(--stl-text);
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.stl-metrics__stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stl-tests-row__color {
display: flex;
align-items: center;
gap: var(--s-3);
margin-top: var(--s-2);
padding-top: var(--s-3);
border-top: 1px dashed var(--stl-hairline);
font-size: 12px;
color: var(--stl-text-muted);
}
.stl-tests-row__color-label {
display: inline-flex;
align-items: center;
gap: var(--s-2);
cursor: pointer;
position: relative;
}
.stl-tests-row__color-swatch {
display: inline-block;
width: 22px; height: 22px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
.stl-tests-row__color-text {
font-weight: 500;
color: var(--stl-text);
letter-spacing: 0.01em;
}
/* Native color input — hide visually but stay clickable. Sized over
* the swatch so a click on the chip opens the OS picker. */
.stl-tests-row__color-input {
position: absolute;
inset: 0;
width: 22px; height: 22px;
opacity: 0;
cursor: pointer;
/* Some browsers default to a 30x30 minimum — neutralize so the
* hit area matches the visible swatch exactly. */
border: 0;
padding: 0;
background: transparent;
}
.stl-tests-row__color-reset {
margin-left: auto;
font-size: 12px;
}
/* Reset-to-default link sits at the bottom of the expanded subjects
* panel, only when at least one override is in play for this test. */
.stl-tests-row__reset {
margin-top: var(--s-2);
padding-top: var(--s-2);
border-top: 1px dashed var(--stl-hairline);
text-align: right;
font-size: 12px;
}
.stl-tests-row__overridden-dot {
color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 0.9);
font-size: 9px;
vertical-align: middle;
}
/* Compact switch variant — about 70% the size of the default. Used
* for subject child toggles so they read as subordinate to the
* parent test toggle. Track + thumb sized so the thumb sits with
* ~2px margins from each track edge in both states.
*
* The selectors here CHAIN .stl-switch.stl-switch--sm (specificity
* 0,3,1) so they beat the base .stl-switch[aria-checked=...] rule
* (specificity 0,2,1) which lives later in source order — without
* the chain, the base rule won the cascade and slammed the small
* thumb to a translateX(16) meant for the larger 38px track,
* which made it bleed past the 32px small track's right edge. */
.stl-switch.stl-switch--sm { padding: 2px 4px; gap: 0; }
.stl-switch.stl-switch--sm .stl-switch__track { width: 32px; height: 18px; }
.stl-switch.stl-switch--sm .stl-switch__thumb { width: 12px; height: 12px; top: 2px; left: 2px; }
.stl-switch.stl-switch--sm[aria-checked="true"] .stl-switch__thumb { transform: translateX(14px); }
/* Subjects block uses the native [hidden] attr to collapse — no
* height transition (a 0 → auto height tween needs JS to measure
* heights, which adds layout thrash for marginal payoff here). The
* cursor change on hover + the row-main background lift carry the
* affordance. */
.stl-tests-row__mark {
position: relative;
display: flex; align-items: center;
/* In the Tests panel context the wordmark is compact — icon at
* 36px with the acronym inline next to it. */
--stl-mark-icon-size: 36px;
color: rgba(var(--tile-tint, var(--stl-rainbow-mid-rgb)), 1);
}
.stl-tests-row__mark .stl-test-mark {
flex-direction: row;
align-items: center;
gap: 12px;
}
.stl-tests-row__mark .stl-test-mark__name {
font-size: 1.25rem;
color: var(--stl-text);
}
.stl-tests-row__meta { position: relative; display: grid; gap: 2px; min-width: 0; }
.stl-tests-row__name { font-size: 1rem; font-weight: 600; color: var(--stl-text); }
.stl-tests-row__tagline { font-size: 0.85rem; color: var(--stl-text-muted); }
.stl-tests-row__counts {
position: relative;
display: flex; gap: var(--s-3);
}
.stl-tests-row__counts > div {
display: grid; gap: 2px; text-align: right;
min-width: 60px;
}
.stl-tests-row__counts dt {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--stl-text-subtle); font-family: var(--stl-font-mono);
}
.stl-tests-row__counts dd {
font-size: 1.1rem; font-weight: 600; color: var(--stl-text);
font-variant-numeric: tabular-nums; margin: 0;
}
/* Switch component — used by the Tests panel Active/Hidden toggle.
* Pure CSS, no extra deps. ARIA: button[role=switch] with
* aria-checked driving the visual state. */
.stl-switch {
appearance: none; -webkit-appearance: none;
background: transparent; border: 0; padding: 4px 10px 4px 4px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 10px;
font: inherit; color: var(--stl-text);
border-radius: var(--r-pill);
position: relative;
}
.stl-switch:focus-visible { outline: 2px solid var(--stl-accent); outline-offset: 2px; }
.stl-switch__track {
position: relative;
width: 38px; height: 22px;
border-radius: var(--r-pill);
background: var(--stl-surface-2);
border: 1px solid var(--stl-hairline);
transition: background var(--dur-base) ease, border-color var(--dur-base) ease;
flex-shrink: 0;
}
.stl-switch__thumb {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--stl-text-muted);
transition: transform var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1),
background var(--dur-base) ease;
}
.stl-switch__lbl {
font-size: 12px;
font-family: var(--stl-font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stl-text-subtle);
font-weight: 500;
min-width: 50px;
}
/* Tracks the global per-test accent (--stl-tint) by default so the
* score-screen "Include lower difficulty questions" switch picks up
* the test's color. Inside the admin Tests panel, each row sets its
* own --tile-tint inline, which we honor via the CSS-variable cascade
* (the inline tile-tint becomes the value of --stl-tint inside that
* row scope). */
.stl-switch[aria-checked="true"] .stl-switch__track {
background: rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.25);
border-color: rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.6);
}
.stl-switch[aria-checked="true"] .stl-switch__thumb {
background: rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 1);
transform: translateX(16px);
}
/* (Removed: .stl-tests-row { --stl-tint: var(--tile-tint) } —
* that rule made every toggle inside an admin test row paint in
* the test's color, breaking the "admin is monotone lavender"
* design rule. Per-test identity now lives on the wordmark icon
* and the row's backdrop ::before gradient (both pull --tile-tint
* directly), not on the toggle chrome.) */
.stl-switch[aria-checked="true"] .stl-switch__lbl {
color: var(--stl-text);
}
@media (max-width: 640px) {
.stl-tests-row {
grid-template-columns: 1fr;
text-align: left;
gap: var(--s-2);
}
.stl-tests-row__counts { justify-self: start; }
.stl-tests-row__counts > div { text-align: left; }
}
/* Math markup produced by renderMath in app.js. Two classes:
* .stl-math-fracsup — a stacked-fraction superscript for `^(p/q)`
* (e.g. a^(1/2) shows ½ as a proper fraction in superscript size)
* .stl-math-sup — a parenthesized non-fraction exponent like ^(4+1)
* The fraction stacks numerator over denominator with a thin rule
* between, then sits at superscript baseline next to the base term. */
.stl-math-fracsup {
display: inline-flex;
flex-direction: column;
align-items: stretch;
vertical-align: 0.55em; /* superscript-ish baseline */
font-size: 0.65em;
line-height: 1;
margin: 0 1px 0 1px;
font-style: italic; /* match math typography */
}
.stl-math-num,
.stl-math-den {
text-align: center;
padding: 0 2px;
}
.stl-math-num {
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.stl-math-den {
padding-top: 1px;
}
.stl-math-sup {
font-style: italic;
}
/* Display-style stacked fraction — produced by renderMath when a bank
* entry uses `\frac{a}{b}` syntax. Renders the numerator above a
* horizontal rule above the denominator, sized at the surrounding text
* height so equations like (2x − 5)/3 read as proper textbook fractions
* rather than slash notation.
*
* Bank authors opt in per question: existing inline `2/3` text in any
* of the 2,825 banked questions remains unchanged. */
.stl-math-displayfrac {
display: inline-flex;
flex-direction: column;
align-items: stretch;
/* vertical-align: middle anchors the box's vertical CENTER to the
* baseline + half-x-height of the parent — which is exactly where
* the fraction bar sits inside this stacked layout. The previous
* -0.45em pin offset the BOTTOM of the box and ended up parking the
* bar above the text's x-height midline; once the surrounding
* line-height stretched to accommodate the fraction, the text and
* math read as drifting apart. `middle` keeps them locked together
* regardless of how tall the fraction grows.
*
* The tiny -0.08em nudge corrects for a thin asymmetry in the box's
* internal vertical centre — the 1px border on the numerator's
* bottom edge + the 2px top/bottom paddings don't sum to zero, so
* without the nudge the bar floats ~1px above x-height-middle. */
vertical-align: middle;
margin-top: -0.08em;
font-size: 1em;
line-height: 1.05;
margin-right: 2px;
margin-left: 2px;
/* Slight horizontal padding so the rule extends past the digits. */
padding: 0 1px;
}
.stl-math-displayfrac__num,
.stl-math-displayfrac__den {
text-align: center;
padding: 0 4px;
/* Italic isn't forced here — variables inside already wear ;
* digits and operators stay upright (matches MathJax/textbook style). */
}
.stl-math-displayfrac__num {
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.stl-math-displayfrac__den {
padding-top: 2px;
}
/* Square root — radical sign + radicand with a vinculum (top bar)
* connecting the two. The √ sits at the surrounding baseline; the
* radicand wears a top border that visually extends the radical's
* horizontal stroke. Authored as `\sqrt{x+1}` in the bank. */
.stl-math-sqrt {
display: inline-flex;
align-items: stretch;
vertical-align: baseline;
margin: 0 1px;
}
.stl-math-sqrt__radical {
font-style: normal;
/* Slight upscale so the √ glyph reads at the same optical weight as
* the radicand. */
font-size: 1.1em;
line-height: 1;
padding-right: 1px;
}
.stl-math-sqrt__body {
border-top: 1px solid currentColor;
padding: 0 3px;
/* Push the body slightly down so the top border aligns with the top
* of the radical glyph. */
margin-top: 0.15em;
}
.stl-quiz__choices {
display: grid;
gap: var(--s-2);
border: 0;
padding: 0;
margin: 0;
}
.stl-choice {
position: relative;
display: flex;
align-items: center;
gap: var(--s-3);
padding: 11px var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--stl-hairline);
background: var(--stl-surface);
cursor: pointer;
/* Hidden lavender accent bar lives on the left edge — grows in on
* hover, signals "this is your pick if you click" without
* committing to a selection until you do. */
overflow: hidden;
transition: border-color var(--dur-base) var(--ease-spring),
background var(--dur-base) var(--ease-spring),
transform var(--dur-fast) var(--ease-spring);
}
.stl-choice::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--stl-accent);
transform: scaleY(0);
transform-origin: center;
transition: transform var(--dur-base) var(--ease-spring);
}
.stl-choice:hover {
border-color: var(--stl-accent-line);
background: var(--stl-surface-2);
}
.stl-choice:hover::before { transform: scaleY(0.6); }
.stl-choice.is-selected::before { transform: scaleY(1); }
@media (hover: none) {
.stl-choice:hover { border-color: var(--stl-hairline); background: var(--stl-surface); }
.stl-choice:hover::before { transform: scaleY(0); }
}
.stl-choice input { position: absolute; opacity: 0; pointer-events: none; }
.stl-choice__letter {
flex: 0 0 auto;
width: 22px; height: 22px;
border-radius: 6px;
background: var(--stl-surface-2);
border: 1px solid var(--stl-hairline-hi);
font-family: var(--stl-font-mono);
font-weight: 500;
font-size: 11px;
display: grid;
place-items: center;
color: var(--stl-text-muted);
}
.stl-choice__text { flex: 1; font-size: 0.97rem; line-height: 1.45; }
/* In the choice-row context, the A/B/C/D chip is flex-centered (its
* geometric center sits on the line box's geometric center). A
* stacked-fraction inside .stl-choice__text uses vertical-align:
* middle which parks the bar at the math axis.
*
* Measured in Chrome on the deployed page (with the global
* margin-top: -0.08em already in effect): the bar sits 0.74px ABOVE
* chip center. Any additional negative translate moves it further
* above. Smallest correction: don't add any choice-context lift at
* all. The 0.74px residual is sub-pixel-rounding territory and
* reads as aligned.
*
* (Rule kept as an explicit no-op so the choice context is documented
* — anyone tempted to add a translate here can read the tuning log.) */
.stl-choice .stl-math-displayfrac {
/* no transform — measured baseline is already within 1px of chip
* center. See tuning notes above. */
}
.stl-choice.is-selected {
border-color: var(--stl-accent-line);
background: var(--stl-accent-soft);
}
.stl-choice.is-selected .stl-choice__letter {
background: var(--stl-accent);
color: var(--stl-bg-deep);
border-color: var(--stl-accent);
}
/* FIXLIST P0 (2026-08-18): was var(--stl-accent-soft) — a 12%-alpha ring,
* effectively invisible. The answer control on the core screen needs a real
* focus indicator. :focus-within because the real focus target is the
* visually-hidden radio inside the label. */
.stl-choice:focus-within {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
/* Admin review reuse — an opened question renders with the participant
* .stl-choice styling so it mirrors the test view. Read-only (not
* clickable), and the correct answer is flagged with the green signal
* rather than the lavender "selected" state. Hover animation is muted
* since these rows aren't interactive. */
.stl-review-card__quiz .stl-choice { cursor: default; }
.stl-review-card__quiz .stl-choice:hover {
border-color: var(--stl-hairline);
background: var(--stl-surface);
}
.stl-review-card__quiz .stl-choice:hover::before { transform: scaleY(0); }
.stl-choice.is-correct {
border-color: rgba(var(--stl-green-rgb), 0.55);
background: rgba(var(--stl-green-rgb), 0.10);
}
.stl-review-card__quiz .stl-choice.is-correct:hover {
border-color: rgba(var(--stl-green-rgb), 0.55);
background: rgba(var(--stl-green-rgb), 0.10);
}
.stl-choice.is-correct .stl-choice__letter {
background: var(--stl-green);
border-color: var(--stl-green);
color: var(--stl-bg-deep);
}
.stl-choice__mark {
margin-left: auto;
font-weight: 700;
color: #4ade80;
}
/* --- figure (question images and tables) ----------------------------
* Figures come in two shapes:
* data-kind="image" — screenshot; needs the canonical CSS dark-mode-
* screenshot trick (invert + hue-rotate) so the white background
* becomes a comfortable off-black instead of a blowout against the
* canvas. A subtle brightness adjust matches the surface tone.
* data-kind="table" — native HTML table; styled with the same hairline
* borders, mono labels, and tabular numerals as the rest of the
* dark theme. Doesn't need filter hackery, so the surface tile here
* just frames the table without padding being load-bearing.
*/
.stl-quiz__figure {
display: block;
margin: 0 0 var(--s-4);
background: var(--stl-surface);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-md);
padding: var(--s-3);
text-align: center;
overflow: hidden;
}
.stl-quiz__figure[hidden] { display: none; }
.stl-quiz__figure[data-kind="image"] img {
display: inline-block;
max-width: 100%;
height: auto;
border-radius: var(--r-sm);
filter: invert(0.92) hue-rotate(180deg) brightness(0.95);
/* a tiny 0.05 short of full inversion keeps an off-black background
* after invert, which sits more comfortably against the card surface
* than absolute black would. */
}
.stl-quiz__figure[data-kind="table"] {
/* Tables already have their own structure — drop the outer surface
* tile so the table reads as part of the question card, not a panel
* inside it. */
background: transparent;
border: 0;
padding: 0;
text-align: left;
}
.stl-quiz__figure[data-kind="svg"] {
/* Inline SVG figures (geometric diagrams). Same surface tile as the
* default figure container, but the inner SVG uses currentColor so
* lines / text inherit the canvas text color. Variable labels inside
* the SVG (line names, function names) get the same italic-lavender
* treatment as stem variables. */
background: var(--stl-surface);
border: 1px solid var(--stl-hairline);
padding: var(--s-4);
}
.stl-quiz__figure[data-kind="svg"] svg {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
color: var(--stl-text);
font-family: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: 15px;
}
.stl-quiz__figure[data-kind="svg"] .stl-svg-var {
font-style: italic;
fill: var(--stl-accent);
font-weight: 500;
}
.stl-quiz__figure[data-kind="chart"] {
/* Chart.js needs an explicitly-sized parent for responsive sizing.
* The aspect ratio here matches the rough shape of the SAT graph
* boxes so converted charts feel proportional to the original.
* Height accounts for the bumped tick / axis-title / chart-title
* font sizes (14 / 13 / 15 px) so the plot area itself stays
* readable. */
position: relative;
height: 380px;
padding: var(--s-3) var(--s-3) var(--s-2);
}
.stl-quiz__figure[data-kind="chart"] canvas {
display: block;
max-width: 100%;
height: 100% !important;
width: 100% !important;
}
@media (max-width: 560px) {
.stl-quiz__figure[data-kind="chart"] { height: 320px; }
}
/* --- HTML table inside a figure ------------------------------------- */
.stl-quiz__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
background: var(--stl-surface);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-md);
overflow: hidden;
}
.stl-quiz__table caption {
caption-side: top;
text-align: left;
padding: 0 0 var(--s-2);
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stl-text-subtle);
}
.stl-quiz__table th,
.stl-quiz__table td {
padding: 10px var(--s-3);
border-bottom: 1px solid var(--stl-hairline);
text-align: right; /* numeric columns want right-align */
color: var(--stl-text);
vertical-align: middle;
}
.stl-quiz__table th {
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--stl-text-subtle);
font-weight: 500;
background: var(--stl-surface-2);
border-bottom-color: var(--stl-hairline-hi);
}
/* First column tends to be a label (e.g., "Lion", "Washington"); left-align
* to match reading direction. */
.stl-quiz__table th:first-child,
.stl-quiz__table td:first-child {
text-align: left;
color: var(--stl-text);
}
/* Row-scope
(when firstColIsHeader is set on the question) gets
* lighter weight to match data cells but stay scannable. */
.stl-quiz__table tbody th {
background: transparent;
font-family: inherit;
font-size: 0.95rem;
text-transform: none;
letter-spacing: 0;
color: var(--stl-text);
font-weight: 500;
}
.stl-quiz__table tbody tr:last-child th,
.stl-quiz__table tbody tr:last-child td {
border-bottom: 0;
}
/* Optional totals row: top-border emphasizes it as a sum/summary line */
.stl-quiz__table tbody tr.stl-quiz__table-totals th,
.stl-quiz__table tbody tr.stl-quiz__table-totals td {
border-top: 1px solid var(--stl-hairline-hi);
font-weight: 600;
background: var(--stl-surface);
}
@media (max-width: 560px) {
.stl-quiz__table { font-size: 0.9rem; }
.stl-quiz__table th,
.stl-quiz__table td { padding: 8px 10px; }
}
/* ====================================================================
* CLASSIC view — SAT-style ruled grid (the DEFAULT table look).
* A compact table sized to its content and centered, with full
* horizontal AND vertical grid lines on every cell and a plain
* (non-mono, non-uppercase) header — the look of a printed SAT table.
* Toggling to Modern (data-view="modern") falls back to the rounded
* row-separator styling above. Gated on :root[data-view="classic"],
* which the boot script stamps by default.
* ================================================================== */
:root { --stl-classic-line: rgba(255, 255, 255, 0.9); }
:root[data-theme="light"] { --stl-classic-line: rgba(15, 23, 42, 0.9); }
:root[data-view="classic"] .stl-quiz__figure[data-kind="table"] { text-align: center; }
:root[data-view="classic"] .stl-quiz__table {
display: inline-table;
width: auto; /* shrink to content, not full width */
/* `separate` (not collapse) so the outer border-radius actually rounds
* the table's corners — collapsed borders ignore border-radius. The
* inner grid lines are drawn as right/bottom borders on each cell,
* with the last column/row stripped to avoid doubling the outer
* border. overflow:hidden clips any sub-pixel overshoot at the
* rounded corners. */
border-collapse: separate;
border-spacing: 0;
border: 2px solid var(--stl-classic-line);
border-radius: 10px;
overflow: hidden;
background: transparent;
margin: 4px auto;
text-align: center;
}
:root[data-view="classic"] .stl-quiz__table caption {
font-family: inherit;
text-transform: none;
letter-spacing: 0;
font-size: 0.85rem;
color: var(--stl-text-subtle);
text-align: center;
padding-bottom: var(--s-2);
}
:root[data-view="classic"] .stl-quiz__table th,
:root[data-view="classic"] .stl-quiz__table td {
/* Inner grid lines as right + bottom on each cell (2px to match the
* outer border thickness). The last column/row strip these below so
* the inside lines don't double the outer table border. */
border: 0;
border-right: 2px solid var(--stl-classic-line);
border-bottom: 2px solid var(--stl-classic-line);
padding: 8px 18px;
text-align: center;
color: var(--stl-text);
background: transparent;
}
:root[data-view="classic"] .stl-quiz__table th:last-child,
:root[data-view="classic"] .stl-quiz__table td:last-child { border-right: 0; }
:root[data-view="classic"] .stl-quiz__table th {
font-family: inherit; /* plain header, not mono uppercase */
font-size: 0.95rem;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
color: var(--stl-text);
background: transparent;
}
:root[data-view="classic"] .stl-quiz__table th:first-child,
:root[data-view="classic"] .stl-quiz__table td:first-child { text-align: left; }
:root[data-view="classic"] .stl-quiz__table tbody th { font-weight: 600; }
/* Strip the bottom border on the last row so it doesn't double the
* outer table border at the rounded bottom corners. */
:root[data-view="classic"] .stl-quiz__table tbody tr:last-child th,
:root[data-view="classic"] .stl-quiz__table tbody tr:last-child td {
border-bottom: 0;
}
:root[data-view="classic"] .stl-quiz__table tbody tr.stl-quiz__table-totals th,
:root[data-view="classic"] .stl-quiz__table tbody tr.stl-quiz__table-totals td {
border-top: 2px solid var(--stl-classic-line);
font-weight: 700;
background: transparent;
}
/* Equal-width columns for uniform data tables (variable-shape: x|y,
* t|f(t), etc.). The JS heuristic in renderFigure sets the class and
* a `--stl-table-col-min` ch-based length derived from the widest
* cell. We apply that as min-width to every cell; since cells fit
* within it, every column collapses to the same width. Multi-word
* tables (two-way frequency, etc.) don't get the class and keep
* their natural auto widths. Applies in both Classic and Modern. */
.stl-quiz__table--equal-cols th,
.stl-quiz__table--equal-cols td {
min-width: var(--stl-table-col-min, 4ch);
text-align: center;
}
/* Beat the classic-view :first-child left-align rule (uniform data
* tables center every column, including the first — for x|y / t|f(t)
* shapes a left-aligned first column would look off). */
:root .stl-quiz__table--equal-cols th:first-child,
:root .stl-quiz__table--equal-cols td:first-child {
text-align: center;
}
/* ====================================================================
* MODERN view — colorful brand-styled SVG figures.
*
* The imported SVGs draw geometry with hardcoded dark strokes (great
* for the Classic, SAT-style look). In Modern view we want our brand
* identity instead: the figure tile picks up a soft accent gradient,
* lines/curves use the accent color at 2px, dots/markers fill with the
* accent, and any hardcoded white background rect gets cleared so the
* tile's gradient shows through. CSS overrides the SVG presentation
* attributes (`stroke="#222"`, `fill="#ffffff"`, etc.) — those are the
* lowest-specificity styles, so any matching rule wins.
* Classic view leaves all of this alone and the original dark strokes
* keep the SAT look. ================================================ */
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] {
background: linear-gradient(135deg, var(--stl-accent-soft), var(--stl-surface));
border-color: var(--stl-accent-line);
}
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg line,
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg polygon,
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg path,
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg polyline {
stroke: var(--stl-accent);
stroke-width: 2;
}
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg circle {
fill: var(--stl-accent);
stroke: none;
}
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg text {
fill: var(--stl-text);
}
/* Clear the hardcoded background rect (`` or
* `fill="transparent"` sitting at the top of nearly every imported SVG)
* so the figure tile's accent gradient shows through. The bg rect is
* always the first direct child. */
:root[data-view="modern"] .stl-quiz__figure[data-kind="svg"] svg > rect:first-child {
fill: transparent;
}
/* View-toggle icon swap: grid glyph in Classic, rows glyph in Modern. */
.stl-view-toggle__icon--rows { display: none; }
.stl-view-toggle__icon--grid { display: inline-flex; }
:root[data-view="modern"] .stl-view-toggle__icon--grid { display: none; }
:root[data-view="modern"] .stl-view-toggle__icon--rows { display: inline-flex; }
/* --- grid-in (free-response / student-produced answer) -------------- */
/* --- chart-grid choices (multiple-choice with graph options) ---------
* Used when a question has 4 candidate graphs as options. Each option
* is a small Chart.js canvas in a card with the letter (A/B/C/D)
* pinned at top-left. 2-column grid on desktop, 1-column on phones
* (still readable; charts get a touch shorter). Selection / hover
* states mirror the regular .stl-choice text choices. */
.stl-choice-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-2);
margin-top: var(--s-3);
}
.stl-choice-grid[hidden] { display: none; }
.stl-choice--chart {
position: relative;
display: block;
padding: var(--s-3);
padding-top: 36px; /* room for letter chip */
border-radius: var(--r-md);
border: 1px solid var(--stl-hairline);
background: var(--stl-surface);
cursor: pointer;
transition: border-color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
height: 200px;
}
.stl-choice--chart:hover {
border-color: var(--stl-hairline-hi);
background: var(--stl-surface-2);
}
.stl-choice--chart.is-selected {
border-color: var(--stl-accent-line);
background: var(--stl-accent-soft);
}
.stl-choice--chart .stl-choice__letter {
position: absolute;
top: var(--s-3);
left: var(--s-3);
z-index: 1;
}
.stl-choice--chart.is-selected .stl-choice__letter {
background: var(--stl-accent);
color: var(--stl-bg-deep);
border-color: var(--stl-accent);
}
.stl-choice--chart canvas {
display: block;
width: 100% !important;
height: 100% !important;
max-height: calc(100% - 0px);
}
/* Review-mode marks on chart choices: green outline for correct, red
* for picked-wrong. Mirrors the .stl-review__choices li[data-state] CSS. */
.stl-choice--chart[data-state="correct"] {
border-color: rgba(var(--stl-green-rgb), 0.45);
background: rgba(var(--stl-green-rgb), 0.06);
}
.stl-choice--chart[data-state="picked-wrong"] {
border-color: rgba(var(--stl-red-rgb), 0.45);
background: rgba(var(--stl-red-rgb), 0.06);
}
@media (max-width: 560px) {
.stl-choice-grid { grid-template-columns: 1fr; }
.stl-choice--chart { height: 180px; }
}
.stl-quiz__gridin { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.stl-quiz__gridin[hidden] { display: none; }
.stl-quiz__gridin-label {
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--stl-text-subtle);
}
.stl-quiz__gridin-input {
width: 100%;
padding: 14px 16px;
font-size: 1.15rem;
font-weight: 500;
font-family: inherit;
font-variant-numeric: tabular-nums;
color: var(--stl-text);
background: var(--stl-bg);
border: 1px solid var(--stl-hairline-hi);
border-radius: var(--r-md);
outline: none;
transition: border-color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.stl-quiz__gridin-input:hover { border-color: var(--stl-hairline-hover); }
.stl-quiz__gridin-input:focus,
.stl-quiz__gridin-input:focus-visible {
border-color: var(--stl-accent);
background: var(--stl-bg-2);
box-shadow: 0 0 0 4px var(--stl-accent-soft);
}
.stl-quiz__gridin-input.is-locked {
background: var(--stl-accent-soft);
border-color: var(--stl-accent);
color: var(--stl-text);
}
/* Inline error state — fired when the user hits Green/Yellow without
* typing. Red border + soft red glow + a brief shake to draw the eye. */
.stl-quiz__gridin-input.is-error,
.stl-quiz__gridin-input.is-error:hover,
.stl-quiz__gridin-input.is-error:focus,
.stl-quiz__gridin-input.is-error:focus-visible {
border-color: var(--stl-red);
background: rgba(var(--stl-red-rgb), 0.05);
box-shadow: 0 0 0 4px rgba(var(--stl-red-rgb), 0.18);
animation: stl-error-shake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.stl-quiz__gridin-hint {
font-size: 13px;
color: var(--stl-text-subtle);
margin: 0;
}
/* --- signal (the only place green/yellow/red appear in the UI) -------- */
.stl-quiz__signal { display: grid; gap: var(--s-3); }
.stl-quiz__signal-help {
margin: 0;
text-align: center;
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stl-text-subtle);
/* Reserve room for the slightly longer error message so the layout
* doesn't reflow when the helper swaps to error text. */
min-height: 1.4em;
transition: color var(--dur-base) var(--ease-out);
}
/* Error voice for the signal help line. Sits in the same slot as the
* default help text but reads as an inline error rather than a modal. */
.stl-quiz__signal-help.is-error {
color: var(--stl-red);
letter-spacing: 0.06em;
text-transform: none;
font-size: 12px;
font-weight: 500;
animation: stl-error-fadein 200ms var(--ease-out);
}
/* MC choices error halo — applies to both the radio fieldset and the
* choiceCharts grid (q-7029, q-7014). Soft red drop-shadow rather than
* a hard border so the individual choice rows still read as their own
* affordances; the halo just frames "you need to pick something." */
.stl-quiz__choices.is-error,
.stl-choice-grid.is-error {
border-radius: var(--r-md);
box-shadow: 0 0 0 2px rgba(var(--stl-red-rgb), 0.45),
0 12px 30px -12px rgba(var(--stl-red-rgb), 0.35);
animation: stl-error-shake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes stl-error-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX( 2px); }
30%, 50%, 70% { transform: translateX(-3px); }
40%, 60% { transform: translateX( 3px); }
}
@keyframes stl-error-fadein {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.stl-quiz__gridin-input.is-error,
.stl-quiz__choices.is-error,
.stl-choice-grid.is-error,
.stl-quiz__signal-help.is-error {
animation: none;
}
}
.stl-signal {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-2);
}
.stl-signal__btn {
position: relative;
display: grid;
justify-items: start;
align-content: space-between;
gap: var(--s-3);
padding: var(--s-4);
min-height: 92px;
border-radius: var(--r-lg);
border: 1px solid var(--stl-hairline-hi);
background: var(--stl-surface);
color: var(--stl-text);
cursor: pointer;
font-family: inherit;
text-align: left;
transition: transform var(--dur-fast) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
background var(--dur-base) var(--ease-out);
}
.stl-signal__btn {
/* Re-state the transition list to include box-shadow so the hover
* halo can fade in cleanly. */
transition: transform var(--dur-fast) var(--ease-spring),
border-color var(--dur-base) var(--ease-spring),
background var(--dur-base) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-spring);
}
.stl-signal__btn:hover {
transform: translateY(-2px);
background: var(--stl-surface-2);
}
.stl-signal__btn:active { transform: translateY(0); transition-duration: var(--dur-fast); }
.stl-signal__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.stl-signal__btn:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
/* Chip ramps brighter on hover — `currentColor` already drives this,
* we just punch up the box-shadow for a stronger glow. */
.stl-signal__chip {
width: 12px; height: 12px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 12px currentColor;
transition: box-shadow var(--dur-base) var(--ease-spring);
}
.stl-signal__btn:hover .stl-signal__chip { box-shadow: 0 0 18px currentColor; }
.stl-signal__lbl {
font-weight: 600;
font-size: 0.95rem;
letter-spacing: -0.005em;
color: var(--stl-text);
}
.stl-signal__sub {
font-size: 0.8rem;
color: var(--stl-text-muted);
line-height: 1.35;
}
.stl-signal__btn--green { color: var(--stl-green); }
.stl-signal__btn--yellow { color: var(--stl-yellow); }
.stl-signal__btn--red { color: var(--stl-red); }
/* Per-color hover halo — colored drop shadow + matching border. The
* halo is what makes hover feel "alive" — it tells you which signal
* you're about to fire before you commit. */
.stl-signal__btn--green:hover {
border-color: rgba(var(--stl-green-rgb), 0.7);
box-shadow: 0 14px 36px -10px rgba(var(--stl-green-rgb), 0.45);
}
.stl-signal__btn--yellow:hover {
border-color: rgba(var(--stl-yellow-rgb), 0.7);
box-shadow: 0 14px 36px -10px rgba(var(--stl-yellow-rgb), 0.45);
}
.stl-signal__btn--red:hover {
border-color: rgba(var(--stl-red-rgb), 0.7);
box-shadow: 0 14px 36px -10px rgba(var(--stl-red-rgb), 0.45);
}
@media (hover: none) {
.stl-signal__btn:hover { transform: none; box-shadow: none; background: var(--stl-surface); }
.stl-signal__btn:hover .stl-signal__chip { box-shadow: 0 0 12px currentColor; }
.stl-signal__btn--green:hover,
.stl-signal__btn--yellow:hover,
.stl-signal__btn--red:hover { border-color: var(--stl-hairline-hi); }
}
/* .stl-skip was the lone underlined "Skip this question" link. Skip is now
* the forward half of .stl-stepnav (see above) and inherits its styling,
* so the standalone rules are gone. */
/* --- results bento --------------------------------------------------- */
.stl-results { display: grid; gap: var(--gap-section); }
/* Header row pairs the eyebrow ("Results") with a color-coded test
* badge on the right so the user knows which test they're reviewing
* without having to drop their eyes to find the testType anywhere
* else. The eyebrow keeps its dot+text structure; the badge floats
* to the trailing edge. On narrow widths it wraps below the eyebrow. */
.stl-results__head-row {
display: flex;
align-items: center;
/* Single-row pill cluster (badge + pacing + time-ago) now lives
* in one flex group inside .stl-results__pacing — head-row just
* holds it. Wrap so a narrow viewport stacks pills onto a 2nd line
* cleanly instead of horizontally scrolling. */
gap: var(--s-3);
flex-wrap: wrap;
}
/* ---- shared color-coded test-type badge ---------------------------
* Compact pill that surfaces "this thing belongs to ACT/SAT/etc."
* Used on the Results header, the Review meta-row, and history rows.
* Caller sets --badge-tint inline (an "r, g, b" triplet from the
* test's tint) so each instance can render in its test's color. */
.stl-test-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 6px;
border-radius: var(--r-pill);
border: 1px solid rgba(var(--badge-tint, var(--stl-rainbow-mid-rgb)), 0.45);
background: rgba(var(--badge-tint, var(--stl-rainbow-mid-rgb)), 0.08);
color: rgba(var(--badge-tint, var(--stl-rainbow-mid-rgb)), 1);
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
line-height: 1;
white-space: nowrap;
flex-shrink: 0;
transition: background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.stl-test-badge__icon {
display: inline-flex;
width: 14px;
height: 14px;
color: inherit;
flex-shrink: 0;
}
.stl-test-badge__icon svg {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}
.stl-test-badge__name {
display: inline-block;
line-height: 1;
}
.stl-results__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-3);
}
/* Test pacing meta-line — sits between the results sub-paragraph and
* the bento grid. Gives time context (total + per-question avg) as
* metadata about *the attempt*, separate from the categorical tiles
* below which describe correctness outcomes. Mono numerals so the
* digits feel like a stopwatch reading; muted labels so it doesn't
* shout against the H1. */
.stl-results__meta {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 8px;
margin: 0 0 var(--s-2);
padding: 0;
font-family: var(--stl-font-mono);
font-size: 13px;
color: var(--stl-text-subtle);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.stl-results__meta-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--stl-text-faint);
display: inline-block;
align-self: center;
margin-right: 2px;
}
.stl-results__meta-num {
color: var(--stl-text);
font-weight: 500;
font-size: 14.5px; /* the numeric values get slight emphasis */
}
.stl-results__meta-lbl {
color: var(--stl-text-subtle);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
}
.stl-results__meta-sep {
color: var(--stl-text-faint);
margin: 0 2px;
}
/* =========================================================
* RESULTS OVERVIEW — single hairline-bordered card containing
* the hero (score + proportional meter) and the 3-row ledger,
* separated by an internal hairline divider. The two halves
* read as one continuous surface ("one card, two zones") so
* the score and the per-signal breakdown feel like a single
* unit instead of two stacked tiles. Score folds the "Correct"
* count inline ("N/T correct"); the ledger shows mastery /
* lucky / review with count + percentage.
* ========================================================= */
.stl-results__overview[data-merged="true"] {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
overflow: hidden; /* corner-clip the inner zones */
display: grid;
/* Hero zone fills leftover vertical room (1fr), ledger stays at
* its natural compact height (auto). When the chart tile stretches
* this card, the score + meter get extra breathing room rather
* than the ledger rows growing tall. */
grid-template-rows: 1fr auto auto;
gap: 0;
}
.stl-results__overview-divider {
height: 1px;
background: var(--stl-hairline);
}
/* ---- Hero zone (top of merged card) -----------------------------
* No own border / background — the merged container owns the
* surface. Internal padding only. Tightened from 22/16 to
* 20/14 so the score + meter feel more anchored to the ledger
* below instead of floating in whitespace.
*/
.stl-results__hero {
/* Inside the merged container — surface is provided by the parent. */
padding: 20px 22px;
display: grid;
gap: 14px;
}
/* Legacy non-merged hero (kept for any other consumer) keeps its own
* surface so a standalone .stl-results__hero still renders. */
.stl-results__overview:not([data-merged="true"]) .stl-results__hero {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
}
.stl-results__hero-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-4);
flex-wrap: wrap;
}
.stl-results__score {
display: inline-flex;
align-items: baseline;
gap: 10px;
line-height: 1;
}
.stl-results__score-num {
font-size: clamp(2.4rem, 6vw, 3rem);
font-weight: 600;
letter-spacing: -0.03em;
color: var(--stl-text);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.stl-results__score-word {
font-size: clamp(0.95rem, 2.2vw, 1.1rem);
font-weight: 500;
color: var(--stl-text-muted);
letter-spacing: 0.01em;
}
.stl-results__hero-meta {
font-size: 13px;
color: var(--stl-text-muted);
font-variant-numeric: tabular-nums;
}
/* ---- Proportional meter bar -------------------------------------
* 10px tall, fully-rounded ends, 2px gap between segments. Each
* segment uses inline `flex: ` so its width matches its
* share of total questions. A segment with flex:0 collapses to
* nothing (no slim sliver, no empty placeholder). */
.stl-results__meter {
height: 10px;
border-radius: 5px;
overflow: hidden;
display: flex;
gap: 2px;
background: rgba(255, 255, 255, 0.04);
}
.stl-results__meter-seg {
display: block;
height: 100%;
transition: flex var(--dur-base) var(--ease-out);
}
.stl-results__meter-seg--mastery { background: var(--stl-green); }
.stl-results__meter-seg--misconception { background: var(--stl-red); }
.stl-results__meter-seg--lucky { background: var(--stl-yellow); }
.stl-results__meter-seg--gap { background: var(--stl-amber); }
.stl-results__meter-seg--fluke { background: rgba(var(--stl-red-rgb), 0.55); }
.stl-results__meter-seg--cold { background: var(--stl-text-faint); }
/* ---- Ledger rows ------------------------------------------------
* Single hairline-bordered card with 3 rows separated by 1px
* rules. Each row is a button (jumps to that bucket in review)
* with a colored dot, label + parenthetical hint, count, and
* percentage on the right. */
/* Ledger zone — inside the merged overview the parent owns the
* surface and border, so the ledger drops its own. Standalone
* usage (non-merged) keeps its bordered card look. */
.stl-results__ledger {
overflow: hidden;
/* Rows stay at their natural compact height — the hero zone
* absorbs any extra vertical space the chart tile adds. */
display: grid;
}
.stl-results__overview:not([data-merged="true"]) .stl-results__ledger {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--stl-hairline);
border-radius: var(--r-lg);
}
.stl-results__row {
/* Reset button defaults, layer back interactive surface. */
appearance: none;
-webkit-appearance: none;
font: inherit;
color: var(--stl-text);
text-align: left;
width: 100%;
background: transparent;
border: 0;
border-top: 1px solid var(--stl-hairline);
padding: 10px 18px;
/* 2-col grid now (label | stats). The num + pct pill sit together
* inside .stl-results__row-stats so they read as one unit instead
* of being thrown to opposite edges of a 3-col grid. */
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out);
}
.stl-results__row:first-child { border-top: 0; }
.stl-results__row:hover { background: rgba(255, 255, 255, 0.03); }
.stl-results__row:focus-visible {
outline: 2px solid var(--row-color, var(--stl-accent));
outline-offset: -2px;
}
.stl-results__row:disabled,
.stl-results__row[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.4;
}
.stl-results__row:disabled:hover,
.stl-results__row[aria-disabled="true"]:hover { background: transparent; }
/* Label is a 2-column grid: colored dot (col 1, spans both rows
* for vertical centering) + a text stack of title (row 1) and hint
* (row 2). Stacking the text keeps the cell legible when the
* overview column is narrow (chart is dominant in the 2-col layout). */
.stl-results__row-label {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 10px;
align-items: center;
min-width: 0;
}
.stl-results__row-label::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--row-color, var(--stl-text-faint));
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
.stl-results__row--mastery { --row-color: var(--stl-green); }
.stl-results__row--misconception { --row-color: var(--stl-red); }
.stl-results__row--lucky { --row-color: var(--stl-yellow); }
.stl-results__row--gap { --row-color: var(--stl-amber); }
.stl-results__row--fluke { --row-color: rgba(var(--stl-red-rgb), 0.7); }
.stl-results__row--cold { --row-color: var(--stl-text-faint); }
.stl-results__row-title {
grid-column: 2;
grid-row: 1;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
color: var(--stl-text);
}
.stl-results__row-hint {
grid-column: 2;
grid-row: 2;
font-size: 11.5px;
font-weight: 400;
color: var(--stl-text-faint);
line-height: 1.2;
margin-top: 1px;
}
/* Stats group on the right end of each row — packs num + pct close
* together so they read as one stat instead of two floating numbers. */
.stl-results__row-stats {
display: inline-flex;
align-items: center;
gap: 8px;
}
.stl-results__row-num {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 18px;
line-height: 1;
color: var(--stl-text);
text-align: right;
}
/* Percentage rides in a small pill — soft tinted background, hairline
* border, mono digits. Tinted by the row's --row-color so the pill
* carries the signal hue. */
.stl-results__row-pct {
font-family: var(--stl-font-mono);
font-variant-numeric: tabular-nums;
font-size: 11px;
font-weight: 500;
color: var(--stl-text-muted);
padding: 3px 8px;
border-radius: var(--r-pill);
background: rgba(var(--row-color-rgb, 255, 255, 255), 0.06);
border: 1px solid rgba(var(--row-color-rgb, 255, 255, 255), 0.18);
line-height: 1;
min-width: 44px;
text-align: center;
}
.stl-results__row--mastery { --row-color-rgb: 74, 222, 128; }
.stl-results__row--misconception { --row-color-rgb: 251, 113, 133; }
.stl-results__row--lucky { --row-color-rgb: 250, 204, 21; }
.stl-results__row--gap { --row-color-rgb: 245, 158, 11; }
.stl-results__row--fluke { --row-color-rgb: 251, 113, 133; }
.stl-results__row--cold { --row-color-rgb: 148, 148, 160; }
/* Narrow widths — collapse the hint inline and tighten padding so
* the row still reads cleanly on a phone. */
@media (max-width: 480px) {
.stl-results__hero { padding: 18px 18px; }
.stl-results__score-num { font-size: 2.2rem; }
.stl-results__row {
padding: 12px 14px;
grid-template-columns: 1fr auto;
}
.stl-results__row-pct { display: none; }
.stl-results__row-hint { display: none; }
}
/* =========================================================
* RESULTS TOP — 2-column grid: merged overview on the left,
* the per-topic radar in its own joined container on the
* right. Slight overview-leaning split so the text-heavy
* ledger gets a bit more room than the square chart. On
* narrow widths the two stack to a single column.
* ========================================================= */
.stl-results__top {
display: grid;
/* Reverted to the 0.85/1.15 split. With the canvas back to a true
* square (aspect-ratio: 1 below) the polygon fills the column
* exactly — no wasted horizontal margin around a non-square canvas
* — so this column width is enough to land a visibly bigger polygon
* than the prior 0.72/1.28 attempt (which left dead space on the
* sides because the canvas was wider than tall). */
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: var(--gap-normal);
/* Top-aligned columns so the overview card sits at its natural
* compact height instead of stretching tall to match the square
* chart tile. The left column then stacks overview + share/fresh
* actions vertically, roughly balancing the chart's tall square. */
align-items: start;
}
/* Left column wraps the overview card + the share/start-fresh actions
* so they stack vertically directly under the overview, instead of
* the share section spanning full width below the entire top grid.
* gap:0 — the actions block owns its own top margin + divider line,
* so layering an outer gap on top would double the spacing. */
.stl-results__left-col {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.stl-results__top > .stl-radar-section { margin: 0; }
/* Joined container layout — back to its standard flex column with
* the chart-zone keeping the base 16px padding + the chart-head as
* a normal inline eyebrow above the canvas. The chart's "small
* polygon in a big box" issue is Chart.js-side (the polygon's
* radius is shrunk by pointLabels reservations even when labels
* are off), so the fix lives in the chart config, not the chrome. */
.stl-results__top .stl-radar-section__joined {
display: flex;
flex-direction: column;
}
.stl-results__top .stl-radar-section__chart-zone {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Canvas host = the full chart-zone tile. Square (aspect-ratio: 1)
* so the canvas matches the column width exactly. The polygon
* (drawn by Chart.js as min(W,H)) fills the whole square. */
.stl-results__top .stl-radar-section__canvas-host {
flex: 1 1 auto;
width: 100%;
max-width: none;
max-height: none;
aspect-ratio: 1 / 1;
}
@media (max-width: 720px) {
.stl-results__top {
grid-template-columns: 1fr;
gap: var(--s-3);
}
}
/* =========================================================
* TWIN CTA ROW — Walk through review + Start new AI-tailored
* test, side by side, both as rainbow pill outlines so they
* read as equal-weight primary actions. Each takes an even
* share of the row; on narrow widths they wrap to stacked.
* ========================================================= */
.stl-results__cta-row {
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
/* Hairline divider above the twin primary CTAs separates the
* "Walk through review" / "Start new AI-tailored test" actions
* from the 2-col overview+chart grid above. */
border-top: 1px solid var(--stl-hairline);
padding-top: var(--s-5);
margin-top: var(--s-4);
}
.stl-results__cta-row > .stl-btn {
/* Equal share of the row. min-width prevents either button from
* compressing past usable size when one label is much longer. */
flex: 1 1 220px;
justify-content: center;
}
/* Three-tier action layout (Option A):
* 1. Hero CTA → Walk through review, full-width primary
* 2. Share group → eyebrow label + 3 buttons in a row
* 3. Take another → eyebrow label + 2 buttons in a row
*
* Eyebrow labels echo the typography system used elsewhere on the
* results screen (Geist Mono, uppercase, subtle color), so the
* groups feel like an extension of the existing language rather
* than a new pattern. */
.stl-results__actions {
display: flex;
flex-direction: column;
gap: var(--s-4);
/* No border-top here anymore — the divider belongs below the
* whole 2-col top grid (on .stl-results__cta-row). The gap from
* the parent .stl-results__left-col handles spacing between this
* action row and the overview card above. */
margin-top: var(--s-4);
}
.stl-results__group {
display: grid;
gap: 10px;
}
.stl-results__group-label {
margin: 0;
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--stl-text-subtle);
}
.stl-results__group-row {
display: flex;
gap: var(--s-2);
flex-wrap: wrap;
}
/* Each button in a group claims an even share of the row, with a
* minimum width that prevents very narrow flex children. On phones
* the rows stack to 1-col below the responsive breakpoint. */
.stl-results__group-row > .stl-btn,
.stl-results__group-row > .dc-btn {
flex: 1 1 calc(33% - var(--s-2));
min-width: 130px;
justify-content: center;
}
/* Hero variant of the primary button — full width, beefier padding,
* stamps the Walk-through CTA as the obvious next step. */
.stl-btn--hero {
width: 100%;
padding: 14px 20px;
font-size: 15px;
min-height: 52px;
}
/* Subdued (N) count appended to the hero label. Sits with a tabular
* monospace voice so it reads as metadata, not part of the verb. */
.stl-btn__count {
font-family: var(--stl-font-mono);
font-weight: 500;
font-size: 0.9em;
margin-left: 4px;
opacity: 0.78;
letter-spacing: 0.02em;
}
/* --- review --------------------------------------------------------- */
.stl-review__choices {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--s-2);
}
.stl-review__choices li {
padding: 10px var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--stl-hairline);
background: var(--stl-surface);
display: flex;
gap: var(--s-3);
align-items: center;
font-size: 0.95rem;
}
.stl-review__choices li[data-state="correct"] {
border-color: rgba(var(--stl-green-rgb), 0.45);
background: rgba(var(--stl-green-rgb), 0.06);
}
.stl-review__choices li[data-state="picked-wrong"] {
border-color: rgba(var(--stl-red-rgb), 0.45);
background: rgba(var(--stl-red-rgb), 0.06);
}
.stl-review__choices li .stl-choice__letter { width: 22px; height: 22px; font-size: 11px; }
/* Right-aligned "✓ correct" / "✗ your answer" marker on review choices.
* `margin-left: auto` in the flex row pushes the marker to the far edge
* of the choice tile instead of letting it sit inline after the text. */
.stl-review__choices li .stl-choice__mark {
margin-left: auto;
padding-left: var(--s-3);
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
color: var(--stl-text-subtle);
}
.stl-review__choices li[data-state="correct"] .stl-choice__mark {
color: var(--stl-green-text);
}
.stl-review__choices li[data-state="picked-wrong"] .stl-choice__mark {
color: var(--stl-red-text);
}
.stl-review__explain {
padding: var(--s-4);
border-radius: var(--r-md);
background: var(--stl-bg);
border: 1px solid var(--stl-hairline);
}
.stl-review__explain p { margin: var(--s-2) 0 0; line-height: 1.6; color: var(--stl-text); }
.stl-review__nav {
display: flex;
justify-content: space-between;
gap: var(--s-2);
}
/* --- buttons -------------------------------------------------------- */
.stl-btn,
.dc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 16px;
border-radius: 9px;
font-family: inherit;
font-weight: 500;
font-size: 13.5px;
letter-spacing: -0.005em;
border: 1px solid var(--stl-hairline-hi);
background: var(--stl-surface);
color: var(--stl-text);
cursor: pointer;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
/* All transitions ride the springy curve so hover feels physical.
* Box-shadow is included so the lavender hairline halo can fade in
* with the rest of the state shift. */
transition: background var(--dur-base) var(--ease-spring),
border-color var(--dur-base) var(--ease-spring),
color var(--dur-base) var(--ease-spring),
transform var(--dur-fast) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-spring),
filter var(--dur-base) var(--ease-spring);
}
.stl-btn:hover,
.dc-btn:hover {
/* Lift + lavender hairline halo. Subtle, but tells you the button is
* "live" without competing with the primary CTA's stronger glow. */
background: var(--stl-surface-2);
border-color: var(--stl-accent-line);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 18px -8px rgba(var(--stl-tint, var(--stl-rainbow-mid-rgb)), 0.18);
}
.stl-btn:active,
.dc-btn:active {
/* Quick rebound — feels like a physical press. */
transform: translateY(0.5px);
transition-duration: var(--dur-fast);
}
.stl-btn:focus-visible,
.dc-btn:focus-visible {
outline: 2px solid var(--stl-accent);
outline-offset: 2px;
}
.stl-btn:disabled,
.dc-btn:disabled {
opacity: 0.45; cursor: not-allowed; transform: none; filter: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* The author display rules above (inline-flex) win over the user-agent
* `[hidden] { display: none }`, so any .stl-btn carrying the hidden
* attribute would still render. Restore the expected behavior. */
.stl-btn[hidden],
.dc-btn[hidden] { display: none; }
/* hover-on-touch override — kill the hover paint on devices without a
* pointer so taps don't leave the lifted state stuck. */
@media (hover: none) {
.stl-btn:hover,
.dc-btn:hover {
transform: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
border-color: var(--stl-hairline-hi);
background: var(--stl-surface);
}
}
/* primary — border-only rainbow, rectangular.
*
* This was a FILLED rainbow gradient until 2026-08-05. It was retired
* because the app had already migrated nearly every CTA to the
* border-only treatment (--pill-rainbow), and the dozen filled buttons
* left behind (admin modal saves, the splash CTA, the resume card) read
* as a louder, older system sitting right next to them.
*
* The treatment is now identical to --pill-rainbow with one deliberate
* difference: the radius stays the base 9px RECTANGLE instead of going
* full pill. Pills are reserved for the hero and navbar CTAs; form-level
* actions stay rectangular.
*
* Implementation is the padding-box / border-box double-background
* trick used everywhere else in this file. The 1.5px transparent border
* carries the rainbow; the padding-box layer is an opaque fill that
* hides the gradient everywhere except the border. #15161d dark,
* #ffffff light (see the light-mode swap near the top of this file).
*
* --rainbow-outline rides along as an alias so the older class name
* resolves to exactly the same thing. */
.stl-btn--primary,
.stl-btn--rainbow-outline {
background:
linear-gradient(var(--stl-rainbow-fill), var(--stl-rainbow-fill)) padding-box,
var(--stl-rainbow) border-box;
/* 1.5px so the gradient border reads at small sizes — a 1px
* four-stop gradient turns to mush on a 9px radius. */
border: 1.5px solid transparent;
border-radius: 9px;
color: var(--stl-text);
font-weight: 600;
/* The border went 1px → 1.5px, so shave half a pixel off the
* vertical padding and the button keeps the same height as the
* ghost/secondary buttons it sits beside. */
padding: 9.5px 18px;
box-shadow: none;
/* Force a separate GPU layer. Gradient borders on rounded corners
* can show subpixel-render artifacts when composited against a
* parent backdrop-filter (the navbar uses one); promoting the
* button to its own layer with translate3d eliminates them. */
transform: translate3d(0, 0, 0);
}
.stl-btn--primary:hover,
.stl-btn--rainbow-outline:hover {
/* Lift the inside one shade so hover registers without touching
* the gradient identity. Same values as --pill-rainbow. */
background:
linear-gradient(var(--stl-rainbow-fill-hover), var(--stl-rainbow-fill-hover)) padding-box,
var(--stl-rainbow) border-box;
/* translate3d keeps the button on the GPU layer through the hover
* lift (translateY alone would force a re-rasterize and the corners
* could pop). */
transform: translate3d(0, -1px, 0);
box-shadow: 0 10px 24px -10px rgba(var(--stl-rainbow-mid-rgb), 0.45);
}
.stl-btn--primary:active,
.stl-btn--rainbow-outline:active {
transform: translate3d(0, 0.5px, 0);
box-shadow: 0 4px 10px -4px rgba(var(--stl-rainbow-mid-rgb), 0.3);
}
@media (hover: none) {
.stl-btn--primary:hover,
.stl-btn--rainbow-outline:hover {
transform: none;
box-shadow: none;
background:
linear-gradient(var(--stl-rainbow-fill), var(--stl-rainbow-fill)) padding-box,
var(--stl-rainbow) border-box;
}
}
/* outline — same gradient as primary, but only on the border. Dark
* interior + white text. Used for the navbar "New test" CTA where
* the filled primary felt too loud sitting next to the text nav
* tabs; the outline reads as "action" without dominating the bar.
*
* Implementation: padding-box / border-box double-background trick
* (same pattern as the "All" history chip + the active nav-icon
* chip). The 1.5px transparent border carries the rainbow; the
* padding-box layer is an opaque dark surface that hides the
* gradient everywhere except the border. */
.stl-btn--outline {
background:
linear-gradient(var(--stl-rainbow-fill), var(--stl-rainbow-fill)) padding-box,
var(--stl-rainbow) border-box;
border: 1.5px solid transparent;
color: var(--stl-text);
font-weight: 600;
padding: 10px 18px;
box-shadow: none;
transform: translate3d(0, 0, 0);
}
.stl-btn--outline:hover {
/* Subtle lift + tint the inside one shade lighter so hover reads
* without changing the gradient identity. */
background:
linear-gradient(var(--stl-rainbow-fill-hover), var(--stl-rainbow-fill-hover)) padding-box,
var(--stl-rainbow) border-box;
transform: translate3d(0, -1px, 0);
box-shadow:
0 10px 24px -10px rgba(var(--stl-rainbow-mid-rgb), 0.5);
}
.stl-btn--outline:active {
transform: translate3d(0, 0.5px, 0);
box-shadow:
0 4px 10px -4px rgba(var(--stl-rainbow-mid-rgb), 0.3);
}
@media (hover: none) {
.stl-btn--outline:hover {
transform: none;
box-shadow: none;
background:
linear-gradient(var(--stl-rainbow-fill), var(--stl-rainbow-fill)) padding-box,
var(--stl-rainbow) border-box;
}
}
/* ============ pill-rainbow ============
* Border-only gradient pill. Used by the navbar "New test" CTA AND
* (with a hero-sized override below) the full-width "Start new
* AI-tailored test" hero CTA. Same padding-box / border-box trick
* as the "All" history chip — the 1.5px transparent border carries
* the rainbow; the inside is the dark navbar-effective color so the
* gradient only shows on the perimeter. Text + icon white. */
.stl-btn--pill-rainbow {
/* Border-only gradient pill — same padding-box / border-box trick
* as the "All" history chip but with full pill radius. The 1.5px
* transparent border carries the rainbow; the inside is the dark
* navbar-effective color (#15161d) so the gradient only shows on
* the perimeter. Text + icon white for clean contrast. */
background:
linear-gradient(var(--stl-rainbow-fill), var(--stl-rainbow-fill)) padding-box,
var(--stl-rainbow) border-box;
color: var(--stl-text);
border: 1.5px solid transparent;
font-weight: 600;
padding: 6px 14px 6px 12px;
font-size: 12.5px;
border-radius: var(--r-pill);
box-shadow: none;
min-height: 0;
transform: translate3d(0, 0, 0);
}
.stl-btn--pill-rainbow:hover {
/* Lift the inside one shade so hover registers without changing
* the gradient identity. */
background:
linear-gradient(var(--stl-rainbow-fill-hover), var(--stl-rainbow-fill-hover)) padding-box,
var(--stl-rainbow) border-box;
transform: translate3d(0, -1px, 0);
box-shadow: 0 8px 20px -10px rgba(var(--stl-rainbow-mid-rgb), 0.45);
}
/* Light-mode override — hardcoded #15161d interior is dark on dark on
* purpose in dark mode, but in light mode it leaves the button as a
* black pill against white with dark "New test" text invisible
* inside. Swap the padding-box fill to white + use the light-mode
* text color so contrast comes back. Rainbow border stays. */
:root[data-theme="light"] .stl-btn--pill-rainbow {
background:
linear-gradient(#ffffff, #ffffff) padding-box,
var(--stl-rainbow) border-box;
color: var(--stl-text);
}
/* .stl-btn--rainbow-outline used to be defined here as the rectangular
* sibling of --pill-rainbow. As of 2026-08-05 --primary IS that
* treatment, so the class is folded into the --primary selector group
* above and kept only as an alias. Defining it again here would win on
* source order and quietly reintroduce the old --r-md radius and
* --stl-bg-2 fill, so it stays deleted. */
:root[data-theme="light"] .stl-btn--pill-rainbow:hover {
background:
linear-gradient(#f6f7fb, #f6f7fb) padding-box,
var(--stl-rainbow) border-box;
box-shadow: 0 8px 20px -10px rgba(var(--stl-rainbow-mid-rgb), 0.35);
}
/* Hero-size override — when --pill-rainbow lands on the full-width
* AI-tailored CTA the navbar's compact sizing isn't right; bump
* padding + font back up to the original primary-CTA scale so the
* button reads as the page's hero action. */
.stl-radar__cta.stl-btn--pill-rainbow {
padding: 13px 22px;
font-size: 14px;
/* Pure pill at hero scale would be overly stadium-like; nudge
* back to a comfortable lozenge radius. */
border-radius: var(--r-pill);
}
.stl-radar__cta.stl-btn--pill-rainbow:hover {
/* Larger hero-scale shadow to match the button's increased weight. */
box-shadow: 0 14px 32px -12px rgba(var(--stl-rainbow-mid-rgb), 0.5);
}
/* ghost — quiet by default, lavender wash on hover (Trench-style).
* No border (so the wash hugs the text), color promotes to text-bright. */
/* ── NEUTRAL secondary + PILL shape ─────────────────────────────────────
*
* STYLEGUIDE.md called `--outline` "secondary", but --outline carries the
* rainbow gradient border, and --ghost is borderless (a tertiary). So the
* system had no NEUTRAL secondary: a real button, clearly clickable, that
* yields visual priority to a brand-coloured primary beside it. Josh asked
* for exactly that in the hero demo's action pair (2026-08-18) — "secondary
* without the gradient" — so it is built once here rather than as a
* one-off, per Rule #4.
*
* `--pill` is a SHAPE modifier only (radius, nothing else) so it composes
* with any variant. --pill-rainbow already bakes the pill radius in; this is
* for the variants that do not.
*/
.stl-btn--neutral {
background: var(--stl-surface-2);
border: 1.5px solid var(--stl-hairline-hi);
color: var(--stl-text);
font-weight: 600;
padding: 9.5px 18px;
box-shadow: none;
transform: translate3d(0, 0, 0);
}
.stl-btn--neutral:hover {
background: var(--stl-surface-3);
border-color: var(--stl-text-subtle);
transform: translate3d(0, -1px, 0);
}
.stl-btn--neutral:active { transform: translate3d(0, 0.5px, 0); }
@media (hover: none) {
.stl-btn--neutral:hover {
background: var(--stl-surface-2);
border-color: var(--stl-hairline-hi);
transform: none;
}
}
.stl-btn--pill { border-radius: var(--r-pill); }
.stl-btn--ghost {
background: transparent;
border-color: transparent;
color: var(--stl-text-muted);
box-shadow: none;
}
.stl-btn--ghost:hover {
background: var(--stl-accent-soft);
color: var(--stl-text);
border-color: transparent;
box-shadow: none;
transform: none;
}
/* ADMIN nav tab — no special coloring. Inherits the same muted text
* + gradient-border active treatment as the History and Analysis
* tabs so the three nav links read as one consistent system. The
* old green tint + green hover background was removed once the tab
* moved into the shared .stl-header__nav-link group. */
@media (hover: none) {
.stl-btn--ghost:hover { background: transparent; color: var(--stl-text-muted); }
}
/* arrow modifier — appends a → that nudges right and brightens on hover.
* Apply by adding `stl-btn--arrow` to any .stl-btn. Pure CSS — no HTML
* change to the label needed. */
.stl-btn--arrow::after {
content: "→";
display: inline-block;
margin-left: 8px;
font-weight: 500;
opacity: 0.78;
transform: translateX(-2px);
transition: transform var(--dur-base) var(--ease-spring),
opacity var(--dur-base) var(--ease-spring);
}
.stl-btn--arrow:hover::after {
opacity: 1;
transform: translateX(2px);
}
/* Dev-only button (the "Test" affordance in the header that fast-
* forwards to populated results). Visually marked as a developer
* tool — mono font, slight red tint, dashed border — so nobody
* mistakes it for production UI. JS hides it on non-local hostnames
* and the click handler also feature-checks before doing anything,
* so even if it leaks into production it no-ops. */
.stl-btn--dev {
background: rgba(var(--stl-red-rgb), 0.06);
border: 1px dashed rgba(var(--stl-red-rgb), 0.4);
color: rgba(var(--stl-red-rgb), 0.85);
font-family: var(--stl-font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 12px;
box-shadow: none;
}
.stl-btn--dev:hover {
background: rgba(var(--stl-red-rgb), 0.12);
border-color: rgba(var(--stl-red-rgb), 0.7);
color: var(--stl-red);
}
/* small icon prefix used inside .stl-btn — currently the share button.
* Sits in front of the label with a subtle gap and slightly larger
* weight so it reads as part of the affordance, not decoration. */
.stl-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 2px;
font-weight: 600;
font-size: 1.1em;
line-height: 1;
letter-spacing: 0;
}
/* ============== inline link styles (Trench-inspired) ============== *
* Use .stl-link wherever a text link sits in body copy. Underline
* scales in from the left on hover (1px, lavender). .stl-link--arrow
* adds a trailing → that nudges right.
*/
.stl-link {
position: relative;
display: inline;
color: var(--stl-text);
text-decoration: none;
padding: 0 0 1px 0;
/* Reset native button chrome — `.stl-link` is sometimes applied to
* a