/* Slate (?view=games), proposed site v3 (PS-07): a calm game rail, a compact game header,
   "Best in this game" as evidence rows, Key players mini-chart cards, All players one line
   each, and All props collapsed. The Player page owns depth.
   Scoped to #studioSurface so the shared game-lines and line-strip markup elsewhere keep their own looks.
   Colour means performance (--good / --bad / --thin, always with a glyph or word), except LIVE
   marks, which are red (--bad) site-wide; blue is for actions and picked prices only. Motion uses
   the arcade.css tokens. */
#studioSurface { display:grid; grid-template-columns:minmax(0, 1fr); gap:1.5rem; min-width:0; padding-bottom:1.5rem; }
#studioSurface[hidden], #studioSurface :is(.slate-top, .slate-section, .slate-allprops)[hidden] { display:none !important; }
/* Load failure (shared.loadError, UI-32): the plain message and a Retry button, both inside one
   dashed empty-state box like Props and Today (UI-74). The box sits on the wrapper, not the <p>. */
#studioSurface .slate-load-error { display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; padding:2.1875rem;
  background:var(--surface-subtle); border:1px dashed var(--line); border-radius:var(--r-card); color:var(--muted); font-size:0.75rem; line-height:1.8; }
html body[data-layout] #studioSurface .slate-load-error .empty-state { margin:0; padding:0; background:none; border:0; border-radius:0; text-align:left; }
#studioSurface :is(button, a, select, input, summary, [tabindex]):focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* Selected state (UI-455): the shared --selected-bg (arcade.css, UI-456) and an accent edge, for the
   game tiles, the kickoff chips and the position segments. Text stays --ink, so the verdict colours
   keep their meaning. */

/* ---- Heading, filters and the game rail ------------------------------------------------ */
/* Title and week picker on one row, the kickoff chips on one scrolling row under them, then the rail. */
#studioSurface .slate-top { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"heading controls" "chips chips" "rail rail"; align-items:end; gap:0.75rem 1.25rem; min-width:0; padding-top:0.75rem; }
#studioSurface .slate-heading { grid-area:heading; display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.875rem; min-width:0; }
/* Large text (200% at 390) wraps the title and meta instead of widening the page. */
#studioSurface .slate-heading > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#studioSurface .slate-top > .studio-schedule-toolbar { display:contents; }
#studioSurface .slate-top .studio-window-links { grid-area:chips; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:0.125rem 0.125rem 0.25rem; }
#studioSurface .slate-top .studio-window-links::-webkit-scrollbar { display:none; }
#studioSurface .slate-top .studio-window-links button { flex:0 0 auto; white-space:nowrap; }
#studioSurface .slate-top .studio-schedule-controls { grid-area:controls; width:auto; min-width:0; display:flex; justify-content:flex-end; margin:0; }
#studioSurface .slate-top .studio-schedule-controls select { width:7.5rem; }
#studioSurface .slate-top > .studio-schedule { grid-area:rail; }
#studioSurface .slate-title { margin:0; font:800 2rem/1.05 var(--font-display); letter-spacing:-0.02em; color:var(--ink); }
#studioSurface .slate-meta { margin:0; color:var(--muted); font-size:0.875rem; }
#studioSurface .studio-schedule-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0.5rem 0.75rem; margin:0; min-width:0; }
#studioSurface .studio-window-links { display:flex; flex-wrap:wrap; gap:0.375rem; margin:0; padding:0; background:none; border:0; box-shadow:none; min-width:0; }
#studioSurface .studio-window-links[hidden] { display:none; }
#studioSurface .studio-window-links button { height:2rem; display:inline-flex; align-items:center; gap:0.375rem; padding:0 0.75rem; border:2px solid var(--line); border-radius:var(--r-control);
  background:var(--surface); color:var(--muted); font:700 0.8125rem var(--font-body); box-shadow:none; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
#studioSurface .studio-window-links button:hover { color:var(--ink); border-color:var(--muted); }
#studioSurface .studio-window-links button[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
#studioSurface .studio-window-links small { font:700 0.75rem var(--font-mono); }
#studioSurface .studio-schedule-controls { width:21rem; max-width:100%; display:grid; grid-template-columns:6.5rem minmax(0, 1fr); gap:0.5rem; }
#studioSurface .studio-schedule-controls :is(input, select) { height:2.25rem; font-size:0.8125rem; }

#studioSurface .studio-schedule { grid-column:1 / -1; min-width:0; display:flex; gap:0.75rem; margin:0; padding:0.375rem 0.375rem 0.625rem 0.125rem;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:0.5rem; scrollbar-width:thin; }
#studioSurface .studio-schedule.is-dragging { scroll-snap-type:none; cursor:grabbing; }
#studioSurface .studio-window { display:flex; align-items:stretch; gap:0.625rem; flex:0 0 auto; margin:0; padding:0; }
/* The window label is a snap point too, so the rail can scroll back to "Thursday night". */
#studioSurface .studio-window h3 { scroll-snap-align:start; align-self:center; margin:0; max-width:4.5rem; color:var(--muted); font:700 0.6875rem/1.25 var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
#studioSurface .studio-window-games { display:flex; gap:0.625rem; }
/* Calm tiles: neutral surface, a small verdict dot and "N Strong"; the selected tile is raised and
   accent-edged (a 1px ring inside the 2px border, so it reads at a glance without a white fill). */
html body[data-layout] #studioSurface .studio-game-button { flex:0 0 auto; width:11.5rem; min-height:0; height:auto; display:grid; grid-template-columns:minmax(0, 1fr); gap:0.3125rem; align-content:start;
  padding:0.75rem 0.875rem; background:var(--surface); color:var(--ink); border:2px solid var(--line); border-radius:var(--r-control); box-shadow:none; text-align:left; cursor:pointer;
  scroll-snap-align:start; transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), translate var(--dur-instant) var(--ease-press); }
html body[data-layout] #studioSurface .studio-game-button:hover { border-color:var(--muted); }
#studioSurface .studio-game-button:active { translate:0 calc(1px * var(--move)); }
html body[data-layout] #studioSurface .studio-game-button[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); view-transition-name:slate-tile; }
#studioSurface .studio-game-teams { display:flex; align-items:center; gap:0.3125rem; font:800 1rem var(--font-display); white-space:nowrap; }
html body[data-layout] #studioSurface .studio-game-teams strong { color:inherit; font:inherit; }
html body[data-layout] #studioSurface .studio-game-teams > [aria-hidden=true]:not(.slate-tile-logo) { opacity:0.6; font-size:0.875rem; }
html body[data-layout] #studioSurface .slate-tile-logo { width:1.25rem; height:1.25rem; flex:0 0 1.25rem; display:inline-grid; place-items:center; padding:0; background:none; border:0; box-shadow:none; }
#studioSurface .slate-tile-logo img { width:100%; height:100%; object-fit:contain; }
#studioSurface .studio-game-button .studio-game-time { display:block; margin:0; color:inherit; font:700 0.75rem var(--font-mono); white-space:nowrap; opacity:0.7; }
/* Kicked off: a Live tag ahead of the kickoff time. LIVE marks are red (--bad) site-wide, as DFS's
   LIVE tag and Today's live dot: the tag, its ring and its dot, selected or not. */
#studioSurface .studio-game-button .studio-game-time.is-live { display:flex; align-items:center; gap:0.4375rem; opacity:1; }
#studioSurface .studio-game-time.is-live .slate-tile-kick { opacity:0.7; }
#studioSurface .slate-tile-live { display:inline-flex; align-items:center; gap:0.3125rem; padding:0.0625rem 0.4375rem 0.0625rem 0.375rem; border-radius:var(--r-data); box-shadow:inset 0 0 0 1.5px currentColor;
  color:var(--bad); font:800 0.625rem/1.4 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; }
