/*
 * Avatars (README "Avatars"): initials circles 32–64px, 12.5px/700 at 36px. Tones rotate through
 * accent-2-200, accent-200, #dcedfa, #fbe0ec (user.avatar_tone 0–3). Admins are dark; the signed-in
 * user's own avatar in the rail/header is accent-300 (.avatar--me). Stacks overlap by −8px with a
 * 2.5px surface ring; a covered avatar centres its initials in its visible part, so none is clipped.
 * A person's uploaded photo (.avatar--photo > .avatar__img) takes the same circle.
 */
@layer components {
  .avatar {
    width: 40px;
    height: 40px;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
  }
  .avatar--32 { width: 32px; height: 32px; font-size: 11.5px; }
  .avatar--36 { width: 36px; height: 36px; font-size: 12.5px; }
  .avatar--38 { width: 38px; height: 38px; font-size: 12.5px; }
  .avatar--42 { width: 42px; height: 42px; font-size: 14px; }
  .avatar--48 { width: 48px; height: 48px; font-size: 15px; }
  .avatar--64 { width: 64px; height: 64px; font-size: 15px; }

  .avatar--t0 { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
  .avatar--t1 { background: var(--color-accent-200); color: var(--color-accent-900); }
  .avatar--t2 { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
  .avatar--t3 { background: var(--petal-staff-bg); color: var(--petal-staff-fg); }
  .avatar--admin { background: var(--color-neutral-800); color: var(--color-bg); }
  .avatar--me { background: var(--color-accent-300); color: var(--color-accent-900); }
  /* The signed-in Employee's own avatar in the Staff shell (E-01). */
  .avatar--staff { background: var(--petal-ops-bg); color: var(--petal-ops-fg); }

  /* An uploaded photo fills the circle (padding-box, so a stack's centring padding never shrinks
     it); the tone shows behind it while it loads. */
  .avatar--photo {
    position: relative;
    overflow: hidden;
  }
  .avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .avatar-stack {
    display: flex;
    align-items: center;
  }
  .avatar-stack .avatar { box-shadow: 0 0 0 2.5px var(--color-surface); letter-spacing: -0.02em; }
  .avatar-stack .avatar + .avatar { margin-left: -8px; }
  /* The next avatar covers this one's right 8px: centre the initials in the part that shows. */
  .avatar-stack .avatar:has(+ .avatar) { padding-right: 8px; }
  .avatar-stack__more {
    margin-left: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-neutral-700);
  }
}