:root {
  color-scheme: light;
  --surface: #fcfcfb; --plane: #f9f9f7;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7;
  --border: rgba(11,11,11,.10);
  --accent: #2a78d6;
  --s1:#b7d3f6; --s2:#86b6ef; --s3:#5598e7; --s4:#2a78d6; --s5:#1c5cab; --s6:#0d366b;
  --street-lo:#5598e7; --street-hi:#0d366b;
}
@media (prefers-color-scheme: dark) {
  .basemap { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
  :root {
    color-scheme: dark;
    --surface:#1a1a19; --plane:#0d0d0d;
    --ink:#fff; --ink-2:#c3c2b7; --muted:#898781; --grid:#2c2c2a; --axis:#383835;
    --border: rgba(255,255,255,.10);
    --accent:#3987e5;
    --s1:#1c5cab; --s2:#2a78d6; --s3:#3987e5; --s4:#6da7ec; --s5:#9ec5f4; --s6:#cde2fb;
    --street-lo:#3987e5; --street-hi:#cde2fb;
  }
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--plane); }
#app { display:grid; grid-template-columns: 360px 1fr; height:100%; }
#panel { background: var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding: 16px 18px 24px; display:flex; flex-direction:column; gap:14px; }
#map { height:100%; min-height:300px; background: var(--plane); }
h1 { font-size: 18px; margin:0 0 4px; letter-spacing:-.01em; }
h2 { font-size: 15px; margin: 0 0 2px; }
.sub { margin:0; color: var(--ink-2); font-size: 13px; line-height:1.4; }
.muted { color: var(--muted); font-size: 12px; margin:0; }
.filters { display:flex; flex-direction:column; gap:8px; }
.row { display:flex; gap:8px; align-items:center; }
.row label { font-size:12px; color: var(--ink-2); display:flex; align-items:center; gap:6px; flex:1; }
select, input[type=search] { font: inherit; font-size:13px; color: var(--ink); background: var(--plane); border:1px solid var(--border); border-radius:6px; padding:6px 8px; width:100%; }
input[type=search]:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }
.seg { border:1px solid var(--border); border-radius:6px; overflow:hidden; gap:0; }
.segbtn { flex:1; font:inherit; font-size:13px; padding:6px 0; border:0; background: transparent; color: var(--ink-2); cursor:pointer; }
.segbtn + .segbtn { border-left:1px solid var(--border); }
.segbtn.is-on { background: var(--accent); color:#fff; font-weight:600; }
.results { list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:6px; max-height:200px; overflow:auto; background: var(--surface); }
.results li { padding:6px 10px; font-size:13px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; }
.results li:hover, .results li:focus { background: var(--plane); outline:none; }
.results .cnt { color: var(--muted); font-variant-numeric: tabular-nums; }
.legend { font-size:12px; color: var(--ink-2); }
.legend .ramp { display:flex; height:10px; border-radius:4px; overflow:hidden; margin:6px 0 4px; border:1px solid var(--border); }
.legend .ramp span { flex:1; }
.legend .ticks { display:flex; justify-content:space-between; font-variant-numeric: tabular-nums; color: var(--muted); }
.legend .line { display:inline-block; width:28px; height:0; border-top:3px solid var(--street-hi); vertical-align:middle; margin-right:6px; border-radius:2px; }
.legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; background: var(--s4); opacity:.7; vertical-align:middle; margin-right:6px; }
.legend p { margin:4px 0; }
.detail { border-top:1px solid var(--border); padding-top:12px; }
.chart svg { width:100%; height:auto; display:block; margin-top:8px; }
.chart .bar { fill: var(--s4); }
.chart .bar:hover, .chart .bar:focus { fill: var(--s5); outline:none; }
.chart text { font-family: inherit; font-size: 10px; fill: var(--muted); }
.chart .val { fill: var(--ink-2); font-weight:600; }
.chart .axis { stroke: var(--axis); stroke-width:1; }
.kv { display:grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size:13px; margin: 8px 0; }
.kv dt { color: var(--muted); } .kv dd { margin:0; font-variant-numeric: tabular-nums; }
.hero { font-size: 28px; font-weight:600; letter-spacing:-.02em; line-height:1.1; margin: 6px 0 0; }
.hero small { font-size: 12px; font-weight:400; color: var(--muted); margin-left:6px; }
.list { list-style:none; margin:6px 0 0; padding:0; }
.list li { display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:4px 0; border-top:1px solid var(--grid); cursor:pointer; }
.list li:hover { color: var(--accent); }
.list li .cnt { color: var(--muted); font-variant-numeric: tabular-nums; }
.list li .en { color: var(--muted); font-size:11px; display:block; }
.dates { font-size:12px; color: var(--ink-2); line-height:1.6; }
.dates span { display:inline-block; margin-right:8px; font-variant-numeric: tabular-nums; }
h3 { font-size:12px; text-transform: uppercase; letter-spacing:.04em; color: var(--muted); margin: 14px 0 2px; font-weight:600; }
.about { margin-top:auto; font-size:12px; color: var(--ink-2); line-height:1.45; }
.about summary { cursor:pointer; font-weight:600; color: var(--ink-2); }
.about table { border-collapse: collapse; margin: 6px 0; font-variant-numeric: tabular-nums; }
.about td, .about th { padding: 1px 8px 1px 0; text-align:right; font-weight:normal; }
.about th:first-child, .about td:first-child { text-align:left; }
.tip { position:fixed; z-index:1000; pointer-events:none; background: var(--surface); color: var(--ink); border:1px solid var(--border); border-radius:6px; padding:6px 9px; font-size:12px; box-shadow: 0 2px 10px rgba(0,0,0,.15); max-width: 260px; }
.tip b { font-size:14px; }
.tip .l { color: var(--muted); }
.leaflet-container { font: inherit; background: var(--plane); }
.basemap { filter: saturate(.35) contrast(.95); }
.leaflet-control-attribution { font-size:10px; }
.dlabel { background:none; border:0; box-shadow:none; color: var(--ink); font-weight:600; font-size:12px; text-align:center; text-shadow: 0 0 3px var(--surface), 0 0 3px var(--surface), 0 0 6px var(--surface); white-space:nowrap; pointer-events:none; }
.dlabel small { display:block; font-weight:400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.btnlink { font:inherit; font-size:12px; color: var(--accent); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; }
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr 46vh; }
  #panel { order:2; border-right:0; border-top:1px solid var(--border); }
  #map { order:1; }
}