/* Base styles shared by every page. Phase 0 skeleton -- deliberately minimal; the real visual design lands with the screens that need it (Phases 3-5). */ *, *::before, *::after { box-sizing: border-box; } :root { --color-bg: #ffffff; --color-text: #1a1a1a; --color-muted: #595959; /* ~7:1 contrast on white, meets WCAG AA for body text */ --color-accent: #0b5fff; --color-border: #d0d0d0; --color-correct: #15803d; /* ~5:1 contrast on white, meets WCAG AA for normal text */ --color-incorrect: #b91c1c; /* ~6.5:1 contrast on white, meets WCAG AA for normal text */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* 5165 scientific calculator (Phase 5.2) -- kept as its own small palette rather than reusing --color-bg/--color-border everywhere, so the calculator reads as a distinct tool (screen + keypad) against the page's own plainer surfaces. */ --color-calc-body: #eef0f3; --color-calc-screen: #1a1a1a; --color-calc-screen-text: #f5f5f5; --color-calc-key: #ffffff; --color-calc-fn-key: #e2e8f0; --color-calc-op-key: #dbe9ff; /* 5485 periodic table (Phase 5.3, D-22) -- ten pastel category colors, light enough that the page's own dark --color-text stays comfortably legible on any of them without a per-category text-color override. Decorative only: the legend in run.html states each mapping in real text (SCHEMA.md S1.3), so this palette isn't the only signal for category. */ --color-cat-alkali-metal: #ffd6d6; --color-cat-alkaline-earth-metal: #ffe4c4; --color-cat-transition-metal: #fff3b0; --color-cat-post-transition-metal: #d9f2d9; --color-cat-metalloid: #c9f2e0; --color-cat-nonmetal: #cdeaff; --color-cat-halogen: #d6d6ff; --color-cat-noble-gas: #e8d6ff; --color-cat-lanthanide: #ffd6ea; --color-cat-actinide: #f0d6c0; /* S6 progress dashboard redesign (Phase 6.6) -- meters + bullet-graph bars. Reuses --color-accent/--color-correct/--color-incorrect directly rather than a parallel palette; only a middle "building" amber and the neutral bar-track grays are new. */ --color-accent-light: #b8d1ff; /* pale --color-accent, the "first attempt" meter */ --color-warning: #b45309; /* ~4.6:1 contrast on white, meets WCAG AA for normal text */ --color-bar-track: #edeff2; --color-bar-band-2: #e0e4ea; --color-bar-band-3: #ccd3dd; /* S2 test hub (Phase 6.8) -- a pale accent wash for the "pick up where you left off" callout background, distinct from --color-accent-light (which is reserved for the dashboard meter's "first attempt" stroke). */ --color-accent-wash: #eef3ff; /* S1 masthead mark (Phase 6.11) -- a fixed navy/gold pair for the personal wordmark accent, deliberately distinct from --color-accent so the mark never reads as a clickable link. */ --color-mark-navy: #12294f; --color-mark-gold: #c9a227; } html { color-scheme: light; /* Stop iOS's text autosizing. When a block of text is laid out wider than the screen, WebKit on iPhone decides the page wasn't built for phones and inflates that block's font size -- so one overflowing card rendered its description at nearly twice the size of the card beside it (seen in the iOS app, 2026-09-18). This only switches off that guesswork: a reader's own text-size setting still applies (N-19). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: 1.5; } /* Type scale for tablets and desktops (N-19). Every size in this sheet is in `rem` and `main` is a 40rem column, so raising the root size scales the whole layout -- text, spacing, and the reading column -- from one knob, with no per-rule tuning. Phones are deliberately untouched: at 16px the column already fills the screen. Percentages rather than px, so a reader who has raised their browser's default text size keeps that increase on top of these steps -- setting px here would silently override that accessibility preference. The breakpoints are in rem, which a media query always resolves against the browser's default font size, never against the value set inside the query. No feedback loop: 48rem/64rem mean 768px/1024px whatever :root says below. */ @media (min-width: 48rem) { :root { font-size: 112.5%; /* 18px from a 16px default -- iPad portrait */ } } @media (min-width: 64rem) { :root { font-size: 125%; /* 20px -- iPad landscape, desktop browsers */ } } main { max-width: 40rem; margin: 0 auto; padding: 1.5rem; } /* `format: "code"` content (issue #45, 5652's pseudocode) -- js/reference-panel.js's renderContent wraps it in 
. overflow-x: auto on the block itself, not the
   page, so a long unwrapped line scrolls just the block (same finding-#17 reasoning as
   the periodic-table grid above). Scoped to the single 
 every page has, since
   this is the app's first real `
` usage outside a reference/teaching panel. */
main pre {
  overflow-x: auto;
  margin: 0.5rem 0;
  padding: 0.6rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* #question-fieldset/#study-fieldset (run.html) use a real  for the question
   stem so the fieldset's accessible name comes from it natively (Phase 3.4) -- but
   browsers only reserve border space for a legend's first line, so any wrapped lines
   on a long word problem spilled out above the box instead of inside it (session
   owner finding, live-testing). `float: left; width: 100%` is the standard fix: it
   makes the browser lay the legend out as a normal block inside the fieldset's border
   rather than straddling it, so a stem of any length wraps fully inside the box next
   to the options below it. */
#question-stem,
#study-stem {
  float: left;
  width: 100%;
}

a {
  color: var(--color-accent);
}

/* S2's test-menu nav (test.html) is the only place several sibling  links get
   appended directly with no wrapping 
  • /block markup between them -- a bare