/* ==========================================================================
   Layout — Ghost Bar Navigation + App Shell

   Ghost Bar: frosted-glass sticky nav with viewport-centered button trio.
   Desktop: logo left | Library · Create · Profile centered | search + bell right
   Mobile: same top bar but trio moves to a fixed frosted bottom pill
   ========================================================================== */

/* ── Ghost Bar Shell ────────────────────────────────────────────────────── */

.ghost-bar {
	position: sticky;
	top: 0;
	z-index: var(--sc-z-sticky);
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--sc-nav-height);
	padding: 0 var(--sc-space-md);
	background: var(--sc-nav-bg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--sc-nav-border);
}

/* ── Logo / Library Switcher ────────────────────────────────────────────── */

.ghost-bar__logo-wrap {
	position: relative;
	flex-shrink: 0;
}

.ghost-bar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sc-radius-md);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: transform var(--sc-transition-fast) var(--sc-ease-out),
	            box-shadow var(--sc-transition-fast) var(--sc-ease-out);
}

.ghost-bar__logo:hover {
	transform: scale(1.04);
	box-shadow: var(--sc-shadow-sm);
}

.ghost-bar__logo:active {
	transform: scale(0.97);
}

.ghost-bar__logo img {
	width: 36px;
	height: 36px;
	border-radius: var(--sc-radius-sm);
	object-fit: contain;
}

/* ── Center Trio ────────────────────────────────────────────────────────── */

/* Centering wrapper — positions trio at 50% of the nav (full viewport width) */
.ghost-bar__center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

/* Trio — position:relative makes it the containing block for all panels.
   Panels attached here with left:50% center on the viewport-centered trio. */
.ghost-bar__trio {
	display: flex;
	align-items: center;
	gap: var(--sc-space-md);
	position: relative;
}

/* Button wrappers — must be position:static so panels skip them and attach
   to .ghost-bar__trio (position:relative) as the containing block. */
.ghost-bar__trio-wrap,
.ghost-bar__create-wrap {
	position: static;
}

/* Base button shared by all trio items */
.ghost-bar__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 0;
	background: var(--sc-surface);
	box-shadow: var(--sc-shadow-sm);
	border-radius: var(--sc-radius-full);
	transition: box-shadow var(--sc-transition-fast) var(--sc-ease-out),
	            transform var(--sc-transition-fast) var(--sc-ease-out);
}

.ghost-bar__btn:hover {
	box-shadow: var(--sc-shadow-md);
}

.ghost-bar__btn:active {
	transform: scale(0.95);
}

.ghost-bar__btn svg {
	width: 20px;
	height: 20px;
	color: var(--sc-text-secondary);
	transition: color var(--sc-transition-fast);
}

.ghost-bar__btn:hover svg {
	color: var(--sc-text-primary);
}

/* Library button — 42px circle */
.ghost-bar__btn--library {
	width: 42px;
	height: 42px;
}

/* Profile button — 42px circle */
.ghost-bar__btn--profile {
	width: 42px;
	height: 42px;
	overflow: hidden;
}

.ghost-bar__btn--profile .ghost-bar__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--sc-radius-lg);
}

.ghost-bar__btn--profile .ghost-bar__initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-text-inverse);
	border-radius: var(--sc-radius-lg);
}

/* Create button — 50px gradient circle */
.ghost-bar__btn--create {
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, var(--sc-rust-soft), var(--sc-accent), var(--sc-terracotta));
	box-shadow: 0 4px 12px rgba(193, 122, 58, 0.35);
}

.ghost-bar__btn--create svg {
	width: 22px;
	height: 22px;
	color: #fff;
	transition: transform var(--sc-transition-fast) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ghost-bar__btn--create:hover {
	box-shadow: 0 6px 18px rgba(193, 122, 58, 0.45);
	transform: scale(1.05);
}

.ghost-bar__btn--create.is-open svg {
	transform: rotate(45deg);
}

/* ── Right Actions ──────────────────────────────────────────────────────── */

.ghost-bar__actions {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	flex-shrink: 0;
}

.ghost-bar__action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--sc-radius-full);
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--sc-text-secondary);
	transition: background var(--sc-transition-fast), color var(--sc-transition-fast);
}

