/* =============================================================================
   MOBILE.CSS — mobile INVARIANTS. Nothing else belongs here.

   Why this file exists (docs/MOBILE_CSS_ROLLOUT.md §1.2/§3):
   tokens.css declares `@layer tokens, reset, layout, components, utilities`.
   The old global iOS-zoom guard lived in @layer layout, while the base form
   rule lives in @layer components — and layer order is resolved BEFORE
   specificity, so components won outright and :where()'s zero specificity
   never got a vote. The global guard was dead for every control that rule
   matched, and fields rendered 14px on a phone, which is exactly what makes
   iOS Safari auto-zoom.

   `utilities` is declared LAST, so it beats components by design. That is the
   semantics a non-negotiable invariant needs. Selectors stay :where()-wrapped
   (zero specificity) on purpose — the LAYER does the winning, so
   scripts/css_specificity_audit.py's invariant is untouched and no component
   style is silently outranked.

   RULES FOR THIS FILE
   - Invariants only. If a rule names a component prefix it belongs at the END
     of that component's own file, not here.
   - A component that must legitimately exceed these writes that one rule
     OUTSIDE any @layer — unlayered author styles beat every layer.
   - Template <style> blocks are unlayered and therefore beat this file. Any
     such block that sets an input font-size owes its own <=768px 16px line in
     that same block (MOBILE_UX §4).
   ============================================================================= */
@layer utilities {

@media (max-width: 768px) {
  /* iOS Safari zooms the viewport whenever a focused control computes below
     16px, and leaves the layout shifted afterwards. Non-text controls are
     excluded — they never trigger the zoom and sizing them here would fight
     component styling. */
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
    select,
    textarea,
    .field-input
  ) {
    font-size: 16px;
  }
}

}  /* end @layer utilities */