/*
 * Shared components (templates/components/*), built on tokens.css.
 *
 * Markup and CSS are ported from the approved boards (BRIEF §16, §28). Short board
 * classes become skdr-* BEM names (Schedule-A2 .row → .skdr-show-row, .cap →
 * .skdr-cap, LastPlayed-A2 .card → .skdr-song-card); classes the boards already
 * prefixed with skdr- are kept as they are. Outer margins that only placed a piece
 * on its board are left to the page that uses it.
 *
 * Colours come from the component palette (--skdr-c-*) where a component can sit
 * on an Inverted widget, and from the brand tokens elsewhere; both follow OBIT.
 */

/* ---------------------------------------------------------------- shared */

/* Poppins only (§1), and the boards' border-box sizing, whatever the theme sets */
:is(.skdr-cap, .skdr-listen, .skdr-listen-ctl, .skdr-tabs-box, .skdr-show-row, .skdr-past-row, .skdr-song-card, .skdr-coming, .skdr-coming-tz, .skdr-fs, .skdr-app-badges, .skdr-home-story, .skdr-home-row, .skdr-home-hrow, .skdr-ph) {
	font-family: var(--skdr-font);
}

:is(.skdr-cap, .skdr-listen, .skdr-listen-ctl, .skdr-tabs-box, .skdr-show-row, .skdr-past-row, .skdr-song-card, .skdr-coming, .skdr-coming-tz, .skdr-fs, .skdr-app-badges, .skdr-home-story, .skdr-home-row, .skdr-home-hrow, .skdr-ph, .skdr-cutph),
:is(.skdr-cap, .skdr-listen, .skdr-listen-ctl, .skdr-tabs-box, .skdr-show-row, .skdr-past-row, .skdr-song-card, .skdr-coming, .skdr-coming-tz, .skdr-fs, .skdr-app-badges, .skdr-home-story, .skdr-home-row, .skdr-home-hrow, .skdr-ph, .skdr-cutph) * {
	box-sizing: border-box;
}

/* Focus ring: 2px white + 4px red halo; white outline offset on Inverted */
:is(.skdr-listen, .skdr-home-more, .skdr-coming-tz__b, .skdr-coming-tz__a, .skdr-coming-arr, .skdr-coming-track, .skdr-coming-empty__a, .skdr-fs__ic, .skdr-fs__btn, .skdr-fs__item, .skdr-lapill, .skdr-amb, .skdr-pv__btn, .skdr-app-badge, .skdr-home-story, .skdr-home-row, .skdr-show-row a, .skdr-past-row a):focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

/* Text link with a single › chevron (Home-Final .skdr-home-more, §4e) */
.skdr-home-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	border-radius: 2px;
	color: var(--skdr-c-link);
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.skdr-home-more:hover {
	color: var(--skdr-c-link-h);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Category chip, Dark Red (Home-Final); white with Dark Red text on Inverted */
.skdr-home-chip {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 2px;
	background: var(--skdr-c-chip-bg);
	color: var(--skdr-c-chip-fg);
	font-size: 11px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Relative time / meta line (Home-Final) */
.skdr-home-meta {
	display: block;
	margin-top: auto;
	padding-top: 8px;
	color: var(--skdr-c-muted);
	font-size: 13px;
	line-height: 20px;
}

/* ---------------------------------------------------------------- placeholder (§18b, ShowPage3) */

.skdr-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	overflow: hidden;
	background: var(--skdr-ph-bg);
	color: var(--skdr-ph-fg);
	box-shadow: inset 0 0 0 1px var(--skdr-line);
	container-type: size;
}

.skdr-ph--1x1,
.skdr-ph--16x9 {
	width: 100%;
}

.skdr-ph--1x1 {
	aspect-ratio: 1 / 1;
}

.skdr-ph--16x9 {
	aspect-ratio: 16 / 9;
}

.skdr-ph-l {
	color: var(--skdr-ph-fg);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	white-space: nowrap;
}

@container (max-width: 79px) {
	.skdr-ph-l {
		display: none;
	}
}

/* The dashed presenter cut-out box: 16:9, the silhouette stands on its bottom edge. Whoever
   places it puts that edge exactly on the line (§4g); nothing here offsets it. */
.skdr-cutph {
	display: block;
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 16 / 9;
	border: 1px dashed var(--skdr-dash);
	background: transparent;
}

.skdr-cutph svg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	fill: var(--skdr-cut);
}

/* ---------------------------------------------------------------- label line (Schedule-A2 .cap, §10a, §20j) */

.skdr-cap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--skdr-c-label);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-cap--now {
	color: var(--skdr-c-label-now);
}

.skdr-cap--next {
	color: var(--skdr-c-label-next);
}

.skdr-ndot {
	display: inline-block;
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--skdr-c-dot);
}

/* ---------------------------------------------------------------- LISTEN LIVE launcher (Header2-1 .pill, Schedule-A2 .listen) */

