/* ============================================================
   PBC Swiss — BuddyPress
   Replaces bp-nouveau's bundled stylesheets. Covers members
   directory and single-member home only in this pass; activity
   and groups deferred to a follow-up commit.
   Scoped via .pbc-bp-wrap (template hook) + body.pbc-alumni-bp
   (body_class filter in functions.php).
   ============================================================ */

.pbc-bp-wrap { color: var(--ink); }

/* ------------------------------------------------------------
   Directory nav — top horizontal strip of component tabs.
   BP emits <nav class="bp-navs"> > <ul.component-navigation>.
   Rendered as a tabset using the primitive in bp-bbp-primitives.
   ------------------------------------------------------------ */
.pbc-bp-wrap .bp-navs {
  margin-bottom: var(--s-5);
}
.pbc-bp-wrap .bp-navs > ul.component-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink);
}
.pbc-bp-wrap .bp-navs > ul.component-navigation > li {
  list-style: none;
  margin-bottom: -1px;
}
.pbc-bp-wrap .bp-navs > ul.component-navigation > li > a {
  display: inline-block;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.pbc-bp-wrap .bp-navs > ul.component-navigation > li > a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}
.pbc-bp-wrap .bp-navs > ul.component-navigation > li.selected > a,
.pbc-bp-wrap .bp-navs > ul.component-navigation > li.current > a {
  border-bottom-color: var(--ink);
}
.pbc-bp-wrap .bp-navs span.count {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 6px;
  background: var(--hair);
  color: var(--muted);
  font-size: var(--t-label);
  letter-spacing: 0;
  font-feature-settings: "tnum", "lnum";
}
.pbc-bp-wrap .bp-navs > ul.component-navigation > li.selected > a span.count,
.pbc-bp-wrap .bp-navs > ul.component-navigation > li.current > a span.count {
  background: var(--ink);
  color: #fff;
}

/* ------------------------------------------------------------
   Screen content — the wrap below the directory nav.
   ------------------------------------------------------------ */
.pbc-bp-wrap .screen-content {
  padding: 0;
}

/* ------------------------------------------------------------
   Subnav filters — search + sort dropdown.
   bp-bbp-primitives.css supplies the base toolbar layout;
   only BP-specific overrides land here.
   ------------------------------------------------------------ */
.pbc-bp-wrap .subnav-filters .subnav-search { flex: 1 1 200px; max-width: 280px; }
.pbc-bp-wrap .subnav-filters #buddypress-search { width: 100%; }
.pbc-bp-wrap .subnav-filters .last { margin-left: auto; }
.pbc-bp-wrap .current-member-type {
  font-size: var(--t-meta);
  color: var(--muted);
  margin-bottom: var(--s-3);
}

/* ------------------------------------------------------------
   Members directory list — bp-nouveau emits <ul#members-list>
   with bp_nouveau_loop_classes() adding 'bp-list grid' (or
   'bp-list' for stack). We render as a 12-col grid card layout.
   ------------------------------------------------------------ */
.pbc-bp-wrap #members-list,
.pbc-bp-wrap #members-dir-list .bp-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pbc-bp-wrap #members-list > li.item-entry,
.pbc-bp-wrap #members-dir-list .bp-list > li.item-entry {
  list-style: none;
  grid-column: span 4;
  background: #fff;
  border: 1px solid var(--hair);
  transition: border-color .15s;
}
.pbc-bp-wrap #members-list > li.item-entry:hover,
.pbc-bp-wrap #members-dir-list .bp-list > li.item-entry:hover {
  border-color: var(--ink);
}

.pbc-bp-wrap #members-list .list-wrap,
.pbc-bp-wrap #members-dir-list .list-wrap {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  align-items: start;
}

.pbc-bp-wrap #members-list .item-avatar a,
.pbc-bp-wrap #members-dir-list .item-avatar a { display: block; }
.pbc-bp-wrap #members-list .item-avatar img.avatar,
.pbc-bp-wrap #members-dir-list .item-avatar img.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--hair);
}

.pbc-bp-wrap #members-list .item,
.pbc-bp-wrap #members-dir-list .item { min-width: 0; }
.pbc-bp-wrap #members-list .item-block,
.pbc-bp-wrap #members-dir-list .item-block { min-width: 0; }

.pbc-bp-wrap .list-title.member-name {
  font-size: var(--t-deck);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  margin: 0 0 var(--s-1);
}
.pbc-bp-wrap .list-title.member-name a { color: var(--ink); }
.pbc-bp-wrap .list-title.member-name a:hover { color: var(--link-hover); }

.pbc-bp-wrap .item-meta.last-activity,
.pbc-bp-wrap .item-meta {
  font-size: var(--t-meta);
  color: var(--muted);
  margin: 0 0 var(--s-2);
  line-height: 1.4;
}

.pbc-bp-wrap .item-extra-content {
  font-size: var(--t-meta);
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}

.pbc-bp-wrap .user-update {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hair);
  font-size: var(--t-meta);
  color: var(--ink-2);
  line-height: 1.5;
}
.pbc-bp-wrap .user-update p.update { margin: 0; }

