/* plan.css — het veranderplan als werkoppervlak
   ──────────────────────────────────────────────────────────────
   De componenten zelf staan in componenten.css: .c-lijstrij met haar
   statusrand en hiërarchie, .c-tijdlijn met haar labelkolom en balken,
   .c-filterbalk, .c-segment, .c-statustoggle, .c-vinkje, .c-veldgrid.
   Hier staat waar ze staan: de indeling van het oppervlak, de drie
   arrangementen (lijst, mobiel, tijdlijn) en de kleine bouwstenen die
   alleen dit scherm kent.

   Dit bestand verving in ronde 6 het fase-3-blok uit huisstijl.css, dat
   de SVG-gantt en een eigen actiekaart droeg. Laadt ná huisstijl.css en
   wint daarom waar een oude regel nog zou meespreken.
   ────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   HET OPPERVLAK
   ═══════════════════════════════════════════════════════════════════ */

/* Het veranderplan draagt geen witte kaart: de filterbalk loopt van rand
   tot rand, zoals frame 3a en 3c hem tekenen. Het werkvlak geeft daarom
   zijn eigen padding op; de secties eronder brengen hun eigen ruimte mee. */
.werkvlak-inhoud.anker-planning{ padding:0; }

.pl-plan{
  display:flex;
  flex-direction:column;
}

/* De kopbalk met de weergaveschakelaar. De titel van de ingang staat al
   in de kopregel van de schil, dus hier alleen de knoppen, rechts. */
/* R87 — de zone tussen de paginatitel en de eerste deelplan-kaart nam 383 van
   de 900 px in beslag: twee losse balken boven elkaar met elk hun eigen
   padding. De weergave-wissel en de filters staan nu op één regel, en die
   regel is krapper. Het scherm begint bij het plan, niet bij zijn bediening. */
.pl-kopbalk{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sp-5);
  flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-14) 0;
}

/* De filterbalk staat op één regel: het FILTER-label vooraan, de keuzes
   erachter. Ze stond als twee regels boven elkaar (label, dan de selects) en
   dat kostte 86px voor vier dropdowns. */
.pl-filterbalk{
  flex-direction:row;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-4) var(--sp-5);
  padding-top:var(--sp-4);
  padding-bottom:var(--sp-4);
  border-top:0;
}
/* De kop is een knop die de hele filterrij in- en uitklapt. */
.pl-filter-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  width:auto;
  flex:none;
  font:inherit;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:var(--ink-soft);
}
.pl-filter-telling{
  font-size:var(--t-meta);
  color:var(--petrol-deep);
  font-weight:var(--gew-vet);
}
.pl-filter-chev{ margin-left:var(--sp-2); font-size:var(--t-meta); }
.pl-filter-kop[aria-expanded="false"] .pl-filter-chev{ transform:rotate(-90deg); }

/* De keuzes staan naast elkaar en wrappen pas als het echt niet past. De
   globale select{width:100%} uit huisstijl.css zou ze anders elk over de
   volle breedte zetten; hier krijgen ze weer hun eigen, inhoudsbrede maat. */
.pl-filter-rij{
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4);
}
.pl-filter-select{
  width:auto;
  max-width:100%;
  flex:0 1 auto;
}
.pl-vouw{ margin-left:auto; }

/* Het vlak waarin de deelplannen of de tijdlijn leven. */
.pl-vlak{ padding:var(--pad-werkvlak); }

/* ═══════════════════════════════════════════════════════════════════
   DE LIJST: deelplannen met hun WBS-rijen (frame 3c)
   ═══════════════════════════════════════════════════════════════════ */

/* R87/87d achtergrond-trap — het deelplan is de KAART: pagina canvas #EDE9E1 →
   kaart #FAF8F5 met rand #DDD8CF en radius 10px → en pas de geselecteerde rij
   daarbinnen is wit. Het deelplan stond hier zonder vlak, dus de rijen zweefden
   als losse witte blokken op het canvas en de trap klopte niet. */
.pl-deelplan{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:11px 14px;
  margin-bottom:var(--sp-5);
}
.pl-dp-vraag{
  font-size:var(--t-pil);
  color:var(--ink-mist);
  max-width:64ch;
}
.pl-dp-vouw{
  margin-left:auto;
  flex:none;
  font:inherit;
  font-size:var(--t-meta);
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:var(--sp-1) var(--sp-3);
  cursor:pointer;
}
.pl-dp-vouw[aria-expanded="false"]{ transform:rotate(-90deg); }

/* geen gap meer: de rijen raken elkaar en worden gescheiden door hun hairline,
   zoals in 87a. Een gap plus een hairline leest als twee scheidingen. */
.pl-lijst{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:var(--sp-2);
}

/* De rij is klikbaar; dat mag je zien en met het toetsenbord bereiken. */
.c-lijstrij[role="button"]{ cursor:pointer; }
.c-lijstrij[role="button"]:focus-visible{
  outline:2px solid var(--petrol);
  outline-offset:2px;
}
.c-lijstrij:hover{ background:rgba(18,113,108,.04); }
.c-lijstrij.is-open:hover, .c-lijstrij.is-fab-selected:hover{ background:var(--wit); }

