/* HTML5 Player — the design file. Neutral gray by default. Color system:
   --h5player-accent     active controls + current-track marker (setting/block)
   --h5player-highlight  row highlight + tint surfaces (defaults to accent)
   --h5player-header-bg  header row background (defaults to transparent)
   All selectors are prefixed with .html5-player so theme list/button styles
   can never out-rank them; every interactive element declares all states. */

.html5-player {
	--h5player-accent: #4a4a4a;
	--h5player-highlight: var(--h5player-accent);
	--h5player-header-bg: transparent;
	--h5player-text: #3a3a3a;
	--h5player-muted: #6b6b6b;   /* 5.3:1 on white — #8a8a8a (3.45:1) failed WCAG AA for track numbers */
	--h5player-line: #e6e6e6;
	/* The edge of a control (the filter and sort dropdowns): it identifies the control, so it
	   needs 3:1 on the player's background (WCAG 1.4.11). The muted colour is 5.3:1 here and
	   6.13:1 with a site's own meta grey; the hairline (1.25:1) is for decoration only. */
	--h5player-edge: var(--h5player-muted);
	--h5player-bg: var(--wp--preset--color--white);
	--h5player-tint: color-mix(in srgb, var(--h5player-highlight) 7%, var(--wp--preset--color--white));
	--h5player-tint-strong: color-mix(in srgb, var(--h5player-highlight) 13%, var(--wp--preset--color--white));

	/* border-box or the 1.1em padding + 1px border push the player OUTSIDE the
	   page column: measured 2026-07-24 at 737px inside a 700px column, the only
	   element on the page that broke the one-width rule. */
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--40) 0;
	padding: var(--wp--preset--spacing--30) 1.1em;
	border: 1px solid var(--h5player-line);
	border-radius: 10px;
	background: var(--h5player-bg);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ---- header row: art | audio | controls ---- */
.html5-player .html5-player-bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0.45em;
	border-radius: 8px;
	background: var(--h5player-header-bg);
}
.html5-player .html5-player-art {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	margin: 0;
	border-radius: 8px;
	object-fit: contain;
	padding: 5px;
	background: #808080; /* perfect gray: white- or black-on-transparent art stays visible */
	border: 1px solid var(--h5player-line);
}
.html5-player audio {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 40px;
	color-scheme: light; /* keeps Chromium controls light; control internals are the browser's own */
}

/* ---- toggle icons (right of the audio control) ---- */
.html5-player .html5-player-toggles {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25em;
	margin: 0;
}
.html5-player .html5-player-toggles button,
.html5-player .html5-player-toggles button:hover,
.html5-player .html5-player-toggles button:focus,
.html5-player .html5-player-toggles button:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--h5player-muted);
	box-shadow: none;
	cursor: pointer;
}
.html5-player .html5-player-toggles button:hover {
	background: var(--h5player-tint);
	color: var(--h5player-accent);
}
.html5-player .html5-player-toggles button:focus-visible {
	outline: 2px solid var(--h5player-accent);
	outline-offset: 2px;
}
.html5-player .html5-player-toggles button.is-on,
.html5-player .html5-player-toggles button.is-on:hover,
.html5-player .html5-player-toggles button.is-on:focus,
.html5-player .html5-player-toggles button.is-on:active {
	background: var(--h5player-accent);
	color: var(--wp--preset--color--white);
}

/* ---- album layout: large art on top ---- */
.html5-player .html5-player-art-top {
	display: block;
	width: 220px;
	height: 220px;
	margin: 0 auto var(--wp--preset--spacing--30);
	border-radius: 10px;
	object-fit: contain;
	padding: var(--wp--preset--spacing--20);
	background: #808080;
	border: 1px solid var(--h5player-line);
}

/* ---- track list ---- */
.html5-player ol.html5-player-list {
	/* The player sets its own box model: core's List block stylesheet, loaded only on
	   pages that hold a List block, makes every ol border-box, which cut the list's
	   max-height by its 1px top border on those pages alone (2026-09-25). */
	box-sizing: content-box;
	list-style: none;
	margin: 0;
	padding: 0; /* beats theme content-list padding via the prefixed selector */
	border-top: 1px solid var(--h5player-line);
	max-height: 21em;
	overflow-y: auto;
}
.html5-player ol.html5-player-list > li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	text-indent: 0;
	border-bottom: 1px solid var(--h5player-line);
	border-left: 3px solid transparent;
	background: transparent;
}
.html5-player .html5-player-track,
.html5-player .html5-player-track:hover,
.html5-player .html5-player-track:focus,
.html5-player .html5-player-track:active {
	flex: 1;
	display: block;
	min-width: 0;
	margin: 0;
	text-align: left;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	padding: 0.42em 0.5em;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--h5player-text);
	box-shadow: none;
	cursor: pointer;
}
.html5-player ol.html5-player-list > li:hover {
	background: var(--h5player-tint);
}
.html5-player .html5-player-track:focus-visible {
	outline: 2px solid var(--h5player-accent);
	outline-offset: -2px;
}
.html5-player .html5-player-track .num {
	display: inline-block;
	min-width: 1.9em;
	color: var(--h5player-muted);
	font-size: 0.86em;
	font-variant-numeric: tabular-nums;
}
.html5-player ol.html5-player-list > li.is-current {
	background: var(--h5player-tint-strong);
	border-left-color: var(--h5player-accent);
}
.html5-player ol.html5-player-list > li.is-current .html5-player-track {
	color: var(--h5player-accent);
	font-weight: 600;
}
.html5-player .html5-player-dl,
.html5-player .html5-player-dl:focus,
.html5-player .html5-player-dl:active {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 0.45em 0 0.3em;
	padding: 0;
	border-radius: 50%;
	color: var(--h5player-muted);
	background: var(--h5player-tint);
	border: 0;
	box-shadow: none;
	text-decoration: none;
}
.html5-player .html5-player-dl svg {
	width: 15px;
	height: 15px;
}
.html5-player .html5-player-dl:hover {
	color: var(--wp--preset--color--white);
	background: var(--h5player-accent);
}
.html5-player .html5-player-dl:focus-visible {
	outline: 2px solid var(--h5player-accent);
	outline-offset: 2px;
}

