/* ==========================================================================
   Breadcrumbs — Navigation path
   Align with main content column (matches --sc-content-max).
   ========================================================================== */

.app-breadcrumb-wrap,
.settings-content__breadcrumb {
	max-width: var(--sc-content-max);
	margin-left: auto;
	margin-right: auto;
	padding: 10px 24px 0;
	box-sizing: border-box;
}

.app-breadcrumb-wrap .breadcrumb,
.settings-content__breadcrumb .breadcrumb {
	margin-bottom: var(--sc-space-md);
}

@media (max-width: 640px) {
	.app-breadcrumb-wrap,
	.settings-content__breadcrumb {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.2rem 0.35rem;
	row-gap: 0.2rem;
	font-family: var(--sc-font-ui);
	font-size: 0.8125rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--sc-text-tertiary);
	margin-bottom: var(--sc-space-md);
}

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

.breadcrumb__link {
	color: var(--sc-text-secondary);
	text-decoration: none;
	border-radius: 4px;
	padding: 0.2em 0.05em;
	margin: -0.2em -0.05em;
	transition:
		color var(--sc-transition-fast) var(--sc-ease-default),
		text-decoration-color var(--sc-transition-fast) var(--sc-ease-default);
}

.breadcrumb__link:hover {
	color: var(--sc-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--sc-accent) 45%, transparent);
}

.breadcrumb__link:focus {
	outline: none;
}

.breadcrumb__link:focus-visible {
	outline: 2px solid var(--sc-accent);
	outline-offset: 2px;
}

.breadcrumb__separator {
	color: var(--sc-text-tertiary);
	opacity: 0.5;
	font-size: 0.7rem;
	font-weight: 500;
	padding: 0 0.15rem;
	user-select: none;
	line-height: 1;
}

.breadcrumb__current {
	color: var(--sc-bark);
	font-weight: var(--sc-weight-medium);
	letter-spacing: 0.01em;
}