/* =========================================================
   Zeal Portal — Avatar

   Initials-on-circle avatar. Geometry + typography only;
   the deterministic background colour is set inline by the
   consuming JS via the email-hash → palette utility in
   `/js/system/avatar-utils.js`.

   Three sizes: sm (26px), md/default (32px), lg (56px).
   The `--md` is the unmodified `.avatar`.

   Used today by User Admin (table rows, identity card).
   Studio Bookings booking bars, Roadmap owners, Profile
   summary, future crew lists pick it up next.

   Markup:
     <span class="avatar"            style="background: <hex>">JD</span>
     <span class="avatar avatar--sm" style="background: <hex>">JD</span>
     <span class="avatar avatar--lg" style="background: <hex>">JD</span>
   ========================================================= */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-3, rgba(0, 0, 0, 0.55));
  color: var(--paper, #fff);
  font-family: var(--font-ex);
  font-weight: var(--w-bold, 700);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 22px;
  letter-spacing: -0.01em;
}