/* /connect/views/groups.css — Member "Groups" v2 ("Vibrant Community")
 * Scoped refinement layer loaded AFTER views.css so it wins the cascade.
 * New markup uses the `groupsx-` prefix; existing `.grp-*` / `.bcc-*` class
 * names are kept (and upgraded here) so no other code has to change.
 *
 * Colour comes only from --bcc-* design tokens. The only literal colours are
 * neutral scrim/shadow alpha (rgba(0,0,0,a) / rgba(255,255,255,a)) and the
 * on-gradient ink #fff — none of them are thematic brand hex.
 *
 * Breakpoints mirror the shell: desktop >= 1025 | tablet 768-1024 |
 * mobile 481-767 | small phone <= 480.
 * ================================================================ */

/* Hidden attribute must beat the flex/grid display rules below. */
#bcc-view-groups [hidden] { display: none !important; }

/* ================================================================
   1. MAIN PAGE  (.groupsx-*)
=============================================================== */
.groupsx-main {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s8);
  width:          100%;
}

/* ── Hero ────────────────────────────────────────────────────── */
.groupsx-hero {
  background:    linear-gradient(135deg, var(--bcc-primary) 0%, var(--bcc-primary-hover) 52%, var(--bcc-accent) 132%);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-xl);
  box-shadow:    var(--bcc-shadow-2);
  padding:       var(--bcc-s12) var(--bcc-s10);
  position:      relative;
  overflow:      hidden;
}
.groupsx-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 86% 12%, rgba(255,255,255,.12) 0%, transparent 54%),
              linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.24) 100%);
  pointer-events: none;
}
.groupsx-hero-inner {
  position:   relative;
  z-index:    1;
  max-width:  560px;
}
.groupsx-hero-chip {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  margin-bottom:   var(--bcc-s3);
  border-radius:   var(--bcc-r-md);
  background:      rgba(255,255,255,.16);
  color:           #fff;
  font-size:       1.25rem;
  backdrop-filter: blur(4px);
}
.groupsx-hero-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-4xl);
  font-weight:    600;
  letter-spacing: -.01em;
  line-height:    1.1;
  color:          #fff;
  margin:         0 0 var(--bcc-s2);
}
.groupsx-hero-sub {
  font-size:   var(--bcc-t-md);
  font-weight: 400;
  color:       rgba(255,255,255,.82);
  margin:      0;
}

/* ── Sections ────────────────────────────────────────────────── */
.groupsx-section { display: flex; flex-direction: column; gap: var(--bcc-s4); }
.groupsx-section-head { margin-bottom: 0; }
.groupsx-section-title {
  font-family:    var(--bcc-font-display);
  font-weight:    600;
  letter-spacing: .002em;
  margin:         0;
}
.groupsx-list { display: flex; flex-direction: column; gap: var(--bcc-s5); }

/* ── Discover toolbar ────────────────────────────────────────── */
.groupsx-toolbar {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  padding:        var(--bcc-s5);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  box-shadow:     var(--bcc-shadow-1);
}
.groupsx-discover-head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  flex-wrap:       wrap;
  margin:          0;
}
.groupsx-discover-title { display: flex; flex-direction: column; gap: 2px; }
.groupsx-discover-sub {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-3);
  margin:    0;
}
.groupsx-search {
  max-width: 320px;
  min-width: 220px;
  flex:      0 1 320px;
}
.groupsx-search input { height: 42px; }
.groupsx-filter-bar {
  margin:  0;
  padding: 0;
  gap:     var(--bcc-s2);
}
.groupsx-filter-bar .bcc-pill {
  height:     34px;
  padding:    0 var(--bcc-s4);
  font-size:  var(--bcc-t-sm);
}

/* ── Grids (3 -> 2 -> 1) ─────────────────────────────────────── */
.groupsx-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   var(--bcc-s5);
}

/* ================================================================
   2. GROUP CARD  (cover-forward)
=============================================================== */
.groupsx-card {
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  box-shadow:     var(--bcc-shadow-1);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     border-color var(--bcc-dur-2) var(--bcc-ease),
                  box-shadow   var(--bcc-dur-2) var(--bcc-ease),
                  transform    var(--bcc-dur-2) var(--bcc-ease);
}
.groupsx-card:hover {
  border-color: var(--bcc-border-strong);
  box-shadow:   var(--bcc-shadow-2);
  transform:    translateY(-3px);
}
.groupsx-card:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus), var(--bcc-shadow-2);
}
.groupsx-card:active { transform: translateY(0); }

