/* Mobile-first refinements for the navigation-style Buddy Walk web UI. */
@media (max-width: 899px) {
  :root { --sheet-collapsed: 202px; }
  .route-sheet { height: 76dvh; }
  .route-sheet.expanded { height: 82dvh; }
  .connectivity-mini { bottom: calc(var(--sheet-collapsed) + 15px); }
  .quick-safety-actions { right: 14px; bottom: calc(var(--sheet-collapsed) + 14px); gap: 10px; }
  .quick-action-status { right: 80px; bottom: calc(var(--sheet-collapsed) + 14px); }
  .map-side-controls { top: calc(158px + env(safe-area-inset-top)); }
}

@media (max-width: 600px) {
  .search-card { width: calc(100% - 20px); top: calc(8px + env(safe-area-inset-top)); border-radius: 16px; }
  .search-line { min-height: 43px; }
  .search-line input { font-size: 14px; padding: 9px 4px; }
  .planner-actions { gap: 7px; }
  .route-plan-button { padding: 8px 11px !important; font-size: 12px; }
  #status { font-size: 9px; }
  .map-top-controls { top: calc(132px + env(safe-area-inset-top)); left: 10px; }
  .map-side-controls { right: 10px; top: calc(148px + env(safe-area-inset-top)); }
  .map-circle { width: 40px; height: 40px; }
  .leaflet-control-zoom { display: none; }
  .route-sheet-header { padding-left: 14px; padding-right: 14px; }
  .route-carousel-wrap { grid-template-columns: 24px 1fr 24px; padding-left: 2px; padding-right: 2px; }
  .route-arrow { width: 24px; font-size: 24px; }
  .route { flex-basis: 94%; padding: 11px 12px; }
  .route-title { font-size: 14px; }
  .route-score { font-size: 20px; }
  .route-details { padding-left: 14px; padding-right: 14px; }
  .score-grid { grid-template-columns: 1fr 1fr; }
  .tiny-note { display: none; }
  .connectivity-mini { left: 10px; max-width: calc(100% - 84px); }
  .quick-safety-actions { right: 12px; }
  .quick-safety-button { width: 52px; height: 52px; flex-basis: 52px; }
  .quick-safety-icon { width: 24px; height: 24px; }
  .sos-icon { width: auto; height: auto; font-size: 14px; }
  .quick-action-status { right: 74px; max-width: calc(100% - 98px); }
  dialog { margin: auto 10px calc(10px + env(safe-area-inset-bottom)); width: calc(100% - 20px); max-height: 86dvh; overflow-y: auto; border-radius: 20px; }
}

@media (max-width: 370px) {
  .map-chip { padding: 7px 9px; font-size: 9px; }
  .route-sheet-header h1 { font-size: 15px; }
  .route-count { display: none; }
  .score-grid { grid-template-columns: 1fr; }
}