@media (max-width: 950px) {
  .map-workspace { grid-template-columns: minmax(0, 1fr); }
  .detections-panel { min-height: 320px; }
  .drone-list { max-height: 360px; }
  input, select, .detections-panel > input, .map-layer-label select, .place-search-row input { font-size: 16px; min-height: 44px; }
  button.primary, button.secondary, button.subtle { min-height: 44px; }
  .map-actions .subtle, .place-search-row button { min-height: 44px; }
  .account-button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 720px) {
  /* Keep the primary destinations reachable while scrolling a long live map. */
  .sidebar {
    position: sticky;
    top: 0;
    z-index: 1100;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
    gap: 8px;
  }
  .sidebar nav { flex: 1; justify-content: center; gap: 2px; min-width: 0; }
  .sidebar .brand-mark { width: 28px; }
  .nav-item { flex-direction: column; gap: 3px; width: 49px; min-width: 44px; min-height: 54px; padding: 7px 1px; }
  .nav-item > span { font-size: 23px; line-height: 25px; }
  .nav-item::after { content: attr(data-mobile-label); font-size: 9px; line-height: 12px; letter-spacing: -.2px; }
  .account-button { width: 44px; height: 44px; }
  .topbar { padding-top: 17px; }
  .metric { padding: 12px; }
  .metric strong { font-size: 25px; margin: 7px 0; }
  .source-metric strong { font-size: 18px; margin: 11px 0; }
  .metric small { font-size: 9px; line-height: 1.5; display: block; }
  .metric > span { font-size: 9px; letter-spacing: .6px; }
  /* 16px inputs avoid focus zoom in mobile Safari. */
  input, select, .detections-panel > input, .map-layer-label select, .place-search-row input {
    font-size: 16px;
    min-height: 44px;
  }
  button.primary, button.secondary, button.subtle { min-height: 44px; }
  .map-toolbar { position: relative; gap: 9px; }
  .map-toolbar > div:first-child { min-height: 44px; padding-right: 117px; }
  .map-toolbar .map-actions { width: 100%; }
  .map-layer-label { width: 100%; gap: 10px; font-size: 11px; }
  .map-layer-label select { max-width: none; flex: 1; width: 0; padding-right: 20px; }
  #fit-map { position: absolute; right: 12px; top: 12px; min-width: 110px; }
  .place-query-label { font-size: 12px; }
  .place-search-row { flex-wrap: wrap; }
  .place-search-row input { flex-basis: 100%; width: 100%; }
  #place-search-submit { flex: 1; font-size: 13px; }
  #place-search-clear { flex: 0 0 44px; width: 44px; font-size: 22px; }
  .place-search-result { min-height: 56px; padding: 12px; }
  .place-search-result strong { font-size: 14px; }
  .place-search-result span, .place-search-status { font-size: 12px; }
  .place-search-credit { font-size: 10px; }
  .leaflet-control-zoom a { width: 42px !important; height: 42px !important; line-height: 42px !important; }
  .leaflet-popup-content { max-width: min(240px, calc(100vw - 100px)); overflow-wrap: anywhere; }
  .leaflet-popup-close-button { width: 36px !important; height: 36px !important; line-height: 32px !important; }
  .drone-row { min-height: 76px; }
  .drone-detail h3 { font-size: 14px; }
  .detail-pair { font-size: 12px; }
  .checkbox-label { min-height: 44px; font-size: 12px; }
  .checkbox-label input { min-height: 20px; width: 20px; height: 20px; }
  dialog { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 22px; }
  dialog .icon-button { min-width: 44px; min-height: 44px; }
  .app-footer { gap: 15px; line-height: 1.6; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .app-footer span { min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 350px) {
  .sidebar { padding-left: 6px; padding-right: 6px; gap: 4px; }
  .nav-item { width: 46px; }
  main { padding-left: 10px; padding-right: 10px; }
  .metric { padding: 10px; }
  .metric > span { font-size: 8px; }
}
@media (min-width: 721px) and (max-height: 500px) {
  .sidebar nav { margin-top: 20px; }
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric { padding: 12px; }
  .metric strong { font-size: 23px; margin: 6px 0; }
  .source-metric strong { font-size: 18px; }
  #map { height: 70svh; min-height: 260px; }
}