/* ==========================================================================
   Home page — the team section ("SL Benfica" block), My Benfica standard (Oct 2026)
   --------------------------------------------------------------------------
   Linked by index.php inside the team section only, after mybenfica-modern.css.
   The block's wrapper carries .mb-modern, so it shares My Benfica's tokens
   (--mb-*) and components exactly (.mb-box frame, .mb-row THE row, .mb-date,
   .mb-chip, .mb-foot, .mb-bar). Everything here is under .hm-team; nothing
   else on the home page (the top block, news, sidebar) is touched.
     A. rhythm + heads   B. Season So Far   C. rows   D. league table
     E. Golden Boot      F. Record Watch    G. phones H. reduced motion
   Colours are theme tokens (literals only as var() fallbacks and neutral
   black/white alphas), so light, dark and every skin follow. No box-shadow on
   buttons. Crests and competition logos stand on their own (no plates).
   ========================================================================== */

/* ==========================================================================
   A. Rhythm: 1rem between blocks, none under the last; heads like My Benfica
   ========================================================================== */
.benfica-layout .hm-team > :first-child,
.benfica-layout .hm-team .hm-team-col > .bn-section:first-child { margin-top: 0; }
.benfica-layout .hm-team > .bn-section,
.benfica-layout .hm-team > .hm-team-grid { margin-top: 1rem; }
.benfica-layout .hm-team .hm-team-col > .bn-section + .bn-section { margin-top: 1rem; }
.benfica-layout .hm-team .hm-team-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.benfica-layout .hm-team .hm-team-col { min-width: 0; }
@media (min-width: 1200px) {
    .benfica-layout .hm-team .hm-team-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1199.98px) {
    .benfica-layout .hm-team .hm-team-col + .hm-team-col { margin-top: 1rem; }
}
.benfica-layout .hm-team .bn-section-head .bn-head-actions a.mb-head-link {
    color: var(--mb-primary-ink); font-weight: 800; font-size: .8rem; text-decoration: none; white-space: nowrap;
}
.benfica-layout .hm-team .bn-section-head .bn-head-actions a.mb-head-link:hover { text-decoration: underline; }
.benfica-layout .hm-team .bn-section-head .hm-head-note { color: var(--mb-muted); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.benfica-layout .hm-team .bn-section-head .hm-head-logo { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: .1rem; }
.benfica-layout .hm-team .bn-section-head > i.fa-golden-boot-trophy { width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   B. Season So Far: one frame of stat tiles, the win rate as a ring
   ========================================================================== */
.hm-team .hm-stats {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem;
    padding: .45rem;
}
.hm-team .hm-stat {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 0;
    padding: .45rem .3rem .4rem; border-radius: .6rem;
    background: var(--mb-soft); text-align: center;
}
.hm-team .hm-stat > b { color: var(--mb-ink); font-size: 1.25rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-team .hm-stat.is-w > b { color: var(--mb-ok-ink); }
.hm-team .hm-stat.is-l > b { color: var(--mb-bad-ink); }
.hm-team .hm-stat > span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.hm-team .hm-stat > span i { margin-right: .25rem; color: var(--mb-accent-ink); }
.hm-team .hm-ring {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    background: conic-gradient(var(--mb-ok) calc(var(--hm-pct, 0) * 1%), var(--mb-soft-2) 0);
}
.hm-team .hm-ring b {
    display: grid; place-items: center; width: 2.05rem; height: 2.05rem; border-radius: 50%;
    background: var(--mb-soft); color: var(--mb-ok-ink);
    font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   C. Rows: Coming Up and Recent Results (THE row of My Benfica)
   ========================================================================== */
.hm-team .mb-row .hm-vs { color: var(--mb-muted); font-size: .7em; font-weight: 800; text-transform: uppercase; }
.hm-team .mb-row-title .bn-rc-wrap { display: inline-flex; vertical-align: -1px; }
.hm-team .hm-crest { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .25)); }
.hm-team .mb-row-side .hm-crest { width: 24px; height: 24px; }
.hm-team .hm-fx { grid-template-columns: 2.3rem minmax(0, 1fr) auto; padding: .38rem .1rem; } /* = .mb-row--fixture */
.hm-team .hm-fx .mb-row-title { color: var(--mb-ink); text-decoration: none; }
.hm-team .hm-fx .mb-row-title:hover { color: var(--mb-primary-ink); }
.hm-team .hm-fx .mb-row-meta a { color: inherit; text-decoration: none; }
.hm-team .hm-fx .mb-row-meta a:hover { color: var(--mb-primary-ink); }
.hm-team .hm-crest-link { display: inline-flex; line-height: 0; }
.hm-team .hm-when { color: var(--mb-primary-ink); font-weight: 800; }
.hm-team .hm-meta-ico { width: 14px; height: 14px; object-fit: contain; vertical-align: -3px; margin-right: .3rem; }
/* The W/D/L score chip: the squared result letter, then the score in played order. */
.hm-team .hm-score {
    display: inline-flex; align-items: center; gap: .35rem; min-width: 3.3rem; justify-content: center;
    padding: .12rem .45rem .12rem .14rem; border-radius: .3rem;
    background: var(--mb-soft-2); color: var(--mb-ink);
    font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hm-team .hm-score b {
    display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: .2rem;
    background: color-mix(in oklab, var(--mb-muted) 55%, transparent); color: #fff; font-size: .6rem; font-weight: 900;
}
.hm-team .hm-score.is-w { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
.hm-team .hm-score.is-w b { background: var(--mb-ok); }
.hm-team .hm-score.is-l { background: rgba(var(--mb-bad-rgb), .12); color: var(--mb-bad-ink); }
.hm-team .hm-score.is-l b { background: var(--mb-bad); }
.hm-team .hm-pens { color: var(--mb-muted); font-size: .62rem; font-weight: 700; white-space: nowrap; }

/* ==========================================================================
   D. League table: compact rows, our club tinted with the left accent bar
   ========================================================================== */
.hm-team .hm-tbl-box { padding-top: .35rem; }
.hm-team .hm-tbl { display: flex; flex-direction: column; }
.hm-team .hm-tbl-head,
.hm-team .hm-tbl-row { display: grid; grid-template-columns: 1.55rem .8rem minmax(0, 1fr) 1.7rem 2.1rem 2.2rem; align-items: center; column-gap: .45rem; }
.hm-team .hm-tbl-head {
    padding: .2rem .1rem .3rem;
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.hm-team .hm-tbl-head span { text-align: center; }
.hm-team .hm-tbl-head span:nth-child(3) { text-align: left; }
.hm-team .hm-tbl-row {
    position: relative; padding: .4rem .1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
    color: var(--mb-ink); text-decoration: none; font-size: .82rem; font-weight: 700;
    transition: background-color .18s ease;
}
.hm-team .hm-tbl > .hm-tbl-row:last-child { border-bottom: 0; }
/* Our row when we sit below the top six: after a thin dashed divider (owner, 6 Oct 2026). */
.hm-team .hm-tbl-gap { display: block; height: 0; margin: .15rem 0; border-top: 1px dashed color-mix(in oklab, var(--mb-line) 90%, transparent); }
.hm-team .hm-tbl-row:has(+ .hm-tbl-gap) { border-bottom: 0; }
.hm-team .hm-tbl-row:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); color: var(--mb-ink); }
.hm-team .hm-tbl-row.is-own {
    margin: 0 -.45rem; padding-left: .55rem; padding-right: .55rem;
    background: linear-gradient(90deg, rgba(var(--mb-primary-rgb), .09), transparent 75%);
    box-shadow: inset 3px 0 0 var(--mb-primary);
}
[data-bs-theme="dark"] .hm-team .hm-tbl-row.is-own { background: linear-gradient(90deg, rgba(var(--mb-primary-rgb), .2), transparent 75%); }
.hm-team .hm-tbl-row.is-own .hm-tbl-team span { color: var(--mb-primary-ink); font-weight: 900; }
.hm-team .hm-pos {
    display: inline-flex; align-items: center; justify-content: center; justify-self: center;
    width: 1.45rem; height: 1.45rem; border-radius: .4rem;
    background: var(--mb-soft-2); color: var(--mb-ink);
    font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.hm-team .hm-tbl-row.has-zone .hm-pos { background: var(--zone-color); color: #fff; }
.hm-team .hm-tbl-row.is-own .hm-pos { box-shadow: 0 0 0 2px var(--mb-card-bg), 0 0 0 3px var(--mb-primary); }
.hm-team .hm-trend { display: inline-flex; justify-content: center; font-size: .75rem; }
.hm-team .hm-trend.tr-up { color: var(--mb-ok-ink); }
.hm-team .hm-trend.tr-down { color: var(--mb-bad-ink); }
.hm-team .hm-trend.tr-same { color: var(--mb-muted); opacity: .5; font-size: .5rem; }
.hm-team .hm-tbl-team { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.hm-team .hm-tbl-team .hm-crest { width: 20px; height: 20px; flex: 0 0 auto; }
.hm-team .hm-tbl-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A club in play (live table): a small pulsing dot after its name, as on competitions.php; the
   left edge stays with the zone / our own bar. */
.hm-team .hm-tbl-row[data-bn-live-row] .hm-tbl-team::after {
    content: ""; flex: 0 0 auto; width: .42rem; height: .42rem; border-radius: 50%;
    background: var(--mb-ok); animation: mbBlink 1s infinite;
}
.hm-team .hm-num { text-align: center; color: var(--mb-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.hm-team .hm-pts {
    text-align: center; padding: .1rem 0; border-radius: .25rem;
    background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink);
    font-weight: 900; font-variant-numeric: tabular-nums;
}
.hm-team .hm-progress { gap: .6rem; }
.hm-team .hm-progress .mb-foot-note { white-space: nowrap; }
.hm-team .hm-progress .mb-foot-note i { color: var(--mb-accent-ink); }
.hm-team .hm-progress .mb-foot-note b { color: var(--mb-ink); }
.hm-team .hm-progress-bar { flex: 1 1 auto; min-width: 2rem; }
.hm-team .hm-progress-bar .mb-bar-fill { background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent))); }

/* ==========================================================================
   E. Golden Boot: the top three as leader cards, round faces, the leader in gold
   ========================================================================== */
.hm-team .hm-leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.hm-team .hm-leader {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0;
    padding: .7rem .4rem .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); text-decoration: none; text-align: center;
    transition: transform .2s var(--mb-ease), border-color .2s ease;
}
.hm-team .hm-leader:hover { color: var(--mb-ink); transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .3); }
.hm-team .hm-leader--1 { background: linear-gradient(180deg, rgba(var(--mb-accent-rgb), .2), var(--mb-card-bg) 70%); border-color: rgba(var(--mb-accent-rgb), .45); }
.hm-team .hm-leader-rank {
    position: absolute; top: .45rem; left: .5rem;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: .3rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-soft-2); color: var(--mb-ink); font-size: .64rem; font-weight: 900;
}
.hm-team .hm-leader--1 .hm-leader-rank { background: var(--mb-accent); color: #2b2100; }
.hm-team .hm-leader-face { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .15rem; }
.hm-team .hm-leader-face .player-face-bubble { width: 52px !important; height: 52px !important; }
.hm-team .hm-leader-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 100%; min-height: 2.2em; font-size: .78rem; font-weight: 800; line-height: 1.1;
}
.hm-team .hm-leader-stats { display: inline-flex; align-items: center; gap: .5rem; }
.hm-team .hm-goals, .hm-team .hm-assists { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; }
.hm-team .hm-goals { padding: .08rem .5rem; border-radius: 999px; background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink); font-size: .84rem; font-weight: 900; }
.hm-team .hm-goals i { font-size: .75em; }
.hm-team .hm-assists { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); font-size: .74rem; font-weight: 800; }
.hm-team .hm-assists .fa-goal-assist-mask { background-color: currentColor; }

