/*FONTS START*/
@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Light.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Fett.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Brukt.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Medium.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-MediumItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Runescape Plain 12";
	src: url("fonts/woff2/runescape_plain_12.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*Xolonium     (NORMAL TITLE    / 400/700)*/
/*ApfelGrotezk (NORMAL TEXT     / 400/700)*/

/*Meteora      (SERIF TITLE     / 400/700)*/
/*Sentient     (SERIF TEXT      / 400/700)*/

/*SpaceMono    (MONOSPACE TITLE / 400/700)*/
/*DMMono       (MONOSPACE TEXT  / 400/700)*/

/*Runescape Plain 12       (NORMAL TEXT  / 400)*/

/*FONTS END*/

/*JQUERY UI RESET START*/
.ui-tabs .ui-tabs-panel {
	padding: unset;
}
/*JQUERY UI RESET END*/

/*HEADER HTML START*/
[data-type="skip-to-main"] {
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translate(-50%, 0);
	width: fit-content;
	min-width: 540px;
	height: auto;
	z-index: -999;
	opacity: 0;
	visibility: hidden;
}

[data-type="skip-to-main"]:focus,
[data-type="skip-to-main"]:focus-visible,
[data-type="skip-to-main"]:active {
	top: var(--spacing-large);
	transform: scale(1) translate(-50%, 0);
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}

[data-type="skip-to-main"]:hover {
	transform: scale(1) translate(-50%, 0);
	transition-duration: 250ms;
}

@container page (max-width: 32rem) {
	[data-type="skip-to-main"] {
		min-width: unset;
		opacity: 0;
		visibility: hidden;
	}

	[data-type="skip-to-main"]:focus,
	[data-type="skip-to-main"]:focus-visible,
	[data-type="skip-to-main"]:active {
		opacity: 0;
		visibility: hidden;
	}
}

header {
	position: relative;
	z-index: 9999;
}

header > nav > ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-inline-start: 0;
	list-style-type: none;
	width: 100%;
}

header > nav > ul > li {
	display: flex;
	column-gap: var(--spacing-medium);
	align-items: flex-start;
	width: 100%;
	white-space: nowrap;
}

header > nav > ul > li:nth-child(2) {
	width: fit-content;
}

header > nav > ul > li > a {
	width: 100%;
	text-decoration: none;
}

header > nav > ul > li > a > p {
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0s,
		opacity 0.25s linear;
	font-family: "Xolonium", sans-serif;
	color: var(--primary-color);
	transition-duration: 250ms;
}

[data-accessibility~="serif"] header > nav > ul > li > a > p {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] header > nav > ul > li > a > p {
	font-family: SpaceMono, sans-serif;
}

header > nav > ul > li > a:hover > p,
header > nav > ul > li > a:focus-visible > p {
	visibility: visible;
	opacity: 1;
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child {
	align-self: flex-start;
}

img[data-type="back-button"] {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition-duration: 250ms;
}

img[data-type="back-button"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child img {
	width: 100%;
	max-width: 300px;
}

[data-accessibility~="dark"] header > nav > ul > li > a:first-child img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	header
	> nav
	> ul
	> li
	> a:first-child
	img {
	filter: invert(1) contrast(200%);
}

header > nav > ul > li:nth-child(2) {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--spacing-medium);
	font-family: "ApfelGrotezk", sans-serif;
}

[data-accessibility~="serif"] header > nav > ul > li:nth-child(2) {
	font-family: "Sentient", serif;
}

[data-accessibility~="monospace"] header > nav > ul > li:nth-child(2) {
	font-family: "DMMono", sans-serif;
}

header > nav > ul > li:nth-child(2) div:first-child {
	display: inherit;
	text-align: end;
}

header > nav > ul > li:nth-child(2) div:first-child p,
header > nav > ul > li:nth-child(2) div:first-child a {
	font-size: 16px;
	font-weight: 700;
	text-align: end;
	text-decoration: none;
	color: var(--primary-color);
	letter-spacing: 1.5px;
}

header > nav > ul > li:nth-child(2) div:nth-child(2) p {
	font-size: 16px;
	color: var(--focus-color);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="SAlogo"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: fit-content;
	gap: var(--spacing-x-small);
}

[data-type="SAlogo"] p {
	line-height: 1;
}

[data-type="backButton"] {
	width: 100%;
	max-width: 75px;
	height: auto;
}

[data-logo="brand"] + p {
	display: none;
}

header > nav > ul > li:nth-child(2) div:first-child a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@container page (max-width: 32rem) {
	header > nav > ul {
		flex-direction: column;
		row-gap: var(--spacing-medium);
	}

	header > nav > ul > li:nth-child(2) {
		align-self: flex-end;
	}

	[data-type="SAlogo"] p,
	header > nav > ul > li > a > p {
		display: none;
	}
}

@container page (max-width: 40.96rem) {
	header > nav > ul > li:nth-child(2) div {
		display: none;
	}

	header > nav > ul > li:nth-child(2) {
		column-gap: 0;
	}
}

@container page (max-width: 30.72rem) {
	[data-type="backButton"] {
		display: none;
	}
}

/* Portfolio START */
[data-type="portfolio"],
[data-type="games"] {
	display: grid;
	gap: var(--spacing-normal);
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-large);
}

[data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

[data-type="games"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@container page (min-width: 19.2rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr;
	}
}

@container page (min-width: 30.72rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}
}

