/*
 * Quantum Prime Space design, for pages with `shell: space` (see DESIGN.md in quantumprime-space).
 *
 * Hue rules on this page: blue TEXT is only ever something you can click. Live state is a
 * `photon` mark on dark surfaces and a `signal` dot on light ones (photon is too pale on white);
 * stale state is amber, as it is everywhere else on QPRIME. Status never recolours body text —
 * it shows as a dot, a bar or a segment.
 */

@font-face {
  font-family: 'D-DIN';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/d-din-bold.woff2') format('woff2');
}

:root {
  --space: #000000;
  --paper: #F5F5F7;
  --ink: #1D1D1F;
  --body: #424245;
  --mute: #86868B;
  --divider: #C7C7CC;
  --hair: #E8E8ED;
  --frost: #F0F0FA;
  --signal: #3D6BFF;
  --signal-hover: #2A56E8;
  --photon: #8FB4FF;
  --warn: #E0A93B;
  --warn-ink: #9A6A12;

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --din: 'D-DIN', 'Barlow', 'Arial Narrow', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 52px; }
body { font-family: var(--sans); background: var(--space); color: #fff; -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.47; }
a { color: inherit; text-decoration: none; }
canvas { display: block; }
:focus-visible { outline: 2px solid var(--photon); outline-offset: 3px; border-radius: 4px; }
.mono { font-family: var(--mono); }

/* ---------- NAV ---------- */
.sp-nav { position: sticky; top: 0; z-index: 50; height: 44px; background: rgba(22,22,23,.8);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.sp-nav-inner { max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; }
.sp-brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.2px; color: var(--paper); }
.sp-brand svg { width: 22px; height: 22px; flex: none; }
.sp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .5px;
  background: #fff; color: #000; padding: 8px 20px 8px 22px; border-radius: 980px; transition: background .2s; }
.sp-cta:hover { background: #E8E8ED; }
.sp-cta span { font-size: 14px; transform: translateY(-1px); transition: transform .2s; }
.sp-cta:hover span { transform: translate(2px, -1px); }

/* ---------- SHARED LABELS + STATES ---------- */
/* Read by two inline styles in the page script (empty committee, empty log). */
:root { --text-faint: var(--mute); }

/* DIN micro-label: the SpaceX 12px uppercase label */
.lv-k { font-family: var(--din); font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; color: rgba(240,240,250,.55); }
.lv-k-gap { margin-top: 28px; }
.lv-light .lv-k { color: var(--mute); }

/* Status badge: a dot carries the state, the label stays neutral */
.pill { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font-family: var(--din); font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase;
  padding: 5px 10px 5px 9px; border-radius: 980px; border: 1px solid rgba(240,240,250,.22); color: var(--frost); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(240,240,250,.35); }
.pill-live::before { background: var(--photon); box-shadow: 0 0 0 3px rgba(143,180,255,.18); }
.pill-warn::before { background: var(--warn); }
.lv-light .pill { border-color: var(--divider); color: var(--ink); }
.lv-light .pill::before { background: var(--divider); }
.lv-light .pill-live::before { background: var(--signal); box-shadow: 0 0 0 3px rgba(61,107,255,.14); }
.lv-light .pill-warn::before { background: var(--warn); }

/* Verification lines: quiet when they pass, amber where they fail */
.lv-vrow { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 12px; line-height: 17px; }
.lv-vrow:empty { display: none; }
.lv-vrow .quiet, .lv-vrow .wait { color: rgba(240,240,250,.45); }
.lv-vrow .pass { color: var(--photon); }
.lv-vrow .fail { color: var(--warn); }
.lv-light .lv-vrow .quiet, .lv-light .lv-vrow .wait { color: var(--mute); }
.lv-light .lv-vrow .pass { color: var(--ink); }
.lv-light .lv-vrow .fail { color: var(--warn-ink); }

@keyframes lv-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- HERO ---------- */
.lv-hero { text-align: center; padding: 56px 22px 72px; }
.sp-eyebrow { font-size: clamp(15px, 1.6vw, 19px); color: rgba(255,255,255,.7); margin-bottom: 14px; }
.lv-hero h1 { font-family: var(--din); font-weight: 700; text-transform: uppercase; color: var(--frost);
  font-size: clamp(36px, 4.2vw, 60px); line-height: .9; letter-spacing: -1px; max-width: 18ch; margin: 0 auto; }
.lv-lede { font-size: clamp(19px, 2.2vw, 26px); color: rgba(255,255,255,.92); max-width: 36ch; margin: 18px auto 0; }
.lv-info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 6px; vertical-align: .15em;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  font: italic 600 13px/1 Georgia, serif; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.lv-info:hover, .lv-info.on { background: #fff; color: #000; border-color: #fff; }

.lv-clock { display: flex; flex-direction: column; align-items: center; margin: 52px auto 0; width: min(320px, 100%); }
.lv-count { font-family: var(--din); font-weight: 700; font-size: clamp(64px, 8vw, 104px); line-height: .9; letter-spacing: -1px;
  color: var(--frost); font-variant-numeric: tabular-nums; margin-top: 12px; }
.lv-bar { width: 100%; height: 2px; background: rgba(255,255,255,.18); margin: 20px 0 22px; overflow: hidden; border-radius: 2px; }
.lv-bar-fill { height: 100%; width: 0%; background: var(--photon); transition: width 1s linear; }
.lv-last { font-size: 13px; color: rgba(240,240,250,.7); margin-top: 6px; }

.lv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); justify-content: center; gap: 24px;
  max-width: 900px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
.lv-stat { font-family: var(--din); font-weight: 700; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; letter-spacing: -.5px;
  color: var(--frost); font-variant-numeric: tabular-nums; margin-bottom: 8px; }

/* ---------- HOW IT'S VERIFIED (behind the i button) ---------- */
.lv-about[hidden] { display: none; }
.lv-verify { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.lv-verify > div { background: #fff; border-radius: 28px; padding: 28px 24px; }
.lv-verify b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--ink); }
.lv-verify p { margin-top: 10px; font-size: 15px; line-height: 1.47; color: var(--body); }
.lv-verify a { color: var(--signal); }
.lv-verify a:hover { text-decoration: underline; }
.lv-spec { margin-top: 12px; background: #fff; border-radius: 28px; overflow: hidden; }
.lv-spec summary { padding: 20px 28px; font-family: var(--din); font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.lv-spec > div { padding: 0 28px 24px; font-size: 13px; line-height: 20px; color: var(--body); }
.lv-spec > div > div { margin-top: 10px; word-break: break-word; }
.lv-spec .k { display: inline-block; min-width: 90px; font-family: var(--din); font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--mute); }

/* ---------- GALLERY FRAME + TILES ---------- */
.sp-gallery { background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* Pipeline: the DESIGN.md timeline, one round left to right, on a black tile */
.lv-pipe { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--space); padding: 44px 28px 40px; }
.lv-pipe:empty { display: none; }
.lv-pipe::before { content: ""; position: absolute; left: 37px; right: 37px; top: 53px; height: 1px; background: rgba(255,255,255,.18); }
.lv-step { position: relative; padding-right: 18px; opacity: 0; animation: lv-in .9s var(--ease) forwards; }
.lv-step-dot { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; margin-bottom: 18px;
  background: var(--space); border: 1px solid rgba(255,255,255,.3); }
.lv-step.done .lv-step-dot { background: var(--frost); border-color: var(--frost); }
.lv-step.live .lv-step-dot { background: var(--photon); border-color: var(--photon); box-shadow: 0 0 0 5px rgba(143,180,255,.18); }
.lv-step.warn .lv-step-dot { background: var(--warn); border-color: var(--warn); }
.lv-step-k { font-family: var(--din); font-weight: 700; font-size: 12px; letter-spacing: .3px; color: rgba(240,240,250,.55); }
.lv-step-k span { font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: rgba(240,240,250,.75); margin-left: 6px; }
.lv-step-v { margin-top: 6px; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.72); }
.lv-step.live .lv-step-v { color: var(--frost); }
.lv-step.off { opacity: .5; animation: none; }

/* Sources: however many the round returns, plus the planned one, fill the row */
.lv-stream { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; transition: opacity .2s ease; }
.lv-stream:empty { display: none; }
.lv-stream.polling { opacity: .7; }

.lv-card { background: var(--space); color: var(--frost); padding: 36px 28px 28px; display: flex; flex-direction: column;
  opacity: 0; animation: lv-in .9s var(--ease) forwards; }
.lv-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lv-card header b { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; letter-spacing: -.2px; color: var(--paper); }
.lv-card-a { font-family: var(--din); font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; color: rgba(240,240,250,.5); margin-top: 8px; }
.lv-sig { width: 100%; height: 56px; margin: 28px 0 20px; }
.lv-card p { font-size: 15px; line-height: 1.47; color: rgba(255,255,255,.72); }
.lv-card .lv-vrow { margin-bottom: 20px; }
.lv-card footer { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; color: rgba(240,240,250,.5); }
/* Planned source: a light tile, so "not live yet" reads at a glance */
.lv-card.planned { background: var(--paper); color: var(--ink); }
.lv-card.planned header b { color: var(--ink); }
.lv-card.planned .lv-card-a, .lv-card.planned footer { color: var(--mute); }
.lv-card.planned p { color: var(--body); margin-bottom: 20px; }
.lv-card.planned footer { border-top-color: var(--hair); }
.lv-card.planned .pill { border-color: var(--divider); color: var(--ink); }
.lv-card.planned .pill::before { background: var(--divider); }

.lv-out { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.lv-out-l, .lv-out-r { padding: 44px 28px 40px; }
.lv-out-l { background: var(--space); color: var(--frost); }
.lv-out-r { background: var(--paper); color: var(--ink); }
.lv-seedhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lv-seedgrid { width: 100%; height: auto; aspect-ratio: 4 / 1; margin: 22px 0 16px; }
.lv-seedhex { font-size: 13px; line-height: 20px; color: rgba(240,240,250,.7); word-break: break-all; }
.lv-gatebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.lv-gatebar .seg { width: 28px; height: 4px; border-radius: 2px; }
.lv-gatebar .seg.on { background: var(--photon); }
.lv-gatebar .seg.off { background: rgba(255,255,255,.18); }
.lv-gatebar .lbl { margin-left: 10px; font-family: var(--din); font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; color: rgba(240,240,250,.55); }

.lv-committee { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lv-member { background: #fff; border: 1px solid var(--hair); border-radius: 980px; padding: 6px 14px; font-size: 13px; color: var(--ink);
  opacity: 0; animation: lv-in .9s var(--ease) forwards; }
.lv-sub { margin-top: 14px; font-size: 15px; line-height: 1.47; color: var(--body); }
.lv-claim { position: relative; margin-top: 12px; padding-left: 20px; font-family: var(--display); font-weight: 600;
  font-size: clamp(21px, 2vw, 26px); line-height: 1.24; letter-spacing: -.2px; color: var(--ink); }
.lv-claim::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--divider); }
.lv-claim.plain::before, .lv-claim.good::before, .lv-claim.best::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(61,107,255,.14); }
.lv-claim.none::before { background: var(--warn); }
.lv-chain { margin-top: 10px; font-size: 12px; line-height: 19px; color: var(--body); word-break: break-all; }
.lv-chain .k { margin-right: 8px; font-family: var(--din); font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--mute); }

