/* ─────────────────────────────────────────────────────────────
   mobile.css — narrow-screen refinements, loaded AFTER site.css.
   Targets small phones and the Samsung Fold cover display
   (~280-360px) as well as the folded-open ~717px portrait width.
   Page chrome lives in site.css / per-page <style>; this file only
   adds the very-narrow overrides and table-overflow safety.
   ───────────────────────────────────────────────────────────── */

/* ── Shared chrome: ≤480px (Fold cover + small phones) ───────── */
@media (max-width: 480px) {
  .container,
  .page-header { padding-left: 16px; padding-right: 16px; }
  .page-header { padding-top: 100px; padding-bottom: 40px; }
  .page-header h1 { font-size: clamp(28px, 8.5vw, 40px); max-width: none; }
  .page-header .lead { font-size: 15px; }
  .page-header .meta-row { gap: 12px 18px; margin-top: 24px; padding-top: 20px; }

  /* Multi-column content grids collapse to one column */
  .arch-grid,
  .kpi-grid,
  .card-grid { grid-template-columns: 1fr; }

  article.paper { padding: 24px 16px 64px; }
  .arch-detail { padding: 0 16px 64px; }
  footer.site-footer { padding: 28px 16px; }

  /* Reusable data tables: compact type, scroll inside their wrap */
  .data-table { font-size: 11.5px; }
  .data-table th { padding: 8px 10px; font-size: 9.5px; }
  .data-table td { padding: 7px 10px; }
}

/* ── Wide tables never push the page wider than the viewport ── */
@media (max-width: 760px) {
  .data-table-wrap,
  .static-board,
  .panel { -webkit-overflow-scrolling: touch; }
  /* Leaderboard static boards: keep the 7-8 col tables inside a
     horizontal scroll region rather than overflowing the page. */
  .static-board { overflow-x: auto; }
  .sb-table { font-size: 11.5px; }
  .sb-table th { padding: 8px 10px; }
  .sb-table td { padding: 7px 10px; }
}

/* ── Paper page: dense 14-col strategy table ─────────────────── */
@media (max-width: 560px) {
  .strat-table { font-size: 11px; }
  .strat-table th,
  .strat-table td { padding: 8px 8px; }
  .agg-strip { grid-template-columns: repeat(2, 1fr); }
  .agg-val { font-size: 18px; }
}