@container page (min-width: 51.2rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@container page (min-width: 76.8rem) {
	[data-accessibility~="extra-wide"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="extra-wide"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@container page (min-width: 76.8rem) {
	[data-accessibility~="unlimited"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="unlimited"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@container page (min-width: 102.4rem) {
	[data-accessibility~="unlimited"]
		[data-type="portfolio"][data-category~="brand"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

[data-accessibility~="button"] [data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr;
}

[data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

[data-accessibility~="button"] [data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr;
}

@container page (max-width: 54.64rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@container page (max-width: 30.72rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}

	nav ul {
		display: none;
	}
}

@container page (max-width: 19.2rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr;
	}
}
/* Portfolio END */
[data-type="portfolio-item"] a {
	position: relative;
}

[data-type="portfolio-item"] img,
[data-type="games"] img {
	border-radius: 15px;
}

[data-type="games"] img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

[data-accessibility~="dark"] [data-type="portfolio-item"] img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="portfolio-item"] img {
	filter: invert(1) contrast(200%);
	border: 2px solid var(--primary-color);
}

[data-poster] a,
[data-type="portfolio-item"] a {
	cursor: pointer;
}

[data-type="portfolio"] img,
[data-type="games"] img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="portfolio"] a:focus-visible img {
	transform: scale(1.02);
	outline: 2px solid var(--focus-color);
	outline-offset: var(--spacing-xx-small);
	border-radius: 17px;
	transition-duration: 250ms;
}

.contact-container p,
.contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.contact-container {
	padding: var(--spacing-normal);
	text-align: right;
	margin-right: var(--spacing-x-small);
}

@container page (max-width: 38.4rem) {
	.contact-container {
		display: none;
	}
}

.footer-contact-container p,
.footer-contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.footer-contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.footer-contact-container {
	text-align: left;
	padding: var(--spacing-normal);
	margin-bottom: var(--spacing-medium);
	margin-left: var(--spacing-x-small);
}

@container page (min-width: 961px) {
	.footer-contact-container {
		display: none;
	}
}

@container page (max-width: 460px) {
	.footer-contact-container {
		text-align: center;
		margin-left: 0;
	}
}

[data-type="footer-credits"] {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
}

[data-type="footer-credits"] span {
	white-space: nowrap;
}

/* Phones and tablets: the page's end clears the buttons fixed along the
   bottom — the phone's bar, back-to-top — so the footer's last lines can be
   scrolled out from under them: their 1.5rem from the edge, their height
   (2.5rem; 4rem with "Larger buttons") and a gap. */
@media only screen and (max-width: 64rem) {
	footer {
		padding-bottom: calc(1.5rem + 2.5rem + var(--spacing-small));
	}

	[data-accessibility~="button"] footer {
		padding-bottom: calc(1.5rem + 4rem + var(--spacing-small));
	}
}

@container page (max-width: 460px) {
	[data-type="footer-credits"] {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

[data-type="info-box"] {
	text-align: center;
}

[data-button="back-to-top"][data-active="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

[data-button="back-to-top"][data-active="false"] {
	opacity: 0;
	visibility: hidden;
}

[data-button="back-to-top"] {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	/* The same distance from the edges as the side bar and the right-hand
	   buttons, and above the page's own layers (the carousel tab is z 2) but
	   below the bars and dialogs. */
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9996;
	gap: var(--spacing-x-small);
	padding: var(--spacing-x-small) var(--spacing-medium) var(--spacing-x-small)
		var(--spacing-medium);
	width: fit-content;
	height: fit-content;
	font-size: 16px;
	letter-spacing: 1px;
	cursor: pointer;
	/* The theme's colours (#252525 / #F4F3F2 in light mode), so it turns with
	   the bars beside it in dark and high-contrast modes. */
	background-color: var(--primary-color);
	color: var(--bg-color);
	border: 0.1rem solid var(--bg-color);
	border-radius: 0.25rem;
}

[data-button="back-to-top"]::before {
	content: "TOP";
}

[data-button="back-to-top"]::after {
	content: "↑";
}

[data-accessibility~="button"] [data-button="back-to-top"] {
	padding: var(--spacing-small) var(--spacing-x-large) var(--spacing-small)
		var(--spacing-x-large);
}

@media only screen and (max-width: 86rem) {
	[data-button="back-to-top"] {
		padding: var(--spacing-x-small) var(--spacing-small)
			var(--spacing-x-small) var(--spacing-small);
		width: 2.5rem;
		height: 2.5rem;
	}

	[data-button="back-to-top"]::before {
		display: none;
	}
}

[data-type="logo-image"] {
	width: 100%;
	border-radius: unset;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-type="logo-image"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="logo-image"] {
	filter: invert(1) contrast(200%);
}

[data-logo~="sa"] {
	height: 62px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplus"] {
	height: 84px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplustop"] {
	height: 80px;
	width: auto;
	max-width: fit-content;
	margin-top: -18px;
}

[data-type="explore-further"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 25px;
}

footer hr:first-child {
	margin-top: var(--spacing-x-large);
	margin-bottom: var(--spacing-medium);
}

footer hr:nth-of-type(2) {
	margin-top: 32px;
	margin-bottom: 45px;
}

[data-type="explore-further"] span {
	font-size: 50px;
	font-family: "Xolonium", sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@container page (max-width: 30.72rem) {
	[data-type="explore-further"] {
		flex-direction: column;
		gap: 25px;
	}

	[data-type="explore-further"] a {
		width: 100%;
	}

	[data-type="explore-further"] span {
		display: none;
	}

	.ui-helper-clearfix:before,
	.ui-helper-clearfix:after {
		display: none;
	}
}

[data-type="footer"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
	margin-bottom: 50px;
}

[data-type="footer"] [data-footer="buttons"] {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 25px;
}

/* The footer's icon buttons (accessibility, cookies, audio logo, sitemap)
   have a size of their own: their SVGs have none, so the site-wide
   img { max-width: 100% } left them 0 wide in a button with no width.
   :where() keeps this light, so "Larger buttons" (4rem) still wins. */
:where([data-footer="buttons"]) [data-button~="icon"] {
	width: 2.5rem;
}

:where([data-footer="buttons"]) [data-button~="icon"] img {
	width: 100%;
	height: auto;
}

[data-button~="icon"] {
	padding: 0;
	margin: 0;
	background-color: unset;
	border: none;
	cursor: pointer;
	transition-duration: 250ms;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-button~="icon"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-button~="icon"] {
	filter: invert(1) contrast(200%);
}

[data-type="title"] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 25px;
	position: relative;
	width: 100%;
}

[data-type="title"] h1 {
	text-indent: -5px;
	text-indent: -5px each-line;
}

[data-project="summary"] p:has(+ figure) {
	margin-bottom: 0;
}

/* ── Page tools (snippets/page-tools.php) ──────────────────────────────────
   A dark tab hanging from the navbar line at the top right: previous / next,
   listen (only when the page has audio) and accessibility. It sits in the
   header, which is position: relative, and starts where the line does — the
   header's foot plus the gap above the line (measured 20px = --spacing-normal
   on every page) — so the two read as one shape.

   Its size is set here once, on body, so the space kept free for it below the
   line uses the same numbers: icon + padding = height; four buttons + gaps +
   padding = the widest tab (project pages). */
body {
	--page-tools-icon: 1.75rem;
	--page-tools-pad-y: var(--spacing-x-small);
	--page-tools-pad-x: var(--spacing-normal);
	--page-tools-gap: var(--spacing-small);
	--page-tools-h: calc(var(--page-tools-icon) + 2 * var(--page-tools-pad-y));
	/* The right tab: this page's own tools (0–3: ← → listen) on a light
	   segment, the site's two (SAB, accessibility) on dark — each segment
	   its icons, gaps and side padding. */
	--page-tools-own-n: 0;
	--page-tools-site-n: 2;
	--page-tools-w: calc(
		(var(--page-tools-own-n) + var(--page-tools-site-n)) *
			var(--page-tools-icon) +
			(var(--page-tools-own-n) + var(--page-tools-site-n) - 1) *
			var(--page-tools-gap) + 2 * var(--page-tools-pad-x) +
			(var(--page-tools-gap) - 0.3 * var(--page-tools-pad-x)) *
			min(var(--page-tools-own-n), 1)
	);
}

/* How many of this page's own tools there are (the light segment). */
body:has([data-part="page-own"] > :nth-child(1 of :not([hidden]))) {
	--page-tools-own-n: 1;
}

body:has([data-part="page-own"] > :nth-child(2 of :not([hidden]))) {
	--page-tools-own-n: 2;
}

body:has([data-part="page-own"] > :nth-child(3 of :not([hidden]))) {
	--page-tools-own-n: 3;
}

[data-type="page-tools"] {
	position: absolute;
	top: calc(100% + var(--spacing-normal));
	right: 0;
	display: flex;
	align-items: center;
	gap: var(--page-tools-gap);
	padding: var(--page-tools-pad-y) var(--page-tools-pad-x);
	background-color: var(--primary-color);
	border-radius: 0 0 var(--spacing-small) var(--spacing-small);
}

/* The right tab, in two parts: this page's own tools on a light segment,
   framed like the breadcrumb opposite (the line along its top), and the
   site's tools on the dark one, rounded at the outer corner. */
[data-type="page-tools"]:not([data-side]) {
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: none;
}

[data-type="page-tools"]:not([data-side])
	> :is([data-part="page-own"], [data-part="site-tools"]) {
	display: flex;
	align-items: center;
	gap: var(--page-tools-gap);
	padding: var(--page-tools-pad-y) var(--page-tools-pad-x);
}

[data-type="page-tools"]:not([data-side]) > [data-part="site-tools"] {
	background-color: var(--primary-color);
	border-radius: 0 0 var(--spacing-small) var(--spacing-small);
}

[data-type="page-tools"]:not([data-side]) > [data-part="page-own"] {
	box-sizing: border-box;
	background-color: var(--bg-color);
	border: 0.1rem solid var(--primary-color);
	border-right: 0;
	border-radius: 0 0 0 var(--spacing-small);
}

/* Where they meet: no rounding, and a whole gap on each side of the edge —
   each segment keeps the room its icons have between them. */
[data-type="page-tools"]:not([data-side]) > [data-part="page-own"] {
	padding-right: var(--page-tools-gap);
	/* Its outer side a little tighter than the dark one's: the frame and the
	   light ground make the same space look wider. */
	padding-left: calc(var(--page-tools-pad-x) * 0.9 - 0.1rem);
}

[data-type="page-tools"]:not([data-side])
	> [data-part="page-own"]
	+ [data-part="site-tools"] {
	padding-left: var(--page-tools-gap);
	border-bottom-left-radius: 0;
}

/* Its icons dark on the light segment. */
[data-type="page-tools"] [data-part="page-own"] [data-icon] {
	background-color: var(--primary-color);
}

/* The left tab: the menu's dark square (the same padding all round), and
   joined to it the breadcrumb — page-coloured, framed (the line along its
   top too), rounded at its outer corner, a chevron mark in front. It
   stops short of the right-hand tab; a long trail is cut from the start,
   so where you are stays in view. */
[data-type="page-tools"][data-side="left"] {
	right: auto;
	left: 0;
	align-items: stretch;
	gap: 0;
	max-width: calc(100% - var(--page-tools-w) - var(--spacing-normal));
	padding: 0;
	background: none;
}

[data-type="page-tools"][data-side="left"] > [data-part="menu-cell"] {
	display: flex;
	align-items: center;
	flex: none;
	padding: var(--page-tools-pad-y);
	background-color: var(--primary-color);
	border-radius: 0 0 0 var(--spacing-small);
}

[data-type="page-tools"][data-side="left"] > [data-part="crumbs"] {
	display: flex;
	align-items: center;
	min-width: 0;
	box-sizing: border-box;
	padding: 0 var(--spacing-small);
	gap: var(--spacing-x-small);
	border: 0.1rem solid var(--primary-color);
	border-left: 0;
	border-radius: 0 0 var(--spacing-small) 0;
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	font-size: var(--font-size-small);
}

/* The trail's mark: two bold chevrons, in the text colour. */
[data-type="page-tools"][data-side="left"] > [data-part="crumbs"]::before {
	content: "";
	flex: none;
	width: 1.8em;
	height: 1.8em;
	background-color: currentColor;
	-webkit-mask: url("../img/icons/breadcrumb.svg") center / contain no-repeat;
	mask: url("../img/icons/breadcrumb.svg") center / contain no-repeat;
}

/* One row. Too long for the room, the page you are on gives way — cut
   with … (its full title is just below) — never Home and the way back. */
[data-part="crumbs"] ol {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	white-space: nowrap;
}

[data-part="crumbs"] li {
	flex: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

[data-part="crumbs"] li:last-child {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Phones: the menu goes back to the end of the right-hand tab, and the
   breadcrumb is its own line under the tabs — the whole trail, wrapping if
   it must (as it was before it joined the menu). The page starts below it:
   main.js measures its height into --crumbs-h. Not on the homepage, where
   the trail is only "Home". */
[data-type="page-tools"] [data-part="site-tools"] > [data-part="menu"] {
	display: none;
}

@container page (max-width: 30.72rem) {
	[data-type="page-tools"] [data-part="site-tools"] > [data-part="menu"] {
		display: inline-flex;
	}

	[data-type="page-tools"][data-side="left"] {
		top: calc(
			100% + var(--spacing-normal) + var(--page-tools-h) +
				var(--spacing-x-small)
		);
		right: 0;
		max-width: none;
	}

	[data-type="page-tools"][data-side="left"] > [data-part="menu-cell"] {
		display: none;
	}

	[data-type="page-tools"][data-side="left"] > [data-part="crumbs"] {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	[data-type="page-tools"][data-side="left"] > [data-part="crumbs"]::before {
		content: none;
	}

	[data-part="crumbs"] ol {
		flex-wrap: wrap;
		justify-content: flex-start;
		overflow: visible;
		white-space: normal;
		row-gap: 0.1rem;
	}

	[data-part="crumbs"] li:last-child {
		overflow: visible;
	}

	[data-type="page-tools"][data-side="left"]:has(
			[data-part="crumbs"] li:only-child
		) {
		display: none;
	}

	body:has([data-part="crumbs"] li + li) hr[data-type="navbar"] {
		margin-bottom: calc(
			var(--page-tools-h) + var(--spacing-x-small) +
				var(--crumbs-h, 1.5rem) + var(--spacing-x-small)
		);
	}
}

[data-part="crumbs"] li::before {
	content: none;
}

/* After each level, so a wrapped trail ends its line with the arrow. */
[data-part="crumbs"] li:not(:last-child)::after {
	content: "\2192";
	margin: 0 0.45em;
	opacity: 0.55;
}

[data-part="crumbs"] a {
	color: inherit;
	text-decoration: none;
}

[data-part="crumbs"] a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

[data-part="crumbs"] a:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

/* This page: plain and lighter — not a link, and its title is just below. */
[data-part="crumbs"] [aria-current="page"] {
	font-weight: 400;
	opacity: 0.65;
}

[data-type="page-tools"] [data-button~="icon"] {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform 150ms ease;
}

/* No hover zoom: like the floating bars, small fixed tools, not content.
   Keyboard focus has its ring (below). */

[data-type="page-tools"] [data-button~="icon"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
	border-radius: var(--spacing-xx-small);
}

/* Icons are CSS masks painted in the page colour (#F4F3F2) on the tab's
   #252525 — exact colours, nothing drawn outside the icon's own shape. Both
   come from the theme, so dark mode swaps them together; the site-wide
   dark / high-contrast filters on icon buttons are not wanted here. The masks
   are the outline (-secondary) icons, which have no background of their own.
   The same icons serve the site menu's bar and panel (snippets/site-menu.php). */
:is([data-type="page-tools"], [data-type="side-bar"]) [data-button~="icon"] {
	filter: none;
}

:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon] {
	display: block;
	width: var(--page-tools-icon);
	height: var(--page-tools-icon);
	background-color: var(--bg-color);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="reverse"] {
	--icon: url("../img/icons/reverse-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="forward"] {
	--icon: url("../img/icons/forward-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="listen"] {
	--icon: url("../img/icons/listen-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="play"] {
	--icon: url("../img/icons/play-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="pause"] {
	--icon: url("../img/icons/pause-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="accessibility"] {
	--icon: url("../img/icons/accessibility-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="menu"] {
	--icon: url("../img/icons/menu-secondary.svg");
}
[data-type="side-bar"] [data-icon="menu"] {
	--icon: url("../img/icons/menu-bars.svg");
}

@media (prefers-reduced-motion: reduce) {
	[data-type="page-tools"] [data-button~="icon"] {
		transition: none;
	}
}

/* The two tabs make a row under the line — the menu and where you are at
   the left, the page's tools at the right — and the page starts just below
   it, at every width (the left tab's breadcrumb is as long as the trail,
   so nothing can sit beside it). */
hr[data-type="navbar"] {
	margin-bottom: calc(var(--page-tools-h) + var(--spacing-x-small));
}

@container page (max-width: 30.72rem) {
	body {
		--page-tools-icon: 1.5rem;
		--page-tools-pad-y: var(--spacing-xx-small);
		--page-tools-pad-x: var(--spacing-small);
		--page-tools-gap: var(--spacing-x-small);
	}
}

[data-type="main-accessibility"] {
	display: flex;
	flex-direction: row;
	gap: 25px;
	width: fit-content;
	margin-top: 15px;
}

[data-type="main-accessibility"] [data-button~="icon"]:hover,
[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
	transform: scale(1.05);
	transition-duration: 250ms;
}

@container page (max-width: 38.4rem) {
	[data-type="main-accessibility"] [data-button~="icon"]:hover,
	[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
		transform: scale(1);
	}
}

[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 10px;
}

@container page (max-width: 38.4rem) {
	[data-type="title"] {
		align-items: flex-start;
	}

	[data-type="main-accessibility"] [data-button~="icon"] {
		width: 40px;
	}
}

@container page (max-width: 30.72rem) {
	[data-type="title"] #main {
		order: 2;
		width: 100%;
	}

	/* The line between the old in-title accessibility buttons and the
	   heading — only where those buttons still sit in the title row (none
	   since the page-tools tab); otherwise it doubled the page's own line
	   above the heading on phones. */
	[data-type="title"]:has([data-type="main-accessibility"]) #main {
		border-top: 0.05rem solid
			color-mix(in srgb, var(--primary-text-color) 25%, transparent);
		padding-top: 10px;
	}

	[data-type="title"] [data-type="main-accessibility"] {
		order: 1;
		justify-content: flex-end;
		width: 100%;
	}

	[data-page~="project"] [data-type="main-accessibility"] {
		border-top: 0.05rem solid
			color-mix(in srgb, var(--primary-text-color) 25%, transparent);
		border-bottom: 0.05rem solid
			color-mix(in srgb, var(--primary-text-color) 25%, transparent);
		margin-top: 0;
		margin-bottom: var(--spacing-small);
		padding-top: var(--spacing-small);
		padding-bottom: var(--spacing-small);
	}

	[data-type="title"] {
		flex-direction: column;
		gap: 0;
	}

	[data-type="main-accessibility"] {
		gap: 15px;
	}
}

[data-accessibility~="button"] [data-button~="icon"] {
	width: 4rem;
	height: auto;
}

/* Larger buttons in the page-tools tab and the side bar: the icons grow, the
   buttons keep to them (an 80px-wide button left a small icon in a wide gap,
   and the tab's width is worked out from the icons). */
[data-accessibility~="button"] body {
	--page-tools-icon: 2.25rem;
}

[data-accessibility~="button"]
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-button~="icon"] {
	width: auto;
}

[data-type="footer"] > a:hover {
	color: var(--bg-color);
}

[data-type="footer"] button:focus-visible,
[data-type="footer"] a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 1px;
	transition-duration: 250ms;
}

[data-type="footer"] a,
[data-type="navigation-explore"],
[data-type="navigation-deeper"],
[data-type="navigation-reverse"],
[data-type="navigation-forward"] {
	transition-duration: 250ms;
}

[data-type="footer"] a:hover,
[data-type="footer"] a:focus-visible,
[data-type="footer"] button:hover,
[data-type="footer"] button:focus-visible,
[data-type="navigation-explore"]:hover,
[data-type="navigation-deeper"]:hover,
[data-type="navigation-reverse"]:hover,
[data-type="navigation-forward"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

@container page (max-width: 38.4rem) {
	[data-type="footer"] a:hover,
	[data-type="footer"] a:focus-visible,
	[data-type="footer"] button:hover,
	[data-type="footer"] button:focus-visible,
	[data-type="navigation-explore"]:hover,
	[data-type="navigation-deeper"]:hover,
	[data-type="navigation-reverse"]:hover,
	[data-type="navigation-forward"]:hover {
		transform: scale(1);
	}
}

[data-type="footer"] a[data-type="contacts"]::before {
	content: "🌍 ";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]::before {
	content: "← 😃";
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-forward"]::after {
	content: "😛 →";
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]::before {
	content: "← 😃";
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-deeper"]::after {
	content: "😊 →";
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]:hover::before,
[data-type="navigation-explore"]:focus-visible::before {
	content: "← 😇";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-deeper"]:hover::after,
[data-type="navigation-deeper"]:focus-visible::after {
	content: "😁 →";
	font-family: "Xolonium", sans-serif;
}

[data-type="footer"] a[data-type="contacts"]:hover::before,
[data-type="footer"] a[data-type="contacts"]:focus-visible::before {
	content: "🌎 ";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]:hover::before,
[data-type="navigation-reverse"]:focus-visible::before {
	content: "← 😉";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-forward"]:hover::after,
[data-type="navigation-forward"]:focus-visible::after {
	content: "😝 →";
	font-family: "Xolonium", sans-serif;
}

[data-type="flex-row-wrap"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact"] {
	margin-top: 10px;
}

[data-type="contact-grid"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xx-small);
}

[data-type="contact-item"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact-item"] p {
	font-size: 18px;
	width: fit-content;
	margin: 0 !important;
}

[data-type="contact-item"] p:first-child {
	color: var(--focus-color);
	width: 150px;
	text-align: end;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="contact-item"] p:last-child {
	font-weight: 700;
	letter-spacing: 1.2px;
	text-align: start;
}

@container page (max-width: 38.4rem) {
	[data-type="contact-item"] {
		display: block;
	}

	[data-type="contact-item"] p:first-of-type {
		text-align: start;
	}
}

#scrollAccess,
#accessibilityButton a,
#accessibilityButtonFooter a {
	cursor: pointer;
}

/*EASY-TO-CONSUME START*/
[data-type~="easy-to-consume"] {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 !important;
	margin-bottom: 40px;
}

[data-type~="easy-to-consume"] ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
	padding: 0 !important;
}

[data-type~="easy-to-consume"] > ul > li::before {
	display: none;
}

[data-type~="easy-to-consume"] > ul > li > a {
	padding: 0 !important;
}

[data-accessibility~="dark"] [data-type~="easy-to-consume"] > ul > li > a {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	[data-type~="easy-to-consume"]
	> ul
	> li
	> a {
	filter: invert(1) contrast(200%);
}

[data-type~="easy-to-consume"] > ul > li:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 7px;
}

[data-type~="easy-to-consume"] > ul > li > a {
	background-color: #252525;
	border-radius: 15px;
	cursor: pointer;
}

[data-type~="easy-to-consume"] > ul > li > a > img {
	height: 80px;
	width: auto;
	border-radius: 15px;
}

[data-type~="easy-to-consume"] > ul > li {
	margin: 0;
}

@container page (max-width: 30.72rem) {
	[data-type~="easy-to-consume"] ul {
		flex-direction: column-reverse;
	}

	[data-type~="easy-to-consume"] > ul > li {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	[data-type~="easy-to-consume"] > ul > li > a {
		background-color: #252525;
		border-radius: 15px;
		cursor: pointer;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	[data-type~="easy-to-consume"] > ul > li::before {
		display: none;
	}
}

[data-type~="easy-content"] {
	padding: var(--spacing-medium) !important;
	border: 2px solid #252525 !important;
	border-radius: 15px;
	width: fit-content;
	margin-top: var(--spacing-x-large);
}

[data-type~="easy-content"] ul {
	display: block;
}

[data-type~="easy-to-listen"] {
	width: 100%;
}

[data-type~="easy-to-listen"] h3 {
	margin-bottom: 20px;
	margin-top: 0;
}

[data-type~="easy-to-listen"] .essential_audio {
	opacity: 1;
	visibility: visible;
	margin-bottom: 20px;
}
/*EASY-TO-CONSUME END*/

/*BREADCRUMBS START*/
nav[aria-label="breadcrumb"] {
	margin-bottom: var(--spacing-xx-small);
}

nav[aria-label="breadcrumb"] ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-small);
	row-gap: 0;
	line-height: 1;
	margin: 0;
	padding: 0;
}

nav[aria-label="breadcrumb"] ul li {
	font-size: 18px;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li a {
	text-decoration: none;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li.breadcrumb-separator {
	font-size: var(--font-size-medium);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*BREADCRUMBS END*/

/*SITEMAP START*/
[data-type="sitemap"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="sitemap"] li {
	padding-left: 35px;
	text-indent: -27px;
	line-height: 1.55;
}

[data-type="sitemap"] li:before {
	font-family: "Xolonium", sans-serif;
	content: "●";
	padding-right: 10px;
}

[data-type="sitemap"] li a {
	text-decoration: none;
}
/*SITEMAP END*/

/* Exactly as wide as its icons, which hug the right edge. On phones the box
   used to stretch to the full screen width with the icons at its left edge —
   so the column appeared on the left, half off-screen. */
#scrollAccess {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
	position: fixed;
	right: 1.5rem;
	left: auto;
	width: max-content;
	top: var(--spacing-medium);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
}

#scrollAccess img {
	width: 2.5rem;
	height: auto;
	border: 0.1rem solid #f4f3f2;
	background: #252525;
	border-radius: 0.75rem;
}

#scrollAccess.show {
	opacity: 1;
	visibility: visible;
}

.ui-tooltip {
	font-size: 16px;
	text-wrap: wrap;
	text-transform: uppercase;
	text-align: center;
	color: var(--primary-text-color);
	background-color: var(--bg-color);
	padding: 10px 15px;
	border: 2px solid var(--primary-color);
	border-radius: 5px;
}

ul {
	list-style-type: none;
}

sitemap ul li:before {
	width: 24px;
	height: 24px;
	padding: 5px;
	position: relative;
	counter-increment: item;
	content: "▶";
	color: #252525;
	font-size: 20px;
	line-height: 16px;
	font-weight: 400;
}

@media only screen and (max-width: 48rem) {
	.ui-tooltip {
		display: none !important;
		visibility: hidden;
		opacity: 0;
	}
}

/* A tooltip for something in an open drawer lives in the drawer (main.js),
   placed by the screen: --tip-x / --tip-y. */
.ui-tooltip[data-in-drawer] {
	position: fixed;
	left: var(--tip-x, 0);
	top: var(--tip-y, 0);
	max-width: min(18rem, calc(100vw - 1rem));
}

[data-accessibility~="button"] .ui-tooltip {
	font-size: var(--font-size);
	z-index: 9997;
}

[data-type="accessibility"] #accessibility-heading,
[data-type="site-menu"] [data-part="title"] {
	display: block;
	font-size: var(--title-2-size);
	font-weight: 700;
	line-height: var(--title-2-line);
	margin-bottom: var(--spacing-x-small);
}

[data-type="accessibility"] [data-part="panel"] {
	margin-inline: auto;
	max-width: var(--content-width);
	padding: var(--spacing-medium);
}

[data-type="accessibility"] [data-type="accessibility-content"] {
	padding-bottom: var(--spacing-x-large);
}

[data-type="accessibility"] label {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	letter-spacing: 1px;
}

[data-type="accessibility"] [data-type="accessibility-content"] > span,
[data-type="accessibility"] [data-type="accessibility-category"] > span {
	display: block;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	margin-top: var(--spacing-small);
	margin-bottom: var(--spacing-xx-small);
}

[data-accessibility~="button"] .ui-button {
	font-size: var(--font-size-medium);
	padding: var(--spacing-small) var(--spacing-x-large);
}

.ui-checkboxradio-icon-space {
	margin-left: 0;
	margin-right: 0;
}

[data-accessibility~="button"] .ui-checkboxradio-icon-space {
	margin-left: 2px;
	margin-right: 2px;
}

[data-type~="banner"] {
	background-color: #252525;
	color: #f4f3f2;
	padding: 25px 15px;
	text-align: center;
	border: 2px solid #f4f3f2;
	border-radius: 15px;
	line-height: 1;
}

[data-type~="pref"] {
	position: fixed;
	left: 35px;
	bottom: 25px;
	width: 400px;
	color: #f4f3f2;
	background-color: var(--info-color);
}

@media only screen and (max-width: 48rem) {
	[data-type~="pref"] {
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
	}
}

[data-type~="pref"] p {
	margin-bottom: 25px !important;
}

#sa-pref-bar[data-type*="disabled"] {
	display: none;
}

#sa-pref-bar[data-type*="available"] {
	display: block;
}

#sa-pref-bar > div {
	display: flex;
	flex-direction: row;
	gap: 25px;
	justify-content: center;
}

#rssContainer {
	display: none;
}

.feed-item {
	display: flex;
	gap: 25px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.feed-title {
	font-size: var(--font-size);
	font-weight: bold;
}

.feed-date {
	font-size: 12px;
	color: gray;
}

.feed-description {
	margin: 10px 0;
}

.feed-image {
	width: fit-content;
}

.feed-content {
	width: 100%;
}

.feed-image img {
	width: 480px;
	max-width: 480px;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.checkbox-container {
	margin-bottom: 20px;
}

.checkbox-container label {
	margin-right: 10px;
}

.ui-button {
	border: 2px solid var(--primary-color);
	border-radius: 5px;
	padding: 11px 15px;
	margin-right: unset;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: unset;
	border: 2px solid var(--primary-color);
}

.ui-icon-background {
	background-color: var(--bg-color);
	width: 16px !important;
	height: 16px !important;
	color: green;
}

.ui-state-active .ui-icon-background {
	color: var(--focus-color);
}

.ui-checkboxradio-label {
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.ui-checkboxradio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-checked .ui-icon-background {
	color: var(--bg-color);
	background-color: var(--primary-color);
	border: unset;
}

.ui-icon-check {
	position: relative;
}

.ui-icon-check::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	color: green;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bg-color);
}

.ui-button .ui-icon {
	background-image: url("checked.svg");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

[data-type="accessibility-container"] {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
}

.essential_audio {
	opacity: 0;
	visibility: hidden;
	margin-top: 0;
	margin-bottom: 0;
}

/* The main player's line, while it is the recording in play (main.js). */
.essential_audio[data-scratch][data-shown] {
	opacity: 1;
	visibility: visible;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
}

[data-img~="blurOnLoad"] {
	filter: blur(10px);
	transition: filter 0.5s ease-out;
	margin: -5px -10px -10px -5px;
	background-color: #252525;
	transition-duration: 1000ms;
}

[data-img~="square"] {
	width: 100%;
	aspect-ratio: 1 / 1;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

@container page (max-width: 38.4rem) {
	[data-img~="banner"] {
		width: 100%;
		aspect-ratio: 4 / 2;
		object-fit: cover;
	}
}

[data-img~="landscape"] {
	width: 100%;
	height: auto;
}

[data-img~="imgLoaded"] {
	filter: unset;
	background-color: unset;
	margin: unset;
	transition-duration: 1000ms;
}

.sl-wrapper .sl-close {
	right: 25px;
	top: 25px;
	height: 50px;
	width: 50px;
	border: 2px solid var(--focus-color);
	background-color: var(--bg-color);
	border-radius: 15px;
	padding: 10px;
	margin-top: 0;
	margin-right: 0;
}

table {
	border: 1px solid #000;
}

table,
tr {
	height: fit-content;
}

[data-type="image-set"][data-layout="multi"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="dual"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="triple"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="quad"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 25px;
}

@container page (max-width: 38.4rem) {
	[data-type="image-set"][data-layout="dual"],
	[data-type="image-set"][data-layout="triple"] {
		display: flex;
		flex-direction: column;
		gap: unset;
	}

	[data-type="image-set"][data-layout="multi"],
	[data-type="image-set"][data-layout="quad"] {
		grid-template-columns: 1fr 1fr;
	}
}

[data-type="main-title-navigation"] {
	display: flex;
	gap: 25px;
}

@container page (max-width: 30.72rem) {
	[data-type="main-title-navigation"] {
		display: flex;
		gap: 15px;
	}
}

hr[data-type="dark"] {
	border-top: 2px solid var(--primary-color);
}

hr[data-type="light"] {
	border-top: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 25%, transparent);
}

[data-type="link-tooltip"],
[data-tooltip="status-bar"] {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: fit-content;
	padding: 10px;
	background-color: #f4f3f2;
	border-top: 2px solid #252525;
	border-right: 2px solid #252525;
	border-top-right-radius: 15px;
	z-index: 9999;
	color: #252525;
	transition:
		opacity 200ms,
		transform 200ms;
	transform: translateY(10px); /* Optional for a slide-in effect */
	margin-bottom: 0 !important;
	font-weight: 400;
}

/* The underline is a drawn line under the whole span, the ↗ included: a text
   underline can leave the space before the arrow bare (some browsers skip a
   space at the start of the ::after, or take it from a fallback font). Same
   place as before (about 6px under the baseline), and it follows a wrapped
   address line by line. */
[data-tooltip="status-bar"] span:not([data-info="links"]),
[data-type="link-tooltip"] span {
	text-decoration: none;
	padding-bottom: 0.15rem;
	background: linear-gradient(currentColor, currentColor) left bottom / 100%
		0.075rem no-repeat;
	font-weight: 400;
}

[data-tooltip="status-bar"] span:not([data-info="links"]):after,
[data-type="link-tooltip"] span:after {
	/* U+FE0E asks for the plain glyph: iPhones otherwise draw ↗ as an emoji
	   when the font has no arrow of its own. A narrow no-break space (U+202F)
	   keeps it close to the address and never on a line of its own. */
	content: "\202F\2197\FE0E";
}

/* The carousels' top line names the hovered tile's address like a status bar
   does: underlined, with its arrow. */
[data-carousel-hover] [data-info="source"] {
	padding-bottom: 0.15rem;
	background: linear-gradient(currentColor, currentColor) left bottom / 100%
		0.075rem no-repeat;
}

[data-carousel-hover] [data-info="source"]:after {
	content: "\202F\2197\FE0E";
}

/* A page of this site: → (stays in the tab); ↗ is for other sites. */
[data-tooltip="status-bar"] span[data-link="internal"]:after,
[data-carousel-hover] [data-info="source"][data-link="internal"]:after {
	content: "\202F\2192\FE0E";
}

[data-anchor="button"] > li:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:hover > [data-type="link-tooltip"],
[data-type="portfolio"] a:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:focus-visible > [data-type="link-tooltip"],
[data-type="explore-further"] a:hover + [data-type="link-tooltip"],
[data-type="main-title-navigation"] a:hover + [data-type="link-tooltip"],
[data-type="games"] a:hover > [data-type="link-tooltip"],
[data-type="entertainment-poster"] a:hover > [data-tooltip="status-bar"],
[data-type="games"] a:hover > [data-tooltip="status-bar"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

[data-accessibility~="tooltipsOFF"] [data-type="link-tooltip"] {
	display: none !important;
}

@media only screen and (max-width: 48rem) {
	[data-type="link-tooltip"] {
		display: none !important;
	}
}

/* Touch screens have no hover: a tap opens the tile's page, so the floating
   status bar only lingered at the screen's foot (over the bottom bar, cut by
   rounded screen corners) — and a hover-revealed bar can make iOS spend the
   first tap on showing it. Left out there; list view keeps its bars, which
   sit inside each row. */
@media (hover: none) {
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]):not(
		[data-view="list"] [data-poster] > *
	) {
		display: none !important;
	}
}

[data-anchor="button"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	row-gap: 20px;
}

[data-anchor="button"] li {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #252525;
	border-radius: 5px;
	text-indent: unset;
	padding-left: unset;
}

[data-anchor="button"] li a {
	height: 100%;
	padding: 0 14px;
	color: rgba(37, 37, 37, 0.5);
	cursor: default;
	border: 2px solid #252525;
	border-left: unset;
	background-color: #f4f3f2;
	border-radius: 5px;
	border-top-left-radius: unset;
	border-bottom-left-radius: unset;
	display: block;
	text-decoration: none;
}

[data-anchor="button"] li label {
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
}

[data-anchor="button"] li label.ui-checkboxradio-checked + a {
	color: #252525;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-anchor="button"] li::before {
	display: none;
}

nav a {
	cursor: pointer;
}

[data-type="search"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

[data-type="search"] input {
	flex: 1;
	border: 1px solid #252525;
	padding: 9px 17px;
	border-radius: 5px;
}

[data-type="search"] input:focus-visible {
	outline: unset;
	border: 2px solid #252525;
	padding: 8px 16px;
}

[data-type="search"] button {
	outline: unset;
	padding: 8px 16px;
	border-radius: 5px;
	cursor: pointer;
}

[data-type="search"] button {
	color: #f4f3f2;
	background-color: #252525;
	border: 2px solid #252525;
}

[data-type="search"] button#clearSearch {
	color: #252525;
	background-color: #f4f3f2;
	border: 2px solid #252525;
}

[data-type="search"] button:hover {
	color: #252525;
	background-color: #f4f3f2;
}

[data-type="search"] button#clearSearch:hover {
	color: #f4f3f2;
	background-color: #252525;
}

[data-type="upcoming-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
}

@container page (max-width: 57.6rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@container page (max-width: 38.4rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr;
	}
}

@container page (max-width: 30.72rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr;
	}
}

[data-type="favorite-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 20px;
}

@container page (max-width: 57.6rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@container page (max-width: 38.4rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@container page (max-width: 30.72rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr;
	}
}

[data-type="upcoming-shows"] li,
[data-type="favorite-shows"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: unset;
}

[data-type="upcoming-shows"] li::before,
[data-type="favorite-shows"] li::before {
	content: unset;
}

/* ── Grid / list view (assets/includes/view_mode.php) ──────────────────────
   In list view each poster tile becomes a row: the poster, then the tile's
   own status-bar tooltip shown inline instead of docked at the bottom of the
   viewport. Wide screens put two rows side by side — each item still reads as
   a row.

   The switch is a small tab hanging from the light line above its section,
   the way the page tools hang from the navbar line: the page's own colour,
   outlined all round in the line's colour (main hr) — its top edge lies on
   the line, so the line runs on across it.

   A switchable section sits close to the line above it (--view-line-gap), and
   the tab is pinned to the heading row, reaching up that gap plus the line's
   own 2px box (1px line + the browser's 1px inset bottom border) so it meets
   the line itself. The heading sits beside the tab, its width capped at the
   tab's left edge plus a gap. The tab holds six icon buttons (1rem icon,
   xx-small padding round it); its width adds those, its seven xx-small gaps
   and paddings, and 3px of lines (border both sides, divider). On phones
   that leaves a heading too little room, so it goes below the tab. */
body {
	--view-line-gap: var(--spacing-medium);
	--view-tab-h: calc(1rem + 4 * var(--spacing-xx-small) + 0.1rem);
	--view-tab-w: calc(
		6 * (1rem + 2 * var(--spacing-xx-small)) + 8 * var(--spacing-xx-small) +
			0.15rem
	);
}

@container page (max-width: 30.72rem) {
	[data-view-head]:has(> [data-section-tab]) {
		padding-right: 0;
		padding-top: calc(
			var(--view-tab-h) - var(--view-line-gap) - 0.1rem +
				var(--spacing-x-small)
		);
	}
}

/* The section is pulled up into the line's bottom margin; the two margins
   collapse (1.75rem + (gap - 1.75rem) = gap) whatever sits between them — an
   inline <style> (games, boardgames) or the line closing the previous
   section (movies, shows). */
main [data-view-key],
main [data-view-head]:has(> [data-view-switch]) {
	margin-top: calc(var(--view-line-gap) - var(--spacing-x-large));
}

[data-view-head] {
	position: relative;
	padding-right: calc(
		var(--view-tab-w) + var(--view-tab-steps, 0rem) + var(--spacing-normal)
	);
}

/* A carousel's ← → in the tab (main.js): two more buttons, a gap and the
   divider's line. */
[data-view-head]:has([data-carousel-steps]:not([hidden])) {
	--view-tab-steps: calc(
		2 * (1rem + 2 * var(--spacing-xx-small)) + 2 * var(--spacing-xx-small) +
			0.05rem
	);
}

/* A page-wide switch (collections, wishlist) has a row of its own, right
   under its line: the row is as tall as the tab, so what follows starts
   below it. */
[data-view-head]:has(> [data-view-switch]) {
	padding-right: 0;
	min-height: calc(var(--view-tab-h) - var(--view-line-gap));
}

/* The tab: a section's tools (previous / next section, fold) and its switch,
   or a page-wide switch on its own. */
[data-section-tab],
[data-view-head] > [data-view-switch] {
	position: absolute;
	top: calc(-1 * (var(--view-line-gap) + 0.1rem));
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--bg-color);
	border: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 25%, transparent);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
}

[data-section-tools],
[data-section-tab] > [data-view-switch] {
	display: inline-flex;
	gap: var(--spacing-xx-small);
}

/* A thin divider between the section's tools and the switch. */
[data-section-tab] > [data-view-switch] {
	padding-left: var(--spacing-xx-small);
	border-left: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 25%, transparent);
}

/* A carousel's ← → first in its switch's tab (main.js), divided off on the
   right like the switch is from the section tools. */
[data-carousel-steps] {
	display: inline-flex;
	gap: var(--spacing-xx-small);
	padding-right: var(--spacing-xx-small);
	border-right: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 25%, transparent);
}

[data-carousel-steps][hidden] {
	display: none;
}

/* Text arrows in the icons' 1rem box (padding from the shared rule below). */
[data-carousel-steps] button {
	box-sizing: content-box;
	justify-content: center;
	align-items: center;
	width: 1rem;
	height: 1rem;
	font-size: 0.8rem;
	line-height: 1;
}

:is([data-section-tools], [data-view-switch], [data-carousel-steps]) button {
	display: inline-flex;
	padding: var(--spacing-xx-small);
	border: 0;
	border-radius: var(--spacing-xx-small);
	background: none;
	color: var(--primary-text-color);
	cursor: pointer;
}

:is([data-section-tools], [data-view-switch], [data-carousel-steps])
	button:hover:not(:disabled, [aria-pressed="true"]) {
	background-color: color-mix(
		in srgb,
		var(--primary-text-color) 10%,
		transparent
	);
}

[data-view-switch] button[aria-pressed="true"] {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

/* No section that way (the first's "previous", the last's "next"). */
[data-section-tools] button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Icons are masks in the button's text colour, so the pressed button's
   inverted colours carry over. */
:is([data-section-tools], [data-view-switch], [data-fold-head]) [data-icon] {
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

[data-section-tools] [data-icon="section-up"] {
	--icon: url("../img/icons/section-up.svg");
}
[data-section-tools] [data-icon="section-down"] {
	--icon: url("../img/icons/section-down.svg");
}
[data-section-fold] [data-icon="section-fold"] {
	--icon: url("../img/icons/section-fold.svg");
}
[data-section-fold] [data-icon="section-unfold"] {
	--icon: url("../img/icons/section-unfold.svg");
}
[data-view-switch] [data-icon="view-grid"] {
	--icon: url("../img/icons/view-grid.svg");
}
[data-view-switch] [data-icon="view-list"] {
	--icon: url("../img/icons/view-list.svg");
}
[data-view-switch] [data-icon="view-carousel"] {
	--icon: url("../img/icons/view-carousel.svg");
}

/* A sub-section's head row (renderFoldHead: episode dates, genres) is laid
   out like a section's: the sub-section is pulled up to sit --view-line-gap
   under the line above it (its heading's own margin would otherwise add to
   the line's), and its fold button is a one-button tab hanging from that
   line, as tall as the section tab, with the heading beside it. */
section:has(> [data-fold-head]) {
	margin-top: calc(var(--view-line-gap) - var(--spacing-x-large));
}

[data-fold-head] {
	position: relative;
	padding-right: calc(
		1rem + 4 * var(--spacing-xx-small) + 0.1rem + var(--spacing-normal)
	);
}

[data-fold-head] > h3 {
	margin-top: 0;
}

[data-fold-head] [data-section-fold] {
	position: absolute;
	top: calc(-1 * (var(--view-line-gap) + 0.1rem));
	right: 0;
	display: inline-flex;
	padding: calc(2 * var(--spacing-xx-small));
	border: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 25%, transparent);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	cursor: pointer;
}

[data-fold-head] [data-section-fold]:hover {
	background-color: color-mix(
		in srgb,
		var(--primary-text-color) 10%,
		transparent
	);
}

/* Folded: only the head row (heading and tab, or heading and fold button)
   stays. !important because the filter script shows sub-sections (movies'
   genres) with an inline display: block. */
section[data-folded="true"]
	> :not([data-view-head], [data-fold-head], hr:last-child) {
	display: none !important;
}

/* The line closing a section (movies, shows keep it inside) stays: the next
   section is pulled up into its margin. The heading of a folded section is
   quieter, so open ones lead. */
section[data-folded="true"]
	> :is([data-view-head], [data-fold-head])
	> :is(h2, h3) {
	opacity: 0.5;
}

/* The filter script hides any line after a hidden section — inline — and
   inside a folded section the sub-section before its closing line is hidden
   (shows' upcoming episodes, by date). The closing line stays regardless. */
section[data-folded="true"] > hr:last-child {
	display: block !important;
}

/* A section ending in sub-sections (movies' and shows' genres) has its lines
   inside those, hidden with them: a folded one followed straight by another
   section draws its own, like main hr — a 1px line in a 2px box, same
   margins — so the next section still sits below a line. */
section[data-view-key][data-folded="true"]:not(:has(> hr:last-child)):has(
		+ section
	)::after {
	content: "";
	display: block;
	margin-block: var(--spacing-x-large);
	border-top: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 25%, transparent);
	border-bottom: 0.05rem solid transparent;
}

/* Filter buttons inside a section (episode dates, genres) are secondary to
   the page's own at the top: smaller, outlined in the light line's colour,
   ticked ones in plain text rather than filled. */
[data-view-key] [data-anchor="button"] {
	gap: var(--spacing-x-small);
}

[data-view-key] [data-anchor="button"] li {
	background: none;
}

[data-view-key] [data-anchor="button"] li label.ui-checkboxradio-label {
	padding: var(--spacing-xx-small) var(--spacing-x-small);
	font-size: var(--font-size-small);
	border: 0.05rem solid rgba(37, 37, 37, 0.25);
	border-right: 0;
	background-color: var(--bg-color);
	color: rgba(37, 37, 37, 0.5);
}

[data-view-key] [data-anchor="button"] li label.ui-checkboxradio-checked {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

/* Both halves are light now, so a thin line divides the date from its ↓
   (the filled label used to). */
[data-view-key] [data-anchor="button"] li {
	align-items: stretch;
}

/* Their checkbox is drawn in the label's own colour: an outline, faded with
   an unticked label, filled with the light ✕ when ticked — without the light
   ring the dark top buttons give theirs (.ui-icon-check::after), which shows
   as a grey frame on a light button. */
[data-view-key] [data-anchor="button"] .ui-icon-background {
	color: inherit;
	box-sizing: border-box;
	border: 0.075rem solid currentColor;
	border-radius: 0.2rem;
	background-color: transparent;
	background-size: 60%;
}

[data-view-key] [data-anchor="button"] .ui-icon-blank {
	background-image: none;
}

/* Ticked: no border (the fill is the edge), so the ✕ is centred in the whole
   16px box at half its size — whole pixels on every side. Inside a 1.5px
   border it landed on fractions and sat off-centre on some buttons. */
[data-view-key]
	[data-anchor="button"]
	.ui-checkboxradio-checked
	.ui-icon-background {
	border: 0;
	background-color: currentColor;
	background-size: 50%;
}

[data-view-key] [data-anchor="button"] .ui-icon-check::after {
	content: none;
}

/* The ↓ half takes the date half's height (its own line height made it
   taller), arrow centred. */
[data-view-key] [data-anchor="button"] li a {
	display: flex;
	align-items: center;
	line-height: 1;
	padding: 0 var(--spacing-x-small);
	font-size: var(--font-size-small);
	border-width: 0.05rem;
	border-left: 0.05rem solid rgba(37, 37, 37, 0.25);
	border-color: rgba(37, 37, 37, 0.25);
}

[data-view-key] [data-anchor="button"] li label.ui-checkboxradio-checked + a {
	border-color: var(--primary-color);
}

[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	) {
	grid-template-columns: 1fr;
	gap: var(--spacing-normal);
}

@container page (min-width: 57.6rem) {
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		) {
		grid-template-columns: 1fr 1fr;
	}
}

/* One shade-2 card per item: the poster flush on the left, the text beside
   it. The poster stretches to the card's height and crops to fill, so the two
   always meet edge to edge — on desktop the card is the poster's height and
   nothing is cut; on phones, where the text is taller, the poster loses a
   little at its sides. The card's corner is the poster radius, so the badges'
   corners (which read --poster-radius) match it. */
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	> [data-poster] {
	display: grid;
	grid-template-columns: var(--list-poster-w) 1fr;
	align-items: stretch;
	background-color: var(--shade-2);
	color: var(--primary-text-color);
	border-radius: var(--poster-radius);
	overflow: hidden;
	transition: transform 250ms ease;
}

/* The poster column follows the tile's own shape (data-ratio from the badge
   manager, or images flagged square), at widths that keep the card about the
   same height — so square art is not forced into a portrait slot and cropped. */
[data-view="list"] [data-poster] {
	--list-poster-w: 7.5rem;
	--list-poster-w-sm: 5.5rem;
}

[data-view="list"] [data-poster][data-ratio="portrait"] {
	--list-poster-w: 8.5rem;
	--list-poster-w-sm: 6rem;
}

[data-view="list"] [data-poster][data-ratio="square"],
[data-view="list"] [data-poster]:has(img[data-img~="square"]) {
	--list-poster-w: 10rem;
	--list-poster-w-sm: 5.5rem;
}

[data-view="list"] [data-poster][data-ratio="landscape"] {
	--list-poster-w: 13rem;
	--list-poster-w-sm: 8rem;
}

[data-view="list"] [data-poster][data-ratio="wide"] {
	--list-poster-w: 16rem;
	--list-poster-w-sm: 9rem;
}

/* The whole card lifts on hover, like a poster tile does in the grid. */
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	> [data-poster]:hover,
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	> [data-poster]:focus-within {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		)
		> [data-poster] {
		transition: none;
	}
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		)
		> [data-poster]:hover,
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		)
		> [data-poster]:focus-within {
		transform: none;
	}
}

/* The image keeps its own shape at the top of the card, never stretched to
   the card's height (that cropped it whenever the text ran taller). Where the
   card does run taller, its colour continues below and the image's free
   corner is rounded; badges on that edge follow. */
[data-view="list"] [data-poster] [data-poster-frame] {
	display: block;
	align-self: start;
}

[data-view="list"] [data-poster] [data-poster-frame] > a:not([data-badge]) {
	display: block;
}

[data-view="list"] [data-poster] [data-poster-frame] img {
	height: auto;
	border-radius: 0 0 var(--poster-radius) 0;
}

[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	[data-poster]
	[data-badge][data-pos="bottom-left"] {
	border-radius: 0 var(--poster-radius) 0 0;
}

[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	[data-poster]
	[data-badge][data-pos="bottom-right"],
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	[data-type="entertainment-poster"]
	[data-upcoming]::before {
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}

@container page (max-width: 30.72rem) {
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		)
		> [data-poster] {
		grid-template-columns: var(--list-poster-w-sm) 1fr;
	}

	/* Too narrow to share a line: the title gets the full width and the logos
	   sit under it as their own row. */
	[data-view="list"] [data-poster] [data-info="head"] {
		flex-wrap: wrap;
		row-gap: var(--spacing-x-small);
	}

	[data-view="list"] [data-poster] [data-info="links"] {
		flex-basis: 100%;
		margin-left: 0;
		padding-left: 0;
	}
}

[data-view="list"] [data-poster]:hover [data-poster-frame],
[data-view="list"] [data-poster]:focus-within [data-poster-frame] {
	transform: none;
}

[data-view="list"] [data-poster] a {
	pointer-events: auto;
}

/* Badges sized for a small poster, not a grid tile. */
[data-view="list"] [data-poster] [data-badge] {
	height: 1.5rem;
}

[data-view="list"] [data-poster] [data-badge][data-badge-style="icon"] {
	width: 1.5rem;
}

[data-view="list"] [data-poster] [data-badge][data-badge-style="text"] {
	min-width: 0;
	padding: 0 0.35rem;
	font-size: 0.6rem;
}

/* The poster's right edge meets the text, not the card's edge, so badges on
   that side keep only their rounded inner corner. */
[data-view="list"] [data-poster] [data-badge][data-pos="top-right"] {
	border-radius: 0 0 0 var(--poster-radius);
}

[data-view="list"] [data-poster] [data-badge][data-pos="bottom-right"] {
	border-radius: var(--poster-radius) 0 0 0;
}

[data-view="list"] [data-type="entertainment-poster"] [data-upcoming]::before {
	width: 1.5rem;
	height: 1.5rem;
	background-size: contain;
	border-radius: var(--poster-radius) 0 0 0;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] {
	position: static;
	visibility: visible;
	opacity: 1;
	transform: none;
	width: auto;
	padding: var(--spacing-normal);
	background: none;
	border: 0;
	border-radius: 0;
	z-index: auto;
	transition: none;
}

/* Header at the top, details at the bottom, level with the poster's foot:
   the block stretches to the row's height and space-between pushes the
   details down. */
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	> [data-poster]
	> [data-tooltip="status-bar"] {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] hr {
	display: none;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] > div {
	flex-direction: column;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-small);
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] small {
	max-width: none;
}

/* Items with many details (a moomin mug has seven) would make a very tall
   card; from four details up they take two columns. */
@container page (min-width: 30.72rem) {
	[data-view="list"]
		[data-poster]
		> [data-tooltip="status-bar"]
		> div:has(> small:nth-child(4)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Upcoming episodes as a list: one shade-2 card per episode — the show's
   poster flush left, the show, episode and description in the middle, the
   episode still on the right. Rows stay one per line: the description needs
   the width. The still's column collapses when an episode has none. */
[data-view="list"] [data-type="upcoming-shows"] {
	grid-template-columns: 1fr;
	gap: var(--spacing-normal);
}

[data-view="list"] [data-type="upcoming-shows"] > li {
	display: grid;
	grid-template-columns: 7.5rem 1fr auto;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"poster head still"
		"poster desc still";
	column-gap: var(--spacing-normal);
	background-color: var(--shade-2);
	color: var(--primary-text-color);
	border-radius: var(--spacing-x-small);
	overflow: hidden;
	transition: transform 250ms ease;
}

[data-view="list"] [data-type="upcoming-shows"] > li:hover,
[data-view="list"] [data-type="upcoming-shows"] > li:focus-within {
	transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
	[data-view="list"] [data-type="upcoming-shows"] > li {
		transition: none;
	}
	[data-view="list"] [data-type="upcoming-shows"] > li:hover,
	[data-view="list"] [data-type="upcoming-shows"] > li:focus-within {
		transform: none;
	}
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure {
	margin: 0;
	padding: 0;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure:first-of-type {
	grid-area: poster;
}

[data-view="list"]
	[data-type="upcoming-shows"]
	> li
	> figure[data-img="episode"] {
	grid-area: still;
	width: 16rem;
}

/* Poster and still keep their own shapes at the top of the card, as in the
   other lists; each rounds the corner that ends inside the card. */
[data-view="list"] [data-type="upcoming-shows"] > li > figure {
	align-self: start;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure > a {
	display: block;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 0 var(--spacing-x-small) 0;
}

[data-view="list"]
	[data-type="upcoming-shows"]
	> li
	> figure[data-img="episode"]
	img {
	border-radius: 0 0 0 var(--spacing-x-small);
}

[data-view="list"] [data-type="upcoming-shows"] > li > h3 {
	grid-area: head;
	margin: 0;
	padding-top: var(--spacing-normal);
}

[data-view="list"] [data-type="upcoming-shows"] > li > p {
	grid-area: desc;
	padding-block: var(--spacing-x-small) var(--spacing-normal);
}

/* Without a still the text would run to the card's edge. */
[data-view="list"]
	[data-type="upcoming-shows"]
	> li:not(:has(> figure[data-img="episode"]))
	> :is(h3, p) {
	padding-right: var(--spacing-normal);
}

/* Phones: poster and text side by side, the still across the foot of the
   card. The poster keeps its own shape, as in the other lists. */
@container page (max-width: 30.72rem) {
	[data-view="list"] [data-type="upcoming-shows"] > li {
		grid-template-columns: 5.5rem 1fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"poster head"
			"poster desc"
			"still still";
		column-gap: var(--spacing-small);
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure:first-of-type {
		align-self: start;
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure:first-of-type
		img {
		height: auto;
		border-radius: 0 0 var(--spacing-x-small) 0;
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure[data-img="episode"] {
		width: auto;
	}

	[data-view="list"]
		[data-type="upcoming-shows"]
		> li
		> figure[data-img="episode"]
		img {
		border-radius: 0;
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > :is(h3, p) {
		padding-right: var(--spacing-small);
	}
}

[data-type="upcoming-shows"] h3 {
	line-height: 1.2;
	margin-bottom: 15px;
}

[data-type="upcoming-shows"] h3 span {
	font-family: "ApfelGrotezk";
	font-size: 20px;
}

[data-type="upcoming-shows"] p {
	font-size: 16px;
	margin-bottom: unset !important;
}

[data-type="upcoming-shows"] figure:first-of-type {
	padding-top: 10px;
}

[data-img="episode"] img {
	width: 100%;
	height: auto;
}

[data-type="episode-date"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-left: 60px;
	font-weight: 700;
}

[data-type="episode-date"] span {
	font-weight: 400;
}

[data-type="episode-date"]:first-of-type {
	margin-top: 30px;
}

[data-type="episode-date"]::before {
	content: "";
	background: url("../img/icons/calendar.svg");
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
}

@container page (max-width: 38.4rem) {
	[data-mobile="false"] {
		display: none;
	}
}

[data-type="entertainment-poster"],
[data-type="games"] {
	position: relative;
}

[data-type="entertainment-poster"] a,
[data-type="games"] a {
	display: flex;
	position: relative;
	cursor: pointer;
	pointer-events: auto;
	object-fit: cover;
}

[data-type="entertainment-poster"] img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

#owned-mugs [data-type="entertainment-poster"] img,
#all-mugs [data-type="entertainment-poster"] img,
#favorite-artists [data-type="entertainment-poster"] img,
#favorite-tracks [data-type="entertainment-poster"] img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Collections & Wishlist opt into square tiles via data-img="square" */
[data-type="entertainment-poster"] img[data-img~="square"] {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* A project's one-line summary (snippets/portfolio.php) stays a glance in a
   list row: at most four lines, the rest on the project's page. */
[data-view="list"] [data-poster] [data-info="summary"] {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

/* ── Carousel view (the switch's third mode) ───────────────────────────────
   The grid becomes one row that scrolls sideways and snaps tile by tile —
   plain CSS (scroll-snap), no slider script. Four tiles to a view, two in a
   narrow page. A little room above and below, so a hovered tile's zoom is
   not cut off by the row's edge; a thin scrollbar shows there is more. */
[data-view="carousel"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	) {
	--carousel-gap: var(--spacing-normal);
	--carousel-count: 4;
	display: grid;
	/* !important: the accessibility widths set the project grid's columns
	   with more specific rules. */
	grid-template-columns: none !important;
	grid-auto-flow: column;
	grid-auto-columns: calc(
		(100% - (var(--carousel-count) - 1) * var(--carousel-gap)) /
			var(--carousel-count)
	);
	gap: var(--carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	padding-block: var(--spacing-x-small);
	scrollbar-width: thin;
	scrollbar-color: color-mix(
			in srgb,
			var(--primary-text-color) 25%,
			transparent
		)
		transparent;
}

[data-view="carousel"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	> * {
	scroll-snap-align: start;
}

@container page (max-width: 38.4rem) {
	[data-view="carousel"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		) {
		--carousel-count: 2;
	}
}

/* Dressed as the "Beyond the SA" carousel (snippets/carousel.php): main.js
   wraps each switchable grid in the same frame — a thin line round the row,
   the position ("3 / 20") and the hovered tile's name at the top, the ← →
   tab hanging from its top edge — so that carousel's styles apply as they
   are. In grid and list views the frame is no box at all and its line and
   tab are left out. */
[data-view-frame] {
	display: contents;
}

[data-view="carousel"] [data-view-frame] {
	display: block;
	/* Clear of the switch's tab hanging above it. */
	margin-top: var(--spacing-small);
}

[data-view]:not([data-view="carousel"])
	[data-view-frame]
	> :is([data-carousel-info], [data-carousel-nav]) {
	display: none;
}

/* Its ← → went into the switch's tab: the top line is the position and the
   hovered tile's name only, across the whole width. */
[data-view-frame][data-steps-in-tab] > [data-carousel-info] {
	right: var(--spacing-small);
}

/* A tab on a row of its own (home, projects): the position and the hovered
   name sit on that row, left of the tab (main.js), so the frame drops its top
   strip and starts just under the tab. */
[data-view-head] > [data-carousel-info] {
	top: calc(-1 * (var(--view-line-gap) + 0.1rem));
	left: var(--spacing-small);
	right: calc(
		var(--view-tab-w) + var(--view-tab-steps, 0rem) + var(--spacing-normal)
	);
	height: var(--view-tab-h);
	color: var(--primary-text-color);
}

/* Narrow: the tab's buttons grow past --view-tab-w, and there is no hover to
   name a tile — just the position, as wide as it needs. */
@container page (max-width: 38.4rem) {
	[data-view-head] > [data-carousel-info] {
		right: auto;
	}
}

[data-view-head] > [data-carousel-info][hidden] {
	display: none;
}

/* …and the tab joins the frame: the frame's top line runs along the tab's
   bottom edge (one line, not two: the tab's bottom is 0.1rem above the row's,
   plus the line itself), the corners where they meet square. */
[data-view="carousel"] [data-view-frame][data-info-in-head] {
	/* Less the section's own pull-up (main [data-view-key]), which is for
	   sections sitting under a line, not under their tab's row. */
	margin-top: calc(
		-0.1rem - 1px - (var(--view-line-gap) - var(--spacing-x-large))
	);
	padding-top: var(--spacing-x-small);
	border-top-right-radius: 0;
}

[data-view-head]:has(> [data-carousel-info]:not([hidden]))
	> [data-view-switch] {
	border-radius: 0;
	padding-block: var(--spacing-x-small);
	/* One line where they meet, the frame's: the tab has no bottom edge of its
	   own and reaches a little under the frame (painted after it, on top), so
	   no rounding on a dense screen can leave two lines a fraction apart. */
	border-bottom: 0;
	padding-bottom: calc(var(--spacing-x-small) + 1px + 0.2rem);
}

/* The row grows with the tab's deeper top and bottom, so the frame still
   meets it; the position stays level with the icons. */
[data-view-head]:has(> [data-carousel-info]:not([hidden])) {
	--view-tab-deeper: calc(var(--spacing-x-small) - var(--spacing-xx-small));
	min-height: calc(
		var(--view-tab-h) - var(--view-line-gap) + 2 * var(--view-tab-deeper)
	);
}

[data-view-head] > [data-carousel-info]:not([hidden]) {
	height: calc(var(--view-tab-h) + 2 * var(--view-tab-deeper));
}

/* The ← → hang from the frame's top line in their own tab, as in the
   Beyond the SA carousel (the [data-carousel-nav] rules further down). */

/* The row is the frame's own: no extra room round it inside the line. */
[data-view="carousel"]
	[data-view-frame]
	> :is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	) {
	margin: 0;
	border-radius: var(--spacing-x-small);
}

/* ═══════════════════════════════════════════════════════════════
   Poster component (assets/includes/poster.php)
   Every image-grid tile renders through renderPoster(), which stamps
   [data-poster] + [data-ratio] on the wrapper and emits badges as
   [data-badge][data-pos] siblings of the link. Both the ratio and the
   badge corners come from the DB (migration 050, local/badge-manager).
═══════════════════════════════════════════════════════════════ */

[data-poster] {
	position: relative;
	/* One source of truth for the tile's corner. base.css gives every img a
	   10px radius; the games/tools grids override their imgs to 15px. Badges
	   read this so their inner corner always matches the image. */
	--poster-radius: 10px;
}

[data-poster][data-type="portfolio-item"] {
	--poster-radius: 15px;
}

/* The frame wraps the link, image and badges. Hover scales the FRAME so the
   badges grow with the poster and stay glued to its corners — scaling only the
   image left the badges behind and let the image ride over them.
   The status-bar tooltip is deliberately OUTSIDE the frame: it is position:fixed,
   and a transformed ancestor would become its containing block and trap it. */
[data-poster-frame] {
	position: relative;
	display: block;
	transition: transform 250ms ease;
}

[data-poster]:hover [data-poster-frame],
[data-poster]:focus-within [data-poster-frame] {
	transform: scale(1.02);
}

/* Lift the hovered tile above its grid neighbours while it is scaled up —
   badges included (z 3): the lift makes the tile its own stacking context, so
   its status bar (fixed, z 9999) only rises as high as the tile, and at 2 the
   next row's badges were drawn over the bar. */
[data-poster]:hover,
[data-poster]:focus-within {
	z-index: 4;
}

/* The project tiles (snippets/portfolio.php — home, projects) and the
   carousel's tiles grow on hover like the posters do (tiles that are posters
   — style, tools — already do, by their frame). Only the image is
   scaled: their link also holds the fixed status bar, and a transformed
   link would trap it. Pointer devices only — on touch a tap opens the page. */
@media (hover: hover) {
	[data-type="portfolio-item"]:not([data-poster]) img {
		transition: transform 250ms ease;
	}

	[data-type="portfolio-item"]:not([data-poster])
		a:is(:hover, :focus-visible)
		img {
		transform: scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-type="portfolio-item"]:not([data-poster])
		a:is(:hover, :focus-visible)
		img {
		transform: none;
	}
}

/* Hover is tracked on the tile, so crossing onto a badge no longer drops it. */
[data-poster]:hover > [data-tooltip="status-bar"],
[data-poster]:focus-within > [data-tooltip="status-bar"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

/* One status bar at a time. A click keeps its tile's bar open (focus), but
   pointing at another tile shows that one alone: the kept bar goes at once
   (visibility is not animated), and with it its focus — the browser drops
   focus from what it hides — so it is closed, not waiting underneath.
   Escape closes it too (main.js). List view is left alone: there the bars
   are the rows. */
@media (hover: hover) {
	body:has([data-poster]:hover)
		[data-poster]:not(:hover):focus-within
		> [data-tooltip="status-bar"]:not([data-view="list"] *) {
		visibility: hidden;
		opacity: 0;
		transform: translateY(10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-poster-frame] {
		transition: none;
	}
	[data-poster]:hover [data-poster-frame],
	[data-poster]:focus-within [data-poster-frame] {
		transform: none;
	}
}

[data-poster] img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

[data-poster][data-ratio="square"] img {
	aspect-ratio: 1 / 1;
}
[data-poster][data-ratio="poster"] img {
	aspect-ratio: 2 / 3;
}
[data-poster][data-ratio="portrait"] img {
	aspect-ratio: 3 / 4;
}
[data-poster][data-ratio="landscape"] img {
	aspect-ratio: 4 / 3;
}
[data-poster][data-ratio="wide"] img {
	aspect-ratio: 16 / 9;
}

/* ── Badges: corner, colour and icon all come from config ─────────────── */
[data-poster] [data-badge] {
	position: absolute;
	z-index: 3;
	height: var(--spacing-xx-large);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: var(--bg-color);
	pointer-events: none;
}

/* The review badge is the only interactive one */
[data-poster] a[data-badge] {
	pointer-events: auto;
	text-decoration: none;
}
[data-poster] a[data-badge]:hover,
[data-poster] a[data-badge]:focus {
	filter: brightness(1.12);
	color: var(--bg-color);
}

[data-poster] [data-badge][data-badge-style="icon"] {
	width: var(--spacing-xx-large);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}

[data-poster] [data-badge][data-badge-style="text"] {
	min-width: 50px;
	padding: 0 0.5rem;
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

[data-poster] [data-badge][data-pos="top-left"] {
	top: 0;
	left: 0;
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}
[data-poster] [data-badge][data-pos="top-right"] {
	top: 0;
	right: 0;
	border-radius: 0 var(--poster-radius) 0 var(--poster-radius);
}
[data-poster] [data-badge][data-pos="bottom-left"] {
	bottom: 0;
	left: 0;
	border-radius: 0 var(--poster-radius) 0 var(--poster-radius);
}
[data-poster] [data-badge][data-pos="bottom-right"] {
	bottom: 0;
	right: 0;
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}

/* Collections & Wishlist: de-emphasise disliked tiles */
#disliked [data-type="entertainment-poster"] img {
	filter: grayscale(0.4);
}

@container page (max-width: 38.4rem) {
	[data-type="entertainment-poster"] a,
	[data-type="games"] a {
		pointer-events: none;
	}

	[data-type="entertainment-poster"] [data-tooltip="status-bar"],
	[data-type="games"] [data-tooltip="status-bar"] {
		pointer-events: auto;
	}

	[data-type="entertainment-poster"][data-status="active"]
		[data-tooltip="status-bar"],
	[data-type="games"][data-status="active"] [data-tooltip="status-bar"] {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
}

[data-type="entertainment-poster"] [data-upcoming]::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	border-radius: 10px 0 10px 0;
	background-color: var(--primary-color);
}

[data-upcoming="true"]::before {
	background: url("../img/icons/upcoming-episodes.svg");
	border-top: 2px solid #ffd700;
	border-left: 2px solid #ffd700;
}

[data-upcoming="false"]::before {
	background: url("../img/icons/full-season.svg");
	border-top: 2px solid var(--success-color);
	border-left: 2px solid var(--success-color);
}

@media only screen and (max-width: 48rem) {
	[data-tooltip="status-bar"] {
		width: 100%;
		border-top: 2px solid var(--primary-color);
		border-right: unset;
		border-top-right-radius: unset;
	}
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] small,
[data-type="games"] [data-tooltip="status-bar"] small {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 3.75rem;
	max-width: 16rem;
	line-height: 1.2;
}

/* Config-driven tooltips (managed via local/tooltip-manager): the icon is a real
   <img> per line, laid out as a simple row (no position-based ::before icons). */
[data-tooltip="status-bar"][data-icons="managed"] small {
	margin-left: 0;
	gap: 0.5rem;
	flex-wrap: nowrap;
}
[data-tooltip="status-bar"][data-icons="managed"] small img {
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	flex: 0 0 auto;
	object-fit: contain;
}

/* Status-bar header (tooltips.php): the title, then — on the right — small
   logo links (the item on TMDB, a search on EXT). Logo selectors match the
   specificity of the poster image rules ([data-poster][data-ratio] img),
   which would force them to 2:3, and win by coming later; base.css's img
   radius is taken off too. */
/* One line: a long title wraps inside its own box, the logos stay top-right.
   Baseline alignment sits the logos' foot on the title's first-line baseline,
   and at cap height (0.7em) their letters line up with the title's. */
[data-tooltip="status-bar"] [data-info="head"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	column-gap: 0.4em;
	margin: 0;
}

/* A plain-text source ("Title — Steam ↗") has no logos to keep beside the
   title, so the line simply wraps; the source stays in one piece. */
[data-tooltip="status-bar"] [data-info="head"]:not(:has([data-info="links"])) {
	flex-wrap: wrap;
}

[data-tooltip="status-bar"] [data-info="source"] {
	white-space: nowrap;
}

/* …except where a long host would not fit the narrow text column at all. */
@container page (max-width: 30.72rem) {
	[data-view="list"] [data-tooltip="status-bar"] [data-info="source"] {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

[data-tooltip="status-bar"] [data-info="title"] {
	min-width: 0;
}

[data-tooltip="status-bar"] [data-info="links"] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: var(--spacing-x-small);
	margin-left: auto;
	padding-left: var(--spacing-normal);
}

/* Poster status bars share the list rows' shade-2 card colour. The text
   colour is the theme's, so dark mode (shade-2 = #525252) stays readable. */
[data-poster] > [data-tooltip="status-bar"] {
	background-color: var(--shade-2);
	color: var(--primary-text-color);
}

/* One width for every poster on desktop, so the docked bar does not jump
   between items; long titles wrap inside it. Phones keep the full-width bar. */
@media only screen and (min-width: 48rem) {
	[data-poster] > [data-tooltip="status-bar"] {
		width: 24rem;
	}
}

[data-tooltip="status-bar"] [data-info="link"] {
	display: inline-flex;
	line-height: 0;
	transition: transform 150ms ease;
}

/* A small lift says "this is a link" without underlines or tooltips. */
[data-tooltip="status-bar"] [data-info="link"]:hover,
[data-tooltip="status-bar"] [data-info="link"]:focus-visible {
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	[data-tooltip="status-bar"] [data-info="link"] {
		transition: none;
	}
}

[data-tooltip="status-bar"] [data-info="link"] img {
	display: block;
	width: auto;
	height: 0.75em;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

/* EXT's letters read smaller than the TMDB wordmark at the same
   height, so it gets a little more. */
[data-tooltip="status-bar"] [data-info="link"] img[src$="ext-to.svg"] {
	height: 0.85em;
}

/* Tile links are switched off on touch (first tap opens the status bar), but
   the status bar's own links — the logos and the source — must stay tappable. */
:is([data-type="entertainment-poster"], [data-type="games"])
	[data-tooltip="status-bar"]
	:is([data-info="link"], [data-info="source-link"]) {
	pointer-events: auto;
}

/* The source link looks exactly as the source always did: its text carries
   the underline and the ↗; the link itself adds no colour or underline. */
[data-tooltip="status-bar"] [data-info="source-link"] {
	color: inherit;
	text-decoration: none;
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] div,
[data-type="games"] [data-tooltip="status-bar"] div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

[data-type="entertainment-poster"] hr,
[data-type="games"] hr,
[data-tooltip="status-bar"] hr {
	margin-top: var(--spacing-x-small);
	margin-bottom: var(--spacing-x-small);
}

[data-type="loader"] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #f4f3f2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 19999;
}

[data-type="loader"] img {
	width: fit-content;
	height: auto;
}

[data-page="preview"] [data-type="loader"] {
	position: relative;
	top: unset;
	left: unset;
	width: 100%;
	height: 400px;
}

[data-page="preview"] [data-type="loader"] img {
	width: 400px;
	height: auto;
}

/* "Show duplicates only" filter on the games page: hide non-duplicate tiles
   and any library section that ends up with nothing left to show. */
main:has(#duplicate-filter:checked)
	[data-type="games"]
	> [data-type="portfolio-item"]:not([data-duplicate]) {
	display: none;
}
main:has(#duplicate-filter:checked)
	section[data-type="category"]:not(
		:has([data-type="portfolio-item"][data-duplicate])
	) {
	display: none;
}

[data-type="category"] > p {
	color: var(--shade-5);
}

[data-info="platforms"] {
	display: none;
}
main:has(#duplicate-filter:checked) [data-info="platforms"] {
	display: revert;
}

[data-tooltip="status-bar"][data-dup-tooltip] {
	display: none;
}
main:has(#duplicate-filter:checked)
	[data-tooltip="status-bar"][data-dup-tooltip] {
	display: revert;
}
main:has(#duplicate-filter:checked)
	[data-type="games"]
	[data-type="link-tooltip"] {
	display: none;
}

[data-type="notification"] {
	padding: 20px;
	border: 2px solid #252525;
	border-radius: 10px;
	width: fit-content;
}

figure[data-type="img-icon-banner"] {
	padding-top: unset;
}

figure[data-type="img-icon-banner"]:hover {
	transform: scale(1.0125);
}

figure[data-type="img-icon-banner"]:has(img) {
}

figure[data-type="img-icon-banner"] a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 1rem;
}

figure[data-type="img-icon-banner"] a[href="/assets/img/icons/design.webp"] {
	background-color: var(--focus-color);
}

figure[data-type="img-icon-banner"]
	a[href="/assets/img/icons/development.webp"] {
	background-color: #7ea16b;
}

figure[data-type="img-icon-banner"]
	a[href="/assets/img/icons/communications.webp"] {
	background-color: #9395d3;
}

figure[data-type="img-icon-banner"] img {
	height: 100%;
	width: auto;
	max-height: 10rem;
}

[data-type="hero"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 1.25rem;
	padding: 0 0 1.25rem 0;
	border-radius: 1rem;
}

[data-accessibility~="narrow"] [data-type="hero"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

[data-accessibility~="narrow"] [data-type="hero-img"] {
	display: none;
}

@container page (max-width: 64rem) {
	[data-type="hero"] {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
	}
}

[data-type="hero"] h1 {
	line-height: 0.8;
	margin-bottom: 1.5rem;
}

[data-type="hero"] p {
	margin-bottom: 2rem !important;
}

[data-type="hero-img"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	height: 20rem;
	width: 100%;
}

[data-type="hero-content"] br {
	margin-bottom: 0;
	margin-top: 0;
}

@container page (max-width: 64rem) {
	[data-type="hero-img"] {
		gap: 1.5rem;
		order: 1;
		margin-top: 0;
		margin-bottom: 0;
		height: unset;
	}

	[data-type="hero-img"] div {
		border-radius: 1rem;
	}

	[data-type="hero-img"]
		div:has(img[src="assets/img/icons/development.svg"]) {
		background-color: #7ea16b;
	}

	[data-type="hero-img"] div:has(img[src="assets/img/icons/design.svg"]) {
		background-color: var(--focus-color);
	}

	[data-type="hero-img"]
		div:has(img[src="assets/img/icons/communications.svg"]) {
		background-color: #9395d3;
	}

	[data-type="hero-content"] {
		order: 2;
	}

	[data-type="hero-content"] br {
		display: none;
	}
}

@container page (max-width: 38.4rem) {
	[data-type="hero-img"] {
		gap: unset;
		order: 2;
	}

	[data-type="hero-img"] > div:first-child > img {
		border-top-right-radius: unset;
		border-bottom-right-radius: unset;
	}

	[data-type="hero-img"] > div:nth-child(2) > img {
		border-radius: unset;
	}

	[data-type="hero-img"] > div:last-child > img {
		border-top-left-radius: unset;
		border-bottom-left-radius: unset;
	}

	[data-type="hero"] h1 {
		line-height: var(--title-1-line);
	}

	[data-type="hero-content"] br {
		display: none;
	}
}

@container page (max-width: 24rem) {
	[data-type="hero-content"] br {
		display: none;
	}
}

[data-type="hero-img"] div {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

[data-type="hero-img"] div img {
	width: 100%;
	height: auto;
	max-width: 12rem;
	aspect-ratio: 1 / 1;
}

@container page (max-width: 64rem) {
	[data-type="hero-img"] div img {
		max-width: unset;
	}
}

[data-top-small],
[data-top-medium],
[data-top-large],
[data-bottom-small],
[data-bottom-medium],
[data-bottom-large] {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* Top variants */
[data-top-small] {
	top: 30%;
	transform: translate(-50%, -50%);
}
[data-top-medium] {
	top: 40%;
	transform: translate(-50%, -50%);
}
[data-top-large] {
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Bottom variants */
[data-bottom-small] {
	bottom: 35%;
	transform: translate(-50%, 50%);
}
[data-bottom-medium] {
	bottom: 45%;
	transform: translate(-50%, 50%);
}
[data-bottom-large] {
	bottom: 55%;
	transform: translate(-50%, 50%);
}

[data-type="hero-content"] > div {
	display: flex;
	flex-direction: row;
	gap: 24px;
	flex-wrap: wrap;
}

@container page (max-width: 64rem) {
	[data-top-small],
	[data-top-medium],
	[data-top-large],
	[data-bottom-small],
	[data-bottom-medium],
	[data-bottom-large] {
		position: relative;
		top: unset;
		bottom: unset;
		left: unset;
		transform: unset;
	}
}

[data-type="site-status-group"] {
	display: flex;
	flex-direction: column;
	margin-top: 25px;
}

[data-type="site-statuses"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

@container page (max-width: 48rem) {
	[data-type="site-statuses"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container page (max-width: 32rem) {
	[data-type="site-statuses"] {
		grid-template-columns: repeat(1, 1fr);
	}
}

[data-type="site-status"] {
	border: 2px solid #252525;
	border-radius: 5px;
	padding: 0 20px 20px;
	background-color: #ebeae9;
	height: fit-content;
}

[data-type="site-status"] a {
	font-size: 18px;
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	display: block;
}

[data-status="up"] {
	border: 2px solid #7ea16b;
	border-top: 10px solid #7ea16b;
}

[data-status="down"] {
	border: 2px solid #c1292e;
	border-top: 10px solid #c1292e;
}

.up {
	color: #7ea16b;
}

.down {
	color: #c1292e;
}

.login-error {
	padding: 5px 10px;
	margin-top: 10px;
	background-color: var(--focus-color);
	color: #252525;
	letter-spacing: 0.8px;
	border-radius: 10px;
	width: 488px;
	text-align: center;
	font-weight: 700;
}

[data-page="login"] {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[data-type="login-container"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: 20px;
}

[data-type="login-container"] > img {
	height: 100%;
	object-fit: cover;
	grid-column: 1;
}

[data-type="login-container"] > div {
	width: 100%;
	grid-column: span 2;
}

@container page (max-width: 54.64rem) {
	[data-page="login"] {
		height: auto;
		justify-content: flex-start;
	}

	[data-type="login-container"] > img {
		aspect-ratio: 2 / 1;
		object-fit: cover;
	}

	[data-type="login-container"] {
		display: flex;
		flex-direction: column;
	}
}

/*********************************************************/
/*CHAT START**********************************************/
/*********************************************************/

/*CHAT EFFECTS START**************************************/
[data-text-mode="wave"] .char1 {
	display: inline-block;
	animation: wave 0.66s linear infinite -50ms;
}
[data-text-mode="wave"] .char2 {
	display: inline-block;
	animation: wave 0.66s linear infinite -100ms;
}
[data-text-mode="wave"] .char3 {
	display: inline-block;
	animation: wave 0.66s linear infinite -150ms;
}
[data-text-mode="wave"] .char4 {
	display: inline-block;
	animation: wave 0.66s linear infinite -200ms;
}
[data-text-mode="wave"] .char5 {
	display: inline-block;
	animation: wave 0.66s linear infinite -250ms;
}
[data-text-mode="wave"] .char6 {
	display: inline-block;
	animation: wave 0.66s linear infinite -300ms;
}
[data-text-mode="wave"] .char7 {
	display: inline-block;
	animation: wave 0.66s linear infinite -350ms;
}
[data-text-mode="wave"] .char8 {
	display: inline-block;
	animation: wave 0.66s linear infinite -400ms;
}
[data-text-mode="wave"] .char9 {
	display: inline-block;
	animation: wave 0.66s linear infinite -450ms;
}
[data-text-mode="wave"] .char10 {
	display: inline-block;
	animation: wave 0.66s linear infinite -500ms;
}
[data-text-mode="wave"] .char11 {
	display: inline-block;
	animation: wave 0.66s linear infinite -550ms;
}
[data-text-mode="wave"] .char12 {
	display: inline-block;
	animation: wave 0.66s linear infinite -600ms;
}
[data-text-mode="wave"] .char13 {
	display: inline-block;
	animation: wave 0.66s linear infinite -650ms;
}
[data-text-mode="wave"] .char14 {
	display: inline-block;
	animation: wave 0.66s linear infinite -700ms;
}
[data-text-mode="wave"] .char15 {
	display: inline-block;
	animation: wave 0.66s linear infinite -750ms;
}
[data-text-mode="wave"] .char16 {
	display: inline-block;
	animation: wave 0.66s linear infinite -800ms;
}
[data-text-mode="wave"] .char17 {
	display: inline-block;
	animation: wave 0.66s linear infinite -850ms;
}
[data-text-mode="wave"] .char18 {
	display: inline-block;
	animation: wave 0.66s linear infinite -900ms;
}
[data-text-mode="wave"] .char19 {
	display: inline-block;
	animation: wave 0.66s linear infinite -950ms;
}
[data-text-mode="wave"] .char20 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1000ms;
}
[data-text-mode="wave"] .char21 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1050ms;
}
[data-text-mode="wave"] .char22 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1100ms;
}
[data-text-mode="wave"] .char23 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1150ms;
}
[data-text-mode="wave"] .char24 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1200ms;
}
[data-text-mode="wave"] .char25 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1250ms;
}
[data-text-mode="wave"] .char26 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1300ms;
}
[data-text-mode="wave"] .char27 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1350ms;
}
[data-text-mode="wave"] .char28 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1400ms;
}
[data-text-mode="wave"] .char29 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1450ms;
}
[data-text-mode="wave"] .char30 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1500ms;
}
[data-text-mode="wave"] .char31 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1550ms;
}
[data-text-mode="wave"] .char32 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1600ms;
}
[data-text-mode="wave"] .char33 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1650ms;
}
[data-text-mode="wave"] .char34 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1700ms;
}
[data-text-mode="wave"] .char35 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1750ms;
}
[data-text-mode="wave"] .char36 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1800ms;
}
[data-text-mode="wave"] .char37 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1850ms;
}
[data-text-mode="wave"] .char38 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1900ms;
}
[data-text-mode="wave"] .char39 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1950ms;
}
[data-text-mode="wave"] .char40 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2000ms;
}
[data-text-mode="wave"] .char41 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2050ms;
}
[data-text-mode="wave"] .char42 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2100ms;
}
[data-text-mode="wave"] .char43 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2150ms;
}
[data-text-mode="wave"] .char44 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2200ms;
}
[data-text-mode="wave"] .char45 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2250ms;
}
[data-text-mode="wave"] .char46 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2300ms;
}
[data-text-mode="wave"] .char47 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2350ms;
}
[data-text-mode="wave"] .char48 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2400ms;
}
[data-text-mode="wave"] .char49 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2450ms;
}
[data-text-mode="wave"] .char50 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2500ms;
}

