/*!
 * CIE Audio Playlist — styles
 *
 * Hand-editable stylesheet for the audio player (sticky bar, resume pill,
 * topic "listen" card, /audio/ playlist page, CIE+ upsell banner, and the
 * single-post listen widget).
 *
 * Enqueued from functions.php on the cie-audio-playlist handle, behind the
 * same admin-only gate as audio-playlist.min.js during the pilot. Pairs with
 * js/audio-playlist.js — class names here match the markup that file builds.
 */

#cie-audio-app {
	max-width: 880px;
	margin: 2rem auto 0;
	padding: 0 1rem 8rem;
	font-family: inherit;
}
#cie-audio-app .cie-empty {
	padding: 3rem 1rem;
	text-align: center;
	color: #888;
}
#cie-audio-app .cie-loading {
	padding: 3rem 1rem;
	text-align: center;
	color: #888;
}

/* Playlist section (one per tag/topic) */
#cie-audio-app .cie-playlist {
	margin: 0;
	border-top: 1px solid #f4f0e5;
}
#cie-audio-app .cie-playlist:last-child {
	border-bottom: 1px solid #f4f0e5;
}
#cie-audio-app .cie-playlist__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	margin: 0;
	padding: 1.125rem 0.25rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	transition: color 0.15s;
}
#cie-audio-app .cie-playlist__header:hover {
	color: #0f8c73;
}
#cie-audio-app .cie-playlist__header:hover .cie-playlist__title {
	color: #0f8c73;
}
#cie-audio-app .cie-playlist__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #7d7d7d;
	transition: transform 0.2s, color 0.15s;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
#cie-audio-app .cie-playlist__chev svg {
	display: block;
}
#cie-audio-app .cie-playlist__header:hover .cie-playlist__chev {
	color: #0f8c73;
}
#cie-audio-app .cie-playlist.is-open .cie-playlist__chev {
	transform: rotate(180deg);
}
#cie-audio-app .cie-playlist__title {
	font: 700 1.25rem/1.2 "Avenir Next", sans-serif;
	margin: 0;
	color: #042774;
	letter-spacing: 0.01em;
	transition: color 0.15s;
}
#cie-audio-app .cie-playlist__count {
	font: 0.8rem/1 "Avenir Next", sans-serif;
	color: #7d7d7d;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
#cie-audio-app .cie-playlist__tracks {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
	padding: 0 0.25rem;
}
#cie-audio-app .cie-playlist.is-open .cie-playlist__tracks {
	max-height: 6000px;
	opacity: 1;
	padding: 0 0.25rem 0.5rem;
}
#cie-audio-app .cie-track {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid #eee;
	align-items: flex-start;
	position: relative;
	transition: background 0.15s;
}
#cie-audio-app .cie-track.is-active {
	background: #f3f6fa;
	margin: 0 -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-radius: 6px;
	border-bottom-color: transparent;
}
#cie-audio-app .cie-track.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 3px;
	background: #0c6c59;
	border-radius: 0 2px 2px 0;
}
#cie-audio-app .cie-track__thumb {
	width: 88px;
	height: 88px;
	flex-shrink: 0;
	background: #eee;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
}
#cie-audio-app .cie-track__body {
	flex: 1;
	min-width: 0;
}
#cie-audio-app .cie-track__title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}
#cie-audio-app .cie-track__title a {
	color: inherit;
	text-decoration: none;
}
#cie-audio-app .cie-track__title a:hover {
	color: #0c6c59;
	text-decoration: underline;
}
#cie-audio-app .cie-track__summary {
	color: #555;
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	line-height: 1.4;
}
#cie-audio-app .cie-track__meta {
	display: flex;
	gap: 1rem;
	align-items: center;
	font-size: 0.85rem;
	color: #888;
}
#cie-audio-app .cie-track__readmore {
	color: #0c6c59;
	text-decoration: none;
}
#cie-audio-app .cie-track__readmore:hover {
	text-decoration: underline;
}
#cie-audio-app .cie-track__play {
	background: #0c6c59;
	color: #fff;
	border: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
}
#cie-audio-app .cie-track__play:hover {
	background: #0f8c73;
}
#cie-audio-app .cie-track__play[disabled] {
	background: #ccc;
	cursor: not-allowed;
}
#cie-audio-app .cie-track__title .cie-plus-badge {
	margin-left: 0.4em;
	vertical-align: 0.05em;
}

