/* Sensorial Player — matches the Sensorial theme (uses its accent colour and fonts when present). */
.sp {
	--sp-accent: var(--s-accent, #ff4d2e);
	--sp-accent-ink: var(--s-accent-ink, #fff);
	--sp-played: var(--sp-accent);
	--sp-idle: #6e6e6e;
	--sp-hover: color-mix(in srgb, var(--sp-accent) 55%, #ffffff);
	--sp-bg: #111;
	--sp-panel: #1c1c1c;
	--sp-line: #333;
	--sp-text: #fff;
	--sp-muted: #9a9a9a;
	--sp-mono: var(--s-mono, "Space Mono", ui-monospace, Menlo, Consolas, monospace);
	--sp-display: var(--s-display, "Anton", Impact, "Arial Narrow Bold", sans-serif);
	--sp-art: 152px;

	position: relative;
	display: grid;
	grid-template-columns: var(--sp-art) minmax(0, 1fr);
	grid-template-areas: "art main";
	gap: 16px;
	margin: 24px 0;
	padding: 14px;
	background: var(--sp-bg);
	color: var(--sp-text);
	font-family: var(--sp-mono);
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	border-top: 3px solid var(--sp-accent);
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp button {
	font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.sp svg { width: 18px; height: 18px; display: block; flex: none; }
.sp :focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* Artwork */
.sp__art {
	grid-area: art; display: block; aspect-ratio: 1; width: 100%; background: var(--sp-panel);
	overflow: hidden; align-self: start;
}
.sp__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sp__main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Header: play button, artist + title, SoundCloud credit */
.sp__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sp__play {
	position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%;
	background: var(--sp-accent) !important; color: var(--sp-accent-ink) !important;
	transition: transform .15s ease, filter .15s ease;
}
.sp__play:hover { filter: brightness(1.08); transform: scale(1.04); }
.sp__play svg { width: 24px; height: 24px; }
.sp__play .sp__i-play { margin-left: 3px; }
.sp .sp__i-pause, .sp.sp--playing .sp__i-play { display: none; }
.sp.sp--playing .sp__i-pause { display: block; }
.sp__spinner {
	position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent;
	border-top-color: var(--sp-accent); opacity: 0; pointer-events: none;
}
.sp--waiting .sp__spinner { opacity: 1; animation: sp-spin .8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp__meta { min-width: 0; flex: 1; }
.sp .sp__artist {
	display: inline-block; max-width: 100%; color: var(--sp-muted); text-decoration: none;
	font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp .sp__artist:hover { color: var(--sp-text); }
.sp__title {
	font-family: var(--sp-display); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.02;
	text-transform: uppercase; margin-top: 2px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	overflow-wrap: anywhere;
}
.sp .sp__brand {
	flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
	color: var(--sp-muted); text-decoration: none; font-size: 11px; text-transform: uppercase;
}
.sp .sp__brand:hover { color: #ff5500; }
.sp .sp__brand svg { width: 26px; height: 12px; }

/* Waveform */
.sp__wave {
	position: relative; height: 84px; cursor: pointer; touch-action: none; user-select: none;
	-webkit-user-select: none;
}
.sp__wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp__cursor {
	position: absolute; top: 0; bottom: 30%; width: 1px; margin-left: -.5px;
	background: var(--sp-text); opacity: 0; pointer-events: none;
}
.sp--playing .sp__cursor, .sp__wave:focus-visible .sp__cursor { opacity: .7; }
.sp__cur, .sp__dur {
	position: absolute; bottom: calc(30% + 2px); padding: 1px 4px; font-size: 11px; line-height: 1.3;
	background: rgba(0, 0, 0, .78); pointer-events: none;
}
.sp__cur { left: 0; color: var(--sp-accent); }
.sp__dur { right: 0; color: var(--sp-muted); }
.sp__tip {
	position: absolute; top: -26px; transform: translateX(-50%); padding: 2px 6px; font-size: 11px;
	background: var(--sp-text); color: #000; white-space: nowrap; pointer-events: none; opacity: 0;
	transition: opacity .1s;
}
.sp--tip .sp__tip { opacity: 1; }

/* Control row */
.sp__controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp__btn {
	min-width: 40px; height: 40px; padding: 0 8px !important; gap: 3px; border: 1px solid var(--sp-line) !important;
	color: var(--sp-text); font-size: 11px !important;
}
.sp__btn:hover { border-color: var(--sp-accent) !important; color: var(--sp-accent); }
.sp__time { margin-left: 8px; font-size: 12px; color: var(--sp-muted); white-space: nowrap; }
.sp__time-cur { color: var(--sp-text); }
.sp__vol { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.sp .sp__i-muted, .sp.sp--muted .sp__i-vol { display: none; }
.sp.sp--muted .sp__i-muted { display: block; }
.sp__range { width: 96px; accent-color: var(--sp-accent); cursor: pointer; }

/* Invisible SoundCloud engine (must stay in the page for audio to play). */
.sp__engine {
	position: absolute; left: 0; bottom: 0; width: 2px; height: 2px; overflow: hidden;
	opacity: .01; pointer-events: none;
}
.sp__engine iframe { width: 2px; height: 2px; border: 0; }

/* Fallback: SoundCloud's own player, when a browser won't let the page start it. */
.sp__fallback { grid-column: 1 / -1; }
.sp__fallback[hidden] { display: none; }
.sp__fallback-msg { margin: 0 0 8px; font-size: 12px; color: var(--sp-muted); }
.sp__fallback iframe { display: block; width: 100%; height: 166px; border: 0; }
.sp--fallback .sp__wave, .sp--fallback .sp__controls, .sp--fallback .sp__play { display: none; }
.sp__noscript { display: block; width: 100%; border: 0; grid-column: 1 / -1; }

/* Phones: small artwork beside the title, waveform and controls full width. */
@media (max-width: 600px) {
	.sp {
		--sp-art: 64px;
		grid-template-columns: var(--sp-art) minmax(0, 1fr);
		grid-template-areas: "art head" "wave wave" "controls controls";
		gap: 12px;
		padding: 12px;
	}
	.sp__main { display: contents; }
	.sp__head { grid-area: head; gap: 10px; }
	.sp__wave { grid-area: wave; height: 70px; }
	.sp__controls { grid-area: controls; }
	.sp__play { width: 48px; height: 48px; }
	.sp__title { font-size: 20px; }
	.sp .sp__brand span { display: none; }
	/* Phones: volume is on the phone's own buttons; keeps the controls on one row. */
	.sp__vol { display: none; }
	.sp__controls { flex-wrap: nowrap; }
	.sp__time { margin-left: auto; }
}
/* Touch screens: phones/tablets set volume with their buttons, so hide the slider; bigger targets. */
@media (pointer: coarse) {
	.sp__range { display: none; }
	.sp__btn { min-width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.sp--waiting .sp__spinner { animation: none; }
	.sp__play { transition: none; }
}

/* Inside the Sensorial theme's media area (single show / session pages). */
.single-media .embed-audio .sp { margin: 0; }