/* mobile-base.css — shared mobile / iOS-app polish for all Trade Bangers pages.
   Linked from every HTML in /site. Pair with the locked viewport meta:
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
                                    user-scalable=no, viewport-fit=cover,
                                    interactive-widget=resizes-content" />
   and the iOS PWA meta tags (apple-mobile-web-app-capable, status-bar-style, etc.).
*/

* { -webkit-tap-highlight-color: transparent; }

html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  touch-action: manipulation;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

button, a, [role="button"] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* iOS Safari zooms inputs whose font-size is < 16px on focus.
   Bump to 16px on small screens so the page never rescales. */
@media (max-width: 600px) {
  input, textarea, select { font-size: 16px !important; }

  /* Constrain Privy's auth modal so it doesn't bleed past the viewport on phones.
     The four selectors cover the various data-attrs / id prefixes Privy v2 uses. */
  [data-privy-dialog],
  [data-privy-overlay] > div,
  div[id^="privy-"] > div[role="dialog"],
  div[role="dialog"][aria-modal="true"] {
    max-width: min(420px, calc(100vw - 24px)) !important;
    max-height: min(640px, calc(100dvh - 32px)) !important;
    width: auto !important;
    box-sizing: border-box;
  }
  [data-privy-overlay],
  div[id^="privy-"] {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }
}

/* Privy iframe sizing (used for some auth flows) — never wider than viewport. */
iframe[src*="privy"] { max-width: 100vw; max-height: 100dvh; }