/**
 * ogou-app.css — the app, dressed as an app.
 *
 * Loaded only on `/app/` screens and scoped to `body.ogou-app-screen`, so the
 * website keeps every pixel it has. This file is not a theme; it is the
 * difference between a website in a frame and something that feels native on
 * the phone it is running on.
 *
 * Four things do almost all of that work, and the shell had none of them.
 *
 * 1. THE TYPEFACE. `system-ui` on Android resolves to Roboto, and Roboto is
 *    what the eye reads as "this is an Android app" before it reads a single
 *    word. Inter is bundled and used instead — the closest thing to SF Pro
 *    that can be shipped with a plugin — so the app looks the same on a Tecno
 *    in Pétion-Ville as on an iPhone.
 *
 * 2. THE LARGE TITLE. A screen opens with its name set big and in the flow,
 *    and the name shrinks into the bar as the content scrolls under it. No
 *    other platform does this, which is exactly why it reads as Apple.
 *
 * 3. THE FLOATING TAB BAR. iOS 26 lifted the tab bar off the bottom edge into
 *    a capsule with the content visibly sliding beneath it. A bar glued to the
 *    edge of the screen is the single most dated thing in the old shell.
 *
 * 4. REAL TRANSLUCENCY. The old bar was 94% opaque with a 16px blur, which is
 *    a grey rectangle. Glass needs to be thin and it needs saturation — the
 *    colour of what is behind has to come through, or it is frosted plastic.
 *
 * @package Ogou_Music
 */

/* -------------------------------------------------------------------------
   Inter, standing in for SF Pro.
   `swap` so a slow connection shows text immediately in the fallback.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-400.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-500.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-600.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Ogou UI';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext-700.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   Tokens.

   The greys are Apple's own dark-mode values rather than invented ones —
   `secondaryLabel` really is white at 60%, and a screen built from guesses at
   those numbers reads as an imitation even when nobody can say why. The tint
   is the one thing deliberately not Apple's: iOS uses blue, and this is
   Dynasty, so the gold already on the site carries through.
   ------------------------------------------------------------------------- */
body.ogou-app-screen {
	--ios-bg: #000;
	--ios-raised: #1c1c1e;
	--ios-raised-2: #2c2c2e;
	--ios-sep: rgba(84, 84, 88, 0.65);
	--ios-label: #fff;
	--ios-label-2: rgba(235, 235, 245, 0.6);
	--ios-label-3: rgba(235, 235, 245, 0.3);
	--ios-tint: #ffb020;
	--ios-tint-soft: rgba(255, 176, 32, 0.16);

	/* The glass: thin, saturated, with a lit top edge. */
	--glass: rgba(18, 18, 20, 0.62);
	--glass-blur: blur(34px) saturate(190%);
	--glass-edge: rgba(255, 255, 255, 0.14);

	--nav-h: 48px;
	--tab-h: 58px;

	/*
	 * One gutter, used by everything.
	 *
	 * The first pass set it in five places at 16px and the screen still read
	 * as full — because a gutter is not only the distance to the edge, it is
	 * the distance that tells the eye where the content stops. 20 is what
	 * Apple uses either side of a large title, and matching it is why a screen
	 * reads as roomy rather than as a page that ran out of room.
	 */
	--gutter: 20px;

	background: var(--ios-bg) !important;
	color: var(--ios-label);
	font-family: 'Ogou UI', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;

	/* Room for the floating bar, plus the home indicator under it. */
	padding-bottom: calc(var(--tab-h) + 46px + env(safe-area-inset-bottom, 0px)) !important;
}

/*
 * The website's panel, taken off.
 *
 * `.ogou-store` is a card: a bordered, rounded, 26-pixel-radius box with two
 * coloured washes behind it and 32 pixels of padding. On a web page that is
 * the shop sitting inside the site around it. In the app it is the whole
 * screen, so what it draws is a frame around the edge of the phone, with a
 * corner radius that answers to nothing and a glow that belongs to a page
 * that is not there. An app screen is not a card on anything.
 */
