/*
 * Homepage "Head to head" — the dark band directly under World rankings, where
 * two ranked players are set against each other.
 *
 * COLOR. The brief for this section pinned four hexes (#0c2a32 / #ef3f52 /
 * #f4f6f7 / #8fa5ac). Each is a near-miss of a token this site already owns,
 * and shipping them literally would have put two slightly different reds and
 * two slightly different off-whites on the same page -- exactly the drift the
 * brief's own "do not introduce new colors" rule exists to prevent. So they are
 * mapped onto the real tokens here, once, and everything below reads the
 * aliases: re-pointing this block is the whole job if that call is ever
 * reversed.
 *
 * SHAPE. Every corner in this section is square, deliberately, against a site
 * whose cards and buttons are rounded (--pc-radius). It reads as this section's
 * own signature rather than as a mistake precisely BECAUSE it is total -- the
 * plates, the bars and the button all agree. The two circles are the exception
 * that makes the rule visible.
 */

.pc-h2h {
	--h2h-fg: var(--pc-dark-text);
	--h2h-muted: var(--pc-dark-text-muted);
	--h2h-accent: var(--pc-red);
	/* The plate red is the DEEPER of the two brand reds, not the accent one:
	   white 13px text on --pc-red lands at 4.15:1, under AA, while on this it
	   clears 5.1:1. Visually it is the same red; measurably it is a readable
	   one. --pc-red is still the accent everywhere it sits on the dark ground
	   (rules, bars, button, circle) where it has all the contrast it needs. */
	--h2h-plate: var(--pc-red-hover);
	--h2h-plate-hover: var(--pc-red);
	/* Both tints are the foreground at low alpha rather than a flat grey, so
	   the rules stay in the same petrol family as the ground they sit on. */
	--h2h-line: rgba(240, 246, 252, 0.12);
	--h2h-line-soft: rgba(240, 246, 252, 0.09);

	background: var(--pc-dark-bg);
	color: var(--h2h-fg);
	padding-block: 44px;
}

/* The section paints its own ground edge to edge, but its CONTENT keeps the
   site container, so the heading lines up with "World rankings" directly
   above it. */

.pc-h2h ::selection {
	background: var(--h2h-accent);
	color: #fff;
}

.pc-h2h a:focus-visible,
.pc-h2h button:focus-visible,
.pc-h2h summary:focus-visible {
	outline: 2px solid var(--h2h-fg);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- Header row */

.pc-h2h-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	padding-bottom: 18px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--h2h-line);
}

/* Size and casing now come from .pc-heading--section (components.css), which
   this band shares with the other two homepage headings. Only the margin is
   its own: it sits in a flex row beside the lede. */
.pc-h2h-title {
	margin: 0;
}

.pc-h2h-lede {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--h2h-accent);
}

/* ------------------------------------------------------------------ Grid */

.pc-h2h-grid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr) 280px;
	gap: 44px;
	align-items: start;
}

/* -------------------------------------------------------- Player columns */

.pc-h2h-player--b {
	text-align: right;
}

.pc-h2h-portrait {
	display: grid;
	place-items: center;
	width: 160px;
	height: 160px;
	margin: 0 auto 22px;
	border: 2px solid var(--h2h-accent);
	border-radius: 50%;
	overflow: hidden;
	background: var(--pc-dark-surface);
}

.pc-h2h-player--b .pc-h2h-portrait {
	border-color: var(--h2h-fg);
}

.pc-h2h-portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No photo on file. Initials, not a Gravatar silhouette: a stranger's default
   avatar at 160px says less than two letters of the name underneath it. */
.pc-h2h-portrait-initials {
	font-family: var(--pc-font-heading);
	font-size: 3.25rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--h2h-muted);
}

/* min-height is load-bearing, not padding: a name long enough to wrap onto a
   second line ("Aleksander Wiśniewski") makes its plate 27px taller than the
   other one, and that pushes its whole Rank/Age/Category/Club list out of step
   with the opposite column -- breaking the exact row-against-row reading this
   section exists for. Reserving both lines up front keeps the two lists
   locked together whichever pair comes up; the shorter name is then centred
   in the block rather than sitting at the top of it. */