.pl-titel-tekst{
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl-titel-tekst.is-leeg{
  color:var(--ink-soft);
  font-weight:var(--gew-half);
  font-style:italic;
}
.pl-chev{
  flex:none;
  font-size:var(--t-meta);
  color:var(--ink-soft);
}
.c-lijstrij.is-open .pl-chev{ transform:rotate(180deg); }
.c-lijstrij-subpil{ cursor:pointer; border:0; font-family:var(--font-ui); }

/* ═══════════════════════════════════════════════════════════════════
   DE OPEN KAART
   ═══════════════════════════════════════════════════════════════════ */

/* Een veld over de volle breedte, buiten het rooster van vier. */
.pl-veld-vol{ margin-bottom:var(--sp-6); }
.pl-grid-2{ grid-template-columns:repeat(2,1fr); }

.c-lijstrij-body input[type="text"],
.c-lijstrij-body input[type="date"],
.c-lijstrij-body select,
.c-lijstrij-body textarea{
  width:100%;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:7px var(--sp-5); /* 7px, dezelfde hoogte als .c-veldvak-waarde */
}
.c-lijstrij-body textarea{ resize:vertical; line-height:var(--lh-body); }
.c-lijstrij-body .c-veldgrid{ margin-bottom:var(--sp-6); }

/* ── R134 · 124b · de bevestiging op het object ─────────────────
   Onder de statusrij, in de rustige stijl van het paneel. Ze blijft staan
   zolang de mijlpaal op af staat · geen toast, want die is na vijf seconden
   weg en dit is een toestand. */
.pl-afrondregel{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-4);
  margin-top:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);
  background:var(--cream2);
  border-radius:var(--r-kaart);
  font-size:var(--t-klein);
  line-height:var(--lh-lees);
  color:var(--ink);
}
.pl-afrondregel-bol{
  flex:none;
  width:8px; height:8px;
  margin-top:6px;
  border-radius:50%;
  background:var(--petrol-deep);
}
.pl-afrondregel-t{ min-width:0; }

/* R135 — de krans stond hier. Ze is een merkteken op een ruit en niet iets
   van de planning: het mijlpalenblok van de fotowizard draagt haar ook. Ze
   woont nu als .c-krans in componenten.css, met één definitie en twee
   gebruikers. */
.c-lijstrij-titel.pl-titel{
  display:flex;
  align-items:center;
  overflow:visible;
}
.c-lijstrij-titel.pl-titel > .pl-titel-tekst{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ── R133 · 124b · de sparkel bij de afronding ───────────────────
   Zes puntjes uit de ruit, 500 ms, in kleuren die er al zijn. Ze hangt aan de
   body en niet in de rij: de rij knipt (overflow) en zou de punten er meteen
   weer afsnijden · dezelfde valkuil als bij de ruit zelf (les 38). Niets
   vangt de muis: dit is een teken, geen bediening. */
.pl-sparkel{
  position:fixed;
  width:0; height:0;
  pointer-events:none;
  z-index:var(--z-toast);
}
.pl-sparkel-punt{
  position:absolute;
  left:0; top:0;
  width:4px; height:4px;
  margin:-2px 0 0 -2px;
  border-radius:50%;
  background:var(--petrol-light);
  opacity:0;
  animation:pl-sparkel var(--sparkel-duur, 1500ms) ease-out forwards;
}
/* Om en om mint en amber · een vaste verdeling, geen toeval: twee keer
   afronden hoort er hetzelfde uit te zien. */
.pl-sparkel-punt[style*="--beurt: 1"], .pl-sparkel-punt[style*="--beurt:1"]{
  background:var(--geel);
}
@keyframes pl-sparkel{
  0%   { opacity:0;   transform:rotate(var(--hoek)) translateX(var(--r0,8px))  scale(.5); }
  30%  { opacity:.95; }
  100% { opacity:0;   transform:rotate(var(--hoek)) translateX(var(--r1,20px)) scale(1); }
}
/* Wie minder beweging vraagt, krijgt de melding en de kop die wisselt. Dat is
   dan genoeg · de sparkel wordt in JS al overgeslagen, dit is de tweede sluis
   voor wie de stand wisselt terwijl het scherm openstaat. */
/* Wie minder beweging vraagt, verliest de béweging en niet het teken: de
   puntjes verschijnen meteen op hun eindplaats en gaan met de doos weer weg.
   Ze helemaal weglaten zou ook de blijvende krans kosten, en dat is
   informatie, geen effect. */
@media (prefers-reduced-motion:reduce){
  .pl-sparkel-punt{
    animation:none;
    opacity:.95;
    transform:rotate(var(--hoek)) translateX(var(--r1,20px));
  }
}

.pl-status-wrap{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  /* Het blok erboven wisselt · een kiezer, een chip, een meetveld · en niet
     elk van die blokken draagt zijn eigen ondermarge. Zonder ruimte hier
     plakte STATUS tegen de kiezer erboven. */
  margin-top:var(--sp-10);
  margin-bottom:var(--sp-6);
}

/* Het WBS-veld met zijn foutmelding eronder. */
.pl-wbs-veld{ position:relative; }
.pl-wbs-fout{
  display:block;
  margin-top:var(--sp-2);
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--rood);
}
.pl-wbs-fout:empty{ display:none; }

/* R132 · 124b — het overdrachtskaartje stond hier: het blokje "wat er
   overgaat" binnen een bevestigvenster. Dat venster is weg. De beslissing was
   al genomen voor het verscheen, en wat het goed deed · tonen dat er iets
   wisselt en dat er misschien een drager open staat · doet de melding met
   ongedaan maken, zonder ernaar te vragen. */

/* ── R127 · 124a · de twee vlaggen in de kop van band 0 ────────────────
   Twee keuzelijsten naast elkaar, elk met hun label erboven in de
   overline-maat. Op een smal scherm onder elkaar. */
.pl-vlaggen{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-5) var(--sp-7);
  margin:var(--sp-4) 0 var(--sp-5);
  padding:var(--sp-5) var(--sp-6);
  background:var(--cream2);
  border-radius:var(--r-kaart);
}
.pl-vlagvak{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:210px; flex:1 1 210px; }
.pl-vlaglabel{
  font-size:var(--t-overline);
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-mist);
}
/* Zolang er niets gekozen is, staat de lege keuze er gedempt · een zachte
   vraag, geen waarschuwing. */
.pl-vlagkies[data-leeg]{ color:var(--ink-mist); }
/* De chip op de rij is leesvorm, geen knop. */
.pl-vlagchip{ cursor:default; padding:2px 9px; font-size:var(--t-pil); }
.pl-vlagchip:hover{ background:var(--vul-koppel); }
.pl-vlagchip-ic{ color:var(--petrol-deep); }

/* R126 — in de mijlpalenband staat het nummer er als lezing: de band ordent
   op datum en hernummert zelf, dus er valt hier niets te typen. De waarde en
   de reden staan onder elkaar, in de maat van een veldvak. */
