/* ============================================================================
   FUTURIST — UV BACKSTAGE LAMINATE
   One shared theme layer. Loaded AFTER each page's own <style>, so it wins on
   the cascade at equal specificity without touching 13 files of inline CSS.

   Why this exists: the pages had drifted to three different backgrounds
   (#0a0b0d, #07080a, #0a0806) and two --dim values, so the page ground shifted
   underfoot as you navigated. Everything below is token-level or additive.
   ========================================================================= */

:root {
  /* Ground: one cool near-black. Not pure #000 — the laminate needs a floor
     that can still show a shadow. */
  --bg:        #08090c;
  --card:      #101219;
  --card2:     #161922;
  --surface:   #101219;

  /* Warm off-white ink on cool black is the whole laminate contrast. */
  --ink:       #f4f2ec;
  --text:      #f4f2ec;
  --sub:       #a8a49b;
  --text-secondary: #a8a49b;
  /* Lifted from #64615b/#5c594f — both sat near 3.4:1 on the old ground and
     were the least legible thing on the phone in daylight. */
  --dim:       #7d786d;
  --muted:     #7d786d;

  --mag:       #ff2d87;
  --accent:    #ff2d87;
  --cyn:       #00e5ff;
  --accent2:   #00e5ff;
  --cyan:      #00e5ff;
  --lime:      #a3e635;
  --green:     #a3e635;
  --amber:     #fbbf24;
  --vio:       #9d7bff;
  --red:       #f87171;

  --line:      rgba(244,242,236,.085);
  --border:    rgba(244,242,236,.085);
  --line-hard: rgba(244,242,236,.17);
  --border-hover: rgba(255,45,135,.5);
  --glass-1:   rgba(244,242,236,.035);
  --glass-2:   rgba(244,242,236,.06);

  --shadow-glow: 0 0 26px rgba(255,45,135,.18);
  --shadow-lift: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px -12px rgba(0,0,0,.85);
}

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

/* --- Atmosphere ---------------------------------------------------------
   Two fixed layers on a pseudo-element of <html> so they sit under every page
   regardless of what that page did with body::before/::after. Aurora bloom in
   the brand hues, plus grain to kill gradient banding on OLED phones. */
html::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 40% at 82% -8%,  rgba(255,45,135,.16), transparent 62%),
    radial-gradient(48% 36% at 4% 104%,  rgba(0,229,255,.11),  transparent 62%),
    radial-gradient(40% 30% at 50% 50%,  rgba(157,123,255,.05), transparent 70%);
}
html::after {
  content: ''; position: fixed; inset: -50%; z-index: -1; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Surfaces -----------------------------------------------------------
   A laminate catches light along its top edge. One hairline gradient does more
   for perceived quality here than any amount of extra border or shadow. */
.card, .panel, .pb, .kv, .day, .person, .playbook-card, details, .warn, .callout {
  position: relative;
  box-shadow: var(--shadow-lift);
}
.card::before, .panel::before, .pb::before, .person::before, .playbook-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(244,242,236,.22) 22%, rgba(244,242,236,.22) 78%, transparent);
  pointer-events: none;
}
.card.hot::before { background: linear-gradient(90deg, transparent, rgba(255,45,135,.55) 20%, rgba(0,229,255,.4) 80%, transparent); }

.card, .panel, .pb, .person, .playbook-card { transition: border-color .25s, transform .25s, box-shadow .25s; }
@media (hover:hover) {
  .card:hover, .pb:hover, .person:hover, .playbook-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.9);
  }
}

/* --- Type ---------------------------------------------------------------
   Syne is a display face; at small sizes its default tracking reads mushy.
   Tighten the big stuff, open up the mono meta. */
h1 { letter-spacing: -.015em; }
h2, .card h3, .person h3, .pb-head h2 { letter-spacing: -.005em; }
.rank, .lbl, .k, .meta, .nlabel, .tchip, .badge, .pill {
  font-variant-numeric: tabular-nums;
}
/* Body copy wants a measure, not the full 1080px panel width. */
.why, .lede, .sec-sub, .row small, .sub { max-width: 68ch; }

/* --- Focus ---------------------------------------------------------------
   The site is operated one-handed on a phone and by keyboard on a laptop;
   the default focus ring was invisible against the dark ground. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyn);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============================================================================
   POLISH LAYER
   Everything below is additive and token-driven. It has to survive 14 pages
   written by different hands, so it styles shared primitives only and never
   assumes a page's internal structure.
   ========================================================================= */

