/* Yolt v11 — avatars + initials (Section 5b-D)
 */

/* ═════ D.1 Avatars ═════ */
.avatar-img, .avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600; letter-spacing: 0.02em;
  position: relative;
  flex: none;
  background: var(--bg-3);
  color: var(--ink-0);
  overflow: hidden;
}
.avatar-img.sm, .avatar-initials.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-img.md, .avatar-initials.md { width: 32px; height: 32px; font-size: 12px; }
.avatar-img.lg, .avatar-initials.lg { width: 40px; height: 40px; font-size: 14px; }
.avatar-img > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in oklch, var(--av-1) 40%, var(--bg-2)), color-mix(in oklch, var(--av-1) 70%, var(--bg-3))); color: var(--bg-0); font-weight: 700; }

.avatar-initials.h-1 { background: color-mix(in oklch, var(--av-1) 40%, var(--bg-2)); color: var(--av-1); }
.avatar-initials.h-2 { background: color-mix(in oklch, var(--av-2) 40%, var(--bg-2)); color: var(--av-2); }
.avatar-initials.h-3 { background: color-mix(in oklch, var(--av-3) 40%, var(--bg-2)); color: var(--av-3); }
.avatar-initials.h-4 { background: color-mix(in oklch, var(--av-4) 40%, var(--bg-2)); color: var(--av-4); }
.avatar-initials.h-5 { background: color-mix(in oklch, var(--av-5) 40%, var(--bg-2)); color: var(--av-5); }
.avatar-initials.h-6 { background: color-mix(in oklch, var(--av-6) 40%, var(--bg-2)); color: var(--av-6); }
.avatar-initials.h-7 { background: color-mix(in oklch, var(--av-7) 40%, var(--bg-2)); color: var(--av-7); }
.avatar-initials.h-8 { background: color-mix(in oklch, var(--av-8) 40%, var(--bg-2)); color: var(--av-8); }

.avatar-online::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--good);
  border: 2px solid var(--bg-1);
}
.avatar-online.lg::after { width: 10px; height: 10px; }

.avatar-group { display: inline-flex; align-items: center; }
.avatar-group .avatar-img, .avatar-group .avatar-initials { border: 2px solid var(--bg-1); margin-left: -8px; }
.avatar-group .avatar-img:first-child, .avatar-group .avatar-initials:first-child { margin-left: 0; }
.avatar-group .overflow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-3); color: var(--ink-1);
  border: 2px solid var(--bg-1);
  margin-left: -8px;
  font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600;
}

.avatar-row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0;
}
.avatar-row .meta {
  display: flex; flex-direction: column;
}
.avatar-row .meta .name { color: var(--ink-0); font-size: 13px; font-weight: 500; }
.avatar-row .meta .role { color: var(--ink-3); font-size: 11.5px; font-family: ui-monospace, monospace; }