/* Tokens: Tide palette (OKLCH), Birch type, 4px spacing scale */
:root {
	--bg: oklch(97.2% 0.008 225);
	--surface: oklch(94.5% 0.012 225);
	--ink: oklch(29% 0.035 235);
	--muted: oklch(47% 0.03 230);
	--accent: oklch(50% 0.075 195);
	--accent-ink: oklch(98.5% 0.005 225);
	--line: oklch(88% 0.015 225);

	/* Analogous neighbours of the teal accent, used for decoration only */
	--accent-2: oklch(62% 0.09 165);
	--accent-3: oklch(55% 0.08 240);

	--font-head: "Newsreader", Georgia, serif;
	--font-body: "Hanken Grotesk", system-ui, sans-serif;
	--step--1: 0.844rem;
	--step-0: 1.125rem;
	--step-1: 1.5rem;
	--step-2: 2rem;
	--step-3: 2.666rem;
	--step-4: 3.553rem;
	--leading: 1.6;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	--radius: 10px;
	--measure: 34em;
	--container: 68rem;
	--gutter: var(--space-4);

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: oklch(21.5% 0.022 240);
		--surface: oklch(25.5% 0.025 240);
		--ink: oklch(93% 0.01 225);
		--muted: oklch(75% 0.02 230);
		--accent: oklch(80% 0.07 190);
		--accent-ink: oklch(21.5% 0.022 240);
		--line: oklch(32% 0.025 240);
		--accent-2: oklch(70% 0.08 165);
		--accent-3: oklch(62% 0.08 245);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: oklch(21.5% 0.022 240);
	--surface: oklch(25.5% 0.025 240);
	--ink: oklch(93% 0.01 225);
	--muted: oklch(75% 0.02 230);
	--accent: oklch(80% 0.07 190);
	--accent-ink: oklch(21.5% 0.022 240);
	--line: oklch(32% 0.025 240);
	--accent-2: oklch(70% 0.08 165);
	--accent-3: oklch(62% 0.08 245);
	color-scheme: dark;
}

@media (min-width: 40rem) {
	:root { --gutter: var(--space-6); }
}

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

html { scroll-padding-top: 5rem; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--leading);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--font-head);
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); }

::selection { background: color-mix(in oklab, var(--accent-2) 30%, transparent); }

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

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

img, svg { max-width: 100%; height: auto; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -3rem;
	padding: var(--space-2) var(--space-4);
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-2); }

.btn {
	display: inline-block;
	padding: var(--space-3) var(--space-5);
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

/* Header: sticks to the top and frosts once the page scrolls (site.js adds .is-scrolled) */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
}

.site-header.is-scrolled {
	background: color-mix(in oklab, var(--bg) 88%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: 0 1px 0 var(--line);
}

.site-header .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

@media (min-width: 40rem) {
	.site-header .container {
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
	}
}

.brand {
	display: flex;
	align-items: center;
	height: 2.5rem;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: var(--step-1);
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.25s ease, visibility 0.25s;
}

/* The hero already shows the name, so the header only shows it once the hero is out of view */
.site-header.hide-brand .brand {
	opacity: 0;
	visibility: hidden;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.site-nav ul {
	display: flex;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	color: var(--muted);
	text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }

.theme-toggle {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Hero */
.hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-9);
}

@media (min-width: 40rem) {
	.hero { padding-top: var(--space-9); }
}

.hero h1 {
	font-size: clamp(2.5rem, 9vw, var(--step-4));
	letter-spacing: -0.01em;
}

.hero p {
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: var(--step-1);
	line-height: 1.45;
	max-width: 28em;
}

.tide-line {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: 24px;
	margin-top: var(--space-6);
	color: var(--accent);
	touch-action: pan-y;
}

.tide-marker { fill: var(--accent); }
.tide-marker[hidden] { display: none; }

.hero .tide-caption {
	margin-top: var(--space-2);
	color: var(--muted);
	font-size: var(--step--1);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.tldr-toggle {
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* TL;DR mode: the summary that replaces work, demos and about (toggled by site.js) */
.tldr { padding-bottom: var(--space-9); }

.tldr-list { margin: var(--space-5) 0 0; }

.tldr-list > div {
	display: grid;
	gap: var(--space-1) var(--space-6);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--line);
}

.tldr-list dt { font-weight: 500; }

.tldr-list dd { margin: 0; color: var(--muted); }

.tldr-list ul { margin: 0; padding-left: 1.2em; }

@media (min-width: 48rem) {
	.tldr-list > div { grid-template-columns: 12rem 1fr; }
}

/* The one moment of motion: the tide line draws in once on load */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	.site-header { transition: background-color 0.25s ease, box-shadow 0.25s ease; }

	.tide-line path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
		animation: tide-in 1.6s 0.2s ease-out forwards;
	}

	@keyframes tide-in {
		to { stroke-dashoffset: 0; }
	}
}

