/* ============================================================
 * styles.css
 * Generated from index.html on 2026-05-17T22:23:27.263Z.
 * Sources:
 *   1. @import directives from STYLES const (lines 655-656 of index.html) — must be first per CSS spec
 *   2. Head <style> block (lines 30-133)
 *   3. STYLES const body (lines 657-941)
 * Future automations should NOT edit this file directly.
 * ============================================================ */

/* === @imports (must be at top of stylesheet) === */
@import url('https://rsms.me/inter/inter.css');
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* === from head <style> in index.html === */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    :root, [data-theme="dark"] {
      --bg: #0a0c14;
      --surface: #141823;
      --surface-2: #1c2030;
      --surface-3: #262b3a;
      --text-hi: #ecedf0;
      --text-body: #a8acb4;
      --text-mid: #7d818a;
      --text-dim: #828a99;
      --border: rgba(255,255,255,.075);
      --border-strong: rgba(255,255,255,.13);
      --raise-1: rgba(255,255,255,.03);
      --raise-2: rgba(255,255,255,.05);
      --raise-3: rgba(255,255,255,.075);
      --raise-4: rgba(255,255,255,.12);
      --scrim: rgba(4,6,12,.65);
      --header-bg: rgba(10,12,20,.85);
      --card-bg: rgba(255,255,255,.038);
      --card-bg-hover: rgba(255,255,255,.062);
      --inset-hi: rgba(255,255,255,.055);
      --map-bg: #060810;
      --shadow-card: 0 1px 0 var(--inset-hi) inset, 0 4px 14px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.42);
      --shadow-card-hover: 0 1px 0 var(--inset-hi) inset, 0 8px 22px rgba(0,0,0,.40), 0 22px 48px rgba(0,0,0,.55);
      --shadow-drawer: -24px 0 60px rgba(0,0,0,.55);
      --scroll-thumb: rgba(255,255,255,.10);
      --scroll-thumb-hover: rgba(255,255,255,.20);
      --focus-ring: rgba(99,102,241,.65);
      --pulse: rgba(99,102,241,.18);
      --bg-glow: rgba(99,102,241,.06);
      /* Theme-aware accent colors */
      --c-amber:        #f59e0b;
      --c-danger:       #f43f5e;  /* reserved for real alerts: LIVE pulse, breaking ticker, severity:extreme, negative deltas */
      --c-iran:         #d97757;  /* Epic Fury pillar — warm rust, distinct from alert-red and energy-amber */
      --c-blue:         #6366f1;  /* generic info accent (previously US-China pillar) */
      --c-brics:        #b91c3c;  /* US-BRICS Rivalry pillar — deep crimson; distinct from alert-red (--c-danger) and Iran-rust (--c-iran) */
      --c-brics-text:   #f07088;  /* lighter crimson for text/labels on dark bg — ≥4.5:1 contrast; fills/borders keep --c-brics */
      --c-ukraine-war:  #8d8c4f;  /* Russia-Ukraine kinetic war — muted olive/khaki; visually distinct from coalition arc */
      --c-violet:       #a78bfa;
      --c-cyan:         #22d3ee;  /* diesel series — distinct from indigo Ohio (--c-blue) and emerald Cincinnati (--c-green) */
      --c-green:        #10b981;
      --c-critical:     #fb7185;  /* severity: critical */
      --c-elevated:     #fbbf24;  /* severity: elevated (amber-yellow) */
      --c-amber-soft:   rgba(245,158,11,.14);
      --c-amber-border: rgba(245,158,11,.45);
      --c-danger-soft:  rgba(244,63,94,.14);
      --c-iran-soft:    rgba(217,119,87,.14);
      --c-brics-soft:   rgba(185,28,60,.14);
      --c-ukraine-war-soft: rgba(141,140,79,.16);
      --c-blue-soft:    rgba(99,102,241,.14);
      --c-blue-soft-hover: rgba(99,102,241,.20);
      --c-blue-selection:  rgba(99,102,241,.30);
      --color-scheme: dark;
    }
    [data-theme="light"] {
      /* Light palette v4 "Clear Dispatch" — 2026-06-01.
         Warm-neutral canvas breaks the blue-soup temperature lock of v3.
         Real amber-gold primary accent (warm) vs cool blue info accent =
         visual rhythm the eye can anchor on. Dark mode untouched. */

      /* Canvas — barely warm off-white; white cards float cleanly above it */
      --bg: #f0eeec;
      --surface: #ffffff;
      --surface-2: #e8e6e3;
      --surface-3: #dedad6;

      /* Text — warm dark charcoal ramp; no blue cast */
      --text-hi: #12100e;        /* warm near-black */
      --text-body: #2a2520;      /* dark warm charcoal — strong contrast */
      --text-mid: #564e46;       /* warm mid-slate */
      --text-dim: #8a7f76;       /* warm dim — clearly lighter than mid */

      /* Borders — neutral warm tint */
      --border: rgba(50,35,20,.09);
      --border-strong: rgba(50,35,20,.16);

      /* Raise tints — hover/inset backgrounds; warm family */
      --raise-1: rgba(50,35,20,.016);
      --raise-2: rgba(50,35,20,.036);
      --raise-3: rgba(50,35,20,.062);
      --raise-4: rgba(50,35,20,.10);

      /* Overlays */
      --scrim: rgba(8,6,4,.52);
      --header-bg: rgba(255,255,255,.92);
      --card-bg: #ffffff;
      --card-bg-hover: #faf9f8;
      --inset-hi: rgba(255,255,255,.80);

      /* Map — cartographic ocean blue */
      --map-bg: #c5ced8;

      /* Shadows — warm-neutral tinted; real z-axis depth */
      --shadow-card: 0 2px 4px rgba(40,25,10,.05), 0 6px 18px rgba(40,25,10,.08), 0 20px 44px rgba(40,25,10,.06);
      --shadow-card-hover: 0 4px 8px rgba(40,25,10,.08), 0 12px 30px rgba(40,25,10,.11), 0 32px 60px rgba(40,25,10,.09);
      --shadow-drawer: -24px 0 60px rgba(40,25,10,.22);

      /* Scrollbars */
      --scroll-thumb: rgba(50,35,20,.18);
      --scroll-thumb-hover: rgba(50,35,20,.28);

      /* Focus / pulse — amber-keyed */
      --focus-ring: rgba(180,83,9,.55);
      --pulse: rgba(180,83,9,.14);

      /* Page-top glow — warm golden morning-light quality */
      --bg-glow: rgba(255,248,228,.95);

      /* Accent colors — fully differentiated, tested on white backgrounds */
      --c-amber:       #b45309;   /* amber-700 — warm gold; primary alert/energy accent */
      --c-danger:      #dc2626;   /* red-600 — clear alert red */
      --c-iran:        #c2410c;   /* orange-700 — Epic Fury rust */
      --c-blue:        #1d4ed8;   /* blue-700 — cool info/nav; clearly ≠ warm amber */
      --c-brics:       #9f1239;   /* rose-900 — BRICS crimson */
      --c-brics-text:  var(--c-brics);  /* already dark enough on light surface */
      --c-ukraine-war: #713f12;   /* amber-900 (dark olive-brown) — Ukraine arc */
      --c-violet:      #7c3aed;   /* violet-600 */
      --c-cyan:        #0e7490;   /* cyan-700 — diesel series */
      --c-green:       #059669;   /* emerald-600 */
      --c-critical:    #e11d48;   /* rose-600 — readable on light cards */
      --c-elevated:    #b45309;   /* amber-700 — yellow is illegible on white */

      /* Soft accent tints */
      --c-amber-soft:       rgba(180,83,9,.12);
      --c-amber-border:     rgba(180,83,9,.36);
      --c-danger-soft:      rgba(220,38,38,.10);
      --c-iran-soft:        rgba(194,65,12,.11);
      --c-brics-soft:       rgba(159,18,57,.10);
      --c-ukraine-war-soft: rgba(113,63,18,.12);
      --c-blue-soft:        rgba(29,78,216,.10);
      --c-blue-soft-hover:  rgba(29,78,216,.16);
      --c-blue-selection:   rgba(29,78,216,.20);

      --color-scheme: light;
    }
    html { color-scheme: var(--color-scheme); }
    html, body, #root { height: 100%; background: var(--bg); }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      font-feature-settings: 'cv11', 'cv05', 'ss01', 'ss03';
      font-variation-settings: 'opsz' 14;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      transition: background-color .2s ease;
    }
    /* Display headlines use Inter Display (optical sized for large) */
    .display { font-family: 'Inter Display', 'Inter', system-ui, sans-serif; font-variation-settings: 'opsz' 32; }

