/* Tested Water. One shared 0 to 50% dot plot, warm for attention, teal for under the limit.
   Public Sans for reading, Source Serif 4 for headlines. Light only for now; dark mode was removed 2026-11-01 until the design is redone. */
/* Self-hosted variable fonts, latin subset (from Google Fonts, SIL Open Font License). */
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/public-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600 650; font-display: swap; src: url("/fonts/source-serif-4-latin.woff2") format("woff2"); }
:root {
  --bg: #f6f5f1; --surface: #ffffff; --ink: #15191e; --ink-2: #464c55; --ink-3: #646a73;
  --rule: #dedcd4; --rule-2: #ebe9e2;
  --warm: #c2410c; --warm-mid: #e58a5c; --warm-ink: #9a330a;
  --calm: #2b6777; --calm-ink: #1f5361; --neutral-dot: #5a6069;
  --band-rare: #e7eff0; --band-worth: #f6ece2; --band-common: #f8dfd1; --band-plain: #f0efea;
  --panel-bad: #fdf1ea; --panel-good: #ecf3f4; --on-color: #ffffff;
  color-scheme: light;
}
/* Names older scripts and pages still use (results.js), mapped onto the palette above. */
:root {
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fg: var(--ink); --muted: var(--ink-2); --faint: var(--ink-3); --line: var(--rule); --panel: var(--rule-2);
  --accent: var(--calm-ink); --high: var(--warm); --high-bg: var(--panel-bad);
  --high-line: color-mix(in srgb, var(--warm) 30%, var(--rule)); --high-text: var(--warm-ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { body { font-size: 17px; } }
a { color: var(--calm-ink); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, label:focus-visible { outline: 2px solid var(--calm); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 28px; line-height: 1.15; margin: 8px 0 0; }
h2 { font-size: 22px; line-height: 1.22; margin: 40px 0 10px; }
h3 { font-size: 19px; line-height: 1.3; margin: 24px 0 6px; }
@media (min-width: 900px) { h1 { font-size: 40px; } h2 { font-size: 28px; margin-top: 52px; } h3 { font-size: 21px; } }
p { margin: 10px 0 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .wrap { padding: 0 40px; } }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.muted { color: var(--ink-2); } .small { font-size: 15px; } .tiny { font-size: 13px; }
.lede { color: var(--ink-2); font-size: 17px; max-width: 62ch; }
@media (min-width: 900px) { .lede { font-size: 19px; } }
.label { display: inline-block; font: 650 12px/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--calm-ink); }
.byline { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); margin-top: 12px; }
.byline a { color: var(--ink-3); }
.disclosure { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }
.disclosure a { color: var(--ink-3); }

/* header */
.top { border-bottom: 1px solid var(--rule); background: var(--surface); position: relative; z-index: 5; }
.top .wrap { display: flex; align-items: center; gap: 12px 24px; height: 52px; }
.brand { display: flex; align-items: center; gap: 8px; font: 700 16px/1 var(--sans); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.brand svg { display: block; }
.nav { display: none; gap: 20px; font-size: 14.5px; font-weight: 550; }
.nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); text-decoration: underline; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-search { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; background: var(--surface); }
.find-mini { width: 150px; }
.find-mini svg { flex: none; }
.find-mini input { border: 0; outline: 0; font: inherit; font-size: 14px; width: 100%; background: transparent; color: var(--ink); padding: 2px 0; min-width: 0; }
.find-mini input::placeholder { color: var(--ink-2); }
.find-mini:focus-within { border-color: var(--ink-3); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; padding: 5px 10px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: none; }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 6px; display: grid; min-width: 200px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.menu nav a { padding: 10px 12px; color: var(--ink); text-decoration: none; font-weight: 550; border-radius: 6px; }
.menu nav a:hover, .menu nav a[aria-current] { background: var(--rule-2); }
@media (min-width: 420px) { .menu summary span { display: inline; } }
@media (min-width: 1000px) { .nav { display: flex; } .menu { display: none; } .find-mini { width: 200px; } }

main { padding: 12px 0 64px; }
@media (min-width: 900px) { main { padding-top: 28px; } }
.crumbs { font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
.crumbs a { color: var(--ink-2); }

/* general layout used by guides, problems, states and tools */
.cols { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; margin-top: 4px; }
.cols > article { flex: 999 1 620px; min-width: 0; }
.cols > aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.prose { max-width: 760px; }
.prose p, .prose li { max-width: 68ch; }
.prose li { margin: 6px 0; }
.prose p { color: var(--ink); }
.short { margin-top: 20px; border-radius: 10px; background: var(--panel-good); padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--calm) 25%, var(--rule)); position: relative; overflow: hidden; }
.short::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--calm); }
.short p { margin: 6px 0 0; font-size: 18px; line-height: 1.5; }
.card { border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; background: var(--surface); }
.card strong { display: block; }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.pill { font-size: 13px; font-weight: 650; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pill.high { color: var(--warm-ink); background: var(--band-common); }
.pill.mid { color: var(--warm-ink); background: var(--band-worth); }
.pill.low { color: var(--calm-ink); background: var(--band-rare); }

/* buttons and recommendation boxes */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 8px 18px; border-radius: 10px; background: var(--warm); color: var(--on-color); box-shadow: 0 1px 0 rgba(0,0,0,.10), 0 3px 10px color-mix(in srgb, var(--warm) 30%, transparent); text-decoration: none; font: 650 15px/1.25 var(--sans); border: 0; cursor: pointer; }
.btn:hover { color: var(--on-color); background: var(--warm-ink); }
.btn-buy { background: var(--warm); color: var(--on-color); }
.btn-buy:hover { color: var(--on-color); background: var(--warm-ink); }
.btn-ghost { background: transparent; color: var(--warm-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warm) 70%, transparent); }
.btn-ghost:hover { color: var(--warm-ink); background: color-mix(in srgb, var(--warm) 8%, transparent); }
.cta { display: flex; gap: 14px 16px; align-items: center; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; margin: 24px 0; background: var(--surface); }
.cta .cta-text { flex: 1 1 300px; }
.cta p { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.cta .pick { color: var(--ink); }
.cta .aff-note { font-size: 13.5px; color: var(--ink-2); }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cta-alt { font-size: 14px; }
.cta-soft { background: var(--panel-good); border-color: color-mix(in srgb, var(--calm) 20%, var(--rule)); }
.free { margin-top: 16px; background: var(--panel-good); border-radius: 8px; padding: 12px 14px; font-size: 15px; }
.testbox { margin-top: 48px; border-radius: 10px; padding: 20px 20px 4px; background: var(--surface); border: 1px solid var(--rule); }
.testbox h2 { margin: 0 0 4px; font-size: 22px; }
.testbox > p { color: var(--ink-2); }
.testbox .cta { background: var(--bg); }
.testbox .free { margin-bottom: 18px; }
@media (min-width: 900px) { .testbox { padding: 28px 28px 8px; } .testbox h2 { font-size: 26px; } }
.checklist { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.checklist li { background: var(--panel-good); color: var(--ink); border-radius: 999px; padding: 5px 12px 5px 30px; font-weight: 600; font-size: 14.5px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 11px; height: 6px; border-left: 2px solid var(--calm); border-bottom: 2px solid var(--calm); transform: translateY(-70%) rotate(-45deg); }

/* tables */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: 10px; margin: 14px 0; background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
table.data th, table.data td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
table.data thead th { border-top: 0; background: var(--rule-2); font-size: 12.5px; color: var(--ink-2); font-weight: 650; }
table.data .n { text-align: right; white-space: nowrap; }
table.data tbody th { font-weight: 650; background: var(--rule-2); width: 34%; }
table.data.kv { min-width: 0; }   /* label + value only: fits a phone without sideways scrolling */
.bar { display: flex; align-items: center; gap: 10px; }
.bar > span { flex: 1; height: 10px; background: var(--band-plain); border-radius: 999px; min-width: 60px; overflow: hidden; }
.bar > span > i { display: block; height: 10px; background: var(--warm); border-radius: 999px; }

/* well depth strip */
.depth-card { margin-top: 14px; }
.depth { position: relative; height: 58px; }
.depth .rail { position: absolute; left: 0; right: 0; top: 24px; height: 12px; background: var(--band-plain); border-radius: 999px; }
.depth .mid { position: absolute; top: 24px; height: 12px; background: var(--band-rare); border: 1px solid color-mix(in srgb, var(--calm) 40%, transparent); border-radius: 999px; }
.depth .mk { position: absolute; top: 16px; width: 4px; height: 28px; background: var(--calm); border-radius: 2px; }
.depth .mkl { position: absolute; top: -6px; font-size: 13px; font-weight: 650; color: var(--calm-ink); transform: translateX(-50%); white-space: nowrap; }
.ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }

/* questions */
.faq { margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { font-weight: 650; cursor: pointer; font-size: 17px; }
.faq .a { color: var(--ink-2); margin-top: 6px; }
.faq .a p { margin: 6px 0 0; }

/* sources */
.sources { margin-top: 40px; background: var(--rule-2); border-radius: 10px; padding: 18px 20px; font-size: 14.5px; color: var(--ink-2); }
.sources h2 { font-size: 17px; margin: 0 0 6px; color: var(--ink); }
.sources ul { margin: 6px 0 10px; padding-left: 18px; }
.sources .links { display: flex; gap: 8px 18px; flex-wrap: wrap; }

/* side boxes, chips, forms */
.side { border: 1px solid var(--rule); border-radius: 10px; padding: 18px; font-size: 15.5px; background: var(--surface); }
.side ul, .side ol { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips a { border-radius: 999px; padding: 6px 13px; text-decoration: none; font-size: 14.5px; font-weight: 600; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); }
.chips a:hover { border-color: var(--ink-3); }
form.mail label { font-size: 13px; font-weight: 600; display: block; margin-top: 10px; }
form.mail .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.mail .mail-msg { margin: 10px 0 0; color: var(--ink-2); }
form.mail .mail-msg.ok { color: var(--ink); font-weight: 600; }
form.mail .mail-msg.err { color: var(--warm-ink); }
form.mail button[disabled] { opacity: .6; cursor: progress; }
.src-credit { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
input[type=email], input[type=search], input[type=number], input[type=text], select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); width: 100%; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 40px; align-items: start; }

/* lists of pages */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 16px 0 0; }
.tiles a { display: block; height: 100%; text-decoration: none; color: inherit; border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.tiles a:hover { border-color: var(--ink-3); }
.tiles strong { display: block; font-size: 16.5px; color: var(--ink); font-weight: 650; }
.tiles span { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
.lists { columns: 3 200px; padding-left: 0; list-style: none; }
.lists li { break-inside: avoid; margin: 4px 0; }
.more-link { font-size: 15px; font-weight: 600; }
.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li { border-bottom: 1px solid var(--rule); padding: 11px 0; }
.guide-list a { font-weight: 600; text-decoration: none; }
.panel-h { display: block; font: 600 21px/1.25 var(--serif); margin-top: 6px; }
.panel p { margin: 8px 0 12px; }
.tools { margin-top: 36px; }
.card.tool { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.card.tool strong { font: 600 20px/1.25 var(--serif); color: var(--ink); }
.card.tool:hover { border-color: var(--ink-3); }

/* results tool */
.tool-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) 1fr 1fr; gap: 8px; align-items: center; margin-top: 10px; }
.verdict { display: flex; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--rule); align-items: flex-start; }
.verdict:first-child { border-top: 0; }
.verdict p { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }

/* phone action bar */
.actionbar { display: none; }
@media (max-width: 700px) {
  .actionbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; gap: 10px; align-items: center; background: var(--surface); border-top: 1px solid var(--rule); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); transition: transform 0.2s ease; }
  .actionbar.is-hidden { transform: translateY(110%); }
  .actionbar span { flex: 1; font-size: 13.5px; color: var(--ink-2); line-height: 1.3; }
  .actionbar .btn { min-height: 42px; }
  body.has-bar main { padding-bottom: 96px; }
}

footer { margin-top: 24px; border-top: 1px solid var(--rule); padding: 20px 0 40px; font-size: 13.5px; color: var(--ink-3); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
footer a { color: var(--ink-2); }
.foot-note { flex: 1 1 420px; max-width: 70ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.preview-note { display: flex; gap: 6px 14px; justify-content: center; align-items: center; flex-wrap: wrap; background: var(--rule-2); color: var(--ink-2); font-size: 12.5px; text-align: center; padding: 5px 12px; border-bottom: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ===== county page ===== */
.hero { padding: 2px 0 0; }
.hero h1 { font-size: 25px; line-height: 1.18; margin-top: 6px; max-width: 24ch; }
/* Softened headlines run long; a touch smaller on phones keeps the action panel on the first screen. */
@media (max-width: 599px) { .hero h1.long { max-width: none; font-size: 22.5px; } }
.tally { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.tally-sq { display: flex; gap: 3px; flex: none; }
.tally-sq i { width: 12px; height: 12px; border-radius: 3px; display: block; }
.tally-sq .common { background: var(--warm); }
.tally-sq .worth { background: var(--warm-mid); }
.tally-sq .rare { background: var(--calm); }
.tally b { color: var(--ink); font-weight: 650; }
.caveat { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; }
.caveat a { color: var(--ink-3); }
@media (min-width: 900px) {
  .hero { padding-top: 4px; }
  .hero h1 { font-size: 40px; max-width: 30ch; margin-top: 10px; }
  .tally { font-size: 15px; margin-top: 14px; }
  .tally-sq i { width: 14px; height: 14px; }
  .caveat { font-size: 14px; }
}

.glance { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .glance { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; margin-top: 24px; align-items: start; } }
.side-col { display: grid; gap: 12px; align-content: start; }
@media (min-width: 900px) { .side-col { gap: 20px; } }

/* the dot plot */
.plot { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; }
@media (min-width: 900px) { .plot { padding: 20px 24px 16px; } }
.plot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.plot-head strong { font-weight: 650; color: var(--ink); font-size: 13px; }
.legend { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.legend span { display: inline-flex; align-items: center; gap: 4px; }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); display: inline-block; }
.lg-ring { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--ink-3); display: inline-block; }
@media (min-width: 900px) { .plot-head { font-size: 13px; margin-bottom: 10px; } .plot-head strong { font-size: 15px; } }

.dp { --lab: 92px; --val: 44px; --in: 8px; position: relative; }
@media (min-width: 900px) { .dp { --lab: 150px; --val: 120px; } }
.dp-row, .dp-axis, .dp-bands { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: center; }
.dp-bands { display: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); height: 18px; }
@media (min-width: 600px) { .dp-bands { display: grid; } }
.dp-bands .bt { position: relative; height: 100%; }
.dp-bands .bt span { position: absolute; bottom: 3px; white-space: nowrap; }
.dp-row { height: 28px; cursor: pointer; text-decoration: none; color: inherit; border-radius: 4px; }
@media (min-width: 900px) { .dp-row { height: 34px; } }
.dp-row:hover .dp-name, .dp-row:focus-visible .dp-name { text-decoration: underline; text-underline-offset: 3px; }
.dp-row:focus-visible { outline: 2px solid var(--calm); outline-offset: 1px; }
.dp-name { font-size: 13.5px; font-weight: 550; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 900px) { .dp-name { font-size: 15px; } }
.dp-val { text-align: right; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.dp-val small { display: none; font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
@media (min-width: 900px) { .dp-val { font-size: 15px; } .dp-val small { display: inline; } }
.dp-val.common, .dp-val.worth { color: var(--warm-ink); }
.dp-val.worth { font-weight: 600; }
.dp-val.rare, .dp-val.plain { color: var(--ink-2); font-weight: 550; }
.dp-track { position: relative; height: 100%; }
.dp-track.health { background: linear-gradient(to right,
  var(--band-rare) 0, var(--band-rare) calc(var(--in) + (100% - 2 * var(--in)) * 0.1),
  var(--band-worth) calc(var(--in) + (100% - 2 * var(--in)) * 0.1), var(--band-worth) calc(var(--in) + (100% - 2 * var(--in)) * 0.3),
  var(--band-common) calc(var(--in) + (100% - 2 * var(--in)) * 0.3), var(--band-common) 100%); }
.dp-track.plain { background: var(--band-plain); }
.dp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dotted color-mix(in srgb, var(--ink-3) 35%, transparent); }
.dp-link { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--ink-3) 70%, transparent); }
.dp-state, .dp-dot { position: absolute; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.dp-state { width: 11px; height: 11px; border: 1.8px solid var(--ink-3); background: transparent; }
.dp-dot { width: 13px; height: 13px; box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 900px) { .dp-dot { width: 15px; height: 15px; } .dp-state { width: 12px; height: 12px; } }
.dp-dot.common { background: var(--warm); }
.dp-dot.worth { background: var(--warm-mid); }
.dp-dot.rare { background: var(--calm); }
.dp-dot.plain { background: var(--neutral-dot); }
/* past the right edge of the axis: a small arrow says the true value is further out */
.dp-dot.past::after { content: ""; position: absolute; left: calc(100% + 3px); top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 5px solid currentColor; color: var(--ink-2); }
.dp-group { font: 650 11px/1 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 0 5px; display: flex; justify-content: space-between; gap: 8px; }
.dp-group em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; }
.dp-axis { height: 22px; font-size: 11px; color: var(--ink-3); }
.dp-axis .at { position: relative; height: 100%; }
.dp-axis .at span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.dp-axis .at span::before, .dp-bands .bt span::before { content: attr(data-t); }
.dp-foot { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.dp-foot a { color: var(--ink-2); }
.dp-empty { font-size: 14px; color: var(--ink-2); padding: 10px 0; }
.band-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.band-key span { display: inline-flex; align-items: center; gap: 5px; }
.band-key .k { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.k.rare { background: var(--calm); } .k.worth { background: var(--warm-mid); } .k.common { background: var(--warm); }
@media (min-width: 900px) { .plot .band-key { display: none; } }
/* Likely overstated (sample-quality guard): the same color, hatched, with a ring of it. Never hollow,
   because the hollow ring already means the state figure. */
.flag { --fc: var(--ink-2); }
.flag.common { --fc: var(--warm); } .flag.worth { --fc: var(--warm-mid); } .flag.rare { --fc: var(--calm); }
.dp-dot.flag, .tally-sq i.flag, .k.flag, .group h3 i.flag, .lg-dot.flag {
  background: repeating-linear-gradient(135deg, var(--fc) 0 1.6px, var(--surface) 1.6px 3.6px);
  box-shadow: inset 0 0 0 1.6px var(--fc);
}
.dp-dot.flag { box-shadow: inset 0 0 0 1.8px var(--fc), 0 0 0 2px var(--surface); }
.dp-mark { font-size: 0.8em; font-weight: 700; margin-left: 1px; vertical-align: 0.25em; line-height: 0; }
.dp-flag { display: flex; gap: 6px; margin: 8px 0 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.dp-flag i { font-style: normal; font-weight: 700; color: var(--warm-ink); }
.dp-flag b { font-weight: 650; color: var(--ink); }
/* On phones the headline and tally already say it (the hatched squares are the key), so the
   sentence moves to the result's card and the action panel stays on the first screen. */
@media (max-width: 599px) { .dp-flag { display: none; } }
@media (min-width: 900px) { .dp-flag { font-size: 13.5px; } }
.legend .lg-flag { display: none; }
@media (min-width: 900px) { .legend .lg-flag { display: inline-flex; } }
.plot-more { display: none; }
.plot-toggle:checked ~ .dp .plot-more { display: block; }
.more-btn { display: block; text-align: center; margin-top: 8px; width: 100%; font: 600 13px/1 var(--sans); color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 10px; cursor: pointer; }
.plot-toggle:checked ~ .more-btn { display: none; }
.plot-toggle:focus-visible ~ .more-btn { outline: 2px solid var(--calm); outline-offset: 2px; }
@media (min-width: 900px) { .plot-more { display: block; } .more-btn { display: none; } }

/* action panel: white, with the verdict color on the left edge only. Buttons are always orange. */
.act { border-radius: 12px; padding: 16px 16px 14px; border: 1px solid var(--rule); background: var(--surface); position: relative; overflow: hidden; }
.act::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.act.bad::before { background: var(--warm); }
.act.mixed::before { background: var(--warm-mid); }
.act.good::before, .act.unknown::before { background: var(--calm); }
.act h2 { font-size: 19px; line-height: 1.2; margin: 0 0 12px; }
.btn-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; border-radius: 10px; padding: 13px 16px; font: 700 16px/1.2 var(--sans);
  background: var(--warm); color: var(--on-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.10), 0 3px 10px color-mix(in srgb, var(--warm) 32%, transparent); transition: background .15s, box-shadow .15s, transform .1s; }
.btn-act:hover { background: var(--warm-ink); color: var(--on-color); box-shadow: 0 1px 0 rgba(0,0,0,.10), 0 5px 14px color-mix(in srgb, var(--warm) 40%, transparent); }
.btn-act:active { transform: translateY(1px); }
.btn-act .arr { transition: transform .15s; }
.btn-act:hover .arr { transform: translateX(3px); }
.act-covers { margin: 9px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.btn-act2 { display: flex; align-items: center; justify-content: center; margin-top: 12px; text-decoration: none; border-radius: 10px; padding: 11px 16px; font: 650 15px/1.2 var(--sans);
  color: var(--warm-ink); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warm) 70%, transparent); transition: background .15s; }
.btn-act2:hover { color: var(--warm-ink); background: color-mix(in srgb, var(--warm) 8%, transparent); }
.act-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 14px; font-weight: 600; }
.act-links:empty { display: none; }
.act-links a { color: var(--ink); }
@media (min-width: 900px) {
  .act { padding: 22px 24px 20px; }
  .act h2 { font-size: 22px; }
  .btn-act { display: inline-flex; padding: 14px 20px; }
  .btn-act2 { display: inline-flex; }
}
.alert { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--ink-2); padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--warm) 25%, var(--rule)); }
.alert b { color: var(--warm-ink); }
@media (min-width: 900px) { .alert { font-size: 14px; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.facts div { background: var(--surface); padding: 12px 14px; }
.facts b { display: block; font: 650 20px/1.1 var(--serif); }
.facts span { font-size: 13px; color: var(--ink-2); }
.facts .why { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
@media (min-width: 900px) { .side-col .facts { grid-template-columns: 1fr; } }

/* what each result means */
.section { margin-top: 40px; }
.section > h2, .section h2:first-child { margin-top: 0; }
@media (min-width: 900px) { .section { margin-top: 56px; } }
.section > p.lede { margin-top: 6px; }
.group { margin-top: 24px; }
.group h3 { font: 650 17px/1.3 var(--sans); letter-spacing: 0; display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin: 0; border-bottom: 2px solid var(--ink); }
.group h3 i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.group h3 i.common { background: var(--warm); }
.group h3 i.worth { background: var(--warm-mid); }
.group h3 i.rare { background: var(--calm); }
.group h3 i.plain { background: var(--neutral-dot); }
.group h3 i.none { border: 1.8px solid var(--ink-3); }
.group-empty { font-size: 15px; color: var(--ink-2); padding: 12px 2px; margin: 0; border-bottom: 1px solid var(--rule); }
.rcard { border-bottom: 1px solid var(--rule); scroll-margin-top: 12px; }
.rcard summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto 18px; gap: 10px; align-items: baseline; padding: 12px 2px; }
.rcard summary::-webkit-details-marker { display: none; }
.rcard summary::after { content: "+"; font: 400 20px/1 var(--sans); color: var(--ink-3); text-align: right; }
.rcard[open] summary::after { content: "\2212"; }
.rcard .cn { font-weight: 650; font-size: 16px; }
.rcard .cs { font-size: 14px; color: var(--ink-2); text-align: right; }
.rcard .cs b { color: var(--ink); }
.rcard.flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--calm) 18%, transparent); } 100% { background: transparent; } }
.cbody { padding: 0 2px 16px; }
.cmeta { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px; max-width: 68ch; }

