/* [mobfit-20261026] MOB-01 / D3-45 — phones: the app header fits the screen, and every pick card's children stay inside the card.
   Everything is inside max-width media queries: at 641 px and wider no rule here applies (desktop byte-identical rendering). */
@media (max-width:640px){
  /* 1 · the app header (.topbar, four dashboard shells). .tb-right is flex-shrink:0 (tactix-extracted.css) and holds the streak chip,
     the API Live pill, the bell, a disabled "coming soon" button and the avatar: 299 px beside a 147 px logo and the search box,
     so it ran 166 px past a 390 px screen and iOS laid the whole page out wider than the screen. */
  .topbar{padding:0 12px;gap:8px}
  .topbar .tb-search{flex:0 1 40px;min-width:36px}
  .topbar .tb-right{gap:6px;min-width:0}
  .topbar .tb-right>div:not([class]){display:none!important}                     /* the API Live pill (elite and admin shells) */
  .topbar .tb-right>.tb-icon-btn[style*="not-allowed"]{display:none}     /* "Data exports — coming soon" / "Menu — coming soon" */

  /* 2 · the pick card (.aipp-prow: Free and Pro Match Predictions, "N more markets" rows) and the leg card (.txl-row: accumulators,
     Truck, value boards). The phone grid is `1fr 64px`; a 1fr track's minimum is its item's min-content, and the decorations other
     modules add to the main column (the nowrap "Calibrated ±x% · n settled" tag, "Model overconfident here lately", Why/Discuss)
     made that minimum wider than the card, so the odds column, the pick and the tier badge were pushed past the card's border. */
  .aipp-prow>*,.txl-row>*{min-width:0}
  .aipp-prow-meta{flex-wrap:wrap}
  .aipp-prow .tx-tr-tag,.txl-row .tx-tr-tag{white-space:normal}
  .aipp-prow .txpx-badge,.txl-row .txpx-badge{max-width:100%;margin-left:0}
  .aipp-prow-fixture,.aipp-prow-sel,.txl-fixture,.txl-sel{overflow-wrap:anywhere}
}
@media (max-width:400px){
  /* the narrowest phones (360 px): the word-mark takes 2 px of spacing, not 3, so logo + search + streak + bell + avatar fit */
  .topbar .tb-logo{font-size:16px;letter-spacing:2px;gap:7px}
  /* [mobfix2-20261026] MOB-FIX-A: the landing page's three plan cards sit in a one-column 1fr grid (index.html .pricing-grid, max 420 px); a 1fr
     track's minimum is its item's min-content, which at 360 px was 357 px, 17 px past the screen. The card may now shrink to its track. */
  .pricing-grid>.price-card{min-width:0}
  /* the closing banner "READY TO READ THE PATTERNS?" ran 47 px past its section at 360 (40 px is clamp()'s floor); the amount line "£9.99/mo" 4 px past its card */
  .cta-h{font-size:clamp(30px,9vw,40px)}
  .pricing-grid .price-amount{font-size:clamp(32px,11.5vw,42px)}   /* [headerphone-20261028] was 42px: at 320 px "£39.99/mo" ran 14 px past its card (MOB-00 measureOverflow); 42px from 366 px up */
}
@media (min-width:641px) and (max-width:720px){
  .txl-row>*{min-width:0}   /* the leg card's second two-row band (tactix-leg-card.js) */
  /* D3-45: the header trim also applies in the 641-720 px band */
  .topbar .tb-right>div:not([class]){display:none!important}
  .topbar .tb-right>.tb-icon-btn[style*="not-allowed"]{display:none}
}