/* /connect/admin/views/people.css — Admin People CRM ("Vibrant Community")
 *
 * View-local skin for people.js. Page styles are scoped under `.ppl-view`;
 * drawer styles under `.ppl-drawer-root` (the drawer is rendered into <body>
 * by core.js so it lives outside the view container). Modal form helpers are
 * scoped by their own classes/ids.
 *
 * Layers on top of admin-shell.css / admin-views.css (loads after both) and
 * uses only --bcc-* tokens. Intentional hard-coded colour: #fff (text on
 * solid primary / gradient). Everything else is token or rgba(var(--*-rgb),a).
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   PAGE + HEADER
=============================================================== */
.ppl-view { position: relative; }

.ppl-view .ppl-header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
}

.ppl-btn-ic {
  display:     inline-flex;
  align-items: center;
  width:       1.05em;
  height:      1.05em;
}

.ppl-btn-ic .bcc-icon { width: 100%; height: 100%; }

/* ================================================================
   TOOLBAR
=============================================================== */
.ppl-view .ppl-toolbar {
  align-items:    stretch;
  gap:            var(--bcc-s3);
  padding:        var(--bcc-s3);
  margin-bottom:  var(--bcc-s4);
  background:     var(--bcc-surface-1);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  box-shadow:     var(--bcc-shadow-1);
}

.ppl-view .ppl-search {
  position:  relative;
  max-width: 320px;
  flex:      1 1 240px;
}

.ppl-view .ppl-search input {
  width:         100%;
  height:        40px;
  padding:       0 var(--bcc-s4) 0 40px;
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  color:         var(--bcc-ink);
  font-size:     var(--bcc-t-sm);
  outline:       none;
  transition:    border-color var(--bcc-dur-1), box-shadow var(--bcc-dur-1);
}

.ppl-view .ppl-search input::placeholder { color: var(--bcc-ink-3); }
.ppl-view .ppl-search input:hover  { border-color: var(--bcc-primary); }
.ppl-view .ppl-search input:focus  {
  border-color: var(--bcc-primary);
  box-shadow:   0 0 0 3px var(--bcc-primary-tint);
}

.ppl-view .ppl-search .ppl-search-icon {
  position:        absolute;
  left:            var(--bcc-s3);
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  color:           var(--bcc-ink-3);
  pointer-events:  none;
}

.ppl-search-icon .bcc-icon { width: 17px; height: 17px; }

/* Filter pills */
.ppl-view .ppl-filter-row {
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     0;
}

.ppl-view .ppl-filter-row .bcc-pill {
  height: 34px;
  padding: 0 var(--bcc-s3);
}

/* Bulk actions bar — sticky, elevated */
.ppl-bulk-bar {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s2);
  flex-wrap:     wrap;
  flex-basis:    100%;
  padding:       var(--bcc-s2) var(--bcc-s3);
  background:    var(--bcc-primary-soft);
  border:        1px solid var(--bcc-primary);
  border-radius: var(--bcc-r-md);
  box-shadow:    var(--bcc-shadow-1);
}

.ppl-bulk-count {
  font-size:   var(--bcc-t-sm);
  font-weight: 700;
  color:       var(--bcc-primary);
  margin-right: var(--bcc-s2);
}

.ppl-bulk-bar .bcc-btn { min-height: 32px; }

/* ================================================================
   PENDING JOIN REQUESTS
=============================================================== */
.ppl-pending {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-left:   4px solid var(--bcc-accent);
  border-radius: var(--bcc-r-lg);
  margin-bottom: var(--bcc-s4);
  overflow:      hidden;
  box-shadow:    var(--bcc-shadow-1);
}

.ppl-pending-head {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
  padding:     var(--bcc-s4);
  border-bottom: 1px solid var(--bcc-border);
  background:  linear-gradient(180deg, rgba(var(--bcc-accent-rgb), .08), transparent);
}

.ppl-pending-head strong { color: var(--bcc-ink); font-size: var(--bcc-t-md); }
.ppl-pending-sub { color: var(--bcc-ink-3); font-size: var(--bcc-t-sm); }

/* ================================================================
   TABLE CARD + TABLE
=============================================================== */
.ppl-table-card {
  padding: 0;
}

.ppl-table-card .bcc-table-wrap {
  border-radius: var(--bcc-r-lg);
}

.ppl-view .ppl-table { min-width: 760px; }

