/* ==========================================================================
   CHASSIS base — reset, ground, typography, controls
   ========================================================================== */

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

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-400) transparent;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--ink-050);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The ground: brushed grain + a slow environmental drift + the lamp itself.
   Three layers, all GPU-composited, none of them animating layout. */
body::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: var(--z-substrate);
  pointer-events: none;
  background:
    radial-gradient(
      var(--lamp-reach) var(--lamp-reach) at var(--lamp-x) var(--lamp-y),
      color-mix(in oklab, var(--sig-brand) 7%, transparent) 0%,
      color-mix(in oklab, var(--sig-cool) 3%, transparent) 38%,
      transparent 72%
    ),
    radial-gradient(120vmax 80vmax at 84% 108%, color-mix(in oklab, var(--sig-mind) 5%, transparent), transparent 60%),
    linear-gradient(178deg, var(--ink-050) 0%, var(--ink-100) 46%, var(--ink-000) 100%);
  transition: background-position var(--m-drift) linear;
}

/* Machined grain — two crossing hairline gratings at very low alpha. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-substrate);
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(92deg, color-mix(in oklab, #fff 1.6%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(2deg, color-mix(in oklab, #000 3%, transparent) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}

:root[data-chassis="day"] body::after { opacity: 0.32; mix-blend-mode: multiply; }

h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}

button { cursor: pointer; }

svg { display: block; }

canvas { display: block; }

::selection {
  background: color-mix(in oklab, var(--sig-brand) 30%, transparent);
  color: var(--ink-999);
}

:focus-visible {
  outline: 1px solid color-mix(in oklab, var(--sig-brand) 70%, transparent);
  outline-offset: 2px;
}

/* ---- scrollbars: hairline rails, never chrome ------------------------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink-400) 70%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-500); background-clip: content-box; }

/* ---- typographic roles ------------------------------------------------ */

.t-label {
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-600);
  font-weight: 500;
}

.t-micro {
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.t-display {
  font-size: var(--t-display);
  letter-spacing: var(--track-tight);
  line-height: 1.02;
  font-weight: 460;
  color: var(--ink-999);
}

.t-hero {
  font-size: var(--t-hero);
  letter-spacing: -0.035em;
  line-height: 0.94;
  font-weight: 450;
  color: var(--ink-999);
}

.t-title {
  font-size: var(--t-title);
  letter-spacing: -0.02em;
  line-height: 1.14;
  font-weight: 470;
  color: var(--ink-999);
}

.t-sub {
  font-size: var(--t-sub);
  letter-spacing: -0.012em;
  line-height: 1.3;
  font-weight: 460;
  color: var(--ink-900);
}

.t-lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-700);
}

.t-body { font-size: var(--t-body); color: var(--ink-700); }
.t-small { font-size: var(--t-small); color: var(--ink-600); }
.t-dim { color: var(--ink-600); }
.t-bright { color: var(--ink-999); }

/* Every number in the product is tabular and slashed-zero. Columns of
   figures must align optically or the instrument reads as a toy. */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -0.015em;
  font-feature-settings: "zero" 1;
}

.num-lg { font-size: var(--t-sub); font-weight: 500; color: var(--ink-999); }
.num-xl { font-size: var(--t-title); font-weight: 500; color: var(--ink-999); }

.gain { color: var(--sig-gain); }
.loss { color: var(--sig-loss); }
.warn { color: var(--sig-warn); }
.mind { color: var(--sig-mind); }
.brand { color: var(--sig-brand); }
.cool { color: var(--sig-cool); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }