/* /connect/views/profile.css — Member Profile view v3 ("Vibrant Community")
 * Loaded AFTER views.css so this layer wins the cascade. Visual-only.
 * Uses --bcc-* design tokens from connect-tokens.css and shared bcc-*
 * component classes. The only literals are #fff (on-primary / on-gradient ink,
 * matching the token button recipe) and translucent black/white gradient and
 * scrim overlays. No thematic palette hex.
 *
 * Breakpoints: small ≤480 · mobile 481–767 · tablet 768–1024 · desktop ≥1025
 * ================================================================ */

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

/* ================================================================
   PAGE WRAP + HEAD
   ================================================================ */
.profx-wrap {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s6);
  max-width:      820px;
  margin:         0 auto;
  padding:        0 0 var(--bcc-s10);
}

.profx-head { margin-bottom: 0; }
.profx-head-main { display: flex; flex-direction: column; }
.prof-back-btn { align-self: flex-start; }
.profx-title { margin: var(--bcc-s2) 0 0; }

/* ================================================================
   TABS — aria tablist (roving tabindex handled in JS)
   ================================================================ */
.prof-tab-bar {
  display:         flex;
  gap:             var(--bcc-s1);
  border-bottom:   1px solid var(--bcc-border);
  margin-bottom:   var(--bcc-s6);
  overflow-x:      auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.prof-tab-bar::-webkit-scrollbar { display: none; }

.prof-tab {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--bcc-s2);
  height:          46px;
  padding:         0 var(--bcc-s5);
  font-size:       var(--bcc-t-sm);
  font-weight:     600;
  color:           var(--bcc-ink-3);
  background:      transparent;
  border:          none;
  border-bottom:   2px solid transparent;
  border-radius:   var(--bcc-r-sm) var(--bcc-r-sm) 0 0;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      color        var(--bcc-dur-2) var(--bcc-ease),
                   background   var(--bcc-dur-2) var(--bcc-ease),
                   border-color var(--bcc-dur-2) var(--bcc-ease);
}
.prof-tab .bcc-icon { opacity: .85; transition: opacity var(--bcc-dur-2) var(--bcc-ease); }
.prof-tab.active {
  color:               var(--bcc-primary);
  border-bottom-color: var(--bcc-primary);
  background:          var(--bcc-primary-tint);
  font-weight:         700;
}
.prof-tab.active .bcc-icon { opacity: 1; }
.prof-tab:focus-visible {
  outline:      none;
  box-shadow:   var(--bcc-focus);
  border-radius: var(--bcc-r-sm) var(--bcc-r-sm) 0 0;
}

/* ── Panels ── */
.prof-panel { display: none; }
.prof-panel-active {
  display:   block;
  animation: prof-panel-in var(--bcc-dur-3) var(--bcc-ease);
}
.prof-panel[hidden] { display: none !important; }
.prof-panel:focus-visible { outline: none; }

@keyframes prof-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   STACK + SECTION CARDS
   ================================================================ */
.profx-stack { display: flex; flex-direction: column; gap: var(--bcc-s5); }

.prof-card { padding: var(--bcc-s5); }
.profx-card { overflow: hidden; }

.prof-section-title {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  margin:         0 0 var(--bcc-s4);
}
.profx-title-flush { margin-bottom: 0; }

.profx-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--bcc-s4);
}
.profx-field { margin-bottom: 0; }
.profx-actions { display: flex; justify-content: flex-end; margin-top: var(--bcc-s4); }

/* ================================================================
   DATE OF BIRTH — prompt banner, field row, status badge, inline error
   ================================================================ */
