/*
 * Match Centre (WP5) · /match/{id}-{slug}/
 * Design: handoff "WTR 5 Match Centre"; measured values: tidewater/analysis/04 §2–3.
 * Colour only through --wtr-* tokens (tokens.css + tokens-ext.css), so dark mode (WP11)
 * needs no edit here. Runtime hooks: docs/STATE-HOOKS.md ([hidden], aria-selected,
 * aria-current, aria-pressed, data-wx-state, data-state, data-wx-new).
 */

/* ---------- page frame ---------- */
.wx-mc { display: block; background: var(--wtr-bg); }
.wx-mc-crumbs { padding-block: 12px; background: var(--wtr-bg); }
/* Prototype crumbs: 13 px on a normal line (17 px), not the body's 1.45. */
.wx-mc-crumbs .wx-crumbs-list { line-height: 1.3; }
@media (min-width: 600px) { .wx-mc-crumbs { padding-block: 14px; } }
@media (min-width: 1024px) { .wx-mc-crumbs { padding-block: 16px; } }

/* ---------- score band ---------- */
.wx-mc-band {
	background: var(--wtr-header);
	color: var(--wtr-header-text);
	padding-block: 20px 22px;
}
.wx-mc-band-in { display: grid; gap: 18px; }
.wx-mc-h1 {
	margin: 0;
	font: 700 15px/1.3 var(--wtr-ff-sans);
	color: var(--wtr-header-text);
	text-align: center;
	text-wrap: balance;
}
.wx-mc-band a { color: inherit; text-decoration: none; }
/* 44 px targets without moving the layout: the padding grows the box, the margin gives it back. */
.wx-mc-tname, .wx-mc-meta a { padding-block: 13px; margin-block: -13px; }
.wx-mc-tname { min-inline-size: var(--wtr-hit); }
.wx-mc-coach a { display: inline-block; padding-block: 14px; margin-block: -14px; }
.wx-mc-band a:hover { text-decoration: underline; text-underline-offset: .18em; }
.wx-mc-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 14px;
	font: 600 13.5px/normal var(--wtr-ff-sans);
	color: var(--wtr-header-meta);
	text-align: center;
}
.wx-mc-comp { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wx-mc-band .wx-mc-ctile {
	--wx-t: 20px; --wx-tp: 2px; --wx-tr: 4px; --wx-tf: 6.5px;
	background: var(--wtr-band-tile);
	box-shadow: none;
}
.wx-mc-teams {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}
.wx-mc-team {
	display: grid;
	justify-items: center;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: 10px;
	min-width: 0;
	text-align: center;
}
.wx-mc-band .wx-mc-logo {
	--wx-t: 56px; --wx-tp: 7px; --wx-tr: 10px; --wx-tf: 16px;
	background: var(--wtr-band-tile);
	box-shadow: none;
}
.wx-mc-band .wx-mc-logo img { mix-blend-mode: multiply; }
.wx-mc-band .wx-mc-logo .wx-tile-mono::after { inline-size: 18px; block-size: 3px; }
.wx-mc-tname {
	font: 600 18px/1.15 var(--wtr-ff-sans);
	color: inherit;
	overflow-wrap: anywhere;
	hyphens: auto;
	max-inline-size: 100%;
}
.wx-mc-team.is-lead .wx-mc-tname { font-weight: 800; }
/* Longest word (--wx-tn letters, ~.56 em each) fits the column whole: smaller only when needed, min 13 px, line box ≥ 18 px (44 px target) */
.wx-mc-team { container-type: inline-size; }
.wx-mc-tname[style] { font-size: clamp(13px, 100cqi / (var(--wx-tn) * .56), 18px); line-height: max(18px, 1.15em); }
.wx-mc-tpos { font: 400 12.5px/17px var(--wtr-ff-sans); color: var(--wtr-header-meta); }
.wx-mc-mid {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 10px;
	padding-top: 6px;
	min-width: 0;
	text-align: center;
}
.wx-mc-ko { display: grid; justify-items: center; gap: 10px; }
.wx-mc-ko[hidden], .wx-mc-score[hidden], .wx-mc-status[hidden] { display: none; }
.wx-mc-kotime,
.wx-mc-score {
	font: 600 44px/1 var(--wtr-ff-mono);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--wtr-header-text);
}
.wx-mc-kotime time { white-space: nowrap; }
.wx-mc-ko.is-off .wx-mc-kotime { text-decoration: line-through; text-decoration-thickness: 3px; opacity: .8; }
.wx-mc-kodate { font: 600 13.5px/1.3 var(--wtr-ff-sans); color: var(--wtr-header-meta); }
.wx-mc-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	block-size: 28px;
	padding: 0 10px;
	border-radius: var(--wtr-radius-pill);
	background: var(--wtr-onband-fill);
	font: 700 13px/1 var(--wtr-ff-sans);
	white-space: nowrap;
}
.wx-mc-count .wx-num { font-weight: 600; }
/* Phone score on a normal line (prototype 390: 57 px box); 72 px from 600 sits on a 72 px line. */
.wx-mc-score { display: flex; align-items: center; gap: 10px; white-space: nowrap; line-height: 1.3; }
.wx-mc-dash { color: var(--wtr-header-meta); font-weight: 400; }
.wx-mc-status { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.wx-mc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	block-size: 24px;
	padding: 0 9px;
	border-radius: 3px;
	background: var(--wtr-onband-fill-2);
	color: var(--wtr-header-text);
	font: 800 12px/1 var(--wtr-ff-sans);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.wx-mc-chip[data-state="live"] { padding: 0 8px; background: var(--wtr-signal); color: var(--wtr-signal-text); }
.wx-mc-chip[data-state="ht"] { background: var(--wtr-cta); color: var(--wtr-cta-text); }
.wx-mc-chip[data-state="pst"],
.wx-mc-chip[data-state="canc"],
.wx-mc-chip[data-state="int"],
.wx-mc-chip[data-state="abd"] {
	background: transparent;
	color: var(--wtr-error-on-brand);
	box-shadow: inset 0 0 0 1.5px var(--wtr-error-line-on-brand);
}
.wx-mc-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.wx-mc-min { font: 600 15px/1.3 var(--wtr-ff-mono); white-space: nowrap; }
.wx-mc-min:empty, .wx-mc-half:empty, .wx-mc-min:not(:empty) + .wx-mc-half { display: none; }
.wx-mc-half { font: 600 15px/1.3 var(--wtr-ff-mono); white-space: nowrap; }
.wx-mc-periods { margin: 0; font: 400 13px/1.4 var(--wtr-ff-sans); color: var(--wtr-header-meta); }
.wx-mc-pp { white-space: nowrap; }
@media (max-width: 599px) {
	.wx-mc-periods { display: grid; }
	.wx-mc-psep { display: none; }
}
.wx-mc-scorers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--wtr-onband-rule);
	font: 400 13px/1.55 var(--wtr-ff-sans);
}
/* While the match is on, three lines are reserved so a new scorer rarely moves the page. */
.wx-mc-scorers.is-live { min-block-size: calc(3 * 13px * 1.55 + 4px + 14px); }
.wx-mc-scol { display: grid; gap: 2px; align-content: start; }
.wx-mc-scol--home { text-align: right; }
.wx-mc-sline strong { font-weight: 700; }
.wx-mc-sline span { color: var(--wtr-header-meta); }

