/* ===== Shell: wordmark + tabs + panels (inline card and pop-out share this) ===== */
.lrp-shell {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: 460px;
	padding: 18px 16px 20px;
	border-radius: 16px;
	background: radial-gradient(120% 90% at 50% 0%, #262b33 0%, #191c22 55%, #14171c 100%);
	color: #fff;
	font-family: inherit;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Fixed inline width (beats theme content rules) so >= 2 podcasts fit side by side. */
.lrp-shell.lrp-inline {
	width: 100% !important;
	max-width: 480px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.lrp-shell *,
.lrp-shell *::before,
.lrp-shell *::after {
	box-sizing: border-box;
}

.lrp-shell-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 0 14px;
}

.lrp-wordmark {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 3px;
	line-height: 1;
	text-align: center;
	color: #fff;
}

.lrp-wordmark span {
	display: block;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 4px;
	opacity: 0.55;
	margin-top: 3px;
}

.lrp-popout-link {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.lrp-popout-link:hover {
	border-color: #4a90d9;
	background: rgba(74, 144, 217, 0.18);
	color: #fff;
}

/* "App" in the pop-out header: installs the pop-out as its own window. */
.lrp-install {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	margin: 0;
	padding: 0 11px 0 9px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.8);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.lrp-install[hidden] {
	display: none;
}

.lrp-install:hover {
	border-color: #4a90d9;
	background: rgba(74, 144, 217, 0.18);
	color: #fff;
}

.lrp-install:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

/* ----- Tabs ----- */
.lrp-tabs {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 16px;
}

.lrp-tab {
	flex: 1;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 6px;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.lrp-tab:hover {
	color: #fff;
}

.lrp-tab.is-active {
	background: #4a90d9;
	color: #fff;
}

.lrp-panel {
	display: none;
}

.lrp-panel.is-active {
	display: block;
}

/* ===== Player card (vertical) ===== */
.lrp-player {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	gap: 14px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
}

/* ----- Artwork / tracklist flip -----
   The artwork lives inside a flip stage built by player.js. The front face is
   the cover; the back face is the set's tracklist, which on the web is given
   the full width of the card and a taller box than the 172px cover it
   replaces. In the pop-out window fitPopout() resizes the window to match. */
.lrp-stage {
	position: relative;
	perspective: 1400px;
	height: 172px;
	container-type: inline-size;
	transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.lrp-stage.is-flipped {
	height: 288px;
}

.lrp-stage-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.lrp-stage.is-flipped .lrp-stage-inner {
	transform: rotateY(180deg);
}

.lrp-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* Counter-rotated, otherwise the back face renders mirrored. */
.lrp-face-back {
	transform: rotateY(180deg);
}

.lrp-art {
	position: relative;
	display: inline-flex;
	justify-content: center;
	border-radius: 10px;
}

.lrp-art img {
	width: 172px;
	height: 172px;
	border-radius: 10px;
	object-fit: cover;
	background: #333;
	display: block;
	max-width: 100%;
}

/* Corner badge hinting that the cover turns over. Hidden by player.js on
   anything without a tracklist, which is every single track. */
.lrp-badge {
	position: absolute;
	right: 7px;
	bottom: 7px;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 15, 20, 0.84);
	border: 1px solid rgba(74, 144, 217, 0.6);
	color: #8fc0f0;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.lrp-badge:hover {
	background: rgba(74, 144, 217, 0.28);
	border-color: #4a90d9;
	transform: scale(1.06);
}

.lrp-badge:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

/* [hidden] is set from script when a track carries no tracklist. The UA rule
   for it is a bare element selector, so the class rule above would win and the
   badge would stay on screen; this puts it back. */
.lrp-badge[hidden] {
	display: none;
}

.lrp-tracklist {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	background: #12161c;
	border: 1px solid rgba(255, 255, 255, 0.09);
	overflow: hidden;
	text-align: left;
}

.lrp-tl-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 11px 13px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	color: #8fc0f0;
}

.lrp-tl-head strong {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

.lrp-tl-count {
	margin-left: auto;
	font-size: 10.5px;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.42);
	font-variant-numeric: tabular-nums;
}

.lrp-tl-close {
	display: flex;
	padding: 2px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.lrp-tl-close:hover {
	color: #fff;
}

.lrp-tl-close:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 1px;
}

.lrp-tl-sub {
	flex-shrink: 0;
	padding: 7px 13px 0;
	font-size: 11.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrp-tl-sub[hidden] {
	display: none;
}

.lrp-tl-body {
	flex: 1;
	overflow-y: auto;
	padding: 10px 6px 12px 13px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.lrp-tl-body::-webkit-scrollbar {
	width: 7px;
}

.lrp-tl-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 4px;
}

.lrp-tl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: lrp-track;
}

/* margin: the theme gives every li a 2em indent; the playing track sets its
   own margin, so without this reset it stood out to the left of the rest. */
.lrp-tl-list li {
	display: flex;
	gap: 9px;
	margin: 0;
	padding: 4px 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
}

.lrp-tl-list li::before {
	counter-increment: lrp-track;
	content: counter(lrp-track) ".";
	flex-shrink: 0;
	width: 20px;
	padding-top: 1px;
	color: rgba(255, 255, 255, 0.34);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* The track text takes the row, so the wishlist "+" sits at its end. */
.lrp-tl-list li > span:first-child {
	flex: 1;
	min-width: 0;
}

/* The "+" on a track: shown on hover (always on touch screens), and kept
   as a check mark once the track is on the wishlist. */
.lrp-wish {
	flex-shrink: 0;
	align-self: flex-start;
	width: 22px;
	height: 22px;
	margin: -1px 2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	opacity: 0;
	/* Its own compositor layer: inside the flipped (3D) face a scrolling list
	   is not always repainted, and Chrome then left half-faded "+"s behind
	   after the pointer had moved on (seen in a narrow pop-out). */
	will-change: opacity;
	transition: opacity 0.12s, color 0.15s, background 0.15s;
}

.lrp-tl-list li:hover .lrp-wish,
.lrp-wish:focus-visible,
.lrp-wish.is-on {
	opacity: 1;
}

@media (hover: none) {
	.lrp-wish {
		opacity: 1;
	}
}

.lrp-wish:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.lrp-wish.is-on {
	color: #8fc0f0;
}

.lrp-wish:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 1px;
}

/* What the DJ wrote under a track, usually its label. */
.lrp-tl-label {
	display: block;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.5);
}

/* The track playing now, from the chapters in the set's MP3. */
.lrp-tl-list li.is-now {
	margin: 0 -6px;
	padding: 4px 6px;
	border-radius: 6px;
	background: rgba(74, 144, 217, 0.16);
	color: #8fc0f0;
	font-weight: 600;
}

.lrp-tl-list li.is-now::before {
	color: #8fc0f0;
}

.lrp-tl-list li.is-now .lrp-tl-label {
	color: rgba(143, 192, 240, 0.7);
	font-weight: 400;
}

/* A wider shell (a shortcode given more room, or a wide pop-out) has room
   for two columns; the default 460px card does not, and keeps the single
   scrolling column. Applies to both the Now Playing and the podcast flip. */
@container (min-width: 560px) {
	.lrp-tl-list {
		columns: 2;
		column-gap: 20px;
	}

	.lrp-tl-list li {
		break-inside: avoid;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lrp-stage,
	.lrp-stage-inner,
	.lrp-badge,
	.lrp-ep-stage,
	.lrp-ep-stage-inner {
		transition: none;
	}
}

.lrp-main {
	min-width: 0;
}

.lrp-station-name {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.6;
}

.lrp-title {
	font-weight: 700;
	font-size: 16px;
	margin-top: 2px;
}

.lrp-artist {
	font-size: 13px;
	opacity: 0.75;
}

.lrp-next {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	min-width: 0;
}

.lrp-next-label {
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 10px;
	font-weight: 700;
	color: #4a90d9;
}

.lrp-next-text {
	opacity: 0.8;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrp-progress-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	font-size: 11px;
	opacity: 0.85;
}

.lrp-progress {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

.lrp-progress-bar {
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: #4a90d9;
	transition: width 0.5s linear;
}

.lrp-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 2px;
}

.lrp-play {
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: #4a90d9;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
	transition: background 0.15s;
}

.lrp-play:hover {
	background: #5da2ea;
}

.lrp-vol-icon {
	opacity: 0.7;
	flex-shrink: 0;
}

.lrp-volume {
	flex: 1;
	max-width: 140px;
	accent-color: #4a90d9;
	cursor: pointer;
}

/* ===== Schedule ===== */
.lrp-schedule {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 6px 14px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lrp-inline .lrp-schedule {
	max-height: 340px;
}

.lrp-schedule-loading,
.lrp-schedule-empty {
	padding: 28px 8px;
	text-align: center;
	opacity: 0.85;
	font-size: 13px;
}

.lrp-schedule-empty {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lrp-schedule-empty strong {
	font-size: 15px;
}

.lrp-sched-day {
	position: sticky;
	top: 0;
	background: #1a1e24;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 10px;
	font-weight: 800;
	color: #4a90d9;
	padding: 12px 2px 6px;
	z-index: 1;
}

.lrp-sched-row {
	display: flex;
	gap: 14px;
	padding: 10px 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	text-align: left;
}

.lrp-sched-row.is-now {
	background: rgba(74, 144, 217, 0.12);
	border-radius: 8px;
	border-top-color: transparent;
}

.lrp-sched-time {
	flex-shrink: 0;
	width: 50px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.lrp-sched-time span {
	display: block;
	font-weight: 500;
	opacity: 0.5;
	font-size: 12px;
}

.lrp-sched-info {
	min-width: 0;
}

.lrp-sched-name {
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.lrp-sched-live {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1px;
	background: #4a90d9;
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
}

/* ===== Podcasts ===== */
.lrp-podcasts {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lrp-inline .lrp-podcasts {
	max-height: 360px;
}

.lrp-popout .lrp-podcasts {
	max-height: calc(100vh - 150px);
}

.lrp-pod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 200px));
	justify-content: center;
	gap: 14px 12px;
}

.lrp-pod-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.lrp-pod-art {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	background: #333;
	display: block;
	transition: transform 0.15s, box-shadow 0.15s;
}

.lrp-pod-card:hover .lrp-pod-art {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.lrp-pod-name {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
}

/* ----- Episodes ----- */
/* The episode view is a column: header and player bar stay put, and the
   flip stage below them takes the remaining height, scrolling inside its own
   faces. That keeps the controls in view without sticky positioning, and
   gives the tracklist a box of its own to turn into. */
.lrp-podcasts.lrp-episodes-view {
	display: flex;
	flex-direction: column;
	padding-top: 0;
	overflow: hidden;
}

.lrp-ep-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 2px;
	background: #1a1e24;
}

.lrp-ep-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px 5px 7px;
	border-radius: 999px;
	cursor: pointer;
	flex-shrink: 0;
}

.lrp-ep-back:hover {
	border-color: #4a90d9;
	background: rgba(74, 144, 217, 0.18);
}

.lrp-ep-podtitle {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrp-ep-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 8px;
	padding: 10px;
	border-radius: 10px;
	background: rgba(74, 144, 217, 0.14);
	border: 1px solid rgba(74, 144, 217, 0.35);
}

/* [hidden] until an episode is picked; the display rule above would
   otherwise keep an empty bar on screen. */
.lrp-ep-bar[hidden] {
	display: none;
}

.lrp-ep-toggle {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: #4a90d9;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.lrp-ep-meta {
	flex: 1;
	min-width: 0;
}

.lrp-ep-now {
	font-size: 12px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrp-ep-seek {
	width: 100%;
	margin: 5px 0 2px;
	accent-color: #4a90d9;
	cursor: pointer;
}

.lrp-ep-times {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	opacity: 0.7;
}

/* ----- Episode list / tracklist flip -----
   Same 3D turn as the Now Playing artwork. The list is the front face and
   stays in flow, so the stage is as tall as the list up to the space left;
   a short list grows to a readable height while its tracklist is shown. */
.lrp-ep-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	perspective: 1400px;
	container-type: inline-size;
	transition: min-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.lrp-ep-stage.is-flipped {
	min-height: 220px;
}

.lrp-ep-stage-inner {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.lrp-ep-stage.is-flipped .lrp-ep-stage-inner {
	transform: rotateY(180deg);
}

.lrp-ep-face-front,
.lrp-ep-face-back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.lrp-ep-face-back {
	position: absolute;
	inset: 0;
	padding-bottom: 2px;
	transform: rotateY(180deg);
}

.lrp-ep-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.lrp-ep-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lrp-ep-item:hover {
	background: rgba(255, 255, 255, 0.04);
}

.lrp-ep-item.is-active {
	background: rgba(74, 144, 217, 0.12);
	border-radius: 8px;
	border-top-color: transparent;
}

/* Tracklist button, on an episode row and in the player bar. Same look as
   the badge on the Now Playing cover. */
.lrp-ep-tl {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	margin-right: 6px;
	padding: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 15, 20, 0.6);
	border: 1px solid rgba(74, 144, 217, 0.45);
	color: #8fc0f0;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.lrp-ep-tl:hover {
	background: rgba(74, 144, 217, 0.28);
	border-color: #4a90d9;
	transform: scale(1.06);
}

.lrp-ep-tl:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-ep-tl[hidden] {
	display: none;
}

.lrp-ep-bar .lrp-ep-tl {
	margin-right: 0;
}

.lrp-ep-row {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.lrp-ep-row[disabled] {
	opacity: 0.4;
	cursor: default;
}

.lrp-ep-ricon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lrp-ep-item.is-active .lrp-ep-ricon {
	background: #4a90d9;
}

.lrp-ep-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.lrp-ep-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.lrp-ep-date {
	font-size: 11px;
	opacity: 0.55;
	margin-top: 1px;
}

/* ===== Pop-out window (chromeless, content-sized) ===== */
.lrp-popout-body {
	margin: 0;
	padding: 0;
	background: #14171c;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.lrp-shell.lrp-popout {
	max-width: none;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	background: radial-gradient(120% 60% at 50% 0%, #262b33 0%, #191c22 45%, #14171c 100%);
	padding: 16px 16px 20px;
}

.lrp-popout .lrp-schedule {
	max-height: calc(100vh - 150px);
}

/* ===== Schedule, folded under the Radio player ===== */
.lrp-sched-fold {
	margin-top: 14px;
}

.lrp-sched-fold > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.lrp-sched-fold > summary::-webkit-details-marker {
	display: none;
}

.lrp-sched-fold > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s;
}

.lrp-sched-fold[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.lrp-sched-fold > summary:hover,
.lrp-sched-fold[open] > summary {
	color: #fff;
	border-color: rgba(74, 144, 217, 0.6);
	background: rgba(74, 144, 217, 0.14);
}

.lrp-sched-fold > summary:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-sched-fold .lrp-schedule {
	margin-top: 10px;
	max-height: 300px;
}

.lrp-popout .lrp-sched-fold .lrp-schedule {
	max-height: 300px;
}

/* ===== Favorites ===== */
.lrp-favorites {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 4px 12px 12px;
	overflow: hidden;
	max-height: 360px;
}

/* In the pop-out the list and its tracklist fill the window, and grow with
   it when the window is made taller. Without a fixed height a short list
   would shrink the window around it (fitPopout), leaving the tracklist that
   turns over in its place a few lines tall. */
.lrp-popout .lrp-favorites.has-items,
.lrp-popout .lrp-wishlist.has-items,
.lrp-popout .lrp-podcasts.lrp-episodes-view {
	height: calc(100vh - 150px);
	max-height: none;
	min-height: 320px;
}

/* Inline, a short favorites list still leaves the tracklist room to read. */
.lrp-favorites .lrp-ep-stage.is-flipped {
	min-height: 280px;
}

.lrp-favorites .lrp-ep-bar {
	margin-top: 8px;
}

.lrp-fav-empty {
	align-items: center;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.5;
}

.lrp-fav-empty svg {
	width: 34px;
	height: 34px;
	color: #8fc0f0;
	opacity: 0.8;
}

/* The heart on an episode row. */
.lrp-fav {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	margin-right: 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: color 0.15s, transform 0.15s, background 0.15s;
}

.lrp-fav:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.lrp-fav.is-on {
	color: #ff6b8b;
}

.lrp-fav:active {
	transform: scale(0.9);
}

.lrp-fav:focus-visible,
.lrp-fav-drag:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-fav-art {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 7px;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.06);
}

/* In the favorites list the cover takes the place of the round play icon,
   which then sits on top of it. */
.lrp-fav-list .lrp-ep-row {
	position: relative;
}

.lrp-fav-list .lrp-ep-ricon {
	position: absolute;
	left: 12px;
	top: 50%;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	background: rgba(13, 15, 20, 0.6);
	opacity: 0;
	transition: opacity 0.15s;
}

.lrp-fav-list .lrp-ep-row:hover .lrp-ep-ricon,
.lrp-fav-list .lrp-ep-row:focus-visible .lrp-ep-ricon,
.lrp-fav-list .lrp-ep-item.is-active .lrp-ep-ricon {
	opacity: 1;
}

.lrp-fav-drag {
	width: 28px;
	height: 30px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.35);
	cursor: grab;
	touch-action: none;
}

.lrp-fav-drag:hover {
	color: #fff;
}

.lrp-ep-item.is-dragging {
	position: relative;
	z-index: 2;
	background: #232a35;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.lrp-ep-item.is-dragging .lrp-fav-drag {
	cursor: grabbing;
}

/* ===== Equalizer ===== */
.lrp-equalizer {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 14px 14px 12px;
}

.lrp-eq-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.lrp-eq-head strong {
	font-size: 15px;
	letter-spacing: 0.3px;
}

.lrp-eq-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
}

.lrp-eq-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.lrp-eq-track {
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	transition: background 0.15s;
}

.lrp-eq-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s;
}

.lrp-eq-switch input:checked + .lrp-eq-track {
	background: #4a90d9;
}

.lrp-eq-switch input:checked + .lrp-eq-track::after {
	transform: translateX(16px);
}

.lrp-eq-switch input:focus-visible + .lrp-eq-track {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-eq-bands {
	display: flex;
	justify-content: space-between;
	gap: 6px;
	padding: 4px 0 10px;
}

.lrp-eq-band {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.lrp-eq-band input[type="range"] {
	writing-mode: vertical-lr;
	direction: rtl;
	-webkit-appearance: slider-vertical;
	width: 28px;
	height: 150px;
	margin: 0;
	accent-color: #4a90d9;
	cursor: pointer;
}

.lrp-eq-db {
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #8fc0f0;
	white-space: nowrap;
}

.lrp-eq-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
}

.lrp-eq-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	padding-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lrp-eq-chip {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.8);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 11px;
	border-radius: 999px;
	cursor: pointer;
	margin-top: 6px;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lrp-eq-chip:hover {
	border-color: rgba(74, 144, 217, 0.6);
	color: #fff;
}

.lrp-eq-chip.is-active {
	background: #4a90d9;
	border-color: #4a90d9;
	color: #fff;
}

.lrp-eq-chip:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-equalizer.is-off .lrp-eq-bands,
.lrp-equalizer.is-off .lrp-eq-presets {
	opacity: 0.4;
}

.lrp-eq-chip:disabled,
.lrp-eq-band input:disabled {
	cursor: default;
}

.lrp-eq-note {
	margin: 12px 0 0;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}

/* ===== Wishlist ===== */
.lrp-wishlist {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 4px 12px 12px;
	overflow: hidden;
	max-height: 360px;
}

.lrp-wish-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	padding: 8px 0 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.lrp-wish-shop {
	padding: 4px 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	background: #1f242b;
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	cursor: pointer;
}

.lrp-wish-shop:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 1px;
}

.lrp-wish-list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.lrp-wish-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	font-size: 12.5px;
	line-height: 1.4;
}

.lrp-wish-list li:last-child {
	border-bottom: 0;
}

.lrp-wish-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	color: rgba(255, 255, 255, 0.92);
}

.lrp-wish-set {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.38);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lrp-wish-isrc {
	flex-shrink: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.7);
	user-select: all;
}

