/* ==========================================================================
   WAVE 4 PAGES — pages_onboarding, pages_keys, pages_source_health, pages_a11y
   --------------------------------------------------------------------------
   WHY ONE SHEET, AND WHY IT SELECTS ON SUFFIXES

   Four modules, one convention. Every class in them is hyphen-free camelCase
   with a three-or-four letter package prefix and a MEANINGFUL SUFFIX —
   pobPanel, pkyRowLabel, pshFactVal, paccGapWhat. A sheet keyed to those
   suffixes therefore covers all four modules, and any page written to the same
   convention later, in about forty rules rather than two hundred names.

   The hyphen-free naming is load-bearing, not taste. obsidian_orchid.css
   matches [class*="-chip"], [class*="-status"], [class*="-pane"] and applies
   text-transform: uppercase !important to [class$="-title"], [class$="-label"]
   and four more. A camelCase name is unmatchable by that entire family BY
   CONSTRUCTION. The flip side — and the reason this file has to exist — is that
   these pages inherit nothing from the component vocabulary either.

   SCOPED TO #page-root. The terminal renders into #terminal-root and has its
   own layers; nothing here can reach it. Every selector below carries the
   scope, which is also what tests/test_wave4_y8.py asserts.

   COLOUR, TYPE AND SPACING COME FROM static/instrument.css TOKENS. No raw hex,
   and no invented token names either: --i-hair / --i-hair-strong /
   --i-r-card / --i-r-control are the real spellings. A var() naming a token
   this build does not define, with no fallback, drops the whole declaration at
   parse time and leaves the element unstyled rather than obviously wrong.

   THE TOUR AND THE CHECKLIST ARE NOT STYLED HERE. Both mount inside the
   TERMINAL, which loads no page stylesheet, so pages_onboarding.js styles them
   from tokens via inline style. Only their /onboarding-page appearance is this
   file's business.
   ========================================================================== */

/* THIS SHEET IS IN PAGE_SHEETS — it loads on ALL 37 non-terminal pages, not
   just wave 4's four. That makes the #page-root rule the most far-reaching
   selector in the package, and it used to read
   `max-width: 1120px; margin: 0 auto; padding: 0 18px 96px`.

   #page-root is the OUTERMOST element: page_kit.mountPage builds
   `#app-root.pk-page > main.pk-main` inside it, and .pk-page carries the sticky
   masthead and the footer, both of which are designed to bleed the full width
   of the viewport. Constraining #page-root therefore clipped the masthead's
   bottom hairline and the footer's top hairline to 1120px on EVERY page —
   including the landing page, whose own `.lndMain { max-width: 1220px }` could
   never be reached — inset both by 18px, and hung 96px of empty ground under
   the footer. The content column is .pk-main's job (pages.css: 1180px, 24px
   gutters). Only the custom properties belong at this level, where the suffix
   rules below inherit them. */
#page-root {
  --w4-gap: 16px;
  --w4-pad: clamp(16px, 2.2vw, 24px);
}

/* ---- structure ---------------------------------------------------------- */

#page-root [class$="Page"] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#page-root [class*="Panel"]:not([class*="PanelHead"]):not([class*="PanelNote"]):not([class*="PanelActions"]):not([class*="PanelBody"]),
#page-root [class$="Section"],
#page-root [class$="Card"] {
  background: var(--i-surface-1);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  padding: var(--w4-pad);
  box-shadow: var(--i-elev-1);
}

/* A nested surface must not restate the frame, or panels grow visible rings. */
#page-root [class*="Panel"] [class$="Card"],
#page-root [class$="Section"] [class*="Panel"] {
  background: var(--i-surface-2);
  box-shadow: none;
  padding: calc(var(--w4-pad) * 0.7);
}

#page-root [class*="Head"]:not([class*="Heading"]) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#page-root [class$="Grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--w4-gap);
}

#page-root [class$="List"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- type --------------------------------------------------------------- */

#page-root h1 {
  font-size: var(--i-t-xl);
  line-height: var(--i-lh-tight);
  letter-spacing: var(--i-track-tight);
  color: var(--i-ink-1);
  margin: 0;
}

#page-root h2 {
  font-size: var(--i-t-md);
  line-height: var(--i-lh-snug);
  color: var(--i-ink-1);
  margin: 0;
}

