/* Riff. The player follows YouTube Music's layout and measurements: a
   72px bar on a wide screen and the 2025 Now Playing on a phone. It is
   always dark. Rows in the post use the theme's own colours through
   currentcolor. Animate only transform and opacity. */

/* Roboto, shipped with the plugin (SIL Open Font License, see
   fonts/roboto/OFL.txt) rather than fetched from Google, so a listener's
   address never leaves the site. One variable file, Latin only.

   Optional, so it is never swapped in after the first paint: the app at app/
   preloads it (Riff\Listen\Fonts), which a browser waits a moment for, and
   its service worker keeps it for every launch after; elsewhere the bar is
   hidden until something plays, and the player fetches the font while the
   page is idle (riff.js). Where it still isn't there in time, the fallback
   below stands in at its size for the rest of the page's life. */
@font-face {
	font-family: "Riff Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: optional;
	src: url(fonts/roboto/roboto.woff2) format("woff2");
}

/* Arial, or the Liberation Sans that stands in for it on Linux, sized and
   spaced to Roboto's measurements, so the text does not move when Roboto
   arrives and takes its place. */
@font-face {
	font-family: "Riff Roboto Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
	size-adjust: 100.53%;
	ascent-override: 92.28%;
	descent-override: 24.28%;
	line-gap-override: 0%;
}

:root {
	/* stylelint-disable-next-line length-zero-no-unit -- calc() needs a length. */
	--riff-safe-b: env(safe-area-inset-bottom, 0px);
	/* stylelint-disable-next-line length-zero-no-unit -- calc() needs a length. */
	--riff-safe-t: env(safe-area-inset-top, 0px);

	/* and the sides, where a phone on its side or an unfolded one keeps its
	   status bar and its camera */
	/* stylelint-disable-next-line length-zero-no-unit -- calc() needs a length. */
	--riff-safe-l: env(safe-area-inset-left, 0px);
	/* stylelint-disable-next-line length-zero-no-unit -- calc() needs a length. */
	--riff-safe-r: env(safe-area-inset-right, 0px);
}

/* While Now Playing is open the page under it stays still, as in the apps:
   it does not scroll behind the dialog, and its scrollbar does not show
   beside the view's. */
html:has(#riff.is-open) {
	overflow: hidden;
}

/* Once Now Playing covers the page, the page is neither styled nor painted
   until it starts to close. */
[data-riff-covered] {
	content-visibility: hidden;
}

/* Room at the end of the page, so the bar never covers a post's last line. */
html.has-riff body::after {
	content: "";
	display: block;
	height: calc(var(--riff-bar-h) + var(--riff-safe-b));
}

/* And room above the bar when the page scrolls to something: the browser
   brings a focused link or a target into view clear of the bar rather than
   just under it (WCAG 2.4.11, focus not obscured). */
html.has-riff {
	scroll-padding-bottom: calc(var(--riff-bar-h) + var(--riff-safe-b) + 16px);
}

/* ---- Rows in the post */

.riff-track > audio[hidden],
.riff-track > video[hidden] {
	display: none !important;
}

/* A playlist block (WordPress 7.1): its own player and its track buttons step
   aside for the rows, and its item hover gives way to the row's. One class more
   than core's own rules, which a page prints after this stylesheet when the
   block renders after the head, as standalone mode's does. */
/* stylelint-disable selector-class-pattern -- core's own BEM class names. */
.wp-block-playlist.riff-tracks > .wp-block-playlist__waveform-player,
.wp-block-playlist-track.riff-track > .wp-block-playlist-track__button {
	display: none;
}
/* stylelint-enable selector-class-pattern */

.riff-tracks .wp-block-playlist-track.riff-track,
.riff-tracks .wp-block-playlist-track.riff-track:hover {
	background: none;
}

.riff-row {
	all: unset;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.15s;
}

.riff-row:hover,
.riff-row[data-current] {
	background: color-mix(in srgb, currentcolor 8%, transparent);
}

.riff-row:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* The track a shared link names. */
.riff-row[data-shared] {
	background: color-mix(in srgb, currentcolor 8%, transparent);
	box-shadow: inset 3px 0 0 currentcolor;
}

.riff-row-art {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: color-mix(in srgb, currentcolor 12%, transparent);
}

.riff-row-art img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

/* Bars over the art of the playing track. */
.riff-row-state {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	padding-bottom: 30%;

	/* Dark enough that white bars read on a pale cover, too. */
	background: rgb(0 0 0 / 0.6);
	opacity: 0;
	transition: opacity 0.15s;
}

.riff-row-state i {
	width: 3px;
	height: 40%;
	background: #fff;
	border-radius: 1px;
	box-shadow: 0 0 2px rgb(0 0 0 / 0.4);
	transform-origin: bottom;
	transform: scaleY(0.35);
}

[data-current] .riff-row-state,
[aria-current] .riff-row-state,
.riff-row:hover .riff-row-state {
	opacity: 1;
}

[data-playing="true"] .riff-row-state i {
	animation: riff-eq 0.9s ease-in-out infinite alternate;
}

[data-playing="true"] .riff-row-state i:nth-child(2) {
	animation-delay: -0.3s;
}

[data-playing="true"] .riff-row-state i:nth-child(3) {
	animation-delay: -0.6s;
}

@keyframes riff-eq {

	to {
		transform: scaleY(1);
	}
}

.riff-row-text {
	display: grid;
	min-width: 0;
}

.riff-row-title,
.riff-row-sub {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.riff-row-title {
	font-weight: 500;
}

/* The second line and the time step back from the title, but not past
   4.5:1 on a theme whose own text is translucent: Ipsum's is black at 75%,
   and 0.7 of that on its base came out at 4.3:1. */
.riff-row-sub,
.riff-row-time {
	opacity: 0.8;
}

.riff-row-time {
	font-variant-numeric: tabular-nums;
}

/* A track that could not be played, in words under its title. */
.riff-row-note {
	font-size: 0.875em;
}

/* A track this visitor may not play: dimmed, with a lock by its length. */
.riff-row-locked {
	text-decoration: none;
}

.riff-row-locked .riff-row-text {
	opacity: 0.55;
}

div.riff-row-locked {
	cursor: default;
}

.riff-row-lock {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -3px;
}

/* The player's areas (docs/player.md, "Areas"): badges and controls
   from Riff's own listeners. An empty area takes no room. */
.riff-area {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* In the bar an area is .riff-desk too, an inline grid: it runs across. */
.riff-bar-end .riff-area {
	grid-auto-flow: column;
	align-items: center;
	gap: 8px;
}

#riff .riff-area:empty {
	display: none !important;
}

/* The bar's controls (registry.js): each sits in the bar's end as if it
   were written there. One that says it doesn't show stays hidden, even
   where .riff-desk shows the rest. */
.riff-controls {
	display: contents;
}

#riff [data-riff-control][hidden] {
	display: none !important;
}

/* A badge is a pill, set at the right end of the
   bar. Riff's own is the quality: format and bit rate for the playing
   track. Centred with the controls. */
.riff-badge {
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: color-mix(in srgb, currentcolor 10%, transparent);
	color: var(--riff-accent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The tier's colour, as a colour, so a change of tier moves the words
   and the light under them to the new one rather than switching at once. */
@property --riff-quality-ink {
	syntax: "<color>";
	inherits: true;
	initial-value: #c9d3db;
}

/* How far the light under the words reaches: low along the lower edge at
   rest, filling the well under a pointer. */
@property --riff-quality-lift {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 0%;
}

/* The quality: a capsule pressed into the bar, its well
   dark at the top and lit from below, as a lamp under smoked glass, a bevel
   catching the light round its rim, and the words glowing in the colour of
   the tier (paint.js): pale for a lossy file, green at CD quality, amber past
   it. */
.riff-quality {
	--riff-quality-ink: #c9d3db;
	height: 42px;
	padding: 0 22px;
	border: 2px solid #000;
	background: radial-gradient(calc(70% + var(--riff-quality-lift)) calc(80% + var(--riff-quality-lift)) at 50% 100%, color-mix(in srgb, var(--riff-quality-ink) calc(30% + var(--riff-quality-lift) / 2), #0b0a08), color-mix(in srgb, var(--riff-quality-ink) calc(10% + var(--riff-quality-lift) / 3), #0a0a09) calc(55% + var(--riff-quality-lift) / 2), #080808 92%);
	box-shadow:
		inset 0 4px 8px rgb(0 0 0 / 0.85),
		inset 0 -1px 1px color-mix(in srgb, var(--riff-quality-ink) 18%, transparent),
		0 0 0 1px rgb(255 255 255 / 0.09),
		0 -1px 0 1px rgb(255 255 255 / 0.05),
		0 2px 5px rgb(0 0 0 / 0.55);
	color: var(--riff-quality-ink);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.01em;
	text-shadow: 0 0 8px color-mix(in srgb, var(--riff-quality-ink) 55%, transparent);
	transition:
		--riff-quality-ink 0.4s ease,
		--riff-quality-lift 0.25s ease;
}

.riff-quality:hover {
	--riff-quality-lift: 32%;
}

@media (prefers-reduced-motion: reduce) {

	.riff-quality {
		transition: none;
	}
}

/* a lossy file's capsule is lit less: no glow round its words */
.riff-quality-lossy {
	text-shadow: none;
}

.riff-quality-lossless {
	--riff-quality-ink: #4fdcaa;
}

.riff-quality-hires {
	--riff-quality-ink: #f2b844;
}

.riff-bar-end .riff-area {
	margin-inline-end: 8px;
}

#riff .riff-np-quality {
	display: flex;
	margin: 8px 0 0;
	color: var(--riff-fg-2);
	line-height: 1;
}

.riff-row .riff-row-dot {
	display: none;
}

/* The video mark: a small film icon after the title, in the row's ink. */
.riff-row-video {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-start: 0.4em;
	vertical-align: -0.15em;
	opacity: 0.55;
}

.riff-row-video svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- The player. Theme styles stop at #riff. */

#riff {
	--riff-tint: #303030;
	--riff-p: 0;
	position: relative;
	z-index: 100000;
	color: var(--riff-fg);

	/* Dark on any page, so the browser draws scrollbars dark too. */
	color-scheme: dark;
	font: 400 16px/1.2 "Riff Roboto", Roboto, "Riff Roboto Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

#riff[hidden],
#riff [hidden] {
	display: none !important;
}

#riff *,
#riff *::before,
#riff *::after {
	box-sizing: border-box;
}

/* Button classes below are written as #riff .class so they outweigh this reset
   and any theme's. */
#riff button {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* One ring for every control of the player's that has the keyboard's focus,
   outside its edge and round its corners (tokens.css). */
#riff button:focus-visible,
#riff input:focus-visible,
#riff a:focus-visible,
#riff summary:focus-visible,
#riff :where([tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--riff-focus-ring);
	outline-offset: var(--riff-focus-ring-offset);
}

#riff h2,
#riff h3,
#riff p {
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

#riff img {
	max-width: none;
	margin: 0;
	border: 0;
	box-shadow: none;
}

#riff svg {
	display: block;
	width: 24px;
	height: 24px;
}

#riff .riff-btn {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--riff-fg);
	transition: background-color 0.15s;
}

