/* _shared/mobile.css — canonical mobile hygiene. Import once per project.
 *
 * Kills the mobile pain points I keep re-solving:
 * - Horizontal overscroll bouncing the whole page sideways
 * - iOS zoom-on-focus for inputs <16px font size
 * - 100vh jumps when Safari hides/shows the address bar
 * - Notch-area nav overlap on iPhone X+
 * - Tap-highlight flash
 * - Tap targets smaller than 36px
 *
 * Scope: global rules via html/body + :root. Component-scoped rules use the
 * .shared-* prefix so they don't collide with per-project classes.
 */

/* ── Touch + overflow hygiene ── */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], input[type="submit"] { touch-action: manipulation; }

/* ── Any horizontal scroll container keeps its swipes local ── */
.chip-row, .hscroll, .topnav, [data-hscroll] {
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Viewport height that survives Safari address-bar toggles ── */
:root { --vh100: 100vh; --vh100: 100dvh; }
.shared-full-vh { height: 100vh; height: 100dvh; }
.shared-map-full, #map.shared-map-full { width: 100vw; height: 100vh; height: 100dvh; }

/* ── Safe-area aware floating UI ── */
.shared-top-nav {
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.shared-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Inputs don't trigger iOS zoom ── */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
input[type="tel"], select, textarea {
  font-size: 16px;
}

/* ── Tap targets ≥ 36px when requested ── */
.shared-tap, .shared-tap button, .shared-tap a {
  min-height: 36px;
  min-width: 36px;
}

/* ── Mobile-specific tweaks ── */
@media (max-width: 700px) {
  .shared-modal { padding: 20px 10px !important; }
  .shared-modal .card { padding: 16px 16px !important; border-radius: 4px !important; }
}