#page-root h3 {
  font-size: var(--i-t-body);
  color: var(--i-ink-1);
  margin: 0 0 4px;
}

#page-root [class$="Eyebrow"],
#page-root [class$="Kicker"] {
  display: block;
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
  margin-bottom: 6px;
}

#page-root [class$="Note"],
#page-root [class$="Detail"],
#page-root [class$="Evidence"],
#page-root [class$="Hint"] {
  font-size: var(--i-t-sm);
  line-height: var(--i-lh-body);
  color: var(--i-ink-3);
  margin: 10px 0 0;
}

#page-root [class$="Evidence"] {
  font-size: var(--i-t-xs);
  color: var(--i-ink-4);
}

#page-root [class$="Lede"] {
  font-size: var(--i-t-md);
  line-height: var(--i-lh-body);
  color: var(--i-ink-2);
  max-width: var(--i-measure);
  margin: 0;
}

#page-root [class$="Blocked"] {
  font-size: var(--i-t-sm);
  line-height: var(--i-lh-body);
  color: var(--i-ink-2);
  border-left: 2px solid var(--i-amber);
  padding-left: 10px;
  margin: 8px 0 0;
}

/* ---- fact lists (dl) ---------------------------------------------------- */

#page-root [class$="Facts"] {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
}

#page-root [class$="FactKey"] {
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
}

#page-root [class$="FactVal"] {
  font-size: var(--i-t-body);
  color: var(--i-ink-2);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- rows --------------------------------------------------------------- */

/* TWO EXCLUSIONS ADDED, AND BOTH WERE VISIBLE ON THE LANDING PAGE.
   `[class*="Row"]` cannot tell a component from its CONTAINER, and it cannot
   tell one package's vocabulary from another's.

   · `Rows` — the plural. `.lndBoardRows` is the container the board's rows sit
     IN, and this rule turned it into a flex ROW, so the live watchlist
     rendered AAPL and MSFT side by side on one line instead of stacked.
     Measured on the live DOM: two .lndBoardRow children at the same y, at
     x=752 and x=1031. skin.css already carries the hyphenated half of this
     exclusion — `:not([class*="-rows"])` — and this is the camelCase half it
     was missing. Same shape as the `[class*="-empty"]` matching `is-empty`
     hazard: a substring test cannot see a plural or a state.

   · `lnd` — the landing page has its own sheet and its own vocabulary.
     `.lndBoardRow` is declared `display: grid` with four named columns in
     landing.css, and this rule flattened it. A page-shell rule keyed to wave
     4's naming convention has no business reaching a package that does not
     follow it.

   Both are `:not()`, so these elements stop MATCHING rather than being
   out-specified — no later rule has to win a specificity race it cannot win.
   `#page-root [class*="Row"]:not(…×5)` scores (1,6,0); a component's own
   `.lndBoardRow` at (0,1,0) could never have beaten it. */
#page-root [class*="Row"]:not([class*="RowLabel"]):not([class*="RowDetail"]):not([class*="RowMain"]):not([class*="RowEvidence"]):not([class*="RowBlocked"]):not([class*="Rows"]):not([class^="lnd"]) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--i-hair);
}

#page-root [class$="List"] > [class*="Row"]:first-child {
  border-top: 0;
}

#page-root [class$="RowMain"] {
  flex: 1 1 auto;
  min-width: 0;
}

#page-root [class$="RowLabel"] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--i-t-body);
  color: var(--i-ink-1);
}

/* ---- controls ----------------------------------------------------------- */

#page-root [class*="Btn"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--i-t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* WCAG 2.2 2.5.8 asks for 24x24. 30px of box at this font size clears it. */
  min-height: 30px;
  padding: 7px 12px;
  border-radius: var(--i-r-control);
  border: 1px solid var(--i-hair-strong);
  background: var(--i-control-bg);
  color: var(--i-ink-2);
  transition: background var(--i-dur-fast) var(--i-ease-out);
}

#page-root [class*="Btn"]:hover {
  background: var(--i-control-bg-hover);
  color: var(--i-ink-1);
}

#page-root [class*="BtnPrimary"] {
  border-color: var(--i-orchid);
  background: var(--i-orchid);
  color: var(--i-void);
}

#page-root [class*="BtnPrimary"]:hover {
  background: var(--i-orchid-bright);
  color: var(--i-void);
}

#page-root [class*="Btn"][disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

