/* Quark mobile layer, 2026-08-29. Additive and media-scoped ONLY: nothing in
   this file selects outside a max-width query, so desktop rendering is
   untouched by construction (the design-freeze rule). Operator-requested
   mobile repair: pages built desktop-first with inline styles overflowed and
   mis-gridded on phones; the !important flags exist solely to outrank those
   inline styles inside the mobile query. */

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  /* Layout containers: tighten gutters that assume desktop width. */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Any multi-column grid collapses to a single column (inline or class). */
  [style*="grid-template-columns"], .idea-grid, .projection-grid,
  [class*="-grid"] { grid-template-columns: 1fr !important; }

  /* Inline flex rows are allowed to wrap instead of overflowing. */
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap !important; }
  [style*="min-width"] { min-width: 0 !important; }

  /* Wide content scrolls inside its own box instead of stretching the page. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
          max-width: 100%; }
  pre { overflow-x: auto; max-width: 100%; }
  p, li, td, h1, h2, h3 { overflow-wrap: break-word; }
  img, svg, canvas, video, iframe { max-width: 100%; height: auto; }

  /* Type: desktop hero sizes clipped to the viewport. */
  h1 { font-size: clamp(26px, 8vw, 38px) !important; line-height: 1.18 !important;
       word-break: break-word; }
  h2 { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.25 !important; }

  /* Navigation wraps rather than overflowing. */
  nav, nav > div { flex-wrap: wrap; }


  /* Article-list tables stack instead of scrolling. `.doc-table td.m` is
     `white-space:nowrap`, so at phone width the metadata column claims ~180px
     and squeezes the prose column to ~140px -- one or two words per line.
     Horizontal scroll is right for a DATA table and wrong for a list of
     articles, so this rule is scoped to .doc-table only. */
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td {
    display: block; width: 100%; }
  .doc-table thead { position: absolute; left: -9999px; }
  .doc-table tr { padding: 4px 0 14px; border-bottom: 1px solid var(--border-subtle); }
  .doc-table td { border-bottom: none !important; padding: 2px 0 !important; }
  .doc-table td.m { white-space: normal !important; margin-top: 6px; opacity: .85; }

  /* Track-record table (research integrity): same treatment, verdict under
     the hypothesis rather than beside it. */
  .track, .track tbody, .track tr, .track td { display: block; width: 100%; }
  .track thead { position: absolute; left: -9999px; }
  .track tr { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
  .track td { border-bottom: none !important; padding: 3px 0 !important; }

  /* Full-viewport hero sizing is a desktop conceit: on a phone it costs a
     whole screen before the first word. */
  .hero, .page-hero { min-height: 0 !important; }
  .hero { padding: 34px 0 44px !important; }
  .instr-stat { gap: 18px 26px; }

  /* Stat rows (instrument system) stack comfortably. */
  .instr-stat { gap: 20px; }
}

@media (max-width: 480px) {
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  body { font-size: 15px; }
}