/* ===========================================================================
   lg.player — the audio player with its speaker cards
   ---------------------------------------------------------------------------
   After the drawings (mockups/reading-detail-player*.jpg): a warm panel with
   the player as one white bar in it, and under that the speakers as white
   cards. The chosen speaker in colour with a red border, the others in grey.

   Shared by the reading text (inside the text card, two cards to a row) and
   the listening exercise (the page's main block, see lg.listening-text.css).
   Each page says where the panel goes and how many cards fit; this file is
   how it looks. Opt in with class="player-box lg-player" on the wrapper.

   Most of what is overridden here comes from css/player.css (the player,
   also used by dictation) and a.css (the speaker cards). player.css is
   linked in the body, AFTER this file, so every rule here needs at least two
   classes to beat its single-class ones. The icons are Lucide, drawn by
   js/player2023.js in currentColor.

   Inline styles from the PHP set the panel's background, radius and padding,
   and the cards' margins - hence the !important on exactly those.
   =========================================================================== */

.player-box.lg-player {
	padding: 0.75rem !important;
	border-radius: var(--lg-radius-card) !important;
	background-color: var(--lg-surface-alt) !important;
}

.lg-player .wrapper-lingua-player {
	display: block;
	margin-right: 0 !important;
}

/* The bar. */
.lg-player .green-audio-player {
	min-width: 0;
	height: auto;
	min-height: 4.75rem;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-radius: calc(var(--lg-radius-card) - 0.25rem);
	background-color: var(--lg-surface);
	box-shadow: none;
}

.lg-player .green-audio-player .holder {
	left: 0;
}

.lg-player .green-audio-player .play-pause-btn {
	color: var(--lg-text);
}

.lg-player .green-audio-player .play-pause-btn svg {
	width: 1.4rem;
	height: 1.4rem;
}

.lg-player .green-audio-player .rewind__10s {
	color: var(--lg-text-muted);
}

.lg-player .green-audio-player .rewind__10s svg {
	width: 1.3rem;
	height: 1.3rem;
}

/* Volume: Lucide Volume2/1/X with the speaker body filled, as the Play icon
   is filled - the waves stay lines. Beside the speed. Not on the drawings, kept on
   purpose. iOS ignores a page's volume, and the player hides the button there
   itself. The slider pops up in a white card rather than player.css's
   translucent black. */
.lg-player .green-audio-player .volume__button {
	color: var(--lg-text-muted);
}

.lg-player .green-audio-player .volume__button svg {
	width: 1.35rem;
	height: 1.35rem;
}

.lg-player .green-audio-player .volume .volume__button.open {
	color: var(--lg-red);
}

.lg-player .green-audio-player .volume .volume__controls {
	border-radius: 999px;
	background-color: var(--lg-surface);
	box-shadow: 0 6px 20px rgba(var(--lg-shadow-rgb, 120, 98, 72), 0.18);
}

.lg-player .green-audio-player .volume .volume__controls .volume__slider {
	background-color: var(--lg-border);
}

