/* abacus.css -- Project Abacus design system (site release 2026-10-24). Loaded after each page's own styles by the
   national map, every state map and every generated page; generated by scripts/national/site_pages.py.
   Fonts: IBM Plex Sans and IBM Plex Mono (SIL Open Font License 1.1), self-hosted in /assets/fonts/.
   Interface colors are separate from the cartographic palette (--pfoa*, --pfos*, --hi*, --st*, --other, --none, --nosys). */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
:root{--ab-sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ab-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 /* interface: neutral grays; the teal accent is kept for links and focus only */
 --ab-hero:#383b3f;--ab-hero-2:#4d5156;--ab-hero-line:#383b3f;--ab-hero-ink:#ffffff;--ab-hero-dek:#e1e3e5;--ab-hero-muted:#b3b7bb;
 --bg:#f5f6f3;--panel:#ffffff;--ink:#202326;--muted:#5f6368;--line:#dedfe0;--accent:#3e7880;--chip:#eff0f0;--hot:#9b2c1c;
 /* cartographic palette. Categories and thresholds are unchanged; hue = the measure that dominates, value and saturation =
    magnitude (below a limit / 1-3 x / at least 3 x). Monitored with no PFAS quantified = solid grey; not monitored = hatched. */
 --pfoa0:#ead6cf;--pfoa1:#bd7b64;--pfoa2:#8b3a25;
 --pfos0:#d9dbea;--pfos1:#7f85b5;--pfos2:#3b4285;
 --hi0:#ece3c6;--hi1:#c6a95b;--hi2:#8a6914;
 --st0:#d3dfea;--st1:#6d93b8;--st2:#2c5a85;
 --other:#88a19d;--none:#cfd3d7;--nosys:#f3f3f1;--hatch:#bcc2c8;
 --cline:#c3c8ce;--river:#7fa9c6;--rivercase:#d6e4ee;--stream:#a9c8dc;--tribal:#6b4226}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ab-hero:#2a2c2f;--ab-hero-2:#3e4146;--ab-hero-line:#36393d;
 --bg:#121314;--panel:#1b1c1e;--ink:#e6e7e8;--muted:#a2a5a9;--line:#2e3033;--accent:#7fb8bf;--chip:#242629;--hot:#ff8f7d;
 --none:#4a5057;--nosys:#1b1e22;--hatch:#3a4047;--cline:#4a5058;--river:#5f8fb0;--rivercase:#25394a;--stream:#3f6a88}}
:root[data-theme=dark]{--ab-hero:#2a2c2f;--ab-hero-2:#3e4146;--ab-hero-line:#36393d;
 --bg:#121314;--panel:#1b1c1e;--ink:#e6e7e8;--muted:#a2a5a9;--line:#2e3033;--accent:#7fb8bf;--chip:#242629;--hot:#ff8f7d;
 --none:#4a5057;--nosys:#1b1e22;--hatch:#3a4047;--cline:#4a5058;--river:#5f8fb0;--rivercase:#25394a;--stream:#3f6a88}
html,body{font-family:var(--ab-sans);-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink)}
input,select,button,textarea{font-family:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* ---------------- page header: identity card, geographic context, then summary counts for the current view ---------------- */
.ab-head{display:flow-root;padding:12px 16px 0!important;border-bottom:0!important;background:var(--bg)!important}
.ab-hero{background:var(--ab-hero);color:var(--ab-hero-ink);border:1px solid var(--ab-hero-line);border-radius:6px;padding:13px 18px 14px}
.ab-hero-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0 0 9px}
.ab-mark{color:var(--ab-hero-muted)!important;text-decoration:none!important;font:500 11px/1.4 var(--ab-sans);letter-spacing:.07em;white-space:nowrap}
.ab-mark .ab-sep{margin:0 .6em;opacity:.7}.ab-mark:hover{color:#fff!important}
.ab-hero .ab-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px 18px;font-size:12.5px;line-height:1.4}
.ab-hero .ab-links a{color:var(--ab-hero-dek);text-decoration:none}.ab-hero .ab-links a:hover{color:#fff;text-decoration:underline}
.ab-crumbs{display:flex;flex-wrap:wrap;align-items:baseline;font-size:12.5px;line-height:1.4;color:var(--ab-hero-muted);margin:0 0 3px}
.ab-crumbs a{color:var(--ab-hero-dek);text-decoration:none}.ab-crumbs a:hover{color:#fff;text-decoration:underline}
.ab-crumbs .ab-sl{margin:0 .5em;opacity:.6}
.ab-hero h1{color:var(--ab-hero-ink);font:600 30px/1.12 var(--ab-sans);letter-spacing:-.012em;margin:0 0 8px;text-wrap:balance;overflow-wrap:anywhere}
.ab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px}
.ab-hero .ab-dek{margin:0;color:var(--ab-hero-dek);font-size:14.5px;line-height:1.4;max-width:none}
.ab-hero .ab-mono,.ab-tag.ab-mono{font-family:var(--ab-mono);font-weight:400;letter-spacing:.01em}
.ab-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;line-height:1.3;color:var(--ab-hero-muted)}
.ab-tag{background:var(--ab-hero-2);color:#eceef0;border-radius:3px;padding:3px 7px;font-weight:500}
.ab-stats{display:grid;grid-template-columns:repeat(4,minmax(0,220px));gap:10px 24px;margin:0;padding:14px 2px 12px;border-bottom:1px solid var(--line)}
.ab-stats div{min-width:0}
.ab-stats b{display:block;font:600 24px/1.15 var(--ab-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.ab-stats span{display:block;margin-top:3px;font-size:12px;line-height:1.3;color:var(--muted)}
.ab-head>p{margin:10px 2px 12px!important;color:var(--muted);font-size:13px;line-height:1.5;max-width:920px}
.ab-head>p.fjump{margin:-4px 2px 12px!important}
#natlink{display:none!important}
/* ---------------- state maps: full-width map, then the results for the current selection ---------------- */
html[data-state] .wrap{display:block!important;height:auto!important;min-height:0!important;grid-template-columns:none!important}
html[data-state] #map{height:clamp(440px,66vh,900px)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
html[data-state] aside#panel{display:block;border:0!important;background:var(--bg);padding:20px 16px 8px;max-height:none!important;overflow:visible!important;font-size:14px}
#panel h2{font:600 22px/1.2 var(--ab-sans);letter-spacing:-.01em;margin:8px 0 6px;overflow-wrap:anywhere}
#panel h3{font:500 11px/1.4 var(--ab-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
#panel h4{font:500 11px/1.4 var(--ab-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:24px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
#panel p,#panel .note,#panel>.small,#panel details>p{max-width:940px}
#panel .back{max-width:none;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:10px}
#panel .note{background:var(--panel);border:1px solid var(--line);border-radius:4px;color:var(--muted)}
#panel>table{max-width:760px}
#panel svg{max-width:560px}
#panel .tbl{max-height:none;border-radius:4px;background:var(--panel)}
#panel details .tbl{max-height:70vh}
#panel details{border-top:1px solid var(--line);padding-top:8px;margin:14px 0}
#panel summary{font-weight:500}
#panel table{background:var(--panel)}
#panel td,#panel th{padding:5px 8px}
/* water-system lists (county and location views): one row per system, aligned columns */
#panel .sys{display:grid;grid-template-columns:minmax(200px,1.5fr) minmax(170px,1fr) minmax(260px,2.5fr);gap:2px 18px;align-items:start;
 border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:9px 6px;background:transparent}
#panel .sys:hover{background:var(--panel)}
#panel .sys>*{grid-column:3}
#panel .sys>.nm{grid-column:1;grid-row:1/span 4;color:var(--ink);font-weight:500}
#panel .sys{cursor:pointer}#panel .sys:hover>.nm{text-decoration:underline}
#panel .sys>div:nth-child(2){grid-column:2;grid-row:1/span 4}
#panel .sys .meta{font-size:12.5px}
.ab-ctl~.ab-jump,.ab-jump{display:none}
/* the statewide directory under the map belongs to the state view; it is not rendered for a county, system or location */
.sp-list[hidden]{display:none!important}
/* ---------------- map controls: search and Layers on one row, the panel opens below; legend at the lower right ---------------- */
.controls.ab-ctl{background:none!important;border:0!important;padding:0!important;box-shadow:none!important;width:340px;max-width:calc(100% - 64px)!important}
.ctl-row{display:flex;gap:8px;align-items:stretch}
.ctl-row .search{flex:1 1 auto;min-width:0;margin:0!important;position:relative}
.ctl-row .search input{height:36px;padding:0 10px 0 31px!important;border:1px solid var(--line);border-radius:6px!important;background:var(--panel);font-size:13.5px}
.ctl-ico{position:absolute;left:10px;top:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none;line-height:0}
.ab-ctl #sresults{top:40px!important}
.ctl-toggle{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);font:500 13px/1 var(--ab-sans);cursor:pointer}
.ctl-toggle:hover{border-color:var(--muted)}
.ctl-toggle[aria-expanded=true]{background:var(--chip)}
.ctl-toggle svg{flex:none;color:var(--muted)}
.ctl-toggle .ctl-n{font:500 11px/1 var(--ab-mono);color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:2px 5px;background:var(--panel)}
#ctl-body{margin-top:8px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.ab-leg{position:absolute;right:10px;bottom:30px;z-index:2;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:6px;max-width:320px;max-height:calc(100% - 100px)}
.ab-leg .legend:not([hidden]){display:block!important;position:static!important;min-height:0;max-height:100%;overflow:auto;max-width:320px}
@media (max-width:900px){.controls.ab-ctl{width:auto;right:58px;max-width:none!important}#ctl-body{max-height:56vh;overflow:auto}
 .ab-leg{max-width:calc(100% - 20px);max-height:calc(100% - 110px)}
 .ab-jump:not([hidden]){display:inline-flex;position:absolute;left:10px;bottom:30px;z-index:3;align-items:center;height:34px;max-width:calc(100% - 140px);padding:0 12px;
  border:1px solid var(--ab-hero);border-radius:6px;background:var(--ab-hero);color:#fff;font:500 13px/1 var(--ab-sans);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #panel .sys{grid-template-columns:1fr}#panel .sys>*{grid-column:1!important;grid-row:auto!important}
 html[data-state] aside#panel{padding:16px 12px 6px}}
/* ---------------- national map: full width, notes beneath it ---------------- */
html[data-state-url] .wrap{display:block!important;min-height:0!important;grid-template-columns:none!important}
html[data-state-url] main{padding:12px 16px 8px}
html[data-state-url] #mapwrap svg{display:block;width:100%;height:auto;max-height:74vh}
html[data-state-url] aside#panel{display:block;border:0!important;background:none!important;padding:4px 16px 6px;max-width:960px;overflow:visible}
/* ---------------- panels and legends: white, 1px rules, no decoration ---------------- */
.legend,.mapcard,#sresults{border-radius:6px!important;box-shadow:none!important;border:1px solid var(--line)!important}
.controls:not(.ab-ctl){border-radius:6px!important;box-shadow:none!important}
.controls h3,.legend h3,.legend .grp{font:500 10.5px/1.4 var(--ab-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.legend{font-size:12px}.legend .row{display:flex;align-items:center;gap:8px;margin:3px 0}
.legend .row .small{margin-left:auto;padding-left:10px;font:400 11px/1.3 var(--ab-mono);color:var(--muted);white-space:nowrap}
.sw{width:18px;height:12px;border-radius:2px;border:1px solid rgba(0,0,0,.07)}
input,select{border-radius:6px!important}
button.link,.link{font-family:var(--ab-sans);color:var(--accent)}
.osm-note{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.badge,.chip{border-radius:3px!important;font:500 12px/1.4 var(--ab-sans)!important;letter-spacing:0}
.note{border-radius:4px}
/* ---------------- data tables: horizontal rules, right-aligned numbers in a monospaced face ---------------- */
#panel table,.ab-page table{border-collapse:collapse}
#panel th,.ab-page thead th{font:500 10.5px/1.3 var(--ab-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#panel td.num,#panel .stat b,.stats .stat b,.ab-page td.n{font-family:var(--ab-mono);font-variant-numeric:tabular-nums}
#panel td.num{text-align:right}
#panel [style*="c0392b"]{color:var(--hot)!important}
/* ---------------- national county map: thin county rules, slightly stronger state lines, one hover ---------------- */
path.c{stroke:var(--panel);stroke-opacity:.85;stroke-width:.22}
path.c:hover{stroke:var(--ink);stroke-opacity:1;stroke-width:1}
path.so{stroke-opacity:.55;stroke-width:.7}
path.so.hl{stroke:var(--ink);stroke-opacity:1;stroke-width:1.6}
.stat{border-radius:4px}
/* ---------------- generated pages ---------------- */
.ab-page{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--ab-sans)}
.ab-page .ab-head{max-width:1100px;margin:0 auto;padding:16px 20px 0!important}
.ab-page main{max-width:1100px;margin:0 auto;padding:16px 20px 34px}
.ab-page h2{font-size:19px;font-weight:600;margin:32px 0 8px;padding-top:12px;border-top:1px solid var(--line)}.ab-page h3{font-size:14.5px;font-weight:600;margin:20px 0 6px}
.ab-page .crumbs{font-size:13px;color:var(--muted)}.ab-page .lede{font-size:16px;max-width:820px}
.ab-page .muted,.ab-page .small{color:var(--muted);font-size:13px}
.ab-page .note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:0 4px 4px 0;padding:10px 14px;font-size:14px;max-width:880px}
.ab-page .links{font-size:14px}
.ab-page .facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 22px;margin:14px 0}
.ab-page .facts div{border-top:1px solid var(--line);padding-top:6px}
.ab-page .facts dt{font:500 10.5px/1.4 var(--ab-sans);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.ab-page .facts dd{margin:2px 0 0}
.ab-page .facts div:first-child dd{font-family:var(--ab-mono)}
.ab-page .status{line-height:2}
.ab-page .badge{display:inline-block;padding:1px 8px;margin-right:8px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--muted)}
.ab-page .b-over{border-left-color:var(--hot)}.ab-page .b-below{border-left-color:var(--hi1)}.ab-page .b-other{border-left-color:var(--other)}.ab-page .b-none{border-left-color:var(--none)}
.ab-page .tbl{overflow-x:auto;margin:6px 0 10px}
.ab-page table{width:100%;font-size:13.5px}
.ab-page th,.ab-page td{padding:5px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ab-page thead th{border-bottom:1px solid var(--ink);white-space:nowrap;vertical-align:bottom}
.ab-page tbody th{font-weight:500}
.ab-page td.hot,.ab-page td.hot b{color:var(--hot);font-weight:600}.ab-page td.nd,.ab-page .nd{color:var(--muted)}
.ab-page table.res td,#epa td,#state-std td,#stats td,#history td:nth-child(n+4):nth-child(-n+6),
.dir-t td:nth-child(n+4):nth-child(-n+7),.dir-u td:nth-child(5),#downloads td:nth-child(4){text-align:right;font-family:var(--ab-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-page table.res td.det{font-weight:500;color:var(--ink)}.ab-page table.res td:not(.det){color:var(--muted)}
.ab-page table.res thead th{text-align:right}.ab-page table.res thead th:first-child{text-align:left}
.dir-t td:nth-child(2),.dir-u td:nth-child(2){font-family:var(--ab-mono);font-size:12.5px}
.ab-page ul.plain{padding-left:18px}
.ab-page code{font:13px var(--ab-mono)}
.ab-page footer.site{border-top:1px solid var(--line);padding:16px 20px 28px;font-size:13px;color:var(--muted);max-width:1100px;margin:0 auto}
/* crawlable table on the state maps */
.sp-tbl td:nth-child(n+4):nth-child(-n+7){text-align:right;font-family:var(--ab-mono);font-variant-numeric:tabular-nums}.sp-tbl td:nth-child(2){font-family:var(--ab-mono);font-size:12px}
.sp-tbl thead th{border-bottom:1px solid var(--ink)!important}
.sp-tbl td:first-child{position:sticky;left:0;background:var(--bg)}
@media (max-width:700px){.ab-head,.ab-page .ab-head{padding:10px 10px 0!important}.ab-hero{padding:11px 14px 12px}
 .ab-hero .ab-links{margin-left:0;width:100%;gap:2px 14px}.ab-hero h1{font-size:25px}.ab-hero .ab-dek{font-size:13.5px}
 .ab-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;padding:11px 2px 10px}.ab-stats b{font-size:19px}.ab-stats span{font-size:11px}
 .ab-head>p{margin:8px 2px 10px!important}.ab-page main{padding:12px 14px 26px}
 #panel .tbl td:first-child,#panel .tbl th:first-child{position:sticky;left:0;background:var(--panel);z-index:1}}