/* ─────────────────────────────────────────────────────────────────────
   Austral Macro · LATAM HF Macro theme
   Type:  Poppins for UI, JetBrains Mono for figures
   Color: teal-toned palette aligned with the landing page (austral teal),
          editorial single-series ink + an 8-tone country palette
   ────────────────────────────────────────────────────────────────────*/

/* ─── Austral Macro landing palette ──────────────────────────────────
   Deep teal    #081A1F    Dark background (landing)
   Panel        #0B1E23    Dark panels
   Light paper  #F2F7F6    Light background (teal-tinted)
   Teal         #2DB5A5    Primary accent
   Light teal   #4FD1C5    Secondary accent
   Mint         #6FD9CC    Tertiary accent
   Gold         #FFC233    Warning / highlight
   ──────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #f2f7f6;       /* light teal-tinted paper */
  --paper:     #ffffff;
  --ink:       #0b1e23;       /* dark teal ink */
  --ink-2:     #2a4a4d;
  --muted:     #5e8784;
  --line:      #dce8e6;       /* teal-gray hairline */
  --line-2:    #eaf2f0;
  --rule:      #b6cbc8;       /* stronger teal-gray rule */

  --accent:    #17998b;       /* teal — primary accent (darker for light bg) */
  --accent-2:  #2db5a5;       /* teal — secondary */
  --accent-3:  #4fd1c5;       /* light teal — tertiary */

  --pos:       #17998b;       /* teal-green for positive */
  --pos-bg:    rgba(23,153,139,0.12);
  --neg:       #c0533a;       /* warm red */
  --neg-bg:    rgba(192,83,58,0.10);
  --warn:      #b07a2f;       /* muted gold */

  --series:    #0b1e23;        /* charts: ink-on-paper like editorial print */
  --series-fill: rgba(11,30,35,0.05);
  --grid:      rgba(11,30,35,0.06);

  --shadow:    0 1px 2px rgba(20,20,19,0.04), 0 1px 0 rgba(20,20,19,0.02);
  --shadow-lg: 0 12px 32px rgba(20,20,19,0.10), 0 2px 0 rgba(20,20,19,0.03);
  --radius:    10px;
  --radius-sm: 6px;
  --gap:       16px;
}

html.dark {
  --bg:        #081a1f;       /* landing deep teal */
  --paper:     #0b1e23;       /* landing panel */
  --ink:       #eaf4f2;
  --ink-2:     #a9c7c4;
  --muted:     #8fb3b0;
  --line:      #16363d;
  --line-2:    #1c4a45;
  --rule:      #5e8784;

  --accent:    #2db5a5;       /* landing teal */
  --accent-2:  #4fd1c5;       /* landing light teal */
  --accent-3:  #6fd9cc;       /* landing mint */

  --pos:       #4fd1c5;
  --pos-bg:    rgba(79,209,197,0.16);
  --neg:       #ff6f91;
  --neg-bg:    rgba(255,111,145,0.14);
  --warn:      #ffc233;       /* landing gold */

  --series:    #eaf4f2;
  --series-fill: rgba(234,244,242,0.06);
  --grid:      rgba(234,244,242,0.07);

  --shadow:    0 1px 2px rgba(0,0,0,0.3), 0 1px 0 rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.4), 0 2px 0 rgba(0,0,0,0.2);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* Terminal-grade UI: Poppins for all copy (matches the landing), JetBrains
     Mono reserved for figures/kickers/tags. Poppins runs wider than the old
     Lora serif, so the base drops to 13px to keep the layout dense, not larger. */
  font: 13px/1.5 'Poppins', system-ui, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .brand-text h1, .pulse-head h2, .board-head h2, .brief-head h2,
.cc-title, .pulse-card .pc-name, .pulse-card .pc-val, .pulse-card .pc-flag,
.cat-head, .meta-label, .brand-sub, .topbar-meta .meta-value,
.btn, .seg button, .cc-mode button, .cc-stats .label, .cc-stats .val,
.country-switcher, .mini-select, #pulse-sort, .seg-label,
.empty .link {
  font-family: 'Poppins', Arial, sans-serif;
  letter-spacing: -0.005em;
}
.brief-body, .brief-body * { font-family: 'Poppins', Arial, sans-serif; }
.brief-body strong { font-family: 'Poppins', Arial, sans-serif; font-weight: 600; }
.brand-text h1 { font-weight: 700; }
.cc-title { font-weight: 600; letter-spacing: -0.01em; }
button { font: inherit; cursor: pointer; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum'; }
/* ── Tabular figures (terminal-grade number alignment) ────────────────────
   Every place figures stack into a column — card stat rows, the Latest
   Updates / What's New tables, the analytics heatmap & Taylor tables
   (.eq-table), the gears scorecard, GDP/BoP/compare tables, pulse cards and
   any mono figures — uses fixed-width digits so decimals and signs line up. */
.mono,
.pulse-card .pc-val, .pulse-card .pc-chg, .pulse-card .pc-date,
.cc-stats .stat .val, .cc-stats .stat .label,
.updates-table td, .whats-new-table td,
.eq-table td, .eq-table th,
.gear-table td, .gear-table th,
.nc-table td, .nc-table th,
.cc-table td, .cc-table th {
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ─────────── Top bar ─────────── */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 100;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-flag { font-size: 32px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06)); display: inline-flex; }
.brand-flag img { width: 30px; height: 22px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.10); display: block; }
/* Austral Macro logo mark (global / Home brand) — keep its own aspect, no flag chrome. */
.brand-flag img.brand-logo { width: auto; height: 30px; border-radius: 0; box-shadow: none; }
.brand-text h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.country-switcher {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 5px 8px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; min-width: 118px;
}
.country-switcher:hover { border-color: var(--ink-2); }
.country-switcher:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ── View tabs: Home pinned · scrolling middle · ⋯ pinned right ── */
.view-tabs {
  display: flex; align-items: center; gap: 3px; margin-left: 16px;
  min-width: 0; flex: 0 1 auto; max-width: 100%;
}
/* Only the middle scrolls; Home and the ⋯ menu stay pinned at the edges. */
.vt-scroll {
  display: flex; align-items: center; gap: 3px;
  min-width: 0; flex: 1 1 auto;
  overflow-x: auto; overflow-y: visible; scrollbar-width: thin;
}
.vt-scroll::-webkit-scrollbar { height: 4px; }
.vt-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.view-tabs .vt {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 6px 11px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm);
  font-family: 'Poppins', sans-serif; white-space: nowrap; flex: 0 0 auto; cursor: pointer;
}
.view-tabs .vt.active { background: var(--ink); color: var(--paper); }
.view-tabs .vt:hover:not(.active) { background: var(--line-2); color: var(--ink); }
.vt-home { font-weight: 600; }
.vt-sep { width: 1px; height: 20px; background: var(--line); flex: none; margin: 0 5px; }

/* Country group is revealed on country views, the doorway button off them.
   Toggled by .nav-country / .nav-global on .view-tabs. */
.vt-country-group { display: none; align-items: center; gap: 3px; }
.nav-country .vt-country-group { display: inline-flex; }
.nav-country .vt-country-entry { display: none; }
.nav-global  .vt-country-entry { display: inline-flex; }
.view-tabs .vt-country-entry::after { content: '\00a0▸'; opacity: 0.55; }

/* ─────────── Compare view ─────────── */
.compare-view {
  grid-column: 1 / -1;
  padding: 22px 28px 60px;
}
.compare-view[hidden] { display: none !important; }
.compare-head { margin-bottom: 16px; }
.compare-head h2 {
  margin: 0 0 4px; font-family: 'Poppins', sans-serif; font-size: 22px;
  font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.compare-tagline { font-size: 13px; }

/* Compare sub-tabs (Indicators · GDP contributions · External sector).
   Own class — NOT .seg — so wireSegments() doesn't force-sync it to board STATE. */
.compare-subnav {
  display: inline-flex; gap: 2px; margin-bottom: 18px;
  background: var(--line-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 3px;
}
.compare-subnav button {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: transparent; border: 0; border-radius: 6px;
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
}
.compare-subnav button:hover { color: var(--ink); }
.compare-subnav button.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
#compare-pane-contrib[hidden], #compare-pane-exttrade[hidden], #compare-pane-indicators[hidden] { display: none !important; }

.compare-countries {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px;
}
.cmp-label {
  font-family: 'Poppins', sans-serif; font-size: 11px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px;
}
.cmp-label .small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cmp-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s;
}
.cmp-chip:hover { background: var(--line-2); border-color: var(--rule); color: var(--ink); }
.cmp-chip.active {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.cmp-chip .cmp-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: none;
  background: transparent;
}
.cmp-chip.active .cmp-dot { background: currentColor; }
.cmp-chip .cmp-flag { font-size: 14px; line-height: 1; }
.topbar-spacer { flex: 1; }
.topbar-meta { display: flex; align-items: center; gap: 18px; }
.meta-item { display: flex; flex-direction: column; align-items: flex-end; }
/* applyBrand() sets [hidden] on these for global views; .meta-item's display
   would otherwise override the UA [hidden] rule, so re-assert it. */
.topbar-meta .meta-item[hidden] { display: none; }
.meta-label { font-size: 10px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.meta-value { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ─────────── Buttons ─────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink-2);
  font-weight: 500; font-size: 13px;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--ink-2); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn.sm { padding: 5px 9px; font-size: 12px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px; font-size: 11px; font-weight: 600;
}

/* ─────────── Layout ─────────── */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - 60px);
}

/* ─────────── Sidebar ─────────── */
.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 16px 0 0;
  display: flex; flex-direction: column;
  position: sticky; top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.sidebar[hidden], .main[hidden], .compare-view[hidden] { display: none !important; }
/* Collapse the layout to a single column when the sidebar is hidden so the
   active view (Country main or Compare) gets the full width. */
.layout:has(.sidebar[hidden]) { grid-template-columns: 1fr; }
.search-wrap { padding: 0 14px; }
.search-wrap input {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  font: inherit;
}
.search-wrap input::placeholder { color: var(--muted); }
.search-wrap input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); background: var(--paper); }
.sidebar-actions {
  display: flex; gap: 6px; padding: 10px 14px 6px;
  border-bottom: 1px solid var(--line-2);
}
.sidebar-bulk {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--line-2); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--ink-2); font-family: 'Poppins', sans-serif;
}
.sidebar-bulk.hidden { display: none; }
.sidebar-bulk > span:first-child { flex: 1; }
.sidebar-bulk #sb-bulk-count { font-weight: 700; color: var(--accent); }
.catalog { flex: 1; overflow-y: auto; padding: 6px 0 12px; }
.cat-block { padding: 4px 0; }
.cat-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; user-select: none;
}
.cat-head:hover { color: var(--ink-2); }
.cat-head .chev { transition: transform .15s; opacity: .7; font-size: 10px; }
.cat-block.collapsed .chev { transform: rotate(-90deg); }
.cat-block.collapsed .cat-list { display: none; }
.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 28px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  border-left: 2px solid transparent;
}
.cat-list li:hover { background: var(--bg); color: var(--ink); }
.cat-list li.active { color: var(--accent); border-left-color: var(--accent); background: var(--line-2); font-weight: 500; }
.cat-list li.staged { background: rgba(217,119,87,0.10); border-left-color: var(--accent); }
.cat-list li.staged .ind-mark { background: var(--accent); border-color: var(--accent); }
.cat-list li .ind-name { flex: 1; line-height: 1.3; }
.cat-list li .ind-mark { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--rule); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.cat-list li.active .ind-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-list li.hidden { display: none; }
.sidebar-foot { padding: 10px 14px; border-top: 1px solid var(--line-2); color: var(--muted); }

/* ─────────── Main ─────────── */
.main {
  padding: 22px 28px 60px;
  min-width: 0;
}

/* ─────────── Macro brief ─────────── */
.brief {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px 16px; margin-bottom: 22px; box-shadow: var(--shadow);
  border-left: 3px solid var(--accent);
}
.brief-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.brief-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
.brief-body { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.brief-body p { margin: 0 0 6px; }
.brief-body p:last-child { margin-bottom: 0; }
.brief-body .tag {
  display: inline-block; padding: 0 6px; margin: 0 1px;
  border-radius: 3px; font-weight: 600; font-size: 12px;
  font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum';
  vertical-align: 1px;
}
.brief-body .tag.pos { background: var(--pos-bg); color: var(--pos); }
.brief-body .tag.neg { background: var(--neg-bg); color: var(--neg); }
.brief-body .tag.flat{ background: var(--line-2); color: var(--ink-2); }
.brief-body strong { color: var(--ink); font-weight: 600; }
.brief-body em { font-style: normal; color: var(--muted); font-size: 12px; }

.mini-select, .mini-since {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); padding: 4px 8px;
  font: inherit; font-size: 12px; color: var(--ink-2);
}
.mini-since { width: 130px; }
.seg-label { padding: 0 4px 0 6px; }

/* "Since…" pickers: Month/Year (or Day/Month/Year) <select> pair, replacing
   native <input type="month"/"date"> so displayed text can never be
   re-localized into Spanish by the browser/OS — see app.js buildMonthYearPicker. */
.since-composite { display: inline-flex; align-items: center; width: auto; gap: 4px; padding: 3px 6px; }
.since-composite select {
  border: none; background: transparent; font: inherit; font-size: 12px;
  color: var(--ink-2); padding: 0; margin: 0; cursor: pointer;
}
.since-composite select:focus { outline: none; }

/* ─────────── Pulse ─────────── */
.pulse { margin-bottom: 26px; }
.pulse-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.pulse-head h2 {
  margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
.pulse-head h2::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 999px;
  vertical-align: middle; margin-right: 8px;
  transform: translateY(-1px);
}
.pulse-controls { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.pulse-controls select {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); padding: 4px 8px; font: inherit;
  color: var(--ink-2);
}
.pulse-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.pulse-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
  position: relative;
}
.pulse-card:hover { border-color: var(--ink-2); box-shadow: var(--shadow-lg); }
.pulse-card .pc-name { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; line-height: 1.3; min-height: 31px; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Reserve room for the absolutely-positioned σ badge so long titles ellipsis
   instead of running under it (title "General government — ove…" + "HOT x.xσ"). */
.pulse-card.has-flag .pc-name { padding-right: 62px; }
.pulse-card.has-flag-sm .pc-name { padding-right: 38px; }
.pulse-card .pc-val  { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-feature-settings: 'tnum'; }
.pulse-card .pc-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.pulse-card .pc-chg  { font-size: 13px; font-weight: 600; padding: 1px 7px; border-radius: 4px; }
.pulse-card .pc-chg.pos { background: var(--pos-bg); color: var(--pos); }
.pulse-card .pc-chg.neg { background: var(--neg-bg); color: var(--neg); }
.pulse-card .pc-chg.flat { background: var(--line-2); color: var(--muted); }
.pulse-card .pc-date { font-size: 11px; color: var(--muted); }
.pulse-card .pc-spark { height: 42px; margin-top: 8px; position: relative; }
.pulse-card .pc-spark canvas { width: 100% !important; height: 100% !important; }
.pulse-card .pc-flag {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap; max-width: 70px;
}
.pulse-card .pc-flag.warn { background: var(--warn); }
.pulse-card .pc-flag.cool { background: #475569; }

/* ─────────── Board controls ─────────── */
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin: 8px 0 14px;
}
.board-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.board-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg {
  display: inline-flex; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
/* Author `display` beats the UA [hidden] rule, so every context-dependent
   segment (gdp-agg, bop-agg, bop-contrib-unit, gdp-contrib-basis, fiscal-depth)
   stayed on screen while inert — e.g. Sum/Avg showing on the quarterly BoP axis,
   where it folds nothing. Same trap already documented for .topbar-meta above. */
.seg[hidden] { display: none; }
.seg button {
  border: none; background: transparent; color: var(--muted);
  padding: 5px 10px; font-size: 12px; font-weight: 500;
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: none; }
.seg button.active { background: var(--ink); color: var(--paper); }
.seg button:hover:not(.active) { color: var(--ink); background: var(--bg); }
.seg button.seg-disabled { opacity: 0.38; pointer-events: none; }
.vsep { width: 1px; height: 22px; background: var(--line); }

/* ─────────── Board grid ─────────── */
.board {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
}

/* Commodities view — two columns (prices | terms-of-trade) laid out as a 5-row
   grid (headers · charts · captions · table headers · tables). Both columns share
   the row tracks so everything aligns; the uniform row-gap gives symmetric
   spacing. Collapses to a single column on narrow screens. */
.cmd-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 28px; row-gap: 14px; align-items: stretch; margin-top: 14px;
}
.cmd-table-host { min-width: 0; overflow-x: auto; }
/* Uniform spacing comes from the grid row-gap, so zero the inner margins. */
.commodities-view .cmd-grid .board-head { margin: 0; }
.commodities-view .cmd-caption { margin: 0; align-self: start; }
.commodities-view .cmd-chartsec { margin: 0; }
@media (max-width: 1080px) {
  .cmd-grid { grid-template-columns: 1fr; }
}
/* Commodities chart cards — give each chart a defined frame so it reads as a
   panel rather than floating on the page background. */
.commodities-view .cmd-chartsec .card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow);
}
.commodities-view .card-head { margin-bottom: 8px; }
.commodities-view .card-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); letter-spacing: -0.01em; }
.commodities-view .card-chart { position: relative; }
/* Colour swatch on a selected table row — replaces the chart legend so the
   prices and terms-of-trade panels stay symmetric (neither chart has a legend). */