/* Time, track, time. */
.lg-player .green-audio-player .controls {
	margin: 0;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1.05rem;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* A fixed width for the times, so the track does not shift while the
   current time counts up ("0:01" is narrower than "1:11" in a proportional
   face). 4ch holds "9:59": four characters at the width of a zero, the widest
   digit, with the narrower colon as slack. tabular-nums above makes the
   digits equal where the font supports it; the width covers it where not.

   The current time is aligned to the track, so the gap between them never
   changes either. */
.lg-player .green-audio-player .controls__current-time,
.lg-player .green-audio-player .controls__total-time {
	display: inline-block;
	min-width: 4ch;
	white-space: nowrap;
	position:relative;
	left:-0.3rem;
	margin-right:-0.3rem;
}

.lg-player .green-audio-player .controls__current-time {
	text-align: right;
}

.lg-player .green-audio-player .controls__total-time {
	text-align: left;
}

.lg-player .green-audio-player .controls .controls__slider {
	height: 6px;
	margin: 0 1rem;
	border-radius: 3px;
	background-color: var(--lg-border);
}

.lg-player .green-audio-player .slider .gap-progress {
	background-color: var(--lg-red);
}

.lg-player .green-audio-player .slider .gap-progress .pin {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background-color: var(--lg-red);
	box-shadow: none;
}

.lg-player .green-audio-player .controls .controls__slider .controls__progress .progress__pin {
	top: calc(3px - 0.625rem);
	right: -0.625rem;
}

/* Speed: the gauge over "100%", minus and plus in round buttons either side,
   level with the figure. */
.lg-player .green-audio-player .change-speed {
	display: flex;
	align-items: flex-end;
	gap: 0.05rem;
	margin: 0;
	color: var(--lg-text-muted);
}

.lg-player .green-audio-player .change-speed__display {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	min-width: 2.50rem;
	color: var(--lg-text);
	font-family: var(--lg-font);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
}

.lg-player .green-audio-player .change-speed__display svg {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0 0 0.35rem;
	color: var(--lg-text-muted);
}

.lg-player .green-audio-player .change-speed__decrease,
.lg-player .green-audio-player .change-speed__increase {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--lg-surface-alt);
	color: var(--lg-text-muted);
	line-height: 1;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lg-player .green-audio-player .change-speed__decrease:hover,
.lg-player .green-audio-player .change-speed__increase:hover {
	background-color: var(--lg-border);
	color: var(--lg-text);
}

.lg-player .green-audio-player .change-speed__decrease svg,
.lg-player .green-audio-player .change-speed__increase svg {
	width: 0.8rem;
	height: 0.8rem;
	margin: 0;
}

/* The speakers: two white cards to a row under the bar. */
.lg-player .wrapper-lingua-speakers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.lg-player .wrapper-lingua-speakers .speaker-box {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	width: auto;
	height: auto;
	min-height: 4.5rem;
	margin: 0 !important;
	padding: 0.5rem 0.6rem;
	border: 1px solid transparent;
	border-radius: calc(var(--lg-radius-card) - 0.25rem);
	background-color: var(--lg-surface);
	box-shadow: none;
	box-sizing: border-box;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

/* The chosen one. .inactive-speaker is on every card but the one playing -
   see linguaSelectSpeaker() in js/main2025.js. */
.lg-player .wrapper-lingua-speakers .speaker-box:not(.inactive-speaker) {
	border-color: var(--lg-red);
}

.lg-player .wrapper-lingua-speakers .speaker-box:hover {
	opacity: 1;
}

.lg-player .wrapper-lingua-speakers .speaker-box img {
	position: static;
	flex: 0 0 auto;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	object-fit: cover;
}

/* Name and country. The name is a bare text node in this box, so the weight
   is set on the box and taken back off the country line. */
.lg-player .wrapper-lingua-speakers .speaker-box .speaker-box-info {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--lg-text-muted);
	font-family: var(--lg-font);
	font-size: 1.1rem;
	line-height: 1.3;
}

.lg-player .wrapper-lingua-speakers .speaker-box:not(.inactive-speaker) .speaker-box-info {
	color: var(--lg-text);
	font-weight: 600;
}

/* show_speaker() sets these inline: a 0.8rem line, clipped to 1.2rem and
   nudged up. */
.lg-player .wrapper-lingua-speakers .speaker-box .speaker-box-info-language {
	height: auto !important;
	top: 0 !important;
	color: var(--lg-text-muted);
	font-size: 1rem !important;
	font-weight: 400;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Play and download: Lucide Play (filled) and Download, as masks so they
   take the text colour in dark mode too. a.css draws them as background
   images, positioned absolutely; here they sit in the row, centred. */
.lg-player .wrapper-lingua-speakers .speaker-box .button-play,
.lg-player .wrapper-lingua-speakers .speaker-box .button-download {
	position: static;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	background-image: none;
	background-color: var(--lg-text-muted);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 1.3rem 1.3rem;
	        mask-size: 1.3rem 1.3rem;
	opacity: 1;
}

.lg-player .wrapper-lingua-speakers .speaker-box .button-play {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");
}

.lg-player .wrapper-lingua-speakers .speaker-box .button-download {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

.lg-player .wrapper-lingua-speakers .speaker-box .button-play:hover,
.lg-player .wrapper-lingua-speakers .speaker-box .button-download:hover {
	background-color: var(--lg-text);
}

/* One card to a row once two would squeeze the names. A card needs about
   16rem - avatar, a name like "Alejandro", play and download, padding - so two
   need the panel to be about 33rem wide, which is a screen of about 600px. */
@media (max-width: 600px) {

	.lg-player .wrapper-lingua-speakers {
		grid-template-columns: minmax(0, 1fr);
	}

	.lg-player .wrapper-lingua-speakers .speaker-box {
		padding: 0.3rem 0.6rem;
		min-height:4rem;
	}
}