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

:root {
	--ink: #222;
	--muted: #6b6b6b;
	--paper: #faf7f2;
	--card: #fff;
	--line: #d9d3c8;
	--accent: #7a4a1f;
	--error: #a02020;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--paper);
}

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

/* The bar across the top (public/nav.js). min-height keeps the page from shifting when it fills in. */
#site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--line);
}
#site-nav .brand { font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.nav-right .who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Under the bar, e.g. "please confirm your email" (public/nav.js). */
.banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	padding: 0.6rem 1rem;
	background: #f3e6d3;
	border-bottom: 1px solid var(--line);
	text-align: center;
}
.banner button { padding: 0.35rem 0.75rem; }

main {
	flex: 1;
	display: grid;
	place-items: center;
	padding: 2rem 1rem;
}

.hero { text-align: center; align-content: center; }
.hero h1 { margin: 0 0 0.5rem; font-size: 3rem; }
.note { color: var(--muted); }

.account-form {
	width: 100%;
	max-width: 24rem;
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 0.5rem;
}
.account-form h1, .account-form p { margin: 0; }
.account-form label { display: grid; gap: 0.35rem; font-weight: 600; }
.account-form small { font-weight: 400; color: var(--muted); }
.account-form input {
	font: inherit;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 0.35rem;
	background: #fff;
}
.account-form [role=alert] { margin: 0; color: var(--error); }
.account-form [role=alert]:empty { display: none; }
.switch { margin: 0; color: var(--muted); }

button {
	font: inherit;
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: 0.35rem;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: wait; }
.nav-right button, .nav-right a { flex-shrink: 0; white-space: nowrap; }
.nav-right button { padding: 0.35rem 0.75rem; }