.lrp-wish-isrc.is-none {
	color: rgba(255, 255, 255, 0.3);
	user-select: none;
}

.lrp-wish-open,
.lrp-wish-remove {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.lrp-wish-open {
	color: #8fc0f0;
}

.lrp-wish-open:hover,
.lrp-wish-remove:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.lrp-wish-open:focus-visible,
.lrp-wish-remove:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 1px;
}

/* The x next to the store list: only for a store the listener added. */
.lrp-wish-shop-remove {
	width: 24px;
	height: 24px;
	margin-left: -4px;
}

.lrp-wish-shop-remove[hidden],
.lrp-wish-add[hidden] {
	display: none;
}

/* "+ Add store…": name, search URL, a hint and the buttons. */
.lrp-wish-add {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex-shrink: 0;
	padding: 10px 0 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.lrp-wish-add input {
	width: 100%;
	padding: 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	background: #1f242b;
	color: #fff;
	font: inherit;
	font-size: 12.5px;
}

.lrp-wish-add input:focus {
	outline: 2px solid #8fc0f0;
	outline-offset: 0;
	border-color: transparent;
}

.lrp-wish-add-hint {
	font-size: 11px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.45);
}

.lrp-wish-add-error {
	font-size: 11.5px;
	color: #ff8a8a;
}