#studioSurface .slate-live-dot { width:0.375rem; height:0.375rem; border-radius:50%; background:currentColor; }
@media (prefers-reduced-motion:no-preference) { #studioSurface .slate-live-dot { animation:slate-live 1.6s var(--ease-in-out) infinite; } }
@keyframes slate-live { 50% { opacity:0.25; } }
#studioSurface .slate-tile-count { display:inline-flex; align-items:center; gap:0.375rem; min-height:1rem; font:800 0.75rem var(--font-body); color:var(--muted); }
#studioSurface .slate-tile-count.is-strong, #studioSurface .slate-tile-count.is-lean { color:var(--good); }
#studioSurface .studio-schedule .empty-state { width:100%; }
/* Carried over from the old Slate rules in studio-games.css (UI-R11): the week picker's label is
   visually hidden, the kickoff chips' counts sit in a small pill, tiles spread their two teams, and
   the rail drags (studio-schedule drag code) without selecting text or dragging logos. */
#studioSurface .studio-schedule-controls > label { display:block; min-width:0; margin:0; font-size:0; }
#studioSurface .studio-schedule-controls :is(input, select) { min-width:0; padding:0.5rem 0.625rem; }
#studioSurface .studio-window-links button small { display:inline-grid; place-items:center; min-width:1rem; height:1rem; padding:0 0.1875rem; color:var(--muted); background:var(--surface-raised); border-radius:var(--r-control); }
/* The selected chip's count is a small accent pill, the chip's one solid mark. */
#studioSurface .studio-window-links button[aria-pressed=true] small { color:var(--accent-ink); background:var(--accent); }
#studioSurface .studio-game-teams { justify-content:space-between; }
#studioSurface .studio-player-filters .position-segments { width:100%; }
#studioSurface .studio-player-filters .position-segments button { flex:1; }
#studioSurface .studio-game-button { position:relative; }
#studioSurface .studio-schedule { scrollbar-color:#4c3d64 var(--surface-subtle); user-select:none; -webkit-user-select:none; }
#studioSurface .studio-schedule img { -webkit-user-drag:none; }
@media (hover:hover) and (pointer:fine) { #studioSurface .studio-schedule, #studioSurface .studio-schedule .studio-game-button { cursor:grab; } }
#studioSurface .studio-schedule.is-dragging * { cursor:grabbing; }
#studioSurface .slate-tile-count.is-final { color:var(--ink); }
#studioSurface .slate-tile-count.is-final b { font:800 0.8125rem var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---- Day strip (SlateModel.dayStripHtml; not scoped to the Slate, so Props can use it) ---- */
.day-strip { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; grid-template-areas:"prev days next cal"; gap:0.375rem; align-items:stretch; min-width:0; }
.day-strip > [data-day-step="-1"] { grid-area:prev; }
.day-strip > [data-day-step="1"] { grid-area:next; }
.day-strip > .day-strip-toggle { grid-area:cal; }
.day-strip > .day-strip-days { grid-area:days; }
.day-strip .day-strip-range { grid-area:range; display:none; align-self:center; justify-self:center; color:var(--ink); font:800 1.125rem/1 var(--font-display); letter-spacing:0.01em; white-space:nowrap; }
.day-strip .day-strip-days { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(4.5rem, 1fr); gap:0.375rem; min-width:0;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
.day-strip .day-strip-days::-webkit-scrollbar { display:none; }
.day-strip .day-strip-day { display:grid; grid-template-rows:auto auto auto; justify-items:start; align-content:start; gap:0.25rem; min-width:0; margin:0;
  padding:0.5rem 0.625rem 0.5625rem; background:var(--surface); color:var(--ink); border:2px solid var(--line); border-radius:var(--r-control);
  text-align:left; cursor:pointer; scroll-snap-align:start; opacity:1;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.day-strip .day-strip-day:hover:not(:disabled) { border-color:var(--muted); }
.day-strip .day-strip-day[aria-pressed=true] { background:var(--selected-bg); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.day-strip .day-strip-weekday { display:inline-block; padding:0.125rem 0; color:var(--muted); font:700 0.6875rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; }
.day-strip .is-today .day-strip-weekday { padding-inline:0.3125rem; background:var(--ink); color:var(--bg); border-radius:var(--r-data); }
.day-strip .day-strip-date { display:flex; align-items:baseline; gap:0.25rem; color:var(--muted); font:700 0.8125rem/1 var(--font-display); letter-spacing:0.03em; text-transform:uppercase; white-space:nowrap; }
.day-strip .day-strip-date b { color:var(--ink); font:800 1.75rem/0.9 var(--font-display); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.day-strip .day-strip-count { display:inline-flex; align-items:center; gap:0.375rem; min-height:1rem; color:var(--muted); font:700 0.75rem/1.2 var(--font-body); white-space:nowrap; }
.day-strip .day-strip-day[aria-pressed=true] .day-strip-count { color:var(--ink); }
.day-strip .day-strip-day.is-past:not([aria-pressed=true]) .day-strip-date b { color:var(--muted); }
.day-strip .day-strip-day.is-empty { background:none; border-style:dashed; cursor:default; }
.day-strip .day-strip-day.is-empty :is(.day-strip-date, .day-strip-date b, .day-strip-count) { color:var(--muted); opacity:0.6; }
/* A game day the page has nothing for (Props: no open lines): unfilled and muted, still a button. */
.day-strip .day-strip-day.is-dim:not([aria-pressed=true]) { background:none; }
.day-strip .day-strip-day.is-dim:not([aria-pressed=true]) > * { opacity:0.7; }
.day-strip .day-strip-day.is-dim:not([aria-pressed=true]) .day-strip-date b { color:var(--muted); }
.day-strip-lines { flex:0 0 auto; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--green); }
.day-strip .day-strip-step { min-width:2.5rem; display:grid; place-items:center; margin:0; padding:0 0.5rem; background:var(--surface); color:var(--ink);
  border:2px solid var(--line); border-radius:var(--r-control); font:800 1.375rem/1 var(--font-body); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.day-strip .day-strip-step:hover:not(:disabled) { border-color:var(--muted); }
.day-strip .day-strip-step:disabled { opacity:0.35; cursor:default; }
.day-strip .day-strip-toggle[aria-expanded=true] { background:var(--selected-bg); border-color:var(--accent); }
.day-strip button:focus-visible, .day-strip-calendar button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* Inside the scroller, so the ring isn't cut off. */
.day-strip .day-strip-days > button:focus-visible, #studioSurface .day-strip .day-strip-days > button:focus-visible { outline-offset:-0.3125rem; }
.day-strip-calendar { position:absolute; top:calc(100% + 0.5rem); right:0; z-index:30; width:min(100%, 21rem); display:grid; gap:0.5rem;
  padding:0.75rem 0.875rem 0.75rem; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-card);
  box-shadow:0 0 0 0.375rem var(--bg); }
.day-strip-calendar[hidden] { display:none; }
.day-strip-cal-head { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.5rem; }
.day-strip-calendar .day-strip-cal-head .day-strip-step { min-width:2.25rem; height:2.25rem; display:grid; place-items:center; padding:0; background:var(--bg); color:var(--ink);
  border:2px solid var(--line); border-radius:var(--r-control); font:800 1.125rem/1 var(--font-body); cursor:pointer; }
.day-strip-calendar .day-strip-cal-head .day-strip-step:disabled { opacity:0.35; cursor:default; }
.day-strip-cal-title { text-align:center; color:var(--ink); font:800 1.125rem/1.1 var(--font-display); }
.day-strip-cal-weekdays, .day-strip-cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:0.25rem; }
.day-strip-cal-weekdays span { color:var(--muted); font:700 0.6875rem var(--font-body); text-align:center; }
.day-strip-calendar .day-strip-cal-cell { position:relative; min-width:0; min-height:2.5rem; display:grid; place-items:center; margin:0; padding:0;
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-data); font:700 0.875rem var(--font-mono); font-variant-numeric:tabular-nums; opacity:1; cursor:pointer; }
.day-strip-calendar .day-strip-cal-cell:hover:not(:disabled) { border-color:var(--ink); }
.day-strip-calendar .day-strip-cal-cell.is-out { background:none; border:0; }
.day-strip-calendar .day-strip-cal-cell.is-past { color:var(--muted); }
.day-strip-calendar .day-strip-cal-cell.is-empty { background:none; border-style:dashed; color:var(--muted); opacity:0.55; cursor:default; }
.day-strip-calendar .day-strip-cal-cell.is-dim:not([aria-pressed=true]) { background:none; color:color-mix(in srgb, var(--muted) 70%, var(--bg)); }
.day-strip-calendar .day-strip-cal-cell.is-today { box-shadow:inset 0 0 0 2px var(--ink); }
.day-strip-calendar .day-strip-cal-cell[aria-pressed=true] { background:var(--selected-bg); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.day-strip-calendar .day-strip-cal-cell .day-strip-lines { position:absolute; bottom:0.25rem; left:calc(50% - 0.15625rem); width:0.3125rem; height:0.3125rem; }
.day-strip-cal-key { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; margin:0.125rem 0 0; color:var(--muted); font:600 0.6875rem var(--font-body); }
.day-strip-cal-key .day-strip-lines { width:0.4375rem; height:0.4375rem; }
.day-strip-cal-swatch { width:0.75rem; height:0.75rem; margin-left:0.625rem; border:1px dashed var(--muted); border-radius:var(--r-data); opacity:0.7; }
.day-strip-cal-swatch.is-dim { border-style:solid; }
@media (prefers-reduced-motion: reduce) { .day-strip :is(.day-strip-day, .day-strip-step) { transition:none; } }
@media (max-width: 40em) {
  .day-strip { grid-template-areas:"prev range next cal" "days days days days"; gap:0.5rem 0.375rem; }
  .day-strip .day-strip-range { display:block; }
  .day-strip .day-strip-days { grid-auto-columns:minmax(4.25rem, 1fr); gap:0.3125rem; }
  .day-strip .day-strip-step { min-width:2.5rem; min-height:2.5rem; padding:0 0.375rem; }
  .day-strip .day-strip-day { padding:0.4375rem 0.5rem 0.5rem; }
  .day-strip .day-strip-count { font-size:0.6875rem; gap:0.3125rem; }
  .day-strip .day-strip-date b { font-size:1.5rem; }
  .day-strip-calendar { width:100%; }
}
#studioSurface .slate-top.has-day-strip { grid-template-areas:"strip strip" "heading controls" "chips chips" "rail rail"; }
#studioSurface .slate-top > .slate-day-strip { grid-area:strip; position:relative; min-width:0; margin-bottom:0.375rem; }

/* Verdict dots (tiles, All players, legend): filled = Strong, rings for the rest. */
#studioSurface .slate-dot { position:relative; flex:0 0 auto; width:0.625rem; height:0.625rem; border-radius:50%; box-shadow:inset 0 0 0 2px var(--line); }
#studioSurface .slate-dot.v-strong { background:var(--good); box-shadow:none; }
#studioSurface .slate-dot.v-lean { box-shadow:inset 0 0 0 2px var(--good); }
#studioSurface .slate-dot.v-thin { box-shadow:inset 0 0 0 2px var(--thin); }
#studioSurface .slate-dot.v-against { box-shadow:inset 0 0 0 2px var(--bad); }
/* No clear edge keeps the plain ring; No line is a faint dashed ring so the legend tells them apart. */
#studioSurface .slate-dot.v-none { box-shadow:none; border:1.5px dashed var(--muted); opacity:0.7; box-sizing:border-box; }

/* ---- Game header ------------------------------------------------------------------------ */
#studioSurface .slate-game { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 24rem) minmax(0, 17rem);
  grid-template-areas:"title lines mu" "weather lines mu" "actions lines mu"; gap:0.5rem 2rem; align-items:start; margin:0; padding:1.25rem 1.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
#studioSurface .slate-game > .studio-game-context { display:contents; }
/* No game lines (or no matchup chips): the header closes up instead of keeping an empty column. */
#studioSurface .slate-game.no-lines { grid-template-columns:minmax(0, 1fr) minmax(0, 17rem); grid-template-areas:"title mu" "weather mu" "actions mu"; }
#studioSurface .slate-game.no-lines.no-mu { grid-template-columns:minmax(0, 1fr); grid-template-areas:"title" "weather" "actions"; }
#studioSurface .slate-game.no-mu:not(.no-lines) { grid-template-columns:minmax(0, 1fr) minmax(0, 24rem); grid-template-areas:"title lines" "weather lines" "actions lines"; }
#studioSurface .slate-game-title { grid-area:title; display:grid; grid-template-columns:minmax(0, 1fr); gap:0.375rem; min-width:0; }
#studioSurface .slate-matchup { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.625rem; margin:0; font:800 1.875rem/1.1 var(--font-display); letter-spacing:-0.02em; }
#studioSurface .slate-matchup .slate-team { display:inline-flex; align-items:center; gap:0.5rem; color:var(--ink); font:inherit; }
#studioSurface .slate-team .slate-team-logo { width:2.25rem; height:2.25rem; flex:0 0 2.25rem; padding:0; background:none; border:0; box-shadow:none; }
#studioSurface .slate-team-logo img { width:100%; height:100%; object-fit:contain; }
/* Logos that sink into the dark page (TeamColors.LOGO_LOW: TB, DAL, ...) take Team boxes' light
   edge (players.css .team-logo-badge.is-logo-low, UI-611/UI-662), at 1px for this larger logo (UI-634). */
#studioSurface .slate-team-logo.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)); }
#studioSurface .slate-matchup :is(a, .team-name-link) { color:var(--ink); font:inherit; letter-spacing:inherit; text-decoration:none; }
#studioSurface .slate-matchup a:hover { color:var(--accent); }
#studioSurface .slate-at { color:var(--muted); font-size:1.25rem; }
/* "@" stays with the home team when the matchup wraps. */
#studioSurface .slate-at-home { display:inline-flex; align-items:center; gap:0.375rem 0.625rem; color:var(--ink); font:inherit; letter-spacing:inherit; white-space:nowrap; }
#studioSurface .slate-game-meta { margin:0; color:var(--muted); font-size:0.875rem; }
#studioSurface .slate-game-meta b { color:var(--ink); font:700 0.875rem var(--font-mono); }
/* Implied points (UI-118) sit after each record, quieter than it, and never split across lines. */
#studioSurface .slate-implied { margin-left:0.125rem; white-space:nowrap; }
#studioSurface .slate-game-meta .slate-implied b { color:inherit; font-weight:500; }
#studioSurface .slate-weather-line { grid-area:weather; display:block; height:auto; margin:0; padding:0; background:none; border:0; color:var(--ink); font:500 0.9375rem/1.4 var(--font-body); white-space:normal; }
/* Large text (UI-261, UI-305): the game header is a container measured in its own text size, so
   its parts can wrap at 200% text on a phone instead of running past the card. */
#studioSurface #studioGameHeader { container:slate-head / inline-size; }
#studioSurface .slate-game .studio-game-actions { grid-area:actions; display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 1.25rem; width:auto; margin:0; }
html body[data-layout] #studioSurface .slate-game .studio-game-actions .text-button { display:inline-flex; align-items:center; gap:0.375rem; padding:0; background:none; border:0; box-shadow:none;
  color:var(--ink); font:800 0.875rem var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
html body[data-layout] #studioSurface .slate-game .studio-game-actions .text-button:hover { color:var(--accent); }
#studioSurface .slate-alert { width:0.5rem; height:0.5rem; border-radius:50%; background:var(--muted); }
#studioSurface .slate-injuries-button.has-injuries .slate-alert { background:var(--bad); }
/* "2 OUT, 3 Q" (UI-119) stays on one line on phones. */
#studioSurface .slate-injury-tally { white-space:nowrap; }
#studioSurface .slate-count { min-width:1.25rem; height:1.25rem; display:inline-grid; place-items:center; padding:0 0.3125rem; box-sizing:border-box; border-radius:var(--r-data);
  background:var(--accent); color:var(--accent-ink); font:700 0.6875rem var(--font-mono); text-decoration:none; }
#studioSurface .slate-game-mu { grid-area:mu; display:grid; gap:0.5rem; align-content:start; min-width:0; }
#studioSurface .slate-mu-chips { display:flex; flex-wrap:wrap; gap:0.375rem; }

/* Game prices: rows are markets, columns are the two teams (the saved table, laid out as a grid). */
#studioSurface .slate-game .studio-game-lines { grid-area:lines; flex:none; width:100%; min-width:0; max-width:none; margin:0; padding:0; border:0; }
html body[data-layout] #studioSurface .slate-game .studio-game-lines.is-unavailable { color:var(--muted); font-size:0.875rem; }
#studioSurface .studio-game-lines-markets { display:block; }
#studioSurface .studio-game-lines-table.is-selectable { width:100%; margin:0; display:grid; grid-template-columns:4.5rem repeat(2, minmax(0, 1fr)); grid-template-rows:auto repeat(3, 2.25rem);
  grid-auto-flow:column; gap:0.375rem 0.5rem; border-spacing:0; table-layout:auto; }
#studioSurface .studio-game-lines-table.is-selectable :is(thead, tbody, tr) { display:contents; }
#studioSurface .studio-game-lines-table.is-selectable :is(th, td) { display:flex; align-items:center; width:auto; height:auto; min-width:0; padding:0; text-align:left; }
#studioSurface .studio-game-lines-table.is-selectable thead th { color:var(--muted); font:700 0.8125rem var(--font-body); }
#studioSurface .studio-game-lines-table.is-selectable tbody th { color:var(--muted); font:800 0.6875rem var(--font-mono); letter-spacing:0.06em; }
#studioSurface .studio-game-lines-table .compact-team-logo { width:1.125rem; height:1.125rem; flex-basis:1.125rem; }
html body[data-layout] #studioSurface .studio-game-lines .bet-side { display:flex; width:100%; height:2.5rem; min-height:2.5rem; flex-direction:row; justify-content:space-between; gap:0.375rem; padding:0 0.625rem;
  background:var(--surface-raised); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; font:700 0.8125rem var(--font-mono); }
#studioSurface .studio-game-lines .bet-side > * { font:inherit; color:inherit; margin:0; }
#studioSurface .studio-game-lines [data-market=moneyline] .bet-side > span { display:inline; opacity:0.7; }
#studioSurface .studio-game-lines .bet-side > .bet-side-label { margin-right:-0.125rem; font:600 0.6875rem/1 var(--font-body); opacity:0.78; }
#studioSurface .studio-game-lines .bet-side > .bet-side-label + span { margin-right:auto; }
#studioSurface .studio-game-lines .bet-side:has(> .bet-side-label) > strong { padding-left:0.375rem; border-left:1px solid color-mix(in srgb, currentColor 30%, transparent); }
html body[data-layout] #studioSurface .studio-game-lines .bet-side[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); border-color:var(--edge); }
#studioSurface .studio-game-pick-notes { grid-column:1 / -1; }
/* ---- Sections --------------------------------------------------------------------------- */
#studioSurface .studio-game-body { display:grid; gap:1.75rem; grid-template-columns:minmax(0, 1fr); min-width:0; }
#studioSurface .studio-game-body[hidden] { display:none; }
#studioSurface .slate-section { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.75rem; min-width:0; container:slate-section / inline-size; }
#studioSurface .slate-section:empty { display:none; }
#studioSurface .slate-section-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.875rem; }
#studioSurface .slate-section-head h3 { margin:0; font:800 1.5rem/1.1 var(--font-display); letter-spacing:-0.02em; }
#studioSurface .slate-section-head p { margin:0; color:var(--muted); font-size:0.875rem; }
#studioSurface .slate-empty { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.5; }
#studioSurface .slate-avatar { position:relative; display:block; width:2.25rem; height:2.25rem; flex:0 0 2.25rem; overflow:hidden; border-radius:var(--r-control); border:2px solid var(--line); background:var(--surface-raised); }
html body[data-layout] #studioSurface .slate-avatar .player-avatar { position:relative; display:grid; place-items:center; width:100%; height:100%; border:0; border-radius:0; background:none; box-shadow:none;
  color:var(--muted); font:800 0.6875rem var(--font-body); }
