/* generated by scripts/site/extract_engine.py from template.html (sha256 08645cc934e0); do not edit */
:root{
  color-scheme:light;
  --water:#cfe2ef; --water-line:#7fb0d4; --county:#a4afb8; --state:#3f4e5c;
  --c-erie:#2a78d6; --c-ohio:#6f3fb0; --c-river:#1a9e6a; --c-gw:#e06030;
  --c-none:#e6eaee; --c-none-hatch:#c6ced6; --dot:#ffffff;
  --r0:#e6eaee; --r1:#fbf1d3; --r2:#f6c66b; --r3:#ec8a3a; --r4:#cf4628; --r5:#861a20;
  --e-aep:#c62b2b; --e-aes:#e89a1e; --e-duke:#1d9b86; --e-oe:#2f6fdb; --e-cei:#7b57c4; --e-te:#4d9a36; --e-coop:#8c6a3c; --e-muni:#c23f8f;
  --g-cgo:#1f4e9c; --g-enb:#d99a1e; --g-duk:#1d9b86; --g-ceo:#cf4a5e; --g-small:#7a5cb5; --g-coop:#8c6a3c; --g-muni:#c23f8f;
  --s-city:#2f6fdb; --s-local:#1a9e6a; --s-ev:#7b57c4; --s-other:#8a97a3;
  --t-att:#2a6fc9; --t-frontier:#d1495b; --t-alta:#1d9b86; --t-bright:#e0892a; --t-wind:#7b57c4; --t-indie:#8c6a3c;
  --f0:#eef1f4; --f1:#d6e6f5; --f2:#a9c9ea; --f3:#6fa3d8; --f4:#3474bf; --f5:#153f7a;
  --l-city:#2f6fdb; --l-village:#7b57c4; --l-township:#8fa64a;
  --b1:#d9efe7; --b2:#a6d9c4; --b3:#f2c96b; --b4:#e88a3c; --b5:#b8321f;
  --z1:#ece7f5; --z2:#c9b9e6; --z3:#a184cf; --z4:#7350b3; --z5:#3f1f7a;
  --m1:#f3d9d2; --m2:#f0b39a; --m3:#8fcfc4; --m4:#3aa896; --m5:#146b5c;
  --h1:#d9efe7; --h2:#a6d9c4; --h3:#f2c96b; --h4:#e88a3c; --h5:#b8321f;
  --p-r:#c62b2b; --p-d:#2f6fdb; --p-i:#7b57c4;
  --v1:#6b1d1d; --v2:#b8321f; --v3:#e88a3c; --v4:#f2c96b; --v5:#d9efe7;
  --k1:#e4efe0; --k2:#b7d8ae; --k3:#7fbc7a; --k4:#3f8f4e; --k5:#155c33;
  --a1:#dcecf5; --a2:#a9cfe3; --a3:#e6d39a; --a4:#c98b46; --a5:#7a4a2a;
  --i1:#fde6d8; --i2:#f9b98f; --i3:#f08a4b; --i4:#c9532a; --i5:#7c2612;
  --y1:#e0f0f0; --y2:#a8d8d5; --y3:#6fb8b8; --y4:#3a8d94; --y5:#1c5a66;
  --d1:#eef3e6; --d2:#d9c9a0; --d3:#c99a5a; --d4:#a3632c; --d5:#5f3312;
  --q1:#dff3ea; --q2:#a4dcc6; --q3:#f0d27a; --q4:#e08c3a; --q5:#a33a1c;
  --n1:#eceee6; --n2:#cfe3b8; --n3:#9ccd7f; --n4:#5aa24d; --n5:#22632c;
  --w1:#dcefe3; --w2:#f3e3a0; --w3:#f0b45c; --w4:#d9662f; --w5:#8f1f1f;
  --j1:#ece4f2; --j2:#cdb7e0; --j3:#a985c8; --j4:#7f57ab; --j5:#4d2a7a;
  --o1:#e0e8f5; --o2:#b3c6ea; --o3:#7f9edb; --o4:#4a72c4; --o5:#1f3f8a;
  --u1:#fbe7d9; --u2:#f5bf9f; --u3:#ea9163; --u4:#c85f2f; --u5:#7d3410;
  --x1:#e9f0e2; --x2:#cfe0b0; --x3:#e8d27a; --x4:#d99a3c; --x5:#9c4a1c;
  --c1:#f4efe4; --c2:#d8e6f2; --c3:#a9c9e8; --c4:#6f9fd4; --c5:#2f5fa8;
  --hh1:#e4eff0; --hh2:#c9dde3; --hh3:#f0cf9a; --hh4:#e08a5a; --hh5:#9c2f2a;
  --hi1:#f1ede4; --hi2:#e2d3b6; --hi3:#c9ab7a; --hi4:#a27a45; --hi5:#5e4423;
  --ht1:#5a2e14; --ht2:#8a4a22; --ht3:#b8763a; --ht4:#d4a15e; --ht5:#e8c98f; --ht6:#f4e6c8;
  --sl1:#efeee9; --sl2:#e9dcc3; --sl3:#dbb27a; --sl4:#c07a3a; --sl5:#7a3d14;
  --ds1:#eeeef2; --ds2:#d9d3ea; --ds3:#b9a6d6; --ds4:#8c6bbd; --ds5:#4f2f86;
  --jb1:#eef0ea; --jb2:#d3dfc6; --jb3:#a8c48f; --jb4:#6f9a58; --jb5:#345f2c;
  --sv1:#e3ede4; --sv2:#efe9d3; --sv3:#efd9b3; --sv4:#e0a878; --sv5:#a8503c;
  --mo1:#e8d3cf; --mo2:#efe3d6; --mo3:#e2e6d2; --mo4:#b7d3b5; --mo5:#5a9a7a;
  --pe1:#f2eee6; --pe2:#e0d4c0; --pe3:#c4a98a; --pe4:#9a7757; --pe5:#5c412c;
  --og1:#efefec; --og2:#d9d3c8; --og3:#b3a48c; --og4:#7f6a4c; --og5:#3d2f1e;
  --pw1:#fdeedc; --pw2:#f8cf9c; --pw3:#e9a55a; --pw4:#c27a2e; --pw5:#7a4a14;
  --mn1:#efeeee; --mn2:#d8d0d6; --mn3:#b19bb0; --mn4:#7f5f86; --mn5:#452f4c;
  --gw1:#e3eef6; --gw2:#b9d3e8; --gw3:#84b0d3; --gw4:#4d84b4; --gw5:#1f4f80;
  --sw1:#e6efe9; --sw2:#c2dccb; --sw3:#ecd08b; --sw4:#d98b45; --sw5:#9a3a2a;
  --so1:#e2efd9; --so2:#f2dfa0; --so3:#d9905a; --so4:#8c3f2a;
  --le1:#8e2b2b; --le2:#d9744a; --le3:#efd48a; --le4:#9fcf9a; --le5:#2f7a4a;
  --cr1:#e8efe4; --cr2:#efe9cf; --cr3:#efd2a4; --cr4:#dc9a6a; --cr5:#a8452f;
  --db1:#eaf1ea; --db2:#cfe0c9; --db3:#b7c99a; --db4:#b98b5b; --db5:#7f3f2a;
  --aq1:#e6eef2; --aq2:#c9dde6; --aq3:#9cc0d1; --aq4:#5f93ad; --aq5:#2b5d78;
  --pl1:#7a2e1e; --pl2:#c9663a; --pl3:#e9c27a; --pl4:#cfe0c0; --pl5:#e9efe6;
  --rx1:#efeeea; --rx2:#d7d2c4; --rx3:#b3a88c; --rx4:#7d6f4f; --rx5:#3f3624;
  --at1:#dbeef5; --at2:#a9d2e3; --at3:#e6cf8e; --at4:#d68a4e; --at5:#8c3626;
  --wl1:#f0efe8; --wl2:#d5e6d0; --wl3:#9fcbb8; --wl4:#5aa39a; --wl5:#1f6a68;
  --ab1:#e7efe3; --ab2:#cfe2bf; --ab3:#a6cc6c; --ab4:#5e9a2e; --ab5:#2d5a19;
  --sr1:#e9cfd2; --sr2:#efe6d6; --sr3:#dbe6cf; --sr4:#a9cf9e; --sr5:#4f9a5c;
  --hv1:#efeeea; --hv2:#e7dcd0; --hv3:#d8b8a2; --hv4:#b9806a; --hv5:#7b3f3a;
  --bp1:#eeeef1; --bp2:#d3dbec; --bp3:#a6bbe0; --bp4:#6a8ccb; --bp5:#2c4d9c;
  --pa1:#e8eee9; --pa2:#d3e3d6; --pa3:#f0d9a0; --pa4:#e0935c; --pa5:#a03a30; --fl1:#3b7dd8; --fl2:#c9a15a; --fl3:#4f9fbf; --fl4:#8f9aa6;
  --lc1:#e6efd8; --lc2:#dfe3c6; --lc3:#d9d6c2; --lc4:#c5bcae; --lc5:#8a8078;
  --wk1:#ece2d2; --wk2:#e6e6c6; --wk3:#bcd8b2; --wk4:#4f9a6a;
  --tr1:#ece9e1; --tr2:#efe3c8; --tr3:#e8c99a; --tr4:#d9a06a; --tr5:#b86a3c; --tr6:#6e3a2a;
  --tf1:#eeeeec; --tf2:#e3e0d4; --tf3:#d2c69f; --tf4:#b89a55; --tf5:#7a5a1e;
  --br1:#e9ede9; --br2:#cfe0cc; --br3:#eed9a2; --br4:#d99560; --br5:#9a3b30;
  --da1:#eaf0ee; --da2:#c5dcd9; --da3:#8fbdc0; --da4:#4e8f9c; --da5:#1f5464;
  --tt1:#efecec; --tt2:#f5cfc2; --tt3:#ee9d86; --tt4:#d4614a; --tt5:#8e2a1f;
  --av1:#e2f0ec; --av2:#b7ddd2; --av3:#f1d48a; --av4:#e0a04a; --av5:#a8542a;
  --yb1:#3b1c4a; --yb2:#7a2f63; --yb3:#bc4f5e; --yb4:#e8895c; --yb5:#f6cf8f;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
    color-scheme:dark;
    --water:#182c40; --water-line:#3f6f96; --county:#3c4a58; --state:#93a3b3;
    --c-erie:#3d8fe6; --c-ohio:#7b4fc8; --c-river:#22a874; --c-gw:#e0522f;
    --c-none:#18212b; --c-none-hatch:#2b3743; --dot:#0f1620;
    --r0:#18212b; --r1:#3b3520; --r2:#8a6a24; --r3:#c46a22; --r4:#dc4d2c; --r5:#ff7a72;
    --e-aep:#e2504f; --e-aes:#f0ad3e; --e-duke:#2fb59e; --e-oe:#5b8fe8; --e-cei:#9b7fd8; --e-te:#6ab850; --e-coop:#b08a55; --e-muni:#dc63ad;
    --g-cgo:#4f86e0; --g-enb:#f0b53a; --g-duk:#2fb59e; --g-ceo:#e8677a; --g-small:#9d84d6; --g-coop:#b08a55; --g-muni:#dc63ad;
    --s-city:#5b8fe8; --s-local:#22a874; --s-ev:#9b7fd8; --s-other:#6f7e8c;
    --t-att:#5b8fe8; --t-frontier:#e8677a; --t-alta:#2fb59e; --t-bright:#f0a24a; --t-wind:#9b7fd8; --t-indie:#b08a55;
    --f0:#1c2530; --f1:#22364d; --f2:#2a4f76; --f3:#3a6ea6; --f4:#5b93d6; --f5:#9cc4f2;
    --l-city:#5b8fe8; --l-village:#9b7fd8; --l-township:#a9bf5e;
    --b1:#1f3a31; --b2:#2c6a52; --b3:#9a7a25; --b4:#d0782c; --b5:#e5483a;
    --z1:#2a2440; --z2:#43356b; --z3:#6a4fa8; --z4:#9478d4; --z5:#c6b2f0;
    --m1:#4a2a26; --m2:#8a4a35; --m3:#2a5f57; --m4:#2f9a86; --m5:#7fd8c6;
    --h1:#1f3a31; --h2:#2c6a52; --h3:#9a7a25; --h4:#d0782c; --h5:#e5483a;
    --p-r:#e2504f; --p-d:#5b8fe8; --p-i:#9b7fd8;
    --v1:#ff7a72; --v2:#e5483a; --v3:#d0782c; --v4:#9a7a25; --v5:#1f3a31;
    --k1:#1f2f22; --k2:#2c5a38; --k3:#3f8a52; --k4:#6dbb7e; --k5:#b6ecbf;
    --a1:#1d2f3d; --a2:#2c5470; --a3:#8a7a30; --a4:#c07a35; --a5:#e0a070;
    --i1:#3a2620; --i2:#7a3a25; --i3:#c05a2c; --i4:#ee8a4f; --i5:#ffc2a0;
    --y1:#1c2f30; --y2:#245658; --y3:#2f8288; --y4:#4fb3b8; --y5:#a6e6e6;
    --d1:#232b1e; --d2:#4d4426; --d3:#8a6a34; --d4:#c48f4a; --d5:#f0c58a;
    --q1:#1c3a2e; --q2:#2b6d52; --q3:#9a7c28; --q4:#cf7a2e; --q5:#e8563a;
    --n1:#1c2420; --n2:#2b4a2a; --n3:#3f7a3c; --n4:#6db55e; --n5:#b5eaa2;
    --w1:#1f3a2c; --w2:#6e6220; --w3:#b07a2a; --w4:#d9662f; --w5:#ff6b6b;
    --j1:#2a2236; --j2:#4a3a66; --j3:#71569a; --j4:#9d7fd0; --j5:#cdb7f0;
    --o1:#1c2636; --o2:#26405f; --o3:#3a5f94; --o4:#6a90d4; --o5:#a9c6f2;
    --u1:#3a2418; --u2:#6f3d22; --u3:#b0602e; --u4:#e58a4f; --u5:#ffc7a3;
    --x1:#212b1c; --x2:#3f5a2a; --x3:#8a7a28; --x4:#c98a34; --x5:#ee9a5a;
    --c1:#2e2a22; --c2:#1f3346; --c3:#2c5478; --c4:#4a84c0; --c5:#9fc8f2;
    --hh1:#1d2c2e; --hh2:#2b4a50; --hh3:#8a7030; --hh4:#cf7a48; --hh5:#f26a5c;
    --hi1:#2a2620; --hi2:#4a3e2c; --hi3:#7a6440; --hi4:#b6935e; --hi5:#e8cf9c;
    --ht1:#f0c48e; --ht2:#d99a58; --ht3:#b8763a; --ht4:#8a5a30; --ht5:#5e4020; --ht6:#3a2a1a;
    --sl1:#26241f; --sl2:#4a3d28; --sl3:#8a6a35; --sl4:#c98a4a; --sl5:#f0b070;
    --ds1:#242230; --ds2:#3d3358; --ds3:#61508a; --ds4:#9480c8; --ds5:#cdbdf5;
    --jb1:#22281f; --jb2:#3a4f2e; --jb3:#5c7f45; --jb4:#8fb872; --jb5:#c9ecb0;
    --sv1:#243426; --sv2:#4a4630; --sv3:#7a5c36; --sv4:#c48a58; --sv5:#f0a48c;
    --mo1:#5a3430; --mo2:#4c4030; --mo3:#3c4a34; --mo4:#4f7a5a; --mo5:#8fd0a8;
    --pe1:#2a2620; --pe2:#4a3e30; --pe3:#7a6248; --pe4:#b3946f; --pe5:#e6cfa8;
    --og1:#262420; --og2:#4a4234; --og3:#7a6a4e; --og4:#b39b74; --og5:#e6d2ae;
    --pw1:#3a2a18; --pw2:#6f4a1e; --pw3:#b07428; --pw4:#e6a24c; --pw5:#ffd39a;
    --mn1:#262226; --mn2:#453b48; --mn3:#6f5a74; --mn4:#a68aae; --mn5:#dcc4e2;
    --gw1:#1c2a38; --gw2:#254a66; --gw3:#33709a; --gw4:#5f9ccc; --gw5:#a9d1f2;
    --sw1:#1e2f26; --sw2:#2c5a42; --sw3:#8a7a2c; --sw4:#cf7f3c; --sw5:#ef6a58;
    --so1:#243a1c; --so2:#7a6a26; --so3:#c07a44; --so4:#e86a52;
    --le1:#ff7a72; --le2:#d9744a; --le3:#8f7a2a; --le4:#3f7a48; --le5:#8fd6a0;
    --cr1:#243426; --cr2:#4a4630; --cr3:#7a5c36; --cr4:#b07040; --cr5:#f0907a;
    --db1:#23302a; --db2:#2f4a38; --db3:#4f6a3a; --db4:#8a6a3c; --db5:#d07a5a;
    --aq1:#22303a; --aq2:#2f4a58; --aq3:#3f6a7e; --aq4:#5f93ad; --aq5:#9fd0e6;
    --pl1:#ff8a70; --pl2:#c9663a; --pl3:#8a7530; --pl4:#3a5a3a; --pl5:#22302a;
    --rx1:#24221e; --rx2:#45402f; --rx3:#756a48; --rx4:#ab9c70; --rx5:#e2d3a6;
    --at1:#1d3440; --at2:#2b5f78; --at3:#8a7a30; --at4:#cf7f44; --at5:#ee6a55;
    --wl1:#26281f; --wl2:#2f4a3a; --wl3:#3f7a68; --wl4:#63b0a0; --wl5:#b0eadc;
    --ab1:#232a22; --ab2:#31492a; --ab3:#5d8a2e; --ab4:#8fc44a; --ab5:#c9ef8a;
    --sr1:#5a2f36; --sr2:#4a4230; --sr3:#3d5a33; --sr4:#5f9a52; --sr5:#9be08a;
    --hv1:#26241f; --hv2:#4a3a30; --hv3:#8a6650; --hv4:#c48f78; --hv5:#f0b8a8;
    --bp1:#23252c; --bp2:#2f3d5c; --bp3:#4b66a0; --bp4:#7d9be0; --bp5:#b9ccff;
    --pa1:#232a25; --pa2:#2e4a36; --pa3:#8a7a30; --pa4:#cf8850; --pa5:#ef6a5a; --fl1:#4a8ee6; --fl2:#b08a3a; --fl3:#5aaccb; --fl4:#7d8894;
    --lc1:#2a3a24; --lc2:#3a4430; --lc3:#45443a; --lc4:#5c554d; --lc5:#aaa198;
    --wk1:#4a3c2c; --wk2:#4a4c2c; --wk3:#3f6a44; --wk4:#8ad0a0;
    --tr1:#3a3a34; --tr2:#4d4630; --tr3:#6d5836; --tr4:#8d6a3a; --tr5:#b8834a; --tr6:#e0a070;
    --tf1:#262622; --tf2:#3f3a2c; --tf3:#6e6236; --tf4:#a88c44; --tf5:#e6c878;
    --br1:#242a24; --br2:#2f4a34; --br3:#8a7a30; --br4:#cf8850; --br5:#ef6a5a;
    --da1:#1c2626; --da2:#244243; --da3:#2f6a6e; --da4:#4fa0a8; --da5:#a3e0e6;
    --tt1:#2a2424; --tt2:#5a2f28; --tt3:#9a4a3a; --tt4:#d97a60; --tt5:#ffb8a6;
    --av1:#1f3129; --av2:#2b5a4a; --av3:#8a7a30; --av4:#c98a3a; --av5:#f0b070;
    --yb1:#f7d9a0; --yb2:#f0a070; --yb3:#d0607a; --yb4:#8e3f86; --yb5:#4a2c63;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --water:#182c40; --water-line:#3f6f96; --county:#3c4a58; --state:#93a3b3;
  --c-erie:#3d8fe6; --c-ohio:#7b4fc8; --c-river:#22a874; --c-gw:#e0522f;
  --c-none:#18212b; --c-none-hatch:#2b3743; --dot:#0f1620;
}
/* ---------- infrastructure overlays (2026-09-10) ---------- */
:root{
  --in-gas:#d9791c; --in-crude:#6b3d1c; --in-prod:#b23a8d; --in-hgl:#7d55c7; --in-elec:#c8342a; --in-plant:#333a42;
  --in-wm:#1d63c9; --in-sw:#8a6d2b; --in-tun:#4c3b12; --in-wwtp:#7a5a1e; --in-cso:#b8321f; --in-dam:#3d6b8f; --in-lev:#2f7a3a; --in-lock:#1f3f8a; --in-ww:#4f8fc9;
  --in-ir:#b8321f; --in-us:#d9822b; --in-sr:#7f8a94; --in-rail:#2b2f36; --in-amtrak:#2166c9; --in-bus:#1a9e6a; --in-rt:#0b5fa5; --in-air:#2a5db0; --in-rw:#4a4f57; --in-ferry:#1f6fb0;
  --in-tower:#6c757d; --in-ev:#1a9e6a; --in-lf:#7a5a1e; --in-inj:#7d55c7; --in-sf:#c9532a; --in-hosp:#c8342a; --in-fire:#d94f2a; --in-pol:#2a5db0; --in-inc:#e0892a;
  --in-halo:#ffffff;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --in-rail:#d5d9df; --in-sr:#aab3bd; --in-rw:#c3c8cf; --in-tower:#aab2ba; --in-plant:#e2e8ee; --in-crude:#b98457; --in-tun:#c9b27a; --in-sw:#c4a457; --in-lf:#c4a457; --in-wwtp:#c4a457; --in-halo:#0f1620; }}
:root[data-theme="dark"]{ --in-rail:#d5d9df; --in-sr:#aab3bd; --in-rw:#c3c8cf; --in-tower:#aab2ba; --in-plant:#e2e8ee; --in-crude:#b98457; --in-tun:#c9b27a; --in-sw:#c4a457; --in-lf:#c4a457; --in-wwtp:#c4a457; --in-halo:#0f1620; }
/* generated by scripts/site/extract_engine.py from template.html (sha256 08645cc934e0); do not edit */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.card{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel-2);position:relative}
.card .close{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;line-height:1;color:var(--muted)}
.card .close:hover{color:var(--ink)}
.source{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.swatch{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.08);flex:none;margin-top:2px}
.swatch svg{display:block;width:100%;height:100%;border-radius:6px}
.source .lbl{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.source .cls{font-size:12px;color:var(--muted);margin-top:3px}
.kv{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;margin:12px 0 0;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.kv .mono{font-family:var(--font-mono);font-size:12px}
.chain{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--line-strong);font-size:13px;color:var(--ink)}
.chain b{font-weight:600}
.note{font-size:13px;color:var(--muted);margin:10px 0 0}
.links{margin:8px 0 0;font-size:12px;display:flex;flex-wrap:wrap;gap:6px 12px}
.links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.syslist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.syslist li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px;align-items:center}
.syslist .nm{font-weight:500}
.syslist .nm button{border:0;background:none;padding:0;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);text-align:left}
.syslist .nm button:hover{text-decoration-color:var(--ink)}
.syslist .src{grid-column:1;color:var(--muted);font-size:12px}
.syslist .pct{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.syslist .bar{grid-column:1 / -1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.syslist .bar i{display:block;height:100%;border-radius:2px}
.fuel{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:8px 0 4px;background:var(--line)}
.fuel i{display:block;height:100%}
.fuel-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--muted);margin:0}
.fuel-key span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--k)}
/* layer panels in the card */
.lp{margin:12px 0 0;padding:12px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.lp .eyebrow{margin:0 0 6px}
.rn{display:flex;align-items:baseline;gap:8px;margin:0}
.rn .big{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.rn .what{color:var(--muted);font-size:12.5px;line-height:1.3;max-width:22ch}
.rn-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin:8px 0 4px;position:relative}
.rn-bar i{display:block;height:100%;border-radius:4px}
.rn-bar b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.55}
.rn-line{margin:0;font-size:12.5px}
.rn-line b{font-weight:600}
.also{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 0;padding:10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.also .chip{display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 8px;font-size:11.5px;line-height:1.3;cursor:pointer;color:var(--ink)}
.also .chip:hover{border-color:var(--line-strong)}
.also .chip b{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.also .sw{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.1);flex:none}
.hzl{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.hzl li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:12.5px}
.hzl .bar{grid-column:1 / -1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.hzl .bar i{display:block;height:100%;border-radius:3px}
.intakes{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.intakes li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:12.5px;line-height:1.35}
.intakes .role{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);margin-top:1px;white-space:nowrap}
.intakes .role.primary{color:var(--panel);background:var(--ink);border-color:var(--ink)}
.intakes b{font-weight:600}
.intakes .d{color:var(--muted)}
.facts{display:flex;flex-direction:column;gap:6px;margin:14px 0 0}
.facts details{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel)}
.facts details[open]{padding-bottom:12px}
.facts summary{cursor:pointer;font-weight:600;font-size:13px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.facts summary::-webkit-details-marker{display:none}
.facts summary::after{content:"+";font-family:var(--font-mono);color:var(--muted)}
.facts details[open] summary::after{content:"\2212"}
.facts summary .cnt{font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--muted);margin-left:auto;margin-right:8px}
.facts p{margin:6px 0 0;font-size:12.5px;line-height:1.45}
.facts ul{margin:6px 0 0;padding-left:18px;font-size:12.5px;line-height:1.45}
.facts li{margin:0 0 4px}
.facts .yr{font-family:var(--font-mono);color:var(--muted);margin-right:6px;font-size:11.5px}
.facts .lab{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin:8px 0 2px}
.facts table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.facts th,.facts td{padding:4px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.facts th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.facts td.num{font-family:var(--font-mono);white-space:nowrap}
.facts .over{color:var(--c-gw);font-weight:600}
.facts .money{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.facts .src a{color:var(--muted);font-size:12px}
.facts .cite{margin:6px 0 0;font-size:11px;color:var(--faint)}
.facts .cite a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;margin-right:8px}
.photo{margin:12px 0 0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{padding:7px 10px 8px;font-size:12px;line-height:1.35}
.photo figcaption small{display:block;color:var(--faint);font-size:10.5px;margin-top:2px}
.photo figcaption small a{color:var(--faint)}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.pill.hi{color:var(--ink);border-color:var(--line-strong)}
.istrip{margin:12px 0 0;padding:10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)}
.istrip .m{color:var(--muted);font-size:12.5px;margin:0 0 6px;line-height:1.35}
.istrip .chip{display:inline-block;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px;font-size:11.5px;line-height:1.3;cursor:pointer;color:var(--ink);text-align:left}
.istrip .chip b{display:block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.istrip .chip:hover{border-color:var(--line-strong)}
.card .iswatch{display:inline-block;width:26px;height:26px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);padding:5px 1px}
.card .ilist li{grid-template-columns:auto 1fr}
.card .ilist .src{white-space:nowrap}
.card .ilinks button{border:0;background:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);color:var(--ink);font-size:13px}
/* generated by scripts/site/extract_engine.py from template.html (sha256 08645cc934e0); do not edit */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit}
.app{display:grid;grid-template-columns:372px 1fr;height:100vh;height:100dvh;overflow:hidden}
/* (2026-09-22) the rail is a fixed 372px; on a laptop that is a quarter of the window the map cannot use. Collapsing it
   is pure CSS: a ResizeObserver on .mapwrap already calls scheduleRefit, so the projection refits itself. */