.pc-h2h-plate {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 6.25rem;
	margin: 0;
	padding: 12px 18px;
	background: var(--h2h-plate);
	color: #fff;
	transition: background-color 0.15s ease;
}

.pc-h2h-player--b .pc-h2h-plate {
	background: var(--h2h-fg);
	color: var(--pc-dark-bg);
}

.pc-h2h-plate:hover,
.pc-h2h-plate:focus-within {
	background: var(--h2h-plate-hover);
}

.pc-h2h-player--b .pc-h2h-plate:hover,
.pc-h2h-player--b .pc-h2h-plate:focus-within {
	background: #fff;
}

.pc-h2h-name {
	display: block;
	font-family: var(--pc-font-heading);
	/* Floors at 20px so two plates side by side on a 360px phone still hold a
	   long surname without hyphenating it into nonsense. */
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	overflow-wrap: break-word;
}

.pc-h2h-plate:hover .pc-h2h-name {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.pc-h2h-country {
	display: block;
	margin-top: 3px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Label/value pairs under the plate. The <details> wrapper is inert here --
   see the 640px block, which is the only place it does anything. */

.pc-h2h-facts {
	margin-top: 20px;
}

.pc-h2h-facts-toggle {
	display: none;
}

.pc-h2h-facts-list {
	margin: 0;
}

.pc-h2h-fact {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pc-space-sm);
	padding: 11px 0;
	border-bottom: 1px solid var(--h2h-line-soft);
}

.pc-h2h-fact:last-child {
	border-bottom: 0;
}

.pc-h2h-fact dt {
	font-size: 0.875rem;
	color: var(--h2h-muted);
}

.pc-h2h-fact dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	color: var(--h2h-fg);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Score head */

.pc-h2h-score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 34px);
	margin-bottom: 26px;
}

.pc-h2h-score-value {
	font-family: var(--pc-font-heading);
	font-size: clamp(3rem, 6vw, 4.75rem);
	font-weight: 700;
	line-height: 1;
	color: #fff;
	/* Two numbers meant to be read against each other must not shift width
	   with their digits -- 1 and 3 have to occupy the same column. */
	font-variant-numeric: tabular-nums;
}

.pc-h2h-score-badge {
	display: grid;
	place-content: center;
	justify-items: center;
	flex: 0 0 auto;
	width: clamp(86px, 12vw, 118px);
	height: clamp(86px, 12vw, 118px);
	border: 3px solid var(--h2h-accent);
	border-radius: 50%;
}

.pc-h2h-score-badge > span {
	font-family: var(--pc-font-heading);
	font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pc-h2h-score-badge-vs {
	color: var(--h2h-fg);
}

.pc-h2h-score-badge-wins {
	color: var(--h2h-muted);
}

/* ------------------------------------------------------ Comparison rows */

.pc-h2h-row {
	padding: 14px 0 10px;
	border-bottom: 1px solid var(--h2h-line);
}

.pc-h2h-row:last-child {
	border-bottom: 0;
}

.pc-h2h-row-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: baseline;
	gap: var(--pc-space-sm);
	margin-bottom: 10px;
}

.pc-h2h-row-value {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--h2h-fg);
	font-variant-numeric: tabular-nums;
}

.pc-h2h-row-value:last-child {
	text-align: right;
}

