/* SoundDeck player — compact card + full playlist */

.sd-player {
	--sd-accent: #e0622f;
	--sd-accent-2: #e87d46;
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	overflow: hidden;
	border-radius: 12px;
	color: #fff;
	font: 400 16px/1.4 "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
	box-shadow: 0 10px 30px rgba(15, 18, 40, .14);
	-webkit-tap-highlight-color: transparent;
}
.sd-player *,
.sd-player *::before,
.sd-player *::after { box-sizing: border-box; }
.sd-player svg { display: block; flex: none; width: 1em; height: 1em; fill: currentColor; }

/* No tap flash on touch devices; no text selection while tapping controls */
.sd-player,
.sd-player * { -webkit-tap-highlight-color: transparent; }
.sd-player button.sd-btn,
.sd-player li.sd-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* Play/pause and repeat icons are both in the DOM; CSS swaps them (no re-render, no flicker) */
.sd-player .sd-i-pause { display: none; }
.sd-player.sd-is-playing .sd-i-play { display: none; }
.sd-player.sd-is-playing .sd-i-pause { display: block; }
.sd-player .sd-i-r1 { display: none; }
.sd-player .sd-repeat[data-mode="2"] .sd-i-r0 { display: none; }
.sd-player .sd-repeat[data-mode="2"] .sd-i-r1 { display: block; }

/* Artwork layers: new image cross-fades in over the old one once it has loaded */
.sd-player .sd-art-wrap { position: absolute; inset: 0; overflow: hidden; }
.sd-player .sd-art { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .4s ease; }
.sd-player .sd-art--in { opacity: 1; }

/* ---------- Buttons (hardened against theme button styles) ---------- */
.sd-player button.sd-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	transition: opacity .15s, transform .15s;
}
.sd-player button.sd-btn:focus-visible,
.sd-player .sd-progress:focus-visible,
.sd-player li.sd-row:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sd-player button.sd-ico {
	position: relative;
	padding: 4px;
	margin: -4px;
	background: none;
	font-size: 20px;
	opacity: .78;
}
.sd-player button.sd-ico:hover,
.sd-player button.sd-ico.sd-on { opacity: 1; background: none; }
.sd-player button.sd-ico.sd-on::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: currentColor;
}

.sd-player button.sd-play {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--sd-accent);
	font-size: 22px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.sd-player button.sd-play:hover { transform: scale(1.06); background: #fff; color: var(--sd-accent); }

/* ---------- Progress ---------- */
.sd-player .sd-progress {
	position: relative;
	display: flex;
	align-items: center;
	height: 16px;
	cursor: pointer;
	touch-action: pan-y;
	outline: none;
}
.sd-player .sd-progress__bar {
	position: relative;
	width: 100%;
	height: 4px;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(255, 255, 255, .35);
}
.sd-player .sd-progress__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 4px;
	background: #fff;
	transition: width .25s linear;
}
.sd-player.sd-seeking .sd-progress__fill { transition: none; }

/* ---------- Placeholder artwork ---------- */
.sd-player svg.sd-note { display: none; width: 44px; height: 44px; color: #fff; opacity: .55; }
.sd-player .sd-nocover > svg.sd-note { display: block; }

/* ---------- Track rows (shared) ---------- */
.sd-player ol.sd-list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sd-player ol.sd-list li.sd-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 11px 22px;
	list-style: none;
	cursor: pointer;
	outline: none;
	transition: background .15s, color .15s;
}
.sd-player li.sd-row::before,
.sd-player li.sd-row::marker { content: none; }
.sd-player .sd-row__icon { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 14px; height: 14px; }
.sd-player .sd-row__icon svg.sd-tri { width: 11px; height: 11px; }
.sd-player .sd-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; font-style: normal; }
.sd-player .sd-eq b { display: block; width: 3px; height: 40%; border-radius: 1px; background: currentColor; animation: sd-eq .9s ease-in-out infinite; }
.sd-player .sd-eq b:nth-child(2) { animation-delay: -.4s; }
.sd-player .sd-eq b:nth-child(3) { animation-delay: -.7s; }
.sd-player.sd-is-playing li.sd-row.sd-active svg.sd-tri { display: none; }
.sd-player.sd-is-playing li.sd-row.sd-active .sd-eq { display: flex; }
@keyframes sd-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
	.sd-player .sd-eq b { height: 70%; animation: none; }
	.sd-player .sd-progress__fill,
	.sd-player .sd-art { transition: none; }
}
.sd-player .sd-row__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-player .sd-row__artist { margin-left: 8px; font-size: .85em; opacity: .65; }
.sd-player .sd-row__dur { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; opacity: .75; }

/* =====================================================================
 * COMPACT — orange card
 * =================================================================== */
