/* Standalone mode: the Listen block on its own at app/, in Riff's dark.
   Loaded only there, after app.css. No build step: this file is what ships. */

/* ---- The frame: how standalone mode is laid out, sidebar, rail or tabs, in
   this one place, with the very conditions the layout below switches at, so
   the two never disagree. The page's script copies it to
   <html data-riff-frame> before the first paint (templates/standalone.php),
   and the frame, the strip and its panels, shows only where it is
   sidebar. Below 900px that is never, whatever points at the window; a
   short, wide screen is sidebar with a mouse and rail by touch, as the
   layout is. */
:root {
	--riff-frame: tabs;
}

@media (max-width: 899px) and (min-aspect-ratio: 13 / 20), (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px) {

	:root {
		--riff-frame: rail;
	}
}

@media (min-width: 900px) and (not ((pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px))) {

	:root {
		--riff-frame: sidebar;
	}
}

/* ---- Standalone mode: the Listen block on its own at app/, in Riff's dark
   look, with no theme around it. */
.riff-standalone {
	margin: 0;
	background: var(--riff-standalone-bg);
	color: var(--riff-standalone-ink);
	color-scheme: dark;
}

.riff-standalone .riff-app {
	max-width: none;
	min-height: 100dvh;
	padding-bottom: 48px;

	/* The app's accent is the host's, from --riff-standalone-accent
	   (tokens.css), never written inline. */
	--riff-app-accent: var(--riff-standalone-accent);

	/* The chrome is black and white; colour comes from the music. The player
	   sets --riff-cover-accent on the body from the cover playing, or the
	   site's --riff-accent for a grey one (now-playing.js). Before anything
	   plays the app is the text's colour alone. Liked songs is a wash of it,
	   darkened so its heart, in the text's colour, holds 3:1 on it. */
	--riff-liked: linear-gradient(135deg, color-mix(in srgb, var(--riff-standalone-bg) 45%, transparent), color-mix(in srgb, var(--riff-standalone-bg) 78%, transparent)) var(--riff-cover-accent, var(--riff-app-ink));
	--riff-on-liked: var(--riff-standalone-ink);
}

/* A link in the app's words, as Add your first album in an empty library is:
   the accent, underlined, so it reads as a link in any colour. */
