/* avatar — a person's round picture: their photo, or the first letter of the name. Its own look lives here, with it:
   it sat in the service card's stylesheet, and a page that drew no service card drew bare pictures. */

.avatar {
  width: 1.6rem; height: 1.6rem; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--surface); background: var(--hover-wash);
  display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--ink);
}

/* A stack of them (a card's «who does it»): each over the last, «+2» for the rest. */
.avatars { display: inline-flex; }

.avatar + .avatar { margin-left: -.45rem; }

.avatar--more { font-size: .65rem; color: var(--muted); }

/* `size: 'lg'` — a row to choose a person from (the booking card). */
.avatar--lg { width: 2.4rem; height: 2.4rem; font-size: .95rem; border: 0; flex: none; }

.avatar--initial { background: linear-gradient(135deg, var(--tint), var(--hover-wash)); }