.pl-wbs-vast{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.pl-wbs-nr{
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* Afhankelijkheden. */
.pl-afh-blok{ margin-bottom:var(--sp-6); }
.pl-afh-lijst{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:var(--sp-2) 0;
}
.pl-afh-rij{
  display:flex;
  gap:var(--sp-4);
  align-items:center;
}
/* 87g — de keuzeknop draagt nu namen ("Uitrol golf 1"), geen los nummer meer,
   dus krijgt ze de ruimte van het veld en schuift de rest mee. */
.pl-afh-taak{ flex:1 1 200px; min-width:0; }
.pl-afh-type{ flex:1; max-width:240px; }
.pl-afh-type-vast,
.pl-afh-vast{
  flex:1;
  max-width:240px;
  display:flex;
  align-items:center;
  padding:7px var(--sp-5);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:var(--cream2);
  font-size:var(--t-body);
  color:var(--ink-soft);
}

/* Operationele succescriteria. */
.pl-crit-blok{ margin-bottom:var(--sp-6); }
.pl-crit-hint{
  font-size:var(--t-klein);
  color:var(--ink-soft);
  font-style:italic;
  margin-bottom:var(--sp-3);
}
.pl-crit-lijst{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:var(--sp-2);
}
.pl-crit-rij{
  display:flex;
  gap:var(--sp-4);
  align-items:center;
}
/* R127 · rij en suggestielijst onder elkaar. De rij zelf blijft wat ze was. */
.pl-crit-houder{ display:flex; flex-direction:column; }
.pl-crit-tekst{ flex:1; min-width:0; }
/* Stond hier als .gedaan terwijl de rij is-gedaan schrijft · de doorhaling van
   een afgevinkt criterium heeft dus nooit gewerkt. */
.pl-crit-tekst.is-gedaan{
  text-decoration:line-through;
  color:var(--ink-soft);
}



/* De onderregel: de twee vinkjes, subitem, verwijderen. */
.pl-item-acties{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  flex-wrap:wrap;
  padding-top:var(--sp-5);
  border-top:1px solid var(--cream2);
}
/* De type-keuze bovenaan de open kaart: mijlpaal of meetpunt, want die
   bepaalt welke velden eronder verschijnen. */
.pl-typekiezer{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  flex-wrap:wrap;
  padding-bottom:var(--sp-5);
  margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--cream2);
}
/* ── R130 · de zin onder het vinkje in een deelplan ────────────────────
   De tegenhanger van de vraag boven band 0. Ze breekt naar een eigen regel
   (de kiezer is een flex-rij met wrap), en de weg erin is een stille knop in
   koppel-taal · geen tweede zwaar gebaar naast verwijderen. */
.pl-mijl-heel{
  flex-basis:100%;
  margin:var(--sp-1) 0 0;
}
.pl-mijl-verhuis{
  font:inherit; font-family:var(--font-ui); font-size:var(--t-pil);
  font-weight:var(--gew-vet); color:var(--petrol-deep);
  background:none; border:0; padding:0; cursor:pointer;
}
.pl-mijl-verhuis:hover{ text-decoration:underline; }
/* De keuze van de band staat als lijst in het venster: één daad per regel,
   met het nummer erbij, want daarop vind je de band in de lijst terug. */
.pl-verhuis-keuze{
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.pl-verhuis-knop{ justify-content:flex-start; text-align:left; width:100%; }

.pl-verwijder{
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--rood);
  background:none;
  border:0;
  cursor:pointer;
  padding:var(--sp-2) 0;
}
.pl-verwijder:hover{ text-decoration:underline; }

/* ── purpose-tag: soort werk (sensing ronde 1 §3, frame 15a) ── */
.pl-doel-wrap{
  padding-top:var(--sp-5);
  margin-bottom:var(--sp-6);
  border-top:1px dashed var(--line);
}
.pl-doel-label{
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
}
.pl-doel-opt{ font-weight:var(--gew-normaal); color:var(--ink-soft); opacity:.85; }

/* ── sense-making-periode in het onderrand-paneel (18a) ── */
.pl-sensing{
  margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px dashed var(--line);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.pl-sensing-cadans{ width:100%; }
.pl-sensing-tel{ margin:0; font-size:var(--t-klein); color:var(--ink-soft); }
/* Ronde 26 — de zachte go-poort-banner bovenaan de planning (stil, nooit rood) */
.pl-gopoort{
  display:flex; align-items:center; gap:var(--sp-5); width:100%; text-align:left;
  font-family:var(--font-ui); font-size:var(--t-body);
  color:var(--ink-soft); background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--r-m); padding:var(--sp-5) var(--sp-8); margin-bottom:var(--sp-6); cursor:pointer;
}
.pl-gopoort-cta{ margin-left:auto; flex:none; color:var(--petrol-deep); font-weight:var(--gew-vet); white-space:nowrap; }
.pl-gopoort:hover{ border-color:var(--petrol-light); }

/* Ronde 26 K2 — stille groepshints op een plan-item (capaciteit · aanname).
   Amber signaal, nooit terracotta: dit is een melding, geen handeling. */
.pl-groephint{
  margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-5);
  font-size:var(--t-klein); line-height:1.45; color:var(--geel-tekst);
  background:var(--vul-amber-zacht); border-left:2px solid var(--geel);
  border-radius:var(--r-s);
}

