@scope (breadcrumb-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --breadcrumb-gap:          var(--a-space-1);
    --breadcrumb-max-width:    12rem;

    /* ── Typography ── */
    --breadcrumb-font-size:    var(--a-ui-size);
    --breadcrumb-current-weight: var(--a-weight-medium);

    /* ── Colors ── */
    --breadcrumb-fg:           var(--a-fg-subtle);
    --breadcrumb-fg-hover:     var(--a-fg);
    --breadcrumb-separator-fg: var(--a-fg-muted);
    --breadcrumb-current-fg:   var(--a-fg-strong);

    /* ── Transition ── */
    --breadcrumb-duration:     var(--a-duration-fast);
    --breadcrumb-easing:       var(--a-easing);

    /* ── Link ── */
    --breadcrumb-link-radius:  var(--a-radius-sm);
    --breadcrumb-link-focus-ring: var(--a-focus-ring);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--breadcrumb-gap);
    font-size: var(--breadcrumb-font-size);
  }

  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
  :scope[inline] { display: inline-flex; }

  /* Separator — standalone span, never inside <a> */
  [data-sep] {
    color: var(--breadcrumb-separator-fg);
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
  }

  /* Items */
  [data-item] {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--breadcrumb-max-width);
    color: var(--breadcrumb-fg);
  }

  /* Links */
  a[data-item] {
    text-decoration: none;
    border-radius: var(--breadcrumb-link-radius);
    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
  }

  a[data-item]:hover {
    color: var(--breadcrumb-fg-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  a[data-item]:focus-visible {
    outline: none;
    box-shadow: var(--breadcrumb-link-focus-ring);
  }

  /* Current (last item) */
  [data-item][aria-current] {
    color: var(--breadcrumb-current-fg);
    font-weight: var(--breadcrumb-current-weight);
    pointer-events: none;
    text-decoration: none;
  }

  /* Items moved into the overflow popover are kept in the light DOM
     so the consumer's order of truth stays intact; we only hide them
     visually when [collapse] is active. */
  [data-collapsed] {
    display: none;
  }

  /* Overflow trigger — `<menu-ui data-overflow>` stamped between
     the leading and trailing visible groups. Layout-wise it behaves
     like any other [data-item], but the trigger button inside it
     handles its own padding/focus, so we strip the item max-width to
     let the `…` glyph size to its content. The popover surface and
     the menu-item-ui rows inherit menu-ui's canonical styling — no
     visual overrides needed here. */
  [data-overflow] {
    max-width: none;
    overflow: visible;
  }

  /* Icon-leading shape — a `<icon-ui>` (or a link wrapping one) as
     the first child should optical-center on the text baseline of
     the rest of the row without inheriting the text-truncate cap. */
  [data-item] > icon-ui:only-child,
  a[data-item]:has(> icon-ui:only-child) {
    max-width: none;
  }
}
