/* Polaris — all layout breakpoints live here, after the component styles. */
@media (max-width: 1000px) and (min-width: 721px) {
  #panel { width: 320px; }
  .panel-body { padding: var(--s-3); }
  .group, #panel .stops, #results { padding: var(--s-3); }
}

@media (max-width: 720px) {
  #app { flex-direction: column; }
  .map-container { order: 1; flex: 0 0 45%; height: 45%; }

  #panel {
    order: 2;
    flex: 1 1 0;
    width: 100%;
    height: auto;
    border-right: none;
    border-top: 1px solid var(--border-strong);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.24);
  }

  /* A visual sheet handle; scrolling uses the native panel scroll container. */
  #panel::before {
    content: "";
    flex: 0 0 4px;
    width: 40px;
    margin: var(--s-2) auto 0;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .panel-body { padding: var(--s-3); }
  .group, #panel .stops, #results { padding: var(--s-3); }
  .panel-actions { padding-inline: var(--s-3); }
  .segmented button, .stepper button { min-height: 38px; }
  .field .stepper input { height: 38px; }
  .search { height: 40px; }
  .search input { height: 38px; }
  .search button { width: 34px; height: 34px; }
  .ghost { min-height: 34px; }
  .panel-actions .ghost { min-height: 36px; }
  #stop-list { max-height: 34vh; max-height: 34dvh; }
  .stops-head { flex-wrap: wrap; gap: var(--s-2); }
  .result-actions { flex-wrap: wrap; }

  /* Reserve the left 64px for zoom and the bottom 56px for attribution.
     Normal flow keeps simultaneous feedback from colliding. Long legends
     and toast stacks scroll inside this bounded map area. */
  .map-overlays {
    position: absolute;
    z-index: 1100;
    inset: var(--s-3) var(--s-3) 56px 64px;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
  }

  #map-legend {
    position: static;
    order: 1;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    align-self: flex-end;
    width: 180px;
    max-width: 100%;
    min-height: 0;
    max-height: 45%;
    pointer-events: auto;
  }
  #map-legend-title { flex: 0 0 auto; }
  #map-legend-items { min-height: 0; max-height: none; }
  .map-legend-route { min-height: 36px; }

  #map-hint {
    position: static;
    order: 2;
    flex: 0 0 auto;
    align-self: flex-start;
    max-width: 100%;
    margin-top: auto;
    padding: 6px 10px;
    border-radius: var(--r-md);
    font-size: 11px;
  }

  .map-toasts {
    position: static;
    order: 3;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 50%;
    width: 100%;
    transform: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    /* Leave room for keyboard focus outlines inside the scrollport. */
    padding: 4px;
  }
  .map-toasts:has(> :not([hidden])) { min-height: 44px; }
  .map-toasts:not(:has(> :not([hidden]))) { display: none; }
  .toast { flex-shrink: 0; width: 100%; padding: var(--s-2); gap: var(--s-2); font-size: 12px; }
  #map .leaflet-bottom.leaflet-right { max-width: 100%; }
  #map .leaflet-control-attribution {
    max-width: calc(100% - 24px);
    max-height: 48px;
    overflow-y: auto;
    padding-block: 4px;
  }

  .welcome-overlay { padding: var(--s-4); }
  .welcome-dialog { padding: 32px 24px 24px; }
  #welcome-title { font-size: 24px; }
}

@media (max-width: 380px) {
  .panel-body { padding: var(--s-2); gap: var(--s-2); }
  .group, #panel .stops, #results { padding: var(--s-2); }
  .group { gap: var(--s-2); }
  .duo { gap: var(--s-2); }
  .panel-actions { padding: var(--s-2) var(--s-2) max(var(--s-2), env(safe-area-inset-bottom)); }
  .route-card { padding: var(--s-2); }
  .route-header { gap: var(--s-1); }
  .map-overlays { right: var(--s-2); gap: var(--s-1); }
  #map-legend { width: 160px; padding: var(--s-1); }
  #map-legend-title { font-size: 9px; gap: var(--s-1); }
  .welcome-overlay { padding: var(--s-2); }
  .welcome-dialog { padding: 32px 16px 16px; }
}