/**
 * Creative Workspace — public TTS audio player.
 *
 * Theme-neutral: every visual choice is a custom property so the active theme
 * can restyle without fighting specificity. Meets the accessibility bar:
 * visible keyboard focus, 4.5:1 text contrast, 3:1 control contrast, ~44px
 * touch targets, and prefers-reduced-motion support. State is never encoded
 * by color alone.
 */
.cw-tts-player {
	/* Theme may override these tokens. */
	--cw-tts-text: inherit;
	--cw-tts-accent: inherit;
	--cw-tts-border: currentColor;
	--cw-tts-surface: transparent;
	--cw-tts-radius: 8px;
	--cw-tts-gap: 0.5rem;

	display: block;
	margin: 0 0 1.5rem;
	line-height: 1.5;
	color: var(--cw-tts-text);
	background: var(--cw-tts-surface);
}

.cw-tts-player:focus-within {
	outline: 2px solid var(--cw-tts-accent, currentColor);
	outline-offset: 2px;
}

.cw-tts-player.cw-tts-player--light {
	color: #1a1a1a;
	background: #ffffff;
}

.cw-tts-player.cw-tts-player--dark {
	color: #e8e8e8;
	background: #1a1a1a;
}

.cw-tts-player--compact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--cw-tts-gap);
}

.cw-tts-player__title {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.4;
}

.cw-tts-player__audio {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: calc(var(--cw-tts-gap) * 0.5) 0;
}

.cw-tts-player__duration {
	display: inline-block;
	font-size: 0.875em;
	opacity: 0.9; /* contrast-safe: never the only signal */
}

.cw-tts-player__actions {
	display: inline-flex;
	gap: var(--cw-tts-gap);
	margin-inline-start: var(--cw-tts-gap);
}

.cw-tts-player__link {
	/* Icon-free, text-based link buttons: rely on text, not color alone. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--cw-tts-border, currentColor);
	border-radius: var(--cw-tts-radius);
	text-decoration: underline;
}

.cw-tts-player__link:focus-visible,
.cw-tts-player__audio:focus-visible {
	outline: 3px solid var(--cw-tts-accent, #0a5cff);
	outline-offset: 2px;
}

/* Native audio controls honor reduced motion on their own; keep the wrapper
   from animating anything on top of them. */
@media (prefers-reduced-motion: reduce) {
	.cw-tts-player,
	.cw-tts-player * {
		animation: none !important;
		transition: none !important;
	}
}