/* Section heading shared by work, about and contact */
.section-head {
	padding-top: var(--space-7);
	border-top: 1px solid var(--line);
}

.section-head h2 { font-size: var(--step-3); }

.section-head p {
	margin-top: var(--space-3);
	color: var(--muted);
}

/* Selected work */
.work { padding-bottom: var(--space-9); }

.work-list {
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.work-item {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-6) 0;
}

.work-item + .work-item { border-top: 1px solid var(--line); }

.work-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-4);
	color: var(--muted);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
}

.work-meta span:first-child {
	color: var(--ink);
	font-weight: 500;
}

.work-body h3 { font-size: clamp(1.5rem, 5vw, var(--step-2)); }

.work-body p { margin-top: var(--space-3); }

.work-body .work-stack {
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: var(--step--1);
}

/* On wide screens the dates become a timeline: a line with one mark per role */
@media (min-width: 48rem) {
	.work-item {
		position: relative;
		grid-template-columns: 14rem 1fr;
		gap: var(--space-6);
		padding: var(--space-6) 0;
	}

	.work-item + .work-item { border-top: 0; }

	.work-item::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 4px;
		width: 1px;
		background: var(--line);
	}

	.work-meta {
		position: relative;
		flex-direction: column;
		padding: 0.55em 0 0 var(--space-6);
	}

	.work-meta::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.95em;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--bg);
		border: 1.5px solid var(--accent);
	}

	.work-item:first-child .work-meta::before {
		background: var(--accent);
		box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-2) 25%, transparent);
	}
}

/* About */
.about { padding-bottom: var(--space-9); }

.about-grid {
	display: grid;
	gap: var(--space-7);
	margin-top: var(--space-6);
}

.about-text p + p { margin-top: var(--space-4); }

.about-text p:first-child {
	font-size: var(--step-1);
	line-height: 1.45;
}

.about-skills h3 {
	font-size: var(--step-1);
	margin-bottom: var(--space-2);
}

.about-skills dl { margin: 0; }

.about-skills dl > div {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--line);
}

.about-skills dl > div:last-child { border-bottom: 0; }

.about-skills dt { font-weight: 500; }

.about-skills dd {
	margin: var(--space-1) 0 0;
	color: var(--muted);
}

@media (min-width: 56rem) {
	.about-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-9);
	}
}

/* Contact */
.contact { padding-bottom: var(--space-9); }

.contact-grid {
	display: grid;
	gap: var(--space-7);
	margin-top: var(--space-6);
}

.contact-intro > p {
	font-size: var(--step-1);
	line-height: 1.45;
}

.contact-links {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}

.contact-form {
	display: grid;
	gap: var(--space-5);
	justify-items: start;
}

.field {
	display: grid;
	gap: var(--space-2);
	width: 100%;
}

.field label { font-weight: 500; }

.field input,
.field textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--muted);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input:focus-visible,
.field textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}

@media (min-width: 56rem) {
	.contact-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-9);
	}
}

/* Footer */
/* Two rows: copyright and "Back to top", then the site details (index page only) */
.footer-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--space-3) var(--space-5);
	padding-top: var(--space-5);
	padding-bottom: var(--space-6);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--step--1);
}

.footer-meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--line);
}

.footer-meta p { max-width: none; }

/* Site status: uptime, last deploy and Lighthouse scores (filled in by site.js) */
.site-status,
.site-scores {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-variant-numeric: tabular-nums;
}

