/* Recipient Map USA */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }

/* Layout: an atlas plate on the left with a recipient ledger beside it. Color is reserved for data: a green ramp for amounts, blue/orange-red for change. */
:root {
  --bg: #f4f7f5; --panel: #ffffff; --fg: #15231e; --muted: #56675f; --rule: #d3ddd8;
  --accent: #0d6a4c; --accent-soft: #dcefe6; --nil: #e7ecea; --line: #ffffff;
  --r0: #d8f3e3; --r1: #a9d7bd; --r2: #75bc96; --r3: #449f73; --r4: #138155; --r5: #00603d; --r6: #004128;
  --d0: #ab3415; --d1: #d66c51; --d2: #ecac9b; --d3: #ecebe9; --d4: #9cc2ea; --d5: #4a94db; --d6: #0065b4;
  --nd-bg: #eef1ef; --nd-ln: #c9d3ce; --up: #0065b4; --down: #ab3415; --flag: #6d28d9; --flag-soft: #ede7fb;
  --sel: #c4501b;
  --display: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #101715; --panel: #18211e; --fg: #e8efec; --muted: #9db0a7; --rule: #2e3b36;
  --accent: #6fd3a8; --accent-soft: #1f3a2f; --nil: #222c28; --line: #101715;
  --r0: #143525; --r1: #145538; --r2: #1f744f; --r3: #2b9667; --r4: #44b782; --r5: #71d6a3; --r6: #a9f1ca;
  --d0: #f98b6f; --d1: #cc6349; --d2: #8d4635; --d3: #363534; --d4: #32618e; --d5: #418ad1; --d6: #70b3f7;
  --nd-bg: #18211e; --nd-ln: #34433d; --up: #70b3f7; --down: #f98b6f; --flag: #c4b5fd; --flag-soft: #2c2540;
  --sel: #ff9a5c; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #101715; --panel: #18211e; --fg: #e8efec; --muted: #9db0a7; --rule: #2e3b36;
  --accent: #6fd3a8; --accent-soft: #1f3a2f; --nil: #222c28; --line: #101715;
  --r0: #143525; --r1: #145538; --r2: #1f744f; --r3: #2b9667; --r4: #44b782; --r5: #71d6a3; --r6: #a9f1ca;
  --d0: #f98b6f; --d1: #cc6349; --d2: #8d4635; --d3: #363534; --d4: #32618e; --d5: #418ad1; --d6: #70b3f7;
  --nd-bg: #18211e; --nd-ln: #34433d; --up: #70b3f7; --down: #f98b6f; --flag: #c4b5fd; --flag-soft: #2c2540;
  --sel: #ff9a5c; color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font: 400 15px/1.5 var(--body); }
.wrap { max-width: 1320px; margin: 0 auto; padding-block: 24px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 20px; }
header { display: grid; gap: 6px; }
h1 { font: 800 clamp(28px, 4vw, 42px)/1.05 var(--display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 68ch; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--muted); }
.stats b { font: 500 15px var(--mono); color: var(--fg); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; position: relative; }
.search { position: relative; flex: 1 1 280px; max-width: 460px; min-width: 0; }
.search input { width: 100%; font: 400 15px var(--body); color: var(--fg); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 9px 12px; }
.results { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 8px 24px rgb(0 0 0 / .16); max-height: 340px; overflow: auto; }
.results button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 8px 12px; color: var(--fg); font: 500 13px var(--body); cursor: pointer; }
.results button:hover { background: var(--accent-soft); }
.results small { grid-column: 1 / -1; color: var(--muted); font-weight: 400; }
.results .none { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 14px; min-width: 0; }
.crumbs a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.crumbs span { color: var(--muted); }
.crumbs b { font-weight: 600; }
.main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.plate { display: grid; gap: 10px; min-width: 0; position: relative; }
.mapwrap { position: relative; min-width: 0; }
.zoomout { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--panel); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.zoomctl { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.zoomctl button { width: 34px; height: 32px; border: 0; background: none; color: var(--fg); font: 600 18px/1 var(--body); cursor: pointer; }
.zoomctl button + button { border-top: 1px solid var(--rule); }
.zoomctl button:hover { background: var(--accent-soft); }
.zoomhint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; background: var(--fg); color: var(--bg); font-size: 12px; padding: 5px 10px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.mapbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; color: var(--muted); font: 600 13px var(--body); padding: 6px 12px; border-radius: 4px; cursor: pointer; }
.seg button:hover:not(:disabled) { color: var(--fg); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--panel); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.agsel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.agsel select { font: 500 13px var(--body); color: var(--fg); background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 7px 10px; max-width: 220px; }
svg#map { background: none; width: 100%; height: auto; display: block; aspect-ratio: 975 / 610; touch-action: pan-y; cursor: default; user-select: none; -webkit-user-select: none; }
svg#map.zoomed { cursor: grab; }
svg#map.panning, svg#map.panning path { cursor: grabbing; }
#map path.st, #map path.co { stroke: var(--line); vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .25s, opacity .2s; }
#map path.st { stroke-width: .8; }
#map path.co { stroke-width: .4; }
#map path:hover, #map path.peek { stroke: var(--fg); stroke-width: 1.6; }
#map path:focus-visible { outline: none; stroke: var(--sel); stroke-width: 2; }
#map path.on { stroke: var(--sel); stroke-width: 2.4; }
#map .dim { opacity: .28; }
#map.picking path.st:not(.hit):not(.dim), #map.picking path.co:not(.hit) { opacity: .18; }
#map path.mesh { fill: none; stroke: var(--line); stroke-width: 1.1; vector-effect: non-scaling-stroke; pointer-events: none; }
#map .nd-bg { fill: var(--nd-bg); } #map .nd-ln { stroke: var(--nd-ln); stroke-width: 2; }
.q0 { fill: var(--r0); } .q1 { fill: var(--r1); } .q2 { fill: var(--r2); } .q3 { fill: var(--r3); } .q4 { fill: var(--r4); } .q5 { fill: var(--r5); } .q6 { fill: var(--r6); } .qn { fill: url(#nodata); }
.d0 { fill: var(--d0); } .d1 { fill: var(--d1); } .d2 { fill: var(--d2); } .d3 { fill: var(--d3); } .d4 { fill: var(--d4); } .d5 { fill: var(--d5); } .d6 { fill: var(--d6); }
.legend { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.legend .lt { font-weight: 600; color: var(--fg); }
.legend .keys { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.legend .key { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; border-radius: 4px; padding: 3px 6px 3px 3px; color: var(--muted); font: 500 12px var(--body); cursor: default; }
.legend .key:hover, .legend .key:focus-visible { border-color: var(--rule); background: var(--panel); color: var(--fg); }
.legend i { display: inline-block; width: 22px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.sq0 { background: var(--r0); } .sq1 { background: var(--r1); } .sq2 { background: var(--r2); } .sq3 { background: var(--r3); } .sq4 { background: var(--r4); } .sq5 { background: var(--r5); } .sq6 { background: var(--r6); }
.sd0 { background: var(--d0); } .sd1 { background: var(--d1); } .sd2 { background: var(--d2); } .sd3 { background: var(--d3); } .sd4 { background: var(--d4); } .sd5 { background: var(--d5); } .sd6 { background: var(--d6); }
.sqn { background: repeating-linear-gradient(45deg, var(--nd-bg) 0 3px, var(--nd-ln) 3px 5px); }
.kpis { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.kpis b { font: 500 14px var(--mono); color: var(--fg); margin-right: 4px; }
.kpis b.up { color: var(--up); } .kpis b.down { color: var(--down); }
.agline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 13px; border-left: 3px solid var(--accent); padding-left: 10px; }
.agline .sub { grid-column: 1 / -1; }
.rank ol, ol.rank { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.rank .rk { display: flex; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; border-radius: 4px; padding: 5px 6px; color: var(--fg); font: 500 13px var(--body); text-align: left; cursor: pointer; }
.rank .rk:hover, .rank .rk:focus-visible { background: var(--accent-soft); }
a.nm { color: var(--fg); text-decoration: none; }
a.nm:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.caveat { font-size: 13px; color: var(--muted); margin: 0; max-width: 72ch; }
.terr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.terr a { text-decoration: none;  border: 1px solid var(--rule); background: var(--panel); color: var(--fg); border-radius: 3px; padding: 3px 8px; font: 500 12px var(--body); cursor: pointer; }
.ledger { background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 18px; display: grid; gap: 16px; min-width: 0; }
.ledger h2 { font: 800 22px/1.15 var(--display); margin: 0; letter-spacing: -0.01em; }
.big { font: 500 28px/1.1 var(--mono); }
.sub { font-size: 13px; color: var(--muted); }
.ledger h3 { font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; }
.rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; min-width: 0; }
.rows .nm { font-weight: 500; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.rows .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.3; }
.bar { grid-column: 1 / -1; height: 3px; background: var(--nil); }
.bar i { display: block; height: 100%; background: var(--accent); }
.empty { color: var(--muted); font-size: 13px; margin: 0; }
.method { border-top: 1px solid var(--rule); padding-top: 18px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.method h2 { font: 800 18px var(--display); margin: 0 0 6px; }
.method p, .method ul { margin: 0; font-size: 14px; max-width: 68ch; }
.method ul { padding-left: 18px; display: grid; gap: 5px; }
.method a { color: var(--accent); }
.funnel { width: 100%; border-collapse: collapse; font-size: 13px; }
.funnel td { padding: 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.funnel td:last-child { text-align: right; padding-left: 14px; }
#tip { position: fixed; z-index: 30; pointer-events: none; background: var(--fg); color: var(--bg); font-size: 12px; padding: 7px 10px; border-radius: 4px; max-width: 260px; line-height: 1.45; box-shadow: 0 4px 14px rgb(0 0 0 / .2); }
#tip b { display: block; font-weight: 600; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
@media (max-width: 900px) { .main { grid-template-columns: minmax(0, 1fr); } }

.skip { position: absolute; left: -999px; top: 8px; background: var(--panel); padding: 8px 12px; z-index: 40; }
.skip:focus { left: 16px; }
.topbar { background: var(--panel); border-bottom: 1px solid var(--rule); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.topin { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px; padding-block: 10px; }
.brand { font: 800 16px var(--display); color: var(--fg); text-decoration: none; letter-spacing: -0.01em; }
.topin nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.topin nav a { color: var(--muted); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.topin nav a:hover { color: var(--fg); }
.topin nav a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.hero { display: grid; gap: 6px; }
.btn { justify-self: start; background: none; border: 1px solid var(--rule); border-radius: 4px; color: var(--fg); font: 600 13px var(--body); padding: 7px 12px; cursor: pointer; }
.btn:hover { background: var(--accent-soft); }
.allstates { border-top: 1px solid var(--rule); padding-top: 16px; }
.allstates h2 { font: 800 18px var(--display); margin: 0 0 6px; }
.allstates p { margin: 0; font-size: 14px; line-height: 1.9; }
.allstates a { color: var(--accent); margin-right: 10px; white-space: nowrap; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters input, .filters select { font: 400 15px var(--body); color: var(--fg); background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; padding: 9px 12px; min-width: 0; }
.filters input { flex: 1 1 260px; max-width: 460px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data .r { text-align: right; }
table.data a { color: var(--accent); }
table.data .prog { color: var(--muted); font-size: 13px; min-width: 200px; }
table.funnel td:last-child { white-space: nowrap; }
.prose { display: grid; gap: 24px; max-width: 760px; }
.prose h2 { font: 800 20px var(--display); margin: 0 0 8px; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.prose a { color: var(--accent); }
.prose p { margin: 0; }
footer { border-top: 1px solid var(--rule); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.footin { max-width: 1320px; margin: 0 auto; padding-block: 16px 28px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.footin p { margin: 0; }
.footin a { color: inherit; }

/* Unusual patterns */
.flagbtn { border: 1px solid var(--rule); background: var(--panel); color: var(--fg); font: 600 13px var(--body); padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.flagbtn:hover { border-color: var(--flag); }
.flagbtn[aria-pressed="true"] { background: var(--flag); border-color: var(--flag); color: var(--panel); }
#map path.flg { stroke: var(--flag); stroke-width: 2.2; }
.flags { border: 1px solid var(--rule); border-left: 3px solid var(--flag); border-radius: 4px; padding: 10px 12px; display: grid; gap: 6px; }
.flags h3 { margin: 0; }
.flags .fl { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.flags .sub a { color: var(--accent); }
.rank .rk small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.rank .rk .tags { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.tag { display: inline-block; font: 600 10.5px var(--body); font-style: normal; letter-spacing: .02em; padding: 2px 6px; border-radius: 3px; background: var(--flag-soft); color: var(--fg); white-space: nowrap; border-left: 3px solid var(--flag); }
.tag.t-up { border-left-color: var(--up); } .tag.t-down { border-left-color: var(--down); }
.lhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cmpbtn { flex: none; padding: 5px 10px; font-size: 12px; }
.cmpbtn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }

/* Compare */
.compare { display: grid; gap: 10px; scroll-margin-top: 12px; }
.chead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.chead h2 { font: 800 22px var(--display); margin: 0; }
.chead .sub { flex: 1 1 300px; margin: 0; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
table.cmp th, table.cmp td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
table.cmp thead th { position: sticky; top: 0; background: var(--panel); white-space: nowrap; }
table.cmp tbody th { font-weight: 500; color: var(--muted); width: 26%; }
table.cmp tr.sect th { font: 600 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 16px; }
table.cmp tr.cur th { color: var(--fg); font-weight: 700; }
table.cmp td.na { color: var(--muted); }
table.cmp .small { font-size: 12px; overflow-wrap: anywhere; }
.cbar { display: block; height: 4px; margin-top: 4px; background: var(--nil); border-radius: 2px; }
.cbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.cbar.neg i { background: var(--down); }
.cgo { background: none; border: 0; padding: 0; font: 700 14px var(--body); color: var(--accent); cursor: pointer; text-align: left; }
.cx { background: none; border: 0; margin-left: 6px; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.cx:hover { color: var(--fg); }
.cmppill { position: fixed; right: 16px; bottom: 16px; z-index: 25; background: var(--accent); color: var(--panel); font: 600 13px var(--body); text-decoration: none; padding: 9px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgb(0 0 0 / .2); }
.patterns-filters { display: flex; flex-wrap: wrap; gap: 10px; }