/**
 * Mobile hygiene — global rules for portrait-phone viewports (<600px).
 *
 * These are the rules that must apply to every page to prevent the
 * most common mobile UX failures:
 *   1. iOS Safari auto-zooms into any input with font-size < 16px
 *      on focus, then fails to zoom back out — sending the primary
 *      action button off-screen.
 *   2. Tap targets < 44×44pt produce fat-finger misfires (iOS HIG).
 *   3. Fixed-bottom elements overlap the iPhone home indicator
 *      without safe-area padding.
 *   4. Body-level horizontal scroll from any child overflow creates
 *      a disorienting swipe experience.
 *
 * Link this file from every page that carries interactive surfaces:
 *   <link rel="stylesheet" href="/css/mobile-hygiene.css">
 *
 * Rules are wrapped in @media (max-width: 600px) so desktop is
 * entirely unaffected.
 */

@media (max-width: 600px) {

  /* ---------- 1. Kill iOS auto-zoom on form controls ---------- */
  /* Any input, select, or textarea with a computed font-size below
   * 16px triggers iOS Safari's zoom-on-focus. Set a floor of 16px
   * specifically on portrait-mobile so desktop styling is unaffected. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="phone"],
  input[type="search"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ---------- 2. Tap target floor (44×44 per iOS HIG) ---------- */
  /* Every button and button-like element gets a minimum hit area.
   * Overrides via !important are intentional — lots of places set
   * inline or narrower button padding that drops below 44px. */
  button,
  [role="button"],
  .btn,
  a.btn,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exception: ultra-compact pill buttons that are intentionally
   * smaller than 44px (filter pills, category chips). Use the opt-in
   * class `.tap-compact` to skip the floor. */
  .tap-compact {
    min-height: unset !important;
    min-width: unset !important;
  }

  /* Small-variant buttons get a bumped floor too — 36px is a
   * reasonable compromise for secondary actions in dense UIs. */
  .btn--sm,
  .v2-btn--sm {
    min-height: 36px;
  }

  /* Close (×) and icon-only buttons need more generous padding so
   * the glyph is centered in a 44×44 hit area. */
  .icon-btn,
  button.close,
  [aria-label*="Close"],
  [aria-label*="close"],
  [aria-label*="Dismiss"] {
    min-height: 44px;
    min-width: 44px;
    padding: 8px !important;
  }

  /* ---------- 3. Safe-area insets for fixed elements ---------- */
  /* Elements pinned to the bottom of the viewport need extra padding
   * on devices with a home indicator. */
  .fab-container,
  .v2-mobile-nav,
  [data-fixed-bottom] {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
  }

  /* Give scrollable page content clearance so the last rows don't
   * sit under FABs or the home indicator. */
  .v2-container,
  [data-scroll-container] {
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 80px);
  }

  /* ---------- 4. Prevent horizontal body scroll ---------- */
  /* Belt-and-suspenders: if any child overflows, clamp the body so
   * the whole page doesn't slide sideways. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}