.lrp-wish-add-error:empty {
	display: none;
}

.lrp-wish-add-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.lrp-wish-add-buttons button {
	padding: 5px 12px;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.lrp-wish-add-cancel {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.8);
}

.lrp-wish-add-save {
	background: #4a90d9;
	color: #fff;
}

.lrp-wish-add-buttons button:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 1px;
}

/* A narrow card puts the ISRC under the track rather than squeezing it. */
@media (max-width: 380px) {
	.lrp-wish-list li {
		flex-wrap: wrap;
	}

	.lrp-wish-isrc {
		order: 5;
		flex-basis: 100%;
	}
}

/* ===== Bought mark on the wishlist ===== */
.lrp-wish-bought {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.38);
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}

.lrp-wish-bought:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.lrp-wish-bought.is-on {
	color: #8fc0f0;
}

.lrp-wish-bought:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 1px;
}

/* Bought tracks stay on the list, struck through and dimmed; still openable. */
.lrp-wish-list li.is-bought .lrp-wish-track {
	color: rgba(255, 255, 255, 0.45);
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.lrp-wish-list li.is-bought .lrp-tl-label,
.lrp-wish-list li.is-bought .lrp-wish-isrc {
	opacity: 0.6;
}

/* ===== Libertas Plus ===== */
/* The cloud in the header, on the left (the right is the pop-out / App button). */
.lrp-plus-btn {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.lrp-plus-btn.is-on {
	color: #8fc0f0;
}

.lrp-plus-btn:hover {
	border-color: #4a90d9;
	background: rgba(74, 144, 217, 0.18);
	color: #fff;
}

.lrp-plus-btn:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-plus {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	padding: 14px 14px 16px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.85);
}

.lrp-plus p {
	margin: 0;
}

.lrp-plus-head strong {
	font-size: 15px;
	color: #fff;
}

.lrp-plus-pitch {
	color: rgba(255, 255, 255, 0.7);
}

.lrp-plus-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.lrp-plus-title {
	color: #fff;
}

.lrp-plus-hint {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.5);
}

