/* ==========================================================================
   Competition pages — the modern skin (Oct 2026)
   --------------------------------------------------------------------------
   competitions.php (every view), fixtures_results.php (every view) and the squad.php
   player grid. The owner's standard is My Benfica: these pages carry
   `.benfica-layout.mb-modern.cp-modern` and link themes/default/css/mybenfica-modern.css
   first, so its tokens (--mb-*) and its classes (.mb-box, .mb-row, .mb-seg, .mb-pill,
   .mb-next, .mb-cd, .mb-chip, .mb-score, .mb-date …) are the ones on screen. This sheet
   adds only what those pages have and My Benfica does not. Every selector starts at
   .cp-modern (the page) or .cph (its hero).

   Layers: A. page hero  B. shared bits (picker, Options pill, logos, crests, sidebar)
           C. Fixtures & Results  D. squad grid  E. competitions.php  F. phones
           G. reduced motion
   Colours are theme tokens (literals only as var() fallbacks and neutral alphas), so
   light, dark and every skin follow. No box-shadow on buttons; crests and competition
   logos are bare (no disc, plate or frame) with a light drop-shadow; faces are round.
   ========================================================================== */

/* ==========================================================================
   A. The page hero (.hero-pv2--page: badge, eyebrow, title, subtitle, ONE stats panel).
      Sizes come from style.css's shared .hero-pv2--page block, like My Benfica's.
   ========================================================================== */
