/* ==========================================================================
   Starise — shared mobile form-control rules
   --------------------------------------------------------------------------
   PURPOSE
   Stops the browser from auto-zooming the viewport when an editable control
   receives focus on a phone or tablet.

   ROOT CAUSE
   iOS Safari (and iPadOS Safari) zoom the page in on focus whenever the
   focused control's *computed* font-size is below 16px. Most controls in the
   CRM and Rep Portal were 12–15px, so nearly every tap on a field, search bar
   or textarea triggered a zoom the user then had to pinch back out of.

   THE FIX
   Raise the text size of the editable control itself to a 16px floor on touch
   devices. Nothing else changes — labels, hints, helper text, buttons,
   spacing and all desktop styling are untouched.

   INTERNAL PORTALS ONLY (2026-09-24)
   Loaded only by the internal CRM portals (Admin CRM, Rep Portal + login,
   Installer, Operations, Dealer Admin + Dealer Portal). Those pages also carry
   the app-style viewport `maximum-scale=1, user-scalable=no,
   viewport-fit=cover`, and this file adds the double-tap-zoom rule at the end.
   The public homeowner site and the customer quote/invoice pages keep normal
   zoom: never link this file or that viewport from them.

   LOAD ORDER
   Load this LAST, after every other stylesheet. Both portals put their
   page-level rules in a large inline <style> that comes after the <link> tags,
   and several controls carry inline style="font-size:…" attributes written by
   JS. `!important` on the single floor declaration is what lets one shared
   rule replace ~40 scattered per-component overrides.

   WHY !important IS SAFE HERE
   Audited 2026-08-08 across admin-crm.html, rep-dashboard.html,
   installer-portal.html and every file in css/: no editable control anywhere
   declares a font-size *above* 16px. The floor therefore only ever raises a
   value — it can never shrink a control that was intentionally made larger.
   The single pre-existing `!important` font-size on an input
   (`#additionModal #additionItemsTable input`) is already 16px.

   COMPACTNESS
   No padding, height or spacing rule is needed. Verified by measurement: every
   affected control either sizes itself from a fixed `height` / `min-height`
   (search bars, wizard fields, note composer) and does not move at all, or
   grows by only the 2–3px of extra text height, which keeps it inside the
   44–48px touch-target band. See the measured results in the task notes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   THE FLOOR — editable controls render their own text at >= 16px
   --------------------------------------------------------------------------
   Two conditions, because narrow width alone is not enough:

     (max-width: 768px)                — phones, and the responsive CRM layout.
     (hover: none) and (pointer: coarse) — any touch-primary device at ANY width.
                                         Catches iPhone landscape (up to 932px)
                                         and iPad portrait/landscape, which
                                         auto-zoom on focus exactly like a phone
                                         but are wider than 768px.

   Desktop Chrome/Safari/Firefox report hover:hover + pointer:fine and are wider
   than 768px, so they match neither condition and keep their existing compact
   typography. Verified identical at 1440px, control for control.

   The :not() chain excludes controls that hold no editable text — checkboxes,
   radios, sliders, colour swatches, file pickers and button-style inputs — so
   button typography and control chrome stay exactly as designed. Inputs with no
   type attribute, and every text-entry type (text, search, tel, email, number,
   password, url, date, time, datetime-local, month, week), are covered.
   -------------------------------------------------------------------------- */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  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([type="hidden"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Placeholders follow the control's own size, so a field never renders its
     hint text at one size and the value the user types at another. */
  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([type="hidden"])::placeholder,
  textarea::placeholder {
    font-size: inherit;
  }


  /* ------------------------------------------------------------------------
     LEGACY ONE-OFFS — the two controls the floor alone does not fully settle
     ------------------------------------------------------------------------
     Everything else in both portals is handled by the floor above. These two
     are listed individually because each carries its own explicit small
     font-size on a *pseudo-element* or a paired property that the floor cannot
     reach.
     ---------------------------------------------------------------------- */

  /* 1. Internal quote-photo caption (admin-crm.html:5725, quote-wizard.css).
        The control is already mobile-first 16px, but the very next line pins
        its placeholder to 12px. Left alone the field shows a 12px hint above
        16px typed text. The generic ::placeholder rule above cannot win
        against these class selectors, so they are named here. */
  .ac-intphoto-cap::placeholder,
  .rp-intphoto-cap::placeholder {
    font-size: inherit;
  }

  /* 2. Mono fields (customer name / phone / email / address on wizard step 1).
        quote-wizard.css already raises these to 16px, but only inside
        `@media (max-width: 720px)` — so 721–768px and every iPad still zoomed.
        The floor now covers the full range; this carries over the tight
        line-height that override was paired with so the field height is
        unchanged from the existing mobile design. */
  .rp-mono-field input,
  .ac-mono-field input,
  .ac-mono-field select {
    line-height: 1.2;
  }

  /* 3. Controls designed ABOVE 16px keep their size (the floor only raises).
        Login verification PIN boxes (auth-verify.css, 1.7rem) and the
        Operations Search tab field (js/ops/search.js, inline 19px). An id
        (or :not(#id)) outranks the floor's :not() chain. */
  .av-pin-box:not(#av-pin-none) {
    font-size: 1.7rem !important;
  }
  #opSearchQ {
    font-size: 19px !important;
  }
}


/* --------------------------------------------------------------------------
   NO DOUBLE-TAP ZOOM — every element, zero specificity
   --------------------------------------------------------------------------
   `manipulation` keeps pan and pinch and removes only double-tap-to-zoom, so
   scrolling, drawers, bottom sheets and click handlers behave exactly as
   before (one click per tap, no JS). It is applied to every element, not just
   buttons, because a double-tap on a JS-bound card inside a scrolling drawer
   is not covered by a rule on <html> alone.

   :where() keeps specificity at 0, so any component that already sets its own
   touch-action (pan-y lightboxes, the dialer, Google's inline map styles)
   still wins. Google Maps (.gm-style) is excluded outright so the map keeps
   its own pan / pinch / marker gesture handling. No effect on mouse input.
   -------------------------------------------------------------------------- */
:where(*):where(:not(.gm-style, .gm-style *)) {
  touch-action: manipulation;
}