.app.rail-off{grid-template-columns:0 1fr}
.app.rail-off .rail{display:none}
.rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.rail-scroll{overflow-y:auto;padding:22px 22px 18px;display:flex;flex-direction:column;gap:18px;flex:1;min-height:0}
.brand h1{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;margin:0 0 8px;text-wrap:balance}
.brand p{margin:0;color:var(--muted);max-width:32ch}
.search{position:relative}
.search input{width:100%;padding:11px 40px 11px 14px;border:1.5px solid var(--line-strong);border-radius:8px;background:var(--panel);outline:none;font-size:15px}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.search .kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 6px;pointer-events:none}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:30;max-height:330px;overflow:auto}
.suggest li{padding:8px 10px;border-radius:6px;cursor:pointer;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--panel-2)}
.suggest .k{font-family:var(--font-mono);font-size:12px;color:var(--muted);min-width:52px}
.suggest .t{font-weight:500}
.suggest .t small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.zipline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.zipline .zip{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.zipline .town{font-weight:600;font-size:16px}
.sub{color:var(--muted);margin:0 0 12px}
.legend{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.legend li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.legend li:hover{background:var(--panel-2)}
.legend li[aria-pressed="true"]{border-color:var(--line-strong);background:var(--panel-2)}
.legend .sw{width:22px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}
.legend .sw svg{display:block;width:100%;height:100%;border-radius:4px}
.legend .nm{font-weight:500;font-size:13px}
.legend .nm small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.legend .n{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.stat{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.stat .big{font-family:var(--font-display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .what{color:var(--muted);font-size:13px;max-width:20ch;line-height:1.3}
.bars{display:flex;flex-direction:column;gap:7px;margin:4px 0 0}
.bars .row{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12.5px;align-items:center}
.bars .row .track{grid-column:1 / -1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bars .row .track i{display:block;height:100%;border-radius:3px}
.bars .row .v{font-family:var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.modes{display:flex;flex-direction:column;gap:4px}
.seg-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:6px 0 2px}
.seg-label:first-child{margin-top:0}
.seg{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--line-strong)}
.seg button{border:0;background:var(--panel);padding:7px 4px;font-size:12px;font-weight:500;cursor:pointer;color:var(--muted);white-space:nowrap;flex:1 1 23%}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.legend li .sw.rn-sw{border-radius:3px}
.legend.compact li{padding:4px 8px}
.ptype{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap;vertical-align:middle}
.legend .sw.dot{position:relative}
.marker{fill:var(--panel);stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:pointer}
.marker.hl{stroke-width:2.6}
.l-markers circle.hit,.l-intakes circle.hit,.l-wells .whit circle.hit{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.lbl-plant{font-family:var(--font-body);font-weight:600;fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:.32em;stroke-linejoin:round}
.intake-line{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px dashed var(--line-strong);font-size:13px}
.intake-line b{font-weight:600}
.intake-line .where{color:var(--muted);font-size:12px;margin-top:3px}
.intake-line button{margin-top:8px;border:1px solid var(--line-strong);background:var(--panel-2);border-radius:6px;padding:4px 9px;font-size:12px;cursor:pointer}
.imark{fill:var(--panel);stroke-width:1.3;vector-effect:non-scaling-stroke;cursor:pointer}
.lbl-intake{font-family:var(--font-body);font-weight:500;fill:var(--muted);pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:.32em;stroke-linejoin:round}
.wzone{fill:var(--c-gw);fill-opacity:.12;stroke:var(--c-gw);stroke-width:.8;stroke-dasharray:3 2;vector-effect:non-scaling-stroke;pointer-events:none}
.wpt{fill:var(--c-gw);stroke:var(--panel);stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer}
.wpt.outer{fill:var(--panel);stroke:var(--c-gw);stroke-width:1.2}
.wellgrid{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0}
.wellgrid span{font-family:var(--font-mono);font-size:11px;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink)}
.wellgrid span.alt{color:var(--muted);border-style:dashed}
.ledger-q{width:100%;box-sizing:border-box;margin:8px 0 6px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel-2);color:var(--ink);font-family:inherit;font-size:12.5px}
.ledger-fs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 4px}
.ledger-f{font-size:11.5px;padding:3px 6px;border-radius:6px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);font-family:inherit}
.ledger-load{font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);cursor:pointer}
.ledger-out h4{margin:12px 0 2px;font-size:12.5px;font-weight:600}
.ledger-out h4 .n{color:var(--muted);font-weight:400;font-size:11.5px}
.ledger-out table{width:100%;border-collapse:collapse;font-size:11.5px;line-height:1.35;margin-top:2px}
.ledger-out td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.ledger-out td.d{font-family:var(--font-mono);white-space:nowrap;color:var(--muted)}
.ledger-out td.n{font-family:var(--font-mono);text-align:right;white-space:nowrap}
.ledger-out .sub{color:var(--faint);font-size:11px;margin-top:1px}
.ledger-out .id{font-family:var(--font-mono)}
.ledger-out button.addr{border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
/* houses and neighborhoods (2026-09-14): the house browser on the card and the selected ZIP's houses on the map */
.hh-q{width:100%;box-sizing:border-box;margin:8px 0 6px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel-2);color:var(--ink);font-family:inherit;font-size:12.5px}
.hh-fs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 4px}
.hh-f{font-size:11.5px;padding:3px 6px;border-radius:6px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);font-family:inherit;max-width:100%}
.hh-load,.hh-back,.hh-map,.hh-more{font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);cursor:pointer;font-family:inherit}
.hh-out h4{margin:12px 0 2px;font-size:12.5px;font-weight:600}
.hh-out h4.hh-h{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.01em;margin:10px 0 2px}
.hh-out h4 .n{color:var(--muted);font-weight:400;font-size:11.5px}
.hh-tw{overflow-x:auto}
.hh-out table{width:100%;border-collapse:collapse;font-size:11.5px;line-height:1.35;margin-top:2px}
.hh-out th{padding:3px 4px;border-bottom:1px solid var(--line-strong);text-align:left;color:var(--muted);font-weight:600;font-size:10.5px;white-space:nowrap}
.hh-out td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.hh-out td.d{font-family:var(--font-mono);white-space:nowrap;color:var(--muted)}
.hh-out td.n,.hh-out th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.hh-out .sub{color:var(--faint);font-size:11px;margin-top:1px}
.hh-out .id{font-family:var(--font-mono)}
.hh-out .kv{grid-template-columns:104px 1fr}
.hh-out button.addr{border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.l-houses circle{vector-effect:non-scaling-stroke}
.mapwrap.hh-dots path.zip{fill-opacity:.2}
.mapwrap.hh-dots path.zip.dim{fill-opacity:.06}
.mapwrap.hh-dots.raster path.zip{fill-opacity:.1}
/* while house dots show, the ZIP fills fade so a dot never sits on its own bin color */
.l-houses circle.hd{stroke:#fff;stroke-width:.7;cursor:pointer;pointer-events:all}
.l-houses .yb1{fill:var(--yb1)}
.l-houses .yb2{fill:var(--yb2)}
.l-houses .yb3{fill:var(--yb3)}
.l-houses .yb4{fill:var(--yb4)}
.l-houses .yb5{fill:var(--yb5)}
.l-houses circle.ny{fill:transparent;stroke:var(--ink);stroke-width:1.1;stroke-opacity:.8}
.l-houses circle.hr{fill:none;stroke:var(--ink);stroke-width:2.4;pointer-events:none}
.l-houses path.hol{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;pointer-events:none}
.mapwrap.base-dark .l-houses circle.ny{stroke:#fff}
.mapwrap.base-dark .l-houses circle.hr{stroke:#ffd23f}
.mapwrap.base-dark .l-houses path.hol{stroke:#fff}
.layers .sw.hh-sw0{background:transparent;border:1.2px solid var(--ink);border-radius:50%}
.hx h4{margin:14px 0 4px;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em}
.hx p{margin:6px 0 0;font-size:12.5px;line-height:1.5}
.hx .lab{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin:10px 0 2px}
.hx details{border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--panel);margin:6px 0 0}
.hx summary{cursor:pointer;font-weight:600;font-size:13px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.hx summary::-webkit-details-marker{display:none}
.hx summary::after{content:"+";font-family:var(--font-mono);color:var(--muted)}
.hx details[open] summary::after{content:"\2212"}
.hx summary .cnt{font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--muted);margin-left:auto;margin-right:8px}
.hx ul.hx-tl,.hx ul.hx-sites{margin:6px 0 0;padding-left:0;list-style:none;font-size:12.5px;line-height:1.45}
.hx ul.hx-tl li,.hx ul.hx-sites li{margin:0 0 5px;padding-left:0}
.hx .yr{font-family:var(--font-mono);color:var(--muted);margin-right:6px;font-size:11.5px;white-space:nowrap}
.hx a.hx-src{color:var(--faint);font-size:11px;text-decoration:underline;text-underline-offset:2px;margin-left:4px}
.hx .hx-switch{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 0}
.hx .hx-unit{cursor:pointer;background:var(--panel)}
.hx .hx-unit.on{color:var(--panel);background:var(--ink);border-color:var(--ink)}
.hx .hx-more-btn{border:0;background:none;padding:0;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;cursor:pointer}
.hx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}
.hx-grid figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.hx-grid img{display:block;width:100%;height:auto}
.hx-grid figcaption{padding:5px 7px 6px;font-size:11px;line-height:1.3}
.hx-grid figcaption small{display:block;color:var(--faint);font-size:10px;margin-top:2px}
.hx-grid .hx-ph-wait{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:11px;background:var(--panel-2)}
.fine{font-size:11.5px;color:var(--faint);line-height:1.5}
.fine a{color:var(--faint)}
.fine p{margin:0 0 6px}
/* (2026-09-22, PLAN-2026-09-22-map-lag.md, Change 3) The outermost <svg> clips at its own box, so while a gesture rides the stage the strip panning in from outside was blank until the commit. The svg stops clipping and the map area clips at its own bounds instead; every control is a child of .mapwrap and sits inside it, so nothing of the chrome is lost. */
.mapwrap{position:relative;min-width:0;min-height:0;background:var(--bg);overflow:hidden}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab;overflow:visible}
#map:active{cursor:grabbing}
.zip{fill-opacity:.92;stroke:var(--panel);stroke-width:.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill-opacity .15s}
.zip.dim{fill-opacity:.13}
.zip.hi{stroke:var(--ink);stroke-width:1.6}
.zip.sel{stroke:var(--ink);stroke-width:2.6}
.zip:hover{stroke:var(--ink);stroke-width:1.4}
.mapwrap.zips-off .zip:not(.hi):not(.sel):not(:hover){stroke:none}
/* (2026-09-25) ZIP codes switched off: no outlines, the colors stay */
/* base maps (2026-09-13): a canvas of street or satellite tiles under the SVG; ZIP colors go translucent so the ground shows through, the atlas's own water stays off under the live bases, and labels get a halo that reads on imagery */
.basemap{position:absolute;left:0;top:0;z-index:0;pointer-events:none}
#map{position:relative}
/* (2026-09-22) the gesture stage: the four drawing surfaces, moved as one layer by the compositor while a gesture is live (PLAN-2026-09-22-map-lag.md) */
.stage{position:relative;width:100%;height:100%;transform-origin:0 0;will-change:transform}
.mapwrap.raster .zip{fill-opacity:.45;stroke:rgba(255,255,255,.55)}
.mapwrap.base-streets .zip{stroke:rgba(20,37,48,.35)}
.mapwrap.raster .zip.dim{fill-opacity:.08}
/* The night base is the one raster base whose PICTURE is the point -- a choropleth at .45 over it hides exactly the lights that were asked for.
   The fill stays, faded, so a color mode is still readable; if he would rather have the full fill back, this is the one line to delete. */
.mapwrap.base-night .zip{fill-opacity:.22}
.mapwrap.base-night .zip.dim{fill-opacity:.05}
.mapwrap.raster:not(.base-bundle) .l-water{display:none}
/* the live bases draw their own water; the bundled USGS sheets leave open Lake Erie blank white, so the atlas lakes stay (base-bundle, set by bmApply) */
.mapwrap.raster.base-bundle .l-water path.river{display:none}
.mapwrap.base-dark .zip.hi,.mapwrap.base-dark .zip.sel,.mapwrap.base-dark .zip:hover{stroke:#fff}
.mapwrap.base-streets .zip.hi,.mapwrap.base-streets .zip.sel,.mapwrap.base-streets .zip:hover{stroke:#14212b}
.mapwrap.base-dark .county{stroke:#fff;opacity:.8}
.mapwrap.base-dark .state{stroke:#fff}
.mapwrap.base-streets .county{stroke:#5c6b78}
.mapwrap.base-streets .state{stroke:#14212b}
.mapwrap.base-dark .lbl-county,.mapwrap.base-dark .lbl-zip,.mapwrap.base-dark .lbl-water,.mapwrap.base-dark .lbl-plant,.mapwrap.base-dark .lbl-intake{fill:#fff;stroke:rgba(0,0,0,.85);opacity:1}
.mapwrap.base-streets .lbl-county,.mapwrap.base-streets .lbl-zip,.mapwrap.base-streets .lbl-plant,.mapwrap.base-streets .lbl-intake{fill:#14212b;stroke:rgba(255,255,255,.9)}
.mapwrap.base-streets .lbl-water{fill:#2a5d8f;stroke:rgba(255,255,255,.9)}
.layers .bseg{display:flex;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.layers .bseg button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:12px;padding:6px 10px;cursor:pointer;border-right:1px solid var(--line)}
.layers .bseg button:last-child{border-right:0}
.layers .bseg button:hover{background:var(--panel-2)}
.layers .bseg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.layers label.off{opacity:.45}
.layers .bseg button.na{opacity:.45}
.attrib{position:absolute;right:0;top:0;z-index:5;font-size:10px;line-height:14px;padding:1px 6px;background:rgba(255,255,255,.78);color:#222;max-width:70%;white-space:normal;text-align:right;border-bottom-left-radius:6px}
.attrib a{color:inherit}
.water{fill:var(--water);stroke:var(--water-line);stroke-width:.6;vector-effect:non-scaling-stroke;pointer-events:none}
.river{fill:none;stroke:var(--water-line);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;opacity:.95}
.county{fill:none;stroke:var(--county);stroke-width:.9;vector-effect:non-scaling-stroke;pointer-events:none}
.state{fill:none;stroke:var(--state);stroke-width:1.3;vector-effect:non-scaling-stroke;pointer-events:none}
.lbl-county{font-family:var(--font-body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted);text-anchor:middle;pointer-events:none;opacity:.75;paint-order:stroke;stroke:var(--bg);stroke-width:.35em;stroke-linejoin:round}
.lbl-zip{font-family:var(--font-mono);font-weight:500;fill:var(--ink);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:.3em;stroke-linejoin:round;opacity:.9}
.lbl-water{font-family:var(--font-display);font-style:italic;font-weight:500;fill:var(--water-line);text-anchor:middle;pointer-events:none;letter-spacing:.04em}
.hide{display:none}
.zoomctl{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;max-height:100%;overflow-y:auto;overflow-x:hidden;padding:14px;scrollbar-width:none}
/* (2026-09-22) nine buttons now, so the column scrolls rather than running off the top of a short screen.      The inset moved from right/bottom into PADDING: overflow clips at the padding box, so the 28px button      shadows keep their room. The buttons sit exactly where they did. */
.zoomctl::-webkit-scrollbar{display:none}
.zoomctl .lybtn{display:none;font-size:11px;font-weight:600;padding:0 6px;height:34px;letter-spacing:.02em}
.zoomctl button,.layers label{background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow)}
.zoomctl button{width:36px;height:36px;font-size:18px;cursor:pointer;line-height:1;color:var(--ink)}
.zoomctl button:hover{background:var(--panel-2)}
.zoomctl button.reset{font-size:12px;font-weight:600;letter-spacing:.04em}
.zoomctl .sobtn,.zoomctl .rlbtn{font-size:17px;font-weight:400;letter-spacing:0}
/* (2026-09-22) glyphs, not the two-letter OH label that .reset is sized for */
.zoomctl button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.mapwrap.pinning svg{cursor:crosshair}
.l-pins .pin{cursor:pointer}
.l-pins .pin .hit{fill:transparent}
.l-pins .pin .ring{fill:none;stroke:#d7301f;stroke-width:2px}
.l-pins .pin .dot{fill:#d7301f;stroke:#fff;stroke-width:1px}
.l-pins .pin:hover .ring{stroke:#a8190a}
.layers{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap}
.layers label{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;cursor:pointer;color:var(--ink)}
.layers input{margin:0;accent-color:var(--c-erie)}
/* FEMA flood zone overlays (2026-09-10): a second row of toggles above the layer row; the zones draw per county once zoomed in */
.layers.flood{bottom:52px}
.layers .lyhead,.layers .lyhint{display:flex;align-items:center;padding:6px 10px;font-size:11px;color:var(--muted);background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow)}
.layers .lyhead{font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.layers .sw{display:inline-block;width:11px;height:11px;border-radius:2px;margin-left:2px}
.l-flood path.fz{fill-rule:evenodd;vector-effect:non-scaling-stroke;pointer-events:visibleStroke;stroke-linejoin:round}
.l-flood .fz-a{fill:#1d6fd1;fill-opacity:.17;stroke:#1d6fd1;stroke-width:1.4}
.l-flood .fz-x{fill:#5fa8e6;fill-opacity:.13;stroke:#3d8bd9;stroke-width:1.1;stroke-dasharray:5 3}
.l-flood .fz-w{fill:#c0392b;fill-opacity:.2;stroke:#c0392b;stroke-width:1.2}
.l-flood .fz-l{fill:#8e6cc9;fill-opacity:.12;stroke:#8e6cc9;stroke-width:1.1;stroke-dasharray:2 2}
.l-flood.outline path.fz{fill-opacity:0}
.l-growth path.gr{fill-rule:evenodd;vector-effect:non-scaling-stroke;pointer-events:visibleStroke;stroke-linejoin:round}
.l-growth .gr-a{fill:#7b1fa2;fill-opacity:.15;stroke:#7b1fa2;stroke-width:1.2}
.l-growth .gr-s{fill:#1f9e89;fill-opacity:.13;stroke:#1f9e89;stroke-width:.9}
.l-growth .gr-p{fill:#1f9e89;fill-opacity:.8;stroke:#0d6b5c;stroke-width:.8}
/* (2026-09-22) the undated records: same ground, no recorded year, so they are drawn dashed and only on request */
/* (2026-09-22) recorded plats, rings 0-1: outlines, not fills. 17,474 of them overlap heavily, and the growth overlay
   above already learned that stacked translucent fills go solid at this density -- an outline says "a plat is recorded
   here" without hiding the ground or the base map under it. The dated/undated split is a dash, same idiom as growth. */
.l-plats path.pl{fill:#b8562a;fill-opacity:0;stroke:#b8562a;stroke-opacity:.6;stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill-rule:evenodd;pointer-events:visibleStroke;cursor:pointer}
.l-plats path.pl:hover{fill-opacity:.14;stroke-opacity:1;stroke-width:1.6}
.l-plats path.pl.on{fill-opacity:.18;stroke-opacity:1;stroke-width:2;stroke-dasharray:none}
.mapwrap.base-dark .l-plats path.pl{stroke:#f0a070}
.l-growth .gr-au{fill:#7b1fa2;fill-opacity:.07;stroke:#7b1fa2;stroke-width:1.1;stroke-dasharray:3 2}
.l-growth .gr-su{fill:#1f9e89;fill-opacity:.07;stroke:#1f9e89;stroke-width:.9;stroke-dasharray:3 2}
.layers.growth .gryr{display:inline-flex;align-items:center;gap:.35rem}
.layers.growth .gryr input[type=range]{width:9rem;vertical-align:middle}
.layers.growth .gryr output{font-variant-numeric:tabular-nums;min-width:2.6rem}
/* camera overlays (2026-09-10, JoelHOMEDSKTP): a fourth pill row; enforcement cameras at any zoom, the dense classes per viewport once zoomed in */
.layers.cams{bottom:128px}
.l-cams circle{stroke:#fff;stroke-width:.7px;vector-effect:non-scaling-stroke;cursor:pointer}
.l-cams .cm-t{fill:#0f8a6d}
.l-cams .cm-f{fill:var(--ink)}
.l-cams .cm-e{fill:#d1372b}
.l-cams .cm-c{fill:#8a7a4a}
.l-cams circle.hl{stroke:#ffd23f;stroke-width:2.2px}
/* (2026-09-28) context around a picked ZIP: faint neighbouring outlines and town names even with ZIP codes and labels off */
.mapwrap.ctx.zips-off .zip:not(.hi):not(.sel):not(:hover){stroke:var(--muted);stroke-opacity:.5}
.lbl-ctx{font-family:var(--font-body);font-weight:500;fill:var(--ink);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:.3em;stroke-linejoin:round;opacity:.78}
.lbl-ctx.sel{font-weight:700;opacity:1}
.mapwrap.base-dark .lbl-ctx{fill:#fff;stroke:rgba(0,0,0,.85)}
/* (2026-09-28) Historic places: one dot per National Register listing while the Historic layer is on */
.l-nrhp circle{fill:#1f5fa8;stroke:#fff;stroke-width:.7px;vector-effect:non-scaling-stroke;cursor:pointer}
.l-nrhp circle.nhl{fill:#e0a100}
.l-nrhp circle.hl{stroke:#d7263d;stroke-width:2.8px}
.nr-list{list-style:none;margin:8px 0 0;padding:0;font-size:13px;max-height:340px;overflow:auto}
.nr-list li{padding:3px 0;border-bottom:1px solid var(--line)}
.nr-list .m{color:var(--muted)}
.nrb{border:0;background:none;padding:0;color:var(--ink);font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.nr-go{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* the pill rows (farmland, cameras, flood, base layers) stack in one flex column from the bottom left; each row keeps its own wrap and none can cover another */
.layerstack{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100% - 110px);pointer-events:none}
.layerstack .layers{position:static;bottom:auto;left:auto;pointer-events:auto}
/* Farmland sales and data center sites overlay (2026-09-10, JoelHOMEDSKTP): a pill row in the layer stack; parcels draw per county once zoomed in, data center sites at every zoom */
.l-farm circle.fp{vector-effect:non-scaling-stroke;stroke:#fff;stroke-width:.7;fill-opacity:.88;cursor:pointer}
.l-farm circle.fp.wl{stroke:var(--ink);stroke-width:1.8}
.l-farm .fp-0{fill:#7fb069}
.l-farm .fp-1{fill:#e9c22f}
.l-farm .fp-2{fill:#f0842c}
.l-farm .fp-3{fill:#d7301f}
.l-farm .fp-4{fill:#7b1fa2}
.l-farm .fp-v{fill:#2f7fd6}
.l-farm .fp-n{fill:#9a9a9a}
.l-farm path.dc{vector-effect:non-scaling-stroke;stroke:var(--ink);stroke-width:1.2;fill-opacity:.95;cursor:pointer}
.l-farm path.pw{vector-effect:non-scaling-stroke;stroke:var(--ink);stroke-width:1.1;fill-opacity:.92;cursor:pointer}
.l-farm .pw-gas{fill:#8b1a1a}
.l-farm .pw-solar{fill:#e9c22f}
.l-farm .pw-wind{fill:#1f9e89}
.l-farm .pw-battery{fill:#7b1fa2}
.l-farm .pw-substation,.l-farm .pw-large_load{fill:#6b6b6b}
.l-farm path.pw.st-pending{fill-opacity:.55;stroke-dasharray:2 1.5}
.l-farm path.pw.st-withdrawn{fill:var(--panel);fill-opacity:.9}
.l-farm path.mo{vector-effect:non-scaling-stroke;stroke:var(--ink);stroke-width:1.3;fill:var(--panel);fill-opacity:.9;cursor:pointer}
.l-farm path.mo.ac-moratorium{stroke:#d7301f}
.l-farm path.mo.ac-rezoning_denied{stroke:#7b1fa2}
.l-farm path.mo.ac-rezoning_approved,.l-farm path.mo.ac-annexation{stroke:#1f9e89}
.l-farm path.mo.ac-zoning_amendment{stroke:#f0842c}
.l-farm path.mo.ac-hearing,.l-farm path.mo.ac-town_hall{stroke:#6b6b6b}
.l-farm path.mo.ac-ballot_measure{stroke:#2f7fd6;stroke-width:1.8}
.l-farm .dc-operating{fill:var(--ink)}
.l-farm .dc-construction{fill:#d7301f}
.l-farm .dc-announced{fill:#f0842c}
.l-farm .dc-proposed{fill:#e9c22f}
.l-farm .dc-land_banking{fill:#7b1fa2}
.l-farm .dc-paused,.l-farm .dc-cancelled{fill:#9a9a9a}
.l-farm .dc-rumored{fill:var(--panel)}
.tip.pin{pointer-events:auto;border-color:var(--ink);max-width:320px;padding-right:22px}
.tip.pin a{color:inherit}
.tip .x{position:absolute;top:2px;right:7px;cursor:pointer;font-size:15px;color:var(--muted)}
.layers button.pill{background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow);padding:6px 10px;font-size:12px;cursor:pointer;color:var(--ink);font-weight:600}
.fm-asm{position:absolute;right:14px;top:14px;width:360px;max-width:calc(100% - 28px);max-height:72%;display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);font-size:12px;z-index:16}
.fm-asm .hd{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.fm-asm .hd b{white-space:nowrap}
.fm-asm .hd input{flex:1;min-width:0;font:inherit;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.fm-asm .hd .x{cursor:pointer;font-size:16px;color:var(--muted)}
.fm-asm .bd{overflow:auto;padding:4px 0}
.fm-asm .rw{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:6px 10px;cursor:pointer;color:var(--ink);font:inherit;line-height:1.3}
.fm-asm .rw:hover{background:var(--panel-2)}
.fm-asm .rw .o{font-weight:600}
.fm-asm .m{color:var(--muted);font-size:11.5px}
.fm-asm .rw.wl .o::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:#d7301f;margin-right:6px;vertical-align:middle}
/* historical map overlays (2026-09-14): the canvas under the SVG, the pill row, the footprints and the panel (which reuses .fm-asm) */
.mapwrap.hist .zip{fill-opacity:.2;stroke:rgba(255,255,255,.7)}
.mapwrap.hist .zip.dim{fill-opacity:.06}
.mapwrap.hist.nofill .zip,.mapwrap.hist.nofill .zip.dim{fill-opacity:0}
/* Hide ZIP colors: outlines and labels stay, the old map shows clean */
.mapwrap.hist .l-water{opacity:.35}
.mapwrap.elev .zip{fill-opacity:.3}
.mapwrap.elev .zip.dim{fill-opacity:.08}
.mapwrap.elev.elev-nf .zip,.mapwrap.elev.elev-nf .zip.dim{fill-opacity:0}
/* (2026-09-21) the relief shows through the ZIP colors; Hide ZIP colors clears them */
.el-read{position:absolute;left:8px;bottom:8px;z-index:5;font-size:12px;line-height:16px;padding:3px 8px;background:rgba(255,255,255,.88);color:#222;border-radius:6px;box-shadow:var(--shadow);pointer-events:none;max-width:70%}
.el-read b{font-weight:700}
.el-read .q{color:#555}
.layers.topo input[type=range]{width:90px;accent-color:var(--c-erie);margin:0}
.layers.topo .elk{display:inline-block;width:90px;height:9px;border-radius:3px;margin:0 6px;vertical-align:middle;border:1px solid rgba(0,0,0,.2)}
.zoomctl .hmbtn{font-size:16px}
.zoomctl .phbtn{font-size:16px}
/* (2026-09-25) Old photos: pins for historical photographs pinned where they were taken (data/histphotos/README.md), a dock like the old maps', and the card's photo grid */
.ph-dock{position:absolute;left:14px;top:14px;z-index:16;width:340px;max-width:calc(100% - 28px);display:flex;flex-direction:column;gap:6px;padding:8px 11px 9px;border-radius:12px;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:12px}
.ph-dock[hidden]{display:none}
.ph-dock .hd{display:flex;align-items:center;gap:7px}
.ph-dock .hd .st{flex:1;min-width:0;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-dock .x{flex:none;border:0;background:none;color:var(--muted);font:inherit;font-size:17px;line-height:1;padding:0 1px;cursor:pointer}
.ph-dock .kd{display:flex;flex-wrap:wrap;gap:4px}
.ph-dock .kd button{border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);border-radius:999px;font:inherit;font-size:11px;font-weight:600;padding:2px 9px;cursor:pointer;white-space:nowrap}
.ph-dock .kd button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.ph-dock label{display:flex;align-items:center;gap:5px;cursor:pointer}
.ph-dock .m{color:var(--muted);font-size:11.5px}
.l-photos .ph{cursor:pointer}
.l-photos .ph circle{fill:#9a5b1e;stroke:#fff}
.l-photos .ph.h circle{fill:#4d7a2a}
.l-photos .ph.sel circle{stroke:var(--ink)}
.l-photos .ph text{fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;font-family:var(--font-body,system-ui)}
.ph-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.ph-grid figure{margin:0;min-width:0}
.ph-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--panel-2)}
.ph-grid figcaption{font-size:11.5px;line-height:1.35;margin-top:3px;overflow-wrap:anywhere}
.ph-grid figcaption .y{font-weight:700;font-variant-numeric:tabular-nums}
.ph-grid figure.noimg img{display:none}
/* (2026-09-19) The fill is only ever drawn under the pointer. At 6% each it looked harmless, but footprints
   overlap heavily -- fifty sheets over one county stack to about 95% opaque, and since the panel now turns the
   footprints on by itself the map went solid purple. Outlines say "a map covers this" just as well. */
.l-hist path{fill:#7b1fa2;fill-opacity:0;stroke:#7b1fa2;stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;cursor:pointer}
.l-hist path:hover{fill-opacity:.16;stroke-opacity:1}
.l-hist path.on{fill-opacity:0;stroke-opacity:1;stroke-dasharray:none;stroke-width:1.8}
.l-hist path.na{stroke:#9a9a9a;fill:#9a9a9a;cursor:default}
/* (2026-09-19) Original/Enhanced, the area outline, the area box's suggestions and the timelapse bar */
.hmseg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;vertical-align:middle}
.hmseg button{border:0;background:var(--panel);color:var(--muted);font:inherit;font-size:11px;font-weight:600;padding:2px 9px;cursor:pointer}
.hmseg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.mapwrap.hist-enh .zip{fill-opacity:.1}
.l-hmarea path{fill:none;stroke:#7b1fa2;stroke-width:2.2;vector-effect:non-scaling-stroke;pointer-events:none;stroke-linejoin:round}
.hm-panel .fl.ar{position:relative}
.hm-panel .fl.ar .lb{font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.hm-panel .fl.ar input[type=text]{flex:1;min-width:0;font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.hm-panel .fl.ar .chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid #7b1fa2;color:var(--ink);font-size:12px}
.hm-panel .fl.ar .chip .x{cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.hm-panel .sg{position:absolute;left:10px;right:10px;top:100%;z-index:3;max-height:240px;overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow)}
.hm-panel .sg button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;padding:5px 9px;cursor:pointer}
.hm-panel .sg button:hover,.hm-panel .sg button:focus{background:var(--panel-2)}
.hm-panel .sg .o{font-weight:600}
/* (2026-09-22) The old-maps dock: one card at the map's top left, where the timelapse bar used to be. It sits outside .layerstack
   and above it, so no width folds it away; open means old maps are drawn, and its x is the one clear. */
.hm-dock{position:absolute;left:14px;top:14px;z-index:17;width:380px;max-width:calc(100% - 28px);display:flex;flex-direction:column;gap:7px;padding:8px 11px 9px;border-radius:12px;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:12px}
.hm-dock [hidden]{display:none!important}
/* .hmseg and the look labels carry their own display, which would beat the UA rule for [hidden] */
.hm-dock .hd{display:flex;align-items:center;gap:7px}
.hm-dock .hd>b{white-space:nowrap}
.hm-dock .hd .st{flex:1;min-width:0;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-dock .tb{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;font:inherit;font-size:11px;padding:2px 7px;cursor:pointer}
.hm-dock .tb:hover{background:var(--panel-2)}
.hm-dock .tb[aria-expanded="true"]:not(.fold){background:var(--ink);color:var(--panel);border-color:var(--ink)}
.hm-dock .tb.fold{padding:2px 6px;line-height:1}
.hm-dock .x{flex:none;border:0;background:none;color:var(--muted);font:inherit;font-size:17px;line-height:1;padding:0 1px;cursor:pointer}
.hm-dock .x:hover{color:var(--ink)}
.hm-dock .yr{display:flex;align-items:center;gap:5px}
.hm-dock .yr button{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;font:inherit;font-size:13px;min-width:27px;padding:2px 5px;cursor:pointer}
.hm-dock .yr button:hover{background:var(--panel-2)}
.hm-dock .yr select{flex:none;font:inherit;font-size:11px;padding:2px 3px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
.hm-dock .yr #hmYear{flex:1 1 auto;min-width:0;max-width:170px;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;padding:1px 6px;border-color:#7b1fa2;cursor:pointer}
/* (2026-09-25) the year itself is the control: a list, not a slider */
@media (pointer:coarse),(any-pointer:coarse){.hm-dock .yr button{min-width:36px;min-height:32px;font-size:15px} .hm-dock .yr #hmYear{min-height:32px}}
/* a finger needs a bigger target than a cursor */
.hm-dock .yr.off{opacity:.45}
.hm-dock .kd{display:flex;flex-wrap:wrap;gap:4px}
.hm-dock .kd:empty{display:none}
.hm-dock .kd button{border:1px solid var(--line-strong);background:var(--panel);color:var(--muted);border-radius:999px;font:inherit;font-size:11px;font-weight:600;padding:2px 9px;cursor:pointer;white-space:nowrap}
.hm-dock .kd button:hover{background:var(--panel-2);color:var(--ink)}
.hm-dock .kd button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.hm-dock .kd .n{font-weight:400;opacity:.75}
.hm-dock .lk{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.hm-dock .lk label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.hm-dock .lk input[type=range]{width:82px;accent-color:var(--c-erie);margin:0}
.hm-dock .lk input[type=checkbox]{margin:0;accent-color:var(--c-erie)}
.hm-dock .lk .m,.hm-dock .lyhint{color:var(--muted);font-size:11.5px}
.hm-dock .lyhint{line-height:15px}
/* a row of the dock's own column now, so no flex-basis: in a column that would be a height */
.hm-dock .chip{display:inline-flex;align-items:center;gap:4px;padding:1px 3px 1px 8px;border-radius:999px;border:1px solid #7b1fa2;max-width:100%}
.hm-dock .chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-dock .chip .x{font-size:15px}
.hm-dock .lnk{border:0;background:none;padding:0;color:var(--ink);font:inherit;text-decoration:underline;cursor:pointer}
.hm-dock .cr{color:var(--muted);font-size:11px;line-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-dock.fold .yr,.hm-dock.fold .kd,.hm-dock.fold .lk{display:none}
/* (2026-09-22) the list panel's width lives here, ahead of the tablet blocks, so those can size it (a width set
   after them would win). min(400px, ...) keeps a panel off the dock once both stop 58px short of the right edge (the rule at
   min-width:641px below): 460 is the dock's 14px margin, its 380px, an 8px gap and that 58px. Above 1180px the map is at least
   809px wide, so this only ever trims the band 1181-1231 where a 400px panel would otherwise sit on the dock's right edge. */
.hm-panel{width:min(400px,calc(100% - 460px))}
.hm-panel .fl{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center}
.hm-panel .fl select{font:inherit;font-size:12px;padding:3px 4px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);max-width:170px}
.hm-panel .fl label.iv{display:flex;align-items:center;gap:4px;font-size:12px;cursor:pointer}
.hm-panel .fl label.iv input{margin:0;accent-color:var(--c-erie)}
.hm-panel .grp{padding:6px 10px 2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--panel-2)}
.hm-panel .grp.fold{padding:9px 10px;cursor:pointer;border-top:1px solid var(--line)}
.hm-panel .grp.fold:hover,.hm-panel .grp.fold.open{color:var(--ink)}
.hm-panel .rw{display:flex;align-items:center;gap:8px}
.hm-panel .rw input{margin:0;accent-color:var(--c-erie);flex:none}
.hm-panel .rw .yr{font-weight:600;width:34px;flex:none;color:var(--muted)}
.hm-panel .rw.on .yr{color:var(--ink)}
.hm-panel .rw .tx{flex:1;min-width:0}
.hm-panel .rw.na{opacity:.55}
.hm-panel .rw .go{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;font:inherit;font-size:12px;padding:2px 7px;cursor:pointer}
.hm-panel .rw .go:hover{background:var(--panel-2)}
.hm-panel .ft{padding:6px 10px;border-top:1px solid var(--line)}
.ow-card{width:min(400px,calc(100% - 460px));max-height:70%}
/* (2026-09-25) one landowner's card, opened from a name on a landowner sheet; self-contained here, since the plat-owner reader's .po-panel rules are not on this branch */
.ow-card .bd{flex:1 1 auto;padding:0 14px 14px;line-height:1.5;overflow:auto}
.ow-card h4{margin:14px 0 4px;font-size:13px}
.ow-card p{margin:6px 0}
.ow-card table{border-collapse:collapse;width:100%;font-size:11.5px;margin:8px 0;display:block;overflow-x:auto}
.ow-card th,.ow-card td{border:1px solid var(--line);padding:3px 6px;text-align:left;vertical-align:top}
.ow-card th{background:var(--panel-2);white-space:nowrap}
.ow-card tr.cur td{font-weight:600;background:var(--panel-2)}
.ow-card .cite{margin-top:14px;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
/* (2026-09-22) phones and tablets: the dock lives outside .layerstack and outranks it (17 beats .layerstack's default 0) at every width, so it
   never folds away. Under 641px the dock spans the top and the list sits at the bottom, and both stop 58px short of the right edge -- the zoom
   column is 36px wide with a 14px margin, and on a map barely 440px tall its buttons reach up into the dock's lower rows and down over the list's
   x. (R, 2026-09-22: B gave the column z-index 18 so it stayed the hit target, but that left the dock's look row drawn under it and the list's own
   x unclickable at 375x812. Nothing reaches under the column now; the z-index stays as the belt to that braces.) The dock opens unfolded at every
   width, so a first visit sees the dial: its chips scroll on one line instead of wrapping over the dial, its look row wraps, and the whole card
   stands about 150px tall at 375. Between 641 and 1180px the dock narrows so it and the list both fit and read at once. */
@media (max-width:640px){
.hm-dock{left:8px;right:58px;top:8px;width:auto;gap:4px;padding:7px 9px 8px}
.hm-dock .kd{flex-wrap:nowrap;overflow-x:auto}
.hm-dock .lk{gap:3px 8px}
.hm-dock .lk input[type=range]{width:64px}
.hm-dock .yr #hmYear{font-size:16px}
.hm-panel{left:8px;right:58px;top:auto;bottom:14px;width:auto;max-width:none;max-height:52%}
.ow-card{left:8px;right:58px;top:auto;bottom:14px;width:auto;max-width:none;max-height:52%}
/* (2026-09-25) the landowner card takes the list's place on a phone */
.zoomctl{z-index:18}
}
@media (min-width:641px) and (max-width:1180px){
.hm-dock{width:min(380px,46vw)}
/* (R, 2026-09-22) the list is sized in vw here too. The rule below at 841px did that for an iPad in landscape;
     between 641 and 840 it kept its 400px and the dock's 46vw ran into it -- at 768 (the same iPad in portrait)
     the dock covered the list's left 13px. The planner joins it (2026-09-22): now that a panel stops 58px short
     of the right edge, a 400px planner at 768 would have run 57px under the dock. At 40vw both clear the
     dock's 46vw at every width above 572px. */
.hm-panel{width:min(360px,40vw)}
}
.tip{position:absolute;pointer-events:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;box-shadow:var(--shadow);font-size:12.5px;max-width:260px;z-index:20;line-height:1.35}
.tip .z{font-family:var(--font-mono);font-weight:500}
.tip .s{font-weight:600;margin-top:2px}
.tip .m{color:var(--muted);font-size:11.5px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.zoomctl button:focus-visible{outline-offset:0}
@media (max-width:840px){
/* (2026-09-18) minmax(0,1fr), not 1fr: a bare 1fr floors at the column's min-content width, and the map
     svg's viewBox gives it an intrinsic width of its last desktop size. On a phone that pinned the column
     at ~727px inside a 375px body, so the rail was clipped and the zoom, Layers and pin buttons sat off
     screen entirely, unreachable. minmax(0,...) lets the column shrink to the viewport. */
.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
.app.rail-off{grid-template-columns:minmax(0,1fr);grid-template-rows:0 1fr}
/* the rail is the top ROW here, not a column */
.rail{border-right:0;border-bottom:1px solid var(--line);max-height:46vh}
.rail-scroll{padding:16px 16px 12px;gap:14px}
.brand h1{font-size:24px}
.brand p{display:none}
.zipline .zip{font-size:28px}
/* (2026-09-16) on a phone the pill rows are taller than the map and spilled up over the rail, so they fold behind one Layers button in the zoom column */
.layerstack{display:none;pointer-events:auto;max-height:calc(100% - 28px);overflow:auto;padding:6px;border-radius:10px;background:rgba(255,255,255,.85);box-shadow:var(--shadow)}
.layerstack.open{display:flex}
.zoomctl .lybtn{display:inline-block}
}
/* (2026-09-19) An iPad in landscape is 1024px, which is ABOVE the 840px fold, so it was handed the full desktop
   furniture: a fixed 372px rail, the layer pills floating over the map, and 400px panels -- on a 1024px screen that
   left the map itself a sliver. Between 841 and 1180 the rail narrows to the viewport, the pills fold behind the
   Layers button exactly as they do on a phone, and the panels are sized in vw rather than fixed pixels. */
@media (min-width:841px) and (max-width:1180px){
.app{grid-template-columns:clamp(232px,25vw,372px) 1fr}
.rail-scroll{padding:16px 16px 14px;gap:14px}
.brand h1{font-size:25px}
.brand p{max-width:none}
.layerstack{display:none;pointer-events:auto;max-height:calc(100% - 28px);overflow:auto;padding:6px;border-radius:10px;background:rgba(255,255,255,.85);box-shadow:var(--shadow)}
.layerstack.open{display:flex}
.zoomctl .lybtn{display:inline-block}
/* (2026-09-22) by the map's width, not the viewport's: the rail takes 232-372px here. 460 is the dock and the
     margins around it (see .hm-panel above). At 1024x768 that is 308px, and the dock and the list sit side by
     side with the panel 58px off the right edge; below about 990px they cannot both fit, so the floor keeps the
     list readable and the dock (z-index 17) covers its left edge exactly as it did before. */
.hm-panel{width:clamp(300px,calc(100% - 460px),360px)}
}
/* Two panels open at once landed on the identical corner, so the newer one simply covered the older: the trip
   planner and the historical-map list could never be read at the same time -- which is precisely what laying the
   old maps under a route asks you to do. The second panel stacks under the first instead, each taking half the
   height. :has() is how the FIRST panel learns it has company; iPadOS 15.4 and up support it. */
@media (min-width:641px){
/* (2026-09-22) Every panel stops 58px short of the right edge, as the dock and the list already did under 641px: the zoom column
     is 36px wide with a 14px margin and, with all eight of its buttons showing (hide the panel, Layers, +, -, OH, start over,
     the old maps and the pin), about 345px tall from the bottom. On a short map a 72% panel reached down over it --
     an iPad in portrait gives the engine a 553px map under its rail, where the column's top sits 155px below the map's top edge,
     and the old-maps review measured the list covering Layers, +, - and OH there -- and a second, stacked panel at bottom:14px
     covered the whole column at any width. Sizing the panels' height to the column instead would have left the list about 130px
     tall on that iPad, and raising the column's z-index would have drawn its buttons over the rows. Nothing reaches under the
     column now, so its buttons and each panel's own x stay hit targets; the website lifts the column above its bottom sheet
     (.map-page .zoomctl) and the rule holds there unchanged, because it never depends on the column's height. */
.fm-asm{right:58px;max-width:calc(100% - 72px)}
.mapwrap:has(.fm-asm ~ .fm-asm) .fm-asm{max-height:calc(50% - 21px)}
.fm-asm ~ .fm-asm{top:auto;bottom:14px}
}
@media (prefers-reduced-motion: reduce){
.zip{transition:none}
}
.l-infra-lines path,.l-infra-hi path,.ipanel .isw path,.ipanel .ikinds svg path,.iswatch svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.l-infra-lines .gated,.l-infra-pts .gated{display:none}
.l-infra-pts path{stroke:var(--in-halo);stroke-width:.9;vector-effect:non-scaling-stroke;cursor:pointer;paint-order:stroke}
/* energy */
.il-pipelines_gas .s-interstate{stroke:var(--in-gas);stroke-width:1.7}
.il-pipelines_gas .s-intrastate{stroke:var(--in-gas);stroke-width:1.1;stroke-dasharray:5 3}
.il-pipelines_liquids .s-crude{stroke:var(--in-crude);stroke-width:1.8}
.il-pipelines_liquids .s-product{stroke:var(--in-prod);stroke-width:1.4}
.il-pipelines_liquids .s-hgl{stroke:var(--in-hgl);stroke-width:1.3;stroke-dasharray:6 3}
.il-gas_facilities path{fill:var(--in-gas)}
.il-petro_facilities path{fill:var(--in-crude)}
.il-petro_facilities .s-ethanol,.il-petro_facilities .s-biodiesel{fill:#6b8e23}
.il-power_lines .s-kv765{stroke:var(--in-elec);stroke-width:2.6}
.il-power_lines .s-kv345{stroke:var(--in-elec);stroke-width:1.9}
.il-power_lines .s-kv138{stroke:var(--in-elec);stroke-width:1.2}
.il-power_lines .s-kv69{stroke:var(--in-elec);stroke-width:.8;opacity:.85}
.il-power_lines .s-kvlo{stroke:var(--in-elec);stroke-width:.6;opacity:.7}
.il-power_lines .s-kvun{stroke:var(--in-elec);stroke-width:.9;stroke-dasharray:3 3;opacity:.8}
.il-substations path{fill:var(--in-elec)}
.il-substations .s-lv{opacity:.75}
.il-substations .s-un{fill:none;stroke:var(--in-elec);stroke-width:1;opacity:.8}
.il-power_plants path{fill:var(--in-plant);opacity:.92}
.il-power_plants .s-coal{fill:#3b3b3b}
.il-power_plants .s-gas{fill:#e0a020}
.il-power_plants .s-nuclear{fill:#8a2be2}
.il-power_plants .s-hydro{fill:#2a78d6}
.il-power_plants .s-wind{fill:#1a9e6a}
.il-power_plants .s-solar{fill:#f2c500}
.il-power_plants .s-oil{fill:#7a4a2a}
.il-power_plants .s-biomass{fill:#6b8e23}
.il-power_plants .s-battery{fill:#00a3a3}
.il-power_plants .s-landfill{fill:#8c6a3c}
.il-power_plants .s-other{fill:#888}
.il-wind_turbines path{fill:#1a9e6a;stroke-width:.5}
.il-solar_farms path{fill:#e6b800}
/* water and sewer */
.il-water_mains .s-d48{stroke:var(--in-wm);stroke-width:2.8}
.il-water_mains .s-d30{stroke:var(--in-wm);stroke-width:2.1}
.il-water_mains .s-d16{stroke:var(--in-wm);stroke-width:1.5}
.il-water_mains .s-d12{stroke:var(--in-wm);stroke-width:1.05}
.il-water_mains .s-dsm{stroke:var(--in-wm);stroke-width:.7;opacity:.8}
.il-sewers .s-tunnel{stroke:var(--in-tun);stroke-width:3;stroke-dasharray:7 3}
.il-sewers .s-comb{stroke:var(--in-sw);stroke-width:1.8}
.il-sewers .s-san{stroke:var(--in-sw);stroke-width:1.4}
.il-sewers .s-force{stroke:var(--in-sw);stroke-width:1.2;stroke-dasharray:3 2}
.il-sewers .s-storm{stroke:#5a8fa8;stroke-width:1.2}
.il-wwtp path{fill:var(--in-wwtp)}
.il-wwtp .s-minor{opacity:.8}
.il-cso_outfalls path{fill:none;stroke:var(--in-cso);stroke-width:1.4}
.il-dams path{fill:var(--in-dam)}
.il-dams .s-high{fill:#b8321f}
.il-dams .s-significant{fill:#e08a3c}
.il-dams .s-low{fill:#8fa6b8}
.il-dams .s-undetermined{fill:#aab3bd}
.il-levees .s-levee{stroke:var(--in-lev);stroke-width:2.4;stroke-dasharray:9 2}
.il-locks path{fill:var(--in-lock)}
.il-waterways path{stroke:var(--in-ww);stroke-width:2;stroke-dasharray:10 5;opacity:.85}
.il-ports path{fill:var(--in-lock)}
.il-ports .s-dock{opacity:.75}
/* transport */
.il-roads .s-ir{stroke:var(--in-ir);stroke-width:2.4}
.il-roads .s-toll{stroke:var(--in-ir);stroke-width:2.4;stroke-dasharray:9 3}
.il-roads .s-us{stroke:var(--in-us);stroke-width:1.6}
.il-roads .s-sr{stroke:var(--in-sr);stroke-width:1;opacity:.9}
.il-bridges_major path{fill:#5a6570}
.il-bridges_major .s-poor{fill:#b8321f}
.il-bridges_major .s-fair{fill:#d9822b}
.il-bridges_major .s-good{fill:#3f8f4e}
.il-rail_lines .s-main{stroke:var(--in-rail);stroke-width:1.8}
.il-rail_lines .s-pass{stroke:var(--in-rail);stroke-width:1.6}
.il-rail_lines .s-branch{stroke:var(--in-rail);stroke-width:1.2;opacity:.9}
.il-rail_lines .s-yard{stroke:var(--in-rail);stroke-width:.8;opacity:.7}
.il-rail_lines .s-ind{stroke:var(--in-rail);stroke-width:.8;opacity:.7}
.il-rail_lines .s-oos{stroke:var(--in-rail);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.il-amtrak_routes path{stroke:var(--in-amtrak);stroke-width:2.2;stroke-dasharray:7 4}
.il-rail_facilities path{fill:var(--in-rail)}
.il-rail_facilities .s-amtrak{fill:var(--in-amtrak)}
.il-rail_crossings path{fill:none;stroke:var(--in-rail);stroke-width:1.3}
.il-rail_crossings .s-private{opacity:.6}
.il-airports path{fill:var(--in-air)}
.il-airports .s-airline,.il-airports .s-airline_out{fill:#1f3f8a}
.il-airports .s-military{fill:#4f6b2f}
.il-airports .s-reliever{fill:#2a5db0}
.il-airports .s-ga_priv,.il-airports .s-ultralight,.il-airports .s-balloon,.il-airports .s-glider{fill:#7f9ccf}
.il-airports .s-heliport{fill:#c9532a}
.il-airports .s-seaplane{fill:#2a78d6}
.il-runways path{stroke:var(--in-rw);stroke-width:2.4}
.il-transit_routes .s-bus{stroke:var(--in-bus);stroke-width:1.1;opacity:.8}
.il-transit_routes .s-brt{stroke:var(--in-bus);stroke-width:2}
.il-transit_routes .s-rail{stroke:var(--in-rt);stroke-width:2.6}
.il-transit_routes .s-ferry{stroke:var(--in-ferry);stroke-width:1.6;stroke-dasharray:4 3}
.il-transit_terminals path{fill:var(--in-bus)}
.il-transit_terminals .s-rail{fill:var(--in-rt)}
.il-transit_terminals .s-multi{fill:#0b5fa5}
.il-transit_terminals .s-air{fill:var(--in-air)}
.il-transit_terminals .s-ferry{fill:var(--in-ferry)}
.il-ferry_routes path{stroke:var(--in-ferry);stroke-width:1.8;stroke-dasharray:5 4}
/* utilities and sites */
.il-towers path{fill:var(--in-tower)}
.il-ev_chargers path{fill:var(--in-ev)}
.il-ev_chargers .s-l2{opacity:.7}
.il-landfills path{fill:var(--in-lf)}
.il-landfills .s-hazardous{fill:#8a1c1c}
.il-landfills .s-transfer,.il-landfills .s-compost,.il-landfills .s-other{opacity:.75}
.il-injection_wells path{fill:none;stroke:var(--in-inj);stroke-width:1.6}
.il-injection_wells .s-storage{stroke:var(--in-gas);stroke-width:1.1}
.il-superfund path{fill:var(--in-sf)}
.il-superfund .s-deleted{opacity:.6}
.il-phmsa_incidents path{fill:none;stroke:var(--in-inc);stroke-width:1.6}
.il-hospitals path{fill:var(--in-hosp)}
.il-fire_stations path{fill:var(--in-fire)}
.il-police path{fill:var(--in-pol)}
/* hover and selection */
.l-infra-hi{pointer-events:none}
.l-infra-hi .ihov path{stroke-width:5;stroke-opacity:.45;fill-opacity:.5}
.l-infra-hi .isel path{stroke-width:6;stroke-opacity:.35;fill-opacity:.35}
.l-infra-hi .isel path{filter:drop-shadow(0 0 2px var(--in-halo))}
/* panel */
.layers .ly-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;cursor:pointer;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow);font-weight:500}
.layers .ly-btn.on{border-color:var(--ink)}
.layers .ly-btn:hover{background:var(--panel-2)}
.ipanel{position:absolute;left:14px;bottom:56px;width:330px;max-width:calc(100% - 28px);max-height:min(72%,640px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);z-index:15;font-size:12.5px}
.ipanel .ihead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.ipanel .ihead b{font-family:var(--font-display);font-size:15px;font-weight:700}
.ipanel .ihead .m{color:var(--muted);font-size:11.5px;flex:1}
.ipanel .ihead .iclear{border:1px solid var(--line);background:var(--panel-2);border-radius:999px;padding:2px 9px;font-size:11px;cursor:pointer;color:var(--muted)}
.ipanel .ihead .close{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--panel);cursor:pointer;line-height:1;color:var(--muted)}
.ipanel .ibody{overflow-y:auto;padding:8px 12px 12px;min-height:0}
.ipanel .igroup{margin-top:6px}
.ipanel .igroup .seg-label{display:flex;align-items:center;justify-content:space-between;margin:8px 0 2px}
.ipanel .iall button{border:0;background:none;color:var(--faint);font-size:10.5px;text-transform:none;letter-spacing:0;cursor:pointer;padding:0 4px;text-decoration:underline;text-underline-offset:2px}
.ipanel .iall button:hover{color:var(--ink)}
.ipanel .irow{border-radius:8px;padding:3px 4px}
.ipanel .irow.on{background:var(--panel-2)}
.ipanel .irow label{display:grid;grid-template-columns:auto 26px 1fr;gap:8px;align-items:center;cursor:pointer;padding:3px 2px}
.ipanel .irow input{margin:0;accent-color:var(--c-erie)}
.ipanel .isw svg,.ipanel .ikinds svg,.iswatch svg{display:block;width:24px;height:16px;overflow:visible}
.ipanel .inm{font-weight:500;line-height:1.25}
.ipanel .inm small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.ipanel .ikinds{list-style:none;margin:2px 0 4px 38px;padding:0;display:flex;flex-direction:column;gap:2px}
.ipanel .ikinds li{display:grid;grid-template-columns:26px 1fr auto auto;gap:8px;align-items:center;font-size:11.5px;color:var(--muted)}
.ipanel .ikinds .n{font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums}
.ipanel .igate{color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:0 6px;font-size:10px}
.ipanel .igate.open{color:var(--ink);border-color:var(--line-strong)}
@media (max-width:840px){.ipanel{max-height:60%}}
.il-post_offices path{fill:#3b6ea8}
.il-gauges path{fill:#1f7a8c}
.il-gauges .s-lake{fill:#2a78d6}
.il-gauges .s-spring{fill:#1a9e6a}
.il-water_facilities path{fill:var(--in-wm)}
.il-water_facilities .s-plant{fill:#0b5fa5}
.il-water_facilities .s-booster,.il-water_facilities .s-prv{fill:#4f8fc9}
.il-water_facilities .s-well{fill:#2a78d6;opacity:.8}
.il-water_facilities .s-other{fill:#7f9ccf}
.il-water_towers path{fill:#1d63c9}
.il-water_towers .s-tank,.il-water_towers .s-covered{fill:#4f8fc9}
.il-water_towers .s-well{fill:#2a78d6;opacity:.8}
.il-water_works path{fill:#0b5fa5}
.il-water_works .s-wwtp{fill:var(--in-wwtp)}
.il-water_works .s-sewage_pump{fill:var(--in-sw)}
.il-water_works .s-pump{fill:#4f8fc9}
.il-sewer_facilities path{fill:var(--in-sw)}
.il-sewer_facilities .s-plant{fill:var(--in-wwtp)}
.il-sewer_facilities .s-cso{fill:var(--in-cso)}
.il-sewer_facilities .s-basin{fill:var(--in-tun)}
.il-osm_pipelines .s-water{stroke:var(--in-wm);stroke-width:1.2;stroke-dasharray:4 2}
.il-osm_pipelines .s-sewage{stroke:var(--in-sw);stroke-width:1.2;stroke-dasharray:4 2}
.il-osm_pipelines .s-gas{stroke:var(--in-gas);stroke-width:1.2;stroke-dasharray:4 2}
.il-osm_pipelines .s-oil{stroke:var(--in-crude);stroke-width:1.2;stroke-dasharray:4 2}
.il-osm_pipelines .s-other{stroke:var(--in-tower);stroke-width:1;stroke-dasharray:4 2}
.il-data_centers path{fill:#5a2ca0}
.il-shale_wells path{fill:#8c4a1e}
.il-shale_wells .s-marcellus{fill:#c9532a}
.il-shale_wells .s-horizontal{fill:#a88a4a}
.il-mines_ug path{fill:#6b4a2a;fill-opacity:.28;stroke:#6b4a2a;stroke-width:.6;stroke-opacity:.6}
.il-mines_ug .s-coal_partial{fill-opacity:.16;stroke-dasharray:3 2}
.il-mines_ug .s-minerals{fill:#4f6b8f;stroke:#4f6b8f}
.l-infra-hi .il-mines_ug path{fill-opacity:.35}
.il-trails .s-national{stroke:#2f7a3a;stroke-width:2.2}
.il-trails .s-statewide{stroke:#2f7a3a;stroke-width:1.6}
.il-trails .s-regional{stroke:#4f9a52;stroke-width:1.2}
.il-trails .s-local{stroke:#4f9a52;stroke-width:1;opacity:.85}
.il-trails .s-planned{stroke:#4f9a52;stroke-width:1;stroke-dasharray:3 3;opacity:.8}
.il-trails .s-bike{stroke:#1a9e6a;stroke-width:1.3;stroke-dasharray:6 3}
.il-transit_stops path{fill:var(--in-bus);stroke-width:.5}
.il-transit_stops .s-rail{fill:var(--in-rt)}
.ipanel .iload{margin:6px 12px 0;color:var(--muted)}
.il-bridges_all path{fill:#5a6570}
.il-bridges_all .s-poor,.il-bridges_all .s-culvert_poor{fill:#b8321f}
.il-bridges_all .s-fair,.il-bridges_all .s-culvert_fair{fill:#d9822b}
.il-bridges_all .s-good,.il-bridges_all .s-culvert_good{fill:#3f8f4e}
.il-bridges_all .s-culvert_good,.il-bridges_all .s-culvert_fair,.il-bridges_all .s-culvert_poor{opacity:.7}
.il-ust_sites path{fill:#8a6a3c}
.il-ust_sites .s-spa{fill:#c9532a}
.il-ust_releases path{fill:none;stroke:#c9532a;stroke-width:1.5}
.il-ust_releases .s-spa{stroke:#8a1c1c;stroke-width:2}
.il-dischargers path{fill:#4f6b8f}
.il-dischargers .s-major_v,.il-dischargers .s-minor_v{fill:#b8321f}
.il-quarries path{fill:#8c6a3c}
.il-quarries .s-salt{fill:#7d55c7}
.il-quarries .s-sand{fill:#c9a15a}
.il-quarries .s-clay,.il-quarries .s-shale{fill:#a3632c}
.il-boat_ramps path{fill:#2a78d6}
.il-boat_ramps .s-fishing{fill:#1a9e6a}
.il-boat_ramps .s-beach{fill:#e0a020}
.il-hazwaste path{fill:#8a1c1c}
.il-hazwaste .s-tsdf_v{fill:#c9532a}
.il-park_ride path{fill:#2a5db0}
.il-park_ride .s-rest{fill:#1a9e6a}
.il-park_ride .s-weigh{fill:#7f8a94}
.il-military path{fill:#4f6b2f}
.il-prisons path{fill:#5a3a6b}
.il-prisons .s-county,.il-prisons .s-juvenile{opacity:.75}
.il-ccr_sites path{fill:#3b3b3b}
.il-weather_stations path{fill:#3a8d94}
.il-weather_stations .s-radar{fill:#0b5fa5}
/* round four (2026-09-15): water protection and site layers */
.il-swap_areas path{fill:#2a78d6;fill-opacity:.12;stroke:#2a78d6;stroke-width:.7;stroke-opacity:.7}
.il-swap_areas .s-imz{fill:#1d63c9;fill-opacity:.3;stroke-width:.5}
.il-swap_areas .s-sw_emz{fill:#1a9e6a;fill-opacity:.22;stroke:#1a9e6a}
.il-swap_areas .s-sw_cmz{fill:#1a9e6a;fill-opacity:.12;stroke:#1a9e6a}
.il-swap_areas .s-sw_pa{fill:#1a9e6a;fill-opacity:.06;stroke:#1a9e6a;stroke-dasharray:4 3}
.il-swap_areas .s-erie_caz{fill:#2a78d6;fill-opacity:.18;stroke-dasharray:5 3}
.il-swap_areas .s-erie_piz{fill:#2a78d6;fill-opacity:.08;stroke-dasharray:2 3}
.il-swap_areas .s-ohio_zcc{fill:#6f3fb0;fill-opacity:.2;stroke:#6f3fb0}
.il-swap_areas .s-ohio_zhc{fill:#6f3fb0;fill-opacity:.08;stroke:#6f3fb0;stroke-dasharray:4 3}
.l-infra-hi .il-swap_areas path{fill-opacity:.35}
.il-ms4_areas path{fill:#5a8fa8;fill-opacity:.1;stroke:#5a8fa8;stroke-width:.8;stroke-dasharray:6 3}
.il-ms4_areas .s-waivered{fill-opacity:.05;stroke-dasharray:2 3}
.il-ms4_areas .s-other{fill-opacity:.03;stroke-opacity:.5}
.l-infra-hi .il-ms4_areas path{fill-opacity:.3}
.il-biosolids_fields path{fill:#8a6d2b;opacity:.85}
.il-biosolids_fields .s-cplr{fill:#b8321f}
.il-biosolids_fields .s-retired{fill:#aab3bd;opacity:.7}
.il-cafos path{fill:#8c6a3c}
.il-cafos .s-dairy{fill:#3f8f4e}
.il-cafos .s-swine{fill:#c9532a}
.il-cafos .s-poultry{fill:#e0a020}
.il-cafos .s-beef{fill:#7a4a2a}
.il-brownfields path{fill:#7a5a1e}
.il-brownfields .s-post_closure{fill:#8a1c1c}
.il-brownfields .s-remedial{fill:#c9532a}
.il-brownfields .s-corrective{fill:#b8321f}
.il-brownfields .s-tba{fill:#d9822b}
.il-brownfields .s-vap{fill:#7f8a94}
.il-brownfields .s-assessment{fill:#a88a4a;opacity:.8}
.il-brownfields .s-other{opacity:.6}
.il-broadcast path{fill:#7d55c7}
.il-broadcast .s-tv{fill:#4d2a7a}
.il-broadcast .s-lpfm,.il-broadcast .s-translator,.il-broadcast .s-lptv{opacity:.7}
.il-psaps path{fill:#c8342a}
.il-psaps .s-secondary{opacity:.75}
/* round five (2026-09-16) */
.il-cso_outfalls .s-gone{stroke:#aab3bd;stroke-dasharray:2 1.5}
.il-gw_monitoring path{fill:none;stroke:#1f4f80;stroke-width:1.5}
.il-gw_monitoring .s-standby{stroke:#4d84b4;stroke-dasharray:2 1.5}
.il-gw_monitoring .s-inactive{stroke:#aab3bd}
.il-recycling_sites path{fill:#3f8f4e}
.il-recycling_sites .s-battery{fill:#7d55c7}
.il-recycling_sites .s-both{fill:#1a9e6a}
.il-mine_permits path{fill:#8c6a3c;fill-opacity:.3;stroke:#6b4a2a;stroke-width:.8}
.il-mine_permits .s-coal_surface,.il-mine_permits .s-coal_surface_prop,.il-mine_permits .s-coal_surface_past{fill:#3b3b3b;stroke:#3b3b3b}
.il-mine_permits .s-coal_underground,.il-mine_permits .s-coal_underground_prop,.il-mine_permits .s-coal_underground_past{fill:#3b3b3b;stroke:#3b3b3b;fill-opacity:.18;stroke-dasharray:4 2}
.il-mine_permits .s-minerals_underground,.il-mine_permits .s-minerals_underground_prop,.il-mine_permits .s-minerals_underground_past{fill:#4f6b8f;stroke:#4f6b8f;fill-opacity:.18;stroke-dasharray:4 2}
.il-mine_permits .s-coal_surface_prop,.il-mine_permits .s-coal_underground_prop,.il-mine_permits .s-minerals_surface_prop,.il-mine_permits .s-minerals_underground_prop{fill-opacity:.08;stroke-dasharray:2 2}
.il-mine_permits .s-coal_surface_past,.il-mine_permits .s-coal_underground_past,.il-mine_permits .s-minerals_surface_past,.il-mine_permits .s-minerals_underground_past{fill-opacity:.06;stroke-opacity:.5}
.l-infra-hi .il-mine_permits path{fill-opacity:.4}
.il-odot_facilities path{fill:#7f8a94}
.il-odot_facilities .s-district{fill:#b8321f}
.il-odot_facilities .s-garage{fill:#d9822b}
.il-odot_facilities .s-storage{fill:#4f8fc9}
.il-traffic_signals path{fill:#e0a020;stroke-width:.6}
.il-traffic_signals .s-flasher{fill:#f2c500;opacity:.7}
/* (2026-09-28) Map tips: a short tour on the first visit (switching the base map, laying old maps over today's, the
   old-maps card, a ZIP's card, pins), replayed from the ? button in the zoom column, plus one-time tips the first time
   a reader turns on Satellite or Streets or opens the old maps. The card points at a control by pulsing a ring around
   it; it never blocks the map, and what has been seen lives in localStorage as atlas.tips. */
.mtip{position:absolute;right:64px;top:14px;z-index:20;width:320px;max-width:calc(100% - 78px);padding:10px 12px 10px;border-radius:12px;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:13px;line-height:1.45}
.mtip .hd{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.mtip .n{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mtip .x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.mtip .x:hover{color:var(--ink)}
.mtip h3{margin:0 0 4px;font-size:14.5px;font-weight:700}
.mtip p{margin:0;color:var(--ink)}
.mtip p .k{display:inline-block;padding:0 5px;border:1px solid var(--line-strong);border-radius:5px;background:var(--panel-2);font-size:12px;font-weight:600;white-space:nowrap}
.mtip .ft{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.mtip .ft button{font:inherit;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer}
.mtip .ft button:hover{background:var(--panel-2)}
.mtip .ft .go{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.mtip .ft .go:hover{background:var(--ink);opacity:.88}
.mtip .ft .sp{flex:1}
.mtip .ft [hidden]{display:none}
.mtip-glow{animation:mtipGlow 1.4s ease-in-out infinite}
@keyframes mtipGlow{0%,100%{box-shadow:0 0 0 2px #f0842c,0 0 0 6px rgba(240,132,44,.35)}50%{box-shadow:0 0 0 3px #f0842c,0 0 0 11px rgba(240,132,44,0)}}
@media (prefers-reduced-motion: reduce){.mtip-glow{animation:none;box-shadow:0 0 0 3px #f0842c}}
.zoomctl .tipbtn{font-size:16px;font-weight:700}
.mapwrap.raster .mtip{top:44px}
/* clear of the credit strip a street or satellite base puts across the top right */
@media (max-width:640px){
.mtip{left:10px;right:58px;top:10px;width:auto;max-width:none;font-size:12.5px;padding:9px 10px}
.mtip.low{top:auto;bottom:10px}
/* the old-maps card holds the top of a phone's map, so the tip drops to the bottom while it is open */
}
/* Cracked Buckeye: the map page's UI layer (W2-01). Loads last in map.<hash>.css, after palette.css, cards.css and
   the engine's map.css; site.<hash>.css (tokens, base, components) loads before all of them. The engine's own single-class
   rules (.app .rail .rail-scroll .seg .zoomctl .layers ...) come later in the cascade than components.css, so every
   override here is scoped under .map-page (0-2-0 or more) and wins by specificity, never by editing the shell.
   D-55: one visually hidden h1. D-56: .app{display:contents} hands the shell's aside.rail and main.mapwrap to the
   .map-page grid. The DOM ids inside the rail are the engine's contract; ui.js moves nodes, never renames them. */

/* ---------- the layout fix (D-56) ---------- */
.map-page .app{display:contents}
.map-page{position:relative}
.map-page>h1{margin:0}
.map-page .rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;height:auto;max-height:none}
.map-page .rail-scroll{overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 18px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.map-page .mapwrap{position:relative;min-width:0;min-height:0;background:var(--bg)}

/* ---------- loading hint and the noscript block ---------- */
#loadHint{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:21;max-width:min(92%,42rem);padding:6px 12px;border-radius:var(--r-pill);background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:var(--fs-2);line-height:1.35;text-align:center}
.map-noscript{padding:var(--s-5) var(--gutter);max-width:var(--prose);margin:0 auto;font-size:15px;line-height:1.5}
.map-noscript .lead{font-size:var(--fs-4)}
.map-noscript ul{columns:2;column-gap:var(--s-5)}
@media (max-width:640px){.map-noscript ul{columns:1}}

/* ---------- brand row and search (the rail) ---------- */
.map-page .rail-brand{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.map-page .rail-brand .brand{font-size:var(--fs-4)}
.map-page .rail-brand .brand .long{display:inline}
.map-page .rail-brand .brand .short{display:none}
.map-page .rail-brand .site-nav{gap:var(--s-3)}
.map-page .search{position:relative}
.map-page .search>label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}
.map-page .search input{width:100%;padding:10px 40px 10px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--panel);font-size:var(--fs-4);outline:none;color:var(--ink)}
.map-page .search input::placeholder{color:var(--faint)}
.map-page .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.map-page .search .kbd{right:12px}
.map-page .suggest{z-index:50;max-height:min(60vh,380px);border-radius:var(--r-3)}

/* ---------- the card, its actions row, the overview and the legend ---------- */
.map-page #result.card{padding:14px 14px 16px}
.map-page #result .also{display:grid}          /* the also strip stays on the map (components.css hides it on the pages only) */
/* the orchestrator's finding (FD4-03-adjacent): at 900-1179 px the "Also here" chips' 1fr 1fr tracks hold to the
   engine's cards.css content width and push the grid past the 241 px rail (measured scrollWidth 280). The rail is
   ours to fit; cards.css is the engine's. Letting both tracks shrink below their content size, and truncating a
   long chip label instead of forcing its column wide, keeps the grid inside the rail at every width. */
.map-page #result .also{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}   /* (2026-09-28) one column when the rail is narrow: two 65px columns at a 960px window cut every tile's text off and scrolled the rail sideways */
.map-page #result .also .chip>span{min-width:0;overflow-wrap:anywhere}
.map-page #result .cite a{overflow-wrap:anywhere}   /* (2026-09-28) a long domain in a source line and the contaminant table pushed the narrow rail sideways */
.map-page #result table.facts{display:block;max-width:100%;overflow-x:auto}
.map-page #result .also .chip{min-width:0}
.map-page #result .also .chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-page #result .zipline{padding-right:32px}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.card-actions .status{font-size:var(--fs-1);color:var(--muted);margin-left:auto}

/* the community strip on the rail card (M1): community.css dresses the buttons, only what the rail needs is here,
   so the pages' 9.2 KB community.css budget pays nothing for the map. The strip mounts under the card's header
   block (after .card-actions, else .sub), which on a phone keeps it inside the sheet's 32dvh peek and above the
   topic's own lede; the actions row hands it part of its bottom margin so header, strip and fact read as one group.
   The dialogs need no z-index here: <dialog>.showModal() paints in the top layer, over the sheet and the map. */
.map-page #result>.card-actions{margin-bottom:6px}
.map-page #result>.cb-strip{margin:0 0 12px;gap:4px}
.map-page #result>.cb-strip .cb-notes{margin-left:auto}
/* C-35: the card's own strip wears its words (.cb-hero, community.css); in the rail they are a size down. */
.map-page #result>.cb-hero .cb-b{min-height:28px;padding:0 8px;font-size:var(--fs-1)}
/* C-35: each "What is here" tile is wrapped (.cb-tile keeps the engine's grid cell and its button's onclick) so its
   chip can sit in the tile's corner OUTSIDE the button -- a button inside a button is not a control anyone can
   use. The tile's text keeps clear of the chip; an opened strip floats over its neighbours. */
.map-page .also>.cb-tile{position:relative;display:grid;min-width:0}
.map-page .cb-tile>.chip{padding-right:30px}
.map-page .cb-tile>.cb-atom{position:absolute;top:3px;right:3px;margin:0}
.map-page .cb-tile>.cb-atom.cb-open{z-index:3;padding:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-sm)}
/* On a desktop the phones-only .topbar is hidden, so community.js seats the account mount in the rail's brand
   row; the nav and the mount keep to the right together. */
.map-page .rail-brand .site-nav{margin-left:auto}
.map-page .rail-brand .cb-account{flex:none}
/* C-32 (the site side of D-92): the admin-only exemption box on an open house card, drawn by
   community.admin.js. It must never be mistaken for public content, so it is a dashed box under a warm ADMIN
   eyebrow -- nothing else on the map is dashed and warm at once. The button is the design system's own
   (.btn.btn-sm, which this page already carries in site.css). */
.map-page .cb-adm-mount{margin:12px 0 0}
.map-page .cb-adm{margin:10px 0 0;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-1)}
.map-page .cb-adm-eye{margin:0;font-size:var(--fs-1);font-weight:600;letter-spacing:.08em;color:var(--warm)}
.map-page .cb-adm-h{margin:4px 0 6px;font-size:var(--fs-2)}
.map-page .cb-adm-r{margin:2px 0;font-size:var(--fs-1)}
.map-page .cb-adm-k{color:var(--muted)}
.map-page .cb-adm-foot{margin:8px 0 0;font-size:var(--fs-1);color:var(--muted)}
.map-page .cb-adm-msg{margin-left:8px;font-size:var(--fs-1);color:var(--muted)}

.map-page #overview{padding:2px 0 0}
.map-page #bars{display:none}   /* the key on the map now carries the six band counts (D-130); two copies of six numbers on one screen is not intentional (ruling 2.2) */
.map-page .legend-section{margin:0}
.map-page .legend-section>.eyebrow{margin-top:0}
.map-page .topic-about{margin:8px 0 0}
.map-page section.fine[hidden]{display:none}

/* ---------- before ui.js has restructured the rail (map.js is a separate 700 KB file): no flash of the old rail ---------- */
.map-page:not(.ui-ready) .modes,.map-page:not(.ui-ready) .layerstack .layers:not(#hhRow),.map-page:not(.ui-ready) section.fine{display:none}

/* ---------- topic picker ---------- */
.map-page .topic-now .dot{width:14px;height:14px;border-radius:4px}
.map-page .topic-now>div{min-width:0}
.map-page .topic-now b{display:block;line-height:1.25}
.map-page .topic-now .tn-sub:empty{display:none}
.map-page .tp-group[data-current]>summary{color:var(--ink)}
.map-page .tp-group[data-current]>summary::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:2px;order:2}
.map-page .tp-group[data-current]>summary .n{order:3}
.map-page .tp-group .seg button .lbl{min-width:0}
.map-page .topic-picker .tp-filter-wrap{position:relative}
.map-page .tp-filter{padding-right:34px}
.map-page .tp-filter:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.map-page .tp-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--muted);line-height:1;font-size:16px;cursor:pointer}
.map-page .tp-clear:hover{background:var(--panel-2);color:var(--ink)}
.map-page .tp-none{font-size:var(--fs-2);color:var(--muted);padding:6px 2px;margin:0}
.map-page .modes{display:flex;flex-direction:column;gap:6px}
.map-page .tp-group>summary{min-height:36px}
.map-page .tp-group>summary .n{margin-left:auto}
.map-page .tp-group .seg{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0 6px 6px;border:0;background:transparent;border-radius:0;overflow:visible}
.map-page .tp-group .seg button{display:flex;align-items:center;gap:8px;text-align:left;padding:7px 8px;min-height:34px;border-radius:var(--r-1);border:1px solid transparent;background:transparent;color:var(--ink);font-size:var(--fs-2);font-weight:500;white-space:normal;line-height:1.2;flex:initial;cursor:pointer}
.map-page .tp-group .seg button:hover{background:var(--panel-2);color:var(--ink)}
.map-page .tp-group .seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.map-page .tp-group .seg button .dot{width:10px;height:10px;border-radius:3px;border:1px solid rgba(0,0,0,.12)}
.map-page .tp-group .seg button[hidden]{display:none}
@media (max-width:640px){.map-page .tp-group .seg button{min-height:44px}}

/* ---------- layers: the desktop drawer and the phone tab ---------- */
.map-page .layers-btn{position:absolute;left:14px;bottom:14px;z-index:6;box-shadow:var(--shadow)}
.map-page .layers-btn[aria-expanded="true"]{border-color:var(--ink)}
.map-page .layers-drawer{position:absolute;left:14px;bottom:62px;z-index:7;width:min(420px,calc(100% - 28px));max-height:min(60%,560px);overflow:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow);padding:12px}
.map-page .layers-drawer>.eyebrow,.map-page #tab-layers>.eyebrow{margin:0 0 8px}
.map-page .ly-eyebrow{margin:6px 0 6px;color:var(--faint)}
.map-page .drawer-rows>.ly-eyebrow:first-child,.map-page .tab-rows>.ly-eyebrow:first-child{margin-top:0}
.map-page .layers-drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.map-page .layers-drawer .drawer-head .eyebrow{margin:0}
.map-page .layers-drawer .layers,.map-page #tab-layers .layers{position:static;bottom:auto;left:auto;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;pointer-events:auto;max-width:none}
.map-page .layers-drawer .layers:last-child,.map-page #tab-layers .layers:last-child{margin-bottom:0}
.map-page .layers-drawer .layers label,.map-page .layers-drawer .layers .lyhead,.map-page .layers-drawer .layers .lyhint,.map-page .layers-drawer .layers .bseg,.map-page .layers-drawer .layers button.pill,.map-page .layers-drawer .layers .ly-btn,
.map-page #tab-layers .layers label,.map-page #tab-layers .layers .lyhead,.map-page #tab-layers .layers .lyhint,.map-page #tab-layers .layers .bseg,.map-page #tab-layers .layers button.pill,.map-page #tab-layers .layers .ly-btn{box-shadow:none}
.map-page .layers-drawer .layers .lyhint,.map-page #tab-layers .layers .lyhint{flex-basis:100%;border-style:dashed}
.map-page .layers-drawer .layers .lyhead,.map-page #tab-layers .layers .lyhead{border-color:transparent;background:transparent;padding-left:0;flex-basis:100%}
.map-page .layers .ly-btn.on{border-color:var(--ink)}
.map-page .layerstack{bottom:60px;left:14px}
@media (max-width:640px){.map-page #tab-layers .layers label,.map-page #tab-layers .layers .ly-btn,.map-page #tab-layers .layers button.pill{min-height:40px}}

/* ---------- the key on the map (ruling 2.3): floats bottom right, left of the tools column, open by default at
   >= 1180 px and collapsed to its head row at 900-1179 px; ui.js's applyLayout() moves .legend-section into
   .map-key-body at >= 900 px and back into the Here tab below it under 900 px. #legendHead ("Map key" and the
   #isoPill "filtered" pill) stays in the DOM everywhere -- the panel head and the status line are its visible
   form now -- so it is hidden unconditionally, not only while nested under .map-key.
   FD3-04 (the orchestrator's browser pass): at 1280x900 the panel measured 280 x 396 px over Morgan, Washington,
   Athens and Meigs -- Ohio fills the box at this size, so there is no empty corner to spare. 280 -> 260 px,
   44% -> 38% max-height, and the row height is cut (below) by hiding the engine's per-row <small> sub-line, which
   rendered on all six rows, not only the one a reader isolated; every other gap and padding in the panel is trimmed
   to match (measured with six radon rows: 260 x 286 px on the first pass, 27 px a row -- comfortably clear of the
   24 px floor -- so the rows kept their padding and the surrounding spacing gave up the rest). */
.map-page .map-key{position:absolute;right:76px;bottom:14px;z-index:8;width:260px;max-width:calc(100% - 100px);max-height:38%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-3);box-shadow:var(--shadow)}
.map-page .map-key-head{display:flex;align-items:center;gap:8px;width:100%;padding:6px 12px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;border-radius:var(--r-3)}
.map-page .map-key-head .dot{width:12px;height:12px;border-radius:3px}
.map-page .map-key-title{font-weight:600;font-size:var(--fs-3)}
.map-page .map-key-sub{color:var(--muted);font-size:var(--fs-1);margin-left:auto;white-space:nowrap}
.map-page .map-key-chev{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin:0 2px 3px 4px;flex:none}
.map-page .map-key.collapsed .map-key-chev{transform:rotate(-135deg);margin-bottom:-3px}
.map-page .map-key-body{overflow:auto;overscroll-behavior:contain;padding:0 10px 6px;min-height:0}
.map-page .map-key.collapsed .map-key-body{display:none}
.map-page #legendHead{display:none}
/* one line per row: swatch, band name, count (FD3-04). The engine always renders a per-row <small> sub-line inside
   .nm (r.sub -- "Low", "Very high", the intake legend's plant name, and so on); kept for the isolated row alone,
   where the engine itself sets aria-pressed="true" (updateIsolationUI), so the extra context returns exactly where
   a reader asked for detail. A "noiso" row (no button role, never isolatable) never carries aria-pressed="true"
   and so never regains the second line, which matches "one line" for every row that cannot be pressed anyway.
   min-height keeps the >= 24 px floor (and its focus ring) even though the padding alone already clears it. */
.map-page .map-key .legend{gap:1px}
.map-page .map-key .legend li{padding:2px 6px;min-height:24px}
.map-page .map-key .legend .nm small{display:none}
.map-page .map-key .legend li[aria-pressed="true"] .nm small{display:block}
.map-page .key-iso{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 0;padding:8px 10px;border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-2);font-size:var(--fs-1);color:var(--ink)}
.map-page .key-iso .key-iso-n{color:var(--muted)}
.map-page .key-iso .btn{margin-left:auto}
.map-page .key-hint{margin:4px 0 0;font-size:var(--fs-1);color:var(--muted)}
.map-page .map-key .topic-about{margin:2px 0 0}
@media (min-width:900px) and (max-width:1179px){.map-page .map-key{width:240px}}

/* ---------- the start card and the play row (ruling 2.2, 2.9): one of three things shown in the Here panel
   (the others are #overview and #result, unchanged here); nothing is pre-selected (D-97 stands). Two starters per
   row in the 400 px rail at >= 1180 px; the rail narrows to clamp(232px,25vw,400px) at 900-1179 px, where one
   starter fills the row (below 900 px the phone rule further down turns the row into a horizontal scroller). ---------- */
.map-page .start-card{display:grid;gap:10px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--panel-2)}
.map-page .start-card .eyebrow{margin:0}
.map-page .start-h{margin:0;font-size:var(--fs-6);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.map-page .start-lead{margin:0;color:var(--muted);font-size:var(--fs-2)}
.map-page .start-try{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.map-page .start-btn{display:flex;align-items:flex-start;gap:8px;text-align:left;padding:8px 9px;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--panel);color:var(--ink);font:inherit;font-size:var(--fs-2);line-height:1.25;cursor:pointer}
.map-page .start-btn:hover{border-color:var(--ink)}
.map-page .start-btn .dot{margin-top:3px}
.map-page .rail-play{display:flex;flex-wrap:wrap;gap:6px}
.map-page .start-how,.map-page .start-more{margin:0;font-size:var(--fs-1);color:var(--muted);line-height:1.4}
.map-page .start-more .btn{margin-left:4px;vertical-align:middle}
@media (max-width:1179px){.map-page .start-try{grid-template-columns:1fr}}

/* ---------- the tools column (ruling 2.5): the engine's .zoomctl keeps every id and handler; the site paints it
   (D-34 amended, D-134). Five new 16 px single-stroke icons, drawn once each as a mask-image data URI and colored
   with currentColor so they follow the theme and the pressed state (the engine's own aria-pressed inversion already
   applies to the button background); the engine's glyph text is hidden at font-size:0 on those five buttons only
   (In, Out and Fit keep the engine's own +, − and OH text). The label is generated content from data-label, shown
   at >= 1180 px only; --icon selects which of the five data URIs a button's ::before mask uses, so the mask rule
   itself is written once. ---------- */
.map-page .zoomctl{gap:6px;padding:14px;--icon-panel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='1.5' y='2.5' width='13' height='11' rx='1.5'/%3E%3Cpath d='M6 2.5v11'/%3E%3Cpath d='M1.5 2.5h4.5v11H1.5z' fill='%23000' stroke='none'/%3E%3C/svg%3E");--icon-restart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8a5 5 0 1 1-1.6-3.7'/%3E%3Cpath d='M13 2.5v3.5h-3.5'/%3E%3C/svg%3E");--icon-sheets:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='1.5' y='5.5' width='9' height='9'/%3E%3Cpath d='M4 3.5h9v9'/%3E%3Cpath d='M6.5 1.5h8v8'/%3E%3C/svg%3E");--icon-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14.5V9.5'/%3E%3Cpath d='M4.5 9.5h7l-1.2-3V2.5h-4.6v4z'/%3E%3C/svg%3E");--icon-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10V2'/%3E%3Cpath d='M5 5l3-3 3 3'/%3E%3Cpath d='M2.5 9v4.5h11V9'/%3E%3C/svg%3E")}
.map-page .zoomctl button{width:44px;height:44px;font-size:17px;border-radius:var(--r-2);position:relative}
.map-page .zoomctl #lytoggle,.map-page .zoomctl #hrOpenM{display:none!important}
.map-page .zoomctl #zreset{margin-bottom:6px}   /* the gap between the view group (In, Out, Fit) and the state group (Reset, Old maps, Pin, Share) */
.map-page .zoomctl #railToggle,.map-page .zoomctl #startOver,.map-page .zoomctl #hmBtn,.map-page .zoomctl #pinMode,.map-page .zoomctl #siteShare{font-size:0;color:transparent}
.map-page .zoomctl #railToggle{--icon:var(--icon-panel)}
.map-page .zoomctl #startOver{--icon:var(--icon-restart)}
.map-page .zoomctl #hmBtn{--icon:var(--icon-sheets)}
.map-page .zoomctl #pinMode{--icon:var(--icon-pin)}
.map-page .zoomctl #siteShare{--icon:var(--icon-share)}
.map-page .zoomctl #railToggle::before,.map-page .zoomctl #startOver::before,.map-page .zoomctl #hmBtn::before,.map-page .zoomctl #pinMode::before,.map-page .zoomctl #siteShare::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-60%);background-color:var(--ink);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
/* matches the rule above id-for-id (a bare button[aria-pressed] selector is not specific enough to beat an #id
   selector, so the inversion below would never win the cascade and a pressed icon would paint --ink on the
   engine's own pressed --ink background, invisible -- #railToggle and #pinMode both reach aria-pressed="true") */
.map-page .zoomctl #railToggle[aria-pressed="true"]::before,.map-page .zoomctl #startOver[aria-pressed="true"]::before,.map-page .zoomctl #hmBtn[aria-pressed="true"]::before,.map-page .zoomctl #pinMode[aria-pressed="true"]::before,.map-page .zoomctl #siteShare[aria-pressed="true"]::before{background-color:var(--panel)}
@media (min-width:1180px){
  .map-page .zoomctl button{height:52px}
  /* FD3-04: "Old maps" wrapped inside the 44 px button at 10px (content: attr(data-label) spanning left:0;right:0
     forced a break) and only "maps" read. white-space:nowrap keeps every label one line; centering the text on the
     button (left:50%, translateX(-50%)) instead of stretching it edge to edge lets the two longest labels ("Old
     maps", "Panel") overflow the 44 px button symmetrically -- .zoomctl's own padding (14px, engine map.css) is
     wide enough that the overflow lands inside the column, never clipped by .zoomctl's overflow-x:hidden. The
     size and letter-spacing are trimmed slightly too, so the overflow (and any chance of two labels touching) stays
     small. */
  .map-page .zoomctl button::after{content:attr(data-label);position:absolute;left:50%;bottom:4px;transform:translateX(-50%);white-space:nowrap;font-size:9.5px;line-height:1;color:var(--muted);font-family:var(--font-body);letter-spacing:0}
  .map-page .zoomctl button[aria-pressed="true"]::after{color:var(--panel)}
  .map-page .zoomctl #zin,.map-page .zoomctl #zout,.map-page .zoomctl #zreset{padding-bottom:12px}
}

/* ---------- the Layers button's count (ruling 2.4): "Layers · 2 on" when an overlay is on, plain "Layers"
   otherwise (the chunk toggles [hidden], already covered by the engine's global [hidden]{display:none!important}) ---------- */
.map-page .layers-btn .ly-count{margin-left:6px;font-size:var(--fs-1);color:var(--muted)}

/* ---------- the rail collapse on the site's grid (ruling 2.11): the engine's #railToggle toggles .app.rail-off,
   whose own CSS targets .app, but the site lays out on .map-page (D-56), so the rail hid while the map stayed in
   its column. The engine's own ResizeObserver on .mapwrap refits the projection (engine 1551), so nothing else is
   needed; where :has() is unsupported the toggle degrades to today's behavior.
   (2026-09-25) ONE column, not "0 1fr": .app is display:contents, so once .rail is display:none the map is the
   grid's only placed child and auto-places into the FIRST column -- which "0 1fr" made zero wide, so hiding the
   panel blanked the whole map (live on release 9, 1024 px: .mapwrap 0 px wide, the 1fr column empty). A single
   column holds the map whatever the order of the children. ---------- */
@media (min-width:900px){.map-page:has(.app.rail-off){grid-template-columns:minmax(0,1fr)}}

/* ---------- the phone: top bar, full-screen map, the sheet ---------- */
.map-page .topbar{display:none}
@media (max-width:899px){
  .map-page{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .map-page .topbar{position:relative;z-index:46;display:flex;align-items:center;gap:var(--s-2);padding:8px var(--gutter);height:56px;box-sizing:border-box;background:var(--panel);border-bottom:1px solid var(--line)}
  .map-page .topbar .brand{font-size:var(--fs-4);flex:none}
  /* both name spans hidden (ruling 2.6): the mark alone, with aria-label="Cracked Buckeye, home" (index.html), so the
     search gets the width -- a 190 px name once left the field 35 px, the bare "/" chip the owner reported */
  .map-page .topbar .brand .long,.map-page .topbar .brand .short{display:none}
  .map-page .topbar .topbar-search{flex:1;min-width:0}
  .map-page .topbar .search input{padding:9px 36px 9px 12px;font-size:var(--fs-3);min-height:40px}
  .map-page .topbar .site-nav a{min-height:40px;display:inline-flex;align-items:center;padding:6px 4px}
  /* the map fits the visible area above the sheet's 32dvh peek, under the 56 px top bar, so fitExtent (which reads
     the wrapper) frames Ohio there instead of under the sheet (ruling 2.6) */
  .map-page .mapwrap{align-self:start;height:calc(68dvh - 56px)}
  .map-page .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:32dvh;max-height:none;border-right:0;border-bottom:0;border-top:1px solid var(--line-strong);border-radius:var(--r-4) var(--r-4) 0 0;box-shadow:0 -8px 28px rgba(0,0,0,.18);z-index:44;transition:height var(--t-base) var(--ease);padding-bottom:env(safe-area-inset-bottom,0px)}
  .map-page .rail.expanded{height:92dvh;max-height:calc(100dvh - 64px)}   /* (QA 2026-09-27) never under the 56px top bar: in landscape 92dvh ran 25-29px beneath it, over half the handle */
  /* D-83: the sheet is dragged (ui.js sheetDrag). The grip and the tabs never scroll, and the collapsed sheet's content does
     not scroll either, so a swipe up anywhere on the peek reaches the drag handler instead of the card. */
  .map-page .sheet-handle,.map-page .sheet-tabs{touch-action:none}
  .map-page .rail:not(.expanded){touch-action:none;user-select:none;-webkit-user-select:none}
  .map-page .rail:not(.expanded) .rail-scroll{overflow:hidden}
  .map-page .sheet-handle{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 12px 4px;border:0;background:transparent;width:100%;color:var(--muted);font-size:var(--fs-1);line-height:1.3;cursor:pointer;min-height:44px}
  .map-page .sheet-handle::before{content:"";width:40px;height:4px;border-radius:2px;background:var(--line-strong)}
  .map-page .sheet-handle::after{content:"";width:9px;height:9px;border-left:2px solid var(--muted);border-top:2px solid var(--muted);transform:translateY(3px) rotate(45deg);transition:transform var(--t-base) var(--ease)}
  .map-page .rail.expanded .sheet-handle::after{transform:translateY(-2px) rotate(225deg)}
  .map-page .sheet-handle .t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:500}
  .map-page .sheet-tabs{display:flex;gap:4px;padding:2px 12px 4px}
  .map-page .sheet-tabs button{flex:1;padding:8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--panel);font-size:var(--fs-2);font-weight:500;color:var(--muted);min-height:44px;cursor:pointer}
  .map-page .sheet-tabs button[aria-selected="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
  .map-page .rail-scroll{padding:0 14px 18px;gap:12px}
  .map-page .rail-brand{display:none}
  .map-page .layers-btn,.map-page .layers-drawer{display:none}
  /* two corner clusters instead of the eight-button column (ruling 2.5, 2.6): the zoom column becomes a row across
     the bottom, #zreset's auto left margin splits it into a left pair (In, Out, below Cincinnati's empty corner)
     and a right cluster (Fit, Reset, Pin, Share, in the empty southeast); the old bottom offset that compensated
     for the sheet is gone because the map now sits above the sheet instead of under it (the mapwrap height rule
     above), so the column no longer needs to clear it either. */
  .map-page .zoomctl{left:0;right:0;bottom:0;top:auto;flex-direction:row;align-items:flex-end;padding:0 10px 8px;max-height:none;overflow:visible;transition:none}
  .map-page .zoomctl #zreset{margin-left:auto;margin-bottom:0}
  .map-page .mapwrap{--fit-pad-b:60px}   /* (QA 2026-09-27) the tool row is 52px tall and, with the photos button, spans the width: Ohio is fitted above it, not under it along the river */
  .map-page .zoomctl #railToggle,.map-page .zoomctl #hmBtn{display:none!important}   /* the sheet is the panel; the Layers tab has "Old maps" */
  /* "DEFIANCEENRY": the two counties' labels collided at 375 px at the state view; they return once the chunk marks
     the map zoomed in (data-zoom 2 from k >= 2, 3 from k >= 6) */
  .map-page .mapwrap[data-zoom="1"] .l-labels .lc{display:none}
  /* the key sits back in the Here tab below the stat (ruling 2.3): neutralize the floating panel's box so its
     content reads as a plain section of the sheet, not a card inside a card */
  .map-page .map-key{position:static;width:auto;max-width:none;max-height:none;box-shadow:none;border:0;border-radius:0;background:transparent}
  .map-page .map-key-head{display:none}
  .map-page .map-key-body{padding:0;overflow:visible}
  /* the compact start card: six starters scroll horizontally instead of stacking (ruling 2.6) */
  .map-page .start-try{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px;margin:0 -14px;padding:0 14px}
  .map-page .start-btn{flex:0 0 220px}
  .map-page .layerstack{bottom:calc(32dvh + 14px);left:14px;max-width:calc(100% - 80px)}
  .map-page .ipanel{left:14px;right:14px;width:auto;max-width:none;top:14px;bottom:calc(32dvh + 14px);max-height:none}
  .map-page .fm-asm{max-height:calc(68dvh - 80px)}
  #loadHint{top:10px;font-size:var(--fs-1)}
}
/* The old maps' list on a phone (owner's iPhone, 2026-09-25: "the dropdown wont go away without refreshing or
   resetting"). The engine stands the list at the map's foot, but the rule above lets it grow to 68dvh - 80px, taller
   than the map above the sheet, so it reached up under the dock (z-index 17 over 16): the dock hid the list's own x
   and its search, and the only way out left was the dock's x, which takes every old map off. On a phone the list
   now covers the dock instead, one card at a time: its x (made finger-sized) closes it and gives the dock back. It
   stops above the zoom row, which covered its foot. 16px type in its fields, or iOS zooms the page on a tap. */
@media (max-width:640px){
  .map-page .hm-panel{top:8px;bottom:60px;max-height:none;z-index:17}
  .map-page .hm-panel .hd .x{font-size:24px;line-height:1;padding:6px 4px 8px 10px;margin:-6px -4px -8px 0}
  .map-page .hm-panel input[type=text],.map-page .hm-panel select{font-size:16px}
}
@media (min-width:900px){
  .map-page .sheet-handle,.map-page .sheet-tabs{display:none}
  .map-page .sheet-panel[hidden]{display:none}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  .map-page .rail,.map-page .zoomctl{transition:none}
}

/* ---------- plain map (D-86, owner's request 2026-09-16): every topic can come off the map, leaving the base alone ---------- */
.map-page .topic-now .tn-clear{flex:none}
.map-page .tp-plain{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 8px;min-height:34px;margin:6px 0 4px;border-radius:var(--r-1);border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-1);cursor:pointer}
.map-page .tp-plain:hover{background:var(--panel-2)}
.map-page .tp-plain[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.map-page .tp-plain .dot{width:10px;height:10px;border-radius:3px;border:1px dashed var(--line-strong);background:transparent;flex:none}
.map-page .tp-plain[aria-pressed="true"] .dot{border-color:var(--panel)}
@media (max-width:640px){.map-page .tp-plain{min-height:44px}}
.map-page .plain-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 12px;padding:10px 12px;border:1px dashed var(--line-strong);border-radius:var(--r-1);color:var(--muted);font-size:var(--fs-1)}
.map-page.plain-map #overview,.map-page.plain-map .legend-section{display:none}
.mapwrap.plain path.zip{fill:var(--r0) !important;fill-opacity:.6}
.mapwrap.plain path.zip.dim{fill-opacity:.25}
.mapwrap.plain.raster path.zip,.mapwrap.plain.hist path.zip{fill-opacity:0 !important}
.mapwrap.plain.raster path.zip:hover,.mapwrap.plain.raster path.zip.sel,.mapwrap.plain.raster path.zip.hi,.mapwrap.plain.hist path.zip.sel,.mapwrap.plain.hist path.zip.hi{fill-opacity:.12 !important}
/* the tooltip with no layer (ruling 2.10): with MODE none the engine's tooltip falls through to the water branch
   and describes water (against D-97); this shows the ZIP and its place name alone until a layer is on. CSS only,
   the engine is untouched, and the rule becomes a no-op once main fixes the branch.
   Only a ZIP's tip (the one that opens with the .z head) is cut down (owner's iPhone report 2026-09-26): unscoped, the
   rule also emptied every other tip on a plain map -- a power plant's, an old photo spot's, and the pinned tip of a
   power project, data center or moratorium, which is all .s and .m lines -- leaving a blank pill, or one holding only
   its close button. */
.mapwrap.plain #tip:has(> .z) .s,.mapwrap.plain #tip:has(> .z) .m{display:none}

/* the old photos' dock on a phone (owner's iPhone report 2026-09-26): its era buttons wrapped to two rows and the
   house-card line to two more, so the dock covered the top third of the map -- Toledo, Cleveland and the lakeshore,
   whose pins could not be tapped. One scrolling row of eras and a one-line checkbox keep it to three short rows. */
@media (max-width:899px){
  .map-page .ph-dock{gap:4px;padding:6px 9px 7px}
  .map-page .ph-dock .kd{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .map-page .ph-dock .kd::-webkit-scrollbar{display:none}
  .map-page .ph-dock label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .map-page .ph-dock label .m{display:none}
}

/* ---------- historical map footprints: outlines only (owner's report 2026-09-16: "the whole map screen purple") ----------
   The engine fills every footprint 6% purple; the 2,528 USGS quads tile the state, so the fills stacked to a solid purple sheet.
   Here a footprint is a line; the pointer lifts one, a map that is on draws solid. */
.map-page .l-hist path{fill-opacity:0;stroke-opacity:.5;stroke-width:1}
.map-page .l-hist path:hover{fill-opacity:.15;stroke-opacity:1}
.map-page .l-hist path.on{fill-opacity:.05;stroke-opacity:1;stroke-width:2}
/* C-47 (the Wikipedia wave): members' entries on the map. The control sits on the map, top left, off by
   default; the pins live in the engine's zoom group (community.pins.js); pick mode is one bar across the top.
   --cb-top (set on .mapwrap by community.map.js) puts both under the old maps' and old photos' docks while
   either is open: those open at the same corner, above these. */
.map-page .cb-ents{position:absolute;left:10px;top:var(--cb-top,10px);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-2);box-shadow:var(--shadow-sm)}
.map-page .cb-ents [aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--panel)}
.map-page .cb-ents-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.map-page .cb-ents-more[hidden]{display:none}
.map-page .cb-ents-n{font-size:var(--fs-1);color:var(--muted)}
.map-page .cb-pins circle{fill:var(--accent);stroke:var(--panel);cursor:pointer}
.map-page .cb-pickbar{position:absolute;left:10px;right:10px;top:var(--cb-top,10px);z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border:2px solid var(--accent);border-radius:var(--r-2);box-shadow:var(--shadow)}
.map-page .cb-pick-msg{color:var(--bad);font-size:var(--fs-2)}
.map-page .cb-zipents{margin:0 0 10px;font-size:var(--fs-2)}
/* top left, clear of the layer stack (bottom left), the map's tools (right; the bottom edge on a phone) and,
   through --cb-top, the two docks */
@media (max-width:640px){.map-page .cb-ents{padding:4px;gap:4px}.map-page .cb-ents .btn{min-height:32px;padding:0 10px}}
.cb-plist{margin:0;padding:0;list-style:none}
.cb-plist li{padding:4px 0;border-top:1px solid var(--line)}

/* ---------- the plain base and the independent base switches (2026-09-25, owner: "a map option that is just a solid
   color, then counties, zipcodes, roads, buildings, etc. can all be independently layered on/off") ---------- */
/* No topic and the ZIP codes switched off: the ZIP fills close into one surface, full strength, each one stroked in its
   own color so the hairline seams between neighbors disappear. A hovered, selected or dimmed ZIP keeps its own look. */
.mapwrap.plain.zips-off:not(.raster):not(.hist) path.zip:not(.hi):not(.sel):not(.dim):not(:hover){fill-opacity:1;stroke:var(--r0);stroke-width:.6}
.mapwrap.ctx.plain.zips-off:not(.raster):not(.hist) path.zip:not(.hi):not(.sel):not(.dim):not(:hover){stroke:var(--muted);stroke-opacity:.5}   /* (2026-09-28) a picked ZIP shows its neighbours (template.html drawCtx) */
/* Roads and Buildings (site/map/vector.js): OpenStreetMap vector tiles in the map's own grays, over any base */
.l-vec{pointer-events:none;--vec-road:#6f7b87;--vec-road-minor:#9aa5b0;--vec-bldg:#bcc5ce}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .l-vec{--vec-road:#8d99a6;--vec-road-minor:#5d6976;--vec-bldg:#35414d} }
:root[data-theme="dark"] .l-vec{--vec-road:#8d99a6;--vec-road-minor:#5d6976;--vec-bldg:#35414d}
.mapwrap.base-dark .l-vec{--vec-road:#f3efe4;--vec-road-minor:rgba(255,255,255,.62);--vec-bldg:rgba(255,255,255,.34)}
.l-vec path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.l-vec .vb{fill:var(--vec-bldg);stroke:none}
.l-vec .r1{stroke:var(--vec-road);stroke-width:calc(2.2px * var(--vw, 1))}
.l-vec .r2{stroke:var(--vec-road);stroke-width:calc(1.4px * var(--vw, 1))}
.l-vec .r3{stroke:var(--vec-road-minor);stroke-width:calc(.8px * var(--vw, 1))}
.l-vec .r4{stroke:var(--vec-road-minor);stroke-width:calc(.5px * var(--vw, 1))}
.l-vec.vz-lo .r2{stroke:var(--vec-road-minor)}