/* Mobile overflow guards.
 *
 * These pages were built desktop-first: wide data tables and link rows go
 * straight into the flow with nothing stopping them widening the document, so
 * on a phone the whole page scrolls sideways and the body text is cut off.
 * Loaded last on every page, so it wins over the inline styles above it.
 */
@media (max-width: 760px) {

  /* A wide table should scroll inside its own box, not drag the page with it. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Flex rows of links that were never given permission to wrap. */
  .nav-links,
  .footer-links,
  .breadcrumbs,
  .tab-row,
  .chips {
    flex-wrap: wrap;
  }

  /* Nothing embedded should be able to exceed the screen. */
  img, svg, canvas, video, iframe, pre {
    max-width: 100%;
  }
  pre { overflow-x: auto; }

  /* Long unbroken strings (URLs, ARNs, figures) in body copy. */
  p, li, td, th, dd { overflow-wrap: anywhere; }

  /* Grid and flex children default to min-width:auto, so one wide child (a
     chart, a table) forces its track wider than the screen rather than
     scrolling inside it. */
  .layout, .panel, .results, .main-content, .input-panel, .card, .col, .content {
    min-width: 0;
  }
  .layout { grid-template-columns: minmax(0, 1fr); }

  /* Decorative watermark, deliberately hung past the right edge at 4% opacity.
     Its container does not clip it, so on a phone it is the only thing making
     the page scroll sideways. */
  .hero-wm { display: none; }

  /* The research-paper header is a nowrap flex row: a 348px brand plus its
     links needs 453px, which does not fit a phone. */
  .topnav { flex-wrap: wrap; }
  .nav-brand { min-width: 0; }

  /* Form controls carry an intrinsic size (the `size` attribute) that a grid
     track will happily grow to accommodate. */
  input, select, textarea, button { max-width: 100%; min-width: 0; }

  /* A three-column input grid whose tracks are sized from content: 113+114+146
     plus gaps does not fit 390px. One column on a phone. */
  .input-grid { grid-template-columns: 1fr; }
  .ig, .input-grid > * { min-width: 0; }
}