/* Ronde 26 §4 — het sociale-dialoog-sjabloon ("+ overleg") */
.pl-overleg-intro{ margin:0 0 var(--sp-6); font-size:var(--t-body); color:var(--ink-soft); line-height:1.5; }
.pl-overleg-lijst{ display:flex; flex-direction:column; gap:var(--sp-4); }
.pl-overleg-rij{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  padding:var(--sp-5) var(--sp-6); border:1px solid var(--line); border-radius:var(--r-m);
  background:#fff;
}
.pl-overleg-rij.is-aan{ border-color:var(--petrol-light); background:var(--cream2); }
/* 26d — "niet in dit traject": rij gedimd + label, niet weg (kompas-conventie) */
.pl-overleg-rij.is-nvt{ opacity:.5; }
.pl-overleg-nvt-lab{ font-size:var(--t-klein); color:var(--ink-soft); font-style:italic; }
.pl-overleg-nvt-terug{ margin-left:auto; border:none; background:none; color:var(--ink-soft); font-size:13px; cursor:pointer; padding:2px 6px; }
.pl-overleg-nvt-terug:hover{ color:var(--ink); }
.pl-overleg-nvt-knop{ margin-left:auto; border:none; background:none; color:var(--ink-soft); font-size:var(--t-pil); cursor:pointer; padding:0; text-decoration:underline; }
.pl-overleg-nvt-knop:hover{ color:var(--ink); }
/* de koppel-select houdt zijn eigen margin-left:auto; de n.v.t.-knop komt erna */
.pl-overleg-rij .pl-overleg-koppel{ margin-left:auto; }
.pl-overleg-rij .pl-overleg-nvt-knop{ margin-left:var(--sp-4); }
/* getekend check-vierkant, geen native checkbox */
.pl-overleg-vink{
  flex:none; width:22px; height:22px; border:1.5px solid var(--line); border-radius:6px;
  background:#fff; cursor:pointer; position:relative; padding:0;
}
.pl-overleg-vink:hover{ border-color:var(--petrol-light); }
.pl-overleg-vink.is-aan{ border-color:var(--petrol); background:var(--petrol); }
.pl-overleg-vink.is-aan::after{
  content:''; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.pl-overleg-naam{ font-weight:var(--gew-vet); color:var(--ink); }
.pl-overleg-koppel{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); }
.pl-overleg-voor{ font-size:var(--t-klein); color:var(--ink-soft); }
.pl-overleg-select{ max-width:min(58vw, 320px); }
.pl-overleg-geenmijl{ margin:var(--sp-6) 0 0; font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; }
@media (max-width:699px){
  .pl-overleg-koppel{ margin-left:0; width:100%; }
  .pl-overleg-select{ flex:1; max-width:none; }
}

.pl-doelpillen{
  display:flex;
  gap:var(--sp-4);
  flex-wrap:wrap;
  margin-top:var(--sp-4);
}
.pl-doelpil{
  display:inline-flex;
  align-items:center;
  gap:7px; /* 7px, tussen sp-3 en sp-4 in */
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  color:var(--ink-soft);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  padding:7px var(--sp-7); /* 7px hoogte-ritme */
  cursor:pointer;
  white-space:nowrap;
}
.pl-doelpil-dot{
  flex:none;
  width:var(--sp-4);
  height:var(--sp-4);
  border-radius:50%;
}
/* FB18-ruling: zenden petrol #12716C, luisteren sensing-tint #8A4A22. Het felle
   actie-terracotta (#C87941) blijft weg van de chip; de was mag familiaal zijn. */
.pl-doelpil-dot[data-doel="zenden"]{ background:var(--petrol); }
.pl-doelpil-dot[data-doel="luisteren"]{ background:var(--terra-tekst); }
.pl-doelpil.is-actief{ font-weight:var(--gew-vet); }
.pl-doelpil.is-actief[data-doel="zenden"]{ color:var(--petrol); border:1.5px solid var(--petrol); background:rgba(18,113,108,.07); }
.pl-doelpil.is-actief[data-doel="luisteren"]{ color:var(--terra-tekst); border:1.5px solid var(--terra-tekst); background:rgba(200,121,65,.07); }
.pl-doel-uitleg{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-body);
  margin-top:var(--sp-4);
}

/* Het stille micro-label op de WBS-rij (frame 15b). */
.pl-doel-chip{
  flex:none;
  font-size:var(--t-mini);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  border-radius:var(--r-xs);
  padding:2px var(--sp-4);
  white-space:nowrap;
}
.pl-doel-chip[data-doel="luisteren"]{ color:var(--terra-tekst); background:rgba(200,121,65,.07); }
.pl-doel-chip[data-doel="zenden"]{ color:var(--petrol); background:rgba(18,113,108,.07); }

/* De koppeling naar een succescriterium of een meetbare rij. */
.pl-critref{
  margin-bottom:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px dashed var(--line);
}
.pl-critref-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
  margin-bottom:7px;
}
.pl-critref-leeg{
  font-size:var(--t-knop);
  color:var(--ink-soft);
  font-style:italic;
}
.pl-critref-bron{
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label);
  color:var(--ink-soft);
  margin:var(--sp-3) 0 var(--sp-2);
}
.pl-critref-lijst{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
}
.pl-critref-pil{
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  padding:var(--sp-2) 11px;
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  background:var(--wit);
  color:var(--ink-soft);
  text-align:left;
  cursor:pointer;
}
.pl-critref-pil[data-aan="1"]{
  background:var(--petrol);
  border-color:var(--petrol);
  color:var(--wit);
}
.pl-mp-drempel{
  font-size:var(--t-knop);
  color:var(--ink-soft);
  margin-top:7px;
}
.pl-mp-verwacht{ margin-bottom:var(--sp-6); }
.pl-mp-resultaat{ margin-bottom:var(--sp-6); }

