/* Mobile map usability Stage 2. No changes to basemap, route colors, or fleet data. */
.stage2-route-back { display: none; }
.stage2-map-announcement { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 820px) and (orientation: portrait) {
  /* The visible viewport may be smaller than the layout viewport while typing. */
  .app.stage2-mobile-typing .sidebar:not(.collapsed) {
    height: var(--stage2-expanded-height, 70dvh);
    bottom: calc(10px + var(--safe-bottom) + var(--stage2-keyboard-overlap, 0px));
    transition: height .2s ease, bottom .2s ease;
  }
  .app.stage2-mobile-typing .mobile-panel-toggle {
    bottom: calc(var(--stage2-expanded-height, 70dvh) + 14px + var(--safe-bottom) + var(--stage2-keyboard-overlap, 0px));
  }
  .app.stage2-mobile-typing .map-legend { opacity: 0; pointer-events: none; }
  .app.stage2-keyboard-open .mobile-panel-toggle { opacity: 0; pointer-events: none; }
  .app.stage2-mobile-typing .content-scroll { scroll-padding-bottom: 32px; overscroll-behavior-y: contain; }
  .stage2-route-back {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 12px;
    border: 1px solid #d6e6de; border-radius: 11px; background: #eff7f2;
    color: #245d49; font-size: 12px; font-weight: 800; cursor: pointer;
  }
  .stage2-route-back:hover { background: #e5f2ea; }
  .stage2-route-back:focus-visible { outline: 3px solid #0e7f67; outline-offset: 3px; }
  .selected-route-panel { overscroll-behavior-y: contain; }
}

@media (max-width: 820px) and (orientation: landscape) {
  /* Keep the existing side-panel layout in landscape. */
  .sidebar .content-scroll { overscroll-behavior-y: contain; scroll-padding-bottom: 24px; }
  .stage2-route-back {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 42px;
    margin-top: 8px; padding: 8px 10px; border: 1px solid #d6e6de;
    border-radius: 11px; background: #eff7f2; color: #245d49; font-size: 11px; font-weight: 800;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app.stage2-mobile-typing .sidebar:not(.collapsed) { transition: none; }
}