/*
 * Score, fixture, ladder and match-detail components.
 *
 * Built entirely on the tokens in /theme.css - no colour, radius or spacing
 * value is invented here. A page is a stack of panels; a panel holds rows,
 * tables or a chart; nothing else.
 */

/* =============================================================== the panel */

.panel {
    margin: 0 0 var(--gap-5);
    padding: var(--gap-4) var(--gap-5) var(--gap-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-2) var(--gap-4);
    margin-bottom: var(--gap-4);
}

.panel-head h2 {
    margin: 0;
}

.panel-sub {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-mute);
}

.panel > .score-board:last-child,
.panel > .ladder-scroll:last-child {
    margin-bottom: 0;
}

.note {
    margin: 0 0 var(--gap-5);
    padding: var(--gap-3) var(--gap-4);
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--text-mute);
}

.table-scroll {
    overflow-x: auto;
}

/* ============================================================ match cards */

.score-board {
    display: grid;
    gap: var(--gap-4);
    margin: 0 0 var(--gap-5);
}

.score-board .match-day:first-child .match-day-heading {
    margin-top: 0;
}

.score-board.is-single {
    max-width: 560px;
}

.match-day-heading {
    margin: var(--gap-3) 0 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/* Two across on a wide screen. One match stretched over a full desktop column
   puts a hundred empty pixels between a team and its own score. */
.match-day {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
    gap: var(--gap-2);
}

.match-day-heading {
    grid-column: 1 / -1;
}

/* The app's layout, and the only one: names on their own line, the badge and
   the score under each, then a centred state flanked by one progress track per
   half while the match is live. */
.match-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "home-name  vs away-name"
        "home-score vs away-score"
        "status     status status"
        "venue      venue  venue";
    align-items: center;
    column-gap: var(--gap-3);
    row-gap: var(--gap-1);
    padding: 0.85rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}

a.match-card:hover {
    background: var(--surface-3);
    border-color: var(--line-2);
    color: inherit;
}

.score-line {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    min-width: 0;
}

.score-line[data-side="home"] { grid-area: home-score; }

.score-line[data-side="away"] {
    grid-area: away-score;
    flex-direction: row-reverse;
}

.match-team {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-team[data-side="home"] { grid-area: home-name; }

.match-team[data-side="away"] {
    grid-area: away-name;
    flex-direction: row-reverse;
}

.match-team.is-winner {
    color: var(--text);
}

/* Always in the markup, shown only for the winner, so scores.js settles a
   result by toggling one class rather than building an element. */
.win-tick {
    display: none;
}

.match-team.is-winner .win-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.7em;
    font-weight: 800;
    line-height: 1;
}

.match-vs {
    grid-area: vs;
    align-self: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-mute);
}

.score-value {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-dim);
}

.score-line.is-winner .score-value {
    color: var(--text);
}

.match-middle {
    grid-area: status;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-1);
    min-width: 0;
    margin-top: var(--gap-2);
}

.match-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text-dim);
    white-space: nowrap;
}

.match-pill.is-live {
    background: var(--live-wash);
    color: var(--live);
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
    animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

.match-progress {
    flex: 1 1 0;
    min-width: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--line-2);
    overflow: hidden;
}

.match-progress span {
    display: block;
    height: 100%;
    background: var(--live);
    transition: width 0.4s ease;
}

.match-venue {
    grid-area: venue;
    margin: var(--gap-1) 0 0;
    font-size: 0.75rem;
    color: var(--text-mute);
    text-align: center;
}

/* ==================================================== competition switcher */

.comp-switch {
    display: flex;
    gap: var(--gap-1);
    margin-bottom: var(--gap-4);
    padding: var(--gap-1);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    overflow-x: auto;
    scrollbar-width: none;
    width: fit-content;
    max-width: 100%;
}

.comp-switch::-webkit-scrollbar {
    display: none;
}

.comp-chip {
    padding: 0.35rem 0.9rem;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--text-dim);
    white-space: nowrap;
}

