/**
 * public.css — the public design system, design D "Surge cutout" (docs/06
 * §14–§15, D87/D88). Built by K3a, re-skinned whole by batch K6.
 *
 * Three layers, in this order and no other:
 *   1. :root              — shared tokens: fonts, type steps, spacing,
 *                           motion, metals. Never swapped by a theme.
 *   2. :root, .theme-surge — §14.3's theme tokens. On :root too, so a body
 *                           with no theme class still renders surge (D88:
 *                           palette_id NULL = surge). Another theme is one
 *                           more block of the same names (§15.3).
 *   3. components         — tokens only. Intrinsic decoration geometry
 *                           (chamfer size, skew angle, blur) may stay
 *                           literal, per §14.1.
 *
 * Hand-copy obligation: form.css carries its own copy of the theme tokens it
 * uses, because head.php prints exactly one <link>. Change a value here and
 * change it there in the same commit.
 */

/* ============================================================ layer 1 */

@font-face {
	font-family: 'Anton';
	src: url('../fonts/anton-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Saira';
	src: url('../fonts/saira-latin-var.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-display: 'Anton', 'Arial Narrow', sans-serif;
	--font-body: 'Saira', system-ui, sans-serif;

	/* text steps, desktop; the phone block below steps the body sizes down */
	--text-label: 14px;
	--text-meta: 15px;
	--text-body: 17px;
	--text-name: 17px;
	--text-name-top: 20px;
	--text-lede: 23px;
	--text-btn: 19px; /* 14pt bold is large text, so white on --accent clears 3:1 */

	/* display steps (Anton), fluid between the §14.3 phone and desktop sizes */
	--disp-section: clamp(36px, 4.2vw, 60px);
	--disp-side: clamp(32px, 2.8vw, 40px);
	--disp-tile: clamp(50px, 5.3vw, 76px);
	--disp-hosted: clamp(32px, 2.8vw, 40px);
	--disp-stat: clamp(30px, 3vw, 44px);
	--disp-rail: clamp(28px, 2.4vw, 34px);
	--disp-pos: clamp(20px, 1.7vw, 24px);
	--disp-pos-top: clamp(28px, 2.4vw, 34px);
	--disp-pod: clamp(40px, 4.4vw, 64px);
	--disp-pro: clamp(44px, 5.8vw, 84px);
	--disp-ghost: clamp(170px, 18vw, 260px);

	/* cutout hero geometry (§14.5). Size is the lesser of the design size and
	   what fits the widest line; the template sets --cut-n per page. */
	--cut-max: 300px;
	--cut-top: 130px;
	--cut-gutter: 40px;
	--cut-tail: 128px;
	--cut-advance: 0.47; /* Anton's mean uppercase advance, measured 0.46em, plus skew */
	--top-h: 84px;

	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;
	--gutter: 56px;
	--radius: 4px; /* the soft corner on every box, beside any chamfer */

	--t-fast: 120ms;
	--t-modal: 220ms;
	--t-reveal: 300ms;
	--t-flip-step: 18ms;
	--t-count: 700ms;

	/* metals — positions 1–3 and nothing else, constant across themes */
	--m1: #FFD46B;
	--m2: #D6DEEE;
	--m3: #E39055;

	/* the cutout mask is the one place pure black and white are right */
	--cut-mask: #000000;
	--cut-letter: #FFFFFF;
	--shadow: rgba(0, 0, 0, 0.55);
}

@media (max-width: 600px) {
	:root {
		--text-label: 13px;
		--text-meta: 13px;
		--text-body: 15px;
		--text-lede: 18px;
		--cut-max: 108px;
		--cut-top: 96px;
		--cut-gutter: 12px;
		--cut-tail: var(--s-7);
		--top-h: 64px;
		--gutter: 16px;
	}
}

/* ============================================================ layer 2 */

:root,
.theme-surge {
	--bg: #0B0620;
	--panel: #140A33;
	--panel-2: #1D0E48;
	--panel-deep: #120828;
	--hero-1: #5A1AD6;
	--hero-2: #2A0F6B;
	--accent: #A14BFF;
	--accent-hover: #B56BFF;
	--accent-ink: #C79BFF;
	--accent-soft: rgba(161, 75, 255, 0.16);
	--accent-alt: #3D9BE9;
	--on-accent: #FFFFFF;
	--on-accent-alt: #061A33;
	--ink-1: #FFFFFF;
	--ink-2: #ECE8F5;
	--ink-3: #CFC6E4;
	--ink-muted: #9B8FB8;
	--ink-4: #6A5B8A;
	--line: rgba(199, 155, 255, 0.10);
	--line-strong: rgba(236, 232, 245, 0.16);
	--ghost-fill: rgba(236, 232, 245, 0.10);
	--ghost-hover: rgba(236, 232, 245, 0.20);
	--cut-stroke: rgba(199, 155, 255, 0.35);
	--scrim: rgba(5, 2, 15, 0.78);
	--focus: #FFD66B;
	/* carried over unchanged from the retired `dark` palette (§14.3) */
	--ok: #1a5c3c;
	--ok-ink: #8fd3ae;
	--ok-soft: rgba(46, 160, 100, 0.16);
	--warn: #6b1e2b;
	--warn-ink: #ff8a80;
	--warn-soft: rgba(255, 90, 80, 0.14);
}

/* ============================================================ layer 3 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.arl-public {
	color-scheme: dark;
	margin: 0;
	background: var(--bg);
	color: var(--ink-2);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.5;
	overflow-x: hidden;
}

.arl-public a {
	color: var(--accent-ink);
	text-decoration: none;
}

.arl-public a:hover {
	color: var(--ink-1);
}

/* Components below set an explicit `display`, which would otherwise beat the
   UA rule behind [hidden] and keep a row leaderboard.js filtered out on
   screen. One rule covers all of them. */
.arl-public [hidden] {
	display: none;
}

/* The soft corner on every box and every square corner of a chamfered one
   (the radius rounds the corners the clip-path polygon leaves square).
   Only the all-slanted .arl-btn goes without. */
.arl-tile,
.arl-panel,
.arl-pro-panel,
.arl-hosted-row,
.arl-fact,
.arl-public .arl-pill,
.arl-cat-pill,
.arl-public .arl-subtab,
.arl-pod,
.arl-delta,
.arl-status,
.arl-aud,
.arl-next,
.arl-pro-x,
.arl-pro-step,
.arl-pro-cell {
	border-radius: var(--radius);
}

.arl-prog > span {
	border-radius: calc(var(--radius) / 2);
}

.arl-vh,
.arl-notify .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Scoped by focusability, not by tag name. The category radio is visually
   hidden, so its label carries the ring. */
.arl-public :focus-visible,
.arl-cats input:focus-visible + .arl-cat-pill {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* Display type: uppercase, italic (the browser synthesises the oblique) and
   skewed. Skew only ever lands on a one-line box — never a multi-line block,
   or the lines shear apart (§14.3). */
.arl-disp {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1;
	color: var(--ink-1);
}

.arl-skew {
	display: inline-block;
	transform: skewX(-6deg);
	transform-origin: left bottom;
}

.arl-num,
.arl-lap,
.arl-points {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- header */

/* Overlays the hero: the hero pulls itself up by --top-h. */
.arl-top {
	position: relative;
	z-index: 3;
	height: var(--top-h);
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
}

.arl-logo img {
	display: block;
	width: auto;
	height: 40px;
}

.arl-nav {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	font-weight: 600;
	font-size: var(--text-meta);
}

.arl-public .arl-nav a:not(.arl-btn) {
	color: var(--ink-muted);
}

.arl-public .arl-nav a[aria-current],
.arl-public .arl-nav a:not(.arl-btn):hover {
	color: var(--ink-1);
}

@media (max-width: 600px) {
	.arl-intro {
		margin-top: var(--s-2);
	}

	.arl-facts {
		margin-top: -30px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-2);
	}

	.arl-fact {
		padding: var(--s-3) 14px;
	}

	.arl-tiles {
		padding-top: 40px;
		gap: 22px;
	}

	.arl-hosted-row {
		padding: 18px 20px;
	}

	.arl-logo img {
		height: 30px;
	}

	.arl-nav {
		gap: var(--s-4);
	}

	.arl-nav .arl-nav-wide {
		display: none;
	}
}

/* --------------------------------------------------------------- buttons */

/* Parallelograms (§14.3). The clip is the shape; nothing is rounded. */
.arl-public .arl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 var(--s-5);
	font-weight: 700;
	font-size: var(--text-btn);
	line-height: 1.1;
	background: var(--accent);
	color: var(--on-accent);
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	transition: background var(--t-fast);
}

.arl-public .arl-btn:hover {
	background: var(--accent-hover);
	color: var(--on-accent);
}

.arl-public .arl-btn.is-ghost {
	background: var(--ghost-fill);
	color: var(--ink-2);
}

.arl-public .arl-btn.is-ghost:hover {
	background: var(--ghost-hover);
	color: var(--ink-1);
}

.arl-public .arl-nav .arl-btn {
	min-height: 44px;
}

.arl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

/* ---------------------------------------------------------- cutout hero */

/* The signature (§14.5). Stack, back to front: the violet base (this box's
   own background) → the video in `screen` → a black multiply layer carrying
   white letters → the real <h1> as a faint outline → a fade into --bg. The
   base is why a dark frame can never erase a line.

   Height is derived from the lines, never less, and the hero is never a flex
   item, so content below cannot shrink it (the canvas lost a line to that). */
.arl-cut {
	--cut-fit: var(--cut-n, 9);
	--cut-size: min(var(--cut-max), calc((100vw - 2 * var(--cut-gutter)) / (var(--cut-fit) * var(--cut-advance))));
	position: relative;
	height: calc(var(--cut-top) + var(--cut-lines, 2) * 0.94 * var(--cut-size) + var(--cut-tail));
	margin-top: calc(-1 * var(--top-h));
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(160deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--bg) 100%);
}

.arl-cut.is-league {
	--cut-max: 240px;
	--cut-top: 120px;
}

/* No indent on phones, so the fit counts the bare longest line. */
@media (max-width: 600px) {
	.arl-cut {
		--cut-fit: var(--cut-np, 7);
	}

	.arl-cut.is-league {
		--cut-max: 90px;
		--cut-top: 92px;
	}
}

.arl-cut-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: screen;
}