.ghost-bar__action-btn:hover {
	background: var(--sc-accent-subtle);
	color: var(--sc-text-primary);
}

.ghost-bar__action-btn svg {
	width: 20px;
	height: 20px;
}

/* Bell wrapper — holds bell button + badge */
.ghost-bar__bell-wrap {
	position: relative;
}

.ghost-bar__badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--sc-accent);
	color: #fff;
	font-family: var(--sc-font-ui);
	font-size: 10px;
	font-weight: var(--sc-weight-bold);
	line-height: 16px;
	text-align: center;
	border-radius: var(--sc-radius-full);
	pointer-events: none;
}

/* ── Panel Base ─────────────────────────────────────────────────────────── */

.ghost-bar__panel {
	position: absolute;
	top: calc(100% + 10px);
	background: var(--sc-nav-panel-bg);
	border: 1px solid var(--sc-border-subtle);
	border-radius: var(--sc-radius-xl);
	box-shadow: var(--sc-shadow-xl);
	z-index: var(--sc-z-dropdown);
	overflow: hidden;
	/* No animation here — each panel variant defines its own to preserve transform */
}

/* Centered panels: translateX(-50%) must be in the keyframe, otherwise
   animation fill-mode overwrites the centering transform after 150ms. */
@keyframes panelInCentered {
	from { opacity: 0; transform: translateX(-50%) scale(0.97) translateY(-4px); }
	to   { opacity: 1; transform: translateX(-50%) scale(1)    translateY(0); }
}

/* Left-anchored panels (switcher) don't translate X */
@keyframes panelInLeft {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel Sections & Items ─────────────────────────────────────────────── */

.ghost-bar__section {
	padding: var(--sc-space-xs) 0;
}

.ghost-bar__section + .ghost-bar__section {
	border-top: 1px solid var(--sc-border-subtle);
}

.ghost-bar__section-label {
	padding: var(--sc-space-xs) var(--sc-space-md) 4px;
	font-family: var(--sc-font-ui);
	font-size: 10px;
	font-weight: var(--sc-weight-semibold);
	letter-spacing: var(--sc-tracking-wide);
	text-transform: uppercase;
	color: var(--sc-text-tertiary);
}

.ghost-bar__item {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
	padding: 8px var(--sc-space-md);
	cursor: pointer;
	text-decoration: none;
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
	transition: background var(--sc-transition-fast);
}

.ghost-bar__item:hover {
	background: var(--sc-accent-subtle);
}

.ghost-bar__item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sc-radius-sm);
	flex-shrink: 0;
}

.ghost-bar__item-icon svg {
	width: 16px;
	height: 16px;
	color: #fff;
}

/* Icon color variants */
.ghost-bar__item-icon--rust    { background: var(--sc-rust); }
.ghost-bar__item-icon--sage    { background: var(--sc-sage); }
.ghost-bar__item-icon--bark    { background: var(--sc-bark); }
.ghost-bar__item-icon--moss    { background: var(--sc-moss); }
.ghost-bar__item-icon--accent  { background: var(--sc-accent); }
.ghost-bar__item-icon--slate   { background: var(--sc-slate); }
.ghost-bar__item-icon--plum    { background: var(--sc-plum); }
.ghost-bar__item-icon--lock    { background: var(--sc-bark-faint); }

.ghost-bar__item-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.ghost-bar__item-label {
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-primary);
	line-height: 1.3;
	white-space: nowrap;
}

.ghost-bar__item-sub {
	font-family: var(--sc-font-ui);
	font-size: 11px;
	color: var(--sc-text-tertiary);
	line-height: 1.3;
	white-space: nowrap;
}

.ghost-bar__item-check {
	margin-left: auto;
	color: var(--sc-accent);
	flex-shrink: 0;
}

.ghost-bar__item-check svg {
	width: 16px;
	height: 16px;
}

/* Disabled state */
.ghost-bar__item--disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Library Switcher Panel ─────────────────────────────────────────────── */