/* ── Cover banner + scrim + type badge ───────────────────────── */
.groupsx-card-banner {
  position:  relative;
  height:    132px;
  overflow:  hidden;
  flex-shrink: 0;
}
.groupsx-card-scrim {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.42) 100%);
  pointer-events: none;
}
.groupsx-card-badge {
  position:    absolute;
  left:        var(--bcc-s4);
  bottom:      var(--bcc-s3);
  z-index:     2;
  background:  rgba(0,0,0,.42);
  color:       #fff;
  backdrop-filter: blur(4px);
  border:      1px solid rgba(255,255,255,.24);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Logo overlap ────────────────────────────────────────────── */
.groupsx-card-logo-wrap {
  width:        56px;
  height:       56px;
  border-radius:var(--bcc-r-lg);
  border:       3px solid var(--bcc-surface-1);
  overflow:     hidden;
  margin:       -30px 0 0 var(--bcc-s5);
  z-index:      1;
  box-shadow:   var(--bcc-shadow-1);
}
.grp-card-logo-img,
.grp-card-logo-initials { border-radius: inherit; }

/* ── Body ────────────────────────────────────────────────────── */
.groupsx-card-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  flex:           1;
  padding:        var(--bcc-s3) var(--bcc-s5) var(--bcc-s4);
}
.groupsx-card-name {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-xl);
  font-weight:    600;
  letter-spacing: -.005em;
  line-height:    1.25;
  word-break:     break-word;
  margin-top:     var(--bcc-s1);
}
.groupsx-card-meta {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-3);
}
.groupsx-card-meta .bcc-icon { color: var(--bcc-primary); }
.groupsx-card-desc {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.55;
  margin:      var(--bcc-s2) 0 0;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
}

/* ── Footer ──────────────────────────────────────────────────── */
.groupsx-card-footer {
  justify-content: flex-start;
  gap:             var(--bcc-s2);
  padding:         var(--bcc-s3) var(--bcc-s5);
  border-top:      1px solid var(--bcc-border);
  margin-top:      auto;
}
.groupsx-card-footer .bcc-btn { width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════════════
   3. PENDING MEMBERSHIPS
   ════════════════════════════════════════════════════════════════ */
.groupsx-pending {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s4);
  background:     var(--bcc-surface-1);
  border:         1px dashed var(--bcc-border-strong);
  border-radius:  var(--bcc-r-lg);
}
.groupsx-pending-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s2);
  margin-bottom:   var(--bcc-s2);
}
.groupsx-pending-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-lg);
  font-weight:    600;
  color:          var(--bcc-ink);
  letter-spacing: .002em;
}
.groupsx-pending-card {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s3) var(--bcc-s4);
  background:  var(--bcc-surface-2);
  border:      1px solid var(--bcc-border);
  border-radius:var(--bcc-r-md);
}
.groupsx-pending-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   var(--bcc-r-sm);
  background:      var(--bcc-warning-soft);
  color:           var(--bcc-warning);
  flex-shrink:     0;
}
.groupsx-pending-info { flex: 1; min-width: 0; }
.groupsx-pending-name {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
}
.groupsx-pending-type {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-3);
}

/* ================================================================
   4. EMPTY + SKELETON STATES
=============================================================== */
.groupsx-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s3);
  padding:         var(--bcc-s10) var(--bcc-s6);
  text-align:      center;
  color:           var(--bcc-ink-3);
  font-size:       var(--bcc-t-sm);
}
.groupsx-empty p { margin: 0; max-width: 34ch; }
.groupsx-empty-full { grid-column: 1 / -1; }
.groupsx-empty-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   var(--bcc-r-pill);
  background:      var(--bcc-surface-2);
  color:           var(--bcc-ink-muted);
  font-size:       1.25rem;
}

.groupsx-post-skeleton { pointer-events: none; }
.groupsx-skeleton-head {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  margin-bottom: var(--bcc-s3);
}
.groupsx-skel-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--bcc-r-pill);
  flex-shrink: 0;
}
.groupsx-skel-lines { display: flex; flex-direction: column; gap: var(--bcc-s2); flex: 1; }

/* ================================================================
   5. DETAIL VIEW — HEADER + SEGMENTED TABS
=============================================================== */
.groupsx-detail { padding-top: 0; }