/* Loop buttons (friend / follow / message). */
.pbc-bp-wrap ul.member-action-buttons,
.pbc-bp-wrap ul.generic-button {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.pbc-bp-wrap ul.member-action-buttons > li,
.pbc-bp-wrap ul.generic-button > li {
  list-style: none;
}
.pbc-bp-wrap ul.member-action-buttons button,
.pbc-bp-wrap ul.member-action-buttons a,
.pbc-bp-wrap ul.generic-button button,
.pbc-bp-wrap ul.generic-button a {
  display: inline-block;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: var(--s-1) var(--s-3);
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.pbc-bp-wrap ul.member-action-buttons button:hover,
.pbc-bp-wrap ul.member-action-buttons a:hover,
.pbc-bp-wrap ul.generic-button button:hover,
.pbc-bp-wrap ul.generic-button a:hover {
  background: var(--link-hover);
}

/* AJAX loader placeholder. */
.pbc-bp-wrap #bp-ajax-loader {
  padding: var(--s-7) 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--t-meta);
}

/* ------------------------------------------------------------
   Pagination — bp-nouveau emits <div class="bp-pagination">
   with .pag-count + .pagination-links of <a.page-numbers>.
   ------------------------------------------------------------ */
.pbc-bp-wrap .bp-pagination,
.pbc-bp-wrap .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  margin: var(--s-4) 0;
  font-size: var(--t-meta);
  font-feature-settings: "tnum", "lnum";
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.pbc-bp-wrap .pag-count { color: var(--muted); }
.pbc-bp-wrap .pagination-links { display: flex; gap: var(--s-1); }
.pbc-bp-wrap .pagination-links .page-numbers,
.pbc-bp-wrap .pagination-links a {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  min-width: 32px;
  text-align: center;
  border: 1px solid var(--hair);
  color: var(--ink);
}
.pbc-bp-wrap .pagination-links .page-numbers.current,
.pbc-bp-wrap .pagination-links span.current {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pbc-bp-wrap .pagination-links a:hover {
  border-color: var(--ink);
  color: var(--link-hover);
}

/* ------------------------------------------------------------
   Empty / feedback messages — bp_nouveau_user_feedback() emits
   <div class="bp-feedback">.
   ------------------------------------------------------------ */
.pbc-bp-wrap .bp-feedback {
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--sv);
  background: #f7f7f7;
  margin: var(--s-4) 0;
  font-size: var(--t-meta);
  color: var(--ink-2);
}
.pbc-bp-wrap .bp-feedback.error,
.pbc-bp-wrap .bp-feedback.warning { border-left-color: var(--cm); }
.pbc-bp-wrap .bp-feedback.success { border-left-color: var(--hw); }
.pbc-bp-wrap .bp-feedback p { margin: 0; }

/* ------------------------------------------------------------
   Single-member home — #item-header + .bp-wrap + #item-body
   ------------------------------------------------------------ */
.pbc-bp-wrap #item-header.users-header {
  padding: var(--s-6) 0 var(--s-5);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-5);
}
.pbc-bp-wrap #item-header .item-header-wrap,
.pbc-bp-wrap #item-header > .flex {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--s-5);
  align-items: end;
}
.pbc-bp-wrap #item-header img.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid var(--hair);
}
.pbc-bp-wrap #item-header h2,
.pbc-bp-wrap #item-header .item-title {
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0 0 var(--s-2);
}
.pbc-bp-wrap #item-header .item-title b { font-weight: 700; }
.pbc-bp-wrap #item-header .activity {
  font-size: var(--t-meta);
  color: var(--muted);
}
.pbc-bp-wrap #item-header .item-meta {
  font-size: var(--t-meta);
  color: var(--muted);
}

/* Item header buttons (Add Friend / Message / etc.) reuse the
   member-action-buttons treatment above. */
.pbc-bp-wrap #item-header #item-buttons,
.pbc-bp-wrap #item-header .item-header-content + ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Item-nav: the vertical-or-horizontal tabset on a member's profile. */
.pbc-bp-wrap .bp-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.pbc-bp-wrap .item-list-tabs,
.pbc-bp-wrap nav.main-navs {
  margin-bottom: var(--s-4);
}
.pbc-bp-wrap .item-list-tabs ul,
.pbc-bp-wrap nav.main-navs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink);
}
.pbc-bp-wrap .item-list-tabs ul > li,
.pbc-bp-wrap nav.main-navs ul > li {
  list-style: none;
  margin-bottom: -1px;
}
.pbc-bp-wrap .item-list-tabs ul > li > a,
.pbc-bp-wrap nav.main-navs ul > li > a {
  display: inline-block;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid transparent;
}
.pbc-bp-wrap .item-list-tabs ul > li > a:hover,
.pbc-bp-wrap nav.main-navs ul > li > a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}
.pbc-bp-wrap .item-list-tabs ul > li.selected > a,
.pbc-bp-wrap .item-list-tabs ul > li.current > a,
.pbc-bp-wrap nav.main-navs ul > li.selected > a,
.pbc-bp-wrap nav.main-navs ul > li.current > a {
  border-bottom-color: var(--ink);
}

.pbc-bp-wrap #item-body {
  font-size: var(--t-body);
  line-height: 1.6;
}
.pbc-bp-wrap #item-body h2,
.pbc-bp-wrap #item-body h3 {
  font-size: var(--t-deck);
  font-weight: 600;
  letter-spacing: -.005em;
  margin: var(--s-5) 0 var(--s-3);
}