/* The initials show until a photo loads, and stay if every photo URL fails. */
html body[data-layout] #studioSurface .slate-avatar .player-headshot { position:absolute; inset:0; }
#studioSurface .slate-avatar .has-photo .avatar-initials { visibility:hidden; }
html body[data-layout] #studioSurface .slate-avatar :is(img, .player-headshot) { width:100%; height:100%; object-fit:cover; }
#studioSurface .slate-name { padding:0; background:none; border:0; color:var(--ink); font:800 1rem/1.2 var(--font-display); text-align:left; cursor:pointer; }
#studioSurface .slate-name:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
#studioSurface .slate-open-link { display:inline-flex; align-items:center; padding:0; background:none; border:0; box-shadow:none; color:var(--ink);
  font:800 0.875rem var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
#studioSurface .slate-open-link:hover { color:var(--accent); }
#studioSurface .slate-chevron { display:inline-block; width:0.5rem; height:0.5rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; rotate:45deg; translate:0 -2px;
  transition:rotate var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
#studioSurface .slate-hits { font:700 0.8125rem var(--font-mono); color:var(--ink); }
#studioSurface .slate-hits.is-good, #studioSurface .slate-key-count.is-good strong { color:var(--good); }
#studioSurface .slate-hits.is-bad, #studioSurface .slate-key-count.is-bad strong { color:var(--bad); }
#studioSurface .slate-hits.is-thin, #studioSurface .slate-key-count.is-thin strong { color:var(--thin); }
/* Picked price (the shared bet-side buttons, restyled for rows and cards). */
html body[data-layout] #studioSurface .slate-price.ar-price { width:100%; min-width:0; height:2.5rem; display:inline-flex; flex-direction:row; justify-content:center; align-items:center; gap:0.5rem; padding:0 0.75rem;
  background:var(--surface-raised); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; font:700 0.875rem var(--font-mono); white-space:nowrap; }
#studioSurface .slate-price.ar-price > * { font:inherit; color:inherit; margin:0; }
#studioSurface .slate-price.ar-price > .bet-side-label { margin-right:-0.25rem; font:600 0.75rem/1 var(--font-body); opacity:0.78; }
#studioSurface .slate-price.ar-price:has(> .bet-side-label) > strong { padding-left:0.5rem; border-left:1px solid color-mix(in srgb, currentColor 30%, transparent); font-weight:500; }
html body[data-layout] #studioSurface .slate-price.ar-price[aria-pressed=true] { background:var(--accent); color:var(--accent-ink); }
#studioSurface .slate-price[data-saved-tag]::after { display:none; }

/* ---- Best in this game: evidence rows --------------------------------------------------- */
#studioSurface .slate-play-list { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.625rem; margin:0; padding:0; list-style:none; }
#studioSurface .slate-play { background:var(--surface); border:2px solid var(--line); border-radius:var(--r-card); transition:border-color var(--dur-fast) var(--ease-out); }
html body[data-layout] #studioSurface .slate-play.is-open { border-color:var(--ink); }
/* A fixed grid: name | market | chart | verdict | matchup | price | Why, with the signal chips
   on a line under it. Every column but the name has a set or content width, so the columns line
   up row to row, and spare width on a wide row collects at the end. The chips used to sit in
   the row on very wide screens, but inside the page's width cap they had ~24rem and stacked
   three high (UI-21, UI-36), so they are always on their own line. */
#studioSurface .slate-play-main { display:grid; grid-template-columns:2.25rem minmax(10rem, 16rem) 7.5rem 10rem 6.25rem 9.5rem 8.5rem 2.25rem minmax(0, 1fr);
  grid-template-areas:"rank who market chart verdict mu price why ." ". signals signals signals signals signals signals . ." ". headline headline headline headline headline headline . ."; align-items:center; gap:0.25rem 0.875rem; padding:0.75rem 0.875rem; }
#studioSurface .slate-rank { grid-area:rank; color:var(--muted); font:700 0.875rem var(--font-mono); }
#studioSurface .slate-play-who { grid-area:who; display:flex; align-items:center; gap:0.625rem; min-width:0; }
#studioSurface .slate-play-name { display:grid; gap:0.0625rem; min-width:0; }
#studioSurface :is(.slate-play-name, .slate-key-name) small { color:var(--muted); font-size:0.75rem; }
#studioSurface .slate-play-market { grid-area:market; font-weight:800; font-size:0.875rem; }
#studioSurface .slate-play-chart { grid-area:chart; display:flex; align-items:center; gap:0.5rem; }
/* The micro chart is as wide as its slots, so the hit count follows the last bar. */
#studioSurface .slate-play-chart .ar-chart-micro { width:auto; }
#studioSurface .slate-play-verdict { grid-area:verdict; }
#studioSurface .slate-play-signals { grid-area:signals; min-width:0; }
#studioSurface .slate-play-mu { grid-area:mu; }
#studioSurface .slate-play-price { grid-area:price; display:flex; min-width:0; }
#studioSurface .slate-why-toggle { grid-area:why; width:2.25rem; height:2.25rem; display:grid; place-items:center; padding:0; background:var(--surface-raised); color:var(--ink);
  border:2px solid var(--line); border-radius:var(--r-control); box-shadow:none; cursor:pointer; }
