/*
 * Stop iOS Safari zooming the page when a form field is tapped.
 *
 * WHAT CAUSES IT
 *
 * Safari on iPhone zooms the viewport whenever a focused form control's
 * computed font-size is under 16px, so the text it is about to show is legible.
 * It is not configurable and it is not a bug — it is Safari deciding the field
 * is too small to type into. The page is left zoomed in afterwards, which is
 * what makes it feel broken.
 *
 * WHY NOT user-scalable=no
 *
 * The other way to stop it is `maximum-scale=1, user-scalable=no` on the
 * viewport meta. That takes pinch-zoom away from everybody, fails WCAG 1.4.4,
 * and iOS has ignored it since version 10 anyway. Raising the font size fixes
 * the cause instead of disabling the symptom, and leaves pinch-zoom working.
 *
 * WHY !important
 *
 * 16px here is a floor, not a preference. The fields it has to reach are
 * styled from three different places — utility classes in the markup,
 * component rules in the v4 stylesheets, and the browser's own default for
 * unstyled controls (about 13px) — and a rule that loses a specificity contest
 * to any one of them leaves the zoom in place on that field. Nothing on this
 * site sets a control above 16px, so this raises rather than shrinks; a field
 * that genuinely wants to be bigger should say so here.
 *
 * WHY ONLY ON TOUCH
 *
 * `pointer: coarse` is a phone or tablet, where the zoom happens and where
 * 16px is the comfortable minimum anyway. Desktop keeps the sizes the designs
 * specify.
 *
 * Loaded last on every page, after @yield('css'), so it applies to page
 * stylesheets that have not loaded yet at the point app.css is read.
 */

@media (pointer: coarse) {
    /* Every control that takes typed input. Checkboxes, radios, ranges and
       colour swatches are not typed into and do not trigger the zoom, and
       forcing a font size on them only moves their box around. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}