/* §9: herkomst-chip op een plan-item dat een impact-landing draagt */
.pl-impact-herkomst{ display:inline-flex; align-items:center; font:inherit; font-size:var(--t-pil); font-weight:var(--gew-vet); color:#B4551F; background:#F6E1D6; border:1px solid #E2B49A; border-radius:var(--r-pil,999px); padding:3px 10px; cursor:pointer; margin-bottom:var(--sp-5); }
.pl-impact-herkomst:hover{ background:#F0D4C4; }

/* ── repetitieve meting onder één WBS (punt 7) ── */
.pl-reeks{ margin-bottom:var(--sp-6); }
.pl-reeks-start{ font:inherit; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; padding:2px 0; cursor:pointer; }
.pl-reeks-start:hover{ text-decoration:underline; }
.pl-reeks-kop{ font-size:var(--t-pil); font-weight:var(--gew-vet); letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); margin:2px 0 6px; }
.pl-reeks-lijst{ display:flex; flex-direction:column; gap:6px; }
.pl-reeks-rij{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-reeks-rij.is-nietdoor .pl-reeks-datum{ opacity:.55; text-decoration:line-through; }
.pl-reeks-datum{ flex:0 0 auto; max-width:150px; }
.pl-reeks-waarde{ flex:1 1 90px; min-width:70px; max-width:140px; }
.pl-reeks-nd{ font:inherit; font-size:var(--t-pil); color:var(--ink-soft); background:none; border:1px solid var(--line); border-radius:var(--r-pil,999px); padding:3px 9px; cursor:pointer; white-space:nowrap; }
.pl-reeks-nd:hover{ border-color:var(--ink-soft); }
.pl-reeks-nd.is-aan{ background:var(--terra); color:#fff; border-color:var(--terra); }
.pl-reeks-del{ font:inherit; font-size:14px; line-height:1; color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:2px 4px; }
.pl-reeks-del:hover{ color:var(--terra); }
.pl-reeks-acties{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pl-reeks-cadans{ max-width:150px; }
.pl-reeks-tot{ max-width:150px; }
.pl-reeks-gen{ font:inherit; font-size:var(--t-klein); font-weight:var(--gew-vet); color:#fff; background:var(--petrol-deep); border:0; border-radius:var(--r-pil,999px); padding:5px 13px; cursor:pointer; }
.pl-reeks-los{ font:inherit; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; padding:6px 0 0; cursor:pointer; }
.pl-reeks-los:hover{ text-decoration:underline; }
.pl-reeks-samen{ font-size:var(--t-klein); color:var(--ink); }

/* Kleine hulpteksten binnen een blok: de criteriumhint, de drempelregel,
   de "nog niets om te meten"-melding. Eén rustige stijl. */
.pl-hulp{
  font-size:var(--t-knop);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
}

/* De notitie krijgt wat lucht boven zich. */

/* "+ subitem" staat als tekstlink in de onderregel, naast "verwijderen"
   maar in de petrol-toon in plaats van rood. */
.pl-subitem-link{
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:none;
  border:0;
  cursor:pointer;
  padding:var(--sp-2) 0;
}
.pl-subitem-link:hover{ text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════
   DE PROJECTMIJLPALEN
   ═══════════════════════════════════════════════════════════════════ */

/* R130 — de balk met de mijlpalen als chips stond hier, en daarvoor de
   bewerkbare mijlpaalkaart uit de tijd vóór R124. Allebei weg: de mijlpalen
   van het hele traject wonen in band 0, en daar worden ze ook bewerkt. */

/* ═══════════════════════════════════════════════════════════════════
   HET MOBIELE ARRANGEMENT (frame 3b)
   ═══════════════════════════════════════════════════════════════════ */

.pl-mobiel{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  /* R129 · de FAB hangt rechtsonder in het werkvlak en dekte het laatste
     lijstitem af · je zag het staan en kon er niet bij. De lijst houdt haar
     eigen ruimte vrij: de knop is ongeveer 46px hoog plus sp-8 eronder, dus
     drie keer sp-8 is genoeg met lucht. */
  padding-bottom:calc(var(--sp-8) * 3);
}
/* ── R130 · de mijlpalen op een telefoon ────────────────────────────────
   R129 maakte hier een schuivende strook van rijen. Ze is weg: band 0 staat
   in dezelfde lijst met dezelfde regels, en dan is de strook geen lezing maar
   een herhaling · precies het bezwaar dat haar tegenhanger op het grote
   scherm het leven kostte.

   Wat blijft is de kop van band 0, die hier onder de deelplanrij staat:
   zonder die twee lijsten is er op de telefoon geen plek waar de change
   manager de go-live en de afronding aanwijst. In een rij rekt flex:1 1 210px
   de vakken uit tot ze het hele vlak vullen · twee keuzelijsten met een gat
   van een halve telefoon ertussen · dus staan ze hier onder elkaar. */
.pl-mobiel .pl-vlaggen{ margin:0 0 var(--sp-4); flex-direction:column; gap:var(--sp-4); }
.pl-mobiel .pl-vlagvak{ flex:none; min-width:0; }
.pl-groep{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
/* De rij per deelplan, dichtgeklapt: naam, teller, chevron. */
.pl-dp-rij{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  width:100%;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  text-align:left;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:var(--sp-4) var(--sp-6);
  cursor:pointer;
}
.pl-dp-rij-naam{ flex:1; min-width:0; }
.pl-dp-rij-tel{
  flex:none;
  font-size:var(--t-meta);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
}
.pl-draai-tip{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  text-align:center;
  padding:var(--sp-4) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   DE TIJDLIJN (frame 3a) EN HAAR VOLLEDIG SCHERM (9b)
   ═══════════════════════════════════════════════════════════════════ */

.pl-tijdlijn-vlak{ position:relative; }
.pl-tijdlijn-plot{ min-width:0; }

.pl-zonderdatum{
  margin-top:var(--sp-7);
  padding:var(--sp-6) var(--sp-7);
  background:var(--cream2);
  border-radius:var(--r-l);
}
.pl-zd-kop{
  font-size:var(--t-knop);
  color:var(--ink-soft);
  margin-bottom:var(--sp-3);
}
.pl-zd-item{
  display:block;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:none;
  border:0;
  text-align:left;
  padding:var(--sp-1) 0;
  cursor:pointer;
}
.pl-zd-item:hover{ text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════════
   87e — het popover-kaartje op de tijdlijn
   Het paneel aan de onderrand is vervangen door een kaartje van ~380px
   onder de aangeklikte balk, met een pijltje ernaartoe. Kleuren, fonts en
   vlakken komen uit de globale trap (87d): kaartgrond --wit op canvas,
   rand --line, radius 10px, titel in de UI-font (geen Fraunces in een rij),
   petrol voor alles wat klikbaar is. */
.pl-popover{
  position:fixed;
  z-index:calc(var(--z-sticky) + 40);
  width:380px;
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-veld);
  box-shadow:var(--sch-kaart);
  padding:var(--sp-6) var(--sp-7) var(--sp-5);
}
/* het pijltje naar de balk: twee vierkanten over elkaar, zodat de rand
   doorloopt. --pijl-x komt uit JS en wijst naar het midden van de balk. */
.pl-popover::before,
.pl-popover::after{
  content:"";
  position:absolute;
  left:var(--pijl-x, 40px);
  width:10px; height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--wit);
}
.pl-popover[data-kant="onder"]::before{ top:-6px; border-left:1px solid var(--line); border-top:1px solid var(--line); }
.pl-popover[data-kant="boven"]::before{ bottom:-6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.pl-popover::after{ display:none; }

/* de kopregel: status-teken · nummer · titel · sluiten */
.pl-popover-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.pl-popover-nr{
  flex:none;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  color:var(--petrol-deep);
}
.pl-popover-titel{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--t-body-plus);
  font-weight:var(--gew-vet);
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pl-popover-sluit{
  flex:none;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-kop-l);
  line-height:1;
  color:var(--ink-mist);
  background:none;
  border:0;
  padding:0 0 0 var(--sp-3);
  cursor:pointer;
}
.pl-popover-sluit:hover{ color:var(--ink); }
/* eigenaar en tot-datum onder de titel: één stille regel */
.pl-popover-meta{
  font-size:var(--t-pil);
  color:var(--ink-soft);
  margin-bottom:var(--sp-5);
}
.pl-popover-kop .pl-popover-meta{ flex:none; margin:0; }
.pl-popover-status{ margin-bottom:var(--sp-5); }
/* VAN en TOT naast elkaar; bij een mijlpaal of meetpunt is er één datum. */
.pl-popover-datums{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.pl-popover-datums > *:only-child{ grid-column:1 / span 1; }
/* de voetregel: links de open-teller, rechts de sprong naar de lijst */
.pl-popover-voet{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line-zacht);
}
.pl-popover-open{
  margin-left:auto;
  flex:none;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:none;
  border:0;
  cursor:pointer;
}
.pl-popover-open:hover{ text-decoration:underline; }

/* 87c — op een smal scherm is er naast de balk geen ruimte: hetzelfde
   kaartje wordt daar de kop van een bottom-sheet. */
.pl-popover[data-kant="sheet"]{
  position:fixed;
  left:0; right:0; bottom:0; top:auto;
  width:auto;
  max-width:none;
  border-radius:var(--r-sheet);
  border-bottom:0;
  box-shadow:var(--sch-sheet);
  padding:var(--sp-7) var(--sp-8) var(--sp-8);
}
.pl-popover[data-kant="sheet"]::before{ display:none; }
/* ⑨ — meetpunt-koppeling aan een WBS-plan-item (landt-patroon) */
.pl-meetkoppel-link{ font:inherit; font-size:var(--t-klein); font-weight:var(--gew-half); color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:0; text-align:left; }
.pl-meetkoppel-link:hover{ text-decoration:underline; }
.pl-meetkoppel-ont{ display:block; margin-top:3px; font-size:var(--t-pil); color:var(--ink-soft); background:none; border:0; padding:0; cursor:pointer; }
.pl-meetkoppel-ont:hover{ color:var(--terra-tekst); text-decoration:underline; }
.pl-meetkoppel-kies{ width:100%; margin-top:6px; }

/* Volledig scherm: het vlak neemt het venster over, de tijdlijn krijgt de
   hoogte en de legende wordt een begrensde voet. */
.pl-tijdlijn-vlak.is-fullscreen{
  position:fixed;
  inset:0;
  z-index:var(--z-venster);
  display:flex;
  flex-direction:column;
  background:var(--cream);
  padding:var(--sp-4) var(--sp-9) var(--sp-9);
  margin:0;
  overflow:hidden;
}
.pl-tijdlijn-vlak.is-fullscreen .pl-tijdlijn-plot{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.pl-tijdlijn-vlak.is-fullscreen .c-tijdlijn{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.pl-tijdlijn-vlak.is-fullscreen .c-tijdlijn-as{
  position:sticky;
  top:0;
  /* boven de vaste labelkolom (z-sticky), anders schuift een label bij
     verticaal scrollen dóór de kop heen (punt 3). */
  z-index:calc(var(--z-sticky) + 10);
}
.pl-tijdlijn-vlak.is-fullscreen .c-legende{
  flex:none;
  flex-wrap:nowrap;
  overflow-x:auto;
  margin-top:var(--sp-4);
}
.pl-tijdlijn-vlak.is-fullscreen .pl-zonderdatum{
  flex:none;
  max-height:22vh;
  overflow:auto;
}
.pl-tijdlijn-vlak.is-fullscreen .c-detailpaneel{
  position:absolute;
  left:var(--sp-9);
  right:var(--sp-9);
  bottom:var(--sp-9);
  margin:0;
  /* boven de sticky kop (z 510) en labelkolom (z 500) van de tijdlijn, anders
     tekenen die dwars door het paneel heen en zie je losse velden zonder
     kaart (het "geen block"-symptoom). */
  z-index:calc(var(--z-sticky) + 40);
}
body.pl-fullscreen-actief{ overflow:hidden; }

/* De kopregel van het volledige scherm (frame 9b). */
.pl-fs-kop{
  flex:none;
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-5);
}
.pl-fs-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-nav);
  color:var(--petrol-dark);
  white-space:nowrap;
}
.pl-fs-hint{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  white-space:nowrap;
}
.pl-fs-sluit{
  margin-left:auto;
  flex:none;
  width:var(--sp-14);
  height:var(--sp-14);
  display:grid;
  place-items:center;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-kop-l);
  line-height:1;
  color:var(--ink-soft);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  cursor:pointer;
}
.pl-fs-sluit:hover{ border-color:var(--terra); color:var(--terra); }

/* ═══════════════════════════════════════════════════════════════════
   SMALLE SCHERMEN
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:1100px){
  .pl-kopbalk{ padding:var(--sp-5) var(--sp-10); }
  .pl-filterbalk{ padding:var(--sp-5) var(--sp-10); }
  .pl-vlak{ padding:var(--sp-7) var(--sp-10) var(--sp-10); }
}

@media (max-width:699px){
  .pl-kopbalk{
    justify-content:flex-start;
    padding:var(--sp-5) var(--sp-8);
  }
  .pl-filterbalk{
    padding:var(--sp-4) var(--sp-8);
    gap:var(--sp-3);
    overflow-x:auto;
  }
  .pl-vlak{ padding:var(--pad-mobiel); }
  .pl-afh-rij{ flex-wrap:wrap; }
  .pl-afh-taak{ flex:1 1 100%; }
  .pl-afh-type,
  .pl-afh-type-vast{ flex:1 1 140px; max-width:none; }
  .pl-item-acties{ gap:var(--sp-6); }
  .pl-tijdlijn-vlak.is-fullscreen{ padding:var(--sp-3) var(--sp-5) var(--sp-5); }
  .pl-tijdlijn-vlak.is-fullscreen .c-detailpaneel{
    left:var(--sp-5);
    right:var(--sp-5);
    bottom:var(--sp-5);
  }
  .pl-tijdlijn-vlak.is-fullscreen .pl-fs-kop{
    padding-bottom:var(--sp-3);
    margin-bottom:var(--sp-3);
  }
  /* Op een smal (portret) scherm mogen de titel en de hint de sluitknop niet
     uit beeld duwen: de titel kapt af, de hint vervalt, en het kruisje houdt
     zijn vaste plek rechts (punt 27). */
  .pl-tijdlijn-vlak.is-fullscreen .pl-fs-titel{
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }
  .pl-tijdlijn-vlak.is-fullscreen .pl-fs-hint{ display:none; }
  .pl-tijdlijn-vlak.is-fullscreen .pl-fs-sluit{ flex:none; }
}

/* ── modus-keuze + richting op het meetpunt (sensing ronde 1, frame 13c) ── */
.pl-mp-modus{
  padding-top:var(--sp-5);
  margin-bottom:var(--sp-6);
  border-top:1px dashed var(--line);
}
.pl-mp-modus-kop{ font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--ink-soft); margin-bottom:var(--sp-4); }
.pl-mp-moduskaarten{ display:flex; flex-direction:column; gap:var(--sp-4); }
.pl-mp-moduskaart{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-5);
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--wit);
  padding:11px 13px;
  cursor:pointer;
}
.pl-mp-moduskaart.is-actief{ border:var(--rand-fijn) solid var(--petrol); background:var(--vul-petrol); }
.pl-mp-radio{
  flex:none;
  width:16px; height:16px;
  margin-top:2px;
  border-radius:50%;
  border:var(--rand-fijn) solid var(--line-sterk);
  box-sizing:border-box;
}
.pl-mp-moduskaart.is-actief .pl-mp-radio{ border:5px solid var(--petrol); background:var(--wit); }
.pl-mp-modustekst{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pl-mp-modustitel{ font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--ink); }
.pl-mp-moduskaart.is-actief .pl-mp-modustitel{ color:var(--petrol-dark); }
.pl-mp-modusuitleg{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-lijst); }
.pl-mp-modusnoot{ font-size:var(--t-meta); color:var(--ink-soft); line-height:var(--lh-body); margin-top:var(--sp-4); }