.prof-dob-banner {
  display:     flex;
  align-items: flex-start;
  gap:         var(--bcc-s3);
  padding:     var(--bcc-s4) var(--bcc-s5);
  border:      1px solid var(--bcc-warning);
  border-left: 4px solid var(--bcc-warning);
  border-radius: var(--bcc-r-md);
  background:  var(--bcc-warning-soft);
}
.prof-dob-banner-icon {
  flex-shrink:   0;
  display:       inline-flex;
  margin-top:    2px;
  color:         var(--bcc-warning);
}
.prof-dob-banner-text { flex: 1; min-width: 0; }
.prof-dob-banner-title {
  margin:      0 0 2px;
  font-size:   var(--bcc-t-sm);
  font-weight: 700;
  color:       var(--bcc-ink);
}
.prof-dob-banner-sub {
  margin:      0;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-2);
  line-height: 1.5;
}
.prof-dob-banner-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--bcc-s2);
  flex-shrink: 0;
}
.prof-dob-notify-link { white-space: nowrap; }

.profx-dob-field { margin-top: var(--bcc-s4); }
.prof-dob-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  flex-wrap:   wrap;
}
.prof-dob-row .prof-dob-input { flex: 0 1 220px; min-width: 0; }

.prof-dob-status { display: inline-flex; }
.prof-dob-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 10px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   700;
  white-space:   nowrap;
}
.prof-dob-badge-adult   { background: var(--bcc-success-soft); color: var(--bcc-success); }
.prof-dob-badge-minor   { background: var(--bcc-info-soft);    color: var(--bcc-info); }
.prof-dob-badge-unknown { background: var(--bcc-warning-soft); color: var(--bcc-warning); }

.prof-inline-error {
  margin-top:   var(--bcc-s3);
  font-size:    var(--bcc-t-sm);
  color:        var(--bcc-danger);
  font-weight:  600;
}
.prof-inline-error[hidden] { display: none; }

/* ================================================================
   PROFILE HERO — cover banner + overlapping avatar + name + badge
   ================================================================ */
.prof-hero-card {
  display:       block;
  position:      relative;
  overflow:      hidden;
  padding:       0;
  border:        1px solid var(--bcc-border-strong);
  box-shadow:    var(--bcc-shadow-2);
}

.prof-hero-cover {
  position:   relative;
  height:     132px;
  overflow:   hidden;
  background: linear-gradient(135deg,
                var(--bcc-primary) 0%,
                var(--bcc-primary-hover) 55%,
                var(--bcc-accent) 130%);
}
.prof-hero-cover::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 100%);
}
.prof-hero-glow {
  position:      absolute;
  top:           -60%;
  right:         -6%;
  width:         300px;
  height:        300px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,0) 68%);
}

.prof-hero-body {
  position:    relative;
  display:     flex;
  align-items: flex-end;
  gap:         var(--bcc-s5);
  padding:     0 var(--bcc-s6) var(--bcc-s5);
  margin-top:  -44px;
}

.prof-avatar-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--bcc-s3);
  flex-shrink:    0;
}
.prof-avatar {
  width:         96px;
  height:        96px;
  border-radius: 50%;
  border:        4px solid var(--bcc-surface-1);
  background:    var(--bcc-primary);
  color:         #fff;
  box-shadow:    var(--bcc-shadow-2);
  font-size:     1.9rem;
  font-weight:   700;
}
.prof-avatar-actions {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--bcc-s1);
}
.prof-upload-label { cursor: pointer; }
.prof-file-input { display: none; }
.prof-upload-status {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-success);
}

.prof-overview-name-block { flex: 1; min-width: 0; padding-bottom: var(--bcc-s1); }
.prof-display-name {
  font-size:      var(--bcc-t-2xl);
  font-weight:    700;
  letter-spacing: -.02em;
  color:          var(--bcc-ink);
  margin:         0 0 var(--bcc-s2);
}
.prof-hero-badges {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--bcc-s2);
  align-items:   center;
  margin-bottom: var(--bcc-s1);
}
.prof-role-badge { display: inline-flex; }
.prof-member-since { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }

/* ================================================================
   BIO + VISIBILITY
   ================================================================ */
