/* ============================================================
   Solar System — main.css
   Design tokens, reset, cosmic background (CSS fallback),
   typography, and themed browser surfaces.
   Palette + liquid glass from Reference #2. --accent is a
   PLACEHOLDER (solar amber); change one token to re-skin.
   ============================================================ */

:root {
  /* surfaces — deep teal / dark green-blue */
  --bg-void:  #08110f;
  --bg-deep:  #0a1e26;
  --bg-panel: #0c2a33;
  --teal-700: #0e3138;
  --teal-600: #12414a;
  --teal-400: #1e6e7e;
  --teal-300: #2a7d8c;

  /* text (tinted from the hue, never flat grey) */
  --text-hi:  #eaf1f1;
  --text-mid: #b7c9cb;
  --text-lo:  #8fa6a8;

  /* liquid glass */
  --glass-fill:       rgba(228, 246, 246, 0.045);
  --glass-hi:         rgba(228, 246, 246, 0.14);
  --glass-brd:        rgba(150, 205, 210, 0.16);
  --glass-brd-strong: rgba(150, 205, 210, 0.30);

  /* accent — PLACEHOLDER (solar amber ≙ the Sun); TBD by user */
  --accent:      #f5b942;
  --accent-warm: #ff9b3d;
  --accent-ink:  #241703;

  /* geometry */
  --r-card: 30px;
  --r-lg:   20px;
  --r-md:   14px;
  --r-sm:   10px;
  --r-pill: 999px;

  /* elevation — real offset + blur, never a flat halo */
  --shadow-card:  0 30px 80px -30px rgba(0,0,0,.75), 0 2px 0 0 var(--glass-hi) inset;
  --shadow-float: 0 18px 40px -18px rgba(0,0,0,.7);
  --shadow-soft:  0 10px 26px -12px rgba(0,0,0,.6);

  --ease:     cubic-bezier(.16,.84,.34,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-ui:      "Hanken Grotesk", system-ui, sans-serif;
  --font-serif:   "Spectral", Georgia, "Times New Roman", serif;

  --maxw: 1360px;
  --pad:  clamp(14px, 2.4vw, 34px);

  /* rhythm — shared vertical spacing scale for the landing sections */
  --space-section-y: clamp(96px, 12vh, 150px);
  --space-stack-lg:  clamp(28px, 4vw, 56px);
}

/* Typed custom property so the orrery's single --size var can be
   transitioned smoothly (Explorer mode + responsive breakpoints) without
   ever touching width/height directly — see .orrery in components.css. */
@property --size {
  syntax: "<length>";
  inherits: true;
  initial-value: 480px;
}

/* ── cross-document view transitions ────────────────────────
   Opening a planet morphs its map dot into the planet-page orb, so a click
   reads as flying IN to that world rather than a hard page reload. Both the
   landing and every planet page load this file, so both opt in; the matching
   element is named `planet-morph` on each end (js/solar-system.js on the map,
   css/planet.css on the orb). Unsupported browsers simply navigate; reduced
   motion collapses it to a plain cut. */
@view-transition { navigation: auto; }
::view-transition-group(planet-morph),
::view-transition-old(planet-morph),
::view-transition-new(planet-morph) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ── reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-ui);
  color: var(--text-hi);
  background: var(--bg-void);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
img, canvas { display: block; max-width: 100%; }
/* the hidden attribute must always win — several toggled elements carry a
   class display (.btn inline-flex, .readout__body / .fact-list grid) that
   would otherwise override [hidden]'s display:none and keep them visible. */
[hidden] { display: none !important; }
:where(h1, h2, h3, h4) { font-weight: 700; line-height: 1.05; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── themed browser surfaces (the cheap tell of a built page) ── */
::selection { background: rgba(245,185,66,.26); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--teal-600) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--teal-600); border-radius: 999px; border: 2px solid var(--bg-void); }
::-webkit-scrollbar-thumb:hover { background: var(--teal-400); }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 60;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-pill); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.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;
}

/* ── cosmic background ──────────────────────────────────────
   Layer order (all inside .cosmos, fixed, behind content):
   fallback CSS gradient  →  Velaris canvas (opaque when it runs)
   →  sparse stars overlay. If WebGL/JS is unavailable the canvas
   stays empty and the CSS fallback shows through.
   ------------------------------------------------------------ */
.cosmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.cosmos__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 82% 108%, var(--bg-deep) 0%, var(--bg-void) 58%),
    radial-gradient(60vw 60vw at 10% -10%, rgba(30,110,126,.28), transparent 70%),
    radial-gradient(55vw 55vw at 108% 112%, rgba(23,80,92,.24), transparent 72%);
}
.cosmos__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmos__stars {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 18% 32%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 72% 18%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 41% 71%, rgba(213,240,255,.8), transparent),
    radial-gradient(1px 1px at 86% 62%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 55% 46%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 12% 84%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 93% 88%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 32% 12%, rgba(255,255,255,.5), transparent);
}

/* ── layout helpers ─────────────────────────────────────── */
.stage { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: var(--pad); }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* ── typography scale ───────────────────────────────────── */
.eyebrow-none { display: none; } /* no kickers/eyebrows — banned */
.display {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: .98;
  text-wrap: balance;
}
.serif {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.04;
  text-wrap: balance;
}
.text-lo  { color: var(--text-lo); }
.text-mid { color: var(--text-mid); }

/* label style shared by widgets + meta */
.kicker-label {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-mid); font-weight: 600;
}
.tnum { font-variant-numeric: tabular-nums; }