/* Under 360 px (not drawn): the middle column gives way so real team names keep whole words
   (WP0-CR 23 short names + this): smaller numerals, a two-line countdown pill, 12 px name floor. */
@media (max-width: 359px) {
	.wx-mc-teams { gap: 8px; }
	.wx-mc-kotime, .wx-mc-score { font-size: 36px; }
	.wx-mc-score { gap: 6px; }
	.wx-mc-count { display: inline-grid; grid-template-columns: auto auto; justify-content: center; gap: 2px 6px; block-size: auto; min-block-size: 28px; padding-block: 5px; border-radius: 14px; line-height: 1.2; }
	.wx-mc-count .wx-num { grid-column: 1 / -1; justify-self: center; }
	.wx-mc-tname[style] { font-size: clamp(12px, 100cqi / (var(--wx-tn) * .56), 18px); }
}
@media (min-width: 600px) {
	.wx-mc-band { padding-block: 28px; }
	.wx-mc-band-in { gap: 24px; }
	.wx-mc-teams { gap: 48px; }
	.wx-mc-band .wx-mc-logo { --wx-t: 96px; --wx-tp: 12px; --wx-tr: 16px; --wx-tf: 26px; }
	.wx-mc-band .wx-mc-logo .wx-tile-mono::after { inline-size: 28px; }
	.wx-mc-tname { font-size: 26px; }
	.wx-mc-tname[style] { font-size: clamp(18px, 100cqi / (var(--wx-tn) * .56), 26px); }
	.wx-mc-mid { padding-top: 10px; }
	/* 72 px numerals on a 72 px line (prototype at 768 and 1440: lineHeight 72px, box 72). */
	.wx-mc-kotime, .wx-mc-score { font-size: 72px; line-height: 1; }
	.wx-mc-score { gap: 18px; }
	.wx-mc-scorers { padding-top: 18px; }
}
@media (min-width: 1024px) {
	.wx-mc-band { padding-block: 36px 32px; }
}

