/* ==========================================================================
   Statistics family — statistics.php, compare.php (players), rivalry.php, opponent.php
   (Oct 2026)
   --------------------------------------------------------------------------
   Loaded after themes/default/css/mybenfica-modern.css (the owner's standard): the page
   wrapper carries "benfica-layout mb-modern st-modern", so every .mb-* piece (cards,
   rows, pills, chips, the switch, icon tiles, the count chip) is My Benfica's, with its
   --mb-* tokens. This file only adds what these pages draw and My Benfica does not:
   pill pickers, leader boards, tiles, charts, head-to-head bars, match rows, and the
   frame of the shared stats tables. Selectors start at .st-modern (the page) or
   .hero-pv2--st (its hero). Colours are theme tokens; literals only as fallbacks.

   A. hero  B. section chips + pickers  C. leaders + tiles + charts  D. stats tables
   E. head-to-head + match rows  F. sidebar  G. compare  H. rivalry  I. opponent
   J. phones  K. reduced motion
   ========================================================================== */

/* ==========================================================================
   A. The hero: a bare crest as the badge (never on a disc or plate)
   ========================================================================== */
.hero-pv2--st .pv2-photo.st-hero-crest {
    background: none !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; overflow: visible !important; place-items: center;
}
.hero-pv2--st .pv2-photo.st-hero-crest img,
.hero-pv2--st .pv2-photo.st-hero-crest svg {
    width: 100% !important; height: 100% !important; object-fit: contain; object-position: center;
    background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}
.hero-pv2--st .pv2-photo.st-hero-crest .st-hero-pair { display: flex; align-items: center; justify-content: center; gap: .1rem; width: 100%; height: 100%; }
.hero-pv2--st .pv2-photo.st-hero-crest .st-hero-pair img { width: 48% !important; height: auto !important; max-height: 100%; }

/* ==========================================================================
   B. Section chips (the page's top bar) and the pill pickers
   ========================================================================== */
/* The section chips (.bn-spy) are styled once in style.css (owner, 5 Oct): nothing here. */

/* The pill pickers (.st-pick) are the site's filter standard: themes/default/css/filters-std.css. */

/* ==========================================================================
   C. Leader boards, tiles, charts
   ========================================================================== */
