/* ══════════════════════════════════════════════════════════════
   chekiPawa — style.css
   Same design tokens/visual language as the original single-file
   build. Reorganized into a real stylesheet + extended for the
   multi-page architecture (real nav, breadcrumbs, county/area
   pages, FAQ blocks) needed for SEO/AEO.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#0a0a0d;--bg2:#101015;--panel:#15151c;--panel2:#1c1c25;--panel3:#24242f;
  --border:#23232e;--border2:#2e2e3c;--border3:#3a3a4d;
  --text:#f3f0fa;--muted:#8a86a0;--dim:#46435a;--subtle:#56546e;
  --amber:#ffb320;--abg:rgba(255,179,32,.10);--ab:rgba(255,179,32,.28);--aglow:rgba(255,179,32,.16);
  --red:#ff3a5e;--rbg:rgba(255,58,94,.12);--rb:rgba(255,58,94,.30);
  --orange:#ff7a32;--obg:rgba(255,122,50,.12);--ob:rgba(255,122,50,.28);
  --yellow:#ffd23f;--green:#22e07a;--gbg:rgba(34,224,122,.11);--gb:rgba(34,224,122,.30);
  --blue:#54bbff;--bbg:rgba(84,187,255,.11);
  --teal:var(--amber);--tbg:var(--abg);--tb:var(--ab);--tglow:var(--aglow);
  --hbg:rgba(10,10,13,.92);
  --r:10px;--r2:14px;--r3:18px;
}
html.light{
  --bg:#f4f0e9;--bg2:#ece7de;--panel:#fffdf8;--panel2:#f6f1e8;--panel3:#efe9de;
  --border:#e2dccf;--border2:#d0c9b8;--border3:#bcb3a0;
  --text:#171220;--muted:#736d82;--dim:#bdb6a8;--subtle:#cfc8ba;
  --amber:#c47e00;--abg:rgba(196,126,0,.08);--ab:rgba(196,126,0,.22);--aglow:rgba(196,126,0,.12);
  --red:#d61e3c;--rbg:rgba(214,30,60,.08);--rb:rgba(214,30,60,.24);
  --orange:#cf5916;--obg:rgba(207,89,22,.08);--ob:rgba(207,89,22,.22);
  --yellow:#cc9a00;--green:#15924a;--gbg:rgba(21,146,74,.09);--gb:rgba(21,146,74,.26);
  --blue:#2f8fd6;--bbg:rgba(47,143,214,.09);
  --teal:var(--amber);--tbg:var(--abg);--tb:var(--ab);--tglow:var(--aglow);
  --hbg:rgba(244,240,233,.94);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:70px}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.55;min-height:100vh;overflow-x:hidden;padding-bottom:74px;-webkit-font-smoothing:antialiased}
.disp,h1,h2,h3,.logo{font-family:'Hilmar','Inter',sans-serif;font-weight:400;letter-spacing:-.01em;line-height:1.04}
.num,.mono{font-family:'Space Mono',monospace;font-variant-numeric:tabular-nums}
a{color:var(--amber);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-thumb{background:var(--border3);border-radius:2px}
.lucide{width:1em;height:1em;display:inline-block;vertical-align:-.125em;stroke-width:2.2}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes countPop{0%{transform:scale(.75);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 var(--gb)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.stat-num{animation:countPop .5s cubic-bezier(.34,1.56,.64,1) both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── HEADER / NAV (now real multi-page nav, not tab-switching) ── */
header{position:sticky;top:0;z-index:600;background:var(--hbg);backdrop-filter:blur(20px);border-bottom:1px solid var(--border2);padding:0 18px;height:56px;display:flex;align-items:center;gap:12px}
.hbrand{display:flex;align-items:center;gap:9px;font-family:'Hilmar','Inter',sans-serif;font-size:18px;letter-spacing:-.4px;flex-shrink:0}
.hbrand .logo-icon{width:24px;height:24px}
.hbrand-text .p{color:var(--amber)}
.logo-icon{width:28px;height:28px;background:var(--amber);clip-path:polygon(60% 0%,100% 0%,40% 50%,80% 50%,0% 100%,20% 50%,-5% 50%);animation:bp 2.2s ease-in-out infinite;flex-shrink:0}
.dtabs{display:none;align-items:center;gap:4px;margin:0 auto;background:var(--panel2);border:1px solid var(--border2);border-radius:12px;padding:4px}
.dtab{background:none;border:none;font-weight:700;font-size:13px;color:var(--muted);padding:8px 18px;border-radius:9px;transition:all .15s;letter-spacing:.1px;display:inline-block}
.dtab.active{color:#1a1209;background:var(--amber)}
.dtab:not(.active):hover{color:var(--text)}
.dtab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hr{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.hbtn{height:36px;min-width:36px;padding:0;border-radius:10px;border:1px solid var(--border2);background:var(--panel2);color:var(--muted);font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .16s}
.hbtn:hover{border-color:var(--amber);color:var(--amber);background:var(--abg)}
.hbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hbtn.sp .lucide{animation:spin .8s linear infinite}
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:700;background:var(--hbg);backdrop-filter:blur(20px);border-top:1px solid var(--border2);padding-bottom:env(safe-area-inset-bottom)}
.bni{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 4px 11px;gap:4px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.2px;transition:color .15s}
.bni.active{color:var(--amber)}
.bni-icon{font-size:20px;line-height:1}

/* ── BREADCRUMBS — SEO + orientation on county/area pages ── */
.crumbs{max-width:1200px;margin:0 auto;padding:14px 20px 0;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--border3)}
.crumbs a:hover{color:var(--amber)}
.crumbs .sep{opacity:.5}
.crumbs .current{color:var(--text);font-weight:700}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px 20px}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.slbl{font-family:'Space Mono',monospace;font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.slbl::before{content:'';display:inline-block;width:3px;height:15px;background:var(--amber);border-radius:2px}
.smeta{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.5px}
.smeta-count{font-family:'Space Mono',monospace;font-size:11px;color:var(--amber);font-weight:700}
.section-block{margin-bottom:38px}

/* ── HERO ── */
.hero{max-width:1200px;margin:0 auto;padding:22px 20px 0;box-sizing:border-box}
.hero-eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.hero-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulseDot 2s infinite}
.hero-status-row{display:grid;grid-template-columns:50% 45%;gap:5%;align-items:stretch;margin-bottom:40px}
.hero-left{min-width:0;display:flex;flex-direction:column}
.hero-headline{font-family:'Hilmar','Inter',sans-serif;font-weight:400;font-size:clamp(30px,5.6vw,60px);line-height:1.0;letter-spacing:-1.5px}
.hero-headline .hl-red{color:var(--red)}.hero-headline .hl-green{color:var(--green)}.hero-headline .hl-amber{color:var(--amber)}
.hero-sub{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.6;max-width:52ch}
.hero-actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.hero-search-row{display:flex;gap:10px;align-items:center;margin-top:26px;margin-bottom:26px}
.sw{position:relative;flex:1;min-width:0}
.sw-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:490}
.sw-backdrop.on{display:block}
.sw.searching{position:relative;z-index:510}
.si{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;z-index:4;display:flex}
.sinp{width:100%;background:rgb(255,255,255);border:none;border-radius:12px;padding:14px 48px 14px 46px;font-size:14px;font-weight:500;color:#1a1714;outline:none;transition:box-shadow .2s}
.sinp::placeholder{color:#8a86a0}
.sinp:focus{box-shadow:0 0 0 3px var(--aglow)}
.sclr{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:var(--border2);color:var(--muted);font-size:11px;display:none;align-items:center;justify-content:center;z-index:3}
.sclr.on{display:flex}
.sdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--border2);border-radius:12px;overflow:hidden;z-index:511;display:none;max-height:340px;overflow-y:auto}
.sdrop.open{display:block}
.sri{padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .12s;text-align:left}
.sri:last-child{border-bottom:none}
.sri:hover{background:var(--panel2)}
.sri-name{font-size:13px;font-weight:600;color:var(--text)}
.sri-meta{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px}

