/* SHELL·AVATAR (1133) — the person circle on the Profile you-card.
 *
 * The initials placeholder for whoever the account holder is (her display name's first letter,
 * falling back to email, then to '?'). Today the circle carries an initial; when her photo
 * exists the renderer swaps the initial for it (icons.js: "her photo when it exists, never
 * faked"). No JS passes an image today — this row is the shape, the photo is a future render.
 *
 * ⚠️ NOT THE TOPBAR'S AVATAR: the shell profile button on the topbar is class `av` (a Phosphor
 * user glyph in a circular hit target) and is owned by 101 HOME·TOPBAR's own sheet
 * (web/css/cards/home/topbar.css). This row owns the generic circle ONLY — the topbar chip uses
 * a different class and is rendered by app.js:55-68 with class: 'av', not 'avatar'.
 *
 * THREE DECLARED STATES:
 *   · default       — 40px circle, accent-soft fill, size-18 initial.
 *   · lg            — 60px circle, size-28 initial. Sized for the Profile you-card.
 *   · blue          — sky-200 fill, ink-900 initial. The brand-neutral cue.
 *   · lg+blue       — both modifiers at once; views/profile.js:57 emits 'avatar lg blue'.
 *
 * The modifiers STACK — combining them is the live state. The four-state list names the
 * combinations that exist; the live combination is one of them.
 *
 * MOVED VERBATIM from web/css/app.css (L272–L294) on 2026-09-24 — the rule values themselves
 * (40px, 60px, accent-soft, sky-200) are the values the registry row declared on 2026-09-13.
 * D-758: changing any of them is a pixel change gated on Andrew's eye.
 */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  background: var(--accent-soft);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-18); /* token-exception */
}

.avatar.lg {
  width: 60px;
  height: 60px;
  font-size: var(--size-28); /* token-exception */
}

.avatar.blue {
  background: var(--sky-200);
  color: var(--text-primary);
}