/* ============================================================
   West Windsor 2026 Budget Visualizer — design system
   ============================================================ */

:root {
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --paper: #f6f8fb;
  --card: #ffffff;
  --line: #e2e8f0;

  --brand-900: #0c4a6e;
  --brand-700: #0369a1;
  --brand-500: #0ea5e9;
  --brand-300: #7dd3fc;
  --brand-100: #e0f2fe;

  --teal: #0d9488;

  --good: #0f766e;
  --good-bg: #ccfbf1;

  --bg-soft: #eef2f7;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px rgba(15, 23, 42, 0.07);
  --shadow-pop: 0 18px 48px rgba(15, 23, 42, 0.18);

  --container: 1180px;

  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-accent: "Lora", Georgia, "Times New Roman", serif;

  /* 13-color categorical palette for functional groups, ordered to roughly
     match spending size for visual variety (blues/teals -> greens -> warm) */
  --grp-1: #0369a1;
  --grp-2: #0ea5e9;
  --grp-3: #14b8a6;
  --grp-4: #22c55e;
  --grp-5: #84cc16;
  --grp-6: #eab308;
  --grp-7: #f59e0b;
  --grp-8: #f97316;
  --grp-9: #ef4444;
  --grp-10: #ec4899;
  --grp-11: #a855f7;
  --grp-12: #6366f1;
  --grp-13: #64748b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--brand-700); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------------- Header ---------------- */

.top-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--brand-900), var(--brand-700));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--brand-100) 0%, rgba(255, 255, 255, 0.94) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--brand-700);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
}

.brand img {
  height: 40px;
  width: auto;
  display: block;
}

.back-home .back-home-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--brand-100);
  color: var(--brand-700);
  border: 1px solid var(--brand-300);
  flex: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.back-home .back-home-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-home:hover .back-home-icon {
  background: var(--brand-700);
  color: #fff;
  transform: translateX(-2px);
}

[data-theme="dark"] .back-home .back-home-icon {
  background: rgba(125, 211, 252, 0.12);
  color: var(--brand-300);
  border-color: rgba(125, 211, 252, 0.25);
}

[data-theme="dark"] .back-home:hover .back-home-icon {
  background: var(--brand-500);
  color: #0b1220;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.brand-text span {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.site-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--brand-700);
}

.site-nav a.nav-cta {
  background: var(--brand-700);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: background 160ms ease-out;
}

.site-nav a.nav-cta:hover {
  background: var(--brand-900);
  color: #fff;
}

.site-nav a.nav-cta.is-current {
  background: var(--brand-900);
  cursor: default;
  pointer-events: none;
}

/* ---------------- Jump nav (in-page section tabs) ---------------- */

.section--tight {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.jump-nav {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.jump-nav a {
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-700);
  background: var(--brand-100);
  border: 1px solid var(--brand-300);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1.1rem;
  transition: all 160ms ease-out;
}

.jump-nav a:hover {
  background: var(--brand-700);
  color: #fff;
  border-color: var(--brand-700);
}

@media (max-width: 760px) {
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 0.4rem 0.9rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.2rem;
  }

  .site-nav a {
    font-size: 0.8rem;
  }

  .brand img {
    height: 32px;
  }

  .brand-text strong {
    font-size: 0.95rem;
  }
}

/* ---------------- Hero ---------------- */

.hero {
  color: var(--ink);
  background: linear-gradient(180deg, var(--brand-100) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.hero .eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-700);
  margin-bottom: 0.9rem;
}

.hero h1 {
  color: var(--ink);
  max-width: 18ch;
  margin-bottom: 1rem;
}

.hero p {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}

.hero-chips li {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--card);
  border: 1px solid var(--brand-300);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.hero-figure {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(8, 47, 73, 0.18);
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.hero-figure-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.hero-figure-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 700;
  color: var(--brand-900);
  margin: 0.2rem 0;
}

.hero-figure-source {
  font-size: 0.72rem;
  color: var(--ink-faint);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero-art {
  display: flex;
  justify-content: center;
}

/* Premium gradient panel that replaces the old illustration: a civic
 * data-flow backdrop behind the headline figure and three quick stats. */
.hero-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-500) 100%);
  padding: 2.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(8, 47, 73, 0.2);
}

.hero-panel-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-ring-1 {
  width: 260px;
  height: 260px;
  top: -90px;
  right: -70px;
}

.hero-ring-2 {
  width: 160px;
  height: 160px;
  bottom: -50px;
  left: -50px;
  border-color: rgba(255, 255, 255, 0.12);
}

.hero-ring-3 {
  width: 90px;
  height: 90px;
  bottom: 30%;
  right: 10%;
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.hero-panel-stats {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 0.5rem;
}

.hero-panel-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}

.hero-panel-stat strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
}

.hero-panel-stat span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.15rem;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-art {
    /* On mobile the headline reads first, then the figure (was order:-1) */
    order: 0;
  }

  .hero-panel {
    max-width: 100%;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 160ms ease-out;
}

.btn-primary {
  background: var(--brand-700);
  color: #fff;
  border-color: var(--brand-700);
}

.btn-primary:hover {
  background: var(--brand-900);
  border-color: var(--brand-900);
}

.btn-secondary {
  background: var(--brand-100);
  color: var(--brand-900);
  border-color: var(--brand-100);
}

.btn-secondary:hover {
  background: var(--brand-300);
  border-color: var(--brand-300);
}

.btn-ghost {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--brand-300);
}

.btn-ghost:hover {
  background: var(--brand-100);
  border-color: var(--brand-700);
}

/* ---------------- Sections ---------------- */

.section {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.section--alt {
  background: #ffffff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 70ch;
  margin-bottom: 2rem;
}

.section-head .eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-700);
  margin-bottom: 0.6rem;
}

.section-intro {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ---------------- Stat cards ---------------- */

.stats-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) 2fr;
  gap: 1.25rem;
  align-items: stretch;
}

.stat-feature {
  background: linear-gradient(155deg, var(--brand-900), var(--brand-700));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-feature-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-100);
  margin-bottom: 0.5rem;
}

.stat-feature-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
}

.stat-feature .stat-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--brand-300);
}

.stats-grid-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
}

.stat-card .stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--ink);
}

.stat-card .stat-note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------- Donut charts ---------------- */

.donut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.donut-feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.donut-feature h3 {
  margin-bottom: 0.5rem;
  text-align: center;
}

.donut-feature-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0.5rem auto 0;
  max-width: 100%;
}

.donut-feature-wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.donut-center-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.donut-center-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
}

.donut-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 1rem;
}

/* Floating hover popover with descriptions */
.donut-popover {
  position: absolute;
  z-index: 80;
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  pointer-events: none;
}

.donut-popover.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.donut-pop-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-top: 0.3rem;
}

.donut-pop-body h4 {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
}

.donut-pop-amount {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.donut-pop-body p {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .donut-grid {
    grid-template-columns: 1fr;
  }
}

/* Cross-highlighting between slices and linked cards */
.donut-grid path {
  transition: opacity 160ms ease-out;
}

.donut-grid path.is-dimmed {
  opacity: 0.28;
}

/* Linked summary cards under each donut */
.donut-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.donut-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
}

.donut-card:hover,
.donut-card:focus-visible,
.donut-card.is-highlighted {
  border-color: var(--brand-500);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.donut-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.donut-card-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.donut-card-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.donut-card-amount {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.3rem;
}

.donut-card-hint {
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Compact rows for the smaller remaining spending categories */
.donut-other-list {
  margin-top: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.donut-other-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  border-top: 1px solid var(--line);
  transition: background 120ms ease-out;
}

.donut-other-row:first-child {
  border-top: none;
}

.donut-other-row:hover,
.donut-other-row:focus-visible,
.donut-other-row.is-highlighted {
  background: var(--paper);
}

.donut-other-swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.donut-other-label {
  flex: 1;
  font-size: 0.82rem;
  color: var(--ink);
}

.donut-other-amount {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------------- What changed from 2025 ---------------- */

.yoy-total {
  margin-top: 1.5rem;
}

.yoy-total-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--brand-900), var(--brand-700));
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  color: #fff;
  text-align: center;
}

.yoy-total-card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}

.yoy-total-label {
  position: relative;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
}

.yoy-total-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
}

.yoy-total-amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.yoy-total-badge,
.yoy-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.yoy-total-badge.is-up {
  background: rgba(74, 222, 128, 0.18);
  color: #bbf7d0;
}

.yoy-total-badge.is-down {
  background: rgba(253, 186, 116, 0.18);
  color: #fed7aa;
}

.yoy-card-badge.is-up {
  background: rgba(20, 122, 87, 0.1);
  color: var(--brand-700);
}

.yoy-card-badge.is-down {
  background: rgba(180, 83, 9, 0.1);
  color: #b45309;
}

.yoy-bars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 480px;
  margin: 0 auto;
}

.yoy-bars--compact {
  max-width: none;
  margin-top: 0.75rem;
  gap: 0.45rem;
}

.yoy-bar-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
}

.yoy-bar-year {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  opacity: 0.65;
}

.yoy-bar-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.yoy-bars--compact .yoy-bar-track {
  height: 8px;
  background: var(--bg-soft, #eef2f7);
}

.yoy-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.yoy-bar-fill--now {
  background: #fff;
}

#changed.is-visible .yoy-bar-fill {
  width: var(--target);
}

.yoy-bar-amount {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  min-width: 6.5ch;
  text-align: right;
}

.yoy-total-change {
  position: relative;
  margin-top: 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}

.yoy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.yoy-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#changed.is-visible .yoy-card {
  opacity: 1;
  transform: translateY(0);
}

#changed.is-visible .yoy-card:nth-child(1) { transition-delay: 0.05s; }
#changed.is-visible .yoy-card:nth-child(2) { transition-delay: 0.1s; }
#changed.is-visible .yoy-card:nth-child(3) { transition-delay: 0.15s; }
#changed.is-visible .yoy-card:nth-child(4) { transition-delay: 0.2s; }
#changed.is-visible .yoy-card:nth-child(5) { transition-delay: 0.25s; }
#changed.is-visible .yoy-card:nth-child(6) { transition-delay: 0.3s; }

.yoy-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.yoy-card-label {
  font-weight: 600;
  font-size: 0.9rem;
  flex: 1;
}

