/* ========================================================================
   DEPLOY PATH: /css/macroeconomics.9440614d.css
   Tepuy Solutions — Macroeconomics dashboard page styles
   Version: 2026-08-30 (light clay/moss/bone theme — see the :root comment
   below for the full history: dark-terminal originally, briefly a
   from-shared-dark-tokens theme in PR #146, now light to match the rest
   of the calculators)

   LOAD ORDER: Load AFTER tepuy.css.
   tepuy.css  → standard navbar (green, fixed, 64px high), body reset
   this file  → light theme override (own surface scale, still built off
                shared tokens), macro subnav, all dashboard styles

   KEY CHANGES:
   - Removed all .topbar/.topbar-* rules (now uses standard tepuy navbar)
   - Added .macro-subnav (bar fixed at top:64px, height:52px)
   - body padding-top overridden to 116px (64 navbar + 52 subnav)
   - :root overrides tepuy.css's own light variables with this page's own
     (also light, but independently-scaled) token set
   ======================================================================== */

/* ── LIGHT THEME TOKENS (override tepuy.css light defaults with THIS
   page's own light scale, still built from the shared tokens) ───
   2026-08-30 pass: reverses PR #146's dark-theme judgment call. Page now
   matches Mortgage/Offset/LMI/Retirement's clay/moss/bone light theme
   instead of the "data-terminal" dark one — built from --ink/--clay/
   --moss/--bone (tepuy.css) via color-mix(), same technique PR #146 used
   for the dark version, just inverted. --gold keeps its variable NAME
   (referenced ~15 times below and in the HTML) but its VALUE is now
   var(--clay) — every existing --gold usage site gets clay for free
   without needing to touch each one individually, same trick --bg: var(--ink)
   was doing for the dark theme. --gold's raw RGB still has a JS-side
   equivalent for jsPDF (export.js's MACRO_GOLD_RGB, now clay's RGB —
   jsPDF/Chart.js can't read CSS variables either way).
   The categorical Chart.js series colors (--cyan/--green/--red/--amber/
   --blue/--purple) are one shade darker than the dark theme's versions —
   those are also used as actual TEXT (badges, .kpi-change, corr-cell
   values), and the dark-theme shades don't clear readable contrast on a
   light background the way they did on near-black. Chart.js dataset LINE
   colors in charts.js/scenarios.js/montecarlo.js are deliberately left at
   their existing hex (not re-derived from these tokens) — lines against a
   gridded white plot area don't carry the same text-contrast requirement,
   and touching every hardcoded chart-color literal across 4 files for a
   one-shade shift wasn't worth the added risk in this pass. */