#riff .riff-btn:hover {
	background: var(--riff-hover);
}

#riff .riff-btn[aria-pressed="false"],
#riff [data-riff-action="repeat"][data-repeat="off"] {
	color: var(--riff-fg-2);
}

/* Repeat shows its "one" glyph only in that mode. */
#riff [data-riff-action="repeat"] svg:last-child,
#riff [data-riff-action="repeat"][data-repeat="one"] svg:first-child {
	display: none;
}

#riff [data-riff-action="repeat"][data-repeat="one"] svg:last-child {
	display: block;
}

/* Play and pause share a button; the state picks the glyph. */
#riff .riff-play svg:last-child,
#riff[data-playing="true"] .riff-play svg:first-child {
	display: none;
}

#riff[data-playing="true"] .riff-play svg:last-child {
	display: block;
}

#riff[data-waiting] .riff-play {
	animation: riff-pulse 1s ease-in-out infinite alternate;
}

@keyframes riff-pulse {

	to {
		opacity: 0.5;
	}
}

/* ---- Seek lines. A native range sits on top of a drawn line: a thin
   track, how far the file has loaded in a quieter shade, and the played
   part in the accent. Nothing on it moves but the played part and the knob,
   by transform. */

.riff-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: var(--riff-line);
	pointer-events: none;
	transition: transform 0.1s;
}

.riff-line i {
	position: absolute;
	inset: 0;
	background: var(--riff-cover-accent);
	transform-origin: left;
	transform: scaleX(var(--riff-p));
}

/* How far the file has loaded, a lighter band under the played part. */
.riff-line::before {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--riff-fg) 22%, transparent);
	transform-origin: left;
	transform: scaleX(var(--riff-buffered, 0));
}

.riff-seek {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.riff-knob,
.riff-tip {
	display: none;
}

/* The seek input is invisible, so its focus ring is drawn on the bar
   around it. */
#riff .riff-seek:focus-visible {
	outline: none;
}

.riff-bar-seek:has(> .riff-seek:focus-visible),
.riff-np-seek:has(> .riff-seek:focus-visible) {
	outline: var(--riff-focus-ring, 2px solid var(--riff-fg));
	outline-offset: var(--riff-focus-ring-offset, 2px);
	border-radius: 4px;
}

/* Right to left: the played part grows from the right, and the knob
   sits at its end. */
[dir="rtl"] .riff-line i,
[dir="rtl"] .riff-line::before {
	transform-origin: right;
}

[dir="rtl"] .riff-knob {
	transform: translateX(calc((1 - var(--riff-p)) * 100%));
}

[dir="rtl"] .riff-knob::after {
	right: auto;
	left: -7px;
}

/* With a live reading the bars follow it; the keyframes are for when there
   is none. */
html:has(#riff[data-live]) [data-playing="true"] .riff-row-state i {
	animation: none;
}

/* ---- The bar. On a phone: art, title and artist, Cast, play. Swipe it to
   skip. */

.riff-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	height: calc(var(--riff-bar-h) + var(--riff-safe-b));
	padding: 0 8px var(--riff-safe-b) 8px;
	background: var(--riff-surface);
}

/* On a phone the line runs along the top edge and is a readout, not a
   control. */
.riff-bar-seek {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
}

.riff-bar-seek .riff-line {
	top: 0;
	margin: 0;
}

.riff-bar-seek .riff-seek {
	pointer-events: none;
}

.riff-bar-center,
.riff-bar-end {
	display: flex;
	align-items: center;
}

/* On a phone the transport and the times are only Play: their wrappers
   step out of the row. */
.riff-bar-transport,
.riff-bar-progress {
	display: contents;
}

.riff-bar-center {
	order: 3;
}

.riff-bar-end {
	order: 2;
}

#riff .riff-bar-info {
	order: 1;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	height: 100%;
	touch-action: pan-y;
	transition: transform 0.2s;
}

#riff .riff-bar-info.is-dragging {
	transition: none;
}

.riff-thumb {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 2px;
	overflow: hidden;
	background: var(--riff-hover);
}

.riff-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.riff-bar-text {
	display: grid;
	min-width: 0;
}

.riff-title,
.riff-sub {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.riff-title {
	font-size: 15px;
	font-weight: 500;
}

.riff-sub {
	color: var(--riff-fg-2);
	font-size: 14px;
}

.riff-desk {
	display: none !important;
}

/* Wide, but not a phone on its side, however wide its screen: that keeps
   the phone's bar, beside its tabs, as it does at 899px. */
@media (min-width: 900px) and (not ((pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px))) {

	.riff-desk {
		display: inline-grid !important;
	}

	.riff-mobile {
		display: none !important;
	}

	/* Three columns: the track, the transport with the
	   seek line under it, then volume, the quality pill and the caret. */
	.riff-bar {
		display: grid;

		/* The track and the end share alike either side of the transport, so it
		   stays in the middle whatever each track's end holds: the quality
		   pill's text and the views' buttons change from track to track. Where
		   the end's controls outgrow their share, the end keeps room for them
		   and the track's column gives way, its text trimming, instead of the
		   controls running out of sight. */
		grid-template-columns: minmax(0, 1fr) clamp(320px, 40%, 640px) minmax(max-content, 1fr);
		gap: 16px;

		/* for the end's cap below, as wide as the bar */
		container-type: inline-size;
		padding: 0 4px var(--riff-safe-b) 16px;
	}

	.riff-bar-center,
	.riff-bar-end,
	#riff .riff-bar-info {
		order: 0;
	}

	.riff-bar-center {
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		gap: 2px;
		height: 100%;
	}

	.riff-bar-transport {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	.riff-bar-progress {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	/* Never past half the bar, however many views and controls it holds, so
	   they can't push the bar past the window's edge: past that it scrolls. */
	.riff-bar-end {
		justify-content: flex-end;

		/* at the end, but from the start where it scrolls, so nothing is
		   out of reach */
		justify-content: safe flex-end;
		gap: 8px;
		min-width: 0;
		max-width: 50cqi;
		height: 100%;
		padding-right: 8px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#riff .riff-bar-info {
		justify-content: flex-start;
		gap: 16px;
	}

	.riff-bar-text {
		max-width: 520px;
	}

	.riff-title,
	.riff-sub {
		font-size: 16px;
		line-height: 19.2px;
	}

	#riff .riff-skip-sm {
		width: 36px;
		height: 36px;
	}

	#riff .riff-bar .riff-play svg {
		width: 32px;
		height: 32px;
	}

	/* Each time beside its end of the line, wide enough for an hour. */
	.riff-time {
		display: inline-block !important;
		min-width: 4ch;
		color: #aaa;
		font-size: 12px;
		line-height: 14.4px;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.riff-time[data-riff-text="current"] {
		text-align: right;
	}

	/* The seek line under the transport: 2px, 4px with a knob and the time
	   while pointed at, in a taller strip that is easy to hit. */
	.riff-bar-seek {
		position: relative;
		flex: 1;
		top: auto;
		height: 16px;
	}

	.riff-bar-seek .riff-line {
		top: 7px;
	}

	.riff-bar-seek .riff-seek {
		pointer-events: auto;
	}

	.riff-bar-seek:hover .riff-line,
	#riff[data-seeking] .riff-bar-seek .riff-line {
		transform: scaleY(2);
	}

	/* The knob is a rail as wide as the line, slid by transform, with the
	   dot at its end: it moves on the compositor with the line it sits on,
	   never by a layout. It shows only while the line is pointed at, in focus
	   or held. */
	.riff-knob {
		position: absolute;
		top: 8px;
		left: 0;
		right: 0;
		display: block;
		height: 14px;
		margin-top: -7px;
		pointer-events: none;
		opacity: 0;
		transform: translateX(calc((var(--riff-p) - 1) * 100%));
		transition: opacity 0.1s;
		will-change: opacity;
	}

	.riff-knob::after {
		content: "";
		position: absolute;
		top: 0;
		right: -7px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: var(--riff-cover-accent);
	}

	.riff-bar-seek:hover .riff-knob,
	.riff-bar-seek:has(> .riff-seek:focus-visible) .riff-knob,
	#riff[data-seeking] .riff-bar-seek .riff-knob {
		opacity: 1;
	}

	/* Over the transport, so lighter than the bar, as a tooltip. */
	.riff-tip {
		position: absolute;
		bottom: 18px;
		display: block;
		padding: 4px 8px;
		border-radius: 4px;
		background: #424242;
		color: var(--riff-fg);
		font-size: 12px;
		transform: translateX(-50%);
		pointer-events: none;
		white-space: nowrap;
	}

	/* the bar's own colour, whatever a theme or the app makes it, down
	   through the end and its controls */
	.riff-bar-end,
	.riff-bar-end [data-riff-controls] {
		background: inherit;
	}

	/* Volume: the mute button and a short slider beside it, in a slot of
	   its own whose width never changes, so nothing opens over the controls
	   next to it or moves them. The slider is drawn as the seek line is: a
	   thin track, the level filled in the accent, and a thumb only while it
	   is pointed at, in focus or held. */
	.riff-volume {
		display: flex !important;
		flex: none;
		align-items: center;
		color: var(--riff-fg-2);
	}

	#riff .riff-volume-mute svg:last-child,
	#riff .riff-volume-mute[aria-pressed="true"] svg:first-child {
		display: none;
	}

	#riff .riff-volume-mute[aria-pressed="true"] svg:last-child {
		display: block;
	}

	.riff-volume input {
		--riff-vol-fill: var(--riff-cover-accent, var(--riff-accent));
		-webkit-appearance: none;
		appearance: none;
		flex: none;
		width: 104px;
		height: 24px;
		margin: 0 8px 0 0;
		background: transparent;
		cursor: pointer;
	}

	.riff-volume input[hidden] {
		display: none;
	}

	.riff-volume input:focus-visible {
		outline: var(--riff-focus-ring, 2px solid var(--riff-fg));
		outline-offset: var(--riff-focus-ring-offset, 2px);
		border-radius: 4px;
	}

	/* muted, the level stays, quieter, for unmuting to come back to */
	.riff-volume:has([aria-pressed="true"]) input {
		opacity: 0.5;
	}

	.riff-volume input::-webkit-slider-runnable-track {
		height: 2px;
		border-radius: 1px;
		/* stylelint-disable-next-line @stylistic/max-line-length */
		background: linear-gradient(90deg, var(--riff-vol-fill) calc(var(--riff-vol, 1) * 100%), var(--riff-line) 0);
	}

	[dir="rtl"] .riff-volume input::-webkit-slider-runnable-track {
		/* stylelint-disable-next-line @stylistic/max-line-length */
		background: linear-gradient(270deg, var(--riff-vol-fill) calc(var(--riff-vol, 1) * 100%), var(--riff-line) 0);
	}

	.riff-volume input::-moz-range-track {
		height: 2px;
		border-radius: 1px;
		background: var(--riff-line);
	}

	.riff-volume input::-moz-range-progress {
		height: 2px;
		border-radius: 1px;
		background: var(--riff-vol-fill);
	}

	.riff-volume input::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 12px;
		height: 12px;
		margin-top: -5px;
		border: 0;
		border-radius: 50%;
		background: var(--riff-vol-fill);
		opacity: 0;
		transition: opacity 0.1s;
	}

	.riff-volume input::-moz-range-thumb {
		width: 12px;
		height: 12px;
		border: 0;
		border-radius: 50%;
		background: var(--riff-vol-fill);
		opacity: 0;
		transition: opacity 0.1s;
	}

	.riff-volume input:hover::-webkit-slider-thumb,
	.riff-volume input:focus-visible::-webkit-slider-thumb,
	.riff-volume input[data-held]::-webkit-slider-thumb {
		opacity: 1;
	}

	.riff-volume input:hover::-moz-range-thumb,
	.riff-volume input:focus-visible::-moz-range-thumb,
	.riff-volume input[data-held]::-moz-range-thumb {
		opacity: 1;
	}

	/* Volume, repeat and shuffle sit back in #909090; the caret is white. */
	#riff .riff-bar-end .riff-btn,
	#riff .riff-bar .riff-mode,
	.riff-volume {
		color: #909090;
	}

	#riff .riff-bar-end .riff-btn[aria-pressed="true"],
	#riff .riff-bar .riff-mode[aria-pressed="true"],
	#riff .riff-bar .riff-mode[data-repeat="all"],
	#riff .riff-bar .riff-mode[data-repeat="one"] {
		color: var(--riff-fg);
	}
}

