/* Scope Compass — stylesheet voor spoor DV (demovideo's en de procespagina).
   Skelet uit P1. Laadt ná src/styles.css, zodat de tokens daaruit beschikbaar zijn en dit
   bestand ze kan overrulen. */

/* ---- DV2: de proceskop wrapt de titel in plaats van hem af te kappen ---------------------
   De titel in .pd-ident-top was een <input>: die kan niet wrappen en knipt zijn waarde stil af
   zodra de knoppengroep rechts (Discovery/Implementatie, Controleer op open punten, AI-acties)
   breed wordt. Hij is nu een textarea met class autogrow (process.js), dus een lange naam loopt
   door op een tweede regel. De flex-basis (260px, onder 1100px een eigen regel, onder 640px de
   volle breedte) komt nog uit styles.css via .inline-h1; hier staat alleen wat een textarea
   anders maakt dan een input. */
.pd-ident-top .pd-titel {
  min-width: 0; display: block;
  resize: none; overflow: hidden;         /* de hoogte volgt de inhoud (autogrow), nooit een schuifbalk */
  line-height: 1.25;                      /* kopregel, niet de 1.55 van een lopende tekst */
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
/* De spacer tussen de statuschip en de knoppen groeide mee (flex: 1) en kreeg zo de helft van
   de vrije ruimte die de titel nodig had. In de titelrij is de titel de enige groeier; de
   knoppen blijven rechts staan omdat de titel alles ervoor opvult. */
.pd-ident-top .pd-spacer { flex: 0 0 0; }

/* ---- DV4: de verbeteringen-tab leest als een voorstel dat je beoordeelt --------------------
   De kaart uit ontwerp 5a was een formulier (statuskeuzelijst, twee open tekstvakken). Nu staat
   er in vaste volgorde: herkomst (bronbadge), inhoud (titel, toelichting, chips) en besluit
   (Accepteren / Afwijzen / Later). De bewerkstand (.is-bewerk) hergebruikt de tekstvakken van
   5a uit styles.css; hier staat alleen wat nieuw is. Onder 640px rendert procesmobiel.js het
   besluitblok in de lade (5b) — daar gelden de 44px-doelen. */
.imp5-bron {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.imp5-bron.is-mens { background: var(--slate-soft); color: var(--slate-text); }
span.imp5-bron.is-ai { background: var(--violet-soft); color: var(--violet-text); }
.imp5-bron .ic { font-size: 13px; }
button.imp5-bron { border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; }   /* de reviewbadge (.imp-ai-ok) als pil */
.imp5-status { white-space: nowrap; }
/* Titel en toelichting in rust: gewone tekst die wikkelt (nooit afkappen). */
.imp5-titel-tekst { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; }
.imp5-titel-tekst.is-leeg { color: var(--text-faint); font-weight: 500; }
.imp5-oms-tekst { font-size: 12.5px; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.imp5-oms-tekst.is-geknipt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
button.imp5-oms-tekst.is-leeg {
  border: 1px dashed var(--border-2); background: transparent; color: var(--text-3); text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 12.5px; width: 100%;
}
button.imp5-oms-tekst.is-leeg:hover { background: var(--sunken); }
.imp5-meer { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--pri-text); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; min-height: 24px; }
.imp5-meer:hover { text-decoration: underline; }
.imp5-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Richting, omvang, fase en MVP zijn KNOPPEN die doorschakelen naar de volgende waarde uit de
   keuzelijst (11-09) - ze zagen er al uit als een tag, dus ze blijven er precies zo uitzien; de
   cursor en de lichte hover verraden dat er iets gebeurt. Een nog niet gekozen waarde staat als
   gestippelde omtrek: zichtbaar aanklikbaar, maar het leest niet als een ingevulde keuze. */
.imp5-pil { border: none; font: inherit; cursor: pointer; min-height: 26px; touch-action: manipulation; }
.imp5-pil:hover { filter: brightness(.96); }
.imp5-pil.is-leeg-pil { background: transparent; color: var(--text-3); border: 1px dashed var(--border-3); padding: 2px 8px; }
.imp5-pil.is-leeg-pil:hover { filter: none; background: var(--sunken); }
span.is-leeg-pil { background: transparent; color: var(--text-3); border: 1px dashed var(--border-3); padding: 2px 8px; }
/* Het besluit: knoppenrij bij een open voorstel. */
.imp5-acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 2px; }
.imp5-acties .btn { touch-action: manipulation; }
.imp5-afwijs-knop { color: var(--red-strong); }
.imp5-afwijs-knop:hover { background: var(--red-soft); border-color: var(--red-soft); }
.imp5-afwijs-knop .ic { color: var(--red-strong); }
/* Redenformulier: schuift in de kaart, op dezelfde plek als de knoppenrij. */
.imp5-afwijs { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--red-soft); }
.imp5-afwijs .label { color: var(--red-strong); }
.imp5-afwijs-reden { min-height: 56px; }
.imp5-afwijs-knoppen { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Rustige stand: het besluit is gevallen. Een tint op de rand, één regel, en alleen Terugdraaien. */
.imp5-besluit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; }
.imp5-besluit.is-geaccepteerd { background: var(--green-soft); color: var(--green-strong); }
.imp5-besluit.is-afgewezen { background: var(--sunken); color: var(--text-2); }
.imp5-besluit-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.imp5-besluit-kop { font-weight: 600; }
.imp5-besluit-reden { white-space: pre-wrap; overflow-wrap: anywhere; }
.imp5-terug { flex: none; }
.imp5.is-geaccepteerd { border-color: color-mix(in srgb, var(--green-strong) 35%, var(--border)); }
.imp5.is-afgewezen { border-style: dashed; }
.imp5.is-afgewezen .imp5-titel-tekst, .imp5.is-afgewezen .imp5-oms-tekst { color: var(--text-3); }
/* Bewerkstand: de tekstvakken van 5a plus de volledige statuskeuzelijst en een Klaar-knop. */
.imp5-bewerk-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.imp5-bewerk-status { display: inline-flex; align-items: center; gap: 8px; }
.imp5-bewerk-status .label { margin: 0; }
/* De AI-feature-schakelaar is secundair: kleiner en stiller dan het besluit erboven. */
.imp5-voet { padding-top: 8px; }
.imp5-voet-l { font-size: 12px; color: var(--text-3); }
.imp5-voet .toggle { transform: scale(.85); transform-origin: left center; }
.imp5-voet .toggle[disabled] { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  /* In de lade (5b): besluitknoppen op tapmaat, naast elkaar als het past. */
  .pm-verbsheet .imp5-acties .btn, .pm-verbsheet .imp5-afwijs-knoppen .btn, .pm-verbsheet .imp5-terug { min-height: var(--touch); flex: 1 1 auto; justify-content: center; }
  .pm-verbsheet .imp5-acties .btn-ghost { border-color: var(--border); }   /* op een telefoon is een randloze knop onzichtbaar */
  .pm-verbsheet .imp5-besluit { padding: 10px 12px; }
  .pm-verbsheet .imp5-afwijs-reden { font-size: 16px; }   /* onder 16px zoomt iOS in */
  .pm-verb-bron { margin-bottom: 2px; }
}