/* ==========================================================================
   Squad views — squad.php?view=depth (depth chart) and squad.php?view=news
   (Team News), plus the Squad / Depth Chart / Team News switch the three squad
   views share. Oct 2026 ("more modern and dynamic").

   Linked by includes/squad_views_ui.php (sqvAssets()) from the hero or the main
   column, so a soft navigation brings it along. Colours are theme tokens with
   Bootstrap fallbacks; the only literals are the turf, kept as variables.

   Owner rules this follows: sections are bare; item cards wear EXACTLY the
   sidebar panel's look; 1rem between cards; the page's switches sit in the
   first section head (icons only on phones); rows keep one line of meta with
   an ellipsis; a card's icon/face sits on the same line as its text on phones;
   no button shadows; no ancestor clips a card's shadow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. The segmented switch (My Benfica's .mb-seg look)
   -------------------------------------------------------------------------- */
.benfica-layout .sqv-seg {
    display: inline-flex; align-items: center; gap: .15rem; padding: .15rem;
    border-radius: 999px;
    background: var(--theme-surface-2, var(--bs-tertiary-bg));
    border: 1px solid color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 70%, transparent);
}
.benfica-layout .sqv-seg-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .62rem;
    border: 0; border-radius: 999px; background: transparent;
    color: var(--theme-ink-muted, var(--bs-secondary-color));
    font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
    text-decoration: none; box-shadow: none; cursor: pointer;
    transition: background-color .22s cubic-bezier(.2, .8, .2, 1), color .2s ease;
}
.benfica-layout .sqv-seg-btn i { font-size: .8em; }
.benfica-layout .sqv-seg-btn:hover { color: var(--theme-ink, var(--bs-body-color)); text-decoration: none; }
.benfica-layout .sqv-seg-btn.is-on,
.benfica-layout .sqv-seg-btn.is-on:hover { background: var(--theme-primary, var(--bs-primary)); color: var(--theme-on-primary, #fff); }
.benfica-layout .sqv-seg-btn:focus-visible { outline: 2px solid var(--theme-primary, var(--bs-primary)); outline-offset: 1px; }
.benfica-layout .sqv-seg-n {
    min-width: 1rem; padding: 0 .28rem; border-radius: 999px;
    background: var(--theme-primary, var(--bs-primary)); color: var(--theme-on-primary, #fff);
    font-size: .58rem; font-weight: 900; line-height: 1rem; text-align: center;
}
.benfica-layout .sqv-seg-btn.is-on .sqv-seg-n { background: var(--theme-on-primary, #fff); color: var(--theme-primary, var(--bs-primary)); }
[data-bs-theme="dark"] .benfica-layout .sqv-seg {
    background: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--bs-tertiary-bg, #1e1e1e));
    border-color: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
}
/* Two switches in one head: the view switch keeps only the current view's words while the
   head is crowded (the others keep theirs as tooltips). */
.benfica-layout .bn-head-actions:has(> .sqv-seg + .sqv-seg) { gap: .45rem; }
.benfica-layout .bn-head-actions:has(> .tn-filter) .sqv-views .sqv-seg-btn:not(.is-on) .sqv-seg-txt { display: none; }
@media (max-width: 1199.98px) {
    .benfica-layout .bn-head-actions:has(> .sqv-seg + .sqv-seg) .sqv-views .sqv-seg-btn:not(.is-on) .sqv-seg-txt,
    .benfica-layout .bn-head-actions:has(> .tn-filter) .tn-filter .sqv-seg-btn:not(.is-on) .sqv-seg-txt { display: none; }
}
/* The phone form of a switch: a round pill with the current choice's icon and a native
   select laid over it (the phone's own picker lists the words). Hidden on wider screens,
   where the segmented switch beside it shows instead. */
.benfica-layout .sqv-pick {
    display: none; position: relative; align-items: center; justify-content: center; gap: .25rem; margin: 0;
    height: 1.9rem; padding: 0 .55rem 0 .6rem; border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 90%, transparent);
    background: var(--bs-body-bg); color: var(--theme-primary, var(--bs-primary)); cursor: pointer;
}
.benfica-layout .sqv-pick > i { pointer-events: none; }
.benfica-layout .sqv-pick-ico { font-size: .78rem; }
.benfica-layout .sqv-pick-chev { font-size: .5rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .sqv-pick select {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
    appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; font-size: 16px; cursor: pointer;
}
.benfica-layout .sqv-pick:focus-within { outline: 2px solid var(--theme-primary, var(--bs-primary)); outline-offset: 1px; }
[data-bs-theme="dark"] .benfica-layout .sqv-pick { background: var(--bs-tertiary-bg, #1e1e1e); }
@media (max-width: 575.98px) {
    .benfica-layout .sqv-pick { display: inline-flex; flex: 0 0 auto; }
    .benfica-layout .bn-head-actions > :is(.tn-filter, .dc-boardseg) { display: none !important; }
}
/* Phones: a head carrying the view switch keeps its title whole — tighter gaps, and on the
   squad grid (title + squad value + switch) the player count gives way (the hero shows it)
   and the title may take two lines inside the one row. */
@media (max-width: 575.98px) {
    body .benfica-layout .bn-section-head:has(.sqv-views) { gap: .6rem; }
    .benfica-layout .bn-section-head:has(.sqv-views) .sqv-seg-btn { padding: .3rem .42rem; }
    .benfica-layout .bn-section-head:has(.sqv-views):has(> .sq-value) > :is(.bn-head-meta, i:first-child) { display: none; }
    /* The switch keeps its three icons whole; the title is what wraps. */
    body .benfica-layout .bn-section-head > .bn-head-actions:has(> .sqv-views) { flex: 0 0 auto !important; }
    body .benfica-layout .bn-section-head > .bn-head-actions > .sqv-views { flex: 0 0 auto !important; overflow: visible; }
    .benfica-layout .bn-section-head:has(.sqv-views) > .sq-value { padding: .22rem .6rem; }
    .benfica-layout .bn-section-head:has(.sqv-views) > .sq-value > i { display: none; }
    body .benfica-layout .bn-section-head:has(.sqv-views):has(> .sq-value) > h2 {
        flex: 1 1 auto !important; min-width: 0 !important; white-space: normal !important;
        overflow: visible !important; line-height: 1.15; overflow-wrap: normal;
    }
}
/* Narrow phones (under 390px): the head's leading icon and bar give their room to the title. */
@media (max-width: 389.98px) {
    .benfica-layout .bn-section-head:has(.sqv-views) > i:first-child,
    .benfica-layout .bn-section-head:has(.sqv-views)::before,
    .benfica-layout .bn-section-head:has(.sqv-views) .sqv-pick-chev { display: none; }
    .benfica-layout .bn-section-head:has(.sqv-views) .sqv-pick { padding: 0 .55rem; }
    /* The squad grid's head: the value pill gives way to the switch on the narrowest phones. */
    .benfica-layout .bn-section-head:has(.sqv-views) > .sq-value { display: none; }
}
/* Phones: icons only (the words stay as the title and for screen readers). */
@media (max-width: 767.98px) {
    .benfica-layout .sqv-seg-btn { padding: .3rem .5rem; }
    .benfica-layout .sqv-seg-btn .sqv-seg-txt {
        position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .benfica-layout .sqv-seg-btn i { font-size: .82rem; }
    .benfica-layout .sqv-seg-n { display: none; }
}
@media (max-width: 359.98px) {
    .benfica-layout .sqv-seg-btn { padding: .3rem .42rem; }
}

/* --------------------------------------------------------------------------
   B. Shared bits: the panel look for item cards, group subheads, empty state
   -------------------------------------------------------------------------- */
.benfica-layout :is(.dc-card, .tn-card, .tn-risk, .tn-clear, .sqv-empty) {
    background: var(--bs-body-bg);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: var(--theme-radius-lg, 1.1rem);
    box-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
}
[data-bs-theme="dark"] .benfica-layout :is(.dc-card, .tn-card, .tn-risk, .tn-clear, .sqv-empty) {
    background: var(--bs-tertiary-bg, #1e1e1e);
    border-color: rgba(255, 255, 255, .08);
}
.benfica-layout .sqv-subhead {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .75rem; padding: 0;
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--theme-ink-muted, var(--bs-secondary-color));
    scroll-margin-top: calc(var(--bn-spy-top, 58px) + 24px);
}
.benfica-layout .sqv-subhead::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 80%, transparent); }
.benfica-layout .sqv-subhead > i { font-size: .95rem; color: var(--slb-gold, #F4B223); }
.benfica-layout .sqv-subhead.tone-danger > i { color: var(--theme-danger, #dc3545); }
.benfica-layout .sqv-subhead.tone-dark > i { color: var(--theme-ink, var(--bs-body-color)); }
.benfica-layout .sqv-subhead.tone-warning > i { color: var(--theme-warning, #ffc107); }
.benfica-layout .sqv-subhead.tone-info > i { color: var(--theme-info, #0dcaf0); }
.benfica-layout .sqv-subhead.tone-success > i { color: var(--theme-success, #198754); }
.benfica-layout .sqv-anchor { display: block; height: 0; scroll-margin-top: calc(var(--bn-spy-top, 58px) + 24px); }
.benfica-layout .sqv-intro { margin: 0 0 .75rem; font-size: .82rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .sqv-empty { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; font-size: .88rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .sqv-empty > i { color: var(--theme-info, #0dcaf0); font-size: 1.1rem; flex: 0 0 auto; }

/* Status tones (chips, availability dots) */
.benfica-layout :is(.tn-chip, .dc-av).tone-danger  { background: rgba(var(--theme-danger-rgb, 220, 53, 69), .12); color: var(--theme-danger-strong, #b02a37); }
.benfica-layout :is(.tn-chip, .dc-av).tone-dark    { background: rgba(33, 37, 41, .1); color: #212529; }
.benfica-layout :is(.tn-chip, .dc-av).tone-warning { background: rgba(var(--theme-warning-rgb, 255, 193, 7), .24); color: color-mix(in oklab, var(--theme-warning, #ffc107) 42%, black); }
.benfica-layout :is(.tn-chip, .dc-av).tone-info    { background: rgba(var(--theme-info-rgb, 13, 202, 240), .16); color: color-mix(in oklab, var(--theme-info, #0dcaf0) 50%, black); }
.benfica-layout :is(.tn-chip, .dc-av).tone-success { background: rgba(var(--theme-success-rgb, 25, 135, 84), .14); color: var(--theme-success-strong, #146c43); }
.benfica-layout :is(.tn-chip, .dc-av).tone-muted   { background: var(--theme-surface-2, var(--bs-tertiary-bg)); color: var(--theme-ink-muted, var(--bs-secondary-color)); }
[data-bs-theme="dark"] .benfica-layout :is(.tn-chip, .dc-av).tone-danger  { background: rgba(var(--theme-danger-rgb, 220, 53, 69), .24); color: color-mix(in oklab, var(--theme-danger, #dc3545) 55%, white); }
[data-bs-theme="dark"] .benfica-layout :is(.tn-chip, .dc-av).tone-dark    { background: rgba(255, 255, 255, .12); color: #e9ecef; }
[data-bs-theme="dark"] .benfica-layout :is(.tn-chip, .dc-av).tone-warning { background: rgba(var(--theme-warning-rgb, 255, 193, 7), .2); color: color-mix(in oklab, var(--theme-warning, #ffc107) 75%, white); }
[data-bs-theme="dark"] .benfica-layout :is(.tn-chip, .dc-av).tone-info    { background: rgba(var(--theme-info-rgb, 13, 202, 240), .2); color: color-mix(in oklab, var(--theme-info, #0dcaf0) 70%, white); }
[data-bs-theme="dark"] .benfica-layout :is(.tn-chip, .dc-av).tone-success { background: rgba(var(--theme-success-rgb, 25, 135, 84), .24); color: #75d69c; }

/* --------------------------------------------------------------------------
   C. The page hero (hero.php -> sqvHeroHtml(); .hero-pv2--page sets the sizes)
   -------------------------------------------------------------------------- */
.sqvh.hero-pv2 .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); }
.sqvh.hero-pv2 .sqvh-badge { place-items: center; }
.sqvh.hero-pv2 .sqvh-badge > i { opacity: 1; color: var(--theme-accent-on-primary, var(--slb-gold, #F4B223)); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.sqvh.hero-pv2 .sqvh-sub { color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); max-width: 40rem; line-height: 1.35; }
.sqvh.hero-pv2 .sqvh-side .pv2-stats-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqvh.hero-pv2 .sqvh-side .pv2-stat { flex: 1 1 0; }
.sqvh.hero-pv2 .sqvh-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
.sqvh.hero-pv2 .sqvh-side .pv2-stat.is-alert .pv2-stat-num { color: var(--theme-accent-on-primary, var(--slb-gold, #F4B223)); }
@media (max-width: 1199.98px) {
    .sqvh.hero-pv2 .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .sqvh.hero-pv2 .sqvh-side { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .sqvh.hero-pv2 .pv2 { grid-template-columns: auto minmax(0, 1fr); row-gap: .55rem; }
    .sqvh.hero-pv2 .pv2-body { display: contents; }
    .sqvh.hero-pv2 .sqvh-badge { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
    .sqvh.hero-pv2 .pv2-position { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
    .sqvh.hero-pv2 .pv2-name { grid-column: 2; grid-row: 2; align-self: start; }
    .sqvh.hero-pv2 .sqvh-side { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   D. Depth chart
   -------------------------------------------------------------------------- */
.benfica-layout .dc-wrap { --dc-turf: #1f7a45; --dc-turf-2: #22894e; --dc-line: rgba(255, 255, 255, .22); }
[data-bs-theme="dark"] .benfica-layout .dc-wrap { --dc-turf: #176036; --dc-turf-2: #1a6d3e; }
.benfica-layout .dc-board[hidden] { display: none !important; }

/* The pitch. No overflow:hidden — the cards' panel shadows must not be clipped; the
   markings are drawn inside the touchline, so nothing needs clipping. */
.benfica-layout .dc-pitch {
    position: relative;
    border-radius: var(--theme-radius-lg, 1.1rem);
    padding: 1rem .9rem 1.1rem;
    background: repeating-linear-gradient(180deg, var(--dc-turf) 0, var(--dc-turf) 3.4rem, var(--dc-turf-2) 3.4rem, var(--dc-turf-2) 6.8rem);
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .3);
}
.benfica-layout .dc-mark { position: absolute; pointer-events: none; }
.benfica-layout .dc-pitch::before { content: ""; position: absolute; inset: .55rem; border: 2px solid var(--dc-line); border-radius: .6rem; pointer-events: none; }
.benfica-layout .dc-halfway { left: .55rem; right: .55rem; top: 50%; height: 2px; background: var(--dc-line); }
.benfica-layout .dc-circle { left: 50%; top: 50%; width: 8.5rem; height: 8.5rem; transform: translate(-50%, -50%); border: 2px solid var(--dc-line); border-radius: 50%; }
.benfica-layout .dc-box { left: 50%; transform: translateX(-50%); width: min(58%, 26rem); height: 3.8rem; border: 2px solid var(--dc-line); }
.benfica-layout .dc-box.is-top { top: .55rem; border-top: 0; }
.benfica-layout .dc-box.is-bottom { bottom: .55rem; border-bottom: 0; }
.benfica-layout .dc-shape {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: .4rem;
    margin: 0 0 .85rem .15rem; padding: .2rem .65rem;
    border-radius: 999px; background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .9); font-size: .68rem; font-weight: 700;
}
.benfica-layout .dc-shape b { font-size: .78rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.benfica-layout .dc-shape i { opacity: .8; }
.benfica-layout .dc-line {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    gap: 1rem; margin-bottom: 1rem;
}
.benfica-layout .dc-line:last-child { margin-bottom: 0; }
.benfica-layout .dc-line > .dc-card { flex: 0 1 16.5rem; min-width: 0; }

/* A card (a family on the pitch, a fine position on the positions board) */
.benfica-layout .dc-card { padding: .65rem .65rem .55rem; transition: transform .2s ease, box-shadow .2s ease; }
.benfica-layout .dc-card:hover { transform: translateY(-2px); }
.benfica-layout .dc-card-head { display: flex; align-items: center; gap: .45rem; margin: 0 .1rem .5rem; }
.benfica-layout .dc-code {
    flex: 0 0 auto;
    font-size: .66rem; font-weight: 900; letter-spacing: .02em; line-height: 1.1;
    padding: .18rem .4rem; border-radius: .45rem;
    background: var(--theme-primary, var(--bs-primary)); color: var(--theme-on-primary, #fff);
}
.benfica-layout .dc-card.is-thin .dc-code { background: var(--theme-warning, #ffc107); color: #1b1b1b; }
.benfica-layout .dc-card-name {
    flex: 1 1 auto; min-width: 0;
    font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--theme-ink-muted, var(--bs-secondary-color));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.benfica-layout .dc-pips { flex: 0 0 3.2rem; display: flex; gap: 2px; }
.benfica-layout .dc-pip { flex: 1; height: .24rem; border-radius: 99px; background: var(--theme-border, var(--bs-border-color)); }
.benfica-layout .dc-pip.is-on { background: var(--theme-success, #198754); }
.benfica-layout .dc-pip.is-cover { background: rgba(var(--theme-warning-rgb, 255, 193, 7), .8); }
.benfica-layout .dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.benfica-layout .dc-list.dc-more { display: none; margin-top: .15rem; }
.benfica-layout .dc-card.is-open .dc-list.dc-more { display: grid; }
.benfica-layout .dc-empty { margin: .2rem 0; font-size: .7rem; font-style: italic; text-align: center; color: var(--theme-ink-faint, var(--bs-secondary-color)); }

/* A player line: face, name + one line of meta, availability dot */
.benfica-layout .dc-player {
    position: relative;
    display: flex; align-items: center; gap: .5rem;
    padding: .22rem .35rem .22rem .45rem; border-radius: .7rem;
    cursor: pointer; transition: background-color .15s ease, opacity .15s ease, box-shadow .15s ease;
    box-shadow: inset 3px 0 0 var(--dc-risk, transparent);
}
.benfica-layout .dc-player:hover { background: var(--theme-surface-2, var(--bs-tertiary-bg)); }
.benfica-layout .dc-player.risk-critical { --dc-risk: var(--theme-danger, #dc3545); }
.benfica-layout .dc-player.risk-warning  { --dc-risk: var(--theme-warning, #ffc107); }
.benfica-layout .dc-player.risk-ok       { --dc-risk: var(--theme-success, #198754); }
.benfica-layout .dc-player.is-cover { opacity: .62; }
.benfica-layout .dc-player.is-starter + .dc-player:not(.is-starter) { margin-top: .3rem; }
.benfica-layout .dc-player.is-starter + .dc-player:not(.is-starter)::before {
    content: ""; position: absolute; left: .45rem; right: .35rem; top: -.24rem; height: 1px;
    background: color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 80%, transparent);
}
.benfica-layout .dc-face { flex: 0 0 auto; display: inline-flex; line-height: 0; }
.benfica-layout .dc-player.is-starter .dc-face { padding: 0 0 .2rem .25rem; }
.benfica-layout .dc-player.is-out .dc-face { filter: grayscale(.7); opacity: .75; }
.benfica-layout .dc-pbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.benfica-layout .dc-name { font-size: .78rem; font-weight: 700; line-height: 1.2; color: var(--theme-ink, var(--bs-body-color)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .dc-player.is-starter .dc-name { font-size: .86rem; font-weight: 800; }
.benfica-layout .dc-name a { color: inherit; text-decoration: none; }
.benfica-layout .dc-name a:hover { color: var(--theme-primary, var(--bs-primary)); text-decoration: underline; }
.benfica-layout .dc-meta {
    display: block; font-size: .64rem; line-height: 1.25;
    color: var(--theme-ink-faint, var(--bs-secondary-color)); font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.benfica-layout .dc-meta > i { font-style: normal; margin: 0 .25rem; opacity: .6; }
.benfica-layout .dc-meta .dc-num { font-weight: 800; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .dc-meta .dc-min { font-weight: 700; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .dc-av {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .62rem;
}
.benfica-layout .dc-morebtn {
    display: block; width: 100%; margin-top: .25rem; padding: .2rem;
    border: 0; border-radius: .6rem; background: transparent; box-shadow: none;
    font-size: .66rem; font-weight: 800; color: var(--theme-ink-faint, var(--bs-secondary-color)); cursor: pointer;
}
.benfica-layout .dc-morebtn:hover { color: var(--theme-primary, var(--bs-primary)); background: var(--theme-surface-2, var(--bs-tertiary-bg)); }

/* Click a player: every card he appears on lights up */
.benfica-layout .dc-wrap.is-linking .dc-player { opacity: .25; }
.benfica-layout .dc-wrap.is-linking .dc-player.is-linked { opacity: 1; background: rgba(var(--theme-primary-rgb, 200, 16, 46), .12); box-shadow: inset 3px 0 0 var(--dc-risk, transparent), 0 0 0 2px rgba(var(--theme-primary-rgb, 200, 16, 46), .45); }
.benfica-layout .dc-wrap.is-linking .dc-card.has-linked { box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 200, 16, 46), .55), var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06)); }
.benfica-layout .dc-wrap.hide-cover .dc-player.is-cover { display: none; }
.benfica-layout .dc-wrap.thin-only .dc-card:not(.is-thin) { display: none; }
.benfica-layout .dc-wrap.thin-only :is(.dc-line, .dc-band):not(:has(.dc-card.is-thin)) { display: none; }

/* The positions board */
.benfica-layout .dc-band + .dc-band { margin-top: 1.25rem; }
.benfica-layout .dc-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 1rem; align-items: start; }

/* The board key: two filter chips, the hint and the contract legend */
.benfica-layout .dc-key { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.25rem; margin-top: 1rem; }
.benfica-layout .dc-key-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.benfica-layout .dc-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--theme-border, var(--bs-border-color)) 90%, transparent);
    background: var(--bs-body-bg); color: var(--theme-ink, var(--bs-body-color));
    font-size: .74rem; font-weight: 800; line-height: 1.3; box-shadow: none; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.benfica-layout .dc-chip:hover { border-color: var(--theme-primary, var(--bs-primary)); }
.benfica-layout .dc-chip[aria-pressed="true"] { background: var(--theme-primary, var(--bs-primary)); border-color: var(--theme-primary, var(--bs-primary)); color: var(--theme-on-primary, #fff); }
[data-bs-theme="dark"] .benfica-layout .dc-chip { background: var(--bs-tertiary-bg, #1e1e1e); }
[data-bs-theme="dark"] .benfica-layout .dc-chip[aria-pressed="true"] { background: var(--theme-primary, var(--bs-primary)); }
.benfica-layout .dc-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--theme-ink-faint, var(--bs-secondary-color)); }
.benfica-layout .dc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .72rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .dc-legend > span { display: inline-flex; align-items: center; gap: .3rem; }
.benfica-layout .dc-sw { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; }
.benfica-layout .dc-legend-note { color: var(--theme-ink-faint, var(--bs-secondary-color)); }

/* Depth sidebar */
.benfica-layout .dc-thin-list, .benfica-layout .dc-out-list { display: grid; gap: .4rem; }
.benfica-layout .dc-thin-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: .8rem; background: var(--theme-surface-2, var(--bs-tertiary-bg)); }
.benfica-layout .dc-thin-row .dc-code { background: var(--theme-warning, #ffc107); color: #1b1b1b; font-size: .6rem; }
.benfica-layout .dc-thin-txt, .benfica-layout .dc-out-txt { flex: 1 1 auto; min-width: 0; font-size: .78rem; line-height: 1.25; color: var(--theme-ink, var(--bs-body-color)); }
.benfica-layout :is(.dc-thin-txt, .dc-out-txt) b { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout :is(.dc-thin-txt, .dc-out-txt) span { display: block; color: var(--theme-ink-muted, var(--bs-secondary-color)); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .dc-out-row { display: flex; align-items: center; gap: .6rem; padding: .3rem .4rem; border-radius: .8rem; color: inherit; text-decoration: none; }
.benfica-layout .dc-out-row:hover { background: var(--theme-surface-2, var(--bs-tertiary-bg)); color: inherit; }
.benfica-layout .dc-side-note { margin: .75rem 0 0; font-size: .72rem; line-height: 1.4; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .dc-side-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .65rem; font-size: .78rem; font-weight: 800; color: var(--theme-link, var(--theme-primary, var(--bs-primary))); text-decoration: none; }
.benfica-layout .dc-side-link:hover { text-decoration: underline; }
.benfica-layout .dc-riskbars { display: grid; gap: .55rem; }
.benfica-layout .dc-riskrow { display: grid; gap: .25rem; }
.benfica-layout .dc-risktop { display: flex; justify-content: space-between; align-items: baseline; font-size: .76rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .dc-risktop b { color: var(--theme-ink, var(--bs-body-color)); font-weight: 800; }
.benfica-layout .dc-risktrack { height: .45rem; border-radius: 99px; background: var(--theme-surface-2, var(--bs-tertiary-bg)); overflow: hidden; }
.benfica-layout .dc-riskfill { height: 100%; border-radius: 99px; }

@media (max-width: 575.98px) {
    .benfica-layout .dc-pitch { padding: .75rem .6rem .8rem; }
    .benfica-layout .dc-circle { width: 6rem; height: 6rem; }
    .benfica-layout .dc-line { flex-direction: column; align-items: stretch; gap: .75rem; margin-bottom: .75rem; }
    .benfica-layout .dc-line > .dc-card { flex: 0 0 auto; width: 100%; }
    .benfica-layout .dc-pos-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .benfica-layout .dc-hint { display: none; }
    .benfica-layout .dc-key { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   E. Team News
   -------------------------------------------------------------------------- */
/* The groups pack side by side when they are small: each asks for room for its own cards
   (--n, at most 3), so a lone suspension and a lone doubt share a row instead of each
   leaving two empty columns. */
.benfica-layout .tn-board { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.4rem 1rem; }
.benfica-layout .tn-board > .sqv-anchor { flex: 0 0 100%; margin-bottom: -1.4rem; }
.benfica-layout .tn-group { flex: 1 1 calc(var(--n, 1) * 19rem + (var(--n, 1) - 1) * 1rem); min-width: min(100%, 19rem); }
.benfica-layout .tn-board > .tn-clear { flex: 1 1 100%; }
.benfica-layout .tn-group[hidden] { display: none !important; }
.benfica-layout .tn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.benfica-layout .tn-card { padding: .85rem .9rem .7rem; min-width: 0; transition: transform .2s ease; }
.benfica-layout .tn-card:hover { transform: translateY(-2px); }
.benfica-layout .tn-card-top, .benfica-layout .tn-risk { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.benfica-layout .tn-face { flex: 0 0 auto; display: inline-flex; line-height: 0; padding: 0 0 .3rem .35rem; }
.benfica-layout .tn-risk .tn-face { padding: 0; }
.benfica-layout .tn-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.benfica-layout .tn-name { font-size: .92rem; font-weight: 800; line-height: 1.2; color: var(--theme-ink, var(--bs-body-color)); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .tn-name:hover { color: var(--theme-primary, var(--bs-primary)); text-decoration: underline; }
.benfica-layout .tn-sub { font-size: .75rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .tn-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
    padding: .24rem .6rem; border-radius: 999px;
    font-size: .68rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.benfica-layout .tn-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0 0; }
.benfica-layout .tn-fact { min-width: 0; padding: .4rem .55rem; border-radius: .75rem; background: var(--theme-surface-2, var(--bs-tertiary-bg)); }
.benfica-layout .tn-fact dt { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-ink-faint, var(--bs-secondary-color)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .tn-fact dd { margin: .1rem 0 0; font-size: .86rem; font-weight: 800; line-height: 1.2; color: var(--theme-ink, var(--bs-body-color)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.benfica-layout .tn-fact dd small { display: block; font-size: .66rem; font-weight: 700; color: var(--theme-ink-muted, var(--bs-secondary-color)); overflow: hidden; text-overflow: ellipsis; }
.benfica-layout .tn-fact.is-warn dd, .benfica-layout .tn-fact.is-warn dd small { color: color-mix(in oklab, var(--theme-warning, #ffc107) 45%, black); }
.benfica-layout .tn-fact.is-good dd { color: var(--theme-success-strong, #146c43); }
.benfica-layout .tn-fact.is-muted dd { color: var(--theme-ink-muted, var(--bs-secondary-color)); font-weight: 700; }
[data-bs-theme="dark"] .benfica-layout .tn-fact { background: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--bs-tertiary-bg, #1e1e1e)); }
[data-bs-theme="dark"] .benfica-layout .tn-fact.is-warn dd, [data-bs-theme="dark"] .benfica-layout .tn-fact.is-warn dd small { color: color-mix(in oklab, var(--theme-warning, #ffc107) 80%, white); }
[data-bs-theme="dark"] .benfica-layout .tn-fact.is-good dd { color: #75d69c; }
.benfica-layout .tn-foot { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .68rem; color: var(--theme-ink-faint, var(--bs-secondary-color)); }

/* All clear */
.benfica-layout .tn-clear { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.3rem; }
.benfica-layout .tn-clear-ico { flex: 0 0 auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(var(--theme-success-rgb, 25, 135, 84), .14); color: var(--theme-success, #198754); font-size: 1.45rem; }
.benfica-layout .tn-clear-txt { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.benfica-layout .tn-clear-txt b { font-size: 1.05rem; font-weight: 900; }
.benfica-layout .tn-clear-txt span { font-size: .84rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }

/* Suspension risk */
.benfica-layout .tn-risk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.benfica-layout .tn-risk { padding: .6rem .8rem; }
.benfica-layout .tn-card-ico { flex: 0 0 auto; color: #f4c20d; font-size: 1rem; transform: rotate(8deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }

/* Team News sidebar */
.benfica-layout .tn-nm-card { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.benfica-layout .tn-nm-card:hover { color: inherit; }
.benfica-layout .tn-nm-card:hover b { color: var(--theme-primary, var(--bs-primary)); }
.benfica-layout .tn-nm-crest-wrap { flex: 0 0 auto; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: var(--theme-surface-2, var(--bs-tertiary-bg)); }
.benfica-layout .tn-nm-crest-wrap :is(img, span) { margin: 0 !important; }
.benfica-layout .tn-nm-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.benfica-layout .tn-nm-txt b { font-size: .95rem; font-weight: 900; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benfica-layout .tn-nm-txt span { font-size: .74rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); line-height: 1.3; }
.benfica-layout .tn-nm-when { flex: 0 0 auto; align-self: flex-start; padding: .2rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 800; white-space: nowrap; background: rgba(var(--theme-primary-rgb, 200, 16, 46), .1); color: var(--theme-link, var(--theme-primary, var(--bs-primary))); }
.benfica-layout .tn-av-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin-bottom: .5rem; }
.benfica-layout .tn-av-top b { font-size: 1.35rem; font-weight: 900; line-height: 1; color: var(--theme-ink, var(--bs-body-color)); font-variant-numeric: tabular-nums; }
.benfica-layout .tn-av-top span { font-size: .74rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }
.benfica-layout .tn-av-track { height: .5rem; border-radius: 99px; background: rgba(var(--theme-danger-rgb, 220, 53, 69), .18); overflow: hidden; margin-bottom: .85rem; }
.benfica-layout .tn-av-fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--theme-success, #198754), color-mix(in oklab, var(--theme-success, #198754) 70%, white)); }
.benfica-layout .tn-av-lines { display: grid; gap: .45rem; }
.benfica-layout .tn-av-line { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .76rem; }
.benfica-layout .tn-av-name { display: inline-flex; align-items: center; gap: .4rem; color: var(--theme-ink, var(--bs-body-color)); font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.benfica-layout .tn-av-name i { width: 1rem; text-align: center; color: var(--slb-gold, #F4B223); }
.benfica-layout .tn-av-mini { height: .35rem; border-radius: 99px; background: var(--theme-surface-2, var(--bs-tertiary-bg)); overflow: hidden; }
.benfica-layout .tn-av-mini > span { display: block; height: 100%; border-radius: 99px; background: var(--theme-success, #198754); }
.benfica-layout .tn-av-line.has-out .tn-av-mini > span { background: var(--theme-warning, #ffc107); }
.benfica-layout .tn-av-line b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--theme-ink, var(--bs-body-color)); }
.benfica-layout .tn-av-updated { display: flex; align-items: center; gap: .35rem; margin: .85rem 0 0; font-size: .72rem; color: var(--theme-ink-muted, var(--bs-secondary-color)); }

@media (max-width: 575.98px) {
    .benfica-layout .tn-grid, .benfica-layout .tn-risk-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .benfica-layout .tn-card { padding: .75rem .75rem .6rem; }
    .benfica-layout .tn-card-top { gap: .55rem; }
    .benfica-layout .tn-facts { gap: .35rem; }
    .benfica-layout .tn-fact { padding: .35rem .45rem; }
    .benfica-layout .tn-fact dd { font-size: .8rem; }
}
@media (max-width: 379.98px) {
    /* The chip keeps its icon; its word moves to the tooltip so the name keeps room. */
    .benfica-layout .tn-chip > span { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .benfica-layout .tn-chip { padding: .32rem .42rem; }
}

@media (prefers-reduced-motion: reduce) {
    .benfica-layout :is(.dc-card, .tn-card):hover { transform: none; }
}

/* Team News (owner, 5 Oct 2026): no empty band above each group. The zero-height jump
   anchor before every group sat on its own flex row and the row gap opened 1.4rem above
   it; the board has no row gap now, the groups carry the spacing. */
.benfica-layout .tn-board { row-gap: 0; }
.benfica-layout .tn-board > .sqv-anchor { margin-bottom: 0; }
.benfica-layout .tn-board > .tn-group { margin-bottom: 1.25rem; }
.benfica-layout .tn-board > .tn-group:last-child { margin-bottom: 0; }
/* The next-match crest on its own, no grey disc behind it. */
.benfica-layout .tn-nm-crest-wrap { background: transparent !important; border-radius: 0 !important; width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }

/* --------------------------------------------------------------------------
   The My Benfica standard (owner, 5 Oct 2026) for the Depth Chart and Team News views
   only (#dc-board / #tn-board; the squad grid and its other views have their own owner).
   The switch = .mb-seg on phones: icons only, .26rem .55rem, .45rem under 380px.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .benfica-layout :is(#dc-board, #tn-board) .sqv-seg-btn,
    .benfica-layout :is(#dc-board, #tn-board) > .bn-section-head:has(.sqv-views) .sqv-seg-btn { padding: .26rem .55rem; }
    .benfica-layout :is(#dc-board, #tn-board) .sqv-seg-btn i { font-size: .8em; }
}
@media (max-width: 379.98px) {
    .benfica-layout :is(#dc-board, #tn-board) .sqv-seg-btn,
    .benfica-layout :is(#dc-board, #tn-board) > .bn-section-head:has(.sqv-views) .sqv-seg-btn { padding: .26rem .45rem; }
}