/* base.css — design tokens, reset, and the Sankey classes that shared.js emits.
   Each design brings its own layout CSS on top. The palette lives here and
   ONLY here: it is validated for colour-blind separation and contrast in both
   modes, so changing a hue means re-running the dataviz validator. */

:root{
  color-scheme: light;
  --surface-0:#f6f6f3; --surface-1:#fcfcfb; --surface-2:#f1f1ed; --surface-3:#e9e9e4;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#85837b;
  --hairline:#e4e3de;
  --c-federal:#2a78d6; --c-state:#eb6834; --c-city:#1baf7a;
  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --shadow-2:0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.09);
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --surface-0:#101010; --surface-1:#1a1a19; --surface-2:#232322; --surface-3:#2d2d2b;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8f8e85;
  --hairline:#34342f;
  --c-federal:#3987e5; --c-state:#d95926; --c-city:#199e70;
  --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--surface-0); color:var(--text-primary);
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
h1,h2,h3,p{margin:0}
button{font:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--c-federal);outline-offset:2px;border-radius:4px}

.ic{flex:none;vertical-align:middle}

/* ---- form controls, shared shell ---- */
.sel{font:inherit;font-size:15px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-primary);border:1px solid var(--hairline);
  cursor:pointer;min-height:44px}
.moneyin{display:flex;align-items:center;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:var(--r-sm);overflow:hidden;min-height:44px}
.moneyin .cur{padding:0 1px 0 12px;color:var(--text-muted)}
.moneyin input{flex:1;min-width:0;width:100%;font:inherit;font-size:16px;font-weight:650;
  padding:10px 12px 10px 2px;border:none;outline:none;background:transparent;color:var(--text-primary)}
.moneyin:focus-within{border-color:var(--text-secondary)}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;
  cursor:pointer;height:44px;margin:0;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:var(--surface-3);border:1px solid var(--hairline)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--text-primary);border:3px solid var(--surface-1);
  margin-top:-9px;box-shadow:0 1px 5px rgba(0,0,0,.3)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--surface-3);
  border:1px solid var(--hairline)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--text-primary);border:3px solid var(--surface-1)}
.ghost{background:transparent;border:1px solid var(--hairline);color:var(--text-secondary);
  border-radius:var(--r-sm);padding:10px 15px;font-size:14px;min-height:44px;transition:.15s}
.ghost:hover{background:var(--surface-2);color:var(--text-primary)}

/* ---- Sankey classes emitted by shared.js sankey() ---- */
svg.viz{display:block;width:100%;height:auto;overflow:visible}
.ribbon{cursor:pointer;transform-box:view-box;
  transition:transform .7s var(--ease),opacity .13s linear}
.ribbon.pre{transform:scaleX(0)}
.node{transition:opacity .35s ease .1s}
.lbl,.lvl,.conn{transition:opacity .35s ease}
.lbl.pre,.lvl.pre,.conn.pre,.node.pre{opacity:0}
.viz.dimmed .ribbon:not(.on){opacity:.1}
.viz.dimmed .lbl:not(.on){opacity:.26}
.viz.dimmed .conn:not(.on){opacity:.14}
.lblName{font-size:12.5px;font-weight:560;fill:var(--text-primary)}
.lblVal{font-size:12.5px;fill:var(--text-secondary)}
.lblMore{font-size:10.5px;fill:var(--text-muted)}
.lvlName{font-size:11px;font-weight:680;letter-spacing:.09em;fill:var(--text-secondary)}
.lvlVal{font-size:11px;font-weight:600;fill:var(--text-muted)}
.conn{stroke:var(--hairline);stroke-width:1;fill:none}

/* ---- tooltip ---- */
.tip{position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease;background:var(--surface-1);
  border:1px solid var(--hairline);border-radius:12px;padding:12px 15px;
  box-shadow:var(--shadow-2);max-width:320px}
.tip.show{opacity:1;transform:translateY(0)}
.tip .tv{font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.1}
.tip .tn{font-size:13px;color:var(--text-secondary);margin-top:3px;display:flex;
  align-items:center;gap:8px}
.tip .tp{font-size:12px;color:var(--text-muted);margin-top:8px;padding-top:8px;
  border-top:1px solid var(--hairline);line-height:1.5}
.tip .tofficial{font-size:11px;color:var(--text-muted);margin-top:6px;font-style:italic}
.dot{width:11px;height:11px;border-radius:3px;flex:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}