.groupsx-detail-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  margin-bottom:   var(--bcc-s4);
}
.grp-leave-btn { color: var(--bcc-danger); }
.grp-leave-btn:hover {
  background: var(--bcc-danger-soft);
  color:      var(--bcc-danger);
}

/* Cover + gradient scrim + overlapping identity */
.groupsx-detail-hero {
  position:      relative;
  border-radius: var(--bcc-r-xl);
  overflow:      hidden;
  box-shadow:    var(--bcc-shadow-2);
}
.grp-detail-cover {
  display:       block;
  width:         100%;
  height:        224px;
  object-fit:    cover;
  border-radius: var(--bcc-r-xl);
}
.grp-detail-cover-gradient { border-radius: var(--bcc-r-xl); }
.groupsx-detail-scrim {
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.groupsx-detail-identity {
  position:     absolute;
  left:         var(--bcc-s6);
  right:        var(--bcc-s6);
  bottom:       var(--bcc-s5);
  margin:       0;
  align-items:  flex-end;
  z-index:      2;
}
.grp-detail-logo-wrap {
  border-radius: var(--bcc-r-lg);
  border-color:  var(--bcc-surface-1);
  box-shadow:    var(--bcc-shadow-2);
}
.grp-detail-name {
  font-family:    var(--bcc-font-display);
  font-weight:    600;
  letter-spacing: -.005em;
  color:          #fff;
  text-shadow:    0 1px 12px rgba(0,0,0,.45);
}
.grp-detail-meta-row .bcc-badge { border-radius: var(--bcc-r-pill); }
.grp-detail-count {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s1);
  color:       rgba(255,255,255,.86);
}
.groupsx-detail-desc {
  margin:      var(--bcc-s5) 0 0;
  padding:     0 var(--bcc-s1);
}

/* ── Detail tabs -> segmented control ────────────────────────── */
.groupsx-detail-tabs {
  display:        inline-flex;
  gap:            2px;
  padding:        4px;
  background:     var(--bcc-surface-2);
  border:         1px solid var(--bcc-border-strong);
  border-bottom:  1px solid var(--bcc-border-strong);
  border-radius:  var(--bcc-r-pill);
  margin:         var(--bcc-s6) 0 var(--bcc-s6);
  align-self:     flex-start;
}
.grp-tab {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--bcc-s2);
  padding:         9px 20px;
  height:          auto;
  border:          none;
  border-bottom:   none;
  border-radius:   var(--bcc-r-pill);
  background:      transparent;
  color:           var(--bcc-ink-3);
  font-size:       var(--bcc-t-sm);
  font-weight:     600;
  cursor:          pointer;
  transition:      background var(--bcc-dur-2) var(--bcc-ease),
                   color      var(--bcc-dur-2) var(--bcc-ease),
                   box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.grp-tab .bcc-icon { color: inherit; }
