/* Teams: team page and team index, built from the Arcade kit (arcade.css): ruled
   cards, mono numbers, pill tabs, mint/red rank chips. */
body[data-active-view=teams] .page-heading { display:none; }
/* Team names across the site link to their Teams page; they read as text until hovered. */
a.team-name-link { color:inherit; font:inherit; text-decoration:none; }
a.team-name-link:hover, a.team-name-link:focus-visible { color:var(--accent); text-decoration:underline; text-underline-offset:0.15em; }
.team-page { display:grid; grid-template-columns:minmax(0, 1fr); gap:1.125rem; }
#teams .team-body { display:grid; grid-template-columns:minmax(0, 1fr); gap:1.125rem; min-width:0; }

/* Shared pieces. */
.team-muted { color:var(--muted); }
.team-footnote { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.45; }
#teams .team-actions { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem; margin-top:0.875rem; }
.team-chip { display:inline-flex; align-items:center; padding:0.1875rem 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); white-space:nowrap; }
.team-page .team-more-link, .team-rank-dialog .team-more-link { display:inline-flex; align-items:center; min-height:2.5rem; padding:0; border:0; background:none; color:var(--accent); font:800 0.8125rem var(--font-body); text-decoration:none; white-space:nowrap; cursor:pointer; }
.team-page .team-more-link:hover, .team-page .team-more-link:focus-visible { text-decoration:underline; text-underline-offset:0.2em; }
.team-link { display:inline-flex; align-items:center; gap:0.375rem; min-width:0; padding:0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; text-decoration:none; }
.team-link:hover span, .team-link:focus-visible span { color:var(--accent); text-decoration:underline; }
.team-player-name { font-weight:700; text-align:left; }
.team-mini-badge { width:1.375rem; height:1.375rem; min-width:1.375rem; padding:0; border:0; background:none; box-shadow:none; }
.team-mini-badge img { width:100%; height:100%; object-fit:contain; }
.team-eyebrow { margin:0; color:var(--accent); font-size:0.625rem; font-weight:750; letter-spacing:0.12em; text-transform:uppercase; }

/* Cards: the kit's ruled surface (arcade.css sets border and radius). */
#teams .team-card { min-width:0; padding:1.125rem 1.25rem; background:var(--surface); }
#teams .team-card h3 { margin:0 0 0.75rem; font:800 1.375rem/1.15 var(--font-display); letter-spacing:-0.02em; }
#teams .team-card-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1rem; margin-bottom:0.875rem; }
#teams .team-card-head h3 { margin:0; }
#teams .team-card-meta { color:var(--muted); font:700 0.75rem var(--font-mono); }
#teams .team-card-lead { margin:-0.25rem 0 0.75rem; color:var(--muted); font-size:0.875rem; }
#teams .team-card-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1rem; margin-top:0.875rem; }
#teams .team-subhead { margin:1rem 0 0.5rem; color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }

/* Hero: badge tile, breadcrumb, name, record chip and pills; the next game on the
   right; section tabs, team picker and season along the bottom. */
#teams .team-hero { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.875rem; min-width:0; padding:1.25rem 1.375rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; }
#teams .team-hero-top { display:flex; align-items:center; gap:1.5rem; min-width:0; }
#teams .team-hero-logo { flex:0 0 auto; }
#teams .team-hero-badge { display:grid; place-items:center; width:5.25rem; height:5.25rem; min-width:5.25rem; padding:0.625rem; border:0; background:none; box-shadow:none; }
#teams .team-hero-badge img { width:100%; height:100%; object-fit:contain; }
#teams .team-hero-badge.is-logo-low { --tb-low-logo-filter:drop-shadow(0 0 1px rgb(255 255 255 / 0.9)) drop-shadow(0 0 1px rgb(255 255 255 / 0.9)); }
#teams .team-hero-copy { display:grid; flex:1 1 0; gap:0.625rem; min-width:0; }
.team-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; color:var(--muted); font-size:0.8125rem; font-weight:700; }
.team-crumbs a { color:var(--muted); text-decoration:none; }
.team-crumbs a:hover, .team-crumbs a:focus-visible { color:var(--accent); text-decoration:underline; }
#teams .team-hero-title { display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem 1rem; min-width:0; }
#teams .team-hero h2 { margin:0; font:800 3rem/0.95 var(--font-display); letter-spacing:-0.04em; }
#teams .team-hero-facts { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.625rem; margin:0; }
#teams .team-hero-record { display:inline-flex; align-items:center; height:2.25rem; padding:0 0.75rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--green); color:var(--accent-ink); box-shadow:none; font:700 1.25rem var(--font-mono); }
#teams .team-hero-pill { padding:0.25rem 0.75rem; border:2px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); font-size:0.8125rem; font-weight:800; white-space:nowrap; }
#teams .team-hero-pill.is-mono { color:var(--muted); font:700 0.75rem var(--font-mono); }
#teams .team-hero-next { display:flex; flex-direction:column; align-items:flex-end; gap:0.5rem; margin-left:auto; }
#teams .team-hero-open { min-height:3rem; border-radius:var(--r-control); box-shadow:none; font:800 1.0625rem var(--font-display); white-space:nowrap; }
#teams .team-hero-tools { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
#teams .team-season select { height:2.5rem; padding:0 0.625rem; }

/* Section tabs: a pill track; the chosen tab fills blue. */
#teams .team-sections { display:inline-flex; gap:0.25rem; max-width:100%; overflow-x:auto; padding:0.25rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--bg); scrollbar-width:none; }
#teams .team-sections button { flex:0 0 auto; min-height:2.5rem; padding:0 1.125rem; border:2px solid transparent; border-radius:var(--r-control); background:none; color:var(--muted); font:800 0.875rem var(--font-body); cursor:pointer; }
#teams .team-sections button:hover { color:var(--ink); }
#teams .team-sections button[aria-selected=true] { border-color:var(--accent); background:var(--selected-bg); color:var(--ink); }

