/* ---------- Sidebar toggle (mobile) ---------- */

#sidebarToggle {
  display: none;
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));   /* below the notch in standalone mode */
  left: 12px;
  z-index: 1500;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  background: #fff;
  font-size: 19px;
  cursor: pointer;
  box-shadow: var(--shadow);
}

@media (max-width: 900px) {
  /* iOS Safari auto-zooms when focusing a field with font-size < 16px. Force all
     form controls to 16px on small screens to stop the tap-to-zoom jump.
     !important is needed to beat the more specific per-field rules (.field input
     etc.) — media queries don't add specificity. */
  input, select, textarea { font-size: 16px !important; }

  /* The place panel is a bottom sheet: it always peeks above the map and drags
     (or taps) up to full height. Snap between peek/full is driven by controls.js
     (wireBottomSheet) toggling .sheet-full. */
  #sidebarToggle { display: none; }   /* sheet always peeks — no hamburger needed */

  #sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    min-width: 0;
    height: var(--sheet-h);
    border-right: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(43, 45, 51, 0.2);
    /* Peek: translate by the sheet's OWN height (% is relative to the element's
       rendered height) minus the peek. Using 100% rather than var(--sheet-h)
       keeps the translate in lockstep with `height` even when iOS re-resolves
       100dvh on resume — otherwise the sheet creeps up and reveals the search bar. */
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
  }

  #sidebar.sheet-full {
    transform: translateY(0);
    padding-top: env(safe-area-inset-top);   /* keep handle + search below the iOS status bar */
    border-radius: 0;                         /* fill edge-to-edge; no map through the rounded corners */
  }
  /* When full, reclaim the handle's peek-only bottom padding (it exists to lift the
     grip above the home indicator while collapsed) so the search bar sits right
     under the grip. Negative margin only — the handle's box height is unchanged,
     so the drag math in controls.js (peekPx) still reads the true peek height. */
  #sidebar.sheet-full #sheetHandle {
    margin-bottom: calc(-1 * env(safe-area-inset-bottom) - 8px);
  }

  /* Drag grabber at the top of the sheet (the touch target for snap/drag). */
  #sheetHandle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    order: 0;
    height: var(--sheet-peek);                     /* the whole peek is the grab target */
    padding-bottom: env(safe-area-inset-bottom);   /* push the grip up, clear of the home indicator */
    cursor: grab;
    touch-action: none;   /* controls.js drives the drag, so suppress native gestures */
  }
  .sheet-grip {
    width: 56px;
    height: 7px;
    border-radius: 4px;
    background: #c2c7d1;
  }

  /* Pinch-zoom is native on phones — drop the on-screen +/- control. */
  .leaflet-control-zoom { display: none; }

  /* Reorder for the sheet: search sits right under the handle so it stays in
     the peek; the brand header is dropped to save vertical space. */
  .brand { display: none; }
  .searchbox      { order: 1; }
  #accountBar     { order: 2; }
  #chips          { order: 3; }
  #placeList      { order: 4; }
  .sidebar-footer { order: 5; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Bottom controls become a vertical column of round, emoji-only buttons on
     the right, all the same 46px size as the locate button. */
  .fab {
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
  }
  .fab-label { display: none; }   /* keep the emoji, drop the text */

  .fab-row {
    flex-direction: column;
    left: auto;
    right: 14px;
    transform: none;
    gap: 10px;
    align-items: center;
    bottom: calc(var(--sheet-peek) + 70px);   /* --sheet-peek already includes the safe-area inset */
  }
  .locate { bottom: calc(var(--sheet-peek) + 14px); }

  /* Attribution: shove it to the bottom-left, lift it above the peek, and make
     it a faint, non-interactive credit so it can't be grabbed or dragged. */
  .leaflet-bottom.leaflet-right {
    right: auto;
    left: 0;
    bottom: calc(var(--sheet-peek) + 2px);
  }
  .leaflet-control-attribution {
    pointer-events: none;
    opacity: 0.6;
    font-size: 9px;
    background: rgba(255, 255, 255, 0.55);
  }
}