.riff-standalone .riff-app :is(p, li, dd) > a:not([class]) {
	color: var(--riff-cover-accent, var(--riff-app-ink));
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Search's Browse tiles: shades of the accent on the app's black, each with
   its words in the text's colour at 4.5:1, in place of the palette the
   Listen block keeps in a theme. */
.riff-standalone .riff-app .riff-browse-tile {
	background: color-mix(in oklab, var(--riff-cover-accent, var(--riff-app-ink)) var(--riff-tile-mix, 40%), var(--riff-standalone-bg));
	color: var(--riff-standalone-ink);
}

.riff-standalone .riff-app .riff-browse li:nth-child(2) .riff-browse-tile {
	--riff-tile-mix: 32%;
}

.riff-standalone .riff-app .riff-browse li:nth-child(3) .riff-browse-tile {
	--riff-tile-mix: 25%;
}

.riff-standalone .riff-app .riff-browse li:nth-child(4) .riff-browse-tile {
	--riff-tile-mix: 18%;
}

/* The track playing in a list: its title in the accent. */
.riff-standalone .riff-app .riff-row[data-current] .riff-row-title {
	color: var(--riff-cover-accent, var(--riff-app-ink));
}

/* Liked songs' own page washes its header in the accent too, over the tint
   its header names for the Listen block in a theme. */
.riff-standalone .riff-album-tinted:has(.riff-album-liked) {
	--riff-album-mix: var(--riff-cover-accent, var(--riff-app-ink)) 40%, var(--riff-app-bg);
}

/* Once the bar shows, the page already keeps its height free below
   (body::after above), so the app fills only what is left: one screen in
   all, never a scroll for a short view. */
html.has-riff .riff-standalone .riff-app {
	min-height: calc(100dvh - var(--riff-bar-h) - var(--riff-safe-b));
}

/* Standalone mode's buttons are pills at every width, as the player's own are;
   the Listen block in a theme keeps the site's corners. */
.riff-standalone .riff-app .riff-pill {
	border-radius: 999px;
	font-weight: 600;
}

/* On a wide screen standalone mode is laid out like the apps people know: a
   column on the left with the site's name, search and the views, and the view
   beside it. The column stays put while the view scrolls. Not on a phone on
   its side, however wide: that is laid out as a phone, below. */
@media (min-width: 900px) and (not ((pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px))) {

	.riff-standalone .riff-app {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
		padding: 0;
	}

	.riff-standalone .riff-app-bar {
		position: sticky;
		top: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 2px;
		box-sizing: border-box;
		height: 100dvh;
		margin: 0;
		padding: 24px 12px;
		overflow-y: auto;
		border-right: 1px solid var(--riff-app-line);
		border-bottom: 0;

		/* Sticky, so it stacks on its own: above the view, or the account menu
		   it holds would open under the covers. The search panel, at the app's
		   root, is above both. */
		z-index: 2;
	}

	html.has-riff .riff-standalone .riff-app-bar {
		height: calc(100dvh - var(--riff-bar-h) - var(--riff-safe-b));
	}

	.riff-standalone .riff-app-brand {
		display: flex;
		order: -2;
		align-items: center;
		gap: 12px;
		min-width: 0;
		margin: 0 0 16px;
		font-size: 20px;
		font-weight: 700;
	}

	.riff-standalone .riff-app-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The toggle needs app.js, which loads after the page: until then it would
	   be a button that does nothing, so it keeps its place but stays unseen,
	   and fades in when it works. */
	.riff-standalone .riff-app:not([data-riff-app-ready]) .riff-app-collapse {
		visibility: hidden;
		opacity: 0;
	}

	.riff-standalone .riff-app .riff-app-collapse {
		display: grid;
		flex: none;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.riff-standalone .riff-app .riff-app-collapse:hover,
	.riff-standalone .riff-app .riff-app-collapse:focus-visible {
		background: var(--riff-app-surface);
	}

	.riff-standalone .riff-app-collapse svg {
		width: 24px;
		height: 24px;
	}

	/* Collapsed: a rail of icons, each with a small label under it, as YouTube
	   Music draws its narrow guide. Search waits for the sidebar to open. */
	.riff-standalone .riff-app[data-sidebar="mini"] {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-bar {
		padding: 24px 4px;
	}

	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-brand {
		justify-content: center;
	}

	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-name,
	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-search {
		display: none;
	}

	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-tab {
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		min-height: 72px;
		padding: 0;
		font-size: 10px;
	}

	.riff-standalone .riff-app-search {
		flex: none;
		order: -1;
		margin: 0 0 16px;
	}

	.riff-standalone .riff-app .riff-app-search input {
		max-width: none;
	}

	/* Who is listening sits at the window's top right, over the view, as the
	   music apps place it; the column keeps the views. */
	.riff-standalone .riff-app .riff-app-account,
	.riff-standalone .riff-app .riff-app-signin {
		position: fixed;
		top: 16px;
		right: 24px;
		z-index: 5;
		margin: 0;
	}

	/* In the sidebar's column the offer is a card at its own height. */
	.riff-standalone .riff-app-install {
		flex: none;
		margin-top: 16px;
	}

	/* Your Library, in the sidebar: a head with New playlist,
	   chips, then a row for each thing with its artwork and what it is. */
	.riff-standalone .riff-app-library {
		display: block;
		order: 1;
		min-width: 0;
		margin: 16px 0 0;
		padding: 16px 0 0;
		border-top: 1px solid var(--riff-app-line);
	}

	.riff-standalone .riff-app-library-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin: 0 4px 12px 12px;
	}

	.riff-standalone .riff-app .riff-app-library-title {
		color: var(--riff-app-ink);
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
	}

	.riff-standalone .riff-app .riff-app-library-title:hover,
	.riff-standalone .riff-app .riff-app-library-title[aria-current="page"] {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.riff-standalone .riff-app .riff-app-library-create {
		all: unset;
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		color: var(--riff-app-ink-2);
		cursor: pointer;
	}

	.riff-standalone .riff-app .riff-app-library-create:hover {
		background: var(--riff-app-surface);
		color: var(--riff-app-ink);
	}

	.riff-standalone .riff-app .riff-app-library-create svg {
		width: 20px;
		height: 20px;
	}

	.riff-standalone .riff-app-library-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0 8px 12px;
	}

	.riff-standalone .riff-app .riff-app-library-chip {
		padding: 4px 12px;
		border-radius: 999px;
		background: var(--riff-app-surface);
		color: var(--riff-app-ink);
		font-size: 14px;
		line-height: 24px;
		text-decoration: none;
	}

	.riff-standalone .riff-app .riff-app-library-chip:hover {
		background: color-mix(in srgb, var(--riff-app-ink) 14%, var(--riff-app-bg));
	}

	.riff-standalone .riff-app .riff-app-library-chip[aria-pressed="true"] {
		background: var(--riff-app-ink);
		color: var(--riff-app-bg);
	}

	.riff-standalone .riff-app-library ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.riff-standalone .riff-app-library li[hidden] {
		display: none;
	}

	.riff-standalone .riff-app .riff-app-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px;
		border-radius: 6px;
		color: inherit;
		text-decoration: none;
	}

	.riff-standalone .riff-app .riff-app-item:hover,
	.riff-standalone .riff-app .riff-app-item[aria-current="page"] {
		background: var(--riff-app-surface);
	}

	.riff-standalone .riff-app .riff-app-item:focus-visible,
	.riff-standalone .riff-app .riff-app-library-chip:focus-visible,
	.riff-standalone .riff-app .riff-app-library-create:focus-visible,
	.riff-standalone .riff-app .riff-app-library-title:focus-visible {
		outline: var(--riff-app-focus-ring);
		outline-offset: var(--riff-app-focus-ring-offset);
	}

	/* What is showing has its name in the accent. */
	.riff-standalone .riff-app .riff-app-item[aria-current="page"] .riff-app-item-title {
		color: var(--riff-app-accent);
	}

	.riff-standalone .riff-app-item-art {
		display: grid;
		flex: none;
		place-items: center;
		width: 48px;
		height: 48px;
		overflow: hidden;
		border-radius: 4px;
		background: var(--riff-app-surface);
	}

	.riff-standalone .riff-app-item-round {
		border-radius: 50%;
	}

	.riff-standalone .riff-app-item-art img,
	.riff-standalone .riff-app-item-art .riff-mosaic {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.riff-standalone .riff-app-item-art .riff-mosaic {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	/* Liked songs: the heart on the accent, as the apps draw theirs. */
	.riff-standalone .riff-app-item-heart {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		background: var(--riff-liked);
		color: var(--riff-on-liked);
	}

	.riff-standalone .riff-app-item-heart svg {
		width: 20px;
		height: 20px;
	}

	.riff-standalone .riff-app-item-note svg {
		display: block;
		width: 24px;
		height: 24px;
		stroke: var(--riff-app-ink-2);
	}

	/* Your Library heads its own list here, so the tab for it would say it
	   twice. */
	.riff-standalone .riff-app .riff-app-tab-library {
		display: none;
	}

	.riff-standalone .riff-app-item-mark {
		color: var(--riff-app-accent);
		font-size: 20px;
	}

	.riff-standalone .riff-app-item-text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

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

	.riff-standalone .riff-app-item-title {
		color: var(--riff-app-ink);
		font-size: 15px;
		line-height: 1.4;
	}

	.riff-standalone .riff-app-item-sub {
		color: var(--riff-app-ink-2);
		font-size: 13px;
		line-height: 1.4;
	}

	/* Folded to a rail, the library is its artwork alone. */
	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-library-head,
	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-library-chips {
		display: none;
	}

	/* The names stay for a screen reader, the links' only names on the rail. A
	   block, not the column: a column squeezed into the 1px box crushes them.
	   Clipped, so they don't widen the rail into a scrolling one. */
	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-item-text {
		display: block;
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.riff-standalone .riff-app[data-sidebar="mini"] .riff-app-item {
		justify-content: center;
	}

	.riff-standalone .riff-app .riff-app-tab {
		gap: 16px;
		padding: 0 12px;
		border-radius: 8px;
		font-size: 15px;
	}

	.riff-standalone .riff-app .riff-app-tab svg {
		display: block;
		flex: none;
		width: 24px;
		height: 24px;
	}

	.riff-standalone .riff-app .riff-app-tab:hover {
		background: var(--riff-app-surface);
	}

	.riff-standalone .riff-app .riff-app-tab[aria-current="page"] {
		background: var(--riff-app-surface);
		box-shadow: none;
	}

	.riff-standalone .riff-app .riff-pill {
		min-height: 44px;
		padding: 0 28px;
	}

	.riff-standalone .riff-album-title {
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	/* An album's, artist's or playlist's header: the cover
	   beside a large title, then a row of actions under both, led by a round
	   Play in the accent. The text block gives its parts to the grid. */
	.riff-standalone .riff-album {
		display: grid;
		grid-template-areas:
			"cover ."
			"cover kind"
			"cover title"
			"cover meta"
			"actions actions";
		grid-template-rows: 1fr auto auto auto auto;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: end;
		gap: 0 24px;
	}

	/* A header without a cover, as the Tracks view's, has no gap where the
	   cover would be, so its title lines up with Play and the list. */
	.riff-standalone .riff-album:not(.riff-album-has-cover) {
		column-gap: 0;
	}

	/* A header too narrow for its title beside the cover, as when Up next or
	   About narrows the page on a smaller window, stacks them: the cover, then
	   the title and the rest under it. */
	@container (inline-size < 22em) {

		.riff-standalone .riff-album {
			grid-template-areas:
				"cover"
				"kind"
				"title"
				"meta"
				"actions";
			grid-template-rows: auto;
			grid-template-columns: minmax(0, 1fr);
			gap: 0;
		}

		/* The cover keeps the space under it, so a header without one, as the
		   Tracks view's, starts at the top; it is half the page wide, so it
		   doesn't swing from full width to a third as the page widens past
		   where the two sit side by side. */
		.riff-standalone .riff-album .riff-album-cover {
			width: clamp(96px, 50cqi, var(--riff-album-cover-max));
			margin-bottom: 16px;
		}
	}

	.riff-standalone .riff-album-text {
		display: contents;
	}

	/* The cover, like the title, is sized to the page it heads (the view is
	   the container), not the window, so it gives way when Up next or About
	   narrows the page. */
	.riff-standalone .riff-album-cover {
		grid-area: cover;
		width: clamp(96px, 30cqi, var(--riff-album-cover-max));
	}

	.riff-standalone .riff-album-kind {
		grid-area: kind;
	}

	.riff-standalone .riff-album-meta {
		grid-area: meta;
	}

	/* The title is sized to the page it heads, not the window, so it still
	   fits a word to a line when Up next or About narrows the page. */
	.riff-standalone .riff-app .riff-album-title {
		grid-area: title;
		margin: 4px 0 8px;
		font-size: clamp(28px, 7cqi, 88px);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: -0.04em;
	}

	.riff-standalone .riff-app .riff-album-actions {
		grid-area: actions;
		align-items: center;
		gap: 16px;
		margin: 32px 0 0;
	}

	.riff-standalone .riff-app .riff-album-actions .riff-pill svg {
		display: block;
		width: 28px;
		height: 28px;
	}

	/* The words stay as the buttons' names; the clip hides them. */
	.riff-standalone .riff-album-actions .riff-pill-label {
		position: absolute;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.riff-standalone .riff-app .riff-album-actions [data-riff-app-action="play"] {
		justify-content: center;
		width: 56px;
		height: 56px;
		min-height: 56px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--riff-app-accent);
		color: var(--riff-standalone-on-accent);
		transition: transform 0.15s, background-color 0.15s;
	}

	.riff-standalone .riff-app .riff-album-actions [data-riff-app-action="play"]:hover {
		transform: scale(1.04);
		background: color-mix(in srgb, var(--riff-app-accent) 85%, var(--riff-standalone-ink));
	}

	.riff-standalone .riff-app .riff-album-actions [data-riff-app-action="shuffle"] {
		justify-content: center;
		width: 40px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var(--riff-app-ink-2);
	}

	.riff-standalone .riff-app .riff-album-actions [data-riff-app-action="shuffle"]:hover {
		color: var(--riff-app-ink);
	}

	/* Over an album's tracks: #, Title and a clock, over a rule. */
	.riff-standalone .riff-tracks-head {
		display: flex;
		align-items: center;
		gap: 24px;
		margin: 0 0 8px;
		padding: 0 112px 8px 12px;
		border-bottom: 1px solid var(--riff-app-line);
		color: var(--riff-app-ink-2);
		font-size: 14px;
	}

	.riff-standalone .riff-tracks-head span:first-child {
		width: 40px;
		text-align: center;
	}

	.riff-standalone .riff-tracks-head span:nth-child(2) {
		flex: 1;
	}

	.riff-standalone .riff-tracks-head svg {
		width: 18px;
		height: 18px;
	}

	.riff-standalone .riff-app > *,
	.riff-standalone .riff-album,
	.riff-standalone .riff-album-tracks {
		max-width: none;
		margin-right: 0;
		margin-left: 0;
	}

	.riff-standalone .riff-app-view {
		grid-column: 2;
		min-width: 0;
		container-type: inline-size;
		padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px) 48px;
	}
}

/* On a phone or a tablet, an album, artist or playlist opens as the apps open
   one there: the cover large and centred, the title, the line under it and
   the actions centred below, all on a wash that reaches the screen's edges.
   The view has no panel of its own here, so the wash is let past the view's
   sides, out through the app's gutter, and the app clips it instead. */
@media (max-width: 899px), (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px) {

	.riff-standalone .riff-app {
		overflow-x: clip;
	}

	.riff-standalone .riff-app-view {
		overflow: visible;
	}

	.riff-standalone .riff-album-tinted::before {
		right: calc(-1 * clamp(20px, 5vw, 80px));
		left: calc(-1 * clamp(20px, 5vw, 80px));
	}

	.riff-standalone .riff-album {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
	}

	.riff-standalone .riff-album-cover {
		width: min(66vw, 300px);
		box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);
	}

	.riff-standalone .riff-album-text {
		width: 100%;
	}

	.riff-standalone .riff-app .riff-album-title {
		font-size: clamp(24px, 6.5vw, 36px);
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.riff-standalone .riff-app .riff-album-meta {
		text-wrap: balance;
	}

	.riff-standalone .riff-app .riff-album-actions {
		justify-content: center;
	}
}

/* On a phone the title keeps the row's width: the header already says how
   long the album is, and the apps leave each track's length out there. */
@media (max-width: 599px) {

	.riff-standalone .riff-album-tracks .riff-row-time {
		display: none;
	}
}

/* The bar already says what is playing; the app does not repeat it above the
   library. */
.riff-standalone .riff-now {
	display: none;
}

/* ---- An app, not a page: in the Listen app the frame, the sidebar, the rows,
   the cards, the headings and every control are not text to select, and no
   picture drags out of it, so a drag or a double-click never paints the view
   blue. Only the fields select. The player is controls wherever it plays. */
.riff-standalone .riff-app,
#riff {
	-webkit-user-select: none;
	user-select: none;
}

.riff-standalone .riff-app img,
.riff-standalone .riff-app svg,
#riff img {
	-webkit-user-drag: none;
}

.riff-standalone .riff-app input,
.riff-standalone .riff-app textarea,
#riff input[type="text"],
#riff input[type="search"],
#riff textarea {
	-webkit-user-select: text;
	user-select: text;
}

/* ---- On a phone, standalone mode is laid out as the apps are there: Home,
   Search and Library as tabs along the bottom with the bar docked over them,
   and at the top one slim row, the site's name and who is listening, with the
   lists as chips under it on Home and on each list. The tabs stay in the
   navigation they belong to and are only placed at the bottom, so the order
   a keyboard and a screen reader meet them in is unchanged. A phone on its
   side is a phone at any width. */
@media (max-width: 899px), (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px) {

	.riff-standalone {
		--riff-tabs-h: calc(56px + var(--riff-safe-b));
	}

	.riff-standalone .riff-app {
		padding-top: calc(var(--riff-safe-t) + 8px);
		padding-bottom: calc(var(--riff-tabs-h) + 32px);
	}

	/* The bar sits on the tabs, and the page keeps room for both. */
	.riff-standalone #riff .riff-bar {
		bottom: var(--riff-tabs-h);
		height: var(--riff-bar-h);
		padding-bottom: 0;
	}

	html.has-riff body.riff-standalone::after {
		height: var(--riff-bar-h);
	}

	html.has-riff:has(body.riff-standalone) {
		scroll-padding-bottom: calc(var(--riff-bar-h) + var(--riff-tabs-h) + 16px);
	}

	.riff-standalone #riff .riff-toast {
		bottom: calc(var(--riff-bar-h) + var(--riff-tabs-h) + 16px);
	}

	.riff-standalone .riff-app-bar {
		gap: 0 8px;
		margin-bottom: 24px;
		border-bottom: 0;
	}

	.riff-standalone .riff-app-brand {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		min-width: 0;
		min-height: 48px;
		font-size: 22px;
		font-weight: 700;
	}

	/* There is no sidebar to fold, an installed app's narrow window included. */
	.riff-standalone .riff-app .riff-app-collapse,
	html.riff-frame .riff-standalone .riff-app .riff-app-brand .riff-app-collapse {
		display: none;
	}

	.riff-standalone .riff-app-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.riff-standalone .riff-app .riff-app-account,
	.riff-standalone .riff-app .riff-app-signin {
		order: 1;
		margin: 0;
	}

	.riff-standalone .riff-app .riff-app-signin {
		padding: 0 18px;
		font-size: 14px;
	}

	/* A break: the chips start a line of their own. */
	.riff-standalone .riff-app-bar::before {
		content: "";
		order: 2;
		flex-basis: 100%;
	}

	/* The lists, as chips: a pill inside each 44px tab, filled for the one
	   showing. Only on Home and on the lists themselves; an album, a search or
	   Your Library has its own head. */
	.riff-standalone .riff-app .riff-app-tab {
		order: 3;
		min-height: 44px;
		color: var(--riff-app-ink);
		font-size: 14px;
	}

	.riff-standalone .riff-app .riff-app-tab span {
		padding: 6px 14px;
		border-radius: 999px;
		background: var(--riff-app-surface);
		line-height: 20px;
	}

	.riff-standalone .riff-app .riff-app-tab[aria-current="page"] {
		box-shadow: none;
	}

	.riff-standalone .riff-app .riff-app-tab[aria-current="page"] span {
		background: var(--riff-app-ink);
		color: var(--riff-app-bg);
	}

	.riff-standalone .riff-app-bar:not(:has(> .riff-app-brand:is([data-riff-view="home"], [data-riff-view="albums"], [data-riff-view="artists"], [data-riff-view="tracks"], [data-riff-view="posts"]))) > .riff-app-tab:not(.riff-app-home, .riff-app-tab-search, .riff-app-tab-library) {
		display: none;
	}

	/* Search's field shows on the Search tab, under the top row. */
	.riff-standalone .riff-app .riff-app-search {
		display: none;
		order: 4;
		flex-basis: 100%;
		margin: 8px 0 0;
	}

	.riff-standalone .riff-app-bar:has(> .riff-app-brand[data-riff-view="search"]) .riff-app-search {
		display: flex;
	}

	.riff-standalone .riff-app .riff-app-search input {
		min-height: 48px;
		max-width: none;
		border: 0;
		border-radius: 8px;
		background: var(--riff-app-ink);
		color: var(--riff-app-bg);
		font-size: 16px;
	}

	/* The tabs along the bottom: an icon over its name, a third of the width
	   each, on the bar's own surface. The surface runs on past the screen's
	   foot: Safari on iOS 26 paints the page under its floating toolbar, below
	   where anything fixed to the bottom ends, and the page would scroll past
	   there under the tabs. */
	.riff-standalone .riff-app-bar::after {
		content: "";
		position: fixed;
		right: 0;
		bottom: -50vh;
		left: 0;
		z-index: 3;
		height: calc(var(--riff-tabs-h) + 50vh);
		background: var(--riff-standalone-tabs);
	}

	/* And the status bar's strip at the top in the page's own black, as the
	   apps keep it, so what scrolls up goes under it rather than under the
	   clock. */
	body.riff-standalone::before {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 4;
		height: var(--riff-safe-t);
		background: var(--riff-standalone-bg);
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab:is(.riff-app-home, .riff-app-tab-search, .riff-app-tab-library) {
		position: fixed;
		bottom: 0;
		z-index: 4;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2px;
		width: calc(100% / 3);
		height: var(--riff-tabs-h);
		padding-bottom: var(--riff-safe-b);
		color: var(--riff-app-ink-2);
		font-size: 11px;
		font-weight: 500;
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-home {
		left: 0;
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab-search {
		left: calc(100% / 3);
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab-library {
		left: calc(200% / 3);
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab:is(.riff-app-home, .riff-app-tab-search, .riff-app-tab-library) span {
		padding: 0;
		background: none;
		color: inherit;
		line-height: 16px;
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab:is(.riff-app-home, .riff-app-tab-search, .riff-app-tab-library) svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab:is(.riff-app-home, .riff-app-tab-search, .riff-app-tab-library)[aria-current="page"] {
		color: var(--riff-app-ink);
	}
}

/* A short screen, wider for its height than a phone held upright, as a
   folded iPhone Duo's outer screen is and a phone on its side: the tabs go
   down the right edge, where iOS keeps its own bars on such a screen, the
   first under the status bar's corner, and the page gets back the height
   they took along the bottom. The bar keeps the bottom, beside them. By the
   screen's shape, never the device. */
@media (max-width: 899px) and (min-aspect-ratio: 13 / 20), (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px) {

	.riff-standalone {
		--riff-tabs-h: var(--riff-safe-b);
		--riff-rail-w: calc(72px + var(--riff-safe-r));
	}

	.riff-standalone .riff-app {
		padding-right: calc(var(--riff-rail-w) + 16px);
	}

	.riff-standalone #riff .riff-bar,
	.riff-standalone #riff .riff-toast {
		right: var(--riff-rail-w);
	}

	/* the bar reaches the screen's foot, its contents above the home
	   indicator, so nothing scrolls past under it */
	.riff-standalone #riff .riff-bar {
		bottom: 0;
		height: calc(var(--riff-bar-h) + var(--riff-safe-b));
		padding-bottom: var(--riff-safe-b);
	}

	/* and its surface on past the foot, under Safari's floating toolbar, as
	   the tabs' is along the bottom */
	.riff-standalone #riff .riff-bar::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: 50vh;
		background: inherit;
	}

	.riff-standalone .riff-app-bar::after {
		top: 0;
		left: auto;
		width: var(--riff-rail-w);
		height: auto;
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab:is(.riff-app-home, .riff-app-tab-search, .riff-app-tab-library) {
		right: 0;
		bottom: auto;
		left: auto;
		width: var(--riff-rail-w);
		height: 64px;
		padding-right: var(--riff-safe-r);
		padding-bottom: 0;
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-home {
		top: calc(var(--riff-safe-t) + 48px);
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab-search {
		top: calc(var(--riff-safe-t) + 112px);
	}

	.riff-standalone .riff-app .riff-app-bar .riff-app-tab-library {
		top: calc(var(--riff-safe-t) + 176px);
	}
}

/* Wider still, as an unfolded iPhone Duo and a phone on its side are, an
   album, artist or playlist opens as a gatefold sleeve does: the cover on
   the left page, held there, and the title, the actions and the tracks on
   the right page, which scrolls. */
@media (max-width: 899px) and (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 760px), (pointer: coarse) and (min-aspect-ratio: 5 / 4) and (max-height: 500px) {

	.riff-standalone .riff-app-view:has(> .riff-album) {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: 32px;
		align-items: start;
	}

	.riff-standalone .riff-app-view:has(> .riff-album) > * {
		grid-column: 2;
	}

	.riff-standalone .riff-app-view > .riff-album {
		display: contents;
	}

	.riff-standalone .riff-app-view > .riff-album > .riff-album-cover {
		position: sticky;
		top: calc(var(--riff-safe-t) + 16px);
		grid-row: 1 / span 2;
		grid-column: 1;
		justify-self: center;
		width: min(100%, calc(100dvh - var(--riff-bar-h) - var(--riff-safe-t) - var(--riff-safe-b) - 48px));
	}

	.riff-standalone .riff-app-view > .riff-album > .riff-album-text {
		grid-row: 1;
		grid-column: 2;
		text-align: start;
	}

	.riff-standalone .riff-app .riff-app-view > .riff-album .riff-album-actions {
		justify-content: flex-start;
	}

	.riff-standalone .riff-app-view:has(> .riff-album) > .riff-album-tracks {
		grid-row: 2;
		margin-top: 16px;
	}
}