/* =========================================================
 *
 *  The audio player
 *
 *  Loaded alongside whichever style is active, so it has to take its
 *  colours from all eight of them. The styles do not agree on token
 *  names: Editorial has --ink-soft, the newer ones have --soft, and
 *  the British style has --grey-1 and no --accent at all.
 *
 *  Rather than edit every stylesheet, the block below resolves them
 *  into one set using variable fallback chains. Each falls through to
 *  the next name until one is defined, with a literal at the end so
 *  the player is never unstyled.
 *
 * ========================================================= */

.tracks {
	--p-paper:  var(--card, var(--raised, var(--paper, var(--white, #fff))));
	--p-ground: var(--paper, var(--white, #fff));
	--p-sunk:   var(--paper-sunk, var(--sunk, var(--grey-3, #f1f1f1)));
	--p-ink:    var(--ink, var(--black, #1c1c1c));
	--p-soft:   var(--ink-soft, var(--soft, var(--grey-1, #55514a)));
	--p-faint:  var(--ink-faint, var(--faint, var(--grey-1, #6f6a63)));
	--p-rule:   var(--rule, var(--grey-2, #d9d5cc));
	--p-accent: var(--accent, var(--blue, #c2452a));

	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: .75rem;
}

/* ---------- one recording ---------- */

.track {
	background: var(--p-paper);
	border: 1px solid var(--p-rule);
	padding: 1.1rem 1.2rem;
	transition: border-color .2s;
}

.track.is-playing { border-color: var(--p-accent); }

.track__head { margin-bottom: .9rem; }

.track__title {
	font-size: 1.15em;
	margin: 0 0 .2rem;
	color: var(--p-ink);
}

.track.is-playing .track__title { color: var(--p-accent); }

.track__meta {
	font-size: .8em;
	color: var(--p-faint);
	margin: 0;
}

.track__meta .dot { margin-inline: .45em; }
.track__meta a { color: inherit; }
.track__meta a:hover { color: var(--p-accent); }

/* the native controls are the no-JS fallback; the script removes the
   attribute and the browser then hides the element itself */
.track audio:not([controls]) { display: none; }
.track__fallback { width: 100%; }

/* ---------- transport ---------- */

.player {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.player__transport { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

.player__btn {
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: none;
	color: var(--p-soft);
	cursor: pointer;
	font: inherit;
	transition: color .2s, background-color .2s;
}

.player__btn:hover { color: var(--p-accent); }

.player__skip {
	position: relative;
	width: 2.4rem;
	height: 2.4rem;
}

.player__skip svg { transform: translateY(-3px); }

.player__secs {
	position: absolute;
	inset-inline: 0;
	bottom: 3px;
	font-size: .55em;
	font-weight: 600;
	line-height: 1;
}

.player__play {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--p-accent);
	color: var(--p-ground);
}

.player__play:hover {
	background: var(--p-accent);
	color: var(--p-ground);
	filter: brightness(1.1);
}

.player__play svg { grid-area: 1 / 1; }

/* which of the three glyphs shows */
.player__icon-pause, .player__icon-wait { display: none; }
.track.is-playing .player__icon-play { display: none; }
.track.is-playing .player__icon-pause { display: block; }
.track.is-waiting .player__icon-play,
.track.is-waiting .player__icon-pause { display: none; }
.track.is-waiting .player__icon-wait { display: block; animation: player-spin .9s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
	.track.is-waiting .player__icon-wait { animation-duration: 2.4s; }
}

/* ---------- progress ---------- */

.player__timeline { flex: 1 1 auto; min-width: 0; }

.player__progress {
	position: relative;
	padding-block: 8px;
	cursor: pointer;
	touch-action: none;
}

.player__track {
	position: relative;
	height: 5px;
	background: var(--p-sunk);
	overflow: hidden;
}

.player__buffered, .player__played {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 0;
}

.player__buffered { background: var(--p-rule); }
.player__played { background: var(--p-accent); }

.player__handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 13px;
	margin: -6.5px 0 0 -6.5px;
	border-radius: 50%;
	background: var(--p-accent);
	opacity: 0;
	transition: opacity .2s;
}

.player__progress:hover .player__handle,
.player__progress:focus-visible .player__handle,
.player__progress.is-scrubbing .player__handle,
.track.is-playing .player__handle { opacity: 1; }

.player__times {
	display: flex;
	justify-content: space-between;
	font-size: .72em;
	font-variant-numeric: tabular-nums;
	color: var(--p-faint);
	line-height: 1;
}

/* ---------- speed ---------- */

.player__extras { flex-shrink: 0; }

.player__speed {
	min-width: 2.9rem;
	height: 1.9rem;
	padding: 0 .5rem;
	border: 1px solid var(--p-rule);
	border-radius: 999px;
	font-size: .74em;
	font-weight: 600;
	color: var(--p-soft);
}

.player__speed.is-changed {
	border-color: var(--p-accent);
	color: var(--p-accent);
}

/* ---------- notices ---------- */

.player__note {
	display: none;
	margin: .9rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--p-rule);
	font-size: .78em;
	color: var(--p-faint);
}

.player__note.is-visible { display: block; }

.player__note button {
	border: 0;
	background: none;
	padding: 0;
	margin-inline-start: .3em;
	font: inherit;
	color: var(--p-accent);
	text-decoration: underline;
	cursor: pointer;
}

.track.has-error .player { opacity: .4; pointer-events: none; }
.track.has-error .player__note { display: block; }

/* ---------- collections ---------- */

.collection { margin-bottom: 2.5rem; }
.collection__title { font-size: 1.4em; margin-bottom: .3rem; }

.collection__subtitle {
	color: var(--ink-soft, var(--soft, var(--grey-1, #55514a)));
	font-size: .92em;
	margin-bottom: 1.2rem;
	max-width: 44rem;
}

/* ---------- small screens ---------- */

@media (max-width: 34rem) {
	.player { flex-wrap: wrap; }
	.player__timeline { order: -1; flex-basis: 100%; }
	.player__extras { margin-inline-start: auto; }
}

@media print {
	.player, .track__fallback { display: none; }
}

/* =========================================================
 *  Choosing between the video and the audio
 * ========================================================= */

.media {
	--p-ink:    var(--ink, var(--black, #1c1c1c));
	--p-soft:   var(--ink-soft, var(--soft, var(--grey-1, #55514a)));
	--p-faint:  var(--ink-faint, var(--faint, var(--grey-1, #6f6a63)));
	--p-rule:   var(--rule, var(--grey-2, #d9d5cc));
	--p-accent: var(--accent, var(--blue, #c2452a));
	--p-sunk:   var(--paper-sunk, var(--sunk, var(--grey-3, #f1f1f1)));

	margin-bottom: 1.5rem;
}

.media__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--p-rule);
}

.media__tab {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .6rem .9rem;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	font: inherit;
	font-size: .88em;
	color: var(--p-soft);
	cursor: pointer;
	margin-bottom: -1px;
}

.media__tab:hover { color: var(--p-accent); }

.media__tab[aria-selected="true"] {
	color: var(--p-accent);
	border-bottom-color: var(--p-accent);
	font-weight: 600;
}

/* Without JavaScript the tabs cannot switch, so they are not offered
   as controls and both panels simply show. */
.media:not([data-ready]) .media__tabs { display: none; }
.media:not([data-ready]) .media__panel[hidden] { display: block; }

.media__panel[hidden] { display: none; }

.media__video {
	display: block;
	width: 100%;
	max-height: 70vh;
	background: #000;
}

.media__meta {
	margin-top: .7rem;
	font-size: .8em;
	color: var(--p-faint);
}

.media__meta .dot { margin-inline: .45em; }
.media__meta a { color: inherit; }
.media__meta a:hover { color: var(--p-accent); }

/* ---------- the recordings index ---------- */

.recordings {
	--r-ink:    var(--ink, var(--black, #1c1c1c));
	--r-faint:  var(--ink-faint, var(--faint, var(--grey-1, #6f6a63)));
	--r-rule:   var(--rule, var(--grey-2, #d9d5cc));
	--r-accent: var(--accent, var(--blue, #c2452a));
	--r-paper:  var(--card, var(--raised, transparent));

	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: .5rem;
}

.recordings a {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .9rem 1.1rem;
	background: var(--r-paper);
	border: 1px solid var(--r-rule);
	text-decoration: none;
	color: var(--r-ink);
	transition: border-color .2s;
}

.recordings a:hover { border-color: var(--r-accent); color: var(--r-accent); }

.recordings__name { font-weight: 600; }

.recordings__tags {
	margin-inline-start: auto;
	display: flex;
	gap: .35rem;
	flex-shrink: 0;
}

.tag {
	font-size: .68em;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .2em .5em;
	border: 1px solid var(--r-rule);
	color: var(--r-faint);
	white-space: nowrap;
}

.tag--video { border-color: var(--r-accent); color: var(--r-accent); }

/* =========================================================
 *  Provenance notice
 *
 *  Says how the recordings were processed. It has to read as a
 *  caution rather than as body copy, in every style, so it takes
 *  the same token fallbacks as the player and then a few styles
 *  refine it where they have a convention of their own.
 * ========================================================= */

.notice {
	--n-ink:    var(--ink, var(--black, #1c1c1c));
	--n-soft:   var(--ink-soft, var(--soft, var(--grey-1, #55514a)));
	--n-rule:   var(--rule, var(--grey-2, #d9d5cc));
	--n-accent: var(--accent, var(--blue, #c2452a));
	--n-sunk:   var(--paper-sunk, var(--sunk, var(--grey-3, #f4f2ee)));

	display: flex;
	gap: .8rem;
	align-items: flex-start;
	margin: 0 0 1.6rem;
	padding: .9rem 1.1rem;
	background: var(--n-sunk);
	border: 1px solid var(--n-rule);
	border-left: 4px solid var(--n-accent);
}

.notice__icon {
	flex-shrink: 0;
	width: 1.35em;
	height: 1.35em;
	margin-top: .1em;
	color: var(--n-accent);
}

.notice__text {
	margin: 0;
	font-size: .88em;
	line-height: 1.5;
	color: var(--n-soft);
}

/* British: the Design System sets a warning as heavy black text
   beside a solid black exclamation, with no panel behind it. */
:root[data-style="govuk"] .notice {
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: 1.8rem;
	gap: .9rem;
	align-items: center;
}

:root[data-style="govuk"] .notice__icon {
	width: 35px;
	height: 35px;
	margin: 0;
	border-radius: 50%;
	background: var(--black, #0b0c0c);
	color: #fff;
	padding: 5px;
}

:root[data-style="govuk"] .notice__text {
	font-size: 1em;
	font-weight: 700;
	color: var(--black, #0b0c0c);
}

/* Large Print: bigger target, heavier rule, full contrast text */
:root[data-style="largeprint"] .notice {
	border: 3px solid var(--ink, #000);
	border-left-width: 10px;
	padding: 1.1rem 1.3rem;
}

:root[data-style="largeprint"] .notice__text {
	font-size: .95em;
	color: var(--ink, #000);
}

/* Swiss and Typescript keep square, flat panels */
:root[data-style="swiss"] .notice,
:root[data-style="typescript"] .notice { background: none; }

/* Chapel centres its page furniture */
:root[data-style="chapel"] .notice {
	margin-inline: auto;
	text-align: left;
}