/* ================================================================
   SportsBiff — Mobile CSS
   ALL rules are inside @media blocks.
   Desktop styles are never modified here.
   ================================================================ */

/* ── 1. AUTHENTICATED LAYOUT ──────────────────────────────────── */

@media (max-width: 1024px) {

  /* Main: remove 280px sidebar offset */
  .app-main {
    margin-left: 0 !important;
    padding: 80px 16px 32px !important;
    overflow-x: hidden !important;
  }

  /* Sidebar: becomes off-screen drawer */
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 100;
  }
  .app-sidebar.sb-open {
    transform: translateX(0);
  }

  /* Backdrop overlay */
  .sb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sb-backdrop.sb-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hamburger button: show on mobile */
  .sb-toggle {
    display: flex !important;
  }

  /* Search bar: hide on mobile */
  .nav-search {
    display: none !important;
  }

  /* Top nav padding */
  header.fixed {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Nav: hide emoji cluster and queries counter */
  .nav-logo-emojis { display: none !important; }
  .nav-queries     { display: none !important; }

  /* Hero tab buttons: 2-column grid so all 4 fit cleanly.
     A one-row scrolling strip was tried and rejected -- it cut "UPCOMING GAMES"
     mid-word and hid a tab and a half behind a swipe. Primary navigation should
     not need discovering. Keep the grid. */
  .hero-state-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Bold, readable tabs — they are the page's header now that the masthead is gone. The old
     12px/10.5px step-downs existed to stop "UPCOMING GAMES" clipping WITH its emoji prefix;
     the emoji are gone, so one legible size fits a 2x2 grid column down to 320px. */
  .hero-state-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    padding: 8px 2px !important;
    white-space: nowrap !important;
  }

  /* Tabs sit near the top: trim the wrapper's top padding (the app chrome already provides air) */
  .homepage { padding: 6px 16px 16px !important; }

  /* Upcoming/Live fixture cards -- the TABLET range (768-1024px) keeps the
     three-column crest-VS-crest card, which has ~330px per team column there and
     reads fine. Phones get the stacked row layout in section 1c below. */
  .matchup {
    padding: 20px 16px !important;
    border-left: none !important;
  }
  .matchup-content { gap: 16px !important; }
  /* One rule BETWEEN cards, not a bottom border on each -- theme_hallmark.css
     already draws `.matchup + .matchup { border-top }`, so a per-card bottom
     border gave every middle card a double rule. Hallmark's more specific rule
     recolours this to var(--hh-rule). */
  .upcoming-games-grid .matchup + .matchup {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .team-logo-placeholder {
    width: 72px !important;
    height: 72px !important;
    font-size: 28px !important;
  }

  /* ── Team Dashboard ─────────────────────────────────── */
  .team-tab-btn { font-size: 12px !important; padding: 8px 10px !important; }

  /* Next Match, Form and the League Table are now owned by _soccer_overview.html.erb's own
     <style> block at EVERY width (fluid clamp() sizing) — the !important patches that used
     to live here fought that partial's inline styles and covered only some breakpoints.
     One owner, per the leaderboard.css lesson. Don't re-add .nm-* / .form-* / .league-table
     rules here. */

  /* 2-column grids → single column. minmax(0, 1fr), never bare 1fr — a bare track's min
     size is auto, so one wide child re-widens the column this rule exists to shrink. */
  .overview-two-col { grid-template-columns: minmax(0, 1fr) !important; }

  /* ── Team Header ─────────────────────────────────── */
  .team-header { padding: 10px 0 !important; margin-bottom: 6px !important; gap: 10px !important; }
  .team-header-logo { width: 64px !important; height: 64px !important; }
  .team-header-name { font-size: 18px !important; }
  .team-header-stats { gap: 8px !important; flex-shrink: 1 !important; margin-right: 6px !important; }
  .team-header-stats > div > div:first-child { font-size: 15px !important; }
  /* Let the logo+name block yield so the stats scoreboard never pushes past the banner. */
  .team-header > div:first-child { min-width: 0 !important; }

  /* 320-class phones: logo+name+3-stat scoreboard measured ~357px wide, so the GD column
     was silently cut (probe, 2026-09-01). Step the logo and stat type down one notch.
     (!important: hallmark's body.hallmark .team-header-stats > div padding wins otherwise.) */
  @media (max-width: 374px) {
    .team-header-logo { width: 48px !important; height: 48px !important; }
    .team-header-name { font-size: 16px !important; }
    .team-header-stats > div { padding: 0 7px !important; }
    .team-header-stats > div > div:first-child { font-size: 14px !important; }
    .team-header-stats > div > div:last-child { font-size: 10px !important; }
  }

  /* Stats tab: 4-col → 2×2 grid */
  .stats-hero-grid { grid-template-columns: 1fr 1fr !important; }

  /* Squad tab: 2-col → single column */
  .squad-grid { grid-template-columns: 1fr !important; }

  /* Betting tab: reduce 34px odds font */
  .betting-1x2 > div { padding: 8px 4px !important; }
  .betting-odd-value { font-size: 22px !important; }

  /* Matches tab: H2H banner */
  .h2h-banner  { gap: 12px !important; }
  .h2h-hero    { padding: 12px 10px !important; }
  .h2h-team    { max-width: 88px !important; }
  .h2h-team img,
  .h2h-team > div:first-child { width: 72px !important; height: 72px !important; display: block !important; margin: 0 auto 6px !important; }
  .h2h-name    { font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

  /* ── Biff Profile ─────────────────────────────────── */
  /* The profile is now ONE fluid system (clamp/minmax/auto-fit/flex-basis in the view itself): the
     desktop design compresses to any width instead of switching layouts here. The single behavioral
     rule left (below, scoped to phones) is the header actions — when the header wraps, the Subscribe
     button goes full width (a layout MODE wrapping can't express; every SIZE stays fluid in the view). */

  /* ── Leaderboard / Directory table ──────────────────────────
     MOVED to leaderboard.css, which now owns the table at EVERY width. The rules
     that were here hardcoded a 5-track grid while the ERB emits 4, 5 or 6 cells
     depending on the Rank and Biff Score columns; the tablet copy below was updated
     for 6 and this one never was. One owner, so they cannot drift apart again. */

  /* ── Biff Card (Directory) ─────────────────────────────────── */
  /* Tighter card padding */
  .biff-card-item { padding: 16px !important; }
  /* Footer: subscriber count on own row, then equal-width button pair */
  .biff-card-footer { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .biff-card-btns { gap: 6px !important; }
  .biff-card-btns > form { flex: 1 !important; }
  .biff-card-btns > form > button { width: 100% !important; justify-content: center !important; }
  .biff-card-btns > a { flex: 1 !important; text-align: center !important; }

  /* Following page rules moved to following.css — the !importants here only existed to
     beat inline styles, which are classes now. Don't re-add them here. */

  /* Match rows: badge left, teams centre, date right */
  .match-row { overflow: hidden !important; }
  .mr-left   { width: 44px !important; flex-direction: row !important; gap: 0 !important; }
  .mr-right  { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 48px !important; flex-shrink: 0 !important; }
  .mr-right > span { font-size: 11px !important; color: var(--text-secondary) !important; white-space: nowrap !important; }
  .mr-right > div  { display: none !important; }  /* hide odds, keep date */
  .mr-name   { width: auto !important; flex: 1 !important; font-size: 14px !important; }
  .mr-score  { width: 44px !important; flex-shrink: 0 !important; }
  .mr-score > span { font-size: 14px !important; }
  .match-row > div:nth-child(2) { gap: 6px !important; }
}

/* ── 1b. TABLET REFINEMENTS (768px–1024px): wider than phone ───── */

@media (min-width: 768px) and (max-width: 1024px) {
  /* More breathing room than the tight phone padding */
  .app-main { padding: 88px 28px 40px !important; }

  /* 2-column grids where phone is 1-col */
  .overview-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .squad-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Directory list rows: slightly wider padding */
  .dir-biff-row { padding: 13px 18px !important; }

  /* .lb-header / .lb-row tablet tracks: see leaderboard.css. */
}

/* -- 1c. PHONE FIXTURE ROWS (<=767px) --------------------------- */
/*
 * The Upcoming Games / Live hero cards on phones.
 *
 * THE PROBLEM: `.matchup-content` is a three-column flex row --
 * [crest + name | VS | crest + name]. At 393px each team column gets ~110px, and
 * `.matchup-team .team-name` carries white-space:nowrap + text-overflow:ellipsis
 * (home.css), so EVERY name truncated ("Luton T...", "Chelse..."). At ~235px a
 * card, barely two fitted on screen.
 *
 * THE FIX: one team per line with a small crest and its full name, kickoff time
 * to the right, competition and venue as quiet kickers. ~130px a card.
 *
 * `.match-details` becomes display:contents so its three <p> children become
 * direct grid items of `.matchup` and can be placed independently. If that ever
 * misbehaves the fallback is the plain stacked source order, not a broken page.
 *
 * 767px and not 1024px on purpose: at 768px iPad portrait the three-column card
 * has ~330px per team column, does not truncate, and looks right. Stacking there
 * would waste the width.
 *
 * The markup is SHARED with the Live tab (home/hero/_live.html.erb) -- same
 * .matchup / .matchup-content / .match-details, with the live score + MM:SS clock
 * inside .matchup-vs where Upcoming has the VS badge. Both get the stacked
 * treatment; only the right-hand slot differs.
 */

@media (max-width: 767px) {
  .upcoming-games-grid .matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "league league"
      "teams  when"
      "venue  venue";
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 14px 16px !important;
  }

  /* Promote the three <p>s to grid items of .matchup. */
  .upcoming-games-grid .match-details { display: contents; }

  .upcoming-games-grid .match-league { grid-area: league; text-align: left; margin: 0 !important; }
  .upcoming-games-grid .match-venue  { grid-area: venue;  text-align: left; margin: 0 !important; font-size: 11px; }

  /* Teams: a column of full-width rows instead of side-by-side columns. */
  .upcoming-games-grid .matchup-content {
    grid-area: teams;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px !important;
    max-width: none;
    min-width: 0;
  }
  .upcoming-games-grid .matchup-team {
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
  }
  .upcoming-games-grid .matchup-team .team-name {
    /* The actual fix for the truncation. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    font-size: 15px;
    line-height: 1.25;
    margin-top: 0;
    overflow-wrap: anywhere;   /* 40-char club names exist -- wrap, never clip */
    min-width: 0;
  }

  /* Crests. theme_hallmark.css is imported AFTER this file and sets
     `body.hallmark .matchup-team .team-logo { width: clamp(56px,18vw,96px) !important }`,
     so an equal-specificity !important here would lose on source order. Hence the
     longer selector -- written twice so it survives a HALLMARK_UI = false revert. */
  .upcoming-games-grid .matchup-team .team-logo,
  body.hallmark .upcoming-games-grid .matchup-team .team-logo {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 4px;
  }
  .upcoming-games-grid .team-logo-placeholder {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    border-width: 1px !important;
  }

  /* ---- Upcoming: date over time, right of the two team rows ---- */
  .hero-preview .matchup-vs { display: none; }          /* redundant once stacked */
  .hero-preview .match-datetime {
    grid-area: when;
    align-self: center;
    text-align: right;
    margin: 0 !important;
    white-space: nowrap;
  }
  .hero-preview .md-sep  { display: none; }
  .hero-preview .md-date { display: block; font-size: 11px; font-weight: 600; opacity: 0.75; }
  /* 16px, not the 20px this shipped with. The `when` column is `auto` + nowrap, so it never
     yields — it sets its width and the names take whatever is left. 20px was measured when
     the string was "19:00"; it now carries the viewer's zone (`:match_time_tz` → "19:00
     GMT+4"), which is 11 mono characters, not 5. At 20px that column measured 129.6px at
     EVERY width — wider than the whole name column's 80.4px at 320px, which is what pushed
     8 of the 12 team names onto two lines. 16px gives ~26px back per row. Re-measure before
     changing this again: the width follows the FORMAT, not just the font size. */
  .hero-preview .md-time { display: block; font-size: 16px; font-weight: 700; line-height: 1.15; }

  /* Home team on top. Upcoming renders away-then-home in the DOM (Live renders
     home-then-away), so reorder here rather than in the view -- desktop keeps its
     existing left-to-right reading. */
  .hero-preview .matchup-away { order: 2; }

  /* ---- Live: score + clock take the right slot, LIVE pill rides the kicker ----
     .matchup-vs is a child of .matchup-content, NOT of .matchup, so grid-area on it
     alone does nothing -- it just floats between the two team rows. .matchup-content
     therefore goes display:contents here too, promoting home / vs / away to grid
     items that can each be placed. The score column spans both team rows. */
  .hero-live .matchup {
    grid-template-areas:
      "league live"
      "home   score"
      "away   score"
      "venue  venue";
  }
  .hero-live .matchup-content { display: contents; }
  .hero-live .matchup-home { grid-area: home; }
  .hero-live .matchup-away { grid-area: away; }
  .hero-live .matchup-vs {
    grid-area: score;
    align-self: center;
    justify-self: end;
    text-align: right;
  }
  .hero-live .match-datetime {
    grid-area: live;
    text-align: right;
    margin: 0 !important;
  }
  /* Score + clock are inline-styled at 28px/18px for the desktop card; too big for
     a phone's right-hand column. */
  .hero-live .matchup-vs > span:first-child { font-size: 22px !important; letter-spacing: 1px !important; }
  .hero-live .matchup-vs .live-timer        { font-size: 14px !important; }
}


/* ── 2. DASHBOARD STATS GRID ──────────────────────────────────── */

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 3. BIFFS DIRECTORY ───────────────────────────────────────── */

@media (max-width: 640px) {
  #biffs-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  /* Search */
  .dir-search-wrap input { font-size: 14px !important; }

  /* Sport pills: now a wrapping grid (.sportbar) in leaderboard.css. The rule here
     asked for a nowrap scroll strip inside a Tailwind overflow-hidden box, so it
     could never scroll — the nine chips just squeezed to ~40px each. */

  /* Featured strip: styled entirely in biffs/_directory.html.erb (.dfc-*) — the old
     flex-scroller rules that lived here were inert against the grid and are gone. */

  /* List rows — compact on very small screens */
  .dir-biff-row { padding: 11px 12px !important; gap: 10px !important; }
}

/* ── 4. ONBOARDING ────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Viewport lock — entire onboarding fits in screen */
  .ob-body {
    height: 100dvh !important;
    padding: 16px 16px 0 !important;
    overflow: hidden !important;
  }
  .ob-logo   { margin-bottom: 12px !important; }

  /* Yield wrapper fills remaining height after logo */
  .ob-step-yield {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* Step indicator: fixed height at top */
  .ob-step-indicator {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  /* Stimulus wrapper: fills space between step indicator and buttons */
  .ob-controller-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Card: flex column, never scrolls (inner list does) */
  .ob-card {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 16px !important;
  }

  /* The Done/summary step has no inner scrolling list — the whole card scrolls, so it must override
     the viewport-lock overflow:hidden above (otherwise its content is clipped and unscrollable). */
  .ob-card.ob-card--scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .ob-header { margin-bottom: 28px !important; }
  .ob-emoji  { font-size: 40px !important; margin-bottom: 8px !important; }
  .ob-h1     { font-size: 22px !important; }
  .ob-sub    { font-size: 14px !important; }

  .ob-sports-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .ob-submit {
    min-width: 0 !important;
    width: 100% !important;
    padding: 14px 20px !important;
  }

  /* Nav buttons: pinned at bottom, never scrolled away */
  .ob-nav-row {
    flex-shrink: 0 !important;
    flex-direction: column-reverse !important;
    gap: 10px !important;
    padding: 12px 0 max(16px, env(safe-area-inset-bottom)) !important;
    width: 100% !important;
  }
  .ob-back-btn {
    text-align: center !important;
    padding: 12px 20px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }
  .ob-right-group {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /* Skip link: pinned just below nav buttons */
  .ob-skip-link {
    flex-shrink: 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    margin-top: 4px !important;
  }

  /* Players card: compact header */
  .ob-player-header   { margin-bottom: 12px !important; }
  .ob-player-title    { font-size: 20px !important; }
  .ob-player-subtitle { display: none !important; }

  /* Team tabs: smaller */
  .ob-team-tabs     { gap: 8px !important; margin-bottom: 8px !important; }
  .ob-team-tab      { padding: 7px 12px !important; gap: 8px !important; }
  .ob-team-tab-logo { width: 22px !important; height: 22px !important; border-radius: 11px !important; }
  .ob-team-tab-name { font-size: 13px !important; }

  /* Team cards: on mobile show only the acronym (fully visible) instead of the full name, which
     truncated with an ellipsis and looked broken. */
  .ob-team-fullname { display: none !important; }
  .ob-team-abbr {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
  }
  /* Free horizontal space on narrow phones (smaller logo, tighter gaps/padding) so the acronym has
     room, and contain the info column so its text can never cross into the checkbox circle. */
  .ob-team-card { gap: 9px !important; padding: 9px 11px !important; }
  .ob-team-logo { width: 28px !important; height: 28px !important; border-radius: 14px !important; }
  .ob-team-info { overflow: hidden !important; }

  /* Search: compact */
  .ob-player-search { margin-bottom: 8px !important; }
  .ob-player-search input {
    padding: 9px 14px 9px 38px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* Player list: the ONLY scroller — header/tabs/search stay static */
  .ob-player-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-bottom: 8px !important;
  }

  /* Player cards: more compact */
  .ob-player-card  { padding: 10px 12px !important; gap: 10px !important; border-radius: 10px !important; }
  .ob-player-photo { width: 38px !important; height: 38px !important; border-radius: 50% !important; }
  .ob-player-name  { font-size: 14px !important; }

  /* Complete page: compact internal spacing */
  .ob-complete-check  { width: 56px !important; height: 56px !important; border-radius: 28px !important; margin-bottom: 12px !important; }
  .ob-complete-title  { font-size: 24px !important; margin-bottom: 8px !important; }
  .ob-complete-sub    { font-size: 14px !important; margin-bottom: 16px !important; }
  .ob-stat-cards      { gap: 8px !important; margin-bottom: 14px !important; }
  .ob-stat-card       { padding: 10px 12px !important; min-width: 0 !important; flex: 1 !important; }
  .ob-stat-value      { font-size: 22px !important; }
  .ob-preview-card    { padding: 12px !important; }
  .ob-preview-item    { padding: 8px 10px !important; gap: 8px !important; }
  .ob-team-strip      { display: none !important; }

  /* Dashboard welcome hero: hide feature cards + tagline on mobile */
  .welcome-cards       { display: none !important; }
  .welcome-bottom-text { display: none !important; }

  /* ── Manage Subscriptions ──────────────────────────────────── */

  /* Summary strip: 2×2 grid instead of 4-in-a-row */
  .sub-summary-strip { grid-template-columns: repeat(2, 1fr) !important; }

  /* Card top row: stack biff info above P&L */
  .sub-card-top { flex-direction: column !important; gap: 10px !important; }

  /* P&L block: align left, show number + label inline */
  .sub-pnl {
    text-align: left !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
  .sub-pnl > div:first-child { font-size: 20px !important; }

  /* Stats row: responsive grid */
  .sub-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 6px !important;
  }

  /* Actions row: wrap so Cancel button doesn't get squashed */
  .sub-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .sub-actions > div:first-child { flex-wrap: wrap !important; gap: 8px !important; }

  /* Cancel confirm: stack text above buttons, buttons go side-by-side */
  .sub-cancel-inner { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  .sub-cancel-inner > div:first-child { margin-left: 0 !important; }
  .sub-cancel-inner > div:last-child { display: flex !important; gap: 8px !important; margin-left: 0 !important; flex-shrink: 1 !important; }
  .sub-cancel-inner button,
  .sub-cancel-inner input[type="submit"] { flex: 1 !important; text-align: center !important; }
}

/* ── 5. HOMEPAGE — gap-fills only (homepage.css covers most) ───── */
/* homepage.css already handles: nav-links, hero-title, footer-links */

@media (max-width: 767px) {
  .problem-grid {
    flex-direction: column !important;
  }
  .ai-chat-grid {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .testimonial-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .primary-cta, .secondary-cta {
    justify-content: center !important;
  }
}

/* Biff profile: NO breakpoints. The header's single CTA band stacks by flex-wrap (copy flex-grow
   999 vs button 1) and every band is fluid — see the <style> block in dashboard/_biff.html.erb. */