/* Per-track type chip (Intro / Analysis / Speech / Document / Text /
   Source). Rendered next to the track title in queue rows, /audio/
   rows, the bar title, the bar queue, and the up-next strip. Colors
   draw from the site palette (navy / teal / maroon plus warm tints).
   The on-dark variant lights up against the navy bar. */
.cie-chip {
	display: inline-block;
	padding: 3px 9px 2px;
	border-radius: 999px;
	font: 700 10px/1.1 "Avenir Next", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}
/* Six distinct hues spread across the wheel — blue, green, purple, orange,
   pink, charcoal — anchored to the brand where it lines up (navy, teal,
   orange from the CIE+ CTA, maroon shifted toward rose), with a plum
   accent for SPEECH and a cool slate for SOURCE so the two former
   "navy" / "maroon" pairs no longer collide. Backgrounds are more
   saturated than the prior tints so the chips read at a glance. */
.cie-chip--intro    { color: #042774; background: #d4dcf0; } /* brand navy */
.cie-chip--analysis { color: #0c6c59; background: #c6e1d8; } /* brand teal */
.cie-chip--speech   { color: #5b2a7d; background: #e6daf0; } /* plum accent */
.cie-chip--document { color: #9c4708; background: #f8d4ad; } /* warm orange (CIE+ CTA family) */
.cie-chip--text     { color: #962450; background: #f3c9d8; } /* rose (shifted from brand maroon) */
.cie-chip--source   { color: #3d4659; background: #d2d7e0; } /* cool charcoal */
.cie-chip--interview    { color: #0c6c59; background: #c6e1d8; } /* shares ANALYSIS teal — distinct class so it can diverge later */
.cie-chip--presentation { color: #5b2a7d; background: #e6daf0; } /* shares SPEECH plum — distinct class so it can diverge later */
/* On-dark variant for the bar (navy background). Light translucent
   fill keeps the chip readable against the slab without pulling in
   six different per-type backgrounds. */
.cie-chip--on-dark {
	color: #fff;
	background: rgba(255,255,255,0.16);
}

/* Equalizer indicator for the actively-playing row */
#cie-audio-app .cie-eq {
	display: none;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
	width: 16px;
	margin-right: 0.5em;
	vertical-align: -2px;
}
#cie-audio-app .cie-track.is-playing .cie-eq {
	display: inline-flex;
}
#cie-audio-app .cie-eq span {
	display: block;
	width: 3px;
	background: #0c6c59;
	border-radius: 1px;
	height: 6px;
	animation: cieEq 0.9s ease-in-out infinite;
}
#cie-audio-app .cie-eq span:nth-child(1) {
	animation-delay: -0.4s;
}
#cie-audio-app .cie-eq span:nth-child(2) {
	animation-delay: -0.15s;
}
@keyframes cieEq {
	0%, 100% {
		height: 3px;
	}
	50% {
		height: 14px;
	}
}
@media (prefers-reduced-motion: reduce) {
	#cie-audio-app .cie-eq span {
		animation: none;
		height: 9px;
	}
}

/* Sticky bar — navy slab with teal accents, white text.
   border-box on everything inside the bar so the inner's width: 100% +
   padding doesn't push the bar past the viewport on mobile (the theme
   doesn't apply a global box-sizing reset). */
.cie-audio-bar,
.cie-audio-bar *,
.cie-audio-bar *::before,
.cie-audio-bar *::after {
	box-sizing: border-box;
}
.cie-audio-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #042774;
	color: #fff;
	box-shadow: 0 -8px 28px rgba(4,39,116,0.22);
	z-index: 9998;
	transform: translateY(100%);
	transition: transform 0.25s;
	font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
	max-width: 100vw;
	overflow: hidden;
}
.cie-audio-bar.is-visible {
	transform: translateY(0);
}

/* Non-member preview tease — cream strip riding the top of the fixed bar,
   directly above the controls so it's visible no matter where the page is
   scrolled. Hidden until a CIE+ track is cut off at the 60s preview cap. */
.cie-audio-bar__preview {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 1.5rem;
	background: #f6e7d7;
	color: #9c4708;
}
.cie-audio-bar__preview[hidden] {
	display: none;
}
.cie-audio-bar__preview-lock {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1.5px solid #d36c10;
	color: #d36c10;
}
.cie-audio-bar__preview-text {
	flex: 1;
	min-width: 0;
	color: #9c4708;
	font: 700 0.95rem/1.35 "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
}
.cie-audio-bar__preview-join {
	flex-shrink: 0;
	background: #d36c10;
	color: #fff;
	font: 700 12px/1 "Avenir Next", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 11px 20px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.15s;
}
.cie-audio-bar__preview-join:hover {
	background: #b75a08;
	color: #fff;
}
.cie-audio-bar__preview-signin {
	flex-shrink: 0;
	color: #042774;
	font: 700 0.9rem/1 "Avenir Next", sans-serif;
	text-decoration: none;
}
.cie-audio-bar__preview-signin:hover {
	text-decoration: underline;
}
@media (max-width: 640px) {
	.cie-audio-bar__preview {
		flex-wrap: wrap;
		gap: 0.5rem 0.75rem;
		padding: 0.7rem 1rem;
	}
	.cie-audio-bar__preview-text {
		flex-basis: 100%;
	}
	/* Stacked layout: the Join button spans the row, Sign in tucks beside it. */
	.cie-audio-bar__preview-join {
		flex: 1;
		text-align: center;
	}
}

.cie-audio-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.875rem 1.5rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	width: 100%;
}
.cie-audio-bar__btn {
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.85);
	cursor: pointer;
	padding: 0.5rem;
	font-size: 0.9rem;
	line-height: 1;
	border-radius: 50%;
	flex-shrink: 0;
	min-width: 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cie-audio-bar__btn:hover {
	background: rgba(255,255,255,0.10);
	color: #fff;
}
/* Disabled state for prev/next at the playlist boundaries (and any other
   bar button that gets disabled). Stays in the row but reads as inert. */
