/* ═══════════════════════════════════════════════
   ToggleUp© Mobile — Design System
   Light Stone + Dark Mode
   ═══════════════════════════════════════════════ */

:root {
  /* Light mode (default) */
  --bg: #E5E5E0;
  --surface-elevated: #F4F4F0;

  --bg-rgb: 229,229,224;
  --primary: #1A1A1A;
  --primary-rgb: 26,26,26;
  --surface: #D6D6D0;
  --surface-rgb: 214,214,208;
  --outline: #869489;
  --outline-rgb: 134,148,137;
  --outline-strong: #525F56; /* AA: 5.31:1 vs --bg #E5E5E0 */
  --on-primary: #E5E5E0;
  --border: #bccabe;
  --card-active: #cbcbc5;

  /* Accent colors */
  --accent-emerald: #2D5F3A;
  --accent-yellow: #eab308;
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;

  /* Category colors */
  --cat-reported: #2D5F3A;
  --cat-contested: #B8860B;
  --cat-developing: #5B7B8A;

  /* EVS bands */
  --band-green: #2D5F3A;
  --band-yellow: #B8860B;
  --band-orange: #f97316;
  --band-red: #ef4444;

  /* Logo strokes */
  --logo-stroke: #1A1A1A;

  /* Transparency helpers */
  --glass: rgba(229,229,224,0.9);
  --glass-nav: rgba(229,229,224,0.95);
  --inset-shadow: rgba(0,0,0,0.05);
  --card-border: rgba(134,148,137,0.3);
  --subtle-border: rgba(134,148,137,0.22);
  --faint-border: rgba(134,148,137,0.12);
  --overlay-bg: rgba(0,0,0,0.04);
}

/* ═══════════ MOTION + VITRINE TOKENS (theme-independent) ═══════════
   Motion: the only three durations + one easing used by the vitrine
   (and the shared design-system motion spec). --ease-brand matches the
   existing theme-handle precedent. Vitrine: geometry for the fixed-head +
   inset-scroll "vitrine" that encloses the six reader sections. */
:root {
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-brand: cubic-bezier(0.25, 1, 0.35, 1);

  --vitrine-pad-top: 112px;                                  /* = old pt-28; clears topbar + #back-to-menu at top:72px */
  --vitrine-pad-bottom: calc(96px + env(safe-area-inset-bottom));
  --vitrine-radius: 14px;
  --vitrine-fade: 28px;
  --vitrine-bg: rgba(var(--surface-rgb), 0.35);

  /* Type scale — the ONLY font sizes permitted in the six reader sections */
  --fs-micro:   9px;   /* mono eyebrows, chips, timestamps  (absorbs 7–9.5px)   */
  --fs-caption: 11px;  /* secondary meta, sublabels          (absorbs 10–11px)   */
  --fs-body:    13px;  /* running prose                      (absorbs 12–13.5px) */
  --fs-heading: 16px;  /* card titles, player names          (absorbs 14–18px)   */
  --fs-display: 24px;  /* section h2 and large numerals      (absorbs 20px+, = text-2xl) */
}

