/* ThemeToggle component (views/layout.templ themeToggle).
   A bordered control — not a flush divider — so the mode switch is visible
   at a glance: glyph + target-mode label, accent on hover. */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.75rem; /* HIG touch target: >= 44pt */
	padding: 0 1rem;
	border: 1px solid var(--border);
	color: var(--fg);
	background: transparent;
	font: 700 .67rem/1 var(--font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.theme-toggle:hover {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--bg-subtle);
}

/* The ◐ glyph optically sits low next to small caps; lift it to match. */
.theme-toggle-icon {
	font-size: 1.05rem;
	line-height: 1;
	transform: translateY(-1px);
}

.theme-toggle-label {
	letter-spacing: .08em;
}