/* ============================================================
   base.css — Reset, typography, page-level shell.
   Tokens come from tokens.css. No raw hex values here.
   ============================================================ */

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

html, body { background: var(--bg); margin: 0; padding: 0; }

body {
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sit a faint warm glow behind the scroll spine — purely decorative,
     never moves, never animates. */
  background:
    radial-gradient(circle at 12% 0%,  var(--glow-1) 0%, transparent 30%),
    radial-gradient(circle at 88% 18%, var(--glow-2) 0%, transparent 26%),
    var(--bg);
}

/* The type system is Lato throughout (--font-display and --font-body
   both resolve to Lato). `.display` headlines and the big `.figure`
   count-up numbers carry emphasis through weight + tracking, not a
   separate face. Lato ships 400/700/900 only (no 500/800), so
   headings step up to 900 for hierarchy. */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}
h1 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: clamp(18px, 2vw, 24px); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}

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

.dek {
  color: var(--muted);
  font-size: clamp(var(--text-md), 1.5vw, var(--text-lg));
  line-height: 1.55;
  max-width: var(--reading-width);
  margin: 0;
}

a { color: var(--primary-bright); text-decoration-color: var(--primary-soft); text-underline-offset: 3px; }
a:hover { color: var(--primary); }

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visually hidden but accessible to screen readers. We add `clip-path` so
   that wide descendants (e.g. an accessibility data-table for a chart)
   are truly contained and don't extend the document's horizontal scroll
   area on narrow viewports — the legacy `clip: rect()` only clips paint,
   not layout/scroll contribution. `max-width: 1px` ensures intrinsic-size
   children (tables, pre) can't push the absolute container wider. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  max-width: 1px; max-height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Page shell ────────────────────────────────────────── */

.ssc-section-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--header-fade);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.ssc-section-nav > * { pointer-events: auto; }
.ssc-section-nav .brand {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--text-md);
  letter-spacing: -0.005em;
  color: var(--text);
}
.ssc-section-nav .brand .edition { color: var(--primary); margin-left: var(--space-2); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; vertical-align: middle; }
.ssc-section-nav nav { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: flex-end; }
.ssc-section-nav nav a { font-size: var(--text-sm); color: var(--muted); text-decoration: none; white-space: nowrap; }
.ssc-section-nav nav a:hover { color: var(--primary-bright); }
.ssc-section-nav nav a[aria-current="page"] { color: var(--text); }

/* Narrow viewports — let the header reflow into two rows so the brand and
   nav never collide. Reduce padding so the fixed header doesn't eat too
   much vertical space, and shrink the brand text so "INRIX Signals
   Scorecard 2026" still reads on a single line on small phones. */
@media (max-width: 640px) {
  .ssc-section-nav {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .ssc-section-nav .brand {
    white-space: nowrap;
    font-size: var(--text-sm);
    min-width: 0;
  }
  .ssc-section-nav .brand .edition { font-size: 10px; letter-spacing: 0.14em; }
  .ssc-section-nav nav {
    flex-basis: 100%;
    justify-content: flex-start;
    gap: var(--space-4);
  }
  .ssc-section-nav nav a { font-size: var(--text-xs); }
}

.ssc-section-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-7) var(--space-6) var(--space-6);
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.ssc-section-footer .meta { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* ── Loading state ─────────────────────────────────────── */
#app:empty::before {
  content: "";
  display: block;
  height: 100vh;
}

/* ── Theme toggle (injected into the header nav by theme.js) ─ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--text); border-color: var(--primary-bright); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* Show the moon in dark mode (tap to go light), sun in light mode. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }