.breadcrumb {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: var(--text-sm);
  line-height: var(--lh-ui);
}
.breadcrumb:empty {
  display: none;
}

.breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  min-height: 32px;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .breadcrumb__back:hover { color: var(--text-strong); background: var(--bg-soft); }
}

.breadcrumb__arrow {
  font-size: 1.2em;
  line-height: 1;
  color: var(--text-muted);
  margin-right: var(--space-1);
}

.breadcrumb__label {
  color: inherit;
}

@media (min-width: 768px) {
  .breadcrumb {
    padding-inline: var(--space-8);
  }
}