/* Matchups screens (Arcade redesign): the view switch shared by Pos vs Def, Defense boards,
   Usage and Teams, and the Pos vs Def heatmap with its drill panel.
   Kit additions (not in arcade.css): heatmap shading steps and the drill panel. */

/* ---- View switch (studio-matchups-nav.js): one chip row, selected = ink chip ---- */
html body[data-layout] .mu-nav { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; margin:0 0 1rem; }
.mu-nav-title { width:100%; }
html body[data-layout] .mu-nav[hidden] { display:none; }
html body[data-layout] .mu-nav:not(.is-titled) .mu-nav-title { display:none; }
.mu-nav-title h2 { margin:0; font:800 2.375rem/1 var(--font-display); letter-spacing:-0.035em; }
.mu-nav-title p { margin:0.375rem 0 0; color:var(--muted); font-size:0.9375rem; }
html body[data-layout] .mu-views { display:flex; gap:0.5rem; max-width:100%; overflow-x:auto; padding:0.125rem 0.25rem 0.375rem 0.125rem; scrollbar-width:none; }
html body[data-layout] .mu-views a { flex:0 0 auto; height:2.5rem; display:inline-flex; align-items:center; padding:0 1rem; border:2px solid var(--line); border-radius:var(--r-data);
  background:var(--surface); color:var(--muted); font:800 0.9375rem/1 var(--font-body); text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
html body[data-layout] .mu-views a:hover { color:var(--ink); border-color:var(--muted); }
html body[data-layout] .mu-views a[aria-current=page] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); box-shadow:none; }
html body[data-layout] .mu-views a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { html body[data-layout] .mu-views a { transition:none; } }
/* A sub-page (Defense boards) marks its parent chip without claiming to be it. */
html body[data-layout] .mu-views a.is-parent { color:var(--ink); border-color:var(--ink); border-style:dashed; }
.mu-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; margin-bottom:0.5rem; color:var(--muted); font-size:0.8125rem; }
.mu-crumbs a { color:var(--ink); font-weight:700; text-underline-offset:3px; }
.mu-crumbs a:hover { color:var(--accent); }
.mu-crumbs [aria-current] { color:var(--muted); }

/* ---- Defense boards (?view=research): the Matchups header, pills and a lead; no side rail ---- */
html body[data-layout] .mu-boards { display:grid; gap:0.625rem; width:100%; padding:0.75rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
html body[data-layout] .mu-boards[hidden] { display:none; }
html body[data-layout] .mu-boards-lead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.625rem 1.25rem; min-width:0; }
html body[data-layout] .mu-boards-lead:empty { display:none; }
.mu-boards-status { flex:1 1 24rem; margin:0; color:var(--muted); font-size:0.9375rem; line-height:1.4; }
.mu-boards-status:empty { display:none; }
.mu-boards-status strong { color:var(--ink); }
/* The notebook's defense chips, in one sideways strip (a tap adds or removes a board; Ctrl-click shows only one). */
.mu-boards-teams { min-width:0; }
html body[data-layout] .mu-boards-teams #defenseNav { display:flex; gap:0.375rem; min-width:0; max-width:100%; padding:0.125rem 2.5rem 0.375rem 0.125rem; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;
  -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); }
html body[data-layout] .mu-boards-teams #defenseNav button { flex:0 0 auto; width:auto; min-height:2.25rem; display:inline-flex; align-items:center; gap:0.375rem; padding:0 0.75rem 0 0.375rem;
  border:2px solid var(--line); border-radius:var(--r-control); background:var(--bg); color:var(--muted); font:700 0.8125rem var(--font-body); white-space:nowrap; }
html body[data-layout] .mu-boards-teams #defenseNav button:hover { color:var(--ink); border-color:var(--muted); background:var(--bg); }
html body[data-layout] .mu-boards-teams #defenseNav button[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
.mu-boards-teams #defenseNav .nav-team { min-width:1.75rem; height:1.5rem; border-radius:var(--r-control); font-size:0.5625rem; }
/* UI-245: a tap adds a board or takes it off. Once a board is picked, the other teams read
   "+" and the picked ones "×" (the chips keep their aria-label, so names don't change). */
.mu-boards-teams #defenseNav:not([data-picked="0"]) button:not([data-jump=""])::after { content:"+"; margin-left:0.125rem; color:var(--muted); font:800 1rem/1 var(--font-body); }
.mu-boards-teams #defenseNav button:not([data-jump=""])[aria-pressed=true]::after { content:"×"; margin-left:0.125rem; color:inherit; font:800 1rem/1 var(--font-body); }
.mu-compare-hint { flex:1 1 100%; margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.4; }
.mu-compare { flex:1 1 100%; display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; min-width:0; font-size:0.8125rem; }
.mu-compare > strong { color:var(--ink); font-size:0.8125rem; }
.mu-compare ul { display:flex; flex-wrap:wrap; gap:0.375rem; margin:0; padding:0; list-style:none; min-width:0; }
.mu-compare li { display:inline-flex; align-items:center; gap:0; padding-left:0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--bg); color:var(--ink); font-weight:700; }
html body[data-layout] .mu-compare-remove { display:inline-grid; place-items:center; min-width:2rem; min-height:2rem; padding:0; border:0; background:none; color:var(--muted); font:800 1.125rem/1 var(--font-body); cursor:pointer; border-radius:var(--r-control); }
html body[data-layout] .mu-compare-remove:hover { color:var(--ink); background:var(--surface-raised); }
.mu-compare-back { color:var(--muted); }
.mu-compare-back em { font-style:normal; font-weight:700; color:var(--ink); }
/* Each board's own way to narrow to it or take it off (players.js boardCompareHtml). */
html body[data-layout] .board-heading .board-compare { display:flex; flex-wrap:wrap; gap:0.375rem; margin-left:auto; }
#boards .board-heading .board-compare + .matchup-review-control { margin-left:0; }
html body[data-layout] .board-heading .board-compare .pd-button { margin:0; min-height:2.25rem; padding:0 0.75rem; font-size:0.75rem; white-space:nowrap; }
html body[data-active-view=boards] .notebook-main { margin-left:0; grid-template-columns:minmax(0,1fr); row-gap:1rem; padding-top:1.25rem; }
html body[data-layout][data-active-view=boards] .page-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html body[data-active-view=boards] #matchupsNav { grid-row:1; grid-column:1/-1; margin:0; }
html body[data-active-view=boards] .notebook-controls { grid-row:2; grid-column:1/-1; }
/* The tour prompt (onboarding.js prepends it to #mainContent) takes the top row; the rows below move down one. */
html body:is([data-active-view=boards],[data-active-view=overview]) .notebook-main > .guide-offer { grid-row:1; grid-column:1/-1; margin:0; }
html body[data-active-view=boards] .notebook-main:has(> .guide-offer) #matchupsNav { grid-row:2; }
html body[data-active-view=boards] .notebook-main:has(> .guide-offer) .notebook-controls { grid-row:3; }
html body[data-active-view=boards] .defense-board { border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; overflow:hidden; }
/* A week with nothing highlighted is one quiet line, not an empty block. */
html body[data-active-view=boards] #boards .matchup-picks:has(> button.board-empty) { display:flex; align-items:center; padding:0.375rem 0.75rem; min-height:0; }
html body[data-active-view=boards] .matchup-picks:has(> button.board-empty) > .picks-caption { display:none; }
html body[data-active-view=boards] #boards .matchup-picks > button.board-empty { width:auto; min-height:0; margin:0; padding:0.25rem 0.625rem; border:2px dashed var(--line); border-radius:var(--r-control); background:none; color:var(--muted); font:700 0.75rem var(--font-body); cursor:pointer; }
html body[data-active-view=boards] #boards .matchup-picks > button.board-empty span { display:inline; margin:0; color:inherit; }
html body[data-active-view=boards] #boards .matchup-picks > button.board-empty:hover { border-color:var(--muted); color:var(--ink); }
html body[data-active-view=boards] #boards .matchup-picks > p.board-empty { margin:0; padding:0.5rem 0.75rem; font-size:0.75rem; }

