/* ════════════════════════════════════════════════════════════════════
   mobile-fixes.css — minimal global overrides for iOS/Android UX issues
   ════════════════════════════════════════════════════════════════════

   Loaded after each page's own <style> block so these win on cascade.
   Audit findings (Sprint 7 — May 2026):

   1. iOS Safari auto-zooms when an <input> with font-size < 16px gets
      focus. Annoying, breaks layout. Fix: force ≥16px on form fields.

   2. .ask-alex-btn and .term-btn (term-popup triggers) are ~17px tall
      with 11px text — way below Apple HIG's 44×44px minimum. Users
      with bigger fingers miss them. Fix: bump to 32px min-height with
      slightly larger padding (still inline, doesn't blow up layout).

   3. .toast (and similar fixed-bottom UI) sits at `bottom:24px` — on
      iPhone 14+ the home indicator (34px) covers it. Fix: add
      `env(safe-area-inset-bottom)` to the bottom offset.

   4. .progress-overlay celebrations use `inset:0` for height — when
      the iOS keyboard is open, the centered card can scroll out of
      view. Fix: use `dvh` for height where applicable.

   Strategy: scope rules to mobile-only via `@media (max-width: 768px)`
   when the desktop layout is fine. Keep iOS-specific (`@supports`) to
   safe-area rules. No `!important` unless the inline style is fighting
   us (input font-size is the main case).
   ──────────────────────────────────────────────────────────────────── */

/* ── 1. Prevent iOS zoom-on-focus for form fields ──────────────────── */
/* This rule MUST use !important — many pages set inline font-size in
   the form-input class. Only kicks in on touchscreen-ish widths. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── 2. Touch targets: Ask Alex term buttons ─────────────────────── */
/* On mobile, bump inline term-popup triggers to a finger-friendly size.
   Desktop stays compact (no override). */
@media (max-width: 768px) {
  .ask-alex-btn,
  .term-btn {
    min-height: 32px;
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.2;
  }
}

/* ── 3. Bottom safe-area insets ──────────────────────────────────── */
/* Anything fixed at bottom needs to clear the iPhone home indicator.
   Uses CSS `env()` which gracefully degrades on non-iOS to 0. */
.toast {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}
.continue-fab {
  /* Mirror card's "Continue" FAB if it ever becomes visible again */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}
#continue-fab {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Cookie consent banner (alex_cookie_consent.js sets bottom inline) */
#alex-cookie-banner {
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ── 4. Modal viewport units for keyboard handling ───────────────── */
/* `dvh` (dynamic viewport height) accounts for the iOS URL bar +
   on-screen keyboard. Falls back to vh on older browsers. */
@supports (height: 100dvh) {
  .progress-overlay {
    height: 100dvh;
    overflow-y: auto;
  }
  .progress-card {
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
  }
}

/* ── 5. Reduce tap-highlight flash on mobile ─────────────────────── */
/* Default iOS gray-flash on tap looks dated. Most apps disable it. */
button,
a,
.sim-opt,
.choice,
.preset-btn,
.nbtn {
  -webkit-tap-highlight-color: rgba(124, 58, 237, 0.15);
}

/* ── 6. Stop horizontal-scroll surprises ─────────────────────────── */
/* Defensive: even if some module embeds a wider table, the body
   should clip rather than scroll the whole page. */
html, body {
  overflow-x: hidden;
}

/* ── 7. Disable text-size-adjust on iOS ──────────────────────────── */
/* iOS Safari sometimes scales text up when rotating to landscape. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}