/* Responsive layer for the site, loaded after the design-system stylesheet on
   every page. The design system (_ds/…/styles.css) has no media queries and the
   pages lay out with inline styles, so all small-screen behaviour lives here. */

/* Nothing designed here should ever scroll sideways; anything genuinely wider
   than a phone (tables, diffs) scrolls inside its own box instead. */
html, body { overflow-x: hidden; overflow-x: clip; }

@media (max-width: 760px) {
  /* The nav is a single no-wrap row at desktop widths. Stack it: brand on its
     own line, links flowing beneath, the call-to-action pushed to the right. */
  nav.nav { flex-wrap: wrap; gap: 10px 18px; padding-block: 12px; }
  nav.nav .nav-brand { width: 100%; margin-right: 0; }
  nav.nav > a:not(.btn) { padding-block: 2px; }
  nav.nav > .btn { margin-left: auto; }
}

/* Rows that put prose beside a screenshot or table declare two columns inline
   with hard pixel minimums — the reason the page used to scroll sideways on a
   phone. !important is the only way to beat an inline style. */
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr !important; }
}

/* Grid items default to min-width:auto, so a nowrap table or a long code line
   blows its column open instead of scrolling inside it. Every grid on this site
   is declared inline, which is what the attribute selectors key on. The second
   selector is not redundant: the DC runtime re-renders the markup and
   serialises styles with a space after the colon. */
[style*="display:grid"] > *,
[style*="display: grid"] > * { min-width: 0; }

/* Code-value tables use nowrap cells and can be wider than a phone. Let the
   table scroll inside its frame rather than dragging the page with it. */
@media (max-width: 760px) {
  table.table { display: block; overflow-x: auto; }
}