/* =============================================================================
   COMPONENT: avatar — person identity disc: solid per-person hue + light
   initials (the Dusk mockups' member circles). "Who" is information, so the
   initial (or an accessible name on the element) always accompanies the color.

   Hue comes from the person tokens. Assign per member in markup with the only
   allowed inline style — a custom property:
     <span class="avatar" style="--avatar-bg: var(--person-2)">J</span>
   Stable assignment (member.id % 5 → person-1..5) is a pass-2 helper concern.
   ========================================================================== */

@layer components {
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--avatar-bg, var(--accent));
    color: var(--person-contrast);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
  }

  .avatar--sm { inline-size: 1.5rem; block-size: 1.5rem; font-size: var(--text-xs); }
  .avatar--lg { inline-size: 3rem;   block-size: 3rem;   font-size: var(--text-lg); }

  /* Overlapping row ("3 people already helping"). The ring is the surface
     color, so it works on any background. */
  .avatar-group { display: inline-flex; padding: 0; margin: 0; list-style: none; }
.avatar-group .avatar { box-shadow: 0 0 0 var(--space-3xs) var(--surface); }
  .avatar-group > * + * { margin-inline-start: calc(var(--space-xs) * -1); }
}