#page-root [class$="Actions"] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

/* ---- chips and states --------------------------------------------------- */

#page-root [class*="Chip"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--i-r-pill);
  border: 1px solid var(--i-hair-strong);
  background: var(--i-surface-2);
  color: var(--i-ink-3);
}

/* The four outcome tones. `data-state` is written only from a measured result;
   a target nobody has checked carries no data-state at all and stays neutral,
   which is the whole point of items 59 and 60. */
#page-root [class*="Chip"][data-state="ok"] {
  border-color: var(--i-bull);
  color: var(--i-bull);
  background: var(--i-bull-wash);
}

#page-root [class*="Chip"][data-state="bad"] {
  border-color: var(--i-bear);
  color: var(--i-bear);
  background: var(--i-bear-wash);
}

#page-root [class*="Chip"][data-state="warn"] {
  border-color: var(--i-amber);
  color: var(--i-amber);
  background: var(--i-amber-wash);
}

#page-root [class*="Chip"][data-state="unknown"] {
  border-style: dashed;
  color: var(--i-ink-4);
}

/* ---- the empty state (M32) ---------------------------------------------- */

#page-root [class$="Empty"] {
  border: 1px dashed var(--i-hair-strong);
  border-radius: var(--i-r-card);
  background: var(--i-surface-2);
  padding: 22px;
  text-align: left;
}

#page-root [class$="EmptyTitle"] {
  font-size: var(--i-t-md);
  color: var(--i-ink-1);
  margin-bottom: 6px;
}

#page-root [class$="EmptyBody"] {
  font-size: var(--i-t-body);
  line-height: var(--i-lh-body);
  color: var(--i-ink-3);
  max-width: var(--i-measure);
  margin: 0;
}

#page-root [class$="EmptyActions"] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---- monospace fragments ------------------------------------------------ */

/* Named ...Mono, never `mono` and never `-mono`: instrument.css repaints both
   of those with color: var(--i-ink-1) !important, which would silently undo
   the ink-3 below. */
#page-root [class$="Mono"],
#page-root [class$="Anchor"],
#page-root [class$="Url"] {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--i-t-sm);
  color: var(--i-ink-3);
  overflow-wrap: anywhere;
}

/* ---- focus -------------------------------------------------------------- */

#page-root a:focus-visible,
#page-root button:focus-visible,
#page-root [tabindex]:focus-visible {
  outline: 2px solid var(--i-orchid-bright);
  outline-offset: 2px;
  border-radius: var(--i-r-control);
}

/* ---- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #page-root * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ---- narrow ------------------------------------------------------------- */

@media (max-width: 720px) {
  #page-root {
    padding: 0 12px 72px;
  }
  #page-root [class$="Facts"] {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  #page-root [class$="FactVal"] {
    margin-bottom: 8px;
  }
  #page-root [class*="Row"]:not([class*="RowLabel"]):not([class*="RowDetail"]):not([class*="RowMain"]):not([class*="RowEvidence"]):not([class*="RowBlocked"]) {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   THE TOKEN REFERENCE AND THE ACCENT TABLE (menu items 441, 452)

   TWO RULES, AND ONLY THE ONES THAT NEED GEOMETRY. Every other class on
   /accessibility is deliberately unstyled — the page shells treat a `.paccPanel`
   as a panel through their generic rules, which is the point of hazard 9 and
   why this page has never carried a stylesheet of its own. A colour chip is
   the exception: with no size it is a zero-width span, and the reader sees a
   table of hex codes with nothing to compare them against.
   ========================================================================== */

#page-root [class][class].paccSwatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  /* A CHIP RADIUS, HALVED. `--i-r-chip` is 7px, which on an 18px square reads
     as a lozenge rather than a swatch; the token is still the source, so a
     retune of the radius scale reaches this. A literal 3px was the first
     version and `tests/test_design_drift.py` caught it as token drift. */
  border-radius: calc(var(--i-r-chip) / 2);
  vertical-align: middle;
  /* AN OUTLINE, NOT A BORDER. skin.css §3's purge nulls `border` on every
     classed element at a specificity nothing honest beats (hazard 24), and a
     swatch with no edge is invisible against a ground of its own colour —
     which is exactly the case a reader is checking. */
  outline: 1px solid var(--i-line);
  outline-offset: -1px;
}

#page-root [class][class].paccMono {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}