#studioSurface .slate-why-toggle:hover { border-color:var(--ink); }
#studioSurface .slate-why-toggle[aria-expanded=true] .slate-chevron { rotate:225deg; translate:0 2px; }
#studioSurface .slate-play-headline { grid-area:headline; margin:0; color:var(--muted); font-size:0.8125rem; }
#studioSurface .slate-play-headline:empty { display:none; }
/* The reason rises after the verdict stamps (arcade.css ar-reason, UI-169); once, like the stamp. */
@media (prefers-reduced-motion:no-preference) { #studioSurface .slate-play-headline { animation:ar-reason var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--dur-fast) + 60ms); } }
#studioSurface .slate-why-body { display:grid; grid-template-columns:minmax(0, 1fr) 17rem; gap:0.875rem 1.25rem; padding:0 0.875rem 0.875rem 3.875rem; }
#studioSurface .slate-why-side { display:grid; gap:0.5rem; align-content:start; }
#studioSurface .slate-why-side small { color:var(--muted); font-size:0.75rem; line-height:1.4; }
/* UI-871: a play with no games says so once, in muted text (Props' words, UI-872), in place of
   the chart, the "no data" chips and the dashes; its Why is one column with no chart. */
#studioSurface .slate-no-games { margin:0; color:var(--muted); font-size:0.8125rem; font-weight:600; line-height:1.3; }
#studioSurface .slate-play.is-empty :is(.slate-play-signals:not(:has(.ar-signals > *)), .slate-play-mu:empty) { display:none; }
#studioSurface .slate-why-body.is-empty { grid-template-columns:minmax(0, 1fr); }
#studioSurface .slate-why-body.is-empty .slate-why-side { justify-items:start; }
#studioSurface .slate-why-thin { margin:0; color:var(--muted); font-size:0.875rem; line-height:1.4; }
#studioSurface .slate-why-thin strong { color:var(--ink); font-weight:700; }
#studioSurface .slate-key.is-empty .slate-open-link { margin-left:auto; }
#studioSurface .slate-play:not(.is-open) .ar-why .ar-sig-row { animation:none; }
#studioSurface .slate-play.is-open .ar-sig-row:nth-child(2) { --i:1; } #studioSurface .slate-play.is-open .ar-sig-row:nth-child(3) { --i:2; } #studioSurface .slate-play.is-open .ar-sig-row:nth-child(4) { --i:3; }

/* ---- Key players: mini-chart cards ------------------------------------------------------ */
#studioSurface .slate-key-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap:1rem; }
/* Four key-player cards are drawn; the fourth shows only where the grid runs four across. */
html body[data-layout] #studioSurface .slate-key:nth-child(4) { display:none; }
@media (min-width: 112.5em) {
  #studioSurface .slate-key-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  html body[data-layout] #studioSurface .slate-key:nth-child(4) { display:grid; }
}
html body[data-layout] #studioSurface .slate-key { display:grid; gap:0.875rem; align-content:start; min-width:0; padding:1rem 1.125rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); box-shadow:none; animation:ar-rise var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 40ms * var(--move)); }
#studioSurface .slate-key-head { display:flex; align-items:center; gap:0.625rem; min-width:0; }
#studioSurface .slate-key-name { flex:1 1 auto; display:grid; gap:0.125rem; min-width:0; }
/* The prop wraps under the position chip rather than being cut ("WR · Receiving yards U 42.5").
   Position chips (.slate-pos) are StudioKit.posChip, coloured by position (UI-442). */
#studioSurface .slate-key-name small { display:flex; flex-wrap:wrap; align-items:center; gap:0 0.5rem; min-width:0; overflow-wrap:anywhere; font-family:var(--font-mono); }
#studioSurface .slate-key-chart { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:0.875rem; }
#studioSurface .slate-key-chart .ar-chart-card { max-width:none; }
#studioSurface .slate-key-count { display:grid; justify-items:end; margin:0; }
#studioSurface .slate-key-count strong { font:700 1.875rem/1 var(--font-mono); }
#studioSurface .slate-key-count small { color:var(--muted); font:700 0.6875rem var(--font-mono); }
#studioSurface .slate-key-nums { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(4.75rem, 100%), 1fr)); gap:0.5rem; margin:0; padding-top:0.75rem; border-top:1px solid var(--line); }
#studioSurface .slate-key-nums dt { color:var(--muted); font-size:0.6875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* UI-461, UI-470 (with UI-524): the Vs line wraps inside the card at 200% text, and its
   screen-reader words (left:0 above) are anchored inside it, not past the screen edge. */
#studioSurface .slate-key-nums > * { min-width:0; }
#studioSurface .slate-key-nums dd { position:relative; margin:0.125rem 0 0; font:700 0.9375rem var(--font-mono); overflow-wrap:anywhere; }
#studioSurface .slate-key-nums dd.is-good { color:var(--good); }
#studioSurface .slate-key-nums dd.is-bad { color:var(--bad); }
#studioSurface .slate-key-foot { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
/* Charts and verdicts animate when a game opens, not again when a price is picked. */
#studioSurface .is-settled :is(.ar-bar, .ar-verdict, .slate-key, .slate-play-headline) { animation:none; }

/* ---- All players: one line each -------------------------------------------------------- */
#studioSurface .slate-teams { display:grid; gap:0.75rem; }
#studioSurface .slate-teams:empty { display:none; }
#studioSurface .slate-teams-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; align-items:start; }
#studioSurface .slate-team-card { display:grid; min-width:0; padding:0.25rem 0 0.25rem; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-card); }
#studioSurface .slate-card-head { display:flex; align-items:center; gap:0.5rem; min-width:0; padding:0.625rem 1rem; border-bottom:1px solid var(--line); }
#studioSurface .slate-card-head h4 { margin:0; font:800 1.125rem/1.15 var(--font-display); }
#studioSurface .slate-card-head h4 :is(a, .team-name-link) { color:var(--ink); font:inherit; text-decoration:none; }
#studioSurface .slate-card-head h4 a:hover { color:var(--accent); }
#studioSurface .slate-card-logo { width:1.5rem; height:1.5rem; flex:0 0 1.5rem; padding:0; background:none; border:0; box-shadow:none; }
#studioSurface .slate-card-logo img { width:100%; height:100%; object-fit:contain; }
#studioSurface .slate-card-note { margin-left:auto; color:var(--muted); font-size:0.75rem; }
#studioSurface .slate-roster-list { display:grid; margin:0; padding:0; list-style:none; }
#studioSurface .slate-roster-row { position:relative; display:grid; grid-template-columns:0.625rem 2rem minmax(0, 1fr) auto 0.75rem; align-items:center; gap:0.75rem; min-height:2.75rem; padding:0.25rem 1rem;
  border-top:1px solid var(--line); transition:background-color var(--dur-fast) var(--ease-out); }
#studioSurface .slate-roster-row:first-child { border-top:0; }
/* A smaller headshot than Best and Key players, so a roster row stays one line tall. */
#studioSurface .slate-roster-avatar { width:2rem; height:2rem; flex-basis:2rem; }
#studioSurface .slate-roster-row:hover { background:var(--surface-raised); }
#studioSurface .slate-roster-name { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.125rem 0.5rem; min-width:0; }
/* The whole row opens his page; the owner tag and injury tag stay clickable on top. */
#studioSurface .slate-roster-row .slate-name::after { content:""; position:absolute; inset:0; }
#studioSurface .slate-roster-row :is(.owner-tag, a, .slate-tag) { position:relative; z-index:1; }
#studioSurface .slate-roster-prop { color:var(--muted); font:700 0.8125rem var(--font-mono); white-space:nowrap; }
#studioSurface .slate-roster-go { color:var(--muted); font-weight:800; }
#studioSurface .slate-tag { align-self:center; padding:0.0625rem 0.375rem; border-radius:var(--r-data); background:var(--thin-bg); color:var(--thin); font:800 0.625rem var(--font-body); letter-spacing:0.04em; }
#studioSurface .slate-tag.is-out { background:var(--bad-bg); color:var(--bad); }
/* A carried status (UI-608, "OUT W3"): an earlier week's, outlined like Props' carried tag. */
#studioSurface .slate-tag.is-carried { background:transparent; box-shadow:inset 0 0 0 1px currentColor; }
/* "Bigger role (Hall out)" (UI-613) in All players: the slate-tag pill, outlined in lilac. Best in this game
   says it in the play's Role chip (UI-698). */
#studioSurface .slate-tag.slate-dk-role { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--lilac); letter-spacing:0; }
#studioSurface .slate-roster-foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1rem; }
#studioSurface .slate-legend { display:flex; flex-wrap:wrap; gap:0.25rem 1rem; margin:0; padding:0; list-style:none; color:var(--muted); font-size:0.75rem; }
#studioSurface .slate-legend li { display:inline-flex; align-items:center; gap:0.375rem; }
#studioSurface .slate-link { padding:0; background:none; border:0; color:var(--ink); font:800 0.8125rem var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
#studioSurface .slate-link:hover { color:var(--accent); }

/* ---- All props in this game: collapsed ------------------------------------------------- */
#studioSurface .slate-allprops { min-width:0; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-card); }
#studioSurface .slate-allprops[open] { border-color:var(--edge); }
#studioSurface .slate-allprops > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.875rem; padding:1rem 1.25rem; cursor:pointer; list-style:none; }
#studioSurface .slate-allprops > summary::-webkit-details-marker { display:none; }
#studioSurface .slate-allprops-title { font:800 1.25rem/1.15 var(--font-display); }
#studioSurface .slate-allprops-count { color:var(--muted); font:700 0.875rem var(--font-mono); }
#studioSurface .slate-allprops-note { color:var(--muted); font-size:0.875rem; }
#studioSurface .slate-allprops > summary .slate-chevron { margin-left:auto; align-self:center; }
#studioSurface .slate-allprops[open] > summary .slate-chevron { rotate:225deg; translate:0 2px; }
#studioSurface .slate-allprops-body { display:grid; grid-template-columns:minmax(0, 1fr); gap:0.875rem; max-height:none; margin:0; padding:0 1.25rem 1.25rem; background:none; border:0; box-shadow:none; border-radius:0; }
#studioSurface .slate-allprops[open] .slate-allprops-body { animation:ar-rise var(--dur-base) var(--ease-out); }
#studioSurface .slate-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem; min-width:0; }
#studioSurface .slate-filters { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.875rem; }
#studioSurface .studio-player-filters { margin:0; padding:0; }
#studioSurface .studio-player-filters .position-segments { display:inline-flex; gap:0.375rem; padding:0; background:none; border:0; box-shadow:none; }
#studioSurface .studio-player-filters .position-segments button { min-width:2.75rem; height:2rem; padding:0 0.75rem; background:var(--surface); color:var(--muted); border:2px solid var(--line);
  border-radius:var(--r-control); box-shadow:none; font:700 0.8125rem var(--font-body); cursor:pointer; }
#studioSurface .studio-player-filters .position-segments button[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
#studioSurface .studio-roster-toggle { display:inline-flex; align-items:center; gap:0.4375rem; margin:0; padding:0 0.75rem; height:2rem; background:var(--surface); border:2px solid var(--line);
  border-radius:var(--r-control); color:var(--muted); font:700 0.8125rem var(--font-body); cursor:pointer; }
#studioSurface .studio-roster-toggle:has(input:checked) { color:var(--ink); border-color:var(--ink); }
#studioSurface .studio-roster-toggle input { width:1rem; height:1rem; margin:0; accent-color:var(--accent); }
#studioSurface .studio-collapse-all { padding:0; background:none; border:0; color:var(--ink); font:800 0.8125rem var(--font-body); text-decoration:underline; cursor:pointer; }
#studioSurface .studio-collapse-all:disabled { color:var(--muted); text-decoration:none; cursor:default; }
#studioSurface .studio-list { max-height:none; overflow:visible; }
/* All props rows: the name column stops at 26rem so the price sits beside the name on wide
   screens (not ~1,000px away); the meta line and the line-strip hints read at 0.75rem. */
@media (min-width: 40.0625em) {
  #studioSurface :is(.studio-market-row, .studio-market-labels) { grid-template-columns:minmax(0, 26rem) 12.75rem; justify-content:start; column-gap:1.5rem; }
}
/* The meta line is muted; the position chip carries the position's colour (UI-442), so the
   whole line no longer takes --position-color (studio-games.css). */