.prof-bio-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  margin-bottom:   var(--bcc-s3);
}
.prof-visibility-row { display: flex; align-items: center; gap: var(--bcc-s2); }
.profx-inline-label {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  margin:      0;
  font-size:   var(--bcc-t-xs);
  white-space: nowrap;
}
.prof-visibility-row .bcc-input {
  width:      auto;
  min-width:  150px;
  height:     34px;
  font-size:  var(--bcc-t-xs);
}
.prof-bio-textarea { margin-top: var(--bcc-s2); resize: vertical; }
.prof-bio-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--bcc-s3);
  margin-top:      var(--bcc-s3);
}
.prof-char-count { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }

/* ================================================================
   CHURCH MEMBERSHIP + ACCOUNT
   ================================================================ */
.prof-church-info { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); }
.prof-church-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s3);
  flex-wrap:   wrap;
}
.prof-church-row strong { color: var(--bcc-ink); font-size: var(--bcc-t-md); }

.prof-signout-btn {
  color:        var(--bcc-danger);
  border:       1px solid var(--bcc-danger-soft);
  background:   var(--bcc-danger-soft);
}

/* ================================================================
   FAITH JOURNEY — header, empty, vertical timeline
   ================================================================ */
.prof-journey-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  gap:             var(--bcc-s4);
  flex-wrap:       wrap;
  margin-bottom:   var(--bcc-s6);
}
.prof-journey-head-text { display: flex; flex-direction: column; gap: var(--bcc-s1); }
.prof-journey-sub { margin: 0; font-size: var(--bcc-t-sm); color: var(--bcc-ink-3); }

.prof-journey-empty {
  text-align:    center;
  padding:       var(--bcc-s12) var(--bcc-s5);
  color:         var(--bcc-ink-3);
  font-size:     var(--bcc-t-sm);
  background:    var(--bcc-surface-1);
  border:        1px dashed var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
}
.prof-journey-empty-icon {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--bcc-s4);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
}
.prof-journey-empty p { margin: 0; }

/* ── Timeline ── */
.prof-timeline { position: relative; padding-left: var(--bcc-s8); }
.prof-timeline::before {
  content:       '';
  position:      absolute;
  left:          9px;
  top:           6px;
  bottom:        6px;
  width:         2px;
  border-radius: 1px;
  background:    linear-gradient(180deg,
                   var(--bcc-primary-soft) 0%,
                   var(--bcc-border) 26%,
                   var(--bcc-border) 100%);
}

.prof-timeline-item { position: relative; margin-bottom: var(--bcc-s6); }
.prof-timeline-item:last-child { margin-bottom: 0; }

.prof-timeline-dot {
  position:      absolute;
  left:          calc(-1 * var(--bcc-s8) + 2px);
  top:           15px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  z-index:       1;
  background:    var(--prof-dot, var(--bcc-primary));
  border:        3px solid var(--bcc-bg);
  box-shadow:    0 0 0 1px var(--bcc-border-strong),
                 0 0 14px -2px var(--prof-dot, var(--bcc-primary));
}

.prof-timeline-content {
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-lg);
  padding:       var(--bcc-s4) var(--bcc-s5);
  box-shadow:    var(--bcc-shadow-1);
  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);
}

/* Shared milestones use a warm accent ring instead of the legacy hard border */
.prof-timeline-item.bcc-milestone-shared { border: none !important; box-shadow: none !important; }
.prof-timeline-item.bcc-milestone-shared .prof-timeline-content {
  border-color: var(--bcc-accent);
  background:   linear-gradient(180deg, var(--bcc-accent-soft), rgba(0,0,0,0) 42%),
                var(--bcc-surface-1);
  box-shadow:   0 0 0 1px var(--bcc-accent-soft), var(--bcc-shadow-2);
}
.prof-timeline-item.bcc-milestone-shared .prof-timeline-dot {
  box-shadow: 0 0 0 1px var(--bcc-accent),
              0 0 16px -1px var(--bcc-accent);
}

