/* ═══════════════════════════════════════════════════════════════════════
   mobile-forms.css — phone ergonomics for the account & auth pages.

   WHY THIS FILE EXISTS
   account · welcome · login · verify-email · payment-success ·
   reset-password · profiles are self-contained pages: each carries its own
   inline <style> and loads NO shared stylesheet. The site-wide mobile rules
   at the end of styles.css therefore never reach them — yet these are the
   exact pages a brand-new user meets while registering, which is where a
   real user hit trouble on her phone (2026-08-06).

   Rather than duplicate the same block into seven files, they all link this.

   Two rules, both hard thresholds rather than preferences:
     1. 16px minimum font on a focusable input. Below it, iOS Safari zooms
        the whole page on focus and the layout lurches on first tap.
     2. 44px minimum height on anything tappable (Apple HIG).

   Only the touchable BOX changes — type sizes and visual weight are left
   alone, so each page still looks exactly as designed.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── 1. No iOS auto-zoom on focus ── */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input:not([type]),
    textarea,
    select,
    /* Container-scoped rules like `.modal input { font-size: 0.85rem }`
       out-specify a bare `input[type="text"]` (0-1-1 vs 0-1-0) and kept a
       field at 13.6px, still triggering the zoom. Matching the same shape
       here wins on source order without reaching for !important. */
    .modal input,
    .modal textarea,
    .modal select,
    form input,
    form textarea,
    form select {
        /* Literal 16px — `max(16px, 1em)` resolves against the element's own
           reduced size and silently lands under the threshold. */
        font-size: 16px;
        min-height: 44px;
    }

    /* Checkboxes and radios are exempt: they are fixed-size native controls,
       not text entry, so neither the 16px nor the 44px rule applies to the
       box itself (their LABEL gets the hit area, below). */
    input[type="checkbox"],
    input[type="radio"] {
        font-size: inherit;
        min-height: 0;
    }

    /* ── 2. Comfortable tap targets ── */
    button,
    .btn,
    [role="button"],
    a[class*="btn"],
    a[class*="cta"],
    a[class*="row"],
    a[class*="link"]:not([class*="inline"]) {
        min-height: 44px;
    }

    /* Buttons that only wrap an icon need width too, and their glyph
       centred so growing the box doesn't shift the icon. */
    button[class*="back"],
    button[class*="close"],
    button[class*="toggle"],
    button[class*="icon"] {
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Checkboxes and radios are genuinely small controls — give the hit area
       to their LABEL instead of inflating the box itself, which would break
       custom-styled toggles. */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* A row of two buttons rarely fits at 390px — let them stack. */
    [class*="social-btns"],
    [class*="btn-row"] {
        grid-template-columns: 1fr;
    }
}