/* ============================================================
   Avatar utente — foglio dedicato
   ============================================================
   Vive fuori da ui-components.css perché il partial
   resources/views/partials/user-avatar.php viene montato sia da
   layouts/app.php sia da layouts/admin.php, e admin.php non carica
   ui-components.css. Registrato in entrambi i layout. */

/* ── a11y helper: .visually-hidden ──────────────────────────────
   Copia deliberata della classe definita in search.css:292. Il
   layout admin non carica search.css, quindi il nome accessibile
   del partial (vedi .user-avatar__initials + .visually-hidden qui
   sotto) non sarebbe nascosto correttamente senza questa copia.
   Tecnica standard di ritaglio 1x1px (non display:none, che
   toglierebbe il nodo anche dagli screen reader). Da consolidare
   in un unico posto quando qualcuno riordinerà i CSS condivisi tra
   i due layout. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ── Avatar utente ────────────────────────────────────────────────
   Foto o iniziali. Le iniziali sono il default della piattaforma: la
   dimensione arriva dalla variabile --user-avatar-size, così lo stesso
   markup serve il chip da 28px della sidebar e il ritratto da 96px del
   profilo senza una classe per taglia. */
.user-avatar {
    --user-avatar-size: 44px;
    inline-size: var(--user-avatar-size);
    block-size: var(--user-avatar-size);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(155deg, hsl(var(--surface-3)), hsl(var(--surface-1)));
    color: hsl(var(--gold-soft));
    font-family: var(--font-display);
    font-size: calc(var(--user-avatar-size) * 0.36);
    line-height: 1;
    letter-spacing: 0.04em;
    user-select: none;
}

.user-avatar__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.user-avatar__initials {
    padding-block-start: 0.06em;   /* le maiuscole in Fraunces siedono alte */
}

/* Anello dorato: solo dove la persona è il soggetto della vista
   (profilo, tessera, scheda di verifica), non nei chip di lista. */
.user-avatar--ringed::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid hsl(var(--gold) / 0.42);
    pointer-events: none;
}