a.comp-chip:hover {
    background: var(--surface-3);
    color: var(--text);
}

.comp-chip[aria-current] {
    background: var(--brand);
    color: var(--on-brand);
}

/* ========================================================= local navigation */

.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 var(--gap-5);
}

.section-nav a,
.section-nav span {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 650;
}

.section-nav a:hover {
    background: var(--surface-2);
    border-color: var(--line-2);
    color: var(--text);
}

.section-nav [aria-current] {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--text);
}

/* Every scores page exposes the ordered stage list as real links. */
.competition-round-picker {
    margin: 0 0 var(--gap-5);
}

.competition-round-picker-track {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.35rem;
    scrollbar-width: none;
}

.competition-round-picker-track::-webkit-scrollbar {
    display: none;
}

.competition-round-picker a,
.competition-round-picker span {
    flex: 0 0 auto;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 650;
    white-space: nowrap;
}

.competition-round-picker a:hover {
    background: var(--surface-2);
    border-color: var(--line-2);
    color: var(--text);
}

.competition-round-picker [aria-current] {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--text);
}

.season-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 var(--gap-3);
}

.season-picker-label {
    margin-right: var(--gap-1);
    color: var(--text-mute);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.season-picker a,
.season-picker [aria-current] {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 650;
}

.season-picker a:hover {
    background: var(--surface-2);
    border-color: var(--line-2);
    color: var(--text);
}

.season-picker [aria-current] {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--text);
}

/* Previous and next remain available alongside the complete stage picker. */
.round-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: var(--gap-5);
}

.round-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.round-step[rel="next"] {
    margin-left: auto;
}

.round-step {
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 650;
}

.round-step:hover {
    background: var(--surface-2);
    border-color: var(--line-2);
    color: var(--text);
}

.round-step.is-index {
    color: var(--accent);
}

/* ============================================================ score centre */

.score-centre-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 20rem));
    gap: var(--gap-2);
}

.score-centre-groups {
    display: grid;
    gap: var(--gap-5);
}

.score-centre-context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem;
    margin: 0 0 var(--gap-2);
}

.score-centre-context h3 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.score-centre-context a {
    color: var(--accent);
}

.score-centre-context h3 span::before {
    content: "·";
    margin-right: 0.45rem;
    color: var(--text-mute);
}

.score-centre-more {
    font-size: 0.82rem;
    font-weight: 650;
    white-space: nowrap;
}

.score-centre-day {
    margin: var(--gap-3) 0 0;
}

.score-centre-day:first-of-type {
    margin-top: 0;
}

.score-centre-day h4 {
    margin: 0 0 var(--gap-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.panel-link {
    margin: var(--gap-3) 0 0;
    font-size: 0.9rem;
    font-weight: 650;
}

/* ==================================================================== byes */

.bye-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
}

.bye-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    font-size: 0.82rem;
}

.bye-tile:hover {
    background: var(--surface-3);
    border-color: var(--line-2);
    color: var(--text);
}

/* ================================================================== ladder */

.ladder-scroll {
    overflow-x: auto;
    margin: 0 0 var(--gap-5);
}

table.ladder {
    width: 100%;
    min-width: 660px;
    border-collapse: collapse;
}

table.ladder th,
table.ladder td {
    padding: 0.6rem 0.4rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-dim);
}

table.ladder thead th {
    padding-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-mute);
    border-bottom: 1px solid var(--line-2);
}

table.ladder tbody tr {
    border-bottom: 1px solid var(--line);
}

table.ladder tbody tr:hover {
    background: var(--surface-2);
}

/* The eighth line is the only structural fact a ladder carries beyond order,
   so it is the only row that gets a rule of its own. */
table.ladder tbody tr.is-finals-cut {
    border-bottom: 2px solid var(--line-2);
}

table.ladder tbody tr.is-live {
    background: var(--live-wash);
}