.ghost-bar__panel--switcher {
	left: 0;
	width: 280px;
	animation: panelInLeft var(--sc-transition-fast) var(--sc-ease-out) both;
}

/* ── Library Panel ──────────────────────────────────────────────────────── */

.ghost-bar__panel--library {
	left: 50%;
	/* No transform here — translateX(-50%) lives in panelInCentered keyframe */
	/* Personal + Family section labels — keep wider than single-column list */
	width: 260px;
	animation: panelInCentered var(--sc-transition-fast) var(--sc-ease-out) both;
}

/* ── Create Pill ────────────────────────────────────────────────────────── */

.ghost-bar__panel--create {
	left: 50%;
	/* No transform here — translateX(-50%) lives in panelInCentered keyframe */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-radius: var(--sc-radius-xl);
	padding: 0;
	overflow: hidden;
	/* Hug content; avoid a forced min-width that leaves empty space past the third action */
	width: fit-content;
	max-width: min(100vw - 32px, 400px);
	top: calc(100% + 10px);
	animation: panelInCentered var(--sc-transition-fast) var(--sc-ease-out) both;
}

/* Personal vs family — shown above Prompt / Memory / Character */
.ghost-bar__create-context {
	display: flex;
	justify-content: center;
	padding: 10px 12px 8px;
	background: linear-gradient(180deg, var(--sc-cream) 0%, var(--sc-nav-panel-bg) 100%);
	border-bottom: 1px solid var(--sc-border-subtle);
}

.ghost-bar__create-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 5px 12px;
	border-radius: 999px;
	font-family: var(--sc-font-ui);
	font-size: 10px;
	font-weight: var(--sc-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
}

.ghost-bar__create-pill-icon {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.ghost-bar__create-pill-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ghost-bar__create-pill--personal {
	background: rgba(107, 127, 94, 0.14);
	color: var(--sc-sage);
	border: 1px solid rgba(107, 127, 94, 0.28);
}

.ghost-bar__create-pill--family {
	background: rgba(184, 96, 63, 0.1);
	color: var(--sc-rust);
	border: 1px solid rgba(184, 96, 63, 0.22);
}

.ghost-bar__create-row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	padding: 0 0.75rem;
	box-sizing: border-box;
  gap: 8px;
}

.ghost-bar__create-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: var(--sc-space-md) var(--sc-space-xs);
	cursor: pointer;
	text-decoration: none;
	border: none;
	background: transparent;
	transition: background var(--sc-transition-fast);
	border-radius: var(--sc-radius-xl);
	white-space: nowrap;
}

.ghost-bar__create-item:hover {
	background: var(--sc-accent-subtle);
}

.ghost-bar__create-item--disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ghost-bar__create-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sc-radius-xl);
}

.ghost-bar__create-icon svg {
	width: 18px;
	height: 18px;
	color: #fff;
}

.ghost-bar__create-label {
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-2xs);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-primary);
}

.ghost-bar__create-divider {
	flex: 0 0 auto;
	width: 1px;
	align-self: stretch;
	background: var(--sc-border-subtle);
	margin: var(--sc-space-sm) 0;
}

/* "Select a family first" notice in create panel */
.ghost-bar__create-notice {
	padding: var(--sc-space-md) var(--sc-space-lg);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	color: var(--sc-text-tertiary);
	text-align: center;
	white-space: nowrap;
}

/* ── Profile Panel ──────────────────────────────────────────────────────── */

.ghost-bar__panel--profile {
	left: 50%;
	/* No transform here — translateX(-50%) lives in panelInCentered keyframe */
	width: 260px;
	animation: panelInCentered var(--sc-transition-fast) var(--sc-ease-out) both;
}

.ghost-bar__profile-header {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
	padding: var(--sc-space-md);
	border-bottom: 1px solid var(--sc-border-subtle);
}

.ghost-bar__profile-avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--sc-radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.ghost-bar__profile-initials {
	width: 40px;
	height: 40px;
	border-radius: var(--sc-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-text-inverse);
	flex-shrink: 0;
}

.ghost-bar__profile-info {
	min-width: 0;
}

