/* NYC road replay only; shared site styles remain unchanged. */
.replay-swatch--hollow { background: transparent !important; border: 2px solid var(--muted); }
.replay-legend small { color: var(--muted); font-size: 0.78rem; }
.replay-roads { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 0.86rem; }
.replay-roads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-soft); }
.replay-roads li { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 10px; }
.replay-roads-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.replay-line { width: 22px; height: 4px; border-radius: 2px; background: var(--muted); }

/* Keep the clock, map and playback controls together without a tall facts sidebar. */
:is(#real-run, #saturday-run) .replay-stage { aspect-ratio: auto; height: clamp(300px, calc(100svh - 280px), 680px); max-height: none; }
:is(#real-run, #saturday-run) .replay-side { padding: 14px 18px; gap: 12px; }
:is(#real-run, #saturday-run) .replay-legend { gap: 8px; }
:is(#real-run, #saturday-run) .replay-roads { padding-top: 10px; }
:is(#real-run, #saturday-run) .demo-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) 140px; padding: 10px 18px; gap: 8px 16px; }
:is(#real-run, #saturday-run) .demo-readout { grid-column: 1 / -1; width: auto; margin-left: 0; }
:is(#real-run, #saturday-run) .demo-controls .replay-time { min-width: 0; }
:is(#real-run, #saturday-run) .replay-run-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; gap: 18px; }
@media (max-width: 900px) {
  :is(#real-run, #saturday-run) .replay-panel { display: grid; }
  :is(#real-run, #saturday-run) .replay-layout { display: contents; }
  :is(#real-run, #saturday-run) .replay-stage { grid-row: 1; height: clamp(260px, calc(100svh - 340px), 560px); }
  :is(#real-run, #saturday-run) .replay-strip { grid-row: 2; }
  :is(#real-run, #saturday-run) .demo-controls { grid-row: 3; }
  :is(#real-run, #saturday-run) .replay-side { grid-row: 4; }
  :is(#real-run, #saturday-run) .replay-run-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  :is(#real-run, #saturday-run) .demo-controls { grid-template-columns: auto minmax(0, 1fr); padding-inline: 12px; }
  :is(#real-run, #saturday-run) .demo-controls > .control:not(.replay-time) { grid-column: 1 / -1; grid-template-columns: auto 100px; align-items: center; justify-content: end; }
  :is(#real-run, #saturday-run) .demo-controls .control { min-width: 100px; }
  :is(#real-run, #saturday-run) .replay-run-facts { grid-template-columns: 1fr; }
}

/* LA only: preserve the accepted NYC panels above. */
/* Keep the clock, map and playback controls together without a tall facts sidebar. */
.la-run .replay-stage { aspect-ratio: auto; height: clamp(300px, calc(100svh - 280px), 680px); max-height: none; }
.la-run .replay-side { padding: 14px 18px; gap: 12px; }
.la-run .replay-legend { gap: 8px; }
.la-run .replay-roads { padding-top: 10px; }
.la-run .demo-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) 140px; padding: 10px 18px; gap: 8px 16px; }
.la-run .demo-readout { grid-column: 1 / -1; width: auto; margin-left: 0; }
.la-run .demo-controls .replay-time { min-width: 0; }
.la-run .replay-run-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; gap: 18px; }
@media (max-width: 900px) {
  .la-run .replay-panel { display: grid; }
  .la-run .replay-layout { display: contents; }
  .la-run .replay-stage { grid-row: 1; height: clamp(260px, calc(100svh - 340px), 560px); }
  .la-run .replay-strip { grid-row: 2; }
  .la-run .demo-controls { grid-row: 3; }
  .la-run .replay-side { grid-row: 4; }
  .la-run .replay-run-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .la-run .demo-controls { grid-template-columns: auto minmax(0, 1fr); padding-inline: 12px; }
  .la-run .demo-controls > .control:not(.replay-time) { grid-column: 1 / -1; grid-template-columns: auto 100px; align-items: center; justify-content: end; }
  .la-run .demo-controls .control { min-width: 100px; }
  .la-run .replay-run-facts { grid-template-columns: 1fr; }
}

.la-run .replay-event { margin: 0; font-size: .83rem; color: var(--ink-soft); }
.la-run .la-evacuation { border-top: 1px solid var(--line); padding: 16px 18px; display: grid; gap: 10px; }
.la-run .la-evacuation[hidden] { display: none; }
.la-run .la-evacuation .eyebrow { margin: 0; }
.la-run .la-evacuation dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 0; }
.la-run .la-evacuation dl div { display: grid; gap: 4px; }
.la-run .la-evacuation dt { color: var(--ink-soft); }
.la-run .la-evacuation dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.4rem; }
.la-run .la-evacuation small { color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .la-run .la-evacuation { grid-row: 5; } }
@media (max-width: 560px) { .la-run .la-evacuation dl { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.la-run .la-event-jump { grid-column: 1 / -1; justify-self: start; }
#la-preparation, .la-run { scroll-margin-top: 100px; }

/* Reserve room for hazard controls without pushing the top clock out of view. */
.la-run .replay-stage { height: clamp(300px, calc(100svh - 320px), 680px); }
.la-run .replay-side { font-size: .86rem; line-height: 1.4; gap: 8px; }
.la-run .replay-side .eyebrow { font-size: .7rem; line-height: 1.4; }
.la-run .replay-legend { gap: 6px; }
@media (max-width: 900px) {
  .la-run .replay-stage { height: clamp(260px, calc(100svh - 440px), 500px); }
}