/* ---- Pos vs Def page frame: title row, controls row, then the heatmap and drill panel ---- */
html body[data-active-view=overview] .notebook-main { grid-template-columns:auto minmax(0,1fr) auto; row-gap:1rem; padding-top:1.25rem; }
html body[data-layout][data-active-view=overview] .page-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html body[data-active-view=overview] #matchupsNav { grid-row:1; grid-column:1/-1; margin:0; }
html body[data-active-view=overview] .notebook-controls { grid-row:2; grid-column:1/3; }
html body[data-active-view=overview] #overviewControls { grid-row:2; grid-column:3; align-self:center; justify-self:end; margin:0; }
html body[data-active-view=overview] #overviewPanel { grid-column:1/-1; }
html body[data-active-view=overview] .notebook-main:has(> .guide-offer) #matchupsNav { grid-row:2; }
html body[data-active-view=overview] .notebook-main:has(> .guide-offer) :is(.notebook-controls, #overviewControls) { grid-row:3; }
html body[data-active-view=overview] .overview-search input { width:15.625rem; height:2.5rem; padding-left:2.25rem; border-radius:var(--r-control); font-weight:600;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23b3a8c7' stroke-width='2'/%3E%3Cpath d='M11 11L14.5 14.5' stroke='%23b3a8c7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0.75rem center; }

.mu-layout { display:grid; grid-template-columns:minmax(0,1fr) 22.5rem; gap:1.25rem; align-items:start; }
.mu-heat { min-width:0; display:flex; flex-direction:column; gap:0.75rem; padding:1rem 1.125rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.mu-heat-head { display:flex; justify-content:space-between; align-items:center; gap:0.5rem 1rem; flex-wrap:wrap; }
.mu-heat-head h2 { margin:0; font:800 1.375rem/1.2 var(--font-display); letter-spacing:-0.02em; }
.mu-heat-body { min-width:0; }
/* The legend (UI-639): one line of plain coloured band words with their rank ranges. */
.mu-legend { color:var(--muted); font-size:0.75rem; }
.mu-legend p { margin:0; }
.mu-legend-band { white-space:nowrap; }
.mu-legend-band .ar-term { font-weight:800; }
.mu-legend-band.band-soft .ar-term { color:var(--good); }
.mu-legend-band.band-neutral .ar-term { color:var(--ink); }
.mu-legend-band.band-tough .ar-term { color:var(--bad); }

/* ---- Heatmap table (keeps the table, its sticky headers and sorting) ---- */
#overview { border:0; border-radius:0; background:none; box-shadow:none; }
/* Every defense shows (no inner scroller hiding 23 of 32 rows); the page scrolls down and
   the table still scrolls sideways to the alt-line columns. */
html body[data-active-view=overview] #overview { max-height:none; overflow-y:hidden; }
#overview .mu-heatmap { width:100%; border-collapse:separate; border-spacing:0; background:none; }
html body[data-layout] #overview .mu-heatmap :is(th, td) { padding:3px; border:0; background:none; vertical-align:middle; }
html body[data-layout] #overview .mu-heatmap thead th { background:var(--surface); }
html body[data-layout] #overview .mu-heatmap thead th[data-position] { border-top:0; }
html body[data-layout] #overview .mu-heatmap .overview-market-groups th[data-overview-group] { padding:0.25rem 0.375rem 0; color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; text-align:left; }
html body[data-layout] #overview .mu-heatmap .overview-column-headings th { min-width:4.5rem; padding:0.25rem 3px 0.375rem; border-bottom:2px solid var(--line); vertical-align:bottom; }
html body[data-layout] #overview .mu-heatmap thead th.row-label { vertical-align:bottom; border-bottom:2px solid var(--line); text-align:left; }
#overview .mu-heatmap .overview-sort { width:100%; display:flex; flex-direction:column; align-items:center; gap:1px; padding:0; border:0; background:none; color:var(--muted); cursor:pointer; }
#overview .mu-heatmap thead th.row-label .overview-sort { align-items:flex-start; padding-left:0.5rem; }
#overview .mu-heatmap .overview-sort small { margin:0; color:inherit; font:700 0.6875rem var(--font-mono); letter-spacing:0.04em; }
#overview .mu-heatmap .overview-sort > span { display:inline-flex; align-items:center; gap:0.25rem; font:800 0.8125rem/1.15 var(--font-body); text-align:center; }
#overview .mu-heatmap thead th.row-label .overview-sort > span { font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
#overview .mu-heatmap :is(th[aria-sort=ascending], th[aria-sort=descending]) .overview-sort { color:var(--accent); }
#overview .mu-heatmap .overview-sort:hover { color:var(--ink); }
#overview .mu-heatmap .overview-sort:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-control); }
#overview .mu-heatmap .mu-caret { font-size:0.625rem; }
html body[data-layout] #overview .mu-heatmap :is([data-overview-group=alt], .overview-alt-start) { border-left:0; padding-left:0.75rem;
  background-image:linear-gradient(var(--line), var(--line)); background-repeat:no-repeat; background-size:2px 70%; background-position:0.25rem center; }
html body[data-layout] #overview .mu-heatmap thead :is([data-overview-group=alt], .overview-alt-start) { background-color:var(--surface); }

/* Sideways-scroll cues (UI-391, studio-positions.js syncScroll): fades over the scroller's
   edges while columns sit beyond them (the left one starts after the pinned defense column;
   both start under the group-label row so "Main lines" stays crisp),
   ‹ › buttons and a "12 more columns →" hint in the corner cell, a visible thin scrollbar, and
   the column-group labels (Main lines / Alt lines) pinned beside the defense column while
   their group is on screen. */
.mu-scroll-frame { position:relative; min-width:0; }
.mu-scroll-fade { position:absolute; top:var(--mu-groups, 0px); bottom:var(--mu-bar, 0px); z-index:6; width:min(3rem, max(0px, 100% - var(--mu-pin, 0px))); pointer-events:none; opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
.mu-scroll-fade.is-left { left:var(--mu-pin, 0px); background:linear-gradient(to right, var(--surface), transparent); }
.mu-scroll-fade.is-right { right:0; background:linear-gradient(to left, var(--surface), transparent); }
.mu-scroll-frame.can-left > .is-left, .mu-scroll-frame.can-right > .is-right { opacity:1; }
@media (prefers-reduced-motion: reduce) { .mu-scroll-fade { transition:none; } }
html body[data-active-view=overview] #overview { scrollbar-width:thin; scrollbar-color:var(--muted) var(--surface-raised); }
html body[data-active-view=overview] #overview::-webkit-scrollbar { height:0.5rem; }
html body[data-active-view=overview] #overview::-webkit-scrollbar-track { background:var(--surface-raised); border-radius:var(--r-data); }
html body[data-active-view=overview] #overview::-webkit-scrollbar-thumb { background:var(--muted); border-radius:var(--r-data); }
#overview .mu-heatmap .mu-group-label { position:sticky; left:calc(var(--mu-pin, 0px) + 0.375rem); display:inline-block; }
html body[data-layout] #overview .mu-heatmap thead th.row-label { position:sticky; left:0; z-index:5; }
#overview .mu-scroll-nav { display:flex; flex-wrap:wrap; align-items:center; gap:0.125rem 0.375rem; padding:0 0 0.375rem 0.5rem; }
#overview .mu-scroll-nav[hidden] { display:none; }
#overview .mu-scroll-btns { display:inline-flex; gap:0.25rem; }
#overview .mu-scroll-btn { width:1.75rem; height:1.75rem; display:inline-grid; place-items:center; padding:0; border:2px solid var(--line); border-radius:var(--r-control); background:var(--bg); color:var(--ink); font:800 1rem/1 var(--font-body); cursor:pointer; }
#overview .mu-scroll-btn:hover:not([aria-disabled=true]) { border-color:var(--muted); }
#overview .mu-scroll-btn[aria-disabled=true] { color:var(--muted); opacity:0.45; cursor:default; }
#overview .mu-scroll-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
#overview .mu-scroll-hint { color:var(--muted); font:700 0.6875rem/1.2 var(--font-body); letter-spacing:0; text-transform:none; text-align:left; }
#overview .mu-scroll-hint:empty { display:none; }

/* Defense column */
html body[data-layout] #overview .mu-heatmap tbody .row-label { position:sticky; left:0; z-index:2; min-width:10.75rem; width:10.75rem; padding:3px 6px 3px 0; background:var(--surface); }
#overview .mu-heatmap .overview-team { height:2.875rem; display:flex; align-items:center; gap:0.625rem; padding:0 0.5rem; border:2px solid transparent; border-radius:var(--r-control); text-align:left; flex-direction:row; }
#overview .mu-heatmap tr.mu-row-on .overview-team { border-color:var(--accent); background:var(--surface-raised); }
#overview .mu-heatmap .overview-team-badge { width:2.25rem; height:1.75rem; flex:0 0 auto; border-radius:var(--r-data); background:var(--bg); border:2px solid var(--line); overflow:hidden; }
#overview .mu-heatmap .overview-team-badge img { width:100%; height:100%; object-fit:contain; padding:2px; }
#overview .mu-heatmap .overview-team > span:last-child { min-width:0; display:flex; flex-direction:column; line-height:1.15; font-size:0.875rem; }
html body[data-layout] #overview .mu-heatmap .overview-team .team-name-link:hover { color:var(--accent); }
#overview .mu-heatmap .mu-row-meta { color:var(--muted); font-size:0.6875rem; font-weight:500; white-space:nowrap; }
#overview .mu-heatmap .mu-row-meta small { display:inline; margin:0; color:inherit; font:inherit; }

/* Cells: % vs line with n, shaded in five steps from the existing tone and strength. */
#overview .mu-heatmap td .overview-cell { width:100%; height:2.875rem; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:0 0.25rem; background:var(--surface-raised); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; text-align:center; cursor:pointer;
  transition:transform 80ms ease, box-shadow 80ms ease; }
#overview .mu-heatmap td .overview-cell .summary-value { color:inherit; font:700 0.9375rem/1.1 var(--font-mono); letter-spacing:-0.03em; white-space:nowrap; }
#overview .mu-heatmap td .mu-n { color:var(--muted); font:400 0.625rem/1.1 var(--font-mono); }
#overview .mu-heatmap td .overview-cell:hover { border-color:var(--muted); }
#overview .mu-heatmap td .overview-cell[aria-pressed=true] { border:3px solid var(--accent); box-shadow:none; transform:translate(-1px, -1px); }
#overview .mu-heatmap td .overview-cell:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { #overview .mu-heatmap td .overview-cell { transition:none; } }
html body[data-layout] #overview .mu-heatmap thead th.mu-pace-head { min-width:3.5rem; padding:0.25rem 3px 0.375rem; border-bottom:2px solid var(--line); vertical-align:bottom; }
html body[data-layout] #overview .mu-heatmap td.mu-pace { padding-right:0.5rem; text-align:center; }
#overview .mu-heatmap .mu-pace-cell { display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--ink); }
#overview .mu-heatmap .mu-pace-cell b { font:700 0.875rem/1.1 var(--font-mono); letter-spacing:-0.03em; white-space:nowrap; }
#overview .mu-heatmap .mu-pace-cell small { margin:0; color:var(--muted); font:400 0.6875rem/1.1 var(--font-body); }
.mu-legend .mu-pace-note { margin-top:0.25rem; }

/* ---- Drill panel ---- */
.mu-drill { position:sticky; top:calc(var(--header-height) + 1rem); scroll-margin-top:calc(var(--header-height) + 0.75rem); max-height:calc(100dvh - var(--header-height) - 2rem); overflow:auto; overscroll-behavior:contain; min-width:0;
  display:flex; flex-direction:column; gap:0.875rem; padding:1.125rem; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.mu-drill:focus { outline:none; }
.mu-drill-top { display:flex; justify-content:space-between; align-items:center; min-height:1.875rem; }
.mu-pill { padding:0.1875rem 0.625rem; border-radius:var(--r-data); background:var(--accent); color:var(--accent-ink); border:1px solid var(--line); font:700 0.6875rem var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; }
.mu-close { width:1.875rem; height:1.875rem; display:grid; place-items:center; padding:0; background:none; color:var(--muted); border:2px solid var(--line); border-radius:var(--r-control); font-size:1.125rem; line-height:1; cursor:pointer; }
.mu-close:hover { color:var(--ink); border-color:var(--muted); }
.mu-drill-title { margin:0; font:800 1.5rem/1.08 var(--font-display); letter-spacing:-0.025em; }
.mu-weeks { display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap; color:var(--muted); font-size:0.75rem; }
.mu-drill-facts { display:flex; flex-wrap:wrap; gap:0.25rem 0.75rem; margin:0; color:var(--muted); font:400 0.75rem var(--font-mono); }
.mu-drill-note, .mu-drill-empty { margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.4; }
/* The heading with the order switch (Role | Margin) at its right; the switch drops under the
   heading when they don't fit side by side. */
.mu-behind-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:0.375rem 0.75rem; padding-bottom:0.375rem; border-bottom:2px solid var(--line); }
.mu-behind .ar-label { margin:0; }
.mu-behind-sort.ar-seg { padding:0.125rem; }
.mu-behind-sort.ar-seg button { height:1.75rem; padding:0 0.625rem; font-size:0.75rem; }
.mu-behind-sort button:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }
.mu-behind > .mu-drill-note { margin-top:0.5rem; }
.mu-behind ul { list-style:none; margin:0; padding:0; }
/* UI-392: grouped by game, newest first ("Wk 4 · vs DEN · 1 of 4 over"); the latest two open,
   older games under "Earlier games (n)", each a one-line heading that opens to its players.
   One line a player: face, name (ellipsis) with its owner tag, role, actual / line and the
   signed margin. The row still wraps (UI-317): when the figures don't fit beside
   a readable name (200% text) they drop to their own line at the right. */
