/*
  The site's own names for its colours, each set to a brand token from tokens.css
  (copied verbatim from the y10-brand repo; change it there, not here). Nothing in
  this file is a hex value: anything not in the brand palette is mixed from its tokens.

  Light and dark follow the brand guide's "Light and dark" section (modelled on
  practicereturns.com), and the state map and vendor bubbles use its --viz-* data fills.
*/
:root {
  /* Light: a pale blue-tinted page with soft blue glows, as on practicereturns.com. */
  --page: var(--surface-tint);
  --page-deep: var(--surface-tint2);
  --panel: var(--card);
  --fg: var(--text);
  --fg-muted: var(--muted);
  --line: var(--border);
  --accent: var(--blue);
  --accent-strong: var(--blue-d);
  --accent-soft: color-mix(in srgb, var(--blue) 9%, var(--card));
  --tag-bg: var(--surface3);
  --glow-bg: var(--bg-glow);
  --header-bg: var(--header-light);
}
/* Dark scheme: set on <html> by the script in the page head, from the toggle or the device setting. */
:root[data-theme="dark"] {
  --page: var(--ink); --page-deep: color-mix(in srgb, var(--ink) 60%, black);
  --panel: var(--ink2); --fg: var(--on-dark); --fg-muted: var(--on-dark-soft); --line: var(--ink3);
  --accent: var(--blue-l); --accent-strong: var(--blue-l);
  --accent-soft: color-mix(in srgb, var(--blue) 22%, var(--ink2));
  --tag-bg: var(--ink3);
  --glow-bg: var(--bg-glow-dark);
  --header-bg: var(--header-dark);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--fg); font: 16px/1.6 var(--font-body); }
/* Two soft blue glows fixed behind the page, in both schemes. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1000px 620px at 82% -10%, var(--glow-bg), transparent 60%), radial-gradient(880px 700px at -8% 6%, var(--glow-bg), transparent 58%); }
a { color: var(--accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--accent); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3, h4, .brand, .stat b { font-family: var(--font-head); letter-spacing: var(--tracking-tight); }
.eyebrow { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-strong); margin: 0 0 10px; }

/* Header: the name, the main sections (two of them drop-down menus), and the light/dark toggle,
   on one line. Under 900px the sections fold behind a Menu button. It stays at the top while the
   page scrolls, so jumps to a heading stop below it. */
