/*
 * Homepage leaderboard section.
 *
 * Layout: explanatory copy on the left, the ranked list in a compact pane on
 * the right. The pane is deliberately narrow — a leaderboard is a scanning
 * pattern, and a ranked list allowed to stretch across a 1200px container
 * spreads rank/handle/score so far apart that a row stops reading as one thing.
 * (Verified in-browser at 1440px: the full-width version was genuinely hard to
 * read, not merely sparse.)
 *
 * Restrained by design: hairline rules and typography rather than cards,
 * gradients or shadows. Red marks first place only — the brief is explicit that
 * red is the accent that marks what matters, not a background.
 *
 * Everything is scoped under .ah-board so nothing here can reach the rest of
 * the homepage or the parent theme.
 */

.ah-board {
	background: var(--color-white);
}

/* ---- Two-column layout ---- */

.ah-board__layout {
	display: grid;
	/* minmax(0,…) so the pane can shrink rather than force overflow. */
	/*
	 * Two balanced halves filling the container, so the pane's right edge lines
	 * up with every other section on the page.
	 *
	 * Two earlier attempts were wrong in opposite directions: a narrow fixed
	 * pane inside a full-width row left ~380px of dead space between the copy
	 * and the pane, and capping the whole block at 940px just moved that dead
	 * space to the right of the pane. Splitting the row evenly removes it
	 * instead of relocating it.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: start;
}

.ah-board__intro {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-grey-700);
	max-width: 52ch;
	margin: 0;
}

.ah-board__note {
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--color-grey-600);
	max-width: 52ch;
	margin: var(--space-4) 0 0;
}

.ah-board__actions {
	margin-top: var(--space-5);
}

/* ---- The pane ---- */

.ah-board__pane {
	border: 1px solid var(--color-grey-200);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	background: var(--color-white);
}

.ah-board__pane-label {
	margin: 0 0 var(--space-3);
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-grey-600);
}

.ah-board__empty {
	margin: 0;
	padding: var(--space-5) var(--space-3);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-grey-600);
	text-align: center;
}

/* ---- The list ---- */

.ah-board__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ah-board__row {
	display: grid;
	/* Fixed rank column keeps handles aligned regardless of rank width. */
	grid-template-columns: 1.75rem 1fr auto;
	align-items: center;
	gap: var(--space-3);
	/* 44px minimum target height, per the project's a11y checklist. */
	min-height: 52px;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
}

/* Hairline between rows only — no rule above the first or below the last. */
.ah-board__row + .ah-board__row {
	border-top: 1px solid var(--color-grey-200);
}

.ah-board__rank {
	font-variant-numeric: tabular-nums;
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	color: var(--color-grey-300);
	text-align: right;
}

.ah-board__handle {
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	color: var(--color-ink);
	/* Generated handles are short, but never let one break the grid. */
	overflow-wrap: anywhere;
}

.ah-board__points {
	font-variant-numeric: tabular-nums;
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-ink);
	white-space: nowrap;
}

.ah-board__points-unit {
	font-size: 11px;
	font-weight: var(--weight-medium);
	color: var(--color-grey-600);
	margin-left: 2px;
}

/* ---- Top three ---- */

.ah-board__row--top .ah-board__rank {
	color: var(--color-ink);
}

.ah-board__row--top .ah-board__handle {
	font-weight: var(--weight-semibold);
}

/* First place is the single red moment in this section. */
.ah-board__row--1 {
	background: var(--color-red-tint);
}

.ah-board__row--1 + .ah-board__row {
	/* The tint already separates them; a rule on top of it reads as clutter. */
	border-top-color: transparent;
}

.ah-board__row--1 .ah-board__rank,
.ah-board__row--1 .ah-board__points {
	color: var(--color-red-deep);
}

/*
 * Screen readers get the rank as text, since the visible number is aria-hidden
 * (an <ol> already conveys position, and reading "1" twice is noise).
 */
.ah-board__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Stacked below the two-column breakpoint ---- */

@media (max-width: 860px) {
	.ah-board__layout {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	/* Stacked, the pane no longer needs to be narrow — but cap it so it does
	   not stretch to full tablet width and reintroduce the spread-out problem. */
	.ah-board__pane {
		max-width: 480px;
	}
}