/* NFL-only styles, layered over main.css. Kept separate so the shared
   stylesheet the WNBA site also ships is never edited for NFL's sake.

   The table now reuses main.css's .table-wrap / .table-scroll / .slate-table
   and .page-header / .filter-bar, so the two sites share their chrome rather
   than approximating each other. What is left here is what NFL genuinely has
   and WNBA does not: market tabs, a position column, American odds, and a
   twelve-column table that has to survive a phone. */

/* ── Market tabs ─────────────────────────────────────────── */
.nfl-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 0}
.nfl-tab{font-family:var(--font-cond);font-size:12px;font-weight:600;
  padding:6px 11px;border:1px solid var(--border2);border-radius:5px;
  background:var(--surface);color:var(--muted);text-decoration:none;
  transition:all var(--t)}
.nfl-tab:hover{color:var(--text);border-color:var(--text)}
.nfl-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.nfl-tab .n{opacity:.6;margin-left:5px;font-weight:400}
/* A struck-through tab is the first of the two places a suppressed market
   announces itself; the empty Edge column is the second. The long explanation
   moved to the foot of the page, so these two have to carry it alone. */
.nfl-tab.sup{text-decoration:line-through;opacity:.7}
.nfl-tab.sup.active{opacity:1}

/* ── Game chips ──────────────────────────────────────────── */
/* main.css already styles .slate-context-bar / .slate-matchup-chip for the
   WNBA board, where the chips are spans driven by JS. Ours are links, so the
   only thing missing is the anchor reset — everything else, including the
   .active fill, comes from the shared sheet. */
.slate-matchup-chip{text-decoration:none}
.at-sep{opacity:.45;font-weight:400;margin:0 1px}

/* ── Banners (base.html only: stale board, missing file) ──── */
.nfl-banner{padding:10px 14px;border-radius:6px;margin:10px 16px;
  font-family:var(--font-cond);font-size:13px;line-height:1.45;
  border:1px solid var(--border2);background:var(--surface2);color:var(--text)}
.nfl-banner-red{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.nfl-banner code{font-family:var(--font-mono);font-weight:700}

.nfl-empty{padding:24px 16px;font-family:var(--font-cond);font-size:13px;
  color:var(--muted)}

/* ── Table ───────────────────────────────────────────────── */
.nfl-slate td{padding:6px 8px;border-bottom:1px solid var(--border);
  font-size:13px}
.nfl-slate .num{text-align:right;font-variant-numeric:tabular-nums}
.nfl-slate th.num{text-align:right}
.nfl-slate .player-name{font-weight:600;color:var(--text)}
/* Hidden wherever the Matchup column is visible, so the two never both show. */
.name-matchup{display:none}
.nfl-slate tbody tr:hover{background:var(--surface2)}

.pos-tag{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--border2);border-radius:3px;padding:1px 4px}
.col-pos{width:44px}
.col-depth{width:38px}
.col-side{width:52px}

.edge-pos{color:var(--nasty);font-weight:700}
.edge-neg{color:var(--muted)}
.side-over{font-size:10px;font-weight:700;color:var(--accent)}
.side-under{font-size:10px;font-weight:700;color:var(--amber)}

.flag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.05em;
  padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle}
.flag-conflict{background:var(--red-bg);color:var(--red)}

/* main.css flexes the slate page so the table fills the viewport and scrolls
   inside its own box. That is right for WNBA, where nothing follows the table.
   Here it pinned the notes permanently under a squeezed 20-row table, which is
   the opposite of "at the foot of the page" — so the NFL slate scrolls as one
   document and the notes sit after the last row. Same specificity as the rule
   in main.css, and this file loads second. */
