/* Roles (Usage). Cards, tables, chips and badges come from teams.css. The header follows the
   Defense page under the Matchups chips: breadcrumb, a plain title and one line, then the
   views as a pill group like the Team page's sections. */
body[data-active-view=usage] .page-heading { display:none; }
.usage-page { display:grid; gap:1rem; }
.usage-body { display:grid; gap:1rem; }

.usage-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem; margin:0 0 -0.25rem; color:var(--muted); font-size:0.8125rem; }
.usage-crumbs .text-button { font-size:0.8125rem; font-weight:600; }
.usage-crumbs [aria-current] { color:var(--ink); }
.usage-hero { display:grid; grid-template-columns:minmax(0, 1fr); align-items:end; gap:0.75rem 1.5rem; }
.usage-hero h2 { margin:0; font:800 2.375rem/1 var(--font-display); letter-spacing:-0.035em; }
.usage-lede { margin:0.375rem 0 0; max-width:46rem; color:var(--muted); font-size:0.9375rem; }
/* The through line moves to the next line as a whole, like nowrap, but at 200% text on a 320
   phone, where it is wider than the line, it wraps inside instead of running off (UI-305). */
.usage-through { display:inline-block; max-width:100%; color:var(--ink); font-weight:650; }
.usage-nav { display:inline-flex; justify-self:start; gap:0.25rem; max-width:100%; margin:0.25rem 0; overflow-x:auto; padding:0.25rem; border:2px solid var(--edge); border-radius:var(--r-control); background:var(--bg); scrollbar-width:none; }
.usage-nav button { flex:0 0 auto; height:2rem; padding:0 1.125rem; border:2px solid transparent; border-radius:var(--r-control); background:none; color:var(--muted); font:800 0.875rem var(--font-body); cursor:pointer; }
.usage-nav button:hover { color:var(--ink); }
.usage-nav button[aria-selected=true] { border-color:var(--accent); background:var(--selected-bg); color:var(--ink); }
.usage-nav button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
/* What a list card's numbers are, under its title. */
.usage-card-legend { margin:-0.25rem 0 0.25rem; color:var(--muted); font-size:0.6875rem; }
/* The Team filter is the Teams page's picker (StudioKit.teamPicker, teams.css, UI-348). */
:is(.usage-picker, .usage-team-field) .team-picker-panel { left:0; right:auto; }
:is(.usage-picker, .usage-team-field) .team-picker-button { min-width:14rem; min-height:2.25rem; }
/* Compare's player picker: logos, names, teams and scores, with a search box. */
.usage-player-picker { width:100%; }
.usage-player-picker .team-picker-button { width:100%; justify-content:space-between; }
.usage-player-panel { display:block; width:min(22rem, calc(100vw - 2rem)); grid-template-columns:none; padding:0.5rem; }
.usage-player-panel ul { display:grid; max-height:22rem; overflow:auto; margin:0.375rem 0 0; padding:0; list-style:none; }
.usage-player-panel li[hidden] { display:none; }
.usage-player-panel button { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:0.5rem; width:100%; padding:0.3125rem 0.375rem; border:0; border-radius:var(--r-control); background:none; color:var(--ink); font-size:0.8125rem; text-align:left; }
.usage-player-panel button:hover, .usage-player-panel button:focus-visible { background:var(--accent-soft); }
.usage-player-panel .usage-score { min-width:2.125rem; padding:0.0625rem 0.25rem; font-size:0.75rem; }
.usage-pick-avatar .player-avatar { width:1.5rem; height:1.75rem; }
.usage-pick-avatar .avatar-initials { font-size:0.5rem; }
.usage-pick-team { display:inline-flex; align-items:center; gap:0.25rem; }
.usage-pick-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; }
.usage-pick-search { width:100%; min-height:2.125rem; padding:0 0.625rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); }
.usage-card-title { padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.usage-card-title:hover, .usage-card-title:focus-visible { color:var(--accent); }
.usage-list-dialog { width:min(56rem, calc(100vw - 2rem)); }
.usage-list-dialog .usage-list-filter { margin-bottom:0.625rem; }
.usage-list-table td.is-text { white-space:normal; min-width:9rem; }
/* The Player column is frozen, its header too (UI-453), as the usage log's Stat column is
   (UI-451): opaque, with its own right edge, since the collapsed borders don't move with a
   sticky cell. The header keeps its sticky top from teams.css (UI-452), so the corner cell
   sits above both the scrolling rows and the scrolling headers. */
.usage-list-table tbody th, .usage-list-table thead th:nth-child(2) { position:sticky; left:0; background:var(--surface); text-align:left; box-shadow:inset -1px 0 0 var(--line); }
.usage-list-table tbody th { z-index:1; }
.usage-list-table thead th:nth-child(2) { z-index:3; }
.usage-controls, .usage-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:0.625rem; }
/* The games window and the season: one compact row at the top of each view. */
.usage-controls { align-items:center; }
.usage-player-search { display:flex; flex-direction:column; gap:0.25rem; max-width:100%; font-size:0.75rem; }
.usage-player-search input { width:15rem; max-width:100%; min-height:2.375rem; }
.usage-controls .usage-field { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; }
.usage-controls .usage-field select { min-height:2.375rem; }
.usage-field { display:grid; gap:0.25rem; color:var(--muted); font-size:0.6875rem; font-weight:650; }
.usage-field select { min-height:2.25rem; max-width:16rem; padding:0 0.5rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--ink); }
.usage-segment { display:inline-flex; flex-wrap:wrap; padding:0.1875rem; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); }
.usage-segment button { min-height:1.875rem; padding:0 0.625rem; border:0; border-radius:var(--r-control); background:none; color:var(--muted); font-size:0.75rem; font-weight:700; }
.usage-segment button:hover { color:var(--ink); }
.usage-segment button[aria-pressed=true] { background:var(--accent-soft); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent); }
.usage-check { display:flex; align-items:center; gap:0.375rem; min-height:2.25rem; color:var(--muted); font-size:0.75rem; }
.usage-card-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 1rem; margin-bottom:0.75rem; }
.usage-card-head h3 { margin:0; }
.usage-card-head .team-muted { font-size:0.75rem; }
.usage-empty { margin:0; font-size:0.8125rem; }
.usage-more { margin-top:0.75rem; }

