/* ==========================================================================
 * OST · Predict page — mobile reorganization & fixes
 * --------------------------------------------------------------------------
 * The prediction board is a very tall, desktop-first layout. On phones it read
 * as cramped and several pieces were outright broken because the global
 * `body.ost-mobile-shell * { min-width:0; overflow-wrap:anywhere }` rule
 * (mobile-shell.css) shrinks fixed-width horizontal-scroller children and
 * breaks their text one-character-per-line.
 *
 * This file (loaded LAST) reorganizes the predict page for mobile:
 *   1. Repairs the broken market tape + chip rows (nowrap, real widths).
 *   2. Turns the 6 stacked hero "metric" boxes into a compact 2-col grid.
 *   3. Collapses desktop marketing filler (intro paragraph, venue pills, the
 *      two side "info" cards, the hero detail blurb) that only add scroll.
 *   4. Fixes the "Live OST buys" strip overlap.
 *   5. Tightens spacing so markets and the trade action come into reach fast.
 * Nothing interactive is hidden — only static copy. Verified no dead ends.
 * ========================================================================== */

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {

  /* ── 1 · REPAIR THE MARKET TAPE (was vertical char-per-line) ───────────── */
  #predictionMarketTape,
  .prediction-market-tape {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .prediction-tape-chip {
    flex: 0 0 82% !important;
    min-width: 82% !important;
    max-width: 82% !important;   /* beats the universal max-width:100% squeeze */
    scroll-snap-align: start;
    white-space: normal !important;
  }
  /* Undo the global overflow-wrap:anywhere that shattered the title text. */
  .prediction-tape-chip,
  .prediction-tape-chip * {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .prediction-tape-chip strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
  }

  /* ── 2 · HERO METRICS: compact grid, not six full-width stacks ─────────── */
  body.ost-mobile-shell .prediction-market-hero-metrics,
  .prediction-market-hero-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .prediction-market-hero-metric {
    padding: 9px 11px !important;
  }
  .prediction-market-hero-metric span { font-size: 0.62rem !important; }
  .prediction-market-hero-metric strong { font-size: 0.92rem !important; }
  .prediction-market-hero-price { padding: 10px 12px !important; }

  /* ── 3 · COLLAPSE DESKTOP MARKETING FILLER (static copy only) ──────────── */
  #predictionMarketIntro,
  .prediction-market-venue-row,
  .prediction-market-side-stack,
  #predictionHeroDetail {
    display: none !important;
  }
  /* Trim the remaining hero copy so the spotlight isn't a full screen. */
  .prediction-market-hero-copy h5 { font-size: 1.02rem !important; line-height: 1.25 !important; }
  #predictionMarketHeading { font-size: 1.15rem !important; }
  .prediction-market-head { gap: 12px !important; }
  .prediction-market-hero-card { padding: 14px !important; gap: 10px !important; }
  .prediction-market-side { gap: 8px !important; }

  /* ── 4 · CONTROLS: clean vertical stack, each filter its own scroll rail ──
     style.css @media(max-width:720px) tries to make the whole control block a
     single horizontal swipe rail, but mobile-shell.css forces the block to
     flex-direction:column. The two fight, and the search row's rail WIDTH
     (min(86vw,390px)=335px) became its HEIGHT — a 335px empty gap. We settle
     it: the block is a column, each toggle scrolls horizontally on its own
     line, and the search row is a normal full-width stack. Selectors match the
     `.prediction-market-controls > …` specificity of the 720px block and load
     last, so they win. */
  .prediction-market-controls {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: visible !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .prediction-market-controls > #predictionSourceToggle,
  .prediction-market-controls > #predictionRankToggle,
  .prediction-market-controls > #predictionTopicToggle {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #predictionSourceToggle::-webkit-scrollbar,
  #predictionRankToggle::-webkit-scrollbar,
  #predictionTopicToggle::-webkit-scrollbar { display: none; }
  .prediction-chip {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* The search row: kill the 335px rail width/basis, make it a normal
     full-width stack (input over a full-width Refresh button). */
  .prediction-market-controls > .prediction-market-search-row,
  .prediction-market-search-row {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .prediction-market-controls .prediction-market-search { flex: 0 0 auto !important; flex-basis: auto !important; width: 100% !important; }
  .prediction-market-controls .prediction-refresh-btn { width: 100% !important; }

  /* ── 5 · "LIVE OST BUYS" STRIP: stack label over the scroller ──────────── */
  .ost-market-activity-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .ost-market-activity-strip__track { width: 100%; }
  .ost-market-activity-chip { max-width: 88vw !important; }

  /* ── 6 · SUMMARY STATS: 3 tidy columns ─────────────────────────────────── */
  #predictionMarketSummary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .prediction-market-stat { padding: 10px !important; }
  .prediction-market-stat span { font-size: 0.6rem !important; }
  .prediction-market-stat strong { font-size: 1rem !important; }

  /* ── 7 · MARKET LIST: single readable column, comfortable cards ────────── */
  #predictionMarketList {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ── 8 · SECTION RHYTHM: less air between blocks ───────────────────────── */
  .prediction-market-board > * { margin-block: 10px !important; }
  .prediction-market-board { padding: 14px !important; }
}