/* ============================================
   Avatar group — overlapped stack with +N overflow.

   <xm-avatar-group> lays slotted <xm-avatar> children in an
   overlapped row (consistent negative offset) and, past `max`,
   renders a neutral "+N" overflow token in the same circular
   avatar shape. The overflow ink is the plain on-surface neutral
   — never coral, never a status hue (AD-11). Each avatar keeps a
   thin ring so the stack reads as discrete chips, not a blob.
   ============================================ */

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

  display: inline-flex;
  align-items: center;
}

/* The ring + overlap on each stacked avatar. ::slotted reaches the
   light-DOM <xm-avatar> children; the ring uses the host surface so
   the chips separate cleanly on whatever desk tier they sit on. */
.avatar-group ::slotted(xm-avatar) {
  margin-left: calc(var(--avatar-group-overlap) * -1);
  border-radius: var(--md-sys-shape-corner-full);
  box-shadow: 0 0 0 2px var(--md-sys-color-surface);
}
.avatar-group ::slotted(xm-avatar:first-child) {
  margin-left: 0;
}

/* +N overflow token — same circle, neutral surface ink. */
.avatar-group__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--avatar-group-size);
  height: var(--avatar-group-size);
  margin-left: calc(var(--avatar-group-overlap) * -1);
  flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 0 0 2px var(--md-sys-color-surface);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--avatar-group-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- Sizes — match xm-avatar diameters + scale overlap ---------- */
.avatar-group--xs { --avatar-group-size: 22px; --avatar-group-font: var(--md-sys-typescale-label-small-size);  --avatar-group-overlap: 6px; }
.avatar-group--sm { --avatar-group-size: 28px; --avatar-group-font: var(--md-sys-typescale-label-medium-size); --avatar-group-overlap: 7px; }
.avatar-group--md { --avatar-group-size: 32px; --avatar-group-font: var(--md-sys-typescale-label-large-size);  --avatar-group-overlap: 8px; }
.avatar-group--lg { --avatar-group-size: 40px; --avatar-group-font: var(--md-sys-typescale-title-small-size);  --avatar-group-overlap: 10px; }