/* ---- Now Playing */

.riff-np {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: var(--riff-safe-t) 0 var(--riff-safe-b);
	background: var(--riff-bg);
	overflow: hidden;
	transform: translateY(100%);
	transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1);

	/* its shape says whether the album is the cover or the turntable */
	container: riff-np / size;
}

.riff-np.is-in {
	transform: none;
}

/* The whole screen takes the artwork's colour, a little darker towards the
   bottom. */
.riff-np-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(var(--riff-tint), color-mix(in srgb, var(--riff-tint) 70%, #000));
	pointer-events: none;
}

/* Over it, a soft wash of the cover's accent from the top. When the track
   changes the last one's (::before) fades out as this one's (::after) fades
   in, by their opacity alone (now-playing.js). */
.riff-np-bg::before,
.riff-np-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--riff-cover-accent);
	opacity: 0.14;
	-webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000, transparent 75%);
	mask-image: radial-gradient(120% 70% at 50% 0%, #000, transparent 75%);
}

.riff-np-bg::before {
	background-color: var(--riff-cover-accent-was, var(--riff-cover-accent));
	opacity: 0;
}

.riff-np-bg[data-riff-fading]::before {
	animation: riff-wash-out 0.6s ease-out;
}

.riff-np-bg[data-riff-fading]::after {
	animation: riff-wash-in 0.6s ease-out;
}

@keyframes riff-wash-out {

	from {
		opacity: 0.14;
	}

	to {
		opacity: 0;
	}
}

@keyframes riff-wash-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 0.14;
	}
}

.riff-np-head,
.riff-np-body {
	position: relative;
}

.riff-np-head {
	display: grid;
	flex: none;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 56px;
	padding: 0 12px;
	touch-action: none;
}

/* The right end: Captions, for a video version that has them. */
.riff-np-end {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 4px;
}


/* Song and Video: two icons on a phone, two words on a wide screen. */
.riff-modes {
	grid-column: 2;
	display: flex;
	padding: 2px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.3);
}

#riff .riff-modes button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 32px;
	border-radius: 999px;
	color: var(--riff-fg-3);
}

#riff .riff-modes button[aria-checked="true"] {
	background: var(--riff-hover);
	color: var(--riff-fg);
}

#riff .riff-modes svg {
	width: 20px;
	height: 20px;
}

.riff-modes span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* While a video plays untouched, the switch and the bar fade away, and come
   back at the first move (now-playing.js). The bar fades into Now Playing's
   own black under a veil, rather than to the page behind it. Faded, they let
   a tap through to the picture, which brings them back, rather than pressing
   what can't be seen. */
.riff-bar::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: var(--riff-bg);
	opacity: 0;
	pointer-events: none;
}

#riff[data-riff-idle] .riff-bar {
	pointer-events: none;
}

#riff[data-riff-idle] .riff-bar::before {
	opacity: 1;
}

#riff[data-riff-idle] .riff-modes {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

	#riff .riff-bar::before,
	#riff .riff-modes {
		transition: opacity 0.3s ease;
	}
}

.riff-np-body {

	/* the space either side of the art on a wide screen */
	--riff-np-gutter: 56px;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.riff-stage {
	display: grid;
	flex: 1;
	place-items: center;
	min-height: 0;
	padding: 34px 32px 24px;
	container: riff-stage / size;
	touch-action: none;
}

.riff-cover,
.riff-video {
	grid-area: 1 / 1;
	border-radius: 8px;
}

.riff-cover {
	width: min(100cqw, 100cqh);
	height: min(100cqw, 100cqh);
	object-fit: cover;
	user-select: none;
}

/* The record behind the cover, as in its sleeve, and the turntable it comes
   out onto, which is the record's size and stands where the record goes:
   its plinth and platter under the record, its arm over it. While the album
   plays the record slides out onto the platter, far enough to show its
   label, the cover moving left to make room. Its label is printed in the
   cover's own colours. */
.riff-record,
.riff-deck-part {
	position: relative;
	grid-area: 1 / 1;
	width: min(100cqw, 100cqh);
	height: min(100cqw, 100cqh);
	pointer-events: none;
	container-type: inline-size;
}

/* The record's cut, by its share of the radius, a 12-inch LP's unless
   now-playing.js says it is a 7-inch single: the label, its rim, the
   lead-out groove, the spindle hole. */
#riff {
	--riff-label-inset: 33.5%;
	--riff-label-edge: 34.5%;
	--riff-lead-out: 40%;
	--riff-hole: 2.4%;
}

/* A 7-inch single at 45: a label half its width round a hole for a jukebox's
   spindle, and 60s / 45 = 1.33s a turn. */
#riff[data-riff-format="7"] {
	--riff-etch-scale: 1.425;
	--riff-label-inset: 25%;
	--riff-label-edge: 50%;
	--riff-lead-out: 56%;
	--riff-hole: 11%;
}

.riff-record {
	border-radius: 50%;

	/* by its radius: the label, then smooth dead wax to the lead-out groove,
	   the grooves in a band for each track on the side playing, lighter
	   where it is loud (--riff-bands, from now-playing.js), and a smooth
	   lead-in rim from 97% */
	background:
		var(--riff-bands, linear-gradient(transparent, transparent)),
		radial-gradient(circle closest-side, #0c0c0c 0 var(--riff-label-edge), #161616 var(--riff-label-edge) var(--riff-lead-out), transparent var(--riff-lead-out) 97%, #161616 97%),
		repeating-radial-gradient(circle, #141414 0 1px, #1c1c1c 1px 3px),
		#111;
	box-shadow: 0 12px 40px rgb(0 0 0 / 0.45);
	transition: translate 0.75s var(--riff-hand), scale 0.75s var(--riff-hand);

	/* moved and turned on the GPU, its grooves and label drawn
	   once rather than at every step; its transform is its height
	   above the mat as it is set down (now-playing.js) */
	will-change: translate, scale, transform;
}

/* The way a record, its sleeve and the arm move: carried by a hand, on the
   minimum-jerk path reaching movements follow, x = 10t³ − 15t⁴ + 6t⁵,
   setting off and arriving with neither speed nor acceleration
   (now-playing.js, hand()). Drawn with linear() where a browser has it;
   elsewhere the cubic Bézier within 1% of it. */
#riff {
	--riff-hand: cubic-bezier(0.5, 0, 0.5, 1);
}

@supports (transition-timing-function: linear(0, 1)) {

	#riff {
		--riff-hand: linear(0, 0.001, 0.009, 0.027, 0.058, 0.104, 0.163, 0.235, 0.317, 0.407, 0.5, 0.593, 0.683, 0.765, 0.837, 0.896, 0.942, 0.973, 0.991, 0.999, 1);
	}
}

/* light across the grooves and the label, which stays put while the
   record turns, and the record's hole, dark round the turntable's spindle */
.riff-record::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle closest-side, #050505 0 var(--riff-hole), rgb(255 255 255 / 0.18) var(--riff-hole) calc(var(--riff-hole) + 0.4%), transparent calc(var(--riff-hole) + 0.4%)),
		conic-gradient(from 30deg, transparent 0 8%, rgb(255 255 255 / 0.1) 12%, transparent 18% 50%, rgb(255 255 255 / 0.08) 62%, transparent 68%);
}

/* the label: a disc that turns as one at 33⅓, an LP's speed (60s / 33⅓ =
   1.8s a turn, at an even speed), printed as a record's label is, in
   zones round the spindle that nothing crosses: the album across the top
   half, the side and speed beside the hole, the artist and the side's
   tracks across the bottom half, the round edge clipping what runs long,
   on paper printed in the cover's own colour, its average (now-playing.js),
   the words dark on a light colour and light on a dark one so they read.
   It is flat, as printed paper is: the only light on it is the record's,
   which stays still. */
.riff-spin {
	position: absolute;
	inset: var(--riff-label-inset);
	border-radius: 50%;

	/* the round edge as a clip on the turning layer itself, which every
	   engine keeps on the compositor; an overflow clip on a turning layer
	   is one Safari has dropped */
	clip-path: circle(50%);
	container-type: inline-size;
}

