/* ============================================================
   SPORT PLAY HUB — Mobile Navigation Layer
   For player-facing pages (event-checkin.html and similar).
   Load AFTER sport-play-hub.css — this file only overrides/adds,
   it doesn't redefine brand tokens.
   ============================================================ */

/* ── Why this file exists ────────────────────────────────────
   event-checkin.html already had a 600px breakpoint before this
   file existed. What was missing was not sizing — it was:
     1. Touch targets under the 44x44 (iOS HIG) / 48x48 (Material)
        minimum in a few places.
     2. No distinction between "phone in one hand, thumb reach"
        zones and desktop click targets.
     3. No handling for the on-screen keyboard pushing the active
        step's primary action off-screen on short phone viewports.
   The back-button/history problem is NOT here — that's a JS
   problem, fixed in event-checkin.html directly (see the
   goStep()/popstate patch). A stylesheet can't fix navigation
   history.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* ── Baseline touch targets ──────────────────────────────
     Anything acting as a button/link gets a real tap target,
     even if its visible content is smaller. This is additive
     padding via min-height, not a redesign of any component. */
  .sph-btn,
  .rsvp-btn,
  .plan-tab,
  .adm-nav-item,
  .adm-btn-icon,
  .step-dot,
  button {
    min-height: 44px;
  }

  .adm-btn-icon {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }

  /* ── Thumb-reach primary actions ─────────────────────────
     On a phone, the primary next-step action (RSVP, Next,
     Submit) should live in the bottom third of the screen,
     not require a stretch to the top. Where a step's main CTA
     sits inside .step-card, pin it low with extra bottom
     clearance so it isn't hidden behind the browser chrome or
     an open keyboard. */
  .step-card {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* ── Sticky footer action bar ────────────────────────────
     Opt-in class: wrap a step's primary CTA button in
     <div class="sph-mobile-sticky-cta">...</div> to pin it to
     the bottom of the viewport instead of the bottom of the
     card. Use for RSVP / Next / Submit — not for secondary or
     destructive actions. */
  .sph-mobile-sticky-cta {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(9,21,40,0) 0%, rgba(9,21,40,0.92) 28%, rgba(9,21,40,0.96) 100%);
    z-index: 30;
  }

  /* ── Keyboard-aware code inputs ───────────────────────────
     When a numeric keypad opens on a short phone screen, the
     gate/player code input can end up under the keyboard. Give
     it scroll-margin so scrollIntoView() (called on focus)
     doesn't leave it flush against the top edge, and keep font
     size at 16px+ so iOS Safari doesn't auto-zoom on focus. */
  .gate-code-input,
  .code-input,
  input[type="tel"],
  input[type="text"],
  input[type="date"],
  select {
    font-size: max(16px, 1em);
    scroll-margin-top: 24px;
  }

  /* ── Comfortable spacing between stacked tap targets ──────
     Prevents accidental mis-taps between adjacent controls
     (e.g. the plan-tab pair, or step-2's Back/Next row). */
  .rsvp-row,
  .plan-panel-tabs {
    gap: 12px;
  }

  /* ── Admin sidebar: NOT YET SAFE FOR MOBILE ───────────────
     .adm-shell / .adm-sidebar (sport-play-hub.css) is a fixed
     210px flex column with no responsive behavior at all. This
     file does not attempt to fix it, because none of the admin
     HTML (players.html, groups.html, etc.) was available to
     test against. Treat "admin pages on mobile" as unverified
     until those files are reviewed — collapsing .adm-sidebar
     into a hamburger/off-canvas drawer is the likely fix, but
     it needs the real markup, not a guess.
     ──────────────────────────────────────────────────────── */
}

/* ── Reduced motion ──────────────────────────────────────────
   Respect the player's OS-level setting; the flow already
   scrolls and fades between steps, which can be uncomfortable
   for vestibular-sensitive users if forced. */
@media (prefers-reduced-motion: reduce) {
  .sph-anim-fadeUp,
  .sph-anim-fadeIn,
  .step-card,
  html {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}