/* ============================================================
   Activity stream — directory + entries + comments
   bp-templates/bp-nouveau/buddypress/activity/index.php
   AJAX target: <div id="activity-stream" class="activity"
                     data-bp-list="activity">
   Loop body emits <ul class="activity-list item-list bp-list">
   with per-entry <li class="activity activity-item"> (the actual
   class is set by bp_activity_css_class() and varies by activity
   type, but `activity` is always present).
   ============================================================ */

/* Outer "What's new?" post-form area. The actual form UI is
   JS-injected into #bp-nouveau-activity-form by Backbone, so we
   only style the outer container + the screen-reader heading
   pattern BP uses (h2.bp-screen-reader-text). */
.pbc-bp-wrap .activity-update-form,
.pbc-bp-wrap #bp-nouveau-activity-form {
  padding: var(--s-5);
  border: 1px solid var(--hair);
  background: #fff;
  margin-bottom: var(--s-5);
}
.pbc-bp-wrap .activity-update-form:empty,
.pbc-bp-wrap #bp-nouveau-activity-form:empty {
  /* While JS hasn't injected the form yet, render as a slim
     placeholder so the page doesn't have a tall white block. */
  padding: 0;
  border: none;
  background: none;
  min-height: var(--s-7);
}

/* ----------------------------------------------------------------
   Inner post-form UI (Backbone-injected into #bp-nouveau-activity-form):
   #whats-new-form > #whats-new-avatar + #whats-new-content (+ #whats-new-
   options once the textarea is focused). Without these rules every element
   falls back to a raw browser default — tiny avatar, hairline textarea,
   grey submit buttons. Style to the Swiss design system instead.
   ---------------------------------------------------------------- */
/* Selectors carry the `.activity-update-form` container class (present on
   #bp-nouveau-activity-form in every context) so each rule outranks the
   stock bp-nouveau buddypress.css, whose own `.activity-update-form #...`
   selectors otherwise win on specificity and re-impose a float + 55px-
   margin layout and full-width default submit inputs. */
.pbc-bp-wrap .activity-update-form #whats-new-form {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-4);
  align-items: start;
}
/* Avatar pinned top-left; every other direct child (content, and the
   focus-injected #whats-new-options + any feedback/backcompat nodes)
   stacks down the 1fr content column. Without the explicit placement the
   options row auto-flows into the 48px avatar gutter and the submit/reset
   buttons collapse into a cramped vertical strip. */
.pbc-bp-wrap .activity-update-form #whats-new-form > #whats-new-avatar {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  float: none;
  text-align: left;
}
.pbc-bp-wrap .activity-update-form #whats-new-form > *:not(#whats-new-avatar) {
  grid-column: 2;
  min-width: 0;
  margin-left: 0;
}

/* Avatar, matched to the activity-stream avatars below. */
.pbc-bp-wrap .activity-update-form #whats-new-avatar img.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  margin: 0;
  display: block;
}

.pbc-bp-wrap .activity-update-form #whats-new-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The compose field. BP renders it as a <textarea id="whats-new"> (or a
   contenteditable div in rich-text mode); cover both. */
.pbc-bp-wrap .activity-update-form #whats-new,
.pbc-bp-wrap .activity-update-form textarea#whats-new,
.pbc-bp-wrap .activity-update-form #whats-new-textarea > [contenteditable] {
  width: 100%;
  height: auto;
  min-height: var(--s-8);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hair);
  box-shadow: none;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}
.pbc-bp-wrap .activity-update-form #whats-new::placeholder,
.pbc-bp-wrap .activity-update-form textarea#whats-new::placeholder {
  color: var(--muted);
}
.pbc-bp-wrap .activity-update-form #whats-new:focus,
.pbc-bp-wrap .activity-update-form textarea#whats-new:focus,
.pbc-bp-wrap .activity-update-form #whats-new-textarea > [contenteditable]:focus {
  border-color: var(--ink);
  box-shadow: none;
}

/* Options row: media buttons on the left, submit/reset on the right.
   Appears only once the textarea gains focus (BP "displayFull"). */
.pbc-bp-wrap .activity-update-form #whats-new-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0;
}

/* Media / attach icon buttons (dashicons). */
.pbc-bp-wrap .activity-update-form #whats-new-buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-2);
}
.pbc-bp-wrap .activity-update-form #whats-new-buttons > li { margin: 0; list-style: none; }
.pbc-bp-wrap .activity-update-form #whats-new-buttons .button,
.pbc-bp-wrap .activity-update-form #whats-new-buttons > li button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pbc-bp-wrap .activity-update-form #whats-new-buttons .button:hover,
.pbc-bp-wrap .activity-update-form #whats-new-buttons > li button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Submit / reset cluster. The input-level overrides (width/text-align)
   undo bp-nouveau's full-width default submit inputs. */
.pbc-bp-wrap .activity-update-form #whats-new-submit {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
}
.pbc-bp-wrap .activity-update-form #whats-new-submit input#aw-whats-new-submit {
  width: auto;
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pbc-bp-wrap .activity-update-form #whats-new-submit input#aw-whats-new-submit:hover {
  background: var(--link-hover);
  border-color: var(--link-hover);
  color: var(--ink);
}
.pbc-bp-wrap .activity-update-form #whats-new-submit input#aw-whats-new-submit:disabled {
  opacity: .4;
  cursor: default;
}
.pbc-bp-wrap .activity-update-form #whats-new-submit input#aw-whats-new-reset {
  width: auto;
  margin: 0;
  padding: var(--s-3) var(--s-2);
  border: none;
  background: none;
  color: var(--muted);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
}
.pbc-bp-wrap .activity-update-form #whats-new-submit input#aw-whats-new-reset:hover { color: var(--ink); }
.pbc-bp-wrap .bp-screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Activity-stream container — the AJAX target. */
.pbc-bp-wrap #activity-stream.activity {
  margin-top: var(--s-4);
}

