/* ==========================================================================
   Timeline — every view of timeline.php (Oct 2026)
   --------------------------------------------------------------------------
   THE STANDARD is My Benfica (owner, 5 Oct 2026). Every view's layout carries
   .benfica-layout.mb-modern.tlm-modern and links mybenfica-modern.css, so the
   top bar (.mb-topbar), switches (.mb-seg), cards (.mb-box), rows (.mb-row),
   pills (.mb-pill), chips, icon tiles, empty states and footers ARE My
   Benfica's own rules. This file only adds what My Benfica has no class for —
   the timeline rail, the results board, the duel, the season strip, the
   squad breakdown — with the same --mb-* tokens and the same measures
   (1rem between sections and stacked cards, .6rem inside a card grid).

   Views: data-tlm-view = timeline | season | day | compare | all.
   Layers: A. kinds  B. page rhythm + top bar + heads  C. pickers + forms
           D. the rail (Key Moments, On This Day)  E. results board + facts
           F. leaders / scorers / matchups / people  G. compare duel
           H. Club History  I. This Season squad + managers  J. Trophies Won
           K. sidebar  L. hero  M. phones  N. motion
   Colours are theme tokens; literals only as var() fallbacks and neutral
   black/white alphas (light, dark and every skin follow).
   ========================================================================== */

/* ==========================================================================
   A. The moment kinds (the rail dot and the kind label take --tlm-t)
   ========================================================================== */
.tlm-modern {
    --tlm-t-trophy: var(--mb-accent);
    --tlm-t-final: var(--mb-primary);
    --tlm-t-record: var(--mb-info);
    --tlm-t-signing: var(--mb-ok);
    --tlm-t-manager: color-mix(in oklab, var(--mb-ink) 62%, var(--mb-card-bg));
    --tlm-t-milestone: color-mix(in oklab, var(--mb-primary) 50%, var(--mb-accent));
    --tlm-t-stadium: color-mix(in oklab, var(--mb-ok) 50%, var(--mb-info));
    --tlm-a: var(--mb-primary);
    --tlm-b: var(--mb-info);
}
.tlm-modern .tlm-ev--trophy { --tlm-t: var(--tlm-t-trophy); }
.tlm-modern .tlm-ev--final { --tlm-t: var(--tlm-t-final); }
.tlm-modern .tlm-ev--record { --tlm-t: var(--tlm-t-record); }
.tlm-modern .tlm-ev--signing { --tlm-t: var(--tlm-t-signing); }
.tlm-modern .tlm-ev--manager { --tlm-t: var(--tlm-t-manager); }
.tlm-modern .tlm-ev--milestone { --tlm-t: var(--tlm-t-milestone); }
.tlm-modern .tlm-ev--stadium { --tlm-t: var(--tlm-t-stadium); }
.tlm-modern .tlm-tone-ok { color: var(--mb-ok-ink); }
.tlm-modern .tlm-tone-bad { color: var(--mb-bad-ink); }
.tlm-modern .tlm-tone-info { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }
.tlm-modern .tlm-fact-v.is-ok { color: var(--mb-ok-ink); }
.tlm-modern .tlm-fact-v.is-bad { color: var(--mb-bad-ink); }
.tlm-modern .tlm-fact-v.is-info { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }
.tlm-modern .tlm-fact-v.is-warn { color: var(--mb-accent-ink); }

/* ==========================================================================
   B. Page rhythm (My Benfica's): 1rem between sections, the top bar first and
      sticky, nothing under the last card.
   ========================================================================== */
.benfica-layout.tlm-modern .bn-main > .bn-section,
.benfica-layout.tlm-modern .bn-main > .bn-anchor { margin-top: 1rem; margin-bottom: 0; }
.benfica-layout.tlm-modern .bn-main > :first-child { margin-top: 0; }
.benfica-layout.tlm-modern .bn-main > .alert { margin: 0 0 1rem; }
/* The top bar stays pinned under the site header like #mb-top (timeline-modern.js measures
   the header into --pl-sticky-top and sets .is-stuck); its column runs the whole row. */