/* ---------- tabs ---------- */
.wx-mc-tabs { background: var(--wtr-surface); border-bottom: 1px solid var(--wtr-border); }
.wx-mc-tablist {
	display: flex;
	gap: 4px;
	padding-inline: calc(var(--wtr-margin) - 8px);
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.wx-mc-tablist::-webkit-scrollbar { display: none; }
.wx-mc-tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	block-size: 52px;
	padding: 0 14px;
	font: 600 15px/1 var(--wtr-ff-sans);
	color: var(--wtr-meta);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 -3px 0 transparent;
}
.wx-mc-tab:hover { color: var(--wtr-heading); }
.wx-mc-tab[aria-current="page"],
.wx-mc-tab[aria-selected="true"] {
	font-weight: 700;
	color: var(--wtr-heading);
	box-shadow: inset 0 -3px 0 var(--wtr-indicator);
}
.wx-mc-tab:focus-visible { outline-offset: -4px; }
@media (min-width: 600px) { .wx-mc-tablist { padding-inline: calc(var(--wtr-margin) - 8px); } }
@media (min-width: 1280px) { .wx-mc-tablist { justify-content: center; padding-inline: calc(var(--wtr-margin) - 14px); } }

/* ---------- body: main column + predictor aside ---------- */
.wx-mc-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 56px;
	padding-block: 24px 48px;
}
.wx-mc-col { display: grid; gap: 40px; min-width: 0; }
.wx-mc-aside { display: grid; gap: 24px; align-content: start; min-width: 0; }
@media (min-width: 600px) { .wx-mc-body { padding-block: 32px 56px; } }
@media (min-width: 1024px) {
	.wx-mc-body { padding-block: 40px 72px; gap: 56px; }
	.wx-mc-body.has-aside { grid-template-columns: minmax(0, 1fr) var(--wtr-sidebar); }
	.wx-mc-body.has-aside:not(:has(.wtrp)) { grid-template-columns: minmax(0, 1fr); }
	.wx-mc-body:not(.has-aside) > .wx-mc-col,
	.wx-mc-body.has-aside:not(:has(.wtrp)) > .wx-mc-col { inline-size: 100%; max-inline-size: 888px; margin-inline: auto; }
}
.wx-mc-aside:not(:has(.wtrp)) { display: none; }

