/*
 * mobile-viewport.v1.css
 * ---------------------------------------------------------------------------
 * HOW THESE APPS BEHAVE ON A PHONE, SAID ONCE, FOR BOTH OF THEM.
 *
 * WHY THIS FILE EXISTS
 *
 * "The app zooms the whole page out when I tap a field" was reported three
 * times and patched three times, each time on one page and one kind of field,
 * and each time it came back somewhere else. The Rider app and the Driver app
 * had their own copies of the same rules, which meant a fix to one was not a
 * fix to the other, and a field nobody had listed was covered by neither.
 *
 * So the rules live here now, in one file both apps load, and a test measures
 * both apps against them.
 *
 * WHAT A BROWSER IS ACTUALLY REACTING TO. A phone changes the scale of a page
 * by itself for three reasons, and all three are answered here:
 *
 *   1. A FIELD IT THINKS IS TOO SMALL TO READ. iPhone Safari and Android
 *      Chrome zoom the page in on any field under 16px, and they do not zoom
 *      back out afterwards. Every control a person types into is at least 16px
 *      on a touch screen, and it is stated in a way no page rule can lose to.
 *
 *   2. A PAGE WIDER THAN THE SCREEN. If anything at all reaches past the edge,
 *      the document becomes wider than the phone and the browser fits the
 *      whole width on screen, which is the page "zooming out". Nothing is
 *      allowed to widen the page here.
 *
 *   3. THE BROWSER RESIZING THE TEXT ITSELF. Mobile browsers inflate text when
 *      a block changes width, which is why an app can look differently scaled
 *      after the keyboard opens. text-size-adjust: 100% means "leave my sizes
 *      alone". It does not stop anyone zooming, and it does not touch the text
 *      size set on the phone itself.
 *
 * WHAT THIS FILE DELIBERATELY DOES NOT DO: it never sets a zoom, never scales
 * or transforms anything, never touches the viewport from script, never takes
 * pinch to zoom away, and never touches the map, which is free to change its
 * own zoom as much as it likes.
 */

/* ------------------------------------------------ the browser's own resizing */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --------------------------------------------- nothing wider than the screen */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
/* clip does the same without making a scroll box out of the page, which is
   what "hidden" does and what breaks sticky headers. Browsers that know the
   word use this instead. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* --------------------------------------------------- fields on a touch screen */
@media (pointer: coarse) {
  /*
   * 16px, or bigger if the page meant it to be bigger, and !important because
   * this is the one rule that must never lose. It has lost before: a rule like
   * `.auth-card input` outranks a plain `input`, so a screen could quietly
   * bring a field back under the line and the whole page would start zooming
   * again. max(16px, 1em) never shrinks a field the page made deliberately
   * larger: it only ever raises one that is too small.
   */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  [contenteditable="true"],
  [contenteditable=""] {
    font-size: max(16px, 1em) !important;
  }

  /*
   * And Google's address picker, which is neither of those. What a rider taps
   * on the Rider app is the input INSIDE <gmp-place-autocomplete>, in a closed
   * shadow root that no rule and no script can reach. This token is the only
   * way in, so it says 16px too.
   */
  gmp-place-autocomplete {
    --gmp-mat-font-size-body-large: 16px;
    font-size: 16px;
  }
}

/* ------------------------------------- sheets that cover the whole screen */
/*
 * A card taller than the screen, inside a fixed overlay that centres it, is
 * clipped at BOTH ends and cannot be scrolled to. When the keyboard then takes
 * half the screen, the browser is asked to bring a field into view that it
 * cannot reach, and changing the scale of the page is one of the things
 * browsers do about that.
 *
 * The sign in gates of both apps were already put right this way. This is the
 * same treatment for every other sheet in both apps, said once:
 *
 *   overflow-y: auto        the sheet can be scrolled
 *   align-items: safe center  centred while it fits, and never centred into
 *                             space nobody can scroll to. Browsers that do not
 *                             know the word drop this line and keep their own.
 */
html .app-notice-modal,
html .modal-overlay,
html .tip-modal,
html .support-modal,
html .auth-overlay-wallet {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  align-items: safe center;
}