.ppl-view .ppl-table th[data-sort] { cursor: pointer; }

/* Suppress the shared ↕ ::after glyph — we render a BCCIcon instead */
.ppl-view .ppl-table th[data-sort]::after,
.ppl-view .ppl-table th[data-sort="asc"]::after,
.ppl-view .ppl-table th[data-sort="desc"]::after { content: none; }

/* Sort indicator uses an inline icon slot instead of a glyph */
.ppl-view .ppl-sort {
  display:        inline-flex;
  align-items:    center;
  gap:            2px;
  font:           inherit;
  color:          inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor:         pointer;
}

.ppl-view .ppl-table th[data-sort]:hover .ppl-sort { color: var(--bcc-ink); }

.ppl-sort-ico {
  display:     inline-flex;
  align-items: center;
  margin-left: var(--bcc-s1);
  opacity:     .55;
  transition:  transform var(--bcc-dur-1), opacity var(--bcc-dur-1);
  vertical-align: -.15em;
}
.ppl-sort-ico .bcc-icon { width: 12px; height: 12px; }

.ppl-table th[aria-sort="ascending"]  .ppl-sort-ico { transform: rotate(180deg); }
.ppl-table th[aria-sort="ascending"]  .ppl-sort-ico,
.ppl-table th[aria-sort="descending"] .ppl-sort-ico {
  opacity: 1;
  color:   var(--bcc-primary);
}

/* Person cell */
.ppl-person-cell { gap: var(--bcc-s3); min-width: 0; }
.ppl-person-cell > div:last-child { min-width: 0; flex: 1 1 auto; }
.ppl-person-name {
  font-weight: 600;
  color:       var(--bcc-ink);
  min-width:   0;
  overflow-wrap: anywhere;
}
.ppl-person-email {
  color:         var(--bcc-ink-3);
  min-width:     0;
  overflow-wrap: anywhere;
}

/* Private child profile + household/family hints under the name */
.ppl-person-tags {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         4px var(--bcc-s2);
  margin-top:  3px;
  min-width:   0;
}

.ppl-private-badge {
  letter-spacing: 0;
  text-transform: none;
}

.ppl-family-hint {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  min-width:   0;
  max-width:   100%;
  color:       var(--bcc-ink-3);
  font-size:   var(--bcc-t-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ppl-family-hint .bcc-icon {
  width:       12px;
  height:      12px;
  flex:        0 0 auto;
  opacity:     .8;
}

/* Date-of-birth status + Sunday School eligibility badges (list + drawer) */
.ppl-dob-badge,
.ppl-ss-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   700;
  letter-spacing:.01em;
  line-height:   1.5;
  white-space:   nowrap;
}

.ppl-dob-badge--adult {
  background: var(--bcc-primary-soft);
  color:      var(--bcc-primary);
}
.ppl-dob-badge--minor {
  background: var(--bcc-success-soft);
  color:      var(--bcc-success);
}
.ppl-dob-badge--unknown {
  background: var(--bcc-warning-soft);
  color:      var(--bcc-warning);
}

.ppl-ss-badge--yes {
  background: var(--bcc-success-soft);
  color:      var(--bcc-success);
}
.ppl-ss-badge--no {
  background: var(--bcc-surface-3);
  color:      var(--bcc-ink-2);
  border:     1px solid var(--bcc-border-strong);
}
.ppl-ss-badge--unknown {
  background: var(--bcc-surface-3);
  color:      var(--bcc-warning);
  border:     1px solid var(--bcc-border);
}

.ppl-dob-date {
  color:       var(--bcc-ink-3);
  font-size:   var(--bcc-t-xs);
  line-height: 1.35;
  white-space: nowrap;
}

/* Missing-DOB flag: form banner and drawer prompt */
.ppl-dob-flag {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s3) var(--bcc-s4);
  border:      1px solid rgba(var(--bcc-warning-rgb), .4);
  border-left: 4px solid var(--bcc-warning);
  border-radius: var(--bcc-r-md);
  background:  var(--bcc-warning-soft);
  color:       var(--bcc-ink-2);
  font-size:   var(--bcc-t-sm);
  line-height: 1.5;
}

.ppl-dob-flag strong { color: var(--bcc-ink); }

.ppl-dob-flag-skip {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex:        1 1 100%;
  min-height:  32px;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-2);
  cursor:      pointer;
}

.ppl-dob-flag-skip input[type="checkbox"] {
  width:         16px;
  height:        16px;
  flex:          0 0 auto;
  accent-color:  var(--bcc-primary);
}

.ppl-dob-flag--drawer { margin: var(--bcc-s3) var(--bcc-s4) 0; }

/* Field helper + inline validation message */
.ppl-field-help {
  margin:      2px 0 0;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
  line-height: 1.4;
}

.ppl-form-error {
  margin-top:  2px;
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-danger);
}

/* Invalid DOB input gets a danger ring */
.ppl-form-row .bcc-input[aria-invalid="true"] {
  border-color: var(--bcc-danger);
}

/* Semantic status badges */
.ppl-status {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 10px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   700;
  letter-spacing:.02em;
  text-transform: capitalize;
  white-space:   nowrap;
}
.ppl-status::before {
  content:       '';
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    currentColor;
  flex-shrink:   0;
}
.ppl-status--member   { background: var(--bcc-success-soft); color: var(--bcc-success); }
.ppl-status--visitor  { background: var(--bcc-info-soft);    color: var(--bcc-info); }
.ppl-status--prospect { background: var(--bcc-warning-soft); color: var(--bcc-warning); }
.ppl-status--inactive { background: var(--bcc-surface-3);    color: var(--bcc-ink-2); }
.ppl-status--deceased { background: var(--bcc-danger-soft);  color: var(--bcc-danger); }

/* Engagement badge */
.ppl-eng-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       32px;
  height:          24px;
  padding:         0 var(--bcc-s2);
  border-radius:   var(--bcc-r-pill);
  font-size:       var(--bcc-t-xs);
  font-weight:     700;
}
.ppl-eng--high { background: var(--bcc-success-soft); color: var(--bcc-success); }
.ppl-eng--mid  { background: var(--bcc-warning-soft); color: var(--bcc-warning); }
.ppl-eng--low  { background: var(--bcc-danger-soft);  color: var(--bcc-danger); }

/* Drawer engagement ring reuses the same tone classes */
.ppl-engagement-score.ppl-eng--high { background: var(--bcc-success-soft); color: var(--bcc-success); }
.ppl-engagement-score.ppl-eng--mid  { background: var(--bcc-warning-soft); color: var(--bcc-warning); }
.ppl-engagement-score.ppl-eng--low  { background: var(--bcc-danger-soft);  color: var(--bcc-danger); }

/* Actions */
.ppl-cell-actions { text-align: right; white-space: nowrap; }
.ppl-view-btn { gap: 6px; }
.ppl-view-btn .bcc-icon { width: 14px; height: 14px; }

/* Empty row */
.ppl-table .bcc-table-empty {
  padding:    var(--bcc-s10) var(--bcc-s4);
  text-align: center;
  color:      var(--bcc-ink-3);
}

/* ================================================================
   PAGINATION
=============================================================== */
.ppl-view .adm-pagination__pages {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s1);
  flex-wrap:   wrap;
}
.ppl-view .adm-pagination__ellipsis { color: var(--bcc-ink-3); padding: 0 var(--bcc-s1); }
.ppl-view .adm-page-pill.active {
  background:   var(--bcc-primary-soft);
  color:        var(--bcc-primary);
  border-color: var(--bcc-primary);
}

/* ================================================================
   LOADING / EMPTY STATE HELPERS
=============================================================== */
.ppl-loading {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  padding:     var(--bcc-s4);
  color:       var(--bcc-ink-3);
  font-size:   var(--bcc-t-sm);
}

/* ================================================================
   PERSON FORM (add / edit modal)
=============================================================== */
.ppl-form-grid { gap: var(--bcc-s4) var(--bcc-s5); }

.ppl-form-row .bcc-label { margin-bottom: var(--bcc-s1); }

.ppl-form-row--check {
  display:     flex;
  align-items: center;
}

.ppl-form-row--check .bcc-label {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  margin:      0;
  cursor:      pointer;
}

.ppl-form-row--check input[type="checkbox"] {
  width:  16px;
  height: 16px;
  accent-color: var(--bcc-primary);
  flex-shrink: 0;
}

/* ================================================================
   IMPORT CSV MODAL
=============================================================== */
#ppl-import-body { gap: var(--bcc-s4); }

