/*
 * hs-mobile.css — mobile touch guards.
 *
 * Three zoom problems and one press-feedback problem, four separate fixes.
 * Everything here is behind `pointer: coarse`, so desktop is untouched.
 *
 * 1. Focus zoom (the one people actually report). iOS Safari zooms the whole
 *    page whenever a form field with a computed font-size under 16px takes
 *    focus — and it does not zoom back out on blur. That is the "I opened the
 *    chat, typed, and now I can't find Send" bug: the page is still zoomed
 *    after the keyboard closes and the button is off to the right. Note that
 *    `maximum-scale` / `user-scalable=no` in the viewport meta does NOT stop
 *    this on iOS. Only the 16px floor does.
 *
 * 2. Double-tap zoom. `touch-action: manipulation` drops the double-tap
 *    gesture (and the legacy 300ms click delay) while leaving scrolling and
 *    deliberate pinch-zoom alone. Elements that set their own `touch-action`
 *    still win — this is only the document-level default.
 *
 * 3. Rotation text inflation. iOS resizes text on landscape rotation, which
 *    reads as an unrequested zoom on a fixed mobile layout.
 *
 * Two places deliberately do NOT load this file:
 *
 * - `legal/*`, which is long-form text a reader is entitled to enlarge. Those
 *   pages have no form fields, and `touch-action: manipulation` would take
 *   away double-tap-to-zoom. Their viewport meta is left unlocked to match.
 * - The third-party embed, where this would restyle the host site's own forms.
 *   The widget's fields carry an equivalent scoped rule in `poc5-pages.css`;
 *   keep the two in sync.
 */

@media (pointer: coarse) {
  html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /*
     * 4. The grey square the OS paints over a tapped element.
     *
     * This is the one piece of press feedback nobody designed. The default is
     * rgba(0, 0, 0, 0.18) and the browser paints it over the tapped element's
     * BOXES, not its border-radius — so an 18px conversation card answers a
     * tap with a hard-edged grey rectangle, and a pill button gets a grey slab
     * with corners. It reads as a rendering fault rather than as feedback.
     *
     * The property INHERITS, which is why this belongs here on `html` and not
     * on 383 individual `cursor: pointer` rules. It was previously turned off
     * one element at a time — 18 declarations against 277 clickable classes —
     * so every new control shipped with the square back.
     *
     * Turning it off is only half the job: on touch there is no hover, so a
     * control with no `:active` state now answers a press with nothing. The
     * system's replacement is the `scale` press in hs-base.css /
     * hs-bridge-components.css, which cannot mismatch a radius because it does
     * not paint anything.
     */
    /* Kept for the handful of pages that load hs-mobile.css without the
       bridge. hs-bridge.css now carries the ungated declaration — the
       `pointer: coarse` gate on this block is why an iPad with a trackpad
       still got the highlight. */
    -webkit-tap-highlight-color: transparent;
  }

  /*
   * `max()` so a field that is already above the floor keeps its size — this
   * only ever raises a field to 16px, never shrinks one.
   *
   * `!important` is load-bearing: every real target is a compound selector
   * (`.julia-chat-form input`, `.hs-adm-search-input`, …) that out-specifies a
   * bare element selector no matter where this file sits in the cascade.
   */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  textarea,
  select,
  [contenteditable="true"] {
    font-size: max(16px, 1em) !important;
  }
}