/* Sibling overlays preserve the site's direct-child avatar sizes and badges. */
.story-avatar-ring[data-story-avatar-ring] {
    position: absolute;
    display: block;
    z-index: 2;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    pointer-events: none;
    user-select: none;
    transform: none;
}
.story-avatar-ring-track {
    stroke: var(--story-avatar-ring-separator, #fff);
    stroke-width: calc(var(--story-avatar-stroke, 2px) + var(--story-avatar-photo-gap, 1.7px));
    pointer-events: stroke;
}
.story-avatar-ring-segment {
    stroke-width: var(--story-avatar-stroke, 2px);
    stroke-linecap: round;
    pointer-events: stroke;
}
.story-avatar-is-active {
    clip-path: circle(calc(50% - var(--story-avatar-photo-inset, 4.4px)) at 50% 50%);
}
.story-avatar-ring :is(.story-avatar-ring-track, .story-avatar-ring-segment) {
    cursor: pointer;
}
/* Presence markers used to have z-index:auto, so the ring could cross them.
   Include outer wrappers: sidebar avatars sit in a link beside their marker. */
:is(.avatar-container, .author-avatar-link, .comment-avatar-shell, .avatar-wrapper, .profile-avatar-container, .dm-user-avatar, .blog-editor-author-avatar):has(.story-avatar-ring)
    :is(.online-indicator, .comment-online-indicator, .sidebar-online-indicator, .offline-label),
.profile-avatar-container:has(.story-avatar-ring) > .edit-icon,
.vk-av-wrap:has(.story-avatar-ring) > .vk-h-badge {
    z-index: 3;
}
[data-story-avatar-user-id].story-avatar-is-active,
[data-story-avatar-username].story-avatar-is-active {
    cursor: pointer;
    pointer-events: auto !important;
}
.story-avatar-is-active[role="button"]:focus-visible {
    outline: none;
}
.story-avatar-is-active:focus-visible + .story-avatar-ring {
    border-radius: 50%;
    outline: 2px solid #3ca3f3;
    outline-offset: 2px;
}
.story-card-avatar:has(> .story-avatar-is-active) {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.story-card-avatar > span.story-avatar-is-active {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #454a53;
}
.story-card-avatar, .story-viewer-header, .story-side-copy {
    --story-avatar-ring-separator: #25292f;
}