/* css/epic6.css — Epic 6 (rondes 72→80): de gedeelde primitieven
   ──────────────────────────────────────────────────────────────────────
   Laadt ná r71-uniform.css. Dit bestand draagt de HERBRUIKBARE bouwstenen
   die élk Epic-6-scherm gebruikt; de per-scherm-layout komt in de eigen
   ronde-CSS/JS. Alle waarden 1-op-1 uit tokens.css + de designer-frames.

   §BB rol-status-teken · §CC blokkop-teller (dot-regel) · stil toevoeg-label ·
   75c status-popover · R79 dashboard-signaal · R80 gedrag/outcome-kaart. */

/* ══ §BB · het rol-status-teken — 9px, ÁCHTER de naam (soort-dots staan vóór) ══
   Vier standen op de rol-toekenning (persoon × rol × context), nooit op de
   persoon. Nooit vermengen met draagvlak-kleur (§V) of soort-dots. */
.c-rolteken{
  flex:none; display:inline-block; width:9px; height:9px; border-radius:50%;
  box-sizing:border-box; vertical-align:middle; cursor:pointer;
  background:transparent; border:1.5px solid var(--line-ghost); /* af te stemmen = open ring */
}
.c-rolteken[data-stand="beraad"]{           /* in beraad = linkerhelft petrol gevuld */
  border:1.5px solid var(--petrol);
  background:linear-gradient(90deg, var(--petrol) 0 50%, transparent 50% 100%);
}
.c-rolteken[data-stand="bevestigd"]{ background:var(--petrol); border-color:var(--petrol); }
.c-rolteken[data-stand="nietmeer"]{         /* niet meer = doorstreepte ghost-ring */
  border:1.5px solid var(--line-ghost); background:transparent; position:relative;
}
.c-rolteken[data-stand="nietmeer"]::after{
  content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1.5px;
  background:var(--line-ghost); transform:translateX(-50%) rotate(45deg);
}
.c-rolteken:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }
/* "niet meer"-toekenning: rij gedimd, sorteert onderaan (JS zet .is-nietmeer) */
.c-rolrij.is-nietmeer{ opacity:.55; }

/* ══ §CC · blokkop-teller — soort-dots + "n open", rechts in de blok-/kaartkop ══
   Eén dot per SOORT (nooit herhaald per item), vaste FAB-volgorde, max 4;
   meer soorten = alleen de teller. De teller telt items, de dots tonen soorten. */
.c-blokteller{ display:inline-flex; align-items:center; gap:5px; flex:none; }
/* Telt er niets, dan staat er niets · een lege teller in een flex-rij laat
   anders een gat achter waar de lezer iets zoekt. */
.c-blokteller:empty{ display:none; }
.c-blokteller-dots{ display:inline-flex; align-items:center; gap:3px; }
.c-blokteller .soort-dot{ width:8px; height:8px; }
.c-blokteller-n{ font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep); white-space:nowrap; }
/* de uitklap onder een blok = het bestaande HISTORIEK-blok-patroon (koppel-chips),
   géén nieuw scherm; lezen/springen hier, werken op Opvolging. */

/* ══ stil toevoeg-label — grijze uitnodiging die bij focus het veld wórdt ══
   De enige uitzondering op "aanmaken via de FAB": inline-items die de FAB niet
   kan raken (namen, groepen, gedragingen). FAB-soorten blijven via de FAB. */
.c-toevoeg{
  display:block; width:100%; box-sizing:border-box; border:0; background:none;
  padding:6px 0; font:inherit; font-size:11px; color:var(--line-ghost);
  text-align:left; cursor:text;
}
.c-toevoeg:hover{ color:var(--ink-soft); }
.c-toevoeg-veld{
  width:100%; box-sizing:border-box; font:inherit; font-size:13px; color:var(--ink);
  background:var(--wit); border:1px solid var(--petrol); border-radius:8px;
  padding:8px 10px; box-shadow:0 0 0 2px rgba(18,113,108,.16);
}

/* ══ R84 · gedeelde naam-autocomplete — suggestielijst uit het register ══
   Eén component, app-breed (wie stuurt, verankering-eigenaar, impact-rijen):
   kort invoerveld + zwevende suggestielijst met registertreffers en de
   "⊕ nieuwe persoon"-uitgang (hulp, geen sluis). */
.c-naamac{ position:relative; }
/* .c-naamac .c-naamac-inp (0,2,0) wint bewust van de globale input[type=text]-regel
   (0,1,1) — anders zou die de compacte hoogte/lettergrootte overrulen en de
   placeholder verticaal afknijpen. Eén vaste, nette veldhoogte (~32px). */
.c-naamac .c-naamac-inp{
  width:100%; box-sizing:border-box; font-family:var(--font-ui); font-size:12.5px;
  line-height:1.4; color:var(--ink); background:var(--wit); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; height:auto; min-height:0;
}
.c-naamac .c-naamac-inp::placeholder{ color:var(--line-ghost); }
.c-naamac .c-naamac-inp:focus{ outline:none; border-color:var(--petrol); box-shadow:none; }
.c-naamac-lijst{
  position:absolute; left:0; top:calc(100% + 2px); z-index:20; min-width:100%; width:280px; max-width:min(280px, 90vw);
  background:var(--wit); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 22px rgba(10,57,54,.12); overflow:hidden;
}
.c-naamac-optie{
  display:flex; align-items:center; gap:7px; width:100%; box-sizing:border-box;
  border:0; border-bottom:1px solid var(--line-zacht); background:none; text-align:left;
  padding:7px 11px; font:inherit; cursor:pointer;
}
.c-naamac-optie:last-child{ border-bottom:0; }
.c-naamac-optie:hover{ background:var(--vul-koppel); }        /* mint #EAF1F0 */
.c-naamac-naam{ font-size:12px; font-weight:600; color:var(--ink); }
.c-naamac-meta{ font-size:10.5px; color:var(--ink-mist); }
.c-naamac-nieuw{ font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep); }
.c-naamac-nieuw:hover{ background:var(--vul-koppel); }

/* ══ 75c · status-popover — vier statussen + verplichte herkomst ══
   Tik op het teken (72a/75a/map) of via een gesprek (R73). Elke overgang laat
   een spoor (§AA); "niet meer" vraagt de waarom. */
.c-rolpop{ background:var(--cream); border-radius:12px; box-shadow:var(--sch-flyout); padding:14px 16px; width:280px; max-width:calc(100vw - 32px); }
.c-rolpop-kop{ font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.c-rolpop-keuze{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.c-rolpop-optie{ display:flex; align-items:center; gap:9px; padding:7px 8px; border:0; background:none; border-radius:8px; font:inherit; font-size:13px; color:var(--ink); text-align:left; cursor:pointer; width:100%; }
.c-rolpop-optie:hover{ background:var(--cream2); }
.c-rolpop-optie.is-gekozen{ background:var(--vul-petrol); font-weight:var(--gew-vet); }
.c-rolpop-optie[data-stand="nietmeer"]{ color:var(--rood); }
/* in-huis waarom-veld voor 'niet meer' (vervangt de native prompt) */
/* #260 — de negatief-signaal-uitgang: onder de statussen, met een scheidingslijn.
   Een tegenstem is informatie die een handeling uitlokt, geen status. */
.c-rolpop-signaal{ margin-top:4px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.c-rolpop-signaal-kop{ font-size:11.5px; color:var(--ink-soft); margin-bottom:4px; line-height:1.4; }
.c-rolpop-signaal-uit{ border:0; background:none; padding:6px 8px; border-radius:8px; font:inherit; font-size:13px; font-weight:600; color:var(--rood); text-align:left; cursor:pointer; width:100%; }
.c-rolpop-signaal-uit:hover{ background:var(--rood-wash,rgba(192,86,58,.10)); }
.c-rolpop-waarom{ display:flex; gap:8px; align-items:center; margin:2px 0 12px; }
.c-rolpop-waarom-inp{ flex:1; min-width:0; font:inherit; font-size:12.5px; color:var(--ink); background:var(--wit); border:1px solid var(--line); border-radius:var(--r-veld); padding:6px 9px; }
.c-rolpop-waarom .c-knop[data-soort="primair"]{ flex:none; padding:6px 12px; font-size:12.5px; }
.c-rolpop-herkomst{ font-size:11px; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); font-weight:var(--gew-vet); margin-bottom:6px; }

/* ══ R79 · dashboard-signalen — attendering met een sprong, nooit een alarm ══
   Zone bovenaan 33a, alleen zichtbaar als er signalen zijn (leeg = weg). Max 5. */
.c-signalen{ display:flex; flex-direction:column; gap:8px; margin:0 0 20px; }
.c-signalen-kop{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px; }
.c-signalen-kop .eyebrow, .c-signalen-titel{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft); }
.c-signaal{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--vul-amber-zacht); border:1px solid var(--amber-rand);
  border-radius:var(--r-veld); padding:11px 14px;
}
.c-signaal[data-ernst="rood"]{ background:rgba(192,86,58,.08); border-color:rgba(192,86,58,.35); } /* alleen bij dubbel gat */
.c-signaal-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--geel); margin-top:5px; }
.c-signaal[data-ernst="rood"] .c-signaal-dot{ background:var(--rood); }
.c-signaal-tekst{ flex:1; min-width:0; font-size:12.5px; color:var(--ink); line-height:var(--lh-body); }
.c-signaal-sprong{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--petrol-deep); white-space:nowrap; }
/* de ✕ erfde een grotere font-size (stak boven de 12.5px signaal-tekst uit); nu
   gelijk aan de tekst/sprong ernaast. */
.c-signaal-x{ flex:none; border:0; background:none; color:var(--ink-soft); cursor:pointer; padding:0 2px; line-height:1; font-size:12.5px; }
.c-signaal-x:hover{ color:var(--ink); }
/* "neem over in je plan"-switch: default uit; aan = petrol "gekozen"-label */
.c-signaal-neem{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:0; }
.c-signaal-neem.is-gekozen{ font-weight:var(--gew-vet); }
.c-signaal-neem.is-gekozen::before{ content:"\2713 "; }

/* ══ R80 · gedrag/outcome-kaart — een blijvende toestand, geen taak ══
   Geen status-klik of af-vinkje; voortgang lees je aan de gekoppelde
   handelingen (blokkop-teller + koppel-chips; afgerond zakt naar HISTORIEK). */
.c-gedragkaart{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-veld);
  padding:11px 14px; position:relative;
}
.c-gedragkaart.is-selected{ border-color:var(--petrol); box-shadow:0 0 0 1px var(--petrol) inset, 0 8px 22px rgba(10,57,54,.10); }
.c-gedragkaart-top{ display:flex; align-items:flex-start; gap:9px; }
.c-gedragkaart-zin{ flex:1; min-width:0; font-size:13px; color:var(--ink); line-height:var(--lh-kaart); }
/* EIGENAAR-regel per gedrag (rol-toekenning §BB, context = dít gedrag) */
.c-gedrag-eigenaar{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line-zacht); display:flex; align-items:center; gap:8px; }
.c-gedrag-eigenaar-lab{ font-size:11px; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); font-weight:var(--gew-vet); }
.c-gedrag-eigenaar-naam{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
/* vasthouden-blok: stille tekst, géén checklist */
.c-vasthouden{ font-size:12.5px; color:var(--ink-soft); line-height:var(--lh-tekst); }
/* leerlus-attendering (mint, 33a-taal) — nooit rood */
.c-leerlus-att{ background:var(--vul-mint); border:1px solid var(--mint-rand); border-radius:var(--r-veld); padding:11px 14px; font-size:12.5px; color:var(--ink); line-height:var(--lh-body); }
.c-leerlus-att .c-signaal-sprong{ margin-left:6px; }

/* ══ R84 · de stuurgroep (wie stuurt) — platte rijen ín één werk-kaart (84a) ══
   Personen zijn rijen ín één #FAF8F5-kaart, gescheiden door dunne lijnen — geen
   losse witte kaartjes (die verdrievoudigen de hoogte). De Fraunces-kaartkop
   vervalt: de helperzin is de eerste regel ín de kaart. Een geselecteerde rij
   wordt een witte uitklap-kaart die licht uitsteekt (schaduw), met de volle
   uitklap (status + herkomst + HISTORIEK), nooit alleen het kale status-woord. */
/* R84-kleuren: de stuurgroep is één werk-kaart, en dat is de omhullende .kaart
   (nu #FAF8F5). De .c-stuurgroep zelf is dus een transparante container — geen
   kaart-in-kaart — zodat de lensregel als laatste rij ín die ene crème kaart valt. */
.c-stuurgroep{ background:transparent; border:0; padding:0; box-sizing:border-box; }
/* §5 — de blokkop: overline "DE STUURGROEP" + teller op één regel, de intro eronder. */
.c-stuurgroep-kop{ display:flex; flex-direction:column; gap:4px; padding-bottom:6px; }
.c-stuurgroep-blokkop{ display:flex; align-items:center; gap:10px; }
/* de blokkop is óók de FAB-drager (c-kernblok-kop): behoud de 72a-metriek — geen
   top-marge/indent van het generieke kern-patroon; alleen de selectie-affordance. */
.c-stuurgroep-blokkop.c-kernblok-kop{ margin:0; padding:2px 0; width:100%; border-radius:6px; }
.c-stuurgroep-blokkop.c-kernblok-kop.is-fab-selected{ padding:2px 6px; margin:0 -6px; width:calc(100% + 12px); }
.c-stuurgroep-overline{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8A867E; }
.c-stuurgroep-blokteller{ margin-left:auto; flex:none; }
.c-stuurgroep-intro{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin:0; }

/* §6 — de stand-chip op een bevestigde rij: petrol koppel-chip, EAF1F0-pil. */
.c-stuurrij-standchip{ flex:none; border:0; cursor:pointer; font:inherit; font-size:11px; font-weight:600;
  color:var(--petrol-deep); background:#EAF1F0; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.c-stuurrij-standchip:hover{ background:#DCE9E7; }

/* ══ R74/75 · de kern-stappen: overline-blokkoppen + per-lid leesweergave ══ */
.c-kernblok-kop{ display:flex; align-items:center; gap:10px; margin:16px 0 6px; width:100%; text-align:left; border:0; background:none; cursor:pointer; font:inherit; padding:4px 6px; border-radius:6px; }
.c-kernblok-kop.is-fab-selected{ outline:1.5px solid var(--petrol); outline-offset:0; background:var(--vul-mint,rgba(127,196,190,.12)); }
.c-kernblok-kop:hover .c-kernblok-overline{ color:var(--petrol-deep); }
.c-kernblok-overline{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8A867E; }
.c-kernblok-teller{ margin-left:auto; flex:none; }
/* korte, grijze veldlabels i.p.v. vette vraagzinnen (§3) */
.c-kernstap .uitkomst-veld > label{ font-size:11px; font-weight:400; color:#8A867E; text-transform:none; letter-spacing:0; }
/* de helper ín het per-lid-blok (§7) */
/* helper onder de overline: 11px grijs, eigen regel (nooit naast de kop). */
.c-perlid-helper{ display:block; border:0; background:none; padding:0; margin:0 0 8px; cursor:pointer; font:inherit; font-size:11px; color:#8A867E; text-align:left; }
.c-perlid-helper:hover{ color:var(--petrol-deep); }
/* per-lid rij: leesweergave-naamregel + veld, met scheidingslijn (§4) */
.c-perlid{ border-bottom:1px solid #EFEBE3; padding:9px 0; }
.c-perlid:last-child{ border-bottom:0; padding-bottom:2px; }
/* naamregel = één flexrij (geen kolommen): naam 600 · status-teken · rol grijs ·
   rechts de teller. Naam wrapt niet; de rol krimpt met ellipsis als het krap wordt. */
.c-perlid-kop{ display:flex; align-items:center; flex-wrap:nowrap; gap:8px; width:100%; text-align:left; background:none; border:0; font:inherit; padding:2px 0; cursor:pointer; border-radius:8px; }
.c-perlid-kop .c-rolteken{ flex:none; }
/* selectie = ÉÉN zone rond de hele lid-eenheid (naamregel + veld), niet een los
   kadertje om alleen de kop. De kop zelf krijgt dus géén eigen box meer. */
.c-perlid-kop.is-fab-selected{ box-shadow:none; background:none; padding:2px 0; margin:0; }
.c-perlid:has(.c-perlid-kop.is-fab-selected){ box-shadow:0 0 0 1.5px var(--petrol); border-radius:10px; border-bottom-color:transparent; background:rgba(18,113,108,.04); padding:9px 10px; margin:0 -10px; }
.c-perlid-naam{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; flex:none; }
.c-perlid-rol{ font-size:11px; color:var(--ink-mist); flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-perlid-rechts{ margin-left:auto; flex:none; display:flex; align-items:center; gap:6px; }
/* 74a — "· gesprek {datum}" naast de open-teller (zelfde petrol-deep als "n open"). */
.c-perlid-gesprekdat{ font-size:11px; color:var(--petrol-deep); white-space:nowrap; }
/* dicht = één tekstregel (de ingevulde betekenis, of grijs indien leeg). */
.c-perlid-body{ margin-top:4px; }
.c-perlid-tekst{ font-size:12.5px; color:var(--ink); line-height:1.45; }
.c-perlid-tekst.is-leeg{ color:#B9B4AA; }
.c-perlid textarea{ margin-top:6px; }
/* stap 2/3 (74a) — geen dubbele selectierand: de lid-zone (.c-perlid) draagt de
   petrol-ring; het tekstveld erin krijgt dan GEEN eigen kader/focus-ring meer. */
.c-perlid:has(.c-perlid-kop.is-fab-selected) textarea,
.c-perlid:has(.c-perlid-kop.is-fab-selected) textarea:focus{ border-color:transparent; box-shadow:none; outline:none; }
/* §5 — het statement in Fraunces + de noorden-belofte en de meetbaar-brug */
.c-statementveld{ font-family:var(--font-kop,'Fraunces',serif); font-size:15px; color:#0A3936; line-height:1.4; }
.c-statement-voet{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.c-statement-noord{ flex:1; font-size:11px; color:#8A867E; line-height:1.45; }
.c-statement-meetbaar{ flex:none; border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:11.5px; font-weight:600; color:var(--petrol-deep); white-space:nowrap; }
.c-statement-meetbaar:hover{ text-decoration:underline; }

/* §7 — de register-belofte (primair) + de enter-hint (stiller, tweede regel). */
.c-stuurrij-regels{ margin-top:6px; }
.c-stuurrij-registerregel{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
.c-stuurrij-regels .c-stuurrij-help{ display:block; margin-top:2px; font-size:10.5px; color:var(--ink-mist); }

/* §4 — de rol als read-only meta-chip bij vaste rollen (in de bewerk-popup). */
.c-stuurpop-rolchip{ display:inline-block; font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--vul-zacht,#F1EDE5); border:1px solid var(--line-sterk); border-radius:999px; padding:4px 11px; }
.c-stuurpop-body .c-stuurpop-inp{ margin-bottom:2px; }
.c-stuurlijst{ display:flex; flex-direction:column; }

/* platte rij (rust): naam · status-teken · meta op één regel */
.c-stuurrij{ padding:9px 0; border-bottom:1px solid var(--line-zacht); box-sizing:border-box; }
.c-stuurlijst > .c-stuurrij:last-child{ border-bottom:0; }
.c-stuurrij.is-nietmeer{ opacity:.6; }
.c-stuurrij-hoofd{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.c-stuurrij-naam{ font-family:'Figtree',var(--font-ui,inherit); font-size:12.5px; font-weight:600; color:var(--ink); }
.c-stuurrij-meta{ font-size:11px; color:var(--ink-mist); }
/* 72a — "waarom ↗" naast een niet-meer-rij: petrol-deep link, geen knop-uiterlijk. */
.c-stuurrij-waaromlink{ border:0; background:none; padding:0 0 0 2px; cursor:pointer; font:inherit; font-size:11px; color:var(--petrol-deep); white-space:nowrap; }
.c-stuurrij-waaromlink:hover{ text-decoration:underline; }
.c-stuurrij-rechts{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.c-stuurrij-meer{ border:0; background:none; color:var(--ink-mist); font-size:13px; letter-spacing:2px; line-height:1; cursor:pointer; padding:0 2px; border-radius:6px; }
.c-stuurrij-meer:hover{ color:var(--ink); }
/* het inline 200px-naamveld (zoals het change-manager-veld) — geen kaart-kader */
.c-stuurrij-veld{ flex:none; width:200px; }
.c-stuurrij-help{ font-size:11px; color:var(--ink-mist); }

/* geselecteerde rij = witte uitklap-kaart, licht uitstekend (84a) */
.c-stuurrij.is-fab-selected{
  background:var(--wit); border:1.5px solid var(--petrol); border-radius:var(--r-veld);
  padding:9px 12px; margin:6px -4px; box-shadow:0 8px 22px rgba(10,57,54,.10);
}

.c-stuurrij-uit{ border-top:1px solid var(--line-zacht); margin-top:8px; padding-top:8px; }
.c-stuurrij-standregel{ font-size:11px; color:var(--ink-mist); line-height:var(--lh-body); }
.c-stuurrij-standwoord{ font-weight:var(--gew-vet); color:var(--petrol-deep); }
.c-stuurrij-herkomst{ color:var(--ink-mist); }
.c-stuurrij-waarom{ font-size:11px; color:var(--rood); margin-top:6px; }
.c-stuurrij-daden{ margin-top:8px; }
.c-stuurrij-hist{ border-top:1px solid var(--line-zacht); margin-top:8px; padding-top:7px; display:flex; align-items:baseline; gap:8px; }
.c-stuurrij-hist-lab{ flex:none; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mist); font-weight:700; }
.c-stuurrij-hist-r{ font-size:11px; color:var(--ink-mist); line-height:var(--lh-tekst); }

.c-stuurgroep-lens{ margin-top:14px; }
.c-stuurgroep-lens-sam{ font-size:12px; color:var(--petrol-deep); cursor:pointer; list-style:none; }
.c-stuurgroep-lens-sam::before{ content:"▸ "; }
.c-stuurgroep-lens[open] .c-stuurgroep-lens-sam::before{ content:"▾ "; }
.c-stuurgroep-lens-in{ font-size:12px; color:var(--ink-soft); line-height:var(--lh-body); margin-top:6px; }

/* ⋯-bewerkpopup (69b-skelet) */
.c-stuurpop{ background:var(--cream); border-radius:14px; box-shadow:var(--sch-flyout); padding:18px 18px 14px; width:340px; max-width:calc(100vw - 32px); }
.c-stuurpop-titel{ font-family:var(--font-kop,inherit); font-size:17px; font-weight:var(--gew-vet); color:var(--ink); margin-bottom:12px; }
.c-stuurpop-lab{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); font-weight:var(--gew-vet); margin:10px 0 4px; }
.c-stuurpop-inp{ width:100%; box-sizing:border-box; font:inherit; font-size:13px; color:var(--ink); background:var(--wit); border:1px solid var(--line-sterk); border-radius:8px; padding:8px 10px; }
.c-stuurpop-rolvast{ font-size:13px; color:var(--ink-soft); padding:6px 0; }
.c-stuurpop-voet{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.c-stuurpop-weg{ border:0; background:none; color:var(--rood); font:inherit; font-size:13px; cursor:pointer; padding:6px 2px; }
.c-stuurpop-ok{ border:0; background:var(--petrol); color:#fff; font:inherit; font-size:13px; font-weight:var(--gew-vet); border-radius:8px; padding:8px 16px; cursor:pointer; }

/* ══ R75 · succescriteria — statement-bron + eigenaar-toekenning ══ */
/* R75 §5 — de statement-band is warm (#F2EEE7); mint (EAF4F2) is voor attenderingen. */
.c-statementbron{ background:#F2EEE7; border:1px solid var(--line); border-radius:var(--r-veld); padding:11px 14px; margin:0 0 16px; }

/* ══ R75 — succescriteria als lees-/bewerkrijen ══ */
.c-criteria-helper{ font-size:11px; color:#8A867E; line-height:1.45; margin:0 0 8px; }
/* 74a-3/3 — elk criterium is een eigen cream-kaart op het canvas (niet meer een
   platte rij met scheidingslijn); geselecteerd = teal rand + schaduw. */
.c-crit{ position:relative; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; cursor:pointer; }
.c-crit.is-fab-selected{ border:1.5px solid var(--petrol); box-shadow:0 8px 22px rgba(10,57,54,.1); background:var(--cream); margin:0 0 10px; padding:12px 14px; }
.c-criteria .c-statementbron{ margin-bottom:12px; }
/* ghost-rij "typ een criterium" (R88), i.p.v. een "+ criterium"-knop. */
.c-crit-ghost{ display:block; width:100%; text-align:left; border:0; background:none; padding:8px 2px; font:inherit; font-size:13px; color:#B9B4AA; cursor:pointer; }
.c-crit-ghost:hover{ color:var(--petrol-deep); }
/* 75a — het criterium als 2-rij-labelgrid. Ingeklapt = leeswaarden (compact),
   uitgeklapt = zelfde posities met bewerkbare velden. Rij 1: DOEL · MEETPUNT ·
   VAN→NAAR; rij 2: EIGENAAR · DRAAGT BIJ AAN (spant kolom 2-3). */
.c-crit-hoek{ position:absolute; top:12px; right:14px; display:flex; align-items:center; gap:8px; z-index:1; }
.c-crit-meer{ border:0; background:none; color:var(--ink-mist); font-size:13px; letter-spacing:2px; line-height:1; cursor:pointer; padding:0 2px; }
.c-crit-meer:hover{ color:var(--ink); }
.c-crit-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px 16px; padding-right:52px; }
.c-crit-cel{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.c-crit-cel > .mx-lab{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.c-crit-cel-ambitie{ grid-column:2 / 4; }
.c-crit.is-edit .c-crit-grid{ gap:12px 16px; }
.c-critw{ font-size:13px; color:var(--ink); line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.c-crit-cel-doel .c-critw{ font-weight:600; }
.c-critw.is-leeg{ color:#B9B4AA; }
.c-critw-eig{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.c-critw-meta{ font-size:11.5px; color:var(--ink-soft); }
/* de meetpunt-pil blijft één regel (naam kort met ellipsis) i.p.v. 2-3 regels hoog;
   geen 34px min-hoogte in dit grid. Alleen binnen het criterium-grid — de chip
   elders blijft ongemoeid. */
.c-crit-grid .mx-koppel{ min-height:0; }
.c-crit-grid .c-koppelchip{ flex-wrap:nowrap; white-space:nowrap; max-width:100%; }
.c-crit-grid .c-koppelchip-naam{ min-width:0; flex:0 1 auto; }
.c-crit-grid .c-koppelchip-sub,
.c-crit-grid .c-koppelchip-pijl{ flex:none; }
@media(max-width:600px){ .c-crit-grid{ grid-template-columns:1fr; padding-right:40px; } .c-crit-cel-ambitie{ grid-column:auto; } }
.c-statementbron-kop{ border:0; background:none; padding:0; cursor:pointer; font-size:var(--t-overline,11px); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--petrol-deep); display:inline-flex; align-items:center; gap:4px; }
.c-statementbron-pijl{ font-size:12px; }
.c-statementbron-q{ margin:6px 0 0; font-family:var(--font-kop,inherit); font-size:15px; line-height:var(--lh-kaart); color:var(--ink); }
.c-statementbron-q.is-leeg{ font-family:inherit; font-size:12.5px; color:var(--ink-mist); font-style:italic; }
/* eigenaar-cel: naamveld + status-teken-regel */
.mx-eigenaar{ display:flex; flex-direction:column; gap:5px; }
.mx-eigenaar-stand{ display:inline-flex; align-items:center; gap:7px; }
.mx-eigenaar-rol{ font-size:11.5px; color:var(--ink-soft); }

/* ══ R76 · stakeholdermap-redesign — groep-stand op de kaart + slepen ══ */
/* readiness-strip: vijf dimensie-dots in de standkleuren; grijs = niet gekend */
.c-map-readiness{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; vertical-align:middle; }
.c-map-rdot{ width:7px; height:7px; border-radius:50%; background:var(--line-ghost); flex:none; }
.c-map-rdot[data-k="groen"]{ background:var(--groen); }
.c-map-rdot[data-k="geel"], .c-map-rdot[data-k="amber"]{ background:var(--geel); }
.c-map-rdot[data-k="rood"]{ background:var(--rood); }
.c-map-rdot[data-k="rest"]{ background:var(--line-ghost); }
/* rol-issue op de gehoord-regel: rood = geen agent (leerlus valt stil), geel = rolgat */
.c-map-rolissue{ font-size:11px; margin-left:6px; }
.c-map-rolissue[data-ernst="rood"]{ color:var(--rood); font-weight:var(--gew-vet); }
.c-map-rolissue[data-ernst="geel"]{ color:var(--geel-tekst); }
.c-map-rij .c-blokteller{ margin-left:6px; }
/* slepen tussen kwadranten (76c) */
.positie-body.is-dropzone{ outline:2px dashed var(--petrol); outline-offset:-3px; border-radius:8px; background:var(--vul-koppel); }
.c-map-rij[draggable="true"]{ cursor:grab; }
.c-map-verwijdervak{ margin-top:12px; padding:14px; text-align:center; font-size:12.5px; color:var(--rood);
  border:1.5px dashed var(--rood); border-radius:var(--r-veld); background:rgba(192,86,58,.05); }
.c-map-verwijdervak.is-actief{ background:rgba(192,86,58,.14); }
/* persoon-as: het rol-status-teken staat áchter de naam in DE MENSEN */
.c-mensen-rij .c-rolteken{ width:8px; height:8px; }

/* ══ R77 · de capaciteit-stippenreeks op de impact&readiness-rij ══ */
.c-ir-serie-capaciteit{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* "één nul = capaciteit nul": vrije aandacht op rood krijgt een zachte rode ring */
.c-ir-cdot.is-nul{ box-shadow:0 0 0 2px rgba(192,86,58,.30); border-radius:50%; }

/* ══ R78 · sponsor & agents activeren — twee blokken, 72a-rij-anatomie ══ */
.c-activatie{ display:flex; flex-direction:column; gap:12px; }
/* R82b OMZET — persoon-eerste dragerlijst, filterbaar op rol/groep, met drie-
   lagen-uitklap (influence/support · verwachting/nodig · outcome). */
.c-act-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.c-act-filterchip{ position:relative; }
.c-act-filterchip-knop{ font:inherit; font-size:11.5px; color:var(--ink-soft); background:var(--wit); border:1px solid var(--line); border-radius:var(--r-pil); padding:3px 10px; cursor:pointer; }
.c-act-filterchip.is-aan .c-act-filterchip-knop{ color:#fff; background:var(--petrol); border-color:var(--petrol); }
.c-act-filtermenu{ position:absolute; top:calc(100% + 4px); left:0; z-index:20; min-width:140px; background:var(--cream); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 22px rgba(10,57,54,.16); padding:4px; display:flex; flex-direction:column; }
/* het menu is dicht in rust: het display:flex hierboven overrulet anders het
   [hidden]-attribuut (gelijke specificiteit, latere regel wint) waardoor de
   filter "auto-uitgeklapt" leek. Openen is een gebruikersactie (klik op de chip). */
.c-act-filtermenu[hidden]{ display:none; }
.c-act-filtermenu-optie{ text-align:left; font:inherit; font-size:12px; color:var(--ink); background:none; border:0; border-radius:6px; padding:6px 10px; cursor:pointer; }
.c-act-filtermenu-optie:hover{ background:var(--cream2); }
/* R84 · twee werk-kaarten (sponsor · agents), elk een #FAF8F5-blok op het canvas.
   De drager is een RIJ ín het blok (72a-anatomie), geen eigen kaartje. */
.c-act-blok{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-veld); padding:14px 16px; box-sizing:border-box; }
.c-act-blok-kop{ display:flex; align-items:center; gap:8px; }
.c-act-blok-overline{ flex:1; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mist); }
.c-act-blok-kop .c-blokteller{ flex:none; }
.c-act-blok-kop .c-act-filters{ flex:none; margin:0; }
.c-act-blok-geen{ font-size:12px; color:var(--ink-soft); margin:8px 0 0; }

.c-act-drager{ }
/* geselecteerde drager = witte uitklap-kaart met teal 1.5px rand + schaduw (72a) */
.c-act-drager.is-fab-selected{ background:var(--wit); border:1.5px solid var(--petrol); border-radius:var(--r-veld); box-shadow:0 8px 22px rgba(10,57,54,.10); margin:6px -6px; padding:0 10px 10px; }
.c-act-rij{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:8px 0; }
.c-act-drager:not(.is-fab-selected) + .c-act-drager .c-act-rij,
.c-act-blok-kop + .c-act-drager .c-act-rij{ padding-top:8px; }
.c-act-drager-naam{ font-family:'Figtree',var(--font-ui,inherit); font-size:12.5px; font-weight:600; color:var(--ink); }
.c-act-meta{ font-size:11px; color:var(--ink-mist); }
.c-act-rij-rechts{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.c-act-meer{ border:0; background:none; color:var(--ink-mist); font-size:13px; letter-spacing:2px; line-height:1; cursor:pointer; padding:0 2px; border-radius:6px; }
.c-act-meer:hover{ color:var(--ink); }
.c-act-groepchip{ font:inherit; font-size:11.5px; color:var(--petrol-deep); background:var(--vul-koppel); border:0; border-radius:var(--r-pil); padding:2px 9px; cursor:pointer; }
/* laatste teken van leven (data, metaregel): RAG-stip + "gaf {kleur}" of gesprek·datum */
.c-act-leven{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--ink-mist); }
.c-act-rag{ width:9px; height:9px; border-radius:50%; flex:none; box-sizing:border-box; }
.c-act-rag[data-kleur="rood"]{ background:var(--rood); }
.c-act-rag[data-kleur="geel"]{ background:var(--geel); }
.c-act-rag[data-kleur="groen"]{ background:var(--groen); }

/* het standaard "gekoppeld werk"-blok: koppel-chips onder de rij (border-top) */
.c-koppelrij{ display:flex; flex-wrap:wrap; gap:8px; }
.c-act-daden{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-zacht); }
.c-act-hint{ font-size:12px; color:var(--ink-soft); margin:6px 0 4px; line-height:1.5; }
/* één open daad = de koppel-chip inline in de metaregel (geen border-top-rij) */
.c-act-daad-inline{ margin:0; }
.c-act-toevoeg{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line-zacht); }
.c-act-toevoeg .c-naamac{ max-width:320px; }   /* breed genoeg dat de placeholder past */

/* open-zone binnen de rij: border-top #EFEBE3, compacte velden, direct bewaren */
.c-act-uitklap{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line-zacht); display:flex; flex-direction:column; gap:8px; }
.c-act-veld{ display:flex; flex-direction:column; gap:2px; }
.c-act-veld-label{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mist); }
.c-act-veld-invoer{ font:inherit; font-size:12px; line-height:1.35; color:var(--ink); background:var(--wit); border:1px solid var(--line); border-radius:7px; padding:5px 8px; resize:none; overflow:hidden; min-height:calc(1.35em + 12px); box-sizing:border-box; width:100%; }
.c-act-veld-invoer:focus{ outline:none; border-color:var(--petrol); box-shadow:0 0 0 2px rgba(18,113,108,.16); }

.c-act-mint{ display:flex; align-items:center; gap:8px; background:var(--vul-mint); border:1px solid var(--mint-rand); border-radius:var(--r-veld); padding:10px 12px; font-size:12.5px; color:var(--ink); margin-top:10px; }
.c-act-mint-link{ margin-left:auto; border:0; background:none; color:var(--petrol-deep); font:inherit; font-size:12.5px; font-weight:var(--gew-vet); cursor:pointer; }

/* ══ R73 · het drager-blok in het gespreksformulier ══ */
.c-gesprek-drager{ margin-top:12px; }
.c-gesprek-drager-uit{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line-zacht); }
/* R73 — de zichtbare rol-koppeling (persoon-pad): "met: {naam} · {rol} · {status} ↗" */
.c-gesprek-dragerlink{ display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer; font:inherit;
  font-size:12px; font-weight:600; color:var(--petrol-deep); background:#EAF1F0; border-radius:999px; padding:5px 11px; }
.c-gesprek-dragerlink:hover{ background:#DCE9E7; }
/* R73 — het status-voorstel in mens-taal (persoon-pad) */
.c-gesprek-rolvoorstel-vraag{ font-size:13px; font-weight:600; color:var(--ink); }
.c-gesprek-rolvoorstel-uitleg{ font-size:11.5px; color:var(--ink-soft); line-height:1.45; margin-top:3px; }
/* R73 — de ingeklapte "meer opties"-toggle (generiek pad, geen persoon-oorsprong) */
.c-gesprek-drager-meer{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:12px; color:var(--petrol-deep); }
.c-gesprek-drager-zone[hidden]{ display:none; }
.c-pilrij{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.c-seg-pil{ font:inherit; font-size:12px; font-weight:var(--gew-vet); color:var(--ink-soft);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-pil); padding:6px 14px; cursor:pointer; }
.c-seg-pil.is-aan{ color:#fff; background:var(--petrol); border-color:var(--petrol); }

/* ══ R80 · Verankering — het gedrag dat blijft (outcome + eigenaar-rol) ══ */
.c-verankering{ display:flex; flex-direction:column; gap:22px; }
.c-ver-blokkop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.c-ver-bloktitel{ margin:0; font-size:var(--t-overline,11px); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft); }
.c-ver-bloksub{ font-size:11.5px; color:var(--ink-mist); font-style:italic; }
.c-gedraglijst{ display:flex; flex-direction:column; gap:12px; }
/* gedrag-kaart: de outcome is een blijvende toestand — cream-vlak, geen af-vink */
.c-gedragkaart{ background:var(--cream); border:1.5px solid var(--line); border-radius:var(--r-veld); padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.c-gedragkaart.is-fab-selected{ border-color:var(--petrol); }
.c-gedrag-kop{ display:flex; align-items:flex-start; gap:10px; }
.c-gedrag-zin{ flex:1; min-width:0; font-family:var(--font-kop,inherit); font-size:15px; line-height:var(--lh-kaart,1.45); color:var(--ink); cursor:pointer; }
.c-gedrag-bewerk{ flex:1; min-width:0; font:inherit; font-size:var(--t-veld); color:var(--ink); background:var(--wit); border:1px solid var(--petrol); border-radius:var(--r-veld); padding:5px 9px; }
.c-gedrag-kop-rechts{ display:flex; align-items:center; gap:8px; flex:none; }
.c-gedrag-meer{ border:0; background:none; color:var(--ink-mist); font-size:17px; line-height:1; cursor:pointer; padding:0 2px; }
.c-gedrag-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.c-ver-koppel{ font:inherit; font-size:11.5px; color:var(--petrol-deep); background:var(--vul-koppel); border:0; border-radius:var(--r-pil); padding:3px 10px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.c-ver-koppel[data-kind="criterium"]{ color:var(--ink-soft); background:var(--cream2,var(--cream)); }
.c-ver-koppel-pijl{ font-size:11px; opacity:.8; }
/* EIGENAAR-blok op elke kaart */
.c-ver-eig{ border-top:1px solid var(--line-zacht); padding-top:9px; display:flex; flex-direction:column; gap:6px; }
.c-ver-eig-kop{ font-size:var(--t-overline,11px); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft); }
.c-ver-eig-leeg{ display:flex; align-items:center; gap:8px; }
.c-ver-eig-rij{ display:flex; align-items:flex-start; gap:10px; border-radius:var(--r-veld); }
.c-ver-eig-rij.is-nietmeer{ opacity:.55; }
/* selecteerbare eigenaar-rij (generieke persoon-drager) + FAB-selectie-staat */
.c-ver-eig-rij-kies{ cursor:pointer; margin:0 -6px; padding:4px 6px; }
.c-ver-eig-rij-kies:hover{ background:var(--cream2); }
.c-ver-eig-rij-kies.is-fab-selected{ background:var(--vul-koppel); box-shadow:0 0 0 1px var(--petrol) inset; }
.c-ver-eig-links{ flex:1; min-width:0; }
.c-ver-eig-naamrij{ display:flex; align-items:center; gap:7px; min-width:0; }
.c-ver-eig-naam{ font-family:'Figtree',var(--font-ui,inherit); font-size:12.5px; font-weight:600; color:var(--ink); }
.c-ver-eig-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.c-ver-eig-rechts{ flex:none; }
.c-ver-eig-meer{ border:0; background:none; color:var(--ink-mist); font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }
.c-ver-eig-bij .c-toevoeg{ font-size:11.5px; }
/* HISTORIEK-uitklap — standaard uitklap-vorm: een 10px overline in de open-zone,
   geen los ▶-regeltje. De details-driehoek is onderdrukt; de overline zelf toggelt. */
.c-ver-hist{ font-size:11.5px; margin-top:2px; }
.c-ver-hist-sam{ list-style:none; cursor:pointer; color:var(--ink-soft); font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline,.08em); text-transform:uppercase; padding:2px 0; }
.c-ver-hist-sam::-webkit-details-marker{ display:none; }
.c-ver-hist-sam::marker{ content:''; }
.c-ver-hist[open] .c-ver-hist-sam{ color:var(--ink); }
.c-ver-hist-r{ color:var(--ink-soft); padding:3px 0 0 12px; }
.c-ver-gedrag-toe .c-toevoeg{ font-size:12.5px; }
/* VASTHOUDEN, LICHT — stille principes + leerlus-attendering + company-slot */
.c-ver-vast{ display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line-zacht); padding-top:16px; }
.c-ver-vast-kop{ font-size:var(--t-overline,11px); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft); }
.c-ver-vast-tekst{ margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-soft); }
.c-ver-leerlus{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--vul-mint); border:1px solid var(--mint-rand); border-radius:var(--r-veld); padding:10px 12px; font-size:12.5px; color:var(--ink); }
.c-ver-leerlus-spr{ margin-left:auto; border:0; background:none; color:var(--petrol-deep); font:inherit; font-size:12.5px; font-weight:var(--gew-vet); cursor:pointer; }
.c-ver-company{ margin:0; font-size:11.5px; line-height:1.55; color:var(--ink-mist); }
/* de eigenaar-bewerkpopup (69b-skelet) */
.c-verpop{ background:var(--wit); border-radius:var(--r-kaart,14px); padding:20px; width:min(420px,92vw); box-shadow:var(--schaduw-pop,0 10px 40px rgba(0,0,0,.18)); display:flex; flex-direction:column; gap:8px; }
.c-verpop-titel{ font-family:var(--font-kop,inherit); font-size:16px; color:var(--ink); margin-bottom:2px; }
.c-verpop-naam{ font-weight:600; font-size:14px; color:var(--ink); }
.c-verpop-func{ font-size:12px; color:var(--ink-soft); }
.c-verpop-lab{ font-size:11.5px; color:var(--ink-soft); margin-top:6px; }
.c-verpop-inp{ font:inherit; font-size:13px; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:var(--r-veld); padding:8px 10px; }
.c-verpop-voet{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.c-verpop-weg{ border:0; background:none; color:var(--rood); font:inherit; font-size:12.5px; cursor:pointer; }
.c-verpop-ok{ border:0; background:var(--petrol); color:#fff; font:inherit; font-size:13px; font-weight:600; border-radius:var(--r-pil); padding:8px 18px; cursor:pointer; }

/* het trend-woord in een meetpunt-chip: "daalt"/"stijgt" in standkleur — nooit een
   ↘/↗-pijl (↗ is gereserveerd als sprong-teken). Op koers = groen, weg = statusrood. */
.c-ver-trend{ font-weight:var(--gew-vet); }
.c-ver-trend[data-stand="op"]{ color:#2C8A6B; }
.c-ver-trend[data-stand="onder"]{ color:#C0563A; }

/* voet-spacer die de rood-linkse Verwijder-knop van de terra Bewaar rechts duwt */
.c-soortpop-voetspacer{ flex:1 1 auto; }

/* ── in-huis bevestig-popover (nooit native confirm/prompt) ── */
.c-bevestig-houder{ position:fixed; inset:0; z-index:960; display:flex; align-items:center; justify-content:center; }
/* z-index:3 — de kaart moet BOVEN zijn eigen sluier liggen (.c-sluier = --z-paneel:2);
   stond op 1, waardoor de sluier de knoppen afving en elke klik het venster sloot. */
.c-bevestig{ position:relative; z-index:3; background:var(--cream,#FAF8F5); border:1px solid var(--line,#DDD8CF); border-radius:var(--r-kaart,14px); padding:20px 22px; width:min(380px,90vw); box-shadow:var(--schaduw-pop,0 10px 40px rgba(0,0,0,.18)); display:flex; flex-direction:column; gap:16px; }
/* R90/75d — de tekstregels als één groep met krappe gap; titel Fraunces, primaire
   regel ink, gevolg-regel ghost-grijs. */
.c-bevestig-body{ display:flex; flex-direction:column; gap:6px; }
.c-bevestig-titel{ margin:0; font-family:var(--font-titel,Fraunces),Georgia,serif; font-weight:600; font-size:16px; color:var(--petrol-dark,#0A3936); }
.c-bevestig-tekst{ margin:0; font-size:13.5px; line-height:1.5; color:var(--ink); }
/* met een titel (75d-kaartje) is de primaire regel iets kleiner (12.5px). */
.c-bevestig-titel + .c-bevestig-tekst{ font-size:12.5px; }
.c-bevestig-gevolg{ margin:0; font-size:11.5px; line-height:1.5; color:var(--ink-mist,#8A867E); }
.c-bevestig-veld{ font:inherit; font-size:13px; color:var(--ink); background:var(--wit); border:1px solid var(--line); border-radius:var(--r-veld); padding:8px 10px; }
.c-bevestig-voet{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.c-knop.is-gevaar[data-soort="primair"]{ background:var(--rood,#C0563A); }

/* R85 — selecteerbare impact/readiness-dots op het hoofdscherm (§V: selecteren ≠
   beoordelen). 1e klik selecteert (teal ring); 2e klik opent de kleurkeuze-popover. */
.c-ir-dot-kies{ cursor:pointer; border-radius:50%; }
.c-ir-dot-kies.is-fab-selected{ box-shadow:0 0 0 2px var(--petrol); }
.c-ir-kleurpop{ background:var(--cream,#FAF8F5); border-radius:10px; box-shadow:var(--sch-flyout,0 10px 40px rgba(0,0,0,.18)); padding:6px; display:flex; flex-direction:column; gap:2px; min-width:160px; }
.c-ir-kleurpop-optie{ display:flex; align-items:center; gap:9px; border:0; background:none; padding:6px 9px; border-radius:7px; font:inherit; font-size:12.5px; color:var(--ink); cursor:pointer; text-align:left; width:100%; }
.c-ir-kleurpop-optie:hover{ background:var(--cream2,#F2EEE7); }
.c-ir-kleurpop-optie.is-gekozen{ font-weight:var(--gew-vet); background:var(--vul-petrol,#EAF1F0); }

/* R85 — groep-popup opschoning: leidend groep-teken, mint-attendering op een
   rode/amber zone zonder risico, het OPEN-blok onderaan, en de dot-uitleg-regel. */
.c-ir-groepdot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--petrol); display:inline-block; }
.c-ir-zonder-risico{ margin-top:6px; font-size:11px; color:var(--petrol-deep); background:var(--vul-mint,#EAF3F0); border:1px solid var(--mint-rand,#CDE6DE); border-radius:7px; padding:4px 9px; display:inline-block; }
.c-ir-openblok{ border-top:1px solid var(--line-zacht); padding-top:12px; margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.c-ir-openblok-kop{ display:flex; align-items:center; }
.c-ir-leg-uitleg{ margin-top:6px; color:var(--ink-soft); font-style:italic; }

/* R85 fix #7 — domein-regel: dicht = één regel; open-zone (now→later + notitie)
   pas na klik op de kop. */
.c-ir-regel-kop{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.c-ir-regel-zone{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }

/* ══ R76 — stakeholder map + rechter detailpaneel (frame 76a) ══ */
.c-map-split{ display:flex; gap:16px; align-items:flex-start; }
.c-map-links{ flex:1 1 57%; min-width:0; }
.c-map-paneel{ flex:0 0 43%; max-width:43%; box-sizing:border-box; position:sticky; top:8px;
  /* §11 — ruimte onderaan zodat de context-chip + FAB nooit over de HISTORIEK vallen. */
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:14px 16px 56px; }
/* §9 — DE MENSEN-rij in het paneel is één regel: naam + teken vast, rollen als
   ghost-tekst met ellipsis (het detail "kent het werk, vertrouwd" leest in de uitklap). */
.c-map-paneel .c-mensen-info{ display:flex; align-items:center; gap:6px; min-width:0; }
.c-map-paneel .c-mensen-naam{ flex:none; }
.c-map-paneel .c-mensen-rol{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c-map-paneel-leeg{ font-size:12px; color:var(--ink-mist); padding:24px 8px; text-align:center; line-height:1.5; }
/* 76a dev-export — kop = dot + naam + ⋯ + ✕, geen border/extra ruimte; de
   standregel sluit er direct op aan (design: margin-top 2px). */
.c-map-paneel-kop{ display:flex; align-items:center; gap:8px; padding-bottom:0; border-bottom:0; }
.c-map-paneel .c-gk-standregel{ margin-top:2px; }
/* §9 — DE MENSEN-rij: leestekst links, gesprek/⋯ rechts. */
.c-mensen-rechts{ margin-left:auto; flex:none; display:flex; align-items:center; gap:8px; }
.c-mensen-meer{ border:0; background:none; color:var(--ink-mist); font-size:12px; letter-spacing:2px; line-height:1; cursor:pointer; padding:0 2px; }
.c-mensen-meer:hover{ color:var(--ink); }
/* Historiek-overline in het paneel = grijs #8A867E (niet petrol), 10px 700. */
.c-gk-histrij .c-historiek-kop{ color:#8A867E; font-size:10px; letter-spacing:.07em; }
/* 76a dev-export — álle paneel-overlines zijn grijs #8A867E, 10px 700 (niet petrol). */
.c-map-paneel .gk-deelkop{ color:#8A867E; font-size:10px; letter-spacing:.07em; margin:14px 0 4px; }
.c-map-paneel .gk-deelkop-sub{ font-weight:400; letter-spacing:0; color:#8A867E; }
/* DE MENSEN — tafel-regel "nog niemand … · + kandidaat". */
.c-gk-tafel{ font-size:11px; color:#8A867E; padding:6px 0 0; }
.c-gk-plus{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:11px; font-weight:600; color:var(--petrol-deep); }
.c-gk-plus:hover{ text-decoration:underline; }
/* 76e — de ⋯-persoon/groep-bewerkpopup (velden wit, radius 8, op crème popup). */
.c-pv-body{ display:flex; flex-direction:column; gap:10px; }
.c-pv-cel{ display:flex; flex-direction:column; gap:4px; }
.c-pv-lab{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8A867E; }
.c-pv-veld{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; background:var(--wit); padding:8px 11px; font:inherit; font-size:12.5px; color:var(--ink); }
.c-pv-help{ font-size:10.5px; color:#8A867E; }
.c-pv-rollen{ display:flex; flex-direction:column; }
.c-pv-rolrij{ display:flex; align-items:center; gap:7px; padding:8px 2px; border-bottom:1px solid #EFEBE3; }
.c-pv-rolnaam{ font-size:12.5px; color:var(--ink); flex:1; }
.c-pv-rolstatus{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:10.5px; color:#8A867E; white-space:nowrap; }
.c-pv-rolstatus:hover{ color:var(--petrol-deep); }
.c-pv-rolghost{ border:0; background:none; padding:8px 2px; text-align:left; cursor:pointer; font:inherit; font-size:12px; color:#B9B4AA; }
.c-pv-rolghost:hover{ color:var(--petrol-deep); }
.c-pv-rolkies{ display:flex; gap:6px; padding:8px 2px; flex-wrap:wrap; }
.c-pv-voetrechts{ margin-left:auto; display:flex; gap:8px; }
/* 76e — pill-groepen in de groep-popup (kwadrant + draagvlak). */
.c-pv-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.c-pv-pill{ font:inherit; font-size:11px; color:#6B6862; background:var(--wit); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.c-pv-pill.is-aan{ font-weight:600; color:var(--wit); background:var(--petrol); border-color:var(--petrol); }
.c-pv-pill-dv{ padding:6px 13px; font-size:11.5px; }
.c-pv-pill-dv.is-aan{ color:var(--ink); background:var(--wit); font-weight:600; border-width:1.5px; }
.c-pv-pill-dv[data-k="groen"].is-aan{ border-color:var(--groen); }
.c-pv-pill-dv[data-k="amber"].is-aan{ border-color:var(--geel); }
.c-pv-pill-dv[data-k="rood"].is-aan{ border-color:var(--rood); }
.c-pv-pill-dot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--rest,#D8D2C7); }
.c-pv-pill-dot[data-k="groen"]{ background:var(--groen); }
.c-pv-pill-dot[data-k="amber"]{ background:var(--geel); }
.c-pv-pill-dot[data-k="rood"]{ background:var(--rood); }
/* STAND-blokkop met ⋯ rechts. */
.c-gk-standkop{ display:flex; align-items:center; }
.c-gk-standmeer{ margin-left:auto; border:0; background:none; color:var(--ink-mist); font-size:12px; letter-spacing:2px; line-height:1; cursor:pointer; padding:0 2px; }
.c-gk-standmeer:hover{ color:var(--ink); }
/* 76e — de "Stand van de groep"-popup (tabel, 5 vaste Rogers-rijen). */
.c-stand-body{ display:flex; flex-direction:column; }
/* R92 — het oogst-quote-veld bovenaan de stand-popup (resultaat van de missie). */
.c-stand-oogst{ display:flex; flex-direction:column; gap:5px; margin-bottom:13px; }
.c-stand-oogst-lab{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A867E; }
.c-stand-oogst-ta{ width:100%; box-sizing:border-box; resize:vertical; font:inherit; font-size:12.5px; line-height:1.4; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--wit); color:var(--ink); }
.c-stand-oogst-ta:focus{ outline:none; border-color:var(--petrol,#12716C); }
.c-stand-grid{ display:grid; grid-template-columns:118px 34px 52px 1fr; gap:8px; align-items:center; }
.c-stand-head{ margin-bottom:2px; }
.c-stand-h{ font-size:9.5px; font-weight:700; letter-spacing:.06em; color:#8A867E; }
.c-stand-h.is-mid{ text-align:center; }
.c-stand-rij{ padding:7px 0; border-bottom:1px solid #EFEBE3; }
.c-stand-naam{ font-size:11.5px; color:var(--ink); }
.c-stand-dotwrap{ display:flex; justify-content:center; }
.c-stand-dot{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.06); cursor:pointer; padding:0; background:var(--rest,#D8D2C7); }
.c-stand-dot[data-k="groen"]{ background:var(--groen); }
.c-stand-dot[data-k="amber"]{ background:var(--geel); }
.c-stand-dot[data-k="rood"]{ background:var(--rood); }
.c-stand-n{ width:100%; box-sizing:border-box; text-align:center; border:1px solid var(--line); border-radius:6px; background:var(--wit); padding:4px 0; font:inherit; font-size:11.5px; color:var(--ink); }
.c-stand-beh{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:6px; background:var(--wit); padding:4px 9px; font:inherit; font-size:11px; color:var(--ink); }
.c-stand-som{ font-size:10.5px; color:#8A867E; margin-top:8px; }
.c-stand-som.is-af{ color:var(--rood); font-weight:600; }
.c-stand-vast{ font-size:10.5px; color:#8A867E; }
.c-map-paneel-naam{ font-family:var(--font-kop,inherit); font-size:15px; font-weight:600; color:var(--petrol-dark,#0A3936); }
.c-map-paneel-meta{ font-size:10.5px; color:#8A867E; }
/* 76a — ✕ hoger, in de rechterbovenhoek (los van de ⋯-kolom). */
.c-map-paneel-sluit{ position:absolute; top:10px; right:13px; z-index:3; border:0; background:none; font-size:18px; color:var(--ink-mist); cursor:pointer; line-height:1; padding:0 2px; }
.c-map-paneel-sluit:hover{ color:var(--ink); }
/* 76a — DE MENSEN-rijen in het paneel zijn PLATTE leesrijen (geen witte kaartjes):
   naam · teken · rollen · rechts gesprek + ⋯. De ⋯ lijnt zo uit met kop- en STAND-⋯. */
.c-map-paneel .c-mensen-rij{ border:0; border-radius:0; background:none; padding:8px 0; border-bottom:1px solid #EFEBE3; gap:7px; }
.c-map-paneel .c-mensen-rij:last-of-type{ border-bottom:0; }
/* ≈n rechts uitgelijnd + tabulaire cijfers: eenheden onder eenheden. */
.c-gk-standrij-n{ text-align:right; font-variant-numeric:tabular-nums; }
.c-map-paneel-sluit:hover{ color:var(--ink); }
.c-map-paneel-body{ padding-top:10px; }
.c-map-paneel-voet{ margin-top:12px; padding-top:10px; border-top:1px solid #EFEBE3; }
/* de geselecteerde groep-rij: teal rand (selectie = context-FAB) */
.c-map-rij.is-fab-selected{ outline:1.5px solid var(--petrol); outline-offset:-1px; border-radius:8px; background:var(--wit); }
/* R76 §2 — de groep-rij in drie regels */
.c-map-rij-groep{ display:flex; flex-direction:column; align-items:stretch; gap:2px; width:100%; text-align:left; padding:8px 6px; border-bottom:1px solid #EFEBE3; }
.c-map-r1{ display:flex; align-items:center; gap:6px; }
.c-map-rij-groep .c-map-naam{ font-size:13px; font-weight:600; color:var(--ink); }
.c-map-r1-teller{ margin-left:auto; flex:none; }
.c-map-rij-groep .c-map-grootte{ font-size:11px; color:var(--ink-mist); }
.c-map-r2{ font-size:11px; color:var(--ink-mist); }
.c-map-r2.is-amper{ color:var(--rood); font-weight:600; }
.c-map-r2 .c-map-rolissue{ color:var(--ink-mist); }
.c-map-r2.is-amper .c-map-rolissue,
.c-map-r2 .c-map-rolissue[data-ernst="rood"]{ color:var(--rood); }
.c-map-r3{ margin-top:1px; }
@media (max-width:900px){
  .c-map-split{ flex-direction:column; }
  /* In kolomrichting is de breedte de KRUIS-as, en align-items:flex-start laat een
     kind dan naar zijn inhoud krimpen. Zonder deze regel viel de kwadrantkolom
     terug op ~260px met een groot leeg vlak ernaast (het paneel had de regel al). */
  .c-map-links{ width:100%; flex-basis:auto; }
  .c-map-paneel{ flex-basis:auto; max-width:none; width:100%; position:static; }
}
/* R76 §7 — de fijnere paneel-anatomie */
.c-gk-standregel{ font-size:11px; color:#8A867E; margin:2px 0 8px; }
.c-gk-draagvlak{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.c-gk-draagvlak-lab{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8A867E; }
.c-gk-draagvlak-t{ font-size:11.5px; color:var(--ink-soft); }
.c-gk-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
/* 76a dev-export — de gehoord-pil: goed = neutrale petrol-pil (#EAF1F0); "amper
   gehoord · 0 gesprekken" = RODE pil (#C0563A op rgba(192,86,58,.12)). Compact. */
.c-gk-chips{ gap:6px; }
.c-gk-gehoordchip{ font-size:11px; font-weight:600; color:var(--petrol-deep); background:#EAF1F0; border-radius:999px; padding:2px 9px; }
.c-gk-gehoordchip.is-amper{ color:var(--rood); background:rgba(192,86,58,.12); }
/* de missie-koppelchip in het paneel: compacte petrol-pil zonder rand (2px 9px, 11px). */
.c-gk-chips .c-koppelchip.c-gk-missiechip{ border:0; padding:2px 9px; font-size:11px; line-height:1.35; max-width:100%; }
.c-gk-chips .c-koppelchip.c-gk-missiechip .c-koppelchip-naam{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.c-gk-aanname{ display:flex; align-items:center; gap:7px; width:100%; text-align:left; border:0; background:none; cursor:pointer; font:inherit; padding:7px 0; border-bottom:1px solid #EFEBE3; }
.c-gk-aanname-t{ flex:1; min-width:0; font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-gk-aanname-stand{ flex:none; font-size:10.5px; color:var(--ink-mist); }
.c-gk-aanname-stand[data-stand="bevestigd"]{ color:var(--groen); }
.c-gk-aanname-stand[data-stand="weerlegd"]{ color:var(--rood); }
/* 76a §7 — het ⋯-menu op de paneelkop (statische-data-bewerkpopup) */
.c-map-paneel-menu{ border:0; background:none; font-size:16px; color:var(--ink-mist); cursor:pointer; line-height:1; padding:0 4px; }
.c-map-paneel-menu:hover{ color:var(--ink); }
/* 76a-eis — de zetbare DRAAGVLAK-dot + herkomst-regel */
.c-gk-draagvlak-dot{ flex:none; width:11px; height:11px; border-radius:50%; border:0; padding:0; }
.c-gk-draagvlak-dot[data-k="groen"]{ background:var(--groen); }
.c-gk-draagvlak-dot[data-k="amber"], .c-gk-draagvlak-dot[data-k="geel"]{ background:var(--geel); }
.c-gk-draagvlak-dot[data-k="rood"]{ background:var(--rood); }
.c-gk-draagvlak-dot[data-k="rest"]{ background:none; border:1.5px solid var(--line-ghost,#B9B4AA); box-sizing:border-box; }
/* 76a-eis — de mini-popover groen/amber/rood (75c-mechaniek) */
.c-draagvlak-laag{ position:fixed; inset:0; z-index:940; }
.c-draagvlak-pop{ position:fixed; z-index:950; background:var(--cream,#FAF8F5); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(10,57,54,.16); padding:6px; min-width:180px; }
.c-draagvlak-pop-kop{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A867E; padding:4px 8px 6px; }
.c-draagvlak-optie{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:none; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); padding:7px 8px; border-radius:7px; }
.c-draagvlak-optie:hover{ background:rgba(18,113,108,.08); }
.c-draagvlak-optie.is-nu{ font-weight:600; }
.c-draagvlak-optie-dot{ flex:none; width:11px; height:11px; border-radius:50%; }
.c-draagvlak-optie-dot[data-k="groen"]{ background:var(--groen); }
.c-draagvlak-optie-dot[data-k="amber"]{ background:var(--geel); }
.c-draagvlak-optie-dot[data-k="rood"]{ background:var(--rood); }
/* 76a §3 — STAND VAN DE GROEP: de readiness-dimensies uitgeschreven */
.c-gk-standdims{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.c-gk-standdim{ display:flex; align-items:center; gap:8px; padding:4px 0; }
.c-gk-standdim-dot{ flex:none; width:9px; height:9px; border-radius:50%; }
.c-gk-standdim-dot[data-k="groen"]{ background:var(--groen); }
.c-gk-standdim-dot[data-k="amber"], .c-gk-standdim-dot[data-k="geel"]{ background:var(--geel); }
.c-gk-standdim-dot[data-k="rood"]{ background:var(--rood); }
.c-gk-standdim-dot[data-k="rest"]{ background:var(--rest,#D8D2C7); }
.c-gk-standdim-t{ font-size:12.5px; color:var(--ink); }
.gk-kwadrant-sel{ width:100%; font:inherit; font-size:13px; padding:7px 8px; border:1px solid var(--line); border-radius:var(--r-veld,8px); background:var(--wit); color:var(--ink); }

/* 76a dev-export — de VERDELING-sparkline op de groep-kaart (regel 3): label +
   vijf staafjes (normaalverdelingsvorm) in RAG-kleur + herkomst. */
.c-map-verdeling{ display:flex; align-items:flex-end; gap:4px; margin-left:6px; }
.c-map-verdeling-lab{ font-size:9.5px; color:#8A867E; align-self:center; }
.c-map-verdeling-bars{ display:flex; align-items:flex-end; gap:3px; height:14px; }
.c-map-vbar{ width:7px; border-radius:2px 2px 0 0; background:#EFEBE3; flex:none; }
.c-map-vbar[data-k="groen"]{ background:var(--groen); }
.c-map-vbar[data-k="amber"], .c-map-vbar[data-k="geel"]{ background:var(--geel); }
.c-map-vbar[data-k="rood"]{ background:var(--rood); }
.c-map-vbar[data-k="leeg"], .c-map-vbar[data-k="rest"]{ background:#EFEBE3; }
.c-map-vbar.is-dashed{ background:#EFEBE3; border:1px dashed #B9B4AA; box-sizing:border-box; }
.c-map-verdeling-herk{ font-size:9.5px; color:#8A867E; align-self:center; }
.c-map-verdeling-start{ border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:9.5px; color:#8A867E; align-self:center; }
.c-map-verdeling-start:hover{ color:var(--petrol-deep); }

/* 76a dev-export — STAND VAN DE GROEP = Rogers-subgroepen (dot · naam · ≈n · behoefte). */
.c-gk-standrogers{ display:flex; flex-direction:column; margin-top:6px; }
.c-gk-standrij{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.c-gk-standrij:first-child{ margin-top:0; }
.c-gk-standrij-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--rest,#D8D2C7); }
.c-gk-standrij-dot[data-k="groen"]{ background:var(--groen); }
.c-gk-standrij-dot[data-k="amber"], .c-gk-standrij-dot[data-k="geel"]{ background:var(--geel); }
.c-gk-standrij-dot[data-k="rood"]{ background:var(--rood); }
.c-gk-standrij-naam{ font-size:11.5px; color:var(--ink); width:118px; flex:none; }
.c-gk-standrij-n{ font-size:11px; color:#8A867E; width:28px; flex:none; }
.c-gk-standrij-beh{ font-size:11px; color:#6B6862; flex:1; min-width:0; }
.c-gk-standherk{ display:block; text-align:left; border:0; background:none; padding:0; margin-top:5px; cursor:pointer; font:inherit; font-size:10.5px; color:#8A867E; line-height:1.4; }
.c-gk-standherk:hover{ color:var(--petrol-deep); }

/* R71 — Het kompas: zone-eyebrow-kleuren (kern petrol-deep · verkenningen terra ·
   werkinstrumenten grijs) + de ghost-grijze verhuis-voetnoot onderaan. */
.c-groepkop[data-sectie="kompas"] > span:first-child{ color:var(--petrol-deep); }
.c-groepkop[data-sectie="verkenning"] > span:first-child{ color:#8A4A22; }
.c-groepkop[data-sectie="instrument"] > span:first-child{ color:#8A867E; }
/* R77a §6 — de domein-regels in de popup: dichte regels zoals de dimensies eronder
   (naam · vol-dot + stand-woord rechts, border-bottom), géén kaart met gekleurde
   linkerrand. */
.c-impact-domein{ border:0 !important; border-bottom:1px solid #EFEBE3 !important; border-radius:0 !important; padding:9px 2px !important; margin:0 !important; background:none !important; }
.c-impact-domein-kop{ margin-bottom:0 !important; }
.c-impact-domein-lab{ font-size:13px !important; font-weight:600; }
/* R77a §8 — de sectiekoppen als overline + uitleg-regel (11px grijs) eronder. */
.c-ir-sectie-kop{ font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8A867E; border-bottom:0; padding-bottom:0; margin:0 0 2px; }
.c-impact-popup-intro{ font-size:11px; color:#8A867E; margin:0 0 8px; line-height:1.4; }
/* R77a §7 — de per-dimensie risico-chip (petrol pil) wanneer er al een risico hangt. */
.c-ir-riskchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

/* R77a §1 — de OPEN-kolom (soort-dots + n open) vervangt de kale risico-teller. */
.c-ir-opencel{ border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:flex-end; gap:4px; padding:0; font:inherit; }
.c-ir-openleeg{ color:var(--ink-mist); font-size:14px; }
.c-ir-opencel:hover .c-ir-openleeg{ color:var(--petrol); }

/* §7 — de metaregel onder een verkenningslens (bv. de stakeholdermap). */
.c-lens-meta{ font-size:11px; color:#8A867E; padding:2px 0 4px 22px; line-height:1.3; }
.c-kompas-verhuis{ font-size:10.5px; color:#B9B4AA; margin-top:14px; padding-top:10px; border-top:1px solid var(--line-zacht,#EFEBE3); line-height:1.6; }
.c-kompas-verhuis-link{ border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; }
.c-kompas-verhuis-link:hover{ color:var(--ink-soft); text-decoration:underline; }
.c-kompas-verhuis-sep{ color:#B9B4AA; }

/* R71/86 — versheid = FAB-aanwezigheid op de kompas-rij (open-teller rechts) +
   de mint leegte-attendering in de Verkenningen-zone. */
.c-fundament-open{ margin-left:auto; flex:none; }
.c-lens-attendering{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:0; background:rgba(127,196,190,.14); border-radius:8px; padding:6px 10px; margin-top:6px; cursor:pointer; }
.c-lens-attendering-dot{ width:5px; height:5px; border-radius:50%; background:var(--petrol); flex:none; }
.c-lens-attendering-t{ flex:1; font-size:11.5px; color:var(--petrol-deep); }
.c-lens-attendering-bekijk{ font-size:10.5px; font-weight:600; color:var(--petrol-deep); }

/* ═══════════════════════════════════════════════════════════════════
   RONDE 83 · frame 83a — het gecorrigeerde dashboard
   Vaste 6-blok volgorde op het app-canvas; elk blok een cream-kaart met
   een overline-kop. Geen ankerchips, geen banner-stapel, één FAB.
   ═══════════════════════════════════════════════════════════════════ */
.bs.bs-83{ display:flex; flex-direction:column; gap:10px; }
/* Ronde 93 — frame 33a: de blokken zijn WIT op het canvas, niet crème. Crème
   was de 83a-keuze; op het #EDE9E1-canvas verdween het onderscheid tussen kaart
   en ondergrond bijna. Wit geeft de drielaagse diepte terug (canvas · kaart ·
   inhoud) en laat de gekleurde zijranden hieronder pas echt werken. */
.c-dash-blok{
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  padding:12px 16px;
}

/* De gekleurde zijranden waren een 33a-keuze: daar stonden de signalenzone en
   de designgroep-regel als losse kaarten op het bord, en een rand gaf ze toon.
   In R86 zitten de signalen ín genummerde blok 1 en is de designgroep-regel
   naar de kop verhuisd. Een rand op een blok dat al een nummer draagt is een
   tweede markering voor hetzelfde, en op een blok binnen een blok leest hij
   als een losse streep naast de inhoud. Daarom weg. */
.c-dash-blok-kop{ display:flex; align-items:center; gap:8px; }
.c-dash-blok-titel{
  font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft);
}
.c-dash-blok-sub{
  font-weight:var(--gew-normaal); letter-spacing:0; text-transform:none; color:var(--ink-soft);
}
.c-dash-blok-mid{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-dash-blok-rechts{ margin-left:auto; }
.c-dash-blok--regel .c-dash-blok-kop{ font-size:12px; color:var(--ink); }
.c-samen-regel{ font-size:12px; color:var(--ink); }

/* ── WAAROM (cream2-citaatbalk, gestapeld) ── */
/* Ronde 93 — ook de waarom-balk is in 33a een witte kaart met een haarlijn,
   niet een crème vlak zonder rand. Met alle blokken wit blijft het canvas het
   enige gekleurde vlak, en dat is precies wat de diepte draagt. */
.c-waarom{
  flex-wrap:wrap;
  align-items:baseline;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:12px 16px;
  gap:4px 8px;
}
/* 86a — op het bord staat de waarom-regel op cream2 zónder rand: ze is de
   aanhef van het bord, geen zevende blok. Alleen daar; op de andere schermen
   blijft de component zoals hij is. */
.bs > .c-waarom{
  background:var(--cream2);
  border:0;
  padding:11px 16px;
}
.c-waarom-label{
  flex-basis:100%;
  color:var(--ink-soft);
  text-transform:uppercase;
}

/* ── SIGNALEN als cream-blok (R79-anatomie, absorbeert Deze week) ── */
.c-signalen.c-dash-blok{ display:block; margin:0; padding:12px 16px; }
.c-signalen.c-dash-blok .c-signalen-kop{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.c-signalen-teller{ margin-left:auto; font-size:11px; color:var(--ink-soft); }
.c-signalen.c-dash-blok .c-signaal{
  background:none; border:0; border-bottom:1px solid var(--line-zacht);
  border-radius:0; padding:9px 0; align-items:flex-start;
}
.c-signalen.c-dash-blok .c-signaal:last-child{ border-bottom:0; padding-bottom:2px; }
.c-signalen.c-dash-blok .c-signaal-dot{ background:var(--geel); }
.c-signalen.c-dash-blok .c-signaal[data-ernst="rood"]{ background:none; border-color:var(--line-zacht); }
/* R79 — de stip dráágt de stand: rood, amber of groen. De blok-regel hierboven
   zette alle stippen op amber en won op volgorde van de ernst-regel eerder in
   dit bestand, waardoor een rood signaal (rode zone, afwijking, mijlpaal over
   tijd) er in het blok net zo uitzag als een amber attendering. */
.c-signalen.c-dash-blok .c-signaal[data-ernst="rood"] .c-signaal-dot{ background:var(--rood); }
.c-signaal[data-ernst="groen"] .c-signaal-dot,
.c-signalen.c-dash-blok .c-signaal[data-ernst="groen"] .c-signaal-dot{ background:var(--groen); }

/* ── R94 · blinde vlekken als tweede groep in blok 1 ──────────────────
   Zelfde rij als een signaal — dat is de hele bedoeling: het is dezelfde
   soort, iets wat de app in je eigen gegevens ziet. Alleen een overline
   scheidt de twee groepen, en de dot verschilt. */
.c-vlek-kop{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.c-signalen.c-dash-blok .c-signaal.is-vlek{ background:none; border-bottom:1px solid var(--line-zacht); }
/* De dot is een OPEN RING, geen gevulde stip. Een signaal draagt een stand
   (rood/amber/groen); een blinde vlek draagt een afwezigheid, en daar hoort
   geen kleur bij die zegt hoe erg het is. */
.c-signaal.is-vlek .c-signaal-dot,
.c-signalen.c-dash-blok .c-signaal.is-vlek .c-signaal-dot{
  background:none; border:1.5px solid #B9B4AA; box-sizing:border-box;
}
/* de suggestie loopt grijs door in dezelfde regel, achter de vaststelling */
.c-signaal-sug{ color:var(--ink-mist); }
/* R118f — de uitsplitsing onder de telling. Eigen regel, een maat kleiner en
   in de zachte ink: de kop zegt hoeveel, deze regel waaruit dat bestaat. */
.c-signaal-sub{ display:block; margin-top:2px; font-size:10.5px; line-height:1.4;
  color:var(--ink-soft); }
.c-vlek-meer{
  display:block; margin-top:8px; padding:0; border:0; background:none;
  font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer;
}
/* ≤700px — de doel-link zakt onder de tekst; de rij blijft één tikdoel van
   44px+, en de ✕ houdt rechts 24px raakvlak. */
@media (max-width:700px){
  /* Regel 1 blijft ○ tekst … ✕ ; alleen de doel-link zakt eronder, ingesprongen
     tot onder de tekst. De dot mag níét op een eigen regel belanden — dan leest
     de rij als twee dingen in plaats van één. */
  .c-signalen.c-dash-blok .c-signaal.is-vlek{ flex-wrap:wrap; row-gap:4px; min-height:44px; padding:10px 0; }
  .c-signaal.is-vlek .c-signaal-dot{ order:1; }
  /* flex-basis 0, niet auto: met auto rekent de browser met de volle
     tekstbreedte, past de rij niet, en klapt de ○ naar een eigen regel. */
  .c-signaal.is-vlek .c-signaal-tekst{ order:2; flex:1 1 0; min-width:0; }
  .c-signaal.is-vlek .c-signaal-x{ order:3; margin-left:auto; min-width:24px; min-height:24px; }
  .c-signaal.is-vlek .c-signaal-sprong{ order:4; flex:1 1 100%; margin-left:18px; text-align:left; }
}

/* ── WAT WE HOREN — gehoord + Rogers-verdeling per groep ── */
.c-horen-grid{
  display:grid; grid-template-columns:132px 64px 1fr;
  gap:8px 12px; align-items:center; font-size:12px;
}
.c-horen-naam{ color:var(--ink); font-weight:var(--gew-vet); }
.c-horen-gehoord{ font-size:11px; color:var(--ink-soft); }
.c-horen-rechts{ display:flex; align-items:center; gap:8px; min-width:0; }
/* de strip vult de ruimte tussen de gehoord-teller en de open-teller; de teller
   staat daardoor rechts uitgelijnd, net als in de andere blokken. */
.c-horen-strip{ flex:1 1 auto; min-width:0; display:flex; }
.c-horen-bars{ display:flex; gap:2px; min-width:0; }
.c-horen-bar{ height:14px; border-radius:2px; background:var(--line-zacht); box-sizing:border-box; min-width:0; }
.c-horen-bar[data-k="groen"]{ background:var(--groen); }
/* R92-fix — 'geel' en 'amber' zijn dezelfde stand; de map schilderde beide, het
   dashboard alleen 'amber'. Daardoor stonden gele staafjes hier leeg en leek het
   dashboard iets ánders te zeggen dan de stakeholder map, terwijl de bron (de
   overgenomen g.stand-kleuren) identiek is. Idem voor 'rest'. */
.c-horen-bar[data-k="amber"], .c-horen-bar[data-k="geel"]{ background:var(--geel); }
.c-horen-bar[data-k="rood"]{ background:var(--rood); }
.c-horen-bar[data-k="leeg"], .c-horen-bar[data-k="rest"]{ background:var(--line-zacht); }
.c-horen-bar.is-onzeker{ border:1px dashed rgba(185,180,170,.85); }
/* R94 — de breedte van de strip staat voor de omvang van de groep. Is die
   nergens ingevuld, dan zegt de breedte niets: streepjeslijn eronder in plaats
   van een volle balk die grootte suggereert. */
.c-horen-bars.is-omvang-onbekend{ border-bottom:1px dashed rgba(185,180,170,.85); padding-bottom:2px; }
.c-horen-concl{ font-size:11px; color:var(--ink-soft); }
/* R92 — de oogst-quote (resultaat van de missie) als info-regel naast de map-bars. */
/* 86a — het blok onder de strip-regel: mint kantlijn, quote met de herkomst
   compact áchter de quote (dezelfde regel, geen aparte herkomstregel), en
   daaronder één behoefte-regel. Samen met de strip-regel max drie regels. */
.c-horen-onder{
  grid-column:1 / -1; display:block;
  border-left:2px solid var(--petrol-light);
  padding:1px 0 1px 10px; margin:-1px 0 2px;
}
.c-horen-oogst{ display:block; min-width:0; }
.c-horen-oogst-t{ font-style:italic; font-size:11.5px; color:var(--ink); line-height:1.45; }
/* R128 · nowrap duwde de herkomstknop achter een lang citaat het scherm uit,
   in het Frans en het Engels het hardst. Hij mag met de zin meebreken: hij
   hoort erbij, hij staat er niet naast. */
.c-horen-oogst-h{
  font:inherit; font-size:10px; color:var(--ink-soft); background:none; border:0;
  padding:0; margin-left:4px; white-space:normal; cursor:pointer;
}
.c-horen-oogst-h:hover{ color:var(--petrol); }
.c-horen-behoefte{ display:block; font-size:10.5px; color:var(--ink-soft); margin-top:1px; }
.c-horen-behoefte b{ color:var(--ink); font-weight:var(--gew-vet); }
.c-horen-behoefte-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  margin:0 4px; background:var(--line-ghost);
}
.c-horen-behoefte-dot[data-k="groen"]{ background:var(--groen); }
.c-horen-behoefte-dot[data-k="amber"]{ background:var(--geel); }
.c-horen-behoefte-dot[data-k="rood"]{ background:var(--rood); }
/* de missie-trigger op de strip-regel van een groep waarvan nog niets gekend is */
.c-horen-missie{
  font:inherit; font-size:10.5px; color:var(--ink-soft); background:none; border:0;
  padding:0; white-space:nowrap; cursor:pointer; flex:none;
}
.c-horen-missie:hover{ color:var(--petrol); }
.c-horen-teller{ flex:none; }

/* ── DE OPVOLGING — de amber-ruit meetpunt-dot naast de ronde actie-dots ── */
.c-acties-dot--meet{ background:var(--geel); border-radius:0; transform:rotate(45deg); }

@media (max-width:640px){
  .c-horen-grid{ grid-template-columns:1fr auto; }
  .c-horen-rechts{ grid-column:1 / -1; }
}

/* R83 deel 2 — HET NOORDEN-rij als drager: open-teller + teal selectie-rand (83a) */
/* 86a — de teller staat achteraan, ná het cijfer; het beeld en het cijfer
   duwen samen naar rechts via de margin-left:auto op de mini-graph. */
.c-noord-rij .c-blokteller{ flex:none; margin-left:var(--sp-5); }
.c-noord-rij.is-fab-selected{
  border:1.5px solid var(--petrol); border-radius:8px; padding:6px 8px;
  box-shadow:0 4px 12px rgba(10,57,54,.08);
}

/* R83 deel 2 — het rode-zone mini-fragment (impact · readiness · capaciteit) */
.c-signaal-reeksen{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;
  margin-top:6px; font-size:10px; color:var(--ink-soft);
  /* het fragment is sinds 86a een knop naar scherm 77; het mag er niet als een
     knop uitzien, alleen als een klikbaar beeld. */
  font-family:inherit; background:none; border:0; padding:0;
  text-align:left; width:100%; cursor:pointer;
}
.c-signaal-reeksen:hover .c-sr-groep{ color:var(--petrol); }
.c-sr-groep{ font-size:10.5px; color:var(--ink); font-weight:var(--gew-vet); flex-basis:100%; }
.c-sr-kol{ display:flex; align-items:center; gap:5px; }
.c-sr-lab{ font-size:10px; color:var(--ink-soft); }
.c-sr-dots{ display:flex; gap:3px; }
.c-sr-dot{ width:9px; height:9px; border-radius:50%; box-sizing:border-box; background:var(--line-zacht); }
.c-sr-dot.is-leeg{ background:#fff; border:1.2px solid #C9C2B4; }
.c-sr-dot[data-k="groen"]{ background:var(--groen); }
.c-sr-dot[data-k="amber"]{ background:var(--geel); }
.c-sr-dot[data-k="rood"]{ background:var(--rood); }
.c-sr-dot.is-nul{ box-shadow:0 0 0 2px rgba(192,86,58,.25); }

/* R83 deel 2 — de kaart-taal hover-tooltip (één stijl voor elk verdicht teken) */
.c-kaarttip{
  position:fixed; z-index:9000; pointer-events:none;
  background:var(--cream); border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; box-shadow:0 8px 22px rgba(10,57,54,.16);
  display:flex; flex-direction:column; gap:1px; max-width:240px;
}
.c-kaarttip-kop{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink); }
.c-kaarttip-kern{ font-weight:var(--gew-vet); }
.c-kaarttip-teken{ flex:none; }
.c-kaarttip-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.c-kaarttip-dot[data-k="groen"]{ background:var(--groen); }
.c-kaarttip-dot[data-k="amber"]{ background:var(--geel); }
.c-kaarttip-dot[data-k="rood"]{ background:var(--rood); box-shadow:0 0 0 2px rgba(192,86,58,.25); }
.c-kaarttip-herkomst{ font-size:10.5px; color:var(--ink-soft); padding-left:14px; }

/* ── R83/71a · kompas-flyout compacter (één-regel-rijen, geen scroll bij pas-op-maat) ── */
/* zone-koppen op het 71a-ritme (18px lucht boven elke kop, behalve de eerste). */
.c-paneel-body .c-groepkop{ margin-top:18px; }
.c-paneel-body .c-groepkop:first-child{ margin-top:0; }
/* de stakeholdermap-samenvatting leeft ÍN de rij (grijze inline-suffix), niet als
   tweede regel eronder — zo blijft het één 71a-rij. */
.c-fundament-rij.c-lens-rij{ flex-wrap:nowrap; }
.c-lens-rij .c-lens-naam{ flex:none; white-space:nowrap; }   /* 71a: titel blijft één regel */
.c-lens-meta-inline{ font-size:11px; color:#8A867E; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* werkinstrument: titel links (mag krimpen), teller + "waar ↗" als één groep rechts —
   geen teller meer tússen twee gewrapte titelregels. */
.c-instrument-rij{ flex-wrap:nowrap; }
.c-instrument-naam{ flex:1; min-width:0; }
.c-instrument-rechts{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; flex:none; white-space:nowrap; }
.c-instrument-rechts .c-fundament-open{ margin-left:0; }
.c-instrument-rechts .c-instrument-waar{ margin-left:0; }
/* de flyout blijft een volhoge lade (top→bottom, tot onder Feedback); geen
   permanente scrollbar-goot — de body toont enkel een scrollbar als de (nu
   compacte) inhoud écht niet past. */
.c-paneel-body{ scrollbar-gutter:auto; }
/* 71a-fix — de KNOP-RESET (`.c-fundament-rij{font:inherit}` in componenten.css)
   klopte de eigen 13px-maat van de kompas-rij weg naar de geërfde body-16px: de
   flyout werd te hoog en kreeg een scrollbar. Terug naar de 71a-spec-maat — stapnaam
   13px op desktop (mobiel houdt zijn 12.5px uit de bestaande media-query), titel 20px.
   Enkel binnen het paneel; de fundament-hoofdweergave blijft ongemoeid. */
@media (min-width:700px){
  .c-paneel-body .c-fundament-rij{ font-size:var(--t-body); }   /* 13px */
  .c-paneel-titel{ font-size:20px; }                             /* 71a: 20px */
}
@media (max-width:699px){
  .c-paneel-titel{ font-size:17px; }                             /* 71a mobiel: 17px */
}
/* de zijmenu-bewaarstatus clipt binnen de kolom (nooit buiten de marge). */
.c-zijmenu .c-opslagstatus{ overflow:hidden; max-width:100%; }
.c-zijmenu .c-opslagstatus > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* ── R83/74a · kern-stap: elk blok een cream-kaart op het canvas ── */
/* De canvas-achtergrond hoort ALLEEN wanneer #kaart transparant is (losse cream-
   kaarten, bij visie/succescriteria). Zonder titel-blok (bv. de stuurgroep) blijft
   #kaart cream en mag .c-kernstap die niet overschilderen — anders verliest de
   werk-kaart zijn cream (72a: DE STUURGROEP = één cream-kaart, niet canvas). */
.c-kaart-canvas .c-kernstap{ background:var(--canvas); }
.c-kernkaart{
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  padding:14px 18px; margin-bottom:12px;
}
.c-kernkaart.is-drager-selected{ border:1.5px solid var(--petrol); box-shadow:0 6px 18px rgba(10,57,54,.08); }
/* de kop zit ín de kaart: geen eigen buitenmarge/selectie-outline meer (de kaart
   draagt de teal rand); de teller blijft rechts. */
.c-kernkaart .c-kernblok-kop{ margin:0 0 8px; padding:0; }
.c-kernkaart .c-kernblok-kop.is-fab-selected{ outline:0; background:none; }
.c-kernkaart .c-kernblok-kop:first-child{ margin-top:0; }
/* velden in een kern-kaart zijn vlak (de kaart is het vlak): geen dubbele rand. */
.c-kernkaart .bs-veld, .c-kernkaart .veld-blok{ background:none; border:0; padding:0; }

/* 74a — de lensregel als laatste rij ín de statement-kaart (border-top). */
.c-lensregel-inkaart{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line-zacht); }

/* 74a — lid-rijen in een kern-kaart zijn VLAK (geen cream2-box per lid): enkel een
   dunne scheidingslijn. Overschrijft de .c-stap .persoon-veld-box. */
.c-kernkaart .c-perlid{ background:none; border:0; border-bottom:1px solid #EFEBE3; border-radius:0; padding:9px 0; margin-top:0; }
.c-kernkaart .c-perlid:last-child{ border-bottom:0; padding-bottom:2px; }

/* 74a — de omhullende werk-kaart is transparant zodra de kern-stap eigen
   blok-kaarten draagt (die staan dan direct op het canvas). */
.kaart.c-kaart-canvas{ background:none; border:0; box-shadow:none; padding:0; }

/* ── R83/D · risico-popup: vlakke velden, koppel-ghost onderaan ── */
/* de aanmaak-variant (kaal) is vlak: geen geneste witte kaart. */
.risico-item.is-kaal{ border:0; background:none; border-radius:0; padding:0; }
/* de GROEP-rij zit nu ná de velden in de kern. */
.c-soortpop-kern .risico-fab-groepchip,
.c-soortpop-kern .risico-fab-veld{ margin-top:12px; }
/* "koppel aan bestaand item ▾" — stille ghost-regel onderaan. */
.c-soortpop-koppelghost{ margin-top:10px; border-top:1px solid var(--line-zacht); padding-top:8px; }
.c-soortpop-koppeltoggle{ border:0; background:none; padding:0; font:inherit; font-size:12px; color:#8A867E; cursor:pointer; }
.c-soortpop-koppeltoggle:hover{ color:var(--petrol-deep); }
.c-soortpop-koppelzone{ margin-top:8px; }

/* 77a-review — één-regel ghost-legenda onder de impact&readiness-tabel. */
.c-ir-leg{ margin-top:10px; }
.c-ir-leg .c-ir-leg-rij{ font-size:11px; color:#8A867E; line-height:1.5; }

/* ── R83/76a-review · stakeholder map fixes ── */
/* fix 7 — kwadrant-kop op één regel (overline + gedragswoord inline). */
.positie-kop{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.positie-kop .p-uitkomst{ text-transform:none; }
/* fix 8 — groep-rij regel 2 op één regel (ellipsis i.p.v. wrap). */
.c-map-r2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* fix 5 — "+ kandidaat" als stille ghost-rij "typ een naam". */
.c-mensen-ghost{ display:block; width:100%; text-align:left; border:0; background:none; padding:7px 2px; font:inherit; font-size:13px; color:#B9B4AA; cursor:pointer; }
.c-mensen-ghost:hover{ color:var(--petrol-deep); }
/* fix 3 — STAND-attendering (mint) + Team-haakje + bron-sub op de deelkop. */
.gk-deelkop-sub{ font-weight:var(--gew-normaal); letter-spacing:0; text-transform:none; color:#8A867E; font-size:11px; }
.c-gk-standatt{ margin-top:6px; }
.c-gk-teamhaak{ margin-top:6px; font-size:10.5px; color:#8A867E; line-height:1.5; }
/* 76a — mint-attendering onderaan STAND: "de missie loopt door · missie ↗". */
.c-gk-standmint{ display:flex; align-items:center; gap:8px; background:rgba(127,196,190,.14); border-radius:8px; padding:7px 11px; margin-top:8px; }
.c-gk-standmint-t{ font-size:11.5px; color:var(--petrol-deep); flex:1; line-height:1.4; }
.c-gk-standmint-l{ flex:none; border:0; background:none; padding:0; cursor:pointer; font:inherit; font-size:11px; font-weight:600; color:var(--petrol-deep); white-space:nowrap; }
.c-gk-standmint-l:hover{ text-decoration:underline; }

/* R92 — de oogst-quote (resultaat van de missie) bovenaan STAND VAN DE GROEP:
   samenvattend citaat met mint kantlijn, herkomstregel gedempt. Read-only. */
.c-gk-oogstquote{ margin:8px 0 4px; padding:8px 12px; border-left:3px solid var(--groen,#2C8A6B); background:rgba(44,138,107,.07); border-radius:0 8px 8px 0; }
.c-gk-oogstquote-tekst{ font-family:var(--font-kop,Fraunces),Georgia,serif; font-style:italic; font-size:13.5px; line-height:1.45; color:var(--ink,#2A2A28); }
.c-gk-oogstquote-herk{ font-size:11px; color:var(--ink-soft,#8A867E); margin-top:5px; }

/* fix 7 — krappere overline zodat de hele kop (incl. gedragswoord) op één regel past. */
.c-stap .positie-kop .p-as{ font-size:9px; letter-spacing:.03em; }
.c-stap .positie-kop .p-uitkomst{ font-size:10px; }

/* ═══ Ronde 77 dev-export — impact & readiness grid + rij-popup (77a/77e) ═══ */
/* korte kleinkapitaal-grijze kolomkoppen, gecentreerd boven de stippenkolommen. */
.c-ir-grid .c-ir-kop{ text-align:center; }
.c-ir-grid .c-ir-hoek{ text-align:left; }
.c-ir-grid .c-ir-kop-open{ text-align:right; }
.c-ir-grid .c-ir-kop-meer{ text-align:right; }
/* open- én ⋯-kolom rechts uitlijnen. */
.c-ir-riskcel.c-ir-opencel, .c-ir-opencel{ justify-content:flex-end; }
/* impact & readiness stippenreeksen centreren onder hun kop; capaciteit ook. */
.c-ir-serie{ justify-content:center; }
/* legenda = vier losse flex-segmenten; per segment enkel het prefix (het <b>) vet,
   de dimensie-opsomming erna normaal-grijs. */
.c-ir-leg{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 16px; }
.c-ir-leg .c-ir-leg-seg{ font-size:10.5px; color:#8A867E; line-height:1.5; }
.c-ir-leg .c-ir-leg-seg b{ color:var(--ink); font-weight:var(--gew-zwaar); }
/* de vaste ⋯-kolom op elke rij (opent de 77e-popup); ghost-grijs, 26px knop. */
.c-ir-meercel{ display:flex; align-items:center; justify-content:flex-end; border-bottom:1px solid #EFEBE3; }
.c-ir-meer-knop{ width:26px; height:26px; border:0; background:none; color:var(--ink-mist,#8A867E); cursor:pointer; font-size:15px; line-height:1; border-radius:6px; padding:0; }
.c-ir-meer-knop:hover{ color:var(--petrol); background:rgba(18,113,108,.08); }
/* dashboard-signaal in de kaart: amber-tint attendering (33a-taal). */
.c-ir-signaal{ display:flex; align-items:center; gap:10px; background:rgba(217,166,60,.15); border-radius:10px; padding:10px 14px; margin-top:12px; }
.c-ir-signaal-dot{ width:8px; height:8px; border-radius:50%; background:var(--geel,#D9A63C); flex:none; }
.c-ir-signaal-txt{ font-size:12px; color:var(--ink); flex:1; line-height:1.5; }
.c-ir-signaal-naar{ background:none; border:0; padding:0; font-family:var(--font-ui); font-size:11px; font-weight:var(--gew-zwaar); color:var(--petrol-deep,#0E4F4B); white-space:nowrap; cursor:pointer; }
.c-ir-signaal-naar:hover{ text-decoration:underline; }
/* "naar de rij ▸" laat de doelrij even oplichten. */
.c-ir-rij.is-flits .c-ir-groep, .c-ir-rij.is-flits .c-ir-serie, .c-ir-rij.is-flits .c-ir-landt,
.c-ir-rij.is-flits .c-ir-riskcel{ background:rgba(217,166,60,.16); transition:background .3s; }

/* ── de rij-popup (77e): drie vaste secties, stand-dot + herkomst ── */
.c-ir77-body{ display:flex; flex-direction:column; gap:0; }
.c-ir77-seckop{ display:grid; grid-template-columns:118px 34px 1fr; gap:8px; margin-top:12px; font-size:9.5px; font-weight:700; letter-spacing:.06em; }
.c-ir77-seckop:first-child{ margin-top:2px; }
.c-ir77-seckop[data-zone="impact"]{ color:var(--petrol-deep,#0E4F4B); }
.c-ir77-seckop[data-zone="readiness"]{ color:#8A4A22; }
.c-ir77-seckop[data-zone="capaciteit"]{ color:var(--ink-soft,#6B6862); }
.c-ir77-seckop-s{ text-align:center; }
.c-ir77-rij{ display:grid; grid-template-columns:118px 34px 1fr; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid #EFEBE3; }
.c-ir77-naam{ font-size:11.5px; color:var(--ink); }
.c-ir77-dotwrap{ display:flex; justify-content:center; }
.c-ir77-dot{ width:14px; height:14px; border-radius:50%; border:0; background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.c-ir77-dot .c-stip{ width:14px; height:14px; }
.c-ir77-dot.is-nul{ box-shadow:0 0 0 2px rgba(192,86,58,.25); border-radius:50%; }
.c-ir77-herk{ font-size:10.5px; color:#8A867E; }
.c-ir77-uitleg{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:10.5px; color:#8A867E; }
.c-ir77-uitleg-r{ margin-left:auto; }
.c-ir77-vast{ font-size:10.5px; color:#8A867E; }
/* mobiel — de ⋯-kolom valt weg (de rij wordt een kaart; tik de groepsnaam opent de popup). */
@media (max-width:699px){ .c-ir-meercel{ display:none; } }

/* ═══ R91 — mobiele layout-fixes (smalle telefoons) ═══ */
@media (max-width:560px){
  /* kern 1/3 · stuurgroep-rij: de rechter chip/teller/⋯ liep van de rij af. Laat de
     rij wrappen en zet de rechterkant op een eigen volle regel eronder. */
  .c-stuurrij-hoofd{ flex-wrap:wrap; row-gap:4px; }
  .c-stuurrij-hoofd .c-stuurrij-rechts{ margin-left:0; width:100%; justify-content:flex-start; }
  /* stakeholder-kaart · de gehoord-regel niet meer afknippen maar laten wrappen. */
  .c-map-r2{ white-space:normal; overflow:visible; text-overflow:clip; }
  /* note/soort-popup-voet: de "landt onder …"-caption wrapte 3 regels en cramde de
     voet — op mobiel weglaten (Verwijder links + Bewaar rechts blijven). */
  .c-soortpop-landt{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   R92 · frame 66f — de herkomst-lens op Opvolging
   ───────────────────────────────────────────────────────────────────
   Eén pill boven de tabs zegt waaraan de lijst gekoppeld is. De naam is
   klikbaar (terug naar de plek); "toon alles ✕" zet de lens af. Er is geen
   handmatige filter-opbouw: dit is de enige knop die de lens bedient. */
.c-herkomstlens{ display:block; }
.c-herkomstpill{
  display:flex; align-items:center; gap:var(--sp-5);
  margin:0 0 var(--sp-6);
  padding:9px 14px;
  background:var(--cream,#FAF8F5);
  border:1.5px solid var(--petrol,#12716C);
  border-radius:var(--r-pil,999px);
}
.c-herkomstpill-naar{
  flex:1 1 auto; min-width:0;
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:0; padding:2px 0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--ink,#2A2A28); text-align:left;
}
.c-herkomstpill-naar:hover .c-herkomstpill-tekst{ text-decoration:underline; }
.c-herkomstpill-dot{
  flex:none; width:9px; height:9px; border-radius:50%;
  background:var(--petrol,#12716C);
}
.c-herkomstpill-tekst{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-herkomstpill-tekst b{ font-weight:var(--gew-zwaar,700); color:var(--petrol-deep,#0E4F4B); }
.c-herkomstpill-alles{
  flex:none; background:none; border:0; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--ink-soft,#6B6862); padding:4px 2px;
}
.c-herkomstpill-alles:hover{ color:var(--ink,#2A2A28); text-decoration:underline; }

/* een tab die onder de lens op 0 valt: blijft staan, maar gedempt — zo
   verspringt de tab-rij niet terwijl je van drager wisselt. */
.c-kopregel-tab.is-ghost{ color:#B9B4AA; }
.c-kopregel-tab.is-ghost .c-kopregel-tab-tel{ color:#B9B4AA; }

/* de gefilterde lijst: één rij-anatomie voor alle zeven soorten. */
.c-herkomstlijst{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-herkomstrij{
  background:var(--wit,#fff);
  border:1px solid var(--line,#DDD8CF);
  border-radius:10px;
  padding:11px 13px;
}
.c-herkomstrij-top{ display:flex; align-items:center; gap:9px; }
.c-herkomstrij-titel{
  flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:var(--gew-vet,600);
  color:var(--ink,#2A2A28); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.c-herkomstrij-datum{ flex:none; font-size:11.5px; color:var(--ink-soft,#6B6862); }
.c-herkomstrij-meta{ display:flex; align-items:center; gap:9px; margin-top:5px; padding-left:18px; }
.c-herkomstrij-wie{ font-size:11.5px; color:var(--ink-soft,#6B6862); }
.c-herkomstrij-herk{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--petrol-deep,#0E4F4B);
}
.c-herkomstrij-herk:hover{ text-decoration:underline; }
.c-gk-standteller{ margin-left:auto; }

@media (max-width:699px){
  .c-herkomstpill{ flex-wrap:wrap; row-gap:6px; border-radius:12px; }
  .c-herkomstpill-naar{ flex:1 1 100%; }
}

/* De pill in de kopregel krijgt een eigen volle regel tussen de titel en de
   tab-strip (frame 66f): eerst waaraan de lijst hangt, dan pas de tabs. */
.c-kopregel .c-herkomstpill{ flex:0 0 100%; width:100%; margin:var(--sp-5) 0 var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════════
   R92 · frame 76g — getypeerd toevoegen + het persoon-detailpaneel
   ───────────────────────────────────────────────────────────────────
   Twee stille labels naast elkaar: het type staat vast vóór je typt, dus de
   app hoeft achteraf niet te vragen of het een groep of een persoon was. */
/* De twee labels staan op ÉÉN regel: .c-toevoeg is app-breed block/100%, dus
   binnen deze rij zetten we ze terug naar inhoudsbreedte. Anders vullen ze elk
   de volle kolom, vallen ze onder elkaar en groeit het kwadrant met een lege
   strook mee. Het scheidingsstreepje zit in de gap tussen beide. */
.c-map-toevoegrij{ display:flex; align-items:baseline; gap:14px; flex-wrap:nowrap; }
.c-map-toevoegrij .c-toevoeg{
  display:inline-block; width:auto; flex:0 1 auto; min-width:0;
  padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.c-map-toevoeg-persoon{ position:relative; }
.c-map-toevoeg-persoon::before{
  content:''; position:absolute; left:-8px; top:2px; bottom:2px;
  width:1px; background:var(--line,#DDD8CF);
}

/* het persoon-paneel: zelfde ritme als de groep, andere blokken */
.c-gk-persoonmeta{ font-size:11.5px; color:var(--ink-soft,#6B6862); margin-bottom:var(--sp-5); }
.c-gk-rollijst{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-4); }
.c-gk-rolleeg{ font-size:12px; color:var(--ink-mist,#8A867E); padding:2px 0; }
.c-gk-hoortbij{ font-size:12px; color:var(--ink-soft,#6B6862); margin-bottom:var(--sp-6); }
.c-gk-hoortbij-l{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12px; font-weight:var(--gew-vet,600); color:var(--petrol-deep,#0E4F4B);
}
.c-gk-hoortbij-l:hover{ text-decoration:underline; }
.c-gk-quote-spring{ background:none; border:0; padding:0; cursor:pointer; font:inherit; text-align:left; }
.c-gk-quote-spring:hover{ text-decoration:underline; }

/* 76g-vervolg — "+ rol toekennen" onder de rol-lijst van het persoon-paneel.
   Volgt het globale ghost-toevoeg-patroon (R88), compact in het paneel. */
.c-gk-rolplus{ margin:2px 0 10px; padding:2px 0; }

/* "Je plekken zijn bezet" — de scheiding tussen de twee uitwegen: een plek
   vrijmaken (boven) of er een licentie bij nemen (onder). Een rustige of-regel
   met een haarlijn links en rechts, zodat het geen derde knop lijkt. */
.c-vol-of{ display:flex; align-items:center; gap:10px; margin:16px 0 10px;
  font-size:11px; color:var(--ink-mist,#8A867E); text-transform:lowercase; }
.c-vol-of::before, .c-vol-of::after{ content:''; flex:1; height:1px; background:var(--line-zacht,#EFEBE3); }

/* ═══════════════════════════════════════════════════════════════════
   R96 · portfolio-modus — de keuze, de start, de schil en de tijdlijn
   ───────────────────────────────────────────────────────────────────
   Alleen de schil wisselt van kleur. Canvas, kaarten, tekst-, status- en
   knoptrap blijven identiek, en terracotta blijft exclusief voor handelen:
   je voelt het niveau, niet een ander product.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --pf-schil:#143F54;        /* de zijmenu-kleur van de portfolio-modus */
  --pf-accent:#8CC0D8;       /* de mint-rol op blauw */
  --pf-dot:#4E8CA8;          /* het niveau-teken */
  --pf-dot-vlak:rgba(78,140,168,.14);

  /* De lens-trap (97j). Onmiskenbaar petrol, in drie stappen, en nooit onder
     .2 dekking: daaronder vervlakt de tint tot grijs op het #EDE9E1-canvas en
     lijkt een gekleurde kaart een ongekleurde. Wit op de donkerste stap. */
  --pf-lens-1:rgba(18,113,108,.24);
  --pf-lens-2:rgba(18,113,108,.55);
  --pf-lens-3:#0E4F4B;
}

/* ── 96a · de soort-keuze in de startkaart ── */
.wk-weg-keuze{ display:flex; flex-direction:column; gap:10px; text-align:left; cursor:default; }
.wk-soortkeuze{ display:flex; flex-direction:column; gap:8px; }
.wk-soort{
  display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-veld);
  background:var(--wit); cursor:pointer; text-align:left;
}
/* gekozen = 1.5px petrol + tint; de rand groeit niet, hij vervangt — anders
   springt de rij 1px als je wisselt. */
.wk-soort.is-gekozen{ border:1.5px solid var(--petrol); background:rgba(18,113,108,.06); padding:9.5px 11.5px; }
.wk-soort-dot{ flex:none; width:9px; height:9px; border-radius:50%; margin-top:5px; background:var(--petrol); }
.wk-soort-dot[data-n="portfolio"]{ background:var(--pf-dot); }
.wk-soort-tekst{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wk-soort-naam{ font-size:13px; font-weight:var(--gew-vet); color:var(--ink); }
.wk-soort-uitleg{ font-size:12px; color:var(--ink-soft); }
.wk-vb-icoon[data-tint="niveau"]{ background:var(--pf-dot-vlak); color:#143F54; }

/* ── 96b · de portfolio-start ── */
/* De startkaart is smaller dan de wrap die voor de landing gemaakt is; zonder
   deze regel plakt hij tegen de linkerrand daarvan en staat hij 120px links van
   het midden van het scherm. */
.pf-startkaart{ max-width:520px; margin-inline:auto; text-align:left; }
.pf-start-over{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.1em;
  text-transform:uppercase; color:var(--pf-dot); }
.pf-start-titel{ font-family:var(--font-kop); font-weight:600; font-size:21px;
  color:var(--petrol-dark); margin:6px 0 4px; }
.pf-start-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
.pf-start-label{ display:block; font-size:var(--t-meta); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.pf-start-invoer{ width:100%; box-sizing:border-box; padding:10px 12px; font-size:13px;
  border:1px solid var(--line-sterk); border-radius:var(--r-veld); background:var(--wit); }
.pf-start-invoer:focus{ outline:none; border-color:var(--petrol); }
.pf-start-invoer.is-leeg{ border-color:var(--rood); }
.pf-start-meta{ margin-top:16px; padding:12px 14px; background:var(--cream2);
  border-radius:var(--r-veld); display:flex; flex-direction:column; gap:4px; }
.pf-start-meta-vraag{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-start-meta-uitleg{ font-size:12px; color:var(--ink-soft); line-height:1.5; }
.pf-start-voet{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:12px; }
.pf-start-terug{ border:0; background:none; font-size:12.5px; color:var(--petrol-deep); cursor:pointer; padding:0; }

/* ── 95a/95b · de schil ── */
body.portfolio-modus #zijmenu{ background:var(--pf-schil); --petrol-light:var(--pf-accent); }
body.portfolio-modus #rail{ background:var(--pf-schil); --petrol-light:var(--pf-accent); }
/* Het zijmenu is app-anatomie: de kop, de navigatie en de feedback-ingang
   staan hier in dezelfde maten als in het changeplan — alleen de grond is
   portfolio-blauw. De houder telt niet mee in de opmaak (display:contents),
   zodat .c-merk, .c-traject en .c-nav gewoon kinderen van .c-zijmenu zijn en
   elke regel van de app vanzelf klopt: de scheidingslijn loopt weer van rand
   tot rand, de opslagregel blijft één stille regel en de padding wordt niet
   twee keer geteld. */
.pf-zij{ display:contents; }
.pf-zij > .c-feedback-ingang{ margin-top:auto; }
.pf-terug{ margin-top:auto; border:0; background:none; text-align:left; padding:8px 12px;
  color:var(--pf-accent); font-size:12.5px; cursor:pointer; }

/* ── 95a · de tijdlijn ── */
/* Geen eigen marge: .werkvlak-inhoud draagt --pad-werkvlak, en dat is precies
   de marge die elk ander scherm van de app heeft. Een tweede laag eroverheen
   duwde de portfolio-schermen naar binnen en liet ze anders staan dan de rest. */
.pf-werk{ padding:0; }
.pf-kop{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.pf-titel{ font-family:var(--font-kop); font-weight:600; font-size:21px; color:var(--petrol-dark); margin:0; }
.pf-titel-sub{ font-size:13px; color:var(--ink-soft); }
.pf-tel{ margin-left:auto; font-size:11px; color:var(--ink-soft); }
.pf-kaart{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-veld); overflow:hidden; }
/* Eén gedeelde horizontale scroll voor de as én de balken: scrollden ze apart,
   dan schoof de as weg van de balken eronder en klopte het beeld niet meer.
   De naamkolom staat buiten die scroll en blijft dus altijd leesbaar. */
.pf-grid{ display:flex; align-items:stretch; }
/* De namenkolom is 260px: op 210 brak "in afweging · eigen registratie · jun
   2026 – dec 2026" over twee regels, en dan schuift de naamcel uit de rij
   waar zijn balk in staat. Op een tijdlijn is dat fataal — de rijen moeten
   links en rechts op dezelfde hoogte blijven. */
.pf-namen{ flex:0 0 260px; min-width:0; border-right:1px solid var(--line-zacht); }
.pf-scroll{ flex:1 1 auto; min-width:0; overflow-x:auto; }
.pf-binnen{ position:relative; }
.pf-as{ border-bottom:1px solid var(--line-zacht); background:var(--cream2); }
.pf-as-binnen{ position:relative; height:26px; }
.pf-namen-kop{ height:26px; border-bottom:1px solid var(--line-zacht); background:var(--cream2); }
/* 46px in plaats van 38: sinds de stiltelezing erbij staat ("lopend · jul 2026
   – okt 2026 · laatst gehoord 3 sep") past de metaregel niet meer op één regel,
   en afkappen midden in een datum is erger dan een rij die iets hoger is. Twee
   regels is het maximum — dáárboven zou de rij de balk ernaast weer verlaten.
   Links en rechts groeien samen mee; dat is de invariant van dit beeld. */
.pf-naamcel{ position:relative; height:46px; display:flex; flex-direction:column;
  justify-content:center; gap:1px;
  padding:0 12px; border-bottom:1px solid var(--line-zacht); box-sizing:border-box;
  overflow:hidden; }
.pf-naamcel .pf-rij-meta{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.25; }
.pf-naamcel:last-child{ border-bottom:0; }
.pf-spoorcel{ height:46px; position:relative; border-bottom:1px solid var(--line-zacht); box-sizing:border-box; }
.pf-spoorcel:last-child{ border-bottom:0; }
.pf-as-cel{ position:absolute; top:0; height:26px; line-height:26px; font-size:9.5px;
  text-align:center; color:var(--ink-mist); border-left:1px solid #E0DBD1; box-sizing:border-box;
  /* De cel is 32px en de jaarmerker draagt maand plus jaar. In het Nederlands
     en het Engels past "jan '27" daar net in; het Franse "janv '27" niet, en
     dat viel op een tweede regel die onder de as in de grafiek hing. De cel
     staat absoluut met line-height gelijk aan zijn hoogte, dus nowrap houdt
     het label op de as en laat het symmetrisch een paar pixels overlopen. */
  white-space:nowrap; }
/* de as vervaagt naar de randen: wat ver weg ligt is grof ingeschat, en het
   beeld hoort geen precisie te suggereren die er niet is. */
.pf-as-cel[data-korrel="kwartaal"]{ color:#A5A198; }
.pf-as-cel[data-korrel="halfjaar"],
.pf-as-cel[data-korrel="jaar"]{ color:var(--line-ghost); }
.pf-vandaag{ position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--rood); }
.pf-vandaag-lab{ position:absolute; top:1px; left:3px; font-size:9px; font-weight:700;
  letter-spacing:.06em; color:var(--rood); white-space:nowrap; }
.pf-rijen{ display:flex; flex-direction:column; }
.pf-leeg{ margin:0; padding:14px; font-size:12.5px; color:var(--ink-soft); }
.pf-rij{ display:flex; align-items:center; gap:12px; padding:8px 12px;
  border-bottom:1px solid var(--line-zacht); }
.pf-rij:last-of-type{ border-bottom:0; }
.pf-rij-naam{ flex:0 0 210px; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pf-rij-titel{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-rij-meta{ font-size:11px; color:var(--ink-soft); }
.pf-spoor{ flex:1 1 auto; min-width:0; overflow-x:auto; }
.pf-spoor-binnen{ position:relative; height:16px; }
/* status = vulling, nooit een kleur die oordeelt: afgesloten is grijs omdat
   het klaar is, niet omdat het slecht ging. */
.pf-balk{ position:absolute; top:3px; height:10px; border-radius:5px; box-sizing:border-box; }
/* De merken staan óp de balk, niet eronder. */
.pf-merk{ z-index:3; }
.pf-balk[data-stand="lopend"]{ background:var(--petrol); }
.pf-balk[data-stand="komend"]{ background:var(--wit); border:1.5px solid var(--petrol); }
.pf-balk[data-stand="afgesloten"]{ background:var(--rest); }
.pf-balk[data-stand="nooitgestart"]{ background:none; border:1.5px dashed var(--line-ghost); }
.pf-rij-weg{ flex:none; border:0; background:none; color:var(--ink-mist); font-size:14px;
  cursor:pointer; padding:0 2px; line-height:1; }
.pf-rij-weg:hover{ color:var(--rood); }
.pf-ghost{ padding:8px 12px; border-top:1px solid var(--line-zacht); }
.pf-ghost-invoer{ width:100%; box-sizing:border-box; border:0; background:none;
  font-size:13px; color:var(--ink); padding:4px 0; }
.pf-ghost-invoer::placeholder{ color:var(--line-ghost); }
.pf-ghost-invoer:focus{ outline:none; }

/* ── 96c/95c · mobiel ── */
@media (max-width:700px){
  .wk-soort{ min-height:44px; }
  .pf-werk{ padding:0; }
  .pf-rij{ flex-wrap:wrap; min-height:44px; }
  .pf-rij-naam{ flex:1 1 100%; }
  .pf-spoor{ flex:1 1 100%; }
  .pf-start-voet{ flex-direction:row-reverse; }
  .pf-start-ga{ flex:1 1 auto; }
}
.pf-naamcel-rij1{ display:flex; align-items:center; gap:6px; }
.pf-naamcel-rij1 .pf-rij-titel{ flex:1 1 auto; min-width:0; }

/* ═══════════════════════════════════════════════════════════════════════
   R97 · portfolio-modus — Organisatie: structuur en doelgroepen
   ───────────────────────────────────────────────────────────────────────
   Dezelfde trap als de rest van de app: Fraunces alleen voor de titel,
   ink/soft/mist voor de tekst, petrol voor wat je aanwijst. Terracotta komt
   hier niet voor — er is niets te handelen, alleen te noteren.
   ═══════════════════════════════════════════════════════════════════════ */
.pf-org .pf-kop{ flex-wrap:wrap; gap:12px; align-items:center; }
.pf-org-zoek{ position:relative; flex:1 1 240px; max-width:340px; }
/* Een input draagt een eigen minimumbreedte (de browser-default `size`); zonder
   min-width:0 kan de actie-groep niet krimpen en slaat de kopregel om terwijl er
   nog ruimte is. */
.pf-org-zoekveld{ width:100%; min-width:0; box-sizing:border-box; padding:7px 11px; font-size:12.5px;
  font-family:inherit; color:var(--ink); background:var(--cream);
  border:1px solid var(--line); border-radius:var(--r-veld); }
.pf-org-zoekveld:focus{ outline:none; border-color:var(--petrol); }
.pf-org-zoekveld::placeholder{ color:var(--ink-mist); }
.pf-org-import{ border:0; background:none; font-size:12.5px; color:var(--petrol-deep);
  cursor:pointer; padding:0; }

/* de suggestielijst dient twee plekken: het zoekveld en de doelgroep-ghost */
.pf-org-suggesties{ position:absolute; z-index:20; left:0; right:0; top:100%; margin-top:4px;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-veld);
  box-shadow:0 10px 26px rgba(10,57,54,.14); overflow:hidden; }
.pf-org-sug{ display:flex; width:100%; align-items:baseline; justify-content:space-between; gap:10px;
  padding:7px 11px; border:0; background:none; text-align:left; cursor:pointer; }
.pf-org-sug:hover{ background:var(--cream2); }
.pf-org-sug-naam{ font-size:12.5px; color:var(--ink); }
.pf-org-sug-soort{ font-size:10.5px; color:var(--ink-mist); flex:none; }

.pf-org-tabs{ display:flex; gap:18px; border-bottom:1px solid var(--line-zacht); margin-bottom:16px; }
.pf-org-tab{ border:0; background:none; padding:7px 0 8px; font-size:13px; cursor:pointer;
  color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px; }
.pf-org-tab.is-actief{ color:var(--petrol-deep); font-weight:var(--gew-vet);
  border-bottom-color:var(--petrol-deep); }

/* Het paneel hoort náást de kolom te staan, niet erin. Stond het erin, dan
   kromp de registerlijst 340px zodra je een rij aanklikte — dan lijkt het scherm
   ineens een bredere rechtermarge te hebben terwijl er alleen iets naast is
   komen staan. De regel van het ontwerp is dat de kolom niet meegroeit maar ook
   niet meekrimpt: op een breed scherm groeit alleen het canvas, en dáár past het
   paneel. Is er te weinig ruimte, dan mag de lijst alsnog inleveren. */
.werkvlak-inhoud > .pf-org{ max-width:none; }
.pf-org-vlak{ display:flex; align-items:flex-start; gap:20px; }
.pf-org-hoofd{ flex:1 1 auto; min-width:0; max-width:var(--kolom,1200px); }

/* ── 97a · het organogram ──────────────────────────────────────────────
   De opbouw van de dev-aanzet: één transformlaag over een geneste boom,
   verbindingslijnen als pseudo-elementen. De rail onder een ouder loopt van het
   midden van het eerste tot het midden van het laatste kind — de stukjes
   daarbuiten worden met canvas-kleur weggeschilderd, wat goedkoper is dan hem
   per tak op maat tekenen. */
.pf-org-canvas{ position:relative; }
/* Het venster scrolt in beide richtingen en neemt de hoogte die er is (de JS
   meet hem; de clamp is het vangnet). Eerder stond hier overflow:hidden met een
   translate op de wereld: dan is er geen scrolbalk, en alles wat links of boven
   buiten beeld valt is alleen nog met slepen terug te halen. */
.pf-org-viewport{ position:relative; overflow:auto; cursor:grab;
  height:clamp(360px, 68vh, 900px); background:var(--canvas);
  border:1px solid var(--line-zacht); border-radius:var(--r-veld);
  overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:var(--line-ghost) transparent; }
.pf-org-viewport.is-pannen{ cursor:grabbing; }
/* De balken staan er permanent zodra er iets buiten beeld valt — een overlay-
   balk die pas bij scrollen verschijnt, vertelt niet dat er meer is. */
.pf-org-viewport::-webkit-scrollbar{ width:10px; height:10px; }
.pf-org-viewport::-webkit-scrollbar-track{ background:transparent; }
.pf-org-viewport::-webkit-scrollbar-thumb{ background:var(--line-ghost);
  border:3px solid var(--canvas); border-radius:5px; }
.pf-org-viewport::-webkit-scrollbar-thumb:hover{ background:var(--ink-mist); }
.pf-org-viewport::-webkit-scrollbar-corner{ background:transparent; }
/* Het doek draagt de geschaalde maat van de boom — een transform verandert de
   opmaak niet, dus zonder deze laag valt er niets te scrollen. */
.pf-org-doek{ position:relative; min-width:100%; min-height:100%; }
.pf-org-wereld{ position:absolute; top:0; left:0; width:max-content;
  transform-origin:0 0; padding:28px 36px; }

/* De zoomregel staat linksonder over het canvas: rechtsonder woont de FAB, en
   die dekte de knoppen af. */
.pf-org-zoomrij{ position:absolute; left:12px; bottom:12px; display:flex;
  align-items:center; gap:2px; background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-pil); padding:2px; box-shadow:0 2px 8px rgba(10,57,54,.08); }
.pf-org-zoomknop{ border:0; background:none; cursor:pointer; font:inherit;
  font-size:13px; line-height:1; color:var(--petrol-deep); border-radius:50%;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.pf-org-zoomknop:hover{ background:var(--cream2); }
.pf-org-zoomstand{ font-size:10.5px; color:var(--ink-mist); min-width:34px;
  text-align:center; font-variant-numeric:tabular-nums; }

.pf-boom, .pf-boom ul{ display:flex; align-items:flex-start; gap:24px;
  list-style:none; margin:0; padding:0; }
.pf-boom{ flex-direction:row; justify-content:center; }
.pf-boom li{ display:flex; flex-direction:column; align-items:center; position:relative; }

/* het verticale lijntje boven elke kaart, behalve de wortel */
.pf-boom li:not(.is-wortel)::before{ content:''; width:1px; height:15px; background:var(--line); }
/* de verzamellijn op de bovenrand van een kinderrij, met de druppel naar de ouder */
.pf-boom li > ul{ margin-top:15px; position:relative; }
.pf-boom li > ul::before{ content:''; position:absolute; top:0; left:0; right:0;
  height:1px; background:var(--line); }
.pf-boom li > ul::after{ content:''; position:absolute; top:-15px; left:50%;
  width:1px; height:15px; background:var(--line); }
/* de uiteinden van de rail wegschilderen tot het midden van eerste en laatste kind */
/* Eén kind: geen verzamellijn. Zie de opmerking in portfolio-organisatie.js —
   de twee maskers zouden op hetzelfde element botsen. */
.pf-boom li > ul.is-alleen::before{ display:none; }
.pf-boom li > ul > li:first-child::after{ content:''; position:absolute; top:0; height:1px;
  background:var(--canvas); left:0; right:50%; }
.pf-boom li > ul > li:last-child::after{ content:''; position:absolute; top:0; height:1px;
  background:var(--canvas); left:50%; right:0; }

/* ── de eenheid-kaart ─────────────────────────────────────────────────── */
.pf-eenheid{ width:186px; box-sizing:border-box; background:var(--cream);
  border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  cursor:pointer; text-align:left; font:inherit; display:block; }
.pf-eenheid:hover{ border-color:var(--line-ghost); }
.pf-eenheid:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }
.pf-eenheid[aria-pressed="true"]{ border:1.5px solid var(--petrol);
  box-shadow:0 8px 22px rgba(10,57,54,.10); padding:8.5px 11.5px; }
.pf-eenheid.is-doel{ border-color:var(--petrol-deep); background:var(--cream2); }
.pf-eenheid.is-sleep{ opacity:.5; }
.pf-eenheid-naam{ display:block; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-eenheid-ap{ display:block; font-size:10.5px; color:var(--ink-mist); margin-top:1px; }
.pf-teller{ display:inline-block; font-size:10.5px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); margin-top:4px; background:none; border:0; padding:0;
  cursor:pointer; font-family:inherit; }
/* de wortel — de organisatie — staat smaller en gecentreerd */
.pf-eenheid.is-organisatie{ width:auto; min-width:150px; text-align:center; }
.pf-eenheid.is-organisatie .pf-eenheid-ap{ margin-top:2px; }

/* een vergrijsde tak dempt in zijn geheel mee (C2.3) */
.pf-boom li.is-ongebruikt{ opacity:.45; }

/* ingeklapt: de kinderen weg, de teller draagt het pijltje */
.pf-boom li.is-dicht > ul{ display:none; }
.pf-boom li.is-dicht > .pf-eenheid .pf-teller::after{ content:' ▾'; }
.pf-boom li:not(.is-dicht) > .pf-eenheid .pf-teller::after{ content:' ▴'; }

/* ── de stafpositie ────────────────────────────────────────────────────
   Zijdelings aan de daallijn, tussen de kaart en de kinderrij — de plek die elk
   organogram ervoor gebruikt. De stub is gestippeld: een adviesrelatie is geen
   gezagslijn, en dat verschil hoort in de lijn te zitten en niet alleen in een
   woord. De kaart is een slag kleiner, want ze stuurt de tak niet aan. */
/* De laag loopt over de volle breedte van de tak; de daallijn staat op de helft
   (waar de ouderkaart gecentreerd staat) en de stafkaarten hangen er rechts van.
   Ze stonden eerder allebei absoluut op top:50% — twee adviesgroepen tekenden
   dan over elkaar heen. Nu staan ze in de gewone stroom, dus groeit de laag mee
   en loopt de lijn vanzelf van boven naar beneden langs alle kaarten. */
.pf-boom .pf-staf-laag{ position:relative; align-self:stretch;
  padding:6px 0 6px calc(50% + 26px); }
.pf-boom .pf-staf-laag::before{ content:''; position:absolute; left:50%; top:0;
  bottom:0; width:1px; background:var(--line); }
.pf-boom .pf-staf{ position:relative; }
.pf-boom .pf-staf + .pf-staf{ margin-top:8px; }
.pf-boom .pf-staf::before{ content:''; position:absolute; left:-26px; top:50%;
  width:26px; height:0; background:none; border-top:1px dashed var(--line); }
.pf-eenheid.is-staf{ border-style:dashed; padding:7px 10px; }
.pf-eenheid.is-staf .pf-eenheid-naam{ font-size:12px; }
.pf-eenheid.is-staf[aria-pressed="true"]{ border-style:solid; padding:6.5px 9.5px; }


/* ── de onderste laag: onder elkaar ────────────────────────────────────
   Waar niets meer vertakt, stapelen de eenheden. Ze hangen aan één daallijn
   links, met een korte stub per kaart — smal genoeg om een organogram van
   twintig afdelingen leesbaar te houden, en nog altijd duidelijk één tak. */
.pf-boom ul.pf-stapel{ flex-direction:column; align-items:stretch; gap:6px;
  margin-top:15px; padding-left:16px; position:relative; align-self:center; }
.pf-boom ul.pf-stapel::before{ content:''; position:absolute; left:0; top:0;
  bottom:calc(50% - 1px); width:1px; height:auto; right:auto; background:var(--line); }
.pf-boom ul.pf-stapel::after{ content:''; position:absolute; left:0; top:-15px;
  width:1px; height:15px; background:var(--line); }
.pf-boom ul.pf-stapel > li{ flex-direction:column; align-items:stretch; position:relative; }
.pf-boom ul.pf-stapel > li::before{ content:''; position:absolute; left:-16px; top:50%;
  width:16px; height:1px; background:var(--line); }
.pf-boom ul.pf-stapel > li::after{ display:none; }
.pf-boom ul.pf-stapel .pf-eenheid{ width:186px; }

/* ── de ghost-regels: geen "+"-knoppen ────────────────────────────────── */
input.pf-ghost{ font-family:inherit; font-size:12px; color:var(--ink);
  background:none; border:0; border-radius:0; padding:2px 0 0 2px; width:100%; }
input.pf-ghost::placeholder{ color:var(--line-ghost); }
input.pf-ghost:focus{ outline:none; }
input.pf-ghost-canvas{ display:block; width:220px; margin-top:22px; font-size:13px; }
.pf-eenheid-invoer{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12.5px;
  font-weight:var(--gew-vet); color:var(--ink); background:var(--wit);
  border:1.5px solid var(--petrol); border-radius:8px; padding:4px 7px; }
.pf-eenheid-invoer:focus{ outline:none; }

/* ── 97c · de doelgroepen ─────────────────────────────────────────────── */
.pf-org-uitleg{ margin:0 0 12px; font-size:12px; color:var(--ink-soft); }
.pf-org-filters{ display:flex; gap:8px; margin-bottom:10px; }
.pf-org-filter{ font-family:inherit; font-size:11.5px; color:var(--ink-soft);
  background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:4px 9px; }
.pf-grijen{ border:1px solid var(--line); border-radius:var(--r-veld);
  background:var(--cream); overflow:hidden; }
.pf-grij{ display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-bottom:1px solid var(--line-zacht); cursor:pointer; }
.pf-grij:last-child{ border-bottom:0; }
.pf-grij.is-gekozen{ background:var(--cream2); box-shadow:inset 2px 0 0 var(--petrol); }
.pf-grij-links{ flex:1 1 auto; min-width:0; }
.pf-grij-naam{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-grij-ap{ font-size:11px; color:var(--ink-soft); margin-top:1px;
  display:flex; align-items:center; gap:5px; }
.pf-grij-ap.is-leeg{ color:var(--ink-mist); }
.pf-grij-meta{ flex:none; display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--ink-mist); text-align:right; }
.pf-grij-plaats{ color:var(--ink-mist); }
.pf-org-ghost{ position:relative; border:1px solid var(--line); border-top:0;
  border-radius:0 0 var(--r-veld) var(--r-veld); background:var(--cream); }

/* Een gat is even zichtbaar als een vulling: een open ring, nooit amber of rood. */
.pf-ghostring{ display:inline-block; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--line-ghost); flex:none; }

/* ── 97b · het paneel ─────────────────────────────────────────────────── */
/* Het paneel blijft staan terwijl de lijst eronder doorloopt. Het vertelt over
   de eenheid die je aanwijst, en bij een register van vijftig rijen stond het
   allang boven het scherm tegen de tijd dat je bij de rij was — dan moet je
   terug omhoog om te lezen waar je net op klikte. Sticky in de scrollende
   werkvlak-inhoud, met een eigen scrol als het paneel zelf te lang wordt. */
/* Géén overscroll-behavior:contain. Het paneel is sticky en kapt zichzelf af op
   de vensterhoogte, dus het scrollt zelf zodra zijn inhoud langer is. Met
   `contain` stopte alles zodra dat einde bereikt was: de muis stond dan in een
   dode zone waar de pagina niet meer bewoog, terwijl er nog inhoud onder zat.

   De valstrik bij het meten: één wheel-tick keten ook zónder contain nooit door
   naar de ouder — pas de vólgende tick doet dat. Wie met één tick test ziet
   geen verschil en concludeert dat contain onschuldig is. Met drie ticks staat
   de pagina mét contain nog op 0 en zonder op haar maximum. */
.pf-paneel{ flex:0 0 320px; align-self:flex-start; position:sticky; top:0;
  max-height:calc(100dvh - 150px); overflow-y:auto;
  background:var(--cream);
  border:1px solid var(--line); border-radius:var(--r-veld); padding:14px 16px 18px; }
.pf-paneel-kop{ display:flex; align-items:flex-start; gap:10px; }
.pf-paneel-titel{ flex:1 1 auto; font-family:var(--font-kop); font-weight:600;
  font-size:16px; color:var(--petrol-dark); line-height:1.3; }
.pf-paneel-sluit{ flex:none; border:0; background:none; color:var(--ink-mist);
  font-size:13px; cursor:pointer; padding:2px 4px; }
.pf-paneel-meta{ display:flex; align-items:center; gap:6px; margin-top:3px;
  font-size:11px; color:var(--ink-mist); }
.pf-paneel-meer{ margin-left:auto; border:0; background:none; color:var(--ink-mist);
  font-size:14px; line-height:1; cursor:pointer; padding:2px 6px; }
.pf-paneel-blok{ margin-top:18px; }
.pf-paneel-label{ font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mist); }
.pf-paneel-sublabel{ font-size:11px; color:var(--ink-mist); margin-top:2px; line-height:1.45; }
.pf-ap{ display:flex; align-items:flex-start; gap:7px; margin-top:6px; }
.pf-ap-velden{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-ap-invoer{ width:100%; box-sizing:border-box; border:0; background:none;
  font-family:inherit; color:var(--ink); padding:2px 0; }
.pf-ap-invoer:focus{ outline:none; border-bottom:1px solid var(--petrol); }
.pf-ap-invoer::placeholder{ color:var(--line-ghost); }
.pf-ap-naam{ font-size:12.5px; font-weight:var(--gew-vet); }
.pf-ap-sub{ font-size:11px; color:var(--ink-soft); }
.pf-ap.is-leeg .pf-ghostring{ margin-top:5px; }
.pf-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.pf-chip{ display:inline-flex; align-items:center; gap:4px; background:var(--cream2);
  border:1px solid var(--line); border-radius:999px; padding:2px 4px 2px 9px; }
.pf-chip-naam{ border:0; background:none; font-family:inherit; font-size:11px;
  color:var(--petrol-deep); cursor:pointer; padding:0; }
.pf-chip-weg{ border:0; background:none; color:var(--ink-mist); font-size:10px;
  cursor:pointer; padding:1px 3px; }
.pf-chip-extern{ padding:2px 8px; font-size:10.5px; color:var(--ink-soft); }
.pf-org-breed{ font-size:11.5px; color:var(--ink-soft); }
.pf-chip-kies{ margin-top:8px; font-family:inherit; font-size:11.5px; color:var(--ink-soft);
  background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-veld); padding:4px 8px; }
.pf-obs{ display:flex; flex-direction:column; gap:9px; margin-top:9px; }
.pf-obs-rij{ position:relative; padding-right:18px; }
.pf-obs-tekst{ font-size:12px; color:var(--ink); line-height:1.5; }
.pf-obs-invoer{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12px;
  color:var(--ink); background:var(--wit); border:1px solid var(--petrol);
  border-radius:var(--r-veld); padding:6px 8px; min-height:56px; }
.pf-obs-invoer:focus{ outline:none; }
.pf-obs-meta{ font-size:10.5px; color:var(--ink-mist); margin-top:2px; }
.pf-obs-weg{ position:absolute; right:0; top:0; border:0; background:none;
  color:var(--ink-mist); font-size:10px; cursor:pointer; padding:2px; }
.pf-obs-ghost{ margin-top:10px; font-size:12px; }

/* ── 97d · mobiel ──────────────────────────────────────────────────────
   Het organogram wordt een lijst: dezelfde data, dezelfde tellers, inspringen
   per niveau. Pannen over een tekening op een klein scherm verliest het van een
   lijst die je duimt — de tekening blijft desktop en tablet. */
@media (max-width:700px){
  .pf-org .pf-kop{ gap:8px; }
  .pf-org-zoek{ flex:1 1 100%; max-width:none; order:3; }
  /* align-items:flex-start staat in de rij-stand voor "paneel niet uitrekken";
     in de kolom-stand knijpt datzelfde de breedte dicht tot de inhoud. */
  .pf-org-vlak{ flex-direction:column; align-items:stretch; }
  /* op de telefoon staat het paneel ónder de lijst, niet ernaast: daar valt
     niets vast te zetten */
  .pf-paneel{ flex:1 1 auto; width:100%; box-sizing:border-box;
    position:static; max-height:none; overflow:visible; }

  .pf-org-viewport{ height:auto !important; overflow:visible; cursor:default;
    border:0; border-radius:0; background:none; }
  .pf-org-doek{ width:auto !important; height:auto !important; }
  .pf-org-wereld{ position:static; width:auto; padding:0; margin-left:0 !important;
    transform:none !important; }
  .pf-org-zoomrij{ display:none; }
  .pf-boom, .pf-boom ul{ flex-direction:column; align-items:stretch; gap:0; }
  .pf-boom li{ align-items:stretch; }
  .pf-boom li::before, .pf-boom li::after,
  .pf-boom li > ul::before, .pf-boom li > ul::after{ display:none !important; }
  /* elk niveau springt 16px in — ook de kinderrij van de wortel, die op de
     desktop juist horizontaal uitwaaiert */
  .pf-boom li > ul{ margin-top:0; margin-left:16px; }
  .pf-boom ul.pf-stapel{ padding-left:0; gap:0; align-self:stretch; }
  .pf-boom ul.pf-stapel > li::before{ display:none; }
  .pf-boom ul.pf-stapel .pf-eenheid{ width:100%; }
  /* op de telefoon is het een lijst: geen laag-lijn, gewoon een rij met "adviseert" */
  .pf-boom .pf-staf-laag{ width:auto; min-height:0; background:none; margin-left:16px; }
  .pf-boom .pf-staf{ position:static; transform:none; padding-left:0; }
  .pf-boom .pf-staf::before{ display:none; }
  .pf-eenheid.is-staf{ width:100%; border-style:none; }
  .pf-eenheid{ width:100%; min-height:44px;
    border:0; border-radius:0; background:none; padding:10px 10px;
    border-bottom:1px solid var(--line-zacht); }
  .pf-eenheid[aria-pressed="true"]{ border:0;
    border-bottom:1px solid var(--line-zacht); background:var(--cream2);
    box-shadow:inset 2px 0 0 var(--petrol); padding:10px 10px; }
  .pf-eenheid.is-organisatie{ width:100%; text-align:left; }
  .pf-teller{ min-height:32px; line-height:32px; }
  input.pf-ghost{ padding:10px 10px; min-height:44px; }
  input.pf-ghost-canvas{ width:100%; margin-top:0; }
  .pf-grij{ min-height:44px; flex-wrap:wrap; }
  .pf-grij-meta{ flex:1 1 100%; text-align:left; justify-content:flex-start; }
}

/* ── gewicht tegen de globale veldstijl ─────────────────────────────────
   componenten.css geeft elk `input[type="text"]` een wit vlak met een randje.
   Dat weegt (element + attribuut) zwaarder dan één klasse, dus de ghost-velden
   van de portfolio-modus kregen stilletjes toch een kader — precies het witte
   invoervlak dat sinds R94 huisregel is om wég te laten. epic6.css laadt als
   laatste, dus één element-kwalificatie is genoeg om het terug te draaien.
   Dit raakt óók de ghost-rij van de tijdlijn (R96). */
input.pf-ghost-invoer{ border:0; border-radius:0; background:none; width:100%; padding:4px 0; }
input.pf-obs-ghost{ padding:4px 0; font-size:12px; }
input.pf-ap-invoer{ border:0; border-radius:0; background:none; padding:2px 0; }
input.pf-ap-invoer:focus{ border-bottom:1px solid var(--petrol); }
input.pf-eenheid-invoer{ background:var(--wit); border:1.5px solid var(--petrol);
  border-radius:8px; padding:4px 7px; }
textarea.pf-obs-invoer{ border:1px solid var(--petrol); border-radius:var(--r-veld); padding:6px 8px; }
select.pf-chip-kies{ width:auto; background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:4px 8px; font-size:11.5px; }
select.pf-org-filter{ width:auto; background:var(--cream); border:1px solid var(--line);
  border-radius:999px; padding:4px 9px; font-size:11.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   R97-b · het menu, de weergave-toggle, de registerlijst en de FAB
   ───────────────────────────────────────────────────────────────────────
   Het zijmenu is app-anatomie: alleen de kleur is modus. De actieve rij draagt
   dezelfde tint-pill met terracotta accentbalk als in het changeplan — dat is
   de enige plek waar terracotta buiten handelen staat, en dat was al zo.
   ═══════════════════════════════════════════════════════════════════════ */
/* De navigatierij is .c-nav-item uit de app: dezelfde maten, dezelfde
   afgeronde pill en dezelfde terracotta rand links in de actieve stand. Een
   eigen ::before-balkje ernaast gaf een kaarsrechte streep tegen de ronding
   aan; het verschil viel meteen op naast het changeplan. */
.pf-nav{ flex:none; }

/* De acties van het scherm staan rechts in de kopregel van de app. De kopregel
   zelf, de titel, de ondertitel en de segment-knop komen uit componenten.css —
   niets eigens, zodat "Organisatie" precies staat en weegt als "Dashboard". */
/* De werkvlak-inhoud kapt zijn eerste kind af op --kolom (1200px, zie
   schil.css); de kopregel doet dat niet, dus liepen de acties 76px verder door
   dan de kaarten eronder. Dezelfde kolom, dus dezelfde rechterrand.
   Let op: de CM-app doet dit niet — daar staat de licentie-pill ook buiten de
   kolom. Hier vallen drie bedieningen rechts, en dan zie je het verschil wél. */
body.portfolio-modus #kopregel{ max-width:calc(1200px + 2 * var(--sp-14)); }
/* Op de canvas-schermen (tijdlijn, organogram, belasting) valt de kolomgrens
   weg: daar is elke pixel een maand meer in beeld. De kopregel volgt mee,
   anders staan de acties op een andere rechterrand dan het beeld eronder. */
/* ── de inhoudsbreedte van de portfolio-modus ────────────────────────────
   De app houdt zijn inhoudskolom op 920 of 1200px en lijnt links uit: op een
   breed scherm groeit alleen het canvas, nooit de rijen. In deze modus werkt
   dat averechts. Het bord bestaat uit kaarten en kolom-stapels, de matrix en
   het organogram zijn canvas, en de registers dragen brede rijen met een
   teller rechts — die willen allemaal de ruimte. Wat overbleef was een gat aan
   de rechterkant dat eruitzag als gereserveerde ruimte voor de zwevende knop,
   en dat is het niet: die heeft onderaan zijn eigen 90px uitloop en hoeft
   nergens een kolom vrij te houden.

   Dus: geen kolomcap in deze modus, en dezelfde 32px marge links en rechts —
   die komt van de padding van het werkvlak, zodat kop en inhoud op één lijn
   blijven. De pf-breed-klasse blijft bestaan voor wat er nog aan hangt; ze
   voegt hier niets meer toe. */
body.portfolio-modus .werkvlak-inhoud > *,
body.portfolio-modus .werkvlak-inhoud .kaart,
body.portfolio-modus #kopregel,
body.portfolio-modus .pf-org-hoofd{ max-width:none; }
/* De toggle staat direct naast de titel en beweegt daar niet meer: zijn plek
   ligt vast, wat ernaast verschijnt mag wisselen. De actie-groep blijft rechts
   uitgelijnd — dáár hoort variabele inhoud. */
.c-kopregel-toggle{ flex:none; margin-left:12px; }
/* Slaat de actie-groep toch om (lange labels, smaller scherm), dan hoort dat
   als een tweede regel te lezen en niet als een ongeluk: de app-kopregel zet
   row-gap op 0, wat klopt zolang er niets omslaat. */
.portfolio-modus .c-kopregel{ row-gap:8px; }
/* Op desktop hoort spoor 2 op één regel. Flexbox breekt op de bási̇smaat van
   een item, niet op zijn minimum — de actie-groep kán krimpen (het zoekveld
   geeft mee), maar krijgt de kans niet zolang er gewrapt mag worden. Vandaar
   krimpen in plaats van omslaan: de titel houdt zijn maat, wat meegeeft zijn
   de acties, en dat is de goede volgorde.

   95a · dit stond hier als `flex-wrap:nowrap` op de hele kopregel, en dat kan
   niet meer: spoor 1 is een eigen band van 100% breed, en nowrap trekt die
   terug op dezelfde regel als de titel — precies de overlap die de
   tweesporenregel opheft. De kopregel blijft dus wrappen; het krimpgedrag
   zit nu op de items zelf, waar het hoort. */
@media (min-width:1101px){
  .portfolio-modus .c-kopregel-blok{ flex:0 0 auto; min-width:0; }
  /* Basismaat 0 in plaats van auto. Flexbox beslist over omslaan op de
     BASISmaat en pas daarna over krimpen, dus een groep die op zijn inhoud
     meet slaat om vóór ze ooit de kans krijgt te krimpen. Met basis 0 past ze
     per definitie op de regel en verdeelt ze daarna de ruimte die overblijft —
     hetzelfde gedrag als de oude nowrap op de hele kopregel, maar nu zonder
     spoor 1 mee terug te trekken op de titelregel. */
  .portfolio-modus .pf-kop-acties{ flex:1 1 0; justify-content:flex-end; }
}
.pf-kop-acties{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap;
  margin-left:auto; min-width:0; }
.pf-kop-acties .c-segment{ flex:none; }
.pf-kop-acties .pf-org-zoek{ flex:0 1 200px; min-width:90px; }
/* Op een smallere desktop geeft het zoekveld verder mee: liever een kort veld
   dan een importeer-actie die van het scherm valt. Onder 1101px neemt de
   mobiele regel het over. */
@media (max-width:1400px){
  .pf-kop-acties .pf-org-zoek{ min-width:62px; }
}
.pf-kop-acties .pf-org-import{ flex:none; white-space:nowrap; }

/* ── de register-tab boven élke stand ─────────────────────────────────
   De weergave-toggle zegt hóe je kijkt; deze strip zegt wáárnaar. Vandaar twee
   bedieningen: samen in één knop zouden ze acht standen opleveren waarvan de
   helft niet bestaat (een organogram van doelgroepen bestaat niet). */
.pf-org-tabs{ display:flex; align-items:flex-end; gap:18px; margin:0 0 14px;
  border-bottom:1px solid var(--line-zacht); }
.pf-org-tab{ display:flex; align-items:baseline; gap:5px; border:0; background:none;
  padding:0 0 8px; margin-bottom:-1px; font-family:inherit; cursor:pointer;
  border-bottom:2px solid transparent; color:var(--ink-mist); }
.pf-org-tab-naam{ font-size:13px; }
.pf-org-tab-tel{ font-size:11px; color:var(--line-ghost); }
.pf-org-tab:hover{ color:var(--ink-soft); }
.pf-org-tab.is-actief{ color:var(--pf-schil); border-bottom-color:var(--pf-schil); }
.pf-org-tab.is-actief .pf-org-tab-naam{ font-weight:var(--gew-vet); }
.pf-org-tab.is-actief .pf-org-tab-tel{ color:var(--ink-mist); }

/* ── de registerlijst (97e) ───────────────────────────────────────────── */
.pf-reg{ display:flex; flex-direction:column; gap:6px; }
.pf-reg-kop{ display:flex; align-items:baseline; gap:6px; margin-top:14px; }
.pf-reg-kop:first-child{ margin-top:0; }
.pf-reg-kop-titel{ font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.09em; color:var(--ink-mist); }
.pf-reg-kop-sub{ font-size:11px; color:var(--ink-mist); }
.pf-reg-lijst{ border:1px solid var(--line); border-radius:var(--r-veld);
  background:var(--cream); overflow:hidden; }
.pf-reg-houder{ border-bottom:1px solid var(--line-zacht); }
.pf-reg-houder:last-child{ border-bottom:0; }
.pf-reg-rij{ display:flex; align-items:center; gap:10px; min-height:38px;
  padding:8px 12px 8px calc(12px + var(--in,0px)); cursor:pointer; }
.pf-reg-rij:hover{ background:var(--cream2); }
.pf-reg-rij.is-gekozen{ background:var(--cream2); box-shadow:inset 2px 0 0 var(--petrol); }
.pf-reg-rij.is-ongebruikt{ opacity:.45; }
.pf-reg-links{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pf-reg-naam{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-reg-meta{ font-size:11px; color:var(--ink-mist); }
.pf-reg-meta.is-leeg{ display:inline-flex; align-items:center; gap:5px; }
.pf-reg-rechts{ flex:none; display:flex; align-items:center; gap:8px; }
/* de gewicht-trap (101a): beperkt wit met rand, stevig petrol-tint, ingrijpend
   petrol gevuld. Vaste volgorde zwaar naar licht, nooit opgeteld. */
.pf-gewicht-pil{ font-size:11px; border-radius:999px; padding:2px 9px; white-space:nowrap; }
.pf-gewicht-pil[data-gewicht="beperkt"]{ background:var(--wit); border:1px solid var(--line-ghost);
  color:var(--ink-soft); }
.pf-gewicht-pil[data-gewicht="stevig"]{ background:rgba(14,79,75,.10); color:var(--petrol-deep); }
.pf-gewicht-pil[data-gewicht="ingrijpend"]{ background:var(--petrol-deep); color:#fff;
  font-weight:var(--gew-vet); }
.pf-reg-vouw{ border:0; background:none; font-family:inherit; font-size:10.5px;
  font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; padding:2px 4px; }
.pf-reg-meer{ border:0; background:none; color:var(--ink-mist); font-size:14px;
  line-height:1; cursor:pointer; padding:2px 6px; }

/* de full-edit uitklap: het CM-planning-patroon, drie velden naast elkaar */
.pf-uitklap{ margin:0 10px 10px; background:var(--wit); border:1.5px solid var(--petrol);
  border-radius:10px; box-shadow:0 8px 22px rgba(10,57,54,.10); padding:14px 16px; }
.pf-uitklap-kop{ display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.pf-uitklap-titel{ font-family:var(--font-kop); font-weight:600; font-size:15px;
  color:var(--petrol-dark); }
.pf-uitklap-match{ margin-left:auto; border:0; background:none; font-family:inherit;
  font-size:12px; color:var(--petrol-deep); cursor:pointer; padding:0; }
.pf-uitklap-match:hover{ text-decoration:underline; }
.pf-uitklap-rij{ display:flex; gap:14px; flex-wrap:wrap; }
.pf-uitklap-rij + .pf-uitklap-rij{ margin-top:10px; }
.pf-uitklap-veld{ display:block; flex:1 1 160px; min-width:0; margin-bottom:10px; }
/* Het aantal medewerkers is een kort getal en hoort geen halve regel te vullen;
   naast de naam en het aanspreekpunt zou een even breed veld beloven dat er
   evenveel in moet. */
.pf-uitklap-veld.is-getal{ flex:0 1 120px; }
input.pf-uitklap-getal{ font-variant-numeric:tabular-nums; }
.pf-uitklap-label{ display:block; font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.07em; color:var(--ink-mist); margin-bottom:3px; }
input.pf-uitklap-invoer{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12.5px;
  color:var(--ink); background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:6px 9px; }
input.pf-uitklap-invoer:focus{ outline:none; border-color:var(--petrol); }
select.pf-uitklap-kies{ width:100%; font-family:inherit; font-size:12.5px; color:var(--ink);
  background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-veld); padding:6px 9px; }
.pf-uitklap-voet{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:4px; }
.pf-uitklap-relatie{ display:flex; flex-direction:column; gap:4px; }
.pf-uitklap-relatie .pf-nieuw-relatie{ margin-bottom:0; }
.pf-uitklap-waar{ font-size:12.5px; color:var(--ink-soft); }
.pf-uitklap-acties{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.pf-uitklap-weg{ border:0; background:none; font-family:inherit; font-size:12px;
  color:var(--rood); cursor:pointer; padding:0; }

/* relatie-pillen, gedeeld door de uitklap en de nieuw-popover */
.pf-nieuw-relatie{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pf-relatie-pil{ border:1px solid var(--line); background:var(--wit); font-family:inherit;
  font-size:11.5px; color:var(--ink-soft); border-radius:999px; padding:4px 11px; cursor:pointer; }
.pf-relatie-pil.is-actief{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:#fff; font-weight:var(--gew-vet); }

/* ── de FAB van de modus ──────────────────────────────────────────────── */
/* De tabbalk draagt --z-sticky (500). Stond een sheet op 70, dan schoof hij
   eronder: bij "meer" zag je alleen de sluier, want het vel is precies zo
   hoog als de balk die eroverheen lag. Dit zijn sheets, en sheets liggen op
   --z-sheet — hetzelfde niveau als .c-fabmenu-houder van de app. */
.pf-fabmenu-houder, .pf-nieuw-houder{ position:fixed; inset:0;
  z-index:var(--z-sheet); }
/* De sluier draagt --z-paneel; het menu erboven had geen z-index en verdween
   eronder — je zag het, maar je kon er niet op klikken. Zelfde geval als
   .bord-vensterhouder, en dus dezelfde oplossing: binnen deze houder ligt de
   sluier op de bodem. */
.pf-fabmenu-houder .c-sluier, .pf-nieuw-houder .c-sluier{
  position:absolute; inset:0; z-index:0; }
.pf-fabmenu, .pf-nieuw{ z-index:1; }
.pf-fabmenu{ position:absolute; right:24px; bottom:96px; min-width:210px;
  background:var(--wit); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px rgba(10,57,54,.18); padding:6px; }
.pf-fab-chip{ display:flex; align-items:center; gap:6px; margin:2px 4px 6px;
  padding:4px 6px 4px 10px; background:var(--cream2); border:1px solid var(--line);
  border-radius:999px; font-size:11px; color:var(--ink-soft); }
.pf-fab-chip-los{ margin-left:auto; border:0; background:none; color:var(--ink-mist);
  font-size:10px; cursor:pointer; padding:1px 3px; }
.pf-fabmenu-rij{ display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:none; font-family:inherit; font-size:13px; color:var(--ink);
  text-align:left; padding:9px 10px; border-radius:8px; cursor:pointer; }
.pf-fabmenu-rij:hover{ background:var(--cream2); }
/* Ronde 114 — de FAB draagt de soorten van de app en dus ook haar stippen
   (.c-fabmenu-stip). De eigen tekens die hier stonden — eenheid, doelgroep,
   initiatief, change manager, afhankelijkheid — hoorden bij FAB-items die nu op
   hun eigen scherm wonen. Ze zijn weg, want ze definieerden een tweede set
   iconen voor soorten die de app al kent. */

/* de nieuw-popover achter de FAB */
.pf-nieuw{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(340px, calc(100vw - 32px)); background:var(--wit); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 20px 50px rgba(10,57,54,.20); padding:18px 20px; }
.pf-nieuw-kop{ font-family:var(--font-kop); font-weight:600; font-size:16px;
  color:var(--petrol-dark); margin-bottom:12px; }
input.pf-nieuw-veld{ width:100%; box-sizing:border-box; font-family:inherit; font-size:13px;
  color:var(--ink); background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:8px 10px; margin-bottom:8px; }
input.pf-nieuw-veld:focus{ outline:none; border-color:var(--petrol); }
.pf-nieuw-voet{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* lege ingangen */
.pf-leegvlak{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:26px 24px; max-width:520px; }
.pf-leegvlak-zin{ margin:0 0 6px; font-family:var(--font-kop); font-weight:600;
  font-size:16px; color:var(--petrol-dark); }
.pf-leegvlak-sub{ margin:0; font-size:12.5px; color:var(--ink-soft); }
/* De weg naar het scherm waar het werk woont. Petrol outline, zoals elke
   tweede handeling in de app — terracotta is voor handelen, en dit is
   navigeren. Hij stond er als kale browserknop; dan leest hij niet als
   bediening en vind je hem niet terug. */
.pf-leegvlak-knop{ margin-top:14px; border:1px solid var(--petrol); background:none;
  font-family:inherit; font-size:12px; font-weight:var(--gew-vet); color:var(--petrol-deep);
  border-radius:999px; padding:6px 14px; cursor:pointer; align-self:flex-start; }
.pf-leegvlak-knop:hover{ background:rgba(31,90,90,.07); }
.pf-leegvlak{ display:flex; flex-direction:column; align-items:flex-start; }
/* Buiten een leeg vlak — naast een veld of in een paneel — hoort dezelfde knop
   krapper te staan: daar is hij een regel in een blok, geen slot van een kaart. */
.pf-uitklap-veld > .pf-leegvlak-knop,
.pf-paneel-blok > .pf-leegvlak-knop{ margin-top:8px; padding:4px 11px; font-size:11px; }
/* De opdrachtregel boven de uitleg: hetzelfde gewicht als een leegvlak-zin,
   maar op de maat van de plek waar hij staat. */
.pf-init-hefboom-zin, .pf-init-paneel-zin, .pf-cp-geen-zin{
  margin:0; font-size:12px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-init-paneel-zin{ margin:0 0 2px; }
.pf-cp-geen-zin{ margin:6px 0 0; }

@media (max-width:700px){
  .pf-kop-acties{ flex:1 1 100%; }
  .c-kopregel-toggle{ display:none; }
  .pf-reg-rij{ min-height:44px; }
  .pf-fabmenu{ right:12px; left:12px; bottom:auto; top:auto;
    position:absolute; bottom:88px; }
}

/* De koppen nemen de kleur van de schil over. In het changeplan is de titel
   petrol-dark, en dat is precies de zijmenu-kleur daar; in deze modus is de
   schil #143F54, dus daar hoort de titel mee te wisselen. Zelfde regel, andere
   grond — niet een tweede kleurafspraak. */
body.portfolio-modus .c-kopregel-titel,
body.portfolio-modus .pf-paneel-titel,
body.portfolio-modus .pf-uitklap-kop,
body.portfolio-modus .pf-nieuw-kop,
body.portfolio-modus .pf-leegvlak-zin,
body.portfolio-modus .pf-titel{ color:var(--pf-schil); }

/* Het FAB-teken in een zin: hetzelfde rondje als de knop rechtsonder, op
   tekstformaat. Zo zoekt de lezer naar wat hij op het scherm ziet staan. */
.pf-fab-teken{ display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:var(--terra); color:#fff;
  font-size:11px; line-height:1; font-weight:var(--gew-vet);
  vertical-align:-2px; margin:0 3px; }

/* de naam-suggesties in de nieuw-popover (de dedupe zit hier, niet in een
   validatieregel achteraf) */
.pf-nieuw-naamhouder{ position:relative; }

/* De context-chip en de weergave-toggle komen uit de app; in deze modus dragen
   ze de kleur van de schil in plaats van petrol. Zelfde vorm, andere grond. */
body.portfolio-modus .c-fab-contextchip{ background:var(--pf-schil); }
body.portfolio-modus .c-segment-knop.is-actief{ background:var(--pf-schil); }

/* ═══════════════════════════════════════════════════════════════════════
   R100 · Importeer met je eigen AI
   ───────────────────────────────────────────────────────────────────────
   Twee stappen onder elkaar, elk een kaart. De kopieer-knop en Verwerk zijn de
   enige terra op dit scherm — en nooit allebei tegelijk actief: zodra er iets
   in het retour-vlak staat, verschuift de handeling van stap 1 naar stap 2.
   ═══════════════════════════════════════════════════════════════════════ */
.pf-imp-doek{ display:flex; flex-direction:column; gap:16px; max-width:820px; }
.pf-imp-uitleg{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.pf-imp-stap{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:18px 20px; }
.pf-imp-stapkop{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pf-imp-nr{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--cream2);
  border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:var(--gew-vet); color:var(--ink-soft); }
.pf-imp-staptitel{ font-family:var(--font-kop); font-weight:600; font-size:15px; color:var(--pf-schil); }
.pf-imp-chip{ margin-left:auto; font-size:11px; color:var(--ink-mist);
  background:var(--cream2); border:1px solid var(--line); border-radius:999px; padding:2px 10px; }
.pf-imp-tekst{ margin:0 0 10px; font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.pf-imp-pillen{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.pf-imp-vraag{ font-size:11.5px; color:var(--ink-mist); margin-right:4px; }
/* het mono-blok toont de eerste regels; de rest vervaagt tot je kopieert */
.pf-imp-mono{ position:relative; max-height:132px; overflow:hidden; margin:0;
  background:var(--cream2); border:1px solid var(--line-zacht); border-radius:var(--r-veld);
  padding:10px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; line-height:1.6; color:var(--ink-soft); white-space:pre-wrap; }
.pf-imp-mono::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:44px;
  background:linear-gradient(to bottom, rgba(242,238,231,0), var(--cream2)); }
.pf-imp-micro{ margin:8px 0 0; font-size:11px; color:var(--ink-mist); line-height:1.5; }
.pf-imp-voet{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pf-imp-voet > .c-knop[data-soort="primair"]{ margin-left:auto; }
.pf-imp-belofte{ font-size:11px; color:var(--ink-mist); }
.pf-imp-terugstap{ border:0; background:none; font-family:inherit; font-size:12px;
  color:var(--petrol-deep); cursor:pointer; padding:0; }
.c-knop.is-gekopieerd{ background:var(--petrol-deep); }

.pf-imp-zone{ display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--zacht,#F2EEE7); border-radius:var(--r-veld); padding:22px 16px;
  font-size:12.5px; color:var(--ink-soft); }
.pf-imp-zone.is-over{ background:var(--cream2); }
.pf-imp-kies{ border:0; background:none; font-family:inherit; font-size:12.5px;
  color:var(--petrol-deep); cursor:pointer; text-decoration:underline; padding:0; }
input.pf-imp-bestand{ display:none; }
.pf-imp-of{ text-align:center; font-size:10.5px; letter-spacing:.08em; color:var(--ink-mist); margin:10px 0; }
textarea.pf-imp-plak{ width:100%; box-sizing:border-box; min-height:96px; font-family:inherit;
  font-size:12.5px; color:var(--ink); background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:10px 12px; line-height:1.5; }
textarea.pf-imp-plak:focus{ outline:none; border-color:var(--petrol); }
.pf-imp-verwerk:disabled{ background:#EFEBE3; color:var(--line-ghost); cursor:default; }

/* 100b — amber, nooit rood: een formaatfout is geen falen van de gebruiker */
.pf-imp-hulpkop{ margin-bottom:6px; }
.pf-imp-hulptitel{ font-family:var(--font-kop); font-weight:600; font-size:16px; color:var(--pf-schil); }
.pf-imp-goed-tel{ font-size:12.5px; color:var(--groen,#2C8A6B); font-weight:var(--gew-vet); }
.pf-imp-rechtgezet{ margin:6px 0 0; font-size:11.5px; color:var(--ink-mist); line-height:1.5; }
.pf-imp-hulptel{ margin-top:14px; font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.08em; color:var(--amber,#D9A63C); }
.pf-imp-hulprij{ border-top:1px solid var(--line-zacht); padding:10px 0; }
.pf-imp-hulpvraag{ font-size:12.5px; color:var(--ink); line-height:1.5; }
.pf-imp-bron{ margin-top:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; color:var(--ink-mist); background:var(--cream2);
  border-radius:6px; padding:4px 8px; overflow-x:auto; white-space:nowrap; }
.pf-imp-hulpacties{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pf-imp-weg{ border:0; background:none; font-family:inherit; font-size:12px;
  color:var(--ink-soft); cursor:pointer; padding:0; }
input.pf-imp-datum{ font-family:inherit; font-size:12px; padding:4px 8px;
  border:1px solid var(--line); border-radius:var(--r-veld); background:var(--cream2); width:auto; }
.pf-imp-herstel{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-zacht); }

/* 100c — groen is nieuw, amber bestaat al met een verschil */
.pf-imp-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-right:2px; }
.pf-imp-dot[data-stand="nieuw"]{ background:var(--groen,#2C8A6B); }
.pf-imp-dot[data-stand="verschil"]{ background:var(--amber,#D9A63C); }
.pf-imp-paar{ padding:0 12px 12px 30px; }
.pf-imp-verschilrij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; }
.pf-imp-nu{ background:var(--cream2); border-radius:6px; padding:3px 8px; color:var(--ink-soft); }
.pf-imp-pijl{ color:var(--ink-mist); }
.pf-imp-voorstel{ border:1.5px solid var(--terra); border-radius:6px; padding:3px 8px; color:var(--ink); }
.pf-imp-keuze{ display:flex; gap:6px; margin-top:8px; }
.pf-imp-meer{ display:block; width:100%; border:0; background:none; font-family:inherit;
  font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep);
  text-align:left; padding:8px 12px; cursor:pointer; }
.pf-imp-controlevoet{ border-top:1px solid var(--line-zacht); padding-top:14px; }
.pf-imp-tel{ font-size:11.5px; color:var(--ink-mist); }
.pf-kruimel{ border:0; background:none; font-family:inherit; font-size:12px;
  color:var(--petrol-deep); cursor:pointer; padding:0 0 2px; display:block; }

@media (max-width:700px){
  .pf-imp-zone{ display:none; }
  .pf-imp-voet{ gap:8px; }
  .pf-imp-voet > .c-knop{ min-height:44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   R95 · portfolio-modus — Initiatieven: tijdlijn en lijst (C1 · B1)
   ───────────────────────────────────────────────────────────────────────
   Eén menu-item, twee weergaven. Dezelfde trap als de rest van de app: de
   status zit in de vorm van de balk en niet in een kleur die oordeelt, en
   terracotta blijft ook hier alleen op de knop die iets doet.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── de chips: sorteren en filteren ─────────────────────────────────────
   Zetten en wissen in één handeling, want dit scherm gaat open terwijl er een
   kamer meekijkt. De gefilterde stand ziet er daarom uit als de gewone stand:
   gevuld wanneer hij iets doet, verder niets. */
.pf-chip-houder{ position:relative; flex:none; }
.pf-chip{ border:1px solid var(--line); background:var(--wit); font-family:inherit;
  font-size:11.5px; color:var(--ink-soft); border-radius:999px; padding:5px 11px;
  cursor:pointer; white-space:nowrap; }
.pf-chip:hover{ border-color:var(--line-ghost); }
.pf-chip.is-actief{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:#fff; font-weight:var(--gew-vet); }
.pf-chip-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  min-width:190px; max-width:280px; background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld); box-shadow:0 10px 26px rgba(10,57,54,.13);
  padding:4px; display:flex; flex-direction:column; }
/* Vanaf acht opties: een zoekveld boven en een eigen scrol eronder, zodat een
   register van vijftig groepen niet het halve scherm vult. */
input.pf-chip-zoek{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12px;
  color:var(--ink); background:var(--cream2); border:1px solid var(--line);
  border-radius:6px; padding:6px 8px; margin-bottom:4px; }
input.pf-chip-zoek:focus{ outline:none; border-color:var(--petrol); }
.pf-chip-lijst{ display:flex; flex-direction:column; max-height:264px; overflow-y:auto;
  scrollbar-width:thin; }
.pf-chip-leeg{ font-size:11.5px; color:var(--ink-mist); padding:7px 10px; }
.pf-chip-optie{ border:0; background:none; font-family:inherit; font-size:12.5px;
  color:var(--ink); text-align:left; padding:7px 10px; border-radius:6px; cursor:pointer; }
.pf-chip-optie:hover{ background:var(--cream2); }

/* ── de tijdlijn: wat de balkvormen erbij kregen ────────────────────────
   Stopgezet is geen afgesloten: het is een genomen beslissing, en de balk stopt
   met een kap in plaats van netjes uit te lopen. Buiten de changeplannen is de
   vorm van iets dat je zelf registreert en waarvan je geen foto's verwacht. */
.pf-balk[data-stand="stopgezet"]{ background:var(--rest); border-radius:5px 0 0 5px;
  border-right:2px solid var(--ink-mist); }
.pf-balk[data-stand="buiten"]{ background:var(--cream2); border:1px solid #C9C2B4; }
.pf-balk.is-afgeknipt-links{ border-top-left-radius:0; border-bottom-left-radius:0; }
.pf-balk.is-afgeknipt-rechts{ border-top-right-radius:0; border-bottom-right-radius:0; }
.pf-balk{ cursor:pointer; }
/* Past er geen balk in het venster, dan staat er een tekstpijl: "start 2028 →"
   is eerlijker dan een lege rij die suggereert dat er niets gepland is. */
.pf-balk-pijl{ position:absolute; left:8px; top:2px; font-size:10.5px;
  color:var(--petrol-deep); white-space:nowrap; }
.pf-naamcel{ cursor:pointer; }
.pf-naamcel.is-gekozen, .pf-spoorcel.is-gekozen{ background:var(--vul-mint); }
.pf-naamcel.is-nieuw, .pf-init-rij.is-nieuw{ animation:pf-oplicht 1.6s ease-out; }
@keyframes pf-oplicht{ from{ background:var(--vul-mint); } to{ background:transparent; } }

/* golven: één slag kleiner en een halve toon lichter — ze horen bij de balk
   erboven, ze concurreren er niet mee */
/* Het driehoekje staat áchter zijn label — de conventie van .pf-reg-vouw op
   Organisatie ("6 · 122 mw ▴"). Het label is hier "6 golven" in de metaregel.
   Vóór de titel zou het die titel bovendien inspringen, en alleen bij een
   initiatief mét golven: dan leest de insprong als nesting. De knop loopt mee
   in de tekststroom van de metaregel, dus inline en met de maat van die regel. */
.pf-golf-vouw{ display:inline; border:0; background:none; font-family:inherit;
  font-size:inherit; font-weight:var(--gew-vet); color:var(--petrol-deep);
  cursor:pointer; padding:0; line-height:inherit; }
/* Naam en groep staan op één regel — "Werkwijze en tooling · Verpleging" —
   niet onder elkaar. De naamcel is een kolom-flex voor de hoofdrijen; een
   golfrij is 28px hoog, en twee regels passen daar niet in: de tekst liep over
   de rij eronder en botste met de volgende golfnaam. */
/* justify-content:center staat op .pf-naamcel voor zijn kolomrichting (verticaal
   centreren). Zodra de rij horizontaal wordt, centreert diezelfde regel de tekst
   — en dan staan de golfnamen niet meer onder elkaar uitgelijnd. */
.pf-naamcel.is-golf{ height:28px; padding-left:26px;
  flex-direction:row; align-items:baseline; justify-content:flex-start; gap:5px; }
.pf-golf-naam{ flex:0 1 auto; min-width:0; font-size:11.5px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* De groep krimpt eerst: de naam van de golf is wat je zoekt, de groep is de
   toelichting erachter. */
.pf-golf-groep{ flex:0 100 auto; min-width:0; font-size:10.5px; color:var(--line-ghost);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-spoorcel.is-golf{ height:28px; }
.pf-golfbalk{ position:absolute; top:10px; height:8px; border-radius:4px;
  background:rgba(18,113,108,.4); }
/* De ghost-regel draagt een hele zin plus een link; op 260px past dat niet op
   één regel. Twee regels dus, en de spoorcel ernaast groeit mee — links en
   rechts op dezelfde hoogte is de invariant van dit beeld. */
.pf-naamcel.is-ghostregel{ height:34px; flex-direction:row; align-items:center;
  justify-content:flex-start; gap:6px; padding-left:26px; }
.pf-spoorcel.is-ghost{ height:34px; }
.pf-golf-ghost{ flex:0 1 auto; min-width:0; font-size:10.5px; font-style:italic;
  color:var(--ink-mist); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* de afhankelijkheidspijl: dezelfde ghost-pijl als de planning van de app */
.pf-pijl{ position:absolute; border-left:1.5px dashed var(--petrol);
  border-bottom:1.5px dashed var(--petrol); pointer-events:none; opacity:.75; }
.pf-pijl-lab{ position:absolute; left:4px; bottom:2px; font-size:9.5px;
  color:var(--petrol-deep); white-space:nowrap; }

/* ── 95d · de lijstweergave ─────────────────────────────────────────────── */
.pf-init-lijst{ }
.pf-init-rij{ align-items:flex-start; }
.pf-init-kop{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pf-init-impact{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px; }
/* De tel-pill van de groepen is blauw: hij verwijst naar de organisatie, niet
   naar het gewicht ernaast. */
.pf-init-groeppil{ border:1px solid var(--pf-dot); background:none; font-family:inherit;
  font-size:10.5px; color:var(--pf-schil); border-radius:999px; padding:2px 9px; cursor:pointer; }
.pf-init-groeppil:hover{ background:rgba(78,140,168,.10); }
/* Geen impactbeeld is een zichtbaar gat, geen verwijt: de ghost-ring benoemt
   het en er staat meteen een sprong naast om het te vullen. */
.pf-init-gat{ font-size:11px; color:var(--ink-mist); display:inline-flex; align-items:center; gap:5px; }
.pf-init-sprong{ border:0; background:none; font-family:inherit; font-size:11px;
  color:var(--petrol-deep); cursor:pointer; padding:0; }

/* ── 95f · het formulier ────────────────────────────────────────────────
   Geen scroll: de naam over de volle breedte, daaronder twee kolommen die op
   gelijke hoogte beginnen — links wat het initiatief is, rechts wie het raakt.
   Alles tegelijk in beeld, want je vult dit in terwijl je het gesprek nog aan
   het navertellen bent. */
.pf-init-uitklap .pf-uitklap-veld.is-breed{ flex:1 1 100%; }
.pf-init-kolommen{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
/* De kolom is zelf een flex-kolom; zonder deze regel erven de velden hun
   flex:1 1 160px uit de uitklap-rij en claimt élk veld 160px hóógte — dan staat
   er tussen elk blok een gat van een halve kaart. */
.pf-init-kolom{ flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-init-kolom > *{ flex:0 0 auto; }
.pf-init-kolom .pf-uitklap-rij > .pf-uitklap-veld{ flex:1 1 140px; }
.pf-init-periode{ display:flex; align-items:center; gap:6px; }
.pf-init-maand{ display:flex; gap:4px; flex:1 1 auto; min-width:0; }
/* Eén knop per kant in plaats van twee dropdowns: vier keer uitklappen om
   "apr 2027 – dec 2027" te zeggen is drie keer te veel. Achter de knop zit een
   jaarstapper met twaalf maanden in beeld. */
.pf-init-maand{ position:relative; }
.pf-maandknop{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12.5px;
  color:var(--ink); background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:6px 9px; text-align:left; cursor:pointer; }
.pf-maandknop:hover{ border-color:var(--line-ghost); }
.pf-maandknop.is-leeg{ color:var(--line-ghost); }
.pf-maandpop{ position:absolute; left:0; top:calc(100% + 6px); z-index:50; width:206px;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-veld);
  box-shadow:0 10px 26px rgba(10,57,54,.13); padding:8px; }
.pf-maandpop-kop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.pf-maandpop-jaar{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink);
  font-variant-numeric:tabular-nums; }
.pf-maandpop-stap{ border:0; background:none; font-size:14px; line-height:1;
  color:var(--petrol-deep); cursor:pointer; padding:2px 8px; border-radius:6px; }
.pf-maandpop-stap:hover{ background:var(--cream2); }
.pf-maandpop-rooster{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }
.pf-maandpop-maand{ border:1px solid transparent; background:none; font-family:inherit;
  font-size:11.5px; color:var(--ink); padding:6px 0; border-radius:6px; cursor:pointer; }
.pf-maandpop-maand:hover:not(:disabled){ background:var(--cream2); }
/* Wat de andere kant onmogelijk maakt, is niet aan te klikken. Weglaten zou
   erger zijn: dan lijkt het rooster onvolledig in plaats van begrensd. */
.pf-maandpop-maand:disabled{ color:var(--line-ghost); cursor:not-allowed; }
.pf-maandpop-stap:disabled{ color:var(--line-ghost); cursor:not-allowed; }
.pf-maandpop-stap:disabled:hover{ background:none; }
.pf-maandpop-maand.is-actief{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:#fff; font-weight:var(--gew-vet); }
.pf-maandpop-wis{ display:block; width:100%; margin-top:6px; border:0; background:none;
  font-family:inherit; font-size:11px; color:var(--ink-mist); cursor:pointer; padding:4px 0; }
.pf-maandpop-wis:hover{ color:var(--rood); }
.pf-init-tot{ color:var(--ink-mist); font-size:12px; }
/* Van ná tot is rood, niet amber. Amber is voor iets wat aandacht vraagt maar
   nog kan kloppen; hier weten we zeker dat een van de twee datums fout is, en
   dan is een zachte tint een leugen over hoe zeker we zijn. Tegenhouden doen we
   nog steeds niet — je zet vaak eerst de ene kant — maar we draaien er ook niet
   omheen. Statusrood #C0563A, niet het actie-terracotta. */
.pf-init-omgekeerd{ display:block; margin-top:4px; font-size:10.5px; color:var(--rood); }
.pf-init-omgekeerd-chip{ flex:none; font-size:10px; color:var(--rood);
  border:1px solid var(--rood); border-radius:999px; padding:1px 7px; }
/* en de balk tekent niet achteruit: hij valt terug op de stomp van een periode
   zonder einde, met de uitleg in de titel */
.pf-balk.is-omgekeerd{ opacity:.55; }
.pf-init-hint{ display:block; font-size:10.5px; color:var(--ink-mist); margin:-1px 0 5px; line-height:1.4; }
textarea.pf-init-info, textarea.pf-init-groepinfo{ width:100%; box-sizing:border-box;
  font-family:inherit; font-size:12.5px; color:var(--ink); background:var(--cream2);
  border:1px solid var(--line); border-radius:var(--r-veld); padding:6px 9px; resize:vertical; }
textarea.pf-init-info:focus, textarea.pf-init-groepinfo:focus{ outline:none; border-color:var(--petrol); }
.pf-init-soorten{ flex-wrap:wrap; }

/* Het CM-veld hangt visueel aan het begeleiding-antwoord: het verschijnt eruit
   en het verdwijnt ermee. Een inspringlijn zegt dat zonder een woord. */
/* Een veld uit de uitklap draagt flex:1 1 160px, en die honderdzestig zijn een
   breedte zolang de rij horizontaal loopt. In deze kolom werd het een hoogte, en
   dan stond er onder de gekozen change manager honderddertig pixels niets. */
.pf-init-cm{ margin:8px 0 0 2px; padding-left:12px; border-left:2px solid var(--petrol);
  display:flex; flex-direction:column; gap:2px; }
.pf-init-cm > .pf-uitklap-veld{ flex:0 0 auto; }

.pf-init-groepen{ background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:10px 12px 12px; }
.pf-init-groeplijst{ display:flex; flex-direction:column; gap:8px; margin:6px 0 8px; }
.pf-init-groeprij{ background:var(--wit); border:1px solid var(--line);
  border-radius:9px; padding:7px 9px; display:flex; flex-direction:column; gap:5px; }
.pf-init-groepkop{ display:flex; align-items:center; gap:8px; }
.pf-init-groepnaam{ flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:var(--gew-vet);
  color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-init-gewichten{ display:flex; gap:4px; flex:none; }
/* De gewicht-trap: beperkt = wit met rand, stevig = petrol-tint, ingrijpend =
   petrol gevuld. Ongekozen is een geldig antwoord en staat er als woorden. */
.pf-gewicht-keuze{ border:1px solid #C9C2B4; background:var(--wit); font-family:inherit;
  font-size:10px; color:var(--ink-soft); border-radius:999px; padding:2px 8px; cursor:pointer; }
.pf-gewicht-keuze[data-gewicht="stevig"].is-actief{ background:rgba(14,79,75,.10);
  border-color:rgba(14,79,75,.10); color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-gewicht-keuze[data-gewicht="ingrijpend"].is-actief{ background:var(--petrol);
  border-color:var(--petrol); color:#fff; font-weight:var(--gew-vet); }
.pf-gewicht-keuze[data-gewicht="beperkt"].is-actief{ background:var(--wit);
  border-color:var(--petrol); color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-init-groepweg{ flex:none; border:0; background:none; color:var(--ink-mist);
  font-size:11px; cursor:pointer; padding:0 2px; line-height:1; }
.pf-init-groepweg:hover{ color:var(--rood); }
.pf-init-gewichtleeg{ font-size:10.5px; color:var(--ink-mist); }
.pf-init-plusinfo{ align-self:flex-start; border:0; background:none; font-family:inherit;
  font-size:10.5px; color:var(--petrol-deep); cursor:pointer; padding:0; }
.pf-init-zoekhouder{ position:relative; }
input.pf-init-groepzoek{ background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:6px 9px; font-size:12.5px; }
.pf-init-suggesties{ display:flex; flex-direction:column; margin-top:4px; }
.pf-init-suggestie{ display:flex; align-items:baseline; gap:6px; border:0; background:none;
  font-family:inherit; font-size:12px; color:var(--ink); text-align:left;
  padding:6px 8px; border-radius:6px; cursor:pointer; }
.pf-init-suggestie:hover{ background:var(--wit); }
.pf-init-suggestie-naam{ font-weight:var(--gew-vet); }
.pf-init-suggestie-meta{ font-size:10.5px; color:var(--ink-mist); }
.pf-init-suggestie.is-nieuw{ color:var(--petrol-deep); }
.pf-init-geenplan{ font-size:11px; color:var(--ink-mist); flex:1 1 auto; }

/* ── 95e · de statuslijn ────────────────────────────────────────────────
   Vier fasen met de vork bij de beslissing. In het menu staan ze in leesvolgorde
   met een haarlijn tussen de fasen — geen rangorde, wel een verhaal. */
.pf-init-statusknop{ flex:none; border:1px solid var(--line); background:var(--wit);
  font-family:inherit; font-size:11px; color:var(--ink-soft); border-radius:999px;
  padding:3px 10px; cursor:pointer; }
.pf-init-statusknop[data-fase="na"]{ border-color:var(--petrol); color:var(--petrol-deep); }
.pf-init-statusknop[data-fase="einde"]{ color:var(--ink-mist); }
.pf-status-houder{ position:relative; flex:none; }
.pf-status-menu{ position:absolute; left:0; top:calc(100% + 6px); z-index:40;
  min-width:180px; background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld); box-shadow:0 10px 26px rgba(10,57,54,.13);
  padding:4px; display:flex; flex-direction:column; }
.pf-status-optie{ border:0; background:none; font-family:inherit; font-size:12.5px;
  color:var(--ink); text-align:left; padding:7px 10px; border-radius:6px; cursor:pointer; }
.pf-status-optie:hover{ background:var(--cream2); }
.pf-status-optie.is-actief{ font-weight:var(--gew-vet); color:var(--petrol-deep); }
.pf-status-scheid{ height:1px; background:var(--line-zacht); margin:4px 8px; }

/* ── 95e · snel aanmaken ────────────────────────────────────────────────── */
.pf-nieuwinit-houder{ position:fixed; inset:0; z-index:60; display:flex;
  align-items:center; justify-content:center; }
/* De sluier van de app draagt een eigen z-index; zonder deze regel ligt hij
   óver de popover en is er geen veld meer aan te klikken (zelfde val als bij het
   FAB-menu in R97). */
.pf-nieuwinit-houder .c-sluier{ position:fixed; inset:0; z-index:0; }
.pf-nieuwinit{ position:relative; z-index:1; width:min(440px, calc(100vw - 32px));
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:0 18px 44px rgba(10,57,54,.18); padding:18px 20px 16px;
  display:flex; flex-direction:column; gap:9px; }
.pf-nieuwinit-titel{ font-family:var(--font-kop); font-weight:600; font-size:17px;
  color:var(--petrol-dark); margin:0; }
.pf-nieuwinit-sub{ font-size:12px; color:var(--ink-soft); margin:-6px 0 2px; }
input.pf-nieuwinit-naam, input.pf-nieuwinit-sponsor{ width:100%; box-sizing:border-box;
  font-family:inherit; font-size:13px; color:var(--ink); background:var(--wit);
  border:1px solid var(--line); border-radius:var(--r-veld); padding:8px 10px; }
input.pf-nieuwinit-naam{ font-size:14px; font-weight:var(--gew-vet); }
input.pf-nieuwinit-naam:focus, input.pf-nieuwinit-sponsor:focus{ outline:none; border-color:var(--petrol); }
.pf-nieuwinit-voet{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:4px; }
.pf-nieuwinit-alle{ border:0; background:none; font-family:inherit; font-size:12px;
  color:var(--petrol-deep); cursor:pointer; padding:0; }
.pf-init-afhlijst{ display:flex; flex-direction:column; gap:4px; }
.pf-init-afhrij{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); }
.pf-init-afhrij span{ flex:1 1 auto; min-width:0; }

/* ── 95c · mobiel: gestapeld, de toggle vervalt ─────────────────────────── */
@media (max-width:700px){
  .pf-init-kolommen{ flex-direction:column; gap:14px; }
  .pf-init-kolom{ flex:1 1 100%; }
  .pf-chip{ min-height:32px; }
  .pf-kop-acties{ overflow-x:auto; }
  .pf-nieuwinit{ position:fixed; left:0; right:0; bottom:0; width:auto;
    border-radius:var(--r-l) var(--r-l) 0 0; max-height:88vh; overflow-y:auto; }
  .pf-nieuwinit-houder{ align-items:flex-end; }
  .pf-init-rij{ min-height:44px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   R112 · portfolio-modus — Change managers (B2 · C6.1)
   ───────────────────────────────────────────────────────────────────────
   Een register van mensen wordt vanzelf als scorebord gelezen, dus staat hier
   geen enkele vorm die dat suggereert: geen balk, geen percentage-meter, geen
   kleur op vol of leeg. Alleen tekst, en de aflezing waar de portfolio-manager
   op stuurt — wanneer komt er ruimte.
   ═══════════════════════════════════════════════════════════════════════ */
.pf-cm-tel{ font-size:11.5px; color:var(--ink-mist); }
/* 112a · de rij draagt drie regels: wie het is en hoe vol het staat, wat er op
   zijn naam loopt, en wat hij eerder deed. Dat laatste maakt de rol
   geloofwaardig en hoorde niet weggeklikt in de uitklap te zitten. */
.pf-cm-rij{ display:block; }
.pf-cm-kop{ display:flex; align-items:center; gap:10px; }
.pf-cm-kop .pf-reg-naam{ flex:none; }
.pf-cm-kop .pf-reg-meta{ flex:0 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.pf-cm-stand{ flex:none; margin-left:auto; font-size:11px; color:var(--ink-mist);
  white-space:nowrap; }
.pf-cm-stand.is-vrij{ font-weight:var(--gew-vet); color:var(--petrol-deep); }
.pf-cm-loopt{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:6px; padding-left:2px; }
.pf-cm-trajectnaam{ font-size:11.5px; color:var(--ink); }
.pf-cm-trajectmeta{ color:var(--ink-mist); }
.pf-cm-planchip{ flex:none; display:inline-flex; align-items:center; gap:5px;
  background:rgba(18,113,108,.08); color:var(--petrol-deep); border:0;
  border-radius:999px; padding:1px 9px; font-family:inherit; font-size:10.5px;
  font-weight:var(--gew-vet); cursor:pointer; }
.pf-cm-planchip:hover{ background:rgba(18,113,108,.16); }
.pf-cm-foto{ margin-left:auto; font-size:10.5px; color:var(--ink-mist); white-space:nowrap; }
/* Stilte is een feit, geen alarm: cursief, nooit een kleur. */
.pf-cm-foto.is-stil{ font-style:italic; }
.pf-cm-foto.is-leeg{ color:var(--line-ghost); }
.pf-cm-deed{ margin-top:5px; padding-left:2px; font-size:11px; color:var(--ink-mist); }
@media (max-width:699px){
  .pf-cm-kop{ flex-wrap:wrap; }
  .pf-cm-stand{ margin-left:0; flex-basis:100%; }
  .pf-cm-foto{ margin-left:0; flex-basis:100%; }
}
.pf-cm-rij .pf-reg-rechts{ gap:10px; }
.pf-cm-chevron{ flex:none; font-size:10px; color:var(--ink-mist); }
/* De ruimte-aflezing: petrol-deep, want dát is waar hij op stuurt. Het klokje
   zegt dat er ruimte áánkomt; "geen ruimte in beeld" is een stand, geen alarm. */
.pf-cm-ruimte{ flex:none; font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep);
  white-space:nowrap; }
.pf-cm-ruimte.is-wacht{ font-weight:var(--gew-normaal); color:var(--ink-soft); }
.pf-cm-ruimte.is-vol{ font-weight:var(--gew-normaal); color:var(--ink-mist); }
/* De horizon naast de ruimte: amber, want het is geen fout maar iets waar je
   rekening mee houdt bij het toewijzen. */
.pf-cm-horizon{ flex:none; font-size:10.5px; color:var(--geel-tekst); white-space:nowrap;
  border:1px solid var(--geel); border-radius:999px; padding:1px 8px; }

.pf-cm-kaart .pf-uitklap-veld{ flex:1 1 150px; }
.pf-cm-kaart .pf-uitklap-veld.is-breed{ flex:1 1 100%; }
/* Eén hoogte voor alles wat naast elkaar staat: tekstveld, select en
   maandknop. Ze dragen elk hun eigen padding en lettergrootte, en dan zakt de
   ene twee pixels onder de andere — zichtbaar zodra ze op één rij staan. Een
   vaste hoogte met flex-centrering haalt dat weg zonder aan de inhoud te komen. */
.pf-uitklap-rij{ align-items:flex-end; }
input.pf-uitklap-invoer,
select.pf-uitklap-kies,
.pf-maandknop,
select.pf-cm-inzet{ height:32px; box-sizing:border-box; line-height:normal; }
.pf-maandknop{ display:flex; align-items:center; }
.pf-cm-toewijsvoet .pf-maandknop{ min-width:120px; }

/* De twee maandknoppen naast elkaar, niet uitgerekt over de halve kaart: een
   veld dat breder is dan zijn inhoud belooft dat er meer in moet. */
.pf-cm-afwezig{ flex:1 1 320px; }
.pf-cm-afwezig .pf-init-maand{ flex:0 1 148px; }
/* Voet op één regel: de rode tekstlink links, de knop rechts. */
.pf-cm-kaart .pf-uitklap-voet{ flex-wrap:nowrap; align-items:center; }
.pf-cm-kaart .pf-uitklap-weg{ flex:0 0 auto; }
.pf-cm-blok{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.pf-cm-geen{ margin:4px 0 0; font-size:12px; color:var(--ink-mist); }

/* De statusgroepen: kop met teller en chevron, de afgesloten groepen dicht.
   Dat is trackrecord, geen agenda — het hoort de lopende trajecten niet weg te
   drukken. */
.pf-cm-groep{ margin-top:8px; }
.pf-cm-groepkop{ display:flex; align-items:center; gap:6px; width:100%; border:0;
  background:none; font-family:inherit; text-align:left; padding:4px 0; cursor:pointer; }
.pf-cm-groepnaam{ font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-cm-groeptel{ font-size:10.5px; color:var(--ink-mist); }
.pf-cm-groeppijl{ font-size:9px; color:var(--ink-mist); margin-left:auto; }
.pf-cm-traject{ display:flex; align-items:center; gap:10px; background:var(--wit);
  border:1px solid var(--line); border-radius:9px; padding:7px 10px; margin-top:4px; }
.pf-cm-trajectnaam{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline;
  gap:6px; flex-wrap:wrap; }
.pf-cm-trajecttitel{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cm-trajectmeta{ font-size:11px; color:var(--ink-soft); }
select.pf-cm-inzet{ flex:none; width:88px; font-family:inherit; font-size:11.5px;
  color:var(--ink); background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:4px 6px; }
.pf-cm-sprong{ flex:none; border:0; background:none; color:var(--petrol-deep);
  font-size:12px; cursor:pointer; padding:0 2px; }
.pf-cm-wijstoe{ display:block; margin-top:8px; border:0; background:none; font-family:inherit;
  font-size:12px; color:var(--petrol-deep); cursor:pointer; padding:0; }

.pf-cm-historieklijst{ display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.pf-cm-historiekrij{ display:flex; gap:8px; font-size:11px; color:var(--ink-soft); }
.pf-cm-historiekdatum{ flex:0 0 76px; color:var(--ink-mist); }


/* ── B2 · de toewijzing ────────────────────────────────────────────────
   Twee aflezingen naast elkaar, in registervolgorde. Geen sortering op
   geschiktheid en geen aanbevolen kaart: dat oordeel is van de mens. */
.pf-cm-toewijs{ width:min(520px, calc(100vw - 32px)); }
.pf-cm-kandidaten{ display:flex; flex-direction:column; gap:6px; max-height:300px;
  overflow-y:auto; scrollbar-width:thin; }
.pf-cm-kandidaat{ display:flex; flex-direction:column; gap:3px; width:100%;
  background:var(--wit); border:1px solid var(--line); border-radius:9px;
  padding:9px 11px; text-align:left; font-family:inherit; cursor:pointer; }
.pf-cm-kandidaat:hover{ border-color:var(--line-ghost); }
.pf-cm-kandidaat.is-actief{ border:1.5px solid var(--petrol); background:var(--vul-mint);
  padding:8.5px 10.5px; }
.pf-cm-kandidaatkop{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pf-cm-kandidaatnaam{ font-size:13px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cm-kandidaatdeed{ font-size:11px; color:var(--ink-soft); }
.pf-cm-kandidaat.is-open .pf-cm-kandidaatnaam{ font-weight:var(--gew-half); color:var(--ink-soft); }
.pf-cm-toewijsvoet{ display:flex; align-items:flex-end; gap:12px; margin-top:10px; flex-wrap:wrap; }
.pf-cm-toewijsveld{ display:flex; flex-direction:column; gap:3px; flex:0 0 auto; }
.pf-cm-toewijsveld .pf-init-maand{ min-width:120px; }
.pf-cm-toewijsja{ margin-left:auto; }

@media (max-width:700px){
  .pf-cm-kaart .pf-uitklap-veld{ flex:1 1 100%; }
  .pf-cm-traject{ flex-wrap:wrap; }
  .pf-cm-toewijs{ position:fixed; left:0; right:0; bottom:0; width:auto;
    border-radius:var(--r-l) var(--r-l) 0 0; max-height:88vh; overflow-y:auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   R102 · portfolio-modus — Changeplannen (102a · 102c · 102d)
   ───────────────────────────────────────────────────────────────────────
   Een changeplan-rij is een bestuursdossier, geen dashboard: geen
   statuskolom, geen voortgangsbalk, geen stoplicht. Wat de rij draagt is wie
   het plan draagt en wat er terugkwam.

   Eén afwijking van het canvas-frame, bewust: de impact-dots dragen de
   gewicht-kleuren van de app (ghost → petrol → petrol-deep), niet rood/amber.
   Hetzelfde woord hoort niet als alarm te lezen in de foto en als neutraal op
   de tijdlijn — en "ingrijpend" is een zwaarte, geen fout.
   ═══════════════════════════════════════════════════════════════════════ */
.pf-cp-tel{ font-size:11.5px; color:var(--ink-mist); }
.pf-cp-rij{ align-items:flex-start; padding-top:8px; padding-bottom:8px; }
.pf-cp-rij .pf-reg-links{ flex-wrap:wrap; align-items:center; }
.pf-cp-rij .pf-reg-rechts{ gap:10px; align-items:center; }
.pf-cp-chevron{ flex:none; font-size:10px; color:var(--ink-mist); }
input.pf-cp-naam{ flex:0 1 auto; min-width:120px; border:0; background:none; padding:0;
  font-family:inherit; font-size:13px; font-weight:var(--gew-vet); color:var(--ink); }
input.pf-cp-naam:focus{ outline:none; box-shadow:0 1px 0 var(--pf-accent); }

/* Eén koppel-taal door de modus: petrol chip met ↗. */
.pf-cp-chip{ flex:none; border:1px solid var(--pf-accent); border-radius:999px;
  background:none; padding:1px 9px; font-family:inherit; font-size:10.5px;
  color:var(--pf-schil); cursor:pointer; }
.pf-cp-chip:hover{ background:rgba(140,192,216,.18); }

.pf-cp-meta{ flex:1 1 100%; display:flex; align-items:baseline; flex-wrap:wrap; }
/* Flex-items dragen hun eigen ruimte: een spatie ín de tekst klapt weg aan de
   rand van een inline element, en dan plakt "sponsor:Els Vandamme" vast. */
.pf-cp-rol{ color:var(--ink-mist); margin-right:4px; }
.pf-cp-waarde{ color:var(--ink-soft); }
.pf-cp-sep{ color:var(--line-ghost); padding:0 6px; }
/* Een gat is even zichtbaar als een vulling — mist, geen amber en geen rood. */
.pf-cp-gat{ color:var(--ink-mist); font-style:italic; }
.pf-cp-cmnaam{ border:0; background:none; padding:0; font-family:inherit; font-size:11px;
  color:var(--pf-schil); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.pf-cp-foto{ flex:none; font-size:11px; color:var(--ink-mist); white-space:nowrap; }
/* De export verdwijnt zodra er een foto binnenkwam; geen vervangend label. */
.pf-cp-export{ flex:none; border:1px solid var(--line-zacht); border-radius:999px;
  background:var(--wit); padding:2px 10px; font-family:inherit; font-size:10.5px;
  color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.pf-cp-export:hover{ border-color:var(--pf-accent); color:var(--pf-schil); }
.pf-cp-importknop{ font-size:12px; }

/* ── de uitklap ───────────────────────────────────────────────────────── */
.pf-cp-uitklap{ display:block; }
.pf-cp-geen{ margin:6px 0 0; font-size:12px; color:var(--ink-mist); }
.pf-cp-rollen{ display:flex; flex-wrap:wrap; gap:10px 14px; }
.pf-cp-rollen .pf-uitklap-veld{ flex:1 1 160px; }

/* De mint-verschilregel: wat er veranderde, één keer, bij de nieuwste foto. */
.pf-cp-verschil{ display:flex; align-items:flex-start; gap:8px; margin-bottom:12px;
  padding:8px 10px; border-left:3px solid #7FC4BE; background:rgba(127,196,190,.10);
  border-radius:0 var(--r-s) var(--r-s) 0; }
.pf-cp-verschil-kop{ flex:none; font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep); }
.pf-cp-verschil-lijst{ flex:1 1 auto; font-size:11.5px; color:var(--ink-soft); }
.pf-cp-verschil-weg{ flex:none; border:0; background:none; padding:0 2px; cursor:pointer;
  font-size:11px; color:var(--ink-mist); }

.pf-cp-carkop{ display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line-zacht); }
.pf-cp-pijl{ flex:none; width:22px; height:22px; border:1px solid var(--line-zacht);
  border-radius:50%; background:var(--wit); font-size:11px; color:var(--ink-soft); cursor:pointer; }
.pf-cp-pijl:disabled{ color:var(--line-ghost); cursor:default; }
.pf-cp-cartitel{ font-size:12px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cp-carmeta{ font-size:11px; color:var(--ink-mist); }
.pf-cp-fotoweg{ margin-left:auto; border:0; background:none; padding:0; font-family:inherit;
  font-size:10.5px; color:var(--line-ghost); cursor:pointer; }
.pf-cp-fotoweg:hover{ color:var(--rood); }

/* ── de groepen in de foto ───────────────────────────────────────────── */
.pf-cp-groepen{ margin-top:10px; }
.pf-cp-grij{ display:grid; grid-template-columns:minmax(120px,1.4fr) 84px 64px 84px 54px minmax(140px,1.6fr);
  align-items:center; gap:10px; padding:5px 0; border-bottom:1px solid var(--line-zacht); }
.pf-cp-grij:last-child{ border-bottom:0; }
.pf-cp-grij-kop{ border-bottom:1px solid var(--line-zacht); padding-bottom:4px; }
.pf-cp-grij-kop .pf-cp-gkol{ font-size:9px; font-weight:var(--gew-zwaar); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-cp-gnaam{ font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-cp-gnaam.is-onbekend{ color:var(--ink-mist); font-style:italic; }
.pf-cp-gkol{ display:flex; align-items:center; gap:3px; font-size:11px; color:var(--ink-soft); }
.pf-cp-gkol-landt.is-leeg::after{ content:'—'; color:var(--line-ghost); }
.pf-cp-gkol-staat{ font-size:11px; color:var(--ink-mist); }
.pf-cp-mijlpaal{ color:var(--pf-schil); }
/* De impact-dots uit de foto dragen de kleuren van de CM-app, één op één
   overgenomen (.c-impact-dot): wit met rand · #D9A63C · #C0563A. Dat is
   dezelfde regel als bij de woorden — de schaal overnemen, niet vertalen.
   Wie beide modi kent, ziet dezelfde stip voor dezelfde stand.

   Dat de portfolio-eigen aanduiding petrol blijft (gewicht-pil, Belasting,
   de 97j-lens) is geen tweede schaal maar een tweede bron: RAG is wat de
   change manager rapporteerde, petrol is wat het portfolio zelf aanhoudt. */
.pf-cp-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.pf-cp-dot[data-gewicht="beperkt"]{ background:var(--wit); box-shadow:inset 0 0 0 1.5px #C9C2B4; }
.pf-cp-dot[data-gewicht="stevig"]{ background:var(--geel); }
.pf-cp-dot[data-gewicht="ingrijpend"]{ background:var(--rood); }
/* Readiness en capaciteit: RAG, want dáár is de kleur wél de betekenis. Een
   open ring zegt "niet gekend", en dat is iets anders dan groen. */
.pf-cp-rag{ width:7px; height:7px; border-radius:50%; flex:none; }
.pf-cp-rag[data-rag="groen"]{ background:var(--groen); }
.pf-cp-rag[data-rag="geel"]{ background:var(--geel); }
.pf-cp-rag[data-rag="rood"]{ background:var(--rood); }
.pf-cp-rag.is-leeg{ background:none; box-shadow:inset 0 0 0 1px var(--line-ghost); }

/* ── risico's en meting ──────────────────────────────────────────────── */
.pf-cp-blok{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.pf-cp-blokkop{ display:flex; align-items:baseline; gap:6px; }
.pf-cp-bloksub{ font-size:10.5px; color:var(--ink-mist); }
.pf-cp-risico{ display:flex; align-items:baseline; gap:10px; padding:4px 0; }
.pf-cp-risico-wat{ flex:1 1 auto; font-size:12px; color:var(--ink); }
.pf-cp-risico-schaal{ flex:none; font-size:10.5px; color:var(--ink-mist); }

.pf-cp-crit{ display:flex; align-items:center; gap:10px; padding:5px 0; }
.pf-cp-crit-doel{ flex:1 1 auto; font-size:12px; color:var(--ink); }
.pf-cp-crit-lees{ flex:none; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; }
.pf-cp-crit-richting{ flex:none; min-width:62px; text-align:right; font-size:10.5px; color:var(--ink-mist); }
/* De staafjes zijn de foto-historiek: oudste licht, nieuwste petrol, de
   doellijn dashed terra. Ze zijn zélf de nudge om periodiek te laden. */
.pf-cp-staafjes{ position:relative; flex:none; display:flex; align-items:flex-end; gap:2px;
  height:22px; width:74px; }
.pf-cp-staaf{ flex:1 1 auto; height:var(--h,6%); background:var(--pf-accent); border-radius:1px; }
.pf-cp-staaf[data-recent="ja"]{ background:var(--pf-schil); }
.pf-cp-staaf.is-leeg{ height:2px; background:var(--line-ghost); }
.pf-cp-doellijn{ position:absolute; left:0; right:0; bottom:var(--d,50%); height:0;
  border-top:1px dashed var(--terra); }

/* ── de voet · de C7-lus ─────────────────────────────────────────────── */
/* De voet draagt een leesregel en de knop ernaartoe. Ze mogen wikkelen: sinds
   de knop de volle naam van het bericht draagt, knijpt hij de leesregel op een
   telefoon tot een kolom van drie woorden onder elkaar. Liever twee regels dan
   één regel die niet te lezen is. */
.pf-cp-voet{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:14px; padding-top:10px;
  border-top:1px solid var(--line-zacht); }
.pf-cp-voet-lees{ flex:1 1 auto; min-width:150px; font-size:11px; color:var(--ink-mist); }
.pf-cp-bericht{ flex:none; border:1px solid var(--line-zacht); border-radius:999px;
  background:var(--wit); padding:3px 11px; font-family:inherit; font-size:11px;
  color:var(--ink-soft); cursor:pointer; }
.pf-cp-bericht:hover{ border-color:var(--pf-accent); color:var(--pf-schil); }

/* ── 102d · de import ────────────────────────────────────────────────── */
.pf-cp-imp-bestand{ margin:6px 0 0; font-size:11px; color:var(--ink-mist); }
.pf-cp-imp-kop{ margin-top:4px; }
.pf-cp-imp-plan{ font-size:13px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cp-imp-vorige{ margin:4px 0 0; font-size:11px; color:var(--ink-mist); }
.pf-cp-imp-datum{ margin-top:10px; max-width:200px; }
/* Amber, nergens rood: een verschil is een verschil, geen fout — mogelijk weet
   de change manager iets wat het register nog niet weet. */
.pf-cp-let{ margin-top:14px; padding:10px 12px; border:1px solid var(--geel);
  border-radius:var(--r-s); background:rgba(217,164,65,.06); }
.pf-cp-letrij{ display:flex; align-items:baseline; gap:8px; padding:4px 0; }
.pf-cp-letteken{ flex:none; width:14px; text-align:center; font-size:12px; color:var(--geel-tekst); }
.pf-cp-lettekst{ flex:1 1 auto; font-size:12px; color:var(--ink); }
.pf-cp-letactie{ flex:none; font-size:10.5px; color:var(--pf-schil); }

/* ── 102c · de export-wizard ─────────────────────────────────────────── */
.pf-cp-exp-onderwerp{ margin:0 0 12px; font-size:12px; color:var(--ink-soft); }
.pf-cp-exp-lijst{ display:flex; flex-direction:column; gap:2px; }
.pf-cp-exp-rij{ display:flex; align-items:baseline; gap:8px; padding:4px 0; }
.pf-cp-exp-wat{ flex:0 0 auto; min-width:150px; font-size:12px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cp-exp-uitleg{ flex:1 1 auto; font-size:11.5px; color:var(--ink-mist); }
.pf-cp-exp-voor{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line-zacht);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pf-cp-exp-naam{ font-size:13px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cp-exp-bron{ font-size:10.5px; color:var(--ink-mist); }
.pf-cp-exp-zin{ flex:1 1 100%; margin:4px 0 0; font-size:11.5px; color:var(--ink-mist); }
textarea.pf-cp-exp-notities{ min-height:110px; }

@media (max-width:700px){
  .pf-cp-grij{ grid-template-columns:1fr; gap:4px; padding:8px 0; }
  .pf-cp-grij-kop{ display:none; }
  .pf-cp-rij{ min-height:44px; }
  .pf-cp-rollen .pf-uitklap-veld{ flex:1 1 100%; }
  .pf-cp-exp-wat{ min-width:0; flex:1 1 100%; }
}

/* ── de groep als landingsplaats (IMPORT-doc §6) ───────────────────────
   Het initiatief is de laag, de groep is het permanente. Alles hier is
   leesregel met een ↗ naar het plan: schrijven gebeurt in het changeplan. */
.pf-uitfoto{ margin-top:8px; padding:8px 10px; background:var(--wit);
  border:1px solid var(--line-zacht); border-radius:var(--r-s); }
.pf-uitfoto-kop{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pf-uitfoto-plan{ border:0; background:none; padding:0; font-family:inherit; font-size:12px;
  font-weight:var(--gew-vet); color:var(--pf-schil); cursor:pointer; text-align:left; }
.pf-uitfoto-plan:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-uitfoto-meta{ font-size:10.5px; color:var(--ink-mist); }
.pf-uitfoto-regel{ margin-top:3px; font-size:11.5px; color:var(--ink-soft); }
.pf-uitfoto-verdeling{ display:flex; align-items:center; gap:4px; margin-top:5px; }
.pf-uitfoto-verdlabel{ font-size:10.5px; color:var(--ink-mist); margin-right:2px; }
/* Aantallen per segment, nooit namen: een indeling is een oordeel dat een
   ander over iemand velde, en zulke etiketten blijven plakken. */
.pf-uitfoto-seg{ min-width:20px; padding:1px 5px; border-radius:999px; text-align:center;
  font-size:10.5px; font-variant-numeric:tabular-nums; color:var(--ink-soft);
  background:var(--cream2); }
.pf-uitfoto-seg[data-rag="groen"]{ background:rgba(44,138,107,.16); color:var(--groen); }
.pf-uitfoto-seg[data-rag="geel"]{ background:rgba(217,166,60,.18); color:var(--geel-tekst); }
.pf-uitfoto-seg[data-rag="rood"]{ background:rgba(192,86,58,.14); color:var(--rood); }

/* ═══════════════════════════════════════════════════════════════════════
   R97 uitgebreid · Belasting (97h) · Stand (97i) · de organogram-lens (97j)
   ───────────────────────────────────────────────────────────────────────
   Drie regels sturen alles hieronder:
   · geen rollup — elke cel, elke rij, elke kaart leest précies één groep;
   · cijfer of dot altijd náást de kleur, want kleur alleen is niet te
     ontcijferen: niet zonder legenda, en niet door iedereen;
   · alles leest — er staat hier geen enkel bewerkbaar veld.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 97h · de matrix ──────────────────────────────────────────────────── */
.pf-bel-wrap{ overflow-x:auto; padding-bottom:4px; }
.pf-bel-matrix{ min-width:max-content; }
.pf-bel-rij{ display:grid; grid-template-columns:minmax(230px,260px) repeat(var(--kolommen),42px);
  align-items:stretch; }
.pf-bel-rij-kop{ position:sticky; top:0; z-index:2; background:var(--cream); }
.pf-bel-kop{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:1px; padding:4px 0 5px; border-bottom:1px solid var(--line-zacht); }
.pf-bel-kopmnd{ font-size:10px; letter-spacing:.03em; color:var(--ink-mist); text-transform:uppercase; }
.pf-bel-kopjaar{ font-size:8.5px; color:var(--line-ghost); }
/* De vandaag-lijn is terra, zoals overal in de app; de +3/+6-markers zijn een
   leeshulp en dus dashed en stil. */
/* Wat voorbij is staat er om te kunnen zien waar iets vandaan komt, niet om
   aan te sturen. Het wijkt dus een stap terug: dezelfde cijfers en dezelfde
   gewicht-kleuren, maar iets doorzichtiger, zodat het oog vanzelf op vandaag
   en verder landt. Niet grijs maken — dan lees je "afgehandeld", en dat is een
   oordeel dat de data niet draagt. */
.pf-bel-kop.is-verleden{ opacity:.55; }
.pf-bel-cel.is-verleden{ opacity:.55; }
.pf-bel-kop.is-nu{ color:var(--terra); font-weight:var(--gew-zwaar); }
.pf-bel-kop.is-nu, .pf-bel-cel.is-nu{ border-left:1px solid var(--terra); }
/* De horizonmarkers lopen dóór de matrix, niet alleen door de kop: "binnen drie
   maanden" is een vraag die je op de rijen beantwoordt, niet op de as. */
.pf-bel-kop.is-marker, .pf-bel-cel.is-marker{ border-left:1px dashed var(--line-ghost); }
.pf-bel-groep{ position:sticky; left:0; z-index:1; display:flex; align-items:baseline; gap:6px;
  padding:5px 10px 5px calc(10px + var(--diepte,0) * 14px); border:0; background:var(--cream);
  border-bottom:1px solid var(--line-zacht); font-family:inherit; text-align:left; cursor:pointer;
  overflow:hidden; }
.pf-bel-rij-kop .pf-bel-groep{ font-size:10px; letter-spacing:.06em; color:var(--ink-mist);
  text-transform:uppercase; cursor:default; }
.pf-bel-groep:hover .pf-bel-naam{ text-decoration:underline; text-underline-offset:2px; }
/* De naam wint van de meta bij ruimtegebrek: "Arts…" naast een volledige
   metaregel is precies verkeerd om. De meta krimpt eerst, en helemaal weg als
   het moet. */
.pf-bel-naam{ flex:0 1 auto; min-width:0; font-size:12px; color:var(--ink); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.pf-bel-meta{ flex:0 100 auto; min-width:0; font-size:10.5px; color:var(--ink-mist);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-bel-cel{ display:flex; align-items:center; justify-content:center; min-height:30px;
  border:0; border-right:1px solid var(--hairline); border-bottom:1px solid var(--line-zacht);
  background:none; font-family:inherit; font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--ink); cursor:pointer; }
/* De vulling volgt het gewicht, en dat blijft zo — maar dan schreeuwt één
   ingrijpend traject harder dan drie die op elkaar vallen, terwijl de botsing
   is waar dit scherm voor bestaat. Het cijfer draagt die botsing, dus krijgt
   het cijfer het gewicht: vet vanaf twee, met een ring eromheen. Kleur zegt
   hoe zwaar, het cijfer zegt hoeveel tegelijk — twee vragen, twee tekens. */
/* Rust een cel volledig op een eigen vermoeden, dan zegt de bestaande
   ghost-taal dat: 1.5px dashed, geen kleur, geen alarm. Eén foto-veld maakt
   hem vast — dan valt de streep weg en staat er een gewone cel. */
.pf-bel-cel.is-vermoed{ outline:1.5px dashed var(--line-ghost); outline-offset:-2px; }
/* Op de donkerste vulling verdwijnt de ghost-streep; daar draagt hij de kleur
   van de tekst die er al op staat. Zelfde teken, ander vlak. */
.pf-bel-cel.is-vermoed[data-gewicht="ingrijpend"]{ outline-color:rgba(255,255,255,.55); }
.pf-bel-cel.is-botsing{ font-weight:var(--gew-zwaar); font-size:12.5px; }
.pf-bel-cel.is-botsing::before{ content:''; position:absolute; width:20px; height:20px;
  border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; opacity:.45; }
.pf-bel-cel{ position:relative; }
/* Een ankerrij is de tak, niet de belasting: naam in mist, geen celvulling. */
.pf-bel-rij.is-anker .pf-bel-naam{ color:var(--ink-mist); }
.pf-bel-rij.is-anker .pf-bel-cel{ cursor:default; }
.pf-bel-cel.is-leeg{ cursor:default; }
.pf-bel-cel.is-nu{ box-shadow:inset 1px 0 0 var(--terra); }
.pf-bel-cel.is-gekozen{ outline:1.5px solid var(--petrol); outline-offset:-1.5px; }
/* Dezelfde gewicht-trap als overal: ghost → petrol → petrol-deep. */
.pf-bel-cel[data-gewicht="beperkt"]{ background:var(--wit); box-shadow:inset 0 0 0 1px var(--line-ghost); }
.pf-bel-cel[data-gewicht="stevig"]{ background:rgba(14,79,75,.12); color:var(--petrol-deep); }
.pf-bel-cel[data-gewicht="ingrijpend"]{ background:var(--pf-schil); color:#fff; }
.pf-bel-legenda{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:10px;
  font-size:11px; color:var(--ink-mist); }
.pf-bel-legenda-sub{ color:var(--line-ghost); }
.pf-bel-legenda-vermoed{ display:inline-flex; align-items:center; gap:5px; }
.pf-bel-legendacel{ display:inline-block; width:16px; height:14px; border-radius:2px;
  background:var(--wit); }
.pf-bel-legendacel.is-vermoed{ outline:1.5px dashed var(--line-ghost); outline-offset:-2px; }
/* Het legenda-staal van de botsing draagt hetzelfde cijfer-met-ring als de
   matrix: een staal dat er anders uitziet dan het ding dat het uitlegt, legt
   niets uit. */
.pf-bel-legendacel.is-botsing{ position:relative; display:inline-flex;
  align-items:center; justify-content:center; width:20px; height:16px;
  font-size:10.5px; font-weight:var(--gew-zwaar); color:var(--petrol-deep);
  background:rgba(14,79,75,.12); }
.pf-bel-legendacel.is-botsing::before{ content:''; position:absolute;
  width:16px; height:16px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px currentColor; opacity:.45; }

.pf-bel-paneel .pf-paneel-kop{ align-items:center; }
.pf-bel-paneel-n{ font-weight:var(--gew-vet); color:var(--petrol-deep); }
.pf-bel-initrij{ display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--hairline); }
.pf-bel-initrij:last-child{ border-bottom:0; }
.pf-bel-initnaam{ flex:1 1 auto; font-size:12px; color:var(--ink); }
.pf-bel-initmeta{ flex:none; font-size:10.5px; color:var(--ink-mist); }
.pf-bel-pijl{ flex:none; border:0; background:none; padding:0 2px; font-size:11px;
  color:var(--pf-schil); cursor:pointer; }
.pf-bel-acties{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.pf-bel-actie{ border:0; background:none; padding:0; font-family:inherit; font-size:11.5px;
  color:var(--pf-schil); cursor:pointer; text-align:left; }
.pf-bel-actie:hover{ text-decoration:underline; text-underline-offset:2px; }

/* De doorsnede-lijn op de tijdlijn: petrol en gestippeld, zodat ze naast de
   terra vandaag-lijn te onderscheiden blijft. Een leeshulp, geen filter. */
/* 95a punt 2 · 2px vol, in de schil-kleur. Vol en niet gestreept: de
   vandaag-lijn is de gestreepte, en twee gestreepte lijnen naast elkaar zijn
   niet uit elkaar te houden. De lijn zelf vangt geen klikken — dat doet haar
   greep, anders sleep je hem per ongeluk vanaf elke pixel van het beeld. */
.pf-doorsnede{ position:absolute; top:0; bottom:0; width:0;
  border-left:2px solid var(--pf-schil); pointer-events:none; z-index:3; }
.pf-doorsnede-lab{ position:absolute; top:2px; left:4px; display:inline-flex; align-items:center;
  gap:4px; padding:1px 7px; border-radius:999px; background:var(--pf-schil); color:#fff;
  font-size:10px; white-space:nowrap; pointer-events:auto; }
.pf-doorsnede-weg{ border:0; background:none; padding:0; color:#fff; font-size:9px; cursor:pointer; }

/* ── 97i · de stand ───────────────────────────────────────────────────── */
.pf-stand-tabel{ overflow-x:auto; }
.pf-stand-rij{ display:grid;
  grid-template-columns:minmax(200px,1.5fr) 84px 70px 84px 66px minmax(170px,1.4fr);
  align-items:center; gap:14px; padding:4px 0; border-bottom:1px solid var(--hairline); }
.pf-stand-rij-kop .pf-stand-kol, .pf-stand-rij-kop .pf-stand-naam{ font-size:9px;
  font-weight:var(--gew-zwaar); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mist); }
/* De groepsrij is alleen de kapstok: geen aflezing, want die hoort per plan. */
.pf-stand-groep{ border-bottom:0; padding-top:10px; }
.pf-stand-groepknop{ grid-column:1 / -1; display:flex; align-items:baseline; gap:6px; border:0;
  background:none; padding:0 0 0 calc(var(--diepte,0) * 14px); font-family:inherit;
  text-align:left; cursor:pointer; }
.pf-stand-groepknop:hover .pf-stand-naam{ text-decoration:underline; text-underline-offset:2px; }
.pf-stand-naam{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-stand-meta{ font-size:10.5px; color:var(--ink-mist); }
.pf-stand-init{ padding-left:16px; }
.pf-stand-initknop{ display:flex; align-items:baseline; gap:6px; border:0; background:none;
  padding:0; font-family:inherit; text-align:left; cursor:pointer; overflow:hidden; }
.pf-stand-initnaam{ font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.pf-stand-initmeta{ font-size:10.5px; color:var(--ink-mist); white-space:nowrap; }
.pf-stand-kol{ display:flex; align-items:center; gap:3px; font-size:11px; color:var(--ink-soft); }
.pf-stand-kol-staat{ font-size:11px; color:var(--ink-mist); }
/* Stilte is cursief, niet rood: dat een changeplan nog niet terug is, is een
   stand en geen fout. */
.pf-stand-init.is-stil .pf-stand-initmeta,
.pf-stand-kol.is-stil{ font-style:italic; color:var(--line-ghost); }
.pf-cp-dot.is-ghost{ background:none; box-shadow:inset 0 0 0 1px var(--line-ghost); }
/* Een groep waar geen enkele foto over gaat is een blindevlek, geen lege rij:
   we weten er niets van, en dat is iets anders dan dat er niets is. */
/* De blindevlek-rij loopt niet over de hele breedte: de uitweg hoort naast de
   zin te staan die haar oproept, niet aan de andere kant van het scherm. */
.pf-stand-blind{ display:flex; align-items:center; gap:10px; padding-left:16px; }
.pf-stand-blindtekst{ font-size:11.5px; color:var(--ink-mist); font-style:italic; }
.pf-stand-vraag{ border:1px dashed var(--line-ghost); border-radius:999px; background:none;
  padding:2px 10px; font-family:inherit; font-size:10.5px; color:var(--ink-soft); cursor:pointer; }
.pf-stand-vraag:hover{ border-color:var(--pf-accent); color:var(--pf-schil); }

/* ── 97j · de lens ────────────────────────────────────────────────────── */
.pf-lenskiezer{ display:flex; align-items:center; gap:6px; }
select.pf-lens-select, select.pf-lens-peil{ height:28px; border:1px solid var(--line-zacht);
  border-radius:999px; background:var(--wit); padding:0 8px; font-family:inherit;
  font-size:11.5px; color:var(--ink); }
/* Alleen het kruisje: "lens uit ✕" voluit brak de kopregel over drie regels
   zodra de filterchips er ook stonden. De titel zegt wat het doet. */
.pf-lens-uit{ flex:none; width:20px; height:20px; border:0; border-radius:50%; background:none;
  padding:0; font-family:inherit; font-size:11px; line-height:1; color:var(--ink-mist);
  cursor:pointer; }
.pf-lens-uit:hover{ background:var(--cream2); color:var(--ink); }
.pf-lenskiezer{ flex:none; }
select.pf-lens-peil{ max-width:110px; }
/* ── de indicator-band ────────────────────────────────────────────────
   Een band boven het canvas, geen popover: je vinkt aan en ziet de boom
   meteen meebewegen, zonder dat er iets over je beeld heen ligt. */
.pf-lensband{ display:flex; flex-direction:column; gap:6px; padding:10px 12px;
  margin-bottom:8px; background:var(--wit); border:1px solid var(--line-zacht);
  border-radius:var(--r-s); }
.pf-lensband-rij{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pf-lensband-familie{ flex:0 0 84px; font-size:9.5px; font-weight:var(--gew-zwaar);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mist); }
.pf-lenschip{ border:1px solid var(--line-zacht); border-radius:999px; background:var(--wit);
  padding:3px 11px; font-family:inherit; font-size:11.5px; color:var(--ink-soft); cursor:pointer; }
.pf-lenschip:hover:not(:disabled){ border-color:var(--pf-accent); color:var(--pf-schil); }
.pf-lenschip.is-actief{ background:var(--pf-lens-3); border-color:var(--pf-lens-3); color:#fff; }
.pf-lenschip:disabled{ color:var(--line-ghost); cursor:default; }
.pf-lens-pil{ border:1px solid var(--line-zacht); border-radius:999px; background:var(--wit);
  padding:4px 12px; font-family:inherit; font-size:11.5px; color:var(--ink); cursor:pointer;
  white-space:nowrap; }
.pf-lens-pil.is-actief{ background:var(--pf-lens-3); border-color:var(--pf-lens-3); color:#fff; }

/* ── de indicator-dots op de kaart ────────────────────────────────────
   Eén dot per gekozen indicator, in kiesvolgorde. Raken meerdere plannen de
   groep, dan één groepje per plan met een streepje ertussen: twee plannen zijn
   twee aflezingen, en er wordt niets opgeteld. */
.pf-lensdots{ display:flex; align-items:center; gap:6px; margin-top:5px; }
.pf-lensdots-groep{ display:flex; align-items:center; gap:4px; }
.pf-lensdots-scheid{ width:1px; height:10px; background:var(--line-ghost); }
.pf-lensdot{ width:9px; height:9px; border-radius:50%; flex:none; }
.pf-lensdot[data-rag="groen"]{ background:var(--groen); }
.pf-lensdot[data-rag="geel"]{ background:var(--geel); }
.pf-lensdot[data-rag="rood"]{ background:var(--rood); }
/* "beperkt" is in de CM-app een witte stip met een rand, niet groen: weinig
   impact is geen oordeel over goed of slecht. Een gehéél lege dot (geen foto)
   is een open ring zonder vulling — dat verschil moet zichtbaar blijven. */
.pf-lensdot[data-rag="open"]{ background:var(--wit); box-shadow:inset 0 0 0 1.5px #C9C2B4; }
.pf-lensdot.is-leeg{ background:none; box-shadow:inset 0 0 0 1px var(--line-ghost); }
.pf-lens-ragstaal{ display:inline-flex; align-items:center; gap:4px; font-size:10px;
  color:var(--ink-mist); }
/* Op een gevuld kaartvlak blijft een RAG-dot leesbaar met een lichte rand. */
.pf-eenheid.is-lens[data-lensstand="ingrijpend"] .pf-lensdot,
.pf-eenheid.is-lens[data-lensstand="botsing"] .pf-lensdot,
.pf-eenheid.is-lens[data-lensstand="nu"] .pf-lensdot{ box-shadow:0 0 0 1px rgba(255,255,255,.5); }

/* Het merk op de kaart: het cijfer of de dot die naast de kleur staat. */
.pf-lensmerk{ position:absolute; top:5px; right:7px; font-size:10.5px;
  font-variant-numeric:tabular-nums; color:var(--ink-soft); letter-spacing:-.04em; }
.pf-eenheid.is-lens{ position:relative; padding-right:26px; }
/* De inkleuring per lens. Zonder aflezing blijft de kaart wat ze was: geen
   kleur is een eerlijke uitkomst en hoort niet als "goed" te lezen. */
.pf-eenheid.is-lens[data-lensstand=""]{ }
/* Drie stappen, alle drie herkenbaar petrol. "ver" krijgt geen tint: een
   vierde, lichtere stap zou onder de .2-grens vallen en dan leest een
   gekleurde kaart als een ongekleurde. */
.pf-eenheid.is-lens[data-lensstand="ver"]{ }
.pf-eenheid.is-lens[data-lensstand="beperkt"],
.pf-eenheid.is-lens[data-lensstand="later"]{ background:var(--pf-lens-1); }
.pf-eenheid.is-lens[data-lensstand="stevig"],
.pf-eenheid.is-lens[data-lensstand="dichtbij"]{ background:var(--pf-lens-2); }
/* Op een getinte kaart verdwijnt mist: #8A867E op de .55-stap haalt 1,3:1.
   De metaregel en het merk gaan daarom naar petrol-deep — dezelfde familie,
   en leesbaar op allebei de lichtere stappen. */
.pf-eenheid.is-lens[data-lensstand="beperkt"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="later"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="stevig"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="dichtbij"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="beperkt"] .pf-lensmerk,
.pf-eenheid.is-lens[data-lensstand="later"] .pf-lensmerk,
.pf-eenheid.is-lens[data-lensstand="stevig"] .pf-lensmerk,
.pf-eenheid.is-lens[data-lensstand="dichtbij"] .pf-lensmerk{ color:var(--petrol-deep); }
/* Een gevulde kaart draagt witte tekst — álle tekst, niet alleen de eerste
   regel. De naam heeft zijn eigen kleur en erft dus niet mee; zonder deze
   regel staat er donkerpetrol op donkerpetrol en is de kaart onleesbaar. */
.pf-eenheid.is-lens[data-lensstand="ingrijpend"],
.pf-eenheid.is-lens[data-lensstand="botsing"],
.pf-eenheid.is-lens[data-lensstand="nu"]{ background:var(--pf-lens-3); color:#fff;
  border-color:var(--pf-lens-3); }
.pf-eenheid.is-lens[data-lensstand="ingrijpend"] .pf-eenheid-naam,
.pf-eenheid.is-lens[data-lensstand="botsing"] .pf-eenheid-naam,
.pf-eenheid.is-lens[data-lensstand="nu"] .pf-eenheid-naam{ color:#fff; }
.pf-eenheid.is-lens[data-lensstand="ingrijpend"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="ingrijpend"] .pf-lensmerk,
.pf-eenheid.is-lens[data-lensstand="ingrijpend"] .pf-teller,
.pf-eenheid.is-lens[data-lensstand="botsing"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="botsing"] .pf-lensmerk,
.pf-eenheid.is-lens[data-lensstand="botsing"] .pf-teller,
.pf-eenheid.is-lens[data-lensstand="nu"] .pf-eenheid-ap,
.pf-eenheid.is-lens[data-lensstand="nu"] .pf-lensmerk,
.pf-eenheid.is-lens[data-lensstand="nu"] .pf-teller{ color:rgba(255,255,255,.82); }
.pf-eenheid.is-lens[data-lensstand="ingrijpend"] .pf-teller,
.pf-eenheid.is-lens[data-lensstand="botsing"] .pf-teller,
.pf-eenheid.is-lens[data-lensstand="nu"] .pf-teller{ border-color:rgba(255,255,255,.34); }
/* De legenda staat bóven de zoomrij, niet erop: allebei hoorden ze linksonder
   in het canvas, en dan dekt de brede legenda de zoomknoppen af. De zoomrij is
   de vaste bediening en houdt zijn hoek; de legenda hoort bij de lens en
   verdwijnt met hem mee. Rechtsonder kan niet — daar staat de FAB. */
/* De legenda hing over het canvas toen ze daar een kind van was. Nu staat ze,
   net als de band, op schermniveau: in de stroom onder de kiezer waar ze bij
   hoort — je kiest een indicator en leest er meteen onder wat de dots zeggen.
   Absoluut gepositioneerd zou ze zich nu aan het scherm hangen in plaats van
   aan het beeld dat ze verklaart. */
.pf-lens-legenda{ display:flex; flex-wrap:wrap;
  align-items:center; gap:5px 8px; margin:0 0 10px; padding:6px 10px;
  background:var(--cream); border:1px solid var(--line-zacht); border-radius:var(--r-s); }
.pf-lens-legenda-zin{ flex:1 1 100%; font-size:10.5px; color:var(--ink-mist); }
.pf-lens-staal{ padding:1px 8px; border-radius:999px; font-size:10px; color:var(--ink-soft);
  background:var(--wit); box-shadow:inset 0 0 0 1px var(--hairline); }
.pf-lens-staal[data-lensstand="beperkt"],
.pf-lens-staal[data-lensstand="later"]{ background:var(--pf-lens-1); box-shadow:none;
  color:var(--petrol-deep); }
.pf-lens-staal[data-lensstand="stevig"],
.pf-lens-staal[data-lensstand="dichtbij"]{ background:var(--pf-lens-2); box-shadow:none;
  color:var(--petrol-deep); }
.pf-lens-staal[data-lensstand="ingrijpend"],
.pf-lens-staal[data-lensstand="botsing"],
.pf-lens-staal[data-lensstand="nu"]{ background:var(--pf-lens-3); color:#fff; box-shadow:none; }
/* #2C8A6B op zijn eigen lichte vlak haalt 2,9:1 — te weinig voor 10px tekst.
   Er is geen groen-tekst-token, dus petrol: donker genoeg en het staat in de
   trap. (Amber heeft zijn eigen leeskleur, rood haalt het wel.) */
.pf-lens-staal[data-lensstand="groen"]{ background:rgba(44,138,107,.16); color:var(--petrol); }
.pf-lens-staal[data-lensstand="geel"]{ background:rgba(217,166,60,.18); color:var(--geel-tekst); }
.pf-lens-staal[data-lensstand="rood"]{ background:rgba(192,86,58,.14); color:var(--rood); }

@media (max-width:700px){
  .pf-bel-rij{ grid-template-columns:minmax(150px,160px) repeat(var(--kolommen),36px); }
  .pf-stand-rij{ grid-template-columns:1fr; gap:3px; }
  .pf-stand-rij-kop{ display:none; }
  .pf-lens-legenda{ margin-top:8px; }
  .pf-lensband-familie{ flex:1 1 100%; }
}

/* ── het lens-paneel: alleen wat je aanwees ────────────────────────────
   Je klikte op een dot, dus antwoordt het paneel eerst op díe indicatoren —
   per plan, met de stand in woorden. Wat er verder over deze groep bekend is
   staat eronder, in het blok uit de changeplannen. */
.pf-lensblok-plan{ margin-top:8px; padding:8px 10px; background:var(--wit);
  border:1px solid var(--line-zacht); border-radius:var(--r-s); }
.pf-lensblok-kop{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  margin-bottom:5px; }
.pf-lensblok-naam{ font-size:12px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-lensblok-meta{ font-size:10.5px; color:var(--ink-mist); }
.pf-lensblok-as{ display:flex; align-items:center; gap:7px; padding:2px 0; }
.pf-lensblok-aslabel{ flex:1 1 auto; font-size:11.5px; color:var(--ink-soft); }
.pf-lensblok-asstand{ flex:none; font-size:11px; color:var(--ink); }
.pf-lensblok-leeg{ margin:4px 0 0; font-size:11.5px; color:var(--ink-mist); }

/* ═══════════════════════════════════════════════════════════════════════
   R95a · mijlpalen ◆, meetpunten ◇, de stiltelezing en het detail-paneel
   ───────────────────────────────────────────────────────────────────────
   Ze zaten buiten de eerste oplevering omdat hun data nog niet bestond. Sinds
   de foto's binnenkomen bestaat ze wél: de change manager markeert ze in zijn
   plan. De tekens zijn exact die van de CM-planning en het FAB-menu — één
   icoontaal over beide apps.
   ═══════════════════════════════════════════════════════════════════════ */
.pf-merk{ position:absolute; top:1px; transform:translateX(-50%); font-size:11px;
  line-height:14px; pointer-events:none; z-index:2; }
.pf-merk-mijlpaal{ color:var(--petrol-deep); }
/* Op een gevulde balk moet het ruitje wit zijn; op een open balk petrol. De
   balk eronder bepaalt dat, dus zetten we allebei en laat de balk-stand kiezen. */
.pf-balk[data-stand="lopend"] ~ .pf-merk-mijlpaal{ color:#fff; }
.pf-merk-meetpunt{ color:var(--geel); }
/* Voorbij en niets over gehoord: cursief, geen kleur — een stilte is geen alarm. */
.pf-merk[data-stand="voorbij"]{ opacity:.55; }
.pf-merk.is-stil{ position:static; transform:none; }
.pf-golfbalk ~ .pf-merk{ top:2px; font-size:10px; }

/* De stiltelezing: cursief in de metaregel, zonder kleur en zonder drempel. */
.pf-init-gehoord{ margin-left:5px; font-style:italic; color:var(--ink-mist); }

/* ── het detail-zijpaneel op de tijdlijn ─────────────────────────────── */
.pf-init-vlak{ display:flex; align-items:flex-start; gap:16px; }
.pf-init-vlak > :first-child{ flex:1 1 auto; min-width:0; }
.pf-init-vlak > .pf-tijdlijnkolom{ flex:1 1 auto; min-width:0; }
.pf-init-paneel{ flex:0 0 320px; }
.pf-init-paneel-status{ display:inline-block; margin-top:2px; padding:2px 10px;
  border-radius:999px; font-size:11px; background:var(--cream2); color:var(--ink-soft); }
.pf-init-paneel-status[data-fase="loopt"]{ background:rgba(18,113,108,.12); color:var(--petrol-deep); }
.pf-init-paneel-status[data-fase="einde"]{ background:var(--cream2); color:var(--ink-mist); }
.pf-init-paneel-reden{ margin:6px 0 0; font-size:11.5px; color:var(--ink-soft); }
.pf-init-paneel-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 5px;
  margin-top:8px; font-size:11.5px; color:var(--ink-soft); }
.pf-init-paneel-sep{ color:var(--line-ghost); }
.pf-init-paneel-leeg{ margin:4px 0 0; font-size:11.5px; color:var(--ink-mist); }
.pf-init-mp{ display:flex; align-items:baseline; gap:7px; padding:4px 0;
  border-bottom:1px solid var(--hairline); }
.pf-init-mp:last-child{ border-bottom:0; }
.pf-init-mp-naam{ flex:1 1 auto; font-size:12px; color:var(--ink); }
.pf-init-mp-datum{ flex:none; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; }
.pf-init-mp-groep{ flex:0 1 auto; font-size:10.5px; color:var(--ink-mist);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-init-mp-stand{ flex:none; font-size:10.5px; color:var(--ink-mist); }
.pf-init-mp[data-stand="voorbij"] .pf-init-mp-stand{ font-style:italic; }
.pf-init-mp[data-stand="gehaald"] .pf-init-mp-stand{ color:var(--groen); }
/* Het paneel leest; de Lijst schrijft. De voet zegt waar je heen moet. */
.pf-init-paneel-voet{ display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.pf-init-paneel-actie{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11.5px; color:var(--pf-schil); cursor:pointer; text-align:left; }
.pf-init-paneel-actie:hover{ text-decoration:underline; text-underline-offset:2px; }

@media (max-width:1100px){
  .pf-init-vlak{ flex-direction:column; }
  .pf-init-paneel{ flex:1 1 100%; width:100%; }
}

/* Wat er verder gepland staat, per groep. De mijlpalen hebben hun eigen blok;
   dit is het gewone werk dat aan een groep hangt — leesregels uit de foto. */
.pf-init-pi-groep{ margin-top:10px; font-size:10px; font-weight:var(--gew-zwaar);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mist); }
.pf-init-pi-groep:first-of-type{ margin-top:4px; }
.pf-init-pi{ display:flex; align-items:baseline; gap:8px; padding:3px 0; }
.pf-init-pi-wat{ flex:1 1 auto; font-size:12px; color:var(--ink); }
.pf-init-pi-datum{ flex:none; font-size:11px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.pf-init-pi-status{ flex:none; min-width:56px; text-align:right; font-size:10.5px;
  color:var(--ink-mist); }
.pf-init-pi-status.is-af{ color:var(--groen); }

/* ══ ronde 114 · Opvolging ═══════════════════════════════════════════════
   De Opvolging van de app, in de portfolio-schil. We hergebruiken .c-aankaart,
   .c-kopregel-tabs en .c-koppelchip letterlijk — dit scherm is dezelfde
   anatomie op andere data, en een eigen kaartvorm zou dat verschil suggereren
   waar er geen is. Alleen wat de modus eigen is staat hier. */
.pf-opvolg-vlak{ display:flex; flex-direction:column; gap:0; }
.pf-opvolg-vlak > .c-kopregel-tabs{ margin-bottom:12px; }
.pf-opvolg-status{ margin:0 0 2px; font-size:12px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); }
.pf-opvolg-uitleg{ margin:0 0 12px; font-size:11px; color:var(--ink-mist); }
.pf-opvolg-lijst{ display:flex; flex-direction:column; gap:8px; }

/* De soort-dot draagt de kleur die de soort in de hele app draagt. Gevuld waar
   de soort een stand kent, ring waar hij er geen heeft — dezelfde taal als de
   ghost-ring elders: een ring betekent "nog niets gezegd". */
/* De soort-dot is die van de CM-app (.soort-dot in componenten.css): vol = een
   bestaand ding, ring = iets dat je nog invult, ruit = meetpunt, vierkant =
   notitie. Het portfolio had een eigen dot waarin álles een cirkel was, en
   daarmee was die grammatica weg — een notitie zag er uit als een gesprek. Hier
   staat alleen nog wat de CM-app niet kent. */
.soort-dot[data-soort="changeplan"]{ border-radius:2px; background:var(--pf-dot); }

/* De linkerrand draagt de stand. Eén plek, dezelfde tokens als de CM-app.

   Waarom de rand hier onzichtbaar was: het portfolio gebruikt .c-aankaart voor
   álle soorten, en dat is in de CM-app juist de áánname-kaart — de ene die per
   ontwerp géén kantlijn draagt (r71-uniform.css geeft de 3px alleen aan
   risico/gesprek/actie/meetpunt/missie). We erfden dus de uitzondering in
   plaats van de regel. Hier zetten we de dikte terug voor de soorten die wél
   een stand hebben; aanname en notitie houden hun 1px rondom. */
.pf-opvolgkaart:not(.pf-geen-kantlijn){ border-left-width:3px; }
.pf-opvolgkaart[data-status="te-doen"],
.pf-opvolgkaart[data-status="open"],
.pf-opvolgkaart[data-status="gepland"]{ border-left-color:var(--st-todo); }
.pf-opvolgkaart[data-status="loopt"]{ border-left-color:var(--st-loopt); }
.pf-opvolgkaart[data-status="let-op"]{ border-left-color:var(--st-issue); }
.pf-opvolgkaart[data-status="geblokkeerd"],
.pf-opvolgkaart[data-status="ingetreden"]{ border-left-color:var(--st-blok); }
.pf-opvolgkaart[data-status="af"],
.pf-opvolgkaart[data-status="gevoerd"],
.pf-opvolgkaart[data-status="gemeten"],
.pf-opvolgkaart[data-status="bevestigd"],
.pf-opvolgkaart[data-status="beheerst"],
.pf-opvolgkaart[data-status="weerlegd"],
.pf-opvolgkaart[data-status="vervallen"]{ border-left-color:var(--st-af); }
/* Over termijn is tijdsdruk, geen stand. Het wint van de kleur van de ladder,
   want dat is wat je als eerste moet zien. Afgerond wint van allebei. */
.pf-opvolgkaart.is-laat{ border-left-color:var(--rood); }
.pf-opvolgkaart.is-afgerond{ border-left-color:#B9B4AA; }
/* Aanname en notitie dragen geen statuskantlijn: hun rand rondom ís de
   betekenis. Uit de designtokens, en het was de oorspronkelijke keuze hier —
   ronde 116 gaf ze er per ongeluk een. */
.pf-opvolgkaart.pf-geen-kantlijn{ border-left-width:1px; border-left-color:var(--line); }

/* Aanname en Notitie dragen geen statuskantlijn: bij hen is de rand rondom de
   betekenis, en een kantlijn zou een stand beloven die ze niet hebben. */
.pf-opvolg-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:6px; }
.pf-opvolg-metawoord{ margin:0; font-size:11px; color:var(--ink-mist); }
.pf-opvolg-koppelchip, .pf-opvolg-meerchip{ border:0; font-family:inherit; cursor:pointer;
  background:#EAF1F0; color:var(--petrol-deep); font-weight:var(--gew-vet);
  font-size:10.5px; border-radius:999px; padding:2px 9px; }
.pf-opvolg-stand{ font-size:10.5px; font-weight:var(--gew-vet); border-radius:999px;
  padding:1px 9px; background:var(--cream2); color:var(--ink-soft); }
.pf-opvolg-stand[data-stand="af"], .pf-opvolg-stand[data-stand="beheerst"],
.pf-opvolg-stand[data-stand="bevestigd"], .pf-opvolg-stand[data-stand="gevoerd"],
.pf-opvolg-stand[data-stand="gemeten"]{ background:rgba(74,124,89,.14); color:var(--groen); }
.pf-opvolg-stand[data-stand="let-op"]{ background:rgba(217,166,60,.18); color:#8A6410; }
.pf-opvolg-stand[data-stand="geblokkeerd"], .pf-opvolg-stand[data-stand="ingetreden"]{
  background:rgba(192,86,58,.14); color:var(--rood); }
.pf-opvolg-vlag{ flex:none; width:3px; height:12px; border-radius:2px; }
.pf-opvolg-vlag[data-vlag="groen"]{ background:var(--groen); }
.pf-opvolg-vlag[data-vlag="amber"]{ background:var(--geel); }
.pf-opvolg-vlag[data-vlag="rood"]{ background:var(--rood); }

.pf-opvolg-zonelabel{ margin:0; font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-mist); }
/* De eigen stand-chips zijn weg: de opvolg-kaart gebruikt de statuswissel
   van de CM-app (c-statustoggle + c-statuschip), zoals elke andere status in
   deze app. */
.pf-opvolg-tekst{ margin:0; font-size:12px; color:var(--ink-soft); line-height:1.45; }
.pf-opvolg-historiek{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; }
.pf-opvolg-blokkop{ flex:1 1 100%; margin:0; font-size:10px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-opvolg-zonevoet{ display:flex; justify-content:flex-end; }

/* Afgerond is niet weg, het ligt alleen niet meer op je bord. Ingeklapt, in
   mist, onder de lijst — nooit ertussen. */
.pf-opvolg-afblok{ margin-top:16px; border-top:1px solid var(--line-zacht); padding-top:10px; }
.pf-opvolg-afkop{ border:0; background:none; font-family:inherit; cursor:pointer;
  font-size:11px; font-weight:var(--gew-vet); color:var(--ink-mist); padding:2px 0; }
.pf-opvolg-afrij{ display:flex; align-items:center; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--hairline); }
.pf-opvolg-afrij:last-child{ border-bottom:0; }
.pf-opvolg-afnaam{ flex:1; min-width:0; margin:0; font-size:12px; color:var(--ink-mist);
  text-decoration:line-through; }
.pf-opvolg-afterug{ flex:none; border:0; background:none; font-family:inherit;
  font-size:10.5px; color:var(--petrol); cursor:pointer; padding:2px 4px; }

.pf-opvolg-pop .pf-nieuw-kop{ display:flex; align-items:center; gap:8px; }
.pf-opvolg-tekstveld{ resize:vertical; min-height:60px; font-family:inherit; }
.pf-opvolg-koppelrij{ display:flex; flex-wrap:wrap; gap:5px; }
.pf-opvolg-koppelx{ border:0; background:none; color:inherit; cursor:pointer;
  font-size:10px; padding:0 0 0 5px; }
/* Verwijderen staat links en afgezonderd, in rood tekst — nooit als knop naast
   Bewaar, want dan staat de uitweg even hard te roepen als de handeling. */
.pf-opvolg-voet{ display:flex; align-items:center; gap:10px; }
.pf-opvolg-verwijder{ flex:none; border:0; background:none; font-family:inherit;
  font-size:11.5px; color:var(--rood); cursor:pointer; padding:4px 0; }
.pf-opvolg-landt{ flex:1; margin:0; text-align:right; font-size:10.5px; color:var(--ink-mist); }
.pf-opvolg-ghost{ margin-top:2px; }

/* De menukop van de FAB: waaraan het volgende item gaat hangen. De rijen
   eronder zijn .c-fabmenu-optie — de rij van de app zelf, met haar stip en haar
   uitlegzin. Hier staat dus alleen wat het menu van de modus eigen is. */
.pf-fabmenu-kop{ padding:6px 12px 4px; font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-fabmenu .c-fabmenu-optie{ gap:12px; }

/* De stille toevoeg-labels die de FAB-items vervingen. Ze dragen de vorm die de
   app er al voor heeft — grijs, klein, onderaan hun eigen lijst — zodat ze
   uitnodigen zonder te roepen. */
.pf-org-ghost{ position:relative; }
.pf-paneel-ghostlabel, .pf-init-afh-ghost{ border:0; background:none; font-family:inherit;
  font-size:11.5px; color:var(--ink-mist); cursor:pointer; padding:6px 0; text-align:left; }
.pf-paneel-ghostlabel:hover, .pf-init-afh-ghost:hover{ color:var(--petrol); }
/* De toevoeg-rij van de tijdlijn: dezelfde rijhoogte als een naamcel, want
   links en rechts staan op één hoogte. Het veld zelf blijft stil. */
.pf-naamcel.is-toevoeg{ justify-content:center; }
.pf-naamcel.is-toevoeg .pf-ghost{ padding:0; }
.pf-spoorcel.is-ghost{ border-bottom:1px solid var(--line-zacht); }
/* Wanneer een notitie of aanname ontstond — geen belofte, dus geen nadruk. */
.pf-opvolg-gemaakt{ margin:0; font-size:10.5px; color:var(--ink-mist); }

/* ══ ronde 114 · de open-teller op elk blok ═════════════════════════════
   .c-blokteller is de teller van de app; hier staat alleen wat de plaatsing
   in deze modus nodig heeft. */
.pf-openteller{ margin-left:2px; }
.pf-reg-rechts .pf-openteller{ flex:none; }
.pf-eenheid .pf-openteller{ align-self:flex-start; margin-top:2px; }
.pf-paneel-teller{ display:flex; padding:2px 0 6px; }
.pf-herkomstpill{ margin:0 0 10px; }
/* De weg terug op een rij in de gefilterde lijst. Dezelfde koppel-chip als
   overal, maar in mist: hij zegt waar je vandaan komt, niet waar je heen moet. */
.pf-herkomstpijl{ border:0; font-family:inherit; cursor:pointer;
  background:var(--cream2); color:var(--ink-mist); font-weight:var(--gew-vet);
  font-size:10.5px; border-radius:999px; padding:2px 9px; }
.pf-herkomstpijl:hover{ color:var(--petrol-deep); }

/* ══ de kleuren van de modus ════════════════════════════════════════════
   Wat vanuit de schil van deze modus opengaat, draagt de kleur van deze modus.
   Het feedback-venster hangt aan het zijmenu en stond in het petrol-groen van
   de changeplan-app: dan opent er iets in de kleur van een ander product terwijl
   je in het portfolio staat. De regel blijft dezelfde als altijd — alleen de
   schil wisselt van kleur; kaarten, statussen en de knoptrap zijn overal
   identiek, en terracotta blijft uitsluitend handelen. */
body.portfolio-modus .c-feedback-chip.is-actief{
  background:var(--pf-schil); border-color:var(--pf-schil); }
body.portfolio-modus .c-feedback-lab,
body.portfolio-modus .c-feedback-hulp b{ color:var(--pf-schil); }
body.portfolio-modus .c-feedback-tekst:focus{
  border-color:var(--pf-schil); box-shadow:0 0 0 2px rgba(20,63,84,.16); outline:none; }
/* De herkomst-pill en de tab-onderstreping horen bij de schil van dit scherm. */
body.portfolio-modus .c-herkomstpill-dot{ background:var(--pf-dot); }
body.portfolio-modus .c-kopregel-tab.is-actief{ box-shadow:inset 0 -2px 0 var(--pf-schil); color:var(--pf-schil); }
body.portfolio-modus .c-kopregel-tab.is-ghost{ color:var(--line-ghost); }
/* 95d — "+ nieuw initiatief" rechts in de filterrij. De chips ervoor zijn
   pillen; deze knop is een echte knop, dus hij krijgt lucht en de rij mag om
   hem heen breken zonder dat hij tegen de laatste chip plakt. */
.pf-init-nieuwknop, .pf-kop-nieuwknop{ flex:none; margin-left:6px; padding:6px 14px; font-size:12px; white-space:nowrap; }
/* Het changeplan in de FAB en op een kaart: de open ring van de missie — "dit
   vraag je op, je maakt het niet zelf" — maar in de kleur van de modus, zodat
   hij niet als missie leest. Eén definitie voor beide plekken, anders lopen ze
   uit elkaar. */
.c-fabmenu-stip[data-k="changeplan"]{
  background:none; border:2px solid var(--pf-dot); border-radius:50%;
  box-sizing:border-box; }

/* ══ ronde 115 · het kompas ═════════════════════════════════════════════
   De anatomie is die van het kompas in de CM-app: .c-groepkop met haar
   mist-sub, .c-fundament-rij met haar teken en de open-teller rechts. Hier
   staat alleen wat het kompas van deze modus eigen is. */
/* Het kompas woont in het paneel van de app (.c-paneel in schil.css); hier
   staat alleen wat de rijen van deze modus eigen is. De weergave-pillen en
   de kop komen ongewijzigd van daar — een eigen opmaak eroverheen zou op de
   pixel na hetzelfde zijn en meteen uit elkaar gaan lopen. */
.pf-kompas-body{ display:flex; flex-direction:column; }
.pf-kompas-rij{ width:100%; text-align:left; }
.pf-kompas-naam{ font-weight:var(--gew-vet); color:var(--ink); }
/* Een rij die nog niets draagt roept niet: de naam staat er normaal, de bol
   zegt het al. Geldt voor beide vocabulaires — 'leeg' in de kern, 'open'
   in de verkenningen. */
.pf-kompas-rij[data-staat="leeg"] .pf-kompas-naam,
.pf-kompas-rij[data-staat="open"] .pf-kompas-naam{ font-weight:var(--gew-normaal); }
/* Het woord rechts op de rij: "opent ▸" of "straks". Het zegt wat er gebeurt
   als je klikt, en bij "straks" juist dat er nog niets gebeurt. */
.pf-kompas-aan{ margin-left:auto; flex:none; font-size:10.5px; color:var(--ink-mist); }
.pf-kompas-rij:disabled{ cursor:default; opacity:.72; }
.pf-kompas-instrument{ padding-left:26px; }
.pf-kompas-rust{ margin:12px 0; font-size:12.5px; color:var(--ink-mist); }
.pf-kompas-nr{ flex:none; width:18px; font-size:11px; font-weight:var(--gew-zwaar);
  color:var(--pf-dot); }

/* ── K1 · wie beslist hier ─────────────────────────────────────────────── */
/* Eén kaart op het canvas, met de kaartkleur van de app: cream met de
   standaardrand. Wit is de kleur van de kompaslaag (het paneel), niet van een
   kaart op het canvas — daar leest wit als "dit hoort ergens anders bij". */
.pf-k1-kaart{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-m); padding:18px 20px;
  display:flex; flex-direction:column; }
/* De secties erbinnen dragen geen eigen vlak meer: ze worden gescheiden door
   hun eyebrow-label en een haarlijn, zoals elke kaart van de app. */
.pf-k1-blok{ padding:14px 0; display:flex; flex-direction:column; gap:8px; }
.pf-k1-blok + .pf-k1-blok{ border-top:1px solid var(--line-zacht); }
.pf-k1-blok:first-child{ padding-top:0; }
.pf-k1-blok:last-child{ padding-bottom:0; }
/* De bron als nazin: mist, met een stille wijzig-link erachter. */

/* De kopbalk van een kernkaart: kruimel en titel op één regel, rechts de
   perioden. Cream met een onderrand, zoals elke kopbalk van de app — de titel
   stond los op het canvas en dan draagt de kop geen scherm meer. */
.c-kopregel-blok.pf-kompaskop{ display:flex; align-items:baseline; gap:10px;
  flex-wrap:wrap; width:100%; }
.pf-kompaskop .pf-kruimel{ display:inline; flex:none; padding:0; }
.pf-kompaskop .c-kopregel-titel{ flex:0 1 auto; min-width:0; }
/* Wikkelen, want dit is een rij chips en die groeit met de data: op V3 staan
   er vier vensters naast elkaar en dat is op een telefoon breder dan het
   scherm. flex:none hield ze bovendien op hun volle maat, dus schoof de hele
   pagina mee. */
.pf-kompaskop-perioden{ margin-left:auto; display:flex; align-items:baseline;
  gap:10px; flex:0 1 auto; min-width:0; flex-wrap:wrap; }
.pf-kompaskop-chip{ background:#EAF1F0; color:var(--petrol-deep); font-weight:var(--gew-vet);
  font-size:10.5px; border-radius:999px; padding:2px 10px; }
.pf-kompaskop-volgend{ font-size:10.5px; color:var(--ink-mist); }
body.portfolio-modus #kopregel:has(.pf-kompaskop){
  background:var(--cream); border-bottom:1px solid var(--line); }
.pf-k1-blokkop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
/* Het beslisniveau staat bovenaan de kaart, boven de rollen: het zegt waar dit
   alles over gaat, en de rollen zeggen wie erbij horen. Een halve breedte is
   genoeg — een eenheidsnaam is kort, en volle breedte zou hem als het
   belangrijkste invulveld laten lezen terwijl het een keuze is. */
/* ── portfoliobeheer van ──────────────────────────────────────────────────
   Ná de keuze is dit geen veld meer maar een vastgezette kaart. Dat is de hele
   boodschap: dit bestand draagt één portfolio. Een dropdown zou zeggen "kies er
   maar een", en dat is niet waar — wisselen kan, maar het is een handeling. */
.pf-k1-beheer{ margin-bottom:16px; max-width:520px; }
.pf-k1-beheerkaart{ display:flex; align-items:flex-start; gap:10px; margin-top:6px;
  background:var(--wit); border:1px solid var(--pf-dot); border-left-width:3px;
  border-radius:var(--r-s); padding:10px 12px; }
.pf-k1-beheerslot{ flex:none; color:var(--pf-dot); font-size:13px; line-height:1.35; }
.pf-k1-beheermidden{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-k1-beheernaam{ font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:15px; color:var(--petrol-dark); }
.pf-k1-beheereig{ font-size:11px; color:var(--ink-soft); }
.pf-k1-beheergeen{ font-size:11px; color:var(--terra); }
.pf-k1-beheerwissel{ flex:none; border:0; background:none; font-family:inherit;
  font-size:11px; color:var(--petrol); cursor:pointer; padding:0; }
.pf-k1-beheer > .pf-k1-mist{ margin-top:6px; }
.pf-k1-beheerzoek{ display:flex; flex-direction:column; gap:6px; margin-top:6px;
  align-items:flex-start; }
/* De lijst hangt aan hét veld, niet aan de hele zone: alleen dan klopt top:100%
   en schuift hij niet over de tekst eronder. Hij stond op een gegokte hoogte. */
.pf-k1-beheerveld{ position:relative; width:100%; }
.pf-k1-beheerinvoer{ width:100%; box-sizing:border-box; }
/* Twee regels per suggestie: de eenheid, eronder kleiner haar eigenaar. Je kiest
   een eenheid, maar je wilt weten wie er mee komt. */
.pf-k1-beheersug{ align-items:center; padding:8px 11px; }
.pf-k1-sugkolom{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pf-k1-sugeig{ font-size:10.5px; color:var(--ink-mist); }
.pf-k1-beheerstop{ border:0; background:none; font-family:inherit; font-size:11px;
  color:var(--ink-soft); cursor:pointer; padding:0; }
.pf-k1-beheervoet{ margin:0; }
.pf-k1-beheerzoek > .pf-leegvlak-knop{ margin-top:2px; }
.pf-k1-rollen{ display:flex; gap:18px; flex-wrap:wrap; }
.pf-k1-rollen > *{ flex:1 1 220px; min-width:0; }
.pf-k1-mist{ margin:0; font-size:10.5px; color:var(--ink-mist); }
/* .pf-uitklap-veld draagt flex:1 1 160px voor de kolommen van de uitklap. In
   een kolom-flex betekent dat groeien in de hóógte, en dan rekt een kort
   tekstveld het blok op met een gat eronder. Hier is elk veld gewoon zo hoog
   als het is. */
.pf-k1-blok > .pf-uitklap-veld,
.pf-hefboom-zone > .pf-uitklap-veld{ flex:0 0 auto; margin-bottom:0; }
.pf-k1-gebied{ resize:vertical; min-height:46px; font-family:inherit; }
/* De leesregel met "neem over ▸": een voorstel, geen inhoud. Ze staat daarom
   in mist en niet als veld — pas wat je overneemt staat in het bestand. */
.pf-k1-leesregel{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  background:var(--cream2); border-radius:var(--r-s); padding:7px 10px; }
.pf-k1-leestekst{ flex:1; min-width:0; font-size:11.5px; color:var(--ink-mist); }
.pf-k1-neemover{ flex:none; border:0; background:none; font-family:inherit;
  font-size:11.5px; font-weight:var(--gew-vet); color:var(--petrol); cursor:pointer; padding:0; }
.pf-k1-chips{ display:flex; flex-wrap:wrap; gap:5px; }
/* ── mensen aan een tafel ─────────────────────────────────────────────────
   Bevestigd is een gewone chip; een voorstel is dezelfde chip in grijs met een
   +. Grijs zegt: dit staat nog niet in het bestand. Zou het er als gewone chip
   staan, dan lees je het als inhoud en niemand heeft het gezegd. */
.pf-personen{ display:flex; flex-direction:column; gap:8px; }
.pf-personen-rol{ font-weight:var(--gew-normaal); opacity:.72; }
.pf-personen-voorstel{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.pf-personen-voorstelkop{ font-size:10.5px; color:var(--ink-mist); margin-right:2px; }
.pf-personen-ghostchip{ background:none; border:1px dashed var(--line-sterk);
  color:var(--ink-soft); font-family:inherit; cursor:pointer; }
.pf-personen-ghostchip:hover{ border-style:solid; border-color:var(--petrol);
  color:var(--petrol-deep); background:#EAF1F0; }
.pf-personen-plus{ margin-left:6px; font-weight:var(--gew-vet); color:var(--petrol); }
/* De naamselectie: dezelfde bouw als het zoekveld op Organisatie, met de rol
   onder de naam. De lijst hangt aan hét veld, anders staat hij ergens los. */
.pf-persoonzoek{ max-width:320px; }
.pf-persoonzoek-veld{ position:relative; }
.pf-persoonzoek-invoer{ width:100%; box-sizing:border-box; }
.pf-persoonzoek-sug{ align-items:center; padding:8px 11px; }
.pf-persoonzoek-kolom{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pf-persoonzoek-rol{ font-size:10.5px; color:var(--ink-mist); }
.pf-k1-pm .pf-persoonzoek{ max-width:none; }

/* De rollen op de detailkaart van een eenheid: naam boven, rolwoord eronder in
   mist. Twee rollen die elders geschreven worden, hier bij elkaar gelezen. */
.pf-paneel-rollen{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0; }
.pf-paneel-rolrij{ display:flex; flex-direction:column; gap:1px; }
.pf-paneel-rolnaam{ font-size:12.5px; color:var(--ink); }
.pf-paneel-rolwoord{ font-size:10.5px; color:var(--ink-mist); }
.pf-k1-chip{ background:#EAF1F0; color:var(--petrol-deep); font-weight:var(--gew-vet);
  font-size:10.5px; border-radius:999px; padding:2px 9px; border:0; font-family:inherit; }
.pf-k1-periode{ margin-left:auto; border:1px solid var(--line); background:var(--wit);
  font-family:inherit; font-size:10.5px; color:var(--ink-soft); cursor:pointer;
  border-radius:999px; padding:2px 10px; }
.pf-k1-ghost{ margin-top:2px; }

/* ── de hefboom ────────────────────────────────────────────────────────── */
.pf-hefboom{ cursor:pointer; margin-bottom:8px; }
.pf-hefboom[data-toestand="gehaald"]{ border-left-color:var(--groen); }
.pf-hefboom[data-toestand="losgelaten"]{ opacity:.7; }
.pf-hefboom-inits{ flex:none; font-size:10.5px; color:var(--ink-mist); }
.pf-hefboom-toestand{ flex:none; border:1px solid var(--line); background:var(--wit);
  font-family:inherit; font-size:10.5px; color:var(--ink-soft); cursor:pointer;
  border-radius:999px; padding:1px 9px; }
.pf-hefboom-toestand[data-toestand="gehaald"]{ background:rgba(74,124,89,.14);
  border-color:transparent; color:var(--groen); font-weight:var(--gew-vet); }
.pf-hefboom-toestand[data-toestand="losgelaten"]{ color:var(--line-ghost); }
.pf-hefboom-gehaald{ margin-top:4px; font-size:10.5px; color:var(--groen); }
.pf-hefboom-zone{ gap:12px; }
.pf-hefboom-paar{ display:flex; gap:14px; flex-wrap:wrap; }
.pf-hefboom-paar > *{ flex:1 1 240px; min-width:0; }
.pf-hefboom-veld{ display:flex; flex-direction:column; gap:3px; }
.pf-hefboom-tekst{ resize:vertical; font-family:inherit; }
.pf-hefboom-groepkies{ max-width:320px; }
/* De groepen die anders moeten gaan werken: chips, een keuzelijst eronder en de
   weg naar Organisatie. Het was een rij chips met een zoekveld ertussen; nu is
   het een blok met een label, want het draagt een eigen vraag. */
.pf-hefboom-groepen{ display:flex; flex-direction:column; align-items:flex-start;
  gap:6px; }
.pf-hefboom-groepkies{ max-width:320px; }
.pf-hefboom-aflezing{ display:flex; flex-direction:column; gap:6px;
  background:var(--cream2); border-radius:var(--r-s); padding:10px 12px; }
.pf-hefboom-vannaar{ display:flex; gap:14px; flex-wrap:wrap; }
.pf-hefboom-vannaar > *{ flex:1 1 140px; min-width:0; }
.pf-hefboom-meting{ margin:0; font-size:11px; color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-hefboom-meting.is-ghost{ color:var(--line-ghost); font-weight:var(--gew-normaal); }
.pf-hefboom-initblok{ display:flex; flex-direction:column; gap:6px; }
.pf-hefboom-niemand{ margin:0; font-size:11.5px; color:var(--ink-mist); font-style:italic; }
.pf-hefboom-samen{ margin:0; font-size:11px; color:var(--ink-mist); }

/* het toestand-popovertje: vier standen met hun betekenis eronder, want
   "meegenomen" en "losgelaten" zijn geen woorden die zichzelf uitleggen */
.pf-toestandpop{ z-index:var(--z-flyout); background:var(--wit);
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sch-flyout);
  padding:4px; min-width:210px; display:flex; flex-direction:column; }
.pf-toestandpop-rij{ display:flex; flex-direction:column; gap:1px; align-items:flex-start;
  border:0; background:none; font-family:inherit; text-align:left; cursor:pointer;
  padding:7px 10px; border-radius:var(--r-s); font-size:12px; color:var(--ink); }
.pf-toestandpop-rij:hover{ background:var(--cream2); }
.pf-toestandpop-rij.is-actief{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-toestandpop-sub{ font-size:10.5px; color:var(--ink-mist); font-weight:var(--gew-normaal); }

/* ── K3 · werkafspraken ────────────────────────────────────────────────── */
.pf-k3-blok{ gap:4px; }
.pf-k3-tekst{ resize:vertical; font-family:inherit; margin-top:4px; }


/* ══ ronde 115b · werkafspraken met data, en het dashboard dat ze bewaakt ══
   Een afspraak die de app kan nálopen staat als vinkje of getal naast zijn
   tekst. De tekst blijft: die draagt de uitzondering die geen vinkje vangt. */
.pf-k3-vink{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:4px 11px 4px 8px;
  background:var(--wit); }
.pf-k3-vink.is-aan{ border-color:var(--petrol); background:#EAF1F0; }
.pf-k3-vink input{ margin:0; accent-color:var(--petrol); }
.pf-k3-vinktekst{ font-size:11.5px; color:var(--ink); }
.pf-k3-vink.is-aan .pf-k3-vinktekst{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-k3-ritme{ max-width:260px; }
.pf-k3-getalrij{ display:flex; align-items:center; gap:8px; }
input.pf-k3-getal{ width:74px; flex:none; }
.pf-k3-tweede-kop{ margin-top:16px; }

/* Op Werkafspraken staat alleen dát je regel bijt en hoe vaak; de namen staan
   op het Dashboard, waar je er iets mee doet. */
.pf-k3-signaal{ display:flex; align-items:center; gap:8px; width:100%;
  border:0; background:none; font-family:inherit; text-align:left; cursor:pointer;
  padding:6px 0 0; }
.pf-k3-signaaldot{ flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--terra); }
.pf-k3-signaal[data-ernst="voorstel"] .pf-k3-signaaldot{ background:none;
  border:2px solid var(--line-sterk); box-sizing:border-box; }
.pf-k3-signaaltekst{ font-size:11.5px; color:var(--ink); }
.pf-k3-signaalnaar{ font-size:10.5px; color:var(--petrol); flex:none; margin-left:auto; }

/* ── het dashboard ─────────────────────────────────────────────────────── */
.pf-bord-lijst{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.pf-bord-signaal{ background:var(--cream); border:1px solid var(--line);
  border-left:3px solid var(--terra); border-radius:var(--r-m); padding:12px 14px;
  display:flex; flex-direction:column; gap:8px; }
.pf-bord-signaal[data-ernst="voorstel"]{ border-left-color:var(--line-sterk); }
.pf-bord-signaalkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pf-bord-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--terra);
  align-self:center; }
.pf-bord-signaal[data-ernst="voorstel"] .pf-bord-dot{ background:none;
  border:2px solid var(--line-sterk); box-sizing:border-box; }
.pf-bord-signaaltekst{ font-size:13px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-bord-ernst{ margin-left:auto; flex:none; font-size:10.5px; color:var(--ink-mist); }
.pf-bord-namen{ display:flex; flex-wrap:wrap; gap:5px; }
.pf-bord-naam{ border:1px solid var(--line); background:var(--wit); font-family:inherit;
  font-size:11.5px; cursor:pointer; }
.pf-bord-naam:hover{ border-color:var(--petrol); color:var(--petrol-deep); }
.pf-bord-voet{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.pf-bord-voet > .pf-leegvlak-knop{ margin-top:0; }

/* ══ ronde 116 · van formulier naar werkende afspraak ═════════════════════
   Elke afspraak heeft drie delen: de regel (gestructureerd), de uitleg (tekst)
   en het gevolg (waar ze straks opduikt). Dat derde deel is de reden dat dit
   scherm geen administratie meer is, en het krijgt dus een eigen vorm: een
   ingesprongen regel met een pijl, in petrol, direct onder het onderschrift. */
.pf-k3-gevolg{ display:flex; align-items:baseline; gap:6px; margin:2px 0 8px;
  font-size:10.5px; color:var(--petrol-deep); }
.pf-k3-gevolgpijl{ flex:none; opacity:.7; }

/* De voorstelbalk. De regels staan voorgevuld, en dat mag niet doorgaan voor
   zijn afspraak: tot hij bevestigt zijn de signalen open vragen. */
.pf-k3-voorstelbalk{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#EAF1F0; border:1px solid var(--petrol); border-radius:var(--r-m);
  padding:10px 12px; margin-bottom:16px; }
.pf-k3-voorstelzin{ flex:1 1 260px; font-size:11.5px; color:var(--petrol-deep); }

/* ── 1 · de niveaus als drempels ──────────────────────────────────────── */
.pf-k3-niveaus{ display:flex; flex-direction:column; gap:6px; }
.pf-k3-niveau{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-m); padding:7px 10px;
  background:var(--wit); }
.pf-k3-niveau.is-uit{ background:var(--cream2); border-style:dashed; }
.pf-k3-niveau.is-uit .pf-k3-niveaunaam{ color:var(--ink-mist); }
.pf-k3-niveaunaam{ flex:none; min-width:150px; font-size:12px;
  font-weight:var(--gew-vet); color:var(--ink); }
.pf-k3-zin{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pf-k3-zinwoord{ font-size:11.5px; color:var(--ink); }
.pf-k3-zin .pf-uitklap-kies{ width:auto; min-width:0; font-size:11.5px; padding:4px 8px; }
.pf-k3-gewicht{ min-width:100px; }
input.pf-k3-aantal{ width:56px; flex:none; text-align:center; }
.pf-k3-altijd{ font-size:10.5px; color:var(--ink-mist); }
input.pf-k3-niveau-uitleg{ flex:1 1 180px; width:auto; min-width:140px; font-size:11.5px; }

/* Het handvat. Twee pijlknoppen waren geen bekend patroon; een greep met een
   grijpcursor wel. De pijltoetsen doen hetzelfde voor wie niet sleept. */
.pf-k3-greep{ flex:none; border:0; background:none; padding:0 2px; cursor:grab;
  color:var(--ink-mist); font-size:13px; line-height:1; }
.pf-k3-greep:active{ cursor:grabbing; }
.pf-k3-greep:hover{ color:var(--petrol); }
.pf-k3-greep:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; border-radius:3px; }
/* De rij die je sleept zweeft boven de rest; waar hij landt staat een lijn. */
.pf-k3-niveau.is-sleept{ opacity:.55; box-shadow:0 6px 16px rgba(0,0,0,.16); }
.pf-k3-niveau.is-doelboven{ box-shadow:0 -2px 0 0 var(--petrol) inset; }
.pf-k3-niveau.is-doelonder{ box-shadow:0 2px 0 0 var(--petrol) inset; }
.pf-k3-volgorde{ margin:6px 0 0; font-size:10.5px; color:var(--ink-mist); }

/* ── 2 · de randvoorwaarden als lijst ─────────────────────────────────── */
.pf-k3-voorwaarden{ display:flex; flex-direction:column; gap:4px; }
.pf-k3-voorwaarde{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding:6px 0; }
.pf-k3-voorwaarde.is-uit .pf-k3-vw-naam{ color:var(--ink-mist); text-decoration:line-through; }
.pf-k3-voorwaarde.is-ghost{ border-bottom:0; padding-top:8px; }
.pf-k3-vw-naam{ flex:none; min-width:170px; font-size:12px; color:var(--ink); }
.pf-k3-vw-bron{ flex:none; font-size:10px; color:var(--ink-mist); }
.pf-k3-vw-vanaf{ flex:none; font-size:10.5px; color:var(--ink-mist); }
input.pf-k3-vw-uitleg{ flex:1 1 200px; width:auto; min-width:150px; font-size:11.5px; }
.pf-k3-vw-weg{ flex:none; border:0; background:none; cursor:pointer;
  color:var(--ink-mist); font-size:12px; padding:2px 4px; }
.pf-k3-vw-weg:hover{ color:var(--terra); }
input.pf-k3-vw-ghost{ flex:1 1 auto; width:auto; border-style:dashed; font-size:11.5px; }
.pf-k3-vink.is-kaal{ padding:4px; border-radius:var(--r-s); }

/* ── 4 · de borging als reeks ─────────────────────────────────────────── */
.pf-k3-vervolg{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pf-k3-vervolgchip{ font-size:11px; }
input.pf-k3-vervolgbij{ width:96px; flex:none; }
.pf-k3-reeks{ margin:6px 0 0; font-size:11.5px; color:var(--petrol-deep); }

/* ── het dashboard erbij ──────────────────────────────────────────────── */
.pf-bord-uitleg{ margin:4px 0 0; font-size:11px; color:var(--ink-mist); }
.pf-bord-kalibratie{ margin-top:20px; display:flex; flex-direction:column; gap:4px; }
.pf-bord-afwijking{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding:6px 0; }
.pf-bord-afwzin{ font-size:11.5px; color:var(--ink); }
.pf-bord-afwreden{ font-size:11px; color:var(--ink-mist); font-style:italic; }
/* Aanvaarden is een tekstknop en geen primaire actie: het is een uitspraak
   over één geval, niet iets wat de app van je wil. */
.pf-bord-aanvaard{ margin-left:auto; flex:none; border:1px solid var(--line);
  background:var(--wit); font-family:inherit; font-size:11px; color:var(--petrol-deep);
  border-radius:999px; padding:2px 10px; cursor:pointer; }
.pf-bord-aanvaard:hover{ border-color:var(--petrol); background:var(--cream2); }
.pf-init-aanvaard{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:6px; }
.pf-init-aanvaard-terug{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11px; color:var(--petrol-deep); cursor:pointer; }
.pf-init-aanvaard-terug:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-bord-ritme{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.pf-bord-ritme > .pf-leegvlak-knop{ margin-top:0; }

/* ── het voorstel bij het initiatief ──────────────────────────────────────
   De regel staat er altijd bij. Zonder haar is het een uitspraak van de app, en
   dat is precies wat het niet is: het is zijn eigen afspraak die terugkomt. */
.pf-init-voorstel{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:6px 0 0; padding:6px 9px; border-radius:var(--r-s);
  background:var(--cream2); border:1px solid var(--line);
  font-size:11.5px; color:var(--ink); }
.pf-init-voorstel.is-wacht{ background:none; border:0; padding:2px 0;
  color:var(--ink-mist); }
.pf-init-voorstel.is-gevolgd{ background:#EAF1F0; border-color:var(--petrol); }
.pf-init-voorstel-regel{ color:var(--ink-mist); }
.pf-init-voorstel-pijl{ color:var(--ink-mist); }
.pf-init-voorstel-niveau{ font-weight:var(--gew-vet); color:var(--petrol-deep); }
.pf-init-voorstel-neem{ border:0; background:none; cursor:pointer; font-family:inherit;
  font-size:11px; color:var(--petrol); padding:0; margin-left:auto; }
.pf-init-voorstel-gevolgd{ margin-left:auto; font-size:10.5px; color:var(--petrol-deep); }
.pf-init-voorstel-uitleg{ flex:1 1 100%; font-size:11px; color:var(--ink-mist); }
.pf-init-afwijking{ display:flex; flex-direction:column; gap:3px; margin-top:6px; }

/* ── de randvoorwaarden op het initiatief ─────────────────────────────── */
.pf-init-voorwaarden{ margin-top:10px; }
.pf-init-vw{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-init-vw-vink{ display:inline-flex; align-items:center; }
.pf-init-vw-vink input{ margin:0; accent-color:var(--petrol); }
.pf-init-vw-naam{ font-size:12px; color:var(--ink); }
.pf-init-vw-vanaf{ font-size:10.5px; color:var(--ink-mist); }
.pf-init-vw-uitleg{ font-size:10.5px; color:var(--ink-mist); font-style:italic;
  flex:1 1 100%; }
.pf-init-vw > .pf-leegvlak-knop{ margin:0 0 0 auto; }

/* De intake-afspraak op het aanmaakvenster: hetzelfde veld, tweede plek. */
.pf-nieuwinit-intake{ background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-s); padding:8px 10px; margin-bottom:10px; }
.pf-nieuwinit-intaketekst{ margin:3px 0 0; font-size:11.5px; color:var(--ink); }

.pf-cp-exp-uitgezet{ margin:6px 0 0; font-size:10.5px; color:var(--ink-mist); }

/* De hefboom draagt nu ook de koppeling zelf: chips met een kruisje, en een
   keuzelijst die er ook staat als er al iets hangt. */
.pf-hefboom-initnaar{ border:0; background:none; padding:0; font:inherit;
  color:inherit; cursor:pointer; }
.pf-hefboom-initkies{ max-width:320px; margin-top:6px; }

/* Een gewogen risico draagt zijn weging in de kaartkop: twee woorden, geen
   cijfer. De tint volgt de impact, zodat je hem ziet zonder hem te lezen. */
.pf-opvolg-weging{ background:#F6EBE3; border-color:#E4C9B4; color:#8A4B22; }
.pf-opvolg-weging[data-impact="beperkt"]{ background:var(--cream2); border-color:var(--line); color:var(--ink-mist); }
.pf-opvolg-weegblok{ margin-top:10px; }

/* De zin die zegt wat een stand betekent en wat de volgende stap is. */
.pf-opvolg-standhint{ margin:6px 0 0; font-size:11.5px; color:var(--ink-mist); }
.pf-opvolg-oogst{ display:block; margin-top:10px; }

/* Het meetpunt als reeks. De ruitjes-strook zelf komt uit de CM-app
   (c-meetstrook67 en familie); hier alleen het ritme erboven. */
.pf-opvolg-meetblok{ margin-top:10px; }
.pf-opvolg-ritmerij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
select.pf-opvolg-ritme{ width:auto; min-width:170px; flex:none; font-size:11.5px; padding:4px 8px; }
.pf-opvolg-meetweg{ border:0; background:none; cursor:pointer; font-family:inherit;
  font-size:11px; color:var(--ink-mist); padding:0; margin-right:auto; }
.pf-opvolg-meetweg:hover{ color:var(--terra); }

/* De naamselectie als veld: chip met kruisje wanneer gekozen, de zoeker
   wanneer leeg. Overal waar één persoon gevraagd wordt. */
.pf-persoonveld{ min-width:0; }
.pf-persoonveld-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.pf-persoonveld-chip{ font-size:11.5px; }
.pf-cp-initchip{ align-self:flex-start; font-size:11.5px; }
/* Het risico-venster zet eerste signaal en verantwoordelijke naast elkaar. */
.pf-opvolg-poppaar{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .pf-opvolg-poppaar{ grid-template-columns:1fr; } }

/* Het gesprek-venster: het privé-blok met wie en wanneer, en de zin die zegt
   wat je ná het gesprek komt doen. */
.pf-opvolg-prive{ border:1px dashed var(--line-sterk); border-radius:var(--r-m);
  padding:12px; background:var(--cream2); }
.pf-opvolg-privekop{ margin:0 0 4px; font-size:10.5px; letter-spacing:var(--ls-label);
  font-weight:var(--gew-zwaar); color:var(--ink-soft); }
.pf-opvolg-privesub{ margin:0 0 10px; font-size:11.5px; color:var(--ink-mist); }
.pf-opvolg-gesprekhint{ margin:10px 0; padding:10px 12px; border-radius:var(--r-m);
  background:#EAF1F0; font-size:11.5px; color:var(--petrol-deep); }

/* De naam van een changeplan met zijn soort-dot ervoor, op één regel. */
.pf-cp-naamrij{ display:flex; align-items:center; gap:8px; min-width:0; }
.pf-cp-naamrij .pf-cp-naam{ flex:1; min-width:0; }

/* De standrij: het label links, de wissel ernaast. */
.pf-opvolg-standrij{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pf-opvolg-standrij .pf-opvolg-zonelabel{ margin:0; }

/* ══════════════════════════════════════════════════════════════════════════
   R113 · het Dashboard
   ─────────────────────────────────────────────────────────────────────────
   De kaartvorm zelf komt uit bord.css (.c-dash-sec): dezelfde witte kaart,
   dezelfde genummerde petrol-schijf, dezelfde kopletter als het dashboard van
   de CM-app. Hier staat alleen wat de portfolio-kaarten er bovenop leggen.

   De onderste uitloop is een app-brede regel: de zwevende FAB mag nooit over
   een kaart hangen, dus eindigt de kolom 90px boven de bodem.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-bordkaart{ margin-top:14px; }
.pf-bord-kolommen{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; }
.pf-bord-kolom{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px; }
/* Geen masonry: elke kolom draagt haar eigen kaarten in de vaste volgorde, en
   de eerste kaart van beide kolommen begint op dezelfde hoogte. */
.pf-bord-kolom > .pf-bordkaart{ margin-top:0; }
.pf-bord-rust{ margin:0; font-size:12px; color:var(--ink-mist); }

/* ── de successenkaart ──────────────────────────────────────────────────
   De enige groene rand op het bord. Ze staat vooraan omdat het bord anders
   alleen over gaten gaat, en ze verdwijnt zodra er niets te melden is. */
.pf-succeskaart{ border-left:3px solid var(--groen); }
.pf-succes-lijst{ display:flex; flex-direction:column; }
/* De scheidingslijn ín een kaart is --line-zacht, niet --line-ghost: die
   laatste is de gestreepte rand van een afgezonderd vlak en trekt hier veel te
   hard. Een rij scheiden vraagt de lichtste lijn die het werk doet. */
.pf-succes-rij{ display:flex; align-items:baseline; gap:8px; padding:4px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-succes-rij:last-child{ border-bottom:0; }
.pf-succes-dot{ flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--groen); transform:translateY(-1px); }
.pf-succes-tekst{ font-size:12.5px; color:var(--ink); }
/* De herkomst staat pal achter de zin, en de ↗ pal achter de herkomst: hij
   zegt "hier komt dit vandaan", niet "hier gaat de rij heen". Aan de
   rechterrand geparkeerd leest hij als een actieknop, en die staat hier niet. */
.pf-succes-bron{ flex:0 1 auto; min-width:0; font-size:11px; color:var(--ink-mist); }
.pf-succes-pijl{ flex:none; margin-right:auto; border:0; background:none; padding:0 2px;
  cursor:pointer; font-size:11px; color:var(--petrol-deep); }
.pf-succes-pijl:hover{ text-decoration:underline; }

/* ── de bordregel: teken · zin · sprong ─────────────────────────────────
   Eén anatomie voor kaart 1 en kaart 3. Terracotta wanneer een bevestigde
   afspraak niet gehaald wordt, een open ring zolang het een vraag is. */
.pf-bordrijen{ display:flex; flex-direction:column; }
.pf-bordrij{ display:flex; align-items:baseline; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-bordrij:last-child{ border-bottom:0; }
.pf-bordrij .pf-bord-dot{ flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--terra); transform:translateY(-1px); }
.pf-bordrij[data-ernst="voorstel"] .pf-bord-dot{ background:none;
  box-shadow:inset 0 0 0 1.5px var(--line-sterk); }
.pf-bordrij-midden{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline;
  gap:6px; flex-wrap:wrap; }
.pf-bordrij-zin{ font-size:12.5px; color:var(--ink); }
/* De drie stukken van een bordregel: de telling vet, het hiaat gewoon, de
   bekendste naam in mist. Leesorde, geen opmaak. */
.pf-bordrij-kop{ font-weight:var(--gew-vet); color:var(--ink); }
.pf-bordrij-staart{ color:var(--ink-mist); }
.pf-bordrij > .pf-bord-dot{ align-self:center; }
/* De open ring staat op een openstaande beslissing: daar wacht je op iemand
   anders. De gevulde stip staat op werk dat je zelf kunt doen. */
.pf-bordrij .pf-bord-dot.is-ring{ width:9px; height:9px; background:none;
  box-shadow:inset 0 0 0 1.5px var(--ink-mist); }
/* Kaart 3 kleurt per issue-soort, niet naar hoe erg wij het vinden. Stilte is
   amber: er is niets mis, er is alleen niets gehoord. */
.pf-bordrij[data-issue="stilte"] .pf-bord-dot{ background:var(--geel); }
.pf-bordrij[data-issue="rood"] .pf-bord-dot,
.pf-bordrij[data-issue="borging"] .pf-bord-dot,
.pf-bordrij[data-issue="vol"] .pf-bord-dot{ background:var(--rood); }
.pf-bordrij-nazin{ font-size:11px; color:var(--ink-mist); }
.pf-bordrij > .c-dash-alles{ flex:none; }

/* ── kaart 2 · de mini-tijdlijn ─────────────────────────────────────────
   Dezelfde cel als Organisatie · Belasting (.pf-bel-cel), alleen smaller en
   zonder kopregel: de legenda eronder zegt wat de as is. Eén celvorm in de
   hele modus, want twee celvormen zijn twee waarheden. */
/* Op het bord scrolt niets horizontaal. De mini is een leesbeeld en geen
   matrix: verschijnt er een scrollbalk, dan is de aflezing ernaast te breed of
   staan er te veel maanden, en dan hoort dát opgelost te worden. De aflezing
   krimpt en breekt af; de cellen houden hun maat. Alleen op de telefoon (113b)
   scrolt de tijdlijn, met de groepkolom vast. */
.pf-bordmini-wrap{ padding-bottom:2px; }
.pf-bordmini{ min-width:0; }
.pf-bordmini-rij{ display:grid; align-items:center; gap:3px;
  grid-template-columns:minmax(150px,170px) repeat(var(--kolommen),40px) minmax(180px,1fr);
  padding:3px 0; }
/* De groepnaam breekt af op twee regels; hij kort niet in. "Leidinggevenden
   eerste li…" laat je raden welke groep het is, en dat is precies de groep
   waarover de rij gaat. */
.pf-bordmini-groep{ position:sticky; left:0; z-index:1; display:flex; align-items:baseline;
  gap:5px; flex-wrap:wrap; background:var(--cream); border:0; padding:0 8px 0 0;
  font-family:inherit; text-align:left; cursor:pointer; min-width:0; }
.pf-bordmini-groep .pf-bel-naam{ white-space:normal; overflow:visible; text-overflow:clip;
  line-height:1.3; }
.pf-bordmini-groep .pf-bel-meta{ white-space:normal; overflow:visible; text-overflow:clip; }
.pf-bordmini-groep:hover .pf-bel-naam{ text-decoration:underline; text-underline-offset:2px; }
.pf-bordmini-rij .pf-bel-cel{ min-height:22px; font-size:11px; }
/* De mini leest vier dingen af en niet meer: de as, het cijfer, de kleur en de
   volgorde. De botsingsring en de vermoed-streepjes van de grote matrix horen
   hier dus niet: die vragen een legenda die deze kaart niet draagt, en zonder
   legenda is een gestreepte rand een raadsel. Wie het onderscheid wil ziet het
   op Organisatie · Belasting, en de kaart wijst daarheen. */
.pf-bordmini-rij .pf-bel-cel.is-botsing::before{ display:none; }
.pf-bordmini-rij .pf-bel-cel.is-vermoed{ outline:0; }
/* Een lege maand is een lege maand en niet het einde van de as: op de grote
   matrix draagt de kolomkop dat, hier is er geen kop. Dus krijgt de lege cel
   een vlak — anders lijkt de tijdlijn na zeven maanden op te houden. */
.pf-bordmini-rij .pf-bel-cel.is-leeg{ background:var(--cream2); }
/* De as van de mini-tijdlijn: de terra lijn is vandaag, de stippellijnen staan
   op +3 en +6 maanden. Ze beantwoorden "nu · binnen 3 · binnen 6" op één as, en
   zonder de nu-lijn is een aflezing als "sep tot jan" nergens aan vast te
   maken. De grote matrix draagt ze in de kolomkop; hier is er geen kop, dus
   tekent de cel ze zelf — over de volle rijhoogte, want een randje van 22px
   valt in een rij van drie groepen weg. */
.pf-bordmini-rij .pf-bel-cel{ position:relative; overflow:visible; }
.pf-bordmini-rij .pf-bel-cel.is-nu::after,
.pf-bordmini-rij .pf-bel-cel.is-marker::after{
  content:''; position:absolute; top:-4px; bottom:-4px; width:0; }
/* De stippellijnen markeren een maandgrens en staan dus op de celrand. De
   vandaag-lijn staat níet op de rand maar in de cel, op de dag: op 8 september
   is ruim een kwart van de maand voorbij, en dan hoort de lijn daar te staan.
   Tegen de linkerrand zou hij zeggen dat de maand net begon. `--dag` is de
   verstreken fractie van deze maand; de cel zet hem. */
.pf-bordmini-rij .pf-bel-cel.is-nu::after{
  left:calc(var(--dag, 0) * 100%); border-left:2px solid var(--terra); }
.pf-bordmini-rij .pf-bel-cel.is-marker::after{
  left:-2px; border-left:1.5px dashed var(--line-sterk); }
/* De as-woorden onder de rijen: zonder ze is de terra lijn een streep. */
.pf-bordmini-as{ display:grid; align-items:center;
  grid-template-columns:minmax(150px,170px) repeat(var(--kolommen),40px) minmax(180px,1fr);
  gap:3px; margin-top:2px; }
.pf-bordmini-as > span{ font-size:9px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-mist); white-space:nowrap; }
.pf-bordmini-as > span[data-as="nu"]{ color:var(--terra); }
.pf-bordmini-lezing{ padding-left:10px; min-width:0; font-size:11px; color:var(--ink-mist);
  line-height:1.35; }
.pf-bordmini-lezing .pf-bordrij-kop{ font-size:11px; color:var(--ink); }
.pf-bord-verdeling .pf-bordrij-zin{ font-size:11px; color:var(--ink-mist); }
.pf-bord-verdeling .pf-bordrij-kop{ font-size:11px; }
.pf-bordmini-legenda{ margin:10px 0 0; font-size:10.5px; color:var(--line-ghost);
  line-height:1.5; }
.pf-bord-verdeling{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line-zacht); }
.pf-bord-verdeling > .c-dash-alles{ margin-left:auto; }

/* ── kaart 2 · de blinde vlekken ────────────────────────────────────────
   Een gat is even zichtbaar als een vulling: een open ring, mist, nooit amber
   of rood. Er is niets mis met een groep zonder aanspreekpunt; er is alleen
   nog niemand gevonden. */
.pf-bord-vlekken{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line-zacht); }
.pf-bord-vlekkop{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.pf-bord-vlekrij{ display:flex; align-items:center; gap:8px; padding:5px 0; flex-wrap:wrap; }
.pf-bord-vlekzin{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--ink); }
.pf-bord-vlekpillen{ display:flex; gap:4px; flex:none; }

/* ── kaart 4 · de change managers ───────────────────────────────────────
   Het percentage is het signaal. Alleen het meerdere boven de contractuele
   beschikbaarheid staat in statusrood, en dat is een feit over de planning,
   niet een oordeel over wie hem draagt. */
.pf-cmrijen{ display:flex; flex-direction:column; }
.pf-cmrij{ display:flex; align-items:center; gap:9px; padding:6px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-cmrij:last-child{ border-bottom:0; }
.pf-cm-avatar{ flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--petrol-dark); color:var(--wit); font-size:9.5px;
  font-weight:var(--gew-zwaar); letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center; }
/* Eén doorlopende zin: de rij breekt waar de regel vol is, niet tussen de naam
   en wat er over hem gezegd wordt. */
.pf-cmrij-midden{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--ink-mist);
  line-height:1.45; }
.pf-cmrij-naam{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-cmrij-zin{ font-size:11.5px; color:var(--ink-mist); }
.pf-nadruk{ font-weight:var(--gew-vet); color:var(--ink); }
/* Eén kolom per maand, en de vulling is de bezetting: half gevuld is half
   bezet. Een blokje dat alleen "bezet" of "vrij" zegt, verzwijgt precies het
   verschil waarvoor je op deze kaart kijkt. De track is mint (vrij), de vulling
   petrol, en een maand boven de honderd kleurt helemaal rood. */
.pf-cm-balk{ flex:none; display:flex; gap:1.5px; height:16px; width:130px; align-self:center; }
.pf-cm-seg{ position:relative; flex:1 1 0; min-width:3px; border-radius:1.5px;
  background:var(--petrol-light); overflow:hidden; }
.pf-cm-vul{ position:absolute; left:0; right:0; bottom:0; background:var(--petrol-dark); }
.pf-cm-seg.is-over{ background:var(--rood); }
.pf-cm-seg.is-over .pf-cm-vul{ background:var(--rood); }
.pf-cm-seg.is-afwezig{ opacity:.45; }

/* ── kaart 5 · de risico's ──────────────────────────────────────────────
   De matrix en de twee zwaarste rijen komen uit bord.css. Hier alleen de
   tweede regel op een rij, want een portfolio-risico draagt zijn initiatieven
   mee en die passen niet naast de weging. */
/* De matrix is een ingang, dus wijst de muis dat aan: het grid als geheel
   brengt je naar alle risico's, een gevulde cel naar dat ene vak. De handwijzer
   stond hier op default uit de tijd dat het grid alleen telde. Ook de as-regel
   en de lege cellen erven hem — daar klik je door naar het geheel, en dat is
   een geldige bestemming. */
.pf-risgrid, .pf-risgrid .c-risgrid-cel, .pf-risgrid .c-risgrid-as{ cursor:pointer; }
.pf-risgrid:hover .c-risgrid-as{ text-decoration:underline; text-underline-offset:2px; }
.pf-risgrid .c-risgrid-cel.is-klik:hover{ outline:1.5px solid var(--terra); outline-offset:1px; }
.pf-risgrid .c-risgrid-cel.is-klik:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }
.pf-risrij-midden{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  gap:3px; align-items:flex-start; }
.pf-risrij-onder{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pf-risrij-onder .c-ris-topweging{ font-weight:var(--gew-vet); color:var(--ink); }
.pf-ris-telchip{ display:inline-flex; align-items:center; gap:5px; }

/* ── kaart 6 · de komende periode ───────────────────────────────────────  */
.pf-periode-rij{ width:100%; border:0; background:none; font-family:inherit;
  text-align:left; cursor:pointer; }
.pf-periode-rij:hover{ background:var(--cream2); }
.pf-periode-midden{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  align-items:flex-start; gap:4px; }
/* R128 · align-items:flex-start geeft elk kind zijn inhoudsbreedte, en dan
   kapt de naam met haar ellipsis nooit af · ze steekt gewoon uit. Met een
   maximum van de kolombreedte doet ze wat ze belooft. */
.pf-periode-midden > *{ max-width:100%; }
.pf-periode-chip{ display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; line-height:1.5; padding:1px 7px; }
.pf-periode-chip .soort-dot{ width:6px; height:6px; }
.pf-periode-chip .soort-dot[data-soort="meetpunt"]{ width:6px; height:6px; border-width:1.5px; }
/* Een datum die voorbij is draagt dat: amber mist en het woord "was". Niet
   rood — over tijd is een feit, geen fout — en niet stil, want dan leest hij
   als komend werk. */
.pf-periode-rij.is-verstreken .c-periode-datum-rij{ color:var(--geel-tekst); }

/* ── de bord-lens op Planning ───────────────────────────────────────────  */
.pf-hiaatpill{ margin-bottom:10px; }

/* ── 101a · laatst gehoord ──────────────────────────────────────────────
   Datum plus bron, in mist. Nooit rood: een gat in het luisteren is data, geen
   alarm, en een kleur zou er een verwijt van maken. Zonder bron dezelfde
   blindevlekvorm als het ontbrekende aanspreekpunt ernaast. */
.pf-gehoord{ display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-size:10.5px; color:var(--ink-mist); line-height:1.4; }
.pf-gehoord.is-leeg{ color:var(--line-ghost); }
.pf-gehoord-vraag{ border:0; background:none; padding:0; font-family:inherit;
  font-size:10.5px; color:var(--petrol-deep); cursor:pointer; }
.pf-gehoord-vraag:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-eenheid .pf-gehoord{ margin-top:2px; }
.pf-reg-links .pf-gehoord{ flex-basis:100%; }

/* ── 113b · mobiel ──────────────────────────────────────────────────────
   Dezelfde kaarten, gestapeld in bord-volgorde; de kolom-stapels vervallen.
   De mini-tijdlijn scrolt horizontaal met een vaste groep-kolom, en elk
   aanraakdoel haalt 44px. */
@media (max-width:699px){
  .pf-bord-kolommen{ flex-direction:column; gap:14px; }
  .pf-bordmini-wrap{ overflow-x:auto; }
  .pf-bordmini{ min-width:max-content; }
  .pf-bordmini-rij{ grid-template-columns:minmax(120px,130px) repeat(var(--kolommen),30px); }
  .pf-bordmini-as{ grid-template-columns:minmax(120px,130px) repeat(var(--kolommen),30px); }
  .pf-bordmini-lezing{ display:none; }
  .pf-bordrij{ flex-wrap:wrap; }
  .pf-bordrij > .c-dash-alles{ min-height:44px; }
  .pf-periode-rij{ min-height:44px; }
  .pf-cmrij{ flex-wrap:wrap; }
  .pf-cm-balk{ max-width:none; width:100%; }
  .pf-succes-pijl{ min-width:44px; min-height:44px; }
  .pf-gehoord-vraag{ min-height:44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   R115 · 115d — Werkafspraken als kaart per afspraak-soort
   ─────────────────────────────────────────────────────────────────────────
   Het scherm was één lange witte laag met caps-koppen. Nu draagt elke afspraak
   haar eigen kaart op het canvas, en is wit weer wat het in deze app is: een
   rij of een invoerveld ín een kaart. Je leest vier afspraken naast elkaar in
   plaats van één formulier van boven naar onder.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-k3-kaart{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-kaart); padding:16px 20px; margin-top:14px; }
.pf-k3-paar{ display:flex; gap:14px; align-items:flex-start; }
.pf-k3-paar > .pf-k3-kaart{ flex:1 1 0; min-width:0; }
.pf-k3-kaartkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pf-k3-kaarttitel{ margin:0; font-family:var(--font-kop); font-size:15px;
  font-weight:var(--gew-vet); color:var(--petrol-dark); letter-spacing:.005em; }
.pf-k3-kaartsub{ font-size:var(--t-meta); color:var(--ink-soft); }
.pf-k3-kaart .pf-k3-gevolg{ margin:4px 0 12px; }

/* Het veldlabel boven een toelichting: dezelfde 9.5px caps als elk ander
   veldlabel, zodat een tekstvak niet als tweede lijst leest. */
.pf-k3-toelichting{ margin-top:12px; }
.pf-k3-veldlabel{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mist); margin-bottom:4px; }
.pf-k3-toelichting .pf-k3-tekst{ margin-top:0; }

/* Het afwijk-veld op een niveau-rij is een ghost-input: hij vraagt niets, hij
   staat er voor als je iets kwijt wil. */
input.pf-k3-niveau-uitleg{ background:transparent; border-style:dashed;
  border-color:var(--line-sterk); }
input.pf-k3-niveau-uitleg:focus{ background:var(--wit); border-style:solid; }

/* Wie kijkt en vanaf wanneer, als één chip. Twee grijze zinnetjes naast elkaar
   lazen als twee losse feiten terwijl het er één is. */
.pf-k3-vw-kijkt{ display:inline-flex; align-items:baseline; gap:4px; flex:none;
  background:#EAF1F0; color:var(--petrol-deep); border-radius:999px;
  padding:2px 9px; font-size:10.5px; }
.pf-k3-vw-kijkt .pf-k3-vw-bron{ opacity:.75; }
.pf-k3-vw-kijkt .pf-k3-vw-vanaf{ font-weight:var(--gew-vet); }

/* De open vragen onder een hairline, in de kaart waar ze bij horen. */
.pf-k3-vragen{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line-zacht);
  display:flex; flex-direction:column; gap:2px; }

/* De voorstelbalk: selectie-tint met een petrol rand, en Bevestigen als de
   enige primaire knop op het scherm. Lichtblauw staat niet in de kleurtrap. */
.pf-k3 > .pf-k3-voorstelbalk{ background:#EFF4F1; border:1.5px solid var(--petrol);
  border-radius:var(--r-kaart); padding:12px 20px; margin-top:14px; }

@media (max-width:899px){
  .pf-k3-paar{ flex-direction:column; }
  .pf-k3-paar > .pf-k3-kaart{ width:100%; }
}

/* ── 115a · de kompas-rijen ──────────────────────────────────────────────
   De zone-uitleg breekt af in plaats van in te korten: "de to-be van dit
   beslisniveau: waar willen we heen … · ge…" laat je de helft raden, en het is
   juist die zin die zegt waaróm deze drie rijen bij elkaar staan. */
/* Het paneel is breder: de rijen dragen een naam, een aflezing, een teller en
   een bestemming, en op 520px werd elk van die vier afgekort tot een raadsel. */
/* Alleen vanaf de tablet. Op de telefoon is .c-paneel een bottom sheet die
   left:0/right:0/width:auto zet — deze regel laadt ná schil.css en zette daar
   92vw overheen, en dan staat de sheet niet vol maar met een strook pagina
   ernaast. Dezelfde vorm als elk ander vel van de app, of het is een tweede
   vorm die met de eerste uit elkaar loopt. */
@media (min-width:700px){
  .pf-kompas-paneel{ width:min(760px, 92vw); max-width:none; }
}
.pf-kompas-body .c-groepkop{ align-items:baseline; flex-wrap:wrap; }
.pf-kompas-body .c-groepkop-sub{ white-space:normal; overflow:visible;
  text-overflow:clip; flex:1 1 auto; }
/* De aflezing achter de naam breekt af in plaats van in te korten: "· 19
   eenheden, 5 doelg…" laat je raden waar de rij over gaat. */
.pf-kompas-rij{ flex-wrap:wrap; align-items:baseline; row-gap:2px; }
.pf-kompas-rij .c-lens-meta-inline{ white-space:normal; overflow:visible;
  text-overflow:clip; flex:1 1 auto; }
/* De teller staat rechts, vóór de "opent"-tekst: eerst wat er ligt, dan waar de
   rij heen gaat. */
.pf-kompas-rij .pf-openteller{ flex:none; margin-left:auto; }
.pf-kompas-rij .pf-kompas-aan{ flex:none; margin-left:auto; }
.pf-kompas-rij .pf-openteller ~ .pf-kompas-aan{ margin-left:10px; }
.pf-kompas-voet{ margin:14px 0 0; font-size:10.5px; color:var(--line-ghost); line-height:1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   R115 · 115g — V3 · wat er bleef staan
   ─────────────────────────────────────────────────────────────────────────
   Leesdata, nergens een invulveld. Eén kaart per afgesloten traject, met de
   realisatie in woorden en de feiten eronder op één regel.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-v3-kaart{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-kaart); padding:14px 18px; margin-top:14px; }
.pf-v3-kop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pf-v3-naam{ margin:0; font-family:var(--font-kop); font-size:15px;
  font-weight:var(--gew-vet); color:var(--petrol-dark); }
.pf-v3-meta{ font-size:var(--t-meta); color:var(--ink-soft); }
/* De realisatie in woorden, nooit als score. Groen is "staat er", terracotta is
   "deels" — en dat is geen fout maar een feit over wat er bleef liggen. */
/* R125 · de uitspraak van de portfolio-manager, op de plek waar de app haar
   eigen oordeel zette. Zonder uitspraak staat er ghost-tekst · geen pil, want
   er is niets vastgesteld. Met uitspraak draagt het woord de kleur en staan de
   naam, de dag en de zin eronder in het stille grijs. */
.pf-v3-uitspraak{ margin-left:auto; flex:none; max-width:44%; text-align:right; }
.pf-v3-uitspraakknop{ font:inherit; background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pf-v3-uitspraakknop.is-leeg{ font-size:11px; color:var(--ink-mist); font-style:italic; }
.pf-v3-uitspraakknop:hover .pf-v3-uitspraakwoord{ text-decoration:underline; }
.pf-v3-uitspraakknop.is-leeg:hover{ color:var(--ink); text-decoration:underline; }
/* R127 · 124e — één rustige tint voor álle uitspraken. Geen groen voor
   "gerealiseerd" en geen rood voor "niet": een geslaagde en een mislukte
   uitkomst krijgen dezelfde vorm, anders wordt de vorm een beloning en leest
   "niet gerealiseerd" als alarm · terwijl dat vaak de eerlijkste en nuttigste
   uitspraak is. Het woord draagt de betekenis, niet de kleur. */
.pf-v3-uitspraakwoord{ border-radius:999px; padding:2px 10px; font-size:10.5px;
  font-weight:var(--gew-vet); background:var(--cream2); color:var(--ink); }
.pf-v3-uitspraakmeta{ font-size:10.5px; color:var(--ink-mist); }
.pf-v3-uitspraakzin{ margin:3px 0 0; font-size:11px; line-height:1.45; color:var(--ink-mist); }
/* Het venster waarin de uitspraak gezet wordt. */
.pf-v3-veldje{ margin-bottom:12px; }
.pf-v3-veldlabel{ display:block; font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); margin-bottom:4px; }
.pf-v3-standen{ display:flex; gap:7px; flex-wrap:wrap; }
.pf-v3-standknop{ font:inherit; font-size:11.5px; border-radius:999px; padding:4px 11px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--ink-soft); }
.pf-v3-standknop:hover{ border-color:var(--line-hard, #C9C2B4); color:var(--ink); }
.pf-v3-standknop.is-aan{ border-color:var(--petrol-deep, #0A3936); color:var(--petrol-deep, #0A3936); font-weight:600; }
/* De drie gedragswoorden dragen hun uitleg eronder; dan is de knop geen pil
   meer maar een keuzerij, zoals het statusmenu van R122f. */
.pf-v3-standknop{ text-align:left; }
.pf-v3-standnaam{ display:block; }
.pf-v3-standuitleg{ display:block; font-size:10.5px; color:var(--ink-soft); margin-top:1px; font-weight:400; }
.pf-v3-standen:has(.pf-v3-standuitleg){ flex-direction:column; align-items:stretch; }
.pf-v3-standen:has(.pf-v3-standuitleg) .pf-v3-standknop{ border-radius:8px; padding:8px 11px; }
.pf-v3-veldnoot{ display:block; margin-top:4px; font-size:10.5px; color:var(--ink-mist); }
.pf-v3-herkijk{ max-width:170px; }
.pf-v3-uitspraakspoor{ margin-top:14px; padding-top:10px; border-top:1px solid var(--line-zacht); }
.pf-v3-uitspraakspoor-rij{ margin-top:7px; font-size:11px; line-height:1.45; }
.pf-v3-uitspraakspoor-woord{ font-weight:var(--gew-vet); color:var(--ink); }
.pf-v3-uitspraakspoor-meta{ color:var(--ink-mist); margin-left:5px; }
.pf-v3-uitspraakspoor-zin{ display:block; color:var(--ink-soft); }
.pf-v3-uitspraakpijl{ color:var(--ink-mist); font-size:9px; }

/* ── R127 · 124d · het criterium met de gedragingen eronder ───────────── */
.pf-v3-crit{
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px 15px;
  margin-top:10px;
}
.pf-v3-critkop{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.pf-v3-critlabel{ font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-v3-critnaam{ font-size:13px; font-weight:600; color:var(--petrol-dark); }
.pf-v3-critnaam-los{ font-weight:400; color:var(--ink-soft); }
.pf-v3-critcijfer{ font-size:11px; color:var(--ink-soft); }
.pf-v3-critcijfer.is-leeg{ color:var(--line-ghost); }
.pf-v3-critkop .pf-v3-uitspraakknop{ margin-left:auto; }
.pf-v3-critzin{ margin:6px 0 0; padding-left:2px; font-size:11.5px; line-height:1.5; color:var(--ink); }
.pf-v3-critleeg{ margin:7px 0 0; font-size:11px; color:var(--line-ghost); }

.pf-v3-gedrag{ background:var(--cream); border-radius:9px; padding:10px 12px; margin-top:8px; }
.pf-v3-gedragrij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-v3-gedragnaam{ flex:1; min-width:200px; font-size:12px; color:var(--ink); }
.pf-v3-gedragdrager{ font-size:11px; color:var(--ink-soft); }
/* Wat de portfoliomanager heeft overgenomen, en waarom hij hier misschien
   niets kan uitspreken. Amber-ink, want het is een openstaand feit. */
.pf-v3-gedragnoot{ margin:6px 0 0; font-size:10.5px; color:var(--geel-tekst); }

.pf-v3-standenhouder{ margin-top:7px; }
.pf-v3-standen-lees{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pf-v3-standenkop{ font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-v3-stand{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--ink-mist); }
.pf-v3-stand[data-waar="ja"]{ font-weight:600; color:var(--ink); }
.pf-v3-standbol{ width:7px; height:7px; border-radius:50%; flex:none;
  border:var(--rand-fijn) solid var(--line-sterk); box-sizing:border-box; }
.pf-v3-stand[data-waar="ja"] .pf-v3-standbol{ background:var(--groen); border:0; }
.pf-v3-standtelling{ font-weight:400; color:var(--ink-soft); }
.pf-v3-standmeting{ font-size:10.5px; color:var(--ink-soft); }
.pf-v3-standennoot{ margin:5px 0 0; font-size:10px; color:var(--ink-mist); }
.pf-v3-standenplekken{ margin:2px 0 0; font-size:10px; color:var(--ink-mist); }

/* ── R127 · 124d · wat je hoorde ──────────────────────────────────────── */
.pf-v3-gehoord{ border-top:1px solid var(--line-zacht); margin-top:9px; padding-top:8px; }
.pf-v3-gehoordkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pf-v3-gehoordlabel{ font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-v3-gehoordwanneer{ font-size:11px; color:var(--ink-mist); }
.pf-v3-gehoordleeg{ font-size:11px; color:var(--line-ghost); }
.pf-v3-gehoordnaar{ font:inherit; font-size:11px; background:none; border:0; padding:0;
  color:var(--petrol-deep); cursor:pointer; }
.pf-v3-gehoordtekst{ margin:4px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink); }
.pf-v3-gehoordveldrij{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; align-items:center; }
.pf-v3-gehoorddatum{ max-width:140px; }
.pf-v3-gehoordbij{ max-width:150px; }
.pf-v3-gehoordzin{ flex:1 1 220px; min-width:0; }
.pf-v3-gehoorduitklap{ margin-top:7px; font-size:11px; color:var(--ink-soft); }
.pf-v3-gehoorduitklap summary{ cursor:pointer; color:var(--ink-mist); }
.pf-v3-gehoordeerder{ margin-top:6px; padding-left:8px; border-left:2px solid var(--line-zacht); }
.pf-v3-feiten{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:8px; }
.pf-v3-feit{ display:inline-flex; align-items:baseline; gap:5px; font-size:11.5px;
  color:var(--ink); min-width:0; }
.pf-v3-feitlabel{ color:var(--ink-mist); }
.pf-v3-woord{ flex:1 1 240px; min-width:0; }
.pf-v3-quote{ font-style:italic; color:var(--ink); }
.pf-v3-pijl{ flex:none; border:0; background:none; padding:0 2px; cursor:pointer;
  font-size:11px; color:var(--petrol-deep); }
.pf-v3-pijl:hover{ text-decoration:underline; }
/* Wat er bleef liggen: een feit uit de foto, geen verwijt. Geen rode balk,
   geen uitroepteken — de zin doet het werk. */
.pf-v3-bleef{ margin:10px 0 0; padding-top:9px; border-top:1px solid var(--line-zacht);
  font-size:11.5px; color:var(--ink); line-height:1.5; }
.pf-v3-betaald{ color:var(--ink-mist); }

.pf-v3-pergroep{ margin-top:18px; }
.pf-v3-blokkop{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.pf-v3-groeprij{ display:flex; align-items:baseline; gap:10px; width:100%;
  border:0; background:none; font-family:inherit; text-align:left; cursor:pointer;
  padding:6px 0; border-bottom:1px solid var(--line-zacht); }
.pf-v3-groeprij:last-child{ border-bottom:0; }
.pf-v3-groeprij:hover .pf-v3-groepnaam{ text-decoration:underline; text-underline-offset:2px; }
.pf-v3-groepnaam{ flex:0 0 auto; min-width:170px; font-size:12.5px;
  font-weight:var(--gew-vet); color:var(--ink); }
.pf-v3-groeptel{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--ink-soft); }
/* R128 · de mobiele sweep vond hem tot 99px buiten het scherm steken: met
   flex:none krimpt hij nooit, en de groepsnaam ernaast heeft een minimum.
   Hij mag krimpen en afkappen · welke initiatieven er nu lopen is context,
   niet de kern van de regel. */
.pf-v3-groepnu{ flex:0 1 auto; min-width:0; font-size:11px; color:var(--ink-mist);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-v3-blind{ display:flex; align-items:center; gap:7px; margin:14px 0 0;
  font-size:11px; color:var(--line-ghost); }

/* De lege staat: wat je hier mag verwachten, zoals een lege tab op Opvolging.
   Een dichte deur laat je raden wat erachter zit. */
.pf-v3-leeg{ background:var(--cream); border:1px dashed var(--line-sterk);
  border-radius:var(--r-kaart); padding:18px 20px; margin-top:14px; }
.pf-v3-leegzin{ margin:0; font-size:13px; color:var(--ink); }
.pf-v3-leeglijst{ margin:8px 0 0; padding-left:18px; font-size:11.5px;
  color:var(--ink-soft); line-height:1.7; }
.pf-v3-leegsub{ margin:10px 0 0; font-size:11px; color:var(--ink-mist); }

/* ══════════════════════════════════════════════════════════════════════════
   R115 · 115e — K1 als twee kaarten
   ─────────────────────────────────────────────────────────────────────────
   De knip zit waar de vraag verandert: wie hier beslist en waarom deze eenheid
   bestaat, tegenover wat ze wil kunnen.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-k1-kaartkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pf-k1-kaarttitel{ margin:0; font-family:var(--font-kop); font-size:15px;
  font-weight:var(--gew-vet); color:var(--petrol-dark); letter-spacing:.005em; }
.pf-k1-kaartn{ font-size:var(--t-meta); color:var(--ink-mist); }
.pf-k1-kaartsub{ font-size:var(--t-meta); color:var(--ink-soft); }
/* Eenheid en portfolio manager naast elkaar: twee antwoorden op één vraag. */
.pf-k1-naastelkaar{ display:flex; flex-direction:row; gap:18px;
  align-items:flex-start; flex-wrap:wrap; }
.pf-k1-naastelkaar > .pf-k1-beheer{ margin-bottom:0; max-width:none; }
.pf-k1-naastelkaar > .pf-k1-beheer{ flex:1 1 320px; min-width:0; }
.pf-k1-naastelkaar > .pf-k1-pm{ flex:1 1 220px; min-width:0; }
/* De voet onder de bestaansreden: waar de zin vandaan komt, en de weg om de
   periode te zetten. Mist, want je gebruikt het één keer per planperiode. */
.pf-k1-redenvoet{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:5px; }
.pf-k1-periodelink{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11px; color:var(--petrol-deep); cursor:pointer; }
.pf-k1-periodelink:hover{ text-decoration:underline; text-underline-offset:2px; }

/* De aflezing in een zacht vlak: het enige stuk van de hefboom dat het bestand
   verlaat, en dat hoort te zien te zijn. */
.pf-hefboom-aflezing{ background:var(--cream2); border-radius:var(--r-kaart);
  padding:10px 12px; margin-top:10px; }
.pf-hefboom-aflezingkop{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pf-hefboom-aflezing .pf-hefboom-vannaar{ align-items:baseline; }
.pf-hefboom-meting{ display:inline-flex; align-items:baseline; gap:6px; margin-left:auto;
  font-size:11px; color:var(--ink); }
.pf-hefboom-uitfoto{ color:var(--petrol-deep); }
/* Als knop: geen kader, wel een handje. Als stille regel: geen handje — er valt
   niets te klikken en een cursor die iets anders belooft is een leugen. */
button.pf-hefboom-uitfoto{ border:0; background:none; padding:0; font:inherit;
  color:var(--petrol-deep); cursor:pointer; }
button.pf-hefboom-uitfoto:hover{ text-decoration:underline; }
.pf-hefboom-uitfoto.is-stil{ color:var(--ink-mist); cursor:default; }
.pf-hefboom-meting.is-ghost{ color:var(--ink-mist); }

/* De ⊕ en zijn lijstje: toevoegen, niet kiezen uit een lijst. */
.pf-k1-plus{ flex:none; width:24px; height:24px; border:1px dashed var(--line-sterk);
  background:none; border-radius:50%; color:var(--petrol-deep); font-size:13px;
  line-height:1; cursor:pointer; }
.pf-k1-plus:hover{ border-style:solid; border-color:var(--petrol); background:var(--cream2); }
.pf-k1-kiezer{ max-width:340px; }
.pf-k1-kiezerlijst{ display:flex; flex-direction:column; max-height:280px; overflow-y:auto; }
.pf-k1-kiezerrij{ border:0; background:none; font-family:inherit; text-align:left;
  padding:7px 4px; font-size:12.5px; color:var(--ink); cursor:pointer;
  border-bottom:1px solid var(--line-zacht); }
.pf-k1-kiezerrij:last-child{ border-bottom:0; }
.pf-k1-kiezerrij:hover{ background:var(--cream2); }
.pf-hefboom-koppelrij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.pf-hefboom-koppelrij > .pf-leegvlak-knop{ margin-top:0; }
/* ── 115g · de drie bewegingen ───────────────────────────────────────────
   V3 is trackrecord: hier verdwijnt niets vanzelf. Wat het hield zakt naar de
   historiek zodra de borgings-afspraak is nagekomen; wat het niet hield blijft
   staan tot er een besluit over is; het venster filtert, het verwijdert niet. */
.pf-v3-vensterrij{ display:flex; gap:4px; flex-wrap:wrap; }
.pf-v3-vensterrij .c-chip{ font-size:10.5px; padding:2px 9px; }
.pf-v3-vork{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line-zacht); }
.pf-v3-vorkknop{ border:1px solid var(--line); background:var(--wit);
  font-family:inherit; font-size:11px; color:var(--petrol-deep);
  border-radius:999px; padding:2px 10px; cursor:pointer; }
.pf-v3-vorkknop:hover{ border-color:var(--petrol); background:var(--cream2); }
.pf-v3-besluit{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line-zacht);
  font-size:11.5px; color:var(--ink); }
.pf-v3-historiek{ margin-top:22px; }
.pf-v3-historiek .pf-v3-kaart{ opacity:.82; }

/* ══════════════════════════════════════════════════════════════════════════
   R115 · 115f — K2 · het profiel
   ─────────────────────────────────────────────────────────────────────────
   Zes assen met een lijn ertussen. Geen schuifje: de lijn is een aflezing, de
   positie komt uit de vragen eronder. Slepen zou vragen om een mening, en dan
   krijg je er ook een.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-k2-legenda{ display:flex; gap:18px; align-items:center; margin:6px 0 10px;
  font-size:11px; color:var(--ink-soft); }
.pf-k2-legenditem{ display:inline-flex; align-items:center; gap:6px; }
.pf-k2-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--petrol-dark); }
.pf-k2-ring{ flex:none; width:9px; height:9px; border-radius:50%; background:none;
  box-shadow:inset 0 0 0 2px var(--terra); }
.pf-k2-assen{ display:flex; flex-direction:column; gap:8px; }
.pf-k2-ashouder{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-kaart); overflow:hidden; }
.pf-k2-ashouder.is-open{ border-color:var(--petrol); }
.pf-k2-as{ display:flex; align-items:center; gap:12px; width:100%;
  text-align:left; padding:10px 16px; cursor:pointer; }
.pf-k2-as:hover{ background:var(--cream2); }
.pf-k2-asnaam{ flex:0 0 auto; min-width:150px; border:0; background:none;
  padding:0; font-family:inherit; font-size:12.5px; text-align:left;
  font-weight:var(--gew-vet); color:var(--ink); cursor:pointer; }
.pf-k2-pool{ flex:0 0 auto; min-width:120px; font-size:11px; color:var(--ink-mist);
  text-align:right; }
.pf-k2-pool.is-rechts{ text-align:left; }

/* De lijn: één spoor met twee grepen die de mens zelf neerlegt. */
.pf-k2-lijn{ flex:1 1 auto; min-width:140px; height:20px; position:relative;
  cursor:pointer; touch-action:none; }
.pf-k2-spoor{ position:absolute; left:7px; right:7px; top:0; bottom:0; }
.pf-k2-spoor::before{ content:''; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line-sterk); }
.pf-k2-greep{ position:absolute; top:50%; transform:translate(-50%,-50%);
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border:0; background:none; padding:0; cursor:grab; touch-action:none; }
.pf-k2-greep.is-sleept{ cursor:grabbing; }
.pf-k2-greep:focus-visible{ outline:2px solid var(--petrol); outline-offset:1px;
  border-radius:50%; }
.pf-k2-greep:hover .pf-k2-dot{ box-shadow:0 0 0 4px rgba(31,90,84,.14); }
.pf-k2-greep:hover .pf-k2-ring{ box-shadow:inset 0 0 0 2px var(--terra),
  0 0 0 4px rgba(200,121,65,.14); }

/* Het vragenblok: een zacht vlak onder de as. */
.pf-k2-vragen{ background:var(--cream2); padding:12px 16px 14px;
  border-top:1px solid var(--line-zacht); }
.pf-k2-vragenkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.pf-k2-sheetsluit{ display:none; }
.pf-k2-vraag{ display:flex; align-items:center; gap:12px; padding:5px 0; }
.pf-k2-vraaglinks{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-k2-vraagtekst{ font-size:12px; color:var(--ink); }
.pf-k2-vorig{ font-size:10.5px; color:var(--ink-mist); }
.pf-k2-vragen input.pf-k2-invul{ flex:none; width:96px; font-family:inherit; font-size:11.5px;
  color:var(--ink); background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld,6px); padding:4px 9px; }
.pf-k2-vragen input.pf-k2-invul.is-breed{ width:150px; }
.pf-k2-invul::placeholder{ color:var(--ink-mist); }
.pf-k2-invul:focus{ outline:none; border-color:var(--petrol); }

/* De delta-kaart: de opgave in gewone woorden, en de enige handeling die
   erbij hoort. */
.pf-k2-delta{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-kaart); padding:14px 18px; margin-top:18px; }
.pf-k2-deltakop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pf-k2-deltatitel{ margin:0; font-family:var(--font-kop); font-size:14px;
  font-weight:var(--gew-vet); color:var(--petrol-dark); }
.pf-k2-deltazin{ margin:6px 0 0; font-size:12.5px; color:var(--ink); line-height:1.55; }
.pf-k2-deltavoet{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-top:12px; }
.pf-k2-deltaknop{ margin-left:auto; }

@media (max-width:899px){
  .pf-k2-as{ flex-wrap:wrap; }
  .pf-k2-pool{ min-width:0; text-align:left; order:2; }
  .pf-k2-pool.is-rechts{ margin-left:auto; text-align:right; }
  .pf-k2-lijn{ flex-basis:100%; order:3; }
  /* Het vragenblok wordt een bottom-sheet: op een telefoon zou het onder de
     as staan, en dan typ je onder je eigen toetsenbord. De 54px is de tabbalk:
     de sheet gaat over de FAB heen, nooit over de navigatie. */
  .pf-k2-vragen{ position:fixed; left:0; right:0; bottom:54px; z-index:520;
    max-height:62vh; overflow:auto; border-top:1px solid var(--line-sterk);
    border-radius:14px 14px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.14);
    padding-bottom:16px; }
  .pf-k2-vragenkop{ padding-right:26px; }
  .pf-k2-sheetsluit{ display:block; position:absolute; top:10px; right:14px;
    border:0; background:none; font-size:20px; line-height:1;
    color:var(--ink-soft); cursor:pointer; padding:0 2px; }
  .pf-k2-vraag{ flex-wrap:wrap; }
  .pf-k2-vragen input.pf-k2-invul,
  .pf-k2-vragen input.pf-k2-invul.is-breed{ width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RONDE 111 · HET OMGEVINGSBERICHT (111a/111b/111d)
   ──────────────────────────────────────────────────────────────────────────
   De neerwaartse pijl: de change manager levert foto's en krijgt iets terug.
   Twee schermen. Samenstellen is een lijst met vinkvakken op een zacht vlak;
   het bericht is een leeskaart in wit, want dat is wat er straks in een mail
   staat. De terra knop is de enige kleur die om een handeling vraagt.
   ══════════════════════════════════════════════════════════════════════════ */
.pf-ber-kop{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-kaart); padding:13px 20px 12px; }
.pf-ber-titel{ font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:19px; color:var(--petrol-dark); }
.pf-ber-voor{ font-size:12px; color:var(--ink-soft); }
.pf-ber-sinds{ margin-left:auto; font-size:11px; color:var(--ink-mist); }

.pf-ber-vlak{ background:var(--cream); border:1px solid var(--line);
  border-radius:10px; padding:2px 18px; margin-top:14px; }
.pf-ber-sectiekop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:10px 0 4px; }
.pf-ber-vlak > .pf-ber-sectiekop + *{ border-top:0; }
.pf-ber-vlak > .pf-ber-sectiekop:not(:first-child){ border-top:1px solid var(--line-zacht); }
.pf-ber-rij{ display:flex; align-items:flex-start; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-ber-midden{ flex:1 1 auto; min-width:0; }
.pf-ber-zin{ font-size:12.5px; color:var(--ink); line-height:1.5; }
.pf-ber-rij.is-uit .pf-ber-zin{ color:var(--ink-soft); }
.pf-ber-reden{ color:var(--ink-mist); }
/* Het vinkvak: een echte knop, want hij zet iets. Uit is een ghost-ring en
   geen leeg vakje met een kleur eromheen — niets is hier fout. */
.pf-ber-vink{ flex:none; width:15px; height:15px; margin-top:2px; padding:0;
  border-radius:4px; border:1.5px solid var(--line-sterk); background:none;
  font-size:10px; line-height:1; color:var(--wit); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.pf-ber-vink.is-aan{ background:var(--petrol); border-color:var(--petrol); }
.pf-ber-vink:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }
/* De contextzin: petrol, want ze komt van de portfolio-manager en niet uit de
   data. Eén zin per regel; een alinea hoort in het gesprek. */
.pf-ber-context{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  margin-top:2px; }
/* De uitnodiging om context te schrijven staat er pas als je bij de regel
   bent. Op elke regel een grijze aansporing zou het scherm vullen met wat de
   app wil, in plaats van met wat er staat. */
.pf-ber-contextknop{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11.5px; color:var(--petrol-deep); cursor:pointer; text-align:left; }
.pf-ber-contextknop:not(.is-gevuld){ color:var(--ink-mist); opacity:0; }
.pf-ber-rij:hover .pf-ber-contextknop,
.pf-ber-rij:focus-within .pf-ber-contextknop,
.pf-ber-contextknop:focus-visible{ opacity:1; }
.pf-ber-contextknop:hover{ text-decoration:underline; }
.pf-ber-jouwzin{ font-size:11px; color:var(--ink-mist); }
.pf-ber-vragen input, .pf-ber-contextveld, .pf-ber-eigenveld{ font-family:inherit; }
.pf-ber-contextveld{ width:100%; max-width:520px; font-size:11.5px;
  color:var(--petrol-deep); background:var(--wit); border:1px solid var(--petrol);
  border-radius:var(--r-veld,6px); padding:4px 9px; }
.pf-ber-contextveld:focus{ outline:none; }
/* Een gat draagt de blindevlekvorm: stippellijn, mist, nooit een kleur. */
.pf-ber-rij.is-gat .pf-ber-zin{ display:inline-block; color:var(--ink-soft);
  border:1.5px dashed var(--line-sterk); border-radius:8px; padding:5px 9px; }
.pf-ber-eigenveld{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--ink);
  background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld,6px); padding:4px 9px; }
.pf-ber-eigenveld:focus{ outline:none; border-color:var(--petrol); }
.pf-ber-toevoeg{ padding:7px 0 9px; }
.pf-ber-toevoegknop{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11px; color:var(--petrol-deep); cursor:pointer; }
.pf-ber-toevoegknop:hover{ text-decoration:underline; }
.pf-ber-voet{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; }
.pf-ber-door{ margin-left:auto; }

/* Het bericht: een leeskaart in wit. Wat hier staat, staat straks in een mail. */
.pf-ber-brief{ background:var(--wit); border:1px solid var(--line);
  border-radius:12px; padding:24px 28px; max-width:620px; }
.pf-ber-merk{ font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:15px; color:var(--petrol-dark); }
.pf-ber-punt{ color:var(--terra); }
.pf-ber-brieftitel{ margin:14px 0 0; font-family:var(--font-kop);
  font-weight:var(--gew-vet); font-size:20px; color:var(--petrol-dark); }
.pf-ber-briefsub{ margin:4px 0 0; font-size:12px; color:var(--ink-soft); }
.pf-ber-kopieerrij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px; }
.pf-ber-kopieer{ border:1.5px solid var(--petrol); background:var(--wit);
  font-family:inherit; font-size:11.5px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); border-radius:999px; padding:6px 14px; cursor:pointer; }
.pf-ber-kopieer:hover{ background:#EAF1F0; }
.pf-ber-brieflabel{ display:block; margin-top:14px; }
.pf-ber-briefzin{ margin:6px 0 0; padding-bottom:10px;
  border-bottom:1px solid var(--line-zacht);
  font-size:12.5px; color:var(--ink); line-height:1.65; }
.pf-ber-briefzin:last-of-type{ border-bottom:0; }
.pf-ber-briefvoet{ margin:14px 0 0; padding-top:10px;
  border-top:1px solid var(--line-zacht);
  font-size:10.5px; color:var(--ink-mist); line-height:1.6; }
.pf-ber-leesvoet{ max-width:620px; }

/* De ruil-regel op kaart 3 draagt een kruisje: overslaan mag. */
.pf-bord-weg{ flex:none; border:0; background:none; padding:0 2px;
  font-size:12px; line-height:1; color:var(--ink-mist); cursor:pointer; }
.pf-bord-weg:hover{ color:var(--ink-soft); }

/* De ingang op de plan-rij, naast exporteren. */
.pf-cp-berichtknop{ border:1px solid var(--line-sterk); background:var(--wit);
  font-family:inherit; font-size:11px; color:var(--petrol-deep);
  border-radius:999px; padding:3px 11px; cursor:pointer; white-space:nowrap; }
.pf-cp-berichtknop:hover{ background:#EAF1F0; border-color:var(--petrol); }

/* 111d · mobiel: vinkvakken die je met een duim raakt, velden over de volle
   breedte, en de knop als balk onderaan de kaart. */
@media (max-width:699px){
  .pf-ber-kop{ padding:12px 14px; }
  .pf-ber-sinds{ margin-left:0; flex-basis:100%; }
  .pf-ber-vlak{ padding:2px 12px; }
  .pf-ber-rij{ padding:11px 0; gap:12px; }
  .pf-ber-vink{ width:22px; height:22px; margin-top:0; font-size:13px;
    position:relative; }
  .pf-ber-vink::after{ content:''; position:absolute; top:-11px; left:-11px;
    right:-11px; bottom:-11px; }
  .pf-ber-contextknop:not(.is-gevuld){ opacity:1; }
  .pf-ber-voet{ flex-direction:column; align-items:stretch; }
  .pf-ber-door{ margin-left:0; width:100%; }
  .pf-ber-brief{ padding:18px 16px; }
}

/* ── 101a · de aanduidingen op de organogram-kaart ─────────────────────────
   Tot twee aanduidingen leest de kaart ze voluit, vanaf drie telt de
   gewicht-trap. De teller en "laatst gehoord" delen één regel: het ene zegt
   wanneer er gepraat is, het andere wat er nog openstaat. */
.pf-eenheid-aand{ display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  margin-top:6px; }
.pf-eenheid .pf-gewicht-pil{ font-size:10px; font-weight:var(--gew-vet);
  padding:1px 8px; }
.pf-aandrij{ display:flex; align-items:baseline; gap:5px; width:100%; min-width:0; }
.pf-aandrij .pf-gewicht-pil{ flex:none; }
/* Liever twee regels dan "tot m…": een afgekapte maand is geen datum. */
.pf-aandrij-bron{ flex:1 1 auto; min-width:0; font-size:10px; color:var(--ink-mist);
  line-height:1.35; }
.pf-eenheid .pf-gehoord{ font-size:10px; }
.pf-gehoord-teller{ margin-left:auto; }
.pf-tellerregel{ display:block; margin-top:4px; }
.pf-tellerregel .pf-teller{ margin-top:0; }
.pf-teller-nazin{ font-size:10.5px; font-weight:var(--gew-normaal);
  color:var(--ink-mist); }

/* ── C7.5 · de foto-import-wizard ────────────────────────────────────────
   De schil van de missie-import: cream kop met de belofte dat er nog niets
   geschreven wordt, een segmentbalk, een wit werkvlak en een cream voetbalk
   met terug links, de teller in het midden en de enige doorknop rechts.

   De twee waarde-vlakken naast elkaar zijn de grammatica van deze modus: wat
   er bij ons staat met een petrol rand, wat de foto zegt met een terra rand.
   Geen van beide is fout. */
.pf-wiz{ padding-bottom:90px; }
.pf-wiz-kaart{ background:var(--wit); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; max-width:900px;
  box-shadow:0 18px 48px rgba(10,57,54,.10); }
.pf-wiz-kop{ display:flex; align-items:flex-start; gap:12px;
  background:var(--cream); padding:18px 24px 14px; }
.pf-wiz-koptekst{ flex:1 1 auto; min-width:0; }
.pf-wiz-titel{ margin:0; font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:20px; color:var(--petrol-dark); }
.pf-wiz-sub{ margin:3px 0 0; font-size:12px; color:var(--ink-soft); }
.pf-wiz-sluit{ flex:none; border:0; background:none; color:var(--ink-mist);
  font-size:15px; cursor:pointer; padding:2px 4px; }
.pf-wiz-segmenten{ display:flex; gap:6px; background:var(--cream);
  padding:0 24px 16px; }
.pf-wiz-segment{ flex:1 1 0; height:5px; border-radius:3px; background:var(--line); }
.pf-wiz-segment.is-aan{ background:var(--petrol-dark); }
.pf-wiz-body{ padding:20px 24px 22px; }
.pf-wiz-koptitel{ margin:0; font-size:15px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-wiz-kopregel{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pf-wiz-uitleg{ margin:4px 0 12px; font-size:12px; color:var(--ink-soft); line-height:1.55; }
.pf-wiz-vlakken{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.pf-wiz-vlak{ flex:1 1 240px; background:var(--cream2); border-radius:10px; padding:10px 14px; }
.pf-wiz-vlakwaarde{ font-size:12.5px; color:var(--ink); margin-top:2px; }
.pf-wiz-vlakmeta{ font-size:11.5px; color:var(--ink-soft); }
.pf-wiz-agendakop{ margin:16px 0 4px; font-size:11.5px; color:var(--ink-mist); }
.pf-wiz-agendarij{ display:flex; align-items:baseline; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-wiz-agendarij:last-of-type{ border-bottom:0; }
.pf-wiz-agendaring{ flex:none; width:8px; height:8px; border-radius:50%;
  border:1.5px solid var(--petrol); }
.pf-wiz-agendarij:first-of-type .pf-wiz-agendaring{ border-color:var(--terra); }
.pf-wiz-agendarij.is-leeg{ opacity:.45; }
.pf-wiz-agendazin{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--ink); }
.pf-wiz-agendastap{ font-size:11px; color:var(--ink-mist); }
.pf-wiz-agendarust{ padding:7px 0 0; font-size:12px; color:var(--ink-mist); }

/* stap 2 · de twee rijen per groep */
.pf-wiz-tabelhouder{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.pf-wiz-tabel{ flex:1 1 auto; min-width:0; overflow-x:auto; }
.pf-wiz-slede{ flex:none; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:var(--wit); color:var(--ink-soft);
  font-size:13px; cursor:pointer; }
.pf-wiz-slede:hover{ border-color:var(--petrol); color:var(--petrol-deep); }
.pf-wiz-rij{ display:grid; grid-template-columns:150px 92px 92px 78px 92px 62px;
  gap:8px; align-items:center; padding:5px 0; }
.pf-wiz-rij.is-kop{ border-bottom:1px solid var(--line); padding-bottom:6px; }
.pf-wiz-rij.is-was{ opacity:.6; }
.pf-wiz-cel{ font-size:11.5px; color:var(--ink); display:flex; align-items:center; gap:5px; }
.pf-wiz-datum{ color:var(--ink-soft); }
.pf-wiz-groep{ padding:8px 0; border-bottom:1px solid var(--line-zacht); }
/* De naam met zijn kwadrant links, de ⊕ rechts op dezelfde regel. De kop was
   een blok, en dan is de flex-houder van de ⊕ een eigen regel van de volle
   breedte: de knop zweefde tussen de naam en de standrij eronder, rechts van
   niets. Eén regel dus, en de ⊕ duwt zichzelf naar de rand. */
.pf-wiz-groepkop{ display:flex; align-items:center; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink); padding-bottom:2px; min-height:26px; }
.pf-wiz-nieuw{ color:var(--terra); }
.pf-wiz-dots{ gap:3px; }
.pf-wiz-dot{ width:8px; height:8px; border-radius:50%; flex:none;
  border:1px solid var(--line-sterk); background:none; }
.pf-wiz-dot[data-k="groen"]{ background:var(--groen); border-color:var(--groen); }
.pf-wiz-dot[data-k="geel"], .pf-wiz-dot[data-k="amber"]{ background:var(--geel); border-color:var(--geel); }
.pf-wiz-dot[data-k="rood"]{ background:var(--rood); border-color:var(--rood); }
.pf-wiz-dot[data-soort="impact"][data-k="stevig"]{ background:var(--geel); border-color:var(--geel); }
.pf-wiz-dot[data-soort="impact"][data-k="ingrijpend"]{ background:var(--terra); border-color:var(--terra); }
.pf-wiz-teller{ margin:6px 0 0; text-align:center; font-size:11px; color:var(--ink-mist); }
.pf-wiz-onder{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.pf-wiz-mprij{ display:flex; align-items:baseline; gap:7px; padding:3px 0; font-size:11.5px; }
.pf-wiz-mpteken{ color:var(--petrol-deep); }
/* R135 · de krans om het teken van de afronding. Een glyph vult zijn regeldoos
   niet · hij hangt er laag en rechts in · dus stond de krans scheef en raakte
   een puntje de naam. Het teken krijgt daarom een eigen vierkante doos met de
   glyph gecentreerd, en de straal volgt die doos. En de rij mag niet knippen,
   anders gaan de punten eraf (les 38). */
.pf-wiz-mpteken.c-krans{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em; height:1em;
  line-height:1;
  --krans-r:9px;
}
.pf-wiz-mprij{ overflow:visible; }
.pf-wiz-mpwat{ flex:1 1 auto; min-width:0; color:var(--ink); }
.pf-wiz-mpdatum{ color:var(--ink-mist); }
.pf-wiz-mpaf{ color:var(--groen); }
/* R136 · "38% → 41%" is één overgang en breekt dus niet. De naam ernaast mag
   wel over twee regels; die krimpt (flex:1 1 auto), deze niet. */
.pf-wiz-meting{ color:var(--ink); white-space:nowrap; flex:none; }

/* stap 3 en 4 · de schakelrijen */
.pf-wiz-schakelkop, .pf-wiz-schakelrij{ display:grid;
  grid-template-columns:1fr 150px 150px 170px; gap:12px; align-items:center; }
.pf-wiz-schakelkop{ padding:8px 0 4px; border-bottom:1px solid var(--line); }
.pf-wiz-schakelrij{ padding:11px 0; border-bottom:1px solid var(--line-zacht); }
.pf-wiz-schakelwat{ font-size:12.5px; color:var(--ink); }
.pf-wiz-rechtskop{ color:var(--terra); }
.pf-wiz-waarde{ font-size:11.5px; color:var(--ink-soft); background:var(--cream2);
  border:1px solid transparent; border-radius:8px; padding:6px 10px; }
.pf-wiz-waarde.is-petrol{ color:var(--ink); background:var(--wit); border:1.5px solid var(--petrol); }
.pf-wiz-waarde.is-terra{ color:var(--ink); background:var(--wit); border:1.5px solid var(--terra); }
.pf-wiz-schakelplek{ display:flex; align-items:center; gap:9px; justify-content:flex-end; }
.pf-wiz-schakellabel{ font-size:11px; color:var(--ink-soft); text-align:right; }
.pf-wiz-switch{ flex:none; width:38px; height:21px; border-radius:999px;
  border:0; background:var(--line-sterk); padding:2px; cursor:pointer;
  display:inline-flex; align-items:center; transition:background .12s; }
.pf-wiz-switch.is-aan{ background:var(--petrol); }
.pf-wiz-switchknop{ width:17px; height:17px; border-radius:50%; background:var(--wit);
  transition:transform .12s; }
.pf-wiz-switch.is-aan .pf-wiz-switchknop{ transform:translateX(17px); }
.pf-wiz-slot{ margin-top:16px; background:var(--cream2); border-radius:10px; padding:12px 14px; }
.pf-wiz-slotzin{ margin:4px 0 0; font-size:12.5px; color:var(--ink); }
.pf-wiz-slotbron{ margin:4px 0 0; font-size:11px; color:var(--ink-mist); }

.pf-wiz-voet{ display:flex; align-items:center; gap:12px; background:var(--cream);
  border-top:1px solid var(--line); padding:14px 24px; }
.pf-wiz-terug{ border:0; background:none; padding:0; font-family:inherit;
  font-size:12px; color:var(--ink-soft); cursor:pointer; }
.pf-wiz-terug:hover{ color:var(--ink); }
.pf-wiz-voettel{ flex:1 1 auto; text-align:center; font-size:11.5px; color:var(--ink-mist); }
.pf-wiz-door{ flex:none; }

@media (max-width:699px){
  .pf-wiz-kop, .pf-wiz-segmenten, .pf-wiz-body, .pf-wiz-voet{ padding-left:14px; padding-right:14px; }
  .pf-wiz-rij{ grid-template-columns:130px 84px 84px 70px 84px 58px; }
  .pf-wiz-schakelkop, .pf-wiz-schakelrij{ grid-template-columns:1fr; gap:6px; }
  .pf-wiz-schakelplek{ justify-content:flex-start; }
  .pf-wiz-switch{ width:46px; height:26px; }
  .pf-wiz-switchknop{ width:22px; height:22px; }
  .pf-wiz-switch.is-aan .pf-wiz-switchknop{ transform:translateX(20px); }
  .pf-wiz-tabelhouder{ flex-wrap:wrap; }
  .pf-wiz-slede{ order:2; }
}

/* ── R104 · de blokken van het initiatief ─────────────────────────────────
   IMPACT · RANDVOORWAARDEN · BEGELEIDING · VOOR HET GESPREK, in die volgorde.
   De vork bij een leeg impactbeeld draagt de blindevlekvorm van de hele modus:
   een stippellijn, geen kleur, geen uitroepteken. */
.pf-blok{ margin-top:14px; }
.pf-blok-kopregel{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:4px; }
.pf-blok-tel{ font-size:11.5px; color:var(--ink-soft); }
.pf-blok-mist{ margin:4px 0 0; font-size:11.5px; color:var(--ink-mist); line-height:1.5; }
.pf-blok-naar{ margin-left:auto; border:0; background:none; padding:0;
  font-family:inherit; font-size:11px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); cursor:pointer; white-space:nowrap; }
.pf-blok-naar:hover{ text-decoration:underline; }
.pf-vork{ margin-top:5px; border:1.5px dashed var(--line-sterk); border-radius:10px;
  padding:10px 12px; }
.pf-vork-zin{ margin:0; font-size:12px; color:var(--ink-soft); }
.pf-vork-tak{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pf-vork-vraag{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--ink-mist); }
.pf-vork-tak .pf-blok-naar{ margin-left:0; }
.pf-vermoedregel{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:5px; background:var(--cream2); border-radius:8px; padding:5px 9px;
  font-size:11px; color:var(--ink-soft); }
.pf-vermoedregel .pf-blok-naar{ margin-left:auto; }
.pf-impactrij{ display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:5px 0; border-bottom:1px solid var(--line-zacht); }
.pf-impactrij:last-child{ border-bottom:0; }
.pf-impactrij-naam{ border:0; background:none; padding:0; font-family:inherit;
  font-size:12px; color:var(--ink); cursor:pointer; text-align:left; }
.pf-impactrij-naam:hover{ text-decoration:underline; }
.pf-impactrij .pf-gewicht-pil{ font-size:10px; padding:1px 8px; }
.pf-impactrij-staat{ font-size:10.5px; color:var(--ink-mist); }
.pf-impactrij-staat.is-bevestigd{ color:var(--groen); }
/* Vermoed is dashed, overal hetzelfde teken. */
.pf-impactrij-staat.is-vermoed{ border:1px dashed var(--line-sterk);
  border-radius:999px; padding:0 7px; }
.pf-impactrij-periode{ margin-left:auto; font-size:10.5px; color:var(--ink-mist);
  white-space:nowrap; }
.pf-blok-gesprek{ border-top:1px solid var(--line-zacht); padding-top:10px; }
.pf-blok-sam{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  cursor:pointer; list-style:none; }
.pf-blok-sam .pf-paneel-label{ flex:none; }
.pf-blok-sam::-webkit-details-marker{ display:none; }
.pf-blok-sam::after{ content:'▸'; margin-left:auto; font-size:10px; color:var(--ink-mist); }
.pf-blok-gesprek[open] .pf-blok-sam::after{ content:'▾'; }
.pf-blok-sub{ font-size:11px; color:var(--ink-mist); }
.pf-gespreksvraag{ margin-top:10px; }
.pf-gespreksvraag-tekst{ font-size:11.5px; color:var(--ink); }
.pf-gespreksregel{ display:flex; align-items:baseline; gap:6px; margin-top:3px;
  font-size:11px; color:var(--ink-soft); }
.pf-gespreksregel-naar{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11px; color:var(--petrol-deep); cursor:pointer; }

/* ── R109 · de reeks ──────────────────────────────────────────────────────
   Nieuwste boven, oudere blijven staan. Een vervallen kijk draagt de
   blindevlekvorm van de modus: amber, mist, en de weg om het alsnog te horen.
   Nooit rood — er is niets fout aan iets wat je nog niet gehoord hebt. */
.pf-reeks-regel{ display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-reeks-regel:last-of-type{ border-bottom:0; }
.pf-reeks-datum{ flex:none; min-width:56px; font-size:11.5px;
  font-weight:var(--gew-vet); color:var(--ink); }
.pf-reeks-regel.is-vervallen .pf-reeks-datum{ color:var(--geel-tekst); }
.pf-reeks-lezing{ flex:1 1 auto; min-width:0; border:0; background:none; padding:0;
  font-family:inherit; font-size:12px; color:var(--ink); text-align:left; cursor:pointer;
  line-height:1.5; }
.pf-reeks-lezing:hover{ text-decoration:underline; }
span.pf-reeks-lezing, .pf-reeks-lezing.is-mist{ color:var(--ink-mist); cursor:default;
  text-decoration:none; }
.pf-reeks-naar{ flex:none; border:0; background:none; padding:0; font-family:inherit;
  font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep);
  cursor:pointer; white-space:nowrap; }
.pf-reeks-naar:hover{ text-decoration:underline; }
.pf-reeks-leeg{ font-size:11.5px; color:var(--ink-mist); padding:4px 0; }
.pf-reeks-voet{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line-zacht); }
.pf-reeks-volgend{ font-size:11.5px; color:var(--ink); }
.pf-reeks-volgend.is-mist{ color:var(--ink-mist); }
.pf-reeks-gezet{ font-size:10.5px; color:var(--ink-mist); }
.pf-reeks-af{ font-size:11.5px; color:var(--ink-soft); }
.pf-reeks-dun{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.pf-reeks-sluit{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pf-reeks-reden{ font-size:10.5px; }
input.pf-reeks-datumveld{ width:auto; font-size:11.5px; padding:3px 7px; }

/* ── R106 · de randvoorwaarden-check ──────────────────────────────────────
   Vaste aftastpunten met een observatie eronder. Geen kleur per punt, geen
   score, geen teller: een check is een gesprek dat je voert, geen formulier
   dat je afmaakt. */
.pf-check-vraag{ margin:4px 0 0; font-size:11.5px; color:var(--ink-mist); line-height:1.5; }
.pf-checkpunt{ padding:7px 0; border-bottom:1px solid var(--line-zacht); }
.pf-checkpunt:last-of-type{ border-bottom:0; }
.pf-checkpunt-label{ font-size:11px; font-weight:var(--gew-vet); color:var(--ink-soft); }
.pf-checkpunt-tekst{ margin-top:2px; font-size:12px; color:var(--ink); line-height:1.5; }
/* Niet te lezen: de blindevlekvorm, nooit een kleur. */
.pf-checkpunt-leeg{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:4px; font-size:11.5px; color:var(--ink-mist);
  border:1.5px dashed var(--line-sterk); border-radius:8px; padding:6px 10px; }
.pf-checkpunt-leeg > span{ flex:1 1 auto; min-width:0; }
.pf-checkpunt-leeg .pf-blok-naar{ margin-left:0; }
.pf-checkpunt-veld{ width:100%; box-sizing:border-box; margin-top:3px;
  font-family:inherit; font-size:12px; color:var(--ink); background:var(--wit);
  border:1px solid var(--line); border-radius:var(--r-veld,6px); padding:5px 8px;
  resize:vertical; }
.pf-checkpunt-veld:focus{ outline:none; border-color:var(--petrol); }
.pf-checkpunt-eigenkop{ display:flex; align-items:center; gap:6px; }
.pf-checkpunt-labelveld{ flex:1 1 auto; min-width:0; font-family:inherit;
  font-size:11px; font-weight:var(--gew-vet); color:var(--ink-soft);
  background:none; border:0; border-bottom:1px dashed var(--line-sterk); padding:1px 0; }
.pf-checkpunt-labelveld:focus{ outline:none; border-bottom-color:var(--petrol); }
.pf-checkpunt-weg{ flex:none; border:0; background:none; color:var(--ink-mist);
  font-size:11px; cursor:pointer; padding:0 3px; }
.pf-checkpunt-ghost{ padding:7px 0 2px; }
.pf-checkpunt-ghostveld{ width:100%; box-sizing:border-box; font-family:inherit;
  font-size:12px; color:var(--ink); background:none; border:0;
  border-bottom:1px dashed var(--line-sterk); padding:3px 0; }
.pf-checkpunt-ghostveld::placeholder{ color:var(--line-ghost); }
.pf-checkpunt-ghostveld:focus{ outline:none; border-bottom-color:var(--petrol); }
.pf-checkslot{ margin-top:10px; padding-top:9px; border-top:1px solid var(--line-zacht); }
.pf-checkslot-pillen{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.pf-checkslot-pillen .c-chip{ font-size:10.5px; }
.pf-checkslot-woord{ margin:3px 0 0; font-size:12px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); }
.pf-checkslot-motief{ margin:3px 0 0; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.pf-checkslot-pre{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pf-checkslot-hand{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pf-checkslot-hand select{ font-size:11.5px; }
.pf-checkslot-pre .pf-blok-naar{ margin-left:0; }
.pf-checkslot-pre .pf-checkpunt-ghostveld{ flex:1 1 160px; width:auto; }
/* 106b · het teken verschilt per kant. Het pre-initiatief draagt zijn
   koppeling inline in de metaregel; de wachtende rij draagt een klein badge
   rechtsboven in de naamcel, want een tweede tekstregel viel over de rij
   eronder. */
.pf-naamcel.heeft-rv, .pf-init-kop.heeft-rv{ position:relative; padding-right:16px; }
.pf-rv-badge-houder{ position:absolute; top:2px; right:2px; line-height:0; }
.pf-rv-badge{ width:9px; height:9px; border:1.5px dotted var(--ink-mist);
  border-radius:50%; background:none; padding:0; cursor:pointer; display:block; }
.pf-rv-badge:hover, .pf-rv-badge:focus-visible{ border-color:var(--petrol);
  border-style:solid; outline:none; }
.pf-rv-tip{ position:absolute; top:14px; right:0; z-index:5; display:none;
  align-items:center; gap:6px; white-space:nowrap;
  background:var(--ink); color:var(--cream); border-radius:6px;
  padding:4px 8px; font-size:10.5px; line-height:1.4;
  box-shadow:0 6px 18px rgba(10,57,54,.22); }
.pf-rv-badge-houder:hover .pf-rv-tip,
.pf-rv-badge-houder:focus-within .pf-rv-tip{ display:inline-flex; }
.pf-rv-tip-weg{ border:0; background:none; color:var(--cream); opacity:.7;
  font-size:11px; line-height:1; cursor:pointer; padding:0 2px; }
.pf-rv-tip-weg:hover{ opacity:1; }

/* R106b · de verbinder: dotted, grijs, zonder pijlpunt. Het is een verwijzing
   en geen richting in de tijd. */
.pf-pijl.is-rv{ border-color:var(--ink-mist); border-style:dotted; border-width:1.5px; }
.pf-pijl.is-rv::after{ display:none; }

/* ── 105c · de portfolio-missie ───────────────────────────────────────────
   Wat terugkwam naast wat wij dachten. Groen is een bevestiging, amber een
   verschil, mist een groep die wij niet kenden. Geen van drieën is fout. */
.pf-missie-aan{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.pf-missie-rijen{ display:flex; flex-direction:column; }
.pf-missie-rij{ display:flex; align-items:baseline; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-missie-dot{ flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--line-ghost); align-self:center; }
.pf-missie-rij[data-stand="bevestigd"] .pf-missie-dot{ background:var(--groen); }
.pf-missie-rij[data-stand="verschil"] .pf-missie-dot{ background:var(--geel); }
.pf-missie-zin{ flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--ink); line-height:1.5; }
.pf-missie-periode, .pf-missie-jij{ color:var(--ink-mist); font-weight:var(--gew-normaal); }
.pf-missie-actie{ flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--ink-mist); white-space:nowrap; }
.pf-missie-ghost{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 0 2px; }
.pf-missie-ghost select{ font-size:11.5px; }
.pf-missie-bron{ margin:10px 0 0; font-size:10.5px; color:var(--ink-mist); }

/* ── R103 · het afwegingspaneel ───────────────────────────────────────────
   Dezelfde paneelvorm als het kompas (.c-paneel uit schil.css), maar rechts
   verankerd: het kompas is naslag naast het menu, de afweging hoort bij het
   initiatief dat je op het werkvlak open hebt staan. Op een telefoon vallen
   ze weer samen tot dezelfde bottom sheet. */
.pf-afw-houder{ position:fixed; inset:0; z-index:var(--z-sheet); }
.pf-afw-houder .c-sluier{ position:absolute; inset:0; }
.pf-afw-paneel{ left:auto; right:0; width:min(520px, 92vw);
  border-right:0; border-left:1px solid var(--line); }
.pf-afw-titelblok{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pf-afw-kopnaam{ font-size:12px; color:var(--ink-soft); line-height:1.35; }
.pf-afw-body{ display:flex; flex-direction:column; gap:0; }

.pf-afw-leeg{ margin:0; font-size:12px; color:var(--ink-mist); line-height:1.5; }
.pf-afw-vermoed{ font-size:11.5px; color:var(--ink-soft); line-height:1.5;
  padding-bottom:10px; border-bottom:1px solid var(--line-zacht); }

/* Eén kaart per aangeduide groep, in registervolgorde. Geen kleur op de kaart
   zelf: de twee kolommen zijn de aflezing, de kaart is alleen hun houder. */
.pf-afw-groep{ padding:12px 0; border-bottom:1px solid var(--line-zacht); }
.pf-afw-groepnaam{ border:0; background:none; padding:0; font-family:var(--font-kop);
  font-weight:var(--gew-vet); font-size:13.5px; color:var(--petrol-dark);
  cursor:pointer; text-align:left; }
.pf-afw-groepnaam:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-afw-kolommen{ display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:0 18px; margin-top:8px; align-items:start; }
.pf-afw-kolom{ display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  min-width:0; }
.pf-afw-kolom > .pf-paneel-label{ margin-bottom:1px; }
.pf-afw-mist{ margin:0; font-size:11px; color:var(--ink-mist); line-height:1.5; }
/* De gebeurtenis-regel: tekst die mag afbreken, en de ↗ die op de eerste regel
   blijft staan. Zonder align-items:baseline zakt de pijl bij een regel van twee
   lijnen mee naar beneden en lijkt hij bij de verkeerde regel te horen. */
.pf-afw-gebeurtenis{ display:flex; align-items:baseline; gap:6px; width:100%;
  font-size:11.5px; color:var(--ink); line-height:1.5; }
.pf-afw-gebeurtenis.is-leeg{ color:var(--ink-mist); font-style:italic; }
.pf-afw-herkomst{ flex:none; border:0; background:none; padding:0 2px;
  font-size:11px; color:var(--ink-mist); cursor:pointer; line-height:1; }
.pf-afw-herkomst:hover{ color:var(--petrol); }

.pf-afw-blok{ padding:14px 0 4px; border-bottom:1px solid var(--line-zacht); }
.pf-afw-blok:last-child{ border-bottom:0; }
.pf-afw-les{ display:flex; align-items:baseline; gap:7px; margin-top:6px;
  font-size:12px; color:var(--ink); line-height:1.5; }
.pf-afw-momentzin{ margin:6px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.5; }
.pf-afw-momentrij{ display:flex; align-items:baseline; gap:8px; margin-top:5px; }
.pf-afw-momentnaam{ border:0; background:none; padding:0; font-family:inherit;
  font-size:12px; color:var(--petrol); cursor:pointer; text-align:left; }
.pf-afw-momentnaam:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-afw-momentstand{ font-size:11px; color:var(--ink-mist); }
.pf-afw-blok > .pf-blok-naar{ margin-top:8px; }

/* De trap: vier pillen in oplopende zwaarte, links naar rechts. Gekozen is
   petrol gevuld mét omlijning, zodat de keuze ook zonder kleur leesbaar blijft. */
.pf-afw-trap{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pf-afw-pil{ border:1px solid var(--line-sterk); background:var(--wit);
  border-radius:999px; padding:5px 12px; font-family:inherit; font-size:11.5px;
  color:var(--ink); cursor:pointer; }
.pf-afw-pil:hover{ border-color:var(--petrol); color:var(--petrol); }
.pf-afw-pil.is-actief{ background:var(--petrol); border-color:var(--petrol-deep);
  color:var(--wit); font-weight:var(--gew-vet); }
.pf-afw-motiveringlabel{ display:block; margin-top:12px; font-size:11px;
  color:var(--ink-mist); }
.pf-afw-motivering{ display:block; width:100%; box-sizing:border-box; margin-top:4px;
  border:1px solid var(--line); border-radius:var(--r-veld); background:var(--wit);
  padding:7px 9px; font-family:inherit; font-size:12px; color:var(--ink);
  line-height:1.5; resize:vertical; }
.pf-afw-motivering:focus{ outline:none; border-color:var(--petrol); }
.pf-afw-vorige{ margin-top:12px; padding-top:8px; border-top:1px dotted var(--line-ghost);
  font-size:11px; color:var(--ink-mist); line-height:1.5; }
.pf-afw-vorigemotief{ margin-top:2px; font-style:italic; }

.pf-afw-voet{ flex:none; display:flex; align-items:center; gap:10px;
  padding:12px var(--sp-8); border-top:1px solid var(--line); background:var(--cream); }
.pf-afw-vast:disabled{ opacity:.45; cursor:default; }

@media (max-width:699px){
  .pf-afw-paneel{ left:0; right:0; width:auto; border-left:0; }
  .pf-afw-kolommen{ grid-template-columns:1fr; gap:10px; }
}
.pf-afw-leskolom{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pf-afw-lesvan{ align-self:flex-start; border:0; background:none; padding:0;
  font-family:inherit; font-size:10.5px; color:var(--ink-mist); cursor:pointer; }
.pf-afw-lesvan:hover{ color:var(--petrol); }

/* B4 · het voorstel dat na het vastleggen in het paneel blijft staan. Ghost:
   dotted rand, want het staat er nog niet — dezelfde vorm als elke andere
   ghost-regel in de modus. */
.pf-afw-vastzin{ margin:0 0 14px; font-size:12.5px; color:var(--groen);
  font-weight:var(--gew-vet); line-height:1.5; }
.pf-afw-ghost{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:8px; border:1px dashed var(--line-ghost); border-radius:var(--r-veld);
  padding:9px 11px; background:var(--cream); }
.pf-afw-ghosttekst{ flex:1 1 180px; font-size:12px; color:var(--ink); line-height:1.45; }
.pf-afw-ghostdatum{ flex:none; border:1px solid var(--line); border-radius:var(--r-veld);
  background:var(--wit); padding:4px 7px; font-family:inherit; font-size:11.5px;
  color:var(--ink); }
.pf-afw-toetsrij{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.pf-afw-nietnu{ border:0; background:none; padding:0; font-family:inherit;
  font-size:12px; color:var(--ink-mist); cursor:pointer; }
.pf-afw-nietnu:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* ── R107 v1 · de borging-afspraak op "Wat er bleef staan" ────────────────
   Geen eigen kaartvorm: het is een blok onderaan de trajectkaart, met per
   geraakte groep één regel. De afspraak zelf is een gewone actie, en ze ziet
   eruit als wat ze is — een regel met een datum, niet een kaart met status. */
.pf-v3-borging{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.pf-borg-groep{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:8px; }
.pf-borg-groepnaam{ font-weight:var(--gew-vet); font-size:12.5px; color:var(--ink); }
.pf-borg-regel{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin:5px 0 0 14px; padding-left:10px; border-left:2px solid var(--line); }
.pf-borg-datum{ flex:none; font-size:11px; color:var(--ink-mist);
  font-variant-numeric:tabular-nums; }
.pf-borg-tekst{ flex:1 1 200px; min-width:0; border:0; background:none; padding:0;
  font-family:inherit; font-size:12px; color:var(--ink); line-height:1.45;
  text-align:left; cursor:pointer; }
.pf-borg-tekst:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-borg-af{ flex:none; border:0; background:none; padding:0; font-family:inherit;
  font-size:11px; color:var(--ink-mist); cursor:pointer; }
.pf-borg-af:hover{ color:var(--groen); }
.pf-borg-uitleg{ margin:0 0 12px; font-size:12px; color:var(--ink-soft); line-height:1.55; }
.pf-borg-hint{ margin:5px 0 12px; font-size:11px; color:var(--ink-mist); line-height:1.5; }

/* ── 110a · het kalibratiespoor in het groep-paneel ───────────────────────
   Doorgehaald wat je dacht, ernaast wat je ervan maakte. Geen kleur: de
   richting van een bijstelling is geen oordeel, en een groene of rode regel
   zou dat wel beweren. */
.pf-kalrij{ margin-top:8px; padding-left:9px; border-left:2px solid var(--line); }
.pf-kalrij-wat{ display:flex; flex-wrap:wrap; align-items:baseline; gap:5px;
  font-size:12px; line-height:1.45; }
.pf-kal-oud{ color:var(--ink-mist); }
.pf-kal-pijl{ color:var(--line-ghost); }
.pf-kal-nieuw{ color:var(--ink); font-weight:var(--gew-vet); }
.pf-kal-meta{ font-size:10.5px; color:var(--ink-mist); line-height:1.5; margin-top:1px; }
.pf-kal-nooit{ margin:10px 0 0; font-size:10.5px; color:var(--ink-mist); line-height:1.5; }

/* De bord-vorm op het borging-blok: wat loopt staat voluit, wat afgerond is
   vouwt samen tot één telregel. Geen grens op het aantal — zes groepen die
   allemaal lopen horen alle zes te staan. */
.pf-borg-stand{ flex:none; font-size:10.5px; color:var(--ink-mist); }
.pf-borg-vouw{ display:block; margin-top:9px; border:0; background:none; padding:0;
  font-family:inherit; font-size:11px; color:var(--ink-mist); cursor:pointer; }
.pf-borg-vouw:hover{ color:var(--petrol); }
.pf-borg-regel.is-af{ border-left-color:var(--line-zacht); }
.pf-borg-regel.is-af .pf-borg-tekst,
.pf-borg-regel.is-af .pf-borg-datum{ color:var(--ink-mist); }
.pf-borg-afwoord{ flex:none; font-size:10.5px; color:var(--groen); }

/* ── 101c · de match in het groep-paneel ──────────────────────────────────
   Geen eigen kaartvorm: het zijn blokken in het bestaande paneel, met de
   paneel-labels die er al staan. De foto-stapel leent de tabel van Stand
   (97i) en krimpt alleen haar kolommen — dezelfde regel, smaller. */
.pf-match-blok{ margin-top:16px; }
.pf-match-rijhouder{ display:flex; align-items:center; gap:4px; }
.pf-match-rij{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:4px 7px;
  border:0; background:none; padding:4px 0; font-family:inherit; text-align:left;
  cursor:pointer; border-radius:var(--r-veld); }
.pf-match-rij:hover{ background:var(--cream2); }
.pf-match-rij.is-deze .pf-match-naam{ font-weight:var(--gew-vet); color:var(--petrol-dark); }
/* Het balkje draagt de vulkleur van de tijdlijn, en dus dezelfde gewicht-trap.
   Buiten de changeplannen blijft het leeg: er is geen foto om het te vullen. */
.pf-match-balk{ flex:none; width:16px; height:7px; border-radius:3px;
  background:var(--petrol); }
.pf-match-balk[data-gewicht="stevig"]{ background:var(--petrol); opacity:.72; }
.pf-match-balk[data-gewicht="beperkt"]{ background:var(--petrol); opacity:.42; }
.pf-match-balk:not([data-gewicht]),
.pf-match-balk[data-gewicht=""]{ background:none; border:1px solid var(--line-ghost); }
/* De naam wikkelt liever dan dat hij afkapt: "Nieuw zorgdoss…" naast een
   gewicht-pil is geen regel meer die je kunt voorlezen. */
.pf-match-naam{ flex:0 1 auto; min-width:0; font-size:12.5px; color:var(--petrol);
  line-height:1.35; }
.pf-match-meta{ flex:0 1 auto; min-width:0; font-size:11px; color:var(--ink-mist);
  line-height:1.4; }
.pf-match-rij .pf-gewicht-pil{ margin-left:auto; flex:none; }
.pf-match-pijl{ flex:none; border:0; background:none; padding:2px 3px;
  font-size:11px; color:var(--ink-mist); cursor:pointer; line-height:1; }
.pf-match-pijl:hover{ color:var(--petrol); }

.pf-match-regel{ display:flex; align-items:baseline; gap:6px; margin-top:5px;
  font-size:12px; color:var(--ink); line-height:1.5; }
.pf-match-mist{ margin-top:6px; font-size:11px; color:var(--ink-mist); line-height:1.5; }
.pf-match-les{ align-items:flex-start; }
.pf-match-leskolom{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.pf-match-lesvan{ font-size:10.5px; color:var(--ink-mist); }

/* De foto-stapel: de tabel van Stand, maar in een paneel van 320px. Dezelfde
   anatomie, smallere kolommen — en wat dan nog niet past scrolt in zijn eigen
   houder. Kolommen weglaten zou de lezing veranderen: readiness naast landt
   ís waar deze stapel over gaat. */
.pf-match-tabel{ margin-top:8px; overflow-x:auto; }
/* Vijf domeinen, vijf readiness-assen, drie capaciteit-factoren. Uitgerekend:
   57 + 42 + 41 + 27 plus de tussenruimtes past in een paneel van 320px zodra de
   plan-naam mag wikkelen. Alles blijft dus in beeld — juist het naast elkaar
   staan is hier de lezing. */
.pf-match-tabel .pf-stand-rij{ gap:5px;
  grid-template-columns:minmax(70px,1fr) 53px 40px 43px 26px; }
.pf-match-tabel .pf-stand-kol{ gap:2px; }
/* De kopregel van Stand past niet in 320px: "capaciteit" in 9px hoofdletters is
   breder dan de drie stippen eronder. In plaats van afkappen of afkorten staat
   de kolomvolgorde als één regel boven de tabel, en elke stip draagt haar as en
   haar kleur al in de tooltip. */
.pf-match-tabel .pf-stand-rij-kop{ display:none; }
.pf-match-volgorde{ margin-top:8px; font-size:10px; color:var(--ink-mist);
  letter-spacing:.04em; }
.pf-match-tabel .pf-stand-initknop{ min-width:0; }
.pf-match-tabel .pf-stand-initknop{ flex-wrap:wrap; gap:0 5px; }
.pf-match-tabel .pf-stand-initnaam{ line-height:1.3; white-space:normal;
  overflow:visible; text-overflow:clip; }
/* "Staat nog te gebeuren" is op Stand de brede laatste kolom; in een paneel van
   320px zou ze de hele tabel uit beeld duwen. De regel zelf staat er nog: de ↗
   op de rij gaat naar het plan waar ze voluit te lezen is. */
.pf-match-tabel .pf-stand-kol-staat{ display:none; }

/* De blindevlek in de bestaande blindevlekvorm, en met dezelfde zichtbaarheid
   als een volle regel: wat we niet weten hoort niet in de mist. */
.pf-match-blind{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:16px; border:1.5px dashed var(--line-sterk); border-radius:var(--r-veld);
  padding:10px 12px; }
.pf-match-blindzin{ flex:1 1 160px; margin:0; font-size:12px; color:var(--ink);
  line-height:1.5; }
/* De gewicht-pil op de register-rij is sinds 101c een knop naar de match. Ze
   houdt haar vorm — het is dezelfde aflezing — en toont alleen dat je erop kunt
   klikken. */
.pf-gewicht-pil-knop{ font-family:inherit; cursor:pointer; }
.pf-gewicht-pil-knop:hover{ filter:brightness(.96); }
/* De kopregel bij een plan-rij in de foto-stapel: de twee gespreksopeners uit
   die foto. Ze staan over de volle breedte boven hun rij, want ze horen bij
   die ene foto en niet bij een kolom. */
.pf-match-plankop{ display:flex; flex-direction:column; gap:1px;
  padding:7px 0 1px; font-size:10.5px; line-height:1.45; color:var(--ink-mist); }
.pf-match-tabel .pf-stand-rij + .pf-match-plankop{ border-top:1px solid var(--hairline); }
.pf-match-kwadrant{ color:var(--ink-soft); }
/* 107 · de borging-geschiedenis als leesregels onder het draagvlak-punt van de
   check. Mist, want het is materiaal en geen antwoord: het staat er om de vraag
   mee te beantwoorden, niet om haar te beantwoorden. */
.pf-checkpunt-borging{ margin-top:6px; padding-left:9px; border-left:2px solid var(--line-zacht); }
.pf-checkpunt-borglabel{ font-size:9px; font-weight:var(--gew-zwaar); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); }
.pf-checkpunt-borgrij{ display:flex; align-items:baseline; gap:6px; margin-top:3px;
  font-size:11px; color:var(--ink-soft); line-height:1.5; }

/* ── R107 · de tab Borging ────────────────────────────────────────────────
   Dezelfde tab-rij en dezelfde kaartvorm als de rest van Opvolging; alleen het
   binnenwerk is anders, want deze lijst is gegroepeerd per groep en gedreven
   door de kijkdatum. */
.pf-borgtab-kop b{ font-weight:var(--gew-vet); color:var(--ink); }
.pf-borgtab-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.pf-borgtab-kaart{ background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-kaart); padding:14px 18px 16px; }
.pf-borgtab-groepkop{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px;
  margin-top:16px; }
.pf-borgtab-kaart > .pf-borgtab-groepkop:first-child{ margin-top:0; }
.pf-borgtab-groepnaam{ font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); }
.pf-borgtab-herkomst{ font-size:11px; color:var(--ink-mist); }

.pf-borgtab-rij{ display:flex; align-items:flex-start; gap:9px; padding:8px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-borgtab-rij:last-child{ border-bottom:0; }
/* De vier standen in de bestaande grammatica van de app. Amber is een blinde
   vlek en geen alarm: geen rood, geen uitroepteken. */
.pf-borgtab-dot{ flex:none; width:9px; height:9px; margin-top:5px; border-radius:50%;
  background:var(--groen); }
.pf-borgtab-dot[data-stand="hiaat"]{ background:var(--geel); }
.pf-borgtab-dot[data-stand="afbouw"]{ background:var(--petrol); opacity:.55; }
.pf-borgtab-dot[data-stand="losgelaten"]{ background:#D8D2C7; }
.pf-borgtab-links{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap;
  align-items:baseline; gap:2px 6px; }
.pf-borgtab-tekst{ border:0; background:none; padding:0; font-family:inherit;
  font-size:13px; color:var(--ink); line-height:1.45; text-align:left; cursor:pointer; }
.pf-borgtab-tekst:hover{ text-decoration:underline; text-underline-offset:2px; }
.pf-borgtab-rij[data-stand="losgelaten"] .pf-borgtab-tekst{ color:var(--ink-mist); }
.pf-borgtab-meta{ font-size:11.5px; color:var(--ink-mist); line-height:1.5; }
.pf-borgtab-stand{ flex:none; display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:flex-end; gap:4px 8px; max-width:46%; text-align:right; }
.pf-borgtab-standwoord{ font-size:11.5px; color:var(--ink-soft); }
.pf-borgtab-standwoord.is-hiaat{ color:var(--geel-tekst); }
.pf-borgtab-gehoord{ border:0; background:none; padding:0; font-family:inherit;
  font-size:11.5px; color:var(--ink-mist); cursor:pointer; }
.pf-borgtab-gehoord:hover{ color:var(--petrol); }
.pf-borgtab-volgende{ font-size:11.5px; color:var(--ink-mist); }

/* De mint-regel: één volgende handeling per scherm. */
.pf-borgtab-mint{ margin-top:14px; border:1px solid rgba(44,138,107,.28);
  background:rgba(44,138,107,.07); border-radius:var(--r-veld);
  padding:10px 14px; font-size:12.5px; color:var(--petrol-dark); line-height:1.5; }

.pf-borgtab-leeg{ background:var(--wit); border:1px dashed var(--line-sterk);
  border-radius:var(--r-kaart); padding:22px 20px; }
.pf-borgtab-leegsub{ margin:6px 0 0; font-size:12px; color:var(--ink-mist); line-height:1.55; }
.pf-borgtab-trap{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }
.pf-borgtab-afbouw{ display:flex; align-items:center; gap:7px; margin-top:12px;
  font-size:12px; color:var(--ink); }

@media (max-width:699px){
  .pf-borgtab-rij{ flex-wrap:wrap; }
  .pf-borgtab-stand{ max-width:100%; justify-content:flex-start; text-align:left;
    padding-left:18px; }
}
/* De historiek-rij van een borging draagt haar besluit: zonder die regel is een
   losgelaten afspraak een titel zonder verhaal. */
.pf-borgtab-histrij{ align-items:flex-start; }
.pf-borgtab-histkolom{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pf-borgtab-besluit{ display:flex; align-items:baseline; gap:5px;
  font-size:11px; color:var(--ink-mist); line-height:1.5; }
/* Het vul-voorstel bij het afsluiten: per kerngedraging een vinkje en de groep
   waar ze thuishoort. */
.pf-borgtab-vulrij{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:7px 0; border-bottom:1px solid var(--line-zacht); }
.pf-borgtab-vullabel{ flex:1 1 200px; display:flex; align-items:flex-start; gap:7px;
  font-size:12.5px; color:var(--ink); line-height:1.45; }
.pf-borgtab-vulgroep{ flex:none; max-width:46%; }
.pf-borgtab-nietnu{ border:0; background:none; padding:0; font-family:inherit;
  font-size:12px; color:var(--ink-mist); cursor:pointer; }
.pf-borgtab-nietnu:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
/* 105c · de open missie-regel op het initiatief en op de groep. Geen kaart en
   geen kleur: het is een regel die zegt dat er iets uitstaat, met de weg erbij
   zodra er iets terug is. */
.pf-missieregel{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px;
  margin-top:7px; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.pf-missieregel .soort-dot{ align-self:center; }
.pf-missieregel.is-terug{ color:var(--ink); }

/* ── R105 · de oogst van een gesprek ──────────────────────────────────────
   Drie velden per regel in de open zone van een gevoerd gesprek. Geen kaart,
   geen kleur: het is wat je hoorde, opgeschreven zoals je het hoorde. */
.pf-oogst{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht); }
.pf-oogst-uitleg{ margin:4px 0 8px; font-size:11.5px; color:var(--ink-mist); line-height:1.5; }
.pf-oogst-rijen{ display:flex; flex-direction:column; gap:5px; }
.pf-oogst-rij{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pf-oogst-groep{ flex:0 1 auto; min-width:0; font-size:12px; color:var(--ink); }
.pf-oogst-gewicht{ flex:none; }
.pf-oogst-maand{ flex:none; width:112px; border:1px solid var(--line);
  border-radius:var(--r-veld); background:var(--wit); padding:3px 6px;
  font-family:inherit; font-size:11px; color:var(--ink); }
.pf-oogst-tot{ color:var(--line-ghost); }
.pf-oogst-ons{ font-size:10.5px; color:var(--geel-tekst); }
.pf-oogst-ghost{ margin-top:4px; }
.pf-oogst > .pf-blok-naar{ margin-top:10px; }

/* ── 95a punt 2 · de doorsnede-lijn en haar kaartje ───────────────────────
   De lijn is sleepbaar: de greep draagt de maand en het ⇔-teken, en de cursor
   zegt wat er kan. De lijn telt, ze weegt niet — vandaar geen kleurtrap op het
   kaartje en geen totaal. */
.pf-doorsnede-lab{ cursor:ew-resize; touch-action:none; user-select:none; gap:5px; }
.pf-doorsnede-lab:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }
.pf-doorsnede-maand{ font-variant-numeric:tabular-nums; }
.pf-doorsnede-pijl{ opacity:.8; }

.pf-doorsnedekaart{ margin-top:12px; background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-kaart); padding:12px 16px 14px; }
.pf-doorsnedekaart-kop{ display:flex; align-items:baseline; gap:8px; }
.pf-doorsnedekaart-titel{ font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); }
.pf-doorsnedekaart-leeg{ margin:8px 0 0; font-size:12px; color:var(--ink-mist); }
.pf-doorsnedekaart-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
/* De chip draagt het zwaarste gewicht als rand, nooit als optelling: het is de
   kleur van wat er staat, niet van hoeveel er staat. */
.pf-doorsnede-chip{ display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line-sterk); background:var(--cream); border-radius:999px;
  padding:4px 11px; font-family:inherit; font-size:11.5px; color:var(--ink); cursor:pointer; }
.pf-doorsnede-chip:hover{ border-color:var(--petrol); }
.pf-doorsnede-chip[data-gewicht="ingrijpend"]{ border-color:var(--petrol-deep); }
.pf-doorsnede-chip[data-gewicht="stevig"]{ border-color:var(--petrol); }
.pf-doorsnede-badge{ font-size:10px; font-weight:var(--gew-vet); color:var(--ink-soft);
  background:var(--cream2); border-radius:999px; padding:1px 6px;
  font-variant-numeric:tabular-nums; }
.pf-doorsnedekaart > .pf-blok-naar{ margin-top:10px; }
/* De tijdlijn en haar doorsnede-kaartje vormen één kolom; het paneel staat
   ernaast, niet ertussen. */
.pf-tijdlijnkolom{ display:flex; flex-direction:column; min-width:0; }

/* Een kopregel die alleen de kruimel draagt: het scherm eronder heeft zijn eigen
   kop (de foto-wizard) en een tweede titel erboven zou of herhalen of liegen.
   De hoogte van de titelregel valt weg, dus de kruimel krijgt hier de ruimte die
   de kopregel elders aan titel en ondertitel geeft. */
.c-kopregel-blok.pf-kop-kruimelalleen{ display:flex; align-items:center; min-height:34px; }
.pf-kop-kruimelalleen .pf-kruimel{ padding:0; font-size:12.5px; }

/* ══ 114c · het notitie-item: plaatsen op de kaart zelf ═══════════════════
   De rij is het veld. Het invoerveld draagt daarom geen kader en geen eigen
   achtergrond: het weegt als de kop ernaast, en pas als de kaart openstaat komt
   er een stippellijn onder — dan bewerk je, en daarvoor las je. */
/* De basisregels van de app zetten elk tekstveld op width:100% met een kader —
   terecht, want overal elders ís een veld een veld. Hier is de rij het veld, dus
   staan die drie eigenschappen expliciet terug: type-selector erbij, anders wint
   huisstijl.css op specificiteit en leest de lijst als een formulier. */
input[type=text].pf-opvolg-titelinvoer{ flex:1; min-width:0; border:0; background:none; padding:0;
  font-family:inherit; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink);
  border-bottom:1px dotted transparent; }
input[type=text].pf-opvolg-titelinvoer:hover{ color:var(--petrol); }
input[type=text].pf-opvolg-titelinvoer::placeholder{ color:var(--ink-mist); font-weight:var(--gew-normaal,400); }
.pf-opvolgkaart.is-selected input[type=text].pf-opvolg-titelinvoer{ border-bottom-color:var(--line-ghost); }
input[type=text].pf-opvolg-titelinvoer:focus{ outline:none; outline-offset:0;
  border-bottom-color:var(--petrol); }
textarea.pf-opvolg-tekstinvoer{ width:100%; border:1px solid var(--line-zacht); border-radius:8px;
  background:var(--wit); padding:7px 9px; font-family:inherit; resize:vertical; }
textarea.pf-opvolg-tekstinvoer:focus{ outline:none; outline-offset:0; border-color:var(--petrol); }

/* Nog geen bestemming: terra in mist-gewicht, rechts op de rij naast de ⋯.
   Het is werk dat nog moet gebeuren, geen fout — dus geen rood en geen teken. */
.pf-opvolg-geenbestemming{ margin:0; flex:none; font-size:11.5px; color:var(--terra); opacity:.75; }

/* De chip die je ook weer los kunt maken: dezelfde koppelchip, met de ✕ als
   eigen knop ernaast in plaats van als teken in de tekst. */
.pf-loschip{ padding-right:5px; }
.pf-loschip-naar{ border:0; background:none; padding:0; font:inherit; color:inherit;
  cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-loschip-stil{ cursor:default; }
.pf-loschip-los{ border:0; background:none; padding:0 2px; font:inherit; font-size:10.5px;
  line-height:1; color:var(--petrol); opacity:.6; cursor:pointer; }
.pf-loschip-los:hover{ opacity:1; }

/* Het HOORT BIJ-vlak: één zacht vlak in de uitklap, label links, dan de chips
   die er al staan en de ghosts die nog open staan. */
.pf-hoortbij{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--cream2); border-radius:10px; padding:10px 14px; margin-top:10px; }
.pf-hoortbij-label{ margin:0; flex:none; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:var(--gew-vet); color:var(--ink-mist); }
.pf-hoortbij-rij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.pf-hoortbij-hint{ margin:0; font-size:11.5px; color:var(--ink-mist); }
/* De ghost-select: een lege pil met een ▾ in de tekst. appearance:none haalt de
   eigen pijl van de browser weg, anders staan er twee. Op een telefoon opent
   een native select nog steeds als bottom-sheet — dat is waarom het een select
   is en geen eigen menu. */
/* De twee zoekers van de app, niet twee keuzelijsten. Ze staan naast elkaar in
   het vlak en houden hun eigen breedte; hun suggesties hangen eronder. */
.pf-hoortbij .pf-groepzoeker,
.pf-hoortbij .pf-persoonzoek{ flex:0 1 200px; min-width:150px; }
.pf-hoortbij .pf-ghost-invoer,
.pf-hoortbij .pf-persoonzoek-invoer{ width:100%; font-size:11.5px; padding:5px 10px; }
@media (max-width:700px){
  .pf-hoortbij{ align-items:flex-start; }
  .pf-hoortbij .pf-groepzoeker,
  .pf-hoortbij .pf-persoonzoek{ flex:1 1 100%; }
}

/* De herkomst van een borgingsafspraak op de rij zelf: uit welk changeplan ze
   komt, met de weg erheen. Waar een afspraak vandaan komt bepaalt of ze nog
   geldt, en dat hoor je te zien zonder de rij te openen. */
.pf-borgtab-planchip{ align-self:flex-start; margin-top:4px; font-size:11px;
  padding:3px 9px; }

/* De groepkiezer waar hij inline in een blok staat: hij mag de rij niet
   uitrekken, en zijn suggesties hangen eronder in plaats van ernaast. */
.pf-hefboom-koppelrij .pf-groepzoeker{ flex:1 1 220px; min-width:180px; max-width:340px; }
.pf-borg-groepveld .pf-groepzoeker,
.pf-borg-wie .pf-persoonveld{ width:100%; }

/* De initiatief-zoeker in het hefboom-blok: hij staat onder de chips en mag de
   kaart niet uitrekken. */
.pf-hefboom-initblok .pf-initzoeker{ max-width:420px; margin-top:6px; }
.pf-init-suggestie.is-stil{ display:block; color:var(--ink-mist); cursor:default;
  padding:6px 10px; font-size:11.5px; }

/* ══ responsief · de band tussen telefoon en breed scherm ═════════════════
   Onder 1100px stapelt het tijdlijn-vlak zijn paneel onder de tijdlijn. Dat
   vlak is een flexbox met align-items:flex-start, en in een kolom-flexbox is de
   kruis-as horizontaal: de kinderen kregen dus hun ínhoudsbreedte in plaats van
   de breedte van het vlak. De tijdlijn werd zo 1066px in een vak van 632px en
   duwde het hele werkvlak opzij — de pagina schoof horizontaal, wat ze nergens
   hoort te doen. De kolomstand rekt haar kinderen weer op; de tijdlijn scrolt
   binnen zichzelf, zoals ze al deed. */
@media (max-width:1100px){
  .pf-init-vlak{ align-items:stretch; }
  .pf-init-vlak > :first-child,
  .pf-init-vlak > .pf-tijdlijnkolom{ width:100%; }
}

/* Dezelfde val, dezelfde regel — voor élke flexbox die op smal scherm kantelt.
   Ze staat hier bij elkaar zodat wie er een vierde bij bouwt hem meteen ziet:
   kantelt een rij naar een kolom, dan wordt de breedte de kruis-as, en dan moet
   align-items terug naar stretch. Anders krimpen de kinderen naar hun inhoud —
   soms te smal (een halve kaartkolom met een leeg vlak ernaast), soms te breed
   (een kaart die het werkvlak opzij duwt). */
@media (max-width:1099px){
  .pf-bord-kolommen{ align-items:stretch; }
  .pf-bord-kolom{ width:100%; }
}

/* De tabstrook van Opvolging draagt acht tabs met hun tellers. Ze schoof al
   horizontaal op de telefoon, maar acht tabs passen ook op een laptop van 760
   niet — en dan duwde de strook het werkvlak opzij in plaats van zelf te
   schuiven. Niet passen is een eigenschap van de inhoud, niet van het toestel:
   de strook schuift nu zodra ze te lang is. De fade aan de rechterrand zegt dat
   er meer staat; hij komt uit dezelfde regel als op mobiel. */
/* De acties rechts in de kopregel stonden op nowrap. Op Organisatie zijn dat de
   zoekbalk, de weergave-knoppen en "importeer": samen breder dan een scherm van
   1280, en dan schoof de héle pagina 93px opzij — geen enkel scherm mag dat, en
   deze was er de enige toe in staat omdat de balk buiten het werkvlak leeft.
   Ze wikkelen nu naar een tweede regel zodra ze niet passen. */
@media (max-width:1400px){
  .portfolio-modus .pf-kop-acties{ flex-wrap:wrap; justify-content:flex-end; row-gap:8px; }
}

@media (max-width:1100px){
  .portfolio-modus .c-kopregel-tabs{
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .portfolio-modus .c-kopregel-tabs::-webkit-scrollbar{ display:none; }
  .portfolio-modus .c-kopregel-tab{ flex:none; }
}
@media (max-width:700px){
  .pf-init-kolommen{ align-items:stretch; }
  .pf-init-kolom{ width:100%; }
  /* De risico-kaart: matrix en de twee zwaarste naast elkaar, gewikkeld op
     smal. Zelfde val — de flex-basis van 320px blijft staan als de rij wikkelt,
     en dan is de kolom breder dan de kaart. */
  .c-ris-paar{ align-items:stretch; }
  .c-ris-top{ flex:1 1 auto; width:100%; }
}

/* Twee kolommen naast elkaar houden op tot ongeveer duizend pixels. Daaronder
   zijn het twee kolommen van tweehonderd, en dan breekt elke regel om de twee
   woorden: "4 foto's binnen / zonder bericht / terug · o.a. Nieuw / zorgdossier".
   Eén kolom die de volle breedte pakt leest daar beter dan twee die het niet
   halen. Onder 700 deed de mobiele regel dit al; het punt lag alleen te laag. */
/* Vanaf 700: onder dat punt geldt de mobiele regel (113b) met haar eigen
   kolombreedtes en haar horizontale scroll. Die mag deze niet overschrijven —
   ze staat eerder in het bestand en zou anders verliezen op volgorde. */
@media (min-width:700px) and (max-width:1099px){
  .pf-bord-kolommen{ flex-direction:column; gap:14px; }
  /* En de mini schuift binnen haar eigen vak zodra ze niet past. Op precies
     700px viel ze tussen twee regels in: de mobiele scroll begint pas op 699. */
  .pf-bordmini-wrap{ overflow-x:auto; }
  .pf-bordmini{ min-width:max-content; }
  /* De aflezing naast de mini-tijdlijn is het brede stuk: ze duwde de kaart
     107px buiten het werkvlak. Ze verdwijnt niet — ze zakt onder haar rij, over
     de volle breedte. Wat er staat is te belangrijk om weg te laten vallen. */
  .pf-bordmini-rij, .pf-bordmini-as{
    grid-template-columns:minmax(120px,150px) repeat(var(--kolommen),34px); }
  .pf-bordmini-lezing{ grid-column:1 / -1; padding-left:0; padding-bottom:6px; }
  /* Een bordregel met een lange kop en een actie rechts: laat de actie zakken
     in plaats van de regel uit de kaart te duwen. */
  .pf-bordrij{ flex-wrap:wrap; }
  .pf-bordrij > .c-dash-alles{ margin-left:auto; }
}

/* ══ "hier ontbreekt nog iets" · één vorm, overal ═════════════════════════
   Mist-terra, nooit rood. Een leeg veld is werk dat nog moet gebeuren, geen
   fout die iemand maakte — dezelfde toon als "nog geen bestemming" op een
   notitie, en dezelfde als op het Dashboard waar de regel vandaan komt.

   De regel benoemt, het merkteken wijst aan. Geen van beide is een knop: wie
   zelf langs de velden scrollt en onderweg het merk tegenkomt, weet de volgende
   keer waar zoiets hoort te staan. */
.pf-hiaatregel{ margin:12px 0 0; font-size:11.5px; color:var(--terra); opacity:.8;
  line-height:1.5; }
.pf-hiaatmerk{ margin-left:6px; font-size:10.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--terra); opacity:.75;
  white-space:nowrap; }
/* Op een rij met knoppen staat het merk vóór de handeling, met wat lucht: het
   hoort bij de knop ernaast en niet bij de rand van de kaart. */
.pf-reg-rechts > .pf-hiaatmerk{ margin-left:0; margin-right:2px; }

/* De kiezers waar ze in een venster of een uitklap staan: ze houden de breedte
   van hun veld en hun suggesties hangen eronder, nooit ernaast. */
.pf-kiesveld .pf-groepzoeker, .pf-kiesveld .pf-initzoeker,
.pf-kiesveld .pf-cmzoeker{ width:100%; }
.pf-soortpop-koppels{ display:flex; flex-direction:column; gap:10px; }
.pf-borgtab-vulgroep .pf-groepzoeker{ width:100%; }
.pf-borgtab-vulgroep .pf-groepveld{ margin:0; }
.pf-oogst-ghost .pf-groepzoeker{ max-width:280px; }

/* De losse wegen naast een zoeker: "de organisatie" bij de import-reparatie, en
   "iemand toevoegen" onder de change-manager-zoeker. Stille links, want ze zijn
   de uitzondering en niet de gewone weg. */
.pf-imp-wortelknop, .pf-init-cmnieuw{ border:0; background:none; padding:2px 0;
  font-family:inherit; font-size:11.5px; color:var(--petrol-deep); cursor:pointer;
  text-align:left; }
.pf-imp-wortelknop:hover, .pf-init-cmnieuw:hover{ text-decoration:underline; }
.pf-imp-hulpacties .pf-groepzoeker{ flex:1 1 200px; min-width:160px; }

/* ══ R116 · de setup-wizard ═══════════════════════════════════════════════
   De schil komt uit de CM-wizard (.c-gflow-*): dezelfde kaart, dezelfde
   segmentbalk, dezelfde voet. Hier staat alleen wat de portfolio-stappen erin
   nodig hebben. Wat de CM-wizard al heeft, hoort hier niet nog eens te staan —
   twee definities van dezelfde kaart is twee kaarten die uit elkaar groeien. */
.c-gflow-sub{ margin:6px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.55; }
.c-gflow-label{ display:block; margin-bottom:6px; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-soft); font-weight:var(--gew-vet); }

.pf-setup-lijst{ display:flex; flex-direction:column; gap:8px; }
.pf-setup-rij{ display:flex; align-items:center; gap:8px; }
.pf-setup-rij .c-gflow-veld{ flex:1 1 auto; min-width:0; }
.pf-setup-weg{ flex:none; border:0; background:none; padding:4px 6px; font-size:12px;
  color:var(--ink-mist); cursor:pointer; }
.pf-setup-weg:hover{ color:var(--rood); }
.pf-setup-toggle{ flex:none; border:1px solid var(--line); background:var(--wit);
  border-radius:var(--r-pil); padding:6px 12px; font-family:inherit; font-size:11.5px;
  color:var(--ink-soft); cursor:pointer; }
.pf-setup-toggle.is-aan{ border-color:var(--petrol); background:#EAF1F0; color:var(--petrol-deep); }
.pf-setup-veld{ margin-top:16px; }
.pf-setup-veld:first-child{ margin-top:0; }
.pf-setup-paar{ display:flex; gap:10px; }
.pf-setup-paar .pf-setup-jaar{ flex:1 1 0; min-width:0; }
.pf-setup-niveau{ position:relative; }
.pf-setup-chip{ font-size:13px; padding:7px 14px; }
/* De verplicht-regel staat er altijd, stil. Ze kleurt pas op als je verder wil
   zonder haar: een rood veld dat je nog niet bekeken hebt is een verwijt. */
.pf-setup-verplicht{ display:block; margin-top:6px; font-size:11.5px; color:var(--ink-mist); }
.pf-setup-verplicht.is-aan{ color:var(--terra); }

.pf-setup-import{ margin-top:20px; background:var(--cream2); border-radius:10px;
  padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.pf-setup-importkop{ flex:1 1 100%; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-setup-importzin{ flex:1 1 260px; margin:0; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.pf-setup-importknop{ flex:none; }

.pf-setup-slot{ display:flex; flex-direction:column; gap:10px; }
.pf-setup-slotrij{ display:flex; align-items:flex-start; gap:12px; background:var(--wit);
  border:1px solid var(--line-zacht); border-radius:10px; padding:12px 14px; }
.pf-setup-slotzin{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
.pf-setup-slotzin b{ color:var(--ink); font-weight:var(--gew-vet); }
/* De drie tekens uit het FAB-menu. De wizard leert ze aan, dus ze zijn hier
   precies dezelfde vormen als daar — een ruit, een open ring, een ring met een
   dot erin. Zou de wizard er eigen tekens van maken, dan leert ze de verkeerde. */
.pf-setup-teken{ flex:none; width:14px; height:14px; margin-top:2px; display:block; }
.pf-setup-teken[data-teken="ruit"]{ background:var(--petrol); transform:rotate(45deg);
  width:11px; height:11px; margin-top:4px; }
.pf-setup-teken[data-teken="ring"]{ border:2px solid #4A7FA5; border-radius:50%;
  width:12px; height:12px; }
.pf-setup-teken[data-teken="borg"]{ border:2px solid var(--petrol-deep); border-radius:50%;
  width:12px; height:12px; position:relative; }
.pf-setup-teken[data-teken="borg"]::after{ content:''; position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:4px; height:4px; border-radius:50%; background:var(--petrol-deep); }

.pf-setup-klaar{ margin-top:18px; background:var(--cream2); border-radius:10px; padding:14px 16px; }
.pf-setup-klaarkop{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.pf-setup-klaartel{ margin:4px 0 0; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }

@media (max-width:700px){
  /* Twee vallen in één blok, allebei van hetzelfde soort.

     De eerste: flex-wrap:wrap staat op .pf-setup-import, en met
     flex-direction:column wikkelt een flexbox in KOLOMMEN. De importzin kwam
     dus rechts náást de kop te staan, buiten de kaart — op de telefoon las je
     "…ruik je eigen AI om je" met de rest van de zin over de schermrand.

     De tweede: flex:1 1 260px is een basis op de hoofdas. Draait die as van
     horizontaal naar verticaal, dan slaat 260px op de HOOGTE en komt de
     breedte van align-items — flex-start geeft dan de inhoudsbreedte, en die
     is breder dan het scherm. Beide kinderen krijgen hier dus hun basis terug
     op auto, en de rij rekt over de volle kaartbreedte. */
  .pf-setup-paar{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
  .pf-setup-paar .pf-setup-jaar{ flex:0 0 auto; }
  .pf-setup-import{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; }
  .pf-setup-importkop, .pf-setup-importzin{ flex:0 0 auto; }
  .pf-setup-importknop{ align-self:flex-start; }
  .pf-setup-rij .pf-setup-weg, .pf-setup-toggle{ min-height:44px; }
}
.c-gflow-labelhint{ text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--ink-mist); }
.pf-setup .c-gflow-sub{ margin-bottom:18px; }

/* De import binnen de wizardkaart. Ze houdt haar eigen vorm — het is dezelfde
   zone als op haar eigen scherm — maar krijgt hier geen tweede kaartrand: ze
   zít al in een kaart. */
.pf-setup-importterug{ display:block; text-align:left; border:0; background:none;
  padding:0 0 10px; font-family:inherit; font-size:12px; color:var(--petrol-deep);
  cursor:pointer; }
.pf-setup-importterug:hover{ text-decoration:underline; }
/* De import ín de wizardkaart draagt geen FAB en dus geen R5-uitloop. */
.pf-setup-importzone .pf-werk{ padding:0; padding-bottom:0; }
.pf-setup-importzone .pf-imp-doek{ gap:14px; }
.pf-setup-importzone .pf-imp-mono{ max-height:180px; overflow:auto; }
.pf-setup-geladen{ margin:0 0 14px; font-size:12px; color:var(--groen);
  font-weight:var(--gew-vet); }

/* ═══════════════════════════════════════════════════════════════════════
   De telefoon (≤700px) — één val, overal dezelfde
   ───────────────────────────────────────────────────────────────────────
   Elke regel hieronder repareert hetzelfde: een flexrij waarin de rechterhelft
   niet mág krimpen (flex:none, white-space:nowrap, een chip met een naam erin)
   en de linkerhelft dus alles inlevert. Op een breed scherm merk je er niets
   van; op 390px houdt de titel zeventig pixels over en breekt hij om het woord:

       Zorgdossier
       en
       planningssysteem
       delen

   De regel is niet "maak het kleiner" maar "laat het wikkelen": wat rechts
   stond zakt naar een eigen regel, en de tekst krijgt de volle breedte terug.
   Daarom staat overal flex:1 1 100% en niet een kleinere basis — een basis van
   260px op een gewikkelde rij is precies hoe het misging.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* Het register (changeplannen, change managers, eenheden): de acties rechts
     — export, bericht, "meer", chevron — telden samen breder dan het scherm.
     Ze zakken naar een eigen regel onder de naam. */
  .portfolio-modus .pf-reg-rij{ flex-wrap:wrap; }
  .portfolio-modus .pf-reg-rechts{ flex:1 1 100%; flex-wrap:wrap;
    justify-content:flex-start; }

  /* De metaregel van een changeplan (change manager · projectleider · sponsor)
     is een gewikkelde rij; zonder volle breedte kreeg ze zeventig pixels. */
  .pf-cp-meta{ flex:1 1 100%; }
  .pf-cp-crit{ flex-wrap:wrap; }
  .pf-cp-crit-doel{ flex:1 1 100%; }
  .pf-cp-crit-richting{ text-align:left; }

  /* De kaartkop van een risico, aanname of meetpunt: de status- en
     wegingschips onder de titel in plaats van ernaast. */
  .portfolio-modus .c-aankaart-top{ flex-wrap:wrap; }
  .portfolio-modus .c-aankaart-tekst{ flex:1 1 100%; }

  /* De sectiekop van het dashboard: nummer + naam op de eerste regel, de
     ondertitel en de "alle …"-weg elk op een eigen regel eronder. */
  .portfolio-modus .c-dash-sec-kop{ flex-wrap:wrap; align-items:center; }
  .portfolio-modus .c-dash-sec-sub{ flex:1 1 100%; }
  .portfolio-modus .c-dash-sec-rechts{ flex:1 1 100%; margin-left:0; }

  /* De succesregel op het bord: meting en bron onder de zin. */
  .pf-succes-rij{ flex-wrap:wrap; }
  .pf-succes-tekst{ flex:1 1 100%; }
  .pf-succes-pijl{ margin-right:0; }

  /* Het FAB-menu is op de telefoon geen zwevend kaartje maar een bottom sheet,
     dezelfde vorm als "meer" en als de statuswissel van de app. Als popover
     werd het bijna vijfhonderd pixels hoog: het legde zich over de knop waar
     het aan hing, en op een kort scherm liep het er bovenaan uit. */
  .pf-fabmenu{ position:absolute; left:0; right:0; bottom:0; top:auto;
    min-width:0; max-height:70vh; overflow-y:auto;
    border-left:0; border-right:0; border-bottom:0;
    border-radius:14px 14px 0 0; padding:10px 10px 18px;
    box-shadow:0 -10px 30px rgba(10,57,54,.16); }
  .pf-fabmenu-rij{ min-height:48px; }
}

/* Het kompaspaneel op de telefoon. Dezelfde val als op de schermen zelf: de
   aflezing achter de naam draagt flex:1 1 auto en mág groeien, de naam heeft
   niets en mág dus krimpen — dus hield "Het organisatiebeeld" drieëntachtig
   pixels over en viel hij om het woord, terwijl de aflezing ernaast in een even
   smalle kolom stond. De rijen van DE KERN lieten al zien hoe het hoort: naam
   op de regel, aflezing eronder. Dat is nu de regel voor alle rijen. */
@media (max-width:700px){
  /* .c-fundament-rij.c-lens-rij zet flex-wrap:nowrap (71a: de rijen van de
     stakeholdermap blijven één regel). Dat is specifieker dan .pf-kompas-rij,
     dus het wikkelen dat hierboven al bedoeld was heeft nooit gewerkt — vijf
     items stonden naast elkaar in driehonderdzestig pixels. Dezelfde twee
     klassen, en de regel wint. */
  .pf-kompas-rij.c-lens-rij{ flex-wrap:wrap; }
  /* Naam op de regel, aflezing eronder, bestemming en teller op een derde —
     precies zoals de rijen van DE KERN er al uitzagen. */
  .pf-kompas-naam{ flex:1 1 auto; min-width:0; }
  .pf-kompas-rij .c-lens-meta-inline{ flex:1 1 100%; }
  .pf-kompas-rij .pf-kompas-aan{ margin-left:0; }
  .pf-kompas-rij .pf-openteller{ margin-left:auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Tikvlakken op de telefoon (≤700px)
   ───────────────────────────────────────────────────────────────────────
   tokens.md legt dit vast in R1 en R4: het visuele formaat is niet het
   tikformaat, dus een knop groeit via een onzichtbaar tikvlak (::after) en
   nooit in zijn eigen doos — de visuele taal wordt niet opgeblazen. De grens is
   dat de buur ná de vergroting nog ≥8px vrij houdt. Groeien twee tikvlakken
   naar elkaar toe, dan delen ze wat er te verdelen valt.

   (Tot v288 stond hier de helft-regel uit ronde 7. R4 is een andere formule:
   milder voor ruime buren, strenger voor krappe, omslagpunt op 16px. Vijf van
   deze tien stonden daardoor te ruim aan één zijde.)

   Wat een buur is, is de hele kunst. De tabbalk, de verkenbanner en de FAB
   zweven over de inhoud: die staan nu eens één pixel en dan weer tweehonderd
   van een knop af, puur naar waar je gescrold hebt. Ze meetellen maakt de
   grens willekeurig — de ↗ op V3 leek zo een buur op nul pixels te hebben,
   terwijl er tweehonderdvierendertig pixels lucht boven zit. Alleen wat
   meescrolt in hetzelfde werkvlak telt.

   Elke waarde hieronder is die helft, gemeten met het voorbeeldportfolio over
   álle instanties, alle schermen en alle scrollstanden — niet over de eerste
   die je tegenkomt. Dat verschil is groot: de eerste ✕ op K1 heeft honderd
   pixels lucht, de derde tien.

   Tien knoppen halen de 44. Vier niet, en die staan hier bewust NIET: bij hen
   is de helft-regel de grens en blijft de knop te klein. Dat is niet met een
   tikvlak op te lossen maar met meer lucht in de rij, en dat is een
   ontwerpbeslissing. Het gaat om .pf-reg-meer (⋯ op elke registerrij, blijft
   op 31px hoog), .pf-opvolg-koppelx (✕ op een koppelchip, 22px),
   .pf-k2-greep (41px) en .pf-borg-af (26px).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  .pf-bord-weg, .pf-rv-badge, .pf-init-groepweg, .pf-gespreksregel-naar,
  .pf-init-plusinfo, .pf-cm-sprong, .pf-k1-beheerwissel, .pf-k3-greep,
  .pf-v3-pijl, .portfolio-modus .c-aankaart-open{ position:relative; }
  .pf-bord-weg::after, .pf-rv-badge::after, .pf-init-groepweg::after,
  .pf-gespreksregel-naar::after, .pf-init-plusinfo::after, .pf-cm-sprong::after,
  .pf-k1-beheerwissel::after, .pf-k3-greep::after, .pf-v3-pijl::after,
  .portfolio-modus .c-aankaart-open::after{ content:""; position:absolute; }

  /* ✕ op het bord · 14×12 → 44×44 · links maar 2px, buur op 10 */
  .pf-bord-weg::after{ inset:-16px -28px -16px -2px; }
  /* de randvoorwaarde-badge · 9×9 → 45×44 · boven 11, een buur op 19 */
  .pf-rv-badge::after{ inset:-11px -18px -24px; }
  /* ✕ op een groeppil · 13×11 → 44×44 · links niets, de gewicht-keuze staat op 8px */
  .pf-init-groepweg::after{ inset:-17px -31px -16px 0; }
  /* ↗ op een gespreksregel · 9×17 → 44×45 · rechts 13, want in de rechterkolom
     van de uitklap staat de ⋯ van de rij ernaast op 21px; links is er niets
     binnen honderd pixels, dus daar komt het terug */
  .pf-gespreksregel-naar::after{ inset:-14px -13px -14px -22px; }
  /* "+ info" · 27×16 → 44×44 · onder stond het zoekveld op 16px, en dat is
     één pixel te krap voor de negen die het vlak naar beneden groeit. Lucht in
     de rij, niet een kleiner vlak. */
  .pf-init-plusinfo{ margin-bottom:3px; }
  .pf-init-plusinfo::after{ inset:-19px -9px -9px -8px; }
  /* Twee gespreksregels waarvan de ↗ boven elkaar uitkomt stonden 20px uit
     elkaar; twee vlakken van 44px hebben er 36 nodig (14 + 8 + 14). Dat is
     geen tikvlak-probleem maar te weinig ruimte tussen de regels. */
  .pf-gespreksregel{ margin-top:19px; }
  /* ↗ naar het initiatief van een change manager · 14×19 → 44×44 · links niets */
  .pf-cm-sprong::after{ inset:-19px -30px -6px 0; }
  /* "wijzig" op K1 · 29×17 → 44×45 */
  .pf-k1-beheerwissel::after{ inset:-14px -8px -14px -7px; }
  /* de sleepgreep op K3 · 14×13 → 44×44 · rechts 5, het veld staat op 13 */
  .pf-k3-greep::after{ inset:-16px -5px -15px -25px; }
  /* ↗ op V3 · 13×17 → 44×45 */
  .pf-v3-pijl::after{ inset:-14px -15px -14px -16px; }
  /* ⋯ op een aankaart · 24×20 → 44×44 · links niets, de chip staat op 8px */
  .portfolio-modus .c-aankaart-open::after{ inset:-12px -20px -12px 0; }

  /* ── R6 · een klein doel óp een rij-breed doel ────────────────────────
     Het ⋯ zit in een rij die zélf een tikdoel is: tikken klapt de rij uit.
     Twee doelen kunnen niet allebei de hele rij zijn, en het ⋯ haalde met R4
     maar dertig pixels hoogte. R6 verdeelt ze: het rechteruiteinde van de rij
     hoort bij het ⋯, de rest blijft de uitklap.

     Het ⋯ schuift daarvoor naar de rechterrand (op de telefoon zakt de
     actie-rij naar een eigen regel, en daar stond hij links). Het tikvlak loopt
     door tot de rijrand — de rijvulling van 12px hoort erbij, anders blijft er
     een strook over die de rij opent terwijl je op het ⋯ mikt. Dat het
     de rij-tik overstemt is geen inbreuk op R4 maar precies wat R6 vraagt; de
     échte buren op die regel houden hun 8px, want margin-left:auto duwt het ⋯
     van ze weg. */
  .portfolio-modus .pf-reg-rij{ position:relative; }
  /* Géén position op de knop zelf: het vlak hoort bij de RIJ, niet bij het
     teken. Ankert het op de knop, dan steekt het boven en onder de rij uit en
     pikt het de tap van de rij eronder — precies wat R4 verbiedt. Op de rij
     ankeren geeft "de rechter 44px van de rij, over de volle rijhoogte", en
     dat is letterlijk wat R6 vraagt. */
  .pf-reg-rij .pf-reg-meer{ margin-left:auto; }
  .pf-reg-rij .pf-reg-meer::after{ content:""; position:absolute;
    top:0; bottom:0; right:0; width:44px; }


  /* ── R7 · "af" houdt zijn eigen doel ──────────────────────────────────
     Afronden heeft gevolg, dus het krijgt geen rij-breed doel maar een eigen
     vlak van 44px — plus het bevestig-kaartje, dat er al was. Om dat vlak te
     kúnnen geven moet de regel lucht hebben: met de oude row-gap van 8px stond
     de tekst elf pixels erboven en acht eronder, en dan laat R4 niets toe. Bij
     22px past het vlak én houdt de buur zijn acht pixels. Dezelfde 22px gaat op
     de marge tússen twee regels: de knop van de volgende afspraak stond acht
     pixels lager, en row-gap raakt die niet. De knop schuift naar de rechterrand
     zodat de "ga horen"-knop links niet in het vlak valt. */
  .pf-borg-regel{ row-gap:22px; margin-top:22px; }
  .pf-borg-af{ position:relative; margin-left:auto; }
  .pf-borg-af::after{ content:""; position:absolute; inset:-14px -20px -13px -14px; }

  /* ── R8 · de ✕ op een koppelchip verdwijnt als apart doel ─────────────
     Twee ✕'en staan tien pixels boven elkaar; daar is geen tikdoel van te
     maken zonder de buurman te stelen. De chip wordt één doel en het menu
     draagt de keuze. De ✕ blijft in de opmaak staan als teken — hij is alleen
     geen doel meer, en het menu klikt hem aan. */
  .c-koppelchip .pf-opvolg-koppelx,
  .c-koppelchip .pf-loschip-los{ pointer-events:none; }
  .c-koppelchip{ cursor:pointer; }
}

/* Het mini-menu van R8. Dezelfde vorm als het FAB-menu: wit vel, rijen van
   48px, sluier eronder — een derde menuvorm zou een derde grammatica zijn. */
.pf-chipmenu-houder{ position:fixed; inset:0; z-index:var(--z-sheet); }
.pf-chipmenu-houder .c-sluier{ position:absolute; inset:0; z-index:0; }
.pf-chipmenu{ position:absolute; left:0; right:0; bottom:0; z-index:1;
  background:var(--wit); border-radius:14px 14px 0 0; padding:10px 10px 18px;
  box-shadow:0 -10px 30px rgba(10,57,54,.16); }
.pf-chipmenu-kop{ padding:8px 10px 10px; font-size:12px; color:var(--ink-mist);
  border-bottom:1px solid var(--line-zacht); margin-bottom:6px; }
.pf-chipmenu-rij{ min-height:48px; }

/* De slotzin van de rondleiding: één regel die niet meer uitlegt maar afsluit.
   Los van de alinea erboven, want anders leest hij als nog een instructie. */
.c-gids-slotzin{ margin:10px 0 0; font-weight:var(--gew-vet); color:#EAF2F1; }

/* R116d/e — de portfolio-variant van het welkomvenster. Alleen wat er anders is;
   de kaart, de tegels en de zinnen komen van .c-vw-* uit componenten.css. */
.c-vw-balken{ display:flex; align-items:flex-end; gap:4px; }
.c-vw-balk{ width:16px; height:7px; border-radius:2px; background:var(--line-ghost); }
.c-vw-balk[data-g="stevig"]{ background:var(--petrol); }
.c-vw-balk[data-g="ingrijpend"]{ background:var(--terra); }


/* ═══════════════════════════════════════════════════════════════════
   116f · de schil-kleur per app
   ───────────────────────────────────────────────────────────────────
   Drie apps naast elkaar, één anatomie: logo, bestandskop, actieve rij met
   terracotta kantlijn, tellers rechts, Feedback onderaan, canvas #EDE9E1 en
   kaart #FAF8F5 op het werkvlak. Alleen de grond van het zijmenu en het
   accent-licht dáárop wisselen mee met de app. Zelfde oklch-toon (~32% licht,
   gelijk chroma), alleen de hue verschuift:

     changeplan  petrol   #0E4F4B  ·  accent #7FC4BE  (--schil / --petrol-light)
     portfolio   staalblauw #143F54 · accent #8CC0D8  (--pf-schil / --pf-accent)
     missie      aubergine #3E3452  · accent #B9A8D4  (--ms-schil / --ms-accent)

   Terracotta blijft in alle drie exclusief voor handelen, en het accent-licht
   blijft binnen de donkere schil: het is de kleur van koppen en labels op die
   grond, nooit van iets op het werkvlak. Daarom staat --petrol-light hier als
   variabele óp #zijmenu en niet op de body — buiten de schil is diezelfde
   variabele de randkleur van chips op licht, en die hoort niet mee te
   verkleuren.

   Deze regels staan ná die van de portfoliomodus. Blijft er ooit weer een
   modus-klasse hangen, dan wint de app waar je nú in zit; de echte borg is dat
   renderAgentShell de portfolio-klassen expliciet weghaalt. */
:root{
  --ms-schil:#3E3452;        /* de zijmenu-kleur van de missie-app */
  --ms-accent:#B9A8D4;       /* lila: de mint-rol op aubergine */
}
body.missie-modus #zijmenu{ background:var(--ms-schil); --petrol-light:var(--ms-accent); }


/* ═══════════════════════════════════════════════════════════════════
   117a · het menu van de missie-app op een telefoon
   ───────────────────────────────────────────────────────────────────
   Op een breed scherm is het zijmenu de router van deze app. Op een telefoon
   was het verborgen en kwam er niets voor in de plaats: van de zes secties was
   alleen De opdracht te bereiken, en er was ook geen weg terug naar het
   startscherm. Niet één scherm was stuk; er ontbraken vijf deuren.

   Geen tweede menu dus, maar hetzelfde menu in een andere houding: het zijmenu
   verschijnt als bottom-sheet. Eén lijst, één volgorde, dezelfde labels en
   tellers, en de klaar-meter, de bewaarknop en de feedback-ingang komen mee —
   met een tabbalk zou de voet van dat menu alsnog nergens wonen, en zouden er
   zes symbolen nodig zijn waarvan er twee nog niet bestaan in de taal van de app.

   De deur staat in de kopregel en draagt de naam van de sectie waar je bent:
   dezelfde plek waar de changeplan- en de portfolio-app hun bestandsnaam met ▾
   zetten.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:699px){
  /* De kopregel bestond in deze schil niet; componenten.css verbergt hem voor
     de hele agent-shell. Alleen in missie-modus, en alleen op een telefoon,
     krijgt hij zijn plek terug. */
  body.agentshell-actief.missie-modus #kopregel{ display:flex !important; }

  /* Het menu in ruststand: dicht. De regel in componenten.css verbergt het al
     op ≤699px; hier staat wat er gebeurt als het opengaat. */
  body.agentshell-actief.missie-modus.ms-menu-open #zijmenu{
    display:flex !important;
    flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:auto; max-height:86vh; overflow-y:auto;
    z-index:var(--z-sheet);
    border-radius:var(--r-sheet);
    padding:var(--sp-6) 0 calc(var(--sp-9) + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 40px rgba(10,57,54,.36);
  }
  /* Het woordmerk draagt op een telefoon 62px kopruimte voor de statusbalk van
     het toestel; binnen een sheet is dat een gat van 62px boven het logo. */
  body.agentshell-actief.missie-modus.ms-menu-open #zijmenu .c-merk{
    padding:0 var(--sp-6) var(--sp-6);
    border-bottom:0;
  }
  /* De menurijen zijn in de kolom 40px hoog; dat is de dichtheid van een
     muismenu. In een vel dat je met een duim bedient hoort een rij het
     tikformaat van de app te halen (≥44, tokens.md R1). De rij ís het doel, dus
     de rij groeit mee — hier hoeft geen onzichtbaar vlak overheen. */
  body.agentshell-actief.missie-modus.ms-menu-open #zijmenu .c-modus-rij{
    min-height:44px;
  }
  /* Ligt de sheet open, dan is de deur haar werk kwijt: ze zou half onder de
     bovenrand van het vel uitkomen en dat leest als een haperende laag. Sluiten
     gaat via de sluier of door een sectie te kiezen — hetzelfde als bij de
     andere vellen van de app. */
  body.agentshell-actief.missie-modus.ms-menu-open #kopregel .c-kopregel-traject{
    visibility:hidden;
  }
  /* De menurijen zijn in de kolom 40px hoog; dat is de dichtheid van een
     muismenu. In een vel dat je met een duim bedient hoort een rij het
     tikformaat van de app te halen (≥44, tokens.md R1). De rij ís het doel, dus
     de rij groeit mee — hier hoeft geen onzichtbaar vlak overheen. */
  body.agentshell-actief.missie-modus.ms-menu-open #zijmenu .c-modus-rij{
    min-height:44px;
  }
  /* Ligt de sheet open, dan is de deur haar werk kwijt: ze zou half onder de
     bovenrand van het vel uitkomen en dat leest als een haperende laag. Sluiten
     gaat via de sluier of door een sectie te kiezen — hetzelfde als bij de
     andere vellen van de app. */
  body.agentshell-actief.missie-modus.ms-menu-open #kopregel .c-kopregel-traject{
    visibility:hidden;
  }
  /* De sluier ligt onder de sheet en boven al de rest, inclusief de FAB. */
  .ms-menusluier{
    position:fixed; inset:0; z-index:calc(var(--z-sheet) - 1);
    background:rgba(10,57,54,.38);
  }
  /* Zolang het menu open ligt scrollt het werkvlak eronder niet mee weg. */
  body.ms-menu-open{ overflow:hidden; }
}


/* ═══════════════════════════════════════════════════════════════════
   116g/116h · de twee introschermen van de missie-app
   ───────────────────────────────────────────────────────────────────
   Zelfde kaart-anatomie als 116d/116e: alleen de tekening en de zin verschillen.
   Wat hier wél anders is dan bij de andere twee apps: de tekening tekent zich
   voor je ogen. Dat mag hier omdat de tekening zélf het verhaal is en van links
   naar rechts gelezen wordt — kluwen, gesprek, groep, draden, verhaal, en terug.
   De volgorde van het tekenen ís de zin. Bij een gelote kribbel zou beweging
   alleen maar de aandacht wegtrekken van wat er staat; daar staat ze dus stil.

   Elke lijn draagt pathLength="1", dus de streepjeslengte is overal 1 en één
   keyframe laat elke vorm tekenen ongeacht hoe lang hij echt is. De timing staat
   in vertragingen per onderdeel, samen ~3s.
   ═══════════════════════════════════════════════════════════════════ */
/* De kaart van deze twee schermen is breder dan die van de andere twee apps.
   De tekening draagt twee documenten, vijf stemmen en vijf routes; op 460px
   krimpt dat tot een streepje. flex:none erbij, want .c-vw-kaart is een
   flex-kolom en een svg met een eigen hoogte laat zich daarin anders
   platdrukken tot ze niet meer te lezen is. */
/* Het eerste scherm ligt als een absoluut vlak óver de kaart (zo blijft de
   kaart tijdens de aanloop op haar eigen maat staan). Dat vlak knipt dus af op
   de hoogte van de kaart, en de missie-inhoud is hoger dan de 392px die voor de
   andere twee apps volstaat: de tekening alleen al is 200px. Vandaar een eigen
   ondergrens, en overflow-y op het vlak zelf zodat een langere vertaling
   scrollt in plaats van onzichtbaar te worden afgeknipt. */
/* De ondergrens geldt alleen tijdens de aanloop. Het tweede scherm draagt drie
   tegels en twee uitgangen en is vanzelf lager; hield het dezelfde 620px, dan
   stond het met een half scherm lucht boven en onder. */
.c-vw-kaart.is-missie{ width:min(720px, 94%); }
.c-vw-kaart.is-missie.is-aanloop{ min-height:620px; }
.c-vw-intro.is-missie{ overflow-y:auto; }
.ms-vw-svg{ width:100%; height:auto; display:block; margin:2px auto 0; flex:none; }

/* De ruststand ná het tekenen (en meteen bij stille beweging): alles staat er. */
.ms-vw-svg .ms-l{ stroke-dasharray:1; stroke-dashoffset:0; }
.ms-vw-svg .ms-p, .ms-vw-svg .ms-k{ opacity:1; }

/* Zodra .is-tekent op het vlak staat begint de opbouw. De regels hieronder
   zetten alles eerst terug op nul en laten het dan in volgorde binnenkomen. */
.c-vw-intro.is-tekent .ms-vw-svg .ms-l{
  stroke-dashoffset:1;
  animation:ms-teken .5s ease forwards;
}
.c-vw-intro.is-tekent .ms-vw-svg .ms-p,
.c-vw-intro.is-tekent .ms-vw-svg .ms-k{
  opacity:0;
  animation:ms-stip .32s ease forwards;
}
@keyframes ms-teken{ to{ stroke-dashoffset:0; } }
@keyframes ms-stip{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
/* De stippen schalen vanuit hun eigen midden en niet vanuit de oorsprong van
   het tekenvlak; zonder dit vliegen ze van linksboven binnen. */
.ms-vw-svg .ms-p, .ms-vw-svg .ms-k{ transform-box:fill-box; transform-origin:center; }

/* 1 · het kluwen tekent druk en snel, en loopt door tot het eerste document */
.c-vw-intro.is-tekent .ms-kluwen{ animation-duration:.95s; animation-timing-function:cubic-bezier(.3,.7,.5,1); }
/* 2 · het gesprek */
.c-vw-intro.is-tekent .ms-doc1{  animation-delay:.90s; animation-duration:.28s; }
.c-vw-intro.is-tekent .ms-doc1r{ animation-delay:1.06s; animation-duration:.18s; }
/* 3 · de weg naar de groep */
.c-vw-intro.is-tekent .ms-naargroep{ animation-delay:1.20s; animation-duration:.22s; }
/* 4 · de bogen poppen zacht op, kort na elkaar */
.c-vw-intro.is-tekent .ms-boog{ animation-duration:.26s; }
.c-vw-intro.is-tekent .ms-boog:nth-of-type(1){ animation-delay:1.38s; }
.c-vw-intro.is-tekent .ms-boog:nth-of-type(2){ animation-delay:1.44s; }
.c-vw-intro.is-tekent .ms-boog:nth-of-type(3){ animation-delay:1.50s; }
.c-vw-intro.is-tekent .ms-boog:nth-of-type(4){ animation-delay:1.56s; }
.c-vw-intro.is-tekent .ms-boog:nth-of-type(5){ animation-delay:1.62s; }
/* 5 · de stemmen kleuren één voor één */
.c-vw-intro.is-tekent .ms-p1{ animation-delay:1.56s; }
.c-vw-intro.is-tekent .ms-p2{ animation-delay:1.64s; }
.c-vw-intro.is-tekent .ms-p3{ animation-delay:1.72s; }
.c-vw-intro.is-tekent .ms-p4{ animation-delay:1.80s; }
.c-vw-intro.is-tekent .ms-p5{ animation-delay:1.88s; }
/* 6 · de draden vloeien uit, elk met een eigen tempo — dat is de hele boodschap
       van dit stuk, dus de duren verschillen bewust en niet toevallig */
.c-vw-intro.is-tekent .ms-r1{ animation-delay:1.96s; animation-duration:.62s; }
.c-vw-intro.is-tekent .ms-r2{ animation-delay:1.96s; animation-duration:.78s; }
.c-vw-intro.is-tekent .ms-r3{ animation-delay:1.96s; animation-duration:.50s; }
.c-vw-intro.is-tekent .ms-r4{ animation-delay:1.96s; animation-duration:.70s; }
.c-vw-intro.is-tekent .ms-r5{ animation-delay:1.96s; animation-duration:.88s; }
/* de knooppunt-dot komt op als zijn route langs zijn buigpunt is */
.c-vw-intro.is-tekent .ms-k1{ animation-delay:2.28s; }
.c-vw-intro.is-tekent .ms-k2{ animation-delay:2.36s; }
.c-vw-intro.is-tekent .ms-k3{ animation-delay:2.20s; }
.c-vw-intro.is-tekent .ms-k4{ animation-delay:2.32s; }
.c-vw-intro.is-tekent .ms-k5{ animation-delay:2.42s; }
/* 7 · het verhaal en de weg verder */
.c-vw-intro.is-tekent .ms-doc2{  animation-delay:2.62s; animation-duration:.28s; }
.c-vw-intro.is-tekent .ms-doc2r{ animation-delay:2.78s; animation-duration:.18s; }
.c-vw-intro.is-tekent .ms-pijl{  animation-delay:2.86s; animation-duration:.22s; }
/* 8 · en als laatste, traag, de terugkoppeling naar de groep */
.c-vw-intro.is-tekent .ms-terug{ animation-delay:3.02s; animation-duration:.80s; }

/* De zin komt op bij de tweede kaart: dan is de metafoor rond en heeft ze
   woorden nodig. */
.c-vw-intro.is-missie .ms-vw-zin{ margin-top:14px; text-align:center; }
.c-vw-intro.is-tekent .ms-vw-zin{ opacity:0; animation:ms-zin .5s ease 2.62s forwards; }
@keyframes ms-zin{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.ms-vw-kop{
  margin:0 0 8px; font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:var(--t-kop-l); color:var(--petrol-dark); line-height:var(--lh-strak);
  text-wrap:balance;
}
.ms-vw-tekst{
  margin:0 auto; max-width:56ch; font-family:var(--font-ui); font-size:var(--t-body);
  color:var(--ink-soft); line-height:var(--lh-tekst);
}

/* 116h — de beeldrij op een tegel: picto, stippen en het ▸ ertussen op één
   regel. De tegels van de andere twee apps dragen één beeldje; hier is het een
   zinnetje in beeld, en dan hoort alles op dezelfde lijn te staan. */
.c-vw-beeldrij{ display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
.c-vw-picto{ width:22px; height:22px; flex:none; color:var(--petrol-deep); }
.c-vw-naar{ font-size:11px; color:var(--ink-mist,#8A867E); line-height:1; }
.c-vw-vraag{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:15px; color:var(--petrol-deep); line-height:1; }

@media (prefers-reduced-motion: reduce){
  .c-vw-intro.is-tekent .ms-vw-svg .ms-l,
  .c-vw-intro.is-tekent .ms-vw-svg .ms-p,
  .c-vw-intro.is-tekent .ms-vw-svg .ms-k,
  .c-vw-intro.is-tekent .ms-vw-zin{ animation:none; stroke-dashoffset:0; opacity:1; }
}
@media (max-width:700px){
  .ms-vw-kop{ font-size:var(--t-kop-m); }
  .c-vw-beeldrij{ gap:5px; }
}

/* ── R117 · K4 de organisatiekaart (frame 117a) ──────────────────────────
   Maten en kleuren komen uit het canvasframe, niet uit een schatting. De twee
   families dragen vorm en geen kleur: structureel is een vierkant teken op wit
   met een zwaardere rand, menselijk een open ring op kaart-crème. Nooit twee
   kleuren die goed en slecht suggereren. */
.pf-k4-intro{
  font-size:11.5px; color:var(--ink-soft); line-height:1.55; max-width:700px; margin:0 0 2px;
}
.pf-k4-schakels{
  display:flex; align-items:center; gap:10px; padding:2px 0 10px; flex-wrap:wrap;
}
.pf-k4-segment{
  display:inline-flex; background:var(--wit); border:1px solid var(--line);
  border-radius:9px; padding:2px; gap:2px;
}
.pf-k4-segknop{
  padding:4px 11px; border:0; background:transparent; border-radius:7px;
  font:inherit; font-size:11px; color:var(--ink-soft); cursor:pointer;
}
.pf-k4-segknop.is-actief{ background:var(--petrol-deep); color:var(--wit); font-weight:600; }
.pf-k4-voortgang{ font-size:10.5px; color:var(--ink-mist); }

/* De chip is de weg naar invullen, niet een status. Terracotta dus, en alleen
   zichtbaar wanneer er iets ontbreekt. */
.pf-k4-ontbreektchip{
  display:inline-flex; align-items:center; gap:5px; background:var(--wit);
  border:1px solid var(--line-sterk); border-radius:999px; padding:3px 10px;
  font:inherit; font-size:10.5px; font-weight:600; color:var(--petrol-deep); cursor:pointer;
}
.pf-k4-ontbreektchip.is-actief{ border-color:var(--terra); }
.pf-k4-ontbreektdot{ width:5px; height:5px; border-radius:50%; background:var(--terra); flex:none; }

.pf-k4-legenda{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; color:var(--ink-mist);
}
.pf-k4-familieteken{ width:5px; height:5px; flex:none; box-sizing:border-box; }
.pf-k4-familieteken[data-familie="structureel"]{ background:var(--petrol-dark); }
.pf-k4-familieteken[data-familie="menselijk"]{ border-radius:50%; border:1px solid var(--ink-mist); }

/* Vier standen, vier vormen. De dot is 9px; het verschil zit in vulling en
   ring, nooit in kleur. */
.pf-k4-stand{ width:9px; height:9px; border-radius:50%; flex:none; box-sizing:border-box; }
.pf-k4-stand[data-stand="ingrijpend"]{ background:var(--petrol-deep); }
.pf-k4-stand[data-stand="merkbaar"]{ background:rgba(14,79,75,.30); border:1.5px solid var(--petrol-deep); }
.pf-k4-stand[data-stand="licht"]{ border:1.5px solid var(--ink-mist); }
.pf-k4-stand[data-stand="geen"]{ border:1.5px dashed var(--line-sterk); }

/* ── de matrix ── */
.pf-k4-matrix{
  display:grid; grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
  gap:6px 0; align-items:stretch;
}
.pf-k4-kolomkop{ display:flex; flex-direction:column; gap:2px; padding:0 2px 2px; }
.pf-k4-kolomnaam{ font-size:11.5px; font-weight:700; color:var(--petrol-dark); }
.pf-k4-kolomvraag{ font-size:9.5px; line-height:1.35; color:var(--ink-mist); }
.pf-k4-pijl{ display:flex; align-items:center; justify-content:center; color:var(--line-sterk); }
/* De zin achter de pijl bestaat alleen in de lijst op de telefoon: daar is er
   geen pijl tussen twee kaarten, alleen een regel tussen twee rijen. */
.pf-k4-pijlzin{ display:none; }
.pf-k4-pijl-rij{ font-size:12px; }
.pf-k4-pijl-kolom{ font-size:11px; padding:1px 0; }

.pf-k4-kaart{
  background:var(--kaart, #FAF8F5); border:1px solid #E4DFD5; border-radius:10px;
  padding:9px 11px; box-sizing:border-box; display:flex; flex-direction:column; gap:5px;
  min-width:0; text-align:left; font:inherit; cursor:pointer;
}
.pf-k4-kaart[data-familie="structureel"]{ background:var(--wit); border-color:var(--line-sterk); }
/* De 4px accentrand krijgt alleen ingrijpend, zodat het accent één betekenis houdt. */
.pf-k4-kaart.is-ingrijpend{
  border:1.5px solid var(--petrol-deep); border-left-width:4px;
}
.pf-k4-kaartkop{ display:flex; align-items:center; gap:6px; }
.pf-k4-kaartnaam{ font-size:12.5px; font-weight:700; color:var(--petrol-dark); }
.pf-k4-kaartkop > .pf-k4-stand,
.pf-k4-gegeven{ margin-left:auto; }
.pf-k4-gegeven{ font-size:9px; color:var(--line-ghost); white-space:nowrap; }

/* Twee regels clamp per regel, niet per paar: de kaart is een leesregel en
   geen formulier. */
.pf-k4-regel{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pf-k4-regellabel{
  font-size:8.5px; font-weight:700; letter-spacing:.08em; color:var(--line-ghost);
}
.pf-k4-regeltekst{
  font-size:11px; line-height:1.45; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pf-k4-herkomst{ font-size:9.5px; color:var(--line-ghost); line-height:1.3; }
.pf-k4-mist{ font-size:9.5px; color:var(--terra); line-height:1.3; font-weight:600; }

/* "toon wat ontbreekt" dimt de volle kaarten tot hun kop. Dimmen en niet
   verbergen: de kaart blijft op haar plek staan, anders verspringt het raster. */
.pf-k4-matrix.is-ontbreekt .pf-k4-kaart.is-vol{ opacity:.45; }
.pf-k4-matrix.is-ontbreekt .pf-k4-kaart.is-vol .pf-k4-regel,
.pf-k4-matrix.is-ontbreekt .pf-k4-kaart.is-vol .pf-k4-herkomst{ display:none; }

.pf-k4-leesrichting{
  display:flex; align-items:center; gap:8px; padding:8px 0 0;
  font-size:10px; color:var(--ink-mist); line-height:1.45;
}
.pf-k4-pijl-mist{ font-size:11px; color:var(--line-sterk); }

/* ── hier begint een initiatief: de hartslag-vorm, hergebruikt ── */
.pf-k4-initblok{
  margin-top:16px; background:var(--kaart, #FAF8F5); border:1px solid var(--line);
  border-radius:11px; padding:13px 16px 11px;
}
.pf-k4-initkop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.pf-k4-initkoplabel{
  font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--petrol-dark);
}
.pf-k4-initkopsub{ font-size:11px; color:var(--ink-mist); }
.pf-k4-initrij{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line-zacht);
}
.pf-k4-initrij:last-of-type{ border-bottom:0; }
.pf-k4-initnaam{ font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; }
.pf-k4-initzin{ flex:1; font-size:11.5px; color:var(--ink-soft); min-width:0; }
.pf-k4-initmaak{ border:0; background:none; padding:0; font:inherit; font-size:11px;
  font-weight:600; color:var(--petrol-deep); white-space:nowrap; cursor:pointer; }
.pf-k4-initmaak:hover{ text-decoration:underline; text-underline-offset:2px; }

.pf-k4-cultuur{
  display:flex; align-items:center; gap:8px; padding-top:9px;
  border-top:1px dashed var(--line); flex-wrap:wrap;
}
.pf-k4-cultuurlabel{ font-size:11.5px; font-weight:600; color:var(--petrol-dark); }
.pf-k4-cultuursub{ font-size:11px; color:var(--ink-mist); }

.pf-k4-leeg{ padding:24px 0; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.pf-k4-initleeg{ padding:9px 0; font-size:11.5px; color:var(--ink-mist); }

/* ═══════════════════════════════════════════════════════════════════════
   R117 · 117b — het bouwsteen-paneel
   ───────────────────────────────────────────────────────────────────────
   Dezelfde paneelvorm als het afwegingspaneel (.c-paneel uit schil.css,
   rechts verankerd): de bouwsteen hoort bij het werkblad dat je open hebt
   staan, niet bij een plek waar je naartoe gaat. Op een telefoon valt hij
   terug op de bottom sheet die .c-paneel daar al is — dat is meteen de
   bottom-sheet-vorm die 117d vraagt.

   Alles wat hieronder staat komt uit frame 117b: de maten, de twee
   veldvormen (vandaag met de gewone rand, straks met de petrol rand), het
   leesregel-blok met zijn donkere linkerrand, en de drie feit-chips waarvan
   de lege gestreept is. Geen kleur die een oordeel draagt. */
.pf-k4-paneelhouder{ position:fixed; inset:0; z-index:var(--z-sheet); }
.pf-k4-paneelhouder .c-sluier{ position:absolute; inset:0; }
.pf-k4-paneel{ left:auto; right:0; width:min(460px, 92vw);
  border-right:0; border-left:1px solid var(--line); }

.pf-k4-paneelkop{ background:var(--cream); gap:9px; padding:13px 20px 11px; }
.pf-k4-paneelnaam{ font-family:var(--font-kop); font-weight:600; font-size:17px;
  color:var(--petrol-dark); }
.pf-k4-paneelfamilie{ font-size:10.5px; color:var(--ink-mist); min-width:0; }
.pf-k4-paneelkop .c-paneel-sluit{ font-size:13px; }

/* De stand als pil: het woord dat een mens koos, en de weg om het te wijzigen.
   Geen tweede dot ernaast — het werkblad draagt de vorm, het paneel het woord. */
.pf-k4-standpil{ margin-left:auto; flex:none; border:0; background:rgba(14,79,75,.10);
  color:var(--petrol-deep); border-radius:999px; padding:3px 10px;
  font:inherit; font-size:10px; font-weight:700; cursor:pointer; white-space:nowrap; }
.pf-k4-standpil[data-stand="geen"]{ background:none; border:1px dashed var(--line-sterk);
  color:var(--ink-mist); font-weight:600; }
.pf-k4-standpop{ min-width:210px; }
.pf-k4-standpop .pf-k4-stand{ width:11px; height:11px; }
.pf-k4-standherkomst{ margin-top:4px; padding:6px 8px 2px; border-top:1px solid var(--line-zacht);
  font-size:10px; color:var(--ink-mist); }

.pf-k4-paneelbody{ padding:13px 20px 24px; }
.pf-k4-paneelvraag{ font-size:12.5px; font-weight:600; color:var(--petrol-dark); line-height:1.45; }
.pf-k4-paneeluitleg{ margin:5px 0 0; font-size:11px; color:var(--ink-soft); line-height:1.5; }

.pf-k4-veld{ display:block; margin-top:10px; }
.pf-k4-veldkop{ display:flex; align-items:baseline; gap:8px; }
.pf-k4-veldlabel{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.07em;
  color:var(--ink-mist); line-height:1.35; }
.pf-k4-veldbron{ margin-left:auto; flex:none; font-size:10px; color:var(--ink-mist); }
.pf-k4-veldtekst{ display:block; width:100%; box-sizing:border-box; margin-top:4px;
  font-family:inherit; font-size:12px; line-height:1.5; color:var(--ink);
  background:var(--wit); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; resize:vertical; min-height:44px; }
.pf-k4-veldtekst:focus{ outline:none; border-color:var(--petrol); }
/* Straks is de oefening; dat veld draagt de petrol rand, ook als het leeg is. */
.pf-k4-veldtekst.is-straks{ border-color:var(--petrol); }
.pf-k4-nazin{ margin:5px 0 0; font-size:10.5px; color:var(--ink-mist); line-height:1.45; }

/* Visie leest haar straks-regel, ze schrijft hem niet: één schrijfplek per
   gegeven, en de weg terug staat eronder. */
.pf-k4-leesvak{ margin-top:4px; background:#F7F5F0; border:1px solid #E4DFD5;
  border-radius:8px; padding:9px 11px; }
.pf-k4-leeszin{ font-size:12px; line-height:1.5; color:var(--ink); }
.pf-k4-leesperiode{ color:var(--ink-mist); }
.pf-k4-naar{ display:block; margin-top:6px; border:0; background:none; padding:0;
  font:inherit; font-size:11px; font-weight:600; color:var(--petrol-deep);
  text-align:left; cursor:pointer; }
.pf-k4-naarmist{ color:var(--terra); }

.pf-k4-wiewezijn{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.pf-k4-wiekop{ font-size:12px; font-weight:600; color:var(--petrol-dark); }
.pf-k4-wiesub{ margin:3px 0 0; font-size:11px; color:var(--ink-mist); line-height:1.5; }

/* De vaste leesregel. Eén donkere accentrand en geen kleur die een oordeel
   draagt: hij staat er altijd, ook wanneer er niets aan de hand is. */
.pf-k4-leesregel{ margin-top:13px; background:var(--cream2);
  border-left:3px solid var(--petrol-dark); border-radius:0 8px 8px 0;
  padding:10px 13px; font-size:11px; color:var(--ink); line-height:1.55; }
.pf-k4-leeskop{ font-weight:700; }

/* Feiten, geen oordeel: staat er een straks-regel of staat er niets. De lege
   chip is gestreept, niet rood. */
.pf-k4-feitchips{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pf-k4-feitchip{ display:inline-flex; align-items:center; gap:5px; background:var(--wit);
  border:1px solid var(--line-sterk); border-radius:999px; padding:3px 10px;
  font:inherit; font-size:10.5px; color:var(--ink); cursor:pointer; text-align:left; }
.pf-k4-feitchip.is-leeg{ border-style:dashed; color:var(--ink-mist); }
.pf-k4-feitchip.is-leeg .pf-k4-familieteken[data-familie="structureel"]{ background:var(--line-ghost); }

.pf-k4-paneelvoet{ display:flex; flex-direction:column; gap:6px;
  margin-top:14px; padding-top:11px; border-top:1px solid var(--line-zacht); }
.pf-k4-voetrij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-k4-voetrij .pf-k4-initmaak,
.pf-k4-geenmarkering{ margin-left:auto; }
.pf-k4-geenmarkering{ font-size:11px; color:var(--line-ghost); white-space:nowrap; }
.pf-k4-cultuurvink .pf-k4-cultuurlabel{ font-size:11.5px; }
.pf-k4-cultuur .pf-k4-cultuurvink{ flex:none; }

/* Op de telefoon valt het paneel terug op de bottom sheet die .c-paneel daar
   al is: over de volle breedte, geen linkerrand. Dezelfde regel als het
   afwegingspaneel, en meteen de vorm die 117d vraagt. */
@media (max-width:699px){
  .pf-k4-paneel{ left:0; right:0; width:auto; border-left:0; }
  .pf-k4-paneelkop{ padding:12px 16px 10px; }
  .pf-k4-paneelbody{ padding:12px 16px 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   R117 · 117c — hoe de keten loopt
   ───────────────────────────────────────────────────────────────────────
   Uitleg, geen invulwerk: een leeslijst met per schakel één zin. Geen kleur
   die een oordeel draagt, ook in de knel-lezing niet — de sluitregel deelt
   het leesregel-blok van 117b, met dezelfde donkere accentrand. */
.pf-k4-tabs{ margin-bottom:14px; }
.pf-k4-ketenschakels{ padding:0 0 4px; max-width:760px; }
.pf-k4-keten .pf-k4-segment{ margin-left:auto; }
.pf-k4-keten .pf-k4-intro{ margin:0 0 4px; }
.pf-k4-ketenlijst{ display:flex; flex-direction:column; max-width:760px; }
.pf-k4-ketenrij{ display:flex; gap:12px; align-items:flex-start; padding:10px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-k4-ketenrij:last-child{ border-bottom:0; }
.pf-k4-ketennaam{ width:112px; flex:none; display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; color:var(--petrol-dark); line-height:1.4; }
.pf-k4-ketenzin{ flex:1; min-width:0; font-size:12px; color:var(--ink); line-height:1.5; }
/* De lus terug naar visie draagt geen bouwsteen, dus ook geen gewicht. */
.pf-k4-ketenrij.is-terug .pf-k4-ketennaam{ color:var(--line-ghost); }
.pf-k4-ketenrij.is-terug .pf-k4-ketenzin{ color:var(--ink-soft); }
.pf-k4-keten .pf-k4-leesregel{ max-width:760px; }

@media (max-width:699px){
  .pf-k4-ketenrij{ flex-direction:column; gap:3px; }
  .pf-k4-ketennaam{ width:auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   R117 · 117e — Het beeld
   ───────────────────────────────────────────────────────────────────────
   De plaat op ~470px zodat de legenda-kolom ~280px houdt en geen regel in
   drieën breekt; onder ~820px zakt de legenda onder de plaat. De vormen in
   de <svg> dragen hun kleuren als attribuut, niet als klasse: een plaat die
   het gebouw uit gaat neemt geen stylesheet mee. */
.pf-k4-beeldkop{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:0 0 6px; }
.pf-k4-beeldsub{ font-size:11.5px; color:var(--ink-soft); }
.pf-k4-export{ border:0; background:none; padding:0; font:inherit; font-size:11.5px;
  font-weight:600; color:var(--petrol-deep); cursor:pointer; white-space:nowrap; }
.pf-k4-export[data-soort="beeld"]{ margin-left:auto; }

/* Het beeld krijgt de ruimte, de legenda niet: de plaat neemt alles wat
   overblijft en de legenda een vaste kolom. Andersom stond de tekening klein in
   een halfleeg kader, en dat is precies omgekeerd aan wat dit scherm doet. */
.pf-k4-beeldkaart{ box-sizing:border-box; background:var(--wit);
  border:1px solid var(--line); border-radius:14px; padding:14px 22px 18px;
  margin-top:8px; }
.pf-k4-beeldrij{ display:flex; gap:22px; align-items:stretch; }
/* Een vaste hoogte en geen min-height: een <svg> zonder hoogte rekt zich uit
   tot de verhouding van haar viewBox, en op een breed scherm wordt dat een
   plaat van meer dan duizend pixels hoog. Met een hoogte erbij doet
   preserveAspectRatio het werk en vult de camera het kader. */
.pf-k4-plaatvak{ position:relative; flex:1 1 auto; min-width:0; display:flex; }
.pf-k4-plaat{ flex:1 1 auto; min-width:0; width:100%;
  height:clamp(420px, 56vh, 680px); }
/* De lege staat ligt over de plaat en niet erin: in de plaat schaalt tekst mee
   met de camera, en dan wordt een mist-regel een reuzenletter. */
/* Onder de knoop en niet erop: de camera zet de bouwsteen in het midden, dus
   daar staat het anker al. Vandaar top:50% met een marge eronder, en geen
   procentuele padding — die rekent tegen de breedte en zet het blok bij een
   brede plaat buiten beeld. */
.pf-k4-beeldleeg{ position:absolute; left:0; right:0; top:50%; margin-top:62px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; padding:0 24px; pointer-events:none; }
.pf-k4-beeldleegzin{ margin:0; font-size:12.5px; color:var(--ink-mist); line-height:1.5; }
.pf-k4-beeldleeg .c-knop{ pointer-events:auto; }
.pf-k4-knoop{ cursor:pointer; }
.pf-k4-knoop:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }

.pf-k4-beeldlegenda{ flex:0 0 280px; min-width:0; padding-top:10px; }
/* De initiatief-knoop in de legenda van diepte 2, op de maat van de plaat. */
.pf-k4-beeldinit{ width:13px; height:13px; border-radius:50%; flex:none; box-sizing:border-box;
  background:rgba(18,113,108,.16); border:1.5px solid #12716C; }
/* Geen knoop: een leeg vak, want dat is precies wat je dan ziet. */
.pf-k4-beeldgeen{ width:13px; height:13px; border-radius:50%; flex:none; box-sizing:border-box;
  border:1.5px dashed var(--line-sterk); }
.pf-k4-beeldlegenda .pf-k4-beeldstand + .pf-k4-beeldstand{ margin-top:7px; }
/* De foto-stippen van diepte 3 dragen de RAG-kleur die een mens in de CM-app
   zette; de open gestreepte ring betekent dat er geen fotoregel is. */
.pf-k4-beeldfotodot{ width:11px; height:11px; border-radius:50%; flex:none; box-sizing:border-box; }
.pf-k4-beeldfotodot[data-kleur="rood"]{ background:var(--rood); }
.pf-k4-beeldfotodot[data-kleur="geel"]{ background:var(--geel); }
.pf-k4-beeldfotodot[data-kleur="groen"]{ background:var(--groen); }
.pf-k4-beeldfotodot[data-kleur="geen"]{ border:1.5px dashed var(--line-sterk); }
/* De sectiekop staat in de kaart en schuift dus nooit onder de kopbalk. */
.pf-k4-dieptezin{ font-size:11.5px; color:var(--ink-soft); line-height:1.5;
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line-zacht); }
.pf-k4-dieptezin strong{ color:var(--petrol-dark); }
.pf-k4-beeldoverline{ font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-mist); }
.pf-k4-beeldoverline.is-tweede{ margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line-zacht); }
.pf-k4-beeldstanden{ display:flex; flex-direction:column; gap:7px; margin-top:7px; }
.pf-k4-beeldfamilies{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.pf-k4-beeldstand{ display:flex; align-items:center; gap:9px; }
.pf-k4-beeldvak{ width:26px; flex:none; display:flex; justify-content:center; }
.pf-k4-beeldzin{ font-size:11.5px; color:var(--ink); line-height:1.4; }
.pf-k4-beeldzin.is-mist{ color:var(--ink-mist); }
/* Dezelfde vier standen als op het werkblad, hier op de maat van de plaat:
   het formaat ís de betekenis, dus de legenda moet die maat tonen. */
.pf-k4-beelddot{ flex:none; box-sizing:border-box; border-radius:50%; }
.pf-k4-beelddot[data-stand="ingrijpend"]{ width:16px; height:16px; background:var(--petrol-deep); }
.pf-k4-beelddot[data-stand="merkbaar"]{ width:13px; height:13px; background:rgba(14,79,75,.30);
  border:1.6px solid var(--petrol-deep); }
.pf-k4-beelddot[data-stand="licht"]{ width:10px; height:10px; border:1.6px solid var(--ink-mist); }
.pf-k4-beelddot[data-stand="geen"]{ width:10px; height:10px; border:1.6px dashed var(--line-sterk); }
.pf-k4-beeldfam{ width:12px; height:12px; flex:none; box-sizing:border-box;
  background:var(--wit); border:1.6px solid var(--petrol-dark); }
.pf-k4-beeldfam[data-familie="menselijk"]{ border-radius:50%; }
.pf-k4-beeldslot{ font-size:10.5px; color:var(--ink-mist); line-height:1.45; margin-top:2px; }
.pf-k4-beeldlegenda .pf-k4-leesregel{ margin-top:14px; padding:10px 12px; font-size:11px;
  line-height:1.5; }

.pf-k4-beeldvoet{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); }
.pf-k4-beeldvoetzin{ font-size:11px; color:var(--ink-mist); }
.pf-k4-beeldnaar{ margin-left:auto; margin-top:0; }

/* Onder ~1100px zakt de legenda onder de plaat als horizontale rij: de standen
   naast elkaar, de leesregel eronder. Het net wordt niet geschaald — de camera
   vult het kader, de tekening krimpt niet. */
@media (max-width:1100px){
  .pf-k4-beeldrij{ flex-direction:column; }
  .pf-k4-beeldlegenda{ flex:1 1 auto; width:100%; padding-top:12px;
    border-top:1px solid var(--line-zacht); margin-top:6px; }
  .pf-k4-beeldstanden{ flex-direction:row; flex-wrap:wrap; gap:6px 18px; }
  .pf-k4-beeldfamilies{ flex-direction:row; flex-wrap:wrap; gap:6px 18px; }
  .pf-k4-beeldslot{ flex:1 0 100%; }
  .pf-k4-plaat{ height:clamp(360px, 48vh, 560px); }
  .pf-k4-plaatvak{ flex:1 1 auto; }
}

/* ── 117f · de zoomtrap ────────────────────────────────────────────────
   Drie diepten, meer niet. De beweging zit in de viewBox van de <svg>, dus er
   is hier niets te schalen: alleen de kruimel, de zoom-uit-pil en de regels
   die per diepte wisselen. */
.pf-k4-kruimel{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; min-width:0; }
.pf-k4-kruimelstap{ border:0; background:none; padding:0; font:inherit; font-size:11.5px;
  color:var(--ink-soft); cursor:pointer; }
.pf-k4-kruimelstap:hover{ color:var(--petrol-deep); text-decoration:underline;
  text-underline-offset:2px; }
.pf-k4-kruimelhier{ font-family:var(--font-kop); font-weight:600; font-size:14px;
  color:var(--petrol-dark); }
.pf-k4-kruimelpunt{ font-size:11.5px; color:var(--line-ghost); }
.pf-k4-zoomuit{ margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--wit); border:1px solid var(--line-sterk); border-radius:999px;
  padding:3px 11px; font:inherit; font-size:11px; font-weight:600;
  color:var(--petrol-deep); cursor:pointer; white-space:nowrap; }
.pf-k4-zoomuit + .pf-k4-export[data-soort="beeld"]{ margin-left:0; }
.pf-k4-dieptezin{ margin:0 0 2px; }
.pf-k4-dieptevoet{ margin-top:8px; font-size:10px; color:var(--ink-mist); line-height:1.4; }
.pf-k4-beeld > .pf-k4-leesregel{ margin-top:10px; padding:10px 13px;
  font-size:11.5px; line-height:1.55; }
/* De satellieten en de svg-knoppen zijn tekst in een beeld: ze hebben hun eigen
   aanwijzer nodig, want een <text> is van zichzelf geen knop. */
.pf-k4-satelliet, .pf-k4-svgknop{ cursor:pointer; }
/* De focus volgt de camera: na het zoomen krijgt de eerste knoop van de nieuwe
   diepte focus. Dat mag geen rand opleveren voor wie met de muis klikte, dus
   alleen :focus-visible tekent er een. */
.pf-k4-knoop:focus{ outline:none; }
.pf-k4-knoop:focus-visible, .pf-k4-satelliet:focus-visible{
  outline:2px solid var(--petrol); outline-offset:2px; }

/* ═══════════════════════════════════════════════════════════════════════
   R117 · 117d — de kaart op een telefoon
   ───────────────────────────────────────────────────────────────────────
   Onder 700px valt de matrix weg. De kaart wordt een lijst per vraag: de
   structurele bouwsteen boven, de regel "structuur zet gedrag" ertussen en de
   menselijke eronder. De verticale leesrichting blijft zo intact zonder
   horizontaal te scrollen; de horizontale lezing wordt niet nagebootst, want
   een raster van vier kolommen op 360px is geen raster meer.

   Dit is één DOM en geen tweede: de cellen dragen hun volgorde als --o mee en
   het raster wordt hier een kolom. Zo kan het scherm van breed naar smal en
   terug zonder opnieuw te tekenen. */
@media (max-width:699px){
  .pf-k4-matrix{ display:flex; flex-direction:column; gap:0; padding-bottom:96px; }
  .pf-k4-matrix > *{ order:var(--o, 99); }
  .pf-k4-pijl-rij, .pf-k4-vulling, .pf-k4-leesrichting{ display:none; }

  .pf-k4-kolomkop{ padding:13px 0 2px; }
  .pf-k4-kolomnaam{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
  .pf-k4-kolomvraag{ font-size:10px; }

  /* De ↑ tussen de twee rijen van dezelfde vraag draagt hier zijn zin, want er
     is geen pijl in een raster meer om te lezen. */
  .pf-k4-pijl-kolom{ justify-content:flex-start; gap:5px; padding:2px 0 0;
    font-size:9.5px; color:var(--line-ghost); }
  .pf-k4-pijlzin{ display:inline; }

  /* De kaart wordt een rij: teken · naam · stand · zin · ›. Rij-brede tik,
     minstens 44px hoog. */
  .pf-k4-kaart{ display:grid; grid-template-columns:auto 1fr auto auto;
    align-items:center; gap:0 9px; min-height:44px;
    background:none; border:0; border-bottom:1px solid var(--line-zacht);
    border-radius:0; padding:11px 0; }
  .pf-k4-kaart[data-familie="structureel"]{ background:none; border-color:var(--line-zacht); }
  .pf-k4-kaart.is-ingrijpend{ border:0; border-bottom:1px solid var(--line-zacht);
    border-left:3px solid var(--petrol-deep); padding-left:8px; }
  .pf-k4-kaartkop{ display:contents; }
  .pf-k4-kaartkop > .pf-k4-familieteken{ grid-column:1; grid-row:1; }
  .pf-k4-kaartnaam{ grid-column:2; grid-row:1; }
  .pf-k4-kaartkop > .pf-k4-stand, .pf-k4-gegeven{ grid-column:3; grid-row:1; margin-left:0; }
  .pf-k4-kaart::after{ content:'\203A'; grid-column:4; grid-row:1; align-self:center;
    font-size:14px; color:var(--line-ghost); }
  .pf-k4-regel, .pf-k4-mist, .pf-k4-herkomst{ grid-column:2 / span 3; }
  .pf-k4-regeltekst{ font-size:10.5px; color:var(--ink-soft); -webkit-line-clamp:2; }
  .pf-k4-matrix.is-ontbreekt .pf-k4-kaart.is-vol{ opacity:.45; }

  /* De schakelbalk breekt in twee regels in plaats van de legenda weg te
     duwen: wat ontbreekt en welke stand er staat, blijft ook hier leesbaar. */
  .pf-k4-schakels{ gap:8px; }
  .pf-k4-legenda{ margin-left:0; flex-wrap:wrap; }
  .pf-k4-initblok{ padding:12px 13px 10px; }
  .pf-k4-initrij{ flex-wrap:wrap; gap:4px 8px; }
  .pf-k4-initzin{ flex:1 0 100%; }

  /* Het beeld is een breed-scherm- en exportbeeld. Op de telefoon blijft de
     plaat staan met haar kruimel als terugweg, maar zonder wielzoom. */
  .pf-k4-beeldrij{ padding:12px 14px 16px; }
  .pf-k4-plaat{ width:100%; height:auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   R117 §7 · wat dit initiatief beweegt
   ───────────────────────────────────────────────────────────────────────
   Namen en geen getal. De leesregel staat er vast; de app telt niet en vindt
   niets van wat er naast staat. Geen kleur die een oordeel draagt: alleen
   staat er iets, of er staat niets. */
.pf-init-bs-leesregel{ margin-top:4px; font-size:11px; color:var(--ink-mist); line-height:1.45; }
.pf-init-bs-kies{ margin-top:8px; font-size:10.5px; color:var(--ink-mist); }
.pf-init-bs-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.pf-init-bs-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--wit);
  border:1px solid var(--line-sterk); border-radius:999px; padding:4px 11px;
  font:inherit; font-size:11px; color:var(--ink-soft); cursor:pointer; }
.pf-init-bs-chip.is-aan{ background:rgba(14,79,75,.10); border-color:var(--petrol-deep);
  color:var(--petrol-deep); font-weight:600; }

.pf-init-bs-rij{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px solid var(--line-zacht); }
.pf-init-bs-rij:last-of-type{ border-bottom:0; }
.pf-init-bs-kop{ display:flex; align-items:center; gap:6px; flex:0 0 132px; }
.pf-init-bs-naam{ font-size:12px; font-weight:600; color:var(--petrol-dark); }
.pf-init-bs-naast{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:4px 12px; }
.pf-init-bs-buur{ border:0; background:none; padding:0; font:inherit; font-size:11.5px;
  color:var(--petrol-deep); cursor:pointer; text-align:left; }
.pf-init-bs-buur:hover{ text-decoration:underline; text-underline-offset:2px; }
/* Dat er niemand naast staat kan prima kloppen. Mist dus, geen terracotta. */
.pf-init-bs-alleen{ flex:1 1 auto; font-size:11.5px; color:var(--ink-mist); }
.pf-init-bs-leeg{ margin:6px 0 0; font-size:11.5px; color:var(--ink-mist); }
.pf-init-bs-naarkaart{ display:block; margin-top:8px; border:0; background:none; padding:0;
  font:inherit; font-size:11px; font-weight:600; color:var(--petrol-deep);
  text-align:left; cursor:pointer; }

@media (max-width:699px){
  .pf-init-bs-kop{ flex:1 0 100%; }
}

/* De herkomstregel in het nieuw-initiatief-venster: zegt waarom de naam al
   ingevuld staat, zonder de mens te beletten hem te herschrijven. */
.pf-nieuwinit-uitkaart{ font-size:11px; color:var(--ink-mist); margin-bottom:6px; }

/* Zegt wat de exportknoppen doen zodra dat afwijkt van waar je staat. */
.pf-k4-exportnoot{ flex:0 0 100%; text-align:right; font-size:10.5px;
  color:var(--ink-mist); margin-top:2px; }

/* Het vak waarin een exportplaat even staat om opgemeten te worden. Buiten
   beeld en zonder muisdoel: de gebruiker hoort er niets van te merken. */
.pf-k4-exportvak{ position:fixed; left:-10000px; top:0; width:1100px; height:924px;
  pointer-events:none; opacity:0; }
.pf-k4-exportvak .pf-k4-plaat{ width:1100px; height:924px; }
/* De doorlopende kaart wordt opgemeten voor ze gerasterd wordt; haar maat komt
   uit de inhoud, dus het meetvak legt er geen op. */
.pf-k4-kaartvak{ width:auto; height:auto; }
.pf-k4-kaartvak svg{ width:auto; height:auto; }

/* ── 117b · INITIATIEVEN OP DEZE BOUWSTEEN (§6-quater) ──────────────────
   Eén verticale as met drie banden. De plek is de uitspraak, dus de as draagt
   een verloop-pijl die zegt waarover die plek gaat. De rij is twee regels van
   samen ~42px en geen van beide wrapt: op een smal paneel vulde één initiatief
   anders het halve blok. */
.pf-k4-inits{ margin-top:18px; }
.pf-k4-filters{ display:flex; gap:6px; margin:6px 0 10px; }
.pf-k4-filter{ cursor:pointer; border:1px solid var(--line-sterk); background:var(--wit);
  border-radius:999px; padding:2px 10px; font:500 var(--t-pil)/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-k4-filter.is-aan{ border-color:var(--petrol); color:var(--petrol-deep); background:rgba(18,113,108,.08); }

.pf-k4-as{ display:flex; gap:10px; }
/* De pijl loopt van petrol bovenaan naar zand onderaan: hard bewegen boven,
   minder onder. Geen tekst bovenaan — de bovenste bandkop zegt het al. */
.pf-k4-asmeter{ flex:0 0 14px; display:flex; flex-direction:column; align-items:center; }
.pf-k4-aspijl{ flex:1 1 auto; width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--petrol) 0%, var(--line-sterk) 70%, var(--cream2) 100%); }
.pf-k4-asminder{ margin-top:5px; font-size:9.5px; color:var(--ink-mist); writing-mode:vertical-rl; }
.pf-k4-banen{ flex:1 1 auto; min-width:0; }

.pf-k4-baan{ border-top:1px solid var(--line-zacht); padding:3px 0 6px; }
.pf-k4-baan:first-child{ border-top:0; }
.pf-k4-baan.is-doel{ background:rgba(18,113,108,.06); border-radius:6px; }
.pf-k4-baan.is-rest{ border-top:1px dashed var(--line-sterk); margin-top:6px; }
.pf-k4-bandkop{ font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-mist);
  padding:3px 0; }
.pf-k4-restkop{ font-size:10.5px; color:var(--ink-mist); padding:4px 0; }

/* Twee regels, samen ongeveer tweeënveertig, en geen van beide wrapt. */
.pf-k4-pnrij{ padding:1px 0; }
.pf-k4-pnrij.is-sleept{ opacity:.45; }
.pf-k4-pnrij.is-af .pf-k4-pnnaam{ color:var(--ink-mist); font-weight:500; }
.pf-k4-pnkop{ display:flex; align-items:center; gap:6px; min-width:0; }
.pf-k4-pngreep{ flex:none; cursor:grab; border:0; background:none; padding:0 2px;
  font-size:12px; line-height:1; color:var(--line-ghost); }
.pf-k4-pngreep:active{ cursor:grabbing; }
.pf-k4-pndot{ width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--wit); border:1.4px solid var(--petrol); }
/* Expliciet afknippen, niet leunen op korte demonamen. */
.pf-k4-pnnaam{ flex:1 1 auto; min-width:0; border:0; background:none; padding:0; cursor:pointer;
  text-align:left; font:600 12px/1.35 var(--font-ui); color:var(--petrol-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-k4-pnnaam:hover{ text-decoration:underline; }
.pf-k4-pnstatus{ flex:none; font-size:9.5px; color:var(--ink-soft);
  background:var(--cream2); border-radius:999px; padding:1px 7px; white-space:nowrap; }
.pf-k4-pnmeer{ flex:none; cursor:pointer; border:0; background:none; padding:0 2px;
  font-size:13px; line-height:1; color:var(--ink-mist); }
.pf-k4-pnmist{ margin-top:1px; padding-left:20px; font-size:10.5px; color:#8A867E;
  line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Een gat is geen mist maar een openstaande beslissing. */
.pf-k4-pngat{ color:var(--terra); }

.pf-k4-inits-leeg{ margin:6px 0 0; font-size:10.5px; color:var(--ink-mist); }
.pf-k4-koppel{ margin-top:8px; }
.pf-k4-koppelghost{ border:0; background:none; padding:4px 0; cursor:pointer;
  font:400 11px/1.4 var(--font-ui); color:var(--line-ghost); }
.pf-k4-koppelghost:hover{ color:var(--ink-mist); }
.pf-k4-koppelveld{ width:100%; box-sizing:border-box; border:1px solid var(--petrol);
  border-radius:6px; padding:5px 8px; font:400 11.5px/1.4 var(--font-ui); color:var(--ink); }
.pf-k4-koppellijst{ margin-top:4px; }
.pf-k4-koppeltreffer{ display:block; width:100%; text-align:left; border:0; background:none;
  padding:4px 6px; cursor:pointer; font:500 11.5px/1.4 var(--font-ui); color:var(--petrol-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-k4-koppeltreffer:hover{ background:var(--cream2); border-radius:4px; }
.pf-k4-koppelleeg{ padding:4px 6px; font-size:10.5px; color:var(--ink-mist); }

/* De Teams-grens rond het uitgeklapte vel, op drie plekken en elk één keer.
   Nergens een slotje: de knop werkt, en de balk zegt zelf dat er inhoud komt. */
/* Hetzelfde slotje als in de changeplan-schil: het teken zelf, .9em en
   gedempt. Hier stond een inline SVG-masker — eigen vorm, eigen gewicht, en
   daarmee een tweede variant van iets wat de app al had. Het staat vóór het
   label (ruling 95a) en de knop blijft gewoon werken. */
.pf-k4-exportslot{ margin-right:5px; font-size:.9em; line-height:1; opacity:.6; }
/* ── het exportvenster (117i) ────────────────────────────────────────────
   Eén vlak, geen gekleurde kopband: de titel staat op dezelfde grond als de
   inhoud. Het skelet geeft elke detailpopup een --cream2-kop met een onderrand;
   hier wordt die teruggenomen, want een band deelt het venster in tweeën en dit
   venster is één mededeling. */
.c-venster.is-velvenster{
  /* Breder dan het standaardvenster (460px). Twee kolommen naast elkaar op die
     maat geeft twee kolommen van tweehonderd pixels, en dan breekt elke regel
     in tweeën — dan is de vergelijking die de vorm moet dragen juist weg. */
  width:820px;
  background:var(--cream); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 60px rgba(10,57,54,.20); }
/* Ook de voet staat op dezelfde grond: geen ingesloten band, geen scheidslijn.
   Het venster is één mededeling, niet drie stroken. */
.is-velvenster .c-venster-voet{ background:transparent; border-top:0; padding:16px 24px 20px; }
.is-velvenster .c-venster-kop{
  background:transparent; border-bottom:0; padding:22px 24px 0; align-items:flex-start; }
/* Eén i18n-string voor knop en kop; de hoofdletter is opmaak en geen tekst. */
.is-velvenster .c-venster-titel{ font-family:var(--font-kop); font-size:20px;
  font-weight:var(--gew-vet); color:var(--petrol-dark); }
.is-velvenster .c-venster-titel::first-letter{ text-transform:uppercase; }
.is-velvenster .c-venster-meta{ margin-top:4px; font-size:var(--t-knop); color:var(--ink-soft); }
.is-velvenster .c-venster-body{ padding:18px 24px 0; }

/* Twee kolommen naast elkaar, nooit twee alinea's onder elkaar: het verschil
   tussen wat je krijgt en wat je mist is een vergelijking, en een vergelijking
   lees je naast elkaar. */
.pf-k4-velv-kolommen{ display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; }
/* Er was een eenkolomsstand voor het geval er niets te ghosten viel. Die is
   vervallen: het venster toont altijd alle regels, dus de rechterkolom is er
   altijd en een lege rechterhelft kan niet meer ontstaan. */
.pf-k4-velv-kolomkop{ font-size:10.5px; font-weight:var(--gew-vet); letter-spacing:.08em;
  color:var(--ink-mist); margin-bottom:6px; }
.is-wel .pf-k4-velv-kolomkop{ color:var(--petrol-deep); }
.pf-k4-velv-regel{ display:flex; align-items:flex-start; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-k4-velv-regel:last-child{ border-bottom:0; }
.pf-k4-velv-tekst{ font-size:var(--t-body); line-height:1.45; }
/* De kleur ís de uitleg: vol petrol vinkje tegenover een open mist-ring. Twee
   vormen dus, niet twee tinten van hetzelfde teken — op een slecht scherm of
   voor wie kleur slecht onderscheidt blijft het verschil dan staan. */
.pf-k4-velv-teken{ flex:none; width:14px; height:14px; margin-top:2px; border-radius:50%;
  display:inline-block; }
/* Een bleke cirkel met een petrol haakje, niet een volle petrol schijf: het
   frame zet de twee tekens even zwaar neer en laat het verschil in vórm zitten
   (vol tegenover open), niet in gewicht. Een donkere schijf tegenover een dunne
   ring maakt van de linkerkolom een reeks uitroeptekens. */
.pf-k4-velv-regel[data-soort="wel"] .pf-k4-velv-teken{
  background:var(--cream2); border:1px solid var(--line); position:relative; }
.pf-k4-velv-regel[data-soort="wel"] .pf-k4-velv-teken::after{
  content:''; position:absolute; left:4.5px; top:3px; width:3px; height:6.5px;
  border:solid var(--petrol-deep); border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.pf-k4-velv-regel[data-soort="wel"] .pf-k4-velv-tekst{ color:var(--ink); }
.pf-k4-velv-regel[data-soort="grijs"] .pf-k4-velv-teken{
  background:none; border:1.5px solid var(--line-sterk); }
.pf-k4-velv-regel[data-soort="grijs"] .pf-k4-velv-tekst{ color:var(--ink-mist); }

/* De slotregel hoort onder de grijze kolom en draagt hetzelfde teken als de
   knop. Geen teller, geen prijs: dit venster verkoopt niet, het meldt. */
/* Hetzelfde teken als op de knop, op dezelfde maat als de tekst ernaast en op
   de basislijn. Zonder die twee regels rende de emoji op zijn eigen formaat en
   zakte hij onder de regel weg. */
.pf-k4-velv-slotregel{ display:flex; align-items:baseline; gap:6px; padding-top:12px;
  font-size:var(--t-klein); color:var(--ink-mist); }
.pf-k4-velv-slotregel .pf-k4-exportslot{ margin:0; font-size:11px; line-height:1; }

.pf-k4-velv-uitleg{ margin:14px 0 0; padding:11px 14px; background:var(--cream2);
  border-radius:10px; font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; }

/* Eén primaire actie rechts, het formaat links. Niet twee gelijk gewogen
   knoppen: die lezen als een keuze tussen twee wegen, en er is één weg. */
.pf-k4-velv-voet{ display:flex; align-items:center; gap:14px; }
.pf-k4-velv-maat{ margin-right:auto; font-size:var(--t-klein); color:var(--ink-mist);
  font-variant-numeric:tabular-nums; }
.pf-k4-velv-tekstknop{ border:0; background:none; padding:6px 2px; font:inherit;
  font-size:var(--t-knop); font-weight:var(--gew-vet); color:var(--petrol-deep);
  cursor:pointer; }
.pf-k4-velv-tekstknop:hover{ text-decoration:underline; }
.pf-k4-velv-primair{ border:0; border-radius:999px; padding:11px 22px; font:inherit;
  font-size:var(--t-knop); font-weight:var(--gew-vet); color:var(--wit);
  background:var(--terra); cursor:pointer; }
.pf-k4-velv-primair:hover{ filter:brightness(.94); }
/* Geen groene ring om de terracotta knop: petrol op terracotta leest als een
   rand die bij de knop hoort, niet als focus. Een lichte binnenring plus een
   zachte terracotta halo zegt hetzelfde in de kleur van de knop zelf. */
.pf-k4-velv-primair:focus-visible{ outline:2px solid rgba(255,255,255,.85);
  outline-offset:-4px; box-shadow:0 0 0 3px rgba(200,121,65,.35); }

/* Onder de 700px staan twee kolommen naast elkaar niet meer: dan wordt elke
   regel een woordbrij. Ze gaan onder elkaar en houden hun koppen, zodat het
   onderscheid blijft staan ook al is de vergelijking niet meer zij-aan-zij. */
@media (max-width:699px){
  .pf-k4-velv-kolommen{ grid-template-columns:1fr; gap:14px; }
  .pf-k4-velv-voet{ flex-wrap:wrap; }
  .pf-k4-velv-maat{ flex:0 0 100%; margin:0 0 4px; }
}
.pf-k4-velv-voet .c-knop{ flex:1 1 0; justify-content:center; text-align:center;
  text-decoration:none; }

/* De stippellijn die wijst waar de rij landt, zoals bij de werkafspraken. */
.pf-k4-pnrij.is-doelboven{ box-shadow:0 -2px 0 0 var(--petrol) inset; }
.pf-k4-pnrij.is-doelonder{ box-shadow:0 2px 0 0 var(--petrol) inset; }

/* De as moet te zien zijn: een ▲ bovenaan, de lijn met verloop eronder en
   "minder" onderaan. Zonder die lijn bleef alleen het gekantelde woord over en
   verdween de richting. */
.pf-k4-astop{ font-size:8px; line-height:1; color:var(--petrol); }
.pf-k4-aspijl{ min-height:60px; }

/* ══ R117 §7-bis · het blok WAAR DIT AAN BIJDRAAGT (117g) ═══════════════
   Eén blok waar er twee stonden: de hefboom en de bouwstenen. De maten zijn
   absoluut, zoals de referentie ze vastlegt — extra paneelbreedte geeft de
   namen meer ruimte, geen grotere letters. */
.pf-bij-kop{ display:flex; align-items:center; gap:8px; }
.pf-bij-toggle{ margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; }
.pf-bij-toggle-label{ font:600 10.5px/1.4 var(--font-ui); color:var(--petrol-deep); }
.pf-bij-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.pf-bij-toggle-baan{ width:30px; height:17px; border-radius:999px; background:var(--line-sterk);
  display:flex; align-items:center; padding:2px; box-sizing:border-box; cursor:pointer;
  transition:background 120ms ease-out; flex:none; }
.pf-bij-toggle-baan > i{ width:13px; height:13px; border-radius:50%; background:var(--wit);
  transition:transform 120ms ease-out; }
.pf-bij-toggle input:checked + .pf-bij-toggle-baan{ background:var(--petrol); }
.pf-bij-toggle input:checked + .pf-bij-toggle-baan > i{ transform:translateX(13px); }
.pf-bij-toggle input:focus-visible + .pf-bij-toggle-baan{ outline:2px solid var(--petrol); outline-offset:2px; }

.pf-bij-hefboom{ margin-top:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:7px 10px; }
.pf-bij-hefboom-dot{ width:6px; height:6px; border-radius:50%; background:var(--petrol); flex:none; }
.pf-bij-hefboom-dot.is-leeg{ background:none; border:1px solid var(--line-ghost); box-sizing:border-box; }
.pf-bij-hefboom-naam{ flex:1; min-width:0; font:400 11.5px/1.4 var(--font-ui); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-bij-hefboom-naam.is-leeg{ color:var(--ink-mist); }
.pf-bij-hefboom-kies{ border:0; background:none; font:400 10px/1.4 var(--font-ui);
  color:var(--ink-mist); cursor:pointer; flex:none; }
.pf-bij-hefboom-leeg{ flex:1 0 100%; font:400 10.5px/1.45 var(--font-ui); color:var(--ink-soft); }

/* Alle acht bouwstenen als chips, in twee familie-rijen. Nooit "+ 5 andere". */
.pf-bij-kiezer{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.pf-bij-kiezer + .pf-bij-kiezer{ margin-top:5px; }
.pf-bij-chip{ display:inline-flex; align-items:center; gap:5px;
  background:var(--wit); border:1px solid var(--line-sterk); color:var(--ink);
  border-radius:999px; padding:3px 9px;
  font:400 10.5px/1.4 var(--font-ui); white-space:nowrap; cursor:pointer; }
.pf-bij-chip[aria-pressed=true]{ background:rgba(18,113,108,.10);
  border:1.5px solid var(--petrol); font-weight:600; padding:2.5px 8.5px; }
.pf-bij-teken{ width:4px; height:4px; flex:none; background:var(--petrol-dark); }
.pf-bij-teken[data-familie=menselijk]{ border-radius:50%; background:none;
  border:1px solid var(--ink-mist); box-sizing:border-box; }

.pf-bij-lijst{ margin-top:8px; padding:3px 10px 2px; box-sizing:border-box;
  background:var(--cream); border:1px solid var(--line); border-radius:9px; }
.pf-bij-rij{ display:flex; align-items:flex-start; gap:8px; padding:7px 0;
  border-bottom:1px solid var(--line-zacht); }
.pf-bij-rij:last-of-type{ border-bottom:0; }
.pf-bij-rij-teken{ width:5px; height:5px; flex:none; margin-top:4px; background:var(--petrol-dark); }
.pf-bij-rij-teken[data-familie=menselijk]{ border-radius:50%; background:none;
  border:1px solid var(--ink-mist); box-sizing:border-box; }
.pf-bij-rij-naam{ width:92px; flex:none; font:600 11.5px/1.4 var(--font-ui);
  color:var(--petrol-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-bij-rij-mist{ width:58px; flex:none; font:400 9px/1.3 var(--font-ui); color:var(--ink-mist); }
.pf-bij-rij-x{ border:0; background:none; padding:0; font-size:11px; color:var(--line-ghost);
  cursor:pointer; flex:none; }
.pf-bij-rij-x:hover{ color:var(--ink-soft); }
.pf-bij-hint{ margin:0; padding:7px 0 8px; font:400 10px/1.45 var(--font-ui); color:var(--ink-mist); }
.pf-bij-naast{ margin:7px 0 0; font:400 10.5px/1.45 var(--font-ui); color:var(--ink-mist); }

/* De schuiver: vrij schuifbaar, drie ijkpunten, nooit een getal. */
.pf-schuif{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-schuif-baan{ position:relative; height:12px; display:flex; align-items:center; }
.pf-schuif-baan::before{ content:''; position:absolute; left:0; right:0; height:3px;
  border-radius:2px; background:linear-gradient(90deg, var(--petrol-light), var(--petrol)); }
.pf-schuif[data-leeg] .pf-schuif-baan::before{ background:var(--line-zacht); }
.pf-schuif-ijk{ position:absolute; transform:translateX(-50%); width:4px; height:4px;
  border-radius:50%; background:var(--wit); border:1px solid var(--line-sterk); box-sizing:border-box; }
.pf-schuif input[type=range]{ position:relative; z-index:1; width:100%; margin:0;
  background:none; -webkit-appearance:none; appearance:none; height:12px; cursor:pointer; }
.pf-schuif input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;
  width:12px; height:12px; border-radius:50%; background:var(--petrol);
  border:2px solid var(--wit); box-shadow:0 1px 3px rgba(10,57,54,.35); }
.pf-schuif input[type=range]::-moz-range-thumb{ width:12px; height:12px; border-radius:50%;
  background:var(--petrol); border:2px solid var(--wit); box-shadow:0 1px 3px rgba(10,57,54,.35); }
/* Nog niets gezegd: alleen de grijze baan, geen knop op positie 0. De schuiver
   blijft wél bedienbaar met muis en toetsenbord — onzichtbaar, niet weg. */
.pf-schuif[data-leeg] input[type=range]{ opacity:0; }
.pf-schuif input[type=range]:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px;
  border-radius:6px; opacity:1; }
.pf-schuif-woorden{ display:flex; font:400 8.5px/1.3 var(--font-ui); color:var(--line-ghost); }
.pf-schuif-woorden span{ flex:1 1 auto; }
.pf-schuif-woorden span:nth-child(2){ text-align:center; }
.pf-schuif-woorden span:nth-child(3){ text-align:right; }
.pf-schuif-woorden span[data-aan]{ color:var(--petrol); font-weight:700; }

@media (prefers-reduced-motion: reduce){
  .pf-bij-toggle-baan, .pf-bij-toggle-baan > i{ transition-duration:0s; }
}
.pf-bij-hefboom-sub{ flex:1 0 100%; font:400 10px/1.45 var(--font-ui); color:var(--ink-mist); }
.pf-bij-hefboom-kies:hover{ color:var(--petrol-deep); text-decoration:underline; }
.pf-bij-hefboompop .c-draagvlak-optie > i{ flex:none; }

/* R117 · de vaste leesregel: zand met een petrol linkerrand. Nooit een
   waarschuwing — hij meldt wat er is, en vindt er niets van. */
.pf-leesregel{ margin:7px 0 0; padding:7px 10px;
  background:var(--cream2); border-left:3px solid var(--petrol-dark);
  border-radius:0 7px 7px 0; font:400 10.5px/1.45 var(--font-ui); color:var(--ink); }
.pf-leesregel em{ font-style:normal; color:var(--ink-mist); }

/* ══ R117 117h · de schil van de initiatief-uitklap ═════════════════════
   Een kop die blijft staan, twee kolommen die elk voor zich scrollen, en een
   voetbalk die niet meescrollt. De maten zijn absoluut: extra breedte geeft de
   namen meer ruimte, geen grotere letters. */
.pf-ini{ display:flex; flex-direction:column; max-height:min(82vh, 900px); overflow:hidden; }
.pf-ini-kop{ flex:none; padding:0 0 2px; }
.pf-ini-titelrij{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
input[type=text].pf-ini-naam{ flex:1; min-width:180px; border:0; background:none; padding:0;
  font-family:var(--font-kop); font-weight:600; font-size:19px; line-height:1.3;
  color:var(--petrol-dark); }
input[type=text].pf-ini-naam::placeholder{ color:var(--line-ghost); font-weight:400; }
input[type=text].pf-ini-naam:focus{ outline:2px solid var(--petrol); outline-offset:3px;
  border-radius:4px; }
.pf-ini-gehoord{ flex:none; font:400 11.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-ini-gehoord-naar{ border:0; background:none; padding:0; cursor:pointer;
  font:400 11.5px/1.4 var(--font-ui); color:var(--petrol-deep); }
.pf-ini-gehoord-naar:hover{ text-decoration:underline; }

.pf-ini-sum{ display:flex; flex-wrap:wrap; gap:6px; padding:9px 0 12px; }
.pf-ini-sum button{ font:600 10.5px/1.4 var(--font-ui); color:var(--petrol-deep);
  background:rgba(18,113,108,.08); border:1px solid rgba(14,79,75,.18);
  border-radius:999px; padding:3px 9px; white-space:nowrap; cursor:pointer; }
.pf-ini-sum button[data-leeg]{ background:var(--wit); border:1px dashed var(--line-sterk);
  color:var(--ink-mist); font-weight:400; }
.pf-ini-sum button:hover{ border-color:var(--petrol); }

.pf-ini-body{ display:flex; align-items:stretch; flex:1; min-height:0;
  border-top:1px solid var(--line-zacht); }
.pf-ini-kolom{ padding:14px 18px 18px; box-sizing:border-box; overflow-y:auto; }
.pf-ini-kolom.is-links{ flex:1; min-width:0; border-right:1px solid var(--line-zacht); }
.pf-ini-kolom.is-rechts{ width:430px; flex:none; background:var(--cream); }
.pf-ini-kolomkop{ margin:0; font:700 10px/1.4 var(--font-ui); letter-spacing:.08em;
  color:var(--petrol-deep); }
.pf-ini-kolom.is-rechts .pf-blok:first-of-type{ margin-top:9px; }
.pf-ini-kolom .pf-blok{ padding:10px 13px; box-sizing:border-box;
  background:var(--wit); border:1px solid var(--line); border-radius:10px; }
/* Waar een samenvattingschip je bracht, één keer kort omlijnd. */
[data-aangewezen]{ outline:2px solid var(--petrol); outline-offset:3px; border-radius:8px; }

.pf-ini-voet{ flex:none; padding:10px 0 0;
  border-top:1px solid var(--line); background:var(--cream); }

/* De scheiding en de zandkolom lopen door tot de rand van de kaart. Alleen op
   breed: op de telefoon staan de kolommen onder elkaar, en dan duwt de uitloop
   de inhoud tot tien pixels van de ⋯ op de rij ernaast (R4).

   Deze regels staan ná .pf-ini-voet en niet ervóór. Een media-query heeft geen
   eigen gewicht: bij gelijke specificiteit wint wat later staat, en daarmee
   liep de vulling van de voetbalk terug naar nul terwijl de uitloop bleef —
   precies de afgeknipte eerste letter die dit hoorde te verhelpen. */


@media (max-width: 1000px){
  .pf-ini{ max-height:none; }
  .pf-ini-body{ flex-direction:column; }
  .pf-ini-kolom{ overflow:visible; }
  .pf-ini-kolom.is-links{ border-right:0; border-bottom:1px solid var(--line-zacht); }
  .pf-ini-kolom.is-rechts{ width:auto; }
  .pf-ini-sum{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
}
@media (prefers-reduced-motion: reduce){
  [data-aangewezen]{ transition-duration:0s; }
}

/* ══ R117 117h · de tijdbalk en de rollenrij ════════════════════════════
   De datums staan ónder de balk, nooit erop: tekst op een gevulde balk is
   onleesbaar zodra de vulling daar loopt. */
.pf-ini-tijd{ margin-top:4px; padding:7px 9px 5px; box-sizing:border-box;
  background:var(--cream); border:1px solid var(--line); border-radius:7px; }
.pf-ini-tijd-baan{ position:relative; height:8px; }
.pf-ini-tijd-baan::before{ content:''; position:absolute; left:0; right:0; top:2px;
  height:4px; border-radius:2px; background:var(--line-zacht); }
.pf-ini-tijd-vul{ position:absolute; top:1px; height:6px; border-radius:3px;
  background:var(--petrol); }
/* Een open eind is geen einde: de vulling vervaagt naar de rand toe in plaats
   van een streep te trekken die er niet staat. */
.pf-ini-tijd-vul[data-open]{ border-top-right-radius:0; border-bottom-right-radius:0;
  -webkit-mask-image:linear-gradient(90deg, #000 60%, transparent);
  mask-image:linear-gradient(90deg, #000 60%, transparent); }
.pf-ini-tijd-vul[data-openlinks]{ border-top-left-radius:0; border-bottom-left-radius:0;
  -webkit-mask-image:linear-gradient(270deg, #000 60%, transparent);
  mask-image:linear-gradient(270deg, #000 60%, transparent); }
.pf-ini-tijd-vul[data-open][data-openlinks]{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
/* Terracotta is alleen handelen; de vandaag-lijn is de uitzondering die het
   canvasframe vastlegt. */
.pf-ini-tijd-nu{ position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--terra); border-radius:1px; }
.pf-ini-tijd-as{ display:flex; align-items:center; margin-top:4px; gap:8px; }
.pf-ini-tijd-as > .pf-init-maand{ flex:0 0 auto; }
.pf-ini-tijd-as > .pf-init-maand:last-child{ margin-left:auto; }

.pf-ini-rij2{ align-items:flex-start; }
.pf-ini-rij2 > *{ display:flex; flex-direction:column; }

/* Drie rollen in één rij die naar zijn inhoud krimpt: twee smalle chips horen
   naast elkaar te staan, niet met een gat van tweehonderd pixels ertussen. */
.pf-ini-rollen{ display:flex; flex-wrap:wrap; gap:8px 28px; align-items:flex-start; }
.pf-init-kolom .pf-ini-rollen > .pf-uitklap-veld{ flex:0 0 auto; min-width:0;
  display:flex; flex-direction:column; }
/* De change manager stond ingesprongen achter een petrol lijn toen hij onder
   de begeleiding-vraag hing. In de rollenrij is hij een rol als de andere. */
.pf-ini-rollen > .pf-init-cm{ margin:0; padding-left:0; border-left:0; }
/* De twee maandknoppen zijn hier de as van de balk, geen invoervelden. */
.pf-ini-tijd-as .pf-maandknop{ border:0; background:none; padding:0;
  font:400 10px/1.4 var(--font-ui); color:var(--ink-soft); }
.pf-ini-tijd-as .pf-maandknop.is-leeg{ color:var(--line-ghost); }
.pf-ini-tijd-as .pf-maandknop:hover{ color:var(--petrol-deep); }
.pf-ini-rolchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
  align-items:center; }
.pf-ini-rolchip{ display:inline-flex; align-items:center; gap:5px;
  background:var(--wit); border:1px solid var(--line-sterk); color:var(--ink);
  border-radius:999px; padding:4px 11px;
  font:400 11.5px/1.4 var(--font-ui); white-space:nowrap; }
/* Een niet-gezette rol is geen verdwenen veld maar een gat dat zijn eigen naam
   draagt, en het is meteen in te vullen. */
.pf-ini-rolchip.is-leeg{ border:1px dashed var(--line-sterk); color:var(--ink-mist);
  cursor:pointer; }
.pf-ini-rolchip.is-leeg:hover{ border-color:var(--petrol); color:var(--petrol); }
.pf-ini-rolnaam{ border:0; background:none; padding:0; font:600 11.5px/1.4 var(--font-ui);
  color:var(--ink); cursor:pointer; }
.pf-ini-rolnaam:hover{ color:var(--petrol-deep); }
.pf-ini-rolweg{ border:0; background:none; padding:0; line-height:1;
  font-size:12px; color:var(--ink-mist); cursor:pointer; }
.pf-ini-rolweg:hover{ color:var(--rood); }
.pf-ini-rol .pf-persoonzoek, .pf-ini-rol .pf-cm-zoek{ width:190px; }

/* ══ R117 117h · randvoorwaarden als rijen ══════════════════════════════
   Zes velden onder elkaar lezen als een formulier dat je moet invullen; zes
   rijen met hun aftastvraag lezen als een lijst waar je doorheen loopt. */
.pf-rv-kop{ align-items:baseline; }
.pf-rv-tel{ font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-rv-rij{ display:flex; align-items:flex-start; gap:9px; width:100%;
  box-sizing:border-box; padding:7px 0; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--line-zacht);
  font:inherit; color:inherit; }
.pf-rv-rij:last-of-type{ border-bottom:0; }
.pf-rv-dot{ width:8px; height:8px; border-radius:50%; box-sizing:border-box;
  flex:none; margin-top:4px; border:1.5px dashed var(--line-sterk); }
.pf-rv-tekst{ flex:1; min-width:0; }
.pf-rv-naam{ display:block; font:600 11.5px/1.4 var(--font-ui); color:var(--petrol-deep); }
.pf-rv-weg{ flex:none; border:0; background:none; padding:0; line-height:1;
  font-size:11px; color:var(--line-ghost); cursor:pointer; }
.pf-rv-weg:hover{ color:var(--rood); }
.pf-rv-veld{ display:block; width:100%; box-sizing:border-box; margin-top:3px;
  border:1px solid var(--petrol); border-radius:7px; padding:6px 9px;
  font:400 11px/1.45 var(--font-ui); color:var(--ink); min-height:44px; resize:vertical; }
input[type=text].pf-rv-naamveld{ display:block; width:100%; box-sizing:border-box;
  border:0; background:none; padding:0;
  font:600 11.5px/1.4 var(--font-ui); color:var(--petrol-deep); }

/* ══ geraakte groep en aflezing: hetzelfde staafje ══════════════════════ */
.pf-staaf{ width:86px; flex:none; height:6px; border-radius:3px;
  background:var(--line-zacht); overflow:hidden; }
.pf-staaf > i{ display:block; height:6px; border-radius:3px; }
.pf-groep{ display:flex; align-items:center; gap:9px; }
.pf-groep-naam{ flex:1; min-width:0; font:600 12px/1.4 var(--font-ui);
  color:var(--petrol-deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-groep-stand{ width:62px; flex:none; font:400 10px/1.3 var(--font-ui);
  color:var(--ink-mist); text-align:right; }
.pf-groep-stand.is-leeg{ color:var(--line-ghost); }
.pf-groep-meer{ flex:none; border:0; background:none; padding:0 2px;
  font-size:11px; color:var(--line-ghost); cursor:pointer; }
.pf-groep-meer:hover{ color:var(--petrol); }
.pf-groep-pop .c-draagvlak-optie{ gap:9px; }
.pf-groep-pop .pf-staaf{ width:52px; }
.pf-groep-los{ color:var(--rood); }

/* Twee aflezingen naast elkaar, boven de keuze. Ze wegen niets af. */
.pf-aflezing{ display:flex; gap:10px; margin:8px 0 12px; }
.pf-aflezing-vak{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pf-aflezing-label{ font:400 10px/1.35 var(--font-ui); color:var(--ink-mist); }
.pf-aflezing-vak .pf-staaf{ width:100%; }
.pf-aflezing-woord{ font:400 10px/1.35 var(--font-ui); color:var(--ink); }
/* Een randvoorwaarde met een leesregel eronder: de rand hoort om het paar heen,
   niet tussen de rij en zijn lezing door. */
.pf-rv-groep{ border-bottom:1px solid var(--line-zacht); }
.pf-rv-groep > .pf-rv-rij{ border-bottom:0; }
.pf-rv-groep .pf-checkpunt-borging{ padding:0 0 8px 17px; }

/* ══ R117 punt 10 · de change-manager-rol met drie standen ══════════════
   Hem verbergen tot de begeleidingsvraag beantwoord is maakt het
   dashboard-hiaat onvindbaar; hem als gat tonen vóór die vraag maakt van elke
   regel een verwijt. Dus drie standen, en de stand volgt de keuze. */
.pf-ini-rolchips[data-stand=onbeslist] .pf-ini-rolchip.is-leeg{
  border-style:solid; border-color:var(--line-zacht); }
.pf-ini-rolchips[data-stand=nodig] .pf-ini-rolchip.is-leeg{
  border-style:dashed; border-color:var(--terra); color:var(--terra); }
.pf-ini-rolchips[data-stand=nodig] .pf-ini-rolchip.is-leeg:hover{
  border-color:var(--terra); color:var(--terra); text-decoration:underline; }
.pf-ini-rolchips[data-stand=nietnodig] .pf-ini-rolchip.is-leeg{
  border-style:solid; border-color:var(--line); background:var(--cream2);
  color:var(--ink-mist); cursor:default; }

/* ══ R117 punt 11 · VOOR HET GESPREK als leesblad onder de voetbalk ═════
   Geen blok in de kolom: het bevat niets nieuws, en een vast blok zou de
   kolom verlengen met een kopie van zichzelf. */
.pf-ini-voet-gesprek{ flex:none; border:1px solid var(--line-sterk); background:var(--wit);
  border-radius:999px; padding:6px 14px;
  font:600 11.5px/1.4 var(--font-ui); color:var(--petrol); cursor:pointer; }
.pf-ini-voet-gesprek:hover{ border-color:var(--petrol); }
.pf-gesprek{ flex:none; padding:13px 0 16px; box-sizing:border-box;
  background:var(--cream2); border-top:1px solid var(--line); }
.pf-gesprek[hidden]{ display:none; }
.pf-gesprek-kop{ display:flex; align-items:center; gap:8px; }
.pf-gesprek-mist{ font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-gesprek-kopieer{ margin-left:auto; border:0; background:none; padding:0;
  font:600 11px/1.4 var(--font-ui); color:var(--petrol); cursor:pointer; }
.pf-gesprek-kopieer:hover{ text-decoration:underline; }
.pf-gesprek-sluit{ border:0; background:none; padding:0; line-height:1;
  font-size:12px; color:var(--line-ghost); cursor:pointer; }
.pf-gesprek-sluit:hover{ color:var(--ink-soft); }
.pf-gesprek-lijst{ margin:8px 0 0; padding:0; list-style:none; }
.pf-gesprek-lijst li{ position:relative; padding:4px 0 4px 14px;
  font:400 12px/1.5 var(--font-ui); color:var(--ink); }
.pf-gesprek-lijst li::before{ content:''; position:absolute; left:0; top:10px;
  width:5px; height:5px; border-radius:50%; background:var(--petrol); }

/* ══ R117 117h · de uitloop van de schil ════════════════════════════════
   De scheiding, de zandkolom, de voetbalk en het leesblad lopen door tot de
   rand van de kaart, met hun vulling terug erin. Alleen op breed: op de
   telefoon staan de kolommen onder elkaar, en dan duwt de uitloop de inhoud
   tot tien pixels van de ⋯ op de rij ernaast (R4).

   Deze regels staan onderaan het bestand en niet bij de blokken zelf. Een
   media-query heeft geen eigen gewicht: bij gelijke specificiteit wint wat
   later staat, en daarmee liep de vulling terug naar nul terwijl de uitloop
   bleef — dat is de afgeknipte eerste letter. */
@media (min-width:1001px){
  .pf-ini-body{ margin:0 -18px -14px; }
  .pf-ini-voet{ margin:0 -18px -14px; padding:10px 18px; }
  .pf-ini[data-gesprek=open] .pf-ini-voet{ margin-bottom:0; }
  .pf-gesprek{ margin:0 -18px -14px; padding:13px 18px 16px; }
}

/* ══ R117 · het volle raster zonder beslisniveau ════════════════════════
   Wat bestaat is zichtbaar, wat nodig is draagt zijn naam en zijn weg. De acht
   bouwstenen liggen vast; alleen de ingevulde tekst hangt aan een niveau. */
.pf-k4-eerst{ margin:0 0 10px; padding:9px 12px; box-sizing:border-box;
  background:var(--cream2); border-left:3px solid var(--petrol-dark);
  border-radius:0 7px 7px 0; font:400 11.5px/1.5 var(--font-ui); color:var(--ink); }
.pf-k4-matrix.is-dicht .pf-k4-kaart{ cursor:default; opacity:.92; }
.pf-k4-ghostprompt{ font:400 11px/1.45 var(--font-ui); color:var(--line-ghost); }
/* De naam van de organisatie is hier een veld en geen kop: laat dat zien. */
.pf-paneel-titel-knop{ cursor:text; border-radius:4px; }
.pf-paneel-titel-knop:hover{ background:var(--cream2); }
.pf-paneel-titel-knop:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }

/* ═══ R118 · de baseline op de criteriumrij (118a) ════════════════════════
   De markering is een ONDERSTREPING op de waarde zelf, geen badge en geen
   omhulsel. Dat kost nul horizontale ruimte en overleeft het wrappen van lange
   waarden. De open-teller rechtsboven blijft van de FAB-items: de baseline-stand
   komt daar niet bij, anders staan er twee tellers die niemand gelijk houdt.

   De vier standkleuren zijn twee paren: de streep onder de waarde en de ink van
   de herkomstregel. Die verschillen met opzet — op 10px is de vlakkleur
   (--geel) onleesbaar, dus de regel krijgt een vollere tint. */
:root{
  --bl-open-streep:#A8862C;     --bl-open-ink:#8A6A18;
  --bl-verlopen-streep:#C0563A; --bl-verlopen-ink:#A8452B;
  --bl-gemeten-streep:#0E4F4B;  --bl-gemeten-ink:#0E4F4B;
  --bl-vast-streep:#B9B4AA;     --bl-vast-ink:#8A867E;
}
/* De → en de naar-waarde staan op de TEKSTREGEL van de van-waarde, niet op de
   bovenkant van haar doos: die waarde draagt een onderstreping en dus wat
   padding, waardoor de pijl er drie pixel boven kwam te zweven. Bij twee
   waarden is de van-helft een omkaderd blok en geldt de oude uitlijning, want
   dan lijnt alles op het eerste segment. */
.c-vn{ display:flex; align-items:baseline; gap:8px; }
.c-vn[data-dubbel="ja"]{ align-items:flex-start; }
/* De → staat in élke rij op dezelfde plek, en de naar-waarden staan onder
   elkaar. De van- en naar-helft delen de kolom daarom in twee vaste helften in
   plaats van elk hun eigen tekstbreedte te nemen: anders schuift de pijl mee
   met de lengte van de van-waarde — en sinds de herkomstregel eronder staat,
   zelfs met de lengte van díé regel, want die is meestal breder dan het getal.
   Drie rijen onder elkaar lazen dan als drie verschillende kolommen. */
.c-vn-pijl{ font-size:12px; color:var(--line-ghost); flex:none; }
.c-vn-naar{ font-size:12.5px; color:var(--ink); flex:1 1 0; min-width:0; }
.c-vn-van{ flex:1 1 0; min-width:0; }
.c-bl-open{ display:block; width:100%; text-align:left; border:0; background:none;
  padding:0; font:inherit; cursor:pointer; }
/* Een blok met fit-content, geen inline-block. De streep hoort de tekst te
   volgen en niet de kolom, en dat deed inline-block ook — maar de basislijn van
   een inline-block is die van zijn LAATSTE regel. Zodra de van-waarde over twee
   regels liep (het Frans schrijft "toutes les transmissions" waar het
   Nederlands "alle overdrachten" heeft), zakte de → mee naar de tweede regel en
   las de rij als "toutes les / transmissions → plus de papier". Als blok telt
   de eerste regel, en dan begint het paar samen. */
.c-bl-waarde{ display:block; width:fit-content; max-width:100%; font-size:12.5px; color:var(--ink);
  padding-bottom:2px; border-bottom:1px solid transparent; }
.c-bl-waarde[data-stand="open"]    { border-bottom:1px dotted var(--bl-open-streep); }
.c-bl-waarde[data-stand="verlopen"]{ border-bottom:1px dotted var(--bl-verlopen-streep); }
.c-bl-waarde[data-stand="gemeten"] { border-bottom:1px solid  var(--bl-gemeten-streep); }
.c-bl-waarde[data-stand="vast"]    { border-bottom:1px dotted var(--bl-vast-streep); }
/* Een richting is geen meting: geen streep, geen regel. */
.c-bl-waarde[data-stand="geen"]{ border-bottom-color:transparent; }
/* De herkomstregel krijgt haar eigen slot onder de waarde, precies zoals de
   eigenaarsnaam "eigenaar · bevestigd" er al een heeft. Altijd dezelfde plek. */
.c-bl-herkomst{ display:block; font-size:10px; line-height:1.35; margin-top:4px; max-width:100%; }
.c-bl-herkomst[hidden]{ display:none; }
.c-bl-herkomst[data-stand="open"]    { color:var(--bl-open-ink); }
.c-bl-herkomst[data-stand="verlopen"]{ color:var(--bl-verlopen-ink); }
.c-bl-herkomst[data-stand="gemeten"] { color:var(--bl-gemeten-ink); }
.c-bl-herkomst[data-stand="vast"]    { color:var(--bl-vast-ink); }
.c-bl-open:hover .c-bl-herkomst{ text-decoration:underline; }
/* R118e — de aanname bewoont dit slot. Afkappen op twee regels met een
   beletselteken, nooit op tekens: een halve zin met "…" leest beter dan een
   afgeknipt woord. De volledige tekst zit in title en achter de ↗. */
.c-bl-herkomst[data-clamp]{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; }

/* Twee waarden: ÉÉN container met twee segmenten, niet twee invoervakken. De
   kolombreedte en de → blijven ongewijzigd. De → en de naar-waarde lijnen op
   het EERSTE segment, niet op het midden: de rij blijft optisch één regel hoog,
   hoe hoog het veld ook wordt. */
.c-vn[data-dubbel="ja"] .c-vn-van{ flex:1 1 0; border:1px solid var(--line); border-radius:8px;
  background:var(--wit); }
.c-vn[data-dubbel="ja"] .c-vn-seg{ padding:7px 9px; }
.c-vn[data-dubbel="ja"] .c-vn-seg + .c-vn-seg{ border-top:1px solid var(--line-zacht); }
.c-vn[data-dubbel="ja"] .c-vn-pijl{ padding-top:9px; }
.c-vn[data-dubbel="ja"] .c-vn-naar{ padding-top:7px; }
/* R118g — hier stonden .c-vn-meer en .c-bl-menuknop: het ⋯ op het waardeveld
   en zijn menu. Beide weg; de rij draagt er al één rechtsboven. */

/* ═══ R118 · het venster (118c) ═══════════════════════════════════════════
   Twee gelijke wegen: allebei wit met --line-sterk. Geen van beide is de brave
   keuze — ziet de schatting eruit als de mindere, dan beschrijft iedereen zijn
   gok als een meting. Terracotta is alleen handelen, en dat is hier uitsluitend
   de bevestigknop van de derde uitgang. */
/* Elke stand draagt zijn eigen kop ín de kaart, dus de kopbalk van het skelet
   houdt alleen het kruis over. Anders staat de vraag van stand 1 boven de vraag
   van stand 2 en lezen er twee vragen tegelijk.

   Die lege kopstrook mag dan ook geen 40px hoog blijven: het kruis gaat op de
   regel van de overline staan, niet boven een strook niets. */
.is-baselinevenster .c-venster{ position:relative; }
/* De kop blijft bestaan — hij draagt het kruis — maar neemt geen hoogte meer:
   hem verbergen nam het kruis mee, want dat is zijn kind. */
.is-baselinevenster .c-venster-kop{ position:absolute; top:0; right:0; z-index:2;
  padding:10px 12px 0 0; border-bottom:0; background:none; min-height:0; }
.is-baselinevenster .c-venster-titelblok{ display:none; }
.bl-over{ padding-right:26px; }
.bl-over{ font-size:var(--t-klein); font-weight:var(--gew-vet); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); }
.bl-kop{ margin:6px 0 0; font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:18px; line-height:1.35; color:var(--petrol-dark); }
.bl-lead{ margin:9px 0 14px; font-size:var(--t-body); color:var(--ink-soft); line-height:1.55; }
.bl-wegen{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bl-weg{ display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  padding:13px 14px; border:1px solid var(--line-sterk); border-radius:10px;
  background:var(--wit); font:inherit; }
.bl-weg:hover{ border-color:var(--petrol); }
.bl-weg-kop{ font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--petrol-dark); }
.bl-weg-gevolg{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.45; }
/* De derde uitgang: één regel onder een hairline, met een tekstlink zonder
   vlak. Vindbaar, niet de makkelijkste knop. */
.bl-uitgang{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht);
  font-size:var(--t-klein); color:var(--ink-soft); }
.bl-link{ border:0; background:none; padding:0; font:inherit; font-size:var(--t-klein);
  color:var(--petrol-deep); cursor:pointer; border-bottom:1px solid currentColor; }
.bl-terug{ border:0; background:none; padding:0 0 10px; font:inherit;
  font-size:var(--t-klein); color:var(--ink-soft); cursor:pointer; }
.bl-redenkop{ margin:0 0 6px; font-family:var(--font-kop); font-size:16px;
  font-weight:var(--gew-vet); color:var(--petrol-dark); }
.bl-reden{ width:100%; font:inherit; font-size:var(--t-body); line-height:1.5;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--wit); color:var(--ink); resize:vertical; }
.bl-redenvoet{ display:flex; justify-content:flex-end; margin-top:12px; min-height:1px; }
/* De knop bestaat pas zodra er tekst staat. Niet gedimd: een knop die er is
   maar niet werkt, vraagt of je iets fout doet. */
/* De knop is geen eindhandeling — hij heet "Bewaar de aanpak". Radius 8 en een
   gewone knopmaat; een pil van 22px duwt de herkomstregel ernaast in twee
   regels en domineert een blok waar hij de kleinste stap in is. */
.bl-knop{ border:0; border-radius:8px; padding:7px 14px; font:inherit;
  font-size:12px; font-weight:var(--gew-vet); color:var(--wit);
  background:var(--terra); cursor:pointer; }
.bl-knop[hidden]{ display:none; }

/* ── 118c · de geteld-stand ───────────────────────────────────────────────
   Dezelfde kaart, geschoven. De velden volgen de bestaande veld-grammatica van
   de app; nieuw is alleen dat ze hier staan in plaats van op een ander scherm.
   Dat is de hele winst: de CM blijft bij zijn criterium. */
/* Dichtheid: vier velden horen zonder scrollen in de kaart te passen. */
.bl-blok{ margin-top:12px; }
.bl-label{ display:block; font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); }
.bl-veld{ width:100%; box-sizing:border-box; background:var(--wit); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; margin-top:5px; font:inherit; font-size:11.5px;
  color:var(--ink); line-height:1.45; height:auto; min-height:0; }
.bl-veld:focus{ outline:0; border-color:var(--petrol); }
.bl-veld[hidden]{ display:none; }
.bl-veldnoot{ font-size:10px; color:var(--ink-mist); margin-top:5px; line-height:1.4; }
.bl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.bl-chip{ background:var(--wit); border:1px solid var(--line-sterk); border-radius:999px;
  padding:4px 11px; font:inherit; font-size:11px; color:var(--ink); cursor:pointer; }
.bl-chip[aria-pressed="true"]{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:var(--wit); font-weight:var(--gew-vet); }
.bl-chip.is-eigen{ color:var(--ink-soft); }
/* De meting staat onder een hairline: de vier velden erboven beschrijven hóe,
   deze drie zeggen wát er uit kwam. Leeg laten mag, en dan verandert de knop. */
.bl-meting{ border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
.bl-metingrij{ display:flex; gap:10px; align-items:flex-end; }
.bl-metingkolom{ flex:0 0 96px; min-width:0; }
.bl-metingkolom.is-breed{ flex:1 1 0; }
.bl-voet{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.bl-voet .bl-knop{ flex:none; white-space:nowrap; }
.bl-voet .bl-voetnoot{ flex:1 1 0; min-width:0; }
.bl-voetnoot{ font-size:10.5px; color:var(--ink-mist); line-height:1.4; }
/* de schatting staat als noot naast het label, niet in het veld */
.bl-labelnoot{ font-weight:var(--gew-normaal); letter-spacing:0; text-transform:none;
  color:var(--ink-mist); }
/* BIJ WIE is een groepenkiezer: koppel-chips met ✕ en een ghost-chip om er een
   bij te zetten. Kiezen is de hoofdweg, typen mag. Geen omrand invoervak: dat
   leest als "vul hier iets in" terwijl de groepen al bestaan. */
.is-baselinevenster .c-tagveld{ margin-top:5px; border:0; background:none; padding:0;
  min-height:0; gap:6px; }
.is-baselinevenster .c-tagveld-inwrap{ flex:0 0 auto; min-width:0; }
.is-baselinevenster .c-tagveld-in{ width:auto; min-width:104px; border:1px dashed var(--line-sterk);
  border-radius:999px; padding:3px 11px; font-size:11px; background:none; }
.is-baselinevenster .c-tagveld-in:focus{ border-style:solid; border-color:var(--petrol);
  min-width:160px; }
.is-baselinevenster .c-tagchip{ font-size:11px; padding:3px 10px; }
/* DOOR gebruikt het naamveld van de app; de suggestielijst hangt eronder. */
.is-baselinevenster .c-naamac{ position:relative; margin-top:5px; }
.is-baselinevenster .c-naamac .bl-veld{ margin-top:0; }
/* De suggestielijst groeit naar LINKS. In een kolom van ruim honderd pixels
   duwde een lijst met een minimumbreedte de hele kaart breder, en dan krijgt een
   venster een horizontale schuifbalk om één naam te tonen. */
.is-baselinevenster .c-naamac-lijst{ position:absolute; left:auto; right:0; top:calc(100% + 3px);
  z-index:20; width:max-content; max-width:240px; }
.bl-knop:hover{ filter:brightness(.94); }

/* Mobiel: de twee wegen worden volle-breedte kaarten van minstens 44px, en de
   waarden staan onder elkaar met hun herkomstregel. De → verhuist mee naar de
   regel van de naar-waarde, anders zweeft hij tussen twee blokken in. */
@media (max-width:699px){
  .bl-wegen{ grid-template-columns:1fr; }
  .bl-weg{ min-height:44px; }
  .bl-metingrij{ flex-wrap:wrap; }
  .bl-metingkolom, .bl-metingkolom.is-breed{ flex:1 1 100%; }
  .bl-voet{ flex-wrap:wrap; }
  .bl-voet .bl-knop{ min-height:44px; }
  .bl-link, .bl-knop{ min-height:44px; display:inline-flex; align-items:center; }
  .c-vn{ flex-wrap:wrap; }
  /* Ook de dubbele container neemt de volle breedte: die regel staat elders op
     flex:1 met een hogere specificiteit, en zonder deze zou het veld op een
     telefoon juist smaller worden dan in de driekolomsrij. */
  .c-vn-van, .c-vn[data-dubbel="ja"] .c-vn-van{ flex:0 0 100%; }
  .c-vn-pijl{ display:none; }
  /* De → verhuist mee naar de regel van de naar-waarde, anders zweeft hij
     tussen twee blokken in. Het ⋯ blijft op díe regel staan: op een eigen
     derde regel lijkt het bij de rij te horen in plaats van bij het veld. */
  .c-vn-naar{ flex:1 1 auto; min-width:0; padding-top:6px; }
  .c-vn-naar::before{ content:'→ '; color:var(--line-ghost); }
}
@media (prefers-reduced-motion: reduce){
  .bl-weg, .bl-knop, .c-bl-open{ transition:none; }
}

/* ═══ R118 · het meetblok op de baseline-actie (118d) ══════════════════════
   Eén blok op de plan-kaart, niet een tweede scherm: hier staat hoe er geteld
   wordt en hier komt het resultaat binnen. De kop is dezelfde soort kopregel
   als elders op de kaart, het blok zelf staat iets uit de kaart gelicht zodat
   het als één ding leest. */
.pl-baseline{ margin-top:var(--sp-4); padding:14px 14px 4px; border:1px solid var(--line);
  border-radius:10px; background:var(--cream); }
.pl-baseline-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); letter-spacing:.04em;
  text-transform:uppercase; color:var(--petrol-deep); margin-bottom:var(--sp-4); }
.pl-baseline .c-naamac{ position:relative; }
/* Het resultaat en de knop die het thuisbrengt staan op één regel: de knop
   hoort bij dit getal en niet bij het blok. */
.pl-baseline-resrij{ display:flex; align-items:center; gap:8px; }
.pl-baseline-res{ flex:1 1 auto; min-width:0; }
.pl-baseline-thuis{ flex:none; border:0; border-radius:999px; padding:9px 16px; font:inherit;
  font-size:var(--t-knop); font-weight:var(--gew-vet); color:var(--wit);
  background:var(--terra); cursor:pointer; }
.pl-baseline-thuis:hover{ filter:brightness(.94); }
.pl-baseline-thuis[hidden]{ display:none; }
@media (max-width:699px){
  .pl-baseline-resrij{ flex-wrap:wrap; }
  .pl-baseline-thuis{ min-height:44px; }
}

/* R118 · mobiel — de open-teller rechtsboven op een criteriumrij verkort tot de
   dots en het getal. Het woord "open" staat er op telefoonbreedte alleen om de
   naam ernaast van de rij te duwen; de dots zeggen al waar het over gaat. Enkel
   hier: elders is er ruimte en is het woord de helft van de betekenis. */
@media (max-width:699px){
  .c-crit-hoek .c-blokteller-woord{ display:none; }
}

/* ═══ R118i · de hermeting-stand ══════════════════════════════════════════
   De meting staat; wat nu in het plan hoort is de hermeting. Het meetpuntkader
   is één wit vlak met drie keuzerijen, zodat de drie opties als één beslissing
   lezen en niet als drie losse vinkjes. */
.bl-meetkader{ background:var(--wit); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-top:14px; }
.bl-meetkop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bl-mp-naam{ font-size:11.5px; font-weight:var(--gew-vet); color:var(--petrol-deep); }
.bl-mp-ritme{ font-size:10.5px; color:var(--ink-soft); }
.bl-mp-noot{ margin-left:auto; font-size:10px; color:var(--ink-mist); }
.bl-keuze{ display:flex; align-items:flex-start; gap:9px; padding:9px 0;
  border-top:1px solid var(--line-zacht); cursor:pointer; }
.bl-keuze input{ margin-top:2px; flex:none; accent-color:var(--petrol-deep); }
.bl-keuze-tekst{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bl-keuze-tekst b{ font-size:12px; font-weight:var(--gew-vet); color:var(--ink); }
.bl-keuze-sub{ font-size:11px; color:var(--ink-soft); line-height:1.45; }
.bl-hermdatum{ max-width:170px; }
.bl-hermdatum[hidden]{ display:none; }
@media (max-width:699px){
  .bl-keuze{ min-height:44px; align-items:center; }
  .bl-hermdatum{ max-width:none; }
}

/* ═══ R118h · de ⋯ in de kop van het waardeveld ═══════════════════════════
   Alleen bij twee waarden, en in de KOP: de handelingen gaan over het veld en
   niet over één van de twee getallen. Bij één waarde is de herkomstregel zelf
   de ingang en staat hier niets. */
/* Het ⋯ staat NAAST het label van het veld, niet aan de rechterrand van de cel:
   daar komt het tot op vijftig pixel van de ⋯ van de rij zelf te staan, en dan
   zijn het weer twee knoppen die je niet uit elkaar houdt. */
.c-vn-kop{ display:flex; align-items:baseline; gap:0; }
/* De twee helften van het label staan boven hun eigen helft van de waarde, in
   dezelfde verdeling: van links, naar rechts van het midden. */
.c-vn-labrij{ display:flex; align-items:baseline; gap:8px; min-width:0; flex:1 1 auto; }
.c-vn-lab-van{ flex:1 1 0; min-width:0; }
.c-vn-lab-naar{ flex:1 1 0; min-width:0; }
.c-vn-kop .mx-lab{ flex:none; }
.c-vn-bij{ font-size:10px; color:var(--line-ghost); margin-left:7px; }
.c-vn-meer{ border:0; background:none; margin-left:5px;
  padding:0 2px; font-size:12px; line-height:1; color:var(--line-ghost); cursor:pointer; }
.c-vn-meer:hover{ color:var(--petrol-deep); }
/* De popover: geen gecentreerd venster en geen kopband. Een titel is nodig
   zodra een dialoog los van zijn aanleiding staat; deze hangt eraan vast. */
.c-vn-poplaag{ position:fixed; inset:0; z-index:65; }
.c-vn-pop{ position:absolute; z-index:950; min-width:232px; max-width:260px;
  background:var(--cream); border:1px solid var(--line-sterk); border-radius:10px;
  box-shadow:0 16px 40px rgba(10,57,54,.18); padding:6px; }
.c-vn-popknop{ display:block; width:100%; text-align:left; background:none; border:0;
  font:inherit; font-size:12px; color:var(--ink); padding:8px 9px; border-radius:7px; cursor:pointer; }
.c-vn-popknop + .c-vn-popknop{ border-top:1px solid var(--line-zacht); }
.c-vn-popknop:hover{ background:var(--cream2); }
.c-vn-popvoet{ font-size:10px; color:var(--ink-mist); line-height:1.45;
  padding:8px 9px 4px; border-top:1px solid var(--line-zacht); margin-top:4px; }
@media (max-width:699px){
  .c-vn-meer{ min-width:44px; min-height:44px; }
  .c-vn-popknop{ min-height:44px; }
}

/* ═══ R118j · de baseline-laag op het meetpunt ════════════════════════════
   De eerste meting ÍS de baseline: de strook markeert die ruit met een ring en
   een label, en elke volgende meting zegt of ze op dezelfde manier geteld is.
   Het wissel-label staat alleen waar de methode wisselt — zou het op alles
   erna staan, dan schreeuwt de halve strook terwijl er niets veranderd is. */
.c-ruitmerk.is-baseline .c-meetruitje-ruit{ outline:1.5px solid var(--petrol-deep);
  outline-offset:3px; }
.c-meetruitje-ml{ display:block; font-size:9px; line-height:1.3; margin-top:2px;
  letter-spacing:.04em; }
.c-meetruitje-ml[data-soort="baseline"]{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.c-meetruitje-ml[data-soort="wissel"]{ color:#8A6A18; }
.c-meetruitje-ml[data-soort="zelfde"]{ color:var(--line-ghost); }

/* het methodeblok in het meet-formulier */
.c-meet67-hoe{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line-zacht); }
.c-meet67-methode{ width:100%; box-sizing:border-box; background:var(--wit);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-top:5px;
  font:inherit; font-size:11.5px; color:var(--ink); line-height:1.45; resize:vertical; }
.c-meet67-methode:focus{ outline:0; border-color:var(--petrol); }
.c-meet67-methode[hidden]{ display:none; }
.c-meet67-noot{ font-size:10px; color:var(--ink-mist); line-height:1.4; margin-top:5px; }
.c-meet67-keuze{ display:flex; align-items:flex-start; gap:9px; padding:8px 0;
  border-top:1px solid var(--line-zacht); cursor:pointer; }
.c-meet67-keuze:first-of-type{ border-top:0; }
.c-meet67-keuze input{ margin-top:2px; flex:none; accent-color:var(--petrol-deep); }
.c-meet67-keuzetekst{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-meet67-keuzetekst b{ font-size:12px; font-weight:var(--gew-half); color:var(--ink); }
.c-meet67-keuzesub{ font-size:10.5px; color:var(--ink-soft); line-height:1.4; }

/* de twee chips in de metaregel van het meetpunt */
.c-meetchip-crit{ cursor:pointer; }
.c-meetchip-anders{ display:inline-flex; align-items:center; font-size:10.5px;
  color:#8A6A18; background:rgba(217,166,60,.15); border-radius:999px; padding:2px 9px; }

@media (max-width:699px){
  /* de strook scrollt horizontaal; de labels blijven onder hun ruit staan */
  .c-meetruitjes{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .c-meetruitje{ flex:none; }
  .c-meet67-keuze{ min-height:44px; align-items:center; }
}
.c-meet67-naareerste{ display:block; margin-top:6px; border:0; background:none; padding:0;
  font:inherit; font-size:10.5px; color:var(--petrol-deep); cursor:pointer; text-align:left; }
/* de weggeschoven schatting, corrigeerbaar in de bewerkstand */
.vannaar.is-eerder{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.c-vn-eerderlab{ font-size:10px; color:var(--ink-mist); flex:none; }
.c-vn-eerderinp{ flex:1 1 0; min-width:0; }

/* R118j-bis — de inschatting als eerste punt van de strook. Een open stippel-
   ring, geen ruit: een ruit is een meting en dit is er geen. Ze telt niet mee
   in "op ritme" en trekt geen trendlijn; dat verschil hoort te zien te zijn. */
.c-meetruitje.is-schatting{ cursor:default; }
.c-ruitmerk.is-schatting .c-meetruitje-ruit{ background:none;
  border:1.5px dotted var(--bl-open-streep); }
.c-meetruitje.is-schatting .c-meetruitje-dl,
.c-meetruitje.is-schatting .c-meetruitje-wl{ color:var(--ink-soft); }
.c-meetruitje-ml[data-soort="schatting"]{ color:#8A6A18; border:0; background:none;
  padding:0; font:inherit; font-size:9px; cursor:pointer; }
.c-meetruitje-ml[data-soort="baseline"]{ border:0; background:none; padding:0; font:inherit;
  font-size:9px; }

/* ── R118k · de legenda onder de meetstrook ──────────────────────────────
   Eén ghost-regel, dezelfde grammatica als de legenda onder de belastingcel op
   Portfolio: staal links, twee of drie woorden ernaast, wrapt mee. Ze zit in de
   strook en niet op de kaart, want de tekens die ze uitlegt staan daar ook: een
   dichtgeklapte kaart heeft niets uit te leggen.

   Het staal is .c-ruitmerk en géén .c-meetruitje: dat laatste is een meting in
   de reeks, en de harnassen tellen ze. Een staal dat meetelt als meting zou de
   strook twee baselines geven. */
.c-meetlegenda{ display:flex; flex-wrap:wrap; gap:3px 14px; margin-top:12px;
  padding-top:8px; border-top:1px solid var(--line-zacht);
  font-size:9.5px; color:var(--ink-mist); }
.c-meetlegenda-item{ display:inline-flex; align-items:center; gap:7px; }
.c-meetlegenda-staal{ display:inline-flex; align-items:center; justify-content:center;
  width:13px; height:13px; flex:none; }
/* De ring steekt 4,5px buiten de ruit; zonder die breedte plakt het woord ertegen. */
.c-meetlegenda-staal.is-baseline{ width:22px; }

/* 118k · de reden onder een overgeslagen ruit.
   Ghost-grijs, nooit amber: overslaan mét reden is geen probleem, en een
   amberregel zou er een van maken. Twee regels; de volle tekst staat in de
   tooltip, zodat afkappen niets wegneemt. */
.c-meetruitje-reden{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-width:118px; margin-top:1px;
  font-size:9px; line-height:1.35; color:var(--ink-soft); text-align:center; }

/* 118k · de bewust geschatte vertrekpunten onder de eindbalans. Een voetnoot,
   geen tweede balans: één alinea, ghost, met de telling vet vooraan. */
.afrond-balans-geschat{ margin:10px 0 0; padding-top:8px;
  border-top:1px solid var(--line-zacht);
  font-size:11.5px; line-height:1.5; color:var(--ink-soft); }
.afrond-balans-geschat b{ color:var(--ink); font-weight:var(--gew-vet); }

/* ── 118k · de methode open onder de gekozen keuze ───────────────────────
   Je kunt niet bevestigen dat het hetzelfde is als je niet ziet wat "hetzelfde"
   was. Het paneel staat ingesprongen onder de aangevinkte optie, op het cream-
   vlak van de kaart, met een labelkolom links. Leesbaar, geen link. */
.c-meth-slot{ margin:0 0 4px 27px; }
/* Een grid en geen flex per rij: dan staan de waarden in één kolom, ook als
   één label breder is dan de andere. Met een vaste 58px brak "WITH WHOM" over
   twee regels terwijl de kolom ernaast leeg bleef staan. */
.c-meth{ background:var(--cream2); border:1px solid var(--line-zacht); border-radius:8px;
  padding:9px 11px; display:grid; grid-template-columns:max-content minmax(0,1fr);
  column-gap:10px; row-gap:6px; align-items:baseline; }
.c-meth-rij{ display:contents; }
.c-meth-lab{ min-width:58px; white-space:nowrap; font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-mist); line-height:1.5; }
.c-meth-w{ min-width:0; font-size:11.5px; line-height:1.45; color:var(--ink); }
.c-meth-in{ min-width:0; font:inherit; font-size:11.5px; color:var(--ink);
  background:var(--wit); border:1px solid var(--line); border-radius:6px; padding:4px 7px; }
.c-meth-in:focus{ outline:0; border-color:var(--petrol); }
.c-meth .c-tagveld{ min-width:0; }
/* ✎ pas aan: een stille handeling, geen knop die om aandacht vraagt. */
.c-meth-pas{ align-self:flex-start; margin-top:1px; border:0; background:none; padding:0;
  font:inherit; font-size:10.5px; color:var(--petrol-deep); cursor:pointer; }
.c-meth-pas:hover{ text-decoration:underline; }
/* Het ↗ op de onderregel van een niet-gekozen optie: waar die keuze heen wijst. */
.c-meet67-keuzenaar{ border:0; background:none; padding:0; font:inherit; font-size:10.5px;
  color:var(--petrol-deep); cursor:pointer; }
.c-meet67-keuzenaar:hover{ text-decoration:underline; }
.c-meet67-keuzesub[hidden]{ display:none; }

/* R118 · het vertrekpunt en zijn herkomst op de metingregel van een changeplan.
   De herkomst staat als tweede regel onder de rij en niet erin: de rij heeft
   vier kolommen en een vijfde zou de doelnaam wegdrukken. Ghost, want ze legt
   de regel erboven uit en concurreert er niet mee. */
.pf-cp-critwrap{ padding:5px 0; }
.pf-cp-critwrap .pf-cp-crit{ padding:0; }
.pf-cp-crit-herkomst{ margin-top:2px; font-size:10.5px; line-height:1.4;
  color:var(--ink-mist); }

/* De mijlpaalrij is een knop geworden: ze brengt je naar het changeplan waar
   het item vandaan komt. Ze mag er niet als een knop uitzien — het is nog
   steeds een regel in een lijst — dus alleen de aanwijzer en het ↗ verraden
   dat er iets achter zit, en dat ↗ verschijnt pas bij hover. */
.pf-init-mp{ width:100%; text-align:left; background:none; font:inherit;
  cursor:pointer; appearance:none; }
.pf-init-mp-naar{ flex:none; font-size:10px; color:var(--petrol-deep);
  opacity:0; transition:opacity .15s; }
.pf-init-mp:hover .pf-init-mp-naar,
.pf-init-mp:focus-visible .pf-init-mp-naar{ opacity:1; }
.pf-init-mp:hover .pf-init-mp-naam{ color:var(--petrol-deep); }
.pf-init-mp:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; border-radius:6px; }

/* Het advies op de begeleidingsregel. Het droeg helemaal geen regel, dus een
   kale <button> viel terug op het lettertype van de browser en stond twee maten
   te groot naast "herzie ▸". Het is een waarde met een weg erheen, geen actie:
   dus een stille chip in de maat van zijn buur, en het ↗ zegt de rest. */
.pf-adviechip{ display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); background:var(--cream2); border-radius:999px;
  padding:3px 10px; font-family:inherit; font-size:11px; font-weight:var(--gew-vet);
  line-height:1.5; color:var(--petrol-deep); cursor:pointer; white-space:nowrap; }
.pf-adviechip:hover{ border-color:var(--line-sterk); background:var(--wit); }
.pf-adviechip:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px; }

/* Stap 1 van de import nadat het bestand gelezen is. Het plakvak toonde tot nu
   de volle HTML van het werkbestand terug: honderden regels markup in een vakje
   van drie regels hoog, wat leest als een fout terwijl er niets misging. Nu
   staat er wat er binnen is, met de weg terug ernaast. */
.pf-imp-binnen{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding:9px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--cream2); }
.pf-imp-binnen-naam{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--ink);
  overflow-wrap:anywhere; }
.pf-imp-binnen-weg{ flex:none; border:0; background:none; padding:0; font:inherit;
  font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; }
.pf-imp-binnen-weg:hover{ text-decoration:underline; }

/* De import-pill van de missietab, hier op het changeplan-register. Ze deelt
   haar component en dus haar uiterlijk; alleen de sleep-staat heeft een eigen
   regel nodig, want die hing aan .c-missies. */
.pf-cp.is-sleepover{ outline:2px dashed var(--petrol-deep); outline-offset:4px;
  border-radius:12px; }

/* ── R111 herzien · de ⊕ op een rij in de foto-wizard ────────────────────
   De component komt uit de missie-oogst en houdt haar klassen; wat hier bij
   komt is het paneel dat onder de knop opent in plaats van ernaast, de derde
   soort-kleur, en de voetnoot. */
.pf-plus-fab{ width:26px; height:26px; font-size:15px; }
.pf-plus-menu{ width:276px; }
.pf-plus-item.is-gekozen{ background:var(--cream2); }
.pf-plus-item.is-gekozen .c-r65-menu-itemtitel{ color:var(--petrol-deep); }
.pf-plus-vink{ margin-left:auto; flex:none; font-size:11px; color:var(--petrol-deep); }
/* De voetnoot zegt in één regel wat er met het item gebeurt: je schrijft het
   zelf, de herkomst reist mee. Zonder die regel is "leeg tekstveld" een gat. */
.pf-plus-voet{ border-top:1px solid var(--line-zacht); padding:8px 13px 10px;
  font-size:10.5px; line-height:1.45; color:var(--ink-mist); }
/* De ⊕ in de schakelrij van stap 3, rechts van de schakelaar. */
.pf-wiz-schakelplek .pf-plus-fab{ margin-left:8px; }
/* En op een groepsregel van stap 2: rechts op de regel van de naam. */
.pf-wiz-groepplus{ display:flex; align-items:center; margin-left:auto; flex:none; }

@media (max-width:699px){
  /* Het paneel wordt een bottom-sheet met sleepgreep: dezelfde inhoud, dezelfde
     volgorde. Rijen minstens 44px, want hier wordt met een duim gemikt. */
  .pf-plus-menu{ position:fixed !important; left:0 !important; right:0 !important;
    top:auto !important; bottom:0; width:100%; border-radius:16px 16px 0 0;
    border-bottom:0; padding-top:10px; }
  .pf-plus-menu::before{ content:""; display:block; width:38px; height:4px;
    margin:0 auto 8px; border-radius:999px; background:var(--line-sterk); }
  .pf-plus-menu .c-r65-menu-item,
  .pf-plus-menu .c-r65-menu-switch{ min-height:44px; }
  .pf-plus-houder .c-r65-menu-sluier{ background:rgba(10,57,54,.18); }
}

/* R111 herzien · de vierde teller, de chips en de Pro-regel op de wizard. */
.pf-wiz-sloteigen{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-wiz-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.pf-wiz-chip{ display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); background:var(--wit); border-radius:999px;
  padding:3px 10px; font-size:11px; color:var(--ink); }
.pf-wiz-chipdot{ width:8px; height:8px; border-radius:50%; flex:none; }
.pf-wiz-chipsamen{ font-size:11px; color:var(--ink-soft); }


/* ══ R119 · hoe zeker weten we dat de baat landt ══════════════════════════
   De aflezingsregel onder de hefboomnaam, het vragenblok eronder, de
   tweestapskaart en het paneel. Alles in de bestaande tokens; de amber van de
   markering is de amber die de blinde vlekken al dragen. */
.pf-baat{ --baat-amber-rug:rgba(217,166,60,.10); --baat-amber-ink:#8A6A18;
  --baat-amber-lijn:#A8862C; }

/* ── 119a · de aflezing onder de hefboomnaam ──────────────────────────────
   Eén regel, ingesprongen onder de naam, met middot-scheiders. Ze wrapt op die
   middots: "van 8% naar 60%" en "vandaag 34%" breken nooit binnenin, want dan
   staat er een getal zonder zijn eenheid op de volgende regel. */
.pf-bij-afl{ flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:4px 5px; margin:3px 0 0 14px; font:400 11.5px/1.45 var(--font-ui);
  color:var(--ink-soft); }
.pf-bij-afl:empty{ display:none; }
.pf-bij-afl > span{ white-space:nowrap; }
.pf-bij-afl-vraag{ white-space:normal !important; }
.pf-bij-afl-punt{ color:var(--line-ghost); }
.pf-bij-afl-vannaar{ color:var(--ink); }
/* De gemeten waarde draagt de ruit van een meting — dezelfde vorm als op de
   meetstrook, zodat ze dezelfde taal spreekt als de meetpunten elders. */
.pf-bij-afl-meting{ display:inline-flex; align-items:center; gap:5px;
  color:var(--geel); font-weight:var(--gew-vet); }
.pf-bij-afl-ruit{ width:7px; height:7px; flex:none; background:var(--geel);
  transform:rotate(45deg); border-radius:1px; }
.pf-bij-afl-op{ color:var(--ink-mist); font-size:10.5px; font-weight:400; }
.pf-bij-afl-op.is-weg{ border:0; background:none; padding:0; cursor:pointer;
  font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-bij-afl-op.is-weg:hover{ color:var(--petrol); text-decoration:underline; }

/* ── 119b · de vijf vragen ────────────────────────────────────────────────
   Eigen kop en eigen hairline: de bouwsteenchips hierboven beantwoorden een
   andere vraag, en onder elkaar zonder scheiding lezen ze als één lijst van
   eigenschappen. */
.pf-baat{ margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.pf-baat-kop{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.pf-baat-rol{ margin-left:auto; font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-baat-intro{ margin:4px 0 0; font:400 11px/1.5 var(--font-ui); color:var(--ink-soft); }
.pf-baat-lijst{ display:flex; flex-direction:column; margin-top:8px; }

.pf-baat-rij{ display:flex; align-items:flex-start; gap:12px;
  padding:9px 0; border-top:1px solid var(--line-zacht); }
.pf-baat-rij:first-child{ border-top:0; }
.pf-baat-tekst{ flex:1; min-width:0; }
.pf-baat-v{ display:block; font:400 12px/1.4 var(--font-ui); color:var(--ink); }
.pf-baat-v.is-kort{ display:none; }
.pf-baat-antwoord{ display:block; margin-top:3px;
  font:400 11px/1.45 var(--font-ui); color:var(--ink-soft); }
.pf-baat-woordmob{ display:none; }

.pf-baat-stand{ flex:none; display:flex; align-items:center; gap:8px; }
/* Trap en woord zijn samen één knop: ze zeggen hetzelfde en horen dus ook
   hetzelfde te openen — de kaart waarin de sponsor antwoordt. */
.pf-baat-hoogte{ display:flex; align-items:center; gap:9px; border:0;
  background:none; padding:2px 0; font:inherit; cursor:pointer; text-align:left; }
.pf-baat-woord{ width:100px; text-align:left;
  font:var(--gew-vet) 11.5px/1.35 var(--font-ui); color:var(--petrol); }
.pf-baat-hoogte:hover .pf-baat-woord{ color:var(--petrol-deep); text-decoration:underline; }
.pf-baat-hoogte:focus-visible{ outline:2px solid var(--petrol); outline-offset:3px;
  border-radius:6px; }

/* De trap: vijf vaste hoogtes. Onbeantwoord zijn het vijf stippelkaders in
   amber-ink — niet weten is minder dan vermoeden, en dat moet je zien zonder de
   andere vier te lezen. */
.pf-baat-trap{ display:flex; gap:2px; align-items:flex-end; height:23px; flex:none; }
.pf-baat-trap i{ display:block; width:6px; background:var(--line); box-sizing:border-box; }
.pf-baat-trap i:nth-child(1){ height:7px; }
.pf-baat-trap i:nth-child(2){ height:11px; }
.pf-baat-trap i:nth-child(3){ height:15px; }
.pf-baat-trap i:nth-child(4){ height:19px; }
.pf-baat-trap i:nth-child(5){ height:23px; }
.pf-baat-trap i.is-aan{ background:var(--petrol-deep); }
.pf-baat-trap[data-leeg] i{ background:none; border:1px dashed #A8862C; }
.pf-baat-trap.is-klein{ height:17px; }
.pf-baat-trap.is-klein i{ width:5px; }
.pf-baat-trap.is-klein i:nth-child(1){ height:5px; }
.pf-baat-trap.is-klein i:nth-child(2){ height:8px; }
.pf-baat-trap.is-klein i:nth-child(3){ height:11px; }
.pf-baat-trap.is-klein i:nth-child(4){ height:14px; }
.pf-baat-trap.is-klein i:nth-child(5){ height:17px; }

/* De markering van de laagste: een lichte amber rug tot de kaartranden. Niet
   rood en geen badge — er is niets mis, er is iets onbekend. */
.pf-baat-rij.is-laagst{ background:rgba(217,166,60,.10);
  margin:0 -14px; padding-left:14px; padding-right:14px; }
.pf-baat-rij.is-laagst .pf-baat-antwoord,
.pf-baat-rij.is-laagst .pf-baat-woord{ color:#8A6A18; font-weight:var(--gew-vet); }
.pf-baat-rij.is-laagst .pf-baat-hoogte:hover .pf-baat-woord{ color:#6E5413; }

/* ── 119c · de zekerheidkaart ─────────────────────────────────────────────
   Het venster draagt hier geen titel: wie het zegt staat bovenaan en niet de
   vraag, want het hele punt is dat dit niet het oordeel van de portfolio
   manager is. De kop houdt alleen het sluitkruis vast. */
.c-venster.is-baatkaart .c-venster-titelblok{ display:none; }
.c-venster.is-baatkaart .c-venster-kop{ border-bottom:0; padding:2px 14px 0; min-height:0; }
.c-venster.is-baatkaart .c-venster-body{ padding-top:4px; }
.c-venster.is-baatkaart .c-venster-voet{ justify-content:flex-start; gap:12px; align-items:center; }

.pf-baatkaart-wie{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-bottom:11px; border-bottom:1px solid var(--line-zacht); }
.pf-baatkaart-avatar{ width:22px; height:22px; border-radius:50%; flex:none;
  background:#EAF1F0; border:1px solid #CFE0DE; display:flex; align-items:center;
  justify-content:center; font:var(--gew-vet) 10px/1 var(--font-ui); color:var(--petrol); }
.pf-baatkaart-naam{ font:400 11.5px/1.4 var(--font-ui); color:var(--ink); }
.pf-baatkaart-rol{ border:0; background:none; padding:0; cursor:pointer;
  font:400 11.5px/1.4 var(--font-ui); color:var(--petrol); }
.pf-baatkaart-rol:hover{ color:var(--petrol-deep); text-decoration:underline; }
.pf-baatkaart-noot{ margin-left:auto; font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }

.pf-baatkaart-stap{ margin-top:13px; }
.pf-baatkaart-vraag{ margin:5px 0 0; font:var(--gew-vet) 19px/1.35 var(--font-kop);
  color:var(--petrol-dark); }
.pf-baatkaart-veld{ width:100%; box-sizing:border-box; background:var(--wit);
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin-top:8px;
  font:400 12.5px/1.5 var(--font-ui); color:var(--ink); resize:vertical; min-height:44px; }
.pf-baatkaart-veld:focus{ outline:0; border-color:var(--petrol); }
.pf-baatkaart-veldnoot{ margin-top:5px; font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }

/* De weddenschap is de vraag, één keer boven de rij. De inzet blijft per kaart
   staan: dat is het enige dat de vijf in het gesprek onderscheidt. */
.pf-baatkaart-wed{ margin-top:15px; padding-top:13px; border-top:1px solid var(--line-zacht); }
.pf-baatkaart-wedvraag{ margin:0; font:var(--gew-vet) 15px/1.4 var(--font-kop);
  color:var(--petrol-dark); }
.pf-baatkaart-niveaus{ display:flex; gap:7px; margin-top:11px; }
.pf-baatkaart-niveau{ flex:1; background:var(--wit); border:1px solid var(--line);
  border-radius:10px; padding:12px 8px; text-align:center; cursor:pointer;
  font:var(--gew-vet) 11.5px/1.35 var(--font-ui); color:var(--ink); }
.pf-baatkaart-niveauwoord{ display:block; }
.pf-baatkaart-inzet{ display:block; margin-top:3px; font-weight:400; color:var(--ink-mist); }
.pf-baatkaart-niveau:hover{ border-color:var(--line-sterk); }
.pf-baatkaart-niveau[aria-pressed="true"]{ background:var(--petrol-deep);
  border-color:var(--petrol-deep); color:var(--wit);
  box-shadow:0 6px 18px rgba(14,79,75,.28); }
.pf-baatkaart-niveau[aria-pressed="true"] .pf-baatkaart-inzet{ color:rgba(255,255,255,.72); }
/* Zonder antwoord valt er niets te wegen. */
.pf-baatkaart-niveaus[data-uit="ja"] .pf-baatkaart-niveau{ opacity:.42; cursor:not-allowed; }
.pf-baatkaart-niveaus[data-uit="ja"] .pf-baatkaart-niveau:hover{ border-color:var(--line); }
.pf-baatkaart-uitnoot{ margin-top:8px; font:400 10.5px/1.45 var(--font-ui); color:var(--ink-mist); }
.pf-baatkaart-uitnoot[hidden]{ display:none; }

.pf-baatkaart-volgende{ border:0; background:none; padding:0; cursor:pointer;
  font:400 11.5px/1.4 var(--font-ui); color:var(--petrol); }
.pf-baatkaart-volgende:hover{ color:var(--petrol-deep); text-decoration:underline; }
.pf-baatkaart-overslaan{ margin-left:auto; border:0; background:none; padding:0;
  cursor:pointer; font:400 10.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-baatkaart-overslaan:hover{ color:var(--ink-soft); text-decoration:underline; }

@media (max-width:699px){
  /* De rij houdt de staafjes maar verliest het aparte woordveld: het niveau
     zakt onder de vraag. Vijf kaarten naast elkaar zijn onleesbaar, dus de
     kiezer wordt vijf rijen van minstens 44px. */
  .pf-baat-rij{ align-items:center; }
  .pf-baat-v{ display:none; }
  .pf-baat-v.is-kort{ display:block; }
  .pf-baat-antwoord{ display:none; }
  .pf-baat-woordmob{ display:block; margin-top:2px;
    font:var(--gew-vet) 10.5px/1.4 var(--font-ui); color:var(--petrol); }
  .pf-baat-rij.is-laagst .pf-baat-woordmob{ color:#8A6A18; }
  /* De trap gaat naar links van de vraag: zij leest in één blik over de rijen
     heen en dat werkt alleen als ze op één lijn staan. De rij wordt daarvoor
     de flexcontainer en de standgroep lost op (display:contents), zodat de
     knop en de ⊕ zelf kunnen wisselen van plek. De knop houdt zijn woord, maar
     dat staat op smal onder de vraag — dus rest de trap. */
  .pf-baat-stand{ display:contents; }
  .pf-baat-rij{ display:flex; gap:10px; }
  .pf-baat-hoogte{ order:-1; padding:0; }
  .pf-baat-tekst{ order:0; }
  .pf-baat-rij .pf-plus-fab{ order:1; margin-left:auto; }
  .pf-baat-woord{ display:none; }
  .pf-baat-rij.is-laagst{ margin:0 -15px; padding-left:15px; padding-right:15px; }

  .pf-baatkaart-niveaus{ flex-direction:column; gap:0; }
  .pf-baatkaart-niveau{ display:flex; align-items:center; gap:10px; text-align:left;
    min-height:44px; border:0; border-bottom:1px solid var(--line-zacht);
    border-radius:0; padding:0; font-weight:400; font-size:12.5px; }
  .pf-baatkaart-inzet{ margin:0 0 0 auto; font-size:11px; }
  .pf-baatkaart-niveau[aria-pressed="true"]{ border-radius:8px; padding:0 11px;
    margin:0 -11px; font-weight:var(--gew-vet); box-shadow:none; }
}

/* ══ R119 v3 · twee tabs naast de lijst ══════════════════════════════════
   Dezelfde tabstrip als de organisatiekaart en het organisatieregister: één
   patroon in de app, niet drie. */
.pf-k1-tabs{ margin-bottom:14px; }

/* ── 119h · wat ze moeten opleveren ───────────────────────────────────── */
.pf-baten{ max-width:1160px; }
.pf-baten-kop{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.pf-baten-kopl{ flex:1; min-width:0; }
.pf-baten-titel{ margin:0; font:var(--gew-vet) 20px/1.3 var(--font-kop); color:var(--petrol-dark); }
.pf-baten-intro{ margin:6px 0 0; max-width:74ch;
  font:400 12px/1.6 var(--font-ui); color:var(--ink-soft); }
.pf-baten-export{ display:flex; gap:14px; flex:none; padding-top:4px; }
.pf-baten-exportknop, .pf-hb-exportknop{ border:0; background:none; padding:0; cursor:pointer;
  font:400 12px/1.5 var(--font-ui); color:var(--petrol); }
.pf-baten-exportknop:hover, .pf-hb-exportknop:hover{ color:var(--petrol-deep); text-decoration:underline; }

.pf-baten-sorteer{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.pf-baten-sorteerknop{ border:1px solid var(--line); background:var(--wit); border-radius:999px;
  padding:4px 13px; cursor:pointer; font:400 11.5px/1.5 var(--font-ui); color:var(--ink-soft); }
.pf-baten-sorteerknop:hover{ border-color:var(--line-sterk); }
.pf-baten-sorteerknop.is-aan{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:var(--wit); font-weight:var(--gew-vet); }
.pf-baten-telling{ margin:10px 0 0; font:400 11px/1.5 var(--font-ui); color:var(--ink-mist); }
.pf-baten-leeg{ margin:14px 0 0; font:400 12px/1.6 var(--font-ui); color:var(--ink-mist); }

/* Brede inhoud scrolt binnen haar eigen vak; het werkvlak nooit. */
.pf-baten-wrap{ margin-top:8px; overflow-x:auto; border:1px solid var(--line);
  border-radius:12px; background:var(--wit); }
.pf-baten-tabel{ width:100%; border-collapse:collapse; }
.pf-baten-th{ text-align:left; padding:10px 14px; white-space:nowrap;
  border-bottom:1px solid var(--line);
  font:var(--gew-vet) 9.5px/1.4 var(--font-ui); letter-spacing:.07em; color:var(--ink-mist); }
.pf-baten-groep > td{ padding:12px 14px 6px; border-top:1px solid var(--line-zacht); }
.pf-baten-tabel tbody tr:first-child > td{ border-top:0; }
.pf-baten-groepnaam{ font:var(--gew-vet) 12.5px/1.4 var(--font-ui); color:var(--petrol-deep); }
.pf-baten-groepmeta{ margin-left:6px; font:400 11px/1.4 var(--font-ui); color:var(--ink-mist); }
/* De tabel is zo vers als de laatste foto, en dat hoort zichtbaar te zijn. */
/* R119 · de leeftijd van de foto stond hier rechts uitgelijnd in de groepsrij,
   en dat is precies onder de kolomkop HEFBOOM: ze las als een waarde in die
   kolom. Ze staat nu direct achter de datum waar ze iets over zegt, op de
   regel zelf · met dezelfde amber, want dat is wat ze zegt. */
.pf-baten-fotometa{ display:block; margin-top:2px;
  font:400 11px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-baten-fotometa[data-oud]{ color:#8A6A18; font-weight:var(--gew-vet); }
/* Een hefboomgroep zonder hefboom draagt geen naam maar een stand. Ze staat
   achteraan en in de mist: signaal, geen restgroep. */
.pf-baten-groepnaam.is-geen{ color:var(--ink-mist); font-style:italic; }
.pf-baten-rij > td{ padding:9px 14px; vertical-align:top;
  border-top:1px solid var(--line-zacht); font:400 12px/1.5 var(--font-ui); color:var(--ink); }
.pf-baten-doel{ min-width:240px; }
.pf-baten-doeltekst{ display:block; }
/* Staat de initiatiefnaam al op de rij, dan is díe de link. Twee kale pijltjes
   naast elkaar zijn niet te onderscheiden. */
.pf-baten-doelinit{ display:block; margin-top:2px; border:0; background:none; padding:0;
  cursor:pointer; text-align:left; font:400 10.5px/1.4 var(--font-ui); color:var(--petrol); }
.pf-baten-doelinit:hover{ text-decoration:underline; }
.pf-baten-wegen{ display:inline-flex; gap:6px; margin-left:6px; }
.pf-baten-weg{ border:0; background:none; padding:0; cursor:pointer;
  font:400 10.5px/1.4 var(--font-ui); color:var(--petrol); }
.pf-baten-weg:hover{ text-decoration:underline; }
.pf-baten-wegen{ display:inline-flex; gap:10px; flex-wrap:wrap; }
/* De eenheid staat achter het paar in ghost: zonder haar zien veertig teams en
   veertig procent er hetzelfde uit. */
.pf-baten-eenheid{ color:var(--ink-mist); font-weight:400; }
/* Van → naar in de eenheid zoals ze geschreven is: geen omrekening, geen
   normalisatie, en dus ook geen kolom die ze vergelijkbaar doet lijken. */
.pf-baten-vannaar, .pf-baten-vandaag{ white-space:nowrap; }
.pf-baten-vannaar b, .pf-baten-vandaag b{ font-weight:var(--gew-vet); }
.pf-baten-op{ color:var(--ink-mist); font-size:11px; }
.pf-baten-niets{ color:var(--line-ghost); }
/* De enige kolom die een oordeel lijkt en het niet is: dit is een feit over
   herkomst. Vandaar de vorm van R118 — een ruit voor geteld, een ring voor
   geschat, een lege ring voor niets. */
.pf-baten-teken{ display:inline-block; width:8px; height:8px; margin-right:6px;
  box-sizing:border-box; vertical-align:baseline; }
.pf-baten-teken[data-stand="gemeten"]{ background:var(--geel); transform:rotate(45deg); }
.pf-baten-teken[data-stand="geschat"]{ border:1.5px dotted var(--geel); border-radius:50%; }
.pf-baten-teken[data-stand="niets"]{ border:1.5px dotted var(--line-ghost); border-radius:50%; }
.pf-baten-stand{ font-weight:var(--gew-vet); }
.pf-baten-waarom{ margin-left:6px; color:var(--ink-mist); }
.pf-baten-geenhefboom{ font-style:italic; color:var(--line-ghost); }

.pf-baten-conclusie{ margin-top:16px; border-left:3px solid var(--petrol);
  padding:10px 0 2px 14px; max-width:78ch; }
.pf-baten-conclusieveld, .pf-hb-conclusie{ width:100%; box-sizing:border-box; margin-top:6px;
  background:var(--cream2); border:1px solid var(--line-zacht); border-radius:9px;
  padding:10px 12px; resize:vertical;
  font:400 12.5px/1.6 var(--font-ui); color:var(--ink); }
.pf-baten-conclusieveld:focus, .pf-hb-conclusie:focus{ outline:0; border-color:var(--petrol); }

/* ── 119g · het beeld ─────────────────────────────────────────────────── */
.pf-hb{ max-width:1160px; }
.pf-hb-kop{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.pf-hb-kopl{ flex:1; min-width:0; }
.pf-hb-titel{ margin:0; font:var(--gew-vet) 20px/1.3 var(--font-kop); color:var(--petrol-dark); }
.pf-hb-intro{ margin:6px 0 0; max-width:74ch;
  font:400 12px/1.6 var(--font-ui); color:var(--ink-soft); }
.pf-hb-export{ display:flex; gap:14px; flex:none; padding-top:4px; }

/* De hefboom is een filter, niet het kader. */
.pf-hb-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.pf-hb-chip{ display:inline-flex; align-items:baseline; gap:6px;
  border:1px solid var(--line); background:var(--wit); border-radius:999px;
  padding:4px 13px; cursor:pointer; font:400 11.5px/1.5 var(--font-ui); color:var(--ink-soft); }
.pf-hb-chip:hover{ border-color:var(--line-sterk); }
.pf-hb-chip.is-aan{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:var(--wit); font-weight:var(--gew-vet); }
.pf-hb-chip.is-stippel{ border-style:dashed; }
/* Een filter dat gegarandeerd niets oplevert is een val en geen keuze. */
.pf-hb-chip.is-uit{ opacity:.45; cursor:not-allowed; }
.pf-hb-chip.is-uit:hover{ border-color:var(--line); }
.pf-hb-kiezer{ font-weight:var(--gew-vet); }

/* Vanaf zeven hefbomen één keuzelijst: een tweede rij chips of horizontaal
   scrollen zet de helft buiten beeld, en dan is het geen overzicht meer. */
.pf-hb-kieslaag{ position:fixed; inset:0; z-index:60; }
.pf-hb-kieslijst{ position:fixed; z-index:61; min-width:240px; max-width:340px;
  max-height:60vh; overflow-y:auto; background:var(--kaart, #FAF8F5);
  border:1px solid var(--line-sterk); border-radius:12px;
  box-shadow:0 20px 48px rgba(10,57,54,.22); padding:6px; }
.pf-hb-kiesregel{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  width:100%; border:0; background:none; border-radius:8px; padding:8px 10px; cursor:pointer;
  text-align:left; font:400 12px/1.4 var(--font-ui); color:var(--ink); }
.pf-hb-kiesregel:hover{ background:var(--cream2); }
.pf-hb-kiesregel.is-nu{ background:#EAF1F0; color:var(--petrol-deep); font-weight:var(--gew-vet); }
.pf-hb-kiesregel.is-uit{ opacity:.45; cursor:not-allowed; }
.pf-hb-kiesregel.is-uit:hover{ background:none; }
.pf-hb-kieskop{ margin-top:4px; padding:8px 10px 4px; border-top:1px solid var(--line-zacht);
  font:var(--gew-vet) 9.5px/1.4 var(--font-ui); letter-spacing:.07em; color:var(--ink-mist); }
.pf-hb-chiptel{ font-size:10.5px; color:var(--line-ghost); }
.pf-hb-chip.is-aan .pf-hb-chiptel{ color:rgba(255,255,255,.7); }

.pf-hb-plaat{ margin-top:12px; border:1px solid var(--line); border-radius:12px;
  background:var(--wit); padding:14px 16px 16px; }
.pf-hb-plaatkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid var(--line-zacht); }
.pf-hb-telling{ font:var(--gew-vet) 13px/1.4 var(--font-kop); color:var(--petrol-dark); }
.pf-hb-onderschrift{ font:400 11.5px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-hb-zonderplan{ margin-left:auto; max-width:38ch; text-align:right;
  font:400 11px/1.45 var(--font-ui); color:var(--ink-mist); }

.pf-hb-romp{ display:flex; gap:22px; align-items:flex-start; margin-top:12px; }
.pf-hb-vlak{ position:relative; flex:1 1 640px; min-width:0; }
.pf-hb-svg{ width:100%; height:auto; display:block; overflow:visible; }
.pf-hb-leeg{ flex:1; margin:20px 0; font:400 12px/1.6 var(--font-ui); color:var(--ink-mist); }
.pf-hb-zij{ flex:0 0 280px; }
/* De kop draagt de stand: de hele plaat, een hefboom of één initiatief. */
.pf-hb-zijkop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pf-hb-zijwie{ font:400 11px/1.4 var(--font-ui); color:var(--ink-mist); }
.pf-hb-zijchip{ display:inline-flex; align-items:center; gap:6px;
  background:#EAF1F0; border:1px solid #CFE0DE; border-radius:999px; padding:2px 6px 2px 10px;
  font:var(--gew-vet) 11px/1.5 var(--font-ui); color:var(--petrol-deep); }
.pf-hb-zijx{ border:0; background:none; padding:0 2px; cursor:pointer;
  font:400 10px/1 var(--font-ui); color:var(--petrol); }
.pf-hb-zijx:hover{ color:var(--rood); }
.pf-hb-zonderzone{ margin:10px 0 0; font:400 10.5px/1.5 var(--font-ui); color:var(--line-ghost); }
.pf-hb-leesregel{ margin:8px 0 0; font:400 10.5px/1.5 var(--font-ui); color:var(--ink-mist); }

/* Hover markeert met een ring, nooit met vergroting: dat verschuift de positie,
   en die betekent iets. Een verborgen label komt terug in de hint. */
.pf-hb-punt{ cursor:default; }
.pf-hb-punt:focus{ outline:none; }
.pf-hb-punt.is-aan circle:last-of-type,
.pf-hb-punt:focus-visible circle:last-of-type{ stroke:rgba(14,79,75,.18); stroke-width:3; }
/* Een weggevallen label komt terug bij zijn eigen punt. Alle verborgen labels
   tegelijk tonen zet de botsing die de ladder net oploste gewoon terug. */
.pf-hb-svg .pf-hb-labelg[data-verborgen]{ transition:opacity .12s ease; }

/* Het weggevallen label komt terug zolang je op zijn punt staat, en wat
   eronder zat wijkt zolang naar ghost. Geen zwevend kaartje: dat dekt de stip
   af en belooft een weg die er niet is. */
.pf-hb-labelg.is-wijkt{ opacity:.22; }
.pf-hb-punt{ cursor:pointer; }
.pf-hb-punt.is-gekozen circle:last-of-type{ stroke:var(--petrol); stroke-width:2; }

/* Onder 700px wordt de plaat een lijst, gesorteerd op de as die je koos. */
.pf-hb-lijst{ display:none; }
.pf-hb-rij{ display:flex; align-items:center; gap:10px; min-height:44px;
  border-bottom:1px solid var(--line-zacht); }
.pf-hb-rijtekst{ flex:1; min-width:0; }
.pf-hb-rijnaam{ display:block; font:400 12px/1.4 var(--font-ui); color:var(--ink); }
.pf-hb-rijdatum{ display:block; font:400 10.5px/1.4 var(--font-ui); color:var(--line-ghost); }
.pf-hb-merk{ display:block; font:var(--gew-vet) 10.5px/1.4 var(--font-ui); color:#8A6A18; }
.pf-hb-chiplicht{ flex:none; border:1px solid var(--line); border-radius:999px;
  padding:2px 9px; font:400 10.5px/1.5 var(--font-ui); color:var(--ink-soft); }

/* De tekstlink op de hefboomkaart: één link, geen kleine plaat. */
.pf-hefboom-naarbeeld{ display:block; margin-top:8px; border:0; background:none; padding:0;
  cursor:pointer; font:400 11px/1.4 var(--font-ui); color:var(--petrol); }
.pf-hefboom-naarbeeld:hover{ color:var(--petrol-deep); text-decoration:underline; }

@media (max-width:699px){
  /* De lijst is hier de plaat, dus staat ze bovenaan; legenda en
     conclusietekst zakken eronder. */
  .pf-hb-plaat{ display:flex; flex-direction:column; }
  .pf-hb-plaatkop{ order:0; }
  .pf-hb-lijst{ order:1; display:block; margin-top:10px; }
  .pf-hb-romp{ order:2; flex-direction:column; gap:14px; }
  .pf-hb-zonderzone{ order:3; }
  .pf-hb-vlak{ display:none; }
  .pf-hb-zij{ flex:1 1 auto; width:100%; }
  .pf-hb-filter{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pf-hb-chip{ flex:none; }
  .pf-hb-zonderplan{ margin-left:0; text-align:left; max-width:none; }
  /* De batentabel wordt per baat een kaartje onder de initiatiefkop. */
  .pf-baten-wrap{ border:0; border-radius:0; background:none; overflow:visible; }
  .pf-baten-tabel, .pf-baten-tabel tbody, .pf-baten-rij, .pf-baten-rij > td,
  .pf-baten-groep, .pf-baten-groep > td{ display:block; width:auto; }
  .pf-baten-tabel thead{ display:none; }
  .pf-baten-rij{ border:1px solid var(--line); border-radius:10px; background:var(--wit);
    padding:10px 12px; margin:0 0 8px; }
  .pf-baten-rij > td{ border:0; padding:2px 0; }
  .pf-baten-doel{ min-width:0; }
  .pf-baten-groep > td{ padding:10px 0 4px; }
}
@media (prefers-reduced-motion:reduce){
  .pf-hb-labelg, .pf-hb-punt, .pf-hb-chip, .pf-baten-sorteerknop{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   R120 · SCHERMWINST OP EEN TELEFOON
   ═══════════════════════════════════════════════════════════════════
   Op een toestel van 360x640 stond er boven de eerste kaart 273px vaste
   schil: de voorbeeldband (88), de kopregel (183) en de tabstrook (50+14),
   met onderaan nog de tabbalk (54). Dan blijft er minder dan de helft van
   het scherm over voor waar het om gaat, en op een korter toestel minder
   dan een derde.

   Geen van de stukken verdwijnt hier · ze gaan alleen op hun mobiele maat
   staan, met de conventies die de app zelf al draagt: een strook die
   zijwaarts schuift in plaats van te wrappen, en krappere lucht waar de
   lucht van een desktopscherm komt. Wat een keuze van de ontwerper vraagt
   (de kopregel laten meescrollen met de inhoud) staat hier bewust niet in.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width:699px){
  /* de kopregel: dezelfde inhoud, de lucht van een telefoon */
  .c-kopregel{ padding:var(--sp-5) var(--sp-8); }
  .portfolio-modus .c-kopregel{ row-gap:6px; }
  /* De bestandsnaam bleef hier bijna 16px kleiner staan · en dat kostte het
     tikdoel: rh-missie ving het meteen, de deur naar het opslagvel was nog
     28px hoog waar 44 de afspraak is. De naam houdt dus zijn maat. Wat wél
     weg mocht is de lucht eromheen, en die zit in de kopregel hierboven. */
  .c-kopregel-naam{ min-height:44px; display:inline-flex; align-items:center; }

  /* de tabstrook van een kernkaart: één regel die schuift, zoals de
     tabstrook van de kopregel op mobiel. Labels van twee regels lazen als
     afgekapte tekst; nu staan ze voluit en zegt de fade dat er meer is. */
  .pf-org-tabs{
    flex-wrap:nowrap; gap:var(--sp-6); margin-bottom:10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .pf-org-tabs::-webkit-scrollbar{ display:none; }
  /* 44px blijft het tikdoel dat de app voor een mobiele tab aanhoudt */
  .pf-org-tab{ flex:none; white-space:nowrap; min-height:44px; align-items:center; }

  /* de kaart zelf: op een smal scherm is 18px rand een derde van een regel */
  .pf-k1-kaart, .pf-org-kaart, .pf-paneel{ padding-left:14px; padding-right:14px; }
  .werkvlak-inhoud{ padding-top:10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   R120 · HET AMBITIEVELD OP DE CRITERIUMRIJ (CHANGE PLAN)
   ═══════════════════════════════════════════════════════════════════
   Stap 3/3 van De kern, de kolom "draagt bij aan ambitie". Het suggestie-
   patroon komt van het namenveld in stap 1 van het kompas (.c-naamac-*) en
   wordt hier overgenomen, niet nagebouwd: dezelfde lijst, dezelfde optie, met
   twee regels per suggestie erbij. Wat hier eigen is, is de tweede regel en de
   drie standen op de rij.
   ─────────────────────────────────────────────────────────────────── */
.c-ambitie{ position:relative; }
.c-ambitie-inp{ width:100%; }
.c-ambitie-lijst{ left:0; right:0; }
/* De grijze contextregel boven de lijst: lezen, niet kiezen. Geen knop, geen
   hover, geen cursor die iets anders belooft. */
.c-ambitie-context{
  display:block; padding:7px 10px 6px; font-size:10px; line-height:1.45;
  color:var(--ink-mist); cursor:default;
}
.c-ambitie-groepkop{
  display:block; padding:8px 10px 5px; font-size:10px; color:var(--ink-mist);
  border-top:1px solid var(--line-zacht); margin-top:4px;
}
.c-ambitie-optie{ display:flex; align-items:flex-start; gap:9px; text-align:left; }
.c-ambitie-kolom{ display:block; min-width:0; }
/* Twee regels per suggestie: de naam, en eronder de aflezing zoals ze bij
   vertrek stond. Daardoor kiest de change manager op inhoud en niet op klank. */
.c-ambitie-aflezing{ display:block; margin-top:2px; line-height:1.4; }
.c-ambitie-bol{
  flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--petrol); margin-top:6px;
}
/* De eigen-tekstregel staat altijd onderaan, met een stippelbol: wat je zelf
   schrijft is geen keuze uit het portfolio. */
.c-ambitie-bol.is-eigen{ background:none; border:1.5px dashed var(--line-sterk); }

/* ── de drie standen op de rij ──────────────────────────────────────── */
.c-ambitie-gekozen{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
/* De koppel-chip die de app overal al heeft. Zonder pijl · in deze app is er
   geen portfolio om heen te gaan, en een aanwijzer die zichzelf niet kan
   waarmaken is erger dan geen aanwijzer. */
.c-ambitie-chip{ cursor:default; max-width:100%; }
.c-ambitie-chip:hover{ background:#EAF1F0; }
.c-ambitie-chip .c-ambitie-bol{ margin-top:0; }
.c-ambitie-herkomst{ font-size:10.5px; color:var(--ink-mist); padding-left:2px; }
.c-ambitie-wijzig{
  border:0; background:none; padding:0; font:inherit; font-size:10.5px;
  color:var(--petrol-deep); cursor:pointer; text-decoration:underline;
}
/* Een eigen ambitie is geen fout: amber, nooit rood, en geen icoon. */
.c-ambitie-noot{ display:block; margin-top:3px; font-size:10.5px; color:#8A6A18; }
.c-ambitie-leeg{ color:var(--line-ghost); }

@media (max-width:699px){
  /* de lijst opent onder het veld, rijen van minstens 44px, tweede regel blijft */
  .c-ambitie-optie{ min-height:44px; align-items:center; }
}

/* R121 · 3.3 · de ⊕ op een mijlpaal- of metingregel in stap 2 van de wizard.
   Hij staat rechts op de regel, zoals op de groepsregel erboven: één plek per
   rij, en niet twee verschillende plekken voor dezelfde handeling. */
.pf-wiz-mprij{ position:relative; }
.pf-wiz-mprij .pf-plus-fab{ margin-left:auto; flex:none; }

/* R121 · 2.2 · de methodenset op Werkafspraken. Zelfde rijvorm als de
   randvoorwaarden erboven: naam links op een vaste maat, de beschrijving
   ernaast die meegeeft, en rechts de stille dingen. Eén kaart leest zo als de
   andere, en dat is het hele punt van dit scherm. */
.pf-k3-methode{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding:6px 0; }
.pf-k3-methode.is-ghost{ border-bottom:0; padding-top:8px; }
input.pf-k3-mt-naam{ flex:none; width:190px; font-size:12px; }
input.pf-k3-mt-tekst{ flex:1 1 240px; width:auto; min-width:180px; font-size:11.5px; }
/* De versie staat er stil bij: geen waarschuwing, geen stand · het nummer
   waaraan een changeplan straks ziet met welke beschrijving het vertrok. */
.pf-k3-mt-versie{ flex:none; font-size:10px; color:var(--ink-mist);
  font-variant-numeric:tabular-nums; }

/* R121 · 2.2 · de uit de set gekopieerde methodetekst staat zichtbaar maar op
   slot: de chip draagt de naam, en de vraag hier is hoe er geteld is. Wie hem
   wil aanpassen zegt dat met "eigen aanpak", en houdt de tekst als
   vertrekpunt · dan is het zijn eigen methode, en dat hoort een keuze te zijn
   en geen toetsaanslag. */
.bl-veld.is-opslot{ background:var(--cream2); color:var(--ink-soft); cursor:default; }
.bl-veld.is-opslot:focus{ outline:none; border-color:var(--line); }

/* ═══════════════════════════════════════════════════════════════════
   R122 · HET SPONSORGESPREK
   ═══════════════════════════════════════════════════════════════════
   De vijf vragen hadden geen drager. Boven de lijst staat nu het gesprek
   waarin je zit · één sponsor, één datum · en op elke vraag wat er eerder
   stond. Geen nieuw vlak: dezelfde regelvorm als de rest van het paneel.
   ─────────────────────────────────────────────────────────────────── */
.pf-baat-gesprek{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--line-zacht);
}
.pf-baat-gesprek-wie{ font:var(--gew-vet) 12px/1.4 var(--font-ui); color:var(--petrol-deep); }
.pf-baat-gesprek-datum{ font-size:11px; color:var(--ink-soft); }
.pf-baat-gesprek-tel{ font-size:10.5px; color:var(--ink-mist); }
/* Zonder gesprek is de balk een uitnodiging, geen tekort. */
.pf-baat-gesprek-geen{ font-size:11.5px; color:var(--ink-mist); font-style:italic; }
.pf-baat-gesprek-nieuw{
  margin-left:auto; flex:none; border:0; background:none; padding:0;
  font:inherit; font-size:11px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); cursor:pointer; text-decoration:underline;
}
.pf-baat-gesprek-nieuw:hover{ color:var(--petrol); }
/* Wat er op déze vraag eerder stond. Mist, want het is context bij het
   antwoord en niet het antwoord zelf. */
.pf-baat-was{ display:block; margin-top:2px; font-size:10.5px; color:var(--ink-mist); }

.pf-baatgesprek{ display:flex; flex-direction:column; gap:12px; }
/* Het spoor op de kaart: elke stand die deze vraag had, nieuwste boven. */
.pf-baatkaart-spoor{ margin-top:14px; padding-top:10px; border-top:1px solid var(--line-zacht); }
.pf-baatkaart-spoorrij{
  display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;
  padding:4px 0; font-size:11px; color:var(--ink-soft);
}
.pf-baatkaart-spoorrij + .pf-baatkaart-spoorrij{ border-top:1px solid var(--line-zacht); }
.pf-baatkaart-spoorrij.is-nu .pf-baatkaart-spoorwoord{ color:var(--ink); font-weight:var(--gew-vet); }
.pf-baatkaart-spoorwoord{ flex:none; }
.pf-baatkaart-spoordatum{ flex:none; color:var(--ink-mist); font-size:10.5px; }
.pf-baatkaart-spoorwie{ flex:none; color:var(--ink-mist); font-size:10.5px; }
.pf-baatkaart-spoortekst{ flex:1 1 100%; color:var(--ink-mist); font-size:10.5px; line-height:1.4; }

/* ══ R121 · het initiatiefscherm ademt weer ════════════════════════════════
   Eén scherm: de initiatief-uitklap. Geen nieuwe velden en geen nieuwe
   objecten · alleen minder ruimte voor wat er niet is, zodat de vijf
   zekerheidsvragen uit R119 erin passen zonder dat het blok hoger wordt. */

/* ── randvoorwaarden: twee groepen ───────────────────────────────────────
   Wat afgetast is staat boven met zijn tekst, wat leeg is eronder als kale
   naam. De scheidingsregel draagt het aantal en verder niets: geen noemer,
   want dit is geen lijst die af moet. */
/* De teller staat aan de rechterrand van de kopregel, zoals in het frame:
   links waar het blok over gaat, rechts hoeveel ervan er ligt. */
.pf-rv-kop .pf-rv-tel{ margin-left:auto; }
/* De borging zonder eigen antwoord staat los boven de streep: ze is gevonden,
   niet geschreven. Vandaar de stip in de rand en verder de kaart die ze al was. */
.pf-rv-af{ display:flex; align-items:flex-start; gap:9px; padding:2px 0 7px; }
.pf-rv-af > .pf-rv-dot{ margin-top:6px; }
.pf-rv-af > .pf-checkpunt-borging{ flex:1; min-width:0; margin:0; }
.pf-rv-scheiding{ display:flex; align-items:center; gap:9px; margin:11px 0 1px; }
.pf-rv-scheiding > span{ flex:none; font:400 10px/1.35 var(--font-ui);
  letter-spacing:.06em; color:var(--ink-mist); }
.pf-rv-scheiding > i{ flex:1; height:1px; background:var(--line-zacht); }

/* Het antwoord onder de naam. De aftastvraag staat niet meer op het scherm ·
   hij is de placeholder van het veld dat opengaat. */
.pf-rv-antwoord{ display:block; margin-top:2px;
  font:400 11px/1.45 var(--font-ui); color:var(--ink); }
/* Wat er staat wanneer een geopend veld leeg dichtgaat: niets, maar wel op
   dezelfde plek, zodat de volgende keer weer hier opent. */
.pf-rv-leegplek{ display:none; }

/* Drie standen. De middelste bestaat omdat een veld dat openstaat nog geen
   antwoord is; zonder haar springt de stip van leeg naar af op het moment dat
   je begint te typen, en dat klopt niet. */
.pf-rv-dot[data-stand=leeg]{ border:1.5px dashed var(--line-sterk); background:none; }
.pf-rv-dot[data-stand=bezig]{ border:1.5px dashed #A8862C; background:none; }
.pf-rv-dot[data-stand=af]{ border:0; background:var(--petrol); }
.pf-rv-rij.is-af .pf-rv-naam{ color:var(--petrol-deep); }
.pf-rv-rij:not(.is-af) .pf-rv-naam{ font-weight:400; color:var(--ink-soft); }
.pf-rv-rij:not(.is-af):hover .pf-rv-naam{ color:var(--petrol); }
.pf-rv-rij:focus-visible{ outline:2px solid var(--petrol); outline-offset:2px;
  border-radius:6px; }

/* ── begeleiding: de vier pillen achter "wijzig ▾" ───────────────────────
   Vier wachtende pillen zijn vier keer dezelfde vraag. Gekozen staat er één,
   ongekozen staat er een regel die zegt waar je hem maakt. */
.pf-init-niveau{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:7px; }
.pf-init-niveau-woord{ font-size:10.5px; color:var(--ink-mist); }
.pf-init-niveau-leeg{ font-size:11.5px; color:var(--line-ghost); }
.pf-init-wijzig{ border:0; background:none; padding:0; font:inherit;
  font-size:11px; color:var(--petrol); cursor:pointer; }
.pf-init-wijzig:hover{ color:var(--petrol-deep); text-decoration:underline; }
.pf-init-pillen{ display:flex; gap:6px; flex-wrap:wrap; flex:1 1 100%;
  margin-top:1px; }

/* Eén amberblok, en alleen bij een afwijking. */
.pf-init-afwijking{ margin-top:8px; padding:8px 10px; border-radius:var(--r-s);
  background:rgba(217,166,60,.10); gap:5px; }
.pf-init-afwijking-zin{ margin:0; font:400 10.5px/1.5 var(--font-ui); color:var(--ink); }
.pf-init-afwijking-zin b{ font-weight:var(--gew-vet); color:#8A6A18; }
input[type=text].pf-init-afwijking-veld{ width:100%; box-sizing:border-box;
  background:var(--wit); }

/* ── waar dit aan bijdraagt: acht chips achter "kies ▾" ──────────────────
   De hefboomregel vraagt hetzelfde in één regel. Twee talen voor hetzelfde is
   er één te veel, dus staan de bouwstenen er pas zodra je erom vraagt. */
.pf-bij-regel{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; }
.pf-bij-leeg{ font-size:11.5px; color:var(--line-ghost); }
.pf-bij-punt{ color:var(--line-sterk); font-size:11.5px; }
.pf-bij-kies{ border:0; background:none; padding:0; font:inherit;
  font-size:11px; color:var(--petrol); cursor:pointer; }
.pf-bij-kies:hover{ color:var(--petrol-deep); text-decoration:underline; }

/* ── de vijf vragen vóór er een hefboom is ───────────────────────────────
   Vijf stippelstaafjes en één regel: ze zeggen dat de vragen komen, niet dat
   er iets ontbreekt. */
.pf-baat-wacht{ opacity:.55; }
.pf-zeker-wacht{ display:flex; align-items:center; gap:9px; margin-top:8px; }
.pf-zeker-wachtzin{ font:400 11px/1.45 var(--font-ui); color:var(--ink-mist); }
.pf-baat-trap.is-wacht{ height:17px; }
.pf-baat-trap.is-wacht i{ width:5px; }
.pf-baat-trap.is-wacht i:nth-child(1){ height:5px; }
.pf-baat-trap.is-wacht i:nth-child(2){ height:8px; }
.pf-baat-trap.is-wacht i:nth-child(3){ height:11px; }
.pf-baat-trap.is-wacht i:nth-child(4){ height:14px; }
.pf-baat-trap.is-wacht i:nth-child(5){ height:17px; }

@media (max-width:699px){
  .pf-rv-rij{ min-height:44px; align-items:center; }
  /* Twee tekstknoppen die op de telefoon de enige weg naar de pillen en de
     bouwstenen zijn. 32px las als genoeg omdat de tekst klein is · het
     tikformaat van de app is 44, en dat hangt aan de duim, niet aan de
     letter. */
  .pf-init-wijzig, .pf-bij-kies{ min-height:44px; padding:0 2px; }
}

/* ══ R123 · de foto-wizard woont in een venster ════════════════════════════
   Ze had de schaduw en de maat van een venster maar stond in het werkvlak, en
   je kwam er binnen vanuit een venster. Nu is het één laag verder in plaats
   van een heel scherm verder.

   Wat hier staat is uitsluitend de naad: het skelet van het venster draagt de
   kop, de voet en het sluiten, en de wizard draagt haar eigen segmenten, lijf
   en voetbalk. De twee mogen elkaars ruimte niet dubbel zetten. */
.pf-wiz-venster .c-venster-body{ padding:0; gap:0; }
.pf-wiz-kaart.is-invenster{ border:0; border-radius:0; box-shadow:none;
  max-width:none; background:none; overflow:visible; }
.pf-wiz-venster .pf-wiz-body{ padding:18px 24px 20px; }
/* De segmentbalk hoort tegen de kopband aan te staan, zoals ze in de kaart
   tegen .pf-wiz-kop stond. */
.pf-wiz-venster .pf-wiz-segmenten{ margin:0; }
/* De voetbalk brengt haar eigen rand en rug mee; het venster deed dat al. Eén
   van de twee, anders staat er een dubbele lijn en een rand om niets. */
.pf-wiz-venster .c-venster-voet{ padding:0; background:none; border-top:0; }
.pf-wiz-venster .pf-wiz-voet{ flex:1 1 auto; margin:0; border-radius:0; }
/* De kaart hield zelf 900px aan, en stap 2 en 3 leggen twee kolommen naast
   elkaar · op de 620px van een breed venster worden dat twee kokers. Dus
   breder, en op een smal scherm valt hij terug op wat het skelet doet. */
.pf-wiz-venster.c-venster.is-breed{ width:min(900px, calc(100vw - 48px)); max-width:900px; }

@media (max-width:699px){
  .pf-wiz-venster .pf-wiz-body{ padding:14px 15px 16px; }
  .pf-wiz-venster .pf-wiz-voet{ padding:12px 15px; }
}

/* De export-wizard woont in hetzelfde venster-skelet als de foto-wizard: het
   is dezelfde soort handeling op dezelfde rij. Alleen de naad, niets meer. */
.pf-cp-expvenster.c-venster.is-breed{ width:min(760px, calc(100vw - 48px)); max-width:760px; }
.pf-cp-expvenster .pf-cp-exp{ display:flex; flex-direction:column; gap:14px; }
.pf-cp-expvenster .pf-cp-exp-onderwerp{ display:none; }

/* ── R125 · de golven zonder groep staan er met hun naam ───────────────────
   Er stond een getal met een knop "open het initiatief ▸", en die knop
   beloofde een plek die nergens bestaat · de uitklap toont golven niet. De
   namen staan er nu zelf, en één regel eronder zegt waar ze vandaan komen en
   bij wie je meer vraagt. De weg is een mens, want hier valt niets te zetten.

   De ghost-rij was een flex-rij met één tekst en een knop ernaast. Nu draagt
   ze twee regels onder elkaar · het aantal en daaronder de namen · dus staat
   ze in kolom. Anders loopt "2 golven zonder groep" in de smalle kolom om en
   staan de namen ernaast, en dan lezen ze als een tweede kolom in plaats van
   als wat ze zijn. */
/* Vaste hoogtes, en aan beide kanten dezelfde: de namenkolom en de sporenkolom
   zijn twee losse rasters die rij voor rij op één hoogte moeten blijven. Een
   rij die links meegroeit met zijn inhoud schuift alles eronder scheef. */
.pf-naamcel.is-ghostregel.pf-golf-ghostrij{ height:44px;
  flex-direction:column; align-items:flex-start; justify-content:center; gap:1px;
  padding-top:0; padding-bottom:0; }
.pf-spoorcel.is-golfghost{ height:44px; }
.pf-spoorcel.is-golfbron{ height:22px; }
.pf-golf-ghostrij .pf-golf-ghost{ -webkit-line-clamp:1; }
.pf-golf-ghostnamen{ display:block; max-width:100%; font-size:10.5px;
  line-height:1.4; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pf-naamcel.is-ghostregel.pf-golf-bronrij{ height:22px; padding-top:0; padding-bottom:0; }
.pf-golf-bron{ display:block; font-size:10px; line-height:1.4; color:var(--ink-mist); }

/* R126 · het derde kanaal, genoemd waar het ertoe doet. Stap 4 van de
   foto-wizard draagt rijen over velden die aan béide kanten bestaan; dit blok
   gaat over wat alleen het portfolio ziet. Hetzelfde vlak als de slotregel
   eronder, maar met een terra rand links: het is geen samenvatting van wat je
   zojuist deed, het is een plek waar nog iets ligt. */
.pf-wiz-omgeving{ margin-top:16px; background:var(--cream2); border-radius:10px;
  border-left:3px solid var(--terra); padding:12px 14px; }
.pf-wiz-omgevingzin{ margin:4px 0 0; font-size:12.5px; color:var(--ink); }
.pf-wiz-omgevingdelen{ margin:4px 0 0; font-size:11px; color:var(--ink-mist); }
.pf-wiz-omgeving .pf-blok-naar{ margin:8px 0 0; display:inline-block; }

/* R127 · de suggestielijst op een operationeel succescriterium. Ze staat hier
   en niet in plan.css omdat ze .c-naamac-lijst moet overrulen, en epic6 laadt
   als laatste.

   Niet zwevend. De kaart van een plan-item (.c-lijstrij) knipt af met
   overflow:hidden, en dit blok staat onderaan die kaart · een absoluut
   gepositioneerde lijst valt daar altijd half weg. Ze schuift dus mee in de
   stroom en duwt wat eronder staat een stukje omlaag. Een criterium is
   bovendien een zin en geen naam, dus mag ze de volle breedte en mogen de
   regels omlopen. */
.pl-crit-suggesties{
  position:static; width:auto; min-width:0; max-width:none;
  margin-top:4px; max-height:190px; overflow-y:auto; box-shadow:none;
}
.pl-crit-optie{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pl-crit-optie .c-naamac-naam{ white-space:normal; line-height:1.35; }

/* ══ R122 · gedrag dat blijft · de vierde kern-stap ═══════════════════════
   Het criterium is de kapstok: gedrag schrijf je eronder, en dus staat het
   criterium er ook als kop boven. Zelfde grammatica als de criteriumrij van
   stap 3 · overnemen, niet opnieuw tekenen. */
.c-ver-intro{ margin:0 0 12px; font-size:12.5px; color:var(--ink-soft); }
.c-critbron-rijen{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.c-critbron-rij{ font-size:12px; color:var(--ink); line-height:1.45; }
.c-critbron-meta{ color:var(--ink-mist); }

.c-crit-kapstok{ margin:0 0 18px; padding:0 0 4px; border-bottom:1px solid var(--line-zacht); }
.c-crit-kapstok:last-child{ border-bottom:0; }
.c-crit-kop{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.c-crit-label{ font-size:9.5px; font-weight:700; letter-spacing:.07em; color:var(--ink-mist); }
.c-crit-naam{ font-size:13.5px; font-weight:600; color:var(--ink); }
.c-crit-sub{ font-size:11px; color:var(--ink-mist); }
/* Wat nog nergens onder hangt staat apart en niet verborgen · niet
   automatisch toewijzen, want alleen de change manager weet waar het hoort. */
.c-crit-kapstok.is-los{ border-left:3px solid var(--line-sterk); padding-left:12px; }

/* De derde uitgang: vindbaar zonder de makkelijkste knop te zijn. Een
   tekstlink onder de lege lijst, geen vlak. */
.c-crit-uitgang{ margin-top:7px; }
.c-crit-uitgangknop{ border:0; background:none; padding:0 0 1px; font-family:inherit;
  font-size:11.5px; color:var(--ink-mist); border-bottom:1px dotted var(--line-sterk);
  cursor:pointer; }
.c-crit-uitgangknop:hover{ color:var(--ink); }
.c-crit-geenveld{ width:100%; box-sizing:border-box; margin-top:6px; resize:vertical; }
.c-crit-geenknoppen{ display:flex; gap:8px; margin-top:8px; }
.c-crit-geen{ display:flex; align-items:flex-start; gap:8px; margin-top:7px;
  background:var(--cream2); border-radius:9px; padding:9px 11px; }
.c-crit-geenbol{ flex:none; width:8px; height:8px; margin-top:4px; border-radius:50%;
  border:1.5px solid var(--line-sterk); box-sizing:border-box; }
.c-crit-geenkolom{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.c-crit-geennaam{ font-size:11.5px; font-weight:600; color:var(--ink-soft); }
.c-crit-geenreden{ font-size:12px; color:var(--ink); line-height:1.45; }
.c-crit-geenspoor{ font-size:10.5px; color:var(--ink-mist); }

/* INGEBED IN · een lijst, geen tekstveld. Twee plekken lopen niet gelijk op. */
.c-ver-plek{ margin-top:10px; }
.c-ver-plek-kop{ display:flex; align-items:baseline; gap:8px; }
.c-ver-plek-label{ font-size:10px; font-weight:700; letter-spacing:.07em; color:var(--ink-mist); }
.c-ver-plek-tel{ font-size:10.5px; color:var(--ink-mist); }
.c-ver-plek-rij{ display:flex; align-items:flex-start; gap:8px; margin-top:6px; }
.c-ver-plek-vink{ flex:none; margin-top:3px; }
.c-ver-plek-kolom{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.c-ver-plek-veld{ width:100%; box-sizing:border-box; font-family:inherit; font-size:12px;
  color:var(--ink); background:var(--wit); border:1px solid var(--line);
  border-radius:8px; padding:5px 9px; }
.c-ver-plek-veld:focus{ outline:none; border-color:var(--petrol); }
.c-ver-plek-veld.is-gedaan{ color:var(--ink-soft); }
.c-ver-plek-spoor{ font-size:10.5px; color:var(--ink-mist); }
.c-ver-plek-noot{ font-size:10.5px; color:var(--ghost, var(--ink-mist)); }
.c-ver-plek-toe{ margin-top:6px; }

/* De drager. Het feit staat in ghost-grijs, nooit amber of rood: het verklaart
   alleen waarom de status blijft hangen. */
.c-ver-eig-buiten{ font-size:10.5px; color:var(--ink-mist); margin-top:2px; }
.c-ver-eig-spoor{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
.c-ver-eig-spoorzin{ font-size:10.5px; color:var(--ink-mist); }
.c-ver-eig-spoornaar{ margin-left:0; }
.c-ver-spoorlijst{ display:flex; flex-direction:column; gap:9px; }
.c-ver-spoorrij{ border-left:2px solid var(--line); padding-left:10px; }
.c-ver-spoorstand{ font-size:12.5px; font-weight:600; color:var(--ink); }
.c-ver-spoormeta{ font-size:11px; color:var(--ink-mist); margin-left:7px; }
.c-ver-spoorwaarom{ font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.45; }
.c-rolpop-voetnoot{ font-size:11px; color:var(--ink-mist); padding:8px 12px 0; line-height:1.45; }

/* ── de vijf standen ─────────────────────────────────────────────────────
   Twee kleuren, niet vijf: de bol zegt uitsluitend of de stand er ís. Het
   woord draagt de identiteit, de kleur niet. Geen balk en geen percentage ·
   een ontbrekende stand is open werk, geen lage zekerheid. */
.c-ver-standen-houder{ container-type:inline-size; margin-top:11px; }
.c-ver-standen{ display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:rgba(14,79,75,.05); border-radius:8px; padding:8px 11px; }
.c-ver-standen-kop{ font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--ink-mist); }
.c-ver-stand{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-soft); }
.c-ver-stand[data-waar="ja"]{ color:var(--ink); font-weight:600; }
.c-ver-stand-bol{ flex:none; width:8px; height:8px; border-radius:50%; box-sizing:border-box;
  border:1.5px solid var(--line-sterk); }
.c-ver-stand[data-waar="ja"] .c-ver-stand-bol{ background:#2C8A6B; border-color:#2C8A6B; }
/* Vóór de go-live kan houdt stand niet waar zijn: geen lege ring, want die
   leest als open werk. Een streepje en het woord in ghost. */
/* R123 · nog niet aan de beurt = géén teken. Een lege ring leest als open
   werk en een streepje leest als een stand; dit is geen van beide. Alleen de
   ghost-tekst "na {mijlpaal}" ernaast. */
.c-ver-stand[data-waar="nvt"] .c-ver-stand-bol{ display:none; }
.c-ver-stand[data-waar="nvt"]{ color:var(--ghost, #B9B4AA); }
.c-ver-stand-tel{ font-size:10px; color:var(--ink-mist); font-weight:400; }
.c-ver-stand-nvt{ font-size:10px; color:var(--ghost, var(--line-ghost)); }
/* De hairline tussen de vier leading en de bevestiging achteraf · nooit een
   gevulde strook: dat zou een voortgangsbalk zijn. */
.c-ver-standen-scheiding{ width:1px; height:14px; background:var(--line); }
.c-ver-standen-naar{ margin-left:auto; }

/* De krappe vorm, opt-in: basis uit, alleen een container- of media-regel zet
   hem aan. Een basis-flex met een latere uitzetregel op vensterbreedte wint
   van de containerregel, en dan verdwijnen op een smalle kaart in een breed
   venster beide vormen. */
.c-ver-standen-krap{ display:none; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:5px; font-size:10.5px; color:var(--ink); }
.c-ver-standen-nog{ margin-left:4px; }
.c-ver-standen-nogna{ color:var(--ink-mist); }
@container (max-width:560px){
  .c-ver-standen{ display:none; }
  .c-ver-standen-krap{ display:flex; }
}
@media (max-width:699px){
  .c-ver-standen{ display:none; }
  .c-ver-standen-krap{ display:flex; }   /* terugval zonder container queries */
}

/* Borging onder werkinstrumenten: een weg, geen tweede blok. */
.c-borgverw-zin{ margin:0; font-size:12.5px; color:var(--ink); line-height:1.55; }
.c-borgverw-rij{ display:flex; gap:14px; margin-top:9px; flex-wrap:wrap; }
.c-borgverw-rij .pf-blok-naar{ margin-left:0; }

/* R122 · de koppeling tussen werk en gedrag, op het werk. */
.pl-borgt{ margin-top:12px; }
.pl-borgt-kies{ max-width:340px; }
/* De gedragingen op de kop van het borgingsdeelplan: lezen, niet wijzigen. */
.pl-gedragpillen{ display:flex; flex-wrap:wrap; gap:7px; margin:6px 0 10px; }
.pl-gedragpil{ display:inline-flex; align-items:baseline; gap:6px; max-width:100%;
  border:1px solid var(--line); background:var(--cream2); border-radius:999px;
  padding:4px 11px; font-family:inherit; font-size:11px; color:var(--ink); cursor:pointer; }
.pl-gedragpil:hover{ background:var(--vul-koppel); }
.pl-gedragpil-soort{ font-size:9.5px; font-weight:700; letter-spacing:.05em; color:var(--ink-mist); }
.pl-gedragpil-naam{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:30ch; }
.pl-gedragpil-stand{ color:var(--ink-soft); }
.pl-gedragpil-tel{ color:var(--ink-mist); font-size:10px; }
.pl-gedragpil-pijl{ color:var(--petrol-deep); }

/* R122 · de historiek op een gedrag draagt de gekoppelde items, niet alleen
   de standgeschiedenis. Een kop met niets eronder is erger dan geen kop. */
.c-ver-hist-tel{ margin-left:7px; font-size:10px; font-weight:600; color:var(--ink-mist);
  background:var(--cream2); border-radius:999px; padding:1px 7px; }
.c-ver-hist-daad{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.c-ver-hist-soort{ font-size:9px; font-weight:700; letter-spacing:.05em; color:var(--ink-mist); }
.c-ver-hist-titel{ flex:1 1 auto; min-width:0; font-size:11.5px; color:var(--ink); }
.c-ver-hist-stand{ font-size:10px; color:var(--ink-mist); }
.c-ver-hist-stand.is-af{ color:#2C8A6B; }
.c-ver-hist-datum{ font-size:10px; color:var(--ink-mist); font-variant-numeric:tabular-nums; }
/* Het spoor staat onder de verzameling, met een eigen kop: een statuswissel is
   geen gekoppeld item, en in één lijst leest ze wel zo. */
.c-ver-hist-spoorkop{ margin-top:9px; padding:0 0 0 12px; font-size:9px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mist); }
.c-ver-hist-spoor{ font-size:11.5px; }


/* ── R123 · het veld VANAF op een gedrag-kaart ───────────────────────────
   Eén teken per ding: de mijlpaal is overal de gevulde donkere ruit, zoals in
   de planning. Status staat in het woord, selectie in de rijachtergrond. Een
   OPEN ruit betekent meetpunt en staat drie regels hoger op dezelfde kaart,
   dus gebruikt geen enkele mijlpaalstand hem · ook de lege niet. */
.c-ver-ruit{ width:8px; height:8px; background:var(--petrol-deep); transform:rotate(45deg); flex:none; }
.c-ver-ruit-zwak{ opacity:.3; }
.c-ver-ruit-weg{ position:relative; width:8px; height:8px; transform:none; background:none; }
.c-ver-ruit-weg::before{ content:""; position:absolute; inset:0; background:var(--petrol-deep); opacity:.3; transform:rotate(45deg); }
.c-ver-ruit-weg::after{ content:""; position:absolute; left:-2px; right:-2px; top:3.2px; height:1.5px; background:#8A6A18; }

.c-ver-vanaf{ position:relative; border-top:1px solid var(--line-soft, #EFEBE3); margin-top:12px; padding-top:11px; }
.c-ver-vanaf-label{ display:block; font-size:10px; font-weight:700; letter-spacing:.07em; color:var(--ink-mist); }
.c-ver-vanaf-chip{ display:inline-flex; align-items:center; gap:7px; border-radius:999px;
  padding:4px 11px; margin-top:5px; font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid var(--koppel-line, #CFE0DE); background:var(--vul-koppel, #EAF1F0);
  color:var(--petrol, #0E4F4B); cursor:pointer; }
.c-ver-vanaf-chip:focus-visible{ outline:2px solid var(--petrol, #0E4F4B); outline-offset:2px; }
.c-ver-vanaf-chip.is-leeg{ background:none; border:1px dashed var(--line-hard, #C9C2B4); color:var(--ink-mist); font-weight:400; }
.c-ver-vanaf-chip.is-weg{ background:rgba(217,166,60,.12); border-color:rgba(168,134,44,.35); color:#8A6A18; font-weight:400; }
.c-ver-vanaf-zacht{ color:var(--ink-mist); font-weight:400; }
.c-ver-vanaf-af{ color:#1F6B52; font-weight:600; }
.c-ver-vanaf-naar, .c-ver-vanaf-los{ background:none; border:0; font:inherit; color:var(--ink-mist); cursor:pointer; padding:0 0 0 2px; }
.c-ver-vanaf-naar:hover, .c-ver-vanaf-los:hover{ color:var(--petrol-deep, #0A3936); }
.c-ver-vanaf-noot{ margin:4px 0 0; font-size:10px; color:var(--ink-mist); line-height:1.45; }

.c-ver-vanaf-kiezer{ position:absolute; top:calc(100% - 4px); left:0; z-index:20; width:330px; max-width:calc(100% - 8px);
  background:var(--kaart, #FAF8F5); border:1px solid var(--line-hard, #C9C2B4); border-radius:12px;
  box-shadow:0 20px 48px rgba(10,57,54,.22); padding:7px; }
.c-ver-vanaf-kiezer-kop{ display:block; font-size:10px; font-weight:700; letter-spacing:.07em; color:var(--ink-mist); padding:8px 10px 5px; }
.c-ver-vanaf-kz{ display:flex; align-items:center; gap:9px; width:100%; background:none; border:0; border-radius:7px;
  padding:8px 10px; font:inherit; text-align:left; cursor:pointer; }
.c-ver-vanaf-kz:hover, .c-ver-vanaf-kz.is-gekozen{ background:var(--vul-zacht, #F2EEE7); }
.c-ver-vanaf-kz.is-gekozen .c-ver-vanaf-kz-naam{ font-weight:600; color:var(--petrol-deep, #0A3936); }
.c-ver-vanaf-kz-tekst{ min-width:0; }
.c-ver-vanaf-kz-naam{ display:block; font-size:12px; color:var(--ink); }
.c-ver-vanaf-kz-meta{ display:block; font-size:10.5px; color:var(--ink-soft); }
.c-ver-vanaf-golive{ color:var(--petrol, #0E4F4B); }
.c-ver-vanaf-kz-leeg{ font-size:12px; color:var(--petrol, #0E4F4B); }
.c-ver-vanaf-kiezer-voet{ font-size:10.5px; color:var(--ink-mist); line-height:1.45; padding:9px 10px 5px;
  border-top:1px solid var(--line-soft, #EFEBE3); margin-top:4px; }
@media (max-width:699px){
  .c-ver-vanaf-kiezer{ width:calc(100% - 8px); }
  .c-ver-vanaf-kz{ min-height:44px; }
}

/* Eén ondersteunende regel onder een signaal · het waarom bij een drager die
   "niet meer" zei. Ghost: het is een citaat, geen tweede mededeling. */
.c-signaal-noot{ margin-top:3px; font-size:11px; line-height:1.45; color:var(--ghost, #B9B4AA); }

/* R125 · de bouwversie onderaan de bestand-flyout. Stil: het is een feit voor
   wie het zoekt, geen mededeling. */
.c-flyout-bouw{ margin-top:6px; font-size:10px; color:var(--ink-mist);
  font-variant-numeric:tabular-nums; }

/* ── R127 · 124b · de afrondingsregel bovenaan de vierde kern-stap ──────
   Eén rustige regel. Niets gaat op slot: ze zegt waar de wacht ligt, meer
   niet. */
.c-ver-afgerond{
  margin-bottom:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  background:var(--cream2);
  border-radius:var(--r-pil);
  font-size:var(--t-klein);
  line-height:var(--lh-lijst);
  color:var(--ink-soft);
}

/* ── R127 · 124g · de borgingsafspraak met twee termijnen ──────────────── */
.pf-k3-vraag{ margin:0 0 10px; font-size:12.5px; line-height:1.55; color:var(--ink); }
.pf-k3-termijnen{ display:flex; gap:26px; flex-wrap:wrap; }
.pf-k3-termijn{ display:flex; flex-direction:column; gap:4px; min-width:190px; }
.pf-k3-termijnnoot{ font-size:10.5px; color:var(--ink-mist); line-height:1.45; }
.pf-k3-termijnwaarschuwing{ margin:8px 0 0; font-size:11px; color:var(--geel-tekst); line-height:1.45; }
/* Wat er ná de termijn gebeurt: een vraag, geen conclusie. */
.pf-k3-endan{
  margin-top:12px;
  padding:10px 12px;
  background:var(--cream2);
  border-radius:9px;
}
.pf-k3-endanzin{ margin:4px 0 0; font-size:12px; line-height:1.55; color:var(--ink); }
.pf-k3-termijnvoet{ margin:8px 0 0; font-size:10.5px; color:var(--ink-mist); }

/* R127 · 124h — de drager en de uitspraak achter een eerder afgesproken
   borging in het initiatiefpaneel, en de afgerond-stand in de lijst. */
.pf-checkpunt-borgdrager{ color:var(--ink-soft); }
.pf-checkpunt-borguitspraak{ color:var(--ink); font-weight:var(--gew-half); }
.pf-cp-foto.is-afgerond{ color:var(--ink-soft); }

/* ── R127 · 124i · wat bleef op de telefoon ─────────────────────────────
   Criterium en uitspraak stapelen, en de uitspraak-chip kapt nooit af: dat is
   het enige wat hier echt gelezen moet worden. De vijf standen worden een
   bolletjesrij met "ontbrak: …" eronder, en nooit "n van 5" ervoor · dat telt
   vijf ongelijke dingen op tot een score, en die hebben we in R122 al
   geschrapt. Een bevroren eindstand verandert daar niets aan.

   De popovers zijn al bottom-sheets met een sleepgreep: ze lopen over
   openDetailVenster, en die vorm woont in componenten.css. */
@media (max-width:699px){
  .pf-v3-critkop{ flex-direction:column; align-items:flex-start; gap:4px; }
  .pf-v3-critkop .pf-v3-uitspraakknop{ margin-left:0; }
  .pf-v3-uitspraakknop{ justify-content:flex-start; flex-wrap:wrap; }
  .pf-v3-uitspraakwoord{ white-space:normal; overflow:visible; text-overflow:clip; }
  .pf-v3-uitspraak{ max-width:100%; text-align:left; margin-left:0; }

  .pf-v3-gedragrij{ flex-wrap:wrap; row-gap:5px; }
  .pf-v3-gedragnaam{ flex:1 1 100%; min-width:0; }
  /* De plus blijft rechts op de gedragsregel: hij is na de afronding de enige
     handeling die hier nog bestaat. */
  .pf-v3-gedragrij .pf-plus-fab{ width:26px; height:26px; margin-left:auto; }

  /* Alleen de bollen, en daaronder wat er ontbrak. De namen op één regel
     duwen de kaart anders buiten het scherm. */
  .pf-v3-standen-lees .pf-v3-stand span:not(.pf-v3-standtelling){ display:none; }
  .pf-v3-standen-lees{ gap:7px; }
  .pf-v3-standtelling{ font-size:10px; }
  .pf-v3-standennoot{ font-size:10.5px; }

  .pf-v3-gehoordveldrij{ flex-direction:column; align-items:stretch; }
  .pf-v3-gehoorddatum, .pf-v3-gehoordbij, .pf-v3-gehoordzin{ max-width:100%; }
  /* Raakvlakken van minstens 44px in de sheet. */
  .pf-v3-standknop{ min-height:44px; }
  .pf-v3-gehoordveldrij .c-knop{ min-height:44px; }
}

/* ── R127 · 124c · de wizard wordt een overdracht ──────────────────────── */
/* De derde kaart op stap 1: ze hoort op te vallen tussen twee kaarten die er
   altijd staan. */
.pf-wiz-vlak.is-afgerond{ border:2px solid var(--petrol-deep); }
.pf-wiz-vlak.is-afgerond .pf-uitklap-label{ color:var(--petrol-deep); }

.pf-wiz-borgrij{ flex-wrap:wrap; row-gap:4px; }
.pf-wiz-borgdrager{ font-size:11px; color:var(--ink-soft); margin-left:auto; }
.pf-wiz-borgstand{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-soft); }
.pf-wiz-borgbol{ width:7px; height:7px; border-radius:50%; flex:none;
  border:var(--rand-fijn) solid var(--line-sterk); box-sizing:border-box; }
.pf-wiz-borgstand[data-stand="bevestigd"] .pf-wiz-borgbol{ background:var(--groen); border:0; }
.pf-wiz-borgstand[data-stand="afstemmen"]{ color:var(--geel-tekst); }
.pf-wiz-borgstand[data-stand="nietmeer"]{ color:var(--rood); }

.pf-wiz-overdoos{ margin-top:10px; }
.pf-wiz-kalkop{ display:flex; align-items:baseline; gap:6px; }
.pf-wiz-kalrij{ margin:5px 0 0; font-size:12px; line-height:1.5; color:var(--ink); }

/* Het intrek-verschil op stap 1: één regel met een amberbol, en twee wegen. */
.pf-wiz-intrek{ margin-top:10px; }
.pf-wiz-intrekrij{ display:flex; align-items:flex-start; gap:8px; font-size:12px;
  line-height:1.5; color:var(--ink); margin-top:4px; }
.pf-wiz-intrekbol{ flex:none; width:8px; height:8px; margin-top:5px;
  border-radius:50%; background:var(--st-issue); }
.pf-wiz-intrekknoppen{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pf-wiz-intrekknop{ font-size:12px; }

/* R129 · de opruiming in wat bleef. */
/* "Alles stond er" hoort bij de bollen erboven; de herkomstnoot zegt iets
   anders en staat daaronder. Aan elkaar geplakt viel geen van beide op. */
.pf-v3-standenmist{ margin:4px 0 0; font-size:10.5px; color:var(--ink-soft); }
.pf-v3-standennoot{ margin:2px 0 0; }
/* Het veld voor wat je hoorde komt pas als je erom vraagt. */
.pf-v3-gehoordghost{ margin-top:6px; font-size:11px; }
/* De zin van de change manager over een criterium zonder gedrag · zijn woorden,
   met zijn naam erbij. */
.pf-v3-critgeen{ margin:7px 0 0; font-size:11.5px; line-height:1.5; color:var(--ink); }
.pf-v3-critgeen-wie{ color:var(--ink-mist); }
/* Het vervolg naast "opnieuw oppakken". */
.pf-v3-vervolg{
  font:inherit; font-size:11px; background:none; border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; color:var(--petrol-deep); cursor:pointer;
}
.pf-v3-vervolg:hover{ border-color:var(--petrol); }

/* ── R125 · de keten in stap 3 (frame 125b) ───────────────────────────────
   Liggende lagen die van boven naar onder lopen, niet zes kolommen: een
   knoop is een zin en een zin heeft breedte nodig. De pijl tussen de blokken
   is de leesrichting en draagt daarom het werkwoord. */
.c-keten{ display:flex; flex-direction:column; gap:var(--sp-10); }
.c-keten-intro{ color:var(--ink-mist); font-size:13px; line-height:1.55; margin:0; max-width:74ch; }

/* De twee ankers zijn alleen-lezen: geen kaartrand, geen invoer, wel de naam
   in de kopletter zodat ze als anker leesbaar zijn en niet als veld. */
.c-keten-anker{ display:flex; align-items:baseline; gap:var(--sp-8); flex-wrap:wrap;
  padding:var(--sp-10) var(--sp-12); border-radius:var(--r-l);
  background:var(--vul-koppel); border:1px solid var(--lijn-koppel); }
.c-keten-ankernaam{ font-family:var(--font-kop); font-size:15px; color:var(--petrol); }
.c-keten-ankerwoord{ font-size:11.5px; color:var(--ink-mist); }

.c-keten-pijl{ display:flex; align-items:center; gap:var(--sp-6);
  padding-left:var(--sp-12); color:var(--ink-mist); }
.c-keten-pijlteken{ font-size:15px; line-height:1; }
.c-keten-pijlwoord{ font-size:11.5px; letter-spacing:.4px; }

.c-keten-blok{ border:1px solid var(--line); border-radius:var(--r-l);
  background:var(--wit); padding:var(--sp-12); }
.c-keten-kop{ display:flex; align-items:baseline; gap:var(--sp-8); flex-wrap:wrap;
  margin-bottom:var(--sp-10); }
.c-keten-koptitel{ margin:0; font-family:var(--font-kop); font-size:14.5px; color:var(--ink); }
.c-keten-kopsub{ font-size:12px; color:var(--ink-mist); }
/* De rolregel zegt wie hier meestal schrijft, niet wie het mag. Ze staat
   rechts in de kop en niet per rij: anders lijkt elke zin een eigenaar te
   hebben, en dat is het administratieve laagje dat deze stap niet nodig heeft. */
.c-keten-koprol{ margin-left:auto; font-size:11px; color:var(--ink-mist);
  letter-spacing:.3px; }
.c-keten-kopn{ font-size:11px; color:var(--ink-mist); font-weight:var(--gew-vet); }

.c-keten-rijen{ display:flex; flex-direction:column; gap:2px; }
.c-keten-rij{ display:flex; align-items:center; gap:var(--sp-8);
  padding:var(--sp-6) 0; border-bottom:1px solid var(--line-zacht); }
.c-keten-rij:last-of-type{ border-bottom:0; }
/* Vierkant is een ding, rond is een gevolg · twee families, vijf tekens, en
   niemand hoeft ze uit het hoofd te leren. */
.c-keten-teken{ flex:none; width:9px; height:9px; box-sizing:border-box;
  background:var(--petrol); }
.c-keten-teken[data-teken="vierkant-open"]{ background:none; border:1.5px solid var(--petrol); }
.c-keten-teken[data-teken="rond"]{ border-radius:50%; }
/* De disbenefit draagt een minteken en geen alarmkleur. Amber betekent in deze
   app "hier moet iemand iets doen", en dat is precies wat een disbenefit niet
   is · ze is aanvaard. Het onderscheid zit in de vorm. */
.c-keten-teken[data-teken="rond-min"]{ width:10px; height:10px; border-radius:50%;
  background:none; border:1.5px solid var(--ink-mist);
  display:flex; align-items:center; justify-content:center; }
.c-keten-teken[data-teken="rond-min"]::after{ content:''; width:4px; height:1.5px;
  background:var(--ink-mist); }
.c-keten-rij input.c-keten-invoer{ flex:1 1 auto; min-width:0; border:0;
  border-radius:0; background:none; font-size:var(--t-body); color:var(--ink);
  padding:2px 0; }
.c-keten-rij input.c-keten-invoer:focus{ outline:none; box-shadow:0 1px 0 var(--petrol); }
.c-keten-chips{ display:flex; gap:var(--sp-6); flex:none; }
.c-keten-chip{ font-size:11px; color:var(--petrol); border:1px solid var(--lijn-koppel);
  background:var(--vul-koppel); border-radius:var(--r-pil); padding:2px 9px; white-space:nowrap; }
.c-keten-chip.is-leeg{ color:var(--ink-mist); border-style:dashed; background:transparent; }
.c-keten-herkomst{ flex:none; font-size:11px; color:var(--ink-mist); white-space:nowrap; }
.c-keten-herkomst.is-eigen{ font-style:italic; }

.c-keten-ghost{ padding-top:var(--sp-6); }
.c-keten-ghost input.c-keten-ghostinvoer{ width:100%; box-sizing:border-box;
  border:0; border-radius:0; background:none; font-size:var(--t-body);
  color:var(--ink); padding:var(--sp-2) 0; }
.c-keten-ghost input.c-keten-ghostinvoer::placeholder{ color:var(--line-ghost); }
.c-keten-ghost input.c-keten-ghostinvoer:focus{ outline:none; box-shadow:0 1px 0 var(--line); }

/* De benefit en de disbenefits staan naast elkaar: ze komen allebei uit de
   uitkomst. Onder elkaar zou de disbenefit als een gevolg van de benefit
   lezen, en dat is het niet. */
.c-keten-paar{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-10); }
.c-keten-benefitzin{ margin:0 0 var(--sp-8); font-size:14px; color:var(--ink); }
.c-keten-benefitleeg{ margin:0; font-size:12.5px; color:var(--ink-mist); }
.c-keten-vannaar{ display:flex; align-items:flex-end; gap:var(--sp-8); }
.c-keten-vannaarpijl{ color:var(--ink-mist); padding-bottom:var(--sp-6); }
.c-keten-veld{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.c-keten-veldlabel{ font-size:10.5px; letter-spacing:.6px; color:var(--ink-mist); }
.c-keten-veldinvoer{ border:1px solid var(--line); border-radius:var(--r-veld);
  background:var(--wit); font:inherit; color:var(--ink); padding:var(--sp-6) var(--sp-8);
  max-width:120px; }
/* Stippelrand, geen grijs vak en geen hangslot: het naar is niet verboden,
   het is het doel van iemand anders. */
.c-keten-veld.is-vast .c-keten-veldvast{ border:1px dashed var(--lijn-koppel);
  border-radius:var(--r-veld); padding:var(--sp-6) var(--sp-8); color:var(--petrol);
  background:transparent; display:inline-block; min-width:64px; }
.c-keten-benefitvoet{ margin:var(--sp-8) 0 0; font-size:11px; color:var(--ink-mist); line-height:1.5; }

@media (max-width:699px){
  .c-keten-paar{ grid-template-columns:1fr; }
  .c-keten-rij{ flex-wrap:wrap; }
  .c-keten-chips, .c-keten-herkomst{ flex-basis:100%; }
  .c-keten-koprol{ margin-left:0; flex-basis:100%; }
}

/* R125 · waar het vandaag op vastloopt, boven de vermogens in stap 3. Geen
   invoer en geen keuze: de zin die het portfolio meestuurde, om te lezen. */
.c-keten-vastloopt{ margin:0 0 var(--sp-5); padding:var(--sp-5) var(--sp-6);
  border-left:2px solid var(--lijn-koppel); background:var(--vul-koppel);
  border-radius:0 var(--r-m) var(--r-m) 0; }
.c-keten-vastlooptlabel{ display:block; font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.6px; color:var(--petrol-deep); margin-bottom:var(--sp-2); }
.c-keten-vastlooptzin{ margin:0; font-size:var(--t-klein); color:var(--ink); line-height:1.5; }
.c-keten-vastlooptzin + .c-keten-vastlooptzin{ margin-top:var(--sp-2); }
.pf-hefboom-noot{ display:block; margin-top:var(--sp-2); }

/* ── R125 · de schets op het initiatiefpaneel (frame 125e) ────────────────
   Vijf secties onder elkaar, gescheiden door de zachte lijn ín de kaart: dit
   is één blok en geen vijf kaarten. De zin staat ingesprongen onder zijn
   kopje, zodat het oog de vijf namen kan aflopen zonder de zinnen te lezen.

   Vijf tekens, twee families. Vierkant is een ding, rond is een gevolg; het
   gevuld of open zijn onderscheidt daarbinnen. De benefit draagt een ring om
   haar stip · ze is de enige die niet híer geschreven wordt maar uit het
   register komt, en dat mag je zien. De disbenefit draagt een minteken en
   géén alarmkleur: amber betekent in deze app "hier moet iemand iets doen",
   en dat is precies wat een disbenefit niet is. Ze is aanvaard. */
.pf-schets{ display:flex; flex-direction:column; margin-top:var(--sp-10); }
.pf-schets-sectie{ padding:var(--sp-10) 0; border-top:1px solid var(--line-zacht); }
.pf-schets-kop{ display:flex; align-items:center; gap:var(--sp-8); }
.pf-schets-teken{ flex:none; width:9px; height:9px; box-sizing:border-box; }
.pf-schets-teken[data-soort="output"]{ background:var(--petrol-deep); }
.pf-schets-teken[data-soort="vermogen"]{ border:1.5px solid var(--petrol-deep); }
.pf-schets-teken[data-soort="uitkomst"]{ border-radius:50%; background:var(--petrol-deep); }
.pf-schets-teken[data-soort="benefit"]{ border-radius:50%; background:var(--petrol-deep);
  box-shadow:0 0 0 2.5px var(--cream), 0 0 0 3.5px var(--petrol-deep); }
.pf-schets-teken[data-soort="disbenefit"]{ width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--ink-mist); display:flex; align-items:center; justify-content:center; }
.pf-schets-teken[data-soort="disbenefit"]::after{ content:''; width:4px; height:1.5px;
  background:var(--ink-mist); }

.pf-schets-rij{ padding-left:18px; }
.pf-schets-regel{ display:flex; align-items:center; gap:var(--sp-8); margin-top:5px; }
/* De hogere soortelijkheid is nodig: de globale invoerstijl zet een rand en
   een achtergrond, en een knoop is hier een zin en geen veld. */
.pf-schets-regel input.pf-schets-invoer{ flex:1 1 auto; min-width:0; border:0;
  border-radius:0; background:none; font-size:12.5px; color:var(--ink); padding:2px 0; }
.pf-schets-regel input.pf-schets-invoer:focus{ outline:none; box-shadow:0 1px 0 var(--petrol); }
.pf-schets-chip{ flex:none; font-size:11px; font-weight:var(--gew-vet); color:var(--petrol-deep);
  background:var(--vul-koppel); border:1px solid var(--lijn-koppel); border-radius:var(--r-pil);
  padding:2px 9px; white-space:nowrap; cursor:pointer; font-family:inherit; }
.pf-schets-chip.is-leeg{ color:var(--ink-mist); border-style:dashed; background:transparent;
  font-weight:var(--gew-normaal); }
.pf-schets-bij{ flex:none; font-size:11px; color:var(--ink-mist); }
/* Story · schrijven terwijl de ander ook schrijft · 2.1.
   De regel boven het blok staat in ghost. Ze markeert en ze waarschuwt niet:
   een gekleurde balk zou zeggen dat er iets mis is, en er is niets mis · er
   werken twee mensen aan dezelfde keten, en dat is de gewone gang van zaken
   zodra een changeplan vertrok. */
.pf-leesregel.pf-bij-naastwerk{ background:transparent; color:var(--ink-mist);
  border-left:3px dotted var(--line-sterk); margin:0 0 var(--sp-8); }
/* Wat het plan van dit voorstel maakte, en wat de change manager met deze
   knoop deed (2.3). Dezelfde vorm, want het is dezelfde soort zin: stil, want
   het is geen tweede kolom maar een tweede regel · het portfolio leest hier,
   het schrijft niet. */
.pf-schets-werd{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;
  margin-top:2px; font-size:11px; color:var(--ink-mist); }
/* Een rij van het plan en niet van deze lijst: geen veldrand, geen ⋯, en de
   zin in de kleur van iets wat je leest in plaats van iets wat je invult. */
.pf-schets-vanplan .pf-schets-regel{ align-items:baseline; gap:7px; padding:3px 0; }
.pf-schets-vanplantekst{ font-size:12px; color:var(--ink); line-height:1.4;
  min-width:0; overflow-wrap:anywhere; }
.pf-schets-punt{ color:var(--line-ghost); }
.pf-schets-weg{ border:0; background:none; padding:0; font:inherit; color:var(--petrol-deep);
  cursor:pointer; }
.pf-schets-weg:hover{ text-decoration:underline; }
/* De ghost-rij hoort bij haar sectie en niet tussen twee kaarten: geen eigen
   scheidingslijn, en ingesprongen zoals de zinnen erboven. */
.pf-ghost.pf-schets-ghost{ padding:0 0 0 18px; margin-top:5px; border-top:0; }
.pf-schets-ghost input.pf-ghost-invoer{ font-size:12px; }
/* De benefit staat in de schets als de vierde regel, niet als een kaart in een
   kaart. De hefboomregel houdt haar inhoud, haar keuze en haar lege staat · ze
   legt hier alleen haar eigen omranding af, want binnen deze vijf is zij geen
   ander soort ding dan de vier eromheen. Haar stip vervalt: het kopje draagt
   al het teken, en twee tekens voor één knoop is er één te veel. */
.pf-schets-sectie > .pf-bij-hefboom{ margin:5px 0 0; padding:0 0 0 18px;
  border:0; background:none; border-radius:0; }
.pf-schets-sectie > .pf-bij-hefboom > .pf-bij-hefboom-dot{ display:none; }
.pf-schets-sectie > .pf-bij-hefboom > .pf-bij-hefboom-naam{ flex:0 1 auto;
  font-size:12.5px; color:var(--ink); }
.pf-schets-sectie > .pf-leesregel{ margin:5px 0 0; padding-left:18px; }
/* De aflezing sprong nog eens veertien pixels in omdat ze buiten de schets
   onder een stip hangt die hier niet meer bestaat. */
.pf-schets-sectie > .pf-bij-hefboom > .pf-bij-afl{ margin-left:0; }

/* R125 · de voorstellen van het portfolio, boven de criteriamatrix in stap 3.
   Ze gaan aan de matrix vooraf en staan er dus boven · ingesprongen en stil,
   want ze zijn nog van iemand anders. Geen kaartrand: dat zou ze naast de
   matrix zetten in plaats van ervoor. */
.c-keten-voorstellen{ display:flex; flex-direction:column; gap:3px;
  margin-bottom:var(--sp-10); padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--line-zacht); }
.c-keten-voorstellenkop{ font-size:11px; color:var(--ink-mist); letter-spacing:.3px; }
.c-keten-voorstel{ display:flex; align-items:center; gap:var(--sp-8); padding:2px 0; }
.c-keten-voorstelzin{ flex:1 1 auto; min-width:0; font-size:var(--t-body); color:var(--ink); }

/* ── R125 · de drie uitgangen (frame 125c) ────────────────────────────────
   Twee wegen die gelijk ogen in gewicht: witte kaarten met een lichte
   omranding, geen gekleurde knop op het keuzescherm. Zou één van de twee een
   primaire knop zijn, dan is dat de aanbevolen weg, en deze app beveelt hier
   niets aan · overnemen en anders schrijven zijn allebei gewoon werk.

   De derde uitgang is een link onder een hairline. Geen kaart en geen knop:
   hij hoort erbij, maar hij kost een zin meer dan de andere twee, en dat mag
   je zien voordat je hem kiest. */
.c-uitgang-venster .c-venster-body{ display:flex; flex-direction:column; gap:var(--sp-10); }
.c-uitgang-zin{ margin:0; font-size:12px; color:var(--ink-mist); line-height:1.5; }
.c-uitgang-weg{ display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--sp-12); font:inherit; cursor:pointer; }
.c-uitgang-weg:hover{ border-color:var(--line-ghost); }
.c-uitgang-wegtitel{ font-family:var(--font-kop); font-size:14px; color:var(--ink); }
.c-uitgang-wegsub{ font-size:12px; color:var(--ink-soft); line-height:1.5; }
.c-uitgang-streep{ height:1px; background:var(--line-zacht); margin-top:2px; }
.c-uitgang-niets{ align-self:flex-start; border:0; background:none; padding:0; font:inherit;
  font-size:12.5px; color:var(--petrol-deep); cursor:pointer;
  border-bottom:1px solid var(--lijn-koppel); }
.c-uitgang-niets:hover{ border-bottom-color:var(--petrol); }

.c-uitgang-terug{ align-self:flex-start; border:0; background:none; padding:0; font:inherit;
  font-size:12.5px; color:var(--petrol-deep); cursor:pointer; }
.c-uitgang-naam{ font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mist); }
.c-uitgang-vraag{ margin:0; font-family:var(--font-kop); font-size:16px; color:var(--ink); }
.c-uitgang-uitleg{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.c-uitgang-veld{ width:100%; box-sizing:border-box; font:inherit; font-size:13px;
  color:var(--ink); background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-veld); padding:var(--sp-8) var(--sp-10); resize:vertical; }
.c-uitgang-veld::placeholder{ color:var(--line-ghost); }
.c-uitgang-voet{ display:flex; min-height:0; }

/* Een opzij gezette knoop blijft staan, in ghost, met haar reden eronder. */
.c-keten-rij.is-opzij, .c-keten-voorstel.is-opzij{ opacity:.55; }
.c-keten-rij.is-opzij input.c-keten-invoer{ text-decoration:line-through; }
.c-keten-voorstel.is-opzij .c-keten-voorstelzin{ text-decoration:line-through; }
.c-keten-opzijreden{ margin:0 0 var(--sp-6) 17px; font-size:11.5px;
  color:var(--ink-mist); line-height:1.45; }
.c-keten-voorstellenkop.is-opzij{ margin-top:var(--sp-6); }
/* De herkomst is bij een voorstel de ingang naar de drie uitgangen · een
   woord dat je kunt aantikken, geen knop die om aandacht vraagt. */
button.c-keten-herkomst.is-weg{ border:0; background:none; padding:0; font:inherit;
  font-size:11px; color:var(--petrol-deep); cursor:pointer; }
button.c-keten-herkomst.is-weg:hover{ text-decoration:underline; }
/* Een opzij gezette rij draagt haar reden eronder, en de twee horen bij
   elkaar: de scheidingslijn gaat dus om het paar en niet tussen de zin en de
   reden. */
.c-keten-rijhouder{ border-bottom:1px solid var(--line-zacht); }
.c-keten-rijhouder:last-child{ border-bottom:0; }
.c-keten-rijhouder > .c-keten-rij{ border-bottom:0; }

/* ── R125 · de kaart van een disbenefit (frame 125d) ──────────────────────
   Geen alarmkleur, in geen enkele weergave. De verleiding is amber, want het
   is iets negatiefs · maar amber betekent in deze app "hier moet iemand iets
   doen", en dat is precies wat een disbenefit niet is. Ze is aanvaard. Het
   onderscheid zit in de vorm, het minteken in het rondje, en nergens in een
   kleur. */
.c-disb-venster .c-venster-body{ display:flex; flex-direction:column; gap:var(--sp-12); }
.c-disb-uitleg{ margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.c-disb-veldkop{ display:flex; align-items:baseline; gap:5px; }
.c-disb-veldnoot{ font-size:11px; color:var(--ink-mist); }
.c-disb-bijwie{ display:flex; flex-direction:column; gap:var(--sp-6); }
.c-disb-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.c-disb-chips:empty{ display:none; }
.c-disb-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  font-weight:var(--gew-vet); color:var(--petrol-deep); background:var(--vul-koppel);
  border:1px solid var(--lijn-koppel); border-radius:var(--r-pil); padding:3px 9px; }
.c-disb-chipweg{ border:0; background:none; padding:0; font:inherit; font-size:10px;
  color:var(--petrol-deep); cursor:pointer; line-height:1; }
/* Wat er niet staat, staat er met opzet niet · de regel zegt het hardop
   naast de knop, zodat niemand het als een vergetelheid leest. */
.c-disb-geen{ align-self:center; font-size:11.5px; color:var(--ink-mist); }
/* De chip die de kaart opent. Dezelfde vorm als elke koppel-chip; leeg staat
   hij er in ghost, want geen groep is een gewone stand. */
.c-keten-chip.is-weg{ font-family:inherit; cursor:pointer; }

/* R125 125d · de disbenefits op de terugblik. Geen alarmkleur en geen icoon
   dat waarschuwt: het minteken in het rondje is het hele onderscheid, en het
   staat er in de stille tint van een voetnoot. Zou hier amber staan, dan werd
   een aanvaard gevolg een probleem dat opgelost moet worden, en dan stopt de
   volgende sponsor met ze op te schrijven. */
.pf-v3-disb{ margin-top:var(--sp-10); padding-top:var(--sp-10);
  border-top:1px solid var(--line-zacht); display:flex; flex-direction:column; gap:var(--sp-8); }
.pf-v3-disbkop{ display:flex; align-items:baseline; gap:var(--sp-8); flex-wrap:wrap; }
.pf-v3-disbsub{ font-size:11.5px; color:var(--ink-mist); }
.pf-v3-disbrij{ display:flex; flex-direction:column; gap:3px; }
.pf-v3-disbzin{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap;
  font-size:12.5px; color:var(--ink); }
.pf-v3-disbteken{ flex:none; width:10px; height:10px; box-sizing:border-box; border-radius:50%;
  border:1.5px solid var(--ink-mist); display:flex; align-items:center; justify-content:center; }
.pf-v3-disbteken::after{ content:''; width:4px; height:1.5px; background:var(--ink-mist); }
.pf-v3-disbbij{ font-size:11px; color:var(--ink-mist); }
.pf-v3-disbmerken{ margin:0 0 0 18px; font-size:11.5px; color:var(--ink-soft); line-height:1.45; }
.pf-v3-disbrij .pf-v3-uitspraakknop{ align-self:flex-start; margin-left:18px; }

/* ── R125 125a · de drie soorten regels in de uitkomstentabel ─────────────
   Een beloofde uitkomst en een initiatief zonder uitkomst lezen niet als een
   fout: geen amber, geen rood, geen pictogram, alleen de ghost-toon. Ze zijn
   allebei een stand die de portfoliomanager hoort te zien, en een stand die
   eruitziet als een waarschuwing wordt weggeklikt in plaats van gelezen. */
.pf-baten-rij-leeg .pf-baten-doelinit.is-alleen{ font-size:12.5px; color:var(--petrol-deep); }
.pf-baten-groep-leeg .pf-baten-groepnaam.is-leeg{ color:var(--line-ghost); font-style:italic; }
/* Het derde bronteken: een uitspraak van een mens. Een gevulde petrol-ring,
   naast de gevulde amberruit (gemeten) en de stippelring (geschat of nog
   niets). Drie tekens voor één vraag · waar komt dit getal vandaan. */
.pf-baten-teken[data-stand="uitspraak"]{ border-radius:50%; background:var(--petrol);
  border:0; transform:none; box-shadow:0 0 0 2px var(--wit), 0 0 0 3px var(--petrol); }
/* De popover van een verwijzing is breder dan de standenpopover: er staan
   zinnen in en geen woorden. Een zin die afbreekt leest als een andere zin. */
.c-draagvlak-pop.c-keten-refpop{ max-width:330px; }
.c-keten-refpop .c-draagvlak-optie{ white-space:normal; line-height:1.35; }
.c-keten-refleeg{ padding:6px 8px 8px; font-size:12px; color:var(--ink-mist);
  line-height:1.45; max-width:300px; }

/* R125 125f · de twee verwijzingen van een uitkomst, in één cel. De ambitie
   zegt waaraan ze bijdraagt, de chip eronder waarop ze steunt · dezelfde as,
   één stap uit elkaar. */
.mx-ambitiecel{ display:flex; flex-direction:column; gap:5px; }
.c-critverm{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.c-critverm-chip{ font-family:inherit; font-size:11px; color:var(--petrol-deep);
  background:var(--vul-koppel); border:1px solid var(--lijn-koppel);
  border-radius:var(--r-pil); padding:2px 9px; cursor:pointer; }
.c-critverm-chip.is-leeg{ color:var(--ink-mist); border-style:dashed; background:transparent; }
.c-critverm-chip.is-lees{ cursor:default; }
/* Waar de verwijzing vandaan komt, stil achter de chip. Afgeleid: wijzigt hij
   hem, dan verdwijnt deze regel vanzelf. */
.c-critverm-bron{ font-size:10.5px; color:var(--ink-mist); }

/* ══ R125 125f · de benefit map ════════════════════════════════════════════
   Zes lagen onder elkaar, met de lijnen erachter. De knopen staan absoluut
   geplaatst omdat hun hoogte uit hun tekst volgt en de lijnen die hoogte
   moeten kunnen volgen · een grid met vaste rijen zou de lijnen laten
   loshangen zodra iemand een woord toevoegt. */
.c-bk-venster .c-venster-body{ display:flex; flex-direction:column; gap:var(--sp-10); }
/* R126 · 2b · de leesrichting is één regel onder de titel. Ze stond in een
   vlak dat meer ruimte nam dan een laag van de kaart zelf · een uitleg hoort
   nooit groter te zijn dan wat ze uitlegt. */
.c-bk-leesregel{ margin:0; font-size:11px; color:var(--ink-mist); line-height:1.4; }
/* Op een telefoon blijft de kaart een lijst van boven naar onder, en daar
   blijft de uitleg in haar vlak staan: er is geen kolomkop om onder te hangen. */
.c-bk-lezen{ margin:0; padding:var(--sp-10) var(--sp-12); border-radius:var(--r-m);
  background:var(--cream2); font-size:12px; color:var(--ink); line-height:1.55; }
.c-bk-leeg{ margin:0; font-size:13px; color:var(--ink-mist); }
/* R126 · 2c · 126m · vijf kolommen in een grid. De eerste is de lijst zelf,
   niet een paneel ernaast · daarmee vervalt de breedte die naast de kolommen
   kwam, en met haar de inklapper van v447.

   Een grid en geen absolute plaatsing: de rijhoogte volgt de inhoud, de
   kolommen verdelen wat er is, en de lijnen worden uit de echte randen
   gemeten. Wat vroeger in JS werd uitgerekend, doet de browser nu beter. */
.c-bk-vak{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-m); padding:var(--sp-12) var(--sp-14) var(--sp-14); }
.c-bk-vaktitel{ margin:0; font-size:13px; font-weight:var(--gew-vet); color:var(--petrol-deep); }
.c-bk-wrap{ position:relative; margin-top:var(--sp-10); }
.c-bk-svg{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; }
.c-bk-lijn{ fill:none; stroke:var(--petrol-deep); stroke-width:1.4; opacity:.8; }
.c-bk-lijn.is-aanname{ stroke-dasharray:3 3; opacity:.55; }
.c-bk-grid{ display:grid;
  grid-template-columns:minmax(160px,200px) repeat(4, minmax(112px,1fr));
  column-gap:36px; }
.c-bk-kolkop{ font-size:9.5px; font-weight:var(--gew-zwaar); letter-spacing:.06em;
  color:var(--ink-soft); text-transform:uppercase; }
.c-bk-kolsub{ display:block; font-size:10px; font-weight:var(--gew-gewoon);
  letter-spacing:0; text-transform:none; color:var(--ink-mist);
  margin-top:1px; line-height:1.3; }
/* De kolom staat gecentreerd in haar hoogte · zo komt elke lijn op het midden
   van een knoop aan, zonder dat er één hoogte over de hele kaart hoeft. */
/* min-width:0 is hier geen detail. Een grid-item is standaard zo breed als
   zijn langste woord, en dan duwt één lange naam de hele kaart buiten haar
   vak · precies de horizontale scrollbalk die 126l verbood. De tekst breekt
   liever af dan dat de kaart schuift. */
.c-bk-kol{ display:flex; flex-direction:column; justify-content:center;
  gap:12px; margin-top:var(--sp-10); min-width:0; }
.c-bk-kolkop{ min-width:0; }
.c-bk-knoop, .c-bk-rij{ overflow-wrap:anywhere; }
/* De eerste kolom is de lijst: rijen die je aanwijst, geen knopen. */
.c-bk-rij{ position:relative; z-index:1; display:flex; align-items:center;
  gap:var(--sp-8); width:100%; text-align:left; font:inherit;
  padding:var(--sp-8) var(--sp-10); border-radius:8px; background:var(--wit);
  border:1px solid var(--line); cursor:pointer; }
.c-bk-rij:hover{ background:var(--cream2); }
/* Het vertrekpunt draagt een petrol rand van 1,5px · dat is wat de kaart hier
   zegt: hier begin je te lezen. Dezelfde rand als op de vertrekknoop. */
.c-bk-rij[aria-pressed="true"]{ background:var(--vul-koppel);
  border:1.5px solid var(--petrol-deep); }
.c-bk-rijtekst{ flex:1; min-width:0; }
.c-bk-rijnaam{ display:block; font-size:11.5px; line-height:1.3; color:var(--ink); }
.c-bk-rijsub{ display:block; font-size:10px; color:var(--ink-mist); margin-top:1px; }
.c-bk-rijsub.is-leeg{ color:var(--line-ghost); }
.c-bk-ghost{ font-size:10px; color:var(--line-ghost); line-height:1.35; }

/* ── de knoophint (R126 · 2e · 126o) ─────────────────────────────────────
   Acht pixels onder de knoop, links uitgelijnd, nooit eroverheen · de lijnen
   moeten zichtbaar blijven, want daar gaat de hint mede over. */
/* Elke knoop doet iets: hij opent zijn hint, en leest door of springt naar
   waar hij beheerd wordt. Dan hoort de muis dat ook te zeggen. */
.c-bk-knoop{ cursor:pointer; }
.c-bk-knoop:focus-visible, .c-bk-rij:focus-visible{ outline:2px solid var(--petrol-deep);
  outline-offset:2px; }
.c-bk-knoop.is-hint{ box-shadow:0 0 0 1.5px var(--petrol-deep); }
.c-bk-hint{ position:absolute; z-index:5; width:min(300px, 86vw); min-width:250px;
  background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:0 8px 26px rgba(20,28,26,.14);
  padding:var(--sp-12) var(--sp-14); display:flex; flex-direction:column;
  gap:var(--sp-8); text-align:left; }
.c-bk-hintlaag{ margin:0; font-size:9.5px; font-weight:var(--gew-zwaar);
  letter-spacing:.06em; text-transform:uppercase; color:var(--terra-tekst); }
/* Het kader staat in de kleur van een uitleg en niet van een zin · wie het
   kent, leest eroverheen. */
.c-bk-hintkader{ margin:0; font-size:11px; color:var(--ink-mist); line-height:1.4; }
.c-bk-hintzin{ margin:var(--sp-6) 0 0; font-size:12.5px; color:var(--petrol-deep);
  line-height:1.45; }
.c-bk-hintsub{ margin:0; font-size:11px; color:var(--ink-soft); line-height:1.4; }
.c-bk-hintblok{ display:flex; flex-direction:column; gap:3px;
  border-top:1px solid var(--line-zacht); padding-top:var(--sp-8); }
.c-bk-hintkop{ margin:0; font-size:9px; font-weight:var(--gew-zwaar);
  letter-spacing:.06em; color:var(--ink-mist); }
.c-bk-hintregel{ margin:0; font-size:11px; color:var(--ink); line-height:1.4; }
.c-bk-hintrij{ display:flex; align-items:baseline; gap:6px; font-size:11px; }
.c-bk-hintsoort{ color:var(--ink-mist); }
.c-bk-hintnaam{ color:var(--ink); min-width:0; }
.c-bk-hintsprong{ align-self:flex-start; border:0; background:none; padding:0;
  font:inherit; font-size:11.5px; color:var(--petrol-deep); cursor:pointer;
  border-top:1px solid var(--line-zacht); padding-top:var(--sp-8); width:100%;
  text-align:left; }
.c-bk-hintsprong:hover{ text-decoration:underline; }
/* Alleen de lijnen van deze knoop worden dik, en alleen de buren die er niet
   aan hangen dimmen. De kaart wordt geen modus. */
.c-bk-lijn.is-dik{ stroke-width:2; opacity:.9; }
.c-bk-lijn.is-dof{ opacity:.25; }
.c-bk-knoop.is-dof, .c-bk-rij.is-dof{ opacity:.55; }

@media (max-width:699px){
  /* Op een telefoon is een zwevend kaartje naast een knoop niet te raken · dan
     komt de hint onderaan het scherm, met een greep om hem weg te vegen. */
  .c-bk-hint{ position:fixed; left:0 !important; right:0; top:auto !important;
    bottom:0; width:auto; min-width:0; border-radius:var(--r-l) var(--r-l) 0 0;
    max-height:80vh; overflow-y:auto; }
  .c-bk-hint::before{ content:''; display:block; width:36px; height:4px;
    border-radius:2px; background:var(--line-sterk); margin:0 auto var(--sp-8); }
  .c-bk-hintsprong{ min-height:44px; }
}
/* Te smal voor vijf kolommen: de eerste kolom blijft, de vier lagen gaan
   onder elkaar. Schuiven blijft geen uitweg. */
.c-bk-smal{ display:grid; grid-template-columns:minmax(160px,200px) minmax(0,1fr);
  gap:var(--sp-12); margin-top:var(--sp-10); }
.c-bk-lagen{ display:flex; flex-direction:column; gap:var(--sp-10); min-width:0; }
.c-bk-laagblok{ border-top:1px solid var(--line-zacht); padding-top:var(--sp-8); }
.c-bk-laagitems{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.c-bk-laagitems .c-bk-knoop{ max-width:100%; }
/* Een knoop is een zin: min-height, nooit een vaste hoogte. De knoop zelf
   clipt niet · wat erin staat mag afbreken.

   De zin kapt sinds 126o wél af na drie regels, en dat mocht daarvoor niet:
   een knoop die zijn zin verbergt, loog toen stiller dan een lege knoop. Wat
   er veranderde is de hint · de volle zin staat er één beweging verderop, en
   staat er alléén wanneer er werkelijk iets wegviel. Zonder die hint hoort
   de klem hier niet te staan. */
.c-bk-knoop{ position:relative; z-index:1; box-sizing:border-box;
  background:var(--wit); border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; overflow:visible; }
.c-bk-knoop.is-disbenefit{ border-style:dashed; border-color:var(--line-sterk); }
.c-bk-knoop.is-leeg{ border:1.5px dashed var(--line-sterk); background:transparent; }
.c-bk-knoop.is-leeg .c-bk-tekst{ color:var(--line-ghost); }
/* Opzij gezet blijft staan, in ghost, met zijn reden · laten verdwijnen wist
   precies de informatie die de evolutie waardevol maakt. */
.c-bk-knoop.is-opzij{ border:1px dashed var(--line-sterk); background:var(--cream2); }
.c-bk-knoop.is-opzij .c-bk-tekst{ color:var(--ink-mist); }
/* De benefit draagt het zachte koppelvlak · zij is waar de hele kaart naartoe
   leest, en een rand alleen zei dat te stil. */
.c-bk-knoop.is-benefit{ border-color:var(--lijn-koppel); background:var(--vul-koppel); }
.c-bk-lint{ position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:2px; background:var(--lane, var(--petrol-deep)); }
/* De merkregel is één regel: "opgeleverd · 6 okt" mag nooit afbreken en over
   de zin eronder vallen. */
/* De merkregel is één regel: "opgeleverd · 6 okt" mag nooit afbreken en over
   de zin eronder vallen. Het knippen zit op het woord en niet op de regel ·
   het benefit-teken is een bol met een ring eromheen die buiten haar eigen
   vierkant valt, en een overflow op de regel sneed die ring doormidden. Dan
   staat er "●)" in plaats van een teken. */
/* Het merk mag wikkelen. Het stond op één regel met een ellips, en in het
   Frans las dat als "plan de changement en cours · ph…" · de fotodatum viel
   weg terwijl ze er wel is. Een teken dat zijn eigen inhoud afkapt zegt
   minder dan geen teken, want je weet niet dát er iets staat. Twee regels
   kosten hier vier pixel. */
.c-bk-merk{ display:flex; align-items:baseline; gap:7px; margin-bottom:4px;
  font-size:10px; }
.c-bk-merkwoord{ min-width:0; overflow-wrap:anywhere; }
.c-bk-merk .c-bk-teken{ flex:none; }
/* De zin op de knoop kapt af na drie regels; wat wegvalt staat voluit in de
   hint. Drie is gemeten en niet gekozen (les 48): van de 128 knopen die het
   demoportfolio op 1400px tekent, passen er 126 binnen drie regels · een
   kolom die met één lange uitkomst twee keer zo hoog wordt, duwt de hele
   kaart uit beeld voor iedereen die die ene zin niet zocht. */
.c-bk-tekst{ display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  font-size:11.5px; color:var(--ink); line-height:1.4; }
.c-bk-sub{ display:block; font-size:10.5px; color:var(--ink-soft);
  margin-top:4px; line-height:1.4; }
/* Wat er niet staat, staat er in ghost · dezelfde tint als een lege knoop. */
.c-bk-sub.is-ghost{ color:var(--line-ghost); }
/* C.2 · een gedeeld vermogen. "Komt van" hoort links: daar houdt deze streng
   op. Het lijntje ervoor is het stukje lijn dat er niet is · het wijst naar
   buiten de kaart in plaats van naar een knoop die hier niet staat. */
.c-bk-komtvan{ display:block; width:100%; text-align:left; font:inherit;
  border:0; background:none; cursor:pointer;
  font-size:10px; color:var(--ink-mist);
  margin-top:5px; padding:0 0 0 9px; position:relative; line-height:1.3; }
.c-bk-komtvan:hover{ color:var(--petrol-deep); }
.c-bk-komtvan::before{ content:''; position:absolute; left:0; top:.55em;
  width:5px; height:0; border-top:1.5px dashed var(--line-sterk); }
.c-bk-ook{ display:block; width:100%; text-align:left; font:inherit;
  border:0; background:none; cursor:pointer; padding:0;
  font-size:10px; color:var(--petrol-deep); margin-top:3px; line-height:1.3; }
.c-bk-ook:hover{ text-decoration:underline; }
.c-bk-merkwoord.is-nieuw{ color:var(--terra-tekst); font-weight:var(--gew-vet); }
.c-bk-merkwoord.is-af{ color:var(--groen-tekst); font-weight:var(--gew-vet); }
.c-bk-merkwoord.is-leeg{ color:var(--line-ghost); }

/* Vijf soort-tekens, twee families · dezelfde woordenschat als in de keten en
   op het initiatiefpaneel. Ze staan los van de bron-tekens in de
   uitkomstentabel: daar antwoordt het teken op "waar komt dit getal vandaan",
   hier op "wat voor knoop is dit". */
.c-bk-teken{ flex:none; box-sizing:border-box; width:9px; height:9px; }
.c-bk-teken[data-soort="initiatief"]{ width:10px; height:10px; border-radius:2px;
  background:var(--lane, var(--petrol-deep)); }
.c-bk-teken[data-soort="output"]{ background:var(--petrol); }
.c-bk-teken[data-soort="vermogen"]{ border:1.5px solid var(--petrol); }
.c-bk-teken[data-soort="uitkomst"]{ border-radius:50%; background:var(--petrol); }
.c-bk-teken[data-soort="benefit"]{ border-radius:50%; background:var(--petrol);
  box-shadow:0 0 0 2.5px var(--cream), 0 0 0 3.5px var(--petrol); }
.c-bk-teken[data-soort="disbenefit"]{ width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--ink-mist); display:flex; align-items:center; justify-content:center; }
.c-bk-teken[data-soort="disbenefit"]::before{ content:''; width:4px; height:1.5px;
  background:var(--ink-mist); }
.c-bk-teken[data-soort="leeg"]{ border-radius:50%; border:1.5px dotted var(--line-sterk); }
.c-bk-teken[data-soort="doel"]{ width:10px; height:10px; border-radius:50%;
  background:var(--petrol-deep); }

/* De lijnen dragen de tint van hun initiatief · zo is bij veel initiatieven
   nog te volgen welke streng waarheen loopt. Een aanname is gestippeld: de
   app rekent geen verband uit tussen uitkomst en benefit. */
.c-bk-lijn{ stroke:var(--lane, var(--petrol-deep)); opacity:.55; }
.c-bk-lijn.is-aanname{ stroke-dasharray:4 3; opacity:.75; }
.c-bk-legende{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:11px; font-size:10.5px;
  color:var(--ink-mist); }
.c-bk-legenderij{ display:inline-flex; align-items:center; gap:6px; }
.c-bk-legendelijn{ width:20px; height:1.5px; background:var(--lane, var(--petrol-deep));
  opacity:.55; }
.c-bk-legendelijn.is-aanname{ height:0; background:none;
  border-top:1.5px dashed var(--ink-mist); }
.c-bk-schakel{ display:inline-flex; border:1px solid var(--line);
  border-radius:var(--r-pil); overflow:hidden; }
.c-bk-standknop{ font:inherit; font-size:11.5px; border:0; background:none;
  padding:5px 13px; cursor:pointer; color:var(--ink-soft); }
.c-bk-standknop.is-aan{ background:var(--petrol-deep); color:var(--op-vol); }

/* De vier tinten van de initiatieven. Petrol-familie, nooit terracotta · dat
   is in deze app handelen, en een initiatief handelt hier niet. */
.lane-1{ --lane:#0A3936; }
.lane-2{ --lane:#12716C; }
.lane-3{ --lane:#2F6F8F; }
.lane-4{ --lane:#5A7F6B; }

@media (max-width:699px){
  /* De kaart wordt een lijst. De zes lagen houden hun volgorde, dus de twee
     leesrichtingen overleven de verkleining · dat is het enige wat ze hier
     te verliezen had. */
  .c-bk-svg{ display:none; }
  .c-bk-grid{ grid-template-columns:minmax(0,1fr); }
  .c-bk-smal{ grid-template-columns:minmax(0,1fr); }
  .c-bk-rij{ min-height:44px; }
}
/* De weg naar de benefit map, op de kaart van de benefit zelf. */
.pf-hefboom-kaartweg{ flex:none; border:0; background:none; padding:0; font:inherit;
  font-size:11px; color:var(--petrol-deep); cursor:pointer; }
.pf-hefboom-kaartweg:hover{ text-decoration:underline; }
/* R126 · 2b · één scrollbalk in het scherm, en dat is de pagina. De kaart
   schuift niet horizontaal: past ze niet in de breedte, dan wisselt de vorm ·
   de vier lagen gaan onder elkaar en de eerste kolom blijft staan. Schuiven
   als uitweg kost de lezer de lijn die hij volgde, en dat is duurder dan een
   andere vorm. */
.c-bk-houder{ overflow:visible; }

/* ── R125 125i · de sporen ────────────────────────────────────────────────
   Boven de zes initiatieven wisselt de vórm, niet de inhoud: één regel per
   initiatief, de keten van links naar rechts, afgekapt op één zin per laag.
   Dezelfde volgorde en dezelfde lagen, dus wie de tekening kent herkent de
   rij. */
.c-bk-filters{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.c-bk-filter{ font:inherit; font-size:11.5px; border:1px solid var(--line);
  background:var(--wit); border-radius:var(--r-pil); padding:4px 11px; cursor:pointer;
  color:var(--ink-soft); }
.c-bk-filter.is-aan{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:var(--op-vol); }
.c-bk-sorteer{ margin-left:auto; font-size:11.5px; color:var(--ink-mist); }
.c-bk-sporenwrap{ overflow-x:auto; }
.c-bk-sporen{ width:100%; border-collapse:collapse; }
.c-bk-sporen th{ text-align:left; font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.06em; color:var(--ink-mist); padding:0 var(--sp-10) var(--sp-8) 0;
  border-bottom:1px solid var(--line); white-space:nowrap; }
.c-bk-spoor td{ padding:var(--sp-10) var(--sp-10) var(--sp-10) 0;
  border-bottom:1px solid var(--line-zacht); vertical-align:top; font-size:12.5px;
  color:var(--ink); }
.c-bk-spoornaam{ position:relative; padding-left:13px !important; white-space:nowrap; }
.c-bk-spoorlint{ position:absolute; left:0; top:10px; bottom:10px; width:3px;
  border-radius:2px; background:var(--lane, var(--petrol-deep)); }
.c-bk-spoorkies{ margin-right:6px; vertical-align:middle; }
/* Waar het spoor stopt staat onder de naam · op dit schaalniveau is dat de
   vraag, en niet welke zin er precies staat. */
.c-bk-spoorstopt{ display:block; margin-top:2px; font-size:10.5px; color:var(--ink-mist); }
/* Eén zin per laag, met ellipsis. Afbreken over twee regels zou elke rij een
   andere hoogte geven en de kolommen onleesbaar maken. */
.c-bk-spoorzin{ display:block; max-width:22ch; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.c-bk-spoorcel.is-leeg{ color:var(--line-ghost); }
.c-bk-spoorcel.is-leeg .c-bk-teken{ display:inline-block; vertical-align:middle;
  margin-right:5px; }
.c-bk-sporenvoet{ margin:0; font-size:11.5px; color:var(--ink-mist); }
/* De tekening zegt hardop voor welke sporen ze openging · zonder die regel
   lijkt het alsof er initiatieven ontbreken. */
.c-bk-beperkt{ margin:0; font-size:11.5px; color:var(--ink-mist); }
.c-bk-vorm{ margin-right:var(--sp-8); }

/* ── R125 125f · kopieer als beeld ────────────────────────────────────────
   De derde knop in de kop, naast de twee schakelaars. Een link en geen
   gevulde knop: de twee schakelaars zeggen wat je ziet, en deze zegt wat je
   meeneemt · een primaire knop zou de kaart een formulier maken met een
   verzendknop erboven. */
.c-bk-plaat{ margin-left:var(--sp-8); border:0; background:none; padding:0;
  font:inherit; font-size:11.5px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); cursor:pointer; white-space:nowrap; }
.c-bk-plaat:hover{ text-decoration:underline; }
/* Hetzelfde slotje als op de organisatiekaart · één teken voor één grens. */
.c-bk-plaatslot{ margin-right:5px; font-size:.9em; line-height:1; opacity:.6; }

@media (max-width:699px){
  /* De sporen tonen de naam en waar het spoor stopt; de volle rij staat
     achter de rij zelf, in de horizontale schuif. */
  .c-bk-spoorzin{ max-width:14ch; }
  .c-bk-sorteer{ margin-left:0; width:100%; }
}

/* ── R125 125h · de keten en de kaart op een telefoon ─────────────────────
   Vier blokken onder elkaar is een scherm dat niemand afmaakt. De keten wordt
   een keuze: chips bovenaan met de telling erin, en één soort tegelijk in
   beeld. Scrollen is geen navigatie · het is hopen dat je de goede plek
   tegenkomt. */
.c-keten-chipsrij{ display:flex; gap:var(--sp-6); overflow-x:auto;
  -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.c-keten-soortchip{ font:inherit; font-size:12px; white-space:nowrap; min-height:44px;
  border:1px solid var(--line); background:var(--wit); color:var(--ink-soft);
  border-radius:var(--r-pil); padding:0 13px; cursor:pointer; }
.c-keten-soortchip.is-aan{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:var(--op-vol); font-weight:var(--gew-vet); }

@media (max-width:699px){
  /* Rijen van minstens 44px · een rij die je met een vinger moet raken is
     geen rij van achttien pixels. */
  .c-keten-rij, .c-keten-voorstel{ min-height:44px; align-items:center; }
  .c-keten-ghost input.c-keten-ghostinvoer{ min-height:44px; }
  /* De drie uitgangen worden een bottom-sheet · zelfde inhoud, zelfde
     volgorde, alleen een andere vorm. Het venster doet dat al; wat hier
     bijkomt is de maat van de raakvlakken. */
  .c-uitgang-weg{ min-height:56px; }
  .c-uitgang-niets, .c-uitgang-terug{ min-height:44px; display:flex; align-items:center; }
  .c-uitgang-knop{ min-height:44px; }
  .c-disb-chip{ min-height:32px; }

  /* De kaart wordt een lijst per initiatief. De band wordt een kop, de keten
     eronder gestapelde regels met hun soort-teken. */
  .c-bk-mobiel{ display:flex; flex-direction:column; gap:var(--sp-12); }
  .c-bk-minit{ border:1px solid var(--line); border-radius:var(--r-m);
    background:var(--cream); padding:var(--sp-10) var(--sp-12); }
  .c-bk-minitkop{ position:relative; padding-left:13px; margin-bottom:var(--sp-8);
    font-family:var(--font-kop); font-size:14px; color:var(--petrol-deep); }
  .c-bk-minitkop .c-bk-spoorlint{ top:2px; bottom:2px; }
  .c-bk-mrij{ padding:var(--sp-8) 0; border-top:1px solid var(--line-zacht); }
  .c-bk-mlaag{ display:block; font-size:var(--t-overline); font-weight:var(--gew-zwaar);
    letter-spacing:.06em; color:var(--ink-mist); }
  .c-bk-mzin{ display:flex; align-items:center; gap:7px; margin-top:3px;
    font-size:12.5px; color:var(--ink); min-height:28px; }
  .c-bk-mrij.is-leeg .c-bk-mzin{ color:var(--line-ghost); }
  .c-bk-mrij.is-opzij .c-bk-mzin{ color:var(--ink-mist); }
  .c-bk-mrij .c-bk-sub{ margin-left:16px; }
  /* De vormschakelaar en bij vertrek · nu blijven: dat is de reden om de
     kaart te openen. Wat hier wegvalt is alleen de tekening zelf. */
  .c-bk-vorm{ margin-right:var(--sp-6); }
  .c-bk-standknop{ min-height:36px; }
  .c-bk-filter{ min-height:36px; }
}
@media (max-width:699px){
  /* Een voorstel is op een telefoon een kaartje: de zin, wat eraan ontbreekt,
     en één knop naar de drie uitgangen. */
  .c-keten-voorstelkaart{ border:1px solid var(--line); border-radius:var(--r-m);
    background:var(--wit); padding:var(--sp-10) var(--sp-12); margin-top:var(--sp-8); }
  .c-keten-voorstelkop{ display:flex; align-items:center; gap:7px; }
  .c-keten-voorstellabel{ font-size:var(--t-overline); font-weight:var(--gew-zwaar);
    letter-spacing:.07em; color:var(--ink-mist); }
  .c-keten-voorstelkaart .c-keten-voorstelzin{ margin:var(--sp-6) 0 0;
    font-size:14px; color:var(--ink); line-height:1.4; }
  .c-keten-voorstelvoet{ display:flex; align-items:center; gap:var(--sp-10);
    margin-top:var(--sp-10); }
  .c-keten-voorstelmaat{ font-size:12px; color:var(--ink-mist); }
  .c-keten-voorstelknop{ margin-left:auto; min-height:44px; font:inherit; font-size:13px;
    font-weight:var(--gew-vet); color:var(--petrol-deep); background:var(--vul-koppel);
    border:1px solid var(--lijn-koppel); border-radius:var(--r-veld);
    padding:0 var(--sp-12); cursor:pointer; }
  /* De blokkop past op één regel: naam, rol en telling naast elkaar, klein. */
  .c-keten-kop{ gap:var(--sp-6); margin-bottom:var(--sp-8); }
  .c-keten-koprol{ margin-left:0; font-size:10.5px; }
  .c-keten-kopsub{ font-size:11px; }
}
@media (max-width:699px){
  /* De twee schakelaars naast een lange naam duwen die naam tot één woord per
     regel. Op deze breedte staan ze eronder · de naam is waar je naar kijkt. */
  .c-bk-venster .c-venster-kop{ flex-wrap:wrap; }
  .c-bk-venster .c-venster-kopactie{ order:3; width:100%; margin-top:var(--sp-8);
    display:flex; gap:var(--sp-8); }
  .c-bk-venster .c-venster-titelblok{ flex:1 1 100%; }
}

/* ══ R126 · de Benefit map als eigen werkplek ══════════════════════════════
   Een scherm en geen venster. De lijst is het overzicht: één regel per
   benefit, met per laag de stand en de reden eronder in woorden. Geen
   percentage, geen stoplicht · elk getal hier is een aantal dingen dat je
   kunt gaan bekijken. */
.c-bm{ display:flex; flex-direction:column; gap:var(--sp-12); }
.c-bm-kop{ display:flex; align-items:baseline; gap:var(--sp-10); flex-wrap:wrap; }
.c-bm-titel{ margin:0; font-family:var(--font-kop); font-size:var(--t-h1);
  font-weight:var(--gew-vet); color:var(--ink); }
.c-bm-meta{ font-size:12px; color:var(--ink-mist); }

/* De regel die zegt wat de kaart ziet. Geen gaten, geen regel · en ook geen
   "alles in orde": een app die zegt dat het goed is, heeft dat niet gekeken,
   ze heeft niets gevonden. */
/* Het frame geeft haar een eigen vlak met een rand · zo leest ze als een
   mededeling en niet als een waarschuwingsbalk. Geen kleurvlak en geen icoon:
   dit zijn feiten, geen alarm. */
.c-bm-ziet{ margin:0; padding:var(--sp-12) var(--sp-14); border-radius:var(--r-m);
  border:1px solid var(--line); background:var(--cream);
  font-size:12.5px; line-height:1.65; color:var(--ink); }
/* De link draagt een dunne onderlijn in de koppelkleur en geen volle
   onderstreping · een hele zin onderstrepen maakt van de regel een rij links
   in plaats van een zin met twee klikbare feiten erin. */
.c-bm-zietlink{ border:0; border-bottom:1px solid var(--lijn-koppel);
  background:none; padding:0; font:inherit; color:var(--petrol-deep);
  cursor:pointer; }
.c-bm-zietlink:hover{ border-bottom-color:var(--petrol); }

.c-bm-balk{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.c-bm-filter{ font:inherit; font-size:11.5px; border:1px solid var(--line);
  background:var(--wit); border-radius:var(--r-pil); padding:4px 11px; cursor:pointer;
  color:var(--ink-soft); }
.c-bm-filter.is-aan{ background:var(--petrol-deep); border-color:var(--petrol-deep);
  color:var(--op-vol); }

.c-bm-lijst{ display:flex; flex-direction:column; }
/* De hele rij is het tikdoel · de naam is geen link naast een rij, ze ís de
   rij. Daarom een button, met de opmaak van een rij. */
.c-bm-rij{ display:grid; grid-template-columns:minmax(200px,1.4fr) auto minmax(150px,0.8fr);
  align-items:center; gap:var(--sp-12); width:100%; text-align:left;
  font:inherit; border:0; border-bottom:1px solid var(--line-zacht);
  background:none; padding:var(--sp-12) var(--sp-8); cursor:pointer; }
.c-bm-rij:hover{ background:var(--cream); }
.c-bm-rij.is-leeg{ cursor:default; }
.c-bm-naam{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-bm-naamtekst{ font-size:13px; color:var(--ink); }
.c-bm-sub{ font-size:11px; color:var(--ink-mist); }
.c-bm-lagen{ display:flex; gap:var(--sp-12); }
.c-bm-laag{ display:flex; flex-direction:column; gap:4px; min-width:76px; }
.c-bm-laagnaam{ font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:.06em; color:var(--ink-mist); white-space:nowrap; }
/* Per laag één bol per initiatief: gevuld = er staat iets, stippelring = leeg.
   Boven de zes wisselt de vorm naar een telling · de bollen staan
   gevuld-eerst-dan-leeg, dus afkappen zou precies de lege verbergen, en dat is
   de informatie. Dezelfde beweging als de tekening boven de zes sporen. */
.c-bm-bollen{ display:flex; gap:3px; min-height:8px; }
.c-bm-bol{ width:8px; height:8px; border-radius:50%; background:var(--petrol-deep);
  flex:none; box-sizing:border-box; }
.c-bm-bol.is-leeg{ background:none; border:1.5px dotted var(--line-ghost); }
.c-bm-telling{ font-size:11px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.c-bm-stopt{ font-size:11px; color:var(--ink-mist); line-height:1.4; }

/* De gekozen benefit staat als chip en niet als titel: zo is te zien dat dit
   een beperking is van de lijst eronder en geen ander scherm. */
.c-bm-chiprij{ display:flex; }
.c-bm-chip{ display:inline-flex; align-items:center; gap:6px; }
.c-bm-chipweg{ border:0; background:none; padding:0 2px; font:inherit;
  font-size:11px; color:var(--ink-soft); cursor:pointer; line-height:1; }
.c-bm-chipweg:hover{ color:var(--terra-tekst); }
.c-bm-kaartacties{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.c-bm-vlak{ display:flex; flex-direction:column; gap:var(--sp-10); }

@media (max-width:699px){
  /* Mobiel is de benefitlijst · rijen van minstens 44px, geen vergelijken. */
  .c-bm-rij{ grid-template-columns:1fr; gap:var(--sp-6); min-height:44px; }
  .c-bm-lagen{ flex-wrap:wrap; gap:var(--sp-8); }
  .c-bm-balk{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .c-bm-filter{ white-space:nowrap; min-height:44px; }
}

/* ── R126 · 126k/126m/126n · twee leesrichtingen, één werkvlak ───────────
   Vanuit de benefit: waar willen we geraken, en wat is ervoor nodig. Vanuit
   het initiatief: wat doen we, en waarom. De schakelaar staat boven allebei
   op dezelfde plek, samen met de stand en de plaatknop · sinds 126n staat er
   niet altijd één kaart, en dan hoort de stand nog steeds ergens.

   Wat hier wegviel: het lijstpaneel naast de kaart en de inklapper die het
   op smalle schermen verving. De lijst ís nu de eerste kolom (126m), en
   daarmee is er niets meer om in te klappen. */
.c-bm-vertrek{ display:flex; align-items:center; gap:var(--sp-8); }
.c-bm-vertreklabel{ font-size:11.5px; color:var(--ink-mist); }
/* C.3 · de reden waarom iemand niet meebouwt, op het dashboard. Ze staat in
   zijn eigen woorden en dus tussen aanhalingstekens · dit is geen zin van de
   app. */
.pf-bord-vlekreden{ font-size:11px; color:var(--ink-soft); font-style:italic;
  min-width:0; }
.c-bm-werk{ display:flex; flex-direction:column; gap:var(--sp-10); }

/* ── de sporen als kiezer (126n) ─────────────────────────────────────────
   Boven de drempel is kiezen uit een kolom geen kiezen meer. Eén regel per
   rij met haar vier bollen en waar ze stopt, filters op eigenschap en een
   zoekveld · en de kaart klapt open onder de regel waar je klikte. */
.c-bm-kiesbalk{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.c-bm-zoek{ font:inherit; font-size:12px; border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; background:var(--wit); color:var(--ink);
  min-width:200px; }
.c-bm-zoek:focus{ outline:none; border-color:var(--petrol-deep); }
.c-bm-sporen{ background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r-m); padding:4px var(--sp-14) 6px; }
.c-bm-sporenkop, .c-bm-spoor{ display:grid;
  grid-template-columns:minmax(0,1.6fr) auto minmax(0,1.2fr) 20px;
  gap:0 16px; align-items:center; }
.c-bm-sporenkop{ font-size:9.5px; font-weight:var(--gew-zwaar); letter-spacing:.06em;
  color:var(--ink-mist); padding:9px 6px 6px; border-bottom:1px solid var(--line); }
.c-bm-spoor{ width:100%; text-align:left; font:inherit; background:none; border:0;
  border-bottom:1px solid var(--line-zacht); padding:var(--sp-10) 6px; cursor:pointer; }
.c-bm-spoor:hover{ background:var(--cream2); }
.c-bm-spoor.is-open{ background:var(--vul-koppel); border-radius:8px 8px 0 0;
  border-bottom:0; }
.c-bm-spoornaam{ font-size:12.5px; color:var(--ink); }
/* Het getypte deel vet, niet geel · een markering hoort hier te zeggen "dit
   zocht je" en niet "let op". */
.c-bm-spoornaam mark{ background:none; color:inherit; font-weight:var(--gew-zwaar); }
.c-bm-spoorstopt{ font-size:11px; color:var(--ink-soft); }
.c-bm-spoorpijl{ font-size:11px; color:var(--petrol-deep); text-align:right; }
.c-bm-uitklap{ background:var(--vul-koppel); border-radius:0 0 8px 8px;
  padding:4px var(--sp-10) var(--sp-12); margin-bottom:6px; }
.c-bm-uitklap .c-bk-vak{ background:var(--wit); }
.c-bm-leeg{ font-size:12px; color:var(--ink-mist); padding:var(--sp-12) 6px; }

@media (max-width:699px){
  .c-bm-sporenkop, .c-bm-spoor{ grid-template-columns:minmax(0,1fr) 20px; }
  .c-bm-bollen, .c-bm-sporenkop > :nth-child(2),
  .c-bm-sporenkop > :nth-child(3){ display:none; }
  .c-bm-spoorstopt{ grid-column:1; }
  .c-bm-spoor{ min-height:44px; }
  .c-bm-zoek{ min-width:0; width:100%; }
}
}
/* Het vertrekpunt draagt een petrol rand van 1,5px · dat is wat de kaart hier
   zegt: hier begin je te lezen. */
.c-bk-knoop.is-vertrek{ border:1.5px solid var(--petrol-deep); background:var(--vul-koppel); }

@media (max-width:699px){
  /* Mobiel: dezelfde schakelaar bovenaan de lijst, en de kaart eronder. */
  .c-bm-init{ grid-template-columns:1fr; }
  .c-bm-initrij{ min-height:44px; }
}
/* Een knoop waar je naartoe kunt springen leest als aanwijsbaar · geen link
   en geen onderstreping: de knoop zelf is het doel. */
.c-bk-knoop[data-benefit], .c-bk-knoop[data-springinit]{ cursor:pointer; }
.c-bk-knoop[data-benefit]:hover, .c-bk-knoop[data-springinit]:hover{
  border-color:var(--petrol); }
.c-bk-knoop[data-springinit].is-vertrek:hover{ border-color:var(--petrol-deep); }

/* ── R126 · 2.7 · de derde stand ──────────────────────────────────────────
   Een rij en geen toggle: bij golven komen er standen bij vóór "nu", en dan
   hoort de vorm niet te veranderen. "Na afloop" staat er altijd, en is ghost
   zolang geen enkele keten op deze kaart iets te vertellen heeft · hem
   weglaten zou de gebruiker laten raden dat hij bestaat. */
.c-bk-standknop.is-uit{ color:var(--line-ghost); cursor:default; }
.c-bk-standknop.is-uit:hover{ background:none; }
/* De uitspraak van een mens, in de ene rustige tint van R124e · geen
   kleurcode en geen cijfer. Wat iemand zei weegt niet zwaarder omdat het
   goed nieuws is. */
.c-bk-merkwoord.is-uitspraak{ color:var(--ink-soft); font-weight:var(--gew-vet); }

/* ── dit kreeg je mee uit het portfolio ──────────────────────────────────
   Een leesblok op de eerste stap. Het draagt de rust van iets wat vaststaat:
   geen veldranden, geen knoppen, geen kleur die om aandacht vraagt. Wie het
   kent leest eroverheen · wie net binnenkomt vindt hier waarmee hij begint.

   Het kan er niet leeg staan: de bouwer levert niets als er niets meekwam, en
   een regel zonder waarde wordt niet gemaakt. Er is dus geen lege staat om op
   te maken, en dat is met opzet. */
.c-mee{ margin:0 0 var(--sp-14); padding:var(--sp-12) var(--sp-14);
  background:var(--cream2); border-left:3px solid var(--petrol-deep);
  border-radius:0 var(--r-m) var(--r-m) 0;
  display:flex; flex-direction:column; gap:var(--sp-8); }
.c-mee-kop{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.c-mee-titel{ font-size:9.5px; font-weight:var(--gew-zwaar); letter-spacing:.06em;
  text-transform:uppercase; color:var(--petrol-deep); }
.c-mee-bron{ font-size:10px; color:var(--ink-mist); }
/* Label links, waarde rechts · op een telefoon onder elkaar, want twee kolommen
   van elk honderdvijftig pixel zijn geen twee kolommen meer. */
.c-mee-regel{ display:grid; grid-template-columns:minmax(120px,168px) minmax(0,1fr);
  gap:4px var(--sp-12); align-items:baseline; }
.c-mee-label{ font-size:10.5px; color:var(--ink-mist); }
.c-mee-waarde{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.c-mee-zin{ margin:0; font-size:12px; line-height:1.45; color:var(--ink);
  overflow-wrap:anywhere; }
.c-mee-rol{ display:flex; align-items:baseline; gap:7px; font-size:12px; }
.c-mee-rolnaam{ color:var(--ink); }
.c-mee-rolwat{ color:var(--ink-mist); font-size:10.5px; }
@media (max-width:699px){
  .c-mee-regel{ grid-template-columns:1fr; gap:2px; }
}

/* De weg vanuit het leesblok naar het werk. Eén knop in een blok dat verder
   niets doet · hij bewerkt niets, hij brengt je ergens. */
.c-mee-weg{ align-self:flex-start; border:0; background:none; padding:2px 0 0;
  font:inherit; font-size:11.5px; color:var(--petrol-deep); cursor:pointer; }
.c-mee-weg:hover{ text-decoration:underline; }
/* Waar een randvoorwaarde vandaan komt, op haar plan-item. Stil: de zin staat
   al in het item, dit zegt alleen wie hem stelde en hoe zeker het toen was. */
.pl-rvbron{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line-zacht);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:11px; }
.pl-rvbron-kop{ color:var(--ink-mist); }
.pl-rvbron-zeker{ color:var(--terra-tekst); font-weight:var(--gew-vet); }
.pl-rvbron-uitleg{ margin:0; flex:1 1 100%; color:var(--ink-soft); line-height:1.4; }