/* ===========================================================================
   THE PHONE RULES FOR EVERY PAGE A CLIENT OPENS.
   /public/phone.css  —  one file, linked from each client-facing page.

   Written from what was MEASURED on a real iPhone-sized screen (390 x 844)
   against the live server, not from a guess about what phones do:

     the action plan   28 textareas at 15px    -> iOS zooms the whole page
                                                  every time a client taps one
     the Wheel of Life  9 textareas at 14.5px  -> the same
     helper lines      12.5px                  -> under what a tired person
                                                  reads comfortably at arm's
                                                  length
     buttons           under 44px tall         -> under the size a thumb hits
                                                  reliably

   Radios, sliders and file buttons were measured too and left alone: iOS only
   zooms for a box you TYPE in, and those three are not.
   =========================================================================== */

@media (max-width: 760px) {

  /* 1. NO MORE ZOOMING. Safari on iPhone zooms the entire page whenever a box
        a person types into carries text under 16px, and it does not zoom back
        out. A client filling in five entries meets that five times. 16px is
        the threshold, not a preference. */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="search"], input[type="password"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input:not([type]),
  textarea, select {
    font-size: 16px !important;
  }

  /* 2. A thumb, not a cursor. 44px is the smallest target a person hits
        without looking, and the vault asks clients to press these while
        walking, on a bus, at the end of a day. */
  button, .btn, a.btn, .goldb, .ghostb, .ghostb2, .sendbtn,
  input[type="submit"], input[type="button"] {
    min-height: 44px;
  }

  /* 3. The small print stops being small print. 12.5px is fine on a laptop a
        foot away and not on a phone at arm's length. */
  body { font-size: 16px; }
  .sub, .note, .hint, .say, .meta, .lede small, small,
  /* named off the pages themselves, not guessed: these are the lines that
     tell a client what they may attach, how large a file may be, and what
     happens next. */
  .attach, .attach .go, .attach .files li, .note span, .foot,
  .pic .cap, .cap, .reply .open, .circ .cn, .consentdate {
    font-size: 13.5px;
  }
  /* the Sales Identity Index's own small print: the legend a client must
     read to answer at all, and the line under each question number */
  .ends, .sig, .rn small { font-size: 13.5px; }
  /* these wrap text EVERYWHERE, headings included, so they are raised only
     where they had fallen below what a person can read - never lowered */
  .only-en, .only-ar { font-size: max(13.5px, 1em); }

  /* the language pills are a tap target like any other */
  .lang { min-height: 34px; font-size: 13px; padding: 6px 13px; }

  /* 4. Nothing may run off the side. A long word, a pasted link or an email
        address should wrap rather than push the whole page sideways. */
  body { overflow-x: hidden; }
  p, li, td, th, label, h1, h2, h3, a { overflow-wrap: anywhere; }

  /* 5. The page gutters are LEFT ALONE. Narrowing them from 22px to 16px
        made the Sales Identity Index scroll sideways: its progress bar is
        full-bleed by a negative margin of exactly 22px, so moving the padding
        left it overhanging by 6px each side. Measured at 402px inside a 390px
        screen. A gutter nobody complained about is not worth a second rule to
        hold the first one up. */
}