/* ===========================================================================
   MOBILE INPUT ZOOM — the reason the hub "moves around" on a phone
   ===========================================================================

   iOS Safari zooms the page in whenever you focus a form control whose computed
   font-size is under 16px. It does not zoom back out afterwards. Every field in
   this hub was under that threshold:

     .auth-input          0.95rem   15.2px   <- the sign-in field, so it happens
     .form-input          0.92rem   14.7px      before you have even reached the
     .form-select         0.92rem   14.7px      app
     .form-textarea       0.92rem   14.7px
     .search-input        0.90rem   14.4px
     .tag-input           0.85rem   13.6px
     .soc-select-small    0.74rem   11.8px

   So: tap the email box, the page lurches in and stays there; every screen
   afterwards is scrolled and oversized, and it reads as the layout drifting
   about on its own. Nothing is actually moving — the viewport is.

   16px is the threshold, not a preference. 15.9px zooms. There is no way to
   opt out of the behaviour other than meeting it, short of
   `maximum-scale=1` on the viewport, which breaks pinch-zoom for anyone who
   needs it to read — a genuinely worse trade.

   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS AT ALL
   ---------------------------------------------------------------------------
   It has to load LAST. css/shell.css carries a comment claiming it "loads after
   the inline <style> and after every other stylesheet" — that was true when it
   was written and is not true now: index.html lists shell.css FIRST and
   hours.css last. A class rule here ties on specificity (0,1,0) with the
   originals, so source order decides, and only a file loaded after all of them
   wins. Hence a separate file rather than a few lines appended to shell.css.

   If you add a stylesheet later, put it BEFORE this one.

   ---------------------------------------------------------------------------
   WHY ONLY ON SMALL SCREENS
   ---------------------------------------------------------------------------
   Desktop has no zoom-on-focus behaviour and the smaller type is deliberate
   there, so the rule is scoped to the widths where a touch keyboard appears.
   The bare element selectors are included alongside the classes to catch any
   field that was never given a class.
   =========================================================================== */

@media (max-width: 1023px) {
  input,
  select,
  textarea,
  .auth-input,
  .form-input,
  .form-select,
  .form-textarea,
  .search-input,
  .tag-input,
  .soc-select-small,
  .hrs-input,
  .ik-pick-input,
  .pwr-input,
  .today-receipt-input {
    /* px deliberately, not rem: rem would follow the root font size and a user
       who has reduced it would silently drop back under the threshold. */
    font-size: 16px;
  }

  /* Checkboxes and radios have no text to zoom for, and 16px would inflate the
     box. Put them back. */
  input[type="checkbox"],
  input[type="radio"] {
    font-size: inherit;
  }
}