/* Fantasy: synced league. Cards, tables, chips, the hero and the section nav come from teams.css and usage.css. */
body[data-active-view=fantasy] .page-heading { display:none; }
.fantasy-page, .fantasy-body { display:grid; gap:1rem; }

/* Connect: platform, username or league ID, then the user's leagues. */
.fantasy-connect { display:grid; gap:0.875rem; max-width:40rem; }
.fantasy-connect h3 { margin:0; }
.fantasy-connect-form { display:grid; gap:0.75rem; }
.fantasy-connect-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.625rem; }
.fantasy-connect-row .usage-field { flex:1 1 16rem; }
.fantasy-connect-form input { min-height:2.25rem; padding:0 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font-size:0.875rem; }
.fantasy-found { display:grid; gap:0.375rem; margin:0; padding:0; list-style:none; }
.fantasy-found button { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; width:100%; text-align:left; }
.fantasy-found small { color:var(--muted); font-weight:600; }
.fantasy-private { display:grid; gap:0.625rem; }
.fantasy-private summary { color:var(--accent); font-size:0.8125rem; font-weight:700; cursor:pointer; }
.fantasy-private[open] { padding:0.75rem; border:1px solid var(--line); border-radius:var(--r-control); }
.fantasy-private .team-footnote { margin:0; }
/* The grid's gap reaches only the summary: a details' content sits in one box under it, so the
   instructions, the two fields and the note get their spacing from margins (UI-590). */
.fantasy-private[open] > :not(summary) + :not(summary) { margin-top:0.625rem; }
.fantasy-cancel { justify-self:start; }