.prof-milestone-date {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  margin-bottom:  var(--bcc-s1);
}
.prof-milestone-title {
  font-size:     var(--bcc-t-lg);
  font-weight:   700;
  color:         var(--bcc-ink);
  line-height:   1.35;
  margin-bottom: var(--bcc-s2);
}
.prof-milestone-type {
  display:        inline-flex;
  align-items:    center;
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  var(--bcc-r-pill);
  margin-bottom:  var(--bcc-s3);
  letter-spacing: .03em;
  background:     var(--prof-type-soft, var(--bcc-primary-soft));
  color:          var(--prof-type, var(--bcc-primary));
}

.prof-milestone-body {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-2);
  line-height: 1.7;
  margin-top:  var(--bcc-s2);
}
.prof-milestone-body-full { display: block; }
.prof-read-more { margin-left: var(--bcc-s2); }

.prof-scripture-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  margin-top:     var(--bcc-s3);
  padding:        var(--bcc-s3) var(--bcc-s4);
  background:     var(--bcc-primary-soft);
  border-left:    3px solid var(--bcc-primary);
  border-radius:  var(--bcc-r-sm);
}
.prof-scripture-head { display: flex; align-items: center; gap: var(--bcc-s2); color: var(--bcc-primary); }
.prof-scripture-ref { font-size: var(--bcc-t-sm); font-weight: 700; color: var(--bcc-primary); white-space: nowrap; }
.prof-scripture-text { font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); font-style: italic; line-height: 1.55; }

.prof-recorded-by {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
  font-style:  italic;
  margin-top:  var(--bcc-s2);
}

.prof-milestone-actions {
  display:     flex;
  gap:         var(--bcc-s2);
  margin-top:  var(--bcc-s3);
  padding-top: var(--bcc-s3);
  border-top:  1px solid var(--bcc-border);
}

/* ── Celebration cards ── */
.prof-celebration-card {
  margin-top:    var(--bcc-s4);
  padding:       var(--bcc-s3) var(--bcc-s4);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
}
.prof-celebration-row { display: flex; align-items: center; gap: var(--bcc-s2); flex-wrap: wrap; }

.bcc-milestone-celebration-count {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     var(--bcc-t-xs);
  font-weight:   700;
  background:    var(--bcc-accent-soft);
  color:         var(--bcc-accent);
  border-radius: var(--bcc-r-pill);
  padding:       3px 10px;
  white-space:   nowrap;
}
.bcc-celebration-list {
  margin-top:    var(--bcc-s3);
  padding:       var(--bcc-s3);
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-sm);
}
.bcc-celebration-item {
  display:       flex;
  gap:           var(--bcc-s2);
  padding:       var(--bcc-s2) 0;
  border-bottom: 1px solid var(--bcc-border);
}
.bcc-celebration-item:last-child { border-bottom: none; padding-bottom: 0; }
.bcc-celebration-msg {
  flex:       1;
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-2);
  line-height: 1.55;
  word-break: break-word;
}
.bcc-celebration-msg strong { color: var(--bcc-ink); }
.prof-celeb-time { color: var(--bcc-ink-3); font-size: var(--bcc-t-xs); }
.prof-celeb-empty { margin: 0; font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }

.bcc-celebration-input-row { display: flex; gap: var(--bcc-s2); margin-top: var(--bcc-s3); align-items: center; }
.bcc-celebration-input { flex: 1; min-width: 0; }

/* ================================================================
   SERVING
   ================================================================ */
.prof-serve-section-title {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  margin:         0 0 var(--bcc-s3);
}
.prof-serve-section-title--past { margin-top: var(--bcc-s5); }
.prof-serve-row {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3) var(--bcc-s4);
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  margin-bottom: var(--bcc-s2);
  transition:    border-color var(--bcc-dur-2) var(--bcc-ease);
}
.prof-serve-row:last-child { margin-bottom: 0; }
.prof-serve-date {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-shrink: 0;
  min-width:   110px;
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  color:       var(--bcc-ink-3);
}
.prof-serve-info { flex: 1; min-width: 0; }
.prof-serve-plan {
  font-size:      var(--bcc-t-sm);
  font-weight:    600;
  color:          var(--bcc-ink);
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}
.prof-serve-role { font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); margin-top: 2px; }