#studioSurface .studio-market-player small { font-size:0.75rem; color:var(--muted); }
#studioSurface .studio-market-labels { font-size:0.6875rem; }
html body[data-layout] #studioSurface .studio-line-caption { grid-template-columns:2.5rem minmax(0, 1fr) 2.5rem; font-size:0.75rem; }
html body[data-layout] #studioSurface .studio-line-reset { font-size:0.75rem; }
#studioSurface .studio-line-default { opacity:1; }

/* Into a game: a 220ms View Transition; the selected tile glides, the page crossfades. */
html.slate-vt::view-transition-group(*) { animation-duration:var(--dur-base); animation-timing-function:var(--ease-out); }
html.slate-vt::view-transition-old(root), html.slate-vt::view-transition-new(root) { animation-duration:var(--dur-base); }

@media (prefers-reduced-motion: reduce) {
  html body[data-layout] #studioSurface :is(.studio-window-links button, .studio-game-button,
    .slate-chevron, .slate-play, .slate-roster-row) { transition:none; }
  #studioSurface :is(.slate-key, .slate-allprops[open] .slate-allprops-body) { animation:none; }
  html body[data-layout] #studioSurface .studio-game-button[aria-pressed=true] { view-transition-name:none; }
  html.slate-vt::view-transition-group(*), html.slate-vt::view-transition-old(*),
  html.slate-vt::view-transition-new(*) { animation:none; }
}

/* ---- Narrower desktops: flexible play columns; the game header stacks its matchup chips --- */
@media (max-width: 90em) {
  #studioSurface .slate-play-main { grid-template-columns:2.25rem minmax(10rem, 1fr) 7rem 10rem auto auto 8.5rem 2.25rem;
    grid-template-areas:"rank who market chart verdict mu price why" ". signals signals signals signals signals signals ." ". headline headline headline headline headline headline ."; }
  #studioSurface .slate-game { grid-template-columns:minmax(0, 1fr) minmax(0, 22rem); grid-template-areas:"title lines" "weather lines" "actions lines" "mu mu"; }
  #studioSurface .slate-game-mu { grid-template-columns:auto minmax(0, 1fr); align-items:center; }
  #studioSurface .slate-game.no-lines { grid-template-columns:minmax(0, 1fr); grid-template-areas:"title" "weather" "actions" "mu"; }
  #studioSurface .slate-game.no-lines.no-mu { grid-template-areas:"title" "weather" "actions"; }
  #studioSurface .slate-game.no-mu:not(.no-lines) { grid-template-columns:minmax(0, 1fr) minmax(0, 22rem); grid-template-areas:"title lines" "weather lines" "actions lines"; }
}
/* My Picks docked beside the page takes ~25rem: the play rows use the two-line layout so the
   price and Why button never run under the panel. */
@media (min-width: 64.0625em) and (max-width: 110em) {
  body.slip-docked #studioSurface .slate-play-main { grid-template-columns:2rem minmax(0, 1fr) auto auto auto 2.25rem;
    grid-template-areas:"rank who chart verdict price why" ". market market market mu mu" ". signals signals signals signals signals" ". headline headline headline headline headline"; gap:0.5rem 0.75rem; }
  body.slip-docked #studioSurface .slate-play-mu { justify-self:end; }
}
/* Tablet: rows wrap to two lines. */
@media (max-width: 64em) {
  #studioSurface .slate-play-main { grid-template-columns:2rem minmax(0, 1fr) auto 2.25rem;
    grid-template-areas:"rank who verdict why" ". market chart chart" ". signals signals signals" ". mu price price" ". headline headline headline"; gap:0.5rem 0.75rem; }
  #studioSurface .slate-play-market { font-size:0.8125rem; }
  #studioSurface .slate-play-price { justify-content:flex-end; }
  html body[data-layout] #studioSurface .slate-play-price .slate-price { width:auto; min-width:8.5rem; }
  #studioSurface .slate-why-body { grid-template-columns:minmax(0, 1fr); padding-left:0.875rem; }
  #studioSurface .slate-teams-grid { grid-template-columns:minmax(0, 1fr); }
  /* One column in reading order; a missing block leaves no empty row behind. */
  #studioSurface .slate-game,#studioSurface .slate-game:is(.no-lines, .no-mu) { display:flex; flex-direction:column; align-items:stretch; gap:0.625rem; }
  #studioSurface .slate-game .slate-weather-line { order:1; }
  #studioSurface .slate-game .studio-game-actions { order:2; }
  #studioSurface .slate-game .studio-game-lines { order:3; }
  #studioSurface .slate-game .slate-game-mu { order:4; }
  #studioSurface .slate-game-mu { grid-template-columns:minmax(0, 1fr); }
  /* Each block stays the card's width: at a large text size (200%) the title, weather and
     links wrap inside it instead of running past its right edge (UI-261). */
  #studioSurface .slate-game > :not(.studio-game-context),#studioSurface .slate-game > .studio-game-context > * { max-width:100%; }
}
/* Large text on a wide screen (UI-261): the play rows take the narrow-screen layout above
   once their section holds under 52em of text (200% text at 1440), instead of a row of
   fixed columns 1900px wide. The section is the container, measured in its own text size;
   at the default size it is under 52em (800px) only where the 64em query already applies, and
   phones (under 25em) keep their own layout. */
@container slate-section (min-width:25em) and (max-width:52em) {
  html body #studioSurface .slate-section .slate-play-main { grid-template-columns:2rem minmax(0, 1fr) auto 2.25rem;
    grid-template-areas:"rank who verdict why" ". market chart chart" ". signals signals signals" ". mu price price" ". headline headline headline"; gap:0.5rem 0.75rem; }
  html body #studioSurface .slate-section .slate-play-price { justify-content:flex-end; }
}
/* Phone (390): one column, no horizontal page scroll; the rail scrolls and snaps. */
@media (max-width: 40em) {
  #studioSurface { gap:1.125rem; }
  #studioSurface .slate-title { font-size:1.5rem; }
  #studioSurface .slate-top { align-items:start; }
  html body[data-layout] #studioSurface .studio-game-button { width:9.75rem; padding:0.625rem 0.75rem; }
  #studioSurface .studio-window h3 { display:none; }
  #studioSurface .slate-game { padding:1rem; border-radius:var(--r-card); box-shadow:none; }
  #studioSurface .slate-matchup { font-size:1.375rem; }
  #studioSurface .slate-team .slate-team-logo { width:1.75rem; height:1.75rem; flex-basis:1.75rem; }
  #studioSurface .studio-game-lines-table.is-selectable { grid-template-columns:3.75rem repeat(2, minmax(0, 1fr)); gap:0.375rem; }
  html body[data-layout] #studioSurface .studio-game-lines .bet-side { padding:0 0.375rem; font-size:0.75rem; }
  /* The name gets the whole first line (a first and last name plus the fantasy owner tag);
     the verdict moves down beside the market, with the chart under them. */
  #studioSurface .slate-play-main { padding:0.75rem; grid-template-columns:minmax(0, 1fr) auto auto;
    grid-template-areas:"who who why" "market market verdict" "chart chart chart" "signals signals signals" "mu price price" "headline headline headline"; }
  #studioSurface .slate-play-verdict { justify-self:end; }
  #studioSurface .slate-rank { display:none; }
  /* Two columns, or one once 4.75rem no longer fits in half (200% text on a 320 phone). */
  #studioSurface .slate-key-nums { grid-template-columns:repeat(auto-fit, minmax(min(100%, max(4.75rem, calc(50% - 0.25rem))), 1fr)); }
  #studioSurface .slate-key-grid { grid-template-columns:minmax(0, 1fr); }
  #studioSurface .slate-roster-row { grid-template-columns:0.625rem 2rem minmax(0, 1fr) 0.75rem; gap:0.125rem 0.625rem; padding:0.5rem 0.75rem; }
  #studioSurface .slate-roster-row > .slate-dot { grid-row:1 / span 2; }
  #studioSurface .slate-roster-avatar { grid-column:2; grid-row:1 / span 2; }
  #studioSurface .slate-roster-name { grid-column:3; grid-row:1; }
  #studioSurface .slate-roster-prop { grid-column:3; grid-row:2; font-size:0.75rem; white-space:normal; }
  #studioSurface .slate-roster-go { grid-column:4; grid-row:1 / span 2; }
  #studioSurface .slate-card-head { padding:0.625rem 0.75rem; }
  #studioSurface .slate-allprops > summary { padding:0.875rem 1rem; }
  #studioSurface .slate-allprops-body { padding:0 0.75rem 0.75rem; }
  #studioSurface .slate-allprops-note { display:none; }
  /* Tap targets at least 2.5rem tall. The action links grow; names keep their line height and
     take the extra height from padding with a matching negative margin, so rows don't move. */
  #studioSurface .studio-window-links button { height:2.5rem; }
  html body[data-layout] #studioSurface :is(.slate-game .studio-game-actions .text-button, .slate-open-link, .studio-collapse-all, .slate-more-players) { display:inline-flex; align-items:center; min-height:2.5rem; }
  #studioSurface .slate-name { display:inline-flex; align-items:center; min-height:2.5rem; margin-block:-0.625rem; }
  html body[data-layout] #studioSurface .studio-line-slider { grid-template-columns:2.5rem minmax(0, 1fr) 2.5rem; }
  #studioSurface .studio-line-step { min-width:2.5rem; }
  /* Large text (200%): signal chips and game prices wrap inside the column instead of widening the page. */
  #studioSurface .slate-play-signals .ar-sig { height:auto; min-height:1.625rem; max-width:100%; flex-wrap:wrap; white-space:normal; }
  html body[data-layout] #studioSurface .studio-game-lines .bet-side { flex-wrap:wrap; height:auto; justify-content:center; column-gap:0.375rem; }
  #studioSurface .studio-game-lines .bet-side > * { min-width:0; }
  #studioSurface .slate-key { grid-template-columns:minmax(0, 1fr); }
  /* The verdict and matchup chips wrap inside the Key players card at 200% text (UI-461). */
  #studioSurface .slate-key :is(.ar-verdict, .ar-mu) { height:auto; max-width:100%; flex-wrap:wrap; white-space:normal; }
  #studioSurface .slate-key .ar-verdict { min-height:1.625rem; }
  #studioSurface .slate-key .ar-mu { min-height:1.375rem; }
  #studioSurface :is(.slate-key-head, .slate-key-foot) { flex-wrap:wrap; }
  /* The count drops under the chart once the chart would be narrower than 12rem (large text). */
  #studioSurface .slate-key-chart { display:flex; flex-wrap:wrap; }
  #studioSurface .slate-key-chart > .ar-chart { flex:1 1 12rem; min-width:0; }
  #studioSurface .slate-key-count { flex:0 0 auto; margin-left:auto; }
  #studioSurface .slate-key-nums > * { min-width:0; }
  #studioSurface .slate-key-nums dt { white-space:normal; }
  #studioSurface .slate-filters { min-width:0; }
  #studioSurface .studio-player-filters .position-segments { flex-wrap:wrap; }
  /* mockup-fidelity.css gives the segments a 11.5625rem min-width (370px at 200% text); let them
     wrap inside the bar instead (UI-74). */
  #studioSurface .studio-player-filters { min-width:0; max-width:100%; }
  #studioSurface .studio-player-filters .position-segments { min-width:0; max-width:100%; }
  /* The week picker is capped by the screen width, so at 200% text the title keeps room for
     whole words ("Week 4 slate", not "Wee k 4"). */
  #studioSurface .slate-top .studio-schedule-controls select { width:min(6.5rem, 38vw); }
  #studioSurface .studio-roster-toggle { height:auto; min-height:2.5rem; max-width:100%; }
}
/* Large text on a phone (UI-427): the play section (container slate-section) measured in its
   own text size holds under 14em only at large text on a phone (9 to 11em at 200%); at the
   default size it is never under 17em. The site's root is 110% of the browser's size, so the
   browser's own 200% setting (32px) gives a 35.2px root, and "No clear edge" in one line made
   the verdict column 239px wide, pushing the row past a 320 to 390 screen. The verdict gets a
   line of its own under the market (beside it, "Receiving" ran into the chip) and its chip
   wraps if it must. The Why button moves beside the market, so the name has the row and drops
   under the photo when it doesn't fit beside it ("Boston" ran under the button), and the
   matchup chip (which wraps inside the card) and the price take a line each (the price box
   covered "CLE").
   All players: beside the dot, the photo and the arrow a name had 34px ("Darnell Washington"
   ran 23px off a 320 screen), so the name and its prop go under the photo at the card's full
   width, and the card's note ("Best prop per player") wraps under the team name. A name on two
   lines keeps its full height (the phone rule's negative margin let "TE" sit on "Washington"). */
