@layer components {
  /* Overlapped discs: each opaque with a soft shadow on its left edge so the one beneath reads as behind. */
  .avatar-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
  .avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--background); }
  .avatar-stack > * + * { margin-left: -6px; }
  .avatar-stack-more {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px;
    border-radius: 999px; font-size: 11px; /* decorative: aria-hidden, the count is in the accessible name */
    font-weight: 600; color: var(--foreground); background-color: var(--muted);
  }
  .avatar-stack--md .avatar-stack-more { height: 24px; }
  .avatar-stack--lg .avatar-stack-more { height: 28px; }
}