/* The UI design language (docs/engineering/ui-design-language.md): its tokens on :root, and its
   patterns scoped to the .pitch root that PitchPage renders on every page. */

/* Archivo variable (wdth 62–125, wght 100–900), self-hosted from @fontsource-variable/archivo
   5.2.8 (files/archivo-latin-wdth-normal.woff2 and archivo-latin-ext-wdth-normal.woff2), with
   the SIL Open Font License beside the files in fonts/OFL.txt. */
@font-face {
    font-family: "Archivo";
    src: url(fonts/archivo-latin.woff2) format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    src: url(fonts/archivo-latin-ext.woff2) format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: dark;
    --night: #07100f;
    --sheet: #101b19;
    --sheet-hover: #152320;
    --chalk: #f6f7f2;
    --chalk-2: #a7b0ad;
    --chalk-3: #899390;
    --rule: #2a3935;
    --up: #b9f244;
    --down: #ff8a7a;
    --live: #ffc857;
    --zone: 185 242 68;
}

* { box-sizing: border-box; }

/* The footer stays at the bottom of a short page. */
body {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    margin: 0;
    background: var(--night);
    color: var(--chalk);
}

button, select, a, summary { font: inherit; }

/* Navigation moves focus to the heading for screen readers; it is not a tab stop, so no ring. */
:is(h1, main)[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pitch {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    background: var(--night);
    color: var(--chalk);
    font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.9375rem;
    font-stretch: 100%;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.pitch :focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.pitch a { color: inherit; }
.pitch .skip-link {
    position: fixed;
    inset: 0.5rem auto auto 50%;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--chalk);
    color: var(--night);
    font-weight: 600;
    text-decoration: none;
    transform: translate(-50%, -150%);
}

.pitch .skip-link:focus { transform: translateX(-50%); }

/* Site band: the wordmark with its three-bar zone mark, then two destinations. */
.pitch .site-band {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.85rem clamp(1rem, 4vw, 3rem);
    border-block-end: 1px solid var(--rule);
}

.pitch .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-stretch: 70%;
    font-weight: 800;
    text-decoration: none;
}

/* The mark is the zone stripe itself: three steps of one hue. */
.pitch .brand > .brand-mark {
    display: block;
    inline-size: 0.9rem;
    block-size: 1.1rem;
    background: linear-gradient(90deg,
        rgb(var(--zone)) 0 30%, transparent 30% 35%,
        rgb(var(--zone) / 0.6) 35% 65%, transparent 65% 70%,
        rgb(var(--zone) / 0.3) 70% 100%);
}

.pitch .site-band nav { display: flex; gap: 1.25rem; margin-inline-start: auto; }
.pitch .site-band nav a { padding-block: 0.6rem; color: var(--chalk-2); font-weight: 600; text-decoration: none; }
.pitch .site-band nav a:hover { color: var(--chalk); }
.pitch .site-band nav a[aria-current="page"] { color: var(--chalk); box-shadow: inset 0 -2px rgb(var(--zone)); }

.pitch .pitch-main { inline-size: min(100% - 2rem, 76rem); margin-inline: auto; padding-block: 0.75rem 4rem; overflow-wrap: anywhere; }
.pitch .pitch-main:focus { outline: none; }

.pitch .site-foot {
    margin-block-start: auto;
    padding: 1.5rem clamp(1rem, 4vw, 3rem);
    border-block-start: 1px solid var(--rule);
    color: var(--chalk-3);
    font-size: 0.8125rem;
}

.pitch .site-foot p { margin: 0; }

/* Title band: heading, Ranking Cycle, live status and finder on one line; the note under them. */
.pitch .title-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding-block: 0.5rem 1rem;
}

.pitch .title-heading { display: grid; gap: 0.2rem; }

.pitch .title-band h1 {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-stretch: 70%;
    font-weight: 800;
    line-height: 1;
}

.pitch .title-cycle { display: flex; flex-wrap: wrap; gap: 0 0.75rem; color: var(--chalk-3); font-size: 0.8125rem; }
.pitch .title-cycle strong { color: var(--chalk-2); font-weight: 600; }
.pitch .title-cycle a { text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.pitch .title-cycle a:hover { color: var(--chalk); }

.pitch .access-list-note { flex-basis: 100%; margin: 0; color: var(--chalk-2); font-size: 0.8125rem; }

/* Live status: the page's only animation, one slow pulse in amber. */
.pitch .live-sticker { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--live); font-weight: 600; }
.pitch .live-dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--live); animation: pitch-live-pulse 2s ease-in-out infinite; }