.ghost-bar__profile-name {
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-semibold);
	color: var(--sc-text-primary);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ghost-bar__profile-email {
	font-family: var(--sc-font-ui);
	font-size: 11px;
	color: var(--sc-text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Logout footer item — section border comes from `.ghost-bar__section + .ghost-bar__section` */
.ghost-bar__item--logout {
	color: var(--sc-text-secondary);
}

.ghost-bar__item--logout:hover {
	background: var(--sc-error-subtle);
	color: var(--sc-error);
}

/* ── Notification Panel ─────────────────────────────────────────────────── */

.ghost-bar__notif-panel {
	position: fixed;
	top: var(--sc-nav-height);
	right: 0;
	width: min(380px, 100vw);
	height: calc(100dvh - var(--sc-nav-height));
	background: var(--sc-nav-panel-bg);
	border-left: 1px solid var(--sc-border-subtle);
	box-shadow: var(--sc-shadow-xl);
	z-index: var(--sc-z-dropdown);
	display: flex;
	flex-direction: column;
	animation: slideInRight var(--sc-transition-normal) var(--sc-ease-out) both;
}

@keyframes slideInRight {
	from { transform: translateX(100%); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

.ghost-bar__notif-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sc-space-md);
	border-bottom: 1px solid var(--sc-border-subtle);
	flex-shrink: 0;
}

.ghost-bar__notif-title {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-lg);
	color: var(--sc-text-primary);
}

.ghost-bar__notif-actions {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
}

.ghost-bar__notif-body {
	flex: 1;
	overflow-y: auto;
	padding: var(--sc-space-md);
}

.ghost-bar__notif-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sc-space-sm);
	height: 100%;
	color: var(--sc-text-tertiary);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	text-align: center;
}

/* ── Click-Away Overlay ─────────────────────────────────────────────────── */

.ghost-bar__overlay {
	position: fixed;
	inset: 0;
	/* Must be BELOW the nav's stacking context (z-sticky = 10) so panels inside nav remain clickable */
	z-index: calc(var(--sc-z-sticky) - 1);
	background: transparent;
}

/* ── Mobile Bottom Pill ─────────────────────────────────────────────────── */

.ghost-bar-mobile {
	display: none;
}

/* ── Page Shell ─────────────────────────────────────────────────────────── */

.app-main {
	min-height: calc(100dvh - var(--sc-nav-height));
}

@media (max-width: 1024px) {
	.app-main {
		padding-bottom: 80px;
	}
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ghost-bar__btn--library,
	.ghost-bar__btn--profile {
		width: 41px;
		height: 41px;
	}

	.ghost-bar__btn--create {
		width: 48px;
		height: 48px;
	}

  .ghost-bar__create-label {display: none;}

	/* Context pill stays visible so users know personal vs family when icons are unlabeled */
	.ghost-bar-mobile .ghost-bar__create-pill-text {
		font-size: 9px;
		letter-spacing: 0.04em;
	}

  /* Hide the desktop centered trio — mobile pill takes over */
	.ghost-bar__center {
		display: none;
	}

	.ghost-bar-mobile {
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: var(--sc-space-md);
		left: 50%;
		transform: translateX(-50%);
		z-index: var(--sc-z-sticky);
	}

	/* The pill acts as the trio containing block for mobile panels */
	.ghost-bar-mobile__pill {
		display: flex;
		align-items: center;
		gap: var(--sc-space-sm);
		padding: var(--sc-space-sm) var(--sc-space-md);
		background: var(--sc-nav-bg);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-radius: var(--sc-radius-full);
		box-shadow: var(--sc-shadow-xl);
		border: 1px solid var(--sc-nav-border);
		position: relative; /* containing block for panels */
	}

	/* Mobile panels open upward, centered on the pill */
	.ghost-bar-mobile .ghost-bar__panel {
		top: auto;
		bottom: calc(100% + 10px);
		/* left:50% + panelInCentered animation handles horizontal centering */
	}

	.ghost-bar-mobile .ghost-bar__panel--create {
		top: auto;
		bottom: calc(100% + 10px);
	}
}

