/* ─────────────────────────────────────────────────────────────────────
   Colombia HF Macro · Analyst Light theme
   Type:  Inter for UI, JetBrains Mono for figures
   Color: paper white background, slate text, single navy accent,
          editorial palette of 6 series colors
   ────────────────────────────────────────────────────────────────────*/

/* ─── Anthropic brand palette ────────────────────────────────────────
   Dark        #141413    Primary text & dark backgrounds
   Light       #faf9f5    Cream paper background
   Mid Gray    #b0aea5    Secondary elements
   Light Gray  #e8e6dc    Subtle backgrounds
   Orange      #d97757    Primary accent
   Blue        #6a9bcc    Secondary accent
   Green       #788c5d    Tertiary accent
   ──────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #faf9f5;       /* cream paper */
  --paper:     #ffffff;
  --ink:       #141413;       /* near-black */
  --ink-2:     #3a3a36;
  --muted:     #6e6c63;
  --line:      #e8e6dc;       /* light-gray hairline */
  --line-2:    #f0eee5;
  --rule:      #b0aea5;       /* mid-gray for stronger rules */

  --accent:    #d97757;       /* orange — primary accent */
  --accent-2:  #6a9bcc;       /* blue — secondary */
  --accent-3:  #788c5d;       /* green — tertiary */

  --pos:       #788c5d;       /* green for positive */
  --pos-bg:    rgba(120,140,93,0.12);
  --neg:       #c0533a;       /* warm red — pulled from the orange family */
  --neg-bg:    rgba(192,83,58,0.10);
  --warn:      #b07a2f;

  --series:    #141413;        /* charts: ink-on-cream like editorial print */
  --series-fill: rgba(20,20,19,0.05);
  --grid:      rgba(20,20,19,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:        #141413;
  --paper:     #1f1e1c;
  --ink:       #faf9f5;
  --ink-2:     #e8e6dc;
  --muted:     #b0aea5;
  --line:      #2c2b28;
  --line-2:    #25241f;
  --rule:      #44423d;

  --accent:    #d97757;
  --accent-2:  #6a9bcc;
  --accent-3:  #9bb27a;

  --pos:       #9bb27a;
  --pos-bg:    rgba(155,178,122,0.16);
  --neg:       #e08977;
  --neg-bg:    rgba(224,137,119,0.14);
  --warn:      #e0b87a;

  --series:    #faf9f5;
  --series-fill: rgba(250,249,245,0.06);
  --grid:      rgba(250,249,245,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 {
  font: 14px/1.55 'Lora', Georgia, serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
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: 'Lora', Georgia, 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'; }
.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; }
.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-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: #1c357a; border-color: #1c357a; color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
#btn-refresh::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--rule); display: inline-block; margin-right: 4px;
  transition: background .12s;
}
#btn-refresh[data-connected="yes"]::before { background: var(--pos); box-shadow: 0 0 4px var(--pos); }
#btn-refresh[data-connected="no"]::before  { background: var(--neg); }
.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; }

/* ─────────── 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; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.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;
}
.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;
}
.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: #fff; }
.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; }
.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-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; }

/* 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-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-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);
}
.cc-select.on { background: var(--accent); border-color: 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);
}

#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; }

/* 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-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; }