/* ---------- SECTIONS (Apple voice) ---------- */
.lv-section { padding: 96px 22px 104px; color: var(--ink); }
.lv-paper { background: var(--paper); }
.lv-white { background: #fff; }
.lv-wrap { max-width: 1000px; margin: 0 auto; }
.lv-wrap-wide { max-width: 1200px; }
.lv-head { text-align: center; margin-bottom: 44px; }
.lv-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.0714; letter-spacing: -.3px; color: var(--ink); }
.lv-meta { display: block; margin-top: 10px; font-size: 13px; color: var(--mute); }
.lv-meta:empty { display: none; }
.lv-note { margin: 24px auto 0; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--body); text-align: center; }

.lv-legs, .lv-log { border-radius: 28px; overflow: hidden; }
.lv-legs { background: #fff; }
.lv-log { background: var(--paper); }
.lv-legs:empty, .lv-log:empty { display: none; }

.lv-leg { display: grid; grid-template-columns: 1fr 140px 170px auto; gap: 16px; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--hair); }
.lv-leg:last-child { border-bottom: 0; }
.lv-leg.none { opacity: .55; }
.lv-leg .l b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--ink); }
.lv-leg .kind { display: block; margin-top: 3px; font-family: var(--din); font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--mute); }
.lv-leg .c, .lv-leg .d { font-size: 13px; color: var(--body); }
.lv-leg .ag { color: var(--mute); }

