/* Wider screens: floating left sidebar with search and route card. */

@media (min-width: 720px) {
  :root {
    --sidebar-w: 400px;
  }

  .sidebar {
    position: fixed;
    z-index: 20;
    top: calc(var(--safe-top) + 16px);
    left: calc(var(--safe-left) + 16px);
    bottom: calc(var(--safe-bottom) + 16px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: var(--sidebar-w);
    pointer-events: none;
  }

  .search-panel,
  .route-sheet {
    position: static;
    pointer-events: auto;
  }

  .search-panel {
    padding: 14px;
    flex: none;
  }

  .route-sheet {
    max-height: none;
    min-height: 0;
    padding: 16px;
    border-radius: var(--radius);
    flex: 0 1 auto;
  }

  .sheet-handle {
    display: none;
  }

  .endpoints {
    display: grid;
  }

  .route-sheet[data-collapsed="true"] .sheet-body {
    display: block;
  }

  /* The sheet no longer covers the bottom of the map. */
  .maplibregl-ctrl-top-right {
    top: var(--safe-top);
  }

  .maplibregl-ctrl-bottom-right,
  .maplibregl-ctrl-bottom-left {
    bottom: var(--safe-bottom);
  }

  .maplibregl-ctrl-bottom-left {
    left: calc(var(--sidebar-w) + 32px);
  }

  .fab {
    right: calc(var(--safe-right) + 10px);
    bottom: calc(var(--safe-bottom) + 40px);
  }

  .toasts {
    top: auto;
    bottom: calc(var(--safe-bottom) + 24px);
    left: calc(var(--sidebar-w) + 32px + (100vw - var(--sidebar-w) - 32px) / 2);
  }

  .nav-banner {
    left: calc(var(--sidebar-w) + 32px);
    right: 72px;
  }
}

@media (min-width: 1280px) {
  :root {
    --sidebar-w: 420px;
  }
}

/* Short landscape phones: keep the sheet compact. */
@media (max-width: 719px) and (max-height: 500px) {
  .brand {
    display: none;
  }

  .route-sheet {
    max-height: calc(100dvh - var(--panel-h) - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}