body.ogou-app-screen .ogou,
body.ogou-app-screen .ogou-store,
body.ogou-app-screen .ogou-artists,
body.ogou-app-screen .ogou-app-body {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.ogou-app-screen .ogou-store,
body.ogou-app-screen .ogou-artists { padding-top: 0 !important; }

/* -------------------------------------------------------------------------
   The navigation bar, and the large title under it.
   ------------------------------------------------------------------------- */
.ogou-ios-nav {
	position: sticky; top: 0; z-index: 60;
	display: flex; align-items: center; gap: 4px;
	height: var(--nav-h);
	padding: 0 6px;
	padding-top: env(safe-area-inset-top, 0px);
	background: transparent;
	transition: background .22s ease, border-color .22s ease;
	border-bottom: 1px solid transparent;
}

/*
 * The bar only becomes glass once something has scrolled under it.
 *
 * At the top of a screen there is nothing behind it to refract, and a frosted
 * strip over a black background is just a lighter rectangle. Apple does the
 * same: the bar is invisible until it has a reason to exist.
 */
.ogou-ios-nav.is-compact {
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-bottom-color: var(--ios-sep);
}

.ogou-ios-back {
	display: inline-flex; align-items: center; gap: 1px;
	flex: 0 0 auto;
	height: 40px; padding: 0 8px 0 2px;
	border: 0; background: none;
	color: var(--ios-tint);
	font-family: inherit;
	font-weight: 500;
	font-size: 17px;
	line-height: 1;
	letter-spacing: -0.02em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ogou-ios-back svg { width: 22px; height: 22px; display: block; stroke-width: 2.6; }
.ogou-ios-back:active { opacity: .35; }

/* The small title: only present once the big one has gone. */
.ogou-ios-nav .ogou-ios-small {
	flex: 1 1 auto; min-width: 0;
	text-align: center;
	font-family: inherit;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	color: var(--ios-label);
	letter-spacing: -0.02em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	opacity: 0;
	transform: translateY(7px);
	transition: opacity .2s ease, transform .2s ease;
}
.ogou-ios-nav.is-compact .ogou-ios-small { opacity: 1; transform: none; }

/* Keeps the small title centred when there is a back button on the left. */
.ogou-ios-nav .ogou-ios-spacer { flex: 0 0 auto; width: 44px; }

.ogou-ios-large {
	margin: 2px 0 14px;
	padding: 0 var(--gutter);
	font-family: inherit;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.18;
	letter-spacing: -0.028em;
	color: var(--ios-label);
}

/* -------------------------------------------------------------------------
   The tab bar: a capsule that floats, with the screen running under it.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-appbar {
	position: fixed; z-index: 70;
	left: 12px; right: 12px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	top: auto;
	display: flex; align-items: stretch;
	height: var(--tab-h);
	padding: 0 4px;
	border-radius: 999px;
	border: 1px solid var(--glass-edge);
	background: var(--glass);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);

	/*
	 * Two shadows doing different jobs: the wide soft one lifts the capsule
	 * off the artwork behind it, and the hairline inset along the top is the
	 * lit edge that makes glass look like glass rather than like a hole.
	 */
	box-shadow:
		0 10px 34px rgba(0, 0, 0, .55),
		inset 0 1px 0 rgba(255, 255, 255, .1);
}

body.ogou-app-screen .ogou-appbar a {
	flex: 1 1 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 3px;
	padding: 0;
	border: 0; background: none;
	color: var(--ios-label-2);
	text-decoration: none;
	font-family: inherit;
	font-weight: 500;
	font-size: 10.5px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	-webkit-tap-highlight-color: transparent;
	transition: color .14s ease, transform .14s ease;
}
body.ogou-app-screen .ogou-appbar a svg,
body.ogou-app-screen .ogou-appbar a img { width: 25px; height: 25px; display: block; }
body.ogou-app-screen .ogou-appbar a.is-on { color: var(--ios-tint); }
body.ogou-app-screen .ogou-appbar a:active { transform: scale(.9); }

/*
 * The mini player, lifted clear of the capsule.
 *
 * It was already lifted — but only inside `@media (display-mode: standalone)`,
 * which is true in the installed app and false the moment somebody opens an
 * `/app/` address in an ordinary browser tab. There the player sat at the
 * bottom of the screen with the tab bar on top of it, and now that the tab bar
 * floats it would sit under a capsule with gaps around it, which is worse: it
 * looks like a mistake rather than a stack.
 *
 * The sum is the capsule's own offset, its height, and a gap: 10 + 58 + 10.
 */
/*
 * The lift, and nothing else.
 *
 * The first version of this also restyled the player — its corners, its
 * glass, its left and right edges — and broke it. That was a mistake of a
 * particular kind, worth naming: the mini player is `#ogou-mini`, it carries
 * its own authoritative layout in an ID-scoped block, and on a phone it is a
 * CSS grid with named areas. I restyled it without reading any of that, from
 * a guess about its class name, and `!important` meant the guess won.
 *
 * It already looks like the rest of the app — translucent, rounded, inset
 * from both edges — because it was built that way. The only thing it did not
 * know is that there is now a capsule under it. That is the one thing changed
 * here: 10px of offset, 58 of bar, 10 of gap.
 */
body.ogou-app-screen #ogou-mini {
	bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
}
body.ogou-app-screen .ogou-like-msg {
	bottom: calc(146px + env(safe-area-inset-bottom, 0px));
}