.yoy-card-change {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.is-up {
  color: var(--brand-700);
}

.is-down {
  color: #b45309;
}

@media (prefers-reduced-motion: reduce) {
  .yoy-bar-fill {
    transition: none;
  }
  .yoy-card {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------------- Source tags ---------------- */

.source-tag {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ---------------- Sankey ---------------- */

.sankey-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
  overflow-x: auto;
}

.sankey-card--full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 1.5rem;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 1.25rem clamp(1rem, 4vw, 4rem);
}

#sankey-chart {
  width: 100%;
  height: auto;
  min-width: 640px;
}

.sankey-node rect {
  stroke: rgba(15, 23, 42, 0.15);
}

.sankey-link {
  fill: none;
  stroke-opacity: 0.32;
  cursor: pointer;
  transition: stroke-opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), stroke-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sankey-link:hover {
  stroke-opacity: 0.6;
}

.sankey-link.is-highlighted {
  stroke-opacity: 0.7;
}

.sankey-link.is-active {
  stroke-opacity: 0.85;
}

.sankey-link.is-dimmed {
  stroke-opacity: 0.08;
}

.sankey-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink);
}

.sankey-label .amount {
  fill: var(--ink-soft);
  font-size: 10px;
}

.sankey-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 10;
  white-space: nowrap;
}

.sankey-hint {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.sankey-node rect {
  cursor: pointer;
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), stroke-width 200ms ease-out;
}

.sankey-node-group.is-active rect {
  opacity: 1;
  stroke: var(--ink);
  stroke-width: 1.5px;
}

.sankey-node-group.is-dimmed rect {
  opacity: 0.25;
}

.sankey-label,
.sankey-label.amount {
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sankey-node-group.is-dimmed .sankey-label {
  opacity: 0.3;
}

.sankey-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: max-height 480ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sankey-detail.is-open {
  opacity: 1;
  transform: translateY(0);
}

.sankey-detail-inner {
  margin-top: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--brand-500);
}

.sankey-detail-inner h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.sankey-detail-inner .detail-amount {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-700);
  margin-bottom: 0.5rem;
}

.sankey-detail-inner p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.detail-breakdown {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.detail-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--line);
}

.detail-breakdown-row span:first-child {
  color: var(--ink);
}

.detail-breakdown-row span:last-child {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
  flex: none;
}

/* ---------------- Calculator ---------------- */

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .calculator-grid {
    grid-template-columns: 1fr;
  }
}

.calc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.calc-card label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.calc-input-row {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
}

.calc-input-row span {
  padding: 0.7rem 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
  background: var(--line);
}

.calc-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.7rem 0.85rem;
  font-size: 1.05rem;
  font-family: var(--font-body);
  color: var(--ink);
  min-width: 0;
}

.calc-input-row input:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

.calc-result {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--brand-100);
  border: 1px solid var(--brand-300);
}

.calc-result .calc-result-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand-700);
}

.calc-result .calc-result-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--brand-900);
}

.privacy-note {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper);
  border-left: 3px solid var(--brand-500);
  padding: 0.75rem 0.9rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.calc-formula {
  margin-top: 0.75rem;
  font-size: 0.82rem;
}

.calc-formula summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-700);
}

.calc-formula code {
  display: block;
  margin-top: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
}

/* ---------------- Breakdown bars ---------------- */

.breakdown-list {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}

.breakdown-row {
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.breakdown-row:last-child {
  margin-bottom: 0;
}

.breakdown-row-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.breakdown-row-head .group-name {
  font-weight: 600;
}

.breakdown-row-head .group-amounts {
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.breakdown-track {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.breakdown-fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 650ms cubic-bezier(0.4, 0, 0.2, 1);
}

.breakdown-fill.is-pulsing {
  animation: breakdown-pulse 480ms ease-out;
}

@keyframes breakdown-pulse {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.45);
  }
  35% {
    filter: brightness(1.25);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
  }
  100% {
    filter: brightness(1);
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

/* ---------------- "Compared to others" meter ---------------- */

.calc-compare {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.calc-compare-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.calc-compare-label strong {
  color: var(--brand-700);
}

.calc-compare-track {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.calc-compare-fill {
  height: 100%;
  width: 0%;
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  transition: width 650ms cubic-bezier(0.4, 0, 0.2, 1);
}

.calc-compare-fill.has-value {
  min-width: 3px;
}

/* ---------------- Cap cards ---------------- */

.caps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.cap-card {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.cap-card .cap-label {
  font-size: 0.78rem;
  color: var(--brand-700);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cap-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.3rem;
}

.cap-bar-track {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.cap-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-700);
}

.cap-bar-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-700);
  white-space: nowrap;
}

.cap-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.cap-card .cap-value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0.4rem 0;
  color: var(--good);
  background: var(--good-bg);
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: var(--radius-sm);
}

.cap-card p {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0.5rem 0 0;
}

.cap-card .cap-source {
  color: var(--ink-faint);
  font-size: 0.78rem;
}

/* ---------------- Glossary tooltip term ---------------- */

.gloss-term {
  border-bottom: 1px dotted var(--brand-500);
  cursor: help;
  text-decoration: none;
  color: inherit;
}

/* ---------------- Filters ---------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.filters input[type="search"],
.filters select {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
}

.filters input[type="search"] {
  flex: 1;
  min-width: 200px;
}

.filters label.checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.results-note {
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.75rem;
}

/* ---------------- Tables ---------------- */

.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: auto;
  max-height: 640px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  font-weight: 700;
  padding: 0.6rem 0.8rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  z-index: 1;
}

tbody td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
  white-space: normal;
}

tbody tr:nth-child(even) {
  background: var(--paper);
}

tbody tr.row-total {
  background: var(--brand-100);
  font-weight: 700;
}

.group-header-row td {
  background: var(--brand-100) !important;
  color: var(--brand-900);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky;
  top: 33px;
  border-bottom: 1px solid var(--line);
}

td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.badge-within {
  background: var(--good-bg);
  color: var(--good);
}

.badge-excluded {
  background: #fef3c7;
  color: #92400e;
}

/* ---------------- Toggle pills ---------------- */

.pill-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}

.pill-toggle button {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 160ms ease-out;
}

.pill-toggle button.active {
  background: var(--brand-700);
  color: #fff;
}

/* ---------------- Inline "what does this mean?" buttons ---------------- */

.gloss-btn {
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--brand-300);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  transition: all 160ms ease-out;
}

.gloss-btn:hover,
.gloss-btn:focus {
  background: var(--brand-700);
  color: #fff;
  border-color: var(--brand-700);
  outline: none;
}

.gloss-popover {
  position: absolute;
  z-index: 100;
  max-width: 320px;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.gloss-popover.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------------- About / FAQ ---------------- */

.faq-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.faq-fact {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}

.faq-fact-icon {
  flex: none;
  font-size: 1.3rem;
  line-height: 1;
}

.faq-fact strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.faq-fact span:not(.faq-fact-icon) {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item[open] {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-card);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--brand-700);
}

.faq-icon {
  flex: none;
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--brand-500);
  transform: translate(-50%, -50%);
  transition: transform 250ms ease;
}

.faq-icon::before {
  width: 1.1rem;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 1.1rem;
}

.faq-item[open] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

.faq-item-body {
  padding: 0 1.25rem 1.15rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
  animation: faq-fade-in 320ms ease-out;
}

.faq-item-body p {
  margin: 0;
}

.faq-item-body p + p {
  margin-top: 0.6rem;
}

.faq-item-body ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.faq-item-body li + li {
  margin-top: 0.3rem;
}

@keyframes faq-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item-body {
    animation: none;
  }
}

.callout {
  margin-top: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-700);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--ink);
  color: #cbd5e1;
  padding: 2.5rem 0;
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--brand-300);
}

.site-footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ============================================================
   State-of-the-art UI layer: theme toggle, scroll progress,
   active-section nav, smooth theme transitions, and a full
   dark theme. Everything below is additive — the light theme
   above is unchanged.
   ============================================================ */

/* ---------------- Theme toggle button ---------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--brand-300);
  background: var(--card);
  color: var(--brand-700);
  cursor: pointer;
  flex: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--brand-500);
  color: var(--brand-900);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { fill: currentColor; stroke: none; }

/* The theme toggle now lives inline in .header-actions, so the header
   actions (Data, dark/light toggle, hamburger) sit flush to the right edge
   with the normal container gutter. */
@media (max-width: 760px) {
  .site-header .container { position: relative; padding-right: 1rem; }
}

/* ---------------- Scroll progress indicator ---------------- */

.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500), var(--brand-300));
  z-index: 2;
  will-change: transform;
}

/* ---------------- Active-section nav highlight ---------------- */

.site-nav a {
  position: relative;
  transition: color 160ms ease-out;
}

.site-nav a:not(.nav-cta).is-active {
  color: var(--brand-700);
}

.site-nav a:not(.nav-cta).is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-500);
}

/* ---------------- Smooth theme transitions ---------------- */

body {
  transition: background-color 350ms ease, color 350ms ease;
}

.site-header,
.section--alt,
.hero,
.stat-card,
.donut-feature,
.donut-card,
.donut-other-list,
.cap-card,
.yoy-card,
.faq-item,
.faq-fact,
.calc-card,
.calc-result,
.calc-compare,
.breakdown-list,
.sankey-card,
.sankey-detail-inner,
.table-wrap,
.callout,
.hero-figure,
.filters input[type="search"],
.filters select,
.pill-toggle {
  transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease;
}

@media (prefers-reduced-motion: reduce) {
  body, .site-header, .section--alt, .hero, .stat-card, .donut-feature,
  .donut-card, .cap-card, .yoy-card, .faq-item, .faq-fact, .calc-card,
  .breakdown-list, .sankey-card, .table-wrap, .callout {
    transition: none;
  }
}

/* ---------------- Chart theme-safety ----------------
   Donut slice separators follow the surface color via CSS (not a
   render-time attribute) so they stay correct when the theme is
   toggled live. The categorical slice/flow colors are identical in
   both themes, so charts never need to be re-rendered. */

#revenue-donut path,
#spending-donut path {
  stroke: var(--card);
}

/* ============================================================
   DARK THEME
   ============================================================ */

[data-theme="dark"] {
  --ink: #e6edf6;
  --ink-soft: #9fb0c6;
  --ink-faint: #74859c;
  --paper: #0b1220;
  --card: #141d30;
  --line: #25324a;

  --good: #4ade80;
  --good-bg: rgba(34, 197, 94, 0.14);

  --bg-soft: #1c2740;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* Surfaces that were hardcoded white / light in the base styles */
[data-theme="dark"] .site-header {
  background: linear-gradient(180deg, rgba(20, 29, 48, 0.92), rgba(11, 18, 32, 0.9));
  border-bottom-color: var(--brand-700);
}

[data-theme="dark"] .hero {
  background: linear-gradient(180deg, #0e1a31 0%, var(--paper) 100%);
  border-bottom-color: var(--line);
}

[data-theme="dark"] .section--alt {
  background: #0f1729;
  border-color: var(--line);
}

[data-theme="dark"] .filters input[type="search"],
[data-theme="dark"] .filters select {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] .pill-toggle {
  background: var(--card);
}

[data-theme="dark"] .hero-chips li {
  background: var(--card);
  border-color: var(--line);
  color: var(--brand-300);
}

/* Light-fill accent backgrounds become translucent on dark */
[data-theme="dark"] .calc-result {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.25);
}

[data-theme="dark"] .jump-nav a {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.25);
  color: var(--brand-300);
}