.arl-cut-mask,
.arl-cut-title {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: var(--cut-top) var(--cut-gutter) 0;
	font-size: var(--cut-size);
	line-height: 0.94;
	white-space: nowrap;
}

.arl-cut-mask {
	background: var(--cut-mask);
	color: var(--cut-letter);
	mix-blend-mode: multiply;
}

.arl-cut-title {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--cut-stroke);
	pointer-events: none;
}

.arl-cut-line {
	display: block;
	transform: skewX(-6deg);
}

.arl-cut-line.is-indent {
	padding-left: 1.1em;
}

@media (max-width: 600px) {
	.arl-cut-line.is-indent {
		padding-left: 0;
	}
}

.arl-cut:not(.is-league)::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: -10%;
	top: -30%;
	width: 70%;
	height: 90%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
	mix-blend-mode: screen;
	pointer-events: none;
}

.arl-cut::after {
	content: '';
	z-index: 1;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--cut-tail);
	background: linear-gradient(0deg, var(--bg), transparent);
	pointer-events: none;
}

/* ------------------------------------------------------------ directory */

.arl-intro {
	position: relative;
	z-index: 2;
	margin-top: -90px;
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.arl-lede {
	margin: 0;
	max-width: 30em;
	font-size: var(--text-lede);
	color: var(--ink-3);
}

.arl-tiles {
	padding: 88px var(--gutter) var(--s-6);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-6);
}