#ppl-import-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:   .92em;
  padding:     1px 5px;
  border-radius: var(--bcc-r-xs);
  background:  var(--bcc-surface-3);
  color:       var(--bcc-ink-2);
}

#ppl-import-file {
  height:  auto;
  padding: var(--bcc-s3);
  cursor:  pointer;
}

#ppl-import-file::file-selector-button {
  margin-right:    var(--bcc-s3);
  padding:         0 var(--bcc-s3);
  height:          32px;
  border:          1px solid var(--bcc-border-strong);
  border-radius:   var(--bcc-r-sm);
  background:      var(--bcc-surface-3);
  color:           var(--bcc-ink);
  font:            inherit;
  font-size:       var(--bcc-t-xs);
  font-weight:     600;
  cursor:          pointer;
}

.ppl-import-result {
  padding:       var(--bcc-s3);
  border-radius: var(--bcc-r-sm);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  color:         var(--bcc-ink-2);
}

.ppl-import-result--warn {
  background: var(--bcc-warning-soft);
  border-color: rgba(var(--bcc-warning-rgb), .4);
  color:      var(--bcc-ink-2);
}

/* "Missing date of birth" filter pill */
.ppl-view .ppl-filter-row .ppl-pill-dob.active {
  background: var(--bcc-warning-soft);
  color:      var(--bcc-warning);
  border-color: var(--bcc-warning);
}

/* "Unaccompanied" (bus / no-guardian) filter pill */
.ppl-view .ppl-filter-row .ppl-pill-unacc.active {
  background: var(--bcc-warning-soft);
  color:      var(--bcc-warning);
  border-color: var(--bcc-warning);
}

/* Unaccompanied (bus / no-guardian) student badge — list + drawer */
.ppl-unacc-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   700;
  letter-spacing:.01em;
  line-height:   1.5;
  white-space:   nowrap;
  background:    var(--bcc-warning-soft);
  color:         var(--bcc-warning);
  border:        1px solid rgba(var(--bcc-warning-rgb), .4);
}

/* ================================================================
   PERSON DETAIL DRAWER
=============================================================== */

/* Clean default drawer header when it wraps the person drawer */
.bcc-drawer:has(.ppl-drawer-root) .bcc-drawer-header {
  background: linear-gradient(180deg, var(--bcc-surface-2), var(--bcc-surface-1));
}
.bcc-drawer:has(.ppl-drawer-root) .bcc-drawer-title {
  font-family: var(--bcc-font-display);
  letter-spacing: .005em;
}

.ppl-drawer-root { min-width: 0; }

/* Tabs */
.ppl-drawer-tabs {
  display:        flex;
  gap:            var(--bcc-s1);
  padding:        0 var(--bcc-s3);
  border-bottom:  1px solid var(--bcc-border);
  overflow-x:     auto;
  scrollbar-width: thin;
  position:       sticky;
  top:            0;
  background:     var(--bcc-surface-1);
  z-index:        2;
}

.ppl-drawer-tab {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       var(--bcc-s3) var(--bcc-s3);
  min-height:    44px;
  font-size:     var(--bcc-t-sm);
  font-weight:   500;
  color:         var(--bcc-ink-3);
  border-bottom: 2px solid transparent;
  white-space:   nowrap;
  transition:    color var(--bcc-dur-1), border-color var(--bcc-dur-1), background var(--bcc-dur-1);
}

.ppl-drawer-tab .bcc-icon { width: 15px; height: 15px; opacity: .9; }

.ppl-drawer-tab:hover {
  color:      var(--bcc-ink);
  background: var(--bcc-surface-2);
}

.ppl-drawer-tab.active {
  color:             var(--bcc-primary);
  border-bottom-color: var(--bcc-primary);
  font-weight:       600;
}

.ppl-drawer-panel { display: none; }
.ppl-drawer-panel.active {
  display:   block;
  padding:   var(--bcc-s4) var(--bcc-s5) var(--bcc-s6);
  animation: bcc-fade-in var(--bcc-dur-2) var(--bcc-ease);
}

/* Hero */
.ppl-drawer-hero {
  flex-wrap:     wrap;
  gap:           var(--bcc-s4);
  padding:       var(--bcc-s5);
  border-bottom: 1px solid var(--bcc-border);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--bcc-primary-tint), transparent 62%),
    var(--bcc-surface-1);
}