/* ==========================================================================
   F. Record Watch: each item in the card frame (the title row is the sub-head)
   ========================================================================== */
.benfica-layout .hm-team .bn-section > .hm-rw { margin: 0; }
.hm-team .hm-rw .rw-list { margin: 0; gap: .6rem; }
.hm-team .hm-rw .rw-item {
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
}

/* ==========================================================================
   G. Phones (767 / 575 / 439 / 379, the My Benfica breakpoints)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Season So Far: P W D / L GF GA beside the win-rate ring. */
    .hm-team .hm-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hm-team .hm-stat--rate { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-width: 575.98px) {
    .hm-team .hm-leaders { gap: .45rem; }
    .hm-team .hm-leader { padding: .65rem .3rem .5rem; }
    .hm-team .hm-tbl-row.is-own { margin: 0 -.35rem; }
}
/* A head whose controls do not fit beside the whole title drops them to their own row, at the
   right; the title never truncates (owner, fantasy.php, 5 Oct). It happens only when they do
   not fit (the title's own width decides, in either language), never at a fixed width.
   style.css holds heads on one row with !important on phones, so this carries body + the
   block's class to win. */
@media (max-width: 767.98px) {
    body .benfica-layout .hm-team .bn-section-head:has(> .bn-head-actions) { flex-wrap: wrap !important; row-gap: .45rem !important; }
    body .benfica-layout .hm-team .bn-section-head:has(> .bn-head-actions) > h2 { flex: 0 1 auto !important; min-width: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
    body .benfica-layout .hm-team .bn-section-head > .bn-head-actions { flex: 0 0 auto !important; margin-left: auto !important; }
}
@media (max-width: 439.98px) {
    .hm-team .hm-stat > b { font-size: 1.1rem; }
    .hm-team .hm-stat > span i { display: none; }
}
@media (max-width: 379.98px) {
    .hm-team .hm-tbl-head, .hm-team .hm-tbl-row { grid-template-columns: 1.4rem .6rem minmax(0, 1fr) 1.4rem 1.9rem 2rem; column-gap: .35rem; }
    .hm-team .hm-fx .hm-when { display: none; }
    .hm-team .hm-stats { gap: .25rem; padding: .35rem; }
    .hm-team .hm-stat { padding: .4rem .15rem .35rem; }
    .hm-team .hm-stat > span { font-size: .54rem; letter-spacing: .02em; }
    .hm-team .hm-leader-face, .hm-team .hm-leader-face .player-face-bubble { width: 44px !important; height: 44px !important; }
}

/* ==========================================================================
   H. Reduced motion: no lifts or transitions (bn-motion.js already prints the
      count-ups, fills and rise-ins final under prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hm-team .hm-leader, .hm-team .hm-tbl-row { transition: none !important; }
    .hm-team .hm-tbl-row[data-bn-live-row] .hm-tbl-team::after { animation: none; }
    .hm-team .hm-leader:hover { transform: none; }
}

/* ==========================================================================
   I. Club Pulse (owner, 6 Oct 2026: "make the Club Pulse the same style")
      .hm-team.hm-pulse: the same skin as the team section. On This Day = THE row
      (year tile | match over competition · years ago | crest + W/D/L score chip);
      Birthdays Today = face tiles (round face, name, position, the age chip).
   ========================================================================== */
.hm-pulse .hm-year { width: 2.6rem; }
.hm-pulse .hm-year b { font-size: .74rem; }
.hm-pulse .hm-otd { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.hm-pulse .hm-otd-crest { display: inline-flex; line-height: 0; }
.hm-pulse .hm-otd-crest .hm-crest { width: 24px; height: 24px; }
.hm-pulse .hm-bdays { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); grid-auto-rows: 1fr; gap: .6rem; } /* every tile one height */
.hm-pulse .hm-bdays--fill { grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); }
.hm-pulse .hm-bday {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0;
    padding: .7rem .4rem .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); text-decoration: none; text-align: center;
    transition: transform .2s var(--mb-ease), border-color .2s ease;
}
.hm-pulse .hm-bday:hover { color: var(--mb-ink); transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .3); }
.hm-pulse .hm-bday-face { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .1rem; }
.hm-pulse .hm-bday-face .player-face-bubble { width: 48px !important; height: 48px !important; }
.hm-pulse .hm-bday-face { position: relative; }
.hm-pulse .hm-bday.is-gone .hm-bday-face .player-face-bubble { filter: grayscale(1); opacity: .85; }
/* The mourning ribbon on a deceased player's face: black, a thin white ring so it reads on
   dark, overlapping the bubble's lower-right edge like the other face badges. */
