/* Match page: table positions under the scoreboard, form, head-to-head, squads */
.scoreboard__rank { justify-self: center; font-size: var(--step--1); font-weight: 700; color: var(--ink-2); text-align: center; }
/* On the sport-coloured header the secondary lines need light ink */
.theme-sport .match-head__context, .theme-sport .match-head__venue, .theme-sport .scoreboard__date, .theme-sport .scoreboard__rank, .theme-sport .scoreboard__dash { color: rgb(255 255 255 / 0.8); }
.theme-sport .match-head__context a { color: #FFFFFF; }

.match-sides { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.match-side { display: grid; gap: var(--space-3); align-content: start; min-inline-size: 0; }
.match-side__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--step-0); font-weight: 800; }
.match-side__title a { color: inherit; text-decoration: none; }
.match-side__title a:hover { text-decoration: underline; }
.match-centre__empty { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.match-centre__note { margin: 0 0 var(--space-3); color: var(--ink-2); font-size: var(--step--1); }

.match-form { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.match-form__item { display: grid; grid-template-columns: auto 2.75rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-block-size: 40px; padding: 4px var(--space-2); border-radius: var(--radius-m); color: var(--ink); text-decoration: none; }
.match-form__item:hover { background: var(--surface-2); }
.match-form__score { font-weight: 800; text-align: center; }
.match-form__opponent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step--1); }
.match-form__date { font-size: 0.75rem; color: var(--ink-2); }

.h2h-tally { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-3); margin: 0 0 var(--space-2); }
.h2h-tally__item { display: grid; justify-items: center; gap: 2px; text-align: center; min-inline-size: 0; }
.h2h-tally__item dt { font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }
.h2h-tally__item dd { margin: 0; font-size: 1.75rem; font-weight: 800; line-height: 1; }
.h2h-tally__item--home dd { color: var(--atlas-green); }
.h2h-tally__item--away dd { color: var(--flag-red); }
.h2h-bar { display: flex; gap: 2px; block-size: 6px; margin-block-end: var(--space-3); border-radius: 999px; overflow: hidden; }
.h2h-bar__part { flex-basis: 0; }
.h2h-bar__part--home { background: var(--atlas-green); }
.h2h-bar__part--draw { background: var(--draw); }
.h2h-bar__part--away { background: var(--flag-red); }
.h2h-list { display: grid; margin: 0; padding: 0; list-style: none; }
.h2h-list li + li { border-block-start: 1px solid var(--line); }
.h2h-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "date date competition" "home score away"; gap: 2px var(--space-3); align-items: center; padding: var(--space-2) 0; color: var(--ink); text-decoration: none; }
.h2h-row:hover .h2h-row__team { text-decoration: underline; }
.h2h-row__date { grid-area: date; font-size: 0.75rem; color: var(--ink-2); }
.h2h-row__competition { grid-area: competition; justify-self: end; font-size: 0.75rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }
.h2h-row__team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step--1); color: var(--ink-2); }
.h2h-row__team--home { grid-area: home; text-align: end; }
.h2h-row__team--away { grid-area: away; }
.h2h-row__team--winner { color: var(--ink); font-weight: 700; }
.h2h-row__score { grid-area: score; font-weight: 800; }

.match-squad .team-squad__list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px var(--space-2); }
.match-squad .team-player { min-block-size: 40px; padding-block: 4px; background: none; }
.match-squad .team-player:hover { background: var(--surface-2); }
.match-squad .team-player__number { inline-size: 28px; block-size: 28px; background: var(--surface-2); }

/* Competition page: one round at a time */
.matchday-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); }
.matchday-nav__current { font-weight: 800; text-align: center; }
.matchday-nav__step { min-inline-size: 36px; min-block-size: 36px; background: var(--surface-2); font-size: 1.25rem; line-height: 1; }
.matchday-nav__step[aria-disabled="true"] { opacity: 0.35; }