.ladder-position {
    width: 2.4rem;
    font-weight: 700;
    color: var(--text-mute);
}

tr.is-top-four .ladder-position {
    color: var(--brand);
}

table.ladder thead th.ladder-team-head {
    text-align: left;
    padding-left: var(--gap-2);
}

.ladder-team {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    text-align: left;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
}

.ladder-team a {
    color: inherit;
}

.ladder-team a:hover {
    color: var(--brand-bright);
}

.ladder-points {
    font-weight: 800;
    color: var(--text);
}

.ladder-move {
    width: 2.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-mute);
}

.ladder-move.is-up { color: var(--brand); }
.ladder-move.is-down { color: var(--loss); }

.ladder-form {
    padding-left: var(--gap-3) !important;
}

.ladder-team .live-dot {
    margin-left: 0.3rem;
}

/* ============================================================ form and rank */

.form-guide {
    display: inline-flex;
    gap: 2px;
    vertical-align: middle;
}

.form-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--on-brand);
}

.form-pill.is-w { background: var(--brand); }
.form-pill.is-l { background: var(--loss); color: #1A0505; }
.form-pill.is-d { background: var(--warn); color: #17110A; }

.form-strip {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2);
}

.form-result {
    display: grid;
    justify-items: center;
    gap: var(--gap-1);
    flex: 1 1 92px;
    min-width: 92px;
    max-width: 150px;
    padding: var(--gap-3) var(--gap-2);
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.form-round {
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-mute);
    white-space: nowrap;
}

.form-score {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.form-letter {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.form-result.is-w .form-letter { color: var(--brand); }
.form-result.is-l .form-letter { color: var(--loss); }
.form-result.is-d .form-letter { color: var(--warn); }

.standing-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--gap-2);
}

.standing-figures > div {
    display: grid;
    gap: 0.1rem;
    padding: var(--gap-3) var(--gap-2);
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line);
    text-align: center;
}

.standing-figures .standing-rank {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
}

.standing-value {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
}

.standing-rank .standing-value {
    color: var(--brand-bright);
}

.standing-label {
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.standing-form {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-top: var(--gap-4);
    color: var(--text-dim);
}

.next-line,
.live-lede {
    color: var(--text-dim);
}

/* =================================================================== tabs */

.match-tabs {
    margin-bottom: var(--gap-5);
}

.tab-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tab-strip {
    display: flex;
    gap: 0.15rem;
    margin-bottom: var(--gap-5);
    border-bottom: 1px solid var(--line);
}

.tab-strip label {
    padding: 0.6rem 1.1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--text-mute);
    cursor: pointer;
    user-select: none;
}

.tab-strip label:hover {
    color: var(--text-dim);
}

/* The checked segment marks its own label and hides every panel but its own,
   by position rather than by id, so the match page and the ladder share one set
   of rules. A fourth segment anywhere needs a fourth line in each block. */
.tab-radio:nth-of-type(1):checked ~ .tab-strip label:nth-child(1),
.tab-radio:nth-of-type(2):checked ~ .tab-strip label:nth-child(2),
.tab-radio:nth-of-type(3):checked ~ .tab-strip label:nth-child(3) {
    color: var(--text);
    border-bottom-color: var(--brand);
}

.tab-radio:nth-of-type(1):focus-visible ~ .tab-strip label:nth-child(1),
.tab-radio:nth-of-type(2):focus-visible ~ .tab-strip label:nth-child(2),
.tab-radio:nth-of-type(3):focus-visible ~ .tab-strip label:nth-child(3) {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.tab-radio:nth-of-type(1):checked ~ .tab-panels > .tab-panel:not(:nth-child(1)),
.tab-radio:nth-of-type(2):checked ~ .tab-panels > .tab-panel:not(:nth-child(2)),
.tab-radio:nth-of-type(3):checked ~ .tab-panels > .tab-panel:not(:nth-child(3)) {
    display: none;
}

/* The ladder's three readings sit inside one panel, so its strip needs less air
   under it than the match page's, which separates whole panels. */
.ladder-tabs .tab-strip {
    margin-bottom: var(--gap-4);
}

.tab-panel > .ladder-scroll:last-child {
    margin-bottom: 0;
}

.tab-note {
    margin: var(--gap-3) 0 0;
    font-size: 0.82rem;
    color: var(--text-mute);
}

/* ============================================================== score worm */

.worm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4);
    margin-bottom: var(--gap-3);
    font-size: 0.82rem;
    color: var(--text-dim);
}