.ppl-drawer-hero .bcc-avatar-lg {
  box-shadow: 0 0 0 3px var(--bcc-surface-1), 0 0 0 4px var(--bcc-primary-soft);
}

.ppl-drawer-hero-name {
  font-family: var(--bcc-font-display);
  font-size:   var(--bcc-t-xl);
  font-weight: 600;
  color:       var(--bcc-ink);
  margin:      0 0 var(--bcc-s1);
  line-height: 1.2;
}

.ppl-drawer-hero-badges {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
}

.ppl-drawer-hero-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  margin-left: auto;
}

/* Info grid — single-column stack of label/value rows */
.ppl-drawer-root .ppl-info-grid {
  display:        flex;
  flex-direction: column;
  gap:            0;
  padding:        var(--bcc-s2) 0;
}

.ppl-info-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  padding:         var(--bcc-s2) 0;
  border-bottom:   1px solid var(--bcc-border-soft);
}
.ppl-info-row:last-child { border-bottom: none; }

.ppl-info-row > span:first-child {
  font-size:      var(--bcc-t-xs);
  font-weight:    600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  white-space:    nowrap;
  flex-shrink:    0;
}

.ppl-info-row > span:last-child {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink);
  text-align:  right;
  min-width:   0;
  overflow-wrap: anywhere;
}

/* Chip sections (gifts / interests) */
.ppl-chip-section { margin-top: var(--bcc-s4); }

.ppl-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--bcc-s2);
  margin-top: var(--bcc-s2);
}

.ppl-drawer-root .bcc-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 10px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  background:    var(--bcc-primary-soft);
  color:         var(--bcc-primary);
}
.ppl-drawer-root .bcc-chip--alt {
  background: rgba(var(--bcc-secondary-rgb), .16);
  color:      var(--bcc-secondary);
}

/* Lists inside panels */
.ppl-group-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
  padding:     var(--bcc-s3) 0;
  border-bottom: 1px solid var(--bcc-border-soft);
}
.ppl-group-row:last-child { border-bottom: none; }
.ppl-group-row > .bcc-text-sm:first-child {
  flex:        1;
  min-width:   0;
  font-weight: 600;
  color:       var(--bcc-ink);
}

.ppl-followup-row {
  padding:       var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  margin-bottom: var(--bcc-s2);
}
.ppl-followup-notes { margin-top: 4px; }

/* Notes */
.ppl-note-card {
  padding:       var(--bcc-s3) var(--bcc-s4);
  border:        1px solid var(--bcc-border);
  border-left:   3px solid var(--bcc-primary);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
}

.ppl-note-header {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  margin-bottom: var(--bcc-s1);
}

.ppl-note-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           24px;
  height:          24px;
  flex-shrink:     0;
  border-radius:   var(--bcc-r-sm);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
}
.ppl-note-icon .bcc-icon { width: 14px; height: 14px; }

.ppl-note-body { color: var(--bcc-ink-2); line-height: 1.5; }

.ppl-profile-bio {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.6;
}

.ppl-drawer-empty {
  padding:    var(--bcc-s5) var(--bcc-s3);
  text-align: center;
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
}

/* ================================================================
   DRAWER — FAMILY SECTION
   The shared .famx-* module supplies the rows/badges. These wrappers keep
   it inside the 440px drawer without horizontal overflow.
=============================================================== */
.ppl-family-shell {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  min-width:      0;
  max-width:      100%;
}

.ppl-family-shell .famx-section,
.ppl-family-shell .famx-block,
.ppl-family-shell .famx-list,
.ppl-family-shell .famx-row,
.ppl-family-shell .famx-row-info {
  min-width:  0;
  max-width:  100%;
}

.ppl-family-shell .famx-row {
  flex-wrap:     wrap;
  overflow-wrap: anywhere;
  word-break:    break-word;
}

.ppl-family-shell .famx-row-info { flex: 1 1 160px; }

.ppl-family-shell .famx-row-actions {
  flex:            1 1 100%;
  justify-content: flex-start;
}

.ppl-family-publish {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s3);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-md);
  background:     var(--bcc-surface-2);
  min-width:      0;
}

.ppl-family-publish-head {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
}

.ppl-publish-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
  min-width:   0;
  padding:     var(--bcc-s2) 0;
  border-top:  1px solid var(--bcc-border-soft);
}

.ppl-publish-row:first-of-type { border-top: none; }