.mu-behind-game { margin-top:0.625rem; }
.mu-behind-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 0.5rem; margin:0; padding:0.25rem 0; border-bottom:1px solid var(--line); color:var(--ink); font:700 0.75rem/1.3 var(--font-mono); letter-spacing:0.02em; }
.mu-behind-tally { color:var(--muted); font-weight:400; }
.mu-behind-row { min-height:2.25rem; padding:0.1875rem 0; display:flex; flex-wrap:wrap; align-items:center; gap:0.125rem 0.5rem; border-bottom:1px solid var(--line); }
.mu-behind-row:last-child { border-bottom:0; }
.mu-behind-row > .mu-behind-who { flex:1 1 min(8rem, 100%); }
.mu-behind-row > .mu-behind-figs { flex:0 0 auto; max-width:100%; margin-left:auto; display:inline-flex; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; gap:0 0.5rem; }
.mu-behind-figs > .mu-margin { min-width:3.25rem; text-align:right; }
.mu-behind .mu-drill-empty { padding:0.625rem 0; }
.mu-behind-who { min-width:0; display:flex; align-items:center; gap:0.5rem; }
.mu-behind-who .mu-face { --face:1.625rem; }
.mu-behind-who .owner-name { flex:0 1 auto; min-width:0; }
.mu-behind-who .profile-name-button { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2; padding:0; border:0; background:none; color:var(--ink); font:800 0.875rem var(--font-body); text-align:left; cursor:pointer; }
.mu-behind-who .profile-name-button:hover { color:var(--accent); }
/* His depth-chart role that week (WR1): muted, after the name, never squeezed. */
.mu-behind-role { flex:0 0 auto; color:var(--muted); font:700 0.6875rem var(--font-mono); letter-spacing:0.02em; }
/* Under 400px the name and its owner tag need the room; Role still orders the rows. */
@media (max-width:24.99em) { .mu-behind-role { display:none; } }
.mu-behind-num { font:700 0.8125rem var(--font-mono); text-align:right; white-space:nowrap; }
.mu-behind-num span { color:var(--muted); font-weight:400; }
.mu-margin { font:700 0.8125rem var(--font-mono); white-space:nowrap; color:var(--muted); }
.mu-margin.hit { color:var(--good); }
.mu-margin.miss { color:var(--bad); }
.mu-margin.none { font-size:0.625rem; }
.mu-behind-more { margin-top:0.625rem; }
.mu-behind-more > summary { min-height:2.25rem; display:flex; align-items:center; gap:0.375rem; padding:0.25rem 0; color:var(--muted); font-size:0.8125rem; font-weight:800; cursor:pointer; }
.mu-behind-more > summary::-webkit-details-marker { display:none; }
.mu-behind-more > summary::before { content:"▸"; display:inline-block; font-size:0.75em; transition:rotate var(--dur-base) var(--ease-out); }
.mu-behind-more[open] > summary::before { rotate:90deg; }
@media (prefers-reduced-motion: reduce) { .mu-behind-more > summary::before { transition:none; } }
.mu-behind-more > summary:hover { color:var(--ink); }
.mu-behind-more > summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-control); }
.mu-behind-more > .mu-behind-game:first-of-type { margin-top:0.125rem; }
/* An earlier game: its heading (an h4) is its summary (a chevron, then "Wk 9 · vs DAL", the tally at
   the right); open, it shows the players as the latest games do. */