.st-modern .st-lead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.st-modern .st-col3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.st-modern .st-lead { padding: .3rem .7rem; min-width: 0; }
.st-modern .st-lead-head { display: flex; align-items: center; gap: .55rem; padding: .3rem .1rem .4rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.st-modern .st-lead-head b { font-size: .84rem; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .st-lead-head .mb-ico { width: 1.75rem; height: 1.75rem; border-radius: .55rem; font-size: .78rem; }
.st-modern .st-lead-head .mb-ico .fa-yellow-card,
.st-modern .st-lead-head .mb-ico [class*="-mask"] { font-size: .95rem; }
.st-modern .st-face-wrap { position: relative; }
.st-modern .st-face { width: 2rem !important; height: 2rem !important; flex: 0 0 auto; }
.st-modern .st-rank {
    position: absolute; right: -.3rem; bottom: -.2rem;
    min-width: 1rem; height: 1rem; padding: 0 .2rem; border-radius: 999px;
    background: var(--mb-card-bg); color: var(--mb-muted); box-shadow: 0 0 0 1px var(--mb-ring);
    font-size: .58rem; font-weight: 900; line-height: 1rem; text-align: center; font-variant-numeric: tabular-nums;
}
.st-modern .st-lead-row.is-top .st-rank { background: var(--mb-accent); color: var(--theme-on-accent, #3a2600); box-shadow: none; }
.st-modern .st-lead-row .mb-row-main { gap: .05rem; }
.st-modern .st-val { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); }
.st-modern .st-lead-row.is-top .st-val { color: var(--mb-primary-ink); }
/* A thin bar under a row's text; bn-motion grows it in ([data-bn-fill]). */
.st-modern .st-bar { display: block; height: .22rem; margin-top: .22rem; border-radius: 999px; background: var(--mb-soft-2); overflow: hidden; }
.st-modern .st-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--mb-primary); transition: width .9s var(--mb-ease); }
.st-modern .st-bar-fill.is-ok { background: var(--mb-ok); }
.st-modern .st-bar-fill.is-info { background: var(--mb-info); }
.st-modern .st-bar-fill.is-accent { background: var(--mb-accent); }
.st-modern .st-bar-fill.is-muted { background: var(--mb-muted); }
.st-modern .st-z { font-size: .8rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* Tiles: icon | figure over label (Fan Zone's tile shape, compact). */
.st-modern .st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.st-modern .st-tile { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; min-width: 0; }
.st-modern .st-tile .mb-ico { width: 2.1rem; height: 2.1rem; border-radius: .65rem; }
.st-modern .st-tile-main { display: flex; flex-direction: column; min-width: 0; }
.st-modern .st-tile-main b { font-size: 1.15rem; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .st-tile-main small { color: var(--mb-muted); font-size: .68rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A chart in a panel; the canvas colours come from the theme through stats-modern.js. */
.st-modern .st-chart-box { padding: .7rem .8rem .5rem; }
.st-modern .st-chart-box + .stats-table-wrap,
.st-modern .st-chart-box + .st-boxed { margin-top: 1rem; }
.st-modern .st-chart { position: relative; width: 100%; }
.st-modern .st-boxed { padding: .6rem .75rem; }
.st-modern .st-boxed > :last-child { margin-bottom: 0; }
.st-modern .st-note { margin: 0 0 .7rem; color: var(--mb-muted); font-size: .76rem; line-height: 1.45; }

/* W/D/L squares (the site's form badge). */
.st-modern .st-wdl {
    display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: .25rem;
    color: #fff; font-size: .66rem; font-weight: 900; text-decoration: none; line-height: 1;
}
.st-modern .st-wdl.is-w { background: var(--mb-ok); }
.st-modern .st-wdl.is-d { background: var(--mb-muted); }
.st-modern .st-wdl.is-l { background: var(--mb-bad); }
.st-modern a.st-wdl:hover { color: #fff; outline: 2px solid var(--mb-primary); outline-offset: 1px; }

/* ==========================================================================
   D. The shared stats tables: the panel frame (the table system ships bare)
   ========================================================================== */
.st-modern .stats-table-wrap {
    border: 1px solid var(--mb-ring) !important; border-radius: var(--mb-radius) !important;
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow) !important;
}
.st-modern .stats-table { --bs-table-bg: transparent; }
/* The sort pills under the player / manager tables: My Benfica's flat pill. */
.st-modern .stats-sortby-bar { padding: .55rem .5rem .6rem; gap: .3rem !important; }
.st-modern .stats-sortbtn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .24rem .7rem !important; border: 1px solid var(--mb-line) !important; border-radius: 999px !important;
    background: var(--mb-soft) !important; color: var(--mb-ink) !important;
    font-size: .72rem !important; font-weight: 800 !important; line-height: 1.25; box-shadow: none !important;
}
.st-modern .stats-sortbtn:hover { background: var(--mb-soft-2) !important; }
.st-modern .stats-sortbtn.stats-sortbtn-active { background: var(--mb-primary) !important; border-color: transparent !important; color: var(--mb-on) !important; }
.st-modern .stats-sortbtn.stats-sortbtn-active i { color: inherit !important; }
.st-modern .stats-sortbtn i { margin-right: 0 !important; }
/* Linked renderers that bring their own card (form strip, link-up map) sit inside a panel. */
.st-modern .st-boxed .card { border: 0; box-shadow: none; background: transparent; }
.st-modern .st-boxed .card-body { padding: 0; }

/* ==========================================================================
   E. Head-to-head bars and match rows
   ========================================================================== */
.st-modern .st-h2h-box { padding: .3rem .7rem .45rem; }
.st-modern .st-h2h-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; padding: .3rem 0 .45rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.st-modern .st-h2h-side { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .82rem; font-weight: 800; }
.st-modern .st-h2h-side.is-theirs { justify-content: flex-end; text-align: right; }
.st-modern .st-h2h-side span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .st-h2h-side img, .st-modern .st-crest { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; background: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.st-modern .st-h2h-vs { color: var(--mb-muted); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.st-modern .st-h2h {
    display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 3.4rem; align-items: end; gap: .6rem;
    padding: .45rem 0 .4rem;
}
.st-modern .st-h2h + .st-h2h { border-top: 1px solid color-mix(in oklab, var(--mb-line) 45%, transparent); }
.st-modern .st-h2h-v { font-size: 1rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--mb-muted); }
.st-modern .st-h2h-v.is-ours { text-align: left; }
.st-modern .st-h2h-v.is-theirs { text-align: right; }
.st-modern .st-h2h.is-ours .st-h2h-v.is-ours,
.st-modern .st-h2h.is-theirs .st-h2h-v.is-theirs { color: var(--mb-ink); }
.st-modern .st-h2h-mid { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.st-modern .st-h2h-lbl { display: flex; align-items: center; justify-content: center; gap: .35rem; color: var(--mb-muted); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-modern .st-h2h-lbl i { color: var(--mb-primary-ink); }
.st-modern .st-h2h-bar { display: flex; gap: .2rem; height: .5rem; }
.st-modern .st-h2h-a, .st-modern .st-h2h-b { display: block; height: 100%; flex: 0 0 auto; width: var(--w); border-radius: 999px; }
.st-modern .st-h2h-a { background: var(--mb-primary); transform-origin: right center; animation: stGrow .9s var(--mb-ease) both; }
.st-modern .st-h2h-b { background: color-mix(in oklab, var(--mb-muted) 55%, transparent); transform-origin: left center; animation: stGrow .9s var(--mb-ease) both; }
.st-modern .st-h2h.is-theirs .st-h2h-b { background: var(--mb-ink); opacity: .7; }
@keyframes stGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The W/D/L balance in one line (rivalry, opponent). */
.st-modern .st-balance { display: flex; height: .7rem; gap: .2rem; margin: .2rem 0 .45rem; }
.st-modern .st-balance > span { display: block; height: 100%; border-radius: 999px; width: var(--w); transform-origin: left center; animation: stGrow .9s var(--mb-ease) both; }
.st-modern .st-balance .is-w { background: var(--mb-ok); }
.st-modern .st-balance .is-d { background: color-mix(in oklab, var(--mb-muted) 60%, transparent); }
.st-modern .st-balance .is-l { background: var(--mb-bad); }
.st-modern .st-balance-key { display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: var(--mb-muted); font-size: .72rem; font-weight: 700; }
.st-modern .st-balance-key span { display: inline-flex; align-items: center; gap: .3rem; }
.st-modern .st-balance-key i { width: .55rem; height: .55rem; border-radius: 2px; display: inline-block; }
.st-modern .st-balance-key b { color: var(--mb-ink); font-weight: 900; }

/* A match row: date square | competition (bare logo) + one meta line | score square. */
.st-modern .st-mrow { grid-template-columns: 2.3rem minmax(0, 1fr) auto; padding: .4rem .1rem; }
.st-modern .st-mrow .mb-row-title { display: flex; align-items: center; gap: .4rem; }
.st-modern .st-mrow .mb-row-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .st-mrow .mb-row-title img { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; border-radius: 0 !important; background: none !important; margin: 0 !important; }
.st-modern .st-mrow .mb-row-side { gap: .4rem; }
.st-modern .st-venue { color: var(--mb-muted); font-size: .66rem; font-weight: 800; }
.st-modern .mb-score.is-d { background: var(--mb-soft-2); }
.st-modern .st-form-strip { display: flex; flex-wrap: wrap; gap: .25rem; }

/* ==========================================================================
   F. Sidebar
   ========================================================================== */
.benfica-layout.st-modern .bn-aside .bn-panel { padding-bottom: .75rem; }
.benfica-layout.st-modern .st-side-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.benfica-layout.st-modern .st-side-tiles li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft); }
.benfica-layout.st-modern .st-side-tiles li.is-wide { grid-column: 1 / -1; }
.benfica-layout.st-modern .st-side-tiles span { color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.benfica-layout.st-modern .st-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; }
.benfica-layout.st-modern .st-side-tiles b.is-text { font-size: .78rem; line-height: 1.5; }
.benfica-layout.st-modern .st-side-last { margin-top: .55rem; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); }
.benfica-layout.st-modern .st-side-form .st-form-strip { gap: .3rem; }
.benfica-layout.st-modern .st-side-form .st-wdl { width: 1.6rem; height: 1.6rem; font-size: .7rem; }
.benfica-layout.st-modern .bn-aside .mb-row { padding-left: 0; padding-right: 0; }

/* ==========================================================================
   G. Compare (players): cards and the comparison grid in the standard's frame
   ========================================================================== */
.st-modern.cmp-page .pc-card {
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
}
.st-modern.cmp-page .pc-card[data-accent] {
    border-color: var(--mb-ring);
    background: linear-gradient(180deg, rgba(var(--pc-accent-rgb), .1), var(--mb-card-bg) 70%);
}
.st-modern.cmp-page .pc-card.is-empty { border-style: dashed; border-color: var(--mb-line); background: var(--mb-card-bg); box-shadow: none; }
.st-modern.cmp-page .st-box-pad { padding: .3rem .7rem; }
.st-modern.cmp-page .pc-stats { position: relative; }
.st-modern.cmp-page .pc-stats-row { align-items: center; }
.st-modern.cmp-page .pc-stats-cell { position: relative; }
/* Each value's share of the row's best, under the number (CSS-grown, so AJAX rows animate). */
.st-modern.cmp-page .pc-vbar { display: block; height: .2rem; margin: .1rem auto 0; width: 70%; border-radius: 999px; background: var(--mb-soft-2); overflow: hidden; }
.st-modern.cmp-page .pc-vbar > i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--mb-primary); transform-origin: left center; animation: stGrow .9s var(--mb-ease) both; }
.st-modern.cmp-page .pc-stats-val.is-best + .pc-vbar > i { background: var(--mb-ok); }
/* The scope controls (.pc-scope) sit in the sidebar's Filters panel: filters-std.css, E. */
.st-modern.cmp-page .pc-share-btn {
    padding: .24rem .7rem; border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent);
    background: var(--mb-soft); color: var(--mb-ink); font-size: .74rem; box-shadow: none;
}
.st-modern.cmp-page .pc-share-btn:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
.st-modern.cmp-page .pc-share-btn > i:first-child { color: var(--mb-primary-ink); }
.st-modern.cmp-page .st-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; align-items: start; }
.st-modern.cmp-page .st-chart-grid--one { grid-template-columns: minmax(0, 1fr); }
.st-modern.cmp-page .st-chart-grid--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.st-modern.cmp-page .st-chart-cell { min-width: 0; }
.st-modern.cmp-page .st-chart-cell > .bn-section { margin-top: 0; }
.st-modern.cmp-page #cmp-top { margin-top: 0; }
.st-modern.cmp-page .st-notice { margin-bottom: 1rem; }
.st-modern.cmp-page .pc-results > .bn-section:first-child,
.st-modern.cmp-page .pc-results > .alert:first-child { margin-top: 0; }
.st-modern.cmp-page .pc-results:not(:empty) { margin-top: 1rem; }
.st-modern.cmp-page .pc-results > .alert { border-radius: var(--mb-radius); }
.st-modern.cmp-page .st-sim-name { display: flex; align-items: center; gap: .45rem; padding: .35rem .1rem .1rem; font-size: .78rem; font-weight: 900; color: var(--mb-muted); text-transform: uppercase; letter-spacing: .05em; }
.st-modern.cmp-page .st-sim-score { min-width: 2.6rem; padding: .12rem .45rem; border-radius: .25rem; background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink); font-size: .74rem; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
/* Sidebar leader rows. */
.benfica-layout.st-modern.cmp-page .pc-side-row { padding: .35rem 0; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.benfica-layout.st-modern.cmp-page .pc-side-row:last-child { border-bottom: 0; }
.benfica-layout.st-modern.cmp-page .pc-side-duel { border: 1px solid color-mix(in oklab, var(--mb-line) 70%, transparent); border-radius: .7rem; background: var(--mb-soft); box-shadow: none; }

/* ==========================================================================
   H. Rivalry
   ========================================================================== */
.st-modern .rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.st-modern .rv-tile { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .6rem .75rem; color: var(--mb-ink); text-decoration: none; transition: transform .2s var(--mb-ease), border-color .2s ease; }
.st-modern .rv-tile:hover { color: var(--mb-ink); transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .3); }
.st-modern .rv-tile img { width: 2.6rem; height: 2.6rem; object-fit: contain; background: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.st-modern .rv-tile-main { display: flex; flex-direction: column; min-width: 0; }
.st-modern .rv-tile-main b { font-size: .88rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .rv-tile-main small { color: var(--mb-muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .rv-tile .st-balance { height: .3rem; margin: .3rem 0 0; }
.st-modern .rv-tile-pct { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-primary-ink); }
.st-modern .rv-tile-pct small { display: block; color: var(--mb-muted); font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; text-align: right; }
.st-modern .rv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.st-modern .rv-two > * { min-width: 0; }
.st-modern .rv-brk { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .4rem .1rem; }
.st-modern .rv-brk + .rv-brk { border-top: 1px solid color-mix(in oklab, var(--mb-line) 50%, transparent); }
.st-modern .rv-brk-lbl { font-size: .76rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-modern .rv-brk .st-balance { height: .45rem; margin: 0; }
.st-modern .rv-brk-n { color: var(--mb-muted); font-size: .68rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-modern .rv-next { padding: .75rem .9rem .7rem; }
.st-modern .rv-next .mb-next-board { margin-top: .5rem; }
.st-modern .rv-next .mb-team img { background: none !important; border-radius: 0 !important; padding: 0 !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.st-modern .rv-next-ctx { display: flex; flex-wrap: wrap; gap: .35rem; }
.st-modern .rv-streaks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.st-modern .rv-form-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .1rem .5rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.st-modern .rv-form-row small { color: var(--mb-muted); font-size: .66rem; font-weight: 800; white-space: nowrap; }

/* ==========================================================================
   I. Opponent: the "Who hurts them" columns as panels
   ========================================================================== */
.st-modern .pvc-hurt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.st-modern .pvc-hurt-col {
    min-width: 0; padding: .55rem .7rem .4rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius); background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
}
.st-modern .op-roles { display: flex; flex-wrap: wrap; gap: .35rem; padding: .45rem 0 .1rem; }

/* ==========================================================================
   J. Phones (the standard's breakpoints: 1199 / 767 / 575 / 439 / 379)
   ========================================================================== */
@media (max-width: 1199.98px) {
    .st-modern .st-lead-grid, .st-modern .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-modern .st-col3, .st-modern .pvc-hurt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .st-modern.cmp-page .st-chart-grid, .st-modern.cmp-page .st-chart-grid--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .st-modern .st-tiles, .st-modern .rv-streaks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .st-modern .rv-two { grid-template-columns: minmax(0, 1fr); }
    /* A head with pickers keeps its title; the decorative rule gives way (as My Benfica's switch heads). */
    body .benfica-layout.st-modern .bn-section-head:has(.st-picks, .st-chips) > h2 { flex: 1 1 auto !important; min-width: min-content !important; }
    .benfica-layout.st-modern .bn-section-head:has(.st-picks, .st-chips)::after { display: none !important; }
    .benfica-layout.st-modern .bn-section-head:has(.st-picks, .st-chips) .bn-head-actions { margin-left: auto !important; }
    .st-modern .st-mrow .st-venue { display: none; }
    /* The comparison's scope pills: the title keeps the room, the decorative rule gives way. */
    body .benfica-layout.st-modern .bn-section-head:has(.pc-scope) > h2 { flex: 1 1 auto !important; min-width: min-content !important; }
    .benfica-layout.st-modern .bn-section-head:has(.pc-scope)::after { display: none !important; }
    .benfica-layout.st-modern .bn-section-head:has(.pc-scope) .bn-head-actions { margin-left: auto !important; }
}
@media (max-width: 575.98px) {
    .st-modern .st-lead-grid, .st-modern .rv-grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
    /* Six boards of five rows is a long scroll on a phone: the top three each (the table below has everyone). */
    .st-modern .st-lead-grid .st-lead-row:nth-child(n+4) { display: none; }
    .st-modern .st-lead-grid .st-lead-row:nth-child(3) { border-bottom: 0; }
    .st-modern .st-col3 { gap: .6rem; }
    .st-modern .st-tile { padding: .5rem .6rem; }
    .st-modern .st-tile-main b { font-size: 1rem; }
    .st-modern .st-h2h { grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; gap: .45rem; }
    .st-modern .st-h2h-v { font-size: .9rem; }
}
@media (max-width: 439.98px) {
    /* Phone heads (owner rules): the title never truncates; chips and a single picker stay
       beside it as compact pills (ellipsis inside); a switch WITH chips takes its own full
       row, the switch stretched with equal buttons and the chips at the right end. */
    body .benfica-layout.st-modern .bn-section-head:has(.st-picks, .st-chips) > h2 { flex: 0 0 auto !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
    .benfica-layout.st-modern .bn-section-head:has(.st-picks, .st-chips) .bn-head-actions { min-width: 0 !important; flex: 0 1 auto !important; }
    .benfica-layout.st-modern .bn-section-head:has(.st-picks > .mb-seg):has(.fx-chip) { flex-wrap: wrap !important; row-gap: .5rem !important; }
    .benfica-layout.st-modern .bn-section-head:has(.st-picks > .mb-seg):has(.fx-chip) .bn-head-actions { flex: 1 0 100% !important; justify-content: space-between !important; margin-left: 0 !important; gap: .4rem; }
    .st-modern .bn-section-head:has(.fx-chip) .st-picks:has(> .mb-seg) { flex: 1 1 auto; order: -1; }
    .st-modern .bn-section-head:has(.fx-chip) .st-picks > .mb-seg { flex: 1 1 auto; }
    .st-modern .bn-section-head:has(.fx-chip) .st-picks > .mb-seg .mb-seg-btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 379.98px) {
    .st-modern .st-tiles, .st-modern .rv-streaks { gap: .45rem; }
    .st-modern .rv-brk { grid-template-columns: 4.4rem minmax(0, 1fr) auto; }
}

/* ==========================================================================
   K. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .st-modern .st-h2h-a, .st-modern .st-h2h-b, .st-modern .st-balance > span,
    .st-modern.cmp-page .pc-vbar > i { animation: none !important; }
    .st-modern .st-bar-fill, .st-modern .rv-tile { transition: none !important; }
    .st-modern .rv-tile:hover { transform: none; }
}

/* "Show all": the rest of a long list behind a plain disclosure (no script). */
.st-modern .st-more > summary { list-style: none; cursor: pointer; }
.st-modern .st-more > summary::-webkit-details-marker { display: none; }
.st-modern .st-more[open] > summary .mb-more i { transform: rotate(180deg); }
.st-modern .st-more[open] > summary { border-bottom: 1px dashed color-mix(in oklab, var(--mb-line) 70%, transparent); }
.st-modern .st-mrow .mb-row-side .mb-chip { padding: .1rem .45rem; font-size: .66rem; }
.st-modern .st-mrow .mb-row-side [class*="-card"] { font-size: .85rem; }
@media (max-width: 575.98px) {
    /* The Debate Card's share pill keeps its icon and caret on a phone (the title needs the room). */
    .st-modern.cmp-page .pc-share-label { display: none; }
    .st-modern.cmp-page .pc-vbar { width: 80%; }
}

/* ==========================================================================
   Phone heads and top bars (owner, 5 Oct): titles never truncate; below 440px a
   head's controls take their own full-width row — a switch stretches with equal
   buttons and a picker sits as a compact pill at the right end (its own row at
   320); top bars show icons only, packed left.
   ========================================================================== */

/* ==========================================================================
   L. Filters in the sidebar + the head's active-filter chips: the site standard, in
      themes/default/css/filters-std.css (stFilterAssetTags(), printed by stAssetTags()).
   ========================================================================== */

/* ==========================================================================
   M. compare.php, all four views
   ========================================================================== */
/* Head controls are ONE size (owner, 6 Oct: --bn-ctl-h). */
html body .st-modern .bn-section-head .bn-head-actions :is(.pc-share-btn, .pc-comp-btn) { height: var(--bn-ctl-h, 1.875rem); min-height: 0; padding-top: 0; padding-bottom: 0; font-size: var(--bn-ctl-fs, .74rem); box-sizing: border-box; }
/* Season and opponent cards: the crest bare with a light shadow, never on a disc. */
.st-modern.cmp-page .sc-bubble, .st-modern.cmp-page .cc-bubble {
    width: 56px; height: 56px; border: 0 !important; border-radius: 0 !important; background: none !important; overflow: visible !important;
}
.st-modern.cmp-page .sc-bubble img, .st-modern.cmp-page .cc-bubble img {
    width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.22));
}
.st-modern.cmp-page .sc-card, .st-modern.cmp-page .cc-card { padding-top: 1.4rem; }
/* The cards' own season / opponent pickers: the standard pill. */
.st-modern.cmp-page .sc-card-pick .pc-comp-btn {
    padding: .28rem .7rem; 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; box-shadow: none;
}
.st-modern.cmp-page .sc-card-pick .pc-comp-btn:hover { background: var(--mb-soft-2); }
/* The "which way round" sentence and the notes under a table. */
.st-modern.cmp-page .cc-lede { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; padding: .55rem .75rem;
    border: 0; border-radius: var(--mb-radius-sm); background: var(--mb-soft); color: var(--mb-muted); font-size: .76rem; line-height: 1.45; }
.st-modern.cmp-page .cc-lede i { color: var(--mb-primary-ink); margin-top: .15rem; }
.st-modern.cmp-page .sc-note { margin: .6rem 0 .3rem; color: var(--mb-muted); font-size: .72rem; line-height: 1.45; }
.st-modern .st-note--warn { color: var(--mb-bad-ink); }
.st-modern.cmp-page .st-box-pad > .st-note { margin: .6rem 0 .3rem; }
.st-modern.cmp-page .st-notice + .bn-section, .st-modern.cmp-page .st-notice + .mb-box { margin-top: 1rem; }
.st-modern.cmp-page #ccResults > .st-chart-grid, .st-modern.cmp-page #comparisonResults > .st-chart-grid { margin-top: 1rem; }
/* The best value in a row (season / opponent grids): the standard's success ink. */
.st-modern.cmp-page .sc-best { color: var(--mb-ok-ink); }
.st-modern.cmp-page .sc-best::after { background: var(--mb-ok); }
/* Sidebar rows: a value pill, a go arrow, the compare shortcut. */
.benfica-layout.st-modern .st-side-val { font-size: .86rem; font-weight: 900; color: var(--mb-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.benfica-layout.st-modern .st-side-go { color: var(--mb-muted); font-size: .72rem; }
.benfica-layout.st-modern a.mb-row:hover .st-side-go { color: var(--mb-primary-ink); }
.benfica-layout.st-modern .st-side-vs { color: var(--mb-muted); font-size: .76rem; text-decoration: none; margin-left: .25rem; }
.benfica-layout.st-modern .st-side-vs:hover { color: var(--mb-primary-ink); }
.benfica-layout.st-modern .st-row-link { color: var(--mb-ink); text-decoration: none; }
.benfica-layout.st-modern .st-row-link:hover { color: var(--mb-primary-ink); }
.benfica-layout.st-modern .bn-aside .mb-ico { width: 2rem; height: 2rem; }
/* The bar under a value already shows the row's lead; the old underline dash beside it read
   as a stray mark (the green ink stays). */
.st-modern.cmp-page .sc-best::after { display: none; }

/* Rank badges on the leader faces: the digit sits in the optical centre of its circle (owner,
   6 Oct 2026). A flex box with line-height 1, and where supported the line box trimmed to the
   cap height so system-ui digits do not ride low. */
.st-modern .st-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; min-width: 1rem; height: 1rem; padding: 0; line-height: 1;
    text-box: trim-both cap alphabetic;
}