/* ── Settings Shell Layout ──────────────────────────────────────────────── */
/* Full-width flex shell — sidebar attaches to left edge, content fills right */

.settings-layout {
	display: flex;
	min-height: calc(100dvh - var(--sc-nav-height));
	/* NO max-width, NO padding — sidebar must reach the left edge */
}

/* Inner page wrapper used by each settings page for content max-width */
.settings-page {
	max-width: var(--sc-content-max);
	margin: 0 auto;
	padding: var(--sc-space-xl) var(--sc-space-lg) var(--sc-space-3xl);
}

/* ── Settings Sidebar ─────────────────────────────────────────────────── */

.settings-sidebar {
	width: 240px;
	flex-shrink: 0;
	/* Sticky: stays in view while content scrolls */
	position: sticky;
	top: var(--sc-nav-height);
	height: calc(100dvh - var(--sc-nav-height));
	overflow-y: auto;
	overflow-x: hidden;
	/* Visual treatment — matches mockup exactly */
	background: var(--sc-warm-white);
	border-right: 1px solid var(--sc-border);
	display: flex;
	flex-direction: column;
	z-index: 5;
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-sidebar--no-transition,
.settings-sidebar--no-transition * {
	transition: none !important;
}

.settings-sidebar--collapsed {
	width: 56px;
	overflow: visible; /* allow tooltips to overflow when fully collapsed */
}

/* ── Sidebar header ─────────────────────────────────────────────────────── */

.settings-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 14px 8px;
	min-height: 48px;
	flex-shrink: 0;
}

.settings-sidebar__title {
	/* Display font matching mockup exactly */
	font-family: var(--sc-font-display);
	font-size: 1rem;
	font-weight: var(--sc-weight-normal);
	color: var(--sc-charcoal);
	white-space: nowrap;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.2s;
}

.settings-sidebar--collapsed .settings-sidebar__title {
	opacity: 0;
	width: 0;
	pointer-events: none;
}

.settings-sidebar__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: 1px solid var(--sc-border-subtle);
	border-radius: var(--sc-radius-sm);
	background: transparent;
	color: var(--sc-text-tertiary);
	cursor: pointer;
	transition: background var(--sc-transition-fast), color var(--sc-transition-fast);
}

.settings-sidebar__toggle:hover {
	background: var(--sc-accent-subtle);
	color: var(--sc-accent-text);
}

.settings-sidebar__toggle svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow rotates 180° when collapsed */
.settings-sidebar__toggle--rotated svg {
	transform: rotate(180deg);
}

/* ── Sidebar nav items ──────────────────────────────────────────────────── */

.settings-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 8px;
	flex: 1;
}

.settings-sidebar__section-label {
	padding: var(--sc-space-sm) var(--sc-space-sm) var(--sc-space-xs);
	font-family: var(--sc-font-ui);
	font-size: 10px;
	font-weight: var(--sc-weight-semibold);
	letter-spacing: var(--sc-tracking-wide);
	text-transform: uppercase;
	color: var(--sc-text-tertiary);
	white-space: nowrap;
	overflow: hidden;
	opacity: 1;
	height: auto;
	transition: opacity 0.15s, height 0.2s, padding 0.2s;
}

.settings-sidebar--collapsed .settings-sidebar__section-label {
	opacity: 0;
	height: 0;
	padding: 0;
	pointer-events: none;
}

