/* ─────────────────────────────────────────────────────────────────────
 * mobile-polish.css — shared iOS / mobile fixes across all pages.
 *
 * Included by every page after its own <style> block, so these rules
 * win where they overlap. Each fix has a comment explaining WHICH iOS
 * or mobile quirk it addresses, so future-Vicente knows what's load-
 * bearing and what's safe to delete.
 *
 * Tested against:
 *   - iOS Safari 17+ (iPhone 12 mini, iPhone 15)
 *   - iOS Safari Mobile 16+
 *   - Chrome on Android 13+
 *   - Samsung Internet
 * ───────────────────────────────────────────────────────────────────── */

/* === Global iOS / mobile baselines (apply at all viewport sizes) ===== */

html {
  /* iOS Safari auto-enlarges text in landscape — disable to keep our
     typographic hierarchy intact. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Kill the gray tap-highlight flash that iOS draws on links/buttons.
     We use our own :active styles. */
  -webkit-tap-highlight-color: transparent;
  /* Prevent the iOS rubber-band scroll past the document end. (Doesn't
     affect intentional momentum scrolling inside the page.) */
  overscroll-behavior-y: none;
}

/* iOS Safari includes the URL bar in `100vh`, which breaks any full-
   height layout. Use `100dvh` where supported, falling back gracefully.
   Apply to elements that explicitly want viewport height — body's
   `min-height` already uses 100vh so we patch it conditionally. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

/* === Form inputs — prevent iOS auto-zoom ============================ */
/* iOS zooms in on any <input> with font-size below 16px. We use that
   font sizing on desktop for visual harmony but force 16px on mobile
   to avoid the zoom jump that disorients users. */
@media (max-width: 720px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* === Touch targets — min 44x44 per Apple HIG ======================== */
@media (max-width: 720px) {
  /* Nav links benefit most from the bump; they're small text in dense
     rows on mobile. Pad them out without breaking the visual line. */
  nav.top a.nav-link {
    padding: 10px 6px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Buttons (.btn, .add, .test, .unlock, .danger) get a consistent
     floor. We only set min-height; padding/width stay author-defined
     so cards keep their shapes. */
  button, .btn, a.btn {
    min-height: 44px;
  }

  /* Footer links — same reasoning as nav. */
  footer ul.links a {
    padding: 8px 4px;
    display: inline-block;
    min-height: 36px;
  }
}

/* === Safe-area insets — iPhone notch + home indicator =============== */
/* The top nav and the footer get padded by the safe-area inset so they
   don't sit underneath the notch (top) or the home indicator (bottom).
   `env(...)` is a no-op on devices without insets. */
nav.top {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
nav.top > .container {
  padding-top: env(safe-area-inset-top, 0);
}
footer {
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

/* === Container side-padding floor on small screens ================== */
/* Existing pages set container side padding to 24px. On very narrow
   phones (320-360px wide) that's a touch generous; tighten so the
   content gets more room but text never reaches the edge. */
@media (max-width: 380px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* === BYOK page — add responsive rules (none existed) ================ */
@media (max-width: 720px) {
  body[data-locked] header.hero h1 { font-size: 2rem; }
  body[data-locked] section.passphrase,
  body[data-locked] section.promise { padding: 20px 18px; }
  body[data-locked] .provider-card { padding: 16px 18px; }
  body[data-locked] .provider-card .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  body[data-locked] .provider-card .field {
    flex-direction: column;
  }
  body[data-locked] .provider-card .field button {
    width: 100%;
  }
}

/* === Honor reduced-motion globally ================================== */
/* Each page that has the Day-0 animation already respects this — but
   we also turn off our own scroll-behavior so deep-link jumps don't
   smooth-scroll for users who explicitly asked us not to animate. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* === Honor reduced-data (saves bandwidth on metered connections) ==== */
/* If the user has Data Saver on, we skip optional decorative SVGs.
   The brand SVG itself (Navi in moonlit meadow) we keep — it IS the
   page. Decorative constellations and assets stay turned off. */
@media (prefers-reduced-data: reduce) {
  .nv-deco, .deco-only { display: none !important; }
}

/* === Print styles (rare but cheap) ================================== */
/* If someone prints the manifesto or the press brief: clean black-on-
   white, no nav, no footer. */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  nav.top, footer, .nv-bars, .nv-fairy, .nv-glow, .nv-countdown { display: none !important; }
  a { color: black !important; border-bottom: 1px solid #999 !important; }
}