/* TOKEN NAMES CORRECTED, 2026-08-09.
   This sheet referenced four custom properties that do not exist:
   --i-hairline, --i-hairline-2, --i-radius-card, --i-radius-control. The real
   spellings in instrument.css are --i-hair, --i-hair-strong, --i-r-card,
   --i-r-control.

   Nothing looked broken, which is why it survived: every use carried a hex
   fallback, so the declarations resolved to the fallback and the page rendered.
   The cost was invisible — the fallbacks are the DARK theme's values baked in,
   so every border on these pages was pinned to a dark hairline and could not
   follow the light theme at all. A var() fallback silently doing the job is
   exactly what makes a misspelled token survive review.

   SECOND ROUND, SAME BUG, 2026-08-09 (package S3).
   A full var()-versus-definition diff of this sheet against every custom
   property defined anywhere under static/, frontend/, app/ and backend/ found
   ONE survivor: `--i-mono`, used five times, always as
   `var(--i-mono, ui-monospace, monospace)`. instrument.css defines no such
   token — the mono face is `--oo-font-data`. So every mnemonic, figure, code
   span, button label and chip on /watchlist, /portfolio, /screener, /compare,
   /calendar, /alerts, /search, /preferences and the meta pages was rendering in
   the platform's generic monospace (Consolas on this machine), NOT the
   self-hosted IBM Plex Mono the rest of the product uses. Tabular figures were
   the thing being paid for and the thing being lost. Fixed below.

   AND THE FALLBACKS ARE GONE. With the token names correct, every `#hex` in a
   var() fallback was unreachable code that also violated the one-token-layer
   rule the project runs on — 24 raw hexes, each one a dark-theme literal
   waiting to be reached by the next misspelling. A var() naming a token this
   build does define needs no fallback; a var() naming one it does not should
   fail loudly at parse time rather than quietly render the wrong colour.
*/
/* ==========================================================================
   WAVE 3 PAGES — shared presentation for pages_work, pages_surfaces, pages_meta
   --------------------------------------------------------------------------
   WHY ONE SHEET, AND WHY IT SELECTS ON SUFFIXES

   Three page modules ship 263 distinct class names between them. They are not
   arbitrary: every package used the same hyphen-free camelCase convention with
   a meaningful suffix — pwkPanel, psfSection, pmtRouteRow, psfFieldLabel. So a
   sheet keyed to those suffixes covers all three modules, and any page written
   to the same convention later, in about forty rules instead of 263.

   The hyphen-free naming is deliberate and load-bearing elsewhere:
   obsidian_orchid.css matches [class*="-panel"], [class$="-title"] and a dozen
   more, so a camelCase name is unmatchable by that whole family BY
   CONSTRUCTION. The flip side, and the reason this file has to exist, is that
   those pages therefore inherit nothing from the component vocabulary either.

   Scoped to #page-root so nothing here can reach the terminal, which renders
   into #terminal-root and has its own layers.

   Colour, type and spacing come from instrument.css tokens. No raw hex.
   ========================================================================== */

/* #page-root is the OUTERMOST element of the page shell — page_kit.mountPage
   builds `#app-root.pk-page > main.pk-main` inside it, and .pk-page carries the
   sticky masthead and the footer. This rule used to put `max-width: 1120px;
   margin: 0 auto; padding: 0 18px 96px` here, which clipped the full-bleed
   masthead and footer to 1120px on every wave-3 page and added 96px of dead
   space under the footer. The content column is .pk-main's job and always has
   been; only the custom properties belong at this level, where the suffix rules
   below can inherit them. */
#page-root {
  --w3-gap: 16px;
  --w3-pad: clamp(16px, 2.2vw, 24px);
}

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

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

#page-root [class*="Section"],
#page-root [class*="Panel"],
#page-root [class*="Tile"],
#page-root [class*="Rule"]:not([class*="RuleText"]):not([class*="RuleName"]),
#page-root [class*="Fire"]:not([class*="FireValue"]):not([class*="FireName"]):not([class*="FireTime"]) {
  background: var(--i-surface-1);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  padding: var(--w3-pad);
  box-shadow: var(--i-elev-1);
}

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

