/**
 * "Listen to Article" — compact player. Footprint ≈ the Save button: a small
 * bordered pill (play/pause + label), with quiet secondary controls. Colors
 * from theme.json tokens.
 */
.sam-listen {
	display: inline-flex;
	font-family: var(--wp--preset--font-family--overpass, "Overpass", sans-serif);
}

/* Pill — matched to the Save button (padding/radius/line-height/border). */
.sam-listen-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 8px 12px;
	border: 1px solid #c4bea9;
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--navy, #04024d);
	cursor: pointer;
	font: 700 0.6875rem/1 var(--wp--preset--font-family--overpass, "Overpass", sans-serif);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: border-color 120ms ease, color 120ms ease;
}
.sam-listen-toggle:hover { border-color: var(--wp--preset--color--orange, #f37021); color: var(--wp--preset--color--orange, #f37021); }

.sam-listen-icon { display: inline-flex; line-height: 0; color: var(--wp--preset--color--orange, #f37021); }
.sam-listen-label { font-variant-numeric: tabular-nums; }

/* The dock reserves the controls-row height so revealing the Transcript/speed
   row on play doesn't shift the article down (no layout shift). The collapsed
   state keeps this small, consistent slot below the byline buttons. */
.sam-listen-dock { min-height: 2rem; }

/* Secondary controls — docked below the byline row, tight under the buttons. */
.sam-listen-extras {
	margin-top: 0.3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6rem;
}
.sam-listen-controls { display: flex; gap: 0.5rem; }

.sam-listen-follow,
.sam-listen-speed {
	padding: 6px 10px;
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 18%, transparent);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	font: 700 0.625rem/1 var(--wp--preset--font-family--overpass, "Overpass", sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 62%, transparent);
	font-variant-numeric: tabular-nums;
	transition: border-color 120ms ease, color 120ms ease;
}
.sam-listen-follow:hover,
.sam-listen-speed:hover,
.sam-listen-follow[aria-pressed="true"] {
	border-color: var(--wp--preset--color--orange, #f37021);
	color: var(--wp--preset--color--orange, #f37021);
}

/* Follow-along transcript (full width, below the controls) */
.sam-listen-transcript {
	flex-basis: 100%;
	margin-top: 0.25rem;
	max-height: 19rem;
	overflow-y: auto;
	padding: 0.5rem;
	border: 1px solid color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 14%, transparent);
	border-radius: 4px;
	background: color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 2%, #fff);
	scroll-behavior: smooth;
}

.sam-ts-line {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0.3rem 0.6rem;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--spectral, "Spectral", Georgia, serif);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 50%, #6a6a76);
	transition: color 140ms ease, background-color 140ms ease;
}
.sam-ts-line:hover { color: var(--wp--preset--color--navy, #04024d); background: color-mix(in oklab, var(--wp--preset--color--navy, #04024d) 5%, transparent); }
.sam-ts-line.is-current {
	color: var(--wp--preset--color--navy, #04024d);
	background: color-mix(in oklab, var(--wp--preset--color--yellow, #fff200) 36%, transparent);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.sam-listen-transcript { scroll-behavior: auto; }
}

/* On dark surfaces (e.g. feature hero), invert the chrome. */
.is-style-on-dark .sam-listen-toggle,
.sam-access-dark .sam-listen-toggle {
	border-color: color-mix(in oklab, #fff 30%, transparent);
	color: #fff;
}
.is-style-on-dark .sam-listen-toggle:hover,
.sam-access-dark .sam-listen-toggle:hover {
	border-color: var(--wp--preset--color--cyan, #00aeef);
	color: var(--wp--preset--color--cyan, #00aeef);
}