/* Shared phone fixes, linked from every page (tpf_mobile.js does the rest).

   color-scheme: the site is dark but never said so, so phones treated it as a
   light page. Native controls (inputs, selects, scrollbars) were drawn white,
   and browsers with an automatic dark mode (Samsung Internet, Chrome's
   auto-dark) repainted colours on top of a page that was already dark.
   Declaring the scheme stops both. The two paper themes and the pages that
   are light by design say light instead. */
:root { color-scheme: dark; }
html[data-tpf-theme="stencil"], html[data-tpf-theme="ash"], html.tpf-light { color-scheme: light; }

/* Stop iOS inflating text on rotate. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 760px) {
  /* iOS zooms the whole page into any field under 16px and leaves it zoomed. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  /* Nothing is allowed to push the page sideways. */
  html, body { max-width: 100%; overflow-x: clip; }
  img, video, canvas, iframe { max-width: 100%; }
  /* A scroll area inside the page keeps its scroll to itself instead of
     handing it to the page (or the page behind a modal) at the edges. */
  .tpf-scroll-contain { overscroll-behavior: contain; }
}

/* Tapping flashes a faint highlight instead of the default grey box. */
* { -webkit-tap-highlight-color: rgba(127, 127, 127, 0.18); }