/* Race Center: one column, timing-monitor style. Event header, flag bar, radio bar, then a full-width table.
   The region is `.live-timing` on its own, or `.dirtcar-live-row` when [livetiming] and [live_audio] share a wrapper.
   Light tokens by default, dark tokens when the device asks for them. */

.live-timing,
.dirtcar-live-row {
	--lt-panel: #f4f5f6;
	--lt-surface: #ffffff;
	--lt-row-alt: #f7f8f9;
	--lt-line: #e2e5e9;
	--lt-line-strong: #c9ced4;
	--lt-text: #1c2024;
	--lt-muted: #646b73;
	--lt-faint: #8c939b;
	--lt-fastest: #7a2fc0;
	--lt-pb: #098039;
	--lt-up: #098039;
	--lt-down: #c62828;
	--lt-flash: rgba(11, 138, 66, 0.1);
	--lt-flag-green: #00873c;
	--lt-flag-yellow: #ffd202;
	--lt-flag-red: #c40000;
	--lt-dv: #e31837;
	--lt-dv-text: #e31837;
	--lt-f: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	.live-timing,
	.dirtcar-live-row {
		--lt-panel: #15181b;
		--lt-surface: #15181b;
		--lt-row-alt: #1a1d21;
		--lt-line: #262a2f;
		--lt-line-strong: #353a40;
		--lt-text: #eceef0;
		--lt-muted: #9aa1a9;
		--lt-faint: #737a82;
		--lt-fastest: #b57cf0;
		--lt-pb: #3fc27a;
		--lt-up: #3fc27a;
		--lt-down: #f06b6b;
		--lt-dv-text: #f0405a;
		--lt-flash: rgba(63, 194, 122, 0.12);
		color-scheme: dark;
	}
}

.live-timing,
.dirtcar-live-row {
	margin: 0 0 28px;
	border: 1px solid var(--lt-line);
	background: var(--lt-surface);
	color: var(--lt-text);
	font: 400 16px/1.4 var(--lt-f);
	font-variant-numeric: tabular-nums;
}

.live-timing *,
.live-timing *::before,
.live-timing *::after,
.dirtcar-live-row * {
	box-sizing: border-box;
}

.dirtcar-live-row {
	position: relative;
}

.dirtcar-live-row .live-timing {
	width: auto;
	max-width: none;
	margin: 0;
	border: 0;
	background: none;
}

.dirtcar-live-row > br {
	display: none;
}

.live-timing [hidden] {
	display: none !important;
}

.live-timing :focus-visible {
	outline: 2px solid #0075c9;
	outline-offset: 2px;
}

.live-timing .lt-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Phones: the region breaks out of the theme's side padding. */
@media (max-width: 767px) {
	.live-timing,
	.dirtcar-live-row {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
		border-inline: 0;
	}
}

/* ---------- tabs (several events today) ---------- */

.live-timing .lt-tabs {
	display: flex;
	flex-wrap: wrap;
	background: var(--lt-panel);
	border-bottom: 1px solid var(--lt-line);
}

.live-timing .lt-tab,
.live-timing .lt-tab:hover,
.live-timing .lt-tab:focus {
	flex: 0 1 auto;
	min-height: 44px;
	margin-bottom: -1px;
	padding: 0 16px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--lt-muted);
	font: 600 16px/1 var(--lt-f);
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: pointer;
}

.live-timing .lt-tab:hover,
.live-timing .lt-tab:focus {
	color: var(--lt-text);
}

.live-timing .lt-tab[aria-selected="true"],
.live-timing .lt-tab[aria-selected="true"]:hover,
.live-timing .lt-tab[aria-selected="true"]:focus {
	border-bottom-color: var(--series-color, #e2231a);
	color: var(--lt-text);
}

.live-timing .lt-tab:focus-visible {
	outline-offset: -3px;
}

.live-timing .lt-event.hidden {
	display: none;
}

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

.live-timing .lt-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 12px 14px;
	background: var(--lt-panel);
	border-bottom: 1px solid var(--lt-line);
}

.live-timing .lt-head-info {
	flex: 1 1 18rem;
	min-width: 0;
}

