:root {
  /* Brand palette */
  --brand-deep: #0F2B5B;
  --brand-mid: #1A4B8C;
  --brand-dark-teal: #0D6E8A;
  --brand-teal: #0E8FA0;
  --brand-green-teal: #08A88D;

  /* Surface & background */
  --bg-page: #F2F4F7;
  --bg-card: #FFFFFF;
  --bg-card-alt: #F8F9FB;

  /* Borders */
  --border: #D0D5DD;
  --border-light: #E4E7EC;

  /* Text — all meet WCAG AA on white */
  --text-primary: #101828;
  --text-secondary: #344054;
  --text-muted: #667085;

  /* Status — colorblind-safe (Wong palette): blue = improved, amber = worsened */
  --improved: #0072B2;
  --improved-bg: #E1F0FA;
  --worsened: #D4820A;
  --worsened-bg: #FEF3CD;
  --warning: #C4590E;
  --neutral: #6B7280;
  --neutral-bg: #F0F1F3;

  /* Chart palette — Wong colorblind-safe 8-color set */
  --chart-1: #0072B2; --chart-2: #E69F00; --chart-3: #009E73;
  --chart-4: #CC79A7; --chart-5: #56B4E9; --chart-6: #D55E00; --chart-7: #F0E442;

  /* Spacing scale (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;  --space-10: 40px;

  /* Typography scale */
  --text-2xs: 10px;
  --text-xs: 11px;  --text-sm: 12px;  --text-base: 13px;  --text-md: 14px;
  --text-lg: 18px;  --text-xl: 22px;  --text-2xl: 28px;  --text-3xl: 32px;

  /* Line heights */
  --line-tight: 1.3;  --line-snug: 1.5;  --line-body: 1.6;  --line-relaxed: 1.7;

  /* Elevation tiers */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.04);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.06), 0 2px 4px -1px rgba(16,24,40,.04);
  --shadow-lg: 0 4px 8px -2px rgba(16,24,40,.05), 0 12px 24px -4px rgba(16,24,40,.08);
  --shadow-hover: 0 8px 16px -4px rgba(16,24,40,.1), 0 4px 6px -2px rgba(16,24,40,.05);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --transition: .18s cubic-bezier(.165,.84,.44,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: var(--bg-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; font-size: var(--text-md); line-height: 1.5; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ── Loading Overlay ── */
.loading-overlay { position:fixed; inset:0; z-index:9999; background:rgba(242,244,247,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-5); transition: opacity .15s ease-out; }
.loading-overlay.done { opacity:0; pointer-events:none; }
.loading-spinner { width:40px; height:40px; border:3px solid var(--border-light); border-top-color:var(--brand-teal); border-radius:50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:var(--text-base); color:var(--text-secondary); font-weight:500; }
.loading-progress { width:220px; height:3px; background:var(--border-light); border-radius:2px; overflow:hidden; }
.loading-bar { height:100%; background: linear-gradient(90deg, var(--brand-teal), var(--brand-mid)); width:0%; transition: width .3s cubic-bezier(.165,.84,.44,1); border-radius:2px; }

/* Inline tab loader — shown when a tab is clicked before its fact data has
   finished streaming in. Sits at the top of the tab panel so the panel's
   other content (cards, charts) still occupies space and won't reflow when
   the loader is removed. */
.tab-loading { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-6); color:var(--text-secondary); font-size:var(--text-sm); }
.tab-loading__spinner { width:18px; height:18px; border:2px solid var(--border-light); border-top-color:var(--brand-teal); border-radius:50%; animation: spin .8s linear infinite; flex:0 0 auto; }

/* Error state shown in place of the loader when a background fact table fails
   to load (network blip, deploy race, corrupt file). Sits at the top of the
   panel like .tab-loading; the Retry button reloads the page. */
.tab-error { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-6); color:var(--text-secondary); font-size:var(--text-sm); }
.tab-error__icon { color:var(--worsened,#D55E00); flex:0 0 auto; }
.tab-error__retry { cursor:pointer; border:1px solid var(--border-light); background:var(--bg-card); color:var(--text-primary); border-radius:6px; padding:4px 12px; font:inherit; }
.tab-error__retry:hover { border-color:var(--brand-teal); color:var(--brand-teal); }

/* ── Wrapper ── */
.wrap { max-width:1440px; margin:var(--space-5) auto; background:var(--bg-card); border-radius:var(--radius-lg); box-shadow: var(--shadow-lg); overflow:hidden; border:1px solid var(--border-light); }

/* ── Header ── */
.header { background: linear-gradient(135deg, #081D42 0%, var(--brand-deep) 60%, var(--brand-mid) 100%); padding:var(--space-5) var(--space-8); display:flex; align-items:center; gap:var(--space-4); border-bottom:1px solid rgba(255,255,255,.06); }
.header-logo { height:48px; width:auto; border-radius:var(--radius-xs); }
.header-title { color:#fff; font-size:var(--text-xl); font-weight:700; letter-spacing:-.4px; margin:0; }

/* ── Tab Nav ── */
.tab-nav { background:var(--bg-card); border-bottom:1px solid var(--border-light); padding:0 var(--space-8); display:flex; gap:var(--space-1); }
.tab-btn { padding:var(--space-3) var(--space-5); font:600 var(--text-sm)/1 var(--font); color:var(--text-muted); border:none; background:transparent; cursor:pointer; border-bottom:2px solid transparent; border-radius:var(--radius-sm) var(--radius-sm) 0 0; transition: all var(--transition); white-space:nowrap; position:relative; }
.tab-btn:hover { color:var(--text-secondary); background:var(--bg-card-alt); }
.tab-btn.on { color:var(--brand-deep); background:rgba(14,143,160,.06); border-bottom-color:var(--brand-teal); font-weight:700; }

/* ── Filter Bar ── */
.filter-bar { background:var(--bg-card-alt); border-bottom:1px solid var(--border-light); padding:var(--space-3) var(--space-8); display:flex; gap:var(--space-4) var(--space-5); align-items:center; flex-wrap:wrap; }
.filter-group { display:flex; align-items:center; gap:var(--space-2); }
.filter-label { font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); }
.filter-select { font:500 var(--text-sm)/1 var(--font); padding:6px 28px 6px var(--space-3); border:1px solid var(--border); border-radius:var(--radius-full); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23667085'/%3E%3C/svg%3E") no-repeat right 10px center; appearance:none; color:var(--text-primary); cursor:pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.filter-select:hover { border-color:var(--brand-teal); }
.filter-select:focus-visible { outline:none; border-color:var(--brand-teal); box-shadow:0 0 0 3px rgba(14,143,160,.12); }
.filter-radio { display:flex; border:1px solid var(--border); border-radius:var(--radius-full); overflow:hidden; background:var(--bg-card); padding:2px; gap:2px; }
.filter-radio label { font-size:var(--text-xs); font-weight:600; padding:5px 14px; cursor:pointer; color:var(--text-secondary); background:transparent; border-radius:var(--radius-full); transition: all var(--transition); user-select:none; }
.filter-radio label:hover:not(.on) { background:var(--neutral-bg); }
.filter-radio label.on { background:var(--brand-deep); color:#fff; box-shadow:0 1px 3px rgba(15,43,91,.2); }
.filter-sep { width:1px; height:var(--space-6); background:var(--border-light); }
.filter-reset { margin-left:auto; font:600 var(--text-xs)/1 var(--font); padding:6px var(--space-3); background:transparent; border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text-muted); cursor:pointer; transition: border-color var(--transition), color var(--transition); }
.filter-reset:hover { border-color:var(--brand-teal); color:var(--brand-deep); }
.filter-reset:focus-visible { outline:none; border-color:var(--brand-teal); box-shadow:0 0 0 3px rgba(14,143,160,.12); }
.trend-metric-toggle { flex-shrink:0; }
.trend-metric-toggle label { font-size:var(--text-2xs); padding:3px 10px; }
@media(max-width:768px){ .trend-metric-toggle { flex-wrap:wrap; } .trend-metric-toggle label { padding:3px 8px; font-size:var(--text-2xs); } }

/* ── Main Content ── */
.main { padding:var(--space-8) var(--space-8) var(--space-10); }
.tab-content { display:none; }
.tab-content.on { display:block; }

/* Rhythm: intra-group tight, inter-section generous.
   Three-things follows narrative immediately (tight); KPIs follow three-things tight;
   panels read as separate beats with generous separation. */
.tab-content > .three-things-wrap { margin-top:calc(-1 * var(--space-2)); }

/* ── Panels ── */
.panel { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius); padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-sm); margin-bottom:var(--space-5); transition: box-shadow var(--transition); }
.panel:hover { box-shadow:var(--shadow-md); }
.panel--flush { margin-bottom:0; }
/* Lede panel: chapter-headlining chart, larger padding and title than supporting panels */
.panel--lede { padding:var(--space-6) var(--space-8); margin-bottom:var(--space-8); }
.panel--lede > .panel-title { font-size:var(--text-lg); padding-bottom:var(--space-3); margin-bottom:var(--space-4); }
.panel-title { font-size:var(--text-md); font-weight:700; color:var(--brand-deep); margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--border-light); display:flex; align-items:center; gap:var(--space-2); }
.panel-title .hint { font-size:var(--text-xs); font-weight:500; color:var(--text-muted); font-style:normal; margin-left:auto; padding:2px var(--space-2); background:var(--neutral-bg); border-radius:var(--radius-full); }

/* ── Grids ── */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-4); }

