/* WARDOGS Companion - phone layout guards for the shell (390 px and up). Loaded right after
   chrome.css and BEFORE the page sheets, so only shell classes and site.css classes belong here;
   each page sheet owns its own phone breakpoints. chrome.css already turns the sidebar into a
   drawer under 900 px. */

@media (max-width: 900px) {
  /* nothing may push the page wider than the viewport; wide blocks scroll inside their wrapper */
  .content { overflow-x: clip; }
  .content main { min-width: 0; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  pre, code { overflow-wrap: anywhere; }
  img, canvas, iframe, video { max-width: 100%; }

  /* top bar: toggle, brand, search on one line */
  .topbar-mobile { gap: .6rem; }
  .topbar-mobile .brand { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .side-toggle, .search-trigger-top { flex: 0 0 auto; }

  /* a scrim behind the open drawer */
  .side.open { box-shadow: 4px 0 0 var(--ink), 0 0 0 100vmax rgba(26, 24, 20, .35); }
}

@media (max-width: 600px) {
  .section { padding: 1.3rem 1rem 2rem; }
  .title-page { padding: 1rem 1rem 2rem; }
  .fm-header { grid-template-columns: 1fr; gap: .15rem; }
  .fm-header .r { text-align: left; }
  .foot { padding: .9rem 1rem 1.1rem; flex-direction: column; gap: .5rem; }
  .h1 { font-size: 1.75rem; }
  .lede { font-size: .98rem; margin-bottom: 1.1rem; }

  /* site.css pieces used across pages */
  .builder-head { flex-direction: column; align-items: stretch; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip div { border-bottom: 1px solid var(--rule-2); }
  .stat-strip div:nth-child(2n) { border-right: 0; }
  .table-wrap { margin-left: -1rem; margin-right: -1rem; max-width: none; }
  .table-wrap .table { min-width: 100%; }
}

@media (max-width: 420px) {
  .topbar-mobile .brand-sub { display: none; }
  .side-toggle, .search-trigger-top { padding-left: .5rem; padding-right: .5rem; }
}