/* Activity loop list. */
.pbc-bp-wrap .activity-list,
.pbc-bp-wrap ul.activity-list.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Per-entry card. */
.pbc-bp-wrap .activity-list > li.activity,
.pbc-bp-wrap .activity-list > li[class*="activity-"] {
  list-style: none;
  background: #fff;
  border: 1px solid var(--hair);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-4);
  align-items: start;
}

.pbc-bp-wrap .activity-avatar {
  flex: 0 0 auto;
}
.pbc-bp-wrap .activity-avatar img.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  margin: 0;
}

.pbc-bp-wrap .activity-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Header = "User X posted an update" line. */
.pbc-bp-wrap .activity-header {
  font-size: var(--t-meta);
  color: var(--ink-2);
  line-height: 1.4;
}
.pbc-bp-wrap .activity-header a {
  color: var(--ink);
  font-weight: 600;
}
.pbc-bp-wrap .activity-header a:hover { color: var(--link-hover); }
.pbc-bp-wrap .activity-header .time-since {
  display: inline-block;
  color: var(--muted);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-left: var(--s-2);
}
.pbc-bp-wrap .activity-header .time-since a {
  color: var(--muted);
  font-weight: 500;
}

/* Inner = activity body text (post update, image, etc.). */
.pbc-bp-wrap .activity-inner {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.pbc-bp-wrap .activity-inner p { margin: 0 0 var(--s-2); }
.pbc-bp-wrap .activity-inner p:last-child { margin-bottom: 0; }
.pbc-bp-wrap .activity-inner blockquote {
  border-left: 3px solid var(--hair);
  padding: var(--s-2) var(--s-4);
  margin: var(--s-3) 0;
  color: var(--muted);
}
.pbc-bp-wrap .activity-inner img { margin: var(--s-2) 0; }

/* Action buttons strip (Comment / Favorite / Delete). */
.pbc-bp-wrap .activity-meta,
.pbc-bp-wrap .activity-meta-action,
.pbc-bp-wrap .activity-state {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.pbc-bp-wrap .activity-meta a,
.pbc-bp-wrap .activity-meta button {
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.pbc-bp-wrap .activity-meta a:hover,
.pbc-bp-wrap .activity-meta button:hover { color: var(--link-hover); }

/* Comments thread inside an activity entry. It's the third direct
   child of the li.activity grid (after .activity-avatar and
   .activity-content), so it must span both columns — otherwise grid
   auto-placement drops it into the 48px avatar column and squeezes the
   whole thread (and the appended reply form) to ~48px wide. */
.pbc-bp-wrap .activity-comments {
  grid-column: 1 / -1;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hair);
}
.pbc-bp-wrap .activity-comments > ul,
.pbc-bp-wrap ul.acomment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.pbc-bp-wrap li.comment-item,
.pbc-bp-wrap .activity-comments li {
  list-style: none;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.pbc-bp-wrap .acomment-avatar img.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hair);
}
.pbc-bp-wrap .acomment-meta {
  font-size: var(--t-meta);
  color: var(--muted);
  margin-bottom: 2px;
}
.pbc-bp-wrap .acomment-meta a { color: var(--ink); font-weight: 600; }
.pbc-bp-wrap .acomment-content {
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink);
}
.pbc-bp-wrap .acomment-content p { margin: 0 0 var(--s-1); }
.pbc-bp-wrap .acomment-options {
  margin-top: var(--s-1);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.pbc-bp-wrap .acomment-options a {
  color: var(--muted);
  margin-right: var(--s-2);
}
.pbc-bp-wrap .acomment-options a:hover { color: var(--link-hover); }

/* Nested comment replies. */
.pbc-bp-wrap .acomment-list ul,
.pbc-bp-wrap .activity-comments ul ul {
  margin-left: var(--s-5);
  padding-left: var(--s-4);
  border-left: 1px solid var(--hair);
  margin-top: var(--s-2);
}

/* New-comment reply form inside an activity. Mirrors the Swiss
   "What's new?" post-form (avatar column + content column, white
   field, solid-ink POST, quiet CANCEL). Kept as a block + float
   layout on purpose: bp-nouveau reveals this form with a jQuery
   slideDown that writes an inline `display` value, so we must not
   set display:grid/flex on the form itself — the avatar float that
   bp-nouveau already emits gives us the left column under display:block. */
.pbc-bp-wrap form.ac-form {
  margin: var(--s-3) 0 0;
  padding: var(--s-4);
  background: #fff;
  border: 1px solid var(--hair);
  overflow: hidden;                 /* contain the floated avatar */
}

/* Left column: 32px avatar (smaller than the post-form's 48px —
   replies sit one level deeper in the thread). */
.pbc-bp-wrap form.ac-form .ac-reply-avatar {
  float: left;
  width: 32px;
}
.pbc-bp-wrap form.ac-form .ac-reply-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  margin: 0;
  display: block;
}