.fs-micro{font-size:var(--fs-micro)} .fs-caption{font-size:var(--fs-caption)}
.fs-body{font-size:var(--fs-body)}   .fs-heading{font-size:var(--fs-heading)}
.fs-display{font-size:var(--fs-display);line-height:2rem}
.tr-colors{transition:color var(--dur-fast) var(--ease-brand),background-color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.tr-opacity{transition:opacity var(--dur-base) var(--ease-brand)}
.tr-transform{transition:transform var(--dur-base) var(--ease-brand)}
.tr-lift{transition:transform var(--dur-fast) var(--ease-brand),box-shadow var(--dur-fast) var(--ease-brand)}

html.dark {
  --bg: #141414;
  --surface-elevated: #262624;

  --bg-rgb: 20,20,20;
  --primary: #E5E5E0;
  --primary-rgb: 229,229,224;
  --surface: #1E1E1C;
  --surface-rgb: 30,30,28;
  --outline: #7A8A7D;
  --outline-rgb: 122,138,125;
  --outline-strong: #89988C; /* AA: 6.08:1 vs --bg #141414 */
  --on-primary: #141414;
  --border: rgba(229,229,224,0.2);
  --card-active: #2F2F2C;

  /* Accent colors — brighter for dark bg */
  --accent-emerald: #2D5F3A;
  --accent-yellow: #facc15;
  --accent-red: #f87171;
  --accent-blue: #60a5fa;

  /* Category colors — lighter for dark bg */
  --cat-reported: #2D5F3A;
  --cat-contested: #B8860B;
  --cat-developing: #5B7B8A;

  /* EVS bands — more luminous */
  --band-green: #2D5F3A;
  --band-yellow: #D9A520;
  --band-orange: #FB923C;
  --band-red: #F87171;

  /* Logo strokes */
  --logo-stroke: #E5E5E0;

  /* Transparency helpers */
  --glass: rgba(20,20,20,0.92);
  --glass-nav: rgba(20,20,20,0.95);
  --inset-shadow: rgba(0,0,0,0.2);
  --card-border: rgba(229,229,224,0.2);
  --subtle-border: rgba(229,229,224,0.15);
  --faint-border: rgba(229,229,224,0.1);
  --overlay-bg: rgba(255,255,255,0.04);
}

html.coolblue {
  /* Cool Blue — cool slate/navy on a light blue-grey ground (from the deck) */
  --bg: #E4EBF1;
  --surface-elevated: #EDF3F8;

  --bg-rgb: 228,235,241;
  --primary: #1E2A3A;
  --primary-rgb: 30,42,58;
  --surface: #D3DFE9;
  --surface-rgb: 211,223,233;
  --outline: #7E93A6;
  --outline-rgb: 126,147,166;
  --outline-strong: #45505B; /* AA: 6.84:1 vs --bg #E4EBF1 */
  --on-primary: #EAF1F7;
  --border: #b7c8d6;
  --card-active: #c6d4e0;

  --accent-emerald: #2D5F3A;
  --accent-yellow: #eab308;
  --accent-red: #ef4444;
  --accent-blue: #0f766e;

  --cat-reported: #2D5F3A;
  --cat-contested: #B8860B;
  --cat-developing: #5B7B8A;

  --band-green: #2D5F3A;
  --band-yellow: #B8860B;
  --band-orange: #f97316;
  --band-red: #ef4444;

  --logo-stroke: #1E2A3A;

  --glass: rgba(228,235,241,0.9);
  --glass-nav: rgba(228,235,241,0.95);
  --inset-shadow: rgba(0,0,0,0.05);
  --card-border: rgba(126,147,166,0.32);
  --subtle-border: rgba(126,147,166,0.24);
  --faint-border: rgba(126,147,166,0.14);
  --overlay-bg: rgba(30,42,58,0.04);
}

html.oat {
  /* Oat — warm ink on a soft oatmeal ground. Values are the DECK design's
     exact palette (paper #F1E9D9, ink #35302A, sub #8B8173): the deck is
     the site standard for warm. */
  --bg: #F1E9D9;
  --surface-elevated: #F9F2E2;

  --bg-rgb: 241,233,217;
  --primary: #35302A;
  --primary-rgb: 53,48,42;
  --surface: #E5DAC2;
  --surface-rgb: 229,218,194;
  --outline: #8B8173;
  --outline-rgb: 139,129,115;
  --outline-strong: #655D4E; /* AA vs --bg */
  --on-primary: #F6F2EA;
  --border: rgba(53,48,42,0.22);
  --card-active: #dccfb4;

  --accent-emerald: #2D5F3A;
  --accent-yellow: #b45309;
  --accent-red: #c2410c;
  --accent-blue: #0f766e;

  --cat-reported: #2D5F3A;
  --cat-contested: #B8860B;
  --cat-developing: #5B7B8A;

  --band-green: #2D5F3A;
  --band-yellow: #B8860B;
  --band-orange: #f97316;
  --band-red: #c2410c;

  --logo-stroke: #35302A;

  --glass: rgba(241,233,217,0.9);
  --glass-nav: rgba(241,233,217,0.95);
  --inset-shadow: rgba(0,0,0,0.05);
  --card-border: rgba(53,48,42,0.18);
  --subtle-border: rgba(53,48,42,0.12);
  --faint-border: rgba(53,48,42,0.08);
  --overlay-bg: rgba(53,48,42,0.04);
}

/* Cool & Warm carry the FULL provided design — colors (above) AND typography —
   across the entire site, not just the card deck. Light/Dark keep the house
   fonts. */
html.oat h1, html.oat h2, html.oat h3, html.oat .font-serif,
html.coolblue h1, html.coolblue h2, html.coolblue h3, html.coolblue .font-serif {
  font-family: 'DM Serif Display', 'Eczar', Georgia, serif !important;
}
html.oat .font-sans, html.coolblue .font-sans {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
html.oat body, html.oat .font-mono, html.oat button,
html.coolblue body, html.coolblue .font-mono, html.coolblue button {
  font-family: 'Space Grotesk', 'JetBrains Mono', monospace;
}

/* Smooth theme transition */
html { transition: background-color 0.3s ease, color 0.3s ease; }
body, .story-card, .mode-card, .game-question-card, .game-option,
.suite-game-card, .dd-story-card, .dd-intro-card, .dd-gran-card,
.dd-gran-comparison-panel, .dd-gran-methodology, .dd-source-pill,
.toggle-track, .nav-tab, .audiocast-player, header, nav,
.timer-ring, .earmark-amount, .earmark-district, .earmark-desc {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Custom padding class (not in compiled Tailwind) */
.pt-28 { padding-top: 7rem !important; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg) !important;
  color: var(--primary) !important;
  font-family: 'JetBrains Mono', monospace;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ═══════════ PAGE ROUTING ═══════════ */
.page {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page.active {
  display: block;
  opacity: 1;
}
.page:focus { outline: none; } /* programmatic focus target, not a click target */
[tabindex="-1"]:focus { outline: none; } /* route-change focus lands here silently for sighted/mouse users; screen readers still get it */

/* ═══════════ SCREEN-READER-ONLY CONTENT ═══════════
   Visually hidden but present for assistive tech: the site h1 and the
   route-change announcer both use this instead of display:none, which
   would remove them from the accessibility tree entirely. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════ MODE PAGE: 3-POSITION VERTICAL TOGGLES ═══════════ */
.toggle-track {
  width: 96px;
  height: 256px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  box-shadow: inset 0 2px 4px var(--inset-shadow);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.toggle-slot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.toggle-slot.active {
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toggle-slot.inactive {
  border: 1px dashed rgba(var(--outline-rgb), 0.4);
  opacity: 0.2;
}

/* ═══════════ MODE CARDS ═══════════ */
.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 0.75rem;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 120px;
}
.mode-card:not(:disabled):active {
  transform: scale(0.96);
  background: var(--card-active);
}
.mode-card.coming-soon {
  opacity: 0.55;
  cursor: default;
}

/* ═══════════ STORY CARDS ═══════════ */
.story-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: transform 0.18s ease;
  cursor: pointer;
}
.story-card:active {
  transform: scale(0.98);
}
button.story-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border: 1px solid var(--border);
}
.story-card-expanded {
  display: none;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.story-card-expanded.open {
  display: block;
}

.evs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.evs-bar {
  height: 4px;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ═══════════ BOTTOM NAV ═══════════ */
.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  padding: 0.5rem;
  width: 64px;
  height: 60px;
  transition: color var(--dur-fast) var(--ease-brand), background-color var(--dur-fast) var(--ease-brand);
  color: var(--outline);
  cursor: pointer;
  border: none;
  background: none;
}
.nav-tab .material-symbols-outlined {
  font-size: 22px;
}
.nav-toggle-icon {
  width: 18px;
  height: 28px;
  flex-shrink: 0;
}
.nav-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2px;
}
.nav-tab.active {
  background: var(--surface);
  color: var(--primary);
}

/* ═══════════ BYLINE BLAST GAME ═══════════ */
.game-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.game-question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}

.game-option {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--primary);
}
.game-option:active {
  transform: scale(0.97);
}
.game-option.correct {
  background: #2D5F3A;
  color: white;
  border-color: #2D5F3A;
}
.game-option.wrong {
  background: #ef4444;
  color: white;
  border-color: #ef4444;
}
.game-option:disabled {
  cursor: default;
  opacity: 0.7;
}

.timer-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  transition: border-color 0.3s;
}
.timer-ring.warning { border-color: #eab308; color: #eab308; }
.timer-ring.danger { border-color: #ef4444; color: #ef4444; }

/* Albers-inspired scorecard */
.albers-square {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.albers-outer {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
}
.albers-mid {
  position: absolute;
  inset: 25px;
  border-radius: 0.375rem;
}
.albers-inner {
  position: absolute;
  inset: 50px;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════ BYLINE SUITE CARDS ═══════════ */
.suite-game-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid var(--border);
  text-align: left;
}
.suite-game-card:not(.coming-soon):active {
  transform: scale(0.97);
  background: var(--card-active);
}
.suite-game-card.coming-soon {
  opacity: 0.55;
  cursor: default;
}

/* ═══════════ EARMARKS GAME ═══════════ */
.earmark-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.earmark-district {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outline);
}
.earmark-desc {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--primary);
  opacity: 0.85;
}

/* Albers Forest palette (Earmarks civic theme) */
.albers-forest .albers-outer { background: rgba(0, 100, 0, 0.08); }
.albers-forest .albers-mid { background: rgba(0, 100, 0, 0.2); }
.albers-forest .albers-inner { background: #2d6a4f; }

/* ═══════════ UTILITY ═══════════ */
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════ AUDIOCAST ═══════════ */
.audiocast-player {
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--card-border);
}

/* Style the native audio controls to fit the stone palette */
audio::-webkit-media-controls-panel {
  background: var(--surface);
}
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--primary);
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #bottom-nav {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* ═══════════ DEEP DIVE PAGE ═══════════ */
.dd-intro-card {
  background: rgba(var(--surface-rgb),0.5);
  border: 1px solid var(--subtle-border);
  border-radius: 12px;
  padding: 14px 16px;
}

.dd-story-card {
  background: rgba(var(--surface-rgb),0.45);
  border: 1px solid var(--subtle-border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-brand), box-shadow var(--dur-fast) var(--ease-brand);
  animation: ddSlideIn var(--dur-slow) var(--ease-brand) both;
}
.dd-story-card:nth-child(1) { animation-delay: 0.05s; }
.dd-story-card:nth-child(2) { animation-delay: 0.10s; }
.dd-story-card:nth-child(3) { animation-delay: 0.15s; }
.dd-story-card:nth-child(4) { animation-delay: 0.20s; }
.dd-story-card:nth-child(5) { animation-delay: 0.25s; }
@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dd-story-card:active { transform: scale(0.98); }

.dd-story-expanded {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--subtle-border);
}
.dd-story-expanded.open { display: block; }

/* Category colors */
.dd-cat-reported   { color: var(--cat-reported); }
.dd-cat-contested  { color: var(--cat-contested); }
.dd-cat-developing { color: var(--cat-developing); }

.dd-cat-bg-reported   { background: rgba(var(--cat-reported-rgb, 45,95,58),0.10); }
.dd-cat-bg-contested  { background: rgba(var(--cat-contested-rgb, 184,134,11),0.10); }
.dd-cat-bg-developing { background: rgba(var(--cat-developing-rgb, 91,123,138),0.10); }