.cie-audio-bar__btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.cie-audio-bar__btn:disabled:hover {
	background: transparent;
	color: rgba(255,255,255,0.85);
}
.cie-audio-bar__btn--play {
	background: #0c6c59;
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	padding: 0;
}
.cie-audio-bar__btn--play:hover {
	background: #0f8c73;
}
/* Locked preview: play control becomes a terracotta lock ring that routes to
   join. Outlined (not a solid fill) to match the tease mockup. */
.cie-audio-bar__btn--play.is-preview-locked,
.cie-audio-bar__btn--play.is-preview-locked:hover {
	background: rgba(255,255,255,0.08);
	border: 2px solid #d36c10;
	color: #fff;
}
.cie-audio-bar__btn--play.is-preview-locked:hover {
	background: rgba(211,108,16,0.22);
}
.cie-audio-bar__btn svg {
	display: block;
}
.cie-audio-bar__title .cie-plus-badge {
	margin-left: 0.4em;
	vertical-align: 0.05em;
}
.cie-audio-bar__info {
	flex: 1;
	min-width: 0;
	padding: 0 0.85rem;
}
.cie-audio-bar__title {
	font-weight: 700;
	font-size: 0.875rem;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0.2rem;
}
.cie-audio-bar__title a {
	color: inherit;
	text-decoration: none;
}
.cie-audio-bar__title a:hover {
	text-decoration: underline;
}
.cie-audio-bar__sub {
	font-size: 0.7rem;
	color: rgba(255,255,255,0.6);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}

/*
 * Scrubber: native input[type=range] styled to match the bar.
 * The track is painted via a JS-updated linear-gradient so the
 * "fill so far" looks the same in Chrome/Safari/Firefox.
 */
.cie-audio-bar__scrubber {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 14px;
	background: transparent;
	cursor: pointer;
	outline: none;
	padding: 0;
	margin: 0;
	display: block;
}
.cie-audio-bar__scrubber::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255,255,255,0.18);
}
.cie-audio-bar__scrubber::-moz-range-track {
	height: 4px;
	border-radius: 999px;
	background: rgba(255,255,255,0.18);
}
.cie-audio-bar__scrubber::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	background: #0c6c59;
	border-radius: 50%;
	border: 0;
	margin-top: -4px;
	cursor: pointer;
	transition: transform 0.15s;
}
.cie-audio-bar__scrubber::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: #0c6c59;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	transition: transform 0.15s;
}
.cie-audio-bar__scrubber:hover::-webkit-slider-thumb, .cie-audio-bar__scrubber:active::-webkit-slider-thumb {
	transform: scale(1.3);
}
.cie-audio-bar__scrubber:hover::-moz-range-thumb, .cie-audio-bar__scrubber:active::-moz-range-thumb {
	transform: scale(1.3);
}
.cie-audio-bar__scrubber:focus-visible {
	outline: 2px solid rgba(255,255,255,0.6);
	outline-offset: 2px;
	border-radius: 999px;
}
/* Locked preview: the played fill is white (painted inline by renderProgress)
   and the thumb becomes a terracotta lock marker sitting at the 1:00 cap. */
