@layer components {
  /* ============================================
     Breadcrumb — show-page navigation
     ============================================
     Structure:
       .breadcrumb (nav)
         .breadcrumb__list (ol)
           .breadcrumb__item (li)
             a / span[aria-current]
     Separator is a CSS ::before chevron between items
     so screen readers read only the labels.
     ============================================ */

  .breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .breadcrumb__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5ch;
  }

  .breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-inline-end: 0.5ch;
    color: var(--color-text-semimuted);
  }

  .breadcrumb__item a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 3px;
  }

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

  .breadcrumb__item--current {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    /* Truncate overlong titles on small screens */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
  }
}