/* =========================================================================
   27 Moments Portaal - stijlen van mod-personen
   Geladen door sites/index.html. Alleen --m27-* tokens gebruiken.

   De twee personen achter een portaal, in de kaart "Wie hoort er bij dit
   portaal?" van de module Instellingen. Eén rij per persoon: een bolletje
   met de initialen, de naam met zijn stand ernaast, en de acties rechts.
   Geen kaart per persoon: met hoogstens twee mensen zou dat een half scherm
   kosten voor twee namen.

   Dezelfde bolletjes komen terug op de chips van de checklist. Die stijlen
   staan in css/mod-checklist.css, want daar horen ze bij het scherm dat ze
   toont; wat hier staat gaat alleen over deze kaart.
   ========================================================================= */

.pers-rij {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #efece6;
}
.pers-rij:first-child { padding-top: 4px; }

/* Het bolletje met de initialen. Rond, want het staat voor een mens en niet
   voor een vakje. */
.pers-bol {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--m27-lila);
  color: var(--m27-tekst);
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.pers-tekst { min-width: 0; flex: 1 1 160px; }
.pers-naam { display: block; line-height: 1.35; }
.pers-merk { margin-left: 4px; vertical-align: 2px; }
.pers-mail {
  display: block;
  font-size: 12.5px;
  color: #75706a;
  margin-top: 2px;
  word-break: break-word;
}
.pers-stand {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a6d2f;
  margin-top: 4px;
}

.pers-acties {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

/* De uitnodigingslink, alleen zichtbaar als de mail niet vertrok. */
.pers-link {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--m27-lila);
  border-radius: 14px;
  background: var(--m27-creme);
}
.pers-linkrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pers-linkrij input {
  flex: 1 1 200px;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1.5px solid #dad5cd;
  border-radius: 12px;
  background: #fff;
  color: var(--m27-tekst);
}
.pers-linkrij input:focus-visible { outline: 3px solid var(--m27-lila); outline-offset: 2px; }
/* De knop naast het invoerveld mag niet meekrimpen met de rij. */
.pers-linkrij .m27-btn { flex: none; }

.pers-formulier { margin-top: 14px; }
.pers-voet { margin: 12px 0 0; }

@media (max-width: 768px) {
  /* Op een telefoon zakken de acties netjes onder de naam in plaats van de
     naam tot twee letters per regel te knijpen. */
  .pers-rij { flex-wrap: wrap; }
  .pers-acties { margin-left: 50px; width: 100%; justify-content: flex-start; }
}