/* Score pills: 8+ elite, 6+ strong, 4+ playable, below that low. */
.usage-score { display:inline-block; min-width:2.375rem; padding:0.1875rem 0.375rem; border-radius:var(--r-control); background:var(--surface-raised); color:var(--muted); font-size:0.8125rem; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.usage-score.is-elite { background:#1f7a54; color:#eafff6; }
.usage-score.is-strong { background:#1c583f; color:#aef3d6; }
.usage-score.is-mid { background:#4a4320; color:#f5dc8e; }
/* "est." beside a score whose role came from volume, not snap share (LOGIC-17). */
.usage-est { margin-left:0.125rem; color:var(--muted); font-size:0.5625rem; font-weight:700; line-height:0; vertical-align:super; cursor:help; }
.usage-score-est { display:inline-flex; align-items:flex-start; white-space:nowrap; }
.usage-score-est .usage-est { line-height:1; vertical-align:baseline; }
.usage-arrow { margin-left:0.25rem; font-size:0.6875rem; font-weight:800; }
.usage-arrow.is-up { color:var(--positive); }
.usage-arrow.is-down { color:var(--negative); }
.usage-rank { margin-left:0.125rem; color:var(--muted); font-size:0.625rem; font-weight:650; }
.usage-rank.is-strong { color:var(--positive); }
.usage-rank.is-weak { color:var(--negative); }

/* Players. */
.usage-player { display:flex; align-items:center; gap:0.5rem; min-width:0; }
.usage-player-copy { display:grid; justify-items:start; min-width:0; }
/* Tables wrap a long name rather than cut it off. */
.usage-player-copy .team-player-name { max-width:min(11rem, 100%); overflow-wrap:break-word; }
.usage-player-meta { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem; max-width:100%; font-size:0.6875rem; font-weight:600; }
.usage-player-meta .team-link { color:var(--muted); }
.usage-player-meta .team-mini-badge { width:1rem; height:1rem; min-width:1rem; }
.usage-player .team-pos-chip, .usage-player-meta .team-pos-chip { margin:0.125rem 0 0; }

/* Home: a digest in compact cards, three per row. */
.usage-home { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.75rem; align-items:stretch; }
.usage-home-section { display:grid; gap:0.5rem; }
.usage-section-title { display:flex; flex-wrap:wrap; align-items:center; gap:0.375rem 0.875rem; margin:0.25rem 0 0; font-size:1rem; }
.usage-section-title>span { color:var(--muted); font-size:0.75rem; font-weight:500; }
.usage-section-title .usage-segment { font-size:0.75rem; }
/* Week changes: Rising and Falling, Bigger and Smaller role, Left injured down the right. */
.usage-home-changes .usage-home-tall { grid-column:3; grid-row:1 / span 2; }
.usage-home-leaders { grid-template-columns:repeat(4, minmax(0, 1fr)); }
/* Narrow leader cards: the stat drops under the player. */
.usage-home-leaders .usage-top li { grid-template-columns:auto minmax(0, 1fr); row-gap:0.0625rem; }
.usage-home-leaders .usage-top-stat { grid-column:2; margin-left:2.25rem; min-width:0; white-space:normal; }
.usage-home-card { padding:0.75rem 0.875rem 0.625rem; }
.usage-home-card h3 { display:flex; align-items:center; gap:0.25rem; margin:0 0 0.375rem; font-size:0.875rem; }
.usage-list { display:grid; margin:0; padding:0; list-style:none; }
.usage-list li { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:0.5rem; padding:0.3125rem 0; border-top:1px solid var(--line); }
.usage-list li:first-child { border-top:0; }
.usage-list .team-avatar .player-avatar { width:1.75rem; height:2rem; }
/* List rows have room: names use it and only truncate when the row runs out. */
.usage-list .usage-player-copy { grid-template-columns:minmax(0, 1fr); }
.usage-list .usage-player-copy .team-player-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Change and injury rows are flex, so the before → after numbers drop under the player when
   large text (200% at 390) leaves no room beside him, instead of squeezing him to nothing. */
.usage-list:not(.usage-top) li { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 0.5rem; }
.usage-list:not(.usage-top) li > .usage-player { flex:1 1 8rem; }
.usage-list:not(.usage-top) li > .usage-move { flex:0 0 auto; margin-left:auto; }
.usage-list:not(.usage-top) li > .usage-why { flex:0 0 100%; box-sizing:border-box; margin-left:0; padding-left:2.25rem; }
.usage-top li { grid-template-columns:auto minmax(0, 1fr) auto; }
.usage-top-stat { font-size:0.6875rem; white-space:nowrap; }
/* Large text (UI-305): a home card is a container measured in its own text size, so this
   applies only when it holds under 12em: 200% text on a phone, or the four-across leader
   cards at 1280-1440 with 200% text. At the default size a card holds at least 17em. Leader rows stack the score over the player, names wrap
   rather than cut to "Br…", and an injury chip ("DNP FRI") wraps inside the card. */
.usage-home-card { container:usage-card / inline-size; }
@container usage-card (max-width:12em) {
  .usage-home-leaders .usage-top li { grid-template-columns:minmax(0, 1fr); row-gap:0.25rem; }
  .usage-home-leaders .usage-top .usage-score-est { justify-self:start; }
  .usage-home-leaders .usage-top-stat { grid-column:1; margin-left:0; }
  .usage-list .usage-player-copy .team-player-name { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
  .usage-injury { max-width:100%; white-space:normal; }
  /* UI-435: with the browser's own text set to 200% on a 320 phone the card holds under 7em, and
     a change row's "1.7 → 8.9 +7.2" alone is 9em: the change wraps under the scores, and the row
     never grows past the list (a grid item keeps its content's width otherwise). */
  .usage-list > li { min-width:0; }
  .usage-list:not(.usage-top) li > .usage-move { flex-shrink:1; flex-wrap:wrap; justify-content:flex-end; row-gap:0.125rem; max-width:100%; }
  /* Play-style leaders: the share ("+4.6%") drops under the team, still at the right. */
  .usage-style-grid li { flex-wrap:wrap; min-width:0; }
  .usage-style-grid li > strong { margin-left:auto; }
}
.usage-why { grid-column:1 / -1; margin:0.125rem 0 0 2.25rem; color:var(--muted); font-size:0.6875rem; }
.usage-move { display:flex; align-items:center; gap:0.25rem; color:var(--muted); font-size:0.75rem; }
.usage-move .usage-score { min-width:2.125rem; padding:0.125rem 0.25rem; font-size:0.75rem; }
.usage-move .usage-arrow { min-width:2.25rem; text-align:right; font-size:0.8125rem; }
.usage-share { color:var(--ink); font-size:0.75rem; }
.usage-injury { display:inline-block; margin-left:0.125rem; padding:0 0.3125rem; border-radius:var(--r-data); background:#4a4320; color:#f5dc8e; font-size:0.5625rem; font-weight:800; letter-spacing:0.02em; white-space:nowrap; }
/* Roles' own chips read at 0.75rem (Fantasy reuses .usage-injury at its own size). */
:is(.usage-page, .usage-list-dialog, .usage-player-dialog) .usage-injury { font-size:0.75rem; }
.usage-injury.is-out { background:var(--negative-bg); color:var(--negative); }
.usage-injury.is-dnp { background:#5a3a1f; color:#ffc995; }
.usage-injury.is-likely { background:none; box-shadow:inset 0 0 0 1px var(--negative); }
/* Two columns (never more: each is at least half the row less the 1rem gap), or one when
   large text makes a column narrower than 9rem. */
.usage-style-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, max(9rem, calc(50% - 0.5rem))), 1fr)); gap:0.5rem 1rem; }
.usage-style-grid h4 { margin:0 0 0.125rem; color:var(--muted); font-size:0.625rem; font-weight:750; letter-spacing:0.08em; text-transform:uppercase; }
.usage-style-grid ol { display:grid; margin:0; padding:0; list-style:none; }
.usage-style-grid li { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.1875rem 0; font-size:0.75rem; }
.usage-style-grid strong { font-variant-numeric:tabular-nums; }

/* A team picked on Players (UI-390): its header and style strip above the table. */
.usage-team-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:0.625rem; }
.usage-team-name { display:flex; align-items:center; gap:0.5rem; font-size:1.125rem; }
.usage-team-badge { width:2.25rem; height:2.25rem; min-width:2.25rem; padding:0; border:0; background:none; box-shadow:none; }
.usage-team-badge img { width:100%; height:100%; object-fit:contain; }
.usage-context { display:flex; flex-wrap:wrap; gap:0.375rem; margin:0 0 0.875rem; }
/* Each tile opens every offense ranked on its stat (UI-351). */
.usage-context-tile { display:grid; gap:0.0625rem; min-width:5.5rem; margin:0; padding:0.3125rem 0.5rem; border:1px solid transparent; border-radius:var(--r-control); background:var(--surface-raised); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.usage-context-tile:hover { border-color:var(--line); }
.usage-context-tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.usage-context-label { color:var(--muted); font-size:0.625rem; font-weight:700; }
.usage-context-value { font-size:0.875rem; font-weight:750; font-variant-numeric:tabular-nums; }
/* A tile carries its stat's glossary term (UI-350): only the label is underlined, not the value. */
html body .usage-context-tile[data-term] { text-decoration:none; -webkit-user-select:none; user-select:none; }
html body .usage-context-tile[data-term] .usage-context-label { text-decoration:underline dotted color-mix(in srgb, currentColor 55%, transparent); text-decoration-thickness:1px; text-underline-offset:0.2em; }
/* Long-press on a sort header or a By week chip shows its definition, not a text selection. */
:is(.usage-page, .usage-list-dialog) .usage-sort[data-term], .usage-week-stats [data-term] { -webkit-user-select:none; user-select:none; }

/* Tables. */
.usage-table { font-size:0.75rem; }
.usage-table th, .usage-table td, .usage-styles th, .usage-styles td { padding:0.3125rem 0.4375rem; }
.usage-table thead th, .usage-styles thead th { vertical-align:bottom; }
.usage-table tbody>*>*, .usage-styles tbody>*>* { vertical-align:middle; }
.usage-table td.usage-score-cell { text-align:left; white-space:nowrap; }
.usage-rank-cell { color:var(--muted); font-size:0.6875rem; }
.usage-sort { padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; white-space:nowrap; }
.usage-sort:hover, .usage-sort.is-active { color:var(--ink); }
/* Roles' own sort buttons (Fantasy reuses .usage-sort): the whole header cell is a 40px target. */
:is(.usage-page, .usage-list-dialog) .usage-sort { display:inline-flex; align-items:flex-end; min-height:2.5rem; margin:-0.3125rem -0.4375rem; padding:0.3125rem 0.4375rem; font-size:0.75rem; cursor:pointer; }
:is(.usage-page, .usage-list-dialog) .usage-sort:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
/* Big tables scroll inside their card: the header sticks to the top and the names to the left. */
.usage-scroll { max-height:max(20rem, 70vh); overflow:auto; overscroll-behavior-x:contain; }
.usage-scroll thead th { position:sticky; top:0; z-index:2; background:var(--surface); box-shadow:inset 0 -1px 0 var(--line); }
.usage-scroll tbody th { position:sticky; left:0; z-index:1; background:var(--surface); }
.usage-scroll thead th.is-text { left:0; z-index:3; }
.usage-scroll :is(thead, tbody) th.is-text, .usage-scroll tbody th { box-shadow:inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.usage-table .is-sorted, .usage-styles .is-sorted { font-weight:750; }
.usage-cell { --usage-level:0; background:color-mix(in srgb, var(--accent) calc(var(--usage-level) * 42%), transparent); }
.usage-add { min-width:1.75rem; height:1.75rem; padding:0; border:1px solid var(--line); border-radius:var(--r-control); background:var(--surface); color:var(--muted); font-weight:800; }
.usage-add:hover, .usage-add:focus-visible { border-color:var(--accent); color:var(--ink); }
.usage-add[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.usage-styles { font-size:0.8125rem; }
.usage-table tbody th, .usage-styles tbody th { text-align:left; }
.usage-styles th .team-link { font-weight:650; }
.usage-average>* { border-top:2px solid var(--line); color:var(--muted); font-weight:650; }
.usage-spark { display:block; overflow:visible; }
.usage-table td.usage-spark-cell { white-space:nowrap; }
.usage-spark rect { fill:#6a5b82; }
.usage-spark .is-elite { fill:#3fcf93; }
.usage-spark .is-strong { fill:#2f9e70; }
.usage-spark .is-mid { fill:#d6b85a; }
.usage-spark .is-out { fill:var(--line); }
.usage-spark .is-bye { fill:var(--muted); }
.usage-spark .is-faded { opacity:0.35; }

/* More stats (LOGIC-19, UI-449): an extended table under Players' table, closed by default.
   Column groups (situations) get a header row and a rule on their left. The table scrolls
   sideways only; its two header rows stay in place. */
.usage-extra { margin-top:0.75rem; padding-top:0.5rem; border-top:1px solid var(--line); }
.usage-extra-toggle { min-height:2.5rem; font-weight:750; }
.usage-extra-toggle .team-muted { font-weight:500; }
.usage-extra-note { margin:0 0 0.5rem; max-width:52rem; font-size:0.75rem; }
.usage-extra-scroll { max-height:none; }
.usage-extra-scroll thead th { position:static; }
.usage-extra-scroll thead th.is-text { position:sticky; left:0; }
.usage-extra-table th.usage-extra-group { padding-bottom:0.125rem; color:var(--ink); font-size:0.6875rem; font-weight:750; letter-spacing:0.04em; text-align:center; text-transform:uppercase; white-space:nowrap; }
.usage-extra-table :is(.usage-extra-group, .usage-extra-first) { border-left:1px solid var(--line); }
.usage-extra-table td { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }

/* By week (UI-349): with a team picked, one stat of the column set game by game. Stat chips,
   then a table whose Player column is frozen with its own edge (the .usage-scroll rules, as
   UI-451/453); week columns hold one right-aligned number each, the season's figure last
   behind a rule. Byes are striped, missed games and untracked stats muted. */
.usage-players.has-jump .usage-jump-cell { cursor:pointer; }
.usage-players.has-jump .usage-jump-cell:hover { box-shadow:inset 0 0 0 1px var(--accent); }
/* The cell's button (UI-473) reads as the cell: no chrome of its own, a ring on the cell for keys. */
.usage-jump { display:block; width:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; white-space:inherit; cursor:pointer; }
.usage-jump:focus-visible { outline:none; }
.usage-players.has-jump .usage-jump-cell:has(.usage-jump:focus-visible) { box-shadow:inset 0 0 0 2px var(--accent); }
.usage-week-stats { min-width:0; margin-bottom:0.5rem; }
.usage-week-note { margin:0 0 0.5rem; max-width:52rem; font-size:0.75rem; }
.usage-week-note strong { color:var(--ink); font-weight:700; }
/* As wide as its weeks need, not stretched across the card early in the season. */
.usage-weeks { width:auto; }
.usage-weeks thead th.usage-week { line-height:1.3; text-align:right; white-space:nowrap; }
.usage-weeks thead th.usage-week small { display:block; color:var(--muted); font-size:0.625rem; font-weight:600; letter-spacing:0; text-transform:none; }
.usage-weeks .usage-week-box { margin:0 0 0 auto; }
.usage-weeks td { min-width:2.25rem; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.usage-weeks td.usage-week-cell { font-size:0.6875rem; }
.usage-weeks td.is-na { color:var(--muted); }
.usage-weeks .usage-week-left, .usage-weeks .usage-week-cell .usage-week-left { display:block; margin-top:0.125rem; color:var(--negative); font-size:0.5625rem; font-weight:800; letter-spacing:0.02em; }
/* Inferred from a share drop, not a play-by-play note (LOGIC-40): the same red, hedged. */
.usage-weeks .usage-week-left.is-likely { font-style:italic; font-weight:700; text-decoration:underline dotted; text-underline-offset:2px; cursor:help; }
.usage-weeks .usage-week-season { border-left:2px solid var(--line); font-weight:750; }
.usage-weeks thead th.usage-week-season { text-align:right; }
.usage-weeks tr.is-focus > td { box-shadow:inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.usage-scroll .usage-weeks tr.is-focus > th { background:color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow:inset 4px 0 0 var(--accent), inset -1px 0 0 var(--line), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
/* The grid's cells take the arrow keys (UI-535): the Season table's ring, inside the cell so
   the scroll box doesn't clip it. */
.usage-weeks td[data-usage-week-cell]:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--accent); }

/* Week columns (the player usage log). */
.usage-week-box { display:block; margin:0 auto; padding:0; border:0; background:none; color:var(--muted); font-size:0.625rem; font-weight:600; letter-spacing:0; text-decoration:underline dotted; text-transform:none; }
.usage-week-box:hover, .usage-week-box:focus-visible { color:var(--accent); }
.usage-week-cell small { display:block; margin-top:0.1875rem; color:var(--muted); font-size:0.625rem; white-space:nowrap; }
.usage-week-cell.is-out, .usage-week-cell.is-bye { color:var(--muted); }
/* Player usage log: one row per stat, one column per game, each with its change. */
.usage-player-dialog { width:min(72rem, calc(100vw - 2rem)); }
.usage-player-dialog .team-avatar .player-avatar { width:3rem; height:3.5rem; }
.usage-player-dialog .usage-player-meta { flex-wrap:wrap; gap:0.375rem; }
.usage-player-dialog .usage-player-meta .text-button { margin-left:0.25rem; }
.usage-trend-note { margin:0 0 0.5rem; }
.usage-trend-table .usage-week { line-height:1.3; text-align:center; }
.usage-trend-table .usage-week small { display:block; margin:0 auto; color:var(--muted); font-size:0.625rem; font-weight:600; letter-spacing:0; text-transform:none; }
.usage-trend-table tbody th { position:sticky; left:0; z-index:1; width:8rem; background:var(--surface); font-weight:650; vertical-align:middle; }
/* The Stat column is frozen, its header too (UI-451). The table's collapsed borders don't move
   with a sticky cell, so the column draws its own edge: without it, the score chips and change
   arrows scrolling under it read as stray marks beside it. */
.usage-trend-table thead th.is-text { left:0; z-index:3; }
.usage-trend-table th.is-text { box-shadow:inset -1px 0 0 var(--line); }
.usage-trend-table td { text-align:center; vertical-align:middle; }
.usage-trend-cell .usage-injury { display:table; margin:0.1875rem auto 0; }
.usage-trend-delta { display:block; margin-top:0.125rem; color:var(--muted); font-size:0.625rem; font-weight:650; white-space:nowrap; }
.usage-trend-delta.is-up { color:var(--positive); }
.usage-trend-delta.is-down { color:var(--negative); }
/* The log's More stats (UI-449): a row group per situation, its name in small capitals over a rule. */
.usage-trend-table .usage-log-group > * { padding-top:0.625rem; padding-bottom:0.125rem; border-top:1px solid var(--line); }
.usage-trend-table .usage-log-group th { color:var(--ink); font-size:0.6875rem; font-weight:750; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; }
.usage-trend-table .usage-log-extra tr:not(.usage-log-group) th { font-weight:500; }
.usage-player-dialog .usage-extra { margin-top:0.5rem; }
.usage-week-cell.is-bye, .usage-week.is-bye { background:repeating-linear-gradient(135deg, transparent 0 0.375rem, var(--surface-raised) 0.375rem 0.5rem); }

/* Compare. */
.usage-compare { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap:1rem; align-items:start; }
.usage-compare-card { position:relative; display:grid; gap:0.75rem; }
.usage-compare-card.is-empty { align-content:start; min-height:10rem; border-style:dashed; }
.usage-compare-card.is-empty p { margin:0; font-size:0.75rem; }
.usage-compare-remove { position:absolute; top:0.5rem; right:0.5rem; }
.usage-compare-head { display:flex; align-items:center; gap:0.625rem; padding-right:2rem; }
.usage-compare-head>div { display:grid; justify-items:start; min-width:0; }
.usage-compare-head .team-avatar .player-avatar { width:3rem; height:3.5rem; }
.usage-compare-score { display:flex; align-items:center; gap:0.75rem; }
.usage-compare-score .usage-score { min-width:3.25rem; padding:0.375rem; font-size:1.25rem; }
.usage-compare-stats { display:grid; gap:0.25rem; margin:0; }
.usage-compare-stats>div { display:grid; grid-template-columns:5rem minmax(0, 1fr); align-items:center; gap:0.5rem; padding:0.1875rem 0.375rem; border-radius:var(--r-data); }
.usage-compare-stats>div.is-best { background:var(--accent-soft); }
.usage-compare-stats dt { color:var(--muted); font-size:0.6875rem; font-weight:700; }
.usage-compare-stats dd { display:grid; grid-template-columns:3rem minmax(0, 1fr); align-items:center; gap:0.5rem; margin:0; font-size:0.8125rem; font-weight:700; font-variant-numeric:tabular-nums; }
.usage-bar { display:block; height:0.375rem; border-radius:0; background:var(--surface-raised); overflow:hidden; }
.usage-bar i { display:block; height:100%; background:var(--accent); }

@media (max-width:75em) {
  .usage-home, .usage-home-leaders { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .usage-home-changes .usage-home-tall { grid-column:auto; grid-row:auto; }
}
@media (max-width:56em) {
  .usage-hero { grid-template-columns:minmax(0, 1fr); }
  .usage-controls { justify-content:flex-start; }
  .usage-home, .usage-home-leaders { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:40em) {
  .usage-hero h2 { font-size:1.875rem; }
  .usage-lede { font-size:0.8125rem; }
  .usage-nav { display:flex; width:100%; }
  .usage-nav { gap:0; padding:0.1875rem; }
  .usage-nav button { flex:1 0 auto; height:2.5rem; padding:0 0.4375rem; font-size:0.75rem; white-space:nowrap; }
  /* Phone targets: 2.5rem for the view pills, segments, checks, pickers and + buttons. */
  .usage-segment button, .usage-check, .usage-page .usage-field select, :is(.usage-picker, .usage-team-field) .team-picker-button, .usage-pick-search { min-height:2.5rem; }
  .usage-add { min-width:2.5rem; height:2.5rem; }
  /* The team picker spans the screen on a phone, as on Teams (teams.css). */
  .usage-team-field .team-picker-panel { left:1rem; right:1rem; }
  /* The window and the season share one row: tighter segments, and the Season label is read, not shown. */
  .usage-controls { gap:0.375rem; }
  .usage-controls .usage-segment button { padding:0 0.4375rem; }
  .usage-controls .usage-field-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .usage-page .usage-controls .usage-field select { padding:0 0.25rem 0 0.4375rem; }
  /* Pinned names stay narrow so the numbers have room: they wrap instead. The extra
     1.75rem is the headshot's, so names wrap no more than they did without it. */
  .usage-scroll tbody th, .usage-scroll thead th.is-text { min-width:8.25rem; max-width:10rem; white-space:normal; }
  .usage-scroll tbody th .team-pos-chip { margin-left:0; }
  /* Small headshots beside every name, so the pinned names keep most of their width. */
  .usage-player { gap:0.375rem; }
  .usage-player .team-avatar .player-avatar { width:1.5rem; height:1.75rem; }
  .usage-player .avatar-initials { font-size:0.5rem; }
  .usage-player-copy .team-player-name { max-width:8rem; }
  /* By week's stat chips stay one row that scrolls sideways (the chosen chip kept in view). */
  .usage-week-stats .usage-segment { display:flex; flex-wrap:nowrap; max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .usage-week-stats .usage-segment button { flex:0 0 auto; }
}

/* Home cards open their full list. */
.usage-home-card.is-openable { cursor:pointer; transition:border-color 120ms ease; }
.usage-home-card.is-openable:hover { border-color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .usage-home-card.is-openable { transition:none; } }

/* Next game and DraftKings line under a player's name (UI-113): "@ [logo] DAL  Rec yds 64.5".
   It wraps under the name instead of widening the table; the line opens his props. */
.usage-next { display:flex; flex-wrap:wrap; align-items:center; gap:0.125rem 0.375rem; max-width:min(11rem, 100%); margin-top:0.125rem; font-size:0.6875rem; font-weight:600; color:var(--muted); }
.usage-next-game { display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap; }
.usage-next .team-mini-badge { width:1rem; height:1rem; min-width:1rem; }
.usage-next-line { padding:0 0.3125rem; border:1px solid var(--line); border-radius:var(--r-data); background:none; color:var(--accent); font:inherit; line-height:1.4; white-space:nowrap; cursor:pointer; }
.usage-next-line:hover, .usage-next-line:focus-visible { border-color:var(--accent); background:var(--accent-soft); }
.usage-player-dialog .usage-next { max-width:none; margin-top:0.25rem; font-size:0.75rem; }
.usage-team-next { flex:none; flex-wrap:nowrap; gap:0.25rem; max-width:none; margin:0 0 0 0.25rem; font-size:0.75rem; white-space:nowrap; }
/* A game under way with no stats saved (UI-416): its own line under the team name. */
.usage-team-name:has(.usage-team-started) { flex:1 1 0; min-width:0; flex-wrap:wrap; row-gap:0.25rem; }
.usage-team-started { display:flex; flex-wrap:wrap; align-items:center; gap:0.125rem 0.25rem; flex-basis:100%; color:var(--muted); font-size:0.75rem; font-weight:600; }
.usage-team-started-label { color:var(--ink); font-weight:700; }
.usage-team-started .team-mini-badge { width:1rem; height:1rem; min-width:1rem; }
@media (max-width:40em) {
  .usage-next { max-width:8rem; }
  .usage-player-dialog .usage-next, .usage-team-next { max-width:none; }
}