/* ==========================================================================
   Top bar — styled as a terminal window title bar.
   ========================================================================== */

.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.topbar__body {
	padding: var(--space-12) var(--space-16);
}

.topbar__brand {
	color: var(--color-text);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-md);
	letter-spacing: 0.04em;
}

.topbar__brand:hover {
	color: var(--color-accent);
}

.topbar__mascot {
	margin-right: var(--space-8);
}

.topbar__nav {
	gap: var(--space-16);
}

.topbar__nav a {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.topbar__nav a:hover {
	color: var(--color-accent);
}

.topbar__version {
	padding: 2px var(--space-8);
	background-color: rgba(227, 179, 65, 0.12);
	border: var(--border-default);
	border-radius: var(--radius-sm);
	color: var(--color-accent-warm);
	font-size: var(--font-size-xs);
}

@media (max-width: 640px) {
	.topbar__nav {
		gap: var(--space-12);
	}

	.topbar__nav .topbar__version {
		display: none;
	}
}

/* --- language switcher --- */
.lang-switcher {
	gap: var(--space-4);
	margin-left: var(--space-8);
}

.lang-switcher button {
	padding: 2px var(--space-8);
	border: var(--border-default);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	letter-spacing: 0.04em;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.lang-switcher button:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.lang-switcher button.is-active {
	color: var(--color-accent);
	border-color: var(--color-accent);
}