:root {
  --bg: #070b11;
  --panel: rgba(10, 15, 23, 0.92);
  --line: rgba(120, 150, 190, 0.22);
  --ink: #dbe6f3;
  --muted: #7f93ac;
  --accent: #4ade80;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }

#map { position: absolute; inset: 0; }

#titlebar {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; backdrop-filter: blur(8px); max-width: 380px;
}
#titlebar h1 { margin: 0; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
#titlebar p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink); }
.muted { color: var(--muted); }

#console {
  position: absolute; top: 14px; right: 16px; z-index: 2; width: 296px;
  max-height: calc(100vh - 76px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; backdrop-filter: blur(8px);
}
@media (max-width: 760px) {
  #console { left: 16px; right: 16px; width: auto; top: auto; bottom: 44px; max-height: 46vh; }
  #titlebar { max-width: none; right: 16px; }
}

.row.head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
button {
  flex: 1; padding: 7px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: #131c28; color: var(--ink);
  font: inherit; font-weight: 600;
}
button:hover { border-color: rgba(120, 150, 190, 0.5); }
button.primary { background: #123524; border-color: rgba(74, 222, 128, 0.5); color: var(--accent); }
.clock { font: 12px ui-monospace, monospace; color: var(--accent); min-width: 62px; text-align: right; }

fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 10px; padding: 8px 10px 10px; }
legend { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
label { display: block; font-size: 11.5px; color: var(--muted); margin-top: 7px; }
label:first-of-type { margin-top: 2px; }
label output { float: right; color: var(--ink); font: 11px ui-monospace, monospace; }
label.check { color: var(--ink); display: flex; align-items: center; gap: 7px; }
input[type=range] { width: 100%; margin: 3px 0 0; accent-color: var(--accent); }
input[type=number] { width: 100%; margin-top: 3px; padding: 4px 6px; border-radius: 5px;
  border: 1px solid var(--line); background: #0d141d; color: var(--ink); font: 11px ui-monospace, monospace; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.stats div { background: #0d141d; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.stats b { display: block; font: 600 14px ui-monospace, monospace; }
.stats span { font-size: 10px; color: var(--muted); }

.cohorts { display: grid; gap: 5px; }
.cohort { display: grid; grid-template-columns: 10px 96px 1fr 30px; align-items: center; gap: 6px; font-size: 11px; }
.swatch { width: 9px; height: 9px; border-radius: 50%; }
.cohort .name { color: var(--muted); }
.cohort .bar { height: 5px; border-radius: 3px; background: #17212e; overflow: hidden; }
.cohort .bar i { display: block; height: 100%; }
.pctv { text-align: right; font: 10px ui-monospace, monospace; }

#credits {
  position: absolute; left: 16px; bottom: 10px; z-index: 2; max-width: 52ch;
  font-size: 10px; color: var(--muted); line-height: 1.5;
  background: rgba(7, 11, 17, 0.78); border-radius: 6px; padding: 5px 8px;
}
#credits a { color: #93b4d8; }
@media (max-width: 760px) { #credits { display: none; } }

.maplibregl-ctrl-attrib { font-size: 10px; }

/* ── multi-city console additions ─────────────────────────────────────────── */

select {
  width: 100%; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 12px;
  border: 1px solid var(--line); background: #0d141d; color: var(--ink);
}
.note { margin: 7px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--muted); }

.routes { display: grid; gap: 4px; }
button.route {
  display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center;
  gap: 7px; width: 100%; padding: 5px 7px; font-weight: 400; font-size: 11px;
  text-align: left; background: #0d141d;
}
button.route .rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.route .rlen { font: 10px ui-monospace, monospace; color: var(--muted); }
button.route .rtaken { font: 10px ui-monospace, monospace; color: var(--accent); min-width: 34px; text-align: right; }
button.route.closed { opacity: 0.42; }
button.route.closed .rname { text-decoration: line-through; }
button.route.closed .rtaken { color: var(--muted); }

.lifecycle { display: grid; gap: 4px; }
.life { display: grid; grid-template-columns: 128px 1fr 40px; align-items: center; gap: 6px; font-size: 10.5px; }
.life .lname { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.life .bar { height: 5px; border-radius: 3px; background: #17212e; overflow: hidden; }
.life .bar i { display: block; height: 100%; background: var(--accent); }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 8px; }
.tabs button { padding: 4px 2px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; }
.tabs button.on { background: #123524; border-color: rgba(74, 222, 128, 0.5); color: var(--accent); }

.cohort .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The results panel. Controls live on the right, what they produced on the
   left, so a change and its consequence are visible at the same time. */
#readout {
  position: absolute; left: 16px; top: 108px; z-index: 2; width: 306px;
  max-height: calc(100vh - 200px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; backdrop-filter: blur(8px);
}
#readout fieldset:last-child { margin-bottom: 0; }
@media (max-width: 1100px) { #readout { display: none; } }

/* ── population mix & conditions ──────────────────────────────────────────── */

.badge {
  float: right; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; color: #0b1a12;
  background: var(--accent); font-weight: 700;
}
select.mt { margin-top: 5px; }
.tabs.mixtabs { grid-template-columns: repeat(3, 1fr); margin: 9px 0 8px; }

.mixsliders { display: grid; gap: 6px; }
.mixrow { display: grid; grid-template-columns: 10px 1fr 34px; align-items: center; gap: 6px; }
.mixrow .mlabel { font-size: 10.5px; color: var(--muted); grid-column: 2; }
.mixrow input[type=range] { grid-column: 2; margin: 0; }
.mixrow .mval { font: 10px ui-monospace, monospace; text-align: right; grid-row: span 2; align-self: center; }
.mixrow .swatch { grid-row: span 2; align-self: center; }

.effect { display: grid; gap: 4px; margin-top: 8px; }
.erow { display: grid; grid-template-columns: 104px 1fr 40px; align-items: center; gap: 6px; font-size: 10.5px; }
.erow .ename { color: var(--muted); }
.erow .bar { height: 5px; border-radius: 3px; background: #17212e; overflow: hidden; }
.erow .bar i { display: block; height: 100%; }
.erow .eval { text-align: right; font: 10px ui-monospace, monospace; }
.effect .worst { font-size: 10px; color: #fca5a5; line-height: 1.45; margin-top: 2px; }

/* An outcome that is not safety must not look like one. */
.stats div.warn { border-color: rgba(248, 113, 113, 0.55); }
.stats div.warn b { color: #fca5a5; }
button.route.unsafe .rname { color: #fca5a5; }

.tabs.tabs5 { grid-template-columns: repeat(5, 1fr); }
.tabs.tabs5 button { font-size: 9px; padding: 4px 1px; }
.note.enc { margin: 0 0 8px; }
.note.enc b { color: var(--ink); font-weight: 600; }

.tabs.tabs3 { grid-template-columns: repeat(3, 1fr); }
.tabs.tabs3 button { font-size: 10px; padding: 5px 2px; }

/* Camera controls. Rotation exists in MapLibre by default but is hidden behind
   a right-drag nobody finds, so it gets buttons and keys of its own. */
.cam { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 8px; }
.cam button { padding: 5px 0; font-size: 13px; line-height: 1; }
.cam button.on { background: #123524; border-color: rgba(74, 222, 128, 0.5); color: var(--accent); }

.warnText { color: #fca5a5; }