/* Base reset + a11y primitives (adapted from bonnot). */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; font-family: var(--font-ui); line-height: 1.5;
  background: var(--surface-base); color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: var(--heading-letter-spacing); }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* The UA stylesheet gives fieldset `min-inline-size: min-content`, so a fieldset
   is never narrower than its widest content. That silently defeats any
   overflow-x:auto box nested inside one: the scroll container is sized by its
   parent, so if the parent has already inflated to content width there is
   nothing left to scroll and the overflow escapes to the page instead. The
   grid questions wrap their .multigrid-scroll / .choicegrid-scroll in
   <form><fieldset> (to disable the whole widget in one attribute), so a wide
   grid pushed the document sideways on mobile. Reset it globally — no layout in
   this app wants a fieldset to outgrow its column. */
fieldset { min-inline-size: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}