.grp-tab:hover { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.grp-tab.active {
  background:  var(--bcc-surface-1);
  color:       var(--bcc-primary);
  box-shadow:  var(--bcc-shadow-1);
  border-bottom-color: transparent;
}
.grp-tab:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.grp-tab:active { transform: none; }

/* ── Panels ──────────────────────────────────────────────────── */
.groupsx-panel { outline: none; }
.groupsx-panel:focus-visible { box-shadow: var(--bcc-focus); border-radius: var(--bcc-r-lg); }

/* ================================================================
   6. CHANNEL TABS — modern segmented row
=============================================================== */
.groupsx-channels { margin-bottom: var(--bcc-s3); }
.groupsx-channel-tabs {
  display:          flex;
  gap:              2px;
  padding:          4px;
  background:       var(--bcc-surface-2);
  border:           1px solid var(--bcc-border-strong);
  border-radius:    var(--bcc-r-pill);
  overflow-x:       auto;
  scrollbar-width:  none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.groupsx-channel-tabs::-webkit-scrollbar { display: none; }
.groupsx-channel-tab {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--bcc-s1);
  flex-shrink:     0;
  height:          38px;
  padding:         0 var(--bcc-s4);
  border:          1px solid transparent;
  border-radius:   var(--bcc-r-pill);
  background:      transparent;
  color:           var(--bcc-ink-2);
  font-size:       var(--bcc-t-sm);
  font-weight:     600;
  white-space:     nowrap;
  cursor:          pointer;
  scroll-snap-align: start;
  transition:      background var(--bcc-dur-2) var(--bcc-ease),
                   color      var(--bcc-dur-2) var(--bcc-ease),
                   box-shadow var(--bcc-dur-2) var(--bcc-ease);
}
.groupsx-channel-hash {
  color:       var(--bcc-ink-muted);
  font-weight: 700;
  transition:  color var(--bcc-dur-2) var(--bcc-ease);
}
.groupsx-channel-tab:hover { background: var(--bcc-surface-3); color: var(--bcc-ink); }
.groupsx-channel-tab:hover .groupsx-channel-hash { color: var(--bcc-primary); }
.groupsx-channel-tab.active {
  background:  var(--bcc-surface-1);
  color:       var(--bcc-primary);
  box-shadow:  var(--bcc-shadow-1);
}
.groupsx-channel-tab.active .groupsx-channel-hash { color: var(--bcc-primary); }
.groupsx-channel-tab:focus-visible { outline: none; box-shadow: var(--bcc-focus); }
.groupsx-channel-note {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  margin:      0 0 var(--bcc-s4);
  padding:     var(--bcc-s3) var(--bcc-s4);
  background:  var(--bcc-surface-2);
  border:      1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
}

/* ================================================================
   7. COMPOSER
=============================================================== */
.groupsx-composer-wrap { margin-bottom: var(--bcc-s4); }
.groupsx-composer { box-shadow: var(--bcc-shadow-1); }
.groupsx-composer-inputwrap { position: relative; }
.groupsx-composer-input {
  border-radius: var(--bcc-r-md);
  min-height:    92px;
  font-size:     var(--bcc-t-md);
  line-height:   1.55;
}
.groupsx-composer-foot {
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--bcc-s2);
  margin-top:      var(--bcc-s3);
}
.groupsx-composer-foot #grp-scripture-preview { flex: 1 1 auto; min-width: 0; }
.groupsx-composer-tool { color: var(--bcc-ink-2); }
.groupsx-composer-tool .bcc-icon { color: var(--bcc-accent); }
.groupsx-scripture-preview:empty { display: none; }

/* ================================================================
   8. POST FEED — clean social cards
=============================================================== */
.groupsx-posts {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s4);
}
.groupsx-post {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    var(--bcc-shadow-1);
  padding:       var(--bcc-s5);
  margin:        0;
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-2) var(--bcc-ease);
}
.groupsx-post:hover {
  border-color: var(--bcc-border-strong);
  box-shadow:   var(--bcc-shadow-2);
}
.groupsx-post.bcc-post-announcement {
  border-left: 3px solid var(--bcc-accent);
  background:  linear-gradient(180deg, var(--bcc-accent-soft), var(--bcc-surface-1) 46%);
}
.groupsx-post-head {
  align-items:   flex-start;
  margin-bottom: var(--bcc-s3);
}
.groupsx-post-avatar {
  flex-shrink:   0;
  line-height:   0;
  border-radius: var(--bcc-r-pill);
}
.groupsx-post-avatar[data-person-id] { cursor: pointer; }
.groupsx-post-avatar:focus-visible { outline: none; box-shadow: var(--bcc-focus); border-radius: var(--bcc-r-pill); }
.groupsx-post-author { font-weight: 700; }
.groupsx-post-body {
  font-size:   var(--bcc-t-md);
  line-height: 1.62;
  color:       var(--bcc-ink);
}
.groupsx-post-body p { margin: 0 0 var(--bcc-s3); }
.groupsx-post-body p:last-child { margin-bottom: 0; }
.groupsx-post-actions {
  gap:          var(--bcc-s2);
  margin-top:   var(--bcc-s3);
  padding-top:  var(--bcc-s3);
  border-top:   1px solid var(--bcc-border);
}