.lv-logrow { display: grid; grid-template-columns: 150px 130px 40px 110px 1fr 100px 104px; gap: 16px; align-items: center;
  padding: 14px 28px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.lv-logrow:last-child { border-bottom: 0; }
.lv-logrow .t { color: var(--body); }
.lv-logrow .a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--din); font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase; color: var(--mute); }
.lv-logrow .a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--divider); }
.lv-logrow.good .a { color: var(--ink); }
.lv-logrow.good .a::before { background: var(--signal); }
.lv-logrow.none .a { color: var(--warn-ink); }
.lv-logrow.none .a::before { background: var(--warn); }
.lv-logrow .q, .lv-logrow .s, .lv-logrow .h { color: var(--mute); }
.lv-logrow .c { font-size: 13px; color: var(--body); }
.lv-logrow .v { text-align: right; }
/* verify is a real action: the small outline pill, blue because it is clickable */
.lv-vbtn { font-size: 12px; padding: 5px 12px; border-radius: 980px; border: 1px solid var(--signal); background: transparent; color: var(--signal);
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.lv-vbtn:hover:not(:disabled) { background: var(--signal); color: #fff; }
.lv-vbtn:disabled { cursor: default; opacity: .7; }
.lv-vbtn.pass { border-color: var(--divider); color: var(--ink); opacity: 1; }
.lv-vbtn.fail { border-color: var(--warn); color: var(--warn-ink); opacity: 1; }

/* ---------- FOOTER BAR ---------- */
.sp-bar { background: #000; color: var(--frost); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  padding: 18px 40px; font-family: var(--din); font-weight: 700; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }
.sp-bar-links { display: flex; gap: 36px; }
.sp-bar-links a:hover { text-decoration: underline; }
.sp-bar-r { justify-self: end; }

/* ---------- REVEAL ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.shown { opacity: 1; transform: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1099px) {
  .lv-pipe { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .lv-pipe::before { display: none; }
  .lv-verify { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 833px) {
  .lv-out { grid-template-columns: 1fr; }
  .lv-stats { grid-template-columns: repeat(2, minmax(0, 170px)); row-gap: 28px; }
  .lv-leg { grid-template-columns: 1fr auto; }
  .lv-leg .c, .lv-leg .d { display: none; }
  .lv-logrow { grid-template-columns: 1fr 1fr auto; }
  .lv-logrow .q, .lv-logrow .s, .lv-logrow .c, .lv-logrow .h { display: none; }
  .sp-bar { grid-template-columns: 1fr; justify-items: center; padding: 22px; }
  .sp-bar-r { justify-self: center; }
}
@media (max-width: 600px) {
  .sp-nav-inner { padding: 0 16px; }
  .lv-hero { padding: 44px 18px 56px; }
  .lv-lede { font-size: 17px; }
  .lv-clock { margin-top: 40px; }
  .lv-stats { margin-top: 44px; gap: 20px; }
  .sp-gallery { padding: 8px; gap: 8px; }
  .lv-stream, .lv-out { gap: 8px; }
  .lv-pipe { grid-template-columns: 1fr 1fr; padding: 40px 20px 36px; }
  .lv-card { padding: 32px 20px 24px; }
  .lv-out-l, .lv-out-r { padding: 40px 20px 36px; }
  .lv-verify { grid-template-columns: 1fr; }
  .lv-section { padding: 72px 20px 76px; }
  .lv-head { margin-bottom: 32px; }
  .lv-leg, .lv-logrow { padding-left: 20px; padding-right: 20px; }
  .lv-logrow { grid-template-columns: 1fr auto; row-gap: 4px; }
  .lv-logrow .a { grid-row: 2; }
  .lv-logrow .v { grid-row: 1 / 3; grid-column: 2; }
  .sp-bar { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lv-card, .lv-step, .lv-member { opacity: 1; animation: none; }
  .lv-step.off { opacity: .5; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .lv-bar-fill { transition: none; }
}