/* Match details from the data provider: scorers under the scoreboard, timeline, statistics, line-ups, TV */
.match-scorers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-2); font-size: var(--step--1); }
.match-scorers__side { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; align-content: start; }
.match-scorers__side--home { text-align: end; justify-items: end; }
.match-scorers__side li { display: inline-flex; align-items: center; gap: 6px; }
.match-scorers__side a { color: inherit; }
.match-scorers__icon { inline-size: 14px; block-size: 14px; flex: none; }
.theme-sport .match-scorers { color: rgb(255 255 255 / 0.92); }

.incident-mark { display: inline-grid; place-items: center; flex: none; inline-size: 18px; block-size: 18px; }
.incident-mark .icon { inline-size: 16px; block-size: 16px; }
.incident-mark--card { inline-size: 11px; block-size: 15px; border-radius: 2px; }
.incident-mark--yellow { background: #F4C20D; }
.incident-mark--red { background: #D7263D; }
.incident-mark--sub { font-size: 0.875rem; font-weight: 800; color: var(--atlas-green); }
.incident-mark--other { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ink-3, var(--ink-2)); }

.match-timeline { display: grid; margin: 0; padding: 0 var(--space-4) var(--space-3); list-style: none; }
.match-timeline__item { display: grid; grid-template-columns: 3rem 22px minmax(0, 1fr); align-items: center; gap: var(--space-2); min-block-size: 40px; padding-block: 4px; }
.match-timeline__item + .match-timeline__item { border-block-start: 1px solid var(--line); }
.match-timeline__item--away { background: linear-gradient(to left, color-mix(in srgb, var(--flag-red) 5%, transparent), transparent 60%); }
:root[dir="rtl"] .match-timeline__item--away { background: linear-gradient(to right, color-mix(in srgb, var(--flag-red) 5%, transparent), transparent 60%); }
.match-timeline__minute { font-weight: 800; color: var(--ink-2); text-align: center; }
.match-timeline__text { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; min-inline-size: 0; font-size: var(--step--1); }
.match-timeline__text a { color: inherit; }
.match-timeline__note { color: var(--ink-2); font-size: 0.8125rem; }

.match-stats { display: grid; gap: var(--space-3); margin: 0; padding: 0 var(--space-4) var(--space-4); }
.match-stats__row { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4rem; grid-template-areas: "home label away" "bar bar bar"; gap: 4px var(--space-2); align-items: center; }
.match-stats__label { grid-area: label; text-align: center; font-size: var(--step--1); color: var(--ink-2); }
.match-stats__value { margin: 0; font-weight: 800; }
.match-stats__value--home { grid-area: home; }
.match-stats__value--away { grid-area: away; text-align: end; }
.match-stats__bar { grid-area: bar; display: flex; gap: 3px; margin: 0; block-size: 6px; }
.match-stats__part { flex-basis: 0; border-radius: 999px; }
.match-stats__part--home { background: var(--atlas-green); }
.match-stats__part--away { background: var(--flag-red); }

.match-lineup__group { margin: var(--space-2) 0 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.match-lineup__formation { margin-inline-start: auto; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.match-lineup { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.match-lineup__player { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-block-size: 36px; }
.match-lineup__number { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--radius-s, 6px); background: var(--surface-2); font-size: 0.8125rem; font-weight: 800; }
.match-lineup__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step--1); }
.match-lineup__name a { color: inherit; }
.match-lineup__position { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }

.match-watch { display: grid; gap: var(--space-3); }
.match-watch p { margin: 0; }
.match-watch__channels { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.match-watch__channels li { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: var(--step--1); }
.match-watch__country { color: var(--ink-2); font-size: 0.75rem; }

/* Player page: this season from the match details, honours */
.player-season__numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-3); }
.player-season__numbers div { padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--surface-2); }
.player-season__numbers dt { font-size: 0.75rem; color: var(--ink-2); }
.player-season__numbers dd { margin: 0; font-size: var(--step-2, 1.5rem); font-weight: 800; }
.player-season__subtitle { margin: var(--space-3) 0 var(--space-2); font-size: var(--step-0); font-weight: 800; }
.player-season__matches, .player-season__honours { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.player-season__match { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-block-size: 40px; color: var(--ink); text-decoration: none; font-size: var(--step--1); }
.player-season__match:hover .player-season__teams { text-decoration: underline; }
.player-season__match time { color: var(--ink-2); font-size: 0.75rem; }
.player-season__teams { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-season__goals { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }
.player-season__goals .icon { inline-size: 16px; block-size: 16px; }
.player-season__honours li { font-size: var(--step--1); padding-block: 4px; }
.player-hero__photo { inline-size: 96px; block-size: 96px; border-radius: 50%; object-fit: cover; background: rgb(255 255 255 / 0.15); }

/* Red cards beside a side's name in match lists */
.red-cards { display: inline-flex; gap: 2px; flex: none; }
.red-cards .incident-mark--card { display: inline-block; inline-size: 8px; block-size: 11px; border-radius: 1px; }
.match-scorers__pending { opacity: 0.75; font-style: italic; }