.mu-behind-more > .mu-behind-game { margin-top:0; }
details.mu-behind-game > summary { display:block; cursor:pointer; list-style:none; }
details.mu-behind-game > summary::-webkit-details-marker { display:none; }
details.mu-behind-game > summary > .mu-behind-head { min-height:2rem; box-sizing:border-box; align-items:center; }
details.mu-behind-game > summary .mu-behind-head > span:first-child::before { content:"▸"; display:inline-block; margin-right:0.375rem; color:var(--muted); font-size:0.75em; transition:rotate var(--dur-base) var(--ease-out); }
details.mu-behind-game[open] > summary .mu-behind-head > span:first-child::before { rotate:90deg; }
@media (prefers-reduced-motion: reduce) { details.mu-behind-game > summary .mu-behind-head > span:first-child::before { transition:none; } }
details.mu-behind-game > summary:hover { background:var(--surface-raised); }
details.mu-behind-game > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-1px; border-radius:var(--r-control); }
details.mu-behind-game[open] > ul { margin-bottom:0.375rem; }
.mu-next { display:flex; flex-direction:column; gap:0.75rem; padding:0.875rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.mu-next-head { display:flex; flex-direction:column; gap:0.375rem; }
.mu-next-kicker { color:var(--accent); font:700 0.6875rem var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; }
.mu-next-team { display:flex; align-items:center; gap:0.5rem; font-weight:800; }
.mu-next-team .opponent-badge { width:1.75rem; height:1.75rem; }
.mu-next-team .team-name-link { color:var(--ink); }
.mu-next-player { display:flex; flex-direction:column; gap:0.5rem; padding-top:0.625rem; border-top:2px solid var(--line); }
.mu-next-player .overview-player-identity { display:flex; align-items:center; gap:0.625rem; min-width:0; }
.mu-next-player .overview-player-identity > span { min-width:0; display:flex; flex-direction:column; }
.mu-next-player .profile-name-button { padding:0; border:0; background:none; color:var(--ink); font:800 1.0625rem/1.2 var(--font-display); text-align:left; cursor:pointer; }
.mu-next-player .profile-name-button:hover { color:var(--accent); }
.mu-next-player small { color:var(--muted); font-size:0.75rem; }
.mu-next-player .overview-upcoming-picker { min-width:0; }
/* The actions end the panel's content; nothing floats over the Next up card. */
.mu-drill > * { flex-shrink:0; }
.mu-drill-actions { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.875rem; margin-top:auto; padding-top:0.875rem; border-top:2px solid var(--line); }
.mu-drill-actions .ar-btn.primary { flex:1 1 100%; }
.mu-drill-actions .mu-full { flex:0 1 auto; }
.mu-drill-actions .mu-team-link { color:var(--accent); font-size:0.8125rem; font-weight:800; text-decoration:none; }
.mu-drill-actions .mu-team-link:hover { text-decoration:underline; }
/* An empty heatmap (no weeks or no search matches) hides the stale panel. */
.mu-layout:has(#overview > .empty-state) { grid-template-columns:minmax(0,1fr); }
.mu-layout:has(#overview > .empty-state) .mu-drill { display:none; }

/* ---- Narrower screens: panel under the heatmap ---- */
@media (max-width:68em) {
  .mu-layout { grid-template-columns:minmax(0,1fr); }
  .mu-drill { position:static; max-height:none; overflow:visible; }
}
/* Phones: the column picker (studio-positions.js, UI-55). One position's columns at a
   time; "Alt lines" swaps in that position's alt-line columns below 30em. */
.mu-pos-picker { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; margin:0 0 0.625rem; }
.mu-pos-picker[hidden] { display:none; }
.mu-pos-chip { min-width:3rem; height:2.5rem; padding:0 0.875rem; border:2px solid var(--line); border-radius:var(--r-data); background:var(--bg); color:var(--muted);
  font:800 0.875rem/1 var(--font-body); cursor:pointer; transition:background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.mu-pos-chip:hover { color:var(--ink); border-color:var(--muted); }
.mu-pos-chip[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); box-shadow:none; }
.mu-pos-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* Each position in its own colour (UI-387; StudioKit.posChip): the label in the position's
   light tint on the page ground, filled with the position colour when picked (dark label,
   5.8:1 for QB and higher for the rest). */
html body .mu-pos-chip[data-position] { background:var(--bg); color:var(--position-ink); border-color:var(--position-bg); }
html body .mu-pos-chip[data-position]:hover { color:var(--position-ink); border-color:var(--position-color); }
html body .mu-pos-chip[data-position][aria-pressed=true] { background:var(--position-color); color:var(--bg); border-color:var(--edge); }
/* NBA's buttons the same way, on arcade.css's [data-sport=nba][data-pos] colours. The
   extra .pos-chip outranks arcade's tinted NBA chip, so a picked button reads as picked. G and F
   blend two colours: the dark tints as the border at rest, the bright ones on hover and as the
   fill when picked (dark label, 5.4:1 on PG pink, 8:1 or better on the rest). */
html body .mu-pos-chip.pos-chip[data-sport=nba][data-pos] { background:var(--bg); color:var(--position-ink); border-color:var(--position-bg); }
html body .mu-pos-chip.pos-chip[data-sport=nba][data-pos]:hover { color:var(--position-ink); border-color:var(--position-color); }
html body .mu-pos-chip.pos-chip[data-sport=nba][data-pos][aria-pressed=true] { background:var(--position-color); color:var(--bg); border-color:var(--edge); }
html body .mu-pos-chip.pos-chip[data-sport=nba]:is([data-pos=G], [data-pos=F]) { color:var(--ink); border-color:transparent;
  background:linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, var(--position-fill)) border-box; }
html body .mu-pos-chip.pos-chip[data-sport=nba]:is([data-pos=G], [data-pos=F]):hover { background:linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg, var(--position-edge)) border-box; }
html body .mu-pos-chip.pos-chip[data-sport=nba]:is([data-pos=G], [data-pos=F])[aria-pressed=true] { color:var(--bg); border-color:var(--edge);
  background:linear-gradient(90deg, var(--position-edge)) padding-box; }
/* The opponent box score's position filter (#matchupDialog, layouts.css) the same way (UI-444):
   tinted label at rest, filled with the position colour when pressed. "All" stays neutral. */
html body #matchupDialog .position-filters button[data-position] { color:var(--position-ink); }
html body #matchupDialog .position-filters button[data-position][aria-pressed=true] { background:var(--position-color); color:var(--bg); }
.mu-pos-alt { margin-left:auto; border-style:dashed; }
.mu-pos-alt[aria-pressed=true] { border-style:solid; }
@media (prefers-reduced-motion: reduce) { .mu-pos-chip { transition:none; } }
@media (max-width:48.125em) {
  /* Only the picked columns render, so they share the width; the team column stays pinned. */
  html body[data-layout] #overview .mu-heatmap.is-picked .overview-column-headings th { min-width:0; }
  html body[data-layout] #overview .mu-heatmap.is-picked thead th.row-label { position:sticky; left:0; z-index:3; }
  .mu-pos-picker { gap:0.25rem; }
  .mu-pos-chip { min-width:2.5rem; padding:0 0.625rem; }
  /* Four or five columns under 30em (QB alt lines): a narrower team column and tighter
     cells, with a tie's "T-" stacked over the rank so every column fits. */
  #overview .mu-heatmap.is-tight { --overview-team-width:5.5rem; }
  #overview .mu-heatmap.is-tight .mu-row-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:0.75rem; }
  #overview .mu-heatmap.is-tight .overview-team > span:last-child { max-width:100%; }
  html body[data-layout] #overview .mu-heatmap.is-tight :is(td, .overview-column-headings th) { padding-left:2px; padding-right:2px; }
  html body[data-layout] #overview .mu-heatmap.is-tight .overview-column-headings th.overview-alt-start { padding-left:0.5rem; }
  #overview .mu-heatmap.is-tight .overview-sort > span { font-size:0.6875rem; }
  #overview .mu-heatmap.is-tight td .overview-cell { padding:0; }
  #overview .mu-heatmap.is-tight td .overview-cell .summary-value { display:flex; flex-direction:column; align-items:center; font-size:0.75rem; line-height:1.05; }
  #overview .mu-heatmap.is-tight .mu-tie { font-size:0.5625rem; }
  html body[data-layout] #overview .mu-heatmap.is-picked thead th.mu-pace-head { min-width:0; }
  html body[data-layout] #overview .mu-heatmap.is-picked td.mu-pace { padding-right:3px; }
  #overview .mu-heatmap.is-picked .mu-pace-cell b { font-size:0.75rem; }
}
@media (max-width:48.125em) {
  html body[data-active-view=overview] .notebook-main { grid-template-columns:minmax(0,1fr); }
  html body[data-active-view=overview] .notebook-controls { grid-row:2; grid-column:1/-1; }
  html body[data-active-view=overview] #overviewControls { grid-row:3; grid-column:1/-1; justify-self:stretch; }
  html body[data-active-view=overview] .notebook-main:has(> .guide-offer) #overviewControls { grid-row:4; }
  html body[data-active-view=overview] .overview-search input { width:100%; }
  html body[data-layout] .mu-nav { margin-bottom:0.75rem; }
  .mu-nav-title h2 { font-size:1.875rem; }
  .mu-nav-title p { font-size:0.8125rem; }
  /* One row: tight enough that all five chips fit at 360px; on a narrower screen the row
     scrolls sideways and fades at the edge (studio-matchups-nav.js sets .is-scrollable). */
  html body[data-layout] .mu-views { width:100%; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; gap:0.25rem; padding:0.125rem; }
  html body[data-layout] .mu-views.is-scrollable { padding-right:1.5rem;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); }
  html body[data-layout] .mu-views a { height:2.5rem; padding:0 0.625rem; font-size:0.8125rem; }
  #overview .mu-heatmap .mu-row-meta { white-space:normal; line-height:1.2; }
  #overview .mu-heatmap .overview-team { height:auto; min-height:2.875rem; padding:0.125rem 0.25rem; }
  .mu-heat { padding:0.75rem; border-radius:var(--r-card); }
  .mu-heat-head h2 { font-size:1.125rem; }
  html body[data-layout] #overview .mu-heatmap tbody .row-label { min-width:7.25rem; width:7.25rem; }
  #overview .mu-heatmap .overview-team { gap:0.375rem; padding:0 0.25rem; }
  /* The badge stays, smaller, so a row reads as a club at a glance (UI-213/AUD-UI-027). */
  #overview .mu-heatmap .overview-team-badge { width:1.5rem; height:1.5rem; flex:0 0 1.5rem; }
  html body[data-layout] #overview .mu-heatmap .overview-column-headings th { min-width:4.25rem; }
  .mu-drill { padding:0.875rem; border-radius:var(--r-card); }
}
/* Small phones: the five short chips share the row (full names stay in their titles). At a
   large text size (200%) they keep their labels' width and the row scrolls sideways,
   instead of squeezing the chips over each other (UI-261). The row is a container measured
   in its own text size, so the chips squeeze a little as before only while it holds 15em
   (any phone at the default size). */