/* ── Narrative (lede text — no card chrome) ── */
.narrative { font-size:var(--text-base); color:var(--text-secondary); line-height:var(--line-relaxed); padding:0; background:transparent; border:0; border-radius:0; margin:0 0 var(--space-5); max-width:75ch; }
.narrative strong { color:var(--text-primary); }
.narrative strong:first-child { font-size:var(--text-xl); font-weight:700; letter-spacing:-.4px; display:block; margin-bottom:var(--space-2); color:var(--text-primary); }
.narrative em { color:var(--brand-dark-teal); font-style:normal; font-weight:700; }
.narrative__line { margin-top:var(--space-1); }
.narrative__meta { display:block; margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px dashed var(--border-light); font-size:var(--text-xs); color:var(--text-muted); line-height:var(--line-snug); font-style:italic; }
.narrative__meta em { color:var(--brand-dark-teal); font-style:normal; font-weight:700; }
.narrative__meta strong { color:var(--text-secondary); font-weight:600; font-style:normal; }
.narrative__includes { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px dashed var(--border-light); font-size:var(--text-xs); color:var(--text-muted); display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; line-height:var(--line-snug); }
.narrative__includes-label { font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; font-size:var(--text-2xs); margin-right:var(--space-1); }
.narrative__chip { display:inline-block; padding:2px var(--space-2); background:var(--bg-card-alt); border:1px solid var(--border-light); border-radius:var(--radius-full); font-size:var(--text-xs); color:var(--text-secondary); }
.narrative__cue { display:inline-flex; align-items:center; gap:4px; margin-left:var(--space-2); padding:1px var(--space-2); background:var(--bg-card-alt); border:1px dashed var(--brand-teal); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; color:var(--brand-dark-teal); font-style:normal; vertical-align:middle; }
.narrative__cue::before { content:'\1F446'; font-size:var(--text-sm); }

/* ── KPI Cards ── */
.kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-3); margin-bottom:var(--space-8); }
.kpi-row-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-bottom:var(--space-8); }
/* Asymmetric variant: first card is the editorial hero, spans 2 columns; others read as supporting */
.kpi-row.kpi-row--with-hero { grid-template-columns:2fr repeat(4,1fr); }
.kpi-row-4.kpi-row--with-hero { grid-template-columns:2fr repeat(3,1fr); }
.kpi-card { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius); padding:var(--space-5) var(--space-4) var(--space-4); text-align:center; position:relative; transition: transform var(--transition), box-shadow var(--transition); cursor:default; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; justify-content:center; }
.kpi-card:hover { box-shadow:var(--shadow-md); }
.kpi-value { font-size:var(--text-3xl); font-weight:800; letter-spacing:-1px; line-height:1.05; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
.kpi-value.rate { color:var(--brand-dark-teal); }
.kpi-label { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); margin-top:var(--space-2); text-transform:uppercase; letter-spacing:.4px; }
.kpi-yoy { font-size:var(--text-xs); font-weight:600; margin-top:var(--space-2); font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-1); font-variant-numeric:tabular-nums; }