/* -------------------------------------------------------------------------
   The grid, the way a music app lays one out.

   The website's card is a shop card: a bordered box with a body, a price and
   a button, which is correct on a shop page. In an app it is five boxes in a
   row, each with its own outline, and the artwork — the only part anybody
   actually looks at — is the smallest thing on it.

   So the box goes. The artwork is the card. Everything else is a caption.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 14px;
	padding: 0 var(--gutter);
}
@media (min-width: 560px) {
	body.ogou-app-screen .ogou-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
	body.ogou-app-screen .ogou-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.ogou-app-screen .ogou-card {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	overflow: visible;
}

/*
 * Rounded artwork, over the site's `border-radius: 0 !important`.
 *
 * The square corner is correct on the website, where the artwork is the top
 * half of a bordered card and rounding it would leave two odd notches against
 * the straight sides below. Here there is no card, so the artwork is the only
 * shape on the screen — and a square-cornered tile is the other half of why
 * this looked like an Android app from 2016.
 */
body.ogou-app-screen .ogou-card .ogou-cover {
	border-radius: 11px !important;
	overflow: hidden !important;
	background: var(--ios-raised) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
body.ogou-app-screen .ogou-card .ogou-cover .ogou-cover-img { border-radius: 11px !important; }
body.ogou-app-screen .ogou-card:active .ogou-cover { transform: scale(.97); }
body.ogou-app-screen .ogou-cover { transition: transform .16s ease; }

/*
 * The buttons that used to sit on the artwork.
 *
 * Share and add-to-playlist were floating over the cover of every tile, three
 * controls deep on a picture the size of a stamp. Both live on the record's
 * own page, one tap away, where there is room to label them. What stays is
 * the like — it is worth money to the artist — and play.
 */
body.ogou-app-screen .ogou-grid .ogou-share,
body.ogou-app-screen .ogou-grid .ogou-queue-add { display: none !important; }

body.ogou-app-screen .ogou-grid .ogou-like {
	top: 7px; left: 7px; right: auto;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .42);
	-webkit-backdrop-filter: blur(12px) saturate(170%);
	backdrop-filter: blur(12px) saturate(170%);
	font-size: 11px;
}

/*
 * Play, small and in the corner, the way a music app does it.
 *
 * Every line here is `!important`, which is not laziness. The site's sheet
 * pins this button to the middle of the artwork at 64 pixels with `!important`
 * on nine properties — a deliberate wall, put there so a theme could not move
 * it. Overriding a wall takes a wall. The selector is one class deeper than
 * the one it answers, so this does not become a fight that the next change
 * wins by accident.
 */
