/*
 * Tracks section of the Demoscene page: the playlist card, a demo card
 * (demos.css) whose screen holds the VU meters drawn by
 * assets/js/audio-deck.js. Without the scripts its lists are download
 * links.
 */

/* The demo cards' 16:9 frame, so the deck matches the demo screens. */
.pm-playlist__screen {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin: var(--wp--preset--spacing--30) 0 0;
	border: 1px solid var(--pm-line);
	border-radius: 1.25rem / 1rem;
	background: #000;
	box-shadow: 0 0 2.5rem rgb(185 150 255 / 0.18);
}

.pm-playlist.is-playing .pm-playlist__screen {
	box-shadow: 0 0 2.5rem rgb(125 242 193 / 0.22);
}

.pm-playlist__screen canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Previous, Play and Next on one row, the slider and time below, so a
   long title wraps inside Play instead of pushing the buttons apart. */
.pm-playlist__controls {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
}

.pm-playlist__toggle {
	display: inline-flex;
	min-width: 0;
	justify-content: center;
	align-items: center;
	text-align: left;
	gap: 0.6rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--pm-violet);
	background: var(--pm-violet);
	color: var(--pm-night);
	font: inherit;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pm-playlist__toggle::before {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.8rem;
	background: currentcolor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pm-playlist.is-playing .pm-playlist__toggle::before {
	background: linear-gradient(to right, currentcolor 0 35%, transparent 35% 65%, currentcolor 65%);
	clip-path: none;
}

.pm-playlist__toggle:hover,
.pm-playlist__toggle:focus-visible {
	border-color: var(--pm-magenta);
	background: var(--pm-magenta);
}

.pm-playlist__bar {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.pm-playlist__seek {
	flex: 1;
	min-width: 0;
	margin: 0;
	accent-color: var(--pm-aurora);
	cursor: pointer;
}

.pm-playlist__seek:focus-visible {
	outline: 2px solid var(--pm-magenta);
	outline-offset: 4px;
}

.pm-playlist__time {
	color: var(--pm-haze);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The playlist takes the whole row. Once assets/js/tracks.js has added
   the deck, a wide card puts it beside the track lists, held in view
   while the lists scroll past. */
.pm-tracks > .pm-playlist {
	grid-column: 1 / -1;
}

@media (min-width: 56rem) {
	.pm-playlist.is-ready {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: var(--wp--preset--spacing--50);
		align-content: start;
	}

	.pm-playlist.is-ready > * {
		grid-column: 1 / -1;
	}

	.pm-playlist.is-ready > .pm-playlist__deck {
		position: sticky;
		top: 5rem;
		grid-column: 1;
		align-self: start;
	}

	.pm-playlist.is-ready > .pm-playlist__sets {
		grid-column: 2;
	}
}

.pm-playlist__set > .wp-block-heading {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-size: var(--wp--preset--font-size--medium);
}

.pm-playlist__set > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--20);
}

.pm-playlist__now {
	min-height: 1.5em;
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--pm-haze);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
}

.pm-playlist__list {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
}

.pm-playlist.is-ready .pm-playlist__list {
	padding: 0;
	list-style: none;
	counter-reset: track;
}

.pm-playlist.is-ready .pm-playlist__list li {
	margin: 0;
	counter-increment: track;
}

.pm-playlist__pick {
	display: flex;
	gap: 0.8rem;
	width: 100%;
	min-height: 2.75rem;
	align-items: center;
	padding: 0.35rem 0.7rem;
	border: 0;
	border-left: 2px solid transparent;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pm-playlist__pick::before {
	content: counter(track, decimal-leading-zero);
	color: var(--pm-haze);
}

/* The title takes the free width, which pushes the file type to the
   right edge. */
.pm-playlist__title {
	flex: 1;
}

.pm-playlist__type {
	padding: 0.05rem 0.4rem;
	border: 1px solid var(--pm-line);
	color: var(--pm-haze);
	font-size: 0.75em;
	letter-spacing: 0.08em;
}

.pm-playlist__pick:hover,
.pm-playlist__pick:focus-visible {
	background: rgb(185 150 255 / 0.14);
}

.pm-playlist__pick:focus-visible,
.pm-playlist__step:focus-visible {
	outline: 2px solid var(--pm-magenta);
	outline-offset: 2px;
}

.pm-playlist__pick[aria-current="true"] {
	border-left-color: var(--pm-aurora);
	background: rgb(125 242 193 / 0.08);
	color: var(--pm-aurora);
}

/* Square buttons the height of Play, drawn as skip arrows: a triangle
   against a bar, mirrored for Previous. */
.pm-playlist__step {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--pm-violet);
	background: transparent;
	color: var(--pm-violet);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pm-playlist__step::before {
	content: "";
	width: 0.85rem;
	height: 0.8rem;
	background: currentcolor;
	clip-path: polygon(0 0, 75% 50%, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% 50%, 0 100%);
}

.pm-playlist__step.is-back::before {
	transform: scaleX(-1);
}

.pm-playlist__step:hover,
.pm-playlist__step:focus-visible {
	border-color: var(--pm-magenta);
	background: var(--pm-magenta);
	color: var(--pm-night);
}

@media (prefers-reduced-motion: reduce) {
	.pm-playlist__toggle,
	.pm-playlist__step,
	.pm-playlist__pick {
		transition: none;
	}
}