/* Research β: one defense at a time; previous matchups then the next, as an aligned table. */
body[data-active-view=lab] .page-heading { display:none; }
.research-lab { display:grid; gap:0.625rem; }

/* Toolbar: the title on the left, filters on the right, one line on wide screens. */
.lab-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem 1.5rem; }
.lab-heading { min-width:0; }
.lab-heading h2 { margin:0; font-size:1.125rem; letter-spacing:-0.01em; }
.lab-heading p { margin:0.125rem 0 0; color:var(--muted); font-size:0.75rem; }

/* Controls. */
.lab-controls { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.lab-select { display:flex; align-items:center; gap:0.375rem; color:var(--muted); font-size:0.75rem; font-weight:650; }
.lab-select select { min-height:2rem; }
.lab-control { display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden; background:var(--surface); }
.lab-control button { min-height:2rem; padding:0.25rem 0.625rem; border:0; border-right:1px solid var(--line); background:none; color:var(--muted); font-size:0.75rem; font-weight:650; }
.lab-control button:last-child { border-right:0; }
.lab-control button:hover { color:var(--ink); background:var(--surface-raised); }
.lab-control button[aria-pressed=true] { color:var(--accent-ink); background:var(--accent); }

/* Teams slider: kickoff slots of game cards (away D over home D), sized and dragged like Games. */
.lab-slider { position:sticky; top:calc(var(--header-height) + env(safe-area-inset-top, 0px)); z-index:4; display:flex; gap:1.375rem; margin:0 -0.25rem; padding:0.375rem 0.25rem 0.5625rem; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#4c3d64 var(--surface-subtle); background:var(--bg); user-select:none; -webkit-user-select:none; }
@media (hover:hover) and (pointer:fine) { .lab-slider, .lab-slider .lab-team-chip { cursor:grab; } }
.lab-slider img { -webkit-user-drag:none; }
.lab-slider.is-dragging, .lab-slider.is-dragging * { cursor:grabbing; }
.lab-slot { flex:0 0 auto; }
.lab-slot>small { display:block; margin:0 0 0.5rem; color:var(--muted); font-size:0.6875rem; font-weight:650; letter-spacing:0.45px; }
.lab-slot>div { display:flex; gap:0.5rem; }
/* A game card like Games: away D | home D, split down the middle, each half its own button. */
.lab-game-pair { display:grid; grid-template-columns:1fr 1fr; width:13rem; min-height:5.25rem; border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden; background:var(--surface-subtle); }
.lab-team-chip { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0.4375rem; min-width:0; padding:0.625rem 0.625rem; border:0; background:none; color:var(--ink); text-align:left; }
.lab-team-chip+.lab-team-chip { border-left:1px solid var(--line); }
.lab-team-chip:hover { background:var(--surface-raised); }
.lab-team-chip[aria-pressed=true] { background:#312641; box-shadow:inset 0 -0.1875rem var(--cyan); }
.lab-chip-team { display:flex; align-items:center; gap:0.4375rem; }
.lab-team-chip b { font-size:0.8125rem; font-weight:700; white-space:nowrap; }
.lab-chip-count { padding:0.0625rem 0.375rem; border-radius:var(--r-data); background:#173d2d; color:var(--green); font-size:0.625rem; font-weight:750; white-space:nowrap; }
.lab-chip-count.is-zero { background:var(--surface-raised); color:var(--muted); }
:is(.lab-mini-badge, .lab-chip-badge) img { width:100%; height:100%; object-fit:contain; }

/* The board. */
.lab-board { justify-self:start; width:fit-content; max-width:100%; min-width:min(100%, 48rem); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.lab-board-heading { display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem 1rem; padding:0.5rem 0.875rem; border-bottom:1px solid var(--line); background:var(--surface-raised); }
.lab-board-heading h3 { margin:0; font-size:1.0625rem; }
.lab-board-heading>.team-badge { width:2rem; height:2rem; min-width:2rem; }
.lab-board-heading p { margin:0.0625rem 0 0; color:var(--muted); font-size:0.75rem; }
.lab-board-heading>div:not(.lab-board-actions) { flex:1 1 12rem; min-width:0; }
.lab-board-actions { display:flex; flex-wrap:wrap; gap:0.5rem; margin-left:auto; }
/* Both defenses of a game, side by side; they wrap when two don't fit. */
.lab-boards { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0.75rem; }
.lab-boards .lab-board { flex:1 1 auto; min-width:0; }
.lab-empty { margin:0; padding:1.25rem 1.125rem; color:var(--muted); font-size:0.8125rem; }

.lab-table-scroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
.lab-table { width:auto; min-width:100%; border-collapse:separate; border-spacing:0; font-size:0.75rem; }
.lab-table th, .lab-table td { padding:0.5rem 0.625rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:top; background:var(--surface); }
.lab-table thead th { padding:0; background:var(--surface-raised); }
.lab-table thead .lab-row-label, .lab-table thead .lab-next-head { z-index:3; }
.lab-table thead .lab-row-label { padding:0.5rem 0.625rem; color:var(--muted); font-size:0.625rem; letter-spacing:0.08em; vertical-align:bottom; }
.lab-week-link { display:grid; gap:0.125rem; width:100%; padding:0.375rem 0.625rem; border:0; background:none; color:var(--ink); text-align:left; }
.lab-week-link:hover { background:var(--accent-soft); }
.lab-week-link small { color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.08em; }
.lab-week-link span { display:flex; align-items:center; gap:0.375rem; font-weight:700; white-space:nowrap; }
.lab-next-head .lab-week-link small { color:var(--accent); }

/* Sticky row labels (left) and next matchup (right), so any number of weeks fits. */
.lab-row-label { position:sticky; left:0; z-index:2; width:9rem; min-width:9rem; }
.lab-next-head, .lab-next-cell { position:sticky; right:0; z-index:2; width:clamp(17rem, 40vw, 40rem); min-width:17rem; border-left:2px solid var(--accent-soft); border-right:0 !important; }
.lab-next-cell { background:#1e1728 !important; }
.lab-next-head { background:#251c31 !important; }
.lab-row-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 0.375rem; margin-bottom:0.25rem; }
.lab-row-position { color:var(--position-color); font-size:0.875rem; font-weight:850; }
.lab-row-prop { color:var(--ink); font-weight:650; }
.lab-strength { display:inline-block; padding:0.125rem 0.375rem; border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font-size:0.625rem; font-weight:700; white-space:nowrap; }
.lab-strength.is-repeated { background:#173d2d; color:var(--green); }

/* A previous week: everyone lined in this prop against the defense; picked players lead. */
.lab-week-cell { min-width:12.5rem; width:12.5rem; }
.lab-week-cell.is-empty { color:var(--muted); text-align:center; vertical-align:middle; }
.lab-week-cell ul { display:grid; gap:0.25rem; margin:0; padding:0; list-style:none; }
.lab-result { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:0.375rem; padding:0.1875rem 0.375rem; border-radius:var(--r-data); color:var(--muted); }
.lab-result .profile-name-button { min-width:0; overflow-wrap:normal; word-break:normal; hyphens:none; line-height:1.2; color:inherit; font-size:0.6875rem; text-align:left; }
.lab-result.is-picked { background:color-mix(in srgb, var(--position-color) 14%, transparent); box-shadow:inset 0 0 0 1px var(--position-color); color:var(--ink); }
.lab-result.is-picked .profile-name-button { font-weight:750; color:var(--ink); }
.lab-result-stat { white-space:nowrap; font-size:0.6875rem; }
.lab-result .mu-face { --face:1.5rem; }
html body[data-layout] .lab-result .mu-face .player-avatar { border-width:1px; font-size:0.5rem; }
.lab-result-stat strong { color:var(--ink); }
.lab-result-mark { width:0.875rem; text-align:center; font-weight:800; }
.lab-evidence { display:grid; gap:0.125rem; min-width:0; margin-top:0.25rem; color:var(--muted); font-size:0.625rem; line-height:1.35; white-space:normal; overflow-wrap:anywhere; }
.lab-result>.lab-evidence { grid-column:1 / -1; }
.lab-evidence b, .lab-evidence-selection { color:var(--ink); font-weight:650; }
.lab-evidence time, .lab-evidence small { display:block; font-size:0.5625rem; }
.lab-line .studio-focus-option>.lab-evidence { max-width:10rem; padding:0 0.25rem; text-align:center; }
#lab .lab-line .studio-focus-option.is-alternate { flex-basis:min(8.5rem,100%); }
.lab-result.is-over .lab-result-mark, .lab-result.is-over .lab-result-stat strong { color:var(--green); }
.lab-result.is-under .lab-result-mark { color:#ff9fb2; }
.lab-result.is-push .lab-result-mark { color:var(--thin); }
/* Produced with no saved line (UI-188): below the lined rows, dimmed, no over/under mark. */
.lab-week-cell ul.lab-unlined { margin-top:0.25rem; padding-top:0.25rem; border-top:1px dashed var(--line); }
.lab-week-cell ul.lab-unlined:first-child { margin-top:0; padding-top:0; border-top:0; }
.lab-result.is-unlined { opacity:0.72; }
.lab-result.is-unlined .lab-result-stat strong { color:var(--muted); font-weight:650; }
.lab-result-tag { padding:0.0625rem 0.25rem; border-radius:var(--r-data); background:var(--surface-raised); color:var(--muted); font-size:0.5625rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; }

/* The next matchup: the same role on the next offense, with the price. */
/* Player beside the price when the column has room; stacked when it doesn't. */
.lab-next { container-type:inline-size; }
.lab-next-player { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.375rem; }
@container (min-width:23rem) {
  .lab-next-body { display:grid; grid-template-columns:minmax(0, 9rem) minmax(0, 1fr); align-items:center; gap:0.625rem; }
  .lab-next-body .lab-next-player { margin-bottom:0; }
}
.lab-next-player>div { display:grid; gap:0.0625rem; min-width:0; }
.lab-avatar { flex:0 0 auto; padding:0; border:0; background:none; }
.lab-avatar .player-avatar { position:relative; display:block; width:2.25rem; height:2.625rem; overflow:hidden; border-radius:var(--r-control); background:var(--position-color); }
.lab-avatar .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lab-avatar .avatar-initials { display:grid; place-items:center; height:100%; color:#1a1423; font-size:0.75rem; font-weight:800; }
.lab-name { justify-self:start; font-size:0.875rem; font-weight:750; text-align:left; }
.lab-next-player small { color:var(--position-color); font-size:0.6875rem; font-weight:650; }
.lab-line .bet-unavailable { display:block; margin-top:0.25rem; }
.lab-next-player .lab-status { color:#f5c451; }
.lab-muted { color:var(--muted); font-size:0.75rem; }
/* The other players in the role, collapsed under the pick. */
.lab-alts { margin-top:0.375rem; font-size:0.75rem; }
.lab-alts>summary { width:max-content; max-width:100%; color:var(--muted); font-weight:650; cursor:pointer; }
.lab-alts>summary:hover, .lab-alts[open]>summary { color:var(--text); }
.lab-alts ul { display:grid; gap:0.25rem; margin:0.375rem 0 0; padding:0; list-style:none; }
.lab-alt { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; column-gap:0.5rem; align-items:baseline; padding:0.25rem 0.375rem; border-radius:var(--r-control); background:var(--surface-raised); }
.lab-alt .profile-name-button { justify-self:start; font-weight:700; text-align:left; }
.lab-alt .mu-face { --face:1.75rem; grid-row:1 / span 2; align-self:center; }
.lab-alt small { grid-row:2; grid-column:2; color:var(--muted); font-size:0.6875rem; }
.lab-alt-line { grid-row:1 / span 2; grid-column:3; align-self:center; color:var(--muted); white-space:nowrap; }
.lab-alt.has-line .lab-alt-line { color:var(--text); font-weight:700; }

/* Phones: each row becomes a card; previous weeks scroll sideways, next matchup below. */
@media (max-width:48em) {
  .lab-table, .lab-table tbody { display:block; }
  .lab-table thead { display:none; }
  /* One week per row: two side by side left ~140px cells and broke names per letter. */
  .lab-table tr { display:grid; grid-template-columns:minmax(0, 1fr); border-bottom:0.5rem solid var(--bg); }
  .lab-table .lab-row-label, .lab-table .lab-next-cell { position:static; grid-column:1 / -1; width:auto; min-width:0; }
  .lab-table .lab-next-cell { order:2; border-top:2px solid var(--accent-soft); }
  .lab-week-cell { width:auto; min-width:0; }
  .lab-week-cell::before { content:attr(data-week-label); display:block; margin-bottom:0.25rem; color:var(--muted); font-size:0.5625rem; font-weight:750; letter-spacing:0.08em; }
  .lab-board-actions { margin-left:0; }
  .lab-heading p { display:none; }
  /* The 132px slider stuck under the 112px header fixed a third of the screen. */
  .lab-slider { position:static; }
}

/* ------------------------------------------------------------------------------------
   Defense page (studio-lab.js pageHtml): header, Where it leaks, Week by week, and the
   research tools (the board above) collapsed at the foot. Next up rows are .lk-next
   from matchups.css.
   ------------------------------------------------------------------------------------ */
.dp { display:grid; gap:1.5rem; min-width:0; }
.dp-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; color:var(--muted); font-size:0.8125rem; }
.dp-crumbs .text-button { font-size:0.8125rem; font-weight:600; }
.dp-crumbs [aria-current] { color:var(--ink); }
.dp-head { display:grid; grid-template-columns:auto minmax(0, 1fr) fit-content(55%); align-items:center; gap:0.5rem 1rem; }
.dp-logo { width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:var(--r-control); background:var(--surface); border:1px solid var(--line); box-shadow:none; overflow:hidden; }
.dp-logo img { width:100%; height:100%; object-fit:contain; padding:4px; }
.dp-head h2 { margin:0; font:800 2.375rem/1 var(--font-display); letter-spacing:-0.035em; }
.dp-head h2:focus { outline:none; }
.dp-head p { margin:0.375rem 0 0; color:var(--muted); font-size:0.9375rem; }
.dp-head p strong { color:var(--ink); }
.dp-head p .dp-head-status { color:var(--ink); font-weight:700; }
.dp-head-links { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:0.5rem 1.125rem; }
.dp-head-links .dp-link { color:var(--ink); font-weight:800; font-size:0.875rem; }
/* The defense picker is the shared team picker (StudioKit.teamPicker, teams.css, UI-554):
   its panel opens under the button, lined up with the right edge while the links sit on the
   right, and fits the screen at 200% text. */
.dp-pick-defense { min-width:0; max-width:100%; }
.dp-pick-defense .team-picker-button { max-width:100%; font-size:0.8125rem; }
.dp-pick-defense .team-picker-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-head-links .team-picker-panel { left:auto; right:0; }
.dp h3 { margin:0; font:800 1.5rem/1.1 var(--font-display); letter-spacing:-0.02em; }
.dp-legend { margin:0; }
.dp-rows, .dp-week-list { display:grid; margin-top:0.875rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; overflow:hidden; }
.dp-row + .dp-row, .dp-week + .dp-week { border-top:2px solid var(--line); }
/* 'Week by week below ↓' scrolls a week here: clear the sticky header. */
.dp-row, .dp-week { scroll-margin-top:calc(var(--header-height) + 0.75rem); }
.dp-row-main { display:grid; grid-template-columns:minmax(16rem, 0.9fr) minmax(0, 1.6fr); align-items:stretch; }
.dp-row-toggle { display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out); }
.dp-row-toggle:hover { background:var(--surface-raised); }
.dp-row-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.dp-row-text { min-width:0; display:flex; flex-direction:column; gap:0.1875rem; flex:1; }
.dp-row-text strong { font:800 1.0625rem/1.2 var(--font-display); }
.dp-row-text small { color:var(--muted); font-size:0.8125rem; line-height:1.35; }
.dp-chevron { display:inline-flex; flex:0 0 auto; color:var(--muted); line-height:1; transition:rotate var(--dur-base) var(--ease-out); }
.dp-chevron svg { display:block; width:1.125rem; height:1.125rem; }
.dp-row.is-open .dp-row-toggle .dp-chevron, .dp-week[open] > summary .dp-chevron, .dp-tools[open] > summary .dp-chevron { rotate:180deg; }
/* The Next up row lies flat beside the band on a wide screen. */
.dp-row .lk-next { display:grid; grid-template-columns:minmax(8rem, 1fr) auto auto; grid-template-areas:"label chart pick" "who chart pick" "signals verdict verdict";
  align-items:center; gap:0.25rem 1rem; padding:0.75rem 1rem; border-left:2px solid var(--line); }
.dp-row .lk-next > .ar-label { grid-area:label; }
.dp-row .lk-next-who { grid-area:who; }
.dp-row .lk-next-chart { grid-area:chart; }
.dp-row .lk-next-signals { grid-area:signals; margin-top:0.25rem; }
.dp-row .lk-verdict { grid-area:verdict; margin-top:0.25rem; }
.dp-row .lk-pick { grid-area:pick; margin:0; min-width:8.5rem; }
.dp-row .lk-next.is-empty { display:flex; }
.dp-why-inner { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) auto; gap:1rem 1.5rem; align-items:start; padding:0.25rem 1rem 1rem; }
.dp-row.is-open { background:var(--surface-subtle); }
/* Week by week. */
.dp-week > summary { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.875rem; padding:0.875rem 1rem; cursor:pointer; list-style:none; transition:background-color var(--dur-fast) var(--ease-out); }
.dp-week > summary::-webkit-details-marker { display:none; }
.dp-week > summary:hover { background:var(--surface-raised); }
.dp-week > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
/* The position heads its row as StudioKit's coloured chip (UI-442), in the display face. */
.dp-week-pos { min-width:3rem; padding:0.125rem 0.5rem; font:800 1.0625rem var(--font-display); }
.dp-week-count { flex:1; min-width:min(10rem, 100%); font-size:0.875rem; }
.dp-week > summary .dp-chevron { margin-left:0.25rem; }
.dp-week-body { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:1rem 1.5rem; padding:0.25rem 1rem 1.125rem; animation:ar-rise var(--dur-base) var(--ease-out); }
.dp-week-table h4, .dp-chart figcaption strong { display:block; margin:0 0 0.5rem; font:800 0.9375rem var(--font-display); }
.dp-chart { margin:0; padding:0.875rem; background:var(--bg); border:2px solid var(--line); border-radius:var(--r-card); min-width:0; }
.dp-chart figcaption span { display:block; margin:-0.25rem 0 0.75rem; color:var(--muted); font-size:0.75rem; }
.dp-bars { list-style:none; margin:0; padding:0; display:flex; align-items:stretch; gap:0.5rem; height:12rem; overflow-x:auto; }
.dp-bar { flex:1 0 4.75rem; max-width:7rem; display:flex; flex-direction:column; gap:0.375rem; }
.dp-bar-plot { position:relative; flex:1; border-bottom:2px solid var(--line); }
.dp-bar-fill { position:absolute; left:12%; right:12%; bottom:0; height:var(--h); border-radius:0; background:var(--bad); transform-origin:bottom;
  animation:ar-grow var(--dur-slow) var(--spring-soft) both; animation-delay:calc(var(--i) * 60ms * var(--move)); }
.dp-bar.dp-hit .dp-bar-fill { background:var(--good); }
.dp-bar.dp-push .dp-bar-fill { background:none; box-shadow:inset 0 0 0 2px var(--thin); }
.dp-bar-value { position:absolute; left:50%; bottom:calc(100% + 2px); translate:-50% 0; white-space:nowrap; font:700 0.6875rem var(--font-mono); }
.dp-bar-value b { color:var(--bad); } .dp-bar.dp-hit .dp-bar-value b { color:var(--good); }
.dp-bar-line { position:absolute; left:0; right:0; bottom:var(--at); border-top:2px dashed var(--ink); animation:ar-rise var(--dur-slow) var(--ease-out) both; animation-delay:calc(var(--i) * 60ms * var(--move) + 120ms); }
.dp-bar-line i { position:absolute; right:0; top:-0.625rem; padding:0 3px; border-radius:0; background:var(--ink); color:var(--accent-ink); font:700 0.5625rem var(--font-mono); font-style:normal; }
/* Bar top near the line (studio-lab.js weekChart): keep the value label and the line tag apart.
   Over or push: the tag drops under the dash. A miss: the value sits inside the top of the bar. */
.dp-bar.is-near .dp-bar-line i { top:0.25rem; }
.dp-bar.is-near-under .dp-bar-value { bottom:auto; top:0.1875rem; color:var(--accent-ink); }
.dp-bar.is-near-under .dp-bar-value b { color:inherit; }
/* A short miss: --lift is the gap to the line in % of the bar, so the value clears the dash. */
.dp-bar.is-near-low .dp-bar-value { bottom:calc(100% + var(--lift, 0%) + 3px); }
/* More bars off to the right: fade the edge (studio-lab.js toggles .has-more). */
.dp-bars.has-more { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.dp-bar small { color:var(--muted); font-size:0.6875rem; line-height:1.2; text-align:center; }
/* Full names: up to two lines, then an ellipsis (the whole name is in the title). */
.dp-bar-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.4em; color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.dp-bars { height:13rem; }
.dp-table-scroll { overflow-x:auto; }
.dp-table { width:100%; border-collapse:collapse; font-size:0.8125rem; }
.dp-table th, .dp-table td { padding:0.5rem 0.5rem; border-bottom:2px solid var(--line); text-align:left; white-space:nowrap; }
.dp-table thead th { color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.04em; text-transform:uppercase; }
.dp-table td:nth-child(n+4) { font-family:var(--font-mono); text-align:right; }
.dp-table thead th:nth-child(n+4) { text-align:right; }
.dp-table .lk-name { font-size:0.875rem; }
.dp-player { display:flex; align-items:center; gap:0.5rem; }
.dp-table .mu-face { --face:1.75rem; }
.dp-table tr.dp-hit .dp-diff { color:var(--good); } .dp-table tr.dp-miss .dp-diff { color:var(--bad); }
.dp-opp { display:inline-flex; align-items:center; }
.dp-wk-opp { display:none; }
.dp-note { margin:0.625rem 0 0; color:var(--muted); font-size:0.8125rem; }
/* Research tools: the board, collapsed. */
.dp-tools { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.dp-tools > summary { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 1.25rem; padding:1rem 1.125rem; cursor:pointer; list-style:none; }
.dp-tools > summary::-webkit-details-marker { display:none; }
.dp-tools > summary strong { font:800 1.25rem var(--font-display); }
.dp-tools > summary span:not(.dp-chevron) { flex:1; min-width:min(14rem, 100%); color:var(--muted); font-size:0.875rem; }
.dp-tools > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; border-radius:var(--r-card); }
.dp-tools-body { display:grid; gap:0.625rem; padding:0 1.125rem 1.125rem; min-width:0; }
.dp-classic { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem; margin:-0.5rem 0 0; color:var(--muted); font-size:0.875rem; }
/* Band chips share one width so the titles beside them line up. */
.dp-row-toggle > .lk-band, .dp-week > summary > .lk-band { flex:0 0 auto; min-width:7.25rem; justify-content:center; }
.dp-head-links .dp-link { text-decoration:underline; text-underline-offset:3px; }
.dp-head-links .dp-link:hover { color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .dp-bar-fill, .dp-bar-line, .dp-week-body { animation:none; } .dp-chevron, .dp-row-toggle { transition:none; } }
@media (max-width:75em) {
  .dp-row-main { grid-template-columns:minmax(0, 1fr); }
  .dp-row .lk-next { border-left:0; border-top:2px dashed var(--line); }
  .dp-why-inner { grid-template-columns:minmax(0, 1fr); }
  .dp-why-inner .lk-why-links { padding-left:0; border-left:0; }
  .dp-week-body { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:48.125em) {
  .dp-head { grid-template-columns:auto minmax(0, 1fr); }
  .dp-head-links { grid-column:1 / -1; justify-content:flex-start; }
  /* The team-page link and the defense picker: 40px targets. */
  .dp-head-links .dp-link { display:inline-flex; align-items:center; min-height:2.5rem; }
  .dp-head-links .team-picker-panel { left:0; right:auto; }
  /* Capped by the screen width, so at 200% text a long name ("Pittsburgh") still fits the
     column beside the logo instead of spilling past the page edge (UI-74). */
  .dp-head h2 { font-size:min(1.75rem, 8.5vw); overflow-wrap:break-word; }
  .dp-logo { width:2.75rem; height:2.75rem; }
  .dp h3 { font-size:1.25rem; }
  .dp-row .lk-next { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"label label" "who who" "chart chart" "signals signals" "verdict verdict" "pick pick"; }
  .dp-row .lk-pick { min-width:0; }
  /* Row toggles: the band chip on its own line above the text, the chevron at the right. */
  .dp-row-toggle { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:0.5rem 0.75rem; }
  .dp-row-toggle > .lk-band { grid-column:1; grid-row:1; justify-self:start; min-width:0; }
  .dp-row-toggle > .dp-row-text { grid-column:1; grid-row:2; }
  .dp-row-toggle > .dp-chevron { grid-column:2; grid-row:1 / span 2; align-self:center; }
  /* The chart: narrower bars (the fade shows when more sit off-screen). */
  .dp-bar { flex-basis:4.25rem; }
  /* The games table: Week and Opp fold into one cell ('Wk 1 vs ATL'), no logo, names wrap. */
  .dp-table { font-size:0.6875rem; }
  .dp-table th, .dp-table td { padding:0.4375rem 0.1875rem; }
  .dp-table .dp-opp-cell { display:none; }
  .dp-table .dp-wk-opp { display:block; color:var(--muted); }
  .dp-table tbody th { white-space:normal; }
  .dp-table thead th { white-space:normal; font-size:0.625rem; letter-spacing:0; vertical-align:bottom; }
  .dp-table .lk-name { font-size:0.75rem; text-align:left; }
  .dp-player { gap:0.375rem; }
  .dp-table .mu-face { --face:1.5rem; }
}
/* On a phone the panel is fixed to the screen's sides (teams.css). */
@media (max-width:40em) { .dp-head-links .team-picker-panel { left:1rem; right:1rem; } }
/* 200% text: let the page's grids shrink instead of widening the page. */
.dp > *, .dp-rows > *, .dp-week-list > *, .dp-head > *, .dp-row-main > *, .dp-why-inner > *, .dp-week-body > *, .dp-tools-body > *, .lab-toolbar > * { min-width:0; }
/* Section-head links ("See Pittsburgh on the heatmap →") wrap rather than run past the card. */
.dp .lk-section-head .text-button { max-width:100%; white-space:normal; text-align:left; }