html { scroll-padding-top: 72px; }
/* The link at the bottom of every page back to the header. */
.to-top { margin-top: 28px; margin-bottom: 0; font-size: .9rem; }
.to-top a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; }
.to-top a::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateY(2px) rotate(45deg); }
.to-top a:hover { text-decoration: underline; }
@media print { .to-top { display: none; } }
header.top { background: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 70; }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; }
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--fg); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--blue); box-shadow: var(--glow); }
.brand:hover { color: var(--fg); }
.mainnav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.mainnav > a, .dd-btn { text-decoration: none; color: var(--fg-muted); font: inherit; font-size: .93rem; font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.mainnav > a:hover, .dd-btn:hover, .dd.open .dd-btn { color: var(--fg); background: var(--tag-bg); }
.mainnav > a[aria-current], .dd.here .dd-btn { color: var(--accent-strong); }
.dd { position: relative; }
.dd-btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .15s; }
.dd.open .dd-btn::after { transform: translateY(0) rotate(-135deg); }
.dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(11, 14, 20, .16); }
.dd.open .dd-menu { display: block; }
/* A menu split into headed columns (Rules by state: Tax, Employers, Business). */
.dd-menu.dd-cols { left: 50%; transform: translateX(-50%); gap: 4px; }
.dd.open .dd-menu.dd-cols { display: flex; }
.dd-col { min-width: 200px; }
.dd-col + .dd-col { border-left: 1px solid var(--line); padding-left: 4px; }
.dd-head { display: block; padding: 6px 10px 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); }
/* With a mouse, hovering opens the menu too; an invisible strip bridges the gap so it stays open on the way down. */
@media (hover: hover) and (min-width: 901px) {
  .dd:hover .dd-menu { display: block; }
  .dd:hover .dd-menu.dd-cols { display: flex; }
  .dd:hover .dd-btn { color: var(--fg); background: var(--tag-bg); }
  .dd:hover .dd-btn::after { transform: translateY(0) rotate(-135deg); }
  .dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
}
.dd-menu a { display: block; padding: 7px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--fg); font-size: .92rem; white-space: nowrap; }
.dd-menu a:hover { background: var(--tag-bg); color: var(--accent-strong); }
.dd-menu a[aria-current] { color: var(--accent-strong); font-weight: 600; }
.menu-btn { display: none; font: inherit; font-size: .9rem; font-weight: 600; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--fg); cursor: pointer; }
.menu-btn:hover { border-color: var(--blue); }
@media (max-width: 900px) {
  .menu-btn { display: inline-block; }
  .theme { margin-left: auto; }
  .mainnav { display: none; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
  .mainnav.open { display: flex; max-height: calc(100vh - 70px); overflow-y: auto; }
  .mainnav > a, .dd-btn { padding: 9px 4px; font-size: 1rem; }
  .dd-btn { pointer-events: none; color: var(--fg-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding-top: 14px; }
  .dd-btn::after { display: none; }
  .dd-menu { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 4px; background: transparent; min-width: 0; }
  .dd-menu a { padding: 8px 4px 8px 12px; font-size: 1rem; }
  .dd-menu.dd-cols, .dd.open .dd-menu.dd-cols { display: block; transform: none; }
  .dd-col + .dd-col { border-left: 0; padding-left: 0; }
  .dd-head { padding: 10px 4px 2px 12px; }
}
.theme { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--fg-muted); cursor: pointer; transition: color .2s, border-color .2s; }
.theme:hover { color: var(--fg); border-color: var(--blue); }
.theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme svg { width: 18px; height: 18px; }
/* The icon shows the scheme in use: a sun in light, a moon in dark. */
.theme .moon, [data-theme="dark"] .theme .sun { display: none; }
[data-theme="dark"] .theme .moon { display: block; }
main { padding-top: 24px; padding-bottom: 48px; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; font-weight: 700; margin: .2em 0 .4em; }
h2 { font-size: 1.4rem; font-weight: 600; margin: 1.8em 0 .5em; }
h3 { font-size: 1.08rem; font-weight: 600; margin: 1.4em 0 .4em; }
.lede { font-size: 1.1rem; color: var(--fg); max-width: 760px; }
.muted, .checked, .crumbs, .agency, .url { color: var(--fg-muted); }
.checked, .crumbs { font-size: .9rem; margin: 0; }
.legend { font-size: .9rem; color: var(--fg-muted); }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; vertical-align: 1px; cursor: help; }
/* Source labels: primary is the accent, vendor is neutral, secondary (press) is an outline only. */
.b-primary { background: var(--accent-soft); color: var(--accent-strong); }
.b-vendor { background: var(--tag-bg); color: var(--fg); }
.b-secondary { background: none; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--fg-muted); }
.src { font-size: .85rem; white-space: nowrap; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.card h3 { margin: 0 0 2px; font-size: 1.05rem; }
.card ul { padding-left: 18px; margin: 8px 0; font-size: .93rem; }
.card .agency { font-size: .88rem; margin: 0; }
.card .note, .card .built { font-size: .9rem; margin: 6px 0; }
.card .url { font-size: .82rem; margin: 8px 0 0; overflow-wrap: anywhere; }
.system { border-top: 2px solid var(--line); margin-top: 2.2em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.facts dt { color: var(--fg-muted); font-size: .92rem; }
.facts dd { margin: 0; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }
.findings li { margin-bottom: .55em; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { background: var(--accent-soft); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
table.states td:first-child { white-space: nowrap; }
.timeline { padding-left: 20px; }
.timeline li { margin-bottom: .5em; }
.when { font-weight: 600; margin-right: 6px; }
/* Home hero: straight on the page, with the closing phrase of the headline in a blue gradient. */
.hero { padding: clamp(20px, 5vw, 48px) 0 clamp(8px, 2vw, 16px); }
.hero h1 { font-weight: 600; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; max-width: 820px; margin: 0 0 .45em; }
.hero .lede { color: var(--fg-muted); font-size: clamp(1.05rem, 1.6vw, 1.18rem); margin: 0; }
.grad { background: linear-gradient(120deg, var(--blue-d), var(--blue) 60%, var(--blue-l)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .grad { background-image: linear-gradient(120deg, var(--blue-l), var(--blue) 60%, var(--blue-l)); }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.tile { display: block; text-decoration: none; color: var(--fg); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.tile:hover { border-color: var(--accent); }
.tile h2 { margin: 0 0 6px; font-size: 1.1rem; color: var(--accent); }
.tile p { margin: 0; color: var(--fg-muted); font-size: .95rem; }
.vendor h2 { display: flex; align-items: center; gap: 8px; }
.count { font-size: .8rem; background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 1px 9px; }
footer { background: var(--page-deep); border-top: 1px solid var(--line); }
.disclaimer { font-size: .85rem; color: var(--fg-muted); padding: 16px 0; margin: 0; }
.form { display: grid; gap: 14px; max-width: 640px; margin: 20px 0; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: .95rem; }
.form input, .form textarea, .form select { font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--fg); width: 100%; }
/* Buttons follow the brand's primary button: blue fill, white text, a soft blue drop glow. */
.form button, .planner-actions button, #plan button { justify-self: start; font: 600 15px/1.2 var(--font-body); padding: 12px 24px; border: 0; border-radius: 10px; background: var(--blue); color: var(--on-dark); cursor: pointer; box-shadow: 0 6px 20px -6px var(--blue); transition: transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease); }
.form button:hover, .planner-actions button:hover, #plan button:hover { background: var(--blue-d); transform: translateY(-2px); box-shadow: 0 12px 28px -8px var(--blue); }
@media (prefers-reduced-motion: reduce) { .form button, .planner-actions button, #plan button { transition: none; } .form button:hover, .planner-actions button:hover, #plan button:hover { transform: none; } }
.hp { display: none; }

.req { color: var(--accent-strong); font-weight: 700; }
.small { font-size: .85rem; margin: 0; }
.tablewrap.tall { max-height: 78vh; overflow: auto; }
.tablewrap.tall thead th { position: sticky; top: 0; z-index: 2; box-shadow: 0 1px 0 var(--line); }
table.states th[scope=row] { position: sticky; left: 0; z-index: 1; background: var(--panel); font-weight: 600; white-space: nowrap; }
table.states thead th:first-child { left: 0; z-index: 3; }
table.states td { min-width: 180px; }
.sys + .sys { margin-top: 6px; }
.cat { font-size: .75rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.cost { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.b-deep { background: var(--accent-soft); color: var(--accent-strong); }
.sys.retired { color: var(--fg-muted); }
.sys.retired .cost { color: var(--fg-muted); }
.vlink { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.vlink:hover { color: var(--accent); }
.vsite { margin: -6px 0 14px; font-size: 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.stat b { display: block; font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: var(--accent); }
.stat span { font-size: .85rem; color: var(--fg-muted); }
.usmap { margin: 18px 0 22px; }
.usmap svg { width: 100%; height: auto; display: block; }
.usmap .st { stroke: var(--panel); stroke-width: 1.2; transition: fill .15s; }
/* Five fills, assigned so that no two neighbouring states share one (see usMapSvg). */
.usmap .c0 { fill: var(--viz-1); } .usmap .c1 { fill: var(--viz-2); } .usmap .c2 { fill: var(--viz-3); } .usmap .c3 { fill: var(--viz-4); } .usmap .c4 { fill: var(--viz-5); }
.usmap a:hover .st, .usmap a:focus .st { fill: var(--accent); }
.usmap figcaption { font-size: .88rem; color: var(--fg-muted); margin-top: 6px; }
.usmap .code { font-size: 11px; font-weight: 700; pointer-events: none; fill: var(--ink); }
.usmap a:hover .code { fill: var(--on-dark); }
.usmap .code.out { fill: var(--fg); pointer-events: auto; cursor: pointer; }
.usmap .leader { stroke: var(--fg-muted); stroke-width: .8; }
.usmap a:hover .code.out { fill: var(--accent); }
[data-theme="dark"] .usmap .c0 { fill: var(--viz-1-dark); } [data-theme="dark"] .usmap .c1 { fill: var(--viz-2-dark); } [data-theme="dark"] .usmap .c2 { fill: var(--viz-3-dark); } [data-theme="dark"] .usmap .c3 { fill: var(--viz-4-dark); } [data-theme="dark"] .usmap .c4 { fill: var(--viz-5-dark); }
[data-theme="dark"] .usmap .code { fill: var(--on-dark); }
[data-theme="dark"] .usmap a:hover .code { fill: var(--ink); }
table.money tr.retired td { color: var(--fg-muted); }
table.money td:first-child { min-width: 200px; }

/* Home */
.homegrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.homegrid h2 { margin-top: 1.2em; }
.homegrid .usmap { margin-top: 6px; }
.homegrid .tiles { display: grid; gap: 12px; margin-top: 3.4em; }
@media (max-width: 760px) { .homegrid { grid-template-columns: 1fr; } .homegrid .tiles { margin-top: 0; } }

/* Vendor bubbles */
.bubbles { margin: 12px 0 18px; }
.bubbles svg { width: 100%; max-height: 560px; height: auto; display: block; }
.bubbles circle { stroke: var(--panel); stroke-width: 1.5; transition: stroke .15s; }
.bubbles a:hover circle, .bubbles a:focus circle { stroke: var(--blue); stroke-width: 3; }
.bubbles text { fill: var(--ink); font-weight: 700; pointer-events: none; }
[data-theme="dark"] .bubbles text { fill: var(--on-dark); }
.bubbles text .sub { font-weight: 500; opacity: .9; }
.bubbles figcaption { font-size: .85rem; color: var(--fg-muted); margin-top: 6px; }
/* Bubble fills set once as variables, so each key in the caption matches its bubble. */
/* The brand's data colours, one per kind of system; replaced-only vendors stay neutral. */
.b-tax { --b: var(--viz-1); } .b-ui { --b: var(--viz-2); } .b-paidleave { --b: var(--viz-3); }
.b-other { --b: var(--viz-4); } .b-past { --b: var(--surface3); }
.b-tax, .b-ui, .b-paidleave, .b-other, .b-past { fill: var(--b); background: var(--b); }
.bubbles .key { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-left: 8px; }
.bubbles .nowrap { white-space: nowrap; margin-right: 10px; }
.bubbles .key { margin-left: 0; }
[data-theme="dark"] .b-tax { --b: var(--viz-1-dark); } [data-theme="dark"] .b-ui { --b: var(--viz-2-dark); } [data-theme="dark"] .b-paidleave { --b: var(--viz-3-dark); }
[data-theme="dark"] .b-other { --b: var(--viz-4-dark); } [data-theme="dark"] .b-past { --b: var(--ink3); }
.tile.icon { display: flex; gap: 14px; align-items: flex-start; }
.tile .ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); }
.tile.icon:hover .ico { background: var(--accent); color: var(--panel); }
.homegrid .tile h2 { margin: 2px 0 6px; }

/* Vendor page mini map */
.vmap { max-width: 520px; margin: 14px 0 6px; }
.vmap svg { width: 100%; height: auto; display: block; }
.vmap path { stroke: var(--panel); stroke-width: 1.2; transition: fill .15s; }
.vmap .none { fill: var(--line); }
.vmap .now { fill: var(--accent); }
.vmap .past { fill: var(--viz-3); }
.vmap a:hover path { filter: brightness(.75); }
.vmap figcaption { font-size: .85rem; color: var(--fg-muted); margin-top: 4px; }
.vmap .key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.vmap .nowrap { margin-right: 12px; }
.vmap .key.now { background: var(--accent); }
.vmap .key.past { background: var(--viz-3); }
[data-theme="dark"] .vmap .past, [data-theme="dark"] .vmap .key.past { fill: var(--viz-3-dark); background: var(--viz-3-dark); }
/* Federal page disaster relief map */
.dismap { margin: 14px 0 10px; }
.dismap svg { width: 100%; height: auto; display: block; }
.dismap path { stroke: var(--panel); stroke-width: 1.2; transition: filter .15s; }
.dismap .none { fill: var(--line); }
.dismap .irs, .dismap .key.irs { fill: var(--blue); background: var(--blue); }
.dismap .both, .dismap .key.both { fill: var(--ink2); background: var(--ink2); }
.dismap .st, .dismap .key.st { fill: var(--muted); background: var(--muted); }
.dismap a:hover path, .dismap a:focus path { filter: brightness(1.3); }
.dismap .code { font-size: 11px; font-weight: 700; pointer-events: none; fill: var(--on-dark); }
.dismap .code.out { fill: var(--fg); pointer-events: auto; cursor: pointer; }
.dismap .leader { stroke: var(--fg-muted); stroke-width: .8; }
.dismap figcaption { font-size: .88rem; color: var(--fg-muted); margin-top: 6px; }
.dismap .key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.dismap .nowrap { margin-right: 12px; }
[data-theme="dark"] .dismap .both, [data-theme="dark"] .dismap .key.both { fill: var(--blue-l); background: var(--blue-l); }
[data-theme="dark"] .dismap path.both + .code { fill: var(--ink); }
[data-theme="dark"] .dismap .st, [data-theme="dark"] .dismap .key.st { fill: var(--on-dark-dim); background: var(--on-dark-dim); }
.dis-state { scroll-margin-top: 12px; }
.dis-state h3 { margin-bottom: .3em; }
.dis-state:target h3 { color: var(--accent); }
.dis-state .areas { display: block; font-size: .92rem; }
.form [hidden] { display: none; }
.form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form .pair { grid-template-columns: 1fr; } }
.card .report { font-size: .82rem; margin: 6px 0 0; }

/* Portal picker on the corrections form */
.picker { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px 14px; margin: 0; min-width: 0; }
.picker legend { font-weight: 600; font-size: .95rem; padding: 0 4px; }
.picker legend .muted { font-weight: 400; font-size: .85rem; }
.pick-search { margin: 6px 0 8px; }
.pick-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chosen:not(:empty) { margin-bottom: 8px; }
.form .chip { font: inherit; font-size: .82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); cursor: pointer; }
.pick-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); padding: 4px 10px 8px; }
.pick-state { margin: 10px 0 2px; font-weight: 700; font-size: .9rem; }
.form .pick-list label { display: flex; gap: 8px; align-items: baseline; font-weight: 400; font-size: .9rem; padding: 3px 0; cursor: pointer; }
.form .pick-list input[type=checkbox] { width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--accent); }
.pick-list .muted { font-size: .8rem; }
.pick-empty { margin: 10px 0 4px; font-size: .9rem; }

/* Who administers what, on state pages */
.agencies { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 10px 0 8px; }
.agency-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.agency-card h3 { margin: 0 0 6px; font-size: 1rem; }
.agency-card ul { margin: 0; padding-left: 18px; font-size: .92rem; }
.agency-card li { margin-bottom: 3px; }
.agency-card .muted { font-size: .82rem; }
.card { scroll-margin-top: 12px; }

/* Tables become one card per row on a phone; each cell shows its column name (data-label, set at build) */
@media (max-width: 640px) {
  .tablewrap, .tablewrap.tall { overflow: visible; max-height: none; border: 0; background: none; }
  .tablewrap table, .tablewrap tbody, .tablewrap tr, .tablewrap td, .tablewrap th[scope=row] { display: block; width: 100%; }
  .tablewrap thead { display: none; }
  .tablewrap tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; margin-bottom: 10px; }
  .tablewrap td, .tablewrap th[scope=row] { border: 0; padding: 4px 0; min-width: 0; white-space: normal; text-align: left; }
  .tablewrap td:empty { display: none; }
  .tablewrap td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .03em; }
  .tablewrap td[data-label=""]::before { content: none; }
  .tablewrap th[scope=row] { position: static; background: none; font-size: 1.05rem; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  table.states td { min-width: 0; }
  .tablewrap .cost, .tablewrap .nowrap, .tablewrap .src { white-space: normal; }
  .tablewrap td { overflow-wrap: anywhere; }
  table.money td:first-child { min-width: 0; font-weight: 600; }
}
main p, main li, main dd { overflow-wrap: anywhere; }
.sys .agency-line { display: block; font-size: .78rem; color: var(--fg-muted); }

/* Leadership and contacts on state pages */
.lead-link { margin: -2px 0 6px; font-size: .85rem; }
.agency-lead { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin: 10px 0; padding: 0 14px; scroll-margin-top: 12px; }
.agency-lead summary { cursor: pointer; padding: 12px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; list-style: none; }
.agency-lead summary::-webkit-details-marker { display: none; }
.agency-lead summary::before { content: "\25B8"; color: var(--accent); width: 12px; }
.agency-lead[open] summary::before { content: "\25BE"; }
.agency-lead[open] { padding-bottom: 12px; }
.agency-name { font-weight: 700; font-size: 1.05rem; }
.agency-head { font-size: .9rem; }
.agency-count { font-size: .8rem; color: var(--fg-muted); margin-left: auto; }
.agency-lead h4 { margin: 1.1em 0 .4em; font-size: .95rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.answers { margin: 8px 0 4px; font-size: .85rem; color: var(--fg-muted); }
.org, .org ul { list-style: none; margin: 0; padding: 0; }
.org ul { margin-left: 14px; padding-left: 16px; border-left: 2px solid var(--line); }
.org li { position: relative; margin: 8px 0; }
.org ul > li::before { content: ""; position: absolute; left: -16px; top: 20px; width: 12px; border-top: 2px solid var(--line); }
.person { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; max-width: 640px; }
.person p { margin: 0; }
.ptitle { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; }
.pname { font-weight: 700; font-size: 1.02rem; }
.psel { font-size: .85rem; color: var(--fg-muted); }
.prole { font-size: .9rem; margin-top: 4px !important; }
.org.top .node { display: inline-block; font-weight: 700; background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; padding: 2px 12px; }
.org.top li { margin: 6px 0; }
.contacts { list-style: none; padding: 0; margin: 0 0 6px; }
.contacts li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.contacts li:last-child { border-bottom: 0; }
.contacts .clabel { font-weight: 600; margin-right: 4px; }
@media (max-width: 640px) { .org ul { margin-left: 6px; padding-left: 10px; } .org ul > li::before { left: -10px; width: 8px; } }

/* Start a business planner */
.planner-scope { background: var(--accent-soft); border-radius: var(--r); padding: 10px 14px; max-width: 760px; }
.planner .pick-list { max-height: 220px; }
.planner-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
#plan button + button { background: var(--accent-soft); color: var(--accent-strong); box-shadow: none; }
#plan h3.phase { margin: 1.4em 0 .4em; }
.steps { padding-left: 1.6em; margin: 0; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin: 0 0 10px; max-width: 820px; }
.step::marker { font-weight: 700; color: var(--accent); }
.step p { margin: 6px 0; }
.step ul { margin: 6px 0; padding-left: 18px; }
.step-foot { font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.step-foot .go { font-weight: 600; }
.unmapped { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); padding: 10px 14px; margin: 0 0 10px; max-width: 820px; }
.unmapped h4 { margin: 0 0 6px; }
.unmapped ul { margin: 0; padding-left: 18px; font-size: .92rem; }
@media print {
  header.top, footer, #planner, .planner-actions, .planner-scope, .lede { display: none !important; }
  .step, .unmapped { break-inside: avoid; border-color: var(--border2); }
}
.pick-list [hidden], .form .pick-list label[hidden] { display: none !important; }
.planner .hint { font-size: .85rem; color: var(--fg-muted); margin: -6px 0 0; max-width: 640px; }
.idpat { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-strong); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.id-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 12px 0; }
.id-filters label { display: grid; gap: 3px; font-size: .85rem; font-weight: 600; }
.id-filters select, .id-filters input { font: inherit; font-weight: 400; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--fg); min-width: 180px; }
.id-filters #f-count { margin: 0 0 6px; }
tr[hidden], .tablewrap tr[hidden] { display: none !important; }

/* States page: what each state spends a year. One series, so one hue (the accent) and no legend. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; margin: 4px 0 12px; }
.seg button { font: inherit; font-size: .85rem; font-weight: 600; padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--fg-muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.spend { position: relative; margin: 0 0 8px; }
.spend .bars { list-style: none; margin: 0; padding: 0; }
.spend .bars a { display: grid; grid-template-columns: 10.5rem 1fr 4.6rem; align-items: center; gap: 10px; padding: 3px 6px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: .9rem; }
.spend .bars a:hover, .spend .bars a:focus-visible { background: var(--tag-bg); }
.spend .track { height: 12px; display: block; }
.spend .bar { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; }
.spend .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.spend-tip { position: absolute; left: 0; right: 0; z-index: 2; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--fg); font-size: .85rem; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); pointer-events: none; }
@media (max-width: 600px) { .spend .bars a { grid-template-columns: 6.8rem 1fr 4rem; gap: 6px; font-size: .82rem; } }
/* Pay transparency: status tags, and the map by status (an ordered blue ramp, amber for city-only rules) */
.pt-tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--tag-bg); color: var(--fg); }
.pt-tag.pt-posting { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.pt-tag.pt-enacted, .pt-tag.pt-disclosure { border-color: var(--accent); }
.pt-tag.pt-local { border-color: var(--status-attention); }
.pt-rule .facts { margin-top: 4px; }
.pt-rule summary { flex-wrap: nowrap; }
.pt-head { flex: 1; min-width: 0; }
.pt-head .cat { margin-left: 4px; white-space: nowrap; }
.pt-rule .agency-count { white-space: nowrap; }
@media (max-width: 600px) { .pt-rule summary { flex-wrap: wrap; } .pt-head { flex: 1 1 calc(100% - 24px); } .pt-rule .agency-count { margin-left: 14px; } }
.pt-list { margin: 0; padding-left: 18px; }
.pt-src { margin: 10px 0 0; font-size: .9rem; }
.pt-table td:last-child { min-width: 320px; font-size: .92rem; }
.ptmap .st, .ptmap path { stroke: var(--panel); stroke-width: 1.2; transition: filter .15s; }
.ptmap a:hover path, .ptmap a:focus path { filter: brightness(.82); }
.ptmap path.posting, .ptmap .key.posting { fill: var(--blue); background: var(--blue); }
.ptmap path.enacted, .ptmap .key.enacted { fill: var(--blue-l); background: var(--blue-l); }
.ptmap path.disclosure, .ptmap .key.disclosure { fill: var(--viz-1); background: var(--viz-1); }
.ptmap path.local, .ptmap .key.local { fill: color-mix(in srgb, var(--status-attention) 55%, var(--card)); background: color-mix(in srgb, var(--status-attention) 55%, var(--card)); }
.ptmap path.none, .ptmap .key.none { fill: var(--line); background: var(--line); }
.ptmap .key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--border2); }
.ptmap .nowrap { margin-right: 12px; }
.ptmap .code.posting { fill: var(--on-dark); }
.ptmap a:hover .code { fill: var(--ink); } .ptmap a:hover .code.posting { fill: var(--on-dark); }
[data-theme="dark"] .ptmap a:hover .code { fill: var(--on-dark); } [data-theme="dark"] .ptmap a:hover .code.enacted { fill: var(--ink); }
[data-theme="dark"] .ptmap path.enacted, [data-theme="dark"] .ptmap .key.enacted { fill: var(--blue-l); background: var(--blue-l); }
[data-theme="dark"] .ptmap path.disclosure, [data-theme="dark"] .ptmap .key.disclosure { fill: var(--viz-1-dark); background: var(--viz-1-dark); }
[data-theme="dark"] .ptmap path.local, [data-theme="dark"] .ptmap .key.local { fill: var(--viz-3-dark); background: var(--viz-3-dark); }
[data-theme="dark"] .ptmap .key { border-color: var(--ink3); }
[data-theme="dark"] .ptmap .code.enacted { fill: var(--ink); }
[data-theme="dark"] .ptmap .code.none { fill: var(--on-dark-soft); }
/* 1099 filing maps and tags: one hue per category (blue = file with the state / regardless of
   withholding, amber = partly, green = only with withholding or CF/SF covers it, grey = none,
   hatched = the state does not say). Checked with the dataviz palette validator, light and dark. */