@keyframes wave {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(5px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		text-indent: 100%;
	}
	100% {
		text-indent: 0;
	}
}

@keyframes slide {
	0% {
		top: -1.5em;
	}
	10%,
	90% {
		top: 0;
	}
	100% {
		top: 1.5em;
	}
}

@keyframes flash1 {
	0% {
		color: #ff0000;
	}
	50% {
		color: #ff0;
	}
}

@keyframes flash2 {
	0% {
		color: #0000ff;
	}
	50% {
		color: #00ffff;
	}
}

@keyframes flash3 {
	0% {
		color: #00b000;
	}
	50% {
		color: #80ff80;
	}
}

@keyframes glow1 {
	0% {
		color: #ff0000;
	}
	33% {
		color: #00b000;
	}
	66% {
		color: #0000ff;
	}
	100% {
		color: #ff0000;
	}
}

@keyframes glow2 {
	0% {
		color: #ff0000;
	}
	33% {
		color: #800080;
	}
	66% {
		color: #0000ff;
	}
	100% {
		color: #ff0000;
	}
}

@keyframes glow3 {
	0% {
		color: #ffffff;
	}
	25% {
		color: #00b000;
	}
	50% {
		color: #ffffff;
	}
	67.5% {
		color: #00ffff;
	}
	75% {
		color: #0000ff;
	}
	100% {
		color: #ffffff;
	}
}