#page-root [class*="Head"] {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
#page-root [class*="HeadActions"],
#page-root [class*="PanelActions"],
#page-root [class*="Actions"] { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

#page-root [class*="Row"]:not([class*="RowMain"]) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--i-hair);
}
#page-root [class*="Row"]:last-child { border-bottom: 0; }

#page-root [class*="List"],
#page-root [class*="Rules"],
#page-root [class*="Results"],
#page-root [class*="Entries"],
#page-root [class*="Nodes"],
#page-root [class*="Chips"],
#page-root [class*="Filters"] { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }

#page-root [class*="Chips"],
#page-root [class*="Facets"],
#page-root [class*="Links"] { flex-direction: row; flex-wrap: wrap; }

#page-root [class*="Grid"],
#page-root [class*="Totals"],
#page-root [class*="Facts"],
#page-root [class*="Numbers"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--w3-gap);
}

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

/* Hierarchy by ratio, not by a 2px nudge: 38 / 19 / 15 is a step of ~2x then
   ~1.27x, so the level of a heading is legible from across the room rather
   than by comparison with the one above it. */
#page-root h1 {
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1.08;
  letter-spacing: var(--i-track-hero);
  color: var(--i-ink-1);
  margin: 0 0 8px;
  text-wrap: balance;
}
#page-root h2 {
  font-size: var(--i-t-lg);
  line-height: var(--i-lh-tight);
  letter-spacing: var(--i-track-tight);
  color: var(--i-ink-1);
  margin: 0;
}
#page-root h3 {
  font-size: var(--i-t-md);
  line-height: var(--i-lh-snug);
  color: var(--i-ink-1);
  margin: 0;
}
#page-root p {
  margin: 0 0 16px;
  max-width: var(--i-measure-wide);
  line-height: var(--i-lh-body);
  color: var(--i-ink-2);
}
#page-root p:last-child { margin-bottom: 0; }

#page-root [class*="Kicker"],
#page-root [class*="Label"],
#page-root [class*="SectionTitle"] {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
  font-weight: 600;
}

#page-root [class*="Note"],
#page-root [class*="Hint"],
#page-root [class*="Meta"],
#page-root [class*="Blurb"],
#page-root [class*="Detail"],
#page-root [class*="Explain"],
#page-root [class*="Ago"],
#page-root [class*="When"] { font-size: var(--i-t-sm); line-height: var(--i-lh-body); color: var(--i-ink-3); }

/* Figures: tabular so columns line up, and never `mono` as a class name —
   instrument.css repaints .mono with !important and would kill the sign
   colours below. Setting font-family directly is the documented way round it.
   --oo-font-data, NOT --i-mono: see the note at the top of this file. */
#page-root [class*="Value"],
#page-root [class*="Num"],
#page-root [class*="Count"],
#page-root [class*="Tally"],
#page-root [class*="Stat"] {
  font-family: var(--oo-font-data);
  font-variant-numeric: tabular-nums;
}
#page-root [class*="TileValue"],
#page-root [class*="StatValue"],
#page-root [class*="FireValueNum"] {
  font-size: var(--i-t-xl);
  font-weight: 600;
  letter-spacing: var(--i-track-tight);
  color: var(--i-ink-1);
  line-height: 1.1;
}

#page-root code,
#page-root [class*="Code"],
#page-root [class*="Contract"] {
  font-family: var(--oo-font-data);
  font-size: 0.88em;
  background: var(--i-surface-2);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-chip);
  padding: 1px 5px;
}
#page-root pre, #page-root [class*="Pre"] {
  overflow-x: auto;
  padding: 16px;
  border-radius: var(--i-r-control);
  border: 1px solid var(--i-hair);
  background: var(--i-surface-2);
  line-height: var(--i-lh-body);
}

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

