/* ==========================================================================
   Elysium Deep — tokens and components for the mine (docs/THEME.md is the spec)
   Black canvas, charcoal cards without borders or shadows, four accents as solid fills,
   Geist + IBM Plex Mono, one warm-paper block per page, pills for every control.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #000000;
  --surface: #232324;
  --surface-2: #2B2B2D;
  --surface-3: #343437;
  --footer: #1C1C1D;
  --paper: oklch(98% 0.003 95);
  --paper-deep: oklch(94% 0.015 95);
  --paper-shade: oklch(91% 0.010 95);
  --ink: #0B0B0C;
  --ink-muted: rgba(11, 11, 12, 0.72);
  --ink-faint: rgba(11, 11, 12, 0.52);

  /* accents: solid fills only */
  --mint: #6FE3C1;
  --mint-press: #57D3AE;
  --violet: #8A7CFF;
  --violet-press: #7A6BF0;
  --lime: #CAF255;
  --lime-press: #B8E23C;
  --coral: #FF8E80;
  --coral-press: #F57A6B;
  --aurora: linear-gradient(90deg, #6FE3C1, #8A7CFF);

  /* text */
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.70);
  --text-faint: rgba(255, 255, 255, 0.50);
  --text-ghost: rgba(255, 255, 255, 0.28);
  --negative: #FF5A5A;
  --warn: #F2D48A;

  /* lines: inside cards only */
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-hover: rgba(255, 255, 255, 0.32);
  --line-paper: rgba(11, 11, 12, 0.16);

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* type */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(44px, 5.4vw, 74px);
  --fs-h2: clamp(36px, 3.8vw, 52px);
  --fs-h3: clamp(28px, 2.8vw, 38px);
  --fs-h4: clamp(20px, 1.8vw, 24px);
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 11px;
  --lh-display: 1.02;
  --lh-h2: 1.08;
  --lh-h3: 1.12;
  --lh-h4: 1.25;
  --lh-body: 1.6;
  --tr-display: -0.045em;
  --tr-h2: -0.04em;
  --tr-h3: -0.03em;
  --tr-h4: -0.02em;
  --tr-eyebrow: 0.18em;

  /* layout */
  --container: 1272px;
  --gutter: 56px;
  --section-y: 120px;
  --head-gap: 56px;
  --nav-h: 64px;
  --card-gap: 16px;
  --card-pad: 24px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;
  --shadow-float: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
}
@media (max-width: 1023px) {
  :root { --gutter: 40px; --section-y: 88px; --head-gap: 44px; }
}
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 72px; --head-gap: 36px; --card-gap: 12px; --card-pad: 20px; --fs-lead: 17px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 32px); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--mint); color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mono, .num, code, kbd { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
code { font-size: 0.92em; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); }
.small { font-size: var(--fs-sm); line-height: 1.55; }
.caption { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-faint); }
.clause { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.link { text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.link:hover { text-decoration-color: var(--text); }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section-head { display: grid; justify-items: center; text-align: center; gap: 16px; margin: 0 auto var(--head-gap); max-width: 720px; }
.section-head p { max-width: 480px; color: var(--text-muted); }
.section-head--left { justify-items: start; text-align: left; margin-inline: 0; }
.grid { display: grid; gap: var(--card-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }
@media (max-width: 1023px) { .span-3, .span-4, .span-5 { grid-column: span 6; } .span-7, .span-8, .span-9 { grid-column: 1 / -1; } }
@media (max-width: 767px) { .grid > [class*="span-"] { grid-column: 1 / -1; } }

/* ---------- eyebrow: dash then tracked mono caps ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; line-height: 1.6;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-faint);
}
.eyebrow::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: 0.8; flex: none; }
.eyebrow--mint { color: var(--mint); }

/* ---------- nav pill ---------- */
.nav-wrap { position: sticky; top: 16px; z-index: 50; padding-inline: 16px; }
.nav {
  max-width: calc(var(--container) + var(--gutter) * 2 - 32px); margin-inline: auto; height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 10px 0 20px; background: var(--surface); border-radius: var(--r-xl);
}
.nav-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 20px; letter-spacing: -0.03em; }
.nav-brand .mark { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(from 210deg, var(--mint), var(--violet), var(--lime), var(--coral), var(--mint)); flex: none; }
.nav-brand small { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-left: 4px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 500; color: var(--text-muted); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a[aria-current] { color: var(--text); background: var(--surface-3); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; }
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-burger { display: inline-grid; }
  .nav-brand small { display: none; }
  .nav.is-open .nav-links { display: grid; position: absolute; left: 0; right: 0; top: calc(100% + 8px); padding: 8px; background: var(--surface); border-radius: var(--r-xl); gap: 2px; }
  .nav.is-open .nav-links a { height: 48px; }
  .nav-wrap { position: sticky; }
  .nav { position: relative; }
}

/* ---------- buttons: every control is a pill ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border: 0; border-radius: var(--r-full); cursor: pointer; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); background: var(--surface-3);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--line-hover); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--text); color: var(--ink); }
.btn--primary:hover { background: var(--mint); }
.btn--accent { background: var(--mint); color: var(--ink); }
.btn--accent:hover { background: var(--mint-press); }
.btn--violet { background: var(--violet); color: var(--ink); }
.btn--violet:hover { background: var(--violet-press); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-press); }
.btn--danger { background: var(--coral); color: var(--ink); }
.btn--danger:hover { background: var(--coral-press); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-hover); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #1E1E20; }
.btn--lg { height: 52px; padding: 0 26px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 11px; }
.btn--icon { width: 40px; height: 40px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text); white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-ghost); flex: none; }
.pill--plain::before { display: none; }
.pill--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.pill--mint { background: var(--mint); color: var(--ink); } .pill--mint::before { background: var(--ink); }
.pill--violet { background: var(--violet); color: var(--ink); } .pill--violet::before { background: var(--ink); }
.pill--lime { background: var(--lime); color: var(--ink); } .pill--lime::before { background: var(--ink); }
.pill--coral { background: var(--coral); color: var(--ink); } .pill--coral::before { background: var(--ink); }
.pill--live::before { background: var(--mint); box-shadow: 0 0 0 3px rgba(111, 227, 193, 0.18); animation: breathe 2.4s ease-in-out infinite; }
.pill--sealed::before { background: var(--violet); }
.pill--off::before { background: var(--text-ghost); }
@keyframes breathe { 50% { box-shadow: 0 0 0 1px rgba(111, 227, 193, 0.1); } }

/* ---------- cards ---------- */
.card { position: relative; background: var(--surface); border-radius: var(--r-xl); padding: var(--card-pad); color: var(--text); overflow: hidden; min-width: 0; }
.card--hover { transition: background-color 200ms var(--ease); }
.card--hover:hover { background: var(--surface-2); }
.card--2 { background: var(--surface-2); }
.card--mint { background: var(--mint); color: var(--ink); }
.card--violet { background: var(--violet); color: var(--ink); }
.card--lime { background: var(--lime); color: var(--ink); }
.card--coral { background: var(--coral); color: var(--ink); }
.card--paper { background: var(--paper); color: var(--ink); }
.card--mint, .card--violet, .card--lime, .card--coral, .card--paper { --text: var(--ink); --text-muted: var(--ink-muted); --text-faint: var(--ink-faint); --text-ghost: rgba(11, 11, 12, .32); --line: var(--line-paper); --line-strong: rgba(11, 11, 12, .22); --surface-3: rgba(11, 11, 12, .08); }
.card--mint h1, .card--mint h2, .card--mint h3, .card--mint h4, .card--violet h1, .card--violet h2, .card--violet h3, .card--violet h4,
.card--lime h1, .card--lime h2, .card--lime h3, .card--lime h4, .card--coral h1, .card--coral h2, .card--coral h3, .card--coral h4,
.card--paper h1, .card--paper h2, .card--paper h3, .card--paper h4 { color: var(--ink); }
.card--paper .panel { background: var(--paper-deep); }
.card--paper :focus-visible { outline-color: var(--ink); }
.card--paper ::selection { background: var(--ink); color: var(--paper); }
.card > .eyebrow { margin-bottom: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel { background: var(--surface-2); border-radius: var(--r-lg); padding: 18px 20px; }
.card--mint .panel, .card--violet .panel, .card--lime .panel, .card--coral .panel { background: rgba(11, 11, 12, 0.08); }

/* big numeral inside a card */
.numeral { font-weight: 600; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.numeral small { font-size: 0.42em; font-weight: 500; letter-spacing: -0.02em; margin-left: 6px; color: var(--text-muted); }

/* stat tile */
.stat { display: grid; gap: 8px; align-content: start; }
.stat .v { font-weight: 600; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .v.mono { font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); }
.stat .n { font-size: var(--fs-xs); color: var(--text-faint); }

/* key/value rows */
.kv { margin: 0; }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; text-align: right; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv dd.mono { font-size: 13px; }
.kv--loose > div { padding: 18px 0; font-size: var(--fs-body); }

/* data list rows (feeds, history) */
.rows { display: grid; gap: 8px; }
.row { display: grid; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--surface-2); font-size: var(--fs-sm); }
.row.is-new { animation: rowin 600ms var(--ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- accordion ---------- */
.faq { display: grid; gap: 12px; }
.faq-item { border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: background-color 200ms var(--ease); }
.faq-q { display: grid; grid-template-columns: 40px minmax(0, 1fr) 30px; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; background: none; border: 0; text-align: left; cursor: pointer; font-size: var(--fs-body); font-weight: 500; color: var(--text); }
.faq-q .n { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.faq-q .ic { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); justify-self: end; }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 1.5px; background: var(--text); transform: translateY(-50%); transition: transform var(--dur-base) var(--ease); }
.faq-q .ic::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.is-open { background: var(--mint); }
.faq-item.is-open .faq-q { color: var(--ink); }
.faq-item.is-open .faq-q .n { color: var(--ink-faint); }
.faq-item.is-open .faq-q .ic { background: var(--ink); }
.faq-item.is-open .faq-q .ic::before, .faq-item.is-open .faq-q .ic::after { background: var(--mint); }
.faq-item.is-open .faq-q .ic::after { transform: translateY(-50%) rotate(45deg); }
.faq-item.is-open .faq-q .ic::before { transform: translateY(-50%) rotate(-45deg); }
.faq-a { display: none; padding: 0 20px 22px 76px; font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-muted); max-width: 64ch; }
.faq-item.is-open .faq-a { display: block; }
@media (max-width: 767px) { .faq-q { grid-template-columns: 28px minmax(0, 1fr) 30px; gap: 12px; padding: 16px; } .faq-a { padding: 0 16px 18px 56px; } }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-faint); }
.input { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); }
.input input { flex: 1 1 auto; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-family: var(--font-mono); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); }
.input input::placeholder { color: var(--text-ghost); }
.input .unit { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--text-faint); }
.input:focus-within { box-shadow: inset 0 0 0 1px var(--mint); }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: var(--r-full); background: var(--surface-2); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-full); background: none; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--ink); }

/* ---------- backdrop: station + veil ---------- */
.stage { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--bg); }
.stage canvas { width: 100%; height: 100%; }
.stage.no-gl canvas { display: none; }
.stage.no-gl { background: var(--bg) url("assets/station-still.jpg") center / cover no-repeat; }
.stage-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(0, 0, 0, 0.72); }
html.no-bgfx .stage, html.no-bgfx .stage-veil { display: none; }

/* ---------- footer ---------- */
.footer { background: var(--footer); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: var(--section-y); padding: 56px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer .eyebrow { margin-bottom: 14px; }
.footer a { display: block; padding: 6px 0; font-size: var(--fs-sm); color: var(--text-faint); transition: color var(--dur-fast); }
.footer a:hover { color: var(--text); }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-faint); }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.breathe { animation: breathe 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .pill--live::before, .breathe, .row.is-new { animation: none; }
  .btn, .faq-q .ic::before, .faq-q .ic::after, .card--hover { transition: none; }
}

/* ---------- utilities ---------- */
.flex { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.addr { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.copy { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.copy:hover { color: var(--text); background: var(--line-hover); }
[data-stale] { opacity: 0.55; }