[data-text-mode="wave"],
[data-text-mode="scroll"],
[data-text-mode="slide"] {
	color: var(--focus-color);
}

[data-text-mode="wave"] {
	animation: wave 0.66s linear infinite -50ms;
}

[data-text-mode="wave"] span {
	display: inline-block;
	white-space: pre;
}

[data-text-mode="wave"] span::before {
	content: attr(data-char);
}

[data-text-mode="scroll"] {
	display: inline-block;
	white-space: nowrap;
	animation: scroll 8s infinite linear;
	width: 100%;
	overflow: hidden;
}

[data-text-mode="slide"] {
	animation: slide 3s linear;
	position: relative;
	top: -2em;
}

[data-text-mode="flash1"] {
	animation: flash1 0.45s steps(1, end) infinite;
}

[data-text-mode="flash2"] {
	animation: flash2 0.45s steps(1, end) infinite;
}

[data-text-mode="flash3"] {
	animation: flash3 0.45s steps(1, end) infinite;
}

[data-text-mode="glow1"] {
	animation: glow1 3s linear infinite;
}

[data-text-mode="glow2"] {
	animation: glow2 3s linear infinite;
}

[data-text-mode="glow3"] {
	animation: glow3 3s linear infinite;
}
/*CHAT EFFECTS END****************************************/

#user-count {
	font-size: var(--font-size-medium);
}

[data-type="chat"][data-chat] > li {
	position: relative;
	margin: var(--spacing-x-small) 0;
	padding: var(--spacing-x-small);
	border-radius: var(--spacing-xx-small);
	transition: background-color 0.2s;
	text-indent: unset;
}

[data-type="chat"][data-chat] > li::before {
	content: unset;
}

[data-type="chat"][data-chat] > li:hover {
	background: var(--shade-1);
}

[data-type="chat"][data-chat] > li.pending {
	opacity: 0.7;
}

[data-type="chat"][data-chat] > li small {
	display: block;
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 0.2rem;
}

[data-type="chat"][data-chat] > li span {
	word-break: break-word;
}

[data-type="chat"][data-chat] > li > [data-action="delete"] {
	position: absolute;
	right: 0.5rem;
	top: -0.5rem;
	background: none;
	border: none;
	color: var(--error-color);
	cursor: pointer;
	font-size: 2rem;
	display: none;
}

[data-type="chat"][data-chat] > li:hover [data-action="delete"] {
	display: block;
}

.error-message {
	background: var(--error-color);
	color: white;
	padding: 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
	text-align: center;
	animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

@container page (max-width: 32rem) {
	body {
		padding: 1rem;
	}
	form {
		flex-direction: column;
	}
	form textarea,
	form textarea {
		flex: 1;
	}
}

[data-mode="preview"] {
	display: none;
	position: relative;
	margin-top: 1rem;
	padding: 20px 16px 8px 16px;
	border: 2px solid var(--info-color);
	border-radius: 5px;
	width: 100%;
}

[data-mode="preview"]::before {
	content: "PREVIEW";
	position: absolute;
	top: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--info-color);
}

[data-mode="preview"]:has(*) {
	display: block;
}

[data-type="chat-message"] {
	position: relative;
}

[data-type="chat-message"] blockquote,
[data-mode="preview"] blockquote {
	padding-left: 3rem;
}

[data-type="chat-message"] blockquote::before,
[data-mode="preview"] blockquote::before {
	font-size: 45px;
	margin-bottom: unset;
	left: 10px;
}

[data-type="chat-message"] *:not(:last-child),
[data-mode="preview"] *:not(:last-child) {
	margin-bottom: unset;
}

[data-type="chat-settings"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

[data-type="chat"][data-chat] {
	width: 100%;
	height: calc(100vh - 545px);
	min-height: 400px;
	overflow-y: auto;
	padding: var(--spacing-normal);
	border: 1px solid var(--shade-2);
	border-radius: var(--spacing-x-small);
	background-color: #fbfbfb;
	list-style: none;
}

[data-type="chat"][data-chat="runescape"] {
	font-family: "Runescape Plain 12";
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-image: url("../img/chat/rs/rs-border.webp") 15 round;
	background-image: url("../img/chat/rs/rs-fill.webp");
	background-repeat: repeat;
	background-position: center;
	margin-block-end: 0;
	padding: 0 0 0 2px;
}

[data-type="chat"][data-chat="runescape"] > li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-family: "Runescape Plain 12";
	font-size: 1.2rem;
	line-height: 0.8;
	padding: unset;
	margin: unset;
}

[data-type="chat"][data-chat="runescape"] p {
	font-family: "Runescape Plain 12";
	font-size: 1.2rem;
}

[data-type="chat"][data-chat="runescape"] > li > div span {
	word-break: unset;
	white-space: nowrap;
	flex-shrink: 0;
}

[data-type="chat"][data-chat="runescape"] > li:hover {
	background-color: unset;
}

[data-type="chat"][data-chat="runescape"] > li:hover [data-action="delete"],
[data-type="chat"][data-chat="skype"] > li:hover [data-action="delete"],
[data-type="chat"][data-chat="runescape"] > li [data-type="avatar"] {
	display: none;
}

[data-type="chat"][data-chat="runescape"] > li [data-type="username"] {
	width: 100%;
}

[data-type="chat"][data-chat="runescape"] > li [data-type="username"]::after {
	content: ":";
}

[data-type="chat"][data-chat="runescape"] [data-type="timestamp"] {
	display: none;
}

[data-type="chat"][data-chat="runescape"] + form {
	border-bottom: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-image: url("../img/chat/rs/rs-border.webp") 15 round;
	background-image: url("../img/chat/rs/rs-fill.webp");
	background-repeat: repeat;
	background-position: center;
}

[data-type="chat"][data-chat="runescape"] + form textarea {
	background: transparent;
	border: unset;
	border-radius: unset;
	border-top: 2px solid #807660;
	padding: 8px 16px 8px 2px;
}

[data-type="chat"][data-chat="runescape"] + form button {
	display: none;
}

[data-type="chat"][data-chat="runescape"] [data-type="chat-message"] {
	display: inline-block;
	color: #7f0000;
	line-height: 0.8;
	letter-spacing: 0;
	white-space: pre-wrap;
	margin-top: 1px;
}

/* Target only elements with data-chat="runescape" */
[data-chat="runescape"]::-webkit-scrollbar {
	width: 16px;
}

[data-chat="runescape"]::-webkit-scrollbar-track {
	background-color: #252019;
}

[data-chat="runescape"]::-webkit-scrollbar-thumb {
	background-color: #61553e;
	border: 2px solid #000;
}

[data-chat="runescape"]::-webkit-scrollbar-thumb:hover {
	opacity: 0.8;
}

[data-type="chat"][data-chat="skype"] {
	border-radius: unset;
	border-bottom: unset;
	margin-bottom: unset;
}

[data-type="chat"][data-chat="skype"] > li {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 24px;
}

[data-type="chat"][data-chat="skype"] > li[data-user="self"] {
	justify-content: flex-end;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"] {
	order: 1;
	width: 100%;
	background-color: #b6eefd;
	border-radius: 5px;
	padding: 10px;
}