.skdr-listen {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 44px;
	margin: 0;
	padding: 0 20px 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--skdr-c-pill-bg);
	color: var(--skdr-c-pill-fg);
	font: 700 13px/1 var(--skdr-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.skdr-listen:hover {
	background: var(--skdr-c-pill-bg-h);
	color: var(--skdr-c-pill-fg);
}

.skdr-listen svg {
	flex: none;
}

.skdr-listen--lg {
	height: 52px;
	padding: 0 24px 0 20px;
	font-size: 14px;
}

.skdr-listen-ctl {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.skdr-listen-note {
	margin: 0;
	color: var(--skdr-c-muted);
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- connected day tabs on the 5px red bar (Schedule-A2, §10d/§10g) */

.skdr-tabs-box {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.skdr-tabs-box::-webkit-scrollbar {
	display: none;
}

.skdr-tabs {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	min-width: 100%;
	border-bottom: 5px solid var(--skdr-red);
}

.skdr-dtab {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 52px;
	padding: 0 8px;
	border: 0;
	border-radius: 3px 3px 0 0;
	background: var(--skdr-fill);
	color: var(--skdr-ink);
	font-family: var(--skdr-font);
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: start;
}

.skdr-dtab:hover {
	background: var(--skdr-line);
}

.skdr-dtab--on,
.skdr-dtab--on:hover {
	background: var(--skdr-red);
	color: var(--skdr-white);
}

.skdr-dtab:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--skdr-white), inset 0 0 0 4px var(--skdr-dark);
}

.skdr-dtab__d {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
}

.skdr-dtab__n {
	color: var(--skdr-gray);
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}

.skdr-dtab--on .skdr-dtab__n {
	color: var(--skdr-white);
}

.skdr-tdot {
	display: inline-block;
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--skdr-red);
}

/* ---------------------------------------------------------------- schedule full row (Schedule-A2 .row, §10c; phones §10h/§10n option C) */

.skdr-show-row {
	display: flex;
	align-items: stretch;
	gap: 24px;
	min-height: 200px;
	padding: 24px 24px 0;
	background: var(--skdr-white);
	border-bottom: 5px solid var(--skdr-ink);
}

.skdr-show-row--now {
	border-bottom-color: var(--skdr-red);
}

.skdr-show-row__txt {
	flex: 1;
	min-width: 0;
	padding: 0 24px 24px 0;
}

/* Show names are Radio Christmas Red at all times, linked or not, with no hover colour or underline
   (client, 18 Oct). They only link when a show page exists. */
.skdr-show-row__name {
	margin: 6px 0 0;
	color: var(--skdr-red);
	font-size: 26px;
	line-height: 34px;
	font-weight: 700;
}

.skdr-show-row__name a,
.skdr-show-row__name a:visited,
.skdr-show-row__name a:hover,
.skdr-show-row__name a:focus {
	border-radius: 2px;
	color: var(--skdr-red);
	text-decoration: none;
}

.skdr-show-row__syn {
	display: -webkit-box;
	margin: 6px 0 0;
	overflow: hidden;
	color: var(--skdr-gray);
	font-size: 16px;
	line-height: 26px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.skdr-show-row .skdr-listen {
	margin-top: 16px;
}

/*
 * §4g: the cut-out's box stands ON the 5px rule. The row has no bottom padding, so with
 * align-self: flex-end (end in the phone grid) the box's bottom edge is the rule's top edge:
 * 0px above, 0px below, no negative margin or translate. The whole 16:9 frame shows
 * (contain, never cover), so DA's transparent margins stay as designed.
 */
.skdr-show-row__cut {
	flex: none;
	align-self: flex-end;
	width: 288px;
	height: 162px;
	margin-bottom: 0;
	line-height: 0;
}

.skdr-show-row__cut img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.skdr-show-row__cut .skdr-cutph {
	width: 100%;
	height: 100%;
}

@media (max-width: 760px) {
	/* Text full width, then a 90px strip: LISTEN LIVE left, the 160×90 cut-out right on the rule */
	.skdr-show-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 160px;
		gap: 0;
		min-height: 0;
		padding: 20px 16px 0;
	}

	.skdr-show-row__txt {
		display: contents;
	}

	.skdr-show-row__txt > * {
		grid-column: 1 / -1;
	}

	.skdr-show-row .skdr-cap {
		font-size: 13px;
		line-height: 20px;
	}

	.skdr-show-row__name {
		font-size: 22px;
		line-height: 28px;
	}

	.skdr-show-row__syn {
		display: block;
		margin-top: 8px;
		font-size: 15px;
		line-height: 24px;
	}

	.skdr-show-row .skdr-listen {
		grid-column: 1;
		align-self: end;
		justify-self: start;
		margin: 0 0 30px;
	}

	.skdr-show-row__cut {
		grid-column: 2;
		width: 160px;
		height: 90px;
		margin-top: 4px;
	}

	.skdr-show-row--now .skdr-show-row__cut {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------- past row, shared with Listen again (Schedule-Past, ShowPage3, §10m/§18l) */

.skdr-past-row {
	display: flex;
	align-items: stretch;
	min-height: 104px;
	padding: 16px 24px 0;
	background: var(--skdr-white);
	border-bottom: 3px solid var(--skdr-line);
}

.skdr-past-row__txt {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 0 24px 16px 0;
}

.skdr-past-row__name {
	margin: 0;
	color: var(--skdr-red);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
}

.skdr-past-row__name a,
.skdr-past-row__name a:visited,
.skdr-past-row__name a:hover,
.skdr-past-row__name a:focus {
	border-radius: 2px;
	color: var(--skdr-red);
	text-decoration: none;
}

.skdr-past-row__time {
	margin: 2px 0 0;
	color: var(--skdr-gray);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
}

/* §4g: on the 3px rule exactly, as the full row's cut-out above */
.skdr-past-row__cut {
	display: block;
	flex: none;
	align-self: flex-end;
	width: 160px;
	height: 90px;
	margin-bottom: 0;
	line-height: 0;
}

.skdr-past-row__cut img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.skdr-past-row__cut .skdr-cutph {
	width: 100%;
	height: 100%;
}

.skdr-past-row__side {
	display: flex;
	flex: none;
	align-items: center;
	padding: 0 0 16px 24px;
}

.skdr-lapill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 40px;
	padding: 0 7px 0 12px;
	border: 2px solid var(--skdr-line);
	border-radius: 999px;
	background: var(--skdr-white);
	color: var(--skdr-muted);
	font: 600 14px/1 var(--skdr-font);
	white-space: nowrap;
	cursor: default;
}

.skdr-lapill:hover {
	background: var(--skdr-white);
	color: var(--skdr-muted);
}

.skdr-lapill svg {
	flex: none;
}

.skdr-lapill--on {
	padding: 0 16px 0 12px;
	color: var(--skdr-dark);
	text-decoration: none;
	cursor: pointer;
}

.skdr-lapill--on:hover {
	background: var(--skdr-fill);
	color: var(--skdr-red);
}

.skdr-lasoon {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--skdr-fill);
	color: var(--skdr-muted);
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 760px) {
	/* Text-first, no image, 36px pill, 1px divider */
	.skdr-past-row {
		align-items: center;
		min-height: 72px;
		padding: 12px 16px;
		border-bottom-width: 1px;
	}

	.skdr-past-row__txt {
		padding: 0 12px 0 0;
	}

	.skdr-past-row__name {
		font-size: 16px;
		line-height: 22px;
	}

	.skdr-past-row__time {
		font-size: 13px;
		line-height: 20px;
	}

	.skdr-past-row__cut,
	.skdr-lasoon {
		display: none;
	}

	.skdr-past-row__side {
		padding: 0;
	}

	.skdr-lapill {
		gap: 6px;
		height: 36px;
		padding: 0 12px 0 10px;
		font-size: 13px;
	}

	.skdr-lapill svg {
		width: 16px;
		height: 16px;
	}
}

/* ---------------------------------------------------------------- Last Played song card (LastPlayed-A2 .card, §14) */

.skdr-song-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 8px;
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-ring);
}

