:root {
	--palette-almost-white: #F5F5F5;
	--palette-grey-orange: #D0CCC6;
	--palette-charcoal: #313131;
	--palette-tinted-charcoal: #C9C9C9;
	--palette-dragon: #B8521C;
	--palette-tinted-dragon: #E8DDD5;
	--palette-peach: #E8C0A0;
	--palette-tinted-peach: #F8F2EC;
	--palette-dark-orange: #6B2E0F;
	--palette-tinted-dark-orange: #E0DCD8;
	--font-size-regular: 16px;
	--font-weight-regular: 400;
	--font-text-spacing-regular: -2%;
	--link-color: var(--palette-dragon);
	--link-color-dark: var(--palette-peach);
	--text-color: var(--palette-charcoal);
	--muted-text-color: var(--palette-charcoal);
	--background-color: var(--palette-almost-white);
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-size: var(--font-size-regular);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--font-text-spacing-regular);
	line-height: 1.4;
	text-rendering: optimizeLegibility;
	font-family: 'JetBrains Mono', monospace;
}

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

ul,
ol {
	margin: 0;
	margin-left: 20px;
	padding: 0;
	list-style-position: outside;
}

footer {
	border-top: 1px solid var(--text-color);
}

hr {
	border: none;
	background-color: var(--text-color);
	color: var(--text-color);
	height: 1px;
}

figure {
	margin: 0;
	padding: 0;
}

figure img {
	max-width: 100%;
}

nav {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#nav-items {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
}

.nav-left,
.nav-right {
	display: flex;
	align-items: baseline;
	gap: 0;
}

.container {
	max-width: 600px;
	margin-top: 50px;
	margin-bottom: 50px;
	margin-left: 20px;
	margin-right: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* chat — log-style, no boxes, no bold, single line per message */
.chat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.chat-status {
	font-size: 14px;
	color: var(--muted-text-color);
	opacity: 0.7;
}

.chat-identity {
	font-size: 14px;
	color: var(--muted-text-color);
	opacity: 0.7;
}

.chat-messages {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 400px;
	overflow-y: auto;
	padding: 0;
}

.chat-empty {
	margin: 0;
	opacity: 0.5;
	font-style: italic;
}

.chat-msg {
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-size: 14px;
	line-height: 1.5;
}

.chat-meta {
	color: var(--muted-text-color);
	opacity: 0.5;
	margin-right: 6px;
}

.chat-user {
	margin-right: 6px;
}

.chat-user::after {
	content: ":";
	opacity: 0.5;
}

.chat-msg.is-anon .chat-user {
	opacity: 0.5;
}

.chat-text {
	white-space: pre-wrap;
}

/* anon messages: text masked with **** until hover or click */
.chat-msg.is-anon .chat-text {
	cursor: pointer;
}

.chat-msg.is-anon .chat-text .chat-mask {
	display: inline;
}

.chat-msg.is-anon .chat-text .chat-real {
	display: none;
}

.chat-msg.is-anon .chat-text:hover .chat-mask,
.chat-msg.is-anon.revealed .chat-text .chat-mask {
	display: none;
}

.chat-msg.is-anon .chat-text:hover .chat-real,
.chat-msg.is-anon.revealed .chat-text .chat-real {
	display: inline;
}

.chat-form {
	display: flex;
	gap: 10px;
	align-items: stretch;
	margin-top: 10px;
}

.chat-input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	color: var(--text-color);
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--text-color);
	padding: 4px 0;
	letter-spacing: var(--font-text-spacing-regular);
}

.chat-input:focus {
	outline: none;
	border-bottom-color: var(--link-color-dark);
}

.chat-form button {
	flex: 0 0 auto;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	color: var(--link-color);
	background-color: transparent;
	border: none;
	padding: 4px 0;
	cursor: pointer;
	letter-spacing: var(--font-text-spacing-regular);
}

.chat-form button:hover {
	text-decoration: underline;
}

.chat-form button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.chat-form button:disabled:hover {
	text-decoration: none;
}

/* auth pages (login/register) */
.auth-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 320px;
}

.auth-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	color: var(--muted-text-color);
}

.auth-form input {
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--font-size-regular);
	color: var(--text-color);
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--text-color);
	padding: 4px 0;
	letter-spacing: var(--font-text-spacing-regular);
}

.auth-form input:focus {
	outline: none;
	border-bottom-color: var(--link-color-dark);
}

.auth-form button {
	align-self: flex-start;
	font-family: 'JetBrains Mono', monospace;
	font-size: var(--font-size-regular);
	color: var(--link-color);
	background-color: transparent;
	border: none;
	padding: 4px 0;
	cursor: pointer;
	letter-spacing: var(--font-text-spacing-regular);
}

.auth-form button:hover {
	text-decoration: underline;
}

.auth-message {
	font-size: 14px;
	min-height: 1.4em;
}

.auth-message.error {
	color: var(--palette-dragon);
}

.auth-hint {
	font-size: 14px;
	opacity: 0.7;
}

@media (min-width: 700px) {
	.container {
		margin-left: auto;
		margin-right: auto;
	}

	.links {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: var(--palette-tinted-peach);
		--muted-text-color: var(--palette-tinted-dark-orange);
		--background-color: var(--palette-charcoal);
	}

	a {
		color: var(--link-color-dark);
	}

	.chat-form button,
	.auth-form button {
		color: var(--link-color-dark);
	}

	.auth-message.error {
		color: var(--palette-peach);
	}
}