/* ---- list tools: the count, and the filter + sort dropdowns ----------------
   Opt-in from code (html5player_render). The row sits between the audio bar
   and the list it controls: the count on the left, the dropdowns on the right,
   each a small bold label beside a plain select (the same shape as the site's
   sermon-finder Sort control). Colours come only from the player's variables.
   Contrast on white with the site's values (measured 2026-09-24): label +
   count (--h5player-muted #5b6270) 6.13:1; select text (--h5player-text
   #1d2a46) 14.27:1; the hover edge and focus ring (--h5player-accent #1d2a46)
   14.27:1; the resting edge (--h5player-edge, the muted grey) 6.13:1, a control's
   edge at WCAG 1.4.11's 3:1 (hub #53: the hairline #e6e6e6 it used was 1.25:1). The dropdowns
   render hidden and player.js shows them, so without JavaScript only the count
   shows.
   ------------------------------------------------------------------------- */
.html5-player .html5-player-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
}
.html5-player .html5-player-count {
	margin: 0;
	font-size: var(--wp--preset--font-size--card-count);
	line-height: 1.6;
	color: var(--h5player-muted);
}
/* The chosen option's own page, under the list: appearing there moves nothing
   above it. The link wears the site's own link style. */
.html5-player .html5-player-more {
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--card-count);
	line-height: 1.6;
}
.html5-player .html5-player-controls:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}
.html5-player .html5-player-field {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}
.html5-player .html5-player-field__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--h5player-muted);
}
.html5-player .html5-player-select {
	min-width: 0;
	margin: 0;
	padding: 0.4rem var(--wp--preset--spacing--20);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--h5player-text);
	background-color: var(--h5player-bg);
	border: 1px solid var(--h5player-edge);
	border-radius: 0.4rem;
	box-shadow: none;
	cursor: pointer;
}
/* Hover strengthens the edge to the accent at full strength (never a fade). */
.html5-player .html5-player-select:hover {
	border-color: var(--h5player-accent);
}
.html5-player .html5-player-select:focus-visible {
	outline: 2px solid var(--h5player-accent);
	outline-offset: 1px;
}
/* A filtered-out row (the list's own display:flex would outrank [hidden]). */
.html5-player ol.html5-player-list > li[hidden] {
	display: none;
}
/* Read by screen readers only: what a filter or sort change did. */
.html5-player .html5-player-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Phones: art + toggles left the <audio> element ~67px — Chrome collapses it to
   a bare play glyph with no scrubber. Wrap the bar so the audio control gets a
   full row of its own (2026-07-21). The list tools stack: the count on its own
   line, then each label beside a select that fills the row, the two selects
   sharing one left edge. */
@media (max-width: 600px) {
	.html5-player .html5-player-bar { flex-wrap: wrap; }
	.html5-player .html5-player-bar audio { flex: 1 1 100%; order: 2; }
	.html5-player .html5-player-controls:not([hidden]) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20) 0.45rem;
		width: 100%;
	}
	.html5-player .html5-player-field { display: contents; }
}

/* ---- track titles: ONE line, bounced into view ----------------------------
   Titles used to WRAP (measured 2026-07-24: 2 lines at 1512px, 4 at 375px),
   which made rows ragged and roughly halved how many tracks fit the fixed
   21em list. Now each title runs a single line and the overflow is revealed by
   a slow bounce - but ONLY on the track you are playing, hovering, or focusing.
   Animating every long row at once is noise that hurts scanning; Winamp moved
   only the now-playing title, which is the behaviour worth copying. The button
   also carries a title attribute, so the full name is one hover away instantly.
   Distance and duration are set per title by player.js.
   ------------------------------------------------------------------------- */
.html5-player .html5-player-track,
.html5-player .html5-player-track:hover,
.html5-player .html5-player-track:focus,
.html5-player .html5-player-track:active {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
}
.html5-player .html5-player-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}
.html5-player .html5-player-title__inner {
	display: inline-block;
	white-space: nowrap;
}
.html5-player ol.html5-player-list > li.is-current .html5-player-title.is-overflowing .html5-player-title__inner,
.html5-player ol.html5-player-list > li:hover .html5-player-title.is-overflowing .html5-player-title__inner,
.html5-player ol.html5-player-list > li:focus-within .html5-player-title.is-overflowing .html5-player-title__inner {
	animation: html5-player-bounce var(--h5player-bounce-dur, 8s) ease-in-out infinite alternate;
}
@keyframes html5-player-bounce {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--h5player-bounce-dx, 0)); }
}
@media (prefers-reduced-motion: reduce) {
	.html5-player .html5-player-title__inner { animation: none !important; }
}