/* ============================================================================
   site-pages.css — the shared sheet for the pages rendered out of the design
   drop by `ui_kits/render-site-pages.py`.

   WHY IT IS SEPARATE FROM site-pairing-p2a.css. The served pairing sheet
   declares a deliberate 20-token SUBSET of the P2A study sheet. The study sheet
   the design sources were drawn against declares 32, and the extra twelve are
   not free: adding its `--hearth-text-muted` (#6E6A61) to a sheet every page
   loads lands 7 measured contrast findings at 4.20–4.44:1 on the `--sev-*-bg`,
   `--signal-*-bg` and `--status-down-bg` grounds that the ALREADY-SERVED pages
   use. Those grounds do not occur on the rendered pages, so the tokens are safe
   HERE and only here — hence a second sheet rather than a widened first one.
   (The canon already defines `--hearth-text-muted` and `--font-mono`, so
   neither is restated: taking the canon's values is what keeps this sheet clear
   of the finding.)

   WHY IT IS SEPARATE FROM site.css. site.css is the hand-authored kit — nav,
   hero, plan cards, the checkout modal. These pages share none of it; they are
   laid out entirely in the design's own inline styles. Loading site.css here
   would pull ~47 KB of rules that match nothing, and would put two different
   `.nav` definitions on one origin.

   The rules below are the ones that appeared VERBATIM in 17 or 18 of the 18
   design sources. They live here rather than in eighteen page <style> blocks so
   a correction lands once. The renderer drops them from each page as it goes
   (SHARED_SELECTORS / SHARED_RULES) — so if you edit a selector here, check
   that list, or the page will start shipping its own copy again.
   ========================================================================= */

:root {
  /* The ten tokens the pairing subset withholds, taken verbatim from the study
     sheet at Helix-Counter-Brand-And-Surfaces-Handoff/pairings/tokens/. */
  --signal-emphasis:   #27506B;
  --signal-link:       #27506B;
  --signal-healthy:    #23615A;
  --signal-healthy-bg: #DCEDEA;
  --signal-failure:    #A94E2E;
  --signal-failure-bg: #F7E7DE;
  --signal-meta:       #4B3E63;
  --signal-meta-bg:    #EBE7F1;
  --signal-marker:     #DCEDEA;
  /* Newsreader is drawn at its regular weight on these pages; the canon leaves
     the display weight to the surface, and every source states 400. */
  --font-display-weight: 400;

  --sans-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  background: var(--hearth-canvas);
  font-family: var(--font-sans);
  color: var(--hearth-text);
  -webkit-font-smoothing: antialiased;
}

/* Link colour is a signal token, not the accent: the accent on P2A is near-black
   ink, so an accent-coloured link would be invisible AS a link. */
a { color: var(--signal-link); text-decoration: none; }
a:hover { color: var(--hearth-text); }

.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1.3;
}

/* The two type shorthands the sources use inline: display face, mono face. */
.d { font-family: var(--font-display); font-weight: var(--font-display-weight); letter-spacing: -.018em; }
.m { font-family: var(--font-mono); }

/* The "More" menu is NOT defined here. It is identical on the hand-authored kit
   pages, which do not load this sheet, so it lives in `site-nav.css` and both
   sides link that. See its header for why it is CSS-only rather than scripted. */

/* ---- progressive enhancement contract (site-pages.js) --------------------
   NOTHING here hides content by default. Every panel a selector switches
   between is in the document and VISIBLE at rest; `site-pages.js` adds
   `data-hcjs` to <html> on load and only then does the stacked set collapse to
   one. A reader whose script fails gets every panel, stacked and readable —
   which is the never-blank rule applied to a tab strip, and the reason the
   selector buttons are inert rather than broken without JS. */
[data-hcopt] {
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  border-radius: var(--radius-lg);
  padding: 14px 13px;
  background: var(--hearth-canvas);
  border: 1px solid var(--hearth-border);
  transition: background 200ms cubic-bezier(.2, 0, 0, 1), border-color 200ms cubic-bezier(.2, 0, 0, 1);
}
[data-hcopt][aria-pressed="true"] {
  background: var(--hearth-sunken);
  border: 1.5px solid var(--hearth-border-strong);
}
/* Without a script the selectors cannot select, so they are not shown at all.
   The CONTENT they would have switched between is still there — every panel,
   every row, stacked and readable. Hiding an inert control is honest; leaving
   one that does nothing when clicked is not. */
html:not([data-hcjs]) [data-hcopt],
html:not([data-hcjs]) [data-hcnext],
html:not([data-hcjs]) [data-hcfilter],
html:not([data-hcjs]) [data-hcselect],
html:not([data-hcjs]) [data-hcsearch],
html:not([data-hcjs]) [data-chip],
html:not([data-hcjs]) .segmented { display: none !important; }

html[data-hcjs] [data-hcslot][hidden] { display: none !important; }

[data-chip] { cursor: pointer; }