.settings-sidebar__link {
	position: relative; /* for tooltip positioning */
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	font-family: var(--sc-font-ui);
	font-size: 0.85rem;
	font-weight: var(--sc-weight-medium);
	color: var(--sc-bark-faint);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.15s,
		color 0.15s,
		padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-sidebar__link:hover {
	background: var(--sc-cream-dark);
	color: var(--sc-bark);
}

.settings-sidebar__link.is-active {
	background: rgba(184, 96, 63, 0.08);
	color: var(--sc-rust);
	font-weight: var(--sc-weight-medium);
}

.settings-sidebar__link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.settings-sidebar__link span {
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.15s, width 0.2s;
}

/* Collapsed: center icons, hide label text */
.settings-sidebar--collapsed .settings-sidebar__link {
	justify-content: center;
	padding: 10px;
	gap: 0px;
}

.settings-sidebar--collapsed .settings-sidebar__link span {
	width: 0;
	opacity: 0;
	pointer-events: none;
}

.settings-sidebar--collapsed .settings-sidebar__badge {
	display: none;
}

/* Tooltip on collapsed items */
.settings-sidebar--collapsed .settings-sidebar__link::after {
	content: attr(data-tooltip);
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	background: rgba(30, 27, 24, 0.88);
	color: var(--sc-cream);
	padding: 5px 10px;
	border-radius: var(--sc-radius-sm);
	font-size: var(--sc-text-xs);
	font-weight: var(--sc-weight-medium);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
	z-index: 100;
}

.settings-sidebar--collapsed .settings-sidebar__link:hover::after {
	opacity: 1;
}

/* Badge (pending count) */
.settings-sidebar__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: auto;
	background: var(--sc-warning-subtle);
	color: var(--sc-warning);
	font-family: var(--sc-font-ui);
	font-size: 10px;
	font-weight: var(--sc-weight-bold);
	border-radius: var(--sc-radius-full);
}

/* ── Settings content area ──────────────────────────────────────────────── */

.settings-content {
	flex: 1;
	min-width: 0;
	background: var(--sc-bg);
	padding: 8px 18px 60px;
	overflow-y: auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Narrow viewports (tablet + phone): icon rail by default; same flex row as desktop.
   Real mobile browsers often report a wider innerWidth than DevTools “mobile” width;
   a separate ≤768px top-strip layout caused nav links to jump to the top only on device. */
@media (max-width: 960px) {
	.settings-sidebar {
		width: 56px;
		overflow: visible;
	}
}

/* ── Filter Chips / Toolbar ─────────────────────────────────────────────── */

.toolbar {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
	flex-wrap: wrap;
	padding: var(--sc-space-sm) 0;
}

.filter-chips {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	flex-wrap: wrap;
}

.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-xs);
	padding: 5px var(--sc-space-sm);
	border-radius: var(--sc-radius-full);
	border: 1px solid var(--sc-border);
	background: var(--sc-surface);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-xs);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-secondary);
	cursor: pointer;
	transition: all var(--sc-transition-fast);
	white-space: nowrap;
}

.filter-chip:hover {
	border-color: var(--sc-accent);
	color: var(--sc-accent-text);
}

.filter-chip.is-active {
	background: var(--sc-accent-subtle);
	border-color: var(--sc-accent);
	color: var(--sc-accent-text);
}

/* ── Filter Bar ────────────────────────────────────────────────────────── */

.filters {
	display: none;
	flex-wrap: wrap;
	gap: var(--sc-space-sm);
	align-items: center;
	max-width: var(--sc-content-max);
	margin: 0 auto;
	padding: var(--sc-space-sm) var(--sc-space-lg) 0;
}

.filters.active { display: flex; }

.filters__label {
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-xs);
	font-weight: var(--sc-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--sc-tracking-wide);
	color: var(--sc-text-tertiary);
	margin-right: var(--sc-space-xs);
}

/* ── Tab Navigation ─────────────────────────────────────────────────────── */

.tab-nav {
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--sc-border-subtle);
	overflow-x: auto;
	scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab-nav__item {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	padding: var(--sc-space-sm) var(--sc-space-md);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-secondary);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	transition: color var(--sc-transition-fast), border-color var(--sc-transition-fast);
}

.tab-nav__item:hover {
	color: var(--sc-text-primary);
}

.tab-nav__item.is-active {
	color: var(--sc-accent-text);
	border-bottom-color: var(--sc-accent);
	font-weight: var(--sc-weight-semibold);
}

.tab-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--sc-radius-full);
	background: var(--sc-accent-subtle);
	color: var(--sc-accent-text);
	font-size: 10px;
	font-weight: var(--sc-weight-bold);
}

/* ── Legacy tab/toolbar/panel classes ──────────────────────────────────────
   Used by family library page and other pages migrated before the V2 rewrite.
   These map to the same patterns as .tab-nav / .toolbar above.
   ──────────────────────────────────────────────────────────────────────── */

