/* Vragenlijst en lijst van zaken. Alleen wat de bestaande componenten niet hebben. */

/* Voor wie de antwoorden zijn */
.audience {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  padding: var(--s-1) var(--s-3);
  border: var(--hair) solid var(--line-strong);
  color: var(--ink-2);
  font-size: var(--step--1);
}
.audience .i { width: 1rem; height: 1rem; }
.audience--private { border-color: var(--ink); color: var(--ink); }

/* Herkomst van een antwoord dat de klant nog moet bevestigen */
.source {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: var(--warn);
  font-size: var(--step--1);
  font-weight: 500;
}
.source .i { width: 1rem; height: 1rem; }

/* Vragen: genummerd zoals de posten op een bestek */
.vragen { margin: 0; padding: 0; list-style: none; counter-reset: vraag; border-top: var(--hair) solid var(--ink); }
.vraag { padding: var(--s-5) 0 var(--s-2); counter-increment: vraag; }
.vraag + .vraag { border-top: var(--hair) solid var(--line); }
.vraag > .choices > legend::before {
  content: counter(vraag, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-1);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.08em;
}
.vraag__foto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: calc(var(--s-3) * -1) 0 var(--s-4); }
.vraag__foto .btn { min-height: 2.75rem; }

@media (min-width: 30rem) {
  .vraag .choices__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lijst van zaken: één groep per onderdeel, nooit een tabel */
.fill { display: grid; justify-items: start; gap: var(--s-2); margin-bottom: var(--s-6); }
.zaken { border-top: var(--hair) solid var(--ink); }
.zaak { padding: var(--s-5) 0 var(--s-1); }
.zaak + .zaak { border-top: var(--hair) solid var(--line); }
.zaak .choices { margin-bottom: var(--s-4); }
.zaak > .choices:first-of-type .choices__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zaak .choice { min-height: 2.75rem; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--step--1); }
.zaak__extra .input { max-width: 11rem; }

@media (min-width: 40rem) {
  .zaak > .choices:first-of-type .choices__options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.meaning { display: grid; gap: var(--s-2); max-width: 34rem; margin-top: var(--s-2); padding-left: var(--s-3); border-left: 2px solid var(--line); }
.meaning > div { display: grid; gap: 0.125rem; }
.meaning dt { color: var(--ink); font-weight: 500; }
.meaning dd { margin: 0; color: var(--ink-2); }