/* a result next to the counties that border it: the chart's rows, smaller */
.nb { margin: 4px 0 0; max-width: 640px; }
.nb-cap { font: 650 11px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 4px; }
.nb-dp { --lab: 112px; --val: 50px; }
@media (min-width: 900px) { .nb-dp { --lab: 150px; --val: 52px; } }
.nb-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: center; height: 24px; }
.nb-row .dp-name { font-size: 13px; font-weight: 450; color: var(--ink-2); }
.nb-row .dp-name a { color: inherit; }
.nb-row .dp-val { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.nb-row.me .dp-name, .nb-row.me .dp-val { font-weight: 700; color: var(--ink); }
.nb-row .dp-dot { width: 10px; height: 10px; }
.nb-row.me .dp-dot { width: 13px; height: 13px; }
.dp-dot.nbr { --dot: var(--neutral-dot); }
.dp-dot.nbr:not(.flag) { background-color: var(--neutral-dot); opacity: .8; }
.nb .dp-axis { height: 18px; }

/* when the wells were tested: one bar per year */
.tl { margin: 8px 0 0; max-width: 520px; }
.tl-top { margin: 0 0 4px; font-size: 12px; color: var(--ink-3); text-align: right; }
.tl-svg { width: 100%; height: 64px; display: block; border-bottom: 1px solid var(--ink-3); }
.tl-bar { fill: var(--calm); }
.tl-axis { position: relative; height: 18px; font-size: 12px; color: var(--ink-3); }
.tl-axis span { position: absolute; top: 3px; }
.tl-cap { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.tl-why { color: var(--ink); max-width: 62ch; }
.tl-more { color: var(--ink-2); font-size: 15px; max-width: 62ch; }

/* what the state offers: a short checklist inside the test box */
.sp { margin: 4px 0 18px; }
.sp-h { font: 650 12px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.sp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sp-list li { display: grid; grid-template-columns: 22px 104px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.sp-list li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; align-self: center; background: var(--band-plain); border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.sp-list li.yes::before { background: var(--calm); border-color: var(--calm); box-shadow: inset 0 0 0 3px var(--surface); }
.sp-list b { font-weight: 650; }
.sp-list span { color: var(--ink-2); }
@media (max-width: 520px) { .sp-list li { grid-template-columns: 22px minmax(0, 1fr); } .sp-list span { grid-column: 2; } }
.note { margin-top: 10px; font-size: 14px; color: var(--ink-2); background: var(--rule-2); border-radius: 6px; padding: 8px 10px; }
.cbody .more-link { margin-top: 10px; font-size: 14px; }
.section.prose p { color: var(--ink-2); }

/* ===== home ===== */
.home-hero { padding: 10px 0 8px; }
.home-hero h1 { font-size: 30px; line-height: 1.12; max-width: 18ch; margin: 0; }
.home-hero p.sub { color: var(--ink-2); margin-top: 8px; font-size: 16px; max-width: 46ch; }
@media (min-width: 900px) { .home-hero { padding: 28px 0 12px; } .home-hero h1 { font-size: 52px; } .home-hero p.sub { font-size: 19px; } }
.search { display: flex; margin-top: 16px; max-width: 560px; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--surface); }
.search input[type=search] { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: 13px 14px; font: 500 17px/1.2 var(--sans); background: transparent; color: var(--ink); }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--calm) 35%, transparent); }
.search button { border: 0; background: var(--ink); color: var(--bg); font: 650 16px/1 var(--sans); padding: 0 18px; cursor: pointer; }
.try { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.try a { color: var(--ink-2); font-weight: 600; }
.nat { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 900px) { .nat { grid-template-columns: 5fr 7fr; gap: 32px; margin-top: 48px; } }
.nat-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
@media (min-width: 900px) { .nat-card { padding: 24px; } }
.nat-card h2 { font-size: 20px; line-height: 1.2; margin: 0; }
@media (min-width: 900px) { .nat-card h2 { font-size: 24px; } }
.big { font: 650 44px/1 var(--serif); letter-spacing: -0.02em; margin-top: 12px; }
.big + p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.who { margin-top: 16px; display: grid; gap: 10px; }
.who-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; font-size: 14px; }
.who-row b { font-weight: 650; }
.who-bar { height: 30px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 600; }
.who-bar.full { background: var(--calm); color: var(--on-color); }
.who-bar.none { border: 2px dashed var(--warm); color: var(--warm-ink); background: transparent; }
.cdc { margin-top: 14px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 12px; }
.cdc b { color: var(--ink); }
.pair-sub { font-size: 14px; color: var(--ink-2); margin: 6px 0 12px; }
.pair .dp { --lab: 96px; --val: 58px; }
@media (min-width: 900px) { .pair .dp { --lab: 120px; --val: 100px; } }
.pair-row { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr) var(--val); align-items: center; height: 54px; text-decoration: none; color: inherit; }
.pair-row .dp-track { height: 40px; border-radius: 4px; }
.pair-row .dp-name { white-space: normal; line-height: 1.2; }
.pair-row .dp-name small { display: block; font-weight: 450; color: var(--ink-3); font-size: 12px; }
.pair-row .dp-val { font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: normal; }
.pair-row:hover .dp-name { text-decoration: underline; }
@media (min-width: 900px) { .pair-row { height: 64px; } .pair-row .dp-track { height: 46px; } .pair-row .dp-val { font-size: 14px; } }
.tag { position: absolute; font-size: 10.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap; transform: translateX(-50%); }
.tag.up { top: 1px; }
.tag.down { bottom: 1px; }
.entries { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (min-width: 900px) { .entries { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.entry { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px; min-height: 104px; }
.entry b { display: block; font: 650 16px/1.25 var(--sans); }
.entry span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.35; }
.entry:hover { border-color: var(--ink-3); color: var(--ink); }
.county-links { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 700px) { .county-links { grid-template-columns: 1fr 1fr; } }
.clink { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; }
.clink:hover { border-color: var(--ink-3); color: var(--ink); }
.clink b { font-weight: 650; }
.clink span { font-size: 13px; color: var(--ink-2); }
/* the header search pill: the pill is the box, the input inside has none */
.top-search input[type=search] { border: 0; border-radius: 0; padding: 2px 0; background: transparent; font-size: 14px; }
.top-search input[type=search]:focus-visible { outline: none; }
.top-search:focus-within { outline: 2px solid var(--calm); outline-offset: 1px; }
.prose .disclosure, .prose p.disclosure { color: var(--ink-3); font-size: 13px; }

/* ===== water touches (water.js). Each one only animates what's already on the page. ===== */
/* Ripple on press: a canvas under the label, clipped by the button, plus a small press-in that springs back. */
.btn, .btn-act, .btn-act2, .hh-search button, .hh-again-btn, .more-btn { position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .38s cubic-bezier(.25, 1.8, .45, 1), filter .15s; }
.btn:active, .btn-act:active, .hh-search button:active, .hh-again-btn:active, .more-btn:active,
.btn.is-pressed, .btn-act.is-pressed, .hh-search button.is-pressed, .hh-again-btn.is-pressed, .more-btn.is-pressed { transform: scale(.98) translateY(1px); transition-duration: .06s; }
.tw-rip { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; border-radius: inherit; }

/* Droplet dots: a soft highlight, so they read as drops */
.dp-dot:not(.flag) { background-image: radial-gradient(circle at 36% 30%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 42%); }
.dp-dot.common { --dot: var(--warm); } .dp-dot.worth { --dot: var(--warm-mid); } .dp-dot.rare { --dot: var(--calm); } .dp-dot.plain { --dot: var(--neutral-dot); }
.dp-dot.flag { --dot: var(--fc); }

/* Results arrive like water: a short tail while a dot falls, and a ring where it lands */
.tw-rain .dp-dot::before { content: ""; position: absolute; left: 50%; bottom: 72%; width: 60%; height: var(--tail-h, 0px); transform: translateX(-50%); background: linear-gradient(to top, var(--dot) 30%, transparent); clip-path: polygon(0 100%, 100% 100%, 50% 0); opacity: var(--tail, 0); pointer-events: none; }
.tw-pending .dp-state, .tw-pending .dp-link { opacity: 0; }
.tw-rain .dp-state, .tw-rain .dp-link { transition: opacity .2s ease-out; }
.tw-splash { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; border: 1.5px solid var(--dot); pointer-events: none; opacity: 0; animation: tw-splash .36s cubic-bezier(.2, .7, .3, 1) forwards; }
.tw-splash.common { --dot: var(--warm); } .tw-splash.worth { --dot: var(--warm-mid); } .tw-splash.rare { --dot: var(--calm); } .tw-splash.plain { --dot: var(--neutral-dot); }
.tw-splash.two { animation-delay: .04s; animation-duration: .38s; border-width: 1px; }
@keyframes tw-splash { 0% { opacity: .75; transform: scale(.7, .5); } 100% { opacity: 0; transform: scale(3.2, 1.25); } }

/* the header search: the lens fills while we look up the place */
.lens .w { fill: var(--calm); opacity: .5; }
.lens .wl { fill: none; stroke: var(--calm); stroke-width: 1; }

@media (prefers-reduced-motion: reduce) {
  .tw-rip, .tw-splash { display: none; }
  .btn:active, .btn-act:active, .hh-search button:active, .hh-again-btn:active, .more-btn:active,
  .btn.is-pressed, .btn-act.is-pressed, .hh-search button.is-pressed, .hh-again-btn.is-pressed, .more-btn.is-pressed { transform: none; filter: brightness(.93); }
}

/* at a glance: three small pictures, a few words each */
.ataglance { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
@media (min-width: 900px) { .side-col .ataglance { grid-template-columns: 1fr; } }
.gl-tile { background: var(--surface); padding: 14px 16px 14px; }
.gl-tile h3 { font: 650 12px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.gl-cap { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.gl-people { display: flex; gap: 5px; flex-wrap: wrap; }
.gl-people svg { width: 15px; height: 24px; fill: var(--band-plain); stroke: var(--ink-3); stroke-width: .9; }
.gl-people svg.on { fill: var(--calm); stroke: var(--calm); }
.gl-big { margin: 8px 0 0; font: 650 21px/1.15 var(--serif); }
.gl-big small { display: block; font: 500 12.5px/1.3 var(--sans); color: var(--ink-3); margin-top: 3px; }
.gl-depth { width: 100%; max-width: 300px; height: auto; display: block; overflow: visible; }
.gl-surface { stroke: var(--ink-2); stroke-width: 1.5; }
.gl-range { fill: var(--calm); opacity: .22; }
.gl-pipe { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }

.gl-wellcap { fill: var(--ink-2); }
.gl-tip { fill: var(--calm); stroke: var(--surface); stroke-width: 2; }
.gl-lead { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; }
.gl-num { font: 650 17px var(--serif); fill: var(--ink); }
.gl-note { font: 500 10.5px var(--sans); fill: var(--ink-2); }
.gl-axis { font: 500 9.5px var(--sans); fill: var(--ink-3); }
.gl-gauge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.gl-gauge span { text-align: center; font: 600 12.5px/1 var(--sans); padding: 9px 0; background: var(--band-plain); color: var(--ink-3); }
.gl-gauge span:first-child { border-radius: 6px 0 0 6px; } .gl-gauge span:last-child { border-radius: 0 6px 6px 0; }
.gl-gauge span.on { color: var(--on-color); }
.gl-gauge span.low.on { background: var(--calm); } .gl-gauge span.middle.on { background: var(--warm-mid); color: var(--ink); } .gl-gauge span.high.on { background: var(--warm); }

/* /tests/: lab test picker */
.tests-steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tests-steps li { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px 12px 52px; position: relative; }
.tests-steps strong { display: block; font-size: 16px; }
.tests-steps span:not(.step-n) { font-size: 14.5px; color: var(--ink-2); }
.step-n { position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-good); color: var(--calm-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.tests-match { margin-top: 18px; background: var(--panel-good); border-left: 4px solid var(--calm); border-radius: 8px; padding: 14px 16px; }
.tests-match strong { display: block; font-size: 17px; }
.tests-match p { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.tests-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.tests-jump a { border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; font-size: 14.5px; text-decoration: none; background: var(--surface); }
.tests-jump a:hover { border-color: var(--ink-3); }
.tests-group { margin-top: 40px; scroll-margin-top: 16px; }
.tests-group h2 { margin: 0 0 4px; }
.tests-lede { color: var(--ink-2); max-width: 760px; margin: 0 0 16px; }
.tests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.test-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(21,25,30,.05); transition: box-shadow .15s, transform .15s; }
.test-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 10px 26px rgba(21,25,30,.09); transform: translateY(-1px); }
.test-card.is-pick { border-color: color-mix(in srgb, var(--warm) 45%, var(--rule)); }
.test-card.fits { border-color: var(--calm); box-shadow: 0 0 0 2px var(--calm), 0 6px 18px rgba(21,25,30,.06); }
.test-top { position: relative; background: linear-gradient(180deg, #f1f6f7, #e9f1f2); padding: 44px 12px 2px; display: flex; justify-content: center; }
.test-card.is-pick .test-top { background: linear-gradient(180deg, #fbf1ea, #f7e7dc); }
.kit-art { width: 100%; max-width: 200px; height: auto; display: block; }
.test-btn span { margin-left: 6px; }
.test-badge { position: absolute; left: 12px; top: 12px; background: var(--surface); color: var(--calm-ink); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.test-card.is-pick .test-badge { background: var(--warm); color: var(--on-color); }
.test-fit { position: absolute; right: 12px; top: 12px; background: var(--calm); color: var(--on-color); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; }
.test-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.test-name { margin: 0; font: 650 20px/1.25 var(--serif); }
.test-seller { margin: -6px 0 0; font-size: 14px; color: var(--ink-3); }
.test-pitch { margin: 0; font-size: 15px; color: var(--ink-2); }
.test-price { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.test-price b { font: 700 28px/1 var(--sans); letter-spacing: -.01em; }
.test-price span { font-size: 14px; color: var(--ink-3); }
.test-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.test-chips li { font-size: 13.5px; color: var(--ink-2); padding-left: 16px; position: relative; }
.test-chips li::before { content: ""; position: absolute; left: 1px; top: .42em; width: 9px; height: 5px; border-left: 2px solid var(--calm); border-bottom: 2px solid var(--calm); transform: rotate(-45deg); }
.test-chips li.hit { color: var(--ink); font-weight: 700; background: var(--panel-good); border-radius: 999px; padding: 1px 8px 1px 22px; }
.test-chips li.hit::before { left: 8px; }
.test-caution { margin: 0; font-size: 14px; color: var(--ink-2); background: var(--band-worth); border-radius: 8px; padding: 8px 10px; }
.test-btn { margin-top: auto; }
.test-more { font-size: 14px; color: var(--ink-2); }
.test-more summary { cursor: pointer; color: var(--calm-ink); text-align: center; }
.test-more p { margin: 6px 0 0; }

/* state pages: testing first */
.st-hero h1 { max-width: 820px; }
.st-answer { font-size: 19px; line-height: 1.5; max-width: 760px; margin: 10px 0 0; }
.st-answer strong { color: var(--ink); }
.st-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; align-items: center; }
.st-actions .btn-act, .st-actions .btn-act2 { width: auto; margin: 0; }
.st-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 14px; }
.st-way { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(21,25,30,.05); }
.st-way.is-free { border-color: color-mix(in srgb, var(--calm) 55%, var(--rule)); background: linear-gradient(180deg, var(--panel-good), var(--surface) 60%); }
.st-way h3 { margin: 0; font: 650 19px/1.25 var(--serif); }
.st-way p { margin: 0; font-size: 15px; color: var(--ink-2); }
.st-way-n { width: 28px; height: 28px; border-radius: 50%; background: var(--panel-good); color: var(--calm-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.st-way.is-free .st-way-n { background: var(--calm); color: var(--on-color); }
.st-way-link { margin-top: auto; padding-top: 6px; font-weight: 650; font-size: 15px; }
.st-rules { margin-top: 16px; background: var(--band-worth); border-radius: 10px; padding: 14px 16px; }
.st-rules strong { display: block; }
.st-rules p { margin: 6px 0 0; font-size: 15px; }
.st-plot { margin-top: 10px; max-width: 760px; }
.st-worst-h { margin: 22px 0 6px; font-size: 18px; }
.st-worst { margin: 0; padding-left: 20px; }
.st-find { width: 100%; max-width: 420px; font: inherit; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); margin: 6px 0 12px; }
.st-chips a[hidden] { display: none; }
.st-none { background: var(--panel-good); border-radius: 8px; padding: 10px 12px; font-size: 15px; }
.st-all { margin-top: 18px; }
.st-all summary { cursor: pointer; font-weight: 650; color: var(--calm-ink); }
.st-all tr[hidden] { display: none; }

.sister { margin-top: 28px; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 16px; background: var(--surface); max-width: 760px; }
.sister p { margin: 0; color: var(--ink-2); } .sister b { color: var(--ink); }