@layer components {
  /* The header trail (BreadcrumbsHelper#breadcrumbs): parent crumbs are muted
     wayfinding, the current page is the only ink — hierarchy through restraint
     rather than link-blue and bold. The separator is CSS-generated punctuation:
     single-sourced and silent for screen readers. */
  .breadcrumbs {
    font-size: var(--font-small-responsive);
    margin-inline: auto;
    min-inline-size: 0;

    ol {
      align-items: center;
      display: flex;
      gap: var(--inline-space-half);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    li {
      align-items: center;
      display: inline-flex;
      gap: var(--inline-space-half);
      min-inline-size: 0;

      + li::before {
        color: var(--color-ink-light);
        content: "▸" / "";
        flex-shrink: 0;
        font-size: 0.8em;
      }
    }

    a,
    span {
      max-inline-size: 40ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    a {
      color: var(--color-ink-muted);
      text-decoration: none;

      /* Colour alone would resolve the hover into something indistinguishable
         from the current-page crumb; the underline is what says "link". */
      &:hover {
        color: var(--color-ink);
        text-decoration: underline;
        text-decoration-skip-ink: auto;
        text-underline-offset: 0.25em;
      }
    }

    [aria-current="page"] {
      color: var(--color-ink);
      font-weight: 500;
    }
  }

  /* Pinned to the header's true centre: Shift-revealed keycaps resize the side
     clusters, and flex centring would drag the trail with them. */
  #header .breadcrumbs {
    position: absolute;
    inset: 0;
    margin: auto;
    block-size: fit-content;
    inline-size: fit-content;
    max-inline-size: 55%;
  }
}