/*
	STO Audios: layout only. Colors, fonts, sizes and spacing come from the theme. Selectors are wrapped in :where()
	so any theme rule wins without fighting specificity or load order.

	CSS variables (set them on the players): --sto-audios-wave, --sto-audios-progress (waveform colors, read by view.js),
	--sto-audios-wave-height (Module A), --sto-audios-row-wave-height (Module B), --sto-audios-transcript-height.

	Module A, .sto-audio (+ .is-enhanced when JavaScript runs): __header, __cover, __heading, __title, __meta, __player,
	__play (.is-playing), __wave, __time, __current, __total, __rate, __media, __transcript, __transcript-header,
	__transcript-title, __follow, __cues (Hyperaudio Lite transcript: __transcript-body > __transcript-section > __cue),
	__cue (paragraph, .active while spoken), __cue-time,
	__cue-text (segment: .active / .read / .unread, set by Hyperaudio Lite).

	Module B, .sto-audio-list (+ .is-enhanced): __header, __heading, __items, __item (.is-active; --featured = the first,
	bigger). Row: __cover (left, both rows) + __body: __head (__play (.is-playing), __heading-text: __title, __link,
	__meta) and __track (__wave (+ __live), __time: __current, __duration). __empty.

	Shared: .sto-audio-icon (--play / --pause), .sto-audio-wave-static (SVG bars, currentColor).
*/
:where(.sto-audio, .sto-audio-list),
:where(.sto-audio, .sto-audio-list) *,
:where(.sto-audio, .sto-audio-list) *::before,
:where(.sto-audio, .sto-audio-list) *::after {
	box-sizing: border-box;
}

/* Play / pause buttons: one icon at a time. */
:where(.sto-audio__play, .sto-audio-list__play) {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

:where(.sto-audio-icon) {
	width: 50%;
	height: 50%;
}

:where(.sto-audio__play, .sto-audio-list__play) .sto-audio-icon--pause,
:where(.is-playing) .sto-audio-icon--play {
	display: none;
}

:where(.is-playing) .sto-audio-icon--pause {
	display: block;
}

:where(.sto-audio-wave-static) {
	display: block;
	width: 100%;
	height: 100%;
}

/* Module A. */
:where(.sto-audio) .sto-audio__header {
	display: flex;
	align-items: center;
	gap: 16px;
}

:where(.sto-audio) .sto-audio__cover {
	flex-shrink: 0;
	object-fit: cover;
}

:where(.sto-audio) .sto-audio__heading {
	min-width: 0;
}

:where(.sto-audio) .sto-audio__title,
:where(.sto-audio) .sto-audio__meta {
	margin: 0;
}

/* One row; on narrow players the time and speed drop to a second row (the waveform keeps at least 60%). */
:where(.sto-audio) .sto-audio__player {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

:where(.sto-audio) .sto-audio__wave {
	position: relative;
	flex: 1 1 60%;
	min-width: 0;
	height: var(--sto-audios-wave-height, 64px);
	cursor: pointer;
}

:where(.sto-audio) .sto-audio__time {
	flex-shrink: 0;
	margin: 0 0 0 auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

:where(.sto-audio) .sto-audio__rate {
	flex-shrink: 0;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

/* Without JavaScript: the native player (the custom controls can't work). */
:where(.sto-audio:not(.is-enhanced)) .sto-audio__play,
:where(.sto-audio:not(.is-enhanced)) .sto-audio__time,
:where(.sto-audio:not(.is-enhanced)) .sto-audio__rate,
:where(.sto-audio.is-enhanced) .sto-audio__media {
	display: none;
}

:where(.sto-audio) .sto-audio__media {
	width: 100%;
}

:where(.sto-audio) .sto-audio__transcript-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

:where(.sto-audio) .sto-audio__transcript-title {
	margin: 0;
}

:where(.sto-audio) .sto-audio__follow,
:where(.sto-audio) .sto-audio__cue-time,
:where(.sto-audio) .sto-audio__cue-text {
	cursor: pointer;
}

/* The transcript scrolls inside its box (view.js keeps the spoken segment in view). */
:where(.sto-audio) .sto-audio__cues {
	position: relative;
	max-height: var(--sto-audios-transcript-height, 320px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

:where(.sto-audio) .sto-audio__cue {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

:where(.sto-audio) .sto-audio__cue-time {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* Module B. */
:where(.sto-audio-list) .sto-audio-list__heading {
	margin: 0;
}

:where(.sto-audio-list) .sto-audio-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.sto-audio-list) .sto-audio-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

/* Featured (first) item: taller waveform (--sto-audios-featured-wave-height). */
:where(.sto-audio-list) .sto-audio-list__item--featured .sto-audio-list__wave {
	height: var(--sto-audios-featured-wave-height, 56px);
}

:where(.sto-audio-list) .sto-audio-list__cover {
	flex-shrink: 0;
	object-fit: cover;
}

/* Right of the cover: play + title on top, the waveform (to the row's end) + time below. */
:where(.sto-audio-list) .sto-audio-list__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

:where(.sto-audio-list) .sto-audio-list__head,
:where(.sto-audio-list) .sto-audio-list__track {
	display: flex;
	align-items: center;
	gap: 12px;
}

:where(.sto-audio-list) .sto-audio-list__heading-text {
	min-width: 0;
}

:where(.sto-audio-list) .sto-audio-list__title,
:where(.sto-audio-list) .sto-audio-list__meta {
	margin: 0;
}

:where(.sto-audio-list) .sto-audio-list__wave {
	position: relative;
	flex: 1;
	min-width: 0;
	height: var(--sto-audios-row-wave-height, 32px);
	cursor: pointer;
}

/* The playing row swaps its static waveform for the live one. */
:where(.sto-audio-list) .is-active .sto-audio-wave-static {
	display: none;
}

:where(.sto-audio-list) .sto-audio-list__live {
	height: 100%;
}

:where(.sto-audio-list) .sto-audio-list__time {
	flex-shrink: 0;
	margin: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

:where(.sto-audio-list) .sto-audio-list__current[hidden] {
	display: none;
}

/* Without JavaScript the rows can't play: the title links to the file. */
:where(.sto-audio-list:not(.is-enhanced)) .sto-audio-list__play {
	display: none;
}