/* LEYLINE Intel map. Cartographer's night palette. */
:root {
  --bg: #0a1017;
  --panel: #101b26;
  --line: #22384a;
  --ink: #c9d8e4;
  --muted: #6e8598;
  --concord: #46d5c8;
  --emberwake: #f0a24b;
  --verdant: #8ccb5e;
  --static: #9a8fc0;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  overflow: hidden;
}
.topbar {
  position: fixed; inset: 0 0 auto 0; height: 52px; z-index: 1200;
  display: flex; align-items: center; gap: 28px; padding: 0 18px;
  background: linear-gradient(180deg, rgba(10,16,23,.96), rgba(10,16,23,.82));
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: 20px; letter-spacing: .18em; color: var(--ink);
}
.wordmark span { color: var(--concord); }
.wordmark em { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .3em; margin-left: 8px; }
.pressure { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 460px; }
.pressure label { font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.gauge {
  flex: 1; height: 8px; background: #0f1722; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
#gauge-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: repeating-linear-gradient(135deg, var(--static) 0 6px, #6f6690 6px 12px);
  transition: width 1.2s ease;
}
#pressure-val { color: var(--static); font-weight: 600; min-width: 52px; }
.clock { margin-left: auto; color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.rail {
  position: fixed; top: 52px; left: 0; bottom: 0; width: 250px; z-index: 1100;
  background: rgba(16,27,38,.94); border-right: 1px solid var(--line);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 20px;
}
.rail h2 {
  font-family: "Chakra Petch", sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .24em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px;
}
.scores { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.scores li { display: flex; align-items: center; gap: 8px; }
.scores li b { margin-left: auto; font-weight: 600; }
.scores i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.scores li[data-f="concord"] i { background: var(--concord); }
.scores li[data-f="emberwake"] i { background: var(--emberwake); }
.scores li[data-f="verdant"] i { background: var(--verdant); }
.scores li[data-f="static"] i { background: var(--static); }
.toggle { display: block; padding: 4px 0; color: var(--ink); cursor: pointer; }
.toggle input { accent-color: var(--concord); margin-right: 8px; }
#detail p { color: var(--muted); line-height: 1.5; }
#detail .name { color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.rail footer { margin-top: auto; font-size: 10px; color: var(--muted); }
#map { position: fixed; inset: 52px 0 0 250px; background: var(--bg); }
.leaflet-container { background: var(--bg); font-family: "IBM Plex Mono", monospace; }
.leaflet-control-attribution { background: rgba(10,16,23,.7) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
@media (max-width: 760px) {
  .rail { display: none; }
  #map { inset: 52px 0 0 0; }
  .pressure label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #gauge-fill { transition: none; }
}