[data-theme="dark"] .jump-nav a:hover {
  background: var(--brand-700);
  color: #fff;
}

[data-theme="dark"] tbody tr.row-total {
  background: rgba(56, 189, 248, 0.1);
}

[data-theme="dark"] .group-header-row td {
  background: rgba(56, 189, 248, 0.12) !important;
  color: var(--brand-300);
}

[data-theme="dark"] .btn-secondary {
  background: rgba(56, 189, 248, 0.12);
  color: var(--brand-300);
  border-color: transparent;
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: transparent;
}

[data-theme="dark"] .gloss-btn {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--brand-300);
}

[data-theme="dark"] .gloss-btn:hover,
[data-theme="dark"] .gloss-btn:focus {
  background: var(--brand-700);
  color: #fff;
}

/* Accent text that was deep-blue needs to brighten on dark */
[data-theme="dark"] a,
[data-theme="dark"] .hero .eyebrow,
[data-theme="dark"] .section-head .eyebrow,
[data-theme="dark"] .donut-card-amount,
[data-theme="dark"] .sankey-detail-inner .detail-amount,
[data-theme="dark"] .calc-result-label,
[data-theme="dark"] .calc-formula summary,
[data-theme="dark"] .calc-compare-label strong,
[data-theme="dark"] .cap-card .cap-label,
[data-theme="dark"] .cap-bar-pct,
[data-theme="dark"] .is-up,
[data-theme="dark"] .yoy-card-badge.is-up,
[data-theme="dark"] .site-nav a:hover,
[data-theme="dark"] .site-nav a:not(.nav-cta).is-active,
[data-theme="dark"] .faq-item summary:hover {
  color: var(--brand-300);
}

[data-theme="dark"] .yoy-card-badge.is-up {
  background: rgba(74, 222, 128, 0.16);
  color: #86efac;
}

[data-theme="dark"] .yoy-card-badge.is-down,
[data-theme="dark"] .is-down {
  color: #fdba74;
}

[data-theme="dark"] .yoy-card-badge.is-down {
  background: rgba(253, 186, 116, 0.16);
}

/* Big display numbers that used near-black brand-900 */
[data-theme="dark"] .hero-figure-value,
[data-theme="dark"] .calc-result-value {
  color: #bae6fd;
}

[data-theme="dark"] .theme-toggle {
  background: var(--card);
  border-color: var(--line);
  color: var(--brand-300);
}

[data-theme="dark"] .theme-toggle:hover {
  color: #fff;
  border-color: var(--brand-500);
}

/* Dark popovers/tooltips (base used --ink as background, which is now light) */
[data-theme="dark"] .gloss-popover,
[data-theme="dark"] .sankey-tooltip {
  background: #1f2a40;
  color: var(--ink);
  border: 1px solid var(--line);
}

[data-theme="dark"] .donut-popover {
  box-shadow: var(--shadow-pop);
}

/* Sankey node outlines read better as a faint light stroke on dark */
[data-theme="dark"] .sankey-node rect {
  stroke: rgba(255, 255, 255, 0.18);
}

/* Badges: keep the within-cap badge themed; the excluded amber badge is
   self-contained and legible on either theme. */
[data-theme="dark"] .cap-card .cap-value {
  color: #86efac;
}

/* ============================================================
   3D STAGE — the interactive WebGL centerpiece
   Always cinematic/dark regardless of the page theme.
   ============================================================ */

.stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: min(88vh, 920px);
  min-height: 580px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #102243 0%, #0a1530 45%, #060b18 100%);
  border-top: 1px solid rgba(56, 189, 248, 0.18);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  isolation: isolate;
}

#budget-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}

/* Soft vignette + faint scanline grain for a "render" feel */
.stage-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 35%, transparent 55%, rgba(3, 7, 18, 0.55) 100%);
  mix-blend-mode: multiply;
}

.stage-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.stage-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.12rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f1f5f9;
  background: rgba(8, 15, 30, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-left-width: 3px;
  border-radius: 6px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
  transition: opacity 200ms ease;
  will-change: transform, opacity;
}

.stage-label.is-active {
  background: rgba(8, 15, 30, 0.92);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.stage-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Soft scrim anchoring the overlay text over the bright scene */
.stage-ui::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(5, 10, 22, 0.78) 0%, rgba(5, 10, 22, 0.32) 36%, transparent 60%);
}

@media (max-width: 760px) {
  .stage-ui::before {
    background: linear-gradient(180deg, rgba(5, 10, 22, 0.82) 0%, rgba(5, 10, 22, 0.3) 42%, transparent 62%);
  }
}

.stage-head {
  pointer-events: none;
  max-width: 38ch;
}

.stage-eyebrow {
  display: inline-block;
  pointer-events: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7dd3fc;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  background: rgba(8, 15, 30, 0.45);
  backdrop-filter: blur(6px);
}

.stage-head h2 {
  color: #f8fafc;
  margin: 0.9rem 0 0.5rem;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.stage-head p {
  color: #c5d3e6;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

.stage-head strong { color: #e8f3ff; }

.stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  pointer-events: auto;
}

.stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #e8f3ff;
  text-decoration: none;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(12, 22, 42, 0.55);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.stage-btn:hover {
  background: rgba(30, 58, 99, 0.7);
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}

.stage-btn-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.stage-btn[aria-pressed="false"] .stage-btn-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.stage-btn--ghost { background: transparent; }

.stage-legend {
  align-self: end;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: min(760px, 100%);
  pointer-events: auto;
}

.stage-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #d7e2f2;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(8, 15, 30, 0.5);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.stage-legend-item:hover,
.stage-legend-item.is-active {
  background: rgba(30, 58, 99, 0.75);
  border-color: rgba(56, 189, 248, 0.55);
  transform: translateY(-1px);
}

.stage-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

/* Floating tooltip following the pointer */
.stage-tooltip {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 16px));
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 180px;
  max-width: 280px;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgba(9, 16, 32, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  color: #f1f5f9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease;
}

.stage-tooltip.visible { opacity: 1; }

.stage-tooltip .t3d-swatch {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  margin-bottom: 0.2rem;
}

.stage-tooltip .t3d-name { font-weight: 700; font-size: 0.92rem; }
.stage-tooltip .t3d-amount {
  font-size: 0.78rem;
  color: #9fb6d4;
  font-variant-numeric: tabular-nums;
}

/* Right-side detail panel */
.stage-panel {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 3vw, 2.4rem);
  transform: translateY(-50%) translateX(20px);
  width: min(340px, calc(100% - 2rem));
  max-height: 80%;
  overflow-y: auto;
  z-index: 6;
  padding: 1.3rem 1.4rem;
  border-radius: 16px;
  background: rgba(9, 16, 32, 0.86);
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  color: #e8f0fb;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.stage-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.stage-panel-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.stage-panel-close:hover { background: rgba(148, 163, 184, 0.3); color: #fff; }

.stage-panel-eyebrow {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: #0a1020;
}

.stage-panel h3 {
  color: #f8fafc;
  margin: 0.7rem 0 0.2rem;
  font-size: 1.25rem;
}

.stage-panel-amount {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0.1rem 0 0.1rem;
}

.stage-panel-sub {
  font-size: 0.8rem;
  color: #93a7c4;
  margin-bottom: 0.8rem;
}

.stage-panel p.stage-panel-blurb {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #c5d3e6;
  margin: 0 0 0.9rem;
}

.stage-panel-bd-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7e93b3;
  margin-bottom: 0.4rem;
}

.stage-bd-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.stage-bd-row span:last-child {
  color: #9fb6d4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stage-fallback {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: #c5d3e6;
}
.stage-fallback[hidden] { display: none; }
.stage-fallback p { max-width: 40ch; font-size: 1rem; }

@media (max-width: 760px) {
  .stage {
    height: 78vh;
    min-height: 520px;
  }
  .stage-head { max-width: 100%; }
  .stage-legend {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 0.3rem;
    -webkit-overflow-scrolling: touch;
  }
  .stage-legend-item { white-space: nowrap; }
  .stage-panel {
    top: auto;
    bottom: 0.8rem;
    right: 0.8rem;
    left: 0.8rem;
    width: auto;
    transform: translateY(20px);
    max-height: 56%;
  }
  .stage-panel.is-open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stage-btn-dot { box-shadow: none; }
}

/* ---- 3D stage: view-mode switcher + tour button ---- */
.stage-modes {
  display: inline-flex;
  gap: 0.25rem;
  margin: 0 0 0.7rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(8, 15, 30, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.stage-mode {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #c5d3e6;
  border: none;
  background: transparent;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease;
}

.stage-mode:hover { color: #fff; }

.stage-mode.is-active {
  color: #04121f;
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35);
}

.stage-btn--accent {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.9));
  border-color: transparent;
  color: #04121f;
  font-weight: 700;
}
.stage-btn--accent:hover {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  border-color: transparent;
}
.stage-btn--accent.is-touring {
  background: rgba(12, 22, 42, 0.7);
  color: #e8f3ff;
  border: 1px solid rgba(245, 158, 11, 0.6);
}
.stage-tour-icon { font-size: 0.7rem; }
.stage-btn--accent.is-touring .stage-tour-icon { display: none; }

@media (max-width: 760px) {
  .stage-modes { width: 100%; overflow-x: auto; }
}

/* ============================================================
   PREMIUM LAYER — cohesive product polish across the whole page.
   Additive; sits on top of the base + theme styles above.
   ============================================================ */

/* ---- Scroll-reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Ambient page background ---- */
[data-theme="dark"] body {
  background:
    radial-gradient(58% 48% at 10% -6%, rgba(56, 189, 248, 0.1), transparent 60%),
    radial-gradient(52% 46% at 96% 4%, rgba(139, 92, 246, 0.1), transparent 56%),
    var(--paper);
  background-attachment: fixed;
}
body {
  background:
    radial-gradient(60% 50% at 8% -8%, rgba(14, 165, 233, 0.06), transparent 58%),
    var(--paper);
  background-attachment: fixed;
}

/* ---- Section rhythm ---- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }

.section-head .eyebrow,
.hero .eyebrow {
  position: relative;
  padding-left: 2.4rem;
}
.section-head .eyebrow::before,
.hero .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.9rem;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-500), transparent);
}

/* ---- Premium cards: hairline + hover lift + glow ---- */
.stat-card,
.donut-feature,
.yoy-card,
.cap-card,
.faq-fact,
.calc-card,
.breakdown-list,
.sankey-card,
.faq-item {
  position: relative;
  overflow: hidden;
}

