/*
 * Färgkuber — Salongen.
 *
 * The Broadsheet design system hung in a dark room: the same Source Serif 4,
 * the same process inks and the same 1.25× spacing scale, but the paper ground
 * is inverted into gallery grey so the painted voxels read as lit objects.
 * Every value below comes from the Broadsheet token sheet.
 */
/*
 * Source Serif 4, vendored. Google's own woff2 subsets, but served from here:
 * the app has to look right offline, and an @import to fonts.googleapis.com
 * is the one request a service worker cannot reliably have in its cache on the
 * first run. Both files are variable across the weight axis, so 400 and 600
 * come out of the same download.
 */
@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-roman.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-ext-roman.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/source-serif-4-latin-ext-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* Neutral ramp */
	--color-neutral-100: #f8f4f4;
	--color-neutral-200: #eae7e7;
	--color-neutral-300: #d7d3d3;
	--color-neutral-400: #bab6b6;
	--color-neutral-500: #9b9797;
	--color-neutral-600: #7d7979;
	--color-neutral-700: #605d5d;
	--color-neutral-800: #444141;
	--color-neutral-900: #2d2b2b;

	/* Process cyan */
	--color-accent: #0088b0;
	--color-accent-300: #99e0ff;
	--color-accent-400: #62c5ee;
	--color-accent-600: #1186ac;
	--color-accent-700: #006786;

	/* Process magenta */
	--color-accent-2: #d6006c;
	--color-accent-2-300: #ffc0d0;
	--color-accent-2-400: #ff90b1;
	--color-accent-2-500: #ff458e;
	--color-accent-2-600: #d82071;
	--color-accent-2-700: #aa0b56;

	--color-process-yellow: #edbb00;

	/* The salon ground: neutral 900 pulled towards the cyan plate */
	/*
	 * Semantic layer. The ramps above never change; these do, and they are the
	 * only thing a theme overrides. --ink-strong is the brightest thing on the
	 * ground, --ink-faint the quietest, whichever way round the room is lit.
	 */
	--color-room: color-mix(in srgb, var(--color-neutral-900) 88%, var(--color-accent));
	--color-surface: color-mix(in srgb, var(--color-neutral-900) 94%, var(--color-accent));
	--color-vignette: color-mix(in srgb, var(--color-neutral-900) 80%, transparent);

	--ink-strong: var(--color-neutral-100);
	--ink: var(--color-neutral-300);
	--ink-dim: var(--color-neutral-400);
	--ink-soft: var(--color-neutral-500);
	--ink-faint: var(--color-neutral-600);

	--spot: var(--color-accent-400);
	--spot-2: var(--color-accent-2-400);

	--color-rule: color-mix(in srgb, var(--ink-strong) 16%, transparent);
	--color-rule-soft: color-mix(in srgb, var(--ink-strong) 14%, transparent);

	--font-heading: 'Source Serif 4', Georgia, serif;
	--font-heading-weight: 600;
	--font-body: 'Source Serif 4', Georgia, serif;

	--space-1: 5px;
	--space-2: 10px;
	--space-3: 15px;
	--space-4: 20px;
	--space-6: 30px;
	--space-8: 40px;

	--radius-sm: 1px;
	--radius-md: 2px;

	--color-scrim: color-mix(in srgb, #000 62%, transparent);
	/* A white ink needs an edge on paper and none in the dark. */
	--chip-ring: inset 0 0 0 0 transparent;

	--rail: 15.5rem;

	/*
	 * The room runs edge to edge — the canvas should bleed under a rounded
	 * corner or a home indicator. Only the chrome laid over it insets, and it
	 * insets from these, never from a guessed number. Installed on an iPad the
	 * top one is the status bar; on an iPhone in landscape the side ones are
	 * the notch; the bottom one is the home indicator on both.
	 */
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);

	color-scheme: dark;
}

/*
 * Dagsljus — the same salon with the blinds open. Broadsheet's own paper
 * ground, and the ink roles turned the other way up: the accents step down
 * the ramp so uppercase micro-labels still clear 3:1 on white.
 */