/* === from STYLES const in index.html === */
  @supports (font-variation-settings: normal) {
    body { font-family: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
    .display { font-family: 'Inter Display var', 'Inter var', 'Inter', system-ui, sans-serif; }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body, #root { height: 100%; color: var(--text-hi); }
  body {
    /* Layered backdrop: a faint glow from above sits on the page bg.
       --bg-glow swaps per theme (cool indigo wash in dark, soft white in light). */
    background:
      radial-gradient(ellipse 90% 55% at 50% -10%, var(--bg-glow, transparent) 0%, transparent 60%) no-repeat fixed,
      var(--bg);
    font-feature-settings: 'cv11', 'cv05', 'ss01', 'ss03';
    font-variation-settings: 'opsz' 14;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color .2s ease, color .2s ease;
  }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
  ::selection { background: var(--c-blue-selection); color: var(--text-hi); }
  button { font-family: inherit; }
  /* Focus ring — only on keyboard, not mouse */
  *:focus { outline: none; }
  *:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
  @keyframes ping { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.35)} }
  @keyframes brkr { 0%{opacity:0;transform:translateY(6px)} 12%{opacity:1;transform:translateY(0)} 80%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-6px)} }
  @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
  @keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  @keyframes drawerIn { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
  @keyframes overlayIn { from{opacity:0} to{opacity:1} }
  @keyframes valuePulse {
    0%   { background-color: var(--pulse); }
    100% { background-color: transparent; }
  }
  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .brkr { animation: brkr 4.2s ease-in-out forwards; }
  .spin { animation: spin .8s linear infinite; display:inline-block; }
  .tab-content { animation: fadeUp .22s cubic-bezier(.2,.8,.2,1) both; }
  .value-pulse { animation: valuePulse 1.2s ease-out; border-radius: 6px; }
  .navbtn { transition: background .18s ease, color .18s ease, border-color .18s ease; }
  .navbtn:hover { background: var(--raise-2); color: var(--text-hi); }
  .navbtn[aria-selected="true"]:hover { background: var(--c-blue-soft-hover); }
  .iconbtn { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
  .iconbtn:hover:not(:disabled) { background: var(--c-amber-soft); color: var(--c-amber); border-color: var(--c-amber-border); }
  .iconbtn:active:not(:disabled) { transform: scale(.97); }
  .card-hover { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .18s ease, background .18s ease; }
  .card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--border-strong); }
  .card { background: var(--card-bg); box-shadow: var(--shadow-card); transition: background-color .18s ease, border-color .18s ease; }
  .country-link { cursor: pointer; transition: color .15s ease, background .15s ease; border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
  .country-link:hover { background: var(--c-blue-soft); color: var(--text-hi); }
  /* Light-only: country/actor links hardcode a pale-blue inline color (#c7d0ff) that reads on dark
     but is nearly invisible on white. Override to the readable indigo accent in light mode only.
     !important is required to beat the element's inline style; dark mode is left untouched. */
  [data-theme="light"] .country-link { color: var(--c-blue) !important; }
  /* Glossary term — subtle dotted underline; hover/focus/tap reveals a plain-
     language tooltip. First occurrence per text block only (see linkifyText). */
  .glossary-term {
    cursor: help;
    text-decoration: underline dotted var(--text-dim);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease, color .15s ease;
  }
  .glossary-term:hover, .glossary-term:focus-visible {
    text-decoration-color: var(--c-amber);
    color: var(--text-hi);
    outline: none;
  }
  /* Theme toggle hidden — light mode palette kept in CSS; re-enable by removing this rule. */
  .theme-toggle-btn { display: none !important; }
  /* Clickable news headlines */
  .news-headline-link { text-decoration: none; color: inherit; }
  .news-headline-link:hover { text-decoration: underline; text-decoration-color: rgba(236,237,240,.28); text-underline-offset: 3px; }
  /* Light-only: the default underline tint above is near-white (correct on dark, invisible on light) */
  [data-theme="light"] .news-headline-link:hover { text-decoration-color: rgba(19,23,32,.30); }
  .news-row-clickable { cursor: pointer; }
  .news-row-clickable:hover { background: var(--raise-1); }
  .pressable { transition: transform .12s ease; }
  .pressable:active { transform: scale(.97); }
  .skeleton {
    background: linear-gradient(90deg, var(--raise-1) 0%, var(--raise-2) 50%, var(--raise-1) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
  }
  .geo-path { transition: fill .15s ease, opacity .15s ease; }
  .geo-path[data-active="true"] { cursor: pointer; }
  .geo-path[data-active="true"]:hover { opacity: .8; filter: brightness(1.25); }
  .drawer-panel { animation: drawerIn .22s cubic-bezier(.2,.8,.2,1) both; }
  .drawer-overlay { animation: overlayIn .15s ease-out both; }
  .ticker-fade-l, .ticker-fade-r { position: absolute; top: 0; bottom: 0; width: 24px; pointer-events: none; z-index: 2; }
  .ticker-fade-l { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
  .ticker-fade-r { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
  .filter-chip { cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; user-select: none; }
  .filter-chip:hover { border-color: var(--raise-4); }
  /* Mobile: bottom tab bar, stacked KPIs */
  .sidenav-desktop { display: flex; }
  .tabbar-mobile { display: none; }
  .header-context-mobile-hide { display: flex; }
  @media (max-width: 900px) {
    .sidenav-desktop { display: none !important; }
    .tabbar-mobile { display: flex !important; }
    .main-pad { padding: 18px 14px 96px !important; }
    [aria-label="Status bar"] { display: none !important; }
    .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .kpi-grid-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
    .kpi-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* five secondary tiles: let an odd last tile span the row instead of orphaning in one column */
    .kpi-grid-secondary > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ww3-hero-row { gap: 12px !important; }
    .kpi-grid-4 > *, .kpi-grid-overview > *, .kpi-grid-secondary > *, .markets-grid-4 > *, .stat-grid-4 > * { min-width: 0; }
    .header-context-mobile-hide { display: none !important; }
    /* Header: prevent wrapping and collapse to icon-only at the mobile layout breakpoint.
       The header has flexWrap:"wrap" set inline in app.js so !important is required. */
    .header-row { padding: 0 12px !important; flex-wrap: nowrap !important; gap: 8px !important; }
    .header-subtitle, .header-meta-stack { display: none !important; }
    .btn-label-desktop { display: none !important; }
    .theme-toggle-btn { padding: 7px 8px !important; }
    .refresh-btn { padding: 7px 9px !important; }
    .refresh-btn span:first-child { margin: 0 !important; }
    .header-actions { gap: 6px !important; }
    .markets-grid-4, .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lead-cards-row, .lead-cards-compact { grid-template-columns: minmax(0, 1fr) !important; }
    .drawer-panel { width: 100% !important; max-width: 100% !important; }
    .ticker-fade-l, .ticker-fade-r { display: none !important; }
  }
  /* Tablet (901–1280px): drop arc subtitle and tighten the top row so title + metrics + actions
     get breathing room. MarketBar handles its own rotation via the useIsMobile(1280) bucket. */
  @media (max-width: 1280px) and (min-width: 901px) {
    .header-subtitle { display: none !important; }
    .header-row { padding: 0 16px !important; gap: 10px !important; flex-wrap: nowrap !important; }
    .header-actions { gap: 8px !important; }
  }
  @media (max-width: 560px) {
    .lead-facts-row { grid-template-columns: 1fr !important; }
    .ladder-trigger { display: none !important; }
    .ladder-label { width: auto !important; flex: 1 !important; min-width: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }
  /* ─── Phone-specific polish (≤640px): tighten header, scale hero typography, compact controls ─── */
  @media (max-width: 640px) {
    /* Header: prevent wrap, halve height, hide secondary info */
    .header-row {
      flex-wrap: nowrap !important;
      min-height: 52px !important;
      padding: 0 12px !important;
      gap: 8px !important;
    }
    .header-row > .choreographed { min-height: 52px !important; gap: 8px !important; }
    .header-subtitle, .header-meta-stack { display: none !important; }
    .header-title-stack { flex: 1; min-width: 0; }
    .header-title { font-size: 13px !important; }
    .header-actions { gap: 6px !important; }
    /* Buttons collapse to icon-only on mobile */
    .btn-label-desktop { display: none !important; }
    .theme-toggle-btn { padding: 7px 8px !important; }
    .refresh-btn { padding: 7px 9px !important; }
    .refresh-btn span:first-child { margin: 0 !important; }
    /* Slightly tighter main padding */
    .main-pad { padding: 14px 12px 100px !important; }
    /* Secondary KPI cells (Hormuz/Brent/Gas etc): trim heavy desktop padding so values like "$108.85" fit the narrow mobile column */
    .kpi-grid-secondary .kpi-cell { padding: 16px 14px !important; }
    /* Hero KPI: STACK VERTICALLY on mobile so each KPI gets full width + natural height (no wasted boxes) */
    .kpi-grid-overview {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    .kpi-grid-overview > div {
      padding: 18px 18px !important;
      min-width: 0 !important;
      border-right: none !important;
      border-bottom: 1px solid var(--border) !important;
    }
    .kpi-grid-overview > div:last-child { border-bottom: none !important; }
    /* WW3 hero now full-width — can render at impactful scale */
    .kpi-grid-overview > div:first-child .display { font-size: 72px !important; letter-spacing: -.04em !important; }
    .kpi-grid-overview > div:first-child .display > span { font-size: 32px !important; }
    /* Secondary KPI values: comfortable size since they have full row width */
    .kpi-grid-overview > div:not(:first-child) .display { font-size: 32px !important; letter-spacing: -.015em !important; }
    /* Sparklines: fill card width so the Feb 28 → present arc reads as a real chart, not a chip */
    .kpi-grid-overview svg[viewBox] {
      width: 100% !important;
      height: auto !important;
      max-width: 100% !important;
      flex-shrink: 1 !important;
    }
    /* WW3 hero sparkline column: let it use the full right side of the cell */
    .kpi-grid-overview > div:first-child > div:nth-child(3) > div:nth-child(2) { max-width: none !important; flex: 1 1 100% !important; min-width: 100% !important; }
    .kpi-grid-overview > div:first-child > div:nth-child(3) > div:nth-child(2) > svg { height: 70px !important; min-height: 56px; }
    /* Secondary KPI sparklines: render as a bigger strip below the value */
    .kpi-grid-overview > div:not(:first-child) > div:nth-child(3) { width: 100%; }
    .kpi-grid-overview > div:not(:first-child) > div:nth-child(3) svg { height: 56px !important; min-height: 48px; }
    /* Tiny "FEB 28" / "NOW" markers below sparkline to anchor the timeline */
    .kpi-grid-overview > div:not(:first-child) > div:nth-child(3)::after,
    .kpi-grid-overview > div:first-child > div:nth-child(3) > div:nth-child(2)::after {
      content: "FEB 28  →  NOW";
      display: block;
      font-family: Inter, sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      color: var(--text-dim);
      margin-top: 4px;
      text-align: justify;
      text-align-last: justify;
    }
    /* Rung pill: normal sizing */
    .kpi-grid-overview > div:first-child > div:nth-child(4) > span { white-space: nowrap !important; }
    /* stat-grid-4 (Human Cost + Market Impact): stack vertically on mobile */
    .stat-grid-4 { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    /* Card padding: tighten */
    .card { padding: 16px !important; border-radius: 10px !important; }
    /* Lead Development title and body: scale down */
    .display { letter-spacing: -.015em !important; }
    /* Touch targets: ensure 44px minimum where it matters */
    .tabbar-mobile button { min-height: 50px !important; padding: 7px 2px env(safe-area-inset-bottom, 4px) !important; }
    .tabbar-mobile button span { font-size: 11px !important; }
    /* Lead Development title: shrink for mobile (was 26px) */
    .lead-card .display { font-size: 20px !important; line-height: 1.25 !important; letter-spacing: -.01em !important; }
    /* Lead Development body text: subtler scale-down */
    .lead-card .lead-card-summary { font-size: 14px !important; line-height: 1.5 !important; }
    /* "Changed 24h" / "Watch" labels: shorter width on mobile */
    .lead-card span[style*="width: 92px"] { width: 70px !important; font-size: 11px !important; }
    /* "Four lenses" rows: stack on mobile so a long state-label badge can't overflow the card */
    .lead-card .lens-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
    .lead-card .lens-badge { white-space: normal !important; max-width: 100% !important; text-align: left !important; }
    /* Eyebrow labels: tighten letter spacing in cramped cells */
    .kpi-grid-overview > div:not(:first-child) > div:first-child > div { font-size: 11px !important; letter-spacing: .08em !important; }
    /* US GAS AVG label - allow it to wrap on 2 lines max */
    .kpi-grid-overview > div:nth-child(4) > div:first-child > div { letter-spacing: .04em !important; }
    /* Timeline: shift the dates and spine left so headlines have more room */
    .tl-rail { padding-right: 6px !important; }
    .tl-spine { left: 50px !important; }
    .tl-event-row { gap: 8px !important; }
    .tl-event-row .tl-date {
      width: 40px !important;
      font-size: 11px !important;
      letter-spacing: 0 !important;
      padding-top: 4px !important;
    }
    .tl-event-row .tl-content { padding-right: 0 !important; }
    .tl-month-label { width: 40px !important; font-size: 11px !important; letter-spacing: .12em !important; }
    .tl-chapter { padding: 16px 14px 16px 60px !important; }
    /* News list rows: stack time/source above headline for readability */
    .news-row {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 4px !important;
      padding: 12px 16px !important;
    }
    .news-row .news-time, .news-row .news-source { width: auto !important; display: inline; }
    .news-row > div:first-child, .news-row > .news-time, .news-row > .news-source {
      /* unused placeholder */
    }
    .news-row::before {
      content: "";
      order: 0;
    }
    /* Pair time and source on same line via grouping span — use a wrapping pseudo-arrangement */
    .news-row { display: grid !important; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; }
    .news-row .news-time { grid-column: 1; grid-row: 1; }
    .news-row .news-source { grid-column: 2 / -1; grid-row: 1; }
    .news-row .news-headline { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px !important; line-height: 1.45 !important; }
    /* Pull breaking ticker tighter */
    .ticker-fade-l, .ticker-fade-r { width: 16px !important; }
  }
  @media (max-width: 420px) {
    /* Extra-small phones (iPhone SE / 320–414): tighter header padding */
    .header-title { font-size: 12px !important; letter-spacing: 0 !important; }
    .header-row { padding: 0 10px !important; }
    .main-pad { padding: 12px 10px 100px !important; }
    /* Scale hero typography slightly for smallest phones */
    .kpi-grid-overview > div:first-child .display { font-size: 60px !important; }
    .kpi-grid-overview > div:first-child .display > span { font-size: 28px !important; }
    .kpi-grid-overview > div:not(:first-child) .display { font-size: 28px !important; }
    .kpi-grid-overview > div { padding: 14px 14px !important; }
  }
  /* ─── Wow-tier additions: orchestrated reveal, living map, briefing ─── */
  @keyframes reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
  @keyframes briefSlide { from { opacity:0; transform:translateY(16px) scale(.996); } to { opacity:1; transform:translateY(0) scale(1); } }
  @keyframes drawPath { to { stroke-dashoffset: 0; } }
  @keyframes breathe {
    0%, 100% { transform: scale(1); opacity: .85; }
    50%      { transform: scale(1.10); opacity: .35; }
  }
  @keyframes arcDraw {
    0%   { stroke-dashoffset: var(--arc-len, 600); opacity: 0; }
    14%  { opacity: 1; }
    72%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes ringPulse {
    0%   { r: 5;  opacity: .85; }
    100% { r: 26; opacity: 0; }
  }
  /* glowPulse has two variants because @keyframes can't read theme-swapping CSS vars.
     Theme switcher picks the appropriate animation-name per data-theme. */
  @keyframes glowPulseDark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0), inset 0 0 0 0 rgba(245,158,11,0); }
    50%      { box-shadow: 0 0 24px 1px rgba(245,158,11,.32), inset 0 0 18px rgba(245,158,11,.10); }
  }
  @keyframes glowPulseLight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180,83,9,0), inset 0 0 0 0 rgba(180,83,9,0); }
    50%      { box-shadow: 0 0 18px 1px rgba(180,83,9,.24), inset 0 0 14px rgba(180,83,9,.08); }
  }
  @keyframes wordIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
  @keyframes radarSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  .choreographed { opacity: 0; animation: reveal .60s cubic-bezier(.2,.8,.2,1) both; }
  .brief-slide   { animation: briefSlide .32s cubic-bezier(.2,.8,.2,1) both; }
  .draw-in-path  { stroke-dasharray: var(--path-len); stroke-dashoffset: var(--path-len); animation: drawPath .9s cubic-bezier(.2,.8,.2,1) .12s forwards; }
  .living-halo   { transform-origin: center; transform-box: fill-box; animation: breathe 4.2s ease-in-out infinite; will-change: transform, opacity; }
  .living-halo.lead   { animation-duration: 2.6s; }
  .living-arc    { animation: arcDraw 6s cubic-bezier(.2,.8,.2,1) infinite; will-change: stroke-dashoffset, opacity; }
  .living-ring   { animation: ringPulse 2.4s ease-out infinite; will-change: r, opacity; }
  .glow-rung     { animation: glowPulseDark 3.6s ease-in-out infinite; will-change: box-shadow; }
  [data-theme="light"] .glow-rung { animation-name: glowPulseLight; }
  .word-in       { display: inline-block; opacity: 0; animation: wordIn .42s cubic-bezier(.2,.8,.2,1) both; }
  .radar-sweep   { transform-origin: center; animation: radarSweep 8s linear infinite; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .living-halo, .living-arc, .living-ring, .glow-rung, .radar-sweep { animation: none !important; transform: none !important; opacity: .55 !important; }
    .draw-in-path { stroke-dashoffset: 0 !important; }
    .word-in, .choreographed { opacity: 1 !important; transform: none !important; }
  }
  /* Pause map's infinite CSS animations when offscreen (toggled via JS IntersectionObserver). */
  .map-paused .living-halo,
  .map-paused .living-arc,
  .map-paused .living-ring,
  .map-paused .glow-rung,
  .map-paused .radar-sweep { animation-play-state: paused; }
  /* On mobile, keep these infinite animations paused by default — JS also calls SVG SMIL pauseAnimations(). */
  @media (max-width: 768px) {
    .living-halo, .living-arc, .living-ring, .glow-rung, .radar-sweep {
      animation-play-state: paused;
    }
  }

  /* ─── Mobile UX enhancements ─── */

  /* Pull-to-refresh */
  @keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  .ptr-indicator {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-60px);
    z-index: 999; width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .ptr-indicator.ptr-visible { transform: translateX(-50%) translateY(16px); }
  .ptr-indicator.ptr-triggered { transform: translateX(-50%) translateY(16px) scale(1.1); }
  .ptr-indicator svg { transition: transform .2s ease; }
  .ptr-indicator.ptr-triggered svg { animation: ptr-spin .8s linear infinite; }

  /* Haptic-style press feedback on tappable elements */
  .card-hover:active, .pressable:active { transform: scale(.97) !important; }
  .navbtn:active { transform: scale(.97); }
  .filter-chip:active { transform: scale(.95); }
  .news-row-clickable:active { background: var(--raise-2) !important; }
  .country-link:active { background: var(--c-blue-soft) !important; transform: scale(.97); }

  /* Bottom sheet (mobile country drawer) */
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
  .bottom-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 201;
    background: var(--bg); border-top-left-radius: 16px; border-top-right-radius: 16px;
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 32px rgba(0,0,0,.35);
    display: flex; flex-direction: column;
    max-height: 85vh; height: 60vh;
    animation: sheetUp .3s cubic-bezier(.2,.8,.2,1) both;
    touch-action: none;
    transition: height .25s cubic-bezier(.2,.8,.2,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-sheet.sheet-expanded { height: 85vh; }
  .bottom-sheet-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--raise-4); margin: 10px auto 6px;
    flex-shrink: 0;
  }

  /* Swipeable tab container */
  .swipe-container {
    overflow: hidden; touch-action: pan-y;
    position: relative;
  }
  .swipe-track {
    display: flex; will-change: transform;
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .swipe-track.swiping { transition: none; }
  .swipe-panel { flex: 0 0 100%; min-width: 0; width: 100%; }

  /* Collapsible KPI grid */
  .kpi-collapse-toggle {
    display: none; /* hidden on desktop */
    width: 100%; padding: 10px 0; border: none; background: transparent;
    color: var(--text-mid); font-family: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    border-top: 1px solid var(--border);
    transition: color .15s ease;
  }
  .kpi-collapse-toggle:active { color: var(--text-hi); }

  /* Sticky section headers */
  .section-sticky-header {
    position: sticky; top: 60px; z-index: 10;
    background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 10px 0; margin: 0 -4px; padding-left: 4px; padding-right: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
  }
  .section-sticky-header.stuck { border-bottom-color: var(--border); }

  /* Glance mode */
  @keyframes glanceIn { from { opacity: 0; transform: scale(.98) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  .glance-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: var(--bg);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 24px; padding-bottom: env(safe-area-inset-bottom, 24px);
    animation: glanceIn .3s cubic-bezier(.2,.8,.2,1) both;
  }
  .glance-card {
    width: 100%; max-width: 400px;
    display: flex; flex-direction: column; gap: 20px; text-align: center;
  }
  .glance-close {
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--raise-1); border: 1px solid var(--border);
    color: var(--text-mid); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  .glance-close:active { transform: scale(.9); background: var(--raise-2); }

  /* Map mobile improvements */
  .map-zoom-hint {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 14px; font-size: 11px; color: var(--text-mid); font-weight: 500;
    letter-spacing: .04em; box-shadow: var(--shadow-card);
    opacity: 1; transition: opacity .3s ease;
    pointer-events: none; z-index: 4;
  }
  .map-zoom-hint.hidden { opacity: 0; }
  .map-recenter-btn {
    position: absolute; bottom: 12px; right: 12px; z-index: 4;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-mid); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-card); font-size: 16px;
  }
  .map-recenter-btn:active { transform: scale(.9); background: var(--raise-2); }

  /* Skeleton loading enhancement */
  .skeleton-card {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 20px; display: flex; flex-direction: column; gap: 12px;
  }
  .skeleton-line {
    background: linear-gradient(90deg, var(--raise-1) 0%, var(--raise-2) 50%, var(--raise-1) 100%);
    background-size: 200% 100%; animation: shimmer 1.6s ease-in-out infinite;
    border-radius: 4px; height: 14px;
  }
  .skeleton-line.short { width: 40%; }
  .skeleton-line.medium { width: 65%; }
  .skeleton-line.tall { height: 24px; width: 30%; }

  @media (max-width: 900px) {
    .kpi-collapse-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; }
    /* Ensure all touch targets meet 44px minimum */
    .tabbar-mobile button { min-width: 44px; min-height: 52px; }
    .iconbtn, .pressable, .filter-chip { min-width: 44px; min-height: 44px; }
    /* Safe area: bottom tab bar */
    .tabbar-mobile { padding-bottom: env(safe-area-inset-bottom, 8px) !important; }
    /* Safe area: main content clears tab bar + safe area */
    .main-pad { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
    /* Bottom sheet replaces side drawer on mobile */
    .drawer-panel { display: none !important; }
    .drawer-overlay + .drawer-panel { display: none !important; }
  }

  @media (max-width: 640px) {
    /* Larger touch targets for small screens */
    .filter-chip { padding: 8px 14px !important; min-height: 44px; }
    .iconbtn { min-width: 44px; min-height: 44px; }
    /* Glance mode button in tab bar */
    .glance-fab {
      position: fixed; bottom: calc(66px + env(safe-area-inset-bottom, 8px));
      right: 14px; z-index: 45;
      width: 48px; height: 48px; border-radius: 14px;
      background: var(--c-amber-soft); border: 1px solid var(--c-amber-border);
      color: var(--c-amber); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: 20px;
    }
    .glance-fab:active { transform: scale(.9); }
  }

/* content-visibility for timeline month sections — allows browser to skip
   off-screen layout/paint for collapsed month groups. */
.tl-month-row { content-visibility: auto; contain-intrinsic-size: auto 32px; }
.tl-event-row { content-visibility: auto; contain-intrinsic-size: auto 80px; }