/* Narrow-screen shell (phones, portrait tablets). Below 820px the console keeps its desktop
   three-column grid and the map shrinks to a sliver. Here the map takes the full width and the
   two work rails become overlays opened from the edge handles. Geometry, engine results and
   panel content are untouched; only the shell reflows. */
@media (max-width: 820px) {
  html, body { height: auto; min-height: 100dvh; overflow: auto; }
  body { display: flex; flex-direction: column; min-width: 0; width: 100%; }
  .fixture-strip, .topbar, .run-summary, .provenance-rail { flex: 0 0 auto; }
  .fixture-strip { height: auto; min-height: 20px; padding: 3px 10px; white-space: normal; line-height: 1.3; }

  .topbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .brand { min-width: 0; }
  .mode-switch { order: 2; flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-chip { order: 3; flex: 1 1 100%; max-width: none; }
  .header-actions { order: 4; flex: 1 1 100%; flex-wrap: wrap; }
  .header-actions .plain-button, .header-actions .primary-button { flex: 1 1 auto; text-align: center; }
  .journey-reveal { order: 5; }

  /* One scrolling row of status cells keeps the header height predictable. */
  .run-summary { height: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .run-fact { padding: 8px 10px; }

  .console { position: relative; flex: 1 1 auto; height: auto; min-height: 420px; grid-template-columns: minmax(0, 1fr); }
  .pane-map { grid-column: 1; grid-row: 1; min-width: 0; }
  .pane-left, .pane-right {
    position: absolute; top: 0; bottom: 0; z-index: 9; width: min(88vw, 340px);
    box-shadow: 0 0 24px rgba(0, 0, 0, .18); overflow-y: auto;
  }
  .pane-left { left: 0; border-right: 1px solid var(--line); }
  .pane-right { right: 0; border-left: 1px solid var(--line); }
  body.left-collapsed .pane-left, body.right-collapsed .pane-right { visibility: hidden; }

  /* Edge handles sit above the overlay and move to its inner edge so it can always be closed. */
  .rail-handle { z-index: 10; width: 18px; height: 64px; }
  body:not(.left-collapsed) .rail-handle-left { left: min(88vw, 340px); border-radius: 0 5px 5px 0; }
  body:not(.right-collapsed) .rail-handle-right { right: min(88vw, 340px); border-radius: 5px 0 0 5px; }

  .map-toolbar { height: auto; flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
  .map-toolbar select { min-width: 0; flex: 1 1 160px; }
  .raster-scene p, .raster-scene small { width: calc(100% - 28px); max-width: none; }
  .map-legend { max-width: calc(100% - 26px); }
  .provenance-rail { height: 32px; }
}