/* Randingers · Mobile polish overrides
   Loaded after main styles.css. Fixes table cramming, nav overflow, form sizing.
   v2 (fable5): full mobile pass — no horizontal spillover, 44px tap targets,
   12px font floor, scrollable tables with edge-fade affordance. */

/* ==================================================================
   ≤900px — primary mobile breakpoint (matches hamburger breakpoint)
   ================================================================== */
@media (max-width: 900px) {

  /* ---- Global safety: page must never scroll sideways ---- */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
    overflow-x: clip; /* modern: doesn't create a scroll container, keeps sticky nav */
  }

  /* ---- Nav: hide the wordmark, only show logo ---- */
  .rnav .brand-wordmark { display: none; }
  .rnav { min-height: 56px; }

  /* Hamburger + logout: real tap targets */
  .rnav-hamburger {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
  }
  .rnav-logout {
    min-height: 44px; min-width: 44px;
    padding: 10px 14px !important;
    font-size: 12px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* Dropdown menu items: comfortable rows */
  .rnav-tabs { gap: 0; }
  .rnav-tabs .rnav-tab {
    min-height: 44px;
    display: flex; align-items: center;
    padding: 12px 16px !important;
    font-size: 13px !important;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  .rnav-tabs .rnav-tab:last-child { border-bottom: none !important; }

  /* ---- Terminal ribbon (rbg-inject): wrap cleanly, don't jam ---- */
  .rbg-ribbon {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 6px 12px;
    font-size: 12px;
  }
  .rbg-ribbon .rbg-clock { margin-left: auto; font-size: 12px; }
  .rbg-ticker-item { font-size: 12px; padding: 0 22px; }
  .rbg-status-footer { font-size: 12px; gap: 10px 14px; padding: 8px 12px; }

  /* ---- Hero ---- */
  .hero h1 { font-size: 22px; }
  .hero-sub { font-size: 13px !important; }
  .hero, .hero-head, .trader-hero { padding: 16px 0 12px !important; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 13px; }

  /* ---- Tables: horizontal scroll with edge-fade affordance ----
     Applies to the raw tables that previously forced the whole page
     to ~1150px wide (AI Trader picks + market stats + landing compare). */
  .straights-table, .market-table, .comp-table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* scroll shadows: fade hints at hidden columns */
    background:
      linear-gradient(90deg, var(--panel, #1a2124) 40%, rgba(26,33,36,0)) left / 36px 100% no-repeat local,
      linear-gradient(270deg, var(--panel, #1a2124) 40%, rgba(26,33,36,0)) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.6), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.6), transparent) right / 14px 100% no-repeat scroll;
  }
  .straights-table th, .straights-table td,
  .market-table th, .market-table td {
    white-space: nowrap;
    padding: 10px 10px;
    font-size: 12.5px;
  }
  .straights-table th, .market-table th { font-size: 12px; letter-spacing: 0.04em; }
  /* Keep the matchup column from making the scroll area absurdly wide */
  .straights-table td:nth-child(2) {
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis;
  }

  /* Bets history table: same affordance on its existing scroll wrapper */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(90deg, #14181d 40%, rgba(20,24,29,0)) left / 36px 100% no-repeat local,
      linear-gradient(270deg, #14181d 40%, rgba(20,24,29,0)) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.6), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.6), transparent) right / 14px 100% no-repeat scroll;
  }
  .table-wrap table { min-width: 720px; }
  .table-wrap th, .table-wrap td { white-space: nowrap; font-size: 12px; padding: 10px 8px; }

  /* Legacy rtable: respect 12px floor */
  .rtable { font-size: 12px; }
  .rtable th, .rtable td { padding: 8px 6px; }

  /* ---- KPI / stat cards ---- */
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 12px 14px !important; }
  .stat-card .val, .stat-card .value { font-size: 21px !important; }
  .stat-card .lbl, .stat-card .label { font-size: 12px !important; letter-spacing: 0.08em !important; }
  .stat-card .sub { font-size: 12px !important; }
  /* Inline-styled "Edit" bankroll button inside stat card */
  .stat-card .btn-secondary {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* ---- AI Trader (bot.html) ---- */
  .trader-bankroll { font-size: 34px; }
  .trader-profit { font-size: 14px; }
  .trader-meta { gap: 12px 16px; font-size: 12px; }
  .trader-hero { gap: 14px; }
  .trader-hero-card { padding: 18px 16px; }
  .trader-record-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mini-stat { padding: 12px; }
  .mini-stat .val { font-size: 18px; overflow-wrap: anywhere; }
  .mini-stat .lbl { font-size: 12px; letter-spacing: 0.05em; }
  .mini-stat .sub { font-size: 12px; }
  .run-block { padding: 14px 12px !important; }
  .run-header { flex-wrap: wrap; }
  .run-header .run-meta, .run-window { font-size: 12px; }
  .section-title { flex-wrap: wrap; gap: 4px 10px; }
  .section-title .meta { font-size: 12px; }
  .journal-entry { padding: 12px 14px; }
  .journal-entry .journal-metrics { font-size: 12px; gap: 10px 14px; }
  .parlay-status, .profile-badge { font-size: 12px !important; }
  .parlay-legs .leg-selection small, .parlay-legs .leg-price { font-size: 12px; }

  /* Run/Learn action buttons: full-size tap targets */
  .action-btn {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 13px;
  }
  .page-header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header > div:last-child { display: flex; gap: 8px; }
  .page-header .action-btn { flex: 1 1 auto; }

  /* "Bet on FANDUEL →" deep links: tappable */
  .ai-leg-betlink {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 12px;
    display: inline-flex; align-items: center;
  }

  /* Bot pulse / v2 health / live P&L / 30-day trends:
     collapse inline-styled multi-column grids to a single column */
  #bot-pulse [style*="grid-template-columns"],
  #v2-health [style*="grid-template-columns"],
  #live-pl-ticker [style*="grid-template-columns"],
  #trends-section [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Market performance bars: tighten the label/bar/value row */
  #u8-chart [style*="grid-template-columns"] {
    grid-template-columns: 92px 1fr 62px !important;
    gap: 8px !important;
  }

  /* ---- Two-col layouts collapse ---- */
  .two-col { grid-template-columns: 1fr !important; }

  /* ---- Performance page ---- */
  #channelCompareGrid { grid-template-columns: 1fr !important; }
  .chart-wrap { padding: 12px 8px; }
  #pnlChart, #edgeChart { height: 240px; }
  .perf-filter-row select {
    min-height: 44px;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* ---- Filter chips (Bets / Performance / Sniper leagues) ---- */
  button.chip, .chips .chip {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* non-interactive tags/badges: keep compact but readable */
  span.chip, .tag, .badge, .pill { font-size: 12px !important; }
  .chips { gap: 8px; }

  /* ---- Sniper ---- */
  #sniper-main { padding: 16px 12px; }
  /* Sidebar: don't clip the scan toolbar; scroll the game list instead */
  #sniper-sidebar { max-height: none; overflow: visible; }
  #sniper-sidebar .game-list { max-height: 200px; overflow-y: auto; }
  #v2-toolbar { gap: 8px !important; }
  #v2-toolbar button, #v2-toolbar select {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    flex: 1 1 auto;
  }
  #refresh-fixtures { min-height: 44px; font-size: 13px; }
  .sharp-panel-head { flex-wrap: wrap; gap: 10px; }
  .sharp-metrics { gap: 8px; }
  .sharp-metric { padding: 8px; }
  .sharp-metric .lbl { font-size: 12px; letter-spacing: 0.02em; }
  .sharp-metric .val { font-size: 14px; }
  .sharp-tap {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 18px;
    font-size: 13px;
  }
  .sharp-sub { font-size: 12px; }

  /* ---- Desk dashboard ---- */
  /* Retina fix: JS sizes the canvas buffer at offsetWidth*dpr but never
     constrains CSS size, so on dpr=2 phones the chart rendered 2x and
     overlapped the panels below it. */
  #bankrollChart { width: 100% !important; height: 220px !important; }
  .chart-wrap { overflow: hidden; }
  /* Today's Book / Sniper feed tables: scroll sideways instead of clipping */
  .dp-body.p0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(90deg, var(--panel, #1a2124) 40%, rgba(26,33,36,0)) left / 36px 100% no-repeat local,
      linear-gradient(270deg, var(--panel, #1a2124) 40%, rgba(26,33,36,0)) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.6), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.6), transparent) right / 14px 100% no-repeat scroll;
  }
  .desk-table { min-width: 560px; }
  .desk-table th, .desk-table td { font-size: 12px; white-space: nowrap; }

  /* ---- Pick cards (Dinger board / desk) ---- */
  .pick-matchup { font-size: 12px !important; letter-spacing: 0.04em !important; }
  .pick-metric .lbl { font-size: 12px !important; letter-spacing: 0.03em !important; }

  /* ---- Buttons: universal tap-target floor ---- */
  .btn, .btn-primary, .btn-secondary, .primary-btn, .cta-primary,
  .tier-btn, .chat-send {
    min-height: 44px;
    font-size: 13px;
  }
  .modal-close {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ---- Drawers / modals: full-width on phones ---- */
  .drawer-panel { width: 100vw; max-width: 100vw; padding: 18px 16px; }
  .modal-overlay.modal-center .drawer-panel { width: calc(100vw - 24px); }

  /* ---- Forms: labels readable, inputs don't trigger iOS zoom ---- */
  label { font-size: 12px !important; }
  input, textarea, select { font-size: 16px !important; }

  /* ---- Panels ---- */
  .panel { border-radius: 4px; }
  .panel-head { padding: 12px; }
  .panel-head h2 { font-size: 15px; }

  /* ---- Chat ---- */
  .chat-wrap { height: 75vh; }
  .chat-msg { max-width: 92%; font-size: 13px; }

  /* ---- Pricing ---- */
  .pricing-grid { grid-template-columns: 1fr; }

  /* ---- Landing page (home.html) ---- */
  .land-nav { padding: 10px 14px; }
  .land-nav-links { gap: 4px; }
  .land-nav .btn-primary {
    min-height: 44px;
    display: inline-flex; align-items: center;
    padding: 10px 16px;
  }
  .btn-hero { min-height: 48px; }

  /* ---- 12px font floor: remaining micro-labels ---- */
  .rbg-status-pill { font-size: 12px !important; }
  .rnav-user { font-size: 12px !important; }
  .legend { font-size: 12px !important; }
  .rfooter div { font-size: 12px; }
  .filter-label, .game-list-league-header, .game-card-meta { font-size: 12px !important; }
  .channel-compare-title { font-size: 12px !important; }
  /* inline-styled 10/11px labels (live P&L ticker, section subtitles, shadow feed) */
  #live-pl-ticker [style*="font-size:10px"],
  #lp-open,
  .section-title h2 [style*="font-size:11px"],
  #shadowPerf [style*="font-size:11px"] {
    font-size: 12px !important;
  }
}

/* ==================================================================
   ≤760px — landing nav: keep only CTAs, drop text links
   ================================================================== */
@media (max-width: 760px) {
  .land-nav-links .land-nav-link { display: none; }
}

/* ==================================================================
   ≤640px — small phones
   ================================================================== */
@media (max-width: 640px) {
  /* Ribbon: drop TERM-01/BKR segment, keep brand + LIVE + clock */
  .rbg-ribbon > span:nth-child(3) { display: none; }

  .trader-bankroll { font-size: 30px; }
  .stat-card .val, .stat-card .value { font-size: 19px !important; }
}

/* ==================================================================
   ≤420px — iPhone mini / SE
   ================================================================== */
@media (max-width: 420px) {
  .rbg-ribbon #rbg-clock-utc { display: none; }
  .trader-record-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  .chat-wrap { height: 85vh; }
  .hero h1 { font-size: 18px; }
}

/* Print styles for track record */
@media print {
  .rnav, .btn, .chat-send, .rnav-logout, .rnav-tabs, .rnav-right { display: none !important; }
  body { background: white !important; color: black !important; }
  .panel { border: 1px solid #ccc; page-break-inside: avoid; }
  .hero h1 { color: black !important; }
}

/* Dark mode is already default. Add manual light mode support for future. */
[data-theme="light"] {
  --bg: #fafafa;
  --panel: #ffffff;
  --border: #e5e7eb;
  --fg: #111827;
  --dim: #6b7280;
}