.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent-2);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-2) 25%, transparent);
}

/* Résumé page: reads on screen, prints to one clean page */
.resume {
	max-width: 48rem;
	padding-top: var(--space-6);
	padding-bottom: var(--space-9);
}

.resume-head h1 { font-size: var(--step-3); }

.resume-head p {
	margin-top: var(--space-2);
	color: var(--muted);
	max-width: none;
}

.resume section {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
}

.resume p { max-width: none; }

.resume h2 { font-size: var(--step-1); margin-bottom: var(--space-3); }

.resume h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; }

.resume-role + .resume-role { margin-top: var(--space-5); }

.resume .resume-dates { color: var(--muted); font-size: var(--step--1); }

.resume ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }

.resume li + li { margin-top: var(--space-1); }

.resume-skills { margin: 0; }
.resume-skills > div + div { margin-top: var(--space-2); }
.resume-skills dt { font-weight: 500; }
.resume-skills dd { margin: 0; color: var(--muted); }

.resume-print { padding: var(--space-2) var(--space-4); }

@media print {
	@page { margin: 14mm 16mm; }

	:root, :root[data-theme="dark"] {
		--bg: #fff;
		--ink: #111;
		--muted: #444;
		--line: #ccc;
		--accent: #111;
	}

	body { font-size: 10pt; line-height: 1.4; }

	.site-header, .site-footer, .skip-link { display: none; }

	.resume { max-width: none; padding: 0; }
	.resume-head h1 { font-size: 20pt; }
	.resume section { margin-top: 10pt; padding-top: 8pt; }
	.resume h2 { font-size: 12pt; margin-bottom: 4pt; }
	.resume a { color: inherit; text-decoration: none; }
	.resume-role { break-inside: avoid; }
}

/* Working with me page */
.guide {
	max-width: 44rem;
	padding-top: var(--space-6);
	padding-bottom: var(--space-9);
}

.guide-head h1 { font-size: clamp(2.5rem, 9vw, var(--step-4)); }

.guide-head p {
	margin-top: var(--space-4);
	color: var(--muted);
	font-size: var(--step-1);
	line-height: 1.45;
}

.guide section {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
}

.guide h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }

.guide ul { margin: 0; padding-left: 1.2em; max-width: var(--measure); }

.guide li + li { margin-top: var(--space-2); }

.guide .hero-actions { margin-top: var(--space-8); }

/* "Try it yourself": tabbed demos */
.lab { padding-bottom: var(--space-9); }

.lab-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.lab-tab {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	cursor: pointer;
}

.lab-tab:hover { color: var(--ink); }

.lab-tab[aria-selected="true"] {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
}

.lab-intro { margin-top: var(--space-5); }

/* Failover demo (driven by failover.js) */
.failover-demo {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.fo-label {
	margin-bottom: var(--space-2);
	color: var(--muted);
	font-size: var(--step--1);
}

.fo-nodes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--space-3);
}

.fo-node {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0 var(--space-2);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.fo-node:hover { border-color: var(--muted); }

.fo-dot {
	grid-row: span 2;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent-2);
}

.fo-name { font-weight: 500; font-variant-numeric: tabular-nums; }

.fo-state { color: var(--muted); font-size: var(--step--1); }

.fo-node.is-hit .fo-dot { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-2) 35%, transparent); }

.fo-node.is-failing { border-color: oklch(62% 0.16 30); }
.fo-node.is-failing .fo-dot { background: oklch(62% 0.16 30); }

.fo-node.is-out,
.fo-node.is-restarting { cursor: default; }
.fo-node.is-out .fo-dot { background: var(--muted); }
.fo-node.is-restarting .fo-dot { background: oklch(75% 0.12 85); }

.fo-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: 0;
}

.fo-stats dt { color: var(--muted); font-size: var(--step--1); }

.fo-stats dd {
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--step-1);
	font-variant-numeric: tabular-nums;
}

.fo-log {
	margin: 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--step--1);
	list-style: none;
}

.fo-log li:first-child { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
	.fo-dot { transition: box-shadow 0.12s ease, background-color 0.2s ease; }
}