body.ogou-app-screen .ogou-grid .ogou-cover .ogou-play-overlay {
	top: auto !important;
	left: auto !important;
	right: 7px !important;
	bottom: 7px !important;
	transform: none !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
}
body.ogou-app-screen .ogou-grid .ogou-cover .ogou-play-overlay svg { width: 17px !important; height: 17px !important; }
body.ogou-app-screen .ogou-grid .ogou-cover .ogou-play-overlay:active { transform: scale(.88) !important; }

body.ogou-app-screen .ogou-card-body {
	padding: 9px 1px 0 !important;
	background: none !important;
	border: 0 !important;
}
body.ogou-app-screen .ogou-card-body h4 {
	margin: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: 14.5px;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--ios-label);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ogou-app-screen .ogou-card-body h4 a { color: inherit; text-decoration: none; }

body.ogou-app-screen .ogou-by {
	margin: 1px 0 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.35;
	color: var(--ios-label-2);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.ogou-app-screen .ogou-by a.ogou-artist { color: var(--ios-label-2); font-weight: 400; }

body.ogou-app-screen .ogou-feat {
	margin: 0;
	font-size: 12.5px;
	color: var(--ios-label-3);
}
body.ogou-app-screen .ogou-feat-lbl,
body.ogou-app-screen .ogou-feat-sep { color: var(--ios-label-3); }
body.ogou-app-screen a.ogou-feat-link { color: var(--ios-label-2); border-bottom: 0; }

/* The genre line is the website's filing system, not a listener's. */
body.ogou-app-screen .ogou-grid .ogou-genre { display: none !important; }

body.ogou-app-screen .ogou-card-foot {
	margin-top: 7px;
	gap: 8px;
}
body.ogou-app-screen .ogou-price {
	font-family: inherit;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.3;
	color: var(--ios-label-2);
}
body.ogou-app-screen .ogou-price.is-free { color: var(--ios-tint); }

body.ogou-app-screen .ogou-card-foot .ogou-btn-sm {
	padding: 5px 13px;
	border-radius: 999px;
	border: 0;
	background: var(--ios-tint-soft);
	color: var(--ios-tint);
	font-family: inherit;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.3;
	letter-spacing: -0.005em;
	box-shadow: none;
}
body.ogou-app-screen .ogou-card-foot .ogou-btn-sm:active { transform: scale(.94); }

/* -------------------------------------------------------------------------
   Search: the rounded field iOS puts under a large title.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-search {
	padding: 0 var(--gutter);
	margin: 0 0 20px;
}
body.ogou-app-screen .ogou-search input[type="search"] {
	width: 100%;
	box-sizing: border-box;
	height: 38px;
	padding: 0 14px;
	border: 0;
	border-radius: 11px;
	background: var(--ios-raised);
	color: var(--ios-label);
	font-family: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.01em;
	-webkit-appearance: none;
	appearance: none;
}
body.ogou-app-screen .ogou-search input[type="search"]::placeholder { color: var(--ios-label-3); }
body.ogou-app-screen .ogou-search input[type="search"]:focus {
	outline: 2px solid var(--ios-tint);
	outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   The site's name in front of the screen's.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-ios-large {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 9px;
}
body.ogou-app-screen .ogou-ios-brand { color: var(--ios-tint); }

/*
 * A dash, set quiet.
 *
 * It is punctuation between two names, not a third thing to read — at full
 * weight and full white it takes as much attention as either side of it.
 */
body.ogou-app-screen .ogou-ios-dash {
	color: var(--ios-label-3);
	font-weight: 400;
}

/* The mark, when one is set, standing where the name would be. */
body.ogou-app-screen .ogou-ios-mark {
	height: 28px;
	width: auto;
	display: block;
	align-self: center;
}

/* -------------------------------------------------------------------------
   The sheet behind "More", and the button that closes it.
   ------------------------------------------------------------------------- */

/*
 * The close button, taken out of the theme's hands.
 *
 * It was being drawn by whatever styles a bare `<button>` picks up on this
 * site — a mauve outline with mauve text, which is a colour that appears
 * nowhere else in the app and belongs to a page builder that is not even
 * installed any more. A sheet's cancel is not a decorative button; on iOS it
 * is a full-width row in its own right, set apart from the list above it, and
 * it says the one thing it does.
 */
body.ogou-app-screen .ogou-appmenu-cancel {
	display: block !important;
	width: 100% !important;
	margin: 10px 0 0 !important;
	padding: 15px 16px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--ios-raised-2) !important;
	color: var(--ios-tint) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}