/* ================================================================
   GIVING
   ================================================================ */
.prof-giving-actions { display: flex; justify-content: flex-end; }
.prof-giving-note {
  display:     flex;
  align-items: flex-start;
  gap:         var(--bcc-s2);
  margin:      0;
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
}
.prof-giving-note .bcc-icon { color: var(--bcc-primary); margin-top: 2px; }
.prof-give-amount { color: var(--bcc-success); font-weight: 700; }
.prof-giving-table-card { padding: 0; overflow: hidden; }

/* ================================================================
   FAMILY (Profile → Family tab; body rendered by shared BCC_FAMILY)
   ================================================================ */
.prof-family-card { overflow: hidden; }

.prof-family-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  margin-bottom:  var(--bcc-s4);
}
.prof-family-heading {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s2);
  margin:      0;
}
.prof-family-heading .bcc-icon { color: var(--bcc-primary); }
.prof-family-sub {
  margin:      0;
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-3);
  line-height: 1.5;
}
.prof-family-body { min-width: 0; max-width: 100%; }

/* The relabelled "Temporary (Sunday school check-in only)" title is much
   longer than the shared block titles — let it wrap instead of overflowing. */
.prof-family-body .famx-block-title { flex-wrap: wrap; }
.prof-family-temp-label { min-width: 0; overflow-wrap: anywhere; }

/* ================================================================
   SHARED EMPTY STATE
   ================================================================ */
.prof-empty {
  text-align:    center;
  padding:       var(--bcc-s10) var(--bcc-s5);
  color:         var(--bcc-ink-3);
  background:    var(--bcc-surface-1);
  border:        1px dashed var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
}
.prof-empty-icon {
  width:           60px;
  height:          60px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--bcc-s4);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
}
.prof-empty-title {
  margin:         0 0 var(--bcc-s1);
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-lg);
  font-weight:    600;
  color:          var(--bcc-ink-2);
}
.prof-empty-sub { margin: 0 auto; max-width: 320px; font-size: var(--bcc-t-sm); }

/* ================================================================
   ADD / EDIT MILESTONE MODAL
   ================================================================ */
.prof-modal-form { display: flex; flex-direction: column; gap: var(--bcc-s4); }
.prof-req { color: var(--bcc-danger); }
.prof-field-count { text-align: right; font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); margin-top: var(--bcc-s1); }

.prof-share-row {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  background:    var(--bcc-surface-2);
}
.prof-share-row input[type="checkbox"] {
  margin-top:   3px;
  width:        16px;
  height:       16px;
  accent-color: var(--bcc-primary);
  flex-shrink:  0;
  cursor:       pointer;
}
.prof-share-text { min-width: 0; }
.prof-share-label { margin: 0 0 2px; cursor: pointer; }
.prof-hint { margin: 0; font-size: var(--bcc-t-xs); color: var(--bcc-ink-3); }

.prof-scripture-fieldset {
  margin:        0;
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding:       var(--bcc-s3) var(--bcc-s4) var(--bcc-s4);
}
.prof-scripture-legend {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--bcc-s2);
  padding:        0 var(--bcc-s2);
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
}
.prof-scripture-legend .bcc-icon { color: var(--bcc-primary); }
.prof-scripture-grid { display: grid; grid-template-columns: 1fr 68px 68px; gap: var(--bcc-s2); }
.prof-scripture-text-input { margin-top: var(--bcc-s2); }

/* ================================================================
   MEMBER PROFILE DRAWER (reused from directory / feed / groups / prayer)
   ================================================================ */
.prof-drawer-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s5);
  /* Keep the last action row clear of the home indicator inside the panel */
  padding-bottom: max(var(--bcc-s2), env(safe-area-inset-bottom, 0px));
}