.stat-card::after,
.donut-feature::after,
.cap-card::after,
.calc-card::after,
.breakdown-list::after,
.sankey-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.55), transparent);
  opacity: 0.7;
}

.stat-card,
.donut-feature,
.yoy-card,
.cap-card,
.faq-fact {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease,
    box-shadow 280ms ease, background-color 350ms ease;
}

.stat-card:hover,
.donut-feature:hover,
.yoy-card:hover,
.cap-card:hover,
.faq-fact:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 18px 44px rgba(2, 8, 20, 0.5);
}

/* (Surface fills are unified by the glass design system at the end of this
   file, which uses the --glass-* tokens for both themes.) */

/* ---- Hero: cinematic depth ---- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 78% 30%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(36% 50% at 14% 90%, rgba(139, 92, 246, 0.12), transparent 60%);
}
.hero .container { position: relative; z-index: 1; }

.hero-figure {
  box-shadow: 0 18px 50px rgba(2, 8, 20, 0.45);
}

/* Hero panel: animated sheen */
.hero-panel::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.06) 40deg, transparent 90deg);
  animation: hero-sheen 14s linear infinite;
  pointer-events: none;
}
@keyframes hero-sheen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-panel::after { animation: none; } }

/* ---- Gradient primary buttons ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-300), var(--brand-500));
  border-color: transparent;
  transform: translateY(-1px);
}

/* ---- Headline feature card glow ---- */
.stat-feature {
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(3, 105, 161, 0.35);
}
.stat-feature::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -60px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}

/* ---- Section divider glow between major sections ---- */
.section--alt {
  position: relative;
}
[data-theme="dark"] .section--alt::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
}

/* ---- Footer polish ---- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #060b18, #0a1326);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500), var(--brand-300));
}

/* ============================================================
   GLASS · INSTITUTIONAL DESIGN SYSTEM
   Premium, accessible glassmorphism applied across every
   section and chart frame. Appended last so it unifies the
   surfaces defined above. Works in both themes via --glass-*.
   ============================================================ */

:root {
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-bg-2: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(15, 23, 42, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
  --glass-blur: 14px;
  --kicker: var(--brand-700);
}

[data-theme="dark"] {
  --glass-bg: rgba(20, 30, 50, 0.55);
  --glass-bg-2: rgba(23, 33, 55, 0.82);
  --glass-border: rgba(150, 180, 225, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 20px 50px rgba(2, 8, 20, 0.55);
  --glass-blur: 16px;
  --kicker: var(--brand-300);
}

/* ---- Unified glass panels ---- */
.stat-card,
.donut-feature,
.yoy-card,
.cap-card,
.faq-fact,
.faq-item,
.calc-card,
.breakdown-list,
.sankey-card,
.table-wrap,
.callout,
.hero-figure,
.donut-other-list {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
}

.callout { border-radius: var(--radius-md); }

/* Keep the existing cyan top-hairline accents, but the inset edge above
   already provides the glass highlight, so soften the duplicate. */
.stat-card::after,
.donut-feature::after,
.cap-card::after,
.calc-card::after,
.breakdown-list::after,
.sankey-card::after {
  opacity: 0.35;
}

/* ---- Institutional numbered section headers ---- */
body { counter-reset: section; }
.section-head { counter-increment: section; }

.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-left: 0;
}
.section-head .eyebrow::before {
  content: counter(section, decimal-leading-zero);
  position: static;
  transform: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.85rem;
  width: auto;
  height: 1.85rem;
  padding: 0 0.4rem;
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--kicker);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ---- Source / caption chips (institutional "provenance") ---- */
.source-tag,
.donut-feature .source-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}
.source-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-500);
  flex: none;
}

/* ---- Chart frames: unified header for the donut features ---- */
.donut-feature h3,
.sankey-card + .container .sankey-hint {
  letter-spacing: -0.01em;
}

/* ---- Accessible focus ring (whole site) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   SIMPLER 3D STAGE CONTROLS
   A compact segmented view switcher + a 3-icon glass toolbar,
   replacing the previous cluster of text buttons.
   ============================================================ */
.stage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}

.stage-modes {
  margin: 0;
  pointer-events: auto;
}

.stage-tools {
  display: inline-flex;
  gap: 0.4rem;
  pointer-events: auto;
}

.stage-tool {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(8, 15, 30, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e8f3ff;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}
.stage-tool:hover {
  background: rgba(30, 58, 99, 0.72);
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}
.stage-tool svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stage-tool .ic-play,
.stage-tool .ic-stop {
  fill: currentColor;
  stroke: none;
}

/* Tour button is the primary action — accent it. */
#stage-tour {
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.95), rgba(14, 165, 233, 0.95));
  border-color: transparent;
  color: #04121f;
}
#stage-tour:hover {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}
#stage-tour.is-touring {
  background: rgba(8, 15, 30, 0.6);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.7);
}

/* Icon toggles */
.stage-tool .ic-stop { display: none; }
#stage-tour.is-touring .ic-play { display: none; }
#stage-tour.is-touring .ic-stop { display: block; }
#stage-rotate .ic-rotate { display: none; }
#stage-rotate.is-paused .ic-pause { display: none; }
#stage-rotate.is-paused .ic-rotate { display: block; }
#stage-rotate.is-paused { color: #fbbf24; border-color: rgba(251, 191, 36, 0.5); }

/* ============================================================
   DATA PAGE — glass toolbar + table
   ============================================================ */