@media (max-width: 1000px) {
	.arl-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* clip-path eats box-shadow, so the shadow lives on a wrapper (§14.3).
   The wrapper carries the tile's own theme class (D88), so these resolve in
   that theme; accents still alternate by position within it. */
.arl-tile-wrap {
	--tile-accent: var(--accent);
	--tile-on: var(--on-accent);
	filter: drop-shadow(0 28px 44px var(--shadow));
}

.arl-tile-wrap:nth-child(even) {
	--tile-accent: var(--accent-alt);
	--tile-on: var(--on-accent-alt);
}

.arl-tile {
	position: relative;
	height: 100%;
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	overflow: hidden;
	background: linear-gradient(160deg, color-mix(in srgb, var(--tile-accent) 24%, var(--bg)) 0%, color-mix(in srgb, var(--tile-accent) 9%, var(--bg)) 55%, var(--bg) 100%);
	clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 44px 100%, 0 calc(100% - 44px));
}

/* the accent bar and its glow */
.arl-tile::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 126px;
	border-top: 6px solid var(--tile-accent);
	background: linear-gradient(180deg, color-mix(in srgb, var(--tile-accent) 30%, transparent), transparent);
	pointer-events: none;
}

.arl-tile-ghost {
	position: absolute;
	right: 30px;
	top: 10px;
	font-size: var(--disp-ghost);
	color: transparent;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--tile-accent) 28%, transparent);
	transform: skewX(-6deg);
	pointer-events: none;
}

.arl-tile > :not(.arl-tile-ghost) {
	position: relative;
}

.arl-tile-name {
	margin: 0;
	font-size: var(--disp-tile);
	line-height: 0.95;
}

.arl-public .arl-tile-name a,
.arl-public .arl-hosted-name a {
	color: var(--ink-1);
}

.arl-public .arl-tile-name a:hover,
.arl-public .arl-hosted-name a:hover {
	color: var(--accent-ink);
}

.arl-stats {
	margin: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border-top: 1px solid var(--line-strong);
	border-bottom: 1px solid var(--line-strong);
}

.arl-stats > div {
	padding: var(--s-4) 0 var(--s-4) 20px;
	border-left: 1px solid var(--line-strong);
}

.arl-stats > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.arl-stats dt,
.arl-label {
	font-size: var(--text-label);
	font-weight: 500;
	color: var(--ink-muted);
}

.arl-stats dd {
	margin: var(--s-1) 0 0;
}

.arl-stats dd.arl-disp {
	font-size: var(--disp-stat);
}

.arl-stats dd.is-accent {
	color: color-mix(in srgb, var(--tile-accent) 55%, var(--ink-1));
}

.arl-stat-of {
	font-size: 0.5em;
	color: var(--ink-muted);
}

.arl-aud {
	align-self: flex-start;
	padding: var(--s-1) var(--s-3);
	font-size: var(--text-label);
	font-weight: 600;
	color: var(--ink-1);
	background: color-mix(in srgb, var(--tile-accent) 30%, transparent);
	border: 1px solid var(--tile-accent);
}

/* One segment per defined round, the published ones lit. */
.arl-prog {
	display: flex;
	gap: 3px;
}

.arl-prog > span {
	flex: 1;
	height: 6px;
	background: var(--line-strong);
}

.arl-prog > .is-on {
	background: var(--tile-accent);
}

.arl-leader {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
}

.arl-leader-name {
	font-weight: 700;
	color: var(--ink-1);
}

.arl-leader-pts {
	font-size: var(--text-meta);
	color: var(--ink-3);
}

/* "Next on track" sits in the intro row, over the hero's bottom edge. */
.arl-next {
	padding: var(--s-5) var(--s-6);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	background: var(--panel-2);
	border-top: 3px solid var(--accent);
	box-shadow: 0 20px 40px -18px var(--shadow);
}

.arl-next-name {
	font-size: var(--disp-side);
	line-height: 1;
}

.arl-next-date {
	font-weight: 700;
	font-size: var(--text-lede);
	color: var(--accent-ink);
}