/* Stacked bar */
.dd-stacked-bar {
  width: 100%;
  height: 26px;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb),0.06);
}
.dd-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
}
.dd-bar-seg.reported   { background: var(--cat-reported); }
.dd-bar-seg.contested  { background: var(--cat-contested); }
.dd-bar-seg.developing { background: var(--cat-developing); }

/* Contradiction block in expanded view */
.dd-contradiction-block {
  margin-top: 10px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(var(--cat-contested-rgb, 184,134,11),0.2);
}
.dd-contradiction-header {
  background: rgba(var(--cat-contested-rgb, 184,134,11),0.08);
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cat-contested);
}
.dd-contradiction-item {
  padding: 8px 10px;
  border-top: 1px solid rgba(var(--cat-contested-rgb, 184,134,11),0.12);
}
.dd-contradiction-item:first-of-type { border-top: none; }

/* Source pills */
.dd-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 5px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--subtle-border);
  margin: 2px;
}
.dd-pill-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dd-pill-dot.high   { background: var(--cat-reported); }
.dd-pill-dot.mid    { background: var(--cat-contested); }
.dd-pill-dot.low    { background: var(--cat-developing); }
.dd-pill-dot.vlow   { background: var(--outline); }

/* Category breakdown rows */
.dd-breakdown-row {
  padding: 9px 11px;
  border-bottom: 1px solid var(--faint-border);
}
.dd-breakdown-row:last-child { border-bottom: none; }

.dd-breakdown-block {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--subtle-border);
  margin-bottom: 12px;
}

/* ═══════════ LONG FORM EVIDENCE DECK ═══════════
   Hybrid layout: the narrative stays continuous prose; the evidence
   layers (R/C/D claims, contradictions, origin, source weights) render
   as a horizontal snap-scroll card row in the daily-deck visual
   language (deck-card radii, chip headers, card surface). */
.dd-evidence-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
  margin: 0 -2px 4px;
  scrollbar-width: none;
}
.dd-evidence-row::-webkit-scrollbar { display: none; }
.dd-evidence-card {
  /* Full row width: exactly one card per frame. The 82%/320px card used to
     let the next card peek in from the right; the arrows/swipe now always
     land on a single, fully-shown card (left-aligned via snap-align). */
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: start;
  border: 1px solid var(--subtle-border);
  border-radius: 20px;
  padding: 16px 15px;
  background: var(--surface, rgba(255,255,255,0.65));
  box-shadow: 0 6px 16px rgba(53,48,42,0.06);
}
.dd-evidence-chip {
  display: inline-block;
  font-family: 'Space Grotesk', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid var(--subtle-border);
}
.dd-evidence-chip.reported   { color: var(--cat-reported);   background: rgba(45,95,58,0.08); }
.dd-evidence-chip.contested  { color: var(--cat-contested);  background: rgba(184,134,11,0.08); }
.dd-evidence-chip.developing { color: var(--cat-developing); background: rgba(91,123,138,0.08); }
.dd-evidence-chip.neutral    { color: var(--outline);        background: rgba(0,0,0,0.04); }
.dd-evidence-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}
.dd-evidence-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(var(--outline-rgb),0.25);
}
.dd-evidence-dot.on { background: var(--primary); }
/* Prev/next arrows for the evidence row: touch devices swipe, so the
   buttons only appear on hover-capable (desktop) pointers, where the
   scrollbar is hidden and swiping is awkward. */
.dd-evidence-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
}
.dd-evidence-nav .dd-evidence-dots { margin: 0; }
.dd-evidence-btn {
  display: none;
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 1px solid var(--subtle-border);
  background: var(--surface, rgba(255,255,255,0.65));
  color: var(--outline);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease-brand), border-color var(--dur-fast) var(--ease-brand);
}
.dd-evidence-btn:hover { color: var(--primary); border-color: var(--primary); }
@media (hover: hover) and (pointer: fine) {
  .dd-evidence-btn { display: inline-flex; }
  .dd-swipe-hint { display: none; }
}
/* The narrative's payoff: boxed like the evidence cards but full-width,
   slate-tinted, and in the vertical flow — a verdict panel, not a card. */
.dd-unresolved-box {
  border: 1px solid rgba(91,123,138,0.25);
  border-radius: 20px;
  padding: 14px 15px;
  background: rgba(91,123,138,0.05);
}

/* ═══════════ GRANULARITY TOGGLE ═══════════ */
.dd-granularity-divider {
  margin: 28px 0 16px;
  position: relative;
}
.dd-divider-line {
  width: 100%;
  height: 1px;
  background: rgba(var(--outline-rgb),0.25);
  margin-bottom: 12px;
}

.dd-granularity-toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.dd-toggle-track {
  width: 56px;
  height: 112px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  position: relative;
  padding: 3px;
  box-shadow: inset 0 2px 4px var(--inset-shadow);
  cursor: pointer;
}
.dd-toggle-handle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 3px;
  top: 3px;
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.dd-toggle-handle.bottom {
  top: calc(100% - 53px);
}

/* Granularity section visibility */
.dd-granularity-hidden { display: none; }
.dd-granularity-visible {
  display: block;
  animation: ddSlideIn var(--dur-slow) var(--ease-brand) both;
}

/* Granularity comparison panel */
.dd-gran-comparison-panel {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--subtle-border);
  padding: 16px;
  margin-bottom: 20px;
}
.dd-gran-comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.dd-gran-comp-row:last-child { margin-bottom: 0; }
.dd-gran-comp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.7;
  width: 28px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.2;
}
.dd-gran-comp-bar {
  flex: 1;
  height: 22px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  background: var(--overlay-bg);
}
.dd-gran-comp-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
}
.dd-gran-comp-seg.reported   { background: var(--cat-reported); }
.dd-gran-comp-seg.contested  { background: var(--cat-contested); }
.dd-gran-comp-seg.developing { background: var(--cat-developing); }
.dd-gran-comp-evs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  width: 30px;
  flex-shrink: 0;
  text-align: right;
}
.dd-gran-comp-evs.yellow { color: var(--band-yellow); }
.dd-gran-comp-evs.green  { color: var(--band-green); }

.dd-gran-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--outline);
  margin-bottom: 12px;
}

/* Granularity story cards */
.dd-gran-card {
  background: rgba(var(--surface-rgb),0.45);
  border: 1px solid var(--subtle-border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  animation: ddSlideIn var(--dur-slow) var(--ease-brand) both;
}
.dd-gran-card:nth-child(1) { animation-delay: 0.05s; }
.dd-gran-card:nth-child(2) { animation-delay: 0.10s; }
.dd-gran-card:nth-child(3) { animation-delay: 0.15s; }
.dd-gran-card:nth-child(4) { animation-delay: 0.20s; }
.dd-gran-card:nth-child(5) { animation-delay: 0.25s; }

.dd-gran-methodology {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--subtle-border);
}