[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"] {
	background-color: #def7fc;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"]::after,
[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"]::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"]::after {
	left: -10px;
	border-right: 10px solid #b6eefd;
}

[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"]::after {
	left: unset;
	right: -10px;
	border-right: unset;
	border-left: 10px solid #def7fc;
}

[data-type="chat"][data-chat="skype"] > li [data-type="meta-information"] {
	order: 2;
	white-space: nowrap;
	color: #c8e5e9;
}

[data-type="chat"][data-chat="skype"]
	> li
	[data-type="meta-information"]
	[data-type="username"],
[data-type="chat"][data-chat="skype"]
	> li
	[data-type="meta-information"]
	[data-type="date"] {
	display: none;
}

[data-type="chat"][data-chat="skype"] + form {
	background-color: #fbfbfb;
	padding: 32px 64px 32px 118px;
	border-left: 1px solid var(--shade-2);
	border-right: 1px solid var(--shade-2);
	border-bottom: 1px solid var(--shade-2);
}

[data-type="chat"][data-chat="skype"] + form textarea {
	border: 2px solid #19b2ee;
	border-radius: unset;
}

[data-type="chat"][data-chat="skype"] + form [data-button] {
	font-size: 0;
	color: transparent;
	user-select: none;
	transition: none;
	background-color: transparent;
	border: unset;
	padding: unset;
}

[data-type="chat"][data-chat="skype"] + form [data-button]::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url("../img/chat/skype/skype-send.svg");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-top: 8px;
}

/* ── Find on this page (snippets/custom-search.php, main.js) ───────────────
   While a search has matches, the tiles that do not match dim; the active
   match gets one ring round its poster (rounded like it), and its status
   bar shows. */
main[data-page-finding]
	:is([data-type="portfolio-item"], [data-type="entertainment-poster"]):not(
		[data-search]
	) {
	opacity: 0.25;
	transition: opacity 200ms ease;
}

[data-search="active-match"] {
	position: relative;
	z-index: 9998;
}

/* The ring: concentric with the poster — its own radius plus the gap
   (outer radius = inner radius + offset). In list view round the whole row;
   in carousel view just inside the poster's edge, where the scrolling row
   would clip one outside it. */
[data-search="active-match"] > [data-poster-frame],
[data-search="active-match"]:not([data-poster]) > a:first-child {
	border-radius: var(--poster-radius, 10px);
	outline: 0.2rem solid var(--focus-color);
	outline-offset: 0.2rem;
}

[data-view="list"] [data-search="active-match"][data-poster] {
	outline: 0.2rem solid var(--focus-color);
	outline-offset: 0.2rem;
}

[data-view="list"] [data-search="active-match"] > [data-poster-frame] {
	outline: none;
}

[data-view="carousel"] [data-search="active-match"] > [data-poster-frame] {
	outline: none;
}

[data-view="carousel"]
	[data-search="active-match"]
	> [data-poster-frame]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--poster-radius, 10px);
	box-shadow: inset 0 0 0 0.25rem var(--focus-color);
	pointer-events: none;
}

/* The bar: a card at the top, in the theme's colours. */
#custom-search-bar {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 9999;
	display: grid;
	gap: var(--spacing-x-small);
	box-sizing: border-box;
	width: min(24rem, calc(100vw - 2rem));
	padding: var(--spacing-small) var(--spacing-medium) var(--spacing-small);
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	border: 0.1rem solid var(--primary-color);
	border-top: 0;
	border-radius: 0 0 0.6rem 0.6rem;
	box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.15);
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 200ms ease,
		visibility 0s linear 200ms;
}

#custom-search-bar[data-status="open"] {
	visibility: visible;
	opacity: 1;
	transition: opacity 200ms ease;
}

[data-part="page-find-row"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
}

[data-part="page-find-label"] {
	margin: 0 auto 0 0;
	font-size: var(--font-size-small);
	font-weight: 700;
}

#match-count {
	font-size: var(--font-size-small);
	opacity: 0.75;
}

[data-part="page-find-close"] {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
	cursor: pointer;
}

[data-part="page-find-close"] [data-icon] {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	-webkit-mask: url("../img/icons/menu-close.svg") center / 0.8rem no-repeat;
	mask: url("../img/icons/menu-close.svg") center / 0.8rem no-repeat;
}

#custom-search {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.5rem;
	background-color: var(--shade-1);
	color: var(--primary-text-color);
	font: inherit;
}

#custom-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

#custom-search:focus {
	outline: none;
	box-shadow: 0 0 0 0.1rem var(--focus-color);
}

[data-part="page-find-keys"] {
	margin: 0;
	font-size: calc(var(--font-size-small) * 0.9);
	opacity: 0.7;
}

[data-part="page-find-keys"] kbd {
	padding: 0 0.25rem;
	border: 0.05rem solid currentColor;
	border-radius: 0.25rem;
	font: inherit;
}

/* Search: hide every tooltip while a match is active... */
main:has([data-search="active-match"])
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
	visibility: hidden !important;
	opacity: 0 !important;
}

/* ...then reveal only the active match's own tooltip, whatever the item/tooltip type */
main:has([data-search="active-match"])
	[data-search="active-match"]
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateY(0);
}

[data-type="sitemap"] a {
	text-decoration: none;
	transition-duration: 200ms;
}

[data-type="sitemap"] a:hover {
	text-decoration: underline;
	transition-duration: 200ms;
}

[data-type="sitemap"] [data-type="sitemap-category"] {
	font-weight: 400;
	padding-left: unset;
	text-indent: unset;
}

[data-type="sitemap-category"]:not(:last-child) {
	margin-bottom: 24px;
}

[data-type="sitemap-category"]::before {
	display: none;
}

[data-type="site-status"] [role="tablist"] h3 {
	padding: 5px 5px 5px 0;
}

[data-type="site-status"] .ui-accordion-content {
	padding: 0 0 0 35px;
}

[data-type="site-status"] p {
	margin-bottom: 0 !important;
}

[data-type="site-status"] [role="tablist"] h3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
}

[data-type="site-status"] [role="tablist"] h3::before {
	content: "";
	background-image: url("../img/icons/incident.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding-right: 24px;
}

[data-type="site-status"] > div {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1rem;
}

[data-type="site-status"] div.accordion,
[data-type="site-status"] div.accordion * {
	font-size: 18px;
}

[data-type="site-status"] div.accordion {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	margin-top: 10px;
}

[data-type="site-status"] hr {
	margin-top: var(--spacing-large);
	margin-bottom: var(--spacing-large);
}

[data-type="site-status"] > p {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

[data-size="xs"] {
	/* Extra Small */
}
[data-size="sm"] {
	/* Small */
}
[data-size="md"] {
	/* Medium / default */
}
[data-size="lg"] {
	/* Large */
}
[data-size="xl"] {
	/* Extra Large */
}

/**************************/
/*ACCORDION ELEMENTS START*/
/**************************/
#etl h3 {
	margin-top: 0;
	margin-bottom: 20px;
}

#etl div {
	margin-bottom: 20px;
}

#filter-container h3,
#dates-container h3 {
	padding: unset;
	margin: unset;
}

#dates-container h3,
#filter-container h3 {
	display: flex;
	align-items: center;
}

#filter-container nav,
#dates-container nav {
	padding: unset;
}

#filter-container h3::before,
#dates-container h3::before {
	content: "→ ";
	width: 24px;
}

#filter-container h3[aria-expanded="true"]::before,
#dates-container h3[aria-expanded="true"]::before {
	content: "↓ ";
	width: 24px;
}
/************************/
/*ACCORDION ELEMENTS END*/
/************************/

/**************/
/*BADGES START*/
/**************/
[data-type="badge"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: bold;
	color: #f4f3f2;
	line-height: 1;
	text-transform: uppercase;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="badge"][data-size="md"] {
	font-size: 16px;
}

[data-type="badge"][data-size="sm"] {
	font-size: 12px;
}

[data-badge="success"],
[data-badge="up"],
[data-badge="high"] {
	background-color: var(--success-color);
}

[data-badge="medium"] {
	background-color: var(--caution-color);
}

[data-badge="warning"],
[data-badge="error"] {
	background-color: var(--focus-color);
}

[data-badge="error"],
[data-badge="down"],
[data-badge="low"] {
	background-color: var(--error-color);
}

[data-badge="info"] {
	background-color: var(--info-color);
}

[data-badge="primary"] {
	background-color: var(--primary-color);
}

[data-badge="secondary"] {
	background-color: var(--shade-3);
}

[data-badge="light"] {
	background-color: var(--shade-1);
	color: var(--primary-text-color);
}

[data-badge="dark"] {
	background-color: var(--shade-4);
}

[data-type="badge"][data-icon="lock"] {
	align-items: center;
	gap: 0.4em;
}

[data-type="badge"][data-icon="lock"]::before {
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("../img/icons/lock.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}
/************/
/*BADGES END*/
/************/

/******************/
/*TEXT ICONS START*/
/******************/
[data-icon="time"] {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

[data-icon="time"]::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background-image: url("../img/icons/time.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/****************/
/*TEXT ICONS END*/
/****************/

form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

form textarea {
	height: auto;
	min-height: 0;
	resize: none;
	overflow-y: hidden;
	border: 2px solid var(--shade-2);
	padding: 8px 16px;
	border-radius: 5px;
}

form textarea:focus-visible {
	outline: unset;
	border: 2px solid #252525;
}

form textarea:not(:placeholder-shown) {
	border-width: 2px;
}

form textarea[name="content"] {
	flex: 1;
}

form:has(textarea:placeholder-shown) button {
	opacity: 0.4;
	pointer-events: none;
	transition: 0.2s ease;
}

form:has(textarea:not(:placeholder-shown)) button {
	opacity: 1;
	pointer-events: auto;
}

form button:hover {
	transform: scale(1) !important;
}

form > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-indent: 4px;
}

form > div > label {
	font-size: 18px;
}

input,
form > div > input,
form > div > textarea {
	border-radius: 5px;
	padding: 11px 15px;
	border: 2px solid var(--shade-2);
	background-color: #fdfffc;
}

input:active,
input:focus,
form > div > input:active,
form > div > input:focus {
	border: 2px solid var(--primary-color);
	outline: none;
	box-shadow: unset;
}

/* ── Watch picker (watch-picker/index.php) ──────────────────────────────────
   Each question a row of the site's pill buttons (jQuery UI checkboxradio, as
   in the accessibility settings): one tap, no dropdowns. Wanted genres carry
   their rank (1–3) on the button; language and avoid sit in "More filters".
   The results are the movies pages' poster tiles with their status bars. */
form[data-type="watch-picker"] {
	display: grid;
	gap: var(--spacing-medium);
}

form[data-type="watch-picker"] [data-part="question"] {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

form[data-type="watch-picker"] legend {
	padding: 0;
	margin-bottom: var(--spacing-x-small);
	font-weight: 700;
}

form[data-type="watch-picker"] [data-part="hint"] {
	margin: calc(-1 * var(--spacing-xx-small)) 0 var(--spacing-x-small);
	font-size: var(--font-size-small);
	opacity: 0.75;
}

form[data-type="watch-picker"] [data-part="options"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-x-small);
	text-indent: 0;
}

form[data-type="watch-picker"] [data-part="options"] label {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin: 0;
	line-height: 1.2;
}

/* Compact pills: many answers on few lines. "Larger buttons" keeps the
   site's full size. */
html:not([data-accessibility~="button"])
	form[data-type="watch-picker"]
	[data-part="options"]
	label {
	padding: 0.3rem 0.6rem;
	font-size: var(--font-size-small);
}

/* The box, then the word: one gap of its own (as flex items jQuery UI's
   hidden input and spacer each added one, 14px in all), and level with the
   word (jQuery UI lifts its icons by 0.25em). */
form[data-type="watch-picker"] [data-part="options"] label > span:first-child {
	margin: 0 0.4rem 0 0;
}

form[data-type="watch-picker"] [data-part="options"] label[hidden] {
	display: none;
}

/* Three genres chosen: the others step back until one is let go. */
form[data-type="watch-picker"] [data-genres="want"] label:has(input:disabled) {
	opacity: 0.45;
}

/* A wanted genre's rank: 1 weighs most. */
form[data-type="watch-picker"] label[data-rank]::after {
	content: attr(data-rank);
	display: inline-grid;
	place-items: center;
	min-width: 1.1rem;
	height: 1.1rem;
	margin-left: var(--spacing-x-small);
	border-radius: 50%;
	background-color: var(--focus-color);
	color: var(--primary-color);
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 1;
}

form[data-type="watch-picker"] select {
	box-sizing: border-box;
	width: 100%;
	max-width: 24rem;
	padding: 0.55rem 0.75rem;
	border: 0.1rem solid var(--shade-2);
	border-radius: 0.25rem;
	background-color: var(--bg-color);
	color: var(--primary-text-color);
}

/* Closed it is its summary alone (a grid gap there left an empty band, the
   hidden content counting as a row); open, the summary sits close above
   its questions. */
form[data-type="watch-picker"] [data-part="more"] {
	display: grid;
	gap: 0;
}

form[data-type="watch-picker"] [data-part="more"][open] {
	gap: var(--spacing-medium);
}

form[data-type="watch-picker"] [data-part="more"] > summary {
	cursor: pointer;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3rem;
}

form[data-type="watch-picker"] [data-part="more"][open] > summary {
	margin-bottom: calc(var(--spacing-small) - var(--spacing-medium));
}

form[data-type="watch-picker"] [data-part="actions"] {
	display: flex;
	/* A row: the site's "form > div" rule stacks a form's blocks. */
	flex-direction: row;
	text-indent: 0;
	flex-wrap: wrap;
	gap: var(--spacing-small);
}

form[data-type="watch-picker"] [data-part="actions"] > * {
	margin: 0;
}

/* Find takes the row, Start over only its text (on phones, both full width
   one above the other, as the site's buttons are there). */
@container page (min-width: 30.72rem) {
	form[data-type="watch-picker"] [data-part="actions"] > button {
		flex: 1 1 auto;
		width: auto;
	}

	form[data-type="watch-picker"] [data-part="actions"] > a {
		flex: none;
		width: auto;
	}
}

[data-part="results-intro"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
}

/* A small button, the pills' size: page colour, dark outline, dark on hover. */
[data-part="results-intro"] [data-part="pick-one"] {
	flex: none;
	margin: 0;
	padding: 0.4rem 0.8rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.25rem;
	background-color: var(--bg-color);
	color: var(--primary-color);
	font: inherit;
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

[data-part="results-intro"] [data-part="pick-one"]:hover {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-part="results-intro"] [data-part="pick-one"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

[data-part="results-intro"] [data-part="pick-one"][hidden] {
	display: none;
}

/* Links on to the whole watch list, under the matches: written like the
   site's addresses — underlined, → for a page of this site. */
[data-part="more-links"] {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-xx-small) 0.4rem;
	margin-top: var(--spacing-medium);
}

[data-part="more-links"] > a {
	padding-bottom: 0.15rem;
	background: linear-gradient(currentColor, currentColor) left bottom / 100%
		0.075rem no-repeat;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

[data-part="more-links"] > a::after {
	content: "\202F\2192\FE0E";
}

/* The one "Pick one for me" landed on: an orange ring drawn inside the tile,
   on its rounded corners — inside, so a carousel's edge can't cut it off,
   and on the whole card in list view. The others step back until pointed
   at (Escape, or picking again, moves on). */
[data-part="results"] > [data-poster] {
	transition: opacity 250ms ease;
}

[data-part="results"] > [data-picked] {
	position: relative;
}

/* On the poster itself, so the ring grows with it on hover (a ring on the
   tile stayed put while the poster spilled past it); in list view the whole
   card grows, so there the ring is the card's. */
[data-part="results"]
	> [data-picked]:not([data-view="list"] *)
	[data-poster-frame]::after,
[data-view="list"] [data-part="results"] > [data-picked]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--poster-radius);
	box-shadow: inset 0 0 0 0.2rem var(--focus-color);
	pointer-events: none;
}

[data-part="results"]:has(> [data-picked])
	> [data-poster]:not([data-picked], :hover, :focus-within) {
	opacity: 0.4;
}

/* Its status bar opens with it (why it fits), until another title is
   pointed at. Not in list view, where the bars are the rows. */
body:not(:has([data-poster]:hover))
	[data-part="results"]
	> [data-picked]
	> [data-tooltip="status-bar"]:not([data-view="list"] *) {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-part="results"] > [data-poster] {
		transition: none;
	}
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: unset;
}

.ui-button[aria-expanded="false"] {
	border: 2px solid var(--shade-2);
}

.ui-button[aria-expanded="true"] {
	border: 2px solid var(--primary-color);
}

.ui-selectmenu-menu .ui-menu {
	width: 100% !important;
}

.ui-selectmenu-button.ui-button {
	width: 100%;
	background-color: #fdfffc;
}

.ui-selectmenu-button .ui-icon {
	width: 25px;
	height: 25px;
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.2;
}

.ui-selectmenu-button-open {
	border-bottom: unset !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ui-selectmenu-button-open .ui-icon {
	background-image: url("/assets/img/icons/close.svg");
}

.ui-selectmenu-button-closed .ui-icon {
	background-image: url("/assets/img/icons/chevron.svg");
}

.ui-selectmenu-menu,
.ui-autocomplete {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: var(--shade-1);
}

.ui-selectmenu-menu {
	position: relative;
	width: 100%;
	border: 2px solid var(--primary-color);
}

.ui-menu-item:has(.ui-state-active) {
	color: var(--bg-color);
	background-color: var(--shade-3);
}

.ui-autocomplete {
	border-left: 2px solid var(--primary-color);
	border-right: 2px solid var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

.ui-autocomplete.ui-menu .ui-state-active {
	margin: unset;
}

.ui-autocomplete.ui-menu .ui-state-active::before {
	content: "→ ";
}

/* ── Carousel (snippets/carousel.php) ──────────────────────────────────────
   A thin line round the slider, with the previous / next tab hanging from its
   top edge at the right — the same tab as the grid / list switch: outlined in
   the line's colour, its top edge on the line. The two themes only swap
   colours (--carousel-*). */
[data-carousel] {
	--carousel-bg: var(--bg-color);
	--carousel-fg: var(--primary-text-color);
	--carousel-line: color-mix(
		in srgb,
		var(--primary-text-color) 25%,
		transparent
	);
	--carousel-active: var(--primary-color);
	--carousel-active-fg: var(--bg-color);
	position: relative;
	padding: calc(2rem + var(--spacing-x-small)) var(--spacing-x-small)
		var(--spacing-x-small);
	background-color: var(--carousel-bg);
	border: 1px solid var(--carousel-line);
	border-radius: var(--spacing-small);
}

[data-carousel="dark"] {
	--carousel-bg: #252525;
	--carousel-fg: #f4f3f2;
	--carousel-line: rgba(244, 243, 242, 0.25);
	--carousel-active: #f4f3f2;
	--carousel-active-fg: #252525;
}

[data-type~="carousel"] {
	width: 100%;
	overflow: hidden;
}

[data-type~="carousel"] .slick-list {
	border-radius: var(--spacing-x-small);
}

[data-type~="carousel"] [data-type="portfolio-item"] {
	margin: 0;
	padding: var(--spacing-x-small);
	border-radius: var(--spacing-small);
	background-color: var(--carousel-bg);
}

[data-carousel-nav] {
	position: absolute;
	top: -1px;
	right: var(--spacing-normal);
	z-index: 2;
	display: inline-flex;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--carousel-bg);
	border: 1px solid var(--carousel-line);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
}

[data-carousel-nav]:empty {
	display: none;
}

/* The top line, left of the tab: position, and the hovered tile's title and
   where it leads. It sits in the strip the tab needs anyway, centred on the
   tab, and stops short of it — a long title ends in "…". The title is bold,
   the address plain, as in the status bars. */
[data-carousel-info] {
	position: absolute;
	top: 0;
	left: var(--spacing-small);
	right: calc(var(--spacing-normal) + 6rem);
	height: 2rem;
	display: flex;
	align-items: center;
	margin: 0;
	font-size: var(--font-size-small);
	line-height: 1.2;
	color: var(--carousel-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-carousel-count] {
	flex: 0 0 auto;
	font-weight: 600;
}

/* overflow: hidden (for the "…") would cut off the address's underline,
   drawn just under the text: room for it above and below keeps it centred. */
[data-carousel-hover] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-block: 0.25rem;
}

[data-carousel-hover]:not(:empty)::before {
	content: "|";
	margin: 0 var(--spacing-x-small);
	opacity: 0.5;
}

/* Touch screens have no hover: a tap opens the page, so the line keeps to
   the position. */
@media (hover: none) {
	[data-carousel-hover] {
		display: none;
	}
}

[data-slick~="arrow"] {
	font: inherit;
	font-size: var(--font-size-small);
	line-height: 1.2;
	padding: var(--spacing-xx-small) var(--spacing-small);
	border: 0;
	border-radius: var(--spacing-xx-small);
	background: none;
	color: var(--carousel-fg);
	cursor: pointer;
	transition:
		background-color 150ms ease,
		color 150ms ease;
}

[data-slick~="arrow"]:hover,
[data-slick~="arrow"]:focus-visible {
	background-color: var(--carousel-active);
	color: var(--carousel-active-fg);
}

[data-slick~="arrow"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
	[data-slick~="arrow"] {
		transition: none;
	}
}

[data-type="color-container"]:first-of-type h3 {
	margin-top: 0;
}

[data-type="color-container"] > div {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	flex-direction: row;
}

[data-type="color-example"] {
	width: 200px;
	height: 200px;
	border: 2px solid var(--primary-color);
	border-radius: 15px;
}

[data-color="main"] {
	background-color: var(--primary-color);
}

[data-color="bg"] {
	background-color: var(--bg-color);
}

[data-color="shade-1"] {
	background-color: var(--shade-1);
}

[data-color="shade-2"] {
	background-color: var(--shade-2);
}

[data-color="shade-3"] {
	background-color: var(--shade-3);
}

[data-color="shade-4"] {
	background-color: var(--shade-4);
}

[data-color="shade-5"] {
	background-color: var(--shade-5);
}

[data-color="caution-color"] {
	background-color: var(--caution-color);
}

[data-color="focus-color"] {
	background-color: var(--focus-color);
}

[data-color="error-color"] {
	background-color: var(--error-color);
}

[data-color="success-color"] {
	background-color: var(--success-color);
}

[data-color="info-color"] {
	background-color: var(--info-color);
}

[data-type="preview"] {
	position: relative;
	margin-top: 15px;
	padding: 20px;
	border-radius: 15px;
	background-color: var(--shade-2);
}

[data-page="preview"] .ui-selectmenu-menu {
	width: calc(100% - 40px) !important;
}

[data-type="preview"] #sa-pref-bar[data-type*="disabled"] {
	position: relative;
	display: block;
	left: unset;
	bottom: unset;
}

[data-type="breadcrumb"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="breadcrumb"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: 1;
}

[data-type="breadcrumb"] li:before {
	font-family: unset;
	content: unset;
	padding-right: unset;
}

[data-type="error-message"] {
	text-align: center;
}

[data-component="email-gate-container"] {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	align-items: stretch;
}

@container page (max-width: 48rem) {
	[data-component="email-gate-container"] {
		flex-direction: column;
	}
}

[data-component="email-gate"],
[data-type="email-gate-image"] {
	flex: 1 1 0;
	min-width: 0;
}

[data-component="email-gate"] {
	background-color: var(--shade-2);
	border-radius: 0.5rem;
	border: 1px solid var(--shade-3);
}

[data-component="email-gate"] > form,
[data-component="email-gate"] > p,
[data-component="email-gate"] > h2 {
	padding-inline: 1rem;
}

[data-component="email-gate"] > h2 {
	padding-top: 1rem;
}

[data-component="email-gate"] > form {
	padding-bottom: 1rem;
}

[data-type="email-gate-image"] {
	position: relative;
	overflow: hidden;
}

[data-type="email-gate-image"] img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@container page (max-width: 48rem) {
	[data-type="email-gate-image"] {
		flex: 1;
	}

	[data-type="email-gate-image"] img {
		position: static;
		height: auto;
	}
}

altcha-widget {
	width: 100%;
	max-width: fit-content;
}

[data-type="email-gate-consent-group"] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-indent: unset;
}

[data-type="email-gate-consent-group"] .ui-checkboxradio-label {
	text-align: left;
}

/* Listen buttons hidden by main.js on pages without a player: the tab's
   display: inline-flex and the floating column's img rules would otherwise
   override the hidden attribute. */
[data-type="page-tools"] [hidden],
#scrollAccess [hidden] {
	display: none;
}

/* Homepage hero: the line's margin clears the tabs at every width, so the
   hero adds no top padding of its own; phones give it side padding. */
@container page (max-width: 30.72rem) {
	[data-type="hero"] {
		padding: 0 1.25rem;
	}
}

/* ── Site menu (snippets/site-menu.php) ────────────────────────────────────
   The bar: one connected dark strip on the left — the SA logo (home) and the
   menu button — in the page-tools tab's colours and sizes. It appears with
   the right-hand buttons (#scrollAccess) once the header has scrolled away;
   main.js sets data-visible. */
