/*
 * The Leaderboard section of the account — ticket 17.
 * design/DESIGN-SYSTEM.md §4.12 (leaderboard), §4.22 (left accent),
 * §1 (radius 0, no @media, Barlow italic uppercase).
 *
 * ---------------------------------------------------------------------------
 * THERE IS NO SECOND TABLE STYLE HERE, AND THAT IS THE POINT
 * ---------------------------------------------------------------------------
 *
 * The rows are `components/leaderboard.css` — `.sp-leaderboard__table`,
 * `__row`, `__rank`, `__driver`, `__name`, `__date`, `__time`, and `--lead` for
 * the red treatment on the record. That file already says it is general
 * purpose: "the home teaser and any full ranking page share it". A customer
 * looking at their own time and a visitor looking at the same time on the home
 * page are looking at one object, so they are drawn by one stylesheet.
 *
 * What this file adds is only what the account's copy of it needs and the
 * public one does not: a line of facts under the name (which circuit, which
 * configuration, which car), the name the rows were matched on in the head
 * slot, and the sentence that says nobody verified it.
 *
 * ---------------------------------------------------------------------------
 * WHY EVERY OVERRIDE IS SCOPED UNDER .sp-account-board
 * ---------------------------------------------------------------------------
 *
 * `inc/assets.php` enqueues `components/*.css` in filename order, so
 * `account-leaderboard.css` is loaded BEFORE `leaderboard.css`. A rule of equal
 * specificity here would therefore lose to the one it means to adjust, silently
 * and only in the browser. Every declaration that touches an `.sp-leaderboard__*`
 * class is consequently written as a descendant of `.sp-account-board` — which
 * is also the honest thing to say, since none of it is meant to reach the home
 * page.
 *
 * ---------------------------------------------------------------------------
 * NOTHING IN HERE MAY LOOK LIKE A CREDENTIAL
 * ---------------------------------------------------------------------------
 *
 * The gamertag is not verified (spec §9). There is no badge, no tick, no green
 * anything and no border that could be read as a seal of approval: the tag is
 * the muted period-tag treatment, and the note is body text at the footnote
 * size every other footnote on the site uses.
 *
 * No @media query, no radius, no colour, size or duration written out by hand —
 * every value is a token from tokens.css or a clamp() already in it.
 */

/* ==================================================================== head */

/*
 * The section title and, opposite it, the name the rows were matched on. The
 * flex row itself is `.sp-leaderboard__head` from the shared component; only
 * the rhythm around it belongs to the account, where a section title carries
 * its own gap to the content below.
 */
.sp-account-board__head {
	margin-bottom: var(--sp-9);
}

.sp-account-board__head .sp-account__group-title {
	margin-bottom: 0;
}

/*
 * The gamertag, in the slot the public board gives the month.
 *
 * Same treatment as `.sp-leaderboard__period` — Barlow 800 italic 18px
 * uppercase at 50% — but named for what it holds rather than borrowing a class
 * called "period" for something that is not one. It is the mechanism made
 * visible: these rows are here because they carry this string.
 */
.sp-account-board__tag {
	margin: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-md-lg);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text-50);
}

/* =================================================================== table */

/* `.sp-leaderboard__table` sets `margin: 0`; this follows a paragraph. */
.sp-account-board .sp-account-board__table {
	margin-top: var(--sp-9);
}

/*
 * The driver cell holds three lines here instead of two, so it becomes a
 * column with the system's smallest step between them rather than relying on
 * the margins of whatever elements land in it.
 */
.sp-account-board .sp-leaderboard__driver {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

/* =================================================================== facts */

/*
 * Circuit · configuration · car. The three things that turn a time into a lap
 * somebody remembers driving.
 *
 * Inline rather than a flex row so it wraps mid-line on a narrow phone the way
 * a sentence does, which is the only behaviour that needs no breakpoint. Each
 * fact carries a visually hidden label, so a screen reader reads
 * "Track Nürburgring" and not three unexplained words.
 */
.sp-account-board__facts {
	margin: 0;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-55);
}

.sp-account-board__fact + .sp-account-board__fact::before {
	content: '·';
	margin: 0 var(--sp-2) 0 var(--sp-1);
	color: var(--sp-text-35);
}

/* ==================================================================== note */

/*
 * "We matched these on the name you typed, and we do not check it."
 *
 * The footnote size and colour `.sp-prefs__privacy` uses for the privacy line —
 * quiet, but never hidden, and never dressed up as a warning. A red panel would
 * suggest something is wrong; a green tick would suggest something was checked.
 * Neither is true.
 */
.sp-account-board__note {
	margin: var(--sp-9) 0 0;
	max-width: 620px;
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}

.sp-account-board__change {
	margin: var(--sp-5) 0 0;
}