/* ============================================
   THEME OVERLAY — light/dark + responsive polish
   Loaded AFTER css/styles.css. Touches presentation
   only; never reorganises content or wording.
   ============================================ */

/* ── Semantic tokens ───────────────────────────── */
:root {
  --pm-bg:            #1f1f1f;
  --pm-bg-card:       #242424;
  --pm-bg-elevated:   #2a2a2a;
  --pm-fg:            #ffffff;
  --pm-fg-muted:      rgba(237, 230, 221, 0.72);
  --pm-fg-faint:      rgba(237, 230, 221, 0.50);
  --pm-fg-dim:        rgba(237, 230, 221, 0.30);
  --pm-border:        rgba(237, 230, 221, 0.08);
  --pm-border-strong: rgba(237, 230, 221, 0.18);
  --pm-rule:          rgba(237, 230, 221, 0.06);
  --pm-nav-bg:        rgba(31, 31, 31, 0.92);
  --pm-nav-bg-strong: rgba(31, 31, 31, 0.96);
  --pm-input-bg:      rgba(255, 255, 255, 0.04);
  --pm-shadow-card:   0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 0 0 1px var(--pm-border);

  /* Chart-specific tokens read by the JS Chart.js theme bridge. */
  --pm-chart-text:        rgba(237, 230, 221, 0.78);
  --pm-chart-text-strong: #ffffff;
  --pm-chart-grid:        rgba(237, 230, 221, 0.10);
  --pm-chart-tip-bg:      rgba(31, 31, 31, 0.96);
  --pm-chart-tip-fg:      #ffffff;
  --pm-chart-tip-border:  rgba(237, 230, 221, 0.18);
}

[data-theme="light"] {
  --pm-bg:            #ede6dd;
  --pm-bg-card:       #f5f0e8;
  --pm-bg-elevated:   #fbf7f0;
  --pm-fg:            #1f1f1f;
  --pm-fg-muted:      rgba(31, 31, 31, 0.74);
  --pm-fg-faint:      rgba(31, 31, 31, 0.55);
  --pm-fg-dim:        rgba(31, 31, 31, 0.32);
  --pm-border:        rgba(31, 31, 31, 0.12);
  --pm-border-strong: rgba(31, 31, 31, 0.24);
  --pm-rule:          rgba(31, 31, 31, 0.08);
  --pm-nav-bg:        rgba(237, 230, 221, 0.92);
  --pm-nav-bg-strong: rgba(237, 230, 221, 0.96);
  --pm-input-bg:      rgba(31, 31, 31, 0.05);
  --pm-shadow-card:   0 1px 0 rgba(255, 255, 255, 0.50) inset, 0 0 0 1px var(--pm-border);

  /* Light-mode chart palette — solid dark text + visible grid on cream bg. */
  --pm-chart-text:        rgba(31, 31, 31, 0.82);
  --pm-chart-text-strong: #1f1f1f;
  --pm-chart-grid:        rgba(31, 31, 31, 0.12);
  --pm-chart-tip-bg:      rgba(31, 31, 31, 0.96);
  --pm-chart-tip-fg:      #ffffff;
  --pm-chart-tip-border:  rgba(31, 31, 31, 0.20);
}

/* ── Base flip ─────────────────────────────────── */
html { color-scheme: dark; }
[data-theme="light"] html,
html[data-theme="light"] { color-scheme: light; }

body {
  background-color: var(--pm-bg);
  color: var(--pm-fg);
  transition: background-color 240ms ease, color 240ms ease;
}

h1, h2, h3, h4,
.chart-title, .innovation-name, .strategy-name,
.dash-section-title, .dash-subsection-title,
.widget-stat-value, .pipe-label,
.dash-explainer strong, .dash-table,
.table-section-heading,
.parlay-name, .parlay-prob-label,
.sub-name, .arch-name,
.mapper-bar .bar-label,
.footer-brand,
.view-tab.active {
  color: var(--pm-fg);
}
/* .view-tab.active keeps a red pill in dark; in light keep red bg + white fg.
   The rule above sets text to fg in light mode, so re-pin to white for the
   coloured-button case. */