.sd-player.sd-compact { background: linear-gradient(100deg, var(--sd-accent), var(--sd-accent-2)); }
.sd-compact .sd-card { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.sd-compact .sd-cover {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 148px;
	background: rgba(0, 0, 0, .16) center / cover no-repeat;
}
.sd-compact .sd-main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
	min-width: 0;
	padding: 18px 24px 16px;
}
.sd-compact .sd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sd-compact .sd-meta { min-width: 0; }
.sd-compact .sd-title { overflow: hidden; font-size: 26px; font-weight: 600; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.sd-compact .sd-artist { margin-top: 6px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.sd-compact .sd-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sd-compact .sd-time { font-size: 15px; font-variant-numeric: tabular-nums; opacity: .95; }
.sd-compact .sd-ctrls { display: flex; align-items: center; gap: 22px; }

.sd-compact ol.sd-list {
	grid-column: 1 / -1;
	max-height: 0;
	overflow: hidden;
	background: rgba(0, 0, 0, .16);
	transition: max-height .3s ease;
}
.sd-compact.sd-list-open ol.sd-list { max-height: 280px; overflow-y: auto; }
.sd-compact li.sd-row:hover { background: rgba(255, 255, 255, .1); }
.sd-compact li.sd-row.sd-active { background: rgba(255, 255, 255, .2); font-weight: 600; }

.sd-compact.sd-xs .sd-cover { width: 92px; }
.sd-compact.sd-xs .sd-main { gap: 10px; padding: 14px 16px 12px; }
.sd-compact.sd-xs .sd-title { font-size: 19px; }
.sd-compact.sd-xs .sd-artist { margin-top: 3px; font-size: 13px; }
.sd-compact.sd-xs .sd-ctrls { gap: 14px; }
.sd-compact.sd-xs .sd-time { font-size: 13px; }
.sd-compact.sd-xs button.sd-play { width: 40px; height: 40px; font-size: 19px; }
.sd-compact.sd-xs ol.sd-list li.sd-row { padding: 10px 16px; }

/* =====================================================================
 * FULL — dark playlist
 * =================================================================== */
.sd-player.sd-full { background: #14151f; }
.sd-full .sd-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 440px; }

.sd-full .sd-hero {
	position: relative;
	overflow: hidden;
	background: var(--sd-accent) center / cover no-repeat;
}
.sd-full .sd-hero.sd-nocover { background: linear-gradient(135deg, var(--sd-accent), var(--sd-accent-2)); }
.sd-full .sd-hero.sd-nocover > svg.sd-note { position: absolute; top: 34%; left: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%); }
.sd-full .sd-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .5) 100%); }
.sd-full .sd-hero__title {
	position: absolute;
	right: 6%;
	bottom: 12%;
	left: 9%;
	line-height: .96;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
	text-transform: uppercase;
}
.sd-full .sd-hero__title .sd-light { display: block; font-size: clamp(28px, 5vw, 56px); font-weight: 300; letter-spacing: .01em; }
.sd-full .sd-hero__title .sd-bold { display: block; font-size: clamp(34px, 6.2vw, 70px); font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }

.sd-full .sd-side { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #1c1e2e; }
.sd-full .sd-side__bg { position: absolute; inset: 0; overflow: hidden; filter: grayscale(.3) blur(1px); opacity: .09; }
.sd-full ol.sd-list { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 18px; overflow-y: auto; }
.sd-full ol.sd-list li.sd-row { padding: 13px 22px; border-radius: 999px; color: rgba(255, 255, 255, .58); font-size: 15px; }
.sd-full li.sd-row:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sd-full li.sd-row.sd-active { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.sd-full .sd-row__icon { color: var(--sd-accent); }
.sd-full .sd-row__artist { display: none; }

.sd-full .sd-bar {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 18px 28px;
	background: #14151f;
}
.sd-full .sd-progress { position: absolute; top: 0; right: 0; left: 0; height: 3px; }
.sd-full .sd-progress::after { content: ""; position: absolute; top: -8px; right: 0; bottom: -8px; left: 0; }
.sd-full .sd-progress__bar { height: 3px; border-radius: 0; background: #2f3144; }
.sd-full .sd-progress__fill { border-radius: 0; background: var(--sd-accent); }
.sd-full .sd-now { min-width: 0; }
.sd-full .sd-now__label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.sd-full .sd-title { margin-top: 3px; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sd-full .sd-ctrls { display: flex; align-items: center; justify-content: center; gap: 26px; }
.sd-full button.sd-ico.sd-on { color: var(--sd-accent); }
.sd-full button.sd-play { width: 46px; height: 46px; background: var(--sd-accent); color: #fff; font-size: 20px; box-shadow: none; }
.sd-full button.sd-play:hover { background: var(--sd-accent); color: #fff; }
.sd-full .sd-time { justify-self: end; font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .5); white-space: nowrap; }
.sd-full .sd-time b { font-weight: 600; color: #fff; }

/* Narrow containers: stack the stage, two-row control bar */
.sd-full.sd-narrow .sd-stage { grid-template-columns: 1fr; grid-template-rows: 240px 300px; height: auto; }
.sd-full.sd-narrow .sd-hero__title { right: 6%; bottom: 14%; left: 7%; }
.sd-full.sd-narrow .sd-hero__title .sd-light { font-size: 28px; }
.sd-full.sd-narrow .sd-hero__title .sd-bold { font-size: 42px; }
.sd-full.sd-narrow ol.sd-list { padding: 12px; }
.sd-full.sd-narrow ol.sd-list li.sd-row { padding: 11px 18px; }
.sd-full.sd-narrow .sd-bar {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "now ctrls" "time time";
	row-gap: 8px;
	padding: 16px 18px;
}
.sd-full.sd-narrow .sd-now { grid-area: now; }
.sd-full.sd-narrow .sd-ctrls { grid-area: ctrls; gap: 14px; }
.sd-full.sd-narrow .sd-time { grid-area: time; justify-self: start; }
.sd-full.sd-xs button.sd-ico { font-size: 18px; }
.sd-full.sd-xs .sd-ctrls { gap: 11px; }

/* Tracklist off (full layout): the artwork takes the whole stage */
.sd-full.sd-no-list .sd-stage { grid-template-columns: 1fr; height: 380px; }
.sd-full.sd-narrow.sd-no-list .sd-stage { grid-template-columns: 1fr; grid-template-rows: 260px; height: auto; }