/* Mobile shell — shared across all public pages (index, analytics, schedule, win_totals).
   Loaded LAST in <head> so it wins ties. Every rule is inside a max-width media query:
   desktop (>=769px) is untouched by design.
   Primary target: iPhone 14 Pro Max (430x932 CSS px, Dynamic Island, 34px home indicator).
   No-break floor: 375px. */

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  /* Page never pans sideways (clip, not hidden: hidden would break sticky children) */
  html, body { overflow-x: clip; max-width: 100%; }
  body { padding-top: calc(54px + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }

  /* ── Compact header (was 157–261px) ── */
  .header {
    padding: .6rem max(.75rem, env(safe-area-inset-right)) .7rem max(.75rem, env(safe-area-inset-left)) !important;
    text-align: center;
  }
  .header h1 {
    font-size: 1.05rem !important; line-height: 1.25 !important; margin: 0 !important; text-wrap: balance;
  }
  .header .subtitle { display: none !important; }
  .header .week-badge { margin-top: .4rem !important; padding: .2rem .7rem !important; font-size: .72rem !important; }

  /* ── Tab bar pinned to the TOP of the screen. (v69/v70 had it at the bottom, where
        Safari's bottom address bar and Edge's toolbar sit on top of it — Jeff's
        screenshot, 2026-10-04.) Every page's nav lists the same 4 links in the same
        order, so labels/icons are assigned by position; the original text is hidden. ── */
  .header nav {
    position: fixed !important; left: 0; right: 0; top: 0 !important; bottom: auto !important; z-index: 9000;
    display: flex !important; flex-wrap: nowrap !important; justify-content: space-around !important;
    gap: 2px !important; margin: 0 !important;
    padding: calc(4px + env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)) !important;
    background: rgba(15, 17, 23, .96); border-bottom: 1px solid #2e3348;
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  }
  .header nav > span { display: none !important; }
  .header nav a {
    flex: 1 1 0; min-width: 0; min-height: 46px;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 3px 2px !important; margin: 0 !important; border-radius: 10px !important; border: 0 !important;
    font-size: 0 !important; color: #ffffff !important; background: none !important;
    text-decoration: none !important; -webkit-tap-highlight-color: transparent;
  }
  .header nav a::before { font-size: 18px; line-height: 1; }
  .header nav a::after  { font-size: 11.5px; font-weight: 700; line-height: 1.1; }
  .header nav a:nth-of-type(1)::before { content: "🏆"; }
  .header nav a:nth-of-type(1)::after  { content: "Rankings"; }
  .header nav a:nth-of-type(2)::before { content: "📊"; }
  .header nav a:nth-of-type(2)::after  { content: "Analytics"; }
  .header nav a:nth-of-type(3)::before { content: "📅"; }
  .header nav a:nth-of-type(3)::after  { content: "Schedule"; }
  .header nav a:nth-of-type(4)::before { content: "🎯"; }
  .header nav a:nth-of-type(4)::after  { content: "Win Totals"; }
  .header nav a:nth-of-type(5)::before { content: "📈"; }
  .header nav a:nth-of-type(5)::after  { content: "Results"; }
  .header nav a:hover { background: none !important; }
  .header nav a.active, .header nav a[aria-current="page"] {
    color: #6aa2ff !important; background: rgba(79, 140, 255, .18) !important;
  }

  /* ── iOS zooms any focused input under 16px and stays zoomed ── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Horizontal scroll strips: fade the right edge so "more →" is obvious ── */
  .controls:has(.filter-btn), .tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  /* ── Secondary columns: one definition for every page (win_totals used the class
        but never defined it, so its table rendered 858px wide on a phone) ── */
  .hide-mobile { display: none !important; }

  /* Header must never widen the page (analytics h1 carries a source badge) */
  .header { flex-wrap: wrap; }
  .header h1 { max-width: 100%; min-width: 0; }

  /* ── Rankings: search on its own row, conference chips in ONE swipeable row ── */
  .controls:has(.conf-strip) { flex-wrap: wrap !important; overflow: visible !important; -webkit-mask-image: none; mask-image: none; }
  .controls:has(.conf-strip) .search-box { flex: 1 1 100% !important; min-width: 0 !important; }
  /* schedule: search + week picker share row 1, chips/sort/refresh swipe on row 2 */
  .controls:has(#weekSelect) .search-box { flex: 1 1 0 !important; }
  .controls #weekSelect { flex: 0 0 auto !important; min-height: 44px; padding: .45rem 1.6rem .45rem .7rem !important; }
  .conf-strip .refresh-btn { flex-shrink: 0; min-height: 40px; }
  .conf-strip {
    display: flex !important; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .conf-strip::-webkit-scrollbar { display: none; }
  .conf-strip .filter-btn { flex-shrink: 0; min-height: 40px; padding: .45rem .8rem !important; }

  /* ── Rankings table (phone): # | Team (AP · C · movement) | Rec | Composite | Pts.
        Record has its own column where Δ sat (Jeff, 2026-10-04); movement shows in the
        team sub-line only when a team actually moved. Order is ALWAYS composite rank.
        Fixed layout + explicit widths so Safari's wider text metrics can never push the
        table past the screen (v70 fit exactly in Chrome but overflowed on Jeff's iPhone). ── */
  .rankings-wrap { overflow-x: visible !important; padding: 0 .5rem !important; margin-top: .75rem !important; }
  .rankings-table { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
  .rankings-table .mv-col { display: none !important; }
  .rankings-table th.rank-col { width: 30px; }
  .rankings-table th.rec-col  { width: 46px; }
  .rankings-table th.comp-col { width: 70px; }
  .rankings-table th.pts-col  { width: 44px; }
  .rankings-table thead th { padding: .55rem .3rem !important; font-size: .64rem !important; letter-spacing: .02em !important; color: #ffffff !important; }
  .rankings-table thead th.comp-col, .rankings-table thead th.pts-col, .rankings-table thead th.rec-col { text-align: right; }
  .rankings-table tbody td { padding: .6rem .3rem !important; color: #ffffff; }
  .rankings-table .rank-cell { font-size: .95rem; text-align: center; }
  .rankings-table .rank-other { color: #ffffff !important; }
  .rankings-table .team-cell { gap: .5rem; min-width: 0; }
  .rankings-table .team-info { min-width: 0; }
  .rankings-table .team-logo { width: 30px !important; height: 30px !important; }
  .rankings-table .team-name { font-size: .95rem; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
  .rankings-table .team-mascot { display: none; }
  .rankings-table .team-sub { display: block; font-size: .76rem; font-weight: 600; color: #ffffff; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .rankings-table .team-sub:empty { display: none; }
  .rankings-table td.record { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rankings-table td.composite { font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; }
  .rankings-table td.pts-col { text-align: right; }
  .rankings-table .movement { width: auto; }

  /* ── Analytics: stat picker + FBS toggle replace the 15-tab strip; tables scroll inside
        their own section with # and Team pinned ── */
  .mobile-bar { display: flex !important; gap: .5rem; margin: 0 0 .75rem; }
  .mobile-bar .tab-select {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .55rem 2.2rem .55rem .8rem;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right .8rem center;
    -webkit-appearance: none; appearance: none; border: 1px solid var(--border); border-radius: 10px;
    color: var(--text); font-weight: 600;
  }
  .mobile-bar .fbs-toggle {
    flex: 0 0 auto; min-height: 44px; padding: 0 .8rem; border-radius: 10px; font-size: .78rem; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border); color: #e2e5f0;
  }
  .mobile-bar .fbs-toggle.on { color: var(--accent); border-color: var(--accent-strong); }
  #tabs.tabs { display: none !important; }
  .container:has(#tabSelect) { overflow-x: visible !important; }
  .summary-row {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(132px, 42%);
    grid-template-columns: none !important; overflow-x: auto; gap: .5rem !important; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .summary-row::-webkit-scrollbar { display: none; }
  .metric-section.active { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .metric-section table { min-width: 100% !important; width: max-content; }
  .metric-section th:nth-child(1), .metric-section td:nth-child(1) {
    position: sticky; left: 0; z-index: 2; background: var(--bg); min-width: 34px; width: 34px;
  }
  .metric-section th:nth-child(2), .metric-section td:nth-child(2) {
    position: sticky; left: 34px; z-index: 2; background: var(--bg); box-shadow: 1px 0 0 var(--border);
    max-width: 150px; white-space: normal; text-align: left;
  }
  .metric-section thead th:nth-child(1), .metric-section thead th:nth-child(2) { z-index: 3; background: var(--surface); }

  /* ── Schedule cards: keep Jeff's 3-column card (home | score | away), raise the
        text floor (was 9–10px), short conference names, wider score column ── */
  .matchup-main { grid-template-columns: 1fr 88px 1fr !important; }
  .vs-section { width: 88px !important; min-width: 88px !important; max-width: 88px !important; }
  .matchup-card .team-name { font-size: .9rem !important; }
  .matchup-card .team-meta { font-size: .74rem !important; }
  .matchup-card .conf-full { display: none; }
  .matchup-card .conf-short { display: inline; }
  .matchup-card .sp-row { font-size: .72rem !important; }
  .matchup-card .vs-label { font-size: .66rem !important; }
  .matchup-card .vs-score { font-size: 1.3rem !important; }
  .matchup-card .line-overlay { font-size: .74rem !important; }
  .matchup-card .diff-badge { font-size: .7rem !important; padding: .15rem .35rem !important; }
  .matchup-meta-bar .game-date { font-size: .8rem !important; }
  .matchup-meta-bar .ou-pick, .matchup-meta-bar .line-vs-model { font-size: .74rem !important; }
  .line-mv-chip { font-size: .72rem !important; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
  .mv-tag .mk { font-size: .64rem !important; }
  .mv-when { font-size: .66rem !important; opacity: 1 !important; }
  .mv-count { min-height: 32px; font-size: .74rem; }
  .injury-pill { font-size: .78rem !important; }
  .injury-badge { font-size: .7rem !important; }
  .summary-card .label { font-size: .64rem !important; }

  /* ── Win Totals: with secondary columns hidden the table fits — drop the 640px floor ── */
  #wtTable { min-width: 0 !important; }
  #wtTable .team-cell { min-width: 0 !important; }
  #wtTable .rank-cell { white-space: nowrap; width: auto; }

  /* Bottom sheets clear the home indicator */
  .injury-modal-card { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)) !important; max-height: 80dvh !important; }
}

/* Landscape phones: keep content clear of the Dynamic Island side */
/* Small phones (SE / mini): drop Pts; record + composite stay */
@media (max-width: 399px) {
  .rankings-table .pts-col { display: none !important; }
}

@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* No grey text anywhere (Jeff, 2026-10-04) - applies to desktop too: input placeholders. */
::placeholder { color: #c9d1d9 !important; opacity: 1 !important; }