/**
 * YayReviews - Shared reviewer-avatar styling.
 *
 * Single stylesheet for avatars rendered by AvatarService (PHP) and
 * YayRevAvatarRender (JS). Holds shape/behavior only — NO dimensions: size is
 * consumer-controlled and applied inline per call. The initials background is
 * themeable via --yayrev-avatar-bg.
 *
 * Multicolour style ('initials_multicolor'): AvatarService picks a tone per
 * reviewer name and adds .yayrev-avatar--multicolor .yayrev-avatar--tone-N.
 * The tone count must match AvatarService::TONE_COUNT. Every tone keeps white
 * initials at WCAG AA contrast (4.5:1 or more).
 */
.yayrev-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.yayrev-avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yayrev-avatar-bg, #6366f1);
    color: #fff;
    font-weight: 600;
    line-height: 1;
}

/* Multicolour initials. The tone classes only set the colour; surfaces that
   restyle initials skip .yayrev-avatar--multicolor so the tone shows through. */
.yayrev-avatar--initials.yayrev-avatar--multicolor {
    background: var(--yayrev-avatar-bg);
    color: #fff;
}

.yayrev-avatar--tone-0 { --yayrev-avatar-bg: #b91c1c; } /* red */
.yayrev-avatar--tone-1 { --yayrev-avatar-bg: #c2410c; } /* orange */
.yayrev-avatar--tone-2 { --yayrev-avatar-bg: #b45309; } /* amber */
.yayrev-avatar--tone-3 { --yayrev-avatar-bg: #a16207; } /* yellow */
.yayrev-avatar--tone-4 { --yayrev-avatar-bg: #4d7c0f; } /* lime */
.yayrev-avatar--tone-5 { --yayrev-avatar-bg: #15803d; } /* green */
.yayrev-avatar--tone-6 { --yayrev-avatar-bg: #047857; } /* emerald */
.yayrev-avatar--tone-7 { --yayrev-avatar-bg: #0f766e; } /* teal */
.yayrev-avatar--tone-8 { --yayrev-avatar-bg: #0e7490; } /* cyan */
.yayrev-avatar--tone-9 { --yayrev-avatar-bg: #0369a1; } /* sky */
.yayrev-avatar--tone-10 { --yayrev-avatar-bg: #1d4ed8; } /* blue */
.yayrev-avatar--tone-11 { --yayrev-avatar-bg: #4338ca; } /* indigo */
.yayrev-avatar--tone-12 { --yayrev-avatar-bg: #6d28d9; } /* violet */
.yayrev-avatar--tone-13 { --yayrev-avatar-bg: #7e22ce; } /* purple */
.yayrev-avatar--tone-14 { --yayrev-avatar-bg: #a21caf; } /* fuchsia */
.yayrev-avatar--tone-15 { --yayrev-avatar-bg: #be185d; } /* pink */
.yayrev-avatar--tone-16 { --yayrev-avatar-bg: #be123c; } /* rose */
.yayrev-avatar--tone-17 { --yayrev-avatar-bg: #854d0e; } /* brown */
.yayrev-avatar--tone-18 { --yayrev-avatar-bg: #1e40af; } /* navy */
.yayrev-avatar--tone-19 { --yayrev-avatar-bg: #115e59; } /* pine */
.yayrev-avatar--tone-neutral { --yayrev-avatar-bg: #6b7280; } /* anonymous */