.pc-h2h-row-label {
	font-family: var(--pc-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: var(--h2h-muted);
}

.pc-h2h-bars {
	display: flex;
	gap: 6px;
}

/* Each half is the track AND the alignment context for its own fill: the left
   one fills from the centre outwards to the left, the right one to the right,
   so the two read as one bar growing away from a shared middle. The track is
   what keeps "0 against 0" legible as a real answer rather than as a bar that
   failed to render. */
.pc-h2h-bar {
	display: flex;
	flex: 1 1 0;
	height: 3px;
	background: var(--h2h-line-soft);
}

.pc-h2h-bar--a {
	justify-content: flex-end;
}

.pc-h2h-bar-fill {
	display: block;
	flex: 0 0 auto;
	height: 100%;
}

.pc-h2h-bar--a .pc-h2h-bar-fill {
	background: var(--h2h-accent);
}

.pc-h2h-bar--b .pc-h2h-bar-fill {
	background: var(--h2h-fg);
}

/* ----------------------------------------------------------- The button */

.pc-h2h-actions {
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

.pc-h2h-shuffle {
	gap: 10px;
	padding: 14px 26px;
	border-radius: 0;
	font-family: var(--pc-font-heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Fetching. The icon is the only thing that moves, and it moves because it is
   reporting work in progress -- everything else in this section is still. */
.pc-h2h-shuffle[aria-busy='true'] {
	cursor: progress;
	opacity: 0.75;
}

.pc-h2h-shuffle[aria-busy='true'] .pc-h2h-shuffle-icon {
	animation: pc-h2h-spin 0.8s linear infinite;
}

@keyframes pc-h2h-spin {
	to {
		transform: rotate(360deg);
	}
}

/* The swap itself: the new pair arrives at full opacity, the old one is what
   dims. One authored moment, ~120ms, and nothing else in the section animates. */
.pc-h2h-body {
	transition: opacity 0.12s ease-out;
}

.pc-h2h-body[aria-busy='true'] {
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.pc-h2h-shuffle[aria-busy='true'] .pc-h2h-shuffle-icon {
		animation: none;
	}

	.pc-h2h-grid {
		transition: none;
	}
}

/* ---------------------------------------------------------- Two columns */

@media (max-width: 1024px) {
	/* Named areas, not auto-placement: the centre column sits BETWEEN the two
	   players in the DOM (which is what makes the desktop layout work without
	   any placement at all), so left to itself the grid lays them out as three
	   stacked rows -- player, comparison, player. Naming the areas is what puts
	   the two players back on one row with everything they are compared on
	   underneath them. */
	.pc-h2h-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			'playera playerb'
			'centre centre';
		gap: 32px;
	}

	.pc-h2h-player--a {
		grid-area: playera;
	}

	.pc-h2h-player--b {
		grid-area: playerb;
	}

	.pc-h2h-centre {
		grid-area: centre;
	}

	/* Half a tablet each is far more width than a name plate wants, and a
	   Rank/value pair stretched across 470px stops reading as a pair. Both
	   halves keep their desktop measure and settle against the outer edges,
	   framing the comparison instead of sprawling across it. */
	.pc-h2h-player {
		width: 100%;
		max-width: 22rem;
	}

	.pc-h2h-player--b {
		margin-left: auto;
	}

	.pc-h2h-centre {
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
	}
}

/* -------------------------------------------------------- Single column */

@media (max-width: 640px) {
	.pc-h2h {
		padding-block: 32px;
	}

	.pc-h2h-head {
		margin-bottom: 24px;
	}

	/* The score is the headline on a phone, so it goes first and the two
	   plates sit under it as a pair. display:contents dissolves the centre
	   column so its three parts can be placed around the players. */
	.pc-h2h-centre {
		display: contents;
	}

	.pc-h2h-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			'score score'
			'playera playerb'
			'rows rows'
			'picker picker'
			'cta cta';
		gap: 20px 14px;
	}

	.pc-h2h-score {
		grid-area: score;
		margin-bottom: 0;
	}

	.pc-h2h-player--a {
		grid-area: playera;
	}

	.pc-h2h-player--b {
		grid-area: playerb;
	}

	.pc-h2h-rows {
		grid-area: rows;
	}

	.pc-h2h-actions {
		grid-area: cta;
		margin-top: 0;
	}

	.pc-h2h-portrait {
		width: 84px;
		height: 84px;
		margin-bottom: 14px;
	}

	.pc-h2h-portrait-initials {
		font-size: 1.75rem;
	}

	.pc-h2h-plate {
		min-height: 5.25rem;
		padding: 10px 12px;
	}

	/* Four label/value rows per player, twice over, is most of a phone screen
	   spent on the least of the comparison -- so here, and only here, the
	   <details> earns its keep. head-to-head.js closes it below this
	   breakpoint; with JS off it simply stays open, which is still readable. */
	.pc-h2h-facts {
		margin-top: 14px;
	}

	/* Any `display` other than list-item drops the UA's disclosure triangle, so
	   a summary styled as a flex row has to bring its own -- otherwise this is
	   a line of text with nothing to say it can be opened. Drawn from borders
	   rather than set as a glyph, so it inherits the section's own color and
	   turns with the state. */
	.pc-h2h-facts-toggle {
		display: flex;
		align-items: center;
		/* Packed against the label, not pushed to the column edge: two
		   summaries mirrored across a 14px gutter put their chevrons side by
		   side in the middle, where they read as one stray pair of arrows
		   belonging to neither column. */
		justify-content: flex-start;
		gap: 8px;
		padding: 8px 0;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--h2h-muted);
		cursor: pointer;
		list-style: none;
	}

	.pc-h2h-facts-toggle::-webkit-details-marker {
		display: none;
	}

	.pc-h2h-facts-toggle::after {
		content: '';
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		margin-top: -3px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	.pc-h2h-facts[open] .pc-h2h-facts-toggle {
		color: var(--h2h-fg);
	}

	.pc-h2h-facts[open] .pc-h2h-facts-toggle::after {
		margin-top: 3px;
		transform: rotate(-135deg);
	}

	/* Mirrored with the plate above it: label against the outer edge, chevron
	   tucked in beside it. (In row-reverse, flex-start IS the right edge.) */
	.pc-h2h-player--b .pc-h2h-facts-toggle {
		flex-direction: row-reverse;
	}

	@media (prefers-reduced-motion: reduce) {
		.pc-h2h-facts-toggle::after {
			transition: none;
		}
	}

	.pc-h2h-fact {
		padding: 8px 0;
	}

	.pc-h2h-shuffle {
		width: 100%;
		justify-content: center;
	}
}

/* ================================================== Event breakdown table */
/*
 * The receipt behind the score above: every match these two have actually
 * played against each other. It sits inside .pc-h2h-body with the comparison,
 * so "Random matchup" swaps the summary and its evidence in one move.
 */

.pc-h2h-breakdown {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--h2h-line);
}

.pc-h2h-breakdown-title {
	margin: 0 0 18px;
	font-family: var(--pc-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--h2h-fg);
}

/* Shown when the pair picker had to fall back to two players who have never
   met. Saying so is what explains the 0 - 0 above; an absent table would read
   as something that failed to load. */
.pc-h2h-breakdown-empty {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--h2h-muted);
}

