@layer components {
  /* The trail above a document's title (Breadcrumb). */
  .breadcrumb {
    margin-block-end: var(--block-space);
    font-size: var(--text-small);
  }
  .breadcrumb__trail {
    display: flex;
    flex-wrap: wrap;
    /* Not baseline: the truncated crumb is a scroll container and lends its step none. */
    align-items: center;
    gap: var(--inline-space-half);
  }
  .breadcrumb__step {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
  }
  /* Drawn by the step, not the crumb, which would fold it into the link's click target. */
  .breadcrumb__step:not(:first-child)::before {
    content: "/";
    color: var(--color-ink-light);
  }
  a.breadcrumb__crumb { color: var(--color-muted); }
  a.breadcrumb__crumb:hover { color: var(--color-brand-strong); }
  /* Not a link — a menu heading, or a chapter with no page. */
  span.breadcrumb__crumb { color: var(--color-subtle); }
  /* A menu parent can carry a sentence for a label, so the last crumb is the one that gives: it
     takes what the row has left and ellipses. min-inline-size lets a flex item shrink past its
     own text, and the step has to give before the crumb inside it can. */
  .breadcrumb__step:last-child,
  .breadcrumb__step:last-child .breadcrumb__crumb {
    min-inline-size: 0;
  }
  .breadcrumb__step:last-child .breadcrumb__crumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}