/* ---------- shared pane bits ---------- */
.wx-mc-panes { min-width: 0; }
.wx-mc-pane[hidden] { display: none; }
.wx-mc-pane-in { display: grid; gap: 16px; min-width: 0; }
#wx-mc-pane-info .wx-mc-pane-in { gap: 28px; }
.wx-mc-phead { display: grid; gap: 4px; }
.wx-mc-phead--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
/* Pane titles sit on a normal line (prototype); only the Match info title is 1.15. */
.wx-mc-h2 { margin: 0; font: 800 24px/1.3 var(--wtr-ff-sans); letter-spacing: normal; color: var(--wtr-heading); }
#wx-mc-pane-info .wx-mc-h2 { line-height: 1.15; }
.wx-mc-h2s { margin: 0; font: 800 20px/1.3 var(--wtr-ff-sans); letter-spacing: normal; color: var(--wtr-heading); }
.wx-mc-h3 { margin: 0; font: 800 20px/1.3 var(--wtr-ff-sans); letter-spacing: normal; color: var(--wtr-heading); }
.wx-mc-psub { margin: 0; font: 400 14.5px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx-mc-pnote, .wx-mc-note { margin: 0; font: 400 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx-mc-label {
	margin: 0;
	font: 700 12px/1.3 var(--wtr-ff-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wtr-meta);
}
@media (min-width: 600px) { .wx-mc-h2 { font-size: 28px; } }

.wx-mc-tlink {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-block-size: var(--wtr-hit);
	padding-block: 6px;
	font: 700 14.5px/1.3 var(--wtr-ff-sans);
	color: var(--wtr-link);
	text-decoration: none;
}
.wx-mc-tlink:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }

/* Answer block (WTR Live's plain-prose score; #wtr-live-answer) */
.wx-mc-answer { display: grid; gap: 4px; }
.wx-mc-answer-lab { font: 700 12px/1.3 var(--wtr-ff-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wtr-meta); }
.wx-mc-answer-t { margin: 0; font: 400 15px/1.5 var(--wtr-ff-sans); color: var(--wtr-text); max-inline-size: 70ch; }

/* Live data delayed (above the panes) */
.wx-mc-delay { display: grid; gap: 8px; }
.wx-mc-delay[hidden] { display: none; }
.wx-mc-delay-at { margin: 0; font: 400 13px/1.4 var(--wtr-ff-sans); color: var(--wtr-meta); }

/* ---------- Match info ---------- */
.wx-mc-cards { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; gap: 16px; }
.wx-mc-card {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 20px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
	min-width: 0;
}
.wx-mc-rows { display: grid; margin: 0; }
.wx-mc-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--wtr-border);
	font: 400 14px/1.3 var(--wtr-ff-sans);
	color: var(--wtr-text);
}
.wx-mc-row dt { margin: 0; }
.wx-mc-row dd { margin: 0; font-weight: 600; color: var(--wtr-heading); text-align: right; }
.wx-mc-zones .wx-mc-row dd { font: 500 14px/1.3 var(--wtr-ff-mono); white-space: nowrap; }
.wx-mc-watch .wx-mc-row { display: grid; grid-template-columns: 120px 1fr; line-height: 1.4; }
.wx-mc-watch .wx-mc-row dt { font-weight: 700; color: var(--wtr-heading); }
.wx-mc-watch .wx-mc-row dd { font-weight: 400; color: var(--wtr-text); text-align: left; }
.wx-mc-kobig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.wx-mc-kobig-t { font: 600 32px/1.3125 var(--wtr-ff-mono); color: var(--wtr-heading); }
.wx-mc-kobig-t.is-off { text-decoration: line-through; }
.wx-mc-kobig-d { font: 600 14px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx-mc-cal { inline-size: 100%; gap: 8px; }
.wx-mc-vname { margin: 0; font: 700 18px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx-mc-card .wx-mc-note { font-size: 12.5px; }
@media (min-width: 600px) { .wx-mc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Form and season so far */
.wx-mc-form { display: grid; gap: 14px; }
.wx-mc-fcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wx-mc-fcard {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 20px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	min-width: 0;
}
.wx-mc-fhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wx-mc-fname { font: 700 17px/1.25 var(--wtr-ff-sans); color: var(--wtr-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-mc-fpos { margin-inline-start: auto; font: 400 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); white-space: nowrap; }
.wx-mc-fcard .wx-form { gap: 4px; }
.wx-mc-fcard .wx-form-t { border-radius: 4px; font-size: 13px; }
.wx-mc-fstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.wx-mc-fstats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }
.wx-mc-fstats dd { margin: 0; font: 600 22px/1.3 var(--wtr-ff-mono); color: var(--wtr-heading); white-space: nowrap; }
.wx-mc-fstats dt { font: 400 12.5px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx-mc-fstats abbr { text-decoration: none; }
.wx-mc-fcoach { margin: 0; font: 400 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx-mc-fcoach a { display: inline-block; padding-block: 14px; margin-block: -14px; color: var(--wtr-link); text-decoration: none; }
.wx-mc-fcoach a:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (min-width: 600px) { .wx-mc-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Team news */
.wx-mc-news { display: grid; gap: 12px; padding: 20px; border-radius: var(--wtr-radius-md); background: var(--wtr-section); }
.wx-mc-news .wx-mc-h3 { font-size: 18px; }
.wx-mc-news-t { margin: 0; font: 400 17px/1.55 var(--wtr-ff-serif); color: var(--wtr-text); }

/* League table snippet */
.wx-mc-table { display: grid; gap: 14px; min-width: 0; }
.wx-mc-ptable { min-width: 0; overflow-x: auto; }

/* ---------- Timeline ---------- */
.wx-mc-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.wx-mc-ev {
	display: grid;
	grid-template-columns: 44px 46px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-block-size: 60px;
	padding: 8px 0;
	border-bottom: 1px solid var(--wtr-border);
}
.wx-mc-ev[data-wx-new] { animation: wx-mc-in var(--wtr-dur-3) var(--wtr-ease); }
@keyframes wx-mc-in { from { background: var(--wtr-tag-bg); } to { background: transparent; } }
.wx-mc-ev-min { font: 600 14px/1.3 var(--wtr-ff-mono); color: var(--wtr-heading); text-align: right; white-space: nowrap; }
.wx-mc-ev-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: 24px;
	border-radius: 3px;
	font: 700 11px/1 var(--wtr-ff-mono);
	letter-spacing: .04em;
	color: var(--wtr-heading);
	box-shadow: inset 0 0 0 1.5px var(--wtr-control);
}
.wx-mc-ev-chip.is-none { box-shadow: none; }
.wx-mc-ev--try .wx-mc-ev-chip { background: var(--wtr-btn); color: var(--wtr-btn-text); box-shadow: none; }
.wx-mc-ev--yc .wx-mc-ev-chip { background: var(--wtr-cta); color: var(--wtr-cta-text); box-shadow: none; }
.wx-mc-ev--rc .wx-mc-ev-chip { background: var(--wtr-signal); color: var(--wtr-signal-text); box-shadow: none; }
.wx-mc-ev--sub .wx-mc-ev-chip { background: var(--wtr-section); color: var(--wtr-text); box-shadow: none; }
.wx-mc-ev-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wx-mc-ev-txt { display: grid; gap: 1px; min-width: 0; }
.wx-mc-ev-who { font: 700 15.5px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); overflow-wrap: anywhere; }
.wx-mc-ev-who a, .wx-mc-ev-body a { color: inherit; text-decoration: none; }
/* Player links in timeline rows: a 44 px hit area inside the 60 px row, layout unchanged (audit target-44). */
.wx-mc-ev-who a { position: relative; }
.wx-mc-ev-who a::after { content: ""; position: absolute; inset: -12px -6px; }
.wx-mc-ev-who a:hover, .wx-mc-ev-body a:hover { text-decoration: underline; text-underline-offset: .18em; }
.wx-mc-ev-desc { font: 400 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx-mc-ev-body { font: 400 15px/1.5 var(--wtr-ff-sans); color: var(--wtr-text); }
.wx-mc-ev-body strong { color: var(--wtr-heading); }
.wx-mc-ev-score { font: 600 15px/1.3 var(--wtr-ff-mono); color: var(--wtr-heading); white-space: nowrap; }
.wx-mc-div {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	font: 800 12.5px/1.3 var(--wtr-ff-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wtr-meta);
}
.wx-mc-div::before, .wx-mc-div::after { content: ""; flex: 1; block-size: 1px; background: var(--wtr-border); }
.wx-mc-div-s { font-family: var(--wtr-ff-mono); color: var(--wtr-heading); }
.wx-mc-div.has-text { flex-wrap: wrap; row-gap: 6px; }
.wx-mc-div-t {
	order: 1;
	flex: 0 0 100%;
	font: 400 15px/1.5 var(--wtr-ff-sans);
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--wtr-text);
}
.wx-mc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; font: 400 12.5px/1.4 var(--wtr-ff-sans); color: var(--wtr-meta); }
/* The prototype keeps 44 / 46 / 12 at 390; only the narrowest phones tighten. */
@media (max-width: 359px) {
	.wx-mc-ev { grid-template-columns: 38px 42px minmax(0, 1fr) auto; gap: 10px; }
}

/* ---------- Line-ups ---------- */
.wx-mc-luseg[hidden] { display: none; }
#wx-mc-pane-lineups .wx-mc-phead--row { align-items: center; gap: 10px; }
.wx-mc-lu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.wx-mc-luteam { display: grid; align-content: start; min-width: 0; }
.wx-mc-luteam[hidden] { display: none; }
.wx-mc-luhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wtr-heading);
}
.wx-mc-luname { margin: 0; font: 700 18px/1.25 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx-mc-coach { margin-inline-start: auto; font: 400 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx-mc-coach a { color: var(--wtr-link); text-decoration: none; }
.wx-mc-coach a:hover { text-decoration: underline; }
.wx-mc-xv { list-style: none; margin: 0; padding: 0; }
.wx-mc-pl {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-block-size: 44px;
	border-bottom: 1px solid var(--wtr-border);
	color: var(--wtr-heading);
	text-decoration: none;
}
a.wx-mc-pl:hover .wx-mc-pl-name { text-decoration: underline; text-underline-offset: .18em; }
.wx-mc-pl-n { font: 600 14px/1.3 var(--wtr-ff-mono); color: var(--wtr-meta); text-align: right; }
.wx-mc-pl-name { font: 600 15px/1.3 var(--wtr-ff-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wx-mc-pl-pos { font: 400 12.5px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); white-space: nowrap; }
.wx-mc-cap {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 1px 5px;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px var(--wtr-control);
	font: 800 10.5px/1.3 var(--wtr-ff-sans);
	vertical-align: 1px;
}
.wx-mc-benchlab { padding: 16px 0 4px; }
/* Bench rows: 40 px as drawn; a row that links to a player keeps a 44 px target. */
.wx-mc-bench .wx-mc-pl { min-block-size: 40px; }
.wx-mc-bench a.wx-mc-pl { min-block-size: 44px; }
.wx-mc-bench .wx-mc-pl-name { font-size: 14.5px; font-weight: 500; }
.wx-mc-pl-on { font: 500 12.5px/1.3 var(--wtr-ff-mono); color: var(--wtr-meta); white-space: nowrap; }
@media (min-width: 600px) {
	.wx-mc-lu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wx-mc-luteam[hidden] { display: grid !important; }
	.wx-mc-luseg { display: none !important; }
}

/* ---------- Stats ---------- */
.wx-mc-key { display: flex; gap: 14px; margin: 0; font: 700 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-text); }
.wx-mc-key span { display: inline-flex; align-items: center; gap: 6px; }
.wx-mc-key span::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 2px; background: var(--wtr-btn); }
.wx-mc-key .wx-mc-key-a::before { background: var(--wtr-accent); }
.wx-mc-stats {
	display: grid;
	gap: 18px;
	padding: 20px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
}
.wx-mc-stat { display: grid; gap: 6px; }
.wx-mc-stat-l { display: grid; grid-template-columns: 72px 1fr 72px; align-items: baseline; }
.wx-mc-stat-l .wx-num { font: 400 16px/1.2 var(--wtr-ff-mono); color: var(--wtr-heading); white-space: nowrap; }
.wx-mc-stat-l .wx-num:last-child { text-align: right; }
.wx-mc-stat-l .is-lead { font-weight: 700; }
.wx-mc-stat-k { font: 600 13.5px/1.3 var(--wtr-ff-sans); color: var(--wtr-text); text-align: center; }
.wx-mc-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; block-size: 8px; }
.wx-mc-bar > span { display: flex; overflow: hidden; background: var(--wtr-section); }
.wx-mc-bar > span:first-child { justify-content: flex-end; border-radius: 4px 0 0 4px; }
.wx-mc-bar > span:last-child { border-radius: 0 4px 4px 0; }
.wx-mc-bar i { display: block; block-size: 100%; background: var(--wtr-btn); }
.wx-mc-bar > span:last-child i { background: var(--wtr-accent); }

/* ---------- Head-to-head ---------- */
.wx-mc-h2hsum {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-border);
	overflow: hidden;
}
.wx-mc-h2hsum > div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 4px; padding: 18px 8px; background: var(--wtr-surface); text-align: center; min-width: 0; }
.wx-mc-h2hsum dd { margin: 0; font: 600 32px/1.3125 var(--wtr-ff-mono); color: var(--wtr-heading); }
.wx-mc-h2hsum dt { font: 600 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-text); overflow-wrap: anywhere; }
.wx-mc-h2hlist { list-style: none; margin: 0; padding: 0; }
.wx-mc-meet {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-block-size: 56px;
	border-bottom: 1px solid var(--wtr-border);
	color: var(--wtr-heading);
	text-decoration: none;
}
a.wx-mc-meet:hover .wx-mc-meet-m { text-decoration: underline; text-underline-offset: .18em; }
.wx-mc-meet-d { font: 500 13px/1.3 var(--wtr-ff-mono); color: var(--wtr-meta); }
.wx-mc-meet-m { font: 500 15px/1.35 var(--wtr-ff-sans); min-width: 0; }
.wx-mc-meet-m .is-win { font-weight: 800; }
.wx-mc-meet-s { font: 600 15px/1 var(--wtr-ff-mono); padding: 0 6px; white-space: nowrap; }
.wx-mc-meet-c { display: none; font: 400 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); text-align: right; }
@media (min-width: 1024px) {
	.wx-mc-meet { grid-template-columns: 120px minmax(0, 1fr) 200px; }
	.wx-mc-meet-c { display: block; }
}