[data-type="side-bar"] {
	position: fixed;
	top: var(--spacing-medium);
	left: 1.5rem;
	z-index: 9997; /* below the dialogs (accessibility 9998) it could otherwise cover */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--primary-color);
	/* The right-hand buttons' frame (#scrollAccess img), so both sides match. */
	border: 0.1rem solid var(--bg-color);
	border-radius: 0.75rem;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 200ms ease,
		visibility 200ms;
}

[data-type="side-bar"][data-visible="true"] {
	opacity: 1;
	visibility: visible;
}

/* Centred: on phones base.css stretches every [data-button] to full width,
   which left the menu icon at the bar's left edge. */
[data-type="side-bar"] [data-button~="icon"],
[data-type="site-menu"] [data-button~="icon"] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform 150ms ease;
}

[data-type="site-menu"] [data-button~="icon"]:hover,
[data-type="site-menu"] [data-button~="icon"]:focus-visible {
	transform: scale(1.1);
}

/* The floating bars' buttons stay still on hover, like the right-hand ones —
   small fixed tools, not content; keyboard focus gets the tab's ring. */
[data-type="side-bar"] [data-button~="icon"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
	border-radius: var(--spacing-xx-small);
}

/* The logo is a dark square with light letters — on the dark strip only the
   letters show. A little larger than the icons, as a logo. */
[data-type="side-bar"] [data-part="home"] img {
	display: block;
	width: calc(var(--page-tools-icon) + var(--spacing-x-small));
	height: auto;
	border-radius: var(--spacing-xx-small);
}

/* Floating bar: the side bar and the right-hand buttons (#scrollAccess) share
   a wrapper and an inner bar box (navbar.php). On wider screens neither is a
   box at all — each keeps its own corner. On phones the two join into one bar
   along the bottom, the height of the back-to-top button and framed like the
   side bar. The wrapper is a full-width row: a spacer, the bar, a spacer. The
   spacers share the room equally, so the bar sits in the screen's middle;
   the right one never gets narrower than back-to-top plus a small gap, so
   where the middle would run into that button the bar keeps the gap instead.
   It shows with the side bar (main.js, data-visible). */
[data-type="float-bar"],
[data-type="float-bar"] > [data-part="bar"] {
	display: contents;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="float-bar"] {
		position: fixed;
		bottom: 1.5rem;
		left: 0;
		right: 0;
		z-index: 9997;
		display: flex;
		height: 2.5rem;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 200ms ease,
			visibility 200ms;
	}

	[data-type="float-bar"]:has([data-visible="true"]) {
		opacity: 1;
		visibility: visible;
	}

	/* The spacers each keep room for a square button and a gap — Home on the
	   left, back-to-top on the right — so the bar sits in the middle between
	   two matching squares. */
	[data-type="float-bar"]::before,
	[data-type="float-bar"]::after {
		content: "";
		flex: 1 1 0;
		min-width: calc(1.5rem + 2.5rem + var(--spacing-x-small));
	}

	/* Home (the SA logo) leaves the bar for a square of its own at the left,
	   the twin of back-to-top at the right: same size, frame and distance
	   from the edges. Placed on the wrapper, which spans the screen. */
	[data-type="float-bar"] #sideBar [data-part="home"] {
		position: absolute;
		top: 0;
		left: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 2.5rem;
		height: 2.5rem;
		background-color: var(--primary-color);
		border: 0.1rem solid var(--bg-color);
		border-radius: 0.75rem;
		pointer-events: auto;
	}

	[data-type="float-bar"] #sideBar [data-part="home"] img {
		width: calc(var(--page-tools-icon) + var(--spacing-xx-small));
	}

	[data-type="float-bar"] > [data-part="bar"] {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--spacing-x-small);
		box-sizing: border-box;
		height: 100%;
		padding: 0 var(--spacing-x-small);
		background-color: var(--primary-color);
		border: 0.1rem solid var(--bg-color);
		border-radius: 0.75rem;
		pointer-events: auto;
	}

	/* Inside it both lose their own box and lie in a row. */
	[data-type="float-bar"] :is(#sideBar, #scrollAccess) {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-x-small);
		width: auto;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		opacity: 1;
		visibility: inherit;
		transition: none;
	}

	[data-type="float-bar"] [data-button~="icon"] {
		width: auto;
	}

	[data-type="float-bar"] #scrollAccess a {
		display: flex;
	}

	[data-type="float-bar"] #scrollAccess img {
		width: var(--page-tools-icon);
		border: 0;
		border-radius: 0;
		background: none;
	}

	/* Listen / play / pause: their images draw a framed dark square of their
	   own; here the plain glyph (the outline icons without the frame), like
	   the other icons in the bar. main.js swaps the file by state. */
	[data-type="float-bar"] #toggle-audio-scroll[src$="listen.svg"] {
		content: url("../img/icons/listen-plain.svg");
	}
	[data-type="float-bar"] #toggle-audio-scroll[src$="play.svg"] {
		content: url("../img/icons/play-plain.svg");
	}
	[data-type="float-bar"] #toggle-audio-scroll[src$="pause.svg"] {
		content: url("../img/icons/pause-plain.svg");
	}

	/* Top keeps the bar's corners beside it. */
	[data-button="back-to-top"] {
		border-radius: 0.75rem;
	}
}

/* Under 352px the two squares, their gaps and the bar do not fit with the
   usual spacing: the bar's own spacing and its gaps to the squares tighten. */
@media only screen and (max-width: 22rem) {
	[data-type="float-bar"] > [data-part="bar"],
	[data-type="float-bar"] :is(#sideBar, #scrollAccess) {
		gap: var(--spacing-xx-small);
	}

	[data-type="float-bar"] > [data-part="bar"] {
		padding: 0 var(--spacing-xx-small);
	}

	[data-type="float-bar"]::before,
	[data-type="float-bar"]::after {
		min-width: calc(1.5rem + 2.5rem + var(--spacing-xx-small));
	}
}

/* Dark themes turn the bars light: the logo (a dark square with light
   letters) is inverted with them, or it shows as a dark block. */
[data-accessibility~="dark"] [data-type="side-bar"] [data-part="home"] img,
[data-accessibility~="high-contrast"]
	[data-type="side-bar"]
	[data-part="home"]
	img {
	filter: invert(1);
}

/* ── Page container ─────────────────────────────────────────────────────────
   The page's layout follows the room it has, not the screen: the root is the
   "page" container, and the page's breakpoints are @container page queries
   (written in rem at the 20px root — 38.4rem is the former 48rem screen
   breakpoint). With a drawer open the root's padding narrows that room, and
   the page lays itself out as it would on a screen that size. Floating and
   fixed parts (bars, back-to-top, tooltips, drawers) stay on @media: they
   belong to the screen. */
html {
	container: page / inline-size;
}

/* ── Drawers: the site menu and the accessibility settings ──────────────────
   Each is a popover (snippets/site-menu.php, snippets/accessibility.php)
   beside the page, which stays itself: while one is open the root takes the
   drawer's size (plus a gap) as padding, so the page lays itself out in the
   room left over, at its real size. The drawer's ::backdrop frames that room
   as a rounded card — outline, and a page-coloured shadow over everything
   outside it. Blurred (the default; the eye button turns it off, main.js
   remembers it) the page is only a picture: it does not scroll, and a layer
   over it (body::after) takes the clicks — one closes the drawer. Sharp, the
   page is usable.
   - Sides: the menu at the left; the settings at the right in the "Side
     menu" location, along the bottom in "Navbar" (the root's
     data-accessibility says which).
   - Motion: the drawer's edge grows from its side as the room opens (800ms
     on a soft spring curve, closing 510ms); its panel slides the last 4rem.
   - Under 768px the drawers fill the screen, at once: no room, no card, no
     blur button. */
html {
	--drawer-open: 800ms
		linear(
			0,
			0.005,
			0.02 2.1%,
			0.081 4.7%,
			0.467 15.7%,
			0.563,
			0.645,
			0.717,
			0.778 28.5%,
			0.829 32%,
			0.872 35.8%,
			0.909 40.1%,
			0.938 44.9%,
			0.961 50.3%,
			0.977 56.5%,
			0.987 63.6%,
			0.994 72.3%,
			1
		);
	--drawer-close: 510ms cubic-bezier(0.17, 0.84, 0.44, 1);
	--drawer-gap: 0.8rem;
	--menu-w: 22.5rem;
	--settings-w: min(34.5rem, 50vw);
	--settings-h: 60dvh;
	transition: padding var(--drawer-close);
}

@media only screen and (max-width: 56.25rem) {
	html {
		--menu-w: 18rem;
	}
}

@media only screen and (max-width: 47.9375rem) {
	html {
		--menu-w: 100vw;
		--settings-w: 100vw;
		--settings-h: 100dvh;
	}
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel) {
	position: fixed;
	max-width: 100vw;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	transition:
		clip-path var(--drawer-close),
		overlay 510ms allow-discrete,
		display 510ms allow-discrete;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open {
	clip-path: inset(0 0 0 0);
	transition:
		clip-path var(--drawer-open),
		overlay 800ms allow-discrete,
		display 800ms allow-discrete;
}

/* Sides: where each sits, and the edge it grows from. */
#siteMenu {
	inset: 0 auto 0 0;
	width: var(--menu-w);
	height: 100dvh;
	--drawer-hidden: inset(0 100% 0 0);
	--drawer-slide: translateX(-4rem);
}

html[data-accessibility~="sidebar"] #accessibilityDialog {
	inset: 0 0 0 auto;
	width: var(--settings-w);
	height: 100dvh;
	--drawer-hidden: inset(0 0 0 100%);
	--drawer-slide: translateX(4rem);
}

html:not([data-accessibility~="sidebar"]) #accessibilityDialog {
	inset: auto 0 0 0;
	width: 100vw;
	height: var(--settings-h);
	--drawer-hidden: inset(100% 0 0 0);
	--drawer-slide: translateY(4rem);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel) {
	clip-path: var(--drawer-hidden);
}

@starting-style {
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open {
		clip-path: var(--drawer-hidden);
	}
}

/* The panel: the drawer's contents, scrolling on their own without a
   visible scrollbar, never sideways. */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="panel"] {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	transform: var(--drawer-slide);
	transition: transform var(--drawer-close);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="panel"]::-webkit-scrollbar {
	display: none;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open
	[data-part="panel"] {
	transform: none;
	transition: transform 940ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

@starting-style {
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open
		[data-part="panel"] {
		transform: var(--drawer-slide);
	}
}

#siteMenu [data-part="panel"] {
	padding: var(--spacing-medium) var(--spacing-large) var(--spacing-x-large)
		var(--spacing-medium);
}

/* The card: each drawer's ::backdrop, at rest the whole screen (its shadow
   off-screen). Browsers keep a popover's backdrop click-through. */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)::backdrop {
	inset: 0;
	pointer-events: none;
	border-radius: 0;
	background: none;
	box-shadow: 0 0 0 100vmax var(--bg-color, #f4f3f2);
	outline: 0.1rem solid transparent;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition:
		inset var(--drawer-close),
		border-radius var(--drawer-close),
		outline-color 350ms ease-out,
		backdrop-filter 350ms ease-out,
		-webkit-backdrop-filter 350ms ease-out,
		overlay 510ms allow-discrete,
		display 510ms allow-discrete;
}

@keyframes drawer-card-in {
	from {
		inset: 0;
		border-radius: 0;
		outline-color: transparent;
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
	}
}

/* From 768px: the page's room, and the card round it. */
@media only screen and (min-width: 48rem) {
	html:has(#siteMenu:popover-open) {
		padding: var(--drawer-gap) var(--drawer-gap) var(--drawer-gap)
			calc(var(--menu-w) + var(--drawer-gap));
		transition: padding var(--drawer-open);
	}

	html[data-accessibility~="sidebar"]:has(#accessibilityDialog:popover-open) {
		padding: var(--drawer-gap) calc(var(--settings-w) + var(--drawer-gap))
			var(--drawer-gap) var(--drawer-gap);
		transition: padding var(--drawer-open);
	}

	html:not([data-accessibility~="sidebar"]):has(
			#accessibilityDialog:popover-open
		) {
		padding: var(--drawer-gap) var(--drawer-gap)
			calc(var(--settings-h) + var(--drawer-gap));
		transition: padding var(--drawer-open);
	}

	#siteMenu:popover-open::backdrop {
		inset: var(--drawer-gap) var(--drawer-gap) var(--drawer-gap)
			calc(var(--menu-w) + var(--drawer-gap));
	}

	html[data-accessibility~="sidebar"]
		#accessibilityDialog:popover-open::backdrop {
		inset: var(--drawer-gap) calc(var(--settings-w) + var(--drawer-gap))
			var(--drawer-gap) var(--drawer-gap);
	}

	html:not([data-accessibility~="sidebar"])
		#accessibilityDialog:popover-open::backdrop {
		inset: var(--drawer-gap) var(--drawer-gap)
			calc(var(--settings-h) + var(--drawer-gap));
	}

	:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		):popover-open::backdrop {
		border-radius: 0.8rem;
		outline-color: var(--primary-color);
		transition:
			inset var(--drawer-open),
			border-radius var(--drawer-open),
			outline-color 350ms ease-out,
			backdrop-filter 350ms ease-out,
			-webkit-backdrop-filter 350ms ease-out,
			overlay 800ms allow-discrete,
			display 800ms allow-discrete;
	}

	/* Opening, the card shrinks from the whole screen to its place on the
	   drawer's curve — a keyframe animation: a transition from
	   @starting-style does not run on a popover's backdrop (it snapped to
	   its place while the drawer was still opening). */
	:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		):popover-open::backdrop {
		animation: drawer-card-in var(--drawer-open, 800ms ease-out);
	}

	/* Blurred: a picture only — no scrolling, clicks caught (main.js). */
	:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		):popover-open:not([data-blur="off"])::backdrop {
		-webkit-backdrop-filter: blur(0.3rem);
		backdrop-filter: blur(0.3rem);
	}

	html:has(
		:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open:not([data-blur="off"])
	) {
		overflow: hidden;
		scrollbar-gutter: stable;
	}

	html:has(
			:is(
					#siteMenu,
					#accessibilityDialog,
					#sabPanel,
					#findPanel
				):popover-open:not([data-blur="off"])
		)
		body::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 10001;
	}
}

@media (prefers-reduced-motion: reduce),
	only screen and (max-width: 47.9375rem) {
	html,
	html:has(
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open
	),
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel),
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)::backdrop,
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="panel"] {
		transition: none !important;
	}

	:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		):popover-open::backdrop {
		animation: none !important;
	}
}

/* ── Drawer buttons (snippets/site-menu.php, accessibility.php) ────────────
   A drawer's own buttons stand one above the other at its top right, where
   the page's right-hand buttons stand (#scrollAccess: 1.5rem from the edge,
   0.4rem apart): close on top, drawn as the opener shows it while open —
   page colour, orange edge, the dark ✕ — then blur on / off, dark like the
   right-hand buttons: an eye, struck through while the page is blurred.
   They are the page tools' icon size (1.75rem; 2.25rem with "Larger
   buttons", 1.5rem on narrow screens). No hover popups: aria-labels only. */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-head"]
	> a {
	display: block;
	margin-block-start: calc(1em + 0.1rem);
	/* Clear of the buttons (1.5rem from the edge, a gap beyond them), less
	   the panel's own padding: in a narrow drawer the logo shrinks rather
	   than slide under them. */
	padding-right: calc(
		var(--page-tools-icon) + 1.5rem + var(--spacing-small) -
			var(--spacing-medium)
	);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-head"]
	[data-logo~="sa"] {
	display: block;
	width: 100%;
	max-width: 14.2rem;
	height: auto;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-tools"] {
	position: absolute;
	top: var(--spacing-medium);
	right: 1.5rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-tools"]
	[data-button~="icon"] {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--page-tools-icon);
	height: var(--page-tools-icon);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	filter: none;
	cursor: pointer;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-tools"]
	[data-button~="icon"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-tools"]
	[data-icon] {
	display: block;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* Close: the opener's open look (see "the button that opened it"). */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-tools"]
	[data-part="close"] {
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="close"]
	[data-icon] {
	--icon: url("../img/icons/menu-close.svg");
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	-webkit-mask-size: calc(var(--page-tools-icon) - 0.7rem);
	mask-size: calc(var(--page-tools-icon) - 0.7rem);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="drawer-tools"]
	[data-part="blur"] {
	background-color: var(--primary-color);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="blur"]
	[data-icon] {
	--icon: url("../img/icons/eye.svg");
	width: 65%;
	height: 65%;
	background-color: var(--bg-color);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="blur"][aria-pressed="true"]
	[data-icon] {
	--icon: url("../img/icons/eye-off.svg");
}

/* Below 768px the drawer fills the screen and scrolls as a whole: no blur
   (no page beside it), and the close button stays put at the top right
   while the drawer scrolls under it. */
@media only screen and (max-width: 47.9375rem) {
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="drawer-tools"]
		[data-part="blur"] {
		display: none;
	}

	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="drawer-tools"] {
		position: fixed;
	}
}

/* The card's edges while a drawer is open (from 768px), for the page's fixed
   parts: back-to-top and the right-hand buttons keep to the card's right
   (and bottom) edge instead of slipping under a drawer at the right or the
   bottom, and the floating status bar sits in the card's bottom-left
   corner, rounded like it. */
@media only screen and (min-width: 48rem) {
	html:has(#siteMenu:popover-open) {
		--card-l: calc(var(--menu-w) + var(--drawer-gap));
		--card-r: var(--drawer-gap);
		--card-b: var(--drawer-gap);
	}

	html[data-accessibility~="sidebar"]:has(#accessibilityDialog:popover-open) {
		--card-l: var(--drawer-gap);
		--card-r: calc(var(--settings-w) + var(--drawer-gap));
		--card-b: var(--drawer-gap);
	}

	html:not([data-accessibility~="sidebar"]):has(
			#accessibilityDialog:popover-open
		) {
		--card-l: var(--drawer-gap);
		--card-r: var(--drawer-gap);
		--card-b: calc(var(--settings-h) + var(--drawer-gap));
	}

	html:has(
			:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open
		)
		[data-button="back-to-top"] {
		right: calc(var(--card-r) + 1.5rem);
		bottom: calc(var(--card-b) + 1.5rem);
	}

	html:has(
			:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open
		)
		#scrollAccess {
		right: calc(var(--card-r) + 1.5rem);
	}

	html:has(
			:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open
		)
		:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
		left: var(--card-l);
		bottom: var(--card-b);
		border-bottom-left-radius: 0.8rem;
	}
}

/* …and they glide there (and back) on the drawer's own curves, instead of
   jumping to the card's edge while the drawer is still opening. */
html :is([data-button="back-to-top"][data-active], #scrollAccess) {
	transition:
		right var(--drawer-close),
		bottom var(--drawer-close),
		opacity 0.3s ease;
}

html:has(
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open
	)
	:is([data-button="back-to-top"][data-active], #scrollAccess) {
	transition:
		right var(--drawer-open),
		bottom var(--drawer-open),
		opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce),
	only screen and (max-width: 47.9375rem) {
	html :is([data-button="back-to-top"][data-active], #scrollAccess) {
		transition: opacity 0.3s ease !important;
	}
}

/* While a drawer is open, the button that opened it shows the drawer's close
   button — page colour, orange edge, the dark ✕ — and closes it. The tab's
   and side bar's buttons draw it with their mask (the ✕ a little inside the
   square); the image buttons (the floating accessibility icon, the footer's)
   swap their image. main.js keeps aria-expanded on all of them. */
:is([data-type="page-tools"], [data-type="side-bar"])
	[data-button~="icon"][aria-expanded="true"] {
	border-radius: 0.4rem;
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
}

:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/menu-close.svg");
	background-color: var(--primary-color);
	/* The button less a whole 0.7rem (7px a side): a percentage left the ✕ on
	   half pixels, rounded to one side — a hair off the middle. */
	-webkit-mask-size: calc(var(--page-tools-icon) - 0.7rem);
	mask-size: calc(var(--page-tools-icon) - 0.7rem);
}

/* …not a second ✕ beside the drawer's own: an arrow to where the drawer
   is — the menu at the left, SAB and search at the right, the settings at
   the right (Location: side menu) or along the bottom. */
:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-controls="siteMenu"][aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-left.svg");
}

:is([data-type="page-tools"], [data-type="side-bar"])
	:is([data-part="sab-open"], [data-part="find-open"])[aria-expanded="true"]
	[data-icon],
html[data-accessibility~="sidebar"]
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-right.svg");
}

html:not([data-accessibility~="sidebar"])
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-down.svg");
}

/* The right-hand column's images, likewise. */
html[data-accessibility~="sidebar"]
	:is(
		#toggle-accessibility-scroll[aria-expanded="true"],
		#accessibilityButtonFooter[aria-expanded="true"] img
	),
#toggle-sab-scroll[aria-expanded="true"],
[data-part="find-open"][aria-expanded="true"] #toggle-search-scroll {
	content: url("../img/icons/panel-right.svg") !important;
}

html:not([data-accessibility~="sidebar"])
	:is(
		#toggle-accessibility-scroll[aria-expanded="true"],
		#accessibilityButtonFooter[aria-expanded="true"] img
	) {
	content: url("../img/icons/panel-down.svg") !important;
}

:is(
	#toggle-accessibility-scroll,
	#accessibilityButtonFooter
)[aria-expanded="true"] {
	border-radius: 0.75rem;
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
}

#toggle-accessibility-scroll[aria-expanded="true"],
#accessibilityButtonFooter[aria-expanded="true"] img {
	content: url("../img/icons/menu-close.svg");
	box-sizing: border-box;
	padding: 0.5rem;
	background-color: var(--bg-color);
	border-color: var(--focus-color);
}

[data-type="site-menu"] [data-logo~="sa"] {
	max-width: unset;
}

/* The line under the logo draws itself from the left as the drawer opens. */
[data-type="site-menu"] hr {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms ease;
}

[data-type="site-menu"]:popover-open hr {
	transform: none;
	transition: transform 480ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

@starting-style {
	[data-type="site-menu"]:popover-open hr {
		transform: scaleX(0);
	}
}

[data-type="site-menu"] [data-part="group"] {
	margin-bottom: var(--spacing-normal);
}

[data-type="site-menu"] :is(h2, [data-part="title"]) {
	color: inherit;
}

[data-type="site-menu"] h2 {
	margin: 0 0 var(--spacing-xx-small);
	font-size: var(--font-size-small);
	opacity: 0.6;
}

[data-type="site-menu"] ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

[data-type="site-menu"] li {
	padding: 0;
	text-indent: 0;
}

[data-type="site-menu"] li::before {
	content: none;
}

/* Links: hover or keyboard focus draws a short line at the left, slides the
   name over and turns it the accent colour; the current page keeps the line
   and the slide. The focus ring sits on the moving name. */
[data-type="site-menu"] li a {
	position: relative;
	display: inline-block;
	padding: var(--spacing-xx-small) 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms ease;
}

[data-type="site-menu"] li a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.45em;
	height: 0.1rem;
	background-color: currentColor;
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

[data-type="site-menu"] li a span {
	display: block;
	border-radius: 0.1rem;
	transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

[data-type="site-menu"] li a:hover,
[data-type="site-menu"] li a:focus-visible {
	color: var(--focus-color);
	outline: none;
}

[data-type="site-menu"]
	li
	a:is(:hover, :focus-visible, [aria-current="page"])::before {
	transform: translateY(-50%) scaleX(1);
}

[data-type="site-menu"]
	li
	a:is(:hover, :focus-visible, [aria-current="page"])
	span {
	transform: translateX(0.7em);
}

[data-type="site-menu"] li a:focus-visible span {
	outline: 0.05rem solid currentColor;
	outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
	[data-type="site-menu"] :is(hr, li a, li a::before, li a span) {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-type="side-bar"],
	[data-type="side-bar"] [data-button~="icon"],
	[data-type="site-menu"] [data-button~="icon"] {
		transition: none;
	}
}

/* Blurred mode (a dialog is open): base.css gives every <nav> a full-screen
   blur layer. The page-tools tab and the site menu's bar are <nav>s too, and
   theirs would sit above the dialog once the bar shows on scroll — blurring
   the dialog itself. They take no layer of their own; they are blurred
   themselves instead, like the rest of the page. So are the back-to-top
   button and the right-hand buttons, which sit above the page's blur layer —
   the right-hand ones each on their own, since dark mode already puts an
   invert filter on their column. */
body[data-mode="blurred"]
	:is([data-type="page-tools"], [data-type="side-bar"])::before {
	content: none;
}

body[data-mode="blurred"]
	:is(
		[data-type="page-tools"],
		[data-type="side-bar"],
		[data-button="back-to-top"],
		#scrollAccess > *,
		[data-type="float-bar"]
	) {
	filter: blur(var(--spacing-x-small));
}

/* Close buttons keep their square on phones: base.css makes every
   [data-button] full width below 40rem, which stretched the accessibility
   window's close button (and the site menu's) across the screen. */
@media only screen and (max-width: 40rem) {
	[data-button~="close"] {
		width: 2.5rem;
	}
}

/* ── Audio island (main.js) ────────────────────────────────────────────────
   While a page's audio plays: a black pill that keeps the controls in reach
   however far down the page is — play / pause (page colour, the text's
   player inverted), the title over a line to drag and the time, back /
   forward 10 s, speed, back to the text's player, close. Everything shows
   at once, so the pill keeps its size and nothing moves under the pointer.
   Desktop: floating at the top centre (of the card, with a drawer open).
   Tablets and phones: hanging from the top edge, the page moved down by its
   height while it shows. */
[data-type="audio-island"] {
	--island-btn: 2rem;
	position: fixed;
	top: 1.5rem;
	left: calc(
		var(--card-l, 0rem) +
			(100vw - var(--card-l, 0rem) - var(--card-r, 0rem)) / 2
	);
	/* Above the header (z 9999), whose empty full-width parts at the top of
	   the page would otherwise take its clicks. */
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: var(--spacing-x-small);
	/* Its own width: placed from the middle, a fixed box's room would be only
	   the right half of the screen, and its buttons were squeezed. */
	width: max-content;
	max-width: calc(100vw - 3rem);
	box-sizing: border-box;
	padding: 0.35rem 0.5rem;
	/* The side bar's and back-to-top's frame: a light edge that keeps the
	   pill apart from dark content scrolling under it. */
	border: 0.1rem solid var(--bg-color);
	border-radius: 2rem;
	background-color: var(--primary-color);
	color: var(--bg-color);
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.2);
	transform: translateX(-50%);
	transition: opacity 250ms ease;
}

[data-type="audio-island"][hidden] {
	display: none;
}

@starting-style {
	[data-type="audio-island"] {
		opacity: 0;
	}
}

/* With a drawer open the island steps aside — blurred, the page is a
   picture it would sit under; sharp, the page has the card's narrower room
   and the side buttons move in with it — and is back when the drawer
   closes. The audio plays on. */
html:has(
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel):popover-open
	)
	[data-type="audio-island"] {
	display: none;
}