/* Band pip */
.dd-band-pip {
  width: 4px;
  min-height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dd-band-pip.green  { background: var(--band-green); }
.dd-band-pip.yellow { background: var(--band-yellow); }

/* EVS badge */
.dd-evs-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}
.dd-evs-badge.green  { background: rgba(45,95,58,0.18); color: #2D5F3A; }
.dd-evs-badge.yellow { background: rgba(184,134,11,0.14); color: #B8860B; }
html.dark .dd-evs-badge.green  { background: rgba(45,95,58,0.15); color: var(--band-green); }
html.dark .dd-evs-badge.yellow { background: rgba(234,179,8,0.15); color: var(--band-yellow); }

/* ═══════════ DARK MODE: TAILWIND OVERRIDES ═══════════
   Tailwind classes are compiled with hardcoded colors.
   These overrides make them respond to the .dark class.
   ═══════════════════════════════════════════════════════ */

html.dark .bg-primary { background-color: #E5E5E0 !important; }
html.dark .bg-primary\/5 { background-color: rgba(229,229,224,0.05) !important; }
html.dark .bg-primary\/10 { background-color: rgba(229,229,224,0.10) !important; }
html.dark .bg-surface { background-color: #1E1E1C !important; }
html.dark .bg-surface\/40 { background-color: rgba(30,30,28,0.4) !important; }
html.dark .bg-surface\/60 { background-color: rgba(30,30,28,0.6) !important; }
html.dark .bg-background { background-color: #141414 !important; }
html.dark .bg-background\/60 { background-color: rgba(20,20,20,0.6) !important; }
html.dark .bg-background\/80 { background-color: rgba(20,20,20,0.8) !important; }
html.dark .bg-background\/90 { background-color: rgba(20,20,20,0.9) !important; }
html.dark .bg-outline\/10 { background-color: rgba(122,138,125,0.1) !important; }
html.dark .bg-outline\/30 { background-color: rgba(122,138,125,0.3) !important; }
html.dark .bg-black\/5 { background-color: rgba(255,255,255,0.05) !important; }

html.dark .text-primary { color: #E5E5E0 !important; }
html.dark .text-primary\/60 { color: rgba(229,229,224,0.6) !important; }
html.dark .text-primary\/70 { color: rgba(229,229,224,0.7) !important; }
html.dark .text-primary\/75 { color: rgba(229,229,224,0.75) !important; }
html.dark .text-primary\/80 { color: rgba(229,229,224,0.8) !important; }
html.dark .text-primary\/85 { color: rgba(229,229,224,0.85) !important; }
html.dark .text-primary\/90 { color: rgba(229,229,224,0.9) !important; }
html.dark .text-on-primary { color: #141414 !important; }
html.dark .text-outline { color: #7A8A7D !important; }
html.dark .text-outline\/50 { color: rgba(122,138,125,0.5) !important; }
html.dark .text-outline\/70 { color: rgba(122,138,125,0.7) !important; }
html.dark .text-outline\/80 { color: rgba(122,138,125,0.8) !important; }

html.dark .border-outline\/20 { border-color: rgba(122,138,125,0.2) !important; }
html.dark .border-outline\/30 { border-color: rgba(122,138,125,0.3) !important; }
html.dark .border-outline-variant { border-color: rgba(229,229,224,0.2) !important; }
html.dark .border-outline-variant\/10 { border-color: rgba(229,229,224,0.08) !important; }
html.dark .border-outline-variant\/20 { border-color: rgba(229,229,224,0.15) !important; }
html.dark .border-outline-variant\/30 { border-color: rgba(229,229,224,0.2) !important; }
html.dark .border-primary\/20 { border-color: rgba(229,229,224,0.2) !important; }
html.dark .border-primary\/40 { border-color: rgba(229,229,224,0.4) !important; }

html.dark .hover\:bg-surface:hover { background-color: #1E1E1C !important; }
html.dark .hover\:text-primary:hover { color: #E5E5E0 !important; }
html.dark .hover\:border-primary\/50:hover { border-color: rgba(229,229,224,0.5) !important; }

/* Accent emerald adjustments */
html.dark .bg-accent-emerald\/20 { background-color: rgba(45,95,58,0.2) !important; }
html.dark .text-accent-emerald { color: #2D5F3A !important; }
html.dark .border-accent-emerald\/30 { border-color: rgba(45,95,58,0.3) !important; }
html.dark .bg-accent-emerald\/5 { background-color: rgba(45,95,58,0.05) !important; }

/* EVS band colors for dark */
html.dark .text-evs-orange { color: #FB923C !important; }
html.dark .text-evs-red { color: #F87171 !important; }
html.dark .bg-evs-red { background-color: #F87171 !important; }
html.dark .border-evs-red\/30 { border-color: rgba(248,113,113,0.3) !important; }

/* Shadow adjustments */
html.dark .shadow-black\/5 { --tw-shadow-color: rgba(0,0,0,0.15); }
html.dark .shadow-xl { --tw-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.3); }

/* Enter button in dark mode: invert */
html.dark #page-landing .bg-primary {
  background-color: #E5E5E0 !important;
  color: #141414 !important;
}

/* Dark mode: white outline on bottom nav icon boxes */
html.dark .nav-tab {
  border: 1px solid rgba(229,229,224,0.25) !important;
}
html.dark .nav-tab.active {
  border: 1px solid rgba(229,229,224,0.5) !important;
  background: var(--surface) !important;
}

/* Dark mode: light grey outlines on all card surfaces (match audiocast player border) */
html.dark .suite-game-card,
html.dark .game-question-card,
html.dark .game-option,
html.dark .dd-story-card,
html.dark .dd-intro-card,
html.dark .dd-gran-card {
  border-color: rgba(122,138,125,0.25) !important;
}

/* ═══════════ CUSTOM AUDIO PLAYER ═══════════ */
.audio-player-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.audio-transcript summary { list-style: none; }
.audio-transcript summary::-webkit-details-marker { display: none; }
.audio-transcript summary::before { content: '+ '; }
.audio-transcript[open] summary::before { content: '\2212 '; }
.audio-transcript .transcript-body { max-height: 340px; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Audiocast: tall player cards + y-proximity snap fight the wheel — the
   scroller keeps yanking to card starts mid-gesture (operator: "very
   clunky", 2026-08-01). Free scroll here; small-card pages keep the snap. */
#page-audiocast .vitrine-scroll { scroll-snap-type: none; }
#page-audiocast .vitrine-scroll > * { scroll-snap-align: none; }
.audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.audio-play-btn:active { transform: scale(0.90); opacity: 0.85; }
.audio-play-btn .material-symbols-outlined {
  font-size: 20px;
  color: var(--on-primary);
  user-select: none;
}
.audio-progress-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.audio-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(var(--outline-rgb), 0.25);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.audio-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
}
.audio-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--outline);
  letter-spacing: 0.03em;
  flex-wrap: wrap;
  row-gap: 6px;
}
.audio-speed-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
  color: var(--outline);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.audio-speed-label {
  font-size: 8px;
  opacity: 0.72;
}
.audio-speed-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(var(--outline-rgb), 0.35);
  background: var(--bg);
  color: var(--primary);
  border-radius: 999px;
  padding: 2px 16px 2px 7px;
  font: inherit;
  font-size: 9px;
  line-height: 1.2;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--outline) 50%), linear-gradient(135deg, var(--outline) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
html.dark .audio-speed-select {
  background-color: #141414;
}
.audio-volume-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 8px;
  color: var(--outline);
}
.audio-mute-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.audio-mute-btn .material-symbols-outlined {
  font-size: 16px;
}
.audio-volume-slider {
  width: 64px;
  max-width: 20vw;
  accent-color: var(--primary);
  cursor: pointer;
}
html.dark .audio-mute-btn {
  color: #E5E5E0;
}
html.dark .audio-volume-slider {
  accent-color: #E5E5E0;
}
html.dark .audio-play-btn {
  background: #E5E5E0;
}
html.dark .audio-play-btn .material-symbols-outlined {
  color: #141414;
}

/* ═══════════ GAME CARD ENTRANCE ANIMATION ═══════════ */
@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.blast-card-enter {
  animation: slideUpIn 0.25s ease-out both;
}

/* ═══════════ END-OF-GAME SCORE REVEAL ═══════════ */
@keyframes scoreReveal {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
.score-reveal {
  animation: scoreReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ═══════════ SHARE BUTTON ═══════════ */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.share-btn:active { transform: scale(0.95); opacity: 0.85; }
.share-btn .material-symbols-outlined { font-size: 16px; }

/* ═══════════ TOAST NOTIFICATION ═══════════ */
.toast-msg {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--primary);
  color: var(--on-primary);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 300;
  white-space: nowrap;
}
.toast-msg.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── EXPLORE MODE (Information Topography) ─────────────────────────── */
#page-explore { padding: 0; }
#explore-wrap {
  position: fixed; inset: 0; z-index: 40;
  background: #1a1430;
  touch-action: none;
  overflow: hidden;
}
#explore-canvas { position: absolute; inset: 0; }
#explore-canvas canvas { display: block; }
.explore-panel {
  position: absolute; z-index: 43;
  background: rgba(20,16,40,0.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 12px; padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1.45; color: #f3eefe;
}
#explore-meta { left: 12px; right: 12px; top: 80px; text-align: left; color: #cfc6ee; }
#explore-legend { left: 12px; top: 124px; display: flex; flex-wrap: wrap; gap: 10px 14px; max-width: calc(100% - 24px); }
.explore-chip { display: flex; align-items: center; gap: 6px; }
.explore-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#explore-labels { position: absolute; inset: 0; z-index: 42; pointer-events: none; }
.explore-lab {
  position: absolute; transform: translate(-50%,-120%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap; pointer-events: none;
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 7px; border-radius: 8px;
  background: rgba(20,16,40,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.explore-card {
  position: absolute; left: 12px; right: 12px; bottom: 92px; z-index: 44;
  background: rgba(20,16,40,0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 14px 16px 16px;
  color: #f3eefe; transition: transform .28s ease, opacity .28s ease;
}
.explore-card-grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.3); margin: 0 auto 10px;
}
.explore-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  line-height: 1.5; color: #d8d2f2; margin: 0;
}
.explore-hint b { color: #fff; }
.explore-card h3 {
  font-family: 'Eczar', serif; font-weight: 700;
  font-size: 17px; line-height: 1.2; margin: 0 0 6px; color: #fff;
}
.explore-card .ec-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: #a99fd8; margin: 0 0 10px;
}
.explore-card .ec-bars { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.explore-card .ec-bars > span { display: block; height: 100%; }
.explore-card .ec-split {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; color: #b8b0e0; margin-bottom: 10px;
}
.explore-card .ec-sources { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #cfc6ee; line-height: 1.5; }
.explore-card .ec-sources a { color: #8fd0ff; text-decoration: underline; text-underline-offset: 2px; }
.explore-card .ec-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.explore-card .ec-link { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8fd0ff; text-decoration: none; padding: 3px 8px; border: 1px solid rgba(143,208,255,0.35); border-radius: 6px; line-height: 1.3; }
.explore-card .ec-link:hover { background: rgba(143,208,255,0.12); }
.explore-evs {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
}
.explore-evs b { font-size: 20px; color: #fff; }

/* ═══════════════ INTERACTIVE LANDING (daylight glass pill, updated 2026-06-19) ═══════════════ */
/* The Interactive landing always renders in the daylight Ghibli palette, matching the Map, Games, and Video experiences, independent of the app Light/Dark theme. */
/* Interactive landing always shows the daylight sky (#bfe0ef), matching Map, Games, and Video, independent of the app Light/Dark theme. !important and full-viewport fill keep the dark body (#141414) from bleeding through. */
#page-explore { background: #bfe0ef !important; min-height: 100dvh; }
html.dark #page-explore { background: #bfe0ef !important; }
#explore-hub {
  max-width: 560px; margin: 0 auto;
  padding: 120px 22px 140px;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  color: #3a3326;
}
#explore-hub-head { margin-bottom: 26px; }
#explore-hub-kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #5a4a32;
  background: rgba(255,251,240,0.74);
  border: 1px solid rgba(120,98,60,0.18);
  border-radius: 999px;
  padding: 6px 14px; margin-bottom: 14px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#explore-hub-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 12px; color: #7a6747;
}
#explore-hub-sub {
  font-family: 'Eczar', Georgia, serif; font-weight: 600;
  font-size: 22px; line-height: 1.25; margin: 0;
  color: #3a2f1c;
}
/* Glass pill toggle: cream glass shell, amber active button */
#explore-pill {
  display: inline-flex; gap: 4px; padding: 5px;
  background: rgba(255,251,240,0.74);
  border: 1px solid rgba(120,98,60,0.18);
  border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px rgba(120,98,60,0.14);
}
.explore-pill-btn {
  border: none; background: transparent;
  color: #7a6747;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 15px; font-weight: 600;
  padding: 11px 26px; border-radius: 999px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.explore-pill-btn:hover { color: #4a3110; }
.explore-pill-btn.on,
.explore-pill-btn:active {
  background: #e8a24c; color: #4a3110;
  box-shadow: 0 2px 8px rgba(180,120,40,0.3);
}
/* Video pill: coming soon, nonclickable */
.explore-pill-soon {
  display: inline-flex; align-items: center; gap: 7px;
  color: #a8997d; cursor: default; pointer-events: none;
  opacity: 0.85;
}
.explore-pill-soon:hover,
.explore-pill-soon:active { color: #a8997d; background: transparent; box-shadow: none; }
.soon-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8a7a5a; background: rgba(120,98,60,0.12);
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
#explore-hub-cap {
  max-width: 380px; margin-top: 22px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13.5px; line-height: 1.55;
  color: #6a5a3e;
}
/* Full-screen experience stage */
/* Stage always uses the daylight sky behind the experience iframe. */
#explore-stage { position: fixed; inset: 0; z-index: 60; background: #bfe0ef; }
html.dark #explore-stage { background: #bfe0ef; }
#explore-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#explore-back {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px;
  z-index: 62; display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 14px 8px 10px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  color: #fff; background: rgba(20,20,20,0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#explore-back:active { transform: scale(0.97); }
#explore-back .material-symbols-outlined { font-size: 20px; }
/* Project LA anchors its heading top-left, so its back pill sits top-right to
   avoid covering it; topography keeps the default top-left (its own meta/save
   panels live top-right). */
#explore-back.back-right { left: auto; right: 12px; }

/* 3-pill fit: Project LA made the pill wider; keep it inside narrow
   viewports and clear of the caption below */
#explore-pill { max-width: calc(100% - 24px); flex-wrap: nowrap; }
@media (max-width: 480px) {
  .explore-pill-btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 360px) {
  .explore-pill-btn { padding: 9px 10px; font-size: 12px; }
}
#explore-hub-cap { margin-top: 14px; clear: both; }

/* ── DAILY DRILLS per-game palettes (from the game prototypes) ──────────
   Cards keep their DESIGNED colors in both light and dark themes instead
   of inheriting --surface (which went near-black in dark mode). */
.suite-game-card[data-game] {
  background: rgba(229,229,224,0.96);
  border: 1px solid rgba(120,98,60,0.25);
  border-left: 6px solid var(--game-accent, #1A1A1A) !important;
}
html.dark .suite-game-card[data-game] {
  background: rgba(229,229,224,0.96);
  border-left-color: var(--game-accent, #1A1A1A) !important;
}
.suite-game-card[data-game] .text-primary { color: #1A1A1A !important; }
.suite-game-card[data-game] .text-outline { color: #5a4a32 !important; }
.suite-game-card[data-game] .material-symbols-outlined { color: var(--game-accent, #1A1A1A) !important; }
.suite-game-card[data-game="drop"] {
  background: linear-gradient(135deg, #ddedf7 0%, #e9f0dd 48%, #fdf0d2 100%);
}

/* The prebuilt tailwind utilities freeze bg-surface/bg-background to the
   LIGHT theme's literals. Make them theme-aware in every mood (html.dark
   already had ad-hoc overrides; this is the general rule). */
.bg-surface { background-color: var(--surface) !important; }
.bg-background { background-color: var(--bg) !important; }

/* Mode page: the description card and the Paper Trail / Granularity
   launchers are CARDS, so they carry the elevated surface. */
#mode-description-card, .mode-engine-card { background: var(--surface-elevated) !important; }

/* Elevated-card standard (from the deck): reader cards lift LIGHTER than the
   ground in every theme, matching Today's Deck. Chrome (tracks, nav, scrub)
   stays on --surface. */
.story-card, .dd-intro-card, .dd-story-card, .dd-gran-card,
.dd-gran-comparison-panel, .dd-gran-methodology, .audiocast-player {
  background: var(--surface-elevated);
}

/* ═══ INFOGRAPHIC + AUDIOCAST speak the DECK language at every level ═══
   Fonts: DM Serif Display headlines (natural 400 weight, like the deck
   masthead), DM Sans body, Space Grotesk for data/micro labels (JetBrains
   Mono is retired on deck surfaces). Cards: elevated warm-white surfaces.
   The infographic keeps its saturated score bars as the one loud element. */
#page-infographic .font-serif, #page-audiocast .font-serif {
  font-family: 'DM Serif Display', serif; font-weight: 400; letter-spacing: -0.01em;
}
#page-infographic .font-sans, #page-audiocast .font-sans {
  font-family: 'DM Sans', sans-serif;
}
#page-infographic .font-mono, #page-audiocast .font-mono {
  font-family: 'Space Grotesk', monospace;
}
#page-infographic .bg-surface\/40, #page-infographic .bg-surface\/60,
#page-audiocast .bg-surface\/40, #page-audiocast .bg-surface\/60 {
  background-color: var(--surface-elevated) !important;
}
#page-infographic .rounded-xl, #page-infographic .rounded-2xl,
#page-audiocast .rounded-xl, #page-audiocast .rounded-2xl {
  border-radius: 18px;
}

/* ═══════════════ DAILY DECK — matches provided card-deck design ═══════════════ */
/* The deck reads the SITE theme semantically — no private palette. The oat and
   coolblue themes were derived from the original deck design, so in those
   moods this reproduces the deck look; in dark it inherits the Long Form
   dark standard. Cards elevate via --surface-elevated (lighter than ground). */
#page-deck { --dk-paper:var(--bg); --dk-card:var(--surface-elevated); --dk-ink:var(--primary); --dk-sub:var(--outline-strong); --dk-line:var(--subtle-border); --dk-line-strong:var(--border); --dk-on-ink:var(--on-primary); --dk-opt-bg:var(--overlay-bg); --dk-good:var(--accent-emerald); --dk-bad:var(--accent-red); --dk-reported:var(--cat-reported); --dk-contested:var(--cat-contested); --dk-developing:var(--cat-developing); background:var(--bg); min-height:100dvh; }
/* Dark mode: charcoal surfaces with elevation-by-lightness, off-white ink,
   desaturated neon accents. Cards lift by getting lighter, not by shadow. */
html.dark #page-deck .deck-row, html.dark #page-deck .thread-card, html.dark #page-deck .deck-card, html.dark #page-deck .deck-rcd-legend { box-shadow:none; }
#page-deck .deck-wrap { max-width:30rem; margin:0 auto; padding:124px 18px 120px; }
.deck-eyebrow { font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--dk-sub); }
.deck-title { font-family:'DM Serif Display',serif; font-weight:400; font-size:46px; letter-spacing:-0.01em; color:var(--dk-ink); line-height:1.0; margin-top:8px; }
.deck-date { font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:0.1em; color:var(--dk-sub); margin-top:10px; }
.deck-sub { font-family:'DM Sans',sans-serif; font-size:14.5px; line-height:1.55; color:var(--dk-ink); opacity:0.82; margin-top:14px; max-width:90%; }
.deck-menu { margin-top:24px; display:flex; flex-direction:column; gap:11px; }
.deck-row { width:100%; display:flex; align-items:center; gap:13px; text-align:left; background:var(--dk-card); border:1px solid var(--dk-line); border-radius:18px; padding:15px 16px; cursor:pointer; box-shadow:0 6px 16px rgba(53,48,42,0.06); transition:transform 0.12s ease; }
.deck-row:active { transform:scale(0.985); }
.deck-row-dot { width:11px; height:11px; border-radius:999px; flex:none; }
.deck-row-head { flex:1; font-family:'DM Serif Display',serif; font-weight:400; font-size:17px; line-height:1.22; color:var(--dk-ink); }
.deck-row-evs { flex:none; font-family:'Space Grotesk',monospace; font-size:11px; font-weight:700; border-radius:999px; padding:4px 10px; }
.deck-play { width:100%; margin-top:24px; background:var(--dk-ink); color:var(--dk-on-ink); font-family:'DM Sans',sans-serif; font-weight:700; font-size:15px; border:none; border-radius:999px; padding:16px; cursor:pointer; transition:transform 0.12s ease; }
.deck-play:active { transform:scale(0.985); }
.deck-play--alt { margin-top:10px; background:transparent; color:var(--dk-ink); border:1.5px solid var(--dk-ink); }
/* ── Editors' Thread of the Week ────────────────────────────────────────── */
.thread-card { width:100%; text-align:left; margin-top:20px; background:var(--dk-card); border:1px solid var(--dk-line); border-radius:20px; padding:18px 18px 16px; cursor:pointer; box-shadow:0 8px 22px rgba(53,48,42,0.08); transition:transform 0.12s ease; display:block; }
.thread-card:active { transform:scale(0.99); }
.thread-kicker { font-family:'Space Grotesk',monospace; font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--cat-contested); }
.thread-label { font-family:'DM Serif Display',serif; font-weight:400; font-size:23px; line-height:1.14; color:var(--dk-ink); margin-top:6px; }
.thread-sub { font-family:'DM Sans',sans-serif; font-size:12.5px; line-height:1.4; color:var(--dk-sub); margin-top:6px; }
.thread-strip { display:flex; align-items:flex-end; gap:3px; height:48px; margin:14px 0 10px; }
.thread-strip.big { height:64px; gap:5px; margin:18px 0 24px; }
.thread-legend { font-family:'DM Sans',sans-serif; font-size:11.5px; line-height:1.4; color:var(--dk-sub); margin:-14px 0 18px; }
.thread-evs { width:100%; height:100%; display:block; overflow:visible; }
.thread-col { flex:1 1 0; display:flex; flex-direction:column-reverse; height:100%; border-radius:3px; overflow:hidden; min-width:4px; }
.thread-col.scored > span { display:block; width:100%; }
.thread-col.tick { align-self:flex-end; height:5px; background:var(--dk-line); border-radius:3px; opacity:0.8; }
.thread-meta { display:flex; align-items:center; justify-content:space-between; font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:0.04em; color:var(--dk-sub); }
.thread-arrow { color:var(--dk-ink); font-weight:700; }
.thread-latest { font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.45; color:var(--dk-ink); margin-top:10px; padding-top:10px; border-top:1px solid var(--dk-line); }
.thread-timeline { display:flex; flex-direction:column; gap:0; margin:8px 0 22px; }
.thread-row { display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--dk-line); }
.thread-row.scored { background:linear-gradient(90deg, rgba(45,95,58,0.04), transparent 60%); margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px; }
.thread-row-date { flex:none; width:44px; font-family:'Space Grotesk',monospace; font-size:11px; font-weight:700; letter-spacing:0.03em; color:var(--dk-sub); padding-top:2px; }
.thread-row-head { font-family:'DM Serif Display',serif; font-weight:400; font-size:16px; line-height:1.24; color:var(--dk-ink); }
a.thread-row-head { display:block; text-decoration:none; }
a.thread-row-head:hover { text-decoration:underline; }
.thread-row-src { font-family:'Space Grotesk',monospace; font-size:10.5px; letter-spacing:0.03em; color:var(--dk-sub); margin-top:3px; }
.thread-row-rcd { display:block; font-family:'Space Grotesk',monospace; font-size:11px; color:var(--dk-sub); margin-top:6px; }
.thread-row-tick { display:block; font-family:'Space Grotesk',monospace; font-size:10.5px; letter-spacing:0.03em; color:var(--dk-sub); opacity:0.7; margin-top:5px; }
.thread-row-event { font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.45; color:var(--dk-ink); margin-top:7px; }
.deck-card { border:1px solid var(--dk-line); border-radius:24px; padding:30px 24px; min-height:344px; box-shadow:0 14px 40px rgba(53,48,42,0.10); cursor:pointer; }
.deck-chip { display:inline-block; font-family:'Space Grotesk',monospace; font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; border-radius:999px; padding:5px 11px; }
.deck-cat { font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--dk-sub); margin-top:16px; }
.deck-headline { font-family:'DM Serif Display',serif; font-weight:400; font-size:32px; line-height:1.1; letter-spacing:-0.01em; color:var(--dk-ink); margin-top:10px; }
.deck-band { font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; letter-spacing:0.06em; margin-top:20px; }
.deck-status { display:flex; align-items:center; gap:7px; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-top:20px; }
.deck-status-dot { width:9px; height:9px; border-radius:999px; flex:none; }
.deck-rcdbar { display:flex; width:100%; height:4px; border-radius:999px; overflow:hidden; margin-top:9px; background:var(--dk-line); }
.deck-rcdbar span { height:100%; display:block; }
.deck-rcd { font-family:'Space Grotesk',monospace; font-size:11px; color:var(--dk-sub); margin-top:7px; }
.deck-rcd-legend { margin-top:14px; padding:13px 15px; background:var(--dk-card); border:1px solid var(--dk-line); border-radius:14px; display:flex; flex-direction:column; gap:8px; }
.deck-rcd-legend-row { display:flex; flex-direction:column; gap:1px; }
.deck-rcd-key { font-family:'Space Grotesk',monospace; font-size:11px; font-weight:700; letter-spacing:0.04em; }
.deck-rcd-def { font-family:'DM Sans',sans-serif; font-size:12.5px; line-height:1.4; color:var(--dk-ink); opacity:0.78; }
.deck-label { font-family:'Space Grotesk',monospace; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--dk-sub); }
.deck-body { font-family:'DM Sans',sans-serif; font-size:16.5px; line-height:1.6; color:var(--dk-ink); margin-top:14px; text-wrap:pretty; }
.deck-links { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.deck-link { display:block; font-family:'Space Grotesk',monospace; font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--dk-ink); background:rgba(255,255,255,0.65); border:1px solid var(--dk-line); border-radius:14px; padding:14px 16px; text-decoration:none; transition:transform 0.1s ease; }
.deck-link:active { transform:scale(0.985); }
.deck-links-note { font-family:'Space Grotesk',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dk-sub); margin-top:10px; }
.deck-q { font-family:'DM Serif Display',serif; font-weight:400; font-size:25px; line-height:1.2; color:var(--dk-ink); margin-top:14px; }
.deck-opts { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.deck-opt { width:100%; text-align:left; font-family:'Space Grotesk',monospace; font-size:13px; font-weight:600; letter-spacing:0.04em; color:var(--dk-ink); background:var(--dk-opt-bg); border:1px solid var(--dk-line); border-radius:14px; padding:14px 16px; cursor:pointer; transition:transform 0.1s ease; }
.deck-opt:active { transform:scale(0.985); }
.deck-opt:disabled { cursor:default; opacity:0.6; }
.deck-opt.right { border-color:var(--dk-good); color:var(--dk-good); opacity:1; background:var(--dk-opt-bg); }
.deck-opt.wrong { border-color:var(--dk-bad); color:var(--dk-bad); opacity:1; }
.deck-explain { font-family:'DM Sans',sans-serif; font-size:13.5px; line-height:1.5; color:var(--dk-ink); opacity:0.82; margin-top:15px; min-height:1px; }
.deck-dots { display:flex; justify-content:center; gap:7px; margin-top:20px; }
.deck-dot { width:7px; height:7px; border-radius:999px; background:var(--dk-line); }
.deck-dot.on { background:var(--dk-ink); }
.deck-nav { display:flex; gap:9px; margin-top:18px; }
.deck-btn { flex:1; font-family:'Space Grotesk',monospace; font-size:12px; font-weight:700; letter-spacing:0.02em; color:var(--dk-ink); background:transparent; border:1.5px solid var(--dk-line-strong); border-radius:999px; padding:13px 6px; cursor:pointer; transition:transform 0.1s ease; }
.deck-btn.primary { background:var(--dk-ink); color:var(--dk-on-ink); border-color:var(--dk-ink); }

/* ── ACCESSIBILITY: keyboard focus + reduced motion ──────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary, #1A1A1A);
  outline-offset: 2px;
  border-radius: 4px;
}
html.dark :focus-visible { outline-color: var(--on-primary, #E5E5E0); }

.deck-btn:active { transform:scale(0.985); }

/* ── COMMERCIAL SPLASH: first-visit-only video hero ──────────────────────
   Mounted by JS only when no prior-visit flag is set (see app.js). Values
   match the approved design (Splash.dc.html) exactly. */
.commercial-splash {
  position: fixed; inset: 0; z-index: 9999;
  overflow: hidden;
  background: #1E2A3A; /* Cool Blue primary — matches html.coolblue */
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.7s ease, transform 0.7s ease;
  opacity: 1; transform: scale(1);
}
.commercial-splash.dismissed {
  opacity: 0; transform: scale(1.04);
  pointer-events: none;
}
.commercial-splash-bg {
  position: absolute; inset: -8%;
  width: 116%; height: 116%;
  object-fit: cover;
  filter: blur(46px) brightness(0.42) saturate(1.25);
  transform: scale(1.05);
  pointer-events: none;
}
.commercial-splash-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,42,58,0.45), rgba(30,42,58,0.2) 30%, rgba(30,42,58,0.6));
  pointer-events: none;
}
.commercial-splash-fg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 100%; max-height: 100vh;
  width: auto; max-width: 100vw;
  object-fit: contain;
  box-shadow: 0 40px 120px rgba(30,42,58,0.65);
}
.commercial-skip-btn {
  position: absolute; top: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border: 1px solid rgba(211,223,233,0.35); border-radius: 999px;
  background: rgba(30,42,58,0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #EAF1F7; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.3s ease, background 0.2s ease, border-color 0.2s ease;
}
.commercial-skip-btn:hover { background: rgba(211,223,233,0.22); border-color: rgba(211,223,233,0.5); }
.commercial-skip-arrow { font-size: 15px; line-height: 1; opacity: 0.85; }
.commercial-mute-btn {
  position: absolute; bottom: 26px; left: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(211,223,233,0.3); border-radius: 999px;
  background: rgba(30,42,58,0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #EAF1F7; font-family: 'Space Grotesk', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.2s ease;
}
.commercial-mute-btn:hover { background: rgba(211,223,233,0.2); }
.commercial-mute-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(234,241,247,0.4);
  transition: background 0.2s ease;
}
.commercial-mute-dot.unmuted { background: #6fbf8b; /* cool-scheme green */ }
.commercial-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(234,241,247,0.18);
}
.commercial-progress-fill {
  height: 100%; width: 0%;
  background: #EAF1F7;
  transition: width 0.2s linear;
}
.commercial-firstvisit {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  padding: 9px 16px;
  border: 1px solid rgba(211,223,233,0.3); border-radius: 999px;
  background: rgba(30,42,58,0.5);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #EAF1F7; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap; pointer-events: none;
  animation: firstvisit-fade 9s ease forwards;
}
@keyframes firstvisit-fade { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 560px) { .commercial-firstvisit { white-space: normal; text-align: center; max-width: 78vw; bottom: 64px; } }

/* ── Offspeed Ventures mark (About) ────────────────────────────────────────
   Logo redesign variant 2b (offset dot grid). Rendered inline as SVG with no
   white containing box, so the strokes sit directly on the page surface and
   must carry themselves in BOTH themes. The two darkest brand strokes
   (--ov-4/--ov-5, oklch L=0.45/0.30) vanish against the dark surface, so they
   are lifted in dark mode; the three warm strokes read on both and are left
   at their brand values. The wordmark inherits the theme's primary text
   colour rather than the design's hard-coded #191919. */
.offspeed-mark {
  --ov-1: oklch(0.8 0.14 85);
  --ov-2: oklch(0.62 0.2 45);
  --ov-3: oklch(0.68 0.22 40);
  --ov-4: oklch(0.45 0.1 50);
  --ov-5: oklch(0.3 0.08 50);
}
html.dark .offspeed-mark {
  --ov-4: oklch(0.72 0.14 50);
  --ov-5: oklch(0.66 0.11 55);
}
.offspeed-word {
  font: 700 20px/1.1 'Space Grotesk', Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  font-variant: small-caps;
  color: var(--primary, #191919);
}

/* ═══════════════════════════════════════════════════════════════════════
   VITRINE — quiet-luxury enclosure for the six reader sections
   Each reader page becomes a fixed head (eyebrow / h2 / date / intro) plus
   ONE inset, scroll-snapping scroll box. Native page scroll is replaced by
   an internal scroller so the topbar/nav never scroll under content. A
   miniature brand pill-and-dot scrub (JS overlay, initVitrinescrubs) rides
   the shell as a scroll indicator (pointer-events:none — never a control).
   ═══════════════════════════════════════════════════════════════════════ */
.vitrine-page  { height:100vh; height:100dvh; display:flex; flex-direction:column;
                 padding-top:var(--vitrine-pad-top); padding-bottom:var(--vitrine-pad-bottom); }
/* padding-top reserves the old eyebrow slot for the fixed "‹ Menu" pill
   (top:118px, ~19px tall) so it never overlaps the section h2 — the deleted
   EVE ENGINE eyebrow's space now carries navigation instead of decoration. */
.vitrine-head  { flex:none; padding-top:28px; }
.vitrine-shell { position:relative; flex:1 1 auto; min-height:0;
                 border:1px solid var(--subtle-border); border-radius:var(--vitrine-radius);
                 background:var(--vitrine-bg); box-shadow:inset 0 1px 4px var(--inset-shadow); }
.vitrine-scroll{ height:100%; overflow-y:auto; overscroll-behavior:contain;
                 -webkit-overflow-scrolling:touch; scroll-snap-type:y proximity;
                 padding:14px 14px var(--vitrine-fade); scrollbar-width:none;
                 -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--vitrine-fade),
                   #000 calc(100% - var(--vitrine-fade)), transparent 100%);
                 mask-image:linear-gradient(to bottom, transparent 0, #000 var(--vitrine-fade),
                   #000 calc(100% - var(--vitrine-fade)), transparent 100%); }
.vitrine-scroll::-webkit-scrollbar { display:none; }
.vitrine-scroll > * { scroll-snap-align:start; scroll-margin-top:8px; }

/* Brand scrub — stationary pill track on the shell (not the scroller, so the
   fade mask never dims it) with a --primary dot whose translateY maps scroll
   fraction. Fades in on scroll, out ~800ms after idle; .hidden when content
   fits. Indicator only. */
.vitrine-scrub {
  position:absolute; top:12px; right:6px; width:10px; height:48px;
  border-radius:999px; border:1px solid rgba(var(--outline-rgb),0.45);
  background:rgba(var(--surface-rgb),0.6);
  pointer-events:none; opacity:0; z-index:2;
  transition:opacity var(--dur-base) var(--ease-brand);
}
.vitrine-scrub.is-scrolling { opacity:1; }
.vitrine-scrub-dot {
  position:absolute; left:50%; top:2px; width:6px; height:6px; margin-left:-3px;
  border-radius:50%; background:var(--primary);
  transition:transform var(--dur-fast) var(--ease-brand);
}

/* Border scrub — top-level reader cards drop their outer box outline (kept as
   transparent so internal spacing is unchanged). ID-scoped selectors
   out-specify Tailwind single-class border utilities and the .story-card /
   .dd-gran-card rules; audiocast player cards carry an explicit .vitrine-card
   (scoped under .vitrine-scroll so it wins order-independently, while inline
   accent left-borders are preserved). */
#briefing-stories > *,
#deepdive-stories > *,
#infographic-tiers > *,
#papertrail-cards > *,
#gran-page-cards > * { border-color:transparent; }
.vitrine-scroll .vitrine-card { border-color:transparent; }
/* Individual granularity cards also snap (they sit inside the granularity
   scroller nested under #gran-page-cards, not as direct scroller children). */
#gran-page-cards > * { scroll-snap-align:start; }

/* AA micro-label contrast — kept micro-labels inside the six vitrine
   sections use --outline-strong instead of --outline (2.6:1 in the light
   detent, below AA) so they clear 4.5:1 against --bg in every theme. */
.label-quiet { color: var(--outline-strong); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .vitrine-scroll { scroll-snap-type:none; }
}

/* MORE menu: bottom sheet anchored above the nav bar */
.more-menu { position:fixed; right:12px; bottom:86px; z-index:60; min-width:250px;
  background:var(--surface-elevated); border:1px solid var(--card-border);
  border-radius:16px; padding:6px; box-shadow:0 12px 32px rgba(0,0,0,0.18); }
.more-menu.hidden { display:none; }
.more-menu-item { display:flex; align-items:center; gap:12px; width:100%;
  background:transparent; border:none; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:12px; color:var(--primary); font:inherit; }
.more-menu-item:hover, .more-menu-item:focus-visible { background:var(--overlay-bg); }
.more-menu-item .material-symbols-outlined { font-size:20px; color:var(--outline-strong); }
.more-menu-text { display:flex; flex-direction:column; gap:1px; }
.more-menu-title { font-family:'DM Serif Display',serif; font-size:15px; }
.more-menu-sub { font-family:'DM Sans',sans-serif; font-size:11px; color:var(--outline-strong); }
/* Held-back destination: listed so its absence isn't read as a bug, but inert
   (no hover, no pointer) so it never reads as a link that failed. */
.more-menu-item.is-soon { cursor:default; opacity:0.55; pointer-events:none; }
.more-menu-item.is-soon:hover, .more-menu-item.is-soon:focus-visible { background:transparent; }

/* ═══════════ RCD STATUS CLASSES (status word drives color, not the retired
   EVS band). Three colors only: reported green, contested amber,
   developing slate. ═══════════ */
.dd-band-pip.reported   { background: var(--cat-reported); }
.dd-band-pip.contested  { background: var(--cat-contested); }
.dd-band-pip.developing { background: var(--cat-developing); }
.dd-evs-badge.reported   { background: rgba(45,95,58,0.14);   color: var(--cat-reported); }
.dd-evs-badge.contested  { background: rgba(184,134,11,0.14); color: var(--cat-contested); }
.dd-evs-badge.developing { background: rgba(91,123,138,0.14); color: var(--cat-developing); }
.dd-gran-comp-evs.reported   { color: var(--cat-reported); }
.dd-gran-comp-evs.contested  { color: var(--cat-contested); }
.dd-gran-comp-evs.developing { color: var(--cat-developing); }
html.dark .dd-evs-badge.reported   { background: rgba(45,95,58,0.18); }
html.dark .dd-evs-badge.contested  { background: rgba(184,134,11,0.18); }
html.dark .dd-evs-badge.developing { background: rgba(91,123,138,0.18); }