/* buttons */
.btn-primary{background:var(--amber);color:#1a1209;font-weight:700;font-size:13.5px;border-radius:12px;padding:13px 20px;display:inline-flex;align-items:center;gap:8px;transition:filter .15s;width:auto}
.btn-primary:hover{filter:brightness(1.06)}
.btn-soft{background:var(--panel2);border:1px solid var(--border2);color:var(--text);font-weight:700;font-size:13.5px;border-radius:12px;padding:13px 20px;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.btn-soft:hover{border-color:var(--amber);color:var(--amber)}

/* ── location prompt card (pre-location) + personal card (post-location) ──
   Restored from the original app. This is the richest widget in the app:
   before location permission, a prompt card asks "Will you have power
   tomorrow?" with a real stat if data supports it; after permission, a
   verdict card (powered/outage/scheduled) with crowd reports and the
   "Do you have power?" vote widget (server-tallied via reports_api.php's
   vote/get actions — see assets/js/personal-card.js). Kept fully
   location-gated exactly as before: the vote widget only ever renders
   once userLat is set. ── */
.loc-prompt-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:22px 20px;display:flex;flex-direction:column;justify-content:center;height:100%;animation:slideUp .3s ease}
.loc-prompt-icon{width:40px;height:40px;border-radius:11px;background:var(--abg);border:1px solid var(--ab);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.loc-prompt-title{font-family:'Hilmar','Inter',sans-serif;font-size:clamp(19px,2.6vw,24px);line-height:1.15;letter-spacing:-.4px;margin-bottom:8px}
.loc-prompt-sub{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.loc-prompt-sub strong{color:var(--text)}
.pc-locbtn{width:100%;justify-content:center}

.personal-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:20px;width:100%;animation:slideUp .3s ease;position:relative;overflow:hidden;height:100%}
.personal-card.powered{border-color:var(--gb);background:linear-gradient(160deg,var(--gbg),var(--panel) 55%)}
.personal-card.outage{border-color:var(--rb);background:linear-gradient(160deg,var(--rbg),var(--panel) 55%)}
.personal-card.scheduled{border-color:var(--ab);background:linear-gradient(160deg,var(--abg),var(--panel) 55%)}
.pc-map-bd{position:absolute;top:0;right:0;width:100%;height:70%;background-size:cover;background-position:center;opacity:.5;pointer-events:none;z-index:0}
.pc-map-bd::after{content:'';position:absolute;inset:0;background:linear-gradient(150deg,var(--panel) 28%,transparent 75%),linear-gradient(to right,var(--panel) 6%,transparent 60%)}
.personal-card.powered .pc-map-bd::after{background:linear-gradient(150deg,var(--panel) 24%,transparent 78%),linear-gradient(to right,var(--panel) 6%,transparent 62%)}
.pc-content{position:relative;z-index:1}
.pc-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pc-verdict{font-family:'Hilmar','Inter',sans-serif;font-size:clamp(22px,3vw,32px);line-height:1.05;letter-spacing:-.5px;margin-bottom:6px}
.pc-verdict .tag-green{color:var(--green)}.pc-verdict .tag-red{color:var(--red)}.pc-verdict .tag-amber{color:var(--amber)}
.pc-next{font-size:12.5px;color:var(--muted);margin-bottom:14px;line-height:1.6}
.pc-next strong{color:var(--text)}
.live{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--green);font-size:12px}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulseDot 2s infinite}

