:root {
  /* Palette follows the Recruit Class 26-04 Site Theme Spec: warm charcoal
     base, brass accent, warm off-white text, muted signal red. Calm and
     legible for a tired reader on a phone -- the map's own data colors
     (water, sectors, stations, route highlight) stay as they were because
     they encode meaning and need their contrast. --amber is the brass
     accent; the old name is kept so the stylesheet stays diffable. */
  --panel: #1F1D1A;
  --panel-raised: #2A2723;
  --panel-line: #3B372F;
  --screen: #14120F;
  --nav: #17150F;
  --text: #EDE8DE;
  --text-dim: #A59D8D;
  --amber: #B08D57;
  --amber-dim: #4A3D26;
  --red: #D9604F;       /* lightened from spec #A8352B: that is 2.4:1 on the base, too dim for text */
  --red-dim: #4D2420;
  --green: #3FBE72;
  --green-dim: #204830;
  --blue: #4C9FE0;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
}

html { color-scheme: dark; }

body {
  margin: 0;
  background: #0E0C0A;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Fixed, pointer-events-none noise overlay — breaks the totally flat/
   sterile panel look without a texture asset to fetch. Very low opacity,
   purely ambient. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.console {
  /* Exactly the window, never taller: the map fills what's left and the
     canvas re-fits on any resize (ResizeObserver in app.js). dvh tracks
     the mobile browser bar; vh is the fallback. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  background-image: linear-gradient(180deg, var(--nav) 0%, var(--panel) 60px);
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--nav);
  border-bottom: 1px solid var(--amber);   /* single thin brass divider, per the theme spec */
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 34px; height: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--red-dim);
  color: var(--red);
  flex: none;
  line-height: 1;
}
.monogram-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.monogram-line--dim { opacity: 0.7; font-size: 10px; }
.brand-eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.brand-text h1 {
  margin: 1px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.clock {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  background: rgba(176,141,87,0.08);
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ---------- Mode strip (top nav — not a sidebar) ---------- */
.mode-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--panel-line);
  overflow-x: auto;
}
.mode-switch {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.mode-btn {
  appearance: none;
  border: 1px solid var(--panel-line);
  background: var(--panel-raised);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 5px;
  text-align: center;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.mode-switch--sm .mode-btn { font-size: 0.85rem; padding: 6px 12px; }

.toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  background: var(--panel-line);
  border-radius: 999px;
  transition: background 0.15s ease;
  flex: none;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s ease, background 0.15s ease;
}
.toggle-switch input:checked + .toggle-track { background: var(--amber-dim); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(16px); background: var(--amber); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--amber); outline-offset: 2px; }
.toggle-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mode-btn:hover { border-color: var(--panel-line); background: #332F29; }
.mode-btn:active { transform: scale(0.97); }
.mode-btn.is-active {
  background: var(--amber-dim);
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 0 0 1px rgba(176,141,87,0.25), 0 2px 10px rgba(176,141,87,0.15);
}

/* ---------- Side panel (layers + score — docked right on desktop,
   stacks below the map on narrow screens; never a left sidebar) ---------- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 230px;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.side-panel {
  border-left: 1px solid var(--panel-line);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}
.rail-group { display: flex; flex-direction: column; gap: 8px; }
.rail-group[hidden] { display: none; }
.rail-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.swatch {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.swatch-station { background: var(--red); }
.swatch-station-shared { background: #E8933F; }

/* ---------- Layer chip bar (Marketplace-style filter row) ----------
   Sits directly above the map so layers can be toggled without scrolling.
   Horizontal scroll on narrow screens; every chip is a 44px tap target;
   on/off is shown by fill + a check mark, never color alone. */
.layer-bar { margin: 12px 14px 0; display: grid; gap: 8px; min-width: 0; }
.layer-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.layer-chip {
  --c: var(--text-dim);
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px 0 11px;
  scroll-snap-align: start;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.layer-chip svg { color: var(--c); flex: none; }
.layer-chip:hover { border-color: var(--c); color: var(--text); }
.layer-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 18%, var(--panel));
  border-color: var(--c);
  color: var(--text);
}
.layer-chip[aria-pressed="true"]::after { content: "\2713"; font-size: 11px; color: var(--c); }
.layer-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 2px 4px;
}
.layer-sub[hidden] { display: none; }
.layer-sub .sector-buttons { margin-top: 0; }