@keyframes pitch-live-pulse { 50% { opacity: 0.35; } }

/* Finder: "Go to a Country" as the select's first option, then Go. */
.pitch .ranking-finder { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0 auto; }
.pitch .ranking-finder div { display: flex; gap: 0.4rem; }

/* Keep the GET fallback visible until the page script confirms this form is enhanced. */
.pitch .ranking-finder[data-ranking-finder-enhanced] [data-ranking-finder-submitter] { display: none; }

.pitch select, .pitch .ranking-finder button {
    block-size: 2.5rem;
    min-block-size: 2.5rem;
    border: 1px solid var(--rule);
    border-radius: 0.25rem;
    background: var(--sheet);
    color: var(--chalk);
    font: inherit;
    font-weight: 500;
}

.pitch select { flex: 0 1 16rem; min-inline-size: 0; max-inline-size: 100%; padding: 0 0.6rem; }
.pitch .ranking-finder button { padding-inline: 0.9rem; cursor: pointer; }
.pitch select:hover, .pitch .ranking-finder button:hover { border-color: var(--chalk-3); background: var(--sheet-hover); }

.pitch .find-result { inline-size: fit-content; max-inline-size: 70ch; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); background: var(--sheet); }

/* Zones: each opens with the white rule, its rail says what it is worth, its rows follow. */
.pitch .zone {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 0 1.5rem;
    padding-block: 1.25rem;
    border-block-start: 2px solid var(--chalk);
}

.pitch .zone-rail {
    align-self: start;
    position: sticky;
    inset-block-start: 1rem;
    padding-inline-start: 0.9rem;
    box-shadow: inset 0.3rem 0 rgb(var(--zone) / var(--zone-alpha, 0.08));
}

.pitch .zone-rail :is(h2, h3) { margin: 0 0 0.4rem; font-size: 1.6rem; font-stretch: 70%; font-weight: 800; line-height: 1.05; }
.pitch .zone-consequence { margin: 0 0 0.6rem; color: var(--chalk-2); }

/* Zone info: the last word keeps the icon on its line, and the 24 px target overhangs the line
   box instead of opening a gap under a wrapped consequence. */
.pitch .zone-consequence-end { white-space: nowrap; }

.pitch .zone-info {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: -0.25rem 0 -0.25rem 0.15rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--chalk);
    vertical-align: middle;
    cursor: pointer;
}

.pitch .zone-info:hover { color: rgb(var(--zone)); }
.pitch .zone-info svg { inline-size: 1rem; block-size: 1rem; }

/* Without scripts the popout opens centred; the page script places it under its button. */
.pitch .zone-popout {
    position: fixed;
    inset: 0;
    margin: auto;
    inline-size: min(24rem, calc(100vw - 2rem));
    block-size: fit-content;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rule);
    border-inline-start: 0.3rem solid rgb(var(--zone));
    background: var(--sheet);
    color: var(--chalk);
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: start;
}

.pitch .zone-popout p { margin: 0; }
.pitch .zone-popout .zone-popout-title { margin-block-end: 0.4rem; font-weight: 600; }

/* A browser without popovers shows the whole consequence under its first sentence instead. */
@supports not selector(:popover-open) {
    .pitch .zone-info { display: none; }
    .pitch .zone-popout { position: static; inline-size: auto; margin: 0 0 0.6rem; padding: 0; border: 0; background: none; color: var(--chalk-2); font-size: inherit; }
    .pitch .zone-popout .zone-popout-title { display: none; }
}
.pitch .zone-margin { margin: 0; color: var(--chalk-3); font-size: 0.875rem; }
.pitch .zone-margin b { color: var(--chalk); }

.pitch .zone-rows { align-self: start; inline-size: 100%; table-layout: fixed; border-collapse: collapse; }

/* The column headers name the cells for assistive technology; the rail heads the zone visually. */
.pitch .zone-rows thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pitch .zone-rows th, .pitch .zone-rows td {
    padding: 0.4rem 0.6rem;
    border: 0;
    font-weight: inherit;
    text-align: start;
    vertical-align: baseline;
}

.pitch .zone-rows .position-column { inline-size: 2.5rem; }
.pitch .zone-rows .value-column { inline-size: 6rem; }
.pitch .zone-rows .trend-column { inline-size: 9rem; }