.skdr-song-card__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px;
	overflow: hidden;
	background: var(--skdr-red);
	color: var(--skdr-white);
	white-space: nowrap;
}

.skdr-song-card--now .skdr-song-card__bar {
	background: var(--skdr-yel);
	color: var(--skdr-on-yel);
}

.skdr-song-card__time {
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	font-style: italic;
}

.skdr-song-card--now .skdr-song-card__time {
	margin-left: auto;
}

.skdr-song-card__show {
	overflow: hidden;
	font-size: 13px;
	line-height: 20px;
	font-weight: 400;
	text-overflow: ellipsis;
}

.skdr-song-card__np {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-eq {
	display: inline-flex;
	flex: none;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
}

.skdr-eq span {
	display: block;
	width: 3px;
	height: 8px;
	border-radius: 1.5px;
	background: currentColor;
	animation: skdr-eq 1s ease-in-out infinite;
}

.skdr-eq span:nth-child(2) {
	animation-delay: -0.33s;
}

.skdr-eq span:nth-child(3) {
	animation-delay: -0.66s;
}

@keyframes skdr-eq {
	0%,
	100% {
		height: 4px;
	}

	50% {
		height: 14px;
	}
}

.skdr-song-card__body {
	padding: 12px;
}

.skdr-song-card__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.skdr-song-card__acol {
	flex: 0 0 120px;
	width: 120px;
	min-width: 0;
}

.skdr-song-card__art {
	width: 120px;
	height: 120px;
	border-radius: 4px;
	object-fit: cover;
}

img.skdr-song-card__art {
	display: block;
}

.skdr-song-card__col {
	flex: 1;
	min-width: 0;
}

.skdr-song-card__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
}

.skdr-song-card__title {
	margin: 0;
	color: var(--skdr-ink);
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
}

.skdr-song-card__artist {
	margin: 2px 0 0;
	color: var(--skdr-gray);
	font-size: 15px;
	line-height: 22px;
	font-weight: 400;
	font-style: italic;
}

.skdr-song-card__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 16px;
	margin-top: 6px;
}

.skdr-song-card__det {
	margin: 12px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--skdr-line);
}

.skdr-song-card__det-r {
	display: flex;
	gap: 6px;
	font-size: 13px;
	line-height: 20px;
}

.skdr-song-card__det dt {
	flex: none;
	margin: 0;
	color: var(--skdr-muted);
	font-weight: 600;
}

.skdr-song-card__det dd {
	min-width: 0;
	margin: 0;
	color: var(--skdr-ink);
	font-weight: 400;
}

/* Apple Music badge: Apple's official small "Apple Music" badge artwork (assets/img, 78x16),
 * shown 20px tall like the board's thin pill (§20k); 44px hit area. Nothing on it is restyled:
 * no underline or colour change on hover (Kreeti and WP External Links style plain links). */
.skdr-amb,
.skdr-amb:hover,
.skdr-amb:focus {
	display: inline-flex;
	position: relative;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	text-decoration: none;
}

.skdr-amb img {
	display: block;
	width: auto;
	max-width: none;
	height: 20px;
}

.skdr-amb:hover img {
	opacity: 0.85;
}

.skdr-amb::before {
	position: absolute;
	top: -12px;
	right: 0;
	bottom: -12px;
	left: 0;
	content: "";
}

/* Christmas No. 1 badge */
.skdr-chb {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: 4px;
	background: var(--skdr-yel);
	color: var(--skdr-on-yel);
	font-family: var(--skdr-font);
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
}

/* 30-second preview: the page's script wires the button to data-preview-src */
.skdr-pv {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 44px;
}

.skdr-pv__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	min-width: 78px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--skdr-ink);
	font-family: var(--skdr-font);
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.skdr-pv__btn:hover {
	color: var(--skdr-red);
	text-decoration: underline;
}

.skdr-pv__btn svg {
	flex: none;
}

.skdr-pv__line {
	position: relative;
	flex: none;
	width: 120px;
	height: 2px;
	background: var(--skdr-track);
}

.skdr-pv__dot {
	position: absolute;
	top: -3px;
	left: 0;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--skdr-ink);
}

.skdr-pv__line--on .skdr-pv__dot {
	animation: skdr-pvdot 30s linear forwards;
}

@keyframes skdr-pvdot {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@media (max-width: 760px) {
	.skdr-song-card__acol {
		flex-basis: 96px;
		width: 96px;
	}

	.skdr-song-card__art {
		width: 96px;
		height: 96px;
	}
}

/* ---------------------------------------------------------------- timezone line, short form (ShowPage3 .skdr-coming-tz, §4a) */

.skdr-coming-tz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin: 0;
	color: var(--skdr-c-muted);
	font-size: 14px;
	line-height: 22px;
}