.pl-mp-richting{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.pl-mp-richting-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink-soft); margin-bottom:var(--sp-4); }
.pl-mp-richting-seg{ display:flex; gap:var(--sp-4); }
.pl-mp-richting-knop{
  flex:1;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  color:var(--ink-soft);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:9px var(--sp-6);
  cursor:pointer;
  white-space:nowrap;
}
.pl-mp-richting-knop.is-actief{ border:var(--rand-fijn) solid var(--petrol); background:var(--vul-petrol); color:var(--petrol-dark); font-weight:var(--gew-vet); }
.pl-mp-richting-uitleg{ font-size:var(--t-meta); color:var(--ink-soft); line-height:var(--lh-body); margin-top:var(--sp-4); }


/* ═══ Ronde 87 · planning-correcties ═══════════════════════════════════
   Alle kleuren komen uit de globale trap (87d); Planning voegt er geen toe.
   Wat hier staat is schikking: waar iets komt te staan, niet welke kleur. */

/* de samengevatte meetpunt-rij (R68): het plan tóónt het meetpunt, het
   beheert het niet. Eén regel per meetpunt in plaats van één per meting. */
.pl-meetrij{
  display:flex; align-items:center; gap:var(--sp-4);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-veld);
  padding:9px var(--sp-6); cursor:default;
}
.pl-meetrij-naam{ font-size:var(--t-knop); font-weight:var(--gew-vet); color:var(--ink); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-meetrij-soort{ font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }
.pl-meetrij-stand{ margin-left:auto; font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }
.pl-meetrij-stand.is-laat{ color:var(--rood); font-weight:var(--gew-vet); }
/* 87g — de afhankelijkheid van de reeks: stil tot ze bestaat. */
.pl-meetrij-afh{ display:inline-flex; align-items:center; gap:var(--sp-3); margin-left:var(--sp-4); min-width:0; }
.pl-meetrij-afhghost{
  font:inherit; font-family:var(--font-ui); font-size:var(--t-pil);
  color:var(--line-ghost); background:none; border:0; padding:0; cursor:pointer;
}
.pl-meetrij-afhghost:hover{ color:var(--petrol-deep); text-decoration:underline; }
.pl-meetrij-afhzin{ font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }
.pl-meetrij-afh .pl-afh-taak{ flex:0 1 190px; font-size:var(--t-pil); padding-top:2px; padding-bottom:2px; }
.pl-meetrij-naar{
  flex:none; font:inherit; font-size:var(--t-pil); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:0; padding:0 0 0 var(--sp-3); cursor:pointer;
}
.pl-meetrij-naar:hover{ text-decoration:underline; }

/* de ghost-rij: 13px mist, rij-hoogte, geen rand in rust (R88). De
   sub-variant staat ingesprongen onder de open rij. */
.pl-ghost{ font-size:var(--t-body); color:var(--line-ghost); }
.pl-ghost--sub{ margin-left:var(--sp-8); }

/* ⋯ op de rij: rustig tot je erover gaat. */
/* §CC — de open-teller op een plan-rij: rechts, tussen de statusdot en de ⋯,
   en hij verspringt niet als de rij openklapt. */
.pl-rijteller{ flex:none; margin-left:var(--sp-3); }
.pl-meer{
  flex:none; font:inherit; font-size:15px; line-height:1; color:var(--ink-mist);
  background:none; border:0; padding:2px var(--sp-3); cursor:pointer; border-radius:var(--r-s);
}
.pl-meer:hover{ color:var(--ink); background:var(--cream2); }

/* het bevestig-kaartje bij verwijderen (R90): klein, in de rij, gevolg erbij. */
.pl-bevestig{
  flex-basis:100%; display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  margin-top:var(--sp-4);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-veld);
  padding:9px var(--sp-6);
}
.pl-bevestig-t{ font-size:var(--t-klein); color:var(--ink); min-width:0; }
.pl-bevestig-nee, .pl-bevestig-ja{
  flex:none; font:inherit; font-size:var(--t-pil); font-weight:var(--gew-vet);
  background:none; border:0; padding:2px var(--sp-3); cursor:pointer; border-radius:var(--r-s);
}
/* R88 — de tweede handeling op de ⋯: van een plan-item een meetpunt maken.
   Stille vorm, want verwijderen blijft het zwaarste gebaar op deze kaart. */
