/* /connect/social.css — Connect Social Graph "Person Card" component v1
 * Loaded for the connections hub + people lists that use BCC_SOCIAL.personCard().
 * Every colour comes from the --bcc-* design tokens; the only literal colours
 * are neutral shadow alpha (rgba(0,0,0,a)) — no thematic brand hex.
 * Scoped under `.bcc-person-card` so it never leaks.
 * Breakpoints: mobile <=640 (actions wrap below).
 * ─────────────────────────────────────────────────────────────────── */

/* ================================================================
   PERSON CARD
   Layout: [avatar] [name + context] [actions]
================================================================ */
.bcc-person-card {
  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-lg);
  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);
  touch-action:  manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bcc-person-card--tappable { cursor: pointer; }
.bcc-person-card:active { background: var(--bcc-surface-2); }

@media (hover: hover) {
  .bcc-person-card:hover {
    border-color: var(--bcc-border-strong);
    box-shadow:   var(--bcc-shadow-2);
  }
}

/* ── Avatar block ──────────────────────────────────────────────── */
.bcc-person-card__avatar {
  display:     inline-flex;
  flex-shrink: 0;
}

/* ── Identity block ────────────────────────────────────────────── */
.bcc-person-card__id {
  flex:      1 1 auto;
  min-width: 0;
}
.bcc-person-card__name {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-md);
  font-weight:    600;
  line-height:    1.3;
  color:          var(--bcc-ink);
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}
.bcc-person-card__ctx {
  font-size:      var(--bcc-t-xs);
  color:          var(--bcc-ink-3);
  margin-top:     2px;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

/* ── Action row ────────────────────────────────────────────────── */
.bcc-person-card__actions {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           var(--bcc-s2);
  margin-left:   auto;
  justify-content: flex-end;
}
.bcc-person-card__actions .bcc-btn { flex-shrink: 0; }
.bcc-person-card__actions .bcc-icon { flex-shrink: 0; }
.bcc-person-card__actions .bcc-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bcc-person-card__actions .bcc-btn:active,
.bcc-person-card__btn:active {
  transform: translateY(1px);
}

/* ── Status pills ──────────────────────────────────────────────── */
.bcc-pc-status {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  border-radius: var(--bcc-r-pill);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  background:    var(--bcc-surface-3);
  color:         var(--bcc-ink-3);
  white-space:   nowrap;
}
.bcc-pc-status--ok {
  background: var(--bcc-success-soft);
  color:      var(--bcc-success);
}
.bcc-pc-status .bcc-icon { width: 13px; height: 13px; }

/* ── Button colour modifiers ───────────────────────────────────── */
.bcc-pc-danger { color: var(--bcc-danger); }
@media (hover: hover) {
  .bcc-pc-danger:hover { background: var(--bcc-danger-soft); color: var(--bcc-danger); }
}
.bcc-pc-muted  { color: var(--bcc-ink-3); }

/* Follow toggle glyph uses the accent token, like the profile drawer */
.bcc-person-card .bcc-pc-follow .bcc-icon { color: var(--bcc-accent); }

/* ── Inline "View Profile" button ──────────────────────────────── */
.bcc-person-card__btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  height:        32px;
  padding:       0 var(--bcc-s3);
  border-radius: var(--bcc-r-md);
  border:        1px solid transparent;
  background:    transparent;
  color:         var(--bcc-primary);
  font-size:     var(--bcc-t-xs);
  font-weight:   600;
  white-space:   nowrap;
  cursor:        pointer;
  touch-action:  manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:    background var(--bcc-dur-2) var(--bcc-ease),
                 color      var(--bcc-dur-2) var(--bcc-ease);
}
@media (hover: hover) {
  .bcc-person-card__btn:hover { background: var(--bcc-primary-tint); }
}

/* ================================================================
   FOCUS
================================================================ */
.bcc-person-card__actions .bcc-btn:focus-visible,
.bcc-person-card__btn:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}

/* ================================================================
   RESPONSIVE — mobile: touch-sized actions + actions wrap below
   ================================================================ */
@media (max-width: 767px) {
  .bcc-person-card__actions .bcc-btn,
  .bcc-person-card__btn {
    min-height: 44px;
    height: auto;
    padding-inline: var(--bcc-s4);
  }
  .bcc-pc-status {
    min-height: 24px;
    padding-block: 3px;
  }
  .bcc-person-card__actions {
    min-width: 0;
    gap: var(--bcc-s3);
  }
}

@media (max-width: 640px) {
  .bcc-person-card {
    flex-wrap: wrap;
  }
  .bcc-person-card__id { flex: 1 1 auto; min-width: 0; }
  .bcc-person-card__actions {
    flex-basis:  100%;
    width:       100%;
    min-width:   0;
    margin-left: 0;
    gap:         var(--bcc-s3);
    justify-content: flex-start;
  }
}

/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  .bcc-person-card,
  .bcc-person-card__btn { transition: none; }
}