.view-tab.active { background: var(--bm-red); border-color: var(--bm-red); color: #fff; }

p, li { color: inherit; }

a { color: var(--pm-fg); text-decoration-color: var(--pm-fg-faint); }
a:hover { text-decoration-color: var(--pm-fg); }
strong, b { color: var(--pm-fg); }

/* ── Reading progress + nav ────────────────────── */
.reading-progress { background: var(--pm-fg-muted); }
.report-nav { background: var(--pm-nav-bg); border-bottom: 1px solid var(--pm-border); }
.view-bar  { background: var(--pm-nav-bg-strong); border-bottom: 1px solid var(--pm-border); }

.nav-links a { color: var(--pm-fg-faint); }
.nav-links a:hover, .nav-links a.active { color: var(--pm-fg); }
.nav-links a.active { background: var(--pm-input-bg); }

[data-theme="light"] .nav-logo { filter: invert(1) hue-rotate(180deg); }

/* ── Hero / labels ─────────────────────────────── */
.hero-eyebrow,
.section-label,
.dash-subsection-title {
  color: var(--pm-fg);
  background: var(--pm-input-bg);
  border: 1px solid var(--pm-border);
}
.hero-meta { color: var(--pm-fg-faint); border-top-color: var(--pm-rule); }

/* ── Article bullets ───────────────────────────── */
.article ul > li::before { background: var(--bm-red); }

/* ── Charts ────────────────────────────────────── */
.chart-container,
.dash-card,
.dash-explainer,
.scorecard-table,
.widget-stat-card,
.lifecycle-step {
  background: var(--pm-bg-card);
  border-color: var(--pm-border);
  box-shadow: var(--pm-shadow-card);
}
.chart-desc, .chart-caption,
.dash-section-desc, .dash-explainer,
.scenario-card ol li,
.widget-label, .widget-stat-label, .widget-stat-detail,
.dash-section-title span,
.innovation-example {
  color: var(--pm-fg-muted);
}

.chart-btn {
  border: 1px solid var(--pm-border-strong);
  color: var(--pm-fg-muted);
  background: transparent;
}
.chart-btn:hover { color: var(--pm-fg); border-color: var(--pm-fg); }
.chart-btn.active { background: var(--bm-blue); border-color: var(--bm-blue); color: #fff; }

.dash-equation {
  color: var(--pm-fg);
  background: var(--pm-input-bg);
  border-left-color: var(--bm-gold);
}

/* ── Tables ────────────────────────────────────── */
.table-wrap { border-color: var(--pm-border); }
.data-table th {
  color: var(--pm-fg-faint);
  background: var(--pm-input-bg);
  border-bottom-color: var(--pm-border-strong);
}
.data-table td { color: var(--pm-fg-muted); border-bottom-color: var(--pm-rule); }
.data-table tr:hover td { background: var(--pm-input-bg); }
.dash-table { color: var(--pm-fg); }
.dash-table th { color: var(--pm-fg-muted); background: var(--pm-bg-card); border-bottom-color: var(--pm-border-strong); }
.dash-table td { border-bottom-color: var(--pm-rule); }
.dash-table tr:hover td { background: var(--pm-input-bg); }

/* ── Innovation accordions ─────────────────────── */
.innovation-item { border-color: var(--pm-border); }
.innovation-item:hover { border-color: var(--pm-border-strong); }
.innovation-header,
.innovation-body { background: var(--pm-bg-card); }
.innovation-toggle { color: var(--pm-fg-dim); }
.innovation-example { border-left-color: var(--pm-rule); }

/* ── Scenario cards keep their tinted backgrounds in dark;
       in light mode boost contrast slightly. ────── */
[data-theme="light"] .scenario-card.base { background: rgba(37, 63, 88, 0.10); border-color: rgba(37, 63, 88, 0.30); }
[data-theme="light"] .scenario-card.bull { background: rgba(128, 167, 106, 0.12); border-color: rgba(128, 167, 106, 0.35); }
[data-theme="light"] .scenario-card.bear { background: rgba(170, 73, 70, 0.10); border-color: rgba(170, 73, 70, 0.35); }
[data-theme="light"] .scenario-card.base .scenario-label { color: var(--bm-blue); }

/* ── Project tags (Polymarket / Kalshi / TradFi / neutral) ── */
[data-theme="light"] .project-tag.poly {
  background: rgba(37, 63, 88, 0.10);
  color: var(--bm-blue);
}
[data-theme="light"] .project-tag.kalshi {
  background: rgba(128, 167, 106, 0.16);
  color: #2e6b3e;
}
[data-theme="light"] .project-tag.tradfi {
  background: rgba(170, 73, 70, 0.12);
  color: var(--bm-red);
}
[data-theme="light"] .project-tag.neutral {
  background: rgba(31, 31, 31, 0.08);
  color: var(--pm-fg);
}

/* ── Scorecard dots: the N/A grey was cream-25% which vanishes on cream. ── */
[data-theme="light"] .sc-grey { color: rgba(31, 31, 31, 0.55); }

/* ── Separator ─────────────────────────────────── */
.separator { border-top-color: var(--pm-rule); }

/* ── View tabs ─────────────────────────────────── */
.view-tab {
  color: var(--pm-fg-faint);
  border-color: var(--pm-border-strong);
}
.view-tab:hover { color: var(--pm-fg); border-color: var(--pm-fg); }
.view-tab.active { background: var(--bm-red); border-color: var(--bm-red); color: #fff; }

/* ── Theme toggle button ───────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid var(--pm-border-strong);
  background: transparent;
  color: var(--pm-fg-muted);
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.theme-toggle:hover { color: var(--pm-fg); border-color: var(--pm-fg); }
.theme-toggle:focus-visible { outline: 2px solid var(--bm-gold); outline-offset: 2px; }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Dashboard typography — bring text up to report body size ── */
.dashboard {
  font-size: 1rem;             /* ~17px to match the report column */
  line-height: 1.75;
}
.dashboard p { font-size: 1rem; line-height: 1.75; }
.dash-section-title { font-size: 1.6rem; }
.dash-section-title span { font-size: 0.82rem; }
.dash-section-desc { font-size: 1rem; line-height: 1.6; color: var(--pm-fg-muted); }
.dash-subsection-title { font-size: 0.9rem; padding: 5px 14px; }
.dash-explainer {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--pm-fg);
  padding: 22px 26px;
}
.dash-explainer p { font-size: 0.98rem; line-height: 1.7; margin-bottom: 14px; }
.dash-explainer p:last-child { margin-bottom: 0; }
.dash-explainer li { font-size: 0.98rem; line-height: 1.6; margin-bottom: 6px; }
.dash-equation { font-size: 1rem; padding: 12px 18px; }
.dash-card .chart-title { font-size: 1rem; margin-bottom: 14px; }
.dash-card .chart-desc  { font-size: 0.92rem; color: var(--pm-fg-muted); line-height: 1.55; margin-bottom: 12px; }
.dash-card .chart-caption { font-size: 0.92rem; color: var(--pm-fg-muted); line-height: 1.6; margin-top: 14px; }
.dash-card .chart-wrapper { height: 320px; }
.dash-card { padding: 24px; }
.dash-table { font-size: 0.9rem; }
.dash-table th { font-size: 0.8rem; }

/* ── Look-and-feel polish (presentation only) ──── */
body { font-feature-settings: "ss01", "cv11"; }

h1 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2 { letter-spacing: -0.02em; text-wrap: pretty; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); }
p, .article li { text-wrap: pretty; }

.chart-container,
.dash-card,
.dash-explainer { border-radius: 12px; }
.scenario-card  { border-radius: 10px; }
.innovation-item { border-radius: 10px; }
.callout { border-radius: 0 8px 8px 0; }

::selection { background: var(--bm-gold); color: #1f1f1f; }

/* Smooth chart canvas redraw on theme flip */
.chart-wrapper canvas { transition: filter 200ms ease; }

/* ── Mobile responsive — across report + dashboard */

/* Page-level overflow guard: a single oversize element used to push the
   whole viewport sideways on narrow screens. Clip horizontally; tables
   and other intentionally wide blocks have their own internal scroll.
   Container max-width caps are mobile-only — desktop keeps the editorial
   680/900/1100 column tokens from styles.css. */
html, body { overflow-x: clip; }

@media (max-width: 920px) {
  /* The wide-breakout pattern (transform translateX(-50%)) overshoots the
     viewport on every screen narrower than the wide-width token. Force
     in-flow on the entire tablet/mobile range. */
  .article .wide,
  .wide {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
  .wide.fade-in,
  .wide.fade-in.visible { transform: none !important; }
}

@media (max-width: 768px) {
  /* Top row stays brand + view tabs + toggle. Section anchors flow onto a
     second, horizontally scrollable row so chapter nav exists on mobile. */
  .report-nav { background: var(--pm-nav-bg-strong); }
  .report-nav-inner {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 12px 0;
    height: auto;
  }
  .nav-brand .nav-logo { height: 16px; }
  .nav-view-tabs { margin-left: auto; }
  .report-nav .view-tabs { display: flex; }   /* re-enable; original hid them */
  .view-tab { font-size: 0.72rem; padding: 5px 10px; }
  .theme-toggle { width: 30px; height: 28px; margin-left: 6px; }

  /* Section anchors: visible, second row, swipeable chip strip. */
  .report-nav .nav-links {
    display: flex !important;
    order: 99;
    flex: 1 0 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 8px 0 8px;
    margin-top: 4px;
    border-top: 1px solid var(--pm-border);
  }
  .report-nav .nav-links::-webkit-scrollbar { display: none; }
  .report-nav .nav-links a {
    flex-shrink: 0;
    font-size: 0.74rem;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--pm-border-strong);
    color: var(--pm-fg-muted);
    background: transparent;
    white-space: nowrap;
  }
  .report-nav .nav-links a.active,
  .report-nav .nav-links a:hover {
    color: var(--pm-fg);
    border-color: var(--pm-fg);
    background: var(--pm-input-bg);
  }
  /* Fade hints that there's more to scroll. */
  .report-nav .nav-links {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .view-bar { padding: 10px 14px; gap: 8px; }

  .hero { padding: 90px 18px 18px; }

  /* Cards must fit the viewport regardless of what's inside. */
  .chart-container,
  .dash-card,
  .dash-explainer,
  .scenario-card,
  .innovation-item,
  .widget-stat-card {
    max-width: 100%;
    box-sizing: border-box;
  }
  .chart-container { padding: 14px; margin: 28px 0; }
  .chart-header { gap: 8px; }
  .chart-controls { flex-wrap: wrap; }

  /* Chart canvases are sized by their wrapper width. Pin both. */
  .chart-wrapper { width: 100%; max-width: 100%; overflow: hidden; }
  .chart-wrapper canvas { max-width: 100% !important; height: auto; }

  /* Tables: keep them scrollable horizontally inside their wrap, but the
     wrap itself never busts out of the viewport. */
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.82rem;
  }
  .data-table th, .data-table td { padding: 10px 10px; }
  .data-table { min-width: 520px; }   /* preserves column layout; user scrolls */

  .dashboard { padding: 64px 16px 48px; font-size: 0.95rem; line-height: 1.7; }
  .dash-grid { grid-template-columns: 1fr; gap: 16px; }
  .dash-card { padding: 18px; }
  .dash-card .chart-wrapper { height: 260px; }
  .dash-card .chart-title { font-size: 0.98rem; }
  .dash-card .chart-desc, .dash-card .chart-caption { font-size: 0.88rem; }
  .dash-section-title { font-size: 1.25rem; }
  .dash-section-desc { font-size: 0.95rem; }
  .dash-explainer { padding: 18px 20px; font-size: 0.95rem; }
  .dash-explainer p, .dash-explainer li { font-size: 0.95rem; line-height: 1.65; }

  .scenario-card { padding: 18px; }
  .innovation-header { padding: 14px 16px; }
  .innovation-body { padding: 0 16px 16px; }
}

@media (max-width: 480px) {
  /* keep the chip strip visible even on the smallest phones */
  .hero { padding-top: 96px; padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .view-tab { font-size: 0.68rem; padding: 5px 9px; }
  .dash-card .chart-wrapper { height: 220px; }
  .article { padding: 0 16px; }
  .chart-container { padding: 12px; }
  /* Allow charts to be a touch narrower than the card padding box. */
  .chart-wrapper { height: 240px; }
  .data-table { min-width: 460px; }
  /* Cost calculator + fee anatomy widget inline grids — single column. */
  #rpt-widget-fees > div > div[style*="grid-template-columns"],
  .chart-container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body, .chart-wrapper canvas { transition: none; }
  .fade-in { transition: none; }
}