/* =====================================================================
   mobile.css — touch mechanics that must hold on EVERY page, including the
   standalone ones (login, onboarding, request-access, reset-password,
   pricing, 404, signup) that never load shell.css and therefore never got
   the shell's phone rules.

   Scope discipline: this file contains only mechanical platform fixes —
   things that are wrong on a phone regardless of what the screen is trying
   to say. Anything that would change a screen's visual hierarchy (badge
   sizes, secondary-button weight, inline link rhythm) is deliberately NOT
   here; those are design calls and are escalated, not absorbed.

   Loaded LAST in <head> so it wins order ties against page-level <style>.
   ===================================================================== */

@media (max-width: 900px) {

  /* ---- iOS focus-zoom ------------------------------------------------
     Mobile Safari zooms the whole viewport when a focused control renders
     text under 16px, and does not zoom back out. shell.css already asks for
     16px, but every page declares its fields by class or id (.form-input,
     #searchInput, .filter-select …), so the element-selector rule loses the
     cascade on all of them — measured 62 controls across 10 pages still at
     12–14.5px. !important is the honest tool here: the platform behaviour is
     not negotiable and the rule must outrank page CSS by construction, not
     by luck of ordering. Checkbox/radio/range/color are excluded — font-size
     does not affect them and iOS does not zoom for them. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- Touch target floor for form controls --------------------------
     44px is the documented minimum. Applied to fields only: growing a text
     field is a mechanical fix with no design content. Buttons are NOT swept
     up here on purpose — a blanket floor would inflate 17px status badges
     and secondary actions into primary-looking blocks, which is a visual
     decision for the owner (see ESC-28). min-height (not height) so nothing
     that is already taller is squashed. `.visually-hidden` file inputs stay
     2x2: they are triggered by a visible button and must not become
     tappable themselves. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.visually-hidden),
  select,
  textarea,
  button[type="submit"] {
    min-height: 44px;
  }

  /* A password reveal sits inside the field's box; it was 28px wide. */
  .password-toggle { min-width: 44px; }

  /* ---- ESC-28, owner-ruled option 3: primary actions + icon buttons ---------
     Groups (a) and (d) of the escalation only. Chips (.tile-badge), tab strips
     (.tab-btn, .sch-seg-btn, .view-toggle-btn, .filter-btn), quiet secondaries
     (.quiet-btn, .logout-btn, plain .btn/.cc-btn) and inline text links
     (.back-link, .qs-see-all, .quiet-link) are deliberately NOT here: growing
     them changes how a screen reads, which is the owner's call and was ruled
     "stay as-is".

     Every selector below was measured under 44px on a phone before this rule
     (390x844 and 360x800); none is speculative. */

  /* (a) Primary-action near-misses — 2-7px short. Already flex-centred, so a
     floor is all they need; content stays centred. */
  button.cc-btn.gold,          /* "Upload invoice"        118x37 */
  button.btn.btn-primary {     /* "+ Add User"            123x39 */
    min-height: 44px;
  }

  /* `a.primary` is display:block, so a min-height alone would leave its label
     sitting at the top of a taller box. Centre it instead of padding it by a
     magic number. */
  a.primary {                  /* "Go to Business Dashboard →"  227x42 */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* (d) Icon buttons — square targets, so BOTH axes. These are the hardest
     controls on the page to hit accurately. */
  a.quick-action-btn,          /* manager-view quick actions  40x40 */
  button.sch-navbtn {          /* schedule month arrows ‹ ›   30x30 */
    min-width: 44px;
    min-height: 44px;
  }

  /* The drawer close × is display:block; centre the glyph as it grows. */
  button.dd-close {            /* "×"                         30x30 */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Disclosure rows. Padding rather than a display change: `display:list-item`
     is what draws the triangle marker, and flex would delete it. box-sizing so
     the min-height floor measures the padded box. */
  summary {                    /* "Import mappings (CSV)" 280x24, connect-email 268x23 */
    box-sizing: border-box;
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* ---- Installed-app safe areas ---------------------------------------
   Only in standalone display mode, and only for pages that do NOT mount the
   shell (the shell already pads its own chrome). Without this, a page whose
   body is the scroll container runs its first and last rows under the iOS
   status bar and home indicator. */
@media (display-mode: standalone) {
  body:not(.qs-body) {
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }
}
