/*
 * Form tweaks that sit on top of the prebuilt styles.css.
 *
 * Kept in its own file because styles.css is a generated artifact — anything
 * added there would be lost the next time it is regenerated. Load this after
 * styles.css in every layout that renders a form.
 */

/*
 * Stop mobile Safari zooming the page in when a field receives focus.
 *
 * iOS auto-zooms whenever the focused control's computed font-size is under
 * 16px, and it never zooms back out afterwards — the user is left having to
 * pinch out manually. Most fields in this app use Tailwind's `text-sm` (14px),
 * so they all trigger it. Bumping touch devices to 16px removes the trigger.
 *
 * Scoped with `pointer: coarse` rather than a width breakpoint: a phone held
 * in landscape can be wider than the usual mobile breakpoints and still zooms.
 * `!important` is needed to outrank the `text-sm` utility class.
 *
 * Note: this deliberately avoids `maximum-scale=1` / `user-scalable=no` on the
 * viewport meta, which fixes the same symptom by disabling pinch-zoom entirely
 * (a WCAG 1.4.4 failure).
 */
@media (pointer: coarse) {
    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[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input:not([type]),
    select,
    textarea {
        font-size: 16px !important;
    }
}