/* Hero KPI — left-aligned editorial layout, label on top, oversized number */
.kpi-row--with-hero > .kpi-card:first-child {
  text-align:left;
  padding:var(--space-5) var(--space-6);
  background:linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-alt) 100%);
  border-color:var(--border);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "label label"
    "value yoy"
    "spark spark";
  align-items:end;
  column-gap:var(--space-4);
  row-gap:var(--space-2);
}
.kpi-row--with-hero > .kpi-card:first-child .kpi-label { grid-area:label; margin:0; text-align:left; color:var(--brand-deep); font-weight:700; }
.kpi-row--with-hero > .kpi-card:first-child .kpi-value { grid-area:value; font-size:clamp(40px, 5vw, 56px); letter-spacing:-1.5px; line-height:1; }
.kpi-row--with-hero > .kpi-card:first-child .kpi-yoy { grid-area:yoy; margin:0 0 6px; align-self:end; font-size:var(--text-sm); }
.kpi-row--with-hero > .kpi-card:first-child .kpi-spark { grid-area:spark; margin:var(--space-2) 0 0; max-height:42px; width:100%; }
.yoy-up { color:var(--improved); }
.yoy-down { color:var(--worsened); }
.yoy-flat { color:var(--neutral); }
/* Mini sparkline inside a KPI card — shows the metric's historical trajectory */
.kpi-spark { display:block; margin:var(--space-2) auto 0; max-width:100%; }
.kpi-card--empty .kpi-value { color:var(--text-muted); font-weight:600; }


/* ── Three Things to Notice — narrative callout ── */
.three-things-wrap { margin-bottom:var(--space-4); }
.three-things-title { font-size:var(--text-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:var(--space-2); padding-left:var(--space-2); }
.three-things { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); padding:0; margin:0; }
.three-things__item { display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-sm); font-size:var(--text-xs); line-height:var(--line-snug); color:var(--text-secondary); box-shadow:var(--shadow-xs); transition: transform var(--transition), box-shadow var(--transition); }
.three-things__item:hover { box-shadow:var(--shadow-sm); }
.three-things__icon { flex-shrink:0; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:var(--text-2xs); font-weight:700; margin-top:1px; line-height:1; }
.three-things__item--positive .three-things__icon { color:var(--improved); background:var(--improved-bg); }
.three-things__item--concern .three-things__icon { color:var(--worsened); background:var(--worsened-bg); }
.three-things__item--neutral .three-things__icon { color:var(--text-secondary); background:var(--neutral-bg); }
.three-things__text { flex:1; }
.three-things__text strong { color:var(--text-primary); font-weight:700; }
.three-things__text em { color:var(--brand-dark-teal); font-weight:700; font-style:normal; }
@media(max-width:900px) { .three-things { grid-template-columns:1fr; } }
.three-things-note { font-size:var(--text-2xs); color:var(--text-muted); font-style:italic; margin-top:var(--space-2); padding-left:var(--space-2); line-height:var(--line-snug); }

/* ── Data Completeness Strip ── */
.completeness-strip-wrap { margin-bottom:var(--space-3); }
.completeness-strip { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--worsened-bg); border:1px solid var(--worsened); border-radius:var(--radius-sm); font-size:var(--text-xs); color:var(--text-secondary); line-height:var(--line-snug); }
.completeness-strip__icon { color:var(--worsened); font-size:var(--text-sm); font-weight:700; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--bg-card); display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.completeness-strip__text { flex:1; }
.completeness-strip__text strong { color:var(--text-primary); }

/* ── Trend chart: Notable event markers ── */
.trend-chart-wrap { position:relative; }
.trend-event-marker { position:absolute; top:0; bottom:28px; width:1px; background:rgba(102,112,133,.35); border-left:1px dashed rgba(102,112,133,.5); pointer-events:none; z-index:1; }
.trend-event-marker::before { content:''; position:absolute; top:-2px; left:-4px; width:9px; height:9px; border-radius:50%; background:var(--warning); border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.2); pointer-events:auto; cursor:help; }
.trend-event-marker:hover::before { transform:scale(1.2); }
.trend-event-label { position:absolute; top:10px; left:6px; font-size:var(--text-2xs); font-weight:700; color:var(--warning); background:var(--bg-card); padding:1px 5px; border-radius:var(--radius-xs); border:1px solid var(--worsened); white-space:nowrap; pointer-events:auto; cursor:help; }

