/* User avatar.

   Deterministic shape + color + initial primitive ported from the
   legacy Next.js UserAvatar.tsx (see internal/ui/avatar/avatar.go for
   the mapping function and the full 7-shape / 7-color catalog).

   Used in: layouts/base.html (sidebar profile slot + mobile tabbar
   profile tab, sm variant), pages/me.html (lg variant above the
   "Welcome back" heading), dev/avatars.html (showcase matrix +
   sample identities).

   Variants:
       .user-avatar--sm  — 32px, nav-rail size.
       .user-avatar--lg  — 64px, profile-page heading size.

   No `md` variant: the legacy 36px size had no consumer in the
   production app and the port intentionally skips it. Add it back
   when a real surface needs it.

   Layer cite: bible chapter 1.1 (restraint) — the avatar is the only
   meaningful chrome on the profile slot. No badge ring, no presence
   dot, no hover-morph. Per principle 1.6 (borders over shadows),
   no ambient shadow at rest.

   Cascade-layer note: lives in `components` so the reset/layout
   never overrides positioning and utility classes always do. */

@layer components {

.user-avatar {
  /* inline-flex so the avatar sits inline with adjacent labels
     (sidebar text label) without breaking onto its own line, and
     so width/height take effect (a span is inline by default,
     which collapses dimensions). The SVG is absolutely positioned
     against this; relative positioning is load-bearing. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Width and height are set per variant below. Spacing-guard scope
     is margin/padding/gap, not width/height — these explicit pixel
     values are sizing, not rhythm. */
}

.user-avatar__shape {
  /* Absolute-fill the parent so the initial can render z-stacked on
     top. The SVG itself has no fill — the <path> inline-sets fill
     to the color hex returned by avatar.Traits. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.user-avatar__initial {
  /* z-stack above the SVG via positive z-index; relative positioning
     creates the stacking context. Font is the canonical body face
     (Outfit) at the size variant below. White on saturated color is
     load-bearing per the legacy reference; the palette was picked
     specifically to clear WCAG AA against white text. */
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  /* line-height:1 + flex centering on the parent gives a clean
     vertical center without baseline drift. */
}

/* ----- sm (nav rail): 32px square, 12px initial. ----- */
.user-avatar--sm {
  width: 32px;
  height: 32px;
}

.user-avatar--sm .user-avatar__initial {
  font-size: var(--text-xs);
}

/* ----- lg (profile heading): 64px square, ~28px initial. ----- */
.user-avatar--lg {
  width: 64px;
  height: 64px;
}

.user-avatar--lg .user-avatar__initial {
  /* text-2xl == 24px gets the visual weight right against the 64px
     shape while staying inside the token ladder. The legacy ref
     uses Tailwind text-2xl (24px) which matches. */
  font-size: var(--text-2xl);
}

}