/* Simulation pages: recorded SUMO runs replayed on a canvas. The map inset is
   dark on purpose (roads read as light traces, vehicles as coloured points);
   everything around it stays in the site's light palette. */
.sim-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:18px; }
.sim-card h2 { font-size:19px; margin:0 0 6px; }
.sim-runs { list-style:none; margin:10px 0 14px; padding:0; display:grid; gap:6px; }
.sim-runs li { display:flex; justify-content:space-between; gap:10px; align-items:baseline; border-top:1px solid var(--line); padding-top:6px; font-size:13px; }
.sim-runs strong { font-variant-numeric:tabular-nums; }
.sim-controls { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.sim-button { background:var(--blue); color:#fff; border:0; border-radius:6px; padding:8px 16px; font:600 14px inherit; cursor:pointer; }
.sim-button:focus-visible { outline:2px solid #173952; outline-offset:2px; }
.sim-clock { font-family:ui-monospace,Menlo,monospace; font-size:22px; min-width:6ch; font-variant-numeric:tabular-nums; }
.sim-controls input[type=range] { flex:1; min-width:180px; accent-color:var(--blue); }
.sim-controls label { color:var(--muted); font-size:13px; }
.sim-panel { min-width:0; }
.sim-panel h2 { font-size:17px; margin:0 0 4px; }
.sim-canvas { width:100%; height:auto; max-width:100%; display:block; background:#101418; border-radius:8px; }
.sim-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:10px; }
.sim-stats div { border-top:2px solid var(--line); padding-top:6px; }
.sim-stats b { display:block; font-family:ui-monospace,Menlo,monospace; font-size:22px; font-variant-numeric:tabular-nums; }
.sim-stats span { font-size:12px; color:var(--muted); }
.sim-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--muted); margin:14px 0 18px; }
.sim-dot { display:inline-block; width:10px; height:10px; border-radius:5px; margin-right:6px; vertical-align:middle; }
.sim-dot--moving { background:#1f9d7a; } .sim-dot--slow { background:#d98c1f; } .sim-dot--stopped { background:#c0392b; } .sim-dot--bus { background:#6b7a89; }
.sim-table td { font-variant-numeric:tabular-nums; }
[data-simulation] code { overflow-wrap:anywhere; }

header .eyebrow a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); }
.sim-zoom { display:inline-flex; gap:6px; }
.sim-button--quiet { background:#fff; color:#173952; border:1px solid var(--line); padding:6px 12px; }
.sim-canvas { cursor:grab; touch-action:none; }
.sim-canvas:active { cursor:grabbing; }