/*
 * Shared public user identity colors.
 * Fill follows the Story Access ribbon background.
 * The adaptive edge mixes the role color with the active palette text color,
 * so it darkens in Light mode and brightens in Dark mode automatically.
 */
.user-role-name {
    font-weight: 600;
}

/* Role names and mentions derive from the configured Story Access ribbon background.
   The active palette text color is mixed in only to raise contrast:
   Light mode naturally darkens the role color; Dark mode naturally brightens it. */
.user-role-name--guest,
.user-role-mention--guest {
    --user-role-fill: var(--user-role-guest-fill, currentColor);
}
.user-role-name--member,
.user-role-mention--member {
    --user-role-fill: var(--user-role-member-fill, currentColor);
}
.user-role-name--smember,
.user-role-mention--smember {
    --user-role-fill: var(--user-role-smember-fill, currentColor);
}
/* Editor is not a fifth reading label; it follows the ADMIN reading-label color. */
.user-role-name--editor,
.user-role-mention--editor,
.user-role-name--admin,
.user-role-mention--admin {
    --user-role-fill: var(--user-role-admin-fill, currentColor);
}

:is(
    .user-role-name--guest,
    .user-role-name--member,
    .user-role-name--smember,
    .user-role-name--editor,
    .user-role-name--admin,
    .user-role-mention--guest,
    .user-role-mention--member,
    .user-role-mention--smember,
    .user-role-mention--editor,
    .user-role-mention--admin
) {
    color: color-mix(in srgb, var(--user-role-fill) 58%, var(--color-text) 42%);
}

/* Shared avatar ring variables for all public surfaces. */
.role-avatar--guest,
.comment-avatar--guest,
.info-comment-avatar--guest,
.home-comment-avatar--guest,
.editor-comment-avatar--guest,
.community-avatar.role-guest { --user-avatar-role: var(--user-role-guest-fill, #55647A); }
.role-avatar--member,
.comment-avatar--member,
.info-comment-avatar--member,
.home-comment-avatar--member,
.editor-comment-avatar--member,
.community-avatar.role-member { --user-avatar-role: var(--user-role-member-fill, #2F6FE0); }
.role-avatar--smember,
.comment-avatar--smember,
.info-comment-avatar--smember,
.home-comment-avatar--smember,
.editor-comment-avatar--smember,
.community-avatar.role-smember { --user-avatar-role: var(--user-role-smember-fill, #E0A83C); }
.role-avatar--editor,
.comment-avatar--editor,
.info-comment-avatar--editor,
.home-comment-avatar--editor,
.editor-comment-avatar--editor,
.community-avatar.role-editor { --user-avatar-role: var(--user-role-admin-fill, #7C4FE0); }
.role-avatar--admin,
.comment-avatar--admin,
.info-comment-avatar--admin,
.home-comment-avatar--admin,
.editor-comment-avatar--admin,
.community-avatar.role-admin { --user-avatar-role: var(--user-role-admin-fill, #7C4FE0); }

/* Do not change avatar geometry here; only synchronize its visible role ring.
   The extra 1px outline is adaptive, so the same role ring remains visible in Light/Dark. */
.role-avatar,
.comment-avatar,
.info-comment-avatar,
.home-comment-avatar,
.editor-comment-avatar,
.community-avatar[class*="role-"] {
    --user-avatar-role-edge: color-mix(in srgb, var(--user-avatar-role, currentColor) 68%, var(--color-text) 32%);
    border-color: var(--user-avatar-role, currentColor);
    outline: 1px solid var(--user-avatar-role-edge);
    outline-offset: 1px;
}

/* Story access ribbons are shared by Standard, Soft Aura and Quest.
   Keep the configured role background/text; only add one slightly stronger adaptive edge. */
.story-ribbon {
    --story-ribbon-edge: color-mix(in srgb, var(--story-ribbon-bg, #55647A) 68%, var(--color-text) 32%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--story-ribbon-text, #EEF2F7) 30%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--story-ribbon-edge) 46%, transparent),
        0 0 0 1px var(--story-ribbon-edge),
        0 3px 7px color-mix(in srgb, #000 30%, transparent);
}

/* Private profile role pill uses the same adaptive edge without changing its configured colors. */
.profile-page .profile-role-pill {
    --profile-role-edge: color-mix(in srgb, var(--profile-role-bg, #55647A) 68%, var(--color-text) 32%);
    border: 1px solid var(--profile-role-edge);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--profile-role-text, #EEF2F7) 14%, transparent);
}

/* Public profile links inside existing username renderers. Keep role color/weight intact. */
.user-role-profile-link {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.user-role-profile-link:hover,
.user-role-profile-link:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
}