/* ==========================================================================
   Eesier Friendly Identity
   A stable pseudonym for opaque participant identifiers. The color is
   categorical identity, never semantic state. Documentation: /Design/Identidades.
   ========================================================================== */

.eesier-friendly-identity {
    --efi-color: var(--color-muted, #475569);
    --efi-text: var(--color-text-dark, #0f172a);

    display: inline-flex;
    align-items: center;
    gap: var(--space-tight, 6px);
    min-width: 0;
    color: var(--efi-text);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 600;
    line-height: 1.5;
    text-transform: lowercase;
}

.eesier-friendly-identity--1 { --efi-color: var(--color-identity-1, #1d4ed8); }
.eesier-friendly-identity--2 { --efi-color: var(--color-identity-2, #0e7490); }
.eesier-friendly-identity--3 { --efi-color: var(--color-identity-3, #0f766e); }
.eesier-friendly-identity--4 { --efi-color: var(--color-identity-4, #4338ca); }
.eesier-friendly-identity--5 { --efi-color: var(--color-identity-5, #7e22ce); }
.eesier-friendly-identity--6 { --efi-color: var(--color-identity-6, #a21caf); }
.eesier-friendly-identity--7 { --efi-color: var(--color-identity-7, #be123c); }
.eesier-friendly-identity--8 { --efi-color: var(--color-identity-8, #c2410c); }

.eesier-friendly-identity > .eesier-friendly-identity__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-medium, 24px);
    height: var(--space-medium, 24px);
    border-radius: var(--radius-pill, 999px);
    background: var(--efi-color);
    color: var(--color-text-on-dark, #ffffff);
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.eesier-friendly-identity > .eesier-friendly-identity__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dark .eesier-friendly-identity,
.eesier-friendly-identity.dark {
    --efi-text: var(--color-text-on-dark, #ffffff);
}