.cmd-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 999px;
  margin-right: 7px; vertical-align: middle; flex: none;
}
/* Collapsible category sections in the prices table (like the Home table). */
.commodities-view .eq-table tr.cmd-ghead { cursor: pointer; user-select: none; }
.commodities-view .eq-table tr.cmd-ghead > td.cmd-ghead-cell {
  padding: 7px 10px; background: var(--line-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.commodities-view .eq-table tr.cmd-ghead:hover > td.cmd-ghead-cell { background: var(--line); }
.commodities-view .cmd-ghead .wn-chev { display: inline-block; color: var(--muted); transition: transform 0.15s ease; margin-right: 4px; font-size: 11px; }
.commodities-view .cmd-ghead.collapsed .wn-chev { transform: rotate(-90deg); }
.cmd-gname { font-weight: 700; color: var(--ink); }
.cmd-gcount {
  font-size: 10px; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; margin-left: 7px;
  font-variant-numeric: tabular-nums;
}
.cmd-gsel { font-size: 10px; color: var(--accent); font-weight: 600; margin-left: 8px; }
.commodities-view .eq-table tr.cmd-rhidden { display: none; }

/* ── IMF Projections view ─────────────────────────────────────────────── */
/* pj-seg mirrors .seg, but with a private class so app.js wireSegments() (which
   force-syncs every .seg to the country board STATE by data-key) leaves it be. */
.pj-seg {
  display: inline-flex; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.pj-seg button {
  border: none; background: transparent; color: var(--muted);
  padding: 5px 10px; font-size: 12px; font-weight: 500;
  border-right: 1px solid var(--line); cursor: pointer;
}
.pj-seg button:last-child { border-right: none; }
.pj-seg button.active { background: var(--ink); color: var(--paper); }
.pj-seg button:hover:not(.active) { color: var(--ink); background: var(--bg); }
.projections-view .card-chart { position: relative; }
.projections-view .pj-chartsec { grid-template-columns: 1fr; }
.projections-view .pj-board { margin-top: 6px; }
/* country × year matrix — horizontally scrollable with a pinned country column */
.projections-view .pj-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.projections-view .pj-table { min-width: 100%; }
.projections-view .pj-table th.pj-country-col,
.projections-view .pj-table td.pj-country-col {
  position: sticky; left: 0; z-index: 2; text-align: left; white-space: nowrap;
  background: var(--paper); box-shadow: 1px 0 0 var(--line);
}
.projections-view .pj-table th.pj-country-col { z-index: 3; }
.projections-view .pj-table td.pj-country-col .flag-img { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }
/* forecast columns (years ≥ projStartYear) get a faint tint */
.projections-view .pj-table th.pj-fcast,
.projections-view .pj-table td.pj-fcast { background: var(--line); }
.projections-view .pj-table td.pj-fcast { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.projections-view .cmp-chip .flag-img { width: 15px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.projections-view #pj-variable { max-width: 260px; }
/* the two leading average columns get a subtle separation from the year columns */
.projections-view .pj-table th.pj-avg,
.projections-view .pj-table td.pj-avg { background: color-mix(in srgb, var(--ink) 5%, transparent); font-weight: 600; }
/* group header row: Historical (avg) vs IMF projections */
.projections-view .pj-table .pj-grouprow th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 4px 8px; }
.projections-view .pj-table .pj-grp.center { text-align: center; }
.projections-view .pj-table .pj-grp-hist { color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent); border-bottom: 2px solid var(--rule); }
.projections-view .pj-table .pj-grp-proj { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom: 2px solid var(--accent); }
/* every projection (forecast) column tinted; first one carries the divider */
.projections-view .pj-table th.pj-fcast,
.projections-view .pj-table td.pj-fcast { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.projections-view .pj-table th.pj-projstart,
.projections-view .pj-table td.pj-projstart { border-left: 2px solid var(--accent); }
/* table legend */
.projections-view .pj-legend { margin: 8px 0 0; display: flex; align-items: center; gap: 4px; }
.projections-view .pj-legend-hist,
.projections-view .pj-legend-proj { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.projections-view .pj-legend-hist { background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); }
.projections-view .pj-legend-proj { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--accent); }
/* figure title / subtitle / source — J.P.Morgan-style layout */
.projections-view .pj-fig-head { flex-direction: column; align-items: flex-start; gap: 1px; }
.projections-view .pj-fig-title { font-size: 15px; font-weight: 700; }
.projections-view .pj-fig-sub { margin: 0; }
.projections-view .pj-fig-source { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }

/* ── Analytics view — Local Debt Heatmap ─────────────────────────────────── */
.analytics-view .an-board { margin-top: 6px; }
.analytics-view .an-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.analytics-view .an-table { min-width: 100%; }
/* Default fit: tighter than the inherited .eq-table metrics so the 21 columns
   come close to one screen. The .an-table-scroll ancestor bumps specificity
   above the later-in-file .equities-view .eq-table rules. */
.analytics-view .an-table-scroll .an-table { font-size: 12px; }
.analytics-view .an-table-scroll .an-table th { padding: 6px 7px; }
.analytics-view .an-table-scroll .an-table td { padding: 5px 7px; }
/* density control — user picks narrower or wider columns (persisted) */
.analytics-view .an-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.analytics-view .an-seg-btn {
  border: none; background: transparent; color: var(--ink-2);
  font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.analytics-view .an-seg-btn:hover { color: var(--ink); }
.analytics-view .an-seg-btn.on { background: var(--line-2); color: var(--ink); font-weight: 600; }
.analytics-view .an-d-compact .an-table-scroll .an-table { font-size: 10.5px; }
.analytics-view .an-d-compact .an-table-scroll .an-table th { padding: 4px 4px; font-size: 10px; }
.analytics-view .an-d-compact .an-table-scroll .an-table td { padding: 3px 4px; }
.analytics-view .an-d-compact .an-table .an-grouprow th { font-size: 9.5px; padding: 3px 4px; letter-spacing: 0; }
.analytics-view .an-d-compact .an-regime { font-size: 9px; padding: 0 5px; }
.analytics-view .an-d-wide .an-table-scroll .an-table { font-size: 13px; }
.analytics-view .an-d-wide .an-table-scroll .an-table th { padding: 8px 11px; }
.analytics-view .an-d-wide .an-table-scroll .an-table td { padding: 7px 11px; }
.analytics-view .an-table th.an-country-col,
.analytics-view .an-table td.an-country-col {
  position: sticky; left: 0; z-index: 2; text-align: left; white-space: nowrap;
  background: var(--paper); box-shadow: 1px 0 0 var(--line);
}
.analytics-view .an-table th.an-country-col { z-index: 3; }
.analytics-view .an-table td.an-country-col .flag-img { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }
/* group header row (column families) */
.analytics-view .an-table .an-grouprow th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 4px 8px; text-align: center; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-bottom: 2px solid var(--rule); border-left: 1px solid var(--line);
}
.analytics-view .an-table .an-grouprow th:first-child { border-left: none; background: var(--paper); }
.analytics-view .an-table .an-grouprow th.an-grp-key { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-bottom-color: var(--accent); }
/* vertical separation between column families (.an-gs = first cell of a group) */
.analytics-view .an-table td.an-gs,
.analytics-view .an-table th.an-gs { border-left: 1px solid var(--line); }
/* regime sub-header rows */
.analytics-view .an-table .an-cls-row td {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2); background: var(--line-2); padding: 4px 10px;
}
.analytics-view .an-regime { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.analytics-view .an-regime-it { color: var(--pos); border-color: var(--pos); background: var(--pos-bg); }
.analytics-view .an-regime-nonit { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.analytics-view .an-regime-dollarized { color: var(--accent-2); border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
/* cell states */
.analytics-view .an-table td.an-na { color: var(--muted); opacity: 0.45; }
.analytics-view .an-table td.an-stale { opacity: 0.45; }
.analytics-view .an-table td.an-noted { text-decoration: underline dotted; text-underline-offset: 3px; }
.analytics-view .an-table td.pos { color: var(--pos); }
.analytics-view .an-table td.neg { color: var(--neg); }
.analytics-view .an-table td.an-below { color: var(--accent-2); }   /* inflation under the target band */
/* ex-ante real rate heat scale */
.analytics-view .an-heat-p2 { background: color-mix(in srgb, var(--pos) 26%, transparent); }
.analytics-view .an-heat-p1 { background: color-mix(in srgb, var(--pos) 13%, transparent); }
.analytics-view .an-heat-0  { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.analytics-view .an-heat-n1 { background: color-mix(in srgb, var(--neg) 18%, transparent); }
.analytics-view .an-heat-chip { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; border: 1px solid var(--line); }
.analytics-view .an-legend { margin: 8px 2px 0; }
/* missing-data worklist */
.analytics-view .an-worklist { margin-top: 16px; padding: 14px 16px; }
.analytics-view .an-worklist-items { list-style: none; margin: 8px 0 0; padding: 0; }
.analytics-view .an-worklist-items li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.analytics-view .an-worklist-items li:last-child { border-bottom: none; }
.analytics-view .an-wl-cty { flex: 0 0 150px; white-space: nowrap; }
.analytics-view .an-wl-cty .flag-img { width: 15px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.analytics-view .an-wl-gaps { color: var(--muted); }
/* ── Analytics sub-tools (Heatmap | Taylor Rule | Parameters) ── */
.analytics-view .an-tools { margin-top: 10px; }
.analytics-view .an-tools .an-seg-btn { font-size: 12px; padding: 5px 14px; }
/* Taylor Rule tool */
.analytics-view .ty-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 14px; align-items: start; margin-top: 6px; }
@media (max-width: 1100px) { .analytics-view .ty-layout { grid-template-columns: 1fr; } }
.analytics-view .ty-chart-card, .analytics-view .ty-params, .analytics-view .ty-shock {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; box-shadow: var(--shadow);
}
.analytics-view .ty-chart-wrap { position: relative; height: 360px; margin-top: 4px; }
/* Lock every Chart.js canvas to its (position:relative, fixed-height)
   container. Without this the canvas keeps the pixel size Chart.js last wrote
   inline, so between a DOM resize and Chart.js's async ResizeObserver tick the
   bitmap is left stretched/squashed (visible on window resize and view/country
   switches). Mirrors the .gdp-card canvas / .cc-canvas-wrap canvas rules. */
.card-chart canvas,
.analytics-view .ty-chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.analytics-view .ty-params-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 10px 0 8px; }
.analytics-view .ty-field { display: flex; flex-direction: column; gap: 4px; cursor: help; }
.analytics-view .ty-field-label { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.analytics-view .ty-input {
  width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink);
}
.analytics-view .ty-input:focus { outline: none; border-color: var(--accent); }
.analytics-view .ty-select { cursor: pointer; }
/* section heading inside the parameter card (rule coefficients / output gap) */
.analytics-view .ty-sub {
  margin: 12px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2);
  border-top: 1px solid var(--line); padding-top: 10px;
}
/* derived read-back next to a parameter (ρ monthly + half-life, latest gap) */
.analytics-view .ty-field-hint { float: right; font-weight: 500; color: var(--muted); font-size: 10.5px; }
.analytics-view .ty-readout { display: flex; align-items: center; background: var(--line-2); cursor: help; }
.analytics-view .ty-conf { margin-left: 4px; font-size: 7px; vertical-align: 2px; }
.analytics-view .ty-conf-we { color: var(--pos); }
.analytics-view .ty-conf-em { color: var(--accent-2); }
.analytics-view .ty-conf-co { color: var(--warn); }
.analytics-view .ty-conf-sp { color: var(--neg); }
.analytics-view .ty-conf-no { color: var(--muted); }
.analytics-view .ty-chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap; color: var(--muted);
}
.analytics-view .ty-chip.ty-tight { color: var(--pos); border-color: var(--pos); background: var(--pos-bg); }
.analytics-view .ty-chip.ty-loose { color: var(--neg); border-color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
.analytics-view .ty-chip.ty-inline { color: var(--accent-2); border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
/* shock simulator */
.analytics-view .ty-shock { margin-top: 14px; }
.analytics-view .ty-shock-grid { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; gap: 16px; margin-top: 8px; }
@media (max-width: 900px) { .analytics-view .ty-shock-grid { grid-template-columns: 1fr; } }
.analytics-view .ty-shock-h { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); }
.analytics-view .ty-shock-col .ty-field { margin-bottom: 8px; }
.analytics-view .ty-shock-readout { font-size: 13px; line-height: 1.75; }
.analytics-view .ty-shock-readout b { color: var(--accent); }
.analytics-view .ty-shock-presets { display: flex; gap: 6px; align-items: center; }
.analytics-view .ty-nl { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; margin-top: 2px; }
.analytics-view .ty-nl input { accent-color: var(--accent); }
.analytics-view .ty-shock-proj { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.analytics-view .ty-shock-proj-wrap { position: relative; height: 220px; }
.analytics-view .ty-chip.ty-recv { color: var(--pos); border-color: var(--pos); background: var(--pos-bg); }
.analytics-view .ty-chip.ty-pay { color: var(--neg); border-color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); }
/* taylor cross-country board + params tables */
.analytics-view .ty-board-head, .analytics-view .ty-pm-head { margin: 22px 0 8px; }
.analytics-view .ty-table { font-size: 12.5px; }
.analytics-view .ty-table th { padding: 6px 9px; }
.analytics-view .ty-table td { padding: 5px 9px; }
.analytics-view .ty-row { cursor: pointer; }
.analytics-view .ty-row:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.analytics-view .ty-row-on td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.analytics-view .ty-pm-cell { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.analytics-view .ty-pm-src { max-width: 34em; }
.analytics-view .ty-conf-chip { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.analytics-view .ty-refs { margin: 6px 0 20px; padding-left: 22px; line-height: 1.6; }

/* ── EM Heat Maps view (Barclays-style oil / vulnerability cuadros) ───────── */
/* Blue intensity scale (light→dark) echoing the figure; single hue so darker =
   more vulnerable reads at a glance, kept distinct from the teal accent and
   legible in both themes. */
.heatmap-view {
  --hm-t0: #e8eef8; --hm-t1: #a6c0e3; --hm-t2: #3f649c; --hm-t2-fg: #ffffff;
}
html.dark .heatmap-view {
  --hm-t0: rgba(125,160,220,0.14); --hm-t1: rgba(125,160,220,0.34); --hm-t2: #43679e; --hm-t2-fg: #f3f8ff;
}
/* seg mirrors .pj-seg (private class so app.js wireSegments leaves it alone) */
.heatmap-view .hm-seg {
  display: inline-flex; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.heatmap-view .hm-seg button {
  border: none; background: transparent; color: var(--muted);
  padding: 5px 11px; font-size: 12px; font-weight: 500;
  border-right: 1px solid var(--line); cursor: pointer;
}
.heatmap-view .hm-seg button:last-child { border-right: none; }
.heatmap-view .hm-seg button.active { background: var(--ink); color: var(--paper); }
.heatmap-view .hm-seg button:hover:not(.active) { color: var(--ink); background: var(--bg); }
.heatmap-view .hm-board { margin-top: 6px; }
.heatmap-view .hm-fig { padding: 14px 16px 12px; }
.heatmap-view .hm-fig-head { flex-direction: column; align-items: flex-start; gap: 1px; }
.heatmap-view .hm-fig-title { font-size: 15px; font-weight: 700; }
.heatmap-view .hm-fig-sub { margin: 0; }
/* horizontally-scrollable table with a pinned first (country) column */
.heatmap-view .hm-table-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 10px;
}
.heatmap-view .hm-table {
  border-collapse: separate; border-spacing: 0; min-width: 100%;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.heatmap-view .hm-table th, .heatmap-view .hm-table td {
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.heatmap-view .hm-table td.hm-cell {
  padding: 5px 9px; text-align: right; cursor: pointer; min-width: 52px;
}
.heatmap-view .hm-table td.hm-cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* sticky first column (country) */
.heatmap-view .hm-table th.hm-country-col,
.heatmap-view .hm-table td.hm-country-col {
  position: sticky; left: 0; z-index: 2; text-align: left; padding: 5px 12px 5px 10px;
  background: var(--paper); box-shadow: 1px 0 0 var(--line);
}
.heatmap-view .hm-table thead th.hm-country-col { z-index: 3; }
.heatmap-view .hm-table td.hm-country-col .flag-img { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.heatmap-view .hm-flag-emoji { margin-right: 5px; font-size: 13px; }
/* header row 1 — column-group families */
.heatmap-view .hm-table .hm-grouprow th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 5px 8px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-bottom: 2px solid var(--rule); vertical-align: bottom;
}
.heatmap-view .hm-table .hm-grouprow th.center { text-align: center; }
.heatmap-view .hm-table .hm-grouprow th.hm-corner { background: var(--paper); }
/* header row 2 — per-column labels */
.heatmap-view .hm-table .hm-labelrow th.hm-colhead {
  padding: 6px 9px; text-align: right; vertical-align: top; cursor: pointer;
  background: var(--line-2); color: var(--ink-2); max-width: 130px; white-space: normal;
}
.heatmap-view .hm-table .hm-labelrow th.hm-colhead:hover { color: var(--ink); }
.heatmap-view .hm-table .hm-labelrow th.hm-sorted { color: var(--accent); }
.heatmap-view .hm-col-label { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.heatmap-view .hm-col-unit { display: block; font-size: 9.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.heatmap-view .hm-table .hm-labelrow th.hm-sorted .hm-col-unit { color: var(--accent); }
.heatmap-view .hm-table .hm-labelrow th.hm-country-col { vertical-align: bottom; background: var(--paper); }
/* header row 3 — criteria thresholds */
.heatmap-view .hm-table .hm-critrow th {
  padding: 4px 9px; text-align: right; font-size: 10px; font-weight: 600;
  color: var(--muted); background: var(--paper); border-bottom: 2px solid var(--rule);
}
.heatmap-view .hm-table .hm-critrow th.hm-crit-label {
  text-align: left; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em;
}
/* column-family dividers */
.heatmap-view .hm-table th.hm-gs, .heatmap-view .hm-table td.hm-gs { border-left: 1px solid var(--rule); }
/* group subtitle rows (exporters/importers or region blocks) */
.heatmap-view .hm-table tr.hm-grouphdr td {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2); background: var(--line-2); padding: 5px 12px;
  position: sticky; left: 0;
}
.heatmap-view .hm-table tr.hm-coming td { padding: 8px 12px; text-align: center; }
.heatmap-view .hm-table tbody tr:not(.hm-grouphdr):not(.hm-coming):hover td.hm-country-col { background: var(--line-2); }
/* tier shading */
.heatmap-view .hm-table td.hm-t0 { background: var(--hm-t0); }
.heatmap-view .hm-table td.hm-t1 { background: var(--hm-t1); }
.heatmap-view .hm-table td.hm-t2 { background: var(--hm-t2); color: var(--hm-t2-fg); }
.heatmap-view .hm-table td.hm-na { color: var(--muted); opacity: 0.5; }
/* curated cells — dotted underline cue */
.heatmap-view .hm-table td.hm-curated { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* legend + footnotes */
.heatmap-view .hm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 2px 0; }
.heatmap-view .hm-legend-title { text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; }
.heatmap-view .hm-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.heatmap-view .hm-chip { display: inline-block; width: 16px; height: 11px; border-radius: 2px; border: 1px solid var(--line); }
.heatmap-view .hm-chip.hm-t0 { background: var(--hm-t0); }
.heatmap-view .hm-chip.hm-t1 { background: var(--hm-t1); }
.heatmap-view .hm-chip.hm-t2 { background: var(--hm-t2); border-color: var(--hm-t2); }
.heatmap-view .hm-chip.hm-curated-chip { border-style: dotted; border-color: var(--muted); background: transparent; }
.heatmap-view .hm-foot { margin: 12px 2px 0; line-height: 1.6; display: flex; flex-direction: column; gap: 3px; }
.heatmap-view .hm-foot .hm-sources { padding-top: 4px; border-top: 1px solid var(--line); }
.heatmap-view .hm-empty { padding: 40px 20px; text-align: center; }
.heatmap-view .hm-empty h3 { margin: 0 0 6px; }
/* curated badge inside the shared .meta-popover */
.hm-pop-badge {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 1px 7px; margin-bottom: 6px; border-radius: 999px;
  color: var(--accent); border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Sticky board controls — keep range/mode toggles in view while scrolling a
   long board. Scoped to the country / GDP / BoP control bars (direct children
   of .main); the Home view's nested board-heads are unaffected. */
.main > .board-head {
  position: sticky; top: 56px; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line);
  margin: 8px 0 14px; padding: 8px 0;
}
.chart-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 340px;
  position: relative;
}
.cc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.cc-title-wrap { flex: 1; min-width: 0; }
.cc-title { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.cc-sub { color: var(--ink-2); font-size: 11px; font-weight: 600; margin-top: 2px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cc-chip {
  font-size: 10px; font-weight: 600; line-height: 1.6; color: var(--ink-2);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px;
}
.cc-chip-tag {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent); letter-spacing: .01em;
}
.cc-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.cc-actions button {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  padding: 4px 6px; border-radius: 4px; line-height: 1; font-size: 13px;
}
.cc-actions button:hover { background: var(--bg); color: var(--ink); border-color: var(--line); }
.cc-actions button.cc-select,
.cc-select {
  width: 18px; height: 18px; border: 1.5px solid var(--rule);
  border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--paper); box-sizing: border-box; padding: 0;
  color: var(--muted);
}
.cc-actions button.cc-select:hover { border-color: var(--accent); background: var(--paper); color: var(--muted); }
.cc-actions button.cc-select.on,
.cc-select.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cc-actions button.cc-select.on:hover { background: var(--accent); color: #fff; }
.cc-select::after { content: '✓'; font-size: 12px; line-height: 1; opacity: 0; }
.cc-select.on::after { opacity: 1; }
.cc-add, .cc-yaxis {
  border: 1px dashed var(--rule); background: transparent; color: var(--muted);
  width: 22px; height: 22px; border-radius: 5px; padding: 0;
  font-size: 12px; line-height: 1; font-weight: 600; font-family: 'Poppins', sans-serif;
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-add { font-size: 14px; }
.cc-add:hover, .cc-yaxis:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.cc-yaxis.on { background: var(--accent); border: 1px solid var(--accent); border-style: solid; color: #fff; }

/* Editable chart title — visible affordance only on hover/focus */
.cc-title { outline: none; cursor: text; padding: 1px 4px; margin-left: -4px; border-radius: 4px; transition: background 0.12s; }
.cc-title:hover { background: var(--line-2); }
.cc-title:focus { background: var(--paper); box-shadow: inset 0 0 0 1px var(--accent); cursor: text; }
.cc-name-reset {
  background: none; border: none; color: var(--accent); cursor: pointer;
  padding: 0 0 0 6px; font-size: 11px; font-family: 'Poppins', sans-serif; text-decoration: underline;
}
.cc-name-reset:hover { color: var(--neg); }

/* Y-axis popover */
.yaxis-popover {
  position: absolute; z-index: 200; width: 240px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px; font-family: 'Poppins', sans-serif;
}
.yp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.yp-row label { font-size: 12px; color: var(--muted); font-weight: 500; }
.yp-row input {
  flex: 1; max-width: 130px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 5px 8px; font: inherit; font-size: 12px; color: var(--ink); background: var(--bg);
  font-family: 'JetBrains Mono', monospace; text-align: right;
}
.yp-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.yp-buttons { display: flex; gap: 8px; margin: 4px 0 8px; }
.yp-buttons button {
  flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 500; font-family: 'Poppins', sans-serif;
}
.yp-buttons .yp-apply { background: var(--accent); color: #fff; border-color: var(--accent); }
.yp-buttons button:hover { filter: brightness(0.95); }
.cc-vs { color: var(--muted); font-size: 11px; font-weight: 500; margin-left: 4px; }
.cc-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
.cc-leg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-2);
  font-family: 'Poppins', sans-serif; font-weight: 500;
}
.cc-leg-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.cc-leg-remove {
  background: none; border: none; color: var(--muted);
  padding: 0 0 0 2px; font-size: 13px; line-height: 1; cursor: pointer;
}
.cc-leg-remove:hover { color: var(--neg); }

.series-picker {
  position: absolute; z-index: 200; width: 340px; max-height: 460px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Poppins', sans-serif;
}
.sp-head {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.sp-head strong { font-size: 12px; color: var(--ink); font-weight: 600; }
.sp-search {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); padding: 6px 10px; font: inherit; font-size: 13px;
  color: var(--ink);
}
.sp-search::placeholder { color: var(--muted); }
.sp-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 6px;
}
.sp-close:hover { color: var(--ink); }
.sp-body { overflow-y: auto; padding: 4px 0 8px; }
.sp-cat { padding: 4px 0; }
.sp-cat-h { padding: 6px 12px 4px; font-size: 10px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.sp-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.sp-toggle:hover { color: var(--ink); }
.sp-cat ul.hidden { display: none; }
.sp-cat ul { list-style: none; margin: 0; padding: 0; }
.sp-cat li { padding: 5px 12px 5px 18px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sp-cat li:hover { background: var(--line-2); color: var(--ink); }
/* Commodities section of the picker — set apart from country indicators. */
.sp-cat-cmd { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.sp-cat-cmd .sp-cat-h { color: var(--accent); }

.cc-stats { display: flex; gap: 14px; font-size: 12px; padding: 4px 0 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.cc-stats .stat { display: flex; flex-direction: column; }
.cc-stats .label { color: var(--muted); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.cc-stats .val { font-weight: 600; color: var(--ink); font-feature-settings: 'tnum'; }
.cc-stats .val.pos { color: var(--pos); }
.cc-stats .val.neg { color: var(--neg); }
.cc-canvas-wrap { flex: 1; position: relative; min-height: 300px; }
.cc-canvas-wrap canvas { width: 100% !important; height: 100% !important; display: block; }

/* Per-chart mini segment (mode override) */
.cc-mode {
  display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
  margin-right: 4px;
}
.cc-mode button {
  background: transparent; border: none; color: var(--muted);
  padding: 3px 8px; font-size: 11px; font-weight: 500;
  border-right: 1px solid var(--line);
}
.cc-mode button:last-child { border-right: none; }
.cc-mode button.active { background: var(--ink); color: var(--paper); }
.cc-mode button:hover:not(.active) { color: var(--ink); background: var(--bg); }
.cc-mode button.override { color: var(--accent); }
.cc-mode button.override.active { background: var(--accent); color: #fff; }

/* ─────────── Empty state / footer ─────────── */
.empty {
  background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius);
  padding: 40px 30px; text-align: center; color: var(--muted);
}
.empty .link {
  background: none; border: none; color: var(--accent); font-weight: 600; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 12px; }

/* ─────────── Toast ─────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 9px 16px;
  border-radius: 999px; font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─────────── Scrollbars ─────────── */
.catalog::-webkit-scrollbar { width: 8px; }
.catalog::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.catalog::-webkit-scrollbar-thumb:hover { background: var(--rule); }

/* ─────────── Responsive ─────────── */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; max-height: 380px; border-right: none; border-bottom: 1px solid var(--line); }
  .main { padding: 16px; }
  .topbar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .topbar-meta { flex-wrap: wrap; gap: 12px; }
}

/* ─── GDP-by-expenditure view ─────────────────────────────────────── */
.gdp-view .compare-head { padding: 18px 24px 0; }
.gdp-countries.compare-countries { padding: 8px 24px 0; }

.gdp-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.gdp-card .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.gdp-card .card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gdp-card .card-title { font-size: 14px; margin: 0; font-weight: 700; }
.gdp-card .card-asof { white-space: nowrap; }
.gdp-card .card-stats {
  display: flex;
  gap: 16px;
  margin: 4px 0 8px;
  font-family: 'JetBrains Mono', monospace;
}
.gdp-card .stat { display: flex; flex-direction: column; }
.gdp-card .stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gdp-card .stat-value { font-size: 14px; font-weight: 500; color: var(--ink); }
.gdp-card .stat-value.pos { color: var(--pos); }
.gdp-card .stat-value.neg { color: var(--neg); }
.gdp-card .chart-wrap { flex: 1; min-height: 200px; position: relative; }
.gdp-card canvas { display: block; width: 100% !important; height: 100% !important; }

.gdp-pick {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.gdp-pick input[type="checkbox"] {
  width: 14px; height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent, #3b82f6);
}

/* Generic "copy chart image" button for canvas charts outside the main
   country board — GDP, Public finance, Trade, Commodities, GDP nowcast (and
   the Compare board actions row). A small discreet ⧉ pinned top-right over
   the chart; the containing element just needs position:relative (most
   chart-wrap variants already declare it — this is the safe fallback). */
.chart-wrap { position: relative; }
.chart-copy-btn {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  font: inherit; font-size: 12px; line-height: 1; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 6px; cursor: pointer; opacity: .6;
  transition: opacity .1s, color .1s, border-color .1s;
}
.chart-copy-btn:hover { opacity: 1; color: var(--ink); border-color: var(--rule); }

#gdp-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  padding: 14px 24px 24px;
}

/* ─── GDP table mode ──────────────────────────────────────────────── */
.gdp-table-wrap {
  padding: 14px 24px 24px;
  overflow-x: auto;
}
.gdp-table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.gdp-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  font-size: 11px;
}
.gdp-table thead th:first-child {
  text-align: left;
  position: sticky; left: 0; z-index: 2;
  background: var(--card);
}
.gdp-table tbody th {
  text-align: left;
  font-weight: 500;
  padding: 6px 10px;
  white-space: nowrap;
  background: var(--card);
  position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--line);
  color: var(--ink);
}
.gdp-table tbody td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--ink);
}
.gdp-table tbody tr:last-child td { border-bottom: 0; }
.gdp-table td.pos { color: var(--pos); }
.gdp-table td.neg { color: var(--neg); }
.gdp-table tbody tr.gdp-row { background: var(--line-2); font-weight: 600; }
.gdp-table tbody tr.gdp-row th { background: var(--line-2); }
.gdp-table .muted { color: var(--muted); font-style: italic; }

/* ─── Reading hierarchy in the components tables (BoP + Public finance) ──
   Both tables are trees rendered flat, so before this every row carried the
   same weight: "Goods exports" looked exactly as important as the current
   account it sits three levels under. Four tiers, encoded redundantly
   (weight + indent + rule + colour) so the structure survives greyscale,
   a squint, and the copied PNG:
     head   headline balance — what the block is read for   bold + accent + bar
     l0     other identity term / top-of-tree aggregate     semibold, own rule
     l1     component of the line above                     regular, indented
     l2/l3  gross flow or deep breakdown — the accessory    light italic, muted
   Colour is the ACCENT (teal), never --pos/--neg: those already mean the sign
   of a value in the same row, and reusing them would collide. */
/* Tiers are declared shallowest-first: a headline row also carries its level
   class (bop-head sits on a bop-l0 row), so the headline rules must come LAST
   to win the equal-specificity tie. */
.gdp-table tbody tr.bop-l2 th {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2);
  padding-left: 42px;
}
/* Fiscal indents its label inline (its tree is arbitrarily deep), so only the
   type treatment is set here. */
.gdp-table tbody tr.fiscal-l2 th {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2);
}
.gdp-table tbody tr.bop-l2 td,
.gdp-table tbody tr.fiscal-l2 td { color: var(--ink-2); }

.gdp-table tbody tr.bop-l1 th,
.gdp-table tbody tr.fiscal-l1 th { font-weight: 500; padding-left: 26px; }

.gdp-table tbody tr.bop-l0 th,
.gdp-table tbody tr.fiscal-l0 th,
.gdp-table tbody tr.fiscal-l0-agg th { font-weight: 600; font-style: normal; }

.gdp-table tbody tr.bop-memo th,
.gdp-table tbody tr.fiscal-memo th {
  font-weight: 500;
  font-style: italic;
  color: var(--muted);
}

/* The headline balances — last, so they win over their own level class. */
.gdp-table tbody tr.bop-block th,
.gdp-table tbody tr.bop-block td,
.gdp-table tbody tr.fiscal-head th,
.gdp-table tbody tr.fiscal-head td {
  border-top: 1px solid var(--rule);
}
.gdp-table tbody tr.bop-head th,
.gdp-table tbody tr.fiscal-head th {
  font-weight: 700;
  font-style: normal;
  color: var(--accent);
  /* Left marker on the sticky label cell — a border would shift the column,
     an inset shadow paints inside the existing box. */
  box-shadow: inset 3px 0 0 var(--accent);
}
.gdp-table tbody tr.bop-head td,
.gdp-table tbody tr.fiscal-head td { font-weight: 700; }

/* The signed value colours must still win over the tier colour above. */
.gdp-table tbody td .pos { color: var(--pos); }
.gdp-table tbody td .neg { color: var(--neg); }

/* When the board contains a table, drop the card-grid layout so the
   table can fill the full board width instead of one ~360px column.
   Applies to both the GDP and BoP boards (they share .gdp-table markup). */
#gdp-board:has(.gdp-table-wrap),
#bop-board:has(.gdp-table-wrap) {
  display: block;
  padding: 0;
}
.gdp-table-wrap { width: 100%; box-sizing: border-box; }
.gdp-table-wrap .gdp-table { width: 100%; min-width: max-content; }

/* Cross-country wide table: bleed past .main's horizontal padding to use
   the full viewport width, and tighten cell padding so more quarters fit. */
.gdp-table-wrap.gdp-table-wide {
  padding: 14px 24px 24px;
  margin-left: -28px;
  margin-right: -28px;
}
.gdp-table-wide .gdp-table {
  font-size: 11.5px;
}
.gdp-table-wide thead th,
.gdp-table-wide tbody td,
.gdp-table-wide tbody th {
  padding: 5px 8px;
}

/* Country chip-row All / Clear quick actions */
.gdp-cmp-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
}
.gdp-cmp-actions .btn { padding: 3px 10px; font-size: 11px; }

/* ── Rates view ─────────────────────────────────────────────────── */
.rates-view .rates-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 10px 0 16px;
}
.rates-view .rates-stat {
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rates-view .rates-stat-label {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.rates-view .rates-stat-value {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.rates-view .rates-stat-sub {
  font-size: 11.5px;
  line-height: 1.35;
}
.rates-view .rates-stat-mpr .rates-stat-value    { color: #3b82f6; }
.rates-view .rates-stat-on  .rates-stat-value    { color: #ef4444; }
.rates-view .rates-stat-fx  .rates-stat-value    { color: #10b981; }

.rates-view #rates-board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rates-view #rates-board .card { background: var(--line-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.rates-view .card-head { margin-bottom: 6px; }
.rates-view .card-title { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--ink); }
@media (max-width: 1100px) { .rates-view #rates-board { grid-template-columns: 1fr; } }

/* Rates view: custom date pickers + multi-country compare strip */
.rates-view .rates-custom-range {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 6px;
}
.rates-view .rates-custom-range input[type=date] {
  background: var(--bg, #fff);
  border: 1px solid var(--rule, rgba(0,0,0,0.15));
  border-radius: 4px;
  padding: 3px 6px;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink);
}
.rates-view .rates-custom-range label { font-weight: 500; }

.rates-view .rates-compare-strip {
  display: flex; flex-direction: column;
  gap: 4px;
  margin: 8px 0 14px;
}
.rates-view .rates-compare-row {
  display: grid;
  grid-template-columns: 60px repeat(3, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.rates-view .rates-compare-flag {
  font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink);
}
.rates-view .rates-compare-cell {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  color: var(--ink);
}
.rates-view .rates-compare-asof { text-align: right; }
@media (max-width: 800px) {
  .rates-view .rates-compare-row { grid-template-columns: 50px repeat(3, 1fr); }
  .rates-view .rates-compare-asof { display: none; }
}

/* ─── News view ────────────────────────────────────────────────────── */
.news-view { padding: 24px; }
.news-view .compare-head h2 { display: flex; align-items: center; gap: 10px; }
.news-view #news-flag { font-size: 26px; line-height: 1; }
.news-view #news-source-line {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
}

.news-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}
@media (min-width: 1100px) {
  .news-list { grid-template-columns: 1fr 1fr; }
}

.news-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.news-item:hover {
  border-color: var(--rule);
  box-shadow: var(--shadow-lg);
}

.news-title {
  margin: 0 0 6px 0;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 600;
}
.news-title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.news-title a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.news-summary {
  margin: 4px 0 8px 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.02em;
}
.news-source { font-weight: 500; color: var(--ink-2); }
.news-dot    { opacity: 0.5; }
.news-age    { font-variant-numeric: tabular-nums; }

.news-loading {
  padding: 24px;
  text-align: center;
  font-style: italic;
}

#news-btn-refresh:disabled { opacity: 0.6; cursor: progress; }

/* ── Yields view ─────────────────────────────────────────────────── */
.yields-view .rates-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 10px 0 16px;
}
.yields-view .rates-stat {
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.yields-view .rates-stat-label {
  font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; font-size: 10.5px;
}
.yields-view .rates-stat-value {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 26px; font-weight: 600; line-height: 1.05; color: var(--ink);
}
.yields-view .rates-stat-sub { font-size: 11.5px; line-height: 1.35; }
.yields-view .rates-stat-2y  .rates-stat-value { color: #3b82f6; }
.yields-view .rates-stat-5y  .rates-stat-value { color: #10b981; }
.yields-view .rates-stat-10y .rates-stat-value { color: #ef4444; }

/* ── Equities view ───────────────────────────────────────────────── */
.equities-view .eq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 10px;
}
.equities-view .eq-table th {
  text-align: right;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  background: var(--line-2);
  user-select: none;
}
.equities-view .eq-table th:nth-child(2) { text-align: left; }
.equities-view .eq-table th.active { color: var(--ink); }
.equities-view .eq-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.equities-view .eq-table td:nth-child(1) { text-align: center; width: 28px; }
.equities-view .eq-table td:nth-child(2) { text-align: left; }
.equities-view .eq-table td.mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.equities-view .eq-table td.pos { color: #16a34a; }
.equities-view .eq-table td.neg { color: #dc2626; }
.equities-view .eq-table tr.eq-row-selected { background: rgba(59, 130, 246, 0.06); }
.equities-view .eq-ccy-tag { margin-left: 4px; opacity: 0.55; font-size: 10.5px; }
.equities-view .eq-fx-missing { color: var(--ink-2); font-style: italic; }
.equities-view .eq-table tbody tr:hover { background: var(--line-2); }
.equities-view #eq-chart-card { background: var(--line-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }


/* ─── Catalog view (datos.gob.ar series-tiempo-ar browser) ──────────── */
.catalog-view .catalog-controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.catalog-view #catalog-search {
  flex: 1 1 320px; min-width: 240px;
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--line-2); color: var(--ink);
  font-size: 14px;
}
.catalog-view #catalog-search:focus { outline: none; border-color: var(--accent, #3b82f6); }
.catalog-view .catalog-stats { margin-left: auto; font-variant-numeric: tabular-nums; }

.catalog-view .catalog-body { padding: 8px 16px 32px; }

.catalog-view .cat-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--bg-soft, var(--line-2));
}
.catalog-view .cat-group > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.catalog-view .cat-group > summary::-webkit-details-marker { display: none; }
.catalog-view .cat-group > summary::before {
  content: '▸'; transition: transform 0.15s; display: inline-block;
  width: 10px; color: var(--ink-2);
}
.catalog-view .cat-group[open] > summary::before { transform: rotate(90deg); }
.catalog-view .cat-topic { color: var(--ink); }

.catalog-view .cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}
.catalog-view .cat-table th {
  text-align: left;
  padding: 6px 10px;
  background: var(--line);
  color: var(--ink-2);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
.catalog-view .cat-th-id   { width: 220px; }
.catalog-view .cat-th-freq { width: 50px; text-align: center; }
.catalog-view .cat-th-end  { width: 90px; }
.catalog-view .cat-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalog-view .cat-id {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  color: var(--accent, #3b82f6);
}
.catalog-view .cat-freq { text-align: center; color: var(--ink-2); }
.catalog-view .cat-end  { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.catalog-view .cat-ds, .catalog-view .cat-src { color: var(--ink-2); font-size: 12px; }
.catalog-view .cat-row { cursor: pointer; transition: background 0.1s; }
.catalog-view .cat-row:hover { background: var(--line-2); }
.catalog-view .cat-row.cat-copied { background: rgba(34, 197, 94, 0.18); }

/* Catalog two-column layout: sticky lookup panel on the left, browser on the right */
.catalog-view .catalog-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  padding: 0 16px;
  align-items: start;
}
.catalog-view .catalog-lookup {
  position: sticky;
  top: 12px;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.catalog-view .cl-title {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.catalog-view #catalog-lookup-input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg, #1a1a1a);
  color: var(--ink);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12.5px;
}
.catalog-view #catalog-lookup-input:focus { outline: none; border-color: var(--accent, #3b82f6); }
.catalog-view .cl-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12.5px;
  line-height: 1.45;
}
.catalog-view .cl-result.cl-empty { color: var(--ink-2); }
.catalog-view .cl-result.cl-miss { border-color: rgba(220, 38, 38, 0.45); border-style: solid; }
.catalog-view .cl-result.cl-hit  { border-color: rgba(34, 197, 94, 0.45); border-style: solid; }
.catalog-view .cl-id {
  font-size: 11.5px;
  color: var(--accent, #3b82f6);
  word-break: break-all;
  margin-bottom: 4px;
}
.catalog-view .cl-miss-msg { color: #ef4444; font-weight: 600; }
.catalog-view .cl-row { display: flex; gap: 8px; }
.catalog-view .cl-lbl {
  flex: 0 0 60px;
  color: var(--ink-2);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 1px;
}
.catalog-view .cl-val { flex: 1; color: var(--ink); word-break: break-word; }
.catalog-view .cl-hint { margin-top: 4px; line-height: 1.4; }
.catalog-view #catalog-lookup-copy {
  align-self: flex-start;
}

/* Older browsers without grid: fall back gracefully */
@media (max-width: 720px) {
  .catalog-view .catalog-layout { grid-template-columns: 1fr; }
  .catalog-view .catalog-lookup { position: static; max-height: none; }
}

/* Real-terms (deflate by IPC) toggle on each chart card */
.chart-card .cc-real {
  padding: 4px 8px;
  font-size: 11px; font-weight: 600;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
}
.chart-card .cc-real:hover { color: var(--ink); background: var(--line-2); }
.chart-card .cc-real.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* View pill (mode + smoothing) + dual-axis toggle — share the .cc-real look */
.chart-card .cc-view, .chart-card .cc-dual {
  padding: 4px 8px;
  font-size: 11px; font-weight: 600;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}
.chart-card .cc-view:hover, .chart-card .cc-dual:hover { background: var(--line-2); }
.chart-card .cc-dual.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Per-series view popover (mode segment + smoothing list) */
.view-popover {
  position: absolute; z-index: 200; min-width: 210px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; font-family: 'Poppins', sans-serif;
  display: flex; flex-direction: column; gap: 4px;
}
.view-popover .vp-label { font-size: 12px; font-weight: 600; color: var(--ink); padding: 0 2px 2px; }
.view-popover .vp-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 2px 0; }
.view-popover .vp-seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.view-popover .vp-mode {
  flex: 1; border: none; background: transparent; color: var(--muted);
  padding: 5px 0; font-size: 11px; font-weight: 600; cursor: pointer; border-right: 1px solid var(--line);
}
.view-popover .vp-mode:last-child { border-right: none; }
.view-popover .vp-mode:hover { background: var(--line-2); color: var(--ink); }
.view-popover .vp-mode.active { background: var(--ink); color: var(--paper); }
.view-popover .vp-smooth {
  text-align: left; border: none; background: transparent; color: var(--ink);
  padding: 6px 10px; border-radius: 5px; font-size: 12.5px; cursor: pointer;
}
.view-popover .vp-smooth:hover { background: var(--line-2); }
.view-popover .vp-smooth.active { background: var(--accent); color: #fff; }

/* Legend chip — now clickable to open the per-series view popover */
.cc-leg-chip { cursor: pointer; }
.cc-leg-view { color: var(--muted); font-weight: 600; font-size: 10.5px; margin-left: 2px; }

/* ⋯ overflow button + menu */
.chart-card .cc-more {
  padding: 4px 7px; font-size: 14px; font-weight: 700; line-height: 1;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.chart-card .cc-more:hover { color: var(--ink); background: var(--line-2); }
.chart-card .cc-more.on { border-color: var(--accent); color: var(--accent); }
.more-menu {
  position: absolute; z-index: 200; min-width: 210px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; font-family: 'Poppins', sans-serif;
  display: flex; flex-direction: column; gap: 2px;
}
.more-menu .mm-opt {
  text-align: left; border: none; background: transparent; color: var(--ink);
  padding: 7px 10px; border-radius: 5px; font-size: 12.5px; cursor: pointer;
}
.more-menu .mm-opt:hover { background: var(--line-2); }

/* ── Trade view — annual composition (OEC-style) ─────────────────────────── */
.trade-view .tr-stats { display: flex; gap: 14px; margin: 10px 0 14px; flex-wrap: wrap; }
.trade-view .tr-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 16px; min-width: 160px; display: flex; flex-direction: column; gap: 2px;
}
.trade-view .tr-stat .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.trade-view .tr-stat .val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.trade-view .tr-stat .val.pos { color: var(--pos); }
.trade-view .tr-stat .val.neg { color: var(--neg); }
.trade-view .tr-card { padding: 14px 16px; margin-bottom: 14px; }
.trade-view .tr-card .card-title { margin: 0 0 10px; font-size: 14px; }
.trade-view .tr-chart-wrap { position: relative; height: 260px; }
.trade-view .tr-chart-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.trade-view .tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px) { .trade-view .tr-grid { grid-template-columns: 1fr; } }
.trade-view .tr-treemap { position: relative; height: 340px; overflow: hidden; border-radius: 6px; }
.trade-view .tr-cell {
  position: absolute; overflow: hidden; border-radius: 2px;
  padding: 4px 5px; box-sizing: border-box; cursor: default;
  display: flex; flex-direction: column; justify-content: flex-start;
  transition: filter .1s;
}
.trade-view .tr-cell:hover { filter: brightness(1.15); z-index: 2; }
.trade-view .tr-cell-label { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.95); line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.trade-view .tr-cell-pct { font-size: 10px; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.trade-view .tr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 2px 16px; }
.trade-view .tr-leg-item { font-size: 11px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.trade-view .tr-leg-chip { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.trade-view .tr-partners { display: flex; flex-direction: column; gap: 6px; }
.trade-view .tr-prow { display: grid; grid-template-columns: 150px 1fr 64px 46px; align-items: center; gap: 8px; font-size: 12px; }
.trade-view .tr-pname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-view .tr-pbar-wrap { background: var(--line-2); border-radius: 3px; height: 12px; }
.trade-view .tr-pbar { background: var(--accent); border-radius: 3px; height: 100%; min-width: 2px; }
.trade-view .tr-pval, .trade-view .tr-ppct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ⓘ metadata popover — per-series source & method card */
.chart-card .cc-info {
  padding: 4px 7px; font-size: 13px; line-height: 1;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.chart-card .cc-info:hover { color: var(--ink); background: var(--line-2); }
.meta-popover {
  position: absolute; z-index: 200; width: 360px; max-width: calc(100vw - 16px);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px 12px; font-family: 'Poppins', sans-serif;
  display: flex; flex-direction: column; gap: 6px;
}
.meta-popover .mp-row { display: flex; gap: 10px; font-size: 12px; line-height: 1.45; }
.meta-popover .mp-label {
  flex: 0 0 86px; color: var(--ink-2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px;
}
.meta-popover .mp-value { flex: 1; color: var(--ink); word-break: break-word; }

/* Health dot — coloured by age of last data point */
.cc-health { font-size: 9px; vertical-align: middle; }
.cc-h-fresh   { filter: hue-rotate(0deg); }
.cc-h-lagged  { opacity: 0.85; }
.cc-h-stale   { opacity: 0.95; }
.cc-h-unknown { opacity: 0.4; }

/* Health view */
.health-view { padding: 22px 28px 60px; }
.health-view .compare-head { margin-bottom: 16px; }
.health-view .compare-head h2 { font-family: 'Poppins', sans-serif; margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.health-view .health-body { margin-top: 12px; }
.health-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.health-table th { text-align: left; padding: 8px 12px; background: var(--line); color: var(--ink-2); font-weight: 500; font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.health-table .hh-status { width: 60px; text-align: center; }
.health-table .hh-name   { width: 32%; }
.health-table .hh-date, .health-table .hh-age { width: 110px; }
.health-table td { padding: 6px 12px; border-bottom: 1px solid var(--line); }
.health-table tr.h-row { cursor: pointer; }
.health-table tr.h-row:hover { background: var(--line-2); }
.health-table tr.h-lagged { background: rgba(176, 122, 47, 0.04); }
.health-table tr.h-stale  { background: rgba(192, 83, 58, 0.05); }
.health-table tr.h-stale .h-name { color: var(--neg); }

/* ─────────── Home view ─────────── */
.home-view { padding: 22px 30px 40px; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-favs { margin-top: 8px; }
.whats-new { margin-top: 28px; }

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.home-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px 10px;
  display: flex; flex-direction: column;
}
.home-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.home-card-title { font-weight: 600; font-size: 13px; line-height: 1.3; cursor: pointer; flex: 1; min-width: 0; }
.home-card-title:hover { color: var(--accent); }
.home-card-mode {
  flex: none; align-self: center; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; padding: 1px 4px; opacity: 0.85;
}
.home-card-x {
  border: none; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer; padding: 2px 4px; flex: none;
}
.home-card-x:hover { color: var(--neg); }
.home-card-stats { display: flex; gap: 18px; margin: 8px 0 6px; }
.hc-stat { display: flex; flex-direction: column; }
.hc-label { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.hc-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-val.pos { color: var(--pos); }
.hc-val.neg { color: var(--neg); }
.home-card-canvas { position: relative; height: 110px; margin-top: 2px; }
.home-card-foot { margin-top: 6px; }
.home-card-missing { opacity: 0.7; }
.home-card-na { padding: 24px 0; text-align: center; }

.whats-new-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.whats-new-table thead th {
  text-align: left; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 6px 12px; border-bottom: 1px solid var(--rule);
}
.whats-new-table td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.whats-new-table tr.wn-row { cursor: pointer; }
.whats-new-table tr.wn-row:hover { background: var(--line-2); }
.wn-flag { margin-right: 4px; }
.wn-country { font-weight: 600; white-space: nowrap; }
.wn-name { color: var(--ink); }
.wn-val { font-variant-numeric: tabular-nums; }
.wn-chg { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wn-chg.pos { color: var(--pos); }
.wn-chg.neg { color: var(--neg); }
.wn-chg-lbl { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 4px; }
.wn-date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Small bundled SVG country flag (emoji flags don't render on Windows). */
.flag-img {
  width: 18px; height: 13px; border-radius: 2px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10); vertical-align: middle;
  display: inline-block; flex: none;
}

/* What's New — country accordion */
.wn-th-star { width: 30px; }
.whats-new-table tr.wn-ghead { cursor: pointer; user-select: none; }
.whats-new-table tr.wn-ghead > td.wn-ghead-cell {
  padding: 7px 10px; background: var(--line-2);
  border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
}
.whats-new-table tr.wn-ghead:hover > td.wn-ghead-cell { background: var(--line); }
.wn-chev { display: inline-block; color: var(--muted); transition: transform 0.15s ease; margin-right: 3px; font-size: 11px; }
.wn-ghead.collapsed .wn-chev { transform: rotate(-90deg); }
.wn-gflag { margin: 0 5px 0 2px; }
.wn-gflag .flag-img { width: 20px; height: 15px; }
.wn-gname { font-weight: 600; color: var(--ink); }
.wn-gcount {
  font-size: 10px; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; margin-left: 7px;
  font-variant-numeric: tabular-nums;
}
.wn-gstar { font-size: 12px; color: var(--accent); font-weight: 700; margin-left: 8px; letter-spacing: 0.02em; }
.wn-row.wn-hidden { display: none; }
.wn-star { width: 30px; text-align: center; padding-left: 6px !important; }
.wn-fav { font-size: 12px; line-height: 1; }
.wn-fav1 { color: var(--muted); }
.wn-fav2 { color: var(--accent); }
/* Favorites stand out: faint accent wash + left accent rule. */
.whats-new-table tr.wn-row.wn-starred > td { background: rgba(217, 119, 87, 0.07); }
.whats-new-table tr.wn-row.wn-starred:hover > td { background: rgba(217, 119, 87, 0.13); }
.whats-new-table tr.wn-row.wn-starred > td.wn-star { box-shadow: inset 3px 0 0 var(--accent); }
.whats-new-table tr.wn-row.wn-pinned .wn-name { font-weight: 600; }

/* Home: Release Calendar beside What's New (2-col, stacks on narrow screens) */
.home-two-col {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  gap: 28px;
  align-items: start;
}
.home-two-col .whats-new,
.home-two-col .release-cal { margin-top: 0; }
@media (max-width: 1080px) {
  .home-two-col { grid-template-columns: 1fr; gap: 24px; }
}

.release-cal-body { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.rc-week-h {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.rc-day { margin-bottom: 8px; }
.rc-date {
  font-size: 11px; font-weight: 600; color: var(--ink);
  padding: 2px 0 4px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.rc-day.rc-today .rc-date { color: var(--accent); }
.rc-todaytag {
  font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin-left: 4px;
}
.rc-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px; cursor: pointer;
  font-size: 13px; border-left: 2px solid transparent;
}
.rc-item:hover { background: var(--line-2); }
.rc-item.rc-official { border-left-color: var(--accent); }
.rc-item.rc-pattern  { border-left-color: var(--pos); }
.rc-item.rc-estimate { opacity: 0.78; }
.rc-flag { flex: none; display: inline-flex; }
.rc-flag .flag-img { width: 16px; height: 12px; }
.rc-iso { font-weight: 600; flex: none; }
.rc-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.rc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.rc-dot.rc-official { background: var(--accent); }
.rc-dot.rc-pattern  { background: var(--pos); }
.rc-tilde { color: var(--muted); font-weight: 700; width: 7px; text-align: center; flex: none; }
/* Reference period the row refers to (e.g. "Apr '26", "Q2 '26"). */
.rc-ref {
  font-size: 10px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; flex: none; opacity: 0.85;
}
.rc-check { color: var(--pos); font-weight: 700; width: 7px; text-align: center; flex: none; }
.rc-overdue {
  font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--neg); border: 1px solid var(--neg); border-radius: 4px;
  padding: 0 3px; flex: none;
}
/* Already-published rows: green "out" badge, struck-through, dimmed. */
.rc-released {
  font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--pos); border: 1px solid var(--pos); border-radius: 4px;
  padding: 0 3px; flex: none;
}
.rc-item.rc-done { opacity: 0.72; }
.rc-item.rc-done .rc-name { text-decoration: line-through; }
.rc-empty { padding: 6px 0; font-size: 12px; }
.release-cal-legend { margin-top: 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.release-cal-legend .rc-dot { margin-right: 2px; }

/* Export / Import modal */
.home-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.home-modal-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  width: min(560px, 90vw); padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.home-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.home-modal-x { border: none; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.home-modal-ta {
  width: 100%; height: 220px; resize: vertical; margin: 8px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: var(--line-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 10px;
}
.home-modal-buttons { display: flex; justify-content: flex-end; gap: 8px; }

/* ★ / ★★ favorite buttons on chart cards + sidebar */
.cc-star, .cc-star-home {
  border: none; background: transparent; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.cc-star:hover, .cc-star-home:hover:not(:disabled) { color: #d4a017; }
.cc-star.on { color: #d4a017; }
.cc-star-home.on { color: #d4a017; }
.cc-star-home:disabled { opacity: 0.3; cursor: not-allowed; }
.cat-star {
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: auto;
}
.cat-star:hover { color: #d4a017; }
.cat-star.on { color: #d4a017; }

/* ─── Rates & Yields merged view — sub-tabs (Policy & FX / Yields / EMBI) ── */
.ry-subtabs { display: inline-flex; margin-bottom: 10px; }

/* ─── Pulse: real-terms chip on deflated nominal series ─────────────────── */
.pc-real {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  vertical-align: 1px; opacity: 0.85;
}

/* ─── Latest Updates table (country page, replaces the Macro Brief) ─────── */
.updates-body { margin-top: 2px; }
.updates-empty { padding: 12px 2px; }
.updates-table .wn-period, .updates-table .wn-date { white-space: nowrap; }
.updates-table td.muted { color: var(--muted); }

/* ─── Chart card: table view (Charts ↔ Table toggle) ────────────────────── */
.chart-card .cc-display.on { border-color: var(--accent); color: var(--accent); }
.cc-table-wrap { flex: 1; min-height: 300px; max-height: 380px; overflow: auto; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cc-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--paper);
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: 11px;
}
.cc-table th.right, .cc-table td.right { text-align: right; }
.cc-table td { padding: 4px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cc-table tbody tr:hover { background: var(--line-2); }
.cct-mode { font-weight: 400; }

/* ─── What's New: global one-liners (commodities / ToT / IMF projections) ─ */
.whats-new-table tr.wn-global td {
  padding: 8px 12px; background: var(--line-2); border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink);
}
.wn-global .wn-global-tag {
  display: inline-block; margin-right: 8px; padding: 1px 7px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
}

/* ─── Analytics: Values ↔ Z-score toggle ────────────────────────────────── */
.an-z-pos { color: var(--neg); }
.an-z-neg { color: var(--pos); }

/* Pulse: constant-prices tag next to a real-terms magnitude */
.pc-val-base { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 0.03em; margin-left: 4px; }

/* Analytics: inflation-target label next to the regime chip */
.an-regime-col { white-space: nowrap; }
.an-target { margin-left: 6px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ─── Connect AI (MCP) modal ─────────────────────────────────────────────── */
.mcp-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(4, 14, 17, 0.62); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow-y: auto;
}
.mcp-modal {
  position: relative; width: 100%; max-width: 560px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 28px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}
.mcp-x {
  position: absolute; top: 12px; right: 14px; width: 28px; height: 28px;
  border: none; background: none; color: var(--muted); font-size: 22px;
  line-height: 1; cursor: pointer; border-radius: 6px;
}
.mcp-x:hover { background: var(--bg); color: var(--ink); }
.mcp-h { margin: 0 0 6px; font-size: 18px; color: var(--accent); }
.mcp-sub { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.mcp-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); margin: 14px 0 5px; }
.mcp-codebar { display: flex; align-items: stretch; gap: 8px; }
.mcp-codebar code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px; color: var(--ink);
}
.mcp-copy {
  flex: 0 0 auto; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; font-size: 12px; font-weight: 600; padding: 0 13px; border-radius: 8px;
  cursor: pointer; white-space: nowrap;
}
.mcp-copy:hover { background: var(--accent-2); border-color: var(--accent-2); }
.mcp-copy.ok { background: var(--accent-3); border-color: var(--accent-3); color: var(--ink); }
.mcp-steps { margin-top: 12px; display: grid; gap: 14px; }
.mcp-step h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--ink); }
.mcp-step ol { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.mcp-step ol li { margin: 2px 0; }
.mcp-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-tool {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11.5px;
  background: var(--line-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 10px;
}
.mcp-foot { margin: 16px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }

/* ── GDP Nowcast view ──────────────────────────────────────────────────── */
.nowcast-view { padding: 18px 22px 40px; }
.nc-header { margin: 0 0 18px; }
.nc-title { font-size: 20px; margin: 0 0 4px; color: var(--ink); }
.nc-method { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; max-width: 980px; }
.nc-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 11px; color: var(--muted); }
.nc-leg { display: inline-flex; align-items: center; gap: 6px; }
.nc-leg::before { content: ''; width: 16px; height: 0; border-top: 2px solid currentColor; }
.nc-leg-off { color: #10b981; }
.nc-leg-nc { color: #60a5fa; }
.nc-leg-nc::before { border-top-style: dashed; }
.nc-leg-band { color: #60a5fa; }
.nc-leg-band::before { border-top: 8px solid rgba(96,165,250,0.25); }
.nc-leg-note { font-style: italic; }

.nc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.nc-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 6px;
}
.nc-card-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.an-card-head { display: flex; align-items: center; gap: 8px; }
.nc-card .an-flag .flag-img, .nc-card .flag-img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.nc-card .an-name { font-weight: 600; font-size: 13.5px; color: var(--ink); flex: 1; }
.nc-chip { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.nc-chip-ok { background: var(--line-2); color: var(--accent); }
.nc-chip-warn { background: #f59e0b22; color: #b45309; }

.nc-headline { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.nc-q { font-size: 12px; color: var(--muted); font-weight: 600; }
.nc-big { font-size: 24px; font-weight: 700; color: var(--pos); line-height: 1.1; }
.nc-big.nc-neg { color: var(--neg); }
.nc-sub { font-size: 11px; color: var(--muted); }
.nc-qoq { font-size: 11px; color: var(--muted); margin-left: 4px; }
.nc-bandline { font-size: 10.5px; color: var(--muted); margin-top: -2px; }

.nc-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.nc-fchip {
  font-size: 10px; color: var(--muted); background: var(--line-2);
  border-radius: 8px; padding: 2px 7px; white-space: nowrap;
}

.nc-degraded { margin-top: 20px; }
.nc-degr-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.nc-degr-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-degr-item { font-size: 11px; color: var(--muted); background: var(--line-2); border-radius: 8px; padding: 3px 9px; }
.nc-footnote { margin-top: 20px; font-size: 11px; line-height: 1.55; max-width: 980px; }

/* Layer-2: multi-indicator chips / cross-check line */
.nc-chip-multi { background: #8b5cf622; color: #7c3aed; }
.nc-xcheck { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.nc-xcheck-warn { color: #b45309; }

/* "in development" badge (e.g. Daily Markets → Equities) */
.dev-badge {
  display: inline-block; font-family: "Helvetica", "Arial", sans-serif;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: #b45309; background: #f59e0b22; border: 1px solid #f59e0b55;
  border-radius: 9px; padding: 1px 8px; vertical-align: middle; margin-left: 6px;
}

/* Nowcast: Charts/Table mode toggle + table */
.nc-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nc-modes { flex: none; }
.nc-table-wrap { overflow-x: auto; margin-top: 4px; }
.nc-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: "Poppins", sans-serif; }
.nc-table th, .nc-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: right; }
.nc-table th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; cursor: default; position: sticky; top: 0; background: var(--bg); }
.nc-table th.nct-left, .nc-table td.nct-left { text-align: left; }
.nc-table tbody tr:hover { background: var(--line-2); }
.nc-table tr.nct-active td { background: var(--line-2); box-shadow: inset 2px 0 0 var(--accent); }
.nc-table tr.nct-degr td { color: var(--muted); font-style: italic; }
.nct-flag .flag-img { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; vertical-align: middle; }
.nc-table td.nct-left { color: var(--ink); font-weight: 500; }
.nc-table .num { font-variant-numeric: tabular-nums; }
.nct-pos { color: var(--pos); font-weight: 600; }
.nct-neg { color: var(--neg); font-weight: 600; }
.nct-muted { color: var(--muted); }
.nct-warn { color: #b45309; }

/* Nowcast table — sortable headers */
.nc-table th.nct-sortable { cursor: pointer; user-select: none; }
.nc-table th.nct-sortable:hover { color: var(--ink); }
.nc-table th.nct-sorted { color: var(--accent); }

/* Nowcast table — collapsible column guide */
.nc-guide { margin: 14px 0 0; font-size: 12px; }
.nc-guide > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-family: "Poppins", sans-serif; font-size: 11.5px; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.nc-guide > summary::before { content: '▸'; font-size: 10px; transition: transform 0.15s; }
.nc-guide[open] > summary::before { transform: rotate(90deg); }
.nc-guide > summary::-webkit-details-marker { display: none; }
.nc-guide-dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 10px 0 0; max-width: 920px; }
.nc-guide-dl dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.nc-guide-dl dd { margin: 0; color: var(--muted); line-height: 1.45; }

/* ── Cyclical gears view ─────────────────────────────────────────────────── */
.gear-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 4px 0 2px; font-size: 11px; color: var(--muted); }
.gear-leg { display: inline-flex; align-items: center; gap: 5px; }
.gear-leg::before { content: ''; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.gear-leg-up::before { background: #10b981; }
.gear-leg-dn::before { background: #ef4444; }
.gear-leg-flat::before { background: #94a3b8; }
.gear-leg-warn::before { background: #f59e0b; }

.gear-map-wrap { position: relative; height: 240px; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 4px; }
.gear-map-wrap canvas { position: relative; z-index: 1; }
.gear-quad { position: absolute; z-index: 0; font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); opacity: 0.45; pointer-events: none; }
/* Insets keep the quadrant watermarks clear of the axis tick labels: the y ticks
   run down the left gutter (~56px) and the x ticks + title along the bottom (~34px). */
.gear-quad-tr { top: 28px; right: 26px; }
.gear-quad-tl { top: 28px; left: 66px; }
.gear-quad-br { bottom: 46px; right: 26px; }
.gear-quad-bl { bottom: 46px; left: 66px; }

.gear-badge { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.gear-up   { background: #10b98122; color: #047857; }
.gear-down { background: #ef444422; color: #b91c1c; }
.gear-flat { background: var(--line-2); color: var(--muted); }
.gear-badge.gear-strong { box-shadow: inset 0 0 0 1px currentColor; }

.gear-stat { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 10px; font-weight: 600; }
.gear-stat-confirmed  { background: #10b98122; color: #047857; }
.gear-stat-provisional { background: var(--line-2); color: var(--muted); }
.gear-stat-contested  { background: #f59e0b22; color: #b45309; }

.gear-table-wrap { overflow-x: auto; margin-top: 4px; }
.gear-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: "Poppins", sans-serif; }
.gear-table th, .gear-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: right; }
.gear-table th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; background: var(--bg); }
.gear-table th.gct-left, .gear-table td.gct-left { text-align: left; }
.gear-table th.gct-sortable { cursor: pointer; user-select: none; }
.gear-table th.gct-sortable:hover { color: var(--ink); }
.gear-table th.gct-sorted { color: var(--accent); }
.gear-table tbody tr:hover { background: var(--line-2); }
.gear-table tr.gct-active td { background: var(--line-2); box-shadow: inset 2px 0 0 var(--accent); }
.gear-table td.gct-left { color: var(--ink); font-weight: 500; }
.gear-table .num { font-variant-numeric: tabular-nums; }
.gct-pos { color: var(--pos); font-weight: 600; }
.gct-neg { color: var(--neg); font-weight: 600; }
.gct-muted { color: var(--muted); }
.gct-warn { color: #b45309; font-weight: 600; }
.gct-z-strong { color: var(--ink); font-weight: 600; }
.gct-q { color: var(--muted); font-size: 10.5px; font-weight: 400; }
.gct-flag { display: inline-flex; vertical-align: middle; }
.gct-flag .flag-img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.gct-spark { text-align: right; }
.gear-spark { vertical-align: middle; }

.gear-guide { margin: 14px 0 0; font-size: 12px; }
.gear-guide > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-family: "Poppins", sans-serif; font-size: 11.5px; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.gear-guide > summary::before { content: '▸'; font-size: 10px; transition: transform 0.15s; }
.gear-guide[open] > summary::before { transform: rotate(90deg); }
.gear-guide > summary::-webkit-details-marker { display: none; }
.gear-guide-body { margin: 10px 0 0; max-width: 940px; }
.gear-guide-body p { line-height: 1.5; color: var(--muted); margin: 0 0 8px; }
.gear-formula { display: inline-block; font-family: ui-monospace, monospace; font-size: 11.5px; background: var(--line-2); padding: 1px 6px; border-radius: 5px; color: var(--ink); }
.gear-guide-dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 16px; margin: 8px 0 0; }
.gear-guide-dl dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.gear-guide-dl dd { margin: 0; color: var(--muted); line-height: 1.45; }

/* ─── Command palette (⌘K) + shortcuts ──────────────────────────────── */
/* Topbar "Search…" trigger */
.btn-cmdk { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; }
.btn-cmdk .cmdk-ico {
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px;
  color: var(--muted); background: var(--bg);
}
.btn-cmdk .cmdk-txt { font-size: 12px; }
@media (max-width: 720px) { .btn-cmdk .cmdk-txt { display: none; } }

/* Overlay + modal */
.cmdk-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(4, 14, 17, 0.55); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
}
.cmdk-overlay.show { display: flex; }
.cmdk-modal {
  width: 100%; max-width: 640px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lg);
  overflow: hidden; font-family: 'Poppins', system-ui, sans-serif;
  display: flex; flex-direction: column; max-height: 70vh;
  animation: cmdkPop 0.12s ease-out;
}
@keyframes cmdkPop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.cmdk-inputwrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.cmdk-search-ico { font-size: 18px; color: var(--muted); }
.cmdk-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--ink); font-family: inherit;
}
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-hint {
  font-size: 10px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px;
}
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.cmdk-row.active { background: var(--bg); }
.cmdk-row.active .cmdk-name { color: var(--ink); }
.cmdk-flag { font-size: 18px; width: 24px; text-align: center; flex: none; }
.cmdk-actico {
  font-size: 14px; color: var(--accent);
  background: var(--line-2); border-radius: 6px; height: 24px; line-height: 24px;
}
.cmdk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmdk-name {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-tagdot { color: var(--accent); font-weight: 600; }
.cmdk-meta {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-kind {
  font-size: 10.5px; color: var(--muted); flex: none; max-width: 120px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.cmdk-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.cmdk-foot {
  display: flex; gap: 16px; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
}
.cmdk-foot b { color: var(--ink-2); font-weight: 600; }
.cmdk-foot .cmdk-count { margin-left: auto; }

/* Shortcuts help overlay (?) */
.cmdk-help {
  width: 100%; max-width: 460px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lg);
  font-family: 'Poppins', system-ui, sans-serif; overflow: hidden;
  animation: cmdkPop 0.12s ease-out; align-self: flex-start; margin-top: 6vh;
}
.cmdk-help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.cmdk-help-head h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.cmdk-help-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.cmdk-help dl { margin: 0; padding: 10px 18px 16px; }
.cmdk-help-row { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.cmdk-help-row dt { flex: none; min-width: 130px; display: flex; gap: 5px; align-items: center; }
.cmdk-help-row dd { margin: 0; font-size: 13px; color: var(--muted); }
.cmdk-help kbd {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; min-width: 16px; text-align: center;
}

/* Overflow-menu separator (Copy link / export block) */
.mm-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* Deep-link / palette card highlight — 2s ring pulse */
.chart-card.cc-flash { animation: ccFlash 2s ease-out; }
@keyframes ccFlash {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(45,181,165,0.35); }
  70%  { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(45,181,165,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(45,181,165,0); }
}

/* ─────────── WS4: Signals tab · Home signals strip · Event overlay ─────────── */

/* "Signals" gets a subtle accent so the proprietary tab stands out in the nav. */
.view-tabs .vt-signals:not(.active) { color: var(--accent); }
.view-tabs .vt-signals.active { background: var(--accent); color: #fff; }

/* Board "Events" toggle (standalone button in the toolbar). */
.btn-events.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-events:disabled { opacity: 0.45; cursor: default; }

/* ── Home cross-country signals strip ── */
.home-signals {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  box-shadow: var(--shadow);
}
.home-signals[hidden] { display: none; }
.sig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sig-head h2 { font-size: 15px; font-weight: 600; margin: 0; }
.sig-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.sig-block {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; background: var(--bg);
}
.sig-block-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 8px; cursor: pointer;
}
.sig-block-h:hover .sig-open { color: var(--accent); }
.sig-open { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--rule); }

.sig-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sig-chip, .sig-row {
  font-family: 'Poppins', sans-serif; cursor: pointer; text-align: left;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--radius-sm);
}
.sig-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 5px 9px;
}
.sig-chip b { font-weight: 600; }
.sig-chip.sig-up { border-color: rgba(16,185,129,0.4); }
.sig-chip.sig-up { color: #0f9d6b; }
.sig-chip.sig-dn { border-color: rgba(239,68,68,0.4); color: #d64545; }
html.dark .sig-chip.sig-up { color: #34d399; }
html.dark .sig-chip.sig-dn { color: #f87171; }
.sig-chip:hover, .sig-row:hover { border-color: var(--accent); }

.sig-rows { display: flex; flex-direction: column; gap: 5px; }
.sig-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; font-size: 12px;
}
.sig-row .sig-meta { margin-left: auto; color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
.sig-flag { width: 16px; height: 11px; border-radius: 1px; object-fit: cover; vertical-align: middle; }
.sig-flag-wrap { display: inline-flex; }
.sig-iso { font-weight: 600; letter-spacing: 0.02em; }
.sig-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.sig-num.sig-pos { color: var(--pos); }
.sig-num.sig-neg { color: var(--neg); }

/* ─────────── WS6: Accessibility — focus ring + reduced motion ─────────── */
/* Consistent keyboard focus ring (theme accent) for anything the user tabs to.
   :focus-visible keeps it invisible for mouse/touch, so pointer users see no
   change while keyboard users always get a clear ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.cc-actions button:focus-visible,
.seg button:focus-visible,
.view-tabs .vt:focus-visible,
.more-menu button:focus-visible,
.view-popover button:focus-visible,
.cc-leg-chip:focus-visible,
.pulse-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Editable card title: ring while focused (it manages outline:none for idle). */
.cc-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Menus/popovers get a faint focus ring on their focusable region. */
.meta-popover:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Deep-link highlight: swap the 2s pulse for a static (non-animated) ring so
     the targeted card is still obvious without motion. */
  .chart-card.cc-flash {
    animation: none !important;
    box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px rgba(45,181,165,0.25);
  }
}

/* ── Public finance view ─────────────────────────────────────────────── */
.fiscal-board-table { display: block; }
.fiscal-table tbody th { white-space: nowrap; }
/* superseded by the tier rules in the hierarchy block above */
.fiscal-caret {
  background: none; border: 0; cursor: pointer; color: var(--muted, #888);
  font-size: 10px; width: 16px; padding: 0; margin-right: 2px; vertical-align: middle;
}
.fiscal-caret:hover { color: var(--accent, #2db5a5); }
.fiscal-caret-pad { display: inline-block; width: 18px; }
.seg.seg-disabled { opacity: 0.45; pointer-events: none; }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─────────── Signals glossary — plain-language "how to read" cards ───────────
   Rendered by signals_strip.js at the start of the Home signals strip
   (.sigg-strip, dismissible) and pinned atop each Signals view (.sigg-view). */
.sigg-strip { position: relative; margin-bottom: 10px; }
.sigg-view { margin: 10px 0 12px; }
.sigg-grid {
  /* auto-fill + capped track width: with few cards (per-view glossaries have
     1-2) auto-fit would stretch each card across the whole row — cap keeps
     card proportions everywhere and leaves the right edge ragged instead. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 320px));
  gap: 6px;
}
.sigg-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px;
}
.sigg-card .sigg-t { font-size: 12px; font-weight: 700; margin-bottom: 1px; color: var(--ink); }
.sigg-new {
  font-size: 9px; letter-spacing: 0.05em; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; padding: 0 4px; vertical-align: 2px; margin-left: 5px;
}
.sigg-card p { margin: 0; color: var(--ink-2); font-size: 11.5px; line-height: 1.4; }
.sigg-card p b { color: var(--ink); }
.sigg-close {
  position: absolute; top: -2px; right: -2px;
  background: none; border: none; color: var(--muted); font-size: 15px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
}
.sigg-close:hover { color: var(--ink); background: var(--bg); }
.sigg-reopen {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 11px; padding: 1px 8px;
}
.sigg-reopen:hover { color: var(--ink); border-color: var(--accent); }
.sig-head-right { display: inline-flex; align-items: center; gap: 8px; }

/* ─────────── Density pass — Signals + Compare (owner request 2026-07) ───────
   Tighter tables and shorter chart cards so more information fits per screen.
   Scoped to the Signals views (analytics / nowcast / gears), the Home signals
   strip and the Compare board — country boards keep their default density. */
.home-signals .sig-block { padding: 8px 10px; }
.home-signals .sig-grid { gap: 8px; }
.home-signals .sig-row, .home-signals .sig-chip { padding: 3px 8px; font-size: 12px; }
.home-signals .sig-rows { gap: 3px; }

.analytics-view .eq-table td, .analytics-view .eq-table th { padding: 4px 8px; font-size: 12px; }
.nc-table th, .nc-table td { padding: 4px 8px; font-size: 12px; }
.gear-table th, .gear-table td { padding: 4px 8px; font-size: 12px; }

.compare-view .chart-card { min-height: 260px; padding: 10px 12px 8px; }
.compare-view .cc-canvas-wrap { min-height: 210px; }
.compare-view .cc-table-wrap { min-height: 210px; max-height: 300px; }
.compare-view .cc-title { font-size: 13.5px; }
.compare-view .cc-table td { padding: 3px 8px; font-size: 12px; }
.compare-view .cc-table th { padding: 3px 8px; font-size: 10.5px; }

/* ─────────── Surprise index view (ASI) — Signals sub-view ─────────── */
.surprises-view .asi-wrap { display: flex; flex-direction: column; gap: 14px; padding: 12px 24px 8px; }
.asi-card { min-height: 0; }
.asi-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.asi-table th { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.asi-table td { padding: 3px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.asi-table tbody tr:last-child td { border-bottom: none; }
.asi-table th.r, .asi-table td.r { text-align: right; }
.asi-cty { white-space: nowrap; font-weight: 600; }
.asi-cty .flag-img { width: 16px; height: 11px; border-radius: 1px; object-fit: cover; vertical-align: -1px; margin-right: 5px; }
.asi-barcell { width: 120px; min-width: 90px; }
.asi-barwrap { position: relative; height: 12px; }
.asi-baseline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule, var(--line)); }
.asi-bar { position: absolute; top: 2px; height: 8px; border-radius: 0 3px 3px 0; }
.asi-bar.neg { border-radius: 3px 0 0 3px; }
.asi-bar.g { background: #2a78d6; } .asi-bar.i { background: #eb6834; }
html.dark .asi-bar.g { background: #3987e5; } html.dark .asi-bar.i { background: #d95926; }
.asi-spark { width: 150px; height: 30px; display: block; }
.asi-line-g { stroke: #2a78d6; stroke-width: 1.8; stroke-linejoin: round; }
.asi-line-i { stroke: #eb6834; stroke-width: 1.8; stroke-linejoin: round; }
html.dark .asi-line-g { stroke: #3987e5; } html.dark .asi-line-i { stroke: #d95926; }
.asi-zero { stroke: var(--line); stroke-width: 1; }
.asi-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; vertical-align: -1px; }
.asi-dot-g { background: #2a78d6; } .asi-dot-i { background: #eb6834; }
html.dark .asi-dot-g { background: #3987e5; } html.dark .asi-dot-i { background: #d95926; }
.asi-z { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 4px; padding: 0 6px; }
.asi-z.pos { background: rgba(208,59,59,0.12); color: #d03b3b; }
.asi-z.neg { background: rgba(37,106,191,0.12); color: #256abf; }
html.dark .asi-z.pos { background: rgba(230,103,103,0.16); color: #e66767; }
html.dark .asi-z.neg { background: rgba(57,135,229,0.16); color: #3987e5; }
.surprises-view .scroll-x { overflow-x: auto; }

/* Cyclical gears — worked examples + method link (mirrors the ASI pattern) */
.gear-method-link { color: var(--accent); font-size: 12px; white-space: nowrap; }
.gear-ex-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.gear-ex-h { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.gear-ex-t { font-weight: 600; }
.gear-ex-t .flag-img { width: 16px; height: 11px; border-radius: 1px; object-fit: cover; vertical-align: -1px; margin-right: 4px; }
.gear-ex-math { font-size: 12.5px; }
.gear-ex-math b { font-size: 13px; }
.gear-ex-gates { line-height: 1.4; }

/* ── F4 Alerts panel (🔔, home_view.js initAlertsPanel) ─────────────── */
.alr-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border, #e2e8f0); background: var(--card, #fff);
  color: var(--muted, #64748b); border-radius: 6px; padding: 5px 10px;
  font-size: 12px; line-height: 1; font-weight: 600;
  transition: border-color .15s, color .15s; }
.alr-btn:hover { border-color: var(--series, #0f4c81); color: var(--ink, #1e293b); }
.alr-card { max-width: 460px; }
.alr-list { margin: 10px 0 4px; max-height: 220px; overflow-y: auto; }
.alr-empty { color: var(--muted, #64748b); font-size: 12.5px; padding: 6px 2px; }
.alr-rule { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--border, #e2e8f0); border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; }
.alr-rule-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.alr-rule-scope { font-weight: 600; font-size: 12.5px; color: var(--ink, #1e293b); }
.alr-rule-trig { font-size: 12px; color: var(--series, #0f4c81); font-weight: 600; }
.alr-rule-mode { font-size: 11px; color: var(--faint, #94a3b8); }
.alr-rule-del { border: none; background: none; color: var(--faint, #94a3b8);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.alr-rule-del:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.08); }
.alr-form { border-top: 1px solid var(--border, #e2e8f0); margin-top: 8px; padding-top: 10px; }
.alr-form-title { font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted, #64748b); margin-bottom: 6px; }
.alr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-bottom: 8px; font-size: 12.5px; }
.alr-lbl { flex: 0 0 52px; font-size: 11px; font-weight: 700; color: var(--muted, #64748b);
  text-transform: uppercase; letter-spacing: .4px; }
.alr-radio { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  color: var(--ink, #1e293b); }
.alr-countries { min-width: 190px; font-size: 12px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px; background: var(--card, #fff); color: var(--ink, #1e293b); padding: 3px; }
.alr-countries:disabled { opacity: .45; }
.alr-trigger { font-size: 12.5px; border: 1px solid var(--border, #e2e8f0); border-radius: 6px;
  background: var(--card, #fff); color: var(--ink, #1e293b); padding: 4px 6px; }
.alr-z-wrap { display: inline-flex; align-items: center; gap: 4px; color: var(--muted, #64748b); }
.alr-z { width: 56px; font-size: 12.5px; border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px; background: var(--card, #fff); color: var(--ink, #1e293b); padding: 4px 6px; }
.alr-fixed { color: var(--muted, #64748b); font-size: 12px; }
html.dark .alr-btn { background: var(--card, #16202c); border-color: var(--border, #24324a); }
html.dark .alr-rule, html.dark .alr-countries, html.dark .alr-trigger, html.dark .alr-z {
  background: var(--card, #16202c); border-color: var(--border, #24324a); }

/* ── Correlation lab (Signals sub-view) ─────────────────────────────── */
.correlation-view .corr-wrap { display: flex; flex-direction: column; gap: 14px; padding: 12px 24px 8px; }
.corr-controls-card { padding: 12px 14px; min-height: 0; }
.corr-card { min-height: 0; }
.corr-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.corr-var { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.corr-var-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.corr-country { max-width: 170px; }
.corr-swap { padding: 2px 10px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.corr-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.corr-combo { position: relative; min-width: 240px; flex: 1 1 240px; max-width: 420px; }
.corr-combo-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--ink); }
.corr-combo-input:focus { outline: none; border-color: var(--muted); }
.corr-dd { position: absolute; z-index: 60; top: calc(100% + 3px); left: 0; right: 0; max-height: 320px;
  overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.corr-dd-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  text-align: left; padding: 6px 10px; border: none; border-bottom: 1px solid var(--line);
  background: none; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.corr-dd-item:last-child { border-bottom: none; }
.corr-dd-item:hover, .corr-dd-item.active { background: rgba(127, 160, 155, 0.14); }
.corr-dd-name { font-weight: 500; }
.corr-dd-meta { font-size: 10.5px; color: var(--muted); }
.corr-dd-empty { padding: 8px 10px; }
.corr-card { position: relative; }
.corr-sc-grid { display: grid; grid-template-columns: minmax(0, 560px) 260px; gap: 8px 34px;
  align-items: center; justify-content: center; }
@media (max-width: 940px) { .corr-sc-grid { grid-template-columns: minmax(0, 560px); } }
.corr-sq { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; margin: 0 auto; }
.corr-half { position: relative; height: 250px; padding: 0 4px 4px; }
.corr-side { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.corr-stat { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); }
.corr-stat-val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.corr-stat-hero .corr-stat-val { font-size: 30px; font-weight: 700; line-height: 1.15; }
.corr-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1px; }
.corr-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.corr-read { margin: 0; line-height: 1.5; }
.corr-src { font-size: 10.5px; margin: 10px 2px 0; line-height: 1.45; }
.corr-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; }
@media (max-width: 940px) { .corr-duo { grid-template-columns: 1fr; } }
.corr-chart { padding: 0 8px 8px; }
.corr-seg button { font-size: 11.5px; }

/* ── Debt sustainability (Signals sub-view) ─────────────────────────── */
.debtsust-view .ds-wrap { display: flex; flex-direction: column; gap: 14px; padding: 12px 24px 8px; }
.ds-controls-card { padding: 12px 14px; min-height: 0; }
.ds-card { position: relative; min-height: 0; }
.ds-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ds-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px 30px; align-items: center; }
@media (max-width: 940px) { .ds-grid { grid-template-columns: minmax(0, 1fr); } }
.ds-chart { position: relative; height: 380px; padding: 0 4px 4px; }
.ds-side { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.ds-stat { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); }
.ds-stat-val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ds-stat-hero .ds-stat-val { font-size: 30px; font-weight: 700; line-height: 1.15; }
.ds-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1px; }
.ds-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ds-read { margin: 0; line-height: 1.5; }
.ds-src { font-size: 10.5px; margin: 10px 2px 0; line-height: 1.45; }
.ds-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 940px) { .ds-duo { grid-template-columns: 1fr; } }
.ds-seg button { font-size: 11.5px; }
.ds-num { width: 76px; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 4px 7px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); }
.ds-num:focus { outline: none; border-color: var(--muted); }
.ds-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.ds-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink); }
.ds-form-lbl { color: var(--muted); }
.ds-reset { margin-top: 10px; font-size: 11.5px; cursor: pointer; }
.ds-note { margin: 10px 2px 0; line-height: 1.5; }
.ds-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ds-table th, .ds-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; vertical-align: top; }
.ds-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.ds-table tr:last-child td { border-bottom: none; }
.ds-td-note, .ds-th-note { font-size: 10.5px; color: var(--muted); }
.ds-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: baseline; }

/* ─────────── Screener (Compare › Screener) ───────────
   Country × indicator matrix. Cell tint is a DIVERGING scale over the
   cross-sectional z-score (blue = low vs peers, red = high), painted inline by
   screener_view.js as an alpha over the surface so it stays on-theme in both
   modes without a second palette. Neutral by design: the tint answers "who is
   high today", never "is this good". */
.scr-wrap { padding: 18px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.scr-head h2 { margin: 0 0 4px; }
.scr-tagline { margin: 0; max-width: 116ch; line-height: 1.55; }
.scr-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.scr-ctr-spacer { flex: 1 1 auto; }
.scr-seg button { font-size: 11.5px; }
.scr-seg[hidden] { display: none; }

/* indicator picker */
.scr-picker-host[hidden] { display: none; }
.scr-picker { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 12px 14px; }
.scr-picker-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.scr-picker-body { max-height: 320px; overflow-y: auto; }
.scr-picker-group {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 5px;
}
.scr-picker-row { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink-2); font: inherit; font-size: 11.5px; padding: 4px 10px;
}
.scr-chip:hover { border-color: var(--rule); color: var(--ink); }
.scr-chip.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.scr-chip-n { font-size: 10px; opacity: 0.65; font-variant-numeric: tabular-nums; }
.scr-picker-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* table — pinned first column AND pinned header (the container scrolls both ways) */
.scr-card { padding: 0; overflow: hidden; }
.scr-table-scroll { overflow: auto; max-height: 74vh; }
.scr-table {
  border-collapse: separate; border-spacing: 0; min-width: 100%;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.scr-table th, .scr-table td { border-bottom: 1px solid var(--line); white-space: nowrap; }
.scr-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
  border-bottom: 2px solid var(--rule); vertical-align: bottom;
  padding: 8px 10px; text-align: right;
}
.scr-table th.scr-colhead { cursor: pointer; user-select: none; }
.scr-table th.scr-colhead:hover .scr-col-label { color: var(--ink); }
.scr-table th.scr-colhead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.scr-table th.scr-sorted .scr-col-label, .scr-table th.scr-sorted .scr-col-unit { color: var(--accent); }
.scr-col-label { display: block; font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--ink-2); max-width: 132px; white-space: normal; }
.scr-col-unit { display: block; font-size: 9.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.scr-table th.scr-country-col, .scr-table td.scr-country-col {
  position: sticky; left: 0; text-align: left; padding: 5px 10px;
  background: var(--paper); box-shadow: 1px 0 0 var(--line);
}
.scr-table td.scr-country-col { z-index: 1; }
.scr-table thead th.scr-country-col { z-index: 3; }
.scr-table td.scr-country-col .flag-img { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.scr-flag-emoji { margin-right: 5px; font-size: 13px; }
.scr-cname { font-weight: 500; color: var(--ink); }
.scr-hide {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; margin-left: 6px; opacity: 0;
}
.scr-table tbody tr:hover .scr-hide { opacity: 1; }
.scr-hide:hover { color: var(--ink); }
.scr-table tbody tr:hover td.scr-country-col { background: var(--line-2); }

.scr-table td.scr-cell { padding: 4px 9px; text-align: right; min-width: 62px; }
.scr-v { display: block; font-size: 12px; color: var(--ink); }
.scr-asof { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; letter-spacing: 0.02em; }
.scr-table td.scr-na { color: var(--muted); opacity: 0.45; }
/* a level that cannot join its column's cross-section: shown, never ranked */
.scr-table td.scr-nocmp .scr-v { color: var(--ink-2); border-bottom: 1px dotted var(--rule); }
/* a print that lags the freshest in its column */
.scr-table td.scr-stale { position: relative; }
.scr-table td.scr-stale::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  border-top: 5px solid var(--muted); border-left: 5px solid transparent; opacity: 0.75;
}
.scr-num { font-variant-numeric: tabular-nums; }
.scr-dim { color: var(--muted); font-size: 11px; }
.scr-up { color: #b0480f; } .scr-dn { color: #24608f; }
html.dark .scr-up { color: #e0641c; } html.dark .scr-dn { color: #5a8fd0; }

/* legend + footnote */
.scr-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; }
.scr-key { display: inline-flex; gap: 2px; }
.scr-key i { display: inline-block; width: 20px; height: 11px; border-radius: 2px; border: 1px solid var(--line); }
.scr-key-mid { background: var(--paper); }
.scr-key-stale { display: inline-block; width: 0; height: 0; margin-right: 4px;
  border-top: 6px solid var(--muted); border-left: 6px solid transparent; vertical-align: 0; }
.scr-key-nocmp { display: inline-block; width: 14px; margin-right: 4px;
  border-bottom: 1px dotted var(--rule); vertical-align: 3px; }
.scr-legend-sep { width: 1px; height: 14px; background: var(--line); margin: 0 4px; }
.scr-foot { margin: 0 2px; line-height: 1.55; max-width: 124ch; }

/* per-indicator detail */
.scr-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.scr-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.scr-detail-head h3 { margin: 0; font-size: 15px; }
.scr-detail-head p { margin: 0; flex: 1 1 320px; }
.scr-detail-sel { max-width: 340px; }
.scr-detail-table td.scr-cell { min-width: 54px; }
.scr-sparkcell { padding: 2px 9px !important; }
.scr-spark { display: block; overflow: visible; }
.scr-spark-line { fill: none; stroke: #2e6fb3; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.scr-spark-dot { fill: #2e6fb3; }
.scr-spark-zero { stroke: var(--rule); stroke-width: 0.75; stroke-dasharray: 2 2; }
html.dark .scr-spark-line { stroke: #5a8fd0; }
html.dark .scr-spark-dot { fill: #5a8fd0; }

@media (max-width: 760px) { .scr-wrap { padding: 14px 12px 24px; } }

/* ─────────── Co-movement (Signals › Co-movement) ───────────
   The correlation heatmap encodes a signed magnitude, so it uses the diverging
   pair — blue (moves opposite) ↔ red (moves together) — with the surface itself
   as the neutral midpoint, painted inline by comovement_view.js as an alpha so
   both themes work from one scale. */
.cm-wrap { padding: 6px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.cm-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cm-seg button { font-size: 11.5px; }
.cm-blurb { margin: 0 2px; line-height: 1.55; max-width: 118ch; }
.cm-card { position: relative; }
.cm-src { margin: 10px 2px 0; line-height: 1.5; }
.cm-foot { margin: 0 2px; line-height: 1.55; max-width: 124ch; }

/* matrix */
.cm-matrix-wrap { position: relative; overflow-x: auto; padding: 4px 0 2px; }
.cm-matrix { display: block; margin: 0 auto; }
.cm-matrix .cm-axlbl { font-size: 9.5px; font-weight: 600; fill: var(--ink-2); font-family: 'Poppins', system-ui, sans-serif; }
.cm-matrix .cm-cell { stroke: var(--paper); stroke-width: 1; cursor: default; }
.cm-matrix .cm-cell:hover, .cm-matrix .cm-cell:focus { stroke: var(--ink); stroke-width: 1.5; outline: none; }
.cm-matrix .cm-cell-na { fill: transparent; stroke-dasharray: 2 2; stroke: var(--line); }
.cm-legend { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.cm-key { display: inline-flex; gap: 2px; }
.cm-key i { display: inline-block; width: 22px; height: 11px; border-radius: 2px; border: 1px solid var(--line); }

/* factor card */
.cm-factor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
@media (max-width: 940px) { .cm-factor-grid { grid-template-columns: 1fr; } }
.cm-side { display: flex; flex-direction: column; gap: 8px; }
.cm-stat { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); }
.cm-stat-val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cm-stat-hero .cm-stat-val { font-size: 32px; font-weight: 700; line-height: 1.15; }
.cm-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1px; }
.cm-read { margin: 2px 0 0; line-height: 1.5; }
.cm-chart { height: 260px; }
.cm-chart-tall { height: 420px; }

/* beta table */
.cm-table-scroll { overflow-x: auto; margin-top: 6px; }
.cm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.cm-table th, .cm-table td { border-bottom: 1px solid var(--line); white-space: nowrap; padding: 6px 10px; }
.cm-table thead th { text-align: right; vertical-align: bottom; border-bottom: 2px solid var(--rule); background: var(--paper); }
.cm-table th.cm-colhead { cursor: pointer; user-select: none; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cm-table th.cm-colhead:hover { color: var(--ink); }
.cm-table th.cm-sorted, .cm-table th.cm-sorted .cm-col-unit { color: var(--accent); }
.cm-table th.cm-colhead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cm-col-unit { display: block; font-size: 9.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.cm-table th.cm-country-col, .cm-table td.cm-country-col { text-align: left; color: var(--ink); font-weight: 500; }
.cm-table td.cm-cell { text-align: right; min-width: 92px; }
.cm-table td.cm-na { color: var(--muted); opacity: 0.45; }
.cm-b { display: block; color: var(--ink); }
.cm-r2 { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; }

@media (max-width: 760px) { .cm-wrap { padding: 6px 12px 24px; } }

/* ─────────── Lead & lag (Signals › Lead & lag) ───────────
   Correlograms use the same diverging pair as the co-movement matrix — blue for
   "moves opposite", red for "moves together" — painted inline so one scale
   serves both themes. The shaded half of every chart is the driver-leads region,
   which is the encoding that answers "does this actually come first". */
.ll-wrap { padding: 6px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.ll-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ll-seg button { font-size: 11.5px; }
.ll-card { position: relative; }
.ll-src, .ll-foot { margin: 10px 2px 0; line-height: 1.55; max-width: 124ch; }

/* correlogram primitives */
.ll-cg { display: block; overflow: visible; }
.ll-cg .ll-zero { stroke: var(--rule); stroke-width: 1; }
.ll-cg .ll-mid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.7; }
.ll-cg .ll-band { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.ll-cg .ll-lead-zone { fill: var(--ink); opacity: 0.035; }
html.dark .ll-cg .ll-lead-zone { fill: #ffffff; opacity: 0.05; }
.ll-cg .ll-tick { font-size: 8.5px; fill: var(--muted); font-family: 'Poppins', system-ui, sans-serif; }
.ll-cg .ll-bar-peak { stroke: var(--ink); stroke-width: 0.8; }

/* headline */
.ll-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
@media (max-width: 940px) { .ll-hero-grid { grid-template-columns: 1fr; } }
.ll-hero-chart { position: relative; }
.ll-hero-chart .ll-cg { width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.ll-hero-cap { margin-top: 4px; text-align: center; }
.ll-side { display: flex; flex-direction: column; gap: 8px; }
.ll-stat { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); }
.ll-stat-val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ll-stat-hero .ll-stat-val { font-size: 28px; font-weight: 700; line-height: 1.2; }
.ll-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1px; }
.ll-read, .ll-note { margin: 2px 0 0; line-height: 1.5; }

/* small multiples */
.ll-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 8px; }
.ll-cell { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 6px; background: var(--paper); }
.ll-cell-weak { opacity: 0.5; }
.ll-cell-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.ll-cell-iso { font-size: 11.5px; font-weight: 700; color: var(--ink); letter-spacing: 0.03em; }
.ll-cell-name { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-cell .ll-cg { width: 100%; height: auto; }
.ll-cell-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; margin-top: 2px; }
.ll-peak { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) { .ll-wrap { padding: 6px 12px 24px; } }

/* ─────────── Turning points (Signals › Turning points) ─────────── */
.cy-wrap { padding: 6px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.cy-card { position: relative; }
.cy-chart { height: 420px; }
.cy-src, .cy-foot { margin: 10px 2px 0; line-height: 1.55; max-width: 124ch; }
.cy-table-scroll { overflow-x: auto; margin-top: 6px; }
.cy-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.cy-table th, .cy-table td { border-bottom: 1px solid var(--line); white-space: nowrap; padding: 6px 10px; }
.cy-table thead th { text-align: right; font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid var(--rule); background: var(--paper); }
.cy-table th.cy-country-col, .cy-table td.cy-country-col { text-align: left; color: var(--ink); font-weight: 500; }
.cy-table td { text-align: right; }
.cy-num { font-variant-numeric: tabular-nums; color: var(--ink); }
.cy-dim { color: var(--muted); }
.cy-up { color: #b0480f; } .cy-dn { color: #24608f; }
html.dark .cy-up { color: #e0641c; } html.dark .cy-dn { color: #5a8fd0; }
/* a 50%-anchored diffusion bar: fill grows out from the midpoint either way */
.cy-barcell { width: 120px; }
.cy-bar { position: relative; height: 12px; width: 108px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.cy-bar-fill { position: absolute; top: 0; bottom: 0; }
.cy-bar-fill.up { background: rgba(206,66,66,0.55); }
.cy-bar-fill.dn { background: rgba(58,124,205,0.55); }
.cy-bar-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.cy-flag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.cy-flag.up { background: rgba(206,66,66,0.15); color: #b0480f; }
.cy-flag.dn { background: rgba(58,124,205,0.15); color: #24608f; }
html.dark .cy-flag.up { color: #e0641c; } html.dark .cy-flag.dn { color: #5a8fd0; }

/* ─────────── External risk (Signals › External risk) ─────────── */
.ex-wrap { padding: 6px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.ex-card { position: relative; }
.ex-chart { height: 420px; }
.ex-chart-tall { height: 460px; }
.ex-src, .ex-foot { margin: 10px 2px 0; line-height: 1.55; max-width: 124ch; }
.ex-table-scroll { overflow-x: auto; margin-top: 6px; }
.ex-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.ex-table th, .ex-table td { border-bottom: 1px solid var(--line); white-space: nowrap; padding: 6px 10px; }
.ex-table thead th { text-align: right; font-size: 10.5px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid var(--rule); background: var(--paper); vertical-align: bottom; }
.ex-table th.ex-colhead { cursor: pointer; user-select: none; }
.ex-table th.ex-colhead:hover { color: var(--ink); }
.ex-table th.ex-sorted { color: var(--accent); }
.ex-table th.ex-colhead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ex-table th.ex-country-col, .ex-table td.ex-country-col { text-align: left; color: var(--ink); font-weight: 500; }
.ex-table td.ex-cell { text-align: right; min-width: 68px; }
.ex-table td.ex-na { color: var(--muted); opacity: 0.45; }
.ex-rank { display: block; font-size: 12px; color: var(--ink); font-weight: 600; }
.ex-val { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.ex-score { font-weight: 700; }
.ex-dim { color: var(--muted); }
.ex-up { color: #1f7a55; } .ex-dn { color: #b0480f; }
html.dark .ex-up { color: #199e70; } html.dark .ex-dn { color: #e0641c; }
.ex-warn { color: #b0480f; font-weight: 600; }
html.dark .ex-warn { color: #e0641c; }

@media (max-width: 760px) { .cy-wrap, .ex-wrap { padding: 6px 12px 24px; } }
/* a country printing well behind the cohort: greyed, never silently mixed in */
.cy-table tbody tr.cy-row-stale td { opacity: 0.5; }

/* ─────────── DSA distributions (Signals › Debt sustainability) ───────────
   The histogram answers "has this country ever run the balance it needs".
   Bars are neutral ink — the reader's attention belongs on the two markers
   (latest, DSPB), not on the mass. */
.ds-dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; position: relative; }
.ds-dist-panel { min-width: 0; }
.ds-dist-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ds-dist-sub { margin-bottom: 2px; }
.ds-dist { display: block; width: 100%; height: auto; overflow: visible; margin-top: 2px; }
.ds-dist .ds-dist-bar { fill: var(--ink); opacity: 0.3; }
html.dark .ds-dist .ds-dist-bar { fill: #cfe0dd; opacity: 0.26; }
.ds-dist .ds-dist-axis { stroke: var(--rule); stroke-width: 1; }
.ds-dist .ds-dist-zero, .ds-strip .ds-dist-zero { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 2; }
.ds-dist .ds-dist-ok { fill: var(--accent); opacity: 0.07; }
.ds-dist .ds-dist-mark { stroke-width: 2; }
.ds-dist .ds-dist-mark.latest { stroke: #c2410c; }
.ds-dist .ds-dist-mark.dspb { stroke: var(--ink); stroke-dasharray: 4 3; }
html.dark .ds-dist .ds-dist-mark.latest { stroke: #e0641c; }
html.dark .ds-dist .ds-dist-mark.dspb { stroke: #cfe0dd; }
.ds-dist .ds-dist-lbl { font-size: 9.5px; font-weight: 700; font-family: 'Poppins', system-ui, sans-serif; }
.ds-dist .ds-dist-lbl.latest { fill: #c2410c; }
.ds-dist .ds-dist-lbl.dspb { fill: var(--ink); }
html.dark .ds-dist .ds-dist-lbl.latest { fill: #e0641c; }
html.dark .ds-dist .ds-dist-lbl.dspb { fill: #cfe0dd; }
.ds-dist .ds-dist-tick, .ds-strip .ds-dist-tick { font-size: 9px; fill: var(--muted); font-family: 'Poppins', system-ui, sans-serif; }

/* the cross-country strip */
.ds-strip-wrap { overflow-x: auto; }
.ds-strip { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; overflow: visible; }
.ds-strip .ds-strip-lbl { font-size: 9.5px; font-weight: 700; fill: var(--ink-2); font-family: 'Poppins', system-ui, sans-serif; }
.ds-strip .ds-strip-whisk { stroke: var(--rule); stroke-width: 1.2; }
.ds-strip .ds-strip-box { fill: var(--ink); opacity: 0.16; }
html.dark .ds-strip .ds-strip-box { fill: #cfe0dd; opacity: 0.2; }
.ds-strip .ds-strip-med { stroke: var(--muted); stroke-width: 1.4; }
.ds-strip .ds-strip-latest { fill: #c2410c; stroke: var(--paper); stroke-width: 1; }
.ds-strip .ds-strip-dspb { stroke: var(--ink); stroke-width: 2; }
html.dark .ds-strip .ds-strip-latest { fill: #e0641c; }
html.dark .ds-strip .ds-strip-dspb { stroke: #cfe0dd; }
.ds-strip .ds-strip-hit { fill: transparent; }
.ds-strip-legend { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ds-lg-latest { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c2410c; }
.ds-lg-dspb { display: inline-block; width: 2px; height: 12px; background: var(--ink); margin-left: 10px; }
.ds-lg-box { display: inline-block; width: 20px; height: 8px; border-radius: 2px; background: var(--ink); opacity: 0.16; margin-left: 10px; }
html.dark .ds-lg-latest { background: #e0641c; }
html.dark .ds-lg-dspb { background: #cfe0dd; }
html.dark .ds-lg-box { background: #cfe0dd; opacity: 0.2; }
/* a stabilizing balance outside the strip's scale: an arrow at the edge, so the
   axis stays sized by the distributions instead of by one extreme */
.ds-strip .ds-strip-off { fill: var(--ink); opacity: 0.75; }
html.dark .ds-strip .ds-strip-off { fill: #cfe0dd; }

/* ── Forecast vs actual (Projections › sub-view, assets/weo_vintages_view.js) ── */
.projections-view .compare-subnav { margin-bottom: 12px; }
#projections-pane-main[hidden], #projections-pane-vintages[hidden] { display: none !important; }
/* the main pane's sticky controls row used to be a direct child of .main */
.projections-view #projections-pane-main > .board-head {
  position: sticky; top: 56px; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line);
  margin: 8px 0 14px; padding: 8px 0;
}
.wv-controls-card { margin-bottom: 12px; }
.wv-countries { margin-bottom: 12px; }
.wv-countries .cmp-chip .flag-img { width: 15px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.wv-card { position: relative; min-height: 0; margin-bottom: 14px; }
.wv-card-head { padding-right: 34px; }
.wv-card-title { margin: 0 0 3px; font-size: 14px; font-weight: 600; color: var(--ink); }
.wv-card-sub { margin: 0 0 6px; line-height: 1.45; }
.wv-chart { position: relative; height: 420px; padding: 0 2px 2px; }
.wv-empty { position: absolute; top: 40%; left: 0; right: 0; text-align: center; }
.wv-note { margin-top: 8px; }
.wv-toggle {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 500;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 10px; cursor: pointer;
}
.wv-toggle:hover { color: var(--ink); background: var(--bg); }
.wv-toggle-box { width: 11px; height: 11px; border: 1.5px solid var(--rule); border-radius: 3px; box-sizing: border-box; }
.wv-toggle.on .wv-toggle-box { background: var(--accent); border-color: var(--accent); }
.wv-toggle.on { color: var(--ink); }
/* HTML legend (captured by copy-image, unlike a Chart.js legend it stays in the DOM) */
.wv-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 4px; font-size: 11.5px; color: var(--ink-2); }
.wv-lg { display: inline-flex; align-items: center; gap: 6px; }
.wv-lg-sw { display: inline-flex; align-items: center; }
.wv-lg-actual { stroke: var(--ink); stroke-width: 2.2; }
.wv-lg-dash { stroke-dasharray: 4 3; stroke-width: 1.6; }
.wv-lg-hollow { fill: var(--paper); stroke: var(--ink); stroke-width: 1.8; }
.wv-lg-path { stroke: var(--ink); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 1.5 3; stroke-linecap: round; }
/* error table + tiles */
.wv-table-wrap { overflow-x: auto; margin-top: 4px; }
.wv-table td, .wv-table th { white-space: nowrap; }
.wv-table td.right, .wv-table th.right { text-align: right; }
.wv-table td.mono { font-variant-numeric: tabular-nums; }
.wv-err.pos { color: #c2410c; } .wv-err.neg { color: #2e6fb3; }
html.dark .wv-err.pos { color: #e0641c; } html.dark .wv-err.neg { color: #5a8fd0; }
.wv-tiles { margin: 4px 0 6px; }
.wv-tiles .ds-stat-hero .ds-stat-val { font-size: 26px; white-space: nowrap; }
.wv-prose { font-size: 12.5px; margin-top: 8px; }
/* bias strip */
.wv-strip { max-width: 720px; }
.wv-strip .ds-strip-lbl { font-size: 11px; }
.wv-strip .ds-dist-tick { font-size: 10px; }
.wv-strip .wv-strip-val { fill: var(--ink-2); }
.wv-strip .wv-strip-grid { stroke: var(--line); stroke-width: 1; }
.wv-strip .ds-strip-lbl.sel { fill: var(--ink); }
.wv-strip .wv-strip-dot { stroke: var(--paper); stroke-width: 1.5; }
.wv-strip .wv-strip-dot.sel { stroke: var(--ink); stroke-width: 2; }
.wv-strip .wv-strip-row { cursor: pointer; }
.wv-strip .wv-strip-row:hover .ds-strip-hit { fill: var(--ink); opacity: 0.05; }
.wv-strip .wv-strip-row.sel .ds-strip-hit { fill: var(--accent); opacity: 0.07; }
@media (max-width: 900px) { .wv-chart { height: 340px; } }

/* ═══ design pass 2026-09 · selector ═══ */
/* Shared scrolling country strip — assets/chip_strip.js wraps every .cmp-chip-row in
   .chip-strip > [input.chip-strip-search] + .chip-strip-viewport > .cmp-chip-row + ‹ › arrows.
   Fades are ::before/::after gradients from --paper (never mask-image: copy-image safe). */
.compare-countries:has(.chip-strip) .cmp-label { margin-bottom: 6px; }
.gdp-countries.compare-countries:has(.chip-strip) { padding-bottom: 6px; }
.chip-strip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chip-strip-viewport { position: relative; flex: 1 1 auto; min-width: 0; }
.chip-strip .cmp-chip-row {
  flex-wrap: nowrap; gap: 6px; align-items: center;
  overflow-x: auto; overflow-y: hidden; padding: 2px 0 3px;
  scroll-snap-type: x proximity; scroll-padding: 0 30px;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.chip-strip .cmp-chip-row::-webkit-scrollbar { display: none; height: 0; }
.chip-strip .cmp-chip-row > .cmp-chip { flex: none; scroll-snap-align: start; }
.chip-strip .cmp-chip-row > .cmp-chip[hidden] { display: none; }
.chip-strip .cmp-chip { padding: 4px 9px; font-size: 11.5px; gap: 5px; line-height: 1.35; }
.chip-strip .cmp-chip.active { font-weight: 600; }
.chip-strip .cmp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip-strip .cmp-chip .cmp-flag { font-size: 13px; }
.chip-strip .cmp-chip .cmp-dot { width: 7px; height: 7px; }
.chip-strip .cmp-chip-row .cmp-chip .flag-img,
.projections-view .chip-strip .cmp-chip .flag-img,
.wv-countries .chip-strip .cmp-chip .flag-img { width: 14px; height: 9px; margin-right: 3px; vertical-align: -1px; border-radius: 1px; }
.chip-strip-empty { padding: 4px 6px; white-space: nowrap; font-size: 11.5px; }
/* edge fades: only when there is more content in that direction (class toggled by the helper) */
.chip-strip-viewport::before, .chip-strip-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .18s;
}
.chip-strip-viewport::before { left: 0;  background: linear-gradient(90deg,  var(--paper) 40%, transparent); }
.chip-strip-viewport::after  { right: 0; background: linear-gradient(270deg, var(--paper) 40%, transparent); }
.chip-strip-viewport.has-left::before, .chip-strip-viewport.has-right::after { opacity: 1; }
/* ‹ › buttons: hover / focus on desktop, always on touch */
.chip-strip-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 24px; height: 24px; padding: 0 0 2px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--accent); box-shadow: var(--shadow);
  font: 700 19px/1 'Poppins', sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .15s, background .12s, border-color .12s;
}
.chip-strip-arrow.left  { left: 1px; }
.chip-strip-arrow.right { right: 1px; }
.chip-strip-arrow:hover { background: var(--bg); border-color: var(--accent); }
.chip-strip-viewport.has-left:hover .chip-strip-arrow.left,
.chip-strip-viewport.has-right:hover .chip-strip-arrow.right,
.chip-strip-viewport.has-left:focus-within .chip-strip-arrow.left,
.chip-strip-viewport.has-right:focus-within .chip-strip-arrow.right { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .chip-strip-viewport.has-left .chip-strip-arrow.left,
  .chip-strip-viewport.has-right .chip-strip-arrow.right { opacity: 1; pointer-events: auto; }
}
/* type-ahead (single-select pickers) */
.chip-strip-search {
  flex: none; width: 150px; height: 26px; padding: 0 9px 0 26px; box-sizing: border-box;
  font: 500 11.5px 'Poppins', sans-serif; color: var(--ink);
  background-color: var(--bg); border: 1px solid var(--line); border-radius: 999px; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a9e9b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center; background-size: 12px 12px;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.chip-strip-search::placeholder { color: var(--muted); }
.chip-strip-search:focus { border-color: var(--accent); background-color: var(--paper); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.chip-strip-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* "N selected · Clear" on the right of the label (multi-select rows) */
.cmp-label .chip-strip-meta {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; color: var(--muted); white-space: nowrap;
}
.cmp-label .chip-strip-meta .chip-strip-count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cmp-label .chip-strip-meta.none .chip-strip-count { color: var(--muted); }
.cmp-label .chip-strip-clear { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.cmp-label .chip-strip-clear:hover { text-decoration: underline; }
.cmp-label .chip-strip-clear:disabled { color: var(--muted); opacity: .6; cursor: default; text-decoration: none; }
/* ═══ end selector ═══ */
/* ═══ design pass 2026-09 · signals ═══ */
/* Signals tab (Debt heatmap · Nowcast · Gears · Surprises · Correlation lab · Co-movement ·
   Lead & lag · Turning points · External risk · Debt sustainability): compact cards, 13px/600
   titles, 12px muted subtitles, denser tables, accent hero numbers, thicker marks. */
.analytics-view .chart-card, .nowcast-view .chart-card, .gears-view .chart-card, .surprises-view .chart-card,
.correlation-view .chart-card, .comovement-view .chart-card, .leadlag-view .chart-card, .cycle-view .chart-card,
.external-view .chart-card, .debtsust-view .chart-card { padding: 12px 14px 10px; min-height: 0; }
.analytics-view .ty-chart-card, .analytics-view .ty-params, .analytics-view .ty-shock, .analytics-view .card,
.nowcast-view .nc-card, .gears-view .gear-ex-card { padding: 12px 14px 10px; }
.analytics-view .cc-title, .nowcast-view .cc-title, .surprises-view .cc-title, .correlation-view .cc-title,
.comovement-view .cc-title, .leadlag-view .cc-title, .cycle-view .cc-title, .external-view .cc-title,
.debtsust-view .cc-title, .analytics-view .card-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.analytics-view .cc-sub, .nowcast-view .cc-sub, .surprises-view .cc-sub, .correlation-view .cc-sub,
.comovement-view .cc-sub, .leadlag-view .cc-sub, .cycle-view .cc-sub, .external-view .cc-sub,
.debtsust-view .cc-sub { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; line-height: 1.4; }
/* toolbars */
.correlation-view .seg button, .comovement-view .seg button, .leadlag-view .seg button,
.debtsust-view .seg button, .nowcast-view .seg button { padding: 5px 10px; font-size: 12px; }
.analytics-view .an-seg-btn { padding: 5px 10px; font-size: 12px; }
.correlation-view .corr-controls-card, .debtsust-view .ds-controls-card { padding: 10px 12px; }
.comovement-view .cm-controls, .leadlag-view .ll-controls { gap: 6px; }
/* chart heights −12–15% (heroes ≥ 300, small multiples ≥ 160) */
.analytics-view .ty-chart-wrap { height: 320px; }
.analytics-view .ty-shock-proj-wrap { height: 200px; }
.correlation-view .corr-half { height: 220px; }
.debtsust-view .ds-chart { height: 330px; }
.comovement-view .cm-chart { height: 230px; }
.comovement-view .cm-chart-tall { height: 360px; }
.cycle-view .cy-chart { height: 360px; }
.external-view .ex-chart { height: 360px; }
.external-view .ex-chart-tall { height: 400px; }
/* stat tiles: accent hero number, muted label, tighter padding */
.debtsust-view .ds-stat, .correlation-view .corr-stat, .comovement-view .cm-stat, .leadlag-view .ll-stat { padding: 6px 10px; }
.debtsust-view .ds-stat-hero .ds-stat-val, .correlation-view .corr-stat-hero .corr-stat-val,
.comovement-view .cm-stat-hero .cm-stat-val, .leadlag-view .ll-stat-hero .ll-stat-val { color: var(--accent); }
.debtsust-view .ds-side, .correlation-view .corr-side { gap: 8px; }
/* tables: 4px 8px cells, tabular figures, sticky header, hover row, ≤3% zebra, 500-weight first column */
.comovement-view .cm-table th, .comovement-view .cm-table td, .cycle-view .cy-table th, .cycle-view .cy-table td,
.external-view .ex-table th, .external-view .ex-table td, .debtsust-view .ds-table th, .debtsust-view .ds-table td,
.surprises-view .asi-table th, .surprises-view .asi-table td,
.analytics-view .ty-table th, .analytics-view .ty-table td { padding: 4px 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.comovement-view .cm-table thead th, .cycle-view .cy-table thead th, .external-view .ex-table thead th,
.debtsust-view .ds-table thead th, .surprises-view .asi-table thead th,
.analytics-view .ty-table thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.comovement-view .cm-table tbody tr:nth-child(even) > td, .cycle-view .cy-table tbody tr:nth-child(even) > td,
.external-view .ex-table tbody tr:nth-child(even) > td, .surprises-view .asi-table tbody tr:nth-child(even) > td,
.analytics-view .ty-table tbody tr:nth-child(even) > td { background-color: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.comovement-view .cm-table tbody tr:hover > td, .cycle-view .cy-table tbody tr:hover > td,
.external-view .ex-table tbody tr:hover > td, .surprises-view .asi-table tbody tr:hover > td,
.debtsust-view .ds-table tbody tr:hover > td { background-color: var(--line-2); }
.surprises-view .asi-table td.asi-cty, .comovement-view .cm-table td.cm-country-col,
.cycle-view .cy-table td.cy-country-col, .external-view .ex-table td.ex-country-col { font-weight: 500; }
.comovement-view .cm-b { font-weight: 500; color: var(--ink); }
/* Taylor: stance chips carry the sign in their background */
.analytics-view .ty-chip.ty-tight { background: color-mix(in srgb, var(--pos) 18%, transparent); font-weight: 700; }
.analytics-view .ty-chip.ty-loose { background: color-mix(in srgb, var(--neg) 18%, transparent); font-weight: 700; }
/* Nowcast legend swatches match the thicker lines / stronger band */
.nowcast-view .nc-leg::before { border-top-width: 2.8px; }
.nowcast-view .nc-leg-band::before { border-top: 8px solid rgba(96,165,250,0.32); }
/* Surprises: thicker sparklines, slightly taller bars */
.surprises-view .asi-line-g, .surprises-view .asi-line-i { stroke-width: 2.4; }
.surprises-view .asi-bar { top: 1.5px; height: 9px; }
.surprises-view .asi-table td { padding: 3px 8px; }
/* Co-movement: bloc boundaries as an accent rule */
.comovement-view .cm-matrix .cm-bloc-rule { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
/* Lead & lag: tinted noise zone, stronger zero line, faded (not greyed-out) cards */
.leadlag-view .ll-cg .ll-zero { stroke: var(--ink); stroke-width: 1.6; opacity: 0.55; }
.leadlag-view .ll-cg .ll-band-zone { fill: var(--ink); opacity: 0.05; }
.leadlag-view .ll-cg .ll-band { stroke-width: 1.2; opacity: 0.5; }
.leadlag-view .ll-cg .ll-bar-peak { stroke: var(--ink); stroke-width: 1.2; }
.leadlag-view .ll-cell { padding: 6px 8px 4px; }
.leadlag-view .ll-cell-weak { opacity: 0.68; }
/* External: inline rank-strength bar (accent = hierarchy) */
.external-view .ex-rankbar { display: block; width: 100%; max-width: 54px; height: 4px; margin: 2px 0 2px auto;
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 2px; overflow: hidden; }
.external-view .ex-rankbar-fill { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.external-view .ex-val.ex-up { color: var(--pos); } .external-view .ex-val.ex-dn { color: var(--neg); }
/* Debt sustainability: scenario-coloured histogram marks, soft-accent strip boxes, --neg DSPB tick
   where a tightening is still needed; latest dot moves to the WEO blue so it never reads as --neg */
.debtsust-view .ds-dist .ds-dist-mark { stroke-width: 2.4; }
html.dark .debtsust-view .ds-dist .ds-dist-mark.latest { stroke: #e0641c; }
html.dark .debtsust-view .ds-dist .ds-dist-lbl.latest { fill: #e0641c; }
.debtsust-view .ds-strip .ds-strip-box { fill: var(--accent); opacity: 0.28; }
.debtsust-view .ds-lg-box { background: var(--accent); opacity: 0.28; }
.debtsust-view .ds-strip .ds-strip-whisk { stroke-width: 1.6; }
.debtsust-view .ds-strip .ds-strip-med { stroke: var(--ink); stroke-width: 1.6; opacity: 0.7; }
.debtsust-view .ds-strip .ds-strip-latest { fill: #2e6fb3; stroke-width: 1.5; r: 3.8; }
html.dark .debtsust-view .ds-strip .ds-strip-latest { fill: #5a8fd0; }
.debtsust-view .ds-lg-latest { background: #2e6fb3; }
html.dark .debtsust-view .ds-lg-latest { background: #5a8fd0; }
.debtsust-view .ds-strip .ds-strip-dspb { stroke-width: 2.4; }
.debtsust-view .ds-strip .ds-strip-dspb-need { stroke: var(--neg); }
.debtsust-view .ds-lg-dspb-need { background: var(--neg); }
.debtsust-view .ds-strip .ds-strip-off { fill: var(--neg); opacity: 0.85; }
/* ═══ end signals ═══ */

/* ═══ design pass 2026-09 · tables ═══ */
/* Tables (GDP / BoP / Public finance share .gdp-table): Poppins tabular figures,
   4px rows, sticky paper header on a --rule, zebra ≤3%, hover in --line-2.
   Order matters below: zebra → hover → headline tint LAST, because a headline
   row also carries its level class and its tint must win the even/odd stripe. */
.gdp-table { font-family: 'Poppins', system-ui, sans-serif; font-size: 12px; font-variant-numeric: tabular-nums; }
.gdp-table thead th {
  padding: 5px 8px; font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-2); background: var(--paper); border-bottom: 1px solid var(--rule);
}
.gdp-table thead th:first-child { background: var(--paper); }
.gdp-table tbody th { padding: 4px 8px; font-weight: 500; line-height: 1.4; }
.gdp-table tbody td { padding: 4px 8px; line-height: 1.4; }
.gdp-table-wide thead th, .gdp-table-wide tbody td, .gdp-table-wide tbody th { padding: 4px 7px; }
.gdp-table tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.gdp-table tbody tr:nth-child(even) > th { background: color-mix(in srgb, var(--ink) 2.5%, var(--card)); }
.gdp-table tbody tr:hover > td { background: var(--line-2); }
.gdp-table tbody tr:hover > th { background: var(--line-2); }
/* headline balances: accent tint ≤10% + the existing 3px accent bar; label in accent */
.gdp-table tbody tr.gdp-row > th, .gdp-table tbody tr.gdp-row > td,
.gdp-table tbody tr.bop-head > th, .gdp-table tbody tr.bop-head > td,
.gdp-table tbody tr.fiscal-head > th, .gdp-table tbody tr.fiscal-head > td {
  background: color-mix(in srgb, var(--accent) 9%, var(--card)); font-weight: 700;
}
.gdp-table tbody tr.gdp-row > th, .gdp-table tbody tr.bop-head > th, .gdp-table tbody tr.fiscal-head > th {
  color: var(--accent); font-style: normal; box-shadow: inset 3px 0 0 var(--accent);
}
.gdp-table tbody tr.gdp-row:hover > th, .gdp-table tbody tr.gdp-row:hover > td,
.gdp-table tbody tr.bop-head:hover > th, .gdp-table tbody tr.bop-head:hover > td,
.gdp-table tbody tr.fiscal-head:hover > th, .gdp-table tbody tr.fiscal-head:hover > td {
  background: color-mix(in srgb, var(--accent) 15%, var(--card));
}
/* the sign colour on the value span still wins over every tier colour */
.gdp-table tbody tr > td .pos { color: var(--pos); }
.gdp-table tbody tr > td .neg { color: var(--neg); }
.gdp-table tbody td .muted, .gdp-table tbody th .muted { color: var(--muted); font-style: italic; }

/* Compare board table (Charts ↔ Table toggle in app.js — CSS only) */
.cc-table thead th { padding: 5px 8px; color: var(--ink-2); background: var(--paper); border-bottom: 1px solid var(--rule); }
.cc-table td { padding: 4px 8px; }
.cc-table td:first-child { font-weight: 500; }
.cc-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.cc-table tbody tr:hover td { background: var(--line-2); }

/* Compare › External sector / Fiscal balance table modes (their own <style> is
   injected after this sheet, so these selectors carry one extra element) */
.etw table.et-tbl tr > th, .etw table.et-tbl tr > td,
.fbw table.fb-tbl tr > th, .fbw table.fb-tbl tr > td { padding: 4px 8px; line-height: 1.4; }
.etw table.et-tbl thead tr > th, .fbw table.fb-tbl thead tr > th {
  position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: 11px; color: var(--ink-2);
}
.etw table.et-tbl tbody tr > td:first-child, .fbw table.fb-tbl tbody tr > td:first-child { font-weight: 500; }
.etw table.et-tbl tbody tr:nth-child(even) > td, .fbw table.fb-tbl tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.etw table.et-tbl tbody tr:hover > td, .fbw table.fb-tbl tbody tr:hover > td { background: var(--line-2); }

/* Screener: a monitor, not a report — one line per cell (value + as-of inline),
   a divergent bar along the cell floor for the cross-sectional z, sorted column
   underlined in accent, zebra/hover painted as an inset so the inline tint
   underneath stays visible. */
.scr-table thead th { padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.scr-table th.scr-sorted { box-shadow: inset 0 -2px 0 var(--accent); }
.scr-table th.scr-country-col, .scr-table td.scr-country-col { padding: 4px 8px; }
.scr-table td.scr-cell { padding: 4px 8px 6px; position: relative; min-width: 84px; }
.scr-v { display: inline; font-weight: 500; }
.scr-asof { display: inline; margin: 0 0 0 5px; font-size: 9.5px; font-style: italic; letter-spacing: 0; }
.scr-table td.scr-stale .scr-asof { color: var(--warn); }
.scr-table td.scr-sortcol .scr-v { font-weight: 600; }
.scr-table tbody tr:nth-child(even) td.scr-country-col { background: color-mix(in srgb, var(--ink) 2.5%, var(--paper)); }
.scr-table tbody tr:nth-child(even) td.scr-cell { box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--ink) 2.5%, transparent); }
.scr-table tbody tr:hover td.scr-cell { box-shadow: inset 0 0 0 200px color-mix(in srgb, var(--ink) 7%, transparent); }
.scr-bar { position: absolute; bottom: 1px; height: 3px; border-radius: 2px; pointer-events: none; opacity: .9; }
.scr-bar.lo { right: 50%; background: rgb(58,124,205); }
.scr-bar.hi { left: 50%; background: rgb(206,66,66); }
html.dark .scr-bar.lo { background: #6ba6ff; }
html.dark .scr-bar.hi { background: #ff6f91; }
.scr-detail-table td.scr-cell { min-width: 58px; }
.scr-spark-line { stroke-width: 2; }
.scr-spark-dot { stroke: var(--paper); stroke-width: 1.5; }
.scr-detail-head h3 { font-size: 14px; }

/* Country-module cards (GDP / BoP / Public finance grids): tighter, 13px/600 title,
   accent hero number on the first stat, canvas −12% */
.gdp-card { min-height: 285px; padding: 12px 12px 8px; }
.gdp-card .card-head { margin-bottom: 6px; }
.gdp-card .card-title { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.gdp-card .card-stats { margin: 2px 0 6px; gap: 14px; }
.gdp-card .stat-value { font-size: 14px; font-weight: 600; }
.gdp-card .stat:first-child .stat-value:not(.pos):not(.neg) { color: var(--accent); }
.gdp-card .chart-wrap { min-height: 180px; }

/* Trade: chart −12%, treemaps −12%, partner rows tighter */
.trade-view .tr-chart-wrap { height: 230px; }
.trade-view .tr-treemap { height: 300px; }
.trade-view .tr-card { padding: 12px 14px; }
.trade-view .tr-card .card-title { font-size: 13px; font-weight: 600; letter-spacing: .01em; margin-bottom: 8px; }
.trade-view .tr-partners { gap: 4px; }
.trade-view .tr-prow { font-size: 12px; }
.trade-view .tr-pname { font-weight: 500; }
.trade-view .tr-pbar-wrap { height: 10px; }
.trade-view .tr-pval { color: var(--ink); font-weight: 500; }
/* ═══ end tables ═══ */

/* ═══ design pass 2026-09 · projections ═══ */
/* Projections › Forecast vs actual (assets/weo_vintages_view.js): compact cards,
   thicker marks, vintage-year colour ramp legend, sign-coloured error table with
   MAE bars / over-prediction meters, sign-coloured bias bars. Overrides only —
   the original .wv-* rules above are untouched. */
.projections-view .wv-card { padding: 12px 14px 10px; margin-bottom: 12px; }
.projections-view .wv-controls-card { padding: 10px 12px; margin-bottom: 10px; }
.projections-view .wv-countries { margin-bottom: 10px; }
.projections-view .wv-card-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 2px; }
.projections-view .wv-card-sub { font-size: 12px; margin-bottom: 5px; line-height: 1.4; }
.projections-view .wv-chart { height: 360px; }
@media (max-width: 900px) { .projections-view .wv-chart { height: 320px; } }
.projections-view .wv-legend { gap: 3px 14px; margin: 1px 0 3px; font-size: 11.5px; }
.projections-view .wv-lg-actual { stroke-width: 2.8; }
.projections-view .wv-lg-dash { stroke-width: 2; stroke-dasharray: 6 4; }
.projections-view .wv-lg-hollow { stroke-width: 2; }
.projections-view .wv-note { margin-top: 6px; }
.projections-view .wv-toggle { padding: 5px 10px; font-size: 12px; }
.projections-view .wv-seg button { padding: 5px 10px; font-size: 12px; }
.projections-view .ds-controls { gap: 8px 12px; }
/* stat tiles: signed hero in the sign colour, unsigned magnitude in the accent */
.projections-view .wv-tiles { margin: 2px 0 6px; gap: 8px; }
.projections-view .wv-tiles .ds-stat { padding: 7px 11px; }
.projections-view .wv-tiles .ds-stat-hero .ds-stat-val { font-size: 24px; }
.projections-view .wv-tiles .ds-stat-val.wv-accent { color: var(--accent); }
.projections-view .wv-sign.pos { color: var(--pos); }
.projections-view .wv-sign.neg { color: var(--neg); }
/* error-by-horizon table: compact, tabular, sticky head, hover, h=1 = the headline row */
.projections-view .wv-table th, .projections-view .wv-table td { padding: 4px 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.projections-view .wv-table thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; }
.projections-view .wv-table tbody td:first-child { font-weight: 500; }
.projections-view .wv-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.projections-view .wv-table tbody tr:hover td { background: var(--line-2); }
.projections-view .wv-table tbody tr[data-h="1"] td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.projections-view .wv-table tbody tr[data-h="1"] td:first-child { color: var(--accent); font-weight: 600; }
.projections-view .wv-table tbody tr[data-h="1"]:hover td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.projections-view .wv-bar-cell { white-space: nowrap; }
/* mini bars are inline SVG (copy-image keeps svg width/height; a CSS-sized span collapses) */
.projections-view svg.wv-bar, .projections-view svg.wv-meter { vertical-align: middle; margin: 0 7px 1px 0; overflow: visible; }
.projections-view .wv-bar-track { fill: var(--ink); fill-opacity: 0.08; }
.projections-view .wv-bar-fill { fill: var(--accent); }
.projections-view .wv-meter-fill { fill: var(--accent); fill-opacity: 0.75; }
.projections-view .wv-meter-tick { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.5; }
.projections-view .wv-prose { font-size: 12.5px; margin-top: 7px; }
/* cross-country bias strip: sign-coloured bars (0 → mean) under the whisker + dot */
.projections-view .wv-strip .wv-strip-bar { opacity: 0.8; }
.projections-view .wv-strip .wv-strip-bar.pos { fill: var(--pos); }
.projections-view .wv-strip .wv-strip-bar.neg { fill: var(--neg); }
.projections-view .wv-strip .wv-strip-bar.zero { fill: var(--rule); }
.projections-view .wv-strip .wv-strip-bar.sel { opacity: 1; stroke: var(--ink); stroke-width: 1; }
.projections-view .wv-strip .wv-strip-dot { stroke: var(--paper); stroke-width: 2; }
.projections-view .wv-strip .wv-strip-dot.pos { fill: var(--pos); }
.projections-view .wv-strip .wv-strip-dot.neg { fill: var(--neg); }
.projections-view .wv-strip .wv-strip-dot.zero { fill: var(--rule); }
.projections-view .wv-strip .wv-strip-dot.sel { stroke: var(--ink); stroke-width: 2; }
.projections-view .wv-strip .ds-strip-whisk { stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1.2; }
.projections-view .wv-strip .ds-strip-lbl { font-weight: 600; }
.projections-view .wv-strip .ds-dist-zero { stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 1.4; stroke-dasharray: none; }
.projections-view .wv-strip .wv-strip-row:hover .ds-strip-hit { opacity: 0.06; }
/* Projections › Projections (assets/projections_view.js): compact figure card + table */
.projections-view .pj-fig { padding: 12px 14px 10px; }
.projections-view .pj-fig-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.projections-view .pj-fig-sub { font-size: 12px; }
.projections-view .pj-fig-source { margin-top: 6px; padding-top: 5px; }
.projections-view .board-head .pj-seg button { padding: 5px 10px; font-size: 12px; }
.projections-view .board-head .board-controls { gap: 6px; }
.projections-view .pj-table-scroll { max-height: 72vh; overflow: auto; }
.projections-view .pj-table th, .projections-view .pj-table td { padding: 4px 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.projections-view .pj-table thead { position: sticky; top: 0; z-index: 3; }
/* opaque header fills so rows scrolling under the sticky head do not bleed through */
.projections-view .pj-table thead th { background: var(--paper); }
.projections-view .pj-table thead th.pj-avg,
.projections-view .pj-table thead .pj-grp-hist { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.projections-view .pj-table thead th.pj-fcast,
.projections-view .pj-table thead .pj-grp-proj { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); }
.projections-view .pj-table td.pj-country-col { font-weight: 500; }
.projections-view .pj-table tbody tr:nth-child(even) td:not(.pj-fcast):not(.pj-avg):not(.pj-country-col) { background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.projections-view .pj-table tbody tr:hover td:not(.pj-country-col) { background: var(--line-2); }
.projections-view .pj-table tbody tr:hover td.pj-fcast { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.projections-view .pj-table td .pos { color: var(--pos); }
.projections-view .pj-table td .neg { color: var(--neg); }
.projections-view .pj-legend { margin-top: 6px; }
/* ═══ end projections ═══ */
/* ═══ design pass 2026-09 · tables (addendum) ═══ */
/* Hero charts (GDP / BoP contributions) set their height inline on a flex:1
   child, which flex-basis silently overrides — the hero has always rendered at
   the grid's min-height. Pin those wraps so the hero is actually a hero. */
.gdp-card .chart-wrap[style*="height"] { min-height: 320px; }
/* ═══ end tables (addendum) ═══ */

/* ── Country identification across the Signals views ────────────────────
   Six of these views named countries by ISO code and full name only. The flag
   is the fast identifier; the ISO stays as the label the layout is measured on
   and as what remains if the asset ever 404s, so the flag can hide itself on
   error without leaving the cell blank.
   ⚠️ Flags go in HTML, never inside an SVG chart or an <option>: an <option>
   renders text only, and an <image href> inside an SVG does not survive the
   rasterisation that copy-image does, so the copied PNG would carry a broken
   icon where the live page shows a flag. Chart axes keep their ISO codes. */
.cm-table td.cm-country-col, .cy-table td.cy-country-col, .ex-table td.ex-country-col {
  white-space: nowrap; }
.cm-table td.cm-country-col .flag-img, .cy-table td.cy-country-col .flag-img,
.ex-table td.ex-country-col .flag-img {
  width: 18px; height: 12px; border-radius: 2px; object-fit: cover; margin-right: 7px;
  vertical-align: -1px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.cflag-iso { font-weight: 700; letter-spacing: 0.03em; }
.cflag-iso::after { content: ' · '; font-weight: 400; color: var(--muted); }
.cflag-name { font-weight: 500; }
/* lead & lag small multiples: the flag sits on the card's title line */
.ll-cell-head { align-items: center; }
.ll-cell-head .flag-img { width: 17px; height: 12px; border-radius: 2px; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); flex: none; }
/* the two country <select>s: the flag is a swatch beside the control */
.corr-country-row, .ds-country-row { display: inline-flex; align-items: center; gap: 7px; }
.corr-flag { display: inline-flex; align-items: center; }
.corr-flag-emoji { font-size: 15px; line-height: 1; }
.corr-country-row .flag-img, .ds-country-row .flag-img, .corr-flag .flag-img {
  width: 22px; height: 15px; border-radius: 2px; object-fit: cover; display: block;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
/* ═══ end country identification ═══ */

/* ── Policy model (Signals sub-view) ────────────────────────────────────
   The verdict card leads: one number (the implied move) at hero size, the
   inputs that produce it as tiles beside it, and the parameter-uncertainty
   spread as a single bar underneath.
   ⚠️ The hero is deliberately NOT coloured by direction. --pos/--neg mean the
   sign of a value everywhere else in this app, and a cut IS a negative number,
   so painting a cut green (the market's dovish/hawkish convention) would put
   two contradictory codings on one screen. Direction is carried by an arrow
   glyph, which also survives greyscale and the copied PNG. */
.policy-view .pm-wrap { display: flex; flex-direction: column; gap: 10px; padding: 12px 24px 8px; }
/* One country per row: the summary is the whole control, the panel below it is
   built only while open (its charts are destroyed on close). */
.pm-country { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.pm-country:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* An open country carries an accent edge down its whole height, so a long
   panel still reads as belonging to the row that opened it. */
.pm-country.pm-open { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pm-summary { display: grid; grid-template-columns: 18px 46px minmax(170px, 1.5fr) repeat(5, minmax(84px, 1fr));
  align-items: center; gap: 10px 16px; width: 100%; padding: 12px 16px; background: none; border: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit; }
.pm-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.pm-open > .pm-summary { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pm-chev { color: var(--muted); transition: transform 0.15s ease; font-size: 12px; }
.pm-open .pm-chev { transform: rotate(90deg); color: var(--accent); }
/* ⚠️ The flag is an SVG, not the payload's emoji: emoji flags do not render on
   Linux or most desktop Chrome and degrade to the two letters "MX"/"BR", which
   is what the row used to show. The ISO code sits under it on purpose — it is
   the label if the asset ever 404s, and it is what the rest of the app keys on. */
.pm-flag { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.pm-flag .flag-img { width: 30px; height: 20px; border-radius: 3px; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: block; }
.pm-iso { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); }
.pm-open .pm-iso { color: var(--accent); }
/* the rail: seven banks deep, the fourth is a scroll away without it */
.pm-rail { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 24px 0; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer;
  color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.pm-chip .flag-img { width: 20px; height: 14px; border-radius: 2px; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.pm-chip:hover { border-color: var(--accent); color: var(--ink); }
.pm-chip-on { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* jump strip inside an open panel — the charts are its fourth card */
.pm-secnav { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 2px 12px; }
.pm-secnav-b { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: none;
  cursor: pointer; color: var(--muted); font: inherit; font-size: 10.5px; letter-spacing: 0.03em;
  transition: border-color 0.15s ease, color 0.15s ease; }
.pm-secnav-b:hover { border-color: var(--accent); color: var(--accent); }
.pm-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-id strong { font-size: 14px; }
.pm-id .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-sum-stat { display: flex; flex-direction: column; gap: 1px; }
.pm-sum-stat b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pm-sum-stat .small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.pm-panel { padding: 4px 16px 14px; border-top: 1px solid var(--line); }
.pm-cite { color: var(--muted); font-size: 9px; margin-left: 4px; vertical-align: super; }
@media (max-width: 1080px) {
  .pm-summary { grid-template-columns: 18px 46px minmax(140px, 1fr) repeat(4, minmax(78px, 1fr)); }
  .pm-sum-date { display: none; }
}
@media (max-width: 780px) {
  .pm-summary { grid-template-columns: 18px 46px minmax(120px, 1fr) minmax(80px, 1fr); }
  .pm-summary .pm-sum-stat + .pm-sum-stat { display: none; }
}
.pm-card { position: relative; min-height: 0; margin-bottom: 14px; }
/* the call card: hero verdict + the ladder over the committee's own grid */
.pm-verdict { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px 22px; align-items: center; }
@media (max-width: 940px) { .pm-verdict { grid-template-columns: 1fr; } }
.pm-hero { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--paper); }
.pm-hero-val { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.pm-hero-lbl { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.pm-cut, .pm-hike { border-left: 3px solid var(--accent); }
.pm-dist-wrap { margin-top: 14px; }
.pm-dist { display: flex; gap: 3px; margin-top: 6px; }
.pm-dist-seg { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; padding: 7px 4px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; color: var(--muted); background: var(--paper); white-space: nowrap; overflow: hidden; }
.pm-dist-seg small { font-size: 10px; }
.pm-dist-on { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.pm-sum-call { color: var(--accent); }
.pm-card-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pm-card-head h3 { margin: 0; font-size: 14px; }
.pm-card-head h4, .pm-eq h4 { margin: 0 0 2px; font-size: 13px; }
.pm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pm-stat { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--paper); }
.pm-stat-val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.pm-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 1px; }
.pm-read { margin: 12px 2px 0; line-height: 1.55; }
.pm-chart { position: relative; height: 340px; padding: 0 4px 4px; }
.pm-chart-sm { height: 240px; }
/* Out-of-sample verdict on the projected path. Sits inside the chart card so
   it travels with the copied image, not just the live page. */
.pm-skill { margin: 10px 2px 0; line-height: 1.5; max-width: 78ch; }
.pm-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 940px) { .pm-duo { grid-template-columns: 1fr; } }
.pm-eqs { gap: 22px; }
.pm-eq-form { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; margin: 0 0 8px; }
.pm-rule-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 10px 28px; align-items: start; }
@media (max-width: 940px) { .pm-rule-grid { grid-template-columns: 1fr; } }
.pm-table { width: 100%; }
.pm-table td, .pm-table th { padding: 5px 8px; }
/* .gdp-table right-aligns every cell (it is a wide time-series grid); here the
   first column is a label, so it reads left. */
.pm-table tbody td:first-child { text-align: left; white-space: normal; }
.pm-table thead th:first-child { text-align: left; }

.pm-total td { font-weight: 700; border-top: 1px solid var(--line); }
.pm-cal td { color: var(--muted); }
.pm-why { margin: 4px 2px 0; line-height: 1.45; font-size: 10.5px; }
.pm-src { align-items: start; }
.pm-src-list { margin: 4px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.pm-src-list li { margin-bottom: 5px; }
.pm-src-list a { color: var(--accent); word-break: break-all; }
.pm-src-list code, .pm-card code { font-size: 10.5px; }

.pm-foot { margin: 12px 2px 0; line-height: 1.5; font-size: 10.5px; }
.pm-params { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px; }
.pm-param { display: grid; grid-template-columns: 1fr 120px 48px; align-items: center; gap: 8px; font-size: 12px; }
.pm-param input[type="range"] { width: 100%; accent-color: var(--accent); }
.pm-param-wide { grid-template-columns: 1fr; gap: 4px; }
.pm-param-wide .seg { width: 100%; }
.pm-param-wide .seg button { font-size: 11px; }
.pm-param select { width: 100%; }
.pm-param-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 12px; }

/* ─── Inflation decomposition (Signals sub-view) ──────────────────────────── */
.inf-headcard .inf-tagline { max-width: 90ch; line-height: 1.55; }
.inf-controls { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end; margin-top: 14px; }
.inf-ctl { display: flex; flex-direction: column; gap: 6px; }
.inf-ctl-lab { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.inf-country { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; min-width: 190px; }
.inf-panel { position: relative; }
.inf-panel .inf-sub { margin: -4px 0 12px; max-width: 92ch; line-height: 1.5; }
.inf-panel h3 { display: flex; align-items: center; gap: 8px; }
.inf-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: -1px; }
/* Wide tables scroll inside their own card — the page body never scrolls sideways. */
.inf-scroll { overflow-x: auto; max-width: 100%; }
.inf-note { margin: 8px 0 0; max-width: 100ch; line-height: 1.5; }

.inf-table { border-collapse: separate; font-size: 12px; white-space: nowrap;
  /* Sized to its content, not to the card: a dense reference table reads across
     a row, and stretching it to full width puts the eye through empty space.
     The 2px spacing is the surface gap between filled cells — without it two
     equally tinted neighbours merge into one band and the grid stops reading. */
  border-spacing: 2px 1px;
  width: auto; border: 0; background: none; border-radius: 0; }
.inf-table th, .inf-table td { padding: 3px 10px; border: 0; }
.inf-table thead th { position: static; background: none; }
.inf-table .inf-num { text-align: right; font-variant-numeric: tabular-nums; }
.inf-colhead { font-size: 11px; font-weight: 600; text-align: right; vertical-align: bottom;
  border-bottom: 2px solid var(--rule); padding-bottom: 6px; }
.inf-colhead-t { display: block; white-space: normal; line-height: 1.25;
  max-width: 88px; min-width: 52px; margin-left: auto; }
.inf-rowlab { text-align: right; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.inf-corner { border: 0; }
/* The block label is a rotated spine, so the three blocks read as one table
   rather than three tables stacked. */
.inf-blocklab { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  border-right: 2px solid var(--rule); padding: 10px 3px; white-space: nowrap; width: 22px; }
.inf-block + .inf-block tr:first-child th,
.inf-block + .inf-block tr:first-child td { border-top: 2px solid var(--rule); padding-top: 9px; }
.inf-block tr:last-child th, .inf-block tr:last-child td { padding-bottom: 9px; }
.inf-weights th, .inf-weights td { font-style: italic; font-size: 11px; color: var(--muted);
  border-bottom: 2px solid var(--rule); padding-bottom: 8px; }
.inf-w-local { text-decoration: underline dotted; text-underline-offset: 3px; }
/* Headline is the column everything else is measured against — give it a spine. */
.inf-table .inf-head-col { border-right: 1px solid var(--rule); font-weight: 600; }
.inf-recent .inf-rowlab { color: var(--fg); font-weight: 600; }

.inf-key { display: flex; align-items: center; gap: 5px; margin-top: 12px; }
.inf-key i { width: 26px; height: 11px; border-radius: 2px; display: inline-block; }
.inf-key-mid { border: 1px solid var(--border); }
.inf-key .small { margin: 0 4px; }

.inf-cross { font-size: 12px; width: auto; min-width: 520px;
  border-collapse: separate; border-spacing: 2px 1px; }
.inf-cross td, .inf-cross th { padding: 5px 12px; }
.inf-cross .inf-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Numeric columns are sized so a tinted percentile cell reads as a chip beside
   its number, not as a band across the card. */
.inf-cross th:not(:first-child), .inf-cross td:not(:first-child) { width: 104px; }
.inf-cross th:first-child, .inf-cross td:first-child { width: 190px; text-align: left; }
.inf-cross-row { cursor: pointer; }
.inf-cross-row:hover td { background: rgba(127, 140, 160, .10); }
.inf-cross-on td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.inf-cross td:first-child > span { display: inline-block; vertical-align: middle; }
.inf-cross td:first-child .inf-flag { margin-right: 7px; vertical-align: middle; }

.inf-diag, .inf-src { font-size: 12px; }
.inf-diag td, .inf-diag th, .inf-src td, .inf-src th { padding: 5px 10px; vertical-align: top; }
/* `.gdp-table tbody td` right-aligns by default; these are label tables, so the
   text columns are re-aligned at matching specificity and only the numbers stay
   right. */
.gdp-table.inf-diag tbody td, .gdp-table.inf-src tbody td { text-align: left; }
.gdp-table.inf-diag tbody td.inf-num { text-align: right; }
.inf-diag thead th, .inf-src thead th { text-align: left; }
.inf-diag thead th.inf-num { text-align: right; }
.gdp-table.inf-cross tbody td:first-child { text-align: left; }
.inf-diag .inf-num { text-align: right; font-variant-numeric: tabular-nums; }
.inf-diag-no td { color: var(--muted); }
.inf-code { font-size: 11px; background: rgba(127, 140, 160, .12); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 720px) { .inf-controls { gap: 14px 18px; } .inf-country { min-width: 150px; } }

/* ─── Activity heatmap (Signals › Activity heatmap, assets/activity_heatmap_view.js) ───
   Morgan Stanley-style exhibit: sticky label column, months grouped by year with
   a thicker rule between years, three dark italic group bands, cells tinted
   blue (weak) ↔ red (strong) by the row's own z-score. The table scrolls inside
   its own card; the page never scrolls sideways. */
.ah-headcard, .ah-panel { background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px 12px; position: relative; }
.ah-headcard + .ah-panel, .ah-panel + .ah-panel { margin-top: 14px; }
.ah-headcard h2 { margin: 0 0 6px; }
.ah-headcard .ah-tagline { max-width: 92ch; line-height: 1.55; margin: 0 0 12px; }
.ah-chipwrap { margin: 0 0 12px; }
.ah-chips .cmp-chip { gap: 6px; }
.ah-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; vertical-align: -1px; }
.ah-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.ah-panel .ah-sub { margin: 0 0 10px; max-width: 92ch; line-height: 1.5; }
.ah-controls { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-end; }
.ah-ctl { display: flex; flex-direction: column; gap: 6px; }
.ah-ctl-lab { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ah-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ah-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.ah-check input { margin: 0; accent-color: var(--accent); }

/* The read-out: one number per group, tinted like a cell so the strip and the
   table share a scale. */
.ah-readout { margin: 0 0 10px; font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.ah-ro-lead { font-weight: 600; color: var(--ink); }
.ah-ro-item { padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ah-ro-item b { font-weight: 700; }
.ah-ro-item .muted { font-size: 11px; }
.ah-scroll { overflow-x: auto; max-width: 100%; }

.ah-table { border-collapse: separate; font-size: 10.5px; white-space: nowrap;
  /* 2px is the surface gap between filled cells — without it two equally tinted
     neighbours merge into a band and the month grid stops reading. */
  border-spacing: 2px 1px; width: auto; border: 0; background: none; border-radius: 0;
  font-variant-numeric: tabular-nums; }
.ah-table th, .ah-table td { padding: 0; border: 0; }
.ah-table thead th { position: static; background: none; }
/* Sticky label column: the rest of the table scrolls under it. Painted on the
   card surface so cells never show through the border-spacing gap. */
.ah-table .ah-lab { position: sticky; left: 0; z-index: 2; background: var(--paper); text-align: left;
  font-weight: 500; font-size: 11.5px; color: var(--ink); padding: 2px 10px 2px 4px;
  max-width: 216px; min-width: 120px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 2px 0 0 var(--paper), 3px 0 0 var(--rule); }
.ah-lab-t { display: inline-block; max-width: 196px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.ah-lab-tag { display: inline-block; margin-left: 5px; font-size: 9px; letter-spacing: .04em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; vertical-align: 1px; }
.ah-corner { background: var(--paper); }
.ah-year { text-align: center; font-weight: 600; font-size: 11px; color: var(--ink); padding: 0 0 2px; }
.ah-mon { text-align: center; font-weight: 500; font-size: 9.5px; color: var(--muted); min-width: 26px; padding-bottom: 3px;
  border-bottom: 1px solid var(--rule); }
/* The year separator: a thicker rule on the first column of each year. */
.ah-table .ah-ysep { border-left: 3px solid var(--rule); }
.ah-table thead .ah-year.ah-ysep { border-left-color: var(--rule); }
.ah-cell { width: 28px; min-width: 26px; height: 20px; text-align: center; color: var(--ink);
  border-radius: 2px; cursor: default; }
.ah-cell.ah-na { background: rgba(127, 140, 160, .13); color: transparent; }
.ah-cell.ah-noz { color: var(--muted); }
.ah-cell:hover { outline: 2px solid var(--ink); outline-offset: -1px; }
/* Group bands: dark, italic, spanning the table; the sticky label cell carries
   the band colour too so the band survives a horizontal scroll. */
.ah-band th, .ah-band td { background: #3c424b; color: #f3f5f7; font-style: italic; font-weight: 600;
  font-size: 11px; letter-spacing: .02em; }
.ah-band .ah-band-lab { background: #3c424b; color: #f3f5f7; box-shadow: 2px 0 0 #3c424b; padding: 3px 10px 3px 6px; }
.ah-band .ah-band-fill { padding: 3px 8px; text-align: left; font-weight: 400; color: #c9ced5; border-radius: 0 3px 3px 0; }
.ah-band .ah-band-fill span { font-size: 10px; }
.ah-band + .ah-row th, .ah-band + .ah-row td { padding-top: 1px; }
html.dark .ah-band th, html.dark .ah-band td, html.dark .ah-band .ah-band-lab { background: #2a3138; color: #e6ebef; box-shadow: 2px 0 0 #2a3138; }
html.dark .ah-band .ah-band-fill { color: #aab3bd; }
html.dark .ah-cell.ah-na { background: rgba(127, 140, 160, .16); }

.ah-key { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ah-key i { width: 26px; height: 11px; border-radius: 2px; display: inline-block; }
.ah-key-mid { border: 1px solid var(--border, var(--line)); }
.ah-key .small { margin: 0 4px; }
.ah-key-clip { margin-left: 6px; }
.ah-note { margin: 8px 0 0; max-width: 100ch; line-height: 1.5; }

.ah-src { font-size: 12px; }
.ah-src td, .ah-src th { padding: 5px 10px; vertical-align: top; }
.gdp-table.ah-src tbody td { text-align: left; }
.ah-src thead th { text-align: left; }
.ah-code { font-size: 11px; background: rgba(127, 140, 160, .12); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 720px) {
  .ah-headcard, .ah-panel { padding: 12px 12px 10px; }
  .ah-controls { gap: 12px 18px; }
  .ah-table .ah-lab { min-width: 96px; max-width: 130px; }
  .ah-lab-t { max-width: 108px; }
}