.pl-bevestig-meet{
  font:inherit; font-family:var(--font-ui); font-size:var(--t-pil);
  font-weight:var(--gew-vet); color:var(--petrol-deep);
  background:none; border:0; padding:0 var(--sp-3); cursor:pointer;
}
.pl-bevestig-meet:hover{ text-decoration:underline; }
.pl-bevestig-nee{ color:var(--ink-soft); }
.pl-bevestig-nee:hover{ color:var(--ink); }
.pl-bevestig-ja{ color:var(--rood); }
.pl-bevestig-ja:hover{ background:rgba(192,86,58,.10); }

@media (max-width:699px){
  .pl-meetrij{ flex-wrap:wrap; row-gap:var(--sp-2); }
  .pl-meetrij-naam{ flex:1 1 100%; }
  .pl-meetrij-stand{ margin-left:0; }
  .pl-meetrij-naar{ margin-left:auto; }
}


/* ═══ R87/87d · de trap toegepast op het planningscherm ═══════════════
   Elke waarde hieronder komt uit de globale trap; Planning schikt alleen. */

/* deelplan-kop: Fraunces 600 14px petrol-dark, sub 11px ghost. */
.pl-deelplan .c-deelplan-titel{ font-size:14px; }
.pl-deelplan .c-deelplan-kop{ gap:var(--sp-4); }

