/* ==========================================================================
 * 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: 12px 8px !important; }

  /* ── 9 · LIST FIRST — reach the browsable markets immediately ───────────
     `.prediction-market-main` renders the big featured "stage" (chart, tape,
     ladder, inline trade desk ≈ 1300px tall) BEFORE the market grid, so on a
     phone you scroll through one market's detail before you can browse. On
     mobile a card tap opens the full modal anyway, so the inline stage is
     redundant here. Flip the order: cards come first, the featured stage drops
     below as a "spotlight". */
  .prediction-market-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  #predictionMarketList { order: -1 !important; }
  .prediction-market-stage { order: 2 !important; }

  /* ── 10 · RECLAIM CARD WIDTH ────────────────────────────────────────────
     The predict board is nested five padding layers deep (section > container >
     wallet-shell > wallet-panel > board), which strips ~120px and leaves cards
     at ~262px in a 390px screen. Trim the wallet chrome padding ONLY while the
     predict tab is the active one (so other wallet tabs are untouched), and zero
     the redundant inner wrappers. Cards then use nearly the full width. */
  .wallet-tab-panel.is-active:has(.prediction-market-board) { padding-left: 6px !important; padding-right: 6px !important; }
  .wallet-command-shell:has(.wallet-tab-panel.is-active .prediction-market-board) { padding-left: 6px !important; padding-right: 6px !important; }
  .prediction-market-shell,
  .prediction-market-main { padding-left: 0 !important; padding-right: 0 !important; }

  /* ── 11 · COMPACT THE FEATURED STAGE (now below the list) ───────────────── */
  .prediction-market-stage { padding: 12px !important; gap: 10px !important; }
  .prediction-stage-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .prediction-stage-stat { padding: 8px !important; }
  .prediction-stage-stat span { font-size: 0.58rem !important; }
  .prediction-stage-stat strong { font-size: 0.9rem !important; }

  /* ── 12 · CARD VISUAL REFRESH ───────────────────────────────────────────
     Cleaner, tighter cards: crisper border, comfortable radius, the quick
     YES/NO buttons full-width and thumb-sized, price row legible. */
  .prediction-market-card {
    padding: 13px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(148, 176, 220, 0.14) !important;
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.72), rgba(13, 19, 30, 0.72)) !important;
  }
  .prediction-market-card.is-selected {
    border-color: rgba(110, 168, 254, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(110, 168, 254, 0.35), 0 12px 30px -14px rgba(56, 130, 246, 0.5) !important;
  }
  .prediction-market-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* The Details / Venue links go full-width beneath the two quick buttons. */
  .prediction-market-open-btn { grid-column: 1 / -1 !important; }
  .prediction-market-api-link { grid-column: 1 / -1 !important; text-align: center !important; }
  .prediction-market-quick-btn {
    min-height: 44px !important;      /* thumb target */
    font-weight: 700 !important;
    border-radius: 12px !important;
  }
  .prediction-market-price-grid { gap: 8px !important; }
  .prediction-market-price strong { font-size: 1.02rem !important; }

  /* ── 13 · TRIM CARD REDUNDANCY on mobile ────────────────────────────────
     Two things bloated the card height without adding information on a phone:
       · the topic-tag pills, which for most markets just repeat "All markets"
         three times (the topic is already in the topline), and
       · the YES/NO price grid, which shows the SAME two percentages already in
         the probability row right above it.
     Hide both on mobile so a card is scannable in one glance. */
  .prediction-market-tags { display: none !important; }
  .prediction-market-price-grid { display: none !important; }

  /* Give the probability row + sparkline a touch more presence now that it is
     the single price readout on the card. */
  .prediction-market-probability-row { font-size: 0.86rem !important; }
}