/* Monogram (avatar()): initials in the display face on a solid student-hue disc.
   Use only where identity matters: student list, profile / next-lesson hero, "Do potwierdzenia" on desktop, search.
   Sizes: avatar-sm 30 · avatar-md 36 · avatar-lg 48 · avatar-xl 64. `.me` = the account (ink on paper). */
@layer components {
  .avatar {
    width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: hsl(var(--h, 220) 65% 28%); background: hsl(var(--h, 220) 72% 90%); box-shadow: none;
    font-family: var(--font-display); font-weight: var(--w-display); font-size: 14px; letter-spacing: 0; line-height: 1; font-variation-settings: var(--fvs-small);
  }
  :root[data-theme="dark"] .avatar { color: hsl(var(--h, 220) 75% 86%); background: hsl(var(--h, 220) 42% 28%); }
  .avatar-sm { width: 30px; height: 30px; font-size: 12px; }
  .avatar-lg { width: 48px; height: 48px; font-size: 18px; }
  .avatar-xl { width: 64px; height: 64px; font-size: 24px; }
  .avatar.me { background: var(--accent); color: var(--on-accent); box-shadow: none; }
}