/* Right column: clear the float and fill the rest of the row. */
.pbc-bp-wrap form.ac-form .ac-reply-content {
  margin: 0 0 0 calc(32px + var(--s-3));
  padding-left: 0;                  /* override bp-nouveau's 1em */
  min-width: 0;
}
.pbc-bp-wrap form.ac-form .ac-textarea {
  margin: 0 0 var(--s-3);
  padding: 0;
  overflow: visible;
}
.pbc-bp-wrap form.ac-form .ac-textarea textarea,
.pbc-bp-wrap form.ac-form textarea.ac-input {
  width: 100%;
  height: auto;
  min-height: var(--s-8);           /* 64px */
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-body);
  line-height: 1.6;
  resize: vertical;
  outline: none;
  box-shadow: none;
  transition: border-color .15s;
}
.pbc-bp-wrap form.ac-form .ac-textarea textarea:focus,
.pbc-bp-wrap form.ac-form textarea.ac-input:focus {
  border-color: var(--ink);
  box-shadow: none;
}

/* Button row: POST and CANCEL on one line. bp-nouveau emits them as
   a bare submit <input> and a .ac-reply-cancel <button> separated by
   a non-breaking space, so inline-block keeps them side by side. */
.pbc-bp-wrap form.ac-form input[type="submit"] {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pbc-bp-wrap form.ac-form input[type="submit"]:hover {
  background: var(--link-hover);
  border-color: var(--link-hover);
  color: var(--ink);
}
.pbc-bp-wrap form.ac-form .ac-reply-cancel {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: var(--s-3) var(--s-2);
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
}
.pbc-bp-wrap form.ac-form .ac-reply-cancel:hover {
  color: var(--ink);
  background: none;
}

/* Load-more activity link bp-nouveau appends at the bottom of
   the stream. */
.pbc-bp-wrap .load-more,
.pbc-bp-wrap li.load-more {
  list-style: none;
  text-align: center;
  padding: var(--s-4);
  margin-top: var(--s-3);
  background: #f7f7f7;
  border: 1px solid var(--hair);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pbc-bp-wrap .load-more a { color: var(--ink); display: block; }
.pbc-bp-wrap .load-more a:hover { color: var(--link-hover); }

/* ============================================================
   Groups directory — bp-templates/bp-nouveau/buddypress/groups/
   index.php + groups-loop.php.
   AJAX target: <div id="groups-dir-list" class="groups dir-list"
                     data-bp-list="groups">
   Loop body emits <ul id="groups-list"> with per-card
   <li class="item-entry"> identical to the members shape.
   We can reuse most of the members directory grid.
   ============================================================ */

.pbc-bp-wrap #groups-list,
.pbc-bp-wrap #groups-dir-list .bp-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pbc-bp-wrap #groups-list > li.item-entry,
.pbc-bp-wrap #groups-dir-list .bp-list > li.item-entry {
  list-style: none;
  grid-column: span 4;
  background: #fff;
  border: 1px solid var(--hair);
  transition: border-color .15s;
}
.pbc-bp-wrap #groups-list > li.item-entry:hover,
.pbc-bp-wrap #groups-dir-list .bp-list > li.item-entry:hover {
  border-color: var(--ink);
}

.pbc-bp-wrap #groups-list .list-wrap,
.pbc-bp-wrap #groups-dir-list .list-wrap {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  align-items: start;
}
.pbc-bp-wrap #groups-list .item-avatar img.avatar,
.pbc-bp-wrap #groups-dir-list .item-avatar img.avatar {
  width: 64px;
  height: 64px;
  /* Groups use a soft-square avatar (slight rounding) rather
     than the perfect circle members get, to differentiate group
     entities from person entities in the directory grid. */
  border-radius: 6px;
  border: 1px solid var(--hair);
}

.pbc-bp-wrap .list-title.groups-title {
  font-size: var(--t-deck);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  margin: 0 0 var(--s-1);
}
.pbc-bp-wrap .list-title.groups-title a { color: var(--ink); }
.pbc-bp-wrap .list-title.groups-title a:hover { color: var(--link-hover); }

.pbc-bp-wrap .item-meta.group-details {
  font-size: var(--t-meta);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
}
.pbc-bp-wrap .item-meta.group-details span,
.pbc-bp-wrap .item-meta.group-details strong { font-weight: 500; }

.pbc-bp-wrap .group-desc,
.pbc-bp-wrap .group-desc p {
  font-size: var(--t-meta);
  color: var(--ink-2);
  line-height: 1.5;
  margin: var(--s-2) 0 0;
}

/* Join/Leave/Request-membership button strip. Reuses the
   member-action-buttons treatment so groups + members share a
   button language. */
.pbc-bp-wrap ul.group-button,
.pbc-bp-wrap div.group-button,
.pbc-bp-wrap .action ul,
.pbc-bp-wrap .action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.pbc-bp-wrap ul.group-button > li { list-style: none; }
.pbc-bp-wrap ul.group-button a,
.pbc-bp-wrap ul.group-button button,
.pbc-bp-wrap div.group-button a,
.pbc-bp-wrap div.group-button button,
.pbc-bp-wrap .action a,
.pbc-bp-wrap .action button {
  display: inline-block;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  padding: var(--s-1) var(--s-3);
  font-family: inherit;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.pbc-bp-wrap ul.group-button a:hover,
.pbc-bp-wrap ul.group-button button:hover,
.pbc-bp-wrap div.group-button a:hover,
.pbc-bp-wrap div.group-button button:hover,
.pbc-bp-wrap .action a:hover,
.pbc-bp-wrap .action button:hover { background: var(--link-hover); }

/* Group type tags (Public / Private / Hidden / custom types). */
.pbc-bp-wrap .bp-group-type-list,
.pbc-bp-wrap .group-type {
  display: inline-block;
  padding: 1px var(--s-2);
  background: var(--hair);
  color: var(--ink-2);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: var(--s-2);
}

/* ============================================================
   Single group home — #item-header.groups-header + .bp-wrap
   + #item-body. Parallels members/single/home.php but with a
   group cover image and a slightly different header layout.
   ============================================================ */

.pbc-bp-wrap #item-header.groups-header {
  padding: 0;
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s-5);
}