.pc-vote{margin-top:14px;border-top:1px solid var(--border);padding-top:6px}
.pc-vote-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0;background:none;color:var(--text)}
.pc-vote-lbl{font-family:'Space Mono',monospace;font-size:10px;color:var(--text);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pc-vote-chev{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.pc-vote-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.pc-vote.open .pc-vote-body{max-height:180px;padding-top:8px}
.pc-vote-btns{display:flex;gap:8px;margin-bottom:9px}
.pc-vote-btn{flex:1;padding:10px 8px;border-radius:9px;border:1px solid var(--border2);background:var(--panel);font-size:12px;font-weight:700;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text)}
.pc-vote-btn.off{color:var(--red)}.pc-vote-btn.off:hover,.pc-vote-btn.off.voted{background:var(--rbg);border-color:var(--rb)}
.pc-vote-btn.on{color:var(--green)}.pc-vote-btn.on:hover,.pc-vote-btn.on.voted{background:var(--gbg);border-color:var(--gb)}
.pc-vote-stats{margin-top:2px}
.pc-vote-bar{height:4px;background:var(--border2);border-radius:2px;overflow:hidden;margin-bottom:5px}
.pc-vote-fill{height:100%;background:var(--red);border-radius:2px;transition:width .4s;width:50%}
.pc-vote-counts{font-family:'Space Mono',monospace;font-size:9.5px;color:var(--muted)}
.pc-voted{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;padding:2px 0 10px;color:var(--text)}
.pc-voted .lucide{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.pc-voted.on .lucide{color:var(--green)}.pc-voted.off .lucide{color:var(--red)}
.pc-voted strong{font-weight:700}
.pc-vote-reset{width:100%;padding:9px;border-radius:9px;border:1px dashed var(--border3);background:transparent;color:var(--muted);font-size:11.5px;font-weight:700;transition:all .15s}
.pc-vote-reset:hover{border-color:var(--amber);color:var(--amber)}

/* ── hero stats (customers affected today, economic impact) ── */
#heroStatsRow:empty,#heroStatsZone:empty{display:none}
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;padding:4px 2px}
.stat-card{background:transparent;border:none;border-left:2px solid var(--border2);border-radius:0;padding:2px 0 2px 16px;position:relative}
.stat-card.s-amber{border-left-color:var(--amber)}.stat-card.s-blue{border-left-color:var(--blue)}
.stat-num{font-family:'Space Mono',monospace;font-weight:700;font-size:27px;line-height:1;letter-spacing:-.5px;margin-bottom:4px;animation:countPop .5s cubic-bezier(.34,1.56,.64,1) both}
.stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.stat-sub{font-size:10px;color:var(--dim);margin-top:3px;font-family:'Space Mono',monospace}
.stat-trend{font-family:'Space Mono',monospace;font-size:10px;position:absolute;top:0;right:0;font-weight:700}
.stat-trend.up{color:var(--red)}.stat-trend.down{color:var(--green)}.stat-trend.flat{color:var(--muted)}

/* ── forecast hook ("Will you have power tomorrow?" banner above Upcoming) ── */
.forecast-hook{background:linear-gradient(135deg,var(--abg),transparent 70%);border:1px solid var(--ab);border-radius:var(--r3);padding:18px 20px;display:flex;align-items:center;gap:16px;margin-bottom:18px}
.forecast-hook .fh-num{font-family:'Space Mono',monospace;font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1;color:var(--amber);letter-spacing:-1px;flex-shrink:0}
.forecast-hook .fh-txt{min-width:0}
.forecast-hook .fh-q{font-family:'Hilmar','Inter',sans-serif;font-size:clamp(16px,2.4vw,21px);line-height:1.15;letter-spacing:-.3px;margin-bottom:3px}
.forecast-hook .fh-sub{font-size:12px;color:var(--muted);line-height:1.45}
.forecast-hook.clear{background:linear-gradient(135deg,var(--gbg),transparent 70%);border-color:var(--gb)}
.forecast-hook.clear .fh-num{color:var(--green)}

/* ── severity meter (6-bar indicator on each outage card) ── */
.sevwrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.sev{display:inline-flex;gap:3px;align-items:center}
.sev i{width:5px;height:17px;border-radius:3px;background:var(--border3);display:block}
.sev i.on{background:var(--sevc)}
.sevlbl{font-family:'Space Mono',monospace;font-weight:700;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--sevc)}