.hm-pulse .hm-ribbon {
    position: absolute; right: -.2rem; bottom: -.15rem;
    display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: #111; color: #fff; box-shadow: 0 0 0 1.5px #fff;
    font-size: .62rem; line-height: 1;
}
.hm-pulse .hm-bday-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 100%; font-size: .78rem; font-weight: 800; line-height: 1.15;
}
.hm-pulse .hm-bday-meta {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    max-width: 100%; color: var(--mb-muted); font-size: .62rem; font-weight: 700; line-height: 1.3;
}
.hm-pulse .hm-age { margin-top: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; font-weight: 800; }
.hm-pulse .hm-age i { color: var(--mb-accent-ink); }
/* The date on the right of the Club Pulse head (that head sits outside the .mb-modern box). */
.benfica-layout #hm-pulse > .bn-section-head .hm-head-note { color: var(--theme-ink-muted, var(--bs-secondary-color)); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.benfica-layout .hm-pulse .bn-section-head .mb-h-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px;
    background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink);
    font-size: .7rem; font-weight: 900; line-height: 1.35rem; vertical-align: .12em; font-variant-numeric: tabular-nums;
}
/* Its head (outside the box) follows the same phone rule: the date drops to its own row, at the
   right, only when it does not fit beside the whole title. */
@media (max-width: 767.98px) {
    body .benfica-layout #hm-pulse > .bn-section-head { flex-wrap: wrap !important; row-gap: .45rem !important; }
    body .benfica-layout #hm-pulse > .bn-section-head > h2 { flex: 0 1 auto !important; min-width: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
    body .benfica-layout #hm-pulse > .bn-section-head > .bn-head-actions { flex: 0 0 auto !important; margin-left: auto !important; }
}
@media (max-width: 575.98px) {
    .hm-pulse .hm-bdays { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
    .hm-pulse .hm-bday { padding: .6rem .3rem .5rem; }
}
@media (max-width: 379.98px) {
    .hm-pulse .hm-bdays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-pulse .hm-otd-crest { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-pulse .hm-bday { transition: none !important; }
    .hm-pulse .hm-bday:hover { transform: none; }
}

/* Club Pulse has no head of its own any more (owner, 6 Oct 2026): today's date sits on the On This
   Day head, before "All". */
.benfica-layout #hm-otd > .bn-section-head .hm-head-note { color: var(--theme-ink-muted, var(--bs-secondary-color)); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.benfica-layout #hm-otd > .bn-section-head .bn-head-actions { gap: .75rem; align-items: center; }

/* League snippet zones look like the real standings table (owner, 6 Oct 2026): a wash of the zone
   colour that drives in from the left and fades across the row, and the position number in a
   tinted chip of that colour (darker figure); no red bar for our row, its name stays bold red. */
.hm-team .hm-tbl-row.has-zone,
.hm-team .hm-tbl-row.is-own.has-zone {
    margin: 0; padding-left: .1rem; padding-right: .1rem; box-shadow: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--zone-color) 26%, transparent) 0%, color-mix(in srgb, var(--zone-color) 10%, transparent) 30%, transparent 62%) no-repeat;
    background-size: 0% 100%;
    animation: bnZoneDrive .9s cubic-bezier(.2, .8, .2, 1) .1s forwards;
}
.hm-team .hm-tbl-row.is-own:not(.has-zone) { box-shadow: none; }
.hm-team .hm-tbl-row.has-zone .hm-pos,
.hm-team .hm-tbl-row.is-own.has-zone .hm-pos {
    background: color-mix(in srgb, var(--zone-color) 18%, transparent);
    color: color-mix(in oklab, var(--zone-color) 72%, var(--theme-ink, #1b1d21));
    box-shadow: none;
}
[data-bs-theme="dark"] .hm-team .hm-tbl-row.has-zone .hm-pos {
    background: color-mix(in srgb, var(--zone-color) 26%, transparent);
    color: color-mix(in oklab, var(--zone-color) 70%, #fff);
}
@media (prefers-reduced-motion: reduce) {
    .hm-team .hm-tbl-row.has-zone { animation: none; background-size: 100% 100%; }
}

/* League table rows reach the card's edges (owner, 7 Oct 2026: "it should not be any gap over
   here too"): the zone wash and the dividers run from edge to edge; the cells keep their inset
   (the box pads .7rem a side). */
.hm-team .hm-tbl-box > .hm-tbl { margin-left: -.7rem; margin-right: -.7rem; }
.hm-team .hm-tbl-box > .hm-tbl > :is(.hm-tbl-head, .hm-tbl-row) { padding-left: calc(.7rem + .1rem); padding-right: calc(.7rem + .1rem); }

/* Forum Buzz in the forum's own sidebar style (owner, 7 Oct 2026): the forum's mini rows
   (forum-std.css .fm-mini) — icon tile, one-line title, replies · time · category — reaching
   the panel's left and right edges. */
.bn-panel.hm-buzz { overflow: hidden; }
.hm-buzz-list.mb-modern { background: none; padding: 0; margin: 0; }
.hm-buzz-list .fm-mini > .mb-row {
    grid-template-columns: 1.75rem minmax(0, 1fr); padding: .38rem 1.05rem; margin: 0 -1rem;
}
.hm-buzz-list .fm-mini > .mb-row:first-child { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.hm-buzz-list .fm-mini .mb-row-side:empty { display: none; }
.hm-buzz-list .fm-mini .mb-ico { width: 1.75rem; height: 1.75rem; border-radius: .5rem; font-size: .74rem; }
.hm-buzz-list .fm-mini .fm-ico-num strong { font-size: .8rem; letter-spacing: -.02em; }
.hm-buzz-list .fm-mini .mb-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 700; }
.hm-buzz-list .fm-mini .mb-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; }
.hm-buzz-list .fm-mini .mb-row-meta i { margin-right: .2rem; color: var(--theme-accent, var(--mb-accent)); font-size: .85em; }
.hm-buzz-list .fm-mini .fm-dot { margin: 0 .3rem; opacity: .7; }

/* Coming Up rows are not links (title, competition and countdown link on their own), so the
   standard a.mb-row hover missed them (owner, 7 Oct 2026: "Coming Up does not have the same
   effects as Recent Results / On This Day"): the same hover fill. */
.hm-team .mb-row.hm-fx { transition: background-color .18s ease; }
.hm-team .mb-row.hm-fx:hover { background: color-mix(in oklab, var(--mb-soft) 70%, transparent); }