/* ============================================================
   MOBILE — site-wide responsive baseline.
   Loaded AFTER each page's main stylesheet. Uses !important
   sparingly to override page-specific layouts that pre-date this
   file. If a page's existing styles already do the right thing,
   these rules are no-ops.
   ============================================================ */

@media (max-width: 768px) {
  .container, .page, main { padding-inline: 12px !important; }

  .grid-2, .grid-3, .grid-4,
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  .card, .panel { border-radius: 12px; }

  /* iOS Safari zooms when an input's font-size is < 16px. */
  input, select, textarea { font-size: 16px !important; }

  .actions-row, .button-row { flex-direction: column; align-items: stretch; }
  .actions-row > *, .button-row > * { width: 100%; }

  table { display: block; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 480px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  .hide-on-mobile { display: none !important; }
}

/* Canonical .layout collapse. Three pages (community, profile-security,
   mcp-tokens) used to declare an identical 900px rule inline; lifted
   here so new pages adopting the .layout class pattern get the collapse
   for free. Pages with bespoke multi-step breakpoints (music, docs)
   keep their own rules — the later-loaded inline rule wins on
   equal specificity. */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* Universal — apply at every viewport. */
* { -webkit-tap-highlight-color: transparent; }
img, video, canvas, svg { max-width: 100%; height: auto; }
/* iOS Safari ignores body { overflow-x: hidden } unless html has it
   too — without both, descendants wider than viewport can still
   trigger horizontal pan and shift the visual viewport. */
html, body { overflow-x: hidden; }