.filters {
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.filters input[type="search"],
.filters select {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}
.jump-nav a {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pill-toggle {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
thead th {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---- Footer: institutional ---- */
.site-footer {
  border-top: 1px solid var(--glass-border);
}
.site-footer strong {
  letter-spacing: 0.01em;
}

/* ============================================================
   DEPTH + GLASS v2
   The frosted-glass look only reads if there's a rich, colorful
   field behind the panels to blur. This adds a fixed gradient
   "aurora" field + subtle grid + film grain, makes section
   backgrounds translucent so that field shows through, and
   re-specs the panels as real frosted glass with a lit rim.
   ============================================================ */

/* ---- Refined blue palette ---- (light defaults first, dark second) */
:root {
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-2: rgba(255, 255, 255, 0.74);
  --glass-rim: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-blur: 16px;
  --glass-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

[data-theme="dark"] {
  --ink: #eaf1fb;
  --ink-soft: #a7b8d4;
  --ink-faint: #6f82a3;
  --paper: #070c18;
  --line: #223352;

  --glass-bg: rgba(13, 23, 44, 0.62);
  --glass-bg-2: rgba(19, 30, 54, 0.74);
  --glass-border: rgba(168, 200, 250, 0.2);
  --glass-rim: rgba(190, 216, 255, 0.5);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-blur: 22px;
  --glass-shadow: 0 26px 64px rgba(2, 7, 20, 0.6);
}

/* ---- The fixed color field (the thing the glass blurs) ---- */
[data-theme="dark"] body { background: #060a14; }
body { background: #e9eef7; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 14% 6%, rgba(56, 189, 248, 0.24), transparent 60%),
    radial-gradient(40% 50% at 88% 3%, rgba(99, 102, 241, 0.22), transparent 58%),
    radial-gradient(46% 56% at 82% 84%, rgba(13, 148, 200, 0.20), transparent 60%),
    radial-gradient(42% 52% at 4% 90%, rgba(45, 212, 191, 0.13), transparent 58%),
    radial-gradient(75% 80% at 50% 45%, rgba(10, 18, 38, 0.0), rgba(3, 7, 16, 0.7) 100%);
}
[data-theme="light"] body::before {
  opacity: 0.55;
}

/* Grid + film grain to add structure and kill banding */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    linear-gradient(rgba(150, 185, 240, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 185, 240, 0.05) 1px, transparent 1px);
  background-size: 180px 180px, 48px 48px, 48px 48px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 92%);
  mask-image: radial-gradient(120% 90% at 50% 20%, #000 35%, transparent 92%);
}
[data-theme="dark"] body::after { opacity: 0.45; }

/* ---- Let the field show through the page ---- */
[data-theme="dark"] .section--alt {
  background: linear-gradient(180deg, rgba(120, 160, 225, 0.05), rgba(120, 160, 225, 0.02));
  border-top-color: var(--glass-border);
  border-bottom-color: var(--glass-border);
}
.section--alt {
  background: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .hero {
  background: linear-gradient(180deg, rgba(14, 26, 49, 0.6) 0%, rgba(6, 10, 20, 0.2) 100%);
}

/* ---- Real frosted-glass panels: translucent fill + lit rim ---- */
.stat-card,
.donut-feature,
.yoy-card,
.cap-card,
.faq-fact,
.faq-item,
.calc-card,
.breakdown-list,
.sankey-card,
.table-wrap,
.callout,
.hero-figure,
.donut-other-list,
.filters {
  background:
    linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
    linear-gradient(150deg, var(--glass-rim), rgba(255, 255, 255, 0) 46%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
}
.callout,
.filters { border-radius: var(--radius-md); }

/* Drop the older duplicate cyan top-hairline; the rim handles the edge now */
.stat-card::after,
.donut-feature::after,
.cap-card::after,
.calc-card::after,
.breakdown-list::after,
.sankey-card::after {
  display: none;
}

/* Sankey full-bleed band: translucent so the field shows behind it */
[data-theme="dark"] .sankey-card--full {
  background: rgba(14, 24, 46, 0.4);
}

/* Numbered kicker chip + source chips share the frosted look */
.section-head .eyebrow::before,
.source-tag {
  background: var(--glass-bg-2);
}

/* ============================================================
   CLEAN MODERN FINISH  (overrides the heavy glass experiments)
   Calm background, readable near-solid panels, crisp borders,
   high-contrast text. Glass becomes a subtle accent, not a fog.
   ============================================================ */

/* Remove the film-grain / grid overlay that read as dated + muddy. */
body::after { display: none !important; }

/* Calm, restrained background. */
[data-theme="dark"] body { background: #0a0f1b; }
body { background: #eef2f8; }
body::before {
  z-index: -2;
  opacity: 1;
  background:
    radial-gradient(72% 48% at 50% -12%, rgba(56, 189, 248, 0.1), transparent 62%),
    radial-gradient(48% 40% at 92% 6%, rgba(99, 102, 241, 0.08), transparent 60%),
    radial-gradient(46% 42% at 6% 96%, rgba(45, 212, 191, 0.06), transparent 60%);
}
[data-theme="light"] body::before { opacity: 0.6; }

/* Higher-contrast text. */
:root {
  --panel: rgba(255, 255, 255, 0.92);
  --panel-border: rgba(15, 23, 42, 0.1);
  --panel-hover: rgba(14, 165, 233, 0.45);
}
[data-theme="dark"] {
  --ink: #eef3fb;
  --ink-soft: #aebcd6;
  --ink-faint: #7587a6;
  --panel: rgba(17, 25, 43, 0.88);
  --panel-border: rgba(162, 188, 230, 0.16);
  --panel-hover: rgba(120, 170, 240, 0.4);
}

/* Readable panels: near-solid surface, crisp border, light frost, soft lift. */
.stat-card,
.donut-feature,
.yoy-card,
.cap-card,
.faq-fact,
.faq-item,
.calc-card,
.breakdown-list,
.sankey-card,
.table-wrap,
.callout,
.hero-figure,
.donut-other-list,
.filters {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26) !important;
}

.stat-card:hover,
.donut-feature:hover,
.yoy-card:hover,
.cap-card:hover,
.faq-fact:hover {
  border-color: var(--panel-hover) !important;
}

/* Calm section + hero + Sankey backgrounds (no bright wash behind panels). */
[data-theme="dark"] .section--alt {
  background: rgba(255, 255, 255, 0.022);
  border-top-color: var(--panel-border);
  border-bottom-color: var(--panel-border);
}
.section--alt { background: rgba(255, 255, 255, 0.55); }

[data-theme="dark"] .hero {
  background: linear-gradient(180deg, rgba(16, 27, 50, 0.72) 0%, rgba(10, 15, 27, 0) 100%);
}
[data-theme="dark"] .sankey-card--full { background: rgba(15, 22, 40, 0.55) !important; }

/* Solid, readable chips. */
.section-head .eyebrow::before,
.source-tag { background: rgba(255, 255, 255, 0.04); }
[data-theme="light"] .section-head .eyebrow::before,
[data-theme="light"] .source-tag { background: rgba(15, 23, 42, 0.04); }

thead th { background: var(--panel) !important; }

/* ============================================================
   WWF · MODERN INSTITUTIONAL  (light default, blue, airy)
   Clean solid cards (pinpoint-style), bold-sans headings with
   italic-serif accents, West Windsor Forward blue. This is the
   final authoritative layer.
   ============================================================ */

/* ---- Surface tokens (light first, then dark overrides) ---- */
:root {
  --panel: #ffffff;
  --panel-border: rgba(12, 74, 110, 0.12);
  --panel-hover: rgba(3, 105, 161, 0.4);
}
[data-theme="dark"] {
  --ink: #eaf1fb;
  --ink-soft: #a6b6d2;
  --ink-faint: #6f81a1;
  --paper: #0c1526;
  --card: #18223b;
  --line: #26324c;
  --panel: #17213a;
  --panel-border: rgba(125, 211, 252, 0.14);
  --panel-hover: rgba(125, 211, 252, 0.45);
}

/* ---- Calm, light background (no grain, no heavy field) ---- */
body::after { display: none !important; }
body { background: #eef3fa; }
[data-theme="dark"] body { background: #0a1322; }
body::before {
  z-index: -2;
  opacity: 1 !important;
  background:
    radial-gradient(60% 42% at 50% -12%, rgba(14, 165, 233, 0.12), transparent 62%),
    radial-gradient(46% 38% at 92% 2%, rgba(3, 105, 161, 0.08), transparent 60%) !important;
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(64% 46% at 50% -10%, rgba(14, 165, 233, 0.14), transparent 60%),
    radial-gradient(46% 40% at 90% 4%, rgba(99, 102, 241, 0.1), transparent 60%) !important;
}

/* ---- Clean solid cards (no frost) ---- */
.stat-card,
.donut-feature,
.yoy-card,
.cap-card,
.faq-fact,
.faq-item,
.calc-card,
.breakdown-list,
.sankey-card,
.table-wrap,
.callout,
.hero-figure,
.donut-other-list,
.filters {
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 16px;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(12, 74, 110, 0.05), 0 14px 32px rgba(12, 74, 110, 0.08) !important;
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .donut-feature,
[data-theme="dark"] .yoy-card,
[data-theme="dark"] .cap-card,
[data-theme="dark"] .faq-fact,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .calc-card,
[data-theme="dark"] .breakdown-list,
[data-theme="dark"] .sankey-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .callout,
[data-theme="dark"] .hero-figure,
[data-theme="dark"] .donut-other-list,
[data-theme="dark"] .filters {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

/* ---- Light, clean header ---- */
[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--panel-border);
}
[data-theme="dark"] .site-header {
  background: rgba(12, 21, 38, 0.86);
  border-bottom: 1px solid var(--panel-border);
}

/* ---- Sections: crisp alternating ---- */
.section--alt { background: #ffffff !important; border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); }
[data-theme="dark"] .section--alt { background: rgba(255, 255, 255, 0.025) !important; }
[data-theme="dark"] .section--alt::before { display: none; }

/* ---- Typography: institutional serif headings + Inter body ----
   Lora only loads up to 700, and serif headings want near-normal tracking
   (the tight negative tracking was tuned for the old sans display face). */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; }
h1 { font-weight: 700; line-height: 1.08; }
h2 { font-weight: 700; }
.serif-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--brand-500);
}
.donut-center-value, .stat-feature-value, .hero-figure-value, .cap-value,
.yoy-total-amount, .calc-result-value {
  font-family: var(--font-display);
}

/* ---- Eyebrows: clean uppercase blue (no number chip) ---- */
.section-head .eyebrow::before { display: none !important; }
.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0 !important;
  padding-left: 0 !important;
  color: var(--brand-700);
  font-weight: 700;
  letter-spacing: 0.16em;
}
[data-theme="dark"] .section-head .eyebrow { color: var(--brand-300); }

/* Hero eyebrow as a pinpoint-style pill with a dot */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem !important;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand-700);
  box-shadow: 0 2px 10px rgba(12, 74, 110, 0.06);
}
.hero .eyebrow::before {
  content: "" !important;
  position: static !important;
  transform: none !important;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
[data-theme="dark"] .hero .eyebrow { color: var(--brand-300); }

/* ---- Primary button: solid WWF blue ---- */
.btn-primary {
  background: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
  box-shadow: 0 10px 24px rgba(3, 105, 161, 0.26) !important;
}
.btn-primary:hover { background: var(--brand-900) !important; }

/* ---- Source/kicker chips ---- */
.source-tag { background: var(--panel) !important; border-color: var(--panel-border) !important; color: var(--ink-soft); }
thead th { background: var(--panel) !important; }

/* ---- Lighten the dark hero too ---- */
[data-theme="dark"] .hero {
  background: linear-gradient(180deg, rgba(23, 38, 70, 0.6) 0%, rgba(10, 19, 34, 0) 100%);
}

/* ============================================================
   FINISH: blue-led chart palette, stage blend, tighter rhythm
   ============================================================ */

/* ---- Curated blue-led categorical palette (institutional) ----
   The largest functional groups resolve to cohesive blues/teals;
   only small categories use a warm/violet accent. */
:root {
  --grp-1: #0c4a6e;  /* General Government — navy */
  --grp-2: #38bdf8;  /* Shared Services — light sky */
  --grp-3: #0ea5e9;  /* Public Works — sky */
  --grp-4: #06b6d4;  /* Health — cyan */
  --grp-5: #22d3ee;  /* Recreation — bright cyan */
  --grp-6: #0891b2;  /* Pensions — deep cyan */
  --grp-7: #0d9488;  /* Insurance — teal */
  --grp-8: #f59e0b;  /* Capital — amber accent */
  --grp-9: #1d4ed8;  /* Public Safety (largest) — strong blue */
  --grp-10: #7c3aed; /* Grants — violet accent */
  --grp-11: #2dd4bf; /* Land Use — teal-green */
  --grp-12: #4f46e5; /* Debt Service — indigo */
  --grp-13: #64748b; /* Reserve — slate */
}

/* ---- Stage: lighter blue scene that blends into the page ---- */
:root { --stage-fade: #eef3fa; }
[data-theme="dark"] { --stage-fade: #0a1322; }

.stage {
  background: linear-gradient(180deg, #3c618f 0%, #20396188 40%, #16294a 100%) !important;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--stage-fade) 0%,
    rgba(0, 0, 0, 0) 13%,
    rgba(0, 0, 0, 0) 87%,
    var(--stage-fade) 100%
  );
}

/* ---- Tighter, more generous type rhythm ---- */
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.hero h1 { max-width: 17ch; margin-bottom: 1.1rem; }
.section-head { margin-bottom: 2.6rem; max-width: 64ch; }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 0.7rem; }
.section-head .eyebrow { margin-bottom: 0.9rem; }
.section-intro { font-size: 1.05rem; line-height: 1.65; }

/* ============================================================
   LAYOUT v2 — centered header, 2D/3D toggle, tighter rhythm,
   better use of width, and mobile polish.
   ============================================================ */

:root { --container: 1240px; }

/* ---- Centered 3-part header ---- */
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.site-header .brand { justify-self: start; }
.site-header .site-nav {
  justify-self: center;
  flex-wrap: nowrap;
  gap: 1.5rem;
}
.header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

/* ---- 2D / 3D view toggle ---- */
.view-toggle {
  display: inline-flex;
  gap: 0.3rem;
  margin-top: 1.3rem;
  padding: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(12, 74, 110, 0.08);
}
.view-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: none;
  background: transparent;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.view-opt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.view-opt:hover { color: var(--ink); }
.view-opt.is-active {
  background: var(--brand-700);
  color: #fff;
  box-shadow: 0 6px 16px rgba(3, 105, 161, 0.3);
}

.viz-2d[hidden], .viz-3d[hidden] { display: none; }
.viz-2d .donut-grid { margin-top: 0.5rem; }
.viz-3d .stage { margin-top: 1.6rem; }
.viz-3d .stage { height: min(82vh, 820px); }

/* ---- Tighter vertical rhythm (less dead space) ---- */
.section { padding: clamp(2.25rem, 4.5vw, 3.75rem) 0; }
.section-head { margin-bottom: 1.9rem; }
.donut-grid { margin-top: 1rem; gap: 1.25rem; }

/* ---- Use the horizontal space: FAQ in two columns on wide screens ---- */
@media (min-width: 940px) {
  .faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    align-items: start;
  }
}

/* ---- Mobile polish ---- */
@media (max-width: 820px) {
  .site-header .container {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions" "nav nav";
    gap: 0.5rem 0.75rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .site-header .brand { grid-area: brand; }
  .header-actions { grid-area: actions; justify-self: end; }
  .site-header .site-nav {
    grid-area: nav;
    justify-self: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1.1rem;
    padding-bottom: 0.15rem;
  }
  /* Theme toggle now lives in header-actions, so undo the old absolute pin. */
  .theme-toggle { position: static !important; }
}

@media (max-width: 640px) {
  .section { padding: 1.9rem 0; }
  .section-head { margin-bottom: 1.4rem; }
  .view-toggle { width: 100%; }
  .view-opt { flex: 1; justify-content: center; }
  .viz-3d .stage { height: 72vh; min-height: 460px; }
  .donut-grid { gap: 1rem; }
  .stats-grid { gap: 1rem; }
}

/* ---- Explore: three panels (Charts / Flow / 3D) ---- */
.viz-2d[hidden], .viz-flow[hidden], .viz-3d[hidden] { display: none; }
.viz-flow-intro { max-width: 72ch; margin: 0 0 1rem; }
.viz-flow .sankey-card--full { margin-top: 0.25rem; }

/* ============================================================
   HEADER POLISH + RANKED BARS + SPACING (premium pass)
   ============================================================ */

/* ---- Premium sticky header with a refined scrolled state ---- */
.site-header {
  transition: background 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.site-header .container { transition: padding 250ms ease; }
[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.72); }
[data-theme="dark"] .site-header { background: rgba(10, 19, 34, 0.72); }
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(12, 74, 110, 0.1); }
[data-theme="light"] .site-header.is-scrolled { background: rgba(255, 255, 255, 0.94); }
[data-theme="dark"] .site-header.is-scrolled { background: rgba(10, 19, 34, 0.94); }
.site-header.is-scrolled .container { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.brand-text strong { letter-spacing: -0.01em; }

/* Animated underline for nav links (replaces the old offset underline) */
.site-nav a:not(.nav-cta) { padding: 0.25rem 0; }
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 200ms ease;
}
.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta).is-active::after { transform: scaleX(1); }

.header-actions .nav-cta {
  box-shadow: 0 6px 16px rgba(3, 105, 161, 0.22);
}

/* ---- Ranked horizontal bar chart (Largest spending) ---- */
.rankbars {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(12, 74, 110, 0.05), 0 14px 32px rgba(12, 74, 110, 0.08);
  padding: 0.4rem 1.4rem;
}
[data-theme="dark"] .rankbars { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3); }

.rankbar {
  display: grid;
  grid-template-columns: 1.6rem minmax(150px, 22%) 1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--panel-border);
}
.rankbar:last-child { border-bottom: none; }
.rankbar-rank {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rankbar-id { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.rankbar-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rankbar-group { font-size: 0.74rem; color: var(--ink-soft); display: inline-flex; align-items: center; }
.rankbar-track { height: 13px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rankbar-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
}
.rankbar-val {
  text-align: right;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.rankbar-pct { font-size: 0.72rem; font-weight: 500; color: var(--ink-faint); }

@media (max-width: 680px) {
  .rankbar {
    grid-template-columns: 1.4rem 1fr auto;
    grid-template-areas: "rank id val" "rank track track";
    gap: 0.3rem 0.8rem;
    row-gap: 0.45rem;
  }
  .rankbar-rank { grid-area: rank; align-self: start; padding-top: 0.15rem; }
  .rankbar-id { grid-area: id; }
  .rankbar-val { grid-area: val; }
  .rankbar-track { grid-area: track; }
  .rankbar-name { white-space: normal; }
}

/* ---- Spacing: consistent, less vertical dead-space ---- */
.section { padding: clamp(2rem, 3.6vw, 3.25rem) 0; }
.section-head { margin-bottom: 1.75rem; }
.yoy-grid { margin-top: 1rem; }
.caps-grid { gap: 1.1rem; }

/* ============================================================
   YoY DELTAS · DIVERGING CHANGE CHART · BENCHMARKS · MOBILE NAV
   ============================================================ */

/* ---- KPI tile year-over-year deltas ---- */
.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat-delta.is-up { color: var(--brand-700); }
.stat-delta.is-down { color: var(--teal); }
.stat-delta-ref { color: var(--ink-faint); font-weight: 500; }
.stat-feature-delta { margin-top: 0.4rem; }
.stat-feature-delta .stat-delta.is-up { color: #bae6fd; }
.stat-feature-delta .stat-delta.is-down { color: #99f6e4; }
.stat-feature-delta .stat-delta-ref { color: rgba(255, 255, 255, 0.65); }

/* ---- Diverging "what changed" chart ---- */
.yoy-grid {
  display: block;
  margin-top: 1.1rem;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(12, 74, 110, 0.05), 0 14px 32px rgba(12, 74, 110, 0.08);
  padding: 0.25rem 1.4rem 0.7rem;
}
[data-theme="dark"] .yoy-grid { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3); }

.diverge-head,
.diverge-row {
  display: grid;
  grid-template-columns: minmax(150px, 24%) 1fr minmax(86px, auto);
  gap: 1.1rem;
  align-items: center;
}
.diverge-head {
  padding: 0.7rem 0 0.55rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--panel-border);
}
.diverge-axislabel { display: flex; justify-content: space-between; }
.diverge-change-h { text-align: right; }
.diverge-row { padding: 0.55rem 0; border-bottom: 1px solid var(--panel-border); }
.diverge-row:last-child { border-bottom: none; }
.diverge-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.diverge-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diverge-track { position: relative; height: 18px; }
.diverge-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--panel-border); }
.diverge-fill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 0;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#changed.is-visible .diverge-fill { width: var(--w); }
/* Increase = blue, decrease = amber (a green/teal "down" reads as up). */
.diverge-fill.is-up { background: var(--brand-500); }
.diverge-fill.is-down { background: #f59e0b; }
.diverge-delta { text-align: right; font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; flex-direction: column; line-height: 1.2; }
.diverge-delta.is-up { color: var(--brand-700); }
.diverge-delta.is-down { color: #b45309; }
[data-theme="dark"] .diverge-delta.is-down { color: #fbbf24; }
.diverge-delta-pct { font-size: 0.72rem; font-weight: 500; color: var(--ink-faint); }

/* Make the one category that fell year-over-year clearly stand out. */
.diverge-row.is-down { background: rgba(245, 158, 11, 0.1); border-radius: 8px; }
[data-theme="dark"] .diverge-row.is-down { background: rgba(245, 158, 11, 0.15); }

@media (prefers-reduced-motion: reduce) { .diverge-fill { transition: none; } }

@media (max-width: 620px) {
  .diverge-head { display: none; }
  .diverge-row { grid-template-columns: 1fr auto; grid-template-areas: "name delta" "track track"; row-gap: 0.4rem; }
  .diverge-name { grid-area: name; }
  .diverge-delta { grid-area: delta; }
  .diverge-track { grid-area: track; }
}

/* ---- Calculator benchmarks ---- */
.calc-benchmarks { margin-top: 1rem; }
.calc-benchmarks-title { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.5rem; }
.calc-benchmarks-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.bench-row {
  display: grid;
  grid-template-columns: 5.4rem 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.32rem 0.5rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.bench-row.is-active { background: var(--brand-100); }
[data-theme="dark"] .bench-row.is-active { background: rgba(56, 189, 248, 0.13); }
.bench-home { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.bench-row.is-active .bench-home { color: var(--brand-700); font-weight: 700; }
[data-theme="dark"] .bench-row.is-active .bench-home { color: var(--brand-300); }
.bench-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bench-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand-300); }
.bench-row.is-active .bench-fill { background: var(--brand-500); }
.bench-tax { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.calc-benchmarks-note { font-size: 0.72rem; color: var(--ink-faint); margin: 0.5rem 0 0; }

/* ---- Hamburger + collapsible mobile nav ---- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 11px;
  background: var(--panel);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.2s ease; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .site-header .container {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions";
    gap: 0.5rem 0.75rem;
  }
  .site-header .brand { grid-area: brand; }
  .header-actions { grid-area: actions; justify-self: end; gap: 0.55rem; }
  .site-header .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    background: var(--panel);
    border-bottom: 1px solid var(--panel-border);
    box-shadow: 0 18px 36px rgba(12, 74, 110, 0.16);
    padding: 0.35rem 1.25rem 1rem;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .site-header.nav-open .site-nav { transform: none; opacity: 1; pointer-events: auto; }
  .site-header .site-nav a { padding: 0.8rem 0.2rem; font-size: 1rem; border-bottom: 1px solid var(--panel-border); white-space: normal; }
  .site-header .site-nav a:last-child { border-bottom: none; }
  .site-header .site-nav a:not(.nav-cta)::after { display: none; }
}

/* Compact brand on mobile so the header stays a single tidy row */
@media (max-width: 820px) {
  .brand-text span { display: none; }
  .brand-text strong { font-size: 0.95rem; white-space: nowrap; }
  .brand img { height: 30px; }
  .header-actions { gap: 0.5rem; }
  .header-actions .nav-cta { padding: 0.4rem 0.75rem; }
}
@media (max-width: 540px) {
  .brand-text { display: none; }
}

/* ============================================================
   PREMIUM POLISH PASS
   Legend "key" chips · YoY comparison · callout spacing · header
   ============================================================ */

/* ---- 1. Chart legend / key → premium pill chips ---------------- */
.legend {
  justify-content: center;
  gap: 0.55rem 0.6rem;
  margin-top: 1.4rem;
  font-size: 0.78rem;
}
.legend-item {
  gap: 0.55rem;
  padding: 0.42rem 0.9rem 0.42rem 0.65rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(12, 74, 110, 0.06);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}
.legend-item:hover {
  transform: translateY(-1px);
  color: var(--ink);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 7px 18px rgba(12, 74, 110, 0.13);
}
[data-theme="dark"] .legend-item:hover {
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.32);
}

/* ---- Unified color "key" swatches across the whole page ----
   The legend chips, donut cards, year-over-year rows and the 3D stage
   all share one swatch language: an 11px rounded square with a hairline
   ring + tiny lift, so every key on the page reads as the same system. */
.legend-swatch,
.donut-card-swatch,
.donut-other-swatch,
.donut-pop-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(8, 47, 73, 0.2);
}
.stage-legend-swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .legend-swatch,
[data-theme="dark"] .donut-card-swatch,
[data-theme="dark"] .donut-other-swatch,
[data-theme="dark"] .donut-pop-swatch {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---- 2. "What changed from 2025?" → single growth-bar comparison ---- */
.yoy-total-card {
  padding: 1.75rem 1.9rem 1.65rem;
  text-align: left;
  box-shadow: 0 18px 48px rgba(3, 105, 161, 0.32);
}
/* Hairline sheen along the top edge, matching the other premium cards. */
.yoy-total-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}
.yoy-total-card .yoy-total-label {
  display: block;
  color: rgba(255, 255, 255, 0.72);
}

.yoy-headline {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0.45rem 0 1.35rem;
}
.yoy-headline-amount {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.yoy-headline-year {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
.yoy-chip {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.yoy-chip.is-up { color: #dcfce7; background: rgba(34, 197, 94, 0.26); border-color: rgba(134, 239, 172, 0.45); }
.yoy-chip.is-down { color: #ffedd5; background: rgba(251, 146, 60, 0.26); border-color: rgba(253, 186, 116, 0.45); }

/* Stacked growth bar: base (prior year) + highlighted change segment. */
.yoy-growth-track {
  position: relative;
  display: flex;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.yoy-growth-base,
.yoy-growth-add {
  display: block;
  width: 0;
  height: 100%;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.yoy-growth-base {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px 0 0 999px;
}
.yoy-growth-add { border-radius: 0 999px 999px 0; }
.yoy-growth-add.is-up {
  background: linear-gradient(90deg, #4ade80, #22c55e);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.55);
}
.yoy-growth-add.is-down {
  background: repeating-linear-gradient(45deg, #fb923c, #fb923c 6px, #f59e0b 6px, #f59e0b 12px);
}
#changed.is-visible .yoy-growth-base,
#changed.is-visible .yoy-growth-add { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
  .yoy-growth-base, .yoy-growth-add { transition: none; }
}

.yoy-growth-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
}
.yoy-growth-keyitem { display: inline-flex; align-items: center; gap: 0.5rem; }
.yoy-growth-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: none; }
.yoy-growth-dot--base { background: rgba(255, 255, 255, 0.6); }
.yoy-growth-dot--change.is-up { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
.yoy-growth-dot--change.is-down { background: #fb923c; }

/* ---- 3. Pull the "full spreadsheet" callout up under its source --- */
/* The source chip closing #largest and this callout are two stacked
   sections; collapse the dead space so they read as one thought. */
#largest { padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
#data-tables-link { padding-top: clamp(0.75rem, 1.5vw, 1rem); }

/* ---- 4. Header: continued premium refinements ------------------ */
/* Richer brand accent rule. */
.top-bar {
  height: 5px;
  background: linear-gradient(90deg, var(--brand-900), var(--brand-700) 45%, var(--brand-500));
}
/* Logo gets a subtle framed, elevated treatment. */
.brand img {
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(8, 47, 73, 0.14);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}
.brand:hover img {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 16px rgba(8, 47, 73, 0.22);
}
.brand-text span { letter-spacing: 0.01em; color: var(--ink-soft); }
/* CTA: a self-contained solid button (this anchor lives outside
   .site-nav, so it sets its own color/shape). Dark gradient keeps the
   white label at a comfortable contrast ratio. */
.header-actions .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  border: 1px solid transparent;
  box-shadow: 0 6px 16px rgba(3, 105, 161, 0.24);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
.header-actions .nav-cta:hover { color: #fff; }
.header-actions .nav-cta::after {
  content: "\2192";
  transform: translateX(-2px);
  opacity: 0.85;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}
.header-actions .nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 22px rgba(3, 105, 161, 0.32);
}
.header-actions .nav-cta:hover::after { transform: translateX(2px); opacity: 1; }
/* Theme toggle aligned to the glass design system. */
.theme-toggle {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
.theme-toggle:hover {
  background: var(--glass-bg-2);
  box-shadow: 0 6px 16px rgba(12, 74, 110, 0.14);
}

/* ---- 5. "Other spending" long-tail → balanced, space-filling grid ----
   The remaining spending categories were a single tall column that wasted
   the horizontal room beside the donut. Lay them out as compact, equal
   mini-rows that flow into as many columns as the width allows. */
.donut-other-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.donut-other-row {
  gap: 0.55rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.donut-other-row:hover,
.donut-other-row:focus-visible,
.donut-other-row.is-highlighted {
  background: var(--paper);
  border-color: var(--brand-500);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
[data-theme="dark"] .donut-other-row:hover,
[data-theme="dark"] .donut-other-row:focus-visible,
[data-theme="dark"] .donut-other-row.is-highlighted {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.donut-other-label {
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.25;
}
.donut-other-amount {
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- 6. Long-tail spending → full-width band below the two donuts ----
   Pulling the smaller categories out of the spending card keeps the two
   donut cards close in height (no more tall empty area beside revenue)
   and lets the tail use the full width in tidy, even rows. */
.donut-tail {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.donut-tail-title {
  margin: 0 0 0.85rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.donut-tail .donut-other-list {
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1040px) {
  .donut-tail .donut-other-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .donut-tail .donut-other-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .donut-tail .donut-other-list { grid-template-columns: 1fr; }
}

/* ============================================================
   BUDGET REFERENCE-DESK CHAT (floating assistant)
   ============================================================ */
.wwf-chat { position: fixed; right: clamp(0.9rem, 2vw, 1.6rem); bottom: clamp(0.9rem, 2vw, 1.6rem); z-index: 120; }

/* Launcher pill */
.wwf-chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem 0.7rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(3, 105, 161, 0.34);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease, filter 200ms ease;
}
.wwf-chat-launcher svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.wwf-chat-launcher:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 36px rgba(3, 105, 161, 0.42); }
.wwf-chat.is-open .wwf-chat-launcher { transform: translateY(8px) scale(0.96); opacity: 0; pointer-events: none; }

/* Panel */
.wwf-chat-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(380px, calc(100vw - 1.8rem));
  height: min(560px, calc(100vh - 2.4rem));
  display: flex;
  flex-direction: column;
  background: var(--glass-bg-2, var(--card));
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border, var(--line));
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 47, 73, 0.32);
  overflow: hidden;
  transform-origin: bottom right;
}
/* Visibility is controlled solely by the [hidden] attribute; the is-open class
   only adds a subtle entrance animation so the panel can never get stuck
   open-but-invisible. */
.wwf-chat-panel[hidden] { display: none; }
.wwf-chat.is-open .wwf-chat-panel { animation: wwf-chat-pop 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes wwf-chat-pop {
  from { transform: translateY(14px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.wwf-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
  color: #fff;
}
.wwf-chat-head-id { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.wwf-chat-head-id > div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wwf-chat-head-id strong { font-family: var(--font-display); font-size: 0.98rem; }
.wwf-chat-head-id span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.78); }
.wwf-chat-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.25); flex: none; }
.wwf-chat-close { border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 1.3rem; line-height: 1; cursor: pointer; flex: none; transition: background 160ms ease; }
.wwf-chat-close:hover { background: rgba(255, 255, 255, 0.26); }

.wwf-chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }

.wwf-chat-msg { max-width: 86%; padding: 0.65rem 0.85rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; }
.wwf-chat-msg p { margin: 0 0 0.5rem; }
.wwf-chat-msg p:last-child { margin-bottom: 0; }
.wwf-chat-msg ul { margin: 0.25rem 0 0.25rem; padding-left: 1.1rem; }
.wwf-chat-msg li { margin: 0.15rem 0; }
.wwf-chat-msg--assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; }
.wwf-chat-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--brand-700), var(--brand-900)); color: #fff; border-bottom-right-radius: 5px; }
.wwf-chat-msg--user strong { color: #fff; }
.wwf-chat-err { color: var(--negative, #b91c1c); margin: 0; }
[data-theme="dark"] .wwf-chat-err { color: #fca5a5; }

.wwf-chat-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.wwf-chat-chip {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--brand-700);
  background: var(--glass-bg, var(--paper));
  border: 1px solid var(--glass-border, var(--brand-300));
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  cursor: pointer;
  text-align: left;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.wwf-chat-chip:hover { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
[data-theme="dark"] .wwf-chat-chip { color: var(--brand-300); }

.wwf-chat-typing { display: inline-flex; gap: 4px; padding: 0.15rem 0; }
.wwf-chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: wwf-chat-bounce 1.2s infinite ease-in-out; }
.wwf-chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.wwf-chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wwf-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.wwf-chat-form { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--line); background: var(--card); }
.wwf-chat-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  max-height: 120px;
}
.wwf-chat-form textarea:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: transparent; }
.wwf-chat-send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: filter 160ms ease, transform 160ms ease; }
.wwf-chat-send svg { width: 19px; height: 19px; fill: currentColor; }
.wwf-chat-send:hover { filter: brightness(1.07); transform: translateY(-1px); }
.wwf-chat-send:disabled, .wwf-chat-form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.wwf-chat-foot { margin: 0; padding: 0 0.85rem 0.7rem; font-size: 0.7rem; color: var(--ink-faint); background: var(--card); }
.wwf-chat-foot a { color: var(--brand-700); }

@media (prefers-reduced-motion: reduce) {
  .wwf-chat-panel, .wwf-chat-launcher { transition: none; }
  .wwf-chat-typing i { animation: none; }
}
@media (max-width: 520px) {
  .wwf-chat-launcher span { display: none; }
  .wwf-chat-launcher { padding: 0.8rem; }
}

/* ============================================================
   DATA PAGE — at-a-glance stats, toolbar, export, change cells
   ============================================================ */
.data-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* Filter/sort/export toolbar (premium replacement for the old .filters row) */
.data-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.data-toolbar select {
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--glass-border, var(--line));
  border-radius: var(--radius-md);
  background: var(--glass-bg, #fff);
  color: var(--ink);
  cursor: pointer;
  /* Never let a long option (e.g. a department name) blow out the width */
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.data-toolbar .checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.data-toolbar-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  display: flex;
  align-items: center;
}
.data-toolbar-search svg {
  position: absolute;
  left: 0.7rem;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.data-toolbar-search input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem 0.6rem 2.2rem;
  border: 1px solid var(--glass-border, var(--line));
  border-radius: var(--radius-md);
  background: var(--glass-bg, #fff);
  color: var(--ink);
}
.data-toolbar-search input:focus,
.data-toolbar select:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: transparent; }

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--glass-bg, var(--paper));
  border: 1px solid var(--brand-300);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  margin-left: auto;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-export svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-export:hover { background: var(--brand-700); color: #fff; border-color: var(--brand-700); transform: translateY(-1px); }
[data-theme="dark"] .btn-export { color: var(--brand-300); }

/* Year-over-year change cells in the appropriations table */
.data-change { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--ink-faint); }
.data-change.is-up { color: var(--brand-700); }
.data-change.is-down { color: var(--teal); }
.data-change.is-flat { color: var(--ink-faint); }
[data-theme="dark"] .data-change.is-up { color: var(--brand-300); }

.table-empty { text-align: center; color: var(--ink-faint); padding: 1.5rem 0.8rem !important; font-style: italic; }

@media (max-width: 560px) {
  /* Stack the toolbar so each control fits the width instead of overflowing */
  .data-toolbar { gap: 0.5rem; }
  .data-toolbar-search,
  .data-toolbar select,
  .pill-toggle,
  .btn-export { flex: 1 1 100%; width: 100%; }
  .data-toolbar .checkbox { flex: 1 1 100%; }
  .btn-export { margin-left: 0; justify-content: center; }
}

/* ---- Data-page tables: fit the width, wrap text, minimal horizontal scroll --- */
#explorer table,
#capital table {
  white-space: normal;
  font-size: 0.82rem;
  table-layout: auto;
}
#explorer thead th,
#capital thead th {
  white-space: normal;
  padding: 0.5rem 0.6rem;
  font-size: 0.66rem;
  vertical-align: bottom;
  line-height: 1.2;
}
#explorer tbody td,
#capital tbody td {
  padding: 0.5rem 0.6rem;
  vertical-align: top;
  overflow-wrap: anywhere;
}
/* Numbers and badges should never wrap awkwardly */
#explorer td.num,
#explorer th.num,
#capital td.num,
#capital th.num { white-space: nowrap; }
#explorer .badge { white-space: nowrap; }
/* Keep the two free-text columns from hogging width */
#explorer tbody td:first-child,
#explorer tbody td:nth-child(2) { min-width: 7rem; }

/* ---- Data tables v2: fill the width with intentional column sizing ---- */
#explorer table.data-table,
#capital table.data-table { table-layout: fixed; width: 100%; }

/* Appropriations: one wide two-line "Line item" column + tidy rest */
#explorer .c-item { width: 34%; }
#explorer .c-fcoa { width: 8%; }
#explorer .c-caps { width: 11%; }
#explorer .c-num { width: 12%; }
#explorer .c-src { width: 11%; }

/* Capital: project / no. / estimated total / wide funding-mix bar */
#capital th:nth-child(1) { width: 32%; }
#capital th:nth-child(2) { width: 8%; }
#capital th:nth-child(3) { width: 18%; }
#capital th:nth-child(4) { width: 42%; }

/* Two-line primary cell (program/project + muted context) */
.cell-item strong { display: block; font-weight: 600; color: var(--ink); font-size: 0.84rem; line-height: 1.25; }
.cell-item .cell-sub { display: block; margin-top: 0.12rem; font-size: 0.72rem; color: var(--ink-faint); line-height: 1.2; }
.cell-src { font-size: 0.74rem; color: var(--ink-soft); }

/* Funding-mix stacked bar */
.cap-bar {
  display: flex;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cap-bar span { display: block; height: 100%; min-width: 2px; }
.cap-bar span:hover { filter: brightness(1.08); }
.cap-bar-empty { color: var(--ink-faint); }

.cap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 0.8rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.cap-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.cap-legend-item i { width: 11px; height: 11px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); flex: none; }
[data-theme="dark"] .cap-legend-item i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }

/* ============================================================
   HEADER — brand-forward / civic treatment
   ============================================================ */
.site-header .container { padding-top: 0.7rem; padding-bottom: 0.7rem; }

/* Institutional brand lockup: a larger seal + uppercase serif name + tagline */
.brand img { height: 44px; border-radius: 10px; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink);
}
.brand-text span {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* "Ask the budget" — outline action that opens the assistant */
.nav-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--glass-bg, transparent);
  border: 1px solid var(--brand-300);
  border-radius: var(--radius-sm);
  padding: 0.44rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.nav-ask svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-ask:hover { background: var(--brand-700); color: #fff; border-color: var(--brand-700); transform: translateY(-1px); }
[data-theme="dark"] .nav-ask { color: var(--brand-300); border-color: var(--glass-border); }
[data-theme="dark"] .nav-ask:hover { color: #fff; background: var(--brand-700); border-color: var(--brand-700); }

/* Tighten the action cluster so brand + nav + actions stay on one line */
@media (max-width: 1040px) {
  .nav-ask span { display: none; }
  .nav-ask { padding: 0.44rem 0.55rem; }
}
@media (max-width: 820px) {
  /* On mobile the floating launcher already provides this, so drop it here */
  .nav-ask { display: none; }
  .brand img { height: 34px; }
}

/* ============================================================
   MOBILE POLISH — flow width/legend, diverging chart, data tables
   + a glow on the 3D toggle
   ============================================================ */

/* Subtle glow to invite trying the 3D view (calms when it's selected) */
.view-opt--3d:not(.is-active) { animation: view3d-glow 2.8s ease-in-out infinite; }
@keyframes view3d-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
  50% { box-shadow: 0 0 14px 1px rgba(139, 92, 246, 0.5); }
}
@media (prefers-reduced-motion: reduce) { .view-opt--3d { animation: none; } }

@media (max-width: 760px) {
  /* Flow: keep the Sankey inside its card (no full-bleed) and scale it to fit
     the screen width — no horizontal scrolling. Tap a band for the figures. */
  .sankey-card--full {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    overflow-x: hidden;
  }
  #sankey-chart { min-width: 0; width: 100%; }

  /* Flow "key": compact chips that wrap to a couple of short rows and fit the
     width (no off-screen scroll, no tall stack). */
  #sankey-legend.legend {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.4rem;
    margin-top: 0.85rem;
  }
  #sankey-legend .legend-item {
    font-size: 0.68rem;
    padding: 0.22rem 0.5rem;
    gap: 0.32rem;
  }
  #sankey-legend .legend-swatch { width: 9px; height: 9px; }

  /* Data tables: readable, scroll inside the card rather than crushing columns */
  #explorer table.data-table,
  #capital table.data-table { table-layout: auto; min-width: 600px; }
  #explorer .cell-item,
  #capital .cell-item { min-width: 11rem; }
  #capital .cap-bar { min-width: 130px; }
}

@media (max-width: 620px) {
  /* Keep the +/-% chip from stranding on its own right-aligned row */
  .yoy-headline { gap: 0.3rem 0.6rem; }
  .yoy-chip { margin-left: 0; }
}

/* "What changed" — revised mobile format. The center-diverging bar needs
   width to read, so on phones we switch to a clean left-anchored magnitude
   bar; direction is shown by color (blue = more, amber = less) and the ▲/▼
   in the delta. The name + delta sit on one line, the bar spans below. */
@media (max-width: 620px) {
  /* Stack as a flex column so decreases can be pushed below the increases */
  .yoy-grid { display: flex; flex-direction: column; padding: 0.25rem 1rem 0.6rem; }
  .yoy-grid .diverge-head { display: none; }
  .diverge-row.is-down { order: 1; padding-left: 0.5rem; padding-right: 0.5rem; border-bottom: none; }
  .diverge-row { padding: 0.7rem 0; }
  .diverge-name { font-size: 0.86rem; }
  .diverge-delta { font-size: 0.9rem; }
  .diverge-track {
    height: 12px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
  }
  .diverge-axis { display: none; }
  .diverge-fill {
    top: 0;
    bottom: 0;
    left: 0 !important;
    right: auto !important;
    border-radius: 999px;
  }
  #changed.is-visible .diverge-fill { width: var(--wfull); }
}

/* ---- Breakdown rows are now expandable (largest lines nested per category) ---- */
.breakdown-row > summary {
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.breakdown-row > summary::-webkit-details-marker { display: none; }
.breakdown-row > summary:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
/* Make it obvious the whole row is interactive */
.breakdown-row:hover {
  border-color: var(--brand-300);
}
.breakdown-row:hover > summary {
  background: var(--paper);
}
[data-theme="dark"] .breakdown-row:hover > summary { background: rgba(255, 255, 255, 0.04); }
.breakdown-row .group-name { display: inline-flex; align-items: center; gap: 0.4rem; }
.breakdown-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--brand-500);
  transition: transform 0.2s ease;
}
.breakdown-row[open] .breakdown-chevron { transform: rotate(90deg); }
.breakdown-row[open] {
  background: var(--paper);
  border-color: var(--brand-300);
}
[data-theme="dark"] .breakdown-row[open] { background: rgba(255, 255, 255, 0.04); }

/* Explicit "see more" call to action on every department row */
.breakdown-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-600, var(--brand-500));
}
.breakdown-cta-arrow {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform 0.2s ease;
}
.breakdown-row[open] .breakdown-cta-arrow { transform: rotate(90deg); }
.breakdown-row:hover .breakdown-cta { text-decoration: underline; }
.breakdown-cta-hide { display: none; }
.breakdown-row[open] .breakdown-cta-show { display: none; }
.breakdown-row[open] .breakdown-cta-hide { display: inline; }

.breakdown-lead {
  margin: -0.15rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.breakdown-lines {
  list-style: none;
  margin: 0.55rem 0 0.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.breakdown-lines li {
  display: flex;
  justify-content: space-between;
  gap: 0.85rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 0.32rem 0;
  border-bottom: 1px dashed var(--line);
}
.breakdown-lines li:last-child { border-bottom: none; }
.bl-name { min-width: 0; }
.bl-amt { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.bl-more { padding-top: 0.4rem; }
.bl-more a { color: var(--brand-700); font-weight: 500; text-decoration: none; }
.bl-more a:hover { text-decoration: underline; }
[data-theme="dark"] .bl-more a { color: var(--brand-300); }

/* ============================================================
   OFFICIAL SOURCES — document cards + embedded video
   ============================================================ */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.resource-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease, border-color 240ms ease;
}
.resource-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-500);
  box-shadow: 0 16px 40px rgba(12, 74, 110, 0.16);
}
[data-theme="dark"] .resource-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.resource-icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--brand-100);
  color: var(--brand-700);
}
[data-theme="dark"] .resource-icon { background: rgba(56, 189, 248, 0.14); color: var(--brand-300); }
.resource-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resource-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.resource-body strong { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.25; }
.resource-desc { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.resource-cta { margin-top: 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--brand-700); }
.resource-card:hover .resource-cta { text-decoration: underline; }
[data-theme="dark"] .resource-cta { color: var(--brand-300); }

.video-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.5rem 1.5rem;
}
.video-card h3 { margin: 0 0 0.85rem; }
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(8, 47, 73, 0.18);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Hero quick-source buttons (under the headline figure) ---- */
.hero-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.85rem;
}
.hero-source-btn {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, box-shadow 200ms ease;
}
.hero-source-btn:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
  box-shadow: 0 12px 30px rgba(12, 74, 110, 0.15);
}
[data-theme="dark"] .hero-source-btn:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32); }
.hero-source-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-100);
  color: var(--brand-700);
}
[data-theme="dark"] .hero-source-icon { background: rgba(56, 189, 248, 0.14); color: var(--brand-300); }
.hero-source-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-source-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hero-source-text strong { font-family: var(--font-display); font-size: 0.96rem; }
.hero-source-text small { font-size: 0.76rem; color: var(--ink-soft); margin-top: 0.1rem; }
@media (max-width: 560px) { .hero-source-btn { flex: 1 1 100%; } }