/* Cover image strip — set as background-image on
   #cover-image-container by BP's JS. Keep a fixed aspect-ratio
   placeholder so the layout doesn't jump on load. */
.pbc-bp-wrap #cover-image-container {
  width: 100%;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-color: #f7f7f7;
  position: relative;
}
.pbc-bp-wrap #header-cover-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.pbc-bp-wrap #item-header-content {
  position: relative;
  padding: var(--s-5) 0 var(--s-5);
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--s-5);
  align-items: end;
}
.pbc-bp-wrap #item-header-avatar img.avatar {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  background: #fff;
}
.pbc-bp-wrap #item-header-content h2,
.pbc-bp-wrap #item-header .item-title {
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0 0 var(--s-2);
}
.pbc-bp-wrap .highlight.group-status,
.pbc-bp-wrap .group-status {
  display: inline-block;
  padding: 2px var(--s-2);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: var(--hair);
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.pbc-bp-wrap .groups-header .item-meta,
.pbc-bp-wrap #item-header .activity { font-size: var(--t-meta); color: var(--muted); }
.pbc-bp-wrap #item-header-content > .group-desc,
.pbc-bp-wrap .group-description {
  font-size: var(--t-body);
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: var(--s-2);
}

/* ============================================================
   Standard BP forms — `.standard-form` is the universal class
   bp-nouveau puts on the create-group form, profile edit,
   signup, member messages, password change, and the activity
   reply form. Styling it here gives all of those a Swiss
   treatment for free; create-group is just the first surface
   to exercise it.
   ============================================================ */

.pbc-bp-wrap .bp-subhead {
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--ink);
}
.pbc-bp-wrap .bp-subhead b { font-weight: 700; }

/* Group-create step nav — numbered horizontal strip with the
   current step underlined. bp-nouveau emits the step <li>s with
   the active step carrying `class="current"`. */
.pbc-bp-wrap #group-create-tabs {
  margin-bottom: var(--s-5);
}
.pbc-bp-wrap ol.group-create-buttons,
.pbc-bp-wrap ol.button-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ink);
}
.pbc-bp-wrap ol.group-create-buttons > li,
.pbc-bp-wrap ol.button-tabs > li {
  list-style: none;
  margin-bottom: -1px;
}
/* bp_group_creation_tabs() already emits the step number inside
   the <a>/<span> as "1. Details" etc., so we don't add our own
   CSS counter — that would produce "1. 1. Details". */
.pbc-bp-wrap ol.group-create-buttons > li > a,
.pbc-bp-wrap ol.group-create-buttons > li > span,
.pbc-bp-wrap ol.button-tabs > li > a,
.pbc-bp-wrap ol.button-tabs > li > span {
  display: inline-block;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s-3) var(--s-4);
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
  font-feature-settings: "tnum", "lnum";
}
.pbc-bp-wrap ol.group-create-buttons > li > a:hover,
.pbc-bp-wrap ol.button-tabs > li > a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}
.pbc-bp-wrap ol.group-create-buttons > li.current > a,
.pbc-bp-wrap ol.group-create-buttons > li.current > span,
.pbc-bp-wrap ol.button-tabs > li.current > a,
.pbc-bp-wrap ol.button-tabs > li.current > span {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Create-form container. Sits inside .item-body in the override
   template. */
.pbc-bp-wrap #create-group-form,
.pbc-bp-wrap .standard-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  font-size: var(--t-body);
  line-height: 1.5;
}
.pbc-bp-wrap #group-create-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Section headings inside the standard form (e.g. "Enter Group
   Name & Description", "Privacy Options", "Upload Group Photo"). */
.pbc-bp-wrap .standard-form h3,
.pbc-bp-wrap .standard-form h4,
.pbc-bp-wrap #group-create-body h3,
.pbc-bp-wrap #group-create-body h4 {
  font-size: var(--t-deck);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  margin: var(--s-4) 0 var(--s-3);
}

/* Labels — block-level above each field, label-spaced uppercase
   so they read as the same "field label" language as the rest
   of the design system. */
.pbc-bp-wrap .standard-form label,
.pbc-bp-wrap #create-group-form label,
.pbc-bp-wrap #group-create-body label {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-1);
}
.pbc-bp-wrap .standard-form label.checkbox,
.pbc-bp-wrap .standard-form label.radio,
.pbc-bp-wrap #group-create-body label.checkbox,
.pbc-bp-wrap #group-create-body label.radio {
  /* Inline labels for individual checkbox/radio options keep the
     label sitting next to the input, not above it. */
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-meta);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  color: var(--ink);
  margin: var(--s-1) 0;
}

/* Inputs / textareas — full width by default, hairline border,
   white fill, label-spaced focus accent. */
