.parties {
  display: grid;
  gap: var(--sp-3);
}

/* The shared .lc-card__head adds its own margin-bottom; the grid gap owns the
   head-to-list spacing here. */
.parties .lc-card__head {
  margin-bottom: 0;
}

.parties__add {
  position: relative;
}

/* Each add-party modal wrapper holds only a closed <dialog>; display:contents
   keeps it out of the surrounding stack so it adds no empty gap. */
.party-modal {
  display: contents;
}

.parties__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.parties__list li {
  list-style: none;
}

.parties__empty {
  color: var(--color-ink-muted);
  margin: 0;
}

/* Chrome is .lc-row; .party only sets its column layout. */
.party {
  grid-template-columns: auto 1fr auto;
}

.party__role {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  width: 100px;
  flex-shrink: 0;
}

.party__name {
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  color: var(--color-ink);
}

.party__contact {
  font-size: var(--fs-13);
  color: var(--color-ink-muted);
}

.party__manage {
  position: relative;
}

/* Paint reset is `.lc-bare-btn`; these accents sit above it at (0,2,0). */
.party .party__action {
  padding: var(--sp-1) var(--sp-2);
  color: var(--color-ink-muted);
  font-size: var(--fs-13);
}

.party .party__action:hover {
  color: var(--color-ink);
}

.party__action-icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
}