@layer components {
  .avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; object-fit: cover; font-weight: 700; color: var(--jx-avatar-fg);
    background: var(--jx-avatar-1);
  }
  .avatar--sm { width: 22px; height: 22px; font-size: 11px; } /* decorative */
  .avatar--md { width: 24px; height: 24px; font-size: 11px; } /* decorative */
  .avatar--lg { width: 28px; height: 28px; font-size: 12px; } /* decorative */
  .avatar--xl { width: 64px; height: 64px; font-size: 22px; }
  .avatar--tone-2 { background: var(--jx-avatar-2); }
  .avatar--tone-3 { background: var(--jx-avatar-3); }
  .avatar--tone-4 { background: var(--jx-avatar-4); }
  .avatar--tone-5 { background: var(--jx-avatar-5); }
  .avatar--tone-6 { background: var(--jx-avatar-6); }
  /* A photo cannot load from an offline copy: a neutral disc instead of a broken image. */
  html[data-offline-copy] img.avatar { background: var(--muted); }
  /* Unread release dot on the sidebar's avatar, top right; presence keeps the bottom right. */
  .me-avatar { position: relative; flex: none; display: inline-flex; }
  .me-avatar .release-dot { right: -2px; top: -2px; box-shadow: 0 0 0 2px var(--sidebar); }
  .sidebar-me:is(:hover, :active, .is-current, [aria-expanded="true"]) .release-dot { box-shadow: 0 0 0 2px var(--sidebar-accent); }
  .avatar-field { display: flex; align-items: center; gap: 12px; }
}