[data-accessibility~="button"] [data-type="audio-island"] {
	--island-btn: 2.75rem;
}

[data-type="audio-island"] button {
	display: inline-grid;
	place-items: center;
	flex: none;
	min-width: var(--island-btn);
	height: var(--island-btn);
	margin: 0;
	padding: 0 0.45rem;
	border: 0;
	border-radius: 2rem;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--font-size-small);
	font-weight: 700;
	cursor: pointer;
}

[data-type="audio-island"] button:hover {
	background-color: rgba(244, 243, 242, 0.16);
}

/* Skip, speed and to the player: a faint fill, enough to read as buttons,
   brighter when pointed at. Close stays a bare icon, a little apart (button
   […]: the button rule above sets every margin to 0). */
[data-type="audio-island"] [data-part="extra"] button {
	border-radius: 0.5rem;
	background-color: rgba(244, 243, 242, 0.08);
}

[data-type="audio-island"] [data-part="extra"] button:hover {
	background-color: rgba(244, 243, 242, 0.2);
}

[data-type="audio-island"] button[data-part="close"] {
	width: var(--island-btn);
	margin-left: 0.25rem;
	padding: 0;
}

[data-type="audio-island"] button:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

[data-type="audio-island"] [data-icon] {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

[data-type="audio-island"] [data-icon="play"] {
	--icon: url("../img/icons/play-plain.svg");
}
[data-type="audio-island"] [data-icon="pause"] {
	--icon: url("../img/icons/pause-plain.svg");
}
[data-type="audio-island"] [data-icon="close"] {
	--icon: url("../img/icons/menu-close.svg");
	width: 0.75rem;
	height: 0.75rem;
}

/* Play / pause: the page colour, the icon dark — the text's player inverted. */
[data-type="audio-island"] [data-part="toggle"] {
	width: var(--island-btn);
	padding: 0;
	background-color: var(--bg-color);
	color: var(--primary-color);
}

[data-type="audio-island"] [data-part="toggle"] [data-icon] {
	width: 1.4rem;
	height: 1.4rem;
}

[data-type="audio-island"] [data-part="toggle"]:hover {
	background-color: var(--bg-color);
	box-shadow: 0 0 0 0.15rem rgba(244, 243, 242, 0.35);
}

[data-type="audio-island"] [data-part="main"] {
	display: grid;
	min-width: 0;
	gap: 0.1rem;
}

[data-type="audio-island"] [data-part="title"] {
	display: block;
	max-width: 14rem;
	overflow: hidden;
	font-size: var(--font-size-small);
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[data-type="audio-island"] [data-part="line"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-x-small);
}

/* The line: played part in the page colour, the rest faint, a round knob. */
[data-type="audio-island"] [data-part="seek"] {
	--seek: 0%;
	box-sizing: content-box;
	width: 9rem;
	height: 0.25rem;
	margin: 0;
	/* Not the site's text-field look (input: padding, border, light fill). */
	padding: 0;
	border: 0;
	border-radius: 1rem;
	box-shadow: none;
	background: linear-gradient(
		to right,
		var(--bg-color) var(--seek),
		rgba(244, 243, 242, 0.3) var(--seek)
	);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

[data-type="audio-island"] [data-part="seek"]:is(:focus, :active) {
	border: 0;
}

[data-type="audio-island"] [data-part="seek"]::-webkit-slider-thumb {
	width: 0.8rem;
	height: 0.8rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--bg-color);
	-webkit-appearance: none;
	appearance: none;
}

[data-type="audio-island"] [data-part="seek"]::-moz-range-thumb {
	width: 0.8rem;
	height: 0.8rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--bg-color);
}

[data-type="audio-island"] [data-part="seek"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.3rem;
}

[data-type="audio-island"] [data-part="time"] {
	flex: none;
	font-size: var(--font-size-small);
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
	white-space: nowrap;
}

/* Skip and speed, set off from the line by a thin divider. */
[data-type="audio-island"] [data-part="extra"] {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding-left: var(--spacing-x-small);
	border-left: 0.05rem solid rgba(244, 243, 242, 0.25);
}

[data-type="audio-island"] [data-part="status"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	[data-type="audio-island"] {
		transition: none;
	}
}

/* Tablets and phones: hanging from the top edge, rounded below only, in two
   rows — play, the title and line, close; then skip and speed — so it is
   narrow enough to keep clear of the side bar and the right-hand buttons
   (1.5rem from each edge, 2.5rem wide, a gap: 4.5rem a side). The page
   moves down by its height so nothing sits under it. */
@media only screen and (max-width: 64rem) {
	html:has([data-type="audio-island"]:not([hidden])) body {
		padding-top: 6rem;
	}

	[data-type="audio-island"] {
		top: 0;
		flex-wrap: wrap;
		justify-content: space-between;
		width: min(20rem, calc(100vw - 9rem));
		max-width: none;
		border-top: 0;
		border-radius: 0 0 1.25rem 1.25rem;
		box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.18);
	}

	[data-type="audio-island"] [data-part="main"] {
		flex: 1 1 0;
	}

	[data-type="audio-island"] [data-part="title"] {
		max-width: none;
	}

	[data-type="audio-island"] [data-part="seek"] {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	[data-type="audio-island"] [data-part="extra"] {
		order: 1;
		flex-basis: 100%;
		justify-content: space-around;
		padding-left: 0;
		border-left: 0;
	}
}

/* Phones: no side columns at the top (they joined the bottom bar), so the
   island takes the width — less 1.5rem a side, lined up with the bottom
   bar's outer buttons (Home, back-to-top). */
@media only screen and (max-width: 38.4rem) {
	[data-type="audio-island"] {
		width: calc(100vw - 3rem);
	}
}

/* ── SAB, the chatbot (snippets/sab.php, main.js "SAB") ───────────────────────
   On every page a third drawer, at the right: like the accessibility
   settings in "Side menu", the page lays itself out in the room left over
   (always sharp: you read the page while you chat). On /chatbot the same
   chat sits in the page. Inside: a head (who, New chat, close), the
   conversation in bubbles — yours at the right in the page's dark, SAB's at
   the left on a light card — a few questions to start with, and the input
   with its send button. */
html {
	--sab-w: min(26rem, 42vw);
}

@media only screen and (max-width: 47.9375rem) {
	html {
		--sab-w: 100vw;
	}
}

#sabPanel {
	inset: 0 0 0 auto;
	width: var(--sab-w);
	height: 100dvh;
	--drawer-hidden: inset(0 0 0 100%);
	--drawer-slide: translateX(4rem);
}

@media only screen and (min-width: 48rem) {
	html:has(#sabPanel:popover-open) {
		padding: var(--drawer-gap) calc(var(--sab-w) + var(--drawer-gap))
			var(--drawer-gap) var(--drawer-gap);
		transition: padding var(--drawer-open);
		--card-l: var(--drawer-gap);
		--card-r: calc(var(--sab-w) + var(--drawer-gap));
		--card-b: var(--drawer-gap);
	}

	#sabPanel:popover-open::backdrop {
		inset: var(--drawer-gap) calc(var(--sab-w) + var(--drawer-gap))
			var(--drawer-gap) var(--drawer-gap);
	}
}

/* Open again on the next page: there at once, no slide-in. */
html:has(#sabPanel[data-instant]),
#sabPanel[data-instant],
#sabPanel[data-instant]::backdrop,
#sabPanel[data-instant] [data-part="panel"] {
	transition: none !important;
	animation: none !important;
}

/* The drawer's panel does not scroll as a whole: the conversation does. */
#sabPanel [data-part="panel"] {
	overflow: hidden;
}

/* The chat: head, conversation (it takes the room), starters, input, note. */
[data-part="sab"] {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	min-height: 0;
	padding: var(--spacing-medium);
	gap: var(--spacing-small);
	color: var(--primary-text-color);
}

/* On /chatbot: a box of its own in the page. */
[data-part="sab"][data-mode="page"] {
	height: min(42rem, 75vh);
	margin-top: var(--spacing-medium);
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.8rem;
	background-color: var(--bg-color);
}

/* Who at the left; New chat and close at the right, all on the row's
   vertical middle. */
[data-part="sab-head"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	padding-bottom: var(--spacing-small);
	border-bottom: 0.1rem solid var(--primary-color);
}

/* The chat icon, as on the openers. */
[data-part="sab-avatar"] {
	display: block;
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.6rem;
}

[data-part="sab-who"] {
	display: grid;
	min-width: 0;
	line-height: 1.2;
}

[data-part="sab-who"] {
	margin-right: auto;
}

[data-part="sab-who"] h2 {
	margin: 0;
	font-size: var(--font-size-medium, 1.25rem);
}

[data-part="sab-who"] span {
	font-size: var(--font-size-small);
	opacity: 0.7;
}

/* Narrow: the head keeps to one row — the name only. */
@container page (max-width: 30.72rem) {
	[data-part="sab-who"] span {
		display: none;
	}
}

@media only screen and (max-width: 30rem) {
	#sabPanel [data-part="sab-who"] span {
		display: none;
	}

	#sabPanel [data-part="sab"] {
		padding: var(--spacing-small);
	}
}

[data-part="sab-new"] {
	flex: none;
	align-self: center;
	padding: 0.35rem 0.8rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.4rem;
	background: none;
	color: var(--primary-color);
	font: inherit;
	font-size: var(--font-size-small);
	cursor: pointer;
}

[data-part="sab-new"]:hover {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-part="sab-new"][hidden] {
	display: none;
}

/* Close: the drawers' close look — page colour, orange edge, the ✕. */
[data-part="sab-head"] [data-part="close"] {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--page-tools-icon, 1.75rem);
	height: var(--page-tools-icon, 1.75rem);
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
	cursor: pointer;
}

[data-part="sab-head"] [data-part="close"] [data-icon] {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	-webkit-mask: url("../img/icons/menu-close.svg") center /
		calc(var(--page-tools-icon, 1.75rem) - 0.7rem) no-repeat;
	mask: url("../img/icons/menu-close.svg") center /
		calc(var(--page-tools-icon, 1.75rem) - 0.7rem) no-repeat;
}

/* The conversation: the room's scrolling part. */
[data-part="sab-log"] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-x-small);
	padding-right: 0.2rem;
}

[data-part="sab"]:not([data-started]) [data-part="sab-log"] {
	flex: 0 0 auto;
}

/* Bubbles: no "YOU: / SAB:" labels (interaction.css, the old transcript). */
[data-part="sab"] [data-entity] {
	display: flex;
	flex-direction: row;
	gap: 0;
	max-width: 88%;
}

[data-part="sab"] [data-entity]::before {
	content: none;
}

[data-part="sab"] [data-entity] [data-type="message-container"] {
	padding: 0.55rem 0.85rem;
	border-radius: 0.6rem;
	overflow-wrap: anywhere;
}

[data-part="sab"] [data-entity] p {
	margin: 0;
}

[data-part="sab"] [data-entity="user"] {
	align-self: flex-end;
}

[data-part="sab"] [data-entity="user"] [data-type="message-container"] {
	border-bottom-right-radius: 0.15rem;
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-part="sab"] [data-entity="bot"] {
	align-self: flex-start;
}

[data-part="sab"] [data-entity="bot"] [data-type="message-container"] {
	border-bottom-left-radius: 0.15rem;
	background-color: var(--shade-1);
	color: var(--primary-text-color);
}

/* SAB writing: three dots rising in turn, like a chat app (still, with
   reduced motion); the words are for screen readers only. */
[data-part="sab"] [data-entity="bot"][data-state="typing"] p {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	height: 1.2em;
	margin: 0;
}

[data-part="sab-dot"] {
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.45;
	animation: sab-dot 1.2s ease-in-out infinite;
}

[data-part="sab-dot"]:nth-child(3) {
	animation-delay: 0.15s;
}

[data-part="sab-dot"]:nth-child(4) {
	animation-delay: 0.3s;
}

@keyframes sab-dot {
	0%,
	60%,
	100% {
		transform: translateY(0);
		opacity: 0.45;
	}
	30% {
		transform: translateY(-0.25rem);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-part="sab-dot"] {
		animation: none;
	}
}

[data-part="sab-sr"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Pages of the site in an answer: small cards — the title is the link. */
[data-part="sab"] [data-chatbot="search"] {
	display: grid;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-x-small);
}

[data-part="sab"] [data-chatbot="search"] > p {
	margin: 0;
	font-size: var(--font-size-small);
	opacity: 0.75;
}

[data-part="sab"] [data-chatbot="result"] {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--spacing-x-small);
	margin: 0;
	padding: 0.55rem;
	border: 0.1rem solid var(--info-color);
	border-radius: 0.6rem;
	background-color: var(--bg-color);
}

[data-part="sab"]
	[data-chatbot="result"]:not(:has([data-chatbot="resultIMG"])) {
	grid-template-columns: 1fr;
}

[data-part="sab"] [data-chatbot="resultIMG"],
[data-part="sab"] [data-chatbot="resultIMG"] a {
	display: block;
	width: 2.5rem;
	max-width: none;
	margin: 0;
}

[data-part="sab"] [data-chatbot="resultIMG"] img {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 0.4rem;
}

[data-part="sab"] [data-chatbot="matches"] {
	min-width: 0;
}

[data-part="sab"] [data-chatbot="result"] h2 {
	margin: 0;
	font-size: var(--font-size-normal, 1rem);
	line-height: 1.3;
}

[data-part="sab"] [data-chatbot="result"] p {
	margin: 0.15rem 0 0;
	font-size: var(--font-size-small);
}

[data-part="sab"] [data-chatbot="result"] ul {
	margin: 0.3rem 0 0;
	padding-left: 1rem;
	font-size: var(--font-size-small);
}

[data-part="sab"] [data-chatbot="result"] li {
	margin: 0;
	padding: 0;
	text-indent: 0;
	font-size: var(--font-size-small);
	line-height: 1.4;
}

[data-part="sab"] [data-chatbot="result"] li::before {
	content: none;
}

[data-part="sab"] mark[data-type="searchHighlight"] {
	padding: 0 0.1rem;
	background-color: var(--focus-color);
	color: var(--primary-color);
}

/* Questions to ask: to start with, and after the newest answer. */
[data-part="sab-start"] p {
	margin: 0 0 var(--spacing-x-small);
}

[data-part="sab-start"][hidden] {
	display: none;
}

[data-part="sab"] [data-chatbot="suggest"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-x-small);
}

[data-part="sab"] [data-chatbot="chip"] {
	padding: 0.4rem 0.8rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.4rem;
	background-color: var(--bg-color);
	color: var(--primary-color);
	font: inherit;
	font-size: var(--font-size-small);
	text-align: left;
	cursor: pointer;
}

[data-part="sab"] [data-chatbot="chip"]:hover {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-part="sab"]
	:is(
		[data-chatbot="chip"],
		[data-part="sab-new"],
		[data-part="sab-send"]
	):focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.15rem;
}

/* The input: it grows with what is typed (to five lines), the send button
   round at its end, dimmed while there is nothing to send. */
[data-part="sab-input"] {
	display: flex;
	align-items: flex-end;
	gap: var(--spacing-x-small);
	padding: 0.3rem 0.3rem 0.3rem 0.85rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.5rem;
	background-color: var(--shade-1);
}

[data-part="sab-input"]:focus-within {
	box-shadow: 0 0 0 0.1rem var(--focus-color);
}

[data-part="sab-label"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

[data-part="sab-text"] {
	flex: 1 1 auto;
	min-width: 0;
	max-height: 8rem;
	margin: 0;
	padding: 0.45rem 0;
	border: 0;
	background: none;
	color: var(--primary-text-color);
	font: inherit;
	line-height: 1.4;
	resize: none;
	field-sizing: content;
	outline: none;
	box-shadow: none;
}

[data-part="sab-text"]::placeholder {
	color: var(--primary-text-color);
	opacity: 0.55;
}

[data-part="sab-send"] {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	background-color: var(--primary-color);
	color: var(--bg-color);
	cursor: pointer;
}

[data-part="sab-send"]:disabled {
	opacity: 0.35;
	cursor: default;
}

[data-part="sab-send"] [data-icon] {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: url("../img/icons/send.svg") center / contain no-repeat;
	mask: url("../img/icons/send.svg") center / contain no-repeat;
}

[data-part="sab-note"] {
	margin: 0;
	font-size: var(--font-size-small);
	opacity: 0.7;
}

/* The openers: the tab's outline SAB (the robot); the column's image shows the
   close look while the chat is open, like the accessibility one. */
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"])
	[data-icon="chat"] {
	--icon: url("../img/icons/sab-secondary.svg");
}

#toggle-sab-scroll {
	cursor: pointer;
}

#toggle-sab-scroll[aria-expanded="true"] {
	content: url("../img/icons/menu-close.svg");
	box-sizing: border-box;
	padding: 0.5rem;
	border-radius: 0.75rem;
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
}

/* ── Find: search in a drawer (snippets/find.php, main.js "Find") ────────────
   A drawer at the right like SAB, always sharp: a head (Search, close), the
   box with its search button, suggestions as you type, and — while nothing
   is typed — recent searches and a few to try. /search shows the same
   recent / try suggestions under its own box. */
html {
	--find-w: min(26rem, 42vw);
}

@media only screen and (max-width: 47.9375rem) {
	html {
		--find-w: 100vw;
	}
}

#findPanel {
	inset: 0 0 0 auto;
	width: var(--find-w);
	height: 100dvh;
	--drawer-hidden: inset(0 0 0 100%);
	--drawer-slide: translateX(4rem);
}

@media only screen and (min-width: 48rem) {
	html:has(#findPanel:popover-open) {
		padding: var(--drawer-gap) calc(var(--find-w) + var(--drawer-gap))
			var(--drawer-gap) var(--drawer-gap);
		transition: padding var(--drawer-open);
		--card-l: var(--drawer-gap);
		--card-r: calc(var(--find-w) + var(--drawer-gap));
		--card-b: var(--drawer-gap);
	}

	#findPanel:popover-open::backdrop {
		inset: var(--drawer-gap) calc(var(--find-w) + var(--drawer-gap))
			var(--drawer-gap) var(--drawer-gap);
	}
}

[data-part="find"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-small);
	box-sizing: border-box;
	padding: var(--spacing-medium);
	color: var(--primary-text-color);
}

[data-part="find-head"] {
	display: flex;
	align-items: center;
	gap: var(--spacing-small);
	padding-bottom: var(--spacing-small);
	border-bottom: 0.1rem solid var(--primary-color);
}

[data-part="find-head"] h2 {
	margin: 0 auto 0 0;
	font-size: var(--font-size-medium, 1.25rem);
}

/* Close: the drawers' close look — page colour, orange edge, the ✕. */
[data-part="find-head"] [data-part="close"] {
	display: grid;
	place-items: center;
	flex: none;
	width: var(--page-tools-icon, 1.75rem);
	height: var(--page-tools-icon, 1.75rem);
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
	cursor: pointer;
}

[data-part="find-head"] [data-part="close"] [data-icon] {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	-webkit-mask: url("../img/icons/menu-close.svg") center /
		calc(var(--page-tools-icon, 1.75rem) - 0.7rem) no-repeat;
	mask: url("../img/icons/menu-close.svg") center /
		calc(var(--page-tools-icon, 1.75rem) - 0.7rem) no-repeat;
}

/* The box: a row, not the site's stacked form; its own field look. */
form[data-part="find-form"] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-x-small);
	margin: 0;
	padding: 0.3rem 0.3rem 0.3rem 0.85rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.5rem;
	background-color: var(--shade-1);
}

form[data-part="find-form"]:focus-within {
	box-shadow: 0 0 0 0.1rem var(--focus-color);
}

[data-part="find-label"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

form[data-part="find-form"] input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0.45rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--primary-text-color);
	font: inherit;
	outline: none;
	box-shadow: none;
}

form[data-part="find-form"] input:is(:focus, :active) {
	border: 0;
}

/* The browser's own clear ✕ (blue, off-palette): Esc clears it too. */
form[data-part="find-form"] input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

form[data-part="find-form"] input::placeholder {
	color: var(--primary-text-color);
	opacity: 0.55;
}

form[data-part="find-form"] [data-part="find-go"] {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0.4rem;
	background-color: var(--primary-color);
	color: var(--bg-color);
	cursor: pointer;
}

form[data-part="find-form"] [data-part="find-go"]:hover {
	transform: none !important;
}

[data-part="find-go"] [data-icon] {
	display: block;
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	-webkit-mask: url("../img/icons/find.svg") center / contain no-repeat;
	mask: url("../img/icons/find.svg") center / contain no-repeat;
}

/* Suggestions as you type: one per row, the typed part bold, the one the
   arrow keys are on marked. */
[data-part="find-suggestions"] {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.5rem;
	overflow: hidden;
}

[data-part="find-suggestions"][hidden] {
	display: none;
}

[data-part="find-suggestions"] li {
	margin: 0;
	padding: 0.55rem 0.85rem;
	text-indent: 0;
	cursor: pointer;
}

[data-part="find-suggestions"] li::before {
	content: none;
}

[data-part="find-suggestions"] li + li {
	border-top: 0.05rem solid var(--shade-2);
}

[data-part="find-suggestions"] li[role="option"] {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

[data-part="find-suggestions"] li:is(:hover, [aria-selected="true"]) {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

/* Group names: Pages, On the site, Search — small, not choosable. */
[data-part="find-suggestions"] [data-part="find-group"] {
	padding: 0.5rem 0.85rem 0.25rem;
	font-size: var(--font-size-small);
	font-weight: 700;
	opacity: 0.7;
	cursor: default;
}

[data-part="find-suggestions"] [data-part="find-group"]:hover {
	background: none;
	color: inherit;
}

[data-part="find-suggestions"] li + [data-part="find-group"] {
	margin-top: 0.25rem;
	border-top: 0.1rem solid var(--shade-2);
}

[data-part="find-suggestions"] [data-part="find-group"] + li {
	border-top: 0;
}

[data-part="find-text"] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

[data-part="find-name"],
[data-part="find-meta"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* What it is, under the name: the page's group, or Movie / Game / … · review. */
[data-part="find-meta"] {
	font-size: var(--font-size-small);
	opacity: 0.7;
}

/* An item's poster / cover, small. */
[data-part="find-thumb"] {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 0.25rem;
	object-fit: cover;
	background-color: var(--shade-2);
}

/* Pages and items go straight there: an arrow says so. */
[data-part="find-suggestions"] li[data-url]::after {
	content: "\202F\2192\FE0E";
	flex: none;
	opacity: 0.6;
}

[data-part="find-suggestions"] [data-part="find-all"] {
	font-weight: 700;
}

/* Recent and to try: small headings, the searches as chips. */
[data-part="find-help"] {
	display: grid;
	gap: var(--spacing-small);
}

[data-part="find-help"][hidden],
[data-part="find-recent"][hidden] {
	display: none;
}

[data-part="find-help"] h3 {
	margin: 0;
	font-size: var(--font-size-small);
	font-weight: 700;
	opacity: 0.75;
}

[data-part="find-row"] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

[data-part="find-clear"] {
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-text-color);
	font: inherit;
	font-size: var(--font-size-small);
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	cursor: pointer;
}

[data-part="find-chips"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-x-small);
}

[data-part="find-chip"] {
	padding: 0.4rem 0.8rem;
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.4rem;
	color: var(--primary-color);
	font-size: var(--font-size-small);
	text-decoration: none;
}

/* A page chip's picture: the page's own coloured tile, before its name. */
[data-part="find-chip"]:has([data-part="find-chip-img"]) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-left: 0.3rem;
}