/* The verdict stamp (arcade.css ar-stamp) without its scale, for the narrow card below. */
@keyframes slate-stamp-narrow { from { opacity:0; rotate:calc(-4deg * var(--move)); } }
@container slate-section (max-width:14em) {
  html body[data-layout] #studioSurface .slate-play-main { grid-template-areas:"who who who" "market market why" "verdict verdict verdict" "chart chart chart" "signals signals signals" "mu mu mu" "price price price" "headline headline headline"; }
  #studioSurface .slate-play-who { flex-wrap:wrap; }
  html body[data-layout] #studioSurface .slate-play-price { justify-content:flex-start; }
  #studioSurface .slate-play-mu { min-width:0; }
  #studioSurface .slate-play-mu .ar-mu { max-width:100%; height:auto; min-height:1.375rem; padding-block:0.125rem; flex-wrap:wrap; white-space:normal; }
  #studioSurface .slate-play-verdict { justify-self:start; min-width:0; max-width:100%; }
  #studioSurface .slate-play-verdict .ar-verdict { height:auto; min-height:1.625rem; max-width:100%; padding-block:0.125rem; white-space:normal; text-align:center; }
  /* A card-wide chip scaled 1.4x by the stamp ran 3px off a 320 screen;
     here the stamp keeps its fade and tilt but not the scale. */
  #studioSurface .slate-play-verdict .ar-verdict { animation-name:slate-stamp-narrow; }
  html body[data-layout] #studioSurface .slate-play-price .slate-price { min-width:min(8.5rem, 100%); }
  #studioSurface .slate-card-head { flex-wrap:wrap; }
  #studioSurface .slate-card-head h4 { min-width:0; }
  #studioSurface .slate-roster-row > .slate-dot { grid-column:1; grid-row:1; }
  #studioSurface .slate-roster-row > .slate-roster-avatar { grid-column:2; grid-row:1; }
  #studioSurface .slate-roster-row > .slate-roster-name { grid-column:1 / -1; grid-row:2; }
  #studioSurface .slate-roster-name .slate-name { margin-block:0; }
  #studioSurface .slate-roster-row > .slate-roster-prop { grid-column:1 / -1; grid-row:3; }
  #studioSurface .slate-roster-row > .slate-roster-go { grid-column:4; grid-row:1; }
}

/* ---- Pick press and the price-moved note (UI-359) ------------------------------------- */
/* Site-wide, though it lives here: picking a price anywhere (Slate grid, Props and Best in
   this game, the Player page) presses it. studio-motion.js adds .just-picked to the newly
   picked price and takes it off when the press ends; the fill fades to the picked colour on
   the button's own background transition (--dur-fast). Nothing flies to My Picks, and there
   is no wipe or check draw. --move is 0 under reduced motion, and studio-motion.js adds no
   .just-picked there anyway. */
:is(.ar-price, .bet-side).just-picked { animation:ar-press 180ms var(--ease-out); }
@keyframes ar-press { 0% { scale:1; } 40% { scale:calc(1 - 0.06 * var(--move)); } 100% { scale:1; } }
@media (prefers-reduced-motion: reduce) { :is(.ar-price, .bet-side).just-picked { animation:none; } }
/* A game's odds grid has no "In My Picks" box: the picked price is the state. A saved price or
   line that has moved since gets one plain line of small text under the grid. */
.studio-game-pick-notes { display:grid; gap:0.125rem; }
html body[data-layout] .studio-game-pick-note { margin:0; padding:0; background:none; border:0; color:var(--muted); font:500 0.6875rem/1.45 var(--font-body); overflow-wrap:anywhere; }
html body[data-layout] .studio-game-pick-note[data-verdict=better-now] { color:var(--thin); }
/* Large text (UI-305): the game header (#studioGameHeader, container slate-head) measured in its
   own text size holds under 14em only at 200% text on a phone (320 to 390); at the default size
   it is never under 19em. There the home team may wrap under "@", the matchup chips wrap inside
   the card, and the game prices stack: the two teams side by side, each market's name over its
   two prices, so "O 38.5 -105" has half the card instead of a third. */
@container slate-head (max-width:14em) {
  #studioSurface .slate-at-home { flex-wrap:wrap; white-space:normal; }
  /* UI-615: with the webfonts blocked (the fallback is far wider than Big Shoulders) a one-word
     team name ("Steelers", 218px at a 35.2px root) is wider than the card at 320, and the title's
     grid track grew to it, 3-35px past the page. The track holds the card's width and the name
     breaks between syllables, as All props' market names do (UI-427). */
  #studioSurface .slate-matchup :is(.slate-team, .slate-at-home) { min-width:0; max-width:100%; }
  #studioSurface .slate-matchup .slate-team > :last-child { min-width:0; hyphens:auto; overflow-wrap:anywhere; }
  #studioSurface .slate-mu-chips .ar-mu { max-width:100%; height:auto; min-height:1.375rem; padding-block:0.125rem; flex-wrap:wrap; white-space:normal; }
  #studioSurface .studio-game-lines-table.is-selectable { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; grid-auto-flow:row; gap:0.25rem 0.375rem; }
  #studioSurface .studio-game-lines-table.is-selectable thead th:first-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #studioSurface .studio-game-lines-table.is-selectable thead th:not(:first-child) { grid-column:1 / -1; margin-top:0.25rem; font-size:0.6875rem; }
  #studioSurface .studio-game-lines-table.is-selectable thead th:nth-child(2) { grid-row:2; }
  #studioSurface .studio-game-lines-table.is-selectable thead th:nth-child(3) { grid-row:4; }
  #studioSurface .studio-game-lines-table.is-selectable thead th:nth-child(4) { grid-row:6; }
  #studioSurface .studio-game-lines-table.is-selectable tbody tr:nth-child(1) > * { grid-column:1; }
  #studioSurface .studio-game-lines-table.is-selectable tbody tr:nth-child(2) > * { grid-column:2; }
  #studioSurface .studio-game-lines-table.is-selectable tbody tr > :nth-child(1) { grid-row:1; }
  #studioSurface .studio-game-lines-table.is-selectable tbody tr > :nth-child(2) { grid-row:3; }
  #studioSurface .studio-game-lines-table.is-selectable tbody tr > :nth-child(3) { grid-row:5; }
  #studioSurface .studio-game-lines-table.is-selectable tbody tr > :nth-child(4) { grid-row:7; }
}
/* Large text (UI-305): All props measured in its own text size (.studio-markets, an inline-size
   container) holds under 14em only at 200% text on a phone; at the default size it is never
   under 19em. The market name and its count wrap, the column labels stack, the two prices take
   the row's full width with the ‹ › steps under them (above their 210+ / 220+ hints), and the
   hints size to their text with "Default O/U" (or its reset button) on its own line under them,
   since the word "Default" alone is wider than the space left between them. */
@container (max-width:14em) {
  #studioSurface .studio-market-group>summary { flex-wrap:wrap; }
  /* UI-427: at the browser's own 200% setting (a 35.2px root) "Interceptions" is wider than the
     summary on a 320 phone, so a market's one-word name breaks between syllables. */
  #studioSurface .studio-market-group>summary>strong { min-width:0; hyphens:auto; overflow-wrap:anywhere; }
  #studioSurface .studio-market-labels { grid-template-columns:minmax(0, 1fr); }
  #studioSurface .studio-market-labels>* { text-align:left; }
  #studioSurface .studio-line-slider>.studio-market-prices { grid-column:1 / -1; grid-row:1; }
  #studioSurface .studio-line-slider>.studio-line-step:first-child { grid-column:1; grid-row:2; }
  #studioSurface .studio-line-slider>.studio-line-step:last-child { grid-column:3; grid-row:2; }
  html body[data-layout] #studioSurface .studio-line-caption { grid-template-columns:auto minmax(0, 1fr) auto; }
  #studioSurface .studio-line-caption>:nth-child(2) { grid-column:1 / -1; grid-row:2; }
  #studioSurface .studio-line-caption>:last-child { grid-column:3; grid-row:1; }
}

/* ---- Game header weather picture (UI-366) -----------------------------------------------
   The header shows compactWeather's badge (icon, temperature, condition, wind) instead of a
   sentence; its forecast facts open in a popover (arcade.css), so nothing below moves. */
#studioSurface .slate-weather-line { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.625rem; justify-self:start; width:auto; max-width:100%; color:var(--ink); font:500 0.875rem/1.3 var(--font-body); }
#studioSurface .slate-weather-line .studio-weather-icon { width:2rem; height:2rem; }
#studioSurface .slate-weather-line .studio-weather-copy { display:grid; gap:0.0625rem; min-width:0; }
#studioSurface .slate-weather-line .studio-weather-copy>strong { color:var(--ink); font:700 1.125rem/1.15 var(--font-body); }
#studioSurface .slate-weather-line .studio-weather-copy>small { color:var(--muted); font-size:0.75rem; line-height:1.3; }
#studioSurface .slate-weather-line .studio-weather-copy>.studio-weather-stale { color:var(--thin); }
#studioSurface .slate-weather-line .studio-weather-wind { padding-left:0.625rem; border-left:1px solid var(--line); color:var(--ink); font-size:0.8125rem; font-weight:600; line-height:1.4; white-space:nowrap; }
/* Wind or rain that can cut passing: condition and wind read in the caution color (the
   popover says which). */