.worm-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.worm-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.worm-frame {
    display: flex;
    gap: var(--gap-2);
}

.worm-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px;
    min-width: 1.75rem;
    font-size: 0.68rem;
    color: var(--text-mute);
    text-align: right;
}

.worm-plot {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Stretched to the page width, so nothing inside it may be text: the strokes
   opt out of scaling and the labels live in HTML alongside. */
.worm-chart {
    display: block;
    width: 100%;
    height: 200px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.worm-line {
    stroke: var(--text);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.worm-zero {
    stroke: var(--line-2);
    stroke-width: 1;
    stroke-dasharray: 5 5;
    vector-effect: non-scaling-stroke;
}

.worm-half {
    stroke: var(--line-2);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.worm-ticks {
    position: relative;
    height: 1.1rem;
    margin-top: var(--gap-1);
}

.worm-ticks span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: var(--text-mute);
}

.worm-ticks span:first-child {
    transform: none;
}

/* =========================================================== scoring events */

.events {
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.event {
    display: grid;
    grid-template-columns: 3rem 22px 1fr auto;
    align-items: center;
    gap: var(--gap-3);
    padding: 0.6rem 0.85rem;
    background: var(--surface-2);
    border-left: 3px solid var(--line-2);
}

.event + .event {
    border-top: 1px solid var(--line);
}

.event-minute {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-mute);
}

.event-badge {
    display: flex;
}

.event-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.event-player {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--text);
}

.event-type {
    font-size: 0.75rem;
    color: var(--text-mute);
}

.event-score {
    font-size: 0.92rem;
    color: var(--text-mute);
    white-space: nowrap;
}

.event-score b {
    color: var(--text);
}

/* ================================================== tables inside a match */

.player-blocks,
.lineup-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-5);
}

.player-block h3,
.lineup-block h3 {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    margin-bottom: var(--gap-3);
    font-size: 0.92rem;
    color: var(--text);
}

.period-table,
.player-table {
    width: 100%;
    border-collapse: collapse;
}

.period-table th,
.period-table td,
.player-table th,
.player-table td {
    padding: 0.55rem 0.4rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.period-table thead th,
.player-table thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-mute);
    border-bottom: 1px solid var(--line-2);
}

.period-table tbody tr,
.player-table tbody tr {
    border-bottom: 1px solid var(--line);
}

.period-team,
.player-name {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    text-align: left;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
}

.player-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* ============================================================== team stats */

.team-stats-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gap-4);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}

.team-stats-head > span {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
}

.team-stat-list {
    list-style: none;
    display: grid;
    gap: var(--gap-4);
}

.team-stat {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    align-items: center;
    gap: var(--gap-2);
}

.team-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.team-stat-value:first-child { text-align: left; }
.team-stat > .team-stat-value:nth-child(3) { text-align: right; }

.team-stat-label {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-mute);
}

.team-stat-bar {
    grid-column: 1 / -1;
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--line);
}

.team-stat-bar span {
    display: block;
    height: 100%;
}

/* ================================================================= lineups */

.lineup-block h4 {
    margin: var(--gap-4) 0 var(--gap-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.lineup-list {
    list-style: none;
}

.lineup-list li {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    align-items: baseline;
    gap: var(--gap-2);
    padding: 0.3rem 0;
    font-size: 0.88rem;
    color: var(--text-dim);
    border-bottom: 1px solid var(--line);
}

.lineup-list li:last-child {
    border-bottom: 0;
}

.shirt {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-mute);
}

.lineup-name {
    color: var(--text);
}

/* =============================================================== fact grid */

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-2);
}

