/* Community Experts — connected expert/follow control refinement.
   Keeps the existing expert badge, adds a clean monochrome user-plus segment,
   and prevents the icon from colliding with the Follow label. */

.ce_post_identity {
    gap: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

.ce_post_identity .ce_badges.ce_badges--post {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    gap: .32rem;
}

.ce_post_identity--has-follow .ce_badges.ce_badges--post .ce_badge:last-child {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

.ce_post_identity--standalone .ce_badges.ce_badges--post .ce_badge:last-child {
    border-start-end-radius: .34rem !important;
    border-end-end-radius: .34rem !important;
}

.ce_post_identity .ce_follow_button.ce_follow_button--topic {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 0 0 -1px !important;
    padding: .18rem .5rem .18rem .44rem !important;
    gap: .28rem !important;
    border: 1px solid rgb(255 255 255 / .24) !important;
    border-left-color: rgb(255 255 255 / .34) !important;
    border-radius: 0 .34rem .34rem 0 !important;
    background: #35556f !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .12) !important;
    font: inherit !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em;
    text-decoration: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    overflow: visible !important;
    z-index: 30;
}

.ce_post_identity .ce_follow_button.ce_follow_button--topic:hover,
.ce_post_identity .ce_follow_button.ce_follow_button--topic:focus-visible,
.ce_post_identity .ce_follow_button.ce_follow_button--topic.ce_follow_button--active {
    background: #29475f !important;
    color: #fff !important;
    border-color: rgb(255 255 255 / .34) !important;
}

.ce_follow_button--topic .ce_follow_button__icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 1rem !important;
    width: 1rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: currentColor !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
}

.ce_follow_button--topic .ce_follow_button__svg {
    display: block !important;
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
    pointer-events: none !important;
}

.ce_follow_button--topic .ce_follow_button__svg--following {
    display: none !important;
}

.ce_follow_button--topic.ce_follow_button--active .ce_follow_button__svg--add {
    display: none !important;
}

.ce_follow_button--topic.ce_follow_button--active .ce_follow_button__svg--following {
    display: block !important;
}

.ce_follow_button--topic .ce_follow_button__text {
    position: static !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    border: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.ce_follow_popup {
    position: absolute !important;
    left: 50% !important;
    bottom: calc(100% + .62rem) !important;
    min-width: max-content !important;
    max-width: 18rem !important;
    padding: .46rem .68rem !important;
    border: 0 !important;
    border-radius: .42rem !important;
    background: #3d3d40 !important;
    color: #fff !important;
    box-shadow: 0 .24rem .75rem rgb(0 0 0 / .26) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, .18rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    z-index: 10000 !important;
}

.ce_follow_popup::after {
    content: '';
    position: absolute;
    top: calc(100% - .21rem);
    left: 50%;
    width: .46rem;
    height: .46rem;
    background: #3d3d40;
    transform: translateX(-50%) rotate(45deg);
}

.ce_follow_button--topic:hover .ce_follow_popup,
.ce_follow_button--topic:focus-visible .ce_follow_popup {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ce_follow_button--busy {
    opacity: .62;
    cursor: progress;
}

@media (hover: none) {
    .ce_follow_popup { display: none !important; }
}

@media (max-width: 600px) {
    .ce_post_identity .ce_follow_button.ce_follow_button--topic {
        padding: .16rem .42rem .16rem .38rem !important;
        gap: .22rem !important;
        font-size: .68rem !important;
    }
    .ce_follow_button--topic .ce_follow_button__icon,
    .ce_follow_button--topic .ce_follow_button__svg {
        width: .92rem !important;
        min-width: .92rem !important;
        height: .92rem !important;
        flex-basis: .92rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce_follow_popup { transition: none; }
}

@media (forced-colors: active) {
    .ce_post_identity .ce_follow_button.ce_follow_button--topic {
        background: ButtonFace !important;
        color: ButtonText !important;
        border: 1px solid ButtonText !important;
        margin-left: -1px !important;
    }
    .ce_follow_popup,
    .ce_follow_popup::after {
        forced-color-adjust: auto;
        background: Canvas !important;
        color: CanvasText !important;
        border: 1px solid CanvasText !important;
    }
}


/* Topic refinement: icon-only Follow segment. The popup/aria-label carries the
   Follow/Unfollow wording, while the segment stretches to exactly the same
   cross-axis height as the adjacent Community Expert badge. */
.ce_post_identity .ce_follow_button.ce_follow_button--topic {
    align-self: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 .46rem !important;
    gap: 0 !important;
}

.ce_follow_button--topic .ce_follow_button__text {
    display: none !important;
}

.ce_follow_button--topic .ce_follow_button__icon {
    flex: 0 0 .92rem !important;
    width: .92rem !important;
    min-width: .92rem !important;
    height: .92rem !important;
}

.ce_follow_button--topic .ce_follow_button__svg {
    width: .92rem !important;
    height: .92rem !important;
}

@media (max-width: 600px) {
    .ce_post_identity .ce_follow_button.ce_follow_button--topic {
        padding: 0 .4rem !important;
    }
}


/* RC7: keep the expert tooltip fully inside the post card when the connected
   control sits against the right edge. It intentionally opens to the left. */
.ce_post_identity .ce_follow_button--topic .ce_follow_popup {
    left: auto !important;
    right: -.18rem !important;
    max-width: min(18rem, calc(100vw - 2rem)) !important;
    transform: translate(0, .18rem) !important;
}

.ce_post_identity .ce_follow_button--topic .ce_follow_popup::after {
    left: auto !important;
    right: .62rem !important;
    transform: rotate(45deg) !important;
}

.ce_post_identity .ce_follow_button--topic:hover .ce_follow_popup,
.ce_post_identity .ce_follow_button--topic:focus-visible .ce_follow_popup {
    transform: translate(0, 0) !important;
}


/* RC11 — connected/standalone Community Expert pill state.
   A viewer who cannot/should not follow the author sees one complete rounded
   badge. Only a real adjacent Follow control converts it into a segmented pill. */
.ce_post_identity--standalone .ce_badges.ce_badges--post {
    border-radius: .34rem;
}

.ce_post_identity--standalone .ce_follow_button--topic {
    display: none !important;
}


/* RC12 — Community Expert badge tooltips.
   Community Expert badges should not use the browser's native title popup.
   They now use the same dark custom tooltip language as Follow, Message,
   Email, Website, Gender and Badge Awards. */
.ce_badge {
    position: relative;
}

.ce_badge .ce_badge_popup {
    left: 50% !important;
    bottom: calc(100% + .62rem) !important;
    transform: translate(-50%, .18rem);
    z-index: 10001 !important;
}

.ce_badge .ce_badge_popup::after {
    content: '';
    position: absolute;
    top: calc(100% - .21rem);
    left: 50%;
    width: .46rem;
    height: .46rem;
    background: #3d3d40;
    transform: translateX(-50%) rotate(45deg);
}

.ce_badge:hover .ce_badge_popup,
.ce_badge:focus-within .ce_badge_popup {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (hover: none) {
    .ce_badge .ce_badge_popup {
        display: none !important;
    }
}


/* RC13 — polished Community Expert badge tooltip.
   Uses the same custom tooltip language as Follow / Send Message, while
   opening inward from the right edge so the complete popup remains visible. */
.ce_post_identity,
.ce_post_identity .ce_badges,
.ce_post_identity .ce_badge {
    overflow: visible !important;
}

.ce_post_identity .ce_badge {
    position: relative !important;
}

.ce_post_identity .ce_badge .ce_badge_popup {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    bottom: calc(100% + .62rem) !important;
    min-width: max-content !important;
    max-width: min(18rem, calc(100vw - 2rem)) !important;
    padding: .46rem .68rem !important;
    border: 0 !important;
    border-radius: .42rem !important;
    background: #3d3d40 !important;
    color: #fff !important;
    box-shadow: 0 .24rem .75rem rgb(0 0 0 / .26) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, .18rem) !important;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    z-index: 10002 !important;
}

.ce_post_identity .ce_badge .ce_badge_popup::after {
    content: '' !important;
    position: absolute !important;
    top: calc(100% - .21rem) !important;
    left: auto !important;
    right: .68rem !important;
    width: .46rem !important;
    height: .46rem !important;
    background: #3d3d40 !important;
    transform: rotate(45deg) !important;
}

.ce_post_identity .ce_badge:hover .ce_badge_popup,
.ce_post_identity .ce_badge:focus-within .ce_badge_popup {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(0, 0) !important;
}

@media (hover: none) {
    .ce_post_identity .ce_badge .ce_badge_popup {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce_post_identity .ce_badge .ce_badge_popup {
        transition: none !important;
    }
}