.lrp-plus-form input {
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	background: #1f242b;
	color: #fff;
	font: inherit;
	font-size: 14px;
}

.lrp-plus-form input[name="code"] {
	letter-spacing: 6px;
	font-variant-numeric: tabular-nums;
}

.lrp-plus-form input:focus {
	outline: 2px solid #8fc0f0;
	outline-offset: 0;
	border-color: transparent;
}

.lrp-plus-error {
	font-size: 12px;
	color: #ff8a8a;
}

.lrp-plus-error:empty {
	display: none;
}

.lrp-plus-primary,
.lrp-plus-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin: 0;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: #4a90d9;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.lrp-plus-primary:hover {
	background: #5a9de3;
	color: #fff;
}

.lrp-plus-primary:disabled,
.lrp-plus-secondary:disabled {
	opacity: 0.6;
	cursor: default;
}

.lrp-plus-secondary {
	flex-shrink: 0;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 600;
}

.lrp-plus-secondary:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.14);
}

.lrp-plus-link {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #8fc0f0;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.lrp-plus-link:hover {
	color: #fff;
	text-decoration: underline;
}

.lrp-plus-primary:focus-visible,
.lrp-plus-secondary:focus-visible,
.lrp-plus-link:focus-visible {
	outline: 2px solid #8fc0f0;
	outline-offset: 2px;
}

.lrp-plus-account {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.lrp-plus-email {
	color: #fff;
	overflow-wrap: anywhere;
}

.lrp-plus-status {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.lrp-plus-sync {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
}

.lrp-plus-sync-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.lrp-plus-sync-text strong {
	color: #fff;
	font-size: 12.5px;
}

.lrp-plus-sync-text span {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.55);
}

.lrp-plus-get {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border-radius: 10px;
	background: rgba(74, 144, 217, 0.12);
}

.lrp-plus-signout {
	color: rgba(255, 255, 255, 0.55);
}