/* MatchTimeline (js/matchtimeline.js) — a finished match drawn from Betradar's timeline.
   Loaded by index.html (the match popup in My Bets and the Management ticket detail — the
   light, grey popup) and livescore.html (dark). Every rule below reads only the --mtl-*
   tokens, which each page sets for its theme: style.css :root for the light popup,
   livescore.html :root for the dark page. Square, like the rest of the site. */
.mtl {
    color: var(--mtl-text);
    font-variant-numeric: tabular-nums;
}

.mtl-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 18px; }
.mtl-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mtl-card);
    border: 1px solid var(--mtl-line);
    border-radius: var(--radius-md);
}
.mtl-card.mtl-tight { gap: 6px; }
.mtl-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mtl-muted);
}
.mtl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--mtl-mid); }
.mtl-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mtl-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; display: inline-block; }
.mtl-dot.h { background: var(--mtl-home); }
.mtl-dot.a { background: var(--mtl-away); }

/* Final score: home · score · away, the period / set scores under it. */
.mtl-hero { gap: 8px; }
.mtl-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mtl-hero-team { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.mtl-hero-team.h { color: var(--mtl-home-ink); }
.mtl-hero-team.a { color: var(--mtl-away-ink); text-align: right; }
.mtl-hero-score { font-size: 26px; font-weight: 700; white-space: nowrap; }
.mtl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mtl-chips span {
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--mtl-chip);
    color: var(--mtl-mid);
    font-size: 12px;
    font-weight: 700;
}

/* One set: its name and score, who was ahead, its record. */
.mtl-set { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 2px; border-top: 1px solid var(--mtl-line); }
.mtl-set-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; }
.mtl-score { font-size: 15px; font-weight: 700; }
.mtl-score .h { color: var(--mtl-home-ink); }
.mtl-score .a { color: var(--mtl-away-ink); }
.mtl-set-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--mtl-muted); }

.mtl-chart { display: block; width: 100%; height: auto; overflow: visible; }
.mtl-area { stroke: none; }
.mtl-area.h { fill: var(--mtl-home); fill-opacity: .25; }
.mtl-area.a { fill: var(--mtl-away); fill-opacity: .25; }
.mtl-zero { stroke: var(--mtl-zero); stroke-width: 1; }
.mtl-cut { stroke: var(--mtl-zero); stroke-width: 1; stroke-dasharray: 3 3; }
.mtl-line { fill: none; stroke: var(--mtl-text); stroke-opacity: .6; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mtl-axis { fill: var(--mtl-muted); font-size: 10px; }

/* Period table: one row per team, one column per period, the total last. */
.mtl-ptable { width: 100%; border-collapse: collapse; }
.mtl-ptable thead th { padding: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--mtl-muted); text-align: center; }
.mtl-ptable thead th:first-child { text-align: left; }
.mtl-ptable tbody th {
    max-width: 0;
    width: 45%;
    padding: 5px 6px 5px 0;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
.mtl-ptable tbody th span { display: inline-block; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.mtl-ptable tbody th .mtl-dot { margin-right: 8px; vertical-align: middle; }
.mtl-ptable tbody th.win { font-weight: 700; }
.mtl-ptable td { padding: 5px 0; font-size: 14px; font-weight: 500; color: var(--mtl-muted); text-align: center; }
.mtl-ptable td.win { font-weight: 700; color: var(--mtl-text); }
.mtl-ptable td.mtl-tot span {
    display: inline-block;
    min-width: 30px;
    padding: 2px 0;
    border-radius: var(--radius-sm);
    background: var(--mtl-chip);
    color: var(--mtl-mid);
    font-weight: 700;
}
.mtl-ptable td.mtl-tot span.win { background: var(--mtl-win); color: var(--mtl-win-ink); }

.mtl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mtl-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 10px 9px;
    background: var(--mtl-card);
    border: 1px solid var(--mtl-line);
    border-radius: var(--radius-md);
    min-width: 0;
}
.mtl-tile span { font-size: 11px; color: var(--mtl-muted); }
.mtl-tile b { font-size: 17px; }
.mtl-tile b.h { color: var(--mtl-home-ink); }
.mtl-tile b.a { color: var(--mtl-away-ink); }
.mtl-tile small { font-size: 11px; color: var(--mtl-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Match statistics: home value · label · away value, then each side's share. */
.mtl-bars { gap: 12px; }
.mtl-bar { display: flex; flex-direction: column; gap: 5px; }
.mtl-bar-l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.mtl-bar-l span { color: var(--mtl-mid); text-align: center; }
.mtl-bar-t { display: grid; gap: 3px; height: 6px; }
.mtl-bar-t i.h { background: var(--mtl-home); }
.mtl-bar-t i.a { background: var(--mtl-away); }
.mtl-bar-t.none i { background: var(--mtl-zero); }
.mtl-note { font-size: 11px; color: var(--mtl-muted); }
.mtl-center { text-align: center; font-size: 12px; color: var(--mtl-mid); }

/* In the My Bets / ticket popup the template scrolls under the popup's own header. */
/* The popup is capped at the screen (100dvh - 40px) and its header takes 55px. */
.stat-mtl-scroll {
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* Installed app on a phone the popup starts 52px lower and is capped 52px shorter
   (style.css, .stat_timeline_overlay), so the scroll area gives up the same 52px —
   otherwise the end of a long timeline sat below the popup's edge, out of reach. */
@media (display-mode: standalone) and (max-width: 600px) {
    .stat-mtl-scroll { max-height: calc(100dvh - 152px); }
}