/* ==========================================================================
   Responsive — global, cross-cutting breakpoint behavior.

   Note: per-component responsive rules (grid column counts, hero layout,
   nav show/hide, etc.) are already written mobile-first with min-width
   media queries directly inside components.css, right next to the styles
   they modify — the same pattern the original Tailwind markup used
   (`sm:`/`md:`/`lg:` prefixes inline on each element). Duplicating those
   same rules again in a separate file, keyed by breakpoint instead of by
   component, would only make the two files drift out of sync. This file is
   reserved for rules that are genuinely global rather than owned by one
   component.

   Breakpoints match the original Tailwind config:
   sm: 640px · md: 768px · lg: 1024px · xl: 1280px
   ========================================================================== */

/* Never allow horizontal scroll regardless of content. */
html, body {
  overflow-x: hidden;
}

/* Tables, code blocks, and any other wide content get their own scroll
   container instead of pushing the page width out. */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}