.pc-h2h-breakdown-scroll {
	overflow-x: auto;
	/* The scrollbar is part of the design too -- left alone it ships as a
	   bright system widget across the bottom of a dark petrol panel. */
	scrollbar-width: thin;
	scrollbar-color: var(--h2h-line) transparent;
}

.pc-h2h-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.pc-h2h-table th {
	padding: 0 16px 12px 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--h2h-muted);
	border-bottom: 1px solid var(--h2h-line);
}

.pc-h2h-table td {
	padding: 14px 16px 14px 0;
	font-size: 0.9375rem;
	vertical-align: middle;
	color: var(--h2h-fg);
	border-bottom: 1px solid var(--h2h-line-soft);
}

.pc-h2h-table tr:last-child td {
	border-bottom: 0;
}

.pc-h2h-table th:last-child,
.pc-h2h-table td:last-child {
	padding-right: 0;
	text-align: right;
}

/* .pc-h2h-table td already sets the foreground colour at equal specificity,
   so the muted year has to be qualified to win -- unqualified it silently
   rendered at full brightness and competed with the winner name beside it. */
.pc-h2h-table .pc-h2h-td-year {
	white-space: nowrap;
	color: var(--h2h-muted);
	font-variant-numeric: tabular-nums;
}

/* Which of the two won, before a single name is read, in that player's own
   colour from the cards above. A square, not a border-left on the row: this is
   a legend mark that belongs to the name it precedes, not a stripe on a card. */
/* Floated, not inline-block. Two inline-blocks are separated by the source
   newline between them, which renders as a real space -- so "mark + body at
   exactly 100%" overflowed by that space and dropped the body onto its own
   line, stranding the colour square above the name. A float has no such gap. */
.pc-h2h-td-winner-mark {
	float: left;
	width: 9px;
	height: 9px;
	margin-top: 6px;
	margin-right: 10px;
}

.pc-h2h-td-winner-mark--a {
	background: var(--h2h-accent);
}

.pc-h2h-td-winner-mark--b {
	background: var(--h2h-fg);
}

/* flow-root, not overflow:hidden: it keeps the block off the float beside it
   without also clipping the focus ring on the name link inside. */
.pc-h2h-td-winner-body {
	display: flow-root;
}