@media (min-width: 1001px) {
	.arl-intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}

	.arl-intro .arl-next {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

.arl-stat-note {
	font-size: var(--text-meta);
	color: var(--ink-3);
}

.arl-public .arl-tile .arl-btn:not(.is-ghost) {
	background: var(--tile-accent);
	color: var(--tile-on);
}

.arl-public .arl-tile .arl-btn:not(.is-ghost):hover {
	background: color-mix(in srgb, var(--tile-accent) 85%, var(--ink-1));
}

@media (max-width: 600px) {
	.arl-tile {
		padding: var(--s-5) 22px;
		clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
	}

	.arl-tile-ghost {
		right: var(--s-4);
		top: var(--s-1);
		-webkit-text-stroke-width: 1.5px;
	}
}

.arl-hosted {
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.arl-hosted-row {
	padding: 26px 34px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	background: var(--panel);
	border: 1px solid var(--line-strong);
}

.arl-hosted-id {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-5);
}

.arl-hosted-name {
	margin: 0;
	font-size: var(--disp-hosted);
}

.arl-empty {
	padding: var(--s-8) var(--gutter);
	font-size: var(--text-lede);
}

/* ----------------------------------------------------- league page head */

.arl-facts {
	position: relative;
	z-index: 2;
	margin-top: -40px;
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.arl-fact {
	padding: 14px 20px;
	background: var(--panel-2);
	border-top: 3px solid var(--accent);
	box-shadow: 0 20px 40px -18px var(--shadow);
}

.arl-fact-v {
	display: block;
	font-weight: 700;
	font-size: var(--text-lede);
	line-height: 1.2;
	color: var(--ink-1);
}

/* ------------------------------------------------------------ round rail */

/* One card per payload round, each a real link to a board. Phones scroll
   the rail sideways. */
.arl-rail {
	padding: 44px var(--gutter) var(--s-1);
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: var(--s-2);
}

.arl-public .arl-pill {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	padding: var(--s-4) var(--s-4) 14px;
	background: var(--panel);
	color: var(--ink-2);
	border-bottom: 3px solid transparent;
	transition: background var(--t-fast);
}

.arl-public .arl-pill:hover {
	background: var(--panel-2);
	color: var(--ink-1);
}

.arl-public .arl-pill.is-active {
	background: linear-gradient(160deg, var(--hero-1), var(--hero-2));
	border-bottom-color: var(--m1);
	box-shadow: 0 16px 30px -14px var(--accent);
}

.arl-pill-r {
	display: block;
	font-size: var(--disp-rail);
}

.arl-pill-date {
	font-size: var(--text-label);
	color: var(--ink-muted);
}

.arl-pill.is-active .arl-pill-date {
	color: var(--ink-2);
}

/* "Championship" is twelve display glyphs, and "Season N" eight: two cards wide. */
.arl-public .arl-pill.is-champ,
.arl-public .arl-pill.is-season {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.arl-rail {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 84px;
		gap: 6px;
		padding-top: 26px;
		overflow-x: auto;
	}

	.arl-public .arl-pill {
		padding: var(--s-3) var(--s-3) 10px;
	}
}

/* -------------------------------------------------------- content column */

.arl-wrap {
	padding: var(--s-7) var(--gutter) 0;
}

/* An archive round view's way back to the season's overall view (D110). */
.arl-back {
	margin: 0 0 var(--s-5);
	font-weight: 600;
}

/* Category pills — native radios; :checked is the state (D69). */
.arl-cats {
	margin: 0 0 var(--s-5);
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

/* Display type for pop. The dot is the radio, hollow → filled, so the chosen
   pill never rests on colour alone; it also takes the active rail card's look. */
.arl-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 44px;
	padding: 0 var(--s-5);
	font-family: var(--font-display);
	font-style: italic;
	text-transform: uppercase;
	font-size: var(--text-lede);
	line-height: 1;
	background: var(--panel-2);
	color: var(--ink-2);
	border: 1px solid var(--line-strong);
}

.arl-cat-pill::before {
	content: "";
	width: 10px;
	height: 10px;
	border: 2px solid var(--ink-muted);
	border-radius: 50%;
}

label.arl-cat-pill {
	cursor: pointer;
}

label.arl-cat-pill:hover {
	color: var(--ink-1);
	border-color: var(--accent);
}

.arl-cats input:checked + .arl-cat-pill,
.arl-cat-pill.is-active {
	background: linear-gradient(160deg, var(--hero-1), var(--hero-2));
	border-color: var(--accent);
	box-shadow: inset 0 -3px 0 var(--m1), 0 12px 24px -12px var(--accent);
	color: var(--ink-1);
}

.arl-cats input:checked + .arl-cat-pill::before,
.arl-cat-pill.is-active::before {
	background: var(--m1);
	border-color: var(--m1);
}

/* Split screen (D69/D87): each round board is the split — results main and
   wide, the championship after that round narrow at the side. Stacks
   results-first. Boards are grids (see the board swap below). */
.arl-board {
	grid-template-columns: minmax(0, 1fr); /* a wide table scrolls, never widens the page */
	gap: 36px;
	align-items: start;
}

.arl-board.is-round {
	grid-template-columns: minmax(0, 1fr) 400px;
}

@media (max-width: 1000px) {
	.arl-board.is-round {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-5);
	}
}

.arl-panel {
	position: relative;
	padding: 34px;
	clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 36px 100%, 0 calc(100% - 36px));
}

.arl-results {
	background: linear-gradient(170deg, var(--panel-2) 0%, var(--panel-deep) 60%);
	border-top: 1px solid var(--cut-stroke);
}

.arl-standings {
	padding: 30px 26px 34px;
	background: var(--panel);
	border-top: 3px solid var(--accent);
}

@media (max-width: 600px) {
	.arl-panel {
		padding: 22px var(--s-4) 24px;
		clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
	}
}

/* ----------------------------------------------------------- board swaps */

/* Every round × session view is its own server-rendered board. The default
   board is emitted LAST, which is what makes the plain sibling rule enough:
   anything else targeted necessarily precedes it. No :has() anywhere, so a
   browser with neither :has() nor JS still gets exactly one board. */
.arl-board {
	display: none;
}

.arl-board.is-default,
.arl-board:target {
	display: grid;
}