html[data-theme='ljus'] {
	--color-room: #f3f2f2;
	--color-surface: #eae9e9;
	--color-vignette: color-mix(in srgb, var(--color-neutral-900) 16%, transparent);
	--color-scrim: color-mix(in srgb, var(--color-neutral-900) 46%, transparent);

	--ink-strong: #201e1d;
	--ink: var(--color-neutral-800);
	--ink-dim: var(--color-neutral-700);
	--ink-soft: var(--color-neutral-700);
	--ink-faint: var(--color-neutral-600);

	--spot: var(--color-accent-700);
	--spot-2: var(--color-accent-2-700);

	--color-rule: color-mix(in srgb, var(--ink-strong) 22%, transparent);
	--color-rule-soft: color-mix(in srgb, var(--ink-strong) 14%, transparent);
	--chip-ring: inset 0 0 0 1px color-mix(in srgb, var(--ink-strong) 26%, transparent);

	color-scheme: light;
}

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

html,
body {
	height: 100%;
}

body {
	margin: 0;
	overflow: hidden;
	background: var(--color-room);
	color: var(--ink);
	font-family: var(--font-body);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	/* No double-tap zoom on the chrome; the canvas opts back out of this. */
	touch-action: manipulation;
	overscroll-behavior: none;
}

::selection {
	background: color-mix(in srgb, var(--color-accent) 40%, transparent);
	color: var(--ink-strong);
}

:focus-visible {
	outline: 2px solid var(--spot);
	outline-offset: 2px;
}

a,
a:hover {
	color: var(--spot);
}

button {
	font: inherit;
	color: inherit;
}