.riff-label {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 38% 24% auto auto;
	justify-items: center;
	padding: 0 16%;
	background: var(--riff-label-paper, #3a3a3a);
	color: var(--riff-label-ink, #fff);
	font-family: var(--riff-font, inherit);
	line-height: 1.15;
	text-align: center;
	text-shadow: 0 1px 2px var(--riff-label-halo, rgb(0 0 0 / 0.35));
}

.riff-label b {
	display: -webkit-box;
	grid-row: 1;
	align-self: end;
	margin-bottom: 2%;
	overflow: hidden;
	font-size: 9cqi;
	font-weight: 700;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.riff-label i {
	display: -webkit-box;
	grid-row: 3;
	max-width: 100%;
	overflow: hidden;
	font-size: 6cqi;
	font-style: normal;
	opacity: 0.85;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* the side's tracks, as a pressed label lists them, where the label is
   drawn large enough for its smallest type to be read */
.riff-label-tracks {
	display: none;
	grid-row: 4;
	max-width: 100%;
	margin: 3% 0 0;
	padding: 0;
	list-style: none;
	font-size: 3.4cqi;
	line-height: 1.35;
	white-space: pre;
	opacity: 0.8;
}

.riff-label-tracks li {
	overflow: hidden;
	text-overflow: ellipsis;
}

@container (min-width: 200px) {

	.riff-label-tracks {
		display: block;
	}
}

/* a long side in two columns, smaller, as a pressed label sets it */
.riff-label-tracks:has(li:nth-child(6)) {
	columns: 2;
	column-gap: 6%;
	width: 84%;
	font-size: 2.5cqi;
}

/* the side and speed to the left of the hole */
.riff-label small {
	grid-row: 2;
	align-self: center;
	justify-self: start;
	margin-left: -6%;
	font-size: 4.5cqi;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

.riff-cover {
	position: relative;
	transition: translate 0.75s var(--riff-hand) 0.08s, scale 0.75s var(--riff-hand) 0.08s;
	will-change: translate, scale;
}

/* Out of the sleeve (now-playing.js, once the album first plays): the record
   slides onto the platter, and the sleeve, a beat behind, is laid flat
   beside the turntable, as on the desk it stands on, a little apart from its
   plinth. A record and its sleeve are one
   size, so they stay one size. It stays out when paused, as a record on the
   platter does; it goes back in when the album changes. The turntable is
   always where the record goes, and shows once there is a record for it:
   small enough, with the sleeve, to fit where the cover alone did, the two
   centred as one, the plinth reaching further on its arm side. */
.riff-stage {
	--riff-out-scale: 0.42;
	--riff-out-cover: -28.5%;
	--riff-out-record: 17.6%;

	/* the plinth reaches further above the record than below it: down a
	   little, so the turntable is in the middle */
	--riff-out-drop: 4%;
}

#riff[data-riff-deck="out"] .riff-cover {
	translate: var(--riff-out-cover) 0;
	scale: var(--riff-out-scale);
}

#riff[data-riff-deck="out"] .riff-record,
.riff-deck-part {
	translate: var(--riff-out-record) var(--riff-out-drop);
	scale: var(--riff-out-scale);
}

.riff-deck-part {
	opacity: 0;
	transition: opacity 0.4s;
}

#riff:is([data-riff-deck="out"], [data-riff-arriving]) .riff-deck-part {
	opacity: 1;
}

#riff[data-mode="video"] .riff-deck-part {
	display: none;
}

/* Now Playing landscape, as on a computer's window, an unfolded phone or a
   phone on its side, is the only shape with the turntable (--riff-deck,
   read by now-playing.js, which turns it off for a site without one and
   for less motion); portrait, as on a phone held upright, the cover stands
   alone. It sizes the pair by the stage: each as large as the stage allows,
   side by side at full size, the sleeve and the plinth a tenth of a record
   apart, about what the stage leaves either side of the pair, the
   plinth's height and its arm side inside the stage. The sleeve alone,
   before the record comes out, is as large. */
@container riff-np (orientation: landscape) {

	:root #riff .riff-stage > :is(.riff-cover, .riff-record, .riff-deck-part) {
		width: min(74cqh, 37cqw);
		max-width: none;
		height: min(74cqh, 37cqw);
		max-height: none;
	}

	/* on what the stage holds: a query cannot restyle the stage itself */
	.riff-stage > * {
		--riff-deck: 1;
		--riff-out-scale: 1;
		--riff-out-cover: -71%;
		--riff-out-record: 44%;
	}

	#riff .riff-stage > .riff-sleeve {
		display: block;
	}

	.riff-cover {
		cursor: pointer;
	}
}

/* The sleeve is tapped to put the record away and tapped again to play it
   (now-playing.js). A pointer taps the sleeve itself; a keyboard and a
   screen reader reach this button, its focus shown on the sleeve. Only where
   the turntable stands. */
#riff .riff-sleeve {
	display: none;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#riff[data-mode="video"] .riff-stage > .riff-sleeve {
	display: none;
}

.riff-stage:has(.riff-sleeve:focus-visible) .riff-cover {
	outline: 2px solid var(--riff-fg);
	outline-offset: 4px;
}

/* The plinth: a board under the platter and the arm, which reaches behind
   the arm's base and its rest; the platter, a little wider than the record,
   its rim showing round it; and the rest the arm sits on when it is up, a
   cradle with a notch for the tube, under it where the arm lies at rest:
   turned out 14° on its base, the tube bowed 2.4 to the side at 43 along
   (the drawing's units, in the record's hundredths), so 12.7 out and 41.1
   down from the base at (105, 5). */
.riff-plinth::before {
	content: "";
	position: absolute;
	inset: -13% -26% -5% -5%;
	border-radius: 3cqi;
	background: linear-gradient(160deg, #222 0%, #181818 60%, #141414);
	box-shadow: 0 2cqi 6cqi rgb(0 0 0 / 0.5), inset 0 0.2cqi 0 rgb(255 255 255 / 0.06);
}

.riff-plinth::after {
	content: "";
	position: absolute;
	inset: -3.5%;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, #0e0e0e 0 98.4%, #3a3a3a 99%, #262626);
}

/* The platter's rim, wider than the record as a Technics platter is (332mm
   to the record's 302mm), and on it the strobe: two rows of dots, 216 for
   33⅓ and 160 for 45. In the room's light they turn with the platter. In
   the patch the deck's lamp lights, at the front left, flashing 120 times a
   second on 60Hz mains, a row seems to stand still when the platter turns a
   whole number of its dots between flashes, and otherwise to drift by what
   is left over; now-playing.js turns the lit rows by just that, so there
   the row for the speed playing stands still and the other creeps, and
   both drift as the platter comes up to speed or winds down. */
.riff-strobe {
	position: absolute;
	z-index: 1;
	inset: -3.5%;
	border-radius: 50%;
}

.riff-strobe-room,
.riff-strobe-lamp,
.riff-strobe i {
	position: absolute;
	inset: 0;
}

.riff-strobe i {
	will-change: rotate;
}

.riff-strobe-room {
	mask-image: conic-gradient(#000 0 195deg, transparent 207deg 243deg, #000 255deg);
}

/* the lamp's patch: its warm light on the rim, and the dots lit in it */
.riff-strobe-lamp {
	--riff-strobe-dot: rgb(255 150 80 / 0.45);
	background: radial-gradient(circle at 14% 86%, rgb(255 120 50 / 0.08), transparent 30%);
	mask-image: conic-gradient(transparent 0 195deg, #000 207deg 243deg, transparent 255deg);
	clip-path: circle(50%);
}

/* each row its dots, round, drawn once (now-playing.js) */
#riff .riff-strobe svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: var(--riff-strobe-dot, rgb(200 200 200 / 0.09));
}

/* The spindle: the turntable's, not the record's, so it stands where the
   platter's centre is, and shows through the record's hole. A steel pin,
   lit from above. It is drawn over the record, so it shows only once the
   record has come to rest on it, never while the record slides across or
   the turntable fades in, and goes at once when the record leaves. */
.riff-mount::before {
	opacity: 0;
	content: "";
	position: absolute;
	inset: calc(50% - var(--riff-hole) * 0.36);
	border-radius: 50%;
	background: radial-gradient(circle at 42% 38%, #f0f0f0, #a9a9a9 45%, #5f5f5f);
	box-shadow: 0 0.2cqi 0.4cqi rgb(0 0 0 / 0.6);
}

#riff[data-riff-deck="out"] .riff-mount::before {
	opacity: 1;
	transition: opacity 0.15s 0.6s;
}

.riff-armrest {
	position: absolute;
	z-index: 1;
	top: 46.1%;
	left: 117.7%;
	width: 3.2cqi;
	height: 7cqi;
	border-radius: 0.8cqi;
	background: linear-gradient(90deg, #2e2e2e, #3c3c3c 30%, #1c1c1c 42% 58%, #3c3c3c 70%, #2a2a2a);
	box-shadow: 0 0.5cqi 1cqi rgb(0 0 0 / 0.6), inset 0 0.2cqi 0 rgb(255 255 255 / 0.08);
	translate: -50% -50%;

	/* along the arm where it rests, so the tube lies in its notch */
	rotate: -14deg;
}

/* The anti-skate dial beside the arm's base, between it and the platter: a
   knob 21 mm across (7 of the record's hundredths), its scale of 0 to 6
   round three quarters of its rim, set at 1.5, as for a stylus tracking at
   1.5 g. Clear of the counterweight wherever the arm turns. */
.riff-antiskate {
	position: absolute;
	z-index: 1;
	top: -2%;
	left: 93.5%;
	width: 7cqi;
	height: 7cqi;
	border-radius: 50%;
	background:
		radial-gradient(circle closest-side, #3b3b3b 0 56%, #262626 58% 64%, transparent 66%),
		conic-gradient(transparent 0 160deg, #181818 160deg 200deg, transparent 200deg),
		repeating-conic-gradient(from -136deg, #8a8a8a 0 2deg, transparent 2deg 45deg),
		#181818;
	box-shadow: 0 0.4cqi 0.8cqi rgb(0 0 0 / 0.5), inset 0 0.2cqi 0 rgb(255 255 255 / 0.06);
	translate: -50% -50%;
}

/* its pointer, from the middle out: 1.5 of 6 on a scale starting 135°
   left of the top, 45° a step */
.riff-antiskate::after {
	content: "";
	position: absolute;
	top: 24%;
	left: calc(50% - 0.25cqi);
	width: 0.5cqi;
	height: 26%;
	border-radius: 0.25cqi;
	background: #cfcfcf;
	transform-origin: 50% 100%;
	rotate: -67.5deg;
}

/* The pop-up target light by the platter, at its front: a housing 15 mm
   across, raised, with its lamp lit while a record is out, as a deck's is
   to see the stylus by in a dark room. */
.riff-target {
	position: absolute;
	z-index: 1;
	top: 97%;
	left: 101%;
	width: 5cqi;
	height: 5cqi;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #5e5e5e, #2a2a2a 60%, #1a1a1a);
	box-shadow: 0 0.8cqi 1.2cqi rgb(0 0 0 / 0.6), inset 0 0.2cqi 0 rgb(255 255 255 / 0.1);
	translate: -50% -50%;
}

.riff-target::after {
	content: "";
	position: absolute;
	inset: 30%;
	border-radius: 50%;
	background: #fff3dc;
	box-shadow: 0 0 1.6cqi 0.4cqi rgb(255 225 180 / 0.3);
	opacity: 0;
	transition: opacity 0.3s;
}

#riff[data-riff-deck="out"] .riff-target::after {
	opacity: 1;
}

/* The platter turns at 33⅓, or 45 for a single, while the music sounds
   (now-playing.js marks it turning), and its speed is the music's: coming
   up to speed and winding down, the rate the music bends through is the
   rate it turns at. Below the slowest the music plays at, it turns on its
   own, the music silent (now-playing.js marks it coasting). */
.riff-turns {
	will-change: rotate;
}

/* The run-out: the matrix number scratched by hand into the smooth dead
   wax between the label and the last groove, as every pressing carries,
   on a layer that turns with the label (now-playing.js writes it). It sits
   midway across the dead wax, wherever the format puts it. Its layer is
   the record's square whatever the text, so it is painted once and only
   turned. */
.riff-wax {
	position: absolute;
	inset: 0;
	pointer-events: none;
	contain: strict;
}

#riff .riff-wax svg {
	display: block;
	width: 100%;
	height: 100%;
	scale: var(--riff-etch-scale, 1);
}

.riff-wax text {
	fill: rgb(255 255 255 / 0.2);
	font-family: ui-monospace, "SF Mono", menlo, monospace;
	font-size: 1.6px;
	font-weight: 500;
	letter-spacing: 0.3px;
}

/* The tonearm, on its base just off the record's corner (now-playing.js
   works its angles from this place and length), its counterweight behind the
   base and its headshell angled, as a pivoted arm's is so the stylus sits
   along the groove: its length and the angle are Baerwald's alignment
   (now-playing.js), which draws the tube and the headshell. At rest on
   its post until the needle drops; stopped, the cue lever lifts it once
   the platter is at rest (now-playing.js). Sized by the record, so it
   scales with it. */
.riff-arm {
	position: absolute;
	top: 5%;
	left: 105%;
	width: 0;
	height: 0;
	rotate: -14deg;
	transition: rotate 0.6s var(--riff-hand);
	will-change: rotate;
}

#riff .riff-arm svg {
	position: absolute;
	top: -4cqi;
	left: -6cqi;
	width: 12cqi;
	height: 82cqi;
	overflow: visible;

	/* the base, where the arm turns and a swing to a new track turns it
	   (now-playing.js) */
	transform-origin: 6cqi 4cqi;
}

/* The base stands on the deck and never moves. The arm, lifted, rides a
   little above the record, which from above shows as a second shadow, cast
   further off as the arm is higher: the arm's own shape, darkened and
   softened once, moved and faded rather than redrawn. The cue lever lifts
   it quickly; lowered, it sinks through the lever's silicone damping at
   one even speed (now-playing.js, LOWER), so the shadow comes in under it
   in a straight line. */
#riff .riff-arm-base {
	filter: drop-shadow(0 0.6cqi 0.8cqi rgb(0 0 0 / 0.5));
}

#riff .riff-arm-tube {
	filter: drop-shadow(0 0.5cqi 0.6cqi rgb(0 0 0 / 0.55));
}

#riff .riff-arm-lift {
	opacity: 0;
	filter: brightness(0) blur(0.6px);
	transition: translate 0.5s linear, opacity 0.5s linear;
}

