/* Shared responsive baseline.
   ───────────────────────────────────────────────────────────────────────────
   An audit of all 149 pages at 320 / 390 / 768 px found 34 that scrolled
   sideways on a phone. Almost every one was the same mistake repeated: a flex
   row of buttons or tabs with no flex-wrap, so eight tabs measuring 1300px
   pushed the whole document out past the viewport and every other element with
   it. The rest were fixed pixel widths on cards, inputs and <code> blocks.

   Rather than patch 34 files with 34 slightly different media queries, the
   baseline lives here and is linked from every page. Page CSS still wins where
   it needs to — this file is linked first, and nothing here uses !important
   except the wrap rules, which exist precisely to override a hard nowrap.

   The generic "make overflowing rows wrap" pass is in /js/responsive-fit.js:
   it needs to know whether an element is actually a flex row, which CSS cannot
   ask. This file covers everything that can be expressed declaratively. */

/* ── Never let media or preformatted text set the page width ─────────────── */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
/* A long invite URL in a <code> used to make /giveaways 565px wide. */
pre, code, kbd, samp {
  max-width: 100%;
  overflow-x: auto;
  overflow-wrap: anywhere;
}
/* max-width does nothing to a non-replaced inline element, which is what a bare
   <code> is — so an example command has to be told it may wrap. This is what
   made /giveaways 565px wide on a 320px screen. */
pre, code { white-space: pre-wrap; }

/* Tables stay readable by scrolling themselves rather than the page. */
table { max-width: 100%; }

/* Inputs default to a size attribute width that ignores its container. */
input, select, textarea, button { max-width: 100%; }

/* Long unbroken strings — emails, tokens, URLs — break instead of pushing. */
body { overflow-wrap: break-word; }

/* The public site nav is a plain <nav> of links on a dozen pages; it had no
   wrap, which is why /about, /vods, /polls, /qa and the rest all overflowed by
   the same ~68px (one link's worth). */
nav { flex-wrap: wrap; }

@media (max-width: 900px) {
  /* Grids with a fixed minimum column are the second most common cause: a
     minmax(220px, 1fr) column cannot fit a 320px screen once padding is in. */
  .gear-grid, .stat-row, .dash-grid, .hof-grid, .card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Known tab strips. The JS pass catches these too, but doing it in CSS
     avoids a frame where the page is visibly too wide. */
  .tabs, .atabs, .hub-tabs, .hub-row, .tab-row, .tab-bar, .toolbar,
  .platform-tabs, .studio-tabs, .links-row, .header-right, .date-nav,
  .preset-row, .chipbar, .actions, .period-tabs, [class*="-tabs"] {
    flex-wrap: wrap !important;
  }

}

/* Anything that deliberately scrolls sideways must still be pinned to its
   container, or it reports its full content width and takes the page with it.
   This was why /command-center overflowed by 1008px on a phone and 288px even
   on a 1440px desktop: the tab row had overflow-x:auto but nothing ever
   constrained its width, so it never actually scrolled — the document did.
   Not inside a media query, because that bug is not specific to small screens. */
.board, .ms-bar, .tl-wrap, .table-scroll, .hub-tabs, .hub-row,
[data-fit-scroller], [style*="overflow-x"] {
  max-width: 100%;
}

/* Page gutters written for a desktop (20-32px a side) eat a fifth of a 320px
   screen, which is what tips several otherwise-fine layouts over the edge. */
@media (max-width: 420px) {
  .app, .wrap, .container, .page, main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 560px) {
  /* Cards and panels that hard-code a width wider than a small phone. */
  .hof-card, .stream-section, .sidebar, .side-col, .wheel-stage,
  .card, .panel, .panelbox, .modal {
    min-width: 0 !important;
    max-width: 100%;
  }
  /* Two- and three-up rows collapse rather than shrink past legibility. */
  .stat-row, .form-row, .compare { grid-template-columns: 1fr !important; }
}

/* ── Touch targets ────────────────────────────────────────────────────────
   The audit also counted controls under 28px tall. On a finger that is a
   coin-toss, so on touch devices interactive things get a real minimum. Height
   only — widths stay as designed so nothing reflows. */
@media (pointer: coarse) {
  button, .btn, a.btn, select, summary, [role="button"],
  .tab, .tab-btn, .hub-tab, .fchip, .preset-btn {
    min-height: 40px;
  }
  input[type="checkbox"], input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}
/* Inputs below 16px make iOS Safari zoom the whole page on focus, which then
   leaves the user scrolled sideways with no obvious way back. Pages set this on
   classed selectors (.modal .input, .field input, …) that outrank a bare
   element rule, so this one is deliberately specific enough to win rather than
   reaching for !important on every form control on the site. */
@media (pointer: coarse) {
  input, select, textarea,
  .input, .modal .input, .modal input, .modal select, .modal textarea,
  .field input, .field select, .field textarea,
  form input, form select, form textarea {
    font-size: max(16px, 1em);
  }
}