.pitch .country-group { border-block-end: 1px solid var(--rule); }
.pitch .country-group:hover, .pitch .country-group.is-selected { background: var(--sheet-hover); }
.pitch .country-group.is-open { background: var(--sheet); }
.pitch .country-group.is-selected > tr:first-child { outline: 2px solid rgb(var(--zone)); outline-offset: -2px; scroll-margin-block-start: 6rem; }
.pitch .country-group.is-selected > tr:first-child:focus { outline-color: var(--chalk); }

.pitch .zone-rows .position, .pitch .value-trigger { font-size: 1.125rem; font-stretch: 70%; font-weight: 750; }
.pitch .zone-rows .name { font-weight: 600; text-align: start; }
.pitch .zone-rows .name a { text-decoration: none; }
.pitch .zone-rows .name a:hover { text-decoration: underline; }
.pitch .zone-rows .value, .pitch .zone-rows .trend { text-align: end; }
.pitch .zone-rows .trend { font-weight: 600; }
.pitch .zone-rows .trend > span + span { margin-inline-start: 0.6rem; }
.pitch .up { color: var(--up); }
.pitch .down { color: var(--down); }
.pitch .new { color: var(--chalk-3); }

/* Value trigger: a link without scripts, a disclosure button with them; both underline dotted. */
.pitch .value-trigger {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--chalk);
    cursor: pointer;
    text-decoration: underline dotted var(--chalk-3);
    text-underline-offset: 0.3em;
}

.pitch .value-trigger:hover { text-decoration-color: rgb(var(--zone)); }
.pitch .value-trigger[aria-expanded="true"] { text-decoration: underline solid rgb(var(--zone)); text-decoration-thickness: 2px; }

/* Season preview: a mouse-only popover, placed from the trigger by the page script. */
.pitch .season-preview {
    position: fixed;
    inset: auto;
    margin: 0;
    min-inline-size: 16rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--rule);
    border-inline-start: 0.3rem solid rgb(var(--zone));
    background: var(--sheet);
    color: var(--chalk);
    font-size: 0.875rem;
    text-align: start;
}

.pitch .season-preview-title { margin: 0 0 0.5rem; font-weight: 600; }
.pitch .season-preview dl { display: grid; gap: 0.2rem; margin: 0; }
.pitch .season-preview dl > div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.75rem; color: var(--chalk-3); }
.pitch .season-preview dd { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; align-items: center; gap: 0.6rem; margin: 0; color: var(--chalk); text-align: end; }
.pitch .season-preview .season-bar { block-size: 0.45rem; inline-size: calc(var(--share) * 100%); background: var(--chalk-3); }
.pitch .season-preview .is-latest dt { color: var(--chalk); }
.pitch .season-preview .is-latest .season-bar { background: rgb(var(--zone)); }

/* Detail panel: under its row, ahead of the match lines. */
.pitch .detail-row > td { padding-block: 0 0.5rem; }

.pitch .detail-panel {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1fr);
    gap: 0.75rem 2rem;
    padding: 0.9rem 1rem;
    border-inline-start: 0.3rem solid rgb(var(--zone));
    background: var(--night);
    font-size: 0.875rem;
    text-align: start;
}

.pitch .season-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pitch .season-columns li { display: grid; justify-items: center; gap: 0.2rem; text-align: center; }
.pitch .season-columns .season-bar { inline-size: 70%; block-size: calc(0.25rem + var(--share) * 3.5rem); background: var(--chalk-3); }
.pitch .season-columns .is-latest .season-bar { background: rgb(var(--zone)); }
.pitch .season-columns b { font-stretch: 70%; font-weight: 700; }
.pitch .season-columns span:last-child { color: var(--chalk-3); font-size: 0.75rem; }

.pitch .detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; margin: 0; }
.pitch .detail-facts dt { color: var(--chalk-3); font-size: 0.8125rem; }
.pitch .detail-facts dd { margin: 0; font-weight: 600; }
.pitch .detail-link { grid-column: 1 / -1; margin: 0; }