@media (max-width:30em) {
  .mu-views { container:mu-views / inline-size; }
  html body[data-layout] .mu-views a { flex:1 0 auto; justify-content:center; padding:0 0.375rem; font-size:0.75rem; }
}
@container mu-views (min-width:15em) {
  html body[data-layout] .mu-views a { flex-shrink:1; min-width:0; }
}
/* The drill under the heatmap at 320px with 200% text (UI-326): the matchup pill beside the
   next player ("SF · Tough 28th vs line") wraps inside the panel, each signal chip puts its
   figure under its title (not one letter per line), and in "Who's behind it" the player
   takes the whole row with his figures under it, and his name wraps there rather than being
   cut to an ellipsis, so a surname like "Stafford" fits beside the face instead of widening the page. Measured in the drill's own text size, so the default size never reaches it.
   UI-676: the verdict chip ("No clear edge") wraps inside the panel too. */
.mu-drill { container:mu-drill / inline-size; }
@container mu-drill (max-width:14em) {
  .lk-next-who .ar-mu { max-width:100%; height:auto; min-height:1.375rem; padding-block:0.125rem; flex-wrap:wrap; white-space:normal; }
  .mu-drill .lk-verdict .ar-verdict { max-width:100%; height:auto; min-height:1.625rem; padding-block:0.125rem; white-space:normal; }
  .mu-drill .lk-next-signals .ar-sig { height:auto; flex-wrap:wrap; }
  .mu-drill .mu-behind-row > .mu-behind-who { flex-basis:100%; }
  .mu-behind-who .profile-name-button { white-space:normal; overflow-wrap:anywhere; }
}
/* UI-435: with the browser's text set to 200% a 320 phone's drill holds 6.6em (7.5em at 200%
   page zoom), less than "breakdown" plus the button's 1.125rem sides: the buttons take the row
   with slimmer sides. 390 phones at 200% hold 10em and keep the default. */
@container mu-drill (max-width:8em) {
  .mu-drill-actions .ar-btn { flex:1 1 100%; max-width:100%; padding-inline:0.5rem; }
}
/* The same Next up block on the Matchups cards, and the form figure in both (UI-305): on a
   phone with 200% text the pill ("CAR · Soft 1st vs line") and the signal chips wrap inside
   the card, and "2/3 · line 95.5" drops under the bars instead of running past the edge. At
   the default size a card's Next up holds at least 13.8em; at 200% on a 320-390 phone,
   7.4-9.9em. The container is the Next up block, not the card, so the cards' shared rows
   don't move. */
.lk-card > .lk-next { container:lk-next / inline-size; }
@container lk-next (max-width:10em) {
  .lk-next-who .ar-mu { max-width:100%; height:auto; min-height:1.375rem; padding-block:0.125rem; flex-wrap:wrap; white-space:normal; }
  .lk-card .lk-next-signals .ar-sig { height:auto; flex-wrap:wrap; }
  .lk-next-chart { flex-wrap:wrap; }
}
@container mu-drill (max-width:14em) {
  .lk-next-chart { flex-wrap:wrap; }
}

/* ------------------------------------------------------------------------------------
   Top leaks (studio-leaks.js): the Matchups landing. Five leak cards (band, count, Next
   up evidence), one Why panel, and Roles on the move as percentile bars. The Next up
   row (.lk-next) is shared with the heatmap panel and the Defense page.
   ------------------------------------------------------------------------------------ */
html body[data-layout][data-active-view=leaks] .page-heading,
html body[data-layout][data-active-view=lab] .page-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.leaks-page { display:grid; gap:1.75rem; min-width:0; }
:is(.leaks-page, .dp, .mu-drill) .text-button { padding:0; border:0; background:none; color:var(--ink); font:800 0.875rem var(--font-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
:is(.leaks-page, .dp, .mu-drill) .text-button:hover { color:var(--accent); }
.lk-note { display:flex; align-items:center; gap:0.625rem; margin:0; padding:0.625rem 1rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--thin-bg); color:var(--ink); font-size:0.875rem; line-height:1.35; }
.lk-note > span:first-child { color:var(--thin); font-weight:800; }
.lk-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:0.5rem 1.5rem; flex-wrap:wrap; }
.lk-section-head h2 { margin:0; font:800 1.75rem/1.1 var(--font-display); letter-spacing:-0.025em; }
.lk-section-head p { margin:0.3125rem 0 0; color:var(--muted); font-size:0.9375rem; max-width:52rem; }
.lk-head-links { display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; }
/* NBA Games window chips (Props' History control) on Top leaks and the Heatmap; an off chip stays focusable for its tip. */
:is(.lk-window, .mu-window) { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.625rem; margin-top:0.75rem; }
:is(.lk-window, .mu-window) small { color:var(--muted); font-size:0.8125rem; }
/* Off (too few games yet): a dimmer label that still clears 4.5:1 on --bg and --surface, inside a
   dashed edge, the Heatmap's mark for a thin sample. Opacity would drop the label to about 2.5:1. */
:is(.lk-window, .mu-window) .percentage-seg button[aria-disabled=true],
:is(.lk-window, .mu-window) .percentage-seg button[aria-disabled=true]:hover { color:color-mix(in srgb, var(--muted) 75%, var(--bg)); font-weight:600; cursor:not-allowed;
  outline:1px dashed var(--line); outline-offset:-3px; }
