.admin-contacts {
  /* A literal, not a token: Web Awesome has no content-width token in this build —
     every candidate (size/content variants) resolves to nothing, so the max-width was
     silently absent. This is a layout dimension, not a brand value, so a literal here
     does not violate the single-source-of-colour rule. */
  max-width: 80rem;
  margin-block-start: var(--wa-space-l);
}

.admin-contacts__title {
  font-size: var(--wa-font-size-xl);
  color: var(--wa-color-text-normal);
  margin-block-end: var(--wa-space-m);
}

.admin-contacts__search {
  display: flex;
  align-items: end;
  gap: var(--wa-space-m);
  margin-block-end: var(--wa-space-l);
}

.admin-contacts__table {
  width: 100%;
  border-collapse: collapse;
}

.admin-contacts__table thead th {
  text-align: start;
  color: var(--wa-color-text-quiet);
  font-weight: 600;
  padding-block-start: var(--wa-space-m);
  padding-block-end: var(--wa-space-m);
  border-block-end: 1px solid var(--wa-color-surface-border);
}

.admin-contacts__table tbody td {
  padding-block-start: var(--wa-space-m);
  padding-block-end: var(--wa-space-m);
  border-block-end: 1px solid var(--wa-color-surface-border);
  color: var(--wa-color-text-normal);
  vertical-align: middle;
}

.admin-contacts__empty {
  color: var(--wa-color-text-quiet);
  margin-block-start: var(--wa-space-l);
}