/* rij-inhoud: 12px ink; het WBS-nummer 11px 600 petrol; de titel is gewone
   rij-inhoud, geen nadruk — nadruk (600) is voor wat klikt. */
.pl-lijst .c-lijstrij-nr{ font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep); }
.pl-lijst .pl-titel-tekst{ font-size:var(--t-klein); font-weight:var(--gew-normaal,400); color:var(--ink); }
.pl-lijst .c-lijstrij-waarschuwing{ font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--rood); }
.pl-lijst .c-lijstrij-meta{ font-size:var(--t-pil); color:var(--ink-mist); }
.pl-meer{ font-size:13px; letter-spacing:2px; }

/* ghost-rij: 13px mist, binnen de kaart, zonder eigen vlak. */
.c-mensen-ghost.pl-ghost{ font-size:var(--t-body); color:var(--line-ghost); padding:var(--sp-4) 0 0; text-align:left; }
.c-mensen-ghost.pl-ghost--sub{ padding:var(--sp-4) 0 0 22px; }

/* de meetpunt-rij deelt de rij-anatomie: plat op de kaart, hairline eronder. */
.pl-meetrij{
  background:none; border:0; border-bottom:1px solid var(--line-zacht);
  border-radius:0; padding:var(--sp-4) 0; font-size:var(--t-klein);
}
.pl-lijst > .pl-meetrij:last-child{ border-bottom:0; }
.pl-meetrij-naam{ font-size:var(--t-klein); font-weight:var(--gew-normaal,400); }
.pl-meetrij-soort{ font-size:var(--t-pil); color:var(--ink-mist); }
.pl-meetrij-stand{ font-size:var(--t-pil); color:var(--ink-mist); }

/* de titel staat links naast het WBS-nummer, niet gecentreerd: de rij leest
   van links naar rechts (nummer · naam · meta · stand). Het was een <button>
   en die centreert zijn inhoud van zichzelf. */
.pl-lijst .c-lijstrij-titel{
  justify-content:flex-start;
  text-align:left;
  font-size:var(--t-klein);
  font-weight:var(--gew-normaal,400);
}
.pl-lijst .c-lijstrij[data-niveau="2"] .c-lijstrij-titel,
.pl-lijst .c-lijstrij[data-niveau="3"] .c-lijstrij-titel{ font-size:var(--t-klein); }

/* R87 — de succescriterium-koppeling in de koppel-taal: gekoppeld is een
   koppel-chip (#EAF1F0, petrol-deep, ↗ naar de bron, ✕ om los te maken), de
   rest zit achter één stille kiezer. */
.pl-critref-lijst{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
.pl-critref-chip{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.pl-critref-chip-t{
  font:inherit; font-size:var(--t-pil); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:0; padding:0; cursor:pointer;
}
.pl-critref-chip-t:hover{ text-decoration:underline; }
.pl-critref-chip-x{
  font:inherit; font-size:var(--t-overline); color:var(--petrol-deep);
  background:none; border:0; padding:0; cursor:pointer; opacity:.65;
}
.pl-critref-chip-x:hover{ opacity:1; }
.pl-critref-kies{ width:auto; max-width:100%; flex:0 1 auto; font-size:var(--t-pil); }

/* R124 — de bevestiging op een gemigreerde mijlpaal waarvan de dag voorbij is.
   Stil: het is een vraag van de app, geen waarschuwing over de mijlpaal. */
.pl-uitbalk{
  font:inherit;
  font-size:var(--t-klein);
  color:var(--ink-mut, #8A867E);
  background:none;
  border:1px dashed var(--line-hard, #C9C2B4);
  border-radius:var(--r-pil);
  padding:2px var(--sp-4);
  cursor:pointer;
}
.pl-uitbalk:hover{ color:var(--ink); border-color:var(--ink-mut, #8A867E); }