/* ------------------------ responsive modes ------------------------------
   Three layouts, keyed to viewport width (keep in sync with MODES in
   js/layout.js): desktop > 1024px (rules in the other CSS files), tablet
   641-1024px, phone
   <= 640px. In tablet/phone the legend collapses behind a topbar button
   and the detail panel becomes a side drawer (tablet) or bottom sheet
   (phone). Touch sizing keys off pointer type as well, so a touch laptop
   gets large targets without losing its desktop layout. */

/* Touch targets: 44 x 44 CSS px (WCAG 2.5.5), and readable form text. */
@media (pointer: coarse), (max-width: 1024px) {
  #layers-btn { min-height: 44px; font-size: 14px; }
  #layers-panel { font-size: 14px; }
  .switch-row { min-height: 44px; }
  .switch-row small { font-size: 13px; }
  .switch-row input[role="switch"] { margin-top: 0; }
  #about-btn, #legend-toggle, #detail-close, .modal-close, #legend-close,
  .report-btn, .report-actions button {
    min-height: 44px; min-width: 44px;
  }
  #detail-close, .modal-close, #legend-close {
    display: inline-grid; place-items: center;
  }
  #method-notes summary, .disclaimer summary { padding: 10px 0; }
  .buffer-row input[type="range"] { min-height: 32px; }
  .buffer-row input[type="range"]::-webkit-slider-thumb {
    width: 26px; height: 26px; margin-top: -9px; }
  .buffer-row input[type="range"]::-moz-range-thumb {
    width: 26px; height: 26px; }
  .report-box textarea { font-size: 16px; }
  .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .maplibregl-popup-close-button { width: 44px; height: 44px; top: 0; right: 0; }
  .maplibregl-popup-content:has(> .maplibregl-popup-close-button) {
    padding-right: 48px; }
}

/* ---- Tablet: 641-1024px ---- */
@media (min-width: 641px) and (max-width: 1024px) {
  #topbar { align-items: center; gap: 12px; }
  #topbar h1 .ff-sub { display: none; }
  #legend-toggle { display: inline-grid; place-items: center; }
  #legend {
    bottom: max(34px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: min(340px, calc(100vw - 24px)); max-width: none;
    max-height: calc(100dvh - var(--topbar-h, 56px) - 56px);
    overflow-y: auto; font-size: 14px; padding: 14px 16px; z-index: 7;
  }
  #legend:not(.is-open) { display: none; }
  #legend-close { display: inline-grid; }
  #legend .legend-title { font-size: 12px; }
  #legend .legend-sub { font-size: 11.5px; }
  #legend em { font-size: 12.5px; }
  #legend .row { margin: 6px 0; }
  .buffer-row label { font-size: 13px; width: 96px; }
  .buffer-row output { font-size: 13px; }
  #method-notes summary { font-size: 13px; }
  #buffer-note { font-size: 13px; max-width: none; max-height: none; }
  #buffer-note dt { font-size: 12px; }
  #detail {
    top: calc(var(--topbar-h, 56px) + 8px);
    right: max(12px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    width: min(400px, 48vw); font-size: 15px;
  }
  .modal-card { font-size: 15px; }
}

/* ---- Phone: <= 640px ---- */
@media (max-width: 640px) {
  #topbar { flex-wrap: wrap; align-items: center; gap: 2px 8px;
    padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 4px; }
  #topbar h1 { order: 1; flex: 1 1 auto; font-size: 17px; }
  #topbar h1 .ff-sub { display: none; }
  #legend-toggle { order: 2; display: inline-grid; place-items: center; }
  #about-btn { order: 3; }
  #topbar::after { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  #stats { order: 5; flex: 1 1 100%; min-width: 0; font-size: 12px; }

  #legend, #detail {
    left: 0; right: 0; width: auto; max-width: none;
    border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    box-shadow: 0 -4px 18px var(--shadow);
    max-height: 62dvh; overflow-y: auto;
  }
  #legend {
    bottom: 0; z-index: 7; font-size: 15px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  #legend:not(.is-open) { display: none; }
  #legend-close { display: inline-grid; }
  #legend .legend-title { font-size: 12.5px; }
  #legend .legend-sub { font-size: 12px; }
  #legend .row { white-space: normal; margin: 7px 0; }
  #legend em { font-size: 13px; }
  .buffer-row label { font-size: 14px; width: 104px; }
  .buffer-row output { font-size: 14px; }
  #method-notes summary { font-size: 14px; }
  #buffer-note { font-size: 14px; max-width: none; max-height: none; }
  #buffer-note dt { font-size: 12.5px; }

  #detail {
    top: auto; bottom: 0; font-size: 15.5px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    overscroll-behavior: contain;
  }
  #detail.hidden { display: none; }
  #detail h2 { font-size: 18px; margin-right: 52px; }
  #detail h3 { font-size: 12.5px; }
  #detail-close { top: 6px; right: 8px; }
  .kv, .statute-quote, .guideline-banner, .disclaimer { font-size: 14px; }
  .disclaimer summary { font-size: 13px; }
  .match-card .cite { font-size: 13px; }
  .report-btn { font-size: 15px; }
  .report-actions { flex-wrap: wrap; }
  .report-actions button { font-size: 14px; flex: 1 1 140px; }

  .modal { align-items: stretch;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .modal-card { max-height: none; width: 100%; font-size: 15px; }
  .modal-body { padding: 18px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right)); }
  .modal-close { top: 4px; right: 6px; }
  .modal-card h2 { margin-right: 52px; }
}

/* Short landscape phones: keep panels inside the viewport. */
@media (max-height: 500px) and (min-width: 641px) {
  #legend { max-height: calc(100dvh - var(--topbar-h, 48px) - 24px);
    bottom: 12px; }
}