.cph.hero-pv2 .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); }
.cph.hero-pv2 .cph-badge { place-items: center; }
.cph.hero-pv2 .cph-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)); }
/* A competition's own logo is the badge: no plate behind it. */
.cph.hero-pv2 .cph-badge.is-logo { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; }
.cph.hero-pv2 .cph-badge.is-logo { position: relative; }
.cph.hero-pv2 .cph-logo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28)); }
.cph.hero-pv2 .cph-logo.is-icon { display: grid; place-items: center; }
.cph.hero-pv2 .cph-logo.is-icon i { font-size: 1.7rem; color: var(--theme-accent-on-primary, var(--slb-gold, #F4B223)); }
.cph.hero-pv2 .pv2-position i { margin-right: .35rem; }
.cph.hero-pv2 .cph-sub { max-width: 40rem; color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); line-height: 1.35; }
.cph.hero-pv2 .cph-champ { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; font-weight: 700; }
.cph.hero-pv2 .cph-champ > i { color: var(--theme-accent-on-primary, var(--slb-gold, #F4B223)); }
.cph.hero-pv2 .cph-champ-label { text-transform: uppercase; letter-spacing: .06em; font-size: .72em; font-weight: 800; opacity: .85; }
.cph.hero-pv2 .cph-champ a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cph.hero-pv2 .cph-champ a:hover { text-decoration: underline; }
.cph.hero-pv2 .cph-crest { flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.cph.hero-pv2 .cph-side .pv2-stats-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cph.hero-pv2 .cph-side .pv2-stat { flex: 1 1 0; }
.cph.hero-pv2 .cph-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
.cph.hero-pv2 .cph-side .pv2-stat-num small { font-size: .62em; font-weight: 800; opacity: .75; margin-left: .05em; }
@media (max-width: 1199.98px) {
    .cph.hero-pv2 .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .cph.hero-pv2 .cph-side { grid-column: 1 / -1; }
}

/* ==========================================================================
   B. Shared bits
   ========================================================================== */
/* Crests and competition logos: bare, a light drop-shadow, never a plate. */
.cp-modern .cp-crest, .cp-modern .cp-logo { flex: 0 0 auto; object-fit: contain; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); vertical-align: middle; }
[data-bs-theme="dark"] .cp-modern .cp-crest { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
/* Dark logos (UEFA's black artwork) would vanish on a dark card: a faint light outline. */
[data-bs-theme="dark"] .cp-modern .cp-logo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.cp-modern .cp-logo.is-icon { display: inline-grid; place-items: center; color: var(--mb-accent-ink); filter: none; }
.cp-modern .cp-logo.is-icon i { font-size: .8em; }
.cp-modern span.cp-crest { color: var(--mb-muted); }

/* The pill picker: icon + current label + chevron, a native select laid over it (the
   season picker's round pill). */
.cp-modern .cp-pick {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; margin: 0;
    max-width: 16rem; padding: .28rem .8rem;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease;
}
.cp-modern .cp-pick:hover { background: var(--mb-soft-2); }
.cp-modern .cp-pick > i, .cp-modern .cp-pick > span { pointer-events: none; }
.cp-modern .cp-pick-ico { color: var(--mb-primary-ink); font-size: .8em; }
.cp-modern .cp-pick-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-modern .cp-pick-chev { color: var(--mb-muted); font-size: .55rem; }
.cp-modern .cp-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;
}
.cp-modern .cp-pick:focus-within { outline: 2px solid var(--mb-primary); outline-offset: 1px; }
/* A filter that is set reads as on: the solid primary pill. */
.cp-modern .cp-pick.is-set { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
.cp-modern .cp-pick.is-set .cp-pick-ico, .cp-modern .cp-pick.is-set .cp-pick-chev { color: var(--mb-on); }

/* An icon pill (Collapse All, Follow …): .mb-pill's look, the words as its title on phones. */
.cp-modern .cp-icon-pill { cursor: pointer; }

/* The head's controls. Wide screens: one row of pills. Phones: one Options pill opening a
   small panel under the head (see F). */
.cp-modern .bn-section-head .cp-head-actions { gap: .4rem; }
.cp-modern .cp-tools { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.cp-modern .cp-tools-btn { display: none; }
.cp-modern .cp-tools-pop { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.cp-modern .cp-tools-group { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.cp-modern .cp-tools-dot { display: none; }

/* Sidebar: My Benfica's 2-column stat tiles and side note. */
.cp-modern .bn-aside .cp-side-tiles {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem;
    margin: 0; padding: 0; list-style: none;
}
.cp-modern .bn-aside .cp-side-tiles li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft); }
.cp-modern .bn-aside .cp-side-tiles span { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.cp-modern .bn-aside .cp-side-tiles b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.cp-modern .bn-aside .cp-side-note { margin: 0 0 .6rem; color: var(--mb-muted); font-size: .78rem; line-height: 1.4; }
.cp-modern .bn-aside .bn-cats .cp-logo { margin-right: .45rem; width: 20px; height: 20px; }
.cp-modern .bn-aside .bn-cats a > span:first-child { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   C. Fixtures & Results
   ========================================================================== */
.fx-modern .fixtures-results { display: flex; flex-direction: column; gap: 1rem; }
.fx-modern .fx-months { display: flex; flex-direction: column; gap: 1rem; }
.fx-modern .fx-month[hidden] { display: none; }

/* Month head: a slim pill bar that sticks under the site header while its matches scroll. */
.fx-modern .fx-mhead {
    position: sticky; top: calc(var(--navbar-height, 50px) + .5rem); z-index: 5;
    display: flex; align-items: center; gap: .55rem; min-width: 0;
    padding: .4rem .5rem .4rem .85rem;
    border: 1px solid var(--mb-ring); border-radius: 999px;
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow); color: var(--mb-ink);
    cursor: pointer; user-select: none;
}
.fx-modern .fx-mhead:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 2px; }
.fx-modern .fx-mhead-title { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 0; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-modern .fx-mhead-title b { font-weight: 900; }
.fx-modern .fx-mhead-year { color: var(--mb-muted); font-weight: 700; font-size: .85em; }
.fx-modern .fx-mhead-tag { flex: 0 0 auto; }
.fx-modern .fx-mhead-rec { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; flex: 0 0 auto; }
.fx-modern .fx-wdl {
    display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .4rem; border-radius: .25rem;
    font-size: .66rem; font-weight: 900; line-height: 1.5; font-variant-numeric: tabular-nums;
    background: var(--mb-soft-2); color: var(--mb-muted);
}
.fx-modern .fx-wdl.is-w { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.fx-modern .fx-wdl.is-l { background: rgba(var(--mb-bad-rgb), .12); color: var(--mb-bad-ink); }
.fx-modern .fx-wdl.is-up { background: rgba(var(--mb-info-rgb), .12); color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }
.fx-modern .fx-wdl i { font-size: .85em; }
.fx-modern .fx-wdl[hidden] { display: none; }
.fx-modern .fx-mhead-n { margin-left: 0; flex: 0 0 auto; }
.fx-modern .fx-mhead-chev { flex: 0 0 auto; width: 1.6rem; text-align: center; color: var(--mb-primary-ink); font-size: .7rem; }
/* The two-state icon the toggle swaps (fa-plus / fa-minus) is drawn as a chevron. */
.fx-modern .fx-mhead-chev.fa-plus::before { content: "\f078"; }
.fx-modern .fx-mhead-chev.fa-minus::before { content: "\f077"; }
.fx-modern .fx-mbody { margin-top: .6rem; }
.fx-modern .fx-month.is-filtered .fx-mhead-rec { display: none; }

/* List view: THE row. */
.fx-modern .fx-list { padding: .2rem .7rem; }
.fx-modern .fx-row { grid-template-columns: 2.3rem minmax(0, 1fr) auto; padding: .38rem .1rem; }
.fx-modern .fx-row[hidden], .fx-modern .fx-card[hidden] { display: none; }
.fx-modern .fx-date small { color: var(--mb-primary-ink); }
.fx-modern .fx-teams { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.fx-modern .fx-teams .fx-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-modern .fx-team { color: var(--mb-ink); text-decoration: none; font-weight: 700; }
.fx-modern .fx-team.is-own { font-weight: 900; }
.fx-modern a.fx-team:hover { color: var(--mb-primary-ink); text-decoration: underline; }
.fx-modern .fx-vs { flex: 0 0 auto; color: var(--mb-muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; margin: 0 .1rem; }
.fx-modern .fx-crest-sm { width: 18px; height: 18px; }
.fx-modern .fx-red { flex: 0 0 auto; display: inline-flex; gap: 1px; }
.fx-modern .mb-row-meta .fx-logo-xs { width: 14px; height: 14px; margin: -.1rem .3rem 0 0; }
.fx-modern .fx-row .mb-row-side { gap: .4rem; }
.fx-modern .fx-score { text-decoration: none; }
.fx-modern a.fx-score:hover { filter: brightness(.95); color: inherit; }
.fx-modern .mb-score.is-w, .fx-modern .mb-score.is-l { color: #fff; }
.fx-modern .mb-score.is-d { background: var(--mb-soft-2); color: var(--mb-ink); }
.fx-modern .mb-score.is-live { background: var(--mb-primary); color: var(--mb-on); }
.fx-modern .fx-live-min { color: var(--mb-primary-ink); font-size: .68rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.fx-modern .fx-note { color: var(--mb-muted); font-size: .64rem; font-weight: 700; white-space: nowrap; }
.fx-modern .fx-kick {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.9rem;
    padding: .12rem .45rem; border-radius: .25rem;
    background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink);
    font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; text-decoration: none;
}
.fx-modern a.fx-kick:hover { background: rgba(var(--mb-primary-rgb), .16); color: var(--mb-primary-ink); }
.fx-modern .fx-tv { font-size: .66rem; }
.fx-modern .fx-tv .me-1 { margin-right: .25rem !important; }
.fx-modern .fx-tickets, .fx-modern .fx-preview { padding: .16rem .6rem; font-size: .68rem; }
.fx-modern .fx-tickets .me-1 { margin-right: .2rem !important; }

/* Follow star on unplayed fixtures (follow-buttons.js swaps fas / far). */
.fx-modern .fx-star {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent;
    font-size: .95rem; line-height: 1; color: var(--mb-muted); cursor: pointer; box-shadow: none;
}
.fx-modern .fx-star:hover { color: var(--mb-accent-ink); background: rgba(var(--mb-accent-rgb), .16); }
.fx-modern .fx-star[data-following="1"] { color: var(--mb-accent-ink); }
.fx-modern .fx-star:disabled { opacity: .5; cursor: default; }
.fx-modern .fx-star .follow-count { display: none; }

/* Card view: two cards a row on wide screens, the .mb-box frame each. */
.fx-modern .fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.fx-modern .fx-card {
    display: flex; flex-direction: column; gap: .5rem; min-width: 0;
    padding: .65rem .75rem .6rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow); color: var(--mb-ink);
}
.fx-modern .fx-card.is-live { box-shadow: var(--mb-shadow), inset 3px 0 0 var(--mb-primary); }
.fx-modern .fx-card-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fx-modern .fx-card-logo { width: 22px; height: 22px; }
.fx-modern .fx-card-comp { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.fx-modern .fx-card-comp a, .fx-modern .fx-card-comp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: .8rem; font-weight: 800; text-decoration: none; }
.fx-modern .fx-card-comp a:hover { color: var(--mb-primary-ink); text-decoration: underline; }
.fx-modern .fx-card-comp small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .68rem; font-weight: 600; }
.fx-modern .fx-when { flex: 0 0 auto; color: var(--mb-muted); font-size: .68rem; font-weight: 800; white-space: nowrap; }
.fx-modern .fx-board {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem;
    padding: .55rem .5rem; border-radius: var(--mb-radius-sm);
    background: linear-gradient(135deg, rgba(var(--mb-primary-rgb), .05), var(--mb-soft) 60%);
}
[data-bs-theme="dark"] .fx-modern .fx-board { background: linear-gradient(135deg, rgba(var(--mb-primary-rgb), .14), var(--mb-soft) 60%); }
.fx-modern .fx-side { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; text-align: center; }
.fx-modern .fx-side-name { display: inline-flex; align-items: center; gap: .2rem; max-width: 100%; min-width: 0; font-size: .82rem; line-height: 1.2; }
.fx-modern .fx-side-name .fx-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-modern .fx-crest { width: 40px; height: 40px; }
.fx-modern .fx-mid { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.fx-modern .fx-score--lg { min-width: 3.4rem; padding: .22rem .55rem; font-size: 1rem; }
.fx-modern .fx-mid .fx-kick { min-width: 3.4rem; padding: .22rem .55rem; font-size: .9rem; }
.fx-modern .fx-card-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem; min-height: 1.5rem; }
.fx-modern .fx-venue i { color: var(--mb-primary-ink); }
.fx-modern .fx-venue.is-home i { color: var(--mb-ok-ink); }

/* Next match. */
.fx-modern .fx-next .mb-next-foot { gap: .45rem .6rem; }
.fx-modern .fx-next-meta, .fx-modern .fx-next-act { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.fx-modern .fx-next .mb-next-logo { width: 30px; height: 30px; }

/* Calendar view sits in the card frame; the shared calendar keeps its own grid. */
.fx-modern .fx-calendar { padding: .75rem; overflow: visible; }

/* Sidebar panels. */
.fx-modern .bn-form5 { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.fx-modern .bn-f { width: 1.6rem; height: 1.6rem; border-radius: .25rem; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 900; color: #fff; }
.fx-modern .bn-f.W { background: var(--mb-ok); }
.fx-modern .bn-f.D { background: color-mix(in oklab, var(--mb-muted) 80%, var(--mb-card-bg)); }
.fx-modern .bn-f.L { background: var(--mb-bad); }
.fx-modern .bn-streak { margin-left: auto; padding: .18rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: var(--mb-soft-2); color: var(--mb-muted); }
.fx-modern .bn-streak.is-w { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.fx-modern .bn-streak.is-l { background: rgba(var(--mb-bad-rgb), .12); color: var(--mb-bad-ink); }
.fx-modern .fx-ha { display: grid; gap: .45rem; }
.fx-modern .fx-ha-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .82rem; font-weight: 700; }
.fx-modern .fx-ha-label { display: inline-flex; align-items: center; gap: .45rem; color: var(--mb-ink); }
.fx-modern .fx-ha-label i { color: var(--mb-primary-ink); }
.fx-modern .fx-ha-sub { color: var(--mb-muted); font-size: .7rem; font-weight: 600; }
.fx-modern .fx-ha-rec b { font-weight: 900; font-variant-numeric: tabular-nums; }
.fx-modern .fx-ha-rec .is-w { color: var(--mb-ok-ink); }
.fx-modern .fx-ha-rec .is-d { color: var(--mb-muted); }
.fx-modern .fx-ha-rec .is-l { color: var(--mb-bad-ink); }
.fx-modern .fx-cal-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-modern .bn-section-head .bn-manage { order: 11; }
.fx-modern .fx-filter-empty[hidden] { display: none; }
/* A competition the picked side never played is left out of the competition picker (comps-modern.js). */
.fx-modern .st-pick .st-pick-opt[hidden] { display: none; }
/* The sidebar panels, their By Competition rows and the next-match cards that the picks
   leave empty (fixtures-sidebar.js). */
.fx-modern .fx-next[hidden], .fx-modern .bn-aside [data-fx-sb][hidden], .fx-modern .bn-aside li[data-fx-bc][hidden] { display: none !important; }

/* ==========================================================================
   E. competitions.php
   ========================================================================== */
/* E1. Head controls: the matchday picker, then the tools group (Table / Projection, What if?,
   phases, the view picker) on the far right. */
.co-modern .bn-section-head .cp-md-actions { order: 10; }
.co-modern .bn-section-head .cp-viewctl { order: 12; }
.co-modern .bn-section-head .bn-group-actions { order: 11; }
.co-modern .cp-md { display: inline-flex; align-items: center; gap: .2rem; }
/* The ‹ › steps: round buttons in the matchday pill's own look (filters-std's .st-pick-btn:
   the soft fill, the 70% line, the head controls' 30px; the chevron in the site gold like the
   pill's icon; hover = the pill's hover fill). */
.co-modern .cp-md-step {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: var(--bn-ctl-h, 1.875rem); height: var(--bn-ctl-h, 1.875rem); padding: 0 !important; margin: 0; box-sizing: border-box;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent) !important; border-radius: 999px !important;
    background: var(--mb-soft) !important; color: var(--theme-accent, var(--slb-gold, #f4b223)) !important;
    font-size: .68rem; line-height: 1; text-decoration: none; box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease;
}
.co-modern a.cp-md-step:hover { background: var(--mb-soft-2) !important; color: var(--theme-accent, var(--slb-gold, #f4b223)) !important; }
.co-modern a.cp-md-step:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 2px; }
.co-modern .bn-section-head .cp-md-step i { color: inherit !important; font-size: inherit !important; width: auto !important; margin: 0 !important; }
.co-modern .cp-md-step.is-off { opacity: .35; }
.co-modern .cp-md-pick > .st-pick-btn { max-width: 11rem; }
/* Table / Projection: the My Benfica switch. standings-view-toggle.js still writes inline
   colours onto these buttons, so the states are pinned here. */
.co-modern .cp-std-seg .mb-seg-btn[data-std-view] { background: transparent !important; border: 0 !important; color: var(--mb-muted) !important; }
.co-modern .cp-std-seg .mb-seg-btn[data-std-view][aria-pressed="true"] { background: var(--mb-primary) !important; color: var(--mb-on) !important; }
.co-modern .cp-std-seg .mb-seg-btn[data-std-view] i { color: inherit !important; font-size: .8em !important; width: auto !important; }
.co-modern .cp-std-seg[hidden] { display: none !important; }

.co-modern .bn-section-head .cp-tools-pop i { font-size: .8em !important; width: auto !important; color: inherit; }
.co-modern .bn-section-head .cp-pick > i.cp-pick-ico { color: var(--mb-primary-ink) !important; }
.co-modern .bn-section-head .cp-pick > i.cp-pick-chev { color: var(--mb-muted) !important; font-size: .55rem !important; }
/* Phases (multi-phase editions): the .mb-seg look on the page's own .phase-badge buttons. */
.co-modern .cp-phase-seg .phase-badge { cursor: pointer; }
.co-modern .cp-phase-seg .phase-badge.phase-badge-current { background: var(--mb-primary); color: var(--mb-on); }
.co-modern .cp-phase-seg .phase-toggle { padding: .2rem .5rem; }
/* The group selector: the pill picker's look. */
.co-modern .bn-group-select {
    height: 1.7rem; max-width: 14rem; padding: 0 1.6rem 0 .7rem !important;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent) !important; border-radius: 999px !important;
    background-color: var(--mb-soft) !important; color: var(--mb-ink) !important;
    font-size: .74rem !important; font-weight: 800 !important; box-shadow: none !important;
}
.co-modern .bn-group-select:hover { background-color: var(--mb-soft-2) !important; color: var(--mb-ink) !important; }
/* E4. The main column's own block is empty on views whose content is a section of its own
   (its controls moved to that section's head): it takes no room. */
.co-modern #competition-main-section > .comp-section:not(:has(> .bn-section-body > :not(style):not(script))) { display: none; }
.co-modern .bn-main > #competition-main-section:not(:has(> .comp-section > .bn-section-body > :not(style):not(script))) { margin: 0 !important; }

/* E5. Standings: compact rows, bare crests, the zone colour bar, square form chips.
   (The quiet header, hairlines and zone wash come from the page's own table skin.) */
.co-modern .standings-table-wrap.cpp-card,
.co-modern .proj-table-wrap {
    border: 1px solid var(--mb-ring) !important; border-radius: var(--mb-radius) !important;
    background: var(--mb-card-bg) !important; box-shadow: var(--mb-shadow) !important;
}
.co-modern .standings-table { font-size: .84rem; }
.co-modern .standings-table > tbody > tr > td { padding-top: .34rem; padding-bottom: .34rem; }
.co-modern .standings-table > tbody > tr > td:first-child { border-left-width: 3px; }
.co-modern .standings-table > tbody > tr > td:nth-child(2) a { font-weight: 700; color: var(--mb-ink); }
.co-modern .standings-table img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
[data-bs-theme="dark"] .co-modern .standings-table img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.co-modern .standings-pos { font-size: .8rem; }
.co-modern .standings-table thead tr:first-child th { background-color: var(--mb-soft) !important; }
.co-modern .standings-view-select {
    max-width: 9rem; padding: .1rem .5rem; border-radius: 999px; background: var(--mb-card-bg);
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent);
}
/* Last 5: one square chip per match (W/D/L letters), an unplayed slot as a soft square. */
.co-modern .bn-form-strip { gap: 2px; background: transparent; overflow: visible; }
.co-modern .bn-form-cell { width: 18px; height: 18px; border-radius: .25rem; background: var(--mb-soft-2); font-size: .6rem; }
.co-modern .bn-form-cell.bn-form-w { background: var(--mb-ok); }
.co-modern .bn-form-cell.bn-form-d { background: color-mix(in oklab, var(--mb-muted) 80%, var(--mb-card-bg)); }
.co-modern .bn-form-cell.bn-form-l { background: var(--mb-bad); }
.co-modern .bn-live-table-strip { margin-bottom: .6rem; }

/* E6. Knockout phase: a section head of its own, rounds as slim pill bars, ties as cards. */
.co-modern .cp-ko-head { margin-bottom: .75rem; }
.co-modern .cp-ko-seg .mb-seg-btn.btn-light { background: var(--mb-primary); color: var(--mb-on); }
.co-modern .cp-ko-seg .mb-seg-btn.btn-outline-light { background: transparent; color: var(--mb-muted); }
.co-modern .cp-ko-seg .mb-seg-btn i { font-size: .8em !important; width: auto !important; color: inherit !important; }
.co-modern .cp-ko-body { display: flex; flex-direction: column; gap: .6rem; }
.co-modern .ko-round-head,
.co-modern .fx-group-head {
    display: flex; align-items: center; gap: .55rem; min-width: 0;
    padding: .35rem .5rem .35rem .7rem;
    border: 1px solid var(--mb-ring); border-radius: 999px;
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
}
.co-modern .comp-section .bn-section-body .card.fx-group-card, .co-modern .card.fx-group-card {
    border: 0 !important; background: transparent !important; box-shadow: none !important; margin: 0 0 .6rem !important; overflow: visible !important;
}
.co-modern .card.fx-group-card > .card-body { padding: 0 !important; }
.co-modern .fx-group-head .rounded-circle,
.co-modern .ko-round-head .rounded-circle { width: 1.7rem !important; height: 1.7rem !important; border-radius: .5rem !important; }
.co-modern .fx-group-head-left, .co-modern .ko-round-head-left { flex: 1 1 auto !important; min-width: 0; font-size: .9rem; font-weight: 900; }
.co-modern .fx-group-head-left > span, .co-modern .ko-round-head-left > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-modern .fx-group-stats, .co-modern .ko-round-stats { flex: 0 0 auto !important; gap: .25rem !important; }
.co-modern .fx-summary-tile, .co-modern .ko-round-stat {
    flex: 0 0 auto !important; flex-direction: row !important; align-items: baseline !important; gap: .25rem;
    padding: .05rem .5rem !important; border-radius: 999px !important; background: var(--mb-soft) !important;
}
.co-modern .fx-summary-value, .co-modern .ko-round-stat-num { font-size: .78rem !important; font-weight: 900; }
.co-modern .fx-summary-label, .co-modern .ko-round-stat-label { font-size: .58rem !important; font-weight: 800; letter-spacing: .04em; color: var(--mb-muted); }
/* Matches of a round / matchday: the .mb-box frame, THE row's rhythm. */
.co-modern .fx-table-wrap, .co-modern .comp-section .bn-section-body .fx-table-wrap {
    margin: .2rem 0 .6rem !important; overflow-x: auto;
    border: 1px solid var(--mb-ring) !important; border-radius: var(--mb-radius) !important;
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
}
.co-modern .fx-table { font-size: .82rem; }
.co-modern .fx-table > tbody > tr > td { padding: .4rem .5rem; }
.co-modern .fx-table .fx-date-cell { color: var(--mb-muted); font-size: .74rem; white-space: nowrap; }
.co-modern .fx-table .fx-team-link { font-weight: 700; }
.co-modern .fx-table .fx-team-link img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.co-modern .fx-table tr.fx-row-own > td { background: linear-gradient(90deg, rgba(var(--mb-primary-rgb), .07), transparent 70%) !important; }
.co-modern .fx-table tr.fx-row-own > td:first-child { box-shadow: inset 3px 0 0 var(--mb-primary); }
.co-modern .fx-score-cell .badge { border-radius: .25rem !important; min-width: 3.2rem; font-size: .78rem !important; font-weight: 900; padding: .2rem .45rem !important; }
.co-modern .fx-status-cell .badge { border-radius: 999px; font-size: .62rem; font-weight: 800; }

/* E8. Cards inside the sections: My Benfica's frame (ring, theme radius, card bg, shadow). */
.co-modern .bn-main .card:not(.section-card):not(.fx-group-card),
.co-modern .comp-stat-card,
.co-modern .cpp-card.cpp-card,
.co-modern .ch-card {
    border: 1px solid var(--mb-ring) !important; border-radius: var(--mb-radius) !important;
    background: var(--mb-card-bg) !important; box-shadow: var(--mb-shadow) !important;
}
.co-modern .bn-main .card:not(.section-card) > .card-header { background: transparent !important; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent) !important; }
.co-modern .bn-main .card.competition-bracket-match-own { border-color: rgba(var(--mb-accent-rgb), .6) !important; box-shadow: var(--mb-shadow), inset 3px 0 0 var(--mb-accent) !important; }
.co-modern .bn-main img[src*="images/club/"] { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
[data-bs-theme="dark"] .co-modern .bn-main img[src*="images/club/"] { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }
.co-modern .bn-main .alert { border-radius: var(--mb-radius); }

/* E9. The competitions list: one .mb-box per season, THE row per competition, bare logos. */
.co-modern #comp-list-wrap { display: flex; flex-direction: column; gap: 1rem; }
.co-modern #comp-list-wrap > .card + .card { margin-top: 0 !important; }
.co-modern #comp-list-wrap > .card { overflow: hidden; }
.co-modern #comp-list-wrap > .card > .card-header {
    padding: .55rem .9rem !important; background: transparent !important; color: var(--mb-ink) !important;
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent) !important;
}
.co-modern #comp-list-wrap > .card > .card-header h6 { font-size: .92rem; font-weight: 900; color: var(--mb-ink) !important; }
.co-modern #comp-list-wrap > .card > .card-header h6 i { color: var(--mb-primary-ink) !important; }
.co-modern #comp-list-wrap .list-group-item { padding: .5rem .8rem; border-color: color-mix(in oklab, var(--mb-line) 60%, transparent); background: transparent; }
.co-modern #comp-list-wrap .list-group-item.bg-body-secondary { padding: .55rem .8rem .2rem !important; background: transparent !important; border: 0; }
.co-modern #comp-list-wrap .list-group-item.bg-body-secondary small { color: var(--mb-muted) !important; font-size: .62rem; font-weight: 800 !important; letter-spacing: .06em !important; }
.co-modern #comp-list-wrap .list-group-item-action:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); }
.co-modern #comp-list-wrap h6 { font-size: .9rem; font-weight: 800; }
.co-modern #comp-list-wrap h6 a { color: var(--mb-ink); }
.co-modern #comp-list-wrap h6 a:hover { color: var(--mb-primary-ink); }
.co-modern #comp-list-wrap small.text-muted { font-size: .72rem; }
.co-modern .comp-list-logo { width: 40px; height: 40px; margin-right: .2rem; }
.co-modern .comp-list-logo.is-icon i { font-size: 1.1rem; }
.co-modern .comp-edition-phases .comp-phase-row { border-radius: .6rem; background: var(--mb-soft); }
/* Every competition logo on these pages is bare (renderCompetitionIcon() prints a plate inline). */
.cp-modern img[src*="images/competition/"] { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
[data-bs-theme="dark"] .cp-modern img[src*="images/competition/"] { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

/* ==========================================================================
   F. Phones (767 / 575 / 439 / 379, My Benfica's breakpoints)
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* Narrower main column: pickers show their icon, the words stay as the title. */
    .cp-modern .cp-pick.cp-pick--squeeze .cp-pick-txt { display: none; }
}
@media (max-width: 767.98px) {
    /* The head's controls collapse into one Options pill; its panel opens under the head. */
    .cp-modern .cp-tools-btn {
        display: inline-flex; align-items: center; justify-content: center; position: relative;
        width: 1.9rem; height: 1.7rem; padding: 0;
        border: 1px solid var(--mb-line); border-radius: 999px;
        background: var(--mb-soft); color: var(--mb-primary-ink); font-size: .8rem; box-shadow: none; cursor: pointer;
    }
    .cp-modern .cp-tools.is-open .cp-tools-btn { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
    .cp-modern .cp-tools.is-filtering .cp-tools-dot {
        display: block; position: absolute; top: -.1rem; right: -.1rem; width: .5rem; height: .5rem;
        border-radius: 50%; background: var(--mb-accent); box-shadow: 0 0 0 2px var(--mb-card-bg);
    }
    .cp-modern .cp-tools-pop {
        display: none; position: absolute; top: calc(100% + .45rem); right: 0; z-index: 40;
        flex-direction: column; align-items: stretch; gap: .55rem;
        width: max-content; min-width: 13rem; max-width: min(19rem, calc(100vw - 2rem));
        padding: .6rem;
        border: 1px solid var(--mb-ring); border-radius: 1rem;
        background: var(--mb-card-bg); box-shadow: var(--elev-2, 0 8px 24px rgba(0, 0, 0, .14));
    }
    .cp-modern .cp-tools.is-open .cp-tools-pop { display: flex; }
    .cp-modern .cp-tools-group { flex-direction: column; align-items: stretch; gap: .4rem; }
    .cp-modern .cp-tools-pop .cp-pick { max-width: none; width: 100%; }
    .cp-modern .cp-tools-pop .cp-pick .cp-pick-txt { display: inline; }
    .cp-modern .cp-tools-pop .cp-pick-chev { margin-left: auto; }
    .cp-modern .cp-tools-pop .mb-seg { width: 100%; justify-content: space-between; }
    .cp-modern .cp-tools-pop .mb-seg-btn { flex: 1 1 0; justify-content: center; }
    .cp-modern .cp-tools-pop .mb-seg-txt { display: inline; }
    .cp-modern .cp-tools-pop .cp-icon-pill { width: 100%; }

    .fx-modern .bn-section-head .bn-h2-sub { display: none; }
    .fx-modern .fx-mhead { border-radius: 1rem; }
}
.co-modern .cp-md-num { display: none; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
    /* The standings head on a phone: title | ‹ 7 › | Options. */
    html body .co-modern .bn-section-head .bn-head-actions details.cp-md-pick .st-pick-txt, html body .co-modern .bn-section-head .bn-head-actions details.cp-md-pick .st-pick-ico { display: none !important; }
    .co-modern .cp-md-pick .cp-md-num { display: inline; }
    html body .co-modern .bn-section-head .bn-head-actions details.cp-md-pick > summary.st-pick-btn { padding: 0 .5rem; gap: .25rem; }
    .co-modern .cp-md { gap: .15rem; }
    .co-modern .bn-section-head.cp-std-head { gap: .6rem; }
    /* A matchday's matches fit a phone: the status column goes (the score cell already says
       vs / the result), round heads become 1rem cards when their counts wrap under. */
    .co-modern .fx-table .fx-status-cell, .co-modern .fx-table thead th:last-child { display: none; }
    .co-modern .ko-round-head, .co-modern .fx-group-head { border-radius: 1rem; }
    .fx-modern .fx-mhead { gap: .4rem; padding: .35rem .4rem .35rem .7rem; }
    .fx-modern .fx-mhead-tag { display: none; }
    .fx-modern .fx-wdl { padding: .05rem .3rem; }
    /* A row's kick-off/score stays right; the TV chip and tickets give way (the card view and
       the match page carry them). */
    .fx-modern .fx-row .fx-tv, .fx-modern .fx-row .fx-tickets, .fx-modern .fx-row .fx-preview { display: none; }
    .fx-modern .fx-cards { gap: .6rem; }
    .fx-modern .fx-crest { width: 34px; height: 34px; }
    .fx-modern .fx-side-name { font-size: .74rem; }
}
@media (max-width: 379.98px) {
    /* The standings fit a 320px phone (the table measured 335px in a 286px frame and Pts sat
       off the edge): the position-trend arrows give way, cells tighten, names truncate sooner. */
    body .co-modern .standings-table th, body .co-modern .standings-table td { padding: .2rem .18rem !important; font-size: .68rem !important; }
    .co-modern .standings-table .std-trend { display: none !important; }
    .co-modern .standings-table thead th.col-team { padding-left: .3rem !important; }
    .co-modern .standings-table > tbody > tr > td:nth-child(2) { max-width: 6.4rem; }
    .co-modern .standings-pos { font-size: .7rem; }
    /* As My Benfica's switch heads: the leading rule gives way on the narrowest phones. */
    .cp-modern .bn-section-head:has(.cp-tools, .cp-md, .mb-seg)::before { display: none; }
    .cp-modern .bn-section-head:has(.cp-tools, .cp-md, .mb-seg) { gap: .6rem; }
    .fx-modern .fx-mhead-rec .fx-wdl:not(.is-up) { display: none; }
    .fx-modern .fx-when { display: none; }
}

/* ==========================================================================
   G. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cp-modern .cp-pick { transition: none !important; }
}

/* Fixtures rows: the full pairing on wide screens, "vs / @ Opponent" on phones. */
.fx-modern .fx-full, .fx-modern .fx-short { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.fx-modern .fx-short { display: none; }
@media (max-width: 575.98px) {
    .fx-modern .fx-teams .fx-full { display: none; }
    .fx-modern .fx-teams .fx-short { display: flex; }
}

/* ==========================================================================
   D. The squad grid (squad.php main view): position groups of face cards.
      Cards are My Benfica's .mb-card (soft surface, hairline, .85rem radius); the face
      is round (renderPlayerFaceBubble); number and flag ride the top corners.
   ========================================================================== */
.sq-modern .sqc-groups { display: flex; flex-direction: column; gap: 1rem; }
.sq-modern .sqc-group[hidden] { display: none; }
.sq-modern .sqc-cap {
    display: flex; align-items: center; gap: .45rem; margin: 0 0 .55rem;
    color: var(--mb-muted); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.sq-modern .sqc-cap > i { color: var(--mb-primary-ink); font-size: .9rem; }
.sq-modern .sqc-cap .mb-h-count { margin-left: .1rem; letter-spacing: 0; }
.sq-modern .sq-chip {
    display: inline-flex; align-items: center; gap: .22rem; max-width: 100%;
    padding: .1rem .45rem; border-radius: 999px;
    font-size: .64rem; font-weight: 800; line-height: 1.4; white-space: nowrap;
    background: var(--mb-soft); color: var(--mb-ink);
}
.sq-modern .sq-chip-age { background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink); }
/* Money reads green, as on the player market-value panel. */
.sq-modern .sq-chip-value { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.sq-modern .sq-chip-ct { background: var(--mb-soft); color: var(--mb-muted); overflow: hidden; text-overflow: ellipsis; cursor: default; }
.sq-modern .sq-chip-ct i { font-size: .9em; opacity: .8; }
.sq-modern .sq-chip-ct.is-warn { background: rgba(var(--mb-accent-rgb), .2); color: var(--mb-accent-ink); }
.sq-modern .sq-chip-ct.is-danger { background: rgba(var(--mb-bad-rgb), .12); color: var(--mb-bad-ink); }
.sq-modern .ls-chip {
    display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .45rem; border-radius: 999px;
    font-size: .64rem; font-weight: 700; line-height: 1.4; background: var(--mb-soft-2); color: var(--mb-muted);
}
.sq-modern .ls-chip abbr { text-decoration: none; border: 0; font-weight: 800; }

/* The head: the active position chip, then the side switch (r5). */
.sq-modern .bn-section-head .bn-head-actions { gap: .4rem; }
.sq-modern .bn-section-head h2 .mb-h-count { vertical-align: .15em; }

/* Sidebar: tiles (an alert tile tints) and the position bars. */
/* My Benfica's #mbAside rhythm: every sidebar panel ends .75rem under its last item (the tiles
   used to add their own .75rem on top — the gap under Oldest / Left-On-Loan). */
.sq-modern .bn-aside .bn-panel { padding-bottom: .75rem; }
.sq-modern .bn-aside .sq-side-tiles { margin-bottom: 0; }
.sq-modern .bn-aside .sq-side-tiles li.is-alert { background: rgba(var(--mb-bad-rgb), .1); }
.sq-modern .bn-aside .sq-side-tiles li.is-alert b { color: var(--mb-bad-ink); }
.sq-modern .bn-bars-head { margin: 0 0 .5rem; color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sq-modern .bn-bars { display: grid; gap: .55rem; }
.sq-modern .bn-bar-row { display: grid; gap: .25rem; }
.sq-modern .bn-bar-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--mb-ink); }
.sq-modern .bn-bar-top i { color: var(--mb-primary-ink); margin-right: .4rem; }
.sq-modern .bn-bar-top .bn-c-n { font-size: .7rem; font-weight: 900; color: var(--mb-ink); }
.sq-modern .bn-bar-track { height: .35rem; border-radius: 999px; background: var(--mb-soft-2); overflow: hidden; }
.sq-modern .bn-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent))); transition: width .9s var(--mb-ease); }
/* Squad Value: a Squad Summary tile on every screen (r5); a partial total says how many it covers. */
.sq-modern .bn-aside .sq-side-tiles .sq-value-tile b small { margin-left: .25rem; color: var(--mb-muted); font-size: .62rem; font-weight: 800; }
/* The side switch (r5, club.php's sides switch): every side shows its label on wide screens;
   on phones the side on screen keeps its label and the others are icons (the phone-bar rule). */
@media (max-width: 767.98px) {
    .sq-modern .bn-section-head .sq-side-seg .mb-seg-btn.is-on .mb-seg-txt { display: inline; }
    .sq-modern .bn-section-head .sq-side-seg .mb-seg-btn.is-on { gap: .35rem; }
}

/* competitions.php sidebar: the season's other competitions. */
.co-modern .cp-other-comps .bn-cats a { justify-content: space-between; }
.co-modern .cp-other-comps .cp-unofficial { font-size: .6rem; padding: .08rem .45rem; }

.co-modern .card.fx-group-card { scroll-margin-top: 6rem; }
.co-modern .cp-jump-pick > .st-pick-btn { max-width: 12rem; }

/* Competition Facts: This Season / All Time in the .mb-seg look (its script still writes
   inline colours and aria-pressed; the states are pinned here). */
.co-modern .bn-section-head #competition-facts-switch {
    display: inline-flex; gap: .15rem; padding: .15rem; margin: 0 !important;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px; background: var(--mb-soft);
}
.co-modern .bn-section-head #competition-facts-switch .btn {
    border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--mb-muted) !important;
    padding: .2rem .62rem !important; font-size: .74rem !important; font-weight: 800 !important; line-height: 1.3; box-shadow: none !important;
}
.co-modern .bn-section-head #competition-facts-switch .btn[aria-pressed="true"] { background: var(--mb-primary) !important; color: var(--mb-on) !important; }
/* Season Statistics' headline tiles: the card frame instead of a coloured outline. */
.co-modern .bn-section-body > .row > .col > .rounded[style*="border:.5px"] {
    border: 1px solid var(--mb-ring) !important; border-radius: var(--mb-radius-sm) !important;
    background: var(--mb-card-bg) !important; box-shadow: var(--mb-shadow);
}

/* ==========================================================================
   Phone section heads (owner, 5 Oct 2026): a title never truncates. Below 440px the head
   may wrap (comps-modern.js adds .cp-head-wrap, then .cp-head-drop when the controls did not
   fit beside the full title): the colour rule becomes the line break and the controls take
   their own full-width row — a switch stretched with equal buttons, pickers compact at the
   right end. Scoped to win over style.css's one-row rule for phones.
   ========================================================================== */
@media (min-width: 0) {
    body .benfica-layout.cp-modern .bn-section-head.cp-head-wrap { flex-wrap: wrap !important; row-gap: .5rem !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-wrap > h2 {
        flex: 0 1 auto !important; min-width: 0 !important;
        white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop { justify-content: flex-end !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > h2 { flex: 1 1 auto !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop::after { flex: 1 0 100% !important; height: 0 !important; min-width: 0 !important; margin: -.5rem 0 0 !important; order: 9 !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > :is(.bn-head-actions, .bn-group-actions, .sq-value) {
        order: 10 !important; flex: 0 0 auto !important; margin-left: 0 !important; justify-content: flex-end !important;
    }
}
@media (max-width: 439.98px) {
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions:has(.mb-seg, .sqv-seg) { flex: 1 1 auto !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions :is(.mb-seg, .sqv-seg) { flex: 1 1 auto !important; width: auto !important; max-width: none !important; justify-content: space-between !important; overflow: visible !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions :is(.mb-seg-btn, .sqv-seg-btn) { flex: 1 1 0 !important; justify-content: center; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions > .cp-pick { order: 2; }
    /* The Options pill closes the row, after a stretched switch. */
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions.cp-viewctl { order: 11 !important; }
    /* The side switch on its own row: the labelled (selected) side takes the room it needs. */
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions .sq-side-seg .mb-seg-btn { flex: 1 1 auto !important; }
}
/* A tools row wider than the column (a 1024px screen beside the sidebar, Portuguese labels)
   wraps inside its own row, right-aligned, instead of running off the edge. */
@media (min-width: 768px) {
    .cp-modern .bn-section-head > .bn-head-actions.cp-head-actions, .cp-modern .bn-section-head > .bn-head-actions.cp-viewctl { max-width: 100%; min-width: 0; flex-wrap: wrap; }
    .cp-modern .cp-tools, .cp-modern .cp-tools-pop, .cp-modern .cp-tools-group { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: .4rem; }
}

/* Measured against My Benfica (hero -> first card 16px): the stylesheet links printed at the
   top of the main column made the first section miss style.css's :first-child rule. */
.cp-modern .bn-main > section.bn-section:first-of-type { margin-top: 0; }
/* 320px: a matchday's table fits its frame — the date column gives way (the matchday names
   the round; the match page has the kick-off). */
@media (max-width: 379.98px) {
    .co-modern .fx-table .fx-date-cell, .co-modern .fx-table thead th:first-child { display: none; }
}

/* The Follow star: a compact icon pill at the right end of the first head's controls (outside
   the phone Options panel, so one tap away). Star + follower count; the word stays for screen
   readers (follow-buttons.js keeps writing it and swaps btn-warning / btn-outline-warning). */
.co-modern .bn-section-head > .cp-follow-actions { order: 13; flex: 0 0 auto; }
.co-modern .cp-follow-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem; flex: 0 0 auto;
    min-width: 1.9rem; height: 1.7rem; padding: 0 .55rem;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink);
    font-size: .72rem; font-weight: 800; line-height: 1; box-shadow: none; cursor: pointer;
    transition: background-color .2s ease;
}
.co-modern .cp-follow-btn:hover { background: var(--mb-soft-2); }
.co-modern .cp-follow-btn:focus-visible { outline: 2px solid var(--mb-primary); outline-offset: 1px; }
.co-modern .cp-follow-btn:disabled { opacity: .6; cursor: default; }
.co-modern .bn-section-head .cp-follow-btn i { color: var(--mb-accent-ink) !important; font-size: .85rem !important; width: auto !important; margin: 0 !important; }
.co-modern .cp-follow-btn[data-following="1"] { background: rgba(var(--mb-accent-rgb), .18); border-color: transparent; }
.co-modern .cp-follow-btn .follow-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-modern .cp-follow-btn .follow-count { margin: 0 !important; padding: 0 !important; background: transparent !important; color: var(--mb-muted) !important; font-size: .68rem; font-weight: 800; }
@media (max-width: 439.98px) {
    /* Drops with the controls to their own row, and closes it at the right end. */
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions.cp-follow-actions { order: 12 !important; }
}

/* Next-match board on the wide Fixtures column (owner, 6 Oct): the two teams sit at the card's
   outer edges (home crest + name left, away name + crest right) with the countdown centred,
   instead of both hugging the countdown. Phones keep My Benfica's stacked crest-over-name. */
@media (min-width: 576px) {
    .fx-modern .fx-next .mb-team, .fx-modern .fx-next .mb-team.is-away { justify-content: flex-start; }
    .fx-modern .fx-next .mb-team b { text-align: left; }
    .fx-modern .fx-next .mb-team.is-away b { text-align: right; }
}

/* ==========================================================================
   Squad grid: the full-photo player card is back (owner, 6 Oct 2026: "bring back the full
   picture image for players like it was before"). Ported from squad.php's pre-October inline
   block, scoped to .sq-modern; the grid keeps the page rhythm (.6rem between cards, 1rem
   between position groups). Card frame = the sidebar panel's (ring, theme radius, shadow).
   ========================================================================== */
.sq-modern .sqc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.sq-modern .sq-card {
    position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}
.sq-modern .sq-card:hover { transform: translateY(-3px); box-shadow: 0 16px 42px rgba(0, 0, 0, .12); z-index: 1; }
.sq-modern .sq-card.is-faded { opacity: .55; filter: saturate(.6); }
/* Photo area */
.sq-modern .sq-photo { position: relative; width: 100%; overflow: hidden; background: var(--bs-secondary-bg, #f8f9fa); }
.sq-modern .sq-photo img { width: 100%; height: 170px; object-fit: cover; object-position: 50% 10%; display: block; transition: transform .35s ease; }
.sq-modern .sq-card:hover .sq-photo img { transform: scale(1.04); }
.sq-modern .sq-scrim { position: absolute; inset: auto 0 0 0; height: 75%; background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .12) 60%, transparent 100%); pointer-events: none; }
/* Number + availability column */
.sq-modern .sq-numcol { position: absolute; top: 8px; left: 9px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sq-modern .sq-num {
    display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px;
    border-radius: 50px; background: linear-gradient(180deg, var(--theme-gradient-start, #e30b2d), var(--theme-gradient-end, #b50d27));
    color: #fff; font-size: .68rem; font-weight: 900; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.sq-modern .sq-injury { color: #ff4d4f; font-size: .85rem; line-height: 1; cursor: default; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }
/* Flag */
.sq-modern .sq-flag { position: absolute; top: 9px; right: 9px; z-index: 2; line-height: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
/* Name over the photo (dark glass) */
.sq-modern .sq-name { position: absolute; inset: auto 0 0 0; z-index: 2; padding: .5rem .65rem .45rem; background: rgba(0, 0, 0, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sq-modern .sq-name a, .sq-modern .sq-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: .85rem; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 5px rgba(0, 0, 0, .5); text-decoration: none; }
.sq-modern .sq-name a:hover { color: var(--slb-gold, #F4B223); }
/* Chips: age + value, height + weight, the contract countdown — one row each. */
.sq-modern .sq-meta { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .5rem .55rem; }
.sq-modern .sq-meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; max-width: 100%; }
.sq-modern .sq-card .sq-chip { padding: .2em .55em; font-size: .68rem; font-weight: 700; line-height: 1.4; }
.sq-modern .sq-chip-dim { background: var(--bs-secondary-bg, #f0f0f0); color: var(--bs-secondary-color, #6c757d); }
.sq-modern .sq-card .sq-cardrisk { font-size: .85rem; }
[data-bs-theme="dark"] .sq-modern .sq-card { background: var(--mb-card-bg); }
[data-bs-theme="dark"] .sq-modern .sq-name { background: rgba(0, 0, 0, .28); }
[data-bs-theme="dark"] .sq-modern .sq-chip-dim { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
    .sq-modern .sqc-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
    .sq-modern .sq-photo img { height: 145px; }
    .sq-modern .sq-name a, .sq-modern .sq-name span { font-size: .8rem; }
    .sq-modern .sq-num { min-width: 22px; height: 22px; font-size: .63rem; }
}
@media (max-width: 379.98px) {
    /* Two a row at 320 as well (the 130px minimum would fit only one beside the gap). */
    .sq-modern .sqc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .sq-modern .sq-card, .sq-modern .sq-photo img { transition: none !important; }
    .sq-modern .sq-card:hover, .sq-modern .sq-card:hover .sq-photo img { transform: none; }
}

/* Squad sidebar extras (owner, 6 Oct 2026): Season Leaders, Latest Arrivals, Birthdays This
   Month — My Benfica's rows inside sidebar panels; faces round, crests bare. */
.sq-modern .sq-side-panel .mb-rows { margin: -.2rem 0 0; }
.sq-modern .sq-side-panel .mb-row { padding: .4rem .05rem; }
.sq-modern .sq-side-panel .mb-row-vis .player-face-bubble { box-shadow: 0 0 0 2px var(--mb-card-bg); }
.sq-modern .sq-side-n { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.sq-modern .sq-side-n b { font-size: 1rem; font-weight: 900; color: var(--mb-ink); font-variant-numeric: tabular-nums; }
.sq-modern .sq-side-n small { color: var(--mb-muted); font-size: .58rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sq-modern .sq-side-crest { width: 22px; height: 22px; }
.sq-modern .sq-side-day {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .3rem;
    border-radius: .5rem; background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink);
    font-size: .78rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.sq-modern .sq-side-day.is-past { background: var(--mb-soft-2); color: var(--mb-muted); }

/* ==========================================================================
   The Filters sidebar panel and the head's active-filter chips (fixtures_results.php,
   squad.php, competitions.php): the site standard, themes/default/css/filters-std.css
   (owner, 7 Oct 2026: statistics.php's Filters are the standard for every page).
   ========================================================================== */

/* ==========================================================================
   H. competitions.php sidebar (#coAside) in the competition's colours (7 Oct 2026)
      includes/comps_sidebar_ui.php prints the panels; comps-modern.js reads the logo's
      colour and sets --cs-rgb (light) / --cs-dk-rgb (dark) on #coAside. Without them the
      theme primary stands in. The colour is a layer only — rules, ring, dots, tints and a
      faint wash; the cards stay white with ink text, icons stay the site gold.
   ========================================================================== */
@property --cps-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.co-modern #coAside { --cs: var(--cs-rgb, var(--mb-primary-rgb)); }
[data-bs-theme="dark"] .co-modern #coAside { --cs: var(--cs-dk-rgb, var(--cs-rgb, var(--mb-primary-rgb))); }

/* Heading rules: the competition's colour fading out (no red-to-gold stripe); icons gold. */
.co-modern #coAside .bn-panel h3::before,
.co-modern #coAside .section-card > .card-header > .d-flex::before { background: rgb(var(--cs)); transition: background-color .4s ease; }
.co-modern #coAside .bn-panel h3::after,
.co-modern #coAside .section-card > .card-header > .d-flex::after { background: linear-gradient(90deg, rgba(var(--cs), .85), rgba(var(--cs), 0)); }
.co-modern #coAside .bn-panel h3 > i,
.co-modern #coAside .section-card > .card-header i { color: var(--theme-accent, var(--slb-gold)) !important; }

/* Lists reach the card's edges (the standard), first row ruled off from what is above it,
   the last one on the card's bottom edge. */
.co-modern #coAside .cps-panel { overflow: hidden; }
.co-modern #coAside .cps-panel > .cps-rows > .mb-row:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.co-modern #coAside .cps-panel > .cps-rows:last-child { margin-bottom: -1rem; }
.co-modern #coAside .cps-panel > .cps-rows:last-child > .mb-row:last-child { padding-bottom: .55rem; }
.co-modern #coAside .cps-panel .mb-row-title { font-size: .82rem; }

/* Competition: a faint logo watermark, a light wash of its colour at the top. */
.co-modern #coAside .cps-profile {
    position: relative; isolation: isolate;
    background: linear-gradient(180deg, rgba(var(--cs), .09), rgba(var(--cs), 0) 8.5rem), var(--mb-card-bg);
}
[data-bs-theme="dark"] .co-modern #coAside .cps-profile { background: linear-gradient(180deg, rgba(var(--cs), .16), rgba(var(--cs), 0) 8.5rem), var(--mb-card-bg); }
.co-modern #coAside .cps-mark { position: absolute; top: -.9rem; right: -1.4rem; z-index: -1; width: 7.5rem; height: 7.5rem; opacity: .06; pointer-events: none; }
.co-modern #coAside .cps-mark img, .co-modern #coAside .cps-mark .cps-mark-img { width: 100% !important; height: 100% !important; object-fit: contain; filter: grayscale(.35) !important; }
.co-modern #coAside .cps-mark .is-icon { display: none; }
[data-bs-theme="dark"] .co-modern #coAside .cps-mark { opacity: .055; }
.co-modern #coAside .cps-profile h3 { margin-bottom: .65rem; }

.co-modern #coAside .cps-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .7rem; }
.co-modern #coAside .cps-state { background: rgba(var(--cs), .12); font-weight: 800; }
.co-modern #coAside .cps-dot { flex: 0 0 auto; width: .45rem; height: .45rem; border-radius: 50%; background: rgb(var(--cs)); }
.co-modern #coAside .cps-state.is-upcoming .cps-dot { background: transparent; box-shadow: inset 0 0 0 2px rgb(var(--cs)); }
.co-modern #coAside .cps-state.is-finished { background: var(--mb-soft); }
.co-modern #coAside .cps-state.is-finished .cps-dot { background: var(--mb-muted); }
.co-modern #coAside .cps-state.is-live { background: rgba(var(--mb-bad-rgb), .1); }
.co-modern #coAside .cps-state.is-live .cps-dot { background: var(--mb-bad); animation: cpsPulse 1.6s ease-out infinite; }
@keyframes cpsPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--mb-bad-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 .45rem rgba(var(--mb-bad-rgb), 0); } }
.co-modern #coAside .cps-official { font-weight: 800; }
.co-modern #coAside .cps-official i { color: var(--mb-ok-ink); }
.co-modern #coAside .cps-official.is-off i { color: var(--mb-muted); }

/* The season ring: rounds played of the rounds there are, filling in on arrival. */
.co-modern #coAside .cps-progress { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; min-width: 0; }
.co-modern #coAside .cps-ring {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: conic-gradient(rgb(var(--cs)) calc(var(--cps-p) * 1%), var(--mb-soft-2) 0);
    animation: cpsRing 1.1s var(--mb-ease) both;
}
@keyframes cpsRing { from { --cps-p: 0; } }
.co-modern #coAside .cps-ring b {
    display: flex; align-items: baseline; justify-content: center; padding-top: .95rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--mb-card-bg); color: var(--mb-ink);
    font-size: .86rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1;
}
.co-modern #coAside .cps-ring b small { font-size: .6em; font-weight: 800; color: var(--mb-muted); }
.co-modern #coAside .cps-progress-txt { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.co-modern #coAside .cps-progress-txt > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 900; line-height: 1.25; }
.co-modern #coAside .cps-progress-txt > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .72rem; font-weight: 600; line-height: 1.35; }
.co-modern #coAside .cps-dates i { margin-right: .3rem; color: var(--theme-accent, var(--slb-gold)); }

/* Holders: one edge-to-edge row with a light wash. */
.co-modern #coAside .cps-holder { background: linear-gradient(90deg, rgba(var(--cs), .08), rgba(var(--cs), 0) 75%); }
.co-modern #coAside a.cps-holder:hover { background: linear-gradient(90deg, rgba(var(--cs), .14), rgba(var(--cs), 0) 80%); }
.co-modern #coAside .cps-crest { width: 28px; height: 28px; }
.co-modern #coAside .cps-ico { width: 1.8rem; height: 1.8rem; background: rgba(var(--cs), .12); color: var(--theme-accent, var(--slb-gold)); font-size: .8rem; }
.co-modern #coAside .cps-profile > .cps-rows { margin-bottom: .75rem; }
.co-modern #coAside .cps-profile > .cps-rows > .mb-row:last-child { border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }

/* Profile facts: My Benfica's two-column tiles; long values take the full width. */
.co-modern #coAside .cps-facts li.is-wide { grid-column: 1 / -1; }
.co-modern #coAside .cps-facts b.is-text { font-size: .8rem; line-height: 1.45; font-weight: 800; }
.co-modern #coAside .cps-facts b small { color: var(--mb-muted); font-size: .9em; font-weight: 700; }
.co-modern #coAside .cps-facts b a { color: var(--mb-primary-ink); text-decoration: none; }
.co-modern #coAside .cps-facts b a:hover { text-decoration: underline; }

/* Our Position: the place in its zone's colour, the zone, points; gaps and form under it. */
.co-modern #coAside .cps-pos { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; column-gap: .7rem; }
.co-modern #coAside .cps-pos-chip {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .7rem;
    background: rgba(var(--cs), .14); color: var(--mb-ink);
    font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.co-modern #coAside .cps-pos-chip.has-zone { background: var(--cps-zone); color: var(--cps-zone-ink, #fff); }
.co-modern #coAside .cps-pos-main { display: flex; flex-direction: column; min-width: 0; }
.co-modern #coAside .cps-pos-main b { font-size: .92rem; font-weight: 900; line-height: 1.25; }
.co-modern #coAside .cps-pos-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .72rem; font-weight: 600; }
.co-modern #coAside .cps-pos-pts { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.co-modern #coAside .cps-pos-pts b { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.co-modern #coAside .cps-pos-pts small { margin-top: .15rem; color: var(--mb-muted); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.co-modern #coAside .cps-gaps { margin: .65rem 0 0; padding-top: .5rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); color: var(--mb-muted); font-size: .74rem; font-weight: 600; line-height: 1.4; }
.co-modern #coAside .cps-form { display: flex; align-items: center; gap: .3rem; margin-top: .6rem; }
.co-modern #coAside .cps-form .bn-f {
    display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: .25rem;
    color: #fff; font-size: .68rem; font-weight: 900;
    animation: cpsPop .35s var(--mb-ease) both; animation-delay: calc(var(--i, 0) * 70ms + .15s);
}
.co-modern #coAside .cps-form .bn-f.W { background: var(--mb-ok); }
.co-modern #coAside .cps-form .bn-f.D { background: color-mix(in oklab, var(--mb-muted) 80%, var(--mb-card-bg)); }
.co-modern #coAside .cps-form .bn-f.L { background: var(--mb-bad); }
@keyframes cpsPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Next Match: a compact board, crests at the edges, the countdown between. */
.co-modern #coAside .cps-next-head { display: flex; align-items: center; gap: .5rem; min-width: 0; margin: -.15rem 0 .55rem; }
.co-modern #coAside .cps-next-logo { width: 22px; height: 22px; }
.co-modern #coAside .cps-next-when { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.co-modern #coAside .cps-next-when b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 800; line-height: 1.25; }
.co-modern #coAside .cps-next-when small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; font-weight: 600; }
.co-modern #coAside .cps-board {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .4rem; margin: 0; padding: .6rem .55rem;
    background: linear-gradient(135deg, rgba(var(--cs), .1), var(--mb-soft) 62%);
}
.co-modern #coAside .cps-board:hover { background: linear-gradient(135deg, rgba(var(--cs), .16), var(--mb-soft) 66%); }
[data-bs-theme="dark"] .co-modern #coAside .cps-board { background: linear-gradient(135deg, rgba(var(--cs), .22), var(--mb-soft) 64%); }
.co-modern #coAside .cps-board .mb-team { flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem; min-width: 0; }
.co-modern #coAside .cps-board .mb-team.is-away { flex-direction: column; align-items: flex-end; }
.co-modern #coAside .cps-board .mb-team b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%;
    overflow: hidden; white-space: normal; overflow-wrap: normal; font-size: .76rem; font-weight: 900; line-height: 1.15; text-align: left;
}
.co-modern #coAside .cps-board .mb-team.is-away b { text-align: right; }
.co-modern #coAside .cps-board .mb-team img, .co-modern #coAside .cps-board .mb-team svg, .co-modern #coAside .cps-board .mb-crest { width: 38px; height: 38px; }
.co-modern #coAside .cps-board .mb-cd { gap: .22rem; }
.co-modern #coAside .cps-board .mb-cd-cell { min-width: 1.5rem; }
.co-modern #coAside .cps-board .mb-cd-cell b { font-size: 1.02rem; }
.co-modern #coAside .cps-board .mb-cd-cell small { font-size: .48rem; letter-spacing: .04em; }
.co-modern #coAside .cps-board .mb-cd-cell + .mb-cd-cell::before { left: -.25rem; font-size: .85rem; }
.co-modern #coAside .cps-board .mb-live-score { font-size: 1.55rem; }
.co-modern #coAside .cps-next-foot { display: flex; align-items: center; gap: .3rem; min-width: 0; margin-top: .55rem; }
.co-modern #coAside .cps-next-foot .mb-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.co-modern #coAside .cps-next-foot .mb-chip i { color: var(--theme-accent, var(--slb-gold)); }
.co-modern #coAside .cps-next-foot .mb-more { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.co-modern #coAside .cps-then { margin-top: .6rem; }
.co-modern #coAside .cps-then .mb-row--fixture { grid-template-columns: 2.3rem minmax(0, 1fr) auto; }
.co-modern #coAside .cps-then .mb-date small { color: var(--mb-muted); }
.co-modern #coAside .cps-then .mb-row-side .cp-crest { width: 24px; height: 24px; }

/* Explore: a white card, two columns of flat pills (no red block). */
.co-modern #coAside .cps-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.co-modern #coAside .cps-link { justify-content: flex-start; min-width: 0; padding: .38rem .7rem; }
.co-modern #coAside .cps-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-modern #coAside .cps-link i { color: var(--theme-accent, var(--slb-gold)); }
.co-modern #coAside .cps-link:hover { background: rgba(var(--cs), .1); border-color: rgba(var(--cs), .3); color: var(--mb-ink); }

/* Also This Season: rows with bare logos. */
.co-modern #coAside .cps-others .mb-row-vis .cp-logo { width: 26px; height: 26px; }
.co-modern #coAside .cps-chev { color: var(--mb-muted); font-size: .7rem; }

/* The Fixtures & Results widget prints its date / time squares with inline colours (a blue
   gradient, a white box): in this sidebar they take the card's own soft tiles. */
.co-modern #coAside #fixtures-results [style*="#4f46e5"] { background: var(--mb-soft-2) !important; color: var(--mb-ink) !important; border-color: transparent !important; }
.co-modern #coAside #fixtures-results [style*="background: #ffffff"] { background: var(--mb-card-bg) !important; border-color: color-mix(in oklab, var(--mb-line) 80%, transparent) !important; }
.co-modern #coAside #fixtures-results [style*="color: #ef4444"] { color: var(--mb-muted) !important; }
.co-modern #coAside #fixtures-results [style*="color: #374151"] { color: var(--mb-ink) !important; }
.co-modern #coAside #fixtures-results .fixtures-nav-compact { background: transparent; border-radius: 0; }
.co-modern #coAside #fixtures-results .fixtures-nav-btn { background: var(--mb-soft) !important; border-color: color-mix(in oklab, var(--mb-line) 70%, transparent) !important; color: var(--mb-ink) !important; }

/* The homepage widgets kept in the sidebar (Fixtures & Results, Player Statistics, Team
   Performance) share the panels' heading look. */
.co-modern #coAside .section-card > .card-header h2,
.co-modern #coAside .section-card > .card-header h3,
.co-modern #coAside .section-card > .card-header h4,
.co-modern #coAside .section-card > .card-header h5,
.co-modern #coAside .section-card > .card-header h6 { font-size: 1rem !important; }

/* The phone drawer is ~240px inside a panel: the Fixtures & Results widget drops its
   three-letter codes (the crests stay) so its rows clear the date squares. */
@media (max-width: 439.98px) {
    .co-modern #coAside #fixtures-results .list-group-item span[style*="min-width: 45px"] { display: none !important; }
    .co-modern #coAside #fixtures-results .list-group-item img[width="40"] { width: 32px !important; height: 32px !important; }
}
@media (max-width: 379.98px) {
    .co-modern #coAside .cps-board .mb-cd-cell { min-width: 1.3rem; }
    .co-modern #coAside .cps-board .mb-cd-cell b { font-size: .92rem; }
    .co-modern #coAside .cps-board .mb-team img, .co-modern #coAside .cps-board .mb-crest { width: 32px; height: 32px; }
    .co-modern #coAside .cps-links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .co-modern #coAside .cps-ring, .co-modern #coAside .cps-form .bn-f, .co-modern #coAside .cps-state.is-live .cps-dot { animation: none !important; }
}

/* The competition's logo watermark sits whole in the empty space beside the progress ring, not
   cut off in the top corner (owner, 7 Oct 2026: "move the logo more to the center so it shows
   on the empty space"). */
/* Lined up with the info on the left: from the top of the status chips to the bottom of the
   progress block, with the same gap on the right as the content's left inset. */
.co-modern #coAside .cps-mark { top: 2.95rem; right: .5rem; width: 5.35rem; height: 5.35rem; opacity: .1; }
[data-bs-theme="dark"] .co-modern #coAside .cps-mark { opacity: .09; }

/* Our match in Fixtures & Results (owner, 7 Oct 2026: "background looks bad"): each cell
   restarted its own red-to-clear gradient over the row's yellow table-warning tint, so the
   fade repeated column by column. One even tint across the whole row, no yellow, no bar. */
.co-modern .fx-table tr.fx-row-own,
.co-modern .fx-table tr.fx-row-own > td {
    --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-bg-state: transparent;
    background: rgba(var(--mb-primary-rgb), .06) !important; background-image: none !important;
}
.co-modern .fx-table tr.fx-row-own > td { box-shadow: none !important; }
.co-modern .fx-table tr.fx-row-own:hover > td { background: rgba(var(--mb-primary-rgb), .1) !important; }

/* Explore keeps the site's own heading lines (owner, 7 Oct 2026: "missing the golden line like
   the rest of the site"): the competition colour recolours the other panels' lines, which on
   the red Explore block came out red on red. */
.co-modern #coAside .bn-cta h3::before { background: linear-gradient(90deg, var(--slb-red), var(--slb-gold)) !important; }
.co-modern #coAside .bn-cta h3::after { background: linear-gradient(90deg, var(--slb-red), var(--slb-gold), rgba(0, 0, 0, 0)) !important; }
.co-modern #coAside .bn-cta .bn-cta-links a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   I. competitions.php analysis views (7 Oct 2026): Team Position Progression, Competition
      Statistics, Teams, Head-to-Head and History (includes/comps_views_ui.php). The look of
      the standings / matchday cards / sidebar: .mb-box cards, THE row, .mb-seg, flat pills,
      bare crests. The competition's colour (--cs, set on the page by comps-modern.js from
      its logo) is a layer only: washes, chart lines, bar fills. No stripes, no left bars,
      one even tint per highlighted row.
   ========================================================================== */
.co-modern { --cs: var(--cs-rgb, var(--mb-primary-rgb)); --cv-b: color-mix(in oklab, var(--mb-ink) 58%, var(--mb-card-bg)); --cv-d: color-mix(in oklab, var(--mb-muted) 38%, var(--mb-card-bg)); }
[data-bs-theme="dark"] .co-modern { --cs: var(--cs-dk-rgb, var(--cs-rgb, var(--mb-primary-rgb))); --cv-b: color-mix(in oklab, var(--mb-ink) 62%, var(--mb-card-bg)); }
.co-modern { --cv-s1: var(--cv-b); --cv-s2: var(--mb-accent); --cv-s3: var(--mb-info); --cv-s4: var(--mb-ok); }

/* One 1rem rhythm inside these sections, owned by the gap. */
.co-modern .comp-section .bn-section-body:has(> :is(.cv-tiles, .cv-grid, .cv-teams, .cv-h2h-board, .cv-tl-wrap, .cv-chart-card)) { display: flex; flex-direction: column; gap: 1rem; }
.co-modern .comp-section .bn-section-body:has(> :is(.cv-tiles, .cv-grid, .cv-teams, .cv-h2h-board, .cv-tl-wrap, .cv-chart-card)) > * { margin: 0 !important; min-width: 0; }
.co-modern .cv-getform { display: none; }

/* Cards: a head line inside the frame (title left, note right), rows to the edges. */
.co-modern .cv-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0;
    margin: -.3rem -.7rem 0; padding: .55rem .8rem .5rem;
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.co-modern .cv-card-title { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; font-size: .86rem; }
.co-modern .cv-card-title > i { color: var(--theme-accent, var(--slb-gold)); font-size: .85em; }
.co-modern .cv-card-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.co-modern .cv-card-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.co-modern .cv-list-card > .mb-rows > .mb-row { margin-left: -.7rem; margin-right: -.7rem; padding-left: .8rem; padding-right: .8rem; }
.co-modern .cv-list-card > .mb-rows:last-child > .mb-row:last-child { margin-bottom: -.3rem; padding-bottom: calc(.45rem + .3rem); }
.co-modern .cv-row.is-own { background: rgba(var(--cs), .08); }
.co-modern a.cv-row.is-own:hover { background: rgba(var(--cs), .12); }
.co-modern .cv-row .mb-row-vis .cp-crest { width: 28px; height: 28px; }

/* Stat tiles: icon, the number, its label, a sub line. */
.co-modern .cv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.co-modern .cv-tile {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n i" "l l" "s s";
    align-items: center; min-width: 0; padding: .6rem .75rem .55rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius); background: var(--mb-card-bg); box-shadow: var(--mb-shadow); color: var(--mb-ink);
}
.co-modern .cv-tile > i { grid-area: i; align-self: start; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .55rem; background: rgba(var(--cs), .1); color: var(--theme-accent, var(--slb-gold)); font-size: .78rem; }
.co-modern .cv-tile > b { grid-area: n; font-size: 1.55rem; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.co-modern .cv-tile > span { grid-area: l; margin-top: .15rem; color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-modern .cv-tile > small { grid-area: s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .68rem; font-weight: 600; }
.co-modern .cv-tile.is-key { background: linear-gradient(160deg, rgba(var(--cs), .1), rgba(var(--cs), 0) 70%), var(--mb-card-bg); }
.co-modern .cv-tile.is-gold { background: linear-gradient(160deg, rgba(var(--mb-accent-rgb), .2), rgba(var(--mb-accent-rgb), 0) 72%), var(--mb-card-bg); }
.co-modern .cv-tile.is-gold > i { background: rgba(var(--mb-accent-rgb), .22); }

/* Position chip (tinted by its zone, never a bar) and the change arrow. */
.co-modern .cv-pos {
    display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: .5rem;
    background: var(--mb-soft-2); color: var(--mb-ink); font-size: .8rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.co-modern .cv-pos.has-zone { background: rgba(var(--cvz), .2); }
[data-bs-theme="dark"] .co-modern .cv-pos.has-zone { background: rgba(var(--cvz), .32); }
.co-modern .cv-pos.is-none { color: var(--mb-muted); background: var(--mb-soft); }
.co-modern .cv-chg { display: inline-flex; align-items: center; gap: .15rem; min-width: 2.2rem; justify-content: flex-end; color: var(--mb-muted); font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.co-modern .cv-chg.is-up { color: var(--mb-ok-ink); }
.co-modern .cv-chg.is-down { color: var(--mb-bad-ink); }
.co-modern .cv-capped .cv-extra { display: none; }
.co-modern .cv-capped.is-all .cv-extra { display: grid; }
.co-modern .cv-more-foot { margin: 0 -.7rem; padding: .45rem .8rem .5rem; }
.co-modern .cv-more { border: 0; background: transparent; padding: 0; cursor: pointer; }
.co-modern .cv-capped.is-all .cv-more i { transform: rotate(180deg); }

/* ---- 1. Position progression ---- */
.co-modern .cv-chart-card { padding-bottom: 0; }
.co-modern .cv-chart-host { position: relative; min-height: 13rem; margin: .5rem 0 .2rem; }
.co-modern .cv-chart-host svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.co-modern .cv-chart-fallback { padding: .6rem 0; color: var(--mb-muted); font-size: .74rem; line-height: 1.5; }
.co-modern .cv-chart-host.is-drawn .cv-chart-fallback { display: none; }
.co-modern .cv-ax { fill: var(--mb-muted); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-modern .cv-gl { stroke: color-mix(in oklab, var(--mb-line) 55%, transparent); stroke-width: 1; }
.co-modern .cv-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s ease, stroke-width .2s ease; }
.co-modern .cv-ln.is-m { stroke: color-mix(in oklab, var(--mb-muted) 40%, transparent); stroke-width: 1.3; }
.co-modern .cv-ln.is-m.is-peek { stroke: var(--mb-ink); stroke-width: 2; opacity: .75; }
.co-modern .cv-ln.is-h { stroke-width: 2.3; }
.co-modern .cv-ln.is-s1 { stroke: var(--cv-s1); } .co-modern .cv-ln.is-s2 { stroke: var(--cv-s2); }
.co-modern .cv-ln.is-s3 { stroke: var(--cv-s3); } .co-modern .cv-ln.is-s4 { stroke: var(--cv-s4); }
.co-modern .cv-ln.is-f { stroke: rgb(var(--cs)); stroke-width: 3.2; }
.co-modern .cv-pt { fill: var(--mb-card-bg); stroke: rgb(var(--cs)); stroke-width: 2; }
.co-modern .cv-pt.is-last { fill: rgb(var(--cs)); stroke: var(--mb-card-bg); stroke-width: 2.5; }
.co-modern .cv-guide { stroke: color-mix(in oklab, var(--mb-ink) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.co-modern .cv-mark { stroke: var(--mb-card-bg); stroke-width: 2; }
.co-modern .cv-tip {
    position: absolute; z-index: 5; top: 0; left: 0; min-width: 9rem; max-width: 15rem; pointer-events: none;
    padding: .45rem .6rem; border: 1px solid var(--mb-ring); border-radius: .7rem;
    background: var(--mb-card-bg); box-shadow: var(--elev-2, 0 8px 24px rgba(0, 0, 0, .14)); color: var(--mb-ink); font-size: .72rem;
    opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.co-modern .cv-tip.is-on { opacity: 1; transform: none; }
.co-modern .cv-tip-h { margin-bottom: .25rem; color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.co-modern .cv-tip-r { display: grid; grid-template-columns: .55rem 16px minmax(0, 1fr) auto; align-items: center; column-gap: .35rem; padding: .1rem 0; }
.co-modern .cv-tip-r i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--cv-c, rgb(var(--cs))); }
.co-modern .cv-tip-r img { width: 16px; height: 16px; object-fit: contain; }
.co-modern .cv-tip-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.co-modern .cv-tip-r b { font-weight: 900; font-variant-numeric: tabular-nums; }
.co-modern .cv-zone-key { display: flex; flex-wrap: wrap; gap: .25rem .8rem; padding: .1rem 0 .55rem; color: var(--mb-muted); font-size: .68rem; font-weight: 700; }
.co-modern .cv-zone-k { display: inline-flex; align-items: center; gap: .35rem; }
.co-modern .cv-zone-k i { width: .8rem; height: .55rem; border-radius: .15rem; background: rgba(var(--cvz), .35); }
.co-modern .cv-zone-k small { font-size: .9em; opacity: .8; font-variant-numeric: tabular-nums; }
.co-modern .cv-chips {
    display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 -.7rem; padding: .6rem .8rem .7rem;
    border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.co-modern .cv-chip {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 11rem; height: 1.75rem; padding: 0 .55rem 0 .35rem;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink); font-size: .72rem; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.co-modern .cv-chip:hover { background: var(--mb-soft-2); }
.co-modern .cv-chip:focus-visible { outline: 2px solid rgb(var(--cs)); outline-offset: 1px; }
.co-modern .cv-chip-n { min-width: 1.05rem; color: var(--mb-muted); font-size: .64rem; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.co-modern .cv-chip .cp-crest { width: 18px; height: 18px; }
.co-modern .cv-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-modern .cv-chip.is-focus { background: rgba(var(--cs), .14); border-color: rgba(var(--cs), .5); cursor: default; }
.co-modern .cv-chip[aria-pressed="true"]:not(.is-focus) { background: var(--mb-card-bg); border-color: var(--cv-c, var(--mb-line)); box-shadow: inset 0 0 0 1px var(--cv-c, transparent); }
.co-modern .cv-chip.is-s1 { --cv-c: var(--cv-s1); } .co-modern .cv-chip.is-s2 { --cv-c: var(--cv-s2); }
.co-modern .cv-chip.is-s3 { --cv-c: var(--cv-s3); } .co-modern .cv-chip.is-s4 { --cv-c: var(--cv-s4); }
.co-modern .cv-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; padding: .65rem .8rem; }
.co-modern .cv-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i k" "i v"; column-gap: .5rem; align-items: center; min-width: 0; }
.co-modern .cv-fact > i { grid-area: i; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .55rem; background: var(--mb-soft); color: var(--theme-accent, var(--slb-gold)); font-size: .78rem; }
.co-modern .cv-fact > span { grid-area: k; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.co-modern .cv-fact > b { grid-area: v; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.co-modern .cv-fact.is-up > b { color: var(--mb-ok-ink); }
.co-modern .cv-fact.is-down > b { color: var(--mb-bad-ink); }

/* ---- 2. Competition Statistics ---- */
.co-modern .cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.co-modern .cv-grid.is-one { grid-template-columns: minmax(0, 1fr); }
.co-modern .cv-card { padding-bottom: .7rem; }
.co-modern .cv-list-card { padding-bottom: .3rem; }
.co-modern .cv-split { display: flex; gap: 2px; height: .65rem; margin: .8rem 0 .7rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.co-modern .cv-split-seg { display: block; height: 100%; transition: width 1s var(--mb-ease); }
.co-modern .cv-split-seg.is-a { background: rgb(var(--cs)); }
.co-modern .cv-split-seg.is-n { background: rgba(var(--cs), .45); }
.co-modern .cv-split-seg.is-d { background: var(--cv-d); }
.co-modern .cv-split-seg.is-b { background: var(--cv-b); }
.co-modern .cv-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .55rem .8rem; }
.co-modern .cv-leg { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i k" "b b" "s s"; column-gap: .35rem; align-items: center; min-width: 0; }
.co-modern .cv-leg > i { grid-area: i; width: .6rem; height: .6rem; border-radius: .18rem; background: var(--cv-d); }
.co-modern .cv-leg.is-a > i { background: rgb(var(--cs)); }
.co-modern .cv-leg.is-n > i { background: rgba(var(--cs), .45); }
.co-modern .cv-leg.is-b > i { background: var(--cv-b); }
.co-modern .cv-leg > span { grid-area: k; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.co-modern .cv-leg > b { grid-area: b; margin-top: .1rem; font-size: 1.3rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.co-modern .cv-leg > small { grid-area: s; color: var(--mb-muted); font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-modern .cv-meta-ico { margin-right: .3rem; color: var(--theme-accent, var(--slb-gold)); font-size: .9em; }
.co-modern .cv-val { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.co-modern .cv-val b { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.co-modern .cv-val small { margin-top: .1rem; color: var(--mb-muted); font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.co-modern .cv-pair { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.co-modern .cv-team { display: inline-flex; align-items: center; gap: .3rem; flex: 0 1 auto; min-width: 0; color: var(--mb-ink); text-decoration: none; }
.co-modern .cv-team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-modern .cv-team .cp-crest { width: 18px; height: 18px; }
.co-modern .cv-team.is-own { font-weight: 900; }
.co-modern a.cv-team:hover { color: var(--mb-primary-ink); }
.co-modern .cv-vs { flex: 0 0 auto; color: var(--mb-muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.co-modern .cv-score { min-width: 2.7rem; }
.co-modern .mb-score.cv-score.is-d { background: var(--mb-soft-2); color: var(--mb-ink); }
.co-modern .cv-score-link { text-decoration: none; }
.co-modern .cv-score-link:hover .mb-score { filter: brightness(.95); }
.co-modern .cv-rec-row .mb-ico { color: var(--theme-accent, var(--slb-gold)); background: rgba(var(--cs), .1); }

/* ---- 3. Teams ---- */
.co-modern .bn-section-head .cv-search { width: 11.5rem; padding: 0 .7rem; gap: .4rem; color: var(--mb-muted); }
.co-modern .bn-section-head .cv-search i { font-size: .75rem; }
.co-modern .bn-section-head .cv-search input { width: 100%; min-width: 0; color: var(--mb-ink); font-size: .74rem; font-weight: 700; }
.co-modern .cv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.co-modern .cv-teams { display: flex; flex-direction: column; gap: 1rem; }
.co-modern .cv-team-groups { display: flex; flex-direction: column; gap: 1rem; }
.co-modern .cv-team-group { display: flex; flex-direction: column; gap: .35rem; }
.co-modern .cv-team-group[hidden], .co-modern .cv-teams [hidden] { display: none !important; }
.co-modern .cv-group-cap { margin: 0; display: flex; align-items: center; gap: .1rem; }
.co-modern .cv-team-row .mb-row-title { color: var(--mb-ink); text-decoration: none; }
.co-modern .cv-team-row .mb-row-title:hover { color: var(--mb-primary-ink); text-decoration: underline; }
.co-modern .cv-team-row .mb-row-side { gap: .55rem; }
.co-modern .cv-form { display: inline-flex; gap: 2px; }
.co-modern .cv-f { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: .22rem; color: #fff; font-size: .56rem; font-style: normal; font-weight: 900; }
.co-modern .cv-f.is-w { background: var(--mb-ok); }
.co-modern .cv-f.is-d { background: color-mix(in oklab, var(--mb-muted) 80%, var(--mb-card-bg)); }
.co-modern .cv-f.is-l { background: var(--mb-bad); }
.co-modern .cv-pts { min-width: 1.9rem; }
.co-modern .cv-final { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.co-modern .cv-final.is-winner { background: rgba(var(--mb-accent-rgb), .22); }
.co-modern .cv-final.is-winner i { color: var(--theme-accent, var(--slb-gold)); }
.co-modern .cv-final.is-runner-up { background: var(--mb-soft-2); }
/* A team row's divider follows the row wherever sorting moves it. */
.co-modern .cv-teams .mb-rows > .mb-row:last-child { border-bottom: 0; }

/* ---- 4. Head-to-Head ---- */
.co-modern .cv-h2h-board {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem;
    padding: 1rem .9rem .9rem;
    background: linear-gradient(180deg, rgba(var(--cs), .09), rgba(var(--cs), 0) 75%), var(--mb-card-bg);
}
[data-bs-theme="dark"] .co-modern .cv-h2h-board { background: linear-gradient(180deg, rgba(var(--cs), .18), rgba(var(--cs), 0) 75%), var(--mb-card-bg); }
.co-modern .cv-h2h-side { display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0; }
.co-modern .cv-h2h-crest { display: grid; place-items: center; height: 56px; }
.co-modern .cv-h2h-crest .cp-crest { width: 56px; height: 56px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18)); }
.co-modern .cv-h2h-mid { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 10rem; text-align: center; }
.co-modern .cv-h2h-rec { display: flex; align-items: flex-end; justify-content: center; gap: 1.1rem; }
.co-modern .cv-h2h-rec > span { display: flex; flex-direction: column; align-items: center; }
.co-modern .cv-h2h-rec b { font-size: 1.75rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.co-modern .cv-h2h-rec .is-a b { color: rgb(var(--cs)); }
.co-modern .cv-h2h-rec .is-d b { color: var(--mb-muted); }
.co-modern .cv-h2h-rec small { margin-top: .2rem; color: var(--mb-muted); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.co-modern .cv-h2h-mid .cv-split { width: 100%; margin: .55rem 0 .35rem; height: .5rem; }
.co-modern .cv-h2h-goals { color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.co-modern .cv-h2h-vs { font-size: 1.1rem; font-weight: 900; letter-spacing: .08em; color: var(--mb-muted); }
.co-modern .cv-h2h-none { max-width: 14rem; color: var(--mb-muted); font-size: .72rem; line-height: 1.35; }
.co-modern .cv-swap {
    display: inline-grid; place-items: center; width: var(--bn-ctl-h, 1.875rem); height: var(--bn-ctl-h, 1.875rem); margin-top: .5rem; padding: 0;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft); color: var(--theme-accent, var(--slb-gold)); font-size: .78rem; cursor: pointer; box-shadow: none;
    transition: background-color .2s ease, transform .3s var(--mb-ease);
}
.co-modern .cv-swap:hover { background: var(--mb-soft-2); transform: rotate(180deg); }
.co-modern .cv-tpick {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; min-width: 0; margin: 0;
    height: var(--bn-ctl-h, 1.875rem); padding: 0 .75rem 0 .5rem; box-sizing: border-box;
    border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink); font-size: var(--bn-ctl-fs, .74rem); font-weight: 800; white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease;
}
.co-modern .cv-tpick:hover { background: var(--mb-soft-2); }
.co-modern .cv-tpick > span, .co-modern .cv-tpick > i { pointer-events: none; }
.co-modern .cv-tpick-crest { display: inline-grid; place-items: center; }
.co-modern .cv-tpick-crest .cp-crest { width: 20px; height: 20px; }
.co-modern .cv-tpick-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.co-modern .cv-tpick-chev { color: var(--mb-muted); font-size: .55rem; }
.co-modern .cv-tpick 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; }
.co-modern .cv-tpick:focus-within { outline: 2px solid rgb(var(--cs)); outline-offset: 1px; }
.co-modern .cv-h2h-pick { max-width: 100%; }
.co-modern .cv-h2h-pick > .st-pick-btn { max-width: 100%; }
/* On the board the club's big crest stands beside the pill, so the pill carries the name only. */
.co-modern .cv-h2h-pick > .st-pick-btn > .st-pick-ico { display: none; }
/* The first club's menu opens from the pill's left edge (it sits at the board's left). */
@media (min-width: 440px) { .co-modern .cv-h2h-side:not(.is-b) .cv-h2h-pick .st-pick-menu { left: 0; right: auto; } }
.co-modern .bn-section-head .cv-prog-pick > .st-pick-btn { max-width: 14rem; }
.co-modern .cv-cmp-head { gap: .5rem; }
.co-modern .cv-cmp-name { display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 0; min-width: 0; font-size: .8rem; }
.co-modern .cv-cmp-name.is-b { justify-content: flex-end; }
.co-modern .cv-cmp-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
.co-modern .cv-cmp-name .cp-crest { width: 20px; height: 20px; }
.co-modern .cv-tab-seg { flex: 0 0 auto; }
.co-modern .cv-tab-pane[hidden] { display: none; }
.co-modern .cv-mir {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) 6rem minmax(0, 1fr) 5rem; align-items: center; column-gap: .55rem;
    margin: 0 -.7rem; padding: .42rem .8rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.co-modern .cv-mir:last-child { border-bottom: 0; }
.co-modern .cv-mir-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-modern .cv-mir > .cv-mir-v:first-child { text-align: right; }
.co-modern .cv-mir-v.is-best { color: var(--mb-ink); font-weight: 900; }
.co-modern .cv-mir-k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.co-modern .cv-mir-bar { display: flex; height: .45rem; border-radius: 999px; background: var(--mb-soft); overflow: hidden; }
.co-modern .cv-mir-bar.is-l { justify-content: flex-end; }
.co-modern .cv-mir-bar i { display: block; height: 100%; border-radius: 999px; transition: width 1s var(--mb-ease); }
.co-modern .cv-mir-bar.is-l i { background: rgb(var(--cs)); }
.co-modern .cv-mir-bar.is-r i { background: var(--cv-b); }
.co-modern .cv-mir-bar i.is-neg { opacity: .4; }
.co-modern .cv-mrec-cap { margin: .65rem 0 .15rem; }
.co-modern .cv-mrec {
    display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr); align-items: center; column-gap: .55rem;
    margin: 0 -.7rem; padding: .4rem .8rem; border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.co-modern .cv-mrec-side { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .78rem; font-weight: 700; }
.co-modern .cv-mrec-side.is-end { justify-content: flex-end; }
.co-modern .cv-dash { color: var(--mb-muted); }

/* ---- 5. History: a vertical timeline by decade ---- */
.co-modern .cv-tl-wrap { display: flex; flex-direction: column; gap: 1rem; }
.co-modern .cv-tl-dec { display: flex; flex-direction: column; gap: .4rem; }
.co-modern .cv-tl-dec[hidden], .co-modern .cv-tl-item[hidden], .co-modern [data-cv-tl-empty][hidden] { display: none !important; }
.co-modern .cv-tl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; padding: 0 .15rem; }
.co-modern .cv-tl-head b { font-size: 1rem; font-weight: 900; letter-spacing: -.01em; }
.co-modern .cv-tl-head-meta { color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.co-modern .cv-tl-head-gold { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 999px; background: rgba(var(--mb-accent-rgb), .2); color: var(--mb-accent-ink); font-size: .62rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.co-modern .cv-tl-head-gold i { color: var(--theme-accent, var(--slb-gold)); }
.co-modern .cv-tl-box { position: relative; padding: 0 .7rem; }
.co-modern .cv-tl { position: relative; margin: 0; padding: 0; list-style: none; }
.co-modern .cv-tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: .42rem; width: 2px; background: color-mix(in oklab, var(--mb-line) 80%, transparent); }
.co-modern .cv-tl-item { position: relative; }
.co-modern .cv-tl-row {
    position: relative; display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem;
    margin: 0 -.7rem; padding: .48rem .8rem .48rem 2.15rem;
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-ink); text-decoration: none; transition: background-color .18s ease;
}
.co-modern .cv-tl-item:last-child > .cv-tl-row { border-bottom: 0; }
.co-modern a.cv-tl-row:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); color: var(--mb-ink); }
.co-modern .cv-tl-row::before {
    content: ""; position: absolute; left: .87rem; top: 50%; width: .62rem; height: .62rem; margin-top: -.31rem; border-radius: 50%;
    background: var(--mb-card-bg); box-shadow: 0 0 0 2px color-mix(in oklab, var(--mb-muted) 55%, transparent);
}
.co-modern .cv-tl-item.is-title > .cv-tl-row { background: rgba(var(--mb-accent-rgb), .11); }
.co-modern .cv-tl-item.is-title > a.cv-tl-row:hover { background: rgba(var(--mb-accent-rgb), .17); }
.co-modern .cv-tl-item.is-title > .cv-tl-row::before { background: var(--theme-accent, var(--slb-gold)); box-shadow: 0 0 0 3px rgba(var(--mb-accent-rgb), .35); }
.co-modern .cv-tl-item.is-second > .cv-tl-row::before { background: #9aa2aa; box-shadow: 0 0 0 2px rgba(154, 162, 170, .35); }
.co-modern .cv-tl-item.is-third > .cv-tl-row::before { background: #b0703a; box-shadow: 0 0 0 2px rgba(176, 112, 58, .3); }
.co-modern .cv-tl-item.is-live > .cv-tl-row::before { background: rgb(var(--cs)); box-shadow: 0 0 0 3px rgba(var(--cs), .25); }
.co-modern .cv-tl-item.is-absent > .cv-tl-row::before { background: var(--mb-card-bg); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--mb-muted) 40%, transparent); }
.co-modern .cv-tl-item.is-absent > .cv-tl-row { color: var(--mb-muted); }
.co-modern .cv-tl-item.is-absent .mb-row-title { font-weight: 700; }
.co-modern .cv-tl-season { color: var(--mb-ink); font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-modern .cv-tl-item.is-absent .cv-tl-season { color: var(--mb-muted); font-weight: 700; }
.co-modern .cv-tl-champ { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; min-width: 0; vertical-align: middle; }
.co-modern .cv-tl-champ > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-modern .cv-tl-champ .cp-crest { width: 20px; height: 20px; }
.co-modern .cv-tl-champ.is-unknown { color: var(--mb-muted); font-weight: 700; }
.co-modern .cv-tl-champ.is-live { color: rgb(var(--cs)); }
.co-modern .cv-tl-res {
    display: inline-flex; align-items: center; gap: .3rem; min-width: 2.4rem; justify-content: center; padding: .14rem .5rem; border-radius: 999px;
    background: var(--mb-soft); color: var(--mb-ink); font-size: .7rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.co-modern .cv-tl-res.is-title { background: rgba(var(--mb-accent-rgb), .26); color: var(--mb-accent-ink); }
.co-modern .cv-tl-res.is-title i { color: var(--theme-accent, var(--slb-gold)); }
.co-modern .cv-tl-res.is-second { background: rgba(154, 162, 170, .22); }
.co-modern .cv-tl-res.is-third { background: rgba(176, 112, 58, .16); }
.co-modern .cv-tl-res.is-live { background: rgba(var(--cs), .14); }
.co-modern .bn-section-head .cv-dec-pick > .st-pick-btn { max-width: 10rem; }

/* Phones (My Benfica's breakpoints). */
@media (max-width: 991.98px) {
    .co-modern .cv-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .7rem; }
}
@media (max-width: 767.98px) {
    .co-modern .cv-grid { grid-template-columns: minmax(0, 1fr); }
    .co-modern .bn-section-head .cv-search { width: 9rem; }
}
@media (max-width: 575.98px) {
    .co-modern .cv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-modern .cv-tile > b { font-size: 1.3rem; }
    .co-modern .cv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-modern .cv-chip { padding: 0 .4rem 0 .3rem; }
    .co-modern .cv-chip-t { display: none; }
    .co-modern .cv-chip.is-focus .cv-chip-t { display: inline; max-width: 7rem; }
    .co-modern .cv-h2h-board { gap: .4rem; padding: .85rem .6rem .75rem; }
    .co-modern .cv-h2h-crest, .co-modern .cv-h2h-crest .cp-crest { width: 42px; height: 42px; }
    .co-modern .cv-h2h-mid { min-width: 7.5rem; }
    .co-modern .cv-h2h-rec { gap: .7rem; }
    .co-modern .cv-h2h-rec b { font-size: 1.4rem; }
    .co-modern .cv-h2h-pick > .st-pick-btn { padding-left: .55rem; padding-right: .55rem; }
    .co-modern .cv-cmp-name b { display: none; }
    .co-modern .cv-cmp-name { flex: 0 0 auto; }
    .co-modern .cv-cmp-head .cv-tab-seg { flex: 1 1 auto; justify-content: space-between; }
    .co-modern .cv-cmp-head .cv-tab-seg .mb-seg-btn { flex: 1 1 0; justify-content: center; }
    .co-modern .cv-mir { grid-template-columns: 3.4rem minmax(0, 1fr) 4.6rem minmax(0, 1fr) 3.4rem; column-gap: .4rem; }
    .co-modern .cv-mir-v { font-size: .72rem; }
    .co-modern .cv-mir-k { font-size: .58rem; }
    .co-modern .cv-mrec { grid-template-columns: minmax(0, 1fr) 4.4rem minmax(0, 1fr); column-gap: .35rem; }
    .co-modern .cv-mrec-side .cv-team > span { display: none; }
    .co-modern .cv-team-row .cv-form { display: none; }
    .co-modern .cv-tl-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; column-gap: .5rem; padding-left: 2rem; }
    .co-modern .cv-tl-season { font-size: .7rem; }
}
@media (max-width: 439.98px) {
    .co-modern .bn-section-head .cv-search { width: auto; flex: 1 1 auto; min-width: 6rem; }
    .co-modern .cv-team-row .cv-final { max-width: 5.5rem; }
    .co-modern .cv-legs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-modern .bn-section-head .cv-prog-pick, .co-modern .bn-section-head .cv-prog-pick > .st-pick-btn { max-width: 100%; }
}
@media (max-width: 379.98px) {
    .co-modern .cv-tiles { gap: .45rem; }
    .co-modern .cv-tile { padding: .5rem .6rem; }
    .co-modern .cv-tile > i { width: 1.45rem; height: 1.45rem; font-size: .7rem; }
    .co-modern .cv-mir { grid-template-columns: 3rem minmax(0, 1fr) 4rem minmax(0, 1fr) 3rem; column-gap: .3rem; }
    .co-modern .cv-h2h-mid { min-width: 6.4rem; }
    .co-modern .cv-team-row .cv-pts { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .co-modern .cv-ln, .co-modern .cv-tip, .co-modern .cv-split-seg, .co-modern .cv-mir-bar i, .co-modern .cv-chip, .co-modern .cv-swap { transition: none !important; }
    .co-modern .cv-swap:hover { transform: none; }
}
/* A head whose controls took their own row (owner, 7 Oct): they stretch across it evenly — the
   crest picker / search fill the room, a switch spreads its buttons, Options closes the row. */
@media (max-width: 767.98px) {
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions:has(.cv-tpick-std, .cv-search, .cv-sort-seg, .cv-kind-seg) { flex: 1 1 0% !important; min-width: 0 !important; flex-wrap: nowrap !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions > :is(.cv-tpick-std, .cv-search) { flex: 1 1 0%; min-width: 2.2rem; max-width: none; width: auto; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions > .cv-tpick-std > .st-pick-btn { width: 100%; max-width: none; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions > .cv-search input::placeholder { opacity: .8; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions > :is(.cv-sort-seg, .cv-kind-seg) { flex: 1 1 auto; justify-content: space-between; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > .bn-head-actions > :is(.cv-sort-seg, .cv-kind-seg) .mb-seg-btn { flex: 1 1 0; justify-content: center; }
}

/* ==========================================================================
   J. The sidebar's Fixtures & Results (owner, 7 Oct 2026: "does not look good"): the
      widget's compact list (cps_compact) in the panel's look — light leg / group labels,
      one standard row per match reaching the panel's edges, the same crest and score sizes,
      our tie first with one even tint, six shown and "Show all N".
   ========================================================================== */
.co-modern #coAside #fixtures-results .fixtures-nav-compact { padding: 0 .9rem .35rem; border: 0; }
.co-modern #coAside #fixtures-results .fixtures-nav-header { margin-bottom: .3rem; color: var(--mb-ink); font-size: .84rem; font-weight: 900; }
.co-modern #coAside #fixtures-results .fixtures-nav-btn { min-width: 0; width: var(--bn-ctl-h, 1.875rem); height: 1.6rem; border-radius: 999px !important; font-size: .66rem; }
.co-modern #coAside #fixtures-results .fixtures-nav-dot.active { background: rgb(var(--cs)); }
.co-modern #coAside #fixtures-results .tab-content { margin-bottom: 0 !important; }
.co-modern #coAside .cpsfx-list { display: flex; flex-direction: column; margin: .25rem 0 0; border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.co-modern #coAside .cpsfx-leg {
    padding: .5rem 1rem .25rem; color: var(--mb-muted);
    font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.co-modern #coAside .cpsfx-row {
    display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) 3.3rem minmax(0, 1fr); align-items: center; column-gap: .45rem;
    padding: .4rem 1rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.co-modern #coAside .cpsfx-list > .cpsfx-row:last-child { border-bottom: 0; padding-bottom: .6rem; }
.co-modern #coAside .cpsfx-row.is-own { background: rgba(var(--cs), .08); }
.co-modern #coAside .cpsfx-list:not(.is-all) .cpsfx-more { display: none; }
.co-modern #coAside .cpsfx-date {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: .5rem; background: var(--mb-soft); line-height: 1;
}
.co-modern #coAside .cpsfx-date b { font-size: .8rem; font-weight: 900; color: var(--mb-ink); font-variant-numeric: tabular-nums; }
.co-modern #coAside .cpsfx-date small { margin-top: .1rem; color: var(--mb-muted); font-size: .5rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.co-modern #coAside .cpsfx-team { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; color: var(--mb-ink); text-decoration: none; }
.co-modern #coAside .cpsfx-team.is-home { justify-content: flex-end; }
.co-modern #coAside .cpsfx-team.is-away { justify-content: flex-start; }
.co-modern #coAside a.cpsfx-team:hover .cpsfx-code { color: var(--mb-primary-ink); }
.co-modern #coAside .cpsfx-crest { flex: 0 0 auto; width: 24px !important; height: 24px !important; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.co-modern #coAside .cpsfx-crest.is-unknown { display: inline-grid; place-items: center; color: var(--mb-muted); font-size: .9rem; filter: none; }
.co-modern #coAside .cpsfx-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .72rem; font-weight: 800; line-height: 1.1; letter-spacing: .02em; }
.co-modern #coAside .cpsfx-team.is-own .cpsfx-code { color: var(--mb-ink); font-weight: 900; }
.co-modern #coAside .cpsfx-code br + * , .co-modern #coAside .cpsfx-code small { font-size: .85em; }
.co-modern #coAside .cpsfx-mid { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 0; }
.co-modern #coAside .cpsfx-link { text-decoration: none; }
.co-modern #coAside .cpsfx-score {
    display: inline-flex; align-items: center; justify-content: center; gap: .15rem; min-width: 3rem; padding: .2rem .35rem;
    border-radius: .3rem; background: var(--mb-soft-2); color: var(--mb-ink);
    font-size: .76rem; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.co-modern #coAside .cpsfx-score.is-w { background: var(--mb-ok); color: #fff; }
.co-modern #coAside .cpsfx-score.is-l { background: var(--mb-bad); color: #fff; }
.co-modern #coAside .cpsfx-score.is-live { background: rgba(var(--mb-bad-rgb), .12); color: var(--mb-ink); }
.co-modern #coAside .cpsfx-ko {
    display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; padding: .2rem .35rem; border-radius: .3rem;
    background: rgba(var(--cs), .1); color: var(--mb-ink); font-size: .74rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.co-modern #coAside .cpsfx-pens { color: var(--mb-muted); font-size: .58rem; font-weight: 800; white-space: nowrap; }
.co-modern #coAside .cpsfx-mid .bn-fx-live { color: var(--mb-bad-ink); font-size: .6rem; font-weight: 900; }
.co-modern #coAside .cpsfx-all {
    display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%;
    padding: .5rem 1rem .6rem; border: 0; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent);
    background: transparent; color: var(--mb-primary-ink); font-size: .74rem; font-weight: 800; cursor: pointer; box-shadow: none;
}
.co-modern #coAside .cpsfx-all i { font-size: .7em; transition: transform .2s var(--mb-ease); }
.co-modern #coAside .cpsfx-list.is-all .cpsfx-all i { transform: rotate(180deg); }
.co-modern #coAside .cpsfx-all:hover span { text-decoration: underline; }
@media (max-width: 379.98px) {
    .co-modern #coAside .cpsfx-row { column-gap: .3rem; grid-template-columns: 2rem minmax(0, 1fr) 3rem minmax(0, 1fr); }
    .co-modern #coAside .cpsfx-crest { width: 20px !important; height: 20px !important; }
}
@media (prefers-reduced-motion: reduce) { .co-modern #coAside .cpsfx-all i { transition: none; } }
.co-modern .cv-final > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* These views' heads on phones: a long title wraps beside its controls rather than pushing them
   to a row of their own (owner, 7 Oct: buttons stay on the title row; only when they cannot fit
   do they drop). comps-modern.js measures again and drops them when even that does not fit. */
@media (max-width: 575.98px) {
    body .benfica-layout.cp-modern :is(#competition-position-progression, #competition-stats-overview, #head-to-head-comparison, #competition-history, #competition-participants) > .bn-section-head.cp-head-wrap:not(.cp-head-drop) > h2 { flex: 1 1 7.5rem !important; }
    /* Head-to-Head pickers: crest + name stacked as one tall pill; the board's separate crest goes. */
    .co-modern .cv-h2h-crest { display: none; }
    .co-modern .cv-h2h-pick { display: block; width: 100%; }
    .co-modern .cv-h2h-pick > .st-pick-btn {
        flex-direction: column; justify-content: center; gap: .3rem; width: 100%; max-width: none; height: auto; min-height: 6.4rem;
        padding: .55rem .4rem .45rem; border-radius: 1rem; white-space: normal; background: var(--mb-card-bg); position: relative;
    }
    .co-modern .cv-h2h-pick[open] > .st-pick-btn { background: var(--mb-primary); }
    .co-modern .cv-h2h-pick > .st-pick-btn > .st-pick-ico { display: block; width: 42px !important; height: 42px !important; font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18)); }
    .co-modern .cv-h2h-pick > .st-pick-btn > .st-pick-txt {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%;
        white-space: normal; text-align: center; font-size: .72rem; line-height: 1.2;
    }
    .co-modern .cv-h2h-pick > .st-pick-btn > .st-pick-caret { position: absolute; top: .5rem; right: .55rem; }
    .co-modern .cv-team-row .cv-final { max-width: 6.5rem; }
}

/* Head-to-Head Records: the middle label shows whole (owner, 7 Oct 2026: "text is not
   showing" — "BIGGEST LO…"): a wider middle column and the label may take two lines. */
.co-modern .cv-mrec { grid-template-columns: minmax(0, 1fr) 8rem minmax(0, 1fr); }
.co-modern .cv-mrec > .cv-mir-k { overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.2; }
@media (max-width: 575.98px) {
    .co-modern .cv-mrec { grid-template-columns: minmax(0, 1fr) 5.2rem minmax(0, 1fr); }
}

/* Teams head on phones (owner, 7 Oct 2026: "it should be on the right of Teams"): the controls
   stay on the title row — the search is an icon until tapped (then the sort switch steps aside
   for it), the sort switch is icons only, the view picker last. */
@media (max-width: 767.98px) {
    body .benfica-layout.cp-modern .bn-section-head:has(.cv-sort-seg) { flex-wrap: nowrap !important; justify-content: flex-start !important; }
    body .benfica-layout.cp-modern .bn-section-head:has(.cv-sort-seg) > h2 { flex: 0 0 auto !important; min-width: max-content !important; width: auto !important; max-width: none !important; white-space: nowrap !important; overflow: visible !important; }
    body .benfica-layout.cp-modern .bn-section-head:has(.cv-sort-seg)::after { display: block !important; flex: 1 1 0 !important; min-width: .5rem !important; height: 3px !important; margin: 0 !important; order: 9 !important; }
    body .benfica-layout.cp-modern .bn-section-head:has(.cv-sort-seg) > .bn-head-actions { flex: 0 0 auto !important; width: auto !important; margin-left: 0 !important; order: 10 !important; flex-wrap: nowrap !important; gap: .25rem !important; }
    body .benfica-layout.cp-modern .bn-section-head:has(.cv-sort-seg) > .bn-head-actions.cp-viewctl { order: 11 !important; }
    body .benfica-layout.cp-modern .bn-section-head .cv-search:has(input:placeholder-shown):not(:focus-within) {
        flex: 0 0 auto !important; width: var(--bn-ctl-h, 1.875rem) !important; min-width: 0 !important; padding: 0 !important; justify-content: center; position: relative; overflow: hidden;
    }
    body .benfica-layout.cp-modern .bn-section-head .cv-search:has(input:placeholder-shown):not(:focus-within) input { position: absolute; inset: 0; width: 100% !important; opacity: 0; cursor: pointer; }
    body .benfica-layout.cp-modern .bn-section-head .cv-search:is(:focus-within, :has(input:not(:placeholder-shown))) { flex: 0 0 auto !important; width: 9rem !important; }
    body .benfica-layout.cp-modern .bn-section-head:has(.cv-search:is(:focus-within, :has(input:not(:placeholder-shown)))) .cv-sort-seg { display: none !important; }
    body .benfica-layout.cp-modern .bn-section-head .cv-sort-seg { flex: 0 0 auto !important; width: auto !important; }
    body .benfica-layout.cp-modern .bn-section-head .cv-sort-seg > .mb-seg-btn { flex: 0 0 auto !important; padding: .2rem .5rem !important; }
    body .benfica-layout.cp-modern .bn-section-head .cv-sort-seg > .mb-seg-btn > span:not([class*="ico"]) { display: none !important; }
}

/* Phones: every competitions view head keeps its controls on the title row, on the right after
   the colour line (owner, 7 Oct 2026: "it should be on the right of Teams" / History "does not
   look right"). Tighter gaps, the title whole, pickers as icon (or crest) + chevron, switches
   icons only, the competition's name dropped from History's title (the hero carries it). */
@media (max-width: 767.98px) {
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick)) {
        flex-wrap: nowrap !important; justify-content: flex-start !important; column-gap: .5rem !important;
    }
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick)) > h2 {
        flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick))::after {
        display: block !important; flex: 1 1 0 !important; min-width: .5rem !important; height: 3px !important; margin: 0 !important; order: 9 !important;
    }
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick)) > .bn-head-actions {
        flex: 0 0 auto !important; width: auto !important; margin-left: 0 !important; order: 10 !important; flex-wrap: nowrap !important; gap: .25rem !important;
    }
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick)) > .bn-head-actions.cp-viewctl { order: 11 !important; }
    body .benfica-layout.cp-modern .bn-main .bn-section-head .cp-title-pre { display: none; }
    /* Pickers: icon (or crest) + chevron; the native list still names every option. */
    body .benfica-layout.cp-modern .bn-main .bn-section-head :is(.cv-dec-pick, .cv-prog-pick) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
    /* Switches: icons only. */
    body .benfica-layout.cp-modern .bn-main .bn-section-head .cv-kind-seg { flex: 0 0 auto !important; width: auto !important; }
    body .benfica-layout.cp-modern .bn-main .bn-section-head .cv-kind-seg > .mb-seg-btn { flex: 0 0 auto !important; padding: .2rem .5rem !important; }
    body .benfica-layout.cp-modern .bn-main .bn-section-head .cv-kind-seg > .mb-seg-btn > span:not([class*="ico"]) { display: none !important; }
}
/* Long/short head titles, and the season chip on phones: the season already shows in the hero
   and the sidebar Filters, and on a phone the chip pushed the controls off the title row. */
.co-modern .cp-title-short { display: none; }
@media (max-width: 767.98px) {
    .co-modern .bn-section-head .cp-title-long { display: none; }
    .co-modern .bn-section-head .cp-title-short { display: inline; }
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick)) > .bn-head-actions.cps-chips { display: none !important; }
    body .benfica-layout.cp-modern .bn-main .bn-section-head.cp-head-wrap:has(:is(.cv-sort-seg, .cv-kind-seg, .cv-dec-pick, .cv-prog-pick)) > h2 { flex: 0 0 auto !important; overflow: visible !important; text-overflow: clip !important; }
}
/* The view heads' titles stay whole on phones (beats the id-scoped 7.5rem basis above); the
   colour line gives way first. */
@media (max-width: 767.98px) {
    body .benfica-layout.cp-modern :is(#competition-position-progression, #competition-stats-overview, #head-to-head-comparison, #competition-history, #competition-participants) > .bn-section-head.cp-head-wrap > h2 {
        flex: 0 0 auto !important; min-width: max-content !important; overflow: visible !important; text-overflow: clip !important;
    }
}

/* Hero eyebrow on phones: season · type only, one line (owner, 7 Oct 2026). */
@media (max-width: 767.98px) {
    .cph.hero-pv2 .cph-eb-more { display: none; }
    .cph.hero-pv2 .pv2-position { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Leader / Champion in the hero: a golden pill with a slow shine (owner, 7 Oct 2026). */
.cph.hero-pv2 .cph-champ {
    --cph-gold: var(--theme-accent-on-primary, var(--slb-gold, #F4B223));
    position: relative; overflow: hidden; isolation: isolate;
    padding: .22rem .75rem .22rem .6rem; border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cph-gold) 34%, transparent), color-mix(in srgb, var(--cph-gold) 12%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cph-gold) 60%, transparent), 0 0 18px color-mix(in srgb, var(--cph-gold) 28%, transparent);
    color: #fff;
}
.cph.hero-pv2 .cph-champ > i { color: var(--cph-gold); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cph-gold) 55%, transparent)); }
.cph.hero-pv2 .cph-champ-label { color: var(--cph-gold); opacity: 1; }
.cph.hero-pv2 .cph-champ .cph-crest { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.cph.hero-pv2 .cph-champ::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%);
    transform: translateX(-110%); animation: cph-champ-shine 4.5s ease-in-out 1s infinite;
}
@keyframes cph-champ-shine { 0%, 55% { transform: translateX(-110%); } 85%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .cph.hero-pv2 .cph-champ::after { animation: none; display: none; } }

/* The season watermark sits in the free space between the title and the stats panel. */
.cph.hero-pv2 .pv2-watermark.cph-wm { right: auto; left: 52%; transform: translate(-50%, -50%); white-space: nowrap; font-size: clamp(4rem, 2.5rem + 3.6vw, 7rem); }
@media (max-width: 1199.98px) { .cph.hero-pv2 .pv2-watermark.cph-wm { left: auto; right: 3%; top: 1.2rem; transform: none; font-size: 4.2rem; } }
/* Phones (owner, 7 Oct 2026: "mobil should also show"): top right, like the shirt number. */
/* Level with the hero badge and as tall as it (owner, 7 Oct 2026: "match the sizes of the
   icon and on the right"); the badge is 59px tall, 7px from the top of .pv2. */
@media (max-width: 767.98px) { .cph.hero-pv2 .pv2-watermark.cph-wm { display: block; left: auto; right: 0; top: 7px; height: auto; transform: none; font-size: 2rem; line-height: 1; -webkit-text-stroke-width: 1.2px; } }
/* iPhone: small, in the top-right corner like the shirt number (owner, 7 Oct 2026: "it needs to
   be small on iphone screen"). */
/* Sized to sit wholly inside the hero (owner, 7 Oct 2026: "cut off on the bottom"). */
@media (min-width: 1200px) { .cph.hero-pv2 .pv2-watermark.cph-wm { top: 50%; font-size: clamp(3.2rem, 1.4rem + 3vw, 5rem); line-height: .9; } }

/* ==========================================================================
   H. Head pickers in the site's filter standard (owner, 7 Oct 2026: the matchday, view,
      group, decade and club pickers of competitions.php look and open exactly like
      statistics.php's season pill). cpuPick() / cvwTeamPick() print filters-std's pill
      (details.st-pick.cp-pick-std + .st-pick-menu + a hidden select); filters-std.css draws
      it and filters-std.js runs it. Here only what a head needs on top: this page's older
      head-icon rules kept off the pill, the season pill's muted caret, the club list's group
      headings and taken clubs, the phone Options panel's full-width pill, and phones (icon or
      crest + caret).
   ========================================================================== */
/* competitions.php's head rule (.bn-section-actions i: gold, inherited size, inline) and the
   Options panel's (.cp-tools-pop i: inherited colour, .8em) would reach the pill's icons:
   the standard's own values win back. */
html body .co-modern .bn-section-head details.cp-pick-std .st-pick-ico { color: var(--fs-accent) !important; font-size: .85em !important; width: auto !important; display: inline-block !important; }
html body .co-modern .bn-section-head details.cp-pick-std[open] .st-pick-ico { color: var(--theme-accent-on-primary, var(--fs-on)) !important; }
html body .co-modern .bn-section-head details.cp-pick-std .st-pick-btn img.st-pick-ico { width: 1.3em !important; height: 1.3em !important; }
html body .co-modern .bn-section-head details.cp-pick-std .st-pick-opt > i { color: inherit !important; font-size: .7rem !important; width: auto !important; display: inline-block !important; }
html body .co-modern .bn-section-head details.cp-pick-std .st-pick-opt > .st-pick-logo-ico { flex: 0 0 18px; width: 18px !important; text-align: center; font-size: .78rem !important; color: var(--fs-accent) !important; }
/* The caret as on statistics.php's season pill (muted, .55rem; the open pill's colour), and its
   line height (the head size rule sets 1.2; the pill is 30px tall either way). */
.co-modern details.cp-pick-std .st-pick-caret { color: var(--fs-muted); font-size: .55rem; }
.co-modern details.cp-pick-std[open] .st-pick-caret { color: inherit; }
html body .co-modern .bn-section-head details.cp-pick-std .st-pick-caret { color: var(--fs-muted) !important; font-size: .55rem !important; width: auto !important; display: inline-block !important; }
html body .co-modern .bn-section-head details.cp-pick-std[open] .st-pick-caret { color: inherit !important; }
html body .co-modern .bn-section-head .bn-head-actions details.cp-pick-std > .st-pick-btn { line-height: 1.3; }
/* A club list in groups: each group's name above its clubs (compare.php's menu headings). */
.st-pick .st-pick-menu > .st-pick-grp {
    display: block; flex: 0 0 auto; padding: .4rem .55rem .2rem;
    color: var(--fs-muted); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
/* Head-to-Head's board holds the two club pickers: their menus open over the cards below it
   (.mb-box clips its content; the board's wash is a background, so nothing else spills). */
.co-modern .cv-h2h-board { overflow: visible; }
.co-modern .cv-h2h-board:has(details[open]) { position: relative; z-index: 6; }
/* The other side's club on Head-to-Head: listed, not pickable. */
.st-pick .st-pick-opt.is-off, .st-pick .st-pick-opt:disabled { opacity: .4; cursor: default; background: transparent; }
@media (max-width: 767.98px) {
    /* The phone Options panel: the view picker is a full-width pill with its words, the menu
       under it as wide as the pill (below 440px the standard's fixed card-wide menu). */
    html body .co-modern .bn-section-head .cp-tools-pop details.cp-pick-std { display: block; width: 100%; height: auto; }
    html body .co-modern .bn-section-head .cp-tools-pop details.cp-pick-std > .st-pick-btn { display: flex; width: 100%; max-width: none; }
    .co-modern .cp-tools-pop details.cp-pick-std .st-pick-txt { flex: 1 1 auto; text-align: left; }
    .co-modern .cp-tools-pop details.cp-pick-std .st-pick-caret { margin-left: auto; }
    /* Pickers in a head: the icon (or the club's crest) and the caret; the menu names every
       option. Never squeezed below that when the controls share a row of their own. */
    .co-modern .bn-section-head > :is(.bn-head-actions, .bn-group-actions) > details.cp-pick-std .st-pick-txt { display: none; }
    html body .co-modern .bn-section-head > :is(.bn-head-actions, .bn-group-actions) > details.cp-pick-std > .st-pick-btn { padding: 0 .6rem; gap: .3rem; max-width: none; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop > :is(.bn-head-actions, .bn-group-actions) > details.cp-pick-std { flex: 0 0 auto; }
    /* A head whose only controls are one picker (+ Options) and that still took a row of its
       own (comps-modern.js .cp-head-drop): the picker stretches across the row with its words,
       the caret at the far end (owner, 7 Oct: "their own evenly stretched row", never a
       right-aligned second row with a gap). */
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop:not(:has(.cp-md, .fx-chip, .cv-search, > .bn-head-actions > .mb-seg)) > :is(.bn-head-actions, .bn-group-actions):has(> details.cp-pick-std) { flex: 1 1 0% !important; min-width: 0 !important; }
    body .benfica-layout.cp-modern .bn-section-head.cp-head-drop:not(:has(.cp-md, .fx-chip, .cv-search, > .bn-head-actions > .mb-seg)) > :is(.bn-head-actions, .bn-group-actions) > details.cp-pick-std { flex: 1 1 0%; min-width: 0; max-width: none; }
    html body .co-modern .bn-section-head.cp-head-drop:not(:has(.cp-md, .fx-chip, .cv-search, > .bn-head-actions > .mb-seg)) > :is(.bn-head-actions, .bn-group-actions) > details.cp-pick-std > .st-pick-btn { width: 100%; padding: 0 .7rem; gap: .35rem; }
    .co-modern .bn-section-head.cp-head-drop:not(:has(.cp-md, .fx-chip, .cv-search, > .bn-head-actions > .mb-seg)) > :is(.bn-head-actions, .bn-group-actions) > details.cp-pick-std .st-pick-txt { display: inline; flex: 1 1 auto; text-align: left; }
}
@media (min-width: 440px) and (max-width: 767.98px) {
    .co-modern .cp-tools-pop details.cp-pick-std .st-pick-menu { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
}