/* ユーザーアイコン (計画書 181 §5.3)。
   複数の面 (単語帳・辞書・ランキング・タイムライン) から読むので独立した 1 枚にする。
   アイコン未設定はイニシャル + 色で描き、灰色の人型が並ぶ面を作らない。 */
.user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  line-height: 1;
}

.user-avatar--xs {
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
}

.user-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

.user-avatar--md {
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
}

/* 色相は Ruby 側 (UserAvatarHelper::AVATAR_HUE_STEP) が id から決めて inline で渡す。
   ライブイベントの参加者ランキングと同じ式なので、同じ人は同じ色になる。 */
.user-avatar.is-initial {
  /* 既定 0。実値は shared/_user_avatar が inline style="--user-avatar-hue: N" で注入する */
  --user-avatar-hue: 0;
  background: hsl(var(--user-avatar-hue) 55% var(--avatar-initial-l));
  color: var(--avatar-initial-fg);
  font-weight: 700;
}

/* 削除・利用停止のユーザー。顔も名前も出さない */
.user-avatar.is-anonymous {
  background: var(--border-color);
  /* design-allow: contrast-context — 人物アイコンのみの代替表示（非テキスト = 3:1）で最小 4.48 */
  color: var(--text-secondary);
}

/* 運営管理 (公式) の単語辞書。人ではないのでバッジで示す */
.user-avatar.is-official {
  background: var(--accent-bg);
  color: var(--accent);
}