/* ==========================================================================
   What If? — the modern skin (whatif.php, Oct 2026)
   --------------------------------------------------------------------------
   Linked by whatif.php (inside the page) and by its hero (whatifHeroHtml(),
   inside #hero-container). Every selector starts at .wi-modern (the page's
   .benfica-layout) or .wih (the hero). Replaces the inline whatifStylesCss().
   Item cards use EXACTLY the sidebar panel's box (.benfica-layout .bn-panel):
   body background, a 1px hairline ring, the theme radius and the theme
   shadow; dark mode: the tertiary surface and a white hairline. Sections are
   bare. Colours are theme tokens (literals only as var() fallbacks and
   neutral black/white alphas), so light, dark and every skin follow.

   Layers: A. tokens  B. hero  C. section heads (picker + controls)
           D. result card  E. phone tabs + grid  F. matchday cards + fixtures
           G. table + odds  H. sidebar  I. phones  J. motion
   ========================================================================== */

/* A. Tokens */
.wi-modern {
    --wi-card: var(--bs-body-bg);
    --wi-ring: rgba(0, 0, 0, .07);
    --wi-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .06));
    --wi-radius: var(--theme-radius-lg, 1.1rem);
    --wi-soft: var(--theme-surface-2, var(--bs-tertiary-bg));
    --wi-soft-2: var(--theme-surface-3, var(--bs-secondary-bg));
    --wi-line: var(--theme-border, var(--bs-border-color));
    --wi-ink: var(--theme-ink, var(--bs-body-color));
    --wi-muted: var(--theme-ink-muted, var(--bs-secondary-color));
    --wi-faint: var(--theme-ink-faint, var(--bs-secondary-color));
    --wi-primary: var(--theme-primary, var(--bs-primary));
    --wi-primary-rgb: var(--theme-primary-rgb, 200, 16, 46);
    --wi-primary-ink: color-mix(in oklab, var(--wi-primary) 80%, var(--wi-ink));
    --wi-on: var(--theme-on-primary, #fff);
    --wi-accent: var(--theme-accent, var(--bs-warning));
    --wi-accent-rgb: var(--theme-accent-rgb, 244, 178, 35);
    --wi-accent-ink: color-mix(in oklab, var(--wi-accent) 62%, var(--wi-ink));
    --wi-ok: var(--theme-success, var(--bs-success));
    --wi-ok-rgb: var(--theme-success-rgb, 25, 135, 84);
    --wi-ok-ink: var(--theme-success-strong, var(--bs-success));
    --wi-bad: var(--theme-danger, var(--bs-danger));
    --wi-bad-rgb: var(--theme-danger-rgb, 220, 53, 69);
    --wi-bad-ink: var(--theme-danger-strong, var(--bs-danger));
    --wi-ease: var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
[data-bs-theme="dark"] .wi-modern {
    --wi-card: var(--bs-tertiary-bg, #1e1e1e);
    --wi-ring: rgba(255, 255, 255, .08);
    --wi-shadow: var(--theme-shadow, 0 10px 30px rgba(0, 0, 0, .3));
    --wi-soft: color-mix(in oklab, var(--theme-ink, #fff) 6%, var(--wi-card));
    --wi-soft-2: color-mix(in oklab, var(--theme-ink, #fff) 11%, var(--wi-card));
    --wi-line: color-mix(in oklab, var(--theme-ink, #fff) 12%, transparent);
    --wi-primary-ink: var(--theme-link, var(--wi-ink));
    --wi-accent-ink: var(--wi-accent);
    --wi-ok-ink: color-mix(in oklab, var(--wi-ok) 58%, white);
    --wi-bad-ink: color-mix(in oklab, var(--wi-bad) 58%, white);
}

/* ==========================================================================
   B. Hero (hero.php 'whatif' -> whatifHeroHtml()). Sizes come from the shared
      page-hero block at the end of style.css (.hero-pv2--page).
   ========================================================================== */
.wih.hero-pv2--wi .pv2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 30rem); }
.wih.hero-pv2--wi .wih-badge { place-items: center; }
.wih.hero-pv2--wi .wih-badge > i { opacity: 1; color: var(--theme-accent-on-primary, var(--theme-accent, #F4B223)); }
.wih.hero-pv2--wi .wih-sub { max-width: 40rem; color: color-mix(in oklab, var(--theme-on-primary, #fff) 82%, transparent); }
.wih.hero-pv2--wi .wih-panel { display: flex; flex-direction: column; gap: .55rem; }
.wih.hero-pv2--wi .wih-side .pv2-stats-head { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wih.hero-pv2--wi .wih-side .pv2-stat { flex: 1 1 0; }
.wih.hero-pv2--wi .wih-side .pv2-stat-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; line-height: 1.1; }
@media (max-width: 1199.98px) {
    .wih.hero-pv2--wi .pv2 { grid-template-columns: auto minmax(0, 1fr); }
    .wih.hero-pv2--wi .wih-side { grid-column: 1 / -1; }
}

/* ==========================================================================
   C. Section heads: the competition picker (a pill like the season picker) and
      the scenario controls (icon pills; labels show from tablet up).
   ========================================================================== */
.wi-modern .bn-main > .bn-section + .bn-section,
.wi-modern .wi-pane > .bn-section + .bn-section { margin-top: 1rem; }
.wi-modern .wi-scope { display: inline-flex; align-items: center; gap: .35rem; margin: 0; min-width: 0; max-width: 100%; }
.wi-modern .wi-pick {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; min-width: 0; max-width: 100%;
    height: 1.9rem; margin: 0; padding: 0 .3rem 0 .7rem;
    border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent); border-radius: 999px;
    background: var(--wi-soft); color: var(--wi-ink); cursor: pointer;
}
.wi-modern .wi-pick:hover { background: var(--wi-soft-2); }
.wi-modern .wi-pick > i:first-child { color: var(--wi-accent-ink); font-size: .74rem; flex: 0 0 auto; }
.wi-modern .wi-pick select {
    appearance: none; -webkit-appearance: none; border: 0; background: transparent; box-shadow: none;
    min-width: 0; max-width: 14rem; padding: 0 1.15rem 0 0; margin: 0;
    color: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.wi-modern .wi-pick select:focus { outline: none; }
.wi-modern .wi-pick:focus-within { outline: 2px solid var(--wi-primary); outline-offset: 1px; }
.wi-modern .wi-pick select option { color: var(--bs-body-color); background: var(--bs-body-bg); }
.wi-modern .wi-pick-chev { position: absolute; right: .6rem; pointer-events: none; font-size: .6rem; color: var(--wi-muted); }

/* The control group: My Benfica's .mb-seg look (one soft pill group), plain pills inside. */
.wi-modern .wi-acts {
    display: inline-flex; gap: .15rem; padding: .15rem; flex: 0 0 auto;
    border-radius: 999px; background: var(--wi-soft);
    border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent);
}
.wi-modern .wi-act {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .62rem; min-height: 1.6rem;
    border: 0; border-radius: 999px; background: transparent; box-shadow: none;
    color: var(--wi-muted); font-size: .74rem; font-weight: 800; line-height: 1.3; white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: background-color .22s var(--wi-ease), color .2s ease;
}
.wi-modern .wi-act[hidden] { display: none; }
.wi-modern .wi-act i { font-size: .8em; }
.wi-modern .wi-act:hover { color: var(--wi-ink); background: var(--wi-soft-2); }
.wi-modern .wi-act:focus-visible { outline: 2px solid var(--wi-primary); outline-offset: 1px; }
.wi-modern .wi-act.is-on, .wi-modern .wi-act:active { background: var(--wi-primary); color: var(--wi-on); }
.wi-modern .wi-act--txt { background: var(--wi-soft); border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent); }
/* Desktop: the long competition name gets more room before it ellipses. */
@media (min-width: 1200px) { .wi-modern .wi-pick select { max-width: 18rem; } }

/* the shared card box (= .bn-panel) */
.wi-modern .wi-card {
    background: var(--wi-card); border: 1px solid var(--wi-ring); border-radius: var(--wi-radius); box-shadow: var(--wi-shadow);
}
.wi-modern .wi-msg { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .95rem; font-size: .84rem; line-height: 1.45; color: var(--wi-muted); }
.wi-modern .wi-msg + .wi-card { margin-top: 1rem; }
.wi-modern .wi-msg > i { flex: 0 0 auto; margin-top: .15rem; color: var(--wi-primary-ink); }
.wi-modern .wi-msg.is-bad > i { color: var(--wi-bad-ink); }
.wi-modern .wi-msg a { font-weight: 800; color: var(--wi-primary-ink); }

/* ==========================================================================
   D. The result card: verdict (crest + icon + text) over our side's figures
   ========================================================================== */
.wi-modern .wi-result { padding: .85rem .95rem .75rem; position: relative; overflow: visible; }
.wi-modern .wi-status { display: flex; gap: .8rem; align-items: center; font-size: .92rem; line-height: 1.45; color: var(--wi-ink); }
.wi-modern .wi-status-badge {
    position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem;
    background: var(--wi-soft);
}
.wi-modern .wi-status-badge .wi-crest { width: 34px; height: 34px; }
.wi-modern .wi-status-ico {
    position: absolute; right: -.35rem; bottom: -.35rem; display: grid; place-items: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .62rem;
    background: var(--wi-muted); color: var(--wi-card); box-shadow: 0 0 0 2px var(--wi-card);
}
.wi-modern .wi-status-badge.is-icon .wi-status-ico { position: static; width: auto; height: auto; background: none; color: var(--wi-muted); box-shadow: none; font-size: 1.2rem; }
.wi-modern .wi-status.is-good .wi-status-badge { background: rgba(var(--wi-ok-rgb), .12); }
.wi-modern .wi-status.is-good .wi-status-ico { background: var(--wi-ok); color: #fff; }
.wi-modern .wi-status.is-bad .wi-status-badge { background: rgba(var(--wi-bad-rgb), .1); }
.wi-modern .wi-status.is-bad .wi-status-ico { background: var(--wi-bad); color: #fff; }
.wi-modern .wi-status-text { min-width: 0; }
.wi-modern .wi-status-text b { font-weight: 900; }
.wi-modern .wi-status-magic {
    display: inline-flex; align-items: center; gap: .3rem; margin-left: .45rem; padding: .05rem .5rem; white-space: nowrap; vertical-align: .08em;
    border-radius: 999px; background: rgba(var(--wi-accent-rgb), .18); color: var(--wi-accent-ink);
    font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.wi-modern .wi-status-magic b { font-size: .82rem; }
.wi-modern .wi-result-foot {
    display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-top: .75rem; padding-top: .7rem;
    border-top: 1px solid var(--wi-line);
}
.wi-modern .wi-figs { display: flex; align-items: center; gap: .4rem 1.25rem; flex-wrap: wrap; min-width: 0; }
.wi-modern .wi-fig { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.wi-modern .wi-fig > b { display: inline-flex; align-items: baseline; gap: .3rem; font-size: 1.15rem; font-weight: 900; color: var(--wi-ink); font-variant-numeric: tabular-nums; }
.wi-modern .wi-fig > b small { font-size: .72rem; font-weight: 800; color: var(--wi-faint); }
.wi-modern .wi-fig > small { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--wi-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 10rem; }
.wi-modern .wi-fig-move { font-size: .72rem; font-weight: 900; }
.wi-modern .wi-fig-move.is-up { color: var(--wi-ok-ink); }
.wi-modern .wi-fig-move.is-down { color: var(--wi-bad-ink); }
.wi-modern .wi-fig--set { min-width: 7rem; }
.wi-modern .wi-meter { display: block; height: .3rem; margin-top: .25rem; border-radius: 99px; background: var(--wi-soft-2); overflow: hidden; }
.wi-modern .wi-meter-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--wi-primary); transition: width .5s var(--wi-ease); }
.wi-modern .wi-busy { display: none; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; color: var(--wi-faint); }
.wi-modern .wi-root.is-busy .wi-busy { display: inline-flex; }
.wi-modern .wi-root.is-busy [data-wi-live] { opacity: .55; transition: opacity .15s; }
.wi-modern .wi-copied { font-size: .74rem; color: var(--wi-ok-ink); font-weight: 800; }
.wi-modern .wi-copied:empty { display: none; }

/* ==========================================================================
   E. Phone tabs (script only; without it both panes stack) and the grid
   ========================================================================== */
.wi-modern .wi-tabs { display: none; }
@media (max-width: 1199.98px) {
    .wi-modern .wi-root.is-js .wi-tabs {
        display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; margin: 1rem 0 0; padding: .15rem;
        border-radius: 999px; background: var(--wi-soft); border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent);
    }
    .wi-modern .wi-tab {
        display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.3rem; padding: .3rem .6rem;
        border: 0; border-radius: 999px; background: transparent; box-shadow: none;
        color: var(--wi-muted); font-size: .78rem; font-weight: 800; white-space: nowrap; overflow: hidden;
        transition: background-color .22s var(--wi-ease), color .2s ease;
    }
    .wi-modern .wi-tab[aria-selected="true"] { background: var(--wi-primary); color: var(--wi-on); }
    .wi-modern .wi-tab-sub { font-weight: 700; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
    .wi-modern .wi-root.is-js[data-wi-view="fixtures"] .wi-pane-table { display: none; }
    .wi-modern .wi-root.is-js[data-wi-view="table"] .wi-pane-fixtures { display: none; }
}
.wi-modern .wi-form { margin: 0; }
.wi-modern .wi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
@media (min-width: 1200px) {
    .wi-modern .wi-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
    .wi-modern .wi-pane-fixtures { grid-column: 1; grid-row: 1; }
    .wi-modern .wi-pane-table { grid-column: 2; grid-row: 1; }
    /* A bounded scroll region in flow (never sticky: its height is data), so the table
       beside it stays in view while the reader works down the matchdays. It pads itself
       (and pulls back with negative margins) so the cards' shadows are not clipped. */
    .wi-modern .wi-pane-fixtures .wi-mds {
        max-height: calc(100vh - 7rem); overflow-y: auto; overscroll-behavior: contain;
        margin: -.5rem -.75rem -1.5rem; padding: .5rem .75rem 1.5rem;
        scrollbar-width: thin; scrollbar-color: var(--wi-line) transparent;
    }
}

/* ==========================================================================
   F. Matchday cards and one fixture
   ========================================================================== */
.wi-modern .wi-mds { display: grid; gap: 1rem; }
.wi-modern .wi-md { background: var(--wi-card); border: 1px solid var(--wi-ring); border-radius: var(--wi-radius); box-shadow: var(--wi-shadow); }
.wi-modern .wi-md > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; min-height: 44px;
    padding: .55rem .9rem; font-size: .82rem; border-radius: var(--wi-radius);
}
.wi-modern .wi-md > summary::-webkit-details-marker { display: none; }
.wi-modern .wi-md > summary:focus-visible { outline: 2px solid var(--wi-primary); outline-offset: -2px; }
.wi-modern .wi-md-name { font-weight: 900; color: var(--wi-ink); white-space: nowrap; }
.wi-modern .wi-md-dates { color: var(--wi-faint); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wi-modern .wi-md-count {
    margin-left: auto; flex: 0 0 auto; padding: .05rem .5rem; border-radius: 999px; background: var(--wi-soft);
    font-size: .68rem; font-weight: 800; color: var(--wi-faint); font-variant-numeric: tabular-nums;
}
.wi-modern .wi-md-count b { color: var(--wi-primary-ink); }
.wi-modern .wi-md-chev { color: var(--wi-faint); font-size: .72rem; transition: transform .2s; }
.wi-modern .wi-md[open] .wi-md-chev { transform: rotate(180deg); }
.wi-modern .wi-md-body { border-top: 1px solid var(--wi-line); padding: .25rem 0; }

.wi-modern .wi-fx { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .55rem; padding: .4rem .8rem; }
.wi-modern .wi-fx + .wi-fx { border-top: 1px solid color-mix(in oklab, var(--wi-line) 60%, transparent); }
.wi-modern .wi-fx.is-own { background: rgba(var(--wi-primary-rgb), .045); }
.wi-modern .wi-fx-team { display: flex; align-items: center; gap: .45rem; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--wi-ink); }
.wi-modern .wi-fx-home { justify-content: flex-end; text-align: right; }
.wi-modern .wi-fx-team.is-own { font-weight: 900; }
.wi-modern .wi-fx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wi-modern .wi-crest { flex: 0 0 auto; object-fit: contain; margin: 0 !important; }
.wi-modern .wi-fx-mid { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
/* From a small tablet up the exact score rides beside H / D / A: one line per fixture. */
@media (min-width: 576px) {
    .wi-modern .wi-fx-mid { flex-direction: row; gap: .3rem; }
    .wi-modern .wi-fx-score { min-width: 2.2rem; text-align: center; }
}
/* H / D / A: the .mb-seg look (one soft pill group; the chosen one a red pill). */
.wi-modern .wi-seg {
    display: inline-flex; gap: .15rem; padding: .15rem; border-radius: 999px;
    background: var(--wi-soft); border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent);
}
.wi-modern .wi-seg-btn { position: relative; margin: 0; cursor: pointer; }
.wi-modern .wi-seg-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wi-modern .wi-root.is-js .wi-seg-x { display: none; }
.wi-modern .wi-seg-btn span {
    display: flex; align-items: center; justify-content: center; width: 1.95rem; height: 1.75rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; color: var(--wi-muted); background: transparent;
    transition: background-color .22s var(--wi-ease), color .2s ease, transform .15s ease;
}
.wi-modern .wi-seg-btn input:checked + span { background: var(--wi-primary); color: var(--wi-on); }
.wi-modern .wi-seg-btn input:focus-visible + span { outline: 2px solid var(--wi-primary); outline-offset: 1px; }
.wi-modern .wi-seg-btn:hover input:not(:checked) + span { color: var(--wi-ink); background: var(--wi-soft-2); }
.wi-modern .wi-seg-btn:active span { transform: scale(.94); }
.wi-modern .wi-fx-score {
    border: 0; background: transparent; padding: .05rem .4rem; border-radius: 999px; cursor: pointer;
    font-size: .7rem; font-weight: 800; color: var(--wi-faint); font-variant-numeric: tabular-nums; line-height: 1.3;
}
.wi-modern .wi-fx.is-set .wi-fx-score { color: var(--wi-primary-ink); background: rgba(var(--wi-primary-rgb), .08); }
.wi-modern .wi-fx-score:hover { color: var(--wi-ink); background: var(--wi-soft); }
.wi-modern .wi-fx-steps { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .25rem 0 .3rem; }
.wi-modern .wi-fx-steps[hidden] { display: none; }
.wi-modern .wi-step { display: inline-flex; align-items: center; padding: .15rem; gap: .1rem; border-radius: 999px; background: var(--wi-soft); border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent); }
.wi-modern .wi-step button { border: 0; border-radius: 999px; background: transparent; color: var(--wi-ink); width: 2.1rem; height: 2rem; font-size: 1rem; font-weight: 800; line-height: 1; }
.wi-modern .wi-step button:hover { background: var(--wi-soft-2); }
.wi-modern .wi-step output { min-width: 1.6rem; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--wi-ink); }
.wi-modern .wi-step-sep { color: var(--wi-faint); font-weight: 800; }
.wi-modern .wi-step-clear {
    border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent); background: var(--wi-soft); color: var(--wi-muted);
    border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .3rem .75rem; min-height: 2.1rem;
}
.wi-modern .wi-step-clear:hover { color: var(--wi-ink); background: var(--wi-soft-2); }
.wi-modern .wi-empty { font-size: .82rem; color: var(--wi-faint); margin: 0; padding: .75rem .95rem; }

/* ==========================================================================
   G. Table and odds: framed like a sidebar panel (the shared stats-table skin
      has no frame of its own); zone bars, movement arrows, rows that slide.
   ========================================================================== */
.wi-modern .wi-table-wrap {
    background: var(--wi-card) !important; border: 1px solid var(--wi-ring) !important; border-radius: var(--wi-radius) !important;
    box-shadow: var(--wi-shadow) !important; overflow: hidden;
}
.wi-modern .wi-table-wrap > table { margin: 0; background: transparent; }
.wi-modern .wi-table td, .wi-modern .wi-odds td { padding-top: .42rem; padding-bottom: .42rem; }
.wi-modern .wi-table tr.wi-zoned > td:first-child { box-shadow: inset 3px 0 0 var(--wi-zone); }
.wi-modern .wi-table tr.wi-zoned > td { background-color: color-mix(in srgb, var(--wi-zone) 8%, transparent); }
.wi-modern .wi-pos { white-space: nowrap; width: 3.2rem; }
.wi-modern .wi-move { display: inline-flex; align-items: center; gap: .05rem; margin-left: .2rem; font-size: .66rem; font-weight: 800; min-width: 1.2rem; vertical-align: middle; }
.wi-modern .wi-move.is-up { color: var(--wi-ok-ink); }
.wi-modern .wi-move.is-down { color: var(--wi-bad-ink); }
.wi-modern .wi-team { display: flex; align-items: center; gap: .45rem; min-width: 0; max-width: 14rem; }
.wi-modern .wi-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wi-modern .wi-pts { white-space: nowrap; }
.wi-modern .wi-pos .stats-val, .wi-modern .wi-pts .stats-val { display: inline-block; }
.wi-modern .wi-added { display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 999px; font-size: .62rem; font-weight: 900; color: var(--wi-primary-ink); background: rgba(var(--wi-primary-rgb), .1); }
.wi-modern .wi-own .wi-team-name { color: var(--wi-primary-ink); }
.wi-modern .wi-table tbody tr { position: relative; }
.wi-modern .wi-table tbody tr.is-rose > td { animation: wiFlashUp 1.1s ease; }
.wi-modern .wi-table tbody tr.is-fell > td { animation: wiFlashDown 1.1s ease; }
.wi-modern .wi-legend { list-style: none; margin: .7rem 0 0; padding: 0 .2rem; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .72rem; color: var(--wi-muted); }
.wi-modern .wi-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.wi-modern .wi-legend-bar { width: .3rem; height: .9rem; border-radius: 2px; background: var(--wi-zone); }
.wi-modern .wi-legend-pos { font-weight: 800; color: var(--wi-ink); font-variant-numeric: tabular-nums; }
.wi-modern .wi-note { display: flex; gap: .45rem; align-items: flex-start; font-size: .72rem; line-height: 1.5; color: var(--wi-faint); margin: .7rem .2rem 0; }
.wi-modern #wi-fixtures .wi-empty, .wi-modern [data-wi-odds] > .wi-empty {
    background: var(--wi-card); border: 1px solid var(--wi-ring); border-radius: var(--wi-radius); box-shadow: var(--wi-shadow);
}
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .wi-modern .wi-pane-table .wi-col-wdl { display: none; }
}
/* The shared skin gives every stats table a 640px floor on phones and lets it scroll;
   these two are built to fit a 320px screen, so the floor goes. */
.wi-modern .wi-table.stats-table, .wi-modern .wi-odds.stats-table { min-width: 0; }
.wi-modern .wi-table .stats-name-cell, .wi-modern .wi-odds .stats-name-cell { min-width: 0; max-width: none; width: 100%; }

/* ==========================================================================
   H. Sidebar
   ========================================================================== */
.wi-modern .wi-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.wi-modern .wi-how li { display: flex; gap: .55rem; align-items: flex-start; font-size: .8rem; line-height: 1.45; color: var(--wi-muted); }
.wi-modern .wi-how li i { flex: 0 0 1rem; margin-top: .2rem; text-align: center; color: var(--wi-primary-ink); font-size: .8rem; }

/* ==========================================================================
   I. Phones: controls are icons only; the fixture row stays one line
   ========================================================================== */
@media (max-width: 767.98px) {
    .wi-modern .wi-act span { display: none; }
    .wi-modern .wi-act { padding: .2rem .5rem; }
    .wi-modern .wi-pick select { max-width: 8.5rem; }
    .wi-modern #wi-scenario .bn-head-actions { gap: .3rem; }
    /* style.css lets a role=group in a head scroll sideways; this one always fits whole. */
    body .wi-modern .bn-section-head > .bn-head-actions > .wi-acts { flex: 0 0 auto !important; overflow: visible; }
}
/* Phones: the picker is an icon pill (the select covers it, so a tap opens the list). */
.wi-modern .wi-foot-share { display: none; }
@media (max-width: 575.98px) {
    .wi-modern .wi-act--share { display: none; }
    .wi-modern .wi-foot-share {
        display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .25rem .7rem; border-radius: 999px;
        background: var(--wi-soft); border: 1px solid color-mix(in oklab, var(--wi-line) 70%, transparent);
        color: var(--wi-ink); font-size: .72rem; font-weight: 800; text-decoration: none; white-space: nowrap;
    }
    .wi-modern .wi-foot-share i { color: var(--wi-primary-ink); font-size: .8em; }
    .wi-modern .wi-scope { flex: 0 0 auto; }
    .wi-modern .wi-pick { width: 2.3rem; padding: 0; justify-content: center; flex: 0 0 auto; }
    .wi-modern .wi-pick select { position: absolute; inset: 0; width: 100%; max-width: none; padding: 0; opacity: 0; }
    .wi-modern .wi-pick .wi-pick-chev { display: none; }
}
@media (max-width: 575.98px) {
    .wi-modern .wi-col-wdl { display: none; }
    .wi-modern .wi-odds .proj-pct { min-width: 46px; }
    .wi-modern .wi-table td, .wi-modern .wi-table th, .wi-modern .wi-odds td, .wi-modern .wi-odds th { padding-left: .3rem; padding-right: .3rem; }
    .wi-modern .wi-fx { padding: .4rem .55rem; gap: .35rem; }
    .wi-modern .wi-fx-team { font-size: .76rem; gap: .3rem; }
    .wi-modern .wi-seg-btn span { width: 1.85rem; height: 1.9rem; }
    .wi-modern .wi-team { max-width: 9.5rem; }
    .wi-modern .wi-result { padding: .75rem .8rem .65rem; }
    .wi-modern .wi-status { font-size: .84rem; gap: .65rem; }
    .wi-modern .wi-status-badge { width: 2.6rem; height: 2.6rem; }
    .wi-modern .wi-status-badge .wi-crest { width: 28px; height: 28px; }
    .wi-modern .wi-figs { gap: .4rem 1rem; }
    .wi-modern .wi-fig > b { font-size: 1rem; }
    .wi-modern .wi-md > summary { padding: .5rem .75rem; }
}
@media (max-width: 359.98px) {
    .wi-modern .wi-act { padding: .2rem .4rem; }
    .wi-modern .wi-pick { width: 2.1rem; }
    .wi-modern #wi-scenario .bn-head-actions { gap: .2rem; }
    .wi-modern .wi-md-dates { display: none; }
    .wi-modern .wi-fx-name { font-size: .72rem; }
}
@media (pointer: coarse) {
    .wi-modern .wi-seg-btn span { height: 2.2rem; }
    .wi-modern .wi-pick select { font-size: 16px; }
}

/* ==========================================================================
   J. Motion: the verdict reveals itself when it changes; rows slide to their new
      place (whatif.js, FLIP). Content is visible by default; reduced motion = none.
   ========================================================================== */
.wi-modern .wi-status.is-reveal { animation: wiReveal .5s var(--wi-ease) both; }
.wi-modern .wi-status.is-reveal .wi-status-badge { animation: wiBadge .55s var(--wi-ease) both; }
.wi-modern .wi-fig.is-bump > b { animation: wiBump .45s var(--wi-ease); }
@keyframes wiReveal { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wiBadge { 0% { transform: scale(.7) rotate(-8deg); } 60% { transform: scale(1.08) rotate(2deg); } 100% { transform: none; } }
@keyframes wiBump { 0% { transform: none; } 40% { transform: translateY(-3px) scale(1.06); } 100% { transform: none; } }
@keyframes wiFlashUp { 0% { background-color: rgba(var(--wi-ok-rgb), .22); } 100% { background-color: transparent; } }
@keyframes wiFlashDown { 0% { background-color: rgba(var(--wi-bad-rgb), .16); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
    .wi-modern .wi-status.is-reveal, .wi-modern .wi-status.is-reveal .wi-status-badge, .wi-modern .wi-fig.is-bump > b,
    .wi-modern .wi-table tbody tr.is-rose > td, .wi-modern .wi-table tbody tr.is-fell > td { animation: none !important; }
    .wi-modern .wi-meter-fill, .wi-modern .wi-seg-btn span, .wi-modern .wi-act, .wi-modern .wi-tab { transition: none !important; }
}

/* One gap, not two, between the result card and the Fixtures / Table sections (owner,
   5 Oct 2026: "remove the gap"): the grid's 1rem top margin is the gap; the first section
   inside each column adds none. */
.benfica-layout .wi-grid > .bn-section,
.benfica-layout .wi-grid > * > .bn-section:first-child { margin-top: 0 !important; }

/* ==========================================================================
   The My Benfica standard (owner, 5 Oct 2026). Values copied from mybenfica-modern.css.
   ========================================================================== */
/* The Results / Table switch (below 1200px): .mb-seg exactly, on its own full row as My
   Benfica drops a crowded switch (its two halves share the row). */
@media (max-width: 1199.98px) {
    .wi-modern .wi-root.is-js .wi-tabs { display: flex; gap: .15rem; padding: .15rem; }
    .wi-modern .wi-tab { flex: 1 1 0; min-height: 0; gap: .3rem; padding: .2rem .62rem; font-size: .74rem; line-height: 1.3; }
    .wi-modern .wi-tab i { font-size: .8em; }
}
@media (max-width: 767.98px) {
    .wi-modern .wi-tab { padding: .26rem .55rem; }
}
@media (max-width: 379.98px) {
    .wi-modern .wi-tab { padding: .26rem .45rem; }
}

/* ==========================================================================
   K. The site standard (owner, 7 Oct 2026: "does not match the rest of the site").
   ========================================================================== */
/* Scenario head: the standard 30px head pills after the colour line, one each (no soft group);
   Win All is the main action (green), Reset and Copy Link plain; icons only on phones. */
.wi-modern .bn-section-head .wi-pick { height: var(--bn-ctl-h, 1.875rem); }
.wi-modern .wi-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: 0 0 auto;
    height: var(--bn-ctl-h, 1.875rem); min-width: var(--bn-ctl-h, 1.875rem); padding: 0 .8rem; box-sizing: border-box;
    border: 1px solid var(--wi-line); border-radius: 999px; background: var(--wi-soft); color: var(--wi-ink);
    font-size: var(--bn-ctl-fs, .74rem); font-weight: 800; line-height: 1.25; white-space: nowrap; text-decoration: none;
    box-shadow: none; cursor: pointer; transition: background-color .2s ease, transform .15s ease;
}
.wi-modern .wi-pill[hidden] { display: none; }
.wi-modern .wi-pill i { font-size: .85em; color: var(--theme-accent, var(--slb-gold)); }
.wi-modern .wi-pill:hover { background: var(--wi-soft-2); color: var(--wi-ink); }
.wi-modern .wi-pill:active { transform: scale(.98); }
.wi-modern .wi-pill:focus-visible { outline: 2px solid var(--wi-accent); outline-offset: 2px; }
.wi-modern .wi-pill--go { background: var(--wi-ok); border-color: transparent; color: #fff; }
.wi-modern .wi-pill--go i { color: #fff; }
.wi-modern .wi-pill--go:hover { background: color-mix(in oklab, var(--wi-ok) 88%, black); color: #fff; }
.wi-modern .wi-pill--share.is-done { background: rgba(var(--wi-ok-rgb), .14); border-color: rgba(var(--wi-ok-rgb), .35); }
.wi-modern .wi-pill--share.is-done i { color: var(--wi-ok-ink); }
.benfica-layout.wi-modern #wi-scenario > .bn-section-head .bn-head-actions { gap: .4rem; }
@media (max-width: 767.98px) {
    .wi-modern .wi-pill { padding: 0; width: var(--bn-ctl-h, 1.875rem); }
    .wi-modern .wi-pill span { display: none; }
}
/* The tick replaces the separate "Link copied" text (the words stay for screen readers). */
.wi-modern .wi-copied.visually-hidden { display: block; }

/* Your Table: the Standings standard — no left bar; a zone wash driving in from the left,
   the position in a zone-tinted chip, neutral zones plain, our row bold in red, the two-tone
   head; rows reach the card's edges. */
.wi-modern .wi-table thead th { background-color: var(--wi-soft) !important; }
.wi-modern .wi-table tr.wi-zoned > td:first-child { box-shadow: none; }
.wi-modern .wi-table tr.wi-zoned > td { background-color: transparent !important; }
.wi-modern .wi-table tbody tr.wi-zoned {
    background-color: transparent;
    background-image: linear-gradient(90deg, color-mix(in srgb, var(--wi-zone) 26%, transparent) 0%, color-mix(in srgb, var(--wi-zone) 10%, transparent) 30%, transparent 62%);
    background-repeat: no-repeat; background-size: 0% 100%;
    animation: wiZoneDrive .9s var(--wi-ease) .1s forwards;
}
@keyframes wiZoneDrive { to { background-size: 100% 100%; } }
.wi-modern .wi-pos-n {
    display: inline-flex !important; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.4rem; padding: 0 .3rem; border-radius: .45rem;
    font-weight: 900; font-variant-numeric: tabular-nums;
}
.wi-modern .wi-table tr.wi-zoned .wi-pos-n {
    background: color-mix(in srgb, var(--wi-zone) 18%, transparent);
    color: color-mix(in oklab, var(--wi-zone) 72%, var(--wi-ink));
}
[data-bs-theme="dark"] .wi-modern .wi-table tr.wi-zoned .wi-pos-n {
    background: color-mix(in srgb, var(--wi-zone) 26%, transparent);
    color: color-mix(in oklab, var(--wi-zone) 70%, #fff);
}
.wi-modern .wi-own .wi-team-name { color: var(--wi-primary-ink); font-weight: 900 !important; }
.wi-modern .wi-own .wi-pts .stats-val { color: var(--wi-primary-ink); }
.wi-modern .wi-legend-bar { width: .8rem; height: .55rem; border-radius: .15rem; background: color-mix(in srgb, var(--wi-zone) 45%, transparent); }

/* Matchday cards: rows reach the card's edges (first and last on its edges too), our fixture
   one even tint. */
.wi-modern .wi-md { overflow: hidden; }
.wi-modern .wi-md-body { padding: 0; }
.wi-modern .wi-fx { padding: .45rem .9rem; }
.wi-modern .wi-fx.is-own { background: rgba(var(--wi-primary-rgb), .06); }
.wi-modern .wi-md-count { background: var(--wi-soft); }
/* The result card's figures: the meter in the competition-neutral primary, figures as tiles. */
.wi-modern .wi-fig { padding: .1rem 0; }
@media (max-width: 575.98px) {
    .wi-modern .wi-fx { padding: .45rem .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .wi-modern .wi-table tbody tr.wi-zoned { animation: none; background-size: 100% 100%; }
    .wi-modern .wi-pill { transition: none; }
}

/* The Table / Odds switch on Your Table's head: My Benfica's .mb-seg values. */
.wi-modern .wi-tblseg { display: inline-flex; align-items: center; gap: .15rem; height: var(--bn-ctl-h, 1.875rem); padding: .15rem; box-sizing: border-box; border-radius: 999px; background: var(--wi-soft, var(--mb-soft)); border: 1px solid color-mix(in oklab, var(--wi-line, var(--mb-line)) 70%, transparent); }
.wi-modern .wi-tblseg .mb-seg-btn { display: inline-flex; align-items: center; gap: .3rem; height: 100%; padding: 0 .65rem; border: 0; border-radius: 999px; background: transparent; color: var(--wi-muted, var(--mb-muted)); font-size: var(--bn-ctl-fs, .74rem); font-weight: 800; white-space: nowrap; cursor: pointer; }
.wi-modern .wi-tblseg .mb-seg-btn i { font-size: .85em; }
.wi-modern .wi-tblseg .mb-seg-btn:hover { color: var(--wi-ink, var(--mb-ink)); }
.wi-modern .wi-tblseg .mb-seg-btn.is-on { background: var(--wi-primary, var(--mb-primary)); color: var(--wi-on, #fff); }
@media (max-width: 767.98px) {
    .wi-modern .wi-tblseg .mb-seg-btn:not(.is-on) .mb-seg-txt { display: none; }
}
/* The odds table wears Your Table's header (owner, 7 Oct 2026: "header should have the same
   style as the main table"). */
.wi-modern .wi-odds thead th { background-color: var(--wi-soft) !important; }

/* Competition picker (owner, 7 Oct 2026): the competition's own logo, site-gold icons, and the
   focus ring only for keyboard use. */
.wi-modern .wi-pick > .wi-pick-logo { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.wi-modern .wi-pick > i:first-child { color: var(--theme-accent, var(--mb-accent)); }
.wi-modern .wi-pick:focus-within { outline: none; }
.wi-modern .wi-pick:has(select:focus-visible) { outline: 2px solid var(--wi-primary); outline-offset: 1px; }