/**
 * Article Voice frontend player styles.
 * Flat, editorial "listen to this article" treatment matching typical news-site
 * conventions (masthead rule, red accent, tabular time), not a SaaS-app gradient widget.
 * Theme-overridable via the --av-* custom properties below; automatic dark-mode support.
 */

.article-voice-player {
	--av-accent: #c8102e;
	--av-accent-ink: #ffffff;
	--av-bg: #ffffff;
	--av-text: #1a1a1a;
	--av-text-muted: #5c5c5c;
	--av-track: #e4e4e4;

	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 1.75em 0;
	padding: 16px 18px;
	border-top: 3px solid var( --av-accent );
	border-bottom: 3px solid var( --av-accent );
	background: var( --av-bg );
	font-family: inherit;
	color: var( --av-text );
}

/*
 * Theme switching. Default ("auto") follows the visitor's OS/browser preference via
 * prefers-color-scheme. Admins can pin it to always-light or always-dark in Settings ->
 * Article Voice -> Player Theme (useful when the site's own theme doesn't expose or match
 * a system dark-mode signal); that renders as a `data-scheme` attribute on the player.
 */
@media ( prefers-color-scheme: dark ) {
	.article-voice-player[data-scheme="auto"],
	.article-voice-player:not( [data-scheme] ) {
		--av-bg: #17151f;
		--av-track: #35304a;
		--av-text: #f1eefc;
		--av-text-muted: #a8a3bd;
	}
}

.article-voice-player[data-scheme="dark"] {
	--av-bg: #17151f;
	--av-track: #35304a;
	--av-text: #f1eefc;
	--av-text-muted: #a8a3bd;
}

.article-voice-player[data-scheme="light"] {
	--av-bg: #ffffff;
	--av-track: #e4e4e4;
	--av-text: #1a1a1a;
	--av-text-muted: #5c5c5c;
}

.article-voice-player__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.article-voice-player__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: none;
	border-radius: 50%;
	background: var( --av-accent );
	color: var( --av-accent-ink );
	cursor: pointer;
	touch-action: manipulation;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
}

.article-voice-player__play:hover {
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.3 );
}

.article-voice-player__play:active {
	transform: scale( 0.94 );
}

.article-voice-player__play svg {
	display: block !important;
	visibility: visible !important;
	width: 18px !important;
	height: 18px !important;
	pointer-events: none;
}

.article-voice-player__icon-play {
	margin-left: 2px;
}

.article-voice-player__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.article-voice-player__scrub-wrap {
	position: relative;
	display: flex;
	align-items: center;
	height: 28px;
}

.article-voice-player__scrub-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY( -50% );
	height: 4px;
	width: 0;
	background: var( --av-accent );
	pointer-events: none;
}

.article-voice-player__scrub {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	height: 28px;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	touch-action: manipulation;
}

.article-voice-player__scrub::-webkit-slider-runnable-track {
	height: 4px;
	background: var( --av-track );
}

.article-voice-player__scrub::-moz-range-track {
	height: 4px;
	background: var( --av-track );
}

.article-voice-player__scrub::-webkit-slider-thumb {
	-webkit-appearance: none;
	margin-top: -7px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var( --av-accent );
	border: 2px solid var( --av-bg );
	box-shadow: 0 0 0 1px var( --av-accent );
}

.article-voice-player__scrub::-moz-range-thumb {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var( --av-accent );
	border: 2px solid var( --av-bg );
	box-shadow: 0 0 0 1px var( --av-accent );
}

.article-voice-player__scrub:disabled {
	cursor: wait;
	opacity: 0.5;
}

.article-voice-player__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.article-voice-player__label {
	font-size: 11px;
	font-weight: 700;
	color: var( --av-accent );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.article-voice-player__time {
	flex: 0 0 auto;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var( --av-text-muted );
	white-space: nowrap;
}

.article-voice-player__speed {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 8px;
	border-radius: 4px;
	border: 1px solid var( --av-track );
	background: var( --av-bg );
	color: var( --av-text );
	cursor: pointer;
}

.article-voice-player__speed:focus-visible,
.article-voice-player__play:focus-visible,
.article-voice-player__scrub:focus-visible {
	outline: 2px solid var( --av-accent );
	outline-offset: 2px;
}

.article-voice-player__trial-note {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --av-accent );
	text-align: right;
}

/* Generating placeholder */

.article-voice-player--generating {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.article-voice-player__generating-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var( --av-text-muted );
}

.article-voice-player__spinner {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 2px solid var( --av-track );
	border-top-color: var( --av-accent );
	animation: article-voice-spin 0.8s linear infinite;
}

@keyframes article-voice-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.article-voice-player__spinner {
		animation-duration: 2.4s;
	}

	.article-voice-player__play,
	.article-voice-player__play:active {
		transition: none;
		transform: none;
	}
}

@media ( max-width: 480px ) {
	.article-voice-player {
		padding: 12px 14px;
	}

	.article-voice-player__row {
		gap: 10px;
	}

	.article-voice-player__play {
		width: 40px;
		height: 40px;
	}

	.article-voice-player__label {
		max-width: 140px;
	}

	.article-voice-player__speed {
		padding: 5px 6px;
		font-size: 12px;
	}
}