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

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

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

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

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

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

  /* Separator — standalone span, never inside <a> */
  [data-sep] {
    color: var(--breadcrumb-separator-fg, var(--breadcrumb-separator-fg-default));
    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, var(--breadcrumb-max-width-default));
    color: var(--breadcrumb-fg, var(--breadcrumb-fg-default));
  }

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

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

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

  /* Current (last item) */
  [data-item][aria-current] {
    color: var(--breadcrumb-current-fg, var(--breadcrumb-current-fg-default));
    font-weight: var(--breadcrumb-current-weight, var(--breadcrumb-current-weight-default));
    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;
  }
}
