/* ==========================================================================
   Moose Audio (moose/dm-audio)
   Round outline play button + label + hairline seek bar with time.
   Colours follow the brand tokens; override the --dm-audio-* hooks per site.
   ========================================================================== */

.dm-audio {
	--dm-audio-color: var(--dm-brand-color-1);
	--dm-audio-track: hsla(var(--dm-bc-1-hs), var(--dm-bc-1-l), 0.18);
	--dm-audio-size: 4.8rem;
	--dm-audio-progress: 0%;

	display: flex;
	align-items: center;
	gap: 1.8rem;
	width: 100%;
	max-width: 34rem;
	color: var(--dm-audio-color);
}

.dm-audio__media { display: none; }

.dm-audio--empty {
	padding: 1.6rem;
	border: 1px dashed currentColor;
	font-size: 1.3rem;
}

/* Play / pause */
.dm-audio__toggle {
	position: relative;
	flex: 0 0 var(--dm-audio-size);
	width: var(--dm-audio-size);
	height: var(--dm-audio-size);
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dm-audio__toggle:hover,
.dm-audio.is-playing .dm-audio__toggle {
	background-color: var(--dm-audio-color);
	color: var(--dm-white);
}
.dm-audio__toggle:focus-visible {
	outline: 1px solid var(--dm-audio-color);
	outline-offset: 0.4rem;
}

/* Slow pulsing ring while playing */
.dm-audio__toggle::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--dm-audio-color);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
.dm-audio.is-playing .dm-audio__toggle::after {
	animation: dm-audio-ring 2.4s ease-out infinite;
}
@keyframes dm-audio-ring {
	0%   { transform: scale(1);    opacity: 0.45; }
	100% { transform: scale(1.45); opacity: 0; }
}

.dm-audio__icon { width: 1.6rem; height: 1.6rem; }
.dm-audio__icon--play { margin-left: 0.2rem; }  /* optical centring of the triangle */
.dm-audio__icon--pause,
.dm-audio.is-playing .dm-audio__icon--play { display: none; }
.dm-audio.is-playing .dm-audio__icon--pause { display: block; }

/* Text + bar */
.dm-audio__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.dm-audio .dm-audio__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.8rem;
	margin: 0;
	text-align: left;
	line-height: 1.3;
}
.dm-audio__label {
	font-family: var(--dm-audio-label-font, var(--dm-font-family-accent));
	font-style: var(--dm-audio-label-style, italic);
	font-size: 2.2rem;
	line-height: 1.1;
}
.dm-audio__caption {
	font-family: var(--dm-font-family-body);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	opacity: 0.75;
}

.dm-audio__bar {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}
.dm-audio__time {
	flex: 0 0 auto;
	font-family: var(--dm-font-family-body);
	font-size: 1.2rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

/* Hairline seek bar: the filled part is painted with a gradient stop */
.dm-audio__seek {
	flex: 1 1 auto;
	min-width: 0;
	height: 1.6rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.dm-audio__seek::-webkit-slider-runnable-track {
	height: 1px;
	background: linear-gradient(to right, var(--dm-audio-color) var(--dm-audio-progress), var(--dm-audio-track) var(--dm-audio-progress));
}
.dm-audio__seek::-moz-range-track {
	height: 1px;
	background: linear-gradient(to right, var(--dm-audio-color) var(--dm-audio-progress), var(--dm-audio-track) var(--dm-audio-progress));
}
.dm-audio__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 0.9rem;
	height: 0.9rem;
	margin-top: -0.4rem;
	border: 0;
	border-radius: 50%;
	background: var(--dm-audio-color);
	transition: transform 0.2s ease;
}
.dm-audio__seek::-moz-range-thumb {
	width: 0.9rem;
	height: 0.9rem;
	border: 0;
	border-radius: 50%;
	background: var(--dm-audio-color);
	transition: transform 0.2s ease;
}
.dm-audio__seek:hover::-webkit-slider-thumb { transform: scale(1.3); }
.dm-audio__seek:hover::-moz-range-thumb { transform: scale(1.3); }
.dm-audio__seek:focus-visible { outline: 1px solid var(--dm-audio-color); outline-offset: 0.3rem; }

@media (max-width: 767px) {
	.dm-audio { max-width: 30rem; gap: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dm-audio.is-playing .dm-audio__toggle::after { animation: none; }
}