/**
 * NaijaTempo Music Download – front end.
 *
 * Contents
 *   1. Variables and resets
 *   2. Track card (file layer)
 *   3. Record sleeve
 *   4. Audio preview player
 *   5. Round control buttons
 *   6. Download button
 *   7. YouTube player (audio style or video style)
 *   8. Status note
 *   9. Responsive
 *  10. Reduced motion
 *
 * Every colour is a --ntmd-* variable. PHP prints the values chosen in
 * Settings > Download Manager right after this file; the values below are
 * only the fallbacks.
 */

/* 1. Variables and resets
 * ------------------------------------------------------------------------ */

.ntmd-wrap {
	/* Buttons */
	--ntmd-primary: #00c851;
	--ntmd-primary-hover: #009f40;
	--ntmd-button-text: #fff;
	--ntmd-success: #0a9f2c;
	--ntmd-radius: 14px;

	/* Track card */
	--ntmd-paper: #0d0d0d;
	--ntmd-ink: #fff;
	--ntmd-line: #262626;

	/* Audio player (text colour is picked automatically for contrast) */
	--ntmd-accent: #000;
	--ntmd-on-accent: #fff;

	/* YouTube player */
	--ntmd-yt-bg: #0d0d0d;
	--ntmd-on-yt: #fff;
	--ntmd-watch-bg: #f03;
	--ntmd-watch-text: #fff;

	/* Status message */
	--ntmd-gateway-bg: #1a1a1a;
	--ntmd-gateway-text: #fff;

	display: grid;
	gap: 16px;
	max-width: 780px;
	margin: 28px auto;
	color: var(--ntmd-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
}

.ntmd-wrap *,
.ntmd-wrap *::before,
.ntmd-wrap *::after {
	box-sizing: border-box;
}

/* Themes style <button> and <a> heavily; start ours from a clean slate. */
.ntmd-wrap button,
.ntmd-wrap .ntmd-watch {
	margin: 0;
	border: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.ntmd-wrap [hidden] {
	display: none !important;
}

.ntmd-icon {
	display: block;
	flex: none;
}

/* 2. Track card (file layer)
 * ------------------------------------------------------------------------ */

/* Blurred cover art behind a card (--ntmd-cover is set on the card by PHP). */
.ntmd-card,
.ntmd-yt {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ntmd-card.has-blur::before,
.ntmd-yt.has-blur::before {
	content: "";
	position: absolute;
	inset: -48px;
	z-index: -1;
	background: var(--ntmd-cover) center / cover no-repeat;
	filter: blur(28px);
	opacity: 0.45;
}

.ntmd-card {
	display: grid;
	gap: 16px;
	padding: 18px;
	border: 1px solid var(--ntmd-line);
	border-radius: 24px;
	background: var(--ntmd-paper);
	color: var(--ntmd-ink);
}

.ntmd-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ntmd-details {
	flex: 1;
	min-width: 0;
}

/* Artist first, in the brand colour; the song title beneath. */
.ntmd-wrap .ntmd-artist {
	margin: 0;
	padding: 0;
	color: var(--ntmd-primary);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.ntmd-wrap .ntmd-title {
	display: -webkit-box;
	margin: 4px 0 0;
	padding: 0;
	overflow: hidden;
	color: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	opacity: 0.82;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* 3. Record sleeve
 *    The cover is the sleeve; the record peeks out, then slides out and
 *    spins while the preview plays.
 * ------------------------------------------------------------------------ */

.ntmd-sleeve {
	position: relative;
	flex: none;
	width: 92px;
	height: 92px;
	transition: margin-right 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ntmd-card.has-preview .ntmd-sleeve,
.ntmd-yt .ntmd-sleeve {
	margin-right: 14px;
}

.ntmd-card.is-playing .ntmd-sleeve,
.ntmd-yt.is-playing .ntmd-sleeve {
	margin-right: 42px;
}

.ntmd-cover {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}

.ntmd-cover-empty {
	display: grid;
	place-items: center;
	background: var(--ntmd-accent);
	color: var(--ntmd-on-accent);
}

.ntmd-cover-empty .ntmd-icon {
	width: 38px;
	height: 38px;
}

.ntmd-disc {
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background:
		conic-gradient(from 25deg, transparent 0 35deg, rgba(255, 255, 255, 0.16) 60deg, transparent 85deg 205deg, rgba(255, 255, 255, 0.16) 240deg, transparent 265deg),
		repeating-radial-gradient(circle, #1c1c1c 0 1.5px, #0b0b0b 1.5px 3px);
	translate: 16% 0;
	transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Record label, showing the cover art. */
.ntmd-disc::before {
	content: "";
	position: absolute;
	inset: 31%;
	border-radius: 50%;
	background: var(--ntmd-primary);
	background-image: var(--ntmd-cover);
	background-position: center;
	background-size: cover;
}

/* Spindle hole. */
.ntmd-disc::after {
	content: "";
	position: absolute;
	inset: 47%;
	border-radius: 50%;
	background: var(--ntmd-paper);
}

.ntmd-card.is-playing .ntmd-disc,
.ntmd-yt.is-playing .ntmd-disc {
	translate: 46% 0;
	animation: ntmd-spin 2.4s linear infinite;
}

@keyframes ntmd-spin {
	to {
		rotate: 360deg;
	}
}

/* 4. Audio preview player
 * ------------------------------------------------------------------------ */

.ntmd-player {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 12px 18px;
	padding: 18px 16px 8px 20px;
	border-radius: 18px;
	background: var(--ntmd-accent);
	/* See-through where supported, so the blurred cover shows behind the player. */
	background: color-mix(in srgb, var(--ntmd-accent) 55%, transparent);
	color: var(--ntmd-on-accent);
}

.ntmd-wave {
	position: relative;
	height: 46px;
	cursor: pointer;
	touch-action: none;
}

.ntmd-wave-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	opacity: 0.3;
}

.ntmd-wave-bars i {
	flex: 1;
	min-width: 1px;
	border-radius: 2px;
	background: currentColor;
}

/* Played part: a copy of the bars, in the brand colour, clipped to the position. */
.ntmd-wave-fill {
	color: var(--ntmd-primary);
	opacity: 1;
	clip-path: inset(0 calc(100% - var(--ntmd-pos, 0%)) 0 0);
}

.ntmd-card.is-started .ntmd-wave::after,
.ntmd-yt.is-started .ntmd-wave::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ntmd-pos, 0%);
	width: 2px;
	margin-left: -1px;
	border-radius: 2px;
	background: currentColor;
}

.ntmd-times {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	opacity: 0.7;
}

/* Tools under the waveform: skip, speed, repeat, mute. */
.ntmd-tools {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -8px 0 -12px;
	padding-top: 6px;
	border-top: 1px solid rgba(128, 128, 128, 0.28);
}

.ntmd-wrap .ntmd-speed {
	width: auto;
	min-width: 52px;
	padding: 0 10px;
	border-radius: var(--ntmd-radius);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
}

.ntmd-wrap .ntmd-speed.is-changed {
	background: var(--ntmd-primary);
	color: var(--ntmd-button-text);
}

/* While playing, the bars move like a level meter. */
.is-playing .ntmd-wave-bars i {
	animation: ntmd-dance 0.7s ease-in-out infinite alternate;
}

.is-playing .ntmd-wave-bars i:nth-child(3n) {
	animation-delay: -0.25s;
}

.is-playing .ntmd-wave-bars i:nth-child(4n + 1) {
	animation-delay: -0.5s;
}

.is-playing .ntmd-wave-bars i:nth-child(5n + 2) {
	animation-duration: 0.5s;
}

@keyframes ntmd-dance {
	to {
		transform: scaleY(0.5);
	}
}

/* 5. Round control buttons
 * ------------------------------------------------------------------------ */

.ntmd-wrap .ntmd-ctl {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.15s;
}

.ntmd-wrap .ntmd-ctl:hover {
	background: rgba(128, 128, 128, 0.28);
}

.ntmd-wrap .ntmd-ctl:active {
	transform: scale(0.94);
}

.ntmd-wrap .ntmd-ctl:disabled {
	opacity: 0.4;
	cursor: default;
}

.ntmd-wrap .ntmd-ctl[aria-pressed="true"] {
	background: var(--ntmd-primary);
	color: var(--ntmd-button-text);
}

.ntmd-wrap .ntmd-ctl-main {
	width: 52px;
	height: 52px;
	background: var(--ntmd-primary);
	color: var(--ntmd-button-text);
}

.ntmd-wrap .ntmd-ctl-main:hover {
	background: var(--ntmd-primary-hover);
}

/* Progress ring: the play button fills round as the track plays. */
.ntmd-wrap .ntmd-ctl-main {
	position: relative;
}

.ntmd-ctl-main::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: conic-gradient(var(--ntmd-primary) var(--ntmd-pos, 0%), rgba(128, 128, 128, 0.4) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	pointer-events: none;
}

/* A soft pulse behind the button while sound is playing. */
.ntmd-ctl-main.is-playing {
	animation: ntmd-pulse 1.2s ease-out infinite;
}

@keyframes ntmd-pulse {
	from {
		box-shadow: 0 0 0 7px color-mix(in srgb, var(--ntmd-primary) 45%, transparent);
	}

	to {
		box-shadow: 0 0 0 22px transparent;
	}
}

.ntmd-ctl-main .ntmd-icon {
	width: 26px;
	height: 26px;
}

/* Icon pairs: only one of the two shows at a time. */
.ntmd-ctl-main .ntmd-icon-pause,
.ntmd-ctl-main.is-playing .ntmd-icon-play,
.ntmd-mute .ntmd-icon-mute,
.ntmd-mute[aria-pressed="true"] .ntmd-icon-volume {
	display: none;
}

.ntmd-ctl-main.is-playing .ntmd-icon-pause,
.ntmd-mute[aria-pressed="true"] .ntmd-icon-mute {
	display: block;
}

.ntmd-wrap .ntmd-mute[aria-pressed="true"] {
	background: transparent;
	color: inherit;
}

.ntmd-wrap .ntmd-ctl:focus-visible,
.ntmd-wave:focus-visible,
.ntmd-yt-seek:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* 6. Download button
 *    Icon, label, and a stub on the right with the file type and size.
 *    While preparing, the button itself fills up as the countdown runs.
 * ------------------------------------------------------------------------ */

.ntmd-wrap .ntmd-download,
.ntmd-wrap .ntmd-watch {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 68px;
	padding: 8px 20px 8px 8px;
	overflow: hidden;
	border-radius: var(--ntmd-radius);
	background: var(--ntmd-primary);
	color: var(--ntmd-button-text);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.15s;
}

.ntmd-wrap .ntmd-download:hover {
	background: var(--ntmd-primary-hover);
}

.ntmd-wrap .ntmd-download:active,
.ntmd-wrap .ntmd-watch:active {
	transform: scale(0.99);
}

.ntmd-wrap .ntmd-download:focus-visible,
.ntmd-wrap .ntmd-watch:focus-visible {
	outline: 3px solid var(--ntmd-primary);
	outline-offset: 3px;
}

/* Icon tile: colours swapped so it stands out from the button. */
.ntmd-dl-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: max(8px, calc(var(--ntmd-radius) - 8px));
	background: var(--ntmd-button-text);
	color: var(--ntmd-primary);
}

.ntmd-dl-icon .ntmd-icon {
	width: 28px;
	height: 28px;
	transition: transform 0.2s;
}

.ntmd-download:hover .ntmd-icon-download {
	transform: translateY(2px);
}

.ntmd-dl-count {
	display: none;
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

.ntmd-dl-text {
	flex: 1;
	min-width: 0;
}

.ntmd-dl-text strong {
	display: block;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.15;
}

.ntmd-dl-text small {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.25;
	opacity: 0.86;
}

/* Tear-off stub. */
.ntmd-dl-chip {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	align-self: stretch;
	justify-content: center;
	padding-left: 18px;
	background: linear-gradient(to bottom, currentColor 55%, transparent 0) left top / 2px 9px repeat-y;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.ntmd-dl-chip b {
	font-size: 15px;
	font-weight: 800;
}

/* Progress fill, driven by --ntmd-dl (0 to 1) from JavaScript. */
.ntmd-dl-fill {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: calc(var(--ntmd-dl, 0) * 100%);
	background-color: var(--ntmd-primary-hover);
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 10px, transparent 10px 20px);
	background-size: 28.28px 100%;
}

/* States: is-busy (countdown), is-ready (waiting for a tap), is-done, is-error. */
.ntmd-wrap .ntmd-download.is-busy {
	background: var(--ntmd-primary);
	cursor: progress;
}

.ntmd-download.is-busy .ntmd-dl-fill {
	animation: ntmd-stripes 0.9s linear infinite;
}

.ntmd-download.is-busy .ntmd-dl-count {
	display: block;
}

.ntmd-download .ntmd-icon-check,
.ntmd-download.is-busy .ntmd-icon,
.ntmd-download.is-done .ntmd-icon-download,
.ntmd-download.is-done .ntmd-icon-zip {
	display: none;
}

.ntmd-download.is-done .ntmd-icon-check {
	display: block;
}

.ntmd-wrap .ntmd-download.is-done {
	background: var(--ntmd-success);
}

.ntmd-download.is-done .ntmd-dl-icon {
	color: var(--ntmd-success);
}

.ntmd-download.is-ready .ntmd-dl-icon {
	animation: ntmd-nudge 1.1s ease-in-out infinite;
}

@keyframes ntmd-stripes {
	to {
		background-position: 28.28px 0;
	}
}

@keyframes ntmd-nudge {
	50% {
		transform: scale(1.08);
	}
}

/* 7. YouTube player
 * ------------------------------------------------------------------------ */

.ntmd-yt {
	/* The record's spindle hole shows the colour behind it. */
	--ntmd-paper: var(--ntmd-yt-bg);

	display: grid;
	gap: 14px;
	padding: 18px;
	border-radius: 24px;
	background: var(--ntmd-yt-bg);
	color: var(--ntmd-on-yt);
}

.ntmd-yt-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ntmd-yt-head strong {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
}

.ntmd-yt-head > span {
	margin-left: auto;
	font-size: 12.5px;
	opacity: 0.6;
	white-space: nowrap;
}

/* The video stays visible while it plays, inside this 16:9 stage. */
.ntmd-yt-stage {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
	background: #000;
}

.ntmd-yt-frame,
.ntmd-yt-frame iframe,
.ntmd-wrap .ntmd-yt-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ntmd-wrap .ntmd-yt-poster {
	display: block;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
	background: #000;
	color: #fff;
	cursor: pointer;
}

.ntmd-yt.is-started .ntmd-yt-poster {
	display: none;
}

.ntmd-yt-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.78;
	transition: opacity 0.25s, transform 0.5s;
}

.ntmd-yt-poster:hover img {
	opacity: 0.9;
	transform: scale(1.03);
}

/* Scrim so the title stays readable on any artwork. */
.ntmd-yt-poster::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.ntmd-yt-poster-play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	border-radius: 50%;
	background: var(--ntmd-primary);
	color: var(--ntmd-button-text);
	transition: transform 0.2s;
}

.ntmd-yt-poster:hover .ntmd-yt-poster-play {
	transform: scale(1.08);
}

.ntmd-yt-poster-play .ntmd-icon {
	width: 36px;
	height: 36px;
}

.ntmd-yt.is-loading .ntmd-yt-poster-play {
	animation: ntmd-nudge 0.9s ease-in-out infinite;
}

.ntmd-yt-poster-title {
	position: absolute;
	right: 18px;
	bottom: 14px;
	left: 18px;
	z-index: 1;
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Transport: buttons, time, seek bar, time, repeat. */
.ntmd-yt-transport {
	display: grid;
	grid-template-areas: "buttons current seek duration repeat";
	grid-template-columns: auto auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ntmd-yt-buttons {
	grid-area: buttons;
	display: flex;
	align-items: center;
	gap: 12px;
}

.ntmd-yt-current {
	grid-area: current;
}

.ntmd-yt-duration {
	grid-area: duration;
}

.ntmd-yt-repeat {
	grid-area: repeat;
}

.ntmd-yt-current,
.ntmd-yt-duration {
	opacity: 0.7;
}

.ntmd-yt-seek {
	grid-area: seek;
}

.ntmd-yt-line {
	position: relative;
	height: 24px;
	cursor: pointer;
	touch-action: none;
}

/* Track and played part. */
.ntmd-yt-line::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 5px;
	background: linear-gradient(to right, var(--ntmd-primary) var(--ntmd-pos, 0%), rgba(128, 128, 128, 0.45) var(--ntmd-pos, 0%));
}

/* Thumb. */
.ntmd-yt-line::after {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--ntmd-pos, 0%);
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: currentColor;
}

/* Audio style: the video keeps playing off-screen, only its sound is used. */
.ntmd-yt--audio {
	position: relative;
}

.ntmd-yt--audio .ntmd-yt-stage {
	position: absolute;
	top: 0;
	left: -9999px;
	width: 320px;
	height: 180px;
	aspect-ratio: auto;
	opacity: 0.01;
	pointer-events: none;
}

/* ...until "Show video" is pressed, or the video has to be tapped to start. */
.ntmd-yt--audio.is-video .ntmd-yt-stage,
.ntmd-yt--audio.is-basic .ntmd-yt-stage {
	position: relative;
	left: 0;
	width: auto;
	height: auto;
	aspect-ratio: 16 / 9;
	opacity: 1;
	pointer-events: auto;
}

.ntmd-yt--audio.is-basic .ntmd-head,
.ntmd-yt--audio.is-basic .ntmd-yt-view {
	display: none;
}

/* "Show video" / "Hide video" switch in the header. */
.ntmd-wrap .ntmd-yt-view {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	margin-left: auto;
	padding: 0 12px 0 10px;
	border: 1px solid rgba(128, 128, 128, 0.55);
	border-radius: var(--ntmd-radius);
	background: transparent;
	color: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.ntmd-wrap .ntmd-yt-view:hover {
	background: rgba(128, 128, 128, 0.28);
}

.ntmd-wrap .ntmd-yt-view[aria-pressed="true"] {
	border-color: var(--ntmd-primary);
	background: var(--ntmd-primary);
	color: var(--ntmd-button-text);
}

.ntmd-wrap .ntmd-yt-view:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ntmd-yt-view .ntmd-icon {
	width: 18px;
	height: 18px;
}

/* "Tap the video" message sits right above the video it talks about. */
.ntmd-yt.is-tap .ntmd-note {
	order: -1;
}

/* Loading or buffering: a ring turns around the play button. */
.ntmd-wrap .ntmd-yt-play {
	position: relative;
}

.ntmd-yt.is-loading .ntmd-yt-play::after {
	content: "";
	position: absolute;
	inset: -7px;
	border: 3px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	color: var(--ntmd-on-yt);
	animation: ntmd-spin 0.8s linear infinite;
}

/* The API could not load: the plain YouTube player is shown with its own controls. */
.ntmd-yt.is-basic .ntmd-yt-transport {
	display: none;
}

.ntmd-yt-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 12px;
}

.ntmd-wrap .ntmd-watch {
	background: var(--ntmd-watch-bg);
	color: var(--ntmd-watch-text);
	transition: filter 0.2s, transform 0.15s;
}

.ntmd-wrap .ntmd-watch:hover {
	color: var(--ntmd-watch-text);
	filter: brightness(0.88);
}

.ntmd-watch .ntmd-dl-icon {
	background: var(--ntmd-watch-text);
	color: var(--ntmd-watch-bg);
}

.ntmd-wrap .ntmd-yt .ntmd-download:focus-visible,
.ntmd-wrap .ntmd-watch:focus-visible {
	outline-color: currentColor;
}

/* 8. Status note
 * ------------------------------------------------------------------------ */

.ntmd-wrap .ntmd-note {
	margin: 0;
	padding: 10px 14px;
	border: 1px solid rgba(128, 128, 128, 0.3);
	border-radius: 12px;
	background: var(--ntmd-gateway-bg);
	color: var(--ntmd-gateway-text);
	font-size: 13px;
	line-height: 1.4;
}

/* 9. Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 560px) {
	.ntmd-wrap {
		gap: 12px;
		margin: 20px auto;
	}

	.ntmd-card,
	.ntmd-yt {
		gap: 12px;
		padding: 12px;
		border-radius: 20px;
	}

	.ntmd-sleeve {
		width: 72px;
		height: 72px;
	}

	.ntmd-card.has-preview .ntmd-sleeve,
.ntmd-yt .ntmd-sleeve {
		margin-right: 11px;
	}

	.ntmd-card.is-playing .ntmd-sleeve,
.ntmd-yt.is-playing .ntmd-sleeve {
		margin-right: 33px;
	}

	.ntmd-wrap .ntmd-artist {
		font-size: 18px;
	}

	.ntmd-wrap .ntmd-title {
		font-size: 14px;
	}

	.ntmd-player {
		gap: 10px 16px;
		padding: 16px 12px 6px 18px;
	}

	/* Finger-sized targets. */
	.ntmd-wrap .ntmd-ctl {
		width: 44px;
		height: 44px;
	}

	.ntmd-wrap .ntmd-ctl-main {
		width: 52px;
		height: 52px;
	}

	.ntmd-wrap .ntmd-yt-view {
		min-height: 40px;
	}

	.ntmd-yt-head {
		align-items: center;
	}

	.ntmd-wrap .ntmd-download,
	.ntmd-wrap .ntmd-watch {
		gap: 11px;
		min-height: 62px;
		padding: 7px 16px 7px 7px;
	}

	.ntmd-dl-icon {
		width: 48px;
		height: 48px;
	}

	.ntmd-dl-text strong {
		font-size: 15px;
	}

	.ntmd-dl-text small {
		font-size: 11.5px;
	}

	.ntmd-dl-chip {
		padding-left: 13px;
		font-size: 11px;
	}

	.ntmd-dl-chip b {
		font-size: 13px;
	}

	.ntmd-yt-head strong {
		font-size: 15px;
	}

	/* Seek bar on its own row, buttons centred beneath it. */
	.ntmd-yt-transport {
		grid-template-areas:
			"current seek duration"
			"spacer buttons repeat";
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 4px 10px;
	}

	.ntmd-yt-buttons {
		justify-content: center;
		gap: 14px;
	}

	.ntmd-yt-duration {
		text-align: right;
	}

	.ntmd-yt-poster-play {
		width: 62px;
		height: 62px;
		margin: -31px 0 0 -31px;
	}

	.ntmd-yt-poster-title {
		font-size: 14px;
	}
}

/* 10. Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ntmd-wrap *,
	.ntmd-wrap *::before,
	.ntmd-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}