/* ============================================================
   AVATAR — one person looks the same on both apps (plan §4b).
   Markup comes from shared/js/identity.js (avatarHtml, avatarStackHtml).
   A photo if the person has one, else their initials on ink.
   Size modifiers (--sm, --lg, --xl) may be tuned per app.
   Square, with the --radius-sm corner every other box has (Rikki, 2026-09-26: "the avatar and place holder should be square").
   ============================================================ */
.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-sm, 4px);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--text-primary); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em;
  overflow: hidden;
}
.avatar--photo { background: var(--border-hairline); }
.avatar > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--more { background: var(--bg-page); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > .avatar { box-shadow: 0 0 0 2px var(--bg-page); }
.avatar-stack > .avatar + .avatar { margin-left: -6px; }