/*
 * Staff chip — an initials circle beside a stacked role label and full name.
 *
 * ISH-466. This pattern already existed twice before this file, in two different
 * shapes, and both are deliberate rather than accidental:
 *
 *   - broker.html (js/broker-detail.js) draws the circle ALONE and puts the role
 *     and name in a hover tooltip. That page's hero is dense and the chips are a
 *     secondary read there.
 *   - sales-pipeline-detail.html's hero (renderHeroStaffChip in
 *     js/sales-pipeline-detail.js) writes the role and name out beside the
 *     circle, because the four-cell info grid it replaced carried them as visible
 *     labelled text and a hover would have lost that.
 *
 * The Sales Pipeline board's broker cards needed the second shape, so these rules
 * live in a shared file instead of becoming a third private copy of it.
 *
 * ONLY sales-pipeline.html consumes this today. The detail page's `.hero-chip*`
 * rules are the direct ancestors of everything below and should collapse into it,
 * but ISH-396 is actively rebuilding that page and renaming its classes underneath
 * that work would collide for no benefit. Fold it in when ISH-396 lands — see
 * .docs/AGENT_GUIDE.md §O.2d.
 *
 * Sizes are custom properties so one rule set can serve a page hero and a kanban
 * card. The defaults below are the CARD's (the smaller of the two). Override from
 * an ancestor selector, which beats `.staff-chip`'s own declaration on
 * specificity — e.g. `.hero-chips .staff-chip { --staff-chip-avatar-size: 24px; }`.
 */

.staff-chip {
  --staff-chip-avatar-size: 22px;
  --staff-chip-avatar-font: 0.5rem;
  --staff-chip-label-font: 0.5625rem;
  --staff-chip-name-font: 0.8125rem;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.staff-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Label over value, the same stacking as the labelled `.info-cell` this replaces
   on the board — the role stays written down rather than moving into a hover. */
.staff-chip-label {
  font-size: var(--staff-chip-label-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-label);
  white-space: nowrap;
  line-height: 1.4;
}

/* Truncates rather than wrapping, unlike the metric-card labels in the bucket
   header above it. The reasoning is opposite because the content is: a role label
   is a fixed string that must stay whole, whereas a person's name is arbitrary
   length and unbounded, so wrapping it would make card height depend on whose
   name it is and break the column's rhythm. The full name is on the chip's
   `title`, and the card links through to the staff profile anyway. */
.staff-chip-name {
  font-size: var(--staff-chip-name-font);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-chip-name.is-unset {
  color: var(--text-label);
  font-weight: 400;
  font-style: italic;
}

.staff-chip-avatar {
  width: var(--staff-chip-avatar-size);
  height: var(--staff-chip-avatar-size);
  border-radius: 50%;
  flex-shrink: 0;
  background: #f1f1f1;
  color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--staff-chip-avatar-font);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.staff-chip-avatar.is-owner {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

/* Load-bearing, not decorative: the missing_csm and missing_credit_manager flags
   chase exactly the gap this draws, so an unassigned role holds its slot as a
   dashed circle rather than collapsing out of the row. The em dash needs a size of
   its own — at the avatar's font size, set for two initials, a lone dash reads as
   a speck. */
.staff-chip-avatar.is-empty {
  background: #fafafa;
  color: #c4c4c4;
  border: 1px dashed #d8d8d8;
  font-size: calc(var(--staff-chip-avatar-font) + 0.125rem);
}

a.staff-chip-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}