/* Attendee rows: a field asked of many people, one compact row per person —
   who on the left, the answer on the right. With several fields each
   (data-grouped), the name heads a small group of fields side by side. */
.attendee-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.attendee-rows[data-ruled] {
  border-block-start: var(--border-width) solid var(--color-subtle);
  padding-block-start: var(--space-s);
}

.attendee-rows__row {
  align-items: center;
  display: grid;
  gap: var(--space-3xs) var(--space-s);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 30em) {
  .attendee-rows__row {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

.attendee-rows__name {
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
}

/* A person's fields share the row's whole width: auto-fit drops the empty
   tracks .auto-grid's auto-fill keeps, so one field alone fills the row */
.attendee-rows__fields {
  --auto-grid-min: 9rem;
  --auto-grid-space: var(--space-2xs) var(--space-xs);

  grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min), 100%), 1fr));
}

.attendee-rows[data-grouped] {
  gap: var(--space-s);

  .attendee-rows__row {
    align-items: start;
    gap: var(--space-2xs);
    grid-template-columns: minmax(0, 1fr);
  }

  .attendee-rows__row + .attendee-rows__row {
    border-block-start: var(--border-width) solid var(--color-subtle);
    padding-block-start: var(--space-s);
  }
}