/* Shared micro-typography: the uppercase letterspaced label used throughout */
.label {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ── Shell ───────────────────────────────────────────────────────────── */

.salon {
	height: 100dvh;
	width: 100%;
	overflow: hidden;
	display: grid;
	grid-template-columns: var(--rail) 1fr;
	grid-template-rows: 1fr auto;
	background: var(--color-room);
}

/* ── Catalogue rail ──────────────────────────────────────────────────── */

.catalog {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	padding:
		calc(var(--space-6) + var(--safe-top))
		var(--space-4)
		calc(var(--space-4) + var(--safe-bottom))
		calc(var(--space-8) + var(--safe-left));
	min-height: 0;
	overflow: hidden;
}

.catalog__kicker {
	margin-bottom: var(--space-3);
	letter-spacing: 0.24em;
}

.catalog__rooms {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: var(--ink-faint) transparent;
}

.room {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.room__title {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding-bottom: 2px;
}

.work {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	padding: 2px var(--space-2);
	font-family: var(--font-body);
	color: var(--ink);
	transition: background 160ms ease;
}

.work:hover {
	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.work[aria-current='true'] {
	background: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.work__idx {
	font-variant-numeric: tabular-nums;
	font-size: 0.6875rem;
	opacity: 0.5;
	width: 1.4rem;
	flex: none;
}

.work__name {
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	color: var(--ink-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.work[aria-current='true'] .work__name {
	font-style: italic;
	color: var(--ink-strong);
}

.work__spacer {
	flex: 1;
}

.work__mark {
	width: 4px;
	height: 4px;
	flex: none;
	background: transparent;
}

.work[aria-current='true'] .work__mark {
	background: var(--spot);
}

.work__mark--done,
.work[aria-current='true'] .work__mark--done {
	background: var(--spot-2);
}

/* Placard: what the wall label under the catalogue says about the work */

.placard {
	margin-top: auto;
	padding-top: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.placard__rule {
	height: 1px;
	background: var(--color-rule-soft);
}

.placard__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.1;
	color: var(--ink-strong);
	margin: 0;
	font-weight: var(--font-heading-weight);
}

.placard__lines {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ── Stage ───────────────────────────────────────────────────────────── */

.stage {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	min-width: 0;
	min-height: 0;
}

.stage__canvas {
	position: absolute;
	inset: 0;
	background: var(--color-room);
}

.stage__vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(115% 85% at 52% 42%, transparent 30%, var(--color-vignette) 100%);
}

.stage__toast {
	position: absolute;
	left: 50%;
	top: 12%;
	transform: translateX(-50%);
	pointer-events: none;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.375rem;
	color: var(--spot-2);
	text-shadow: 0 0 22px color-mix(in srgb, var(--spot-2) 55%, transparent);
	opacity: 0;
	transition: opacity 340ms ease;
	text-align: center;
	white-space: nowrap;
}

.stage__toast[data-on='true'] {
	opacity: 1;
}

.stage__hints {
	position: absolute;
	right: calc(var(--space-6) + var(--safe-right));
	top: calc(var(--space-6) + var(--safe-top));
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	text-align: right;
	pointer-events: none;
	line-height: 1.9;
}

.stage__clock {
	position: absolute;
	left: calc(var(--space-6) + var(--safe-left));
	top: calc(var(--space-6) + var(--safe-top));
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stage__time {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.stage__misses {
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.stage__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--ink-soft);
	background: var(--color-room);
	transition: opacity 400ms ease;
}

.stage__loading[hidden] {
	display: none;
}

/* ── Footer controls ─────────────────────────────────────────────────── */

.controls {
	grid-column: 1 / -1;
	grid-row: 2;
	border-top: 1px solid var(--color-rule);
	padding:
		var(--space-3)
		calc(var(--space-8) + var(--safe-right))
		calc(var(--space-4) + var(--safe-bottom))
		calc(var(--space-8) + var(--safe-left));
	display: flex;
	align-items: flex-end;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.layers {
	display: flex;
	gap: var(--space-4);
	align-items: flex-end;
	flex-wrap: wrap;
}

.layer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 6.5rem;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.layer__head {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
}

.layer__idx {
	font-variant-numeric: tabular-nums;
	font-size: 0.625rem;
	opacity: 0.55;
}

.layer__name {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-soft);
	transition: color 160ms ease;
}

.layer[aria-current='true'] .layer__name,
.layer:hover .layer__name {
	color: var(--ink-strong);
}

.layer__count {
	font-variant-numeric: tabular-nums;
	font-size: 0.625rem;
	color: var(--ink-faint);
}

.layer__track {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--color-rule-soft);
}

.layer__bar {
	display: block;
	height: 2px;
	width: 0;
	background: var(--ink-faint);
	transition: width 260ms ease, background 260ms ease;
}

.layer[aria-current='true'] .layer__bar {
	background: var(--spot);
}

.layer__bar[data-full='true'] {
	background: var(--spot-2);
}

.swatches {
	display: flex;
	gap: var(--space-2);
	align-items: flex-end;
	margin-left: auto;
}

.swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: opacity 160ms ease;
}

.swatch__chip {
	display: block;
	width: 26px;
	height: 26px;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.swatch[aria-pressed='true'] .swatch__chip {
	transform: translateY(-3px);
}

.swatch__num {
	font-size: 0.5625rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--ink-faint);
}

.swatch[aria-pressed='true'] .swatch__num {
	color: var(--ink-strong);
}

.swatch__left {
	font-size: 0.5625rem;
	font-variant-numeric: tabular-nums;
	color: var(--ink-faint);
}

.readout {
	display: flex;
	align-items: flex-end;
	gap: var(--space-4);
	padding-left: var(--space-4);
}

.readout__figure {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.readout__percent {
	font-family: var(--font-heading);
	font-size: 1.75rem;
	line-height: 1;
	font-weight: var(--font-heading-weight);
	font-variant-numeric: tabular-nums;
	color: var(--ink-strong);
}

.readout__caption {
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.readout__actions {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-end;
}

.btn-toggle {
	background: transparent;
	color: var(--ink);
	border: 1px solid color-mix(in srgb, var(--ink-strong) 28%, transparent);
	padding: 5px var(--space-3);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn-toggle:hover {
	border-color: var(--spot);
	color: var(--ink-strong);
}

.btn-toggle[aria-pressed='true'] {
	background: var(--spot);
	border-color: var(--spot);
	color: var(--color-room);
}

.btn-quiet {
	background: none;
	border: 0;
	padding: 2px 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	transition: color 160ms ease;
}

.btn-quiet:hover {
	color: var(--spot);
}

/* ── Mobile masthead (hidden on the desk) ────────────────────────────── */

.masthead {
	display: none;
	grid-column: 1 / -1;
	grid-row: 1;
	align-items: center;
	gap: var(--space-3);
	padding:
		calc(var(--space-3) + var(--safe-top))
		calc(var(--space-4) + var(--safe-right))
		var(--space-3)
		calc(var(--space-4) + var(--safe-left));
	border-bottom: 1px solid var(--color-rule);
}

.masthead__title {
	min-width: 0;
	flex: 1;
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--ink-strong);
	margin: 0;
	font-weight: var(--font-heading-weight);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.masthead__meta {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-variant-numeric: tabular-nums;
}

/* ── Dialogs ─────────────────────────────────────────────────────────── */

dialog {
	border: 1px solid var(--color-rule);
	background: var(--color-surface);
	color: var(--ink);
	font-family: var(--font-body);
	padding: var(--space-6);
	max-width: min(28rem, calc(100vw - var(--space-6)));
	width: 100%;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

dialog::backdrop {
	background: var(--color-scrim);
}

.dialog__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--ink-strong);
	margin: 0 0 var(--space-2);
	font-weight: var(--font-heading-weight);
}

.dialog__lede {
	margin: 0 0 var(--space-4);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ink-dim);
}

.dialog__actions {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	justify-content: flex-end;
	margin-top: var(--space-4);
}

.input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-rule);
	color: var(--ink-strong);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	padding: var(--space-2) 0;
}

.input:focus {
	outline: none;
	border-bottom-color: var(--spot);
}

.board {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	max-height: 46vh;
	overflow-y: auto;
}

.board__row {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-rule-soft);
	font-variant-numeric: tabular-nums;
}

.board__row[data-you='true'] .board__name {
	color: var(--spot-2);
	font-style: italic;
}

.board__rank {
	width: 1.6rem;
	font-size: 0.75rem;
	color: var(--ink-faint);
}

.board__name {
	font-family: var(--font-heading);
	font-size: 1rem;
	color: var(--ink-strong);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.board__time {
	margin-left: auto;
	font-size: 0.9375rem;
	color: var(--ink);
}

.board__misses {
	font-size: 0.6875rem;
	color: var(--ink-faint);
	width: 3.4rem;
	text-align: right;
}

.board__empty {
	font-size: 0.875rem;
	color: var(--ink-soft);
	font-style: italic;
	padding: var(--space-3) 0;
}

/* ── Install banner ──────────────────────────────────────────────────── */

.install {
	position: fixed;
	left: 50%;
	bottom: calc(var(--space-3) + var(--safe-bottom));
	transform: translateX(-50%);
	z-index: 40;
	display: none;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-rule);
	max-width: calc(100vw - var(--space-4));
}

.install[data-on='true'] {
	display: flex;
}

.install__text {
	font-size: 0.8125rem;
	color: var(--ink);
	line-height: 1.4;
}

/* ── Portrait / small screens ────────────────────────────────────────── */

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
	.salon {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
	}

	.masthead {
		display: flex;
		grid-row: 1;
	}

	.stage {
		grid-column: 1;
		grid-row: 2;
	}

	.controls {
		grid-row: 3;
		padding:
			var(--space-2)
			calc(var(--space-3) + var(--safe-right))
			calc(var(--space-3) + var(--safe-bottom))
			calc(var(--space-3) + var(--safe-left));
		gap: var(--space-3);
		align-items: stretch;
		flex-direction: column;
		min-width: 0;
	}

	/*
	 * Without min-width:0 a flex item is never narrower than its content, so
	 * the layer strip's min-content width silently widens the whole footer and
	 * pushes the right-hand controls off a 390px screen.
	 */
	.controls > * {
		min-width: 0;
		max-width: 100%;
	}

	.masthead__meta .readout__percent {
		font-size: 1.25rem;
	}

	.stage__hints,
	.stage__clock {
		display: none;
	}

	.layers {
		gap: var(--space-3);
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: var(--space-1);
		scrollbar-width: none;
	}

	.layers::-webkit-scrollbar {
		display: none;
	}

	.layer {
		min-width: 5.5rem;
		flex: none;
	}

	.swatches {
		margin-left: 0;
		justify-content: space-between;
		gap: var(--space-1);
	}

	.swatch__chip {
		width: 30px;
		height: 30px;
	}

	.readout {
		padding-left: 0;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	.readout__actions {
		flex-direction: row;
		gap: var(--space-2);
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.readout__percent {
		font-size: 1.5rem;
	}

	/* The catalogue becomes a sheet the masthead pulls down */
	.catalog {
		position: fixed;
		inset: 0;
		z-index: 30;
		background: var(--color-room);
		padding:
			calc(var(--space-4) + var(--safe-top))
			calc(var(--space-4) + var(--safe-right))
			calc(var(--space-4) + var(--safe-bottom))
			calc(var(--space-4) + var(--safe-left));
		transform: translateY(-100%);
		transition: transform 260ms ease;
	}

	.catalog[data-open='true'] {
		transform: translateY(0);
	}

	.catalog__close {
		align-self: flex-end;
	}
}

@media (min-width: 901px) {
	.catalog__close {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 1ms !important;
	}
}