#studioSurface .slate-weather-line.is-effect :is(.studio-weather-copy>small, .studio-weather-wind) { color:var(--thin); }
@container slate-head (max-width:20em) { #studioSurface .slate-weather-line .studio-weather-wind { white-space:normal; } }

/* ---- NBA live game page -----------------------------------------------------------------
   From tip-off the game header is the score: the teams' blocks and points either side of the
   state, the feed's clock and "Updated N s ago"; your picks under it (green while winning, red
   while not, never a settled mark); then the tabs. Box score and Plays sit side by side on a
   laptop and behind tabs on a phone; Pregame holds the research. A slim score bar pins under the
   site header once the big score scrolls away. Greyed numbers: the feed's last request failed. */
#studioSurface :is(.slate-live, .slate-live-pin)[hidden] { display:none !important; }
/* A live tile's line: the score and the feed's clock in place of the plays' count. */
#studioSurface .slate-tile-count.is-live { color:var(--ink); white-space:nowrap; }
#studioSurface .slate-tile-count.is-live b { font:800 0.8125rem var(--font-mono); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-head { display:grid; gap:0.875rem; min-width:0; margin:0; padding:1.125rem 1.5rem 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
#studioSurface .slate-live-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.5rem; margin:0; font:800 1.125rem/1.1 var(--font-display); letter-spacing:0.02em; }
#studioSurface .slate-live-title :is(a, .team-name-link) { color:var(--ink); font:inherit; text-decoration:none; }
#studioSurface .slate-live-title a:hover { color:var(--accent); }
#studioSurface .slate-live-title small { margin-left:0.375rem; color:var(--muted); font:600 0.8125rem var(--font-body); letter-spacing:0; text-transform:none; }
#studioSurface .slate-live-board { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:0.25rem 0.75rem; min-width:0; }
#studioSurface .slate-live-team { display:flex; align-items:center; gap:0.75rem; min-width:0; }
#studioSurface .slate-live-team.is-home { flex-direction:row-reverse; }
#studioSurface .slate-live-nick { min-width:0; overflow:hidden; color:var(--muted); font:700 0.875rem var(--font-body); text-overflow:ellipsis; white-space:nowrap; }
#studioSurface .slate-live-pts { margin-left:auto; font:900 3rem/1 var(--font-display); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-team.is-home .slate-live-pts { margin-left:0; margin-right:auto; }
/* Each record on the board's second row, under its team's box (the outer edge); the state and clock span both rows. */
#studioSurface .slate-live-board > .slate-live-mid { grid-row:1 / span 2; }
#studioSurface .slate-live-record { grid-row:2; grid-column:1; min-width:0; overflow:hidden; color:var(--muted); font:700 0.75rem/1.2 var(--font-mono); font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
#studioSurface .slate-live-record.is-home { grid-column:3; text-align:right; }
#studioSurface .slate-live-team.is-trailing .slate-live-pts { color:var(--muted); }
#studioSurface .slate-live-mid { display:grid; justify-items:center; gap:0.25rem; min-width:5.5rem; text-align:center; }
#studioSurface .slate-live-state { display:inline-flex; align-items:center; gap:0.3125rem; font:800 0.6875rem/1.2 var(--font-body); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
#studioSurface .slate-live-state.is-live { color:var(--bad); }
#studioSurface .slate-live-state.is-live::before { content:""; width:0.4375rem; height:0.4375rem; border-radius:50%; background:currentColor; }
@media (prefers-reduced-motion:no-preference) { #studioSurface .slate-live-state.is-live::before { animation:slate-live 1.6s var(--ease-in-out) infinite; } }
#studioSurface .slate-live-clock { font:800 1.25rem/1 var(--font-display); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-ago { color:var(--muted); font:600 0.6875rem var(--font-body); white-space:nowrap; }
#studioSurface .slate-live-ago-short { display:none; }
/* The refresh switch: its own line across the board, centred under the clock and "Updated N s ago", on a phone too. */
#studioSurface .slate-live-pace { grid-row:3; grid-column:1 / -1; justify-self:center; display:flex; align-items:center; gap:0.25rem; color:var(--muted); font:700 0.6875rem var(--font-body); white-space:nowrap; }
html body[data-layout] #studioSurface .slate-live-pace button { min-width:2.5rem; min-height:1.75rem; padding:0 0.5rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none;
  color:var(--muted); font:700 0.75rem var(--font-mono); cursor:pointer; }
html body[data-layout] #studioSurface .slate-live-pace button:hover { color:var(--ink); border-color:var(--muted); }
html body[data-layout] #studioSurface .slate-live-pace button[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
#studioSurface .slate-live-head.is-stale :is(.slate-live-board > .slate-live-team, .slate-live-clock, .slate-live-pick-list) { opacity:0.5; filter:saturate(0.5); }
#studioSurface .slate-live-head.is-stale .slate-live-ago { color:var(--thin); }
/* Your picks: one card each, sideways past three or four. */
#studioSurface .slate-live-picks { display:grid; gap:0.5rem; min-width:0; }
#studioSurface .slate-live-picks-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.25rem 0.75rem; }
#studioSurface .slate-live-picks-title { font:800 0.75rem var(--font-body); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
#studioSurface .slate-live-picks-head small { color:var(--muted); font-size:0.75rem; }
#studioSurface .slate-live-pick-list { display:flex; gap:0.5rem; margin:0; padding:0 0 0.375rem; list-style:none; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
#studioSurface .slate-live-pick { flex:0 0 10.75rem; display:grid; gap:0.25rem; align-content:start; padding:0.625rem 0.75rem; background:var(--surface-subtle); border:1px solid var(--line); border-radius:var(--r-control); }
#studioSurface .slate-live-pick-who { overflow:hidden; font:700 0.8125rem/1.2 var(--font-body); text-overflow:ellipsis; white-space:nowrap; }
#studioSurface .slate-live-pick-what { color:var(--muted); font-size:0.75rem; line-height:1.3; }
#studioSurface .slate-live-pick-value b { font:800 1.25rem/1 var(--font-display); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-pick-value small { color:var(--muted); font:700 0.8125rem var(--font-mono); }
#studioSurface .slate-live-pick-bar { display:block; height:0.3125rem; overflow:hidden; border-radius:var(--r-data); background:var(--surface-raised); }
#studioSurface .slate-live-pick-bar > i { display:block; width:0; height:100%; background:var(--muted); }
#studioSurface .slate-live-pick-state { font:700 0.75rem/1.25 var(--font-body); color:var(--muted); }
#studioSurface .slate-live-pick-pace { color:var(--muted); font-weight:600; }
#studioSurface .slate-live-pick.is-good { border-color:color-mix(in srgb, var(--good) 45%, var(--line)); }
#studioSurface .slate-live-pick.is-good :is(.slate-live-pick-value b, .slate-live-pick-state) { color:var(--good); }
#studioSurface .slate-live-pick.is-good .slate-live-pick-bar > i { background:var(--good); }
#studioSurface .slate-live-pick.is-bad { border-color:color-mix(in srgb, var(--bad) 45%, var(--line)); }
#studioSurface .slate-live-pick.is-bad :is(.slate-live-pick-value b, .slate-live-pick-state) { color:var(--bad); }
#studioSurface .slate-live-pick.is-bad .slate-live-pick-bar > i { background:var(--bad); }
/* The tabs close the header card. */
#studioSurface .slate-live-tabs { display:flex; gap:0.25rem; margin:0 -0.5rem; overflow-x:auto; scrollbar-width:none; }
html body[data-layout] #studioSurface .slate-live-tab { flex:0 0 auto; min-height:2.75rem; padding:0 1rem; background:none; border:0; border-bottom:3px solid transparent; border-radius:0; box-shadow:none;
  color:var(--muted); font:700 0.875rem var(--font-body); cursor:pointer; }
html body[data-layout] #studioSurface .slate-live-tab:hover { color:var(--ink); }
html body[data-layout] #studioSurface .slate-live-tab[aria-selected=true] { color:var(--ink); border-bottom-color:var(--accent); }
/* Box score and plays. */
#studioSurface .slate-live { min-width:0; }
#studioSurface .slate-live-grid { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:1rem; align-items:start; }
#studioSurface :is(.slate-live-box, .slate-live-plays) { min-width:0; margin:0; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); }
#studioSurface .slate-live-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 0.75rem; margin-bottom:0.75rem; }
#studioSurface .slate-live-seg { display:flex; gap:0.25rem; }
html body[data-layout] #studioSurface :is(.slate-live-seg button, .slate-live-full) { min-height:2.25rem; padding:0 0.75rem; background:var(--surface); border:2px solid var(--line); border-radius:var(--r-control); box-shadow:none;
  color:var(--muted); font:700 0.8125rem var(--font-body); cursor:pointer; }
