@layer components {
  /* ——— Avatars ———
     A circle of initials: the one place a name is allowed to become a mark.
     Neutral: a person's hue (User#hue) colours their caret in a document
     (cursors.css), never their face. */
  .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);
    /* The surface tint is 3% ink over whatever is behind — behind a face
       that is the next face in a stack, or the words a marker stands over,
       and the circle read as translucent (owner, 2026-10-13). The canvas
       under the tint makes it opaque without a second colour. */
    background-color: var(--color-canvas);
    background-image: linear-gradient(var(--color-surface), 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;
    }

    /* The face that opens the person card is the button itself (avatar_tag),
       so it sheds a control's frame and keeps the circle. */
    &:is(button) {
      padding: 0;
      border: none;
      cursor: pointer;
    }

    /* 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. Square, said outright: the settings
       preview shows the raw upload before any thumb exists, and a portrait
       there grew the grid row to its own height, an ellipse over the label
       beside it. */
    > img {
      aspect-ratio: 1;
      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 {
    /* How far each face laps the one before; a smaller strip laps less. */
    --avatar-overlap: 0.5rem;

    display: flex;

    /* A group can be one link — a project's faces open its people page — and
       the initials are faces, not words to underline. */
    text-decoration: none;

    > .avatar + .avatar {
      margin-inline-start: calc(-1 * var(--avatar-overlap));
      box-shadow: 0 0 0 2px var(--color-canvas);
    }
  }

  /* A company's mark (crm-v2, the compact pass): the face's tile, squared,
     so a company and a person read apart at a glance. */
  .avatar--square {
    border-radius: var(--border-radius);

    /* A logo keeps its whole shape on the tile, where a face is cropped to
       fill its circle. */
    > img {
      object-fit: contain;
      border-radius: inherit;
    }
  }

  /* In a line of words — a folder row's "Nina · Oct 13" — the face sits
     in the line, small, on the middle of the text. */
  .avatar--inline {
    --avatar-size: 1.25rem;

    display: inline-grid;
    vertical-align: middle;
  }

  /* 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%;
  }
}