/* Team picker (hero) and the Teams nav menu share the division panel. */
.team-picker { position:relative; }
.team-picker-button { display:flex; align-items:center; gap:0.5rem; height:2.5rem; padding:0 0.75rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); box-shadow:none; font-weight:800; cursor:pointer; }
.team-picker-button:hover, .team-picker-button[aria-expanded=true] { background:var(--surface-strong); }
.team-picker-caret { color:var(--accent); font-size:0.75rem; }
.team-picker-panel { position:absolute; top:calc(100% + 0.5rem); right:0; z-index:20; display:grid; grid-template-columns:repeat(2, minmax(15rem, 1fr)); gap:1.25rem; width:max-content; max-width:min(40rem, calc(100vw - 2rem)); max-height:min(34rem, 70vh); overflow:auto; padding:1rem; background:var(--surface); }
.team-picker-panel[hidden] { display:none; }
.team-picker-conference h3 { margin:0 0 0.5rem; font-size:1rem; }
.team-picker-conference section+section { margin-top:0.75rem; }
.team-picker-conference h4, .team-nav-menu h4 { margin:0 0 0.375rem; padding-left:0.375rem; color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
/* The team picker (StudioKit.teamPicker, UI-348) on Teams and Roles: its choices are links
   on Teams and buttons on Roles, drawn the same ("html body" outranks the page-wide button
   styles). Roles adds an "All teams" row on top. */
.team-picker-conference ul, .team-nav-menu ul, .team-picker-any { display:grid; gap:0.125rem; margin:0; padding:0; list-style:none; }
.team-picker-any { grid-column:1 / -1; }
.team-nav-menu a, html body .team-picker-panel :is(.team-picker-conference, .team-picker-any) :is(a, button) { display:flex; align-items:center; gap:0.5rem; width:100%; min-height:0; margin:0; padding:0.4375rem 0.5rem; border:2px solid transparent; border-radius:var(--r-control); background:none; box-shadow:none; color:var(--ink); font:650 0.875rem var(--font-body); letter-spacing:normal; text-align:left; text-decoration:none; text-transform:none; cursor:pointer; }
.team-nav-menu a:hover, .team-nav-menu a:focus-visible, html body .team-picker-panel :is(.team-picker-conference, .team-picker-any) :is(a, button):is(:hover, :focus-visible) { border-color:var(--line); background:var(--surface-raised); }
.team-nav-menu a[aria-current=true], html body .team-picker-panel :is(.team-picker-conference, .team-picker-any) :is(a, button)[aria-current=true] { border-color:var(--accent); color:var(--accent); font-weight:800; }
/* Tab menu: the Teams tab (inside Matchups) opens every team by division. */
.team-nav-menu { position:fixed; z-index:60; grid-template-columns:repeat(4, minmax(12.5rem, 1fr)); gap:1rem 1.25rem; max-width:calc(100vw - 2rem); max-height:calc(100vh - 6rem); padding:1.125rem; box-shadow:none; }
.team-nav-menu .team-nav-conference { grid-column:1 / -1; margin:0 0 -0.5rem; padding:0 0.375rem; font:800 1.125rem/1 var(--font-display); }
.team-nav-menu .team-nav-conference:not(:first-child) { padding-top:1rem; border-top:1px solid var(--line); }

/* Stat tiles: label, big mono number, league-rank chip. Each opens all teams ranked. */
#teams .team-tiles { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:1rem; }
#teams .team-tile { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:0.5rem; min-height:7.5rem; padding:0.875rem 1rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:var(--ink); box-shadow:none; font:inherit; text-align:left; cursor:pointer; transition:transform 80ms ease, box-shadow 80ms ease; }
#teams .team-tile:hover { border-color:var(--muted); }
#teams .team-tile:active { transform:translateY(1px); }
#teams .team-tile>small:first-child { color:var(--muted); font-size:0.8125rem; font-weight:700; }
#teams .team-tile strong { font:700 2.375rem/1 var(--font-mono); letter-spacing:-0.04em; }
@media (prefers-reduced-motion: reduce) { .team-tile { transition:none; } }

/* League rank chip, prop side: mint = soft (a top offense, a soft defense), red = tough. */
.team-rank { display:inline-block; min-width:2.25rem; padding:0.0625rem 0.5rem; border:2px solid var(--line); border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font:700 0.6875rem var(--font-mono); text-align:center; white-space:nowrap; }
.team-rank.is-strong, .team-rank.is-soft { border-color:var(--edge); background:var(--green); color:var(--accent-ink); }
.team-rank.is-weak, .team-rank.is-tough { border-color:var(--edge); background:var(--negative); color:var(--accent-ink); }
.team-pos-chip { display:inline-block; min-width:1.75rem; --chip-min:1.25rem; margin-right:0.375rem; padding:0.0625rem 0.25rem; border-radius:var(--r-data); background:var(--line); color:var(--ink); font:700 0.625rem var(--font-mono); text-align:center; }
.team-pos-chip:empty { display:none; }

/* Overview: tiles, then the next game and who gets the ball, with schedule, soft
   spots and standings in a 420px rail. */
#teams .team-overview { display:grid; grid-template-columns:minmax(0, 1fr) 26.25rem; gap:1.25rem; align-items:start; }
#teams .team-overview-main, #teams .team-overview-rail { display:grid; grid-template-columns:minmax(0, 1fr); gap:1.125rem; min-width:0; }

/* Next game. */
#teams .team-next { container-type:inline-size; background:var(--surface-raised); box-shadow:none; }
.team-next-plays { display:flex; flex-direction:column; gap:0.75rem; min-width:0; }
.team-matchup { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; min-height:4.375rem; padding:0.5rem 0.875rem; border:2px solid var(--line); border-radius:var(--r-card); background:var(--bg); }
.team-matchup-side { flex:1 1 0; display:flex; align-items:center; gap:0.625rem; min-width:0; }
.team-matchup-side.is-home { flex-direction:row-reverse; text-align:right; }
.team-matchup-badge { display:grid; place-items:center; flex:0 0 auto; width:2.75rem; height:2.75rem; padding:0.3125rem; border:0; background:none; }
.team-matchup-badge img { width:100%; height:100%; object-fit:contain; }
.team-matchup-copy { display:grid; min-width:0; }
.team-matchup-copy strong { display:block; overflow:hidden; font-size:1rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.team-matchup-copy small { color:var(--muted); font:700 0.75rem var(--font-mono); overflow-wrap:anywhere; }
.team-matchup-name { display:block; min-width:0; max-width:100%; }
.team-matchup-at { color:var(--muted); font:800 1.375rem var(--font-display); }
/* UI-385: at 200% text on a phone the two sides and the team boxes don't fit on one line
   (the records wrapped a letter a line). The card is measured in its own text size, so
   only large text stacks them: away, the boxes, then home. */
@container (max-width: 14em) {
  #teams .team-matchup { flex-wrap:wrap; justify-content:center; }
  #teams .team-matchup-side { flex:1 1 100%; }
}
.team-lines { display:flex; flex-direction:column; gap:0.375rem; }
/* Shared timing states, with Teams' own compact price grid (no header flex basis). */
#teams .team-lines>.studio-game-lines { flex:none; width:100%; margin:0; padding:0; border:0; }
/* UI-622: by team. Away's column left, home's right (as the matchup above), each headed by
   its club's box with its spread and moneyline under it; the total spans both as Over / Under.
   Each button names its side inside it ("MIN -2.5 -105", "NO ML +114"). */
.team-lines-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.375rem 0.5rem; }
.team-lines-col { display:flex; flex-direction:column; gap:0.375rem; min-width:0; }
.team-lines-head { display:flex; justify-content:center; padding-bottom:0.125rem; }
.team-lines-total { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.5rem; }
.team-line { display:flex; align-items:center; min-width:0; }
.team-line>:is(.bet-side, small, .no-upcoming-line) { flex:1 1 auto; min-width:0; }
html body[data-layout] .team-page .team-line .bet-side { justify-content:flex-start; gap:0.375rem; margin:0; }
html body[data-layout] .team-page .team-line .bet-side strong { margin-left:auto; }
.team-line .bet-side-label { font-weight:800; }
.team-play-bet .bet-side > .bet-side-label { margin-right:-0.125rem; font:600 0.75rem/1 var(--font-body); opacity:0.78; }
.team-play-bet .bet-side > .bet-side-label + span { margin-right:auto; }
/* One column (away's bets, home's, then the total) once two would not fit the
   longest button, "MIN -2.5 -105": a 320 phone at large text sizes. */
@container (max-width: 17.5em) {
  .team-lines-grid, .team-lines-total { grid-template-columns:minmax(0, 1fr); }
  .team-lines-head { justify-content:flex-start; }
}
html body[data-layout] .team-page :is(.team-line, .team-play-bet) .bet-side { display:inline-flex; flex-direction:row; align-items:center; min-height:0; justify-content:space-between; gap:0.5rem; height:2.5rem; margin:0 3px 3px 0; padding:0 0.75rem; background:var(--surface); color:var(--ink); box-shadow:none; font:700 0.875rem var(--font-mono); white-space:nowrap; }
html body[data-layout] .team-page :is(.team-line, .team-play-bet) .bet-side strong { color:var(--muted); font-weight:700; }
html body[data-layout] .team-page :is(.team-line, .team-play-bet) .bet-side[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); }
html body[data-layout] .team-page :is(.team-line, .team-play-bet) .bet-side[aria-pressed=true] strong { color:var(--accent-ink); }
html body .team-page :is(.team-line, .team-play-bet) .bet-side:not(:disabled):hover { border-color:var(--muted); }
.team-next-missing { margin:0; font-size:0.75rem; }
.team-plays-empty { margin:0; padding:0.75rem; border:2px dashed var(--line); border-radius:var(--r-card); font-size:0.8125rem; }
.team-next-chips { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.team-next-chips:empty { display:none; }
.team-next-chips .studio-weather { display:inline-flex; align-items:center; gap:0.375rem; padding:0.3125rem 0.625rem; border:2px solid var(--line); border-radius:var(--r-data); background:var(--bg); font:700 0.75rem var(--font-mono); }
.team-next-chips .studio-weather-icon { width:1.125rem; height:1.125rem; }
.team-next-chips .studio-weather-copy { display:flex; align-items:baseline; gap:0.375rem; }
.team-next-chips .studio-weather :is(small, span, strong) { font:inherit; letter-spacing:0; text-transform:none; white-space:nowrap; }
.team-next-chips .studio-weather-copy small { color:var(--muted); }
.team-next-chips .studio-weather-copy .studio-weather-stale { color:var(--thin); }
/* Who is out or questionable (UI-701): the Key injuries dialog's status chip (.injury-chip and
   its tones, players.css) around the player's name, the status a small word at its end. The
   fantasy owner tag sits beside the chip, in .team-injury-owner. */
.team-injury { display:inline-flex; align-items:center; min-width:0; max-width:100%; }
.team-injury-chip.injury-chip { gap:0.3125rem; min-width:0; padding:0.1875rem 0.5rem; font:700 0.6875rem/1.2 var(--font-body); letter-spacing:0; text-transform:none; cursor:help; }
.team-injury-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.team-injury-name { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.team-injury-status { font:800 0.625rem/1 var(--font-display); letter-spacing:0.04em; text-transform:uppercase; opacity:0.85; }
.team-injury-owner { flex:none; font-size:0.6875rem; line-height:1; }
.team-injury-owner:empty { display:none; }
/* The card is a narrow column on most screens: "Quest." there, as the dialog has it on phones. */
@container (max-width:30rem) {
  .team-injury-status[data-short] { font-size:0; }
  .team-injury-status[data-short]::after { content:attr(data-short); font-size:0.625rem; }
}
.team-next-links { display:flex; flex-wrap:wrap; gap:0.375rem 1rem; }

/* Top plays: one list, both teams, best Play Score first. */
.team-plays { display:flex; flex-direction:column; gap:0.625rem; }
.team-play-list { display:flex; flex-direction:column; gap:0.625rem; margin:0; padding:0; list-style:none; }
.team-play { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; grid-template-areas:"rank who score bet" ". evidence evidence evidence"; align-items:center; gap:0.25rem 0.625rem; padding:0.5rem 0.625rem 0.5rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); cursor:pointer; }
.team-play:hover { border-color:var(--line); }
.team-play>.ar-rank { grid-area:rank; width:1.75rem; height:1.75rem; border-radius:var(--r-data); border-color:var(--line); color:var(--ink); font-size:0.75rem; }
.team-play-who { grid-area:who; display:grid; justify-items:start; gap:0.0625rem; min-width:0; }
.team-play-who .team-player-name { max-width:100%; overflow:hidden; padding:0; border:0; background:none; color:var(--ink); font-size:0.9375rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.team-play-who .team-player-name:hover { color:var(--accent); }
.team-play-prop { max-width:100%; overflow:hidden; padding:0; border:0; background:none; color:var(--muted); font:inherit; font-size:0.75rem; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.team-play-prop:hover, .team-play-prop:focus-visible { color:var(--ink); text-decoration:underline; }
.team-play-score.ar-score { grid-area:score; min-width:0; height:auto; padding:0.125rem 0.4375rem; border-radius:var(--r-card); font-size:0.75rem; }
.team-play-score.ar-score:not(.is-high):not(.is-mid) { background:var(--gold); color:var(--accent-ink); }
.team-play-bet { grid-area:bet; display:flex; }
.team-play-bet .bet-side { min-width:6.5rem; }
.team-play-evidence { grid-area:evidence; display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.875rem; color:var(--ink); font:700 0.6875rem var(--font-mono); }
.team-play-evidence>span { display:inline-flex; align-items:center; gap:0.3125rem; }
.team-play-evidence small { color:var(--muted); font:600 0.6875rem var(--font-body); }
.team-play-evidence .ar-dots { gap:0.1875rem; }
.team-play-evidence .ar-dot { width:0.5rem; height:0.5rem; }
.team-plays-links { display:flex; flex-wrap:wrap; gap:0.375rem 1rem; }

/* Who gets the ball: target and carry share bars. */
.team-share-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.75rem; }
.team-share-group h4 { display:flex; align-items:center; gap:0.5rem; margin:0 0 0.375rem; font-size:0.8125rem; font-weight:800; }
.team-share-group h4::before { content:""; width:0.75rem; height:0.75rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--tone); }
.team-share-group.is-target { --tone:var(--accent); }
.team-share-group.is-carry { --tone:var(--lilac); }
.team-share-list { display:grid; margin:0; padding:0; list-style:none; }
.team-share-list li { display:grid; grid-template-columns:minmax(0, 12.5rem) minmax(0, 1fr) 3rem; align-items:center; gap:0.75rem; min-height:2.875rem; }
.team-share-who { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.team-share-who .ar-pos { flex:none; min-width:1.75rem; --chip-min:1rem; justify-content:center; text-align:center; font-size:0.625rem; }
.team-share-who .team-player-name { min-width:0; overflow:hidden; padding:0; border:0; background:none; color:var(--ink); font-size:0.875rem; text-overflow:ellipsis; white-space:nowrap; }
.team-share-who .team-player-name:hover { color:var(--accent); }
.team-name-short { display:none; }
@media (max-width:30em) {
  .team-share-who .team-name-full { display:none; }
  .team-share-who .team-name-short { display:inline; }
}
.team-share-bar { display:flex; height:1.375rem; overflow:hidden; border:2px solid var(--line); border-radius:0; background:var(--bg); }
.team-share-bar i { display:block; max-width:100%; background:var(--tone); border-right:1px solid var(--line); }
.team-share-list b { font:700 0.9375rem var(--font-mono); text-align:right; }
#teams .team-week { color:var(--muted); font:700 0.75rem var(--font-mono); white-space:nowrap; }
#teams .team-at { color:var(--muted); font-size:0.8125rem; font-weight:700; }

/* Defense soft spots: per-game production allowed vs the league average. */
.team-soft { display:flex; flex-direction:column; gap:0.25rem; margin:0; padding:0; list-style:none; }
.team-soft-spot { display:grid; width:100%; grid-template-columns:minmax(0, 1fr) 9.375rem 3.25rem; align-items:center; gap:0.75rem; min-height:2.125rem; padding:0.125rem 0.25rem; border:0; border-radius:var(--r-control); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.team-soft-spot:hover { background:var(--surface-raised); }
.team-soft-spot.is-soft { --tone:var(--green); }
.team-soft-spot.is-even { --tone:var(--gold); }
.team-soft-spot.is-tough { --tone:var(--negative); }
/* The baseline toggle (UI-182) sits with the rank chip on the right; on a phone both wrap under the title. */
#teams .team-soft-card .team-card-head { justify-content:flex-start; }
#teams .team-soft-basis { margin-left:auto; }
#teams .team-soft-basis button { white-space:nowrap; }
.team-soft-spot.is-thin .team-soft-bar, .team-soft-spot.is-thin strong { opacity:0.45; }
.team-soft-what { display:flex; align-items:center; gap:0.5rem; min-width:0; font-size:0.875rem; font-weight:700; }
.team-soft-what .ar-pos { font-size:0.625rem; }
.team-soft-bar { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.team-soft-bar>span { display:flex; height:1.125rem; }
.team-soft-bar>span:first-child { justify-content:flex-end; }
.team-soft-bar>span:last-child { height:1.625rem; align-items:center; border-left:2px solid var(--muted); }
.team-soft-bar i { display:block; height:1.125rem; min-width:4px; border:1px solid var(--line); background:var(--tone); }
.team-soft-bar>span:first-child i { border-radius:0; }
.team-soft-bar>span:last-child i { border-radius:0; }
.team-soft-spot strong { color:var(--tone); font:700 0.875rem var(--font-mono); text-align:right; }
/* Large text on a phone (UI-325): under 15em of list the stat takes the full first row and
   the bar and its gap the second, instead of pushing the gap off the screen. A 320px phone
   at the default size has about 16.5em. */
.team-soft { container:team-soft / inline-size; }
@container team-soft (max-width: 15em) {
  .team-soft .team-soft-spot { grid-template-columns:minmax(0, 1fr) auto; row-gap:0.25rem; padding-block:0.25rem; }
  .team-soft .team-soft-spot>.team-soft-what { grid-column:1 / -1; }
}

/* Tables. */
.team-table-wrap { overflow-x:auto; }
.team-table { width:100%; border-collapse:collapse; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.team-table th, .team-table td { padding:0.4375rem 0.5rem; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.team-table th:first-child, .team-table td:first-child, .team-table .is-text { text-align:left; }
.team-table td.is-text { white-space:normal; }
.team-table thead th { color:var(--muted); font:700 0.625rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
.team-table tbody th { font-weight:700; }
.team-table tbody tr:last-child>* { border-bottom:0; }
.team-table tr.is-current { background:var(--accent-soft); }
.team-table small { font-size:0.6875rem; }
.team-standings td { font-family:var(--font-mono); font-size:0.75rem; }
.team-avatar { flex:0 0 auto; padding:0; border:0; background:none; }
.team-avatar .player-avatar { position:relative; display:block; width:2rem; height:2.25rem; overflow:hidden; border-radius:var(--r-control); background:var(--surface-raised); }
.team-avatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.team-avatar .avatar-initials { display:grid; place-items:center; height:100%; color:var(--muted); font-size:0.625rem; }
/* Headshot sizes beside names (UI-161): small in dense lists, larger on the Things to know
   cards, a round dot inside an injury chip. */
.team-avatar:is(.is-sm, .is-card) { display:block; line-height:0; }
.team-avatar.is-sm .player-avatar { width:1.5rem; height:1.625rem; border-radius:var(--r-control); }
.team-avatar.is-sm .avatar-initials { font-size:0.5625rem; }
.team-avatar.is-card .player-avatar { width:2.75rem; height:3rem; border-radius:var(--r-control); }
.team-avatar.is-card .avatar-initials { font-size:0.75rem; }
.team-avatar.is-chip { display:inline-block; margin:-0.125rem 0 -0.125rem -0.375rem; vertical-align:middle; }
.team-avatar.is-chip .player-avatar { width:1.125rem; height:1.125rem; border-radius:var(--r-control); background:var(--surface); }
.team-avatar.is-chip .avatar-initials { font-size:0.4375rem; }
.team-play-who { grid-template-columns:auto minmax(0, 1fr); column-gap:0.5rem; align-items:center; }
.team-play-who>.team-avatar { grid-row:1 / span 2; }
.team-play-who>:not(.team-avatar) { grid-column:2; }
#teams .team-know-who { display:flex; align-items:center; gap:0.625rem; min-width:0; }
.team-big-who, .team-def-leader { display:inline-flex; align-items:center; gap:0.375rem; min-width:0; }
.team-def-leader .team-player-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Lists used by Defense. */
.team-big, .team-def-leaders { display:grid; margin:0; padding:0; list-style:none; }
.team-big li { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; padding:0.375rem 0; border-top:1px solid var(--line); font-size:0.8125rem; }
.team-big .team-muted { min-width:0; }
/* Phones: two rows, week and player over the prop, the result and its margin at the right. */
@media (max-width:40em) {
  .team-big li { display:grid; grid-template-columns:1.75rem auto minmax(0, 1fr) auto; }
  .team-big li>.team-week { grid-row:1 / span 2; }
  .team-big li>.team-big-market { grid-column:2 / 4; grid-row:2; }
  .team-big li>.team-big-stat { grid-column:4; grid-row:1; }
  .team-big li>.team-rank { grid-column:4; grid-row:2; justify-self:end; }
}
/* Narrow lists (UI-417): under 20em of list (a 320 or 360 phone at the default size has
   about 16.5em / 19.25em, a 390 phone 21.2em), the player's name shares no line with the
   result: the week, team and player take the first line, the prop the second, and the
   result and its margin the last, so the name shows whole (in the two-line layout "Patrick
   Mahomes" kept 60 of 118px at 320 and 100 at 360). A name too long for its line wraps at
   its space. The em are the list's own, so this follows the text size. */
.team-big { container:team-big / inline-size; }
@container team-big (max-width: 20em) {
  .team-big li { display:flex; flex-wrap:wrap; }
  .team-big li>.team-big-who { flex:1 1 0; }
  .team-big li>.team-big-market { flex:1 0 100%; }
  .team-big li>.team-big-stat { margin-left:0; margin-right:auto; }
  .team-big li>.team-rank { margin-left:auto; }
  .team-big li .team-player-name { white-space:normal; overflow-wrap:anywhere; text-align:left; }
}
/* Large text on a phone (UI-311): under 15em (about 10em at 200% text on a 390 phone) the
   player gets a line of their own too, under the week and team (beside them the name kept
   ~4 letters), and the margin drops below the result when both don't fit (as on a 320
   phone), so "26 vs 33.5" isn't clipped either. */
@container team-big (max-width: 15em) {
  .team-big li>.team-big-who { flex:1 0 100%; }
}
.team-big li:first-child, .team-def-leaders li:first-child { border-top:0; }
.team-big .team-player-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-big-stat { margin-left:auto; white-space:nowrap; color:var(--muted); }
.team-big-stat strong { color:var(--ink); }
.team-def-leaders li { display:grid; grid-template-columns:7.5rem minmax(0, 1fr) auto; align-items:center; gap:0.5rem; padding:0.375rem 0; border-top:1px solid var(--line); font-size:0.8125rem; }
.team-def-leaders small { color:var(--muted); font-size:0.6875rem; }
.team-def-leaders strong { font-family:var(--font-mono); }
.team-dots { display:inline-flex; flex-wrap:wrap; gap:0.1875rem; margin-right:0.25rem; vertical-align:middle; }
/* Result marks: same-size colour squares with no glyph, the Offense props strip's marks (UI-374, UI-542). */
.team-dot, .team-dot.ar-dot { display:inline-block; flex:none; width:0.8125rem; height:0.8125rem; border-radius:0.1875rem; background:#6a5b82; }
.team-outcome-legend { margin:0 0 0.75rem; color:var(--muted); font-size:0.6875rem; line-height:1.6; }
/* The legend's colour keys: every mark is colour only (UI-462, UI-542). */
.team-legend-dot { display:inline-block; width:0.625rem; height:0.625rem; border-radius:0.125rem; vertical-align:-0.0625rem; }
.team-legend-dot.is-hit { background:var(--positive); } .team-legend-dot.is-miss { background:var(--negative); } .team-legend-dot.is-push { background:var(--gold); }
.team-dot.is-over, .team-dot.is-hit { background:var(--positive); }
.team-dot.is-under, .team-dot.is-miss { background:var(--negative); }
.team-dot.is-push { background:var(--gold); }
/* Two charts side by side, until each would hold under 11rem: at 200% text on a desktop they
   stack instead of shrinking to half-size labels (UI-379). At the default size 11rem is
   about 194px, under the narrowest pair (about 205px at 961px), so nothing changes there. */
.team-trends { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap:0.75rem; }
.team-trend { min-width:0; }
.team-trend svg { display:block; width:100%; height:auto; max-height:12rem; color:var(--gold); overflow:visible; }
.team-trend svg path { fill:none; stroke:currentColor; stroke-width:2; }
.team-trend svg circle { fill:currentColor; }
.team-trend svg line { stroke:var(--muted); stroke-opacity:0.3; }
.team-trend svg text { fill:var(--muted); font-size:calc(1rem * 10 / 17.6); text-anchor:middle; }
/* The scale and point values (UI-275). */
.team-trend svg .team-trend-grid { stroke:var(--line); stroke-opacity:1; stroke-dasharray:2 4; }
.team-trend svg .team-trend-axis { text-anchor:end; font-family:var(--font-mono); font-size:calc(1rem * 9 / 17.6); }
.team-trend svg .team-trend-value { fill:var(--ink); font-weight:700; font-size:calc(1rem * 9 / 17.6); font-variant-numeric:tabular-nums; }
.team-trend summary { cursor:pointer; font-size:0.75rem; }
.team-trend ul { padding:0; list-style:none; }
.team-trend li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.125rem 0.5rem; padding:0.25rem 0; font-size:0.75rem; }
.team-trend li small { grid-column:1 / -1; color:var(--muted); }
@media (max-width:700px) { .team-trends { grid-template-columns:minmax(0,1fr); } }
/* A phone draws the 300-wide chart at ~250px, so its text is set larger to stay ~10px.
   The chart's sizes are rem, written as the px they were over the default root size (110%,
   17.6px), so the labels grow with a larger text size like the values list below (UI-311). */
@media (max-width:40em) {
  .team-trend svg text { font-size:calc(1rem * 12 / 17.6); }
  .team-trend svg :is(.team-trend-axis, .team-trend-value) { font-size:calc(1rem * 11 / 17.6); }
}
/* At a large text size (under 12em of chart width, about 10em at 200% on a 390 phone; at the
   default size the narrowest is about 12.8em, two charts side by side at 961px) the first
   value reads rightward from its point and the last leftward, so the grown labels clear
   the y scale and the chart's right edge. */
.team-trend { container:team-trend / inline-size; }
@container team-trend (max-width: 12em) {
  .team-trend svg .team-trend-value:nth-child(1 of .team-trend-value) { text-anchor:start; }
  .team-trend svg .team-trend-value:nth-last-child(1 of .team-trend-value) { text-anchor:end; }
}

/* Team index: eight division cards, standings order. */
.team-landing { display:grid; gap:0.375rem; padding:1.25rem 1.375rem; border-radius:var(--r-card); }
.team-landing h2 { margin:0; font:800 2.5rem/1 var(--font-display); letter-spacing:-0.04em; }
.team-landing p { margin:0; font-size:0.875rem; }
.team-landing-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; }
#teams .team-division h3 { font-size:1.25rem; }
.team-landing-conference { grid-column:1 / -1; display:flex; align-items:center; gap:0.75rem; margin:0.5rem 0 -0.25rem; font:800 1.5rem/1 var(--font-display); letter-spacing:-0.02em; }
.team-landing-conference:first-child { margin-top:0; }
.team-landing-conference::after { content:""; flex:1; height:1px; background:var(--line); }
#teams .team-division h4 { margin:0 0 0.75rem; font:800 1.25rem/1.15 var(--font-display); letter-spacing:-0.02em; }
.team-landing-list { display:flex; flex-direction:column; gap:0.375rem; margin:0; padding:0; list-style:none; }
.team-landing-list li { position:relative; display:grid; grid-template-columns:1.25rem minmax(0, 1fr) auto; align-items:center; gap:0.5rem; min-height:2.625rem; padding:0.25rem 0.625rem; border:2px solid var(--line); border-radius:var(--r-control); background:var(--bg); font-size:0.875rem; }
.team-landing-list li:hover, .team-landing-list li:focus-within { border-color:var(--accent); }
.team-landing-list .team-link { font-weight:700; }
.team-landing-list .team-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The whole row is the link's hit area. */
.team-landing-list .team-link::after { content:""; position:absolute; inset:0; border-radius:var(--r-control); }
.team-landing-place { color:var(--muted); font:700 0.75rem var(--font-mono); }
.team-landing-list small { color:var(--ink); font:700 0.75rem var(--font-mono); }

/* NBA: three divisions a conference, so East sits above West. */
@media (min-width:75.0625em) {
  .team-nav-menu[data-columns="3"] { grid-template-columns:repeat(3, minmax(12.5rem, 1fr)); }
  .team-landing-grid[data-columns="3"] { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
/* NBA at two columns: one conference a column, its heading over its three divisions. */
@media (min-width:40.0625em) and (max-width:75em) {
  .team-landing-grid[data-columns="3"] { grid-auto-flow:column; grid-template-rows:repeat(4, auto); }
  .team-landing-grid[data-columns="3"] .team-landing-conference { grid-column:auto; margin-top:0; }
}
@media (max-width:75em) {
  .team-nav-menu { grid-template-columns:repeat(2, minmax(12.5rem, 1fr)); }
  .team-nav-menu[data-columns="3"] { grid-auto-flow:column; grid-template-rows:repeat(4, auto); }
  .team-nav-menu[data-columns="3"] .team-nav-conference { grid-column:auto; padding-top:0; border-top:0; }
  .team-landing-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #teams .team-tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  #teams .team-overview { grid-template-columns:minmax(0, 1fr) 22rem; }
}
@media (max-width:60em) {
  #teams .team-overview { grid-template-columns:minmax(0, 1fr); }
  .team-picker-panel { left:0; right:auto; }
  #teams .team-hero-top { flex-wrap:wrap; }
  #teams .team-hero-next { flex-basis:100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-left:0; }
}
@media (max-width:40em) {
  .team-page, .team-body { gap:0.875rem; }
  .team-landing-grid { grid-template-columns:minmax(0, 1fr); }
  .team-landing h2 { font-size:1.875rem; }
  .team-nav-menu { right:1rem; left:1rem !important; grid-template-columns:repeat(2, minmax(0, 1fr)); width:auto; max-width:none; }
  #teams .team-hero { padding:1rem; border-radius:var(--r-card); }
  #teams .team-hero-top { align-items:flex-start; gap:1rem; }
  /* The name sits beside the badge while it has 9rem; at a large text size (200%) it drops
     under the badge instead of squeezing to a sliver ("KANSAS C", UI-261). */
  #teams .team-hero-copy { flex:1 1 9rem; }
  #teams .team-hero-badge { width:3.75rem; height:3.75rem; min-width:3.75rem; padding:0.4375rem; border-radius:var(--r-data); box-shadow:none; }
  #teams .team-hero h2 { font-size:1.875rem; }
  #teams .team-hero-record { height:1.875rem; font-size:1rem; }
  #teams .team-hero-next { flex-direction:column; align-items:stretch; }
  #teams .team-hero-open { justify-content:center; }
  #teams .team-sections { display:flex; }
  /* A link longer than the row (a large text size) wraps rather than widening the page. */
  .team-page .team-more-link { max-width:100%; white-space:normal; text-align:left; }
  #teams .team-sections button { flex:1 1 auto; padding:0 0.375rem; font-size:0.75rem; }
  #teams .team-hero-tools { justify-content:space-between; }
  .team-picker-panel { position:fixed; top:auto; left:1rem; right:1rem; grid-template-columns:minmax(0, 1fr); width:auto; max-width:none; }
  #teams .team-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.75rem; }
  #teams .team-tile { min-height:6.25rem; }
  #teams .team-tile strong { font-size:1.75rem; }
  /* UI-385: at 200% text a 360 phone's half-width tile is narrower than "Giveaways";
     hyphenate the label rather than push the page sideways. */
  #teams .team-tile>small:first-child { max-width:100%; hyphens:auto; overflow-wrap:break-word; }
  #teams .team-card { padding:1rem; }
  #teams .team-card h3, #teams .team-division h4 { font-size:1.1875rem; }
  .team-matchup { gap:0.375rem; padding:0.5rem 0.625rem; }
  .team-matchup-side { gap:0.4375rem; }
  .team-matchup-badge { width:2.25rem; height:2.25rem; border-radius:var(--r-data); }
  .team-matchup-at { font-size:1.125rem; }
  .team-page .team-line .bet-side { padding:0 0.5rem; font-size:0.8125rem; }
  .team-play { grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"rank who score" ". bet bet" ". evidence evidence"; }
  .team-play-bet .bet-side { flex:1 1 auto; }
  .team-share-grid { grid-template-columns:minmax(0, 1fr); gap:1rem; }
  .team-share-list li { grid-template-columns:minmax(0, 9.5rem) minmax(0, 1fr) 2.75rem; gap:0.5rem; }
  .team-soft-spot { grid-template-columns:minmax(0, 1fr) 6.5rem 3rem; gap:0.5rem; }
  .team-def-leaders { grid-template-columns:minmax(0, 1fr); }
}

/* Earlier Teams layout rules, still used by Fantasy and Usage pages that share
   these classes. They skip #teams, which uses the Arcade rules above. */
.team-hero:where(:not(#teams *)) { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:1rem 1.25rem; padding:1.125rem 1.25rem; border:1px solid var(--line); border-radius:var(--r-card); background:linear-gradient(120deg, var(--surface-raised), var(--surface)); }
.team-hero h2:where(:not(#teams *)) { margin:0.125rem 0 0.25rem; font-size:1.75rem; letter-spacing:-0.02em; }
.team-hero-facts:where(:not(#teams *)) { margin:0; color:var(--muted); font-size:0.8125rem; }
.team-hero-tools:where(:not(#teams *)) { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end; gap:0.625rem; }
.team-tiles:where(:not(#teams *)) { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:0.625rem; }
.team-tile:where(:not(#teams *)) { display:grid; align-content:start; justify-items:start; gap:0.25rem; padding:0.75rem 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; }
.team-tile:hover:where(:not(#teams *)) { border-color:var(--accent); background:var(--surface-raised); }
.team-tile:focus-visible:where(:not(#teams *)) { outline:2px solid var(--accent); outline-offset:2px; }
.team-tile>small:first-child:where(:not(#teams *)) { color:var(--muted); font-size:0.6875rem; font-weight:650; }
.team-tile strong:where(:not(#teams *)) { font-size:1.5rem; letter-spacing:-0.02em; }
.team-tile .team-rank:where(:not(#teams *)) { justify-self:start; }
.team-tile-note:where(:not(#teams *)) { color:var(--muted); font-size:0.6875rem; }
.team-card:where(:not(#teams *)) { min-width:0; padding:0.875rem 1rem 1rem; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.team-card h3:where(:not(#teams *)) { margin:0 0 0.75rem; font-size:0.9375rem; }
.team-subhead:where(:not(#teams *)) { margin:1rem 0 0.5rem; color:var(--muted); font-size:0.6875rem; font-weight:750; letter-spacing:0.08em; text-transform:uppercase; }
.team-actions:where(:not(#teams *)) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem; margin-top:0.875rem; }
.team-overview:where(:not(#teams *)) { display:grid; grid-template-columns:15rem minmax(0, 1fr) 21rem; grid-template-areas:"side tiles tiles" "side main rail"; gap:1rem; align-items:start; }
.team-overview-tiles:where(:not(#teams *)) { grid-area:tiles; }
.team-sidecar:where(:not(#teams *)) { grid-area:side; padding:0.875rem 0.5rem 0.625rem; }
.team-sidecar h3:where(:not(#teams *)) { margin:0 0.5rem 0.5rem; }
.team-overview-main:where(:not(#teams *)) { grid-area:main; display:grid; gap:1rem; min-width:0; }
.team-overview-rail:where(:not(#teams *)) { grid-area:rail; display:grid; gap:1rem; min-width:0; }
.team-side-list:where(:not(#teams *)) { display:grid; margin:0; padding:0; list-style:none; font-size:0.8125rem; }
.team-side-game:where(:not(#teams *)) { position:relative; display:grid; grid-template-columns:1.25rem minmax(0, 1fr) auto; align-items:center; gap:0.25rem; min-height:2.5rem; padding:0.25rem 0.5rem; border-top:1px solid var(--line); }
.team-side-game:first-child:where(:not(#teams *)) { border-top:0; }
.team-side-game>span:where(:not(#teams *)) { pointer-events:none; }
.team-side-game.is-final:hover:where(:not(#teams *)) { background:#ffffff0f; }
.team-side-game.is-next:where(:not(#teams *)) { box-shadow:none; background:linear-gradient(90deg, var(--accent-soft), transparent 85%); }
.team-side-game.is-next .team-side-when:where(:not(#teams *)) { color:var(--accent); }
.team-side-game .team-link:hover span:where(:not(#teams *)) { color:var(--accent); text-decoration:underline; }
.team-side-game .team-at:where(:not(#teams *)) { margin:0; }
.team-side-game .team-result:where(:not(#teams *)) { font-size:0.75rem; white-space:nowrap; }
.team-side-when:where(:not(#teams *)) { display:grid; justify-items:end; color:var(--ink); font-size:0.75rem; font-weight:650; white-space:nowrap; }
.team-side-when small:where(:not(#teams *)) { color:var(--muted); font-size:0.6875rem; font-weight:500; }
.team-week:where(:not(#teams *)) { min-width:1.75rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
@media (max-width:75em) {
  .team-overview:where(:not(#teams *)) { grid-template-columns:14rem minmax(0, 1fr); grid-template-areas:"tiles tiles" "side main" "side rail"; }
  .team-tiles:where(:not(#teams *)) { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:56em) {
  .team-overview:where(:not(#teams *)) { grid-template-columns:minmax(0, 1fr); grid-template-areas:"tiles" "main" "side" "rail"; }
  .team-hero:where(:not(#teams *)) { grid-template-columns:auto minmax(0, 1fr); }
  .team-hero-tools:where(:not(#teams *)) { grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width:40em) {
    .team-tiles:where(:not(#teams *)) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .team-hero:where(:not(#teams *)) { padding:0.875rem; }
  .team-hero h2:where(:not(#teams *)) { font-size:1.375rem; }
}

/* Dialogs: rankings, position breakdowns, prop lines, all props. */

/* Rankings dialog opened from a stat tile. */
.team-rank-dialog[open] { display:flex; flex-direction:column; }
.team-rank-dialog { width:min(40rem, calc(100vw - 2rem)); max-height:min(46rem, calc(100vh - 2rem)); overflow:hidden; padding:1.25rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface); color:var(--ink); }
.team-rank-dialog::backdrop { background:#000a; }
.team-rank-dialog .dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.75rem; }
.team-rank-dialog h2 { margin:0.125rem 0; font-size:1.375rem; }
.team-rank-dialog .team-muted { margin:0; font-size:0.75rem; }
.team-rank-table td:first-child { width:3.5rem; }
.team-rank-team { display:inline-flex; align-items:center; gap:0.5rem; }
.team-rank-nick { display:none; }
@media (max-width:30em) {
  #teamRankDialog :is(.team-rank-full, .team-rank-record) { display:none; }
  .team-rank-nick { display:inline; }
  .team-rank-dialog { padding:1rem 0.875rem; }
  #teamRankDialog .team-rank-table :is(th, td) { padding:0.4375rem 0.375rem; }
  #teamRankDialog .team-rank-table thead th { white-space:normal; }
  /* UI-379: the frame stays its default-size pixels at 200% text (a rem-sized margin and
     padding alone took a third of a phone's width). Same values at the default size. */
  .team-rank-dialog { width:calc(100vw - min(2rem, 32px)); max-height:min(46rem, calc(100dvh - min(2rem, 32px))); padding:min(1rem, 16px) min(0.875rem, 14px); }
}
/* UI-379: large text in the rankings dialog. The dialog is measured in its own text size, so
   this only applies when it holds under 16em of text (200% text on a phone), never at the
   default size. The heading shrinks and a long note scrolls in four lines; the column
   headings are left to screen readers (the title names the stat); the logos go; a detail
   moves under the team's name; so most of the league shows and the values stay on screen. */
.team-rank-detail { display:none; }
#teamRankDialog { container:team-rank / inline-size; }
@container team-rank (max-width: 16em) {
  #teamRankDialog .dialog-heading { gap:0.5rem; margin-bottom:0.5rem; }
  #teamRankDialog .card-kicker { margin:0; font-size:0.625rem; }
  #teamRankDialog h2 { font-size:0.9375rem; line-height:1.1; }
  #teamRankDialog .dialog-heading .team-muted { max-height:4lh; overflow-y:auto; font-size:0.6875rem; }
  #teamRankDialog .team-rank-table { font-size:0.6875rem; }
  #teamRankDialog .team-rank-table :is(th, td) { padding:0.25rem 0.125rem; }
  #teamRankDialog .team-rank-table td:first-child { width:auto; }
  #teamRankDialog .team-rank-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #teamRankDialog .team-rank-table tbody th { font-size:0.625rem; white-space:normal; }
  #teamRankDialog .team-rank-table .is-text { display:none; }
  #teamRankDialog .team-rank-detail { display:block; margin-top:0.125rem; font-size:0.5625rem; font-weight:500; }
  #teamRankDialog .team-rank-table .team-mini-badge { display:none; }
  #teamRankDialog .team-rank { min-width:0; padding:0 0.1875rem; font-size:0.5rem; }
}
.team-rank-table :is(th, td) { vertical-align:middle; }
/* Position breakdown opened from a soft spot or a Defense room. */
.team-position-dialog { width:min(52rem, calc(100vw - 2rem)); }
.team-position-body { flex:1 1 auto; min-height:0; overflow:auto; }
.team-position-dialog .team-position-body .team-table-wrap { overflow-x:auto; }
.team-position-table td { vertical-align:top; }
.team-position-table td small { display:block; margin-top:0.125rem; }
.team-position-table tbody th small { display:block; font-weight:500; }
.team-position-cell { display:inline-flex; align-items:center; gap:0.375rem; }
.team-position-games { display:grid; gap:0.5rem; margin:0; padding:0; list-style:none; }
.team-position-game { padding:0.5rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); }
.team-position-game header { display:flex; align-items:center; gap:0.5rem; font-size:0.8125rem; }
.team-position-game header .text-button { margin-left:auto; font-size:0.75rem; }
.team-position-game ul { display:grid; gap:0.25rem; margin:0.375rem 0 0; padding:0; list-style:none; }
.team-position-game li { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; font-size:0.8125rem; }
.team-position-game li .team-muted { font-size:0.75rem; font-variant-numeric:tabular-nums; }
.team-room-head-tools { display:inline-flex; flex-wrap:wrap; align-items:center; gap:0.625rem; }
.team-room-head-tools .text-button { min-height:2.5rem; font-size:0.75rem; white-space:nowrap; }
.team-room-record { white-space:nowrap; }


/* Offense and Defense: a card per position. */
.team-rooms { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; align-items:start; margin-top:1rem; }
.team-rooms-column { display:grid; gap:1rem; min-width:0; }
.team-rooms-stack { display:grid; gap:1rem; margin-top:1rem; }
.team-room-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:0.625rem; }
/* Wraps (UI-311): at 200% text on a 320 phone "vs quarterbacks" ran ~7px past the card. */
.team-room-head h3 { display:flex; flex-wrap:wrap; align-items:center; row-gap:0.25rem; margin:0; }
.team-room-record { padding:0.125rem 0.5rem; border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font-size:0.6875rem; font-weight:700; }
.team-room-metrics { display:grid; margin:0 0 0.75rem; padding:0 0 0.625rem; list-style:none; border-bottom:1px solid var(--line); }
.team-room-metrics li { display:block; }
.team-room-metric { display:grid; width:100%; border:0; border-radius:var(--r-data); background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; grid-template-columns:minmax(0, 1fr) 3.5rem 6.5rem 2.75rem; align-items:center; gap:0.5rem; padding:0.25rem 0; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.team-room-metrics strong { text-align:right; }
.team-room-metrics small { font-size:0.6875rem; text-align:right; }
/* Touchdowns (UI-190): the box-score TD row sits under a hairline, and the anytime-TD
   line is a quiet strip under the metrics (hits vs the price-implied chance). */
.team-room-metrics li:has(.is-td) { margin-top:0.25rem; padding-top:0.25rem; border-top:1px dashed var(--line); }
.team-room-td { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.625rem; margin:-0.25rem 0 0.75rem; padding:0.4375rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.team-room-td .ar-label { font-size:0.625rem; }
.team-room-td b { font-weight:800; }
.team-room-list { display:grid; margin:0; padding:0; list-style:none; }
/* A room's list mixes depth tags (WR1) with plain positions (WR, no saved depth chart): one
   width for the column, the depth tag's (UI-602; the kinds are in arcade.css). */
html body .team-room-list .pos-chip[data-chip] { --chip-kind-w:var(--chip-depth-w); }
.team-room-player:first-child { border-top:0; }
.team-room-table th, .team-room-table td { padding:0.3125rem 0.375rem; }
.team-room-table .team-dots { margin-right:0.375rem; }
.team-room-table tbody th { vertical-align:middle; }
/* Phones (UI-274): the wrap is a container measured in its own text size. Under 34em the
   table no longer fits, so each row becomes a grid: the name and its three values on the
   first line, under the header's columns, and the week chips on a line of their own (they
   wrap in full rows, never 2+1 in a sliver). Under 14em (200% text on a phone) even the
   values don't fit beside the name, so each value sits under the name with its own label. */
.team-room .team-table-wrap { container-type:inline-size; }
@container (max-width: 34em) {
  .team-room-table, .team-room-table :is(thead, tbody) { display:block; }
  .team-room-table tr { display:grid; grid-template-columns:minmax(0, 1fr) 2.875em 2.875em 3.75em; column-gap:0.375em; align-items:baseline; padding:0.4375em 0.375em; border-bottom:1px solid var(--line); }
  .team-room-table tbody tr:last-child { border-bottom:0; }
  .team-room-table :is(th, td) { padding:0; border:0; }
  /* The band the header cells drew (the generic thead th colour) moves to the row. */
  .team-room-table thead tr { align-items:end; background:#1c1625; }
  .team-room-table thead th { background:none; white-space:normal; line-height:1.25; }
  .team-room-table thead th:last-child { display:none; }
  .team-room-table tbody th { min-width:0; white-space:normal; overflow-wrap:break-word; hyphens:auto; }
  .team-room-table td.is-weeks { display:contents; }
  .team-room-table .team-weeks-count { grid-column:2; grid-row:1; text-align:right; }
  .team-room-table td.is-ou { grid-column:3; grid-row:1; }
  .team-room-table td.is-avg { grid-column:4; grid-row:1; }
  .team-room-table .team-dots { display:flex; grid-column:1 / -1; grid-row:2; margin:0.375em 0 0; }
  .team-room-table tr:has(td.is-repeat:not(:empty)) .team-dots { grid-column:1; align-self:center; }
  .team-room-table td.is-repeat { grid-column:2 / -1; grid-row:2; align-self:center; margin-top:0.375em; }
  .team-room-table td.is-repeat:empty { display:none; }
}
@container (max-width: 14em) {
  .team-room-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  /* UI-385: the average gets the widest column ("+100%" outgrew a third of a 360 phone). */
  .team-room-table tr { grid-template-columns:minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr); row-gap:0.25em; }
  .team-room-table tbody th { grid-column:1 / -1; grid-row:1; }
  .team-room-table .team-dots, .team-room-table tr:has(td.is-repeat:not(:empty)) .team-dots { grid-column:1 / -1; grid-row:2; margin:0; }
  .team-room-table .team-weeks-count { grid-column:1; grid-row:3; }
  .team-room-table td.is-ou { grid-column:2; grid-row:3; }
  .team-room-table td.is-avg { grid-column:3; grid-row:3; }
  .team-room-table :is(.team-weeks-count, td.is-ou, td.is-avg) { text-align:left; }
  /* UI-385: "PLAYER" at 0.625rem with tracking was ~5px wider than its third of a 360 phone. */
  .team-room-table [data-label]::before { content:attr(data-label); display:block; color:var(--muted); font:700 0.5625rem var(--font-mono); letter-spacing:0.02em; text-transform:uppercase; white-space:normal; overflow-wrap:anywhere; }
  .team-room-table td.is-repeat { grid-column:1 / -1; grid-row:4; margin:0; text-align:left; }
}
.team-room .team-big { margin-top:0.25rem; }
.team-room .team-subhead { margin-top:0.875rem; }
.team-rooms+.team-actions, .team-rooms+.team-card, .team-rooms-stack+.team-actions { margin-top:1rem; }
.team-def-leaders { grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:1.5rem; }
.team-def-leaders li:nth-child(-n+3) { border-top:0; }
@media (max-width:75em) {
  .team-rooms { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:40em) {
      .team-room-metric { grid-template-columns:minmax(0, 1fr) 3rem auto; }
  .team-room-metrics small { display:none; }
  .team-def-leaders { grid-template-columns:minmax(0, 1fr); }
  .team-def-leaders li:nth-child(-n+3) { border-top:1px solid var(--line); }
  .team-def-leaders li:first-child { border-top:0; }
}
/* Large text on a phone (UI-325): under 15em of list the stat's label takes its own row,
   so the 7.5rem label column no longer pushes the leader's position off the screen. */
.team-def-leaders { container:team-def-leaders / inline-size; }
@container team-def-leaders (max-width: 15em) {
  .team-def-leaders li { grid-template-columns:minmax(0, 1fr) auto; row-gap:0.125rem; }
  .team-def-leaders li>small { grid-column:1 / -1; }
}

/* Offense rooms: full width, one row per player: who | usage | prop chips. */
.team-room-wide .team-room-head { flex-wrap:wrap; padding-bottom:0.625rem; border-bottom:1px solid var(--line); }
.team-room-totals { display:flex; flex-wrap:wrap; gap:0.375rem 1rem; }
.team-room-total { border:0; border-radius:var(--r-data); background:none; color:var(--ink); font:inherit; cursor:pointer; padding:0.125rem 0.25rem; display:inline-flex; align-items:center; gap:0.375rem; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.team-room-total small { color:var(--muted); font-size:0.6875rem; }
.team-room-player { display:grid; grid-template-columns:minmax(10rem, 13rem) auto minmax(max-content, 1fr); align-items:center; gap:0.5rem 1.5rem; padding:0.5rem 0; border-top:1px solid var(--line); }
.team-room-player:first-child { border-top:0; }
.team-room-who { display:flex; align-items:center; gap:0.625rem; min-width:0; }
.team-room-who>div { display:grid; gap:0.125rem; min-width:0; }
.team-room-who .team-player-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.team-room-who small { display:flex; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.6875rem; }
.team-room-who .team-player-evidence { flex-wrap:wrap; white-space:normal; }
.team-player-evidence .team-pos-chip { margin:0; }
.team-status-chip { padding:0.0625rem 0.25rem; border:1px solid var(--line); border-radius:var(--r-data); font-size:0.625rem; line-height:1.4; }
.team-status-chip.is-out { color:var(--negative); border-color:currentColor; }
.team-room-order { margin:0.375rem 0; }
.team-roster-note .text-button { font:inherit; }
/* Props strip (UI-374): one small grid row per market, the same column widths for every
   player so the columns line up down the room: market · next line · five marks · record.
   The header's column labels use the same template. */
.team-room-player { --prop-cols:6.25rem 4.5rem 5.25rem 2.75rem; }
.team-room-props { display:grid; align-content:center; justify-items:start; gap:0.125rem; min-width:0; }
.team-room-props.is-empty { font-size:0.6875rem; }
.team-prop-row, .team-room-props-label { display:grid; grid-template-columns:var(--prop-cols); align-items:center; column-gap:0.5rem; }
.team-prop-row { color:var(--ink); font:inherit; cursor:pointer; padding:0.1875rem 0.375rem; margin:0 -0.375rem; border:0; border-radius:var(--r-data); background:none; font-size:0.75rem; font-variant-numeric:tabular-nums; text-align:left; white-space:nowrap; }
.team-prop-market { overflow:hidden; text-overflow:ellipsis; color:var(--muted); }
.team-prop-line { color:var(--accent); font-weight:750; }
.team-prop-row.is-td .team-prop-line { color:var(--gold); }
.team-prop-line.is-none, .team-prop-record.is-none { color:var(--muted); font-weight:500; }
.team-prop-record { font-style:normal; font-weight:700; text-align:right; }
/* Five same-size marks, colour only (UI-462); hollow = no settled line that game. */
.team-prop-marks { display:grid; grid-template-columns:repeat(5, 0.8125rem); gap:0.1875rem; margin:0; }
.team-prop-marks .team-dot { width:0.8125rem; height:0.8125rem; border-radius:0.1875rem; }
.team-dot.is-none { background:transparent; box-shadow:inset 0 0 0 1px var(--muted); opacity:0.6; }
.team-prop-row:hover { background:#ffffff0f; }
.team-prop-row:hover .team-prop-market { color:var(--ink); }
.team-prop-more { justify-self:start; margin-top:0.125rem; font-size:0.6875rem; text-align:left; }
.team-prop-extra { display:grid; justify-items:start; gap:0.125rem; }
.team-prop-extra[hidden] { display:none; }
@media (max-width:75em) {
  .team-room-player { grid-template-columns:minmax(0, 1fr) auto; }
  .team-room-props { grid-column:1 / -1; }
}
@media (max-width:40em) {
  .team-room-player { grid-template-columns:minmax(0, 1fr); }
  /* Under the stats, full width: the market column takes what is left (same for every
     player, so the columns still line up). */
  .team-room-player { --prop-cols:minmax(0, 1fr) 4.5rem 5.25rem 2.75rem; }
  .team-room-props, .team-prop-extra { justify-items:stretch; }
  .team-prop-row { margin:0; }
  .team-room-props>.team-room-props-label { padding-inline:0.375rem; justify-self:stretch; }
}
.team-room-metric:hover, .team-room-total:hover { background:#ffffff0f; }
.team-room-metric:focus-visible, .team-room-total:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* Room stats: one header row per card; values line up under it. */
.team-room-stats { display:grid; grid-template-columns:repeat(var(--columns), 3.75rem); gap:0.25rem; margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.team-room-stats>div { min-width:0; }
.team-room-stats dt { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.team-room-stats dd { margin:0; font-size:0.8125rem; font-weight:700; }
.team-room-labels { padding:0.25rem 0 0.375rem; border-top:0; color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; }
.team-room-labels .team-room-stats span { white-space:nowrap; }
.team-room-props-label { justify-self:start; }
.team-room-props-label>:last-child { text-align:right; }
/* The strip's own copy of the column labels: shown on the first player only, when the
   strip sits under the stats and the header row's copy is hidden (UI-374). */
.team-room-props>.team-room-props-label { display:none; padding-bottom:0.125rem; color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; }
.team-room-labels+.team-room-player { border-top:0; }
@media (max-width:75em) {
  .team-room-labels .team-room-props-label { display:none; }
  .team-room-labels+.team-room-player .team-room-props>.team-room-props-label { display:grid; }
  /* Eleven columns with the TD ones (UI-190): narrower, so the name keeps its room. */
  .team-room-stats { grid-template-columns:repeat(var(--columns), 3.375rem); }
  .team-room-who small { white-space:nowrap; }
}
@media (max-width:40em) {
  .team-room-labels { display:none; }
  .team-room-stats { grid-template-columns:repeat(5, minmax(0, 1fr)); row-gap:0.375rem; text-align:left; }
  .team-room-stats dt { position:static; width:auto; height:auto; overflow:visible; clip:auto; color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; }
  .team-room-list { container:team-room-list / inline-size; }
}
/* Large text on a phone (UI-325): under 15em of list (a 320px phone at the default size has
   about 16em), five stat columns ran their labels into each other; three fit. */
@container team-room-list (max-width: 15em) {
  .team-room-stats { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
/* The props strip needs about 14em; narrower (large text on a phone), each row takes two
   lines, market · line over marks · record, and the column labels go (UI-374). */
@container team-room-list (max-width: 14em) {
  .team-room-player { --prop-cols:minmax(0, 1fr) auto; }
  .team-prop-row { row-gap:0.125rem; }
  .team-prop-marks { grid-template-columns:repeat(5, minmax(0, 0.8125rem)); gap:0.125rem; }
  .team-prop-marks .team-dot { width:100%; height:auto; aspect-ratio:1; }
  .team-room-labels+.team-room-player .team-room-props>.team-room-props-label { display:none; }
}
/* The lead column is each room's main prop stat. */
.team-room-stats>div:first-child dd { color:var(--accent); font-size:0.9375rem; }
.team-room-labels .team-room-stats span:first-child { color:var(--ink); }
.team-room-stats>:first-child { padding-right:0.5rem; border-right:1px solid var(--line); }
.team-prop-row:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* Prop lines modal. */
.team-prop-dialog { width:min(44rem, calc(100vw - 2rem)); }
.team-prop-who { display:flex; align-items:center; gap:0.75rem; }
.team-prop-who .team-avatar .player-avatar { width:3rem; height:3.5rem; }
.team-prop-next { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem 1.25rem; margin-bottom:0.875rem; padding:0.75rem 0.875rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); }
.team-prop-next>div:first-child { display:grid; gap:0.125rem; }
.team-prop-next small { color:var(--muted); font-size:0.6875rem; }
.team-prop-next strong { font-size:1rem; }
/* The tracking line (UI-553): its own row under the picker; flex gaps space it. */
.team-prop-next>.tracking-only { flex-basis:100%; margin:0; }
.team-lines>.tracking-only, .team-plays>.tracking-only { margin:0; }
.team-prop-result { font-weight:700; white-space:nowrap; }
.team-prop-result.is-over { color:var(--positive); }
.team-prop-result.is-under { color:var(--negative); }
.team-prop-result.is-push { color:#f5c451; }
.team-prop-table thead th:nth-child(2) { text-align:left; }
.team-prop-picker { flex:0 1 22rem; min-width:0; }
.team-prop-picker .bet-quote-freshness { display:none; }
.team-prop-picker .saved-pick-note { margin-top:0.5rem; font-size:0.6875rem; }
/* "All props" button and modal. */
.team-all-props { position:relative; padding:0.25rem 0.5rem; border:1px dashed var(--line); border-radius:var(--r-data); background:none; color:var(--accent); font:inherit; font-size:0.6875rem; font-weight:700; white-space:nowrap; cursor:pointer; }
.team-all-props:hover, .team-all-props:focus-visible { border-style:solid; border-color:var(--accent); }
.team-all-props::after { content:""; position:absolute; top:50%; right:0; left:0; height:2.5rem; translate:0 -50%; }
.team-play-evidence .team-all-props { margin-left:auto; padding:0 0.5rem; }
.team-player-dialog { width:min(52rem, calc(100vw - 2rem)); overflow:auto; }
.team-player-dialog[open] { display:block; }
.team-player-usage { margin:0.25rem 0 0.5rem; padding:0.625rem 0.75rem; border:1px solid var(--line); border-radius:var(--r-control); overflow-x:auto; }
.team-player-usage .team-room-stats dt { position:static; width:auto; height:auto; overflow:visible; clip:auto; color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; }
.team-player-props { display:grid; margin:0; padding:0; list-style:none; }
.team-player-props li { display:grid; grid-template-columns:minmax(9rem, 1fr) auto minmax(0, 22rem); align-items:center; gap:0.5rem 1rem; padding:0.5rem 0; border-top:1px solid var(--line); }
.team-player-props li:first-child { border-top:0; }
.team-player-props.is-past li { grid-template-columns:minmax(9rem, 1fr) auto; }
.team-player-market { justify-self:start; padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:650; text-align:left; cursor:pointer; }
.team-player-market:hover, .team-player-market:focus-visible { color:var(--accent); text-decoration:underline; }
.team-player-results { display:inline-flex; align-items:center; gap:0.375rem; font-size:0.75rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.team-player-props .team-prop-picker { width:100%; }
@media (max-width:40em) {
  .team-player-props li { grid-template-columns:minmax(0, 1fr) auto; }
  .team-player-props .team-prop-picker { grid-column:1 / -1; }
  .team-player-results { flex-wrap:wrap; justify-content:flex-end; max-width:10rem; white-space:normal; text-align:right; }
}
.team-room-who .team-all-props { margin-left:0.25rem; padding:0 0.4375rem; }
/* Name links cover only the name: clicking beside it opens the row's own action. */
.team-play-who .team-player-name, .team-room-who .team-player-name { justify-self:start; max-width:100%; }
.team-rank-dialog .team-table-wrap { flex:1 1 auto; min-height:0; overflow:auto; }
/* These dialogs scroll their table box, so the column headers stay on top (UI-452: this used to
   come from a site-wide players.css rule). :where keeps the old rule's weight (thead th), so any
   more specific header rule still wins. */
:where(.team-rank-dialog .team-table-wrap) thead th { position:sticky; top:0; z-index:2; }
.team-rank-table tbody th { text-align:left; }
.team-rank-table thead th:nth-child(2) { text-align:left; }
.team-rank-table thead { position:sticky; top:0; z-index:1; background:var(--surface); }
/* The all-teams ranking's sortable headers (StudioKit.teamRanks, UI-351). */
.team-rank-sort { display:inline-flex; align-items:center; min-height:2rem; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.team-rank-sort.is-active { color:var(--ink); }
.team-rank-sort:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* UI-664: each row is its team link's target, as the rank journey's lists (.ar-rank-rows, UI-641):
   the link's ::after covers the row, the row lights on hover and shows the link's focus ring. */
#teamRankDialog tbody tr { position:relative; transition:background-color var(--dur-fast) var(--ease-out); }
#teamRankDialog tbody .team-name-link::after { content:""; position:absolute; inset:0; }
#teamRankDialog tbody .team-name-link:focus-visible { outline:none; }
#teamRankDialog tbody tr:is(:hover, :has(.team-name-link:focus-visible)) { background:color-mix(in srgb, var(--accent) 10%, var(--surface-raised)); }
#teamRankDialog tbody tr:has(.team-name-link:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px; }
/* UI-672: the rank badge sits above the link's overlay so its title tooltip shows. UI-681: it is
   a link to the team itself (studio-kit.js), so a middle click or Ctrl-click opens a new tab.
   The sticky header stays above the badges. */
#teamRankDialog tbody .team-rank-badge-link { position:relative; z-index:1; display:inline-block; color:inherit; text-decoration:none; }
#teamRankDialog .team-rank-table thead { z-index:2; }

/* ------------------------------------------------------------------------------------
   Proposed site (v3) team page: header with the next game and M/U chips, "3 things to
   know", band-coloured rank badges, the point-margin flow chart and the compact
   schedule with real logos. Colour means performance for this team (--good / --bad),
   always with a glyph and a word; blue only for actions and picked prices.
   ------------------------------------------------------------------------------------ */
#teams .is-up { color:var(--good); }
#teams .is-down { color:var(--bad); }

/* Header. */
#teams .team-hero { gap:0.625rem; }
#teams .team-hero-top { align-items:flex-start; }
#teams .team-hero-facts { gap:0.375rem 0.75rem; font-size:1rem; font-weight:700; }
#teams .team-hero-facts>span:not(.team-hero-pill) { color:var(--ink); }
#teams .team-hero-facts>.team-wait, #teams .team-wait { color:var(--muted); }
#teams .team-hero-wait { flex-basis:100%; margin:0; font-size:0.8125rem; }
#teams .team-hero-record { height:auto; padding:0; border:0; background:none; box-shadow:none; color:var(--ink); font:800 1.125rem var(--font-mono); }
#teams .team-hero-pill.is-up { color:var(--good); }
#teams .team-hero-pill.is-down { color:var(--bad); }
#teams .team-hero-nextline { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.375rem; margin:0; color:var(--muted); font-size:0.9375rem; }
#teams .team-hero-soon, #teams .team-hero-moved { white-space:nowrap; }
#teams .team-hero-pending { color:var(--ink); font-weight:700; }
#teams .team-next-pending { margin:0 0 0.5rem; color:var(--muted); font-size:0.8125rem; }
#teams .team-next-pending .ar-label { margin-right:0.375rem; color:var(--ink); }
#teams .team-hero-nextline>b { display:inline-flex; align-items:center; gap:0.375rem; color:var(--ink); }
#teams .team-hero-lines { color:var(--ink); font-family:var(--font-mono); font-weight:700; }
#teams .team-hero-mu { display:inline-flex; align-items:center; gap:0.3125rem; margin-left:0.375rem; }
#teams .team-hero-next { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:0.75rem; align-self:stretch; margin-left:auto; }

/* Tabs sit under "3 things to know", above the tab content, right of the schedule. */
#teams .team-layout > .team-sections { justify-self:start; }

/* 3 things to know: green = works for this team, gold = caution. */
#teams .team-know { display:grid; gap:0.75rem; min-width:0; }
#teams .team-know-head h3 { margin:0; font:800 1.75rem/1.1 var(--font-display); letter-spacing:-0.03em; }
#teams .team-know-head p { margin:0.25rem 0 0; color:var(--ink); font-size:0.9375rem; }
#teams .team-know-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; align-items:stretch; }
#teams .team-know-grid:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
#teams .team-know-card { --tone:var(--good); --tone-bg:var(--good-bg); display:flex; flex-direction:column; align-items:flex-start; gap:0.625rem; min-width:0; padding:1rem 1.125rem 1rem 1.25rem;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:none; }
#teams .team-know-card.is-caution { --tone:var(--thin); --tone-bg:var(--thin-bg); }
#teams .team-know-card h4 { margin:0; font:800 1.1875rem/1.2 var(--font-display); letter-spacing:-0.01em; }
#teams .team-know-card h4 .team-player-name { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
#teams .team-know-card h4 .team-player-name:hover { color:var(--accent); }
#teams .team-know-card p { margin:0; font-size:0.875rem; line-height:1.45; }
#teams .team-know-card p .team-player-name { padding:0; border:0; background:none; color:var(--ink); font:inherit; font-weight:800; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:0.15em; cursor:pointer; }
#teams .team-know-card footer { margin-top:auto; padding-top:0.25rem; }
#teams .team-know-tag { padding:0.1875rem 0.5625rem; border-radius:var(--r-data); background:var(--tone-bg); box-shadow:inset 0 0 0 1.5px var(--tone); color:var(--tone); font-size:0.75rem; font-weight:800; }
#teams .team-know-card .team-know-note { font-size:0.75rem; }
/* Whether the defense's band backs the side shown (a Tough defense backs an Under). */
#teams .team-know-fit { display:block; margin-top:0.25rem; font-size:0.8125rem; font-weight:800; }
#teams .team-know-fit.is-up { color:var(--good); }
#teams .team-know-fit.is-down { color:var(--bad); }
/* The featured prop's market and side (UI-227), and the note when its rank is a stand-in. */
#teams .team-know-card .team-know-market { color:var(--ink); font:800 0.8125rem var(--font-mono); letter-spacing:0.02em; }
#teams .team-know-proxy { display:block; margin-top:0.25rem; color:var(--muted); font-size:0.8125rem; }
#teams .team-know-evidence { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; width:100%; }
#teams .team-know-count { display:grid; line-height:1.1; }
#teams .team-know-count b { font:700 0.9375rem var(--font-mono); color:var(--good); }
#teams .team-know-count small { color:var(--muted); font:700 0.6875rem var(--font-mono); }
#teams .team-know-pick { margin-left:auto; }
#teams .team-know-verdict { display:flex; align-items:center; gap:0.5rem; }
#teams .team-know-card .team-know-series { color:var(--muted); font-size:0.8125rem; }
#teams .team-know-series b { color:var(--ink); font-family:var(--font-mono); }
/* The game-script line under the cards (UI-352): one row, the tag, the margin, what it does to volume. */
#teams .team-know-script { --tone:var(--muted); --tone-bg:var(--surface-raised); display:flex; flex-wrap:wrap; align-items:baseline; gap:0.375rem 0.625rem; margin:0; padding:0.625rem 0.875rem; border:1px solid var(--line); border-radius:var(--r-data); background:var(--surface); font-size:0.875rem; line-height:1.45; }
#teams .team-know-script b { font:800 0.9375rem var(--font-display); }
#teams .team-know-script .team-muted { font-size:0.75rem; }

/* Stat tiles: two rows of three with a rank badge and its band word, coloured from the
   prop side (tone-soft green, tone-tough red; studio-teams.js bandTone). */
#teams .team-tile-groups { display:grid; gap:0.625rem; }
#teams .team-tile-head { margin:0; font:800 0.9375rem var(--font-display); }
#teams .team-tile-head:not(:first-child) { margin-top:0.375rem; }
#teams .team-tiles.is-three { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.75rem; }
#teams .team-tile-groups .team-tile { min-height:0; background:var(--surface-raised); box-shadow:none; border-color:var(--line); }
#teams .team-tile-groups .team-tile:hover { border-color:var(--edge); box-shadow:none; }
#teams .team-tile-row { display:flex; align-items:flex-end; justify-content:space-between; gap:0.5rem; width:100%; }
#teams .team-tile-groups .team-tile strong { font-size:1.875rem; }
#teams .team-tile-rank { display:grid; justify-items:end; gap:0.125rem; }
#teams .team-tile-rank small { color:var(--muted); font-size:0.6875rem; font-weight:800; white-space:nowrap; }
#teams .team-tile-rank.tone-soft .team-rank { border-color:transparent; background:var(--good-bg); color:var(--good); }
#teams .team-tile-rank.tone-soft small { color:var(--good); }
#teams .team-tile-rank.tone-tough .team-rank { border-color:transparent; background:var(--bad-bg); color:var(--bad); }
#teams .team-tile-rank.tone-tough small { color:var(--bad); }
#teams .team-tile-rank.band-mid .team-rank { border-color:transparent; }
#teams .team-tile-key { margin-top:0.125rem; }
#teams .team-tile-key .is-up, #teams .team-tile-key .is-down { font-weight:800; }


/* Next game: title with the lines, the scoreboard, then one M/U chip per unit. */
#teams .team-next { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.75rem; }
#teams .team-next .team-card-meta { overflow-wrap:anywhere; }
#teams .team-next .team-card-head { margin:0; }
#teams .team-next-title { margin:0; font:800 1.5rem/1.15 var(--font-display); overflow-wrap:anywhere; }
#teams .team-next-title small { display:inline-block; margin-left:0.375rem; color:var(--ink); font:700 0.9375rem var(--font-mono); }
#teams .team-next .team-card-lead { margin:0; }
#teams .team-mu-list { display:grid; margin:0; padding:0; list-style:none; }
#teams .team-mu-list li { display:grid; grid-template-columns:3rem auto minmax(0, 1fr); align-items:center; gap:0.625rem; padding:0.4375rem 0; border-top:1px solid var(--line); font-size:0.8125rem; }
#teams .team-mu-list li:first-child { border-top:0; }
#teams .team-mu-unit { font-weight:800; }
#teams .team-mu-list .ar-mu { justify-self:start; }
#teams .team-mu-why { color:var(--ink); }

/* Top plays: the evidence stack under each play. */
#teams .team-next-plays .team-card-head h3 { font-size:1.25rem; }
#teams .team-play { grid-template-areas:"rank who score bet" ". evidence evidence evidence" ". signals signals signals"; }
.team-play-signals { grid-area:signals; display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.5rem; }
.team-play-signals>small { font-size:0.6875rem; }
.team-play-signals .ar-signals { min-width:0; max-width:100%; }


/* Team index: point differential beside the record. */
/* Room for the longest nickname (Commanders) at four divisions across. */
.team-landing-list li { grid-template-columns:1rem minmax(0, 1fr) auto 2.75rem; gap:0.375rem; }
.team-landing-diff { font:700 0.6875rem var(--font-mono); font-style:normal; text-align:right; color:var(--muted); }
.team-landing-diff.is-up { color:var(--good); }
.team-landing-diff.is-down { color:var(--bad); }
.team-landing-list .team-landing-wait { color:var(--muted); }
.team-landing-list .team-mini-badge { width:1.625rem; height:1.625rem; min-width:1.625rem; }

@media (max-width:75em) {
  #teams .team-know-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #teams .team-know-grid > :nth-child(3) { grid-column:1 / -1; }
}
@media (max-width:60em) {
  #teams .team-hero-next { flex-direction:row; flex-wrap:wrap; align-items:center; }
}
@media (max-width:40em) {
  #teams .team-know-grid, #teams .team-know-grid:has(> :nth-child(2):last-child) { grid-template-columns:minmax(0, 1fr); }
  #teams .team-know-head h3 { font-size:1.375rem; }
  #teams .team-tiles.is-three { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.5rem; }
  #teams .team-tile-groups .team-tile { padding:0.625rem; }
  #teams .team-tile-groups .team-tile strong { font-size:1.25rem; }
  #teams .team-tile-row { flex-direction:column; align-items:flex-start; }
  #teams .team-tile-rank { justify-items:start; }
  /* UI-385: the chip's column can shrink, and at 200% text a long chip ("LV · Neutral
     T-16th, ranked on …") wraps inside it instead of pushing the page past a 360 screen. */
  #teams .team-mu-list li { grid-template-columns:2.5rem minmax(0, 1fr); }
  #teams .team-mu-list .ar-mu-open { max-width:100%; text-align:left; }
  #teams .team-mu-list .ar-mu { flex-wrap:wrap; height:auto; min-height:1.375rem; max-width:100%; white-space:normal; }
  #teams .team-mu-why { grid-column:1 / -1; }
  #teams .team-hero-mu { margin-left:0; }
  #teams .team-know-pick { margin-left:0; }
  #teams .team-play { grid-template-areas:"rank who score" ". bet bet" ". evidence evidence" "signals signals signals"; }
}
/* UI-385: large text in a top play (under 14em of list width: 200% text on a phone, never
   the default size). The price and the evidence take the full row instead of starting
   after the rank, the price button may shrink, and a signal's stat drops under its title
   rather than wrapping a letter a line. */
#teams .team-plays { container:team-plays / inline-size; }
@container team-plays (max-width: 14em) {
  /* UI-431: the player (avatar, name, prop) gets its own row under the rank and score; between
     them it was squeezed to a sliver, the name hidden and the avatar over the score. */
  #teams .team-play { grid-template-areas:"rank . score" "who who who" "bet bet bet" "evidence evidence evidence" "signals signals signals"; }
  #teams .team-play-who { grid-template-columns:minmax(0, 1fr); }
  #teams .team-play-who>.team-avatar { grid-row:auto; }
  #teams .team-play-who>:not(.team-avatar) { grid-column:1; }
  #teams .team-play-who :is(.team-player-name, .team-play-prop) { white-space:normal; text-align:left; overflow-wrap:break-word; }
  #teams .team-play-bet .bet-side { min-width:0; max-width:100%; }
  #teams .team-play-signals .ar-sig { flex-wrap:wrap; }
  /* UI-431: the verdict chip ("No clear edge") wraps inside the row rather than running past
     it (and, mid-stamp, past a 360 screen) at the browser's real 200% text setting. */
  #teams .team-play-signals .ar-verdict { max-width:100%; height:auto; min-height:1.625rem; padding-block:0.125rem; white-space:normal; overflow-wrap:anywhere; }
}
/* UI-246: on phones the intro folds and the section tabs stick under the header. The hero
   tightens (the picker shows just the badge; its name stays for screen readers), "N things
   to know" folds to its heading and summary line, and the tab track sticks at the header's
   visible height. Wider screens keep the full intro with the tabs in the flow. */
#teams .team-know-toggle { display:none; }
@media (max-width:40em) {
  #teams .team-hero { gap:0.625rem; padding:0.875rem; }
  #teams .team-hero-top { gap:0.75rem; }
  #teams .team-hero-copy { gap:0.5rem; }
  #teams .team-hero-badge { width:3rem; height:3rem; min-width:3rem; padding:0.375rem; }
  #teams .team-hero-title { gap:0.375rem 0.75rem; }
  #teams .team-hero-nextline { font-size:0.875rem; }
  /* The Open button, badge-only picker and season share a row, wrapping at large text. */
  #teams .team-hero-next { gap:0.5rem; }
  #teams .team-hero-open { flex:1 1 auto; min-height:2.75rem; padding-inline:0.75rem; font-size:0.9375rem; }
  #teams .team-hero-tools { flex:0 0 auto; }
  #teams .team-picker-button { padding:0 0.625rem; }
  #teams .team-picker-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #teams .team-know { gap:0.5rem; }
  #teams .team-know-title { display:none; }
  #teams .team-know-toggle { display:inline-flex; align-items:center; gap:0.5rem; min-height:2.75rem; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  #teams .team-know-caret { color:var(--accent); font-size:0.875rem; transition:transform 0.15s; }
  #teams .team-know.is-open .team-know-caret { transform:rotate(180deg); }
  #teams .team-know-head p { margin:0; font-size:0.875rem; }
  #teams .team-know:not(.is-open) :is(.team-know-grid, .team-know-script) { display:none; }
}
/* Only with height to spare: on a landscape phone, or with a browser text size so large
   that the screen is under 32em tall, the tabs stay in the flow rather than pinning a
   second bar under the header. Nor when the header and the tabs together would take over
   40% of the screen (data-tabs-unpinned, set by studio-teams.js, UI-325): at 200% text on a
   390x800 phone they took 386px. */
@media (max-width:40em) and (min-height:32em) {
  #teams:not([data-tabs-unpinned]) .team-sections { position:sticky; top:var(--header-height); z-index:6; box-shadow:0 0.5rem 0.75rem -0.375rem #0009; }
  /* Focus moved below the stuck tabs (Tab, find-in-page) lands clear of them. */
  html:has(body[data-active-view=teams] #teams:not([data-tabs-unpinned]) .team-sections) { scroll-padding-top:calc(var(--header-height) + 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  #teams .team-know-caret { transition:none; }
}
#teams .team-rank.tone-soft { border-color:transparent; background:var(--good-bg); color:var(--good); }
#teams .team-rank.tone-tough { border-color:transparent; background:var(--bad-bg); color:var(--bad); }

/* Opponent play-by-play styles, with the sample separate from the metric ranks. */
.team-view-controls { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1rem; margin:1rem 0; }
.team-view-controls label { display:grid; gap:0.25rem; min-width:0; color:var(--muted); font-size:0.75rem; }
.team-view-controls select { min-width:7rem; max-width:100%; padding:0.5rem; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); font:inherit; }
.team-view-sample { flex:1 1 14rem; margin:0; font-size:0.8125rem; }
.team-view-sample small { display:block; margin-top:0.25rem; color:var(--muted); line-height:1.5; }
.team-tile.is-thin :is(strong, .team-tile-rank), .team-room-metrics.is-thin, .team-room-totals.is-thin { opacity:0.55; }
.team-style-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1rem; margin:1rem 0; }
.team-style-grid dt { color:var(--muted); font-size:0.8125rem; }
.team-style-grid dd { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin:0.375rem 0; }
.team-style-grid strong { font-size:1.25rem; }
/* Each style tile opens every defense ranked (UI-351): the label's button covers the tile. */
.team-style-grid>div { position:relative; border-radius:var(--r-control); }
.team-style-open { margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.team-style-open::after { content:""; position:absolute; inset:-0.25rem; border-radius:var(--r-control); }
.team-style-grid>div:hover .team-style-open::after { box-shadow:0 0 0 2px var(--line); }
#teams .team-style-open:focus-visible { outline:none; }
.team-style-open:focus-visible::after { outline:2px solid var(--accent); outline-offset:2px; }
.team-defense-styles.is-thin .team-style-grid { opacity:0.55; }
@media (max-width:40em) {
  .team-style-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* UI-82: rank badges are buttons that open the league table. The matchup chips are the
   kit's tappable chips (.ar-mu-open, arcade.css), opening the rank journey (UI-561). */
.team-rank-open, .team-chip-button { margin:0; border-radius:var(--r-control); cursor:pointer; }
.team-rank-open { display:inline-flex; align-items:center; gap:0.3125rem; min-height:1.5rem; padding:0; border:0; background:none; color:inherit; font:inherit; }
.team-rank-open:hover .team-rank { box-shadow:0 0 0 2px var(--muted); }
.team-rank-open:focus-visible, .team-chip-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.team-chip-button:hover { border-color:var(--muted); color:var(--ink); }
/* Best edge with a Mixed or Thin-data verdict: neither green nor caution. */
#teams .team-know-card.is-neutral { --tone:var(--muted); --tone-bg:var(--surface-raised); }

/* UI-286: the hero's "Next" parts wrap onto their own lines on a phone, so the dots
   between them go (a line never starts with an orphan dot). */
@media (max-width:40em) {
  #teams .team-hero-sep { display:none; }
  #teams .team-hero-nextline { column-gap:0.625rem; }
}
/* UI-402: small leftovers at large text. Each rule only lets a piece wrap or shrink, so
   nothing moves at the default size where it already fits. */
@media (max-width:40em) {
  /* The hero's matchup chips wrap inside the hero (KC was 353px wide at 320/200%). */
  #teams .team-hero-mu { flex-wrap:wrap; max-width:100%; text-align:left; }
  #teams .team-hero-mu .ar-mu-open { max-width:100%; text-align:left; }
  #teams .team-hero-mu .ar-mu { flex-wrap:wrap; height:auto; min-height:1.375rem; max-width:100%; white-space:normal; }
  #teams .team-hero-tools { min-width:0; max-width:100%; }
  /* The next game's weather chip, a tile's rank note, a card's head chip, the
     "Vs usual | Raw" toggle and a result's margin and score wrap instead of widening the page. */
  .team-next-chips .studio-weather, .team-next-chips .studio-weather-copy { flex-wrap:wrap; min-width:0; max-width:100%; }
  .team-next-chips .studio-weather :is(small, span, strong) { white-space:normal; }
  #teams .team-tile-rank { max-width:100%; }
  #teams .team-tile-rank small { white-space:normal; }
  #teams .team-card-head .team-chip { max-width:100%; white-space:normal; }
  #teams .team-soft-basis { max-width:100%; }
  #teams .team-soft-basis button { white-space:normal; }
  #teams .team-room-totals { min-width:0; max-width:100%; }
  #teams .team-room-total { flex-wrap:wrap; max-width:100%; text-align:left; }
  #teams .team-actions .pd-button { max-width:100%; height:auto; white-space:normal; text-align:left; }
}
@media (max-width:30em) {
  /* Rankings with a detail column ("vs usual"): the detail sits under the team's name on a
     phone, as at 200% text, so the table needs no sideways scroll at 360. */
  #teamRankDialog .team-rank-table .is-text { display:none; }
  #teamRankDialog .team-rank-detail { display:block; margin-top:0.125rem; font-weight:500; }
}
/* UI-402: a prop group at 200% text on a 320 phone (under 8em of table): "+100%" outgrew
   its third, so the average takes a line of its own under the count and the O-U. */
@container (max-width: 8em) {
  .team-room-table tr { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .team-room-table td.is-avg { grid-column:1 / -1; grid-row:4; }
  .team-room-table td.is-repeat { grid-row:5; }
}
/* UI-402: the rankings dialog at 200% text on a 320 phone (under 10em): a touch smaller
   still and tighter cells, so the value column stays on screen beside "Commanders". */
@container team-rank (max-width: 10em) {
  #teamRankDialog .team-rank-table { font-size:0.625rem; }
  #teamRankDialog .team-rank-table :is(th, td) { padding:0.25rem 0.0625rem; }
  #teamRankDialog .team-rank-table tbody th { font-size:0.5625rem; }
  #teamRankDialog .team-rank { padding:0 0.125rem; font-size:0.4375rem; }
}

/* UI-345: the season schedule down the left of every section, as on Fantasy's team page.
   It starts under things to know, beside the tabs and the section, and scrolls with the
   page. One line per week, every row (the bye's too) the same height: week, opponent (logo
   and code, "@" away), the result or the kickoff; the next game is lit. No matchup chips
   here (UI-579). */
#teams .team-layout { display:grid; grid-template-columns:17rem minmax(0, 1fr); grid-template-rows:auto auto 1fr; grid-template-areas:"side tabs" "side controls" "side body"; gap:1.125rem 1.25rem; align-items:start; min-width:0; }
#teams .team-layout>.team-sections { grid-area:tabs; }
#teams .team-layout>.team-sidecar { grid-area:side; }
#teams .team-layout>.team-view-controls { grid-area:controls; margin:0; }
#teams .team-layout>.team-body { grid-area:body; }
#teams .team-layout .team-overview { grid-template-columns:minmax(0, 1fr) 23rem; }
/* The section is the schedule's width narrower than the page, so Offense's player rows
   follow the section's width, not the screen's: under 78rem of section the props drop
   under the stats (as at 75em of screen before the schedule column). */
#teams .team-layout>.team-body { container:team-body / inline-size; }
@media (min-width:40.01em) {
  @container team-body (max-width: 78rem) {
    #teams .team-room-player { grid-template-columns:minmax(0, 1fr) auto; }
    #teams .team-room-props { grid-column:1 / -1; }
    #teams .team-room-labels .team-room-props-label { display:none; }
    #teams .team-room-labels+.team-room-player .team-room-props>.team-room-props-label { display:grid; }
    #teams .team-room-stats { grid-template-columns:repeat(var(--columns), 3.375rem); }
    #teams .team-room-who small { white-space:nowrap; }
  }
  /* Under about 47rem of list the eleven stats leave the name no room (it drew under them,
     and at 1024 the row ran off the screen): the name takes its own row and each player's
     stats carry their labels, as on a phone, in one row of columns that can shrink. */
  #teams .team-room-list { container:team-room-list / inline-size; }
  @container team-room-list (max-width: 47rem) {
    #teams .team-room-player { grid-template-columns:minmax(0, 1fr); }
    #teams .team-room-labels { display:none; }
    #teams .team-room-stats { grid-template-columns:repeat(var(--columns), minmax(0, 1fr)); align-items:end; text-align:left; }
    #teams .team-room-stats dt { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.06em; text-transform:uppercase; }
  }
}
#teams .team-sidecar { padding:0.875rem 0.5rem 0.625rem; }
#teams .team-sidecar .team-card-head { margin:0 0.5rem 0.625rem; }
#teams .team-sidecar .team-card-head h3 { font-size:1.1875rem; }
#teams .team-strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:3px; height:0.625rem; margin:0 0.5rem; }
#teams .team-strip-cell { border-radius:var(--r-data); box-shadow:inset 0 0 0 1.5px var(--line); }
#teams .team-strip-cell.is-w { background:var(--good); box-shadow:none; }
#teams .team-strip-cell.is-l { background:var(--bad); box-shadow:none; }
#teams .team-strip-cell.is-t { background:var(--thin); box-shadow:none; }
/* Kicked off, nothing saved yet (UI-252): a dashed outline, not a result colour. */
#teams .team-strip-cell.is-pending { box-shadow:inset 0 0 0 1.5px var(--muted); background:repeating-linear-gradient(135deg, transparent 0 3px, var(--line) 3px 5px); }
#teams .team-strip-note { margin:0.375rem 0.5rem 0.5rem; color:var(--muted); font-size:0.75rem; font-weight:700; }
#teams .team-side-list { display:grid; margin:0; padding:0; list-style:none; }
#teams .team-side-game { position:relative; display:grid; grid-template-columns:1.875rem minmax(0, 1fr); align-items:center; gap:0.125rem 0.375rem; min-height:2.5rem; padding:0.25rem 0.5rem; border-top:1px solid var(--line); }
#teams .team-side-game:first-child { border-top:0; }
#teams .team-side-game>span { pointer-events:none; }
#teams .team-side-game>.team-week { font-size:0.6875rem; }
#teams .team-side-copy { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; min-width:0; }
#teams .team-side-game .team-link { position:relative; z-index:1; flex:0 0 auto; gap:0.3125rem; pointer-events:auto; font-weight:800; }
#teams .team-side-game .team-at { display:inline-block; width:0.75rem; font-size:0.75rem; text-align:center; }
#teams .team-side-game .team-mini-badge { width:1.375rem; height:1.375rem; min-width:1.375rem; }
#teams .team-side-code { font:800 0.8125rem var(--font-mono); letter-spacing:0.02em; }
#teams .team-side-game .team-link:hover .team-side-code, #teams .team-side-game .team-link:focus-visible .team-side-code { color:var(--accent); text-decoration:underline; }
#teams .team-side-score { color:var(--muted); font:700 0.8125rem var(--font-mono); white-space:nowrap; }
#teams .team-side-score b { margin-right:0.125rem; }
#teams .team-side-score.is-w b { color:var(--good); }
#teams .team-side-score.is-l b { color:var(--bad); }
#teams .team-side-score.is-t b { color:var(--thin); }
#teams .team-side-score.is-pending { font-size:0.6875rem; }
#teams .team-side-score.is-started { max-width:7rem; font-family:inherit; line-height:1.2; text-align:right; white-space:normal; }
/* UI-579: the kickoff on one line ("Sun Oct 11 · 12:00 PM") where the column has room;
   the narrow column stacks it in two short lines, still inside the row's one height. */
#teams .team-side-when { display:flex; align-items:baseline; justify-content:flex-end; gap:0.25rem; line-height:1.25; }
#teams .team-side-when small { color:var(--muted); font-size:0.6875rem; font-weight:650; white-space:nowrap; }
#teams .team-side-when small+small::before { content:"· "; }
#teams .team-side-game.is-final { cursor:pointer; }
#teams .team-side-game.is-final:hover { background:#ffffff0f; }
#teams .team-side-game.is-next { border-radius:var(--r-control); background:linear-gradient(90deg, var(--accent-soft), transparent 85%); box-shadow:inset 3px 0 0 var(--accent); }
#teams .team-side-game.is-next .team-week, #teams .team-side-game.is-next .team-side-when small { color:var(--accent); }
#teams .team-side-bye { color:var(--muted); font-size:0.6875rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
#teams .team-side-note { grid-column:2; margin-top:-0.125rem; color:var(--muted); font-size:0.6875rem; font-weight:700; line-height:1.2; }
#teams .team-game-open { position:absolute; inset:0; z-index:0; width:100%; padding:0; border:0; border-radius:var(--r-control); background:none; cursor:pointer; }
#teams .team-game-open:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
#teams .team-schedule-all { display:none; }
#teams .team-side-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.25rem 0.75rem; margin:0.625rem 0.5rem 0; padding:0.5rem 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--bg); color:var(--muted); font:700 0.6875rem var(--font-mono); }
#teams .team-side-summary b { color:var(--ink); }
#teams .team-side-summary b.is-up { color:var(--good); }
#teams .team-side-summary b.is-down { color:var(--bad); }
@media (max-width:75em) {
  #teams .team-layout { grid-template-columns:14.5rem minmax(0, 1fr); }
  #teams .team-layout .team-overview { grid-template-columns:minmax(0, 1fr) 20rem; }
}
/* Phones and narrow tablets: the schedule follows the tabs, on Overview only, folded to
   the last 2 and next 3 games until "All 17 games" opens the rest. */
@media (max-width:60em) {
  #teams .team-layout { grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-template-areas:none; }
  #teams .team-layout>:is(.team-sections, .team-sidecar, .team-view-controls, .team-body) { grid-area:auto; }
  #teams .team-layout .team-overview { grid-template-columns:minmax(0, 1fr); }
  #teams .team-layout:not([data-section="overview"])>.team-sidecar { display:none; }
  #teams .team-sidecar:not(.is-all) .team-side-game.is-extra { display:none; }
  #teams .team-schedule-all { display:inline-flex; margin:0.125rem 0.5rem 0; }
}
@media (max-width:40em) {
  #teams .team-layout { row-gap:0.875rem; }
  #teams .team-sidecar { padding:0.75rem 0.375rem 0.5rem; }
}
/* Large text (UI-261): under 12em of row, the result or kickoff drops under the opponent
   instead of overflowing the column. */
#teams .team-side-list { container-type:inline-size; }
/* UI-579: the 14.5rem column (under 75em of screen) has no room for the kickoff on one line
   (it needs about 15rem of list): date over time, inside the same row height. */
@container (max-width: 15rem) {
  #teams .team-side-when { display:grid; justify-items:end; line-height:1.15; }
  #teams .team-side-when small+small::before { content:none; }
}
@container (max-width: 12em) {
  #teams .team-side-copy { flex-wrap:wrap; }
  #teams .team-side-when { justify-items:start; }
}
/* UI-350 T7: a long-press on a glossary term or tip shows its definition (the shared tooltip)
   instead of selecting the text under the finger. */
:is(#teams, #teamPropDialog, #teamPlayerDialog, #teamPositionDialog) :is([data-term], [data-tip]) { -webkit-user-select:none; user-select:none; }

/* NBA roster: a card per position, one table row per player. Under 34rem of card the name
   takes its own line and the nine numbers share the row under it, labels above. */
.team-rosters { display:grid; gap:1rem; margin-top:0.5rem; }
.team-rosters>.team-subhead, .team-rosters>.team-roster-note { margin:0; }
.team-roster { container:team-roster / inline-size; }
.team-roster h3 { display:flex; align-items:center; gap:0.375rem; margin:0 0 0.5rem; }
.team-roster h3 small { font-size:0.75rem; font-weight:600; }
.team-roster-table { width:100%; border-collapse:collapse; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.team-roster-table :is(th, td) { padding:0.3125rem 0.375rem; border:0; border-top:1px solid var(--line); background:none; text-align:right; vertical-align:middle; white-space:nowrap; }
.team-roster-table thead th { border-top:0; color:var(--muted); font:750 0.625rem var(--font-mono); letter-spacing:0.04em; }
/* max-width:0 lets the name column take what the numbers leave and truncate a long name. */
.team-roster-table :is(thead, tbody) th:first-child { width:100%; max-width:0; padding-left:0; text-align:left; }
.team-roster-table tbody th, .team-roster-names { font-weight:600; }
.team-roster-table td { font-weight:700; }
.team-roster-who { display:flex; align-items:center; gap:0.5rem; min-width:0; overflow:hidden; }
.team-roster-who .team-player-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@container team-roster (max-width: 34rem) {
  .team-roster-table, .team-roster-table :is(thead, tbody) { display:block; }
  .team-roster-table tr { display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); align-items:baseline; padding:0.375rem 0; border-top:1px solid var(--line); }
  .team-roster-table thead tr { border-top:0; padding:0 0 0.125rem; }
  .team-roster-table :is(th, td) { padding:0 0.125rem; border:0; }
  .team-roster-table thead th:first-child { display:none; }
  .team-roster-table tbody th:first-child { grid-column:1 / -1; width:auto; max-width:100%; padding:0 0 0.25rem; }
  .team-roster-table td { font-size:0.75rem; }
}
.team-roster-names { display:grid; grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); gap:0.375rem 1rem; margin:0; padding:0; list-style:none; font-size:0.8125rem; }
/* A player who has left: muted, listed last, his new team beside the name. */
.team-roster-table tr.is-gone :is(th, td) { color:var(--muted); }
.team-roster-waiting { margin:0.5rem 0 0; padding-top:0.375rem; border-top:1px solid var(--line); font-size:0.8125rem; font-weight:600; line-height:1.6; }
.team-roster h3+.team-roster-waiting { margin-top:0; padding-top:0; border-top:0; }
.team-roster-gone { flex:none; padding:0.0625rem 0.375rem; border:1px solid var(--line); border-radius:var(--r-data); color:var(--muted); font:700 0.625rem var(--font-mono); letter-spacing:0.02em; white-space:nowrap; }
.team-roster-preview .team-roster-table thead th { border-top:0; }
.team-roster-preview .team-roster-who .team-pos-chip { flex:none; }
.team-roster-preview .team-card-foot { margin-top:0.5rem; }