:root {
  /* Overwritten from app.js per basemap; kept in sync with PALETTE.light. */
  --ev: #eb6834;
  --gas: #2a78d6;
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #6b7280;
  --line: #e3e6ea;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--fg); }
#map { position: absolute; inset: 0; }

#panel {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  width: 296px; max-height: calc(100% - 24px); overflow-y: auto;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(16,24,40,.12);
  padding: 14px 16px 12px;
}
#panel.hidden { display: none; }
#panel h1 { font-size: 15px; margin: 0 0 12px; letter-spacing: .01em; display: flex; align-items: center; }
#panel-close { margin-left: auto; border: 0; background: none; font-size: 19px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
#panel-close:hover { color: var(--fg); }

.layer { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; font-weight: 600; }
.layer input { margin: 0; }
.lname { flex: 1; }
.count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 12px; }
.swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1.5px solid rgba(0,0,0,.2); }
.swatch.ev { background: var(--ev); }
.swatch.gas { background: var(--gas); }

.sub { margin: 6px 0 4px 20px; color: var(--muted); font-size: 12px; }
.sub label { display: block; margin: 6px 0; }
.sub input[type=range] { width: 100%; margin-top: 3px; accent-color: #374151; }
.sub select { width: 100%; margin-top: 3px; padding: 3px 4px; font: inherit; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.sub b { color: var(--fg); }

.base { display: block; margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.base select { width: 100%; margin-top: 3px; padding: 3px 4px; font: inherit; border: 1px solid var(--line); border-radius: 5px; background: #fff; }

/* Over a dark basemap the panel needs to stay fully opaque to read. */
body.dark-base #panel { background: rgba(255,255,255,.97); }
body.dark-base #panel-toggle { background: #fff; }
body.dark-base .maplibregl-ctrl-attrib { background: rgba(255,255,255,.85); }

#status { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.note { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.src { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
.src a { color: inherit; }

#panel-toggle {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  display: none; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 15px;
  box-shadow: 0 2px 8px rgba(16,24,40,.14);
}
#panel.hidden + #panel-toggle { display: block; }

.maplibregl-popup-content {
  padding: 11px 13px; border-radius: 9px; font: 13px/1.45 inherit;
  box-shadow: 0 6px 22px rgba(16,24,40,.18); max-width: 280px;
}
.pop-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.pop-kind.ev { color: var(--ev); }
.pop-kind.gas { color: var(--gas); }
.pop-name { font-weight: 650; margin: 2px 0 5px; font-size: 14px; }
.pop-row { color: #4b5563; }
.pop-row b { color: var(--fg); font-weight: 600; }
.maplibregl-popup-content a { color: #1d4ed8; }