.pbc-bp-wrap .standard-form input[type="text"],
.pbc-bp-wrap .standard-form input[type="email"],
.pbc-bp-wrap .standard-form input[type="url"],
.pbc-bp-wrap .standard-form input[type="password"],
.pbc-bp-wrap .standard-form input[type="search"],
.pbc-bp-wrap .standard-form input[type="number"],
.pbc-bp-wrap .standard-form input[type="tel"],
.pbc-bp-wrap .standard-form input[type="date"],
.pbc-bp-wrap .standard-form select,
.pbc-bp-wrap .standard-form textarea,
.pbc-bp-wrap #create-group-form input[type="text"],
.pbc-bp-wrap #create-group-form input[type="email"],
.pbc-bp-wrap #create-group-form textarea,
.pbc-bp-wrap #create-group-form select,
.pbc-bp-wrap #group-create-body input[type="text"],
.pbc-bp-wrap #group-create-body input[type="email"],
.pbc-bp-wrap #group-create-body textarea,
.pbc-bp-wrap #group-create-body select {
  display: block;
  width: 100%;
  max-width: 540px;
  border: 1px solid var(--hair);
  background: #fff;
  padding: var(--s-3);
  font-family: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  margin-bottom: var(--s-3);
  transition: border-color .15s;
}
.pbc-bp-wrap .standard-form textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}
.pbc-bp-wrap .standard-form input:focus,
.pbc-bp-wrap .standard-form textarea:focus,
.pbc-bp-wrap .standard-form select:focus {
  outline: none;
  border-color: var(--ink);
}

/* File inputs (avatar upload, cover upload) need a slightly
   different treatment since the browser-default file picker
   button looks out of place in a Swiss design. We restyle the
   wrapper but leave the actual file-picker button to the
   browser — it's hard to fully restyle cross-browser. */
.pbc-bp-wrap .standard-form input[type="file"] {
  display: block;
  padding: var(--s-2) 0;
  font-family: inherit;
  font-size: var(--t-meta);
  color: var(--ink-2);
  margin-bottom: var(--s-3);
}

/* Inline-helper "required" / "description" text. */
.pbc-bp-wrap .standard-form .description,
.pbc-bp-wrap .standard-form p.description {
  font-size: var(--t-meta);
  color: var(--muted);
  margin: calc(-1 * var(--s-2)) 0 var(--s-3);
  line-height: 1.4;
  max-width: 540px;
}
.pbc-bp-wrap .standard-form span.required,
.pbc-bp-wrap .standard-form .required {
  color: var(--cm);
  font-weight: 600;
  margin-left: var(--s-1);
}

/* Submit / Continue / Save / Cancel buttons. bp-nouveau emits
   these inside `.submit` div on most forms. */
.pbc-bp-wrap .standard-form .submit,
.pbc-bp-wrap #create-group-form .submit,
.pbc-bp-wrap #group-create-body .submit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hair);
}
/* The create-group step nav at the bottom of each step
   (Back to Previous Step | Next Step / Finish / Create Group
   and Continue) sits in <div class="submit" id="previous-next">.
   Push the back button left + the forward button right so the
   primary forward action sits at the page's right edge — strong
   visual signal of "advance" vs. "retreat". */
.pbc-bp-wrap #previous-next.submit {
  justify-content: space-between;
}
.pbc-bp-wrap #previous-next.submit #group-creation-next,
.pbc-bp-wrap #previous-next.submit #group-creation-finish,
.pbc-bp-wrap #previous-next.submit #group-creation-create {
  margin-left: auto;
}
.pbc-bp-wrap .standard-form input[type="submit"],
.pbc-bp-wrap .standard-form input[type="button"],
.pbc-bp-wrap .standard-form button[type="submit"],
.pbc-bp-wrap #create-group-form input[type="submit"],
.pbc-bp-wrap #create-group-form button,
.pbc-bp-wrap #group-create-body input[type="submit"],
.pbc-bp-wrap #group-create-body button {
  display: inline-block;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  font-family: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pbc-bp-wrap .standard-form input[type="submit"]:hover,
.pbc-bp-wrap .standard-form button:hover,
.pbc-bp-wrap #create-group-form input[type="submit"]:hover,
.pbc-bp-wrap #create-group-form button:hover,
.pbc-bp-wrap #group-create-body input[type="submit"]:hover,
.pbc-bp-wrap #group-create-body button:hover {
  background: var(--link-hover);
  color: var(--ink);
  border-color: var(--ink);
}
/* Secondary (cancel / back) buttons get the inverse outline
   treatment — same border, white fill, ink text — so the primary
   action stands out as the only filled-ink button on the page.
   bp-nouveau emits these as `<a class="cancel">`, buttons with
   `.button-cancel`, AND the create-group "Back to Previous Step"
   button rendered as `<input type="button" id="group-creation-previous">`
   inside #previous-next.submit. The plain-button selector is
   scoped to #previous-next so we don't accidentally invert the
   create-group "Create Group and Continue" button on step 1 —
   that's a [type="submit"] so it stays filled. */