/* The needle drops once the record is out (now-playing.js marks it down);
   from then on an animation as long as the album turns it, each angle one
   moment of the album, and it swings on its spring to a new track or a
   seek. With reduced motion, it is set where the music is instead. */
#riff[data-riff-deck="out"] .riff-arm[data-riff-down] {
	rotate: var(--riff-arm, -14deg);
}

/* Picked up by hand (now-playing.js), the arm follows the hand with no
   spring, lifted off the record, to wherever it is put down. */
#riff[data-riff-deck="out"] .riff-arm[data-riff-held] {
	rotate: var(--riff-arm, -14deg);
	transition: none;
}

#riff[data-riff-deck="out"] .riff-arm-grip {
	pointer-events: stroke;
	cursor: grab;
}

#riff .riff-arm[data-riff-held] .riff-arm-grip {
	cursor: grabbing;
}

#riff .riff-arm:focus-visible {
	outline: none;
}

#riff .riff-arm:focus-visible .riff-arm-tube {
	outline: var(--riff-focus-ring);
	outline-offset: var(--riff-focus-ring-offset);
	border-radius: 2px;
}

#riff[data-riff-deck="out"] .riff-arm:is([data-riff-up=""], [data-riff-held]) .riff-arm-lift {
	opacity: 0.4;
	translate: 0.8px 2.4px;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
}

/* Shown while the music already plays (now-playing.js marks it), the record
   is on the platter and the stylus in its groove from the first frame:
   nothing slides, drops or swings in under music already heard. The
   stage's own sleeve is named so this outranks a phone on its side's. */
#riff[data-riff-at] :is(.riff-record, .riff-stage > .riff-cover, .riff-cover, .riff-deck-part, .riff-arm, .riff-arm-lift),
#riff[data-riff-at] .riff-mount::before {
	transition: none;
}

#riff[data-mode="video"] .riff-record {
	display: none;
}

/* A new album (now-playing.js): once the arm is back on its rest, the old
   cover and record, copied, leave over the stage while the new sleeve comes
   in from the right with its record inside, which slides out onto the
   platter once it has arrived. */
.riff-leaving {
	display: grid;
	grid-area: 1 / 1;
	place-items: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.riff-leaving > * {
	grid-area: 1 / 1;
}

#riff[data-riff-arriving] .riff-record {
	translate: 0 0;
}

#riff[data-riff-arriving] :is(.riff-cover, .riff-record) {
	animation: riff-arrive 0.4s 0.65s var(--riff-hand) both;
}

@keyframes riff-arrive {

	from {
		opacity: 0;
		transform: translateX(40%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.riff-record,
	.riff-cover,
	.riff-deck-part,
	.riff-arm,
	#riff .riff-arm-lift,
	#riff .riff-mount::before,
	#riff .riff-target::after {
		transition: none;
	}
}

.riff-video {
	display: none;
	width: 100cqw;
	max-height: 100cqh;
	aspect-ratio: 16 / 9;
	background: #000;
}

#riff[data-mode="video"] .riff-video {
	display: block;
}

#riff[data-mode="video"] .riff-cover {
	display: none;
}

.riff-np-panel {
	flex: none;
	padding: 0 32px;
}

/* A name is never cut short where it has room to wrap: two lines at most,
   balanced so neither ends on a word alone. */
#riff .riff-np-title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

#riff .riff-np-sub {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 2px;
	color: var(--riff-fg-2);
	font-size: 16px;
	line-height: 1.3;
	text-wrap: balance;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* Boxy and thumbless; it doubles in height while held. */
.riff-np-seek {
	position: relative;
	height: 48px;
	margin-top: 20px;
}

.riff-np-seek .riff-line {
	top: 10px;
	height: 4px;
	margin: 0;
	border-radius: 2px;
	overflow: hidden;
	background: rgb(255 255 255 / 0.2);
	transform-origin: center;
}

.riff-np-seek .riff-line i {
	background: var(--riff-fg);
}

.riff-np-seek .riff-seek {
	height: 24px;
}

#riff[data-seeking] .riff-np-seek .riff-line {
	transform: scaleY(2);
}

.riff-np-times {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	display: flex;
	justify-content: space-between;
	color: var(--riff-fg-2);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.riff-np-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 8px -8px 0;
}

#riff .riff-np-controls .riff-btn {
	width: 48px;
	height: 48px;
}

#riff .riff-skip svg {
	width: 36px;
	height: 36px;
}

#riff .riff-np-controls .riff-play-big {
	width: 72px;
	height: 72px;
	background: var(--riff-fg);
	color: #000;
}

#riff .riff-play-big:hover {
	background: var(--riff-fg);
	opacity: 0.9;
}

#riff .riff-play-big svg {
	width: 36px;
	height: 36px;
}

/* The views' buttons step back from the music: a light row of icons, each
   named under it, sharing the width; more than fit (a plugin's views) and
   the row scrolls. */
.riff-chips {
	display: flex;
	gap: 4px;
	margin: 20px -32px 0;
	padding: 0 28px;
	overflow-x: auto;
	scrollbar-width: none;
}

#riff .riff-chip {
	display: inline-flex;
	flex: 1 0 64px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 52px;
	padding: 4px 2px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--riff-fg-2);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}

#riff .riff-chip svg {
	width: 22px;
	height: 22px;
}

/* the chip of the view showing, lit as the open view's button is in the bar,
   and underlined (in a contrast theme, below, in its highlight colour) */
#riff .riff-chip[aria-pressed="true"] {
	border-bottom-color: currentcolor;
	color: var(--riff-fg);
}

/* ---- The panels (registry.js): Up next, and any a plugin adds, one at a
   time, each its own thing. On a phone a panel covers the screen, Now
   Playing too, with its name and Close at the top; on a wide screen it
   stands beside the page and Now Playing, above the bar. Where it stands
   is said once, here, for registry.js: a sheet, beside or in the strip. */
.riff-side {
	--riff-side-place: sheet;
	position: fixed;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	padding: var(--riff-safe-t) var(--riff-safe-r) var(--riff-safe-b) var(--riff-safe-l);
	background: var(--riff-surface);
}

.riff-side-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 56px;
	padding: 0 8px 0 24px;
}

#riff .riff-side-title {
	margin: 0;
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Focus lands on the name as the panel opens, for a screen reader to say
   where it is; it is not a control, so no ring round it. */
#riff .riff-side-title:focus {
	outline: none;
}

/* Each panel. Up next's holds the queue; a plugin's is empty until its
   script fills it. */
.riff-panel {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.riff-panel:not(.riff-panel-queue) {
	padding: 8px 24px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* The Together panel: who is in the session, or who else is listening. */
#riff .riff-together-head {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.riff-together-list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

#riff .riff-together-person {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	margin: 0;
}

#riff .riff-together-face {
	position: relative;
	flex: none;
	display: grid;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--riff-hover);
}

#riff .riff-together-face svg,
#riff .riff-together-face img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

#riff .riff-together-face svg {
	padding: 8px;
	box-sizing: border-box;
	stroke: var(--riff-fg-2);
}

#riff .riff-together-face img {
	object-fit: cover;
}

#riff .riff-together-text {
	flex: 1;
	display: grid;
	min-width: 0;
}

#riff .riff-together-name,
#riff .riff-together-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#riff .riff-together-name {
	font-size: 16px;
}

#riff .riff-together-sub,
#riff .riff-together-none {
	color: var(--riff-fg-2);
	font-size: 14px;
}

#riff .riff-together-none {
	text-wrap: pretty;
}

#riff .riff-together-button {
	flex: none;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--riff-line);
	border-radius: 999px;
	color: var(--riff-fg);
	font-size: 14px;
}

#riff .riff-together-button:hover {
	background: var(--riff-hover);
}

/* The About panel (about.js): the track, its title over its artist and
   album as links to their pages, then each section under its heading, the
   credits as a name beside what they did, all in a side panel's sizes so a
   track's whole story shows at once. The cover is the panel's own only
   where Now Playing isn't showing it: beside the album's cover or
   turntable it would be the same picture twice, so there the panel starts
   at the title. Where the panel covers everything, as on a phone, beside
   the page with Now Playing closed, over another view, or with the video
   playing, the cover leads, taking at most half the panel's height so the
   words keep the rest. Both follow the panel's place and Now Playing's
   view as they change, the window resizing or the device turning
   included, with nothing to measure. */
.riff-panel-about {
	container: riff-about / size;
}

.riff-about {
	display: grid;
	gap: 20px;
}

#riff .riff-about-body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

/* the track's lines close together, each link its own 24px line */
#riff .riff-about-track .riff-about-body {
	gap: 0;
}

#riff .riff-about-cover {
	width: 100%;
	width: min(100%, 50cqb);
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin-bottom: 12px;
	border-radius: 8px;
	object-fit: cover;
}

/* beside or in the strip, never a sheet over Now Playing, and the album
   on the stage */
@container not style(--riff-side-place: sheet) {

	#riff.is-open[data-riff-showing="album"]:not([data-mode="video"]) .riff-about-cover {
		display: none;
	}
}

#riff .riff-about-heading {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
}

#riff .riff-about-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

#riff .riff-about .riff-about-artist,
#riff .riff-about .riff-about-album {
	justify-self: start;
	color: var(--riff-fg-2);
	font-size: 14px;

	/* each link a whole target, 24px apart (WCAG 2.5.8) */
	line-height: 24px;
	text-wrap: pretty;
}

#riff .riff-about a {
	color: inherit;
	text-decoration: none;
}

