/*
 * W9-T10 / W8-D02 finding N3 — Studio (Filament) panel mobile input & control sizing.
 *
 * Loaded ONLY on the `studio` panel, via a scoped STYLES_AFTER render hook (so it wins over
 * Filament's own same-specificity rules). CSP-safe: served as a same-origin stylesheet (`style-src
 * 'self'`), never inline. Mobile-only (max-width: 640px) — DESKTOP IS UNTOUCHED.
 *
 * The audit measured, at 390x844 iOS emulation, on /studio/login and /studio/register:
 *   - `.fi-input` at font-size 14px -> iOS Safari auto-zooms the viewport on focus; height 36px.
 *   - primary submit ("Sign in"/"Sign up") 342x36; password reveal `.fi-icon-btn` 32x32;
 *     "remember" checkbox 16x16 — all under the 40-44px tap-target floor.
 *
 * Fix: inputs to >=16px font (kills the iOS auto-zoom) and >=44px height; interactive controls to
 * >=40px effective. `!important` guards against Tailwind utility ordering on the same elements.
 */
@media (max-width: 640px) {
    /* Text/email/password inputs and selects: 16px font (no iOS auto-zoom), >=44px tall. */
    .fi-input {
        font-size: 1rem !important; /* 16px */
        min-height: 2.75rem !important; /* 44px */
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }

    /* Primary form buttons (Sign in / Sign up / wizard submit): >=44px tall. */
    .fi-btn {
        min-height: 2.75rem !important; /* 44px */
    }

    /* Small icon buttons (password reveal): >=40px square tap target. */
    .fi-icon-btn {
        min-width: 2.5rem !important; /* 40px */
        min-height: 2.5rem !important;
    }

    /* "Remember me" and other checkboxes: larger control (20px) + a >=40px tap row. */
    .fi-checkbox-input {
        width: 1.25rem !important; /* 20px */
        height: 1.25rem !important;
    }

    .fi-fo-field-wrp .fi-checkbox {
        min-height: 2.5rem; /* 40px effective row */
    }
}