/* ── Reaction pill (icon, not emoji) ─────────────────────────── */
.groupsx-reaction {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--bcc-s1);
  min-width:       52px;
  height:          34px;
  padding:         0 var(--bcc-s3);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-pill);
  background:      transparent;
  color:           var(--bcc-ink-2);
  font-size:       var(--bcc-t-xs);
  font-weight:     600;
  cursor:          pointer;
  justify-content: center;
  transition:      background var(--bcc-dur-2) var(--bcc-ease),
                   color      var(--bcc-dur-2) var(--bcc-ease),
                   border-color var(--bcc-dur-2) var(--bcc-ease);
}
.groupsx-reaction .bcc-icon { color: inherit; }
.groupsx-reaction:hover {
  background:   var(--bcc-surface-3);
  color:        var(--bcc-ink);
  border-color: var(--bcc-border-strong);
}
.groupsx-reaction.grp-react-active {
  background:   var(--bcc-primary-soft);
  color:        var(--bcc-primary);
  border-color: var(--bcc-primary);
}
.groupsx-reaction.grp-react-active .bcc-icon { color: var(--bcc-primary); }
.groupsx-reaction .grp-react-count { font-variant-numeric: tabular-nums; }
.groupsx-reaction:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* ── Action buttons ──────────────────────────────────────────── */
.groupsx-action { gap: var(--bcc-s1); color: var(--bcc-ink-2); }
.groupsx-action .bcc-icon { color: inherit; }
.groupsx-action-label { font-variant-numeric: tabular-nums; }
.bcc-bookmark-btn.bcc-bookmark-active { color: var(--bcc-primary); }
.bcc-bookmark-btn.bcc-bookmark-active .bcc-icon { color: var(--bcc-primary); }
.groupsx-verse-reactions { margin-top: var(--bcc-s2); }
.groupsx-verse-reactions:empty { display: none; }

/* ── Scripture embed ─────────────────────────────────────────── */
.groupsx-scripture {
  border-left:   3px solid var(--bcc-accent);
  background:    var(--bcc-surface-2);
  border-radius: 0 var(--bcc-r-md) var(--bcc-r-md) 0;
  padding:       var(--bcc-s3) var(--bcc-s4);
  margin:        var(--bcc-s3) 0;
}
.groupsx-scripture .bcc-scripture-ref {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s1);
  color:       var(--bcc-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.groupsx-scripture .bcc-scripture-text {
  font-style: italic;
  color:      var(--bcc-ink-2);
  margin-top: var(--bcc-s1);
}
.groupsx-scripture-remove { margin-top: var(--bcc-s2); color: var(--bcc-ink-3); }

/* ================================================================
   9. MEMBERS TAB
=============================================================== */
.groupsx-members {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  box-shadow:    var(--bcc-shadow-1);
  padding:       var(--bcc-s2) var(--bcc-s4) var(--bcc-s3);
}
.groupsx-members-head {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       var(--bcc-s3) var(--bcc-s2);
  border-bottom: 1px solid var(--bcc-border);
}
.groupsx-members-count {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:       var(--bcc-ink-3);
}
.groupsx-members-count .bcc-icon { color: var(--bcc-primary); }
.groupsx-member {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) var(--bcc-s2);
  border-radius: var(--bcc-r-md);
  transition:    background var(--bcc-dur-1) var(--bcc-ease);
}
.groupsx-member:hover { background: var(--bcc-surface-2); }
.groupsx-member-avatar { display: inline-flex; line-height: 0; }
.groupsx-member-avatar[data-person-id],
.groupsx-member-avatar[role="button"] { cursor: pointer; }
.groupsx-member-avatar:focus-visible { outline: none; box-shadow: var(--bcc-focus); border-radius: var(--bcc-r-pill); }
.grp-member-name { font-weight: 500; }
.grp-member-role { display: inline-flex; align-items: center; gap: var(--bcc-s1); }

/* ================================================================
   10. @MENTION AUTOCOMPLETE
=============================================================== */
.groupsx-mention {
  border-radius: var(--bcc-r-md);
  box-shadow:    var(--bcc-shadow-2);
  border-color:  var(--bcc-border-strong);
  background:    var(--bcc-surface-1);
  padding:       var(--bcc-s1);
}
.groupsx-mention-item {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  border-radius: var(--bcc-r-sm);
}
.groupsx-mention-item:hover,
.groupsx-mention-item[aria-selected="true"] {
  background: var(--bcc-surface-2);
  color:      var(--bcc-ink);
}
.groupsx-mention-name { font-weight: 500; }

