/* ==========================================================================
   Team widgets — Team Player Statistics + Team Performance (Oct 2026)
   --------------------------------------------------------------------------
   widgets/team/player_stats.php and widgets/team/team_performance.php print this
   sheet with their markup (twAssetsHtml()), so every page that shows them gets the
   same look: competitions.php's sidebar, the widget zones, any later caller.
   The owner's standard is My Benfica (mybenfica-modern.css): the values below are
   copies of its segmented switch (.mb-seg), THE row (.mb-row) and sidebar tiles
   (.mb-side-tiles). Inside a .mb-modern page its tokens (--mb-*) are used; anywhere
   else the theme tokens stand in. The colour layer is the competition colour (--cs,
   set by comps-modern.js on competitions.php) or the theme primary elsewhere.
   Rows reach the card's edges, W/D/L are squared letter chips, icons are the site
   gold, no per-cell gradients, no buttons with shadows. The tabs are radio inputs
   (pure CSS): nothing to bind, nothing to bind twice under soft navigation.
   ========================================================================== */
.tw {
    --tw-ink: var(--mb-ink, var(--theme-ink, var(--bs-body-color)));
    --tw-muted: var(--mb-muted, var(--theme-ink-muted, var(--bs-secondary-color)));
    --tw-card: var(--mb-card-bg, var(--theme-surface, var(--bs-body-bg)));
    --tw-soft: var(--mb-soft, var(--theme-surface-2, var(--bs-tertiary-bg)));
    --tw-soft-2: var(--mb-soft-2, var(--theme-surface-3, var(--bs-secondary-bg)));
    --tw-line: var(--mb-line, var(--theme-border, var(--bs-border-color)));
    --tw-primary: var(--mb-primary, var(--theme-primary, var(--bs-primary)));
    --tw-primary-rgb: var(--mb-primary-rgb, var(--theme-primary-rgb, 200, 16, 46));
    --tw-primary-ink: var(--mb-primary-ink, color-mix(in oklab, var(--tw-primary) 80%, var(--tw-ink)));
    --tw-on: var(--mb-on, var(--theme-on-primary, #fff));
    --tw-accent: var(--theme-accent, var(--slb-gold, #F4B223));
    --tw-accent-rgb: var(--mb-accent-rgb, var(--theme-accent-rgb, 244, 178, 35));
    --tw-ok: var(--mb-ok, var(--theme-success, var(--bs-success)));
    --tw-ok-ink: var(--mb-ok-ink, var(--theme-success-strong, var(--bs-success)));
    --tw-bad: var(--mb-bad, var(--theme-danger, var(--bs-danger)));
    --tw-bad-ink: var(--mb-bad-ink, var(--theme-danger-strong, var(--bs-danger)));
    --tw-ease: var(--mb-ease, cubic-bezier(.2, .8, .2, 1));
    --tw-c: var(--cs, var(--tw-primary-rgb));
    --tw-hair: color-mix(in oklab, var(--tw-line) 60%, transparent);
    position: relative;
    padding-top: .75rem;
    color: var(--tw-ink);
}
[data-bs-theme="dark"] .tw {
    --tw-soft: var(--mb-soft, color-mix(in oklab, var(--tw-ink) 6%, var(--tw-card)));
    --tw-soft-2: var(--mb-soft-2, color-mix(in oklab, var(--tw-ink) 11%, var(--tw-card)));
    --tw-line: var(--mb-line, color-mix(in oklab, var(--tw-ink) 12%, transparent));
    --tw-primary-ink: var(--mb-primary-ink, var(--theme-link, var(--tw-ink)));
    --tw-ok-ink: var(--mb-ok-ink, color-mix(in oklab, var(--tw-ok) 58%, white));
    --tw-bad-ink: var(--mb-bad-ink, color-mix(in oklab, var(--tw-bad) 58%, white));
}
/* A sidebar card whose heading already leaves a 1rem gap (competitions.php, player.php):
   the content starts there. Player Statistics' card pads nothing (its rows reach the edges);
   Team Performance sits in the card's own padding. */
.co-sidebar-widget .tw, .tw.tw-tp { padding-top: 0; }

.tw-empty { display: flex; align-items: center; gap: .45rem; margin: 0 1rem 1rem; color: var(--tw-muted); font-size: .78rem; font-weight: 600; line-height: 1.4; }
.tw-empty i { color: var(--tw-accent); }

/* ---------- Team Player Statistics ---------- */
/* The radios are the tabs' state: visually hidden, still in the keyboard order (arrow keys
   move between them like any radio group). */
.tw-r { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }

/* The switch: My Benfica's .mb-seg values, stretched across the card; the selected tab
   shows icon + label at its full width, the others share what is left with their icon (the
   label is their title). */
.tw-seg {
    display: flex; gap: .15rem; margin: 0 1rem .6rem; padding: .15rem;
    border-radius: 999px; background: var(--tw-soft);
    border: 1px solid color-mix(in oklab, var(--tw-line) 70%, transparent);
}
.tw-tab {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0;
    margin: 0; padding: .2rem .45rem; border-radius: 999px;
    color: var(--tw-muted); font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: background-color .22s var(--tw-ease), color .2s ease;
}
.tw-tab > i { flex: 0 0 auto; font-size: .82em; color: var(--tw-accent); }
.tw-tab:hover { color: var(--tw-ink); }
.tw-tab-txt { display: none; }
.tw-r--apps:checked ~ .tw-seg .tw-tab--apps,
.tw-r--goals:checked ~ .tw-seg .tw-tab--goals,
.tw-r--assists:checked ~ .tw-seg .tw-tab--assists,
.tw-r--yellowcards:checked ~ .tw-seg .tw-tab--yellowcards,
.tw-r--redcards:checked ~ .tw-seg .tw-tab--redcards,
.tw-r--ratings:checked ~ .tw-seg .tw-tab--ratings { flex: 0 0 auto; padding-left: .62rem; padding-right: .62rem; background: var(--tw-primary); color: var(--tw-on); }
.tw-r--apps:checked ~ .tw-seg .tw-tab--apps > i,
.tw-r--goals:checked ~ .tw-seg .tw-tab--goals > i,
.tw-r--assists:checked ~ .tw-seg .tw-tab--assists > i,
.tw-r--ratings:checked ~ .tw-seg .tw-tab--ratings > i { color: var(--theme-accent-on-primary, var(--tw-accent)); }
.tw-r--apps:checked ~ .tw-seg .tw-tab--apps .tw-tab-txt,
.tw-r--goals:checked ~ .tw-seg .tw-tab--goals .tw-tab-txt,
.tw-r--assists:checked ~ .tw-seg .tw-tab--assists .tw-tab-txt,
.tw-r--yellowcards:checked ~ .tw-seg .tw-tab--yellowcards .tw-tab-txt,
.tw-r--redcards:checked ~ .tw-seg .tw-tab--redcards .tw-tab-txt,
.tw-r--ratings:checked ~ .tw-seg .tw-tab--ratings .tw-tab-txt { display: inline; }
.tw-r--apps:focus-visible ~ .tw-seg .tw-tab--apps,
.tw-r--goals:focus-visible ~ .tw-seg .tw-tab--goals,
.tw-r--assists:focus-visible ~ .tw-seg .tw-tab--assists,
.tw-r--yellowcards:focus-visible ~ .tw-seg .tw-tab--yellowcards,
.tw-r--redcards:focus-visible ~ .tw-seg .tw-tab--redcards,
.tw-r--ratings:focus-visible ~ .tw-seg .tw-tab--ratings { outline: 2px solid var(--tw-primary); outline-offset: 1px; }

/* One pane at a time; it eases in (and its bars grow) each time it is chosen. */
.tw-pane { display: none; animation: twIn .28s var(--tw-ease) both; }
.tw-r--apps:checked ~ .tw-panes .tw-pane--apps,
.tw-r--goals:checked ~ .tw-panes .tw-pane--goals,
.tw-r--assists:checked ~ .tw-panes .tw-pane--assists,
.tw-r--yellowcards:checked ~ .tw-panes .tw-pane--yellowcards,
.tw-r--redcards:checked ~ .tw-panes .tw-pane--redcards,
.tw-r--ratings:checked ~ .tw-panes .tw-pane--ratings { display: block; }
@keyframes twIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* THE row: face | name over one meta line | the figure; edge to edge in the card, the
   hairline under each one, a thin bar in the competition colour on that edge. */
.tw-rows { display: flex; flex-direction: column; border-top: 1px solid var(--tw-hair); }
.tw-row {
    position: relative;
    display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    padding: .45rem 1.05rem; border-bottom: 1px solid var(--tw-hair);
    color: var(--tw-ink); text-decoration: none;
    transition: background-color .18s ease;
}
.tw-rows > .tw-row:last-child { border-bottom: 0; padding-bottom: .55rem; }
.tw-row:hover { background: color-mix(in oklab, var(--tw-soft) 70%, transparent); color: var(--tw-ink); }
.tw-row.is-lead { background: rgba(var(--tw-c), .07); }
.tw-row.is-lead:hover { background: rgba(var(--tw-c), .11); }
[data-bs-theme="dark"] .tw-row.is-lead { background: rgba(var(--tw-c), .14); }
.tw-vis { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; }
.tw-vis .player-face-bubble, .tw-vis .tw-face { width: 2rem !important; height: 2rem !important; margin: 0 !important; flex: 0 0 auto; }
.tw-rank {
    position: absolute; right: -.3rem; bottom: -.2rem;
    min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: 999px;
    background: var(--tw-card); color: var(--tw-muted); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tw-line) 80%, transparent);
    font-size: .58rem; font-weight: 900; line-height: 1rem; text-align: center; font-variant-numeric: tabular-nums;
}
.tw-row.is-lead .tw-rank { background: var(--tw-accent); color: var(--theme-on-accent, #3a2600); box-shadow: none; }
.tw-main { display: flex; flex-direction: column; min-width: 0; }
.tw-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 800; line-height: 1.3; }
.tw-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .05rem; color: var(--tw-muted); font-size: .7rem; line-height: 1.3; }
.tw-side { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 0; }
.tw-val { min-width: 1.5rem; text-align: right; font-size: .98rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tw-row.is-lead .tw-val { color: var(--tw-primary-ink); }
.tw-chip {
    display: inline-flex; align-items: center; gap: .25rem; padding: .14rem .5rem; border-radius: 999px;
    background: rgba(var(--tw-accent-rgb), .16); color: var(--tw-ink);
    font-size: .74rem; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tw-chip i { color: var(--tw-accent); font-size: .85em; }
.tw-bar { position: absolute; left: calc(1.05rem + 2.6rem); right: 1.05rem; bottom: 0; height: 2px; pointer-events: none; }
.tw-bar i { display: block; height: 100%; border-radius: 999px; background: rgba(var(--tw-c), .75); transform-origin: left center; animation: twGrow .7s var(--tw-ease) both; }
.tw-row:nth-child(2) .tw-bar i { animation-delay: .05s; }
.tw-row:nth-child(3) .tw-bar i { animation-delay: .1s; }
.tw-row:nth-child(4) .tw-bar i { animation-delay: .15s; }
.tw-row:nth-child(n+5) .tw-bar i { animation-delay: .2s; }
@keyframes twGrow { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Team Performance ---------- */
.tw-tp > .tw-empty { margin: 0; }
/* Record strip: W / D / L chips with their counts, the win rate on the right. */
.tw-rec { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
.tw-rec-chips { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.tw-rc { display: inline-flex; align-items: center; gap: .35rem; font-size: 1.05rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tw-f {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: .25rem;
    color: #fff; font-size: .68rem; font-weight: 900; line-height: 1; font-style: normal;
}
.tw-f.is-w { background: var(--tw-ok); }
.tw-f.is-d { background: color-mix(in oklab, var(--tw-muted) 80%, var(--tw-card)); }
.tw-f.is-l { background: var(--tw-bad); }
.tw-f.is-none { background: var(--tw-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tw-line) 70%, transparent); }
.tw-rate { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; line-height: 1; }
.tw-rate b { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tw-rate small { margin-top: .15rem; color: var(--tw-muted); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* One W-D-L proportion bar, no text in it. */
.tw-split {
    display: flex; gap: 2px; height: .42rem; margin: .7rem 0 .8rem; overflow: hidden;
    border-radius: 999px; background: var(--tw-soft-2);
    transform-origin: left center; animation: twGrow .8s var(--tw-ease) both;
}
.tw-split i { display: block; min-width: 3px; }
.tw-split i.is-w { background: var(--tw-ok); }
.tw-split i.is-d { background: color-mix(in oklab, var(--tw-muted) 80%, var(--tw-card)); }
.tw-split i.is-l { background: var(--tw-bad); }
/* Scored / Conceded / Difference: My Benfica's sidebar tiles. */
.tw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.tw-tiles.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-tiles li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--tw-soft); }
.tw-tiles span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tw-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.tw-tiles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tw-ink); font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.tw-tiles b.is-up { color: var(--tw-ok-ink); }
.tw-tiles b.is-down { color: var(--tw-bad-ink); }
/* Form: oldest to latest, the latest ringed in the competition colour; empty slots stay empty. */
.tw-form-wrap { margin-top: .8rem; padding-top: .65rem; border-top: 1px dashed color-mix(in oklab, var(--tw-line) 70%, transparent); }
.tw-tp > .tw-form-wrap:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tw-cap { display: block; margin-bottom: .45rem; color: var(--tw-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-form { display: flex; align-items: center; gap: .3rem; padding: 3px 3px 3px 0; }
.tw-form .tw-f { flex: 1 1 0; width: auto; max-width: 1.55rem; height: auto; aspect-ratio: 1; animation: twPop .35s var(--tw-ease) both; animation-delay: calc(var(--i, 0) * 50ms + .1s); }
.tw-form .tw-f.is-none { animation: none; }
.tw-f.is-latest { outline: 2px solid rgb(var(--tw-c)); outline-offset: 2px; }
@keyframes twPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.tw-foot { display: flex; justify-content: flex-end; margin-top: .75rem; padding-top: .5rem; border-top: 1px dashed color-mix(in oklab, var(--tw-line) 70%, transparent); }
.tw-more { display: inline-flex; align-items: center; gap: .3rem; color: var(--tw-primary-ink); font-size: .74rem; font-weight: 800; text-decoration: none; }
.tw-more i { font-size: .8em; transition: transform .2s var(--tw-ease); }
.tw-more:hover i { transform: translateX(3px); }

/* Narrow phones (the sidebar drawer is ~250px inside its card at 320). */
@media (max-width: 379.98px) {
    .tw-seg { margin-left: .8rem; margin-right: .8rem; }
    .tw-tab { padding: .22rem .2rem; }
    .tw-row { padding-left: .85rem; padding-right: .85rem; column-gap: .5rem; }
    .tw-bar { left: calc(.85rem + 2.5rem); right: .85rem; }
    .tw-tiles li { padding: .35rem .4rem; }
    .tw-tiles span { font-size: .56rem; letter-spacing: .02em; }
    .tw-rec-chips { gap: .5rem; }
    .tw-rc { font-size: .95rem; gap: .25rem; }
    .tw-f { width: 1.4rem; height: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tw-pane, .tw-bar i, .tw-split, .tw-form .tw-f { animation: none !important; }
    .tw-tab, .tw-row, .tw-more i { transition: none !important; }
}

/* Rank digits sit in the optical centre of their circle, as on statistics.php's leader faces
   (owner, 7 Oct 2026). */
.tw-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; min-width: 1rem; height: 1rem; padding: 0; line-height: 1;
    text-box: trim-both cap alphabetic;
}