/*
 * Astro playlist-player CSS — verbatim port of
 * ~/boswell-poc/src/components/PlaylistPlayer.astro <style> block (L160-256).
 *
 * Owned by the bozzies/playlist-player block. All selectors are Astro's
 * exact class names.
 *
 * Documented edits: none. `.pp__track` is a <button> where global.css
 * has no dark-a rule; `.pp__btn`'s color/background/border rules are
 * class-level (0-1-0) which beat WP's core button reset.
 */

.pp {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(var(--space-5), 3vw, var(--space-7));
	max-width: var(--measure-max);
	margin-inline: auto;
	background: color-mix(in oklab, var(--paper) 96%, var(--purple) 4%);
	border: 1px solid var(--paper-hairline);
	padding: clamp(var(--space-5), 2.4vw, var(--space-7));
}
@media (max-width: 820px) { .pp { grid-template-columns: 1fr; } }

.pp__player { display: flex; flex-direction: column; gap: var(--space-4); }

.pp__now { display: flex; flex-direction: column; gap: var(--space-1); }
.pp__now-eyebrow {
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--step--2);
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--purple);
}
.pp__now-title {
	font-family: var(--font-display);
	font-size: clamp(var(--step-3), 2vw + 0.3rem, var(--step-4));
	line-height: 1.1;
	color: var(--ink);
}
.pp__now-meta {
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: var(--text-on-paper-muted);
}

.pp__controls { display: flex; align-items: center; gap: var(--space-4); }
.pp__btn {
	width: 44px; height: 44px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid var(--purple);
	color: var(--purple);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; cursor: pointer;
	transition: background var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart);
}
.pp__btn:hover { background: var(--purple); color: var(--paper); }
/* `:focus-visible` draws an ink ring with 3 px offset so the ring sits on
 * the paper ground even when the button fill flips to purple. Purple
 * outline on a purple fill would fall below WCAG 1.4.11's 3:1 minimum;
 * ink on paper is ~15:1 and ink next to a purple fill is still ≥ 3:1.
 * The hover state keeps its own colour change for mouse users.
 * (WCAG 2.4.7 Focus Visible.) */
.pp__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pp__btn--play { width: 56px; height: 56px; background: var(--purple); color: var(--paper); }
.pp__btn--play:hover { background: var(--oxblood); border-color: var(--oxblood); }
.pp__btn--play:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.pp__progress-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); }
.pp__time { font-family: var(--font-ui); font-size: var(--step--1); color: var(--text-on-paper-muted); font-variant-numeric: tabular-nums; }
.pp__progress { position: relative; height: 6px; background: color-mix(in oklab, var(--paper) 85%, var(--purple) 15%); cursor: pointer; }
/* Ink outline here too — the pale purple-mixed background is close to the
 * `--purple` token so a purple ring would blend; ink gives 15:1. */
.pp__progress:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pp__progress-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--purple); transition: width 120ms linear; }

.pp__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	max-height: 14rem;    /* ≈ 3 tracks visible */
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--purple) transparent;
}
.pp__list::-webkit-scrollbar { width: 6px; }
.pp__list::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }
.pp__track {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: var(--space-3);
	align-items: center;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--paper-hairline);
	padding: var(--space-3) var(--space-4);
	text-align: left;
	cursor: pointer;
	color: var(--ink);
	transition: background var(--dur) var(--ease-out-quart);
}
.pp__track:last-child { border-bottom: 0; }
.pp__track:hover { background: color-mix(in oklab, var(--purple) 6%, transparent); }
/* Inset outline on the track button: the row is full-width inside the
 * scrollable list, so an outer outline would clip against the neighbour.
 * `outline-offset: -3px` pulls the ring inside the row by 3 px, keeping
 * the ink stroke on the paper-tinted background (≥ 15:1 contrast).
 * (WCAG 2.4.7.) */
.pp__track:focus-visible { background: color-mix(in oklab, var(--purple) 6%, transparent); outline: 2px solid var(--ink); outline-offset: -3px; }
.pp__track[aria-current='true'] { background: color-mix(in oklab, var(--purple) 10%, transparent); }
.pp__track-index { font-family: var(--font-ui); font-weight: 500; font-size: var(--step--1); color: var(--purple); font-feature-settings: 'tnum'; min-width: 2ch; }
.pp__track-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp__track-title { font-family: var(--font-body); font-weight: 500; font-size: var(--step-0); }
.pp__track-meta { font-family: var(--font-ui); font-size: var(--step--2); color: var(--text-on-paper-muted); }
.pp__track-duration { font-family: var(--font-ui); font-size: var(--step--1); color: var(--text-on-paper-muted); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.pp__track-icon { color: var(--purple); opacity: 0; transition: opacity var(--dur) var(--ease-out-quart); }
.pp__track:hover .pp__track-icon,
.pp__track[aria-current='true'] .pp__track-icon { opacity: 1; }