:is(.lk-window, .mu-window) .percentage-seg button[aria-disabled=true]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Top leaks: the Softest · Toughest switch and the window chips share a row; the chips drop under
   the switch only when they can't fit whole (zero basis + nowrap: the row breaks at the chips' width). */
.lk-controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:0.375rem 0.625rem; margin-top:0.75rem; }
.lk-controls > .lk-window { margin-top:0; }
.lk-controls > .lk-window:not(.lk-sides) { flex:1 1 0; }
.lk-controls .percentage-seg { flex-wrap:nowrap; }
@media (max-width:30em) {
  .lk-controls { gap:0.375rem; }
  .lk-controls .percentage-filter-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .lk-controls .percentage-seg button { min-width:44px; padding:0 0.375rem; font-size:0.75rem; }
  .lk-controls .lk-window small { flex-basis:100%; }
}
.lk-legend { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.5rem; margin:0.875rem 0 1rem; color:var(--muted); font-size:0.8125rem; }
.lk-legend .ar-label { margin-right:0.25rem; color:var(--ink); }
.lk-legend-sep { width:2px; height:1rem; margin:0 0.25rem; background:var(--line); }
.lk-legend { column-gap:0.875rem; }
.lk-legend-item { display:inline-flex; align-items:center; gap:0.375rem; }
/* Narrow screens: the legend stays a wrapping row; one that sits in a section head (the
   Defense page) drops under the heading instead of standing beside it. */
@media (max-width:48.125em) { .lk-legend-sep { display:none; } .lk-section-head > .lk-legend { flex:1 1 100%; } }
/* Top leaks on phones: the legend folds behind a "Key" disclosure (UI-70b). */
.leaks-page .text-button.lk-key { display:none; }
@media (max-width:37.5em) {
  .leaks-page .text-button.lk-key { display:inline-flex; align-items:center; gap:0.375rem; }
  .leaks-page .lk-key-caret { display:inline-block; font-size:0.75em; transition:rotate var(--dur-base) var(--ease-out); }
  .leaks-page .lk-key[aria-expanded=true] .lk-key-caret { rotate:180deg; }
  #leaks .lk-legend:not(.is-open) { display:none; }
}
@media (prefers-reduced-motion: reduce) { .leaks-page .lk-key-caret { transition:none; } }
/* Next up when every lined player reads Against: the row is the matchup, not a pick (UI-56). */
.lk-next-label { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; }
.lk-next-label .ar-label { margin:0; }
.lk-only { display:inline-flex; align-items:center; height:1.375rem; padding:0 0.5rem; border:2px dashed var(--muted); border-radius:var(--r-data); color:var(--muted); font:700 0.6875rem/1 var(--font-body); white-space:nowrap; }
/* A Tough spot's Under is still not an edge: one quiet line under the pick, the early note's mark. */
.lk-caveat { margin:0; color:var(--muted); font-size:0.75rem; line-height:1.3; }
.lk-caveat::before { content:"○ "; color:var(--thin); font-weight:800; }
.lk-caveat:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-data); }
.ar-mu.lk-band { height:1.625rem; padding:0 0.5625rem; box-shadow:inset 0 0 0 2px currentColor; font-size:0.75rem; }
.ar-mu.lk-band > span[aria-hidden] { font-size:0.625rem; }
/* auto-fit: at wide widths the cards share the whole row rather than leave empty tracks. */
.lk-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap:0.875rem; }
.lk-grid > .lk-why { grid-column:1 / -1; margin-top:0; }
.lk-why { scroll-margin-top:calc(var(--header-height) + 0.75rem); scroll-margin-bottom:0.75rem; }
.lk-why-head h3:focus { outline:none; }
.lk-why-head h3:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--r-data); }
/* Each card spans two shared rows (summary, Next up), so the Next up rows line up across a row of cards. */
@supports (grid-template-rows:subgrid) {
  .lk-grid > .lk-card { grid-row:span 2; display:grid; grid-template-rows:subgrid; row-gap:0; }
}
.lk-card { min-width:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-out); }
.lk-card.is-open { border-color:var(--ink); }
.lk-card-top { display:flex; flex-direction:column; align-items:flex-start; gap:0.4375rem; width:100%; padding:0.875rem 1rem 0.75rem; border:0; border-bottom:2px solid var(--line);
  background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:background-color var(--dur-fast) var(--ease-out), scale var(--dur-instant) var(--ease-press); }
.lk-card-top:hover { background:var(--surface-raised); }
.lk-card-top:active { scale:calc(1 - 0.015 * var(--move)); }
.lk-card-top:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.lk-card-title { display:flex; align-items:center; gap:0.625rem; width:100%; min-width:0; }
.lk-card-name { min-width:0; display:flex; flex-direction:column; gap:0.0625rem; }
.lk-card-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 1.25rem/1.15 var(--font-display); letter-spacing:-0.02em; }
.lk-card-name > span { color:var(--ink); font:700 0.875rem/1.2 var(--font-body); }
.lk-logo { width:2.25rem; height:2.25rem; flex:0 0 auto; display:grid; place-items:center; border-radius:var(--r-control); background:var(--bg); border:2px solid var(--line); overflow:hidden; }
.lk-logo img { width:100%; height:100%; object-fit:contain; padding:2px; }
.lk-card-sub { color:var(--muted); font-size:0.8125rem; }
.lk-card-pace { white-space:nowrap; }
.lk-count { font-size:0.875rem; }
.lk-count b { font-weight:800; }
.lk-frac { margin-left:0.25rem; color:var(--muted); font:700 0.75rem var(--font-mono); white-space:nowrap; }
:is(.lk-card, .dp, .mu-drill) .ar-dot.miss { background:var(--bad); }
:is(.lk-card, .dp, .mu-drill) .ar-dot.hit { background:var(--good); }
/* A small round headshot beside a player name (UI-161): Next up, Roles on the move, the
   heatmap drill's "Who's behind it" and the Defense page. Initials show until the photo
   loads (players.js adds .has-photo) and stay if every photo URL fails. */
.mu-face { --face:2rem; position:relative; flex:0 0 var(--face); width:var(--face); height:var(--face); padding:0; border:0; border-radius:var(--r-card); background:none; cursor:pointer; }
html body[data-layout] .mu-face .player-avatar { position:relative; display:grid; place-items:center; box-sizing:border-box; width:100%; height:100%; overflow:hidden; border:2px solid var(--line); border-radius:var(--r-control); background:var(--surface-raised); box-shadow:none; color:var(--muted); font:800 0.625rem var(--font-body); }
html body[data-layout] .mu-face .player-headshot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.mu-face .has-photo .avatar-initials { visibility:hidden; }
.mu-face:hover .player-avatar { border-color:var(--accent); }
.lk-next-who .mu-face { --face:2.25rem; }
.mu-lead .lk-next-who .mu-face { --face:2.5rem; }
.lk-next { min-width:0; display:flex; flex-direction:column; gap:0.5rem; padding:0.75rem 1rem 1rem; flex:1; }
.lk-next.is-empty { justify-content:center; }
.lk-muted { margin:0; color:var(--muted); font-size:0.8125rem; }
/* Started · results pending (UI-421): on Top leaks a card whose slate game has kicked off
   keeps its Started note and the next game's Next up in one block, the card's second shared
   row (.lk-card's two above). The Defense page's header carries its own note. */
