/* base.css — reset + layout primitives + a11y floor */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--accent-050), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); color: var(--ink); font-weight: 700; }
h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.015em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p { color: var(--ink-2); }
a { color: var(--accent-700); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Chemical and scientific typography, produced by shared/js/notation.js. Subscripts and
   superscripts are real elements rather than Unicode, because the faces this project ships
   carry no subscript digits and only ¹²³ of the superscripts (see the header comment in
   notation.js). The default UA styling for sub/sup uses `vertical-align: sub|super`, which
   grows the line box and makes a paragraph of formulas jump line to line; `position:
   relative` with an explicit offset moves the glyph without touching the line box, so
   H₂O sits inside a normal line of prose. */
sub, sup {
  font-size: .72em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-variant-numeric: normal;   /* tabular figures at .72em read as gaps */
}
sub { bottom: -.28em; }
sup { top: -.42em; }
/* A phase label is reference detail, not part of the formula, so it is quieter -- but quiet
   by INK, not by size. At .88em it landed at 12.4px inside Unit 10's console, where the
   surrounding chemistry sits at the shell's 14px instructional floor, and
   tests/unit5a-layout.test.mjs reported "(s)" and "(aq)" for exactly that reason. It was
   right to: (aq) versus (s) is the difference between a dissolved salt and a solid one, which
   is the chemistry of that bench rather than a footnote to it. The muted colour already
   carries "secondary" without spending legibility on it. */
.phase { color: var(--muted); padding-left: .06em; }

/* A nuclide prescript stacks the mass number over the atomic number in front of the symbol,
   which is how ²³⁵₉₂U is written. One inline-block cell, right-aligned so the two numbers
   share a right edge against the symbol, with the sub/sup rules above overridden back to
   block flow so they sit one above the other rather than side by side. */
.nuclide {
  display: inline-block;
  vertical-align: -.32em;
  text-align: right;
  margin-right: .08em;
}
.nuclide sup, .nuclide sub {
  display: block;
  position: static;
  top: auto; bottom: auto;
  font-size: .68em;
  line-height: 1.05;
}

/* The no-network TeX fallback uses the same semantic sub/sup elements as the
   chemistry renderer. Fractions remain compact and legible without switching
   fonts or enlarging the surrounding instructional line. */
.tex-frac {
  display: inline-grid;
  grid-template-rows: auto auto;
  min-width: 1.4ch;
  margin: 0 .08em;
  vertical-align: -.48em;
  text-align: center;
  line-height: 1.03;
}
.tex-frac-n { border-bottom: 1px solid currentColor; padding: 0 .08em .04em; }
.tex-frac-d { padding: .04em .08em 0; }
.tex-radical { white-space: nowrap; }
.tex-overbar { text-decoration: overline; text-decoration-thickness: 1px; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-700);
}
.muted { color: var(--muted); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }

/* Page shell + compact title block.
   Every page uses these instead of inline padding so the header area stays
   uniform: the sticky bar, a single-line title row, then content. The title
   and its TEKS context share one baseline row rather than stacking, which is
   what keeps the simulator inside the first screenful. */
.page-main { padding-top: var(--s-2); padding-bottom: var(--s-8); }
.page-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-2);
}
.page-head h1 { font-size: var(--fs-xl); letter-spacing: -.01em; }
.page-head .eyebrow { line-height: var(--lh-tight); }
/* The hub headline carries the whole site, so it keeps one step more scale. */
.page-head-hero h1 { font-size: var(--fs-2xl); }

.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }

.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.brand { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: var(--lh-tight); color: var(--ink); }
.brand .mark, .page-head h1 .mark {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  display: inline-grid; place-items: center; vertical-align: middle; color: #fff; font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-700));
  box-shadow: var(--shadow-sm);
}
.page-head h1 .mark { margin-right: var(--s-2); }

:focus-visible { outline: 3px solid var(--accent-300); outline-offset: 2px; border-radius: var(--r-sm); }

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

@media (max-width: 640px) {
  :root { --fs-3xl: 2.1rem; --fs-2xl: 1.65rem; --fs-xl: 1.3rem; }
  .wrap { padding: 0 var(--s-4); }

  /* Phones lose the most to a tall header, so the bar and the title row both
     drop a step and the brand stays on one line beside its control. */
  .site-header .wrap { flex-wrap: nowrap; }
  .brand { font-size: var(--fs-sm); min-width: 0; }
  .page-head h1 { font-size: var(--fs-lg); }
  /* The lead copy already explains Honors and Case File, so the legend keeps
     its chips and drops the descriptions rather than eating three rows. */
  .legend { gap: var(--s-3) !important; }
  .legend-note { display: none; }
}