/* Blad 02: personen in het dossier en de keuzes op de uitnodigingspagina. */

.people { margin: 0; padding: 0; list-style: none; border-top: var(--hair) solid var(--ink); }
.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: var(--hair) solid var(--line);
}
.person > .status { padding-top: 0.2rem; }
.person__name { font-weight: 500; }
.person__meta, .person__detail { color: var(--muted); font-size: var(--step--1); }
.person__detail { grid-column: 1 / -1; max-width: 34rem; overflow-wrap: anywhere; }
.person__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.person__actions:empty { display: none; }
.person__actions .btn { min-height: 2.75rem; padding-inline: var(--s-4); font-size: var(--step--1); }

.person__confirm { width: 100%; font-size: var(--step--1); }
.person__confirm summary {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink-2);
  list-style: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-strong);
}
.person__confirm summary::-webkit-details-marker { display: none; }
.person__confirm[open] { display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); border-left: 3px solid var(--bad); background: var(--sheet); }
.person__confirm p { max-width: 34rem; color: var(--ink-2); }
.person__confirm form { display: block; }

.add-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  margin-bottom: var(--s-3);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}
.add-more > summary::-webkit-details-marker { display: none; }
.add-more > summary .i { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.add-more[open] > summary .i { transform: rotate(45deg); }

.invite-alt { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.invite-alt > li { display: grid; gap: var(--s-2); justify-items: start; }