/* ═════════════════════════════════════════════════════════════════════
   iphone.css — iPhone-specific overrides
   Scoped behind media queries so desktop/Android are untouched.

   Target selectors:
     - @supports (-webkit-touch-callout: none)  → iOS Safari only
     - @media (hover: none) and (pointer: coarse)  → any touch device
     - @media (max-width: 430px)  → iPhone Pro Max width and below
   ═════════════════════════════════════════════════════════════════════ */

/* ── Respect users who ask for reduced motion (iOS "Reduce Motion" setting) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] { display: none !important; }
}

/* ── Kill hover sticky-state on touch devices (hover-only tooltips etc.) ── */
@media (hover: none) and (pointer: coarse) {
  /* Neutralise any `:hover` that reveals a menu/tooltip on touch.
     Specific hover-reveal patterns in the codebase get forced-visible via
     tap handlers in JS; here we just stop them from getting stuck. */
  a:hover, button:hover, .btn:hover, [role="button"]:hover {
    background-color: inherit;
  }
}

/* ════════════════════════════════════════════════════
   iPhone — viewport, typography, inputs
   ════════════════════════════════════════════════════ */

/* iOS Safari / Chrome / any WebKit on iOS */
@supports (-webkit-touch-callout: none) {

  /* 100vh is broken on iOS Safari (address bar shifts).
     Force dynamic viewport height on the root shell. */
  html, body { min-height: -webkit-fill-available; }
  #app-shell { height: 100dvh !important; }

  /* Never let the OS bump font size in landscape */
  html { -webkit-text-size-adjust: 100%; }

  /* Stop iOS auto-zoom-on-focus by enforcing ≥16px on inputs.
     Main styling uses `var(--font)` so this overrides only the size. */
  input, select, textarea {
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
  }

  /* Smooth momentum scrolling on any overflow container */
  #tab-body, .modal-overlay, .dropdown-menu, .scroll-area {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Kill the blue flash on tap */
  * { -webkit-tap-highlight-color: transparent; }

  /* Disable text callout (copy/paste menu) on UI chrome; keep it for prose */
  button, .btn, [role="button"], .tab-btn, .topbar-icon-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
            user-select: none;
    touch-action: manipulation;
  }
}

/* ════════════════════════════════════════════════════
   iPhone — touch target floors
   Apple HIG: minimum tappable area is 44×44 pt.
   ════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) and (max-width: 480px) {
  .btn,
  .btn-browse,
  .btn-primary,
  .btn-danger,
  .tab-btn,
  .topbar-icon-btn,
  [role="button"] {
    min-height: 44px !important;
    min-width: 44px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Icon-only buttons: keep square 44×44 */
  .topbar-icon-btn { width: 44px !important; }

  /* Range slider thumb: enlarge hit area */
  input[type="range"] { height: 32px; }
}

/* ════════════════════════════════════════════════════
   iPhone — safe-area for notch / home indicator
   Applied even outside standalone (browser tab) so the
   chrome doesn't overlap landscape-rotated content.
   ════════════════════════════════════════════════════ */
@supports (padding: max(0px)) {
  @media (max-width: 820px) {
    #tab-nav,
    .app-topbar,
    #topbar-logo {
      padding-top: max(env(safe-area-inset-top, 0px), 4px);
      padding-left: max(env(safe-area-inset-left, 0px), 8px);
      padding-right: max(env(safe-area-inset-right, 0px), 8px);
    }
    #statusbar,
    .bottom-nav,
    .tabbar,
    .app-footer {
      padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
    }
  }
}

/* ════════════════════════════════════════════════════
   iPhone portrait — typography & spacing
   ════════════════════════════════════════════════════ */
@media (max-width: 430px) and (orientation: portrait) {
  :root {
    /* Nudge the whole scale up a step on small screens */
    --font-xs: 10px;
    --font-sm: 11px;
    --font-base: 12px;
    --font-md: 13px;
    --font-lg: 15px;
    --font-xl: 19px;
  }

  html, body { font-size: 14px; line-height: 1.5; }

  /* Prevent side-scroll traps from wide data tables */
  .pool-table,
  .vtable,
  .dd-stat-grid {
    max-width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Inputs already forced to 16px inside @supports block above */

  /* Tighten modals to fit */
  .modal-overlay > div,
  #badge-gallery-content {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 48px) !important;
  }
}

/* ════════════════════════════════════════════════════
   iPhone — kill autoplay background video on mobile
   (hero-bg.mp4 saves battery + bandwidth)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  video[autoplay].hero-bg,
  #hero-bg-video,
  video.bg-video {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════
   iPhone standalone (installed to Home Screen)
   ════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  /* Hide browser-only install banners once installed */
  #sp-ios-install { display: none !important; }

  /* Bump status bar padding for dynamic island devices */
  html.sp-standalone #app-shell {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ════════════════════════════════════════════════════
   Focus-visible — keep keyboard focus outlines on
   iPad with a paired keyboard without showing a ring
   on plain finger taps.
   ════════════════════════════════════════════════════ */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-blue, #3b82f6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════
   iOS scroll/rubber-band hardening for horizontal
   regions that should NOT bounce horizontally.
   ════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {
  html, body {
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }
  /* Allow horizontal panning inside explicit scrollers */
  .pool-table, .vtable, .scroll-x {
    touch-action: pan-x pan-y;
  }
}

/* ════════════════════════════════════════════════════
   Landing-page hover protection on touch devices.
   The marketing page has ~60 :hover rules inlined;
   rather than rewrite the file, we neutralise the
   most common sticky-hover traps here.
   ════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .feature-card:hover,
  .aff-card:hover,
  .about-logo:hover,
  .cta-btn:hover,
  .nav-link:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ════════════════════════════════════════════════════
   iPad — treat as tablet, not phone.
   (iPad in Safari reports pointer:fine with hover,
   so most touch rules above won't fire — add a few
   iPad-specific tweaks here.)
   ════════════════════════════════════════════════════ */
@media (min-width: 820px) and (max-width: 1180px) and (pointer: coarse) {
  .btn, .tab-btn, .topbar-icon-btn, [role="button"] {
    min-height: 40px;
  }
  input, select, textarea { font-size: 15px; }
}