.arl-board:target ~ .arl-board.is-default {
	display: none;
}

/* history.replaceState never re-evaluates :target, so once leaderboard.js
   runs it owns the visible board. (0,3,1) beats both fallback rules. */
.arl-boards.is-js > .arl-board:not(.is-current) {
	display: none;
}

.arl-boards.is-js > .arl-board.is-current {
	display: grid;
}

.arl-board-head {
	margin-bottom: var(--s-5);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-1) var(--s-4);
}

.arl-board-title {
	margin: 0;
	font-size: var(--disp-section);
}

.arl-standings .arl-board-title {
	font-size: var(--disp-side);
}

.arl-standings .arl-board-head {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 18px;
}

.arl-standings .arl-table th {
	padding: 0;
}

.arl-standings .arl-table td {
	padding: 11px var(--s-2);
}

.arl-board-meta {
	font-size: var(--text-meta);
	color: var(--ink-muted);
}

/* The Championship board: the whole table, a column per round. */
.arl-champ .arl-standings .arl-table th {
	padding: 0 var(--s-2) var(--s-3);
}

/* Enough room for a name before the round columns start scrolling. */
.arl-champ .arl-driver {
	min-width: 10em;
}

/* `.arl-table` so the heading beats `.arl-table th`'s left alignment. */
.arl-table .arl-rcol,
.arl-rpts {
	text-align: right;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* A best-N drop: struck, muted, and "dropped" in the accessible text. */
.arl-rpts.is-dropped,
.arl-pro-pts.is-dropped {
	color: var(--ink-4);
}

/* --------------------------------------------------------------- subtabs */

.arl-subtabs {
	margin-bottom: var(--s-4);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.arl-public .arl-subtab {
	padding: var(--s-1) var(--s-3);
	font-size: var(--text-label);
	font-weight: 600;
	background: var(--accent-soft);
	color: var(--ink-3);
}

.arl-public .arl-subtab:hover {
	color: var(--ink-1);
}

.arl-public .arl-subtab.is-active {
	background: var(--accent);
	color: var(--on-accent);
}

/* ---------------------------------------------------------------- podium */

/* The top three of the view on screen, 2nd | 1st | 3rd at stepped heights
   (§14.5). One per category, because positions are (D82); the category
   filter shows the chosen one. */
.arl-podium {
	margin: 0 0 var(--s-6);
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: var(--s-2);
}

/* The number on the left, the name and points beside it. */
.arl-pod {
	grid-row: 1;
	min-width: 0;
	padding: var(--s-4);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	gap: 0 var(--s-4);
	background: var(--panel);
	border-top: 3px solid var(--pod-metal);
}

.arl-pod.is-p1 {
	--pod-metal: var(--m1);
	grid-column: 2;
	padding-top: var(--s-8);
	background: linear-gradient(160deg, var(--hero-1), var(--hero-2));
}

.arl-pod.is-p2 {
	--pod-metal: var(--m2);
	grid-column: 1;
	padding-top: var(--s-7);
}

.arl-pod.is-p3 {
	--pod-metal: var(--m3);
	grid-column: 3;
	padding-top: var(--s-5);
}

.arl-pod-pos {
	grid-row: 1 / span 2;
	padding-right: 0.08em; /* the italic numeral overhangs its box */
	font-size: var(--disp-pod);
	line-height: 0.9;
	color: var(--pod-metal);
}

/* A step nobody holds yet: the spot stands, dimmed, waiting. */
.arl-pod.is-open {
	border-top-style: dashed;
}

.arl-pod.is-open .arl-pod-pos {
	opacity: 0.4;
}

.arl-pod.is-open .arl-pod-name {
	color: var(--ink-muted);
}

.arl-podium-note {
	margin: calc(-1 * var(--s-4)) 0 var(--s-6);
	font-size: var(--text-meta);
	color: var(--ink-3);
}

.arl-podium-note strong {
	color: var(--accent-ink);
}

.arl-pod-name {
	font-weight: 700;
	font-size: calc(var(--text-lede) * 1.25);
	line-height: 1.1;
	color: var(--ink-1);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* A step with no points line: the name sits on the number's baseline. */
.arl-pod-name:last-child {
	grid-row: 1 / span 2;
}

/* Phone steps are ~110px wide: the name goes back under the number. */
@media (max-width: 600px) {
	.arl-pod {
		grid-template-columns: minmax(0, 1fr);
		padding-left: var(--s-2);
		padding-right: var(--s-2);
	}

	.arl-pod-pos,
	.arl-pod-name:last-child {
		grid-row: auto;
	}

	.arl-pod-name {
		font-size: var(--text-body);
	}
}

.arl-pod-pts {
	font-size: var(--text-meta);
	color: var(--ink-3);
}

/* ---------------------------------------------------------------- tables */

/* Dense columns scroll inside the panel — never clip. */
.arl-scroll {
	overflow-x: auto;
}

.arl-table {
	width: 100%;
	border-collapse: collapse;
}

.arl-table th {
	padding: 0 var(--s-3) var(--s-3);
	font-size: var(--text-label);
	font-weight: 600;
	text-align: left;
	color: var(--ink-muted);
	white-space: nowrap;
}

.arl-results .arl-table th:nth-last-child(-n + 2),
.arl-standings .arl-table th:last-child {
	text-align: right;
}

.arl-table td {
	padding: 13px var(--s-3);
	border-top: 1px solid var(--line);
	vertical-align: middle;
}

.arl-table tr.arl-row:hover {
	background-color: var(--accent-soft);
}

.arl-pos {
	width: 70px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--disp-pos);
	line-height: 1;
	color: var(--ink-4);
}

.arl-standings .arl-pos {
	width: 34px;
}

/* Metals are position colour and nothing else (§14.4). No box behind them:
   the numeral carries the metal and grows for the top three. */
.arl-pos.is-p1,
.arl-pos.is-p2,
.arl-pos.is-p3 {
	font-size: var(--disp-pos-top);
}

.arl-pos.is-p1 {
	color: var(--m1);
}

.arl-pos.is-p2 {
	color: var(--m2);
}

.arl-pos.is-p3 {
	color: var(--m3);
}

.arl-standings .arl-pos.is-p1,
.arl-standings .arl-pos.is-p2,
.arl-standings .arl-pos.is-p3 {
	font-size: var(--disp-pos);
}

.arl-name-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-1) var(--s-2);
}