.page-header {
	padding: var(--sc-space-lg) var(--sc-space-lg) 0;
	max-width: var(--sc-content-max);
	margin: 0 auto;
}

.page-header--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sc-space-md);
}

.page-header__title {
	font-family: var(--sc-font-display);
	font-size: var(--sc-text-2xl);
	color: var(--sc-text-primary);
	margin: 0;
	line-height: var(--sc-leading-tight);
}

/* Tabs (same visual as .tab-nav) */
.tabs {
	display: flex;
	align-items: center;
	border-bottom: 2px solid var(--sc-border-subtle);
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 var(--sc-space-lg);
	max-width: var(--sc-content-max);
	margin: var(--sc-space-md) auto 0;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	padding: var(--sc-space-sm) var(--sc-space-md);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	color: var(--sc-text-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--sc-transition-fast), border-color var(--sc-transition-fast);
}

.tab:hover { color: var(--sc-text-primary); }

.tab.active {
	color: var(--sc-accent-text);
	border-bottom-color: var(--sc-accent);
	font-weight: var(--sc-weight-semibold);
}

/* Constrain tab SVG icons and force correct rendering */
.tab svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
}

.tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--sc-radius-full);
	background: var(--sc-accent-subtle);
	color: var(--sc-accent-text);
	font-size: 10px;
	font-weight: var(--sc-weight-bold);
}

/* Toolbar (legacy sub-classes) */
.toolbar {
	display: flex;
	align-items: center;
	gap: var(--sc-space-sm);
	padding: var(--sc-space-sm) var(--sc-space-lg);
	max-width: var(--sc-content-max);
	margin: 0 auto;
}

.toolbar__search {
	display: flex;
	align-items: center;
	gap: var(--sc-space-xs);
	flex: 1;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border-subtle);
	border-radius: var(--sc-radius-lg);
	padding: 6px var(--sc-space-md);
}

.toolbar__search-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--sc-text-tertiary);
	stroke-width: 2;
	stroke-linecap: round;
}

.toolbar__search-input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	color: var(--sc-text-primary);
	outline: none;
}

.toolbar__search-input::placeholder {
	color: var(--sc-text-tertiary);
}

.toolbar__create {
	display: inline-flex;
	align-items: center;
	gap: var(--sc-space-xs);
	padding: 7px var(--sc-space-md);
	background: var(--sc-accent);
	color: #fff;
	border-radius: var(--sc-radius-full);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-sm);
	font-weight: var(--sc-weight-medium);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background var(--sc-transition-fast);
	white-space: nowrap;
}

.toolbar__create:hover {
	background: var(--sc-accent-hover);
	color: #fff;
}

.toolbar__create svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

/* Toolbar secondary buttons (sort, filter) */
.toolbar__btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px var(--sc-space-md);
	font-family: var(--sc-font-ui);
	font-size: var(--sc-text-xs);
	font-weight: var(--sc-weight-medium);
	line-height: 1;
	color: var(--sc-text-secondary);
	background: var(--sc-surface);
	border: 1px solid var(--sc-border-subtle);
	border-radius: var(--sc-radius-md);
	cursor: pointer;
	transition: border-color var(--sc-transition-fast), color var(--sc-transition-fast);
	white-space: nowrap;
}

.toolbar__btn:hover {
	border-color: var(--sc-border);
	color: var(--sc-text-primary);
}

.toolbar__btn.active {
	border-color: var(--sc-accent);
	color: var(--sc-accent-text);
	background: var(--sc-accent-subtle);
}

.toolbar__btn svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
}

/* Panel content wrapper */
.panel {
	max-width: var(--sc-content-max);
	margin: 0 auto;
	padding: var(--sc-space-lg);
}

/* ── Toolbar / Filter responsive ───────��───────────────────────────────── */

@media (max-width: 639px) {
	.toolbar { flex-wrap: wrap; }
	.toolbar__search { min-width: 100%; order: -1; }
	.filters { padding: var(--sc-space-sm) var(--sc-space-md) 0; }
}