/* css/avatars.css — buyer avatars (js/ui/avatars.js): faceless SVG portraits wherever a buyer shows up — the
   Tablica + „Do roboty” rows, the QC ticket + the buyer's reply bubble, the Stół QC panel head, the VIP tip toast.
   Loaded after sheets.css / qc.css / screens.css, so these rules replace the old initials circles. Tokens: main.css.
   Visual pass 2: every avatar / logo is a circle with one 2px --line ring; the background tones live in avatars.js. */

.ava {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--line);
}

/* order rows: the buyer fills the tile (the category badge is optional — avatarTile(handle) draws none) */
.card__tile--avatar {
  position: relative;
  border-radius: 50%;
  background: none;
}

.ava-face {
  display: block;
  width: 100%;
  height: 100%;
}

/* what the buyer ordered: a small --panel disc on the tile's corner, the glyph in --text-2 */
.ava-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--line);
  color: var(--text-2);
}

/* QC ticket + reply bubble (qc/stage.js): the old coloured initials circle becomes the portrait */
.qc-avatar {
  background: none;
  box-shadow: none;
}

/* Stół QC panel head (ui/table-panel.js): the buyer next to „Stół 1 · @kuba.reps” */
.panel__ava {
  flex: none;
  width: 32px;
  height: 32px;
}

/* VIP tip toast (ui/motion.js → toasts.js opts.buyer): fills the 28px icon well with its ring */
.toast__icon .ava {
  width: 24px;
  height: 24px;
}

/* the frozen ui/screens/orders.js list */
.scr-req__av {
  background: none;
}