/* Reden doorgeven (assets/reden.js) en de scoreuitleg op Afnemers. */

.rd-venster {
  margin: auto;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--lijn-2);
  border-radius: var(--r-l);
  background: var(--opp);
  color: var(--tekst);
  box-shadow: var(--schaduw-3);
}
.rd-venster::backdrop { background: rgb(0 0 0 / .45); }
.rd-form { display: grid; gap: var(--sp-3); padding: var(--sp-6); }
.rd-form h3 { margin: 0; }
.rd-label { font-weight: 600; font-size: 13px; margin-top: var(--sp-2); }
.rd-veld { width: 100%; resize: vertical; min-height: 96px; font: inherit; }
.rd-vink { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.rd-vink input { margin-top: 3px; flex: none; }
.rd-vink > span { display: grid; gap: 2px; }
.rd-fout { margin: 0; color: var(--slecht-tekst); font-size: 13px; }
.rd-knoppen { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-2); }
.rd-wis { margin-right: auto; }

.rd-blok {
  display: grid; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--roest);
  border-radius: var(--r-s);
  background: var(--roest-zacht);
}
.rd-blok[data-weg="ja"] { border-left-color: var(--lijn-sterk); background: var(--vlak); }
.rd-blok__kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rd-blok__tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rd-blok .mini { margin: 0; }

/* Terugwinnen: regels die vannacht van de lijst gaan, en de afgeschreven lijst */
.tw-rij[data-weg="ja"] { opacity: .6; }
.tw-afg { display: grid; gap: var(--sp-3); }
.tw-afg__rij {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4);
  align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--lijn);
}
.tw-afg__rij:first-child { border-top: 0; }
.tw-afg__rij h4 { margin: 0 0 2px; }
.tw-afg__rij .rd-blok { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .tw-afg__rij { grid-template-columns: 1fr; }
}

/* Afnemers: de score uit elkaar */
.afn-scoredelen { display: grid; gap: var(--sp-3); }
.afn-scoredeel { display: grid; grid-template-columns: minmax(130px, 200px) 1fr auto; gap: var(--sp-1) var(--sp-3); align-items: center; }
.afn-scoredeel__label { font-weight: 600; font-size: 13px; }
.afn-scoredeel__label .mini { font-weight: 400; display: block; }
.afn-scoredeel__balk { height: 8px; border-radius: 4px; background: var(--vlak); overflow: hidden; }
.afn-scoredeel__balk i { display: block; height: 100%; background: var(--serie-1); border-radius: 4px; }
.afn-scoredeel__cijfer { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5em; text-align: right; }
.afn-scoredeel__uitleg { grid-column: 1 / -1; margin: 0; }
.afn-scoreuitleg { margin-top: var(--sp-2); }
.afn-scoreuitleg summary { cursor: pointer; font-weight: 600; }
.afn-scoreuitleg ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--sp-1); }
.afn-groei-euro { font-variant-numeric: tabular-nums; color: var(--tekst-2); font-size: 13px; white-space: nowrap; }
@media (max-width: 560px) {
  .afn-scoredeel { grid-template-columns: 1fr auto; }
  .afn-scoredeel__balk { grid-column: 1 / -1; grid-row: 2; }
}
.tw-rij__actie { flex-wrap: wrap; }
.tw-rij > .rd-blok { margin-top: var(--sp-3); }
details.paneel > summary { list-style: none; cursor: pointer; }
details.paneel > summary::-webkit-details-marker { display: none; }
details.paneel > summary h3::after { content: " +"; color: var(--tekst-3); }
details.paneel[open] > summary h3::after { content: " \2212"; }
/* Groeikolom: procenten, en bij de muis erop het bedrag in euro's */
.afn-groei { display: inline-grid; justify-items: end; cursor: default; }
.afn-groei > * { grid-area: 1 / 1; transition: opacity .12s; }
.afn-groei .afn-groei-euro { opacity: 0; }
.afn-groei:hover .delta, .afn-groei:focus .delta { opacity: 0; }
.afn-groei:hover .afn-groei-euro, .afn-groei:focus .afn-groei-euro { opacity: 1; }

/* Vraag het aan Bob (assets/vraag.js) */
.vr-keuzes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.vr-keuze {
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--lijn-2); border-radius: 999px; background: var(--opp); color: var(--tekst);
}
.vr-keuze[aria-checked="true"] { border-color: var(--roest); background: var(--roest-zacht); font-weight: 600; }
.vr-hier { margin: 0; }
.vr-eerder summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.vr-eerder ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--sp-1); font-size: 13px; }