/* Scope Compass — stylesheet voor de procesvoorstel-wizard (fase 1c: Vertellen, Verduidelijken).
   Laadt ná src/styles.css en leunt op de tokens daaruit. Visuele richting (mockup 12-09): lichte
   UI, navy tekst, terughoudend indigo (alleen de primaire actie en de actieve fase), veel
   witruimte, weinig losse kaarten; groen alleen voor bevestiging, en status altijd ook in tekst.
   Mobiele regels onderaan in één @media-blok (max-width 640px), zoals de rest van de app. */

.pv .pv-wrap { max-width: 860px; margin: 0 auto; padding: 8px 0 48px; }

/* fasen: drie stappen als rustige kruimel, geen voortgangsbalk */
.pv-fasen { display: flex; gap: 18px; list-style: none; margin: 0 0 22px; padding: 0; font-size: 12.5px; color: var(--text-3); }
.pv-fase { display: inline-flex; align-items: center; gap: 7px; }
.pv-fase-nr { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-3); font-size: 11.5px; font-weight: 600; color: var(--text-3); background: var(--surface); }
.pv-fase.on { color: var(--text); font-weight: 600; }
.pv-fase.on .pv-fase-nr { border-color: var(--pri); background: var(--pri); color: #fff; }
.pv-fase.done { color: var(--text-2); }
.pv-fase.done .pv-fase-nr { border-color: var(--green-strong); color: var(--green-strong); background: var(--green-soft); }
.pv-fase.done .pv-fase-nr .ic { font-size: 12px; color: var(--green-strong); }

.pv-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pv-h { font-size: 24px; line-height: 1.2; margin: 0 0 6px; color: var(--text); letter-spacing: -0.01em; }
.pv-h3 { font-size: 17px; margin: 0 0 8px; }
.pv-lead { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 66ch; }
.pv-later { white-space: nowrap; flex: none; }

/* Vertellen: één veld dat de aandacht krijgt */
.pv-veld-label { font-size: 13px; color: var(--text-2); font-weight: 500; margin-bottom: 6px; display: block; }
.pv-tekst { width: 100%; font-size: 15.5px; line-height: 1.6; padding: 14px 16px; min-height: 200px; border-radius: var(--r-lg); }
.pv-tekst:focus { box-shadow: 0 0 0 3px var(--ring); border-color: var(--pri); }
.pv-hulp { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.pv-plak, .pv-opname { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface-2); }
.pv-plak .input, .pv-plak .textarea { width: 100%; }
.pv-acties-klein { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pv-opname p.muted { font-size: 13px; line-height: 1.55; margin: 8px 0; }
.pv-opname-kop { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.pv-opname-tijd { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.pv-opname.aan { border-color: var(--red-strong); }
.pv-opname-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--red-strong); flex-shrink: 0; animation: pv-puls 1.4s ease-in-out infinite; }
@keyframes pv-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* bronnen: compacte rijen onder het veld, te bekijken en te verwijderen */
.pv-bronnen { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.pv-bron + .pv-bron { border-top: 1px solid var(--border); }
.pv-bron-rij { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; font-size: 13.5px; min-height: 44px; }
.pv-bron-rij > .ic { color: var(--text-3); flex: none; }
.pv-bron-titel { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.pv-bron-meta { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; }
.pv-bron-passage { padding: 0 14px 12px 38px; font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; max-height: 260px; overflow: auto; }
.pv-context { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.pv-context .ic { flex: none; margin-top: 1px; }

.pv-acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.pv-primair { padding: 10px 18px; font-size: 14.5px; }
.pv-voetnoot { font-size: 12.5px; margin-top: 16px; }
.pv-hervat { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.pv-hervat-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.pv-hervat-rij { display: flex; align-items: center; gap: 8px; padding: 10px 4px; text-decoration: none; color: inherit; min-height: 44px; }
.pv-hervat-rij:hover { color: var(--pri-text); }

.pv-fout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-top: 14px; border: 1px solid var(--red); background: var(--red-soft);
  color: var(--red-strong); border-radius: var(--r-lg); font-size: 13.5px; line-height: 1.5; }
.pv-fout > .ic { flex: none; margin-top: 2px; }
.pv-fout-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pv-fout-acties .btn { color: var(--text); }

/* Componeren: één rustig paneel met een eerlijke tijdsduiding */
.pv-paneel { padding: 18px 20px; }
.pv-wacht { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.pv-wacht > .ic { font-size: 20px; color: var(--text-3); flex: none; margin-top: 2px; }
.pv-wacht .iw-dots { margin-top: 8px; flex: none; }
.pv-wacht-kop { font-weight: 600; margin-bottom: 2px; }
.pv-plakroute { margin-top: 14px; }

/* Verduidelijken: de vraag links, de afbakening rechts */
.pv-twee { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pv-vraag-tel { font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-vraag-tekst { font-size: 19px; line-height: 1.35; margin: 0 0 10px; color: var(--text); }
.pv-vraag-stap, .pv-vraag-waarom { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 8px; display: flex; gap: 6px; align-items: flex-start; }
.pv-vraag-stap .ic { flex: none; margin-top: 2px; color: var(--text-3); }
.pv-waarom-lab { font-weight: 600; color: var(--text-3); white-space: nowrap; }
.pv-opties { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; }
.pv-optie { text-align: left; font: inherit; font-size: 14px; line-height: 1.45; padding: 11px 14px; min-height: 44px; border-radius: var(--r-lg);
  border: 1.5px solid var(--border-2); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.pv-optie:hover { border-color: var(--border-3); background: var(--surface-2); }
.pv-optie.gekozen { border-color: var(--pri); background: var(--pri-soft); color: var(--pri-text); font-weight: 500; }
.pv-vraag .textarea { width: 100%; }
.pv-vraag-eis { font-size: 12.5px; margin: 8px 0 0; }
.pv-afronding p { line-height: 1.6; margin: 0 0 8px; }

.pv-afb { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.pv-afb-kop { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: none; border: 0; border-radius: var(--r-lg); cursor: default; text-align: left; }
.pv-afb-chevron { display: none; margin-left: auto; }
.pv-afb-body { padding: 0 14px 14px; }
.pv-afb-body .label { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.pv-afb-veld { width: 100%; font-size: 13.5px; }
.pv-afb-sm { font-size: 12.5px; margin: 8px 0 0; }

/* Mobiel: één kolom, acties onderaan binnen handbereik, de afbakening inklapbaar */
@media (max-width: 640px) {
  .pv .pv-wrap { padding: 4px 0 96px; }
  .pv-fasen { gap: 12px; }
  .pv-h { font-size: 21px; }
  .pv-lead { font-size: 14px; }
  .pv-kop { flex-direction: column; }
  .pv-tekst { min-height: 180px; font-size: 16px; }
  .pv-acties .btn { min-height: 46px; flex: 1 1 auto; justify-content: center; }
  .pv-twee { grid-template-columns: minmax(0, 1fr); }
  .pv-vraag-tekst { font-size: 18px; }
  .pv-vraag-waarom { flex-direction: column; gap: 2px; }
  .pv-afb-kop { cursor: pointer; }
  .pv-afb-chevron { display: inline-block; transition: transform .15s; }
  .pv-afb.open .pv-afb-chevron { transform: rotate(180deg); }
  .pv-afb-body { display: none; }
  .pv-afb.open .pv-afb-body { display: block; }
}