/* Match lines: minute, score with the row's own Club in chalk-2, Goal in amber, standing, gain. */
.pitch .inline-match-row > td { padding-block: 0 0.35rem; color: var(--chalk-3); font-size: 0.8125rem; line-height: 1.45; }
.pitch .inline-match-row > td.inline-match-minute { color: var(--chalk-2); font-size: 0.8125rem; font-weight: 600; text-align: start; }
.pitch .inline-match { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; color: var(--chalk-3); }
.pitch .inline-match .match-clock { display: none; }
.pitch .inline-match-score strong { color: var(--chalk); font-weight: 700; }
.pitch .inline-match-own { color: var(--chalk-2); }
.pitch .inline-match-marks { display: inline-flex; gap: 0.6rem; }
.pitch .live-match-new { padding: 0 0.3rem; background: var(--live); color: var(--night); font-size: 0.75rem; font-weight: 700; }
.pitch .match-standing { font-weight: 600; }
.pitch .match-standing-winning { color: var(--up); }
.pitch .match-standing-drawing { color: var(--chalk-3); }
.pitch .match-standing-losing { color: var(--down); }
.pitch .inline-match-gain { color: var(--up); font-size: 0.8125rem; text-align: end; }

/* Lines an incomplete publication cannot place between its rows. */
.pitch .lines-beyond { padding-block: 1rem; border-block-start: 2px solid var(--chalk); color: var(--chalk-2); }
.pitch .lines-beyond b { color: var(--chalk); }

/* Country page: the live race, the places the Country holds, then its seasons and Clubs. */
.pitch .country-race > h2, .pitch .country-places > h2, .pitch .country-performance-spot > h2, .pitch .country-seasons > h2, .pitch .country-clubs > h2 {
    margin: 1.75rem 0 0.75rem;
    font-size: 1.25rem;
    font-stretch: 85%;
    font-weight: 750;
}
.pitch .race-body { display: grid; align-content: start; gap: 0.75rem; }
.pitch .row-note, .pitch .suspension-note { color: var(--chalk-2); font-size: 0.8125rem; font-weight: 400; }
.pitch .row-note { display: block; }
.pitch .suspension-note { margin: 0; }
.pitch .places-status { margin: 0 0 0.75rem; color: var(--chalk-2); font-size: 0.8125rem; font-weight: 600; }
.pitch .access-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 0; }
.pitch .access-places dt { margin-block-end: 0.25rem; padding-block-end: 0.25rem; border-block-end: 1px solid var(--rule); font-weight: 700; }
.pitch .access-places dd { margin: 0; color: var(--chalk-2); }
.pitch .access-places ul { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.pitch .country-seasons .season-columns { max-inline-size: 32rem; margin-block-end: 1rem; }
.pitch .section-lede { margin: 0 0 0.75rem; color: var(--chalk-2); }
.pitch .club-group { border-block-end: 1px solid var(--rule); }
.pitch .club-group:hover { background: var(--sheet-hover); }
.pitch .club-group.is-open { background: var(--sheet); }

.pitch .performance-spot-fact { margin-block-start: 1rem; }
.pitch .performance-spot-standing { margin: 0; font-weight: 600; }

/* The European Performance Spot race: the top three, the two holding a spot on the zone stripe,
   and a white rule under second, as at an Access Threshold. */
.pitch .performance-spot-race { margin-block: 1rem 1.5rem; }
.pitch .performance-spot-race > h2 { margin: 0 0 0.5rem; font-size: 1.25rem; font-stretch: 85%; font-weight: 750; }
.pitch .performance-spot-prize, .pitch .performance-spot-gap { margin: 0; color: var(--chalk-2); }
.pitch .performance-spot-leaders { margin: 0.75rem 0; padding: 0; list-style: none; }
.pitch .performance-spot-leaders li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    border-block-end: 1px solid var(--rule);
    border-inline-start: 0.3rem solid transparent;
}
.pitch .performance-spot-leaders .holds-spot { border-inline-start-color: rgb(var(--zone)); }
.pitch .performance-spot-leaders .holds-spot + li:not(.holds-spot) { border-block-start: 2px solid var(--chalk); }
.pitch .performance-spot-leaders .position { color: var(--chalk-3); }
.pitch .performance-spot-leaders a { font-weight: 700; text-decoration: none; }
.pitch .performance-spot-leaders a:hover { text-decoration: underline; }
.pitch .performance-spot-leaders .value { font-weight: 600; }

.pitch .legend { margin-block: 1.5rem 0.75rem; color: var(--chalk-2); font-size: 0.875rem; }
.pitch .legend summary { inline-size: fit-content; cursor: pointer; }
.pitch .legend dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem 1rem; max-inline-size: 48rem; }
.pitch .legend dt { color: var(--chalk); font-weight: 600; }
.pitch .legend dd { margin: 0; }

