:root {
  --bg:#fff; --fg:#1f2328; --muted:#636c76; --line:#d0d7de; --panel:#f6f8fa; --link:#0a5bd8; --accent:#0a5bd8;
  --st-operational:#1a7f37; --st-under_construction:#d4a017; --st-permitted:#bf5f00; --st-announced:#8250df; --st-cancelled:#8c959f; --st-unknown:#6e7781;
  --header-h:48px; --panel-w:340px;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { font:14px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--link); }
header.top { height:var(--header-h); display:flex; align-items:center; gap:18px; padding:0 16px; border-bottom:1px solid var(--line); background:#fff; position:relative; z-index:5; white-space:nowrap; overflow-x:auto; }
header.top .brand { font-weight:700; font-size:17px; letter-spacing:-0.01em; text-decoration:none; color:var(--fg); }
header.top .brand-accent { color:var(--link); }
header.top nav a { margin-right:14px; text-decoration:none; color:var(--muted); }
header.top nav a[aria-current="page"] { color:var(--fg); font-weight:600; }
header.top .spacer { flex:1; }
header.top .updated { color:var(--muted); font-size:12px; }
main.page { max-width:1000px; margin:0 auto; padding:24px 20px 80px; }
main.page h1 { font-size:24px; margin:0 0 6px; }
main.page h2 { font-size:18px; margin:30px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--line); }
table { border-collapse:collapse; width:100%; font-size:13.5px; margin:8px 0 16px; }
th, td { border-bottom:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:12.5px; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar { display:block; height:8px; background:var(--accent); border-radius:2px; min-width:1px; }
.muted { color:var(--muted); } .small { font-size:12px; }
code { background:var(--panel); padding:1px 5px; border-radius:4px; font-size:12.5px; }
.ad-slot { display:none; border:1px dashed var(--line); color:var(--muted); font-size:11px; text-align:center; padding:8px; margin:12px 0; }  /* reserved; shown only once ads are introduced */
.badge { display:inline-block; font-size:11px; padding:1px 7px; border-radius:10px; border:1px solid var(--line); color:var(--muted); margin-right:4px; }
.badge.status { color:#fff; border:0; }
/* map page */
.map-wrap { position:absolute; top:var(--header-h); left:0; right:0; bottom:0; }
#map { position:absolute; inset:0; }
#panel { position:absolute; top:0; left:0; bottom:0; width:var(--panel-w); background:rgba(255,255,255,.97); border-right:1px solid var(--line); overflow:auto; z-index:3; display:flex; flex-direction:column; }
#panel section { padding:12px 14px; border-bottom:1px solid var(--line); }
#panel h2 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 8px; }
#panel label { display:block; margin:3px 0; }
#panel input[type=text], #panel select { width:100%; padding:5px 7px; border:1px solid var(--line); border-radius:4px; font:inherit; }
.chips label { display:inline-flex; align-items:center; gap:4px; margin:2px 8px 2px 0; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
#summary { font-size:13px; color:var(--muted); }
#detail { position:absolute; top:0; right:0; bottom:0; width:var(--panel-w); background:#fff; border-left:1px solid var(--line); overflow:auto; z-index:3; padding:14px; display:none; }
#detail.open { display:block; }
#detail h2 { font-size:17px; margin:0 32px 4px 0; }
#detail dl { display:grid; grid-template-columns:110px 1fr; gap:4px 10px; font-size:13px; margin:12px 0; }
#detail dt { color:var(--muted); } #detail dd { margin:0; overflow-wrap:anywhere; }
#detail .close { position:absolute; top:8px; right:10px; border:0; background:none; font-size:20px; cursor:pointer; color:var(--muted); }
#toggle-panel { display:none; position:absolute; top:8px; left:8px; z-index:4; background:#fff; border:1px solid var(--line); border-radius:4px; padding:6px 10px; font:inherit; }
.attrib { position:absolute; right:0; bottom:0; z-index:2; background:rgba(255,255,255,.85); font-size:11px; padding:2px 6px; color:var(--muted); }
.maplibregl-ctrl-attrib { display:none; }
button.link { background:none; border:0; color:var(--link); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
@media (max-width:768px) {
  :root { --panel-w:100%; }
  #panel { transform:translateX(-100%); transition:transform .2s; }
  #panel.open { transform:none; }
  #toggle-panel { display:block; }
  #panel section:first-child { padding-top:46px; }
  header.top { gap:12px; padding:0 12px; } header.top nav a { margin-right:10px; } header.top .updated { display:none; }
  #detail { top:40%; width:100%; border-left:0; border-top:1px solid var(--line); }
  #detail dl { grid-template-columns:90px 1fr; }
}

/* environment section */
#detail .env { margin-top:14px; padding-top:10px; border-top:1px solid var(--line); }
#detail .env h3 { font-size:14px; margin:0 0 6px; }
.mixbar { display:flex; height:10px; width:100%; border-radius:3px; overflow:hidden; background:#eee; margin:2px 0 4px; }
.mixbar span { display:block; height:100%; }
.legend { display:flex; flex-wrap:wrap; gap:2px 10px; margin:6px 0 8px; font-size:12px; color:var(--muted); }
.legend .lg { display:inline-flex; align-items:center; gap:4px; }
ul.plain { margin:0; padding-left:16px; }