.sector-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sector-buttons button {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  border-radius: 4px;
}
.sector-buttons button:hover { border-color: var(--amber-dim); }
.sector-buttons button.is-active {
  background: var(--amber-dim);
  border-color: var(--amber);
  color: var(--amber);
}
.rail-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}

.score-group { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--panel-line); }
.score { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.score div { display: contents; }
.score dt { font-size: 12px; color: var(--text-dim); align-self: center; }
.score dd {
  margin: 0; font-family: var(--font-mono); font-size: 15px;
  font-variant-numeric: tabular-nums; align-self: center; color: var(--text);
}
.reset-btn {
  margin-top: 10px;
  background: none;
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-radius: 4px;
}
.reset-btn:hover { color: var(--text); border-color: var(--text-dim); }

/* ---------- Screen ---------- */
.screen-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto; /* only kicks in on very short windows */
}
.screen {
  position: relative;
  flex: 1 1 0;
  min-height: 160px;
  background: var(--screen);
  margin: 14px 14px 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 40px rgba(0,0,0,0.6);
  overflow: hidden;
}
#mapCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#mapCanvas:active { cursor: grabbing; }

.scanline {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}
.crosshair-x { display: none; }

.coord-readout {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(20,18,15,0.7);
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.zoom-controls {
  position: absolute; right: 10px; top: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.zoom-controls button {
  width: 44px; height: 44px;
  border-radius: 4px;
  border: 1px solid var(--panel-line);
  background: rgba(42,39,35,0.85);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
}
.zoom-controls button:hover { background: var(--panel-raised); border-color: var(--amber-dim); }

/* ---------- Readout panel ---------- */
.readout {
  margin: 14px;
  min-height: 118px;
  background: var(--panel-raised);
  border: 1px solid var(--panel-line);
  border-radius: 6px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
}
.readout-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.card {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.card-prompt { flex: 1; min-width: 220px; }
.card-eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}
.card-main {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
}
.card-sub {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}

.choices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.choice-btn {
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 10px 6px;
  border-radius: 4px;
  transition: transform 0.08s ease;
}
.choice-btn:hover { border-color: var(--amber-dim); }
.choice-btn:active { transform: scale(0.96); }
.choice-btn.correct { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.choice-btn.incorrect { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.choice-btn.correct::after { content: " ✓"; }
.choice-btn.incorrect::after { content: " ✗"; }
.choice-btn:disabled { pointer-events: none; }

.feedback-line {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  min-height: 1.2em;
}
.feedback-line.ok { color: var(--green); }
.feedback-line.bad { color: var(--red); }

.next-btn {
  border: 1px solid var(--amber-dim);
  background: rgba(176,141,87,0.1);
  color: var(--amber);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 9px 18px;
  border-radius: 4px;
  white-space: nowrap;
}
.next-btn:hover { background: rgba(176,141,87,0.18); }
.next-btn:disabled { opacity: 0.35; pointer-events: none; }

.leg-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.leg-nav button {
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--text);
  width: 34px; height: 34px;
  border-radius: 4px;
  font-size: 16px;
}
.leg-nav button:hover { border-color: var(--amber-dim); }
.leg-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  min-width: 62px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Station popup ---------- */
.popup {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  background: var(--panel-raised);
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  font-size: 12.5px;
  width: 240px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  z-index: 5;
}
/* Flat color block, not a soft glow — the "hero" of the card, poster-
   style: one confident bold gesture instead of a border/shadow doing
   the work. */
.popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  background: var(--amber);
  padding: 10px 12px;
}
.popup-station-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 18, 15, 0.65);
}
.popup-station-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--screen);
}
.popup-close {
  appearance: none;
  border: none;
  background: none;
  color: rgba(20, 18, 15, 0.6);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  flex: none;
}
.popup-close:hover { color: var(--screen); background: rgba(20, 18, 15, 0.12); }
.popup-tabs { display: flex; gap: 4px; margin: 0 12px 8px; border-bottom: 1px solid var(--panel-line); }
.popup-tab {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 2px 7px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.popup-tab:hover { color: var(--text); }
.popup-tab.is-active { color: var(--amber); border-bottom-color: var(--amber); }
.popup-panel { padding: 0 12px 12px; overflow-y: auto; overscroll-behavior: contain; }
.popup-panel span { color: var(--text-dim); font-family: var(--font-mono); font-size: 11.5px; display: block; }
.popup-cross-streets { margin: 4px 0 0; color: var(--text-dim); font-family: var(--font-mono); font-size: 11.5px; }
.popup-gmaps {
  display: inline-block;
  margin-top: 8px;
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}
.popup-gmaps:hover { text-decoration: underline; }
.popup-field-label {
  margin: 10px 0 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.popup-field-label:first-child { margin-top: 0; }
.popup-list { margin: 0; padding-left: 16px; color: var(--text); }
.popup-list li { margin-bottom: 2px; }
.unit-table { width: 100%; border-collapse: collapse; }
.unit-table th, .unit-table td { padding: 5px 0; border-top: 1px solid var(--panel-line); vertical-align: top; text-align: left; }
.unit-table tr:first-child th, .unit-table tr:first-child td { border-top: none; }
.unit-table th {
  width: 4.6em; padding-right: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--amber);
}
.unit-table td { color: var(--text); line-height: 1.3; }
.unit-detail { display: block; margin-top: 1px; color: var(--text-dim); font-size: 11.5px; }
@media (min-width: 861px) { .popup { width: 300px; } }
.popup-empty { margin: 0; color: var(--text-dim); font-style: italic; }
.popup-history { margin: 0; color: var(--text); line-height: 1.4; }
.popup-note {
  margin: 10px 0 0;
  padding: 7px 9px;
  background: rgba(176,141,87,0.08);
  border: 1px solid var(--amber-dim);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.4;
}
.popup-sources {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--panel-line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.popup-sources a { color: var(--blue); text-decoration: none; }
.popup-sources a:hover { text-decoration: underline; }

/* ---------- Status bar ---------- */
.statusbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 20px;
  border-top: 1px solid var(--panel-line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ---------- Responsive ---------- */
/* The map/readout stays primary and full-width; the side panel drops
   below it in normal document flow instead of squeezing into a
   horizontal-scroll strip — a real reposition for mobile, not just a
   smaller version of the desktop sidebar. */
@media (max-width: 860px) {
  /* Touch targets: mode tabs and score reset were 37px / 29px tall. */
  .mode-btn, .reset-btn { min-height: 44px; }
  .statusbar { font-size: 11.5px; }
  .layer-bar { margin: 10px 10px 0; }
  /* The badge is a required disclosure (DESIGN_BRIEF.md) — must reflow
     cleanly at narrow widths, never clip or get pushed off-screen. */
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  /* The first screenful is a complete app view (chips, map, readout) that
     fills the window; key and score sit below and scroll into view. */
  .layout { display: flex; flex-direction: column; overflow-y: auto; }
  .screen-wrap { flex: 0 0 auto; min-height: 100%; overflow: visible; }
  .side-panel {
    border-left: none;
    border-top: 1px solid var(--panel-line);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px 28px;
    padding: 14px;
    overflow-y: visible;
  }
  .rail-group { flex: 1 1 220px; }
  .score-group { margin-top: 0; }
  .mode-strip { padding: 8px 14px; gap: 10px; }
  /* Smallest label tier (eyebrows, rail labels) gets a touch more size on
     mobile — real screen-legibility floor, not just a desktop scale-down. */
  .brand-eyebrow, .rail-label, .card-eyebrow, .badge { font-size: 11.5px; }
  .screen { min-height: 200px; margin: 10px 10px 0; }
  .readout { margin: 10px; min-height: 84px; padding: 12px 16px; }
  .choices { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Embedded in the Recruit Hub: the hub already shows the brand, the clock
   is redundant, and the hub's own footer carries the unofficial-status
   disclosure -- hide the duplicate chrome so the map gets the height. */
html.is-embedded .topbar,
html.is-embedded .statusbar { display: none; }

/* Short windows (small laptops, phones in landscape): tighten the chrome so
   the map keeps as much of the height as possible. */
@media (max-height: 720px) {
  .topbar { padding: 6px 20px; }
  .brand-text h1 { font-size: 1.25rem; }
  .mode-strip { padding: 6px 20px; }
  .layer-bar { margin-top: 8px; }
  .screen { margin-top: 0; }
  .readout { min-height: 64px; margin: 8px 14px; padding: 8px 16px; }
  .statusbar { padding: 6px 20px; }
}

/* ---------- Station list dialog (text alternative to the map) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.list-btn {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto; flex-shrink: 0;
  min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--panel-line); border-radius: 5px;
  background: transparent; color: var(--text);
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em;
}
.list-btn svg { color: var(--amber); }
.list-btn:hover { border-color: var(--amber-dim); background: var(--panel-raised); }

.list-dialog {
  width: min(640px, calc(100vw - 24px)); max-height: min(86dvh, 760px);
  padding: 0; border: 1px solid var(--panel-line); border-radius: 6px;
  background: var(--panel); color: var(--text);
  flex-direction: column; overflow: hidden;
}
.list-dialog[open] { display: flex; }
.list-dialog::backdrop { background: rgba(10, 9, 7, 0.72); }
.list-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--nav); border-bottom: 1px solid var(--amber); }
.list-head h2 { margin: 0; margin-right: auto; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; }
.list-copy {
  appearance: none; min-height: 40px; padding: 6px 14px; border-radius: 5px;
  border: 1px solid var(--amber); background: var(--amber-dim); color: var(--text);
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em;
}
.list-copy.is-done { border-color: var(--green); background: var(--green-dim); }
.list-close { appearance: none; width: 40px; height: 40px; border: 0; border-radius: 5px; background: transparent; color: var(--text-dim); font-size: 26px; line-height: 1; }
.list-close:hover { color: var(--text); background: var(--panel-raised); }
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--panel-line); }
.list-filters button {
  appearance: none; min-height: 36px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--panel-line); background: var(--panel-raised); color: var(--text-dim);
  font-family: var(--font-body); font-size: 13px;
}
.list-filters button[aria-pressed="true"] { border-color: var(--amber); background: var(--amber-dim); color: var(--text); }
.list-count { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.list-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.list-table { width: 100%; border-collapse: collapse; }
.list-table th, .list-table td { padding: 10px 14px; border-top: 1px solid var(--panel-line); vertical-align: top; text-align: left; }
.list-table tr:first-child th, .list-table tr:first-child td { border-top: 0; }
.list-table th { width: 3.2em; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--amber); }
.list-addr { display: block; font-weight: 500; }
.list-sub { display: block; margin-top: 1px; font-size: 13px; color: var(--text-dim); }
.list-meta { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.list-units { display: block; margin-top: 2px; color: var(--amber); word-spacing: 0.2em; }

.net-tag { font-family: var(--font-mono); font-size: 11px; color: var(--text); background: var(--amber-dim); border: 1px solid var(--amber); border-radius: 3px; padding: 3px 8px; letter-spacing: 0.04em; }

/* ---------- Credits & licenses (bottom of the page, out of the way) ---------- */
.legal { flex: none; padding: 0 20px 8px; font-size: 10.5px; line-height: 1.45; color: var(--text-dim); }
.legal summary { cursor: pointer; display: inline-block; padding: 4px 0; opacity: 0.75; }
.legal summary:hover { opacity: 1; }
.legal p { margin: 4px 0 0; max-width: 78ch; }

@media (max-width: 600px) {
  .list-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
}
@media (max-width: 860px) {
  /* Five controls no longer fit on one 390px row: let the list button drop to its own line. */
  .mode-strip { flex-wrap: wrap; overflow-x: visible; }
  .mode-switch { flex: 1 1 100%; }
  .mode-switch .mode-btn { flex: 1 1 0; padding-left: 6px; padding-right: 6px; }
  .mode-switch--sm { flex: 0 1 auto; }
  .list-btn { margin-left: 0; }
  .legal { padding: 0 14px 12px; }
}

/* ---------- Station photo on the card front ---------- */
.popup-photo { margin: 0 0 10px; background: var(--screen); }
.popup-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.popup-photo figcaption { padding: 3px 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.popup-photo figcaption a { color: var(--text-dim); }
.popup-photo figcaption a:hover { color: var(--text); }

/* ---------- Place It (drag the number onto its station) ---------- */
.place-left { float: right; color: var(--amber); letter-spacing: 0.04em; }
.place-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.place-chip {
  appearance: none; min-height: 42px; padding: 0;
  border: 1px solid var(--panel-line); border-radius: 5px;
  background: var(--panel-raised); color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1;
  touch-action: none;             /* beside the map (tablet/desktop) any direction is a drag */
  user-select: none; -webkit-user-select: none; cursor: grab;
}
.place-chip:hover { border-color: var(--amber-dim); }
.place-chip.is-selected { border-color: var(--amber); background: var(--amber-dim); color: #fff; }
.place-chip.is-dragging { opacity: 0.35; }
.place-chip.is-wrong { animation: place-shake 0.35s ease; border-color: var(--red); }
@keyframes place-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.place-empty { margin: 0; font-size: 13px; color: var(--green); min-height: 52px; display: flex; align-items: center; }
.place-stats { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.place-head { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.place-card { gap: 6px; min-width: 0; }
.place-card .feedback-line { width: 100%; margin: 0; min-height: 1.2em; }
.place-group { min-width: 0; max-width: 100%; }
.place-pool-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.place-restart {
  appearance: none; min-height: 32px; padding: 2px 12px; border-radius: 4px;
  border: 1px solid var(--panel-line); background: transparent; color: var(--text-dim);
  font-family: var(--font-body); font-size: 12.5px;
}
.place-restart:hover { color: var(--text); border-color: var(--amber-dim); }
.place-ghost {
  position: fixed; z-index: 60; pointer-events: none;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--amber); color: #17150F;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  transform: translate(-50%, -135%);   /* sits above the fingertip so the finger doesn't hide it */
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

@media (max-width: 860px) {
  /* Phone: the pool is a one-row strip right under the map (inside the card). */
  .readout:has(.place-card) { padding: 10px 14px; min-height: 0; }
  .place-card .card-main { font-size: 1.1rem; }
  .place-card .place-group { flex: 1 1 100%; gap: 4px; }
  .place-left { float: none; margin-left: 8px; }
  .place-chips { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .place-chip { flex: 0 0 46px; min-height: 46px; scroll-snap-align: start; touch-action: pan-x; } /* strip under the map: sideways scrolls it, anything else is a drag */
  /* Five study tabs on one 360-390px row. */
  .mode-switch .mode-btn { font-size: 0.86rem; letter-spacing: 0; padding-left: 2px; padding-right: 2px; }
}

/* While playing Place It the Key (red station dot) doesn't match the lit markers, and the room is better spent on the pool and score. */
.mode-place .rail-group:not(.place-group):not(.score-group) { display: none; }

/* ---------- Place It: intermediate controls ---------- */
.place-check {
  appearance: none; min-height: 36px; padding: 4px 16px; border-radius: 5px;
  border: 1px solid var(--amber); background: var(--amber-dim); color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em;
}
.place-check:disabled { opacity: 0.4; border-color: var(--panel-line); background: transparent; }
.place-pool-head { flex-wrap: wrap; row-gap: 6px; }
.place-round {
  min-height: 32px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--panel-line); background: var(--panel-raised); color: var(--text);
  font-family: var(--font-body); font-size: 12.5px;
}
.place-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.place-actions .next-btn[hidden] { display: none; }
@media (max-width: 860px) {
  .place-card .place-actions { flex: 1 1 100%; }
  .place-pool-head .rail-label { flex: 1 1 auto; }
  .place-pool-head .place-round { margin-left: auto; }
}

/* ---------- Place It: a fixed-height card ----------
   The map sits above this card and is sized from what is left, so if the card
   grows or shrinks (a longer message wrapping, the Check button appearing) the
   whole map re-fits and every marker and pin moves under the player's finger.
   Every line here is therefore one fixed height, and long text is clipped. */
.place-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; width: 100%; }
.place-head .card-main { grid-column: 1; min-height: 36px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-head .place-check { grid-column: 2; order: 0; margin: 0; }
.place-head .place-stats { grid-column: 1 / -1; order: 0; flex: none; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-card .feedback-line { min-height: 2.7em; max-height: 2.7em; overflow: hidden; line-height: 1.3; }
.place-chips { min-height: 52px; }
.place-actions { min-height: 52px; align-items: center; }
@media (max-width: 860px) {
  .place-head .place-stats { font-size: 11.5px; }
}

/* On a phone the game needs every pixel of height: the footer and credits (about 120px) step aside while
   playing Place It. The required UNOFFICIAL STUDY TOOL badge stays in the header, and the credits are one
   tap away in every other mode. Wider screens keep both. */
@media (max-width: 860px) {
  .mode-place .statusbar, .mode-place .legal { display: none; }
}

/* ---------- Place It: advanced ---------- */
/* Advanced is the bare city outline and rivers: the layer chips (and their sector-lock row) step aside. */
.level-advanced .layer-bar { display: none; }
/* Three level buttons + Station list don't fit one phone row, and the list isn't needed mid-game. */
@media (max-width: 860px) {
  .mode-place .list-btn { display: none; }
}