:root {
  --bg: #f4f2ee;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --ink: #1d1f23;
  --ink-2: #5d626b;
  --ink-3: #8b9099;
  --rule: rgba(20, 22, 26, 0.1);
  --halo: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);
  --chip-open: #1f7a46;  --chip-open-bg: #e3f3e9;
  --chip-soon: #9a5b00;  --chip-soon-bg: #fdf0d8;
  --chip-build: #3c5a8a; --chip-build-bg: #e5edf8;
  --chip-plan: #6a6f78;  --chip-plan-bg: #eeeef0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a;
    --surface: rgba(28, 31, 36, 0.92);
    --surface-solid: #1c1f24;
    --ink: #eceef1;
    --ink-2: #a5abb5;
    --ink-3: #737a85;
    --rule: rgba(255, 255, 255, 0.1);
    --halo: #14161a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --chip-open: #7fd6a2;  --chip-open-bg: rgba(64, 180, 110, .16);
    --chip-soon: #f2c46d;  --chip-soon-bg: rgba(230, 170, 60, .16);
    --chip-build: #9dbcf0; --chip-build-bg: rgba(110, 150, 230, .16);
    --chip-plan: #a5abb5;  --chip-plan-bg: rgba(255, 255, 255, .07);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #14161a;
  --surface: rgba(28, 31, 36, 0.92);
  --surface-solid: #1c1f24;
  --ink: #eceef1;
  --ink-2: #a5abb5;
  --ink-3: #737a85;
  --rule: rgba(255, 255, 255, 0.1);
  --halo: #14161a;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --chip-open: #7fd6a2;  --chip-open-bg: rgba(64, 180, 110, .16);
  --chip-soon: #f2c46d;  --chip-soon-bg: rgba(230, 170, 60, .16);
  --chip-build: #9dbcf0; --chip-build-bg: rgba(110, 150, 230, .16);
  --chip-plan: #a5abb5;  --chip-plan-bg: rgba(255, 255, 255, .07);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.4 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
#map { position: fixed; inset: 0; background: var(--bg); }
a { color: inherit; }

.card {
  position: fixed;
  z-index: 1000;
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.title {
  top: calc(16px + env(safe-area-inset-top));
  left: 16px;
  padding: 10px 14px 9px;
}
.title h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.title p { margin: 1px 0 0; font-size: 12px; color: var(--ink-2); }

.iconbtn {
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.iconbtn svg { width: 20px; height: 20px; }

/* Lines panel: right column on wide screens, bottom sheet on phones */
.panel {
  top: calc(72px + env(safe-area-inset-top));
  right: 16px;
  width: 340px;
  max-height: calc(100% - 88px - env(safe-area-inset-top));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.panel-head {
  all: unset;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
}
.panel-head .key { flex: 1; display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.k { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--ink-2); margin-left: 6px; border-radius: 2px; }
.k-build { border-top-style: dashed; }
.k-plan { border-top-style: dotted; }
.chev { color: var(--ink-3); transition: transform .2s; flex: none; }
.panel.collapsed .chev { transform: rotate(180deg); }
.panel.collapsed .lines, .panel.collapsed .foot { display: none; }
.panel.collapsed .panel-head { border-bottom: 0; }

.lines { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.line { padding: 8px 14px; cursor: pointer; border-left: 3px solid transparent; }
.line:hover { background: var(--rule); }
.line.active { border-left-color: var(--c); background: var(--rule); }
.line-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--c); flex: none; }
.sec { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0 22px; font-size: 12.5px; color: var(--ink-2); }
.sec-name { flex: 1; min-width: 0; }
.chip { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
.chip.open { color: var(--chip-open); background: var(--chip-open-bg); }
.chip.soon { color: var(--chip-soon); background: var(--chip-soon-bg); }
.chip.construction { color: var(--chip-build); background: var(--chip-build-bg); }
.chip.approved, .chip.proposed { color: var(--chip-plan); background: var(--chip-plan-bg); }
.foot { margin: 0; padding: 10px 14px 12px; font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--rule); }

@media (max-width: 640px) {
  .panel {
    top: auto; right: 16px; left: 16px; width: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    max-height: 46%;
  }
  .panel-head .key { font-size: 10.5px; }
}

/* MapLibre overrides */
.maplibregl-canvas:focus { outline: none; }
.maplibregl-popup-content {
  background: var(--surface-solid); color: var(--ink);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: 12px 30px 12px 14px; font: 13px/1.4 Inter, system-ui, sans-serif;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface-solid); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface-solid); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-solid); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-solid); }
.maplibregl-popup-close-button { color: var(--ink-3); font-size: 20px; width: 30px; height: 30px; }
.maplibregl-popup-close-button:hover { background: transparent; color: var(--ink); }
.pop h3 { margin: 0 0 4px; font-size: 15px; }
.pop .row { display: flex; gap: 8px; align-items: flex-start; }
.pop .row + .row { margin-top: 8px; }
.pop .row .swatch { margin-top: 3px; }
.pop .row b { font-weight: 600; }
.pop .row small { display: block; color: var(--ink-2); font-size: 12px; }
.pop .row small.note { color: var(--ink-3); margin-top: 2px; }