.skdr-coming-tz__t {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.skdr-coming-tz__b {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--skdr-c-link);
	font: 600 14px/22px var(--skdr-font);
	text-align: left;
	cursor: pointer;
}

.skdr-coming-tz__a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	border-radius: 2px;
	color: var(--skdr-c-link);
	font-weight: 600;
	text-decoration: none;
}

.skdr-coming-tz__b:hover,
.skdr-coming-tz__a:hover {
	color: var(--skdr-c-link-h);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* The timezone script shows one state at a time (timezone.js); the parts' own display loses to hidden */
.skdr-coming-tz [hidden],
.skdr-coming-tz__box[hidden] {
	display: none !important;
}

/* The chosen zone's time after a UK time, "2pm – 5pm (7am – 10am Guatemala)": quieter than the
   broadcast time it follows, as the header's bracket (§7g revised), and never in caps */
.skdr-tz-local {
	color: var(--skdr-c-muted);
	font-weight: var(--skdr-fw-regular);
	letter-spacing: normal;
	text-transform: none;
}

.skdr-tz-local[hidden] {
	display: none !important;
}

/* On a coloured surface it takes that surface's own text colour, never grey: white on the song
   cards' red time bar, Dark Red on the yellow NOW PLAYING bar (contrast ≥ 4.5:1, no grey or red
   on red), upright and regular beside the bar's italic 600 time */
.skdr-song-card__bar .skdr-tz-local {
	color: var(--skdr-white);
	font-style: normal;
}

.skdr-song-card--now .skdr-song-card__bar .skdr-tz-local {
	color: var(--skdr-on-yel);
}

/* In a show chip the visitor's time has its own line under the UK time, unbracketed, so a long
   show name never squeezes it: "2pm – 5pm" over "7am – 10am Guatemala" (client, 18 Oct) */
.skdr-chip__t .skdr-tz-local {
	display: block;
	color: var(--skdr-c-muted);
	font-size: 13px;
	line-height: 18px;
	white-space: normal;
}

/* "Show times in" + the zone select, under the line (Schedule-A2 .tzbox, Schedule-MobileLive .s-tzbox) */
.skdr-coming-tz__box {
	display: flex;
	align-items: center;
	gap: var(--skdr-sp-12);
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin-top: var(--skdr-sp-12);
	padding: var(--skdr-sp-12) var(--skdr-sp-16);
	border-radius: var(--skdr-r-card);
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-card);
	font-family: var(--skdr-font);
}

.skdr-coming-tz__box .skdr-coming-tz__lab {
	display: block;
	margin: 0;
	color: var(--skdr-ink);
	font: var(--skdr-fw-semibold) 14px/22px var(--skdr-font);
	white-space: nowrap;
}

.skdr-coming-tz__box .skdr-coming-tz__sel {
	box-sizing: border-box;
	height: 44px;
	min-width: 200px;
	max-width: 100%;
	margin: 0;
	padding: 0 var(--skdr-sp-12);
	border: 1px solid var(--skdr-line);
	border-radius: var(--skdr-r-chip);
	background: var(--skdr-white);
	color: var(--skdr-ink);
	font: var(--skdr-fw-regular) 14px/22px var(--skdr-font);
}

.skdr-coming-tz__box .skdr-coming-tz__sel:focus-visible {
	outline: 2px solid var(--skdr-white);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--skdr-red);
}

@media (max-width: 760px) {
	.skdr-coming-tz__box {
		display: block;
		width: auto;
		margin-top: var(--skdr-sp-8);
		padding: var(--skdr-sp-12);
	}

	.skdr-coming-tz__box .skdr-coming-tz__lab {
		font-size: var(--skdr-fs-caption);
		line-height: var(--skdr-lh-caption);
	}

	.skdr-coming-tz__box .skdr-coming-tz__sel {
		display: block;
		width: 100%;
		min-width: 0;
		margin-top: 6px;
	}
}

/* The long form's clock line (Schedule-A2): "Broadcast time: 12:05pm · Your time: 7:05am" on
   desktop; on phones only "Your time: 7:05am · New York", and only when it differs (§10f) */
.skdr-tzclock__place {
	display: none;
}

@media (max-width: 760px) {
	.skdr-tzclock__uk,
	.skdr-tzclock__sep {
		display: none;
	}

	.skdr-tzclock__place {
		display: inline;
	}

	[data-skdr-tz-clock][data-skdr-same] {
		display: none !important;
	}
}

/* ---------------------------------------------------------------- Follow / Share, the quiet line (PresenterPage3 .skdr-fs, §18k/§4b) */

.skdr-fs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.skdr-fs__lbl {
	color: var(--skdr-c-muted);
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
}

.skdr-fs__icons {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-fs__icons li {
	display: flex;
	margin: 0;
	padding: 0;
}

.skdr-fs__ic {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 -6px;
	border-radius: 4px;
	color: var(--skdr-c-text);
	text-decoration: none;
}

/* 32px icon, 44px tall hit area */
.skdr-fs__ic::before {
	position: absolute;
	top: -6px;
	right: 0;
	bottom: -6px;
	left: 0;
	content: "";
}

.skdr-fs__ic:hover {
	color: var(--skdr-c-link);
}

.skdr-fs__div {
	width: 1px;
	height: 20px;
	margin: 0 4px;
	background: var(--skdr-c-line);
}

.skdr-fs__share {
	position: relative;
}

.skdr-fs__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 4px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--skdr-c-link);
	font: 600 14px/22px var(--skdr-font);
	cursor: pointer;
}

.skdr-fs__btn:hover {
	color: var(--skdr-c-link-h);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.skdr-fs__menu {
	position: absolute;
	top: 40px;
	left: 0;
	z-index: 5;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	border-radius: 8px;
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-pop);
	list-style: none;
}