body.ogou-app-screen .ogou-appmenu-cancel:hover,
body.ogou-app-screen .ogou-appmenu-cancel:focus {
	background: var(--ios-raised-2) !important;
	color: var(--ios-tint) !important;
}
body.ogou-app-screen .ogou-appmenu-cancel:active { transform: scale(.98); }

/* -------------------------------------------------------------------------
   "Keep on this phone", in the library.

   Same leak as the sheet's close button: a bare `<button>` picking up a pink
   outline and pink text from styles meant for a page builder that is not
   installed. It is a quiet, secondary action — keeping a record you already
   own on the device — and it was the loudest thing on the screen.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-keep {
	display: block !important;
	width: 100% !important;
	margin-top: 9px !important;
	padding: 9px 12px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--ios-raised) !important;
	color: var(--ios-label-2) !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
	text-align: center !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}
body.ogou-app-screen .ogou-keep:hover,
body.ogou-app-screen .ogou-keep:focus {
	background: var(--ios-raised-2) !important;
	color: var(--ios-label) !important;
	border: 0 !important;
}
body.ogou-app-screen .ogou-keep:active { transform: scale(.98); }

/* On the phone already: the one state worth colouring. */
body.ogou-app-screen .ogou-keep.is-saved {
	background: rgba(47, 212, 182, .13) !important;
	color: #5fe3c6 !important;
}
body.ogou-app-screen .ogou-keep[disabled] { opacity: .5 !important; }

/* -------------------------------------------------------------------------
   A record, an album, an artist — the pages reached from the grid.

   These were written for a web page, where the theme supplies the column and
   the breathing room around it. In the app there is no theme and no column,
   so the text ran into both edges of the phone.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-single,
body.ogou-app-screen .ogou-album,
body.ogou-app-screen .ogou-artist-page {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
	box-sizing: border-box;
}

/*
 * Except the things that are meant to reach the edges.
 *
 * Artwork and the grid inside those pages carry their own spacing; indenting
 * them twice leaves a record's cover floating in a frame of nothing.
 */