.prof-drawer-hero {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s4);
  padding:       var(--bcc-s5);
  border-radius: var(--bcc-r-lg);
  border:        1px solid var(--bcc-border);
  background:    linear-gradient(135deg, var(--bcc-primary-soft), rgba(0,0,0,0) 70%),
                 var(--bcc-surface-2);
}
.prof-drawer-avatar {
  flex-shrink:   0;
  border-radius: 50%;
  padding:       3px;
  background:    linear-gradient(135deg, var(--bcc-primary), var(--bcc-accent));
  box-shadow:    var(--bcc-shadow-1);
}
.prof-drawer-avatar .bcc-avatar {
  border:     2px solid var(--bcc-surface-1);
  box-shadow: none;
}
.prof-drawer-id { flex: 1; min-width: 0; }
.prof-drawer-name {
  font-size:      var(--bcc-t-xl);
  font-weight:    700;
  letter-spacing: -.02em;
  color:          var(--bcc-ink);
  margin:         0 0 var(--bcc-s2);
}
.prof-drawer-bio { margin: 0; font-size: var(--bcc-t-sm); color: var(--bcc-ink-2); line-height: 1.7; }
.prof-drawer-bio--empty { font-style: italic; color: var(--bcc-ink-3); }
.prof-drawer-journey { border-top: 1px solid var(--bcc-border); padding-top: var(--bcc-s5); }
.prof-drawer-section-title {
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--bcc-ink-3);
  margin-bottom:  var(--bcc-s4);
}

.conn-btn-row { display: flex; flex-wrap: wrap; gap: var(--bcc-s2); margin-top: var(--bcc-s2); }
.conn-count-row {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s1);
  margin-top:  var(--bcc-s2);
  font-size:   var(--bcc-t-xs);
  color:       var(--bcc-ink-3);
}
.conn-status-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 10px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   700;
  background:    var(--bcc-success-soft);
  color:         var(--bcc-success);
}
.prof-conn-danger { color: var(--bcc-danger) !important; }
.prof-conn-muted  { color: var(--bcc-ink-3); }
.prof-conn-follow .bcc-icon { color: var(--bcc-accent); }

/* Drawer timeline: trim the rail a touch inside the narrower panel */
.prof-drawer-journey .prof-timeline-content { padding: var(--bcc-s3) var(--bcc-s4); }

/* ================================================================
   FOCUS
   ================================================================ */
.prof-read-more:focus-visible,
.prof-edit-milestone:focus-visible,
.prof-del-milestone:focus-visible,
.prof-upload-label:focus-visible,
.prof-celeb-toggle:focus-visible,
.prof-celeb-open:focus-visible,
.prof-add-moment-btn:focus-visible,
#prof-add-moment-btn:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}

/* ================================================================
   TOUCH FEEDBACK — no blue flash, calmer press states on touch
   ================================================================ */
.prof-tab,
.prof-read-more,
.prof-edit-milestone,
.prof-del-milestone,
.prof-celeb-open,
.prof-celeb-toggle,
.prof-celeb-submit,
.prof-upload-label,
.prof-signout-btn,
.profx-wrap .bcc-btn,
.prof-drawer-content .bcc-btn {
  -webkit-tap-highlight-color: transparent;
}
.prof-tab:active { background: var(--bcc-surface-3); }
.prof-signout-btn:active { filter: brightness(.96); }

/* ================================================================
   HOVER — pointer devices only (avoids sticky hover on touch)
   ================================================================ */
@media (hover: hover) {
  .prof-tab:hover { color: var(--bcc-ink-2); background: var(--bcc-surface-2); }
  .prof-signout-btn:hover {
    background:   var(--bcc-danger);
    border-color: var(--bcc-danger);
    color:        #fff;
  }
  .prof-timeline-content:hover {
    border-color: var(--bcc-border-strong);
    box-shadow:   var(--bcc-shadow-2);
    transform:    translateY(-2px);
  }
  .prof-serve-row:hover { border-color: var(--bcc-border-strong); }
}

/* ================================================================
   RESPONSIVE — desktop ≥1025 (base rules above already apply)
   ================================================================ */
@media (min-width: 1025px) {
  .prof-timeline-item { margin-bottom: var(--bcc-s8); }
}

