/* Series radio card, standalone. Inside the Race Center (.dirtcar-live-row) the radio bar from livetiming.css is the visible
   control and this card is only kept (visually hidden, inert) for its <audio> element and JS hooks.
   It can load without livetiming.css, so it carries its own copy of the Race Center tokens. */

.dirtcar-live-audio {
	--lt-panel: #f4f5f6;
	--lt-surface: #ffffff;
	--lt-line: #e2e5e9;
	--lt-line-strong: #c9ced4;
	--lt-text: #1c2024;
	--lt-muted: #646b73;
	--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) {
	.dirtcar-live-audio {
		--lt-panel: #15181b;
		--lt-surface: #15181b;
		--lt-line: #262a2f;
		--lt-line-strong: #353a40;
		--lt-text: #eceef0;
		--lt-muted: #9aa1a9;
		--lt-dv-text: #f0405a;
		color-scheme: dark;
	}
}

.dirtcar-live-audio {
	position: relative;
	max-width: 26rem;
	margin: 0 auto 1.5em;
	padding: 14px;
	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;
}

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

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

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

/* In the Race Center: visually hidden, still in the DOM (the <audio> must not be display:none). */
.dirtcar-live-row .dirtcar-live-audio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dirtcar-live-audio__top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dirtcar-live-audio__art {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--series-color, #e2231a);
	color: var(--series-on-color, #fff);
}

.dirtcar-live-audio .dirtcar-live-audio__art img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.dirtcar-live-audio__art svg {
	width: 24px;
	height: 24px;
}

.dirtcar-live-audio__meta {
	min-width: 0;
	flex: 1;
}

.dirtcar-live-audio .dirtcar-live-audio__kicker {
	margin: 0;
	color: var(--lt-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dirtcar-live-audio .dirtcar-live-audio__title {
	margin: 0;
	padding: 0;
	color: var(--lt-text);
	font: 700 18px/1.15 var(--lt-f);
	letter-spacing: normal;
	text-transform: none;
}

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

.dirtcar-live-audio__state.is-on {
	color: var(--lt-dv-text);
}

.dirtcar-live-audio .dirtcar-live-audio__cast,
.dirtcar-live-audio .dirtcar-live-audio__cast:hover,
.dirtcar-live-audio .dirtcar-live-audio__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;
}

.dirtcar-live-audio .dirtcar-live-audio__cast:hover,
.dirtcar-live-audio .dirtcar-live-audio__cast:focus,
.dirtcar-live-audio .dirtcar-live-audio__cast--active {
	color: var(--lt-text);
}

.dirtcar-live-audio__cast-icon {
	width: 20px;
	height: 20px;
}

.dirtcar-live-audio__cast-icon--airplay {
	display: none;
}

.dirtcar-live-audio__cast--airplay .dirtcar-live-audio__cast-icon--cast {
	display: none;
}

.dirtcar-live-audio__cast--airplay .dirtcar-live-audio__cast-icon--airplay {
	display: inline;
}

.dirtcar-live-audio__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

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

.dirtcar-live-audio .dirtcar-live-audio__play:hover {
	filter: brightness(1.1);
}

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

.dirtcar-live-audio__icon {
	width: 16px;
	height: 16px;
}

.dirtcar-live-audio__icon--pause,
.dirtcar-live-audio__play.is-playing .dirtcar-live-audio__icon--play {
	display: none;
}

.dirtcar-live-audio__play.is-playing .dirtcar-live-audio__icon--pause {
	display: block;
}

.dirtcar-live-audio__readout {
	min-width: 0;
}

.dirtcar-live-audio .dirtcar-live-audio__status,
.dirtcar-live-audio .dirtcar-live-audio__hint {
	margin: 0;
	color: var(--lt-muted);
	font-size: 15px;
	line-height: 1.35;
}

.dirtcar-live-audio .dirtcar-live-audio__hint b {
	display: block;
	color: var(--lt-text);
	font-weight: 600;
}

/* The status line (offline / waiting for timing) replaces the hint. */
.dirtcar-live-audio .dirtcar-live-audio__status:not([hidden]) + .dirtcar-live-audio__hint {
	display: none;
}

/* Kept in the DOM for hls.js, Media Session and casting; the card's own button is the control. */
.dirtcar-live-audio .dirtcar-live-audio__player {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
	pointer-events: none;
}

.dirtcar-live-audio .dirtcar-live-audio__tip {
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--lt-line);
	color: var(--lt-muted);
	font-size: 13px;
	line-height: 1.4;
}