/* Universal mobile overrides — loaded last on every landing page so its !important rules
 * cleanly override inline styles AND class-level grid declarations.
 *
 * Background (2026-06-09 audit): operator reported track-record + hypotheses pages overflow on
 * iPhone. Root cause is THREE structural patterns across the site that this stylesheet fixes:
 *   1. inline `style="grid-template-columns:80px 60px 1fr 1fr"` rows that ignore CSS @media
 *      (8 instances in track-record's calibration / per-symbol data rows)
 *   2. body{overflow-x:hidden} on index/tape/live — clips overflow rather than letting it scroll
 *      → users LOSE the right half of any wider row, with no recourse
 *   3. 3-col `.stats`, `.hyp`, `.grid2` etc. with no mobile fallback (widths get squeezed)
 *
 * Strategy: stack everything at ≤640px (iPhone SE/14/15/16 portrait is all ≤430px). For data
 * rows that benefit from card framing, opt in via class="mobile-stack-row".
 *
 * Tested viewports: 320px (iPhone SE), 375px (iPhone 14/15 mini), 393px (iPhone 14 Pro),
 * 430px (iPhone 14/15 Pro Max), 640px (tablet portrait threshold).
 */

@media (max-width: 640px) {
  /* ── 1. Inline-styled grid rows: collapse to single column ────────────────── */
  /* Targets any element with grid-template-columns in its inline style (e.g. the 8 inline
   * data rows in track-record.html) regardless of column-count. Opt-out with class="no-stack". */
  [style*="grid-template-columns"]:not(.no-stack) {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── 2. Named grid classes: collapse to single column ────────────────────── */
  /* Catches the @media-less classes across hypotheses, brief, track-record, library, etc. */
  .stats,
  .hyp,
  .claims,
  .grid2,
  .grid3,
  .rm-dirs,
  .tiers,
  .nots,
  .today,
  .cards,
  .topic-grid,
  #vetoGrid,
  #accuracyGrid {
    grid-template-columns: 1fr !important;
  }

  /* ── 3. Hero / large numerics: shrink so they fit in 320px ─────────────── */
  h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  /* The track-record stat blocks have inline 30px font; shrink to 22px on mobile */
  [style*="font-size:30px"],
  [style*="font-size: 30px"] {
    font-size: 22px !important;
  }
  /* Hero h1 with the gradient em — keep readable */
  .hero h1 {
    font-size: 32px !important;
  }
  .hero p,
  .hero .sub {
    font-size: 15px !important;
  }

  /* ── 4. Replace overflow-x:hidden with visible ──────────────────────────── */
  /* index/tape/live set body{overflow-x:hidden} which CLIPS rather than scrolls. With the rest
   * of this stylesheet, content should no longer overflow — but visible is the right default
   * so any future overflow is actually scrollable instead of invisibly cut off. */
  body {
    overflow-x: visible !important;
  }

  /* ── 5. Tighten the .wrap padding to give ~16 more px of width ──────────── */
  /* From 22px → 14px each side = 16px reclaimed = enough for a 4th badge or longer header */
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── 6. Hero CTA buttons: stack vertically + full width for thumb-tap ──── */
  .cta-row,
  .cta {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cta-row .btn,
  .cta .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── 6b. Hero top padding: 74px is desktop-comfortable but burns 1/3 of an iPhone
   *       viewport above the fold. Cut to 24px so the headline shows immediately. */
  .hero {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  /* ── 6c. Eyebrow: inline-flex + 16% letter-spacing made the children (.dot,
   *       "Daily crypto intelligence ·", @swingprofitai link, "on X") fight each
   *       other into a weird 2-column ladder on narrow screens. Force wrap-friendly
   *       flex + tighter letter-spacing so it reads as one line that wraps naturally. */
  .eyebrow {
    display: flex !important;
    flex-wrap: wrap !important;
    letter-spacing: .08em !important;
    gap: 6px 8px !important;
    margin-bottom: 12px !important;
  }

  /* ── 7. Track-record posture-tier rows: stack to mini-cards via opt-in ──── */
  /* When a row has class="mobile-stack-row" each child becomes a labeled line in a card. */
  .mobile-stack-row {
    grid-template-columns: 1fr !important;
    border: 1px solid var(--hair) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    background: #ffffff04 !important;
  }
  .mobile-stack-row > * {
    padding: 4px 0 !important;
    border-bottom: 1px dashed var(--hair) !important;
  }
  .mobile-stack-row > *:last-child {
    border-bottom: none !important;
  }

  /* ── 8. Tables / pre / long strings: allow horizontal scroll inside their container ── */
  /* For genuine tabular data we don't want to collapse (e.g. SHA proof rows), scroll instead */
  table,
  pre,
  code {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── 9. Library tier topic grid: 1 col on mobile (was repeat(auto-fill,minmax(280px,1fr))) ─ */
  /* Already covered by .topic-grid in rule #2 — but library uses inline minmax which class
   * targeting misses. Re-state for clarity. */

  /* ── 10. Don't let CONTENT images blow out width (icons like .emblem keep their fixed
   *       height — `height:auto !important` would un-cap a 1024px logo to full viewport. The
   *       2026-06-09 first iteration of this rule had `height:auto !important` and the operator
   *       caught the homepage emblem rendering at viewport-width on iPhone. Lesson: never strip
   *       intrinsic sizing from elements that have explicit small dimensions). */
  video,
  iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  img:not(.emblem):not(.brand img) {
    max-width: 100% !important;
    /* height stays whatever the source CSS set; only width is capped */
  }
}

/* ── Sub-tier: very narrow phones (≤375px = iPhone SE / 14 mini) ───────────── */
/* Extra shrink for the smallest devices. */
@media (max-width: 375px) {
  h1 {
    font-size: 28px !important;
  }
  h2 {
    font-size: 20px !important;
  }
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  [style*="font-size:30px"],
  [style*="font-size: 30px"] {
    font-size: 20px !important;
  }
}