.arl-name {
	font-weight: 600;
	font-size: var(--text-name);
	color: var(--ink-1);
}

.arl-results .is-top .arl-name {
	font-size: var(--text-name-top);
}

.arl-sub {
	display: block;
	font-size: var(--text-label);
	color: var(--ink-muted);
}

/* Colour never carries meaning alone: the sign is in the text and the
   accessible label says it in words. */
.arl-delta,
.arl-status {
	padding: 0 6px;
	font-size: var(--text-label);
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

.arl-delta.is-up {
	background: var(--ok-soft);
	color: var(--ok-ink);
}

.arl-delta.is-down,
.arl-status.is-warn {
	background: var(--warn-soft);
	color: var(--warn-ink);
}

.arl-delta.is-flat,
.arl-status.is-neutral {
	background: var(--ghost-fill);
	color: var(--ink-muted);
}

.arl-lap {
	text-align: right;
	color: var(--ink-3);
	white-space: nowrap;
}

/* The round's fastest lap. */
.arl-lap.is-fastest {
	color: var(--m1);
	font-weight: 700;
}

.arl-points {
	text-align: right;
	font-weight: 700;
	font-size: var(--text-name-top);
	color: var(--ink-1);
	white-space: nowrap;
}

.arl-standings .arl-points {
	font-size: var(--text-name);
}

/* Below standings_min_rounds (D64): listed and labelled by the pill. */
.arl-row.is-ineligible .arl-name,
.arl-row.is-ineligible .arl-points {
	color: var(--ink-muted);
}

.arl-standings .arl-row.is-leader {
	background-image: linear-gradient(90deg, var(--accent-soft), transparent);
}

/* The QR deep link (D56) lands on a driver's championship row. */
.arl-standings .arl-row:target {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.arl-board-foot {
	margin-top: var(--s-4);
	font-size: var(--text-label);
	color: var(--ink-muted);
}

@media (max-width: 600px) {
	.arl-table td {
		padding: 11px var(--s-2);
	}

	.arl-table th {
		padding: 0 var(--s-2) var(--s-2);
	}

	.arl-pos {
		width: 40px;
	}
}

/* ------------------------------------------------------- closed / error */

.arl-msg {
	padding: var(--s-8) var(--gutter);
	max-width: 900px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-5);
}

.arl-msg-title {
	margin: 0;
	font-size: var(--disp-section);
}

.arl-msg p {
	margin: 0;
	font-size: var(--text-lede);
	color: var(--ink-3);
}

/* ------------------------------------------------------ between seasons */

/* D111: the league page with no season running. Sections stack; the first
   one is the page's lead (the countdown, or the notify form before it). */
.arl-between {
	display: grid;
	gap: var(--s-8);
	max-width: 1100px;
}

.arl-between p {
	margin: 0;
}

/* "Season N champions" must stay one line: the skew is per line (§14.3). */
@media (max-width: 600px) {
	.arl-between .arl-board-title {
		font-size: var(--disp-side);
	}
}

/* The countdown leads: the CTA band's hero gradient (§14.5). Days only,
   never a clock (§14.7's D111 exception). */
.arl-count {
	display: grid;
	gap: var(--s-3);
	background: linear-gradient(160deg, var(--hero-1), var(--hero-2));
}

.arl-count .arl-label {
	color: var(--ink-2);
}

.arl-count-n {
	margin: 0;
	font-size: var(--disp-pro);
}

.arl-count-date {
	font-size: var(--text-lede);
	font-weight: 600;
	color: var(--ink-1);
}

/* The next season's schedule, one fact card per round. */
.arl-sched {
	margin: 0 0 var(--s-5);
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--s-3);
}

.arl-sched .arl-fact {
	display: flex;
	flex-direction: column;
	color: var(--ink-3);
}

.arl-champs-cat {
	margin: 0 0 var(--s-3);
	font-size: var(--text-lede);
	color: var(--ink-1);
}

/* The mailing-list box (§14.5): a chamfered panel, a headline, one line,
   the form. Gravity Forms prints its own markup and this page loads none of
   its CSS, so the rules below are the minimum that markup needs, measured
   against form.css's (K2/3c) and written in this file's tokens. */
.arl-notify {
	display: grid;
	gap: var(--s-4);
	background: var(--panel);
	border-top: 3px solid var(--accent);
}

.arl-notify > p {
	color: var(--ink-3);
}

.arl-notify .gform_validation_container,
.arl-notify .gform_hidden,
.arl-notify .gf_clear,
.arl-notify .gform-icon {
	display: none;
}

.arl-notify .gform_fields {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}