/* Top row: saved leagues on the left, the week and league actions in the top-right corner. */
.fantasy-topbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem 1rem; }
.fantasy-topbar .fantasy-switcher { flex:1 1 auto; min-width:0; }
.fantasy-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0.5rem; margin-left:auto; }
.fantasy-controls select { min-height:2.25rem; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); }
/* Saved leagues: one button each, the active one pressed, then Add league. */
.fantasy-switcher { display:flex; flex-wrap:wrap; gap:0.5rem; }
.fantasy-switch { display:grid; flex:0 0 auto; gap:0.0625rem; max-width:16rem; padding:0.5rem 0.875rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-switch b, .fantasy-switch small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-switch b { font-size:0.8125rem; }
.fantasy-switch small { color:var(--muted); font-size:0.6875rem; font-weight:600; }
/* UI-334: a long team name is cut short; the record and place after it never are. */
.fantasy-page .fantasy-switch small.fantasy-switch-sub { display:flex; min-width:0; }
.fantasy-switch-sub > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fantasy-switch-standing { flex:none; white-space:pre; }
.fantasy-switch:hover { border-color:var(--accent); }
.fantasy-switch[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.fantasy-add { align-content:center; color:var(--accent); font-size:0.8125rem; font-weight:750; }
/* "N more leagues": the leagues past the first three. */
.fantasy-more { position:relative; flex:0 0 auto; }
.fantasy-more > summary { display:flex; align-items:center; gap:0.375rem; height:100%; box-sizing:border-box; list-style:none; color:var(--muted); font-size:0.8125rem; font-weight:750; white-space:nowrap; }
.fantasy-more > summary::-webkit-details-marker { display:none; }
.fantasy-more[open] > summary { border-color:var(--accent); color:var(--ink); }
.fantasy-more-menu { position:absolute; top:calc(100% + 0.25rem); left:0; z-index:30; display:grid; gap:0.25rem; min-width:14rem; padding:0.375rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); box-shadow:0 1rem 2.5rem #0008; }
.fantasy-more-item { display:grid; gap:0.0625rem; padding:0.5rem 0.625rem; border:0; border-radius:var(--r-control); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-more-item b { font-size:0.8125rem; }
.fantasy-more-item small { color:var(--muted); font-size:0.6875rem; font-weight:600; }
.fantasy-more-item:hover, .fantasy-more-item:focus-visible { background:var(--accent-soft); }
.fantasy-error { margin:0; color:var(--negative); font-size:0.8125rem; font-weight:650; }

/* Matchup (ESPN-style): a scoreboard strip of the week's matchups, the game summary, then one side-by-side table.
   Scores are points scored; each projection sits under its score in small type. */
.fantasy-proj { display:block; color:var(--muted); font-size:0.6875rem; font-weight:600; letter-spacing:0; text-transform:none; white-space:nowrap; }
/* The strip: cards share the row (scrolling sideways only when a big league overflows it). */
.fantasy-strip { display:flex; gap:0.625rem; overflow-x:auto; padding-bottom:0.25rem; }
.fantasy-strip-card { display:grid; flex:1 0 15rem; gap:0.375rem; padding:0.625rem 0.875rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--ink); font:inherit; text-align:left; }
button.fantasy-strip-card { cursor:pointer; }
button.fantasy-strip-card:hover, button.fantasy-strip-card:focus-visible { border-color:var(--accent); }
.fantasy-strip-card[aria-pressed=true], .fantasy-strip-card[aria-current=true] { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.fantasy-strip-team { display:grid; grid-template-columns:2.75rem minmax(0, 1fr) auto; align-items:center; gap:0.5rem; }
.fantasy-strip-code { font-size:0.8125rem; font-weight:800; letter-spacing:0.02em; }
.fantasy-strip-team.is-mine .fantasy-strip-code { color:var(--positive); }
.fantasy-strip-name { display:grid; min-width:0; }
.fantasy-strip-name span { overflow:hidden; font-size:0.875rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-strip-name small { color:var(--muted); font-size:0.6875rem; }
.fantasy-strip-score { display:grid; justify-items:end; }
.fantasy-strip-score b { font-size:1.125rem; font-variant-numeric:tabular-nums; }
.fantasy-strip-team.is-ahead .fantasy-strip-score b { color:var(--positive); }
.fantasy-strip-note { color:var(--muted); font-size:0.625rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; }
/* The game summary. */
.fantasy-scorebox { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:1rem; padding:1rem 1.25rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.fantasy-game-team { display:flex; align-items:center; gap:0.625rem; min-width:0; }
.fantasy-game-team.is-right { flex-direction:row-reverse; text-align:right; }
.fantasy-game-team h3 { margin:0; overflow:hidden; font-size:1.125rem; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-game-team small { color:var(--muted); font-size:0.75rem; }
.fantasy-game-team > div { min-width:0; }
/* A team's name as a link to its page (UI-646): the name's own colour, underlined on hover. */
.fantasy-name-link { color:inherit; text-decoration:none; }
.fantasy-name-link:not(.fantasy-game-badge, .fantasy-side-team, .fantasy-team-link, .fantasy-owner-chip, .fantasy-tv-open):is(:hover, :focus-visible) { text-decoration:underline; text-underline-offset:0.15em; }
.fantasy-game-score { display:grid; justify-items:center; gap:0.25rem; text-align:center; }
.fantasy-game-num { display:grid; justify-items:center; min-width:6rem; }
.fantasy-game-num b { font-size:2.5rem; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; line-height:1.1; }
.fantasy-game-num .fantasy-proj { font-size:0.8125rem; }
.fantasy-game-num.is-ahead b { color:var(--positive); }
.fantasy-game-score p { margin:0; font-size:0.8125rem; font-weight:700; }
.fantasy-game-basis { color:var(--muted); font-size:0.625rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
/* The side-by-side table: score cells hug the slot column in the middle. */
.fantasy-versus .fantasy-slot { width:2.75rem; text-align:center; }
/* UI-695: the right-hand team is laid out like the left (photo, then left-aligned name, chip line
   and saved report line), starting beside its Pts column; its header name and Starters cell are
   left-aligned too, on phones as well. `is-right` only marks the side now (UI-647 mirrored it). */
.fantasy-versus td.fantasy-score { width:4.5rem; text-align:center; vertical-align:middle; }
.fantasy-versus td.fantasy-score b { display:block; font-size:0.9375rem; font-variant-numeric:tabular-nums; }
.fantasy-versus td.fantasy-score.is-ahead b { color:var(--positive); }
.fantasy-versus th, .fantasy-versus td { vertical-align:middle; }
.fantasy-versus-total td, .fantasy-versus-total th { border-top:2px solid var(--line); font-weight:800; }
.fantasy-versus-total td.fantasy-score b { font-size:1.0625rem; }
/* The Opponents tab's menu (like the Teams tab's), under its tab. */
.fantasy-nav-wrap { position:relative; min-width:0; }
.fantasy-opponents-menu { top:calc(100% + 0.25rem); right:auto; left:0; z-index:40; grid-template-columns:minmax(18rem, 1fr); max-height:none; padding:0.5rem; overflow-y:auto; overscroll-behavior:contain; }
.fantasy-opponents-menu ul { display:grid; gap:0.125rem; margin:0; padding:0; list-style:none; }
.fantasy-opponents-menu a { display:flex; align-items:center; gap:0.625rem; padding:0.5rem; border-radius:var(--r-card); color:var(--ink); text-decoration:none; }
.fantasy-opponents-menu a:hover, .fantasy-opponents-menu a:focus-visible { background:var(--accent-soft); }
.fantasy-opponents-menu a[aria-current=true] b { color:var(--accent); }
.fantasy-opponents-menu .fantasy-code { justify-content:center; min-width:2.75rem; }
.fantasy-opponent-name { display:grid; min-width:0; }
.fantasy-opponent-name b { font-size:0.875rem; }
.fantasy-opponent-name small { color:var(--muted); font-size:0.6875rem; }
.fantasy-advice { margin:0; padding:0.75rem 1rem; border:1px solid var(--accent); border-radius:var(--r-control); background:var(--accent-soft); font-size:0.8125rem; }
.fantasy-advice p { margin:0; }
.fantasy-advice ul { margin:0.375rem 0 0; padding-left:1.25rem; }
.fantasy-advice:not(.fantasy-call) ul + p { margin-top:0.375rem; }
.fantasy-lineup.is-mine { border-color:var(--accent); }
.fantasy-lineup-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:0.5rem 1rem; margin-bottom:0.5rem; }
.fantasy-lineup-head h3 { margin:0; }
.fantasy-lineup-head p { margin:0.125rem 0 0; font-size:0.75rem; }
.fantasy-totals { display:flex; gap:0.875rem; margin:0; }
.fantasy-totals div { display:grid; text-align:right; }
.fantasy-totals dt { color:var(--muted); font-size:0.625rem; font-weight:750; letter-spacing:0.08em; text-transform:uppercase; }
.fantasy-totals dd { margin:0; font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }
/* Points against the projection: tiered green over it, tiered red under it. */
.fantasy-table td.is-over-1 { background:#1f7a5433; }
.fantasy-table td.is-over-2 { background:#1f7a5466; }
.fantasy-table td.is-over-3 { background:#1f7a54a6; color:#eafff6; }
.fantasy-table td.is-under-1 { background:#a3344f33; }
.fantasy-table td.is-under-2 { background:#a3344f66; }
.fantasy-table td.is-under-3 { background:#a3344fa6; color:#ffe9ee; }
.fantasy-table td:is(.is-over-3, .is-under-3) .fantasy-proj { color:inherit; opacity:0.8; }
.fantasy-table .fantasy-slot { width:2.75rem; color:var(--muted); font-size:0.6875rem; font-weight:750; }
/* The slot as a position chip (UI-387): coloured by the player in it; FLEX, BN and IR grey when no one is. */
.fantasy-slot-chip { min-width:1.75rem; --chip-min:1.25rem; padding:0.0625rem 0.25rem; }
/* A slot chip with a definition (FLEX, BN, IR...; UI-350): a tap or hover shows it; a
   long-press doesn't select the label. */
.fantasy-slot-chip[data-term], .fw-slot[data-term] { cursor:help; -webkit-user-select:none; user-select:none; }
.fantasy-table .fantasy-num { width:3.75rem; }
.fantasy-table tr.is-locked .fantasy-live { font-weight:800; }
.fantasy-table tr.is-empty td { font-style:italic; }
.fantasy-bench th[scope=rowgroup] { padding-top:0.875rem; color:var(--muted); font-size:0.625rem; font-weight:750; letter-spacing:0.08em; text-align:left; text-transform:uppercase; }
.fantasy-player { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.fantasy-player .player-avatar { position:relative; display:grid; place-items:center; flex:0 0 2rem; width:2rem; height:2.25rem; overflow:hidden; border-radius:var(--r-control); background:var(--surface-raised); color:var(--muted); font-size:0.6875rem; font-weight:750; }
.fantasy-player .fantasy-def-logo .team-mini-badge { width:1.625rem; height:1.625rem; margin:0; }
/* The shared headshot rule is absolute; it must stay inside this box. */
.fantasy-player .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fantasy-player .usage-player-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.375rem; font-size:0.6875rem; }
.fantasy-game { color:var(--muted); white-space:nowrap; }

/* Waivers. */
.fantasy-toolbar { justify-content:space-between; }
.fantasy-upgrade { color:var(--positive); font-size:0.75rem; font-weight:700; }
.fantasy-waivers-head h3 { margin-bottom:0.25rem; }
.fantasy-waivers-head p { margin:0 0 0.75rem; font-size:0.75rem; }
.fantasy-waivers-table .fantasy-num { width:4.75rem; font-variant-numeric:tabular-nums; }
.fantasy-waivers-table .fantasy-fit-cell { width:13rem; }
.fantasy-waivers-table tr.is-out > td { opacity:0.55; }
.fantasy-fit { display:grid; gap:0.0625rem; font-size:0.75rem; }
.fantasy-fit b { font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.fantasy-fit small { color:var(--muted); font-size:0.6875rem; }
.fantasy-fit.is-plus b { color:var(--positive); }
.fantasy-fit.is-minus b { color:var(--muted); font-weight:600; }

@media (max-width:60em) {
  .fantasy-scorebox { grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:0.5rem; padding:0.75rem; }
  .fantasy-game-num { min-width:4rem; }
  .fantasy-game-num b { font-size:1.75rem; }
  .fantasy-game-team { flex-direction:column; align-items:flex-start; }
  .fantasy-game-team.is-right { flex-direction:column; align-items:flex-end; }
}
@media (max-width:36em) {
  /* Waivers on a phone: the week's numbers and the fit; rostered and its trend drop. */
  .fantasy-waivers-table .fantasy-wide { display:none; }
  .fantasy-waivers-table .fantasy-fit-cell { width:auto; }
  .fantasy-side b { font-size:1.5rem; }
  .fantasy-totals { gap:0.5rem; }
  .fantasy-table .fantasy-num { width:auto; }
  /* Phones: smaller photos, and the game line wraps, so every column fits. */
  .fantasy-lineup { padding:0.75rem 0.5rem; }
  .fantasy-table .fantasy-player { gap:0.375rem; }
  .fantasy-table .fantasy-player .player-avatar { flex-basis:1.5rem; width:1.5rem; height:1.75rem; font-size:0.5625rem; }
  .fantasy-table .fantasy-player .fantasy-def-logo .team-mini-badge { width:1.25rem; height:1.25rem; }
  .fantasy-table th, .fantasy-table td { padding:0.375rem 0.25rem; }
  .fantasy-table .fantasy-slot { width:2rem; }
  .fantasy-table td.is-text { white-space:normal; }
  .fantasy-game { white-space:normal; }
  /* The game summary: the two teams side by side, the score under them. */
  .fantasy-scorebox { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-areas:"a b" "score score"; row-gap:0.75rem; }
  .fantasy-scorebox > .fantasy-game-team { grid-area:a; }
  .fantasy-scorebox > .fantasy-game-team.is-right { grid-area:b; }
  .fantasy-scorebox > .fantasy-game-score { grid-area:score; }
  .fantasy-game-team h3 { font-size:1rem; white-space:normal; }
  /* The side-by-side table fits the screen: names and positions, no game times. */
  .fantasy-versus .fantasy-game, .fantasy-versus .usage-player-meta > .team-muted { display:none; }
  .fantasy-versus td.fantasy-score { width:3.25rem; }
  .fantasy-versus td.fantasy-score b { font-size:0.8125rem; }
  .fantasy-versus .fantasy-proj { font-size:0.625rem; }
  .fantasy-versus .team-player-name { white-space:normal; overflow-wrap:anywhere; }
}

/* Owner tags across the site (fantasy-owners.js): drawn after any player-profile link. */
.fantasy-owners { margin-right:0.25rem; color:var(--ink); font-size:0.8125rem; font-weight:650; white-space:nowrap; }
/* Owner tags (fantasy-owners.js): a small link right beside a player's name. */
.owner-tag { display:inline-flex; flex:0 0 auto; align-items:center; align-self:center; box-sizing:border-box; height:1.125rem; max-width:6rem; padding:0 0.375rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font-size:0.625rem; font-style:normal; font-weight:750; letter-spacing:0.03em; line-height:1; text-decoration:none; text-overflow:ellipsis; text-transform:uppercase; vertical-align:middle; white-space:nowrap; cursor:pointer; }
.owner-tag:hover, .owner-tag:focus-visible { border-color:var(--accent); color:var(--ink); }
.owner-tag.is-mine { border-color:#1f7a54; background:#1f7a54; color:#eafff6; }
.owner-tag.is-fa { border-color:var(--accent); background:transparent; color:var(--accent); }
/* Yours and FA carry their own colors, so they light up on hover too. */
.owner-tag { transition:background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms; }
.owner-tag.is-mine:hover, .owner-tag.is-mine:focus-visible { border-color:#3fbf8a; background:#289668; color:#fff; box-shadow:0 0 0 1px #3fbf8a; }
.owner-tag.is-fa:hover, .owner-tag.is-fa:focus-visible { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 1px var(--accent); }
/* The name and its tag as one unit, the same everywhere a tag attaches (Today, Slate, Props,
   Top leaks, the Player page, Fantasy): a 0.4em gap after the name, the tag centred on the
   name's text at any heading size, and the pair wrapping together, never the tag alone.
   The tag sits on the name's last baseline (lifted a touch to the middle of the capitals),
   so a name squeezed onto two lines keeps the tag beside its last line, not floating
   between them. In a wrapping row the pair moves to the next line as one; only a column
   too narrow for it wraps the name itself. [data-owner-name] outranks screen rules that
   restyle every span in a heading (Today's `.today-card-title > span`). */
.owner-name[data-owner-name] { display:inline-flex; flex-wrap:nowrap; align-items:last baseline; gap:0 0.4em; min-width:0; max-width:100%; justify-self:start; vertical-align:baseline; }
.owner-name[data-owner-name] > :not(.owner-tag) { min-width:0; }
.owner-name[data-owner-name] > .owner-tag { align-self:last baseline; position:relative; top:-0.2em; }
/* Beside a large heading the tag grows a little with it (never below its base size). */
.owner-name[data-owner-name] > .owner-tag, [data-owner-player] > .owner-tag { font-size:clamp(0.625rem, 0.5em, 0.75rem); height:1.8em; }
[data-owner-player] > .owner-tag { margin-left:0.4em; vertical-align:middle; }
/* Player identities in narrow table columns (Pos vs Def, Top Plays): the tag rides the
   meta line ("WR · LAC  FA") so the name keeps the full width and tags line up by row. */
.overview-player-identity > span:has(> .owner-name) { display:grid; grid-template-columns:minmax(0,max-content) max-content 1fr; column-gap:0.375rem; align-items:center; justify-items:start; }
.overview-player-identity > span > .owner-name { display:contents; }
.overview-player-identity > span > *, .overview-player-identity .owner-name > :not(.owner-tag) { grid-column:1 / -1; }
.overview-player-identity > span > small { grid-row:2; grid-column:1; }
.overview-player-identity .owner-name > .owner-tag { grid-row:2; grid-column:2; margin-top:0.1875rem; }
#overviewUpcoming .overview-player-identity .owner-name > .owner-tag { margin-top:0.375rem; }

/* Team pages (My team and any other), laid out as the NFL team pages (teams.css):
   header, stat tiles on top, record and schedule on the left, roster in the middle. */
.fantasy-team-hero { margin-bottom:1rem; }
.fantasy-team-hero.is-mine { border-color:var(--accent); }
.fantasy-hero-code { display:grid; place-items:center; width:5rem; height:5rem; border-radius:var(--r-card); background:var(--bg); color:var(--ink); font-size:1.25rem; font-weight:800; letter-spacing:0.03em; }
.fantasy-team-hero.is-mine .fantasy-hero-code { background:#1f7a54; color:#eafff6; }
.fantasy-team-hero h2:focus { outline:none; }
.fantasy-rank-dialog .fantasy-team-link span:last-child { white-space:normal; }
/* The second row of tiles (points by position) sits just under the first. */
.team-overview-tiles:has(.fantasy-position-tiles) { display:grid; gap:0.625rem; }
/* A rank chip (RB3) is a button: it opens every player at the position, ranked. */
button.fantasy-rank-chip { border:0; font:inherit; font-size:0.625rem; cursor:pointer; }
button.fantasy-rank-chip:hover, button.fantasy-rank-chip:focus-visible { outline:1px solid currentColor; outline-offset:1px; }
.fantasy-position-dialog { width:min(44rem, calc(100vw - 2rem)); }
.fantasy-position-dialog th.is-text { white-space:nowrap; }
/* A rank modal's header cells are their sort buttons. */
.fantasy-rank-dialog thead th { padding:0; }
.fantasy-rank-dialog thead .usage-sort { display:block; box-sizing:border-box; width:100%; padding:0.4375rem 0.5rem; text-align:inherit; cursor:pointer; }
.fantasy-rank-dialog thead .usage-sort:hover { background:var(--accent-soft); }
.fantasy-position-dialog .fantasy-code.is-fa { color:var(--accent); border-color:var(--accent); background:transparent; }
/* Team pictures: a circle over the team's initial. */
.fantasy-photo { position:relative; display:inline-grid; flex:0 0 auto; place-items:center; width:1.5rem; height:1.5rem; overflow:hidden; border-radius:var(--r-control); background:var(--surface-raised); color:var(--muted); font-size:0.6875rem; font-weight:800; }
.fantasy-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fantasy-photo.is-big { width:5rem; height:5rem; background:var(--bg); font-size:1.75rem; }
.fantasy-standings .fantasy-team-link:has(> .fantasy-photo) { grid-template-columns:1.5rem 3.25rem max-content; column-gap:0.375rem; }
.fantasy-opponents-menu .fantasy-photo { width:2rem; height:2rem; }
.fantasy-record { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:0 0.5rem; margin:0 0.5rem 0.875rem; padding-bottom:0.75rem; border-bottom:1px solid var(--line); }
.fantasy-record .team-eyebrow { grid-column:1 / -1; margin:0; }
.fantasy-record strong { font-size:1.75rem; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.fantasy-record span { font-size:0.8125rem; }
/* FAAB left, under the record: opens every team's, ranked. */
.fantasy-faab { box-sizing:border-box; width:calc(100% - 1rem); padding:0 0 0.75rem; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-faab .team-eyebrow { display:block; font-size:0.625rem; }
.fantasy-faab:hover strong, .fantasy-faab:focus-visible strong { color:var(--accent); }
.fantasy-sidecar .team-side-game { grid-template-columns:1.75rem minmax(0, 1fr); padding-block:0.375rem; }
/* A row's cover opens that week's matchup; the opponent's name, above it, opens their page. */
.fantasy-side-cover { position:absolute; inset:0; z-index:0; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.fantasy-side-cover:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.team-side-game.is-openable:hover { background:var(--accent-soft); }
.fantasy-side-team { position:relative; z-index:1; pointer-events:auto; padding:0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-side-team:hover > span:last-child, .fantasy-side-team:focus-visible > span:last-child { color:var(--accent); text-decoration:underline; }
.fantasy-sidecar .team-side-game.is-viewing { box-shadow:none; }
/* A schedule row is one line: the opponent at the left, the result or projection at the right. */
/* (Scoped: Start/Sit's sidebar rows use .fantasy-side-copy too.) */
.fantasy-sidecar .fantasy-side-copy { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; min-width:0; }
.fantasy-side-copy .team-side-when { justify-items:end; }
.fantasy-side-copy .team-result { white-space:nowrap; font-variant-numeric:tabular-nums; }
.fantasy-side-copy .team-side-when, .fantasy-side-copy .team-result { font-size:0.6875rem; }
/* A played week: the W and this team's score in green, the L and its score in red. */
.fantasy-side-copy .team-result { color:var(--muted); }
.fantasy-side-copy .team-result.is-w :is(b, .fantasy-own-score) { color:var(--positive); }
.fantasy-side-copy .team-result.is-l :is(b, .fantasy-own-score) { color:var(--negative); }
.fantasy-side-copy .fantasy-own-score { font-weight:750; }

.fantasy-sidecar .team-at { color:var(--muted); font-size:0.6875rem; font-weight:750; }
.fantasy-side-team { display:flex; align-items:center; gap:0.375rem; min-width:0; font-weight:650; }
.fantasy-side-team .fantasy-code { flex:0 0 auto; height:1.125rem; font-size:0.5625rem; }
.fantasy-side-team { max-width:100%; }
.fantasy-side-team span:last-child { overflow-wrap:anywhere; }
.fantasy-side-empty { margin:0 0.5rem; font-size:0.75rem; }
.fantasy-mini-standings .text-button { margin-top:0.5rem; }
/* The narrow right column: long team names wrap rather than cut off. */
.team-overview-rail .fantasy-team-link span:last-child { white-space:normal; overflow-wrap:anywhere; }
.team-overview-rail .team-table th.is-text { white-space:normal; }
/* Tight spots: with a team picture, the code beside it goes; the name gets the room. */
.team-overview-rail .fantasy-photo + .fantasy-code { display:none; }
/* The schedule names opponents by code, so it stays beside the picture. */
.fantasy-sidecar .fantasy-side-team .fantasy-code { min-width:2.75rem; justify-content:center; box-sizing:border-box; }
/* A future week's opponent named in full (UI-397): the name wraps (two lines at most), and the
   record drops under it when the narrow column runs out of room. */
.fantasy-sidecar .fantasy-side-copy:has(.fantasy-side-name) { flex-wrap:wrap; row-gap:0.125rem; }
.fantasy-sidecar .fantasy-side-team:has(.fantasy-side-name) { flex:1 1 8.5rem; }
.fantasy-sidecar .fantasy-side-copy:has(.fantasy-side-name) > :last-child { margin-left:auto; }
.fantasy-sidecar .fantasy-side-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; text-overflow:clip; overflow-wrap:anywhere; line-height:1.2; }
/* The wire: the gain, and whom it beats under it, beside the player. */
.fantasy-home-wire .fantasy-upgrade { display:grid; justify-items:end; max-width:10rem; margin-left:0; text-align:right; white-space:normal; }
.fantasy-home-wire .fantasy-upgrade small { color:var(--muted); font-size:0.6875rem; font-weight:500; }
.fantasy-home-wire .team-player-name { white-space:normal; }
.fantasy-team-overview .fantasy-lineup { margin:0; }
/* A wider schedule than the NFL page's: fantasy team names run long. */
/* A wider right column than the NFL page's (the standings and the wire need it); the roster has room to spare. */
/* Its own grid (teams.css's team page has its own layout): schedule down the left, tiles on top, roster, rail. */
.fantasy-page .fantasy-team-overview { display:grid; grid-template-columns:15rem minmax(0, 1fr) 21rem; grid-template-areas:"side tiles tiles" "side main rail"; gap:1rem; align-items:start; }
.fantasy-team-overview > .team-overview-tiles { grid-area:tiles; min-width:0; }
.fantasy-team-overview > .team-sidecar { grid-area:side; padding:0.875rem 0.5rem 0.625rem; }
.fantasy-team-overview > .team-sidecar h3 { margin:0 0.5rem 0.5rem; }
.fantasy-team-overview > .team-overview-main { grid-area:main; display:grid; gap:1rem; min-width:0; }
.fantasy-team-overview > .team-overview-rail { grid-area:rail; display:grid; gap:1rem; min-width:0; }
.fantasy-team-overview .team-tiles { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0.75rem; }
.fantasy-team-overview .team-tile { min-height:0; }
.fantasy-team-overview .team-tile strong { font-size:1.75rem; }
@media (min-width:75.01em) { .fantasy-page .fantasy-team-overview { grid-template-columns:17rem minmax(0, 1fr) minmax(24rem, 28rem); } }
@media (max-width:75em) {
  .fantasy-page .fantasy-team-overview { grid-template-columns:14rem minmax(0, 1fr); grid-template-areas:"tiles tiles" "side main" "side rail"; }
  .fantasy-team-overview .team-tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:56em) { .fantasy-page .fantasy-team-overview { grid-template-columns:minmax(0, 1fr); grid-template-areas:"tiles" "main" "side" "rail"; } }
@media (max-width:40em) { .fantasy-team-overview .team-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* UI-551: too narrow for two tiles side by side (320 with 200% text), one per row, so "30.0" stays in its tile. */
.fantasy-team-overview > .team-overview-tiles { container:fteamtiles / inline-size; }
@container fteamtiles (max-width:15em) { .fantasy-team-overview .team-tiles { grid-template-columns:minmax(0, 1fr); } }

/* League home: the standings beside the league's transactions. */
.fantasy-home-grid { display:grid; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); gap:1rem; align-items:start; }
/* Team codes and team links. */
.fantasy-code { display:inline-flex; align-items:center; height:1.25rem; padding:0 0.375rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.03em; }
.fantasy-code.is-mine { border-color:#1f7a54; background:#1f7a54; color:#eafff6; }
.fantasy-team-link { display:inline-flex; align-items:center; gap:0.375rem; max-width:100%; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:700; text-align:left; cursor:pointer; }
.fantasy-team-link span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-team-link:hover span:last-child, .fantasy-team-link:focus-visible span:last-child { color:var(--accent); text-decoration:underline; }
/* Standings. */
.fantasy-standings td:first-child { width:1.5rem; color:var(--muted); font-weight:750; }
/* The whole header cell is its sort button (Standings; Waivers, UI-335). */
:is(.fantasy-standings, .fantasy-waivers-table) thead th { padding:0; }
:is(.fantasy-standings, .fantasy-waivers-table) thead .usage-sort { display:block; box-sizing:border-box; width:100%; padding:0.4375rem 0.5rem; text-align:inherit; cursor:pointer; }
:is(.fantasy-standings, .fantasy-waivers-table) thead .usage-sort:hover { background:var(--accent-soft); }
/* Every sortable header keeps room for its arrow; only the sorted one shows it. */
.fantasy-sort-arrow { display:inline-block; width:0.75em; margin-left:0.25em; text-align:center; visibility:hidden; }
.usage-sort.is-active .fantasy-sort-arrow { visibility:visible; }
.fantasy-standings td, .fantasy-standings th { vertical-align:middle; }
/* Codes take a fixed slot, so every team name (and the owner column) starts on one line. */
.fantasy-standings .fantasy-team-link { display:grid; grid-template-columns:3.25rem max-content; }
/* The full name always shows (the owner cell's spare width must not squeeze it away). */
.fantasy-standings .fantasy-team-link span:last-child { overflow:visible; }
/* Team and owner read as one cell: no rule between them. */
.fantasy-standings tbody th.is-text { border-right:0; }
/* The owner follows the longest team name, under the Team header, and takes the spare width. */
.fantasy-standings td.fantasy-owner { width:100%; padding-left:0.25rem; }
.fantasy-standings .fantasy-code { justify-content:center; justify-self:start; min-width:2.75rem; box-sizing:border-box; }
.fantasy-standings td.is-text, .fantasy-standings thead .usage-sort { white-space:nowrap; }
.fantasy-playoff-line td { padding:0 !important; border-bottom:0 !important; }
/* A division's heading row in the grouped standings. */
.fantasy-division-row th { padding:1rem 0.5rem 0.375rem !important; color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.08em; text-align:left; text-transform:uppercase; }
.fantasy-standings .fantasy-division-row:first-child th { padding-top:0.5rem !important; }
/* The standings' heading, with League / Divisions beside it. */
.fantasy-standings-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1rem; margin-bottom:0.625rem; }
.fantasy-standings-head h3 { margin:0; }
/* UI-331: the Standings / Playoff odds swap, then (with divisions) the grouping toggle. */
.fantasy-standings-tools { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.fantasy-odds .fantasy-standings-head { margin-bottom:0; }
/* Beside the transactions, the odds column is the Standings card's width (measured when the
   standings were last drawn, or in a hidden copy when opened straight on the odds), so the
   swap stays put (UI-491, UI-492). Narrower, both fill the one column. On a phone the swap
   takes its own line under either heading. */
@media (min-width:80.01em) { .fantasy-home-grid:has(> .fantasy-odds) { grid-template-columns:minmax(0, var(--fantasy-standings-width, 34rem)) minmax(18rem, 1fr); } }
/* Opened straight on Playoff odds, the Standings card is measured in a hidden copy of the
   grid laid out over the real one, then removed (UI-492). */
.fantasy-width-probe { position:absolute; top:0; left:0; visibility:hidden; pointer-events:none; }
@media (max-width:40em) { .fantasy-standings-head .fantasy-standings-tools { flex:1 1 100%; } }
/* A seed: filled for a division leader, outlined for any other playoff spot, plain outside. */
.fantasy-seed { display:inline-flex; align-items:center; justify-content:center; min-width:1.5rem; height:1.5rem; box-sizing:border-box; padding:0 0.25rem; border:1.5px solid transparent; border-radius:var(--r-data); color:var(--muted); font-size:0.75rem; font-weight:800; font-variant-numeric:tabular-nums; }
.fantasy-seed.is-in { border-color:var(--accent); color:var(--accent); }
.fantasy-seed.is-leader { border-color:var(--accent); background:var(--accent); color:var(--surface); }
.fantasy-standings td:first-child { width:2rem; }
.fantasy-seed-legend { display:flex; flex-wrap:wrap; gap:0.375rem 1rem; margin-bottom:0.25rem; }
.fantasy-seed-legend > span { display:inline-flex; align-items:center; gap:0.375rem; }
.fantasy-seed-legend .fantasy-seed { min-width:1.25rem; height:1.25rem; font-size:0.625rem; }
/* The playoff picture on team pages: a team's division under its name; leaders tagged. */
.fantasy-div-tag { display:block; margin-top:0.125rem; color:var(--muted); font-size:0.625rem; font-weight:650; }
/* Under the name, past the team picture when there is one. */
.fantasy-mini-standings th:has(.fantasy-photo) .fantasy-div-tag { margin-left:1.875rem; }
.fantasy-div-tag.is-leader { color:var(--accent); font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.fantasy-mini-standings .fantasy-division-row th { font-size:0.625rem; }
.fantasy-playoff-line span { display:block; margin:0.125rem 0; border-top:2px dashed var(--accent); color:var(--accent); font-size:0.5625rem; font-weight:800; letter-spacing:0.08em; text-align:right; text-transform:uppercase; }
/* This week's matchups and the wire. */
.fantasy-home-wire { display:grid; gap:0.375rem; margin:0; padding:0; list-style:none; }
/* Waivers: the free agent an FA tag opened. */
@keyframes fantasy-waiver-flash { from { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); } }
.fantasy-table tr.is-waiver-focus { background:var(--accent-soft); box-shadow:none; animation:fantasy-waiver-flash 1.6s ease-out; }
/* Standings rows open their team. */
.fantasy-row-link { cursor:pointer; }
.fantasy-row-link:hover { background:var(--accent-soft); }
/* The wire: every row on the list's own columns (slot, player, projection, gain), so they
   line up row to row; each cell starts on the player's name line. */
.fantasy-home-wire { grid-template-columns:2.5rem minmax(0, 1fr) auto auto; column-gap:0.75rem; row-gap:0; }
.fantasy-home-wire li { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:start; padding:0.5rem 0; border-bottom:1px solid var(--line); }
.fantasy-home-wire li:last-child { border-bottom:0; }
/* The free agent's projection this week, beside him. */
.fantasy-wire-proj { display:grid; justify-items:end; font-variant-numeric:tabular-nums; }
.fantasy-wire-proj b { font-size:0.875rem; }
.fantasy-wire-proj small { color:var(--muted); font-size:0.625rem; white-space:nowrap; }
.fantasy-wire-slot { justify-self:start; margin-top:0.125rem; padding:0.0625rem 0.25rem; color:var(--muted); font-size:0.625rem; font-weight:800; letter-spacing:0.06em; }
.fantasy-home-wire .fantasy-player { align-items:flex-start; }
.fantasy-home-wire .fantasy-wire-proj b, .fantasy-home-wire .fantasy-upgrade b { line-height:1.4; }
/* League home: the standings as wide as their whole table, the transactions the rest of the
   row; where the two don't fit side by side, the transactions go under the standings. */
.fantasy-home-grid { grid-template-columns:minmax(0, 1fr); }
@media (min-width:80.01em) { .fantasy-home-grid { grid-template-columns:minmax(0, max-content) minmax(18rem, 1fr); } }
/* Transactions: a timeline. Each week opens with a line across; under it each day, then its
   moves on a rail with a dot each (green an add, red a drop, the accent a trade; mine filled). */
.fantasy-moves { display:grid; gap:0.625rem; align-content:start; }
.fantasy-moves h3 { margin:0; }
.fantasy-timeline { display:grid; max-width:46rem; margin:0; padding:0; list-style:none; }
.fantasy-week-break { display:flex; align-items:center; gap:0.75rem; margin:1.5rem 0 0.25rem; color:var(--accent); font-size:0.6875rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; }
.fantasy-week-break:first-child { margin-top:0.25rem; }
.fantasy-week-break::after { content:""; flex:1; border-top:2px solid var(--accent); opacity:0.55; }
.fantasy-day-head { margin:0.625rem 0 0.25rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
.fantasy-day-moves { display:grid; gap:0.125rem; margin:0 0 0 0.3125rem; padding:0 0 0 1.125rem; border-left:2px solid var(--line); list-style:none; }
.fantasy-move { position:relative; display:grid; gap:0.3125rem; padding:0.5rem 0.625rem; border-radius:var(--r-control); }
.fantasy-move::before { content:""; position:absolute; top:0.875rem; left:calc(-1.125rem - 6px); box-sizing:border-box; width:10px; height:10px; border:2px solid var(--muted); border-radius:var(--r-data); background:var(--surface); }
.fantasy-move:is(.is-add, .is-waiver)::before { border-color:var(--positive); }
.fantasy-move.is-drop::before { border-color:var(--negative); }
.fantasy-move.is-trade::before { border-color:var(--accent); }
.fantasy-move.is-mine { background:var(--accent-soft); }
.fantasy-move.is-mine::before { background:currentColor; border-color:var(--accent); color:var(--accent); }
/* A move's head: the team (or Trade) at the left; the kind, bid and time, muted, at the right. */
.fantasy-move-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.25rem 1rem; }
.fantasy-move-head > .fantasy-team-link { font-size:0.875rem; }
.fantasy-move-meta { color:var(--muted); font-size:0.75rem; white-space:nowrap; }
.fantasy-move-type { color:var(--ink); font-weight:700; }
.fantasy-move-head > .fantasy-move-type { font-size:0.875rem; }
.fantasy-move-bid { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.fantasy-move-sides { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap:0.5rem 1.25rem; }
.fantasy-move-side { display:grid; align-content:start; gap:0.25rem; min-width:0; }
.fantasy-move-side > .fantasy-team-link { font-size:0.8125rem; }
.fantasy-move-gets { margin-top:-0.125rem; color:var(--muted); font-size:0.625rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.fantasy-move-players { display:grid; gap:0.25rem; margin:0; padding:0 0 0 0.25rem; list-style:none; }
.fantasy-move-player { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; min-width:0; font-size:0.8125rem; }
.fantasy-move-player .team-player-name { white-space:normal; }
.fantasy-move-sign { width:0.75rem; font-weight:900; text-align:center; }
.fantasy-move-player.is-add .fantasy-move-sign { color:var(--positive); }
.fantasy-move-player.is-drop .fantasy-move-sign { color:var(--negative); }
.fantasy-move-player.is-drop .team-player-name { color:var(--muted); }
.fantasy-moves-more { justify-self:start; }
@media (max-width:60em) {
  .fantasy-home-grid { grid-template-columns:minmax(0, 1fr); }
}

/* Tools: Start/Sit, the trade evaluator and the trade finder (Tools menu). */
/* One column that never grows past the card: a wide table inside scrolls in its own wrap
   (grid items default to min-width:auto, which would widen the page). */
.fantasy-tool-card { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.875rem; }
.fantasy-tool-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:0.75rem; }
.fantasy-tool-head h3 { margin:0 0 0.25rem; }
.fantasy-tool-head p { margin:0; font-size:0.8125rem; }
.fantasy-tool-card select { min-height:2.25rem; max-width:100%; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font-size:0.8125rem; }
.fantasy-tool-title { margin:0; font-size:1rem; }
.fantasy-verdict-call { margin:0; font-size:1rem; }
/* Start/Sit's cards, after Usage's Compare. Each spans six rows of the row of cards (head,
   projection, and the four sections: studio-fantasy.js cardSections) as a subgrid, so each
   section starts at the same height on every card. */
.fantasy-compare { grid-auto-rows:auto; }
.fantasy-compare > .usage-compare-card { grid-row:span 6; align-self:stretch; }
.fantasy-compare > .fantasy-compare-card { grid-template-columns:minmax(0, 1fr); grid-template-rows:subgrid; row-gap:0.75rem; }
/* The head is the card's handle: grab it (grip, photo, name) to drag the card. */
.fantasy-compare-head { position:relative; display:flex; align-items:center; gap:0.25rem; margin-left:-0.5rem; padding:0.25rem 2rem 0.25rem 0.125rem; border-radius:var(--r-control); min-width:0; cursor:grab; -webkit-user-select:none; user-select:none; }
.fantasy-compare-head:hover { background:var(--surface-raised); }
.fantasy-compare-head:active { cursor:grabbing; }
.fantasy-compare-head button { cursor:pointer; }
.fantasy-compare-card > .usage-compare-remove { z-index:2; }
.fantasy-grip { color:var(--muted); font-size:0.875rem; line-height:1; opacity:0.5; }
.fantasy-compare-head:hover .fantasy-grip { opacity:1; color:var(--accent); }
.fantasy-compare-proj { display:flex; align-items:center; gap:0.625rem; }
.fantasy-compare-num { min-width:3.25rem; padding:0.375rem 0.5rem; border-radius:var(--r-control); background:var(--surface-raised); font-size:1.25rem; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.fantasy-compare-proj small { color:var(--muted); font-size:0.6875rem; line-height:1.25; }
/* UI-604: one column no wider than the card, so a long line or forecast wraps inside it
   instead of widening the section past the card's edge. */
.fantasy-ss-section { display:grid; grid-template-columns:minmax(0, 1fr); align-content:start; gap:0.5rem; min-width:0; padding-top:0.75rem; border-top:1px solid var(--line); }
.fantasy-ss-section h5 { margin:0; color:var(--muted); font-size:0.625rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.fantasy-ss-none { margin:0; color:var(--muted); font-size:0.75rem; }
.fantasy-compare-card .is-plus { --ss-tint:color-mix(in srgb, var(--positive-bg) 70%, transparent); }
.fantasy-compare-card .is-minus { --ss-tint:color-mix(in srgb, var(--negative-bg) 70%, transparent); }
/* The game: two tiles, then the weather. */
.fantasy-ss-tiles { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.5rem; }
.fantasy-ss-tile { display:grid; align-content:start; gap:0.125rem; min-width:0; overflow-wrap:anywhere; padding:0.5rem 0.625rem; border-radius:var(--r-control); background:var(--ss-tint, var(--surface-raised)); }
.fantasy-ss-tile span { color:var(--muted); font-size:0.625rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.fantasy-ss-tile b { font-size:1.25rem; font-variant-numeric:tabular-nums; }
.fantasy-ss-tile small { color:var(--muted); font-size:0.6875rem; line-height:1.3; }
.fantasy-ss-weather { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.75rem; min-width:0; padding:0.5rem 0.625rem; border-radius:var(--r-control); background:var(--ss-tint, var(--surface-raised)); }
.fantasy-ss-weather .studio-weather { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; min-width:0; }
.fantasy-ss-weather .studio-weather-icon { display:block; width:1.75rem; height:1.75rem; flex-shrink:0; color:#e1d8f0; }
.fantasy-ss-weather .studio-weather-copy { display:grid; gap:0.0625rem; min-width:0; overflow-wrap:anywhere; }
.fantasy-ss-weather .studio-weather-copy>strong { font-size:1rem; line-height:1.15; }
.fantasy-ss-weather .studio-weather-copy>small, .fantasy-ss-rain { color:var(--muted); font-size:0.6875rem; }
.fantasy-ss-weather .studio-weather-wind { padding-left:0.625rem; border-left:1px solid var(--line); font-size:0.75rem; font-weight:600; white-space:nowrap; }
.fantasy-ss-weather .fantasy-ss-none { font-size:0.75rem; }
/* DraftKings props: a chip a line. */
.fantasy-ss-chips { display:flex; flex-wrap:wrap; gap:0.375rem; margin:0; padding:0; list-style:none; }
.fantasy-ss-chip { display:grid; justify-items:center; min-width:3.5rem; padding:0.375rem 0.5rem; border-color:var(--line) !important; background:var(--surface-raised); }
.fantasy-ss-chips b { font-size:0.9375rem; font-variant-numeric:tabular-nums; }
.fantasy-ss-chips small { color:var(--muted); font-size:0.625rem; white-space:nowrap; }
/* Role: share, totals, weekly bars, trend. */
/* A row a stat; every column can shrink, so a narrow card never spills. */
.fantasy-ss-role { display:grid; gap:0.25rem; font-variant-numeric:tabular-nums; }
.fantasy-ss-metric { display:grid; grid-template-columns:3.75rem minmax(0, 1fr) minmax(0, 1fr) auto; align-items:center; gap:0.5rem; min-width:0; padding:0.375rem 0.5rem; border-radius:var(--r-control); background:var(--ss-tint, transparent); }
.fantasy-ss-label { color:var(--muted); font-size:0.6875rem; font-weight:700; }
.fantasy-ss-stat { display:grid; gap:0.0625rem; min-width:0; }
.fantasy-ss-stat b { font-size:0.9375rem; line-height:1.1; }
.fantasy-ss-stat small { color:var(--muted); font-size:0.625rem; line-height:1.25; }
.fantasy-ss-move { display:grid; justify-items:end; gap:0.1875rem; }
.fantasy-spark { display:block; }
.fantasy-spark { overflow:visible; }
.fantasy-spark-hit { fill:transparent; }
.fantasy-spark-bar { fill:var(--accent); transition:fill 80ms, opacity 80ms; }
.fantasy-spark-bar.is-old { opacity:0.4; }
.fantasy-spark-bar.is-gap { fill:var(--muted); opacity:0.5; }
.fantasy-spark g { cursor:default; }
.fantasy-spark:hover .fantasy-spark-bar { opacity:0.3; }
.fantasy-spark g:hover .fantasy-spark-bar { opacity:1; fill:var(--ink); }
.fantasy-ss-trend { font-size:0.75rem; font-weight:700; color:var(--muted); white-space:nowrap; }
.fantasy-ss-trend small { margin-left:0.125rem; font-size:0.625rem; font-weight:600; }
.fantasy-ss-trend.is-up { color:var(--positive); }
.fantasy-ss-trend.is-down { color:var(--negative); }
/* Who's out. */
.fantasy-ss-out { display:grid; gap:0.25rem; margin:0; }
.fantasy-ss-out-row { display:grid; grid-template-columns:5.25rem minmax(0, 1fr); align-items:baseline; gap:0.5rem; padding:0.25rem 0.375rem; border-radius:var(--r-control); background:var(--ss-tint, transparent); }
.fantasy-ss-out-label { color:var(--muted); font-size:0.6875rem; font-weight:700; }
.fantasy-ss-out-value { display:grid; gap:0.0625rem; min-width:0; }
.fantasy-ss-out-value b { font-size:0.875rem; }
.fantasy-ss-out-value small { color:var(--muted); font-size:0.6875rem; overflow-wrap:anywhere; }
.fantasy-pick-heading { padding:0.5rem 0.375rem 0.125rem; color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; }
.fantasy-pick-heading[hidden] { display:none; }
.fantasy-pick-proj { font-size:0.75rem; font-variant-numeric:tabular-nums; }
.fantasy-trade-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; }
.fantasy-trade-side h4 { margin:0 0 0.5rem; font-size:0.875rem; }
.fantasy-trade-table td:first-child { width:2rem; }
.fantasy-trade-table tr.is-picked td { background:var(--accent-soft); }
.fantasy-trade-result { display:grid; gap:0.625rem; padding:0.875rem 1rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); }
.fantasy-trade-result.is-winwin { border-color:var(--positive); }
.fantasy-trade-result p { margin:0; font-size:0.8125rem; }
.fantasy-trade-result .fantasy-verdict-call { font-size:1rem; font-weight:700; }
.fantasy-trade-totals { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.75rem; }
.fantasy-trade-total { display:grid; gap:0.125rem; }
.fantasy-trade-total small { color:var(--muted); font-size:0.75rem; }
.fantasy-trade-total b { font-size:1.125rem; }
.fantasy-delta { color:var(--muted); font-size:0.8125rem; font-weight:700; }
.fantasy-delta.is-up { color:var(--positive); }
.fantasy-delta.is-down { color:var(--negative); }
.fantasy-offers { display:grid; gap:0.75rem; margin:0; padding:0; list-style:none; }
.fantasy-offer { display:grid; gap:0.625rem; padding:0.75rem; border:1px solid var(--line); border-radius:var(--r-control); }
.fantasy-offer > .pd-button { justify-self:start; }
.fantasy-offer-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0.5rem; }
.fantasy-offer-gains { display:flex; align-items:baseline; gap:0.625rem; }
.fantasy-offer-gains small { color:var(--muted); font-size:0.6875rem; }
.fantasy-offer-sides { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.75rem; }
.fantasy-offer-sides ul { display:grid; gap:0.375rem; margin:0.25rem 0 0; padding:0; list-style:none; }
.fantasy-offer-sides li { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.fantasy-trade-rate { display:grid; justify-items:end; font-weight:700; font-size:0.875rem; }
.fantasy-trade-rate small { color:var(--muted); font-size:0.625rem; font-weight:500; }
@media (max-width:48em) {
  .fantasy-trade-grid, .fantasy-offer-sides, .fantasy-trade-totals { grid-template-columns:minmax(0, 1fr); }
}
/* On a phone the Teams pickers become fixed sheets; the Opponents and Tools menus stay under their tabs. */
@media (max-width:40em) {
  .fantasy-opponents-menu { position:absolute; top:calc(100% + 0.25rem); right:auto; grid-template-columns:minmax(0, 1fr); width:max-content; max-width:100%; }
}
/* Start/Sit: the sidebar (leagues, roster, free agents) on the left, the cards on the right. */
.fantasy-startsit { display:grid; grid-template-columns:19rem minmax(0, 1fr); gap:1rem; align-items:start; }
/* UI-604: the main column is the space left of the sidebar, never its content's width, so
   the consensus wraps and the cards' grid (third card included) fits rather than clips. */
.fantasy-startsit-main { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.75rem; min-width:0; }
.fantasy-compare { min-height:12rem; padding:0.25rem; border:2px dashed transparent; border-radius:var(--r-control); transition:border-color 120ms, background-color 120ms; }
.fantasy-startsit.is-dragging-player .fantasy-compare { border-color:var(--line); }
.fantasy-compare.is-drop-target, .fantasy-side.is-drop-target { border-color:var(--accent); background:var(--accent-soft); }
.fantasy-side-row { cursor:grab; -webkit-user-select:none; user-select:none; }
.fantasy-compare-card.is-dragging, .fantasy-side-row.is-dragging { opacity:0.45; }
.fantasy-drop-slot { display:grid; place-items:center; min-height:10rem; text-align:center; }
.fantasy-drop-copy { display:grid; gap:0.25rem; }
.fantasy-drop-copy b { font-size:0.875rem; }
.fantasy-side { position:sticky; top:0.75rem; display:grid; grid-template-rows:auto auto minmax(0, 1fr) auto; gap:0.625rem; max-height:calc(100vh - 1.5rem); padding:0.875rem; border:2px solid var(--line); }
.fantasy-startsit.is-dragging-card .fantasy-side { border-style:dashed; }
.fantasy-side-head { display:grid; gap:0.5rem; }
.fantasy-side-head h4 { margin:0; font-size:0.875rem; }
.fantasy-side-leagues { display:grid; gap:0.375rem; }
.fantasy-side-league { display:grid; gap:0.0625rem; padding:0.375rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-side-league b, .fantasy-side-league small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-side-league b { font-size:0.8125rem; }
.fantasy-side-league small { color:var(--muted); font-size:0.6875rem; font-weight:600; }
.fantasy-side-league:hover { border-color:var(--accent); }
.fantasy-side-league[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft); }
.fantasy-side .usage-pick-search { width:100%; }
.fantasy-side-list { display:grid; grid-template-columns:minmax(0, 1fr); align-content:start; gap:0.125rem; min-height:0; margin:0 -0.375rem; padding:0 0.375rem; overflow:auto; list-style:none; }
.fantasy-side-row { display:grid; grid-template-columns:auto auto auto minmax(0, 1fr) auto auto; align-items:center; gap:0.375rem; padding:0.3125rem 0.375rem; border-radius:var(--r-control); cursor:grab; }
.fantasy-side-row[hidden] { display:none; }
.fantasy-side-row:hover { background:var(--surface-raised); }
.fantasy-side-row.is-picked { background:var(--accent-soft); }
/* Can't fill a lineup slot with the players compared: grayed out, not draggable. */
.fantasy-side-row.is-unfit { opacity:0.35; cursor:default; }
.fantasy-side-row.is-unfit:hover { background:none; }
.fantasy-side-row .team-pos-chip { margin-right:0; }
/* UI-604: a row with no slot label (anything but FLEX-type starters) drops the slot column,
   so the name gets that room. */
.fantasy-side-slot:empty { display:none; }
.fantasy-side-row:has(> .fantasy-side-slot:empty) { grid-template-columns:auto auto minmax(0, 1fr) auto auto; }
/* Large text (UI-261): the list is a container measured in its own text size, so this only
   applies when a row holds under 14em (200% text on a phone), never at the default size.
   The player's name gets the row's full width under the slot, position and photo, and the
   projection and Add sit under it, instead of the name squeezing to nothing. */
.fantasy-side-list { container-type:inline-size; }
@container (max-width:14em) {
  .fantasy-side-row, .fantasy-side-row:has(> .fantasy-side-slot:empty) { grid-template-columns:auto auto auto minmax(0, 1fr); }
  .fantasy-side-row > .fantasy-side-copy { grid-column:1 / -1; grid-row:2; }
  .fantasy-side-row > .fantasy-pick-proj { grid-column:1 / 4; grid-row:3; }
  .fantasy-side-row > .fantasy-side-add { grid-column:4; grid-row:3; justify-self:end; }
}
.fantasy-side-slot { width:2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:0.625rem; font-weight:800; }
.fantasy-side-copy { display:grid; min-width:0; }
/* UI-604: a long name wraps to a second line; the ellipsis is only for a name longer than two. */
.fantasy-side-name { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:0.8125rem; font-weight:700; line-height:1.2; text-overflow:ellipsis; overflow-wrap:break-word; }
.fantasy-side-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem; min-width:0; color:var(--muted); font-size:0.6875rem; }
/* UI-604: the game line wraps beside the projection and +, never under them. */
.fantasy-side-meta .fantasy-game { min-width:0; white-space:normal; overflow-wrap:anywhere; }
.fantasy-side-add { display:grid; place-items:center; width:1.75rem; height:1.75rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface); color:var(--ink); font:inherit; font-weight:800; cursor:pointer; }
.fantasy-side-add:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.fantasy-side-add[aria-pressed=true] { border-color:var(--accent); background:var(--accent); color:var(--surface); }
.fantasy-side-add:disabled { opacity:0.35; cursor:not-allowed; }
.fantasy-side-hint { margin:0; font-size:0.6875rem; }
/* Narrow: the sidebar sits above the cards and stops sticking. */
@media (max-width:60em) {
  .fantasy-startsit { grid-template-columns:minmax(0, 1fr); }
  .fantasy-side { position:static; max-height:24rem; }
}
/* The trade finder's settings, needs and results. */
.fantasy-finder-settings { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.75rem; }
.fantasy-protect { position:relative; align-self:flex-end; }
.fantasy-protect summary { min-height:2.25rem; padding:0.5rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); font-size:0.8125rem; font-weight:700; cursor:pointer; }
.fantasy-protect-list { position:absolute; top:calc(100% + 0.25rem); left:0; z-index:30; display:grid; gap:0.25rem; min-width:15rem; max-height:20rem; overflow:auto; padding:0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); box-shadow:0 1rem 2.5rem #0008; font-size:0.8125rem; }
.fantasy-protect-list label { display:flex; align-items:center; gap:0.5rem; }
.fantasy-needs { margin:0; font-size:0.8125rem; }
.fantasy-demand h4 { margin:0 0 0.375rem; font-size:0.875rem; }
.fantasy-demand ol { display:grid; gap:0.25rem; margin:0; padding:0; list-style:none; }
.fantasy-demand li { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; padding:0.375rem 0; border-bottom:1px solid var(--line); }
.fantasy-demand li:last-child { border-bottom:0; }
.fantasy-demand-team, .fantasy-demand-fit { display:grid; gap:0.125rem; min-width:0; }
.fantasy-demand-team small { color:var(--muted); font-size:0.75rem; }
.fantasy-demand-fit { justify-items:end; text-align:right; }
.fantasy-demand-fit small { font-size:0.75rem; }
.fantasy-demand li.has-deal .fantasy-demand-fit small { color:var(--ink); }
.fantasy-demand > p { margin:0.375rem 0 0; font-size:0.75rem; }
/* My lineup spot by spot against the league: top third green, bottom third red. */
.fantasy-grades { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.5rem; }
.fantasy-map, .fantasy-map > .team-table-wrap { min-width:0; }
.fantasy-grades h4 { margin:0; font-size:0.875rem; }
.fantasy-grade-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); gap:0.375rem; margin:0; padding:0; list-style:none; }
.fantasy-grades h4 small { margin-left:0.375rem; font-size:0.75rem; font-weight:500; }
.fantasy-grade-list li { display:grid; min-width:0; }
.fantasy-grade { display:grid; gap:0.0625rem; width:100%; min-width:0; padding:0.375rem 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:inherit; font-size:0.75rem; text-align:left; cursor:pointer; }
.fantasy-grade:hover { border-color:var(--accent); }
.fantasy-grade[aria-expanded="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.fantasy-grade-detail { display:grid; gap:0.375rem; padding:0.625rem; border:1px solid var(--accent); border-radius:var(--r-control); }
.fantasy-grade-detail-head { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; }
.fantasy-grade-detail h5 { margin:0; font-size:0.875rem; }
.fantasy-grade-detail > p { margin:0; font-size:0.75rem; }
.fantasy-grade-table tr.is-mine > * { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.fantasy-grade-table td.fantasy-map-cell { width:2.5rem; }
.fantasy-grade b { font-size:0.75rem; }
.fantasy-grade span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-grade small { color:var(--muted); font-weight:700; }
.fantasy-grade.is-strong small { color:var(--positive); }
.fantasy-grade.is-weak small { color:var(--negative); }
.fantasy-grade.is-depth { border-style:dashed; border-left-style:solid; }
.fantasy-map summary { font-size:0.8125rem; font-weight:700; cursor:pointer; }
.fantasy-map > p { margin:0.375rem 0 0; font-size:0.75rem; }
.fantasy-map-table td.fantasy-map-cell { text-align:center; font-variant-numeric:tabular-nums; font-weight:700; }
.fantasy-map-cell.is-strong { background:color-mix(in srgb, var(--positive-bg) 70%, transparent); color:var(--positive); }
.fantasy-map-cell.is-weak { background:color-mix(in srgb, var(--negative-bg) 70%, transparent); color:var(--negative); }
.fantasy-map-table tr.is-mine th { color:var(--accent); }
@media (max-width:36em) { .fantasy-demand li { flex-direction:column; align-items:flex-start; } .fantasy-demand-fit { justify-items:start; text-align:left; } }
.fantasy-offer-notes { margin:0; color:var(--muted); font-size:0.75rem; }
.fantasy-offer-notes b { color:var(--ink); }
.fantasy-trade-total .fantasy-delta { font-size:0.75rem; }
.fantasy-trade-moves { color:var(--accent) !important; }
@media (max-width:48em) { .fantasy-protect-list { position:static; } }

/* Start/Sit: a card's parts are buttons that open their details. They keep the card's
   look (the site's own button styles reset), with a hover ring and a pointer so it's
   clear what can be clicked. */
.fantasy-compare-card .fantasy-ss-more { width:100%; min-height:0; margin:0; border:1px solid transparent; border-radius:var(--r-control); box-shadow:none; color:inherit; font:inherit; text-align:left; text-transform:none; letter-spacing:normal; cursor:pointer; transition:border-color 100ms, box-shadow 100ms; }
.fantasy-compare-card .fantasy-ss-metric, .fantasy-compare-card .fantasy-ss-out-row { background:var(--ss-tint, transparent); }
.fantasy-compare-card .fantasy-ss-tile, .fantasy-compare-card .fantasy-ss-weather { background:var(--ss-tint, var(--surface-raised)); }
.fantasy-compare-card .fantasy-ss-chip { width:auto; border-color:var(--line); background:var(--surface-raised); text-align:center; }
.fantasy-compare-card .fantasy-ss-more:hover { border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.fantasy-compare-card .fantasy-ss-more:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.fantasy-compare-card .fantasy-ss-more[aria-expanded=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.fantasy-ss-chips li { display:contents; }
/* The details panel: under the part clicked, over the rest of the card. */
.fantasy-compare-card .fantasy-ss-pop { position:absolute; left:0.75rem; right:0.75rem; z-index:20; display:grid; gap:0.5rem; padding:0.75rem; border:1px solid var(--accent); border-radius:var(--r-card); background:var(--surface); box-shadow:0 1rem 2.5rem #000a; }
.fantasy-ss-pop header { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.fantasy-ss-pop h6 { margin:0; font-size:0.8125rem; font-weight:800; }
.fantasy-compare-card .fantasy-ss-pop .close-button { position:static; }
.fantasy-ss-pop .fantasy-ss-table { width:100%; border-collapse:collapse; font-size:0.75rem; font-variant-numeric:tabular-nums; }
.fantasy-ss-pop .fantasy-ss-table th { padding:0.25rem 0.375rem; border:0; border-bottom:1px solid var(--line); background:none; color:var(--muted); font-size:0.625rem; font-weight:800; text-align:left; text-transform:uppercase; }
.fantasy-ss-pop .fantasy-ss-table td { padding:0.3125rem 0.375rem; border:0; border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent); background:none; }
.fantasy-ss-pop .fantasy-ss-table small { color:var(--muted); font-size:0.625rem; }
.fantasy-ss-pop .fantasy-ss-table .is-current, .fantasy-ss-pop .fantasy-ss-table tr.is-current td { color:var(--accent); }
.fantasy-ss-facts { display:grid; gap:0.25rem; margin:0; font-size:0.8125rem; }
.fantasy-ss-facts>div { display:grid; grid-template-columns:7rem minmax(0, 1fr); gap:0.5rem; }
.fantasy-ss-facts dt { color:var(--muted); font-size:0.75rem; }
.fantasy-ss-facts dd { margin:0; font-weight:700; }
.fantasy-ss-pop .fantasy-ss-foot { margin:0; color:var(--muted); font-size:0.6875rem; line-height:1.4; }

/* ------------------------------------------------------------------------------------
   Arcade: the Fantasy tab after the H-07 mockup. Title, league chips and Add league on
   top; the views as chips; the week's matchups as a strip; the game summary and the
   slot-by-slot lineups beside a rail (Start/Sit call, top waiver, lines on the board).
   Built from arcade.css's kit (.ar-seg, .ar-btn, .ar-pos, .ar-label).
   ------------------------------------------------------------------------------------ */
.fantasy-page { gap:1.125rem; padding-bottom:1rem; }
.fantasy-page .fantasy-body { gap:1.125rem; }
.fantasy-title { margin:0; font:800 2.125rem/1 var(--font-display); letter-spacing:-0.03em; color:var(--ink); }
.fantasy-page .fantasy-topbar { align-items:center; justify-content:flex-start; gap:0.75rem 1rem; }
.fantasy-page .fantasy-topbar .fantasy-switcher { flex:0 1 auto; align-items:center; gap:0.625rem; }
/* A league: an initials tile, its name, the platform and my team in mono. */
.fantasy-page .fantasy-switch { display:inline-flex; align-items:center; gap:0.625rem; max-width:22rem; min-height:2.75rem; padding:0.25rem 0.75rem 0.25rem 0.5rem; box-sizing:border-box;
  border:2px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--muted); box-shadow:none; }
.fantasy-switch-copy { display:grid; min-width:0; }
.fantasy-page .fantasy-switch b { color:var(--ink); font:800 0.9375rem/1.2 var(--font-body); }
.fantasy-page .fantasy-switch small { color:var(--muted); font:400 0.75rem/1.3 var(--font-mono); }
.fantasy-page .fantasy-switch:hover { border-color:var(--edge); color:var(--ink); }
.fantasy-page .fantasy-switch[aria-pressed=true] { border-color:var(--edge); background:var(--surface-raised); box-shadow:none; }
.fantasy-switch-badge { display:grid; place-items:center; flex:0 0 auto; width:1.75rem; height:1.75rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--lilac); color:var(--accent-ink); font:700 0.625rem var(--font-mono); }
.fantasy-page .fantasy-switch[aria-pressed=false] .fantasy-switch-badge { background:var(--line); color:var(--ink); }
/* A league's chip (UI-703): the league's button and, in its bottom corner, the "⋯" that opens
   the league's settings (Forget sign-in, Remove league), which hang under the chip
   (studio-fantasy.js keeps them on screen). The "⋯" ends the chip's second line, which keeps
   clear of it; the name's line keeps the chip's whole width, so a name wraps (a phone) and the
   chip grows exactly as before, and a chip is wider only when its second line is its longest.
   A right-click or a long press on the chip opens the same menu, so a long press selects no
   text and brings up no callout. */
.fantasy-chip { position:relative; display:inline-flex; flex:0 0 auto; min-width:0; max-width:22rem; }
.fantasy-page .fantasy-chip > .fantasy-switch { flex:1 1 auto; min-width:0; max-width:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.fantasy-page .fantasy-chip .fantasy-switch-sub { padding-right:0.875rem; }
.fantasy-page .fantasy-chip-menu { position:static; }
.fantasy-page .fantasy-chip .fantasy-chip-menu > summary { position:absolute; inset:auto 2px 2px auto; display:grid; place-items:center; width:1.5rem; height:1.5rem; min-width:24px; min-height:24px; border-radius:var(--r-data); color:var(--muted); cursor:pointer; }
.fantasy-chip-menu > summary svg { fill:currentColor; }
.fantasy-page .fantasy-chip-menu > summary:hover { color:var(--ink); }
.fantasy-page .fantasy-chip-menu[open] > summary { background:color-mix(in srgb, var(--ink) 16%, transparent); color:var(--ink); }
.fantasy-page .fantasy-chip-items { min-width:min(15rem, calc(100vw - 1rem)); max-width:calc(100vw - 1rem); }
/* Shut, it has no box (a browser may keep a shut details' content laid out, only unpainted), so nothing of it lies off a narrow screen. */
.fantasy-chip-menu:not([open]) > .fantasy-chip-items { display:none; }
.fantasy-chip-menu-title { display:grid; gap:0.0625rem; margin:0; padding:0.375rem 0.625rem 0.5rem; border-bottom:1px solid var(--line); }
.fantasy-chip-menu-title b { color:var(--ink); font-size:0.8125rem; overflow-wrap:anywhere; }
.fantasy-chip-menu-title small { color:var(--muted); font:400 0.6875rem/1.3 var(--font-mono); }
.fantasy-chip-items .fantasy-remove b { color:var(--bad); }
/* The note after a league is removed (UI-703): in the corner where the site's pick toast
   shows, with Undo and a dismiss, for a few seconds (studio-fantasy-state.js offerUndo). */
.fantasy-undo { position:fixed; inset:auto 1rem calc(1rem + env(safe-area-inset-bottom)) auto; z-index:100; display:flex; align-items:center; gap:0.5rem; box-sizing:border-box; max-width:min(27.5rem, calc(100vw - 2rem)); padding:0.5rem 0.5rem 0.5rem 0.875rem;
  border:1px solid var(--edge); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); box-shadow:0 0.5rem 1.75rem #130e1966; animation:fantasy-undo-enter 160ms ease-out; }
.fantasy-undo p { flex:1 1 auto; min-width:0; margin:0; font-size:0.8125rem; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.fantasy-undo .pd-button { flex:none; min-height:2.5rem; padding:0 0.875rem; font-size:0.8125rem; }
.fantasy-undo-dismiss { flex:none; width:2.5rem; height:2.5rem; padding:0; border:0; border-radius:var(--r-control); background:none; color:var(--muted); font-size:1.125rem; cursor:pointer; }
.fantasy-undo-dismiss:hover { color:var(--ink); }
@keyframes fantasy-undo-enter { from { opacity:0; translate:0 0.375rem; } to { opacity:1; translate:0 0; } }
@media (prefers-reduced-motion: reduce) { .fantasy-undo { animation:none; } }
@media (max-width:40em) { .fantasy-undo { left:1rem; max-width:none; } }
.fantasy-page .fantasy-more > summary { min-height:2.75rem; }
.fantasy-page .fantasy-more-menu { border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); box-shadow:none; }
.fantasy-add { display:inline-flex; align-items:center; gap:0.5rem; height:2.75rem; padding:0 0.875rem; border:2px dashed var(--line); border-radius:var(--r-card); background:transparent; color:var(--muted); font:700 0.875rem var(--font-body); cursor:pointer; }
.fantasy-add:hover, .fantasy-add[aria-pressed=true] { border-color:var(--accent); color:var(--ink); }
.fantasy-page .fantasy-controls { gap:0.5rem; }
.fantasy-page .fantasy-controls select { min-height:2.5rem; padding:0 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:700 0.8125rem var(--font-body); }
.fantasy-page .fantasy-controls .pd-button { min-height:2.5rem; padding:0 0.875rem; font-size:0.8125rem; }
/* A reload takes no room in the page (UI-702). Refresh is exactly as wide as its word, as it
   was before: its second line (when the league was last read, "Updating…" with a spinner, or
   "Update failed") adds no width and may run into the button's padding, so the controls wrap
   where they always did and the row holds still when the line changes. The bar lies just above
   the top bar, out of the flow and over no control. */
.fantasy-page .fantasy-topbar { position:relative; }
.fantasy-page .fantasy-controls .fantasy-refresh { display:inline-grid; align-content:center; justify-items:center; row-gap:0.0625rem; line-height:1.15; }
.fantasy-refresh-note { display:flex; align-items:center; justify-content:center; gap:0.25rem; width:0; min-width:100%; min-height:1.15em; color:var(--muted); font:400 0.6875rem/1.15 var(--font-mono); white-space:nowrap; }
.fantasy-refresh.is-failed .fantasy-refresh-note { color:var(--negative); }
.fantasy-refresh.is-busy { cursor:progress; }
.fantasy-refresh.is-busy .fantasy-refresh-label { color:var(--muted); }
/* While it ignores a press (the first seconds of its own reload) it doesn't answer one either. */
html body[data-layout] .pd-button.fantasy-refresh[aria-disabled=true]:is(:hover, :active) { border-color:var(--line); translate:none !important; filter:none; }
.fantasy-more-item[aria-disabled=true] { cursor:progress; }
.fantasy-more-item[aria-disabled=true]:is(:hover, :focus-visible) { background:none; }
.fantasy-spinner { flex:none; width:0.75rem; height:0.75rem; border:1.5px solid var(--muted); border-block-color:transparent; border-radius:50%; animation:fantasy-spin 0.8s linear infinite; }
.fantasy-refresh-note .fantasy-spinner { width:0.5625rem; height:0.5625rem; }
.fantasy-progress { position:absolute; inset:auto 0 calc(100% + 0.375rem); height:0.1875rem; overflow:hidden; border-radius:var(--r-data); background:var(--accent-soft); pointer-events:none; }
.fantasy-progress::after { content:""; position:absolute; inset:0 auto 0 0; width:40%; border-radius:inherit; background:var(--accent); animation:fantasy-progress 1.2s ease-in-out infinite; }
@keyframes fantasy-spin { to { transform:rotate(360deg); } }
@keyframes fantasy-progress { from { translate:-100% 0; } to { translate:250% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fantasy-spinner { animation:none; }
  .fantasy-progress::after { width:100%; animation:none; }
}
.fantasy-page .fantasy-owners { display:inline-flex; align-items:center; gap:0.4375rem; color:var(--muted); font-size:0.8125rem; font-weight:700; }
.fantasy-page .fantasy-owners input { accent-color:var(--accent); }
.fantasy-page :is(button, a, summary, select, input):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* The views: separate chips, the current one in the selected style (a .ar-seg without its track). */
.fantasy-nav-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem 1rem; }
.fantasy-page .fantasy-nav.ar-seg { position:static; display:flex; flex-wrap:wrap; gap:0.5rem; padding:0; border:0; background:none; overflow:visible; }
.fantasy-page .fantasy-nav.ar-seg button { display:inline-flex; align-items:center; gap:0.5rem; height:2.25rem; padding:0 1rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font:700 0.875rem var(--font-body); box-shadow:none; }
.fantasy-page .fantasy-nav.ar-seg button:hover { color:var(--ink); border-color:var(--edge); }
.fantasy-page .fantasy-nav.ar-seg button[aria-selected=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); box-shadow:none; font-weight:800; }
.fantasy-page .fantasy-nav.ar-seg button[aria-expanded=true] { border-color:var(--accent); }
.fantasy-nav-count { display:grid; place-items:center; min-width:1.25rem; height:1.25rem; padding:0 0.25rem; box-sizing:border-box; border-radius:var(--r-control); background:var(--accent); color:var(--accent-ink); font:700 0.6875rem var(--font-mono); }
.fantasy-nav-caret { opacity:0.7; }
.fantasy-page .fantasy-opponents-menu { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; }
.fantasy-you { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0.5rem 0.875rem; }
.fantasy-you-note { color:var(--muted); font:400 0.75rem var(--font-mono); }

/* The strip: a card a matchup, name and score on each line; the one on screen filled blue. */
.fantasy-page .fantasy-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(12.5rem, 1fr); gap:0.875rem; overflow-x:auto; padding:0 0.375rem 0.375rem 0; }
.fantasy-page .fantasy-strip-card { display:grid; align-content:center; gap:0.375rem; min-height:4.5rem; padding:0.625rem 0.875rem; box-sizing:border-box; border:2px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--ink); box-shadow:none; }
.fantasy-page button.fantasy-strip-card:hover { border-color:var(--edge); box-shadow:none; }
.fantasy-page .fantasy-strip-team, .fantasy-page .fantasy-strip-team:has(> .fantasy-photo) { display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; min-width:0; }
.fantasy-page .fantasy-strip-code, .fantasy-page .fantasy-strip-name small { display:none; }
.fantasy-page .fantasy-strip-name { flex:1; min-width:0; }
.fantasy-page .fantasy-strip-name span { display:block; font-size:0.8125rem; font-weight:800; }
.fantasy-page .fantasy-strip-team + .fantasy-strip-team .fantasy-strip-name span { font-weight:600; }
.fantasy-page .fantasy-strip-score { display:flex; flex-direction:row-reverse; align-items:baseline; gap:0.4375rem; }
.fantasy-page .fantasy-strip-score b { font:700 0.875rem var(--font-mono); color:inherit; }
.fantasy-page .fantasy-strip-score .fantasy-proj { color:inherit; opacity:0.75; font:400 0.625rem var(--font-mono); }
.fantasy-page .fantasy-strip-team.is-ahead .fantasy-strip-score b { color:var(--green); }
.fantasy-page .fantasy-strip-note { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fantasy-page .fantasy-strip-card:is(.is-custom, .is-bye) .fantasy-strip-note { position:static; width:auto; height:auto; clip-path:none; font:700 0.625rem var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; opacity:0.85; }

/* The matchup: summary and lineups on the left, the rail on the right. */
.fantasy-matchup-grid { display:grid; grid-template-columns:minmax(0, 1fr) 23.25rem; gap:1.75rem; align-items:start; }
.fantasy-matchup-main, .fantasy-matchup-rail { display:grid; gap:1.125rem; min-width:0; }
.fantasy-matchup-grid:not(:has(.fantasy-matchup-rail)) { grid-template-columns:minmax(0, 1fr); }
/* The game summary. */
.fantasy-page .fantasy-scorebox { grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:0.875rem 1.25rem; padding:1.125rem 1.375rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); box-shadow:none; }
.fantasy-page .fantasy-game-team { display:flex; flex-direction:row; align-items:center; gap:0.875rem; min-width:0; text-align:left; }
.fantasy-page .fantasy-game-team.is-right { flex-direction:row-reverse; text-align:right; }
.fantasy-game-badge { position:relative; display:grid; place-items:center; flex:0 0 auto; width:3.25rem; height:3.25rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-data); background:var(--accent); color:var(--accent-ink); box-shadow:none; font:700 0.9375rem var(--font-mono); }
.fantasy-game-badge.is-right { background:var(--lilac); }
.fantasy-game-badge .fantasy-photo { width:100%; height:100%; border-radius:0; background:transparent; color:inherit; font:inherit; }
.fantasy-page .fantasy-game-copy { display:grid; gap:0.1875rem; min-width:0; }
.fantasy-page .fantasy-game-team h3 { margin:0; font:800 1.375rem/1.1 var(--font-display); letter-spacing:-0.02em; white-space:normal; overflow-wrap:anywhere; }
.fantasy-page .fantasy-game-team small { color:var(--muted); font-size:0.8125rem; }
.fantasy-page .fantasy-game-num { display:grid; justify-items:end; min-width:0; margin-left:auto; }
.fantasy-page .fantasy-game-team.is-right .fantasy-game-num { justify-items:start; margin-left:0; margin-right:auto; }
.fantasy-page .fantasy-game-num b { font:700 2.625rem/1 var(--font-mono); letter-spacing:-0.04em; color:var(--ink); }
.fantasy-page .fantasy-game-team:not(.is-right) .fantasy-game-num b { color:var(--accent); }
.fantasy-page .fantasy-game-num.is-ahead b { text-decoration:underline 3px var(--green); text-underline-offset:6px; }
.fantasy-page .fantasy-game-num .fantasy-proj { margin-top:0.25rem; font:400 0.75rem var(--font-mono); }
.fantasy-game-vs { padding:0.25rem 0.625rem; border:2px solid var(--line); border-radius:var(--r-data); background:var(--bg); color:var(--muted); font:700 0.75rem var(--font-mono); }
.fantasy-page .fantasy-game-score { grid-column:1 / -1; display:grid; justify-items:stretch; gap:0.4375rem; text-align:left; }
.fantasy-game-bar { display:flex; height:1.375rem; overflow:hidden; border:1px solid var(--line); border-radius:0; background:var(--lilac); }
.fantasy-game-bar > span { background:var(--accent); border-right:1px solid var(--line); }
.fantasy-game-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.25rem 1rem; }
.fantasy-page .fantasy-game-score p { margin:0; color:var(--muted); font-size:0.8125rem; font-weight:600; }
.fantasy-page .fantasy-game-basis { color:var(--muted); font:400 0.75rem var(--font-mono); letter-spacing:0; text-transform:none; }

/* Lineups slot by slot. */
.fantasy-versus-wrap { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; }
.fantasy-page .fantasy-versus { font-size:0.875rem; }
.fantasy-page .fantasy-versus thead th { height:2.5rem; padding:0 0.625rem; border-bottom:2px solid var(--line); color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; }
.fantasy-page .fantasy-versus th, .fantasy-page .fantasy-versus td { border-bottom:1px solid var(--surface-raised); padding:0.375rem 0.625rem; }
.fantasy-page .fantasy-versus tr.is-swap { background:var(--surface-raised); }
.fantasy-page .fantasy-versus tbody:not(.fantasy-versus-total) th.fantasy-slot { color:var(--ink); font:700 0.6875rem var(--font-mono); }
/* The score column (UI-694): points and the to-play dash at 17px, the Proj under them at 12px in near-ink. */
.fantasy-page .fantasy-versus td.fantasy-score b { font:700 1.0625rem var(--font-mono); }
.fantasy-page .fantasy-versus-total td.fantasy-score b { font-size:1.1875rem; }
.fantasy-page .fantasy-versus .fantasy-proj { color:color-mix(in srgb, var(--ink) 80%, var(--muted)); font:500 0.75rem var(--font-mono); }
.fantasy-page .fantasy-versus .team-player-name { font-weight:800; font-size:0.9375rem; }
.fantasy-page .fantasy-bench th[scope=rowgroup] { padding:0.5rem 0.875rem; background:var(--bg); color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.1em; }
.fantasy-page .fantasy-versus-total td, .fantasy-page .fantasy-versus-total th { border-top:2px solid var(--line); }
/* Tags beside a name: Swap? (blue) and Start me (mint). */
.fantasy-tag { display:inline-block; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-data); color:var(--accent-ink); font:800 0.6875rem/1.3 var(--font-body); white-space:nowrap; }
.fantasy-tag.is-swap { background:var(--accent); }
.fantasy-tag.is-start { background:var(--green); }
/* The points-against-projection tints, in the Arcade's mint and pink. */
.fantasy-page .fantasy-table td.is-over-1 { background:color-mix(in srgb, var(--green) 14%, transparent); }
.fantasy-page .fantasy-table td.is-over-2 { background:color-mix(in srgb, var(--green) 28%, transparent); }
.fantasy-page .fantasy-table td.is-over-3 { background:color-mix(in srgb, var(--green) 45%, transparent); }
.fantasy-page .fantasy-table td.is-under-1 { background:color-mix(in srgb, var(--pink) 14%, transparent); }
.fantasy-page .fantasy-table td.is-under-2 { background:color-mix(in srgb, var(--pink) 28%, transparent); }
.fantasy-page .fantasy-table td.is-under-3 { background:color-mix(in srgb, var(--pink) 42%, transparent); }
.fantasy-page .fantasy-table td:is(.is-over-3, .is-under-3) .fantasy-proj { color:inherit; opacity:0.85; }
/* Played and on track (within 20% of his projection, UI-383): a muted fill, so it never reads
   as still to play. To play: a dash in a dashed, dimmer cell, his projection under it. */
.fantasy-page .fantasy-table td.is-even { background:color-mix(in srgb, var(--muted) 18%, transparent); }
.fantasy-page .fantasy-table td.is-pending { color:var(--muted); outline:1px dashed color-mix(in srgb, var(--muted) 60%, transparent); outline-offset:-3px; }
.fantasy-page .fantasy-table td.is-pending b { font-weight:500; }

/* The rail. */
/* UI-551: one column no wider than the card, so a long name or "All waivers →" wraps at 320/200%
   text instead of pushing the card off the screen. */
.fantasy-rail-card { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.75rem; padding:1rem 1.125rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; }
.fantasy-rail-card > p { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.45; }
.fantasy-rail-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0.25rem 0.75rem; }
.fantasy-rail-head h2 { margin:0; font:800 1.125rem/1.15 var(--font-display); letter-spacing:-0.02em; }
.fantasy-page .fantasy-rail-head .text-button { padding:0; border:0; background:none; color:var(--muted); font-size:0.8125rem; font-weight:700; text-decoration:underline; cursor:pointer; }
.fantasy-page .fantasy-rail-head .text-button:hover { color:var(--accent); }
.fantasy-page .fantasy-call { padding:1.125rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; font-size:inherit; }
.fantasy-page .fantasy-call.is-set { box-shadow:none; }
.fantasy-call-top { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.fantasy-call-tag { justify-self:start; padding:0.1875rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--accent); color:var(--accent-ink); font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
.fantasy-call.is-set .fantasy-call-tag { background:var(--green); }
.fantasy-call-gain { color:var(--green); font:700 0.8125rem var(--font-mono); }
.fantasy-page .fantasy-call h2 { margin:0; font:800 1.5rem/1.1 var(--font-display); letter-spacing:-0.02em; }
.fantasy-page .fantasy-call-moves { display:grid; gap:0.5rem; margin:0; padding:0; list-style:none; }
.fantasy-call-moves li { display:grid; gap:0.5rem; }
.fantasy-call-moves li + li { padding-top:0.5rem; border-top:1px dashed var(--line); }
.fantasy-call-row { display:flex; align-items:center; gap:0.625rem; padding:0.5625rem 0.75rem; border:2px solid var(--line); border-radius:var(--r-card); background:var(--bg); }
.fantasy-call-io { padding:0.125rem 0.4375rem; border-radius:var(--r-control); font:700 0.6875rem var(--font-mono); }
.fantasy-call-io.is-in { background:var(--green); color:var(--accent-ink); }
.fantasy-call-io.is-out { background:var(--line); color:var(--ink); }
.fantasy-call-name { flex:1; min-width:0; }
.fantasy-call-name b { font-weight:800; }
.fantasy-call-name small { color:var(--muted); font-size:0.75rem; font-weight:600; }
.fantasy-call-num { font:700 0.9375rem var(--font-mono); }
.fantasy-call-row:has(.is-out) .fantasy-call-num { color:var(--muted); }
.fantasy-call-path { color:var(--ink); font:700 0.875rem var(--font-mono); white-space:nowrap; }
.fantasy-rail-card > .ar-btn { width:100%; }
.fantasy-call > .ar-btn.primary { min-height:3rem; box-shadow:none; font:800 1rem var(--font-display); }
/* UI-551: the name drops under the photo when it has less than 8em beside it (320/200% text). */
.fantasy-waiver-main { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; }
.fantasy-waiver-who { display:grid; grid-template-columns:minmax(0, 1fr); flex:1 1 8em; gap:0.1875rem; min-width:0; }
.fantasy-waiver-who > b { font:800 1.125rem var(--font-display); overflow-wrap:anywhere; }
.fantasy-waiver-who > span { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; color:var(--muted); font-size:0.75rem; }
.fantasy-fa { padding:0 0.4375rem; border:2px solid var(--green); border-radius:var(--r-control); color:var(--green); font:700 0.6875rem var(--font-mono); }
.fantasy-waiver-adds { display:grid; justify-items:end; gap:0.125rem; }
.fantasy-waiver-adds b { color:var(--green); font:700 1.0625rem var(--font-mono); }
.fantasy-waiver-adds small { color:var(--muted); font-size:0.6875rem; }
.fantasy-page .fantasy-waiver-gain b { color:var(--ink); font-family:var(--font-mono); }
.fantasy-page .fantasy-waiver-gain b.is-plus { color:var(--green); }
.fantasy-board ul { display:grid; gap:0.625rem; margin:0; padding:0; list-style:none; }
.fantasy-board li { display:flex; align-items:center; justify-content:space-between; gap:0.625rem; }
.fantasy-board-who { display:grid; gap:0.0625rem; min-width:0; }
.fantasy-board-who b { font-size:0.875rem; font-weight:800; }
.fantasy-board-who small { color:var(--muted); font-size:0.75rem; }
.fantasy-board-line { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 0.4375rem; min-height:2.125rem; padding:0.125rem 0.625rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--bg); font:700 0.8125rem var(--font-mono); white-space:nowrap; }
.fantasy-board-line small { color:var(--muted); font:inherit; }
.fantasy-board-side { margin-right:-0.25rem; font:600 0.6875rem var(--font-body); opacity:0.78; }
.fantasy-page .fantasy-board-note { font-size:0.75rem; }

/* Every other view: the kit's cards, tables and controls. */
.fantasy-page .team-card { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; }
.fantasy-page .team-card h3 { font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em; }
.fantasy-page .team-card > h3, .fantasy-page .fantasy-standings-head h3 { font-size:1.25rem; }
.fantasy-page .team-table thead th { color:var(--muted); font-family:var(--font-mono); font-weight:700; letter-spacing:0.08em; }
.fantasy-page .team-table th, .fantasy-page .team-table td { border-bottom-color:var(--surface-raised); }
.fantasy-page .team-table tr.is-current { background:var(--surface-raised); box-shadow:none; }
.fantasy-page .fantasy-row-link:hover { background:var(--surface-raised); }
.fantasy-page .fantasy-code { height:1.375rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:700 0.6875rem var(--font-mono); }
.fantasy-page .fantasy-code.is-mine { border-color:var(--edge); background:var(--green); color:var(--accent-ink); }
.fantasy-page .fantasy-seed { border-width:2px; font-family:var(--font-mono); }
.fantasy-page .fantasy-seed.is-leader { border-color:var(--edge); color:var(--accent-ink); }
.fantasy-page .fantasy-playoff-line span, .fantasy-page .fantasy-week-break { font-family:var(--font-mono); }
.fantasy-page .fantasy-move.is-mine { background:var(--surface-raised); box-shadow:none; }
.fantasy-page .ar-seg button { white-space:nowrap; }
.fantasy-page .fantasy-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem 1rem; }
.fantasy-page .fantasy-tool-title { font:800 1.375rem var(--font-display); letter-spacing:-0.02em; }
.fantasy-page .fantasy-advice:not(.fantasy-call) { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); box-shadow:none; }
.fantasy-page :is(.fantasy-tool-card, .fantasy-connect) select, .fantasy-page .fantasy-connect-form input { min-height:2.5rem; padding:0 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:600 0.875rem var(--font-body); }
.fantasy-page .fantasy-side-add { border:1px solid var(--line); background:var(--surface-raised); box-shadow:none; }
/* Pressed = picked (the + became a check; the player is on the compare board), so it keeps
   the filled accent like .ar-price's picked state, not the --selected-bg selected state. */
.fantasy-page .fantasy-side-add[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); }
.fantasy-page .fantasy-side-row.is-picked { background:var(--surface-raised); box-shadow:none; }
.fantasy-page .fantasy-side-league[aria-pressed=true] { border:1px solid var(--line); background:var(--surface-raised); box-shadow:none; }
.fantasy-page .fantasy-compare-num { border:1px solid var(--line); background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); }
.fantasy-page .fantasy-drop-slot { border:2px dashed var(--line); background:transparent; box-shadow:none; }
.fantasy-page :is(.fantasy-offer, .fantasy-trade-result) { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface-raised); box-shadow:none; }
.fantasy-page .fantasy-trade-result.is-winwin { box-shadow:none; }
.fantasy-page .fantasy-grade { border-width:2px; border-radius:var(--r-control); }
.fantasy-page .fantasy-trade-table tr.is-picked td { background:var(--surface-raised); }

/* The connect card: a step tag, a big title, the platform as chips, then the field. */
.fantasy-page .fantasy-connect { max-width:40rem; gap:1rem; padding:1.5rem; border-radius:var(--r-card); box-shadow:none; }
.fantasy-connect-head { display:grid; gap:0.5rem; }
.fantasy-connect-head .fantasy-call-tag { justify-self:start; }
.fantasy-connect-head h2 { margin:0; font:800 1.875rem/1.05 var(--font-display); letter-spacing:-0.03em; }
.fantasy-connect-head p { margin:0; color:var(--muted); font-size:0.9375rem; }
.fantasy-page .fantasy-platforms { justify-self:start; }
.fantasy-page .fantasy-platforms button { height:2.25rem; padding:0 1.125rem; font-size:0.875rem; }
.fantasy-page .fantasy-connect-row .usage-field { display:grid; gap:0.375rem; color:var(--muted); font-size:0.8125rem; font-weight:700; }
.fantasy-page .fantasy-connect-form input { min-height:2.75rem; width:100%; box-sizing:border-box; }
/* UI-432: the card's column, the field and its input may shrink below the input's built-in
   width, so at the browser's real 200% text the card's contents stay inside a 360 phone. */
.fantasy-page :is(.fantasy-connect, .fantasy-connect-form) { grid-template-columns:minmax(0, 1fr); }
.fantasy-page .fantasy-connect-row .usage-field, .fantasy-page .fantasy-connect-form input { min-width:0; }
.fantasy-page .fantasy-connect-row > button { max-width:100%; white-space:normal; text-align:center; }
.fantasy-page .fantasy-found { gap:0.5rem; }
.fantasy-page .fantasy-found .fantasy-found-item { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.75rem; width:100%; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-page .fantasy-found .fantasy-found-item:hover { border-color:var(--accent); }
.fantasy-page .fantasy-found .fantasy-found-item small { font:400 0.75rem var(--font-mono); }
.fantasy-found-wrap { display:grid; gap:0.5rem; }
.fantasy-found-wrap .ar-label { margin:0; }
.fantasy-page .fantasy-private[open] { border:2px solid var(--line); border-radius:var(--r-card); }
.fantasy-page .fantasy-readonly { margin:0; }

@media (max-width:75em) {
  .fantasy-matchup-grid { grid-template-columns:minmax(0, 1fr); }
  .fantasy-matchup-rail { grid-template-columns:repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items:start; }
}
@media (max-width:40em) {
  .fantasy-title { font-size:1.75rem; }
  .fantasy-page .fantasy-switch { max-width:100%; }
  .fantasy-you { justify-content:flex-start; }
  .fantasy-page .fantasy-nav.ar-seg { gap:0.375rem; }
  .fantasy-page .fantasy-nav.ar-seg button { padding:0 0.75rem; font-size:0.8125rem; }
  .fantasy-page .fantasy-scorebox { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); padding:0.875rem; gap:0.75rem; }
  .fantasy-page .fantasy-game-vs { display:none; }
  .fantasy-page .fantasy-game-team, .fantasy-page .fantasy-game-team.is-right { flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .fantasy-page .fantasy-game-team.is-right { align-items:flex-end; text-align:right; }
  .fantasy-page .fantasy-game-team .fantasy-game-num { margin:0; justify-items:start; }
  .fantasy-page .fantasy-game-team.is-right .fantasy-game-num { justify-items:end; }
  .fantasy-page .fantasy-game-num b { font-size:2rem; }
  .fantasy-page .fantasy-game-team h3 { font-size:1.0625rem; }
  .fantasy-game-badge { width:2.5rem; height:2.5rem; border-radius:var(--r-data); font-size:0.75rem; }
  .fantasy-page .fantasy-versus th, .fantasy-page .fantasy-versus td { padding:0.375rem 0.25rem; }
  .fantasy-page .fantasy-versus .team-player-name { font-size:0.8125rem; }
  .fantasy-page .fantasy-versus .fantasy-tag { display:none; }
  .fantasy-page .fantasy-connect { padding:1rem; }
}
/* A fantasy team's header: picture, name and facts in one row (teams.css's hero stacks its own parts). */
.fantasy-page .fantasy-team-hero { grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.75rem 1.5rem; margin-bottom:0; }
.fantasy-page .fantasy-team-hero.is-mine { border-color:var(--edge); box-shadow:none; }
.fantasy-page .fantasy-team-hero .team-hero-copy { gap:0.375rem; }
.fantasy-page .fantasy-hero-code { border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; font-family:var(--font-mono); }
.fantasy-page .fantasy-team-hero.is-mine .fantasy-hero-code { background:var(--green); color:var(--accent-ink); }
.fantasy-page .fantasy-team-hero .fantasy-photo.is-big { border:1px solid var(--line); box-shadow:none; }
.fantasy-page .fantasy-team-hero .team-hero-facts { color:var(--muted); font-size:0.875rem; }
@media (max-width:40em) { .fantasy-page .fantasy-team-hero { grid-template-columns:auto minmax(0, 1fr); } .fantasy-page .fantasy-team-hero .team-hero-tools { grid-column:1 / -1; } .fantasy-page .fantasy-team-hero h2 { font-size:2rem; } }
/* UI-551: on a phone the picture and the name share a row while the name has room (9em); at
   320 with 200% text the picture takes up the row, so the name and facts go underneath. */
@media (max-width:40em) {
  .fantasy-page .fantasy-team-hero { display:flex; flex-wrap:wrap; }
  .fantasy-page .fantasy-team-hero .team-hero-logo { flex:none; }
  .fantasy-page .fantasy-team-hero .team-hero-copy { flex:1 1 9em; min-width:0; }
  .fantasy-page .fantasy-team-hero .team-hero-tools { flex:1 1 100%; }
  .fantasy-page .fantasy-team-hero h2 { overflow-wrap:anywhere; }
  .fantasy-page .fantasy-team-hero .team-hero-tools .pd-button { max-width:100%; white-space:normal; }
}
/* The strip's screen-reader notes stay inside their card (and so inside the strip's scroll). */
.fantasy-page .fantasy-strip-card { position:relative; }
/* Segmented choices wrap on a phone rather than spill. */
.fantasy-page .ar-seg { flex-wrap:wrap; max-width:100%; box-sizing:border-box; }
.fantasy-page :is(.fantasy-finder-settings, .fantasy-tool-head) > * { max-width:100%; min-width:0; }
.fantasy-page .fantasy-tool-head > div { min-width:0; }
/* The nav takes the row's spare width, so a menu under a right-hand tab has room to hang. */
.fantasy-nav-row > .fantasy-nav-wrap { flex:1 1 auto; }

/* ------------------------------------------------------------------------------------
   Proposed site (v3), PS-12: Your week (the landing page), and the other views brought to
   the v3 vocabulary. Colour means performance (--good / --bad / --thin, always with a glyph
   or word); blue only for actions. Motion from arcade.css's tokens.
   ------------------------------------------------------------------------------------ */
/* NFL teams by logo and code. */
.fantasy-nfl { display:inline-flex; align-items:center; gap:0.1875rem; white-space:nowrap; }
.fantasy-nfl .fantasy-nfl-logo.team-logo-badge { width:1.125rem; height:1.125rem; }
.fantasy-nfl .fantasy-nfl-logo .team-abbreviation { display:none; }
/* A logo alone (UI-536) sits in a text line: no taller than the line, so rows keep their height. */
.fantasy-nfl.is-logo { line-height:1; vertical-align:middle; }
.fantasy-side-meta .fantasy-nfl.is-logo { margin-block:-0.0625rem; }
.fantasy-side-meta .fantasy-nfl.is-logo .fantasy-nfl-logo.team-logo-badge { width:0.875rem; height:0.875rem; }
.fantasy-page .usage-player-meta { flex-wrap:wrap; row-gap:0.1875rem; }
.fantasy-page .usage-player-meta .ar-mu { height:1.25rem; font-size:0.625rem; }
/* Its journey button (UI-565) keeps to the chip: the kit's taller tap area would cover the
   line above when the meta wraps (the RB4 chip). */
.fantasy-page .usage-player-meta .ar-mu-open { margin-block:0; padding-block:0; }
/* The panel rises in only when the view changes, never on a re-sort or toggle. */
.fantasy-page .fantasy-body:not([hidden]) { animation:none; }
.fantasy-page .fantasy-body:not([hidden]).is-entering { animation:ar-rise var(--dur-base) var(--ease-out); }
/* The nav's pill glides to the new tab (studio-fantasy.js glidePill). */
.fantasy-nav-wrap { position:relative; }
.fantasy-nav-glide { position:absolute; z-index:3; border:1px solid var(--line); border-radius:var(--r-control); box-sizing:border-box; background:var(--selected-bg); border-color:var(--accent); pointer-events:none; transform-origin:left center; }
/* The matchup: Your week's colours. Your side of the bar is green when you're ahead
   (projected or scored), red when behind; them, and games you're not in, neutral. */
.fantasy-page .fantasy-game-bar { background:var(--surface-strong); }
.fantasy-page .fantasy-game-bar > span { background:var(--surface-raised); }
.fantasy-page .fantasy-game-bar.is-good:not(.is-mine-right) > span, .fantasy-page .fantasy-game-bar.is-mine-right.is-good { background:var(--good); }
.fantasy-page .fantasy-game-bar.is-bad:not(.is-mine-right) > span, .fantasy-page .fantasy-game-bar.is-mine-right.is-bad { background:var(--bad); }
.fantasy-page .fantasy-game-team:not(.is-right) .fantasy-game-num b { color:var(--ink); }
.fantasy-page .fantasy-game-num.is-ahead b { color:var(--good); text-decoration:none; }
.fantasy-page .fantasy-game-num.is-ahead b::before { content:"▲ "; font-size:0.5em; vertical-align:middle; }
.fantasy-page .fantasy-strip-card[aria-pressed=true], .fantasy-page .fantasy-strip-card[aria-current=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
.fantasy-page .fantasy-strip-team.is-ahead .fantasy-strip-score b { color:var(--good); }
.fantasy-page .fantasy-strip-card:is([aria-pressed=true], [aria-current=true]) .fantasy-strip-team.is-ahead .fantasy-strip-score b { color:var(--good); text-decoration:none; }
.fantasy-page .fantasy-strip-card:is([aria-pressed=true], [aria-current=true]) .fantasy-strip-team.is-ahead .fantasy-strip-score b::before { content:"▲ "; font-size:0.7em; }
/* Your team's line (UI-707): a green box, the green that marks yours on the team codes and
   photos, on the line rather than the card, so it shows whether or not the card is the selected
   one (accent border, --selected-bg). It reaches the card's padding without moving the names. */
.fantasy-page .fantasy-strip-team.is-mine { margin:-0.1875rem -0.5rem; padding:0.1875rem 0.5rem; border-radius:var(--r-data); background:color-mix(in srgb, var(--green) 10%, transparent); box-shadow:inset 0 0 0 1px var(--green); }
.fantasy-page .fantasy-table td.is-over-1 { background:color-mix(in srgb, var(--good) 14%, transparent); }
.fantasy-page .fantasy-table td.is-over-2 { background:color-mix(in srgb, var(--good) 28%, transparent); }
.fantasy-page .fantasy-table td.is-over-3 { background:color-mix(in srgb, var(--good) 45%, transparent); }
.fantasy-page .fantasy-table td.is-under-1 { background:color-mix(in srgb, var(--bad) 14%, transparent); }
.fantasy-page .fantasy-table td.is-under-2 { background:color-mix(in srgb, var(--bad) 28%, transparent); }
.fantasy-page .fantasy-table td.is-under-3 { background:color-mix(in srgb, var(--bad) 42%, transparent); }
/* The phone Matchup hides the M/U chip, and its journey button (UI-565) with it: no empty tab stop. */
@media (max-width:60em) { .fantasy-page .fantasy-versus .ar-mu, .fantasy-page .fantasy-versus .ar-mu-open { display:none; } }
/* Start/Sit: the top two's signals, counted. */
.fantasy-ss-consensus { display:flex; align-items:center; gap:0.75rem; margin:0 0 0.875rem; padding:0.625rem 0.875rem; border:2px solid var(--line); border-radius:var(--r-card); background:var(--surface); font-size:0.875rem; line-height:1.45; }
.fantasy-ss-consensus > span:last-child { min-width:0; overflow-wrap:anywhere; }
.fantasy-ss-consensus small { color:var(--muted); }

/* ---- Your week ---- */
/* The page names the week and the projections itself. */
.fantasy-page:has(.fw-page) .fantasy-you-note { display:none; }
.fw-page { display:grid; gap:1.125rem; }
.fw-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:0.625rem 1.5rem; }
.fw-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 1rem; }
.fw-head h2 { margin:0; font:800 2.25rem/1 var(--font-display); letter-spacing:-0.03em; }
.fw-sub { margin:0; color:var(--muted); font-size:0.9375rem; }
.fw-sub time { color:var(--ink); font:700 0.875rem var(--font-mono); }
/* "· Sleeper projections 12:00 PM" moves to its own line whole, and wraps inside only when
   even a line of its own is too narrow (320 with 200% text, UI-408). */
.fw-sub .fantasy-nw { display:inline-block; max-width:100%; white-space:normal; }
/* Two columns on a desktop; one column on a phone, ordered by the day. */
.fw-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(22rem, 30rem); gap:1.25rem; align-items:start; }
.fw-col { display:grid; gap:1.25rem; min-width:0; align-content:start; }
@media (max-width:64em) {
  /* Every card the full width (the desktop grid's align-items:start would shrink them). */
  .fw-grid { display:flex; flex-direction:column; align-items:stretch; }
  .fw-col { display:contents; }
  .fw-part { order:var(--order); min-width:0; }
}
.fw-card { display:grid; gap:0.875rem; padding:1.25rem 1.375rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; min-width:0; }
.fw-card h3 { margin:0; font:800 1.375rem/1.15 var(--font-display); letter-spacing:-0.02em; }
.fw-card h3 small { color:var(--muted); font:500 0.875rem var(--font-body); letter-spacing:0; }
.fw-card h3 small b { color:var(--ink); font:700 0.875rem var(--font-mono); }
.fw-card-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.5rem 1rem; }
.fw-note { color:var(--muted); font-size:0.75rem; }
.fw-kicker { margin:0; color:var(--muted); font-size:0.875rem; font-weight:600; }
.fw-sentence { margin:0; font-size:0.9375rem; line-height:1.55; }
.fw-sentence :is(.team-player-name, .profile-name-button) { color:var(--ink); font-weight:800; }
.fw-good { color:var(--good); } .fw-bad { color:var(--bad); } .fw-thin { color:var(--thin); }
.fw-link { padding:0; border:0; background:none; color:var(--ink); font:700 0.875rem var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.fw-link:hover { color:var(--accent); }
.fw-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.625rem 1rem; }
.fw-actions small { color:var(--muted); font-size:0.8125rem; }
.fw-actions .ar-btn { min-height:2.5rem; }
/* Next week's prep, in place of a locked lineup's decision (UI-398); Matchup's rail too. */
.fw-next-list { display:grid; grid-template-columns:minmax(5.5rem, max-content) minmax(0, 1fr); gap:0.375rem 0.75rem; margin:0; font-size:0.9375rem; line-height:1.45; }
/* One label column for every row, so the values line up ("Waivers clear" is the longest label, UI-409). */
.fw-next-list > div { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; }
.fw-next-list dt { color:var(--muted); font-weight:600; }
.fw-next-list dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.fw-next-list :is(.team-player-name, .profile-name-button) { color:var(--ink); font-weight:700; }
.fantasy-next .fw-next-list { font-size:0.875rem; }
/* 1. Status: the result in words, then the bar. */
.fw-card h3.fw-headline { font-size:clamp(1.75rem, 3.2vw, 2.625rem); line-height:1.05; }
.fw-count { font-family:var(--font-mono); font-weight:700; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; }
.fw-count.is-good { color:var(--good); } .fw-count.is-bad { color:var(--bad); }
.fw-dash { font-family:var(--font-mono); }
/* Live: the projection under the score (points so far plus still to play). */
.fw-proj { margin:-0.25rem 0 0; color:var(--muted); font-size:0.9375rem; font-weight:600; }
.fw-proj b { color:var(--ink); font:700 0.9375rem var(--font-mono); font-variant-numeric:tabular-nums; }
.fw-bar { position:relative; height:1.125rem; overflow:hidden; border:1px solid var(--line); border-radius:0; background:var(--surface-strong); }
.fw-bar-me { position:absolute; inset:0 auto 0 0; width:var(--w); border-right:1px solid var(--line); background:var(--surface-raised); transform-origin:left; }
.fw-bar.is-good .fw-bar-me { background:var(--good); }
.fw-bar.is-bad .fw-bar-me { background:var(--bad); }
.fw-bar-legend { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.25rem 1rem; font-size:0.875rem; font-weight:700; }
.fw-bar-legend b { font-family:var(--font-mono); }
.fw-bar-legend :is(.fw-bar-you, .fw-bar-them) { display:inline-flex; align-items:center; gap:0.375rem; }
.fw-bar-them { color:var(--muted); }
/* The legend takes the bar's tone (while live the bar is the live projection, UI-354). */
.fw-bar.is-good + .fw-bar-legend .fw-bar-you b { color:var(--good); } .fw-bar.is-bad + .fw-bar-legend .fw-bar-you b { color:var(--bad); }
.fw-bar-legend .fw-dot { background:var(--muted); }
.fw-bar.is-good + .fw-bar-legend .fw-bar-you .fw-dot { background:var(--good); } .fw-bar.is-bad + .fw-bar-legend .fw-bar-you .fw-dot { background:var(--bad); }
/* Status dots: always a word beside the colour. */
.fw-status { display:inline-flex; align-items:center; gap:0.375rem; font-size:0.8125rem; font-weight:700; white-space:nowrap; }
.fw-dot { width:0.5rem; height:0.5rem; flex:0 0 auto; border-radius:50%; background:var(--good); }
.fw-status.is-q { color:var(--thin); } .fw-status.is-q .fw-dot { background:var(--thin); }
.fw-status.is-out { color:var(--bad); } .fw-status.is-out .fw-dot { background:var(--bad); }
/* After kickoff (UI-388): his game is live, or over (Final, Likely final). */
.fw-status.is-live { color:var(--accent); } .fw-status.is-live .fw-dot { background:var(--accent); }
.fw-status:is(.is-final, .is-over) { color:var(--muted); } .fw-status:is(.is-final, .is-over) .fw-dot { background:var(--muted); }
/* To play (UI-383): his projection, dimmed until his game starts. */
.fw-row-num.is-pending b { color:var(--muted); font-weight:500; }
/* 2. The decision: the two players side by side, then the call as a sentence. */
.fw-decision-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 0.75rem; }
.fw-decision-head h3 { font-size:1.5rem; }
/* 2, a finished week: the lineup in hindsight, its moves as a short list. */
.fw-moves { display:grid; gap:0.375rem; margin:0; padding:0; list-style:none; font-size:0.9375rem; line-height:1.5; }
.fw-moves li { position:relative; padding-left:1rem; }
.fw-moves li::before { content:""; position:absolute; left:0; top:0.6em; width:0.4375rem; height:0.4375rem; border-radius:var(--r-data); background:var(--good); }
.fw-moves :is(.team-player-name, .profile-name-button) { color:var(--ink); font-weight:800; }
.fw-gain { padding:0.25rem 0.625rem; border:2px solid var(--good); border-radius:var(--r-data); color:var(--good); font:700 0.8125rem var(--font-mono); white-space:nowrap; }
.fw-rings { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:0.5rem; }
.fw-vs { color:var(--muted); font:700 0.75rem var(--font-mono); }
.fw-side { display:grid; justify-items:center; gap:0.25rem; min-width:0; text-align:center; }
.fw-side-name { margin:0.25rem 0 0; font-weight:800; }
.fw-side-name :is(.team-player-name, .profile-name-button) { font:800 1rem var(--font-body); color:var(--ink); }
.fw-side-meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0.25rem 0.5rem; margin:0; color:var(--muted); font-size:0.8125rem; }
.fw-side-meta b { color:var(--ink); font-family:var(--font-mono); }
/* 3. Trending adds. */
.fw-trend-list { display:grid; margin:0; padding:0; list-style:none; }
.fw-trend-row { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:0.75rem; padding:0.625rem 0; border-top:1px solid var(--line); }
.fw-trend-row .player-avatar { position:relative; display:grid; place-items:center; width:2.5rem; height:2.5rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--muted); font:700 0.75rem var(--font-mono); box-sizing:border-box; }
.fw-trend-row .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fw-trend-row .fantasy-def-logo .team-mini-badge { width:1.75rem; height:1.75rem; margin:0; }
.fw-trend-who { display:grid; gap:0.125rem; min-width:0; }
.fw-trend-who > :first-child { justify-self:start; font:800 1rem var(--font-body); color:var(--ink); }
.fw-trend-who small { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.75rem; }
.fw-trend-num { display:grid; justify-items:end; }
.fw-trend-num b { color:var(--good); font:700 0.9375rem var(--font-mono); }
.fw-trend-num small { color:var(--muted); font-size:0.6875rem; }
.fw-spark path { fill:none; stroke:var(--good); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; }
.fw-spark circle { fill:var(--good); }
.fw-spark-empty { width:0; }
.fw-trending.is-drawing .fw-spark path { animation:fw-draw 380ms var(--ease-out) both; animation-delay:calc(var(--i, 0) * 40ms); }
.fw-trending.is-drawing .fw-spark circle { animation:fw-fade var(--dur-fast) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 40ms + 340ms); }
@keyframes fw-draw { from { stroke-dashoffset:1; } }
@keyframes fw-fade { from { opacity:0; } }
/* 4. Starters. */
.fw-legend { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.5rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
.fw-legend .fw-status { font-size:0.75rem; }
.fw-legend .fw-status.is-ok { color:var(--muted); }
.fw-rows { display:grid; margin:0; padding:0; list-style:none; }
.fw-row { border-top:1px solid var(--line); }
.fw-row.is-open { margin:0.25rem -0.5rem; padding:0 0.5rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface-subtle); }
.fw-row.is-open + .fw-row { border-top:0; }
.fw-row-head { display:grid; grid-template-columns:3.25rem minmax(0, 1fr) 8.5rem 8rem 4.25rem 1.75rem; align-items:center; gap:0.625rem; min-height:3.125rem; cursor:pointer; }
.fw-row.is-empty .fw-row-head { cursor:default; }
.fw-slot { justify-self:start; min-width:2.5rem; padding:0.1875rem 0.375rem; box-sizing:border-box; background:none; border:2px solid var(--line); border-radius:var(--r-control); color:var(--muted); font:700 0.6875rem var(--font-mono); text-align:center; }
/* An NBA player's box line under his game line ("14 PTS 9 REB 7 AST"): numbers in the data face,
   each stat kept whole, wrapping between stats. Live: the numbers take the live colour. */
.fw-box { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:0 0.4375rem; color:var(--muted); font-size:0.75rem; line-height:1.35; }
.fw-box-stat { white-space:nowrap; font-size:0.6875rem; font-weight:700; letter-spacing:0.02em; }
.fw-box-stat b { color:var(--ink); font:700 0.8125rem var(--font-mono); letter-spacing:0; }
.fw-box.is-live .fw-box-stat b { color:var(--accent); }
.fw-box-when { font-weight:700; }
.fw-box.is-none { font-size:0.75rem; }
.fw-row-head > .fw-row-box { grid-column:2 / -2; grid-row:2; margin:-0.25rem 0 0.5rem; padding-left:2.625rem; }
.fantasy-player .usage-player-copy > .fw-box { display:flex; margin-top:0.125rem; }
.fw-lock { padding:0 0.3125rem; border:1px solid var(--line); border-radius:var(--r-data); color:var(--muted); font:700 0.625rem var(--font-body); font-style:normal; white-space:nowrap; }
.fw-lock.is-locked { border-color:var(--accent); color:var(--accent); }
/* The week's games in the Why and the player sheet: date and opponent, box line, points. */
.fw-log { display:grid; gap:0; margin:0.375rem 0 0; padding:0; list-style:none; }
.fw-facts .fw-log li { padding-left:0; }
.fw-why .fw-facts .fw-log li.fw-log-game { animation:none; }
.fw-facts .fw-log li::before { content:none; }
.fw-log-game { display:grid; grid-template-columns:7.5rem minmax(0, 1fr) auto; align-items:baseline; gap:0.25rem 0.75rem; padding:0.375rem 0; border-top:1px solid var(--line); }
.fw-log-game:first-child { border-top:0; }
.fw-log-when { color:var(--muted); font-size:0.8125rem; font-weight:700; white-space:nowrap; }
.fw-log-pts { display:inline-flex; align-items:baseline; justify-content:end; gap:0.375rem; }
.fw-log-pts b { font:700 0.875rem var(--font-mono); }
.fw-log-none { color:var(--muted); }
.fantasy-pf-log .fw-log { margin-top:0.25rem; }
@media (max-width:40em) {
  .fw-log-game { grid-template-columns:minmax(0, 1fr) auto; }
  .fw-log-game > .fw-box { grid-column:1 / -1; grid-row:2; }
  .fw-row-head > .fw-row-box { grid-column:2 / -1; grid-row:3; margin-top:-0.125rem; padding-left:0; }
}
/* Matchup's phone cells are narrow: points, rebounds and assists only there (the Why has the rest). */
@media (max-width:36em) {
  .fantasy-versus .fw-box :is(.is-extra, .fw-box-when) { display:none; }
  .fantasy-page .fantasy-versus .fantasy-player .usage-player-copy > .fw-box { grid-column:1 / -1; }
}
.fw-row-who { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.125rem 0.625rem; min-width:0; }
.fw-row-who > :first-child { font:800 1rem var(--font-body); color:var(--ink); }
.fw-game { display:inline-flex; flex-wrap:wrap; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.8125rem; }
.fw-row-mu { justify-self:end; }
.fw-row-num { display:grid; justify-items:end; }
.fw-row-num b { font:700 1rem var(--font-mono); }
.fw-row-num small { color:var(--muted); font:400 0.6875rem var(--font-mono); }
/* A finished week's points against the projection (the Matchup tints): half as much again
   or more is green, 60% or less red; the projection under it says by how much. */
.fw-scored:is(.is-over-2, .is-over-3) { color:var(--good); }
.fw-scored:is(.is-under-2, .is-under-3) { color:var(--bad); }
.fw-toggle { display:grid; place-items:center; width:1.75rem; height:1.75rem; padding:0; border:0; border-radius:var(--r-control); background:none; color:var(--muted); cursor:pointer; }
.fw-toggle svg { transition:transform var(--dur-base) var(--ease-out); }
.fw-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.fw-toggle:hover { background:var(--surface-raised); color:var(--ink); }
.fw-facts { display:grid; gap:0.4375rem; margin:0; padding:0.25rem 0 0.75rem 3.875rem; list-style:none; font-size:0.875rem; line-height:1.5; }
.fw-facts li { position:relative; padding-left:1rem; }
.fw-facts li::before { content:""; position:absolute; left:0; top:0.55em; width:0.4375rem; height:0.4375rem; border-radius:var(--r-data); background:var(--muted); }
.fw-facts li.is-status::before { background:var(--thin); }
.fw-facts li.is-matchup::before { background:var(--line); }
.fw-facts li.is-bench::before { background:var(--good); }
.fw-why.is-open .fw-facts li { animation:ar-rise var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 40ms * var(--move)); }
.fw-band.is-soft { color:var(--good); } .fw-band.is-tough { color:var(--bad); } .fw-band.is-neutral { color:var(--muted); }
.fw-why-links { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem; margin:0; padding:0 0 0.875rem 3.875rem; }
.fw-why-links .ar-btn { min-height:2.25rem; font-size:0.875rem; }
.fw-bench { border-top:2px solid var(--line); }
.fw-bench-head { display:grid; grid-template-columns:3.25rem minmax(0, 1fr) auto; align-items:center; gap:0.625rem; min-height:3rem; }
.fw-bench-head p { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.375rem; margin:0; color:var(--muted); font-size:0.875rem; }
.fw-bench-head p b { color:var(--ink); font-family:var(--font-mono); }
.fw-bench-head p .fw-status { white-space:normal; align-items:baseline; } .fw-bench-head p .fw-status .fw-dot { align-self:center; }
.fw-bench-head p :is(.team-player-name, .profile-name-button) { color:var(--ink); font-weight:700; }
.fw-lineup-toggle { justify-self:start; }
.fw-last { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; margin:0; padding:0.875rem 1.125rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; font-weight:700; }
.fw-last > span:first-child { font-weight:900; }
.fw-last.is-good { border-color:var(--good); background:var(--good-bg); } .fw-last.is-good > span:first-child { color:var(--good); }
.fw-last.is-bad { border-color:var(--bad); background:var(--bad-bg); } .fw-last.is-bad > span:first-child { color:var(--bad); }
.fw-last b { font-family:var(--font-mono); }
.fw-last .fw-link { margin-left:auto; }
/* Motion: the bar fills once (600ms), with the count-ups. */
.fw-page.is-arriving .fw-bar-me { animation:fw-fill var(--dur-hero) var(--ease-out) both; }
@keyframes fw-fill { from { transform:scaleX(calc(1 - var(--move))); } }
@media (prefers-reduced-motion: reduce) {
  .fw-page.is-arriving .fw-bar-me, .fw-trending.is-drawing .fw-spark :is(path, circle), .fw-why.is-open .fw-facts li { animation:none; }
  .fw-toggle svg { transition:none; }
}
@media (max-width:75em) {
  .fw-row-head { grid-template-columns:3rem minmax(0, 1fr) auto 4rem 1.75rem; }
  .fw-row-head .fw-status { display:none; }
  .fw-row-head:has(.fw-status.is-q) .fw-row-who > :first-child::after { content:" • Q"; color:var(--thin); font-size:0.75rem; }
  .fw-row-head:has(.fw-status.is-out) .fw-row-who > :first-child::after { content:" • Out"; color:var(--bad); font-size:0.75rem; }
}
@media (max-width:40em) {
  .fw-head h2 { font-size:1.875rem; }
  .fw-card { padding:1rem; border-radius:var(--r-card); }
  .fw-row-head { grid-template-columns:2.75rem minmax(0, 1fr) 3.5rem 1.5rem; gap:0.5rem; }
  .fw-row-mu { display:none; }
  .fw-facts, .fw-why-links { padding-left:0.25rem; }
  .fw-trend-row { grid-template-columns:auto minmax(0, 1fr) auto; }
  .fw-trend-row .fw-spark, .fw-trend-row .fw-spark-empty { grid-column:2; grid-row:2; }
  .fw-bench-head { grid-template-columns:minmax(0, 1fr) auto; }
  .fw-bench-head .fw-slot { display:none; }
}
/* Large text (UI-408): the page is a container measured in its own text size, so this only
   applies when it holds under 14em (200% text on a phone), never at the default size. The
   page can't be widened by its cards (the container takes the column's width), and the
   cards fit inside it: slimmer padding, the two players stacked, a starter's name on a line
   of its own under the slot, points and toggle, and Show bench under the bench line. */
.fw-page { container-type:inline-size; grid-template-columns:minmax(0, 1fr); }
@container (max-width:14em) {
  .fw-card { padding:0.875rem 0.75rem; }
  .fw-rings { grid-template-columns:minmax(0, 1fr); justify-items:center; }
  .fw-row-head { grid-template-columns:auto minmax(0, 1fr) auto auto; gap:0.25rem 0.5rem; padding:0.375rem 0; }
  .fw-row-head > .fw-row-person { grid-column:1 / -1; grid-row:2; }
  .fw-row-head > .fw-row-num { grid-column:3; grid-row:1; }
  .fw-row-head > .fw-toggle { grid-column:4; grid-row:1; }
  .fw-row-head > .fw-row-box { grid-column:1 / -1; grid-row:4; padding-left:0; }
  .fw-bench-head { grid-template-columns:minmax(0, 1fr); padding:0.5rem 0; }
}

/* The not-connected landing: the form, and beside it what a synced league gives you. */
.fantasy-connect-page { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:1.25rem; align-items:stretch; }
.fantasy-page .fantasy-connect-page .fantasy-connect { max-width:none; align-content:start; }
.fantasy-page .fantasy-connect-preview { display:grid; align-content:start; gap:1rem; padding:1.5rem; border-radius:var(--r-card); }
.fantasy-connect-preview .fw-kicker { margin:0; }
.fantasy-connect-perks { display:grid; gap:1rem; margin:0; padding:0; list-style:none; }
.fantasy-connect-perks li { display:grid; grid-template-columns:2.25rem minmax(0, 1fr); gap:0.875rem; align-items:start; }
.fantasy-connect-perks b { display:block; font:800 1.125rem/1.2 var(--font-display); letter-spacing:-0.01em; }
.fantasy-connect-perks p { margin:0.25rem 0 0; color:var(--muted); font-size:0.875rem; line-height:1.45; }
.fantasy-perk-num { display:grid; place-items:center; width:2.25rem; height:2.25rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--accent); color:var(--accent-ink); box-shadow:none; font:700 0.9375rem var(--font-mono); box-sizing:border-box; }
@media (max-width:56em) { .fantasy-connect-page { grid-template-columns:minmax(0, 1fr); } .fantasy-page .fantasy-connect-preview { padding:1rem; } }
/* Which team is yours: the whole width, several teams a row. */
.fantasy-page .fantasy-pick-team { max-width:none; }
.fantasy-pick-team > p { margin:0; }
.fantasy-page .fantasy-team-choices { grid-template-columns:repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.fantasy-page .fantasy-team-choices button { min-height:3rem; font-size:0.9375rem; }
/* The trade tools' method, folded under its summary. */
.fantasy-method { margin-top:0.75rem; }
.fantasy-method summary { color:var(--muted); font-size:0.8125rem; font-weight:700; cursor:pointer; }
.fantasy-method[open] summary { margin-bottom:0.375rem; }
/* Top waiver: his photo, as the other player rows show. */
.fantasy-waiver-main > .player-avatar { position:relative; display:grid; place-items:center; flex:none; width:2.5rem; height:2.5rem; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); box-sizing:border-box; }
.fantasy-waiver-main > .player-avatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fantasy-waiver-main .fantasy-def-logo .team-mini-badge { width:1.75rem; height:1.75rem; margin:0; }
/* League home: the standings stay in view beside a long transactions list. */
@media (min-width:60.01em) { .fantasy-home-grid > .fantasy-standings { position:sticky; top:5rem; } }
/* Phones: the head-to-head box score keeps small photos (fantasy-table's) and wraps its headers so both lineups fit. */
@media (max-width:36em) {
  /* The team names over the columns wrap (unwrapped, a long one set the table's width). */
  .fantasy-page .fantasy-versus thead th { height:auto; padding:0.375rem 0.25rem; white-space:normal; overflow-wrap:anywhere; letter-spacing:0.02em; }
  .fantasy-page .fantasy-versus td.fantasy-score { width:3rem; padding-inline:0.125rem; }
  .fantasy-page .fantasy-versus .fantasy-slot { width:2.25rem; }
  .fantasy-page .fantasy-versus .fantasy-proj { white-space:nowrap; }
  .fantasy-page .fp-versus .fantasy-versus-total td.fantasy-score b { font-size:1.0625rem; }
}

/* ---- The top bar on a phone (UI-R10) ----
   Wide screens show the league actions inline; a phone folds Refresh, the owners toggle and
   Add league into one menu, keeps the week and your team in view, and runs the views along
   one scrolling row, so the content starts on the first screen. (Remove league and Forget
   sign-in are in the menu on the league's chip at every width, UI-703.) */
.fantasy-controls-wide { display:contents; }
.fantasy-page .fantasy-actions { display:none; }
.fantasy-actions > summary { justify-content:center; width:2.75rem; padding:0; cursor:pointer; }
.fantasy-actions > summary svg { fill:currentColor; }
.fantasy-actions .fantasy-actions-menu { left:auto; right:0; min-width:15rem; }
.fantasy-actions-menu .fantasy-owners { padding:0.5rem 0.625rem; white-space:normal; }
@media (max-width:40em) {
  .fantasy-controls-wide { display:none; }
  .fantasy-page .fantasy-actions { display:block; }
  .fantasy-page .fantasy-topbar { gap:0.625rem; }
  /* The week select keeps its full width ("Week 3 (now)"); at a large text size on a small
     phone the options button wraps under it rather than squeezing it to "Week 3 (n" (UI-311). */
  .fantasy-page .fantasy-topbar .fantasy-controls { order:2; margin-left:auto; flex-wrap:wrap; }
  .fantasy-page .fantasy-topbar .fantasy-controls .usage-field { flex:0 0 auto; max-width:100%; }
  /* League chips share the row at a readable width (two a row on a phone, one at large text)
     and wrap onto a second row rather than squeezing a name to "S…" (UI-306). A name takes
     two lines before it's cut; the full name is the chip's title. */
  .fantasy-page .fantasy-topbar .fantasy-switcher { order:3; flex:1 1 100%; flex-wrap:wrap; }
  .fantasy-page .fantasy-switcher .fantasy-add { display:none; }
  /* ...except when the league on screen failed to load: only the error card shows, with no
     League options menu, so Add league stays on the leagues row (UI-590). */
  .fantasy-page .fantasy-topbar:has(~ .fantasy-connect > .fantasy-error) .fantasy-switcher .fantasy-add { display:inline-flex; flex:1 1 8rem; justify-content:center; }
  .fantasy-page .fantasy-switcher .fantasy-switch { flex:1 1 8rem; min-width:0; container-type:inline-size; }
  /* The chip is the row's item now, and its league button fills it (UI-703). */
  .fantasy-page .fantasy-switcher .fantasy-chip { flex:1 1 8rem; min-width:0; max-width:100%; }
  /* A narrow chip (a small phone, a large text size) gives its initials tile's room to the name. */
  @container (max-width:8rem) { .fantasy-page .fantasy-switch-badge { display:none; } }
  .fantasy-page .fantasy-switch b { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; overflow-wrap:break-word; }
  .fantasy-page .fantasy-switch small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* The page's grid track stays the screen's width, so the scrolling nav can't widen it. */
  #fantasy.fantasy-page { grid-template-columns:minmax(0, 1fr); }
  .fantasy-page .fantasy-nav-row { gap:0.625rem; }
  .fantasy-page .fantasy-nav-row > .fantasy-nav-wrap { flex:1 1 100%; min-width:0; }
  /* The gliding pill sits under the chosen tab; when the row scrolls (a large text size) it
     must not stick out past the screen and widen the page (UI-261). */
  .fantasy-page .fantasy-nav-row > .fantasy-nav-wrap { overflow-x:clip; }
  /* position:relative makes the scroller clip its absolutely placed screen-reader text too. */
  .fantasy-page .fantasy-nav.ar-seg { position:relative; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:0.25rem; }
  .fantasy-page .fantasy-nav.ar-seg::-webkit-scrollbar { display:none; }
  .fantasy-page .fantasy-nav.ar-seg button { flex:0 0 auto; }
  .fantasy-you { flex:1 1 100%; min-width:0; }
}

/* UI-28: each side's chance to win (fantasy-tools.js matchupWin), beside its projection. */
.fantasy-win { display:block; color:var(--muted); font-size:0.6875rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.fantasy-page .fantasy-strip-score .fantasy-proj { order:1; }
.fantasy-page .fantasy-strip-score .fantasy-win { min-width:2.25rem; color:inherit; opacity:0.75; font:700 0.625rem var(--font-mono); text-align:right; }
.fantasy-page .fantasy-game-num .fantasy-win { margin-top:0.125rem; color:var(--muted); font:700 0.75rem var(--font-mono); }
/* UI-313: once a game kicks off, each side's starters still to play, under its projection. */
.fantasy-to-play { display:block; color:var(--muted); font-size:0.6875rem; white-space:nowrap; }
.fantasy-page .fantasy-game-num .fantasy-to-play { margin-top:0.125rem; font:400 0.75rem var(--font-mono); }
@media (max-width:40em) { .fantasy-page .fantasy-strip { grid-auto-columns:minmax(14.5rem, 1fr); } }

/* ---- UI-43: phones and the fixes from the 2026-09-30 audit ---- */
/* A part and its leading dot never split ("WR · CLE · chip"; studio-fantasy.js dotted). */
.fantasy-nw { white-space:nowrap; }
/* Waivers by Most added on a phone: the count sits under the player (its column is hidden). */
.fantasy-adds-inline { display:none; }
/* The trade evaluator: a row ticks its player. */
.fantasy-trade-row { cursor:pointer; }
.fantasy-trade-tick label { display:grid; place-items:center; min-width:2.5rem; min-height:2.5rem; margin:-0.25rem 0; cursor:pointer; }
.fantasy-trade-tick input { width:1.125rem; height:1.125rem; margin:0; cursor:pointer; }
.fantasy-page .fantasy-trade-table td.fantasy-trade-tick { width:2.5rem; padding:0 0.25rem; }
.fantasy-page .fantasy-trade-table .fantasy-num { white-space:nowrap; }
/* Every slot header reads SLOT, never SLO / T. */
.fantasy-page .fantasy-table th.fantasy-slot { white-space:nowrap; overflow-wrap:normal; }
@media (max-width:40em) {
  /* The view row scrolls sideways: a fade at its right edge says there's more. */
  .fantasy-page .fantasy-nav-wrap::after { content:""; position:absolute; top:0; right:0; bottom:0.25rem; width:1.75rem; background:linear-gradient(to right, transparent, var(--bg)); pointer-events:none; }
  /* Start/Sit's empty slot: a short target on a phone. */
  .fantasy-page .fantasy-drop-slot { min-height:4.5rem; padding:0.75rem; }
  /* Tap targets: 40px or more (inline links and chips get a hit area around them). */
  .fantasy-page .fw-toggle { width:2.5rem; height:2.5rem; }
  .fantasy-page .fantasy-side-add { width:2.5rem; height:2.5rem; }
  .fantasy-page .fantasy-compare-card > .usage-compare-remove { min-width:2.5rem; min-height:2.5rem; }
  .fantasy-page .ar-seg:not(.fantasy-nav) > button { min-height:2.5rem; }
  .fantasy-page [data-fantasy-compare-clear] { min-height:2.5rem; padding:0 0.5rem; font-size:0.75rem; }
  .fantasy-page .fantasy-map summary, .fantasy-page .fantasy-method summary { display:flex; align-items:center; min-height:2.5rem; }
  .fantasy-page .fantasy-protect-list label { min-height:2.5rem; }
  .fantasy-page .fantasy-standings .fantasy-team-link, .fantasy-page .fantasy-mini-standings .fantasy-team-link { min-height:2.5rem; }
  .fantasy-page .fantasy-body .text-button { display:inline-flex; align-items:center; min-height:2.5rem; }
  .fantasy-page .fw-link, .fantasy-page button.fantasy-rank-chip { position:relative; }
  .fantasy-page .fw-link::after { content:""; position:absolute; inset:-0.625rem -0.25rem; }
  /* The rank chip sits just under the player's name: its hit area grows down, not up over the name (UI-332). */
  .fantasy-page button.fantasy-rank-chip::after { content:""; position:absolute; inset:-0.125rem -0.25rem -1.25rem; }
  /* Secondary numbers and labels keep a floor of 11px. */
  .fantasy-page .fantasy-strip-score .fantasy-proj,
  .fantasy-page .fantasy-playoff-line span, .fantasy-page .fantasy-protect-list small, .fantasy-page .fantasy-wire-proj small,
  .fantasy-page .fantasy-wire-slot, .fantasy-page button.fantasy-rank-chip { font-size:0.6875rem; }
  /* The scoreboard strip: names wrap to two lines rather than cut off; "Proj" goes. */
  .fantasy-page .fantasy-strip-name span { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
  .fantasy-page .fantasy-strip-score .fantasy-proj-label { display:none; }
  /* Sort headers (standings, waivers and the rank dialogs): 40px or more tall, 12px text. */
  :is(.fantasy-standings, .fantasy-waivers-table, .fantasy-rank-dialog) thead .usage-sort { padding-block:0.6875rem; font-size:0.6875rem; }
  /* Injury and BYE chips beside a player: 12px. */
  :is(.fantasy-page, .fantasy-rank-dialog, .fantasy-player-sheet) .usage-injury { font-size:0.6875rem; }
  /* Inline names and team links (transactions, schedules): an invisible 40px hit area. */
  :is(.fantasy-page, .fantasy-rank-dialog) :is(.profile-name-button, .fantasy-team-link, .fantasy-side-team) { position:relative; }
  :is(.fantasy-page, .fantasy-rank-dialog) :is(.profile-name-button, .fantasy-team-link, .fantasy-side-team)::after { content:""; position:absolute; left:-0.125rem; right:-0.125rem; top:50%; height:max(100%, 2.5rem); translate:0 -50%; }
  /* Start/Sit's detail rows: 40px tall, 12px secondary text. */
  .fantasy-page .fantasy-compare-card .fantasy-ss-more { min-height:2.5rem; align-content:center; }
  .fantasy-page .fantasy-compare-card .fantasy-ss-more small { font-size:0.6875rem; }
  /* Buttons ("Show 7 more", "Compare with my lineup"): 40px. */
  .fantasy-page .pd-button { min-height:2.5rem; }
}
@media (max-width:36em) {
  /* The wire: the gain and whom it beats get their own line under the player. */
  .fantasy-home-wire .fantasy-upgrade { grid-column:2 / -1; justify-items:start; max-width:none; margin-top:0.25rem; text-align:left; }
  /* Waivers: the footnote's sentence about the hidden Adds column goes with it; by Most
     added, the count shows under each player. */
  .fantasy-waivers .fantasy-adds-note { display:none; }
  .fantasy-waivers-table .fantasy-adds-inline { display:block; margin-top:0.125rem; color:var(--muted); font:700 0.6875rem var(--font-mono); }
  /* Waivers on a phone (UI-381): a player is his name and one line (position, team, injury
     chip); the kickoff and the saved-report note go (as on Matchup), so a row is two lines. */
  .fantasy-waivers-table :is(.fantasy-game, .fantasy-saved-injury) { display:none; }
  .fantasy-waivers-table .fantasy-fit small { font-size:0.6875rem; }
  /* The trade evaluator: the photo, name and position only (the NFL team and game line go). */
  .fantasy-trade-table .fantasy-player-team, .fantasy-trade-table .fantasy-game { display:none; }
  .fantasy-page .fantasy-trade-table thead th { white-space:normal; }
  .fantasy-page .fantasy-trade-table td.fantasy-trade-tick { width:2rem; padding:0; }
  .fantasy-trade-tick label { min-width:2rem; }
  /* The standings' sort headers wrap ("Wk 3 / proj.") rather than widen their columns. */
  :is(.fantasy-standings, .fantasy-waivers-table) thead .usage-sort { padding-inline:0.3125rem; white-space:normal; text-align:inherit; }
  .fantasy-standings tbody :is(th, td) { padding-inline:0.3125rem; }
  /* The line's label runs under the columns that show, not the scrolled-off Proj. */
  .fantasy-standings .fantasy-playoff-line span { text-align:left; }
  /* League home standings: the owner and the team code go, and the name wraps, so
     Record, PF and PA fit. */
  .fantasy-standings td.fantasy-owner { width:0; padding:0 !important; }
  .fantasy-standings .fantasy-owner-name, .fantasy-standings .fantasy-team-link .fantasy-code { display:none; }
  .fantasy-standings .fantasy-team-link { grid-template-columns:auto minmax(0, 1fr); }
  .fantasy-standings .fantasy-team-link:not(:has(.fantasy-photo)) { grid-template-columns:minmax(0, 1fr); }
  .fantasy-standings .fantasy-team-link span:last-child { white-space:normal; overflow-wrap:anywhere; text-align:left; }
  .fantasy-standings th.fantasy-standings-team { min-width:6rem; white-space:normal; }
  /* The rank dialogs fit a phone without scrolling sideways: tighter cells, and headers and
     players' names wrap. Every team ranked shows its picture and name, as the standings do; a
     position's rankings show who has him by the team's code alone (the name stays for screen readers). */
  .fantasy-rank-dialog thead .usage-sort { padding-inline:0.25rem; }
  .fantasy-rank-dialog thead th:not(:first-child) .usage-sort { white-space:normal; }
  .fantasy-rank-dialog .team-rank-table :is(tbody th, td) { padding-inline:0.25rem; }
  .fantasy-rank-dialog .team-rank-table td:first-child { width:auto; }
  #fantasyRankDialog .fantasy-team-link .fantasy-code, .fantasy-position-dialog .fantasy-team-link .fantasy-photo { display:none; }
  .fantasy-position-dialog th.is-text { white-space:normal; }
  .fantasy-position-dialog .fantasy-team-link > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* UI-161: a small headshot beside a player's name in lists and dense rows (initials show
   until the photo loads, or when there's none; a defense shows its team logo). */
.fantasy-mini-photo { display:inline-flex; flex:none; vertical-align:middle; }
.fantasy-mini-photo .player-avatar { position:relative; display:grid; place-items:center; width:1.75rem; height:1.75rem; overflow:hidden; border:0; border-radius:var(--r-control); background:var(--surface-raised); box-shadow:none; color:var(--muted); font:750 0.5625rem/1 var(--font-body); }
.fantasy-mini-photo .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fantasy-mini-photo .fantasy-def-logo .team-mini-badge { width:1.25rem; height:1.25rem; margin:0; }
.fantasy-named { display:inline-flex; align-items:center; gap:0.5rem; min-width:0; }
.fantasy-board-who { flex:1; }
.fw-row-person { display:flex; align-items:center; gap:0.625rem; min-width:0; }
.fw-row-person .fantasy-mini-photo .player-avatar { width:2rem; height:2rem; }
.fw-side-name { display:flex; align-items:center; justify-content:center; gap:0.375rem; }
.fantasy-grade .fantasy-grade-who { display:flex; align-items:center; gap:0.3125rem; min-width:0; }
.fantasy-grade .fantasy-mini-photo, .fantasy-grade .fantasy-mini-photo span { overflow:hidden; text-overflow:clip; }
.fantasy-grade .fantasy-mini-photo .player-avatar { width:1.25rem; height:1.25rem; font-size:0.5rem; }
.fantasy-grade .fantasy-grade-who > .fantasy-grade-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The injury chip follows the name and keeps its width: the name is what gets cut short (UI-758). */
.fantasy-grade .fantasy-grade-who > .usage-injury { position:relative; flex:none; margin-left:0; overflow:visible; }
/* A depth tile's line ("2 on the bench · 12.3/wk") wraps rather than lose its number. */
.fantasy-grade.is-depth > span { overflow:visible; text-overflow:clip; white-space:normal; }
.fantasy-side-row .fantasy-mini-photo .player-avatar, .fantasy-protect-list .fantasy-mini-photo .player-avatar { width:1.5rem; height:1.5rem; }
/* Phones. The head-to-head box score: the name gets the cell's full width on its first line;
   the photo sits on the second, beside the position chip, so no row grows. */
@media (max-width:36em) {
  .fantasy-page .fantasy-versus .fantasy-player { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:0.125rem 0.25rem; }
  .fantasy-page .fantasy-versus .usage-player-copy { display:contents; }
  .fantasy-page .fantasy-versus .fantasy-player .team-player-name { grid-column:1 / -1; grid-row:1; max-width:none; overflow:hidden; overflow-wrap:normal; text-overflow:ellipsis; }
  /* A name wraps at its spaces; a word wider than the cell ("Antetokounmpo") ends in "…"
     there instead of running into the points. Its text, what a screen reader reads, stays
     whole. Where the browser can, the clip leaves room for the name's 40px tap area. */
  @supports (overflow-clip-margin:1px) { .fantasy-page .fantasy-versus .fantasy-player .team-player-name { overflow:clip; overflow-clip-margin:0.75rem; } }
  .fantasy-page .fantasy-versus .fantasy-player > .player-avatar { grid-row:2; grid-column:1; flex:none; width:1.25rem; height:1.25rem; font-size:0.5rem; }
  .fantasy-page .fantasy-versus .fantasy-player .fantasy-def-logo .team-mini-badge { width:1rem; height:1rem; }
  .fantasy-page .fantasy-versus .fantasy-player .usage-player-meta { grid-row:2; grid-column:2; }
  /* The saved injury report takes its own full-width line; in the photo's column it widened
     that column and pushed the position chip ("TE18") over the points (UI-403). */
  .fantasy-page .fantasy-versus .fantasy-player .fantasy-saved-injury { grid-column:1 / -1; min-width:0; }
  /* UI-710: a chip that wraps (the Q tag after "WR149") starts at the row's left edge, under the
     photo, like the row's other lines (UI-695), not a photo's width in. The chip line spans both
     columns and its first chip, the position chip, keeps clear of the photo (the photo's width
     and the grid's gap), so a row where nothing wraps is drawn where it was. The photo stays on
     the first chip line; a wrapped line starts below it (the wider row gap). */
  .fantasy-page .fantasy-versus .fantasy-player:has(> .player-avatar + .usage-player-copy > .usage-player-meta > .team-pos-chip:first-child) > .player-avatar { align-self:start; }
  .fantasy-page .fantasy-versus .fantasy-player > .player-avatar + .usage-player-copy > .usage-player-meta:has(> .team-pos-chip:first-child) { grid-column:1 / -1; row-gap:0.375rem; }
  .fantasy-page .fantasy-versus .fantasy-player > .player-avatar + .usage-player-copy > .usage-player-meta > .team-pos-chip:first-child { margin-left:1.5rem; }
  /* The Q tag's small left margin (usage.css) would inset a wrapped tag: the position chip in
     front of it carries that space, so a tag beside the chip stays where it was. */
  .fantasy-page .fantasy-versus .fantasy-player .usage-player-meta .usage-injury { margin-left:0; }
  .fantasy-page .fantasy-versus .fantasy-player .usage-player-meta .team-pos-chip:has(~ .usage-injury) { margin-right:0.125rem; }
}
/* Phones. Your starters: the photo beside the name, the game line under both at full width. */
@media (max-width:40em) {
  .fw-row-person { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0.125rem 0.5rem; }
  .fw-row-person .fw-row-who { display:contents; }
  .fw-row-person .fantasy-mini-photo .player-avatar { width:1.5rem; height:1.5rem; }
  .fw-row-person .fw-game { grid-column:1 / -1; }
}

/* Byes ahead (UI-199, UI-466): a tile a week for the next four, a starter slot the roster
   can't fill in red. A week with byes is a button (the site's button styles reset) that opens
   who's off in a panel under the strip. */
.fantasy-byes { display:grid; gap:0.75rem; }
.fantasy-page .fantasy-byes > h3 { margin:0; }
.fantasy-bye-group { display:grid; gap:0.375rem; min-width:0; }
.fantasy-bye-strip { display:grid; grid-auto-flow:column; grid-auto-columns:5rem; gap:0.5rem; margin:0; padding:0; list-style:none; }
.fantasy-bye-week { display:grid; min-width:0; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); }
.fantasy-bye-open { display:grid; align-content:start; gap:0.125rem; width:100%; min-width:0; min-height:0; margin:0; padding:0.5rem 0.5rem 0.4375rem; border:0; border-radius:calc(var(--r-control) - 2px); background:none; box-shadow:none; color:inherit; font:inherit; text-align:left; text-transform:none; letter-spacing:normal; }
button.fantasy-bye-open { cursor:pointer; }
button.fantasy-bye-open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fantasy-bye-week:has(> button):hover { border-color:color-mix(in srgb, var(--accent) 60%, var(--line)); }
.fantasy-bye-week.is-open { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.fantasy-bye-wk { color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; }
.fantasy-bye-week strong { font:800 1.5rem/1.05 var(--font-display); font-variant-numeric:tabular-nums; }
.fantasy-bye-week small { color:var(--muted); font-size:0.6875rem; }
.fantasy-bye-note { color:var(--muted); font-size:0.6875rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.fantasy-bye-week.is-byes { border-color:var(--edge); }
.fantasy-bye-week.is-short { border-color:var(--edge); background:var(--negative-bg); }
.fantasy-bye-week.is-short .fantasy-bye-note { color:var(--negative); }
.fantasy-bye-week.is-short.is-open { border-color:var(--accent); }
.fantasy-bye-detail { display:grid; gap:0.5rem; padding:0.625rem 0.75rem; border:1px solid var(--accent); border-radius:var(--r-control); }
.fantasy-bye-detail-head { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; }
.fantasy-bye-detail h4 { margin:0; font-size:0.875rem; }
.fantasy-bye-players { display:grid; gap:0.375rem; margin:0; padding:0; list-style:none; }
.fantasy-bye-players li { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.fantasy-bye-who { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.fantasy-bye-who small { color:var(--muted); font-size:0.6875rem; white-space:nowrap; }
.fantasy-bye-role { flex:none; color:var(--muted); font-size:0.6875rem; font-weight:700; }
.fantasy-bye-role.is-starter { color:inherit; }
.fantasy-page .fantasy-bye-foot { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.45; }
.fantasy-page .fantasy-bye-foot.is-short { color:var(--negative); font-weight:700; }
.fantasy-bye-detail > .text-button { justify-self:start; }
.fantasy-bye-chip { font:700 0.6875rem var(--font-mono); }
.fantasy-bye-chip.is-soon { display:inline-block; padding:0.0625rem 0.4375rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--gold); color:var(--accent-ink); }
/* Outlook tables stay inside their scroll container on phones. */
.fantasy-outlook-table { min-width:0; }
.fantasy-outlook-table .fantasy-team-link { white-space:normal; }
.fantasy-outlook > :is(h3, p) { margin:0; }
.fantasy-outlook-status { padding:0.5rem 0; }
@media (max-width:40em) {
  .fantasy-outlook-table thead th { font-size:0.5625rem; }
}

/* Trade values (UI-336): every player's value for the rest of the season. Position pills and
   an owner picker above; rank (and his position rank), player (with his owner's chip), Pts/wk,
   value with a bar against the top player, schedule ease, and Shop / Trade for. Tier rows
   divide it in value order. Phones keep rank, player, value and the action; Pts/wk and the
   Playoffs chip move inside those cells, and Next 4 and the bar go. */
.fantasy-page .fantasy-values-owner { display:flex; align-items:center; gap:0.5rem; color:var(--muted); font-size:0.8125rem; font-weight:700; }
.fantasy-page .fantasy-values-owner select { min-height:2.5rem; max-width:16rem; padding:0 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:600 0.875rem var(--font-body); }
.fantasy-values-positions { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.fantasy-values-table { width:100%; }
.fantasy-values-table thead th { padding:0; vertical-align:bottom; }
.fantasy-values-table thead .usage-sort { display:block; box-sizing:border-box; width:100%; padding:0.4375rem 0.5rem; text-align:inherit; cursor:pointer; }
.fantasy-values-table thead .usage-sort:hover { background:var(--accent-soft); }
.fantasy-values-table thead .usage-sort small { display:block; margin-top:0.125rem; font-size:0.5625rem; font-weight:500; letter-spacing:0.04em; text-transform:none; }
.fantasy-values-table th.fantasy-values-act { width:6.75rem; }
.fantasy-values-table tbody :is(th, td) { vertical-align:middle; }
.fantasy-values-rank { width:3.25rem; text-align:center; font-variant-numeric:tabular-nums; }
.fantasy-values-rank b { display:block; font:800 0.9375rem var(--font-mono); }
.fantasy-values-rank small { display:block; color:var(--muted); font:700 0.625rem var(--font-mono); letter-spacing:0.03em; }
.fantasy-values-table .fantasy-num { font-variant-numeric:tabular-nums; }
.fantasy-values-table td.fantasy-values-wide.fantasy-num { width:4.5rem; }
.fantasy-values-value { width:7rem; }
.fantasy-values-value b { font-variant-numeric:tabular-nums; }
.fantasy-value-bar { display:block; height:0.25rem; margin-top:0.25rem; overflow:hidden; border-radius:999px; background:var(--line); }
.fantasy-value-bar > span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); }
.fantasy-values-ease { width:4.5rem; text-align:center; }
.fantasy-values-table td.fantasy-values-act { text-align:right; white-space:nowrap; }
.fantasy-page .fantasy-values-button { min-height:2rem; padding:0.25rem 0.75rem; font-size:0.75rem; white-space:nowrap; }
.fantasy-values-inline { display:none; }
/* The board is the rest of the season: this week's kickoff line and saved report stay off it. */
.fantasy-values-table :is(.fantasy-game, .fantasy-saved-injury) { display:none; }
.fantasy-page .fantasy-values-table tr.is-mine > :is(th, td) { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.fantasy-page .fantasy-values-table tr.is-mine > :first-child { box-shadow:inset 3px 0 0 var(--accent); }
.fantasy-values-table .fantasy-tier-row th { padding:0.5rem 0.625rem 0.375rem; border-top:2px solid var(--line); background:var(--surface-raised); color:var(--muted); font:800 0.6875rem var(--font-mono); letter-spacing:0.08em; text-align:left; text-transform:uppercase; }
.fantasy-values-table tbody:first-of-type .fantasy-tier-row th { border-top:0; }
/* An owner: his fantasy team's picture (or code), green on mine; FA opens Waivers. */
/* Positioned so it sits above the player name's invisible 40px phone hit area (UI-678). */
.fantasy-owner-chip { position:relative; display:inline-flex; align-items:center; flex:none; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.fantasy-owner-chip .fantasy-photo { width:1.375rem; height:1.375rem; border:1px solid var(--line); box-sizing:border-box; }
.fantasy-owner-chip.is-mine .fantasy-photo { border:2px solid var(--green); }
.fantasy-page .fantasy-owner-chip .fantasy-code { height:1.25rem; padding:0 0.3125rem; border-width:1px; font-size:0.625rem; }
.fantasy-owner-chip.is-fa { height:1.25rem; padding:0 0.3125rem; border:1px solid var(--accent); border-radius:var(--r-data); color:var(--accent); font:800 0.625rem var(--font-mono); letter-spacing:0.03em; }
span.fantasy-owner-chip.is-fa { cursor:default; }
:is(a, button).fantasy-owner-chip:hover .fantasy-code, button.fantasy-owner-chip.is-fa:hover { border-color:var(--accent); color:var(--accent); }
:is(a, button).fantasy-owner-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-data); }
.fantasy-nfl.is-logo { gap:0; }
/* Team values (UI-459): a tile a team, most value first; a wrapping grid on wide screens and a
   row that scrolls sideways on phones. Mine has the accent edge; the Owner pick an outline. */
.fantasy-team-values { padding-block:0.75rem; }
.fantasy-tv-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.75rem; margin-bottom:0.5rem; }
.fantasy-tv-head h3 { margin:0; }
.fantasy-tv-head p { margin:0; font-size:0.75rem; }
.fantasy-tv-strip { display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem, 1fr)); gap:0.375rem; margin:0; padding:0; list-style:none; }
.fantasy-tv-team { min-width:0; }
.fantasy-tv-open { display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; align-items:center; gap:0.25rem 0.375rem; box-sizing:border-box; width:100%; height:100%; padding:0.375rem 0.5rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fantasy-tv-open:hover { border-color:var(--accent); }
.fantasy-tv-open:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fantasy-tv-team.is-mine .fantasy-tv-open { box-shadow:inset 3px 0 0 var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); }
.fantasy-tv-team.is-picked .fantasy-tv-open { border-color:var(--accent); }
.fantasy-tv-rank { min-width:1rem; color:var(--muted); font:800 0.6875rem var(--font-mono); text-align:center; }
.fantasy-tv-open .fantasy-photo { width:1.375rem; height:1.375rem; border:1px solid var(--line); box-sizing:border-box; }
.fantasy-tv-team.is-mine .fantasy-photo { border:2px solid var(--green); }
.fantasy-page .fantasy-tv-open .fantasy-code { height:1.25rem; padding:0 0.3125rem; border-width:1px; font-size:0.625rem; }
.fantasy-tv-name { overflow:hidden; font-size:0.75rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.fantasy-tv-open b { font:800 0.8125rem var(--font-mono); font-variant-numeric:tabular-nums; }
.fantasy-tv-bar { grid-column:1 / -1; display:block; height:0.25rem; overflow:hidden; border-radius:999px; background:var(--line); }
.fantasy-tv-bar > span { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent); }
@media (max-width:40em) {
  .fantasy-tv-strip { display:flex; overflow-x:auto; padding-bottom:0.25rem; scroll-snap-type:x proximity; scrollbar-width:thin; }
  .fantasy-tv-team { flex:0 0 8.5rem; scroll-snap-align:start; }
  /* The name gets its own line: beside the value it would show only its first letter. */
  .fantasy-tv-open { grid-template-columns:auto auto minmax(0, 1fr); }
  .fantasy-tv-open b { grid-area:1 / 3; justify-self:end; }
  .fantasy-tv-name { grid-area:2 / 1 / 3 / -1; font-size:0.6875rem; }
  .fantasy-tv-bar { grid-row:3; }
}
@media (max-width:40em) {
  .fantasy-values-toolbar { flex-direction:column; align-items:stretch; }
  .fantasy-values-positions { flex-wrap:nowrap; align-self:flex-start; }
  .fantasy-page .fantasy-values-owner { width:100%; }
  .fantasy-page .fantasy-values-owner select { flex:1; min-width:0; max-width:none; }
  .fantasy-values-table .fantasy-values-wide, .fantasy-value-bar { display:none; }
  .fantasy-values-inline { display:inline-flex; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.6875rem; white-space:nowrap; }
  .fantasy-values-value .fantasy-values-inline { display:block; font:600 0.625rem var(--font-mono); }
  .fantasy-values-table :is(th, td) { padding-inline:0.3125rem; }
  .fantasy-values-table thead .usage-sort { padding-inline:0.3125rem; font-size:0.6875rem; white-space:normal; }
  .fantasy-values-rank { width:2.5rem; }
  .fantasy-values-value { width:4.25rem; }
  .fantasy-values-table th.fantasy-values-act { width:0; }
  .fantasy-page .fantasy-values-button { min-height:2.5rem; max-width:4.25rem; padding:0.25rem 0.375rem; font-size:0.6875rem; line-height:1.15; white-space:normal; }
  .fantasy-values-table td.fantasy-values-act { white-space:normal; }
  .fantasy-values-table .fantasy-player .player-avatar { display:none; }
}
/* Very narrow (a 320 phone at 200% text): each player is a small card, his rank beside his
   name, his value and the action stacked under it. The headers wrap as a row of sort buttons. */
.fantasy-values .team-table-wrap { container:values / inline-size; }
@container values (max-width:17em) {
  .fantasy-values-table, .fantasy-values-table :is(thead, tbody) { display:block; }
  .fantasy-values-table thead tr { display:flex; flex-wrap:wrap; }
  .fantasy-values-table thead th { flex:1 1 auto; width:auto; }
  .fantasy-values-table thead th.fantasy-values-act { display:none; }
  .fantasy-values-table tbody tr:not(.fantasy-tier-row) { display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"rank player" "rank value" "rank act"; align-items:center; }
  .fantasy-values-table tbody tr.fantasy-tier-row, .fantasy-values-table .fantasy-tier-row th { display:block; }
  .fantasy-values-table .fantasy-values-rank { grid-area:rank; width:auto; align-self:stretch; }
  .fantasy-values-table tbody tr > th.is-text { grid-area:player; }
  .fantasy-values-table .fantasy-values-value { grid-area:value; width:auto; text-align:left; }
  .fantasy-values-table td.fantasy-values-act { grid-area:act; }
  .fantasy-values-table tbody tr > :is(th, td) { border-bottom:0; }
  .fantasy-values-table tbody tr:not(.fantasy-tier-row) { border-bottom:1px solid var(--line); }
  .fantasy-values-table .usage-player-meta { flex-wrap:wrap; }
  .fantasy-values-table .team-player-name { white-space:normal; overflow-wrap:anywhere; }
  .fantasy-values-table .fantasy-player, .fantasy-values-table .usage-player-copy { min-width:0; max-width:100%; }
  .fantasy-values-table .usage-player-meta, .fantasy-values-table .fantasy-values-inline { flex-wrap:wrap; white-space:normal; }
  .fantasy-values-table td.fantasy-values-act { text-align:left; padding-bottom:0.5rem; }
  .fantasy-page .fantasy-values-table .fantasy-values-button { max-width:none; }
}
@media (max-width:40em) {
  .fantasy-bye-strip { grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.375rem; }
  .fantasy-bye-open { padding:0.4375rem 0.375rem; }
  .fantasy-bye-week strong { font-size:1.25rem; }
}

/* Removing a saved league is a deliberate, keyboard-accessible action. */
.fantasy-remove-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); }
.fantasy-remove-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.fantasy-remove-dialog h2 { margin: 0 0 12px; overflow-wrap: anywhere; }
.fantasy-remove-dialog p { line-height: 1.5; }
.fantasy-remove-dialog form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.fantasy-remove-dialog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Dated saved-report context stays separate from the platform's status chip. */
.fantasy-saved-injury { margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.45; white-space: normal; }
.fantasy-saved-injury summary { width: fit-content; cursor: pointer; color: var(--muted); }
.fantasy-saved-injury-detail { display: block; max-width: 24rem; padding-block: 0.375rem; overflow-wrap: anywhere; }
.fantasy-saved-injury :is(summary, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.owner-tag.is-aged { border-style: dashed; }

/* Start/Sit's weather panel lists the forecast facts directly (UI-366: no Forecast details
   disclosure; the list itself is styled in arcade.css). */
.fantasy-ss-pop .weather-facts { margin:0.375rem 0; }
.fantasy-ss-pop:has(.weather-facts) h6 { overflow-wrap:anywhere; min-width:0; }

/* ------------------------------------------------------------------------------------
   UI-332: the fantasy player sheet. A name in Fantasy opens the player's fantasy view
   (studio-fantasy.js profileHtml, restored from before UI-65) in a sheet: a side panel on
   wide screens, a bottom sheet on phones. The profile rules are the old ones (UI-72 removed
   them as unused); the sheet rules after them fit the view to the panel.
   ------------------------------------------------------------------------------------ */
.fantasy-profile { display:grid; gap:0.75rem; margin:0 0 1rem; padding:0.75rem 0.875rem; border:1px solid var(--line); border-radius:0.5rem; background:var(--surface); font-size:0.6875rem; }
.fantasy-profile .is-plus { --ss-tint:color-mix(in srgb, var(--positive-bg) 55%, transparent); }
.fantasy-profile .is-minus { --ss-tint:color-mix(in srgb, var(--negative-bg) 55%, transparent); }
.fantasy-profile h5 { margin:0 0 0.375rem; color:var(--muted); font-size:0.5625rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.fantasy-pf-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.25rem 1rem; }
.fantasy-pf-head h3 { margin:0; color:var(--ink); font-size:0.8125rem; }
.fantasy-pf-owner { display:flex; align-items:center; gap:0.375rem; margin:0; color:var(--muted); }
/* The season in one line: label over number, divided, no boxes. */
.fantasy-pf-stats { display:flex; flex-wrap:wrap; gap:0.5rem 0; margin:0; }
.fantasy-pf-stat { display:grid; gap:0.0625rem; padding:0.125rem 1.25rem 0.125rem 0.625rem; border-left:2px solid var(--line); border-radius:0.25rem; background:var(--ss-tint, transparent); }
.fantasy-pf-stat:first-child { padding-left:0; border-left:0; }
.fantasy-pf-stat dt { color:var(--muted); font-size:0.5625rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; }
.fantasy-pf-stat dd { display:flex; align-items:baseline; gap:0.375rem; margin:0; }
.fantasy-pf-stat b { color:var(--ink); font-size:1rem; font-variant-numeric:tabular-nums; }
.fantasy-pf-stat small { color:var(--muted); font-size:0.625rem; }
/* Weekly bars beside this week's card; stacked when narrow. */
.fantasy-pf-body { display:grid; grid-template-columns:minmax(12rem, 22rem) minmax(0, 1fr); gap:1.25rem; align-items:start; }
@media (max-width:56em) { .fantasy-pf-body { grid-template-columns:minmax(0, 1fr); } }
.fantasy-pf-chart { display:flex; gap:0.1875rem; margin:0; padding:0 0 0.25rem; overflow-x:auto; list-style:none; }
.fantasy-pf-week { display:grid; grid-template-rows:auto 3rem auto auto; justify-items:center; flex:1 0 1.375rem; max-width:2rem; gap:0.0625rem; font-variant-numeric:tabular-nums; }
.fantasy-pf-week b { font-size:0.5625rem; font-weight:700; color:var(--ink); }
.fantasy-pf-week.is-gap b { color:var(--muted); font-size:0.5rem; }
.fantasy-pf-week small { color:var(--muted); font-size:0.5rem; line-height:1.2; }
.fantasy-pf-bar { position:relative; width:75%; height:100%; border-bottom:1px solid var(--line); }
.fantasy-pf-bar::after { content:""; position:absolute; inset:auto 0 0; height:var(--h); border-radius:0.125rem 0.125rem 0 0; background:color-mix(in srgb, var(--cyan) 70%, var(--surface)); }
.fantasy-pf-week.is-boom .fantasy-pf-bar::after { background:color-mix(in srgb, var(--positive) 60%, var(--surface)); }
.fantasy-pf-week.is-bust .fantasy-pf-bar::after { background:color-mix(in srgb, var(--negative) 55%, var(--surface)); }
.fantasy-pf-note { margin:0.25rem 0 0; font-size:0.5625rem; }
/* Start/Sit's four sections, scaled down for the profile. */
.fantasy-pf-sections { display:grid; grid-template-columns:repeat(auto-fit, minmax(12.5rem, 1fr)); gap:0 1rem; }
.fantasy-pf-sections .fantasy-ss-section { gap:0.375rem; padding-top:0.5rem; }
.fantasy-pf-sections .fantasy-ss-tile { padding:0.375rem 0.5rem; }
.fantasy-pf-sections .fantasy-ss-tile b { font-size:0.9375rem; }
.fantasy-pf-sections .fantasy-ss-tile small, .fantasy-pf-sections .fantasy-ss-out dd small { font-size:0.625rem; }
.fantasy-pf-sections .fantasy-ss-weather { padding:0.375rem 0.5rem; }
.fantasy-pf-sections .fantasy-ss-weather .studio-weather-icon { width:1.25rem; height:1.25rem; }
.fantasy-pf-sections .fantasy-ss-weather .studio-weather-copy>strong { font-size:0.8125rem; }
.fantasy-pf-sections .fantasy-ss-chips li { min-width:3rem; padding:0.25rem 0.375rem; }
.fantasy-pf-sections .fantasy-ss-chips b { font-size:0.8125rem; }
.fantasy-pf-sections .fantasy-ss-metric { padding:0.25rem 0.375rem; }
.fantasy-pf-sections .fantasy-ss-stat b { font-size:0.8125rem; }
.fantasy-pf-sections .fantasy-ss-chip { min-width:3rem; padding:0.25rem 0.375rem; }
.fantasy-pf-sections .fantasy-ss-out-value b { font-size:0.75rem; }
/* The sheet: a modal dialog (the ID beats the site's dialog rules). */
#fantasyPlayerSheet { position:fixed; inset:0 0 0 auto; box-sizing:border-box; width:min(36rem, 100vw); max-width:none; height:100dvh; max-height:none; margin:0;
  padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border:0; border-left:1px solid var(--line); border-radius:0;
  background:var(--surface); color:var(--ink); box-shadow:none; }
#fantasyPlayerSheet[open] { display:flex; flex-direction:column; animation:fantasy-sheet-in var(--dur-slow) var(--ease-drawer); }
#fantasyPlayerSheet::backdrop { background:#0c0a1066; backdrop-filter:none; }
@keyframes fantasy-sheet-in { from { translate:calc(100% * var(--move)) 0; } }
.fantasy-sheet-head { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.5rem 0.75rem;
  padding:1rem 1.25rem 0.75rem; border-bottom:1px solid var(--line); background:var(--surface); }
.fantasy-sheet-head > .player-avatar { position:relative; display:grid; place-items:center; width:3rem; height:3rem; overflow:hidden; box-sizing:border-box;
  border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font-size:0.75rem; font-weight:800; }
.fantasy-sheet-head > .player-avatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.fantasy-sheet-who { grid-column:2; min-width:0; }
.fantasy-sheet-who h2 { margin:0; overflow-wrap:anywhere; font:800 1.5rem/1.1 var(--font-display); letter-spacing:-0.01em; }
.fantasy-sheet-who h2:focus { outline:none; }
.fantasy-sheet-who h2:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:var(--r-control); }
.fantasy-sheet-who p { margin:0.125rem 0 0; font-size:0.75rem; }
#fantasyPlayerSheet .fantasy-sheet-close { grid-column:3; display:grid; place-items:center; width:2.75rem; height:2.75rem; padding:0; border:1px solid var(--line);
  border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); cursor:pointer; }
