/* State tax pages — PRODUCTION stylesheet (scoped under .stax).
   Generated by scope-css.js from build/assets/state-tax.css — do not
   hand-edit; edit the source sheet and re-run. Indigo is the only
   accent (red removed by owner decision 2026-10-31); token blocks
   switch on html[data-theme] only. */
/* State tax pages — shared stylesheet.
   Design language: flat, 14px cards, 2px buttons, no nested containers,
   ONE accent per theme. THEME SYSTEM (owner, 2026-10-31): the colour
   theme is a token block; every accent-dependent value (buttons,
   highlights, chart series, hero) derives from these tokens.
   The ONLY accent is "indigo" (the approved v2 system: indigo
   #4f46e5, blue federal series, slate neutrals, navy hero). The red
   alternate was removed by owner decision (2026-10-31 22:06 PKT) —
   its token blocks remain in this source for the record but are
   dropped by scope-css.js and never shipped. Gold is kept only for
   the star rating; green only where it means "kept money".
   LIGHT is the default mode; DARK is a designed theme in its own
   right in both accents — not an inversion. Text pairs are WCAG
   AA-verified per accent x mode (see the production contrast table).
   Indigo tokens reconstructed from the v2 reference renders
   (pixel-sampled: bg #f5f5f8, soft #eef2ff, hero #141824/#1d2334,
   dark bg #0a0e15, surface #131a27, dark accent #818cf8); one
   deliberate correction vs v2: dark filled controls take near-black
   ink on the lifted accent (white on #818cf8 measured 2.9:1 — fails
   AA; dark ink measures ~8.5:1). */
.stax {
  --bg:#f5f5f8; --bg-grad:#efeff4;
  --surface:#ffffff; --surface-2:#fafafc; --surface-3:#f1f1f6;
  --ink:#1c2333; --ink-2:#3f4756; --muted:#64748b;
  --line:#e6e7ee; --line-strong:#cfd3e0;
  --accent:#4f46e5; --accent-strong:#4338ca; --accent-soft:#eef2ff; --accent-ink:#ffffff;
  --good:#0e9f6e; --good-soft:#e7f8f1;
  --amber:#b45309; --amber-soft:#fdf3e3;
  --red:#dc2626;
  --fed:#2563eb; --state:#4f46e5; --fica:#d97706; --extra:#7c3aed; --net:#0e9f6e; --pretax:#94a3b8;
  --shadow:0 1px 2px rgba(20,24,40,.05),0 16px 40px -24px rgba(20,24,40,.25);
  --shadow-sm:0 1px 2px rgba(20,24,40,.06);
  --sec-gap:20px; /* THE section-spacing scale — every major block below the
     header separates by exactly this; no other value may be used. */
  --hero-bg:#141824; --hero-tile:#1d2334; --hero-ink:#f4f5fa; --hero-muted:#9aa3b8;
  --chart-grid:#e8eaf2; --chart-axis:#64748b;
  color-scheme:light;
}
html[data-theme="dark"] .stax {
  --bg:#0a0e15; --bg-grad:#0a0e15;
  --surface:#131a27; --surface-2:#0e141f; --surface-3:#1d2440;
  --ink:#eef1f8; --ink-2:#c3cadb; --muted:#8b94a9;
  --line:#232c40; --line-strong:#2e3850;
  --accent:#818cf8; --accent-strong:#a5b4fc; --accent-soft:#1d2440; --accent-ink:#0d1020;
  --good:#34d399; --good-soft:#0d2b23;
  --amber:#fbbf24; --amber-soft:#32260d;
  --fed:#60a5fa; --state:#818cf8; --fica:#fbbf24; --extra:#a78bfa; --net:#34d399; --pretax:#64748b;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 40px -24px rgba(0,0,0,.8);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --hero-bg:#171f30; --hero-tile:#1d2440; --hero-ink:#eef1f8; --hero-muted:#8b94a9;
  --chart-grid:#1e2739; --chart-axis:#8b94a9;
  color-scheme:dark;
}
.stax, .stax * {box-sizing:border-box}
.stax html {scroll-behavior:smooth}
.stax .num, .stax .money, .stax td.r, .stax th.r {font-variant-numeric:tabular-nums lining-nums}
.stax a {color:var(--accent);text-decoration:none}
.stax a:hover {text-decoration:underline}
/* --- replica chrome (representative of the standard tool header) --- */
/* accent (colour theme) picker — two dots in the header area; the dots
   carry FIXED swatch colours (they depict the themes, they do not
   follow them). Switching is instant and persists in localStorage. */