.lk-card > .lk-card-next { min-width:0; display:flex; flex-direction:column; }
.lk-card-next > .lk-next { container:lk-next / inline-size; }
.lk-card-next > .lk-started { flex:0 0 auto; padding-bottom:0.25rem; }
.lk-card-next > .lk-started + .lk-next { padding-top:0.5rem; }
.lk-next-who { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; }
.lk-name { padding:0; border:0; background:none; color:var(--ink); font:800 1rem/1.2 var(--font-display); text-align:left; cursor:pointer; }
.lk-name:hover { color:var(--accent); }
.lk-next-who small { color:var(--muted); font-size:0.75rem; }
.lk-next-chart { display:flex; align-items:center; gap:0.625rem; }
.lk-form { display:flex; flex-direction:column; line-height:1.15; }
.lk-form b { font:700 0.9375rem var(--font-mono); }
.lk-form small { color:var(--muted); font:400 0.6875rem var(--font-mono); white-space:nowrap; }
.lk-next-signals .ar-sig { height:1.4375rem; padding:0 0.375rem; font-size:0.6875rem; }
.lk-verdict { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.5rem; margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.35; }
.lk-pick { display:flex; margin-top:auto; }
html body[data-layout] .lk-pick .bet-side.ar-price { flex:1 1 auto; min-width:0; min-height:0; height:2.5rem; border:1px solid var(--line); border-radius:var(--r-control); box-shadow:none; font:700 0.875rem var(--font-mono); flex-direction:row; align-items:center; justify-content:center; gap:0.5rem; padding:0 0.625rem; }
html body[data-layout] .lk-pick .bet-side.ar-price:not([aria-pressed=true]) { background:var(--surface-raised); color:var(--ink); }
.lk-pick .ar-price > * { margin:0; }
.lk-pick .ar-price > .bet-side-label { margin-right:-0.25rem; font:600 0.75rem/1 var(--font-body); opacity:0.78; }
.lk-pick .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; }
.lk-pick small { color:var(--muted); font-size:0.75rem; }
.lk-why { margin-top:0.875rem; }
.lk-why-inner { padding:1.125rem 1.25rem; background:var(--surface); border:2px solid var(--ink); border-radius:var(--r-card); box-shadow:none; }
.lk-why-head { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 0.75rem; margin-bottom:0.875rem; }
.lk-why-head h3 { margin:0; font:800 1.25rem/1.2 var(--font-display); }
.lk-why-body { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:1rem 1.5rem; align-items:start; }
.lk-facts { list-style:none; margin:0; padding:0; display:grid; gap:0.625rem; }
.lk-facts li { padding:0.125rem 0 0.125rem 0.75rem; font-size:0.9375rem; line-height:1.4; animation:ar-rise var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 40ms * var(--move)); }
.lk-facts li.tone-for { border-color:var(--good); }
.lk-facts li.tone-thin { border-color:var(--thin); }
.lk-facts li.tone-against { border-color:var(--bad); }
.lk-fact-count { color:var(--muted); font:700 0.8125rem var(--font-mono); white-space:nowrap; }
.lk-why-evidence { display:grid; gap:0.625rem; min-width:0; }
.lk-why-evidence .ar-sig-row { grid-template-columns:1rem 4.5rem minmax(0, 1fr); font-size:0.8125rem; }
.lk-why-evidence .ar-sig-row .ar-sig-tone { display:none; }
/* UI-317 (from UI-298): on a phone the kit puts the sentence under the title in the second
   column, so that column takes the rest of the row, not 4.5rem (~3 words a line). Leaks and
   the Defense page's Why both use it. */