#fantasyPlayerSheet .fantasy-sheet-close:hover { background:var(--surface-strong); }
#fantasyPlayerSheet .fantasy-sheet-close:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.fantasy-sheet-props { grid-column:1 / -1; justify-self:start; min-height:2.75rem; }
.fantasy-sheet-body { padding:1rem 1.25rem 1.5rem; }
/* The view in the panel: no box of its own, one column, type a step up from the old inline panel. */
#fantasyPlayerSheet .fantasy-profile { gap:1rem; margin:0; padding:0; border:0; background:none; font-size:0.8125rem; }
#fantasyPlayerSheet .fantasy-profile h5 { font-size:0.6875rem; }
#fantasyPlayerSheet .fantasy-pf-head h3 { font-size:0.9375rem; }
#fantasyPlayerSheet .fantasy-pf-stat dt { font-size:0.625rem; }
#fantasyPlayerSheet .fantasy-pf-stat b { font-size:1.25rem; }
#fantasyPlayerSheet .fantasy-pf-stat small { font-size:0.6875rem; }
#fantasyPlayerSheet .fantasy-pf-body { grid-template-columns:minmax(0, 1fr); }
#fantasyPlayerSheet .fantasy-pf-week { max-width:2.5rem; }
#fantasyPlayerSheet .fantasy-pf-week b { font-size:0.6875rem; }
#fantasyPlayerSheet .fantasy-pf-week.is-gap b { font-size:0.5625rem; }
#fantasyPlayerSheet .fantasy-pf-week small { font-size:0.625rem; }
#fantasyPlayerSheet .fantasy-pf-note { font-size:0.6875rem; }
/* Phones: a bottom sheet, up to most of the screen. */
@media (max-width:48em) {
  #fantasyPlayerSheet { inset:auto 0 0 0; width:100vw; height:auto; max-height:88dvh; border-left:0; border-top:1px solid var(--line); border-radius:var(--r-card) var(--r-card) 0 0; }
  #fantasyPlayerSheet[open] { animation-name:fantasy-sheet-up; }
  .fantasy-sheet-head { padding:0.875rem 1rem 0.625rem; }
  .fantasy-sheet-body { padding:0.875rem 1rem 1.25rem; }
  #fantasyPlayerSheet .fantasy-pf-stat { padding-right:0.875rem; }
}
@keyframes fantasy-sheet-up { from { translate:0 calc(100% * var(--move)); } }
@media (prefers-reduced-motion:reduce) { #fantasyPlayerSheet[open] { animation:none; } }
/* A day-based league's Your week (NBA, UI-876): NFL's rows, with the week's games as three
   counts (played, today, left) in the matchup chip's column, and the points so far tinted
   against his average in the Matchup tab's steps (a pill, so the lighter steps read too). */
.fp-unsupported { color:var(--muted); }
.fp-games { display:inline-grid; grid-auto-flow:column; grid-auto-columns:minmax(1.625rem, auto); border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden; font:700 0.75rem/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.fp-games > span { display:grid; place-items:center; padding:0.3125rem 0.375rem; }
.fp-games > span + span { border-left:1px solid var(--line); }
.fp-games .is-played { background:var(--surface-strong); color:var(--muted); }
.fp-games .is-today { background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); }
.fp-games .is-left { color:var(--ink); }
.fp-games .is-zero { color:var(--muted); font-weight:500; opacity:0.6; }
.fw-legend .fp-games { font:700 0.6875rem/1 var(--font-body); }
.fw-legend .fp-games > span { padding:0.1875rem 0.375rem; }
.fp-page .fw-row-num b.fw-scored { padding:0.125rem 0.3125rem; margin-right:-0.3125rem; border-radius:var(--r-data); }
.fp-page .fw-facts b.fw-scored { padding:0 0.25rem; border-radius:var(--r-data); }
:is(.fp-page, .fp-roster) .fw-scored.is-over-1 { background:color-mix(in srgb, var(--good) 12%, transparent); }
:is(.fp-page, .fp-roster) .fw-scored.is-over-2 { background:color-mix(in srgb, var(--good) 22%, transparent); }
:is(.fp-page, .fp-roster) .fw-scored.is-over-3 { background:var(--good); color:var(--surface); }
:is(.fp-page, .fp-roster) .fw-scored.is-under-1 { background:color-mix(in srgb, var(--bad) 10%, transparent); }
:is(.fp-page, .fp-roster) .fw-scored.is-under-2 { background:color-mix(in srgb, var(--bad) 20%, transparent); }
:is(.fp-page, .fp-roster) .fw-scored.is-under-3 { background:var(--bad); color:var(--surface); }
.fw-status.is-off { color:var(--muted); font-weight:500; } .fw-status.is-off .fw-dot { background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted); }
.fw-facts li.is-week::before { background:var(--accent); }
.fw-facts li.is-recent::before { background:var(--good); }
.fp-starters .team-footnote { margin:0; }
/* Phones: the games chip stays (NFL's matchup chip goes), under the name and game line, so
   the name keeps the row's width. */
