/* deliberately light-only: a consumer water page should always read bright,
   so no prefers-color-scheme dark variant */
:root{
  color-scheme:light;
  --bg:#F7FBFE; --surface:#FFFFFF; --ink:#1A2B36; --muted:#49606F;
  --line:#DFECF3; --accent:#1187C9; --accent-ink:#0A6DA6; --red:#DA291C;
  --hero1:#EDF8FE; --hero2:#D5EDFB;
  --ok:#0E7443; --ok-bg:#E2F6EA; --eu:#7C5606; --eu-bg:#FCF2DB;
  --ch:#AD2F27; --ch-bg:#FBEAE8; --neutral:#49606F; --neutral-bg:#EFF6FA;
  --w1:#3E97DE; --w2:#2FAD7C; --w3:#9C7BDE; --w4:#D09A3E;
  --shadow:0 1px 2px rgba(14,58,80,.05),0 6px 18px rgba(14,58,80,.07);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--bg);
  font:16px/1.6 "Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,Arial,sans-serif;}
a{color:var(--accent-ink)}
.hero{background:linear-gradient(180deg,var(--hero1),var(--hero2))}
.hero .wavewrap{overflow:hidden;width:100%;margin-top:32px}
.hero .wave{display:block;width:200%;height:56px}
.wave .wa{fill:var(--bg);opacity:.45;animation:wave-drift 20s linear infinite}
.wave .wb{fill:var(--bg);animation:wave-drift 28s linear infinite}
@keyframes wave-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
header.top{max-width:1060px;margin:0 auto;padding:48px 20px 0}
.langsw{display:flex;justify-content:flex-end;gap:4px;margin:0 0 6px}
.langsw button{font:inherit;font-size:12px;padding:3px 10px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted)}
.langsw button[aria-current="true"]{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1{font-size:clamp(30px,5vw,46px);margin:0;letter-spacing:-.025em;line-height:1.05;font-weight:700}
h1 .mark{width:.8em;height:.8em;margin-right:.34em;vertical-align:-.07em}
.lede{color:var(--muted);max-width:62ch;margin:12px 0 0;font-size:17px}
main{max-width:1060px;margin:0 auto;padding:0 20px 60px}
/* bleed over main's side padding so the blur band has no unblurred strips;
   the mask fades the band's lower edge instead of a hard cut */
.searchbar{position:sticky;top:0;z-index:5;margin:0 -20px;padding:18px 20px 26px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent)}
.searchbar input{width:100%;padding:14px 18px;font-size:18px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.searchbar input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.searchrow{display:flex;flex-wrap:wrap;gap:8px}
.searchrow input{flex:1;min-width:200px}
.searchrow select{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:14px;padding:0 10px;box-shadow:var(--shadow)}
.searchrow select:focus{outline:2px solid var(--accent);outline-offset:1px}
.meta-line{font-size:13px;color:var(--muted);margin-top:8px}
nav.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}
nav.tabs button{font:inherit;font-size:15px;padding:8px 18px;cursor:pointer;border-radius:99px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted)}
nav.tabs button[aria-selected="true"]{background:var(--accent-ink);border-color:var(--accent-ink);
  color:#fff;font-weight:600}
nav.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.canton-grp{margin:14px 0 0}
.canton-h{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0;
  padding:10px 0;cursor:pointer;list-style:none;display:flex;align-items:center;gap:2px}
.canton-h::-webkit-details-marker{display:none}
.canton-h::before{content:"▸";display:inline-block;width:10px;color:var(--muted);
  transition:transform .15s;font-size:11px}
.canton-grp[open]>.canton-h::before{transform:rotate(90deg)}
.canton-h .flag{width:17px;height:17px;vertical-align:-4px}
.matrixmore{text-align:center;margin:12px 0 0}
.matrixmore button{font:inherit;font-size:13.5px;padding:8px 16px;cursor:pointer;border-radius:99px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--accent-ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin:0 0 10px;
  overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 2px 4px rgba(14,58,80,.07),0 10px 26px rgba(14,58,80,.1);transform:translateY(-1px)}
@media (prefers-reduced-motion: reduce){ .card{transition:none} .card:hover{transform:none} .wave path{animation:none} }
.card>button.head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;
  width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;padding:14px 18px;cursor:pointer}