/* Query tuning demo (driven by query.js) */
.qp {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.qp-columns,
.qp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.qp-brief,
.qp-builder {
	display: grid;
	gap: var(--space-3);
}

.qp-facts {
	margin: 0;
	padding-left: 1.2em;
	color: var(--muted);
	font-size: var(--step--1);
}

.qp-facts code,
.qp-step { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.qp-step:disabled { opacity: 0.4; cursor: default; }

.qp-note.is-pass { color: var(--accent-2); }
.qp-note.is-fail { color: oklch(68% 0.15 30); }

.qp-step {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--muted);
	font: inherit;
	font-size: var(--step--1);
	cursor: pointer;
}

.qp-step:hover { color: var(--ink); }
.qp-step[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); }

.qp-code {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	overflow-x: auto;
	border-radius: var(--radius);
	background: var(--bg);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--step--1);
	line-height: 1.5;
}

.qp-plan { color: var(--muted); }

.qp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin: 0;
}

.qp-stats dt { color: var(--muted); font-size: var(--step--1); }

.qp-stats dd {
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--step-1);
	font-variant-numeric: tabular-nums;
}

.qp-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--line);
	overflow: hidden;
}

.qp-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.qp-label { color: var(--muted); font-size: var(--step--1); }

@media (prefers-reduced-motion: no-preference) {
	.qp-bar span { transition: width 0.6s ease; }
}

/* Migration demo (driven by migration.js); reuses the failover stats styles */
.mg {
	display: grid;
	gap: var(--space-4);
	justify-items: start;
	margin-top: var(--space-5);
	padding: var(--space-5);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

.mg-progress {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mg-progress li {
	width: 2rem;
	height: 4px;
	border-radius: 999px;
	background: var(--line);
}

.mg-progress .is-good { background: var(--accent-2); }
.mg-progress .is-bad { background: oklch(62% 0.16 30); }
.mg-progress .is-ok { background: oklch(75% 0.12 85); }

.mg-count { color: var(--muted); font-size: var(--step--1); }

.mg-question { font-size: var(--step-1); }

.mg-context { color: var(--muted); }

.mg-options {
	display: grid;
	gap: var(--space-2);
	width: 100%;
}

.mg-option {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mg-option:hover:not(:disabled) { border-color: var(--muted); }
.mg-option:disabled { cursor: default; opacity: 0.55; }
.mg-option[aria-pressed="true"] { opacity: 1; border-color: var(--accent); }

.mg-outcome:empty { display: none; }
.mg-outcome { padding-left: var(--space-4); border-left: 2px solid var(--line); }
.mg-outcome.is-good { border-color: var(--accent-2); }
.mg-outcome.is-ok { border-color: oklch(75% 0.12 85); }
.mg-outcome.is-bad { border-color: oklch(62% 0.16 30); }

/* Command palette (driven by palette.js): ⌘K or Ctrl+K */
.palette-open {
	display: none;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: var(--step--1);
	cursor: pointer;
}

.palette-open:hover { color: var(--ink); }
.palette-open kbd { font-family: inherit; }

@media (min-width: 48rem) {
	.palette-open:not([hidden]) { display: block; }
}

.palette {
	width: min(32rem, calc(100% - 2 * var(--gutter)));
	margin: 15vh auto auto;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	box-shadow: 0 20px 50px rgb(0 0 0 / 0.25);
}

.palette::backdrop {
	background: color-mix(in oklab, var(--ink) 30%, transparent);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.palette-input {
	width: 100%;
	padding: var(--space-4) var(--space-5);
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	font: inherit;
}

.palette-input:focus-visible { outline: none; }

.palette-list {
	max-height: 50vh;
	margin: 0;
	padding: var(--space-2);
	overflow-y: auto;
	list-style: none;
}

.palette-list li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) var(--space-3);
	border-radius: 6px;
	cursor: pointer;
}

.palette-list li span:last-child { color: var(--muted); font-size: var(--step--1); }

.palette-list [aria-selected="true"] { background: var(--surface); }

.palette-list .palette-empty { color: var(--muted); cursor: default; }

.palette-hint {
	padding: var(--space-2) var(--space-5);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--step--1);
	max-width: none;
}