/* ==========================================================================
   Key Contacts — compact contact grid shown on firm directory cards and
   the firm record page
   ========================================================================== */
.key-contacts {
  width: 100%;
}

/* == header == */
.key-contacts__header {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.key-contacts__title {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  margin: 0;
}

/* == layout == */
.key-contacts__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.key-contacts__container--wide {
  gap: var(--space-5);
}

.key-contacts__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.key-contacts__column {
  flex: 1 1 0;
  min-width: 0;
}

/* == contact identity == */
.key-contacts__primary-details {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.key-contacts__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--tint-navy-06);
  border: 1px solid var(--color-border-strong);
}

.key-contacts__details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.key-contacts__name {
  font-family: var(--font-family-bold);
  font-size: var(--font-size-medium);
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-1) 0;
}

.key-contacts__role {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin: 0;
}

/* == contact details == */
.key-contacts__secondary-details {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.key-contacts__secondary-details p {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  white-space: nowrap;
}

.key-contacts__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-faint);
}

/* --- Principal contact ---------------------------------------------------
   The one contact who speaks for the firm — the one the monthly satisfaction
   survey goes to. The badge reads the same wherever contacts are listed, so a
   glance at the table and a glance at the dashboard card agree. */
.principal-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--tint-green-16);
  border: 1px solid var(--color-primary-green);
  color: var(--color-primary-dark);
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.principal-badge__icon {
  width: 12px;
  height: 12px;
  fill: var(--color-primary-green);
  stroke: var(--color-primary-green);
}

/* Tinted so the principal is still findable once the table is scrolled and the
   badge has gone off the top. Same treatment an overdue complaint's row gets,
   in the affirmative colour. */
.key-contact-row--principal > td {
  background: var(--tint-green-10);
}

/* The badge sits beside the name, so the name stops wrapping to make room for
   it — the column widens instead. */
.key-contact-row--principal .team-member__name-cell {
  white-space: nowrap;
}

/* The dashboard card's version: a left edge rather than a wash, because the
   cards already sit on a tinted panel. */
.firm-contact-card--principal {
  border-left: 3px solid var(--color-primary-green);
  background: var(--tint-green-10);
}