/* ── Data Table ── */
.data-table { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--text-sm); }
.data-table th { text-align:left; padding:var(--space-3); border-bottom:2px solid var(--border); font-weight:700; color:var(--text-primary); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.4px; background:var(--bg-card-alt); position:sticky; top:0; z-index:1; }
.data-table th:first-child { border-radius:var(--radius-sm) 0 0 0; }
.data-table th:last-child { border-radius:0 var(--radius-sm) 0 0; }
.data-table td { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border-light); transition: background var(--transition); }
.data-table th.n { text-align:right; }
.data-table td.n { text-align:right; font-family:var(--mono); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.data-table tr:last-child td { border-bottom:2px solid var(--border); font-weight:600; background:var(--bg-card-alt); }
.data-table tr:hover td { background:rgba(14,143,160,.04); }

/* ── Overview table enhancements ── */
/* YoY delta badge inside table cells (shared across tables) */
.yoy-delta-sm { font-size:var(--text-2xs); font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; line-height:1; }

/* YoY full-matrix table — all years visible; current year emphasized; since-first-year summary */
.yoy-grid td { padding:var(--space-3) var(--space-3); vertical-align:middle; }
.yoy-grid td.sb { font-weight:700; color:var(--brand-deep); font-size:var(--text-sm); white-space:nowrap; }
.yoy-grid td.n { font-family:var(--mono); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }
.yoy-grid td.yoy-current-col { background:rgba(14,143,160,.08); font-size:var(--text-sm); color:var(--brand-deep); }
.yoy-grid td.yoy-current-col strong { font-size:var(--text-sm); font-weight:800; }
.yoy-grid th.yoy-current-col { background:rgba(14,143,160,.12); color:var(--brand-deep); }
.yoy-grid td.yoy-since-col,
.yoy-grid th.yoy-since-col { border-left:2px solid var(--border); padding-left:var(--space-4) !important; }
.yoy-grid td.yoy-since-col { min-width:100px; }
.yoy-change { font-variant-numeric:tabular-nums; line-height:1.2; margin-top:4px; }
.yoy-change strong { font-weight:700; display:block; font-size:var(--text-2xs); }
.yoy-change__abs { font-size:var(--text-2xs); color:var(--text-muted); font-weight:500; margin-top:1px; }
.yoy-change.yoy-up strong { color:var(--improved); }
.yoy-change.yoy-down strong { color:var(--worsened); }
.yoy-change.yoy-flat strong { color:var(--text-secondary); }
/* Breakdown table: volume column — prominent horizontal bar + count */
.vol-row { display:flex; align-items:center; gap:var(--space-3); justify-content:flex-end; }
.vol-bar-big { flex:1; min-width:40px; max-width:120px; height:10px; background:var(--neutral-bg); border-radius:var(--radius-xs); overflow:hidden; }
.vol-fill { height:100%; background:var(--brand-teal); opacity:.75; border-radius:var(--radius-xs); transition: width var(--transition); }
.vol-num-wrap { min-width:60px; display:flex; flex-direction:column; align-items:flex-end; gap:0; }
/* Breakdown table: rate pill — color-coded chip replaces the old thin progress bar */
.rate-pill { display:inline-block; padding:3px 10px; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.rate-pill--good { background:var(--improved-bg); color:var(--improved); }
.rate-pill--mid  { background:var(--neutral-bg);  color:var(--text-secondary); }
.rate-pill--bad  { background:var(--worsened-bg); color:#B56B00; }
.data-table .ct { font-weight:700; color:var(--brand-deep); }
.data-table .sb { padding-left:var(--space-6); color:var(--text-secondary); }
.rate-good { color:var(--improved); font-weight:700; }
.rate-mid { color:var(--neutral); font-weight:700; }
.rate-bad { color:#B56B00; font-weight:700; } /* darker than --worsened to meet WCAG AA on white */

/* ── Bar Charts ── */
.bar-row { display:flex; align-items:center; margin-bottom:var(--space-2); gap:var(--space-2); cursor:default; }
.bar-row:hover .bar-fill { filter:brightness(1.15); }
.bar-row:hover .bar-label { color:var(--text-primary); }
.bar-label { font-size:var(--text-xs); color:var(--text-secondary); width:140px; flex-shrink:0; text-align:right; line-height:1.3; }
.bar-track { flex:1; height:22px; background:var(--neutral-bg); border-radius:var(--radius-full); position:relative; }
.bar-fill { height:100%; border-radius:var(--radius-full); min-width:6px; transition: width .6s cubic-bezier(.165,.84,.44,1); position:relative; }
.bar-value { font-size:var(--text-xs); font-weight:600; color:var(--text-primary); width:110px; flex-shrink:0; font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ── Vertical Bars ── */
.vbar-wrap { display:flex; align-items:flex-end; gap:var(--space-1); height:190px; padding-top:var(--space-4); }
.vbar-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; cursor:default; }
.vbar-col:hover .vbar-bar { filter:brightness(1.15); transform:scaleY(1.02); transform-origin:bottom; }
.vbar-bar { width:60%; border-radius:var(--radius-xs) var(--radius-xs) 0 0; min-height:2px; transition: height .6s cubic-bezier(.165,.84,.44,1); position:relative; }
.vbar-lbl { font-size:var(--text-xs); color:var(--text-muted); margin-top:5px; text-align:center; min-height:22px; display:flex; align-items:center; justify-content:center; line-height:1.2; font-weight:500; }
.vbar-val { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); margin-bottom:3px; text-align:center; font-variant-numeric:tabular-nums; }

/* ── Heatmap ── */
.heatmap { width:100%; border-collapse:separate; border-spacing:2px; font-size:var(--text-xs); }
.heatmap th { padding:7px 5px; text-align:center; font-size:var(--text-xs); font-weight:700; color:var(--text-primary); background:var(--neutral-bg); border-radius:var(--radius-xs); }
.heatmap th:first-child { text-align:left; width:44px; }
.heatmap td { padding:6px var(--space-1); text-align:center; font-family:var(--mono); font-size:var(--text-xs); font-weight:600; font-variant-numeric:tabular-nums; border-radius:var(--radius-xs); transition: transform var(--transition); }
.heatmap td:hover { outline:2px solid var(--brand-teal); outline-offset:1px; z-index:1; position:relative; }
.heatmap td:first-child { text-align:left; font-family:var(--font); font-weight:700; color:var(--brand-deep); border-radius:var(--radius-xs); }

/* ── Net Flow ── */
.nf-wrap { display:flex; align-items:stretch; height:300px; gap:1px; position:relative; padding:0 2px 0; }
.nf-wrap::before { content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; background:var(--border); z-index:0; }
.nf-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:1; cursor:default; padding-bottom:28px; }
.nf-bar { width:60%; border-radius:var(--radius-xs); position:absolute; transition: height .5s cubic-bezier(.165,.84,.44,1); }
.nf-val { font-size:var(--text-xs); font-weight:600; position:absolute; white-space:nowrap; font-variant-numeric:tabular-nums; }
.nf-lbl { position:absolute; bottom:14px; font-size:var(--text-2xs); color:var(--text-muted); font-weight:500; letter-spacing:.02em; }
.nf-year { position:absolute; bottom:0; font-size:var(--text-2xs); color:var(--text-primary); font-weight:700; letter-spacing:.01em; }

/* ── Section Headers ── */
.section-header { display:flex; align-items:center; gap:var(--space-3); margin:var(--space-6) 0 var(--space-3); }
.section-num { width:28px; height:28px; background:var(--brand-deep); color:#fff; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:var(--text-xs); font-weight:700; flex-shrink:0; }
.section-title { font-size:var(--text-md); font-weight:700; color:var(--text-primary); margin:0; }
.section-sub { font-size:var(--text-xs); color:var(--text-muted); margin-left:var(--space-1); }
.section-sub[title], .subsection-label[title], .subsection-label--sm[title] { cursor:help; border-bottom:1px dotted var(--text-muted); }
.section-sub[title]::after, .subsection-label[title]::after, .subsection-label--sm[title]::after { content:'\2139'; font-size:var(--text-xs); margin-left:4px; opacity:.55; vertical-align:middle; }

/* ── LOS Cards ── */
.los-card { background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:var(--space-4); text-align:center; border:1px solid var(--border-light); transition: transform var(--transition); }
.los-card:hover { box-shadow:var(--shadow-sm); }
.los-heading { font-size:var(--text-xs); font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.3px; margin-bottom:var(--space-2); }
.los-value { font-size:var(--text-xl); font-weight:700; line-height:1.2; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
.los-sub { font-size:var(--text-xs); color:var(--text-muted); }
.los-divider { width:70%; height:1px; background:var(--border); margin:var(--space-3) auto; }

/* ── PH Pipeline ── */
.pipeline-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-bottom:var(--space-4); }
.pipeline-item { background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:var(--space-4) var(--space-2); text-align:center; transition: transform var(--transition); }
.pipeline-item:hover { box-shadow:var(--shadow-sm); }
.pipeline-value { font-size:var(--text-xl); font-weight:800; letter-spacing:-.4px; color:var(--brand-deep); font-variant-numeric:tabular-nums; }
.pipeline-label { font-size:var(--text-xs); color:var(--text-secondary); margin-top:var(--space-1); font-weight:500; }
.pipeline-item.hl { background:var(--improved-bg); border-color:var(--improved); }
.pipeline-item.hl .pipeline-value { color:var(--improved); }
/* Pipeline card enrichments — share % and proportion bar */
.pipeline-item__share { font-size:var(--text-2xs); color:var(--text-muted); font-weight:600; margin-top:var(--space-1); font-variant-numeric:tabular-nums; }
.pipeline-item__share--suppressed { font-style:italic; }
.pipeline-item__bar { display:block; height:5px; background:var(--neutral-bg); border-radius:3px; margin:var(--space-2) auto 0; overflow:hidden; max-width:80%; }
.pipeline-item__bar-fill { display:block; height:100%; background:var(--brand-teal); opacity:.65; border-radius:3px; transition: width var(--transition); }
.pipeline-item.hl .pipeline-item__bar-fill { background:var(--improved); opacity:.85; }
.pipeline-item__context { font-size:var(--text-2xs); color:var(--text-muted); font-weight:500; margin-top:var(--space-1); font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════
   SPM (Federal Scorecard) — phase-driven layout, trend-led
   ══════════════════════════════════════════════════════════ */

/* ── Chapter (phase-driven) ── */
.spm-chapter { margin:var(--space-5) 0; }
.spm-chapter__head { padding:var(--space-3) var(--space-4); background:linear-gradient(90deg, var(--bg-card-alt), transparent 80%); border-bottom:1px solid var(--border-light); border-radius:var(--radius-sm) var(--radius-sm) 0 0; margin-bottom:var(--space-3); }
.spm-chapter__title { font-size:var(--text-md); font-weight:800; color:var(--brand-deep); letter-spacing:-.3px; margin:0; }
.spm-chapter__sub { font-size:var(--text-xs); color:var(--text-muted); font-weight:500; margin-top:2px; }
.spm-chapter__verdict { font-size:var(--text-sm); font-weight:600; margin-top:var(--space-1); letter-spacing:-.1px; }
.spm-chapter__verdict--positive { color:var(--improved); }
.spm-chapter__verdict--concern  { color:var(--worsened); }
.spm-chapter__verdict--neutral  { color:var(--text-secondary); }
.spm-chapter__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-4); }

/* ── Measure card (trend-led) ── */
.spm-measure-card { display:flex; flex-direction:column; border:1px solid var(--border-light); border-radius:var(--radius); background:var(--bg-card); box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow var(--transition); }
.spm-measure-card:hover { box-shadow:var(--shadow-md); }
.mc-head { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-light); }
.mc-num { font-size:var(--text-2xs); font-weight:800; padding:2px 8px; border-radius:var(--radius-full); letter-spacing:.3px; flex-shrink:0; }
.mc-title { font-size:var(--text-sm); font-weight:700; color:var(--text-primary); margin:0; flex:1; min-width:0; line-height:1.3; }
.mc-head__actions { display:flex; align-items:center; gap:var(--space-1); flex-shrink:0; }
.mc-complete { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:var(--text-xs); font-weight:700; cursor:help; }
.mc-complete--ok        { color:var(--improved); background:var(--improved-bg); }
.mc-complete--partial   { color:var(--warning, #B45309); background:#FEF3C7; }
.mc-complete--insufficient { color:#B91C1C; background:#FEE2E2; }

.mc-body { padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.mc-trend { min-height:180px; }
.mc-trend__canvas { width:100%; height:240px; display:block; }
.mc-trend__empty { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) 0; }
.mc-trend__empty-val { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.mc-trend__empty-note { font-size:var(--text-xs); color:var(--text-muted); }

.mc-readout { font-size:var(--text-sm); color:var(--text-secondary); display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-1); }
.mc-val { font-size:var(--text-md); font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.mc-val--na { color:var(--text-muted); font-weight:600; font-style:italic; }
.mc-val-word { color:var(--text-muted); }
.mc-pre { font-size:var(--text-xs); color:var(--text-muted); font-style:italic; }
.mc-yoy { font-size:var(--text-xs); font-weight:700; }
.mc-yoy--up   { color:var(--improved); }
.mc-yoy--down { color:var(--worsened); }
.mc-yoy--na   { color:var(--text-muted); font-weight:500; font-style:italic; }

/* ── Status chip (plain-language direction interpretation) ── */
.mc-status { display:inline-block; padding:1px 8px; border-radius:var(--radius-full); font-size:var(--text-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.mc-status--improved { background:var(--improved-bg); color:var(--improved); }
.mc-status--worsened { background:var(--worsened-bg); color:var(--worsened); }
.mc-status--stable   { background:var(--neutral-bg); color:var(--neutral); }

/* ── Collapsed details (scope, breakdown, methodology) ── */
.mc-details { margin-top:var(--space-2); border-top:1px dashed var(--border-light); padding-top:var(--space-2); font-size:var(--text-xs); }
.mc-details > summary { cursor:pointer; color:var(--brand-dark-teal); font-weight:600; padding:2px 0; list-style:revert; }
.mc-details > summary:hover { color:var(--brand-deep); }
.mc-details[open] > summary { margin-bottom:var(--space-2); }
.mc-details__content { display:flex; flex-direction:column; gap:var(--space-2); padding-left:var(--space-3); }
.mc-direction { font-size:var(--text-xs); color:var(--text-muted); }
.mc-chips { display:flex; flex-wrap:wrap; gap:4px; }
.mc-chip { display:inline-block; padding:2px 8px; border-radius:var(--radius-full); font-size:var(--text-2xs); font-weight:600; background:var(--bg-card-alt); border:1px solid var(--border-light); color:var(--text-secondary); }
.mc-chip--note { background:transparent; border-style:dashed; font-style:italic; }

/* ── Sub-measure rail (inside details) ── */
.mc-submeasures { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.mc-subtile { flex:1 1 auto; min-width:120px; padding:var(--space-2) var(--space-3); background:var(--bg-card-alt); border:1px solid var(--border-light); border-radius:var(--radius-sm); }
.mc-subtile__label { font-size:var(--text-2xs); color:var(--text-muted); font-weight:600; }
.mc-subtile__val   { font-size:var(--text-sm); font-weight:700; color:var(--text-primary); margin-top:2px; display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; }
.mc-subtile__arrow { font-size:var(--text-2xs); font-weight:700; }
.mc-subtile__arrow.up   { color:var(--improved); }
.mc-subtile__arrow.down { color:var(--worsened); }

/* ── SPM chart legend (reused) ── */
.spm-chart-legend { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:6px; font-size:var(--text-2xs); color:var(--text-secondary); }
.spm-legend-item { display:inline-flex; align-items:center; gap:4px; }
.spm-legend-line { display:inline-block; width:18px; height:0; border-top:2.5px solid; }
.spm-legend-line.dashed { border-top-style:dashed; }

/* ── Methodology ── */
.methodology { margin-top:var(--space-5); border:1px solid var(--border-light); border-radius:var(--radius); background:var(--bg-card); box-shadow:var(--shadow-xs); overflow:hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.methodology[open] { border-color:var(--brand-teal); box-shadow:var(--shadow-sm); }
.methodology summary { list-style:none; cursor:pointer; padding:var(--space-3) var(--space-5); font:700 var(--text-sm)/1.3 var(--font); color:var(--text-primary); background:var(--bg-card-alt); display:flex; align-items:center; gap:var(--space-2); user-select:none; transition: background var(--transition); }
.methodology summary:hover { background:var(--neutral-bg); }
.methodology summary::-webkit-details-marker { display:none; }
.methodology summary::before { content:''; width:7px; height:7px; border-right:2px solid var(--brand-teal); border-bottom:2px solid var(--brand-teal); transform:rotate(-45deg); transition: transform var(--transition); flex-shrink:0; margin-right:2px; }
.methodology[open] summary::before { transform:rotate(45deg); }
.methodology summary .hint { margin-left:auto; font-weight:500; color:var(--text-muted); font-size:var(--text-xs); }
.meth-content { padding:var(--space-4) var(--space-5); font-size:var(--text-sm); line-height:1.65; color:var(--text-secondary); border-top:1px solid var(--border-light); background:var(--bg-card); }
.meth-content > p, .meth-content > div:not(.meth-group):not(.meth-dl):not([class*="quickref"]) { max-width:75ch; }
.meth-group__lead, .meth-note { max-width:75ch; }
.meth-content > :first-child { margin-top:0; }
.meth-content > :last-child { margin-bottom:0; }
.meth-content strong { color:var(--text-primary); }
.meth-content em { font-style:normal; color:var(--text-primary); font-weight:600; }

/* Structured methodology: grouped sections with leading colored bullet */
.meth-group { padding:var(--space-3) var(--space-4); margin:0 0 var(--space-3) 0; background:var(--bg-card-alt); border:1px solid var(--border-light); border-radius:var(--radius-sm); --meth-accent:var(--brand-teal); }
.meth-group:last-child { margin-bottom:0; }
.meth-group--blue { --meth-accent:var(--improved); }
.meth-group--orange { --meth-accent:var(--worsened); }
.meth-group--teal { --meth-accent:var(--brand-teal); }
.meth-group--purple { --meth-accent:#7C4DB3; }
.meth-group--gray { --meth-accent:var(--text-muted); }
.meth-group__title { font-weight:700; color:var(--text-primary); font-size:var(--text-sm); margin:0 0 var(--space-1) 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); }
.meth-group__title::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--meth-accent); flex-shrink:0; align-self:center; }
.meth-group__sub { font-weight:500; color:var(--text-muted); font-size:var(--text-xs); }
.meth-group__lead { margin:var(--space-1) 0 var(--space-2) 0; color:var(--text-secondary); font-size:var(--text-sm); }

/* Definition list: term | definition — avoids "Term — definition" dash pattern */
.meth-dl { display:grid; grid-template-columns:minmax(150px, max-content) 1fr; column-gap:var(--space-4); row-gap:6px; margin:var(--space-1) 0 0 0; }
.meth-dl dt { font-weight:600; color:var(--text-primary); }
.meth-dl dd { margin:0; color:var(--text-secondary); }
.meth-dl dt .meth-term-tag { display:inline-block; padding:1px 8px; border-radius:var(--radius-full); font-size:var(--text-2xs); font-weight:700; letter-spacing:.3px; text-transform:uppercase; margin-right:6px; vertical-align:1px; background:var(--neutral-bg); color:var(--text-muted); }
.meth-term--good { color:var(--improved); }
.meth-term--bad { color:var(--worsened); }
.meth-term--neutral { color:var(--text-muted); }

/* Inline tag used inside flowing paragraphs */
.meth-tag { display:inline-block; padding:1px 7px; border-radius:var(--radius-full); font-size:var(--text-2xs); font-weight:700; background:var(--neutral-bg); color:var(--text-secondary); }

/* Small note at the bottom of a group (footnote-like) */
.meth-note { margin-top:var(--space-2); padding-top:var(--space-2); border-top:1px dashed var(--border-light); font-size:var(--text-xs); color:var(--text-muted); line-height:var(--line-snug); }

@media (max-width: 640px) {
  .meth-dl { grid-template-columns:1fr; row-gap:2px; }
  .meth-dl dt { margin-top:var(--space-2); }
  .meth-dl dt:first-child { margin-top:0; }
}

/* ── Annotation ── */
.annotation { font-size:var(--text-xs); color:var(--text-muted); font-style:italic; margin-top:var(--space-3); line-height:var(--line-snug); padding:var(--space-2) 0; border-top:1px dashed var(--border-light); }

/* ── Focus ring ── */
:focus-visible { outline:2px solid var(--brand-teal); outline-offset:2px; }
.filter-select:focus-visible { box-shadow:0 0 0 3px rgba(14,143,160,.25); }

/* ── Screen-reader only ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ── Disambiguation badges ── */
.disambig-badge { display:inline-flex; align-items:center; gap:var(--space-1); padding:3px var(--space-3); border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; background:var(--worsened-bg); color:var(--warning); border:1px solid var(--worsened); cursor:help; white-space:nowrap; vertical-align:middle; margin-left:var(--space-2); }

/* ── Data table: current-period column emphasis ── */
.data-table th.current-year,
.data-table td.current-year { color:var(--brand-teal); font-weight:700; }
.data-table td.rate-cell.current-year { color:var(--brand-dark-teal); }


/* ── Heatmap: null/no-data cell ── */
.heatmap td.hm-null { color:var(--border); }

/* ── SPM Quick-Reference Guide (bottom of SPM tab) ── */
.quickref-heading { font-size:var(--text-xs); font-weight:700; color:var(--text-primary); margin-top:var(--space-4); }
.quickref-table { font-size:var(--text-xs); }
.quickref-heading + .quickref-table { margin-top:6px; }
.quickref-section-head { font-weight:700; background:var(--bg-card-alt); font-size:var(--text-2xs); letter-spacing:.3px; }

/* ── Utility: spacing ── */
.mb-4 { margin-bottom:var(--space-4); }

/* ── Animations ── */
.fi { opacity:0; transform:translateY(12px); animation: fadeUp .5s cubic-bezier(.165,.84,.44,1) forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.fi-d1 { animation-delay:.04s; }
.fi-d2 { animation-delay:.08s; }
.fi-d3 { animation-delay:.12s; }
.fi-d4 { animation-delay:.16s; }
.fi-d5 { animation-delay:.18s; }

/* ── Special Sections (PH / SO) ── */
.special-section { border:2px solid var(--brand-teal); border-radius:var(--radius); overflow:hidden; margin-bottom:var(--space-4); }
.special-section--so { border-color:var(--brand-green-teal); }
.special-section__header { padding:var(--space-2) var(--space-5); font-size:var(--text-xs); font-weight:700; display:flex; align-items:center; gap:var(--space-2); }
.special-section__header--ph { background:linear-gradient(135deg,#e0f7fa,#e0f2f1); color:var(--brand-dark-teal); }
.special-section__header--so { background:linear-gradient(135deg,#e0f2f1,#e8f5e9); color:var(--brand-deep); }
.special-section__body { padding:var(--space-5) var(--space-6); background:var(--bg-card); }

/* ── Subsection labels ── */
.subsection-label { font-size:var(--text-xs); font-weight:600; color:var(--brand-deep); margin-bottom:var(--space-2); }
.subsection-label--sm { font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); margin-bottom:var(--space-2); }
.subsection-label__hint { font-weight:400; color:var(--text-muted); }
.subsection-note { font-size:var(--text-xs); color:var(--text-muted); margin-bottom:var(--space-2); }

/* ── Explorer: panel narrative ── */
.narrative--inset { margin-bottom:var(--space-3); }

/* ── Explorer: PH sub-section divider ── */
.ph-divider { height:1px; background:var(--border-light); margin:var(--space-5) 0; }

/* ── Explorer: SO contacts chart ── */
.so-contacts { display:flex; align-items:flex-end; gap:3px; height:130px; }
.so-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; cursor:default; }
.so-col:hover .so-bar { filter:brightness(1.15); }
.so-bar { width:65%; border-radius:var(--radius-xs) var(--radius-xs) 0 0; }
.so-lbl { font-size:var(--text-2xs); color:var(--text-muted); margin-top:3px; font-weight:500; }

/* ── Explorer: LOS cards grid ── */
.los-cards-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }


/* ── Chart Legend ── */
.chart-legend { display:flex; gap:var(--space-4); align-items:center; padding-top:var(--space-2); }
.chart-legend__item { display:flex; align-items:center; gap:5px; font-size:var(--text-xs); color:var(--text-secondary); }
.chart-legend__swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.chart-legend__note { font-size:var(--text-xs); color:var(--text-secondary); margin-left:var(--space-2); }

/* ── SPM utility classes ── */
.spm-quickref-text { font-size:var(--text-base); line-height:1.7; color:var(--text-secondary); margin-bottom:var(--space-3); }

/* ── Footer ── */
.dashboard-footer { padding:var(--space-4) var(--space-8); display:flex; flex-direction:column; align-items:stretch; gap:var(--space-3); border-top:1px solid var(--border-light); background:var(--bg-card-alt); font-size:var(--text-xs); color:var(--text-muted); }
.dashboard-footer__top { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.dashboard-footer__brand { display:flex; justify-content:center; align-items:center; gap:var(--space-8); flex-wrap:wrap; }
.dashboard-footer__brand-item { display:flex; align-items:center; gap:var(--space-2); font-style:italic; color:var(--text-muted); }
.dashboard-footer__brand-item img { display:block; }
.dashboard-footer__version { text-align:center; color:var(--text-muted); font-style:italic; }

/* ── Canvas ── */
canvas { border-radius:var(--radius-sm); display:block; width:100%; }

/* ── Tooltip ── */
.tt { position:fixed; z-index:10000; pointer-events:none; opacity:0; transition:opacity .15s ease; max-width:320px; padding:var(--space-3) var(--space-4); background:rgba(16,24,40,.94); color:#fff; font:500 var(--text-xs)/1.5 var(--font); border-radius:var(--radius-sm); box-shadow:0 4px 24px rgba(0,0,0,.3); }
.tt.on { opacity:1; }
.tt-title { font-weight:700; font-size:var(--text-sm); margin-bottom:var(--space-1); color:#56B4E9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:290px; }
.tt-row { display:flex; justify-content:space-between; gap:var(--space-4); }
.tt-label { color:#98A2B3; }
.tt-val { font-family:var(--mono); font-weight:600; text-align:right; }
.tt-divider { height:1px; background:rgba(255,255,255,.1); margin:5px 0; }
.tt-note { font-size:var(--text-xs); color:#98A2B3; margin-top:var(--space-1); font-style:italic; }

/* ── Chart Empty State ── */
.chart-empty { text-align:center; padding:var(--space-8) var(--space-4); color:var(--text-muted); font-size:var(--text-sm); line-height:1.6; background:var(--bg-card-alt); border:1px dashed var(--border-light); border-radius:var(--radius-sm); }

/* ── Responsive ── */
@media(max-width:1280px) { .kpi-row { grid-template-columns:repeat(4,1fr); } .kpi-row.kpi-row--with-hero { grid-template-columns:2fr repeat(3,1fr); } .kpi-row-4.kpi-row--with-hero { grid-template-columns:2fr repeat(2,1fr); } }
@media(max-width:1100px) { .kpi-row,.kpi-row-4 { grid-template-columns:repeat(3,1fr); } .kpi-row.kpi-row--with-hero,.kpi-row-4.kpi-row--with-hero { grid-template-columns:repeat(3,1fr); } .kpi-row--with-hero > .kpi-card:first-child { grid-column:1 / -1; } }
@media(max-width:900px) { .kpi-row,.kpi-row-4 { grid-template-columns:repeat(2,1fr); } .kpi-row.kpi-row--with-hero,.kpi-row-4.kpi-row--with-hero { grid-template-columns:repeat(2,1fr); } .g2,.g3 { grid-template-columns:1fr; } .pipeline-grid { grid-template-columns:repeat(2,1fr); } .spm-chapter__grid { grid-template-columns:1fr; } .main { padding:var(--space-4); } .wrap { margin:var(--space-3); border-radius:var(--radius); } }

@media(max-width:768px) {
  .filter-bar { flex-direction:column; align-items:stretch; gap:var(--space-3); }
  /* Stranded vertical hairlines look like a layout bug when the bar stacks. */
  .filter-sep { display:none; }
  .header { padding:var(--space-4) var(--space-5); gap:var(--space-3); }
  .header-logo { height:36px; }
  .header-title { font-size:var(--text-md); letter-spacing:-.2px; }
  .tab-nav { padding:0 var(--space-4); }
  /* Touch targets — bump filter pill, select, and theme toggle to ≥36px tall */
  .filter-radio label { padding:8px 14px; }
  .filter-select { padding:9px 28px 9px var(--space-3); }
  .theme-toggle, .header-btn { padding:9px 12px; }
  /* Reset button in stacked filter bar: drop the auto-margin (no horizontal slack) and align flush */
  .filter-reset { margin-left:0; align-self:flex-start; padding:8px 14px; }
  /* YoY full-matrix table → horizontal scroll inside its panel */
  #overviewYoY { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #overviewYoY .yoy-grid { min-width:600px; }
  /* Lede panel slightly tighter at narrow widths */
  .panel--lede { padding:var(--space-5) var(--space-5); }
  .panel--lede > .panel-title { font-size:var(--text-md); }
}

@media(max-width:600px) {
  .kpi-row,.kpi-row-4 { grid-template-columns:1fr; }
  .filter-bar { gap:var(--space-2); padding:var(--space-3) var(--space-4); }
  /* Tab nav → horizontal scroll, scrollbar hidden */
  .tab-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tab-nav::-webkit-scrollbar { display:none; }
  /* Heatmap → horizontal scroll inside its panel */
  #c_hm { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #c_hm .heatmap { min-width:500px; }
  /* Net-flow → tighten column padding so 24 columns survive narrow widths */
  .nf-wrap { padding:0 1px; gap:0; height:240px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* High-contrast users get bolder borders and more vivid muted text so chrome
   remains parsable when their OS removes subtle gradients and tints. */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --border: #475467;
    --border-light: #667085;
    --text-muted: #344054;
  }
  [data-theme="dark"] {
    --border: #5A6070;
    --border-light: #4A5060;
    --text-muted: #B0B5BF;
  }
  :focus-visible { outline-width: 3px; outline-offset: 3px; }
  .filter-select:focus-visible, .filter-reset:focus-visible { box-shadow: 0 0 0 3px var(--brand-teal); }
}

/* ── Destination drill-down panel (Explorer tab) ───────────────────────── */
/* Slides in from the right when a user clicks a bar in the exit chart.
   Hidden by default; .open promotes it onto the screen. Clickable bars
   in the exit chart get cursor:pointer via JS (role="button"). */
.drill-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(520px, 92vw);
  height: 100vh;
  background: var(--surface, #fff);
  border-left: 1px solid var(--border, #d0d5dd);
  box-shadow: -8px 0 24px rgba(16, 24, 40, 0.18);
  overflow-y: auto;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  padding: var(--space-5, 24px);
  padding-top: calc(var(--space-5, 24px) + 8px);
}
.drill-panel.open { transform: translateX(0); }
.drill-panel[aria-hidden="true"] { /* base state — invisible until .open */ }
.drill-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted, #667085);
  border-radius: 4px;
}
.drill-close:hover { background: var(--bg-muted, #f2f4f7); color: var(--text, #101828); }
.drill-close:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; }
.drill-head { margin-bottom: var(--space-4, 16px); padding-right: 40px; }
.drill-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #667085); }
.drill-title { font-size: 1.25rem; font-weight: 600; margin: 4px 0 8px 0; }
.drill-sub { font-size: 0.875rem; color: var(--text-muted, #667085); }
.drill-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.drill-table th { text-align: left; padding: 8px 6px; border-bottom: 2px solid var(--border, #d0d5dd); font-weight: 600; }
.drill-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-light, #eaecf0); }
.drill-table th.num, .drill-table td.num { text-align: right; }
.drill-table td.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted, #667085); }
.drill-empty { padding: var(--space-4, 16px); text-align: center; color: var(--text-muted, #667085); font-size: 0.9rem; }
.drill-footer { margin-top: var(--space-3, 12px); padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-light, #eaecf0); font-size: 0.8rem; color: var(--text-muted, #667085); }
/* Bars in #c_exit get a hover affordance to invite drill-down clicks. */
#c_exit .bar-row { transition: background 0.15s ease; border-radius: 4px; }
#c_exit .bar-row:hover { background: var(--bg-muted, rgba(16, 24, 40, 0.04)); }