/* ── skeleton loading states ── */
@keyframes skeletonPulse{0%,100%{opacity:.55}50%{opacity:1}}
.skel{background:var(--panel2);border-radius:6px;animation:skeletonPulse 1.4s ease-in-out infinite}
.skel-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r2);padding:16px;height:100%}
.skel-line{height:12px;margin-bottom:10px}
.skel-line.w-60{width:60%}.skel-line.w-40{width:40%}.skel-line.w-80{width:80%}.skel-line.w-30{width:30%}
.skel-line.h-big{height:22px;margin-bottom:14px}
.skel-tag{display:inline-block;width:64px;height:20px;border-radius:6px;margin:0 4px 4px 0}
.skel-stat .skel-line{height:22px}

/* ── location permission card (used on area pages — simpler, no verdict) ── */
.loc-permit-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:20px;width:100%}
.loc-permit-card .lp-icon{width:38px;height:38px;border-radius:11px;background:var(--abg);border:1px solid var(--ab);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:12px}
.loc-permit-card h3{font-size:16px;margin-bottom:6px}
.loc-permit-card p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}

.crowdline{display:flex;align-items:center;gap:9px;margin:12px 0;padding:11px 13px;background:var(--tbg);border:1px solid var(--tb);border-radius:11px;font-size:12.5px;color:var(--teal);font-weight:600}
.crowdline .lucide{flex-shrink:0}.crowdline .n{font-family:'Space Mono',monospace;font-weight:700}
.crowdline a{margin-left:auto;color:var(--teal);font-weight:700;font-size:11px;white-space:nowrap}