@media (max-width:40em) {
  .fp-page .fw-row-head > .fw-row-mu { display:block; grid-column:2; grid-row:2; justify-self:start; margin:-0.25rem 0 0.375rem; }
  .fp-games { grid-auto-columns:minmax(1.375rem, auto); }
  .fp-games > span { padding:0.1875rem 0.25rem; }
}
@container (max-width:14em) {
  .fp-page .fw-row-head > .fw-row-mu { grid-column:1 / -1; grid-row:3; }
}
/* A day-based league's team pages (NBA, UI-878): the roster's points so far over the week's
   games chip, the average over the season's points, and the last five games under the name as
   small pills tinted against his average, as Your week's. */
.fp-roster-table .fantasy-score .fp-games { display:grid; width:max-content; margin:0.3125rem 0 0 auto; }
.fp-roster-table .fp-avg .fantasy-proj { display:block; white-space:nowrap; }
.fp-last-row { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; margin-top:0.375rem; }
.fp-last-row > small { font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.04em; }
.fp-last { display:inline-flex; flex-wrap:wrap; gap:0.25rem; font:600 0.75rem/1 var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fp-last b { padding:0.1875rem 0.25rem; border-radius:var(--r-data); font-weight:600; }
/* Phones: the photo and the season's points go, so the average keeps its column (as Trade values). */
@media (max-width:40em) {
  .fp-roster-table .fantasy-player .player-avatar, .fp-roster-table .fp-avg .fp-season { display:none; }
}
/* League home's playoff bracket: a column a round, scrolling inside its card. */
.fantasy-home-side { display:grid; gap:1rem; align-content:start; min-width:0; }
.fantasy-bracket-card { display:grid; gap:0.75rem; min-width:0; contain:inline-size; }
.fantasy-bracket-card h3 { margin:0; }
.fantasy-bracket { display:grid; gap:0.5rem; min-width:0; }
.fantasy-bracket h4 { margin:0; color:var(--muted); font-size:0.75rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.fantasy-bracket-rounds { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(12.5rem, 1fr); gap:0.75rem; overflow-x:auto; padding-bottom:0.25rem; }
.fantasy-bracket-round { display:grid; gap:0.5rem; align-content:start; }
.fantasy-bracket-round h5 { margin:0; font-size:0.75rem; font-weight:800; }
.fantasy-bracket-game { display:grid; gap:0.25rem; padding:0.375rem 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); }
.fantasy-bracket-game.is-final { border-color:var(--accent); }
.fantasy-bracket-label { color:var(--muted); font-size:0.625rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.fantasy-bracket-game ul { display:grid; gap:0.25rem; margin:0; padding:0; list-style:none; }
.fantasy-bracket-team { display:grid; grid-template-columns:1.5rem minmax(0, 1fr) auto; align-items:center; gap:0.375rem; min-height:1.75rem; font-size:0.8125rem; }
.fantasy-bracket-team .fantasy-team-link { min-width:0; }
.fantasy-bracket-seed { color:var(--muted); font-size:0.75rem; font-weight:800; font-variant-numeric:tabular-nums; text-align:center; }
.fantasy-bracket-team.is-lost { opacity:0.55; }
.fantasy-bracket-team.is-won .fantasy-team-link { font-weight:850; }
.fantasy-bracket-won { color:var(--good, #1f7a54); font-size:0.6875rem; font-weight:850; }
.fantasy-bracket-team.is-open { color:var(--muted); font-size:0.75rem; }

/* NBA day-by-day Start/Sit: the grid scrolls inside its card on a phone. */
.fp-decision .fw-moves .fw-slot { display:inline-block; margin-right:0.25rem; padding:0.0625rem 0.3125rem; }
:is(.fp-decision, .fp-plan) .team-footnote { margin:0.5rem 0 0; }
.fp-plan-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fp-plan-grid { width:100%; border-collapse:separate; border-spacing:0; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.fp-plan-grid :is(th, td) { padding:0.3125rem 0.375rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; white-space:nowrap; }
.fp-plan-grid thead th { color:var(--muted); font:700 0.75rem/1.2 var(--font-body); }
.fp-plan-grid :is(thead, tfoot) small { display:block; color:var(--muted); font:500 0.6875rem/1.2 var(--font-body); }
.fp-plan-grid :is(tbody, tfoot) th { width:1%; }
.fp-plan-grid :is(thead th:first-child, tbody th, tfoot th) { position:sticky; left:0; z-index:1; background:var(--surface); }
.fp-plan-grid td b { display:block; font:700 0.75rem/1.2 var(--font-mono); }
.fp-plan-name { display:block; max-width:7.5rem; overflow:hidden; text-overflow:ellipsis; color:var(--ink); font-weight:600; }
.fp-plan-grid .is-today { background:color-mix(in srgb, var(--accent) 8%, transparent); }
.fp-plan-grid thead .is-today { color:var(--accent); }
.fp-plan-grid td.is-change { box-shadow:inset 3px 0 0 var(--good); background:color-mix(in srgb, var(--good) 10%, transparent); }
.fp-plan-grid td.is-empty { color:var(--muted); }
.fp-plan-grid tfoot :is(th, td) { border-bottom:0; }
.fp-plan-key.is-change { padding:0.0625rem 0.375rem; border-left:3px solid var(--good); background:color-mix(in srgb, var(--good) 10%, transparent); }
.fp-startsit { display:grid; gap:1rem; max-width:60rem; }
@media (max-width:40em) {
  .fp-plan-name { max-width:5.5rem; }
  .fp-plan-grid :is(th, td) { padding:0.25rem 0.3125rem; }
}
.fw-drops-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem; margin:1rem 0 0.25rem; font:800 0.9375rem var(--font-body); color:var(--ink); }
.fw-drops-head small { color:var(--muted); font:500 0.75rem var(--font-body); }
.fw-trend-num.is-drop b { color:var(--bad); }

/* NBA games ahead (team page strip, League home card) and streaming on Waivers. */
.fp-ahead { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.75rem; min-width:0; }
.fantasy-page .fp-ahead > h3, .fantasy-page .fp-ahead-card > h3 { margin:0; }
.fp-ahead-card { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.5rem; min-width:0; }
.fp-ahead-players { min-width:0; }
.fp-ahead-players summary { cursor:pointer; color:var(--accent); font-size:0.8125rem; font-weight:700; }
.fp-ahead-players[open] summary { margin-bottom:0.375rem; }
.fp-ahead-table { font-variant-numeric:tabular-nums; }
.fp-ahead-table :is(td, thead th:not(.is-text)) { text-align:center; }
.fp-ahead-table thead small { display:block; color:var(--muted); font-size:0.6875rem; font-weight:500; white-space:nowrap; }
.fp-ahead-table thead .is-now { color:var(--accent); }
.fp-ahead-table td.is-zero { color:var(--muted); }
.fp-ahead-table td.is-more { color:var(--positive); font-weight:800; }
.fp-ahead-cell b { font:800 0.875rem var(--font-mono); }
.fp-ahead-cell small { margin-left:0.1875rem; color:var(--muted); font-size:0.6875rem; }
.fp-ahead-cell.is-more { background:var(--positive-bg); }
.fp-ahead-cell.is-more b { color:var(--positive); }
.fp-ahead-cell.is-fewer { background:var(--negative-bg); }
.fp-ahead-cell.is-fewer b { color:var(--negative); }
.fp-ahead-card tr.is-current th { font-weight:800; }
.fp-waiver-games small { display:block; color:var(--muted); font-size:0.6875rem; white-space:nowrap; }

/* ---- Live (studio-fantasy-live.js): an NBA league's game night, your matchup as it goes ----
   Yours in blue with a solid edge, theirs violet with a dashed one (the Slate's Fantasy sides,
   slate.css; the shape for colour-blind eyes). */
.fl-page [data-fantasy-side=mine] { --fantasy-side:var(--accent); --fantasy-edge:linear-gradient(var(--fantasy-side), var(--fantasy-side)); }
.fl-page [data-fantasy-side=theirs] { --fantasy-side:var(--lilac); --fantasy-edge:repeating-linear-gradient(var(--fantasy-side) 0 5px, transparent 0 8px); }
/* A Fantasy bench player: the side's colour muted, a dotted edge, a Bench tag; his points never count. */
.fl-page [data-fantasy-side=mine][data-fl-bench] { --fantasy-side:color-mix(in srgb, var(--accent) 45%, var(--muted)); }
.fl-page [data-fantasy-side=theirs][data-fl-bench] { --fantasy-side:color-mix(in srgb, var(--lilac) 45%, var(--muted)); }
.fl-page [data-fantasy-side][data-fl-bench] { --fantasy-edge:repeating-linear-gradient(var(--fantasy-side) 0 2px, transparent 0 5px); }
.fl-play[data-fl-bench] { background-color:color-mix(in srgb, var(--fantasy-side) 7%, transparent); }
.fl-play[data-fl-bench] .fl-play-fp b, .fl-play[data-fl-bench] .fl-play-fp small { color:var(--muted); }
.fl-tag[data-fl-bench] { color:var(--muted); font-style:italic; }
.fl-floor-off.is-bench { margin-top:0.5rem; }
.fl-box-table tr[data-fl-bench] > :is(th, td) { background-color:color-mix(in srgb, var(--fantasy-side) 8%, var(--surface)); color:var(--muted); }
.fl-box-table tr:is([data-fl-bench], .is-struck) td.fl-box-fpts { color:var(--muted); }
.fl-box-table tr.is-struck td.fl-box-fpts { text-decoration:line-through; }
.fl-box-name .fl-tag { margin-left:0.125rem; }
.fl-bench-toggle { flex:none; height:1.875rem; padding:0 0.625rem; border:1px dashed var(--line); border-radius:var(--r-control); background:none; color:var(--muted); font:700 0.75rem var(--font-body); cursor:pointer; white-space:nowrap; }
.fl-bench-toggle[aria-pressed=true] { border-style:dotted; border-color:var(--muted); color:var(--ink); background:var(--surface-subtle); }
.fl-bench-toggle[aria-pressed=false] { text-decoration:line-through; }
.fl-row .fantasy-mini-photo .player-avatar, .fl-play-face .player-avatar { width:1.75rem; height:1.75rem; }
.fl-play-face { display:inline-flex; min-width:1.75rem; }
.fl-game-line > span { display:inline-flex; align-items:center; gap:0.3125rem; }
.fl-game .team-boxes.is-sm { height:1.125rem; }
.fl-game .team-boxes.is-sm .team-box { font-size:0.6875rem; }
.fl-dot { display:inline-block; flex:none; width:7px; height:7px; margin-right:0.375rem; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); vertical-align:1px; }
.fl-follow { display:inline-flex; align-items:center; justify-self:start; color:var(--accent); }
.fantasy-game-follow { margin-left:0.75rem; font-size:0.8125rem; }
.fl-page { display:grid; gap:1rem; min-width:0; }
.fl-head h2 { margin:0; font:800 2rem/1.05 var(--font-display); letter-spacing:-0.02em; }
.fl-sub { margin:0.25rem 0 0; color:var(--muted); font-size:0.875rem; }
.fl-card { min-width:0; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.fl-none { display:grid; gap:0.75rem; justify-items:start; padding:1.25rem; }
.fl-none p { margin:0; }

/* The score band. */
.fl-band { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0.75rem 1rem; padding:1.125rem 1.375rem 0; }
.fl-side { display:grid; gap:0.125rem; min-width:0; }
.fl-side.is-theirs { text-align:right; }
.fl-who { margin:0; overflow:hidden; font-size:0.9375rem; white-space:nowrap; text-overflow:ellipsis; }
.fl-who small { color:var(--muted); font-size:0.8125rem; font-weight:500; }
.fl-pts { font:800 3.25rem/1 var(--font-display); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.fl-side.is-mine .fl-pts { color:var(--accent); }
.fl-side.is-theirs .fl-pts { color:var(--lilac); }
.fl-proj { margin:0; color:var(--muted); font-size:0.8125rem; }
.fl-proj b { color:var(--ink); font:700 0.9375rem var(--font-mono); }
.fl-mid { display:grid; gap:0.3125rem; justify-items:center; text-align:center; }
.fl-mid p { margin:0; }
.fl-state { display:inline-flex; align-items:center; gap:0.375rem; padding:0.1875rem 0.5rem; border-radius:var(--r-data); background:var(--surface-raised); color:var(--ink); font:800 0.8125rem var(--font-display); letter-spacing:0.06em; text-transform:uppercase; }
.fl-state.is-live { background:var(--positive-bg); color:var(--green); }
.fl-state.is-live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.fl-count, .fl-win { color:var(--muted); font-size:0.8125rem; }
.fl-count b { color:var(--ink); }
.fl-win b { color:var(--green); font:700 0.9375rem var(--font-mono); }
.fl-bar { grid-column:1 / -1; position:relative; height:8px; overflow:hidden; border-radius:999px; background:color-mix(in srgb, var(--lilac) 55%, var(--surface-raised)); }
.fl-bar span { position:absolute; inset:0 auto 0 0; background:var(--accent); }
.fl-foot { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1rem; padding:0 0 0.875rem; color:var(--muted); font-size:0.75rem; }
.fl-foot-line { margin:0; color:var(--thin); font-weight:700; }
.fl-pace { display:inline-flex; flex-wrap:wrap; align-items:center; gap:0.25rem; }
.fl-pace button, .fl-tabs button { border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-subtle); color:var(--muted); font:600 0.75rem var(--font-body); cursor:pointer; }
.fl-pace button { min-height:1.75rem; padding:0.125rem 0.5rem; }
.fl-pace button[aria-pressed=true], .fl-tabs button[aria-pressed=true] { border-color:var(--accent); background:var(--selected-bg); color:var(--ink); }
/* A game whose live copy is two asks old dims on its own. */
.fl-page :is(.fl-row, .fl-floor-player, .fl-game).is-stale, .fl-box-table tr.is-stale { opacity:0.5; filter:saturate(0.5); }
.fl-play.is-timeout .fl-play-text { color:var(--thin); }

/* Tonight's games. */
/* A mouse drags the strip (studio-fantasy-live.js liveMounted); an edge with more chips past it fades. */
.fl-games { display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.25rem; scrollbar-width:thin; overscroll-behavior-x:contain; --fl-fade-start:0px; --fl-fade-end:0px;
  mask-image:linear-gradient(to right, transparent, #000 var(--fl-fade-start), #000 calc(100% - var(--fl-fade-end)), transparent); }
.fl-games.is-more-start { --fl-fade-start:1.5rem; }
.fl-games.is-more-end { --fl-fade-end:2.5rem; }
.fl-games:is(.is-more-start, .is-more-end) { cursor:grab; }
.fl-games.is-dragging, .fl-games.is-dragging .fl-game { cursor:grabbing; user-select:none; }
.fl-game { flex:none; display:grid; gap:0.1875rem; min-width:8.75rem; padding:0.4375rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--muted); font:500 0.75rem var(--font-body); text-align:left; cursor:pointer; }
.fl-game:hover { border-color:var(--muted); }
.fl-game[aria-pressed=true] { border-color:var(--accent); background:var(--selected-bg); }
.fl-game.is-all { display:flex; align-items:center; gap:0.25em; min-width:auto; color:var(--ink); font-weight:700; white-space:nowrap; }
.fl-game-line { display:flex; justify-content:space-between; gap:0.5rem; color:var(--ink); font:700 0.875rem var(--font-mono); white-space:nowrap; }
.fl-game-foot { display:flex; align-items:center; justify-content:space-between; gap:0.375rem; white-space:nowrap; }
.fl-game-clock { font-weight:700; }
.fl-game-clock.is-live { color:var(--green); }
.fl-game-who { display:flex; gap:0.25rem; min-height:1rem; }
.fl-tag { display:inline-flex; align-items:center; padding:0 0.3125rem 0 0.5rem; border-radius:var(--r-data); color:var(--ink); font:700 0.6875rem var(--font-body); background-color:color-mix(in srgb, var(--fantasy-side) 30%, transparent);
  background-image:var(--fantasy-edge); background-position:0 0; background-size:3px 100%; background-repeat:no-repeat; }
.fl-tag.is-zero { color:var(--muted); font-weight:600; background-color:color-mix(in srgb, var(--fantasy-side) 10%, transparent); opacity:0.7; }

/* Your starters | the switch (Plays | Box) over its view (Plays: On the court over the plays) | theirs. A phone's switch adds Starters. */
.fl-grid { display:grid; grid-template-columns:minmax(0, 21rem) minmax(0, 1fr) minmax(0, 21rem); gap:1rem; align-items:start; }
.fl-main { display:grid; gap:0.625rem; min-width:0; }
.fl-tabs { display:flex; gap:0.25rem; }
.fl-tabs button { flex:1; min-width:0; min-height:2.25rem; padding:0.375rem 0.5rem; font-size:0.8125rem; font-weight:700; white-space:nowrap; }
@media (min-width: 75.01em) {
  .fl-tabs [data-fantasy-live-tab=starters] { display:none; }
}
.fl-col-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.25rem 0.5rem; padding:0.875rem 1rem 0.625rem; border-bottom:1px solid var(--line); }
.fl-col-head h3 { margin:0; font:800 1.2rem var(--font-display); letter-spacing:-0.01em; }
.fl-col-head small { color:var(--muted); font-size:0.75rem; }
.fl-col-head small b { color:var(--ink); }
.fl-rows, .fl-play-list { margin:0; padding:0; list-style:none; }
.fl-row { display:grid; grid-template-columns:auto auto minmax(0, 1fr) auto; gap:0.5rem 0.625rem; align-items:center; padding:0.5625rem 1rem 0.5625rem 0.875rem; border-bottom:1px solid var(--line);
  background-image:var(--fantasy-edge); background-position:0 0; background-size:3px 100%; background-repeat:no-repeat; }
.fl-row:last-child { border-bottom:0; }
.fl-row-who { display:grid; gap:0.0625rem; min-width:0; }
.fl-row-name { overflow:hidden; color:var(--ink); font-size:0.875rem; font-weight:700; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
.fl-row-game, .fl-row-detail { color:var(--muted); font-size:0.75rem; }
.fl-row-game { display:flex; align-items:center; gap:0.3125rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fl-row-detail b { color:var(--ink); font:700 0.8125rem var(--font-mono); }
.fl-row-detail s { color:var(--muted); }
.fl-live { color:var(--green); }
.fl-row-out { color:var(--negative); font-weight:700; }
.fl-court { flex:none; width:7px; height:7px; border:1px solid var(--muted); border-radius:50%; }
.fl-court.is-on { border-color:var(--green); background:var(--green); }
.fl-row-num { display:grid; justify-items:end; gap:0.0625rem; text-align:right; }
.fl-row-num b { font:800 1.35rem/1 var(--font-display); font-variant-numeric:tabular-nums; }
.fl-row-num.is-quiet b { color:var(--muted); }
.fl-row-num small { color:var(--muted); font-size:0.6875rem; white-space:nowrap; }
.fl-chip { padding:0 0.3125rem; border-radius:var(--r-data); font:700 0.625rem var(--font-body); letter-spacing:0.03em; text-transform:uppercase; }
.fl-chip.is-counts { background:var(--positive-bg); color:var(--green); }
.fl-chip.is-locked { background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--gold); }
.fl-chip.is-out { background:var(--negative-bg); color:var(--negative); }

/* The plays. */
.fl-plays-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 0.75rem; padding:0.625rem 1rem; border-bottom:1px solid var(--line); }
.fl-seg { flex-wrap:wrap; }
.fl-legend { display:flex; gap:0.375rem; margin:0; }
.fl-play { display:grid; grid-template-columns:3.625rem auto auto minmax(0, 1fr) auto; gap:0.5rem; align-items:center; padding:0.5rem 0.875rem 0.5rem 0.75rem; border-bottom:1px solid var(--line); font-size:0.8125rem; line-height:1.35; }
.fl-play[data-fantasy-side] { background-color:color-mix(in srgb, var(--fantasy-side) 15%, transparent); background-image:var(--fantasy-edge); background-position:0 0; background-size:4px 100%; background-repeat:no-repeat; }
.fl-play-clock { display:grid; color:var(--muted); font:700 0.75rem/1.2 var(--font-mono); font-variant-numeric:tabular-nums; }
.fl-play-clock small { font:600 0.625rem var(--font-body); letter-spacing:0.02em; }
.fl-play-text { min-width:0; overflow-wrap:anywhere; }
.fl-play-text .fl-tag { margin-right:0.125rem; }
.fl-play-score { margin-left:0.25rem; font:800 0.8125rem var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.fl-play-also { display:block; margin-top:0.125rem; color:var(--muted); font-size:0.75rem; }
.fl-also { padding:0 0.25rem 0 0.4375rem; border-radius:var(--r-data); color:var(--ink); font-weight:700; background-color:color-mix(in srgb, var(--fantasy-side) 32%, transparent);
  background-image:var(--fantasy-edge); background-position:0 0; background-size:3px 100%; background-repeat:no-repeat; }
.fl-also b.is-up { color:var(--green); }
.fl-also b.is-down { color:var(--negative); }
.fl-play-note { color:var(--muted); }
.fl-play-fp { display:grid; justify-items:end; min-width:3.25rem; line-height:1.15; }
.fl-play-fp b { font:800 1rem var(--font-display); font-variant-numeric:tabular-nums; }
.fl-play-fp.is-up b { color:var(--green); }
.fl-play-fp.is-down b { color:var(--negative); }
.fl-play-fp small { color:var(--muted); font:600 0.6875rem var(--font-mono); font-variant-numeric:tabular-nums; }
.fl-play.is-struck .fl-play-fp b { color:var(--muted); text-decoration:line-through; }
.fl-page .slate-live-sub { font-weight:700; }
.fl-page .slate-live-sub.is-in { color:var(--green); }
.fl-page .slate-live-sub.is-out { color:var(--negative); }
.fl-earlier { padding:0.375rem 0.875rem; border-bottom:1px solid var(--line); background:var(--surface-subtle); color:var(--muted); font:700 0.6875rem var(--font-body); letter-spacing:0.06em; text-transform:uppercase; }
.fl-empty { padding:1rem; color:var(--muted); font-size:0.875rem; }
.fl-note { margin:0; padding:0.6875rem 1rem; border-top:1px solid var(--line); color:var(--muted); font-size:0.75rem; }

/* On the court: You | Them, the Slate's On the court box (slate.css .slate-live-floor) with Fantasy's sides. */
.fl-floor { padding:0.625rem 0.75rem 0.75rem; background:var(--surface-subtle); }
.fl-floor-title { display:flex; align-items:center; gap:0.375rem; margin:0 0 0.5rem; color:var(--muted); font:800 0.6875rem/1.2 var(--font-body); letter-spacing:0.08em; text-transform:uppercase; }
.fl-floor-halves { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; }
.fl-floor-team { min-width:0; padding-right:0.75rem; }
.fl-floor-team.is-theirs { padding:0 0 0 0.75rem; border-left:1px solid var(--line); }
.fl-floor-head { display:flex; align-items:center; justify-content:space-between; gap:0.375rem; margin:0 0 0.5rem; color:var(--muted); font-size:0.75rem; white-space:nowrap; }
.fl-floor-head b { color:var(--ink); }
.fl-floor-list { display:grid; gap:0.375rem; margin:0; padding:0; list-style:none; }
.fl-floor-player { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.5rem; min-width:0; margin:0 -0.375rem; padding:0.1875rem 0.375rem 0.1875rem 0.5rem; border-radius:var(--r-data);
  background-color:color-mix(in srgb, var(--fantasy-side) 24%, var(--surface-subtle)); background-image:var(--fantasy-edge); background-position:0 0; background-size:3px 100%; background-repeat:no-repeat; }
.fl-floor-player:not(.is-on) { background-color:color-mix(in srgb, var(--fantasy-side) 8%, var(--surface-subtle)); }
.fl-floor-player:not(.is-on) .fantasy-mini-photo { opacity:0.6; }
.fl-floor-who { display:grid; min-width:0; }
.fl-floor-name { overflow:hidden; color:var(--ink); font-size:0.8125rem; font-weight:700; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.fl-floor-who small { display:flex; align-items:center; gap:0.3125rem; overflow:hidden; color:var(--muted); font-size:0.6875rem; white-space:nowrap; text-overflow:ellipsis; }
.fl-floor-player.is-out small { color:var(--negative); font-weight:700; }
.fl-floor-off { margin-top:0.25rem; color:var(--muted); font:800 0.625rem var(--font-body); letter-spacing:0.08em; text-transform:uppercase; }
.fl-floor-none { color:var(--muted); }

/* The box score (the Slate live page's table, slate.css .slate-live-table). */
.fl-box-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 0.75rem; padding:0.625rem 1rem; border-bottom:1px solid var(--line); }
.fl-box-bar h3 { margin:0; font:800 1.05rem var(--font-display); }
.fl-box-team + .fl-box-team { border-top:1px solid var(--line); }
.fl-box-head { display:flex; align-items:center; gap:0.375rem; margin:0; padding:0.5rem 1rem 0.25rem; font:800 0.875rem var(--font-body); }
.fl-box-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.fl-box-table { width:100%; border-collapse:collapse; border-spacing:0; font:500 0.8125rem var(--font-body); font-variant-numeric:tabular-nums; }
.fl-box-table :is(th, td) { padding:0.4375rem 0.5rem; border-bottom:1px solid var(--line); background:var(--surface); text-align:right; white-space:nowrap; vertical-align:middle; }
.fl-box-table :is(th, td):first-child { position:sticky; left:0; z-index:1; padding-left:0.875rem; text-align:left; }
.fl-box-table thead th { color:var(--muted); font:700 0.6875rem var(--font-body); letter-spacing:0.05em; text-transform:uppercase; }
.fl-box-table thead abbr { text-decoration:none; }
.fl-box-table td.fl-box-fpts { color:var(--ink); font-weight:800; }
.fl-box-table td.fl-box-proj { color:var(--muted); font-weight:600; }
.fl-box-table .is-edge { box-shadow:inset -1px 0 0 var(--line); padding-right:0.625rem; }
.fl-box-table tr[data-fantasy-side] > :is(th, td) { background-color:color-mix(in srgb, var(--fantasy-side) 22%, var(--surface)); }
.fl-box-table tr[data-fantasy-side] > th { background-image:var(--fantasy-edge); background-position:0 0; background-size:3px 100%; background-repeat:no-repeat; }
.fl-box-table tr.fl-box-tier > th { padding-top:0.3125rem; padding-bottom:0.3125rem; background-color:var(--surface-subtle); color:var(--muted); font:800 0.6875rem var(--font-display); letter-spacing:0.1em; text-transform:uppercase; }
.fl-box-table tr.fl-box-tier > th b { color:var(--ink); }
.fl-box-table tfoot :is(th, td) { border-top:2px solid var(--line); border-bottom:0; font-weight:800; }
.fl-box-name { display:inline-flex; align-items:center; gap:0.375rem; max-width:11rem; }
.fl-box-player { overflow:hidden; color:var(--ink); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.fl-box-name small { color:var(--muted); font-size:0.6875rem; font-weight:600; }
.fl-box-name.is-stack { display:grid; gap:0; }
.fl-box-name.is-stack small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-box-dnp { margin:0; padding:0.5rem 1rem; color:var(--muted); font-size:0.75rem; }

/* Below a wide laptop: one column, the switch first; the band sticks while the view scrolls. */
@media (max-width: 75em) {
  .fl-grid { grid-template-columns:minmax(0, 1fr); }
  .fl-main { order:-1; }
  .fl-grid:not(.is-tab-starters) .fl-col, .fl-grid.is-tab-starters .fl-main > :not(.fl-tabs) { display:none; }
  .fl-sticky { position:sticky; top:0; z-index:2; }
}
@media (max-width: 40em) {
  .fl-page { gap:0.625rem; }
  .fl-head h2 { font-size:1.5rem; }
  .fl-sub { font-size:0.75rem; }
  .fl-band { grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); gap:0.375rem 0.5rem; padding:0.5rem 0.75rem 0; }
  .fl-side { gap:0; }
  .fl-pts { font-size:1.75rem; }
  .fl-who { font-size:0.75rem; }
  .fl-who small, .fl-count, .fl-pace-label { display:none; }
  .fl-proj { font-size:0.6875rem; }
  .fl-proj b { font-size:0.75rem; }
  .fl-mid { gap:0.1875rem; }
  .fl-state { padding:0.125rem 0.375rem; font-size:0.6875rem; }
  .fl-win { font-size:0.6875rem; white-space:nowrap; }
  .fl-win b { font-size:0.8125rem; }
  .fl-bar { height:6px; }
  .fl-foot { flex-wrap:nowrap; gap:0.5rem; padding-bottom:0.4375rem; font-size:0.6875rem; }
  .fl-foot-line { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .fl-pace { flex:none; flex-wrap:nowrap; gap:0.1875rem; }
  .fl-pace button { min-height:1.5rem; padding:0 0.375rem; font-size:0.6875rem; }
  .fl-game { min-width:7.25rem; gap:0.125rem; padding:0.3125rem 0.5rem; font-size:0.6875rem; }
  .fl-game-line { font-size:0.8125rem; }
  .fl-game.is-all { padding-inline:0.75rem; }
  .fl-all-count { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .fl-tabs button { min-height:2rem; padding:0.25rem 0.375rem; font-size:0.75rem; }
  .fl-plays-bar { flex-wrap:nowrap; padding:0.375rem 0.5rem; }
  .fl-plays-bar .fl-legend { display:none; }
  .fl-plays-bar .ar-seg.fl-seg { flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .fl-plays-bar .ar-seg.fl-seg > button { flex:none; min-height:0; height:1.75rem; padding:0 0.5rem; font-size:0.75rem; white-space:nowrap; }
  .fl-play { grid-template-columns:2.75rem auto minmax(0, 1fr) auto; gap:0.125rem 0.375rem; padding:0.3125rem 0.5rem 0.3125rem 0.625rem; font-size:0.78125rem; line-height:1.3; }
  .fl-play-clock { min-width:0; overflow:hidden; font-size:0.6875rem; }
  .fl-play-clock small { display:none; }
  .fl-play > .fl-play-clock { grid-area:1 / 1; align-self:end; }
  .fl-play > .fl-play-team { grid-area:2 / 1; align-self:start; }
  .fl-play > .fl-play-face { grid-area:1 / 2 / 3; }
  .fl-play > .fl-play-text { grid-area:1 / 3 / 3; }
  .fl-play > .fl-play-fp { grid-area:1 / 4 / 3; }
  .fl-play-team .team-boxes.is-sm { height:1rem; }
  .fl-play-team .team-boxes.is-sm .team-box { font-size:0.625rem; }
  .fl-play-fp { min-width:2.75rem; }
  .fl-play-fp b { font-size:0.875rem; }
  .fl-play-also { font-size:0.6875rem; }
  .fl-row { gap:0.375rem 0.5rem; padding:0.5rem 0.75rem; }
  .fl-floor { padding:0.5rem 0.5rem 0.625rem; }
  .fl-floor-team { padding-right:0.375rem; }
  .fl-floor-team.is-theirs { padding-left:0.375rem; }
  .fl-floor-player { gap:0.3125rem; margin:0 -0.25rem; padding:0.125rem 0.25rem 0.125rem 0.4375rem; }
  .fl-floor-player .fantasy-mini-photo .player-avatar { width:1.375rem; height:1.375rem; }
  .fl-floor-name { font-size:0.75rem; }
  .fl-floor-who small { font-size:0.625rem; }
  .fl-floor-pos { min-width:1.125rem; padding:0.0625rem 0.25rem; font-size:0.625rem; }
  .fl-box-table :is(th, td) { padding:0.375rem 0.3125rem; }
  .fl-box-table :is(th, td):first-child { padding-left:0.5rem; }
  .fl-box-name { max-width:8.5rem; }
  .fl-box-bar { padding:0.5rem 0.75rem; }
  .fantasy-game-follow { margin:0.375rem 0 0; }
  .fl-row .fantasy-mini-photo .player-avatar, .fl-play-face .player-avatar { width:1.5rem; height:1.5rem; }
  .fl-play-face { min-width:1.5rem; }
  .fl-bench-toggle { height:1.75rem; padding:0 0.5rem; }
  .fl-game-line > span { gap:0.25rem; }
}