/* ================================================================
   NEXT PLAYER UP (games) — matchup/includes/bet-next-player-up.php,
   filled by scripts/matchup-npu.js. Loaded on /matchup/, admin/bet
   and, through the widget catalog's assets, on /my-dashboards/.
   Colours are tokens (styles/tokens.css); the head mirrors the
   On/Off block's (onoff-minutes.css) so the two read as a pair.
   ================================================================ */
.tmb-npu { container-type: inline-size; }
.tmb-npu-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-bottom: 6px;
}
.tmb-npu-head h7 { margin: 0; }
.tmb-npu-unit {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 3px;
    background: var(--tmb-purple-bg);
    color: var(--tmb-purple);
    border: 1px solid color-mix(in srgb, var(--tmb-purple) 35%, transparent);
}
.tmb-npu-q {
    flex-basis: 100%;
    font-size: 0.74rem;
    color: var(--tmb-gray-600);
}
.tmb-npu-ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 6px;
    font-size: 0.78rem;
}
.tmb-npu-ctl label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 500; color: var(--tmb-gray-700); }
.tmb-npu-ctl input { margin: 0; }
.tmb-npu-ctl select { font-size: 0.78rem; padding: 2px 6px; border: 1px solid var(--tmb-gray-400); border-radius: 4px; background: var(--tmb-white, #fff); color: var(--tmb-gray-900); }
/* The block's own pill strip (the sports whose card has no Adjust for
   Injuries): the pills are .injury-pill from player-injury-common.css; a
   pill the report lists carries its status tint until it is picked. */
.tmb-npu .injury-pill-strip { padding: 2px 0 2px; }
.tmb-npu .injury-pill-strip .team-pills-row { margin-bottom: 6px; }
.tmb-npu .injury-pill .pill-mpg { margin-left: 2px; }
.tmb-npu-teams { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tmb-npu-team { min-width: 0; }
.tmb-npu-team-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 4px;
    color: var(--tmb-gray-900);
}
.tmb-npu-sel {
    font-size: 0.74rem;
    color: var(--tmb-gray-700);
    margin: 0 0 4px;
}
.tmb-npu-sel b { color: var(--tmb-gray-900); }
.tmb-npu table { font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.tmb-npu table th, .tmb-npu table td { white-space: nowrap; text-align: right; vertical-align: middle; }
.tmb-npu table th:first-child, .tmb-npu table td:first-child { text-align: left; }
.tmb-npu td.npu-name { font-weight: 600; }
.tmb-npu td.npu-name .npu-pos { font-weight: 400; color: var(--tmb-gray-600); font-size: 0.72rem; margin-left: 4px; }
.tmb-npu td.npu-name .npu-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 5px;
    color: var(--tmb-white, #fff);
    vertical-align: middle;
}
.tmb-npu .npu-badge-out { background: var(--tmb-out); }
.tmb-npu .npu-badge-in { background: var(--tmb-in); }
.tmb-npu .npu-badge-inj { background: var(--tmb-red); opacity: 0.45; }
.tmb-npu tr.npu-out td { color: var(--tmb-gray-500); }
.tmb-npu tr.npu-out td.npu-name { color: var(--tmb-gray-500); }
/* A cell under a selection: the base figure small and struck, the new
   figure, and the change under it. */
.tmb-npu td.npu-cell { line-height: 1.1; padding-top: 3px; padding-bottom: 3px; }
.tmb-npu .npu-base { display: block; font-size: 0.66rem; color: var(--tmb-gray-500); text-decoration: line-through; }
.tmb-npu .npu-new { display: block; font-weight: 700; }
.tmb-npu .npu-delta { display: block; font-size: 0.64rem; }
.tmb-npu .npu-delta.npu-up { color: var(--tmb-success-text); }
.tmb-npu .npu-delta.npu-down { color: var(--tmb-danger-text); }
.tmb-npu .npu-delta.npu-flat { color: var(--tmb-gray-500); }
.tmb-npu td.npu-pos { background: var(--tmb-good-7); }
.tmb-npu td.npu-pos.s2 { background: var(--tmb-good-4); }
.tmb-npu td.npu-pos.s3 { background: var(--tmb-good-1); }
.tmb-npu td.npu-neg { background: var(--tmb-bad-1); }
.tmb-npu td.npu-neg.s2 { background: var(--tmb-bad-3); }
.tmb-npu td.npu-neg.s3 { background: var(--tmb-bad-5); }
.tmb-npu td.npu-thin, .tmb-npu tr.npu-thin td { color: var(--tmb-gray-600); font-style: italic; }
.tmb-npu .tmb-npu-note { font-size: 0.72rem; color: var(--tmb-gray-600); margin: -4px 0 6px; }
.tmb-npu .tmb-npu-empty { font-size: 0.8rem; color: var(--tmb-gray-600); padding: 6px 0; }
/* Twelve columns: in a narrow container the table scrolls sideways inside
   its wrapper (table-responsive-wrapper), the player column held. */
.tmb-npu .table-responsive-wrapper { overflow-x: auto; }
.tmb-npu table th:first-child, .tmb-npu table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--tmb-white, #fff);
}
.tmb-npu table thead th:first-child { background: inherit; }
@container (max-width: 560px) {
    .tmb-npu table th, .tmb-npu table td { padding-left: 4px; padding-right: 4px; font-size: 0.75rem; }
    .tmb-npu .npu-base { font-size: 0.6rem; }
    .tmb-npu .npu-delta { font-size: 0.6rem; }
}