.irmap, .ir-tags { --ir-blue: var(--blue); --ir-amber: color-mix(in srgb, var(--status-attention) 75%, var(--card)); --ir-green: color-mix(in srgb, var(--status-ok) 70%, var(--card)); --ir-none: var(--line); }
[data-theme="dark"] .irmap, [data-theme="dark"] .ir-tags { --ir-amber: color-mix(in srgb, var(--status-attention) 85%, var(--ink2)); --ir-green: color-mix(in srgb, var(--status-ok) 90%, var(--on-dark)); }
.irmap path.direct, .irmap path.regardless { fill: var(--ir-blue); }
.irmap path.both, .irmap path.limited { fill: var(--ir-amber); }
.irmap path.cfsf, .irmap path.withholding { fill: var(--ir-green); }
.irmap path.none { fill: var(--ir-none); }
.irmap path.unknown { fill: url(#ir-hatch); }
.irmap .key.direct, .irmap .key.regardless { background: var(--ir-blue); }
.irmap .key.both, .irmap .key.limited { background: var(--ir-amber); }
.irmap .key.cfsf, .irmap .key.withholding { background: var(--ir-green); }
.irmap .key.none { background: var(--ir-none); }
.irmap .key.unknown { background: repeating-linear-gradient(45deg, var(--fg-muted) 0 2px, var(--line) 2px 5px); }
.irmap .code.direct, .irmap .code.regardless, .irmap a:hover .code.direct, .irmap a:hover .code.regardless { fill: var(--on-dark); }
.irmap .code.both, .irmap .code.limited, .irmap .code.cfsf, .irmap .code.withholding, .irmap .code.unknown { fill: var(--ink); }
.irmap a:hover .code.both, .irmap a:hover .code.limited, .irmap a:hover .code.cfsf, .irmap a:hover .code.withholding, .irmap a:hover .code.unknown { fill: var(--ink); }
[data-theme="dark"] .irmap .code.both, [data-theme="dark"] .irmap .code.limited, [data-theme="dark"] .irmap .code.cfsf, [data-theme="dark"] .irmap .code.withholding,
[data-theme="dark"] .irmap a:hover .code.both, [data-theme="dark"] .irmap a:hover .code.limited, [data-theme="dark"] .irmap a:hover .code.cfsf, [data-theme="dark"] .irmap a:hover .code.withholding { fill: var(--on-dark); }
[data-theme="dark"] .irmap .code.none { fill: var(--on-dark-soft); }
.irmap[hidden] { display: none; }
.ir-table td:nth-child(4) { min-width: 160px; }
.pt-tag[class*="ir-"], .pt-tag[class*="tr-"] { border-left-width: 4px; }
.pt-tag.ir-direct, .pt-tag.tr-regardless { border-left-color: var(--ir-blue); }
.pt-tag.ir-both, .pt-tag.tr-limited { border-left-color: var(--ir-amber); }
.pt-tag.ir-cfsf, .pt-tag.tr-withholding { border-left-color: var(--ir-green); }
.pt-tag.ir-unknown { border-left-color: var(--fg-muted); border-left-style: dashed; }
/* 1099 form checker */
.ir-check-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 18px 10px; margin: 18px 0; scroll-margin-top: 12px; }
.ir-check { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .ir-check { grid-template-columns: 1fr; } }
.ir-answer { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 6px; }
.ir-answer h3 { font-size: 1rem; margin: 1.1em 0 .3em; }
.ir-verdict { font-weight: 600; font-size: 1.05rem; padding: 10px 14px; border-radius: var(--r-sm); border-left: 5px solid var(--line); background: var(--page-deep); }
.ir-verdict.yes { border-left-color: var(--blue); }
.ir-verdict.maybe { border-left-color: color-mix(in srgb, var(--status-attention) 75%, var(--card)); }
.ir-verdict.no { border-left-color: color-mix(in srgb, var(--status-ok) 70%, var(--card)); }
.ir-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 12px 8px; margin: 8px 0; }
.ir-row p { margin: 6px 0; }
.ir-check { grid-template-columns: 1fr 1fr; }
.ir-forms { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.ir-forms legend { font-weight: 600; font-size: .95rem; padding: 0 4px; }
.ir-forms legend .muted { font-weight: 400; font-size: .85rem; }
.ir-forms label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; cursor: pointer; }
.ir-forms label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.ir-forms input { margin: 0; width: auto; }
.ir-verdicts { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.ir-verdicts .ir-verdict { margin: 0; font-weight: 400; font-size: 1rem; padding: 8px 12px; }
.form.ir-check { max-width: none; }
@media (max-width: 600px) { .ir-check { grid-template-columns: 1fr; } }
/* "On this page": floating button and panel on narrow screens, a fixed list beside the content on wide ones */
main h2 { scroll-margin-top: 16px; }
.toc { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: max-content; max-width: calc(100vw - 32px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: .88rem; }
.toc-toggle { font: inherit; font-weight: 600; max-width: min(320px, calc(100vw - 32px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 9px 16px 9px 34px; border-radius: 999px; border: 1px solid var(--accent); background: var(--panel); color: var(--accent-strong); box-shadow: 0 4px 16px rgba(11, 14, 20, .18); cursor: pointer; position: relative; }
.toc-toggle::before { content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 9px; transform: translateY(-50%); background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
.toc-panel { display: none; width: min(320px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 28px rgba(11, 14, 20, .2); padding: 10px 6px 10px 10px; }
.toc.open .toc-panel { display: block; }
.toc-title { margin: 2px 8px 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted); font-weight: 600; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: block; padding: 5px 8px; border-left: 2px solid var(--line); color: var(--fg-muted); text-decoration: none; line-height: 1.35; }
.toc li a:hover { color: var(--accent-strong); border-left-color: var(--accent); }
.toc li a[aria-current] { color: var(--accent-strong); font-weight: 600; border-left-color: var(--accent); background: var(--accent-soft); border-radius: 0 6px 6px 0; }
.toc-bar { height: 3px; background: var(--line); border-radius: 3px; margin: 10px 8px 2px; overflow: hidden; }
.toc-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.toc.wide { top: 96px; bottom: auto; right: calc((100vw - 1100px) / 2 - 240px); }
.toc.wide .toc-toggle { display: none; }
.toc.wide .toc-panel { display: block; width: 224px; max-height: calc(100vh - 128px); box-shadow: none; background: transparent; border: 0; padding: 0; }
@media print { .toc { display: none !important; } }
/* Sales tax map: rate as a single blue ramp (light to dark); threshold and local views one hue per category */
.salesmap { --s1: color-mix(in srgb, var(--blue) 22%, var(--card)); --s2: color-mix(in srgb, var(--blue) 45%, var(--card)); --s3: color-mix(in srgb, var(--blue) 72%, var(--card)); --s4: var(--blue-d); --amber: color-mix(in srgb, var(--status-attention) 75%, var(--card)); --green: color-mix(in srgb, var(--status-ok) 70%, var(--card)); }
[data-theme="dark"] .salesmap { --s1: color-mix(in srgb, var(--blue) 25%, var(--ink2)); --s2: color-mix(in srgb, var(--blue) 50%, var(--ink2)); --s3: color-mix(in srgb, var(--blue) 75%, var(--ink2)); --s4: var(--blue-l); --amber: color-mix(in srgb, var(--status-attention) 85%, var(--ink2)); --green: color-mix(in srgb, var(--status-ok) 90%, var(--on-dark)); }
.salesmap path { stroke: var(--panel); stroke-width: 1.2; transition: filter .15s; }
.salesmap a:hover path, .salesmap a:focus path { filter: brightness(.85); }
.salesmap[hidden] { display: none; }
.salesmap path.s-none, .salesmap .key.s-none { fill: var(--line); background: var(--line); }
.salesmap path.s-r1, .salesmap .key.s-r1 { fill: var(--s1); background: var(--s1); }
.salesmap path.s-r2, .salesmap .key.s-r2 { fill: var(--s2); background: var(--s2); }
.salesmap path.s-r3, .salesmap .key.s-r3 { fill: var(--s3); background: var(--s3); }
.salesmap path.s-r4, .salesmap .key.s-r4 { fill: var(--s4); background: var(--s4); }
.salesmap path.n-sales, .salesmap .key.n-sales, .salesmap path.l-state, .salesmap .key.l-state { fill: var(--blue); background: var(--blue); }
.salesmap path.n-both, .salesmap .key.n-both, .salesmap path.l-mixed, .salesmap .key.l-mixed { fill: var(--amber); background: var(--amber); }
.salesmap path.n-high, .salesmap .key.n-high, .salesmap path.l-nolocal, .salesmap .key.l-nolocal { fill: var(--green); background: var(--green); }
.salesmap path.n-other { fill: url(#st-hatch); }
.salesmap .key.n-other { background: repeating-linear-gradient(45deg, var(--fg-muted) 0 2px, var(--line) 2px 5px); }
.salesmap .key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--border2); }
.salesmap .nowrap { margin-right: 12px; }
.salesmap .code { fill: var(--ink); }
.salesmap .code.sub { font-size: 9.5px; font-weight: 600; }
.salesmap .code.s-r3, .salesmap .code.s-r4, .salesmap .code.n-sales, .salesmap .code.l-state, .salesmap a:hover .code.s-r3, .salesmap a:hover .code.s-r4, .salesmap a:hover .code.n-sales, .salesmap a:hover .code.l-state { fill: var(--on-dark); }
.salesmap a:hover .code { fill: var(--ink); }
.salesmap .code.out { fill: var(--fg); }
[data-theme="dark"] .salesmap .code { fill: var(--on-dark); }
[data-theme="dark"] .salesmap .code.s-r4, [data-theme="dark"] .salesmap a:hover .code.s-r4 { fill: var(--ink); }
[data-theme="dark"] .salesmap .code.s-none { fill: var(--on-dark-soft); }
.salesmap path.l-unknown, .salesmap .key.l-unknown { fill: color-mix(in srgb, var(--fg-muted) 30%, var(--card)); background: color-mix(in srgb, var(--fg-muted) 30%, var(--card)); }
/* Unemployment tax map: blue ramp for amounts and rates; amber for FUTA credit reduction states */
.uimap { --s1: color-mix(in srgb, var(--blue) 22%, var(--card)); --s2: color-mix(in srgb, var(--blue) 45%, var(--card)); --s3: color-mix(in srgb, var(--blue) 72%, var(--card)); --s4: var(--blue-d); --amber: color-mix(in srgb, var(--status-attention) 75%, var(--card)); }
[data-theme="dark"] .uimap { --s1: color-mix(in srgb, var(--blue) 25%, var(--ink2)); --s2: color-mix(in srgb, var(--blue) 50%, var(--ink2)); --s3: color-mix(in srgb, var(--blue) 75%, var(--ink2)); --s4: var(--blue-l); --amber: color-mix(in srgb, var(--status-attention) 85%, var(--ink2)); }
.uimap path { stroke: var(--panel); stroke-width: 1.2; transition: filter .15s; }
.uimap a:hover path, .uimap a:focus path { filter: brightness(.85); }
.uimap[hidden] { display: none; }
.uimap path.u-w1, .uimap .key.u-w1, .uimap path.u-ok, .uimap .key.u-ok { fill: var(--s1); background: var(--s1); }
.uimap path.u-w2, .uimap .key.u-w2 { fill: var(--s2); background: var(--s2); }
.uimap path.u-w3, .uimap .key.u-w3 { fill: var(--s3); background: var(--s3); }
.uimap path.u-w4, .uimap .key.u-w4 { fill: var(--s4); background: var(--s4); }
.uimap path.u-cr, .uimap .key.u-cr { fill: var(--amber); background: var(--amber); }
.uimap path.u-na, .uimap .key.u-na { fill: var(--line); background: var(--line); }
.uimap path.u-plain, .uimap .key.u-plain { fill: var(--panel); background: var(--panel); }
.recipmap { max-width: 720px; }
.uimap .key.c-nd { background: repeating-linear-gradient(45deg, var(--line) 0 3px, var(--fg-muted) 3px 5px); }
/* Conformity: a provision's treatment as a tag on state pages and a short cell in the 51-state table. */
.pt-tag[class*="cf-"] { border-left-width: 4px; white-space: nowrap; }
.pt-tag.cf-ok, .cf-cell.cf-ok { border-left-color: var(--blue-d); }
.pt-tag.cf-mod, .cf-cell.cf-mod { border-left-color: color-mix(in srgb, var(--blue) 45%, var(--card)); }
.pt-tag.cf-dec, .cf-cell.cf-dec { border-left-color: var(--status-attention); }
.pt-tag.cf-nd, .cf-cell.cf-nd { border-left-style: dashed; border-left-color: var(--fg-muted); }
.pt-tag.cf-na { color: var(--fg-muted); background: transparent; }
.cf-cell { display: inline-block; font-size: .82rem; padding: 0 0 0 6px; border-left: 4px solid var(--line); white-space: nowrap; }
.cf-cell.cf-na { color: var(--fg-muted); }
table.cf-prov th[scope=row] { white-space: normal; min-width: 150px; }
table.cf-prov td:first-of-type { white-space: nowrap; }
table.cf-all td:nth-child(3) { white-space: nowrap; }
.uimap .key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; border: 1px solid var(--border2); }
.uimap .nowrap { margin-right: 12px; }
.uimap .code { fill: var(--ink); }
.uimap .code.sub { font-size: 9.5px; font-weight: 600; }
.uimap .code.u-w3, .uimap .code.u-w4, .uimap a:hover .code.u-w3, .uimap a:hover .code.u-w4 { fill: var(--on-dark); }
.uimap a:hover .code { fill: var(--ink); }
.uimap .code.out { fill: var(--fg); }
[data-theme="dark"] .uimap .code { fill: var(--on-dark); }
[data-theme="dark"] .uimap .code.u-w4, [data-theme="dark"] .uimap a:hover .code.u-w4 { fill: var(--ink); }
/* All maps page: two maps side by side where there is room */
.mapgroup { margin-top: 1.5em; }
.mapgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.mapgrid.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.mapcell h3 { margin: .2em 0 .3em; font-size: 1rem; }
.mapcard { margin: 0; }
.mapcard figcaption { font-size: .8rem; }
@media (max-width: 800px) { .mapgrid { grid-template-columns: minmax(0, 1fr); } }

/* Site search, front and center on the home page */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sitesearch { position: relative; max-width: 720px; margin: 22px 0 18px; }
.sitesearch-box { display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(11, 14, 20, .08); transition: border-color .15s, box-shadow .15s; }
.sitesearch-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 28px rgba(11, 14, 20, .08); }
.sitesearch-box svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--fg-muted); stroke-width: 2; stroke-linecap: round; }
.sitesearch-box input { flex: 1; min-width: 0; height: 58px; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 1.12rem; }
.sitesearch-box input::placeholder { color: var(--fg-muted); }
.sitesearch-results { position: absolute; z-index: 40; left: 0; right: 0; top: 64px; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(11, 14, 20, .18); }
.sitesearch-results a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--fg); }
.sitesearch-results li[aria-selected] a, .sitesearch-results a:hover { background: var(--accent-soft); }
.sitesearch-results .r-t { font-weight: 600; }
.sitesearch-results .r-s { font-size: .85rem; color: var(--fg-muted); }
.sitesearch-results .none { padding: 10px 12px; color: var(--fg-muted); }
.sitesearch-hint { margin: 8px 2px 0; }
@media (max-width: 600px) { .sitesearch-box input { height: 52px; font-size: 1rem; } .sitesearch-results { top: 58px; } }