.pitch .publication-details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin-block: 1rem 0;
    color: var(--chalk-3);
    font-size: 0.8125rem;
}

.pitch .publication-details dd { margin: 0; }

/* Home: the matches in play as match lines, the latest goal first. */
.pitch .matches-in-play { margin-block: 0.5rem 1.5rem; }
.pitch .matches-in-play > h2 { margin: 0 0 0.5rem; font-size: 1.25rem; font-stretch: 85%; font-weight: 750; }
.pitch .matches-in-play-lead { color: var(--chalk-3); font-weight: 400; }
.pitch .live-match-list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule); }

.pitch .live-match {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    grid-template-areas: "phase score effect" "phase competition effect";
    align-items: baseline;
    gap: 0 0.9rem;
    padding-block: 0.45rem;
    border-block-end: 1px solid var(--rule);
}

.pitch .live-match-phase { grid-area: phase; display: flex; flex-wrap: wrap; gap: 0.4rem; color: var(--chalk-2); font-size: 0.8125rem; font-weight: 600; }
.pitch .live-match-phase .match-clock { display: flex; gap: 0.4rem; }
.pitch .live-match-score { grid-area: score; display: flex; flex-wrap: wrap; gap: 0 0.5rem; font-weight: 600; }
.pitch .live-match-competition { grid-area: competition; color: var(--chalk-3); font-size: 0.8125rem; }
.pitch .live-match-effect { grid-area: effect; display: flex; flex-wrap: wrap; justify-content: end; gap: 0.6rem; }
.pitch .live-chip { display: inline-flex; gap: 0.3rem; color: var(--chalk-3); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.pitch .live-chip .country-code { color: var(--chalk); }
.pitch .live-chip-gain, .pitch .live-chip-up { color: var(--up); }
.pitch .live-match-more { margin: 0.5rem 0 0; color: var(--chalk-3); font-size: 0.875rem; }

/* Home: the race's top two zones under the headline of what it decides. */
.pitch .home-race > h2, .pitch .ranking-directory h2 { margin: 1.75rem 0 0.75rem; font-size: 1.25rem; font-stretch: 85%; font-weight: 750; }
.pitch .home-race > h2 a, .pitch .cycle-rows a { text-decoration: none; }
.pitch .home-race > h2 a:hover, .pitch .cycle-rows a:hover { text-decoration: underline; }
.pitch .home-race-more { margin: 0.25rem 0 0; }

/* The rankings, each introduced by what it decides, its Ranking Cycles as rows. */
.pitch .ranking-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.pitch .ranking-directory p { margin: 0 0 0.75rem; color: var(--chalk-2); }
.pitch .cycle-rows { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--rule); }
.pitch .cycle-rows li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; padding-block: 0.6rem; border-block-end: 1px solid var(--rule); }
.pitch .cycle-rows a { font-weight: 600; }
.pitch .cycle-label { color: var(--chalk-3); font-size: 0.8125rem; }

/* Empty and not found: what is missing, one sentence, one action. */
.pitch .missing-sentence { max-inline-size: 60ch; margin: 0 0 0.75rem; color: var(--chalk-2); }
.pitch .missing-action { margin: 0; font-weight: 600; }

/* Club Ranking: Access Thresholds belong to the Country Ranking, so the Clubs are one table with
   no zones and no stripe. Each Club's panel stays open under its row, and its Country closes the row
   as a link to the Country page. */
.pitch .club-rows { inline-size: 100%; table-layout: fixed; border-collapse: collapse; border-block-start: 1px solid var(--rule); }

/* The column headers name the cells for assistive technology; the rows read without them. */
.pitch .club-rows thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pitch .club-rows th, .pitch .club-rows td {
    padding: 0.4rem 0.6rem;
    border: 0;
    font-weight: inherit;
    text-align: start;
    vertical-align: baseline;
}

.pitch .club-rows .position-column { inline-size: 3rem; }
.pitch .club-rows .value-column { inline-size: 6rem; }
.pitch .club-rows .trend-column { inline-size: 9rem; }
.pitch .club-rows .country-column { inline-size: 12rem; }

