/* ============================================================
   touch.css — the touch layer, shared by every Beacon surface
   ============================================================
   Beacon is an iPhone app: ios/Beacon is a WKWebView shell around this site,
   so there is no native layer to make anything feel native. It is also nine
   separate Flask apps (Mend, BDM, Roster, Investor Updates, the Owner Portal,
   Inspections, the Post Editor…) each with its own stylesheet — and an audit of
   all of them found the SAME six defects in every single one:

     - every text field 12-15px, so iOS zoomed the page on focus and never
       zoomed back                                    (the most-felt one)
     - controls 18-36px against Apple's 44pt minimum
     - no -webkit-tap-highlight-color: a blue box flashed on every tap
     - no :active anywhere, so a tap had no press feedback at all
     - no user-select/touch-callout on chrome: long-press raised the iOS
       selection magnifier over nav items and buttons
     - no overscroll-behavior: rubber-band exposed the ground behind the app

   Fixing that nine times in nine dialects would go stale nine ways. Every mount
   is served from the same origin, so each one links THIS file after its own CSS
   and inherits the whole layer:

       <link rel="stylesheet" href="/styles/touch.css">

   Keep it generic on purpose — plain elements and the class names the apps
   actually share. Anything surface-specific belongs in that surface's sheet.
   ------------------------------------------------------------ */

/* Universal and safe on desktop too: kill the blue tap flash, and stop Safari
   reflowing type on rotate. */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Scoped to fingers, not to screen width: an iPad in landscape is 1024px and
   still a touchscreen, a narrow desktop window is not. */
@media (pointer: coarse) {

  /* --- 1. 16px is the iOS zoom threshold, exactly ---
     Below it, focusing a field zooms the whole page and leaves it zoomed. Never
     "fix" this with maximum-scale/user-scalable=no: that also kills pinch-zoom
     for low-vision users, and it is the app shell — not Safari — that honours
     it, so the damage lands only on the people using the app. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, .input, .field-input { font-size: 16px; }

  /* --- 2. Apple's 44pt minimum ---
     min-height only, so a control's own padding and alignment still decide how
     it looks; nothing reflows, the floor just comes up. */
  button, .btn, .chip, .tab, .pill-btn, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    min-height: 44px;
  }
  /* min-height does nothing on a plain inline box, and a lot of these action
     "buttons" are anchors. */
  a.btn, a.chip, a.tab, .btn, .chip {
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Icon-only controls are the easiest to miss and the worst to mis-tap, because
     nothing about them looks small until you try: Mend's hamburger, theme toggle
     and emergency bell measured 30-36px. min-width/min-height rather than a hard
     44x44, so an icon button that is deliberately wider keeps its width. */
  .icon-btn, .iconbtn, .btn-icon, .icon-button {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* checkboxes and radios keep their intrinsic size but get a real hit area */
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
  /* an iOS range thumb is sized off the track box */
  input[type="range"] { height: 44px; }

  /* --- 3. press feedback, since the blue box is gone ---
     Removing the tap highlight makes this load-bearing: it is now the only
     confirmation a tap registered. Fast in, no transition, so it reads as
     instant rather than animated. */
  button:active, .btn:active, .chip:active, .tab:active,
  a.btn:active, [role="button"]:active {
    transform: scale(.97); filter: brightness(1.12); transition: none;
  }

  /* --- 4. chrome is furniture, not text ---
     Long-pressing a nav item or a toolbar button raised the selection magnifier
     and the Copy / Look Up callout. Deliberately NOT applied to page content:
     an address, a phone number, an invoice total are all things people copy on
     purpose. */
  .topbar, .sidebar, .nav, .topnav, .nav-link, .brand, .tabs, .tab,
  button, .btn, .chip, .seg, .segmented {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }

  /* --- 5. don't rubber-band the app off its own ground --- */
  html, body { overscroll-behavior: none; }

  /* --- 6. a table wider than the phone scrolls inside its own box, never
     dragging the document sideways. Cheap insurance for the many tables across
     these apps that were never given a wrapper. */
  .table-wrap, .tbl-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active, .chip:active, .tab:active,
  a.btn:active, [role="button"]:active { transform: none; }
}