/* ===== Nav rail — icon-only pill clusters with a shared hover label =====
   Replaces the labelled sidebar. Every colour is a theme token (dark and light
   pick their own accent); the one loud element is the active circle.
   Icons are Phosphor (regular at rest, filled when active) from
   /img/phosphor-rail.svg. The tooltip is warm-tooltip.js. */
.sidebar {
	flex: none;
	width: 54px; /* 40px button + 6px pill padding + 1px border, each side */
	margin: 0 18px 0 10px; /* right margin is the gap to the top bar and content */
	padding: 0 0 12px;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	z-index: 50;
}
.rail-brand {
	/* Same height as the top bar, so the mark sits on the search bar's centre line. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: var(--topbar-h, 80px);
	margin-bottom: 0;
}
.rail-brand .brand-mark {
	display: block;
	width: 26px;
	height: 26px;
}
.sb-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	min-height: 0;
}
.sb-bottom {
	margin-top: auto;
}
.rail-pill {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: var(--cardcolor);
	border: 1px solid var(--border);
}
html[data-theme="light"] .rail-pill {
	box-shadow: var(--shadow-sm);
}
.rail .nav-btn,
.rail-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--muted);
	cursor: pointer;
	transition:
		background 0.14s,
		color 0.14s,
		box-shadow 0.14s;
	-webkit-tap-highlight-color: transparent;
}
.rail .nav-btn:hover,
.rail-btn:hover {
	background: var(--hover);
	color: var(--txt);
}
.rail .nav-btn.active {
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: 0 0 0 4px var(--accent-dim);
}
.rail .nav-btn:focus-visible,
.rail-btn:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.rail .nav-ic {
	flex: none;
	width: 21px;
	height: 21px;
	fill: currentColor;
}
/* Phosphor ships two weights; the active circle swaps regular for filled. */
.rail .nav-btn.active .ic-reg,
.rail .nav-btn:not(.active) .ic-fill {
	display: none;
}
/* Labels stay for screen readers and feed the tooltip. */
.rail .nav-lbl {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.rail .sb-logout:hover {
	color: var(--down);
}
/* Unread activity: a dot on the icon's shoulder (the label is visually hidden). */
#nav-activity.has-updates::after {
	content: "";
	position: absolute;
	top: 9px;
	right: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 2px var(--cardcolor);
}
#nav-activity.has-updates.active::after {
	background: var(--on-accent);
	box-shadow: 0 0 0 2px var(--accent);
}
@media (max-width: 860px) {
	/* Phones: the rail is a drawer the top-bar menu button slides in. */
	.sidebar {
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		padding: 14px 8px;
		width: 70px;
		background: var(--bg);
		border-right: 1px solid var(--border);
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		z-index: 60;
	}
	.sidebar.open {
		transform: translateX(0);
		box-shadow: var(--shadow);
	}
}

/* ===== Warm tooltip (one shared label; see warm-tooltip.js) ===== */
.wt {
	--wt-surface: var(--txt);
	--wt-ink: var(--bg);
	--wt-arrow: 50%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	font-family: var(--ui);
}
.wt.is-open {
	opacity: 1;
	visibility: visible;
}
.wt[data-mode="move"] {
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wt-box {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--wt-surface);
	color: var(--wt-ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.12),
		0 8px 24px -8px rgba(0, 0, 0, 0.45);
	transform-origin: left center;
}
.wt-text {
	display: inline-block;
}
.wt.is-open[data-mode="cold"] .wt-box {
	animation: wt-pop 0.16s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.wt.is-closing .wt-box {
	animation: wt-out 0.128s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.wt-text.wt-swap {
	animation: wt-swap 0.14s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.wt-arrow {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wt-surface);
	transform: rotate(45deg);
}
.wt[data-side="right"] .wt-arrow {
	left: -3px;
	top: var(--wt-arrow);
	margin-top: -4px;
}
.wt[data-side="left"] .wt-arrow {
	right: -3px;
	top: var(--wt-arrow);
	margin-top: -4px;
}
.wt[data-side="top"] .wt-arrow {
	bottom: -3px;
	left: var(--wt-arrow);
	margin-left: -4px;
}
.wt[data-side="bottom"] .wt-arrow {
	top: -3px;
	left: var(--wt-arrow);
	margin-left: -4px;
}
@keyframes wt-pop {
	from {
		opacity: 0;
		transform: translateX(-4px) scale(0.94);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}
@keyframes wt-out {
	to {
		opacity: 0;
		transform: translateX(-3px) scale(0.96);
		filter: blur(3px);
	}
}
@keyframes wt-swap {
	from {
		opacity: 0;
		transform: translateY(3px);
		filter: blur(2px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sidebar,
	.wt {
		transition: none;
	}
	.wt-box,
	.wt-text {
		animation: none;
	}
}

/* Predictions (injected by predictions.js) draws its bullseye with strokes; keep
   the generic fill: currentColor from turning it into a solid disc. */
#vpred-nav .nav-ic {
	fill: none;
}
#vpred-nav .nav-ic [fill="currentColor"] {
	fill: currentColor;
}