:root{
  --ink:#1a1d21; --ink-2:#2b2f33; --line:#e3e6ea; --bg:#f5f6f8;
  --accent:#c0772e; --accent-d:#9c5e20; --white:#fff; --muted:#6b7178;
  --p-shingle:#b0573a; --p-slate:#3f5566; --p-cedar-shingle:#c08a3e;
  --p-cedar-shake:#8a6a2f; --p-tile:#a8432e; --p-standing-seam:#2e7d8f;
  --hdr:56px; --panel:312px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
body{display:flex;flex-direction:column;height:100vh;overflow:hidden}

.topbar{height:var(--hdr);flex:0 0 var(--hdr);background:linear-gradient(135deg,#2a2f3d,#1f2330 55%,#181b25);color:#fff;display:flex;align-items:center;gap:16px;padding:0 18px;z-index:30;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{height:30px;width:auto;display:block}
.wordmark{font-weight:800;letter-spacing:.16em;font-size:18px}
.sub{color:var(--accent);font-weight:600;font-size:13px;letter-spacing:.04em}
.tagline{margin:0;font-size:13px;color:#c8ccd1}
.tagline strong{color:#fff}
.topnav{margin-left:auto;display:flex;gap:16px;font-size:13.5px;font-weight:500}
.topnav a{color:#fff;text-decoration:none}
.topnav a:hover{color:var(--accent)}
.panel-toggle{display:none;margin-left:auto;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:8px 12px;font-weight:600;cursor:pointer}

.layout{flex:1;display:flex;min-height:0}
.panel{flex:0 0 var(--panel);width:var(--panel);background:#fff;border-right:1px solid var(--line);overflow:hidden;z-index:20}
.panel-scroll{height:100%;overflow-y:auto;padding:16px}
.field input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.facet{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.facet:first-of-type{border-top:0}
.facet h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.opts{display:flex;flex-direction:column;gap:7px}
.opts.row{flex-direction:row;gap:8px}
.opts.scroll{max-height:188px;overflow-y:auto;padding-right:4px}
label.opt{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer;user-select:none}
label.opt input{accent-color:var(--accent);margin:0}
.opt .sw{width:12px;height:12px;border-radius:3px;flex:0 0 12px}
.opt .cnt{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.opt.pill{border:1px solid var(--line);border-radius:20px;padding:6px 12px;flex:1;justify-content:center}
.opt.pill input{display:none}
.opt.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.yearwrap{position:relative}
.yearwrap input[type=range]{width:100%}
.yearlabel{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.reset{margin-top:18px;width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px;font-weight:600;color:var(--ink-2);cursor:pointer}
.reset:hover{border-color:var(--accent);color:var(--accent)}
.note{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--muted)}

.mapwrap{position:relative;flex:1;min-width:0}
#map{position:absolute;inset:0}
.legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12px;display:flex;flex-wrap:wrap;gap:8px 14px;max-width:60%;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.legend .li{display:flex;align-items:center;gap:6px}
.legend .sw{width:10px;height:10px;border-radius:3px}

.seo-summary{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.maplibregl-popup-content{font-family:inherit;border-radius:10px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.pop h4{margin:0 0 4px;font-size:14px}
.pop .chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;color:#fff;margin-bottom:6px}
.pop .meta{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.pop .anon{font-size:11px;color:var(--muted);margin-top:6px}

.modeswitch{position:absolute;top:12px;left:12px;z-index:6;display:flex;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.modebtn{border:0;background:#fff;padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer}
.modebtn+.modebtn{border-left:1px solid var(--line)}
.modebtn.on{background:var(--ink);color:#fff}

@media(max-width:760px){
  .tagline{display:none}
  .topnav{display:none}
  .panel-toggle{display:block}
  .panel{position:absolute;top:var(--hdr);bottom:0;left:0;transform:translateX(-100%);transition:transform .2s;box-shadow:2px 0 16px rgba(0,0,0,.18)}
  .panel.open{transform:none}
  .legend{max-width:80%}
}