.fact-grid > div {
    padding: var(--gap-3) var(--gap-4);
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.fact-grid dt {
    margin-bottom: 0.15rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.fact-grid dd {
    font-size: 0.92rem;
    color: var(--text);
}

/* Match detail follows the app's InfoRow treatment: one fact per line, with
   the label above its value and a divider separating adjacent rows. Keep the
   multi-column fact grid for season summaries and ladder notes. */
.match-info-list > div {
    padding: var(--gap-2) 0;
}

.match-info-list > div + div {
    border-top: 1px solid var(--line);
}

.match-info-list dt {
    margin-bottom: 0.15rem;
    font-size: 0.76rem;
    font-weight: 650;
    color: var(--text-mute);
}

.match-info-list dd {
    font-size: 0.92rem;
    color: var(--text);
}

/* ========================================================= injected blocks */

.live-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-3);
    margin-bottom: var(--gap-4);
}

.live-heading h2 {
    margin: 0;
}

.live-flag {
    display: inline-block;
    margin-left: var(--gap-2);
    padding: 0.1rem 0.5rem;
    border-radius: var(--r-sm);
    background: var(--live-wash);
    color: var(--live);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    vertical-align: middle;
}

.live-more {
    font-size: 0.85rem;
    font-weight: 650;
    white-space: nowrap;
}

.team-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-3);
    margin-bottom: var(--gap-4);
}

/* ============================================================= the app row */

.app-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-4) var(--gap-5);
    margin: var(--gap-6) 0 var(--gap-5);
    padding: var(--gap-4) var(--gap-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.app-note img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.app-note-lead {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    flex: 1 1 320px;
    min-width: 0;
}

.app-note-copy {
    min-width: 0;
}

.app-note-copy h2 {
    margin-bottom: 0.15rem;
    font-size: 0.95rem;
}

.app-note-copy p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-mute);
}

.app-note .store-badges {
    flex: 0 0 auto;
    gap: var(--gap-3);
}

/* Apple's badge fills its image. Google's bakes a transparent margin into all
   four edges, so at a matched image height it draws a third smaller than
   Apple's. Each anchor is the size of the visible badge and crops what the file
   puts around it, which is what keeps the two the same height and the gap
   between them even. */
.app-note .store-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    overflow: hidden;
}

.app-note .store-badge img {
    display: block;
    flex-shrink: 0;
    height: 40px;
    width: auto;
    margin: 0;
    border-radius: 0;
}

.app-note .google-play-badge {
    width: 134px;
}

.app-note .google-play-badge img {
    height: 60px;
    max-width: none;
}

/* ========================================================== the match page */

/* Generated score pages use the site's standard measure. This keeps their
   parent-return link aligned with the content whether the reader is at the
   competition, season, round or match level. */
main > .breadcrumbs,
main > article.wide {
    max-width: var(--page);
    margin-inline: auto;
}

article.wide.match-page > .score-board.is-single {
    margin-inline: auto;
}

article.wide.team-page .score-board.is-single {
    max-width: none;
}

/* ================================================================ utility */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================= responsive */

@media (max-width: 640px) {
    .panel {
        padding: var(--gap-4);
        border-radius: var(--r);
    }

    .match-card {
        padding: 0.75rem 0.85rem;
    }

    .match-team { font-size: 0.88rem; }
    .score-value { font-size: 1.8rem; }

    .event {
        grid-template-columns: 2.5rem 22px 1fr auto;
        gap: var(--gap-2);
    }

    .worm-chart,
    .worm-axis { height: 160px; }

    .tab-strip label {
        flex: 1;
        text-align: center;
        padding: 0.6rem 0.4rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 430px) {
    .match-card .team-badge {
        width: 24px;
        height: 24px;
    }
}