/* Keep article statistics separate from the three equally sized actions. */
.community-detail-engagement {
    display: block;
    padding: .75rem 0;
    border-color: #e2e8f0;
}

.community-detail-engagement-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .65rem;
}

.community-detail-reaction-count {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .4rem .5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #52647a;
    font-size: .8125rem;
    line-height: 1.4;
}

.community-detail-reaction-count [data-reaction-total] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.community-detail-engagement-summary > .community-quality-score {
    min-width: 0;
    width: auto;
    margin: 0 0 0 auto;
    align-items: center;
    gap: .5rem;
}

.community-detail-engagement .quality-score-total {
    width: auto;
    align-items: baseline;
    gap: .25rem;
}

.community-detail-engagement .quality-score-total b { font-size: .9375rem; }
.community-detail-engagement .quality-score-total small,
.community-detail-engagement .quality-score-split { font-size: .75rem; }
.community-detail-engagement .quality-score-split { flex-wrap: wrap; white-space: normal; }
.community-detail-engagement .quality-score-split > span { white-space: nowrap; }
.community-detail-engagement .community-quality-score > form { width: auto; margin: 0; }

.community-detail-engagement .community-score-toggle,
.community-detail-engagement .community-admin-score > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .5rem .75rem;
    border-radius: 10px;
    font-size: .8125rem;
    line-height: 1.4;
    text-align: center;
}

.community-detail-engagement .community-admin-score { min-width: 0; max-width: 100%; }
.community-detail-engagement .community-admin-score[open] { width: 100%; }
.community-detail-engagement .community-admin-score > form {
    grid-template-columns: minmax(0, 1fr);
    margin-top: .5rem;
}

.community-detail-engagement-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}

.community-detail-engagement-actions .community-reaction-control { min-width: 0; }

.community-detail-engagement-actions .community-reaction-main,
.community-detail-engagement-actions > [data-community-subscription],
.community-detail-engagement-actions > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 100%;
    margin: 0;
    padding: .6rem .5rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #41546c;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.community-detail-engagement-actions > a > b { font: inherit; }
.community-detail-engagement-actions .community-reaction-main > span:first-child,
.community-detail-engagement-actions > [data-community-subscription] > span:first-child,
.community-detail-engagement-actions > a > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    line-height: 1;
}

.community-detail-reaction-count:hover,
.community-detail-engagement-actions .community-reaction-main:hover,
.community-detail-engagement-actions > [data-community-subscription]:hover,
.community-detail-engagement-actions > a:hover {
    border-color: #b7cde2;
    background: #edf4fb;
    color: #185989;
}

.community-detail-engagement-actions .community-reaction-control.active .community-reaction-main,
.community-detail-engagement-actions [data-community-subscription].active {
    border-color: #b7cde2;
    background: #eaf3fc;
    color: #185989;
}

.community-detail-engagement :is(button, a, summary):focus-visible {
    outline: 2px solid #168bc5;
    outline-offset: 3px;
}

.community-detail-engagement-actions > [data-community-subscription]:disabled { cursor: wait; opacity: .65; }

/* Anchor the picker to the entire action row so it fits inside narrow cards. */
.community-detail-engagement-actions .community-reaction-picker {
    position: absolute;
    left: 0;
    right: auto;
    bottom: calc(100% + .45rem);
    width: min(340px, calc(300% + 1rem));
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.community-detail-engagement-actions .community-reaction-picker button {
    min-width: 0;
    border: 0;
    background: #f8fafc;
}

.community-detail-engagement-actions .community-reaction-picker button:hover {
    background: #eaf3fc;
}

.community-detail-engagement-actions .community-reaction-feedback {
    z-index: 1;
    bottom: calc(100% + .35rem);
    padding: .2rem .4rem;
    border-radius: 6px;
    background: #fff;
}

@media (max-width: 639.98px) {
    .community-detail-engagement-summary { align-items: stretch; gap: .35rem; }
    .community-detail-reaction-count { align-self: flex-start; }
    .community-detail-engagement-summary > .community-quality-score {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
        margin: 0;
        padding: .5rem;
        border-radius: 10px;
        background: #f8fafc;
    }
    .community-detail-engagement .community-quality-score > form,
    .community-detail-engagement .community-admin-score {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }
    .community-detail-engagement .community-score-toggle { width: 100%; }
}

@media (max-width: 575.98px) {
    .community-detail-engagement-actions .community-reaction-main,
    .community-detail-engagement-actions > [data-community-subscription],
    .community-detail-engagement-actions > a {
        flex-direction: column;
        min-height: 64px;
        padding: .5rem .25rem;
        font-size: .8125rem;
    }
}