/* ============================================================
   AVATAR — Risograph tondo (`components/avatar.js`)

   Tre inchiostri sovrapposti in moltiplica e le iniziali in bianco. Le
   tinte le scrive il componente negli attributi dell'SVG (sono della
   persona, come il colore di un cliente); qui ci sono misure, fusione,
   carattere e l'anello di chi sta tracciando. Prefisso `rav`.
   ============================================================ */
.rav{position:relative;flex:none;display:inline-grid;place-items:center;vertical-align:middle;border-radius:50%;isolation:isolate;}
.rav svg{display:block;width:100%;height:100%;border-radius:50%;}
.rav-20{width:20px;height:20px;}
.rav-24{width:24px;height:24px;}
.rav-28{width:28px;height:28px;}
.rav-30{width:30px;height:30px;}
.rav-32{width:32px;height:32px;}
.rav-42{width:42px;height:42px;}
.rav-72{width:72px;height:72px;}
.rav-i2{mix-blend-mode:multiply;opacity:.85;}
.rav-i3{mix-blend-mode:multiply;opacity:.55;}
.rav-txt{fill:var(--on-accent);font:800 36px 'Inter',system-ui,-apple-system,sans-serif;letter-spacing:-1px;}
/* Chi sta tracciando: un anello che gira, staccato dal tondo di un filo
   del colore della scheda. */
.rav.live::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--amber),var(--primary),var(--pink),var(--amber));animation:rav-turn 3s linear infinite;z-index:-1;}
.rav.live svg{box-shadow:0 0 0 1.5px var(--card);}
@keyframes rav-turn{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.rav.live::before{animation:none;}}
/* In fila, come negli assegnatari: si sovrappongono, con un bordo che li
   separa. */
.rav-fila{display:inline-flex;align-items:center;}
.rav-fila>.rav+.rav{margin-left:-6px;}
.rav-fila>.rav svg{box-shadow:0 0 0 2px var(--card);}