.skdr-fs__menu[hidden] {
	display: none;
}

.skdr-fs__menu li {
	margin: 0;
	padding: 0;
}

.skdr-fs__item {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 10px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--skdr-ink);
	font: 400 14px/22px var(--skdr-font);
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.skdr-fs__item svg {
	flex: none;
	color: var(--skdr-gray);
}

.skdr-fs__item:hover {
	background: var(--skdr-fill);
	color: var(--skdr-dark);
}

.skdr-fs__item:hover svg {
	color: var(--skdr-dark);
}

/* ---------------------------------------------------------------- official store badges (App-Desktop, Footer-Final, §13a) */

.skdr-app-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.skdr-app-badge {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	height: 40px;
	min-width: 132px;
	padding: 0 14px;
	border-radius: 6px;
	background: var(--skdr-black);
	box-shadow: inset 0 0 0 1px #A6A6A6;
	color: #FFFFFF;
	text-decoration: none;
}

.skdr-app-badge:hover {
	background: #1A1A1A;
	color: #FFFFFF;
}

.skdr-app-badge small {
	display: block;
	font-size: 10px;
	line-height: 12px;
	font-weight: 500;
}

.skdr-app-badge small.up {
	font-size: 9px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.skdr-app-badge b {
	display: block;
	font-size: 16px;
	line-height: 19px;
	font-weight: 600;
}

.skdr-app-badge--sm {
	height: 32px;
	min-width: 108px;
	padding: 0 11px;
	border-radius: 5px;
}

.skdr-app-badge--sm small,
.skdr-app-badge--sm small.up {
	font-size: 8px;
	line-height: 10px;
}

.skdr-app-badge--sm b {
	font-size: 13px;
	line-height: 15px;
}

/* ---------------------------------------------------------------- compact app widget (Footer-Final, Footer-Mobile .skdr-app-footer, §22) */

/* About 150px tall (the target is 200 at most), so it is never taller than the footer's link columns */
.skdr-app-footer {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	padding: 20px 24px 22px;
	border-radius: var(--skdr-r-card);
	background: var(--skdr-page);
	box-shadow: var(--skdr-shadow-ring);
	font-family: var(--skdr-font);
}

.skdr-app-footer * {
	box-sizing: border-box;
}

.skdr-app-footer__title {
	margin: 0;
	color: var(--skdr-dark);
	font-family: var(--skdr-font-heading, var(--skdr-font));
	font-size: var(--skdr-fs-h3);
	line-height: var(--skdr-lh-h3);
	font-weight: 700;
}

.skdr-app-footer__text {
	margin: 4px 0 0;
	color: var(--skdr-gray);
	font-family: inherit;
	font-size: 14px;
	line-height: 22px;
}

/* Room at the right for the screenshot (beside everything) or the icon (beside the heading and line) */
.skdr-app-footer--shot {
	padding-right: 104px;
}

.skdr-app-footer--icon .skdr-app-footer__title,
.skdr-app-footer--icon .skdr-app-footer__text {
	padding-right: 80px;
}

/* Apple's and Google's official badges, unmodified, both 40px tall (Apple's minimum) */
.skdr-app-stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
}

.skdr-app-store {
	display: inline-flex;
	flex: none;
	border-radius: 6px;
	line-height: 0;
}

.skdr-app-store:focus-visible {
	outline: var(--skdr-focus-outline);
	outline-offset: var(--skdr-focus-offset);
	box-shadow: var(--skdr-focus-shadow);
}

.skdr-app-store img {
	display: block;
	width: auto;
	max-width: none;
	height: 40px;
}

/* Google's artwork carries its own clear space (41px of its 250px height): size it so the badge itself is 40px tall too */
.skdr-app-store--android {
	margin: calc(-40px * 41 / 168);
}

.skdr-app-store--android img {
	height: calc(40px * 250 / 168);
}

/* The uploaded screenshot, as it is (it already shows the phone): the board's phone size and place, standing on the card's bottom edge (§4g) */
.skdr-app-footer__shot {
	position: absolute;
	right: 24px;
	bottom: 0;
	width: 66px;
	height: 132px;
	object-fit: contain;
	object-position: bottom;
}

/* No screenshot: the real app icon in a rounded tile */
.skdr-app-footer__icon {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	box-shadow: var(--skdr-shadow-ring);
}

@media (max-width: 600px) {
	.skdr-app-footer {
		padding: 18px 20px 20px;
	}

	.skdr-app-footer--shot {
		padding-right: 88px;
	}

	.skdr-app-footer__shot {
		right: 12px;
	}

	.skdr-app-footer__icon {
		top: 18px;
		right: 20px;
	}

	.skdr-app-stores {
		margin-top: 14px;
	}
}


/* ---------------------------------------------------------------- story card (Home-Final .skdr-home-story) */

.skdr-home-story {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	border-radius: 8px;
	background: var(--skdr-c-surface);
	box-shadow: var(--skdr-c-shadow);
	color: var(--skdr-c-heading);
	text-decoration: none;
}

.skdr-home-story:hover {
	color: var(--skdr-c-heading);
}

.skdr-home-story__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: opacity var(--skdr-hover-fade) ease;
}

.skdr-home-story .skdr-ph {
	width: 100%;
	aspect-ratio: 16 / 9;
	transition: opacity var(--skdr-hover-fade) ease;
}

.skdr-home-story__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px 16px 18px;
}