.pitch .club-group { border-block-end: 1px solid var(--rule); }
.pitch .club-group:hover, .pitch .club-group.is-selected { background: var(--sheet-hover); }
.pitch .club-group.is-selected > tr:first-child { outline: 2px solid rgb(var(--zone)); outline-offset: -2px; scroll-margin-block-start: 6rem; }
.pitch .club-group.is-selected > tr:first-child:focus { outline-color: var(--chalk); }

.pitch .club-rows .position { font-size: 1.125rem; font-stretch: 70%; font-weight: 750; white-space: nowrap; }
.pitch .club-rows .name { text-align: start; }
.pitch .club-rows .club-name { display: block; font-weight: 600; }
.pitch .club-rows .club-basis { display: block; color: var(--chalk-3); font-size: 0.8125rem; font-weight: 400; }
.pitch .club-rows .country a { color: inherit; text-decoration: none; }
.pitch .club-rows .country a:hover { text-decoration: underline; }
.pitch .club-rows .value, .pitch .club-rows .trend { text-align: end; }
.pitch .club-rows .trend, .pitch .club-rows .value { font-weight: 600; }

/* A panel always in view reads as part of its row, so it drops the opened panel's stripe and
   ground and sits under the Club name. */
.pitch .always-shown .detail-panel { padding-block: 0.25rem 0.5rem; padding-inline: 3rem 0.6rem; border-inline-start: 0; background: transparent; }

@media (max-width: 42rem) {
    .pitch .club-rows th, .pitch .club-rows td { padding-inline: 0.35rem; }
    .pitch .club-rows .position-column { inline-size: 2.25rem; }
    .pitch .club-rows .value-column { inline-size: 4.5rem; }
    .pitch .club-rows .trend-column { inline-size: 2.75rem; }
    .pitch .club-rows .country-column { inline-size: 5.5rem; }
    .pitch .club-rows .trend, .pitch .club-rows .country { font-size: 0.8125rem; }
    .pitch .club-rows .country { overflow-wrap: anywhere; }
    .pitch .always-shown .detail-panel { padding-inline: 2.25rem 0.35rem; }
}

@media (forced-colors: active) {
    .pitch .club-group.is-selected > tr:first-child { outline-color: Highlight; }
}

@media (max-width: 42rem) {
    .pitch .pitch-main { inline-size: min(100% - 1rem, 76rem); }
    .pitch .site-band { gap: 1rem; }
    .pitch .ranking-finder { inline-size: 100%; margin-inline-start: 0; }
    .pitch .ranking-finder div { flex: 1; }
    .pitch .ranking-finder select { flex: 1; inline-size: auto; }
    .pitch .zone { grid-template-columns: minmax(0, 1fr); }
    .pitch .zone-rail { position: static; margin-block-end: 0.75rem; }
    .pitch .zone-rows th, .pitch .zone-rows td { padding-inline: 0.35rem; }
    .pitch .zone-rows .position-column { inline-size: 2rem; }
    .pitch .zone-rows .value-column { inline-size: 5rem; }
    .pitch .zone-rows .trend-column { inline-size: 4.5rem; }
    .pitch .zone-rows .trend { font-size: 0.8125rem; }
    .pitch .zone-rows .trend > span { display: block; }
    .pitch .zone-rows .trend > span + span { margin-inline-start: 0; }
    .pitch .detail-panel { grid-template-columns: minmax(0, 1fr); padding-inline: 0.75rem; }
    .pitch .detail-facts { grid-template-columns: minmax(0, 1fr); }
    .pitch .access-places { grid-template-columns: minmax(0, 1fr); }
    .pitch .publication-details { grid-template-columns: minmax(0, 1fr); }
    .pitch .live-match { grid-template-columns: minmax(0, 1fr); grid-template-areas: "phase" "score" "competition" "effect"; gap: 0.15rem; }
    .pitch .live-match-effect { justify-content: start; }
    .pitch .ranking-directory { grid-template-columns: minmax(0, 1fr); }
}

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

@media (forced-colors: active) {
    .pitch .zone-rail { border-inline-start: 0.3rem solid CanvasText; box-shadow: none; }
    .pitch .season-preview, .pitch .zone-popout, .pitch .detail-panel { border-inline-start-color: CanvasText; }
    .pitch .season-bar, .pitch .brand-mark { forced-color-adjust: none; background: CanvasText; }
    .pitch .country-group.is-selected > tr:first-child { outline-color: Highlight; }
    .pitch .performance-spot-leaders .holds-spot { border-inline-start-color: CanvasText; }
}