/**
 * The three shapes that make a page scroll sideways, prevented once.
 *
 * Found by rendering all 30 pages at 375px after OWNER_TEST_FAILURE_001: a
 * 1440px image dragged one page 1121px wide, a data table 179px, and file
 * inputs sized in percent plus padding overflowed their own form by 35px.
 * A page that scrolls sideways on a phone is a page a customer fights.
 *
 * Several of those pages are standalone and do not load landing.css, so the
 * baseline could not reach them from there. This file carries nothing but
 * overflow prevention -- no colours, no typography, no layout opinions -- so it
 * is safe to link from every page regardless of which design system that page
 * belongs to.
 */

img, video, canvas, svg, iframe {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button, label {
  max-width: 100%;
  box-sizing: border-box;
}

pre, code {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 900px) {
  /* The table scrolls inside its own box; the page does not. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* A file input has an intrinsic minimum width from its own button plus the
   filename, and a grid or flex child refuses to shrink below its content by
   default. Together they pushed a form 35px past the viewport on a phone.
   min-width:0 is what lets a flex/grid child actually shrink. */
input[type="file"] {
  width: 100%;
  min-width: 0;
}

form, fieldset, label, .wf-v2-form, .wf-v2-grid > *, .wf-scan-form {
  min-width: 0;
}