/*
 * lwl-audio-player.css — bespoke themed Listening audio player.
 *
 * ISOLATED on purpose: this component used to live inside the giant
 * lwl-path.css and was silently clobbered when a parallel workstream
 * committed a whole-file copy of that monolith that predated it
 * (commits dec1946 / 878eeab — 2026-06-21). Keeping it in its own file
 * means edits to lwl-path.css can never overwrite it again.
 *
 * Pairs with assets/lwl-audio-player.js and LWL_Path::audio_player_markup().
 * Reusable: any surface (Exam Dojo, etc.) can enqueue this + the JS and
 * emit the [data-lwl-audio] markup. See repo-root LWL_AUDIO_PLAYER_COMPONENT.md.
 */

/* 2026-06-19 — Persistent Listening player. Hoisted out of the question stem
   and pinned to the top of the quiz so the recording stays visible and
   controllable while students scroll between questions. */
.lwl-path-quiz__listening {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: 14px;
	background: rgba(18,18,24,0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255,200,120,0.18);
	box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.lwl-path-quiz__listening-label {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--lwl-path-route-tint, rgba(255,200,120,0.85));
}
.lwl-path-quiz__listening-track {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 260px;
}
.lwl-path-quiz__listening-num {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,200,120,0.16);
	color: #ffd87b;
	font-size: 12px;
	font-weight: 700;
}
.lwl-path-audio {
	max-width: 100%;
}
.lwl-path-quiz__listening .lwl-path-audio {
	flex: 1 1 auto;
	min-width: 200px;
	height: 40px;
}
@media (prefers-reduced-motion: reduce) {
	.lwl-path-quiz__listening {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* 2026-06-19 — Bespoke Listening audio player (replaces stock <audio>
   controls). Themed to the Path: gold play orb, living equaliser, shimmering
   seek bar. Driven by wireAudioPlayers() in lwl-path.js. */
.lwl-path-audioplayer {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	min-width: 0;
}
.lwl-path-audioplayer__media { display: none; }

/* Play / pause orb */
.lwl-path-audioplayer__btn {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #2a1c05;
	background: radial-gradient(125% 125% at 30% 22%, #ffe9a8 0%, var(--lwl-path-gold, #fcd34d) 44%, #e0900c 100%);
	box-shadow:
		0 7px 20px rgba(245, 158, 11, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 0.6),
		inset 0 -3px 7px rgba(120, 60, 0, 0.30);
	transition: transform var(--lwl-path-fast, 0.18s ease), box-shadow var(--lwl-path-fast, 0.18s ease);
	-webkit-tap-highlight-color: transparent;
}
.lwl-path-audioplayer__btn:hover { transform: translateY(-1px) scale(1.05); box-shadow: 0 10px 26px rgba(245, 158, 11, 0.52), inset 0 1px 0 rgba(255,255,255,0.6); }
.lwl-path-audioplayer__btn:active { transform: scale(0.95); }
.lwl-path-audioplayer__btn:focus-visible { outline: 2px solid var(--lwl-path-gold, #fcd34d); outline-offset: 3px; }
.lwl-path-audioplayer__btn-glow {
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid rgba(252, 211, 77, 0.55);
	opacity: 0;
	pointer-events: none;
}
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__btn-glow {
	animation: lwl-audio-ring 1.9s ease-out infinite;
}
@keyframes lwl-audio-ring {
	0%   { opacity: 0.7; transform: scale(0.82); }
	70%  { opacity: 0;   transform: scale(1.4); }
	100% { opacity: 0;   transform: scale(1.4); }
}
.lwl-path-audioplayer__ico {
	width: 21px;
	height: 21px;
	fill: currentColor;
	position: absolute;
	transition: opacity var(--lwl-path-fast, 0.18s ease), transform var(--lwl-path-fast, 0.18s ease);
}
.lwl-path-audioplayer__ico--play { transform: translateX(1px); }
.lwl-path-audioplayer__ico--pause { opacity: 0; transform: scale(0.6); }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__ico--play  { opacity: 0; transform: scale(0.6); }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__ico--pause { opacity: 1; transform: none; }

/* Main column */
.lwl-path-audioplayer__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Seek bar */
.lwl-path-audioplayer__scrub {
	position: relative;
	height: 16px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}
.lwl-path-audioplayer__rail,
.lwl-path-audioplayer__buffer,
.lwl-path-audioplayer__fill {
	position: absolute;
	left: 0;
	top: 50%;
	height: 5px;
	transform: translateY(-50%);
	border-radius: 999px;
}
.lwl-path-audioplayer__rail { right: 0; background: rgba(255, 255, 255, 0.13); }
.lwl-path-audioplayer__buffer { width: 0; background: rgba(255, 255, 255, 0.18); }
.lwl-path-audioplayer__fill {
	width: 0;
	background: linear-gradient(90deg, #e0900c 0%, var(--lwl-path-gold, #fcd34d) 55%, #fff1c4 100%);
	background-size: 200% 100%;
	box-shadow: 0 0 12px rgba(252, 211, 77, 0.5);
}
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__fill {
	animation: lwl-audio-shimmer 2.4s linear infinite;
}
@keyframes lwl-audio-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: 0 0; }
}
.lwl-path-audioplayer__thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 13px;
	margin-left: -6px;
	border-radius: 50%;
	background: #fff7e2;
	box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
	transform: translateY(-50%) scale(0.85);
	transition: transform var(--lwl-path-fast, 0.18s ease);
	pointer-events: none;
}
.lwl-path-audioplayer__scrub:hover .lwl-path-audioplayer__thumb,
.lwl-path-audioplayer.is-scrubbing .lwl-path-audioplayer__thumb { transform: translateY(-50%) scale(1.2); }
.lwl-path-audioplayer__scrub:focus-visible { outline: none; }
.lwl-path-audioplayer__scrub:focus-visible .lwl-path-audioplayer__rail { box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.6); }

/* Meta row: living equaliser + time */
.lwl-path-audioplayer__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.lwl-path-audioplayer__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2.5px;
	height: 14px;
}
.lwl-path-audioplayer__eq i {
	width: 3px;
	height: 4px;
	border-radius: 2px;
	background: var(--lwl-path-route-tint, #fcd34d);
	opacity: 0.5;
	transform-origin: bottom;
}
.lwl-path-audioplayer__eq i:nth-child(1) { height: 6px; }
.lwl-path-audioplayer__eq i:nth-child(2) { height: 11px; }
.lwl-path-audioplayer__eq i:nth-child(3) { height: 14px; }
.lwl-path-audioplayer__eq i:nth-child(4) { height: 8px; }
.lwl-path-audioplayer__eq i:nth-child(5) { height: 5px; }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i {
	animation: lwl-audio-eq 0.95s ease-in-out infinite;
}
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i:nth-child(1) { animation-delay: -0.10s; }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i:nth-child(2) { animation-delay: -0.45s; }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i:nth-child(3) { animation-delay: -0.25s; }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i:nth-child(4) { animation-delay: -0.62s; }
.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i:nth-child(5) { animation-delay: -0.34s; }
@keyframes lwl-audio-eq {
	0%, 100% { transform: scaleY(0.38); opacity: 0.5; }
	50%      { transform: scaleY(1);    opacity: 1; }
}
.lwl-path-audioplayer__time {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: rgba(245, 243, 238, 0.66);
	white-space: nowrap;
}
.lwl-path-audioplayer__time [data-role="cur"] { color: var(--lwl-path-gold, #fcd34d); font-weight: 600; }
.lwl-path-audioplayer__time-sep { margin: 0 4px; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
	.lwl-path-audioplayer__btn-glow,
	.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__fill,
	.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i { animation: none !important; }
	.lwl-path-audioplayer.is-playing .lwl-path-audioplayer__eq i { transform: scaleY(0.72); opacity: 0.85; }
}