/* Layout: full-bleed dark map canvas, one floating instrument panel (left on desktop, bottom sheet on phones). */
:root{
  --map:#0d0f14;
  --panel:rgba(250,249,246,.95);
  --fg:#1a1c21;
  --muted:#5c616d;
  --line:#dcdcd5;
  --chip:#ecebe5;
  --accent:#d9481c;
  --font-ui:"Geologica",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --panel:rgba(22,24,30,.94);--fg:#ecebe6;--muted:#9a9ea9;--line:#2d313b;--chip:#242730;--accent:#f7883a;color-scheme:dark}}
:root[data-theme="dark"]{--panel:rgba(22,24,30,.94);--fg:#ecebe6;--muted:#9a9ea9;--line:#2d313b;--chip:#242730;--accent:#f7883a;color-scheme:dark}
html,body{height:100%}
body{margin:0;background:var(--map);color:var(--fg);font-family:var(--font-ui);font-size:14px;overflow:hidden}
#map{position:absolute;inset:0}
.panel{position:absolute;top:16px;left:16px;width:376px;max-height:calc(100% - 32px);overflow:auto;box-sizing:border-box;
  background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:10px;padding:14px 18px;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.28);z-index:2}

/* top-right bar: sample switcher + Mapflow link */
.topbar{position:absolute;top:16px;right:16px;z-index:3;display:flex;align-items:center;gap:6px;max-width:calc(100% - 32px);
  box-sizing:border-box;padding:5px;background:var(--panel);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.28)}
.samples{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none}
.samples::-webkit-scrollbar{display:none}
.samples a{display:flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:6px;white-space:nowrap;
  color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;line-height:1.2}
.samples a span{font-size:11px;font-weight:400;opacity:.85}
.samples a:hover{color:var(--fg);background:var(--chip)}
.samples a[aria-current="page"]{background:var(--fg);color:var(--panel)}
.brand{display:flex;align-items:center;gap:8px;flex:none;padding:6px 10px 6px 12px;margin-left:2px;border-left:1px solid var(--line);
  color:var(--fg);text-decoration:none}
.brand svg{height:22px;width:auto;display:block}
.brand-url{font:500 11px/1 var(--font-num);color:var(--muted);letter-spacing:.02em}
.brand:hover .brand-url{color:var(--accent)}
.samples a:focus-visible,.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-family:var(--font-num)}
h1{margin:4px 0 0;font-size:22px;font-weight:700;line-height:1.15;text-wrap:balance}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font-family:var(--font-num);font-weight:500;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat span{font-size:11px;color:var(--muted);line-height:1.3}
.ctl{display:flex;flex-direction:column;gap:6px}
.ctl-label{font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--chip);border-radius:7px;padding:3px;gap:3px}
.seg button{font:500 13px/1.2 var(--font-ui);color:var(--muted);background:transparent;border:0;border-radius:5px;padding:7px 8px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.seg button:focus-visible,.chk input:focus-visible,.dl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.chk input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.legend-bar{display:grid;grid-template-columns:repeat(9,1fr);height:12px;border-radius:3px;overflow:hidden}
.legend-ticks{position:relative;height:14px;font:400 10px/14px var(--font-num);color:var(--muted)}
.legend-ticks span{position:absolute;transform:translateX(-50%);top:0;font-variant-numeric:tabular-nums}
.hover{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px;min-height:118px}
.hover-empty{font-size:13px;color:var(--muted)}
.hover-big{display:flex;align-items:baseline;gap:8px}
.hover-big b{font:500 26px/1 var(--font-num);font-variant-numeric:tabular-nums}
.hover-big span{font-size:12px;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
details{border-top:1px solid var(--line);padding-top:10px;font-size:12.5px;line-height:1.5}
summary{cursor:pointer;font-weight:500;font-size:13px}
details p{margin:8px 0 0;color:var(--muted);max-width:62ch}
details p b{color:var(--fg);font-weight:500}
.dl{color:var(--accent);font-weight:500}
.mono{font-family:var(--font-num);font-size:11.5px}
.maplibregl-ctrl-attrib{font-family:var(--font-ui)}
/* medium widths: the bar spans the top and the panel starts below it */
@media (max-width:980px){
  .topbar{left:16px;right:16px;max-width:none}
  .samples{flex:1}
  .panel{top:76px;max-height:calc(100% - 92px)}
}
@media (max-width:640px){
  .topbar{top:12px;left:12px;right:12px;padding:4px}
  .samples a{padding:7px 9px;font-size:13px}
  .samples a span,.brand-url{display:none}
  .brand{padding:6px 8px}
  .brand svg{height:18px}
  .panel{top:auto;bottom:16px;left:16px;right:16px;width:auto;max-height:50%;padding:12px 14px;gap:12px}
  h1{font-size:19px}
  .hover{min-height:0}
  .maplibregl-ctrl-bottom-right{top:60px;bottom:auto}
  .maplibregl-ctrl-attrib{max-width:calc(100vw - 72px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}