/*
 * touch-inputs.css: text fields are at least 16px on touch screens.
 *
 * iOS (Safari AND Chrome, both WebKit) zooms the whole page in when a field
 * under 16px gets focus, and leaves it zoomed. That is the jump on
 * tap-to-edit. Measured 2026-09-25 at 390px: 101 of admin_tickets' 112 text
 * fields were 12-15.2px. 16px is also the usual mobile minimum for legibility.
 *
 * (hover: none) and (pointer: coarse) = phones and tablets, whatever their
 * width; desktops (even touch laptops, which have a mouse) are untouched.
 * NOT maximum-scale=1 in the viewport meta: that disables pinch-zoom, an
 * accessibility regression (see design-system.css #2572).
 *
 * !important because many fields size themselves inline or with id rules.
 * The selectors sit inside :where(), so this sheet has ZERO specificity: the
 * :not(#id) exclusions below would otherwise give it ID-level weight and beat
 * other files' deliberate !important sizes (that is how it once shrank the Take
 * Payment amount). With :where(), a field's own !important rule wins; the
 * exclusions still guard the large fields sized WITHOUT !important.
 * A flat 16px would also SHRINK fields that are deliberately larger, so those
 * are excluded (measured 2026-09-25):
 *   .ds-input-lg           design-system's large variant (18px, check-in kiosk)
 *   .customer-search-input customer_detail's LARGE full-page search (17.6px
 *                          inline, ~L1405). Its other consumer, the small
 *                          header copy, needed 16px too -- fixed at the
 *                          class's own default instead of via this
 *                          exclusion (#3524)
 *   #2fa-verify-code       admin_settings 2FA code box (24px inline). An id
 *                          that starts with a digit is not a valid #selector,
 *                          and an invalid selector drops the WHOLE rule, so it
 *                          is matched as an attribute.
 *   #service-category      check-in page service picker (17.6px)
 *   .phone-input           portal-login phone box (18px)
 *   .code-inputs input     portal-login code digits (22px). By the CLASS on
 *                          purpose: the portal's own code boxes (#code-inputs,
 *                          no such class) and other one-time-code fields are
 *                          small and must be lifted.
 *   .verify-input input    portal code digits (24px)
 *   #custom-amount         pay page "other amount" box (24px inline; renders
 *                          only after the customer picks a custom amount)
 *   .pin-digit             staff PIN prompt digits (24px, js/pin-prompt.js)
 *   .invoice-doc-title-input  invoice document title (18px)
 *   #edit-firstname, #edit-lastname  customer_detail name editor (20.8px inline)
 *   .pi-amtbox input       Take Payment overlay amount (30px / 26px, js/payment-intake.js).
 *                          Excluding it here is required: this rule's :not(#id)
 *                          arguments give it ID-level specificity, which beats that
 *                          file's own "#payment-intake-overlay .pi-amtbox input"
 *                          rule even though both are !important.
 *
 * INHERITED SIZES: a field whose inline style says font-size: inherit takes its
 * parent's size (the pay page amount, #main-amount-input, inherits 48px). A flat
 * 16px would shrink those, so they get max(16px, 1em) instead: for font-size,
 * 1em is the PARENT's size, so the field is never smaller than its parent and
 * never under 16px.
 *
 * The list came from a scan of every frontend .html/.css/.js for a field
 * declared above 16px (2026-09-25), widened 2026-09-26 to inherited and
 * rem/em sizes and to CSS rules that size fields. Add to it when you add a
 * large field: backend/__tests__/frontend/touchInputsLargeFields.test.js fails
 * until you do.
 *
 * Checked by scripts/mobile-audit.js: no field under 16px at touch emulation,
 * and no field SHRUNK by this sheet (measured with it off, then on).
 * Linked from every page that loads design-system.css, and from the customer
 * pages that do not: index_split.html (tenant-root check-in), portal.html,
 * portal-login.html, pay.html, verify-email.html.
 */
@media (hover: none) and (pointer: coarse) {
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]):not(.ds-input-lg):not(.customer-search-input):not([id="2fa-verify-code"]):not(.phone-input):not(.code-inputs input):not(.verify-input input):not(#custom-amount):not(.pin-digit):not(.invoice-doc-title-input):not(#edit-firstname):not(#edit-lastname):not(.pi-amtbox input):not([style*="font-size: inherit"]):not([style*="font-size:inherit"]),
  select:not(.ds-input-lg):not(#service-category),
  textarea:not(.ds-input-lg)) {
    font-size: 16px !important;
  }
  :where(input[style*="font-size: inherit"], input[style*="font-size:inherit"]) {
    font-size: max(16px, 1em) !important;
  }
}