/* Mobile safety layer, loaded last on every site. Fixes the usual phone problems:
   sideways scroll (iOS Safari needs overflow-x on html AND body), wide tables, long code/URLs,
   grid children that refuse to shrink, and iOS zooming into small inputs. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { overflow-x: hidden; position: relative; min-width: 0; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
main, article, section, header, footer, nav, div, li, p, h1, h2, h3, h4, td, th { min-width: 0; }
h1, h2, h3, h4, p, li, td, th, a, dd, dt, summary, figcaption { overflow-wrap: anywhere; }
code, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; }
pre code { word-break: normal; overflow-wrap: normal; }
/* Every table scrolls inside itself instead of pushing the page sideways. */
table { max-width: 100%; }
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  table:not(.table-wrap table) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table:not(.table-wrap table) thead, table:not(.table-wrap table) tbody { display: table; width: 100%; min-width: 100%; }
  th, td { padding-left: 10px; padding-right: 10px; }
  /* iOS zooms the page when a field is under 16px. */
  input, select, textarea, button { font-size: 16px !important; }
  input, select, textarea { max-width: 100%; }
  /* Tap targets and side gutters. */
  a, button, summary, label { touch-action: manipulation; }
  nav a, .nav a, button, summary, .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .wrap, .container, main, article { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  body { font-size: 17px; }
}