.groups-page-heading,
.group-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    margin:0 0 22px;
}
.groups-page-heading h1,
.group-hero h1{margin:0 0 8px}
.groups-page-heading p,
.group-hero p{margin:0;color:#5b6b82;max-width:780px}

.group-card-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.group-card{
    display:block;
    min-height:230px;
    padding:22px;
    border:1px solid #d2dce7;
    border-radius:15px;
    background:#fff;
    color:#10263d;
    text-decoration:none;
    box-shadow:0 5px 16px rgba(15,39,65,.07);
}
.group-card:hover{
    transform:translateY(-2px);
    border-color:#0b5790;
    box-shadow:0 10px 24px rgba(15,39,65,.12);
}
.group-card h2{margin:16px 0 8px}
.group-card p{color:#5b6b82}
.group-card-topline,
.group-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 13px;
    color:#64748b;
    font-size:.82rem;
}
.group-role-badge{
    padding:4px 9px;
    border-radius:999px;
    background:#e9f1f8;
    color:#164c73;
    font-weight:800;
}
.role-lead{background:#f9e6a9;color:#684b00}
.role-coordinator{background:#dcefe4;color:#195c38}
.role-oversight{background:#e7e3f7;color:#4d3983}

.group-hero{
    padding:24px;
    border:1px solid #d3dde8;
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 16px rgba(15,39,65,.06);
}
.group-hero-kicker{
    color:#0b5790;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.group-hero-actions{display:flex;gap:8px;flex-wrap:wrap}

.group-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:22px;
}
.group-main-column{min-width:0}
.group-sidebar{display:grid;align-content:start;gap:16px}
.group-sidebar .card{margin:0}
.group-compose summary,
.group-member-directory summary{
    cursor:pointer;
    font-weight:900;
    font-size:1.08rem;
}
.group-feed{display:grid;gap:18px;margin-top:18px}
.group-post{
    overflow:hidden;
    border:1px solid #d2dce7;
    border-radius:15px;
    background:#fff;
    box-shadow:0 4px 13px rgba(15,39,65,.06);
}
.post-type-urgent{border-left:6px solid #c62828}
.post-type-action_required{border-left:6px solid #d97706}
.post-type-announcement{border-left:6px solid #0b5790}
.group-post-header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:20px 20px 14px;
    border-bottom:1px solid #e4eaf0;
}
.group-post-header h2{margin:7px 0 3px}
.group-post-badges{display:flex;flex-wrap:wrap;gap:7px}
.group-post-badges span{
    padding:3px 8px;
    border-radius:999px;
    background:#eef3f7;
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
}
.group-post-badges .is-pinned{background:#fff1b8;color:#694e00}
.group-post-byline{margin:0;color:#68788d;font-size:.83rem}
.group-post-tools{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}
.group-post-tools form{margin:0}
.group-post-tools .button{padding:7px 10px;font-size:.77rem}
.group-post-body{padding:20px;line-height:1.65}
.group-file-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 20px 18px;
}
.group-file-list a{
    padding:9px 11px;
    border:1px solid #cdd8e4;
    border-radius:9px;
    background:#f7fafc;
    text-decoration:none;
}
.group-file-list small{display:block;color:#66768a}
.group-ack-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    border-top:1px solid #e4eaf0;
    background:#fffaf0;
}
.group-ack-row form{margin:0}
.group-replies{
    padding:18px 20px 20px;
    border-top:1px solid #e4eaf0;
    background:#f8fafc;
}
.group-replies h3{margin-top:0}
.group-reply{
    margin:0 0 11px;
    padding:12px;
    border:1px solid #dbe3eb;
    border-radius:10px;
    background:#fff;
}
.group-reply span{
    margin-left:7px;
    color:#718096;
    font-size:.76rem;
}
.group-reply p{margin:7px 0 0}
.group-reply-form textarea{width:100%}
.group-reply-form button{margin-top:7px}
.group-person{
    padding:10px 0;
    border-bottom:1px solid #e5ebf1;
}
.group-person:last-child{border-bottom:0}
.group-person strong,.group-person span{display:block}
.group-person span{margin-top:2px;color:#65758a;font-size:.8rem}

.group-admin-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:20px;
    margin-bottom:20px;
}
.group-admin-layout>.card{margin:0}
.group-setting-check{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:10px 0;
}
.group-setting-check input{width:auto;margin-top:4px}
.group-admin-list,
.group-membership-table{display:grid;gap:9px}
.group-admin-row,
.group-membership-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px;
    border:1px solid #d8e1ea;
    border-radius:10px;
}
.group-admin-row strong,.group-admin-row span,
.group-membership-row strong,.group-membership-row span{display:block}
.group-admin-row span,.group-membership-row span{
    margin-top:3px;color:#65758a;font-size:.8rem
}
.group-membership-admin{margin-top:20px}
.group-add-person{
    padding:16px;
    border:1px solid #d8e1ea;
    border-radius:12px;
    background:#f8fafc;
}
.group-archive-control{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #d8e1ea;
}
.group-empty-state{text-align:center;padding:38px}

@media(max-width:960px){
    .group-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .group-layout{grid-template-columns:1fr}
    .group-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
    .groups-page-heading,.group-hero,.group-post-header{
        display:block;
    }
    .group-hero-actions,.groups-page-heading>.button{margin-top:14px}
    .group-card-grid,.group-admin-layout,.group-sidebar{grid-template-columns:1fr}
    .group-card{min-height:0}
    .group-post-tools{margin-top:12px}
    .group-admin-row,.group-membership-row{
        align-items:flex-start;
        display:block;
    }
    .group-admin-row .actions,
    .group-membership-row form{margin-top:10px}
}


/* Version 7.3.0 — collapsible group discussions and unread state */
.group-feed{padding-inline:1px}
.group-post{display:block}
.group-post-summary{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:20px;cursor:pointer;list-style:none;background:#fff;
}
.group-post-summary::-webkit-details-marker{display:none}
.group-post-summary-main{min-width:0;flex:1}
.group-post-summary h2{margin:7px 0 3px;overflow-wrap:anywhere}
.group-post-chevron{
    flex:0 0 12px;width:12px;height:12px;margin:9px 4px 0 8px;
    border-right:2px solid #526579;border-bottom:2px solid #526579;
    transform:rotate(45deg);transition:transform .18s ease
}
.group-post[open] .group-post-chevron{transform:rotate(225deg);margin-top:14px}
.group-post-expanded{border-top:1px solid #e4eaf0}
.group-post-expanded>.group-post-tools{padding:14px 20px 0}
.group-post.is-unread{
    border:2px solid #2ba86b;
    box-shadow:0 0 0 3px rgba(43,168,107,.13),0 5px 16px rgba(15,39,65,.08)
}
.group-post.is-unread .group-post-summary{background:#f7fff9}
.group-unread-badge{background:#d9f6e5!important;color:#12643b!important}
.group-post[open]{box-shadow:0 8px 22px rgba(15,39,65,.10)}
@media(max-width:700px){
    .group-main-column{min-width:0;width:100%}
    .group-feed{width:100%;padding:0 10px;box-sizing:border-box}
    .group-post{width:100%;margin:0;box-sizing:border-box}
    .group-post-summary{padding:17px 18px}
    .group-post-summary h2{font-size:1.35rem;line-height:1.2}
    .group-post-byline{line-height:1.45}
    .group-post-expanded>.group-post-tools{padding:14px 18px 0}
    .group-post-body,.group-replies{padding-left:18px;padding-right:18px}
}


/* Version 7.4.0 — group leadership contact visibility */
.group-contact-card h2{margin-bottom:5px}
.group-contact-help{
    margin:0 0 8px;
    color:#65758a;
    font-size:.8rem;
    line-height:1.45;
}
.group-contact-person{padding:12px 0}
.group-contact-links{
    display:grid;
    gap:6px;
    margin-top:8px;
}
.group-contact-link{
    display:flex;
    align-items:center;
    gap:7px;
    width:100%;
    padding:8px 10px;
    border:1px solid #cddbe7;
    border-radius:8px;
    background:#f7fbff;
    color:#0d5b89;
    font-size:.82rem;
    font-weight:700;
    line-height:1.25;
    overflow-wrap:anywhere;
    text-decoration:none;
}
.group-contact-link:hover,
.group-contact-link:focus-visible{
    border-color:#0d5b89;
    background:#eaf5fc;
    text-decoration:none;
}
.group-contact-private,
.group-contact-empty{
    display:block;
    margin-top:7px;
    color:#758397;
    font-size:.78rem;
    font-style:italic;
}

.group-contact-visibility{
    margin:14px 0;
    padding:13px;
    border:1px solid #d8e1ea;
    border-radius:10px;
    background:#fff;
}
.group-contact-visibility legend{
    padding:0 5px;
    font-weight:800;
    color:#263548;
}
.group-contact-visibility small{
    display:block;
    margin-top:8px;
    color:#65758a;
    line-height:1.4;
}
.group-switch{
    display:flex;
    align-items:center;
    gap:9px;
    margin:9px 0;
    cursor:pointer;
    font-weight:700;
    color:#344054;
}
.group-switch input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.group-switch-control{
    position:relative;
    flex:0 0 42px;
    width:42px;
    height:24px;
    border-radius:999px;
    background:#9aa7b5;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
    transition:background .16s ease;
}
.group-switch-control::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .16s ease;
}
.group-switch input:checked + .group-switch-control{
    background:#16875f;
}
.group-switch input:checked + .group-switch-control::after{
    transform:translateX(18px);
}
.group-switch input:focus-visible + .group-switch-control{
    outline:3px solid rgba(13,91,137,.28);
    outline-offset:2px;
}
.group-membership-identity{min-width:220px}
.group-admin-contact-preview{overflow-wrap:anywhere}
.group-membership-actions{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
}
.group-contact-toggle-form{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.group-contact-toggle-form .group-switch{margin:0}
.group-contact-toggle-form button{white-space:nowrap}

@media(max-width:700px){
    .group-contact-link{
        min-height:44px;
        font-size:.9rem;
    }
    .group-membership-actions,
    .group-contact-toggle-form{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }
    .group-contact-toggle-form{margin-top:12px}
    .group-contact-toggle-form button,
    .group-membership-actions>form:last-child button{
        width:100%;
    }
}


/* Version 7.5.0 — Officer/volunteer contact access */
.contact-privacy-intro{
    margin-bottom:18px;
}
.contact-privacy-list{
    display:grid;
    gap:18px;
    padding-bottom:28px;
}
.contact-privacy-group{
    display:grid;
    grid-template-columns:minmax(240px,1fr) minmax(320px,1.2fr);
    gap:28px;
    align-items:start;
}
.contact-privacy-group h2{
    margin-top:0;
}
.contact-privacy-current{
    color:#5f7085;
    line-height:1.65;
    overflow-wrap:anywhere;
}
.contact-privacy-form{
    display:grid;
    gap:8px;
}
.contact-privacy-form .group-switch{
    padding:10px 0;
    border-bottom:1px solid #e2e8ef;
}
.contact-privacy-form button{
    justify-self:start;
    margin-top:8px;
}
.volunteer-contact-directory{
    border-top:5px solid #2b6e9f;
}

@media(max-width:760px){
    .contact-privacy-group{
        grid-template-columns:1fr;
        gap:12px;
    }
    .contact-privacy-form button{
        width:100%;
    }
}