/* ================================================================
   11. THREAD DRAWER
=============================================================== */
.groupsx-drawer {
  border-radius: var(--bcc-r-xl) 0 0 var(--bcc-r-xl);
  box-shadow:    var(--bcc-shadow-3);
  border-left:   1px solid var(--bcc-border);
}
.groupsx-drawer-inner { height: 100%; }
.groupsx-drawer-head {
  gap:           var(--bcc-s3);
  padding:      var(--bcc-s4) var(--bcc-s5);
  border-bottom: 1px solid var(--bcc-border);
}
.groupsx-drawer-title {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
}
.groupsx-drawer-title .bcc-icon { color: var(--bcc-primary); }
.groupsx-drawer-sub { color: var(--bcc-ink-3); font-weight: 400; font-family: var(--bcc-font); font-size: var(--bcc-t-sm); }
.groupsx-drawer-close { color: var(--bcc-ink-3); flex-shrink: 0; }
.groupsx-drawer-close:hover { color: var(--bcc-ink); background: var(--bcc-surface-3); }
.groupsx-replies {
  gap:     var(--bcc-s3);
  padding: var(--bcc-s4) var(--bcc-s5);
}
.groupsx-reply {
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s3) var(--bcc-s4);
}
.groupsx-reply-head { margin-bottom: var(--bcc-s2); }
.groupsx-reply-avatar { display: inline-flex; line-height: 0; flex-shrink: 0; }
.groupsx-reply-body { font-size: var(--bcc-t-sm); }
.groupsx-reply-actions { border-top: none; padding-top: 0; margin-top: var(--bcc-s2); }
.groupsx-reply-actions .groupsx-reaction { height: 30px; min-width: 46px; }
.groupsx-drawer-composer {
  border-top: 1px solid var(--bcc-border);
  padding:    var(--bcc-s3) var(--bcc-s5) var(--bcc-s4);
}
.groupsx-reply-input { border-radius: var(--bcc-r-md); min-height: 64px; }
.groupsx-drawer-foot { justify-content: flex-end; margin-top: var(--bcc-s2); }

/* ================================================================
   12. HOOKS (structural classes emitted by the view)
=============================================================== */
.groupsx-detail-view { display: block; }
.groupsx-grid-discover { margin-top: var(--bcc-s2); }
.groupsx-composer-submit,
.groupsx-reply-submit { white-space: nowrap; }

/* ================================================================
   13. RESPONSIVE
=============================================================== */

/* ── Tablet 768-1024 ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .groupsx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groupsx-hero { padding: var(--bcc-s10) var(--bcc-s8); }
}

/* ── Mobile 481-767 ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .groupsx-main { gap: var(--bcc-s6); }
  .groupsx-hero { padding: var(--bcc-s8) var(--bcc-s6); }
  .groupsx-hero-title { font-size: var(--bcc-t-3xl); }
  .groupsx-toolbar { padding: var(--bcc-s4); }
  .groupsx-discover-head { align-items: stretch; }
  .groupsx-search { max-width: none; flex: 1 1 100%; min-width: 0; }
  .groupsx-grid { gap: var(--bcc-s4); }

  /* Detail identity stacks under the cover */
  .groupsx-detail-hero {
    border-radius: var(--bcc-r-lg);
    overflow:      visible;
    box-shadow:    none;
  }
  .groupsx-detail-scrim { display: none; }
  .groupsx-detail-identity {
    position:       static;
    left:           auto;
    right:          auto;
    bottom:         auto;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--bcc-s3);
    margin:         calc(-1 * var(--bcc-s8)) 0 var(--bcc-s5) var(--bcc-s4);
  }
  .grp-detail-cover { height: 168px; border-radius: var(--bcc-r-lg); }
  .grp-detail-logo-wrap { border-color: var(--bcc-bg); }
  .grp-detail-name { font-size: var(--bcc-t-xl); color: var(--bcc-ink); text-shadow: none; }
  .grp-detail-count { color: var(--bcc-ink-3); }

  /* Channel row scrolls horizontally */
  .groupsx-channel-tabs { padding-bottom: 4px; }

  /* Thread drawer full-width on mobile */
  .groupsx-drawer {
    width:        100vw;
    max-width:    100vw;
    border-left:  none;
    border-radius: 0;
  }

  /* Touch targets >= 44px */
  .groupsx-filter-bar .bcc-pill,
  .groupsx-channel-tab,
  .grp-tab { min-height: 44px; }
  .groupsx-reaction,
  .groupsx-post-actions .bcc-btn,
  .grp-composer-footer .bcc-btn,
  .grp-back-btn,
  .grp-leave-btn { min-height: 44px; }
  .groupsx-drawer-close { width: 44px; height: 44px; }
}

/* ── Small phone <= 480 ──────────────────────────────────────── */
@media (max-width: 480px) {
  .groupsx-grid { grid-template-columns: 1fr; }
  .groupsx-hero-title { font-size: var(--bcc-t-2xl); }
  .groupsx-hero-chip { width: 40px; height: 40px; }
  .groupsx-pending-card { flex-wrap: wrap; }
  .groupsx-pending-card .bcc-badge { margin-left: auto; }
  .groupsx-detail-topbar { gap: var(--bcc-s2); }
  .groupsx-card-banner { height: 120px; }
  .groupsx-card-name { font-size: var(--bcc-t-lg); }
  .grp-detail-cover { height: 148px; }
  .groupsx-composer-foot { flex-wrap: wrap; }
  .groupsx-composer-foot .bcc-btn { flex: 1 1 auto; }
  .groupsx-detail-tabs, .groupsx-channel-tabs { width: 100%; }
  .groupsx-filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--bcc-s2); }
  .groupsx-filter-bar .bcc-pill { flex: 0 0 auto; }
}

