/* ────────────────────────────────────────
   _base.css — shared structure + theme picker
   Loaded by every theme. Sets layout grid,
   reset, picker UI, and structural defaults.
   Themes override visual treatment on top.
   ──────────────────────────────────────── */

* { margin:0; padding:0; box-sizing:border-box }

html { scroll-behavior:smooth }
body {
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ── Page container ── */
.page {
  max-width:1200px;
  margin:0 auto;
  position:relative;
}

/* ── Sections ── */
.section { margin-bottom:48px }
.section-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:end;
  gap:18px;
  padding-bottom:10px;
  border-bottom:1.5px solid currentColor;
  margin-bottom:24px;
}

/* ── Hide-by-section ── */
.section[hidden] { display:none }

/* ── Theme Picker UI ── */
.theme-picker {
  position:fixed;
  top:14px;
  right:14px;
  z-index:1000;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.04em;
}
.theme-picker-button {
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(250,245,232,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(27,22,18,0.3);
  padding:8px 14px;
  cursor:pointer;
  color:#1B1612;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  border-radius:0;
  transition:all 0.15s ease;
}
.theme-picker-button:hover {
  background:rgba(250,245,232,1);
  border-color:rgba(27,22,18,0.6);
}
.theme-picker-button .swatch-mini {
  width:10px;
  height:10px;
  background:#7A4827;
  border:0.5px solid rgba(27,22,18,0.5);
}
.theme-picker-button .arrow {
  font-size:9px;
  opacity:0.5;
  transition:transform 0.2s ease;
}
.theme-picker[open] .theme-picker-button .arrow {
  transform:rotate(180deg);
}
.theme-picker-menu {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  background:rgba(250,245,232,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(27,22,18,0.3);
  min-width:240px;
  max-height:520px;
  overflow-y:auto;
  display:none;
  box-shadow:0 16px 40px -12px rgba(27,22,18,0.25);
}
.theme-picker[open] .theme-picker-menu {
  display:block;
}
.theme-picker-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  color:#1B1612;
  text-decoration:none;
  border-bottom:0.5px solid rgba(27,22,18,0.12);
  transition:background 0.12s;
}
.theme-picker-option:last-child { border-bottom:none }
.theme-picker-option:hover { background:rgba(122,72,39,0.1) }
.theme-picker-option.active {
  background:rgba(122,72,39,0.15);
  font-weight:600;
}
.theme-picker-option.active::after {
  content:'●';
  margin-left:auto;
  color:#7A4827;
}
.theme-picker-option .swatch-mini {
  width:14px;
  height:10px;
  border:0.5px solid rgba(27,22,18,0.4);
  flex-shrink:0;
}
.theme-picker-option .label {
  font-size:11.5px;
  letter-spacing:0.06em;
}
.theme-picker-section {
  padding:8px 14px 4px;
  font-size:9px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(27,22,18,0.5);
  background:rgba(122,72,39,0.06);
  border-bottom:0.5px solid rgba(27,22,18,0.15);
}

/* ── Grids used across themes ── */
.stats {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.stats.stats-3 {
  grid-template-columns:repeat(3, 1fr);
}
.stats.stats-2 {
  grid-template-columns:repeat(2, 1fr);
}
.buckets {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  position:relative;
}
.invest-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
}
.notes-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.top5 {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.goals-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.quarters {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

@media (max-width:980px) {
  .stats, .buckets { grid-template-columns:repeat(2, 1fr) }
  .invest-grid, .notes-grid, .goals-grid { grid-template-columns:1fr }
  .top5 { grid-template-columns:repeat(2, 1fr) }
  .quarters { grid-template-columns:repeat(2, 1fr) }
}

/* ── §I Executive Summary · headline + row labels ── */
.exec-headline {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:28px 32px;
  margin-bottom:28px;
}
.exec-bigdelta {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
}
.exec-row-label {
  padding:0 4px 10px;
  margin:18px 0 14px;
}
.stat-value.muted {
  opacity:0.45;
}

/* ── Part banners (3-bucket dividers) ── */
.part-banner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  margin:60px 0 32px;
  padding:24px 28px;
}
.part-num {
  font-feature-settings:"tnum";
  line-height:1;
}
.part-text {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.part-title { margin:0; line-height:1 }
.part-sub { line-height:1.4 }
.part-amt {
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}
@media (max-width:780px) {
  .part-banner { grid-template-columns:auto 1fr; }
  .part-amt { grid-column:1 / -1; text-align:left; }
}

/* ── §VI Spending pies (structural) ── */
.pie-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  min-height:24px;
}
.pie-crumb {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.pie-crumb-link {
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.pie-crumb-link:hover { opacity:0.7 }
.pie-crumb-sep { opacity:0.5 }
.pie-crumb-current { font-weight:600 }
.pie-back {
  cursor:pointer;
  background:none;
  border:1px solid currentColor;
  padding:3px 10px;
  font:inherit;
  color:inherit;
  visibility:hidden;
}
.pie-back.show { visibility:visible }
.pie-back:hover { opacity:0.7 }
.pie-legend-row {
  cursor:pointer;
  transition:background 0.12s, transform 0.12s;
}
.pie-legend-row:hover { transform:translateX(2px) }
.pie-legend-row.has-children::after {
  content:'›';
  margin-left:6px;
  opacity:0.5;
}

/* ── §XI DmixFund Tracker (structural) ── */
.dmix-headline {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;
  align-items:center;
  padding:18px 24px;
}
.dmix-blended {
  display:flex;
  flex-direction:column;
  gap:6px;
  white-space:nowrap;
}
.dmix-summary { line-height:1.55 }
.dmix-caption {
  caption-side:top;
  text-align:left;
  padding:0 0 8px;
}
.dmix-bench-title {
  margin:28px 0 12px;
}
.bench-list {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.bench-row {
  display:grid;
  grid-template-columns:110px 1fr 2fr auto auto;
  gap:14px;
  align-items:center;
  padding:10px 14px;
}
.bench-bar {
  height:14px;
  position:relative;
}
.bench-bar-fill {
  display:block;
  height:100%;
}
.bench-val, .bench-delta {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media (max-width:780px) {
  .dmix-headline { grid-template-columns:1fr }
  .bench-row { grid-template-columns:90px 1fr auto; gap:8px }
  .bench-row .bench-type, .bench-row .bench-bar { display:none }
}
.pie-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.pie-card {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pie-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
}
.pie-content {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  align-items:center;
}
.pie-canvas-wrap {
  position:relative;
  height:220px;
}
.pie-canvas-wrap canvas {
  position:relative; z-index:1;
}
.pie-center {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}
.pie-legend-wrap {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.pie-legend-header {
  display:flex;
  justify-content:space-between;
  padding:0 4px 8px;
  border-bottom:0.5px solid currentColor;
  opacity:0.5;
}
.pie-legend {
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column;
}
.pie-legend-row {
  --row-color:#888888;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 4px;
  min-width:0;
}
.pie-swatch {
  width:11px; height:11px;
  border-radius:50%;
  background:var(--row-color);
  flex:0 0 auto;
  display:inline-block;
}
.pie-cat-block {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.pie-cat {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pie-amt-sub {
  opacity:0.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pie-dots {
  flex:1 1 auto;
  border-bottom:1px dotted currentColor;
  opacity:0.22;
  height:1px;
  min-width:16px;
  align-self:center;
}
.pie-pct-pill {
  flex:0 0 auto;
  padding:3px 9px;
  border-radius:4px;
  background:color-mix(in srgb, var(--row-color) 18%, transparent);
  color:color-mix(in srgb, var(--row-color) 75%, currentColor);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

@media (max-width:980px) {
  .pie-grid { grid-template-columns:1fr }
  .pie-content { grid-template-columns:1fr; gap:18px }
}

/* ── §IV Income Waffle (structural) ── */
.waffle-content {
  display:grid;
  grid-template-columns:minmax(280px, 1fr) 1.4fr;
  gap:48px;
  align-items:center;
}
.waffle-stage {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.waffle {
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  grid-template-rows:repeat(10, 1fr);
  gap:4px;
  width:100%;
  max-width:340px;
  aspect-ratio:1;
}
.waffle-cell {
  background:rgba(27,22,18,0.05);
  border-radius:2px;
  transition:opacity 0.2s, transform 0.2s;
}
.waffle-cell.filled {
  background:var(--cell-color);
}
.waffle-cell.dim {
  opacity:0.18;
}
.waffle-cell.clickable {
  cursor:pointer;
}
.waffle-cell.clickable:hover {
  transform:scale(1.18);
  z-index:2;
  position:relative;
}
.waffle-legend-row.clickable {
  cursor:pointer;
  transition:background 0.12s, transform 0.12s;
}
.waffle-legend-row.clickable:hover {
  transform:translateX(2px);
}
.waffle-legend-row.clickable::after {
  content:'›';
  margin-left:6px;
  opacity:0.5;
}
.waffle-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:0.5px solid currentColor;
}
.waffle-crumb {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.waffle-crumb-link {
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.waffle-crumb-link:hover { opacity:0.7 }
.waffle-crumb-sep { opacity:0.5 }
.waffle-crumb-current { font-weight:600 }
.waffle-back {
  cursor:pointer;
  background:none;
  border:1px solid currentColor;
  padding:3px 10px;
  font:inherit;
  color:inherit;
  visibility:hidden;
}
.waffle-back.show { visibility:visible }
.waffle-back:hover { opacity:0.7 }
.waffle-legend-wrap {
  display:flex;
  flex-direction:column;
  min-width:0;
}
.waffle-legend-header {
  display:flex;
  justify-content:space-between;
  padding:0 4px 10px;
}
.waffle-legend {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column;
}
.waffle-legend-row {
  --row-color:#888;
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 6px;
  cursor:default;
  transition:background 0.12s;
  min-width:0;
}
.waffle-legend-row.hl { background:rgba(27,22,18,0.04); }
.waffle-swatch {
  width:12px; height:12px;
  background:var(--row-color);
  border-radius:2px;
  flex:0 0 auto;
}
.waffle-cat-block {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.waffle-cat {
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.waffle-amt-sub {
  opacity:0.65;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.waffle-dots {
  flex:1 1 auto;
  border-bottom:1px dotted currentColor;
  opacity:0.22;
  height:1px;
  min-width:16px;
  align-self:center;
}
.waffle-pill {
  flex:0 0 auto;
  padding:5px 12px;
  border-radius:4px;
  background:color-mix(in srgb, var(--row-color) 18%, transparent);
  color:color-mix(in srgb, var(--row-color) 75%, currentColor);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

@media (max-width:980px) {
  .waffle-content { grid-template-columns:1fr; gap:28px }
}

/* ── §V Fancy Pies (solid pie · outer labels · drill-down) ── */
.fpie-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.fpie-card {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.fpie-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding-bottom:14px;
}
.fpie-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:8px;
  min-height:24px;
}
.fpie-crumb {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.fpie-crumb-link {
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.fpie-crumb-link:hover { opacity:0.7 }
.fpie-crumb-sep { opacity:0.5 }
.fpie-crumb-current { font-weight:600 }
.fpie-back {
  cursor:pointer;
  background:none;
  border:1px solid currentColor;
  padding:3px 10px;
  font:inherit;
  color:inherit;
  visibility:hidden;
}
.fpie-back.show { visibility:visible }
.fpie-back:hover { opacity:0.7 }
.fpie-stage {
  position:relative;
  width:100%;
  aspect-ratio:1.3;
  filter:drop-shadow(0 6px 16px rgba(27,22,18,0.16));
}
.fpie-stage canvas { position:absolute; inset:0; }
.fpie-overlay { position:absolute; inset:0; pointer-events:none; }
.fpie-leaders {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.fpie-leaders path {
  stroke:currentColor;
  stroke-width:0.75;
  fill:none;
  opacity:0.4;
}
.fpie-leaders circle {
  fill:currentColor;
  opacity:0.5;
}
.fpie-label {
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:2px;
  transform:translateY(-50%);
  min-width:0;
}
.fpie-label.left { transform:translate(-100%, -50%); text-align:right; }
.fpie-label-stats {
  display:flex;
  gap:6px;
  align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.fpie-label.left .fpie-label-stats { justify-content:flex-end; }

/* Tooltip — minimal */
.fpie-tooltip {
  position:absolute;
  pointer-events:none;
  z-index:1000;
  padding:8px 12px;
  background:var(--paper);
  border:0.5px solid var(--ink);
  opacity:0;
  transform:translate(-50%, calc(-100% - 10px));
  transition:opacity 0.15s ease;
  white-space:nowrap;
}
.fpie-tooltip.show { opacity:1 }

@media (max-width:980px) {
  .fpie-grid { grid-template-columns:1fr }
}

/* ── §V Category Waffles · 2 large clickable cards ── */
.catw-card {
  padding:30px 34px;
}
.catw-card + .catw-card {
  margin-top:28px;
}
.catw-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding-bottom:14px;
}
.catw-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  min-height:24px;
}
.catw-crumb {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.catw-crumb-link {
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.catw-crumb-link:hover { opacity:0.7 }
.catw-crumb-sep { opacity:0.5 }
.catw-crumb-current { font-weight:600 }
.catw-back {
  cursor:pointer;
  background:none;
  border:1px solid currentColor;
  padding:3px 10px;
  font:inherit;
  color:inherit;
  visibility:hidden;
}
.catw-back.show { visibility:visible }
.catw-back:hover { opacity:0.7 }
.catw-body {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:36px;
  align-items:center;
}
.catw-grid {
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  grid-template-rows:repeat(10, 1fr);
  gap:3px;
  width:300px;
  height:300px;
}
.catw-cell {
  background:rgba(27,22,18,0.05);
  border-radius:2px;
  transition:opacity 0.2s, transform 0.2s;
}
.catw-cell.filled { background:var(--cell-color); }
.catw-cell.dim    { opacity:0.18; }
.catw-cell.clickable { cursor:pointer; }
.catw-cell.clickable:hover {
  transform:scale(1.15);
  z-index:2;
  position:relative;
}
.catw-legend {
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column;
}
.catw-legend-row {
  --row-color:#888;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 4px;
  min-width:0;
  transition:background 0.12s, transform 0.12s;
}
.catw-legend-row.clickable {
  cursor:pointer;
}
.catw-legend-row.clickable:hover {
  transform:translateX(2px);
}
.catw-legend-row.clickable::after {
  content:'›';
  margin-left:4px;
  opacity:0.5;
}
.catw-swatch {
  width:11px; height:11px;
  background:var(--row-color);
  border-radius:2px;
  flex:0 0 auto;
}
.catw-cat-block {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:0 1 auto;
}
.catw-cat {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.catw-sub {
  opacity:0.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.catw-dots {
  flex:1 1 auto;
  border-bottom:1px dotted currentColor;
  opacity:0.22;
  height:1px;
  min-width:16px;
}
.catw-amt {
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.catw-pct {
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  min-width:42px;
  text-align:right;
}

@media (max-width:980px) {
  .catw-body { grid-template-columns:1fr; gap:24px; }
  .catw-grid { width:260px; height:260px; margin:0 auto; }
}

/* ── §V Budget vs Actual · chunky vertical bars ── */
.vbar-legend {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  padding:8px 4px 20px;
  align-items:center;
}
.vbar-legend-item {
  display:flex;
  align-items:center;
  gap:8px;
}
.vbar-legend-swatch {
  width:14px; height:14px;
  display:inline-block;
}
.vbar-legend-target {
  width:18px; height:0;
  border-top:1.5px dashed currentColor;
  display:inline-block;
}
.vbar-group {
  margin-bottom:36px;
}
.vbar-group-title {
  padding-bottom:14px;
  margin-bottom:18px;
  border-bottom:1px solid currentColor;
}
.vbar-row {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.vbar {
  flex:0 0 auto;
  width:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform 0.15s ease;
}
.vbar[data-target] { cursor:pointer; }
.vbar[data-target]:hover { transform:translateY(-3px); }
.vbar[data-target]:hover .vbar-shaft {
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
}
.vbar[data-target]:hover .vbar-name {
  text-decoration:underline;
  text-underline-offset:3px;
}
.hbar[data-target] { cursor:pointer; transition:transform 0.15s ease; }
.hbar[data-target]:hover { transform:translateX(2px); }

/* Flash highlight when a bar click scrolls to its tree row */
@keyframes st-flash-pulse {
  0%   { background:rgba(255,221,51,0.55); }
  100% { background:transparent; }
}
.st-flash > summary {
  animation:st-flash-pulse 1.6s ease-out;
}
.vbar-top {
  text-align:center;
  padding-bottom:6px;
  min-height:24px;
  white-space:nowrap;
}
.vbar-shaft {
  position:relative;
  width:64px;
  height:180px;
  background:rgba(0,0,0,0.05);
  border:1px solid currentColor;
  overflow:hidden;
}
.vbar-under {
  position:absolute;
  left:0; right:0; bottom:0;
  background:#3F8F5F; /* sage green default */
  transition:height 0.4s ease;
}
.vbar-under.invest {
  background:#7A4827; /* warm brown for investing/savings */
}
.vbar-over {
  position:absolute;
  left:0; right:0; bottom:50%;
  background:#C53030; /* crimson */
  transition:height 0.4s ease;
}
.vbar-target {
  position:absolute;
  left:-4px; right:-4px;
  bottom:50%;
  height:0;
  border-top:2px dashed currentColor;
  z-index:2;
}
.vbar-cap {
  position:absolute;
  top:6px; left:0; right:0;
  text-align:center;
  font-weight:700;
  font-size:11px;
  color:#fff;
  text-shadow:1px 1px 0 rgba(0,0,0,0.4);
  z-index:3;
}
.vbar-name {
  text-align:center;
  padding-top:8px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}
.vbar-var {
  text-align:center;
  padding-top:4px;
  white-space:nowrap;
}
.vbar-var.over { color:#C53030 }
.vbar-var.under { color:#3F8F5F }
.vbar-var.flat { opacity:0.6 }

.vbar-group-title .over, .vbar-legend-swatch.over { background:#C53030; color:#C53030; }
.vbar-group-title .over { background:transparent; }
.vbar-group-title .under, .vbar-legend-swatch.under { background:#3F8F5F; color:#3F8F5F; }
.vbar-group-title .under { background:transparent; }
.vbar-group-title .flat { opacity:0.7; background:transparent; }

@media (max-width:780px) {
  .vbar { width:78px; }
  .vbar-shaft { width:56px; height:160px; }
}

/* Chunky horizontal bar (used for Joint Guilt-Free) */
.hbar {
  display:grid;
  grid-template-columns:1fr 240px;
  gap:24px;
  align-items:center;
}
.hbar-track {
  position:relative;
  height:56px;
  background:rgba(0,0,0,0.05);
  border:1.5px solid currentColor;
  overflow:hidden;
}
.hbar-fill {
  position:absolute;
  left:0; top:0; bottom:0;
  background:#3F8F5F;
  transition:width 0.4s ease;
  max-width:100%;
}
.hbar-fill.over {
  background:linear-gradient(to right, #3F8F5F 0%, #3F8F5F 50%, #C53030 50%, #C53030 100%);
}
.hbar-target {
  position:absolute;
  left:50%;
  top:-5px; bottom:-5px;
  border-left:2.5px dashed currentColor;
  z-index:2;
}
.hbar-side {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hbar-amt-plan { opacity:0.6 }
.hbar-var.under { color:#3F8F5F }
.hbar-var.over { color:#C53030 }
.hbar-var.flat { opacity:0.7 }

@media (max-width:780px) {
  .hbar { grid-template-columns:1fr; gap:12px; }
}

/* ── §V Spending Detail Tree (Actual · vs Plan · vs Last Month) ── */
.spending-tree {
  border:1px solid currentColor;
}
.st-header,
.st-row {
  display:grid;
  grid-template-columns:16px 1fr 120px 130px 150px;
  gap:14px;
  align-items:center;
  padding:11px 18px;
}
.st-header {
  border-bottom:1px solid currentColor;
  grid-template-columns:1fr 120px 130px 150px;
  padding:12px 18px;
}
.st-h-amt, .st-h-plan, .st-h-mom { text-align:right }
.st-master { border-bottom:1px solid currentColor }
.st-master:last-of-type { border-bottom:0 }
.st-master-row { cursor:pointer }
.st-master[open] > .st-master-row .st-disc { transform:rotate(90deg) }
.st-disc {
  transition:transform 0.15s ease;
  display:inline-block;
  width:14px;
  text-align:center;
}
.st-sub { border-top:0.5px dashed currentColor }
.st-master > details:first-of-type { border-top:0.5px solid currentColor }
.st-sub-row { cursor:pointer }
.st-sub[open] > .st-sub-row .st-disc { transform:rotate(90deg) }
.st-sub-row > .st-name,
.st-leaf > .st-name { padding-left:0 }
.st-sub-row { padding-left:34px; grid-template-columns:16px 1fr 120px 130px 150px }
.st-leaf {
  padding-left:62px;
  grid-template-columns:1fr 120px 130px 150px;
}
.st-children {
  background:rgba(0,0,0,0.025);
}
.st-amt, .st-plan, .st-mom {
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.st-plan.over, .st-mom.over { color:var(--crimson, #C53030) }
.st-plan.under, .st-mom.under { color:var(--sage, #3F8F5F) }
.st-plan.flat, .st-mom.flat { opacity:0.5 }

@media (max-width:780px) {
  .st-header, .st-row { grid-template-columns:1fr auto; gap:6px }
  .st-header .st-h-plan, .st-header .st-h-mom { display:none }
  .st-plan, .st-mom { display:none }
}