.jl-breadcrumb { display: flex; align-items: center; }
.jl-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
}
.jl-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }
.jl-breadcrumb__item[hidden] { display: none; } /* collapsed items (HTML behavior layer) */
.jl-breadcrumb__sep { display: inline-flex; color: var(--text-tertiary); flex: none; }
.jl-breadcrumb__sep svg { width: 15px; height: 15px; }
.jl-breadcrumb__sep--slash { font-size: var(--text-base); color: var(--border-strong); padding: 0 1px; }

.jl-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-2);
  margin: calc(var(--space-1) * -1) 0;
  border-radius: var(--radius-md);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.jl-breadcrumb__link:hover { color: var(--text-primary); background: var(--surface-hover); }
.jl-breadcrumb__link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.jl-breadcrumb__link svg { width: 15px; height: 15px; flex: none; }

.jl-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-2);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-breadcrumb__current svg { width: 15px; height: 15px; flex: none; color: var(--text-tertiary); }

.jl-breadcrumb__ellipsis {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.jl-breadcrumb__ellipsis:hover { color: var(--text-primary); background: var(--surface-hover); }
.jl-breadcrumb__ellipsis svg { width: 18px; height: 18px; }