/* ============================================================================
   usage-v2.css - shared by the four -v2 usage reports only
   (nfl-target-shares-v2, nfl-snap-shares-v2, nfl-reception-rate-v2, nfl-carries-v2)
   Loads after data.css. Weekly cells are shaded in the player's position colour:
   pale tint -> the position pill colour -> the pill's dark ink.
   ========================================================================== */

/* ---------- position ramps (same hues as .pos-pill in data.css) ---------- */
.v2-pQB { --pb: #fca5a5; --pt: #991b1b; --ha: #991b1b; --hfd: #991b1b; --hfl: #ffffff; }
.v2-pRB { --pb: #86efac; --pt: #166534; --ha: #166534; --hfd: #166534; --hfl: #ffffff; }
.v2-pWR { --pb: #fcd34d; --pt: #92400e; --ha: #92400e; --hfd: #92400e; --hfl: #ffffff; }
.v2-pTE { --pb: #67e8f9; --pt: #155e75; --ha: #155e75; --hfd: #155e75; --hfl: #ffffff; }

.dark-layout .v2-pQB { --pb: #8d6972; --pt: #fca5a5; --ha: #e6e8ee; --hfd: #711414; --hfl: #711414; }
.dark-layout .v2-pRB { --pb: #517e6c; --pt: #86efac; --ha: #e6e8ee; --hfd: #0d3a1e; --hfl: #0d3a1e; }
.dark-layout .v2-pWR { --pb: #817451; --pt: #fcd34d; --ha: #e6e8ee; --hfd: #582608; --hfl: #582608; }
.dark-layout .v2-pTE { --pb: #427787; --pt: #67e8f9; --ha: #e6e8ee; --hfd: #0b303c; --hfl: #0b303c; }

/* ---------- weekly strip ---------- */
.v2-strip, .v2-wkhead { display: flex; gap: 2px; }
.v2-wkhead span { width: 28px; text-align: center; font-size: 0.65rem; font-weight: 600; color: #a5a3ae; }
.dark-layout .v2-wkhead span { color: #676d7d; }

.v2-c {
    width: 28px; height: 24px; border-radius: 3px; flex: 0 0 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 700; cursor: default;
    background: var(--pb); color: var(--ha);
}
/* --m is set inline per cell. lower half mixes the pill colour into the card, upper half mixes the dark ink in */
.v2-c.lo { background: color-mix(in oklab, var(--pb) var(--m), #ffffff); }
.v2-c.hi { background: color-mix(in oklab, var(--pt) var(--m), var(--pb)); }
.dark-layout .v2-c.lo { background: color-mix(in oklab, var(--pb) var(--m), #283046); }
.v2-c.fd { color: var(--hfd); }
.v2-c.fl { color: var(--hfl); }

.v2-c.v2-dnp { background: #f3f2f7; color: #a5a3ae; }
.dark-layout .v2-c.v2-dnp { background: #1e2538; color: #676d7d; }
.v2-c.v2-future { background: transparent; box-shadow: inset 0 0 0 1px #ebe9f1; }
.v2-c.v2-pending { background: #f3f2f7; color: #a5a3ae; box-shadow: inset 0 0 0 1px #d8d6de; }
.dark-layout .v2-c.v2-pending { background: #1e2538; color: #676d7d; box-shadow: inset 0 0 0 1px #3b4253; }
.dark-layout .v2-c.v2-future { box-shadow: inset 0 0 0 1px #3b4253; }

.psg-legend-icons .v2-c { width: 18px; height: 14px; flex-basis: 18px; font-size: 0.6rem; }

/* ---------- last-4 move ---------- */
.v2-move { display: inline-flex; align-items: center; gap: 4px; }
.v2-move.flat, .v2-move.flat i { color: #a5a3ae; }
.dark-layout .v2-move.flat, .dark-layout .v2-move.flat i { color: #676d7d; }

/* ---------- bar with an average marker (reception rate) ---------- */
.v2-bullet-wrap { display: flex; align-items: center; gap: 8px; }
.v2-bullet { position: relative; height: 14px; min-width: 150px; flex: 1; border-radius: 4px; background: #ecebf2; }
.dark-layout .v2-bullet { background: #1e2538; }
.v2-bullet .progress-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.v2-bullet .v2-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: #22292f; }
.dark-layout .v2-bullet .v2-mark { background: #ffffff; }
.v2-bullet-val { min-width: 3.4em; text-align: right; }
.psg-legend-icons .v2-mark-key { display: inline-block; width: 2px; height: 14px; background: #22292f; }
.dark-layout .psg-legend-icons .v2-mark-key { background: #ffffff; }

.table--statistics td.v2-left { text-align: left; }

/* ---------- share pill floor ----------
   The procs emit "min-width: 3em" (site convention). At 3em a label such as 25.0% is 2px wider than its pill,
   so the v2 pages lift the floor a touch. !important is needed to beat the inline style. */
.table--statistics .progress .progress-bar { min-width: 3.5em !important; }

/* ---------- spare table width ----------
   The table is 100% of the card. .v2-fit pins a column to its content (the 18 weekly cells, so no gap after W18);
   .v2-grow marks the column that takes whatever width is left over. */
.table--statistics th.v2-fit, .table--statistics td.v2-fit { width: 1%; white-space: nowrap; }
.table--statistics th.v2-grow { width: 100%; }
/* on a table with a .v2-grow column the name stays on one line, so the growing column gives up the width instead */
.table--statistics:has(th.v2-grow) td:nth-child(2) { white-space: nowrap; }