.benfica-layout.tlm-modern #tl-top {
    position: sticky; top: var(--pl-sticky-top, calc(var(--navbar-height, 50px) + 8px)); z-index: 1020;
    transition: top .2s ease;
}
.benfica-layout.tlm-modern #tl-top.is-stuck .mb-topbar {
    background: var(--theme-surface, var(--bs-body-bg));
    box-shadow: var(--elev-2, 0 4px 12px rgba(0,0,0,.08)), 0 8px 24px rgba(0,0,0,.06);
}
.benfica-layout.tlm-modern .bn-layout > .bn-main:has(> #tl-top) { align-self: stretch; }
/* Stacked boxes 1rem apart (the sidebar's gap); boxes side by side 1rem (.mb-grid). */
.tlm-modern .tlm-stack { display: grid; gap: 1rem; }
.tlm-modern .tlm-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) {
    .tlm-modern .tlm-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tlm-modern .tlm-range + .mb-box,
.tlm-modern .tlm-board + .tlm-facts,
.tlm-modern .tlm-facts + .tlm-matchups { margin-top: 1rem; }
/* A section's head link ("All Honours") is My Benfica's plain .mb-head-link. */
.benfica-layout.tlm-modern .bn-section-head .bn-head-actions a.tlm-head-link {
    color: var(--mb-primary-ink); font-weight: 800; font-size: .8rem; text-decoration: none;
}
.benfica-layout.tlm-modern .bn-section-head .bn-head-actions a.tlm-head-link:hover { text-decoration: underline; }
.benfica-layout.tlm-modern .bn-section-head .bn-head-actions { display: flex; align-items: center; gap: .4rem; min-width: 0; }
/* The kind switch's words go where they would squeeze the title (timeline-modern.js). */
.tlm-modern .mb-seg.is-tight .mb-seg-btn:not(.is-on) .mb-seg-txt { display: none; }
.tlm-modern .mb-seg.is-tight .mb-seg-btn { padding: .22rem .55rem; }
.tlm-modern .mb-seg-btn { text-decoration: none; }

/* ==========================================================================
   C. Pickers (era, day) and the two forms (range, eras)
   ========================================================================== */
.tlm-modern .tlm-pick { position: relative; flex: 0 0 auto; }
.tlm-modern .tlm-pick > summary { list-style: none; cursor: pointer; user-select: none; }
.tlm-modern .tlm-pick > summary::-webkit-details-marker { display: none; }
.tlm-modern .tlm-pick-btn i:first-child { color: var(--mb-primary-ink); }
.tlm-modern .tlm-pick-chev { font-size: .62rem; opacity: .7; transition: transform .2s ease; }
.tlm-modern .tlm-pick[open] .tlm-pick-chev { transform: rotate(180deg); }
.tlm-modern .tlm-pick-menu {
    position: absolute; right: 0; top: calc(100% + .45rem); z-index: 1050;
    width: 17.5rem; max-width: calc(100vw - 2rem); padding: .3rem .7rem .45rem; overflow: visible;
}
.tlm-modern .tlm-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin-bottom: .35rem; }
.tlm-modern .tlm-pick-item { justify-content: center; text-decoration: none; font-variant-numeric: tabular-nums; }
.tlm-modern .tlm-pick-item:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
.tlm-modern .tlm-pick-item.is-on { background: var(--mb-primary); color: var(--mb-on); }
.tlm-modern .tlm-pick-list { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.tlm-modern .tlm-pick-row { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; text-align: left; font: inherit; }
.tlm-modern button.tlm-pick-row { cursor: pointer; }
.tlm-modern .tlm-pick-row.is-on .mb-row-title { color: var(--mb-primary-ink); }
.tlm-modern .tlm-daynav { display: inline-flex; align-items: center; gap: .3rem; }
.tlm-modern .tlm-arrow { padding: .28rem .55rem; }
.tlm-modern .tlm-arrow:disabled { opacity: .45; cursor: default; }

/* The forms: one .mb-box, fields as soft pills, the confirm a green solid .mb-pill. */
.tlm-modern .tlm-range { padding: .6rem .7rem; margin: 0 0 1rem; overflow: visible; }
.tlm-modern .tlm-range-grid {
    display: grid; gap: .5rem .6rem; align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .9fr) auto;
}
.tlm-modern .tlm-range-grid--cmp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.tlm-modern .tlm-field { display: grid; gap: .2rem; margin: 0; min-width: 0; }
.tlm-modern .tlm-field-lbl {
    display: flex; align-items: center; gap: .35rem; min-width: 0; margin: 0;
    color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tlm-modern .tlm-field-lbl i { color: var(--mb-primary-ink); }
.tlm-modern .tlm-field input, .tlm-modern .tlm-field select {
    width: 100%; height: 2rem; padding: 0 .8rem; min-width: 0;
    border: 1px solid var(--mb-line); border-radius: 999px;
    background-color: var(--mb-soft); color: var(--mb-ink);
    font-size: .78rem; font-weight: 700; box-shadow: none; outline: none;
}
.tlm-modern .tlm-field select {
    appearance: none; -webkit-appearance: none; padding-right: 2rem; text-overflow: ellipsis; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1rem) 52%, calc(100% - .7rem) 52%; background-size: .3rem .3rem; background-repeat: no-repeat;
}
.tlm-modern .tlm-field input:focus, .tlm-modern .tlm-field select:focus { border-color: var(--mb-primary); background-color: var(--mb-card-bg); }
.tlm-modern .tlm-field-pair { display: flex; align-items: center; gap: .35rem; }
.tlm-modern .tlm-field-to { color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.tlm-modern .tlm-go { height: 2rem; padding: 0 1rem; background: var(--mb-ok); }
.tlm-modern .tlm-go:hover { background: color-mix(in oklab, var(--mb-ok) 86%, black); color: #fff; }
.tlm-modern .mb-pill--solid.tlm-go { color: #fff; }
@media (pointer: coarse) {
    .tlm-modern .tlm-field input, .tlm-modern .tlm-field select { font-size: 16px; }
}
.tlm-modern .tlm-era-badge {
    display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: .35rem;
    background: var(--tlm-a); color: var(--mb-on); font-size: .66rem; font-weight: 900; letter-spacing: 0;
}
.tlm-modern .tlm-era-badge.is-b { background: var(--tlm-b); }

/* ==========================================================================
   D. The rail: years newest first, each year's moments as rows in ONE box
   ========================================================================== */
.tlm-modern .tlm-spy { margin: 0 0 1rem; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: var(--bn-spy-top, calc(var(--navbar-height, 50px) + 8px)); z-index: 1019;
    background: var(--mb-soft); }
.tlm-modern .tlm-spy::-webkit-scrollbar { display: none; }
.tlm-modern .tlm-spy a[hidden] { display: none; }
.tlm-modern .tlm-spy .mb-seg-btn { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tlm-modern .tlm-tl { position: relative; }
.tlm-modern .tlm-year { position: relative; padding-left: 2.2rem; scroll-margin-top: calc(var(--bn-spy-top, 58px) + 3.4rem); }
.tlm-modern .tlm-year[hidden] { display: none; }
.tlm-modern .tlm-year + .tlm-year { margin-top: 1rem; }
.tlm-modern .tlm-year::before {
    content: ""; position: absolute; left: .9rem; top: .8rem; bottom: -1rem; width: 2px;
    background: color-mix(in oklab, var(--mb-line) 85%, transparent);
}
.tlm-modern .tlm-year:last-of-type::before { bottom: 0; background: linear-gradient(color-mix(in oklab, var(--mb-line) 85%, transparent), transparent); }
.tlm-modern .tlm-year-mark { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem -2.2rem; font-size: 1rem; }
.tlm-modern .tlm-year-num {
    display: inline-flex; align-items: center; padding: .16rem .7rem; border-radius: 999px;
    background: var(--mb-primary); color: var(--mb-on);
    font-size: .8rem; font-weight: 900; line-height: 1.25; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 4px var(--bs-body-bg);
}
.tlm-modern .tlm-year-mark .tlm-tm { padding: .18rem .65rem; font-size: .7rem; }
.tlm-modern ol.tlm-evs { list-style: none; margin: 0; overflow: visible; }  /* the rail dots sit outside the box */
.tlm-modern .tlm-evs > li { position: relative; }
.tlm-modern .tlm-evs > li[hidden] { display: none !important; }
.tlm-modern .tlm-year:not(.is-open) .tlm-ev.is-extra { display: none; }
.tlm-modern .tlm-tl.is-filtered .tlm-ev.is-extra:not([hidden]) { display: block; }
.tlm-modern .tlm-tl.is-filtered .tlm-more { display: none; }
.tlm-modern .tlm-evs > li > .mb-row { border-bottom: 0; }
.tlm-modern .tlm-evs > li + li > .mb-row { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
/* The dot on the rail, in the moment's colour (rail at .9rem; the box starts at 2.2rem). */
.tlm-modern .tlm-ev::before {
    content: ""; position: absolute; top: 50%; width: .65rem; height: .65rem; margin-top: -.325rem;
    left: calc(-2.2rem + .9rem + 1px - .325rem - .7rem - 1px);
    border-radius: 50%; background: var(--tlm-t, var(--mb-primary));
    box-shadow: 0 0 0 3px var(--bs-body-bg);
}
.tlm-modern .tlm-row .mb-row-vis img.tlm-crest, .tlm-modern .tlm-row .mb-row-vis > span.tlm-crest,
.tlm-modern .mb-row-vis .tlm-crest { width: 1.75rem !important; height: 1.75rem !important; margin: 0 !important; object-fit: contain; }
.tlm-modern .mb-row-vis > span.tlm-crest i { font-size: 1.2rem !important; color: var(--mb-muted); }
.tlm-modern .tlm-trophy-img, .tlm-modern .mb-row-vis img.tlm-trophy-img { width: 2rem !important; height: 2rem !important; max-width: none; object-fit: contain; }
.tlm-modern .mb-row-vis img.tlm-ground { width: 2rem !important; height: 2rem !important; max-width: none; }
.tlm-modern .tlm-ground { width: 2rem; height: 2rem; object-fit: cover; border-radius: .6rem; }
.tlm-modern .tlm-ico { background: color-mix(in oklab, var(--tlm-t, var(--mb-primary)) 15%, var(--mb-card-bg)); color: color-mix(in oklab, var(--tlm-t, var(--mb-primary)) 80%, var(--mb-ink)); }
.tlm-modern .tlm-kind { display: inline-flex; align-items: center; gap: .25rem; color: color-mix(in oklab, var(--tlm-t, var(--mb-primary)) 70%, var(--mb-ink)); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .62rem; }
.tlm-modern .tlm-tag { margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: rgba(var(--mb-accent-rgb), .18); color: var(--mb-accent-ink); font-size: .62rem; font-weight: 800; }
.tlm-modern .tlm-sep { margin: 0 .3rem; opacity: .6; }
.tlm-modern .tlm-inline-crest { display: inline-flex; vertical-align: -3px; margin-right: .25rem; }
.tlm-modern .tlm-inline-crest img, .tlm-modern .tlm-inline-crest > span { width: 14px !important; height: 14px !important; margin: 0 !important; }
.tlm-modern .tlm-inline-crest > span i { font-size: 11px !important; }
.tlm-modern .mb-row-side .mb-when { order: 2; }
/* The figure on a row's right: the score as My Benfica's .mb-score, fees and crowds as text. */
.tlm-modern .tlm-score {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-width: 2.6rem;
    padding: .12rem .45rem; border-radius: .25rem;
    background: var(--mb-soft-2); color: var(--mb-ink);
    font-size: .76rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tlm-modern .tlm-score small { font-size: .58rem; font-weight: 800; opacity: .85; }
.tlm-modern .tlm-score--w { background: var(--mb-ok); color: #fff; }
.tlm-modern .tlm-score--l { background: var(--mb-bad); color: #fff; }
.tlm-modern .mb-row-meta .tlm-score { min-width: 0; padding: 0 .3rem; font-size: .64rem; vertical-align: 1px; }
.tlm-modern .tlm-fig { display: inline-flex; align-items: center; gap: .25rem; color: var(--mb-primary-ink); font-size: .76rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tlm-modern .tlm-fig i { font-size: .8em; opacity: .75; }
.tlm-modern .tlm-more { margin-top: .6rem; cursor: pointer; }
.tlm-modern .tlm-note { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0; color: var(--mb-muted); font-size: .74rem; }
.tlm-modern .tlm-note i { color: var(--mb-accent-ink); }
.tlm-modern .tlm-none[hidden] { display: none; }
.tlm-modern .tlm-none { margin-top: 1rem; }
/* On This Day: the site's result cards on the rail, framed like .mb-box, .6rem apart. */
.benfica-layout.tlm-modern .tlm-results { display: grid; gap: .6rem; }
.benfica-layout.tlm-modern .tlm-results .bn-res-card {
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius);
    box-shadow: var(--mb-shadow); padding: .5rem .8rem .55rem;
}
.tlm-modern .tlm-results .bn-res-card::before {
    content: ""; position: absolute; top: 50%; width: .65rem; height: .65rem; margin-top: -.325rem;
    left: calc(-2.2rem + .9rem + 1px - .325rem - 1px); border-radius: 50%;
    background: var(--mb-muted); box-shadow: 0 0 0 3px var(--bs-body-bg);
}
.tlm-modern .tlm-results .bn-res-card.is-w::before { background: var(--mb-ok); }
.tlm-modern .tlm-results .bn-res-card.is-l::before { background: var(--mb-bad); }

/* ==========================================================================
   E. The results board + Streaks / Records / Scoring
   ========================================================================== */
.tlm-modern .tlm-board { padding: .6rem .7rem .7rem; }
.tlm-modern .tlm-wdl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
/* The cells are My Benfica's countdown cells: a number over its unit. */
.tlm-modern .tlm-cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tlm-modern .tlm-cell b { font-size: 1.35rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tlm-modern .tlm-cell small { margin-top: .1rem; color: var(--mb-muted); font-size: .54rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tlm-modern .tlm-cell.is-w b { color: var(--mb-ok-ink); }
.tlm-modern .tlm-cell.is-l b { color: var(--mb-bad-ink); }
.tlm-modern .tlm-cell.is-pct b { color: var(--mb-primary-ink); }
.tlm-modern .tlm-split { display: flex; height: .55rem; margin: .55rem 0 .1rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.tlm-modern .tlm-split > span { display: block; height: 100%; transition: width .9s var(--mb-ease); }
.tlm-modern .tlm-split .is-w { background: var(--mb-ok); }
.tlm-modern .tlm-split .is-d { background: color-mix(in oklab, var(--mb-muted) 55%, var(--mb-card-bg)); }
.tlm-modern .tlm-split .is-l { background: var(--mb-bad); }
.tlm-modern .tlm-split--thin { height: .3rem; margin-top: .45rem; }
.tlm-modern .tlm-formline { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .55rem; }
.tlm-modern .tlm-formlbl { margin: 0; }
.tlm-modern .tlm-form { display: inline-flex; gap: .25rem; }
/* W/D/L are squares (the site's form badges). */
.tlm-modern .tlm-sq { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: .25rem; color: #fff; font-size: .66rem; font-weight: 900; }
.tlm-modern .tlm-sq.is-w { background: var(--mb-ok); }
.tlm-modern .tlm-sq.is-d { background: var(--theme-draw, var(--bs-secondary)); color: var(--theme-draw-ink, #fff); }
.tlm-modern .tlm-sq.is-l { background: var(--mb-bad); }
.tlm-modern .tlm-run { margin-left: auto; }
.tlm-modern .tlm-run.is-w i { color: var(--mb-ok-ink); }
.tlm-modern .tlm-run.is-l i { color: var(--mb-bad-ink); }
/* Figure tiles: the My Benfica sidebar tiles (label over value, soft, .35rem apart). */
.tlm-modern .tlm-tiles {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem;
    margin: .7rem 0 0; padding: 0; list-style: none;
}
.tlm-modern .tlm-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .35rem; }
.tlm-modern .tlm-tiles li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft); }
.tlm-modern .tlm-tiles span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.tlm-modern .tlm-tiles span i { color: var(--mb-primary-ink); }
.tlm-modern .tlm-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; }
.tlm-modern .tlm-tiles b.is-ok { color: var(--mb-ok-ink); }
.tlm-modern .tlm-tiles b.is-bad { color: var(--mb-bad-ink); }
.tlm-modern .tlm-board .tlm-tiles--4 { margin-top: 0; }
.tlm-modern .tlm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; padding: .3rem .7rem .45rem; }
.tlm-modern .tlm-facts ul { list-style: none; margin: 0; padding: 0; }
.tlm-modern .tlm-fact {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .5rem;
    padding: .4rem .1rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.tlm-modern .tlm-fact:last-child { border-bottom: 0; }
.tlm-modern .tlm-fact-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 700; }
.tlm-modern .tlm-fact-v { font-size: .78rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tlm-modern .tlm-fact-v a { color: inherit; text-decoration: none; }
.tlm-modern .tlm-fact-v a:hover { text-decoration: underline; }
.tlm-modern .tlm-fact-bar, .tlm-modern .tlm-bar { grid-column: 1 / -1; display: block; height: .3rem; margin-top: .25rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.tlm-modern .tlm-fact-bar > span, .tlm-modern .tlm-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--mb-primary); transition: width .9s var(--mb-ease); }

/* ==========================================================================
   F. Leaders (and Compare's scorers), matchups, people
   ========================================================================== */
.tlm-modern .tlm-lead-cap { display: flex; align-items: center; gap: .35rem; }
.tlm-modern .tlm-lead-cap i { color: var(--mb-primary-ink); }
.tlm-modern .tlm-lead.is-ok .tlm-lead-cap i, .tlm-modern .tlm-lead.is-ok .tlm-bar > span { color: var(--mb-ok-ink); }
.tlm-modern .tlm-lead.is-ok .tlm-bar > span { background: var(--mb-ok); }
.tlm-modern .tlm-lead.is-info .tlm-lead-cap i { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }
.tlm-modern .tlm-lead.is-info .tlm-bar > span, .tlm-modern .tlm-lead.is-b .tlm-bar > span { background: var(--mb-info); }
.tlm-modern .tlm-lead.is-warn .tlm-lead-cap i { color: var(--mb-accent-ink); }
.tlm-modern .tlm-lead.is-warn .tlm-bar > span { background: var(--mb-accent); }
.tlm-modern .tlm-lead-row .mb-row-title { display: flex; align-items: center; gap: .35rem; }
.tlm-modern .tlm-lead-row .mb-row-title .fa-crown { color: var(--mb-accent-ink); font-size: .75em; }
.tlm-modern .tlm-rank { display: inline-grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; border-radius: .3rem; background: var(--mb-soft-2); color: var(--mb-muted); font-size: .6rem; font-weight: 900; }
.tlm-modern .tlm-lead-row .tlm-bar { margin-top: .3rem; }
.tlm-modern .tlm-n { font-size: .84rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); }
.tlm-modern .tlm-n.is-big { font-size: 1.35rem; line-height: 1.05; color: var(--mb-primary-ink); }
.tlm-modern .tlm-lead.is-ok .tlm-n.is-big { color: var(--mb-ok-ink); }
.tlm-modern .tlm-lead.is-info .tlm-n.is-big { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }
.tlm-modern .tlm-lead.is-warn .tlm-n.is-big { color: var(--mb-accent-ink); }
.tlm-modern .tlm-flag img, .tlm-modern .tlm-flag svg { display: block; }
.tlm-modern .tlm-wrap { white-space: normal !important; }
.tlm-modern .mb-row-meta i { color: var(--mb-primary-ink); font-size: .9em; }
.tlm-modern .tlm-rows-2 { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.2rem; }
@media (min-width: 768px) {
    .tlm-modern .tlm-rows-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* two columns of rows: the last row of each column loses its line */
    .tlm-modern .tlm-rows-2 > .mb-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* ==========================================================================
   G. Compare Eras: the era cards and the duel
   ========================================================================== */
.tlm-modern .tlm-duel-box { padding: .5rem .7rem .4rem; }
.tlm-modern .tlm-eras { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; padding-bottom: .5rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.tlm-modern .tlm-era { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; min-width: 0; }
.tlm-modern .tlm-era .tlm-era-badge { width: 2rem; height: 2rem; border-radius: .6rem; font-size: .85rem; }
.tlm-modern .tlm-era.is-b { grid-template-columns: auto minmax(0, 1fr) 2rem; text-align: right; }
.tlm-modern .tlm-era.is-b .tlm-era-badge { order: 3; }
.tlm-modern .tlm-era.is-b .tlm-era-best { order: 1; }
.tlm-modern .tlm-era.is-b .tlm-era-txt { order: 2; }
.tlm-modern .tlm-era-txt { display: flex; flex-direction: column; min-width: 0; }
.tlm-modern .tlm-era-txt b { font-size: .84rem; font-weight: 800; }
.tlm-modern .tlm-era-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; }
.tlm-modern .tlm-era-best { display: inline-flex; align-items: center; gap: .25rem; padding: .14rem .55rem; border-radius: 999px; background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); font-size: .7rem; font-weight: 800; }
.tlm-modern .tlm-eras-vs { color: var(--mb-muted); font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.tlm-modern .tlm-duel { display: flex; flex-direction: column; }
.tlm-modern .tlm-duel-row {
    display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; align-items: center; column-gap: .7rem;
    padding: .45rem .1rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.tlm-modern .tlm-duel-row:last-child { border-bottom: 0; }
.tlm-modern .tlm-duel-v { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tlm-modern .tlm-duel-v.is-b { justify-content: flex-end; }
.tlm-modern .tlm-duel-v.is-best { color: var(--mb-ok-ink); }
.tlm-modern .tlm-duel-v i { color: var(--mb-accent-ink); font-size: .6rem; }
.tlm-modern .tlm-duel-mid { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.tlm-modern .tlm-duel-l { color: var(--mb-muted); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tlm-modern .tlm-duel-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; height: .4rem; }
.tlm-modern .tlm-duel-bar > span { display: flex; overflow: hidden; background: var(--mb-soft-2); }
.tlm-modern .tlm-duel-bar > .is-a { justify-content: flex-end; border-radius: 999px 0 0 999px; }
.tlm-modern .tlm-duel-bar > .is-b { border-radius: 0 999px 999px 0; }
.tlm-modern .tlm-duel-bar > span > span { display: block; height: 100%; transition: width .9s var(--mb-ease); }
.tlm-modern .tlm-duel-bar > .is-a > span { background: var(--tlm-a); }
.tlm-modern .tlm-duel-bar > .is-b > span { background: var(--tlm-b); }

/* ==========================================================================
   H. Club History: the strip framed, its bars grow in; the decade table framed
   ========================================================================== */
.tlm-modern .tlm-strip { padding: .6rem .7rem .55rem; }
.tlm-modern .tlm-decades { padding: .2rem .5rem .55rem; }
.tlm-modern .tlm-decades .stats-table-wrap { border: 0; box-shadow: none; background: transparent; }
.tlm-modern .tlm-strip.is-armed .ch-bar { transform: scaleY(0); transform-origin: bottom; }
.tlm-modern .tlm-strip.is-armed.is-grown .ch-bar { transform: scaleY(1); transition: transform .7s var(--mb-ease); }
.tlm-modern .tlm-strip.is-armed.is-grown .ch-col:nth-child(4n+1) .ch-bar { transition-delay: .04s; }
.tlm-modern .tlm-strip.is-armed.is-grown .ch-col:nth-child(4n+2) .ch-bar { transition-delay: .08s; }
.tlm-modern .tlm-strip.is-armed.is-grown .ch-col:nth-child(4n+3) .ch-bar { transition-delay: .12s; }

/* ==========================================================================
   I. This Season: the squad box (pager in its head), breakdown, managers
   ========================================================================== */
.tlm-modern .tlm-boxhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.tlm-modern .tlm-boxhead .mb-cap { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; }
.tlm-modern .tlm-boxhead .mb-cap i { color: var(--mb-primary-ink); }
.tlm-modern .tlm-boxhead .mb-h-count { margin-left: 0; }
.tlm-modern .tlm-pager { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; }
.tlm-modern .tlm-pager-lbl small { color: var(--mb-muted); font-weight: 800; }
.tlm-modern .squad-panel[hidden] { display: none; }
.tlm-modern .tlm-people { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.2rem; }
@media (min-width: 768px) {
    .tlm-modern .tlm-squad .tlm-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tlm-modern .tlm-squad .tlm-people > .mb-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.tlm-modern .tlm-breakdown { padding: .3rem .7rem .55rem; }
.tlm-modern .tlm-bk-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1rem; margin-top: .2rem; }
.tlm-modern .tlm-bk { min-width: 0; }
.tlm-modern .tlm-bars { list-style: none; margin: 0 0 .3rem; padding: 0; display: grid; gap: .4rem; }
.tlm-modern .tlm-bars li { display: grid; grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) auto 2.2rem; align-items: center; column-gap: .45rem; font-size: .74rem; }
.tlm-modern .tlm-bars-l { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.tlm-modern .tlm-bars-l span { overflow: hidden; text-overflow: ellipsis; }
.tlm-modern .tlm-bars-t { display: block; height: .4rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.tlm-modern .tlm-bars-t > span { display: block; height: 100%; border-radius: inherit; background: var(--mb-primary); transition: width .9s var(--mb-ease); }
.tlm-modern .tlm-bars .is-ok .tlm-bars-t > span { background: var(--mb-ok); }
.tlm-modern .tlm-bars .is-info .tlm-bars-t > span { background: var(--mb-info); }
.tlm-modern .tlm-bars .is-warn .tlm-bars-t > span { background: var(--mb-accent); }
.tlm-modern .tlm-bars .is-bad .tlm-bars-t > span { background: var(--mb-bad); }
.tlm-modern .tlm-bars .is-muted .tlm-bars-t > span { background: var(--mb-muted); }
.tlm-modern .tlm-bars b { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--mb-ink); }
.tlm-modern .tlm-bars small { color: var(--mb-muted); font-size: .66rem; text-align: right; }
.tlm-modern .tlm-nat-more:not([hidden]) { margin: 0 0 .35rem; font-size: .74rem; }
.tlm-modern .tlm-nat-more .list-group-item { background: transparent; padding: .25rem 0; border: 0; }
.tlm-modern .tlm-manager { padding: .6rem .7rem .65rem; }
.tlm-modern .tlm-manager-top { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: .7rem; align-items: start; }
.tlm-modern .tlm-manager-name { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.tlm-modern .tlm-manager-name > a, .tlm-modern .tlm-manager-name > span:first-child { color: var(--mb-ink); font-size: .95rem; font-weight: 900; text-decoration: none; margin-right: .2rem; }
.tlm-modern .tlm-manager-name > a:hover { color: var(--mb-primary-ink); }
.tlm-modern .tlm-chip-ok { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); font-weight: 800; }
.tlm-modern .tlm-manager-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin-top: .3rem; color: var(--mb-muted); font-size: .74rem; }
.tlm-modern .tlm-manager-facts i { color: var(--mb-primary-ink); margin-right: .2rem; }
.tlm-modern .tlm-dot { opacity: .5; }
.tlm-modern .tlm-manager-spell { margin-top: .25rem; color: var(--mb-muted); font-size: .72rem; }
.tlm-modern .tlm-manager-spell i { margin-right: .3rem; }
.tlm-modern .tlm-manager-quote { margin: .35rem 0 0; color: var(--mb-muted); font-size: .74rem; font-style: italic; line-height: 1.4; }
.tlm-modern .tlm-mini-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem; margin-top: .6rem; }
.tlm-modern .tlm-mini-tiles > span { display: flex; flex-direction: column; align-items: center; padding: .3rem .2rem; border-radius: .6rem; background: var(--mb-soft); }
.tlm-modern .tlm-mini-tiles b { font-size: .9rem; font-weight: 900; color: var(--mb-ink); font-variant-numeric: tabular-nums; }
.tlm-modern .tlm-mini-tiles .is-ok b { color: var(--mb-ok-ink); }
.tlm-modern .tlm-mini-tiles .is-bad b { color: var(--mb-bad-ink); }
.tlm-modern .tlm-mini-tiles .is-info b { color: color-mix(in oklab, var(--mb-info) 60%, var(--mb-ink)); }
.tlm-modern .tlm-mini-tiles small { color: var(--mb-muted); font-size: .56rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* ==========================================================================
   J. Trophies Won (tlTrophiesWonSection): My Benfica's .mb-tile, .6rem apart
   ========================================================================== */
.benfica-layout.tlm-modern .tlt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .6rem; }
.benfica-layout.tlm-modern .tlt-card {
    display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: center; column-gap: .65rem;
    padding: .6rem .75rem; text-decoration: none; color: var(--mb-ink);
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius); background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
    transition: transform .2s var(--mb-ease), border-color .2s ease;
}
.benfica-layout.tlm-modern .tlt-card:hover { color: var(--mb-ink); transform: translateY(-2px); border-color: rgba(var(--mb-primary-rgb), .3); }
.benfica-layout.tlm-modern .tlt-card img, .benfica-layout.tlm-modern .tlt-pic { width: 2.3rem !important; height: 2.3rem !important; object-fit: contain; }
.benfica-layout.tlm-modern .tlt-body { display: flex; flex-direction: column; min-width: 0; }
.benfica-layout.tlm-modern .tlt-body h4 { margin: 0; overflow-wrap: anywhere; font-size: .84rem; font-weight: 900; line-height: 1.2; color: var(--mb-ink); }
.benfica-layout.tlm-modern .tlt-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; font-weight: 700; }
.benfica-layout.tlm-modern .tlt-meta .badge { font-size: .56rem; vertical-align: 1px; }
.benfica-layout.tlm-modern .tlt-ago { font-weight: 600; opacity: .8; }
.benfica-layout.tlm-modern .tlt-empty {
    display: flex; align-items: center; gap: .45rem .6rem; padding: .7rem .9rem;
    border: 1px solid var(--mb-ring); border-radius: var(--mb-radius); background: var(--mb-card-bg); box-shadow: var(--mb-shadow);
    color: var(--mb-muted); font-size: .8rem;
}
.benfica-layout.tlm-modern .tlt-empty i { color: var(--mb-primary-ink); opacity: .7; }

/* ==========================================================================
   K. The sidebar: My Benfica's #mbAside look (2-column tiles, compact rows)
   ========================================================================== */
.benfica-layout.tlm-modern .bn-aside .bn-panel { padding-bottom: .75rem; }
.benfica-layout.tlm-modern .bn-aside .bn-statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.benfica-layout.tlm-modern .bn-aside .bn-stat-tile {
    display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .1rem; min-width: 0;
    padding: .35rem .5rem; border: 0; border-radius: .6rem; background: var(--mb-soft);
}
.benfica-layout.tlm-modern .bn-aside .bn-stat-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; line-height: 1.3; font-variant-numeric: tabular-nums; }
.benfica-layout.tlm-modern .bn-aside .bn-stat-label { display: flex; align-items: center; gap: .25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
.benfica-layout.tlm-modern .bn-aside .bn-stat-label i { display: none; }
.benfica-layout.tlm-modern .bn-aside .bn-form5 { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.benfica-layout.tlm-modern .bn-aside .bn-f { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: .25rem; color: #fff; font-size: .66rem; font-weight: 900; }
.benfica-layout.tlm-modern .bn-aside .bn-f.W { background: var(--mb-ok); }
.benfica-layout.tlm-modern .bn-aside .bn-f.D { background: var(--theme-draw, var(--bs-secondary)); color: var(--theme-draw-ink, #fff); }
.benfica-layout.tlm-modern .bn-aside .bn-f.L { background: var(--mb-bad); }
.benfica-layout.tlm-modern .bn-aside .bn-streak { margin-left: auto; padding: .14rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.benfica-layout.tlm-modern .bn-aside .bn-lead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.benfica-layout.tlm-modern .bn-aside .bn-lead li {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .5rem;
    padding: .4rem .1rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
.benfica-layout.tlm-modern .bn-aside .bn-lead li:last-child { border-bottom: 0; }
.benfica-layout.tlm-modern .bn-aside .bn-rank { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: .35rem; background: rgba(var(--mb-primary-rgb), .1); color: var(--mb-primary-ink); font-size: .66rem; font-weight: 900; }
.benfica-layout.tlm-modern .bn-aside .bn-lead-main { min-width: 0; }
.benfica-layout.tlm-modern .bn-aside .bn-lead-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: .84rem; font-weight: 800; text-decoration: none; }
.benfica-layout.tlm-modern .bn-aside .bn-lead-bar { display: block; height: .3rem; margin-top: .2rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
.benfica-layout.tlm-modern .bn-aside .bn-lead-fill { display: block; height: 100%; border-radius: inherit; background: var(--mb-primary); transition: width .9s var(--mb-ease); }
.benfica-layout.tlm-modern .bn-aside .bn-lead-val { font-size: .84rem; font-weight: 900; color: var(--mb-primary-ink); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   L. Hero (sizes from style.css's shared .hero-pv2--page block)
   ========================================================================== */
.hero-pv2--timeline .tlh-badge { display: grid; place-items: center; }

/* ==========================================================================
   M. Phones (My Benfica's 767 / 575 / 439 / 379 steps)
   ========================================================================== */
@media (max-width: 991.98px) {
    .tlm-modern .tlm-range-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tlm-modern .tlm-range-grid--cmp { grid-template-columns: minmax(0, 1fr); }
    .tlm-modern .tlm-go { grid-column: 1 / -1; width: 100%; }
    .tlm-modern .tlm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tlm-modern .tlm-facts, .tlm-modern .tlm-bk-cols { grid-template-columns: minmax(0, 1fr); }
    .tlm-modern .tlm-facts section + section, .tlm-modern .tlm-bk + .tlm-bk { margin-top: .2rem; }
    .tlm-modern .tlm-mini-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    /* As My Benfica: a head with a switch keeps its title and drops the decorative rule. */
    body .benfica-layout.tlm-modern .bn-section-head:has(.mb-seg) > h2 { flex: 1 1 auto !important; min-width: min-content !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
    .benfica-layout.tlm-modern .bn-section-head:has(.mb-seg)::after { display: none; }
    .benfica-layout.tlm-modern .bn-section-head:has(.mb-seg) .bn-head-actions { margin-left: auto; }
    .tlm-modern .tlm-pick-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tlm-modern .tlm-pick-btn { padding: .28rem .6rem; }
    .tlm-modern .tlm-wdl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
    .tlm-modern .tlm-eras { grid-template-columns: minmax(0, 1fr); }
    .tlm-modern .tlm-eras-vs { display: none; }
    .tlm-modern .tlm-era.is-b { grid-template-columns: 2rem minmax(0, 1fr) auto; text-align: left; }
    .tlm-modern .tlm-era.is-b .tlm-era-badge { order: 0; }
    .tlm-modern .tlm-era.is-b .tlm-era-best { order: 3; }
    .tlm-modern .tlm-era.is-b .tlm-era-txt { order: 1; }
    .tlm-modern .tlm-duel-row { grid-template-columns: 4rem minmax(0, 1fr) 4rem; column-gap: .45rem; }
    .tlm-modern .tlm-duel-v { font-size: .8rem; }
    /* A row's day goes under its text (My Benfica: "a time drops under the text"). */
    .tlm-modern .tlm-row:has(.mb-when) { grid-template-columns: 2rem minmax(0, 1fr); }
    .tlm-modern .tlm-row:has(.mb-when) .mb-row-side { grid-column: 2; justify-content: flex-start; margin-top: .1rem; }
    .tlm-modern .tlm-row:has(.mb-when) .mb-row-side .mb-when { order: 0; }
}
@media (max-width: 575.98px) {
    .tlm-modern .tlm-year { padding-left: 1.6rem; }
    .tlm-modern .tlm-year::before { left: .6rem; }
    .tlm-modern .tlm-year-mark { margin-left: -1.6rem; }
    .tlm-modern .tlm-ev::before { left: calc(-1.6rem + .6rem + 1px - .3rem - .7rem - 1px); width: .6rem; height: .6rem; margin-top: -.3rem; }
    .tlm-modern .tlm-results .bn-res-card::before { left: calc(-1.6rem + .6rem + 1px - .3rem - 1px); width: .6rem; height: .6rem; margin-top: -.3rem; }
    .tlm-modern .tlm-tiles, .tlm-modern .tlm-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tlm-modern .tlm-cell b { font-size: 1.1rem; }
    .tlm-modern .tlm-cell small { font-size: .5rem; letter-spacing: .03em; }
    .tlm-modern .tlm-run { margin-left: 0; }
    .tlm-modern .tlm-bars li { grid-template-columns: minmax(0, 5rem) minmax(0, 1fr) auto 2rem; }
    .tlm-modern .tlm-year-mark .tlm-tm span { display: none; }
    .tlm-modern .tlm-boxhead { flex-wrap: wrap; }
}
@media (max-width: 767.98px) {
    /* The bar is as tall as My Benfica's (whose online pill sets its height). */
    .tlm-modern .tlm-topbar { min-height: 2.4rem; }
}
@media (max-width: 439.98px) {
    /* A crowded switch (eight kinds) drops under its title as one full row — the standard's
       rule; !important because style.css pins every head to one row on phones. */
    body .benfica-layout.tlm-modern #tl-story > .bn-section-head:has(> .bn-head-actions) { flex-wrap: wrap !important; row-gap: .5rem !important; }
    body .benfica-layout.tlm-modern #tl-story > .bn-section-head:has(> .bn-head-actions)::after { display: block !important; flex: 1 1 0 !important; }
    body .benfica-layout.tlm-modern #tl-story > .bn-section-head > .bn-head-actions { flex: 1 0 100% !important; justify-content: space-between !important; margin-left: 0 !important; }
    body .benfica-layout.tlm-modern #tl-story > .bn-section-head > .bn-head-actions > .tlm-seg { flex: 1 1 auto !important; justify-content: space-between !important; }
    .benfica-layout.tlm-modern #tl-story .tlm-seg .mb-seg-btn { flex: 1 1 0; justify-content: center; }
    .tlm-modern .tlm-daynav .tlm-pick-txt { position: static; width: auto; height: auto; clip: auto; }
}
@media (max-width: 379.98px) {
    .tlm-modern .mb-seg-btn { padding: .26rem .45rem; }
    .tlm-modern .tlm-topbar { min-height: 2.3rem; }
    .benfica-layout.tlm-modern #tl-story .tlm-seg .mb-seg-btn { padding: .26rem .3rem; }
    .tlm-modern .tlm-tag { display: none; }
    .tlm-modern .tlm-daynav .tlm-pick-txt { display: none; }
}

/* ==========================================================================
   N. Motion: rows rise in as they scroll in (the hidden state set ONLY by
      timeline-modern.js when the tab is visible and motion is allowed).
   ========================================================================== */
.tlm-modern .tlm-tl.tlm-anim .tlm-ev:not(.is-in) { opacity: 0; transform: translateY(8px); }
.tlm-modern .tlm-tl.tlm-anim .tlm-ev.is-in { opacity: 1; transform: none; transition: opacity .4s var(--mb-ease), transform .4s var(--mb-ease); }
@media (prefers-reduced-motion: reduce) {
    .tlm-modern .tlm-tl.tlm-anim .tlm-ev:not(.is-in) { opacity: 1; transform: none; }
    .tlm-modern .tlm-strip.is-armed .ch-bar { transform: none; }
    .tlm-modern .tlm-split > span, .tlm-modern .tlm-bar > span, .tlm-modern .tlm-fact-bar > span,
    .tlm-modern .tlm-bars-t > span, .tlm-modern .tlm-duel-bar > span > span, .tlm-modern .tlm-pick-chev,
    .benfica-layout.tlm-modern .tlt-card { transition: none !important; }
    .benfica-layout.tlm-modern .tlt-card:hover { transform: none; }
}

/* Key Moments rows reach the card's edges (owner, 7 Oct 2026: "remove the gap on the left top
   right and bottom"): the box loses its padding, each row keeps the text inset itself, and the
   rail dots move by the padding that went. A divider sits only under a VISIBLE earlier moment,
   so a filtered list never shows a second line under the card's top border. */
.tlm-modern ol.mb-box.tlm-evs { padding: 0 !important; }
.tlm-modern .tlm-evs > li > .mb-row { padding-left: .8rem !important; padding-right: .8rem !important; margin-left: 0 !important; margin-right: 0 !important; }
.tlm-modern .tlm-evs > li:first-child > .mb-row { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.tlm-modern .tlm-evs > li:last-child > .mb-row { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.tlm-modern .tlm-evs > li { border-radius: inherit; }
.tlm-modern .tlm-evs > li + li > .mb-row { border-top: 0; }
.tlm-modern .tlm-evs > li:not([hidden]) ~ li > .mb-row { border-top: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent); }
.tlm-modern .tlm-ev::before { left: calc(-2.2rem + .9rem + 1px - .325rem - 1px); }
@media (max-width: 575.98px) {
    .tlm-modern .tlm-ev::before { left: calc(-1.6rem + .6rem + 1px - .3rem - 1px); }
}

/* ==========================================================================
   O. On This Day sidebar (#tdAside, 8 Oct 2026; includes/timeline_day_sidebar.php) — its
      pieces (.tds-*) serve every timeline view's sidebar since the same day (section P)
      Pick a Day, Jump to a Section, This Date in Numbers, Biggest Win, Coming Up,
      Explore. My Benfica's panels and THE row (edge to edge via mybenfica-modern.css),
      icons in the site gold, two lines per row on every width.
   ========================================================================== */
/* The sidebar's Pick a Day is the page's date control on a desktop: the Matches head's
   picker steps aside there (phones and tablets keep it - their sidebar is a drawer). */
@media (min-width: 992px) {
    .benfica-layout.tlm-modern:has(#tdsPick) #this-day-history > .bn-section-head .tlm-daynav { display: none; }
}
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-panel { padding-bottom: .75rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-panel h3 { margin-bottom: .7rem; }

/* 1. Pick a Day: the day bar, the calendar, the legend and the three pills. */
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-daybar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; margin-bottom: .6rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-arrow { width: 2rem; height: 2rem; padding: 0; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-arrow i { color: var(--mb-primary-ink); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-day { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; line-height: 1.2; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-day b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: 1rem; font-weight: 900; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-day small { color: var(--mb-muted); font-size: .68rem; font-weight: 700; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal { padding: .45rem .5rem .5rem; border-radius: .85rem; background: var(--mb-soft); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .4rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-nav {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    color: var(--mb-primary-ink); font-size: .66rem; text-decoration: none;
    transition: background-color .18s ease;
}
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-nav:hover { background: var(--mb-soft-2); color: var(--mb-primary-ink); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-name { color: var(--mb-ink); font-size: .78rem; font-weight: 900; letter-spacing: .02em; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .22rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-grid[hidden] { display: none; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-d {
    display: grid; place-items: center; aspect-ratio: 1 / 1; min-width: 0; border-radius: .45rem;
    color: var(--mb-ink); font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h0 { background: var(--mb-card-bg); color: var(--mb-muted); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h1 { background: rgba(var(--mb-primary-rgb), .14); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h2 { background: rgba(var(--mb-primary-rgb), .3); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h3 { background: rgba(var(--mb-primary-rgb), .52); color: var(--mb-on); }
[data-bs-theme="dark"] :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h1 { background: rgba(var(--mb-primary-rgb), .22); }
[data-bs-theme="dark"] :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h2 { background: rgba(var(--mb-primary-rgb), .42); }
[data-bs-theme="dark"] :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-h3 { background: rgba(var(--mb-primary-rgb), .7); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) a.tds-d:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(var(--mb-primary-rgb), .5); color: var(--mb-ink); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) a.tds-d.tds-h3:hover { color: var(--mb-on); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-d.is-today { box-shadow: inset 0 0 0 2px var(--theme-accent); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-d.is-sel, :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) a.tds-d.is-sel:hover { background: var(--mb-primary); color: var(--mb-on); box-shadow: none; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-d.is-sel.is-today { box-shadow: inset 0 0 0 2px var(--theme-accent); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-legend { display: flex; align-items: center; justify-content: flex-end; gap: .2rem; margin: .45rem 0 .55rem; color: var(--mb-muted); font-size: .62rem; font-weight: 700; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-legend span:first-child { margin-right: .15rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-legend span:last-child { margin-left: .15rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-legend i.tds-h0 { box-shadow: inset 0 0 0 1px var(--mb-line); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-acts { display: flex; gap: .35rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-acts .mb-pill { flex: 1 1 auto; min-width: 0; padding-left: .5rem; padding-right: .5rem; font-family: inherit; cursor: pointer; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-acts .mb-pill span { overflow: hidden; text-overflow: ellipsis; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-acts .mb-pill i { color: var(--theme-accent); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-acts .mb-pill.is-on { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-acts .mb-pill.is-on i { color: inherit; }

/* 3. This Date in Numbers: the W/D/L split, its key, four tiles, the foot. */
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-split { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); gap: 2px; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-split > span { display: block; height: 100%; min-width: .3rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-split .is-w { background: var(--mb-ok); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-split .is-d { background: var(--theme-draw, #c7ccd1); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-split .is-l { background: var(--mb-bad); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: .5rem 0 .55rem; padding: 0; list-style: none; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-key li { display: flex; align-items: center; gap: .35rem; min-width: 0; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-key b { color: var(--mb-ink); font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-key small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .64rem; font-weight: 700; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-sq { width: 1.2rem; height: 1.2rem; border-radius: .25rem; font-size: .6rem; box-shadow: none; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-sq.bn-w { background: var(--mb-ok); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-sq.bn-d { background: var(--theme-draw, #c7ccd1); color: var(--theme-draw-ink, #1b1b1b); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-sq.bn-l { background: var(--mb-bad); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-tiles li { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .35rem .5rem; border-radius: .6rem; background: var(--mb-soft); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-tiles li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-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; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-tiles b small { color: var(--mb-muted); font-size: .68em; font-weight: 800; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-foot { margin-top: .5rem; padding-bottom: 0; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-foot .mb-foot-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-foot .mb-more { flex: 0 0 auto; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-foot .mb-more i { color: var(--theme-accent); }

/* 4. Biggest Win: crest | score | crest over one meta line, on a soft card. */
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-duel {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: .5rem; row-gap: .35rem;
    padding: .6rem .6rem .5rem; border-radius: .85rem; background: var(--mb-soft); color: var(--mb-ink); text-decoration: none;
    transition: background-color .18s ease;
}
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-duel:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-team { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-team img, :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-team .tds-crest { width: 36px; height: 36px; object-fit: contain; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-team b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; font-weight: 800; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-score b { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: .6rem; background: var(--mb-ok); color: #fff; font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-score b i { font-style: normal; opacity: .75; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-duel-meta { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .7rem; text-align: center; }

/* 5. Coming Up: THE row, edge to edge; the last one sits on the card's bottom edge. */
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-next { padding-bottom: 0; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-next > .mb-rows > .mb-row:last-child { padding-bottom: .6rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-row .mb-row-vis { width: 2rem; height: 2rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-row .mb-row-vis img.tds-crest, :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-row .mb-row-vis .tlm-trophy-img { width: 1.75rem !important; height: 1.75rem !important; object-fit: contain; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(var(--mb-accent-rgb), .16); color: var(--theme-accent); }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cnts { display: inline-flex; gap: .45rem; margin-left: .25rem; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cnt { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cnt i { color: var(--theme-accent); font-size: .85em; }
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-date { font-variant-numeric: tabular-nums; }

/* 6. Explore: the standard two columns; a long label ends in an ellipsis, not a clip. */
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-explore .bn-cta-links a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panels keep their height in the phone drawer (a fixed-height flex column). */
:is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) > .bn-panel { flex-shrink: 0; }
@media (max-width: 439.98px) {
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-tiles .tds-per { display: none; }
}
@media (max-width: 379.98px) {
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-tiles li > span { letter-spacing: 0; }
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal { padding: .4rem .35rem .45rem; }
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-grid { gap: .18rem; }
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-d { font-size: .66rem; border-radius: .38rem; }
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-key small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-d, :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-cal-nav, :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) .tds-duel { transition: none !important; }
    :is(#tdAside, #tlAside, #tsAside, #tcAside, #chAside) a.tds-d:hover { transform: none; }
}

/* Icons use the site gold, never the dark accent-ink (owner rule, 6 Oct 2026). */
.tlm-modern .tlm-note i,
.tlm-modern .tlm-lead.is-warn .tlm-lead-cap i,
.tlm-modern .tlm-lead-row .mb-row-title .fa-crown,
.tlm-modern .tlm-duel-v i { color: var(--theme-accent, var(--mb-accent)); }

/* Two columns of rows (Born on this Day…): the first row of the RIGHT column and the last row
   of the LEFT column reach the card's top / bottom edge too, like the list's own first and last
   rows (owner, 8 Oct 2026: the left column's last row left a white strip under its hover). */
@media (min-width: 768px) {
    .tlm-modern .mb-box > .tlm-rows-2 > .mb-row:nth-child(2) { margin-top: -.3rem; padding-top: .75rem; }
    .tlm-modern .mb-box > .tlm-rows-2 > .mb-row:nth-last-child(2):nth-child(odd) { margin-bottom: -.3rem; padding-bottom: .75rem; }
}

/* ==========================================================================
   P. The other views' sidebars (8 Oct 2026; includes/timeline_views_sidebar.php):
      Timeline #tlAside, This Season #tsAside, Compare Eras #tcAside, Club History #chAside.
      Section O's pieces plus these; rows edge to edge, icons in the site gold.
   ========================================================================== */
/* The sidebar's own control replaces the first head's on a desktop (phones keep the head's). */
@media (min-width: 992px) {
    .benfica-layout.tlm-modern:has(#tvsRange) #tl-story > .bn-section-head details.tlm-pick:not(.tlm-kind) { display: none; }
}
:is(#tlAside, #tsAside, #tcAside, #chAside) .tds-arrow.is-off { opacity: .4; pointer-events: none; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-cap { margin: .65rem 0 .35rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-cap i { color: var(--theme-accent); margin-right: .2rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-panel > .tvs-cap:first-of-type { margin-top: 0; }
/* A list panel with no foot ends on its last row, which sits on the card's bottom edge. */
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-list:not(:has(> .mb-foot)) { padding-bottom: 0; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-list:not(:has(> .mb-foot)) > .mb-rows:last-child > .mb-row:last-child { padding-bottom: .6rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-list .mb-row-meta i { margin-right: .3rem; color: var(--theme-accent); font-size: .9em; }

/* Pick a Range: quick ranges as pills, the decades as a compact grid. */
#tlAside .tvs-quick { display: flex; flex-wrap: wrap; gap: .3rem; }
#tlAside .tvs-quick .mb-pill { flex: 1 1 auto; min-width: 0; padding: .26rem .6rem; font-size: .72rem; }
#tlAside .tvs-quick .mb-pill i { color: var(--theme-accent); }
#tlAside .tvs-quick .mb-pill.is-on { background: var(--mb-primary); border-color: transparent; color: var(--mb-on); }
#tlAside .tvs-quick .mb-pill.is-on i { color: inherit; }
#tlAside .tvs-decades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
#tlAside .tvs-dec {
    display: grid; place-items: center; padding: .28rem .2rem; border-radius: .5rem;
    background: var(--mb-soft); color: var(--mb-ink); font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none;
    transition: background-color .15s ease;
}
#tlAside .tvs-dec:hover { background: var(--mb-soft-2); color: var(--mb-ink); }
#tlAside .tvs-dec.is-on { background: var(--mb-primary); color: var(--mb-on); }
#tlAside .tvs-range .tds-foot { margin-top: .6rem; }

/* A number over a thin bar (win %, milestone progress). */
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .22rem; width: 3.3rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog-n { line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog-n b { color: var(--mb-ink); font-size: .9rem; font-weight: 900; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog-n small { color: var(--mb-muted); font-size: .66rem; font-weight: 800; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog-bar { position: relative; display: block; width: 100%; height: .3rem; border-radius: 999px; overflow: hidden; background: var(--mb-soft-2); }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog-bar > i {
    position: absolute; inset: 0 auto 0 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--mb-primary), color-mix(in oklab, var(--mb-primary) 55%, var(--mb-accent)));
    transition: width .9s var(--mb-ease);
}
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-num { display: inline-flex; align-items: baseline; gap: .2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-num b { color: var(--mb-ink); font-size: .9rem; font-weight: 900; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-num small { color: var(--mb-muted); font-size: .64rem; font-weight: 700; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-count b { font-weight: 900; font-variant-numeric: tabular-nums; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-count i { color: var(--theme-accent); }

/* W / D / L squares holding counts. */
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-wdl { display: inline-flex; align-items: center; gap: .18rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-wdl .tds-sq { width: auto; min-width: 1.3rem; height: 1.3rem; padding: 0 .22rem; font-size: .62rem; font-variant-numeric: tabular-nums; }

/* Transfer Balance: the in / out bar and three tiles. */
#tlAside .tvs-money { margin-bottom: .5rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles.tvs-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles.tvs-tiles-3 b { font-size: .92rem; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles .tvs-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-muted); font-size: .6rem; font-weight: 700; }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles li.is-ok b { color: var(--mb-ok-ink); }
:is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles li.is-bad b { color: var(--mb-bad-ink); }

/* This Season: previous / next season around the season pill (inside the Filters panel). */
#tsAside .tvs-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem; }
#tsAside .tvs-step .st-change-form { display: inline-flex; }
#tsAside .tvs-step .tds-arrow { width: 2rem; height: 2rem; padding: 0; font-family: inherit; cursor: pointer; }
#tsAside .tvs-step .tds-arrow i { color: var(--mb-primary-ink); }
#tsAside .tvs-step .st-pick { min-width: 0; }
/* Next Match: the kick-off countdown in the score's place. */
#tsAside .tvs-next .tds-score b.tvs-when { padding: .25rem .6rem; background: var(--mb-primary); color: var(--mb-on); font-size: .74rem; white-space: nowrap; }
/* Versus Last Season: label | last season's figure | the change. */
#tsAside .tvs-vs { margin: 0; padding: 0; list-style: none; }
#tsAside .tvs-vs li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 3.3rem; align-items: center; column-gap: .6rem;
    margin: 0 -1rem; padding: .38rem 1.05rem; border-bottom: 1px solid color-mix(in oklab, var(--mb-line) 60%, transparent);
}
#tsAside .tvs-vs li:last-child { border-bottom: 0; }
#tsAside .tvs-versus { padding-bottom: .35rem; }
#tsAside .tvs-vs-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mb-ink); font-size: .8rem; font-weight: 700; }
#tsAside .tvs-vs-then { color: var(--mb-muted); font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
#tsAside .tvs-delta {
    display: inline-flex; align-items: center; justify-content: center; gap: .2rem; padding: .1rem .4rem; border-radius: 999px;
    font-size: .7rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap;
}
#tsAside .tvs-delta.is-up { background: rgba(var(--mb-ok-rgb), .14); color: var(--mb-ok-ink); }
#tsAside .tvs-delta.is-down { background: rgba(var(--mb-bad-rgb), .12); color: var(--mb-bad-ink); }
#tsAside .tvs-delta.is-eq { background: var(--mb-soft); color: var(--mb-muted); }

/* Compare Eras: the era pickers, the best seasons, the duel bars in a narrow column. */
#tcAside .tvs-era { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem; }
#tcAside .tvs-era .st-pick { display: block; width: 100%; min-width: 0; }
#tcAside .tvs-era .st-pick .st-pick-btn { width: 100%; max-width: none; }
#tcAside .tvs-era .st-pick .st-pick-txt { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; }
#tcAside .tvs-era .st-pick .st-pick-caret { margin-left: auto; }
#tcAside .tvs-era .st-pick .st-pick-menu { left: 0; right: 0; width: auto; min-width: 0; max-height: 18rem; overflow-y: auto; }
#tcAside .tvs-eras .tds-acts { margin-top: .55rem; }
#tcAside .tvs-era-vis { width: 1.75rem; height: 1.75rem; font-size: .8rem; border-radius: .5rem; }
#tcAside .tvs-era-mini { width: 1rem; height: 1rem; font-size: .55rem; border-radius: .25rem; vertical-align: -.1rem; }
#tcAside .tvs-duel .tlm-duel-row { grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; column-gap: .5rem; }
#tcAside .tvs-duel .tlm-duel-v { font-size: .86rem; }
#tcAside .tvs-duel .tlm-duel-v i { color: var(--theme-accent); }

/* Club History: On This Day teaser line. */
#chAside .tvs-otd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
#chAside .tvs-otd-date { color: var(--mb-ink); font-size: .92rem; font-weight: 900; }
#chAside .tvs-otd-n { color: var(--mb-muted); font-size: .72rem; font-weight: 700; }
#chAside .tvs-otd .tvs-wdl { margin-left: auto; }
#chAside .tvs-today .mb-rows > .mb-row { margin-left: -1rem; margin-right: -1rem; padding-left: 1.05rem; padding-right: 1.05rem; }

@media (max-width: 439.98px) {
    :is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog { width: 2.9rem; }
    /* Three money tiles do not fit a phone drawer: two, the balance across the row. */
    :is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles.tvs-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles.tvs-tiles-3 > li:last-child { grid-column: 1 / -1; }
    /* Next Match: the countdown wraps rather than squeezing the two names. */
    #tsAside .tvs-next .tds-score b.tvs-when { max-width: 5.4rem; white-space: normal; text-align: center; line-height: 1.15; font-size: .68rem; }
}
@media (max-width: 379.98px) {
    #tlAside .tvs-decades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-wdl .tds-sq { min-width: 1.15rem; height: 1.15rem; font-size: .56rem; padding: 0 .15rem; }
    :is(#tlAside, #tsAside, #tcAside, #chAside) .tds-tiles .tvs-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    :is(#tlAside, #tsAside, #tcAside, #chAside) .tvs-prog-bar > i, #tlAside .tvs-dec { transition: none !important; }
}

/* "Edit Dates" lands on the Compare Eras date form: a short primary-ring pulse shows where. */
@keyframes tlm-flash { 0% { box-shadow: 0 0 0 0 rgba(var(--mb-primary-rgb, 200, 16, 46), .55); } 70% { box-shadow: 0 0 0 10px rgba(var(--mb-primary-rgb, 200, 16, 46), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--mb-primary-rgb, 200, 16, 46), 0); } }
.tlm-modern #tc-form.tlm-flash { animation: tlm-flash 1.2s ease-out 1; border-radius: var(--mb-radius, 1.1rem); }
@media (prefers-reduced-motion: reduce) { .tlm-modern #tc-form.tlm-flash { animation: none; outline: 2px solid var(--mb-primary); outline-offset: 2px; } }

/* Two-column people lists fill their card (owner, 8 Oct 2026: "when hover with mouse does not
   cover everything you see gaps with white"): the list bleeds through the card's side padding,
   the columns meet with no gap between them, and each row keeps its text inset itself — so a
   row's hover runs from the card's edge to the middle, with no white strip left, right or
   between the columns. */
.tlm-modern .tlm-squad .squad-panel { margin-left: -.7rem; margin-right: -.7rem; }
.tlm-modern .tlm-squad .tlm-people { column-gap: 0; }
.tlm-modern .tlm-squad .tlm-people > .mb-row { margin-left: 0 !important; margin-right: 0 !important; padding-left: .8rem !important; padding-right: .8rem !important; }
.tlm-modern .mb-box > .tlm-rows-2 { margin-left: -.7rem; margin-right: -.7rem; column-gap: 0; }
.tlm-modern .mb-box > .tlm-rows-2 > .mb-row { margin-left: 0 !important; margin-right: 0 !important; padding-left: .8rem !important; padding-right: .8rem !important; }

/* Pick the Eras (owner, 8 Oct 2026: "fix the space"): the A / B badge is a square as tall as
   the pill beside it, with a clear gap, and the two eras sit apart like the Filters pills. */
#tcAside .tvs-era-list { display: grid !important; gap: .5rem; }
#tcAside .tvs-era { gap: .6rem; grid-template-columns: var(--bn-ctl-h, 1.875rem) minmax(0, 1fr); }
#tcAside .tvs-era > .tlm-era-badge { width: var(--bn-ctl-h, 1.875rem); height: var(--bn-ctl-h, 1.875rem); border-radius: .6rem; display: inline-grid; place-items: center; margin: 0; font-size: .78rem; line-height: 1; }
#tcAside .tvs-era-list + .tds-acts, #tcAside .tvs-era-list ~ .tds-acts { margin-top: .6rem; }