/* base.css — reset, typography, and the shared screen primitives.
   Loaded after tokens.css so everything resolves against the brand tokens. */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Poppins' default line spacing is looser than Inter's; 1.4 keeps the dense screens (results,
     readiness) inside their height budgets without cramping the roomy onboarding screens. */
  line-height:1.4;
}

/* One heading scale for the whole app (Poppins, tight tracking).
   Colour is INHERITED, not set — so headings stay white on the dark navy panel and navy on
   white pages, exactly like before the extraction. Screens set their own display sizes. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:0}
h1{font-size:2.4rem}
h2{font-size:1.9rem}
h3{font-size:1.5rem}
h4{font-size:1.2rem}
p{margin:0}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-deep)}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* Screen router (flagship). Each [data-screen] section is toggled by .is-active. */
.screen{display:none;min-height:100vh}
.screen.is-active{display:block}
/* The live exam room fills the viewport but scrolls when its content is taller than the window
   (small laptops, larger OS text, Part 2 cue card + "examiner asked" both showing). */
.screen[data-screen="live"]{min-height:0}
.screen[data-screen="live"].is-active{height:100dvh;max-height:100dvh;overflow-y:auto;overflow-x:hidden}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}}