/* ── Large desktop >= 1025 ───────────────────────────────────── */
@media (min-width: 1025px) {
  .groupsx-grid { gap: var(--bcc-s6); }
  .groupsx-card-banner { height: 144px; }
}

/* ================================================================
   14. REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .groupsx-main *,
  .groupsx-main *::before,
  .groupsx-main *::after,
  .groupsx-detail *,
  .groupsx-detail *::before,
  .groupsx-detail *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .groupsx-card:hover { transform: none; }
  .groupsx-card:active,
  .grp-tab:active,
  .groupsx-channel-tab:active,
  .groupsx-reaction:active { transform: none; }
}

/* ================================================================
   15. LEADER TOOLS TAB  (.grplead-*)
   Leader-only panel: roster, meetings, attendance, curriculum.
   Colour only from --bcc-* tokens (the sole literal is the #fff
   on-primary ink, matching the token gradient recipe).
=============================================================== */
.groupsx-panel-leader { outline: none; }
.groupsx-panel-leader:focus-visible {
  box-shadow:    var(--bcc-focus);
  border-radius: var(--bcc-r-lg);
}

.grplead { display: flex; flex-direction: column; gap: var(--bcc-s5); }

.grplead-head {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  flex-wrap:       wrap;
  padding:         var(--bcc-s4) var(--bcc-s5);
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-lg);
}
.grplead-head-text { min-width: 0; }
.grplead-heading {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}
.grplead-sub { margin: 2px 0 0; font-size: var(--bcc-t-sm); color: var(--bcc-ink-3); }

.grplead-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  padding:        var(--bcc-s5);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  box-shadow:     var(--bcc-shadow-1);
}
.grplead-section-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
}
.grplead-section-title {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0;
}
.grplead-section-title .bcc-icon { color: var(--bcc-primary); }

/* ── Roster ──────────────────────────────────────────────────── */
.grplead-roster {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s2);
}
.grplead-roster-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  min-width:     0;
  padding:       var(--bcc-s2) var(--bcc-s3);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
}
.grplead-roster-avatar { flex: 0 0 auto; display: inline-flex; }
.grplead-roster-name {
  flex:          1 1 auto;
  min-width:     0;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.grplead-roster-row .bcc-badge { flex: 0 0 auto; }

/* ── Meetings ────────────────────────────────────────────────── */
.grplead-meetings { display: flex; flex-direction: column; gap: var(--bcc-s2); }
.grplead-meeting {
  display:       flex;
  align-items:   stretch;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-left:   3px solid var(--bcc-primary);
  border-radius: var(--bcc-r-md);
}
.grplead-meeting-when {
  flex:            0 0 auto;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  min-width:       84px;
  padding:         var(--bcc-s2);
  background:      var(--bcc-surface-1);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-sm);
  text-align:      center;
}
.grplead-meeting-date { font-size: var(--bcc-t-xs); font-weight: 600; color: var(--bcc-ink); }
.grplead-meeting-time { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }
.grplead-meeting-body {
  flex:           1 1 auto;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.grplead-meeting-title { font-size: var(--bcc-t-md); font-weight: 600; color: var(--bcc-ink); }
.grplead-meeting-loc {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s1);
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
}
.grplead-meeting-notes { margin: 2px 0 0; font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); }
.grplead-meeting-actions { display: flex; align-items: center; gap: var(--bcc-s2); flex-wrap: wrap; }

/* ── Shared modal form row ───────────────────────────────────── */
.grplead-form-row {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--bcc-s3);
}