.pc-h2h-td-winner-name,
.pc-h2h-td-event-name {
	color: var(--h2h-fg);
	text-decoration: none;
}

.pc-h2h-td-winner-name {
	display: block;
	font-weight: 700;
}

.pc-h2h-td-event-name {
	font-weight: 600;
}

.pc-h2h-td-winner-name:hover,
.pc-h2h-td-winner-name:focus-visible,
.pc-h2h-td-event-name:hover,
.pc-h2h-td-event-name:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The doubles partner, and the category. Both are the difference between "they
   played" and "they played THIS" -- in a 35-category sport with heavy doubles,
   a breakdown without them is ambiguous. */
.pc-h2h-td-sub {
	display: block;
	margin-top: 2px;
	font-size: 0.8125rem;
	color: var(--h2h-muted);
}

.pc-h2h-td-score {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Short, known values ("Quarterfinal", "Outdoor Clay"). Letting them break
   is what made the table look broken in the middle widths -- one row 75px
   tall and the next 124px. Held on one line, the only cell that can still
   wrap is the tournament title, which is the one place wrapping reads as
   normal rather than as damage. */
.pc-h2h-td-round,
.pc-h2h-td-surface {
	white-space: nowrap;
}

.pc-h2h-badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--h2h-muted);
	border: 1px solid var(--h2h-line);
}

.pc-h2h-view-btn {
	display: inline-block;
	padding: 7px 16px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	color: var(--h2h-fg);
	border: 1px solid var(--h2h-accent);
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Filled with the DEEPER red on hover, same reason the name plates use it:
   white on --pc-red is 4.15:1, under AA for text this size. */
.pc-h2h-view-btn:hover,
.pc-h2h-view-btn:focus-visible {
	background: var(--h2h-plate);
	color: #fff;
}

/* -------------------------------------------- Breakdown, single column */

/* 760px. Above it the table stays a table: with Round and Surface held on one
   line (above), the only thing that wraps in the middle widths is the
   tournament title, which is fine, and the scroll container catches the rest.
   Below it seven columns stop being a table at all, so each row re-lays out as
   a block: who won and by how much first, then the event, then the three facts
   as a labelled strip. Switching earlier was worse, not better -- at 1080 a
   block row is a 1000px-wide band holding four short values. */
@media (max-width: 760px) {
	.pc-h2h-table,
	.pc-h2h-table tbody,
	.pc-h2h-table tr,
	.pc-h2h-table td {
		display: block;
	}

	.pc-h2h-table thead {
		/* The column headers move into each cell's own ::before below, so the
		   original row would be a duplicate. Not display:none on the <th>s
		   themselves -- the table keeps its header semantics either way. */
		display: none;
	}

	.pc-h2h-table tr {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		gap: 6px 14px;
		grid-template-areas:
			'winner winner score'
			'event event event'
			'year round surface'
			'view view view';
		padding: 16px 0;
		border-bottom: 1px solid var(--h2h-line);
	}

	.pc-h2h-table tr:last-child {
		border-bottom: 0;
	}

	.pc-h2h-table td {
		padding: 0;
		border-bottom: 0;
	}

	.pc-h2h-td-winner {
		grid-area: winner;
	}

	.pc-h2h-td-score {
		grid-area: score;
	}

	.pc-h2h-td-event {
		grid-area: event;
	}

	.pc-h2h-td-year {
		grid-area: year;
	}

	.pc-h2h-td-round {
		grid-area: round;
	}

	.pc-h2h-td-surface {
		grid-area: surface;
	}

	/* Right-aligned, mirroring where View sits in the table it replaces -- and
	   sized to its own label, never stretched: "Draw" is a secondary per-row
	   link, not the section's call to action. */
	.pc-h2h-td-view {
		grid-area: view;
		margin-top: 6px;
		text-align: right;
	}

	/* Only the three facts carry their label -- a name, a score and an event
	   title announce themselves. */
	.pc-h2h-td-year::before,
	.pc-h2h-td-round::before,
	.pc-h2h-td-surface::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--h2h-muted);
	}

	.pc-h2h-table .pc-h2h-td-year,
	.pc-h2h-table .pc-h2h-td-round,
	.pc-h2h-table .pc-h2h-td-surface {
		margin-top: 6px;
		font-size: 0.875rem;
		color: var(--h2h-fg);
	}

	.pc-h2h-td-score {
		text-align: right;
		font-weight: 700;
	}

	/* Round and Surface give up their nowrap here: in the labelled strip they
	   have a third of a phone each, and a wrapped "Indoor Parquet" beats one
	   that pushes the strip into a horizontal scroll. */
	.pc-h2h-td-round,
	.pc-h2h-td-surface {
		white-space: normal;
	}
}

