/* ============================================================
   No Past, No Problem — port styles.

   Bridges NPNP's bespoke masthead + colophon onto the system:
   a site wordmark in the masthead, a theme toggle, the shared glass
   footer, and a collapsible sources section. The article keeps its
   own LUMA voice (League Spartan display + JetBrains Mono prose) and
   now has a light theme (see colors_and_type.css :root vs body.dark),
   flipped by the shared theme-toggle.
   ============================================================ */

/* ── shared-footer token bridge. Footer uses the SITE standard fonts
   (Nexa wordmark + JetBrains Mono labels) so it matches other pages;
   colours map onto NPNP's role tokens so it flips light/dark. ── */
:root{
  --display:'League Spartan','Nexa',system-ui,sans-serif;
  --sans:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --r-sm:var(--radius-sm,4px);
  --exhale:var(--ease-exhale,cubic-bezier(.4,0,.2,1));
  --breath:var(--ease-exhale,cubic-bezier(.4,0,.2,1));
  --page-bg:var(--bg);
  --ink-faint:var(--muted);
  --nav-border:var(--border);
  --nav-hairline:color-mix(in srgb,var(--glow) 55%,transparent);
  --nav-ink:var(--fg);
  --nav-ink-soft:var(--fg-soft);
  --nav-accent:var(--glow);
  /* NPNP uses --glow/--ember, never --accent — but the shared footer's
     motion-toggle dot + link hovers read --accent directly. Map it so the
     dot lights (flips per theme via --glow). */
  --accent:var(--glow);
  --nav-glass:color-mix(in srgb,var(--bg) 82%,transparent);
  --nav-shadow:0 12px 44px -20px rgba(0,0,0,.55);
  --thread-solid:var(--glow);
  --thread:linear-gradient(90deg,transparent,var(--glow) 18%,var(--glow-soft) 50%,var(--glow) 82%,transparent);
}
body.dark{ --nav-shadow:0 12px 44px -20px rgba(0,0,0,.8); }
/* (footer link styling lives in shared/chrome.css; here we only bridge tokens
   + fix footer background/text legibility per theme below) */

/* ── masthead: add the new left group (back + site wordmark) + the theme
   toggle. The article's OWN .is-on-paper system already flips the whole
   masthead (bg + text) as you scroll dark ↔ paper sections — so we do NOT
   override its background/colours; the new elements just INHERIT the
   masthead's current colour so they flip along with it. ── */
.masthead__left{ display:inline-flex; align-items:center; gap:clamp(10px,2vw,18px); }
.masthead__wordmark{ display:inline-flex; align-items:center; gap:7px; color:inherit; text-decoration:none; opacity:.9; transition:opacity .25s,color .25s; }
.masthead__wordmark:hover{ opacity:1; color:var(--glow); }
.masthead.is-on-paper .masthead__wordmark:hover{ color:var(--ember); }
.masthead__wordmark .mm-mark{ width:20px; height:20px; color:var(--glow); flex:none; display:inline-flex; }
.masthead.is-on-paper .masthead__wordmark .mm-mark{ color:var(--ember); }
.masthead__wordmark .mm-mark svg{ width:100%; height:100%; display:block; }
.masthead__wordmark .mm-name{ font-family:var(--font-display); font-size:14px; font-weight:800; letter-spacing:.01em; text-transform:lowercase; color:inherit; }
@media(max-width:600px){ .masthead__wordmark .mm-name{ display:none; } }

/* theme toggle button in the masthead — inherits the flip too */
.masthead .icon-btn{
  all:unset; box-sizing:border-box; cursor:pointer; width:32px; height:32px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; border-radius:4px;
  color:inherit; opacity:.9; transition:color .3s,background .3s,opacity .25s;
}
.masthead .icon-btn svg{ width:16px; height:16px; display:block; }
.masthead .icon-btn:hover{ opacity:1; color:var(--glow); background:color-mix(in srgb,var(--glow) 12%,transparent); }
.masthead.is-on-paper .icon-btn:hover{ color:var(--ember); background:color-mix(in srgb,var(--ember) 12%,transparent); }
.masthead .icon-btn:focus-visible{ outline:2px solid var(--glow); outline-offset:3px; }

/* ── collapsible sources (same +/– disclosure idiom as the others) ── */
.sources-details{ margin-top:8px; }
.sources-details > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:baseline; gap:.7rem;
}
.sources-details > summary::-webkit-details-marker{ display:none; }
.sources-details > summary::before{
  content:"+"; font-family:var(--font-ui); color:var(--glow); font-weight:400; font-size:1.4rem; line-height:1;
}
.sources-details[open] > summary::before{ content:"–"; }
.sources-details > summary h2{ display:inline; margin:0; }
.sources-details > summary:hover h2{ color:var(--glow); }
.sources-details > summary:focus-visible{ outline:2px solid var(--glow); outline-offset:4px; }

