/* One avatar treatment, three surfaces: the topbar control, the account
   popover and the Users list (static/app-shell/avatar.js paints all three).

   The photo is laid OVER the initials rather than replacing them, so the
   circle is never empty while the image is in flight and never empty if it
   never arrives — the initials are simply revealed again when the img
   removes itself. Round crop is the image's own job (object-fit: cover), not
   the container's, because a container-only crop leaves a square photo
   visible for one frame on a slow paint. */
.avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--avatar-size, 2rem);
  height: var(--avatar-size, 2rem);
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 50%;
  background: var(--ui-raised);
  color: var(--ui-text);
  font-size: calc(var(--avatar-size, 2rem) * 0.38);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* The topbar control is a button with its own size, order and visibility
   rules (shell.css, topbar-rebuild.css); it only needs the crop. */
.topbar-avatar {
  position: relative;
  overflow: hidden;
}
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
[data-avatar="photo"] .avatar-initials { visibility: hidden; }

/* The popover repeats the topbar's avatar beside the address, so the face
   that was pressed is the face the menu opens with. */
.account-identity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.account-identity .avatar { --avatar-size: 2rem; }