:root {
  /* mirrors tokens.css (this :root loads after it and would win) — keep the two in sync */
  --bg: #040614;
  --bg-soft: #0a0e22;
  --ink: #c6d1e6;
  --ink-dim: #7787a3;
  --ink-faint: #8391ad;
  --accent: #5ef0a8;          /* phosphor mint — STATUS: hope / resolved / accelerating */
  --accent-dim: #2f7d63;
  --signal-dim: color-mix(in srgb, #5ef0a8 52%, transparent);  /* lit but NOT glowing — ~90% of mint elements */
  --warn: #f2c14e;            /* STATUS: mixed / caution only */
  --strike: #e85d43;          /* STATUS: friction / fear / floored only */
  /* glow is rationed: --glow is the calm default; --glow-strong is for ONE hero element per viewport */
  --glow: 0 0 1px rgba(94, 240, 168, .42);
  --glow-strong: 0 0 2px rgba(94, 240, 168, .55), 0 0 18px rgba(94, 240, 168, .2);
  --mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  /* --disp now lives in tokens.css (Space Grotesk) — loaded before this file */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* deep space: violet nebula top-left · cyan breath right · warm ember low — the vivid ambience */
  background:
    radial-gradient(90% 70% at 12% -8%, rgba(124, 92, 255, .13) 0%, transparent 55%),
    radial-gradient(70% 60% at 96% 18%, rgba(63, 217, 255, .09) 0%, transparent 55%),
    radial-gradient(80% 55% at 70% 108%, rgba(255, 154, 92, .07) 0%, transparent 60%),
    radial-gradient(120% 120% at 50% -10%, #0a0f26 0%, var(--bg) 55%, #01020a 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--accent-dim); color: #031024; }

/* ░░░ CRT OVERLAYS ░░░ */
.crt-scanlines,
.crt-vignette,
.crt-flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}
/* scanlines: subliminal, not the cheap .55 multiply — barely-there 4px pitch */
.crt-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, .035) 3px,
    rgba(0, 0, 0, .035) 4px
  );
}
.crt-vignette {
  background: radial-gradient(122% 96% at 50% 44%, transparent 60%, rgba(1, 2, 10, .55) 100%);
}
/* flicker: barely-there irregular phosphor breathing, not aggressive on/off */
.crt-flicker {
  background: rgba(63, 217, 255, .01);
  animation: flicker 9s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: .5; }
  46% { opacity: .54; } 47% { opacity: .43; } 49% { opacity: .52; }
  76% { opacity: .47; } 78% { opacity: .56; } 80% { opacity: .49; }
}
/* baked phosphor grain — static tile, shimmer via background-position only (never animate feTurbulence) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  mix-blend-mode: overlay;
  opacity: .028;
}

/* ░░░ CRT steps back on content screens ░░░
   boot / puzzles / the world keep full phosphor theatre; the dashboard and gallery get
   the texture without the fatigue — scanlines fade, flicker dies, vignette loosens */
.crt-scanlines, .crt-vignette, .crt-flicker { transition: opacity .6s ease; }
body:has(#s-dash.active) .crt-scanlines, body:has(#s-gallery.active) .crt-scanlines { opacity: .1; }
body:has(#s-dash.active) .crt-flicker, body:has(#s-gallery.active) .crt-flicker { animation: none; opacity: 0; }
body:has(#s-dash.active) .crt-vignette, body:has(#s-gallery.active) .crt-vignette { opacity: .38; }

/* ░░░ scanning-reticle cursor ░░░ */
.has-reticle, .has-reticle * { cursor: none !important; }
.reticle { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; width: 0; height: 0; will-change: transform; }
.reticle .r-h, .reticle .r-v { position: absolute; background: var(--accent); opacity: .75; transition: opacity .18s, box-shadow .18s; }
.reticle .r-h { left: -11px; top: -.5px; width: 22px; height: 1px; }
.reticle .r-v { top: -11px; left: -.5px; width: 1px; height: 22px; }
.reticle .r-dot { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border: 1px solid var(--accent); border-radius: 50%; opacity: .45; transition: transform .18s cubic-bezier(.2,.7,.2,1), opacity .18s; }
.reticle.hot .r-dot { transform: scale(2.6); opacity: 1; box-shadow: var(--glow-strong); }
.reticle.hot .r-h, .reticle.hot .r-v { opacity: 1; box-shadow: var(--glow); }
[data-magnetic] { transition: transform .25s cubic-bezier(.2,.7,.2,1); will-change: transform; }

/* ░░░ BOOT ░░░ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
  background: var(--bg);
  transition: opacity .8s ease;
}
.boot.is-gone { opacity: 0; pointer-events: none; }

.boot-inner {
  width: min(640px, 100%);
}
.boot-log {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
.boot-log .ok { color: var(--accent); text-shadow: var(--glow); }
.boot-log .dim { color: var(--ink-faint); }
.boot-log .you { color: var(--ink); }

.cursor::after {
  content: '▋';
  margin-left: 2px;
  color: var(--accent);
  animation: blink 1s steps(2) infinite;
  text-shadow: var(--glow);
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.boot-progress {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-dim);
}
/* display:flex outranks the UA's [hidden] rule, so the bar showed on the paths that
   never run the boot sequence — a "DECRYPTING 0%" that sat at 0% and then vanished.
   With the entrance skipped, the wait before the door is a quiet line, not a fake meter. */
.boot-progress[hidden] { display: none; }
/* the engine strip belongs to the site, not to the two seconds before it loads */
body:has(#s-boot.active) .eng-strip.eng-pill { display: none; }
.boot-progress-label { letter-spacing: .15em; text-transform: uppercase; }
.boot-bar {
  flex: 1;
  font-family: var(--mono);
  color: var(--accent);
  text-shadow: var(--glow);
  white-space: nowrap;
  overflow: hidden;
}
.boot-pct { color: var(--ink); min-width: 42px; text-align: right; }

.enter-btn {
  margin-top: 30px;
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .12em;
  padding: 12px 22px;
  cursor: pointer;
  text-shadow: var(--glow);
  transition: background .25s, box-shadow .25s;
  animation: fadeUp .6s ease both;
}
.enter-btn:hover {
  background: rgba(94, 240, 168, .08);
  box-shadow: var(--glow);
}

/* ░░░ DOCUMENT ░░░ */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 14vh 24px 12vh;
}

.masthead { margin-bottom: 14vh; }
.masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 14px;
  margin-bottom: 9vh;
}

.title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(48px, 13vw, 132px);
  letter-spacing: .04em;
  line-height: .95;
}
.title-word {
  display: inline-block;
  color: var(--ink);
  position: relative;
}
.title-word.glitch { animation: glitch .4s steps(2) 3; }
@keyframes glitch {
  0% { transform: translate(0,0); text-shadow: -2px 0 var(--strike), 2px 0 var(--accent); }
  50% { transform: translate(2px,-1px); text-shadow: 2px 0 var(--strike), -2px 0 var(--accent); }
  100% { transform: translate(0,0); text-shadow: var(--glow); }
}
.title-word.settled { text-shadow: var(--glow); color: #eef3ff; }

.title-reading {
  margin: 22px 0 0;
  font-size: clamp(14px, 2.4vw, 18px);
  color: var(--strike);
  letter-spacing: .04em;
  font-style: italic;
  transition: opacity .6s ease;
}
.title-reading.fade-out { opacity: 0; }
.title-reading--true { color: var(--accent); text-shadow: var(--glow); font-style: normal; }
.title-reading--true .reading-new { font-style: italic; }

/* blocks */
.block {
  margin: 13vh 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease;
}
.block.in { opacity: 1; transform: none; }

.lede {
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.5;
  font-weight: 300;
  color: #eef3ff;
}
.lede em { color: var(--ink-dim); font-style: italic; }

.h {
  font-size: clamp(15px, 2.6vw, 19px);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent);
  text-shadow: var(--glow);
  margin: 0 0 22px;
}

.block p { margin: 0 0 18px; max-width: 62ch; }
.block b { color: #eef3ff; font-weight: 600; }
.block em { color: var(--ink-dim); }

.strike {
  position: relative;
  color: var(--strike);
  text-decoration: line-through;
  text-decoration-color: var(--strike);
}
.zero {
  color: var(--accent);
  font-weight: 600;
  text-shadow: var(--glow);
}
.we {
  margin-top: 32px;
  font-size: clamp(17px, 2.8vw, 22px);
  color: #eef3ff;
  border-left: 2px solid var(--accent-dim);
  padding-left: 18px;
  font-style: italic;
}

/* decrypted record — receipts */
.receipts {
  margin: 30px 0 8px;
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  background: rgba(0, 0, 0, .38);
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.85;
  overflow-x: auto;
}
.receipts-head {
  display: block;
  color: var(--accent-dim);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 12px;
}
.receipts pre {
  margin: 0;
  white-space: pre;
  color: var(--ink-dim);
  font-family: var(--mono);
}
.receipts .v { color: #eef3ff; }
.receipts .g { color: var(--accent); text-shadow: var(--glow); }
.receipts-note {
  display: block;
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: normal;
}
.receipts-src { color: var(--ink-faint); font-size: 11px; margin: 8px 0 0; }
.receipts-src a { color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); }
.receipts-src a:hover { color: var(--accent); }

/* join form */
.join-form { margin-top: 30px; max-width: 62ch; }
.field { display: block; margin-bottom: 22px; }
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
  caret-color: var(--accent);
  resize: vertical;
  transition: border-color .25s, box-shadow .25s;
}
.field-input:focus {
  border-color: var(--accent-dim);
  box-shadow: var(--glow);
}
.field-input::placeholder { color: var(--ink-faint); }

.ways { border: none; margin: 0 0 22px; padding: 0; }
.ways legend { padding: 0; }
.way {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  cursor: pointer;
  color: var(--ink-dim);
  transition: color .2s;
  border-bottom: 1px dashed var(--ink-faint);
}
.way:hover { color: var(--ink); }
.way input { margin: 4px 0 0; accent-color: var(--accent); cursor: pointer; }
.way input:checked + span { color: var(--accent); text-shadow: var(--glow); }

.join-status {
  margin: 16px 0 0;
  font-size: 13.5px;
}
.join-status.err { color: var(--warn); }
.join-status.ok { color: var(--accent); text-shadow: var(--glow); }
.join-status.working { color: var(--ink-dim); }

/* signed-in status pill — fixed, visible on every screen so you always know your state */
.auth-pill { position: fixed; top: 10px; right: 12px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(6,12,9,.82); border: 1px solid var(--ink-faint); border-radius: 999px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.auth-pill[hidden] { display: none; }
.auth-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); flex: none; }
.auth-pill-dot.admin { background: var(--warn); }
.auth-pill-who { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-pill-out { background: none; border: 0; color: var(--accent); font-family: var(--mono); font-size: 11.5px; cursor: pointer; padding: 0 0 0 2px; text-decoration: underline; text-underline-offset: 2px; }
.auth-pill-out:hover { text-shadow: var(--glow); }
@media (max-width: 620px) { .auth-pill { top: 8px; right: 8px; font-size: 10.5px; padding: 4px 8px; } .auth-pill-who { max-width: 30vw; } }

.pledge-box { margin-top: 28px; }
.pledge-btn, .share-btn {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  padding: 12px 20px;
  cursor: pointer;
  text-shadow: var(--glow);
  transition: background .25s, box-shadow .25s, transform .1s;
}
.pledge-btn:hover, .share-btn:hover {
  background: rgba(94, 240, 168, .08);
  box-shadow: var(--glow);
}
.pledge-btn:active, .share-btn:active { transform: translateY(1px); }
.pledge-result { margin-top: 24px; animation: fadeUp .6s ease both; }
.pledge-confirm { color: var(--accent); text-shadow: var(--glow); margin: 0 0 6px; }
#node-id { color: #eef3ff; }
.pledge-sub { color: var(--ink-faint); font-size: 13px; margin: 0 0 20px; }
.share-note {
  display: inline-block;
  margin-left: 14px;
  color: var(--ink-dim);
  font-size: 13px;
  animation: fadeUp .4s ease both;
}

/* footer */
.doc-footer {
  margin-top: 16vh;
  padding-top: 18px;
  border-top: 1px solid var(--ink-faint);
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.footer-hint { text-transform: none; letter-spacing: .02em; color: var(--ink-dim); }
.kbd {
  border: 1px solid var(--ink-faint);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--accent);
}

/* ░░░ CLI ░░░ */
.cli {
  margin-top: 7vh;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 13.5px;
}
.cli-out { color: var(--ink-dim); white-space: pre-wrap; margin-bottom: 8px; }
.cli-out .resp { color: var(--ink); display: block; margin: 2px 0 12px; }
.cli-out .echo { color: var(--accent); }
.cli-input-row { display: flex; align-items: center; gap: 10px; }
.cli-prompt { color: var(--accent); text-shadow: var(--glow); white-space: nowrap; }
.cli-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13.5px;
  caret-color: var(--accent);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .crt-flicker, .cursor::after, .title-word.glitch { animation: none; }
  .screen.entering, .screen.leaving { animation: none; clip-path: none; }
  .block { transition: none; opacity: 1; transform: none; }
  [data-magnetic] { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 540px) {
  body { font-size: 15px; }
  .doc { padding: 10vh 20px 10vh; }
  .masthead-meta { font-size: 10px; gap: 4px 14px; }
}

/* ═══════════════════ THE WALKTHROUGH (gamified gate) ═══════════════════ */
#app { position: relative; min-height: 100vh; }

.screen {
  position: fixed;
  inset: 0;
  display: none;
  padding: 7vh 24px;
  overflow-y: auto;
}
.screen.active { display: flex; }
/* center via auto-margins, not align/justify — scroll-safe when content overflows */
.screen > * { margin: auto; }
.screen.entering { animation: screenIn .62s cubic-bezier(.2,.7,.2,1) both; }
.screen.leaving { animation: screenOut .32s ease both; }
/* DECODE > FADE: the screen scans into existence top→bottom like a CRT, no blur-fade SPA tell */
@keyframes screenIn {
  from { opacity: .35; clip-path: inset(0 0 100% 0); }
  55%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes screenOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.stage {
  width: min(680px, 100%);
  margin: auto;
}

/* step counter / chrome */
.step-tag {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.step-dots { display: inline-flex; gap: 6px; }
.step-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-faint); display: inline-block;
  transition: background .3s, box-shadow .3s;
}
.step-dots i.on { background: var(--accent); box-shadow: var(--glow); }

.stage h2.prompt {
  font-family: var(--disp);
  font-size: clamp(26px, 5.2vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: #eef3ff;
  text-shadow: var(--glow-strong);
  margin: 0 0 18px;
}
.stage h2.prompt em { color: var(--strike); font-style: normal; }
.stage .sub {
  color: var(--ink-dim);
  font-size: clamp(14px, 2.3vw, 17px);
  line-height: 1.6;
  margin: 0 0 34px;
  max-width: 52ch;
}

/* generic primary button */
.btn {
  background: none;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .1em;
  padding: 13px 24px;
  cursor: pointer;
  text-shadow: var(--glow);
  transition: background .2s, box-shadow .2s, transform .08s, opacity .2s;
}
.btn:hover { background: rgba(94,240,168,.09); box-shadow: var(--glow); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; background: none; }
.btn.ghost { border-color: var(--ink-faint); color: var(--ink-dim); text-shadow: none; }
.btn.ghost:hover { color: var(--ink); border-color: var(--ink-dim); background: rgba(255,255,255,.03); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }


/* fragment reward (decrypted line after a game) */
.fragment {
  margin-top: 26px;
  border-left: 2px solid var(--accent-dim);
  padding: 4px 0 4px 18px;
  color: #eef3ff;
  font-size: clamp(16px, 2.6vw, 20px);
  font-style: italic;
  min-height: 1.4em;
}
.fragment-tag { display:block; font-style: normal; font-size: 10px; letter-spacing:.24em; text-transform:uppercase; color: var(--accent-dim); margin-bottom: 8px; }

/* ── GAME 1 · isolate the signal ── */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 8px 0 4px;
  user-select: none;
}
.signal-grid.lock { pointer-events: none; }
.signal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px, 2.4vw, 18px);
  color: var(--ink-faint);
  background: rgba(255,255,255,.012);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.signal-cell:hover { border-color: var(--ink-faint); }
.signal-cell.signal { color: var(--accent); text-shadow: var(--glow); }
.signal-cell.hit { background: rgba(94,240,168,.16); border-color: var(--accent-dim); color: #eef3ff; }
.signal-cell.miss { animation: cellMiss .3s; }
@keyframes cellMiss { 0%,100%{transform:none} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }

/* ── GAME 2 · the sequence ── */
.seq {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: clamp(26px, 6vw, 52px);
  color: #eef3ff; margin: 6px 0 30px;
}
.seq .n { color: var(--ink-dim); }
.seq .q { color: var(--accent); text-shadow: var(--glow); border-bottom: 2px solid var(--accent-dim); }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 360px; }
.opt {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 22px;
  padding: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color .15s, background .15s, transform .08s;
}
.opt:hover { border-color: var(--accent-dim); background: rgba(94,240,168,.05); }
.opt.ok { border-color: var(--accent); color: var(--accent); text-shadow: var(--glow); background: rgba(94,240,168,.12); }
.opt.no { border-color: var(--strike); color: var(--strike); animation: cellMiss .3s; }

/* ── GAME 3 · the network ── */
.netfield {
  position: relative;
  width: 100%;
  height: min(360px, 56vw);
  margin: 4px 0;
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(94,240,168,.04), transparent 60%),
    rgba(0,0,0,.28);
  overflow: hidden;
}
.netfield svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.netfield svg line { stroke: var(--accent-dim); stroke-width: 1; opacity: 0; transition: opacity .5s; }
.netfield svg line.on { opacity: .7; }
.node {
  position: absolute;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--ink-dim);
  cursor: pointer;
  transition: background .2s, box-shadow .2s, border-color .2s, transform .15s;
}
.node:hover { transform: scale(1.25); border-color: var(--accent-dim); }
.node.lit { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.netfield.solved .node.lit { animation: nodePulse 2s infinite ease-in-out; }
@keyframes nodePulse { 0%,100%{box-shadow:0 0 1px rgba(94,240,168,.5),0 0 10px rgba(94,240,168,.25)} 50%{box-shadow:0 0 2px rgba(94,240,168,.8),0 0 22px rgba(94,240,168,.55)} }

/* ── shared puzzle chrome ── */
.puzzle-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.puzzle-meter { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.puzzle-hint { font-size: 12.5px; color: var(--warn); font-style: italic; }
.btn.sm { font-size: 13px; padding: 9px 15px; letter-spacing: .08em; }
.field-input.sm { width: auto; flex: 1; min-width: 150px; padding: 9px 12px; font-size: 14px; }
.field-input.sm.err { border-color: var(--strike); animation: cellMiss .3s; }

/* ── nine dots (think outside the box) ── */
.ninebox { width: min(360px, 86vw); margin: 6px auto 0; }
#nine-svg { width: 100%; aspect-ratio: 1; display: block; cursor: crosshair; touch-action: manipulation; }
#nine-svg .box { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 6; }
#nine-svg .dot { fill: var(--ink-dim); transition: fill .2s; }
#nine-svg .dot.covered { fill: var(--accent); }
#nine-svg .anchor { fill: var(--ink-faint); opacity: .5; }
#nine-svg .ghost { fill: none; stroke: var(--accent-dim); stroke-width: 2; stroke-dasharray: 5 7; opacity: .8; }
#nine-svg .path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(94,240,168,.5)); }
#nine-svg .vtx { fill: #eef3ff; }
.ninebox.solved #nine-svg { cursor: default; }

/* ── lights out ── */
.lights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(300px, 72vw); margin: 6px auto 0; }
.lights-cell { aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--ink-faint); background: rgba(255,255,255,.02); cursor: pointer; transition: background .18s, box-shadow .18s, border-color .18s, transform .07s; }
.lights-cell:active { transform: scale(.95); }
.lights-cell.on { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
.lights.solved .lights-cell.on { animation: nodePulse 2s infinite ease-in-out; }

/* ── hidden word ── */
.hidden-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; width: 100%; max-width: 520px; margin: 6px 0 0; user-select: none; }
.hidden-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, 2vw, 15px); color: var(--ink-faint); opacity: .6; }
.hidden-cell.glow { color: var(--accent-dim); opacity: 1; }
.hidden-grid.reveal .hidden-cell.glow { color: var(--accent); text-shadow: var(--glow); }
.hidden-grid.solved .hidden-cell.glow { color: #eef3ff; text-shadow: var(--glow); }

/* ── the grid (pixel maze) ── */
.maze {
  display: block; margin: 16px auto 0;
  width: min(440px, 96%); height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--ink-faint); border-radius: 4px;
  background: #04130f; outline: none;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5);
}
.puzzle-meter.mono { color: var(--ink-faint); }

/* ── the doors (wrap-around corridor) ── */
.doors { position: relative; display: flex; gap: 8px; justify-content: center; margin: 22px auto 0; width: min(440px, 92%); }
.doors::before, .doors::after { content: '↺'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 14px; opacity: .7; }
.doors::before { left: -20px; }
.doors::after { right: -20px; }
.door {
  flex: 1; max-width: 60px; aspect-ratio: .62;
  border: 1px solid var(--ink-faint); border-radius: 5px 5px 2px 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--ink-dim);
  background: rgba(0, 0, 0, .25); position: relative; transition: border-color .18s, box-shadow .18s, color .18s;
}
.door.in { border-color: var(--accent-dim); color: var(--accent); box-shadow: inset 0 0 16px rgba(94,240,168,.12); }
.door.in::after { content: 'in'; position: absolute; bottom: 4px; font-size: 9px; letter-spacing: .12em; color: var(--accent-dim); }
.door.locked { border-color: var(--strike); color: var(--strike); }
.door.here { box-shadow: 0 0 0 1px var(--accent), var(--glow); color: #eef3ff; }
.door.here::before { content: '▾'; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); color: var(--accent); font-size: 12px; text-shadow: var(--glow); }
.door.bump { animation: cellMiss .3s; }
.doors.solved .door.in { animation: nodePulse 2s infinite ease-in-out; }

/* ── QUESTIONS ── */
.qbtns { display: flex; gap: 16px; margin-top: 8px; }
.qbtn {
  flex: 1; max-width: 200px;
  background: none;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 22px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color .2s, color .2s, background .2s, transform .08s;
}
.qbtn:hover { border-color: var(--accent-dim); color: var(--accent); background: rgba(94,240,168,.05); }
.qbtn:active { transform: translateY(1px); }
.qresponse {
  margin-top: 28px;
  color: #eef3ff;
  font-size: clamp(16px, 2.6vw, 20px);
  line-height: 1.55;
  min-height: 1.4em;
  max-width: 48ch;
}

/* ── LOGIN / create key ── */
.keyform { margin-top: 12px; max-width: 420px; }
.keyform .field { margin-bottom: 20px; }
.keyform .hint { color: var(--ink-faint); font-size: 12px; margin: 6px 0 0; }

/* ── WAIT / sealed door ── */
.seal { text-align: center; }
.seal-ring {
  width: 168px; height: 168px; margin: 0 auto 28px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.seal-ring::before, .seal-ring::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--accent-dim);
  animation: spin 9s linear infinite;
}
.seal-ring::after { inset: 12px; border-top-color: transparent; border-left-color: var(--accent-dim); animation-duration: 6s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.seal-glyph { font-size: 30px; color: var(--accent); text-shadow: var(--glow); }
.countdown {
  font-size: clamp(34px, 9vw, 64px);
  letter-spacing: .06em;
  color: #eef3ff;
  text-shadow: var(--glow);
  font-variant-numeric: tabular-nums;
}
.countdown-label { color: var(--ink-faint); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; }
.wait-copy { color: var(--ink-dim); max-width: 46ch; margin: 26px auto 0; line-height: 1.6; }
.wait-read { margin-top: 34px; }

/* ═══════════ DASHBOARD (the inside) ═══════════ */
.screen.dash { padding: 0; }
.screen.dash.active { display: block; }   /* block, not flex — so the hud fills full width on every tab */
.screen.dash > * { margin: 0; }   /* override auto-centering — fill + top-align */
.dash-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 22px 64px; }

.dash-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--ink-faint); }
.dash-brand { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: .14em; color: #eef3ff; text-shadow: var(--glow); background: none; border: none; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; transition: opacity .15s; }
.dash-brand:hover { opacity: .82; }
.dash-brand:hover .dash-badge { color: var(--accent); }
.dash-badge { color: var(--accent-dim); font-weight: 400; font-size: 11px; letter-spacing: .2em; margin-left: 9px; }
.dash-id { display: flex; gap: 18px; align-items: center; font-size: 12px; }
.dash-online { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-dim); letter-spacing: .03em; }
.dash-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow); animation: nodePulse 2.4s infinite ease-in-out; }
.dash-me { color: var(--accent); }
.dash-me .dim { color: var(--ink-faint); }

.dash-ticker { overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--ink-faint); padding: 8px 0; margin-bottom: 22px; }
.dash-ticker-track { display: inline-block; padding-left: 100%; color: var(--ink-faint); font-size: 12px; letter-spacing: .14em; animation: ticker 36s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

.dash-grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 880px) { .dash-grid { grid-template-columns: 1fr; } }

.room { border: 1px solid var(--ink-faint); border-radius: 6px; background: rgba(0,0,0,.28); padding: 16px; }
.room-fwd { border-top: 2px solid var(--accent-dim); }
.room-fric { border-top: 2px solid var(--strike); }
.room-sig { border-top: 2px solid var(--ink-dim); }
.room-h { margin: 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.room-fwd .room-h { color: var(--accent); text-shadow: var(--glow); }
.room-fric .room-h { color: var(--strike); }
.room-sig .room-h { color: #eef3ff; }
.room-tag { margin: 4px 0 16px; font-size: 11px; color: var(--ink-faint); letter-spacing: .03em; }
.room-feed { display: flex; flex-direction: column; gap: 10px; }

.card { border: 1px solid var(--ink-faint); border-radius: 5px; padding: 12px; background: rgba(255,255,255,.012); transition: border-color .2s; }
.card:hover { border-color: var(--ink-dim); }
.card-h { font-size: 13.5px; color: #eef3ff; line-height: 1.35; margin-bottom: 6px; }
.card-b { font-size: 12px; color: var(--ink-dim); line-height: 1.45; margin-bottom: 10px; }
.card-m { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-src { font-size: 10.5px; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.boost { background: none; border: 1px solid var(--ink-faint); border-radius: 20px; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; padding: 3px 11px; cursor: pointer; transition: border-color .15s, color .15s; white-space: nowrap; }
.boost:hover { border-color: var(--accent-dim); color: var(--accent); }
.boost.on { border-color: var(--accent-dim); color: var(--accent); text-shadow: var(--glow); }

.sig-compose { display: flex; gap: 8px; margin-bottom: 16px; }
.sig-compose input { flex: 1; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid var(--ink-faint); border-radius: 4px; color: var(--ink); font-family: var(--mono); font-size: 13.5px; padding: 10px 12px; outline: none; caret-color: var(--accent); }
.sig-compose input:focus { border-color: var(--accent-dim); box-shadow: var(--glow); }

.post { border-bottom: 1px solid var(--ink-faint); padding: 11px 2px; }
.post:last-child { border-bottom: none; }
.post-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.post-who { color: var(--accent); font-size: 12.5px; text-shadow: var(--glow); }
.post-node { color: var(--ink-faint); font-size: 10.5px; }
.post-t { color: var(--ink-faint); font-size: 10.5px; margin-left: auto; }
.post-body { color: var(--ink); font-size: 13.5px; line-height: 1.5; word-break: break-word; }

/* ── dashboard polish ── */
.dash-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; }
.dash-wrap { position: relative; z-index: 1; }

/* entrance choreography */
.screen.dash.active .dash-head { animation: fadeUp .5s ease both; }
.screen.dash.active .dash-ticker { animation: fadeUp .5s ease .08s both; }
.screen.dash.active .room { animation: fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.screen.dash.active .room-fwd { animation-delay: .14s; }
.screen.dash.active .room-sig { animation-delay: .22s; }
.screen.dash.active .room-fric { animation-delay: .30s; }

/* ticker edge fade */
.dash-ticker { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* card hover lift */
.card { transition: border-color .2s, transform .15s, box-shadow .2s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }

/* presence tick */
#dash-count { transition: color .2s; }
#dash-count.tick { color: var(--accent); text-shadow: var(--glow); }

/* boost pop + float */
.boost { position: relative; transition: border-color .15s, color .15s, transform .12s; }
.boost.pop { transform: scale(1.12); }
.boost-float { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); color: var(--accent); font-size: 11px; pointer-events: none; animation: floatUp .7s ease forwards; }
.room-fric .boost-float { color: var(--strike); }
@keyframes floatUp { from { opacity: 1; top: -4px; } to { opacity: 0; top: -20px; } }

/* fresh post glow-in */
.post.fresh { animation: postIn .8s ease; }
@keyframes postIn {
  0% { background: rgba(94, 240, 168, .16); transform: translateY(-4px); opacity: .45; }
  100% { background: transparent; transform: none; opacity: 1; }
}

/* ═══════════ THE PULL ═══════════ */
.pull-stage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.pull-hud { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 18px 22px 16px; pointer-events: none; }
.pull-hud > * { pointer-events: auto; }
.pull-backdrop { position: absolute; inset: 0; z-index: 2; background: rgba(3, 6, 18, .55); }

.pull-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pull-meter { flex: 1; min-width: 200px; max-width: 460px; }
.pull-meter-bar { position: relative; height: 9px; border: 1px solid var(--ink-faint); border-radius: 6px; overflow: hidden; background: rgba(200, 85, 61, .16); }
.pull-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.pull-meter-label { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pull-meter-label b { color: var(--accent); text-shadow: var(--glow); font-size: 12px; letter-spacing: .05em; }
.pull-meter-label .lbl-fric { color: var(--strike); }
.pull-meter-label .lbl-fwd { color: var(--accent); }

/* THE CLIMB view */
.climb-view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 2; overflow-y: auto; padding: 10px 22px 44px; background: linear-gradient(180deg, rgba(6,10,24,.86), rgba(6,10,24,.97)); }
.climb-view .goal-head { max-width: 1180px; margin: 0 auto 22px; }
.climb-layout { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: 30px; align-items: start; }
.climb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.climb-side { position: sticky; top: 0; display: flex; flex-direction: column; }
.climb-side-h { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 12px; }
@media (max-width: 820px) { .climb-layout { grid-template-columns: 1fr; } .climb-side { position: static; margin-top: 26px; } }
@media (max-width: 720px) { .climb-cols { grid-template-columns: 1fr; gap: 18px; } }
.climb-h { margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.climb-h.down { color: var(--accent); text-shadow: var(--glow); }
.climb-h.up { color: var(--strike); }
.climb-bars { display: flex; flex-direction: column; gap: 13px; }
.climb-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab lab" "track val"; gap: 5px 10px; align-items: center; }
.climb-lab { grid-area: lab; display: flex; flex-direction: column; }
.climb-lab span { font-size: 12.5px; color: #eef3ff; }
.climb-lab small { font-size: 10px; color: var(--ink-faint); letter-spacing: .02em; margin-top: 1px; }
.climb-bar { grid-area: track; margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1; letter-spacing: -.5px; white-space: pre; overflow: hidden; }
.climb-bar.down .cb-fill { color: var(--accent); text-shadow: var(--glow); }
.climb-bar.up .cb-fill { color: var(--strike); }
.climb-bar .cb-empty { color: var(--ink-faint); opacity: .5; }
.climb-track { grid-area: track; position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,.04); overflow: hidden; }
.climb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; animation: climbGrow .9s cubic-bezier(.2,.7,.2,1) both; }
.climb-fill.down { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); }
.climb-fill.up { background: linear-gradient(90deg, #6b2f25, var(--strike)); }
.climb-val { grid-area: val; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.climb-val.down { color: var(--accent); }
.climb-val.up { color: var(--strike); }
@keyframes climbGrow { from { width: 0 !important; opacity: .4; } }

.climb-cards { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 720px) { .climb-cards { grid-template-columns: repeat(2, 1fr); } }
.climb-card { border: 1px solid var(--ink-faint); border-top: 2px solid var(--accent-dim); border-radius: 0; background: rgba(0,0,0,.3); padding: 14px; }
.climb-card.up { border-top-color: var(--strike); }
.climb-card-big { font-size: clamp(20px, 3vw, 28px); font-weight: 600; color: var(--accent); text-shadow: var(--glow); letter-spacing: .02em; }
.climb-card.up .climb-card-big { color: var(--strike); text-shadow: none; }
.climb-card-t { font-size: 12px; color: #eef3ff; margin-top: 6px; line-height: 1.3; }
.climb-card-s { font-size: 10.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.45; }
.climb-note { margin: 16px 0 0; font-size: 10.5px; color: var(--ink-faint); line-height: 1.5; }

/* register tab bar — brutalist, not pills */
.pull-nav { display: flex; gap: 0; margin-top: 16px; border-bottom: 1px solid var(--ink-faint); }
.nav-btn { position: relative; background: none; border: none; color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; padding: 11px 18px 11px 26px; cursor: pointer; transition: color .18s; }
.nav-btn::before { content: '▸'; position: absolute; left: 11px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.nav-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); box-shadow: var(--glow-strong); transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.2,.7,.2,1); }
.nav-btn:hover { color: var(--ink); }
.nav-btn.active { color: var(--accent); text-shadow: var(--glow); }
.nav-btn.active::before { opacity: 1; transform: none; text-shadow: var(--glow); }
.nav-btn.active::after { transform: scaleX(1); }
/* "the mission" — leaves to the home page, sits apart */
.nav-go { margin-left: auto; padding-left: 18px; color: var(--ink); }
.nav-go ~ .nav-go { margin-left: 0; }
.nav-go::before, .nav-go::after { content: none; }
.nav-go:hover { color: var(--accent); }

/* THE PULL — two sides + the day's balance in the middle */
.pull-top { justify-content: space-between; }
.pull-board { flex: 1; min-height: 0; margin-top: 18px; display: grid; grid-template-columns: 1fr minmax(216px, 272px) 1fr; grid-template-rows: minmax(0, 1fr); gap: 20px; }
.pull-board[hidden] { display: none; }
.pull-col { min-height: 0; display: flex; flex-direction: column; }
.col-fwd { text-align: right; }
.pull-col-h { margin: 0 0 3px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pull-col-h.fric { color: var(--strike); }
.pull-col-h.fwd { color: var(--accent); text-shadow: var(--glow); }
.pull-col-sub { margin: 0 0 14px; font-size: 11px; color: var(--ink-faint); }
.pcards { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; text-align: left; }
.col-fwd .pcards { padding-left: 2px; }
.pcard { border: 1px solid var(--ink-faint); border-left-width: 3px; border-radius: 0; padding: 12px 13px; background: rgba(0,0,0,.26); transition: border-color .16s, transform .16s; }
.pcard-media { display: block; margin: -12px -13px 12px; position: relative; overflow: hidden; }
.pcard-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(94,240,168,.08); background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.16) 2px 3px); }
.pcard.fric .pcard-media::after { box-shadow: inset 0 0 0 1px rgba(200,85,61,.1); }
.pcard-media canvas, .pcard-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pcard-media img { object-fit: cover; filter: grayscale(1) brightness(.78) contrast(1.06) sepia(.4) hue-rotate(90deg) saturate(1.3); }
.pcard.fric .pcard-media img { filter: grayscale(1) brightness(.78) contrast(1.06) sepia(.5) hue-rotate(-20deg) saturate(1.5); }
.pcard-media:hover img, .pcard-media:hover canvas { filter: none; opacity: 1; }
a.pcard-media:hover::after { box-shadow: inset 0 0 0 1px rgba(94,240,168,.3); }
.pcard.fwd { border-left-color: var(--accent-dim); }
.pcard.fric { border-left-color: var(--strike); }
.pcard.fwd:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.pcard.fric:hover { border-color: var(--strike); transform: translateY(-1px); }
.pcard-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.pcard-dom { display: inline-block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; }
.pcard.fwd .pcard-dom { color: var(--accent-dim); }
.pcard.fric .pcard-dom { color: var(--strike); }
.pcard-impact { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 6px; border-radius: 20px; }
.pcard-impact.up { color: var(--mkt-up); background: rgba(94,240,168,.1); }
.pcard-impact.dn { color: var(--mkt-dn); background: rgba(232,103,78,.1); }
.pcard-h { margin: 0 0 6px; font-size: 13.5px; line-height: 1.34; color: #eef3ff; font-weight: 500; }
/* `anywhere`, not `break-word`: it also shrinks the min-content size, which is what
   lets an auto-min grid track collapse back to the container. Feed bodies carry raw
   source text — an HN item's "Article URL: https://…" is one 1,400px-wide word, and
   it dragged the whole sector board off the side of the phone. */
.pcard-b { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--ink-dim); overflow-wrap: anywhere; }
.pcard-h, .pcard-why { overflow-wrap: anywhere; }
.pcard-src { font-size: 10.5px; letter-spacing: .03em; color: var(--ink-faint); }
.pcard-read { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .08em; color: var(--mint, #5ef0a8); text-decoration: none; border-bottom: 1px dotted rgba(94, 240, 168, .45); }
.pcard-read:hover { border-bottom-style: solid; }

.pull-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 12px; border-left: 1px solid var(--ink-faint); border-right: 1px solid var(--ink-faint); }
.mid-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-dim); }
.mid-date { font-size: 11px; color: var(--ink-faint); margin-top: -4px; }
.tug { width: 100%; margin-top: 8px; }
.tug-ascii { margin: 0; width: 100%; font-family: var(--mono); font-size: clamp(9px, 2.4vw, 13px); line-height: 1; letter-spacing: -.5px; text-align: center; white-space: pre; overflow: hidden; }
.tug-ascii .g-fric { color: var(--strike); }
.tug-ascii .g-fwd { color: var(--accent); text-shadow: var(--glow); }
.tug-ascii .g-knot { color: #eef3ff; text-shadow: var(--glow-strong); }
.tug-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.tug-ends b { font-size: 12px; }
.tug-ends .e-fric b { color: var(--strike); }
.tug-ends .e-fwd b { color: var(--accent); text-shadow: var(--glow); }
.mid-verdict { text-align: center; margin-top: 8px; font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.mid-verdict.v-up { color: var(--accent); text-shadow: var(--glow); }
.mid-verdict.v-mid { color: var(--warn); }
.mid-verdict.v-down { color: var(--strike); }
.mid-note { text-align: center; margin: 6px 0 0; font-size: 10px; line-height: 1.45; color: var(--ink-faint); }
.mid-graph { width: 100%; margin-top: auto; padding-top: 12px; }

@media (max-width: 820px) {
  .pull-board { grid-template-columns: 1fr; grid-template-rows: none; gap: 22px; overflow-y: auto; }
  .pull-col, .pcards { overflow: visible; min-height: 0; flex: none; }
  .col-fwd { text-align: left; }
  .pull-mid { order: -1; border: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: 16px; }
}

/* THE GOAL view */
.goal-view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 2; overflow-y: auto; padding: 10px 22px 44px; background: linear-gradient(180deg, rgba(6,10,24,.86), rgba(6,10,24,.97)); }
.social-view { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; z-index: 2; overflow-y: auto; padding: 10px 22px 44px; background: linear-gradient(180deg, rgba(6,10,24,.86), rgba(6,10,24,.97)); }
.social-view .goal-head, .social-view .pull-comms { max-width: 880px; margin-left: auto; margin-right: auto; }
.social-view .pull-comms { margin-top: 22px; }
.social-view .pull-log { max-height: 52vh; overflow-y: auto; }
.goal-head { max-width: 1180px; margin: 0 auto 22px; }
.goal-split { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 20px; align-items: start; }
.goal-detail-pane { position: sticky; top: 0; border: 1px solid var(--ink-faint); background: rgba(6, 10, 24, .45); padding: 22px 24px; min-height: 62vh; }
.goal-detail-pane .goal-detail-card { width: auto; max-height: none; overflow: visible; margin: 0; padding: 0; border: none; background: none; box-shadow: none; animation: none; }
.gd-sigil-wrap { display: flex; justify-content: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ink-faint); }
.gd-sigil { display: block; }
.goal-cat.active { border-color: var(--accent-dim); background: rgba(94, 240, 168, .05); }
.goal-cat.active .goal-cat-caret { color: var(--accent); text-shadow: var(--glow); }
/* minmax(0,…), not 1fr — a bare 1fr floors at min-content, and the category rows'
   min-content (idx + name + bar + arrow + caret) is ~371px, so the caret was clipped
   off the right edge of a 342px phone column */
@media (max-width: 820px) { .goal-split { grid-template-columns: minmax(0, 1fr); } .goal-detail-pane { position: static; min-height: 0; } }
.goal-title { font-size: clamp(20px, 3.4vw, 30px); font-weight: 600; letter-spacing: .04em; color: #eef3ff; text-shadow: var(--glow); }
.goal-tag { color: var(--ink-dim); font-size: 13px; margin: 6px 0 16px; }
.goal-status { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; }
.gs-item { font-size: 12px; letter-spacing: .04em; color: var(--ink-faint); text-transform: uppercase; }
.gs-item b { font-size: 20px; letter-spacing: .02em; margin-right: 5px; }
.gs-item.st-acc b { color: var(--accent); text-shadow: var(--glow); }
.gs-item.st-mix b { color: var(--warn); }
.gs-item.st-flr b { color: var(--strike); }
.goal-grand-bar { position: relative; height: 14px; border: 1px solid var(--ink-faint); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.03); }
.goal-grand-bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.goal-grand-pct { margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.goal-grand-pct b { color: var(--accent); text-shadow: var(--glow); font-size: 18px; }

.goal-cats { display: flex; flex-direction: column; gap: 7px; }
.goal-cat { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--ink-faint); border-radius: 0; background: rgba(0,0,0,.3); cursor: pointer; font-family: var(--mono); color: inherit; -webkit-appearance: none; appearance: none; transition: border-color .15s, background .15s; }
.goal-cat:hover { border-color: var(--ink-dim); background: rgba(255,255,255,.025); }
.goal-cat-idx { flex: none; min-width: 1.9em; font-size: 22px; font-weight: 300; line-height: 1; color: var(--ink-faint); letter-spacing: .01em; }
.goal-st { flex: none; width: 14px; text-align: center; font-size: 12px; }
.st-acc { color: var(--accent); text-shadow: var(--glow); }
.st-mix { color: var(--warn); }
.st-flr { color: var(--strike); }
.goal-cat-name { flex: 1; font-size: 13.5px; letter-spacing: .06em; color: #eef3ff; }
.goal-cat-name small { display: block; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .02em; margin-top: 2px; }
.goal-cat-tag { flex: none; font-size: 11px; letter-spacing: .06em; }
.goal-cat-tag.st-acc { color: var(--accent); }
.goal-cat-tag.st-mix { color: var(--warn); }
.goal-cat-tag.st-flr { color: var(--strike); }
.goal-bar { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,.04); overflow: hidden; }
.goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: var(--glow); }
.goal-cat-pct { flex: none; width: 42px; text-align: right; font-size: 12px; color: var(--accent); }
.goal-cat-caret { flex: none; color: var(--ink-faint); transition: transform .2s; }
.goal-cat.open .goal-cat-caret { transform: rotate(90deg); }
.goal-subs { display: none; padding: 2px 16px 14px; }
.goal-cat.open .goal-subs { display: block; }
.goal-sub { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--ink-faint); }
.goal-sub-name { flex: 1; font-size: 12.5px; color: var(--ink-dim); }
.goal-sub .goal-bar { flex: none; width: 180px; }
.goal-sub-pct { flex: none; width: 36px; text-align: right; font-size: 11px; color: var(--ink-faint); }
@media (max-width: 620px) { .goal-sub .goal-bar { width: 90px; } }

/* the goal — click-in detail card */
.goal-detail-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(3, 6, 18, .74); display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.goal-detail-overlay[hidden] { display: none; }
.goal-detail-card { width: min(540px, 100%); max-height: 86vh; overflow-y: auto; margin: auto; background: rgba(6, 10, 24, .98); border: 1px solid var(--accent-dim); border-radius: 0; padding: 26px; box-shadow: 0 14px 56px rgba(0,0,0,.6); animation: fadeUp .3s ease; }
.gd-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 21px; font-weight: 600; letter-spacing: .07em; color: #eef3ff; text-shadow: var(--glow); }
.gd-pill { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 20px; padding: 2px 10px; font-weight: 400; }
.gd-pill.st-acc { color: var(--accent); } .gd-pill.st-mix { color: var(--warn); } .gd-pill.st-flr { color: var(--strike); }
.gd-sub { color: var(--ink-faint); font-size: 12px; letter-spacing: .04em; margin-top: 7px; }
.gd-sec { margin-top: 20px; }
.gd-sec-h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-dim); margin-bottom: 9px; }
.gd-li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
.gd-li:last-child { margin-bottom: 0; }
.gd-li::before { content: '·'; position: absolute; left: 3px; color: var(--accent-dim); }
.gd-note { margin-top: 16px; font-size: 12px; font-style: italic; color: var(--ink-faint); }
.gd-subs { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ink-faint); display: flex; flex-direction: column; gap: 9px; }
.gd-subs .goal-sub { border-top: none; padding: 0; }
.gd-subs .goal-sub .goal-bar { width: 150px; }
.gd-src { margin-top: 18px; font-size: 11px; color: var(--ink-faint); line-height: 1.7; }
.gd-src a { color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); }
.gd-src a:hover { color: var(--accent); }
.goal-method { max-width: 760px; margin: 12px auto 0; font-size: 11px; color: var(--ink-faint); letter-spacing: .02em; }
.gd-meth { margin-top: 12px; padding: 9px 11px; border-left: 2px solid var(--ink-faint); background: rgba(255,255,255,.015); font-size: 11px; font-style: italic; color: var(--ink-faint); line-height: 1.55; }
.gd-traj-row { display: flex; align-items: center; gap: 14px; }
.gd-spark { flex: none; margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1; letter-spacing: -.5px; white-space: pre; }
.gd-spark.dir-up { color: var(--strike); }
.gd-spark.dir-down { color: var(--accent); text-shadow: var(--glow); }
.gd-spark.dir-flat { color: var(--warn); }
.gd-traj-cap { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.gd-sig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 9px 0; border-top: 1px solid var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.gd-sig-d { flex: none; font-size: 10px; letter-spacing: .08em; color: var(--accent-dim); }
.gd-sig-t { flex: 1; min-width: 55%; color: var(--ink); }
.gd-sig-s { flex: none; color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); font-size: 11px; }
.gd-sig-s:hover { color: var(--accent); }
@media (max-width: 620px) { .goal-detail-card { padding: 20px; } .gd-subs .goal-sub .goal-bar { width: 80px; } .gd-traj-row { flex-direction: column; align-items: flex-start; gap: 8px; } }

.pull-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 11px; color: var(--ink-faint); pointer-events: none; }
.pull-legend .lg-fwd { color: var(--accent-dim); }
.pull-legend .lg-fric { color: var(--strike); }

.pull-detail { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; width: min(380px, 88%); background: rgba(6, 10, 24, .96); border: 1px solid var(--accent-dim); border-radius: 8px; padding: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6), var(--glow); animation: fadeUp .28s ease; }
.pull-detail.fric { border-color: var(--strike); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.pull-detail .pd-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-dim); }
.pull-detail.fric .pd-tag { color: var(--strike); }
.pull-detail h4 { margin: 10px 0; font-size: 18px; line-height: 1.3; color: #eef3ff; }
.pull-detail p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.pull-detail .pd-src { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }
.pull-detail .pd-sig { font-size: 11px; color: var(--accent-dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
.pull-detail.fric .pd-sig { color: var(--strike); }
.pull-detail .pd-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.pull-timeline { margin-top: auto; }
.pull-tl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pull-tl-head > span:first-child { color: var(--accent-dim); }
.pull-tl-sub { text-transform: none; letter-spacing: .02em; }
.pull-tl-bars { position: relative; display: flex; justify-content: flex-start; align-items: stretch; gap: 3px; height: 56px; }
.pull-tl-bars::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-faint); }
.tl-cell { position: relative; flex: 1 1 0; min-width: 3px; max-width: 14px; cursor: pointer; }
.tl-up { position: absolute; left: 0; right: 0; bottom: 50%; height: 0; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); border-radius: 2px 2px 0 0; opacity: .75; transition: height .35s ease; }
.tl-dn { position: absolute; left: 0; right: 0; top: 50%; height: 0; background: linear-gradient(180deg, rgba(200,85,61,.85), var(--strike)); border-radius: 0 0 2px 2px; opacity: .7; transition: height .35s ease; }
.tl-cell:hover .tl-up, .tl-cell:hover .tl-dn { opacity: 1; }
.tl-cell.today .tl-up { box-shadow: var(--glow); }
.tl-cell.today .tl-up, .tl-cell.today .tl-dn { opacity: 1; }

/* day panel — what happened that day */
.pull-day { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 3; width: min(460px, 92%); max-height: 76vh; overflow: auto; background: rgba(6, 10, 24, .97); border: 1px solid var(--accent-dim); border-radius: 0; padding: 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); animation: fadeUp .28s ease; }
.day-list { margin-top: 14px; display: flex; flex-direction: column; }
.day-row { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--ink-faint); }
.day-row:last-child { border-bottom: none; }
.day-mk { font-size: 11px; line-height: 1.5; flex: none; }
.day-row.fwd .day-mk { color: var(--accent); text-shadow: var(--glow); }
.day-row.fric .day-mk { color: var(--strike); }
.day-row.post .day-mk, .day-row.note .day-mk { color: var(--ink-dim); }
.day-main { font-size: 13.5px; color: #eef3ff; line-height: 1.4; }
.day-row.post .day-main { color: var(--ink); }
.day-sub { font-size: 10px; color: var(--ink-faint); letter-spacing: .06em; margin-top: 3px; text-transform: uppercase; }
.pull-tl-axis { display: flex; justify-content: space-between; margin-top: 5px; font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); }

.pull-comms { margin-top: 16px; }
.pull-log { display: flex; flex-direction: column-reverse; gap: 4px; margin-bottom: 10px; max-height: 110px; overflow: hidden; }
.pull-log .line { font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
.pull-log .line b { color: var(--accent); text-shadow: var(--glow); font-weight: 500; }
.pull-log .line.fresh { animation: postIn .9s ease; }
.pull-log .line.cli { color: var(--accent-dim); letter-spacing: .02em; }
.pull-log .line.sys { color: var(--ink-faint); }
.pull-form { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--ink-faint); padding-top: 12px; }
.pull-prompt { color: var(--accent); text-shadow: var(--glow); }
.pull-form input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 14px; caret-color: var(--accent); }

@media (max-width: 620px) {
  .pull-top { gap: 10px; }
  .pull-meter { order: 3; max-width: none; flex-basis: 100%; }
  .pull-legend { font-size: 10px; gap: 12px; }
  /* the composer wraps: prompt + field on top, send on its own row. Squeezed into one
     row the field was ~150px wide and swallowed the placeholder that names the commands. */
  .pull-form { flex-wrap: wrap; gap: 8px 10px; }
  .pull-form input { flex: 1 1 auto; font-size: 16px; }   /* 16px — anything smaller makes iOS zoom the page on focus */
  .pull-form .btn { flex: 0 0 auto; margin-left: auto; }
}

.devskip { position: fixed; bottom: 10px; right: 12px; z-index: 9500; font-size: 10px; color: var(--ink-faint); letter-spacing: .1em; opacity: .5; }
.devskip a { color: var(--accent-dim); cursor: pointer; text-decoration: underline; }

/* ── THE ROOM (top-down 70s opening) ── */
.room-wrap { width: min(680px, 100%); margin: auto; text-align: center; position: relative; }
.room-cap { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--warn); margin-bottom: 14px; }
.room-cap span { color: var(--ink-faint); }
.room-canvas { display: block; width: min(640px, 92vw); height: auto; margin: 0 auto; border: 2px solid #3a2614; box-shadow: 0 0 0 1px rgba(94,240,168,.08), 0 16px 50px rgba(0,0,0,.6); background: #120b06; }
.room-hint { margin-top: 14px; font-size: 11px; letter-spacing: .08em; color: var(--ink-faint); }
.room-prompt { margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: var(--accent); text-shadow: var(--glow); }

/* ── in-world dialogue bubble ── */
#room-bubble { position: absolute; transform: translate(-50%, calc(-100% - 10px)); max-width: 260px; min-width: 120px; padding: 9px 11px; z-index: 6; pointer-events: none; text-align: left; background: rgba(8,12,11,.96); border: 1px solid var(--accent-dim); box-shadow: var(--glow), 0 8px 26px rgba(0,0,0,.6); font-family: var(--mono); }
#room-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg); background: rgba(8,12,11,.96); border-right: 1px solid var(--accent-dim); border-bottom: 1px solid var(--accent-dim); }
#room-bubble b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--warn); margin-bottom: 5px; }
#room-bubble span { display: block; font-size: 12px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; max-height: 132px; overflow-y: auto; pointer-events: auto; scrollbar-width: thin; }
/* branching dialogue: clickable options (the bubble is pointer-events:none; re-enable on the buttons) */
.bub-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; }
.bub-opt { pointer-events: auto; cursor: pointer; display: block; width: 100%; text-align: left; font-family: var(--mono); font-size: 11px; line-height: 1.35; color: var(--accent); background: rgba(94,240,168,.06); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 6px 9px; transition: background .14s; }
.bub-opt:hover { background: rgba(94,240,168,.18); }
.bub-back { color: var(--ink-dim); border-color: var(--ink-faint); background: none; margin-top: 8px; }
.bub-back:hover { background: rgba(255,255,255,.04); }
/* identity panel — the keeper's name + look prompt */
#room-custom { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); z-index: 8; width: min(320px, 86%); padding: 14px 16px; background: rgba(8,12,11,.97); border: 1px solid var(--accent-dim); box-shadow: var(--glow), 0 12px 34px rgba(0,0,0,.65); font-family: var(--mono); text-align: left; }
#room-custom b { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--warn); margin-bottom: 4px; }
#room-custom .rc-q { display: block; font-size: 12px; line-height: 1.5; color: var(--ink); margin: 8px 0 6px; }
#room-custom .rc-name { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 13px; color: var(--ink); background: rgba(94,240,168,.06); border: 1px solid var(--accent-dim); border-radius: 3px; padding: 7px 9px; outline: none; }
#room-custom .rc-name:focus { border-color: var(--accent); }
#room-custom .rc-name + .rc-name { margin-top: 6px; }
#room-custom .rc-fig { display: block; margin: 4px auto 2px; width: 55px; height: 85px; image-rendering: pixelated; background: rgba(94,240,168,.05); border: 1px solid var(--accent-dim); border-radius: 3px; }
#room-custom .rc-row { display: flex; align-items: center; gap: 5px; margin: 6px 0; }
#room-custom .rc-row i { width: 44px; flex: none; font-style: normal; font-size: 9px; letter-spacing: .12em; color: var(--ink-dim); text-transform: uppercase; }
#room-custom .rc-sw { width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(255,255,255,.22); cursor: pointer; padding: 0; }
#room-custom .rc-sw.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
#room-custom .rc-err { display: block; color: var(--warn); font-size: 11px; margin-top: 6px; }
#room-custom .rc-ok { margin-top: 10px; }
/* editor: an option → answer pair in the Story tab */
.ed-opt { display: flex; flex-direction: column; gap: 5px; padding: 7px; border: 1px solid var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.015); }

/* ── level editor ── */
#room-edit-toggle { position: absolute; top: 0; right: 0; width: 30px; height: 30px; z-index: 7; background: rgba(8,12,11,.85); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-size: 15px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; }
#room-edit-toggle:hover { color: var(--accent); border-color: var(--accent-dim); }
#room-edit-toggle.on { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }
#room-editor { margin-top: 16px; text-align: left; border: 1px solid var(--ink-faint); background: rgba(7,9,8,.6); font-family: var(--mono); }
#room-editor[hidden] { display: none; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.03); }
.ed-title { font-size: 11px; letter-spacing: .22em; color: var(--accent); text-shadow: var(--glow); }
.ed-lab { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 5px; }
.ed-status { margin-left: auto; font-size: 11px; color: var(--accent); opacity: .85; }
.ed-body { display: grid; grid-template-columns: 1fr 200px; gap: 0; }
@media (max-width: 620px) { .ed-body { grid-template-columns: 1fr; } }
.ed-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; padding: 10px; align-content: start; max-height: 280px; overflow: auto; border-right: 1px solid var(--ink-faint); }
.ed-asset { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 9px; letter-spacing: .04em; cursor: grab; transition: border-color .12s, color .12s, background .12s; }
.ed-asset:hover { border-color: var(--accent-dim); color: var(--ink); }
.ed-asset.armed { border-color: var(--accent); color: var(--accent); background: rgba(94,240,168,.07); box-shadow: var(--glow); }
.ed-thumb { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.ed-side { padding: 10px; display: flex; flex-direction: column; gap: 12px; }
.ed-props, .ed-scene { display: flex; flex-direction: column; gap: 7px; }
.ed-scene { border-top: 1px dashed var(--ink-faint); padding-top: 12px; }
.ed-phead { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); }
.ed-hint { font-size: 11px; line-height: 1.5; color: var(--ink-dim); margin: 0; }
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-field { display: flex; flex-direction: column; gap: 3px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.ed-input { width: 100%; padding: 4px 6px; background: #0a0d0c; border: 1px solid var(--ink-faint); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.ed-input:focus { outline: none; border-color: var(--accent-dim); }
.ed-area { resize: vertical; min-height: 46px; line-height: 1.45; }
.ed-color { padding: 2px; height: 26px; cursor: pointer; }
.ed-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink); text-transform: none; letter-spacing: .02em; cursor: pointer; }
.ed-check input { accent-color: var(--accent); }
.ed-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ed-btn { padding: 5px 9px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; cursor: pointer; transition: border-color .12s, color .12s; }
.ed-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.ed-btn.warn:hover { border-color: #e8553d; color: #e8553d; }
.ed-btn.done { border-color: var(--accent-dim); color: var(--accent); }
.ed-input.sm { font-size: 11px; padding: 3px 5px; }

/* editor — all-spaces overview panel */
.ed-count { color: var(--ink-dim); }
.ed-space-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; }
.ed-space-row { display: flex; align-items: stretch; gap: 4px; }
.ed-space-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 5px 8px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); cursor: pointer; transition: border-color .12s, color .12s; }
.ed-space-pick:hover { border-color: var(--accent-dim); color: var(--accent); }
.ed-space-row.on .ed-space-pick { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ed-space-name { font-size: 12px; letter-spacing: .04em; }
.ed-space-meta { font-size: 9px; letter-spacing: .04em; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-space-del { width: 26px; flex: none; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 13px; line-height: 1; cursor: pointer; transition: border-color .12s, color .12s; }
.ed-space-del:hover { border-color: #e8553d; color: #e8553d; }

/* editor — uploaded-image palette column */
.ed-palwrap { border-right: 1px solid var(--ink-faint); display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.ed-palwrap .ed-pal { border-right: 0; }
.ed-pal-h { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); padding: 4px 10px; border-top: 1px dashed var(--ink-faint); }
.ed-pal-img { padding-top: 6px; }
.ed-pal-img .ed-thumb { object-fit: cover; background: #0a0d0c; }
@media (max-width: 620px) { .ed-palwrap { border-right: 0; border-bottom: 1px solid var(--ink-faint); max-height: 260px; } }

/* ── editor: full-height edge rails, game centered between them ── */
#room-editor { margin: 0; border: 0; background: none; }
.ed-rail { position: fixed; top: 0; bottom: 0; width: 234px; z-index: 60; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 16px; overflow-y: auto; font-family: var(--mono); background: rgba(6,8,7,.95); border-right: 1px solid var(--ink-faint); box-shadow: 0 0 32px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ed-rail-l { left: 0; }
.ed-rail-r { right: 0; left: auto; width: 304px; border-right: 0; border-left: 1px solid var(--ink-faint); }
.ed-rail-h { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-dim); padding-bottom: 6px; border-bottom: 1px solid var(--ink-faint); }
.ed-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-rail .ed-pal { max-height: none; overflow: visible; border-right: 0; padding: 4px 0; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.ed-rail-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ink-faint); }
.ed-rail .ed-status { font-size: 10px; color: var(--ink-dim); padding-top: 4px; }
.ed-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ink-faint); }
.ed-tab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; padding: 9px 4px; cursor: pointer; }
.ed-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.ed-tab-pane { display: flex; flex-direction: column; gap: 12px; }
.ed-tab-pane[hidden] { display: none; }
/* story playback — the cutscene beat list (Conversation/Story tab) */
.ed-steps { display: flex; flex-direction: column; gap: 3px; }
.ed-step { border: 1px solid var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.015); }
.ed-step.open { border-color: var(--accent-dim); }
.ed-step-r { display: flex; align-items: stretch; }
.ed-step-h { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px; background: none; border: 0; color: var(--ink-dim); font-family: var(--mono); font-size: 10.5px; text-align: left; cursor: pointer; }
.ed-step-h b { color: var(--warn); font-weight: 600; }
.ed-step-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-step.open .ed-step-h, .ed-step-h:hover { color: var(--ink); }
.ed-mini { width: 24px; flex: none; background: none; border: 0; border-left: 1px solid var(--ink-faint); color: var(--ink-dim); font-family: var(--mono); font-size: 11px; cursor: pointer; }
.ed-mini:hover { color: var(--accent); }
.ed-mini.warn:hover { color: #e8553d; }
.ed-step-edit { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-top: 1px dashed var(--ink-faint); }
.ed-json { font-size: 10.5px; min-height: 40px; }
/* ── THE TIMELINE DOCK — the editor's bottom half. beats on a seconds ruler, one track per
   performer, a playhead you can throw around. sized to be worked in, not squinted at. ── */
#room-timeline { position: fixed; left: 250px; right: 320px; bottom: 0; z-index: 58; display: flex; flex-direction: column; height: 246px; background: linear-gradient(180deg, rgba(7,11,10,.97), rgba(5,8,7,.99)); border-top: 1px solid var(--ink-faint); box-shadow: 0 -14px 40px rgba(0,0,0,.6); font-family: var(--mono); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#room-timeline[hidden] { display: none; }
.tl-grab { flex: none; height: 7px; margin-top: -4px; cursor: ns-resize; background: transparent; position: relative; }
.tl-grab::after { content: ''; position: absolute; left: 50%; top: 2px; width: 46px; height: 3px; margin-left: -23px; border-radius: 2px; background: var(--ink-faint); transition: background .15s; }
.tl-grab:hover::after { background: var(--accent-dim); }

/* transport bar */
.tl-bar { flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.025); }
.tl-spring { flex: 1; }
.tl-tbtn { flex: none; min-width: 30px; height: 26px; padding: 0 8px; background: rgba(255,255,255,.025); border: 1px solid var(--ink-faint); border-radius: 3px; color: var(--ink-dim); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.tl-tbtn:hover { color: var(--accent); border-color: var(--accent-dim); }
.tl-tbtn.on { color: var(--accent); border-color: var(--accent-dim); background: rgba(94,240,168,.09); }
.tl-tbtn.sm { height: 24px; font-size: 10px; min-width: 24px; padding: 0 6px; }
.tl-go { color: var(--accent); border-color: var(--accent-dim); background: rgba(94,240,168,.08); }
.tl-go:hover { background: rgba(94,240,168,.18); box-shadow: var(--glow); }
.tl-time { flex: none; min-width: 56px; font-size: 11.5px; color: var(--ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
#room-timeline.scrubbing .tl-time { color: #eef3f4; text-shadow: 0 0 8px rgba(238,243,244,.55); }
.tl-what { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-zoomlab { flex: none; font-size: 10px; color: var(--ink-dim); min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }

/* body: fixed name gutter + scrolling lanes */
.tl-body { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.tl-names { flex: none; width: 104px; border-right: 1px solid var(--ink-faint); background: rgba(0,0,0,.22); overflow: hidden; will-change: transform; }
.tl-namehead { height: 22px; line-height: 22px; padding: 0 8px; font-size: 8.5px; letter-spacing: .2em; color: var(--accent-dim); border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.03); }
.tl-name { height: 26px; line-height: 26px; margin-top: 4px; padding: 0 8px; font-size: 10px; letter-spacing: .03em; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 2px solid transparent; }
.tl-name.cast { color: #ffb59f; border-left-color: rgba(255,138,115,.5); }
.tl-name.prop { color: #7fd9e4; border-left-color: rgba(54,214,231,.5); }
.tl-name.sys  { color: var(--ink-dim); border-left-color: var(--ink-faint); }
.tl-track { position: relative; flex: 1; min-width: 0; overflow: auto; }
.tl-inner { position: relative; display: flex; flex-direction: column; width: max-content; min-width: 100%; min-height: 100%; }

/* the ruler */
.tl-ruler { position: relative; flex: none; height: 22px; border-bottom: 1px solid var(--ink-faint); background: rgba(94,240,168,.03); cursor: crosshair; touch-action: none; }
.tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(94,240,168,.13); }
.tl-tick.maj { background: rgba(94,240,168,.3); }
.tl-tick[data-lab]::after { content: attr(data-lab); position: absolute; left: 4px; top: 4px; font-size: 8.5px; letter-spacing: .06em; color: var(--ink-dim); white-space: nowrap; }

/* lanes */
.tl-rows { position: relative; flex: 1; padding-top: 4px; cursor: crosshair; touch-action: none; }
.tl-tr { position: relative; height: 26px; margin-bottom: 4px; border-radius: 3px; background: rgba(255,255,255,.016); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018); }
.tl-tr.drop { background: rgba(94,240,168,.09); outline: 1px dashed var(--accent-dim); }
.tl-vis { position: absolute; top: 21px; height: 3px; border-radius: 2px; background: var(--accent); opacity: .4; pointer-events: none; }
/* room bands — where an episode is standing at each moment */
.tl-band { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(180,140,242,.45); background: rgba(180,140,242,.045); pointer-events: none; z-index: 0; }
.tl-band::after { content: attr(data-lab); position: absolute; left: 5px; bottom: 3px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(180,140,242,.75); white-space: nowrap; }

/* the playhead */
.tl-head { position: absolute; top: 0; width: 2px; background: #eef3f4; box-shadow: 0 0 9px rgba(238,243,244,.8); pointer-events: none; z-index: 6; }
.tl-head::before { content: ''; position: absolute; top: 0; left: -4px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #eef3f4; }
.tl-head[hidden] { display: none; }

/* beat blocks */
.tl-beat { position: absolute; top: 2px; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border: 1px solid; border-radius: 3px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; z-index: 2; }
.tl-beat:hover { filter: brightness(1.25); z-index: 3; }
.tl-beat:active { cursor: grabbing; }
.tl-beat.dragging { opacity: .35; }
.tl-beat.withprev { border-left-width: 3px; border-left-style: solid; }
.tl-chain { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }
.tl-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; border-left: 1px dashed rgba(255,255,255,.3); }
.tl-grip:hover { background: rgba(255,255,255,.12); }
.tl-ins { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 7px var(--accent); z-index: 5; }
.tl-ins.with { background: #f4c95d; box-shadow: 0 0 7px #f4c95d; }
.tl-ins[hidden] { display: none; }
/* dialogue waits for the player, so its width is an estimate — the hatching says "roughly this long" */
.tl-say  { border-color: #f4c95d; color: #f4c95d; background: repeating-linear-gradient(45deg, rgba(244,201,93,.16) 0 5px, rgba(244,201,93,.05) 5px 10px); }
.tl-move { border-color: #36d6e7; color: #36d6e7; background: rgba(54,214,231,.09); }
.tl-walk { border-color: #ff8a73; color: #ff8a73; background: rgba(255,138,115,.09); }
.tl-cast { border-color: #b48cf2; color: #b48cf2; background: rgba(180,140,242,.09); }
.tl-fx   { border-color: #e8553d; color: #e8553d; background: rgba(232,85,61,.11); }
.tl-wait { border-color: #8a93a6; color: #8a93a6; background: rgba(138,147,166,.08); }
.tl-goto { border-color: #b48cf2; color: #d9c3ff; background: rgba(180,140,242,.16); }
.tl-vid  { border-color: #eef3f4; color: #eef3f4; background: rgba(238,243,244,.10); }
.tl-pose, .tl-fade, .tl-misc { border-color: var(--accent-dim); color: var(--accent); background: rgba(94,240,168,.07); }

/* portal room-picker: tap a room to link the selected asset to it */
.ed-roompick { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 4px; }
.ed-roombtn { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-dim); background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); border-radius: 3px; padding: 5px 9px; cursor: pointer; transition: color .14s, border-color .14s, background .14s; }
.ed-roombtn:hover { color: var(--ink); border-color: var(--ink-dim); }
.ed-roombtn.on { color: #06120d; background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ── inspector bits in the right rail ── */
.ed-inspect-h { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.02); }
.ed-inspect-t { flex: none; padding: 2px 6px; border: 1px solid; border-radius: 2px; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }
.ed-inspect-s { font-size: 10px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-adv { border-top: 1px dashed var(--ink-faint); padding-top: 6px; }
.ed-adv summary { cursor: pointer; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.ed-adv summary:hover { color: var(--ink); }
.ed-adv .ed-json { margin-top: 6px; }
.ed-tilerow { display: flex; align-items: center; gap: 6px; }
.ed-tileval { flex: none; min-width: 46px; font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
/* the beat palette — plain english, colour-coded to the timeline */
.ed-beatpal { display: flex; flex-wrap: wrap; gap: 4px; }
.ed-beatadd { padding: 5px 8px; border: 1px solid; border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; cursor: pointer; text-align: left; transition: filter .12s; }
.ed-beatadd:hover { filter: brightness(1.35); }
/* episode browser */
.ed-eplist { display: flex; flex-direction: column; gap: 4px; }
.ed-eprow { display: flex; align-items: stretch; gap: 4px; }
.ed-eppick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 6px 9px; background: rgba(255,255,255,.02); border: 1px solid var(--ink-faint); border-radius: 3px; color: var(--ink-dim); font-family: var(--mono); cursor: pointer; transition: border-color .12s, color .12s; }
.ed-eppick:hover { border-color: var(--accent-dim); color: var(--accent); }
.ed-eprow.on .ed-eppick { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ed-epname { font-size: 12px; letter-spacing: .03em; }
.ed-epmeta { font-size: 9px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* asset search */
.ed-search { width: 100%; padding: 5px 8px; background: #0a0d0c; border: 1px solid var(--ink-faint); border-radius: 3px; color: var(--ink); font-family: var(--mono); font-size: 11px; }
.ed-search:focus { outline: none; border-color: var(--accent-dim); }
.ed-search::placeholder { color: var(--ink-dim); }

/* the stage gets out of the timeline's way while editing */
#s-room.editing { padding-left: 250px; padding-right: 320px; padding-bottom: var(--tl-h, 246px); }
@media (max-width: 980px) {
  .ed-rail { width: 196px; } .ed-rail-r { width: 196px; }
  #s-room.editing { padding-left: 204px; padding-right: 204px; }
  #room-timeline { left: 204px; right: 204px; }
}
@media (max-width: 680px) {
  #s-room.editing { padding: 0 0 40vh; }
  .ed-rail { top: auto; bottom: 0; height: 46vh; width: 50%; box-shadow: 0 -10px 24px rgba(0,0,0,.5); }
  .ed-rail-l { left: 0; border-right: 1px solid var(--ink-faint); }
  .ed-rail-r { right: 0; }
  #room-timeline { display: none; }
}

/* editor — paint / block / draw-asset controls */
.ed-ctl { display: inline-flex; align-items: center; gap: 5px; }
.ed-ctl[hidden] { display: none; }
.ed-btn.mode.on, .ed-btn.brush.on, .ed-btn.on { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }
.ed-btn.brush { min-width: 22px; padding: 5px 6px; }
.ac-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(2,5,4,.74); }
.ac-box { background: #0a0d0c; border: 1px solid var(--accent-dim); box-shadow: var(--glow-strong), 0 20px 60px rgba(0,0,0,.7); padding: 16px; width: min(320px, 94vw); display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); }
.ac-canvas { width: 256px; height: 256px; max-width: 100%; align-self: center; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--ink-faint); background: #0c100e; cursor: crosshair; touch-action: none; }
.ac-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-tools { gap: 4px; border-top: 1px dashed var(--ink-faint); border-bottom: 1px dashed var(--ink-faint); padding: 6px 0; }
.ac-tools .ed-btn.tool { padding: 5px 8px; }
.ac-pal { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-sw { width: 20px; height: 20px; border: 1px solid var(--ink-faint); border-radius: 0; cursor: pointer; padding: 0; }
.ac-sw:hover { border-color: var(--accent); }
/* full hue × shade swatch grid (paint tool + draw-asset modal) */
.sw-grid { display: grid; grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; gap: 2px; justify-content: start; max-width: 100%; overflow-x: auto; }
.sw-grid[hidden] { display: none; }
.sw-grid.sw-bar { flex-basis: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--ink-faint); }
.sw { width: 15px; height: 15px; border: 1px solid rgba(0,0,0,.28); border-radius: 0; cursor: pointer; padding: 0; }
.sw:hover { outline: 1px solid var(--accent); outline-offset: 1px; position: relative; z-index: 1; }

/* ── room atmosphere: scanline pass + story textbox + touch d-pad ── */
.room-crt { position: absolute; z-index: 5; pointer-events: none; mix-blend-mode: overlay; opacity: .55; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); }
#room-seq { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 8; width: min(560px, 88%); padding: 10px 14px 12px; text-align: left; background: rgba(6,10,9,.94); border: 1px solid var(--accent-dim); box-shadow: var(--glow), 0 10px 30px rgba(0,0,0,.65); font-family: var(--mono); cursor: pointer; }
#room-seq[hidden] { display: none; }
#room-seq b { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); margin-bottom: 5px; }
#room-seq b[hidden] { display: none; }
#room-seq span { display: block; min-height: 2.9em; font-size: 12.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
#room-seq i { display: block; margin-top: 6px; font-style: normal; font-size: 9px; letter-spacing: .18em; color: var(--accent-dim); text-align: right; animation: seqblink 1.1s steps(2) infinite; }
@keyframes seqblink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #room-seq i { animation: none; } }
#room-story-reset { position: absolute; top: 34px; right: 10px; z-index: 5; padding: 5px 9px; background: rgba(8,12,11,.78); color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 3px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; cursor: pointer; }
#room-story-reset:hover { background: rgba(94,240,168,.16); border-color: var(--accent); }
#room-story-reset[hidden] { display: none; }
#room-pad { display: none; }
@media (pointer: coarse) {
  #room-pad { position: fixed; left: 14px; bottom: 16px; z-index: 70; display: grid; grid-template-areas: '. u .' 'l a r' '. d .'; gap: 7px; }
  #room-pad button { width: 46px; height: 46px; border-radius: 10px; background: rgba(8,12,11,.72); border: 1px solid var(--accent-dim); color: var(--accent); font-size: 17px; font-family: var(--mono); -webkit-tap-highlight-color: transparent; touch-action: none; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
  #room-pad button.on { background: rgba(94,240,168,.22); }
  #room-pad .pad-u { grid-area: u; } #room-pad .pad-d { grid-area: d; } #room-pad .pad-l { grid-area: l; } #room-pad .pad-r { grid-area: r; }
  #room-pad .pad-a { grid-area: a; border-color: var(--warn); color: var(--warn); }
}

/* ── admin section ── */
/* block flow so tall content scrolls from the top instead of being flex-centred (matches dash/intro) */
#s-admin.active, #s-gallery.active { display: block; }
.admin-stage { width: min(820px, 100%); margin: auto; text-align: left; }
#admin-root { display: flex; flex-direction: column; gap: 18px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink-faint); padding-bottom: 14px; }
.admin-who { font-family: var(--mono); font-size: 13px; color: var(--accent); text-shadow: var(--glow); margin-top: 4px; word-break: break-all; }
.admin-pwd { margin-top: 10px; }
.admin-pwd summary { cursor: pointer; font-size: 12px; color: var(--ink-dim); letter-spacing: .04em; }
.admin-pwd summary:hover { color: var(--ink); }
.admin-pwd .field { margin-top: 10px; }
.admin-section { display: flex; flex-direction: column; gap: 10px; }
.admin-h { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--warn); margin: 0; }
.admin-uprow { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.admin-drop { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 16px; border: 1px dashed var(--ink-dim); background: rgba(94,240,168,.02); color: var(--ink-dim); font-size: 12px; cursor: pointer; transition: border-color .15s, color .15s, background .15s; text-align: center; }
.admin-drop:hover, .admin-drop.over { border-color: var(--accent); color: var(--accent); background: rgba(94,240,168,.06); }
.admin-drop-ico { font-size: 22px; line-height: 1; }
.admin-file { display: none; }
.admin-status { font-family: var(--mono); font-size: 12px; color: var(--accent); margin: 0; }
.admin-status.err { color: #e8553d; }
.admin-empty { font-size: 12px; color: var(--ink-dim); }
/* members & activity + access control */
.admin-stats { display: flex; flex-direction: column; gap: 10px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { flex: 1 1 90px; border: 1px solid var(--ink-faint); padding: 8px 10px; background: rgba(7,9,8,.5); }
.stat-n { font-family: var(--mono); font-size: 22px; color: var(--accent); text-shadow: var(--glow); line-height: 1.1; }
.stat-l { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-top: 2px; }
.admin-recent-h { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.admin-recent { display: flex; flex-direction: column; gap: 3px; }
.rec-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; }
.rec-email { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-time { color: var(--ink-faint); flex: none; }
.admin-members { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.member-row { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--ink-faint); }
.member-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.member-dot.admin { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.member-email { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.member-meta { color: var(--ink-faint); flex: none; font-size: 11px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.admin-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--ink-faint); padding: 8px; background: rgba(7,9,8,.5); }
.admin-thumb { aspect-ratio: 1 / 1; background: #0a0d0c; border: 1px solid var(--ink-faint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.admin-thumb img { max-width: 100%; max-height: 100%; image-rendering: auto; }
.admin-card-name { font-size: 11px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── public gallery ── */
.gallery-stage { width: min(960px, 100%); margin: auto; text-align: left; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 18px 0; }
.gal-item { margin: 0; border: 1px solid var(--ink-faint); background: rgba(7,9,8,.5); overflow: hidden; }
.gal-item img { display: block; width: 100%; height: auto; }
.gal-item figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); padding: 7px 9px; border-top: 1px solid var(--ink-faint); }

/* ════════════════════════════════════════════════════════════════
   PREMIUM DASHBOARD REDESIGN
   OBSOLETE · "THE BROADSHEET" — premium elevation for the 3 inside views
   (the pull · the climb · the goal). Spine: editorial-lux, grafting the
   neo-swiss zero-axis spine + kinetic temperature-as-data + clip-path
   reveal. 100% ADDITIVE — append to END of styles.css; cascade wins.
   Targets only verified JS-emitted classes. GPU-only motion. RM-gated.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* modular type scale (~1.5) — layered ON TOP of existing sizes */
  --t-micro:10px; --t-cap:11px; --t-body:13px; --t-cardh:15px;
  --t-sech:22px; --t-feat:34px; --t-hero:clamp(40px,6vw,60px);  /* the single biggest figure per view */
  /* 8px spatial rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s12:48px;
  /* per-section signature colors — each tab owns a hue so the site reads colorful, not mono-mint */
  --c-pull:#5ef0a8; --c-climb:#f5d76e; --c-goal:#c98bff; --c-social:#3fd9ff; --c-frontier:#a78bfa; --c-occ:#6ea8ff;
  --sec-c:var(--accent);  /* current section's hue; each view overrides on its root */
  /* editorial materials — cool glass over space-navy */
  --plate: linear-gradient(180deg, rgba(199,214,240,.028), rgba(199,214,240,0) 42%), rgba(7,11,26,.52);
  --edge-hi: inset 0 1px 0 rgba(214,228,255,.06);
  --lift: 0 18px 40px -14px rgba(1,3,12,.65);
  --lift-sm: 0 8px 22px -10px rgba(1,3,12,.6);
  --ghost: rgba(110,168,255,.05);
  --bg-well: radial-gradient(120% 90% at 50% -8%, rgba(124,92,255,.06), transparent 60%);
  --b-ease: cubic-bezier(.2,.7,.2,1);
  --b-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── UNIVERSAL SECTION HEADER — one elegant voice on every tab (eyebrow + claim + purpose) ── */
.sec-head{ display:flex; flex-direction:column; gap:var(--s2); margin:0 0 var(--s6); }
.sec-eyebrow{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--sec-c); }
.sec-eyebrow::before{ content:''; width:18px; height:1px; background:var(--sec-c); box-shadow:0 0 7px var(--sec-c); flex:none; }
.sec-claim{ font-family:var(--disp); font-size:var(--t-sech); font-weight:600; line-height:1.16; letter-spacing:.01em; color:#eef3ff; margin:0; }
.sec-claim .hl{ color:var(--sec-c); text-shadow:0 0 22px color-mix(in srgb, var(--sec-c) 45%, transparent); }
.sec-purpose{ font-family:var(--mono); font-size:var(--t-body); line-height:1.55; color:var(--ink-dim); max-width:64ch; margin:0; }
.sec-chip{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:var(--s1); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--sec-c); border:1px solid color-mix(in srgb, var(--sec-c) 36%, transparent); border-radius:999px; padding:3px 10px; background:color-mix(in srgb, var(--sec-c) 7%, transparent); }
.sec-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sec-c); box-shadow:0 0 8px var(--sec-c); animation:secPulse 2.4s ease-in-out infinite; }
@keyframes secPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
/* section roots own their hue */
#pull-board{ --sec-c:var(--c-pull); }
#climb-view{ --sec-c:var(--c-climb); }
#goal-view{ --sec-c:var(--c-goal); }
#social-view{ --sec-c:var(--c-social); }
#frontier-view{ --sec-c:var(--c-frontier); }
#occupations-view{ --sec-c:var(--c-occ); }

/* ── PERSISTENT NARRATIVE RAIL — the thesis, always on screen ── */
.thesis-rail{ display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); margin:0 0 var(--s5); border:1px solid rgba(199,214,240,.14); border-radius:999px; background:linear-gradient(90deg, rgba(94,240,168,.07), rgba(63,217,255,.04) 40%, rgba(4,8,20,.3) 75%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.tr-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent); flex:none; animation:secPulse 2.4s ease-in-out infinite; }
.tr-text{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.tr-text b{ color:#dfeee7; font-weight:600; }
.tr-bar{ height:3px; border-radius:3px; background:var(--bg-soft); position:relative; overflow:hidden; flex:none; width:110px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.tr-bar i{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); box-shadow:var(--glow); border-radius:3px; transition:width .8s var(--b-ease); }
.tr-read{ margin-left:auto; font-family:var(--mono); font-size:var(--t-cap); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.tr-read.up{ color:var(--accent); } .tr-read.dn{ color:var(--strike); } .tr-read.mid{ color:var(--warn); }
/* the rail lays out as a 2-row grid on phones — a nowrap flex row shredded the three
   texts into interleaved columns. (`.tr-text:last-of-type` never matched: :last-of-type
   is per element TYPE, and the last span in the rail is .tr-read, not a .tr-text.) */
@media (max-width:760px){
  .thesis-rail{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:7px 10px; align-items:center; padding:10px 12px; }
  .tr-dot{ grid-area:1 / 1; }
  .thesis-rail .tr-text:not(#tr-bar-lab){ grid-area:1 / 2 / 2 / 4; }
  .tr-read{ grid-area:2 / 3; margin-left:0; justify-self:end; }
  .tr-bar{ grid-area:2 / 1 / 3 / 3; width:auto; }
  #tr-bar-lab{ display:none; }
}

/* ── VIEW-ENTER MOTION — fluent tab switches, no hard cuts ── */
.view-enter > .sec-head{ animation:bsRise .42s var(--b-ease) both .04s; }
.view-enter > .thesis-rail{ animation:bsRise .42s var(--b-ease) both; }
@media (prefers-reduced-motion:reduce){ .view-enter > *{ animation:none !important; } }

/* tabular, slashed-zero numerals everywhere a metric actually lives.
   (cosmetic alignment only — climb-card-big values like "5.2×" / "42% → 11%"
   are non-numeric, so this never promises a real aligned column.) */
.tug-ends b, .climb-val, .climb-card-big, .goal-sub-pct, .goal-cat-idx,
.mid-date, .gs-item, .pull-tl-axis, .gd-spark{
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ── shared hairline CORNER-TICK frame (blueprint registration marks) ──
   the single cheapest cross-page signature; reused on all three views. */
.pull-mid, .goal-detail-pane, .climb-card{ position:relative; }
.pull-mid::before, .goal-detail-pane::before, .climb-card::before{
  content:''; position:absolute; top:-1px; left:-1px; width:9px; height:9px;
  border-top:1px solid var(--accent-dim); border-left:1px solid var(--accent-dim);
  opacity:.5; pointer-events:none; z-index:3;
}
.pull-mid::after, .goal-detail-pane::after, .climb-card::after{
  content:''; position:absolute; bottom:-1px; right:-1px; width:9px; height:9px;
  border-bottom:1px solid var(--accent-dim); border-right:1px solid var(--accent-dim);
  opacity:.5; pointer-events:none; z-index:3;
}

/* the universal entrance — reveal along the grid axis (clip-path inset).
   Pure clip/opacity: zero layout thrash and it NEVER touches the
   whitespace-sensitive .cb-fill / .tug-ascii <pre> internals. */
@media (prefers-reduced-motion:no-preference){
  @keyframes bsReveal{ from{ opacity:0; clip-path:inset(0 36% 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
  @keyframes bsRevealR{ from{ opacity:0; clip-path:inset(0 0 0 36%); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
  @keyframes bsRise{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
  @keyframes bsFade{ from{ opacity:0; transform:translateY(8px); } }
}

/* ═══════════════════ THE PULL — the cover / centerfold ═══════════════════ */

/* host the ghosted cover numeral + a focal light field directly on the board
   (it is already display:grid; add positioning + a behind-content layer). */
.pull-board{ position:relative; gap:var(--s6); }
.pull-board > *{ position:relative; z-index:1; }
.pull-board::before{
  content:'PULL'; position:absolute; left:50%; top:46%; z-index:0;
  transform:translate(-50%,-50%); pointer-events:none; user-select:none;
  font-family:var(--disp); font-weight:200; line-height:.8; white-space:nowrap;
  font-size:clamp(120px,26vw,340px); letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px var(--ghost);
}
.pull-board::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 50%, rgba(94,240,168,.05), transparent 70%);
}

/* the center column becomes a floating glass CENTERFOLD pillar */
.pull-mid{
  z-index:2; gap:var(--s3); padding:var(--s4) var(--s4) var(--s3);
  border-left:1px solid transparent; border-right:1px solid transparent;
  border-radius:2px;
  background:
    radial-gradient(120% 80% at 50% 28%, rgba(94,240,168,.06), transparent 70%),
    var(--plate);
  box-shadow:var(--edge-hi), var(--lift);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  isolation:isolate;
}
.mid-label{ font-size:var(--t-micro); letter-spacing:.26em; color:var(--accent-dim); }
.mid-date{ letter-spacing:.12em; }

/* HERO STAT: oversized stacked tabular percentages as the cover figure.
   .e-fric / .e-fwd become a small wide LEGEND over a big READOUT figure. */
.tug-ends{ margin-top:var(--s3); align-items:baseline; }
.e-fric, .e-fwd{
  display:flex; flex-direction:column; gap:2px;
  font-size:9px; letter-spacing:.18em; line-height:1.3;
}
.e-fwd{ text-align:right; }
.tug-ends b{
  font-size:clamp(30px,7vw,52px); font-weight:300; letter-spacing:-.02em;
  line-height:.9;
}
.tug-ends .e-fwd b{ text-shadow:var(--glow); }

/* the tug bar: calm ambient tension shimmer along the forward blocks
   (background-position only — pre internals untouched) */
.tug{ width:100%; }
.tug-ascii{ padding:var(--s2) 0; }
@media (prefers-reduced-motion:no-preference){
  .tug-ascii .g-fwd{
    background:linear-gradient(90deg, var(--accent) 0%, #baffd9 50%, var(--accent) 100%);
    background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:tugShimmer 4.5s linear infinite;
  }
  @keyframes tugShimmer{ to{ background-position:200% 0; } }
}

/* VERDICT promoted to a display masthead — the SINGLE glow-strong hero of
   this view — with a glyph prefix + a wash that tracks v-up/v-mid/v-down. */
.mid-verdict{
  width:100%; box-sizing:border-box; text-align:center; margin-top:var(--s4);
  font-size:clamp(18px,3.1vw,27px); font-weight:600; letter-spacing:-.01em;
  line-height:1.16; text-wrap:balance; overflow-wrap:break-word;
  padding:var(--s3) var(--s4); border-radius:2px;
  border:1px solid var(--ink-faint); background:rgba(0,0,0,.25);
  box-shadow:var(--edge-hi);
  animation:bsRise .5s var(--b-spring) both;
}
.mid-verdict::before{ font-size:.58em; margin-right:.42em; opacity:.85; vertical-align:.08em; }
.mid-verdict.v-up{
  color:var(--accent); text-shadow:var(--glow-strong);
  background:radial-gradient(120% 150% at 50% 0%, rgba(94,240,168,.09), transparent 70%);
}
.mid-verdict.v-up::before{ content:'▲'; }
.mid-verdict.v-mid{
  color:var(--warn);
  background:radial-gradient(120% 150% at 50% 0%, rgba(232,179,74,.09), transparent 70%);
}
.mid-verdict.v-mid::before{ content:'◆'; }
.mid-verdict.v-down{
  color:var(--strike);
  background:radial-gradient(120% 150% at 50% 0%, rgba(200,85,61,.11), transparent 70%);
}
.mid-verdict.v-down::before{ content:'▼'; }

.mid-note{ font-size:var(--t-micro); letter-spacing:.04em; max-width:32ch; margin:var(--s3) auto 0; }
.mid-graph{ padding-top:var(--s4); border-top:1px solid var(--ink-faint); }
.pull-tl-head{ font-size:var(--t-micro); letter-spacing:.16em; }

/* ── pcards → editorial plates: depth + emit/absorb + dealt-in cascade ── */
.pcard{
  background:var(--plate);
  box-shadow:var(--edge-hi), var(--lift-sm);
  transition:border-color .18s var(--b-ease), transform .2s var(--b-ease), box-shadow .2s var(--b-ease);
}
.pcard.fwd:hover{
  transform:translateY(-2px);
  box-shadow:var(--edge-hi), 0 14px 30px -12px rgba(0,0,0,.7), 0 0 22px -8px rgba(94,240,168,.22);
}
.pcard.fric:hover{
  transform:translateY(-2px);
  box-shadow:var(--edge-hi), 0 14px 30px -12px rgba(0,0,0,.7);
}
/* keep the existing scanline ::after; add a vignette under it, non-destructively */
.pcard-media::after{
  background:
    repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.16) 2px 3px),
    radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%);
}
/* SIGNAL ● call-out — reads the procedural canvas as an intentional plate.
   (.pcard-media is position:relative for both <a> and <div> variants.) */
.pcard-media::before{
  content:'SIGNAL ●'; position:absolute; left:8px; bottom:7px; z-index:2;
  font-size:8px; letter-spacing:.22em; color:rgba(234,255,243,.72);
  opacity:0; transform:translateY(3px); transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.pcard-media:hover::before{ opacity:1; transform:none; }
.pcard-h{ font-size:var(--t-cardh); line-height:1.28; letter-spacing:-.004em; }
.pcard-dom{ font-size:8.5px; letter-spacing:.2em; }

/* dealt-in cascade: friction enters from the left, forward from the right.
   nth-child gives the wave with no JS index needed (--i optional, below). */
@media (prefers-reduced-motion:no-preference){
  .col-fric .pcards .pcard{ animation:bsReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
  .col-fwd  .pcards .pcard{ animation:bsRevealR .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
  .pcards .pcard:nth-child(1){ animation-delay:.04s; }
  .pcards .pcard:nth-child(2){ animation-delay:.10s; }
  .pcards .pcard:nth-child(3){ animation-delay:.16s; }
  .pcards .pcard:nth-child(4){ animation-delay:.22s; }
  .pcards .pcard:nth-child(n+5){ animation-delay:.28s; }
}

/* timeline: spring-grown bars + today breathes (the gauge already glow-strong,
   but the breathing is a soft oscillation, not a second static hero glow) */
.tl-up{ transition:height .45s var(--b-spring); }
.tl-dn{ transition:height .45s var(--b-spring); }
.tl-cell{ transition:transform .2s var(--b-ease); }
.tl-cell:hover{ transform:scaleY(1.06); }
@media (prefers-reduced-motion:no-preference){
  .tl-cell.today .tl-up{ animation:todayBreath 3.4s ease-in-out infinite; }
  @keyframes todayBreath{
    0%,100%{ box-shadow:0 0 4px rgba(94,240,168,.4); }
    50%{ box-shadow:0 0 10px rgba(94,240,168,.7), 0 0 20px rgba(94,240,168,.22); }
  }
}

/* day panel: floating + blurred-in */
.pull-day{
  position:absolute;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--edge-hi), 0 24px 70px -18px rgba(0,0,0,.8);
}
.pull-backdrop{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

/* ═══════════════════ THE CLIMB — the divergence spread ═══════════════════ */

/* lit well behind the view for plane separation */
.climb-view{ position:absolute; }
.climb-view::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--bg-well); opacity:.9;
}
.climb-view .goal-head, .climb-layout{ position:relative; z-index:1; }

.climb-layout{ gap:var(--s8); }

/* ghosted section numerals as cover art + the GRAFTED ZERO-AXIS SPINE */
.climb-cols{ position:relative; gap:var(--s6) var(--s8); }
.climb-cols::before{
  content:'01'; position:absolute; left:-.06em; top:-.34em; z-index:0; pointer-events:none;
  font-family:var(--disp); font-weight:200; line-height:.8;
  font-size:clamp(64px,11vw,140px);
  color:transparent; -webkit-text-stroke:1px rgba(94,240,168,.05);
}
.climb-cols::after{
  content:'02'; position:absolute; right:-.06em; top:-.34em; z-index:0; pointer-events:none;
  font-family:var(--disp); font-weight:200; line-height:.8;
  font-size:clamp(64px,11vw,140px);
  color:transparent; -webkit-text-stroke:1px rgba(200,85,61,.06);
}
.climb-col{ position:relative; z-index:1; }
/* the true vertical zero-axis spine + "0%" datum tick (desktop two-col only) */
@media (min-width:721px){
  .climb-cols{ background:
    linear-gradient(180deg, transparent, var(--ink-faint) 10%, var(--ink-faint) 90%, transparent) center / 1px 100% no-repeat; }
  .climb-cols .climb-col:first-child::after{
    content:'0%'; position:absolute; top:-22px; right:-16px; z-index:2;
    font-family:var(--mono); font-size:9px; letter-spacing:.16em;
    color:var(--ink-dim); font-variant-numeric:tabular-nums;
  }
}

.climb-h{ font-size:var(--t-cap); letter-spacing:.2em; margin-bottom:var(--s4); }
.climb-bars{ gap:18px; }

/* each row: editorial tick + a pulled-out tabular figure; clip-reveal
   on the ROW (never on the .cb-fill <pre>) keeps the ASCII bar intact. */
.climb-row{ position:relative; align-items:baseline; padding-left:var(--s3); transition:transform .16s var(--b-ease); }
.climb-row::before{
  content:''; position:absolute; left:0; top:6px; width:6px; height:1px;
  background:var(--ink-dim); transition:width .18s, background .18s, box-shadow .18s;
}
.climb-row:hover{ transform:translateX(2px); }
.climb-row:hover::before{ width:10px; }
.climb-col:first-child .climb-row:hover::before{ background:var(--accent); box-shadow:var(--glow); }
.climb-lab span{ letter-spacing:-.004em; }
.climb-bar{ font-size:14px; }
.climb-val{ font-size:16px; font-weight:500; letter-spacing:-.01em; }
.climb-val.down{ text-shadow:var(--glow); }
@media (prefers-reduced-motion:no-preference){
  .climb-bars .climb-row{ animation:bsReveal .42s var(--b-ease) both; }
  .climb-bars .climb-row:nth-child(1){ animation-delay:.02s; }
  .climb-bars .climb-row:nth-child(2){ animation-delay:.07s; }
  .climb-bars .climb-row:nth-child(3){ animation-delay:.12s; }
  .climb-bars .climb-row:nth-child(4){ animation-delay:.17s; }
  .climb-bars .climb-row:nth-child(5){ animation-delay:.22s; }
  .climb-bars .climb-row:nth-child(n+6){ animation-delay:.27s; }
}

/* then→now cards = editorial plates; temperature-as-data emit/absorb */
.climb-card{
  background:var(--plate); border-radius:0; padding:var(--s4);
  box-shadow:var(--edge-hi), var(--lift-sm);
  transition:transform .2s var(--b-ease), box-shadow .2s var(--b-ease);
}
.climb-card:hover{ transform:translateY(-2px); box-shadow:var(--edge-hi), var(--lift), 0 0 24px -10px rgba(94,240,168,.22); }
.climb-card-big{ font-size:clamp(28px,4vw,44px); font-weight:300; letter-spacing:-.02em; line-height:.95; }
.climb-card-t{ font-size:var(--t-body); margin-top:var(--s2); }
.climb-card-s{ font-size:10.5px; margin-top:var(--s2); }
/* FLAGSHIP lead card (the 5.2× goods card) — the single glow-strong hero */
.climb-cards .climb-card:first-child{
  padding:var(--s6) var(--s4); border-top-width:3px;
  background:radial-gradient(120% 140% at 0% 0%, rgba(94,240,168,.07), transparent 60%), var(--plate);
}
.climb-cards .climb-card:first-child .climb-card-big{
  font-size:clamp(40px,6vw,64px); text-shadow:var(--glow-strong);
}
/* the rising-cost 7× card ABSORBS light — heavy oxblood wash, no glow */
.climb-card.up{
  background:radial-gradient(120% 140% at 100% 0%, rgba(200,85,61,.10), transparent 60%), var(--plate);
}
.climb-card.up .climb-card-big{ color:var(--strike); }
@media (prefers-reduced-motion:no-preference){
  .climb-card{ animation:bsFade .5s var(--b-ease) both; }
  .climb-cards .climb-card:nth-child(1){ animation-delay:.04s; }
  .climb-cards .climb-card:nth-child(2){ animation-delay:.12s; }
  .climb-cards .climb-card:nth-child(3){ animation-delay:.20s; }
  .climb-cards .climb-card:nth-child(4){ animation-delay:.28s; }
  .climb-card.up .climb-card-big{ animation:rustWarn 4.2s ease-in-out infinite; }
  @keyframes rustWarn{
    0%,100%{ text-shadow:0 0 6px rgba(200,85,61,.18); }
    50%{ text-shadow:0 0 14px rgba(200,85,61,.4); }
  }
}

/* ═══════════════════ THE GOAL — the contents / specimen plate ═══════════════════ */

.goal-view{ position:absolute; }
.goal-view::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--bg-well); opacity:.9;
}
.goal-head, .goal-split{ position:relative; z-index:1; }

.goal-head{ margin-bottom:var(--s8); }
.goal-title{ letter-spacing:.02em; text-shadow:0 0 1px rgba(94,240,168,.5), 0 0 18px rgba(94,240,168,.12); animation:bsRise .6s var(--b-ease) both; }
.goal-tag{ animation:bsFade .6s var(--b-ease) both .1s; }

/* status badges → an oversized tabular STAT STRIP (wide legend over big figure) */
.goal-status{ gap:var(--s3) var(--s8); margin-top:var(--s4); align-items:baseline; }
.gs-item{ display:inline-flex; flex-direction:column-reverse; gap:2px; font-size:9px; letter-spacing:.2em; }
.gs-item b{
  font-size:clamp(26px,3.4vw,38px); font-weight:300; letter-spacing:-.02em;
  line-height:.9; margin:0; font-variant-numeric:tabular-nums slashed-zero;
}

.goal-split{ gap:var(--s6); }

/* roster reads as a magazine table-of-contents — hairline baselines + folios */
.goal-cats{ gap:0; border-top:1px solid var(--ink-faint); }
.goal-cat{
  position:relative; gap:var(--s4); padding:18px var(--s4);
  border-width:0; border-bottom:1px solid var(--ink-faint); border-radius:0;
  background:transparent;
  transition:background .18s var(--b-ease), transform .16s var(--b-ease), box-shadow .18s var(--b-ease);
}
.goal-cat:hover{ background:rgba(255,255,255,.02); }
/* left accent rule scales in on hover/active (the active emits a mint rim) */
.goal-cat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--accent); box-shadow:var(--glow);
  transform:scaleY(0); transform-origin:top;
  transition:transform .22s var(--b-ease);
}
.goal-cat:hover::before{ transform:scaleY(.4); }
.goal-cat.active{
  background:rgba(94,240,168,.05);
  box-shadow:var(--edge-hi), var(--lift-sm); transform:translateX(2px);
}
.goal-cat.active::before{ transform:scaleY(1); }
.goal-cat-idx{ font-size:clamp(24px,3.2vw,32px); font-weight:200; letter-spacing:0; opacity:.8; }
.goal-cat.active .goal-cat-idx{ color:var(--accent); text-shadow:var(--glow); opacity:1; }
.goal-cat-name{ letter-spacing:.03em; }
.goal-cat-caret{ transition:transform .3s var(--b-spring); }
.goal-cat.active .goal-cat-caret{ transform:translateX(3px); }
@media (prefers-reduced-motion:no-preference){
  .goal-cat{ animation:bsFade .45s var(--b-ease) both; animation-delay:calc(var(--i,0)*40ms); }
}

/* ── PROGRESS TO ABUNDANCE — hero meter + per-need distance rows ── */
.goal-meter{ margin:var(--s5) 0 var(--s4); padding:var(--s4) clamp(16px,2.4vw,22px); border:1px solid var(--ink-faint); border-left:2px solid var(--accent); border-radius:3px; background:linear-gradient(180deg, rgba(94,240,168,.05), rgba(94,240,168,.015)); box-shadow:var(--edge-hi), var(--lift); animation:bsRise .5s var(--b-ease) both .05s; }
.gm-label{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-dim); }
.gm-big{ margin:6px 0 12px; line-height:1.05; }
.gm-num{ font-size:clamp(38px,7vw,60px); font-weight:600; letter-spacing:-.02em; color:#eef3ff; text-shadow:0 0 1px rgba(94,240,168,.6), 0 0 26px rgba(94,240,168,.25); }
.gm-of{ font-size:clamp(12px,1.6vw,14px); color:var(--ink-dim); }
.gm-bar{ height:14px; border:1px solid var(--ink-faint); border-radius:999px; overflow:hidden; background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 5px, transparent 5px 11px); }
.gm-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), #bff7d6); box-shadow:0 0 12px rgba(94,240,168,.5); transition:width 1.1s var(--b-ease); }
.gm-gap{ margin-top:7px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-dim); }
.gm-cav{ margin-top:11px; font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-faint); }
.gm-two{ margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--ink-dim); }
.gm-two .gm-up{ color:var(--accent); font-weight:600; }
.gm-two .gm-dn{ color:var(--warn); font-weight:600; }
.goal-cat-prog{ flex:none; display:flex; align-items:center; gap:9px; }
.goal-cat-bar{ width:clamp(70px,11vw,120px); height:6px; border:1px solid var(--ink-faint); border-radius:999px; overflow:hidden; background:rgba(255,255,255,.04); }
.goal-cat-bar > span{ display:block; height:100%; border-radius:999px; background:var(--accent); box-shadow:0 0 8px rgba(94,240,168,.45); transition:width .9s var(--b-ease); }
.goal-cat.tr-up .goal-cat-bar > span{ background:var(--strike); box-shadow:none; }
.goal-cat.tr-flat .goal-cat-bar > span{ background:var(--warn); box-shadow:none; }
.goal-cat-pct{ flex:none; min-width:34px; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; color:var(--accent); }
.goal-cat.tr-up .goal-cat-pct{ color:var(--strike); }
.goal-cat.tr-flat .goal-cat-pct{ color:var(--warn); }
.goal-cat-gap{ flex:none; min-width:46px; font-family:var(--mono); font-size:10px; letter-spacing:.02em; color:var(--ink-faint); }
.goal-cat-arrow{ flex:none; width:1.1em; text-align:center; font-size:14px; }
.goal-cat-arrow.tr-down{ color:var(--accent); }
.goal-cat-arrow.tr-up{ color:var(--strike); }
.goal-cat-arrow.tr-flat{ color:var(--warn); }
@media (max-width:720px){ .goal-cat-gap{ display:none; } }
/* narrow phones: the row's fixed parts (22px index + 70px bar + pct + arrow + caret + four
   14px gaps) left no room for the need's own name, so the arrow and caret fell off the edge */
@media (max-width:400px){
  .goal-cat{ gap:9px; padding:13px 12px; }
  .goal-cat-idx{ font-size:16px; min-width:1.6em; }
  .goal-cat-prog{ gap:7px; }
  .goal-cat-bar{ width:52px; }
}

/* detail pane → floating glass FEATURE/SPECIMEN PLATE */
.goal-detail-pane{
  padding:var(--s6);
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(94,240,168,.05), transparent 65%),
    rgba(6,10,24,.55);
  border-color:transparent;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:var(--edge-hi), var(--lift);
}
.gd-title{ font-size:var(--t-sech); letter-spacing:.03em; }
.gd-sec{ margin-top:var(--s6); }
.gd-sec-h{ font-size:var(--t-micro); letter-spacing:.2em; margin-bottom:var(--s3); }
.gd-li{ font-size:var(--t-body); line-height:1.55; }

/* the SIGIL — the signature seal: breathing halo + slow tick-ring.
   transform + drop-shadow only (NO animated blur) — keeps it performant
   and provides this view's one allowed strong-glow moment. */
.gd-sigil-wrap{ position:relative; margin-bottom:var(--s6); padding-bottom:var(--s4); }
.gd-sigil{ position:relative; z-index:1; }
.gd-sigil-wrap::before{
  content:''; position:absolute; left:50%; top:calc(50% - 9px);
  width:118px; height:118px; transform:translate(-50%,-50%);
  border-radius:50%; border:1px dashed rgba(94,240,168,.16); z-index:0; pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .gd-sigil-wrap::before{ animation:sigilSpin 18s linear infinite; }
  .gd-sigil{ animation:sigilBreathe 5s ease-in-out infinite; }
  @keyframes sigilSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
  @keyframes sigilBreathe{
    0%,100%{ filter:drop-shadow(0 0 2px rgba(94,240,168,.3)); }
    50%{ filter:drop-shadow(0 0 9px rgba(94,240,168,.55)); }
  }
}

/* sub-need bars: depth + lit fill + staggered reveal */
.goal-bar{ box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
.goal-bar span{ box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.15); }
.goal-sub-pct{ font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion:no-preference){
  .gd-subs .goal-sub{ animation:bsFade .45s var(--b-ease) both; }
  .gd-subs .goal-sub:nth-child(2){ animation-delay:.05s; }
  .gd-subs .goal-sub:nth-child(3){ animation-delay:.10s; }
  .gd-subs .goal-sub:nth-child(4){ animation-delay:.15s; }
  .gd-subs .goal-sub:nth-child(n+5){ animation-delay:.20s; }
}
/* signal/source links: a calm spring underline */
.gd-sig-s, .gd-src a{ transition:color .2s var(--b-ease), border-color .2s var(--b-ease); }
.gd-sig-s:hover, .gd-src a:hover{ border-bottom-color:var(--accent); }

/* shared: nav active underline gets a faint bloom (cohesion touch) */
.nav-btn.active::after{ filter:drop-shadow(0 0 4px rgba(94,240,168,.5)); }

/* ═══════════════════ RESPONSIVE — keep the tug-of-war metaphor ═══════════════════ */
@media (max-width:820px){
  /* override the old order:-1 so the gauge sits BETWEEN the two sides:
     friction pulls from the top, forward rises from the bottom. */
  .col-fric{ order:-1; }
  .pull-mid{ order:0; border:1px solid var(--ink-faint); border-bottom:1px solid var(--ink-faint); border-radius:2px; box-shadow:var(--edge-hi), var(--lift); margin:var(--s4) 0; padding:var(--s4); }
  .col-fwd{ order:1; }
  .pull-board::before{ font-size:clamp(90px,40vw,200px); top:22%; }
  .climb-cols::before, .climb-cols::after{ font-size:clamp(50px,16vw,84px); }
}

/* ═══════════════════ REDUCED MOTION — collapse to static, keep the art ═══════════════════ */
@media (prefers-reduced-motion:reduce){
  .col-fric .pcards .pcard, .col-fwd .pcards .pcard,
  .climb-bars .climb-row, .climb-card, .climb-card.up .climb-card-big,
  .goal-cat, .gd-subs .goal-sub, .goal-title, .goal-tag,
  .mid-verdict, .tug-ascii .g-fwd, .tl-cell.today .tl-up,
  .gd-sigil, .gd-sigil-wrap::before{
    animation:none !important; clip-path:none !important; opacity:1 !important; transform:none !important;
  }
  .tug-ascii .g-fwd{ -webkit-text-fill-color:var(--accent); color:var(--accent); }
  .pcard:hover, .climb-card:hover, .climb-row:hover, .tl-cell:hover{ transform:none; }
  .tl-up, .tl-dn{ transition:height .25s ease; }
}

/* ════════════════════════════════════════════════════════════════
   THE PULL · PROGRESS MARKET — index + sector board (replaces the tug gauge)
   ════════════════════════════════════════════════════════════════ */
:root{ --mkt-up:#5ef0a8; --mkt-dn:#e8674e; }
@keyframes mktRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes mktReveal{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.pull-board.mkt{ display:flex; flex-direction:column; gap:var(--s6); overflow-y:auto; overflow-x:hidden; padding-bottom:var(--s8); }
.pull-board.mkt > *{ flex:0 0 auto; }   /* don't let flexbox squash the chart/legend/detail */

/* the index hero */
.mkt-index{ position:relative; padding:var(--s6) clamp(16px,3vw,30px); border-radius:16px; border:1px solid rgba(199,214,240,.13); background:var(--plate); box-shadow:var(--edge-hi), var(--lift), 0 0 60px -30px rgba(124,92,255,.35); overflow:hidden; animation:mktRise .5s var(--b-ease) both; }
.mkt-index::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 120% at 12% -10%, rgba(124,92,255,.09), transparent 55%), radial-gradient(90% 90% at 100% 0%, rgba(63,217,255,.06), transparent 50%); pointer-events:none; }
.mkt-index-top{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; }
.mkt-index-lead{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mkt-legend{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.mkt-date{ color:var(--ink-faint); letter-spacing:.1em; }
.mkt-index-val{ font-family:var(--mono); font-variant-numeric:tabular-nums slashed-zero; font-size:clamp(42px,8vw,76px); line-height:.96; font-weight:600; color:var(--ink); text-shadow:0 0 30px rgba(255,255,255,.06); }
.mkt-change{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(15px,2.4vw,20px); font-weight:600; letter-spacing:.02em; }
.mkt-change.up{ color:var(--mkt-up); text-shadow:var(--glow); }
.mkt-change.dn{ color:var(--mkt-dn); }
.mkt-index-spark{ width:min(48%,460px); height:104px; display:block; }
.mkt-verdict{ position:relative; margin-top:var(--s4); font-size:clamp(20px,3.4vw,30px); font-weight:600; letter-spacing:-.01em; line-height:1.1; text-wrap:balance; }
.mkt-verdict::before{ font-size:.62em; margin-right:.4em; vertical-align:.06em; opacity:.9; }
.mkt-verdict.v-up{ color:var(--mkt-up); text-shadow:var(--glow-strong); } .mkt-verdict.v-up::before{ content:'▲'; }
.mkt-verdict.v-mid{ color:var(--warn); } .mkt-verdict.v-mid::before{ content:'◆'; }
.mkt-verdict.v-down{ color:var(--mkt-dn); } .mkt-verdict.v-down::before{ content:'▼'; }
.mkt-note{ margin-top:var(--s2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--ink-faint); max-width:64ch; }

/* the pull · progress-index chart (main graph) */
.mkt-chart{ display:block; width:100%; height:210px; margin:var(--s4) 0 var(--s2); touch-action:pan-y; cursor:default; outline:none; }
.mkt-chart.has-hover{ cursor:pointer; }
@media (max-width:860px){ .mkt-chart{ height:180px; } }
.mkt-day{ margin:var(--s3) 0 var(--s2); border:1px solid var(--ink-faint); border-left:2px solid var(--mkt-up); border-radius:3px; padding:var(--s3) clamp(12px,2.2vw,18px); background:var(--plate); box-shadow:var(--edge-hi), var(--lift); animation:mktRise .35s var(--b-ease) both; }
.mkt-day[hidden]{ display:none; }
.mkt-day-h{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3); }
.mkt-day-date{ font-family:var(--mono); font-size:var(--t-body); letter-spacing:.04em; color:var(--ink); font-weight:600; }
.mkt-day-move{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-body); font-weight:600; }
.mkt-day-move.up{ color:var(--mkt-up); } .mkt-day-move.dn{ color:var(--mkt-dn); }
.mkt-day-x{ margin-left:auto; }
.mkt-day-broad{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--mkt-up); margin-bottom:var(--s2); }
.mkt-day-chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s3); }
.mkt-day-chips .mkt-chip{ font-variant-numeric:tabular-nums; }
.mkt-day-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:var(--s4); }
.mkt-headline{ position:relative; margin-top:var(--s4); font-size:clamp(17px,2.7vw,23px); font-weight:600; letter-spacing:-.005em; line-height:1.24; color:var(--ink); text-wrap:balance; }

/* the sector board */
.mkt-sectors{ display:flex; flex-direction:column; }
.mkt-board-h{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) 96px 86px; gap:var(--s3); padding:0 var(--s4) var(--s2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--ink-faint); }
.mkt-board-h .mkt-th-trend{ text-align:center; } .mkt-board-h .mkt-th-net,.mkt-board-h .mkt-th-chg{ text-align:right; }
.mkt-rows{ display:flex; flex-direction:column; }
.mkt-row{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) 96px 86px; gap:var(--s3); align-items:center; width:100%; text-align:left; padding:var(--s3) var(--s4); background:none; border:0; border-bottom:1px solid var(--ink-faint); border-left:2px solid transparent; cursor:pointer; font-family:inherit; color:var(--ink); transition:background .2s var(--b-ease), transform .2s var(--b-ease), border-left-color .2s var(--b-ease); animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0) * 40ms); }
.mkt-row:hover{ background:rgba(94,240,168,.04); transform:translateX(2px); }
.mkt-row.on{ background:rgba(255,255,255,.04); border-left-color:var(--c,var(--accent)); }
.mkt-row-name{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mkt-sym{ font-size:var(--t-cardh); font-weight:600; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mkt-blurb{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.mkt-row-spark{ width:100%; max-width:210px; height:34px; display:block; margin:0 auto; opacity:.95; }
.mkt-row-net{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-body); font-weight:600; }
.mkt-row.up .mkt-row-net{ color:var(--mkt-up); } .mkt-row.dn .mkt-row-net{ color:var(--mkt-dn); }
.mkt-row-chg{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-cap); color:var(--ink-dim); }

/* drill-down detail */
.mkt-detail{ border:1px solid var(--ink-faint); border-radius:3px; padding:var(--s4) clamp(14px,2.4vw,22px); background:var(--plate); box-shadow:var(--edge-hi), var(--lift); animation:mktRise .4s var(--b-ease) both; }
.mkt-detail[hidden]{ display:none; }
.mkt-detail-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s3); }
.mkt-detail-t{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.mkt-detail-name{ font-size:var(--t-sech); font-weight:600; letter-spacing:-.01em; }
.mkt-detail-chg{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-body); font-weight:600; }
.mkt-detail-chg.up{ color:var(--mkt-up); } .mkt-detail-chg.dn{ color:var(--mkt-dn); }
.mkt-detail-doms{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }
.mkt-chip{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--ink-faint); border-radius:999px; }
.mkt-chip.up{ color:var(--mkt-up); border-color:rgba(94,240,168,.4); } .mkt-chip.dn{ color:var(--mkt-dn); border-color:rgba(232,103,78,.4); }
.mkt-detail-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--s4); }
.mkt-empty{ font-family:var(--mono); font-size:var(--t-body); color:var(--ink-dim); }

/* ── THE FRONTIER LEDGER — released vs coming-soon, by sector ── */
.led-board{ display:flex; flex-direction:column; gap:var(--s5); }
.led-filter{ position:sticky; top:0; z-index:5; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3) 0; background:linear-gradient(180deg, var(--bg) 72%, transparent); }
.led-secfilter{ display:flex; flex-wrap:wrap; gap:6px; }
.led-fchip{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:none; border:1px solid var(--ink-faint); border-radius:999px; padding:3px 9px; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.led-fchip:hover{ color:var(--ink); }
.led-fchip.on{ color:#06120d; background:var(--c, var(--accent)); border-color:var(--c, var(--accent)); }
.led-streamtoggle{ display:flex; gap:2px; }
.led-streamtoggle button{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); background:none; border:1px solid var(--ink-faint); padding:4px 12px; cursor:pointer; }
.led-streamtoggle button.on{ color:var(--accent); border-color:var(--accent-dim); background:rgba(94,240,168,.06); }
.led-stream.off{ display:none; }
.led-stream-h{ display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; padding-bottom:var(--s2); border-bottom:1px solid var(--ink-faint); margin-bottom:var(--s4); }
.led-stream-label{ font-size:clamp(15px,2.4vw,20px); font-weight:600; letter-spacing:.06em; color:#eef3ff; text-shadow:0 0 16px rgba(94,240,168,.18); }
.led-stream-soon .led-stream-label{ color:var(--accent); }
.led-count{ font-family:var(--mono); font-size:11px; color:var(--accent-dim); }
.led-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.02em; }
.led-secs{ display:flex; flex-direction:column; gap:var(--s5); }
.led-sec{ animation:bsFade .4s var(--b-ease) both; animation-delay:calc(var(--i,0)*45ms); }
.led-sec-h{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0; border-left:2px solid var(--c, var(--accent)); padding:4px 0 4px 10px; margin-bottom:var(--s3); cursor:pointer; font-family:var(--mono); color:inherit; }
.led-dot{ width:8px; height:8px; border-radius:50%; background:var(--c, var(--accent)); box-shadow:0 0 8px var(--c, var(--accent)); flex:none; }
.led-sec-name{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#eef3ff; }
.led-sec-blurb{ font-size:10.5px; color:var(--ink-faint); }
.led-sec-ct{ margin-left:auto; font-size:11px; color:var(--c, var(--accent)); font-variant-numeric:tabular-nums; }
.led-sec.collapsed .led-cards{ display:none; }
.led-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--s4); }
.led-empty{ padding:var(--s4) 0; }
.pcard-soon{ border-left-style:dashed; border-left-color:var(--accent-dim); opacity:.9; }
.pcard-soon .pcard-b{ opacity:.85; }
.pcard-eta{ font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--accent); background:rgba(94,240,168,.08); border:1px solid var(--accent-dim); border-radius:20px; padding:2px 7px; }
/* minmax(0,·), not a bare 1fr: `1fr` is `minmax(auto,1fr)`, and a card's auto
   minimum inflated the single track to 405px inside a 348px grid — every card in
   "by sector" hung ~57px past the right edge of the phone. */
@media (max-width:560px){ .led-cards{ grid-template-columns:minmax(0,1fr); } }

@media (max-width:720px){
  .mkt-index-top{ flex-direction:column; align-items:flex-start; }
  .mkt-index-spark{ width:100%; height:84px; }
  .mkt-board-h,.mkt-row{ grid-template-columns:minmax(0,1fr) 86px 74px; }
  .mkt-board-h .mkt-th-trend,.mkt-row-spark{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .mkt-index,.mkt-row,.mkt-detail{ animation:none !important; } }

/* the pull · timeframe tabs */
.pull-board.mkt .mkt-index-top{ align-items:flex-start; }
.mkt-tabs{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--ink-faint); border-radius:999px; background:rgba(0,0,0,.28); align-self:flex-start; }
.mkt-tab{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); background:none; border:0; padding:6px 13px; border-radius:999px; cursor:pointer; transition:color .15s var(--b-ease), background .15s var(--b-ease); }
.mkt-tab:hover{ color:var(--ink); }
.mkt-tab.on{ color:#04130f; background:var(--accent); box-shadow:var(--glow); font-weight:600; }
@media (max-width:620px){ .mkt-tab{ padding:5px 10px; } }

/* radial vignette to seat the index hero in the CRT void */
.mkt-index::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(46% 120% at 50% 56%, rgba(94,240,168,.05), transparent 60%);
}
@media (prefers-reduced-motion: reduce){
  .mkt-index::after{ animation: none !important; }
}
.mkt-leg-h{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s3); }

/* ── COLORFUL GRAPHICS — sector hue carries the data, not just mint ── */
/* goal rows: color = which need (domain), bar length = how close to free, arrow = trajectory */
.goal-cat-bar > span,
.goal-cat.tr-up .goal-cat-bar > span,
.goal-cat.tr-flat .goal-cat-bar > span{
  background:linear-gradient(90deg, color-mix(in srgb, var(--row-c, var(--accent)) 34%, transparent), var(--row-c, var(--accent)));
  box-shadow:0 0 9px color-mix(in srgb, var(--row-c, var(--accent)) 42%, transparent);
}
.goal-cat-idx{ color:color-mix(in srgb, var(--row-c, var(--ink-faint)) 55%, var(--ink-faint)); }
.goal-cat.active .goal-cat-idx{ color:var(--row-c, var(--accent)); text-shadow:0 0 9px color-mix(in srgb, var(--row-c) 60%, transparent); opacity:1; }
.goal-cat-pct,
.goal-cat.tr-up .goal-cat-pct,
.goal-cat.tr-flat .goal-cat-pct{ color:var(--row-c, var(--accent)); }
.goal-cat.active{ border-color:color-mix(in srgb, var(--row-c) 42%, transparent) !important; }
.goal-cat.active .goal-cat-caret{ color:var(--row-c, var(--accent)); }

/* PULL: index unit gloss + verdict-as-claim spacing */
.mkt-gloss{ margin-top:var(--s2); font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.04em; color:var(--ink-dim); }
.sec-head .mkt-verdict{ margin-top:0; }

/* PULL: ledger bridge header — ties the streams back to the chart */
.led-bridge{ display:flex; flex-direction:column; gap:3px; margin-bottom:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--ink-faint); }
.led-bridge-t{ font-family:var(--disp); font-size:var(--t-sech); font-weight:600; letter-spacing:.01em; color:#eef3ff; text-transform:uppercase; }
.led-bridge-s{ font-family:var(--mono); font-size:var(--t-body); color:var(--ink-dim); }

/* ════════════════════════════════════════════════════════════════
   THE PULL · v2 — the exponential hub
   pace strip · forecast chart · the horizon · the heatboard · image-first signal
   ════════════════════════════════════════════════════════════════ */

/* ── the pace strip: speed / acceleration / doubling time / a year of this ── */
.pace-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(199,214,240,.1); border:1px solid rgba(199,214,240,.16); margin-top:var(--s5); }
.pace-strip[hidden]{ display:none; }
.pace-cell{ display:flex; flex-direction:column; gap:3px; padding:var(--s3) var(--s4); background:linear-gradient(180deg, rgba(6,10,24,.94), rgba(6,10,24,.68)); }
.pace-lab{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.pace-cell b{ font-family:var(--disp); font-weight:200; font-size:clamp(19px,2.6vw,29px); line-height:1.1; letter-spacing:-.02em; color:#eef3ff; font-variant-numeric:tabular-nums slashed-zero; }
.pace-cell b.up{ color:var(--mkt-up); text-shadow:var(--glow); }
.pace-cell b.dn{ color:var(--mkt-dn); }
.pace-sub{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-dim); line-height:1.5; }
@media (max-width:820px){ .pace-strip{ grid-template-columns:repeat(2,1fr); } }

/* ── the main graph: taller, with forecast zone + velocity ribbon baked in ── */
.mkt-chart{ height:clamp(250px, 34vw, 330px); }
@media (max-width:860px){ .mkt-chart{ height:230px; } }
.mkt-chart-key{ display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:2px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-dim); }
.mkt-chart-key .mck-ev{ color:var(--accent-dim); }

/* ── THE HORIZON — milestone windows, pulled closer by the live signal ── */
.hz-board{ display:flex; flex-direction:column; gap:var(--s5); margin-top:var(--s6); }
.hz-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr)); gap:var(--s4); }
.hz-card{ position:relative; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); box-shadow:var(--edge-hi); transition:transform .25s var(--b-ease), box-shadow .25s var(--b-ease), border-color .25s; animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0) * 70ms); }
.hz-card:hover{ transform:translateY(-3px); box-shadow:var(--edge-hi), var(--lift-sm); border-color:var(--accent-dim); }
.hz-card.hz-emg{ border-left-color:var(--warn); }
.hz-card.hz-spec{ border-left-color:var(--ink-faint); border-left-style:dashed; }
.hz-card.hz-comp{ border-left-color:var(--c-goal, #c08bf0); }
.hz-top{ display:flex; align-items:flex-start; gap:var(--s3); }
.hz-top .gd-sigil{ flex:none; opacity:.9; }
.hz-tt{ min-width:0; }
.hz-name{ margin:0; font-family:var(--mono); font-size:var(--t-cardh); font-weight:600; letter-spacing:.12em; color:#eef3ff; }
.hz-tag{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.05em; color:var(--accent); opacity:.85; }
.hz-card.hz-comp .hz-tag{ color:var(--c-goal, #c08bf0); }
.hz-pill{ margin-left:auto; flex:none; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border:1px solid currentColor; border-radius:999px; padding:2px 8px; opacity:.85; cursor:help; white-space:nowrap; }
.hz-card.hz-emg .hz-pill{ color:var(--warn); }
.hz-card.hz-spec .hz-pill{ color:var(--ink-dim); }
.hz-card.hz-comp .hz-pill{ color:var(--c-goal, #c08bf0); }
.hz-bar{ height:4px; background:var(--bg-soft); border:1px solid var(--ink-faint); }
.hz-bar span{ display:block; height:100%; background:linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow:0 0 8px rgba(94,240,168,.35); transition:width 1.1s var(--b-ease); }
.hz-card.hz-comp .hz-bar span{ background:linear-gradient(90deg, #6a4a86, var(--c-goal, #c08bf0)); box-shadow:0 0 8px rgba(192,139,240,.35); }
.hz-meta{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); font-family:var(--mono); font-size:var(--t-cap); color:var(--ink-dim); }
.hz-window{ font-weight:600; font-variant-numeric:tabular-nums; color:#eef3ff; letter-spacing:.04em; cursor:help; }
.hz-card.hz-spec .hz-window{ color:var(--ink-dim); }
.hz-card.hz-spec .hz-window::before{ content:'○ '; }
.hz-pull{ font-family:var(--mono); font-size:var(--t-cap); color:var(--ink-dim); }
.hz-pull.up{ color:var(--mkt-up); }
.hz-pull.dn{ color:var(--mkt-dn); }
.hz-total{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-faint); letter-spacing:.04em; }
.hz-ev{ margin:0; font-size:var(--t-body); line-height:1.62; color:var(--ink); }
.hz-dots{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:var(--s2); }
.hz-dots i{ display:block; width:7px; height:7px; border-radius:50%; opacity:.85; box-shadow:0 0 6px currentColor; }
.hz-dots span{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.hz-note{ margin:0; font-family:var(--mono); font-size:var(--t-cap); color:var(--ink-dim); line-height:1.65; max-width:78ch; }

/* ── THE HEATBOARD — 11 needs ranked by momentum; tiles are filters ── */
.heat-board{ display:flex; flex-direction:column; gap:var(--s5); margin-top:var(--s6); }
.heat-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:var(--s3); }
.heat-tile{ --c:#5ef0a8; position:relative; display:flex; flex-direction:column; gap:3px; text-align:left; font-family:var(--mono); color:var(--ink); background:var(--plate); border:1px solid var(--ink-faint); border-top:2px solid color-mix(in srgb, var(--c) 55%, transparent); padding:var(--s3) var(--s3) var(--s2); cursor:pointer; transition:transform .22s var(--b-ease), border-color .22s, box-shadow .22s, background .22s; animation:mktReveal .45s var(--b-ease) both; animation-delay:calc(var(--i,0) * 35ms); }
.heat-tile:hover{ transform:translateY(-2px); box-shadow:var(--lift-sm); border-color:color-mix(in srgb, var(--c) 45%, var(--ink-faint)); }
.heat-tile.on{ border-color:color-mix(in srgb, var(--c) 70%, transparent); background:color-mix(in srgb, var(--c) 9%, rgba(6,10,24,.62)); box-shadow:0 0 16px -7px var(--c); }
.heat-tile.on::after{ content:'◈ focused'; position:absolute; top:6px; right:8px; font-size:8px; letter-spacing:.12em; color:var(--c); }
.ht-name{ font-size:var(--t-cap); letter-spacing:.14em; text-transform:uppercase; color:#eef3ff; }
.ht-blurb{ font-size:var(--t-micro); color:var(--ink-dim); }
.ht-spark{ width:100%; height:26px; margin:5px 0 3px; }
.ht-foot{ display:flex; align-items:baseline; gap:6px; font-size:var(--t-micro); }
.ht-foot b{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink-dim); }
.ht-foot b.up{ color:var(--mkt-up); }
.ht-foot b.dn{ color:var(--mkt-dn); }
.ht-foot i{ font-style:normal; color:var(--accent); letter-spacing:-.1em; }
.heat-tile.h-slip .ht-foot i{ color:var(--mkt-dn); }
.ht-foot em{ font-style:normal; color:var(--ink-faint); margin-left:auto; letter-spacing:.1em; text-transform:uppercase; }
.heat-tile.h-surge .ht-foot em{ color:var(--mkt-up); }
.heat-tile.h-slip .ht-foot em{ color:var(--mkt-dn); }
.heat-summary{ display:flex; flex-direction:column; gap:var(--s2); }
.heat-sum{ display:flex; gap:var(--s4); align-items:baseline; font-family:var(--mono); font-size:var(--t-cap); border:1px solid var(--ink-faint); padding:var(--s2) var(--s4); background:rgba(6,10,24,.45); }
.heat-sum b{ flex:none; font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.heat-sum.hs-up b{ color:var(--mkt-up); }
.heat-sum.hs-dn b{ color:var(--warn); }
.heat-sum span{ color:var(--ink); letter-spacing:.02em; }

/* ── the signal, image-first: the picture leads, chips float on it ── */
.pcard-media{ z-index:0; }
.pcard-media::after{ background:linear-gradient(180deg, rgba(2,10,7,.55), transparent 36%), repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.12) 2px 3px); }
.pcard-media img{ filter:saturate(.82) contrast(1.05) brightness(.9); }
.pcard.fric .pcard-media img{ filter:saturate(.7) contrast(1.05) brightness(.86) sepia(.18) hue-rotate(-18deg); }
.pcard-media .pcard-dom{ position:absolute; top:8px; left:8px; z-index:2; background:rgba(2,10,7,.72); backdrop-filter:blur(3px); }
.pcard.fwd .pcard-media .pcard-dom, .pcard.fric .pcard-media .pcard-dom{ color:inherit; }
.pcard-media .pcard-impact{ position:absolute; top:8px; right:8px; z-index:2; background:rgba(2,10,7,.72); backdrop-filter:blur(3px); }
.pcard-media .pcard-impact.up{ border:1px solid rgba(94,240,168,.45); }
.pcard-media .pcard-impact.dn{ border:1px solid rgba(232,103,78,.5); }
.pcard-media .pcard-eta{ position:absolute; bottom:8px; right:8px; z-index:2; background:rgba(2,10,7,.78); }
.pcard-body{ display:block; }
.pcard-h{ font-size:14.5px; }

/* the big three — the window's heaviest signals as feature cards */
.led-feature{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.led-feature:empty{ display:none; }
.led-feature .pcard{ border-left-width:3px; }
.led-feature .pcard-h{ font-size:clamp(15px,1.8vw,18px); line-height:1.34; }
.led-feature .pcard-b{ font-size:12.5px; }
@media (max-width:900px){ .led-feature{ grid-template-columns:1fr; } }

/* section heads inside the board breathe a little more */
#led-board .sec-head, #horizon .sec-head, #heatboard .sec-head{ margin-bottom:0; }

@media (prefers-reduced-motion:reduce){
  .hz-card, .heat-tile{ animation:none !important; }
  .hz-card:hover, .heat-tile:hover{ transform:none; }
  .hz-bar span{ transition:none; }
}

/* the way home — unmissable */
.nav-btn.nav-home{ color:var(--accent); border-color:var(--accent-dim); }
.nav-btn.nav-home:hover{ color:#04130f; background:var(--accent); box-shadow:var(--glow); }
.dash-brand:hover{ color:var(--accent); text-shadow:var(--glow); }

/* ── views swap IN FLOW under the nav — never overlay the controls ──
   (the old absolute top:104px panels started ABOVE the nav once the thesis
   rail existed, so an open view swallowed every click on the tab bar) */
.climb-view, .goal-view, .social-view, .occupations-view{ position:relative; inset:auto; z-index:auto; flex:1 1 auto; min-height:0; margin-top:18px; overflow-y:auto; padding:10px 8px 44px; }
.climb-view[hidden], .goal-view[hidden], .social-view[hidden], .frontier-view[hidden], .occupations-view[hidden]{ display:none; }

/* ── THE CLIMB · WITHIN REACH — the next wins, verified ── */
.climb-close{ max-width:1180px; margin:0 auto var(--s8); }
.cc-head{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; padding-bottom:var(--s2); border-bottom:1px solid var(--ink-faint); margin-bottom:var(--s4); }
.cc-title{ font-size:clamp(15px,2.4vw,20px); font-weight:600; letter-spacing:.06em; color:#eef3ff; text-shadow:0 0 16px rgba(244,201,93,.18); }
.cc-sub{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.02em; }
.cc-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:var(--s4); }
.cc-card{ position:relative; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-top:2px solid var(--c-climb,#f4c95d); box-shadow:var(--edge-hi); animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*55ms); transition:transform .22s var(--b-ease), box-shadow .22s; }
.cc-card:hover{ transform:translateY(-2px); box-shadow:var(--edge-hi), var(--lift-sm); }
.cc-card.crossed{ border-top-color:var(--accent); }
.cc-state{ align-self:flex-start; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--c-climb,#f4c95d); color:var(--c-climb,#f4c95d); }
.cc-card.crossed .cc-state{ border-color:var(--accent); color:var(--accent); }
.cc-goal{ margin:0; font-family:var(--mono); font-size:var(--t-cardh); font-weight:600; letter-spacing:.04em; color:#eef3ff; }
.cc-ev{ margin:0; font-size:var(--t-body); line-height:1.6; color:var(--ink); }
.cc-but{ margin:0; font-family:var(--mono); font-size:var(--t-cap); line-height:1.55; color:var(--ink-dim); }
.cc-but::before{ content:'but · '; color:var(--warn); }
.cc-src{ margin-top:auto; padding-top:var(--s2); font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-faint); display:flex; gap:var(--s3); flex-wrap:wrap; }
.cc-src a{ color:var(--accent-dim); text-decoration:none; border-bottom:1px dotted var(--accent-dim); }
.cc-src a:hover{ color:var(--accent); }
.cc-asof{ margin-left:auto; letter-spacing:.08em; }
@media (prefers-reduced-motion:reduce){ .cc-card{ animation:none !important; } .cc-card:hover{ transform:none; } }

/* ════════════════════════════════════════════════════════════════
   HOME — the in-hub welcome (sits before the pull; the logo lands here)
   ════════════════════════════════════════════════════════════════ */
.home-view{ position:relative; flex:1 1 auto; min-height:0; margin-top:18px; overflow-y:auto; padding:10px 8px 48px; }
.home-view[hidden]{ display:none; }
.home-view .sec-claim{ font-size:clamp(30px,5.2vw,52px); }
.hv-lead{ max-width:74ch; margin:var(--s5) 0 var(--s8); display:flex; flex-direction:column; gap:var(--s4); }
.hv-p{ margin:0; font-size:clamp(14px,1.7vw,16px); line-height:1.7; color:var(--ink); }
.hv-p b{ color:#eef3ff; }
.hv-p em{ font-style:italic; color:var(--accent); opacity:.92; }
.hv-why{ padding-left:var(--s4); border-left:2px solid var(--accent-dim); color:var(--ink-dim); }
.hv-why b{ color:var(--accent); }
.hv-routes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(238px,1fr)); gap:var(--s4); }
.hv-route{ display:flex; flex-direction:column; gap:6px; text-align:left; padding:var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); box-shadow:var(--edge-hi); cursor:pointer; font-family:inherit; color:var(--ink); transition:transform .22s var(--b-ease), box-shadow .22s var(--b-ease), border-color .22s; animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
.hv-route:hover{ transform:translateY(-3px); box-shadow:var(--edge-hi), var(--lift-sm); border-left-color:var(--accent); }
.hv-r-k{ font-family:var(--mono); font-size:var(--t-cardh); font-weight:600; letter-spacing:.06em; color:#eef3ff; }
.hv-r-t{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); opacity:.85; }
.hv-r-d{ font-size:var(--t-body); line-height:1.55; color:var(--ink-dim); margin-top:2px; }
.hv-r-d b{ color:var(--ink); }
.hv-r-go{ margin-top:auto; padding-top:var(--s3); font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.08em; color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }
.hv-route:hover .hv-r-go{ opacity:1; transform:none; }
.hv-cta{ margin-top:var(--s8); }
@media (prefers-reduced-motion:reduce){ .hv-route{ animation:none !important; } .hv-route:hover{ transform:none; } .hv-route:hover .hv-r-go{ transition:none; } }
/* touch never hovers — without this the "enter →" cue is invisible on every phone, and the
   route cards read as passive panels rather than the six ways into the dash */
@media (hover: none){ .hv-route .hv-r-go{ opacity:1; transform:none; } }

/* ════════════════════════════════════════════════════════════════
   VISUAL UPLIFT — color by sector/section, graphics over text
   ════════════════════════════════════════════════════════════════ */
#home-view{ --sec-c:var(--c-pull); }

/* monoline icons inherit their hue via currentColor */
.sicon{ display:block; }
.sicon *{ vector-effect:non-scaling-stroke; }

/* a reusable icon chip — tinted square in the element's hue */
.hz-ico, .cc-ico, .ht-ico{ display:grid; place-items:center; flex:none; border-radius:9px; }
.hz-ico{ width:42px; height:42px; color:var(--mc); background:color-mix(in srgb, var(--mc) 15%, transparent); border:1px solid color-mix(in srgb, var(--mc) 34%, transparent); box-shadow:0 0 18px -6px var(--mc); }
.cc-ico{ width:34px; height:34px; color:var(--c-climb); background:color-mix(in srgb, var(--c-climb) 15%, transparent); border:1px solid color-mix(in srgb, var(--c-climb) 32%, transparent); }
.ht-ico{ width:26px; height:26px; color:var(--c); background:color-mix(in srgb, var(--c) 16%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); }

/* the progress dial */
.pring-wrap{ position:relative; flex:none; display:grid; place-items:center; }
.pring{ display:block; }
.pring-val{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--disp); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ── THE HORIZON — colored, graphic-first cards ── */
.hz-cards{ grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.hz-card{ position:relative; gap:var(--s3); border:1px solid var(--ink-faint); border-top:2px solid var(--mc, var(--accent)); overflow:hidden; }
.hz-card::before{ content:''; position:absolute; top:0; right:0; width:60%; height:70%; background:radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--mc) 16%, transparent), transparent 62%); pointer-events:none; }
.hz-card > *{ position:relative; z-index:1; }
.hz-card:hover{ border-color:color-mix(in srgb, var(--mc) 40%, var(--ink-faint)); box-shadow:var(--edge-hi), 0 18px 44px -20px var(--mc); }
.hz-top{ display:flex; align-items:center; gap:var(--s3); }
.hz-name{ margin:0; color:#eef3ff; }
.hz-tag{ color:var(--mc); opacity:.9; }
.hz-pill{ margin-left:auto; }
.hz-hero{ display:flex; align-items:center; gap:var(--s4); }
.hz-tl{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.hz-window{ font-family:var(--disp); font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; color:#eef3ff; }
.hz-card.hz-spec .hz-window{ color:var(--ink); }
.hz-track{ position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--ink-faint); }
.hz-track-span{ position:absolute; top:1px; bottom:1px; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--mc) 45%, transparent), var(--mc)); box-shadow:0 0 12px -2px var(--mc); }
.hz-track-now{ position:absolute; top:-3px; width:2px; height:14px; background:#eef3ff; box-shadow:0 0 8px #eef3ff; transform:translateX(-1px); }
.hz-track-now::after{ content:''; position:absolute; top:-3px; left:-2px; width:6px; height:6px; border-radius:50%; background:#eef3ff; box-shadow:0 0 8px #eef3ff; }
.hz-track-lab{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; color:var(--ink-faint); }
.hz-track-lab span:nth-child(2){ color:#eef3ff; }
.hz-pull{ font-family:var(--mono); font-size:var(--t-cap); letter-spacing:.01em; }
.hz-ev{ font-size:var(--t-cap); line-height:1.6; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* ── WITHIN REACH — colored by sector, medallion, clamped ── */
.cc-card{ gap:var(--s3); overflow:hidden; }
.cc-card::before{ content:''; position:absolute; top:0; right:0; width:55%; height:60%; background:radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--c-climb) 13%, transparent), transparent 60%); pointer-events:none; }
.cc-card > *{ position:relative; z-index:1; }
.cc-card:hover{ border-color:color-mix(in srgb, var(--c-climb) 38%, var(--ink-faint)); box-shadow:var(--edge-hi), 0 16px 40px -20px var(--c-climb); }
.cc-top{ display:flex; align-items:flex-start; gap:var(--s3); }
.cc-goal{ flex:1; min-width:0; margin:0; }
.cc-badge{ flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:15px; border:1px solid; }
.cc-card.crossed .cc-badge{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:0 0 14px -4px var(--accent); }
.cc-card.reach .cc-badge{ color:var(--c-climb); border-color:color-mix(in srgb, var(--c-climb) 42%, transparent); background:color-mix(in srgb, var(--c-climb) 10%, transparent); }
.cc-state{ margin-top:-4px; }
.cc-ev{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cc-but{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── HEATBOARD — icon + name head ── */
.ht-head{ display:flex; align-items:center; gap:8px; }
.ht-nmw{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.heat-tile .ht-name, .heat-tile .ht-blurb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── HOME — routes carry their section's color ── */
.hv-route[data-view="pull"]{ --rc:var(--c-pull); }
.hv-route[data-view="climb"]{ --rc:var(--c-climb); }
.hv-route[data-view="goal"]{ --rc:var(--c-goal); }
.hv-route[data-view="social"]{ --rc:var(--c-social); }
.hv-route{ border-left-color:color-mix(in srgb, var(--rc, var(--accent)) 60%, transparent); }
.hv-route::after{ content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 100% 0, color-mix(in srgb, var(--rc) 10%, transparent), transparent 60%); pointer-events:none; opacity:0; transition:opacity .22s; }
.hv-route{ position:relative; overflow:hidden; }
.hv-route:hover{ border-left-color:var(--rc); }
.hv-route:hover::after{ opacity:1; }
.hv-r-k{ color:var(--rc, #eef3ff); }
.hv-r-t{ color:var(--rc, var(--accent)); }
.hv-r-go{ color:var(--rc, var(--accent)); }

/* ── big index number: a mint gradient, not flat ── */
.mkt-index-val{ background:linear-gradient(120deg, #eef3ff 0%, #7fe0ff 34%, #5ef0a8 62%, #a78bfa 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* the section eyebrow line already uses --sec-c; give claims their hue-lit underline */
.home-view .sec-claim .hl, #pull-board .sec-claim .hl{ text-shadow:0 0 20px color-mix(in srgb, var(--sec-c) 45%, transparent); }

@media (prefers-reduced-motion:reduce){ .pring circle{ transition:none !important; } }

/* home — live readout strip + pull-quote */
.hv-why{ margin:0; padding:var(--s3) 0 var(--s3) var(--s4); border-left:2px solid var(--accent-dim); font-size:clamp(15px,1.9vw,18px); line-height:1.55; color:var(--ink-dim); font-style:normal; }
.hv-why b{ color:var(--accent); }
.hv-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(199,214,240,.1); border:1px solid rgba(199,214,240,.16); margin:0 0 var(--s8); }
.hv-stat{ display:flex; flex-direction:column; gap:3px; padding:var(--s4) var(--s4) var(--s3); background:linear-gradient(180deg, rgba(6,10,24,.92), rgba(6,10,24,.66)); animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*60ms); }
.hv-stat-k{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }
.hv-stat-v{ font-family:var(--disp); font-weight:200; font-size:clamp(24px,3.4vw,38px); line-height:1.05; letter-spacing:-.02em; color:#eef3ff; font-variant-numeric:tabular-nums slashed-zero; }
.hv-stat-v.up{ color:var(--mkt-up); text-shadow:var(--glow); }
.hv-stat-v.dn{ color:var(--mkt-dn); }
.hv-stat-s{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-faint); line-height:1.4; }
@media (max-width:720px){ .hv-stats{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion:reduce){ .hv-stat{ animation:none !important; } }

/* ── THE ROAD TO FREE — per-need roadmap stepper (goal detail pane) ── */
.gd-road{ margin-top: 22px; }
.gd-step{ display:flex; gap:12px; animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 60ms); }
.gd-step-rail{ display:flex; flex-direction:column; align-items:center; flex:none; width:14px; padding-top:5px; }
.gd-step-dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--step-c, var(--accent-dim)); background:color-mix(in srgb, var(--step-c, var(--accent-dim)) 35%, transparent); box-shadow:0 0 6px color-mix(in srgb, var(--step-c, var(--accent-dim)) 40%, transparent); flex:none; }
.gd-step-line{ flex:1; width:1px; min-height:18px; margin-top:4px; background:linear-gradient(var(--step-c, var(--accent-dim)), rgba(124,136,127,.25)); opacity:.5; }
.gd-step-body{ flex:1; min-width:0; padding-bottom:16px; }
.gd-step:last-child .gd-step-body{ padding-bottom:0; }
.gd-step-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.gd-step-k{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--step-c, var(--accent)); }
.gd-step-tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--ink-faint); border:1px solid color-mix(in srgb, var(--step-c, var(--accent-dim)) 45%, transparent); padding:1px 6px; border-radius:2px; }
.gd-step-t{ margin-top:4px; font-size:13px; font-weight:600; color:var(--ink); line-height:1.4; }
.gd-step-d{ margin-top:3px; font-size:12.5px; line-height:1.55; color:var(--ink); opacity:.85; }
.gd-step-gate{ margin-top:5px; font-size:11.5px; line-height:1.5; color:var(--ink-faint); font-style:italic; }
.gd-step-gate b{ font-style:normal; font-weight:600; letter-spacing:.08em; font-size:10px; text-transform:uppercase; color:var(--ink-dim); }
.gd-step.rd-now{ --step-c:var(--accent); }
.gd-step.rd-emg{ --step-c:var(--warn); }
.gd-step.rd-spec{ --step-c:var(--ink-dim); }
.gd-step.rd-pol{ --step-c:var(--strike); }
@media (prefers-reduced-motion:reduce){ .gd-step{ animation:none !important; } }

/* ── HOW IT GETS REACHED — milestone gates on horizon cards ── */
.hz-path{ margin-top:10px; padding-top:9px; border-top:1px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent); }
.hz-path-h{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.hz-path-li{ display:flex; gap:8px; align-items:baseline; font-size:11.5px; line-height:1.5; color:var(--ink-dim); padding:2px 0; }
.hz-path-ix{ flex:none; font-family:var(--mono); font-size:9.5px; color:color-mix(in srgb, var(--mc, var(--accent)) 75%, var(--ink-dim)); }

/* ── the method link — the transparency door under the index ── */
.method-link{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent-dim); text-decoration:none; border-bottom:1px dotted var(--ink-faint); transition:color .2s; }
.method-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

/* ── the signal sort toggle (impact vs newest) ── */
.led-sort{ display:flex; align-items:baseline; gap:8px; margin:2px 0 14px; font-family:var(--mono); }
.led-sort-lab{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.led-sort-btn{ background:none; border:1px solid var(--ink-faint); color:var(--ink-dim); font-family:var(--mono); font-size:11px; letter-spacing:.08em; padding:3px 10px; cursor:pointer; transition:color .2s, border-color .2s; }
.led-sort-btn:hover{ color:var(--accent); border-color:var(--accent-dim); }
.led-sort-btn.on{ color:var(--accent); border-color:var(--accent-dim); background:rgba(94,240,168,.06); }
.led-day-h{ grid-column:1 / -1; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-faint); padding:10px 0 2px; border-bottom:1px dotted rgba(124,136,127,.3); margin-bottom:6px; }

/* ── admin share studio ── */
.studio-list{ display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.studio-row{ display:flex; align-items:baseline; gap:10px; text-align:left; background:rgba(255,255,255,.015); border:1px solid var(--ink-faint); padding:9px 12px; cursor:pointer; font-family:var(--mono); color:var(--ink); transition:border-color .2s; }
.studio-row:hover{ border-color:var(--accent-dim); }
.studio-row.fric{ border-left:2px solid var(--strike); }
.studio-day{ flex:none; font-size:10px; letter-spacing:.12em; color:var(--ink-faint); }
.studio-sec{ flex:none; font-size:10px; letter-spacing:.14em; color:var(--accent-dim); }
.studio-w{ flex:none; font-size:10px; color:var(--warn); }
.studio-h{ font-size:12.5px; line-height:1.45; }
.studio-pane{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
/* two-column studio: signal list (left, scrolls on its own) + compose/card pane (right, sticky) */
.studio-cols{ display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:var(--s5); align-items:start; margin:10px 0; }
.studio-cols .studio-list{ margin:0; max-height:72vh; overflow-y:auto; padding-right:4px; }
.studio-cols .studio-pane{ margin-top:0; position:sticky; top:16px; }
.studio-empty{ margin:0; padding:24px 20px; text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); border:1px dashed var(--ink-faint); border-radius:8px; }
@media (max-width:820px){ .studio-cols{ grid-template-columns:1fr; } .studio-cols .studio-list{ max-height:none; overflow:visible; } .studio-cols .studio-pane{ position:static; } }
.studio-text{ width:100%; font-family:var(--mono); font-size:13px; line-height:1.6; resize:vertical; }
.studio-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.studio-count{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); }
.studio-count.over{ color:var(--strike); }
.studio-card{ max-width:100%; border:1px solid var(--ink-faint); }

/* ── THE BIZ — actor leaderboard ── */
.biz-board{ margin-top:var(--s7, 40px); }
.biz-rows{ display:flex; flex-direction:column; gap:7px; }
.biz-row{ background:var(--plate, rgba(255,255,255,.015)); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 45ms); }
.biz-row.fric{ border-left-color:var(--strike); }
.biz-head{ display:flex; align-items:baseline; gap:12px; width:100%; text-align:left; background:none; border:0; padding:11px 14px; cursor:pointer; font-family:var(--mono); color:var(--ink); }
.biz-rank{ flex:none; font-size:10px; color:var(--ink-faint); letter-spacing:.12em; }
.biz-name{ font-size:14px; font-weight:600; letter-spacing:.04em; }
.biz-dots{ flex:none; display:inline-flex; gap:3px; }
.biz-dots i{ width:7px; height:7px; border-radius:99px; display:inline-block; }
.biz-ct{ flex:1; font-size:11px; color:var(--ink-dim); }
.biz-pts{ flex:none; font-size:12px; font-weight:600; }
.biz-pts.up, .biz-days.up{ color:var(--accent); }
.biz-pts.dn, .biz-days.dn{ color:var(--strike); }
.biz-days{ flex:none; font-size:11px; }
.biz-caret{ flex:none; color:var(--ink-faint); transition:transform .2s; }
.biz-row.open .biz-caret{ transform:rotate(90deg); }
.biz-stories{ display:flex; flex-direction:column; border-top:1px solid var(--ink-faint); padding:8px 14px 12px; gap:6px; }
.biz-story{ display:flex; gap:10px; align-items:baseline; font-family:var(--mono); font-size:12px; line-height:1.5; color:var(--ink); text-decoration:none; }
.biz-story b{ flex:none; color:var(--accent); font-weight:600; }
.biz-story.fric b{ color:var(--strike); }
.biz-story:hover span{ color:var(--accent); }
.biz-note{ margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); line-height:1.6; }
@media (max-width:640px){ .biz-ct{ display:none; } }

/* ── the biz view: window toggle + leader detail card ── */
.biz-view{ animation:mktReveal .4s ease both; }
.biz-tf{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }   /* three nowrap pills don't fit a 320px phone in one row */
.biz-rowbtn{ width:100%; font-family:var(--mono); }
.biz-detail{ margin-top:22px; }
.biz-card{ background:var(--plate, rgba(255,255,255,.015)); border:1px solid var(--ink-faint); border-left:2px solid var(--accent-dim); padding:20px 22px; animation:mktReveal .4s ease both; }
.biz-card-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.biz-card-h h3{ margin:0; font-size:20px; letter-spacing:.04em; color:var(--ink); }
.biz-card-stat{ font-family:var(--mono); font-size:12px; }
.biz-card-stat.up{ color:var(--accent); } .biz-card-stat.dn{ color:var(--strike); }
.biz-card-prof{ margin:10px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink); opacity:.9; }
.biz-card-secs{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; }
.biz-story-d{ flex:none; margin-left:auto; font-size:10px; color:var(--ink-faint); }

/* ── view hygiene: [hidden] must ALWAYS win — .pull-board.mkt{display:flex} was overriding
   the hidden attribute, bleeding the pull's verdict header above every other view ── */
#pull-board[hidden], #biz-view[hidden], #goal-view[hidden], #climb-view[hidden], #social-view[hidden], #frontier-view[hidden], #occupations-view[hidden], #home-view[hidden], #pull-day[hidden]{ display:none !important; }
/* the biz gets its signature hue like every other view (was falling back unpainted) */
#biz-view{ --sec-c:#f0a35e; }
.biz-view .sec-claim{ color:#eef3ff; }

/* ── the biz: leader cards (v2 — the list was black-on-black and sloppy) ── */
.biz-rowbtn{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  background:var(--plate, rgba(255,255,255,.02)); border:1px solid var(--ink-faint); border-left:2px solid var(--lc, var(--accent-dim));
  padding:14px 18px; font-family:var(--mono); color:var(--ink);
  animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 45ms);
  transition:transform .18s var(--b-ease, ease), border-color .18s, box-shadow .18s; }
.biz-rowbtn:hover{ transform:translateY(-1px); border-color:var(--lc, var(--accent-dim)); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.biz-rowbtn.open{ border-color:var(--lc, var(--accent-dim)); background:color-mix(in srgb, var(--lc, #5ef0a8) 4%, transparent); }
.biz-rowbtn.fric{ border-left-color:var(--strike); }
.biz-rank{ flex:none; width:22px; font-size:11px; color:var(--ink-faint); letter-spacing:.1em; }
.biz-logo{ flex:none; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb, var(--lc, #5ef0a8) 45%, transparent); background:color-mix(in srgb, var(--lc, #5ef0a8) 8%, #0a0c0b); border-radius:8px; overflow:hidden; }
.biz-logo img{ width:26px; height:26px; object-fit:contain; }
.biz-logo b{ font-family:var(--mono); font-size:14px; font-weight:600; color:var(--lc, var(--accent)); letter-spacing:.05em; }
.biz-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.biz-nmrow{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.biz-name{ font-size:16px; font-weight:600; letter-spacing:.03em; color:#eef3ff; }
.biz-ct{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-dim); }
.biz-sub{ font-size:11.5px; line-height:1.5; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60ch; }
.biz-stats{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.biz-pts{ font-size:14px; font-weight:600; }
.biz-days{ font-size:10.5px; letter-spacing:.06em; }
.biz-caret{ flex:none; color:var(--ink-faint); font-size:16px; transition:transform .2s; }
.biz-rowbtn.open .biz-caret{ transform:rotate(90deg); color:var(--lc, var(--accent)); }
.biz-card-h .biz-logo{ width:48px; height:48px; order:-1; }
@media (max-width:640px){ .biz-sub{ display:none; } .biz-rank{ display:none; } }

/* ── share studio card: loading state so a slow first render never looks broken ── */
.studio-cardwrap{ display:block; position:relative; min-height:180px; border:1px solid var(--ink-faint); background:#0a0c0b; }
.studio-cardwrap.loading{ background:linear-gradient(100deg,#0a0c0b 30%,rgba(94,240,168,.06) 50%,#0a0c0b 70%); background-size:200% 100%; animation:studioShimmer 1.3s ease-in-out infinite; }
@keyframes studioShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
.studio-cardmsg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
.studio-card{ display:block; width:100%; height:auto; }

/* ═══════════ HIGH-END UPLIFT — depth, color, imagery (2026-07-14) ═══════════
   Kills the flat mono-green feel: multi-hue aurora ambient, gradient display
   type, glass plates, real-image cards. The phosphor identity stays the anchor. */

/* aurora ambient — three drifting hue fields behind everything, per-view tinted */
body::before{
  content:''; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 12%, rgba(94,240,168,.075) 0%, transparent 70%),
    radial-gradient(46% 42% at 84% 22%, rgba(122,162,255,.06) 0%, transparent 70%),
    radial-gradient(50% 46% at 55% 92%, rgba(192,139,240,.05) 0%, transparent 72%),
    radial-gradient(34% 30% at 8% 78%, rgba(54,214,231,.045) 0%, transparent 70%);
  animation:aurora 36s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2.5%,-2%,0) scale(1.06); }
  100%{ transform:translate3d(-2%,2.5%,0) scale(1.02); }
}
@media (prefers-reduced-motion:reduce){ body::before{ animation:none; } }
#app{ position:relative; z-index:1; }

/* display type — gradient ink instead of flat white */
.sec-claim{
  background:linear-gradient(115deg, #f4fff9 30%, color-mix(in srgb, var(--sec-c) 62%, #eef3ff) 78%, var(--sec-c) 105%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 0 22px color-mix(in srgb, var(--sec-c) 22%, transparent));
}
.mkt-verdict{ letter-spacing:.005em; }

/* glass plates — depth without noise */
.hz-card, .biz-rowbtn, .biz-card, .goal-detail-card, .cc-card, .led-sec, .studio-pane, .hv-route{
  background:linear-gradient(160deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 55%, rgba(0,0,0,.10) 100%);
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border-radius:10px;
}
.hz-card, .biz-rowbtn, .goal-detail-card, .led-sec{ box-shadow:0 10px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.045); }
.hv-route:hover, .biz-rowbtn:hover, .hz-card:hover{ box-shadow:0 16px 44px rgba(0,0,0,.42), 0 0 0 1px color-mix(in srgb, var(--sec-c, #5ef0a8) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.07); }

/* image-first news cards — real photography, treated */
.pcard-img{
  width:100%; aspect-ratio:16/8.4; object-fit:cover; border-radius:8px 8px 0 0;
  filter:saturate(1.05) contrast(1.03) brightness(.92);
  transition:transform .5s var(--b-ease, ease), filter .4s;
}
a:hover > .pcard-img, .pcard:hover .pcard-img{ transform:scale(1.035); filter:saturate(1.15) contrast(1.05) brightness(1); }
.pcard-thumb{ border-radius:8px 8px 0 0; }

/* leader rows: gradient rank + livelier logo tiles */
.biz-rank{ font-size:13px; font-weight:600;
  background:linear-gradient(180deg, color-mix(in srgb, var(--lc,#5ef0a8) 80%, #fff), color-mix(in srgb, var(--lc,#5ef0a8) 35%, transparent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.biz-logo{ box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* heat tiles + chips: let the sector hues actually sing */
.heat-tile{ border-radius:9px; }
.heat-tile.h-surge{ background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); }

/* within-reach cards: state-colored top edge */
.cc-card{ border-top:2px solid var(--accent-dim); }
.cc-card.crossed, .cc-card[data-state="crossed"]{ border-top-color:var(--accent); }

/* scrollbar + selection polish */
::selection{ background:rgba(94,240,168,.25); }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(94,240,168,.16); border-radius:8px; border:2px solid #050606; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(94,240,168,.3); }

/* ── THE FEED — the pull as a fast-scanning chronological stream ── */
.led-feed{ display:flex; flex-direction:column; gap:8px; }
.feed-day{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); padding:16px 0 4px; border-bottom:1px dotted rgba(124,136,127,.3); }
.feed-row{ display:flex; gap:14px; align-items:stretch; text-decoration:none; color:var(--ink); padding:10px 12px; border:1px solid transparent; border-left:2px solid color-mix(in srgb, var(--fc,#5ef0a8) 55%, transparent); border-radius:8px;
  background:linear-gradient(160deg, rgba(255,255,255,.022), rgba(255,255,255,.004));
  animation:mktReveal .4s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 30ms);
  transition:border-color .18s, background .18s, transform .18s; }
.feed-row:hover{ border-color:color-mix(in srgb, var(--fc,#5ef0a8) 45%, transparent); background:color-mix(in srgb, var(--fc,#5ef0a8) 4%, transparent); transform:translateX(2px); }
.feed-row.fric{ border-left-color:var(--strike); }
.feed-thumb{ flex:none; width:118px; align-self:center; border-radius:6px; overflow:hidden; }
.feed-thumb .pcard-img, .feed-thumb .pcard-thumb{ width:118px; height:66px; object-fit:cover; border-radius:6px; display:block; }
.feed-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center; }
.feed-meta{ display:flex; align-items:baseline; gap:9px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; flex-wrap:wrap; }
.feed-dot{ width:7px; height:7px; border-radius:99px; background:var(--fc,#5ef0a8); align-self:center; flex:none; }
.feed-meta b{ color:var(--fc,#5ef0a8); font-weight:600; letter-spacing:.14em; }
.feed-coming{ color:var(--warn); }
.feed-w.up{ color:var(--accent); } .feed-w.dn{ color:var(--strike); }
.feed-src{ color:var(--ink-faint); margin-left:auto; letter-spacing:.04em; }
.feed-h{ font-size:14.5px; font-weight:600; line-height:1.4; color:#eef3ff; }
.feed-b{ font-size:12px; line-height:1.5; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px){ .feed-thumb{ width:84px; } .feed-thumb .pcard-img, .feed-thumb .pcard-thumb{ width:84px; height:56px; } .feed-src{ display:none; } .feed-b{ -webkit-line-clamp:1; } }

/* ── home pulse — the progress chart + pace, on the front door ── */
.home-pulse{ display:block; width:100%; text-align:left; cursor:pointer; margin-top:18px; padding:18px 20px 14px; border:1px solid var(--ink-faint); border-radius:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, transform .2s, box-shadow .2s; font-family:var(--mono); color:var(--ink); }
.home-pulse:hover{ border-color:var(--accent-dim); transform:translateY(-2px); box-shadow:0 18px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(94,240,168,.2); }
.home-pulse-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.home-pulse-h span{ font-size:10px; letter-spacing:.22em; color:var(--ink-faint); }
.home-pulse-h b{ font-size:12px; letter-spacing:.08em; color:var(--accent); }
.home-chart{ width:100%; height:150px; display:block; margin:10px 0 4px; }
.home-pace{ display:flex; gap:26px; flex-wrap:wrap; padding-top:8px; border-top:1px solid rgba(124,136,127,.2); }
.hp-cell{ display:flex; flex-direction:column; gap:1px; }
.hp-cell b{ font-size:16px; color:#eef3ff; font-weight:600; }
.hp-cell small{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.home-pulse-go{ margin-top:10px; font-size:11px; letter-spacing:.1em; color:var(--accent-dim); }
.home-pulse:hover .home-pulse-go{ color:var(--accent); }
@media (max-width:640px){ .home-pace{ gap:16px; } .hp-cell b{ font-size:14px; } }

/* ── home horizon — the milestone windows on the front door, condensed ── */
.home-hz{ margin-top:18px; padding:18px 20px; border:1px solid var(--ink-faint); border-radius:12px; cursor:pointer;
  background:linear-gradient(160deg, rgba(255,255,255,.025), rgba(0,0,0,.12));
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, transform .2s; }
.home-hz:hover{ border-color:var(--accent-dim); transform:translateY(-2px); }
.home-hz-h{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px; font-family:var(--mono); }
.home-hz-h span{ font-size:10px; letter-spacing:.22em; color:var(--ink-faint); }
.home-hz-h small{ font-size:10.5px; letter-spacing:.04em; color:var(--ink-dim); }
.home-hz-cards{ pointer-events:none; }   /* the whole panel is the button */
.home-hz-cards .hz-path{ display:none; }             /* compact: roadmaps live in the full view */
.home-hz-cards .hz-ev{ -webkit-line-clamp:2; }
.home-hz-cards .hz-pull{ font-size:10.5px; }
@media (min-width:900px){ .home-hz-cards{ grid-template-columns:repeat(3, 1fr); } }

/* home stat cells stay opaque-dark — the glass treatment washed them out over the hairline grid */
.hv-stat{ background:linear-gradient(180deg, rgba(5,13,9,.97), rgba(5,13,9,.88)); }

/* ── feed social: pull + comment actions, comment panels, also-advances chips ── */
.feed-item{ display:flex; flex-direction:column; }
.feed-also{ color:var(--ink-faint); font-size:9.5px; letter-spacing:.06em; }
.feed-also::before{ content:'\21e2 '; color:var(--accent-dim); }
.feed-actions{ display:flex; gap:14px; margin-top:5px; }
.feed-act{ display:inline-flex; align-items:baseline; gap:5px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--mono); color:var(--ink-faint); font-size:13px; transition:color .15s, transform .15s; }
.feed-act:hover{ color:var(--accent); }
.feed-act.on{ color:var(--accent); text-shadow:var(--glow); }
.feed-act.nudge{ color:var(--warn); }
.feed-act small{ font-size:10.5px; letter-spacing:.06em; }
.fc-panel{ margin:2px 0 8px 132px; padding:10px 14px; border-left:2px solid var(--accent-dim); background:rgba(255,255,255,.015); border-radius:0 8px 8px 0; }
.fc-list{ display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.fc-item{ display:flex; gap:8px; align-items:baseline; font-family:var(--mono); font-size:12px; line-height:1.5; }
.fc-item b{ color:var(--accent); font-weight:600; flex:none; }
.fc-item.fresh{ animation:mktReveal .4s ease both; }
.fc-empty{ margin:0; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); font-style:italic; }
.fc-form{ display:flex; gap:8px; }
.fc-input{ flex:1; font-size:12.5px; }
@media (max-width:640px){ .fc-panel{ margin-left:0; } }

/* ── home carries 01/02/03 now — spacing + the moved sections breathe on the front door ── */
#home-view .mkt-index, #home-view .hz-board, #home-view .heat-board{ margin-top:26px; }
#home-view .hz-note{ margin-top:12px; }

/* ── the feed, v2 — social cards (media / meta / headline / actions), centered column ── */
.led-feed{ max-width:700px; margin:0 auto; width:100%; }
.fcard{ display:flex; flex-direction:column; margin-top:14px; border:1px solid var(--ink-faint); border-radius:14px; overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.03), rgba(0,0,0,.14));
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  border-top:2px solid color-mix(in srgb, var(--fc,#5ef0a8) 55%, transparent);
  animation:mktReveal .45s var(--b-ease, ease) both; animation-delay:calc(var(--i,0) * 40ms); }
.fcard.fric{ border-top-color:var(--strike); }
.fcard-media{ display:block; }
.fcard-media .pcard-img{ width:100%; height:250px; object-fit:cover; border-radius:0; display:block; }
.fcard-media .pcard-thumb{ width:100%; height:120px; border-radius:0; display:block; }
.fcard-body{ padding:14px 18px 12px; display:flex; flex-direction:column; gap:7px; }
.fcard-h{ font-size:16.5px; font-weight:600; line-height:1.4; color:#eef3ff; text-decoration:none; }
.fcard-h:hover{ color:var(--accent); }
.fcard-b{ margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-dim); }
.fcard-actions{ display:flex; align-items:center; gap:20px; padding-top:10px; margin-top:4px; border-top:1px solid rgba(124,136,127,.2); }
.fcard-act{ display:inline-flex; align-items:baseline; gap:6px; background:none; border:0; padding:0; cursor:pointer; font-family:var(--mono); color:var(--ink-dim); transition:color .15s; }
.fcard-act .fa-g{ font-size:15px; }
.fcard-act .fa-l{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.fcard-act .fa-c{ font-size:11px; color:var(--accent); }
.fcard-act:hover{ color:var(--accent); }
.fcard-act.on{ color:var(--accent); text-shadow:var(--glow); }
.fcard-stats{ margin-left:auto; display:inline-flex; gap:10px; align-items:baseline; font-family:var(--mono); }
.fcard-stats b{ font-size:12.5px; } .fcard-stats b.up{ color:var(--accent); } .fcard-stats b.dn{ color:var(--strike); }
.fcard-stats span{ font-size:10.5px; letter-spacing:.08em; color:var(--ink-faint); }
.fcard .fc-panel{ margin:0; border-left:0; border-top:1px solid rgba(124,136,127,.2); border-radius:0; padding:12px 18px; }
.feed-day{ max-width:700px; margin:0 auto; width:100%; padding-top:22px; }
@media (max-width:640px){ .fcard-media .pcard-img{ height:190px; } .fcard-actions{ gap:14px; } .fcard-stats span{ display:none; } }
/* tablet portrait kept the desktop action row: pull/comment/share plus the points
   chip didn't fit, and the chip was clipped by the card's right edge. Let it wrap. */
@media (min-width:641px) and (max-width:900px){ .fcard-actions{ flex-wrap:wrap; gap:10px 16px; } .fcard-stats{ margin-left:0; } }

/* ░░░ THE FRONTIER — foresight cards ░░░ */
.frontier-view{ max-width:1180px; margin:0 auto; }
.fr-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:var(--s4); margin-top:var(--s4); }
.fr-card{ position:relative; display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4) var(--s5) var(--s5); background:var(--plate); border:1px solid var(--ink-faint); border-top:2px solid var(--fc,#a78bfa); box-shadow:var(--edge-hi); overflow:hidden; animation:mktReveal .5s var(--b-ease) both; animation-delay:calc(var(--i,0)*45ms); transition:transform .22s var(--b-ease), box-shadow .22s, border-color .22s; }
.fr-card::before{ content:''; position:absolute; top:0; right:0; width:52%; height:56%; background:radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--fc) 12%, transparent), transparent 62%); pointer-events:none; }
.fr-card > *{ position:relative; z-index:1; }
.fr-card:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--fc) 40%, var(--ink-faint)); box-shadow:var(--edge-hi), 0 16px 40px -20px var(--fc); }
/* concept-diagram hero — full-bleed to the card's inner top edge; caveat is baked into the image pixels */
.fr-media{ margin:calc(var(--s4)*-1) calc(var(--s5)*-1) var(--s1); aspect-ratio:16/8.4; overflow:hidden; background:#050606; border-bottom:1px solid color-mix(in srgb, var(--fc) 24%, var(--ink-faint)); }
.fr-media img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.03) contrast(1.02) brightness(.9); transition:transform .5s var(--b-ease, ease), filter .4s; }
.fr-card.has-media:hover .fr-media img{ transform:scale(1.035); filter:saturate(1.12) contrast(1.04) brightness(1); }
@media (prefers-reduced-motion:reduce){ .fr-media img{ transition:none; } .fr-card.has-media:hover .fr-media img{ transform:none; } }
.fr-pill{ align-self:flex-start; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid; }
.fr-measured .fr-pill{ color:#5ef0a8; border-color:color-mix(in srgb,#5ef0a8 42%,transparent); background:color-mix(in srgb,#5ef0a8 10%,transparent); }
.fr-emerging .fr-pill{ color:#f4c95d; border-color:color-mix(in srgb,#f4c95d 42%,transparent); background:color-mix(in srgb,#f4c95d 10%,transparent); }
.fr-spec .fr-pill{ color:#c08bf0; border-color:color-mix(in srgb,#c08bf0 42%,transparent); background:color-mix(in srgb,#c08bf0 10%,transparent); }
.fr-physics .fr-pill{ color:#e8674e; border-color:color-mix(in srgb,#e8674e 48%,transparent); background:color-mix(in srgb,#e8674e 12%,transparent); }
.fr-cap{ font-family:var(--disp); font-size:var(--t-cardh); font-weight:600; line-height:1.25; color:#eef3ff; margin:var(--s1) 0 0; }
.fr-mech{ font-size:var(--t-body); line-height:1.5; color:var(--ink-dim); margin:0; }
.fr-wall{ font-size:var(--t-body); line-height:1.5; color:#ffd9cf; background:color-mix(in srgb,#e8674e 12%,transparent); border-left:2px solid #e8674e; padding:var(--s2) var(--s3); margin:var(--s1) 0 0; border-radius:0 6px 6px 0; }
.fr-wall-k{ display:block; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:#e8674e; margin-bottom:2px; }
.fr-row{ display:flex; flex-direction:column; gap:2px; margin-top:var(--s1); }
.fr-row p{ margin:0; font-size:var(--t-body); line-height:1.5; color:var(--ink); }
.fr-k{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.fr-need{ background:color-mix(in srgb, var(--fc) 8%, transparent); border-radius:6px; padding:var(--s2) var(--s3); margin:var(--s2) calc(-1 * var(--s3)) var(--s1); }
.fr-need .fr-k{ color:var(--fc); }
.fr-note{ font-size:var(--t-cap); line-height:1.45; color:var(--ink-faint); font-style:italic; margin:var(--s2) 0 0; border-top:1px dashed color-mix(in srgb,var(--ink-faint) 70%,transparent); padding-top:var(--s2); }
.fr-foot{ display:flex; flex-direction:column; gap:7px; margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid color-mix(in srgb,var(--ink-faint) 55%,transparent); }
.fr-flip{ font-family:var(--mono); font-size:var(--t-cap); line-height:1.4; color:var(--ink-dim); }
.fr-secs{ display:flex; flex-wrap:wrap; gap:5px; }
.fr-sec{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px; color:var(--sc,#a78bfa); border:1px solid color-mix(in srgb, var(--sc,#a78bfa) 34%, transparent); }
.fr-physics{ border-top-width:3px; }
.fr-physics::after{ content:'⊘'; position:absolute; top:12px; right:13px; font-size:20px; line-height:1; color:color-mix(in srgb,#e8674e 42%,transparent); z-index:1; }
.fr-legend-note{ font-family:var(--mono); font-size:var(--t-cap); line-height:1.55; color:var(--ink-faint); margin:var(--s6) 0 0; max-width:82ch; }
@media (prefers-reduced-motion:reduce){ .fr-card{ animation:none !important; } .fr-card:hover{ transform:none; } }
@media (max-width:640px){ .fr-cards{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   DEEP-SPACE THEME v2 — de-green base + per-section instrument backdrops (2026-07)
   Appended last so it overrides earlier tokens by cascade order. All additive.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#070b14;                 /* deep-space blue-black, was #050606 (green-black) */
  --bg-soft:#0c1220;
  --ink-faint:#6c7789;          /* cool blue-gray borders, was green-gray #7c887f */
  --plate:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,0) 42%), rgba(11,17,30,.52);
  --ghost:rgba(120,140,180,.05);
  --bg-well:radial-gradient(120% 90% at 50% -8%, color-mix(in srgb, var(--sec-c) 9%, transparent), transparent 60%);
}
/* fixed deep-space starfield behind everything, with a soft cool vignette on top */
body{
  background:
    radial-gradient(125% 120% at 50% -12%, rgba(22,32,56,.55) 0%, transparent 52%),
    url("assets/space/starfield.webp") center top / cover no-repeat fixed,
    #060910;
}

/* per-section instrument backdrop — dim orbital rings bleed from the top-right of each view,
   flipped so the rings sit clear of the left-aligned section title; fades out downward */
#home-view, #pull-board, #climb-view, #goal-view, #social-view, #frontier-view, #biz-view{ position:relative; isolation:isolate; }
#home-view::before, #pull-board::before, #climb-view::before, #goal-view::before,
#social-view::before, #frontier-view::before, #biz-view::before{
  content:''; position:absolute; top:0; left:0; right:0; height:min(44vh,340px);
  background:var(--sec-hero) left top / cover no-repeat;
  transform:scaleX(-1); transform-origin:center; opacity:.42; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}
#home-view, #pull-board{ --sec-hero:url("assets/space/hero-mint.webp"); }
#climb-view{ --sec-hero:url("assets/space/hero-amber.webp"); }
#goal-view, #frontier-view{ --sec-hero:url("assets/space/hero-violet.webp"); }
#social-view{ --sec-hero:url("assets/space/hero-cyan.webp"); }
#biz-view{ --sec-hero:url("assets/space/hero-orange.webp"); }

/* ── The Snap — log↔linear "real scale" reveal (climb view) ── */
.snap{ margin:0 0 var(--s8); }
.snap-eyebrow{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:9px; }
.snap-eyebrow::before{ content:''; width:18px; height:1px; background:var(--accent); box-shadow:0 0 7px var(--accent); }
.snap-title{ font-family:var(--disp); font-size:clamp(21px,3vw,30px); font-weight:600; letter-spacing:-.02em; line-height:1.12; margin:10px 0 6px; color:#eef4ef; }
.snap-title .hl{ color:var(--accent); }
.snap-sub{ color:var(--ink-dim); font-size:var(--t-body); line-height:1.55; max-width:66ch; margin:0 0 var(--s5); }
.snap-stage{ position:relative; border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:var(--plate); box-shadow:var(--edge-hi); padding:20px 20px 14px; }
.snap-stage canvas{ display:block; width:100%; height:380px; }
@media (max-width:640px){ .snap-stage canvas{ height:300px; } }
.snap-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap; }
.snap-toggle{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#04130f; background:var(--accent); border:none; border-radius:2px; padding:11px 18px; cursor:pointer; font-weight:600; box-shadow:0 0 18px rgba(94,240,168,.32); transition:background .2s, color .2s, box-shadow .2s; }
.snap-toggle.on{ background:none; color:var(--accent); border:1px solid var(--accent-dim); box-shadow:none; }
.snap-scalelab{ font-size:12px; color:var(--ink-dim); letter-spacing:.05em; }
.snap-scalelab b{ color:var(--ink); }
.snap-foot{ display:flex; justify-content:space-between; gap:16px; margin-top:14px; font-size:12px; line-height:1.5; color:var(--ink-faint); flex-wrap:wrap; }
.snap-counter{ color:#e8674e; max-width:64ch; }
.snap-src{ color:var(--ink-faint); }

/* ── two-column feed — halve the scroll; day dividers span both columns (wide screens only) ── */
@media (min-width:820px){
  .led-feed{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 16px; align-items:start; max-width:1060px; }
  .led-feed .feed-day{ grid-column:1 / -1; }
  .led-feed .feed-day:not(:first-child){ margin-top:6px; }
}

/* ── The Canyon — multi-curve fold-improvement chart + 3D hero (climb view) ── */
.canyon{ position:relative; margin:var(--s8) 0; isolation:isolate; }
.canyon-hero{ position:absolute; top:0; left:0; right:0; height:min(38vh,300px); z-index:-1;
  background:url("assets/space/acceleration-hero.webp") center top / cover no-repeat; opacity:.5; }
.canyon-hero-fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,11,20,.35) 0%, rgba(7,11,20,.72) 62%, var(--bg) 100%); }
.canyon-lead{ padding-top:var(--s4); }
.canyon-stage{ position:relative; border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:var(--plate); box-shadow:var(--edge-hi); padding:18px 18px 12px; margin-top:var(--s3); }
.canyon-stage canvas{ display:block; width:100%; height:460px; }
@media (max-width:640px){ .canyon-stage canvas{ height:360px; } }
.cv-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:var(--s4); font-size:11.5px; }
.cv-leg{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-family:var(--mono); }
.cv-swatch{ width:16px; height:3px; border-radius:2px; display:inline-block; }
.cv-moments{ display:grid; grid-template-columns:1fr 1fr; gap:7px 24px; margin-top:var(--s4); font-size:12px; color:var(--ink-dim); }
.cv-moment{ display:flex; gap:9px; align-items:flex-start; }
.cv-mn{ flex:none; width:18px; height:18px; border-radius:50%; border:1px solid var(--accent-dim); color:var(--accent); font-family:var(--mono); font-size:10px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.cv-moment b{ color:var(--ink); }
@media (max-width:640px){ .cv-moments{ grid-template-columns:1fr; } }

/* ── The Conductor — controls, speed gutter, detail readout ─────────────── */
.cv-controls{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:var(--s3) 0 0; font-family:var(--mono); }
.cv-seg{ display:inline-flex; border:1px solid var(--ink-faint); border-radius:0; overflow:hidden; }
.cv-opt{ padding:6px 10px; font-size:11px; font-family:var(--mono); color:var(--ink-dim); background:rgba(0,0,0,.28); border:none; border-right:1px solid var(--ink-faint); cursor:pointer; }
.cv-opt:last-child{ border-right:none; }
.cv-opt.on{ background:rgba(94,240,168,.16); color:var(--accent); text-shadow:var(--glow); }
.cv-tgl{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-dim); padding:6px 9px; border:1px solid var(--ink-faint); background:rgba(0,0,0,.28); cursor:pointer; user-select:none; }
.cv-tgl input{ accent-color:var(--accent); margin:0; }
.cv-btn{ color:var(--ink-faint); }
.conductor-lower{ display:grid; grid-template-columns:1fr minmax(260px,320px); gap:var(--s4); margin-top:var(--s4); align-items:start; }
@media (max-width:820px){ .conductor-lower{ grid-template-columns:1fr; } }
.cv-gutter-wrap{ border:1px solid var(--ink-faint); border-top:2px solid var(--accent-dim); background:var(--plate); box-shadow:var(--edge-hi); padding:12px 14px; }
.cv-gutter-h{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.cv-gutter-wrap canvas{ display:block; width:100%; height:150px; }
.cv-gutter-cap{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); line-height:1.5; margin:8px 0 0; }
.cv-detail{ border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:var(--plate); box-shadow:var(--edge-hi); padding:14px; min-height:150px; }
.cvd-empty{ font-size:12px; color:var(--ink-faint); line-height:1.5; }
.cvd-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.cvd-dot{ width:13px; height:13px; border-radius:50%; flex:none; }
.cvd-name{ font-size:14.5px; color:#eef3ff; font-weight:600; line-height:1.1; }
.cvd-dom{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); letter-spacing:.03em; margin-top:2px; }
.cvd-chips{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0; }
.cvd-tag{ font-family:var(--mono); font-size:9.5px; padding:3px 7px; border:1px solid var(--ink-faint); color:var(--ink-dim); }
.cvd-tag.cvd-basis{ border-style:dashed; }
.cvd-read{ font-size:12px; line-height:1.5; color:var(--ink-dim); margin:8px 0; }
.cvd-read b{ color:#eef3ff; }
.cvd-conf{ margin:9px 0 3px; }
.cvd-lab{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); letter-spacing:.04em; margin-bottom:3px; }
.cvd-bar{ height:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.cvd-bar > i{ display:block; height:100%; }
.cvd-fals{ margin-top:11px; padding:9px 10px; background:rgba(240,102,63,.08); border:1px solid rgba(240,102,63,.24); }
.cvd-fk{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#f0885a; margin-bottom:4px; }
.cvd-fv{ font-size:11.5px; line-height:1.45; color:var(--ink); }
.cv-leg.sel{ text-shadow:var(--glow); }
.cv-leg.sel .cv-swatch{ outline:2px solid var(--accent); outline-offset:1px; }

/* ── The Atlas — 3D living constellations (WebGL) ── */
.atlas-stage{ position:relative; width:100%; height:min(68vh,620px); min-height:420px; margin-top:var(--s4);
  border:1px solid var(--ink-faint); border-top:2px solid var(--accent); background:radial-gradient(120% 90% at 50% 30%, rgba(94,240,168,.04), transparent 60%), #060910; box-shadow:var(--edge-hi); overflow:hidden; }
.atlas-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.atlas-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.atlas-label{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:2px; white-space:nowrap; transition:opacity .3s; will-change:transform; }
.atlas-label .al-name{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; text-shadow:0 0 8px rgba(7,11,20,.95), 0 0 3px rgba(7,11,20,.95); }
.atlas-label .al-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:#aab8cc; text-shadow:0 0 8px rgba(7,11,20,.95); }
.atlas-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink-dim); }
.atlas-legend{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:var(--s4); font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); }
.atlas-legend .al-k{ letter-spacing:.04em; }
/* a phone gets a taller, narrower stage so 11 constellations stop stacking their labels
   on top of each other, and the legend reads as one item per line instead of a word soup */
@media (max-width:640px){
  .atlas-stage{ height:min(64vh,520px); min-height:400px; }
  .atlas-label .al-meta{ display:none; }
  .atlas-legend{ gap:6px 14px; font-size:10.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMA PASS — 2026-07-17
   The high-end layer: a real display face (Space Grotesk) carrying headlines
   and hero numerals while IBM Plex Mono keeps the data/chrome voice; a door
   worthy of the boot; filled CTAs; refined chrome, radii and light. Appended
   last — cascade wins. Motion is RM-gated; no JS-emitted class is renamed.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --disp:'Space Grotesk','IBM Plex Mono',ui-monospace,monospace;
  --ink-hi:#f2fbf6;
  --ink-mid:#9fb0a5;
  --hair:rgba(154,176,163,.16);
  --hair-hi:rgba(154,176,163,.30);
  --fill:linear-gradient(180deg,#7df5b7,#43d389);
  --fill-hi:linear-gradient(180deg,#95ffc9,#52e29a);
  --cta-ink:#04130f;
  --ring:0 0 0 3px rgba(94,240,168,.16);
}

/* ── 1 · the display face: headlines + hero numerals ── */
.stage h2.prompt, .snap-title, .dash-brand, .goal-title, .gd-title,
.led-stream-label, .cc-title, .mkt-detail-name, .countdown,
.pcard-h, .feed-h, .fcard-h, .hz-name, .cc-goal, .biz-name, .hv-r-k{
  font-family:var(--disp);
}
.stage h2.prompt{
  font-weight:600; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(32px,5.6vw,58px);
  color:var(--ink-hi); text-shadow:0 0 30px rgba(94,240,168,.22);
}
.stage .sub{ color:var(--ink-mid); }
.sec-claim, .snap-title{ letter-spacing:-.02em; }
.home-view .sec-claim{ font-size:clamp(34px,5.6vw,56px); }
.mkt-index-val, .hv-stat-v, .pace-cell b, .climb-card-big, .gm-num,
.tug-ends b, .gs-item b, .stat-n, .goal-cat-idx, .hz-window, .countdown{
  font-family:var(--disp); font-variant-numeric:tabular-nums slashed-zero;
}
.mkt-index-val{ font-weight:600; letter-spacing:-.03em; }
.hv-stat-v, .pace-cell b, .climb-card-big, .gm-num, .tug-ends b, .gs-item b,
.stat-n, .goal-cat-idx{ font-weight:300; letter-spacing:-.02em; }
.hz-window{ font-weight:600; }

/* living headline ink — a slow hue drift across the gradient claims */
@media (prefers-reduced-motion:no-preference){
  .sec-claim{ background-size:220% 100%; animation:claimDrift 16s ease-in-out infinite alternate; }
  @keyframes claimDrift{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
}

/* ── 2 · buttons: one obvious primary, calm ghosts ── */
.btn:not(.ghost), .enter-btn{
  border:1px solid transparent; border-radius:8px;
  background:var(--fill); color:var(--cta-ink);
  font-weight:600; letter-spacing:.08em; text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -12px rgba(94,240,168,.45);
  transition:transform .16s var(--b-ease), box-shadow .25s var(--b-ease), background .2s, opacity .2s;
}
.btn:not(.ghost):hover, .enter-btn:hover{
  background:var(--fill-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 38px -12px rgba(94,240,168,.62);
  transform:translateY(-1px);
}
.btn:not(.ghost):active, .enter-btn:active{ transform:translateY(0); }
.btn:not(.ghost):disabled{ opacity:.4; background:var(--fill); box-shadow:none; }
.btn.ghost{
  border:1px solid var(--hair-hi); border-radius:8px;
  color:var(--ink-mid); background:rgba(255,255,255,.015);
}
.btn.ghost:hover{ color:var(--ink-hi); border-color:rgba(154,176,163,.5); background:rgba(255,255,255,.045); box-shadow:none; }

/* sort/filter chips read as pills */
.led-sort{ flex-wrap:wrap; row-gap:8px; }
.led-sort-btn{ border-radius:999px; padding:4px 13px; white-space:nowrap; }

/* ── 3 · inputs ── */
.field-input{
  border-radius:8px; border:1px solid var(--hair-hi);
  background:rgba(255,255,255,.03); padding:13px 15px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field-input:focus{ border-color:var(--accent-dim); box-shadow:var(--ring); background:rgba(94,240,168,.04); }

/* keyboard wayfinding gets a visible ring */
:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

/* ── 4 · the boot — a held breath before the door ── */
#s-boot::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 38% at 50% 42%, rgba(94,240,168,.075), transparent 70%);
}
#s-boot .boot-inner{ position:relative; }
.boot-log{ font-size:15px; letter-spacing:.015em; }
.boot-log .you{ color:#d7e6dc; }
.boot-bar{ text-shadow:0 0 8px rgba(94,240,168,.5); }
#s-boot .enter-btn{ font-size:16px; padding:15px 34px; letter-spacing:.14em; border-radius:10px; }
@media (prefers-reduced-motion:no-preference){
  .enter-btn{ animation:fadeUp .6s ease both, ctaPulse 2.8s ease-in-out .7s infinite; }
  @keyframes ctaPulse{
    0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 26px -12px rgba(94,240,168,.45); }
    50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 44px -10px rgba(94,240,168,.78); }
  }
}

/* ── 5 · the door — centered, cinematic, one way in ── */
#s-auth .stage, #s-login .stage{ text-align:center; max-width:560px; }
#s-auth .step-tag, #s-login .step-tag{ justify-content:center; }
#s-auth .stage::before{
  content:'◍'; display:block; font-size:44px; line-height:1; margin-bottom:20px;
  color:var(--accent); text-shadow:0 0 10px rgba(94,240,168,.6), 0 0 40px rgba(94,240,168,.28);
}
#s-auth h2.prompt, #s-login h2.prompt{ font-size:clamp(40px,7vw,66px); }
#s-auth .sub, #s-login .sub{ margin-left:auto; margin-right:auto; }
#s-auth .keyform, #s-login .keyform{ margin:30px auto 0; }
#s-auth .field, #s-login .field{ text-align:left; }
#s-auth .btn-row, #s-login .btn-row{ flex-direction:column; align-items:stretch; gap:11px; margin-top:20px; }
#auth-submit, #key-submit{ width:100%; padding:15px 24px; font-size:15px; }
#auth-toggle, #auth-forgot{
  border:0; background:none; padding:5px 0; box-shadow:none;
  color:var(--ink-faint); font-size:12.5px; letter-spacing:.06em; text-shadow:none;
}
#auth-toggle:hover, #auth-forgot:hover{
  color:var(--accent); background:none; box-shadow:none;
  text-decoration:underline; text-underline-offset:3px;
}
@media (prefers-reduced-motion:no-preference){
  #s-auth .stage::before{ animation:keyPulse 3.8s ease-in-out infinite; }
  @keyframes keyPulse{
    0%,100%{ opacity:.82; text-shadow:0 0 8px rgba(94,240,168,.5), 0 0 30px rgba(94,240,168,.22); }
    50%{ opacity:1; text-shadow:0 0 14px rgba(94,240,168,.85), 0 0 52px rgba(94,240,168,.4); }
  }
}

/* ── 6 · the seal — the countdown as a hero numeral ── */
.countdown{
  font-weight:300; font-size:clamp(46px,10vw,84px); letter-spacing:.01em;
  color:var(--ink-hi); text-shadow:0 0 34px rgba(94,240,168,.25);
}
.seal-ring{ box-shadow:0 0 0 1px rgba(94,240,168,.06), 0 0 48px -8px rgba(94,240,168,.3); }
.seal-glyph{ font-size:38px; }

/* ── 7 · questions — confident tap targets ── */
.qbtn{
  border-radius:12px; border:1px solid var(--hair-hi);
  font-family:var(--disp); font-weight:500; font-size:18px; letter-spacing:.18em; padding:24px;
  transition:border-color .2s, color .2s, background .2s, transform .12s, box-shadow .25s;
}
.qbtn:hover{
  border-color:var(--accent-dim); color:var(--accent); background:rgba(94,240,168,.05);
  box-shadow:0 12px 32px -14px rgba(94,240,168,.4); transform:translateY(-2px);
}

/* ── 8 · dashboard chrome ── */
.pull-hud{ padding:18px clamp(16px,3.4vw,46px) 16px; }
/* chrome never shrinks: the scrolling views absorb overflow, so the menu bar
   can never be squeezed into a sliver by a tall view (was collapsing to 8px) */
.pull-top, .thesis-rail, .pull-nav{ flex:0 0 auto; }
.dash-brand{ font-weight:700; font-size:17px; letter-spacing:.22em; color:var(--ink-hi); text-shadow:none; }
.thesis-rail{
  border-radius:10px; border-color:var(--hair);
  background:linear-gradient(90deg, rgba(94,240,168,.07), rgba(6,10,9,.34) 64%);
  box-shadow:var(--edge-hi);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pull-nav{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; border-bottom-color:var(--hair); }
.pull-nav::-webkit-scrollbar{ display:none; }
.nav-btn{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim); padding:11px 13px 11px 21px; white-space:nowrap; }
.nav-btn::before{ left:8px; }
.nav-btn:hover{ color:var(--ink-hi); }

/* dashboard entrance — the hud assembles top-down on arrival */
@media (prefers-reduced-motion:no-preference){
  .screen.dash.active .pull-top{ animation:bsRise .5s var(--b-ease) both; }
  .screen.dash.active .thesis-rail{ animation:bsRise .5s var(--b-ease) both .07s; }
  .screen.dash.active .pull-nav{ animation:bsRise .5s var(--b-ease) both .14s; }
}

/* per-section hero backdrops — present, not apologetic */
#home-view::before, #pull-board::before, #climb-view::before, #goal-view::before,
#social-view::before, #frontier-view::before, #biz-view::before{ opacity:.55; }

/* richer ambient color field */
body::before{
  background:
    radial-gradient(42% 38% at 18% 12%, rgba(94,240,168,.10) 0%, transparent 70%),
    radial-gradient(46% 42% at 84% 22%, rgba(122,162,255,.085) 0%, transparent 70%),
    radial-gradient(50% 46% at 55% 92%, rgba(192,139,240,.075) 0%, transparent 72%),
    radial-gradient(34% 30% at 8% 78%, rgba(54,214,231,.06) 0%, transparent 70%);
}

/* ── 9 · radii: panels 16, cards 12 — one family ── */
.mkt-index, .goal-meter, .goal-detail-pane, .pull-mid, .snap-stage, .canyon-stage,
.mkt-day, .mkt-detail, .home-pulse, .home-hz, .goal-detail-card, .pull-day, .ac-box,
.atlas-stage{ border-radius:16px; }
.hz-card, .cc-card, .fr-card, .hv-route, .biz-rowbtn, .biz-card, .led-sec{ border-radius:12px; }
.fcard{ border-radius:16px; }
.heat-tile{ border-radius:12px; }
.hv-stats, .pace-strip{ border-radius:14px; overflow:hidden; }
.pcard{ border-radius:10px; }
.pcard-media{ border-radius:9px 9px 0 0; }
/* blueprint corner-ticks fight rounded corners — retire them on the rounded panes */
.pull-mid::before, .pull-mid::after, .goal-detail-pane::before, .goal-detail-pane::after{ content:none; }

/* ── 10 · games + world frames ── */
.lights-cell{ border-radius:10px; }
.maze{ border-radius:10px; box-shadow:inset 0 0 30px rgba(0,0,0,.5), 0 18px 50px -20px rgba(0,0,0,.8); }
.room-canvas{ border-radius:6px; box-shadow:0 0 0 1px rgba(94,240,168,.12), 0 24px 70px -18px rgba(0,0,0,.85); }

/* ── 11 · admin + gallery — same family ── */
.admin-drop{ border-radius:10px; }
.stat{ border-radius:8px; }
.admin-card{ border-radius:10px; }
.gal-item{ border-radius:10px; overflow:hidden; }
@media (prefers-reduced-motion:no-preference){
  .gal-item img{ transition:transform .5s var(--b-ease); }
  .gal-item:hover img{ transform:scale(1.03); }
}

/* ── 12 · the open line — log rows are terminal lines, not boxes
   (cliLog emits class "line cli"; .cli is also the old document CLI box —
   every transmission was inheriting the box's border/padding/7vh margin) ── */
.pull-log .line.cli{
  border:0; background:none; padding:0; margin:0; border-radius:0;
  font-size:12.5px; color:var(--accent-dim);
}

/* ── 13 · the skyline — 3D towers of the 11 needs (home) ── */
.sky-board{ margin-top:var(--s6, 34px); }
.sky-stage{
  position:relative; width:100%; height:min(54vh,470px); min-height:360px; margin-top:var(--s4);
  border-radius:16px; overflow:hidden; border:1px solid rgba(94,240,168,.14);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(94,240,168,.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(7,11,20,.4) 0%, rgba(7,11,20,.85) 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.35);
  cursor:grab;
}
.sky-stage:active{ cursor:grabbing; }
.sky-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sky-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.sky-label{ position:absolute; left:0; top:0; display:flex; flex-direction:column; align-items:center; gap:1px; white-space:nowrap; transition:opacity .3s; will-change:transform; }
.sky-label .sl-name{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-shadow:0 0 8px rgba(7,11,20,.95), 0 0 3px rgba(7,11,20,.95); }
.sky-label .sl-meta{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:#aab8cc; text-shadow:0 0 8px rgba(7,11,20,.95); }
.sky-label.on .sl-name{ text-shadow:0 0 12px currentColor, 0 0 8px rgba(7,11,20,.95); }
.sky-label.on .sl-meta{ color:#e6f2ff; }
.sky-readout{
  position:absolute; left:12px; bottom:12px; z-index:3; max-width:min(86%,560px);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim);
  background:rgba(8,12,18,.72); border:1px solid rgba(94,240,168,.16); border-radius:9px;
  padding:7px 11px; backdrop-filter:blur(6px); pointer-events:none;
}
.sky-readout b{ font-weight:600; }
.sky-readout .sr-dim{ color:var(--ink-dim); opacity:.85; }
.sky-fallback{
  margin-top:var(--s4); border-radius:16px; border:1px solid rgba(94,240,168,.14);
  background:linear-gradient(180deg, rgba(7,11,20,.5), rgba(7,11,20,.85));
  padding:22px 18px 16px; display:flex; align-items:flex-end; gap:6px; min-height:200px;
}
.sky-fallback .sf-bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-end; min-width:0; }
.sky-fallback .sf-fill{ width:100%; border-radius:5px 5px 2px 2px; box-shadow:0 0 14px -2px currentColor; }
.sky-fallback .sf-name{ font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); writing-mode:vertical-rl; transform:rotate(180deg); max-height:64px; overflow:hidden; }
@media (max-width:640px){
  .sky-stage{ height:48vh; min-height:320px; }
  .sky-readout{ font-size:10px; left:8px; bottom:8px; padding:6px 9px; }
  .sky-label .sl-name{ font-size:8.5px; letter-spacing:.08em; }
  .sky-label .sl-meta{ font-size:8px; }
}

/* ── 14 · elevation: one italic-serif accent word + sections that power up on scroll ── */
.sec-claim .hl, .snap-title .hl{
  font-family:'Instrument Serif', Georgia, serif; font-style:italic;
  font-weight:400; font-size:1.06em; letter-spacing:-.01em;
}
.home-view > .sec-head .sec-claim{ font-size:clamp(38px,6.2vw,64px); line-height:1.05; }
.sec-claim{ line-height:1.08; }
@media (prefers-reduced-motion:no-preference){
  .rv{ opacity:0; translate:0 26px; filter:blur(6px);
    transition:opacity .9s var(--b-ease), translate .9s var(--b-ease), filter .9s var(--b-ease); }
  .rv.in{ opacity:1; translate:0 0; filter:none; }
}


/* ═══ occupations page (appended 2026-07-20) ═══ */
/* ── The Workforce (occupations) instrument ─────────────────────────────── */
#occ-root{ --occ:var(--sec-c,#5e9bf0); --ink-dim:#9aa79f; display:block; max-width:1180px; margin:0 auto; font-family:var(--sans, -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif); color:var(--ink,#e7edf4); }
#occ-root b{ color:#eef4fb; font-weight:600; }
.occ-head{ margin-bottom:var(--s5,22px); }
.occ-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--occ); }
.occ-title{ font-size:clamp(24px,4vw,40px); line-height:1.03; letter-spacing:-.02em; margin:.3em 0 .25em; text-wrap:balance; }
.occ-dek{ max-width:72ch; font-size:15px; line-height:1.55; color:var(--ink-dim,#9fb0c4); margin:0 0 12px; }
.occ-legend{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.occ-legend-lbl{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-right:2px; }
.occ-basis{ font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; padding:2px 7px; border-radius:5px; color:var(--bc); border:1px solid color-mix(in srgb, var(--bc) 45%, transparent); background:color-mix(in srgb, var(--bc) 10%, transparent); white-space:nowrap; }
.occ-stale{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; color:var(--ink-faint,#66768c); }
.occ-dot{ width:7px; height:7px; border-radius:50%; background:#5ef0a8; box-shadow:0 0 8px #5ef0a8; }

.occ-block{ margin:26px 0; }
.occ-kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid rgba(120,140,170,.16); }
.occ-panel{ background:var(--plate, rgba(18,26,40,.55)); border:1px solid rgba(120,140,170,.16); border-radius:14px; padding:18px 20px; }
.occ-panel .occ-kicker{ margin-top:0; }
.occ-note{ font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--ink-faint); margin:14px 0 0; }
.occ-lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-right:5px; }

/* three margins */
.occ-margins{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:800px){ .occ-margins{ grid-template-columns:minmax(0,1fr); } }
.occ-margin{ border:1px solid rgba(120,140,170,.16); border-radius:12px; padding:14px; background:rgba(10,16,26,.4); border-top:2px solid #8b96a6; }
.occ-margin.sig-on{ border-top-color:#ffb454; background:rgba(255,180,84,.05); }
.occ-margin-h{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.occ-sig{ font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; padding:3px 8px; border-radius:5px; background:rgba(139,150,166,.18); color:#c3ccd8; }
.sig-on .occ-sig{ background:rgba(255,180,84,.2); color:#ffb454; }
.occ-margin-lab{ font-size:13px; font-weight:600; color:#eef4fb; }
.occ-margin-find{ font-size:13px; line-height:1.5; color:var(--ink-dim); margin:0 0 9px; }
.occ-margin-meta{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.occ-src{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.occ-caveat{ font-size:11.5px; line-height:1.45; color:var(--ink-faint); margin:0; font-style:italic; }

/* occupation cards */
.occ-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media(max-width:800px){ .occ-grid{ grid-template-columns:minmax(0,1fr); } }
/* every occ box is a grid item: min-width:auto floors it at min-content, which for these
   cards is ~620px (nowrap tier chips + the split track) — 280px of a phone card was being
   clipped off the right edge. min-width:0 lets the track govern. */
.occ-card, .occ-margin, .occ-case, .occ-vr, .occ-fact > *, .occ-src-row > *{ min-width:0; }
.occ-card{ border:1px solid rgba(120,140,170,.16); border-radius:14px; padding:16px; background:var(--plate,rgba(18,26,40,.55)); box-shadow:var(--edge-hi, inset 0 1px 0 rgba(255,255,255,.04)); }
.occ-card-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.occ-name{ font-size:16px; margin:0; color:#eef4fb; }
.occ-soc{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.occ-tier{ font-family:var(--mono); font-size:9.5px; letter-spacing:.03em; padding:3px 8px; border-radius:6px; white-space:nowrap; color:var(--tc); border:1px solid color-mix(in srgb, var(--tc) 45%, transparent); background:color-mix(in srgb, var(--tc) 10%, transparent); }
.occ-headline{ font-size:12.5px; line-height:1.5; color:var(--ink-dim); margin:0 0 12px; }
.occ-metrics{ display:flex; flex-direction:column; gap:9px; margin-bottom:12px; }
.occ-metric{ border-left:2px solid rgba(120,140,170,.22); padding-left:10px; }
.occ-metric-h{ display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.occ-metric-k{ font-family:var(--mono); font-size:10px; letter-spacing:.03em; color:var(--ink-faint); text-transform:uppercase; }
.occ-metric-v{ font-size:12.5px; line-height:1.45; color:#dce4ee; }
.occ-split{ margin-top:6px; }
.occ-split-track{ display:flex; align-items:center; height:8px; }
.occ-split-neg{ height:8px; background:#f0663f; border-radius:3px 0 0 3px; margin-left:auto; }
.occ-split-zero{ width:2px; height:14px; background:rgba(255,255,255,.5); flex:none; }
.occ-split-pos{ height:8px; background:#5ef0a8; border-radius:0 3px 3px 0; }
.occ-split-labs{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:9.5px; margin-top:3px; }
.occ-confounds{ font-size:11px; margin-bottom:10px; line-height:1.8; }
.occ-conf{ font-family:var(--mono); font-size:10px; color:var(--ink-dim); background:rgba(120,140,170,.12); padding:2px 7px; border-radius:5px; margin-right:4px; white-space:nowrap; display:inline-block; max-width:100%; }
@media(max-width:640px){ .occ-conf{ white-space:normal; } }   /* a 180px nowrap chip ran off the edge of a 342px card */
.occ-fals{ font-size:11.5px; line-height:1.45; color:#f4d9d0; background:rgba(240,102,63,.08); border:1px solid rgba(240,102,63,.22); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.occ-fk{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#f0885a; margin-right:6px; }
.occ-card-f{ display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); border-top:1px solid rgba(120,140,170,.14); padding-top:8px; }

/* calibration */
.occ-stat{ font-size:15px; line-height:1.5; color:#eef4fb; margin:0 0 8px; }
.occ-verdict{ font-size:13px; line-height:1.55; color:var(--ink-dim); margin:0 0 16px; padding-left:12px; border-left:2px solid var(--occ); }
.occ-cases{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:800px){ .occ-cases{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .occ-cases{ grid-template-columns:minmax(0,1fr); } }
.occ-case{ border:1px solid rgba(120,140,170,.16); border-radius:10px; padding:12px; border-top:2px solid var(--ct); background:rgba(10,16,26,.4); }
.occ-case-h{ display:flex; flex-direction:column; margin-bottom:4px; }
.occ-case-name{ font-size:13px; font-weight:600; color:#eef4fb; }
.occ-case-shape{ font-family:var(--mono); font-size:10px; color:var(--ct); }
.occ-case-shock{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-bottom:7px; }
.occ-case-detail{ font-size:11.5px; line-height:1.5; color:var(--ink-dim); margin:0; }

/* exposure record */
.occ-intro{ font-size:13px; line-height:1.55; color:var(--ink-dim); margin:0 0 14px; }
.occ-facts{ display:flex; flex-direction:column; gap:10px; }
.occ-fact{ display:grid; grid-template-columns:180px 1fr; gap:14px; align-items:baseline; padding-bottom:10px; border-bottom:1px solid rgba(120,140,170,.12); }
@media(max-width:640px){ .occ-fact{ grid-template-columns:minmax(0,1fr); gap:2px; } }
.occ-fact-v{ font-family:var(--mono); font-size:18px; font-weight:600; color:#eef4fb; display:flex; align-items:baseline; gap:8px; }
.occ-fact-l{ font-size:12.5px; line-height:1.5; color:var(--ink-dim); }
.occ-intl{ font-size:12.5px; line-height:1.55; color:var(--ink-dim); margin:16px 0 0; padding:12px; background:rgba(157,180,214,.07); border-radius:10px; }

/* vendor ledger */
.occ-ledger{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:800px){ .occ-ledger{ grid-template-columns:minmax(0,1fr); } }
.occ-vr{ border:1px solid rgba(120,140,170,.16); border-radius:12px; padding:13px; background:rgba(10,16,26,.4); }
.occ-vr-h{ display:flex; align-items:center; gap:9px; margin-bottom:9px; flex-wrap:wrap; }
.occ-vr-co{ font-size:14px; font-weight:600; color:#eef4fb; }
.occ-vr-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:5px; color:var(--vt); border:1px solid color-mix(in srgb, var(--vt) 45%, transparent); }
.occ-vr-date{ font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-left:auto; }
.occ-vr-claim, .occ-vr-out{ font-size:12px; line-height:1.5; color:var(--ink-dim); margin-bottom:6px; }
.occ-vr-out{ margin-bottom:0; color:#dce4ee; }

/* the capability clock (3 flat spans per rung, built in occupations.js) — two of its three
   columns are nowrap, so on a phone they ate the row and the third ran off the edge. One
   column per span, ruled between rungs. */
@media(max-width:640px){
  .occ-clock{ grid-template-columns:minmax(0,1fr) !important; gap:2px 0 !important; }
  .occ-clock > span:nth-child(3n+1){ margin-top:12px; }
  .occ-clock > span:nth-child(3n){ padding-bottom:10px; border-bottom:1px solid rgba(120,140,170,.14); }
  .occ-clock > span{ white-space:normal !important; }
}

/* source table */
.occ-src-table{ font-size:12px; }
.occ-src-row{ display:grid; grid-template-columns:1.4fr 2fr 0.9fr 0.9fr 0.8fr; gap:12px; padding:8px 0; border-bottom:1px solid rgba(120,140,170,.12); align-items:center; }
@media(max-width:720px){ .occ-src-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 12px; } .occ-src-row span:nth-child(3){ display:none; } }
.occ-src-head{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.occ-src-name{ color:#eef4fb; font-weight:600; }
.occ-src-row span{ color:var(--ink-dim); }
.occ-refresh{ font-family:var(--mono); font-size:10px; }
.occ-refresh.auto{ color:#5ef0a8; }
.occ-refresh.manual{ color:var(--ink-faint); }


/* ░░░ phone shell — the dash nav docks as a bottom tab bar ░░░ */
@media (max-width: 760px) {
  /* ── ONE scroll, not two ──
     The hud is a full-height flex column on desktop: chrome pinned, each view scrolling in
     its own pane. On a phone that pinned ~194px of brand + thesis rail above the fold and
     left every view a ~560px porthole — a third of the screen spent on furniture that never
     moved. Here the hud is normal flow, #s-dash (fixed inset:0, overflow:auto) does the
     scrolling, and the chrome scrolls away. Only the tab bar stays docked. */
  #s-dash .pull-hud { display: block; height: auto; min-height: 100%; padding: 14px 16px 0; }
  #s-dash .home-view, #s-dash .pull-board, #s-dash .climb-view, #s-dash .goal-view,
  #s-dash .social-view, #s-dash .biz-view, #s-dash .frontier-view,
  #s-dash .atlas-view, #s-dash .occupations-view {
    flex: none; min-height: 0; overflow: visible;
    margin-top: 16px; padding-left: 0; padding-right: 0; padding-bottom: 0;
  }
  #s-dash .social-view .pull-log { max-height: none; }

  /* compact chrome — it still has to earn its scroll */
  .pull-top { gap: 8px 12px; }
  .dash-brand { font-size: 14px; letter-spacing: .18em; }
  .dash-badge { font-size: 9.5px; }
  .dash-id { font-size: 11px; gap: 10px; }

  .pull-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    margin-top: 0; padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0; border-top: 0;
    /* the plate lives on body::after below — masking the bar to signal "scroll me" would
       have faded its own background out at the edges too */
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    scroll-snap-type: x proximity; scroll-padding-inline: 40px; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 30px), transparent 100%);
  }
  /* the docked plate, drawn behind the scrolling tabs so the mask can't eat it.
     It hangs off .pull-hud, not body: body::after is already the phosphor-grain layer,
     and it has to live inside .pull-hud's stacking context (position:relative; z-index:1)
     to stay UNDER .pull-nav's z-900 rather than over the whole hud. */
  #s-dash .pull-hud::after {
    content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 899; pointer-events: none;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 7, 6, .93);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--hair);
  }
  .nav-btn { padding: 11px 13px; min-height: 44px; font-size: 10px; display: inline-flex; align-items: center; scroll-snap-align: center; }
  .nav-btn::before { display: none; }   /* no ▸ marker in the tab bar */
  .nav-btn::after { bottom: auto; top: 0; transform-origin: left; }   /* the active tick rides the top edge */
  .nav-btn.active { background: rgba(94, 240, 168, .08); border-radius: 8px; }
  /* the three "leaves the dash" tabs read as a group, not as more views */
  .nav-go { margin-left: 0; padding-left: 13px; opacity: .8; }
  .nav-btn:not(.nav-go) + .nav-go { margin-left: 6px; border-left: 1px solid var(--hair); }   /* :first-of-type would match the first *button* (home), not the first .nav-go */
  #s-dash .pull-hud { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }   /* the views clear the docked bar */
  .devskip { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }   /* clears the tab bar AND the engine pill */
  .eng-strip.eng-pill { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }   /* floats above the tab bar — its injected stylesheet lands after ours, hence the !important */
  #rally-fab { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }   /* share launcher rides above the bar too — inline style owns its bottom, hence the !important */
}


/* ░░░ the hero — the skyline IS the welcome ░░░ */
/* ── while you were gone — the return-visit delta ── */
.wyg { margin: 0 0 var(--sp-3); font-family: var(--mono); }
.wyg-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px; border: 1px solid rgba(94,240,168,.3); border-radius: 12px;
  background: rgba(94,240,168,.05); font-size: 12.5px; color: var(--ink-dim);
}
.wyg-dot { color: var(--accent); text-shadow: var(--glow); animation: ghostPulse 2.4s ease-in-out infinite; }
.wyg-text b { color: var(--ink); font-weight: 500; }
.wyg-x {
  margin-left: auto; background: none; border: 0; color: var(--ink-faint);
  font-family: inherit; font-size: 14px; cursor: pointer; padding: 0 2px;
}
.wyg-x:hover { color: var(--ink); }
/* a crossing is a rare, dated EVENT — the one thing allowed to be loud */
.wyg-event {
  display: flex; align-items: baseline; gap: 12px; margin-top: 6px;
  padding: 12px 14px; border: 1px solid rgba(232,179,74,.5); border-radius: 12px;
  background: rgba(232,179,74,.07); font-size: 13px; color: var(--ink);
  animation: rungIn .5s ease both;
}
.wyg-event .wyg-ev-tag {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #e8b34a;
  border: 1px solid rgba(232,179,74,.5); border-radius: 9px; padding: 2px 8px; white-space: nowrap;
}
.wyg-event b { font-weight: 500; }
.wyg-event .wyg-ev-when { margin-left: auto; color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }

.hero-board { position: relative; height: clamp(460px, 68vh, 640px); border-radius: 18px; overflow: hidden; border: 1px solid rgba(199,214,240,.14); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 90px -40px rgba(124,92,255,.5), 0 0 70px -45px rgba(63,217,255,.55); }
.hero-board .sky-stage { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; }
.hero-board .sky-fallback { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; }
.hero-veil { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 90px clamp(18px,4vw,44px) 26px; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(4,7,18,.5) 42%, rgba(4,7,18,.92) 100%); }
.hero-veil .sec-claim { font-size: clamp(34px, 5.2vw, 62px); margin: 2px 0 8px; }
.hero-idx { display: flex; align-items: baseline; gap: 14px; }
.hero-idx b { font-family: var(--disp); font-weight: 700; font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -.02em; background: linear-gradient(115deg, #eef3ff 0%, #7fe0ff 45%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 26px rgba(101,178,255,.35)); font-variant-numeric: tabular-nums; }
.hero-chg { font-family: var(--mono); font-size: clamp(13px, 1.8vw, 17px); font-weight: 600; }
.hero-chg.up { color: var(--accent); text-shadow: var(--glow); }
.hero-chg.dn { color: var(--strike); }
.hero-thesis { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-dim); max-width: 62ch; margin: 8px 0 0; }
@media (max-width: 760px) {
  /* legacy hero (pre-deck) — kept for rollback; the deck replaced this on home */
  .hero-board { height: min(58vh, 540px); }
  /* the veil has to actually veil: at phone widths the claim and the index both landed on
     top of the towers, unreadable against them. Deeper fade, earlier opacity ramp. */
  .hero-veil { padding: 96px 16px 18px; background: linear-gradient(180deg, transparent 0%, rgba(4,7,18,.72) 34%, rgba(4,7,18,.95) 62%, rgba(4,7,18,.98) 100%); }
  .hero-veil .sec-claim { font-size: clamp(26px, 7.6vw, 36px); }
  .hero-idx { gap: 10px; flex-wrap: wrap; }
  .hero-idx b { font-size: clamp(36px, 12vw, 52px); }
  .hero-thesis { font-size: 0; max-width: 100%; }
  .hero-thesis::after { content: 'drag to orbit · tap a pin to read the story'; font-size: 11px; }
}

/* ░░░ the demoted manifesto — there if you want it, closed by default ░░░ */
.hv-why-acc { margin-top: var(--s6, 34px); border: 1px solid var(--hair); border-radius: var(--r-m, 10px); background: var(--surface-1, rgba(201,209,203,.03)); }
.hv-why-acc summary { cursor: pointer; list-style: none; padding: 14px 18px; font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.hv-why-acc summary::-webkit-details-marker { display: none; }
.hv-why-acc summary::before { content: '▸'; color: var(--accent); margin-right: 10px; display: inline-block; transition: transform .25s; }
.hv-why-acc[open] summary::before { transform: rotate(90deg); }
.hv-why-acc summary em { color: var(--accent); font-style: normal; }
.hv-why-acc .hv-p, .hv-why-acc .hv-why { margin: 0 18px 14px; max-width: 72ch; }

/* ░░░ the horizon as a swipe rail ░░░ */
.hz-cards { display: flex; gap: var(--s4, 18px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; scrollbar-width: thin; }
.hz-cards .hz-card { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; }
@media (min-width: 1100px) { .hz-cards .hz-card { flex-basis: 380px; } }


/* ░░░ the growth canyon — the climb's 3D hero ░░░ */
.growth-stage{
  position:relative; width:100%; height:min(48vh,430px); min-height:300px; margin:var(--s4,18px) 0 var(--s3,12px);
  border-radius:16px; overflow:hidden; border:1px solid rgba(94,240,168,.14);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(94,240,168,.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(7,11,20,.4) 0%, rgba(7,11,20,.85) 100%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.35);
  cursor:grab;
}
.growth-stage:active{ cursor:grabbing; }
.growth-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.growth-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.growth-label{ position:absolute; left:0; top:0; white-space:nowrap; transition:opacity .3s; will-change:transform; }
.growth-label .gl-name{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; text-shadow:0 0 8px rgba(7,11,20,.95), 0 0 3px rgba(7,11,20,.95); }
.growth-readout{
  position:absolute; left:12px; bottom:12px; z-index:3; max-width:min(86%,560px);
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-dim);
  background:rgba(8,12,18,.72); border:1px solid rgba(94,240,168,.16); border-radius:9px;
  padding:7px 11px; backdrop-filter:blur(6px); pointer-events:none;
}
.growth-readout b{ font-weight:600; }
.growth-readout .gr-dim{ color:var(--ink-dim); opacity:.85; }
@media (max-width:640px){
  .growth-stage{ height:42vh; min-height:280px; }
  .growth-label .gl-name{ font-size:8.5px; letter-spacing:.08em; }
  .growth-readout{ font-size:10px; left:8px; bottom:8px; padding:6px 9px; }
}

/* ═══════════ THE OPENING — the doubling clock ═══════════
   A metronome, not a chart. Each .beat is one doubling, positioned by year on a
   fixed rail, so where a machine took the job the dots visibly pile up. Nothing
   is written above the rail — caption, rungs and doors all arrive after. */
.screen.open { display: none; }
.screen.open.active { display: flex; align-items: center; justify-content: center; }
.open-stage {
  width: min(880px, 92vw); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}

.clock { width: 100%; cursor: pointer; }
.clock-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.clock-label { color: var(--ink-dim); }
.clock-tempo { color: var(--accent); text-shadow: var(--glow); white-space: nowrap; }
.clock-tempo.flash { animation: tempoFlash .5s ease; }
@keyframes tempoFlash {
  0% { transform: scale(1); text-shadow: var(--glow); }
  30% { transform: scale(1.14); text-shadow: var(--glow-strong); }
  100% { transform: scale(1); text-shadow: var(--glow); }
}
.clock-rail {
  position: relative; height: 88px;
  border: 1px solid var(--hair); border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(94,240,168,.04), rgba(5,6,6,0) 70%);
}
.clock-rail::after {                       /* the time axis the beats land on */
  content: ''; position: absolute; left: 0; right: 0; bottom: 26px; height: 1px;
  background: var(--hair);
}
.clock-rail .beat {
  position: absolute; bottom: 22px; width: 2px; height: 10px; margin-left: -1px;
  background: var(--accent); border-radius: 1px;
  box-shadow: 0 0 6px rgba(94,240,168,.75);
  animation: beatIn .34s ease both;
}
@keyframes beatIn {
  0% { opacity: 0; height: 30px; box-shadow: 0 0 18px rgba(94,240,168,.95); }
  100% { opacity: 1; height: 10px; box-shadow: 0 0 6px rgba(94,240,168,.75); }
}
/* the dots already scheduled by the tempo — hollow, breathing, not yet earned */
.clock-rail .beat.ghost {
  background: none; border: 1px solid var(--accent); width: 4px; height: 8px; margin-left: -2px;
  box-shadow: none; opacity: .55; border-radius: 2px;
  animation: beatIn .34s ease both, ghostPulse 2.2s ease-in-out 1s infinite;
}
@keyframes ghostPulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
/* the observer, planted on the rail — flat behind you, steep ahead */
.clock-rail .clock-now {
  position: absolute; bottom: 14px; width: 1px; height: 44px; margin-left: -.5px;
  background: linear-gradient(180deg, var(--ink-dim), transparent);
  animation: beatIn .4s ease both;
}
.clock-rail .clock-now b {
  position: absolute; top: -14px; left: -14px; width: 28px; text-align: center;
  font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim);
}
/* the countdown to the next scheduled dot */
.clock-next {
  margin-top: var(--sp-2);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--accent); text-shadow: var(--glow);
  animation: rungIn .5s ease both;
}
.clock-years {
  display: flex; justify-content: space-between; margin-top: var(--sp-2);
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}

/* the human rungs — what the doublings actually bought */
.rungs { width: 100%; display: flex; flex-direction: column; gap: 1px; }
.rung {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: var(--sp-2);
  padding: 8px 12px; border-radius: var(--r-s);
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint);
  animation: rungIn .4s ease both;
}
.rung.lit { color: var(--ink); background: rgba(94,240,168,.05); }
.rung-dot { color: var(--ink-faint); }
.rung.lit .rung-dot { color: var(--accent); text-shadow: var(--glow); }
.rung-when { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.rung.lit .rung-when { color: var(--accent); }
@keyframes rungIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* act 3 — one ruler, every curve */
.compare { width: 100%; display: flex; flex-direction: column; gap: var(--sp-2); }
.cmp {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr auto; align-items: center; gap: var(--sp-3);
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
}
.cmp-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-track { display: flex; gap: 3px; align-items: center; min-height: 12px; flex-wrap: wrap; }
.cmp-track i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 5px rgba(94,240,168,.6);
  animation: beatPop .3s ease both;
}
.cmp.wrong .cmp-track i { background: var(--strike); box-shadow: 0 0 5px rgba(200,85,61,.6); }
.cmp.wrong .cmp-n { color: var(--strike); }
.cmp.flat .cmp-n { color: var(--ink-faint); font-style: italic; }
.cmp-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes beatPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }

.open-cap { text-align: center; animation: openCapIn .5s ease both; }
.open-num {
  font-family: var(--disp); font-weight: 600;
  font-size: clamp(28px, 5.4vw, 54px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--ink-hi); text-shadow: var(--glow-strong);
  font-variant-numeric: tabular-nums;
}
.open-line {
  margin: var(--sp-2) auto 0; max-width: 62ch;
  font-family: var(--mono); font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.6;
  color: var(--ink-dim);
}
@keyframes openCapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.open-bar { display: flex; align-items: center; gap: var(--sp-3); animation: openCapIn .5s .08s ease both; }
.open-again {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: none; cursor: pointer;
  border: 1px solid var(--accent-dim); border-radius: 999px; padding: 7px 16px;
  transition: background .18s, box-shadow .18s;
}
.open-again:hover { background: rgba(94,240,168,.08); box-shadow: var(--glow); }
.open-dots { font-size: 10px; letter-spacing: .34em; color: var(--ink-faint); }

.open-doors { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); animation: openCapIn .5s .16s ease both; }
.open-in {
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bg); background: var(--accent); cursor: pointer;
  border: 0; border-radius: 999px; padding: 11px 30px; box-shadow: var(--glow-strong);
}
.open-in:hover { filter: brightness(1.08); }
.open-under { display: flex; gap: var(--sp-4); }
.open-under a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--accent-dim);
}
.open-under a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .open-stage { gap: var(--sp-3); }
  .clock-rail { height: 68px; }
  .clock-head { font-size: 10px; letter-spacing: .1em; }
  .cmp { grid-template-columns: 1fr; gap: 2px; font-size: 11px; }
  .cmp-label { white-space: normal; }
  .open-under { gap: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .open-cap, .open-bar, .open-doors, .rung, .clock-rail .beat, .clock-rail .clock-now, .clock-next, .cmp-track i { animation: none; }
}

/* the hidden attribute must win over the display rules above — an author-level
   `display` beats the UA stylesheet's [hidden], which silently left act 2's
   rungs on screen during act 3 */
.rungs[hidden], .compare[hidden], .open-cap[hidden], .open-bar[hidden], .open-doors[hidden] { display: none; }

/* the clockbox mounts in two places — the door and the Climb view — so its own
   layout lives here rather than in either host */
.clockbox { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.clock-sec { margin: 0 0 var(--sp-6); }
.clock-sec .open-num { font-size: clamp(22px, 3.4vw, 36px); }      /* inside the page, not the whole screen */
.clock-sec .open-line { font-size: 12.5px; }
.clock-sec .clock-rail { height: 72px; }
.clock-foot { width: 100%; }


/* ░░░ the scoring rubric + the flare protocol (impact-scoring redesign, 2026-08) ░░░ */
/* evidence-grade chips — the claim's grade caps its weight: measured ≤5 · emerging ≤4 · speculative ≤2 · vendor ≤2 */
.fcard-grade, .pcard-grade { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid; border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.ev-measured { color: var(--accent); border-color: rgba(94,240,168,.45); background: rgba(94,240,168,.07); }
.ev-emerging { color: #4fd8e8; border-color: rgba(79,216,232,.4); background: rgba(79,216,232,.06); }
.ev-speculative { color: var(--ink-faint); border-color: rgba(124,136,127,.45); background: rgba(124,136,127,.08); }
.ev-vendor { color: var(--warn); border-color: rgba(232,179,74,.45); background: rgba(232,179,74,.06); }
.pcard-media .pcard-grade { position: absolute; bottom: 8px; right: 8px; z-index: 2; background: rgba(2,10,7,.72); backdrop-filter: blur(3px); }
.fcard-why { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--ink-faint); }

/* the flare — the ONE loud card: a claim bigger than the 1–5 scale (candidate regime break).
   amber like a wyg-event crossing: rare, dated, earned loudness — the weight stays evidence-capped. */
.fcard.flare { border-color: rgba(232,179,74,.55); box-shadow: 0 0 0 1px rgba(232,179,74,.2), 0 14px 44px -18px rgba(232,179,74,.25); }
.fcard.flare::before { content: none; }
.flare-block { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding: 12px 14px; border: 1px solid rgba(232,179,74,.5); border-radius: 12px; background: rgba(232,179,74,.07); animation: rungIn .5s ease both; }
.flare-head { display: flex; align-items: baseline; gap: 10px; }
.flare-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: #e8b34a; border: 1px solid rgba(232,179,74,.55); border-radius: 9px; padding: 2px 8px; white-space: nowrap; animation: ghostPulse 2.4s ease-in-out infinite; }
.flare-headline { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.flare-claim { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-hi); font-weight: 500; }
.flare-ladder { display: flex; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.flare-ladder li { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); border: 1px solid rgba(124,136,127,.35); border-radius: 9px; padding: 3px 9px; }
.flare-ladder li b { font-weight: 600; opacity: .7; }
.flare-ladder li.lit { color: #e8b34a; border-color: rgba(232,179,74,.6); background: rgba(232,179,74,.1); text-shadow: 0 0 10px rgba(232,179,74,.35); }
.flare-ladder li:not(.lit) { opacity: .7; }
.flare-cap, .flare-cond { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--ink-dim); }
.flare-cond { color: var(--warn); }
.flare-foldbtn { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.flare-foldbtn:hover { color: #e8b34a; }
.flare-fold { font-family: var(--mono); font-size: 11px; line-height: 1.65; color: var(--ink-dim); border-left: 2px solid rgba(232,179,74,.45); padding: 6px 0 6px 12px; }

/* the horizon's engine tier — ledger-measured window movement — and its evidence list */
.hz-eng { display: flex; flex-direction: column; gap: 5px; }
.hz-eng-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; line-height: 1.5; color: var(--ink-dim); }
.hz-eng-row b { font-weight: 500; color: var(--ink); }
.hz-eng-row span { color: var(--mc, var(--accent)); }
.hz-eng-row em { font-style: normal; color: var(--ink-faint); }
.hz-eng-row.up em { color: var(--mkt-up); }
.hz-evid { display: flex; flex-direction: column; gap: 4px; }
.hz-evid-h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.hz-evid-li { display: flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-size: 10.5px; line-height: 1.45; color: var(--ink-dim); }
.hz-evid-li b { flex: none; font-weight: 600; color: var(--mkt-up); }
.hz-evid-li.fric b { color: var(--mkt-dn); }
.hz-evid-li i { flex: none; font-style: normal; color: var(--ink-faint); }
.hz-evid-li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* same-day duplicate coverage — rendered for the record, visually stood down */
.fcard.dup { opacity: .62; border-style: dashed; }
.fcard.dup .fcard-h { color: var(--ink-dim); }
.feed-dup { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border: 1px dashed rgba(124,136,127,.5); border-radius: 9px; padding: 1px 7px; white-space: nowrap; }

/* ░░░ the second scoring tier: MEASURED REACH (2026-08) ░░░
   The 1–5 rubric is a SALIENCE ranking — it orders the feed, it cannot carry value.
   Where a source states a real countable human figure, that figure leads the card and the
   signed points step back to a small salience tag. Cards without reach are untouched. */
.reach-band { display: flex; flex-direction: column; gap: 4px; margin: 0 0 2px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid rgba(94,240,168,.3); border-left: 3px solid var(--accent); background: rgba(94,240,168,.06); }
.reach-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px; }
.reach-n { font-family: var(--disp, var(--mono)); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
  color: var(--accent); text-shadow: 0 0 18px rgba(94,240,168,.25); font-variant-numeric: tabular-nums; }
.reach-what { font-size: 13px; line-height: 1.4; color: var(--ink-hi); }
.reach-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid; border-radius: 20px; padding: 1px 8px; cursor: help; }
.reach-annual { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-dim); cursor: help; }
.reach-src { font-family: var(--mono); font-size: 10px; line-height: 1.5; color: var(--ink-faint); cursor: help; }
/* the realization axis — only `installed` is realized value, and only it gets the full mint */
.rs-installed .reach-state { color: var(--accent); border-color: rgba(94,240,168,.5); background: rgba(94,240,168,.1); }
.rs-approved { border-color: rgba(79,216,232,.28); border-left-color: #4fd8e8; background: rgba(79,216,232,.05); }
.rs-approved .reach-n { color: #4fd8e8; text-shadow: none; }
.rs-approved .reach-state { color: #4fd8e8; border-color: rgba(79,216,232,.45); background: rgba(79,216,232,.08); }
.rs-proposed { border-color: rgba(124,136,127,.35); border-left-color: var(--ink-faint); background: rgba(124,136,127,.05); }
.rs-proposed .reach-n { color: var(--ink); text-shadow: none; }
.rs-proposed .reach-state { color: var(--ink-faint); border-color: rgba(124,136,127,.45); background: rgba(124,136,127,.08); }
.reach-band.rb-compact { padding: 7px 10px; gap: 3px; border-radius: 10px; }
.rb-compact .reach-n { font-size: 15px; }
.rb-compact .reach-what { font-size: 11.5px; }
.rb-compact .reach-src { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the demotion: where a measured figure exists, the salience score is a footnote, not the headline */
.fcard-stats.demoted b { font-size: 10.5px; font-weight: 400; opacity: .72; letter-spacing: .04em; }
.pcard-impact.demoted { font-size: 8.5px; opacity: .68; font-weight: 400; }
@media (max-width:640px){ .reach-n { font-size: 17px; } }

/* ░░░ two forces — forward and friction, compounded apart ░░░ */
.mkt-forces { margin-top: var(--s4, 14px); padding: 12px 14px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface-1); }
.mf-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.mf-title { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--accent-dim); }
.mf-sub { font-family: var(--mono); font-size: 10.5px; line-height: 1.5; color: var(--ink-faint); }
.mf-reads { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 2px; }
.mf-read { display: inline-flex; flex-direction: column; gap: 1px; font-family: var(--mono); }
.mf-read b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.mf-read small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.mf-read.up b { color: var(--mkt-up); } .mf-read.dn b { color: var(--mkt-dn); }
.mf-chart { display: block; width: 100%; height: 74px; }
.mf-note { margin: 4px 0 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--ink-faint); }

/* ░░░ the value ledger — measured human reach, cumulative ░░░ */
.vled { margin: 0 0 var(--s8, 40px); }
.vled-range { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-faint); margin-top: 6px; }
.vled-body { margin-top: 12px; }
.vled-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 14px 16px; border: 1px solid rgba(94,240,168,.3);
  border-left: 3px solid var(--accent); border-radius: 14px; background: rgba(94,240,168,.06); }
.vled-big { font-family: var(--disp, var(--mono)); font-size: clamp(24px, 4vw, 38px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05;
  color: var(--accent); text-shadow: 0 0 26px rgba(94,240,168,.28); font-variant-numeric: tabular-nums; }
.vled-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); }
.vled-annual { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-hi); border: 1px solid var(--hair); border-radius: 20px; padding: 3px 10px; cursor: help; }
.vled-empty { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink-faint); border-left: 2px solid var(--hair); padding-left: 12px; }
.vled-rows { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.vled-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--bg); }
.vled-unit { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.vled-cells { display: flex; gap: 18px; }
.vled-cell { display: inline-flex; flex-direction: column; gap: 1px; font-family: var(--mono); cursor: help; }
.vled-cell b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-hi); }
.vled-cell small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.vled-cell.vc-installed b { color: var(--accent); }
.vled-cell.vc-approved b { color: #4fd8e8; }
.vled-cell.zero b { color: var(--ink-faint); opacity: .6; }
@media (max-width:640px){ .vled-cells { gap: 14px; } .vled-cell b { font-size: 13px; } }
/* measured friction reads in the friction colour — it is counted, never celebrated, and never netted */
.vled-fric-h { margin: 22px 0 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mkt-dn); cursor: help; }
.vled-rows.vled-fric .vled-cell.vc-installed b, .vled-rows.vled-fric .vled-cell.vc-approved b { color: var(--mkt-dn); }
.vled-note { margin: 10px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-faint); }
/* a friction story's reach is measured HARM — recorded identically, never in the forward colour */
.reach-band.rb-fric { border-color: rgba(232,103,78,.32); border-left-color: var(--mkt-dn); background: rgba(232,103,78,.05); }
.reach-band.rb-fric .reach-n { color: var(--mkt-dn); text-shadow: none; }
.reach-band.rb-fric .reach-state { color: var(--mkt-dn); border-color: rgba(232,103,78,.45); background: rgba(232,103,78,.08); }
/* the receipt is always present and always readable, but must not out-shout the figure */
.reach-src { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   THE SIGNAL GLOBE + VIVID PASS (2026-08-13)
   the hero is a particle Earth with the week's biggest signals pinned to it;
   chips are glass, colored by their need, and track the rotation.
   ════════════════════════════════════════════════════════════════ */
.glb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.glb-canvas:active { cursor: grabbing; }
.glb-chips { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }   /* parked chips (no legal spot) sit below the stage — clipped, never flashing over the type */
.glb-chip {
  position: absolute; left: 0; top: 0; width: max-content; max-width: min(250px, 44vw);
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 8px 11px 7px; border-radius: 10px;
  font-family: var(--mono); color: var(--ink); cursor: pointer;
  background: rgba(6, 10, 24, .72);
  border: 1px solid color-mix(in srgb, var(--c, #5ef0a8) 55%, transparent);
  border-left: 3px solid var(--c, #5ef0a8);
  box-shadow: 0 10px 30px -12px rgba(1, 3, 12, .9), 0 0 22px -6px color-mix(in srgb, var(--c, #5ef0a8) 55%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity .25s ease, box-shadow .2s ease; will-change: transform, opacity;
  appearance: none; -webkit-appearance: none;
}
.glb-chip::after { content: ''; position: absolute; left: 50%; bottom: -13px; width: 1px; height: 13px; background: linear-gradient(180deg, var(--c, #5ef0a8), transparent); opacity: .8; }
.glb-chip:hover { box-shadow: 0 10px 30px -10px rgba(1, 3, 12, .9), 0 0 30px -4px var(--c, #5ef0a8); }
.glb-chip .gc-eyebrow { display: flex; align-items: baseline; gap: 8px; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c, #5ef0a8); }
.glb-chip .gc-eyebrow i { font-style: normal; color: var(--ink-faint); letter-spacing: .08em; }
.glb-chip .gc-h { font-size: 11px; line-height: 1.4; color: var(--ink-hi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glb-chip .gc-foot { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.glb-chip.fric { border-left-color: var(--strike); }
.glb-chip.fric .gc-eyebrow { color: var(--strike); }
.hero-board .glb-canvas, .hero-board .glb-chips { border-radius: inherit; }
@media (max-width: 700px) { .glb-chip { max-width: 58vw; padding: 6px 9px 6px; } .glb-chip .gc-h { font-size: 10px; } }   /* 700 = the phone layout AND the globe's own mobile flag */

/* ── the live signal ticker — the reference's bottom feed strip, under the hero ── */
.home-ticker { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 8px 14px; border: 1px solid rgba(199,214,240,.12); border-radius: 999px; background: rgba(6,10,24,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.home-ticker .ht-lab { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.home-ticker .ht-lab::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: secPulse 2.2s ease-in-out infinite; }
.home-ticker .ht-win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.home-ticker .ht-track { display: inline-flex; gap: 34px; white-space: nowrap; padding-left: 8px; animation: htScroll 46s linear infinite; }
.home-ticker .ht-track:hover { animation-play-state: paused; }
.home-ticker .ht-item { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink); text-decoration: none; }
.home-ticker .ht-item .ht-day { font-size: 9px; letter-spacing: .1em; color: var(--ink-faint); }
.home-ticker .ht-item .ht-sec { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--hc, var(--accent)); }
.home-ticker .ht-item:hover { color: var(--ink-hi); }
.home-ticker .ht-item.fric .ht-sec { color: var(--strike); }
@keyframes htScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .home-ticker .ht-track { animation: none; } }

/* ════════════════════════════════════════════════════════════════
   THE COMMAND DECK — the reference layout, verbatim: top bar, icon rail,
   headline over the globe, calibration panel, next-to-free countdown,
   growth curves, milestone gauges, live ticker. One viewport.
   ════════════════════════════════════════════════════════════════ */
.dash.deck-mode .pull-top, .dash.deck-mode .thesis-rail, .dash.deck-mode .pull-nav { display: none; }
.dash.deck-mode .pull-hud { padding: 0; }
.dash.deck-mode #home-view > :not(#deck) { display: none; }   /* home IS the deck — the old sections live on in the other views */
.dash.deck-mode .home-view { margin-top: 0; padding: 0; overflow: hidden; }
.dash.deck-mode #home-view::before { display: none; }   /* the deck brings its own sky */
.dash.deck-mode #deck { margin-bottom: 0; }
.deck { position: relative; display: flex; flex-direction: column; height: 100vh; min-height: 720px; overflow: hidden; margin: 0 0 30px;
  background: radial-gradient(85% 65% at 62% 30%, rgba(34,54,120,.22) 0%, transparent 60%), radial-gradient(70% 60% at 10% 0%, rgba(124,92,255,.14) 0%, transparent 55%), radial-gradient(70% 55% at 95% 85%, rgba(255,122,60,.08) 0%, transparent 55%), linear-gradient(180deg, #05071a 0%, #030512 68%, #02030c 100%); }
.dk-panel { position: relative; border: 1px solid rgba(199,214,240,.13); border-radius: 14px; background: linear-gradient(180deg, rgba(199,214,240,.03), rgba(199,214,240,0) 40%), rgba(5,8,22,.66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(214,228,255,.06), 0 18px 44px -18px rgba(0,2,10,.8); }
.dk-p-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: #93a3c4; }
.dk-p-h.dk-gap, .dk-p-sub.dk-gap { margin-top: 13px; }
.dk-p-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #5e6c8c; }
.dk-up { color: var(--accent); }

/* ── top bar ── */
/* position+z-index are load-bearing: backdrop-filter makes this a stacking context, so
   the gear menu's own z-index is trapped inside it and .deck-body (the globe stage,
   painted later) covered the menu entirely. Lifting the bar lifts everything in it. */
.deck-top { position: relative; z-index: 50; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; padding: 0 18px 0 14px; border-bottom: 1px solid rgba(199,214,240,.09); background: rgba(3,5,16,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.deck-brand { display: flex; align-items: center; gap: 11px; }
.db-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 17px; color: #eaf2ff;
  background: linear-gradient(135deg, #7c5cff 0%, #3fd9ff 100%); box-shadow: 0 0 24px -4px rgba(124,92,255,.8); }
.db-name { display: flex; flex-direction: column; line-height: 1.15; }
.db-name b { font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: .14em; color: #f2f6ff; }
.db-name small { font-family: var(--mono); font-size: 8px; letter-spacing: .34em; text-transform: uppercase; color: #7787a3; }
.deck-clock { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 22px; border: 1px solid rgba(199,214,240,.14); border-radius: 999px; background: rgba(6,10,26,.7); box-shadow: 0 0 30px -12px rgba(63,217,255,.5); }
.deck-clock b { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: .12em; color: #f2f6ff; font-variant-numeric: tabular-nums; }
.deck-clock small { font-family: var(--mono); font-size: 7.5px; letter-spacing: .3em; text-transform: uppercase; color: #3fd9ff; }
.deck-filters { display: flex; align-items: center; gap: 8px; }
.dk-sel { appearance: none; -webkit-appearance: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: #c6d1e6; background: rgba(10,14,32,.85); border: 1px solid rgba(199,214,240,.16); border-radius: 999px; padding: 7px 26px 7px 13px; cursor: pointer; outline: none;
  background-image: linear-gradient(45deg, transparent 50%, #93a3c4 50%), linear-gradient(135deg, #93a3c4 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 11px) 55%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.dk-sel:hover, .dk-sel:focus { border-color: rgba(63,217,255,.5); }
.dk-gear { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(199,214,240,.16); border-radius: 999px; color: #93a3c4; font-size: 15px; text-decoration: none; background: rgba(10,14,32,.85); cursor: pointer; font-family: inherit; padding: 0; }
.dk-gear:hover, .dk-gear[aria-expanded="true"] { color: #3fd9ff; border-color: rgba(63,217,255,.5); }

/* ── the account menu behind the gear ── */
.dk-gear-wrap { position: relative; }
.dk-menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 60;
  min-width: 258px; max-width: calc(100vw - 24px);   /* 236 wrapped "How the numbers are made" */
  display: flex; flex-direction: column; padding: 6px; border-radius: 12px;
  border: 1px solid rgba(199,214,240,.16);
  background: linear-gradient(180deg, rgba(199,214,240,.04), rgba(199,214,240,0) 44%), rgba(6,10,24,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 54px -22px rgba(0,2,10,.95), inset 0 1px 0 rgba(214,228,255,.07);
}
.dk-menu[hidden] { display: none; }   /* display:flex outranks the UA [hidden] rule */
.dk-menu > * {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: #c6d1e6;
  text-align: left; text-decoration: none;
}
.dk-menu > *:hover { background: rgba(199,214,240,.07); color: #eef3ff; }
.dk-menu i { font-style: normal; width: 16px; flex: none; font-size: 13px; color: #7787a3; text-align: center; }
.dk-menu > *:hover i { color: #3fd9ff; }
.dk-menu span { flex: 1; min-width: 0; }
.dk-menu b { flex: none; font-size: 11px; font-weight: 600; color: var(--accent); }
.dk-menu hr { width: 100%; height: 1px; margin: 5px 0; padding: 0; border: 0; background: rgba(199,214,240,.12); }
.dk-menu .dk-m-out { color: #93a3c4; }
.dk-menu .dk-m-out:hover { color: var(--strike); background: rgba(255,122,99,.09); }
.dk-menu .dk-m-out:hover i { color: var(--strike); }

/* ── body: rail | globe stage | side panels ── */
.deck-body { flex: 1; display: grid; grid-template-columns: 62px minmax(0,1fr) clamp(300px, 26vw, 372px); min-height: 0; }
.deck-rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 10px; border-right: 1px solid rgba(199,214,240,.08); background: rgba(3,5,16,.4); }
.dr-orb { position: relative; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 50%; border: 1px solid rgba(124,92,255,.55); background: radial-gradient(circle at 50% 42%, rgba(124,92,255,.65), rgba(10,10,30,.9) 68%); cursor: pointer; box-shadow: 0 0 22px -4px rgba(124,92,255,.9); }
.dr-orb i { position: absolute; inset: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #dfe9ff, #7c5cff 70%); box-shadow: 0 0 12px rgba(124,92,255,.9); }
.dr-nav { display: flex; flex-direction: column; gap: 4px; }
.dr-nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; padding: 7px 0 6px; border: 1px solid transparent; border-radius: 11px; background: none; color: #6d7b99; cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.dr-nav button i { font-style: normal; font-size: 15px; line-height: 1; }
.dr-nav button em { font-style: normal; font-family: var(--mono); font-size: 6.8px; letter-spacing: .16em; text-transform: uppercase; }
.dr-nav button:hover { color: #dfe9ff; background: rgba(199,214,240,.06); }
.dr-nav button.on { color: #3fd9ff; border-color: rgba(63,217,255,.35); background: rgba(63,217,255,.08); box-shadow: 0 0 18px -6px rgba(63,217,255,.6); }
.dr-sys { margin-top: auto; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 46px; cursor: help; }
.dr-sys svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.dr-sys circle { fill: none; stroke-width: 3; }
.dr-sys circle.bg { stroke: rgba(199,214,240,.12); }
.dr-sys circle.fg { stroke: url(#dkSysGrad); stroke: #a4f04e; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 119.4; filter: drop-shadow(0 0 5px rgba(164,240,78,.7)); transition: stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1); }
.dr-sys b { position: absolute; top: 13px; font-family: var(--mono); font-size: 10px; color: #eef3ff; }
.dr-sys small { font-family: var(--mono); font-size: 6.5px; letter-spacing: .2em; text-transform: uppercase; color: #5ef0a8; display: inline-flex; align-items: center; gap: 3px; }
.dr-sys .dr-dot { width: 5px; height: 5px; border-radius: 50%; background: #5ef0a8; box-shadow: 0 0 8px #5ef0a8; animation: secPulse 2.2s infinite; }

/* ── center stage ── */
.deck-main { position: relative; min-width: 0; min-height: 0; }
.deck-globe { position: absolute; inset: 0; }
.deck-lede { position: absolute; left: clamp(16px, 3vw, 42px); top: clamp(10px, 3vh, 34px); z-index: 4; pointer-events: none; max-width: 46%; }
.dk-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: #b8c6e4; }
.dk-live i { width: 7px; height: 7px; border-radius: 50%; background: #5ef0a8; box-shadow: 0 0 10px #5ef0a8; animation: secPulse 2.2s infinite; }
.dk-h1 { margin: 10px 0 10px; font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 4.6vw, 66px); line-height: .98; letter-spacing: .01em; color: #f4f8ff; text-shadow: 0 0 60px rgba(101,178,255,.35); }
.dk-sub { margin: 0; font-family: var(--mono); font-size: clamp(10px, .9vw, 12.5px); line-height: 1.75; letter-spacing: .04em; color: #93a3c4; }
.dk-acc { position: absolute; left: clamp(16px, 3vw, 42px); bottom: clamp(56px, 9vh, 86px); z-index: 4; width: clamp(215px, 18vw, 260px); padding: 13px 15px 14px; }
.dk-acc-val { display: flex; align-items: baseline; gap: 9px; margin: 3px 0 2px; }
.dk-acc-val b { font-family: var(--disp); font-size: 34px; font-weight: 700; color: #eef3ff; letter-spacing: -.01em; }
.dk-acc-val span { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.dk-spark { display: block; width: 100%; height: 44px; }
.dk-conf { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.dk-conf b { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: #5ef0a8; }
.dk-meter { display: inline-flex; gap: 2.5px; }
.dk-meter i { width: 5px; height: 9px; border-radius: 1px; background: rgba(94,240,168,.14); }
.dk-meter i.on { background: #5ef0a8; box-shadow: 0 0 6px rgba(94,240,168,.8); }
.dk-streams { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.dk-streams b { font-family: var(--disp); font-size: 21px; font-weight: 700; color: #eef3ff; }
.dk-streams small { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #5e6c8c; }

/* ── timeline scrubber ── */
.deck-timeline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 10px clamp(14px, 2.5vw, 34px) 12px; font-family: var(--mono); border-top: 1px solid rgba(199,214,240,.07); background: linear-gradient(180deg, transparent, rgba(3,5,16,.72) 55%); }
.deck-timeline .tl-cap { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: #7787a3; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.deck-timeline .tl-cap.future { color: #ffb45c; }
.deck-timeline .tl-yr { font-size: 10.5px; letter-spacing: .08em; color: #67759a; }
.deck-timeline .tl-yr.past { color: #4d5a78; }
.deck-timeline .tl-now { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .18em; color: #04130f; padding: 5px 15px; border-radius: 999px; background: linear-gradient(90deg, #5ef0a8, #3fd9ff); box-shadow: 0 0 24px -2px rgba(63,217,255,.8); }

/* ── right column ── */
.deck-side { display: flex; flex-direction: column; gap: 11px; min-height: 0; padding: 12px 14px 10px 2px; }
.dk-next { flex: none; padding: 13px 15px 12px; border-color: rgba(124,92,255,.3); box-shadow: inset 0 1px 0 rgba(214,228,255,.06), 0 18px 44px -18px rgba(0,2,10,.8), 0 0 46px -18px rgba(124,92,255,.55); }
.dk-next-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px 14px; margin-top: 8px; }
.dk-nx-name { font-family: var(--disp); font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; line-height: 1.05; color: #f2f6ff; display: block; margin-bottom: 8px; }
.dk-nx-prob b, .dk-nx-prob { font-family: var(--disp); font-size: 24px; font-weight: 700; color: #eef3ff; }
.dk-nx-bar { display: block; height: 5px; margin: 6px 0 2px; border-radius: 4px; background: rgba(199,214,240,.1); overflow: hidden; }
.dk-nx-bar em { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #7c5cff, #c98bff); box-shadow: 0 0 12px rgba(167,139,250,.8); transition: width 1s cubic-bezier(.2,.7,.2,1); }
.dk-nx-drv { display: flex; gap: 6px; margin-top: 4px; }
.dk-nx-drv i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); font-style: normal; font-size: 11px; box-shadow: 0 0 12px -4px var(--c); }
.dk-count { display: flex; gap: 5px; margin: 4px 0 6px; }
.dk-cbox { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px; border: 1px solid rgba(199,214,240,.14); border-radius: 8px; background: rgba(8,12,30,.7); }
.dk-cbox b { font-family: var(--disp); font-size: 19px; font-weight: 700; color: #f2f6ff; font-variant-numeric: tabular-nums; }
.dk-cbox small { font-family: var(--mono); font-size: 6.3px; letter-spacing: .14em; text-transform: uppercase; color: #67759a; }
.dk-cbox b.hot { color: #3fd9ff; text-shadow: 0 0 14px rgba(63,217,255,.6); }
.dk-nx-wave { display: block; width: 100%; height: 40px; }
.dk-curves { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 13px 15px 11px; }
.dk-scale { display: inline-flex; gap: 2px; margin: 8px 0 6px; padding: 2px; border: 1px solid rgba(199,214,240,.13); border-radius: 999px; background: rgba(8,12,30,.7); align-self: flex-start; }
.dk-scale button { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #7787a3; background: none; border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.dk-scale button.on { color: #05071a; background: linear-gradient(90deg, #3fd9ff, #5ef0a8); font-weight: 600; }
.dk-curve-wrap { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
#dk-curve-cv { flex: 1; min-height: 0; width: 100%; display: block; }
.dk-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; padding-top: 7px; }
.dk-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #93a3c4; }
.dk-legend span::before { content: ''; width: 12px; height: 2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* ── bottom: milestone gauge cards ── */
.deck-cards { flex: none; display: grid; grid-template-columns: clamp(150px, 13vw, 195px) minmax(0,1fr) clamp(118px, 10vw, 150px); gap: 10px; padding: 10px 14px 10px 76px; border-top: 1px solid rgba(199,214,240,.08); background: rgba(3,5,16,.5); }
.dk-card { position: relative; border: 1px solid rgba(199,214,240,.12); border-radius: 13px; background: linear-gradient(180deg, rgba(199,214,240,.03), rgba(199,214,240,0) 40%), rgba(5,8,22,.66); padding: 10px 13px; }
.dk-card-sum b { display: block; font-family: var(--disp); font-size: 27px; font-weight: 700; color: #eef3ff; line-height: 1.05; margin-top: 2px; }
.dk-card-sum span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }
.dk-total-spark { position: absolute; right: 10px; bottom: 8px; width: 44%; height: 30px; }
.dk-mcards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 10px; min-width: 0; }
.dk-mcard { --c: #a78bfa; display: grid; grid-template-columns: 30px minmax(0,1fr) 46px; gap: 4px 9px; align-items: center; text-align: left; border: 1px solid rgba(199,214,240,.12); border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 7%, transparent), transparent 55%), rgba(5,8,22,.66); padding: 9px 11px; cursor: pointer; transition: transform .2s var(--b-ease), border-color .2s, box-shadow .2s; }
.dk-mcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 12px 30px -14px rgba(0,2,10,.9), 0 0 26px -8px var(--c); }
.dk-mcard .mi { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 14px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: 0 0 16px -5px var(--c); }
.dk-mcard .mn { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: #eef3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-mcard .mt { font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: #67759a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-mcard .mw { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: #93a3c4; }
.dk-mcard .mw b { display: block; font-size: 10.5px; color: var(--c); }
.dk-mcard .mg { grid-row: span 2; position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(199,214,240,.1) 0); box-shadow: 0 0 18px -6px var(--c); }
.dk-mcard .mg::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #070b1e; }
.dk-mcard .mg b { position: relative; font-family: var(--mono); font-size: 10px; font-weight: 600; color: #eef3ff; }
.dk-card-all { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: pointer; color: #b8c6e4; background: radial-gradient(120% 120% at 80% 20%, rgba(63,217,255,.1), transparent 55%), rgba(5,8,22,.66); transition: border-color .2s, color .2s; }
.dk-card-all span { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-align: left; line-height: 1.5; }
.dk-card-all i { font-style: normal; font-size: 16px; color: #3fd9ff; }
.dk-card-all:hover { border-color: rgba(63,217,255,.5); color: #eef3ff; }

/* ── deck ticker (bottom strip) ── */
.deck-ticker { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 1px solid rgba(199,214,240,.08); background: rgba(2,4,12,.8); }
.dk-tick-lab { flex: none; font-family: var(--mono); font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: #5ef0a8; display: inline-flex; align-items: center; gap: 7px; }
.dk-tick-lab::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #5ef0a8; box-shadow: 0 0 9px #5ef0a8; animation: secPulse 2.2s infinite; }
.deck-ticker .ht-win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.deck-ticker .ht-track { display: inline-flex; gap: 38px; white-space: nowrap; animation: htScroll 52s linear infinite; }
.deck-ticker .ht-track:hover { animation-play-state: paused; }
.deck-ticker .ht-item { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: #c6d1e6; text-decoration: none; }
.deck-ticker .ht-item .ht-day { font-size: 8.5px; letter-spacing: .08em; color: #5e6c8c; }
.deck-ticker .ht-item .ht-sec { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--hc, #5ef0a8); }
.deck-ticker .ht-item:hover { color: #eef3ff; }
.deck-ticker .ht-item.fric .ht-sec { color: var(--strike); }

/* ── milestone chips on the globe (projection pins) ── */
.glb-chip.ms .gc-big { font-family: var(--disp); font-size: 21px; font-weight: 700; line-height: 1; color: var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
.glb-chip.ms { border-left-width: 3px; }

/* ── small screens: the deck stacks ── */
@media (max-width: 980px) {
  .deck { height: auto; min-height: 0; overflow: visible; }
  .deck-body { grid-template-columns: 54px minmax(0,1fr); }
  .deck-side { grid-column: 1 / -1; padding: 0 12px 4px; }
  .deck-main { height: 66vh; min-height: 430px; }
  .deck-lede { max-width: 72%; }
  .dk-acc { display: none; }
  .deck-cards { grid-template-columns: 1fr; padding-left: 12px; }
  .dk-mcards { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .dk-card-all { flex-direction: row; align-items: center; }
  .deck-clock { display: none; }
}

/* ── deck-mode: floating pills clear the deck chrome; the globe readout retires ── */
body:has(#s-dash.deck-mode.active) .auth-pill { display: none; }   /* sign-in returns on every other view */
body:has(#s-dash.deck-mode.active) .eng-strip.eng-pill { bottom: 4px; right: 8px; }
.deck-globe .sky-readout { display: none; }

/* ── vividness pass 2 — pulled brighter to sit next to the reference frame ── */
.dk-panel { border-color: rgba(206,222,248,.17); }
.dk-p-h { color: #b0bfe0; }
.dk-p-sub { color: #7484a6; }
.dk-live { color: #a9f0cf; }
.dk-sub { color: #a3b2d4; }
.dk-acc-val b { font-size: 38px; }
.dk-nx-prob, .dk-nx-prob b { font-size: 30px; }
.dk-cbox { border-color: rgba(206,222,248,.2); }
.dk-cbox b { font-size: 22px; }
.deck-timeline .tl-yr { color: #8a99bd; }
.deck-timeline .tl-yr.past { color: #5d6b8c; }
.deck-timeline .tl-cap { color: #93a3c4; }
.dk-legend span { color: #b0bfe0; }
.dk-mcard .mg::before { inset: 3px; }
.dk-mcard .mn { font-size: 10px; }
.glb-chip { box-shadow: 0 10px 30px -12px rgba(1,3,12,.9), 0 0 30px -6px color-mix(in srgb, var(--c, #5ef0a8) 70%, transparent); border-color: color-mix(in srgb, var(--c, #5ef0a8) 65%, transparent); }
.deck { background:
  radial-gradient(85% 65% at 62% 30%, rgba(40,62,140,.28) 0%, transparent 60%),
  radial-gradient(70% 60% at 8% 0%, rgba(124,92,255,.2) 0%, transparent 55%),
  radial-gradient(60% 50% at 96% 80%, rgba(255,122,60,.12) 0%, transparent 55%),
  linear-gradient(180deg, #060924 0%, #030516 68%, #02030e 100%); }
.deck-ticker .ht-item { color: #d3dcef; }

/* ── vividness pass 3 — reference parity details ── */
.dk-h1 { font-size: clamp(36px, 5vw, 74px); }
.dk-curve-wrap { flex-direction: row; gap: 10px; }
#dk-curve-cv { flex: 1; min-width: 0; }
.dk-curve-wrap .dk-legend { flex: none; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 7px; padding: 0 2px 14px 0; }
.dk-mcard { grid-template-columns: 30px minmax(0,1fr) 48px; }
.dk-mcard .mn { white-space: normal; font-size: 9.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-mcard .mg { width: 48px; height: 48px; }
.dk-mcard .mg::before { inset: 4px; }
.dk-mcard .mg b { font-size: 11px; }
.deck-ticker .ht-item .ht-day { color: #43d69a; }

/* ── photographic finish: vignette + light shaft over the stage ── */
.deck-main::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(120% 105% at 52% 42%, transparent 52%, rgba(1, 2, 10, .5) 100%),
    linear-gradient(200deg, rgba(124, 92, 255, .05) 0%, transparent 30%);
}

/* ── charts pop: hotter gauges + legend dashes ── */
.dk-mcard .mg { box-shadow: 0 0 24px -4px var(--c); }
.dk-legend span::before { height: 3px; }
.dk-spark { height: 48px; }
.dk-nx-wave { height: 44px; }

/* ── rendered milestone icon tiles (Higgsfield set) ── */
.dk-mcard .mi { position: relative; overflow: hidden; }
.dk-mcard .mi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════
   PAINTERLY PASS — the reference is a baked render: every surface has
   layered light. Gradient borders (border-box layer under a transparent
   border), ambient color washes per panel, gradient numerals, glass shine
   on the icon tiles. This is where "flat CSS" stops looking flat.
   ════════════════════════════════════════════════════════════════ */
/* bigger rendered icon tiles with a glass shine */
.dk-mcard { grid-template-columns: 46px minmax(0,1fr) 48px; }
.dk-mcard .mi { width: 46px; height: 46px; border-radius: 11px; font-size: 20px; }
.dk-mcard .mi img { border-radius: 10px; }
.dk-mcard .mi::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.04) 34%, transparent 55%); pointer-events: none; }

/* panels: gradient border + inner light-to-shade wash + violet under-glow */
.dk-panel { border: 1px solid transparent; background:
  linear-gradient(180deg, rgba(214,228,255,.05), rgba(214,228,255,0) 30%) padding-box,
  linear-gradient(180deg, rgba(11,16,36,.88), rgba(5,8,22,.72)) padding-box,
  linear-gradient(155deg, rgba(214,228,255,.34), rgba(124,92,255,.22) 38%, rgba(63,217,255,.16) 70%, rgba(199,214,240,.08)) border-box;
  box-shadow: inset 0 1px 0 rgba(214,228,255,.09), inset 0 -22px 34px -26px rgba(124,92,255,.28), 0 18px 44px -18px rgba(0,2,10,.8); }
.dk-next { border-color: transparent; background:
  linear-gradient(180deg, rgba(214,228,255,.05), rgba(214,228,255,0) 30%) padding-box,
  radial-gradient(120% 100% at 100% 0%, rgba(124,92,255,.16), transparent 55%) padding-box,
  linear-gradient(180deg, rgba(11,16,36,.88), rgba(5,8,22,.72)) padding-box,
  linear-gradient(155deg, rgba(167,139,250,.55), rgba(124,92,255,.24) 45%, rgba(63,217,255,.18)) border-box; }
.dk-card, .dk-card-all { border: 1px solid transparent; background:
  linear-gradient(180deg, rgba(214,228,255,.045), rgba(214,228,255,0) 32%) padding-box,
  linear-gradient(180deg, rgba(9,13,30,.85), rgba(5,8,22,.7)) padding-box,
  linear-gradient(155deg, rgba(214,228,255,.26), rgba(124,92,255,.16) 45%, rgba(63,217,255,.12) 75%, rgba(199,214,240,.06)) border-box; }
.dk-mcard { border: 1px solid transparent; background:
  linear-gradient(150deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 55%) padding-box,
  linear-gradient(180deg, rgba(9,13,30,.86), rgba(5,8,22,.72)) padding-box,
  linear-gradient(150deg, color-mix(in srgb, var(--c) 60%, transparent), color-mix(in srgb, var(--c) 12%, transparent) 48%, rgba(199,214,240,.1)) border-box;
  box-shadow: inset 0 1px 0 rgba(214,228,255,.08), 0 10px 26px -14px rgba(0,2,10,.85), 0 0 30px -14px color-mix(in srgb, var(--c) 45%, transparent); }
.dk-cbox { border: 1px solid transparent; background:
  linear-gradient(180deg, rgba(214,228,255,.08), transparent 45%) padding-box,
  linear-gradient(180deg, rgba(9,13,32,.85), rgba(7,10,26,.8)) padding-box,
  linear-gradient(170deg, rgba(199,214,240,.32), rgba(63,217,255,.14) 58%, rgba(199,214,240,.08)) border-box; }
.deck-clock { border: 1px solid transparent; background:
  linear-gradient(180deg, rgba(214,228,255,.06), transparent 50%) padding-box,
  linear-gradient(rgba(6,10,26,.8), rgba(6,10,26,.8)) padding-box,
  linear-gradient(160deg, rgba(63,217,255,.4), rgba(124,92,255,.24) 55%, rgba(199,214,240,.1)) border-box; }
.glb-chip { border: 1px solid transparent; border-left: 3px solid var(--c, #5ef0a8); background:
  linear-gradient(160deg, color-mix(in srgb, var(--c, #5ef0a8) 12%, transparent), transparent 52%) padding-box,
  linear-gradient(rgba(6,10,24,.78), rgba(6,10,24,.78)) padding-box,
  linear-gradient(150deg, color-mix(in srgb, var(--c, #5ef0a8) 62%, transparent), rgba(199,214,240,.12) 62%) border-box; }
.glb-chip.fric { border-left-color: var(--strike); }

/* numerals carry vertical shading, like the render */
.dk-acc-val b, .dk-nx-prob, .dk-card-sum b, .dk-streams b {
  background: linear-gradient(180deg, #ffffff 0%, #dfeaff 42%, #93b8f2 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dk-cbox b { background: linear-gradient(180deg, #ffffff, #cfe0fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dk-cbox b.hot { background: linear-gradient(180deg, #d9f8ff, #3fd9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 10px rgba(63,217,255,.55)); }
.dk-nx-name { background: linear-gradient(180deg, #ffffff, #dbe7ff 70%, #b9cdf2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.deck-ticker { background: linear-gradient(180deg, rgba(5,8,20,.92), rgba(2,4,12,.86)); }
/* ── the horizon as the entrance visual ───────────────────────────────────────────
   The years lead; the timeline tells the truth (the now-tick and its label sit at
   now's real position, not centered — centered read as "halfway there"); everything
   textual waits behind a tap. Motion is restrained: a breathing now-tick, a sweep
   on hover, a smooth expand. */
.hz-card{ cursor:pointer; user-select:none; }
.hz-card:focus-visible{ outline:2px solid var(--accent-dim); outline-offset:2px; }
.hz-hero{ align-items:flex-start; }
.hz-window{ font-size:27px; line-height:1.1; }
.hz-ringwrap{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; }
.hz-ring-lab{ font-family:var(--mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); text-align:center; max-width:74px; line-height:1.5; }
.hz-track{ height:10px; }
.hz-track-lab{ position:relative; height:14px; }
.hz-track-lab span{ position:absolute; top:2px; }
.hz-track-lab .now{ left:0; color:#eafff3; text-shadow:0 0 8px rgba(234,255,243,.5); }
.hz-track-lab span:last-child{ right:0; }
@keyframes hzNowPulse{
  0%,100%{ opacity:.72; box-shadow:0 0 6px #eafff3; }
  50%{ opacity:1; box-shadow:0 0 13px #eafff3, 0 0 28px rgba(234,255,243,.4); }
}
.hz-track-now{ animation:hzNowPulse 2.8s ease-in-out infinite; }
.hz-card:hover .hz-track-span{
  background:linear-gradient(90deg, color-mix(in srgb, var(--mc) 45%, transparent), var(--mc), color-mix(in srgb, var(--mc) 45%, transparent), var(--mc));
  background-size:220% 100%;
  animation:hzSweep 2.2s linear infinite;
}
@keyframes hzSweep{ from{ background-position:200% 0; } to{ background-position:0% 0; } }
.hz-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--b-ease); }
.hz-more-in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:var(--s3); }
.hz-card.hz-open .hz-more{ grid-template-rows:1fr; }
.hz-card.hz-open .hz-more-in{ padding-top:var(--s2); }
.hz-cue{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:2px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.hz-cue i{ font-style:normal; transition:transform .3s var(--b-ease); color:var(--mc, var(--accent)); }
.hz-card.hz-open .hz-cue i{ transform:rotate(180deg); }
.hz-card:hover .hz-cue{ color:var(--ink); }
.hz-note-acc{ margin-top:var(--s3); }
.hz-note-acc summary{ cursor:pointer; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-dim); }
.hz-note-acc summary:hover{ color:var(--ink); }
.hz-note-acc .hz-note{ margin-top:var(--s2); }
@media (prefers-reduced-motion: reduce){
  .hz-track-now, .hz-card:hover .hz-track-span{ animation:none; }
  .hz-more, .hz-cue i{ transition:none; }
}
/* an open card must not stretch its collapsed neighbors to its height */
.hz-cards{ align-items:flex-start; }
.hz-cards .hz-card{ align-self:flex-start; }

/* ════════════════════════════════════════════════════════════════
   LIVE EVENTS FEED (2026-08-14) — the feed as wide event rows:
   when · thumb · story · salience · needs moved · need momentum.
   Same painterly grammar as the deck: gradient borders, ambient washes.
   ════════════════════════════════════════════════════════════════ */
.feed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 22px; flex-wrap: wrap; margin: 0 0 18px; }
.feed-head-l { margin: 0; max-width: 640px; }
.feed-live { display: inline-flex; align-items: center; gap: 7px; vertical-align: 4px; margin-left: 10px; padding: 4px 12px; border: 1px solid rgba(94,240,168,.4); border-radius: 999px; font-family: var(--mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); background: rgba(94,240,168,.07); box-shadow: 0 0 22px -8px rgba(94,240,168,.8); }
.feed-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: secPulse 2.2s infinite; }
.feed-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.feed-imp { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border: 1px solid rgba(199,214,240,.16); border-radius: 999px; background: rgba(10,14,32,.85); }
.feed-imp span { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #7787a3; margin-right: 3px; }
.feed-imp button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(199,214,240,.2); background: none; color: #67759a; font-family: var(--mono); font-size: 10px; cursor: pointer; transition: all .15s; }
.feed-imp button.on { color: #04130f; background: linear-gradient(135deg, #5ef0a8, #3fd9ff); border-color: transparent; font-weight: 600; box-shadow: 0 0 12px -3px rgba(94,240,168,.8); }

/* ── the row ── */
.frow { position: relative; display: grid; grid-template-columns: 92px 250px minmax(0,1fr) 118px 168px 178px; gap: 10px 18px; align-items: center;
  margin: 0 0 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid transparent;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--fc, #5ef0a8) 6%, transparent), transparent 45%) padding-box,
    linear-gradient(180deg, rgba(10,14,32,.8), rgba(6,9,24,.68)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--fc, #5ef0a8) 36%, transparent), rgba(199,214,240,.12) 45%, rgba(199,214,240,.07)) border-box;
  box-shadow: inset 0 1px 0 rgba(214,228,255,.06), 0 14px 34px -18px rgba(0,2,10,.85);
  animation: mktReveal .45s var(--b-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .2s var(--b-ease), box-shadow .2s; }
.frow:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(214,228,255,.06), 0 18px 40px -18px rgba(0,2,10,.9), 0 0 34px -12px color-mix(in srgb, var(--fc, #5ef0a8) 55%, transparent); }
.frow.fric { --fc: #ff7a63; }
.frow.dup { opacity: .55; }

/* col 1 — when + category */
.fr-when { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.fr-ago { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: #8a99bd; white-space: nowrap; }
.fr-ago i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.frow.fric .fr-ago i { background: var(--strike); box-shadow: 0 0 8px var(--strike); }
.fr-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 19px; color: var(--fc);
  border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); background: color-mix(in srgb, var(--fc) 10%, transparent);
  box-shadow: 0 0 18px -6px var(--fc), inset 0 1px 0 rgba(255,255,255,.08); }
.fr-dom { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .18em; color: var(--fc); }

/* col 2 — media */
.fr-media { display: block; width: 250px; height: 132px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(199,214,240,.12); background: #070b1e; }
.fr-media img, .fr-media canvas, .fr-media > * { width: 100%; height: 100%; object-fit: cover; display: block; }

/* col 3 — the story */
.fr-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fr-h { font-family: var(--disp); font-size: 17.5px; font-weight: 600; line-height: 1.28; letter-spacing: .005em; color: #f0f5ff; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.fr-h::after { content: '\00a0↗'; font-size: 12px; color: color-mix(in srgb, var(--fc) 75%, transparent); }   /* nbsp: a plain space let the arrow wrap onto a line of its own */
a.fr-h:hover { color: #ffffff; }
.fr-b { margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: #93a3c4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fr-h, .frow .fcard-why { overflow-wrap: anywhere; }
.fr-src { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.fr-src a, .fr-src span { color: #7787a3; text-decoration: none; }
.fr-src a:hover { color: #c6d1e6; }
.fr-brief { color: #3fd9ff !important; }
.fr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.feed-eng { color: #5ef0a8; border-color: rgba(94,240,168,.4); }
.frow .fcard-why { margin: 0; font-family: var(--mono); font-size: 10px; line-height: 1.5; color: #67759a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.frow .fcard-actions { margin-top: 2px; }

/* col 4 — salience */
.fr-score { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.fr-score small, .fr-needs small, .fr-mom small { font-family: var(--mono); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: #67759a; white-space: nowrap; }
.fr-score b { font-family: var(--disp); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.fr-score b i { font-style: normal; font-size: 13px; font-weight: 600; opacity: .55; }
.fr-score b.up { color: var(--accent); text-shadow: 0 0 24px rgba(94,240,168,.45); }
.fr-score b.dn { color: var(--strike); text-shadow: 0 0 24px rgba(255,122,99,.45); }
.fr-score span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #8a99bd; }

/* col 5 — needs moved */
.fr-needs { display: flex; flex-direction: column; gap: 4px; }
.fn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--mono); }
.fn-row em { font-style: normal; font-size: 10.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--c, #c6d1e6) 80%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-row b { font-size: 11px; font-weight: 600; }
.fn-row b.up { color: var(--accent); }
.fn-row b.dn { color: var(--strike); }
.fn-also em, .fn-also b { color: #67759a; font-weight: 400; font-size: 9.5px; }

/* col 6 — need momentum */
.fr-mom { display: flex; flex-direction: column; gap: 3px; }
.fr-mom b { font-family: var(--disp); font-size: 20px; font-weight: 700; line-height: 1.05; }
.fr-mom b i { font-style: normal; font-size: 10px; font-weight: 600; opacity: .55; }
.fr-mom b.up { color: var(--accent); }
.fr-mom b.dn { color: var(--strike); }
.fr-spark { display: block; width: 100%; height: 40px; }
.fr-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; color: #4d5a78; }
.fr-axis i { font-style: normal; }

/* full-width tiers inside the row */
.frow .fr-extra, .frow .fc-panel { grid-column: 1 / -1; }

/* responsive: metrics drop below the story, then everything stacks */
@media (max-width: 1180px) {
  .frow { grid-template-columns: 92px 220px minmax(0,1fr); }
  .fr-score, .fr-needs, .fr-mom { grid-column: auto; }
  .fr-score { grid-column: 1; }
  .fr-needs { grid-column: 2; }
  .fr-mom { grid-column: 3; max-width: 260px; }
}
@media (max-width: 720px) {
  .frow { grid-template-columns: 1fr 1fr; padding: 13px 13px; }
  .fr-when { flex-direction: row; align-items: center; grid-column: 1 / -1; }
  .fr-media { width: 100%; height: 150px; grid-column: 1 / -1; }
  .fr-main { grid-column: 1 / -1; }
  .fr-score { grid-column: 1; }
  .fr-needs { grid-column: 2; }
  .fr-mom { grid-column: 1 / -1; max-width: none; }
}

/* the LIVE EVENTS rows are full-width, one per line — override the old 2-col card grid */
.led-feed, #led-feed { display: flex !important; flex-direction: column; gap: 0; max-width: none; margin: 0; width: 100%; }

/* feed backdrop: the legacy mint hero-art steps way back behind the navy rows */
#pull-board::before { opacity: .1 !important; }
.fr-score b { font-size: 35px; }
.fn-row b { font-size: 12px; }

/* the feed header, image-verbatim: LIVE EVENTS FEED + pill, one quiet subtitle */
.feed-title { margin: 0; font-family: var(--disp); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: .06em; color: #f2f6ff; display: flex; align-items: center; }
.feed-sub { margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: #8a99bd; }

/* ── the rail is the site menu: fixed left on every dashboard view; the old top tabs retire ── */
.pull-hud > .deck-rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 45; width: 62px; padding: 12px 0 10px; border-right: 1px solid rgba(199,214,240,.09); background: rgba(4,6,18,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pull-hud { padding-left: 86px; }
.dash.deck-mode .pull-hud { padding: 0 0 0 62px; }
.pull-nav { display: none !important; }
.deck-body { grid-template-columns: minmax(0,1fr) clamp(300px, 26vw, 372px); }
.deck-cards { padding-left: 14px; }
@media (max-width: 980px) {
  .pull-hud { padding-left: 62px; }
  .dash.deck-mode .pull-hud { padding-left: 54px; }
  .pull-hud > .deck-rail { width: 54px; }
  .deck-body { grid-template-columns: minmax(0,1fr); }
}

/* ════════════════════════════════════════════════════════════════
   THE PROGRESS LEADERS (2026-08-14) — ranked rows + analytics sidebar.
   Every figure is the record: pts are signed evidence-capped credits,
   the band is share-of-#1 (relative), trend/change are measured 30d.
   ════════════════════════════════════════════════════════════════ */
.lb-tdot { color: #cf5bff; }
.lb-layout { display: grid; grid-template-columns: minmax(0,1fr) clamp(280px, 24vw, 340px); gap: 18px; align-items: start; }
.lb-tf { margin: 0 0 12px; }
.lb-cols { display: grid; grid-template-columns: 34px 240px 130px minmax(0,1fr) 108px 150px 130px; gap: 14px; padding: 0 18px 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #5e6c8c; }
.lb-cols .lb-c-contrib { grid-column: 3 / 5; }
@media (max-width: 1240px) { .lb-cols { display: none; } }

.lb-row { position: relative; display: grid; grid-template-columns: 34px 240px 130px minmax(0,1fr) 108px 150px 130px; gap: 14px; align-items: center; width: 100%; text-align: left;
  margin: 0 0 12px; padding: 14px 18px; border-radius: 16px; border: 1px solid transparent; cursor: pointer;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--bc, #5ef0a8) 5%, transparent), transparent 45%) padding-box,
    linear-gradient(180deg, rgba(10,14,32,.8), rgba(6,9,24,.68)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--bc, #5ef0a8) 32%, transparent), rgba(199,214,240,.12) 45%, rgba(199,214,240,.07)) border-box;
  box-shadow: inset 0 1px 0 rgba(214,228,255,.06), 0 14px 34px -18px rgba(0,2,10,.85);
  animation: mktReveal .45s var(--b-ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .2s var(--b-ease), box-shadow .2s; font-family: var(--mono); color: var(--ink); }
.lb-row:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(214,228,255,.06), 0 18px 40px -18px rgba(0,2,10,.9), 0 0 34px -12px color-mix(in srgb, var(--bc, #5ef0a8) 55%, transparent); }
.lb-row.open { border-color: color-mix(in srgb, var(--bc, #5ef0a8) 55%, transparent); }
.lb-rank { font-family: var(--disp); font-size: 19px; font-weight: 700; color: #67759a; }
.lb-co { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lb-co .biz-logo { flex: none; width: 46px; height: 46px; border-radius: 12px; }
.lb-co-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lb-co-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb-name { font-family: var(--disp); font-size: 15px; font-weight: 600; color: #f0f5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-chip { flex: none; font-style: normal; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--lc); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); background: color-mix(in srgb, var(--lc) 9%, transparent); border-radius: 999px; padding: 2px 8px; }
.lb-ct { font-size: 9.5px; letter-spacing: .05em; color: #7787a3; }
.lb-thumb { display: block; width: 130px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(199,214,240,.12); background: #070b1e; }
.lb-thumb img, .lb-thumb canvas, .lb-thumb > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-contrib { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lb-contrib b { font-family: var(--disp); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #e8eefc; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-contrib small { font-size: 10px; line-height: 1.5; color: #8a99bd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-tags { display: flex; gap: 6px; }
.lb-tags i { font-style: normal; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 999px; padding: 2px 8px; }
.lb-score { display: flex; flex-direction: column; gap: 2px; }
.lb-score b { font-family: var(--disp); font-size: 27px; font-weight: 700; line-height: 1; color: var(--bc); text-shadow: 0 0 22px color-mix(in srgb, var(--bc) 50%, transparent); }
.lb-score i { font-style: normal; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--bc) 75%, #fff); }
.lb-spark { display: block; }
.lb-spark canvas { display: block; width: 100%; height: 46px; }
.lb-net { display: flex; flex-direction: column; gap: 3px; }
.lb-net b { font-family: var(--disp); font-size: 16px; font-weight: 700; }
.lb-net b.up, .lb-net i.up { color: var(--accent); }
.lb-net b.dn, .lb-net i.dn { color: var(--strike); }
.lb-net i { font-style: normal; font-size: 8.5px; letter-spacing: .08em; color: #7787a3; }
.lb-more { display: block; width: 100%; margin: 4px 0 14px; padding: 11px; border-radius: 12px; border: 1px solid rgba(199,214,240,.16); background: rgba(10,14,32,.7); color: #8a99bd; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.lb-more:hover { color: #eef3ff; border-color: rgba(63,217,255,.45); }

/* sidebar */
.lb-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.lb-panel { padding: 14px 15px 13px; }
.lb-donut-wrap { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.lb-donut { position: relative; flex: none; width: 120px; height: 120px; border-radius: 50%; }
.lb-donut::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #0a0e22; }
.lb-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; z-index: 1; }
.lb-donut-c b { font-family: var(--disp); font-size: 21px; font-weight: 700; color: #eef3ff; }
.lb-donut-c small { font-family: var(--mono); font-size: 6.8px; letter-spacing: .12em; text-transform: uppercase; color: #67759a; }
.lb-donut-key { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.lb-donut-key span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--mono); }
.lb-donut-key em { font-style: normal; font-size: 9.5px; letter-spacing: .06em; color: #b0bfe0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.lb-donut-key em::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px -1px var(--c); flex: none; }
.lb-donut-key b { font-size: 10px; color: #eef3ff; }
.lb-trend { display: block; width: 100%; height: 132px; margin-top: 8px; }
.lb-trend-key { padding-top: 8px; }
.lb-gainers { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.lb-gain { display: flex; align-items: center; gap: 9px; font-family: var(--mono); }
.lb-gain i { font-style: normal; width: 14px; font-size: 10px; color: #67759a; }
.lb-gain .biz-logo { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.lb-gain span { flex: 1; min-width: 0; font-size: 11px; color: #d3dcef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-gain b { font-size: 11px; color: var(--accent); }
.lb-method { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 10px; }
.lb-method span { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(199,214,240,.13); background: rgba(8,12,30,.6); }
.lb-method b { font-family: var(--disp); font-size: 13px; font-weight: 700; color: #eef3ff; }
.lb-method small { font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: #7787a3; line-height: 1.5; }

@media (max-width: 1240px) {
  .lb-row { grid-template-columns: 30px minmax(0,1fr) 108px; }
  .lb-thumb { display: none; }
  .lb-contrib { grid-column: 2; }
  .lb-spark { grid-column: 2; }
  .lb-net { grid-column: 3; }
}
@media (max-width: 980px) { .lb-layout { grid-template-columns: 1fr; } .lb-side { position: static; } }

/* ════════════════════════════════════════════════════════════════
   THE GOAL — north-star dashboard (2026-08-14): ring hero + momentum,
   milestone track, progress-by-need, where-we-are/what-we-need, the
   road stepper, latest signals. Same directional data, reference frame.
   ════════════════════════════════════════════════════════════════ */
.gl-hero { display: grid; grid-template-columns: minmax(0,1.1fr) auto minmax(260px, .9fr); gap: 22px; align-items: center; margin: 4px 0 18px; }
.gl-title { margin: 8px 0 10px; font-family: var(--disp); font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; color: #f2f6ff; }
.gl-title em { font-style: italic; font-family: var(--serif); background: linear-gradient(120deg, #5ef0a8, #3fd9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gl-sub { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #8a99bd; max-width: 46ch; }
.gl-ring-wrap { display: flex; align-items: center; gap: 18px; }
.gl-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gl-side b { font-family: var(--disp); font-size: 22px; font-weight: 700; color: #dfe9ff; }
.gl-side small { font-family: var(--mono); font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: #67759a; text-align: center; max-width: 90px; line-height: 1.6; }
.gl-ring { position: relative; width: 168px; height: 168px; border-radius: 50%; filter: drop-shadow(0 0 30px rgba(94,240,168,.25)); }
.gl-ring::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #070b1e; }
.gl-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; z-index: 1; }
.gl-ring-c b { font-family: var(--disp); font-size: 42px; font-weight: 700; color: #f2f6ff; }
.gl-ring-c small { font-family: var(--mono); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: #5ef0a8; }
.gl-mom { padding: 13px 15px; }
.gl-mom-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.gl-mom-row { display: grid; grid-template-columns: 46px auto 1fr; align-items: baseline; gap: 10px; font-family: var(--mono); }
.gl-mom-row b { font-family: var(--disp); font-size: 19px; font-weight: 700; color: var(--c); }
.gl-mom-row span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #dfe9ff; }
.gl-mom-row small { font-size: 9px; color: #67759a; text-align: right; }

.gl-track { margin: 0 0 18px; }
.gl-bar { position: relative; height: 12px; border-radius: 999px; border: 1px solid rgba(199,214,240,.14); background: rgba(8,12,30,.7); overflow: hidden; }
.gl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #2f9d6b, #5ef0a8 70%, #7dffc9); box-shadow: 0 0 18px rgba(94,240,168,.65); transition: width 1s var(--b-ease); }
.gl-stops { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--mono); }
.gl-stops span { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
.gl-stops span:nth-child(2) { position: relative; left: -12%; align-items: center; }
.gl-stops span:nth-child(3) { position: relative; left: -6%; align-items: center; }
.gl-stops span:last-child { align-items: flex-end; }
.gl-stops b { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #7787a3; font-weight: 600; }
.gl-stops span.on b { color: #5ef0a8; }
.gl-stops i { font-style: normal; font-size: 11px; color: #dfe9ff; }
.gl-stops span.on i { color: #5ef0a8; }

.gl-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.gl-panel { padding: 14px 16px 12px; }
.gl-foot { display: block; width: 100%; margin-top: 10px; padding: 9px; text-align: center; border-radius: 10px; border: 1px solid rgba(199,214,240,.13); background: rgba(10,14,32,.6); color: #8a99bd; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.gl-foot:hover { color: #eef3ff; border-color: rgba(63,217,255,.45); }

.gl-needs { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.gl-need { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 150px; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 6%, transparent), transparent 50%) padding-box, linear-gradient(rgba(8,12,28,.72), rgba(8,12,28,.72)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(199,214,240,.09)) border-box;
  font-family: var(--mono); color: var(--ink); transition: transform .18s var(--b-ease); }
.gl-need:hover { transform: translateY(-1px); }
.gl-need .gl-ni { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 17px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: 0 0 16px -6px var(--c); }
.gl-need .gl-nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-need .gl-nm b { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: #eef3ff; }
.gl-need .gl-nm small { font-size: 9px; color: #7787a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-need .gl-np { display: flex; flex-direction: column; gap: 1px; align-items: flex-end; }
.gl-need .gl-np b { font-family: var(--disp); font-size: 21px; font-weight: 700; color: #f2f6ff; }
.gl-need .gl-np small { font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: #67759a; }
.gl-need .gl-np i { font-style: normal; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.gl-spark { display: block; }
.gl-spark canvas { display: block; width: 150px; height: 40px; }

.gl-gaps { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.gl-gap { display: grid; grid-template-columns: 150px minmax(0,1fr) minmax(0,1fr) 92px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,12,28,.66), rgba(8,12,28,.66)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 26%, transparent), rgba(199,214,240,.08)) border-box; }
.gl-gap-id { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); }
.gl-gap-id i { font-style: normal; font-size: 14px; color: var(--c); }
.gl-gap-id b { font-size: 10.5px; letter-spacing: .1em; color: #eef3ff; }
.gl-gap-id em { font-style: normal; font-size: 9px; color: var(--c); }
.gl-gap-tx { font-family: var(--mono); font-size: 9.5px; line-height: 1.55; color: #a9b6d4; display: flex; flex-direction: column; gap: 3px; }
.gl-gap-tx small { font-size: 7px; letter-spacing: .18em; text-transform: uppercase; color: #67759a; }
.gl-gap-g { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); }
.gl-gap-g small { font-size: 7px; letter-spacing: .18em; text-transform: uppercase; color: #67759a; }
.gl-gap-g b { font-family: var(--disp); font-size: 17px; font-weight: 700; color: var(--c); }
.gl-gap-g u { display: block; height: 5px; border-radius: 4px; background: rgba(199,214,240,.1); text-decoration: none; overflow: hidden; }
.gl-gap-g s { display: block; height: 100%; border-radius: 4px; background: var(--c); box-shadow: 0 0 10px var(--c); text-decoration: none; }

.gl-road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; position: relative; }
.gl-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-family: var(--mono); padding: 12px 8px; border-radius: 12px; border: 1px dashed rgba(199,214,240,.14); }
.gl-stage i { font-style: normal; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 17px; color: #7787a3; border: 1px solid rgba(199,214,240,.2); }
.gl-stage b { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #b0bfe0; }
.gl-stage small { font-size: 8px; line-height: 1.5; color: #67759a; }
.gl-stage em { font-style: normal; font-size: 9px; color: #7787a3; }
.gl-stage.done i { color: #5ef0a8; border-color: rgba(94,240,168,.45); }
.gl-stage.here { border: 1px solid rgba(94,240,168,.5); background: rgba(94,240,168,.05); box-shadow: 0 0 28px -10px rgba(94,240,168,.8); }
.gl-stage.here i { color: #04130f; background: linear-gradient(135deg, #5ef0a8, #3fd9ff); border-color: transparent; box-shadow: 0 0 22px rgba(94,240,168,.7); }
.gl-stage.here b { color: #5ef0a8; }
.gl-road-cap { margin: 10px 0 0; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: #8a99bd; }

.gl-signals { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.gl-sig { display: grid; grid-template-columns: 30px minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
  background: linear-gradient(rgba(8,12,28,.66), rgba(8,12,28,.66)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 28%, transparent), rgba(199,214,240,.08)) border-box; }
.gl-sig i { font-style: normal; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 12px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.gl-sig span { font-family: var(--mono); font-size: 11px; color: #d3dcef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-sig:hover span { color: #ffffff; }
.gl-sig small { font-family: var(--mono); font-size: 9px; color: #67759a; }
.gl-sig b { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.gl-sig b.up { color: var(--accent); }
.gl-sig b.dn { color: var(--strike); }

.gl-detail { margin-top: 6px; border: 1px solid rgba(199,214,240,.12); border-radius: 14px; background: rgba(6,9,24,.5); padding: 0 16px 10px; }
.gl-detail > summary { cursor: pointer; list-style: none; padding: 13px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8a99bd; }
.gl-detail > summary::before { content: '+ '; color: var(--accent); }
.gl-detail[open] > summary::before { content: '− '; }
.gl-detail > summary::-webkit-details-marker { display: none; }

@media (max-width: 1180px) { .gl-hero { grid-template-columns: 1fr; } .gl-ring-wrap { justify-content: center; } .gl-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .gl-need { grid-template-columns: 42px minmax(0,1fr) auto; }
  .gl-spark { display: none; }
  .gl-gap { grid-template-columns: 1fr; gap: 8px; }
  .gl-road { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   JOBS AT RISK (2026-08-14) — the reference frame on the measured record:
   tracked occupations table · capability clock · three margins · base rates.
   ════════════════════════════════════════════════════════════════ */
.jb-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px, 1fr); gap: 14px; align-items: start; margin-bottom: 14px; }
.jb-main, .jb-panel { padding: 14px 16px 12px; }
.jb-side { display: flex; flex-direction: column; gap: 14px; }
.jb-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jb-updated { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; color: #67759a; }
.jb-cols { display: grid; grid-template-columns: 215px 86px 150px minmax(0,1fr); gap: 14px; padding: 10px 12px 6px; font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: #5e6c8c; }
.jb-rows { display: flex; flex-direction: column; gap: 9px; }
.jb-row { display: grid; grid-template-columns: 215px 86px 150px minmax(0,1fr); gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px; border-radius: 13px; cursor: pointer;
  border: 1px solid transparent; font-family: var(--mono); color: var(--ink);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 5%, transparent), transparent 50%) padding-box, linear-gradient(rgba(8,12,28,.72), rgba(8,12,28,.72)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 28%, transparent), rgba(199,214,240,.09)) border-box;
  animation: mktReveal .45s var(--b-ease) both; animation-delay: calc(var(--i,0) * 50ms); transition: transform .18s var(--b-ease); }
.jb-row:hover { transform: translateY(-1px); }
.jb-oc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jb-oc i { font-style: normal; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; font-size: 16px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); flex: none; }
.jb-oc b { display: block; font-family: var(--disp); font-size: 13.5px; font-weight: 600; color: #eef3ff; line-height: 1.25; }
.jb-oc small { font-size: 8.5px; letter-spacing: .08em; color: #67759a; }
.jb-tier u { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; text-decoration: none; border: 2.5px solid var(--tc); box-shadow: 0 0 18px -6px var(--tc), inset 0 0 14px -8px var(--tc); }
.jb-tier b { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc); text-align: center; }
.jb-num b { display: block; font-family: var(--disp); font-size: 23px; font-weight: 700; color: #f2f6ff; }
.jb-num small { font-size: 8.5px; line-height: 1.5; color: #7787a3; display: block; }
.jb-read { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jb-read > span { font-size: 10px; line-height: 1.55; color: #a9b6d4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jb-read em { display: flex; gap: 5px; font-style: normal; }
.jb-basis { font-style: normal; font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; border: 1px solid; }
.jb-b-measured { color: #5ef0a8; border-color: rgba(94,240,168,.4); }
.jb-b-derived { color: #38bdf8; border-color: rgba(56,189,248,.4); }
.jb-b-modeled { color: #ffb454; border-color: rgba(255,180,84,.4); }
.jb-b-vendor { color: #f0663f; border-color: rgba(240,102,63,.4); }
.jb-when { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.jb-when b { font-family: var(--disp); font-size: 44px; font-weight: 700; line-height: 1; background: linear-gradient(120deg, #5ef0a8, #3fd9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 22px rgba(94,240,168,.4)); }
.jb-chip { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #5ef0a8; border: 1px solid rgba(94,240,168,.4); border-radius: 999px; padding: 4px 11px; background: rgba(94,240,168,.06); }
.jb-when-sub { margin: 8px 0 0; font-family: var(--mono); font-size: 10px; line-height: 1.65; color: #8a99bd; }
.jb-tl { margin: 12px 0 4px; }
.jb-tl-rail { position: relative; height: 10px; border-radius: 999px; background: rgba(199,214,240,.09); border: 1px solid rgba(199,214,240,.12); }
.jb-tl-rail i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(94,240,168,.5), rgba(63,217,255,.6)); box-shadow: 0 0 16px rgba(94,240,168,.55); }
.jb-tl-rail b, .jb-tl-rail u { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); }
.jb-tl-rail b { background: #5ef0a8; box-shadow: 0 0 10px #5ef0a8; }
.jb-tl-rail u { background: #070b1e; border: 2px solid #3fd9ff; }
.jb-tl-lbls { display: flex; justify-content: space-between; margin-top: 5px; font-family: var(--mono); font-size: 8px; color: #5e6c8c; }
.jb-rungs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.jb-rung { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(199,214,240,.13); background: rgba(8,12,30,.6); font-family: var(--mono); }
.jb-rung small { font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: #3fd9ff; }
.jb-rung b { font-family: var(--disp); font-size: 19px; font-weight: 700; color: #eef3ff; }
.jb-rung em { font-style: normal; font-size: 8.5px; line-height: 1.45; color: #8a99bd; }
.jb-rung i { font-style: normal; font-size: 7.5px; letter-spacing: .06em; color: #67759a; }
.jb-caveat { margin: 10px 0 0; font-family: var(--mono); font-size: 8.5px; line-height: 1.6; color: #67759a; }
.jb-margins { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.jb-margin { padding: 10px 12px; border-radius: 11px; border: 1px solid transparent;
  background: linear-gradient(rgba(8,12,28,.66), rgba(8,12,28,.66)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 32%, transparent), rgba(199,214,240,.08)) border-box; font-family: var(--mono); }
.jb-m-h { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.jb-m-h u { text-decoration: none; font-size: 8px; font-weight: 700; letter-spacing: .14em; color: #04130f; background: var(--c); border-radius: 999px; padding: 2px 9px; }
.jb-m-h b { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #eef3ff; }
.jb-margin p { margin: 0 0 4px; font-size: 10px; line-height: 1.6; color: #a9b6d4; }
.jb-margin p b { color: #eef3ff; }
.jb-margin small { font-size: 8px; color: #67759a; }
.jb-hist { padding: 14px 16px; margin-bottom: 12px; }
.jb-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.jb-case { --c: #8b96a6; display: flex; flex-direction: column; gap: 5px; padding: 12px 13px; border-radius: 12px; border: 1px solid transparent; font-family: var(--mono);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 6%, transparent), transparent 55%) padding-box, linear-gradient(rgba(8,12,28,.7), rgba(8,12,28,.7)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(199,214,240,.08)) border-box; }
.jb-c-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.jb-c-h b { font-family: var(--disp); font-size: 13px; font-weight: 600; color: #eef3ff; }
.jb-c-h u { text-decoration: none; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.jb-case > i { font-style: normal; font-size: 8.5px; letter-spacing: .06em; color: #7787a3; }
.jb-case small { font-size: 9px; line-height: 1.55; color: #8a99bd; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.jb-case-stat b { font-family: var(--disp); font-size: 30px; font-weight: 700; background: linear-gradient(120deg, #5ef0a8, #3fd9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.jb-case-stat em { font-style: normal; font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: #5ef0a8; }
.jb-foot { margin: 0 0 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: #67759a; text-align: center; }
@media (max-width: 1180px) { .jb-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .jb-cols { display: none; }
  .jb-row { grid-template-columns: 1fr 86px; }
  .jb-num, .jb-read { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════
   THE CLIMB (2026-08-14) — cost-collapse chart, crashed cards, the
   physical-world row, and NOW / NEXT / AFTER — on the verified record.
   ════════════════════════════════════════════════════════════════ */
.cl-title { line-height: 1.22; }
.cl-title .cl-a { background: linear-gradient(120deg, #5ef0a8, #3fd9ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cl-title .cl-n { background: linear-gradient(120deg, #a78bfa, #cf5bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cl-quote { align-self: center; font-family: var(--mono); font-size: 10.5px; line-height: 1.8; color: #8a99bd; border-left: 2px solid #3fd9ff; padding: 4px 0 4px 14px; }
.cl-quote b { color: #dfe9ff; font-weight: 600; }
.cl-panel { padding: 14px 16px 12px; margin-bottom: 14px; }
.cl-chart-wrap { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 14px; align-items: stretch; margin-top: 10px; }
.cl-cv { display: block; width: 100%; height: 300px; }
.cl-legend { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.cl-leg { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 4px 9px; align-items: center; font-family: var(--mono); }
.cl-leg i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: 0 0 10px -2px var(--c); }
.cl-leg span { font-size: 10px; letter-spacing: .06em; color: #c6d1e6; }
.cl-leg b { font-size: 12px; color: var(--c); }
.cl-leg small { grid-column: 2 / -1; font-size: 7.5px; letter-spacing: .08em; color: #67759a; }
.cl-src { margin: 10px 0 0; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; color: #67759a; }
.cl-src a { color: #3fd9ff; text-decoration: none; }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.cl-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 13px; border: 1px solid transparent; font-family: var(--mono);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 6%, transparent), transparent 55%) padding-box, linear-gradient(rgba(8,12,28,.72), rgba(8,12,28,.72)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 34%, transparent), rgba(199,214,240,.08)) border-box; }
.cl-card small { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #b0bfe0; }
.cl-card b { font-family: var(--disp); font-size: 30px; font-weight: 700; color: var(--c); text-shadow: 0 0 24px color-mix(in srgb, var(--c) 45%, transparent); line-height: 1.05; }
.cl-card i { font-style: normal; font-size: 8.5px; letter-spacing: .06em; color: #67759a; }
.cl-card span { font-size: 10px; line-height: 1.55; color: #a9b6d4; }
.cl-spark { display: block; width: 100%; height: 34px; margin-top: 6px; }
.cl-world { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.cl-wcard { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 13px; border: 1px solid transparent; font-family: var(--mono);
  background: linear-gradient(rgba(8,12,28,.72), rgba(8,12,28,.72)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 40%, transparent), rgba(199,214,240,.08)) border-box; }
.cl-wcard small { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.cl-wimg { display: block; height: 96px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(199,214,240,.1); }
.cl-wimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-wcard b { font-family: var(--disp); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: #eef3ff; }
.cl-wcard i { font-style: normal; font-size: 9px; line-height: 1.55; color: #8a99bd; }
.cl-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }
.cl-ncol { padding: 13px 14px; border-radius: 13px; border: 1px solid transparent;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 5%, transparent), transparent 50%) padding-box, linear-gradient(rgba(8,12,28,.7), rgba(8,12,28,.7)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c) 34%, transparent), rgba(199,214,240,.08)) border-box; }
.cl-nh { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--c); margin-bottom: 9px; }
.cl-nh i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 9px var(--c); }
.cl-ni { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-family: var(--mono); cursor: help; }
.cl-ni i { font-style: normal; font-size: 9px; color: var(--c); flex: none; }
.cl-ni span { font-size: 10.5px; line-height: 1.5; color: #c6d1e6; }
.cl-nf { margin: 9px 0 0; padding-top: 8px; border-top: 1px dashed rgba(199,214,240,.14); font-family: var(--mono); font-size: 8.5px; line-height: 1.6; color: color-mix(in srgb, var(--c) 70%, #8a99bd); }
@media (max-width: 900px) { .cl-chart-wrap { grid-template-columns: 1fr; } .cl-legend { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; } }
.cl-title { display: block; }
.cl-title .feed-live { display: none; }

/* the hero-art grid texture retires site-wide — the nebula bg is the only sky */
#home-view::before, #pull-board::before, #climb-view::before, #goal-view::before,
#social-view::before, #biz-view::before, #frontier-view::before, #occupations-view::before { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   THE DOOR (2026-08-14) — the split sign-in / sign-up screen.
   Left: what this is, over an abstract field with LIVE catalog readouts.
   Right: the gate, then what you get, then what we measure from.
   The old centered `.stage` door rules (~line 3090) no longer match #s-auth —
   they still serve #s-login, so they stay. Only the three shared IDs
   (#auth-submit / #auth-toggle / #auth-forgot) are re-styled below.
   ════════════════════════════════════════════════════════════════ */
.auth-screen { padding: clamp(26px, 4.5vh, 60px) clamp(16px, 4vw, 46px) clamp(30px, 5vh, 58px); display: none; }
.auth-screen.active { display: block; }
/* the door is its own room: the floating sign-in pill and the engine strip both
   belong to the signed-in shell, and on this screen they only sat on the work */
body:has(#s-auth.active) .auth-pill,
body:has(#s-auth.active) .eng-strip.eng-pill { display: none; }
.auth-screen::before {   /* the room the door stands in */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 18% 8%, rgba(94,240,168,.10) 0%, transparent 62%),
    radial-gradient(52% 44% at 88% 74%, rgba(63,217,255,.07) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(124,92,255,.08) 0%, transparent 60%);
}
.auth-split {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(354px, 452px);
  gap: clamp(26px, 4vw, 70px); align-items: start;
  width: min(1220px, 100%); margin: 0 auto;
}

/* ── left column ── */
.auth-mark { display: block; font-size: 34px; line-height: 1; color: var(--accent); text-shadow: 0 0 12px rgba(94,240,168,.6), 0 0 44px rgba(94,240,168,.26); }
.auth-claim {
  margin: clamp(28px, 5vh, 54px) 0 16px; max-width: 15ch;
  font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.04; letter-spacing: -.015em; color: #f4f8ff;
}
.auth-claim em { font-style: normal; color: var(--accent); text-shadow: 0 0 34px rgba(94,240,168,.4); }
.auth-caret { display: inline-block; width: .07em; height: .74em; margin-left: .12em; vertical-align: -.02em; background: var(--vio); box-shadow: 0 0 12px rgba(167,139,250,.9); }
.auth-dek { margin: 0 0 clamp(24px, 3.4vh, 38px); font-family: var(--mono); font-size: 13px; line-height: 1.85; color: var(--ink-dim); max-width: 52ch; }

.auth-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 clamp(22px, 3vh, 34px); padding: 0; list-style: none; max-width: 560px; }
.auth-feats li { display: flex; flex-direction: column; gap: 11px; }
.af-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--accent);
  border: 1px solid rgba(94,240,168,.32); background: rgba(94,240,168,.07); box-shadow: 0 0 22px -8px rgba(94,240,168,.8), inset 0 1px 0 rgba(255,255,255,.07); }
.af-ic svg { width: 20px; height: 20px; }
.auth-feats b { font-family: var(--mono); font-size: 11.5px; font-weight: 400; line-height: 1.5; letter-spacing: .03em; color: var(--ink-dim); }

/* the field — abstract on purpose (see the note in index.html) */
.auth-field { position: relative; margin: 0 0 clamp(18px, 2.6vh, 28px); aspect-ratio: 4 / 3; max-width: 580px; }
.auth-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.auth-chips { position: absolute; inset: 0; pointer-events: none; }
.glc {
  position: absolute; display: block; min-width: 0; padding: 8px 12px 9px;
  border: 1px solid color-mix(in srgb, var(--c, #5ef0a8) 45%, transparent);
  border-left-width: 2px; border-radius: 9px;
  background: rgba(4, 8, 18, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 30px -12px var(--c, #5ef0a8), 0 12px 30px -18px rgba(0,0,0,.9);
  font-family: var(--mono); white-space: nowrap;
}
.glc b { display: block; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--c, #5ef0a8); }
.glc i { display: block; font-style: normal; font-size: 15px; font-weight: 600; color: #eef3ff; margin-top: 2px; }
.glc small { display: block; font-size: 9px; letter-spacing: .1em; color: #67759a; margin-top: 2px; }
.glc[data-pos="a"] { left: 22%; top: 4%; }
.glc[data-pos="b"] { left: 1%;  top: 44%; }
.glc[data-pos="c"] { right: 2%; top: 38%; }
.glc[data-pos="d"] { left: 12%; bottom: 10%; }

.auth-scorecard { position: relative; margin: 0; padding: 20px 22px 18px 52px; border-radius: 14px;
  border: 1px solid rgba(199,214,240,.12); background: rgba(8, 12, 26, .55); max-width: 560px; }
.asc-q { position: absolute; left: 20px; top: 16px; font-family: var(--disp); font-size: 40px; line-height: 1; color: rgba(199,214,240,.22); }
.auth-scorecard blockquote { margin: 0 0 10px; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--ink); }
.auth-scorecard blockquote b { color: var(--accent); font-weight: 600; }
.auth-scorecard figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }

/* ── right column ── */
.auth-panel { display: flex; flex-direction: column; gap: 16px; }
.auth-card { border-radius: 16px; padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid rgba(94,240,168,.2);
  background: linear-gradient(180deg, rgba(199,214,240,.035), rgba(199,214,240,0) 42%), rgba(5, 10, 20, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(214,228,255,.07), 0 26px 60px -30px rgba(0,2,10,.95); }
.au-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.au-h { margin: 12px 0 6px; font-family: var(--disp); font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -.01em; color: #f2f6ff; }
.au-sub { margin: 0 0 24px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }

.au-field { display: block; margin-bottom: 16px; }
.au-label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.au-wrap { position: relative; display: flex; align-items: center; border-radius: 10px;
  border: 1px solid rgba(199,214,240,.16); background: rgba(3, 7, 16, .72); transition: border-color .18s, box-shadow .18s; }
.au-wrap:focus-within { border-color: rgba(94,240,168,.55); box-shadow: 0 0 0 3px rgba(94,240,168,.09); }
.au-ic { flex: none; width: 18px; height: 18px; margin: 0 10px 0 13px; color: var(--ink-faint); }
.au-wrap input { flex: 1; min-width: 0; padding: 14px 12px 14px 0; border: 0; background: none; outline: none;
  font-family: var(--mono); font-size: 14px; color: var(--ink-hi); }
.au-wrap input::placeholder { color: #55617d; }
.au-wrap input:-webkit-autofill { -webkit-text-fill-color: var(--ink-hi); -webkit-box-shadow: 0 0 0 40px #060c16 inset; }
.au-eye { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; padding: 0;
  border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.au-eye svg { width: 19px; height: 19px; }
.au-eye:hover { color: var(--ink); }
.au-eye[aria-pressed="true"] { color: var(--accent); }
.au-eye[aria-pressed="true"] .au-eye-slash { display: none; }

.au-link { display: inline-block; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--accent); }
.au-link[hidden] { display: none; }   /* inline-block outranks the UA's [hidden] rule */
.au-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.au-forgot { margin: 2px 0 0; float: right; }
#auth-status { clear: both; margin: 14px 0 0; font-size: 12px; }

/* the three IDs the old centered door also styled — restated for this layout */
#auth-submit.au-go {
  display: block; width: 100%; margin-top: 18px; padding: 15px 20px; border: 0; border-radius: 10px; cursor: pointer;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .1em; color: #04130f; text-shadow: none;
  background: linear-gradient(92deg, #5ef0a8 0%, #45e2b6 52%, #3fd9ff 100%);
  box-shadow: 0 0 34px -10px rgba(94,240,168,.8); transition: filter .18s, transform .12s, box-shadow .18s;
}
#auth-submit.au-go:hover { filter: brightness(1.07); box-shadow: 0 0 44px -8px rgba(94,240,168,.95); }
#auth-submit.au-go:active { transform: translateY(1px); }
#auth-submit.au-go:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }
#auth-toggle.au-link, #auth-forgot.au-link { border: 0; background: none; box-shadow: none; text-shadow: none; padding: 0; }
#auth-toggle.au-link { color: var(--accent); font-weight: 600; letter-spacing: .02em; }
#auth-forgot.au-link { color: var(--ink-faint); }
#auth-forgot.au-link:hover { color: var(--accent); }

.au-alt { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(199,214,240,.1);
  text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.au-alt .au-link { margin-left: 6px; }

.auth-get .ag-h { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--accent); margin-bottom: 16px; }
.auth-get ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-get li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink); }
.ag-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--accent);
  border: 1px solid rgba(94,240,168,.26); background: rgba(94,240,168,.06); }
.ag-ic svg { width: 16px; height: 16px; }

.auth-srcs { padding: 4px 6px 0; }
.as-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.as-row { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.as-row span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: #8a99bd;
  padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(199,214,240,.13); background: rgba(199,214,240,.03); }

.auth-foot { margin: clamp(30px, 5vh, 54px) auto 0; max-width: 1220px; text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-faint); }
.auth-foot a { color: var(--accent); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .auth-caret { animation: authCaret 1.15s steps(1) infinite; }
  @keyframes authCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
}

/* ── the door on a laptop, then a phone ── */
@media (max-width: 1080px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 620px; }
  .auth-story { order: 2; }        /* the gate is the job; the story is the argument under it */
  .auth-panel { order: 1; }
  .auth-claim { max-width: none; font-size: clamp(32px, 6vw, 46px); }
  .auth-field { max-width: none; aspect-ratio: 3 / 2; }
  /* the mark leads the page once the story drops below the gate — an unbranded
     form as the first thing on screen reads like someone else's login */
  .auth-story .auth-mark { display: none; }
  .auth-panel::before {
    content: '◍'; display: block; margin-bottom: 18px; text-align: center;
    font-size: 30px; line-height: 1; color: var(--accent);
    text-shadow: 0 0 12px rgba(94,240,168,.6), 0 0 44px rgba(94,240,168,.26);
  }
}
@media (max-width: 640px) {
  .auth-screen { padding: 20px 16px 34px; }
  .auth-mark { font-size: 28px; }
  .auth-claim { margin-top: 24px; font-size: clamp(29px, 8.4vw, 38px); }
  .auth-dek { font-size: 12px; line-height: 1.75; }
  .auth-dek br { display: none; }
  .auth-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .auth-card { padding: 20px 17px 22px; border-radius: 14px; }
  .au-wrap input { font-size: 16px; }   /* under 16px iOS zooms the whole page on focus */
  .auth-field { aspect-ratio: 1 / 1; }
  .glc { padding: 6px 9px 7px; }
  .glc b { font-size: 10px; } .glc i { font-size: 13px; } .glc small { font-size: 8.5px; }
  .glc[data-pos="a"] { left: 4%; top: 2%; }
  .glc[data-pos="b"] { left: 0; top: 34%; }
  .glc[data-pos="c"] { right: 0; top: 62%; }
  .glc[data-pos="d"] { left: 6%; bottom: 4%; }
  .auth-scorecard { padding: 16px 16px 15px 42px; }
  .asc-q { left: 14px; top: 12px; font-size: 32px; }
}

/* ════════════════════════════════════════════════════════════════
   THE PHONE PASS (2026-08-14) — last block in the file on purpose.
   The deck redesign turned .pull-nav (the old docked tab bar) off and made
   .deck-rail a FIXED left rail. On a phone that rail sat on top of every
   view: #s-dash .pull-hud (id, line ~3386) beat .dash.deck-mode .pull-hud's
   padding-left, so nothing cleared it and every headline lost its first
   three characters. Below 760px the rail becomes the docked bottom bar it
   used to be, and the views get their full width back.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* ── the rail docks to the bottom ── */
  .pull-hud > .deck-rail {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 0; padding: 0 6px env(safe-area-inset-bottom, 0px);
    border-right: 0; border-top: 1px solid rgba(199,214,240,.12);
    background: rgba(4,6,18,.94);
  }
  .deck-rail .dr-orb { flex: none; width: 30px; height: 30px; margin: 0 4px 0 2px; }
  .deck-rail .dr-orb i { inset: 8px; }
  .deck-rail .dr-nav { flex: 1; flex-direction: row; justify-content: space-around; gap: 0; min-width: 0; }
  .deck-rail .dr-nav button { width: auto; flex: 1; min-width: 0; min-height: 44px; padding: 5px 2px; border-radius: 9px; }
  .deck-rail .dr-nav button i { font-size: 14px; }
  .deck-rail .dr-nav button em { font-size: 8px; letter-spacing: .1em; }   /* 6.8px was unreadable at arm's length */
  .deck-rail .dr-sys { display: none; }   /* the ring is a desktop ornament; the goal view carries the number */

  /* ── the views clear the dock instead of the old (hidden) tab bar ── */
  #s-dash .pull-hud,
  .dash.deck-mode .pull-hud { padding-left: 0; padding-right: 0; }
  #s-dash .pull-hud { padding: 14px 16px calc(70px + env(safe-area-inset-bottom, 0px)); }
  .dash.deck-mode .pull-hud { padding: 0 0 calc(62px + env(safe-area-inset-bottom, 0px)); }
  #s-dash .pull-hud::after { display: none; }   /* the plate belonged to .pull-nav, which is display:none now */
  .devskip { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  #rally-fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }
  .eng-strip.eng-pill { bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
  body:has(#s-dash.deck-mode.active) .eng-strip.eng-pill { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); right: 10px; }

  /* nothing may push the dash sideways — a stray wide child used to give the
     whole app a horizontal scroll it could never scroll back from */
  #s-dash { overflow-x: hidden; }

  /* ── the two floating overlays stop covering the page ── */
  /* the pill's job on a phone is the verb, not the status noun */
  .auth-pill .auth-pill-who { display: none; }
  .auth-pill { top: 8px; right: 8px; padding: 5px 10px; gap: 6px;
    transition: opacity .2s, transform .2s; }
  .auth-pill.is-away { opacity: 0; transform: translateY(-14px); pointer-events: none; }   /* set by watchAuthPillScroll — returns at the top */
  #s-dash .dash-id { display: none; }   /* the @handle sat under the fixed pill; the pill is the identity here */

  /* ── the deck's top bar: brand on one line, the filters on their own ── */
  .deck-top { flex-wrap: wrap; height: auto; gap: 9px; padding: 10px 12px 11px; }
  .deck-brand { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .db-mark { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
  .db-name b { font-size: 13px; letter-spacing: .1em; }
  .db-name small { font-size: 7px; letter-spacing: .26em; }
  .deck-filters { flex: 1 1 100%; gap: 7px; }
  .deck-filters .dk-sel { flex: 1 1 0; min-width: 0; font-size: 10.5px; padding: 9px 24px 9px 12px; }
  .deck-filters .dk-gear { flex: none; width: 36px; height: 36px; }

  /* ── the globe stage ── */
  .deck-main { height: 56vh; min-height: 360px; overflow: hidden; }   /* clips the off-stage pins the globe parks at opacity 0 */
  .deck-lede { left: 0; right: 0; top: 0; max-width: none; padding: 14px 16px 30px;
    background: linear-gradient(180deg, rgba(3,5,18,.8) 0%, rgba(3,5,18,.45) 58%, transparent 100%); }
  .dk-h1 { margin: 7px 0 8px; font-size: clamp(29px, 8.4vw, 40px); }
  .dk-sub { font-size: 10.5px; line-height: 1.65; }
  .dk-sub br { display: none; }   /* the desktop line breaks fight the phone's measure */

  /* the year ticks don't fit; the frame (past · now · future) still reads */
  .deck-timeline { padding: 8px 12px 10px; gap: 8px; justify-content: space-between; }
  .deck-timeline .tl-yr { display: none; }
  .deck-timeline .tl-now { font-size: 9.5px; padding: 6px 16px; }

  /* ── the side panels and gauge cards ── */
  .deck-side { padding: 10px 12px 4px; gap: 10px; }
  .dk-curves { min-height: 300px; }   /* flex:1 collapses to nothing once the deck is height:auto */
  .deck-cards { padding: 10px 12px; gap: 9px; }
  .dk-mcards { grid-template-columns: 1fr; }   /* 2-up truncated every milestone to "FR… IN…" */
  .deck-ticker { padding: 8px 12px; }

  /* ── the feed rows ── */
  /* the thumbnail carried a negative margin from the LEGACY .fr-card bleed
     (styles.css ~2815) that .frow never overrode. Harmless while it was a fixed
     250px cell; once the phone rule made it width:100% grid-column:1/-1 it shifted
     the image 20px left — the picture visibly hung outside the card's own border. */
  .frow .fr-media { margin: 0 0 6px; height: 168px; }
  .frow { align-items: start; }   /* was center: the salience and needs blocks sat on different baselines */
  .frow .fr-when { flex-direction: row; align-items: center; gap: 10px; }
  .frow .fr-h { -webkit-line-clamp: 3; }   /* 2 lines truncated nearly every headline at this measure */
  .frow .fcard-stats { white-space: nowrap; }   /* "+4.0 pts" was breaking after "+4.0" */
  .frow .fcard-actions { flex-wrap: wrap; gap: 8px 16px; }
  .frow .fcard-act { min-height: 30px; }

  /* ── the leaders rows stack: the 3-column desktop row left 188px for a name ── */
  .lb-row { grid-template-columns: 26px minmax(0,1fr); gap: 9px 11px; padding: 13px 14px; }
  .lb-rank { grid-column: 1; font-size: 16px; }
  .lb-co { grid-column: 2; }
  .lb-co .biz-logo { width: 38px; height: 38px; border-radius: 10px; }
  .lb-contrib, .lb-spark { grid-column: 1 / -1; }
  .lb-score, .lb-net { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 9px; }
  .lb-score b { font-size: 23px; }
}

/* ════════════════════════════════════════════════════════════════
   MILESTONE CLOCKS — every gauge card runs its own countdown, not just
   the one the big four-box clock is aimed at. The clock gets a full-width
   row of its own because the middle column is ~57px at 1440 and truncated
   "est. window 2026–20…" to nothing. Left: time to the window's midpoint,
   ticking to the second. Right: the window itself + its status mark
   (● measured · ◐ emerging · ○ speculative) — the clock must never read
   as a date when the underlying window is a guess.
   ════════════════════════════════════════════════════════════════ */
.dk-mcard { grid-template-rows: auto auto; row-gap: 7px; }
/* explicit cells: an item with a definite row is placed BEFORE the auto ones, so the
   gauge would otherwise grab column 2 and shove the name into the gauge's slot */
.dk-mcard .mi { grid-row: 1; grid-column: 1; }
.dk-mcard .mn { grid-row: 1; grid-column: 2; }
.dk-mcard .mg { grid-row: 1; grid-column: 3; }
.dk-mcard .mclk { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--c) 18%, rgba(199,214,240,.08)); min-width: 0; }
.dk-mcard .mclk b { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .01em; color: var(--c);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.dk-mcard .mclk i { font-style: normal; font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; color: #67759a; white-space: nowrap; }
.dk-mcard.on { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 26px -10px var(--c); }

/* the phone stacks the cards one per row — the clock has room to breathe there */
@media (max-width: 700px) {
  .dk-mcard .mclk b { font-size: 11px; }
  .dk-mcard .mclk i { font-size: 8.5px; }
}

/* the path strip — a full-width caption row above the milestone clocks */
.deck-cards { row-gap: 9px; }
.deck-path { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.deck-path > b { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #eef3ff; }
.deck-path #dk-path-note { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; color: #7d8cad; }
.deck-path #dk-path-note b { color: #b0bfe0; font-weight: 600; }
.deck-path em { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; color: #7d8cad;
  border: 1px solid rgba(199,214,240,.14); border-radius: 999px; padding: 2px 9px; }
.deck-path em.up { color: #5ef0a8; border-color: rgba(94,240,168,.4); box-shadow: 0 0 16px -6px #5ef0a8; }

/* the headline is longer than the question it replaced ("when will it go free?"):
   at 74px "TO A FREE WORLD" wrapped to a 4th line and ran under the calibration panel.
   46% of the stage holds two lines at 62px — measure the block, not the font size. */
.dk-h1 { font-size: clamp(32px, 4.3vw, 62px); }
/* …and the block needs room: 46% of the stage (~465px) is narrower than the new second
   line, so the lede measure widens with it. It overlays the globe and takes no pointer
   events, so the extra width costs nothing. */
.deck-lede { max-width: 58%; }

/* ════════════════════════════════════════════════════════════════
   THE MARK — the MM monogram (assets/brand/, added 2026-08-20) takes the
   two slots the ◍ glyph used to hold: the rail's home orb and the door's mark. The artwork is a ring with its own chrome and
   glow, so every slot it lands in DROPS the painted chip/orb underneath —
   two rings stacked read as a mistake. It keeps its transparent margin, so
   sizes here are the optical size, not the box. The deck header and the app header do
   NOT carry it: the rail's orb sits directly to their left, and two marks across the top
   read as a duplicate, not a lockup (removed 2026-08-20).
   ════════════════════════════════════════════════════════════════ */
.dr-orb { border: none; background: none; box-shadow: none; }
.dr-orb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(124,92,255,.75)); }
.dr-orb:hover img { filter: drop-shadow(0 0 18px rgba(124,92,255,1)); }
.auth-mark { width: 54px; height: 54px; text-shadow: none; }
.auth-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(124,92,255,.5)); }
@media (max-width: 700px) { .auth-mark { width: 44px; height: 44px; } }

/* ════════════════════════════════════════════════════════════════
   THE STAGE'S LEFT COLUMN — fits every screen, not just 1440×900.
   The lede and the calibration panel were both absolutely positioned
   (one pinned top, one pinned bottom): on any stage shorter or narrower
   than the reference they ran straight through each other — measured at
   1366×768, 1280×800, 1194×834, 1112×834 and 1024×768. They now share one
   flow column with space-between, so the worst case is that they crowd.
   Type scales on the SHORTER axis too (min(vw, vh)) — a 768-tall laptop
   is short before it is narrow, and that is what was overflowing.
   ════════════════════════════════════════════════════════════════ */
.deck-stage-l { position: absolute; z-index: 4; left: clamp(16px, 3vw, 42px); top: clamp(10px, 3vh, 34px);
  bottom: clamp(52px, 9vh, 86px); width: min(58%, 660px); display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between; gap: clamp(8px, 2vh, 24px); pointer-events: none; }
.deck-lede { position: static; max-width: 100%; }
.dk-acc { position: static; flex: none; pointer-events: auto; }
.dk-h1 { font-size: clamp(28px, min(4.3vw, 6.4vh), 62px); }
.dk-sub { font-size: clamp(9.5px, min(.9vw, 1.45vh), 12.5px); }

/* short stages give the panel less to say before anything can crowd: the
   sparkline shrinks first, then the block goes tight. Nothing is dropped. */
@media (max-height: 860px) {
  .dk-spark { height: 34px; }
  .dk-acc { padding: 11px 13px 12px; width: clamp(200px, 17vw, 240px); }
  .dk-acc-val b { font-size: 30px; }
  .dk-streams b { font-size: 18px; }
}
@media (max-height: 810px) {
  /* a 768-tall laptop cannot hold the lede AND the full panel above the timeline: the
     sparkline goes first (the calibration FIGURE and its delta stay), then the type. */
  .dk-spark { display: none; }
  .dk-acc { padding: 10px 12px 11px; }
  .dk-acc-val b { font-size: 26px; }
  .dk-h1 { font-size: clamp(28px, min(4.3vw, 5.9vh), 62px); margin: 7px 0 7px; }
  .dk-acc .dk-p-h.dk-gap, .dk-acc .dk-p-sub.dk-gap { margin-top: 8px; }
  .deck-stage-l { gap: 6px; }
}

/* the phone keeps the full-bleed lede: the column stops being a column */
@media (max-width: 700px) {
  .deck-stage-l { left: 0; right: 0; top: 0; bottom: auto; width: auto; display: block; }
}

/* gauge cards on a 1280–1520 laptop: the tile and gauge were eating the
   measure, so every milestone read "FREE INTELLI…". Shrink the furniture,
   not the name. */
@media (max-width: 1520px) {
  .dk-mcard { grid-template-columns: 38px minmax(0,1fr) 42px; gap: 3px 8px; padding: 8px 9px; }
  .dk-mcard .mi { width: 38px; height: 38px; border-radius: 9px; font-size: 16px; }
  .dk-mcard .mg { width: 42px; height: 42px; }
  .dk-mcard .mg b { font-size: 9.5px; }
  .dk-mcard .mn { font-size: 8.6px; letter-spacing: .05em; }
  .dk-mcard .mclk b { font-size: 8.6px; }
  .dk-mcard .mclk i { font-size: 7px; }
}

/* below ~1300 the card measure gets tight enough that two lines still clipped
   "FREE INTELLIGENCE" — give the name a third line rather than an ellipsis. */
@media (max-width: 1320px) {
  .dk-mcard .mn { font-size: 8px; line-height: 1.25; -webkit-line-clamp: 3; }
  .dk-mcard .mi { width: 34px; height: 34px; }
  .dk-mcard { grid-template-columns: 34px minmax(0,1fr) 40px; }
  .dk-mcard .mg { width: 40px; height: 40px; }
}

/* Below ~1370 the five clocks were sharing the row with two cards that repeat
   what is already on screen: "signals tracked" is the same figure (and the same
   +today) as the calibration panel's "signals on record". It stands down so the
   milestone names stop truncating; nothing shown is lost. */
@media (max-width: 1366px) {
  .deck-cards { grid-template-columns: minmax(0,1fr) clamp(100px, 9vw, 132px); }
  .dk-card-sum { display: none; }
}
@media (max-width: 1100px) {
  .dk-mcards { gap: 6px; }
  .dk-mcard { grid-template-columns: 30px minmax(0,1fr) 36px; gap: 3px 6px; padding: 7px 7px; }
  .dk-mcard .mi { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
  .dk-mcard .mg { width: 36px; height: 36px; }
  .dk-mcard .mg b { font-size: 8.5px; }
  .dk-mcard .mn { font-size: 7.6px; }
  .dk-mcard .mclk b { font-size: 8px; }
}

/* On a narrow side column the four countdown boxes overran the panel's right
   padding — "04 HOURS" sat on the border. The boxes get smaller before the
   panel gets wider; the deck's column widths are load-bearing elsewhere. */
@media (max-width: 1240px) {
  .dk-next-grid { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .dk-count { gap: 4px; }
  .dk-cbox { padding: 6px 1px 4px; }
  .dk-cbox b { font-size: 16px; }
  .dk-cbox small { font-size: 5.6px; letter-spacing: .1em; }
  .dk-nx-wave { height: 34px; }
}

/* The phone lays the lede straight over the globe, and the globe's lit limb runs right
   under the sub-line. The scrim used to fade out by 58%, leaving the last two lines on
   bare planet. It now carries to the bottom of the block — the chips clear the type
   (home-globe.js measures it), but the planet itself still needs holding back. */
@media (max-width: 700px) {
  .deck-lede { padding-bottom: 40px;
    background: linear-gradient(180deg, rgba(3,5,18,.93) 0%, rgba(3,5,18,.86) 46%, rgba(3,5,18,.62) 78%, rgba(3,5,18,0) 100%); }
}