/*
 * Leaderboard. design/DESIGN-SYSTEM.md §4.12, PAGE-STRUCTURE §2.5.
 *
 * A ranked list of lap records: rank / driver + date / time, in a hairline
 * frame. The leading row carries the red tint and red numerals. General
 * purpose -- the home teaser and any full ranking page share it.
 */

.sp-leaderboard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-5);
}

.sp-leaderboard__sub {
	margin: var(--sp-3) 0 0;
	font-size: var(--sp-fs-base);
	color: var(--sp-text-55);
}

.sp-leaderboard__period {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	/* 18px is the period tag size in §1.2; the type scale skips it. */
	font-size: 18px;
	text-transform: uppercase;
	color: var(--sp-text-50);
}

.sp-leaderboard__table {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--sp-line);
}

.sp-leaderboard__row {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	align-items: center;
	gap: var(--sp-5);
	margin: 0;
	padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 26px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	transition: background var(--sp-dur-fast) var(--sp-ease);
}

.sp-leaderboard__row--lead {
	background: var(--sp-tint-red-10);
}

.sp-leaderboard__row:hover {
	background: var(--sp-tint-white-4);
}

.sp-leaderboard__rank {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: var(--sp-lh-display);
	color: var(--sp-text-35);
}

.sp-leaderboard__row--lead .sp-leaderboard__rank {
	color: var(--sp-red);
}

.sp-leaderboard__name {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(17px, 1.7vw, 22px);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-leaderboard__date {
	font-size: var(--sp-fs-xs);
	color: var(--sp-text-45);
}

.sp-leaderboard__time {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: var(--sp-lh-display);
	font-variant-numeric: tabular-nums;
	color: var(--sp-text);
}

.sp-leaderboard__row--lead .sp-leaderboard__time {
	color: var(--sp-red);
}