.main:has(#slateTable){display:block}
.main:has(#slateTable) .table-wrap{flex:none;max-height:none;
  overflow-x:auto;overflow-y:visible}

/* ── Foot notes ──────────────────────────────────────────── */
/* Plain running text, no border, no fill. These are standing caveats rather
   than alerts, and a box at the top of the page trained the eye to skip them. */
.nfl-notes{padding:18px 16px 40px;max-width:78ch;
  font-family:var(--font-cond);font-size:12px;line-height:1.55;
  color:var(--muted)}
.nfl-notes p{margin:0 0 10px}
.nfl-notes b{color:var(--text);font-weight:700}

/* ── Nasty board ─────────────────────────────────────────── */
.nfl-report{font-family:var(--font-mono);font-size:12px;line-height:1.5;
  white-space:pre-wrap;background:var(--surface);border:1px solid var(--border2);
  border-radius:6px;padding:16px;margin:0 16px;overflow-x:auto;color:var(--text)}

/* ── Mobile ──────────────────────────────────────────────── */
/* Twelve columns do not fit a phone, and the old page did not try — it ran off
   the side and took the page with it: the table forced .main wider than the
   viewport, so the market tabs were clipped too.

   The fix is table-layout:fixed. The first attempt only set min-width on the
   name column, which does nothing to stop an auto-layout table growing to fit
   "Montorie Foster Jr" on one line — Edge, the column the whole page exists
   for, ended up past the right edge. Fixed layout means the widths below are
   the widths, and long names wrap instead of pushing.

   Budget for a 402px viewport (iPhone Pro portrait), border-box so padding is
   included: pos 28 + line 32 + proj 32 + over 38 + under 38 + edge 48 = 216,
   leaving 186 for the name. Dropped: Matchup (the team filter covers it), Dep,
   Model, Mkt (both derivable from Line/Proj and the two prices), Side (the
   edge is already coloured, and Over/Under show which price is live). Nothing
   is deleted — landscape brings every column back. */
@media (max-width: 640px){
  .nfl-tabs{padding:6px 10px 0;gap:4px}
  .nfl-tab{font-size:11px;padding:4px 8px}

  .nfl-slate{table-layout:fixed;width:100%}
  .nfl-slate th,
  .nfl-slate td{padding:4px 3px;box-sizing:border-box;overflow:hidden}
  .nfl-slate th{font-size:9px;letter-spacing:.02em}
  .nfl-slate td{font-size:12px}
  .sort-trigger{font-size:8px;padding:0 1px}

  .col-matchup,
  .col-depth,
  .col-p,
  .col-side,
  /* Set by app.py when a column is blank for every leg on this market —
     Under on ANYTIME_TD, which is one-way. Mobile only: on a desktop an empty
     column still says "nothing is priced on that side". */
  .col-empty{display:none}

  /* No width: fixed layout hands the name column whatever the others leave,
     and it wraps rather than widening the table. */
  .col-player{min-width:0}
  .nfl-slate .player-name{white-space:normal;overflow-wrap:anywhere;
    line-height:1.25;font-size:11.5px}
  .col-pos{width:28px}
  .col-line,
  .col-proj{width:32px}
  .col-odds{width:38px}
  .col-edge{width:48px}

  /* The Matchup column is hidden at this width, so the matchup moves under
     the name. The chip bar above filters by game; this says which game a row
     belongs to when no chip is selected — without it the mobile board was a
     list of names with no team anywhere on screen. */
  .name-matchup{display:block;font-family:var(--font-cond);font-size:9.5px;
    font-weight:700;letter-spacing:.06em;color:var(--muted);
    text-transform:uppercase;margin-top:1px;line-height:1.2}

  /* Sixteen chips wrap to six rows on a phone and push the table off the
     screen — the WNBA bar wraps because a WNBA slate is five or six games.
     Same chips, same styling, one swipeable row instead. */
  .slate-context-bar{padding:3px 10px;gap:5px;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .slate-context-bar::-webkit-scrollbar{display:none}
  .slate-matchup-chip{padding:1px 6px;flex:0 0 auto}
  .matchup-teams{font-size:10px;letter-spacing:.05em}

  .pos-tag{padding:0 2px;font-size:9px;border:0}
  /* CHART is 44px of a 186px name column. The colour still carries it. */
  .flag-conflict{font-size:0;padding:1px 3px;margin-left:3px}
  .flag-conflict::after{content:'!';font-size:9px}

  .nfl-notes{padding:14px 10px 32px;font-size:11px}
  .nfl-report{margin:0 10px;font-size:11px;padding:10px}
}