:root {
  /* Page colors — derived from --bone/--clay/--ink (tepuy.css). Multiple
     surface levels color-mixed off --bone to preserve the same layered-
     panel hierarchy the dark version had (surface = white; 2/3/4
     progressively more bone-tinted, mirroring how surface-2/3/4 went
     progressively lighter off --stone in the dark version). */
  --bg:            var(--bone);
  --bg-2:          color-mix(in srgb, var(--bone) 92%, white);
  --surface:       #ffffff;
  --surface-2:     color-mix(in srgb, var(--bone) 45%, white);
  --surface-3:     color-mix(in srgb, var(--bone) 65%, white);
  --surface-4:     color-mix(in srgb, var(--bone) 85%, white);
  --text:          var(--ink);
  --border:        color-mix(in srgb, var(--ink) 10%, transparent);
  --border-2:      color-mix(in srgb, var(--ink) 16%, transparent);
  --border-3:      color-mix(in srgb, var(--ink) 24%, transparent);

  /* Macro accent palette — --gold now resolves to --clay, the page's
     primary accent (same role --gold played on the dark theme). */
  --gold:          var(--clay);
  --gold-on:       var(--ink, #0E1512);   /* 5.58:1 on clay; white would be 3.32:1 */
  /* --gold used as TEXT on a light tint is only 2.93:1; mixed toward ink it
     clears AA while still reading as clay (same fix as css/teaser.css). */
  --gold-text:     color-mix(in srgb, var(--clay) 25%, var(--ink, #0E1512));
  --gold-light:    color-mix(in srgb, var(--clay) 65%, white);
  --gold-dim:      color-mix(in srgb, var(--clay) 15%, transparent);
  --cyan:          #0e7490;
  --green:         #047857;
  --red:           #be123c;
  --amber:         #b45309;
  --blue:          #1d4ed8;
  --purple:        #6d28d9;

  --text-primary:  var(--ink);
  --text-secondary:var(--ink);
  --text-muted:    color-mix(in srgb, var(--ink) 58%, var(--bone) 42%);

  --font-display:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body:     'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:     'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-xl:     18px;

  --shadow:        0 4px 24px rgba(14,21,18,.08), 0 1px 4px rgba(14,21,18,.05);
  --shadow-lg:     0 12px 40px rgba(14,21,18,.12);

  /* Subnav height — used in body padding calc */
  --subnav-h: 52px;
}

/* ── BODY OVERRIDE ───────────────────────────────────────────── */
/* tepuy.css sets padding-top:64px; we extend to 64+52=116px     */
body {
  padding-top: calc(64px + var(--subnav-h));
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient tint (was "ambient dark gradient" — same subtle corner-glow
   treatment, clay/cyan tints lightened for a bone/white page instead of
   near-black). */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(201,122,58,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(14,116,144,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }


/* ══════════════════════════════════════════════════════════════
   MACRO SUB-NAVIGATION
   Fixed dark bar that sits directly below the green tepuy navbar.
   Height: 52px. Position: fixed top:64px.
   z-index: 100 (below navbar z-index:1100, above content z-index:1)
   ══════════════════════════════════════════════════════════════ */
.macro-subnav {
  position: fixed;
  top: 64px;                          /* flush below standard navbar */
  left: 0;
  right: 0;
  height: var(--subnav-h);
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(201,122,58,0.18);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 2px 16px rgba(14,21,18,0.08), 0 1px 0 rgba(201,122,58,0.08);
}

.macro-subnav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  max-width: 1840px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 24px);
}

/* Page identity block */
.macro-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex-shrink: 0;
}

.macro-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.macro-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* View switcher nav */
.macro-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.macro-nav::-webkit-scrollbar { display: none; }

/* Below ~640px this row can overflow (5 buttons + the wide macro-controls
   group competing for space), and there was no visual cue that "Glossary"
   is scrollable into view off the right edge — a mask-image edge-fade is a
   CSS-only affordance for that (GSC macro audit, M5). Scoped to the
   breakpoint where it's actually needed; harmless on a row that already
   fits (nothing is cut off to fade). */
@media (max-width: 640px) {
  .macro-nav {
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}

/* Nav buttons — scoped to macro-nav to avoid conflicts with tepuy.css */
.macro-nav .nav-btn {
  padding: 5px 13px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-family: var(--font-body);
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.macro-nav .nav-btn:hover {
  color: var(--text-primary);
  background: rgba(14,21,18,0.04);
}
.macro-nav .nav-btn.active {
  background: rgba(201,122,58,0.1);
  /* --gold as TEXT on this light tint is 2.96:1. --gold-text is the same
     clay mixed toward ink, which clears AA. Same fix as .chip.active. */
  color: var(--gold-text, #4a3222);
  border: 1px solid rgba(201,122,58,0.22);
}

/* Controls group */
.macro-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Live data badge */
.data-source-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16,185,129,0.07);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: 99px;
  font-size: 11px;
  color: var(--green);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.ds-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: blink 2.5s ease-in-out infinite;
  box-shadow: 0 0 5px rgba(16,185,129,0.6);
  flex-shrink: 0;
}

@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.2; } }


/* ══════════════════════════════════════════════════════════════
   BUTTONS (scoped to macro page — override tepuy.css defaults)
   ══════════════════════════════════════════════════════════════ */
.main-content .btn,
.macro-controls .btn,
.brand-footer .btn {
  padding: 7px 15px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-sm { padding: 5px 11px !important; font-size: 12px !important; }

.btn-primary {
  /* Token-driven (was a literal 3-stop gold hex gradient, not read from any
     CSS variable) — derived from --clay via color-mix() so it moves with
     the token instead of needing its own separate update. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--clay) 85%, black) 0%, var(--clay) 40%, color-mix(in srgb, var(--clay) 65%, white) 100%);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(201,122,58,0.22);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(201,122,58,0.32);
  text-decoration: none;
}

.btn-ghost {
  background: rgba(14,21,18,0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover {
  background: rgba(14,21,18,0.06);
  color: var(--text-primary);
  border-color: var(--border-3);
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT LAYOUT
   ══════════════════════════════════════════════════════════════ */
.main-content {
  padding: 24px 28px;
  max-width: 1840px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Views */
.view { display: none; }
.view.active { display: block; animation: fadeIn 0.28s ease-out; }

.view-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.view-header .section-title {
  font-size: 26px;
  background: linear-gradient(135deg, var(--text-primary) 60%, var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.view-header .section-sub { margin-top: 6px; }


/* ══════════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════════ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,122,58,0.0), transparent);
  transition: background 0.3s ease;
  pointer-events: none;
}
.panel:hover::before {
  background: linear-gradient(90deg, transparent, rgba(201,122,58,0.35), transparent);
}
.panel:hover {
  border-color: rgba(14,21,18,0.14);
  box-shadow: var(--shadow-lg);
}
.panel-large { padding: 24px 28px; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 16px;
}


/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
.section-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.section-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  line-height: 1.5;
}


/* ══════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ══════════════════════════════════════════════════════════════ */
.grid-3col { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin: 18px 0; }
.grid-2col { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin: 18px 0; }
.grid-scenario { display: grid; grid-template-columns: 350px 1fr; gap: 18px; }
.chart-row-main { margin-bottom: 0; }
.chart-wrap { position: relative; }

@media (max-width: 1400px) {
  .grid-3col { grid-template-columns: repeat(2,1fr); }
  .grid-scenario { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .macro-brand { display: none; }   /* hide brand text on medium screens */
}
@media (max-width: 900px) {
  .grid-3col, .grid-2col { grid-template-columns: 1fr; }
  .main-content { padding: 14px 12px; }
}
@media (max-width: 640px) {
  .macro-controls .data-source-badge { display: none; } /* too cramped */
  .macro-subnav-inner { gap: 10px; }
}


/* ══════════════════════════════════════════════════════════════
   KPI STRIP
   ══════════════════════════════════════════════════════════════ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 15px 16px 13px;
  transition: all 0.2s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px 0 0 2px;
}
.kpi-card[data-accent="gold"]::before   { background: var(--gold); }
.kpi-card[data-accent="cyan"]::before   { background: var(--cyan); }
.kpi-card[data-accent="green"]::before  { background: var(--green); }
.kpi-card[data-accent="red"]::before    { background: var(--red); }
.kpi-card[data-accent="amber"]::before  { background: var(--amber); }
.kpi-card[data-accent="blue"]::before   { background: var(--blue); }
.kpi-card[data-accent="purple"]::before { background: var(--purple); }

.kpi-card[data-accent="gold"]   { border-bottom: 2px solid rgba(201,122,58,0.35); }
.kpi-card[data-accent="cyan"]   { border-bottom: 2px solid rgba(14,116,144,0.35); }
.kpi-card[data-accent="green"]  { border-bottom: 2px solid rgba(16,185,129,0.35); }
.kpi-card[data-accent="red"]    { border-bottom: 2px solid rgba(244,63,94,0.35); }
.kpi-card[data-accent="amber"]  { border-bottom: 2px solid rgba(245,158,11,0.35); }
.kpi-card[data-accent="blue"]   { border-bottom: 2px solid rgba(59,130,246,0.35); }
.kpi-card[data-accent="purple"] { border-bottom: 2px solid rgba(167,139,250,0.35); }

.kpi-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }

.kpi-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 8px;
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.kpi-change { font-size: 11px; font-family: var(--font-mono); display: flex; align-items: center; gap: 4px; }
.kpi-change.up    { color: var(--green); }
.kpi-change.down  { color: var(--red); }
.kpi-change.neutral { color: var(--text-muted); }
.kpi-source { font-size: 9.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 4px; }

.kpi-loading {
  grid-column: 1/-1;
  text-align: center;
  padding: 28px;
  color: var(--text-muted) !important;
  font-family: var(--font-mono);
  font-size: 13px;
  animation: pulse-val 1.5s ease-in-out infinite;
}

/* ── LOADING SKELETONS ── */
.kpi-loading-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.skeleton-card {
  height: 102px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  animation: shimmer 1.6s infinite;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}


/* ══════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-weight: 500;
  flex-shrink: 0;
}
.badge-gold   { background: rgba(201,122,58,0.10); color: var(--gold);   border: 1px solid rgba(201,122,58,0.22); }
.badge-cyan   { background: rgba(14,116,144,0.10); color: var(--cyan);   border: 1px solid rgba(14,116,144,0.22); }
.badge-green  { background: rgba(16,185,129,0.08); color: var(--green);  border: 1px solid rgba(16,185,129,0.18); }
.badge-amber  { background: rgba(245,158,11,0.08); color: var(--amber);  border: 1px solid rgba(245,158,11,0.18); }
.badge-red    { background: rgba(244,63,94,0.08);  color: var(--red);    border: 1px solid rgba(244,63,94,0.18); }

/* Chart range chips */
.chart-controls { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  background: rgba(14,21,18,0.03);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: all 0.15s;
}
.chip:hover { background: rgba(14,21,18,0.05); color: var(--text-secondary); }
.chip.active { background: rgba(201,122,58,0.12); color: var(--gold-text, #4a3222); border-color: rgba(201,122,58,0.28); }


/* ══════════════════════════════════════════════════════════════
   MINI STATS (below small charts)
   ══════════════════════════════════════════════════════════════ */
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mini-stat { display: flex; flex-direction: column; gap: 3px; }
.mini-stat-label {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.mini-stat-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}


/* ══════════════════════════════════════════════════════════════
   DATA TABLE
   ══════════════════════════════════════════════════════════════ */
.table-scroll {
  overflow-x: auto;
  margin-top: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: var(--font-mono);
}
.data-table thead { position: sticky; top: 0; z-index: 2; }
.data-table th {
  text-align: right;
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
  background: var(--surface-3);
}
.data-table th:first-child { text-align: left; }
.data-table td {
  text-align: right;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.data-table td:first-child { text-align: left; color: var(--text-primary); font-weight: 600; font-size: 13px; }
.data-table tbody tr:nth-child(even) td { background: rgba(14,21,18,0.02); }
.data-table tbody tr:hover td { background: rgba(201,122,58,0.04); }
.data-table tr:last-child td { border-bottom: none; }
.cell-up   { color: var(--green) !important; font-weight: 600; }
.cell-down { color: var(--red)   !important; font-weight: 600; }


/* ══════════════════════════════════════════════════════════════
   INPUTS + SELECTS
   ══════════════════════════════════════════════════════════════ */
.input-field {
  width: 100%;
  padding: 8px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}
.input-field:focus {
  border-color: rgba(201,122,58,0.5);
  box-shadow: 0 0 0 3px rgba(201,122,58,0.08);
}
/* Chevron colour: #55685F, not the #94a3b8 this rule shipped with.
   #94a3b8 measures 2.56:1 on the white the nine selects actually render on
   (Chromium, computed background walked to the first opaque ancestor) —
   under WCAG SC 1.4.11's 3:1 for a UI graphic, and a chevron is the only
   thing marking these as dropdowns. #55685F is the site's canonical muted
   tone from #207 and measures 5.95:1, the same value the other four
   calculators' chevrons already carry. */
select.input-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2355685F' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  padding-right: 30px;
  cursor: pointer;
}
select.input-field option { background: var(--surface-3); color: var(--text-primary); }


/* ══════════════════════════════════════════════════════════════
   SCENARIO
   ══════════════════════════════════════════════════════════════ */
.scenario-controls-panel { height: fit-content; position: sticky; top: calc(64px + var(--subnav-h) + 12px); }

/* ...but only while there IS a column beside it. Below 1400px .grid-scenario
   collapses to one column (see the media query above), and a pinned panel in a
   single-column grid stays put while the NEXT row scrolls up over it — later
   sibling, no z-index, so it paints on top.

   This override has to live HERE, after the declaration it beats. The first
   attempt put it inside the @media (max-width: 1400px) block earlier in the
   file: same specificity, earlier in source order, so the sticky above won and
   the measurements below did not budge. */
@media (max-width: 1400px) {
  /* .scenario-controls-panel is `position: sticky` so it stays beside the
     charts while they are read. That only makes sense while there IS a column
     beside it. Here the grid is one column, so the panel pins itself and the
     NEXT row scrolls up over it — later sibling, no z-index, so it paints on
     top — taking Save Scenario, Reset and all six presets with it.

     Measured before this line existed, with a real mouse click at each
     control's own centre:

         width   at page top   after scrolling to the control
         1401    reachable     reachable
         1400    reachable     Save NO, Reset NO, presets NO
         1280    reachable     Save NO, Reset NO, presets NO
         1024    reachable     Save NO, Reset NO, presets NO
          768    reachable     Save NO, Reset NO, presets NO
          390    presets NO    Save NO, Reset NO, presets NO

     The boundary is exactly this breakpoint, which is what identifies the
     cause: the controls are dead on every width below it once the page is
     scrolled — which is the only way to reach them in the first place. */
  .scenario-controls-panel { position: static; }
}
.scenario-input-group { margin-bottom: 16px; }
.scenario-input-group label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-mono);
}
.scenario-sliders { display: flex; flex-direction: column; gap: 15px; }
.slider-row { display: flex; flex-direction: column; gap: 6px; }
.slider-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); }
.slider-val { font-family: var(--font-mono); font-size: 12px; color: var(--gold); min-width: 52px; text-align: right; }

input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 3px;
  border-radius: 99px; background: var(--surface-4); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light) 30%, var(--gold) 100%);
  cursor: pointer; box-shadow: 0 0 0 2px rgba(201,122,58,0.2), 0 2px 6px rgba(0,0,0,.4);
  transition: box-shadow 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px rgba(201,122,58,0.18), 0 2px 8px rgba(0,0,0,.5); }

.preset-scenarios { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }
.presets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.preset-btn {
  padding: 8px 10px; background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px;
  cursor: pointer; font-family: var(--font-body); transition: all 0.15s; text-align: left;
}
.preset-btn:hover { background: rgba(14,21,18,0.04); color: var(--text-primary); border-color: var(--border-2); transform: translateY(-1px); }

.scenario-output-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; }
.scenario-impact-card {
  background: var(--surface-3); border-radius: var(--radius-md); padding: 14px 15px;
  border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s;
}
.scenario-impact-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.scenario-impact-label { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.scenario-impact-value { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.scenario-impact-base { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 5px; }

.saved-scenario-item {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 14px;
  background: var(--surface-3); border-radius: var(--radius-md); margin-bottom: 8px;
  border: 1px solid var(--border); cursor: pointer; transition: all 0.15s;
}
.saved-scenario-item:hover { border-color: rgba(201,122,58,0.3); background: rgba(201,122,58,0.04); }
.saved-scenario-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.saved-scenario-date { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.saved-scenario-actions { display: flex; gap: 6px; }
/* An item whose snapshot came back without params cannot be loaded, so it is
   rendered without role="button"/tabindex (js/macroeconomics/scenarios.js).
   The row's cursor and hover highlight are the only remaining things telling
   the user it is clickable, so they go too — the ✕ inside it keeps its own
   pointer cursor from .btn, which is the one action that still works. */
.saved-scenario-item.is-unloadable { cursor: default; }
.saved-scenario-item.is-unloadable:hover { border-color: var(--border); background: var(--surface-3); }
.saved-scenario-item.is-unloadable .saved-scenario-name { color: var(--text-muted); }


/* ══════════════════════════════════════════════════════════════
   MONTE CARLO
   ══════════════════════════════════════════════════════════════ */
.mc-params { display: flex; flex-direction: column; gap: 16px; }
.mc-param-row { display: flex; flex-direction: column; gap: 6px; }
.mc-param-row label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-family: var(--font-mono); }
.mc-percentile-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.mc-percentile-card { background: var(--surface-3); border-radius: var(--radius-md); padding: 15px; border: 1px solid var(--border); text-align: center; }
.mc-percentile-label { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.mc-percentile-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.mc-percentile-prob { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 5px; }


/* ══════════════════════════════════════════════════════════════
   CORRELATIONS
   ══════════════════════════════════════════════════════════════ */
.corr-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
.corr-table th { padding: 10px 7px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-align: center; border-bottom: 1px solid var(--border-2); background: var(--surface-3); }
.corr-table td { text-align: center; padding: 7px 5px; border-bottom: 1px solid var(--border); }
.corr-table tr:hover td { background: rgba(14,21,18,0.03); }
.corr-cell { display: inline-block; padding: 4px 9px; border-radius: var(--radius-sm); font-weight: 600; font-size: 11.5px; min-width: 52px; }


/* ══════════════════════════════════════════════════════════════
   GLOSSARY
   ══════════════════════════════════════════════════════════════ */
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 14px; }
.glossary-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; transition: all 0.2s ease; position: relative; overflow: hidden;
}
.glossary-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.2s; }
.glossary-card:hover::before { background: var(--gold); }
.glossary-card:hover { border-color: rgba(201,122,58,0.2); box-shadow: 0 4px 20px rgba(201,122,58,0.06); transform: translateY(-2px); }
.glossary-term { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.glossary-abbr { display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: var(--surface-3); padding: 2px 8px; border-radius: 4px; margin-bottom: 10px; border: 1px solid var(--border); }
.glossary-def { font-size: 13px; color: var(--text-secondary); line-height: 1.65; }
.glossary-source { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }


/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.brand-footer {
  margin-top: 48px;
  padding: 22px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  gap: 20px;
  position: relative;
  z-index: 1;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo { width: 26px; height: 26px; object-fit: contain; opacity: 0.85; }
strong { color: var(--gold); font-family: var(--font-display); }


/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse-val { 0%,100% { opacity:1; } 50% { opacity:0.9; } }
@keyframes spin { to { transform: rotate(360deg); } }
.val-updated { animation: pulse-val 0.4s ease-out; }


/* ══════════════════════════════════════════════════════════════
   PDF OVERLAY
   ══════════════════════════════════════════════════════════════ */
.pdf-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 9999;
  display: none; align-items: center; justify-content: center; flex-direction: column;
  gap: 16px; color: var(--text-primary); font-family: var(--font-display); font-size: 18px;
  backdrop-filter: blur(4px);
}
.pdf-overlay.show { display: flex; }
.pdf-spinner { width: 38px; height: 38px; border: 2.5px solid var(--border-2); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.75s linear infinite; }