/* ── filter pills ── */
.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.fpill{background:var(--panel2);border:1px solid var(--border2);border-radius:9px;padding:7px 12px;font-size:11.5px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.fpill:hover{border-color:var(--border3)}
.fpill.active{background:var(--amber);border-color:var(--amber);color:#1a1209}
.fpill-count{font-family:'Space Mono',monospace;opacity:.7}

/* ── outage cards ── */
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.oc{display:block;background:var(--panel);border:1px solid var(--border2);border-radius:var(--r2);padding:16px;transition:transform .15s,border-color .15s;color:var(--text)}
.oc:hover{transform:translateY(-3px);border-color:var(--border3)}
.oc.sev-today{border-color:var(--rb)}
.oc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.occ{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.oca{font-family:'Hilmar','Inter',sans-serif;font-weight:700;font-size:18px;line-height:1.15;letter-spacing:-.3px}
.oc-time{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.oc-badge{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;padding:4px 9px;border-radius:7px;letter-spacing:.5px}
.badge-today{background:var(--rbg);color:var(--red);border:1px solid var(--rb)}
.badge-upcoming{background:var(--abg);color:var(--amber);border:1px solid var(--ab)}
.oc-hours{font-family:'Space Mono',monospace;font-size:11.5px;color:var(--text);font-weight:600}
.oc-locs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.oc-tag{font-size:10.5px;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;padding:3px 8px;color:var(--muted);line-height:1.4}
html.light .oc-tag{background:var(--panel2);color:var(--text)}
.oc-more{color:var(--amber);border-color:var(--ab);background:var(--abg)}
.oc-meta{font-size:10.5px;color:var(--muted);font-family:'Space Mono',monospace}
.empty-state,.tempty{background:var(--panel);border:1px dashed var(--border2);border-radius:var(--r2);padding:34px;text-align:center;color:var(--muted);font-size:13px}
.empty-state .lucide{width:28px;height:28px;color:var(--green);margin-bottom:10px}

/* ── county grid (home + /counties index) ── */
.county-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.county-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r2);padding:15px;transition:all .15s;color:var(--text)}
.county-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.county-card .cc-name{font-family:'Hilmar','Inter',sans-serif;font-size:16px;margin-bottom:6px}
.county-card .cc-meta{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--muted)}
.county-card .cc-today{color:var(--red);font-weight:700}

/* ── region reliability ranking (EPRA/KPLC 2025 reference stats, restored
   from the original app) — server-rendered since this is static annual
   reference data, not live-tracker data, so it belongs in first paint
   rather than behind a client-side fetch. ── */
.rr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.rr-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:16px 18px}
.rr-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.rr-card-title{font-family:'Hilmar','Inter',sans-serif;font-size:13px}
.rr-item{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.rr-item:last-child{margin-bottom:0}
.rr-rank{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);width:16px;text-align:center;flex-shrink:0;font-weight:700}
.rr-county{font-size:12px;flex:1;font-weight:600}
.rr-bar-wrap{width:64px;height:5px;background:var(--border2);border-radius:3px;overflow:hidden;flex-shrink:0}
.rr-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.rr-val{font-family:'Space Mono',monospace;font-size:11px;flex-shrink:0;font-weight:700}
.rr-national{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:20px}
.rr-nat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px}
.rr-nat-num{font-family:'Space Mono',monospace;font-weight:700;font-size:22px;letter-spacing:-.5px;margin-bottom:4px;color:var(--amber)}
.rr-nat-lbl{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}

