:root {
  --bg: #0b0b0b;
  --panel: rgba(17, 17, 16, 0.92);
  --fg: #f5f5f2;
  --mut: #8a8a85;
  --dim: #4a4a47;
  --rule: #232321;
  --fire: #ff5a1f;
  --fire-lo: #ffb347;
  --front: #c0463c;
  --ghost: #d9d4c7;
  --tag: #e8b04a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 14px/1.45 Geist, system-ui, sans-serif; overflow: hidden; }
#map { position: fixed; inset: 0; }

h1, h2 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
p { margin: 0; }
.mut { color: var(--mut); }
.small { font-size: 12px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.panel {
  position: fixed; top: 16px; left: 16px; width: 340px; max-height: calc(100% - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 16px;
  display: grid; gap: 14px; backdrop-filter: blur(6px);
}
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lede { color: #c9c9c4; }
.ghost-btn { font: 500 12px Geist Mono, monospace; color: var(--mut); padding: 4px 8px; border: 1px solid var(--rule); border-radius: 6px; }
.ghost-btn:hover { color: var(--fg); border-color: var(--dim); }

.big { display: flex; align-items: baseline; gap: 10px; }
.num { font: 500 40px/1 Geist Mono, monospace; letter-spacing: -0.03em; color: var(--fire); font-variant-numeric: tabular-nums; }
.unit { color: var(--mut); }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { padding: 7px 0; font: 500 12px Geist Mono, monospace; color: var(--mut); }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: #1d1d1b; color: var(--fg); }

#panel-body { display: grid; gap: 14px; }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 12px Geist Mono, monospace; }
.tag { color: var(--tag); border: 1px solid rgba(232, 176, 74, 0.35); border-radius: 4px; padding: 2px 6px; cursor: help; }

.layers { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.layers legend { font: 500 11px Geist Mono, monospace; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; padding: 0; }
.layers label { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #d6d6d1; }
.layers input { accent-color: var(--fire); margin: 0; }
.sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex: none; }
.sw-fire { background: var(--fire); }
.sw-other { background: var(--mut); opacity: 0.6; }
.sw-front { background: rgba(192, 70, 60, 0.35); border: 1px solid var(--front); }
.sw-ghost { border: 1px dashed var(--ghost); }

.actions { display: flex; gap: 16px; }
.link { color: var(--fg); text-decoration: underline; text-decoration-color: var(--dim); text-underline-offset: 3px; padding: 0; }
.link:hover { text-decoration-color: var(--fg); }

.drawer {
  position: fixed; left: 372px; right: 16px; bottom: 36px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px;
}
.drawer[hidden] { display: none; }
.chart { height: 140px; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart .bar { fill: var(--fire); }
.chart .bar:hover { fill: var(--fire-lo); }
.chart text { fill: var(--mut); font: 11px Geist Mono, monospace; }
.chart .axis { stroke: var(--rule); }
.chart .empty { fill: var(--mut); font: 12px Geist, sans-serif; }

dialog {
  max-width: 560px; width: calc(100% - 32px); background: #111110; color: var(--fg);
  border: 1px solid var(--rule); border-radius: 12px; padding: 20px; display: none;
}
dialog[open] { display: grid; gap: 12px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog p { color: #d0d0cb; }
dialog form { display: flex; justify-content: flex-end; }

.attrib {
  position: fixed; right: 0; bottom: 0; padding: 4px 8px; font: 11px Geist, sans-serif; color: var(--mut);
  background: rgba(11, 11, 11, 0.75); border-top-left-radius: 6px;
}
.attrib a { color: var(--mut); }
.maplibregl-ctrl-attrib { display: none; }
.maplibregl-ctrl-group { background: #161615; }
.maplibregl-ctrl-group button + button { border-top-color: var(--rule); }
.maplibregl-ctrl-icon { filter: invert(1) brightness(0.8); }

.maplibregl-popup-content { background: #161615; color: var(--fg); font: 12px Geist Mono, monospace; padding: 8px 10px; border: 1px solid var(--rule); }
.maplibregl-popup-tip { border-top-color: #161615 !important; border-bottom-color: #161615 !important; }

@media (max-width: 640px) {
  .panel { top: 8px; left: 8px; right: 8px; width: auto; padding: 12px; gap: 10px; max-height: 70%; }
  .lede { font-size: 13px; }
  .num { font-size: 30px; }
  .panel.collapsed .lede, .panel.collapsed #panel-body { display: none; }
  .drawer { left: 8px; right: 8px; bottom: 28px; }
  .attrib { font-size: 10px; }
}