body.ogou-app-screen .ogou-single .ogou-grid,
body.ogou-app-screen .ogou-album .ogou-grid,
body.ogou-app-screen .ogou-artist-page .ogou-grid,
body.ogou-app-screen .ogou-single .ogou-search,
body.ogou-app-screen .ogou-album .ogou-search,
body.ogou-app-screen .ogou-artist-page .ogou-search {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* -------------------------------------------------------------------------
   Section headings inside a screen.

   No gutter of their own: these only ever appear inside an artist page, and
   that page already carries one. Giving them a second indented them twice,
   so the heading sat further in than the records underneath it.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-artist-section h2,
body.ogou-app-screen .ogou-featured-on h2 {
	margin: 28px 0 13px;
	padding: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.25;
	letter-spacing: -0.024em;
	color: var(--ios-label);
	text-transform: none;
}

/* -------------------------------------------------------------------------
   The radio.

   Less wrong than the player was, and wrong in the opposite direction: it is
   not broken, it is loud. A full-bleed orange wash, a glowing button, raw
   browser sliders and shouting capitals — each one reasonable on a web page
   that has a white site around it to push against, and all of them at once on
   a black screen with nothing else on it.

   Nothing here is rebuilt. The wash is turned down, the browser's own
   controls are given the app's shapes, and the play button stops glowing.
   ------------------------------------------------------------------------- */
body.ogou-app-screen .ogou-radio .ogou-radio-veil,
body.ogou-app-screen .ogou-radio .ogou-radio-bg { opacity: .22 !important; }

body.ogou-app-screen .ogou-radio .ogou-radio-inner {
	padding-left: var(--gutter) !important;
	padding-right: var(--gutter) !important;
}

/*
 * The station's name is left alone.
 *
 * There was a rule here setting its size and weight, written against markup
 * I had reconstructed rather than read — and the name was already correct on
 * screen. Restyling something I have not looked at is exactly what broke the
 * mini player an hour ago; once is enough.
 */
body.ogou-app-screen .ogou-radio .ogou-radio-status {
	color: var(--ios-label-2) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
}

/*
 * The genre pills.
 *
 * The labels are the genres as the artists typed them, which on this site is
 * mostly capitals — so forcing more capitals on top is not a style choice,
 * it is shouting at whatever was already shouted. Normal case lets the data
 * speak and the selected pill carry the emphasis.
 */
body.ogou-app-screen .ogou-radio button.ogou-radio-pill {
	padding: 7px 15px !important;
	border-radius: 999px !important;
	border: 0 !important;
	background: var(--ios-raised) !important;
	color: var(--ios-label-2) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
}
body.ogou-app-screen .ogou-radio button.ogou-radio-pill.is-active {
	background: var(--ios-tint) !important;
	color: #16120a !important;
	font-weight: 600 !important;
}

/* The now-playing panel sits on the screen, not in a box on it. */
body.ogou-app-screen .ogou-radio .ogou-radio-now {
	background: var(--ios-raised) !important;
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: none !important;
}
body.ogou-app-screen .ogou-radio .ogou-radio-title {
	text-decoration: none !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: -0.015em !important;
	color: var(--ios-label) !important;
}
body.ogou-app-screen .ogou-radio .ogou-radio-artist {
	font-size: 13.5px !important;
	color: var(--ios-label-2) !important;
}

/* Play: solid, and without the halo around it. */
body.ogou-app-screen .ogou-radio button.ogou-radio-btn {
	background: var(--ios-tint) !important;
	border: 0 !important;
	color: #16120a !important;
	box-shadow: none !important;
	filter: none !important;
}
body.ogou-app-screen .ogou-radio button.ogou-radio-btn:active { transform: scale(.94); }

body.ogou-app-screen .ogou-radio button.ogou-radio-skip,
body.ogou-app-screen .ogou-radio button.ogou-radio-arrow {
	background: var(--ios-raised) !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--ios-label) !important;
	box-shadow: none !important;
}
body.ogou-app-screen .ogou-radio button.ogou-radio-skip[disabled] { opacity: .35 !important; }

/* The progress bar, at the weight iOS uses for one. */
body.ogou-app-screen .ogou-radio .ogou-radio-bar {
	height: 4px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .16) !important;
}
body.ogou-app-screen .ogou-radio .ogou-radio-prog { background: var(--ios-tint) !important; border-radius: 999px !important; }
body.ogou-app-screen .ogou-radio .ogou-radio-buf { background: rgba(255, 255, 255, .1) !important; border-radius: 999px !important; }
body.ogou-app-screen .ogou-radio .ogou-radio-seek span { color: var(--ios-label-3) !important; font-size: 12px !important; }

/*
 * The volume slider was the browser's own.
 *
 * A stock `input[type=range]` is the one control that announces the platform
 * it is drawn by — a white track and a fat handle on Android, a blue one on
 * iOS — and it was sitting under a bar that had just been made to look like
 * neither.
 */
body.ogou-app-screen .ogou-radio .ogou-radio-vol input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	outline: none;
}
body.ogou-app-screen .ogou-radio .ogou-radio-vol input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	cursor: pointer;
}
body.ogou-app-screen .ogou-radio .ogou-radio-vol input[type="range"]::-moz-range-thumb {
	width: 16px; height: 16px;
	border: 0; border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
body.ogou-app-screen .ogou-radio .ogou-radio-vol button {
	background: none !important;
	border: 0 !important;
	color: var(--ios-label-2) !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Honour the setting, and keep focus visible.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.ogou-app-screen * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}
body.ogou-app-screen a:focus-visible,
body.ogou-app-screen button:focus-visible {
	outline: 2px solid var(--ios-tint);
	outline-offset: 2px;
	border-radius: 8px;
}