/*
 * Centralized, reusable member-avatar rendering.
 *
 * One source of truth for the small "avatar + username" chip shown next to a
 * member wherever their identity is surfaced (points leaderboard, cult-leader
 * pages, product descriptions, rating notes). Kept intentionally small and
 * unintrusive, and works on both light and dark surfaces.
 *
 * Markup contract (mirrored by app/static/js/utils/userAvatarChip.js so
 * server- and client-rendered chips look identical):
 *
 *   <span class="cc-user-chip">
 *     <img class="cc-avatar cc-avatar--sm" src="…" alt="…" />   // or fallback:
 *     <span class="cc-avatar cc-avatar--sm cc-avatar-fallback">A</span>
 *     <span class="cc-user-chip__name">username</span>
 *   </span>
 */

.cc-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.cc-avatar {
  --cc-avatar-size: 1.75rem;
  width: var(--cc-avatar-size);
  height: var(--cc-avatar-size);
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  background-color: rgba(149, 193, 31, 0.15);
  border: 1px solid rgba(149, 193, 31, 0.55);
}

.cc-avatar--xs {
  --cc-avatar-size: 1.25rem;
}

.cc-avatar--sm {
  --cc-avatar-size: 1.5rem;
}

.cc-avatar--md {
  --cc-avatar-size: 2.25rem;
}

.cc-avatar--lg {
  --cc-avatar-size: 4rem;
}

/* Initial-letter fallback rendered when a member has no avatar image. */
.cc-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  background-color: #95c11f;
  border-color: #95c11f;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75em;
  line-height: 1;
}

.cc-user-chip__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}