/**
 * "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;
	align-items: stretch;
	gap: 0.35rem;
	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;
	justify-content: center;
	gap: 0.4rem;
	height: 100%;
	padding: 0 0.75rem;
	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;
	white-space: nowrap;
	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-article-toolbar .sam-listen-dock { min-height: 0; }
.sam-listen-dock:not(:empty) { min-height: 0.25rem; }

/* Secondary controls — clear row under playback, not floating right. */
.sam-listen-extras {
	margin-top: 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--rule, #e3e3e8);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
}
.sam-listen-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

.sam-listen-skip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	flex: 0 0 auto;
	min-width: 2.5rem;
	height: 100%;
	padding: 0 0.35rem;
	border: 1px solid #c4bea9;
	border-radius: 2px;
	background: transparent;
	color: var(--wp--preset--color--navy, #04024d);
	cursor: pointer;
	font: 700 0.5625rem/1 var(--wp--preset--font-family--overpass, "Overpass", sans-serif);
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: border-color 120ms ease, color 120ms ease;
}
.sam-listen-skip:hover { border-color: var(--wp--preset--color--orange, #f37021); color: var(--wp--preset--color--orange, #f37021); }
.sam-listen-skip svg { display: block; }
.sam-listen-skip__secs { font-variant-numeric: tabular-nums; }

.sam-listen-follow,
.sam-listen-follow--locked,
.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-follow--locked: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);
}
a.sam-listen-follow--locked {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

/* 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; }
}

@media (max-width: 781px) {
	.sam-listen-controls { justify-content: space-between; }
	.sam-listen-follow,
	.sam-listen-follow--locked,
	.sam-listen-speed { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* On dark surfaces (e.g. feature hero), invert the chrome. */
.is-style-on-dark .sam-listen-toggle,
.sam-access-dark .sam-listen-toggle,
.is-style-on-dark .sam-listen-skip,
.sam-access-dark .sam-listen-skip {
	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,
.is-style-on-dark .sam-listen-skip:hover,
.sam-access-dark .sam-listen-skip:hover {
	border-color: var(--wp--preset--color--cyan, #00aeef);
	color: var(--wp--preset--color--cyan, #00aeef);
}