/* IRS budget charts on the Federal page */
.bchart { width: 100%; height: auto; display: block; margin: 8px 0 4px; }
.bchart .b { fill: var(--accent); }
.bchart .b.cr { fill: color-mix(in srgb, var(--accent) 60%, var(--panel)); }
.bchart .b.req { fill: url(#req-hatch); stroke: var(--accent); stroke-width: 1.5; }
.bchart .hatch-bg { fill: var(--accent-soft); } .bchart .hatch-fg { fill: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.bchart .v { font-size: 12px; font-weight: 600; fill: var(--fg); }
.bchart .l { font-size: 12px; fill: var(--fg-muted); }
.bchart .axis { stroke: var(--line); stroke-width: 1; }
.budgetpie { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: 20px; align-items: center; margin: 8px 0; }
.budgetpie svg { width: 100%; height: auto; }
.budgetpie .s { fill: color-mix(in srgb, var(--fg-muted) 26%, var(--panel)); stroke: var(--panel); stroke-width: 2; }
.budgetpie .s.alt { fill: color-mix(in srgb, var(--fg-muted) 40%, var(--panel)); }
.budgetpie .irs { fill: var(--accent); stroke: var(--panel); stroke-width: 1; }
.budgetpie .lead { stroke: var(--accent); stroke-width: 1.5; }
.budgetpie .irsdot { fill: var(--accent); }
.budgetpie .irslabel { font-size: 13px; font-weight: 700; fill: var(--accent-strong); }
.budgetpie .tot { font-family: var(--font-head); font-size: 26px; font-weight: 600; fill: var(--fg); }
.budgetpie .totl { font-size: 12px; fill: var(--fg-muted); }
.budgetpie .callout { font-size: 1rem; margin: 0 0 12px; }
.budgetpie .callout b { display: block; font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; color: var(--accent); }
.pielegend { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.pielegend li { display: grid; grid-template-columns: 14px 1fr auto 52px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pielegend li.irs { font-weight: 700; color: var(--accent-strong); }
.pielegend .sw { width: 12px; height: 12px; border-radius: 3px; }
.pielegend .sw.s { background: color-mix(in srgb, var(--fg-muted) 26%, var(--panel)); } .pielegend .sw.s.alt { background: color-mix(in srgb, var(--fg-muted) 40%, var(--panel)); } .pielegend .sw.irs { background: var(--accent); }
.pielegend .am, .pielegend .pc { text-align: right; font-variant-numeric: tabular-nums; }
.segbar { display: flex; gap: 2px; margin: 10px 0 6px; border-radius: 8px; overflow: hidden; min-height: 52px; }
.segbar .sg { display: flex; flex-direction: column; justify-content: center; padding: 6px 10px; font-size: .82rem; min-width: 0; overflow: hidden; white-space: nowrap; }
.segbar .sg b { font-size: 1rem; }
.segbar .resc { background: color-mix(in srgb, var(--fg-muted) 30%, var(--panel)); color: var(--fg); }
.segbar .spent { background: var(--accent); color: var(--on-dark); }
.segbar .left { background: var(--accent-soft); color: var(--accent-strong); }
@media (max-width: 700px) { .budgetpie { grid-template-columns: 1fr; } .bchart .v, .bchart .l { font-size: 15px; } }

/* Federal hub: links to the federal sub-pages */
.fedtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 18px 0 8px; }

/* IRS leadership: division and office cards */
.divcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 12px 0; }
.divcard h3 { margin: 2px 0 4px; }
.divcard p { margin: 6px 0; }
.divkind { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-strong); }
.pnote { margin: 4px 0 0; }
.pnote summary { cursor: pointer; font-size: .82rem; color: var(--fg-muted); }
.pnote p { overflow-wrap: anywhere; }

/* IRS case flow on the leadership page */
.flowstrip { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 14px 0 10px; counter-reset: fs; }
.flowstrip li { counter-increment: fs; }
.flowstrip a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; background: var(--accent-soft); color: var(--accent-strong); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; }
.flowstrip a::before { content: counter(fs); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-dark); font-size: .78rem; }
.flowstrip li:not(:last-child)::after { content: "\2192"; margin-left: 6px; color: var(--fg-muted); }
.flowstage { border-left: 3px solid var(--accent-soft); padding-left: 14px; margin: 18px 0; }
.flowstage h3 { display: flex; align-items: center; gap: 10px; }
.fnum { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-dark); font-size: .9rem; }
.flowsteps, .flowalong { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.flowstep { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.flowstep p, .flowalong p { margin: 5px 0; }
.fname { font-weight: 700; margin: 0 0 4px; }
.divchip { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--tag-bg); color: var(--fg); text-decoration: none; }
.fnext { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--line); font-size: .85rem; }
.fnext li { margin: 4px 0; }
.fnext li::before { content: "\2192 "; color: var(--accent); font-weight: 700; }

/* IRS statistics: migration columns on state pages */
.migcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.migcols ol { margin: 4px 0 0; padding-left: 1.3em; }