/* mobile.css — Comprehensive mobile optimization for AllandaleSports
   Target: 390px iPhone screen. Breakpoint: max-width 768px.
   Desktop styles are NOT affected. */

@media (max-width: 768px) {

  /* ── GLOBAL ──────────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; -webkit-overflow-scrolling: touch; }

  /* Buttons: minimum 48px tall, full width where appropriate */
  button, .btn, .btn-gold, .btn-outline, .btn-primary,
  [class*="btn"], input[type="submit"] {
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Forms: single column */
  .form-row, .s-row, .form-grid, .name-row, .inline-form .form-row {
    grid-template-columns: 1fr !important;
  }

  /* Tables: horizontally scrollable */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  thead, tbody, tr { display: table; width: 100%; table-layout: auto; }

  /* M-5 consolidation: 16px text inputs everywhere so iOS never zooms on focus.
     Excludes checkboxes/radios/range so they keep their native size. This is
     loaded on every page by nav.js, so pages no longer need to repeat it. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px; }

  /* ── TEAM ROSTER PAGES ──────────────────────────────────── */

  /* Hero section compact */
  .team-hero {
    padding: 14px 16px !important; min-height: auto !important;
    position: relative;
  }
  .team-hero .hero-logo { width: 36px !important; height: 36px !important; }
  .team-hero .team-name-title { font-size: 20px !important; max-width: calc(100% - 40px) !important; }
  .team-hero .team-eyebrow { font-size: 10px !important; }

  /* Team dropdown + palette button */
  #cifl-team-dropdown {
    position: relative !important; top: auto !important; right: auto !important;
    margin-top: 8px; justify-content: flex-start !important;
  }
  #cifl-team-dropdown select {
    font-size: 12px !important; padding: 6px 8px !important; max-width: 180px;
  }

  /* Stats bar horizontal scroll */
  .stats-grid {
    display: flex !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; gap: 0 !important;
    padding: 0 !important; flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .stats-grid::-webkit-scrollbar { display: none; }
  .stats-grid .stat-block {
    min-width: 90px; flex-shrink: 0; padding: 10px 12px !important;
  }

  /* Roster row layout on mobile:
     [SWAP 60px] [Player(logo+name+detail) 1fr] [PROJ 48px] [FPTS 56px]
     POS badge hidden. All extra stat cols hidden. */

  /* Force the base (pre-roster-stats.js) rows to our mobile grid */
  .slot-row, .starter-row {
    min-height: 48px !important;
    grid-template-columns: 60px 1fr 48px 56px !important;
    gap: 4px !important;
    padding: 4px 6px !important;
  }

  /* Hide POS badge column — redundant with section headers */
  .pos-col { display: none !important; }

  /* Hide ALL stat columns except PROJ and FPTS.
     This catches every column roster-stats.js injects:
     CMP/ATT, PASS YDS, PASS TD, RUSH YDS, REC, REC YDS, RUSH/REC TD, INT,
     TKL, AST, SACK, PD, FF, FR, TD, SAFETY,
     FG brackets, FG%, LONG, PAT */
  .stat-col:not(.proj):not(.fpts) { display: none !important; }
  .pts-col { display: none !important; } /* legacy pts-col from HTML */

  /* 7th-column desktop spacer */
  .slot-row > *:nth-child(7):not(.stat-col),
  .starter-row > *:nth-child(7):not(.stat-col) { display: none !important; }

  /* PROJ + FPTS visible, right-aligned */
  .stat-col.proj { font-size: 12px !important; text-align: right !important; }
  .stat-col.fpts { font-size: 13px !important; text-align: right !important; font-weight: 800 !important; }

  /* Column headers match the 4-column grid */
  .col-headers {
    grid-template-columns: 60px 1fr 48px 56px !important;
    gap: 4px !important; padding: 4px 6px !important;
  }
  .col-headers > .pos-col,
  .col-headers > *:nth-child(2) { display: none !important; }
  .col-headers > *:nth-child(n+6) { display: none !important; }

  /* rs-off/rs-def/rs-kick grids from roster-stats.js — override to mobile */
  .starter-row.rs-off, .slot-row.rs-off, .rs-header.rs-off,
  .starter-row.rs-def, .slot-row.rs-def, .rs-header.rs-def,
  .starter-row.rs-kick, .slot-row.rs-kick, .rs-header.rs-kick {
    grid-template-columns: 60px 1fr 48px 56px !important;
    gap: 4px !important;
  }

  /* SWAP / drag button — 60px column, button compact */
  .drag-col { max-width: 60px !important; }
  .rs-swap-label, .swap-btn {
    min-height: 32px !important; max-width: 56px !important;
    font-size: 9px !important; padding: 2px 4px !important;
    white-space: nowrap; overflow: hidden;
  }
  .move-btn, .rd-btn {
    min-height: 32px !important; min-width: 32px !important;
  }

  /* Player column — flex:1, never compressed */
  .player-col {
    gap: 6px !important; min-width: 0 !important; overflow: hidden !important;
    flex: 1 !important;
  }
  .player-info { min-width: 0 !important; overflow: hidden !important; flex: 1 !important; }

  /* Player avatar */
  .player-avatar {
    width: 28px !important; height: 28px !important; font-size: 9px !important;
    flex-shrink: 0 !important;
  }

  /* Player name — 14px, min-width ensures it never collapses */
  .player-name {
    font-size: 14px !important; font-weight: 600 !important;
    line-height: 1.2 !important; min-width: 100px !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  }

  /* Player detail — one line: 'QB · LAR' at 11px */
  .player-detail {
    font-size: 11px !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
  }

  /* Roster wrap + page */
  .roster-wrap { padding: 0 !important; overflow-x: hidden !important; }
  .page { padding: 88px 4px 0 !important; overflow-x: hidden !important; }
  /* The generic .page rule above supplies 88px of top clearance for the fixed
     nav on pages that do NOT set body{padding-top} (myteam, join, dfs-optimizer,
     commissioner, accept-invite, players, teams). Pages that DO set
     body{padding-top:88px} (the LEI league surfaces) were getting that gap
     twice. Those pages give their container id="page", so this more-specific
     rule zeroes the container's own top padding (the body still clears the nav).
     It does NOT change the generic .page rule, so the id-less reliant pages keep
     their 88px. Verified: every id="page" page sets body{padding-top:88px}. */
  #page { padding-top: 0 !important; }

  /* Section title bars */
  .section-title-bar { padding: 6px 6px !important; font-size: 11px !important; }

  /* ── MOCK DRAFT ─────────────────────────────────────────── */

  /* Mobile draft tab bar */
  .mdraft-tabs {
    display: flex !important; gap: 0; background: rgba(12,35,64,0.98);
    border-bottom: 1px solid rgba(201,151,0,0.2);
  }
  .mdraft-tab {
    flex: 1; padding: 10px 4px; font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    text-align: center; color: rgba(250,250,248,0.4); background: transparent;
    border: none; border-bottom: 2px solid transparent; cursor: pointer;
  }
  .mdraft-tab.active { color: #C99700; border-bottom-color: #C99700; }

  /* Live pick feed */
  .live-feed {
    display: block !important; padding: 6px 10px; background: rgba(201,151,0,0.08);
    border-bottom: 1px solid rgba(201,151,0,0.12);
    font-size: 11px; color: rgba(250,250,248,0.6); overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
  }
  .live-feed strong { color: #C99700; font-weight: 700; }

  /* All Picks list */
  .picks-list { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
  .pick-entry {
    display: grid; grid-template-columns: 44px 1fr 32px; gap: 6px;
    padding: 8px 12px; border-bottom: 1px solid rgba(201,151,0,0.06);
    font-size: 13px; align-items: center;
  }
  .pick-entry.user-pick { background: rgba(201,151,0,0.08); }
  .pick-entry .pe-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(250,250,248,0.35); }
  .pick-entry .pe-name { font-weight: 600; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pick-entry.user-pick .pe-name { color: #C99700; }
  .pick-entry .pe-team { font-size: 10px; color: rgba(250,250,248,0.35); }
  .pick-entry .pe-pos { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; color: rgba(250,250,248,0.4); text-align: center; }
  /* M-2: on phones the 12-wide board grid becomes unreadable, so hide it and
     show the per-round picks list (renderPicksList) instead. */
  .board-grid { display: none !important; }
  .pick-round-h {
    padding: 6px 12px; background: rgba(12,35,64,0.6);
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase; color: #C99700;
    border-bottom: 1px solid rgba(201,151,0,0.15);
  }

  /* Settings panel */
  .setup { padding: 100px 16px 40px !important; }
  .setup h1 { font-size: 28px !important; }
  .setup .s-row { grid-template-columns: 1fr !important; }
  .setup .s-toggle button { padding: 10px 8px !important; font-size: 11px !important; }
  .start-btn { min-height: 56px !important; font-size: 16px !important; }

  /* Hub landing */
  .hub { padding: 100px 16px 40px !important; }
  .hub-title { font-size: 30px !important; }

  /* Draft room: stack panels */
  .draft-wrap.active {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
  }
  /* Mobile: show one panel at a time, controlled by JS */
  .player-panel, .board-panel, .team-panel {
    border: none !important; max-height: none !important;
  }
  .player-panel { display: flex; flex-direction: column; }
  .board-panel { display: none; flex-direction: column; overflow-y: auto; }
  .team-panel { display: none; }
  .player-panel.m-active { display: flex !important; }
  .board-panel.m-active { display: flex !important; }
  .team-panel.m-active { display: block !important; }

  /* Draft header */
  .draft-header { padding: 8px 12px !important; flex-wrap: wrap; gap: 6px !important; }
  .dh-pick { font-size: 14px !important; }
  .dh-clock { font-size: 18px !important; }

  /* Player rows in draft */
  .pp-row { min-height: 56px; padding: 10px !important; }
  .pp-row:hover .pp-pick-btn { opacity: 1; }
  .pp-pick-btn { opacity: 1 !important; min-height: 36px !important; padding: 6px 14px !important; }
  .pp-search input { min-height: 44px; font-size: 16px !important; }

  /* Back button (now inline in header, hide old floating one) */
  .back-hub { display: none !important; }

  /* ── LEAGUE HUB ─────────────────────────────────────────── */

  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  /* 11px was too small to read on a phone; 13px stays compact but legible. The
     row scrolls (above) so a slightly larger label does not cause clipping. */
  .tab { white-space: nowrap; flex-shrink: 0; padding: 10px 12px !important; font-size: 13px !important; }

  .home-grid, .rules-grid { grid-template-columns: 1fr !important; }
  .matchup-grid { grid-template-columns: 1fr !important; }
  .teams-grid { grid-template-columns: 1fr !important; }

  /* Sticky first columns in standings */
  .card table th:first-child, .card table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }

  /* ── LEAGUES PAGE ───────────────────────────────────────── */

  .view-toggle button { font-size: 14px !important; padding: 14px 10px !important; }
  .filters {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important; padding: 12px !important;
  }
  .filter-group { flex-shrink: 0; }
  .filter-group select { min-width: 80px; min-height: 40px; }

  /* League table → card layout */
  .lt thead { display: none; }
  .lt-row {
    display: flex !important; flex-wrap: wrap; gap: 8px;
    padding: 14px !important; border-bottom: 1px solid rgba(201,151,0,0.1) !important;
  }
  .lt-row td { padding: 0 !important; border: none !important; }
  .lt-row td:first-child { width: 100%; }
  .lt-row td:last-child { width: 100%; margin-top: 4px; }
  .lt-row td:last-child .join-btn { width: 100%; min-height: 48px; text-align: center; display: block; }
  .lt-detail td { padding: 0 !important; }
  .detail-inner { grid-template-columns: 1fr !important; padding: 14px !important; }

  /* My Leagues cards */
  .ml-card { flex-direction: column !important; align-items: flex-start !important; padding: 16px !important; }
  .ml-right { width: 100%; justify-content: space-between; margin-top: 8px; }
  .ml-go { width: 100%; text-align: center; padding: 12px !important; min-height: 48px; display: flex; align-items: center; justify-content: center; }

  /* Roster panel slide-in */
  .roster-panel { width: 100% !important; }

  /* ── LEI PAGES ──────────────────────────────────────────── */

  .lei-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; }
  .lei-nav a { white-space: nowrap; flex-shrink: 0; }

  /* ── THE STRIP AT PHONE WIDTH: READABLE, AND IT SAYS THAT IT SCROLLS ───────
     MEASURED 2026-09-04 at 390: six items need 468px in a 382px row. 86px sits
     off the right edge and NOTHING SAID SO — Standings was cut mid-word with no
     signal that swiping reveals it. With a seventh item it is past 550px.

     THE SCROLLBAR IS HIDDEN, so it cannot be the signal. iOS paints no resting
     scrollbar at all, which is why "it looks finished" is the default reading. */
  .lei-nav::-webkit-scrollbar { display: none; }
  .lei-nav { scrollbar-width: none; }

  /* ⛔ THE FADE IS TOGGLED BY lei-strip.js, NEVER PAINTED UNCONDITIONALLY.
     has-more / has-less are set from the row's own scrollLeft against its
     scrollWidth, so the fade appears only while there IS something past the
     edge and clears at the end of the travel. A gradient that is always there
     tells a reader there is more at the exact moment there is none. */
  .lei-nav.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
  .lei-nav.has-less {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
  }
  .lei-nav.has-more.has-less {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  }

  /* ⛔ 14px, NOT THE DECLARED 11px, AND !important IS LOAD-BEARING HERE.
     Owner's ruling 2026-09-04: the labels match the site's secondary text so
     they are READABLE, NOT SHRUNK. Measured: .mrb-secondary is Barlow Condensed
     14px — so matching it is a SIZE change and NOT a family change.

     THE FAMILY STAYS CONDENSED. Making the strip Inter would leave it the only
     navigation on the site outside that face, and a gated page's typography is
     the site's, not the page's.

     !important because all six strip pages declare `.lei-nav a{…font-size:11px}`
     in a page-local <style>, which is the SAME SPECIFICITY as this rule — so
     the winner would be decided by stylesheet ORDER, per page, silently. That
     is the shape this project has already paid for with --ink rendering navy.
     Measured after this landed: 14px at 390 on the rendered box, not asserted
     from the source. */
  .lei-nav a { font-size: 14px !important; letter-spacing: 0.08em; padding: 8px 13px; }

  .grid { grid-template-columns: 1fr !important; }
  .card { margin-bottom: 12px; }

  /* LEI lobby cards */
  .card.highlighted { margin: 0 -10px; border-radius: 0; }

  /* Waiting room */
  .countdown .cd-num { font-size: 28px; }
  .countdown { gap: 8px; }

  /* ── RESEARCH & ANALYTICS ───────────────────────────────── */

  .card-grid { grid-template-columns: 1fr !important; }

  /* Zone intel field visualizations */
  .field-wrap, .field-container, #field-svg, .zone-field {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 300px;
  }
  .controls-panel, .analysis-panel {
    width: 100% !important; max-width: 100% !important;
  }
  .zone-controls, .field-controls {
    display: flex; flex-direction: column; width: 100%;
  }

  /* Stats tables */
  .stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Player profile */
  .player-hero { flex-direction: column !important; text-align: center; }
  .player-stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── HOMEPAGE ───────────────────────────────────────────── */

  .hero-section h1, .page-title { font-size: 28px !important; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons a, .hero-buttons button { width: 100%; min-height: 56px; }
  .stat-strip { grid-template-columns: 1fr 1fr !important; }

  /* ── MYTEAM ─────────────────────────────────────────────── */

  .league-card {
    flex-direction: column !important; gap: 12px !important;
    padding: 16px !important;
  }
  .league-card-arrow { display: none; }
  .league-card-meta { flex-direction: row; gap: 12px; }
  .invite-card { padding: 16px !important; }

  /* LEI badges */
  .lei-badges { margin-bottom: 2px; }

  /* ── COMMISSIONER ───────────────────────────────────────── */

  .admin-grid { grid-template-columns: 1fr !important; }
  .admin-card { padding: 16px !important; }
  .status-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .inline-form .form-row { gap: 8px; }

  /* ── JOIN PAGE ──────────────────────────────────────────── */

  .page { max-width: 100% !important; }

  /* ── STANDINGS ──────────────────────────────────────────── */

  .podium { grid-template-columns: 1fr !important; }
  .standings-head, .standings-row, .division-line {
    grid-template-columns: 36px 1fr 70px 60px 60px !important;
  }
  .standings-head span:nth-child(n+6),
  .standings-row > *:nth-child(n+6),
  .division-line > *:nth-child(n+6) { display: none; }
  .stat-highlights { grid-template-columns: 1fr 1fr !important; }
  .legend { flex-wrap: wrap; gap: 12px; }

  /* ── SCHEDULE ───────────────────────────────────────────── */

  .schedule-grid { grid-template-columns: 1fr !important; }
  .game-card { padding: 12px !important; }

  /* ── CHOOSE THEME ───────────────────────────────────────── */

  .cust-layout { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── GLOBAL UTILITIES ───────────────────────────────────── */

  /* Only override the side and bottom padding on mobile; do NOT force a top
     padding. The old `padding: 100px ...` forced 100px of top clearance on every
     .page-wrap page, but 8 of the 9 (all except stats.html) already set
     body{padding-top:88px} for the fixed nav, so they were getting the nav gap
     TWICE (88px + 100px = a ~188px dead band before the first section). Letting
     each page keep its own top padding makes mobile match desktop: the
     body-padded pages clear the nav via the body and add only their small own
     top, and stats.html (no body padding) still clears the nav via its own 120px
     .page-wrap top. Same double-gap pattern the #page rule fixes above. */
  .page-wrap { padding-left: 16px !important; padding-right: 16px !important; padding-bottom: 40px !important; }
  .page-title { font-size: 28px !important; }
  .features { grid-template-columns: 1fr 1fr !important; }

  /* Prevent any horizontal overflow */
  *, *::before, *::after { max-width: 100vw; }
  img, svg, video, iframe { max-width: 100%; height: auto; }

  /* M-5: notched-phone safe areas. nav.js loads mobile.css after its own nav
     styles, so these win. The fixed nav keeps clear of a landscape notch, and
     the full-screen mobile menu keeps its last link above the home indicator. */
  nav { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .mobile-menu-overlay { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}