/* ================================================================ Pickers */
/*
 * "Or pick two players" — the way out of the random draw, sitting between the
 * comparison it changes and the shuffle button it is the alternative to.
 *
 * No Compare button, by design: choosing a name IS the action and the section
 * re-renders on the spot. Each field also carries whoever is currently in that
 * slot, so the control states what it is showing rather than sitting empty
 * beside a comparison it looks unrelated to.
 */

.pc-h2h-picker {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--h2h-line);
}

.pc-h2h-picker-title {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--h2h-muted);
}

.pc-h2h-picker-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* The suggestion panel is positioned against this. */
.pc-h2h-picker-field {
	position: relative;
	min-width: 0;
}

.pc-h2h-picker-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 0.8125rem;
	color: var(--h2h-muted);
}

/* The same two-colour language as the winner marks in the breakdown, so which
   field drives which card needs no explaining. */
.pc-h2h-picker-mark {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
}

.pc-h2h-picker-mark--a {
	background: var(--h2h-accent);
}

.pc-h2h-picker-mark--b {
	background: var(--h2h-fg);
}

.pc-h2h-picker-input {
	width: 100%;
	padding: 10px 12px;
	font-family: var(--pc-font-body);
	font-size: 0.9375rem;
	color: var(--h2h-fg);
	background: var(--pc-dark-surface);
	border: 1px solid var(--pc-dark-border);
	border-radius: 0;
	appearance: none;
}

/* Placeholder text carries the same contrast requirement as body text, so it
   takes the muted token rather than the browser's own faded grey. */
.pc-h2h-picker-input::placeholder {
	color: var(--h2h-muted);
	opacity: 1;
}

.pc-h2h-picker-input:focus {
	outline: 2px solid var(--h2h-fg);
	outline-offset: 2px;
	border-color: var(--h2h-fg);
}

.pc-h2h-picker-list {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: 260px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	background: var(--pc-dark-surface);
	border: 1px solid var(--pc-dark-border);
	/* Floating over the comparison, so it needs a real drop -- offset and
	   blur, not a flat halo -- to read as being above it. */
	box-shadow: 0 12px 28px rgba(4, 20, 26, 0.55);
	scrollbar-width: thin;
	scrollbar-color: var(--h2h-line) transparent;
}

.pc-h2h-picker-list[hidden] {
	display: none;
}

.pc-h2h-picker-option {
	padding: 9px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--h2h-line-soft);
}

.pc-h2h-picker-option:last-child {
	border-bottom: 0;
}

.pc-h2h-picker-option:hover,
.pc-h2h-picker-option.is-active {
	background: var(--h2h-plate);
}

.pc-h2h-picker-option-name {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--h2h-fg);
}

/* Two people can share a name; country and standing are what tell them apart. */
.pc-h2h-picker-option-meta {
	display: block;
	margin-top: 1px;
	font-size: 0.8125rem;
	color: var(--h2h-muted);
}

/* White on the deep red clears 5.1:1; the muted grey on it would not, so the
   meta line brightens with its row instead of staying grey on a red ground. */
.pc-h2h-picker-option:hover .pc-h2h-picker-option-name,
.pc-h2h-picker-option.is-active .pc-h2h-picker-option-name,
.pc-h2h-picker-option:hover .pc-h2h-picker-option-meta,
.pc-h2h-picker-option.is-active .pc-h2h-picker-option-meta {
	color: #fff;
}

@media (max-width: 640px) {
	.pc-h2h-picker {
		grid-area: picker;
		margin-top: 0;
		padding-top: 18px;
	}

	.pc-h2h-picker-fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	/* 16px exactly: anything smaller and iOS Safari zooms the whole page the
	   moment this is focused, and never zooms back out. */
	.pc-h2h-picker-input {
		font-size: 1rem;
	}
}