#riff .riff-about a:hover {
	color: var(--riff-fg);
	text-decoration: underline;
}

#riff .riff-about a:focus-visible {
	outline: var(--riff-focus-ring);
	outline-offset: var(--riff-focus-ring-offset);
	border-radius: 4px;
}

/* A row for each credit: what the tag is (Composer, Genre, Year) in a
   column as wide as the longest (up to two fifths of the panel, past which
   it wraps), what the file says beside it, wrapping in its own column. The
   list, as its section is .riff-about-credits too. */
dl.riff-about-credits {
	display: grid;
	grid-template-columns: fit-content(40%) minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

dl.riff-about-credits > div {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
}

dl.riff-about-credits dt {
	color: var(--riff-fg-2);
	overflow-wrap: break-word;
}

dl.riff-about-credits dd {
	margin: 0;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

/* Shuffle and repeat in Up next, where the deck's strip has no room for
   them (below); everywhere else they are with the transport. */
.riff-queue-modes {
	display: none;
	gap: 4px;
}

.riff-queue-head {
	padding: 0 24px 16px;
	border-bottom: 1px solid var(--riff-line);
}

/* The track menu: a … beside each row and each track in Up next, and the
   list it opens, drawn the same dark way in a post as in Now Playing. */
.riff-track {
	position: relative;
}

.riff-track > .riff-row,
.riff-app .riff-album-tracks .riff-track > .riff-row {
	padding-right: 52px;
}

.riff-more-button {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	opacity: 0.75;
}

.riff-track > .riff-more-button {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
}

.riff-more-button:hover,
.riff-more-button:focus-visible,
.riff-more-button[aria-expanded="true"] {
	background: color-mix(in srgb, currentcolor 12%, transparent);
	opacity: 1;
}

.riff-more-button:focus-visible {
	outline: 2px solid var(--riff-accent, var(--riff-app-ink, currentcolor));
	outline-offset: 1px;
}

.riff-more-button svg {
	width: 20px;
	height: 20px;
}

/* ---- Hearts: in the bar, in Now Playing, and beside a row's … for a track
   in the Media Library. Outlined, and filled while liked. A row's shows on
   hover and focus, and always once the track is liked; on
   a touch screen only once it is, and the … menu likes it. */
#riff [aria-pressed="false"] > .riff-heart-on,
#riff [aria-pressed="true"] > .riff-heart-off,
.riff-like-button[aria-pressed="false"] > .riff-heart-on,
.riff-like-button[aria-pressed="true"] > .riff-heart-off,
.riff-app .riff-app-like[aria-pressed="false"] > .riff-heart-on,
.riff-app .riff-app-like[aria-pressed="true"] > .riff-heart-off {
	display: none;
}

#riff .riff-btn.riff-like[aria-pressed="true"],
#riff .riff-bar-end .riff-btn.riff-like[aria-pressed="true"] {
	color: var(--riff-accent);
}

.riff-np-meta {
	position: relative;
	padding-right: 48px;
}

#riff .riff-np-meta .riff-like {
	position: absolute;
	top: 0;
	right: -8px;
}

.riff-like-button {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	opacity: 0;
}

.riff-track > .riff-like-button {
	position: absolute;
	top: 50%;
	right: 44px;
	transform: translateY(-50%);
}

.riff-track:has(> .riff-like-button) > .riff-row,
.riff-app .riff-album-tracks .riff-track:has(> .riff-like-button) > .riff-row {
	padding-right: 92px;
}

.riff-track:hover > .riff-like-button,
.riff-like-button:focus-visible,
.riff-like-button[aria-pressed="true"] {
	opacity: 0.75;
}

.riff-like-button:hover,
.riff-like-button:focus-visible {
	background: color-mix(in srgb, currentcolor 12%, transparent);
	opacity: 1;
}

.riff-like-button:focus-visible {
	outline: 2px solid var(--riff-accent, var(--riff-app-ink, currentcolor));
	outline-offset: 1px;
}

.riff-like-button svg {
	width: 20px;
	height: 20px;
}

@media (hover: none) {

	.riff-like-button[aria-pressed="false"] {
		display: none;
	}

	.riff-track:has(> .riff-like-button[aria-pressed="false"]) > .riff-row,
	.riff-app .riff-album-tracks .riff-track:has(> .riff-like-button[aria-pressed="false"]) > .riff-row {
		padding-right: 52px;
	}
}

/* The … menu, drawn as WordPress's toolbar draws its menus: square, on the
   toolbar's #2c3338, light grey words that turn the accent under the pointer
   or the keyboard: the player's, or in the Listen app's own document, where
   the menu is outside the player, the app's, as its account menu's are. Its
   rows keep 44px on a touch screen. */
.riff-menu {
	position: fixed;
	z-index: 2147483000;
	display: grid;
	min-width: 200px;
	padding: 6px 0;
	border-radius: 0;
	background: #2c3338;
	box-shadow: 0 3px 5px rgb(0 0 0 / 0.2);
	color: #f0f0f1;
	font: 400 14px/1.3 "Riff Roboto", roboto, "Riff Roboto Fallback", system-ui, sans-serif;
}

.riff-menu[hidden] {
	display: none;
}

.riff-menu > *,
#riff .riff-menu > * {
	all: unset;
	box-sizing: border-box;
	padding: 8px 16px;
	color: inherit;
	cursor: pointer;
}

.riff-menu > :hover,
.riff-menu > :focus-visible,
#riff .riff-menu > :hover,
#riff .riff-menu > :focus-visible {
	color: var(--riff-accent, var(--riff-standalone-accent, var(--riff-app-ink, currentcolor)));
}

.riff-menu > :focus-visible,
#riff .riff-menu > :focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--riff-accent, var(--riff-standalone-accent, var(--riff-app-ink, currentcolor)));
}

/* Forced colours drop the shadow, so the item keeps a ring there, inside it. */
@media (forced-colors: active) {

	.riff-menu > :focus-visible,
	#riff .riff-menu > :focus-visible {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

@media (pointer: coarse) {

	.riff-menu > *,
	#riff .riff-menu > * {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* A link that opens a new window, as Go to post does in a window of its own:
   WordPress's external icon after the words, their size and colour. */
.riff-menu > a > svg,
#riff .riff-menu > a > svg {
	display: inline-block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
	margin-inline-start: 0.25em;
	vertical-align: -0.3em;
}

#riff .riff-queue-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

#riff .riff-queue-clear {
	flex: none;
	white-space: nowrap;
	padding: 6px 14px;
	border: 1px solid var(--riff-line);
	border-radius: 999px;
	color: var(--riff-fg);
	font-size: 14px;
}

#riff .riff-queue-clear[hidden] {
	display: none;
}

#riff .riff-queue-list li {
	display: flex;
	align-items: center;
	padding-right: 12px;
}

#riff .riff-queue-list li > button:first-child {
	flex: 1;
	min-width: 0;
}

#riff .riff-queue-list .riff-more-button {
	flex: none;
	display: grid;
	grid-template-columns: none;
	width: 40px;
	height: 40px;
	padding: 0;
}

#riff .riff-queue-list li.is-dragging {
	opacity: 0.5;
}

#riff .riff-queue-head p {
	color: var(--riff-fg-2);
	font-size: 14px;
}

#riff .riff-queue-head h3 {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 700;
}

.riff-queue-list {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 8px 0 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;

	/* A thin thumb on no track, the way the platform draws it in a dark app. */
	scrollbar-width: thin;
	scrollbar-color: rgb(255 255 255 / 0.2) transparent;
}

.riff-queue-list li {
	margin: 0;
	padding: 0;
}

/* Positioned, so its hidden words stay inside the list as it scrolls. */
#riff .riff-queue-list button {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	width: 100%;
	height: 64px;
	padding: 0 24px;
}

#riff .riff-queue-list button:hover {
	background: var(--riff-hover);
}

#riff .riff-queue-list .riff-row-art {
	background: var(--riff-hover);
}

#riff .riff-queue-list .riff-row-sub {
	color: var(--riff-fg-2);
	font-size: 14px;
	opacity: 1;
}

#riff .riff-queue-list .riff-row-time {
	display: none;
}

#riff .riff-queue-list .riff-row-title {
	font-size: 16px;
}

#riff .riff-queue-list button:not([aria-current]) .riff-row-state {
	opacity: 0;
}

/* The track playing in Up next: its title and its bars in the cover's
   accent. */
#riff .riff-queue-list button[aria-current] .riff-row-title {
	color: var(--riff-cover-accent);
}

#riff .riff-queue-list button[aria-current] .riff-row-state i {
	background: var(--riff-cover-accent);
}

/* Under #riff, as the reset above for the player's paragraphs is, so the
   toast keeps its own colours, padding and size. */
#riff .riff-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--riff-bar-h) + var(--riff-safe-b) + 16px);
	z-index: 1;
	padding: 12px 16px;
	border-radius: 4px;
	background: #e6e6e6;
	color: #030303;
	font-size: 14px;
	transform: translateX(-50%);
}

/* not where the whole screen is the turntable, which keeps the phone's Now
   Playing under its own layout at any width (below) */