.stax .accent-picker {display:inline-flex;align-items:center;gap:8px}
.stax .accent-picker .ap-lab {font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.stax .lede {color:var(--ink-2);max-width:72ch;margin:0 0 14px}
.stax .quick {background:var(--accent-soft);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:6px;padding:12px 16px;font-size:15px;margin:0 0 var(--sec-gap)}
.stax .quick b {color:var(--ink)}
.stax .stars-badge {display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px 5px 10px;font-size:13px;font-weight:600;box-shadow:var(--shadow-sm)}
.stax .stars {color:#f59e0b;letter-spacing:2px;font-size:14px}
.stax html[data-theme="dark"] .stars {color:#fbbf24}
.stax .stars .off {color:var(--line-strong)}
.stax .stars-note {color:var(--muted);font-weight:500}
/* --- stage --- */
/* Columns MUST end on the same bottom line: the grid stretches both
   columns to the row height, the input card distributes its content
   (space-between) and the results column is a flex stack whose last
   card flexes — no page background ever shows beneath a short column. */
.stax .stage {display:grid;grid-template-columns:380px 1fr;gap:var(--sec-gap);align-items:stretch;margin-bottom:var(--sec-gap)}
.stax .stage-col {display:flex;flex-direction:column;gap:var(--sec-gap);min-width:0}
.stax .stage-col>.card {flex:1 1 auto}
.stax #inputCard {display:flex;flex-direction:column;justify-content:space-between}
.stax .card {background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:20px}
.stax .card h2 {font-size:15px;margin:0 0 14px;font-weight:700;letter-spacing:.01em}
.stax .card h2 .sub {display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.stax .field {margin-bottom:14px}
.stax .field label {display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.stax .field .row {display:flex;gap:8px;align-items:center}
.stax input[type=number], .stax input[type=text], .stax select {width:100%;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);border-radius:6px;padding:10px 12px;font-size:15px;font-family:inherit}
.stax input:focus, .stax select:focus {outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.stax input[type=range] {flex:1;accent-color:var(--accent);height:28px}
.stax .seg {display:flex;gap:8px}
.stax .seg button {flex:1;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-strong);border-radius:6px;padding:9px 6px;font-size:13.5px;
  font-weight:600;cursor:pointer;font-family:inherit}
.stax .seg button[aria-pressed="true"] {background:var(--accent);color:var(--accent-ink)}
.stax .switch {display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.stax .switch input {width:18px;height:18px;accent-color:var(--accent)}
.stax details.more {border-top:1px dashed var(--line);padding-top:12px;margin-top:4px}
.stax details.more summary {cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent)}
.stax details.more .inner {padding-top:12px}
.stax .btn {display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;
  border-radius:2px;padding:11px 18px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit}
.stax .btn:hover {background:var(--accent-strong)}
.stax .btn.ghost {background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
.stax .btn.ghost:hover {background:var(--accent-soft)}
/* --- hero --- */
.stax .hero {background:var(--hero-bg);color:var(--hero-ink);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.stax .hero .lab {font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--hero-muted);font-weight:700}
.stax .hero .big {font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:4px 0 2px}
.stax .hero .per {color:var(--hero-muted);font-size:14px}
.stax .hero .tiles {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;margin-top:16px}
.stax .hero .tile {min-width:0}
.stax .hero .tile {background:var(--hero-tile);border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:10px 12px}
.stax .hero .tile .t {font-size:11.5px;color:var(--hero-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.stax .hero .tile .v {font-size:19px;font-weight:700;margin-top:2px}
/* --- allocation bar --- */
.stax .alloc {margin-top:16px}
.stax .alloc .bar {display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.stax .alloc .bar div {height:100%;transition:width .35s ease}
.stax .alloc .legend {display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.stax .alloc .legend i {display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
/* --- sections --- */
.stax .sec {background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);
  padding:22px;margin-bottom:var(--sec-gap)}
.stax .sec h2 {font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.stax .sec .intro {color:var(--ink-2);margin:0 0 14px;max-width:78ch}
.stax table {width:100%;border-collapse:collapse;font-size:14.5px}
.stax th, .stax td {padding:9px 10px;text-align:left;border-bottom:1px solid var(--line)}
.stax th {font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.stax td.r, .stax th.r {text-align:right}
.stax tr.hl td {background:var(--accent-soft);font-weight:700}
.stax tr.hl td:first-child {box-shadow:inset 3px 0 0 var(--accent)}
.stax tr.dim td {color:var(--muted)}
.stax tr.total td {border-top:2px solid var(--line-strong);font-weight:800}
.stax .tbl-scroll {overflow-x:auto}
/* tabs */
.stax .tabs {display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.stax .tabs button {border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-2);border-radius:2px;
  padding:8px 14px;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit}
.stax .tabs button[aria-pressed="true"] {background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* facts strip */
.stax .facts {display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px;margin-bottom:var(--sec-gap)}
.stax .fact {background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.stax .fact .t {font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.stax .fact .v {font-size:21px;font-weight:800;margin-top:3px;letter-spacing:-.01em}
.stax .fact .s {font-size:12.5px;color:var(--muted);margin-top:2px}
/* charts */
.stax .chart {width:100%;height:auto;display:block}
.stax .chart .grid {stroke:var(--chart-grid);stroke-width:1}
.stax .chart .axis {fill:var(--chart-axis);font-size:11px}
.stax .chart .lbl {fill:var(--ink-2);font-size:12px;font-weight:600}
.stax .changebars {display:grid;gap:14px}
.stax .changebars .metric .mt {font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.stax .changebars .brow {display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:4px}
.stax .changebars .brow .yr {width:38px;color:var(--muted);font-weight:600}
.stax .changebars .track {flex:1;background:var(--surface-3);border-radius:4px;height:16px;position:relative}
.stax .changebars .fill {position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--muted)}
.stax .changebars .fill.new {background:var(--accent)}
.stax .changebars .val {width:130px;font-weight:600}
/* freedom strip */
.stax .freedom {margin-top:6px}
.stax .freedom .months {display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.stax .freedom .months div {flex:1;text-align:center;font-size:10.5px;padding:5px 0;color:var(--muted);border-right:1px solid var(--line);position:relative}
.stax .freedom .months div:last-child {border-right:0}
.stax .freedom .months div.worked {background:var(--amber-soft);color:var(--amber);font-weight:700}
.stax .freedom .marker-note {font-size:13.5px;margin-top:8px;color:var(--ink-2)}
/* waterfall */
.stax .waterfall {display:grid;gap:5px}
.stax .waterfall .wrow {display:grid;grid-template-columns:210px 1fr 110px;align-items:center;gap:10px;font-size:13.5px}
.stax .waterfall .wlab {color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stax .waterfall .wtrack {position:relative;height:18px;background:var(--surface-3);border-radius:4px}
.stax .waterfall .wbar {position:absolute;top:0;height:18px;border-radius:4px;transition:all .35s ease}
.stax .waterfall .wval {text-align:right;font-weight:600}
.stax .waterfall .wrow.total .wlab, .stax .waterfall .wrow.total .wval {font-weight:800;color:var(--ink)}
/* pay stub */
.stax .stub {background:var(--surface-2);border:1.5px dashed var(--line-strong);border-radius:10px;padding:18px;font-size:14px}
.stax .stub .shead {display:flex;justify-content:space-between;border-bottom:2px solid var(--line-strong);padding-bottom:10px;margin-bottom:10px}
.stax .stub .shead .co {font-weight:800;letter-spacing:.02em}
.stax .stub .srow {display:flex;justify-content:space-between;padding:3px 0}
.stax .stub .srow.neg {color:var(--ink-2)}
.stax .stub .snet {display:flex;justify-content:space-between;border-top:2px solid var(--line-strong);margin-top:10px;padding-top:10px;font-weight:800;font-size:17px}
.stax .stub.flash {animation:stubflash .5s ease}
@keyframes stubflash{0%{border-color:var(--accent)}100%{border-color:var(--line-strong)}}
/* rules + faq */
.stax .rules {display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* An odd rule count must not leave an empty grid cell: the last card
   spans the full row instead of sitting beside a hole. */
@media (min-width:901px) {
.stax .rules>.rule:last-child:nth-child(odd) {grid-column:1/-1}
}
.stax .rule {border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--surface-2)}
.stax .rule h3 {margin:0 0 6px;font-size:15.5px}
.stax .rule p {margin:0;color:var(--ink-2);font-size:14.5px}
.stax .rule .src {margin-top:8px;font-size:12px;color:var(--muted)}
.stax .faq details {border-bottom:1px solid var(--line);padding:12px 0}
.stax .faq details:first-of-type {border-top:1px solid var(--line)}
.stax .faq summary {cursor:pointer;font-weight:700;font-size:15.5px}
.stax .faq p {color:var(--ink-2);margin:8px 0 2px;max-width:80ch}
.stax .srcs {font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.stax .srcs b {color:var(--ink-2)}
.stax .siblings {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--sec-gap)}
.stax .siblings a {border:1px solid var(--line-strong);border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:600;background:var(--surface)}
.stax .siblings a.cur {background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.stax .note-box {background:var(--amber-soft);border:1px solid var(--line);border-radius:8px;padding:12px 16px;font-size:14px;color:var(--ink-2);margin-bottom:var(--sec-gap)}
.stax .note-box b {color:var(--ink)}
.stax .stickybar {position:sticky;bottom:0;z-index:5;display:none;background:var(--hero-bg);color:var(--hero-ink);
  padding:10px 16px;border-radius:10px 10px 0 0;font-weight:700;justify-content:space-between;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
@media (max-width:900px) {
/* The accent picker must not grow the header on narrow screens: the
     actions overlay the topbar (out of flow) and the brand keeps the
     exact width it had before the picker existed, so every measured
     box on the page is unchanged. */
.stax .accent-picker .ap-lab {display:none}
.stax .stage {grid-template-columns:1fr}
.stax .facts {grid-template-columns:1fr 1fr}
.stax .rules {grid-template-columns:1fr}
.stax .hero .tiles {grid-template-columns:1fr 1fr}
.stax .hero .big {font-size:36px}
.stax .waterfall .wrow {grid-template-columns:130px 1fr 92px}
.stax .stickybar {display:flex}
}
/* ================= production extras ================= */
/* The accent picker that used to live in the tool topbar was REMOVED
   by owner decision (2026-10-31 22:06 PKT) — indigo is the only
   accent, no dots, no Theme label, no aw-accent storage. Its CSS went
   with it. */
/* Sticky bar must clear the site chrome stacking context sanely. */
.stax .stickybar{z-index:60}
/* Hub components (type hubs + ranking hub), same token system. */
.stax .hub-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 16px}
.stax .hub-tools input[type="search"]{flex:1 1 260px}
.stax .hub-chips{display:inline-flex;gap:8px;flex-wrap:wrap}
.stax .hub-chips button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer}
.stax .hub-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.stax .hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.stax .hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stax .hub-grid{grid-template-columns:1fr}}
.stax .state-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:16px;display:flex;flex-direction:column;gap:8px}
.stax .sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.stax .sc-name{font-weight:800;font-size:16.5px;color:var(--ink);text-decoration:none}
.stax .sc-name:hover{color:var(--accent)}
.stax .hub-stars{color:#f59e0b;font-size:13px;letter-spacing:1px;white-space:nowrap}
.stax .hub-stars .off{color:var(--line-strong)}
.stax .sc-metric{font-size:13.5px;color:var(--muted);line-height:1.55;flex:1}
.stax .sc-metric b{color:var(--ink-2)}
.stax .sc-links{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.stax .sc-links a{font-size:13px;font-weight:700;color:var(--accent);text-decoration:none}
.stax .sc-links a:hover{text-decoration:underline}
.stax .hub-none{color:var(--muted);font-size:14.5px}
.stax .map-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px}
.stax .map-wrap svg{width:100%;height:auto;display:block}
.stax .map-legend{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.stax .ml-bar{flex:0 0 140px;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--accent-soft),var(--accent))}
.stax .ml-na{color:var(--net);font-weight:700}
/* --- Argon design layer (owner order 2026-10-31): the ledger design
   language of the Gemini/Argon exemplars, applied to the two ANNUAL
   templates ONLY (income + brackets). Presentation only: mono-numeral
   ledger typography for figures, exhibit-style figure captions,
   table craft (subtle header band + accent-ruled highlighted row),
   staircase + change-chart treatment. The paycheck template and the
   hubs are deliberately untouched — Argon's paycheck is a different
   product (withholding model), and its median curve / FAQ orphan /
   ledger-row hero were explicitly NOT adopted. All colours stay on
   the existing accent x theme tokens, so the picker and both themes
   keep working unchanged. --- */
.stax{--font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace}
/* The finance skeleton pins Inter on every descendant with
   .finv3.finv3 *{font-family:...!important} — the ledger numerals
   below therefore carry !important and a doubled .stax for
   specificity, scoped strictly to figure elements on the two
   annual templates. */
/* Mono is kept ONLY on the hero-scale figure (owner style audit,
   2026-10-31): the Argon layer originally spread it across table
   cells, fact values, number inputs and chart labels, which broke
   the site's table/body font behaviour. All of those are back on
   Inter; only .hero .big keeps the ledger face. */
.stax.stax[data-type="income"] .hero .big{font-family:var(--font-mono) !important}
.stax[data-type="income"] .hero .big{letter-spacing:-.015em}
.stax[data-type="income"] thead th,.stax[data-type="brackets"] thead th{background:var(--surface-3);font-size:11.5px;letter-spacing:.07em}
.stax[data-type="income"] tr.hl td,.stax[data-type="brackets"] tr.hl td{border-bottom:2px solid var(--accent) !important}
.stax[data-type="brackets"] #stairs .axis{font-weight:700}
.stax[data-type="brackets"] .changebars{gap:12px}
.stax[data-type="brackets"] .changebars .metric{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stax[data-type="brackets"] .changebars .val{font-weight:700}
.stax .fig-cap{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.stax .fig-cap b{color:var(--accent);font-weight:800}
.stax .fig-cap::after{content:"";flex:1;border-top:1px solid var(--line)}
.stax[data-type="brackets"] .fig-cap + svg.chart{margin-top:0 !important}
/* The source sheet's body rule carried the default text colour
   (color:var(--ink)) and scope-css drops body rules — so production
   .stax never set a default colour and every element that relies on
   inheritance (fact values, FAQ summaries, the donut caption, rule
   card text) inherited the shell's near-white tone instead: more
   invisible text, this time by inheritance rather than by a direct
   override. Restore the design's default on the root itself. */
.stax{color:var(--ink);line-height:1.55}
/* --- Shell cascade overrides (owner fix pass, 2026-10-31) ---
   The site shell blankets controls inside .tool-panel with
   !important rules: theme.css gives every button the accent
   background + accent-ink text and every anchor the accent-2 colour;
   tool-page-v2.css gives every button white text. Inside .stax those
   blankets (specificity 0,2,1) beat this sheet's plain state rules:
   every segmented-control segment rendered "selected", and the
   current sibling pill's label was painted in the accent colour on
   the accent background — invisible text (owner: "active section
   text disappears when clicked", "blank buttons"). The rules below
   restore the designed states for state-tax controls ONLY, with a
   doubled .stax for specificity (0,3,1+) so they win over the shell
   blanket in every state, without editing the shared shell sheets
   that 240+ other tools depend on. Values mirror the design rules
   above exactly. */
.stax.stax .siblings a.cur{color:var(--accent-ink)!important}
/* The quick-answer bar and the lede set no colour of their own in the
   design (they inherit), and in the production cascade they inherit a
   near-white shell tone (#e5e7eb measured) — the answer text all but
   vanishes on its pale accent-soft background. Pin the designed
   ink-2 for both. */
.stax.stax .quick{color:var(--ink-2)!important}
.stax.stax .lede{color:var(--ink-2)!important}
.stax.stax .seg button{background:var(--surface-2)!important;color:var(--ink-2)!important;border:1px solid var(--line-strong)!important;border-radius:6px!important;padding:9px 6px!important;font-size:13.5px!important;font-weight:600!important;box-shadow:none!important;text-shadow:none!important;transform:none!important}
.stax.stax .seg button:hover{background:var(--surface-3)!important}
.stax.stax .seg button[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.stax.stax .seg button[aria-pressed="true"]:hover{background:var(--accent-strong)!important}
.stax.stax .seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stax.stax .tabs button{background:var(--surface-2)!important;color:var(--ink-2)!important;border:1px solid var(--line-strong)!important;border-radius:2px!important;padding:8px 14px!important;font-size:13.5px!important;font-weight:600!important;box-shadow:none!important;text-shadow:none!important;transform:none!important}
.stax.stax .tabs button[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.stax.stax .hub-chips button{background:var(--surface)!important;color:var(--ink-2)!important;border:1px solid var(--line-strong)!important;border-radius:999px!important;padding:6px 13px!important;font-size:13px!important;font-weight:600!important;box-shadow:none!important;text-shadow:none!important;transform:none!important}
.stax.stax .hub-chips button[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
.stax.stax .btn{background:var(--accent)!important;color:var(--accent-ink)!important;border:0!important;border-radius:2px!important;padding:11px 18px!important;font-size:14.5px!important;font-weight:700!important;box-shadow:none!important;text-shadow:none!important;transform:none!important}
.stax.stax .btn:hover{background:var(--accent-strong)!important}
.stax.stax .btn.ghost{background:var(--surface)!important;color:var(--accent)!important;border:1px solid var(--accent)!important}
.stax.stax .btn.ghost:hover{background:var(--accent-soft)!important}
/* Owner, 2026-10-31: "for these we dont so much width, use 60%" —
   the state-tax stage takes 60% of the viewport, centred, desktop
   only; phones keep the full-width stage. The competing width is
   fin-v3.css's .tool-stage:has(> .tool-panel > .finv3) at (0,3,0),
   so this selector spells out the full state-tax ancestor chain to
   win at (0,4,0) while still matching state-tax pages only.
   ROUND 2 (owner, 2026-10-31 22:38): widened 60% -> 70% so the
   four sibling pills can stay on one line (see the pill rule in
   the Round-2 block below). */
@media (min-width:1000px){.tool-stage:has(> .tool-panel > .tool-flow .stax){width:70%}}
/* Consequence of the stage width: in the mid band the results
   column is too narrow for the hero's four tiles — their labels
   (e.g. "CALIFORNIA TAX / YEAR") cross the tile borders at
   4-across. In that band the tiles go 2x2 — same treatment the
   design already uses under 900px — so every label stays inside
   its tile. At 60% the band ended at 1680px; at 70% the results
   column reaches the same width at ~1560px viewport, so the band
   now ends at 1559px (measured on the DC/CA heroes). */
@media (min-width:1000px) and (max-width:1559px){.stax .hero .tiles{grid-template-columns:1fr 1fr}}
/* --- Approved-palette restoration + style consistency (owner,
   2026-10-31 22:06) ---
   The approved standalone build paints its cool gradient page
   backdrop (body rule: linear-gradient(180deg,#efeff4,#f5f5f8
   240px)) and white .card surfaces. Scoping dropped the body rule,
   and the shell blanket makes .card transparent — so production
   showed the site shell's warm ivory (--bg #f4f3ef family) as both
   the page backdrop and every card surface: warm surfaces with blue
   accents, a mixed theme nobody approved. Restore the finalized
   token set's backdrop + surfaces for this family only. */
html:has(.stax){background-color:#f5f5f8}
html[data-theme="dark"]:has(.stax){background-color:#0a0e15}
body.tool-body:has(.stax){background:linear-gradient(180deg,#efeff4,#f5f5f8 240px)}
html[data-theme="dark"] body.tool-body:has(.stax){background:#0a0e15}
.stax.stax.stax .card{background:var(--surface) !important}
/* Prose rhythm matched to the site's finance standard (measured on
   us-paycheck-calculator / loan-calculator: panel prose 14px at
   22.4px line-height = 1.6). Ours inherited line-height "normal"
   (~1.15) because the design's body leading (1.55) was dropped with
   the body rule — the congestion the owner flagged. Tables keep the
   references' "normal" leading so row geometry is unchanged. */
.stax .rule p,.stax .faq p,.stax .sec>p,.stax .lede,.stax .note-box{line-height:1.6}
.stax .faq p{font-size:14.5px}
.stax td,.stax th{line-height:normal}
/* No underline on hover for pills/buttons/nav links in this family
   (the underline came from the design source's own .stax a:hover
   rule). Genuine prose links keep the site-standard underline. */
.stax a:hover{text-decoration:none}
.stax .sc-links a:hover{text-decoration:none}
.stax :is(.sec,.rule,.faq,.srcs,.note-box) p a:hover,.stax .lede a:hover{text-decoration:underline}
/* --- Ranking-hub map: instant tooltip, hover lift, settle-in ---
   (owner, 2026-10-31 22:18: the info was the SVG <title> element —
   a native tooltip with a ~1s OS delay. Replaced in state-tax-hub.js
   by a custom tooltip fed from precomputed per-salary data; fade is
   100ms, content swaps instantly between states.) */
.stax .map-wrap{position:relative}
.stax .map-tip{position:absolute;left:0;top:0;width:178px;padding:10px 12px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .1s ease;z-index:5;font-size:12.5px;line-height:1.45;color:var(--ink)}
.stax .map-tip.on{opacity:1}
.stax .map-tip .mt-stars{color:var(--amber);letter-spacing:1px;font-size:11px}
.stax .map-tip .mt-stars .off{opacity:.35}
.stax .map-tip .mt-row{display:flex;justify-content:space-between;gap:8px;margin-top:3px;color:var(--ink-2)}
.stax .map-tip .mt-row b{color:var(--ink)}
.stax .map-tip .mt-rank{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px}
@keyframes staxMapIn{from{opacity:0}to{opacity:1}}
.stax #usMap path{animation:staxMapIn .45s ease both;transition:filter .12s ease}
.stax #usMap path:hover{stroke:var(--accent-strong);stroke-width:1.6;filter:brightness(1.07)}
/* Permanent state names (owner, 2026-10-31): inside labels are
   fitted per state in state-tax-hub.js; tiny states get gutter
   callouts with leader lines. Labels never take the pointer, and on
   phone widths the whole layer hides (the viewBox gutter closes too,
   via JS) — the ranked table below carries every state there. */
.stax .map-labels,.stax .map-callouts{animation:staxMapIn .5s ease .12s both}
.stax .map-labels text{text-anchor:middle;font-weight:700;paint-order:stroke;stroke-linejoin:round;pointer-events:none}
.stax .map-callouts line{stroke:var(--muted);stroke-width:.7;opacity:.7;pointer-events:none}
.stax .map-callouts circle{fill:var(--muted);pointer-events:none}
.stax .map-callouts text{font-size:11px;font-weight:600;fill:var(--ink);pointer-events:none}
@media (max-width:760px){.stax .map-labels,.stax .map-callouts{display:none}}
@media (prefers-reduced-motion: reduce){.stax #usMap path{animation:none;transition:none}.stax .map-tip{transition:none}.stax .map-labels,.stax .map-callouts{animation:none}}
/* --- Motion layer (owner, 2026-10-31) ---
   Restrained, professional: micro-transitions on controls, one
   first-run stagger for the freedom strip and the pay waterfall, a
   fade-slide for FAQ answers, row-highlight fades. The hero count,
   $100 bar glide and curve draw-in live in state-tax-page.js.
   Everything starts from the real rendered values — nothing is
   gated, delayed or hidden for the sake of an animation — and the
   reduced-motion block at the end switches the layer off. */
@keyframes staxRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes staxGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes staxFadeSlide{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.stax .btn,.stax .seg button,.stax .tabs button,.stax .hub-chips button{transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .12s ease}
.stax .btn:active,.stax .seg button:active,.stax .tabs button:active,.stax .hub-chips button:active{transform:scale(.98)}
.stax .siblings a{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.stax .state-card{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.stax .state-card:hover{transform:translateY(-2px)}
.stax tbody tr{transition:background-color .3s ease}
.stax #alloc .bar>div{transition:width .38s ease}
.stax .months>div{transition:background-color .35s ease,color .35s ease}
.stax details[open ]>:not(summary){animation:staxFadeSlide .25s ease}
.stax .anim-in .months>div{animation:staxRise .3s ease both}
.stax .anim-in .months>div:nth-child(2){animation-delay:.04s}.stax .anim-in .months>div:nth-child(3){animation-delay:.08s}.stax .anim-in .months>div:nth-child(4){animation-delay:.12s}.stax .anim-in .months>div:nth-child(5){animation-delay:.16s}.stax .anim-in .months>div:nth-child(6){animation-delay:.2s}.stax .anim-in .months>div:nth-child(7){animation-delay:.24s}.stax .anim-in .months>div:nth-child(8){animation-delay:.28s}.stax .anim-in .months>div:nth-child(9){animation-delay:.32s}.stax .anim-in .months>div:nth-child(10){animation-delay:.36s}.stax .anim-in .months>div:nth-child(11){animation-delay:.4s}.stax .anim-in .months>div:nth-child(12){animation-delay:.44s}
.stax .wbar{transform-origin:left center}
.stax .anim-in .wrow{animation:staxRise .32s ease both}
.stax .anim-in .wrow .wbar{animation:staxGrow .45s ease both}
.stax .anim-in .wrow:nth-child(2){animation-delay:.05s}.stax .anim-in .wrow:nth-child(3){animation-delay:.1s}.stax .anim-in .wrow:nth-child(4){animation-delay:.15s}.stax .anim-in .wrow:nth-child(5){animation-delay:.2s}.stax .anim-in .wrow:nth-child(6){animation-delay:.25s}.stax .anim-in .wrow:nth-child(7){animation-delay:.3s}.stax .anim-in .wrow:nth-child(8){animation-delay:.35s}
/* --- ROUND 2 (owner, 2026-10-31 22:38) --- */
/* (a) Sibling pills on ONE line at desktop. Measured geometry:
   the longest jurisdiction (District of Columbia) needs 1,254px
   for its four pills at the designed 13.5px — no 70% stage at
   laptop widths contains that (the flow inside the stage is
   912px at a 1440px viewport, 800px at 1280px), and shrinking the
   type to fit would need ~10px at 1440px and ~8.5px at 1280px.
   So the pill row — a nav strip, centred like the stage — may
   widen symmetrically past the stage, capped at 1,296px and
   never closer than 16px to the viewport edge, with the type at
   full size. Two compaction bands keep the longest row inside
   the cap on smaller laptops (12px under 1400px, 10.5px under
   1139px); pill text never wraps internally. Phones (<1000px)
   keep the current wrapping row. */
@media (min-width:1000px){
.stax .siblings{flex-wrap:nowrap;width:min(1296px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%);justify-content:center}
.stax .siblings a{white-space:nowrap;flex:none}
}
@media (min-width:1000px) and (max-width:1399px){.stax .siblings{gap:6px}.stax .siblings a{font-size:12px;padding:6px 11px}}
@media (min-width:1000px) and (max-width:1138px){.stax .siblings a{font-size:10.5px;padding:6px 9px}}
/* (b) Sunburst card (paycheck pages): replaces the donut. The
   card sits at full flow width under the stage — the results
   column (~510px at 1440px) cannot hold a labelled two-ring
   sunburst plus its legend legibly. Chart and legend together
   span the card; the legend stacks under the chart when the
   card is narrow. All label styling is class-based so the SVG
   follows the theme tokens in both themes. */
.stax .sb-card{margin-top:var(--sec-gap)}
.stax .sb-wrap{display:flex;gap:26px;align-items:center}
.stax .sb-chart{flex:1 1 auto;min-width:0}
.stax .sb-chart svg{display:block;width:100%;max-width:660px;height:auto;margin:0 auto}
.stax .sb-side{flex:0 1 302px;min-width:228px}
.stax .sb-keep{font-size:15.5px;line-height:1.55;margin:0 0 14px}
.stax .sb-legend{display:flex;flex-direction:column;gap:9px}
.stax .sb-lrow{display:flex;align-items:center;gap:9px;font-size:14px}
.stax .sb-chip{width:11px;height:11px;border-radius:3px;flex:none}
.stax .sb-lname{color:var(--ink-2)}
.stax .sb-lamt{margin-left:auto;font-weight:700;white-space:nowrap}
.stax .sb-lpct{color:var(--muted);font-size:12.5px;min-width:46px;text-align:right;white-space:nowrap}
.stax .sb-note{color:var(--muted);font-size:13px;line-height:1.55;margin:14px 0 0}
.stax .sb-seg{stroke:var(--surface);stroke-width:1.5}
.stax .sb-inlab{font-size:11.5px;font-weight:700;fill:#fff;text-anchor:middle;pointer-events:none}
.stax .sb-olab{font-size:11.5px;pointer-events:none}
.stax .sb-on{fill:var(--ink);font-weight:600}
.stax .sb-oa{fill:var(--muted)}
.stax .sb-lead{stroke:var(--line-strong);stroke-width:1;fill:none}
.stax .sb-cpct{font-size:31px;font-weight:800;fill:var(--ink);text-anchor:middle}
.stax .sb-csub{font-size:11px;fill:var(--muted);text-anchor:middle;letter-spacing:.04em}
@media (max-width:1180px){
.stax .sb-wrap{flex-direction:column;align-items:stretch}
.stax .sb-side{flex:none;min-width:0}
}
@media (min-width:701px) and (max-width:1180px){.stax .sb-legend{display:grid;grid-template-columns:1fr 1fr;gap:9px 26px}}
@media (max-width:560px){.stax .sb-oa{display:none}.stax .sb-olab{font-size:12.5px}}
@media (prefers-reduced-motion: reduce){.tool-panel .stax.stax *,.tool-panel .stax.stax *::before,.tool-panel .stax.stax *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}