.ppl-publish-name {
  flex:          1 1 140px;
  min-width:     0;
  font-size:     var(--bcc-t-sm);
  font-weight:   600;
  color:         var(--bcc-ink);
  overflow-wrap: anywhere;
}

.ppl-publish-toggle-label {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  min-height:  36px;
  margin-left: auto;
  padding:     0 var(--bcc-s1);
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-ink-2);
  cursor:      pointer;
  white-space: nowrap;
}

.ppl-publish-toggle {
  width:         20px;
  height:        20px;
  flex:          0 0 auto;
  accent-color:  var(--bcc-primary);
  cursor:        pointer;
}

.ppl-publish-toggle:focus-visible {
  outline: none;
  box-shadow: var(--bcc-focus);
  border-radius: var(--bcc-r-xs);
}

.ppl-family-note {
  margin:      0;
  font-size:   var(--bcc-t-xs);
  line-height: 1.5;
  color:       var(--bcc-ink-3);
  overflow-wrap: anywhere;
}

.ppl-family-temp-note {
  padding:       var(--bcc-s2) var(--bcc-s3);
  border-left:   3px solid var(--bcc-border-strong);
  background:    var(--bcc-surface-2);
  border-radius: var(--bcc-r-sm);
}

/* ================================================================
   RESPONSIVE — TABLE REFLOWS TO STACKED CARDS (≤767)
=============================================================== */
@media (max-width: 767px) {
  .ppl-view .ppl-table-card { overflow: visible; background: transparent; border: none; box-shadow: none; }
  .ppl-view .ppl-table-wrap { overflow: visible; }

  .ppl-view .ppl-table { min-width: 0; display: block; }
  .ppl-view .ppl-table thead { display: none; }
  .ppl-view .ppl-table tbody { display: block; }

  .ppl-view .ppl-table tr.ppl-row {
    position:      relative;
    display:       block;
    padding:       var(--bcc-s3) var(--bcc-s4);
    margin-bottom: var(--bcc-s3);
    background:    var(--bcc-surface-1);
    border:        1px solid var(--bcc-border);
    border-radius: var(--bcc-r-lg);
    box-shadow:    var(--bcc-shadow-1);
  }
  .ppl-view .ppl-table tr.ppl-row:hover { background: var(--bcc-surface-1); }

  .ppl-view .ppl-table tr.ppl-row > td {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--bcc-s3);
    padding:         var(--bcc-s1) 0;
    border:          none;
    text-align:      left;
  }

  .ppl-view .ppl-table tr.ppl-row > td::before {
    content:        attr(data-label);
    font-size:      var(--bcc-t-xs);
    font-weight:    600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color:          var(--bcc-ink-3);
    flex-shrink:    0;
  }

  /* Name cell = card header */
  .ppl-view .ppl-table tr.ppl-row > td.ppl-cell-name {
    padding-left:  var(--bcc-s6);
    padding-bottom: var(--bcc-s2);
    margin-bottom: var(--bcc-s2);
    border-bottom: 1px solid var(--bcc-border);
  }
  .ppl-cell-name::before { content: none; }

  /* Checkbox floats in the top-left of the card */
  .ppl-view .ppl-table tr.ppl-row > td.ppl-cell-select {
    position: absolute;
    top:      var(--bcc-s3);
    left:     var(--bcc-s3);
    width:    auto;
    padding:  0;
  }
  .ppl-cell-select::before { content: none; }

  /* Email already shown under the name — drop the duplicate column */
  .ppl-view .ppl-table tr.ppl-row > td.ppl-cell-email { display: none; }

  /* Actions footer */
  .ppl-view .ppl-table tr.ppl-row > td.ppl-cell-actions {
    justify-content: flex-end;
    margin-top:      var(--bcc-s2);
    padding-top:     var(--bcc-s2);
    border-top:      1px solid var(--bcc-border);
  }
  .ppl-cell-actions::before { content: none; }
  .ppl-view .ppl-table .ppl-cell-actions .ppl-view-btn { min-height: 44px; }
  .ppl-view .ppl-table input[type="checkbox"] { width: 20px; height: 20px; }

  .ppl-view .ppl-table .bcc-table-empty { display: block; text-align: center; }

  /* Selected row tint comes from the card background — drop the desktop bar */
  .ppl-view .ppl-table tr.ppl-row.bcc-row-selected { background: var(--bcc-primary-tint); }
  .ppl-view .ppl-table tr.ppl-row.bcc-row-selected td:first-child { box-shadow: none; }

  /* Pagination stacks */
  .ppl-view .adm-pagination { flex-direction: column; align-items: flex-start; gap: var(--bcc-s2); }

  /* 44px touch targets */
  .ppl-view .ppl-header-actions .bcc-btn,
  .ppl-view .ppl-toolbar .bcc-pill,
  .ppl-view .ppl-bulk-bar .bcc-btn { min-height: 44px; }

  /* iOS: keep in-page form controls at 16px so focus does not zoom the page.
     (Modal inputs are handled by the shared .bcc-modal rule.) */
  .ppl-view input,
  .ppl-view select,
  .ppl-view textarea,
  .ppl-view .ppl-search input { font-size: 16px; }

  /* Family section in the drawer: stack, wrap, and 44px touch targets */
  .ppl-family-shell .famx-row {
    flex-wrap: wrap;
    width:     100%;
  }

  .ppl-family-shell .famx-row-info { flex: 1 1 140px; }

  .ppl-family-shell .famx-row-actions {
    flex:            1 1 100%;
    justify-content: flex-start;
  }

  .ppl-family-shell .famx-actions { flex-direction: column; }

  .ppl-family-shell .famx-action-btn,
  .ppl-family-shell .famx-row-actions .bcc-btn {
    flex:        1 1 auto;
    min-height:  44px;
    height:      auto;
    padding-inline: var(--bcc-s4);
  }

  .ppl-family-publish { padding: var(--bcc-s3); }

  .ppl-publish-row { align-items: stretch; }

  .ppl-publish-name { flex: 1 1 100%; }

  .ppl-publish-toggle-label {
    min-height: 44px;
    margin-left: 0;
    flex: 1 1 auto;
  }

  .ppl-family-shell .famx-badge,
  .ppl-family-shell .famx-pill { white-space: normal; }

  /* DOB badges/dates wrap; the missing-DOB flag stacks with a 44px action */
  .ppl-dob-badge,
  .ppl-ss-badge,
  .ppl-unacc-badge,
  .ppl-dob-date { white-space: normal; }
  .ppl-dob-flag {
    flex-direction: column;
    align-items:    stretch;
  }
  .ppl-dob-flag .bcc-btn { min-height: 44px; }
  .ppl-dob-flag--drawer { margin: var(--bcc-s3) 0 0; }
}

