/*
 * .avatar — round user image or initials. Size via --avatar-size (or --small/
 * --large modifiers). .avatar__img fills; initials center as text.
 * .avatar-group clusters overlapping avatars.
 */
@layer components {
  .avatar {
    --avatar-size: var(--size-7); /* ~2rem */
    display: inline-grid;
    place-items: center;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    border-radius: var(--radius-round);
    background: var(--accent-soft);
    color: var(--ink-on-soft); /* AAA teal on the soft fill; matches the accent badge */
    font-size: calc(var(--avatar-size) / 2.4);
    font-weight: var(--font-weight-8);
    text-transform: uppercase;
    overflow: clip;
    user-select: none;
    padding: 0;              /* reset when rendered as a <button> */
    border: none;
  }
  .avatar__img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* interactive avatar (e.g. popover trigger) */
  button.avatar { cursor: pointer; }
  button.avatar:hover { background: color-mix(in oklab, var(--accent-soft), var(--accent) 12%); }

  .avatar--small { --avatar-size: var(--size-5); }
  .avatar--large { --avatar-size: var(--size-10); }

  .avatar-group { display: inline-flex; }
  .avatar-group > .avatar { border: var(--border-size-2) solid var(--canvas); }
  .avatar-group > .avatar + .avatar { margin-inline-start: calc(var(--avatar-size, var(--size-7)) / -3); }
}