.cie-audio-bar.is-preview-locked .cie-audio-bar__scrubber::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	margin-top: -8px;
	background: #d36c10 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23fff'%20stroke-width='1.6'%3E%3Crect%20x='3.5'%20y='7'%20width='9'%20height='6.5'%20rx='1.5'/%3E%3Cpath%20d='M5.2%207V5.2a2.8%202.8%200%200%201%205.6%200V7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.cie-audio-bar.is-preview-locked .cie-audio-bar__scrubber::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: #d36c10 url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23fff'%20stroke-width='1.6'%3E%3Crect%20x='3.5'%20y='7'%20width='9'%20height='6.5'%20rx='1.5'/%3E%3Cpath%20d='M5.2%207V5.2a2.8%202.8%200%200%201%205.6%200V7'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* No grow-on-hover for the lock thumb — there's nothing to scrub past the cap. */
.cie-audio-bar.is-preview-locked .cie-audio-bar__scrubber:hover::-webkit-slider-thumb,
.cie-audio-bar.is-preview-locked .cie-audio-bar__scrubber:active::-webkit-slider-thumb {
	transform: none;
}
.cie-audio-bar.is-preview-locked .cie-audio-bar__scrubber:hover::-moz-range-thumb,
.cie-audio-bar.is-preview-locked .cie-audio-bar__scrubber:active::-moz-range-thumb {
	transform: none;
}
.cie-audio-bar__time {
	font-size: 0.7rem;
	color: rgba(255,255,255,0.65);
	margin-top: 0.25rem;
	font-variant-numeric: tabular-nums;
}
.cie-audio-bar__speed {
	font-size: 0.75rem;
	font-weight: 700;
	min-width: 44px;
	letter-spacing: 0.05em;
}

/*
 * Expandable queue overlay — slides up out of the bar when the
 * expand button is clicked. Lists the current playlist's tracks
 * so listeners can see what\'s queued and jump around.
 */
.cie-audio-bar {
	display: flex;
	flex-direction: column;
}
.cie-audio-bar__queue {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	background: rgba(0,0,0,0.16);
	transition: max-height 0.3s ease, opacity 0.2s ease;
}
.cie-audio-bar.is-expanded .cie-audio-bar__queue {
	max-height: 65vh;
	opacity: 1;
	overflow-y: auto;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cie-audio-bar__queue-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
}
.cie-audio-bar__queue-label {
	font: 700 10px/1 "Avenir Next", sans-serif;
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 0.5rem 0.5rem;
}
.cie-audio-bar__queue-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cie-audio-bar__queue-item {
	display: grid;
	grid-template-columns: 24px 1fr auto;
	gap: 0.85rem;
	align-items: center;
	padding: 0.5rem;
	cursor: pointer;
	color: rgba(255,255,255,0.85);
	font-family: "Avenir Next", sans-serif;
	transition: background 0.15s, color 0.15s;
	border-radius: 6px;
}
.cie-audio-bar__queue-item:hover {
	background: rgba(255,255,255,0.06);
	color: #fff;
}
.cie-audio-bar__queue-item.is-current {
	background: rgba(12,108,89,0.28);
	color: #fff;
}
.cie-audio-bar__queue-item.is-current .cie-audio-bar__queue-num {
	color: rgba(255,255,255,0.9);
}
.cie-audio-bar__queue-num {
	color: rgba(255,255,255,0.8);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}
