/* base.css — reset, document background, and the type base: body sets the
   size and everything else inherits it (see the long note below on why no bare
   element list may set font-size). */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg-color);
    background-image:
        radial-gradient(120% 80% at 50% -10%, var(--wash-machine) 0%, transparent 55%),
        radial-gradient(90% 70% at 92% 8%, var(--wash-command) 0%, transparent 50%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
    background-attachment: fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    letter-spacing: var(--track-body);
}

::selection { background: var(--selection); color: var(--heading-strong); }

/* The leading here is load-bearing and was not always declared. While the
   reset carried `p, div, span, … { line-height: 1.55 }`, headings were not
   in that list, so they fell through to `normal` — about 1.2 for Oswald —
   and looked right by accident. Moving leading onto `body` to fix the
   cascade made them INHERIT 1.6, which is prose leading on 18px uppercase
   condensed caps: a 28.8px line box on a two-line panel title. Display type
   sets its own leading, and now says so. */
h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--track-display);
    line-height: var(--leading-claim);
    text-transform: uppercase;
    color: var(--text-primary);
}

/* The base size lives on `body` and reaches everything else by
   INHERITANCE. It used to be set element-by-element —
   `p, div, span, li, label, … { font-size: var(--type-body) }` — and a matching rule
   always beats inheritance, so any bare <span> or <div> inside a
   container that had set its own size snapped straight back to 15px.
   The comment that used to sit here diagnosed exactly that and then
   opted two elements back in by hand. Measured at render time, thirteen
   more were still doing it: the whole status panel (11px intent), the
   classification strip and its overflow (11px), the moat readout (11px),
   the `// PERSONA` code tag (11px), the Pitch label (12px), the Adapt
   counter (13px), the rail stamp's Cyrillic (13px) — and "NeuroSync" in
   the wordmark itself, which is authored at 21px and rendered at 15px.
   A third of the small-type surface was not the size the design says.
   Form controls stay explicit: UA styles mean they do not inherit font
   from their ancestors, so they are the one place the element-level
   declaration is correct rather than a trap. */
body { font-size: var(--type-body); line-height: var(--leading-body); }
input, textarea, select, button { font-size: var(--type-body); line-height: var(--leading-body); }

.mono { font-family: var(--font-data); }
.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;
}

/* enforce mono only in technical readouts (matches the intent in src/) */
pre code, #radio-transcript-box, #ingest-status, code,
#theater-output, #action-log pre { font-family: var(--font-data) !important; }