/* ── map ── */
.upcoming-panel{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:16px}
.upcoming-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%}
.mapsec-inner{min-width:0}
.mapwrap{border-radius:var(--r2);overflow:hidden;border:1px solid var(--border2);position:relative;height:100%;min-height:300px}
#map{height:100%;min-height:420px;width:100%}
.leaflet-container{background:var(--bg2)!important}
.leaflet-popup-content-wrapper{background:var(--panel)!important;border:1px solid var(--border2)!important;border-radius:12px!important;padding:0!important;max-width:240px!important}
.leaflet-popup-content{margin:11px 13px!important;font-family:'Inter',sans-serif;color:var(--text);font-size:12px}
.leaflet-popup-tip{background:var(--panel)!important}
.leaflet-popup-close-button{color:var(--muted)!important;right:6px!important;top:6px!important}
.leaflet-top,.leaflet-bottom{z-index:400!important}
.mapleg{position:absolute;bottom:10px;left:10px;background:var(--hbg);backdrop-filter:blur(10px);border:1px solid var(--border2);border-radius:9px;padding:8px 10px;display:flex;gap:12px;z-index:410}
.mli{display:flex;align-items:center;gap:6px;font-size:10px;font-family:'Space Mono',monospace;color:var(--text)}
.mld{width:8px;height:8px;border-radius:50%}

.tlsec{min-width:0}
.tldays{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-bottom:12px}
.tldays::-webkit-scrollbar{display:none}
.tltab{flex:1 1 0;min-width:64px;padding:11px 8px;border-radius:var(--r2);background:var(--bg2);border:1px solid var(--border2);text-align:center;transition:all .18s}
.tltab.active{background:var(--amber);border-color:var(--amber)}
.tdn{font-family:'Space Mono',monospace;font-weight:700;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;opacity:.6;margin-bottom:4px}
.tdd{font-family:'Hilmar','Inter',sans-serif;font-size:20px;line-height:1;letter-spacing:-.5px}
.tdc{font-size:9px;color:var(--red);margin-top:3px;font-family:'Space Mono',monospace;font-weight:700}
.tltab.active .tdn,.tltab.active .tdd,.tltab.active .tdc{color:#1a1209;opacity:1}
.tlbody{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);overflow-y:auto;max-height:420px;min-height:180px;padding:10px}
.tlpanel{display:none;padding:10px}
.tlpanel.active{display:block}
.tlempty{text-align:center;padding:34px;color:var(--muted);font-size:13px}
.tlcg{margin-bottom:16px}
.tlcg:last-child{margin-bottom:0}
.tlclbl{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);padding:3px 9px;background:var(--abg);border-radius:5px;display:inline-block;margin-bottom:7px;font-weight:700}
.tlrow-head{display:flex;align-items:flex-start;gap:8px;padding:11px 9px;justify-content:space-between;transition:background .12s}
.tlrow-head:hover{background:var(--panel2)}
.tlrow.open{background:var(--panel2)}
.tlrow.open .tlrow-head{background:transparent}
.tlrow.open:hover{background:var(--panel3)}
.tlrow.open:hover .tlrow-head{background:transparent}
.tlrow-left{flex:1;min-width:0}
.tlarea{font-size:13.5px;font-weight:600;line-height:1.3;margin-bottom:3px}
.tlsubcounty{font-size:10px;color:var(--muted);font-family:'Space Mono',monospace}
.tltime{font-family:'Space Mono',monospace;font-size:10px;color:var(--amber);flex-shrink:0;font-weight:700}
.tlrow-body{padding:0 9px 11px}
.tl-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.tl-tag{font-size:10px;background:var(--panel);border:1px solid var(--border);border-radius:5px;padding:3px 7px;color:var(--muted)}
.tl-tag-hosp{background:var(--rbg);border-color:var(--rb);color:var(--red)}
.tl-tag-school{background:var(--bbg);border-color:rgba(84,187,255,.25);color:var(--blue)}

