/* ==========================================================================
   Navigation — Nav icons, badges, breadcrumbs

   Core layout for sidebar and bottom nav is in layout.css.
   This file adds shared item-level patterns.
   ========================================================================== */

/* ── Nav icon (shared between sidebar and bottom nav) ────────────────────── */

.nav-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	display: block;
}

/* ── Nav badge (e.g. Story Queue count) ──────────────────────────────────── */

.nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 var(--sc-space-xs);
	font-size: 0.625rem;
	font-weight: var(--sc-weight-bold);
	color: var(--sc-text-inverse);
	background-color: var(--sc-accent);
	border-radius: var(--sc-radius-full);
	margin-left: auto;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	font-size: var(--sc-text-sm);
	color: var(--sc-text-tertiary);
}

.breadcrumbs a {
	color: var(--sc-text-secondary);
	text-decoration: none;
	transition: color var(--sc-transition-fast) var(--sc-ease-default);
}

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

.breadcrumbs-separator {
	color: var(--sc-border);
}