/* ============================================
   Avatar — circular identity token.

   <xm-avatar> renders a circular identity chip: initials first,
   then a Lucide-style person line-icon fallback, with an optional
   image. No imagery is ever required (UX-DR8). The chip is an
   opaque raise of the desk — it sits on a surface-container-* tier
   (NOT a third surface family) with ink --md-sys-color-on-surface
   matched to that backplate (AD-13). No gradient, no status hue.

   Sizes share the canonical xs|sm|md|lg axis so an avatar lines up
   with a same-size button / list row (AD-9).
   ============================================ */

.avatar {
  --avatar-size: 32px;
  --avatar-font: var(--md-sys-typescale-label-large-size);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  overflow: hidden;
  user-select: none;
}

.avatar__initials {
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--avatar-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.avatar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
}

.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Sizes — one diameter per shared size axis ---------- */
.avatar--xs { --avatar-size: 22px; --avatar-font: var(--md-sys-typescale-label-small-size); }
.avatar--sm { --avatar-size: 28px; --avatar-font: var(--md-sys-typescale-label-medium-size); }
.avatar--md { --avatar-size: 32px; --avatar-font: var(--md-sys-typescale-label-large-size); }
.avatar--lg { --avatar-size: 40px; --avatar-font: var(--md-sys-typescale-title-small-size); }