:root{
  --bg:#1B1B18;
  --surface:#232320;
  --panel:#2A2A25;
  --ink:#DCDAD2;
  --ink-dim:#8B8A80;
  --ink-faint:#5A5950;
  --border:#3A392F;
  --accent:#C9862E;
  --accent-soft:#3A2E1A;
  --danger:#B23A2E;
  --shadow: 0 8px 28px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
[hidden]{ display:none !important; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  overflow:hidden;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

#app{ height:100vh; display:flex; flex-direction:column; }

/* ---- header ---- */
.hdr{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 26px; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:12px;
  background:linear-gradient(var(--surface), var(--bg));
}
.hdr-title{
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:700; font-size:26px; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--ink);
}
.hdr-title .dim{ color:var(--ink-faint); }
.hdr-sub{ font-size:12px; color:var(--ink-dim); margin-top:2px; }
.hdr-actions{ display:flex; align-items:center; gap:10px; }

.btn{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--ink-faint); background:transparent; color:var(--ink);
  cursor:pointer;
}
.btn:hover{ border-color:var(--ink-dim); color:#fff; }
.btn.primary{ border-color:var(--accent); color:var(--accent); }
.btn.primary:hover{ background:var(--accent-soft); }
.btn:disabled{ opacity:0.35; cursor:not-allowed; }

/* ---- stage: map + panel ---- */
.stage{ flex:1; display:flex; min-height:0; }
.map-wrap{ flex:1; position:relative; min-width:0; }
.map-wrap svg{ width:100%; height:100%; display:block; }

.line-path{ fill:none; stroke-width:3.5; opacity:0.82; }

.station-dot{ cursor:pointer; }
.station-dot circle.ring{ fill:var(--bg); stroke-width:2.5; }
.station-dot.has-footage circle.ring{ fill:currentColor; fill-opacity:0.18; }
.station-dot.selected circle.ring{ fill:currentColor; fill-opacity:0.9; }
.station-dot:hover circle.ring{ stroke-width:4; }

.station-label-plate{
  fill:#141412; stroke:var(--border); stroke-width:1; opacity:0.94;
  pointer-events:none;
}
.station-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; fill:var(--ink-dim);
  pointer-events:none; user-select:none;
}
.station-dot.selected .station-label{ fill:var(--ink); }
.station-dot.selected .station-label-plate{ stroke:currentColor; }

/* very slight, slow drift on the whole map — subtle, not horror, just not-quite-still */
@media (prefers-reduced-motion: no-preference){
  .map-inner{ animation: drift 26s ease-in-out infinite; transform-origin:50% 50%; }
}
@keyframes drift{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(2px,-3px) rotate(0.15deg); }
}

/* ---- side panel: the "elevator" ---- */
.panel{
  width:400px; flex-shrink:0; border-left:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.panel-plaque{
  padding:16px 20px; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:4px;
}
.panel-code{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--ink-dim); }
.panel-name{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:24px; letter-spacing:0.01em; }
.panel-lines{ display:flex; gap:6px; margin-top:4px; }
.line-chip{
  width:20px; height:6px; border-radius:0;
}

.screen{
  margin:20px; aspect-ratio:4/5; background:#0E0E0C; border:1px solid var(--border);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.screen video{ width:100%; height:100%; object-fit:cover; display:block; }
.screen .oos{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:24px;
}
.oos-sign{
  font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:20px; letter-spacing:0.08em;
  color:var(--danger); border:2px solid var(--danger); padding:10px 16px;
  transform:rotate(-1.2deg);
}
@media (prefers-reduced-motion: no-preference){
  .oos-sign{ animation: buzz 4s steps(1) infinite; }
}
@keyframes buzz{
  0%,92%,100%{ opacity:1; }
  93%,95%{ opacity:0.55; }
}
.oos-note{ font-size:12px; color:var(--ink-faint); max-width:26ch; }

.screen .idle{ color:var(--ink-faint); font-size:13px; font-family:'IBM Plex Mono', monospace; text-align:center; padding:24px; }

.panel-meta{ padding:0 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; overflow-y:auto; }
.meta-row{ display:flex; flex-direction:column; gap:2px; }
.meta-k{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); }
.meta-v{ font-size:13px; color:var(--ink-dim); }

/* deliberate contrast with the institutional mono/sans elsewhere — the quote reads as a
   different register, literary rather than signage */
.passage{ margin-top:8px; padding-top:14px; border-top:1px solid var(--border); gap:6px; }
.passage-text{ font-family:'Source Serif 4', Georgia, serif; font-style:italic; font-size:15px; line-height:1.5; color:var(--ink); }
.passage-cite{ font-size:11px; color:var(--ink-faint); }
.passage-cite em{ font-style:italic; }

.panel-empty{
  flex:1; display:flex; align-items:center; justify-content:center; padding:40px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-faint); text-align:center;
  letter-spacing:0.04em;
}

/* ---- trip mode banner ---- */
.trip-banner{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--accent); padding:10px 20px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow);
}
.trip-banner button{
  background:none; border:none; color:var(--ink-dim); font-family:inherit; font-size:11px; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}

@media (max-width: 860px){
  .stage{ flex-direction:column; }
  .panel{ width:100%; border-left:none; border-top:1px solid var(--border); max-height:52vh; }
  .screen{ margin:16px; }
}