/* Stop iOS zooming the page when a form field takes focus.
 *
 * Mobile Safari and the WKWebView inside the Capacitor shell auto-zoom on
 * focus whenever the focused field's font-size is under 16px — and they never
 * zoom back out. Bootstrap's .form-control-sm is 0.875rem = 14px, and this app
 * uses -sm fields nearly everywhere (deliberately: dense forms have to fit one
 * screen). So on an iPhone, tapping the very first field on the login page
 * scaled the whole page up: the card ended up wider than the screen with its
 * Sign in button cut off, and the content slid under the status bar. It looked
 * like a broken responsive layout; it was the keyboard.
 *
 * Reported 2026-08-02 from TestFlight build 1.0.4, and reproducible in mobile
 * Safari on app.somalynk.com — this was never iOS-app-specific.
 *
 * Why pointer:coarse and not a width breakpoint: the compact desktop sizing is
 * intentional and must survive a narrow desktop window. Only touch input
 * triggers the zoom, so only touch devices need the larger text.
 *
 * The other cure is `maximum-scale=1, user-scalable=no` in the viewport meta.
 * Four of the mobile upload pages already do that. It works, but it also takes
 * pinch-zoom away from everyone, which is an accessibility regression — do not
 * spread it to new pages. Load this file instead.
 *
 * 2026-08-14 — the rules below were losing to Bootstrap on every field inside an
 * `.input-group-sm`. `.input-group-sm > .form-control` is a two-class selector
 * (0,2,0); a bare `.form-control` / `.form-control-sm` is one class (0,1,0), so
 * loading this file after Bootstrap did not help — the descendant selector won and
 * the field stayed at 14px. That covered the login password box (it sits in an
 * input-group with the eye toggle) and the assistant's ask box, i.e. the first
 * field a clinician taps on a phone. Result: iOS zoomed in on focus, never zoomed
 * back, and the whole app read as "the font is far too big on a phone".
 * Any new -sm variant added here must be matched by its `.input-group-sm >` form.
 */
@media (pointer: coarse) {
  .form-control,
  .form-control-sm,
  .form-select,
  .form-select-sm,
  input,
  select,
  textarea,
  .input-group-sm > .form-control,
  .input-group-sm > .form-control-sm,
  .input-group-sm > .form-select,
  .input-group-sm > .form-select-sm {
    font-size: 16px;
  }
}