/* ── FAQ block (AEO) ── */
.faq-block{margin-top:10px}
.faq-item{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r2);margin-bottom:8px;overflow:hidden}
.faq-q{width:100%;text-align:left;padding:15px 16px;font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--text)}
.faq-q .lucide{color:var(--muted);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q .lucide{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:220px}
.faq-a-inner{padding:0 16px 15px;font-size:13px;color:var(--muted);line-height:1.6}

/* ── watchlist / reports pages ── */
.wl-add-row{display:flex;gap:10px;margin-bottom:18px}
.wl-add-row input{flex:1;background:var(--panel);border:1.5px solid var(--border2);border-radius:11px;padding:12px 14px;font-size:13.5px;color:var(--text);outline:none}
.wl-add-row input:focus{border-color:var(--amber)}
.wl-item{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border2);border-radius:var(--r2);padding:14px 16px;margin-bottom:8px}
.wl-item-name{font-weight:700;font-size:14px}
.wl-item-county{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;margin-top:2px}
.wl-item-status{margin-left:auto;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;padding:5px 10px;border-radius:7px;white-space:nowrap}
.wl-status-ok{background:var(--gbg);color:var(--green);border:1px solid var(--gb)}
.wl-status-active{background:var(--rbg);color:var(--red);border:1px solid var(--rb)}
.wl-status-upcoming{background:var(--abg);color:var(--amber);border:1px solid var(--ab)}
.wl-remove{color:var(--muted);padding:4px}
.wl-remove:hover{color:var(--red)}
.wl-empty{text-align:center;padding:50px 20px;color:var(--muted)}
.wl-empty .lucide{width:32px;height:32px;margin-bottom:12px;opacity:.5}

