/* avatar.css: Avatar primitive (P2.T9). Round for people, square for companies, three sizes, initials in the label type (sub at lg),
   --text-secondary on --surface-sunken with a 1 px --border; never coloured by person. Tokens only (L-01), logical properties only (L-04). */
.avatar {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-avatar-sm);
  block-size: var(--size-avatar-sm);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-round);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font: var(--type-label);
}
.avatar::before { content: attr(data-initials); }
.avatar[data-shape="square"] { border-radius: var(--radius-control); }
.avatar[data-size="md"] { inline-size: var(--size-avatar-md); block-size: var(--size-avatar-md); }
.avatar[data-size="lg"] { inline-size: var(--size-avatar-lg); block-size: var(--size-avatar-lg); font: var(--type-sub); }