/* ==========================================================================
   Nav Context — Two-tier family/group selector in sidebar
   ========================================================================== */

.nav-context {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-xs);
	padding: var(--sc-space-sm) var(--sc-space-md);
}

/* ── Tier (family or group) ─────────────────────────────────────────────── */

.nav-context-tier {
	position: relative;
}

/* ── Static label (single item, not a dropdown) ─────────────────────────── */

.nav-context-label {
	display: block;
	padding: var(--sc-space-xs) 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-context-label--family {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-base);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-text-primary);
	letter-spacing: var(--sc-tracking-tight);
}

.nav-context-label--group {
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-secondary);
}

/* ── Trigger button (multiple items, acts as dropdown) ──────────────────── */

.nav-context-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--sc-space-xs) var(--sc-space-sm);
	background: transparent;
	border: var(--sc-border-width) solid transparent;
	border-radius: var(--sc-radius-sm);
	cursor: pointer;
	text-align: left;
	transition: background-color var(--sc-transition-fast) var(--sc-ease-default),
		border-color var(--sc-transition-fast) var(--sc-ease-default);
}

.nav-context-trigger:hover {
	background-color: var(--sc-accent-subtle);
	border-color: var(--sc-border-subtle);
}

.nav-context-trigger:focus-visible {
	outline: none;
	box-shadow: var(--sc-focus-ring);
}

.nav-context-trigger--family {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-base);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-text-primary);
	letter-spacing: var(--sc-tracking-tight);
}

.nav-context-trigger--group {
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-secondary);
}

.nav-context-chevron {
	font-size: var(--sc-text-xs);
	color: var(--sc-text-tertiary);
	flex-shrink: 0;
	transition: transform var(--sc-transition-fast) var(--sc-ease-default);
}

.nav-context-chevron--open {
	transform: rotate(180deg);
}

/* ── Dropdown overlay + menu ────────────────────────────────────────────── */

.nav-context-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--sc-z-dropdown);
}

.nav-context-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: var(--sc-space-xs);
	background: var(--sc-surface);
	border: var(--sc-border-width) solid var(--sc-border);
	border-radius: var(--sc-radius-md);
	box-shadow: var(--sc-shadow-md);
	z-index: calc(var(--sc-z-dropdown) + 1);
	overflow: hidden;
	max-height: 280px;
	overflow-y: auto;
}

/* ── Dropdown item ──────────────────────────────────────────────────────── */

.nav-context-item {
	display: block;
	padding: var(--sc-space-sm) var(--sc-space-md);
	text-decoration: none;
	color: var(--sc-text-primary);
	font-size: var(--sc-text-sm);
	cursor: pointer;
	transition: background-color var(--sc-transition-fast) var(--sc-ease-default);
}

.nav-context-item:hover,
.nav-context-item:focus-visible {
	background-color: var(--sc-accent-subtle);
}

.nav-context-item--active {
	background-color: var(--sc-accent-subtle);
	font-weight: var(--sc-weight-semibold);
}

.nav-context-item-meta {
	font-size: var(--sc-text-xs);
	color: var(--sc-text-tertiary);
	margin-top: 1px;
}

/* ── Separator between family and group tiers ───────────────────────────── */

.nav-context-separator {
	height: 0;
	border: none;
	border-top: var(--sc-border-width) solid var(--sc-border-subtle);
	margin: var(--sc-space-xs) var(--sc-space-sm);
}