/* --- Entrance -----------------------------------------------------------
   One orchestrated load beats a dozen scattered micro-interactions. The hub
   and /profile already shipped their own `rise`; this generalises it.

   Two guards, both learned the hard way:
   1. A card inside a display:none pane NEVER runs its animation, and
      `fill-mode: both` then pins the from-state permanently. Revealing the
      pane does NOT start it — tested directly on /runbook: opacity stayed 0
      after the parent flipped to display:block. So the keyframe animates
      transform ONLY; the worst case is a 10px offset, never blank content.
   2. The stagger caps at the 7th child. A 40-row page must not spend two
      seconds assembling itself on venue wifi.

   NB when verifying: measuring this inside an offscreen iframe reports every
   animated element as stuck at opacity 0 — offscreen frames throttle
   animations so they never complete. Check pages DIRECTLY. That artifact
   already caused one false "25 elements broken across 6 pages" alarm. */
/* NO opacity in this keyframe — deliberately. See the note above: a card inside a
   display:none pane never runs its animation, and animation-fill-mode:both then pins
   the from-state forever. With opacity in the keyframe that means permanently BLANK
   content (verified: /runbook tab panes stayed at opacity 0 even after reveal).
   Animating transform alone degrades to a harmless 10px offset instead. */
@keyframes riseIn { from { transform:translateY(10px) } to { transform:none } }
.card, .panel, .pb, .kv, .day, .person, .playbook-card, .grp, .callout {
  animation: riseIn .5s cubic-bezier(.16,1,.3,1) both;
}
details[open] .card, details[open] .panel, .tmpl { animation: none; }
.card:nth-child(1),.grp:nth-child(1),.kv:nth-child(1){animation-delay:.02s}
.card:nth-child(2),.grp:nth-child(2),.kv:nth-child(2){animation-delay:.06s}
.card:nth-child(3),.grp:nth-child(3),.kv:nth-child(3){animation-delay:.10s}
.card:nth-child(4),.grp:nth-child(4),.kv:nth-child(4){animation-delay:.14s}
.card:nth-child(5),.grp:nth-child(5){animation-delay:.18s}
.card:nth-child(6),.grp:nth-child(6){animation-delay:.22s}
.card:nth-child(n+7),.grp:nth-child(n+7){animation-delay:.26s}

/* --- Surface depth ------------------------------------------------------
   A flat fill reads cheap at this scale. A 1% top-down gradient gives the
   laminate a light source without anyone consciously noticing it. */
.card, .panel, .pb, .kv, .day, .person, .playbook-card, .grp, .tmpl {
  background-image: linear-gradient(180deg, rgba(244,242,236,.035), rgba(244,242,236,0) 42%);
}

/* --- Section headers ----------------------------------------------------
   The mono uppercase labels were floating. A short accent rule anchors them
   and gives the eye a left edge to run down. */
h2 { position: relative; }
.wrap h2, body > h2 { padding-left: .85rem; }
.wrap h2::before, body > h2::before {
  content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:2px; border-radius:2px;
  background: linear-gradient(180deg, var(--mag), var(--cyn));
}

/* --- Navigation ---------------------------------------------------------
   Pills were flat and read as disabled. Give them a real resting state, a
   hover, and an active chip that glows rather than just inverting. */
.nav a {
  background: rgba(244,242,236,.03);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.nav a:hover { color: var(--ink); border-color: var(--line-hard); background: rgba(244,242,236,.07); }
.nav a.on, .nav a.home {
  background: linear-gradient(135deg, rgba(255,45,135,.16), rgba(0,229,255,.10));
  border-color: rgba(255,45,135,.5);
  color: var(--ink);
  box-shadow: 0 0 18px -4px rgba(255,45,135,.5);
}

/* --- Numerals -----------------------------------------------------------
   Times sit in columns; proportional digits make them jitter. */
.t, .row .t, .cd, .strip .v, .tl-ev, .when, .go { font-variant-numeric: tabular-nums; }

/* --- Badges + pills -----------------------------------------------------
   Slightly more presence so a "target #2" chip reads at arm's length. */
.badge, .pill, .tag { font-weight: 600; padding-block: .12rem; }

/* --- Quoted openers -----------------------------------------------------
   These are the words he actually says out loud. Give them room and a mark. */
.opener, .say {
  position: relative;
  background-image: linear-gradient(90deg, rgba(255,45,135,.055), transparent 55%);
}

/* --- Links --------------------------------------------------------------- */
a { transition: color .2s, opacity .2s; }

/* --- Scrollbar (desktop) ------------------------------------------------- */
html, body, .scroll, .tl-day, .nav, pre { scrollbar-width: thin; scrollbar-color: rgba(244,242,236,.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(244,242,236,.16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(244,242,236,.28); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Selection ----------------------------------------------------------- */
::selection { background: rgba(255,45,135,.32); color: var(--ink); }