.live-timing .lt-event-name {
	margin: 0;
	padding: 0;
	color: var(--lt-text);
	font: 700 20px/1.15 var(--lt-f);
	letter-spacing: normal;
	text-transform: none;
}

.live-timing .lt-head-meta,
.live-timing .lt-head-weather {
	margin: 2px 0 0;
	color: var(--lt-muted);
	font-size: 15px;
	line-height: 1.35;
}

.live-timing .lt-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--lt-muted);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.live-timing .lt-live i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lt-dv);
}

.live-timing .lt-live.on {
	color: var(--lt-text);
}

.live-timing .lt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* link-buttons: pinned for every link state so the theme's global a / a:hover colors can't win */
.live-timing a.lt-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--lt-line-strong);
	border-radius: 3px;
	background: var(--lt-surface);
	font: 600 15px/1 var(--lt-f);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

.live-timing a.lt-btn:is(:link, :visited, :hover, :focus, :active) {
	color: var(--lt-text);
	text-decoration: none;
}

.live-timing a.lt-btn:hover {
	border-color: var(--lt-muted);
}

.live-timing a.lt-btn svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.live-timing a.lt-btn.lt-btn--dv {
	background: var(--lt-dv);
	border-color: var(--lt-dv);
}

.live-timing a.lt-btn.lt-btn--dv:is(:link, :visited, :hover, :focus, :active) {
	color: #fff;
}

.live-timing a.lt-btn.lt-btn--dv:hover {
	filter: brightness(1.08);
}

/* ---------- flag bar: the one strong color, and only because it carries the flag ---------- */

.live-timing .lt-flag {
	--lt-flag-bg: var(--lt-panel);
	--lt-flag-fg: var(--lt-muted);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	padding: 9px 14px;
	background: var(--lt-flag-bg);
	color: var(--lt-flag-fg);
	border-bottom: 1px solid var(--lt-line);
	font-size: 16px;
}

