/* Breadcrumb trail — GitHub issue #99. Partial: app/views/shared/components/_breadcrumb.html.erb */
@layer components {

.breadcrumb {
  margin: 0 0 var(--space-4);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.breadcrumb__segment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__item {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb__item:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  font-weight: 400;
  user-select: none;
}

.breadcrumb__current {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Tighter trail on property sub-hubs (backlog, deep clean) */
.breadcrumb--host-hub {
  margin-bottom: var(--space-5);
}

.breadcrumb--host-hub .breadcrumb__list {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.breadcrumb--host-hub .breadcrumb__item {
  font-weight: 500;
}

.breadcrumb--host-hub .breadcrumb__separator {
  color: color-mix(in srgb, var(--color-text-muted) 75%, transparent);
  font-weight: 400;
}

.breadcrumb--host-hub .breadcrumb__current {
  color: var(--color-text);
  font-weight: 600;
}

}