.skdr-home-story__t {
	display: -webkit-box;
	min-height: 72px;
	margin: 10px 0 0;
	overflow: hidden;
	color: var(--skdr-c-heading);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.skdr-home-story:hover .skdr-home-story__img,
.skdr-home-story:hover .skdr-ph {
	opacity: 0.85;
}

.skdr-home-story:hover .skdr-home-story__t {
	color: var(--skdr-c-link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- list row: 16:9 thumbnail, chip, title, meta; no box, no divider (Home-Final .skdr-home-row) */

.skdr-home-row {
	display: flex;
	align-items: center;
	gap: 16px;
	border-radius: 8px;
	color: var(--skdr-c-heading);
	text-decoration: none;
}

.skdr-home-row:hover {
	color: var(--skdr-c-heading);
}

.skdr-home-row .skdr-ph,
.skdr-home-row__img {
	flex: none;
	width: 120px;
	height: 68px;
	border-radius: 8px;
	transition: opacity var(--skdr-hover-fade) ease;
}

.skdr-home-row__img {
	display: block;
	object-fit: cover;
}

.skdr-home-row__txt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.skdr-home-row__t {
	display: block;
	margin: 6px 0 0;
	color: var(--skdr-c-heading);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
}

.skdr-home-row .skdr-home-meta {
	margin-top: 4px;
	padding-top: 0;
}

.skdr-home-row:hover .skdr-ph,
.skdr-home-row:hover .skdr-home-row__img {
	opacity: 0.85;
}

.skdr-home-row:hover .skdr-home-row__t {
	color: var(--skdr-c-link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 520px) {
	.skdr-home-row .skdr-ph,
	.skdr-home-row__img {
		width: 96px;
		height: 54px;
	}

	.skdr-home-row__t {
		font-size: 16px;
		line-height: 22px;
	}
}

/* ---------------------------------------------------------------- kicker + plain section heading (§4c, Foundations-v2 §2, Home-Final .skdr-home-hrow) */

.skdr-home-hrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	margin: 0 0 24px;
}

.skdr-kicker {
	margin: 0;
	color: var(--skdr-c-kicker);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.skdr-home-h2 {
	margin: 0;
	color: var(--skdr-c-heading);
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
}

.skdr-kicker + .skdr-home-h2 {
	margin-top: 8px;
}

@media (max-width: 760px) {
	.skdr-home-hrow {
		flex-wrap: wrap;
	}

	.skdr-home-h2 {
		font-size: 24px;
		line-height: 32px;
	}
}

/* ---------------------------------------------------------------- Coming up: "Big day" + "Timeline cards" (ShowPage3 .skdr-coming-*, §18q, §18r, §18s) */

/* The headline row: the day and time in red, ‹ › on the right (desktop only) */
.skdr-coming-bd__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 44px;
}

.skdr-coming .skdr-coming-bd__h {
	margin: 0;
	padding: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
}

.skdr-coming-bd__listen {
	margin-top: 16px;
}

.skdr-coming-arrows {
	display: flex;
	flex: none;
	gap: 8px;
}

/* Hidden until show.js finds the row overflows */
.skdr-coming-arrows[hidden] {
	display: none;
}

.skdr-coming .skdr-coming-arr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--skdr-white);
	box-shadow: var(--skdr-shadow-ring);
	cursor: pointer;
}

.skdr-coming .skdr-coming-arr:hover {
	background: var(--skdr-fill);
}

.skdr-coming-arr--prev svg {
	transform: scaleX(-1);
}

.skdr-coming .skdr-coming-arr[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.skdr-coming .skdr-coming-arr[aria-disabled="true"]:hover {
	background: var(--skdr-white);
}

/* The cards scroll sideways, snapping to each; the next one peeks on phones */
.skdr-coming .skdr-coming-track {
	display: flex;
	gap: 16px;
	margin: 24px 0 0;
	padding: 2px 2px 10px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.skdr-coming-track::-webkit-scrollbar {
	display: none;
}

.skdr-coming .skdr-coming-tc {
	display: flex;
	position: relative;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	width: 264px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--skdr-c-line);
	border-radius: 12px;
	background: var(--skdr-c-surface);
	scroll-snap-align: start;
}

/* The date tile: Dark Red, white text; a special's is yellow with Dark Red text (§18s) */
.skdr-coming-tile {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	background: var(--skdr-c-chip-bg);
	text-align: center;
}

.skdr-coming-tile__w,
.skdr-coming-tile__m {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-coming-tile__d {
	display: block;
	font-size: 32px;
	line-height: 36px;
	font-weight: 700;
}

.skdr-coming-tile--s {
	width: 64px;
	height: 64px;
}

.skdr-coming-tile--s .skdr-coming-tile__w,
.skdr-coming-tile--s .skdr-coming-tile__m {
	font-size: 11px;
	line-height: 14px;
}

.skdr-coming-tile--s .skdr-coming-tile__d {
	font-size: 26px;
	line-height: 30px;
}

.skdr-coming .skdr-coming-tile--sp {
	background: var(--skdr-yel);
}

.skdr-coming-time {
	display: block;
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
}

.skdr-coming-tc .skdr-coming-time {
	margin-top: 16px;
}

/* The episode's own title, only when it differs from the show's (§18q) */
.skdr-coming-ep {
	display: block;
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
}

.skdr-coming .skdr-coming-tz {
	margin-top: 16px;
}

/* Empty states (§18r): no cards, no arrows, no timezone line */
.skdr-coming-empty {
	max-width: 760px;
	padding: 24px 24px 16px;
	border: 1px solid var(--skdr-c-line);
	border-radius: 8px;
	background: var(--skdr-c-surface);
}

.skdr-coming .skdr-coming-empty__h {
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.skdr-coming .skdr-coming-empty__p {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 26px;
}

.skdr-coming > .skdr-coming-empty__p {
	margin: 0;
}

.skdr-coming .skdr-coming-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 22px;
}

.skdr-coming .skdr-coming-empty__a {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	border-radius: 2px;
	font-weight: 600;
	text-decoration: none;
}

.skdr-coming .skdr-coming-empty__a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

@media (max-width: 760px) {
	.skdr-coming .skdr-coming-bd__h {
		font-size: 26px;
		line-height: 34px;
	}

	.skdr-coming .skdr-coming-arrows {
		display: none;
	}

	/* Edge to edge, the cards keeping the 16px gutter (ShowPresenter3-Mobile) */
	.skdr-coming .skdr-coming-track {
		margin-right: calc(-1 * var(--skdr-gutter-phone));
		margin-left: calc(-1 * var(--skdr-gutter-phone));
		padding: 2px var(--skdr-gutter-phone) 10px;
		scroll-padding-left: var(--skdr-gutter-phone);
	}

	.skdr-coming-ep {
		font-weight: 400;
	}

	/* The timezone line stacks: UK times, the offer or Change, then Full schedule */
	.skdr-coming .skdr-coming-tz {
		flex-direction: column;
		align-items: flex-start;
	}

	.skdr-coming .skdr-coming-tz__sep {
		display: none;
	}

	.skdr-coming .skdr-coming-tz__t {
		min-height: 22px;
	}
}

/* ---------------------------------------------------------------- reduced motion: no movement */

@media (prefers-reduced-motion: reduce) {
	.skdr-eq span {
		animation: none;
	}

	.skdr-eq span:nth-child(1) {
		height: 8px;
	}

	.skdr-eq span:nth-child(2) {
		height: 14px;
	}

	.skdr-eq span:nth-child(3) {
		height: 6px;
	}

	.skdr-pv__line--on .skdr-pv__dot {
		left: 40%;
		animation: none;
	}

	.skdr-home-story__img,
	.skdr-home-story .skdr-ph,
	.skdr-home-row .skdr-ph,
	.skdr-home-row__img {
		transition: none;
	}
}

/* ---------------------------------------------------------------- theme isolation: text colours (keep last)
 *
 * The parent theme colours bare elements with selectors that outrank one class. In Kreeti,
 * `.aft-default-mode button { color: #fff }` and `a, a:visited, a:hover, a:focus, a:active
 * { color: #bb191a }` are both (0,1,1). A component button or link coloured by a single
 * class therefore turned white on white or theme red: the unselected day tabs' weekday,
 * "Change timezone" and "Listen again" went invisible.
 *
 * So the colour of every component button and link, and of the text inside them, is set
 * again here inside its component (two classes or more), followed by its hover and
 * selected states. Colours are our tokens only. tests/Unit/Components/ThemeIsolationTest.php
 * renders the schedule components and checks every text element against these rules.
 */

/* Connected day tabs: Ink weekday and Gray date; the selected tab is white on red */
.skdr-tabs .skdr-dtab,
.skdr-tabs .skdr-dtab__d {
	color: var(--skdr-ink);
}

.skdr-tabs .skdr-dtab__n {
	color: var(--skdr-gray);
}

.skdr-tabs .skdr-dtab--on,
.skdr-tabs .skdr-dtab--on .skdr-dtab__d,
.skdr-tabs .skdr-dtab--on .skdr-dtab__n {
	color: var(--skdr-white);
}

/* Timezone line: muted text, Dark Red link-buttons */
.skdr-coming-tz .skdr-coming-tz__t {
	color: var(--skdr-c-muted);
}

.skdr-coming-tz .skdr-coming-tz__b,
.skdr-coming-tz .skdr-coming-tz__a {
	color: var(--skdr-c-link);
}

.skdr-coming-tz .skdr-coming-tz__b:hover,
.skdr-coming-tz .skdr-coming-tz__a:hover {
	color: var(--skdr-c-link-h);
}

/* Follow / Share (§18k): Kreeti's inline `body.aft-default-mode button { color: #fff }` is
   (0,1,2), so on a white page head the Share button went white on white */
.skdr-fs .skdr-fs__btn {
	color: var(--skdr-c-link);
}

.skdr-fs .skdr-fs__btn:hover {
	color: var(--skdr-c-link-h);
}

.skdr-fs .skdr-fs__ic {
	color: var(--skdr-c-text);
}

.skdr-fs .skdr-fs__ic:hover {
	color: var(--skdr-c-link);
}

.skdr-fs .skdr-fs__item {
	color: var(--skdr-ink);
}

.skdr-fs .skdr-fs__item:hover {
	color: var(--skdr-dark);
}

/* LISTEN LIVE: the pill's own text colour, link or button */
.skdr-listen.skdr-popout-open,
.skdr-listen.skdr-popout-open:hover {
	color: var(--skdr-c-pill-fg);
}

/* Schedule full row: the show name is Dark Red at all times (linked or not, any state);
   synopsis links keep their hover (§10e; client, 18 Oct) */
.skdr-show-row .skdr-show-row__name,
.skdr-show-row .skdr-show-row__name a,
.skdr-show-row .skdr-show-row__name a:visited,
.skdr-show-row .skdr-show-row__name a:hover,
.skdr-show-row .skdr-show-row__name a:focus {
	color: var(--skdr-red);
	text-decoration: none;
}

.skdr-show-row .skdr-show-row__syn {
	color: var(--skdr-gray);
}

.skdr-show-row .skdr-show-row__syn a {
	border-radius: 2px;
	color: var(--skdr-dark);
	text-decoration: none;
}

.skdr-show-row .skdr-show-row__syn a:hover {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Past row: the name is Dark Red at all times, Gray time, the muted "Listen again" pill */
.skdr-past-row .skdr-past-row__name,
.skdr-past-row .skdr-past-row__name a,
.skdr-past-row .skdr-past-row__name a:visited,
.skdr-past-row .skdr-past-row__name a:hover,
.skdr-past-row .skdr-past-row__name a:focus {
	color: var(--skdr-red);
	text-decoration: none;
}

.skdr-past-row .skdr-past-row__time {
	color: var(--skdr-gray);
}

.skdr-past-row .skdr-lapill,
.skdr-past-row .skdr-lapill:hover,
.skdr-past-row .skdr-lasoon {
	color: var(--skdr-muted);
}

.skdr-past-row .skdr-lapill--on {
	color: var(--skdr-dark);
}

.skdr-past-row .skdr-lapill--on:hover {
	color: var(--skdr-red);
}

/* Label line and placeholder labels */
.skdr-cap.skdr-cap--now {
	color: var(--skdr-c-label-now);
}

.skdr-cap.skdr-cap--next {
	color: var(--skdr-c-label-next);
}

.skdr-ph .skdr-ph-l {
	color: var(--skdr-ph-fg);
}

/* Song card (LastPlayed-A2 .amb, .pv-btn, .cdet; BRIEF §14a, §14c): the Apple Music badge, Preview
 * and the labelled details list under the art row. Kreeti styles bare dl/dt/dd (bigger, bolder
 * labels) and buttons, so the list's type and these colours are restated inside the card. */
.skdr-song-card .skdr-amb,
.skdr-song-card .skdr-amb:hover {
	color: var(--skdr-white);
}

.skdr-song-card .skdr-pv__btn {
	color: var(--skdr-ink);
}

.skdr-song-card .skdr-pv__btn:hover,
.skdr-song-card .skdr-pv__btn[aria-pressed="true"] {
	color: var(--skdr-red);
}

.skdr-song-card .skdr-song-card__det {
	display: block;
	margin: 12px 0 0;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--skdr-line);
	background: none;
}

.skdr-song-card .skdr-song-card__det-r {
	display: flex;
	gap: 6px;
}

.skdr-song-card .skdr-song-card__det dt,
.skdr-song-card .skdr-song-card__det dd {
	display: block;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--skdr-font);
	font-size: 13px;
	line-height: 20px;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
}

.skdr-song-card .skdr-song-card__det dt {
	flex: none;
	color: var(--skdr-muted);
	font-weight: 600;
}

.skdr-song-card .skdr-song-card__det dd {
	min-width: 0;
	color: var(--skdr-ink);
	font-weight: 400;
}

/* NOW PLAYING bar: Dark Red label on yellow with the header's red equaliser (§14, client on #21) */
.skdr-song-card--now .skdr-song-card__np {
	color: var(--skdr-on-yel);
}

.skdr-song-card--now .skdr-song-card__np .skdr-eq span {
	background: var(--skdr-red);
}

/* OBIT: the bar turns black and so would its red equaliser; it follows the bar's white text
 * instead (client, 19 Oct: "in obit the icon disappears"). */
body.skdr-obit .skdr-song-card--now .skdr-song-card__np .skdr-eq span {
	background: var(--skdr-on-yel);
}

/* Coming up (ShowPage3): Ink headline, times and empty-state heading; the headline's day and time
 * in red; Gray episode titles and notes; the tiles' white (Dark Red on a special's yellow); the
 * arrows Ink; Dark Red links */
.skdr-coming .skdr-coming-bd__h,
.skdr-coming .skdr-coming-time,
.skdr-coming .skdr-coming-empty__h {
	color: var(--skdr-c-heading);
}

.skdr-coming .skdr-coming-bd__em {
	color: var(--skdr-c-label-now);
}

/* The visitor's own time after the headline's (timezone.js): quieter and smaller */
.skdr-coming .skdr-coming-bd__h .skdr-tz-local {
	font-size: 18px;
	line-height: 26px;
}

.skdr-coming .skdr-coming-ep,
.skdr-coming .skdr-coming-empty__p {
	color: var(--skdr-c-text);
}

.skdr-coming .skdr-coming-tile {
	color: var(--skdr-c-chip-fg);
}

.skdr-coming .skdr-coming-tile--sp {
	color: var(--skdr-on-yel);
}

.skdr-coming .skdr-coming-arr,
.skdr-coming .skdr-coming-arr:hover {
	color: var(--skdr-ink);
}

.skdr-coming .skdr-coming-empty__a {
	color: var(--skdr-c-link);
}

.skdr-coming .skdr-coming-empty__a:hover {
	color: var(--skdr-c-link-h);
}

/* ---------------------------------------------------------------- Partners wall (Home-Final, skdr-partners-*, BRIEF §12: no ad-blocker words in names) */

.skdr-partners {
	padding: 36px 0;
}

.skdr-partners-in {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.skdr-partners-h {
	margin: 0 0 24px;
	color: var(--skdr-c-heading);
	font-size: 28px;
	line-height: 36px;
	font-weight: 700;
}

/* Tiles at least 160px: six across on the full-width homepage (1200px), fewer in a page's
   content column or on phones (two at 390px). `.skdr-partners ul…` outranks Kreeti's content list
   styles (bullets and indents). */
.skdr-partners ul.skdr-partners-wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-partners .skdr-partners-wall > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every tile is square, as the sponsors' logos are (Kai, 19 Oct): min-height 0 stops a logo
   stretching it (an aspect-ratio box grows to fit its content otherwise). */
.skdr-partners-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 16px;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	background: #ffffff;
	text-decoration: none;
}

a.skdr-partners-tile:hover {
	border-color: var(--skdr-dark);
}

a.skdr-partners-tile:focus-visible {
	outline: 3px solid var(--skdr-dark);
	outline-offset: 2px;
}

/* The logo fills the whole tile, edge to edge, its corners rounded with the tile's. A logo that
   isn't square is shown whole (contain), never cropped. A name without a logo keeps the padding. */
.skdr-partners-logo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
}

.skdr-partners-name {
	color: #1a1a1a;
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	text-align: center;
	overflow-wrap: break-word;
}

@media (max-width: 760px) {
	.skdr-partners {
		padding: 28px 0;
	}

	.skdr-partners-in {
		padding: 0 16px;
	}

	.skdr-partners-h {
		font-size: 24px;
		line-height: 32px;
	}

	.skdr-partners ul.skdr-partners-wall {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 16px;
	}
}