#page-root [class*="Btn"],
#page-root [class*="Toggle"]:not([class*="ToggleText"]):not([class*="ToggleTrack"]) {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--i-control-bg);
  color: var(--i-ink-2);
  border: 1px solid var(--i-hair-strong);
  border-radius: var(--i-r-control);
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--i-dur-fast) var(--i-ease-out),
              border-color var(--i-dur-fast) var(--i-ease-out),
              color var(--i-dur-fast) var(--i-ease-out);
}
#page-root [class*="Btn"]:hover { color: var(--i-ink-1); background: var(--i-control-bg-hover); border-color: var(--i-accent-edge-soft); }
#page-root [class*="BtnPrimary"] { background: var(--i-orchid); border-color: var(--i-accent-edge); color: var(--i-ink-on-accent); }
#page-root [class*="BtnPrimary"]:hover { background: var(--i-orchid-bright); color: var(--i-void); }

#page-root [class*="Chip"] {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-xs);
  border-radius: var(--i-r-pill);
  padding: 4px 10px;
  border: 1px solid var(--i-hair);
  background: var(--i-surface-2);
  color: var(--i-ink-3);
}
#page-root [class*="ChipOn"],
#page-root [class*="FilterOn"] { border-color: var(--i-accent-edge); color: var(--i-orchid-bright); background: var(--i-orchid-wash); }

#page-root input, #page-root select, #page-root textarea,
#page-root [class*="Input"], #page-root [class*="Select"] {
  background: var(--i-field-bg);
  color: var(--i-ink-1);
  border: 1px solid var(--i-hair-strong);
  border-radius: var(--i-r-control);
  padding: 8px 11px;
  font: inherit;
}

/* The focus ring is an OUTLINE shorthand by contract. Redefining it as a
   box-shadow silently removes it everywhere, which is an accessibility
   regression rather than a cosmetic one. */
#page-root :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---- state -------------------------------------------------------------- */

#page-root [class*="Warn"],
#page-root [class*="Banner"],
#page-root [class*="Notice"] {
  border-left: 2px solid var(--i-amber);
  background: var(--i-surface-2);
  border-radius: 0 var(--i-r-control) var(--i-r-control) 0;
  padding: 14px 16px;
}
#page-root [class*="Bad"], #page-root [class*="Loss"], #page-root [class*="ProblemBad"] { color: var(--i-bear); }
#page-root [class*="Ok"], #page-root [class*="Good"] { color: var(--i-bull); }

/* An honest empty state is a first-class surface here, not an afterthought. */
#page-root [class*="Empty"],
#page-root [class*="Uneval"],
#page-root [class*="NoStream"],
#page-root [class*="Gap"]:not([class*="Gaps"]) {
  border: 1px dashed var(--i-hair-strong);
  border-radius: var(--i-r-card);
  padding: 24px;
  color: var(--i-ink-3);
}

#page-root table, #page-root [class*="Table"] { width: 100%; border-collapse: collapse; }
#page-root th {
  text-align: left;
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
  font-weight: 600;
}
#page-root th, #page-root td { padding: 8px 12px; border-bottom: 1px solid var(--i-hair); }
#page-root tbody tr:last-child td { border-bottom: 0; }
#page-root td[class*="Num"], #page-root td[class*="Val"] { text-align: right; font-variant-numeric: tabular-nums; }

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
#page-root [class*="Table"],
#page-root [class*="ApiList"],
#page-root [class*="Chart"] { overflow-x: auto; }

@media (max-width: 640px) {
  #page-root [class*="Row"]:not([class*="RowMain"]) { flex-wrap: wrap; }
  #page-root [class*="Grid"],
  #page-root [class*="Totals"],
  #page-root [class*="Facts"] { grid-template-columns: 1fr; }
}

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

/* --------------------------------------------------------------------------
   Items 544, 545, 555, 557 — search memory and keyboard selection.

   `.psfHitSelected` is an OUTLINE and not a background. skin.css's nested-fill
   purge nulls `background-color` at (1,18,0) !important on every classed
   element, so a fill here would be removed and the selection would be
   invisible — hazard 24, and `outline` is one of the three properties that
   rule does not name.
   -------------------------------------------------------------------------- */
.psfMemory { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.psfMemoryRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.psfMemoryLabel { font-size: var(--i-t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--i-ink-3); }
.psfMemoryNote { font-size: var(--i-t-xs); color: var(--i-ink-3); margin: 2px 0 0; }
.psfHitSelected { outline: 2px solid var(--i-accent, currentColor); outline-offset: 2px; }