.arl-notify .gfield {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.arl-notify .gfield_label {
	display: block;
	margin: 0 0 var(--s-2);
	padding: 0;
	font-weight: 600;
	color: var(--ink-2);
}

.arl-notify .gfield_required_text {
	margin-left: var(--s-2);
	font-size: var(--text-label);
	font-weight: 400;
	color: var(--ink-muted);
}

.arl-notify .gfield_description,
.arl-notify .gform-field-label--type-sub {
	margin-top: var(--s-1);
	font-size: var(--text-meta);
	color: var(--ink-3);
}

.arl-notify .gfield input:not([type="checkbox"]):not([type="radio"]),
.arl-notify .gfield select,
.arl-notify .gfield textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--s-2) var(--s-3);
	background: var(--panel-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--ink-1);
	font: inherit;
}

.arl-notify .ginput_container--name {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-3);
}

.arl-notify .gchoice {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}

.arl-notify .gfield-choice-input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--accent);
}

.arl-notify .gform-footer {
	margin-top: var(--s-5);
}

/* GF's #gf_N anchor exists only to take focus on the postback; a ring on it
   is a bar across the panel (form.css, K2). */
.arl-notify [tabindex="-1"]:focus-visible {
	outline: none;
}

/* Validation keeps form.css's warn treatment; the words carry the meaning. */
.arl-notify .gfield_error input:not([type="checkbox"]):not([type="radio"]),
.arl-notify .gfield_error select,
.arl-notify .gfield_error textarea {
	border-color: var(--warn-ink);
}

.arl-notify .gform_validation_errors,
.arl-notify .gfield_validation_message {
	margin: var(--s-2) 0 0;
	color: var(--warn-ink);
	font-weight: 600;
}

.arl-notify .gform_validation_errors {
	margin: 0 0 var(--s-4);
}

.arl-notify .gform_submission_error {
	margin: 0;
	font-size: var(--text-body);
}

.arl-notify .gform_confirmation_message {
	font-size: var(--text-lede);
	color: var(--ink-1);
}

/* The neon ring button (§14.5): a transparent fill inside a thin accent
   ring, two light trails chasing round it every 1.6 s, the glow outside
   only. The fill is the panel's own colour, which reads as transparent on
   it. Reduced motion stops the trace and leaves the static ring (§14.7). */
@property --ang {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.arl-notify .gform_button {
	appearance: none;
	min-height: 50px;
	padding: 0 var(--s-6);
	border: 2px solid transparent;
	border-radius: var(--radius);
	background:
		linear-gradient(var(--panel), var(--panel)) padding-box,
		conic-gradient(from var(--ang), var(--accent) 0 8%, var(--accent-ink) 18%, var(--ink-1) 25%, var(--accent) 27% 58%, var(--accent-ink) 68%, var(--ink-1) 75%, var(--accent) 77%) border-box;
	box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 50%, transparent);
	color: var(--ink-1);
	font: 700 var(--text-btn) / 1.1 var(--font-body);
	cursor: pointer;
	animation: arl-ring 1.6s linear infinite;
}

@keyframes arl-ring {
	to {
		--ang: 360deg;
	}
}

/* ---------------------------------------------------------------- footer */

.arl-foot {
	margin-top: var(--s-8);
	padding: 36px var(--gutter);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3) var(--s-6);
	font-size: var(--text-label);
	color: var(--ink-muted);
	border-top: 1px solid var(--line-strong);
}

/* ------------------------------------------------------- driver profile */

/* The opener is a button on EVERY row with a profile — not gated on
   `consented` like the #racer-{uuid} anchor, because an opener on some rows
   only would read off who declined (§14.10.5). The pointer sits behind
   .is-js: with no JS the dialog never opens. */
button.arl-name {
	margin: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--ink-1);
	background: none;
	border: 0;
	appearance: none;
	text-align: left;
	transition: color var(--t-fast);
}

.arl-split.is-js button.arl-name {
	cursor: pointer;
}

.arl-split.is-js button.arl-name:hover,
.arl-table tr.arl-row.is-pro:hover button.arl-name {
	color: var(--accent-ink);
	text-decoration: underline;
}

/* leaderboard.js makes the whole row open the profile. */
.arl-table tr.arl-row.is-pro {
	cursor: pointer;
}

/* The dialog element IS the scrim, so "click outside" is ev.target ===
   dialog. The base display:none is load-bearing: a browser with no <dialog>
   would otherwise lay the profile out inline in the standings cell. */
dialog.arl-pro {
	display: none;
}

dialog.arl-pro[open] {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: var(--s-4);
	overflow: hidden;
	background: var(--scrim);
	border: 0;
	color: var(--ink-2);
	/* opacity 0 only in the keyframe: the reduced-motion block turns
	   animation off, and a static 0 would never become visible. */
	animation: arl-pro-in var(--t-modal) ease-out;
}

dialog.arl-pro::backdrop {
	background: transparent;
}

@keyframes arl-pro-in {
	from {
		opacity: 0;
	}
}

/* The scroll lives on the panel: a centred flex item taller than its
   container clips its own top when the container scrolls instead. */
.arl-pro-panel {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: 100%;
	overflow-y: auto;
	padding: 44px 48px;
	background: linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 45%, var(--panel-deep) 100%);
	border-top: 6px solid var(--accent);
	clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 48px 100%, 0 calc(100% - 48px));
	animation: arl-pro-rise var(--t-modal) ease-out;
}

@keyframes arl-pro-rise {
	from {
		opacity: 0;
		transform: translateY(var(--s-3));
	}
}

.arl-pro-x {
	position: absolute;
	z-index: 2;
	top: 26px;
	right: 28px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-size: 28px;
	line-height: 1;
	color: var(--ink-2);
	background: var(--ghost-fill);
	border: 0;
	cursor: pointer;
}

