/* base.css: page, type, form controls, focus, motion. */

*, *::before, *::after { box-sizing: border-box; }

/* v0.15: always keep the scrollbar's room, so a page that grows or shrinks past the window's
   height (search results, a section opening) never nudges the whole column sideways. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* The page: its color and a faint paper grain (v0.31: --grain, at the strength chosen in
   tokens.css / looks.css). Painted by the root, so it reaches every edge, the scrollbar's room
   included (v0.30's grain stopped at the body, leaving a lighter strip by the scrollbar). Dense
   text never sits on it: cards, sheets and dialogs are opaque. */
html { background-color: var(--bg); background-image: var(--grain); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 16px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* No grain where the system asks for more contrast or its own colors (V4 §5.8). */
@media (prefers-contrast: more), (forced-colors: active) {
  html { background-image: none; }
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.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;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.nojs { padding: 48px 24px; text-align: center; }