@media print{ .masthead{ display:none; } }

/* ============================================================
   LIGHT THEME fixes (body:not(.dark)) — the article was authored
   dark-only, so a few pieces assume a dark ground. In light we:
   1) make the masthead legible (its own .is-on-paper flip + hardcoded
      dark glass fought the new light theme);
   2) keep the visualization panels on a DARK ground so the dark-
      designed SVG/canvas viz stay legible on the light page.
   ============================================================ */
body:not(.dark) .masthead{
  background:color-mix(in srgb,var(--paper) 82%,transparent) !important;
  border-bottom:1px solid var(--border-paper) !important;
}
body:not(.dark) .masthead a,
body:not(.dark) .masthead__wordmark,
body:not(.dark) .masthead__wordmark .mm-name,
body:not(.dark) .masthead__right a,
body:not(.dark) .masthead__brand,
body:not(.dark) .masthead .icon-btn{ color:var(--ink-soft); }
body:not(.dark) .masthead__title{ color:var(--ink); }
body:not(.dark) .masthead a:hover,
body:not(.dark) .masthead__wordmark:hover,
body:not(.dark) .masthead .icon-btn:hover{ color:var(--ember); }
body:not(.dark) .masthead__dot{ background:var(--ember); }
/* neutralise the article's own on-paper flip so it doesn't double-apply */
body:not(.dark) .masthead.is-on-paper{ background:color-mix(in srgb,var(--paper) 82%,transparent) !important; }

/* ── visualization panels stay dark in light theme ──
   The React viz are drawn for a dark ground; on the light page they wash
   out. Give the frame + each mount a deep charcoal panel so the viz read
   the same in both themes; flip the frame's label/title/caption to light.
   EXCEPTION: Fig 05 (The Witness, #viz-witness) is designed to read on a
   LIGHT ground — it keeps the paper background in light theme. */
body:not(.dark) .viz:not(.viz--light) .viz__frame{
  background:linear-gradient(180deg,#1f2020,#191a1a) !important;
  border-color:rgba(246,240,226,0.12) !important;
  color:var(--luma-light);
}
body:not(.dark) .viz:not(.viz--light) .viz__frame .viz__label{ color:var(--luma-gold); }
body:not(.dark) .viz:not(.viz--light) .viz__frame .viz__title{ color:var(--luma-light); }
body:not(.dark) .viz:not(.viz--light) .viz__frame .viz__caption{ color:#d6cfbe; }
body:not(.dark) .viz:not(.viz--light) .viz__frame .viz__figure{ color:#8a8784; border-top-color:rgba(246,240,226,0.12); }
body:not(.dark) .viz:not(.viz--light) .viz__frame [id^="viz-"]{ background:transparent; color:var(--luma-light); }


/* ── shared footer legibility in light: pin dark text on a solid paper
   ground so it can't render light-on-light. ── */
body:not(.dark) footer.site{ background:var(--paper) !important; border-top:1px solid var(--border-paper); }
body:not(.dark) footer.site,
body:not(.dark) footer.site a,
body:not(.dark) footer.site .fnav a,
body:not(.dark) footer.site .fine a,
body:not(.dark) footer.site .fbrand .name{ color:var(--ink-soft); }
body:not(.dark) footer.site a:hover{ color:var(--ember); }
body:not(.dark) footer.site .fbrand .mark{ color:var(--ember); }

/* ── DARK theme (default): the shared footer reads --ink-soft / --ink-faint,
   which in this article are the "text on PAPER" (dark) tokens and are NOT
   flipped by body.dark — so on the charcoal footer they render dark-on-dark.
   Pin light text + gold marks here so the footer + masthead are legible. ── */
body.dark footer.site{ background:color-mix(in srgb,var(--luma-charcoal) 82%,transparent); border-top:1px solid rgba(246,240,226,0.10); }
body.dark footer.site,
body.dark footer.site a,
body.dark footer.site .fnav a,
body.dark footer.site .fine a,
body.dark footer.site .fbottom,
body.dark footer.site .fbrand .name{ color:var(--fg-soft) !important; }
body.dark footer.site a:hover,
body.dark footer.site .fnav a:hover,
body.dark footer.site .fine a:hover{ color:var(--luma-gold) !important; }
body.dark footer.site .fbrand .mark{ color:var(--luma-gold); }

/* NOTE: the masthead in DARK theme is handled by the article's own
   .is-on-paper system (editorial.css) — light text on dark glass over dark
   sections, dark text on light glass over paper sections. We deliberately do
   NOT override it here (earlier overrides fought that system and caused the
   illegibility). The new wordmark + toggle inherit the masthead colour. */