.live-timing .lt-flag-word {
	min-width: 7.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.live-timing .lt-flag-session {
	flex: 1 1 12rem;
	min-width: 0;
	font-weight: 600;
}

.live-timing .lt-flag-laps {
	font-weight: 600;
	white-space: nowrap;
}

.live-timing .lt-flag-session span,
.live-timing .lt-flag-laps span {
	font-weight: 400;
	opacity: 0.85;
}

.live-timing .lt-flag.f-green { --lt-flag-bg: var(--lt-flag-green); --lt-flag-fg: #fff; }
.live-timing .lt-flag.f-caution { --lt-flag-bg: var(--lt-flag-yellow); --lt-flag-fg: #15120f; }
.live-timing .lt-flag.f-red { --lt-flag-bg: var(--lt-flag-red); --lt-flag-fg: #fff; }
.live-timing .lt-flag.f-white { --lt-flag-bg: #fff; --lt-flag-fg: #15120f; }
.live-timing .lt-flag.f-black { --lt-flag-bg: #000; --lt-flag-fg: #fff; }

.live-timing .lt-flag.f-checkered {
	--lt-flag-bg: #fff;
	--lt-flag-fg: #15120f;
	padding-left: 34px;
}

.live-timing .lt-flag.f-checkered::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 22px;
	background: repeating-conic-gradient(#15120f 0% 25%, #fff 0% 50%) 0 0 / 11px 11px;
}

@media (prefers-color-scheme: dark) {
	.live-timing .lt-flag.f-checkered {
		border-bottom-color: #fff;
	}
}

/* ---------- radio bar (inserted by live-audio.js; the only visible audio UI in the Race Center) ---------- */

.live-timing .lt-radio {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--lt-line);
}

.live-timing .lt-play,
.live-timing .lt-play:hover,
.live-timing .lt-play:focus {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--series-color, #e2231a);
	color: var(--series-on-color, #fff);
	cursor: pointer;
}

.live-timing .lt-play:hover {
	filter: brightness(1.1);
}

.live-timing .lt-play[aria-disabled="true"],
.live-timing .lt-play[aria-disabled="true"]:hover,
.live-timing .lt-play[aria-disabled="true"]:focus,
.live-timing .lt-play.is-offline,
.live-timing .lt-play.is-offline:hover {
	background: var(--lt-line-strong);
	color: var(--lt-surface);
	filter: none;
	cursor: not-allowed;
}

.live-timing .lt-play svg {
	width: 14px;
	height: 14px;
}

.live-timing .lt-play .lt-pause,
.live-timing .lt-play.is-playing .lt-start {
	display: none;
}

.live-timing .lt-play.is-playing .lt-pause {
	display: block;
}

.live-timing .lt-radio-text {
	flex: 1;
	min-width: 0;
	font-size: 15px;
}

.live-timing .lt-radio-text b {
	font-weight: 600;
}

.live-timing .lt-radio-text span {
	color: var(--lt-muted);
}

.live-timing .lt-radio-state {
	color: var(--lt-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.live-timing .lt-radio-state.is-on {
	color: var(--lt-dv-text);
}

.live-timing .lt-cast,
.live-timing .lt-cast:hover,
.live-timing .lt-cast:focus {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--lt-muted);
	line-height: 0;
	cursor: pointer;
}

.live-timing .lt-cast:hover,
.live-timing .lt-cast:focus,
.live-timing .lt-cast.is-active {
	color: var(--lt-text);
}

.live-timing .lt-cast svg {
	width: 20px;
	height: 20px;
}

.live-timing .lt-cast .lt-cast-airplay,
.live-timing .lt-cast.is-airplay .lt-cast-chromecast {
	display: none;
}

.live-timing .lt-cast.is-airplay .lt-cast-airplay {
	display: block;
}

/* ---------- table ---------- */

.live-timing .lt-main {
	min-width: 0;
	container: lt-main / inline-size;
}

.live-timing table.lt-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
	font-size: 16px;
}

.live-timing .lt-table th {
	position: sticky;
	top: var(--lt-sticky-top, 0px);
	z-index: 1;
	padding: 7px 10px;
	background: var(--lt-surface);
	border: 0;
	border-bottom: 2px solid var(--lt-line-strong);
	color: var(--lt-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: right;
	text-transform: uppercase;
	white-space: nowrap;
}

.live-timing .lt-table th.c-pos,
.live-timing .lt-table th.c-no,
.live-timing .lt-table td.c-pos,
.live-timing .lt-table td.c-no {
	text-align: center;
}

.live-timing .lt-table th.c-chg,
.live-timing .lt-table th.c-drv,
.live-timing .lt-table td.c-chg,
.live-timing .lt-table td.c-drv {
	text-align: left;
}

.live-timing .lt-table td {
	height: 36px;
	padding: 2px 10px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--lt-line);
	color: var(--lt-text);
	font-size: 16px;
	line-height: 1.2;
	text-align: right;
	white-space: nowrap;
}

.live-timing .lt-table tbody:nth-of-type(even) td {
	background: var(--lt-row-alt);
}

.live-timing .lt-table td.c-pos {
	width: 3.25rem;
	font-weight: 700;
}

.live-timing .lt-item.leader td.c-pos {
	background: var(--series-color, #e2231a);
	color: var(--series-on-color, #fff);
}

.live-timing .lt-table td.c-chg {
	width: 2.5rem;
	padding-left: 0;
	font-size: 13px;
	font-weight: 600;
}

.live-timing .lt-table td.c-chg.up {
	color: var(--lt-up);
}

.live-timing .lt-table td.c-chg.down {
	color: var(--lt-down);
}

.live-timing .lt-table td.c-no {
	width: 3.5rem;
	font-weight: 700;
}

.live-timing .lt-table td.c-drv {
	width: 100%;
	max-width: 0;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
}

.live-timing .lt-table td.c-drv .short {
	display: none;
}

@media (min-width: 640px) {
	.live-timing .lt-table th.n {
		width: 5.75rem;
	}
}

.live-timing .lt-table td.dim {
	color: var(--lt-muted);
}

.live-timing .lt-table td.fastest {
	color: var(--lt-fastest);
	font-weight: 700;
}

.live-timing .lt-table td.pb {
	color: var(--lt-pb);
	font-weight: 600;
}

.live-timing .lt-table td.c-more,
.live-timing .lt-table th.c-more,
.live-timing .lt-table tr.detail {
	display: none;
}

/* Lap flash: the row of the car that just completed a lap (the leader's position cell keeps its series color). */
.live-timing .lt-item.is-flash > tr.row > td:not(.c-pos),
.live-timing .lt-item.is-flash:not(.leader) > tr.row > td.c-pos {
	animation: lt-lap 900ms ease-out;
}

@keyframes lt-lap {
	0%, 30% { background: var(--lt-flash); }
}

.live-timing .lt-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0;
	padding: 10px 14px;
	border-top: 1px solid var(--lt-line);
	color: var(--lt-muted);
	font-size: 14px;
	line-height: 1.4;
}

.live-timing .lt-legend b {
	font-weight: 600;
}

.live-timing .lt-legend .k-fast {
	color: var(--lt-fastest);
}

.live-timing .lt-legend .k-pb {
	color: var(--lt-pb);
}

.live-timing .lt-empty {
	padding: 28px 14px;
	color: var(--lt-muted);
	text-align: center;
}

.live-timing .lt-empty b {
	display: block;
	margin-bottom: 4px;
	color: var(--lt-text);
	font-size: 18px;
	font-weight: 600;
}

/* Detail line (tap a row): lists the values of whichever columns the layout hides. */
.live-timing .lt-table tr.row[aria-expanded] {
	cursor: pointer;
}

.live-timing .lt-table tr.row:focus-visible {
	outline-offset: -2px;
}

.live-timing .lt-table td.c-more::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.live-timing .lt-table tr.row[aria-expanded="true"] td.c-more::after {
	transform: rotate(225deg);
}

.live-timing .lt-table tr.row[aria-expanded="true"] + tr.detail {
	display: table-row;
}

.live-timing .lt-table tr.detail td {
	height: auto;
	padding: 4px 6px 10px;
	background: var(--lt-row-alt);
	text-align: left;
}

.live-timing .lt-detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
	gap: 6px;
	padding-left: var(--lt-detail-pad, 5.75rem);
}

.live-timing .lt-detail > div {
	display: none;
	min-width: 0;
}

.live-timing .lt-detail b {
	font-weight: 500;
}

.live-timing .lt-detail span {
	display: block;
	color: var(--lt-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.live-timing .lt-table.is-timed {
	--lt-detail-pad: 3.25rem;
}

/* Narrower boards drop the least useful columns instead of squeezing the driver name; the chevron appears
   and tapping a row lists the hidden values in its detail line. */
@container lt-main (max-width: 51.9375rem) {
	.live-timing .lt-table.is-timed .c-laps,
	.live-timing .lt-table.is-timed .c-onlap {
		display: none;
	}

	.live-timing .lt-table.is-timed td.c-more,
	.live-timing .lt-table.is-timed th.c-more {
		display: table-cell;
		width: 1.5rem;
		padding-inline: 4px;
		color: var(--lt-faint);
	}

	.live-timing .lt-table.is-timed .d-laps,
	.live-timing .lt-table.is-timed .d-onlap {
		display: block;
	}
}

@container lt-main (max-width: 47.9375rem) {
	.live-timing .lt-table.is-race .c-laps,
	.live-timing .lt-table.is-race .c-best {
		display: none;
	}

	.live-timing .lt-table.is-race td.c-more,
	.live-timing .lt-table.is-race th.c-more {
		display: table-cell;
		width: 1.5rem;
		padding-inline: 4px;
		color: var(--lt-faint);
	}

	.live-timing .lt-table.is-race .d-laps,
	.live-timing .lt-table.is-race .d-best {
		display: block;
	}
}

@container lt-main (max-width: 43.9375rem) {
	.live-timing .lt-table.is-timed .c-int {
		display: none;
	}

	.live-timing .lt-table.is-timed .d-int {
		display: block;
	}
}

/* ---------- off day: an info panel, no board ---------- */

.live-timing .lt-next {
	display: grid;
	gap: 12px;
	padding: 16px 14px;
}

.live-timing .lt-next-label {
	margin: 0;
	color: var(--lt-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.live-timing .lt-next-name {
	margin: 2px 0 0;
	padding: 0;
	color: var(--lt-text);
	font: 700 24px/1.1 var(--lt-f);
	letter-spacing: normal;
	text-transform: none;
}

.live-timing .lt-next-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 0;
	font-size: 16px;
}

.live-timing .lt-next-facts dt {
	margin: 0;
	color: var(--lt-muted);
	font-weight: 400;
}

.live-timing .lt-next-facts dd {
	margin: 0;
	font-weight: 600;
}

.live-timing .lt-next-text {
	margin: 0;
	color: var(--lt-muted);
}

.live-timing .lt-next-note {
	margin: 0;
	padding: 10px 14px;
	border-top: 1px solid var(--lt-line);
	color: var(--lt-muted);
	font-size: 15px;
}

.live-timing .lt-next-note a:is(:link, :visited, :hover, :focus) {
	color: var(--lt-text);
	font-weight: 600;
}

.live-timing .lt-error {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--lt-down);
}

/* ---------- phone ---------- */

@media (max-width: 639px) {
	.live-timing .lt-head,
	.live-timing .lt-radio,
	.live-timing .lt-next {
		padding-inline: 16px;
	}

	.live-timing .lt-flag {
		padding-inline: 16px;
	}

	.live-timing .lt-flag.f-checkered {
		padding-left: 34px;
	}

	.live-timing .lt-flag-word {
		min-width: 0;
	}

	.live-timing .lt-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	/* narrow phones (320px): the two header buttons wrap their labels instead of overflowing */
	.live-timing a.lt-btn {
		justify-content: center;
		padding-block: 5px;
		line-height: 1.15;
		text-align: center;
		white-space: normal;
	}

	.live-timing .lt-radio-text span {
		display: none;
	}

	.live-timing .lt-legend,
	.live-timing .lt-next-note {
		padding-inline: 16px;
	}

	.live-timing .lt-table th,
	.live-timing .lt-table td {
		padding-inline: 6px;
	}

	.live-timing .lt-table td {
		height: 42px;
	}

	.live-timing .lt-table td.c-pos {
		width: 2.5rem;
	}

	.live-timing .lt-table td.c-chg {
		width: 1.75rem;
	}

	.live-timing .lt-table td.c-no {
		width: 2.75rem;
	}

	/* race: Pos, change, No., Driver, Gap. timed: Pos, No., Driver, Best, Gap. The rest is in the detail line. */
	.live-timing .lt-table .c-laps,
	.live-timing .lt-table .c-int,
	.live-timing .lt-table .c-last,
	.live-timing .lt-table .c-onlap,
	.live-timing .lt-table.is-race .c-best {
		display: none;
	}

	.live-timing .lt-table td.c-more,
	.live-timing .lt-table th.c-more {
		display: table-cell;
		width: 1.5rem;
		padding-inline: 4px;
		color: var(--lt-faint);
	}

	.live-timing .lt-table td.c-drv .full {
		display: none;
	}

	.live-timing .lt-table td.c-drv .short {
		display: inline;
	}

	.live-timing .lt-table.is-race {
		--lt-detail-pad: 4.25rem;
	}

	.live-timing .lt-table.is-timed {
		--lt-detail-pad: 2.5rem;
	}

	.live-timing .lt-table.is-race .d-laps,
	.live-timing .lt-table.is-race .d-int,
	.live-timing .lt-table.is-race .d-last,
	.live-timing .lt-table.is-race .d-best,
	.live-timing .lt-table.is-timed .d-laps,
	.live-timing .lt-table.is-timed .d-onlap,
	.live-timing .lt-table.is-timed .d-int,
	.live-timing .lt-table.is-timed .d-last {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.live-timing .lt-item.is-flash > tr.row > td:not(.c-pos),
	.live-timing .lt-item.is-flash:not(.leader) > tr.row > td.c-pos {
		animation: none;
	}
}