@media (max-width:40em) { .lk-why-evidence .ar-sig-row { grid-template-columns:1rem minmax(0, 1fr); } }
.lk-why-links { display:flex; flex-direction:column; align-items:flex-start; gap:0.625rem; padding-left:1.25rem; border-left:2px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .lk-facts li { animation:none; } .lk-card-top, .lk-card { transition:none; } }
.lk-role-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap:0.875rem; margin-top:0.875rem; }
.lk-role { min-width:0; overflow-x:clip; display:flex; flex-direction:column; gap:0.5rem; padding:0.875rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.lk-role header { display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; }
.lk-role-who { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.lk-role-copy { display:flex; flex-wrap:wrap; align-items:center; gap:0.125rem 0.5rem; min-width:0; }
.lk-role-who .mu-face { --face:2.25rem; }
.lk-role-who small { color:var(--muted); font-size:0.75rem; font-weight:700; }
.lk-role-score { display:flex; flex-direction:column; align-items:flex-end; gap:0.125rem; margin-left:auto; text-align:right; }
.lk-role-score small { color:var(--muted); font-size:0.6875rem; line-height:1.2; white-space:nowrap; }
.lk-role header { flex-wrap:wrap; }
.lk-role-score b { color:var(--ink); font:700 0.875rem var(--font-mono); white-space:nowrap; }
.lk-trend { margin:0; font-size:0.875rem; }
.lk-trend.is-up b { color:var(--good); } .lk-trend.is-down b { color:var(--bad); }
.lk-role .ar-label { margin:0.25rem 0 0; }
.lk-pbar { display:grid; grid-template-columns:5.5rem minmax(0, 1fr) 2.75rem; align-items:center; gap:0.625rem; min-height:1.875rem; font-size:0.8125rem; }
.lk-pbar-value { text-align:right; font:700 0.8125rem var(--font-mono); }
.lk-pbar-track { position:relative; height:0.375rem; margin:0 0.625rem; border-radius:var(--r-data); background:linear-gradient(90deg, var(--bad-bg), var(--surface-raised) 40% 60%, var(--good-bg)); }
.lk-pbar-was { position:absolute; top:50%; left:calc(var(--was) * 1%); width:1rem; height:1rem; translate:-50% -50%; border:2px dashed var(--muted); border-radius:var(--r-data); }
.lk-pbar-pos { position:absolute; inset:0; transform:translateX(calc(var(--p) * 1%)); animation:lk-slide var(--dur-slow) var(--spring-soft) both; }
@keyframes lk-slide { from { transform:translateX(calc((var(--was) + (var(--p) - var(--was)) * (1 - var(--move))) * 1%)); } }
.lk-pbar-dot { position:absolute; top:50%; left:0; min-width:1.625rem; height:1.625rem; translate:-50% -50%; display:grid; place-items:center; padding:0 0.25rem; border-radius:50%; border:1px solid var(--line);
  background:var(--surface-strong); color:var(--ink); font:700 0.6875rem var(--font-mono); }
.lk-pbar-dot.is-good { background:var(--good); color:var(--accent-ink); }
.lk-pbar-dot.is-bad { background:var(--bad); color:var(--accent-ink); }
.lk-pbar-scale { display:grid; grid-template-columns:5.5rem repeat(3, minmax(0, 1fr)) 2.75rem; gap:0 0.625rem; margin:0; color:var(--muted); font-size:0.6875rem; }
.lk-pbar-scale span:nth-child(1) { grid-column:2; padding-left:0.875rem; } .lk-pbar-scale span:nth-child(2) { text-align:center; } .lk-pbar-scale span:nth-child(3) { text-align:right; padding-right:0.875rem; }
@media (prefers-reduced-motion: reduce) { .lk-pbar-pos { animation:none; } }
/* Large text (UI-261): each role card is a container measured in its own text size, so this
   applies only when a card holds under 14em (200% text on a phone, 320 to 390), never at the
   default size (a card is never under 21em there). The score line wraps under the name, and
   each bar's label takes its own line over the bar and value. The value column is as wide as
   "100%" (so the bars line up) and the bar keeps the rest. The Poor/Avg/Great scale spreads
   across the card's full width (UI-418): beside the value column it ran "AvgGreat" together.
   The .lk-role prefix outranks the phone rules for .lk-pbar below, which come later. */
.lk-role { container-type:inline-size; }
@container (max-width:14em) {
  .lk-role-score { margin-left:0; align-items:flex-start; text-align:left; }
  .lk-role-score small { white-space:normal; }
  .lk-role .lk-pbar { grid-template-columns:minmax(0, 1fr) auto; }
  .lk-role .lk-pbar-value { min-width:4ch; }
  .lk-role .lk-pbar > :first-child { grid-column:1 / -1; }
  .lk-role .lk-pbar-scale { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 0.5rem; }
  .lk-role .lk-pbar-scale span { padding:0; }
}
@media (max-width:68em) {
  .lk-why-body { grid-template-columns:minmax(0, 1fr); }
  .lk-why-links { padding-left:0; border-left:0; }
}
@media (max-width:48.125em) {
  .lk-section-head h2 { font-size:1.375rem; }
  .lk-why-inner { padding:0.875rem; }
  .lk-pbar { grid-template-columns:5.25rem minmax(0, 1fr) 2.75rem; }
  .lk-pbar-scale { grid-template-columns:5.25rem repeat(3, minmax(0, 1fr)) 2.75rem; }
}

/* ---- Heatmap v3: three named bands with the rank inside; faded = 1-2 games ---- */
.mu-heat-head > div { min-width:0; }
.mu-heat-sub { margin:0.25rem 0 0; color:var(--muted); font-size:0.8125rem; }
/* The heatmap's on/off toggles (UI-373): chips like the position chips, pressed =
   filled with a check. The check box is always there (empty when off), so pressing a chip never
   changes its width and nothing around it moves. aria-pressed carries the state. */
.mu-switch { display:inline-flex; align-items:center; gap:0.5rem; min-height:2.25rem; max-width:100%; padding:0.25rem 0.75rem; border:2px solid var(--line); border-radius:var(--r-data); background:var(--bg); color:var(--muted); font:800 0.8125rem var(--font-body); text-align:left; cursor:pointer; }
.mu-switch:hover:not(:disabled, [aria-pressed=true]) { color:var(--ink); border-color:var(--muted); }
.mu-switch i { display:inline-grid; place-items:center; flex:none; width:1rem; height:1rem; box-sizing:border-box; border:2px solid currentColor; border-radius:var(--r-control); font:900 0.6875rem/1 var(--font-body); font-style:normal; }
.mu-switch[aria-pressed=true] { background:var(--selected-bg); color:var(--ink); border-color:var(--accent); }
.mu-switch[aria-pressed=true] i::after { content:"✓"; }
.mu-switch:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* By role (UI-112): disabled, with a short note, when the season has no depth-chart roles. */
.mu-switch:disabled { cursor:not-allowed; opacity:0.55; }
.mu-role { display:inline-flex; align-items:center; gap:0.5rem; }
.mu-role-note { color:var(--muted); font:700 0.75rem var(--font-body); white-space:nowrap; }
.mu-heat-tools { display:flex; align-items:center; gap:0.5rem 0.75rem; flex-wrap:wrap; }
#overview .mu-heatmap td[class*=band-] .overview-cell { background:var(--surface-raised); color:var(--muted); border:1px solid var(--line); background-image:none; }
#overview .mu-heatmap td.band-soft .overview-cell { background:var(--good-bg); color:var(--good); box-shadow:inset 0 0 0 1px var(--good); }
#overview .mu-heatmap td.band-tough .overview-cell { background:var(--bad-bg); color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad); }
#overview .mu-heatmap td.band-neutral .overview-cell { color:var(--ink); }
/* Thin samples keep full-contrast text: 2 games = a dashed edge, 1 game = dashed and hatched. */
#overview .mu-heatmap td:is(.sample-light, .sample-thin) .overview-cell { border-style:dashed; border-color:var(--muted); }
#overview .mu-heatmap td.sample-thin .overview-cell { background-image:repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 14%, transparent) 0 2px, transparent 2px 7px); }
#overview .mu-heatmap td .overview-cell[aria-pressed=true] { border:3px solid var(--ink); }
#overview .mu-heatmap td .overview-cell .summary-value { font-size:0.875rem; }
/* The cells fade and scale in along a diagonal (UI-170): --d is row + column (the team names
   are column 0), 12ms apart, the delay capped at 33 steps (~400ms) so a 32-row grid doesn't
   take seconds. Once only: studio-betslip.js marks each cell .ar-played when its fade ends or
   is cut short (arcade.css keeps it still); a redraw mid-fade (the data's second pass) carries
   on from --heat-t, the time already played; every redraw after that (a toggle, sort,
   search) is .ar-settled (studio-positions.js heatMotion). Off with reduced motion. */
#overview .mu-heatmap :is(td .overview-cell, .row-label .overview-team) { animation:mu-heat-in var(--dur-slow) var(--ease-out) both; animation-delay:calc(min(var(--d, 0), 33) * 12ms * var(--move) - var(--heat-t, 0ms)); }
#overview .mu-heatmap.ar-settled :is(td .overview-cell, .row-label .overview-team) { animation:none; }
@keyframes mu-heat-in { from { opacity:0; scale:calc(1 - 0.15 * var(--move)); } }
@media (prefers-reduced-motion: reduce) { #overview .mu-heatmap :is(td .overview-cell, .row-label .overview-team) { animation:none; } }
/* A plain name since UI-644 hid the Defense page it opened: no pointer or hover underline (UI-677). */
#overview .mu-heatmap .mu-row-name { color:var(--ink); font:800 0.875rem/1.15 var(--font-body); text-align:left; white-space:nowrap; }
.mu-drill-top .lk-band { height:1.75rem; }
.mu-drill-count { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0.5rem; margin:0; font-size:0.9375rem; font-weight:700; }
.mu-drill-sub { margin:0; color:var(--muted); font-size:0.8125rem; line-height:1.4; }
.mu-drill-sub .tone-over { color:var(--good); } .mu-drill-sub .tone-under { color:var(--bad); }
.mu-lead .lk-next { padding:0.875rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.mu-lead .lk-name { font-size:1.25rem; }
/* The side panel is narrower than a Top leaks card: a step smaller keeps the caveat one line at 390. */
.mu-lead .lk-caveat { font-size:0.6875rem; }
/* The drill's one tracking line (UI-553): the flex gap already spaces it under the lines. */
.mu-next > .tracking-only { margin:0; }
.mu-next-more > summary { cursor:pointer; color:var(--muted); font-size:0.8125rem; font-weight:800; }
.mu-next-more[open] > summary { margin-bottom:0.625rem; }

/* ---- Weeks popover (Heatmap, Defense boards): readable, tappable range buttons ---- */
html body[data-layout] #comparisonWeeks .week-heading .text-button { min-height:2.5rem; display:inline-flex; align-items:center; padding:0 0.375rem; font-size:0.8125rem; white-space:nowrap; }

/* ---- Phones: 40px tap targets, and a result column that fits its label ---- */
@media (max-width:48em) {
  :is(.leaks-page, .dp, .mu-drill) .text-button,
  .mu-drill-actions .mu-team-link { min-height:2.5rem; display:inline-flex; align-items:center; }
  .mu-close { width:2.5rem; height:2.5rem; }
  .lk-why-links { gap:0; }
  .mu-behind-row { padding:0.25rem 0; }
  .mu-behind-more > summary { min-height:2.5rem; }
  /* A folded game: about 40px to tap, a little shorter than the other phone targets so the
     list of earlier games stays compact. */
  details.mu-behind-game > summary > .mu-behind-head { min-height:2.25rem; }
  .mu-behind-sort.ar-seg button { height:2.25rem; }
}

/* Unlined observations are context, separate from the ranked matched comparison. */
#overview .mu-heatmap td .mu-unlined { max-width:100%; color:inherit; font:400 0.625rem/1.1 var(--font-mono); white-space:normal; overflow-wrap:anywhere; }

.mu-group-note { flex-basis:100%; color:var(--muted); font-size:0.75rem; }
.mu-group-note[hidden] { display:none; }
html body[data-layout] #overview .mu-heatmap .mu-game-heading th { position:static; padding:0.625rem 0.375rem 0.375rem; border-top:1px solid var(--line); color:var(--muted); background:var(--surface); font:700 0.75rem/1.4 var(--font-body); text-align:left; white-space:normal; overflow-wrap:anywhere; }
/* The game's name stays at the left edge while the markets scroll sideways (UI-520); the
   th keeps its full-width top border. Never wider than a phone's visible strip, so it wraps.
   Above the left scroll fade (z-index 6), which would otherwise wash out its end. */
#overview .mu-heatmap .mu-game-heading-text { position:sticky; left:0.375rem; z-index:7; display:inline-block; max-width:min(100%, calc(100vw - 2.75rem)); background:var(--surface); vertical-align:top; }

/* Independent Heatmap history selection; the Defense picker stays in its toolbar. */
.mu-weeks { position:relative; flex-basis:100%; max-width:100%; font-size:.8125rem; }
.mu-weeks summary { cursor:pointer; width:fit-content; max-width:100%; min-height:2.75rem; padding:.625rem .75rem; border:1px solid var(--line); border-radius:.5rem; overflow-wrap:anywhere; }
.mu-week-options { position:absolute; z-index:20; top:100%; left:0; width:min(22rem,calc(100vw - 4rem)); padding:.75rem; background:var(--surface); border:1px solid var(--line); border-radius:.5rem; box-shadow:0 8px 24px #0002; }
.mu-week-presets { display:flex; flex-wrap:wrap; gap:.375rem; margin-bottom:.5rem; }
.mu-week-options button { min-height:2.75rem; padding:.375rem .5rem; border:1px solid var(--line); border-radius:.375rem; background:var(--surface); color:inherit; cursor:pointer; }
#heatmapWeekButtons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.25rem; }
#heatmapWeekButtons button[aria-pressed="true"] { color:var(--accent-ink); background:var(--accent); }
.mu-week-options p { margin:.5rem 0 0; line-height:1.5; }
@media (max-width:48.125em) { .mu-weeks { width:100%; } .mu-week-options { left:0; right:auto; } }