/* Review shell and new page composition only. Fixture component styles are untouched. */ .d-page{display:block;overflow-x:clip}.d-page a{color:inherit}.d-review{display:flex;gap:20px;align-items:center;padding:8px 4%;background:#1a1816;color:#fff;font-size:12px;letter-spacing:.02em}.d-review strong{font-size:11px;letter-spacing:.1em}.d-review label{margin-left:auto}.d-review select{font:inherit;background:#33312e;color:#fff;border:1px solid #696763;padding:5px;border-radius:4px;margin-left:8px}.d-header{display:flex;align-items:center;gap:48px;max-width:1250px;margin:auto;padding:25px 32px;border-bottom:1px solid var(--border)}.d-wordmark{font:800 23px/.95 'Syne',sans-serif;color:var(--accent)!important;text-decoration:none;letter-spacing:-1.2px}.d-wordmark span{font-weight:700}.d-header nav{display:flex;gap:24px}.d-header nav a{font-size:14px;text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}.d-header nav a[aria-current]{border-color:var(--accent);font-weight:600}.d-country{margin-left:auto;font-size:12px;color:var(--muted);display:flex;flex-direction:column}.d-country select{font:600 14px 'DM Sans',sans-serif;border:0;background:transparent;color:var(--text);padding:5px 0;max-width:180px}.d-main{max-width:1186px!important;padding:0 0 60px!important;margin:auto!important;width:calc(100% - 64px)!important;display:block!important}.d-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:25px 0 34px}.d-breadcrumb a{text-decoration:none}.d-columns{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,340px);gap:48px;align-items:start}.d-hero{padding:0 0 26px}.d-eyebrow{display:block;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.12em;color:var(--accent);margin-bottom:16px}.d-page h1{font:800 clamp(36px,4.4vw,62px)/1.04 'Syne',sans-serif;letter-spacing:-.055em;margin:0 0 20px}.d-page h1 span{color:var(--muted);font-weight:700}.d-match-heading h1 span{font-size:.55em;vertical-align:middle}.d-match-heading>p{font-size:16px;color:var(--muted)}.d-main h2{font:700 24px/1.2 'Syne',sans-serif;letter-spacing:-.035em;margin-bottom:14px}.d-lead{font-size:19px;line-height:1.5;color:var(--muted)}.d-inline-links{display:flex;gap:24px;margin-top:25px;font-size:14px;font-weight:600}.d-inline-links a{text-underline-offset:5px}.d-league-title{display:flex;align-items:center;gap:25px}.d-league-title img{object-fit:contain}.d-matchboard{margin-top:32px;padding:26px 18px;border-top:4px solid #963cff;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center;background:var(--card)}.d-matchboard>div{display:flex;flex-direction:column;align-items:center}.d-club-code{font:800 42px 'Syne',sans-serif;letter-spacing:-.07em;margin-bottom:6px}.d-matchboard-time>strong{font:700 36px 'Syne',sans-serif;letter-spacing:-.045em}.d-matchboard-time>span{font-size:12px;color:var(--muted)}.d-matchboard-time>small{font-size:12px;max-width:135px;line-height:1.4;margin-top:8px}.d-facts{display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:14px;font-size:12px;color:var(--muted)}.d-summary{font-size:16px;line-height:1.7;color:var(--muted);max-width:680px}.d-watch{background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:0 0 10px 10px;padding:26px;box-shadow:0 4px 18px #1a181605}.d-watch h2{font-size:26px}.d-provider{display:flex;gap:14px;align-items:center;margin:24px 0}.d-provider-mark{background:var(--bg);border-radius:8px;min-width:80px;min-height:60px;display:grid;place-items:center;padding:8px}.d-provider-mark img{max-width:75px;object-fit:contain}.d-provider strong{font-size:16px;line-height:1.3;display:block}.d-provider p{font-size:13px;color:var(--muted);line-height:1.4;margin-top:5px}.d-button{display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:#fff!important;border-radius:5px;text-decoration:none;padding:13px 16px;font-size:14px;font-weight:600}.d-button:hover{background:#116830}.d-watch-time{display:flex;flex-direction:column;margin:25px 0;padding-top:20px;border-top:1px solid var(--border)}.d-watch-time>span,.d-watch-time small{font-size:12px;color:var(--muted)}.d-watch-time strong{font:700 32px 'Syne',sans-serif}.d-text-link{font-size:13px;text-decoration:none;font-weight:600;display:block;margin-top:20px}.d-section{margin-top:46px}.d-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:15px;margin-bottom:18px}.d-section-head h2{margin:0}.d-section-head>span{font-size:12px;color:var(--muted);white-space:nowrap}.d-description{font-size:14px;color:var(--muted);margin:10px 0 20px;line-height:1.6}.d-fixtures{display:grid;gap:16px}.d-table-wrap{overflow-x:auto;border-top:1px solid var(--border)}.d-table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}.d-table th,.d-table td{padding:17px 20px;border-bottom:1px solid var(--border)}.d-table thead{font-size:12px;color:var(--muted)}.d-table th{font-weight:500}.d-table a{text-decoration:none}.d-table a:hover{text-decoration:underline}.d-table small{display:block;color:var(--muted);font-size:12px}.d-selected-row{background:#15803d08}.d-bottom-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(280px,340px);gap:48px}.d-page details{border-bottom:1px solid var(--border);padding:16px 0;font-size:14px}.d-page summary{cursor:pointer;font-weight:600;min-height:30px}.d-page details p{padding:10px 0;color:var(--muted);line-height:1.65}.d-guide-link{display:flex;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid var(--border);font-size:14px;text-decoration:none}.d-side-note{padding:28px 4px}.d-side-note p{font-size:14px;color:var(--muted);margin-top:18px}.d-footer{max-width:1186px;margin:0 auto;padding:25px 0 35px;border-top:1px solid var(--border);display:flex;gap:25px;align-items:center;font-size:12px;color:var(--muted)}.d-footer strong{font:800 16px 'Syne',sans-serif;color:var(--accent);letter-spacing:-.05em}.d-footer a{margin-left:auto}.d-page :focus-visible{outline:3px solid var(--accent);outline-offset:4px}.d-page .d-header a:hover,.d-text-link:hover{color:var(--accent)} @media(max-width:900px){.d-header{gap:24px;padding:20px}.d-main{width:calc(100% - 40px)!important}.d-columns,.d-bottom-grid{gap:28px;grid-template-columns:minmax(0,1fr) 285px}.d-watch{padding:20px}.d-header nav{gap:14px}.d-wordmark{font-size:19px}.d-footer{margin:0 20px}.d-page h1{font-size:44px}} @media(max-width:700px){.d-review{gap:10px;padding:8px 16px;flex-wrap:wrap}.d-review>span{font-size:11px}.d-review label{width:100%;margin-left:0}.d-header{flex-wrap:wrap;gap:18px;padding:20px 16px}.d-wordmark{font-size:21px}.d-country{max-width:145px}.d-header nav{order:3;width:100%;gap:28px}.d-header nav a{padding:3px 0 9px;min-height:34px}.d-main{width:calc(100% - 32px)!important}.d-breadcrumb{padding:20px 0 25px;font-size:11px}.d-columns,.d-bottom-grid{display:flex;flex-direction:column;gap:24px}.d-columns>*,.d-bottom-grid>*{width:100%}.d-page h1{font-size:42px}.d-eyebrow{margin-bottom:12px}.d-hero{padding-bottom:10px}.d-matchboard{margin-top:24px;padding:22px 8px}.d-club-code{font-size:32px}.d-matchboard-time>strong{font-size:30px}.d-matchboard>div>strong{font-size:14px}.d-watch{padding:24px}.d-provider-mark{min-width:85px}.d-lead{font-size:17px}.d-main h2{font-size:23px}.d-section{margin-top:30px}.d-section-head{align-items:start;flex-direction:column;gap:6px}.d-table th,.d-table td{padding:14px 10px;font-size:12px}.d-table td:last-child{min-width:112px}.d-summary{font-size:15px}.d-footer{flex-wrap:wrap;margin:0 16px;gap:12px}.d-footer a{margin-left:0;width:100%}.d-side-note{padding:24px 0 0}.d-league-title{gap:16px}.d-league-title img{width:48px;height:60px}.d-league-title h1{font-size:37px}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} .d-hero-crest{object-fit:contain;margin-bottom:12px}.d-matchboard>div{justify-content:center}@media(max-width:700px){.d-hero-crest{width:48px;height:48px}} @media(max-width:700px){.d-wordmark{font-size:17px;letter-spacing:-1px}.d-header{gap:12px}.d-country{font-size:11px;max-width:135px}.d-country select{font-size:12px}.d-match h1{font-size:34px}.d-match .d-columns>div:first-child{display:contents}.d-match .d-hero{order:0;width:100%}.d-match .d-watch{order:1}.d-match .d-summary{order:2}.d-matchboard{margin-top:18px}.d-breadcrumb{padding:16px 0 20px}.d-page .d-matchboard-time>strong{font:700 28px 'Syne',sans-serif}} /* Homepage header/nav use the original CSS without prototype overrides. */ .d-review nav{display:flex;gap:16px}.d-review nav a{color:#fff;text-decoration:none;padding:5px 0}.d-review nav a[aria-current]{border-bottom:2px solid #fff}.d-review{flex-wrap:wrap}.fixture-card[hidden]{display:none!important} @media(max-width:700px){.d-review nav{order:2}.d-review label{width:auto;margin-left:auto}.d-review>span{width:100%;order:3}} /* Mirror the homepage's actual header state, without importing its page layout. */ .d-page .region-select-wrap{display:none} .d-location{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted);margin:0 0 28px} .d-location button,.d-filter-status button{border:0;background:none;padding:4px 0;color:var(--accent);font:600 13px 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .d-filter-status{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:13px;margin-bottom:16px;padding:10px 12px;background:#15803d08;border-radius:6px} .d-page [hidden]{display:none!important} .d-schedule-columns{margin-top:28px}.d-schedule-columns .d-section{margin-top:0} .d-empty{font-size:14px;line-height:1.6;color:var(--muted);padding:24px;border:1px solid var(--border);border-radius:8px} .d-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .d-skip{position:fixed;top:8px;left:65px;z-index:9999;background:#fff;padding:12px;transform:translateY(-200%)}.d-skip:focus{transform:none} .d-review .d-review-brief{font-size:12px;color:#fff}.d-page .lang-btn:disabled{opacity:.45;cursor:not-allowed} .d-page .d-league-title img{flex-shrink:0;object-fit:contain} .d-page .d-league-title h1{font-size:clamp(32px,4.4vw,62px)} .d-page .d-facts a{text-underline-offset:3px} .d-page .fp-body .d-button{width:100%;border:0;font-family:inherit;cursor:pointer} .d-page .site-footer{margin-top:0} @media(max-width:700px){ .d-location{font-size:12px;margin-bottom:24px;gap:4px 12px} .d-location button{font-size:12px} .d-page .d-league-title h1{font-size:clamp(27px,7.5vw,40px);letter-spacing:-.045em} .d-page .d-league-title img{width:42px;height:52px} .d-page .d-league-title{gap:12px} .d-schedule-columns{margin-top:18px} .d-review{gap:4px 14px;font-size:11px;padding:6px 16px} .d-review strong{font-size:10px}.d-review nav{gap:16px} .d-review label{margin-left:0}.d-review>span{order:4;font-size:10px} .d-review .d-review-brief{margin-left:auto} .d-page .d-matchboard-time>strong{font-size:26px} } .d-main section[id],.d-main{scroll-margin-top:96px} @media(min-width:701px) and (max-width:900px){ .d-columns,.d-bottom-grid{grid-template-columns:minmax(0,1fr)} .d-match .d-columns>div:first-child{display:contents} .d-match .d-hero{order:0}.d-match .d-watch{order:1}.d-match .d-summary{order:2} .d-review{gap:8px 14px;padding:8px 20px;font-size:11px} .d-review nav{gap:12px}.d-review select{margin-left:4px} } .d-country-directory{margin-top:20px}.d-country-directory a{color:var(--accent);font-weight:600;text-underline-offset:3px} .d-country-preview-note{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0 8px}.d-country-directory-link{font-size:12px;line-height:1.5;text-underline-offset:3px} .mg-settings{display:flex;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:12px}.mg-settings label{display:grid;gap:6px;font-size:13px;color:var(--muted)}.mg-settings select{font:inherit;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:10px;max-width:260px}.mg-settings nav{display:flex;gap:14px;font-size:13px;padding:10px 0}.mg-settings nav a[aria-current]{font-weight:600}.mg-time-note{font-size:12px;color:var(--muted);margin:0 0 28px}.mg-option{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}.mg-option p{color:var(--muted);font-size:12px;margin:6px 0}.mg-option a{font-size:13px;color:var(--accent);text-underline-offset:3px}.mg-guide .d-matchboard-time time{font-weight:600;line-height:1.6;font-size:16px}.mg-guide .d-fixtures{max-width:720px}.mg-guide .d-watch h2{overflow-wrap:anywhere}.mg-guide #mg-country{scroll-margin-top:100px}.d-page.match-page .region-select-wrap{display:none}.d-page.match-page .date-nav,.d-page.match-page .chips-bar{display:none!important} @media(max-width:700px){.mg-settings{gap:12px;align-items:start}.mg-settings label{width:100%}.mg-settings select{max-width:100%;width:100%}.mg-guide .d-columns>section{width:100%}.mg-guide .d-matchboard-time time{font-size:13px}} .d-match #channelsCtaBar { display: none !important; } .d-match a.filter-btn { text-decoration: none; } .mg-fixture{margin-top:32px;background:var(--card);border:1px solid rgba(20,20,20,0.08);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(20,20,20,0.04)} .mg-fixture .fixture-overline{border-radius:0;margin:0} .mg-fixture .d-matchboard{margin-top:0;border:0} .mg-fixture .fixture-overline-inner{justify-content:center} .mg-featured-option+.mg-featured-option{margin-top:24px;padding-top:8px;border-top:1px solid var(--border)} .d-provider-mark--dark{background:#16291f} #mg-questions{min-width:0} @media(max-width:700px){.mg-fixture{margin-top:18px}} /* Give international listings and practical questions equal prominence. */ .mg-information-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start} .mg-information-grid>section{min-width:0} .mg-information-grid .d-description{font-size:14px;margin-bottom:10px} .mg-country-link{display:inline-block;font-size:14px;font-weight:600;text-underline-offset:3px;margin-bottom:12px} .mg-world-kickoff{font-size:12px;line-height:1.6;color:var(--muted);margin:0 0 16px} .mg-information-grid .d-table th,.mg-information-grid .d-table td{padding:12px 0;vertical-align:middle;font-size:14px} .mg-information-grid .d-table th:first-child{width:34%;padding-right:16px} .mg-information-grid .d-table thead th{font-size:12px} .mg-information-grid .mg-option{padding:0;border:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} .mg-information-grid .mg-option+.mg-option{margin-top:12px} .mg-information-grid .mg-option p{margin:0;font-size:12px} .mg-information-grid .mg-option p:empty{display:none} .mg-information-grid .mg-option>a:last-child{font-size:12px} .mg-information-grid #mg-questions details{font-size:16px;padding:18px 0} .mg-information-grid #mg-questions summary{min-height:30px;line-height:1.5} .mg-information-grid #mg-questions details p{font-size:16px;line-height:1.65;margin:0;padding:8px 0 0} .mg-information-grid #mg-questions .d-guide-link{font-size:14px;padding:18px 0} .mg-guide #schedule .d-fixtures{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:900px){.mg-information-grid{grid-template-columns:minmax(0,1fr);gap:0}.mg-guide #schedule .d-fixtures{grid-template-columns:minmax(0,1fr)}} /* Controls belong beside the answer they change, ahead of secondary detail. */ .mg-page-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px} .mg-page-top .d-breadcrumb{padding:24px 0 0} .mg-language{display:flex;gap:16px;font-size:13px;padding-top:12px} .mg-language a{text-underline-offset:3px}.mg-language a[aria-current]{font-weight:700} .mg-country-setting label{display:grid;gap:6px;font-size:13px;color:var(--muted)} .mg-country-setting select,.mg-timezone-setting select{font:inherit;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:10px;min-height:42px;max-width:100%} .mg-country-setting select{width:100%}.mg-country-setting{margin:18px 0 0} .mg-timezone-setting{margin-top:12px} .mg-timezone-setting label{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)} .mg-timezone-setting select{padding:6px 10px;min-width:0;max-width:260px} .mg-guide .d-hero{padding-bottom:0} .mg-guide .d-summary{font-size:14px;line-height:1.6;margin-top:14px;margin-bottom:0} .mg-guide .d-section{margin-top:40px} .mg-guide .d-section-head{margin-bottom:14px} .mg-guide #worldwide .d-table{line-height:1.5} @media(max-width:700px){ .mg-page-top{gap:10px;margin-bottom:24px}.mg-page-top .d-breadcrumb{padding-top:18px}.mg-language{padding-top:0} .mg-guide .d-columns{gap:28px}.mg-guide .d-section{margin-top:32px} .mg-timezone-setting label{justify-content:space-between}.mg-timezone-setting select{max-width:70%} .mg-information-grid .d-table th:first-child{width:38%;padding-right:12px} .mg-information-grid .d-table td:last-child{min-width:0} } .mg-team-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.mg-team-guides .d-guide-link{font-weight:600;text-underline-offset:3px;padding:16px 0}.mg-team-guides .d-guide-link:hover{text-decoration:underline}@media(max-width:700px){.mg-team-guides{grid-template-columns:minmax(0,1fr);gap:0}} #mg-questions{max-width:720px}#mg-questions details,#mg-questions details p{font-size:16px;line-height:1.6}#mg-state-note:empty{display:none}.mg-guide .d-matchboard-time{min-width:0}.mg-guide #mg-kickoff{font-size:15px;line-height:1.5} /* Match identity, local answer, then actionable viewing help. */ .mg-guide h1{font-size:clamp(36px,4vw,52px);margin-bottom:14px} .mg-guide .d-description{margin-bottom:16px} .mg-guide .mg-fixture{margin-top:22px} .mg-guide .d-watch{border-radius:10px;border-top:1px solid var(--border);padding:24px} .mg-guide .d-watch h2{font-size:22px;line-height:1.25} .mg-guide .d-provider{margin:20px 0} .mg-editions{margin-top:24px}.mg-editions nav{display:flex;flex-wrap:wrap;gap:12px 20px;padding:12px 0}.mg-editions a{font-size:13px;text-underline-offset:3px} /* Bespoke match header: preserve the approved kickoff/viewing hierarchy. */ .mg-match-intro{margin-bottom:24px} .mg-guide .mg-match-intro h1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:clamp(30px,3.5vw,46px);line-height:1.12;margin:0 0 10px} .mg-match-intro h1 img{object-fit:contain;flex-shrink:0} .mg-match-intro .d-description{margin-bottom:0} .mg-competition-line{display:flex;align-items:center;gap:14px;margin-bottom:16px} .mg-competition-line .fixture-overline{width:auto!important;background:transparent!important;margin:0;padding:0;color:var(--text)!important} .mg-competition-line .fixture-overline-inner{padding:0!important} .mg-competition-line .fixture-overline img{filter:brightness(0);height:22px;width:auto} .mg-competition-line .d-eyebrow{margin:0!important;font-size:11px} .mg-match-centre{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 4px 20px #1a181607} .mg-guide .mg-match-centre .d-columns{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center} .mg-guide .mg-match-centre .d-hero{padding:28px 32px} .mg-guide .mg-match-centre .mg-fixture{margin:0;border:0;box-shadow:none;border-radius:0;background:transparent} .mg-guide .mg-match-centre .d-matchboard{display:block;padding:0;margin:0;background:transparent;border:0;text-align:left} .mg-guide .mg-match-centre .d-matchboard>div{align-items:flex-start} .mg-guide .mg-match-centre .mg-kickoff-label{display:block;font:700 19px/1.3 'Syne',sans-serif;color:var(--text);margin-bottom:16px;letter-spacing:-.035em} .mg-guide .mg-match-centre #mg-kickoff{display:flex;flex-direction:column;gap:6px;line-height:1.3} .mg-guide .mg-match-centre .mg-clock{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1.1;order:-1;color:var(--text);white-space:nowrap} .mg-guide .mg-match-centre .mg-date{font-size:15px;color:var(--text);font-weight:500} .mg-guide .mg-match-centre .mg-zone{font-size:14px;color:var(--muted);font-weight:500} .mg-guide .mg-match-centre .d-watch{display:block;margin:24px 0;padding:0 32px;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none} .mg-guide .mg-match-centre .d-watch h2{font-size:19px;line-height:1.3;margin:0} .mg-guide .mg-match-centre .d-provider{margin:16px 0;gap:12px} .mg-guide .mg-match-centre .d-provider-mark{min-width:72px;min-height:48px;padding:6px} .mg-guide .mg-match-centre .d-provider-mark img{max-width:72px;height:32px} .mg-guide .mg-match-centre .d-provider strong{font-size:15px} .mg-guide .mg-match-centre .d-button{padding:10px 14px;justify-content:center;border-radius:6px} @media(max-width:700px){ .mg-guide .mg-match-intro h1{gap:8px;font-size:28px}.mg-match-intro h1 img{width:28px;height:28px} .mg-guide .mg-match-centre .d-columns{grid-template-columns:1fr} .mg-guide .mg-match-centre .d-hero{padding:24px} .mg-guide .mg-match-centre .d-watch{margin:0 24px;padding:24px 0;border-left:0;border-top:1px solid var(--border);width:auto} } /* Keep onward football navigation with fixtures; editions are quiet utilities. */ .mg-schedule-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 18px;font-size:12px} .mg-schedule-meta #mg-related-zone{color:var(--muted)} .mg-schedule-meta a{font-size:13px;font-weight:600;text-decoration:none;color:var(--accent);text-underline-offset:3px} .mg-schedule-meta a:hover{text-decoration:underline} .mg-guide .mg-editions{margin-top:28px;padding:18px 0 0;border-top:1px solid var(--border);display:grid;gap:10px} .mg-edition-row{display:flex;align-items:baseline;gap:20px;font-size:12px;line-height:1.5} .mg-edition-row>span{width:105px;flex-shrink:0;color:var(--muted)} .mg-edition-row>div{display:flex;flex-wrap:wrap;gap:8px 18px} .mg-edition-row a{font-size:12px;color:var(--muted);text-decoration:none} .mg-edition-row a:hover{color:var(--accent);text-decoration:underline} .mg-edition-row a[aria-current]{color:var(--text);font-weight:600} @media(max-width:700px){.mg-schedule-meta{justify-content:flex-start}.mg-edition-row{gap:12px}.mg-edition-row>span{width:88px}} .mg-footer-locales{display:grid;gap:10px;margin:16px 0;font-size:12px}.mg-footer-locales nav{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 18px}.mg-footer-locales a{font:inherit;text-decoration:none;color:var(--muted)}.mg-footer-locales a:hover{text-decoration:underline;color:var(--accent)}.mg-footer-locales a[aria-current]{font-weight:600;color:var(--text)}.mg-footer-locales nav>span{color:var(--muted)} #langBar.mg-footer-locales{display:grid!important;gap:10px!important;justify-content:start!important} /* Compact transition from the last fixture links to the shared footer. */ .d-page.match-page .d-main{padding-bottom:24px!important} /* ── All-territory viewing answers (Cycle 1B) ──────────────────────────────── The canonical page no longer answers "Choose your country" and nothing else: every country with a confirmed answer is server-rendered below the primary slot, the highest-ranked rows visible and the remainder behind a native
disclosure. The text is in the HTML either way, so a crawler that never expands the disclosure still receives the answer, while the default view stays a page rather than an 80-card wall. */ /* ── Viewing-country NAVIGATION (not a viewing answer) ───────────────────────── Country names, and links to each country's own match page. There is deliberately no rule here for a channel, service or coverage column: the viewing panel answers for the one country the page represents, and this list only lets a reader move to another country. It lives in the footer beside the language navigation. */ .mg-viewing-countries{margin-top:12px;border-top:1px solid var(--border);padding-top:12px} .mg-nav-title{font-size:14px;font-weight:700;margin:0 0 10px;color:var(--text);letter-spacing:-.01em} .mg-country-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px} .mg-country-row{font-size:13px;line-height:1.5} .mg-country-name{color:var(--accent);text-underline-offset:3px} a.mg-country-name:hover{text-decoration:underline} .mg-country-more{margin-top:10px} .mg-country-more>summary{cursor:pointer;font-size:13px;color:var(--accent);text-underline-offset:3px} .mg-country-more>summary:hover{text-decoration:underline} .mg-country-more>ul{margin-top:10px} /* Evidence standing, in one plain word (Cycle 1B nuance patch). A definitive answer reads as itself. An answer that is only a fixture-level observation, or only a schedule expectation, carries "Listed"/"Expected" — the lightest possible qualification, never a badge or an audit label. */ .mg-qualifier{color:var(--muted);font-style:normal} .mg-answer-note{margin-top:8px;font-size:13px} /* ── Cycle 1D: one provider, many channels, one destination ─────────────────── The detailed answer panel shows a provider once, its channels as compact chips, and a single provider-level destination. Channels wrap naturally on narrow screens and every chip keeps its full name in its title attribute, so nothing is hidden from hover or assistive technology. */ .mg-provider-group .d-provider{margin-bottom:10px} .mg-provider-channels{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 14px;padding:0} .mg-provider-channel{margin:0} .mg-provider-group .channel-tag{display:inline-flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap} .mg-provider-group+.mg-featured-option{margin-top:24px;padding-top:8px;border-top:1px solid var(--border)} @media(max-width:700px){.mg-provider-channels{gap:5px}.mg-provider-group .channel-tag{white-space:normal}} /* ── Mobile match header (2026-09-19) ────────────────────────────────────────── The desktop header is approved and is NOT touched: every rule below lives inside this one mobile media query, and nothing here is a redesign — the same competition/status line, the same crests and full team names, the same kickoff card, the same fonts and identity, only at a mobile scale. The measured problem at 390px was that the answer to the page's own question ("where can I watch this?") began around 480px down the viewport: an oversized team-name line (36px + 1.04 leading), generous hero padding, and a large kickoff card between the reader and the viewing answer. This compacts the identity block so the viewing answer is reachable far earlier, without shrinking body copy. Sizes are checked at 360 / 390 / 430px with long team names: the name wraps rather than truncating, nothing overlaps, and no rule introduces horizontal overflow. */ @media(max-width:700px){ .mg-page-top{margin-bottom:8px} .mg-page-top .d-breadcrumb{padding:8px 0 0} .mg-match-intro{margin-bottom:12px} .mg-guide .mg-match-intro h1{font-size:22px;line-height:1.18;letter-spacing:-.02em;gap:7px;margin-bottom:6px;overflow-wrap:break-word} .mg-match-intro h1 img{width:22px;height:22px} .mg-match-intro .d-description{margin-top:6px} .mg-competition-line{gap:10px;margin-bottom:10px} .mg-competition-line .fixture-overline img{height:18px} .mg-guide .mg-fixture{margin-top:10px} .mg-fixture .d-matchboard{padding:12px 8px} .mg-kickoff-label{font-size:12px;margin-bottom:6px;letter-spacing:-.01em} /* The kickoff time itself was 44px on mobile — the single largest block between the reader and the viewing answer. Same figure, mobile scale. */ .mg-guide .mg-match-centre .mg-clock{font-size:26px;line-height:1.15} .mg-guide .mg-date{font-size:13px} .mg-guide .mg-zone{font-size:12px} .mg-guide .d-matchboard-time time,.mg-guide #mg-kickoff{font-size:13px;line-height:1.45} .mg-guide .d-watch{padding:16px} .mg-guide .d-columns{gap:14px} .mg-guide .d-hero{padding-bottom:0} } /* ══ Cycle 1I: match-page accessibility hardening ═════════════════════════════ Measured, not assumed. Every number below comes from the real page served through the repo's own Pages emulator (scripts/cycle1d/serve-local.mjs) into Chromium, and every rule removes a failure that was measured on the accepted 1I-A install. Three changes, and nothing else: 1 MEANINGFUL TYPE BELOW 14px. The audit found real meaning set at 10.88 / 11 / 11.52 / 12 / 12.5 / 13px: the status and competition labels, the maker's name on a related fixture, the broadcaster chips, the country directory (77 rows on the fixture that carries one), the provider's own qualifier line, the evidence note, the timezone caption, the breadcrumb and the footer locale bar. Nothing meaningful is below 14px now; body prose is 16px. Hierarchy is carried by weight, colour, letterspacing and space instead of by shrinking type. The related-fixture card is the shared .fixture-card component, whose CSS lives in index.html — the stylesheet the homepage, team and competition pages also load. It is therefore only overridden INSIDE .mg-guide, so this change reaches the match page and nothing else. 2 A CONTROL BOUNDARY THAT READS. --border (#e5e7eb) on the page background (#fafaf7) is 1.18:1. That is correct for a decorative separator and useless for a boundary that is the only thing telling a reader where a control starts: the header search field measured 1.18:1 and the global-nav country select 1.24:1, against a 3:1 requirement (WCAG 2.1 SC 1.4.11). Controls get --mg-control-border (#6b7280, 4.63:1 on the page background) and decorative rules keep --border exactly as they were. The two failing controls belong to the shared shell, so the override is scoped to .match-page: no other page type changes. 3 TARGET SIZE. WCAG 2.2 SC 2.5.8 measures 24x24 CSS px. Block-level links in a flex row measured 18–22px tall (breadcrumb, country directory, schedule meta, footer locales, editions) and the "viewing options" button ~20px. They get a 24px box. Links that sit inside a line of prose keep their natural size on purpose — SC 2.5.8's inline exception is the right answer there, and inflating a sentence's links into buttons would damage the reading experience the page exists for. Not changed here, because the evidence puts them outside this track: · the desktop H1 stays at its accepted 46px (see the test suite's DESKTOP_BASELINE and the Track C report); · eight of the 32 competition bar colours fail AA for their own overline text (measured: DED 2.41:1, PD 2.77, EL 2.85, ECL 2.92, NWSL 3.34, UYL 4.15, BL1 4.25, PL 4.28). The fix belongs in the shared COMP_COLORS / COMP_TEXT_DARK registry that every fixture card on the site renders from, not in a match-page stylesheet that cannot repair five of them at all. ──────────────────────────────────────────────────────────────────────────── */ /* ── 1. Type floors ─────────────────────────────────────────────────────────── */ /* Body prose. */ .mg-guide .d-description,.mg-guide .d-summary,.mg-guide .d-side-note p,.mg-guide .d-empty, .mg-guide .mg-information-grid .d-description,.mg-guide #mg-questions details p{font-size:16px} /* The deck line under the H1 is not body prose: it is one line of secondary metadata, and 14px is the brief's floor for exactly that. It also happens to be the one .d-description inside the block the desktop baseline measures, so leaving it at its floor keeps the accepted desktop header composition intact. */ .mg-guide .mg-match-intro .d-description{font-size:14px} /* Labels, provider, date and viewing detail. */ .mg-guide .d-eyebrow,.mg-guide .mg-competition-line .d-eyebrow{font-size:15px} .mg-guide .mg-competition-line .fixture-overline,.mg-guide .mg-competition-line .fixture-overline-inner{font-size:14px} .mg-guide .mg-date{font-size:15px} .mg-guide .mg-zone{font-size:14px} .mg-guide .d-button{font-size:15px} /* The match centre's own rule sets the broadcaster name at 15px; the audit asks for 16px for the provider a reader is being told to watch on, so it is raised here rather than the floor being lowered to meet it. */ .mg-guide .d-provider strong,.mg-guide .mg-match-centre .d-provider strong, .mg-guide .d-provider-mark+div>strong{font-size:16px} .mg-guide .mg-provider-group .channel-tag{font-size:15px} .mg-guide .mg-all-title{font-size:16px} .mg-guide .mg-territory-row{font-size:15px} .mg-guide .mg-all-more>summary{font-size:15px} /* Secondary meaningful metadata. */ .mg-guide .d-breadcrumb{font-size:14px} .mg-guide .d-facts{font-size:14px} .mg-guide .d-provider p{font-size:15px} .mg-guide .d-table thead,.mg-guide .d-table small{font-size:14px} .mg-guide .mg-information-grid .d-table th,.mg-guide .mg-information-grid .d-table td{font-size:15px} .mg-guide .mg-option{font-size:15px} .mg-guide .mg-option p{font-size:14px} .mg-guide .mg-option a{font-size:14px} .mg-guide .mg-answer-note{font-size:14px} .mg-guide .mg-schedule-meta{font-size:14px} .mg-guide .mg-schedule-meta #mg-related-zone{font-size:14px} .mg-guide .mg-schedule-meta a{font-size:14px} .mg-guide .mg-editions a{font-size:14px} .mg-guide .mg-edition-row{font-size:14px} .mg-guide .mg-edition-row a{font-size:14px} .match-page .mg-footer-locales{font-size:14px} .mg-guide .mg-language{font-size:14px} .mg-guide .mg-settings,.mg-guide .mg-settings label,.mg-guide .mg-settings nav{font-size:14px} .mg-guide .mg-country-setting label,.mg-guide .mg-timezone-setting label{font-size:14px} .mg-guide .mg-time-note,.mg-guide .mg-world-kickoff{font-size:14px} .mg-guide .d-country-preview-note,.mg-guide .d-country-directory-link{font-size:14px} .mg-guide .d-location,.mg-guide .d-location button{font-size:14px} .mg-guide .d-filter-status{font-size:14px} /* The shared fixture card, scoped to the match page's own related-fixtures list. */ .mg-guide .mg-related .fixture-date-compact{font-size:14px} .mg-guide .mg-related .channel-tag{font-size:14px} .mg-guide .mg-related .fixture-overline-inner{font-size:14px} .mg-guide .mg-related .team-name-btn{font-size:16px} .mg-guide .mg-related .score-time{font-size:16px} /* ── 2. A control boundary that reads ───────────────────────────────────────── */ .d-page.match-page{--mg-control-border:#6b7280} .d-page.match-page select,.d-page.match-page input:not([type=hidden]), .d-page.match-page textarea,.d-page.match-page .search-inner{border-color:var(--mg-control-border)} /* ── 3. Target size (WCAG 2.2 SC 2.5.8) ─────────────────────────────────────── */ .mg-guide .d-breadcrumb a,.mg-guide .mg-schedule-meta a, .mg-guide .mg-editions a,.mg-guide .mg-edition-row a,.mg-guide .mg-language a, .mg-guide .mg-settings nav a,.mg-guide .mg-territory-row .mg-territory-name, .match-page .mg-footer-locales nav a{ display:inline-flex;align-items:center;min-height:24px } /* .fixture-overline-inner is already an inline-flex box in the shared card CSS, so only its minimum height has to move — the bar's own geometry is untouched. */ .mg-guide .fixture-overline-inner{min-height:24px} .mg-guide .mg-viewing-options{padding:4px 0;min-height:24px} /* ── Desktop: the label line grew, the space under it pays for the growth ───── */ @media(min-width:701px){ /* The status and competition labels below the breadcrumb move 11px -> 15px and 12px -> 14px, which makes .mg-competition-line exactly 4px taller. Taking those 4px back out of its bottom margin keeps the identity block the height the accepted desktop design was measured at, so nothing below it shifts. */ .mg-guide .mg-competition-line{margin-bottom:12px} } /* ── Mobile: the heading keeps its floor, the air around it pays for it ─────── */ @media(max-width:700px){ /* 22px was a collapse: the page's own name rendered smaller than its section headings. 32px is the floor; above ~390px it scales with the viewport. The height that buys back is taken from the whitespace, not from the answer. */ .mg-guide .mg-match-intro h1{font-size:clamp(32px,8.4vw,38px);line-height:1.12;gap:6px;margin-bottom:4px} .mg-match-intro h1 img{width:30px;height:30px} .mg-match-intro{margin-bottom:8px} .mg-competition-line{margin-bottom:6px} .mg-match-intro .d-description{margin-top:2px} .mg-page-top{margin-bottom:6px} .mg-guide .mg-fixture{margin-top:8px} .mg-guide .mg-match-centre .d-hero{padding:16px 20px} .mg-guide .mg-match-centre .d-watch{margin:0 20px;padding:16px 0} .mg-guide .d-columns{gap:12px} .mg-guide .mg-date{font-size:15px} .mg-guide .mg-zone{font-size:14px} .mg-guide .d-matchboard-time time,.mg-guide #mg-kickoff{font-size:15px;line-height:1.45} .mg-guide .mg-information-grid .d-table th,.mg-guide .mg-information-grid .d-table td{font-size:15px} } /* ── Narrow phones: the heading wraps as TEXT, not as flex items ────────────── The identity heading is a flex row of crest / name / "vs" / name / crest, and above 440px that is exactly right. Below it — where the 32px floor makes each item wide — flex-wrap puts one ITEM on each line, so a two-word club name renders as crest / "Aberdeen" / "vs" / "St Johnstone" / crest: five lines and a 191px heading, which pushed the viewing answer from 368px down to 493px on a 320px screen. Measured on production, 2026-09-21: fixture 320px heading 320px answer starts aberdeen-vs-st-johnstone 191px (5 lines) 493px airbus-uk-broughton-... 191px (5 lines) 526px Flowing the heading as text instead — the crests stay, inline — keeps the words measured from the FULL width and wraps between them: the same two fixtures measure 143px / 445px and 143px / 478px, with no horizontal overflow and nothing clipped. The 32px floor is untouched; only the wrapping unit changes. */ @media(max-width:440px){ /* line-height 1.02 rather than 1.08: on the tallest shape production serves ("Aberdeen vs St Johnstone", 320px) the block came out 195px against the calibrated 190px bound and the answer started at 440px. The tighter leading measures 187px / 433px on that fixture and 187px / 466px on the longest name, with no overflow and no clipping — the words are identical, the leading is tighter. */ .mg-guide .mg-match-intro h1{display:block;line-height:1.02} .mg-match-intro h1 img{display:inline-block;vertical-align:middle;width:28px;height:28px} /* Mobile density: the narrowest widths pay for the 32px floor out of the air around the identity block rather than out of the type, so the answer sits higher on a small screen. Measured on production 2026-09-22 at 320/360/390/430 for the tallest shapes: identity block 187/154/157/167 → 185/152/155/165 and answer top 433/400/402/413 → 425/392/394/405. The 441-700px range is untouched. */ .mg-match-intro{margin-bottom:2px} .mg-competition-line{margin-bottom:4px} } .mg-answer-preview{list-style:none;margin:12px 0;padding:0;display:grid;gap:7px;font-size:14px;line-height:1.45} .mg-answer-preview li{padding:0 0 7px;border-bottom:1px solid var(--border,rgba(255,255,255,.14))}