/* ── Attendance ──────────────────────────────────────────────── */
.grplead-attend-head {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  flex-wrap:     wrap;
  margin-bottom: var(--bcc-s3);
}
.grplead-attend-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  max-height:     54vh;
  overflow-y:     auto;
}
.grplead-attend-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  padding:         var(--bcc-s2) var(--bcc-s3);
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-md);
}
.grplead-attend-name { flex: 1 1 auto; min-width: 0; font-size: var(--bcc-t-sm); color: var(--bcc-ink); }
.grplead-attend-seg {
  display:       inline-flex;
  gap:           2px;
  padding:       2px;
  background:    var(--bcc-surface-3);
  border-radius: var(--bcc-r-pill);
}
/* Scoped to (0,2,0)+ so it always beats the shared button reset. */
.grplead-attend-seg .grplead-attend-opt {
  appearance:    none;
  border:        none;
  background:    transparent;
  color:         var(--bcc-ink-3);
  font:          inherit;
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  padding:       6px var(--bcc-s3);
  border-radius: var(--bcc-r-pill);
  cursor:        pointer;
  transition:    background var(--bcc-dur-2) var(--bcc-ease),
                 color      var(--bcc-dur-2) var(--bcc-ease);
}
.grplead-attend-seg .grplead-attend-opt:hover { color: var(--bcc-ink); }
.grplead-attend-seg .grplead-attend-opt.active { background: var(--bcc-primary); color: #fff; }
.grplead-attend-seg .grplead-attend-opt[data-status="absent"].active { background: var(--bcc-danger); color: #fff; }
.grplead-attend-seg .grplead-attend-opt[data-status="excused"].active { background: var(--bcc-warning); color: var(--bcc-ink); }
.grplead-attend-seg .grplead-attend-opt:disabled { opacity: .4; cursor: not-allowed; }
.grplead-attend-seg .grplead-attend-opt:focus-visible { outline: none; box-shadow: var(--bcc-focus); }

/* ── Curriculum ──────────────────────────────────────────────── */
.grplead-curriculum { display: flex; flex-direction: column; gap: var(--bcc-s2); }
.grplead-curriculum-row {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
}
.grplead-curriculum-week {
  flex:            0 0 auto;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       44px;
  padding:         var(--bcc-s1) var(--bcc-s2);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
  font-size:       var(--bcc-t-xs);
  font-weight:     600;
  border-radius:   var(--bcc-r-sm);
}
.grplead-curriculum-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grplead-curriculum-title { font-size: var(--bcc-t-md); font-weight: 600; color: var(--bcc-ink); }
.grplead-curriculum-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--bcc-s1);
  font-size:       var(--bcc-t-xs);
  color:           var(--bcc-primary);
  text-decoration: none;
}
.grplead-curriculum-link:hover { text-decoration: underline; }
.grplead-curriculum-notes { margin: 2px 0 0; font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); }

/* ── Responsive — mobile 481-767 ─────────────────────────────── */
@media (max-width: 767px) {
  .grplead-roster { grid-template-columns: 1fr; }
  .grplead-meeting { flex-wrap: wrap; }
  .grplead-meeting-actions { width: 100%; }
  .grplead-meeting-actions .grplead-attend-btn { flex: 1 1 auto; }
  .grplead-meeting-actions .bcc-btn { min-height: 44px; }
  .grplead-section-head .bcc-btn { min-height: 44px; }
  .grplead-form-row { grid-template-columns: 1fr; }
}

/* ── Responsive — small phone <= 480 ─────────────────────────── */
@media (max-width: 480px) {
  .grplead-head { padding: var(--bcc-s3) var(--bcc-s4); }
  .grplead-section { padding: var(--bcc-s4); }
  .grplead-attend-row { flex-direction: column; align-items: stretch; }
  .grplead-attend-seg { justify-content: space-between; }
  .grplead-attend-seg .grplead-attend-opt { flex: 1 1 auto; }
}

/* ================================================================
   16. MOBILE / TABLET SCALING FIXES
   ================================================================ */

/* Long member / church / group names must not overflow narrow cards. */
@media (max-width: 1024px) {
  .groupsx-card-name,
  .grp-detail-name,
  .groupsx-pending-name,
  .grp-member-name,
  .groupsx-drawer-sub,
  .groupsx-mention-name,
  .grplead-roster-name {
    overflow-wrap: anywhere;
  }
  .grp-member-name { min-width: 0; }
}

/* Touch targets + safe area (phones AND touch tablets). */
@media (pointer: coarse) {
  /* Composer bottom safe area (home indicator). */
  .groupsx-drawer-composer {
    padding-bottom: max(var(--bcc-s3), env(safe-area-inset-bottom, 0px));
  }

  /* Under-44px controls: match the phone layout on touch tablets too. */
  .groupsx-channel-tab,
  .grp-tab,
  .groupsx-reaction { min-height: 44px; }
}