:root {
	--color-bg: #ffffff;
	--color-surface: #f4f3ee;
	--color-text: #2c2c2a;
	--color-text-muted: #5f5e5a;
	--color-accent: #085041;
	--color-accent-light: #5dcaa5;
	--color-border: #d3d1c7;
	--radius: 8px;
	--font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
	--content-width: 760px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.6;
}

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--color-border);
}

.site-logo {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-accent);
	text-decoration: none;
}

.site-nav a {
	margin-left: 1rem;
	color: var(--color-text);
	text-decoration: none;
}

.layout {
	display: flex;
	gap: 2rem;
	max-width: 1000px;
	margin: 0 auto;
	padding: 1.5rem;
}

.site-main { flex: 1; min-width: 0; }
.sidebar { width: 260px; flex-shrink: 0; }

@media (max-width: 720px) {
	.layout { flex-direction: column; }
	.sidebar { width: 100%; order: 2; }
	.site-main { order: 1; }
}

.sidebar-block {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9rem;
}
.sidebar-block:last-child { border-bottom: none; }
.sidebar-block h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.sidebar-block p:first-child { margin-top: 0; }
.sidebar-block a { color: var(--color-accent); }

.search-form { display: flex; gap: 0.5rem; }
.search-form input[type="search"] {
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font: inherit;
}
.search-form-nav { display: inline-flex; margin-left: 1rem; }
.search-form-nav input { width: 10rem; }
.search-form button { display: none; } /* nav search box submits on Enter; the standalone search page shows the button */
.site-main > .search-form button { display: inline-block; }

.pick-list { list-style: none; padding: 0; margin: 0; }

.pick-card {
	border-bottom: 1px solid var(--color-border);
	padding: 1.25rem 0;
}

.pick-card a { color: inherit; text-decoration: none; }
.pick-card h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.pick-card p { margin: 0; color: var(--color-text-muted); }
.pick-comment-count { display: inline-block; margin-top: 0.4rem; font-size: 0.82rem; color: var(--color-text-muted); }

.login, .post { max-width: var(--content-width); margin: 2rem auto; padding: 0 1.5rem; }

form label { display: block; margin-bottom: 0.75rem; }
form input[type="text"], form input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	margin-top: 0.25rem;
}
form .checkbox input { width: auto; margin-right: 0.4rem; }

button {
	background: var(--color-accent);
	color: white;
	border: none;
	border-radius: var(--radius);
	padding: 0.6rem 1.2rem;
	cursor: pointer;
}

.error { color: #a32d2d; }

.post-links { display: flex; gap: 1rem; margin: 1.5rem 0; }
.comments-note { color: var(--color-text-muted); font-size: 0.9rem; background: var(--color-surface); padding: 0.6rem 0.9rem; border-radius: var(--radius); }
.comment-list { list-style: none; padding-left: 0; margin: 0; }
.comment-children { padding-left: 1.25rem; border-left: 2px solid var(--color-border); margin-top: 0.75rem; }
.comment { margin-bottom: 1rem; }
.comment-meta { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.comment-score { margin-left: 0.4rem; }
.comment-body { white-space: pre-wrap; }

.site-footer {
	text-align: center;
	padding: 2rem;
	color: var(--color-text-muted);
	font-size: 0.85rem;
}