.arl-pro-x:hover {
	background: var(--ghost-hover);
	color: var(--ink-1);
}

.arl-pro-panel::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 160px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent);
	pointer-events: none;
}

.arl-pro-panel > :not(.arl-pro-x) {
	position: relative;
}

.arl-pro-head {
	padding-right: 64px;
}

.arl-pro-league {
	margin: 0;
	font-weight: 600;
	font-size: var(--text-meta);
	color: var(--accent-ink);
}

.arl-pro-name {
	margin: var(--s-1) 0 0;
	font-size: var(--disp-pro);
	line-height: 0.95;
	overflow-wrap: anywhere;
}

.arl-pro-tiles {
	margin: 34px 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--line-strong);
	border-bottom: 1px solid var(--line-strong);
}

.arl-pro-kpi {
	padding: 18px 0 18px 22px;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	border-left: 1px solid var(--line-strong);
}

.arl-pro-kpi:nth-child(3n + 1) {
	padding-left: 0;
	border-left: 0;
}

.arl-pro-kpi:nth-child(n + 4) {
	border-top: 1px solid var(--line);
}

.arl-pro-klabel,
.arl-pro-ksub {
	font-size: var(--text-label);
	color: var(--ink-muted);
}

.arl-pro-kvalue {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--disp-stat);
	line-height: 1;
	color: var(--ink-1);
	font-variant-numeric: tabular-nums;
}

/* D69's "positions separated by visual breaks, then bold overall", newest
   round first. */
.arl-pro-h {
	margin: var(--s-6) 0 14px;
	font-size: var(--text-lede);
	font-weight: 700;
	color: var(--ink-1);
}

.arl-pro-strip {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: var(--s-2);
}

.arl-pro-step {
	padding: var(--s-3);
	background: var(--accent-soft);
	border-bottom: 3px solid var(--accent);
}

.arl-pro-step .arl-pro-slabel {
	display: block;
	font-size: var(--text-label);
	color: var(--ink-muted);
}

.arl-pro-stepv {
	display: block;
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1.05;
}

.arl-pro-step.is-p1 {
	border-bottom-color: var(--m1);
}

.arl-pro-step.is-p1 .arl-pro-stepv {
	color: var(--m1);
}

.arl-pro-step.is-p2 {
	border-bottom-color: var(--m2);
}

.arl-pro-step.is-p2 .arl-pro-stepv {
	color: var(--m2);
}

.arl-pro-step.is-p3 {
	border-bottom-color: var(--m3);
}

.arl-pro-step.is-p3 .arl-pro-stepv {
	color: var(--m3);
}

.arl-pro-rounds {
	margin: var(--s-6) 0 0;
	padding: 0;
	list-style: none;
}

.arl-pro-round {
	padding: var(--s-3) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-4);
	border-top: 1px solid var(--line);
}

.arl-pro-rn {
	min-width: 3em;
	font-weight: 700;
	color: var(--ink-1);
}

.arl-pro-sessions {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.arl-pro-cell {
	padding: 3px 9px;
	font-size: var(--text-label);
	background: var(--accent-soft);
	color: var(--ink-3);
}

/* The chips already separate the sessions visually. */
.arl-pro-bar {
	display: none;
}

.arl-pro-slabel {
	margin-right: var(--s-1);
}

.arl-pro-spos {
	font-weight: 700;
	color: var(--ink-1);
}

.arl-pro-lap {
	margin-left: auto;
	font-size: var(--text-meta);
	font-variant-numeric: tabular-nums;
	color: var(--ink-3);
	white-space: nowrap;
}

.arl-pro-pts {
	font-size: var(--text-meta);
	font-weight: 600;
	color: var(--ink-3);
	white-space: nowrap;
}

.arl-pro-overall {
	min-width: 2.2em;
	text-align: right;
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--disp-pos-top);
	line-height: 1;
	color: var(--ink-2);
}

.arl-pro-overall.is-p1 {
	color: var(--m1);
}

.arl-pro-overall.is-p2 {
	color: var(--m2);
}

.arl-pro-overall.is-p3 {
	color: var(--m3);
}

.arl-pro-overall.is-none {
	color: var(--ink-4);
}

/* A bottom sheet on phones (§14.5). */
@media (max-width: 600px) {
	dialog.arl-pro[open] {
		align-items: flex-end;
		padding: var(--s-7) 0 0;
	}

	.arl-pro-panel {
		max-width: none;
		padding: 22px 20px 32px;
		border-top-width: 4px;
		clip-path: none;
	}

	.arl-pro-x {
		top: var(--s-3);
		right: var(--s-3);
		width: 44px;
		height: 44px;
	}

	.arl-pro-kpi {
		padding-left: var(--s-3);
	}

	.arl-pro-strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}
}

/* ---------------------------------------------------------------- motion */

/* Row stagger on a board reveal (§14.7: 0.3s + 18ms/row). JS adds the class
   and sets --i over the visible rows; without JS neither happens. */
.arl-stagger .arl-row {
	opacity: 0;
	animation: arl-row-in var(--t-reveal) ease-out forwards;
	animation-delay: calc(var(--i, 0) * var(--t-flip-step));
}

@keyframes arl-row-in {
	from {
		opacity: 0;
		transform: translateY(var(--s-2));
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* One kill-switch for everything (§14.7). The video is stopped by hero.js
   never calling play(), so the poster shows. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.arl-stagger .arl-row {
		opacity: 1;
	}
}