/* Tokens */
:root {
	/* warm neutral palette */
	--bg: #faf8f4;
	--surface: #ffffff;
	--surface-alt: #f3efe7;
	--border: #e4ddd0;
	--border-strong: #d3c9b6;
	--text: #1d1b16;
	--text-muted: #6b6557;
	--text-faint: #8c8676;

	/* single accent, plus a star yellow and error red */
	--accent: oklch(52% 0.13 250); /* link/button */
	--accent-hover: oklch(44% 0.14 250);
	--accent-soft: oklch(95% 0.03 250);
	--star: #d99814;
	--danger: #c11d1d;
	--danger-soft: #fbe9e7;

	/* shape */
	--radius: 10px;
	--radius-sm: 6px;
	--shadow-sm: 0 1px 2px rgba(29, 27, 22, 0.04), 0 1px 1px rgba(29, 27, 22, 0.03);
	--shadow: 0 1px 2px rgba(29, 27, 22, 0.05), 0 4px 14px rgba(29, 27, 22, 0.06);

	/* spacing scale */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
}

/* Reset  */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
}
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
fieldset,
blockquote {
	margin: 0;
}
ul,
ol {
	padding-left: 1.25rem;
}
img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}
button {
	font: inherit;
	cursor: pointer;
}
input,
textarea,
select,
button {
	font: inherit;
	color: inherit;
}
fieldset {
	border: 0;
	padding: 0;
}
legend {
	padding: 0;
}

/* Page */
html,
body {
	height: 100%;
}
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

main {
	max-width: 980px;
	margin: 0 auto;
	padding: var(--s-6) var(--s-5) var(--s-7);
}

/* Typography */
h1 {
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
h2 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.25;
}
h3 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}
main > h1 {
	margin-bottom: var(--s-5);
}
main > h1 + p {
	color: var(--text-muted);
	margin-top: calc(-1 * var(--s-3));
	margin-bottom: var(--s-5);
}

p {
	text-wrap: pretty;
}
p + p {
	margin-top: var(--s-3);
}

code,
kbd,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--surface-alt);
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

small {
	color: var(--text-muted);
}
sub {
	vertical-align: baseline;
} /* used by byline; not a real sub */

a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in oklab, var(--accent), transparent 60%);
}
a:hover {
	color: var(--accent-hover);
	text-decoration-color: currentColor;
}
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Header / nav */
body > header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}
body > header nav {
	max-width: 980px;
	margin: 0 auto;
	padding: var(--s-3) var(--s-5);
}
body > header ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}
body > header li:first-child a {
	font-weight: 700;
	letter-spacing: -0.01em;
}
body > header a {
	display: inline-block;
	padding: var(--s-2) var(--s-3);
	color: var(--text);
	text-decoration: none;
	border-radius: var(--radius-sm);
}
body > header a:hover {
	background: var(--surface-alt);
}
body > header li:last-child {
	margin-left: auto;
}
body > header form {
	margin: 0;
	padding: 0;
}
body > header form button {
	background: transparent;
	border: 1px solid var(--border-strong);
	color: var(--text);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--radius-sm);
}
body > header form button:hover {
	background: var(--surface-alt);
}

/* Footer */
body > footer {
	border-top: 1px solid var(--border);
	margin-top: var(--s-7);
	padding: var(--s-4) var(--s-5);
	color: var(--text-faint);
	font-size: 0.875rem;
	text-align: center;
}

/* Buttons */
button,
input[type="submit"] {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	padding: var(--s-2) var(--s-4);
	border-radius: var(--radius-sm);
	font-weight: 600;
	line-height: 1.2;
	transition:
		background-color 0.12s ease,
		border-color 0.12s ease;
}
button:hover,
input[type="submit"]:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}
button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* secondary - buttons inside the header nav already handled above */
form button[type="button"] {
	background: var(--surface);
	color: var(--text);
	border-color: var(--border-strong);
}
form button[type="button"]:hover {
	background: var(--surface-alt);
}

/* Forms */
/* Only page-level forms become flex columns - the header's logout form
   and other inline POST stubs stay inline so the button doesn't stretch. */
main form,
body.standalone form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	max-width: 640px;
}
form.review-form,
form.game-form,
form.user-form,
form.genre-form {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--s-5);
	box-shadow: var(--shadow-sm);
}

form label {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	font-weight: 600;
	font-size: 0.9375rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
	width: 100%;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-weight: 400;
	transition:
		border-color 0.12s ease,
		box-shadow 0.12s ease;
}
textarea {
	resize: vertical;
	min-height: 6em;
	line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}

input[type="file"] {
	padding: var(--s-2) 0;
	border: 0;
	background: transparent;
}
input[type="checkbox"],
input[type="radio"] {
	width: auto;
	accent-color: var(--accent);
	margin-right: var(--s-2);
}

/* checkbox labels inside fieldsets shouldn't stack vertically */
fieldset label:has(> input[type="checkbox"]),
fieldset label:has(> input[type="radio"]) {
	flex-direction: row;
	align-items: center;
	font-weight: 500;
}

fieldset {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--s-3) var(--s-4) var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
legend {
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	padding: 0 var(--s-2);
}

/* image upload rows in the review form */
.image-row {
	background: var(--surface);
}
.image-thumb {
	max-width: 8rem;
	height: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
}
.image-row button[type="button"] {
	align-self: flex-start;
}

/* Errors */
.form-error,
.error {
	color: var(--danger);
	background: var(--danger-soft);
	border: 1px solid color-mix(in oklab, var(--danger), white 70%);
	border-left: 4px solid var(--danger);
	border-radius: var(--radius-sm);
	padding: var(--s-3) var(--s-4);
	font-weight: 700;
	margin: 0 0 var(--s-4) 0;
}

/* the bare login error <p> is unclassed - target by position */
form + p:not(.form-error) {
	color: var(--text-muted);
}

/* Admin lists */
.admin-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.admin-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--border);
}
.admin-list li:last-child {
	border-bottom: 0;
}
.admin-list li strong {
	font-size: 1.0625rem;
}
.admin-list li small {
	color: var(--text-faint);
	font-size: 0.875rem;
}
.admin-list li a {
	margin-left: auto;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background: var(--surface-alt);
	color: var(--accent);
	font-size: 0.875rem;
	font-weight: 600;
}
.admin-list li a + a {
	margin-left: 0;
}
.admin-list li a:hover {
	background: var(--accent-soft);
}

/* Login / hash / 404 standalone pages */
body.standalone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--s-5);
}
body.standalone main,
body.standalone > form,
body.standalone > h1 + form,
body.standalone {
	text-align: left;
}