@media (min-width: 900px) and (not ((pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 760px))) {

	/* On a wide screen Now Playing fills the space above the bar, and the bar
	   keeps the controls; it covers nothing (now-playing.js). */
	.riff-np {
		--riff-np-covers: 0;
		bottom: calc(var(--riff-bar-h) + var(--riff-safe-b));
		padding: 0;
	}

	/* No artwork's colour behind it here, only the cover's accent's wash. */
	.riff-np-bg {
		background: none;
	}

	.riff-np-head {
		height: 64px;
		padding: 0 24px;
		touch-action: auto;
	}

	#riff .riff-modes {
		gap: 0;
		padding: 0;
		background: var(--riff-surface);
	}

	#riff .riff-modes button {
		width: auto;
		height: 32px;
		padding: 0 16px;
		color: var(--riff-fg-3);
		font-size: 16px;
		font-weight: 500;
	}

	#riff .riff-modes button[aria-checked="true"] {
		background: rgb(255 255 255 / 0.15);
		color: var(--riff-fg);
	}

	#riff .riff-modes svg {
		display: none;
	}

	.riff-modes span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	/* The track on its own: Up next and the other panels stand beside it. */
	.riff-np-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		padding: 0 var(--riff-np-gutter);
	}

	/* The turntable turns, slides and swings on layers of its own, and a
	   browser that cannot tell where a moving layer will be gives its own
	   layer to everything painted after it that might overlap. Painted
	   inside the stage, the moving parts can overlap nothing beyond it. The
	   stage reaches out over both gutters, its content box where it was, so
	   a sleeve leaving to the side fades out where it did. */
	.riff-stage {
		margin-inline: calc(-1 * var(--riff-np-gutter));
		padding-block: 0 40px;
		padding-inline: var(--riff-np-gutter);
		contain: paint;
		touch-action: auto;
	}

	/* #riff img clears every theme's max-width; this rule outranks it so the
	   cap holds and the art stays square. */
	#riff .riff-cover,
	.riff-record,
	.riff-deck-part {
		max-width: 640px;
		max-height: 640px;
	}

	/* The caret in the bar and Escape close it; the page itself has no close
	   control. */
	#riff .riff-np-head [data-riff-action="close"] {
		display: none;
	}

	.riff-cover {
		border-radius: 4px;
	}

	.riff-video {
		border-radius: 0;
	}

	.riff-np-panel {
		display: none;
	}

	/* A panel beside the page and Now Playing, above the bar, which the page
	   and Now Playing make room for. */
	.riff-side {
		--riff-side-place: beside;
		inset: var(--riff-side-top, 0) 0 calc(var(--riff-bar-h) + var(--riff-safe-b)) auto;
		width: var(--riff-side-w, 400px);
		padding: 0;
		border-left: 1px solid var(--riff-line);
		background: var(--riff-bg);
	}

	#riff .riff-queue-list li {
		padding-right: 8px;
	}

	html.riff-panel-open {
		--riff-side-w: 400px;
	}

	html.riff-panel-open body {
		margin-right: var(--riff-side-w);
	}

	html.riff-panel-open #riff .riff-np {
		right: var(--riff-side-w);
	}

	.riff-queue-head {
		display: block;
		margin: 0 16px 16px 24px;
		padding: 0;
		border: 0;
	}

	#riff .riff-queue-head p {
		font-size: 12px;
		line-height: 16.8px;
	}

	#riff .riff-queue-head h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 19.2px;
	}

	.riff-queue-list {
		display: block;
		padding: 0 0 24px;
	}

	.riff-queue-list li + li {
		border-top: 1px solid var(--riff-line);
	}

	#riff .riff-queue-list button {
		grid-template-columns: 32px minmax(0, 1fr) auto;
		gap: 16px;
		height: 56px;
		padding: 0 8px 0 24px;
	}

	#riff .riff-queue-list button:hover {
		background: none;
	}

	#riff .riff-queue-list li:hover {
		background: rgb(255 255 255 / 0.05);
	}

	#riff .riff-queue-list li:has(> button[aria-current]) {
		background: var(--riff-hover);
	}

	#riff .riff-queue-list .riff-row-art {
		width: 32px;
		height: 32px;
		border-radius: 2px;
	}

	#riff .riff-queue-list .riff-row-title {
		margin-bottom: 4px;
		font-size: 16px;
		line-height: 19.2px;
	}

	#riff .riff-queue-list .riff-row-sub {
		color: #aaa;
		font-size: 16px;
		line-height: 19.2px;
	}

	#riff .riff-queue-list .riff-row-dot {
		display: none;
	}

	#riff .riff-queue-list .riff-row-time {
		display: block;
		padding-left: 8px;
		color: #aaa;
		font-size: 16px;
		opacity: 1;
	}

	#riff .riff-toast {
		left: 24px;
		transform: none;
	}
}

/* ---- Now Playing on a phone, as YouTube Music lays it out: the art as wide
   as the screen allows, 24px from either edge, with the title, the seek bar
   and the controls lined up under its edges. Everything below the art keeps
   to what it needs, so the art takes the rest. Up next and the other panels
   open from the chips, over it. */
@media (max-width: 899px) {

	.riff-stage {
		padding: 16px 24px 20px;
	}

	.riff-np-panel {
		padding: 0 24px;
	}

	.riff-chips {
		margin: 16px -24px 0;
		padding: 0 24px;
	}

	.riff-np-seek {
		margin-top: 12px;
	}

	/* On a phone the badges leave the title and sit between the times,
	   as a tier: small print in the tier's colour, with no
	   capsule round it. The capsule is the wide screen's. */
	#riff .riff-np-quality {
		display: none;
	}

	#riff .riff-np-tier {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		gap: 12px;
	}

	#riff .riff-np-tier .riff-badge {
		height: auto;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: var(--riff-quality-ink, var(--riff-fg-2));
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.04em;
		text-shadow: none;
	}

	/* The chips are the last row: Up next and the other panels open from
	   there, over Now Playing. */
	.riff-np-panel {
		padding-bottom: 24px;
	}
}

@media (max-height: 700px) and (max-width: 899px) {

	.riff-stage {
		padding-top: 8px;
	}

	.riff-chips {
		margin-top: 12px;
	}

	.riff-np-panel {
		padding-bottom: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {

	#riff,
	.riff-np,
	#riff .riff-bar-info,
	.riff-line,
	.riff-knob {
		transition: none;
	}

	.riff-np-bg[data-riff-fading]::before,
	.riff-np-bg[data-riff-fading]::after {
		animation: none;
	}

	[data-playing="true"] .riff-row-state i,
	#riff[data-waiting] .riff-play {
		animation: none;
	}
}

/* The deck's board and the sleeve's rack are the turntable screen's alone. */
.riff-deck-board,
.riff-rack {
	display: none;
}

/* The turntable turned off (Settings › Media, now-playing.js): the cover on
   its own, where the record would have come out of it onto the deck, and
   on a touch screen on its side the cover beside the controls. */
#riff[data-riff-turntable="off"] :is(.riff-record, .riff-deck-part, .riff-sleeve, .riff-deck-board, .riff-rack, .riff-turntable-extras) {
	display: none !important;
}

#riff[data-riff-turntable="off"] .riff-stage > .riff-cover {
	translate: none;
}

/* ---- The views (registry.js, now-playing.js): Now Playing shows one at a
   time, each taking the whole screen above the bar. A view with a region of
   its own, such as the lyrics, takes the stage's place while it shows; the
   album, the cover or the turntable, is the stage itself. */
.riff-view {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(16px, 4vw, 56px);
	scrollbar-width: thin;
	color-scheme: dark;
}

.riff-view:focus {
	outline: none;
}

.riff-np[data-riff-screen="own"] :is(.riff-stage, .riff-deck-board) {
	display: none;
}

/* The place under the deck, for what a plugin adds with the
   riff_below_turntable action: taking no room unless something in it is
   showing, and only where the turntable is the view, so the deck keeps its
   size as the record comes and goes. On a wide screen it is the view's last
   row; on a touch screen on its side, the foot of the controls. */
.riff-turntable-extras {
	display: none;
}

#riff:not([data-riff-turntable="off"]) .riff-turntable-extras:has(> :not([hidden])) {
	display: flex;
	flex: none;
	grid-area: 2 / 1;
	gap: 16px;
	box-sizing: border-box;
	width: min(100%, 640px);
	height: 56px;
	height: clamp(44px, 9dvh, 72px);
	margin-inline: auto;
	padding: 0 24px 16px;
	color: var(--riff-accent);
}

#riff:not([data-riff-turntable="off"]) .riff-np-body:has(.riff-turntable-extras > :not([hidden])) {
	grid-template-rows: minmax(0, 1fr) auto;
}

/* The screen as a turntable: a touch screen wider than it is tall and no
   taller than a phone, as an unfolded iPhone Duo is (890 by 626) and any
   phone on its side, is the deck itself. The whole screen is the plinth;
   the platter and the record on it fill its height on the left, the arm
   over them, and down the right the strip a deck keeps its controls in:
   the title, the seek line, the transport and the chips. Opening the phone
   brings the record out of its sleeve onto the platter, the sleeve drawn
   away; closing it puts the record back in, and Now Playing is the phone's
   again (now-playing.js, deck()). By the screen's shape, never the device,
   as WebKit and Apple ask. */
