/* Load.Live 1.7.0-s10 — een plek invullen: Crew vragen (M15), vragen opvolgen, de kaart van de ontvanger (M16) en de pagina
 * achter de persoonlijke link (/v/<token>). Kleuren uit ll.css: --ok = vrij, --let = in optie, --tally = bezet. */

/* ---------- M15: opstellen ---------- */
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; align-items: start; }
@media (max-width: 860px) { .pv-grid { grid-template-columns: 1fr; } }
.pv-zij { border-left: 1px solid var(--lijn); padding-left: 16px; }
@media (max-width: 860px) { .pv-zij { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); padding-top: 12px; } }
.pv-dagkeuze { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-dagknop { display: flex; gap: 8px; align-items: center; border: 1px solid var(--lijn-sterk); border-radius: var(--r, 12px); padding: 8px 12px; cursor: pointer; }
.pv-dagknop span { display: grid; }
.pv-dagknop.uit { opacity: .5; cursor: default; }
.pv-dagknop:has(input:checked) { border-color: var(--accent); background: var(--rack-2); }
.pv-wie td, .pv-wie th { padding: 8px 10px; }
.pv-wie tr.gekozen td { background: var(--rack-2); }
.pv-wie select { font: inherit; font-size: 13px; max-width: 14em; }
.pv-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rack-2); font-size: 12px; font-weight: 600; margin-right: 6px; }
.pv-chip { display: inline-block; border-radius: var(--r-pil, 999px); padding: 1px 8px; font-size: 12px; border: 1px solid var(--lijn-sterk); white-space: nowrap; }
.pv-chip.pv-conflict-vrij { color: var(--ok); background: var(--ok-zacht); border-color: transparent; }
.pv-chip.pv-conflict-optie { color: var(--let); background: var(--let-zacht); border-color: transparent; }
.pv-chip.pv-conflict-bezet, .pv-chip.pv-conflict-afwezig { color: var(--tally-tekst, var(--tally)); background: var(--tally-zacht); border-color: transparent; }

/* ---------- opvolgen ---------- */
.pv-vraag { border: 1px solid var(--lijn); border-radius: var(--r-kaart, 16px); padding: 12px 14px; margin-bottom: 14px; background: var(--rack); }
.pv-vraagkop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.pv-vraagkop h3 { margin: 2px 0; font-size: 16px; }
.pv-vraagkop .acties { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-tel { border-top: 1px solid var(--lijn); margin-top: 10px; padding-top: 10px; display: grid; gap: 8px; }
.pv-tel .pv-dagen { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------- M16: de kaart van de ontvanger ---------- */
.pv-sectie, .pv-lijst { display: grid; gap: 12px; margin: 0 0 18px; }
.pv-kaart { border: 2px solid var(--accent); border-radius: var(--r-kaart, 16px); padding: 14px 16px; background: var(--rack); display: grid; gap: 6px; max-width: 640px; }
.pv-kaart.beslist { border-color: var(--lijn-sterk); opacity: .85; }
.pv-kaart h3 { margin: 0; font-size: 18px; }
.pv-kaart .pv-dagen { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pv-agenda ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pv-agenda li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pv-keuze { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 4px 0; }
.pv-keuze legend { font-size: 13px; color: var(--zacht); margin-bottom: 4px; }
.pv-toch { border-left: 3px solid var(--let); padding-left: 10px; }
.pv-kaart .knoppenrij, .pv-vak .knoppenrij { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- de pagina achter de link (/v/<token>) ---------- */
.pv-vak { max-width: 520px; }
.pv-vak .pv-dag { border: 1px solid var(--lijn); border-radius: var(--r, 12px); padding: 8px 12px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.pv-vak .pv-dag legend { font-weight: 600; padding: 0 4px; }
.pv-vak .pv-let { font-weight: 400; font-size: 12px; color: var(--let); margin-left: 6px; }
.pv-vak .pv-dagen { padding-left: 18px; }
.pv-vak .bericht, .pv-kaart .bericht { font-style: italic; color: var(--zacht); }