/* ================================================================
   RESPONSIVE — 481–767 vs ≤480 refinements
=============================================================== */
@media (min-width: 481px) and (max-width: 767px) {
  .ppl-view .ppl-toolbar { padding: var(--bcc-s3); }
  .ppl-view .ppl-search  { max-width: none; }
}

@media (max-width: 480px) {
  .ppl-view .ppl-header-actions { width: 100%; }
  .ppl-view .ppl-header-actions .bcc-btn { flex: 1 1 auto; }
  .ppl-view .ppl-search { flex: 1 1 100%; max-width: none; }
  .ppl-bulk-bar { width: 100%; }
  .ppl-drawer-hero { padding: var(--bcc-s4); }
  .ppl-drawer-hero-actions { width: 100%; margin-left: 0; }
  .ppl-drawer-panel.active { padding: var(--bcc-s4); }
}

/* 768–1024 tablet: keep the table but tighten chrome */
@media (min-width: 768px) and (max-width: 1024px) {
  .ppl-view .ppl-search { max-width: 260px; }
}

/* ≥1025 desktop: comfortable table + roomy toolbar */
@media (min-width: 1025px) {
  .ppl-view .ppl-toolbar { gap: var(--bcc-s4); }
  .ppl-view .ppl-search  { flex: 0 1 340px; }
}

/* 320–360: tighten badge/date text so cards stay within the viewport */
@media (max-width: 360px) {
  .ppl-dob-badge,
  .ppl-ss-badge,
  .ppl-unacc-badge { font-size: .62rem; padding: 2px 6px; }
  .ppl-dob-date { font-size: .62rem; }
  .ppl-dob-flag { padding: var(--bcc-s3); }
}

/* ================================================================
   REDUCED MOTION
=============================================================== */
@media (prefers-reduced-motion: reduce) {
  .ppl-drawer-panel.active { animation: none; }
  .ppl-view .ppl-table tr.ppl-row { transition: none; }
}