.rep-search{position:relative;margin-bottom:14px}
.rep-search-i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex}
.rep-search input{width:100%;background:var(--panel);border:1.5px solid var(--border2);border-radius:11px;padding:12px 14px 12px 40px;font-size:13.5px;color:var(--text);outline:none;transition:border-color .15s}
.rep-search input:focus{border-color:var(--teal)}
.rep-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rep-card{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r2);padding:14px}
.rep-card .rc-area{font-weight:700;font-size:14px;margin-bottom:4px}
.rep-card .rc-status{font-size:11px;font-weight:700;font-family:'Space Mono',monospace}
.rep-card .rc-status.off{color:var(--red)}.rep-card .rc-status.on{color:var(--green)}
.rep-card .rc-comment{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.rep-card .rc-meta{font-size:10px;color:var(--dim);margin-top:8px;font-family:'Space Mono',monospace}
.rep-fab{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:710;background:var(--teal);color:#042020;font-weight:700;font-size:14px;padding:14px 24px;border-radius:30px;box-shadow:0 6px 20px rgba(0,0,0,.3);display:none;align-items:center;gap:8px;white-space:nowrap}

/* ── modals (report form etc — same as original) ── */
.report-modal-ovl{display:none;position:fixed;inset:0;z-index:840;background:rgba(0,0,0,.75);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px}
.report-modal-ovl.on{display:flex}

/* ── push notification permission modal ── */
.push-modal-ovl{display:none;position:fixed;inset:0;z-index:840;background:rgba(0,0,0,.75);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px}
.push-modal-ovl.on{display:flex}
.push-modal{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:30px 24px;width:100%;max-width:360px;text-align:center;animation:modalIn .3s cubic-bezier(.16,1,.3,1)}
.push-modal-icon{width:56px;height:56px;border-radius:16px;background:var(--abg);border:1px solid var(--ab);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px}
.push-modal-title{font-family:'Hilmar','Inter',sans-serif;font-size:19px;margin-bottom:8px}
.push-modal-body{font-size:13px;color:var(--muted);line-height:1.65;margin-bottom:18px}
.push-modal-body strong{color:var(--text)}
.push-modal-yes{width:100%;padding:14px;background:var(--amber);color:#1a1209;border-radius:12px;font-weight:700;font-size:14px;margin-bottom:8px;transition:filter .15s}
.push-modal-yes:hover{filter:brightness(1.05)}
.push-modal-no{width:100%;padding:9px;background:transparent;font-size:12px;color:var(--muted)}
.report-modal{background:var(--panel);border:1px solid var(--border2);border-radius:var(--r3);padding:24px;width:100%;max-width:420px;max-height:92vh;overflow-y:auto;animation:modalIn .3s cubic-bezier(.16,1,.3,1)}
.rm-eyebrow{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.rm-title{font-family:'Hilmar','Inter',sans-serif;font-size:21px;margin-bottom:5px}
.rm-sub{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.rm-field{margin-top:16px}
.rm-label{display:block;font-weight:700;font-size:13px;margin-bottom:8px}
.rm-search{position:relative}
.rm-search input{width:100%;border:1.5px solid var(--border2);border-radius:11px;padding:13px 46px 13px 14px;font-size:14px;font-weight:500;background:var(--bg2);outline:none;color:var(--text)}
.rm-search input:focus{border-color:var(--teal)}
.rm-loc-icon{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:9px;background:var(--tbg);color:var(--teal);display:flex;align-items:center;justify-content:center;transition:all .15s}
.rm-loc-icon.got{background:var(--gbg);color:var(--green)}
.rm-seg{display:flex;gap:8px}
.rm-seg button{flex:1;padding:13px;border:1px solid var(--border2);background:var(--bg2);border-radius:11px;font-weight:700;font-size:13px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s}
.rm-seg button.sel.off{background:var(--rbg);color:var(--red);border-color:var(--rb)}
.rm-seg button.sel.on{background:var(--gbg);color:var(--green);border-color:var(--gb)}
.rm-textarea{width:100%;border:1.5px solid var(--border2);border-radius:11px;padding:13px;font-size:13.5px;background:var(--bg2);outline:none;color:var(--text);resize:none;min-height:64px}
.rm-charc{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);text-align:right;margin-top:5px}
.rm-err{color:var(--red);font-size:11.5px;font-weight:600;margin-top:6px;display:none}
.rm-err.on{display:block}
.rm-terms{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:12px;color:var(--muted);line-height:1.45;cursor:pointer}
.rm-terms input{margin-top:2px;width:16px;height:16px;accent-color:var(--teal);flex-shrink:0}

.wl-toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(10px);z-index:750;background:var(--panel2);border:1px solid var(--border2);border-radius:10px;padding:11px 18px;font-size:12px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;font-family:'Space Mono',monospace;letter-spacing:.3px}
.wl-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.install-banner{display:none;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--ab);border-radius:var(--r3);padding:14px 16px;margin-bottom:18px}
.install-banner.on{display:flex}
.install-banner .ib-icon{width:40px;height:40px;border-radius:11px;background:var(--abg);color:var(--amber);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.install-banner .ib-txt{flex:1;font-size:13px;font-weight:600}
.install-banner .ib-yes{background:var(--amber);color:#1a1209;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px}
.install-banner .ib-no{background:transparent;color:var(--muted);font-size:13px;font-weight:600}

footer{border-top:1px solid var(--border);padding:24px 20px;text-align:center;font-size:10px;color:var(--dim);font-family:'Space Mono',monospace;letter-spacing:.5px;text-transform:uppercase}
footer .foot-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;text-transform:none;letter-spacing:0}
footer .foot-links a{color:var(--muted)}
footer .foot-links a:hover{color:var(--amber)}

/* ── evergreen article pages (history, how-to) ── */
.article{max-width:760px;margin:0 auto;padding:8px 20px 40px}
.article h1{font-size:clamp(26px,5vw,38px);margin-bottom:10px}
.article .article-meta{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:24px}
.article h2{font-size:20px;margin:28px 0 10px}
.article p{color:var(--text);opacity:.9;margin-bottom:14px;line-height:1.7}
.article ul,.article ol{margin:0 0 14px 20px;line-height:1.7}
.article a{text-decoration:underline}

@media(min-width:769px){.dtabs{display:flex}}
@media(max-width:900px){.upcoming-layout{grid-template-columns:1fr}}
@media(max-width:768px){.bnav{display:flex}body{padding-bottom:70px}.wl-toast{bottom:78px}#map{height:320px}.hero-status-row{grid-template-columns:1fr}#tab-reports .rep-fab,.reports-page .rep-fab{display:flex}.hr{margin-left:auto}.rr-grid{grid-template-columns:1fr}.rr-nat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hero{padding:16px 14px 0}.wrap{padding:0 14px 16px}.crumbs{padding:12px 14px 0}.hero-headline{font-size:clamp(28px,10vw,42px)}}
@media(max-width:400px){header{padding:0 12px}.hbrand span{display:none}.hero-headline{font-size:clamp(24px,11vw,36px)}}