[data-part="find-chip-img"] {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 0.25rem;
	object-fit: cover;
}

/* Page chips line up in height, with or without a picture. */
[data-part="find-chip"][data-kind="page"] {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.5rem;
}

/* The arrow stays close to the name (the picture's gap is not for it). */
[data-part="find-chip"]:has([data-part="find-chip-img"])::after {
	margin-left: -0.35rem;
}

/* Chips that are pages (not searches): an arrow after the name. */
[data-part="find-chip"][data-kind="page"]::after {
	content: "\202F\2192\FE0E";
	opacity: 0.6;
}

[data-part="find-chip"]:hover {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-part="find-chip"]:focus-visible,
[data-part="find-clear"]:focus-visible,
[data-part="find-go"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.15rem;
}

/* On /search, under the page's own box. */
main > [data-part="find-help"] {
	margin-top: var(--spacing-medium);
}

/* The column's search icon shows the close look while the drawer is open. */
#toggle-search-scroll {
	cursor: pointer;
}

[data-part="find-open"][aria-expanded="true"] #toggle-search-scroll {
	content: url("../img/icons/menu-close.svg");
	box-sizing: border-box;
	padding: 0.5rem;
	border-radius: 0.75rem;
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
}

/* ── Panels over the page (Accessibility → Panels → Over the page) ─────────
   From 768px the drawers (menu, settings, SAB, search) open as windows over
   the page instead of beside it: the page keeps its size (no room made, no
   card), and the drawer itself takes the card's look — the gap round it,
   the frame, the rounded corners — so a strip of the page shows round it.
   The blur choice still blurs the page behind; the page's fixed buttons
   still keep clear of the drawer (--card-l/-r/-b). Phones: fullscreen as
   ever. [data-accessibility] twice: to outweigh the :not(sidebar) rules. */
@media only screen and (min-width: 48rem) {
	html[data-accessibility~="panels-over"][data-accessibility]:has(
			:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open
		) {
		padding: 0;
	}

	html[data-accessibility~="panels-over"][data-accessibility]
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel) {
		box-sizing: border-box;
		max-height: calc(100dvh - 2 * var(--drawer-gap));
		border: 0.1rem solid var(--primary-color);
		border-radius: 0.8rem;
	}

	/* Where each window sits: the drawer's side, the gap all round. */
	html[data-accessibility~="panels-over"][data-accessibility] #siteMenu {
		inset: var(--drawer-gap) auto var(--drawer-gap) var(--drawer-gap);
		height: auto;
	}

	html[data-accessibility~="panels-over"][data-accessibility]
		:is(#sabPanel, #findPanel),
	html[data-accessibility~="panels-over"][data-accessibility~="sidebar"]
		#accessibilityDialog {
		inset: var(--drawer-gap) var(--drawer-gap) var(--drawer-gap) auto;
		height: auto;
	}

	html[data-accessibility~="panels-over"]:not([data-accessibility~="sidebar"])
		#accessibilityDialog {
		inset: auto var(--drawer-gap) var(--drawer-gap) var(--drawer-gap);
		width: auto;
	}

	/* No card round the page: the backdrop stays the whole screen, only
	   blurring it when the blur is on. */
	html[data-accessibility~="panels-over"][data-accessibility]
		:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		):popover-open::backdrop {
		inset: 0;
		border-radius: 0;
		outline-color: transparent;
		box-shadow: none;
		animation: none;
	}
}

/* ── See through (Panels → Over the page) ──────────────────────────────────
   A third drawer button (main.js drawer()): the drawer fades to a ghost of
   itself and lets clicks through to the page; only its see-through and
   close buttons stay solid and clickable. Shown only for windows over the
   page, from 768px (below, a drawer is the whole screen). */
html:not([data-accessibility~="panels-over"])
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="see-through"] {
	display: none;
}

@media only screen and (max-width: 47.9375rem) {
	html
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-button][data-part="see-through"] {
		display: none;
	}
}

@media only screen and (min-width: 48rem) {
	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="see-through"] {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		box-sizing: border-box;
		width: var(--page-tools-icon, 1.75rem);
		height: var(--page-tools-icon, 1.75rem);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0.4rem;
		background-color: var(--primary-color);
		cursor: pointer;
	}
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="see-through"]
	[data-icon] {
	display: block;
	width: 65%;
	height: 65%;
	background-color: var(--bg-color);
	-webkit-mask: url("../img/icons/see-through.svg") center / contain no-repeat;
	mask: url("../img/icons/see-through.svg") center / contain no-repeat;
}

/* Pressed: the page's look, an orange edge (like close). */
html[data-accessibility~="panels-over"]
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="see-through"][aria-pressed="true"] {
	background-color: var(--bg-color);
	box-shadow: inset 0 0 0 0.1rem var(--focus-color);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="see-through"][aria-pressed="true"]
	[data-icon] {
	background-color: var(--primary-color);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="see-through"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

/* More buttons with windows over the page: two rows of two, so the head
   keeps its height and the line its place. */
@media only screen and (min-width: 48rem) {
	/* Four buttons in two rows: blur and close on top (close at the
	   corner, where it always is), see through and arrange under them. */
	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog)
		[data-part="drawer-tools"] {
		display: grid;
		grid-template-columns: repeat(2, var(--page-tools-icon));
		grid-auto-rows: var(--page-tools-icon);
		gap: 0.4rem;
	}

	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog)
		[data-part="drawer-tools"]
		> [data-part="blur"] {
		grid-area: 1 / 1;
	}

	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog)
		[data-part="drawer-tools"]
		> [data-part="close"] {
		grid-area: 1 / 2;
	}

	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog)
		[data-part="drawer-tools"]
		> [data-part="see-through"] {
		grid-area: 2 / 1;
	}

	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog)
		[data-part="drawer-tools"]
		> [data-part="arrange"] {
		grid-area: 2 / 2;
	}
}

/* Seen through: a pane of glass — the page behind blurred, its colours
   lifted, a bright rim and a soft sheen at the top; the drawer's own
   contents faint on it, clicks passing through to the page. */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)[data-see-through] {
	pointer-events: none;
	background-color: color-mix(in srgb, var(--bg-color) 12%, transparent);
	background-image: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.35),
		rgba(255, 255, 255, 0.05) 40%,
		rgba(255, 255, 255, 0) 60%,
		rgba(255, 255, 255, 0.12)
	);
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow:
		inset 0 0.05rem 0 rgba(255, 255, 255, 0.85),
		inset 0 0 0 0.05rem rgba(255, 255, 255, 0.35),
		inset 0 -0.6rem 1.2rem rgba(0, 0, 0, 0.06),
		inset 0 0.6rem 1.2rem rgba(255, 255, 255, 0.25);
	-webkit-backdrop-filter: blur(0.35rem) saturate(170%) brightness(1.05);
	backdrop-filter: blur(0.35rem) saturate(170%) brightness(1.05);
	transition:
		background-color 0.25s ease,
		backdrop-filter 0.25s ease,
		-webkit-backdrop-filter 0.25s ease;
}

/* Dark themes: a darker pane, a dimmer rim. */
:is([data-accessibility~="dark"], [data-accessibility~="high-contrast"])
	:is(
		#siteMenu,
		#accessibilityDialog,
		#sabPanel,
		#findPanel
	)[data-see-through] {
	background-image: linear-gradient(
		160deg,
		rgba(255, 255, 255, 0.14),
		rgba(255, 255, 255, 0.02) 40%,
		rgba(255, 255, 255, 0) 60%,
		rgba(255, 255, 255, 0.06)
	);
	border-color: rgba(255, 255, 255, 0.3);
	-webkit-backdrop-filter: blur(0.35rem) saturate(150%) brightness(0.85);
	backdrop-filter: blur(0.35rem) saturate(150%) brightness(0.85);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)[data-see-through]
	:is([data-part="see-through"], [data-part="close"]) {
	pointer-events: auto;
}

/* …and everything but the way to those two buttons faint (each branch
   once, so the fading does not multiply down the tree). */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)[data-see-through]
	:has(:is([data-part="see-through"], [data-part="close"]))
	> :not(
		:is([data-part="see-through"], [data-part="close"]),
		:has(:is([data-part="see-through"], [data-part="close"]))
	) {
	opacity: 0.22;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	:has(:is([data-part="see-through"], [data-part="close"]))
	> * {
	transition: opacity 0.2s ease;
}

/* Windows over the page open and close whole: a fade and a short glide
   from their side, not the side-on reveal that cut the frame mid-way. */
html[data-accessibility~="panels-over"] {
	--over-glide: 0 0;
}

@media only screen and (min-width: 48rem) {
	html[data-accessibility~="panels-over"][data-accessibility]
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel) {
		clip-path: none;
		opacity: 0;
		translate: var(--over-glide);
		transition:
			opacity 220ms ease-in,
			translate 220ms ease-in,
			overlay 220ms allow-discrete,
			display 220ms allow-discrete;
	}

	html[data-accessibility~="panels-over"][data-accessibility]
		:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		):popover-open {
		opacity: 1;
		translate: 0 0;
		transition:
			opacity 260ms ease-out,
			translate 320ms cubic-bezier(0.165, 0.84, 0.44, 1),
			overlay 320ms allow-discrete,
			display 320ms allow-discrete;
	}

	@starting-style {
		html[data-accessibility~="panels-over"][data-accessibility]
			:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open {
			opacity: 0;
			translate: var(--over-glide);
		}
	}

	/* The side each comes from. */
	html[data-accessibility~="panels-over"] #siteMenu {
		--over-glide: -1.5rem 0;
	}

	html[data-accessibility~="panels-over"] :is(#sabPanel, #findPanel),
	html[data-accessibility~="panels-over"][data-accessibility~="sidebar"]
		#accessibilityDialog {
		--over-glide: 1.5rem 0;
	}

	html[data-accessibility~="panels-over"]:not([data-accessibility~="sidebar"])
		#accessibilityDialog {
		--over-glide: 0 1.5rem;
	}

	/* The contents come with the window, not sliding in on their own. */
	html[data-accessibility~="panels-over"][data-accessibility]
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="panel"] {
		transform: none;
		transition: none;
	}
}

/* ── Arrange (Panels → Over the page) ──────────────────────────────────────
   A button by see-through (main.js arrange()) opens a picker of layouts like
   a desktop's snap layouts; a zone puts the window there: --win-x / -y / -w
   / -h, fractions of the screen, the usual gap kept round it. */
html:not([data-accessibility~="panels-over"])
	:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	:is([data-part="arrange"], [data-part="arrange-picker"]) {
	display: none;
}

@media only screen and (max-width: 47.9375rem) {
	html
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		:is([data-button][data-part="arrange"], [data-part="arrange-picker"]) {
		display: none;
	}
}

@media only screen and (min-width: 48rem) {
	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="arrange"] {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		box-sizing: border-box;
		width: var(--page-tools-icon, 1.75rem);
		height: var(--page-tools-icon, 1.75rem);
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0.4rem;
		background-color: var(--primary-color);
		cursor: pointer;
	}

	html[data-accessibility~="panels-over"]
		:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
		[data-part="arrange"][aria-expanded="true"] {
		background-color: var(--bg-color);
		box-shadow: inset 0 0 0 0.1rem var(--focus-color);
	}

	/* A placed window: its zone, the gap kept round it. */
	html[data-accessibility~="panels-over"][data-accessibility]
		:is(
			#siteMenu,
			#accessibilityDialog,
			#sabPanel,
			#findPanel
		)[data-snapped] {
		inset: auto;
		left: calc(var(--win-x) * 100% + var(--drawer-gap));
		top: calc(var(--win-y) * 100% + var(--drawer-gap));
		width: calc(var(--win-w) * 100% - 2 * var(--drawer-gap));
		height: calc(var(--win-h) * 100% - 2 * var(--drawer-gap));
		max-width: none;
		max-height: none;
	}

	/* Placed, the page's fixed buttons go back to their usual places. */
	html[data-accessibility~="panels-over"][data-accessibility]:has(
			:is(
					#siteMenu,
					#accessibilityDialog,
					#sabPanel,
					#findPanel
				)[data-snapped]:popover-open
		) {
		--card-l: 0rem;
		--card-r: 0rem;
		--card-b: 0rem;
	}
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="arrange"]
	[data-icon] {
	display: block;
	width: 65%;
	height: 65%;
	background-color: var(--bg-color);
	-webkit-mask: url("../img/icons/arrange.svg") center / contain no-repeat;
	mask: url("../img/icons/arrange.svg") center / contain no-repeat;
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="arrange"][aria-expanded="true"]
	[data-icon] {
	background-color: var(--primary-color);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="arrange"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

/* The picker: under its button, at the right (in the column or the head). */
:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="arrange-picker"] {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 5;
	display: grid;
	/* 96 × 60px cards: halves, thirds and quarters all on whole pixels,
	   so the zones' edges stay sharp. */
	grid-template-columns: repeat(3, 4.8rem);
	gap: 0.5rem;
	padding: 0.6rem;
	background-color: var(--bg-color);
	border: 0.1rem solid var(--primary-color);
	border-radius: 0.6rem;
	box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
}

:is(#siteMenu, #accessibilityDialog, #sabPanel, #findPanel)
	[data-part="arrange-picker"][hidden] {
	display: none;
}

:is(#sabPanel, #findPanel)
	:is([data-part="sab-head"], [data-part="find-head"]) {
	position: relative;
}

[data-part="arrange-layout"] {
	position: relative;
	width: 4.8rem;
	height: 3rem;
	border-radius: 0.3rem;
	background-color: color-mix(
		in srgb,
		var(--primary-color) 14%,
		var(--bg-color)
	);
}

[data-part="arrange-zone"] {
	position: absolute;
	left: calc(var(--zx) * 100%);
	top: calc(var(--zy) * 100%);
	width: calc(var(--zw) * 100%);
	height: calc(var(--zh) * 100%);
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0.15rem solid
		color-mix(in srgb, var(--primary-color) 14%, var(--bg-color));
	border-radius: 0.3rem;
	background-color: var(--bg-color);
	background-clip: padding-box;
	cursor: pointer;
}

[data-part="arrange-zone"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 0.05rem solid
		color-mix(in srgb, var(--primary-color) 55%, var(--bg-color));
	border-radius: 0.15rem;
}

[data-part="arrange-zone"]:is(:hover, :focus-visible) {
	background-color: var(--focus-color);
	outline: none;
}

[data-part="arrange-zone"]:is(:hover, :focus-visible)::after {
	border-color: var(--focus-color);
}

[data-part="arrange-zone"][aria-pressed="true"] {
	background-color: var(--primary-color);
}

[data-part="arrange-zone"][aria-pressed="true"]::after {
	border-color: var(--primary-color);
}

[data-part="arrange-back"] {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-text-color);
	font: inherit;
	font-size: var(--font-size-small);
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	cursor: pointer;
}

/* ── The status bar with windows over the page ─────────────────────────────
   No card to sit in the corner of: a small card of its own, framed all
   round, a gap from the edges, clear of a window at the left or bottom. */
@media only screen and (min-width: 48rem) {
	html[data-accessibility~="panels-over"][data-accessibility]:has(
			:is(
				#siteMenu,
				#accessibilityDialog,
				#sabPanel,
				#findPanel
			):popover-open
		)
		:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
		left: max(var(--card-l), var(--drawer-gap));
		bottom: max(var(--card-b), var(--drawer-gap));
		border: 0.1rem solid #252525;
		border-radius: 0.8rem;
	}
}

/* A placed window (Arrange): its opener's arrow points to where it is now
   (main.js sets data-place from the zone). */

html[data-accessibility~="panels-over"]:has(
		#siteMenu[data-snapped][data-place="left"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-controls="siteMenu"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="left"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="sab-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="left"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="find-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="left"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-left.svg");
}

html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="left"]
	)
	#toggle-sab-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="left"]
	)
	[data-part="find-open"][aria-expanded="true"]
	#toggle-search-scroll,
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="left"]
	)
	#toggle-accessibility-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="left"]
	)
	#accessibilityButtonFooter[aria-expanded="true"]
	img {
	content: url("../img/icons/panel-left.svg") !important;
}

html[data-accessibility~="panels-over"]:has(
		#siteMenu[data-snapped][data-place="right"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-controls="siteMenu"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="right"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="sab-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="right"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="find-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="right"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-right.svg");
}

html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="right"]
	)
	#toggle-sab-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="right"]
	)
	[data-part="find-open"][aria-expanded="true"]
	#toggle-search-scroll,
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="right"]
	)
	#toggle-accessibility-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="right"]
	)
	#accessibilityButtonFooter[aria-expanded="true"]
	img {
	content: url("../img/icons/panel-right.svg") !important;
}

html[data-accessibility~="panels-over"]:has(
		#siteMenu[data-snapped][data-place="up"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-controls="siteMenu"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="up"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="sab-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="up"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="find-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="up"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-up.svg");
}

html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="up"]
	)
	#toggle-sab-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="up"]
	)
	[data-part="find-open"][aria-expanded="true"]
	#toggle-search-scroll,
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="up"]
	)
	#toggle-accessibility-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="up"]
	)
	#accessibilityButtonFooter[aria-expanded="true"]
	img {
	content: url("../img/icons/panel-up.svg") !important;
}

html[data-accessibility~="panels-over"]:has(
		#siteMenu[data-snapped][data-place="down"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-controls="siteMenu"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="down"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="sab-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="down"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="find-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="down"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-down.svg");
}

html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="down"]
	)
	#toggle-sab-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="down"]
	)
	[data-part="find-open"][aria-expanded="true"]
	#toggle-search-scroll,
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="down"]
	)
	#toggle-accessibility-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="down"]
	)
	#accessibilityButtonFooter[aria-expanded="true"]
	img {
	content: url("../img/icons/panel-down.svg") !important;
}

html[data-accessibility~="panels-over"]:has(
		#siteMenu[data-snapped][data-place="center"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[aria-controls="siteMenu"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="center"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="sab-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="center"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	[data-part="find-open"][aria-expanded="true"]
	[data-icon],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="center"]
	)
	:is([data-type="page-tools"], [data-type="side-bar"])
	#accessibilityButton[aria-expanded="true"]
	[data-icon] {
	--icon: url("../img/icons/panel-center.svg");
}

html[data-accessibility~="panels-over"]:has(
		#sabPanel[data-snapped][data-place="center"]
	)
	#toggle-sab-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#findPanel[data-snapped][data-place="center"]
	)
	[data-part="find-open"][aria-expanded="true"]
	#toggle-search-scroll,
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="center"]
	)
	#toggle-accessibility-scroll[aria-expanded="true"],
html[data-accessibility~="panels-over"]:has(
		#accessibilityDialog[data-snapped][data-place="center"]
	)
	#accessibilityButtonFooter[aria-expanded="true"]
	img {
	content: url("../img/icons/panel-center.svg") !important;
}

/* The search drawer's way to find on this page (snippets/find.php): only
   where the page has it. */
[data-part="page-find-open"] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small);
	margin: 0;
	padding: 0.55rem 0.85rem;
	border: 0.1rem dashed var(--primary-color);
	border-radius: 0.5rem;
	background: none;
	color: var(--primary-text-color);
	font: inherit;
	font-size: var(--font-size-small);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

[data-part="page-find-open"]:hover,
[data-part="page-find-open"]:focus-visible {
	border-style: solid;
	outline: none;
}

[data-part="page-find-open"] kbd {
	padding: 0 0.3rem;
	border: 0.05rem solid currentColor;
	border-radius: 0.25rem;
	font: inherit;
	font-weight: 400;
}

body:not(:has(#custom-search-bar)) [data-part="page-find-open"] {
	display: none;
}

/* ── Shortcuts and tips (/shortcuts) ───────────────────────────────────────
   Each group: the keys on the left, what they do on the right; one column
   on narrow pages. Keys drawn as keycaps. */
section[data-type="shortcuts"] {
	margin-top: var(--spacing-large);
}

section[data-type="shortcuts"] h2 {
	margin-bottom: var(--spacing-x-small);
}

section[data-type="shortcuts"] dl {
	display: grid;
	gap: 0;
	margin: var(--spacing-small) 0 0;
	border-top: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 20%, transparent);
}

section[data-type="shortcuts"] dl > div {
	display: grid;
	grid-template-columns: minmax(9rem, 14rem) 1fr;
	gap: var(--spacing-small);
	align-items: baseline;
	padding: var(--spacing-x-small) 0;
	border-bottom: 0.05rem solid
		color-mix(in srgb, var(--primary-text-color) 20%, transparent);
}

section[data-type="shortcuts"] dt,
section[data-type="shortcuts"] dd {
	margin: 0;
}

@container page (max-width: 30.72rem) {
	section[data-type="shortcuts"] dl > div {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

:is(section[data-type="shortcuts"], [data-part="find-help"]) kbd {
	display: inline-block;
	min-width: 1.4em;
	padding: 0.05em 0.4em;
	border: 0.05rem solid currentColor;
	border-bottom-width: 0.15rem;
	border-radius: 0.3rem;
	font: inherit;
	font-size: 0.9em;
	text-align: center;
}

ul[data-type="shortcut-pages"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-x-small) var(--spacing-small);
	margin: var(--spacing-x-small) 0 0;
	padding: 0;
	list-style: none;
}

ul[data-type="shortcut-pages"] li {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

ul[data-type="shortcut-pages"] li::before {
	content: none;
}

/* The settings panel's way to them. */
[data-part="shortcuts-link"] {
	display: block;
	width: fit-content;
	margin-top: var(--spacing-medium);
	font-size: var(--font-size-small);
}

/* ── Reading progress (snippets/navbar.php) ─────────────────────────────────
   A line along the top edge filling as the page is read — on long reads only
   (project case studies, the text pages, reviews), not the listings, where
   the scrollbar says as much. Driven by the scroll itself (no script);
   browsers without scroll-driven animations show nothing. */
[data-part="read-progress"] {
	display: none;
}

@supports (animation-timeline: scroll()) {
	body:is(
			[data-page="project"],
			[data-page="informational"],
			:has([data-type="item-header"])
		)
		[data-part="read-progress"] {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10001;
		height: 0.4rem;
		background-color: var(--focus-color);
		transform: scaleX(0);
		transform-origin: left center;
		pointer-events: none;
		animation: read-progress linear both;
		animation-timeline: scroll(root block);
	}
}

@keyframes read-progress {
	to {
		transform: scaleX(1);
	}
}

/* ── Recently viewed (snippets/find.php, main.js) ──────────────────────────
   Chips like the search panel's page links; a project's picture is its
   client logo, drawn light for the dark tiles, so it gets the dark tile
   behind it. On /projects, a row under the introduction. */
[data-part="find-recent-views"][hidden] {
	display: none;
}

[data-list="views"] [data-view-kind="project"] [data-part="find-chip-img"] {
	box-sizing: border-box;
	padding: 0.15rem;
	background-color: #252525;
	object-fit: contain;
}

main > [data-part="find-recent-views"] {
	margin-top: var(--spacing-small);
}

main > [data-part="find-recent-views"] h3 {
	margin: 0;
	font-size: var(--font-size-small);
	opacity: 0.75;
}

/* ── Reading aids (Accessibility → Reading aids; all off by default) ───────
   Ruler: a highlighted band following the pointer or the keyboard focus.
   Mask: the screen darkened except a band there. Both are fixed layers at
   --guide-y (main.js). Focus mode: while the pointer or focus is in the
   page, its other parts dim. Larger cursor: 48px high-contrast cursors (an
   arrow, a hand on links and buttons, a beam in text fields). */
[data-part="reading-ruler"],
[data-part="reading-mask"] {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: var(--guide-y, 50vh);
	z-index: 10002;
	pointer-events: none;
	transform: translateY(-50%);
}

html[data-accessibility~="reading-ruler"] [data-part="reading-ruler"] {
	display: block;
	height: 2.4rem;
	background-color: color-mix(in srgb, var(--focus-color) 16%, transparent);
	border-block: 0.1rem solid var(--focus-color);
}

html[data-accessibility~="reading-mask"] [data-part="reading-mask"] {
	display: block;
	height: 6rem;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
}

html[data-accessibility~="focus-mode"]
	main:is(:hover, :focus-within)
	> :not(:hover, :focus-within) {
	opacity: 0.25;
	transition: opacity 250ms ease;
}

html[data-accessibility~="focus-mode"] main > * {
	transition: opacity 250ms ease;
}

html[data-accessibility~="cursor"],
html[data-accessibility~="cursor"] * {
	cursor:
		url("../img/icons/cursor-large.svg") 9 5,
		auto !important;
}

html[data-accessibility~="cursor"]
	:is(
		a,
		button,
		summary,
		label,
		select,
		[role="button"],
		[data-href],
		[tabindex="0"]
	),
html[data-accessibility~="cursor"]
	:is(a, button, summary, label, [role="button"], [data-href])
	* {
	cursor:
		url("../img/icons/cursor-large-pointer.svg") 21 4,
		pointer !important;
}

html[data-accessibility~="cursor"]
	:is(
		textarea,
		input:not(
			[type="checkbox"],
			[type="radio"],
			[type="button"],
			[type="submit"],
			[type="range"]
		)
	) {
	cursor:
		url("../img/icons/cursor-large-text.svg") 24 24,
		text !important;
}