.cie-audio-bar__queue-title {
	font-size: 0.875rem;
	line-height: 1.3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cie-audio-bar__queue-dur {
	color: rgba(255,255,255,0.6);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.cie-audio-bar__expand .chev {
	display: inline-flex;
	transition: transform 0.2s;
}
.cie-audio-bar.is-expanded .cie-audio-bar__expand .chev {
	transform: rotate(180deg);
}

/*
 * Mobile: allow queue title to wrap (full title visible) since
 * vertical space is the constraint, not horizontal.
 */
@media (max-width: 640px) {
	.cie-audio-bar__queue-inner {
		padding: 0.5rem 0.875rem;
	}
	.cie-audio-bar__queue-item {
		padding: 0.75rem 0.25rem;
	}
	.cie-audio-bar__queue-title {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.cie-audio-bar.is-expanded .cie-audio-bar__queue {
		max-height: 60vh;
	}
}

/* View-article link in the bar (opens current track\'s post in new tab) */
.cie-audio-bar__viewlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: rgba(255,255,255,0.85);
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
	flex-shrink: 0;
	text-decoration: none;
}
.cie-audio-bar__viewlink:hover {
	background: rgba(255,255,255,0.10);
	color: #fff;
}
.cie-audio-bar__viewlink svg {
	display: block;
}
.cie-audio-bar__viewlink[hidden] {
	display: none;
}

/* Up-next preview (below the scrubber inside .cie-audio-bar__info) */
.cie-audio-bar__upnext {
	display: flex;
	visibility: hidden;
	gap: 1.25rem;
	margin-top: 0.35rem;
	font-size: 0.7rem;
	color: rgba(255,255,255,0.65);
	overflow: hidden;
	white-space: nowrap;
}
.cie-audio-bar__upnext.has-items {
	visibility: visible;
}
.cie-audio-bar__upnext-label {
	color: rgba(255,255,255,0.8);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	flex-shrink: 0;
}
.cie-audio-bar__upnext-list {
	display: flex;
	gap: 0.85rem;
	min-width: 0;
	overflow: hidden;
}
/* Up-next item is a <button> so clicking the title advances the queue.
   Reset native button styling so it reads as inline text with a hover
   underline affordance, not a chrome button. */
.cie-audio-bar__upnext-item {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}
.cie-audio-bar__upnext-item:hover {
	color: #fff;
	text-decoration: underline;
}
.cie-audio-bar__upnext-item + .cie-audio-bar__upnext-item::before {
	content: "·";
	margin-right: 0.85rem;
	color: rgba(255,255,255,0.3);
}

/*
 * Mobile bar. Always-full layout (no collapsed mini state): title row on
 * top (wraps to multi-line if long), then a controls row with prev / -15s /
 * play / +15s / next + a tighter cluster for speed / view-article / queue
 * toggle / close. Scrubber and up-next strip always visible. The .is-expanded
 * state only toggles the queue overlay below.
 */
@media (max-width: 640px) {
	.cie-audio-bar__inner {
		flex-wrap: wrap;
		padding: 0.625rem 0.875rem;
		gap: 0.35rem 0.25rem;
		align-items: center;
	}
	.cie-audio-bar__info {
		order: -1;
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
		padding: 0;
	}
	.cie-audio-bar__title {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		line-height: 1.3;
		margin-bottom: 0.2rem;
	}
	/* Tighter controls so all 9 buttons fit on one row at common mobile
	   widths (≥ 360px). play is slightly bigger to read as the primary. */
	.cie-audio-bar__btn--play {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
	}
	.cie-audio-bar__btn {
		padding: 0.35rem;
		min-width: 34px;
		width: 34px;
		height: 34px;
		font-size: 0.8rem;
	}
	.cie-audio-bar__speed {
		padding: 0.25rem 0.35rem;
		font-size: 0.75rem;
	}
	.cie-audio-bar__viewlink {
		width: 30px;
		height: 30px;
	}
	.cie-audio-bar__scrubber {
		display: block;
		height: 22px;
	}
	.cie-audio-bar__scrubber::-webkit-slider-thumb {
		width: 16px;
		height: 16px;
		margin-top: -6px;
	}
	.cie-audio-bar__scrubber::-moz-range-thumb {
		width: 16px;
		height: 16px;
	}
	.cie-audio-bar__expand {
		flex-shrink: 0;
	}
}

/*
 * CIE+ upsell banner shown above the player for non-members on
 * paywalled content. Whole banner is a link to the membership page.
 */
.cie-listen-upsell {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #042774;
	color: #fff;
	border-radius: 14px;
	padding: 0.95rem 1.25rem;
	margin-bottom: 0.75rem;
	text-decoration: none;
	font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
	box-shadow: 0 2px 14px rgba(4,39,116,0.10);
	transition: background 0.15s;
}
.cie-listen-upsell:hover {
	background: #03205c;
	color: #fff;
}
.cie-listen-upsell__lock {
	flex-shrink: 0;
	display: inline-flex;
}
.cie-listen-upsell__text {
	flex: 1;
	font-size: 0.95rem;
	line-height: 1.35;
}
.cie-listen-upsell__text strong {
	font-weight: 700;
}
.cie-listen-upsell__cta {
	flex-shrink: 0;
	background: #d36c10;
	color: #fff;
	font: 700 11px/1 "Avenir Next", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 10px 16px;
	border-radius: 999px;
}
@media (max-width: 640px) {
	.cie-listen-upsell {
		flex-wrap: wrap;
	}
	.cie-listen-upsell__text {
		width: 100%;
	}
}

/* Topic page "Prefer to listen?" banner + collapsible playlist card */
.cie-listen-widget {
	font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
	margin: 1.5rem 0 1rem;
	/* Belt-and-suspenders: never let the widget propagate intrinsic
	   min-width past its parent (and therefore widen the page). The card
	   inside already has overflow: hidden to clip any rogue child. */
	max-width: 100%;
	min-width: 0;
}

/* "Explore more audio from {topic}" link shown below the single-post listen
   card. Sends the listener to the topic archive (which has the full
   playlist). The card itself eagerly fetches the topic's queue so audio
   keeps playing without leaving the page. */
.cie-listen-more {
	display: inline-block;
	margin: 0.75rem 0 0;
	font: 600 14px/1.4 "Avenir Next", sans-serif;
	color: #0c6c59;
	text-decoration: none;
	letter-spacing: 0.01em;
}
.cie-listen-more:hover {
	color: #0f8c73;
	text-decoration: underline;
}
.cie-listen-more strong {
	font-weight: 700;
	color: #042774;
}

/* Single CIE+ badge that follows "Prefer to listen?" — shown only when the
   playlist contains paywalled tracks. Hidden via the [hidden] attribute. */
.cie-listen-card__cie-badge {
	margin-left: 0.4em;
	vertical-align: 0.05em;
}

/* Track-row viewlink that sits inline next to the title (instead of in the
   right cluster). Slightly smaller and uses currentColor so it disappears
   into the title block visually until hovered. */
.cie-listen-tracks__title .cie-listen-tracks__viewlink,
.cie-track__title .cie-track__viewlink {
	width: 24px;
	height: 24px;
	margin-left: 0.4em;
	vertical-align: -0.25em;
	color: #7d7d7d;
}
.cie-listen-tracks__title .cie-listen-tracks__viewlink:hover,
.cie-track__title .cie-track__viewlink:hover {
	background: #e5f1ec;
	color: #0c6c59;
}

/* Loading skeleton — shown on topic pages while audio posts load, then
   replaced by the real card (or removed if the topic has no audio). */
.cie-listen-skeleton .cie-listen-card__head {
	cursor: default;
}
.cie-skel {
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: cieSkel 1.4s ease infinite;
	border-radius: 6px;
}
.cie-skel-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
}
.cie-skel-line {
	height: 0.85rem;
	margin: 0.4rem 0;
}
.cie-skel-line--title {
	width: 45%;
	height: 1.05rem;
}
.cie-skel-line--text {
	width: 80%;
}
.cie-skel-line--meta {
	width: 30%;
	height: 0.7rem;
}
.cie-skel-btn {
	width: 130px;
	height: 44px;
	border-radius: 999px;
	flex-shrink: 0;
}
@keyframes cieSkel {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cie-skel {
		animation: none;
	}
}
@media (max-width: 640px) {
	.cie-skel-icon {
		width: 44px;
		height: 44px;
	}
	.cie-skel-btn {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* Single expandable card (merged banner + accordion). */
.cie-listen-card {
	background: #fff;
	border: 1px solid #f4f0e5;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(4,39,116,0.06), 0 1px 3px rgba(4,39,116,0.04);
	overflow: hidden;
	transition: box-shadow 0.2s, border-color 0.15s;
}
.cie-listen-card:hover {
	box-shadow: 0 8px 32px rgba(4,39,116,0.10), 0 2px 8px rgba(4,39,116,0.05);
	border-color: #e5f1ec;
}

/* Head (always visible, click to toggle body) */
.cie-listen-card__head {
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	cursor: pointer;
	transition: transform 0.1s;
}
.cie-listen-card__head:active {
	transform: translateY(1px);
}
.cie-listen-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #e5f1ec;
	color: #0c6c59;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.cie-listen-card__copy {
	flex: 1;
	font: 16px/1.5 Georgia, "Times New Roman", serif;
	color: #2a2a2a;
	min-width: 0;
}
.cie-listen-card__copy strong {
	display: block;
	color: #042774;
	font-weight: 700;
	font-family: "Avenir Next", sans-serif;
	font-size: 1.05rem;
	margin-bottom: 0.15rem;
	letter-spacing: 0.005em;
}
.cie-listen-card__meta {
	display: block;
	margin-top: 0.2rem;
	font: 600 12px/1.3 "Avenir Next", sans-serif;
	color: #7d7d7d;
	letter-spacing: 0.02em;
}
/* Segmented filter control inside the listen card. Intros & Analyses
   (default) / Documents & Sources / Everything. */
.cie-listen-filter {
	display: flex;
	gap: 0;
	margin: 0.75rem 0 0.5rem;
	background: #f4f0e5;
	border-radius: 999px;
	padding: .25rem;
	flex-wrap: wrap;
}
.cie-listen-filter__btn {
	flex: 1 1 0;
	min-width: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: 700 11px/1 "Avenir Next", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7d7d7d;
	padding: 9px 12px;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.cie-listen-filter__btn:hover {
	color: #042774;
}
.cie-listen-filter__btn.is-active {
	background: #fff;
	color: #042774;
	box-shadow: 0 1px 3px rgba(4,39,116,0.08);
}
@media (max-width: 640px) {
	/* On mobile the three full labels won't fit on one row of equal-width
	   pills, so let each pill keep its content size (flex: 0 0 auto, no
	   shrink) and make the container horizontally scrollable. Scrollbar
	   hidden — the active pill highlight + scrollability is the affordance. */
	.cie-listen-filter {
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		border-radius: 1rem;
	}
	.cie-listen-filter::-webkit-scrollbar {
		display: none;
	}
	.cie-listen-filter__btn {
		flex: 0 0 auto;
		min-width: 0;
		font-size: 10px;
		padding: 8px 12px;
	}
}

.cie-listen-card__body-title {
	font: 700 13px/1.2 "Avenir Next", sans-serif;
	color: #042774;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.5rem 0.25rem 0.65rem;
}
.cie-listen-card__aside {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 700 11px/1 "Avenir Next", sans-serif;
	color: #0c6c59;
	letter-spacing: 0.14em;
	padding: .25rem 0;
	text-transform: uppercase;
	flex-shrink: 0;
	pointer-events: none;
	user-select: none;
	transition: color 0.15s;
}
.cie-listen-card__aside .chev {
	display: inline-flex;
	align-items: center;
	transition: transform 0.2s;
}
.cie-listen-card__aside .chev svg {
	display: block;
}
.cie-listen-card.is-open .cie-listen-card__aside .chev {
	transform: rotate(180deg);
}
.cie-listen-card__head:hover .cie-listen-card__aside {
	color: #0f8c73;
}
.cie-listen-card__play {
	background: #0c6c59;
	color: #fff;
	border: 0;
	padding: 13px 22px;
	font: 700 12px/1 "Avenir Next", sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	transition: background 0.15s;
	flex-shrink: 0;
}
.cie-listen-card__play:hover {
	background: #0f8c73;
}
.cie-listen-card__play svg {
	width: 14px;
	height: 14px;
}

/*
 * Body (collapsible). Lives inside the same card border; track
 * list slides in from a separator under the head.
 */
.cie-listen-card__body {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
	padding: 0 1.5rem;
}
.cie-listen-card.is-open .cie-listen-card__body {
	max-height: 3000px;
	opacity: 1;
	padding: 0 1.5rem 1rem;
	border-top: 1px solid #f4f0e5;
}
.cie-listen-tracks {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cie-listen-tracks li {
	display: grid;
	/* minmax(0, 1fr) so the title column never expands past its share when
	   the title is long — a plain `1fr` defaults to minmax(auto, 1fr) and
	   the auto min-size can push the whole row wider than the card. */
	grid-template-columns: 32px minmax(0, 1fr) auto;
	gap: 1.125rem;
	padding: 14px 6px;
	align-items: center;
	cursor: pointer;
	border-bottom: 1px solid #f4f0e5;
	border-radius: 8px;
	transition: background 0.15s;
}
/* Grid children get min-width: 0 + overflow control so a long title with
   no break opportunities (e.g. a long URL) wraps instead of widening the row. */
.cie-listen-tracks li > * {
	min-width: 0;
}
.cie-listen-tracks li:last-child {
	border-bottom: 0;
}
.cie-listen-tracks li:hover, .cie-listen-tracks li.is-playing {
	background: #e5f1ec;
}
.cie-listen-tracks li.is-playing .cie-listen-tracks__title {
	color: #0f8c73;
}
.cie-listen-tracks li.is-playing .cie-listen-tracks__num {
	color: #0c6c59;
}
.cie-listen-tracks__num {
	font: 700 14px/1 "Avenir Next", sans-serif;
	color: #7d7d7d;
	text-align: center;
}
.cie-listen-tracks__title {
	font: 600 17px/1.3 Georgia, "Times New Roman", serif;
	color: #042774;
	transition: color 0.15s;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.cie-listen-tracks__title a {
	color: inherit;
	text-decoration: none;
}
.cie-listen-tracks__title a:hover {
	color: #0f8c73;
	text-decoration: underline;
}
.cie-listen-tracks__sub {
	font: 11px/1.3 "Avenir Next", sans-serif;
	color: #7d7d7d;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.cie-listen-tracks__right {
	display: flex;
	gap: 14px;
	align-items: center;
}
.cie-listen-tracks__dur {
	font: 13px/1 "Avenir Next", sans-serif;
	color: #7d7d7d;
}

/*
 * View-article icon-link in playlist rows. Same pattern in both
 * the merged-card widget and the /audio/ page sections.
 */
.cie-listen-tracks__viewlink, .cie-track__viewlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #7d7d7d;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}
.cie-listen-tracks__viewlink:hover, .cie-track__viewlink:hover {
	background: #e5f1ec;
	color: #0c6c59;
}
.cie-listen-tracks__viewlink svg, .cie-track__viewlink svg {
	display: block;
}
.cie-listen-tracks__play {
	background: transparent;
	border: 1.5px solid #0c6c59;
	color: #0c6c59;
	width: 36px;
	height: 36px;
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 50%;
	transition: background 0.15s, color 0.15s;
}
.cie-listen-tracks__play:hover, .cie-listen-tracks li.is-playing .cie-listen-tracks__play {
	background: #0c6c59;
	color: #fff;
}
.cie-listen-tracks__play svg {
	width: 12px;
	height: 12px;
}

/*
 * Mobile listen card: icon + copy + aside on row 1, play button
 * gets its own full-width row 2 for a comfortable tap target.
 */
@media (max-width: 640px) {
	.cie-listen-card__head {
		flex-wrap: wrap;
		padding: 1rem 1.125rem;
		gap: 0.625rem 0.75rem;
		align-items: center;
	}
	.cie-listen-card__icon {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
	}
	.cie-listen-card__icon svg {
		width: 22px;
		height: 22px;
	}
	.cie-listen-card__copy {
		flex: 1 1 0;
		min-width: 0;
		font-size: 14px;
	}
	.cie-listen-card__copy strong {
		font-size: 0.95rem;
	}
	.cie-listen-card__aside {
		flex: 1 1 100%;
		justify-content: flex-end;
	}
	.cie-listen-card__play {
		width: 100%;
		justify-content: center;
		padding: 13px 18px;
	}
	.cie-listen-card__body {
		padding: 0 1.125rem;
	}
	.cie-listen-card.is-open .cie-listen-card__body {
		padding: 0 1.125rem 0.75rem;
	}
	.cie-listen-tracks li {
		grid-template-columns: 24px 1fr auto;
		gap: 0.75rem;
		padding: 12px 4px;
	}
	.cie-listen-tracks__title {
		font-size: 15px;
		line-height: 1.3;
	}
	.cie-listen-tracks__right {
		gap: 8px;
	}
	.cie-listen-tracks__viewlink, .cie-track__viewlink {
		width: 28px;
		height: 28px;
	}
}

/* Per-article "Listen · DURATION" button injected on topic-archive cards */
.cie-listen-inline {
	align-self: flex-start;
	background: #fff;
	color: #0c6c59;
	border: 1.5px solid #0c6c59;
	padding: 8px 14px;
	font: 700 10px/1 "Avenir Next", sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 999px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	transition: background 0.15s, color 0.15s;
	margin-top: 0.75rem;
}
.cie-listen-inline:hover, .cie-listen-inline.is-playing {
	background: #0c6c59;
	color: #fff;
}
.cie-listen-inline svg {
	width: 10px;
	height: 10px;
}

/*
 * In-content play button on single audio-post pages
 * Marker container for the article-page widget; the widget builds
 * its own card markup inside this wrapper.
 */
.cie-single-audio {
	margin: 1.25em 0 1.5em;
}