@layer components {
  /* ——— Avatars ———
     A circle of initials: the one place a name is allowed to become a mark.
     Neutral, because nothing in the app assigns a person a hue yet. */
  .avatar {
    display: grid;
    place-items: center;
    inline-size: var(--avatar-size, 1.75rem);
    block-size: var(--avatar-size, 1.75rem);
    flex-shrink: 0;
    font-size: var(--text-x-small);
    font-weight: 600;
    color: var(--color-ink-subtle);
    background-color: var(--color-surface);
    border-radius: 50%;

    /* Positioned only when it actually carries the dot, so the circle stays
       inert everywhere else. */
    &:has(.unread-dot) {
      position: relative;
    }

    /* A face fills the circle the initials were centred in. Cover, not
       contain: a portrait cropped square is a face, a portrait letterboxed
       into a circle is two grey wedges. */
    > img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
  }

  /* The face doubles as the file picker in settings' profile pane — fizzy's
     anatomy: the circle IS the control, wrapped in a <label> with the input
     clipped away inside it, so the browser's own "Choose File / No file
     chosen" never appears. The words beside the circle are part of the same
     label, which is why the pointer belongs to the label and not the circle.

     The circle holds two things at once — the initials you have now and the
     picture you just picked — stacked in the one grid cell so the preview
     COVERS rather than replaces. Cancel the picker and nothing was thrown
     away; and until Save nothing has been uploaded either. */
  .avatar-picker {
    cursor: pointer;

    .avatar > * {
      grid-area: 1 / 1;
    }
  }

  /* Several people as one mark: subscribers under a message, a ping row, the
     assignees on a to-do. The paper ring is what keeps them countable where
     they touch. */
  /* Overlapped, and so only for faces that CAN overlap: a pile hides the end
     of every circle but the last, which a photo survives and a pair of
     initials does not — "LB" behind the next face reads "LE" (user's image 42,
     2026-08-13). Where the people are a datum rather than a mark, stand them
     apart instead (activities/_day_heading).

     Neither reference had a better answer, for the record: chalet's
     .avatar__group is a 2×2 mosaic that composes ONE icon out of several
     faces, and fizzy's card assignees are this same negative margin. BC's
     stacks work because Basecamp has everybody's photograph. */
  .avatars {
    display: flex;

    > .avatar + .avatar {
      margin-inline-start: -0.5rem;
      box-shadow: 0 0 0 2px var(--color-canvas);
    }
  }

  /* Unread is a shu dot and nothing else — no count, no bold, no ring of
     colour. The paper border keeps it legible against any avatar. */
  .unread-dot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: -2px;
    inline-size: 9px;
    block-size: 9px;
    background-color: var(--color-accent);
    border: 2px solid var(--color-canvas);
    border-radius: 50%;
  }
}