/* ---------- Player of the Match (WTR Predictor's block, restyled in place) ---------- */
.wx-mc-motm {
	display: grid;
	gap: 14px;
	padding: 22px;
	border: 1px solid var(--wtr-border);
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-surface);
}
.wx-mc-motm-q { margin: -6px 0 0; font: 400 14.5px/1.45 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wx-mc-motm .wtrp-potm { padding: 0; border: 0; background: transparent; font-family: var(--wtr-ff-sans); color: var(--wtr-text); }
.wx .wx-mc-motm .wtrp-potm .wtrp__eyebrow,
.wx .wx-mc-motm .wtrp-potm__q { display: none; }
.wx .wx-mc-motm .wtrp-potm__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.wx .wx-mc-motm .wtrp-potm__label { font: 600 13px/1.3 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wx-mc-motm .wtrp-potm__select {
	min-block-size: 48px;
	padding: 10px 12px;
	border: 1px solid var(--wtr-control);
	border-radius: var(--wtr-radius-sm);
	background: var(--wtr-bg);
	color: var(--wtr-heading);
	font: 500 15px/1.3 var(--wtr-ff-sans);
}
.wx .wx-mc-motm .wtrp-potm__go {
	inline-size: auto;
	justify-self: start;
	min-block-size: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--wtr-radius-sm);
	background: var(--wtr-btn);
	color: var(--wtr-btn-text);
	font: 600 15px/1 var(--wtr-ff-sans);
	cursor: pointer;
}
.wx .wx-mc-motm .wtrp-potm__go:hover { background: var(--wtr-btn-hover); }
.wx .wx-mc-motm .wtrp-potm__status { font: 400 13.5px/1.4 var(--wtr-ff-sans); color: var(--wtr-meta); }
.wx .wx-mc-motm .wtrp-potm__row { grid-template-columns: minmax(110px, 1fr) 2fr auto; font: 600 15px/1.3 var(--wtr-ff-sans); color: var(--wtr-heading); }
.wx .wx-mc-motm .wtrp-potm__name a { color: inherit; }
.wx .wx-mc-motm .wtrp-potm__bar { block-size: 10px; border-radius: 3px; background: var(--wtr-section); }
.wx .wx-mc-motm .wtrp-potm__fill { background: var(--wtr-tag-text); }
.wx .wx-mc-motm .wtrp-potm__pct { font: 600 13px/1 var(--wtr-ff-mono); color: var(--wtr-heading); }
.wx .wx-mc-motm .wtrp-potm__total,
.wx .wx-mc-motm .wtrp-potm__none { font: 400 13.5px/1.4 var(--wtr-ff-sans); color: var(--wtr-meta); }
@media (min-width: 600px) {
	.wx .wx-mc-motm .wtrp-potm__form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
	.wx .wx-mc-motm .wtrp-potm__label { grid-column: 1 / -1; }
}

/* ---------- Related stories ---------- */
.wx-mc-related { min-width: 0; }
/* Prototype related block: section gap 14, title 20 / 800 on a normal line, card titles 19 / 700 / 1.25
   (scoped here; the shared panel and card keep their article sizes elsewhere). */
.wx-mc .wx-mc-related { gap: 14px; }
.wx-mc-related .wx-panel-title { line-height: 1.3; }
.wx-mc-related .wx-card-title { font-size: 19px; line-height: 1.25; }

/* ---------- More on this match ---------- */
.wx-mc-more { display: grid; gap: 8px; }
.wx-mc-more ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.wx-mc-more a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wtr-hit);
	font: 600 15px/1.3 var(--wtr-ff-sans);
	color: var(--wtr-link);
	text-decoration: none;
}
.wx-mc-more a:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Predictor panel (petrol shell around WTR Predictor's card) ---------- */
.wx-mc-pred {
	display: grid;
	gap: 12px;
	padding: 20px;
	border-radius: var(--wtr-radius-md);
	background: var(--wtr-header);
	color: var(--wtr-header-text);
	min-width: 0;
}
.wx-mc-pred-eye { margin: 0; font: 800 12px/1.3 var(--wtr-ff-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wtr-header-meta); }
.wx-mc-pred-slot { display: none; }
.wx-mc-pred .wtrp-matchpage { min-width: 0; }
/* The card on petrol: no box of its own, on-brand text, Amber for the chosen side. The
   plugin's own aliases are re-pointed inside this panel only (WP9 owns them elsewhere). */
.wx .wx-mc-pred .wtrp {
	--wtrp-graphite: var(--wtr-header-text);
	--wtrp-ink: var(--wtr-header-text);
	--wtrp-page: transparent;
	--wtrp-surface: var(--wtr-onband-fill);
	--wtrp-muted: var(--wtr-header-meta);
	--wtrp-silver: var(--wtr-onband-line);
	--wtrp-hairline: var(--wtr-onband-rule);
	--wtrp-emerald: var(--wtr-accent);
	--wtrp-emerald-bright: var(--wtr-accent);
	/* page tokens read by WP9's predictor-card.css mean their on-brand values on petrol */
	--wtr-bg: var(--wtr-header);
	--wtr-surface: var(--wtr-header);
	--wtr-section: var(--wtr-onband-fill);
	--wtr-text: var(--wtr-header-text);
	--wtr-heading: var(--wtr-header-text);
	--wtr-meta: var(--wtr-header-meta);
	--wtr-loss: var(--wtr-header-text);
	--wtr-border: var(--wtr-onband-rule);
	--wtr-control: var(--wtr-onband-line);
	--wtr-link: var(--wtr-header-text);
	--wtr-link-hover: var(--wtr-header-text);
	--wtr-btn: var(--wtr-cta);
	--wtr-btn-text: var(--wtr-cta-text);
	--wtr-btn-hover: var(--wtr-cta-hover);
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--wtr-header-text);
	font-family: var(--wtr-ff-sans);
}
.wx .wx-mc-pred .wtrp__head { padding: 0 0 12px; border-bottom: 1px solid var(--wtr-onband-rule); }
.wx .wx-mc-pred .wtrp__eyebrow { font: 700 12px/1.3 var(--wtr-ff-sans); letter-spacing: .08em; color: var(--wtr-header-meta); }
.wx .wx-mc-pred .wtrp__match { font: 700 19px/1.25 var(--wtr-ff-sans); letter-spacing: 0; color: var(--wtr-header-text); }
.wx .wx-mc-pred .wtrp__matchlink { color: inherit; }
.wx .wx-mc-pred .wtrp__meta,
.wx .wx-mc-pred .wtrp__abs { color: var(--wtr-header-meta); }
.wx .wx-mc-pred .wtrp__pill { background: var(--wtr-onband-fill); color: var(--wtr-header-text); border-color: transparent; }
.wx .wx-mc-pred .wtrp__q { color: var(--wtr-header-text); }
.wx .wx-mc-pred .wtrp__qsub,
.wx .wx-mc-pred .wtrp__status,
.wx .wx-mc-pred .wtrp__plain,
.wx .wx-mc-pred .wtrp__mhint,
.wx .wx-mc-pred .wtrp__esub,
.wx .wx-mc-pred .wtrp__cnote,
.wx .wx-mc-pred .wtrp__rankfoot,
.wx .wx-mc-pred .wtrp__pollnote,
.wx .wx-mc-pred .wtrp__terms,
.wx .wx-mc-pred .wtrp__livewait,
.wx .wx-mc-pred .wtrp__noscript { color: var(--wtr-header-meta); }
.wx .wx-mc-pred .wtrp__team,
.wx .wx-mc-pred .wtrp__draw,
.wx .wx-mc-pred .wtrp__secondary {
	background: transparent;
	color: var(--wtr-header-text);
	border: 1.5px solid var(--wtr-onband-line);
	border-radius: var(--wtr-radius-sm);
	box-shadow: none;
}
.wx .wx-mc-pred .wtrp__team[aria-pressed="true"],
.wx .wx-mc-pred .wtrp__draw[aria-pressed="true"],
.wx .wx-mc-pred .wtrp__secondary[aria-pressed="true"] {
	background: var(--wtr-cta);
	border-color: var(--wtr-cta);
	color: var(--wtr-cta-text);
}
.wx .wx-mc-pred .wtrp__team[aria-pressed="true"] .wtrp__tmeta { color: var(--wtr-cta-text); }
.wx .wx-mc-pred .wtrp__tname { color: inherit; }
.wx .wx-mc-pred .wtrp__tmeta { color: var(--wtr-header-meta); }
.wx .wx-mc-pred .wtrp__badge { background: var(--wtr-band-tile); }
.wx .wx-mc-pred .wtrp__initials { color: var(--wtr-mono-ink); }
.wx .wx-mc-pred .wtrp__check { background: var(--wtr-cta-text); color: var(--wtr-cta); border-radius: 3px; }
.wx .wx-mc-pred .wtrp :focus-visible { outline: 2px solid var(--wtr-accent); outline-offset: 2px; }
.wx .wx-mc-pred .wtrp__submit,
.wx .wx-mc-pred .wtrp__ego {
	background: var(--wtr-cta);
	color: var(--wtr-cta-text);
	border: 0;
	border-radius: var(--wtr-radius-sm);
}
/* Disabled and locked controls stay readable on petrol (state shown by fill and border, not fade). */
.wx .wx-mc-pred .wtrp__submit:disabled { opacity: 1; background: var(--wtr-onband-fill); color: var(--wtr-header-text); cursor: default; }
.wx .wx-mc-pred .wtrp--locked .wtrp__team,
.wx .wx-mc-pred .wtrp--locked .wtrp__draw,
.wx .wx-mc-pred .wtrp--locked .wtrp__step,
.wx .wx-mc-pred .wtrp__team:disabled,
.wx .wx-mc-pred .wtrp__draw:disabled { opacity: 1; border-color: var(--wtr-onband-rule); cursor: default; }
.wx .wx-mc-pred .wtrp__team:disabled .wtrp__tmeta { color: var(--wtr-header-meta); }
/* Locked, not picked: header-meta words (5.4:1), above WP9's page-grey rule (0,4,0) */
.wx .wx-mc-pred .wtrp__team:disabled:not([aria-pressed="true"]),
.wx .wx-mc-pred .wtrp__draw:disabled:not([aria-pressed="true"]) { color: var(--wtr-header-meta); border-color: var(--wtr-onband-rule); }
.wx .wx-mc-pred .wtrp__step:disabled { color: var(--wtr-header-meta); }
.wx .wx-mc-pred .wtrp__ego:disabled { opacity: 1; background: var(--wtr-onband-fill); color: var(--wtr-header-text); cursor: default; }
.wx .wx-mc-pred .wtrp__livelabel,
.wx .wx-mc-pred .wtrp__liveempty,
.wx .wx-mc-pred .wtrp__liverank,
.wx .wx-mc-pred .wtrp__livefoot { color: var(--wtr-header-meta); }
.wx .wx-mc-pred .wtrp__livepts,
.wx .wx-mc-pred .wtrp__livescore { color: var(--wtr-header-text); }
/* Live tag: the match header's live chip (white on signal, 4.58:1), not --wtr-loss on petrol (1.30:1). */
.wx .wx-mc-pred .wtrp__livetag { background: var(--wtr-signal); color: var(--wtr-signal-text); }
.wx .wx-mc-pred .wtrp__livetag--final { background: var(--wtr-onband-fill); color: var(--wtr-header-text); }
.wx .wx-mc-pred .wtrp__einput,
.wx .wx-mc-pred .wtrp__num {
	background: var(--wtr-input-on-brand-bg);
	color: var(--wtr-input-on-brand-text);
	border-color: var(--wtr-onband-line);
}
.wx .wx-mc-pred .wtrp__step { background: var(--wtr-onband-fill); color: var(--wtr-header-text); border-color: var(--wtr-onband-line); }
.wx .wx-mc-pred .wtrp__margin,
.wx .wx-mc-pred .wtrp__live,
.wx .wx-mc-pred .wtrp__email,
.wx .wx-mc-pred .wtrp__name,
.wx .wx-mc-pred .wtrp__actions,
.wx .wx-mc-pred .wtrp__split { background: transparent; border-color: var(--wtr-onband-rule); color: var(--wtr-header-text); }
.wx .wx-mc-pred .wtrp__msummary,
.wx .wx-mc-pred .wtrp__mlabel,
.wx .wx-mc-pred .wtrp__eprompt,
.wx .wx-mc-pred .wtrp__splitn { color: var(--wtr-header-text); }
.wx .wx-mc-pred .wtrp__bar { background: var(--wtr-onband-fill); }
.wx .wx-mc-pred .wtrp__seg--a { background: var(--wtr-header-text); color: var(--wtr-header); }
.wx .wx-mc-pred .wtrp__seg--b { background: var(--wtr-accent); color: var(--wtr-cta-text); }
.wx .wx-mc-pred .wtrp__seg--d { background: var(--wtr-header-meta); color: var(--wtr-header); }
.wx .wx-mc-pred a { color: var(--wtr-header-text); }
/* The POTM vote lives in the main column; the copy inside the card stays hidden. */
.wx .wx-mc-pred .wtrp-potm { display: none; }