@media (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 760px) {

	#riff .riff-np {
		bottom: 0;
		z-index: 3;
		padding: var(--riff-safe-t) var(--riff-safe-r) var(--riff-safe-b) var(--riff-safe-l);
		background:
			radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / 0.035), transparent 60%),
			linear-gradient(160deg, #222 0%, #181818 60%, #141414);
	}

	#riff .riff-np-bg {
		background: none;
	}

	/* the head floats over the plinth's corner: close, and Song or video */
	#riff .riff-np-head {
		position: absolute;
		z-index: 2;
		top: var(--riff-safe-t);
		left: var(--riff-safe-l);
		display: flex;
		gap: 8px;
		height: 56px;
		padding: 0 8px;
	}

	#riff .riff-np-head [data-riff-action="close"] {
		display: inline-flex;
	}

	#riff .riff-np-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(224px, 30%, 300px);
		grid-template-rows: minmax(0, 1fr) auto;
		height: 100%;
	}

	#riff .riff-stage {
		grid-row: 1 / span 2;
		grid-column: 1;
		padding: 4% 2% 4% 4%;
	}

	/* the deck alone, as large as the stage holds it: the record at the
	   platter, the arm's reach to its right, all inside the stage */
	:root #riff .riff-np .riff-stage > :is(.riff-cover, .riff-record, .riff-deck-part) {
		--riff-deck: 1;
		--riff-deck-screen: 1;
		--riff-out-scale: 1;
		--riff-out-record: -12%;
		--riff-out-drop: -3%;
		width: min(70cqw, 80cqh);
		max-width: none;
		height: min(70cqw, 80cqh);
		max-height: none;
	}

	/* In its sleeve, the record waits off the deck's left with the sleeve
	   round it; out, it slides right onto the platter while the sleeve, a
	   beat behind, is drawn away the other way. */
	#riff .riff-stage > :is(.riff-cover, .riff-record) {
		translate: -58% var(--riff-out-drop);
	}

	#riff .riff-stage > .riff-cover {
		transition: translate 0.75s var(--riff-hand) 0.08s, scale 0.75s var(--riff-hand) 0.08s, opacity 0.4s 0.45s;
	}

	#riff[data-riff-deck="out"] .riff-stage > .riff-record {
		translate: var(--riff-out-record) var(--riff-out-drop);
	}

	#riff[data-riff-deck="out"] .riff-stage > .riff-cover {
		translate: -170% var(--riff-out-drop);
		scale: 0.7;
		opacity: 0;
		pointer-events: none;
	}

	#riff .riff-stage > .riff-sleeve {
		display: block;
	}

	/* the screen is the plinth, so the deck's own board is not drawn */
	#riff .riff-plinth::before {
		display: none;
	}

	/* the controls' strip: a little apart from the deck, set into the plinth */
	#riff .riff-np-panel {
		display: flex;
		grid-row: 1;
		grid-column: 2;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		min-height: 0;
		padding: 56px 20px 8px 8px;
	}

	#riff .riff-np-controls {
		margin: 4px -8px 0;
	}

	/* each part of the strip keeps its height, and the names grow and
	   shrink with the screen's, so a long one wraps rather than crowd the
	   seek line */
	#riff .riff-np-panel > * {
		flex-shrink: 0;
	}

	/* and on a screen too short for all of it, the strip scrolls rather
	   than spill onto what is under it */
	#riff .riff-np-panel {
		justify-content: safe center;
		overflow-y: auto;
		scrollbar-width: none;
	}

	#riff .riff-np-title {
		font-size: clamp(18px, 5.6dvh, 24px);
	}

	#riff .riff-np-sub {
		font-size: clamp(13px, 3.8dvh, 16px);
	}

	/* Shuffle and repeat are about the queue, so on the deck they are in Up
	   next, and the strip keeps only the skips. */
	#riff .riff-np-controls :is([data-riff-action="shuffle"], [data-riff-action="repeat"]) {
		display: none;
	}

	#riff .riff-queue-modes {
		display: flex;
	}

	/* in the strip the views' buttons wrap onto a second row rather than
	   scroll, so every one shows beside the deck */
	#riff .riff-chips {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 0;
		margin: 12px -8px 0;
		padding: 0;
		overflow: visible;
	}

	#riff .riff-chip {
		flex-basis: 40px;
		min-height: 48px;
		padding: 4px 0;
		font-size: 11px;
	}

	/* what a plugin adds, at the foot of the controls' strip */
	#riff:not([data-riff-turntable="off"]) .riff-turntable-extras:has(> :not([hidden])) {
		grid-area: 2 / 2;
		width: auto;
		height: 48px;
		height: clamp(40px, 10dvh, 56px);
		margin: 0;
		padding: 0 20px 8px 8px;
	}

	/* Up next and the other panels open in the controls' strip, never over
	   the deck: the turntable keeps turning where it is. */
	#riff .riff-side {
		--riff-side-place: strip;

		/* from the window's top, for a wash that lines up with Now Playing's */
		--riff-side-top: 0px;
		inset: 0 0 0 auto;
		width: clamp(224px, 30%, 300px);
		padding: var(--riff-safe-t) var(--riff-safe-r) var(--riff-safe-b) 0;
		background: #181818;
	}

	#riff .riff-queue-head {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* The deck's own controls on its plinth: start and stop at the front
	   left, a low key as a direct-drive deck's is, the two speeds beside it
	   with a lamp lit in the strobe's amber for the one chosen, and the
	   pitch fader at the deck's right, below the arm's rest, plus towards
	   the hand as on the deck it is drawn after. */
	#riff .riff-deck-board {
		display: block;
		position: relative;
		z-index: 1;
		grid-area: 1 / 1 / span 2 / 2;
		pointer-events: none;
	}

	#riff .riff-deck-board > * {
		position: absolute;
		pointer-events: auto;
	}

	#riff .riff-start,
	#riff .riff-speeds button {
		height: 30px;
		border: 0;
		border-radius: 4px;
		background: linear-gradient(#2c2c2c, #1d1d1d);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.6);
		color: #b9b9b9;
		font-size: 10px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		cursor: pointer;
	}

	#riff .riff-start {
		bottom: 4%;
		left: 4%;
		width: 104px;
		height: 40px;
		padding: 0 8px;
		letter-spacing: 0.08em;
	}

	#riff .riff-start:active,
	#riff .riff-speeds button:active {
		background: #181818;
		box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.7);
	}

	#riff .riff-speeds {
		bottom: 4%;
		left: calc(4% + 116px);
		display: flex;
		gap: 6px;
	}

	#riff .riff-speeds button {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		width: 52px;
		height: 40px;
		justify-content: center;
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	#riff .riff-speeds button::before {
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #3a2a20;
	}

	#riff .riff-speeds button[aria-checked="true"] {
		color: var(--riff-fg);
	}

	#riff .riff-speeds button[aria-checked="true"]::before {
		background: #ff9a50;
		box-shadow: 0 0 6px rgb(255 150 80 / 0.8);
	}

	#riff .riff-start:focus-visible,
	#riff .riff-speeds button:focus-visible,
	#riff .riff-pitch input:focus-visible {
		outline: var(--riff-focus-ring);
		outline-offset: var(--riff-focus-ring-offset);
	}

	#riff .riff-pitch {
		right: 3%;
		bottom: 4%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		height: 42%;
		color: #8d8d8d;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	#riff .riff-pitch input {
		flex: 1;
		width: 28px;
		margin: 0;
		background: none;
		writing-mode: vertical-lr;
		appearance: none;
		cursor: pointer;
	}

	#riff .riff-pitch input::-webkit-slider-runnable-track {
		width: 4px;
		border-radius: 2px;
		background: #0c0c0c;
		box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.8), 0 1px 0 rgb(255 255 255 / 0.05);
	}

	#riff .riff-pitch input::-moz-range-track {
		width: 4px;
		border-radius: 2px;
		background: #0c0c0c;
	}

	#riff .riff-pitch input::-webkit-slider-thumb {
		width: 26px;
		height: 14px;
		margin-left: -11px;
		border-radius: 3px;
		background: linear-gradient(#3a3a3a, #232323);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 #555, 0 2px 3px rgb(0 0 0 / 0.6);
		appearance: none;
	}

	#riff .riff-pitch input::-moz-range-thumb {
		width: 26px;
		height: 14px;
		border: 0;
		border-radius: 3px;
		background: linear-gradient(#3a3a3a, #232323);
	}

	/* Start and stop is on the plinth, so the strip's own play button goes,
	   the rest of the transport drawn together */
	#riff .riff-np-panel .riff-np-controls [data-riff-action="toggle"] {
		display: none;
	}

	#riff .riff-np-panel .riff-np-controls {
		justify-content: space-around;
	}

	/* The sleeve, stood in the rack once its record is out on the deck, as
	   a record shop shows what is playing: on a wooden ledge, leaning back
	   a little. */
	#riff .riff-rack {
		display: block;
		position: relative;
		width: min(128px, 46%);
		margin: 0 0 16px;
		opacity: 0;
		transition: opacity 0.4s 0.5s;
	}

	#riff[data-riff-deck="out"] .riff-rack {
		opacity: 1;
	}

	#riff .riff-rack img {
		display: block;
		width: 100%;
		aspect-ratio: 1;
		border-radius: 3px;
		object-fit: cover;
		box-shadow: 0 10px 20px rgb(0 0 0 / 0.5);
		transform: perspective(400px) rotateX(4deg);
		transform-origin: bottom;
	}

	#riff .riff-rack::after {
		content: "";
		position: absolute;
		right: -8%;
		bottom: -6px;
		left: -8%;
		height: 6px;
		border-radius: 2px;
		background: linear-gradient(#8a5a34, #5d3b20);
		box-shadow: 0 3px 6px rgb(0 0 0 / 0.5);
	}

	/* the phone's chips, such as Lyrics, at any width */
	#riff .riff-chips .riff-chip.riff-mobile {
		display: inline-flex !important;
	}

	#riff .riff-chips .riff-chip.riff-mobile[hidden] {
		display: none !important;
	}
}

/* A phone on its side has no height for the rack: the sleeve stays off. */
@media (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px) {

	#riff .riff-rack {
		display: none;
	}
}

/* Folded part way (where the browser reports the fold: the Viewport
   Segments API, behind a flag in Safari 27.1), nothing lands in the crease.
   Like a book, two pages side by side: the deck on the left page, as large
   as that page holds it, the controls on the right. */
@media (horizontal-viewport-segments: 2) {

	#riff .riff-np {
		padding-right: 0;
		padding-left: 0;
	}

	#riff .riff-np-body {
		grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
		column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
	}

	#riff .riff-np-panel {
		padding-right: calc(20px + var(--riff-safe-r));
		padding-left: 20px;
	}

	/* a panel takes the right page */
	#riff .riff-side {
		width: env(viewport-segment-width 1 0);
	}
}

/* Stood on its edge like a tent or a laptop, one half above the other:
   Now Playing is upright, so the cover stands in the upper half, and the
   lower half, nearer the hand, holds the title, the seek line, the
   transport and Up next. */
@media (vertical-viewport-segments: 2) {

	#riff .riff-np {
		padding-top: 0;
	}

	#riff .riff-np-body,
	#riff:not([data-riff-turntable="off"]) .riff-np-body:has(.riff-turntable-extras > :not([hidden])) {
		display: grid;
		grid-template-rows: env(viewport-segment-height 0 0) env(viewport-segment-height 0 1);
		grid-template-columns: minmax(0, 1fr);
		row-gap: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
		height: 100%;
	}

	#riff .riff-stage {
		grid-area: 1 / 1;
		padding: calc(56px + var(--riff-safe-t)) 24px 16px;
	}

	#riff .riff-np-panel {
		grid-area: 2 / 1;
		align-self: start;
		padding-top: 16px;
	}

	/* no row of their own between the halves and the controls */
	#riff:not([data-riff-turntable="off"]) .riff-turntable-extras:has(> :not([hidden])) {
		display: none;
	}


	#riff .riff-np-head {
		position: absolute;
		z-index: 2;
		top: var(--riff-safe-t);
		right: 0;
		left: 0;
	}
}

/* Words for a screen reader only: a badge's label, the search's count, the
   Play before a row's title and the pauses between what it shows. */
.riff-app-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Forced colours (Windows contrast themes): the browser replaces backgrounds
   with its own and drops box shadows, which is how the seek line, an open
   panel's button, a checked mode and the current track are drawn. Each gets
   the theme's own colours instead: the line in GrayText played through in
   Highlight, and what is selected or current in Highlight, as the system
   draws a selection. Outlines and borders survive as they are. */
@media (forced-colors: active) {

	.riff-line {
		forced-color-adjust: none;
		background: GrayText;
	}

	.riff-line i {
		background: Highlight;
	}

	.riff-line::before {
		display: none;
	}

	/* the volume as the system draws a slider */
	.riff-volume input {
		-webkit-appearance: auto;
		appearance: auto;
	}

	/* the open panel's button in the bar, as a pressed control is drawn */
	#riff .riff-chip {
		border-bottom-color: Canvas;
	}

	#riff .riff-chip[aria-pressed="true"] {
		border-bottom-color: Highlight;
	}

	#riff [data-riff-control][aria-pressed="true"] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	#riff .riff-modes button[aria-checked="true"] {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	#riff .riff-queue-list button[aria-current],
	.riff-row[data-current],
	.riff-app .riff-app-tab[aria-current="page"],
	.riff-app .riff-chip-link[aria-current="true"],
	.riff-standalone .riff-app .riff-app-library-chip[aria-pressed="true"],
	.riff-standalone .riff-app .riff-app-item[aria-current="page"] {
		forced-color-adjust: none;

		/* Above every layout's own shade of current, the frame's
		   included: in a contrast theme the theme's colours win. */
		background: Highlight !important;
		color: HighlightText !important;
	}

	/* What is inside takes the selection's text colour, not Riff's own
	   greys, which would not be the theme's. */
	#riff .riff-queue-list button[aria-current] *,
	.riff-row[data-current] *,
	.riff-app .riff-app-tab[aria-current="page"] *,
	.riff-standalone .riff-app .riff-app-item[aria-current="page"] * {
		color: inherit !important;
	}

	/* On and off, told apart by colour alone. */
	#riff .riff-btn[aria-pressed="true"],
	#riff [data-riff-action="repeat"][data-repeat="all"],
	#riff [data-riff-action="repeat"][data-repeat="one"],
	.riff-app .riff-sort-link[aria-current="true"] {
		forced-color-adjust: none;
		color: Highlight !important;
	}

	.riff-app .riff-app-account-menu a:focus-visible,
	.riff-standalone .riff-app .riff-app-account-menu a:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

/* No lone last word on a line in the player or the Listen app: headings and
   short headings balanced, running text shaped. */
#riff h2,
#riff h3,
.riff-app h1,
.riff-app h2,
.riff-app h3 {
	text-wrap: balance;
}

#riff p,
.riff-app p,
.riff-app li {
	text-wrap: pretty;
}