html body[data-layout] #studioSurface :is(.slate-live-seg button, .slate-live-full):hover:not(:disabled) { color:var(--ink); border-color:var(--muted); }
html body[data-layout] #studioSurface :is(.slate-live-seg button, .slate-live-full)[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
#studioSurface .slate-live-scoring { color:var(--muted); font-size:0.75rem; }
#studioSurface .slate-live-table-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
#studioSurface .slate-live-table { width:100%; border-collapse:collapse; border-spacing:0; font:500 0.8125rem var(--font-body); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-table.is-full { min-width:46rem; }
#studioSurface .slate-live-table.is-full.has-fantasy { min-width:52rem; }
#studioSurface .slate-live-table :is(th, td) { padding:0.4375rem 0.5rem; border:0; border-bottom:1px solid var(--line); background:var(--surface); text-align:right; white-space:nowrap; vertical-align:middle; }
#studioSurface .slate-live-table :is(thead th, tbody th, tfoot th):first-child { position:sticky; left:0; z-index:1; text-align:left; }
#studioSurface .slate-live-table thead th { color:var(--muted); font:700 0.6875rem var(--font-body); letter-spacing:0.05em; text-transform:uppercase; }
#studioSurface .slate-live-table thead abbr { text-decoration:none; }
#studioSurface .slate-live-table tbody th { font-weight:600; }
#studioSurface .slate-live-player { display:inline-flex; align-items:center; gap:0.375rem; }
#studioSurface .slate-live-player small { color:var(--muted); font-size:0.6875rem; }
#studioSurface .slate-live-name { color:var(--ink); font:700 0.8125rem var(--font-body); }
#studioSurface .slate-live-court { display:inline-block; flex:none; width:0.4375rem; height:0.4375rem; border-radius:50%; }
#studioSurface .slate-live-court.is-on { background:var(--good); }
/* FPTS and PROJ beside the name: FPTS in full ink, PROJ muted, a rule before the stats. */
#studioSurface .slate-live-table td.slate-live-fpts { color:var(--ink); font-weight:800; }
#studioSurface .slate-live-table td.slate-live-proj { color:var(--muted); font-weight:600; }
#studioSurface .slate-live-table .is-edge { box-shadow:inset -1px 0 0 var(--line); padding-right:0.625rem; }
#studioSurface .slate-live-tier th { padding-top:0.3125rem; padding-bottom:0.3125rem; background:var(--surface-subtle); color:var(--muted); font:800 0.6875rem var(--font-display); letter-spacing:0.1em; text-transform:uppercase; }
#studioSurface .slate-live-table tfoot :is(th, td) { border-top:2px solid var(--line); border-bottom:0; font-weight:800; }
#studioSurface :is(.slate-live-dnp, .slate-live-note) { margin:0.625rem 0 0; color:var(--muted); font-size:0.75rem; line-height:1.4; }
#studioSurface .slate-live-note .slate-live-court { margin-right:0.25rem; vertical-align:0.0625rem; }
/* The plays scroll on their own; at their top or bottom the page scrolls on (no overscroll containment). */
#studioSurface .slate-live-playlist { max-height:min(70vh, 42rem); margin:0; padding:0; list-style:none; overflow-y:auto; scrollbar-width:thin; border-top:1px solid var(--line); }
#studioSurface .slate-live-period { position:sticky; top:0; z-index:1; padding:0.375rem 0.5rem; background:var(--surface-subtle); color:var(--muted); font:800 0.75rem var(--font-display); letter-spacing:0.1em; text-transform:uppercase; }
#studioSurface .slate-live-play { display:grid; grid-template-columns:2.75rem auto minmax(0, 1fr) auto; gap:0.5rem; align-items:center; padding:0.5rem; border-bottom:1px solid var(--line); font-size:0.8125rem; line-height:1.35; }
#studioSurface .slate-live-play-clock { color:var(--muted); font:700 0.75rem var(--font-mono); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-play-text { min-width:0; overflow-wrap:anywhere; }
#studioSurface .slate-live-play.is-scoring .slate-live-play-text { font-weight:600; }
#studioSurface .slate-live-play.is-timeout .slate-live-play-text { color:var(--thin); }
#studioSurface .slate-live-sub { font-weight:700; }
#studioSurface .slate-live-sub.is-in { color:var(--good); }
#studioSurface .slate-live-sub.is-out { color:var(--bad); }
#studioSurface .slate-live-play-score { margin-left:0.25rem; font:800 0.8125rem var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
#studioSurface .slate-live-play-also { display:block; color:var(--muted); font-size:0.75rem; font-weight:500; }
#studioSurface .slate-live-also-fp { font:800 0.75rem var(--font-mono); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-also-fp.is-up { color:var(--good); }
#studioSurface .slate-live-also-fp.is-down { color:var(--bad); }
#studioSurface .slate-live-play.is-mine { background:color-mix(in srgb, var(--good) 7%, transparent); box-shadow:inset 3px 0 0 var(--good); }
#studioSurface .slate-live-fp { display:grid; justify-items:end; min-width:2.75rem; line-height:1.15; }
#studioSurface .slate-live-fp b { font:800 0.875rem var(--font-mono); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-fp.is-up b { color:var(--good); }
#studioSurface .slate-live-fp.is-down b { color:var(--bad); }
#studioSurface .slate-live-fp small { color:var(--muted); font:700 0.75rem var(--font-mono); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-empty { padding:1rem 0.5rem; color:var(--muted); font-size:0.875rem; }
/* On the court: the two fives side by side, away left, over the plays. */
#studioSurface #slateLiveFloor:empty { display:none; }
#studioSurface .slate-live-floor { margin:0 0 0.75rem; padding:0.625rem 0.75rem 0.75rem; background:var(--surface-subtle); border:1px solid var(--line); border-radius:var(--r-control); }
#studioSurface .slate-live-floor.is-stale { opacity:0.5; filter:saturate(0.5); }
#studioSurface .slate-live-floor-title { display:flex; align-items:center; gap:0.375rem; margin:0 0 0.5rem; color:var(--muted); font:800 0.6875rem/1.2 var(--font-body); letter-spacing:0.08em; text-transform:uppercase; }
#studioSurface .slate-live-floor-halves { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
#studioSurface .slate-live-floor-team { min-width:0; padding-right:0.75rem; }
#studioSurface .slate-live-floor-team.is-home { padding:0 0 0 0.75rem; border-left:1px solid var(--line); }
#studioSurface .slate-live-floor-head { display:flex; align-items:center; gap:0.375rem; min-width:0; margin-bottom:0.5rem; color:var(--muted); font:700 0.75rem var(--font-body); white-space:nowrap; }
#studioSurface .slate-live-floor-list { display:grid; gap:0.375rem; margin:0; padding:0; list-style:none; }
#studioSurface .slate-live-floor-player { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:0.5rem; min-width:0; }
#studioSurface .slate-live-floor-player .slate-avatar { width:2rem; height:2rem; flex-basis:2rem; border-width:1px; }
#studioSurface .slate-live-floor-player :is(.slate-live-name, .owner-name) { min-width:0; max-width:100%; justify-self:start; }
#studioSurface .slate-live-floor-player .slate-live-name { overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
#studioSurface .slate-live-floor-player .pos-chip { min-width:1.375rem; }
#studioSurface .slate-live-floor-none { color:var(--muted); }
#studioSurface .slate-live-floor-top { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.25rem 0.75rem; margin-bottom:0.5rem; }
#studioSurface .slate-live-floor-top > .slate-live-floor-title { margin:0; }
/* Fantasy sides (a linked league): your players blue, this week's opponent's violet (--lilac, the opponent's colour
   on Fantasy's scoreboard and the lightest violet, so it stays apart from the blue with less colour vision); a tint and
   a 4px edge on the row, everyone else plain. A play row with a pick of yours keeps the pick's green as a second edge.
   Every row of a list or table with sides gets the room for an edge, so names and clocks stay in line.
   The edge's shape tells the sides apart without the colour (UI-970: blue and violet blur together with protan or
   deutan vision): yours a solid bar, the opponent's a dashed one (--fantasy-edge, drawn as a background so the gaps
   show the row's tint), and the legend's keys are small rows with the same two edges. */
#studioSurface [data-fantasy-side=mine] { --fantasy-side:var(--accent); --fantasy-edge:linear-gradient(var(--fantasy-side), var(--fantasy-side)); }
#studioSurface [data-fantasy-side=theirs] { --fantasy-side:var(--lilac); --fantasy-edge:repeating-linear-gradient(var(--fantasy-side) 0 5px, transparent 0 8px); }
#studioSurface .slate-live-table tr[data-fantasy-side] > :is(th, td) { background-color:color-mix(in srgb, var(--fantasy-side) 22%, var(--surface)); }
#studioSurface .slate-live-play[data-fantasy-side] { background-color:color-mix(in srgb, var(--fantasy-side) 20%, transparent); box-shadow:none; }
#studioSurface .slate-live-floor-player[data-fantasy-side] { background-color:color-mix(in srgb, var(--fantasy-side) 24%, var(--surface-subtle)); }
#studioSurface :is(.slate-live-table tr[data-fantasy-side] > th, .slate-live-play[data-fantasy-side], .slate-live-floor-player[data-fantasy-side]), #studioSurface .slate-live-key::before {
  background-image:var(--fantasy-edge); background-position:0 0; background-size:4px 100%; background-repeat:no-repeat; }
#studioSurface .slate-live-play.is-mine[data-fantasy-side] { background-image:var(--fantasy-edge), linear-gradient(var(--good), var(--good)); background-position:0 0, 4px 0; background-size:4px 100%, 3px 100%; }
#studioSurface .slate-live-playlist:has([data-fantasy-side]) .slate-live-play { padding-left:0.6875rem; }
#studioSurface .slate-live-also-credit[data-fantasy-side] { padding:0 0.25rem 0 0.4375rem; color:var(--ink); font-weight:700; background-color:color-mix(in srgb, var(--fantasy-side) 32%, transparent);
  background-image:var(--fantasy-edge); background-position:0 0; background-size:3px 100%; background-repeat:no-repeat; border-radius:var(--r-data); }
#studioSurface .slate-live-floor-player { margin:0 -0.375rem; padding:0.125rem 0.375rem 0.125rem 0.5rem; border-radius:var(--r-data); }
#studioSurface .slate-live-legend { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.375rem; margin:0.625rem 0 0; color:var(--muted); font:600 0.75rem/1.3 var(--font-body); }
#studioSurface .slate-live-floor-top > .slate-live-legend, #slateLiveFloor > .slate-live-legend { margin:0; }
#slateLiveFloor > .slate-live-legend { margin-bottom:0.75rem; }
#studioSurface .slate-live-key { display:inline-flex; align-items:center; gap:0.3125rem; white-space:nowrap; }
/* A key: a row in little, 13px high for two of the dashes and the gap between (px: the dashes stay whole pixels). */
#studioSurface .slate-live-key::before { content:""; flex:none; width:14px; height:13px; border-radius:var(--r-data); background-color:color-mix(in srgb, var(--fantasy-side) 30%, var(--surface)); }
/* The slim bar under the site header (placed by layouts.js placeLivePin). */
#studioSurface .slate-live-pin { position:fixed; left:0; right:0; top:var(--live-pin-top, 0); z-index:15; display:flex; justify-content:center; pointer-events:none; }
#studioSurface .slate-live-pin-bar { display:flex; align-items:center; gap:0.625rem; padding:0.375rem 0.875rem; background:var(--surface); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-card) var(--r-card); box-shadow:0 0.375rem 1.125rem rgb(0 0 0 / 0.4); }
#studioSurface .slate-live-pin-score { font:900 1.125rem var(--font-display); font-variant-numeric:tabular-nums; }
#studioSurface .slate-live-pin-clock { color:var(--muted); font:800 0.8125rem var(--font-mono); }
#studioSurface .slate-live-pin-clock.is-live { color:var(--bad); }
#studioSurface .slate-live-pin-bar.is-stale { opacity:0.7; }
@media (max-width: 64em) {
  #studioSurface .slate-live-grid { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 40em) {
  #studioSurface .slate-live-head { padding:0.875rem 1rem 0; gap:0.75rem; }
  #studioSurface .slate-live-board { gap:0.1875rem 0.5rem; }
  #studioSurface .slate-live-nick { display:none; }
  #studioSurface .slate-live-team { gap:0.375rem; }
  #studioSurface .slate-live-record { font-size:0.6875rem; }
  #studioSurface .slate-live-floor { padding:0.5rem 0.5rem 0.625rem; }
  #studioSurface .slate-live-floor-team { padding-right:0.5rem; }
  #studioSurface .slate-live-floor-team.is-home { padding-left:0.5rem; }
  #studioSurface .slate-live-floor-player { gap:0.3125rem; }
  #studioSurface .slate-live-floor-player .slate-avatar { width:1.5rem; height:1.5rem; flex-basis:1.5rem; }
  #studioSurface .slate-live-floor-player .slate-live-name { font-size:0.75rem; }
  #studioSurface .slate-live-floor-player .pos-chip { min-width:1.125rem; padding:0.0625rem 0.25rem; font-size:0.625rem; }
  #studioSurface .slate-live-team .team-boxes.is-lg { height:2.125rem; }
  #studioSurface .slate-live-team .team-boxes.is-lg .team-box { font-size:1.0625rem; }
  /* Each score stays in its column: the middle is as narrow as the clock (the short "12 s ago" sits under it),
     and a score shrinks below 2rem only when its column can't hold the team box and three digits. */
  #studioSurface .slate-live-team { container-type:inline-size; }
  #studioSurface .slate-live-pts { font-size:min(2rem, (100cqi - 4.125rem) * 0.6); }
  #studioSurface .slate-live-mid { width:min-content; min-width:3.25rem; }
  #studioSurface .slate-live-clock { font-size:1.0625rem; white-space:nowrap; }
  #studioSurface .slate-live-ago { white-space:normal; }
  #studioSurface .slate-live-ago-full { display:none; }
  #studioSurface .slate-live-ago-short { display:inline; }
  #studioSurface .slate-live-head:not(.is-stale) .slate-live-ago-short { white-space:nowrap; }
  #studioSurface .slate-live-player small { display:none; }
  #studioSurface .slate-live-pick { flex-basis:9.75rem; }
  #studioSurface .slate-live-tabs { margin:0 -0.25rem; }
  html body[data-layout] #studioSurface .slate-live-tab { flex:1 0 auto; padding:0 0.625rem; }
  #studioSurface :is(.slate-live-box, .slate-live-plays) { padding:0.75rem; }
  #studioSurface .slate-live-play { grid-template-columns:2.375rem auto minmax(0, 1fr) auto; gap:0.375rem; padding:0.5rem 0.25rem; font-size:0.75rem; }
  #studioSurface .slate-live-table :is(th, td) { padding:0.375rem 0.25rem; }
  #studioSurface .slate-live-table :is(th, td):first-child { padding-left:0; }
  #studioSurface .slate-live-table:has(tr[data-fantasy-side]) :is(th, td):first-child { padding-left:0.4375rem; }
}