.pbc-bp-wrap .standard-form a.cancel,
.pbc-bp-wrap .standard-form .button-cancel,
.pbc-bp-wrap .standard-form input.cancel,
.pbc-bp-wrap #create-group-form a.cancel,
.pbc-bp-wrap #previous-next #group-creation-previous,
.pbc-bp-wrap #previous-next input[type="button"] {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink);
}
.pbc-bp-wrap .standard-form a.cancel:hover,
.pbc-bp-wrap #create-group-form a.cancel:hover,
.pbc-bp-wrap #previous-next #group-creation-previous:hover,
.pbc-bp-wrap #previous-next input[type="button"]:hover {
  background: var(--link-hover);
  color: var(--ink);
}

/* Help text that BP emits on multi-step forms (e.g. "To skip the
   group profile photo upload process, hit the Next Step button.").
   Plugin default renders as a near-invisible regular paragraph;
   give it a visible muted-info-note appearance so skip-instructions
   on the avatar + cover-image steps stop hiding from the user. */
.pbc-bp-wrap p.bp-help-text {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--sv);
  background: #f7f7f7;
  font-size: var(--t-meta);
  color: var(--ink-2);
  margin: var(--s-3) 0;
  line-height: 1.5;
  max-width: 640px;
}
.pbc-bp-wrap p.bp-help-text:last-child { margin-bottom: 0; }

/* Fieldset legends (Privacy options, etc.) */
.pbc-bp-wrap .standard-form fieldset,
.pbc-bp-wrap #group-create-body fieldset {
  border: 1px solid var(--hair);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  background: #fff;
}
.pbc-bp-wrap .standard-form fieldset legend,
.pbc-bp-wrap #group-create-body fieldset legend {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 var(--s-2);
}

/* Radio-group fieldsets — create-group step 2 (Privacy Options +
   Group Invitations), profile-edit visibility, signup privacy.
   BP emits bare <label>s with sibling <ul id="*-group-description">
   blocks holding 1-3 description bullets per radio option; the
   general .standard-form label rule already makes labels read as
   block uppercase headers, so we only need to (a) give each option
   discrete vertical room and (b) style the description <ul>s as
   muted body-meta text rather than another label. */
.pbc-bp-wrap .standard-form fieldset.radio > label {
  display: block;
  margin: var(--s-3) 0 var(--s-1);
  padding-left: var(--s-1);
}
.pbc-bp-wrap .standard-form fieldset.radio > label:first-of-type {
  margin-top: 0;
}
.pbc-bp-wrap .standard-form fieldset.radio > label input[type="radio"] {
  margin-right: var(--s-2);
  vertical-align: middle;
}
.pbc-bp-wrap .standard-form fieldset.radio > ul {
  list-style: none;
  margin: 0 0 var(--s-4) var(--s-5);
  padding: 0;
  font-size: var(--t-meta);
  color: var(--muted);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.pbc-bp-wrap .standard-form fieldset.radio > ul:last-child {
  margin-bottom: 0;
}
.pbc-bp-wrap .standard-form fieldset.radio > ul > li {
  list-style: none;
  margin: 0 0 2px;
}
.pbc-bp-wrap .standard-form fieldset.radio > p[tabindex] {
  margin: 0 0 var(--s-3);
  font-size: var(--t-meta);
  color: var(--ink-2);
}

/* ------------------------------------------------------------
   Responsive — collapse 3-up member grid to 2-up then 1-up.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .pbc-bp-wrap #members-list > li.item-entry,
  .pbc-bp-wrap #members-dir-list .bp-list > li.item-entry,
  .pbc-bp-wrap #groups-list > li.item-entry,
  .pbc-bp-wrap #groups-dir-list .bp-list > li.item-entry {
    grid-column: span 6;
  }
  .pbc-bp-wrap #item-header .item-header-wrap,
  .pbc-bp-wrap #item-header > .flex,
  .pbc-bp-wrap #item-header-content {
    grid-template-columns: 96px 1fr;
    align-items: start;
  }
  .pbc-bp-wrap #item-header img.avatar,
  .pbc-bp-wrap #item-header-avatar img.avatar { width: 96px; height: 96px; }
  .pbc-bp-wrap #cover-image-container { min-height: 160px; }
}
@media (max-width: 700px) {
  .pbc-bp-wrap #members-list,
  .pbc-bp-wrap #members-dir-list .bp-list,
  .pbc-bp-wrap #groups-list,
  .pbc-bp-wrap #groups-dir-list .bp-list {
    grid-template-columns: 1fr;
  }
  .pbc-bp-wrap #members-list > li.item-entry,
  .pbc-bp-wrap #members-dir-list .bp-list > li.item-entry,
  .pbc-bp-wrap #groups-list > li.item-entry,
  .pbc-bp-wrap #groups-dir-list .bp-list > li.item-entry {
    grid-column: span 1;
  }
  .pbc-bp-wrap .subnav-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .pbc-bp-wrap #item-header .item-header-wrap,
  .pbc-bp-wrap #item-header > .flex,
  .pbc-bp-wrap #item-header-content {
    grid-template-columns: 1fr;
  }
  .pbc-bp-wrap .bp-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
  .pbc-bp-wrap .activity-list > li.activity,
  .pbc-bp-wrap .activity-list > li[class*="activity-"] {
    grid-template-columns: 36px 1fr;
    padding: var(--s-4);
  }
  .pbc-bp-wrap .activity-avatar img.avatar { width: 36px; height: 36px; }
  .pbc-bp-wrap li.comment-item,
  .pbc-bp-wrap .activity-comments li {
    grid-template-columns: 28px 1fr;
  }
  .pbc-bp-wrap .acomment-avatar img.avatar { width: 28px; height: 28px; }
}