/* ================================================================
   RESPONSIVE — tablet 768–1024
   ================================================================ */
@media (max-width: 1024px) {
  .profx-wrap { max-width: 100%; }
  .prof-hero-cover { height: 120px; }
}

/* ================================================================
   RESPONSIVE — mobile 481–767 (+ 44px touch targets)
   ================================================================ */
@media (max-width: 767px) {
  .profx-stack { gap: var(--bcc-s4); }

  .profx-form-grid { grid-template-columns: 1fr; gap: var(--bcc-s3); }

  .prof-hero-cover { height: 108px; }
  .prof-hero-body {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--bcc-s4);
    padding:        0 var(--bcc-s5) var(--bcc-s5);
    margin-top:     -40px;
  }
  .prof-avatar { width: 84px; height: 84px; font-size: 1.6rem; }

  .prof-visibility-row { width: 100%; justify-content: space-between; }
  .prof-visibility-row .bcc-input { flex: 1; }

  /* 44px touch targets for every interactive control in this view + drawer */
  .profx-wrap .bcc-btn,
  .prof-tab,
  .prof-read-more,
  .prof-edit-milestone,
  .prof-del-milestone,
  .prof-celeb-open,
  .prof-celeb-toggle,
  .prof-celeb-submit,
  .prof-upload-label,
  .prof-signout-btn,
  .prof-visibility-row .bcc-input,
  .prof-drawer-content .bcc-btn { min-height: 44px; }

  .prof-journey-header { align-items: flex-start; }
  .prof-journey-header .bcc-btn { width: 100%; }

  /* DOB banner stacks; buttons become full-width thumb targets */
  .prof-dob-banner { flex-wrap: wrap; }
  .prof-dob-banner-actions { width: 100%; }
  .prof-dob-banner-actions .bcc-btn { flex: 1 1 auto; }
  .prof-dob-row .prof-dob-input { flex: 1 1 100%; }
  .prof-dob-banner .bcc-btn { min-height: 44px; }

  .prof-serve-row { flex-wrap: wrap; }
  .prof-serve-date { width: 100%; min-width: 0; }

  .bcc-celebration-input-row { flex-direction: column; align-items: stretch; }
  .bcc-celebration-input-row .bcc-btn { width: 100%; }

  .prof-giving-actions { justify-content: stretch; }
  .prof-giving-actions .bcc-btn { width: 100%; }
}

/* ================================================================
   RESPONSIVE — small phone ≤480
   ================================================================ */
@media (max-width: 480px) {
  .profx-wrap { gap: var(--bcc-s5); }
  .prof-card { padding: var(--bcc-s4); }

  .prof-hero-body { padding: 0 var(--bcc-s4) var(--bcc-s4); }
  .prof-display-name { font-size: var(--bcc-t-xl); }

  .prof-tab { padding: 0 var(--bcc-s4); }

  .prof-timeline { padding-left: var(--bcc-s6); }
  .prof-timeline::before { left: 7px; }
  .prof-timeline-dot { left: calc(-1 * var(--bcc-s6)); top: 14px; }
  .prof-timeline-content { padding: var(--bcc-s3) var(--bcc-s4); }

  .prof-scripture-grid { grid-template-columns: 1fr 56px 56px; }

  .prof-drawer-hero { flex-direction: column; text-align: center; }
  .prof-drawer-id { width: 100%; }
  .prof-drawer-hero .conn-btn-row { justify-content: center; }

  /* Connect / Accept / Decline / Cancel / Remove / Follow become
     full-width, thumb-sized targets instead of a centered cluster. */
  .conn-btn-row .bcc-btn { flex: 1 1 auto; min-height: 44px; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .profx-wrap *,
  .profx-wrap *::before,
  .profx-wrap *::after,
  .prof-drawer-content *,
  .prof-drawer-content *::before,
  .prof-drawer-content *::after {
    animation-duration:        .001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       .001ms !important;
  }
  .prof-timeline-content:hover { transform: none; }
  .prof-panel-active { animation: none; }
}