:root {
	color-scheme: light dark;
	--bg: #f6f4f0;
	--surface: #ffffff;
	--ink: #1d2321;
	--muted: #5d6764;
	--line: #dcd8d1;
	--accent: #146b3a;
	--accent-ink: #ffffff;
	--danger: #a4243b;
	--highlight: #eef6f0;
	--radius: 12px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14181a;
		--surface: #1d2326;
		--ink: #e9e7e2;
		--muted: #9aa5a2;
		--line: #2f383b;
		--accent: #3fa268;
		--accent-ink: #0d1211;
		--danger: #e06c7d;
		--highlight: #1a2a21;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
	max-width: 46rem;
	margin: 0 auto;
	padding: 1.5rem 1rem 3rem;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: var(--accent);
	color: var(--accent-ink);
}

.topbar a { color: inherit; text-decoration: none; }
.brand { font-weight: 700; letter-spacing: 0.02em; }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav form { margin: 0; }

h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem;
	margin: 1rem 0;
}

.card.highlight { border-color: var(--accent); background: var(--highlight); }

.muted { color: var(--muted); font-size: 0.9rem; }
.empty { color: var(--muted); font-style: italic; }
.count { color: var(--muted); font-weight: 400; }

.banner { border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0 0 0.75rem; }
.banner.error { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.banner.ok { background: color-mix(in srgb, var(--accent) 15%, transparent); }

.tag {
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
	font-size: 0.75rem;
	white-space: nowrap;
}

ul { list-style: none; margin: 0; padding: 0; }
ol.steps { margin: 0.5rem 0 0.75rem 1.1rem; padding: 0; }

.people > li, .wishes > li, .events > li, .links > li {
	border-top: 1px solid var(--line);
	padding: 0.7rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.people > li:first-child, .wishes > li:first-child,
.events > li:first-child, .links > li:first-child { border-top: none; }

.people > li { flex-direction: column; align-items: stretch; }
.person { display: flex; gap: 0.6rem; align-items: baseline; }
.giftee { color: var(--muted); font-size: 0.9rem; }

.invite { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.invite-url {
	flex: 1 1 16rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8rem;
}

.note { color: var(--muted); font-size: 0.9rem; margin: 0.15rem 0 0; }

a { color: var(--accent); }

input, textarea, button {
	font: inherit;
	border-radius: 8px;
	border: 1px solid var(--line);
	padding: 0.5rem 0.65rem;
	background: var(--surface);
	color: var(--ink);
}

textarea { width: 100%; resize: vertical; }

button { cursor: pointer; background: var(--surface); }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
button.linkish {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	text-decoration: underline;
}

form { margin: 0.75rem 0 0; }
form.row { display: flex; gap: 0.5rem; }
form.row input { flex: 1; }

form.create, form.login, form.wish-form { display: flex; flex-direction: column; gap: 0.5rem; }
form.create label, form.login label { font-size: 0.9rem; color: var(--muted); }
form.create button, form.login button, form.wish-form button { align-self: flex-start; }

.footer {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1rem 2rem;
	color: var(--muted);
	font-size: 0.85rem;
}

.htmx-request { opacity: 0.6; }