// ────────────────────────────────────────────────────────────────
// Komponente · Avatar
//
// Es gibt (noch) kein Bild — also die Initiale, in der Farbe, die die Person
// im Datenmodell traegt (`person.avatar_color`). Die Farbe kommt als
// Custom-Property `--avatar`; ohne sie gilt der Akzent. Damit ist der Avatar
// eine Zeile Markup und keine Abfrage: keine Datei, kein zweiter Datensatz,
// kein Platzhalterbild, das jemand pflegen muesste.
//
// DER NAME IST DIE ZWEITE WAHL. Zwei Initialen stehen enger als eine, sonst
// laufen sie im Kreis auseinander.
// ────────────────────────────────────────────────────────────────

.avatar {
  --avatar: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--avatar);
  background: color-mix(in srgb, var(--avatar) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--avatar) 42%, transparent);
  border-radius: var(--r-pill);
  user-select: none;
}

.avatar--sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--fs-xs);
}

.avatar--lg {
  width: 3rem;
  height: 3rem;
  font-size: var(--fs-lg);
}

// Zwei Initialen: enger gesetzt, damit sie den Kreis nicht sprengen.
.avatar--pair {
  letter-spacing: -.02em;
}