.card>button.head:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.card>button.head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.card .who{display:flex;gap:12px;align-items:baseline;min-width:0}
.card .rname{font-weight:700;font-size:17px;white-space:nowrap}
.card .rzone{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .chips{display:flex;gap:6px;align-items:center;flex:none}
.dsup{font-size:14px;color:var(--muted);margin:0 0 12px}
.dsup a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.dsup a:hover{text-decoration-color:currentColor}
.homeicon{width:13px;height:13px;margin-left:3px;vertical-align:-1px}
.chip{font-size:12px;padding:2px 9px;border-radius:99px;white-space:nowrap;align-self:center}
.chip.plz{background:var(--neutral-bg);color:var(--muted);font-family:var(--mono)}
.chip.hard{color:var(--ink);cursor:help}
.chip.year{background:var(--neutral-bg);color:var(--muted);cursor:help}
.chip.y-ok{background:var(--ok-bg);color:var(--ok)}
.chip.y-mid{background:var(--eu-bg);color:var(--eu)}
.chip.y-old{background:var(--ch-bg);color:var(--ch)}
abbr[title]{cursor:help;text-decoration:underline dotted;text-underline-offset:2px}
abbr.corr{color:var(--eu);font-weight:700;font-size:.8em;vertical-align:super;
  text-decoration:none;cursor:help;margin-left:1px}
.b{font-size:12px;font-weight:600;padding:2.5px 10px;border-radius:99px;white-space:nowrap;align-self:center}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-eu{background:var(--eu-bg);color:var(--eu)}
.b-ch{background:var(--ch-bg);color:var(--ch)}
.b-none,.b-miss{background:var(--neutral-bg);color:var(--neutral)}
.detail{border-top:1px solid var(--line);padding:16px 18px 20px}
.assess{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin:0 0 16px;color:var(--muted);font-size:14.5px}
.yearbtns{display:flex;gap:6px;margin:0 0 14px}
.yearbtns button{font:inherit;font-size:13px;padding:3px 12px;border-radius:99px;cursor:pointer;
  border:1.5px solid var(--line);background:none;color:var(--muted)}
.yearbtns button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-ink);font-weight:600}
table.params{width:100%;border-collapse:collapse;font-size:14px}
table.params th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  text-align:left;font-weight:600;padding:6px 10px;border-bottom:1.5px solid var(--line)}
table.params td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.params tr:last-child td{border-bottom:0}
.pname{font-weight:600}
.pname small{display:block;font-weight:400;color:var(--muted)}
.num{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.mut{color:var(--muted)}
.meter{min-width:130px}
.track{position:relative;height:6px;background:var(--neutral-bg);border-radius:3px}
.range{position:absolute;top:0;height:6px;border-radius:3px;min-width:3px}
.medtick{position:absolute;top:-2.5px;width:2px;height:11px;background:var(--ink);border-radius:1px}
.limline{position:absolute;top:-4px;width:2px;height:14px;background:var(--ch)}
.scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  font-family:var(--mono);margin-top:3px}
details.why{margin-top:4px}
details.why summary{cursor:pointer;font-size:12.5px;color:var(--accent-ink);list-style:none}
details.why summary::before{content:"ⓘ "}
details.why div{font-size:13px;color:var(--muted);padding:6px 0 2px;max-width:70ch}
.waterbar{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;margin:4px 0 6px}
.waterbar i{display:block;height:100%}
.wlegend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.wlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.src{font-size:13px;margin-top:14px}
/* max-height keeps vertical scrolling inside the wrapper, where the sticky
   header row actually sticks (page scrolling would carry it away) */
.tablewrap{overflow:auto;max-height:82vh;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
table.matrix{border-collapse:collapse;font-size:13.5px;min-width:100%}
table.matrix th,table.matrix td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.matrix thead th{position:sticky;top:0;z-index:2;background:var(--surface);text-align:right;cursor:pointer;
  font-size:12px;color:var(--muted);vertical-align:bottom;max-width:110px;white-space:normal;line-height:1.25;
  box-shadow:0 1.5px 0 var(--line)}  /* collapsed borders don't stick; fake the rule */
table.matrix thead th:first-child{text-align:left;z-index:3}
table.matrix thead th[aria-sort]{color:var(--accent-ink)}
table.matrix td{text-align:right;font-family:var(--mono);font-size:12.5px}
table.matrix td:first-child,table.matrix th:first-child{position:sticky;left:0;background:var(--surface);
  text-align:left;font-family:inherit;font-size:13.5px;max-width:230px;overflow:hidden;text-overflow:ellipsis}
table.matrix td i{display:inline-block;width:8px;height:8px;border-radius:99px;margin-left:6px;vertical-align:1px}
.flag{width:14px;height:14px;border-radius:3px;outline:1px solid var(--line);margin-right:7px;vertical-align:-2px}
.dot-ok{background:var(--ok)} .dot-eu{background:var(--eu)} .dot-ch{background:var(--ch)}
.legend-line{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin:12px 2px}
.about{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  box-shadow:var(--shadow)}
.about h2{font-size:19px;margin:22px 0 8px}
.about h2:first-child{margin-top:0}
.about p,.about li{font-size:14.5px;color:var(--muted);max-width:78ch}
.about strong{color:var(--ink)}
.limtable{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0}
.limtable th,.limtable td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}
.limtable th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
footer{border-top:1.5px solid var(--line);margin-top:40px}
footer .inner{max-width:1060px;margin:0 auto;padding:24px 20px 40px;font-size:13px;color:var(--muted);max-width:80ch}
.links{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 16px}
.links a{font-size:13px}
.links .pill.donate{background:var(--red);color:#fff;padding:6px 14px;border-radius:99px;text-decoration:none;font-weight:600}
.links .pill.donate:hover{opacity:.9}
.hidden{display:none}
.empty{color:var(--muted);padding:30px 0;text-align:center}
.hist-intro{background:var(--hero1);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;font-size:14px;color:var(--muted);margin:0 0 6px}
.hint{background:var(--neutral-bg);border-radius:10px;padding:10px 12px;font-size:13.5px;
  color:var(--muted);margin:0 0 14px}
.trend{width:100%;border-collapse:collapse;font-size:14px}
.trend td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.trend tr:last-child td{border-bottom:0}
.trend .tp{font-weight:600}
.trend .tp small{display:block;font-weight:400;color:var(--muted)}
.trend .tv{font-family:var(--mono);font-size:13px;color:var(--muted);white-space:nowrap;text-align:right}
.spark{display:block;height:30px;width:120px}
.spark polyline{fill:none;stroke:var(--line);stroke-width:1.5}
.spark .s-ok{fill:var(--ok)} .spark .s-eu{fill:var(--eu)}
.spark .s-ch{fill:var(--ch)} .spark .s-none{fill:var(--neutral)}
.qlist{list-style:none;padding:0;margin:0 0 16px}
.qlist li{border-left:3px solid var(--accent);padding:2px 0 2px 12px;margin:0 0 10px;
  color:var(--muted);font-size:14px}
.qlist small{color:var(--muted);opacity:.8}
@media (max-width:640px){ table.params .colminmax{display:none} }