/* ============================================================================
   Base — reset, document typography, browser surfaces, focus.

   "Browser surfaces" is the cheapest signal that a page was built rather than
   assembled: the text selection, the caret, the scrollbar, the focus ring and
   the numerals in tabular data all ship with defaults belonging to no design
   system. They are themed from the palette here, once.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Figures line up column-wise by default rather than per-cell. In a product
     where nearly every screen is a table of numbers, the opposite default is
     the one that needs justifying. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  /* Headings here are short labels for regions, not display copy. Balanced so
     a two-word heading never leaves one word alone on a second line. */
  text-wrap: balance;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: var(--hair) solid var(--rule);
  margin: 0;
}

/* --- links -----------------------------------------------------------------
   Quiet inside data, explicit on hover. A dense table where every ticker is a
   saturated underlined link reads as a wall of hyperlinks rather than as data. */
a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 30%, transparent);
  text-decoration-thickness: var(--hair);
  text-underline-offset: 2px;
}

/* --- browser surfaces ---------------------------------------------------- */

::selection {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

:root {
  accent-color: var(--accent);
  caret-color: var(--accent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
*::-webkit-scrollbar-corner { background: transparent; }

/* --- focus ---------------------------------------------------------------
   One ring, everywhere, keyboard-only. Two offsets exist because a ring drawn
   outside a table cell would be clipped by the scroll container, so cells draw
   theirs inside. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

:where(td, th) :where(a, button):focus-visible {
  outline-offset: 1px;
}

/* Never suppress the ring without replacing it. */
:focus:not(:focus-visible) { outline: none; }

/* --- prose ---------------------------------------------------------------
   The only place a measure applies. Everything else on this surface is data
   or a label. */
.note {
  margin: var(--s-2) 0 0;
  max-width: 74ch;
  color: var(--muted);
  font-size: var(--t-data);
}

.note code { color: var(--ink-2); }

.note a { color: var(--accent); }

/* --- utility ------------------------------------------------------------- */

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

.u-pos { color: var(--pos); }
.u-neg { color: var(--neg); }
/* Emitted by the Projection headline for a probability between a half and three
   quarters. It was emitted before it was defined, so that band rendered in
   default ink and read as though it were unremarkable. */
.u-warn { color: var(--warn); }

/* A label in the mono voice: uppercase, tracked, muted. Used for column
   headers, metric keys and section eyebrows-that-are-not-eyebrows (they label
   a data region, they do not introduce a heading). */
.u-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted);
}

.u-hide { display: none !important; }

/* Visible to a screen reader, absent from the layout. */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused, then a real control in the top-left. */
.skip {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-drawer);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: var(--hair) solid var(--rule-2);
  border-radius: var(--r);
  box-shadow: var(--lift);
  font-size: var(--t-data);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus-visible { transform: translateY(0); }

/* --- theme switch --------------------------------------------------------
   Colour transitions exist ONLY while the theme is being changed. The script
   stamps this attribute for 240ms around the switch and then removes it.

   Leaving these transitions on permanently is the obvious implementation and
   the wrong one: it puts a fade on every table-row hover in the product, and
   sweeping a cursor down a dense table then leaves a trail of half-lit rows.
   Scoping them to the one moment that needs them buys the crossfade without
   paying for it everywhere else. */
:root[data-theme-changing] *,
:root[data-theme-changing] *::before,
:root[data-theme-changing] *::after {
  transition: background-color 200ms ease, border-color 200ms ease,
              color 200ms ease, fill 200ms ease, stroke 200ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  /* The switch is instant. A colour crossfade is motion-safe in principle, but
     the script does not stamp the attribute under this preference anyway, so
     this is only here to make the intent unambiguous to the next reader. */
  :root[data-theme-changing] *,
  :root[data-theme-changing] *::before,
  :root[data-theme-changing] *::after { transition: none !important; }
}