/* componenten.css — de bouwstenen van de Cohentis-companion.

   Samengesteld uit vier deelbestanden, elk gebouwd tegen de designframes:
     A schil       zijmenu, icoonrail, tabbalk, kopregel, kruimelpad
     B kaart       kaart, pil, dot, chip, meter, waarom-regel, aandacht-laag
     C interactie  knop, FAB, venster, sheet, toast, filterbalk, carrousel
     D lijst       WBS-rij, actiekaart, fundament-rij, opbouwrij, tijdlijn

   Elke waarde verwijst naar tokens.css. Er staat hier geen kale hex,
   geen kale rgba en geen kale radius. Laad tokens.css altijd eerst.

   Klassen dragen het voorvoegsel c-. Toestanden staan op data-attributen
   waar de app ze al zo stuurt, en anders op een is-klasse. */


/* ══════════════════════════════════════════════════════════════
   _comp-a-schil.css
   ══════════════════════════════════════════════════════════════ */

/* _comp-a-schil.css — de navigatieschil van de Cohentis-companion.
   Zijmenu (desktop), icoonrail (tablet), tabbalk (mobiel), plus het
   trajectblok, de opbouwlijst, het helper-blok en de kopregel.
   Gedestilleerd uit de frames 1a, 1b, 4a, 6a, 7a, 8a en 9a.
   Alle waarden verwijzen naar tokens.css. Waar een token ontbreekt staat
   de letterlijke waarde met een comment erbij. */


/* ═══════════════════════════════════════════════════════════════════
   ZIJMENU, de donkere kolom op desktop (1a, 4a, 6a, 7a, 8a)
   ═══════════════════════════════════════════════════════════════════ */

/* De schil zelf, 264px breed, alleen zichtbaar op desktop. */
.c-zijmenu{
  display:none;
  flex:none;
  width:var(--w-zijmenu);
  background:var(--schil);
  color:var(--op-vol);
  flex-direction:column;
  padding:22px 0 var(--sp-9); /* 22px boven, staat niet in de ruimteschaal */
  font-family:var(--font-ui);
}

/* Het woordmerk met de dubbele driehoek, bovenaan het zijmenu. */
.c-merk{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:0 var(--sp-10) var(--sp-9);
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-merk);
}
.c-merk .c-punt{ color:var(--terra); } /* de punt achter cohentis */

/* 116f — het app-label rechtsboven in de merk-regel: CHANGE PLAN · CHANGE
   PORTFOLIO · CHANGE MISSIE. Het is een etiket en geen kop: 8px caps, één regel,
   en het breekt niet. De kleur is het accent-licht van de schil waarop het
   staat; die variabele wordt per app op #zijmenu gezet (epic6.css, 116f), dus
   het label verkleurt vanzelf mee met de app.

   margin-left:auto duwt het naar de rechterrand van de merk-regel. De regel
   heeft een baseline die door het woordmerk van 20px bepaald wordt; align-self
   houdt het label op de hoogte van dat woord in plaats van eronder te zakken. */
.c-merk-app{
  margin-left:auto;
  align-self:center;
  font-size:8px;
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--petrol-light);
  white-space:nowrap;
}

/* Het logo, 34x28 in het zijmenu. Geen maattoken, de verhouding is vast. */
.c-logo{
  flex:none;
  width:34px;
  height:28px;
}

/* Het trajectblok onder het merk: naam plus opslagstatus (1a, 6a, 7a). */
.c-traject{
  padding:0 var(--sp-10) var(--sp-8);
  border-bottom:1px solid var(--op-lijn);
}
/* Frame 7a: klikbaar blok zodra het menu erachter opengaat. Extra klasse,
   niet in de oorspronkelijke lijst, hier gemeld. */
.c-traject.is-open{
  margin:0 var(--sp-5);
  padding:var(--sp-5);
  border-bottom:0;
  border-radius:var(--r-l);
  background:var(--op-vlak);
  border:1px solid var(--mint-rand-sterk);
  cursor:pointer;
}

/* De trajectnaam is tegelijk de knop naar het opslagmenu. Als knop erft
   ze de kleur van de browser en niet die van de schil, dus zetten we
   kleur, familie en de knop-resets expliciet. */
/* R127 · 124a — de afrondingsregel onder de bewaarstand. Ze leest de
   afrondingsmijlpaal en zet niets; zonder vlag staat ze er niet. */
.c-traject-afronding{
  margin-top:var(--sp-3);
  font-size:var(--t-klein);
  line-height:var(--lh-lijst);
  color:var(--op-rust);
}
.c-traject-naam{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-s);
  line-height:var(--lh-strak);
  color:var(--op-vol);
  background:none;
  border:0;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.c-traject-naam:hover{ color:var(--petrol-light) }
/* Frame 6a: nog naamloos traject, cursief en gedempt. Extra klasse, gemeld. */
.c-traject-naam.is-leeg{
  font-style:italic;
  color:var(--op-icoon);
}

/* De opslagregel met bolletje, in het zijmenu en in het trajectmenu (7a).
   Standaard staat ze op een licht vlak, zoals in de flyout. Op de donkere
   schil neemt ze de zachte variant aan. */
.c-opslagstatus{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-top:5px; /* 5px, tussen sp-2 en sp-3 in */
  font-size:var(--t-pil);
  color:var(--ink-soft);
}
.c-zijmenu .c-opslagstatus,
.c-rail .c-opslagstatus{ color:var(--op-meta); }
/* R71-review — de bewaarmelding in het zijmenu is één stille regel (10.5px), geen
   statusbolletje. "nog niet bewaard" = mint, geen amber (amber is een statuskleur
   voor iets dat mis is; niet-bewaard-in-verkenmodus is de rust-toestand). */
.c-zijmenu .c-opslagstatus{ font-size:10.5px; white-space:nowrap; }
.c-zijmenu .c-opslagstatus-dot{ display:none; }
.c-zijmenu .c-opslagstatus[data-stand="amber"]{ color:var(--petrol-light); }
.c-opslagstatus-dot{
  flex:none;
  width:7px;   /* diameter van het statusbolletje, geen maattoken */
  height:7px;
  border-radius:50%;
  background:var(--groen);
}
/* De drie standen (punt 9/11): groen alles bewaard, amber wijzigingen open,
   rood langer dan tien minuten niet bewaard. */
.c-opslagstatus[data-stand="groen"] .c-opslagstatus-dot{ background:var(--groen); }
.c-opslagstatus[data-stand="amber"]{ color:var(--geel-tekst); }
.c-opslagstatus[data-stand="amber"] .c-opslagstatus-dot{ background:var(--geel); }
.c-opslagstatus[data-stand="rood"]{ color:var(--rood); }
.c-opslagstatus[data-stand="rood"] .c-opslagstatus-dot{ background:var(--rood); }


/* ═══════════════════════════════════════════════════════════════════
   NAVIGATIE in het zijmenu (1a, 4a, 6a, 8a)
   ═══════════════════════════════════════════════════════════════════ */

/* De lijst met hoofdbestemmingen. */
.c-nav{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  padding:var(--sp-7) var(--sp-5);
}

/* Eén navigatierij. In rust doorzichtige linkerrand, zodat de actieve
   rand geen sprong veroorzaakt. */
.c-nav-item{
  display:flex;
  align-items:center;
  gap:11px; /* 11px, zit tussen sp-5 en sp-6 in */
  padding:var(--pad-navitem);
  border-radius:var(--r-veld);
  border-left:var(--rand-status) solid transparent;
  font-size:var(--t-nav);
  color:var(--op-rust);
  cursor:pointer;
  text-decoration:none;
  /* het item is een knop; browsers centreren knoptekst standaard */
  text-align:left;
  font-family:var(--font-ui);
  background:none;
  border-top:0; border-right:0; border-bottom:0;
  width:100%;
}
.c-nav-item.is-actief{
  background:var(--op-vlak);
  border-left-color:var(--terra);
  color:var(--op-vol);
  font-weight:var(--gew-vet);
}
/* (punt 37 — .c-nav-item.is-uit geschrapt: lege nav-ingangen worden niet meer
   gedimd en zijn altijd klikbaar; er is geen visueel onderscheid meer.) */

/* De icoonkolom, vast 16px zodat alle labels uitlijnen. */
.c-nav-icoon{
  flex:none;
  width:16px; /* breedte van de icoonkolom, geen maattoken */
  text-align:center;
}
.c-nav-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Telbadge rechts in de rij, terracotta gevuld. */
.c-nav-badge{
  flex:none;
  margin-left:auto;
  background:var(--terra);
  color:var(--wit);
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  border-radius:var(--r-pil);
  padding:var(--sp-1) var(--sp-4);
}
/* Neutrale telling, bijvoorbeeld nul acties (8a). */
.c-nav-badge.is-neutraal{
  background:var(--op-badge);
  color:var(--wit);
}

/* De scheiding tussen de hoofdnavigatie en het fundament (4a, 6a, 8a). */
.c-nav-scheiding{
  margin:var(--sp-3) var(--sp-5) 0;
  padding-top:var(--sp-6);
  border-top:1px solid var(--op-lijn);
}

/* Het fundament-item. Actief krijgt het de mint-behandeling in plaats van
   de terracotta rand (4a, 6a). */
.c-nav-item.is-fundament.is-actief{
  background:var(--vul-mint);
  border-left-color:transparent;
  color:var(--petrol-light);
  font-weight:var(--gew-vet);
}

/* De teller rechts in een navigatierij, zoals 15/16 of "nog leeg". */
.c-nav-teller{
  flex:none;
  margin-left:auto;
  font-size:var(--t-meta);
  font-weight:var(--gew-vet);
  color:var(--op-meta);
  white-space:nowrap;
}
/* Alles af, 16/16 in mint (8a). Extra klasse, niet in de lijst, gemeld. */
.c-nav-teller.is-af{
  color:var(--petrol-light);
}

/* R90 · de rapport-groep onder Het kompas. Uitklap zoals Het kompas: een kop
   met ▾ en daaronder één rij per rapport. De rij ís het rapport. */
.c-nav-groep{ display:flex; flex-direction:column; }
.c-nav-item.c-nav-rapport{ font-weight:var(--gew-vet); }
.c-nav-item.c-nav-rapport.is-open{ background:var(--op-vlak); color:var(--op-vol); }
.c-nav-pijl{
  flex:none; margin-left:var(--sp-4); font-size:var(--t-meta); color:var(--op-meta);
  transition:transform 140ms ease-out;
}
.c-nav-item.c-nav-rapport.is-open .c-nav-pijl{ transform:rotate(180deg); }
/* De subrijen springen 22px in, zodat ze onder het label van de kop hangen. */
.c-nav-sublijst{ display:flex; flex-direction:column; gap:1px; padding:var(--sp-2) var(--sp-5) var(--sp-3); }
.c-nav-subitem{
  display:block; width:100%; text-align:left;
  padding:var(--sp-3) var(--sp-5) var(--sp-3) 22px;
  border:0; border-radius:var(--r-veld); background:none; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; color:var(--op-rust);
}
.c-nav-subitem:hover{ color:var(--op-vol); background:var(--op-vlak-zacht); }
.c-nav-subitem.is-actief{ color:var(--op-vol); font-weight:var(--gew-vet); background:var(--op-vlak); }

/* R89 · het TEAM-etiket op de kop. Geen slot: de weergave gaat gewoon open,
   alleen de woorden staan er zonder licentie als balkjes in. */
.c-nav-tag{
  flex:none;
  margin-left:auto;
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  letter-spacing:.06em;
  color:var(--op-meta);
  border:1px solid var(--op-lijn);
  border-radius:var(--r-pil);
  padding:1px var(--sp-4);
}
.c-nav-item.c-nav-rapport:hover .c-nav-tag{ color:var(--op-vol); }
.c-nav-tag{ margin-left:auto; }


/* ═══════════════════════════════════════════════════════════════════
   DE OPBOUW, sectielabel en fasenlijst in het zijmenu (1a)
   ═══════════════════════════════════════════════════════════════════ */

/* Het bovenschrift boven een sectie in het zijmenu. */
.c-sectielabel{
  padding:var(--sp-6) var(--sp-10) var(--sp-4);
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-sectie);
  color:var(--op-uit);
}

/* De drie fasen van de opbouw, krapper dan de hoofdnavigatie. */
.c-opbouwlijst{
  display:flex;
  flex-direction:column;
  gap:1px; /* 1px, krapper dan sp-1 */
  padding:0 var(--sp-5);
}
.c-opbouw-item{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-6);
  font-size:var(--t-body);
  color:var(--op-rust);
}
/* Nog niet begonnen fase. */
.c-opbouw-item.is-uit{
  color:var(--op-half);
}
.c-opbouw-item .c-nav-teller{
  font-weight:var(--gew-normaal);
  color:var(--op-uit);
}

/* Het bolletje voor de fase: gevuld petrol met vinkje, of leeg met rand. */
.c-opbouw-bol{
  flex:none;
  width:var(--sp-9);  /* 18px, valt samen met de ruimteschaal */
  height:var(--sp-9);
  border-radius:50%;
  background:var(--petrol);
  display:grid;
  place-items:center;
  font-size:var(--t-micro);
  color:var(--wit);
}
.c-opbouw-item.is-uit .c-opbouw-bol{
  background:none;
  border:var(--rand-fijn) solid var(--op-rand);
}


/* ═══════════════════════════════════════════════════════════════════
   ICOONRAIL, het zijmenu op tablet (9a)
   ═══════════════════════════════════════════════════════════════════ */

/* De rail van 64px, alleen zichtbaar op tablet. */
.c-rail{
  display:none;
  flex:none;
  width:var(--w-rail);
  background:var(--schil);
  flex-direction:column;
  align-items:center;
  padding:var(--sp-9) 0;
  gap:var(--sp-2);
  font-family:var(--font-ui);
}
/* Het logo in de rail is kleiner en houdt afstand tot de eerste knop. */
.c-rail .c-logo{
  width:30px;
  height:25px;
  margin-bottom:var(--sp-7);
}

/* Eén icoonknop van 44x44, groot genoeg voor een vinger. */
.c-rail-item{
  position:relative;
  box-sizing:border-box;
  width:var(--w-rail-item);
  height:var(--w-rail-item);
  border-radius:var(--r-l);
  display:grid;
  place-items:center;
  color:var(--op-icoon);
  font-size:18px; /* icoongrootte in de rail, geen typetoken */
  cursor:pointer;
  border-left:var(--rand-status) solid transparent;
}
.c-rail-item.is-actief{
  /* de rail vult iets sterker dan het zijmenu: .12 in plaats van .10 */
  background:var(--op-lijn);
  border-left-color:var(--terra);
  color:var(--op-vol);
}
/* De telbadge hangt in de hoek van de icoonknop. */
.c-rail-item .c-nav-badge{
  position:absolute;
  top:var(--sp-2);
  right:var(--sp-2);
  margin-left:0;
  font-size:var(--t-mini);
  padding:0 var(--sp-2);
}

/* De scheiding boven het fundament. In het frame getekend als bovenrand
   van die knop, hier als losse lijn. */
.c-rail-scheiding{
  flex:none;
  width:var(--sp-16);
  height:1px;
  margin:var(--sp-4) 0 var(--sp-3);
  background:var(--op-lijn-rail);
}

/* Het opslagbolletje onderaan de rail. */
.c-rail-autosave{
  margin-top:auto;
  flex:none;
  width:9px;  /* diameter van het bolletje, geen maattoken */
  height:9px;
  border-radius:50%;
  background:var(--groen);
}
.c-rail-autosave[data-stand="amber"]{ background:var(--geel); }
.c-rail-autosave[data-stand="rood"]{ background:var(--rood); }


/* ═══════════════════════════════════════════════════════════════════
   TABBALK, de navigatie op mobiel (1b)
   ═══════════════════════════════════════════════════════════════════ */

/* De balk onderaan het scherm, vier gelijke tabs. */
.c-tabbalk{
  display:none;
  position:relative;
  z-index:var(--z-sticky);
  flex:none;
  border-top:1px solid var(--line);
  background:var(--cream);
  padding:var(--sp-4) var(--sp-3) 22px; /* 22px onder, ruimte voor de home-indicator */
  font-family:var(--font-ui);
}

.c-tab{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px; /* 3px, krapper dan sp-2 */
  font-size:var(--t-overline);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
  letter-spacing:normal;
  cursor:pointer;
  text-decoration:none;
}
.c-tab.is-actief{
  font-weight:var(--gew-zwaar);
  color:var(--petrol-deep);
}
.c-tab.is-uit{
  color:var(--line-sterk);
  cursor:default;
}
.c-tab-icoon{
  font-size:var(--t-kop-xl); /* 19px, hier als icoongrootte */
  line-height:1;
}
.c-tab-label{
  white-space:nowrap;
}
/* Telbadge boven het icoon van een tab. */
.c-tab-badge{
  position:absolute;
  top:-3px; /* net boven het icoon, geen ruimtetoken */
  right:var(--sp-12);
  background:var(--terra);
  color:var(--wit);
  font-size:var(--t-mini);
  font-weight:var(--gew-zwaar);
  border-radius:var(--r-pil);
  padding:0 5px; /* 5px, tussen sp-2 en sp-3 in */
}


/* ═══════════════════════════════════════════════════════════════════
   HELPER-BLOK, de zachte duw onderin het zijmenu (1a, 8a)
   ═══════════════════════════════════════════════════════════════════ */

/* Blok dat zichzelf naar de onderkant duwt met margin-top:auto. */
.c-helper{
  margin:auto var(--sp-7) 0;
  background:var(--op-vlak-zacht);
  border:1px solid var(--mint-rand-zacht); /* companion-kaart: subtiele mintrand (23c) */
  border-radius:var(--r-toast);
  padding:var(--sp-6) var(--sp-7);
}
/* Mint-variant zodra het traject bijna af is (8a). */
.c-helper.is-afronding{
  background:var(--vul-mint-zacht);
  border-color:var(--mint-rand);
}
.c-helper-kop{
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-breed);
  color:var(--petrol-light);
}
.c-helper-tekst{
  font-size:var(--t-body);
  line-height:var(--lh-ruim);
  margin-top:5px; /* 5px, tussen sp-2 en sp-3 in */
  color:var(--op-tekst);
}
.c-helper-cta{
  display:inline-block;
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--terra);
  margin-top:7px; /* 7px, tussen sp-3 en sp-4 in */
  cursor:pointer;
  text-decoration:none;
}

/* De reisleider-kaart (22c): één volgende stap in het zijmenu, mint-op-donker
   (#0E4F4B). Zelfde plek als "Nog open", maar nu uit de data-staat. */
.c-reisleider{
  margin:auto var(--sp-7) 0;
  background:var(--petrol-deep);
  border-radius:var(--r-toast);
  padding:var(--sp-6) var(--sp-7);
}
.c-reisleider-label{
  font-size:var(--t-meta); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-breed);
  text-transform:uppercase; color:var(--petrol-light);
}
.c-reisleider-tekst{
  font-size:var(--t-body); line-height:var(--lh-ruim); margin-top:6px; color:rgba(250,248,245,.85);
}
.c-reisleider-cta{
  display:inline-block; font-family:var(--font-ui); font-size:var(--t-knop); font-weight:var(--gew-vet);
  color:#E8B99A; background:none; border:0; padding:0; margin-top:8px; cursor:pointer; text-align:left;
}
.c-reisleider-cta:hover{ text-decoration:underline; }
/* Op het dashboard (mobiel) staat dezelfde kaart in de gewone leesstroom i.p.v.
   onderaan het zijmenu; de `margin:auto ... 0` die de kaart in het menu naar
   beneden duwt, moet daar terug naar normale blok-marges. */
.c-helper.is-dashboard,
.c-reisleider.is-dashboard{ margin:0 0 var(--sp-6); }


/* ═══════════════════════════════════════════════════════════════════
   KOPREGEL van het werkvlak, met titel of met kruimelpad (1a, 4a)
   ═══════════════════════════════════════════════════════════════════ */

/* De kopregel boven het werkvlak. R84-kruimelupdate: geen eigen kopstrook meer
   — geen achtergrond, geen onderrand, niet sticky. De kopregel is gewoon de
   eerste regel óp het canvas, binnen dezelfde middenkolom als de kaarten. */
.c-kopregel{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-8);
  row-gap:0;
  padding:var(--pad-schil);
  border-bottom:0;
  background:transparent;
}
/* Draagt de kopregel alleen een kruimelpad, dan is hij een slag krapper (4a). */
.c-kopregel:has(> .c-kruimel){
  padding:var(--sp-7) var(--sp-14);
  gap:var(--sp-6);
}

.c-kopregel-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-titel);
  color:var(--petrol-dark);
}
.c-kopregel-sub{
  font-size:var(--t-knop);
  color:var(--ink-soft);
  margin-top:var(--sp-1);
}

/* Het kruimelpad: terug, herkomst, scheidingsteken, huidige stap, status. */
.c-kruimel{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-kruimel-terug{
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}
.c-kruimel-scheiding{
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-kruimel-nu{
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  white-space:nowrap;
}
/* De status van de stap, rechts uitgelijnd, met bolletje in dezelfde kleur. */
.c-kruimel-status{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:7px; /* 7px, tussen sp-3 en sp-4 in */
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--groen);
  white-space:nowrap;
}
.c-kruimel-status::before{
  content:"";
  flex:none;
  width:var(--sp-4);  /* 8px bolletje, valt samen met de ruimteschaal */
  height:var(--sp-4);
  border-radius:50%;
  background:currentColor;
}


/* ═══════════════════════════════════════════════════════════════════
   ZICHTBAARHEID per breekpunt
   ═══════════════════════════════════════════════════════════════════ */

/* Mobiel: geen zijmenu, geen rail, wel de tabbalk (1b). */
@media (max-width:699px){

  .c-tabbalk{ display:flex; }

  /* De kop van de mobiele schil: merk en trajectnaam op het lichte canvas. */
  .c-merk{
    padding:62px var(--sp-9) var(--sp-6); /* 62px voor de statusbalk van het toestel */
    border-bottom:1px solid var(--line);
    gap:var(--sp-5);
  }
  .c-merk .c-logo{
    width:26px;
    height:22px;
  }
  .c-traject{
    flex:1;
    min-width:0;
    padding:0;
    border-bottom:0;
  }
  .c-traject-naam{
    font-size:var(--t-kop-m);
    color:var(--petrol-dark);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .c-opslagstatus{
    gap:5px; /* 5px, tussen sp-2 en sp-3 in */
    font-size:var(--t-meta);
    color:var(--ink-soft);
  }
  .c-opslagstatus-dot{
    width:var(--sp-3);  /* 6px op mobiel */
    height:var(--sp-3);
  }
  .c-kopregel{
    padding:var(--pad-mobiel);
    gap:var(--sp-5);
  }
}

/* Tablet: de icoonrail vervangt het zijmenu (9a). */
@media (min-width:700px) and (max-width:1100px){
  .c-kopregel[data-vorm="kruimel"]{ padding:var(--sp-6) var(--sp-10) }
  .c-rail{ display:flex; }

  .c-kopregel{
    padding:var(--sp-7) var(--sp-12);
    gap:var(--sp-6);
  }
  .c-kopregel:has(> .c-kruimel){
    padding:var(--sp-7) var(--sp-12);
  }
}

/* Desktop: het volle zijmenu van 264px (1a). */
@media (min-width:1101px){
  .c-zijmenu{ display:flex; }
}

/* ══════════════════════════════════════════════════════════════
   _comp-b-kaart.css
   ══════════════════════════════════════════════════════════════ */

/* _comp-b-kaart.css, de kaart- en statuscomponenten van de Cohentis-companion.
   Kaart met kop en body, statuspil, statusbolletje, ruit, chip, segmented
   control, statustoggle, voortgangsmeter, de waarom-regel en de aandacht-laag.
   Gedestilleerd uit de frames 1a, 1b, 2a, 3a, 3c, 4a, 5a en 9a.
   Alle waarden verwijzen naar tokens.css. Waar een token ontbreekt staat
   de letterlijke waarde met een comment erbij. */


/* ═══════════════════════════════════════════════════════════════════
   KAART, het witte blok met kop en body in het werkvlak (1a, 9a, 1b)
   ═══════════════════════════════════════════════════════════════════ */

/* De kaart zelf: wit vlak, standaardrand, kop en body onder elkaar. */
.c-kaart{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  font-family:var(--font-ui);
  color:var(--ink);
}
/* De grote kaart, zoals het noorden links op het dashboard (1a). */
.c-kaart.is-groot{
  border-radius:var(--r-kaart-groot);
}

/* De kop: nummerbolletje, titelblok en wat rechts in de kop hangt. */
.c-kaart-kop{
  flex:none;
  display:flex;
  align-items:center;
  gap:11px; /* 11px, zit tussen sp-5 en sp-6 in */
  padding:var(--pad-kaartkop);
  background:var(--cream2);
  border-bottom:1px solid var(--line);
}
/* De krappe kop, gebruikt zodra de kaart in een raster van twee staat (9a). */
.c-kaart-kop.is-krap{
  padding:var(--pad-kaartkop-krap);
  gap:var(--sp-5);
}

/* Het genummerde bolletje links in de kop. */
.c-kaart-nr{
  flex:none;
  box-sizing:border-box;
  width:var(--sp-12);  /* 24px, valt samen met de ruimteschaal */
  height:var(--sp-12);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--wit);
  background:var(--petrol);
}
.c-kaart-nr.is-een{ background:var(--petrol); }
.c-kaart-nr.is-twee{ background:var(--terra); }
.c-kaart-nr.is-drie{ background:var(--petrol-deep); }

/* Titel en ondertitel staan samen in één blok, zodat de kop uitlijnt. */
.c-kaart-titelblok{
  min-width:0;
}
.c-kaart-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-m);
  color:var(--petrol-dark);
  white-space:nowrap;
}
.c-kaart-sub{
  font-size:var(--t-pil);
  color:var(--ink-soft);
}
/* In een krappe kop staat alleen de titel, een slag kleiner (9a). */
.c-kaart-kop.is-krap .c-kaart-titel{
  font-size:var(--t-kop-s);
}
.c-kaart-kop.is-krap .c-kaart-sub{
  display:none;
}

/* De body vult de rest van de kaart en stapelt zijn inhoud. */
.c-kaart-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--pad-kaartbody);
}

/* Wat rechts in de kop hangt: een teller, een pil of een doorverwijzing. */
.c-kaart-actie{
  flex:none;
  margin-left:auto;
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}


/* ═══════════════════════════════════════════════════════════════════
   STATUSPIL, het kleine gekleurde label bij een rij of kop (1a, 5a)
   ═══════════════════════════════════════════════════════════════════ */

/* Pil in rust: neutrale vulling, kleine padding, volledig rond. */
.c-pil{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--pad-pil);
  border-radius:var(--r-pil);
  font-size:var(--t-meta);
  /* 87d — de fonttrap kent 400, 600 en 700. De pil stond op 500, een gewicht
     dat in de trap niet bestaat; als telbadge hoort ze op 600. */
  font-weight:var(--gew-vet);
  line-height:var(--lh-lijst);
  white-space:nowrap;
}
.c-pil[data-toon="neutraal"]{
  background:var(--cream2);
  color:var(--ink-soft);
}
.c-pil[data-toon="groen"]{
  background:var(--vul-groen);
  color:var(--groen);
}
.c-pil[data-toon="amber"]{
  background:var(--vul-amber);
  color:var(--geel-tekst);
}
/* De terracotta pil telt nieuwe signalen en roept harder, dus zwaarder. */
.c-pil[data-toon="terra"]{
  background:var(--vul-terra);
  color:var(--terra);
  font-size:var(--t-pil);
  font-weight:var(--gew-zwaar);
}
/* De petrol pil draagt een teller zoals "1 van 3" in de kaartkop (1a). */
.c-pil[data-toon="petrol"]{
  background:var(--cream2);
  color:var(--petrol-deep);
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
}


/* ═══════════════════════════════════════════════════════════════════
   STATUSBOLLETJE, de ronde stip achteraan een rij (3c, 5a, 2a)
   ═══════════════════════════════════════════════════════════════════ */

/* Het bolletje van 11px, de maat uit de lijstrijen van 3c. */
.c-dot{
  flex:none;
  box-sizing:border-box;
  display:inline-block;
  width:11px;  /* 11px, zit tussen sp-5 en sp-6 in */
  height:11px;
  border-radius:50%;
  background:var(--line);
}
.c-dot[data-status="loopt"]{ background:var(--st-loopt); }
.c-dot[data-status="issue"]{ background:var(--st-issue); }
.c-dot[data-status="blok"]{ background:var(--st-blok); }
/* R126 — "af" ontbrak hier als enige van de vier standen, terwijl de toggle,
   de chip, de keuzerij en de legende hem allemaal dragen. Een afgewerkte rij
   kreeg daardoor dezelfde grijze stip als een rij die nog moet beginnen: de
   strook zei "gehaald", de teller zei 1/5, en het bolletje zei niets. */
.c-dot[data-status="af"]{ background:var(--st-af); }
.c-dot[data-status="neutraal"]{ background:var(--line); }
/* Nog niets ingevuld: wit met een dunne rand (3c). */
.c-dot[data-status="leeg"]{
  background:var(--wit);
  border:var(--rand-fijn) solid var(--ink-soft);
}


/* ═══════════════════════════════════════════════════════════════════
   RUIT, mijlpaal gevuld en meetpunt open (3a, 3c, 1a)
   ═══════════════════════════════════════════════════════════════════ */

/* De gevulde ruit is de mijlpaal: een gekanteld vierkant in petrol-deep. */
.c-ruit{
  flex:none;
  box-sizing:border-box;
  display:inline-block;
  width:11px;  /* 11px, gelijk aan het statusbolletje */
  height:11px;
  border-radius:var(--r-2);
  transform:rotate(45deg);
  background:var(--petrol-deep);
}
/* De open ruit is het meetpunt: amber contour, wit hart (tokens · soort-tekens,
   bevestigd in 87d). Hier stond terracotta; dat botst met de regel dat
   terracotta uitsluitend hándelen is, en het maakte meetpunt en mijlpaal twee
   varianten van dezelfde accentkleur in plaats van twee eigen tekens. */
/* ── R135 · de krans ─────────────────────────────────────
   Zes stille puntjes om een merkteken: dit is de afronding, en die is gehaald.
   Dezelfde zes als in de sparkel, maar zonder beweging · de sparkel is het
   moment, de krans is de toestand. Ze wordt getekend uit de data en niet uit
   een timer, dus ze staat er ook na een herlaadbeurt.

   Één definitie, twee gebruikers: de ruit in de planningsrij en het teken in
   het mijlpalenblok van de fotowizard. De straal past zich aan met
   --krans-r, want om een ruit van 9px hoort ze strakker dan om een glyph.

   Let op de ouder: wie knipt, snijdt de punten eraf (les 38). */
.c-krans{ position:relative; }
.c-krans::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:transparent;
  box-shadow:
    calc(var(--krans-r,11px) *  1)     0                                 0 var(--petrol-light),
    calc(var(--krans-r,11px) *  .5)    calc(var(--krans-r,11px) *  .866) 0 var(--geel),
    calc(var(--krans-r,11px) * -.5)    calc(var(--krans-r,11px) *  .866) 0 var(--petrol-light),
    calc(var(--krans-r,11px) * -1)     0                                 0 var(--geel),
    calc(var(--krans-r,11px) * -.5)    calc(var(--krans-r,11px) * -.866) 0 var(--petrol-light),
    calc(var(--krans-r,11px) *  .5)    calc(var(--krans-r,11px) * -.866) 0 var(--geel);
  pointer-events:none;
}
/* De ruit staat zelf 45° gedraaid; de krans hoort recht. */
.c-ruit.c-krans{ overflow:visible; }
.c-ruit.c-krans::after{ transform:rotate(-45deg); }

.c-ruit.is-open{
  background:var(--wit);
  border:var(--rand-ruit) solid var(--geel);
}
/* Naast tekst in een rij of een labelkolom is 11px te zwaar; dan een slag
   kleiner, zodat de ruit een merkteken blijft en geen blikvanger wordt. */
.c-ruit.is-klein{
  width:9px;  /* 9px, het merkteken naast een titel */
  height:9px;
  border-radius:var(--r-1);
}
/* R87/87d — naast een titel is de ruit 9px en houdt ze afstand. Ze stond op
   11px en plakte tegen het eerste woord ("◆Proefweek"), omdat de titelknop
   geen gap heeft.

   R130 — de ruit is een vierkant dat 45° gedraaid staat, dus ze tekent 9·√2 =
   12,73px breed terwijl haar plaats in de rij 9px blijft. De linkerpunt stak
   daardoor 1,86px buiten de titelknop uit, en die knipt (overflow:hidden voor
   het afkappen van lange namen): de punt werd er recht afgesneden. Rechts
   gebeurde dat niet, want daar ving de marge van 6px hem op. Twee pixels
   links geven de punt zijn ruimte terug; rijen zonder ruit schuiven niet mee,
   want die dragen dit element niet. */
.c-lijstrij-titel > .c-ruit,
.c-tijdlijn-labelkolom > .c-ruit{
  width:9px; height:9px; border-radius:var(--r-1);
  margin-left:2px;
  margin-right:var(--sp-3);
}
/* De labelkolom is een flexrij mét gap: daar telde de marge dubbel, waardoor
   de ruit dichter bij het nummer stond dan bij de naam waar ze bij hoort. */
.c-tijdlijn-labelkolom > .c-ruit{ margin-right:0; }


/* ═══════════════════════════════════════════════════════════════════
   CHIP, de keuzeknop boven een lijst (2a) en de herkomstchip (5a)
   ═══════════════════════════════════════════════════════════════════ */

/* Chip in rust: alleen een rand, tekst in de gedempte kleur. */
.c-chip{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  padding:3px 11px; /* 3px en 11px, allebei tussen de ruimtestappen in */
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  background:none;
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
  white-space:nowrap;
  cursor:pointer;
}
/* De gekozen chip vult petrol en keert de tekst om. */
.c-chip.is-actief{
  background:var(--petrol);
  border-color:var(--petrol);
  color:var(--wit);
}

/* De herkomstchip vertelt waar een actie vandaan komt: "uit: ... ↗" (5a). */
.c-chip-herkomst{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--pad-pil);
  background:var(--cream2);
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  font-size:var(--t-meta);
  color:var(--ink-soft);
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}


/* ═══════════════════════════════════════════════════════════════════
   DRAAGVLAKCHIP, één naam met zijn houding (4a)
   ═══════════════════════════════════════════════════════════════════ */

/* De chip draagt een naam plus een teken; de rand vertelt de houding. */
.c-chip-draagvlak{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  padding:3px 11px; /* gelijk aan .c-chip, tussen de ruimtestappen in */
  border:var(--rand-fijn) solid var(--line);
  border-radius:var(--r-pil);
  font-size:var(--t-klein);
  color:var(--ink);
  white-space:nowrap;
}
/* Steunt: dichte petrol rand. */
.c-chip-draagvlak[data-s="steun"]{
  border-color:var(--petrol);
  color:var(--petrol-deep);
}
/* Bezwaar: dichte terracotta rand, het bezwaar staat genoteerd. */
.c-chip-draagvlak[data-s="bezwaar"]{
  border-color:var(--terra);
  color:var(--ink);
}
/* Nog geen uitspraak: gestreepte terracotta rand. */
.c-chip-draagvlak[data-s="open"]{
  border-style:dashed;
  border-color:var(--terra);
  color:var(--ink);
}
/* Niet gesproken: gestreept en gedempt. Afgeleid van de open-variant,
   het frame toont deze houding niet apart. */
.c-chip-draagvlak[data-s="afwezig"]{
  border-style:dashed;
  border-color:var(--line-sterk);
  color:var(--ink-soft);
}


/* ═══════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL, lijst tegenover tijdlijn (3a, 3c)
   ═══════════════════════════════════════════════════════════════════ */

/* Eén omkaderd blok waarin de knoppen tegen elkaar aan staan. */
.c-segment{
  display:inline-flex;
  overflow:hidden;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-m);
}
.c-segment-knop{
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  padding:7px var(--sp-7); /* 7px, tussen sp-3 en sp-4 in */
  border:0;
  background:none;
  color:var(--ink-soft);
  white-space:nowrap;
  cursor:pointer;
}
/* De scheiding zit tussen de knoppen, niet aan de buitenkant. */
.c-segment-knop + .c-segment-knop{
  border-left:1px solid var(--line);
}
.c-segment-knop.is-actief{
  background:var(--petrol);
  color:var(--wit);
}


/* ═══════════════════════════════════════════════════════════════════
   STATUSTOGGLE, de rij statusknoppen in een open kaart (3c)
   ═══════════════════════════════════════════════════════════════════ */

/* De vijf standen naast elkaar; alleen de actieve stand vult.
   De rij breekt bewust niet af over twee regels: dat leest als twee losse
   rijen knoppen en maakt de tiktargets willekeurig. Op mobiel wisselt dit
   component daarom van vorm, zie de statuschip onderaan dit blok. */
.c-statustoggle{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--sp-3);
}
.c-statustoggle-knop{
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  padding:var(--sp-3) var(--sp-6);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:none;
  color:var(--ink-soft);
  white-space:nowrap;
  cursor:pointer;
}
/* De gekozen stand verliest zijn rand en vult met de statuskleur. */
.c-statustoggle-knop.is-actief{
  border-color:transparent;
  color:var(--wit);
  background:var(--st-todo);
}
.c-statustoggle-knop[data-status="todo"].is-actief{ background:var(--st-todo); }
.c-statustoggle-knop[data-status="loopt"].is-actief{ background:var(--st-loopt); }
.c-statustoggle-knop[data-status="issue"].is-actief{ background:var(--st-issue); }
.c-statustoggle-knop[data-status="blok"].is-actief{ background:var(--st-blok); }
.c-statustoggle-knop[data-status="af"].is-actief{ background:var(--st-af); }
/* Semantische kleur voor custom ladders (het inzicht: signaal/sterkte/stadium).
   data-kleur wint van de grijze todo-fallback zodat de actieve pil de betekenis
   draagt: rood/groen voor signaal, petrol voor sterkte/stadium (ronde 13a/b). */
.c-statustoggle-knop.is-actief[data-kleur="rood"]{ background:var(--rood); }
.c-statustoggle-knop.is-actief[data-kleur="groen"]{ background:var(--groen); }
.c-statustoggle-knop.is-actief[data-kleur="petrol"]{ background:var(--petrol); }
.c-statustoggle-knop.is-actief[data-kleur="amber"]{ background:var(--geel); }
/* De kompas-standen benoemen hun kleur als geel (i.p.v. amber), gelijk aan de
   stip .c-kompas-stip.is-geel; zonder deze regel valt de actieve pil terug op de
   grijze default en wordt het label onleesbaar. */
.c-statustoggle-knop.is-actief[data-kleur="geel"]{ background:var(--geel); }
.c-statustoggle-knop.is-actief[data-kleur="terra"]{ background:var(--terra); }
.c-statustoggle-knop.is-actief[data-kleur="neutraal"]{ background:var(--ink-soft); }

/* ── De mobiele vorm: één chip die een keuze-sheet opent ──────────────
   Op een telefoon passen vijf pillen niet naast elkaar. In plaats van
   afbreken toont de kaart de huidige stand als één chip in de kleur van
   die stand. Tikken opent een bottom sheet met de vijf standen onder
   elkaar, elk 44px hoog met een kleurstip en een regel uitleg.
   Hetzelfde patroon draagt straks de statuscyclus van een actie op het
   bord, zodat er maar één manier is om een status te wisselen. */
.c-statuschip{
  display:none;
  align-items:center;
  gap:var(--sp-4);
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  padding:var(--sp-3) var(--sp-6);
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  background:var(--wit);
  color:var(--ink-soft);
  cursor:pointer;
}
.c-statuschip::before{
  content:"";
  flex:none;
  width:var(--sp-5);
  height:var(--sp-5);
  border-radius:50%;
  background:var(--st-todo);
}
.c-statuschip::after{
  content:"\0025BE";
  margin-left:var(--sp-1);
  opacity:.7;
}
.c-statuschip[data-status="loopt"]::before{ background:var(--st-loopt); }
.c-statuschip[data-status="issue"]::before{ background:var(--st-issue); }
.c-statuschip[data-status="blok"]::before{ background:var(--st-blok); }
.c-statuschip[data-status="af"]::before{ background:var(--st-af); }
.c-statuschip[data-kleur="rood"]::before{ background:var(--rood); }
.c-statuschip[data-kleur="groen"]::before{ background:var(--groen); }
.c-statuschip[data-kleur="petrol"]::before{ background:var(--petrol); }
.c-statuschip[data-kleur="amber"]::before{ background:var(--geel); }
.c-statuschip[data-kleur="geel"]::before{ background:var(--geel); }
.c-statuschip[data-kleur="terra"]::before{ background:var(--terra); }
.c-statuschip[data-kleur="neutraal"]::before{ background:var(--ink-soft); }

/* De inhoud van de sheet: vijf regels, elk een volwaardig tiktarget. */
.c-statuskeuze{
  display:flex;
  flex-direction:column;
}
.c-statuskeuze-rij{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  min-height:44px; /* 44px, de ondergrens voor een tiktarget op een telefoon */
  padding:var(--sp-3) var(--sp-8);
  border:0;
  background:none;
  text-align:left;
  font-family:var(--font-ui);
  cursor:pointer;
}
.c-statuskeuze-rij+.c-statuskeuze-rij{ border-top:1px solid var(--cream2); }
.c-statuskeuze-rij.is-actief{ background:var(--cream); }
.c-statuskeuze-dot{
  flex:none;
  width:var(--sp-5);
  height:var(--sp-5);
  border-radius:50%;
  background:var(--st-todo);
}
.c-statuskeuze-rij[data-status="loopt"] .c-statuskeuze-dot{ background:var(--st-loopt); }
.c-statuskeuze-rij[data-status="issue"] .c-statuskeuze-dot{ background:var(--st-issue); }
.c-statuskeuze-rij[data-status="blok"] .c-statuskeuze-dot{ background:var(--st-blok); }
.c-statuskeuze-rij[data-status="af"] .c-statuskeuze-dot{ background:var(--st-af); }
.c-statuskeuze-rij[data-kleur="rood"] .c-statuskeuze-dot{ background:var(--rood); }
.c-statuskeuze-rij[data-kleur="groen"] .c-statuskeuze-dot{ background:var(--groen); }
.c-statuskeuze-rij[data-kleur="petrol"] .c-statuskeuze-dot{ background:var(--petrol); }
.c-statuskeuze-rij[data-kleur="amber"] .c-statuskeuze-dot{ background:var(--geel); }
.c-statuskeuze-rij[data-kleur="geel"] .c-statuskeuze-dot{ background:var(--geel); }
.c-statuskeuze-rij[data-kleur="terra"] .c-statuskeuze-dot{ background:var(--terra); }
.c-statuskeuze-rij[data-kleur="neutraal"] .c-statuskeuze-dot{ background:var(--ink-soft); }
.c-statuskeuze-naam{
  display:block;
  font-size:var(--t-body-plus);
  font-weight:var(--gew-vet);
  color:var(--ink);
}
.c-statuskeuze-uitleg{
  display:block;
  font-size:var(--t-pil);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
}
.c-statuskeuze-rij.is-actief .c-statuskeuze-naam{ color:var(--petrol-deep); }

/* Mobiel: de pillenrij verdwijnt, de chip neemt het over. */
@media (max-width:699px){
  .c-statustoggle{ display:none; }
  .c-statuschip{ display:inline-flex; }
}


/* ═══════════════════════════════════════════════════════════════════
   VOORTGANGSMETER, de flexbalk met vier segmenten (1a, 9a, 2a)
   ═══════════════════════════════════════════════════════════════════ */

/* De balk: vaste volgorde af (groen), loopt (mint), issue (amber), rest.
   De verhouding komt uit de data en staat als flex op elk segment. */
.c-meter{
  display:flex;
  gap:1px; /* 1px haarlijn tussen de segmenten, krapper dan sp-1 */
  overflow:hidden;
  height:var(--sp-4);  /* 8px, valt samen met de ruimteschaal */
  border-radius:var(--r-meter);
  background:var(--cream2);
}
.c-meter-deel[data-status="af"]{ background:var(--groen); }
.c-meter-deel[data-status="loopt"]{ background:var(--petrol-light); }
.c-meter-deel[data-status="issue"]{ background:var(--geel); }
.c-meter-deel[data-status="rest"]{ background:var(--rest); }

/* Op de donkere schil is de meter dunner, zonder haarlijnen, en draagt
   het afgeronde deel mint op een doorschijnende baan (2a). */
.c-meter.op-donker{
  gap:0;
  height:5px;        /* 5px, tussen sp-2 en sp-3 in */
  border-radius:var(--r-3);
  background:var(--op-lijn);
}
.c-meter.op-donker .c-meter-deel[data-status="af"]{ background:var(--petrol-light); }
.c-meter.op-donker .c-meter-deel[data-status="rest"]{ background:none; }


/* ═══════════════════════════════════════════════════════════════════
   WAAROM-REGEL, het noorden in één zin bovenaan het dashboard (1a, 1b)
   ═══════════════════════════════════════════════════════════════════ */

/* Eén lage regel over de volle breedte, met label, citaat en pijl. */
.c-waarom{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  padding:9px var(--sp-7); /* 9px, tussen sp-4 en sp-5 in */
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
}
.c-waarom-label{
  flex:none;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  color:var(--petrol-deep);
  white-space:nowrap;
}
/* Het citaat in Fraunces cursief; het is een stem, geen kopregel. */
.c-waarom-citaat{
  flex:1;
  min-width:0;
  font-family:var(--font-kop);
  font-style:italic;
  font-size:var(--t-nav);
  line-height:var(--lh-lijst);
  color:var(--petrol-deep);
}
/* De reflectieregel (17c): zelfde vorm als de waarom-regel, tekst in Fraunces
   cursief, met een ↗ naar de aannames in Het fundament. */
.c-reflectie-tekst{
  flex:1; min-width:0;
  font-family:var(--font-kop); font-style:italic;
  font-size:var(--t-nav); line-height:var(--lh-lijst); color:var(--petrol-dark);
}
.c-reflectie-pijl{
  flex:none; font-family:var(--font-ui); font-size:var(--t-body-plus); font-weight:var(--gew-zwaar);
  color:var(--petrol-deep); background:none; border:0; cursor:pointer;
}
.c-reflectie-pijl:hover{ transform:translate(1px,-1px); }

/* ── Ronde 17b: aannames in Het fundament ── */
.c-aannames{ display:flex; flex-direction:column; gap:var(--sp-5); }
.c-aannames-kop{ display:flex; align-items:baseline; gap:var(--sp-5); }
.c-aannames-label{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft); }
.c-aannames-teller{ margin-left:auto; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); white-space:nowrap; }
.c-aannames-lijst{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-aannames-leeg{ font-size:var(--t-body); color:var(--ink-soft); line-height:var(--lh-lijst); }
.c-aannames-toe{ align-self:flex-start; font-family:var(--font-ui); font-size:var(--t-knop); font-weight:var(--gew-zwaar); color:var(--terra); background:none; border:0; cursor:pointer; }
.c-aannames-toe:hover{ text-decoration:underline; }
.c-aanname{ border:1px solid var(--line); border-radius:var(--r-l); background:var(--wit); padding:var(--sp-5) var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); }
.c-aanname-top{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.c-aanname-overtuiging{ flex:1; min-width:160px; font-family:var(--font-ui); font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--ink); background:var(--wit); border:1px solid var(--line); border-radius:var(--r-s); padding:7px var(--sp-5); }
.c-aanname-weg{ flex:none; font-size:var(--t-body-plus); line-height:1; color:var(--ink-soft); background:none; border:0; cursor:pointer; }
.c-aanname-weg:hover{ color:var(--rood); }
.c-aanname-groep{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-aanname-groeplabel{ font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }
.c-aanname-groep .c-groepveld{ flex:1; min-width:160px; }
.c-aanname-bewijs{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-lijst); }
.c-aanname-link{ font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; text-align:left; }
.c-aanname-link:hover{ text-decoration:underline; }
/* stille herkomst-metaregel: waar de aanname vandaan komt */
.c-aanname-herkomst{ align-self:flex-start; font-family:var(--font-ui); font-size:var(--t-meta); color:var(--ink-soft); background:none; border:0; padding:0; cursor:pointer; }
.c-aanname-herkomst:hover{ color:var(--petrol-deep); text-decoration:underline; }
/* R42 (E1, story 1.2) — de aanname→missie-brug. De uitnodiging is terracotta
   (een actie, geen evidentie); de link naar een lopende toets-missie is stil. */
.c-aanname-naarmissie{ align-self:flex-start; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--terra); background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.c-aanname-naarmissie:hover{ text-decoration:underline; }
.c-aanname-toetsmissie{ align-self:flex-start; font-family:var(--font-ui); font-size:var(--t-meta); color:var(--ink-soft); background:none; border:0; padding:0; cursor:pointer; }
.c-aanname-toetsmissie:hover{ color:var(--petrol-deep); text-decoration:underline; }

/* ── Ronde 17a: de stakeholder-lens (in de detail-popup) ── */
.c-lens-dekking{ align-self:flex-start; font-size:var(--t-pil); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:3px var(--sp-6); }
.c-lens-dekking[data-k="rood"]{ color:var(--rood); background:var(--vul-rood,rgba(192,86,58,.1)); }
.c-lens-dekking[data-k="amber"]{ color:var(--geel-tekst); background:var(--vul-amber); }
.c-lens-dekking[data-k="groen"]{ color:var(--groen); background:var(--vul-groen); }
.c-lens-invoer{ display:flex; gap:var(--sp-6); }
.c-lens-invoer .c-veldvak{ flex:1; min-width:0; }

/* §AB39 — de Overzicht-tab: de secties (De mensen · aannames · wat we horen ·
   voeten) staan consequent 14px (--sp-7) uit elkaar, ongeacht de tab-schakelaar. */
.c-lens-overzicht{ display:flex; flex-direction:column; gap:var(--sp-7); }

/* FB21 — read-only blokken in de lens (uitkomst + aannames), geen invoervelden */
.c-lens-blok{ display:flex; flex-direction:column; gap:var(--sp-3); }
.c-lens-blok-kop{ font-size:var(--t-meta); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-half); color:var(--ink-soft); text-transform:uppercase; }
.c-lens-uitkomst{ font-size:var(--t-body); color:var(--ink); line-height:var(--lh-lijst); margin:0; }
.c-lens-stil{ font-size:var(--t-body); color:var(--ink-soft); margin:0; }
.c-lens-stil-cta,
.c-lens-pijl{ font-family:var(--font-ui); font-size:inherit; color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:0; }
.c-lens-pijl{ font-size:var(--t-body); }
.c-lens-aannames{ display:flex; flex-direction:column; gap:var(--sp-3); }
.c-lens-aanname{ display:flex; align-items:center; gap:var(--sp-5); width:100%; text-align:left; font:inherit; background:none; border:0; padding:var(--sp-3) 0; cursor:pointer; }
.c-lens-aanname-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink-soft); }
.c-lens-aanname-dot[data-k="groen"]{ background:var(--groen); }
.c-lens-aanname-dot[data-k="rood"]{ background:var(--rood); }
.c-lens-aanname-dot[data-k="amber"]{ background:var(--geel); }
.c-lens-aanname-tekst{ flex:1; min-width:0; font-size:var(--t-body); color:var(--ink); }
.c-lens-aanname-pijl{ flex:none; color:var(--petrol-deep); opacity:.7; }
.c-lens-aanname:hover .c-lens-aanname-pijl{ opacity:1; }
.c-lens-horen-kop{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-lens-horen-kop b{ font-size:var(--t-klein); color:var(--ink-soft); font-weight:var(--gew-vet); }
.c-lens-horen-sub{ font-weight:var(--gew-half); }
.c-lens-signalen{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-4); }
.c-lens-signaal{ display:flex; align-items:center; gap:var(--sp-5); text-align:left; width:100%; font-family:var(--font-ui);
  border:1px solid var(--line); border-left:3px solid var(--ink-soft); border-radius:0 var(--r-m) var(--r-m) 0; background:var(--wit); padding:9px var(--sp-6); cursor:pointer; }
.c-lens-signaal[data-signaal="negatief"]{ border-left-color:var(--rood); }
.c-lens-signaal[data-signaal="positief"]{ border-left-color:var(--groen); }
.c-lens-signaal-tekst{ flex:1; min-width:0; font-size:var(--t-body); color:var(--ink); line-height:var(--lh-lijst); }
.c-lens-signaal-meta{ flex:none; font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }
.c-lens-leeg{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-lijst); margin-top:var(--sp-4); }
.c-lens-voet{ display:flex; align-items:center; border-top:1px solid var(--line); padding-top:var(--sp-5); }
.c-lens-acties{ font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; }
.c-lens-acties:hover{ text-decoration:underline; }
.c-lens-missie{ font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; }
.c-lens-missie:hover{ text-decoration:underline; }
/* de dekking-groepsnaam wordt een lens-ingang */
.wwl-dek-naam.is-lens{ font:inherit; color:var(--ink); background:none; border:0; padding:0; text-align:left; cursor:pointer; }
.wwl-dek-naam.is-lens:hover{ color:var(--petrol-deep); text-decoration:underline; }
/* de "wat leren we ↗"-link op een stakeholdermap-groep */
.gk-lens{ font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; }
.gk-lens:hover{ text-decoration:underline; }


/* ═══════════════════════════════════════════════════════════════════
   AANDACHT-LAAG, wat deze week aandacht vraagt (1a, 9a, 1b)
   ═══════════════════════════════════════════════════════════════════ */

/* Twee regels bepalen wat hier binnenkomt, en houden de laag klein.

   1. Alleen tijdsgebonden zaken. Over termijn, meetpunt deze week, een
      besluit dat wacht. Een rij zonder meetpunt is geen tijdsdruk maar
      een volledigheidsgebrek: die hoort in "Vraagt een blik" in Het
      fundament en als stille regel op de planningsrij zelf, niet hier.

   2. Zijn het er meer dan drie, dan tonen we de drie urgentste als
      kaartjes en de rest achter een chip die uitklapt. De volgorde is
      vast: geblokkeerd of over termijn, dan meetpunt deze week, dan
      wacht op besluit. Op mobiel altijd de lijstvorm, hoogstens twee
      zichtbaar plus de teller. Nooit zes kaartjes naast elkaar. */

/* Het label links, daarnaast de rij kaartjes. */
.c-aandacht{
  display:flex;
  align-items:stretch;
  gap:var(--sp-5);
}

/* Het label staat tegen een terracotta streep; een tweede regel eronder
   kan .c-kaart-sub gebruiken voor "vraagt aandacht". */
.c-aandacht-label{
  flex:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--sp-1);
  padding-right:var(--sp-7);
  border-right:2px solid var(--terra); /* 2px streep, geen randtoken */
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  color:var(--terra);
  white-space:nowrap;
}
/* De tweede regel is toelichting, geen label: zacht en op normaal gewicht. */
.c-aandacht-label span{
  font-size:var(--t-klein);
  font-weight:var(--gew-normaal);
  letter-spacing:normal;
  color:var(--ink-soft);
}

.c-aandacht-lijst{
  flex:1;
  min-width:0;
  display:flex;
  gap:var(--sp-5);
}

/* Elk kaartje draagt een marker en één regel tekst. */
.c-aandacht-item{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-5) 13px; /* 13px, dezelfde maat als de kaartkop */
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  font-size:var(--t-body);
  line-height:var(--lh-kaart);
}
.c-aandacht-item.is-klikbaar:hover{ border-color:var(--petrol); }

/* ── Meer dan drie: de rest achter een chip ───────────────────────────
   De chip staat achteraan de rij en klapt uit naar de lijstvorm. Hij
   telt wat er niet getoond wordt, zodat de laag nooit liegt over wat er
   speelt. */
.c-aandacht-meer{
  flex:none;
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  padding:var(--sp-3) var(--sp-6);
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  background:var(--wit);
  color:var(--terra);
  white-space:nowrap;
  cursor:pointer;
}
.c-aandacht-meer::after{ content:"\0025BE"; }
.c-aandacht-meer.is-open::after{ content:"\0025B4"; }

/* ── Het rustige "Vraagt een blik"-blok ───────────────────────────────
   Naast de aandacht-laag, maar bewust stiller: geen terracotta streep en
   geen markers, want dit is een volledigheidsgebrek, geen tijdsdruk. Een
   zacht omkaderd blok met een ingetogen label en de stappen als rustige
   regels eronder. */
.c-blik{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-6) 13px;
  /* kaart op het dashboard-canvas → wit (vlakkenhiërarchie, optie A) */
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
}
.c-blik-label{
  display:flex;
  align-items:baseline;
  gap:var(--sp-4);
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  color:var(--ink-soft);
  text-transform:uppercase;
}
.c-blik-label span{
  font-size:var(--t-klein);
  font-weight:var(--gew-normaal);
  letter-spacing:normal;
  text-transform:none;
  color:var(--ink-soft);
}
.c-blik-lijst{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
}
/* Elke stap is een rustige, klikbare regel: naam, reden, pijl. Geen kaart,
   geen marker; een zachte omranding volstaat. */
.c-blik-item{
  flex:1 1 240px;
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  font-size:var(--t-body);
  line-height:var(--lh-kaart);
  text-align:left;
  cursor:pointer;
}
.c-blik-item:hover{ border-color:var(--petrol); }
.c-blik-naam{
  flex:none;
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60%;
}
.c-blik-reden{
  flex:1;
  min-width:0;
  color:var(--ink-soft);
  font-size:var(--t-klein);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* een lege stap krijgt een ingetogen terracotta pijl, een verouderde een
   amberkleurige, zodat de aard zichtbaar is zonder luid te worden. */
.c-blik-pijl{ flex:none; color:var(--ink-soft); font-weight:var(--gew-vet); }
.c-blik-item[data-staat="leeg"] .c-blik-pijl{ color:var(--terra); }
.c-blik-item[data-staat="oud"]  .c-blik-pijl{ color:var(--geel-tekst); }
.c-blik-meer{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  padding:var(--sp-3) var(--sp-6);
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  background:var(--wit);
  color:var(--ink-soft);
  cursor:pointer;
}
.c-blik-meer::after{ content:"\0025BE"; }
.c-blik-meer.is-open::after{ content:"\0025B4"; }

/* ── De lijstvorm ─────────────────────────────────────────────────────
   Wat de uitgeklapte chip toont, en wat op mobiel altijd de vorm is.
   De kaartjes worden regels onder elkaar; de marker blijft leidend. */
.c-aandacht.is-lijst{
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-7);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
}
.c-aandacht.is-lijst .c-aandacht-label{
  flex-direction:row;
  align-items:baseline;
  justify-content:flex-start;
  gap:var(--sp-4);
  padding-right:0;
  border-right:0;
}
.c-aandacht.is-lijst .c-aandacht-lijst{
  flex-direction:column;
  gap:var(--sp-4);
}
.c-aandacht.is-lijst .c-aandacht-item{
  flex:none;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  align-items:flex-start;
}
.c-aandacht.is-lijst .c-aandacht-item+.c-aandacht-item{
  padding-top:var(--sp-4);
  border-top:1px solid var(--cream2);
}
.c-aandacht.is-lijst .c-aandacht-marker{ margin-top:var(--sp-1); }
.c-aandacht.is-lijst .c-aandacht-meer{ align-self:flex-start; }

/* Mobiel: altijd de lijstvorm, hoogstens twee zichtbaar plus de teller.
   De derde en verder staan met hidden erop tot de chip uitklapt. */
@media (max-width:699px){
  .c-aandacht{
    flex-direction:column;
    align-items:stretch;
    gap:var(--sp-4);
    padding:var(--sp-6) var(--sp-7);
    background:var(--wit);
    border:1px solid var(--line);
    border-radius:var(--r-kaart);
  }
  .c-aandacht .c-aandacht-label{
    flex-direction:row;
    align-items:baseline;
    justify-content:flex-start;
    gap:var(--sp-4);
    padding-right:0;
    border-right:0;
  }
  .c-aandacht .c-aandacht-lijst{
    flex-direction:column;
    gap:var(--sp-4);
  }
  .c-aandacht .c-aandacht-item{
    flex:none;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    align-items:flex-start;
  }
  .c-aandacht .c-aandacht-item+.c-aandacht-item{
    padding-top:var(--sp-4);
    border-top:1px solid var(--cream2);
  }
  .c-aandacht .c-aandacht-marker{ margin-top:var(--sp-1); }
  .c-aandacht .c-aandacht-meer{ align-self:flex-start; }
}

/* De marker: open ruit voor een meetpunt, bol voor een actie. */
.c-aandacht-marker{
  flex:none;
  box-sizing:border-box;
  display:inline-block;
  width:11px;  /* 11px, gelijk aan de ruit en het statusbolletje */
  height:11px;
}
.c-aandacht-marker[data-soort="meetpunt"]{
  transform:rotate(45deg);
  border:var(--rand-ruit) solid var(--terra);
  border-radius:var(--r-2);
}
.c-aandacht-marker[data-soort="actie-laat"]{
  border-radius:50%;
  background:var(--rood);
}
.c-aandacht-marker[data-soort="actie-wacht"]{
  border-radius:50%;
  background:var(--geel);
}
/* een insight-signaal: een gevulde ruit in rood, zo onderscheiden van de
   open meetpunt-ruit en de actie-bol (ronde 16b). */
.c-aandacht-marker[data-soort="signaal"]{
  transform:rotate(45deg);
  border-radius:var(--r-2);
  background:var(--rood);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBIEL, de compacte varianten (1b)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:699px){

  /* De kaart draagt zijn eigen binnenmarge; de kop verliest de cremeband. */
  .c-kaart,
  .c-kaart.is-groot{
    border-radius:var(--r-kaart);
    padding:13px var(--sp-7); /* 13px boven en onder, als in de kaartkop */
  }
  .c-kaart-kop,
  .c-kaart-kop.is-krap{
    gap:var(--sp-4);
    padding:0 0 var(--sp-5);
    background:none;
    border-bottom:0;
  }
  .c-kaart-nr{
    width:var(--sp-10);  /* 20px op mobiel */
    height:var(--sp-10);
    font-size:var(--t-meta);
  }
  .c-kaart-titel,
  .c-kaart-kop.is-krap .c-kaart-titel{
    font-size:var(--t-kop-s);
  }
  /* De ondertitel valt weg, de kop moet op één regel passen. */
  .c-kaart-sub{
    display:none;
  }
  .c-kaart-body{
    padding:0;
    gap:7px; /* 7px, tussen sp-3 en sp-4 in */
  }
  .c-kaart-actie{
    font-size:var(--t-meta);
    font-weight:var(--gew-normaal);
    color:var(--ink-soft);
  }

  /* De telpil wordt kleiner en krapper. */
  .c-pil[data-toon="terra"]{
    font-size:var(--t-overline);
    padding:var(--sp-1) var(--sp-4);
  }

  /* Het label van de waarom-regel valt weg, alleen het citaat blijft. */
  .c-waarom{
    gap:9px; /* 9px, tussen sp-4 en sp-5 in */
    padding:var(--sp-4) var(--sp-6);
  }
  .c-waarom-label{
    display:none;
  }
  .c-waarom-citaat{
    font-size:var(--t-knop);
  }

  /* De aandacht-laag wordt zelf een kaart met de items eronder. */
  .c-aandacht{
    flex-direction:column;
    gap:0;
    background:var(--wit);
    border:1px solid var(--line);
    border-radius:var(--r-kaart);
    padding:var(--sp-6) var(--sp-7);
  }
  .c-aandacht-label{
    padding-right:0;
    border-right:0;
    margin-bottom:var(--sp-4);
    font-size:var(--t-overline);
  }
  .c-aandacht-lijst{
    flex-direction:column;
    gap:var(--sp-4);
  }
  /* De items zijn hier gewone regels, de kaart eromheen draagt de rand. */
  .c-aandacht-item{
    gap:9px; /* 9px, tussen sp-4 en sp-5 in */
    padding:0;
    background:none;
    border:0;
    border-radius:0;
  }
  .c-aandacht-marker{
    width:var(--sp-5);  /* 10px op mobiel */
    height:var(--sp-5);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   TABLET, de compacte kaartkop en de dunnere meter (9a)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width:700px) and (max-width:1100px){

  /* Alle koppen zijn hier krap; de ondertitel past er niet meer bij. */
  .c-kaart-kop{
    padding:var(--pad-kaartkop-krap);
    gap:var(--sp-5);
  }
  .c-kaart-titel{
    font-size:var(--t-kop-s);
  }
  .c-kaart-sub{
    display:none;
  }
  .c-kaart-nr{
    width:22px;  /* 22px, tussen sp-10 en sp-12 in */
    height:22px;
    font-size:var(--t-meta);
  }
  .c-kaart-actie{
    font-size:var(--t-pil);
  }

  /* De telpil in de kaartkop wordt een slag kleiner. */
  .c-pil[data-toon="terra"]{
    font-size:var(--t-overline);
    padding:var(--sp-1) var(--sp-4);
  }
  /* De teller "1 van 3" krijgt op tablet een witte pil met rand. */
  .c-pil[data-toon="petrol"]{
    background:var(--wit);
    border:1px solid var(--line);
    font-size:var(--t-pil);
  }

  /* De meter is hier dunner, de kaarten staan naast elkaar. */
  .c-meter{
    height:7px; /* 7px, tussen sp-3 en sp-4 in */
    border-radius:var(--r-xs);
  }

  /* De aandacht-kaartjes staan zonder label naast elkaar. */
  .c-aandacht-label{
    display:none;
  }
  .c-aandacht-item{
    gap:9px; /* 9px, tussen sp-4 en sp-5 in */
    padding:9px var(--sp-6);
    font-size:var(--t-knop);
  }
  .c-aandacht-marker{
    width:var(--sp-5);  /* 10px op tablet */
    height:var(--sp-5);
  }
}

/* ══════════════════════════════════════════════════════════════
   _comp-c-interactie.css
   ══════════════════════════════════════════════════════════════ */

/* _comp-c-interactie.css, de interactiecomponenten van de Cohentis-companion.
   Knop, FAB, sluier, venster, dropzone, sheet, toast, filterbalk, legende,
   lege staat, carrousel met puntjes en de companion-railblokken.
   Gedestilleerd uit de frames 1a, 2b, 4a, 5a, 5b, 6a, 6b, 7b, 7c en 8b.
   Alle waarden verwijzen naar tokens.css. Waar een token ontbreekt staat
   de letterlijke waarde met een comment erbij. */


/* ═══════════════════════════════════════════════════════════════════
   KNOP, één vorm in vier soorten (5b, 6a, 6b, 7b, 7c)
   ═══════════════════════════════════════════════════════════════════ */

/* De basisknop is een pil: de vorm die het systeem overal gebruikt voor
   een handeling in de inhoud. */
.c-knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  box-sizing:border-box;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  line-height:var(--lh-strak);
  border:0;
  border-radius:var(--r-pil);
  padding:var(--sp-5) var(--sp-10);
  background:none;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}

/* Primair: terracotta gevuld, de enige knop die roept. */
.c-knop[data-soort="primair"]{
  background:var(--terra);
  color:var(--wit);
  font-weight:var(--gew-zwaar);
}
/* Secundair: wit met de petrol-omlijning van 1.5px. */
.c-knop[data-soort="secundair"]{
  background:var(--wit);
  color:var(--petrol-deep);
  border:1.5px solid var(--petrol); /* 1.5px, de vaste randdikte van deze knop */
}
/* Tertiair: wit met de gewone kaartrand, de stilste keuze. */
.c-knop[data-soort="tertiair"]{
  background:var(--wit);
  color:var(--ink-soft);
  border:1px solid var(--line);
}
/* Petrol: gevuld petrol, voor een gekozen stand zoals "snel" of een
   actieve weergave (5b, 6a). */
.c-knop[data-soort="petrol"]{
  background:var(--petrol);
  color:var(--wit);
  border:1px solid var(--petrol);
}

/* Blokvariant: volle breedte in een venster of sheet, rechthoekige radius. */
.c-knop.is-blok{
  display:flex;
  width:100%;
  border-radius:var(--r-veld);
  padding:11px 0; /* 11px, tussen sp-5 en sp-6 in */
}


/* ═══════════════════════════════════════════════════════════════════
   FAB, de bijstuur-knop rechtsonder in het werkvlak (1a, 5a, 5c)
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop: zweeft in de rechteronderhoek van het werkvlak. */
.c-fab{
  position:absolute;
  right:26px;  /* 26px, houdt de knop vrij van de werkvlakrand van 28px */
  bottom:var(--sp-12);
  z-index:var(--z-fab);
  display:flex;
  align-items:center;
  gap:9px; /* 9px, tussen sp-4 en sp-5 in */
  font-family:var(--font-ui);
  font-size:var(--t-nadruk);
  font-weight:var(--gew-zwaar);
  color:var(--wit);
  background:var(--terra);
  border:0;
  border-radius:var(--r-pil);
  padding:13px var(--sp-10) 13px 22px; /* 13px en 22px, buiten de ruimteschaal */
  box-shadow:var(--sch-fab);
  white-space:nowrap;
  cursor:pointer;
}

/* Mobiel: hoger geplaatst zodat hij vrij blijft van de tabbalk (1b, 5c). */
.c-fab.is-mobiel{
  right:var(--sp-8);
  bottom:var(--sp-8); /* het werkvlak houdt al op bij de tabbalk */
  gap:var(--sp-4);
  font-size:var(--t-nav);
  padding:13px 19px; /* het frame tekent 13/19, buiten de ruimteschaal */
}

/* Inline: dezelfde knop, maar meegeschoven in een kaart en zonder schaduw
   (1a, de "+ Actie" onderin het noorden). */
.c-fab.is-inline{
  position:static;
  gap:var(--sp-3);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:var(--wit);
  border:1px solid var(--line);
  padding:var(--sp-3) var(--sp-7);
  box-shadow:none;
}


/* ═══════════════════════════════════════════════════════════════════
   SLUIER, het gedempte vlak achter paneel, sheet en venster (2b, 5b, 7b, 7c)
   ═══════════════════════════════════════════════════════════════════ */

/* Basissluier: dempt het werkvlak achter een flyout of paneel. De sluier
   krijgt dezelfde laag als wat hij draagt en gaat er in de opmaak aan
   vooraf, zodat de inhoud er vanzelf bovenop komt. */
.c-sluier{
  position:absolute;
  inset:0;
  z-index:var(--z-paneel);
  background:var(--sluier);
}
/* Achter een sheet op mobiel (2b, 7c). */
.c-sluier.is-sterk{
  z-index:var(--z-sheet);
  background:var(--sluier-sterk);
}
/* Achter een venster: het diepste demp (5b, 7b). */
.c-sluier.is-venster{
  z-index:var(--z-venster);
  background:var(--sluier-venster);
}


/* ═══════════════════════════════════════════════════════════════════
   VENSTER, het gecentreerde dialoogvlak (5b, 7b)
   ═══════════════════════════════════════════════════════════════════ */

/* Het venster zelf, 460px, met de zwaarste schaduw van het systeem. */
.c-venster{
  position:relative;
  z-index:var(--z-venster);
  box-sizing:border-box;
  width:var(--w-venster);
  max-width:calc(100% - var(--sp-16));
  background:var(--wit);
  border-radius:var(--r-venster);
  box-shadow:var(--sch-venster);
  overflow:hidden;
}
/* Breed venster voor het + Actie-formulier met drie kolommen (5b). */
.c-venster.is-breed{
  width:var(--w-venster-breed);
}

/* De kop: titel, herkomstpil en het kruis, op de kaartkop-vulling (5b). */
.c-venster-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-7) var(--sp-10);
  background:var(--cream2);
  border-bottom:1px solid var(--line);
}
/* Frame 7b zet de kop gecentreerd en zonder vulling. Extra klasse, niet in
   de oorspronkelijke lijst, hier gemeld. */
.c-venster-kop.is-midden{
  display:block;
  padding:var(--sp-10) var(--sp-12) var(--sp-3);
  background:none;
  border-bottom:0;
  text-align:center;
}

.c-venster-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-l);
  color:var(--petrol-dark);
  white-space:nowrap;
}
.c-venster-kop.is-midden .c-venster-titel{
  font-size:var(--t-kop-xl);
  white-space:normal;
}

.c-venster-body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
  padding:var(--sp-8) var(--sp-10);
}
/* Een kolom-flexbox krimpt haar kinderen zodra de inhoud niet past, en de body
   van een detailvenster heeft een maximumhoogte. Op een laag scherm werd elk
   veld daardoor platgedrukt in plaats van dat de body ging scrollen — een
   tekstvak van drie regels stond er als een streep van veertien pixels met zijn
   tekst afgesneden. Velden houden hun hoogte; de body scrolt. */
.c-venster-body > *{ flex-shrink:0; }

/* De voet: hulptekst links, de bevestigende knop rechts. */
.c-venster-voet{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-6) var(--sp-10);
  border-top:1px solid var(--line);
  /* ingesloten voet binnen de witte venster → --cream2 */
  background:var(--cream2);
  font-size:var(--t-klein);
  color:var(--ink-soft);
}

/* Het kruis rechtsboven. */
.c-venster-sluit{
  margin-left:auto;
  font-size:var(--t-kop-m); /* 16px, hier als icoongrootte */
  line-height:1;
  color:var(--ink-soft);
  background:none;
  border:0;
  cursor:pointer;
}


/* ═══════════════════════════════════════════════════════════════════
   DETAIL-VENSTER, de gecentreerde detail-popup (patroon 17d)
   ═══════════════════════════════════════════════════════════════════
   De 17d-popup voor detail dat je raadpleegt of invult vanuit een overzicht:
   web als gecentreerde overlay met sluier, mobiel als bottom sheet. Esc en
   klik-buiten sluiten. Gebruikt door het gespreksformulier (ronde 14) en in
   de sensing-rondes door criterium, stakeholder-lens en missie. (De WBS-lijst
   is bewust géén popup, zie planning.js.) Ligt onder de status-sheet, zodat
   een statuswissel-sheet er op een telefoon bovenop opent. */
.c-detailvenster-houder{
  position:fixed;
  inset:0;
  z-index:var(--z-detailvenster);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-12);
}
/* ⑦ — de ouder-popup onder een kind: in de DOM, maar inert en zonder eigen
   sluier (het kind dimt al), zodat er één laag actief is en één dim zichtbaar. */
.c-detailvenster-houder[data-achter]{ pointer-events:none; }
.c-detailvenster-houder[data-achter] .c-sluier{ opacity:0; }
.c-detailvenster-houder[data-achter] .c-venster{ filter:brightness(.97); }
.c-detailvenster-houder .c-sluier{
  position:absolute;
  inset:0;
  z-index:0;   /* onder het venster; de basis-.c-sluier zet z-index:2 */
  background:var(--sluier-venster);
}
.c-venster.is-detail{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - var(--sp-16));
}
.c-venster.is-detail .c-venster-titel{ white-space:normal; }
.c-venster-titelblok{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
}
.c-venster-meta{
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
}
.c-venster.is-detail .c-venster-body{
  flex:1 1 auto;
  min-height:0;         /* laat de body binnen de max-hoogte scrollen */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* Kop en voet blijven vast; alleen de body scrolt (patroon 17d). */
.c-venster.is-detail .c-venster-kop,
.c-venster.is-detail .c-venster-voet{ flex:none; }
.c-venster.is-detail .c-venster-voet{ justify-content:flex-end; }
/* De sleep-greep is er alleen op de mobiele bottom-sheet. */
.c-venster-greep{ display:none; }

/* Mobiel: het detail-venster wordt een bottom sheet over de volle breedte,
   met een greep bovenaan; sleep omlaag sluit (17d). */
@media (max-width:699px){
  .c-detailvenster-houder{
    align-items:flex-end;
    padding:0;
  }
  .c-venster.is-detail{
    width:100%;
    max-width:100%;
    max-height:88vh;
    border-radius:var(--r-sheet);
    will-change:transform;
  }
  .c-venster.is-detail .c-venster-greep{
    display:block; flex:none;
    width:36px; height:4px; margin:var(--sp-4) auto 0;
    border-radius:var(--r-pil); background:var(--line);
    touch-action:none;
  }
  .c-venster.is-detail .c-venster-titelblok{ touch-action:none; }
}


/* ═══════════════════════════════════════════════════════════════════
   DROPZONE, het sleepvlak in het werkbestand-venster (7b)
   ═══════════════════════════════════════════════════════════════════ */

/* Gestippelde rand van 2px, de enige plek waar het systeem stippelt om
   "leg hier iets neer" te zeggen. */
.c-dropzone{
  margin:var(--sp-8) var(--sp-12);
  border:2px dashed var(--line); /* 2px, dikker dan de kaartrand, bewust */
  border-radius:var(--r-kaart);
  padding:30px var(--sp-10); /* 30px, tussen sp-14 en sp-16 in */
  text-align:center;
  font-size:var(--t-body-plus);
  color:var(--ink-soft);
  cursor:pointer;
}


/* ═══════════════════════════════════════════════════════════════════
   SHEET, het paneel dat op mobiel van onderen opkomt (2b, 7c)
   ═══════════════════════════════════════════════════════════════════ */

/* De sheet plakt aan de onderrand en schuift omhoog. Samen met het paneel
   het enige dat beweegt. */
.c-sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--z-sheet);
  display:flex;
  flex-direction:column;
  max-height:calc(100% - 120px); /* 120px: de trajectnaam blijft zichtbaar (2b) */
  background:var(--wit);
  border-radius:var(--r-sheet);
  box-shadow:var(--sch-sheet);
  overflow:hidden;
  transform:translateY(0);
  transition:transform var(--duur) var(--soepel);
}
/* Gesloten stand: volledig onder de onderrand geschoven. */
.c-sheet.is-dicht{
  transform:translateY(100%);
}

/* Het greepje bovenaan, het teken dat je kunt slepen. */
.c-sheet-greep{
  flex:none;
  width:36px;  /* 36px, de breedte van de greep, geen maattoken */
  height:var(--sp-2);
  margin:var(--sp-4) auto var(--sp-1);
  border-radius:var(--r-pil);
  background:var(--line);
}

/* De kop met de sheettitel, en eronder eventueel een zoekveld. */
.c-sheet-kop{
  flex:none;
  padding:var(--sp-3) var(--sp-9) var(--sp-5);
  border-bottom:1px solid var(--cream2);
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-l);
  color:var(--petrol-dark);
}

/* Eén sectie in de sheet, gescheiden door de zachte cream-lijn. */
.c-sheet-sectie{
  padding:var(--sp-5) var(--sp-9);
  border-bottom:1px solid var(--cream2);
  font-size:var(--t-klein);
}
.c-sheet-sectie:last-child{
  border-bottom:0;
  padding-bottom:26px; /* 26px onder, ruimte voor de home-indicator */
}


/* ═══════════════════════════════════════════════════════════════════
   TOAST, de drie meldingsmomenten (8b)
   ═══════════════════════════════════════════════════════════════════ */

/* Eén vorm voor alle drie: onderaan gecentreerd, nooit meer dan één
   tegelijk. Ze verschillen alleen in achtergrond en in of ze een
   actieknop dragen. */
.c-toast{
  position:fixed;
  left:50%;
  bottom:var(--sp-12);
  transform:translateX(-50%);
  z-index:var(--z-toast);
  box-sizing:border-box;
  max-width:calc(100% - var(--sp-16));
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  color:var(--wit);
  border-radius:var(--r-toast);
  padding:11px var(--sp-8); /* 11px, tussen sp-5 en sp-6 in */
  box-shadow:var(--sch-toast);
}
/* Draagt de toast een knop, dan is de rechterkant een slag krapper. */
.c-toast:has(.c-toast-knop){
  padding-right:var(--sp-6);
}

/* Erkenning: na afronden of een groene meting, verdwijnt vanzelf. */
.c-toast[data-soort="erkenning"]{ background:var(--petrol-deep); }
/* Ongedaan maken: na verwijderen of een statuswissel, blijft 6 s. */
.c-toast[data-soort="ongedaan"]{ background:var(--ink); }
/* Aandacht: bij openen, blijft tot je klikt of sluit. */
.c-toast[data-soort="aandacht"]{ background:var(--petrol-dark); }

/* FB17 — de twee licht-vlak varianten, met ink-tekst en een gekleurde
   linksrand die het signaal draagt. Nooit een ✓, nooit terracotta; het
   leidende icoon (amber → bij validatie) zet afwerking.css via ::before. */
.c-toast[data-soort="validatie"]{
  background:var(--cream2);            /* zand #F2EEE7 */
  color:var(--ink);
  border-left:3px solid var(--geel);   /* amber #D9A63C */
}
.c-toast[data-soort="waarschuwing"]{
  background:var(--cream2);            /* zand #F2EEE7 */
  color:var(--ink);
  border-left:3px solid var(--rood);   /* statusrood #C0563A, niet het actie-terracotta */
}
/* Op de licht-vlak varianten wordt ook de sluit-kleur ink. */
.c-toast[data-soort="validatie"] .c-toast-sluit,
.c-toast[data-soort="waarschuwing"] .c-toast-sluit{ color:var(--ink); }

.c-toast-tekst{
  flex:1;
  min-width:0;
  line-height:var(--lh-lijst);
}

/* De actieknop in de toast: doorschijnend wit, of terracotta bij aandacht. */
.c-toast-knop{
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--wit);
  background:var(--wit-transp);
  border:0;
  border-radius:var(--r-s);
  padding:5px 11px; /* 5px en 11px, beide buiten de ruimteschaal */
  white-space:nowrap;
  cursor:pointer;
}
.c-toast[data-soort="aandacht"] .c-toast-knop{
  background:var(--terra);
}

/* Het kruis, altijd het laatste element. */
.c-toast-sluit{
  flex:none;
  font-size:18px; /* 18px als icoongrootte, geen typetoken */
  line-height:1;
  color:var(--wit);
  opacity:.7;
  background:none;
  border:0;
  cursor:pointer;
}


/* ═══════════════════════════════════════════════════════════════════
   FILTERBALK met dropdownchips, onder de kopregel (5a)
   ═══════════════════════════════════════════════════════════════════ */

/* De balk op de kaartkop-vulling, over de volle breedte van het werkvlak. */
.c-filterbalk{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-14);
  /* ronde 23b: platte filterbalk, geen beige band; de chips dragen zelf
     hun rand. Eén accent per zone. */
  background:transparent;
  border-bottom:1px solid var(--line);
  font-size:var(--t-knop);
  color:var(--ink);
}

.c-filter-label{
  flex:none;
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-half);
  color:var(--ink-soft);
}

/* Eén chip met een uitklapdriehoekje, wit in rust. */
.c-dropchip{
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  color:var(--ink);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:5px var(--sp-5); /* 5px, tussen sp-2 en sp-3 in */
  white-space:nowrap;
  cursor:pointer;
}
/* Een chip die afwijkt van zijn standaard is gevuld, in petrol-deep
   (ronde 23b). Alleen de afwijkende filter krijgt is-actief. */
.c-dropchip.is-actief{
  background:var(--petrol-deep);
  border-color:var(--petrol-deep);
  color:var(--wit);
}

/* Ronde 23b: sorteren is een tekstlink, geen gevulde chip. Een kale select
   met linktekst; petrol-deep en onderstreept, zonder rand of vulling. */
.c-sorteerlink{
  flex:none;
  width:auto;
  font-family:var(--font-ui);
  font-size:var(--t-meta);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:none;
  border:0;
  padding:0 var(--sp-1);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.c-sorteerlink:focus-visible{ outline:2px solid var(--petrol-light); outline-offset:2px; }

/* De stille tekstlink die alle filters terugzet. */
.c-filter-wis{
  flex:none;
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:none;
  border:0;
  white-space:nowrap;
  cursor:pointer;
}


/* ═══════════════════════════════════════════════════════════════════
   LEGENDE onder een meting of een gantt (1a)
   ═══════════════════════════════════════════════════════════════════ */

/* Rij met sleutels, altijd direct onder de grafiek die hij verklaart. */
.c-legende{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-7);
  margin-top:var(--sp-2);
  font-size:var(--t-meta);
  color:var(--ink-soft);
}
/* Eén sleutel. De kleur van het item stuurt zijn staafje aan. */
.c-legende-item{
  display:inline-flex;
  align-items:center;
  gap:5px; /* 5px, tussen sp-2 en sp-3 in */
  white-space:nowrap;
}
/* Het gekleurde blokje van 9x9, dat de kleur van zijn item overneemt. */
.c-legende-staaf{
  flex:none;
  width:9px;  /* 9px, de maat van het legendeblokje */
  height:9px;
  border-radius:var(--r-2);
  background:currentColor;
}
/* De vijf statussen kleuren hun eigen sleutel. */
.c-legende-item[data-status="todo"] .c-legende-staaf{
  background:var(--wit);
  border:1px solid var(--st-todo);
}
.c-legende-item[data-status="loopt"]{ color:var(--st-loopt); }
.c-legende-item[data-status="issue"]{ color:var(--st-issue); }
.c-legende-item[data-status="blok"]{ color:var(--st-blok); }
.c-legende-item[data-status="af"]{ color:var(--st-af); }

/* De twee ruiten en de pijl, de sleutels die alleen de tijdlijn kent. */
.c-legende-ruit{
  flex:none;
  box-sizing:border-box;
  width:9px;
  height:9px;
  border-radius:var(--r-1);
  background:var(--petrol-deep);
  transform:rotate(45deg);
}
.c-legende-ruit.is-meetpunt{
  background:none;
  border:var(--rand-ruit) solid var(--terra);
}
.c-legende-pijl{
  flex:none;
  width:var(--sp-7);
  height:0;
  border-top:1.2px solid var(--line-sterk); /* dezelfde dikte als de pijl zelf */
}


/* ═══════════════════════════════════════════════════════════════════
   LEGE STAAT, het warme lege dashboard (6a, 6b)
   ═══════════════════════════════════════════════════════════════════ */

/* Op desktop een gecentreerde kaart, op mobiel enkel de tekst (6b). */
.c-leeg{
  box-sizing:border-box;
  max-width:440px; /* 440px, de leesbreedte van de lege staat */
  text-align:center;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-venster);
  padding:34px var(--sp-16); /* 34px, buiten de ruimteschaal */
}
.c-leeg-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-xl);
  color:var(--petrol-dark);
}
.c-leeg-tekst{
  font-size:var(--t-body-plus);
  color:var(--ink-soft);
  line-height:var(--lh-los);
  margin:var(--sp-4) 0 var(--sp-9);
}
.c-leeg-knoppen{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-5);
  justify-content:center;
}


/* ═══════════════════════════════════════════════════════════════════
   CARROUSEL, de criteria van het noorden met puntjes (1a, 1b, 9a)
   ═══════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════
   COMPANION-RAIL, de blokken rechts van een stap-detail (4a)
   ═══════════════════════════════════════════════════════════════════ */

/* Eén blok: versheid, wordt gebruikt door, notities. */
.c-railblok{
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  padding:var(--sp-7) var(--sp-8);
}
.c-railblok-label{
  display:block;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  color:var(--ink-soft);
}
.c-railblok-tekst{
  font-size:var(--t-body);
  line-height:var(--lh-body);
  margin-top:var(--sp-3);
}
/* §7 — de actie in het Versheid-blok (desktop): compacte primaire knop +
   stille tekstlink eronder. Mobiel verbergt dit; daar draagt de stapbalk. */
.c-railblok-actie{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:var(--sp-5); }
.c-railblok-klopt{ align-self:stretch; text-align:center; }
.c-railblok-heropen{ border:none; background:none; padding:0; color:var(--ink-soft); font-size:var(--t-klein); cursor:pointer; }
.c-railblok-heropen:hover{ color:var(--terra-tekst); text-decoration:underline; }
@media (max-width:699px){ .c-railblok-actie{ display:none; } }
/* De kleine uitleg onder de knop of de lijst, altijd gedempt. */
.c-railblok-hulp{
  font-size:var(--t-pil);
  color:var(--ink-soft);
  line-height:var(--lh-ruim);
  margin-top:7px; /* 7px, tussen sp-3 en sp-4 in */
}
/* "Klopt nog": volle breedte, op de kaartkop-vulling. */
.c-railblok-knop{
  display:block;
  width:100%;
  margin-top:var(--sp-5);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:var(--cream2);
  border:1px solid var(--line);
  border-radius:var(--r-veld);
  padding:9px 0; /* 9px, tussen sp-4 en sp-5 in */
  cursor:pointer;
}
/* Een verwijzing naar waar deze stap wordt gebruikt, met petrol bolletje. */
.c-railblok-link{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  cursor:pointer;
  text-decoration:none;
}
.c-railblok-link::before{
  content:"";
  flex:none;
  width:7px;  /* 7px bolletje, geen maattoken */
  height:7px;
  border-radius:50%;
  background:var(--petrol);
}


/* ═══════════════════════════════════════════════════════════════════
   KRUIMELPAD, de kopregel boven een stap-detail (4a, 4b)
   ═══════════════════════════════════════════════════════════════ */

.c-kopregel[data-vorm="kruimel"]{
  padding:var(--sp-7) var(--sp-14);
  /* binnen dezelfde middenkolom als de stap-inhoud — zo begint de kruimel op
     dezelfde x als de kaart eronder, niet tegen de vensterrand. */
  max-width:calc(var(--kolom-midden) + var(--sp-14) * 2);
  margin-inline:auto;
  width:100%;
  box-sizing:border-box;
}
.c-kopregel-kruimel{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  min-width:0;
  width:100%;
  font-family:var(--font-ui);   /* Figtree, nooit Fraunces */
}
.c-kruimel-terug{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-ui);
  font-size:var(--t-klein);           /* 12px, geen groter font */
  font-weight:var(--gew-normaal);     /* geen vet: een stille terug-link */
  color:var(--ink-soft);              /* "← Het kompas" gedempt, klikbaar */
  background:none;
  border:0;
  padding:0;
  white-space:nowrap;
  cursor:pointer;
}
.c-kruimel-terug:hover{ color:var(--petrol) }

.c-kruimel-blok{
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
  min-width:0;
}
.c-kruimel-thema,
.c-kruimel-scheiding{
  flex:none;
  font-size:var(--t-klein);
  color:var(--line-ghost);            /* tussenstappen lichtgrijs */
  white-space:nowrap;
}
.c-kruimel-nu{
  font-size:var(--t-klein);           /* 12px, gelijk aan de rest van de kruimel */
  font-weight:var(--gew-vet);         /* 600 */
  color:var(--petrol-dark);           /* huidige stap #0A3936 */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* De ondertitel vat thema en versheid samen. Alleen op een smal scherm,
   waar het pad zich tot twee regels vouwt. */
.c-kruimel-sub{ display:none }

/* Ronde 32 §6i — de kern-teller ("De kern 2/4") staat alleen bij een
   kernstap. Een stille pil met mintrand, zodat je onderweg weet hoeveel
   van de vier je nog voor je hebt. */
.c-kruimel-kern{
  flex:none;
  display:inline-flex;
  align-items:center;
  padding:2px var(--sp-5);
  border:1px solid var(--line);       /* witte chip met #DDD8CF rand */
  border-radius:var(--r-pil);
  background:var(--wit);
  font-size:var(--t-meta);            /* 11px, past bij de fase-chip in 84a */
  font-weight:var(--gew-normaal);
  color:var(--ink-soft);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.c-kruimel-status{
  flex:none;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:7px; /* 7px, tussen sp-3 en sp-4 in */
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--groen);
  white-space:nowrap;
}
.c-kruimel-status::before{
  content:"";
  flex:none;
  width:var(--sp-4);
  height:var(--sp-4);
  border-radius:50%;
  background:var(--groen);
}


/* ═══════════════════════════════════════════════════════════════════
   COMPANION-RAIL, vervolg: links, notities en de oude stand (4a)
   ═══════════════════════════════════════════════════════════════ */

.c-railblok-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px; /* 7px, zoals het frame de regels zet */
  margin-top:var(--sp-4);
}
.c-railblok-link{
  font-family:var(--font-ui);
  background:none;
  border:0;
  padding:0;
  text-align:left;
}
.c-railblok-link:hover{ color:var(--petrol) }
.c-railblok-tekst.is-rust{ color:var(--ink-soft) }
.c-railblok-hulp.is-boven{ margin-top:var(--sp-3) }
/* Vier weken niet nagekeken: hetzelfde amber als in het fundament. */
.c-railblok[data-oud="1"]{
  background:var(--vul-amber-zacht);
  border-color:var(--geel);
}
.c-railblok[data-oud="1"] .c-railblok-tekst{
  color:var(--geel-tekst);
  font-weight:var(--gew-vet);
}
.c-railblok textarea{
  width:100%;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:var(--sp-4) var(--sp-5);
  resize:vertical;
  overflow:hidden;
}
.c-railblok .notitie-body{ display:block; margin-top:var(--sp-4) }


/* ═══════════════════════════════════════════════════════════════════
   BORGINGSSTROOK, het borgen op de stap waar het ontstaat
   Woont onderaan de bronstap. Dicht tot er reden is haar te openen, en
   dan met dezelfde rijen als de tabel erboven plus de borgkolommen.
   ═══════════════════════════════════════════════════════════════ */

.c-borg{
  margin-top:var(--sp-10);
  border:1px solid var(--line);
  border-left:var(--rand-status) solid var(--petrol-light);
  border-radius:var(--r-status);
  background:var(--vul-petrol);
  padding:var(--sp-6) var(--sp-8) var(--sp-7);
}
.c-borg[data-open="1"]{
  border-left-color:var(--petrol);
  background:var(--wit);
}
.c-borg-kop{
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
  width:100%;
  font-family:var(--font-ui);
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.c-borg-label{
  flex:none;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--petrol-deep);
}
.c-borg-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-s);
  color:var(--petrol-dark);
  min-width:0;
}
.c-borg-chev{
  margin-left:auto;
  flex:none;
  font-size:var(--t-klein);
  color:var(--ink-soft);
  transition:transform var(--duur) var(--soepel);
}
.c-borg[data-open="1"] .c-borg-chev{ transform:rotate(180deg) }
.c-borg-uitleg{
  margin-top:var(--sp-2);
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
}
.c-borg-body{ margin-top:var(--sp-6) }
.c-borg-intro{
  font-size:var(--t-body);
  color:var(--ink-soft);
  margin-bottom:var(--sp-4);
}
.c-borg-body .matrix{ margin-top:0 }


/* ═══════════════════════════════════════════════════════════════════
   STAPBALK, de twee vaste knoppen onderaan een stap op mobiel (4b)
   ═══════════════════════════════════════════════════════════════════ */

/* Het component zelf: twee knoppen op een balk met een scheiding erboven.
   Waar en wanneer hij verschijnt staat in stap.css; hier staat alleen
   hoe hij eruitziet, zodat de galerij hem kan tonen. */
/* Ronde 30-sweep §2: de stapbalk is de enige actieplek en staat er nu op elke
   breedte (voorheen alleen mobiel; de rail droeg de knoppen op desktop). Op
   desktop een gewone balk onder de stap; mobiel plakt hij onderaan (stap.css). */
.c-stapbalk{
  display:flex;                  /* §CC (Epic 6): het rechterpaneel is weg — de stapbalk is dé actieplek op élke breedte. */
  gap:10px;
  justify-content:flex-end;      /* §7: compacte knoppen rechts, geen volle-breedte balken */
  padding:var(--sp-5) 88px var(--sp-6) var(--sp-8);  /* ~80px rechtermarge → de FAB staat vrij */
  background:transparent;        /* §7: geen zware eigen achtergrond … */
  border-top:1px solid var(--line);  /* … enkel een 1px-toplijn */
}
/* auto-brede pill-knoppen, gelijk aan de venster-voetknoppen; nooit rekken op desktop */
.c-stapbalk .c-knop{ flex:0 0 auto; text-align:center; }
/* primair (✓ Klopt nog) het dichtst bij de hoek, secundair (Heropen) links ervan */
.c-stapbalk .c-knop[data-soort="primair"]{ order:2; }
.c-stapbalk .c-knop[data-soort="secundair"]{ order:1; }
/* §CC (Epic 6): op desktop lijnt de balk uit met de gecentreerde inhoudskolom
   (820px), niet met de volle werkvlakbreedte; de knoppen staan rechts eronder.
   De FAB is daar fixed rechtsonder en overlapt niet (de balk staat in de flow). */
@media (min-width:700px){
  .c-stapbalk{ max-width:820px; margin:var(--sp-6) auto 0; padding:var(--sp-5) 0 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   PER BREEKPUNT
   ═══════════════════════════════════════════════════════════════════ */

/* Mobiel: de FAB wijkt voor de tabbalk, de lege staat verliest haar kaart,
   en de carrousel laat maar een streepje van het volgende item zien. */
@media (max-width:699px){
  /* Het kruimelpad vouwt zich tot twee regels: het thema en de versheid
     schuiven samen in de ondertitel, en de terugknop wordt één pijl.
     Deze regels horen ná de KRUIMELPAD-sectie hierboven te staan; ze
     stonden eerst in het mobiele blok van de schil, waar ze door de
     basisregel overruled werden zonder dat er iets misging. */
  .c-kopregel[data-vorm="kruimel"]{
    padding:var(--sp-5) var(--sp-8);
    align-items:center;
  }
  .c-kruimel-terug-tekst{ display:none }
  .c-kruimel-thema,
  .c-kruimel-scheiding{ display:none }
  .c-kopregel-kruimel{ gap:var(--sp-5) }
  .c-kruimel-blok{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    flex:1;
  }
  .c-kruimel-nu{
    font-family:var(--font-kop);
    font-size:var(--t-kop-s);
    width:100%;
  }
  .c-kruimel-sub{
    display:block;
    font-size:var(--t-meta);
    color:var(--ink-soft);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .c-kruimel-status{ font-size:var(--t-overline) }

  .c-fab{
    right:var(--sp-8);
    /* Het designframe tekent 96px, maar daar zit de tabbalk in hetzelfde
       vlak als de knop. Hier hangt de knop in het werkvlak, dat op mobiel
       al bij de tabbalk ophoudt, dus die 96px zou dubbel tellen. */
    bottom:var(--sp-8);
    gap:var(--sp-4);
    font-size:var(--t-nav);
    padding:13px 19px; /* het frame tekent 13/19, buiten de ruimteschaal */
  }

  .c-venster-kop{
    padding:var(--sp-6) var(--sp-8);
  }
  .c-venster-body,
  .c-venster-voet{
    padding-left:var(--sp-8);
    padding-right:var(--sp-8);
  }

  .c-knop.is-blok{
    border-radius:var(--r-l);
    padding:var(--sp-6) 0;
  }

  .c-leeg{
    background:none;
    border:0;
    padding:var(--sp-10) 22px; /* 22px, de zijmarge van het mobiele canvas */
  }
  .c-leeg-tekst{
    font-size:var(--t-body);
  }

  .c-carrousel{
    gap:var(--sp-5);
    /* Deze regel brak met een negatieve marge uit zijn houder, om de rail tot
       aan de rand te laten lopen terwijl de eerste kaart binnen de vulling
       bleef staan. Dat werkt alleen als die houder ook echt vulling heeft.
       In het dashboard is de houder .bs-laag, en die heeft er geen: de rail
       kwam dus 14px buiten de laag, waar `overflow:hidden` hem afknipte.
       Het meetharnas mat dat als 370 in 356. De rail loopt nu tot de rand
       van zijn houder en houdt zijn eigen vulling van binnen. */
    margin:0;
    padding:0 var(--sp-7);
  }
  .c-carrousel-item{
    width:calc(100% - 34px); /* 34px doorkijk op mobiel */
    border-left-width:var(--rand-status);
    padding:var(--sp-5) var(--sp-6);
  }
  /* Op mobiel navigeer je met swipe; de pijltjes vervallen, de puntjes en de
     teller in de kop blijven (punt 7, ontwerp 1b). */
  .c-carrousel-pijl{ display:none; }

  .c-puntjes{
    gap:var(--sp-3);
    padding:0;
    margin-top:var(--sp-5);
  }
  .c-puntjes .c-punt{
    width:7px;  /* 7px op mobiel, een slag kleiner */
    height:7px;
  }
  /* Op mobiel staat het bijschrift onder de puntjes, niet ernaast. */
  .c-puntjes-bijschrift{
    display:block;
    margin:var(--sp-2) 0 0;
    font-size:var(--t-overline);
    text-align:center;
    white-space:normal;
  }
}

/* Tablet: krappere randen en een bredere doorkijk in de carrousel (9a). */
@media (min-width:700px) and (max-width:1100px){
  .c-fab{
    right:var(--sp-10);
    bottom:var(--sp-10);
  }

  .c-filterbalk{
    padding:var(--sp-5) var(--sp-12);
  }

  .c-carrousel{
    gap:var(--sp-5);
    padding:var(--sp-6) 0 var(--sp-2) var(--sp-8);
  }
  .c-carrousel-item{
    width:calc(100% - 70px); /* 70px doorkijk op tablet */
    padding:var(--sp-5) 13px; /* 13px, tussen sp-6 en sp-7 in */
  }

  .c-puntjes{
    gap:var(--sp-3);
    padding:var(--sp-4) 0 var(--sp-6);
  }
  .c-puntjes .c-punt{
    width:7px;  /* 7px op tablet */
    height:7px;
  }
}

/* ══════════════════════════════════════════════════════════════
   _comp-d-lijst.css
   ══════════════════════════════════════════════════════════════ */

/* _comp-d-lijst.css, de lijst- en datacomponenten van de Cohentis-companion.
   De WBS-lijst met hiërarchie, het acties-bord, de criteriumkaart met
   meetgrafiek, het fundament-paneel, de opbouwvolgorde, de tijdlijn en
   het detailpaneel eronder.
   Gedestilleerd uit de frames 1a, 2a, 3a, 3c, 5a, 6a en 9b.
   Alle waarden verwijzen naar tokens.css. Waar een token ontbreekt staat
   de letterlijke waarde met een comment erbij.

   De handtekening van dit systeem: elke rij en elke kaart draagt een
   gekleurde linkerrand met --r-status, dus rechte linkerkant en ronde
   rechterkant. Een geopende kaart gaat naar --r-status-open. */


/* ═══════════════════════════════════════════════════════════════════
   STATUSRAND, de gedeelde kleurregel van rij, actiekaart en criterium
   ═══════════════════════════════════════════════════════════════════ */

/* Eén plek waar data-status de linkerrand kleurt (1a, 3a, 3c, 5a). */
.c-lijstrij[data-status="todo"],
.c-actiekaart[data-status="todo"],
.c-criteriumkaart[data-status="todo"]{ border-left-color:var(--st-todo); }

.c-lijstrij[data-status="loopt"],
.c-actiekaart[data-status="loopt"],
.c-criteriumkaart[data-status="loopt"]{ border-left-color:var(--st-loopt); }

.c-lijstrij[data-status="issue"],
.c-actiekaart[data-status="issue"],
.c-criteriumkaart[data-status="issue"]{ border-left-color:var(--st-issue); }

.c-lijstrij[data-status="blok"],
.c-actiekaart[data-status="blok"],
.c-criteriumkaart[data-status="blok"]{ border-left-color:var(--st-blok); }

.c-lijstrij[data-status="af"],
.c-actiekaart[data-status="af"],
.c-criteriumkaart[data-status="af"]{ border-left-color:var(--st-af); }

/* Een criterium op koers draagt petrol, niet groen: het is geen taak
   die loopt maar een koers die klopt (1a). */
.c-criteriumkaart[data-status="loopt"]{ border-left-color:var(--petrol); }

/* De actieladder van het bord (5a). Een actiekaart draagt deze standen,
   geen todo/loopt/issue/blok/af: dat is de ladder van een plan-item. */
.c-actiekaart[data-status="voorstel"]{    border-left-color:var(--ac-voorstel); }
.c-actiekaart[data-status="voorleggen"]{  border-left-color:var(--ac-voorleggen); }
.c-actiekaart[data-status="aanpassing"]{  border-left-color:var(--ac-aanpassing); }
.c-actiekaart[data-status="goedgekeurd"]{ border-left-color:var(--ac-goedgekeurd); }
.c-actiekaart[data-status="uitgevoerd"]{  border-left-color:var(--ac-uitgevoerd); }
.c-actiekaart[data-status="afgewezen"]{   border-left-color:var(--ac-afgewezen); }

/* Over termijn is tijdsdruk, geen stand. Het wint van de kleur van de
   ladder, want dat is wat je als eerste moet zien. */
.c-actiekaart.is-laat{ border-left-color:var(--rood); }


/* ═══════════════════════════════════════════════════════════════════
   LIJSTRIJ, de WBS-regel met hiërarchie en open kaart (3c)
   ═══════════════════════════════════════════════════════════════════ */

/* De compacte rij: nummer, titel, meta, statusbolletje. */
/* R87/87a — een plan-item in rust is een RIJ, geen kaart. Ze stond hier als
   witte kaart met rand, radius en ruime padding; met vijftien items werd de
   lijst daardoor een stapel van vijftien blokken en verdween de structuur die
   ze juist moet tonen. Het frame zet ze plat op de deelplan-kaart, gescheiden
   door een hairline. De achtergrond-trap van 87d klopt zo ook: pagina canvas →
   deelplan-kaart #FAF8F5 → en pas de geselecteerde rij is wit.
   De statuskantlijn valt weg in rust; de statusdot rechts draagt de stand. */
.c-lijstrij{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-4) 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line-zacht);
  border-radius:0;
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  color:var(--ink);
}
.pl-lijst > .c-lijstrij:last-child{ border-bottom:0; }

/* De hiërarchie: niveau 2 springt in, niveau 3 tweemaal zoveel. Zonder kaart
   is de inspringing smaller genoeg om te lezen zonder de rij weg te duwen. */
.c-lijstrij[data-niveau="2"]{ padding-left:var(--sp-10); }
.c-lijstrij[data-niveau="3"]{ padding-left:40px; }

/* Geselecteerd/open = wél een kaart: wit, teal rand 1.5px, zachte schaduw
   (87d-selectieregel). Dat is het enige moment waarop een rij zich losmaakt. */
.c-lijstrij.is-open,
.c-lijstrij.is-fab-selected{
  flex-wrap:wrap;
  background:var(--wit);
  border:1.5px solid var(--petrol);
  border-radius:var(--r-l);
  padding:11px 14px;
  margin:var(--sp-3) 0;
  box-shadow:0 8px 22px rgba(10,57,54,.10);
}
.c-lijstrij.is-open[data-niveau="2"], .c-lijstrij.is-fab-selected[data-niveau="2"]{ margin-left:var(--sp-10); }
.c-lijstrij.is-open[data-niveau="3"], .c-lijstrij.is-fab-selected[data-niveau="3"]{ margin-left:40px; }

/* Het WBS-nummer. De vaste minimumbreedte houdt de titels op één lijn;
   hij groeit mee met de lengte van het nummer. */
.c-lijstrij-nr{
  flex:none;
  min-width:36px; /* breedte voor 10.1, geen maattoken */
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  color:var(--petrol-deep);
}
.c-lijstrij[data-niveau="2"] .c-lijstrij-nr{ min-width:44px; }  /* 40.2.1   */
.c-lijstrij[data-niveau="3"] .c-lijstrij-nr{ min-width:52px; }  /* 40.2.1.1 */

/* De titel neemt de rest van de rij en kapt af met puntjes. */
.c-lijstrij-titel{
  flex:1;
  min-width:0;
  font-size:var(--t-body-plus);
  font-weight:var(--gew-vet);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.c-lijstrij[data-niveau="2"] .c-lijstrij-titel,
.c-lijstrij[data-niveau="3"] .c-lijstrij-titel{ font-size:var(--t-body); }

/* Eigenaar en datum, rechts van de titel. */
.c-lijstrij-meta{
  flex:none;
  font-size:var(--t-pil);
  color:var(--ink-soft);
  white-space:nowrap;
}

/* De rode waarschuwing, zoals "5 d over termijn". */
.c-lijstrij-waarschuwing{
  flex:none;
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  color:var(--rood);
  white-space:nowrap;
}

/* De pil die de subitems telt en het open- of dichtteken draagt. */
.c-lijstrij-subpil{
  flex:none;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  color:var(--ink-soft);
  background:var(--cream2);
  border-radius:var(--r-pil);
  padding:var(--sp-1) var(--sp-4);
  white-space:nowrap;
}
.c-lijstrij.is-open .c-lijstrij-subpil{ color:var(--petrol-deep); }

/* Het statusbolletje aan het eind van de rij. Extra klasse, niet in de
   oorspronkelijke lijst, hier gemeld. */
.c-lijstrij-dot{
  flex:none;
  width:11px; /* diameter van het statusbolletje, geen maattoken */
  height:11px;
  border-radius:50%;
  background:currentColor;
}

/* De geopende rij. De kop blijft dezelfde flexregel en houdt de warme
   tint; het uitgeklapte deel breekt met flex-wrap naar de volgende regel
   en loopt met negatieve marges tot aan de rand van de kaart. */
/* R87/87d — de open rij is wit met een teal rand; de tint was terracotta en
   dat mag geen vlak zijn. De selectieregel staat hierboven bij .is-open /
   .is-fab-selected; hier blijft alleen wat het uitklappen zelf nodig heeft. */
.c-lijstrij.is-open{
  overflow:hidden;
  padding-bottom:0;
}
.c-lijstrij-body{
  flex-basis:100%;
  margin:var(--sp-5) -14px 0; /* -14px, precies de zijpadding van de open rij */
  padding:var(--sp-6) var(--sp-7) var(--sp-7);
  border-top:1px solid var(--line);
  background:var(--wit);
}


/* ═══════════════════════════════════════════════════════════════════
   VELDEN in een uitgeklapte rij of kaart (3c, 5a)
   ═══════════════════════════════════════════════════════════════════ */

/* Vier velden naast elkaar: eigenaar, start, einde, WBS. */
.c-veldgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-5);
}

.c-veldvak{ min-width:0; }

.c-veldvak-label{
  display:block;
  margin-bottom:3px; /* 3px, krapper dan sp-2 */
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label);
  color:var(--ink-soft);
}

.c-veldvak-waarde{
  display:block;
  font-size:var(--t-body);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:7px var(--sp-5); /* 7px, tussen sp-3 en sp-4 in */
  line-height:var(--lh-ruim);
}

/* Dezelfde vorm, maar als invoerveld. Het ontwerp toont in frame 3c
   alleen de leesstand; in de app is elk van die vakken bewerkbaar, dus
   het veld moet er precies zo uitzien als de waarde ernaast. Toegevoegd
   in ronde 6, hier gemeld. */
.c-veldvak-invoer{
  display:block;
  box-sizing:border-box;
  width:100%;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  color:var(--ink);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:7px var(--sp-5);
  line-height:var(--lh-ruim);
}
.c-veldvak-invoer:focus{
  outline:none;
  border-color:var(--petrol);
  box-shadow:0 0 0 2px var(--vul-petrol);
}
textarea.c-veldvak-invoer{ resize:vertical; }


/* ═══════════════════════════════════════════════════════════════════
   VINKJE, mijlpaal en meetpunt onderin de open rij (3c)
   ═══════════════════════════════════════════════════════════════════ */

/* Het hokje staat als ::before voor het label. */
.c-vinkje{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px; /* 7px, tussen sp-3 en sp-4 in */
  font-size:var(--t-knop);
  color:var(--ink);
  white-space:nowrap;
  cursor:pointer;
}
.c-vinkje::before{
  content:"";
  flex:none;
  box-sizing:border-box;
  width:var(--sp-8);  /* 16px, valt samen met de ruimteschaal */
  height:var(--sp-8);
  border-radius:var(--r-xs);
  border:2px solid var(--line);
}
/* De echte checkbox blijft in de DOM voor toetsenbord en schermlezer,
   maar het hokje hierboven is wat je ziet. */
.c-vinkje input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
}
/* Aangevinkt: het hokje vult met petrol. */
.c-vinkje.is-aan::before{
  background:var(--petrol);
  border-color:var(--petrol);
}
.c-vinkje input:focus-visible + span{
  outline:2px solid var(--petrol);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
/* Het vinkje zelf, alleen waar geen ruit in het hokje staat. */
.c-vinkje.is-aan:not(.is-meetpunt)::after{
  content:"\2713";
  position:absolute;
  left:0;
  top:50%;
  width:var(--sp-8);
  margin-top:-8px;
  font-size:var(--t-meta);
  line-height:var(--sp-8);
  text-align:center;
  color:var(--wit);
}
/* Het meetpunt draagt de terracotta ruit in het hokje. */
.c-vinkje.is-meetpunt::after{
  content:"";
  position:absolute;
  left:var(--sp-2);   /* midden van het hokje van 16px, min de halve ruit */
  top:50%;
  margin-top:-4px;
  width:var(--sp-4);  /* 8px ruit */
  height:var(--sp-4);
  border:var(--rand-ruit) solid var(--terra);
  border-radius:var(--r-1);
  transform:rotate(45deg);
}
/* Op een gevuld hokje zou terracotta wegvallen; dan wordt de ruit licht. */
.c-vinkje.is-meetpunt.is-aan::after{
  border-color:var(--cream);
}


/* ═══════════════════════════════════════════════════════════════════
   DEELPLAN-KOP, de scheiding tussen twee groepen WBS-rijen (3c)
   ═══════════════════════════════════════════════════════════════════ */

.c-deelplan-kop{
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
  margin-bottom:var(--sp-4);
}
.c-deelplan-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-m);
  color:var(--petrol-dark);
}


/* ═══════════════════════════════════════════════════════════════════
   ACTIEKAART, het bord met open en gesloten kaart (5a)
   ═══════════════════════════════════════════════════════════════════ */

/* De gesloten kaart is één regel op wit. */
.c-actiekaart{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-7);
  background:var(--wit);
  border:1px solid var(--line);
  border-left:var(--rand-status-dik) solid var(--line);
  border-radius:var(--r-status);
  font-family:var(--font-ui);
}

/* Uitgevoerd is besloten: de kaart blijft staan, gedempt en doorgehaald. */
.c-actiekaart.is-uitgevoerd{
  opacity:.75;
}
.c-actiekaart.is-uitgevoerd .c-lijstrij-titel,
.c-actiekaart.is-uitgevoerd .c-actiekaart-titel{
  color:var(--ink-soft);
  text-decoration:line-through;
}

/* De titel neemt de ruimte die overblijft en kapt af met een beletselteken,
   zodat de meta rechts nooit uit de rij loopt. */
.c-actiekaart-titel{
  flex:1;
  min-width:0;
  font-size:var(--t-knop);
  font-weight:600;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* De open kaart is een blok: kop, body. */
.c-actiekaart.is-open{
  display:block;
  padding:0;
  overflow:hidden;
  border-radius:var(--r-status-open);
}

/* De kop van de open kaart draagt een zachte tint van de eigen status. */
.c-actiekaart-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-7);
  background:var(--vul-terra-rij);
}
.c-actiekaart[data-status="voorstel"] .c-actiekaart-kop,
.c-actiekaart[data-status="voorleggen"] .c-actiekaart-kop,
.c-actiekaart[data-status="aanpassing"] .c-actiekaart-kop{
  background:var(--vul-amber-fijn);
}
.c-actiekaart[data-status="goedgekeurd"] .c-actiekaart-kop{ background:var(--vul-groen); }
.c-actiekaart[data-status="uitgevoerd"] .c-actiekaart-kop,
.c-actiekaart[data-status="afgewezen"] .c-actiekaart-kop{ background:var(--cream2); }

/* De aard van de actie: snel is een petrol bolletje, taai een ruit. */
.c-actiekaart-aard{
  flex:none;
  width:9px;  /* 9px merkteken, geen maattoken */
  height:9px;
}
.c-actiekaart-aard[data-aard="snel"]{
  border-radius:50%;
  background:var(--petrol);
}
.c-actiekaart-aard[data-aard="taai"]{
  border-radius:var(--r-1);
  background:var(--terra);
  transform:rotate(45deg);
}

/* Het uitgeklapte deel van de kaart. */
.c-actiekaart-body{
  padding:var(--sp-6) var(--sp-8) var(--sp-7);
  border-top:1px solid var(--line);
}

/* Drie kolommen: wat zie je, waartoe leidt het, ons voorstel. */
.c-actiekaart-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
}
/* In de actiekaart staan de veldlabels in petrol, niet in grijs. */
.c-actiekaart-body .c-veldvak-label{ color:var(--petrol-deep); }
.c-actiekaart-body .c-veldvak-waarde{ font-size:var(--t-knop); padding:var(--sp-4) var(--sp-5); }

/* Het besluitvak: gestippeld, want het wacht nog op een besluit. */
.c-besluitvak{
  margin-top:11px; /* 11px, tussen sp-5 en sp-6 in */
  padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-m);
  /* ingesloten (gestreepte) besluit-zone binnen de witte actiekaart:
     --cream2, vlakkenhiërarchie (design-review §2) */
  background:var(--cream2);
  border:1px dashed var(--line);
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}

/* De logregel onder de kaart: wat er gebeurde, in volgorde. */
.c-tijdlijnregel{
  margin-top:9px; /* 9px, tussen sp-4 en sp-5 in */
  padding:9px var(--sp-6);
  border-radius:var(--r-m);
  background:var(--cream2);
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}


/* ═══════════════════════════════════════════════════════════════════
   CRITERIUMKAART, de meetlat met grafiek op het dashboard (1a)
   ═══════════════════════════════════════════════════════════════════ */

.c-criteriumkaart{
  display:flex;
  flex-direction:column;
  background:var(--cream);
  border:1px solid var(--line);
  border-left:var(--rand-status-dik) solid var(--line);
  border-radius:var(--r-status);
  padding:var(--sp-6) var(--sp-7);
  font-family:var(--font-ui);
}

.c-criterium-titel{
  font-size:var(--t-nadruk);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
}

/* Van nu naar straks, met de terracotta pijl ertussen. */
.c-criterium-vannaar{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-top:5px; /* 5px, tussen sp-2 en sp-3 in */
  font-size:var(--t-body-plus);
  color:var(--ink-soft);
  flex-wrap:wrap;
}
.c-criterium-vannaar b{
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  white-space:nowrap;
}
.c-criterium-vannaar i{
  font-style:normal;
  font-weight:var(--gew-vet);
  color:var(--terra);
}

/* De indicator en de drempel eronder. */
.c-criterium-indicator{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  margin-top:var(--sp-4);
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-criterium-indicator b{
  font-weight:var(--gew-vet);
  color:var(--ink);
}
/* De drempel is een waarschuwing, dus terracotta. */
.c-criterium-indicator em{
  font-style:normal;
  font-weight:var(--gew-vet);
  color:var(--terra);
}

/* Het witte vlak om de meetgrafiek. De svg vult de breedte. */
.c-grafiekvak{
  margin-top:var(--sp-5);
  padding:var(--sp-5) var(--sp-6) var(--sp-3);
  border-radius:var(--r-m);
  background:var(--wit);
  border:1px solid var(--line);
}
.c-grafiekvak svg{
  display:block;
  width:100%;
  height:auto;
}


/* ═══════════════════════════════════════════════════════════════════
   FUNDAMENT-RIJ, de naslaglijst met versheid per stap (2a)
   ═══════════════════════════════════════════════════════════════════ */

/* R71/86 — de kompas-rij: rustige lijst, 13px, met een dunne scheidingslijn per
   rij. Géén amberwas of cursief meer: stilte in de kern = rust; terra/oranje is
   gereserveerd voor handelen (de open-teller rechts), niet voor de rij-stand. */
.c-fundament-rij{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 2px;
  border-radius:0;
  border-bottom:1px solid #EFEBE3;
  font-size:13px;
  color:#2A2A28;
  cursor:pointer;
}
.c-fundament-rij[data-staat="oud"]{ background:none; }
.c-fundament-rij[data-staat="leeg"]{ color:#2A2A28; font-style:normal; }

/* De bol voor de stap. Eén bol, vier standen in voorrangsorde (Optie A),
   met dezelfde vormtaal als de opbouw-bol van ronde 1: een gevulde cirkel
   met een vinkje voor "afgerond", een holle ring voor "ingevuld maar niet
   afgerond". Zo is groen-dat-meetelt zichtbaar anders dan groen-dat-niet-
   meetelt, zonder een tweede markering te hoeven leren.

     leeg      terracotta, gevuld  vraagt invulling
     oud       amber, gevuld       vraagt een blik (ook een afgeronde stap)
     afgerond  petrol, gevuld, vinkje   telt mee in x/17
     ingevuld  petrol, holle ring  recente inhoud, nog niet afgerond */
/* R71/86 — binair in de kern: níet-af = open ring 2px petrol-deep, áf = petrol
   gevuld met een wit vinkje (14px, vinkje 9px). Geen amber/terra-dots meer. */
.c-fundament-dot{
  flex:none;
  box-sizing:border-box;
  width:14px;
  height:14px;
  border-radius:50%;
  background:none;
  border:2px solid var(--petrol-deep);
  display:grid;
  place-items:center;
  font-size:9px;
  line-height:1;
  color:var(--wit);
}
/* leeg/oud/ingevuld: alle níet-afgeronde standen delen de open petrol-deep-ring. */
.c-fundament-rij[data-staat="leeg"] .c-fundament-dot,
.c-fundament-rij[data-staat="oud"] .c-fundament-dot,
.c-fundament-rij[data-staat="ingevuld"] .c-fundament-dot{
  background:none;
  border:2px solid var(--petrol-deep);
}
/* afgerond: petrol gevuld met een wit vinkje, telt mee in de teller x/3 */
.c-fundament-rij[data-staat="afgerond"] .c-fundament-dot{ background:var(--petrol); border:0; }
.c-fundament-rij[data-staat="afgerond"] .c-fundament-dot::before{ content:"\2713"; color:var(--wit); }

/* De versheid rechts: "3 d geleden", "6 w oud · kijk na", "vul aan". */
.c-fundament-vers{
  margin-left:auto;
  flex:none;
  font-size:var(--t-meta);
  color:var(--ink-soft);
  white-space:nowrap;
  font-style:normal;
}
.c-fundament-rij[data-staat="oud"] .c-fundament-vers{
  font-weight:var(--gew-zwaar);
  color:var(--geel-tekst);
}
.c-fundament-rij[data-staat="leeg"] .c-fundament-vers{
  font-weight:var(--gew-zwaar);
  color:var(--terra);
}

/* ── Ronde 26/71 — kompas/verkenningen/werkinstrumenten ──────────────── */
/* De zone-eyebrow is een overline: UPPERCASE 10.5px 700, letterspacing .08em; de
   toelichting staat op dezelfde regel (11px #8A867E), niet wrappend als lopende zin. */
.c-groepkop-sub{ margin-left:0; font-size:11px; font-weight:var(--gew-normaal); color:#8A867E; font-family:var(--font-ui); letter-spacing:0; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
/* verkenningslens: eigen standen (gevuld ✓ groen · open stil · n.v.t. doorstreept) */
.c-lens-wrap{ display:flex; flex-direction:column; }
.c-lens-rij[data-staat="gevuld"] .c-fundament-dot{ background:var(--groen); border:0; }
.c-lens-rij[data-staat="gevuld"] .c-fundament-dot::before{ content:"\2713"; color:var(--wit); }
.c-lens-rij[data-staat="open"] .c-fundament-dot{ background:none; border:2px solid var(--line-sterk); }
.c-lens-rij[data-staat="nvt"] .c-fundament-dot{ background:none; border:var(--rand-fijn) solid var(--line); }
.c-lens-rij[data-staat="nvt"] .c-lens-naam{ text-decoration:line-through; color:var(--ink-soft); }
.c-lens-stand{ margin-left:auto; flex:none; font-size:var(--t-meta); color:var(--ink-soft); white-space:nowrap; }
.c-lens-rij[data-staat="gevuld"] .c-lens-stand{ color:var(--groen); }
.c-lens-nvt{ display:flex; align-items:center; gap:var(--sp-4); padding:0 0 var(--sp-4) 26px; }
.c-lens-nvt-link{ font-family:var(--font-ui); font-size:var(--t-meta); color:var(--ink-soft); background:none; border:0; padding:0; cursor:pointer; }
.c-lens-nvt-link:hover{ color:var(--petrol-deep); }
.c-lens-nvt-veld[hidden]{ display:none; }
.c-lens-nvt-veld{ display:inline-flex; gap:var(--sp-4); align-items:center; }
.c-lens-nvt-reden{ font-family:var(--font-ui); font-size:var(--t-meta); border:1px solid var(--line); border-radius:var(--r-s); padding:3px var(--sp-5); min-width:180px; }
.c-lens-nvt-ok{ font-family:var(--font-ui); font-size:var(--t-meta); color:var(--petrol-deep); background:none; border:0; cursor:pointer; }
/* werkinstrument: een ↗-verwijzing, geen stap-rij */
.c-instrument-rij{ display:flex; align-items:center; gap:var(--sp-5); width:100%; text-align:left; font:inherit; background:none; border:0; padding:var(--sp-4) 0; cursor:pointer; color:var(--petrol-deep); }
.c-instrument-naam{ font-size:var(--t-body); }
.c-instrument-waar{ margin-left:auto; flex:none; font-size:var(--t-meta); color:var(--ink-soft); white-space:nowrap; }
.c-instrument-rij:hover .c-instrument-naam{ text-decoration:underline; }

/* Het bovenschrift boven een groep stappen: een overline + toelichting op één regel. */
.c-groepkop{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
}
.c-groepkop > span:first-child{
  flex:none;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.2;
  color:var(--ink-soft);
}


/* ═══════════════════════════════════════════════════════════════════
   OPBOUWRIJ, de geleide volgorde met "je bent hier" (6a)
   ═══════════════════════════════════════════════════════════════════ */

.c-opbouwrij{
  display:flex;
  align-items:center;
  gap:11px; /* 11px, tussen sp-5 en sp-6 in */
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-m);
  font-size:var(--t-body);
  color:var(--ink-soft);
  text-align:left; /* anders centreert de button-default een titel die over twee regels loopt */
}

/* Het nummerbolletje: leeg met rand, af met vinkje in petrol. */
.c-opbouw-nr{
  flex:none;
  box-sizing:border-box;
  width:var(--sp-10);  /* 20px, valt samen met de ruimteschaal */
  height:var(--sp-10);
  border-radius:50%;
  border:1.5px solid var(--line); /* 1.5px rand, geen maattoken */
  display:grid;
  place-items:center;
  font-size:var(--t-micro);
  color:var(--ink-soft);
}
.c-opbouwrij.is-af .c-opbouw-nr{
  border:0;
  background:var(--petrol);
  color:var(--wit);
}
.c-opbouwrij.is-af{ text-decoration:line-through; }

/* Je bent hier: de rij wordt een blok met terracotta rand en warme was. */
.c-opbouwrij.is-hier{
  display:block;
  margin:var(--sp-2) 0;
  padding:var(--sp-6) var(--sp-7);
  border:1.5px solid var(--terra); /* 1.5px rand, geen maattoken */
  border-radius:var(--r-toast);
  background:var(--vul-terra-rij);
  color:var(--ink);
  text-decoration:none;
}
/* De kopregel binnen die open rij houdt de flexregel van een gewone rij. */
.c-opbouwrij.is-hier .c-opbouw-nr{
  width:22px;  /* 22px, een slag groter dan het gewone bolletje */
  height:22px;
  border:2px dotted var(--terra); /* gestippeld: hier ben je bezig */
  background:none;
  font-size:var(--t-pil);
  font-weight:var(--gew-zwaar);
  color:var(--terra);
}

/* Het bovenschrift JE BENT HIER, rechts in de kopregel. */
.c-opbouw-badge{
  margin-left:auto;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-half);
  color:var(--terra);
  white-space:nowrap;
}

/* De uitleg onder de kopregel, uitgelijnd onder de titel. */
.c-opbouw-uitleg{
  margin:7px 0 var(--sp-5) 33px; /* 33px: het bolletje van 22px plus de gap van 11px */
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}


/* ═══════════════════════════════════════════════════════════════════
   SCHUIFVLAK, herbruikbaar paar voor brede tabellen (3a, 9b)
   ═══════════════════════════════════════════════════════════════════ */

/* Een breed vlak dat horizontaal schuift terwijl de eerste kolom blijft
   staan. Dit paar is met opzet los van de tijdlijn benoemd: de heatmap
   krijgt straks dezelfde behandeling. Gebruik ze samen, .c-schuifvlak op
   de omhullende doos en .c-schuifvlak-vast op de eerste cel van elke rij.
   De vaste cel heeft een eigen dekkende achtergrond nodig, anders schuift
   de inhoud eronderdoor zichtbaar. */
.c-schuifvlak,
.c-tijdlijn{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.c-schuifvlak-vast,
.c-tijdlijn-labelkop,
.c-tijdlijn-labelkolom{
  position:sticky;
  left:0;
  z-index:var(--z-sticky);
  /* een eigen, dekkende achtergrond: met background:inherit schemerden de
     scrollende balken door de vaste labelkolom heen (punt 2). Dezelfde grond
     als de rij, anders ontstaat er een tweede vlak in het beeld. */
  background:var(--canvas);
}


/* ═══════════════════════════════════════════════════════════════════
   TIJDLIJN, de gantt met maanden, banden en balken (3a, 9b)
   ═══════════════════════════════════════════════════════════════════ */

/* De doos om de tijdlijn. De maandlijnen en de vandaag-lijn hangen
   hieraan vast en schuiven mee met de inhoud. */
.c-tijdlijn{
  /* De breedte van de labelkolom staat één keer, hier. De labelkop, de
     labelkolom, de rasterlijnen en de vandaag-lijn lezen allemaal deze
     eigenschap, zodat ze niet uiteen kunnen lopen. In liggende stand
     schakelt ze onderaan dit bestand naar de smalle maat, en dan schuift
     alles vanzelf mee. */
  --labelkolom-nu:var(--w-labelkolom);
  position:relative;
  /* 87b/87d — de tijdlijn ligt op het canvas. Wit was hier een vierde vlak:
     de rijen staan op canvas, dus het kader eromheen ook. */
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  font-family:var(--font-ui);
}

/* De binnenlaag draagt de volle breedte én de volle hoogte van de inhoud.
   De rasterlijnen en de vandaag-lijn hangen hieraan: aan het kader zelf
   zouden ze maar zo hoog zijn als het zichtbare deel, en dus afbreken
   zodra de tijdlijn verticaal scrolt. */
.c-tijdlijn-binnen{
  position:relative;
  width:max-content;
  min-width:100%;
}

/* De tijdas bovenaan: de kop van de labelkolom plus de maanden. */
/* De as heeft twee dekken: bovenaan de kolomlabels, eronder een strook van
   14px voor de afgeleide tekens (meetruitjes, impact-streepjes, het daglabel
   van de eerstvolgende sessie). Die tekens stonden op top:0 en liepen dwars
   door "jul 26" heen; ze horen op de as, niet ín het label. */
.c-tijdlijn-as{
  display:flex;
  width:max-content;
  min-width:100%;
  min-height:var(--h-gantt-as);
  background:var(--cream2);
  border-bottom:1.5px solid var(--line); /* 1.5px, iets zwaarder dan een rijlijn */
}
.c-tijdlijn-labelkop{
  flex:none;
  box-sizing:border-box;
  width:var(--labelkolom-nu);
  padding:7px var(--sp-6); /* 7px, tussen sp-3 en sp-4 in */
  border-right:1px solid var(--line);
  /* 87d — dit is een kolomkop, dus meta: Figtree 700 overline in ghost, met
     spatiëring. Hij stond in Fraunces 700 12px; Fraunces is voor titels (600)
     en nooit voor meta, en 700 bestaat in Fraunces niet in de trap. */
  font-family:var(--font-ui);
  font-weight:var(--gew-zwaar);
  font-size:var(--t-overline);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-mist);
  background:var(--cream2); /* volgt de kopkleur, dekkend in de hoek */
}
/* De breedte van een maand komt uit de data en staat inline. */
.c-tijdlijn-maand{
  flex:none;
  box-sizing:border-box;
  padding:7px var(--sp-5);
  font-size:var(--t-meta);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
}

/* De band boven een groep rijen, zoals "40 · Communicatie". */
.c-tijdlijn-bandkop{
  display:flex;
  width:max-content;
  min-width:100%;
  background:var(--cream2);
  position:relative;
  z-index:var(--z-balk);
  border-bottom:1px solid var(--line);
}
/* 87d — de band is een deelplan, en een deelplantitel is Fraunces 600 op 14px.
   In de lijst stond hij zo, hier op Figtree 700 11px: hetzelfde object met twee
   gezichten. Nu één. */
.c-tijdlijn-bandkop .c-tijdlijn-labelkolom{
  padding:var(--sp-3) var(--sp-6);
  font-family:var(--font-kop);
  font-size:14px;
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  background:var(--cream2); /* volgt de bandkleur, dekkend bij horizontaal scrollen */
}
/* De opvouwbare band-kop in de tijdlijn: chevron plus naam, klikbaar. */
button.c-tijdlijn-bandknop{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  border:0;
  cursor:pointer;
  font:inherit;
  font-family:var(--font-kop);
  font-size:14px;
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  text-align:left;
}
.c-band-chev{ flex:none; color:var(--ink-soft); }

/* Eén regel van de gantt. */
/* R87/87b — de tijdlijn ligt op het canvas, niet op wit. Het frame zet de rijen
   rechtstreeks op #EDE9E1 met een hairline #EFEBE3 ertussen; wit was hier een
   vierde vlak dat de achtergrond-trap van 87d doorbrak. */
.c-tijdlijn-rij{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:100%;
  /* doorzichtig: de grond komt van het kader (canvas). Zo blijven de raster-
     en sessielijnen zichtbaar tussen de balken, terwijl ze achter een balk
     verdwijnen in plaats van er een naad in te trekken. */
  background:transparent;
  position:relative;
  z-index:var(--z-balk);
  border-bottom:1px solid var(--line-zacht);
}
/* De geselecteerde rij draagt de selectie-tint uit 87d, niet de terracotta was.
   87e — is-fab-selected is de kéuze (de FAB koppelt aan dit plan-item),
   is-actief het open popover-kaartje. Beide dragen dezelfde tint. */
.c-tijdlijn-rij.is-actief,
.c-tijdlijn-rij.is-fab-selected{
  background:var(--vul-selectie);
}
.c-tijdlijn-rij.is-actief .c-tijdlijn-labelkolom[role="button"],
.c-tijdlijn-rij.is-fab-selected .c-tijdlijn-labelkolom[role="button"]{ background:var(--vul-selectie); }
/* de gekozen rij krijgt de petrol-markering van 87d aan haar linkerkant */
.c-tijdlijn-rij.is-fab-selected .c-tijdlijn-labelkolom[role="button"]{
  box-shadow:inset var(--rand-fijn) 0 0 0 var(--petrol);
}

/* De labelkolom links: nummer plus titel, afgekapt met puntjes. */
.c-tijdlijn-labelkolom{
  flex:none;
  box-sizing:border-box;
  width:var(--labelkolom-nu);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:7px var(--sp-6); /* 7px, tussen sp-3 en sp-4 in */
  border-right:1px solid var(--line);
  font-size:var(--t-klein);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.c-tijdlijn-labelkolom b{
  flex:none;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  color:var(--petrol-deep);
}
/* 87e — de labelkolom van een item kiest de rij (FAB-context) en draagt de
   ghost-link "pas aan". Ze is daarom een drager met role=button in plaats van
   een <button>: een knop in een knop bestaat niet. De bandkop-labelkolom is
   een gewone div en blijft met rust. */
.c-tijdlijn-labelkolom[role="button"],
button.c-tijdlijn-labelkolom{
  cursor:pointer;
  font-family:var(--font-ui);
  color:var(--ink);
  text-align:left;
  /* 87b — dezelfde grond als de rij. Dit stond op wit; daardoor bleef de
     eerste kolom een witte baan naast een canvas-tijdlijn, precies het vierde
     vlak dat 87d verbiedt. Dekkend blijft het: canvas is ook dekkend. */
  background:var(--canvas);
}
button.c-tijdlijn-labelkolom:hover,
.c-tijdlijn-labelkolom[role="button"]:hover{ background:var(--vul-selectie); }
.c-tijdlijn-labelkolom[role="button"]:focus-visible{ outline:2px solid var(--petrol); outline-offset:-2px; }

/* 87e — "pas aan": de stille link die pas bij hover of keuze verschijnt en het
   popover-kaartje opent. Klikken op de rij zelf kiest alleen. Zelfde ghost-taal
   als de toevoeg-regel: mist in rust, petrol zodra je hem raakt. */
.pl-gl-pas{
  flex:none;
  margin-left:auto;
  font:inherit;
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  color:var(--line-ghost);
  background:none;
  border:0;
  padding:0 0 0 var(--sp-3);
  cursor:pointer;
  opacity:0;
  transition:opacity .12s ease-out;
}
.c-tijdlijn-rij:hover .pl-gl-pas,
.c-tijdlijn-rij.is-actief .pl-gl-pas,
.c-tijdlijn-rij.is-fab-selected .pl-gl-pas,
.pl-gl-pas:focus-visible{ opacity:1; }
.pl-gl-pas:hover{ color:var(--petrol-deep); text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .pl-gl-pas{ transition:none; } }
/* R89 — de statusstip in de labelkolom: rechts, na de naam, zoals in de lijst.
   9px hier tegen 11px in de lijst: de rij is 30px hoog en de kolom draagt al
   een nummer, een ruit en een naam. */
.pl-gl-stand{ flex:none; width:9px; height:9px; margin-left:auto; }
.pl-gl-pas + .pl-gl-stand{ margin-left:var(--sp-3); }

/* de naam maakt plaats voor de link zonder de rij te verbreden */
.c-tijdlijn-labelkolom .pl-gl-naam{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* Het spoor waarin de balken hangen. De breedte komt uit de data en
   staat inline; hij groeit mee als er ruimte over is. De hele rij is
   klikbaar (labelkolom, spoor, balk, ruit), dus alles toont de pointer. */
.c-tijdlijn-spoor{
  position:relative;
  flex:1 0 auto;
  height:var(--h-gantt-rij);
  cursor:pointer;
}

/* De balk zelf, verticaal gecentreerd in het spoor. Links en breedte
   komen uit de data en staan inline. */
.c-tijdlijn-balk{
  position:absolute;
  top:calc((var(--h-gantt-rij) - var(--h-gantt-balk)) / 2);
  height:var(--h-gantt-balk);
  border-radius:var(--r-xs);
  box-sizing:border-box;
  cursor:pointer;
}
/* Nog te doen is een omtrek, niet een vlak. */
.c-tijdlijn-balk[data-status="todo"]{
  background:var(--wit);
  border:1px solid var(--st-todo);
}
.c-tijdlijn-balk[data-status="loopt"]{ background:var(--st-loopt); }
.c-tijdlijn-balk[data-status="issue"]{ background:var(--st-issue); }
.c-tijdlijn-balk[data-status="blok"]{ background:var(--st-blok); }
/* Purpose-tag (sensing ronde 1 §3): een randaccent op de balk, niet een
   vulling. De statusvulling en de meetpunt-ruit blijven zo onaangeroerd
   ("verandert niets aan status- of meetpuntweergave"); de gestreepte
   sensing-rand sluit alvast aan op de sense-making-periode van ronde 18. */
/* Sense-making-periode (ronde 18a): gestreepte terra-rand + sensing-was
   (lichte terra-tint). Dat leest duidelijk anders dan een taakbalk. De
   specificiteit ligt hoger dan de status-vulling zodat de was wint. */
/* FB18-ruling: de luisteren/sensing-rand volgt de sensing-tint #8A4A22, niet
   het felle actie-terracotta; zenden blijft petrol. */
.c-tijdlijn-balk[data-doel="luisteren"]{ border:var(--rand-fijn) dashed var(--terra-tekst); }
.c-tijdlijn-balk[data-doel="zenden"]{ border:var(--rand-fijn) solid var(--petrol); }
.c-tijdlijn-balk[data-vorm="balk"][data-doel="luisteren"]{ background:rgba(200,121,65,.07); }

/* Afgeleide reminder-stippen op een sense-making-periode (18a): op elke
   cadans-stap één stip in het spoor, uitgelijnd op de balk. Gevuld = terra
   (er ligt een gesprek in dat venster); open = holle terra-rand (reminder).
   Ze staan boven de balk in z, maar vangen geen klik: de balk opent het
   onderrand-paneel. */
.c-tijdlijn-reminder{
  position:absolute; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; box-sizing:border-box; pointer-events:none; z-index:2;
  border:1.5px solid var(--terra); background:var(--wit, #fff);
}
.c-tijdlijn-reminder[data-vol="1"]{ background:var(--terra); }

/* Af is grijs en draagt het vinkje in de balk. */
.c-tijdlijn-balk[data-status="af"]{
  background:var(--st-af);
  color:var(--wit);
  font-size:var(--t-mini);
  font-weight:var(--gew-zwaar);
  text-align:center;
  line-height:var(--h-gantt-balk);
}

/* De maandscheiding, een dunne lijn achter de balken. */
.c-tijdlijn-raster{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line);
  z-index:var(--z-raster);
}

/* Ronde 30-bis: de sessielijnen van het designgroep-ritme — dunne, stille
   petrol-stippel, subtieler dan de vandaag-lijn; het plan leest tegen de
   hartslag van de designgroep zonder de terracotta te overstemmen. */
.c-tijdlijn-sessie{
  position:absolute;
  /* de knop pakt alleen de as aan: lager zou ze over de rijen liggen en de
     balken eronder onklikbaar maken. De lijn zelf loopt door tot onderaan via
     ::after en vangt geen klikken. */
  top:0;
  height:var(--h-gantt-as);
  width:9px;
  margin-left:-4px;
  padding:0;
  border:none;
  background:none;
  z-index:var(--z-raster);
  cursor:pointer;
}
.c-tijdlijn-sessie::after{
  content:"";
  position:absolute;
  left:4px; top:0; bottom:-2000px;   /* het kader knipt verticaal af */
  border-left:1px dotted var(--petrol);  /* 30c — gestippeld; de vandaag-lijn blijft solid+donkerder */
  opacity:.4;
  pointer-events:none;
}
.c-tijdlijn-sessie:hover::after{ opacity:.75; }
/* 30c — kort daglabel ("di") boven de eerstvolgende sessielijn */
.c-tijdlijn-sessie-dag{ position:absolute; top:var(--y-gantt-strook); transform:translateX(-50%); font-size:10px; line-height:1; color:var(--ink-soft); white-space:nowrap; background:var(--cream2); padding:0 3px; border-radius:3px; pointer-events:none; z-index:var(--z-raster); }
/* C3 — een niet-doorgegane sessie blijft staan, gedimd met ✕ */
.c-tijdlijn-sessie.is-overgeslagen::after{ border-left-color:var(--ink-soft); opacity:.3; }
.c-tijdlijn-sessie.is-overgeslagen:hover::after{ opacity:.6; }
.c-tijdlijn-sessie-x{ position:absolute; top:var(--y-gantt-strook); left:0; font-size:9px; color:var(--ink-soft); line-height:1; }
/* §9: de impact-landing ◆ in de afgeleide strook boven de plan-rijen. Kleur =
   zwaarste cel van die groep (amber = stevig, terracotta = ingrijpend). */
/* R87 — de impact-landing was een gevulde ◆ in amber of rood. Het teken-
   alfabet kent maar twee ruiten (mijlpaal petrol ◆ gesloten, meetpunt amber ◇
   open), dus een derde ruit bestaat niet. Een landing is ook geen soort maar
   een moment in de tijd, net als de vandaag-lijn: daarom een streepje op de as
   in de statuskleur, geen teken. DOORGEVEN AAN DESIGNER: geen frame beschrijft
   dit merkteken; dit is de kleinste keuze die geen bestaand teken kaapt. */
.c-tijdlijn-impact{ position:absolute; top:var(--y-gantt-strook); transform:translateX(-50%); width:3px; height:9px; border:none; border-radius:1.5px; padding:0; background:var(--line-ghost); cursor:pointer; z-index:calc(var(--z-raster) + 1); font-size:0; }
.c-tijdlijn-impact[data-stand="stevig"]{ background:var(--geel); }
.c-tijdlijn-impact[data-stand="ingrijpend"]{ background:var(--rood); }
.c-tijdlijn-impact:hover{ transform:translateX(-50%) scaleY(1.25); }
/* Ronde 67-D — het meet-spoor: geplande/gedane metingen als ruitjes, in dezelfde
   afgeleide strook als de sessielijnen en impact-landingen (geen WBS-rij). */
.c-tijdlijn-meet{ position:absolute; top:var(--y-gantt-strook); width:9px; height:9px; box-sizing:border-box; border:1.5px solid var(--geel); background:#fff; border-radius:2px; transform:translateX(-50%) rotate(45deg); padding:0; cursor:pointer; z-index:calc(var(--z-raster) + 1); transition:transform .12s; }
/* R87 — de taal kent twee ruiten: mijlpaal = petrol ◆ gesloten, meetpunt =
   amber ◇ open. Meer niet. Hier stonden een gevulde amber (gedaan) en een
   oranje rand #E07B39 (over tijd) — een kleur die in geen enkele trap voorkomt.
   Een meetpunt over tijd blijft amber ◇; dat het te laat is, zegt de rij en het
   label, niet het teken. Een overgeslagen meting dooft (afwezigheid, geen
   kleur). */
.c-tijdlijn-meet[data-stand="over"]{ opacity:.4; }
.c-tijdlijn-meet:hover{ transform:translateX(-50%) rotate(45deg) scale(1.3); }
/* de sessie-mini-popup + ritme-wissel-UI */
.c-sessie-pop-rij{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.c-sessie-pop-reden{ flex:1; min-width:160px; border:1px solid var(--line); border-radius:var(--r-s); padding:7px 9px; font-size:var(--t-klein); }
.c-sessie-pop-redentoon{ font-size:var(--t-klein); color:var(--ink-soft); font-style:italic; margin:0 0 10px; }
.c-sessie-pop-wijzig{ margin-top:14px; display:block; }
.c-dg-wissels{ margin-top:10px; }
.c-dg-wissel-kop{ font-size:var(--t-pil); color:var(--ink-soft); font-weight:var(--gew-vet); }
.c-dg-wissel-rij{ display:flex; align-items:center; gap:8px; font-size:var(--t-klein); padding:4px 0; color:var(--ink); }
.c-dg-wissel-rij .c-dg-chip-x{ margin-left:auto; }
.c-dg-wijzig-form{ background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-m); padding:12px; margin-top:8px; display:flex; flex-direction:column; gap:10px; }
.c-dg-wijzig-acties{ display:flex; }
.c-dg-focus-gat{ font-size:var(--t-pil); color:var(--ink-soft); font-style:italic; margin-left:8px; }

/* De vandaag-lijn: gestreept statusrood, met het woord ernaast.
   R87/87d — was terracotta; terracotta is uitsluitend hándelen (FAB, primaire
   knop) en mag geen lijn of vlak in het beeld zijn. "Vandaag" is een stand, en
   standen dragen statuskleur. */
.c-tijdlijn-vandaag{
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  border-left:1px dashed var(--rood);
  z-index:var(--z-vandaag);
}
/* het woord komt uit de vertaling, niet uit deze regel: als content-string
   stond het vast op Nederlands en las de Engelse app "vandaag". */
.c-tijdlijn-vandaag::after{
  content:attr(data-label);
  position:absolute;
  top:calc(var(--h-gantt-as) + 3px);
  left:var(--sp-3);
  font-size:var(--t-half);
  font-weight:var(--gew-zwaar);
  color:var(--rood);
  white-space:nowrap;
  /* het woord staat in de strook van de as, tussen de afgeleide tekens: een
     eigen grond houdt het leesbaar boven de baan eronder. */
  background:var(--canvas);
  padding:0 3px;
  border-radius:3px;
}

/* De mijlpaal is een gevulde ruit; het meetpunt een open ruit in
   terracotta. De variant is een extra klasse, hier gemeld. */
.c-tijdlijn-mijlpaal{
  position:absolute;
  top:calc((var(--h-gantt-rij) - 11px) / 2); /* 11px ruit, geen maattoken */
  width:11px;
  height:11px;
  box-sizing:border-box;
  background:var(--petrol-deep);
  border-radius:var(--r-2);
  cursor:pointer;
  /* Het midden van de ruit valt op de datum, niet zijn linkerrand. Zo
     klopt de plek ook wanneer de ruit in liggende stand kleiner wordt. */
  transform:translateX(-50%) rotate(45deg);
}
.c-tijdlijn-mijlpaal.is-meetpunt{
  background:var(--cream);
  border:var(--rand-ruit-dik) solid var(--terra);
}
/* De geopende projectmijlpaal licht op, zoals een geopende rij dat doet. */
.c-tijdlijn-mijlpaal.is-open{
  outline:2px solid var(--terra);
  outline-offset:2px;
}
.c-tijdlijn-mijlpaal[role="button"]{ cursor:pointer; }

/* Het naamlabel naast een projectmijlpaal, alleen waar het past. */
.c-tijdlijn-ruitlabel{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:var(--t-micro);
  color:var(--ink-soft);
  white-space:nowrap;
  pointer-events:none;
}

/* De naam in de labelkolom, die als eerste inkort. */
.c-tijdlijn-naam{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── De afhankelijkheidspijlen ────────────────────────────────────────
   Eén doorzichtige laag over de rijen. Ze vangt geen klikken op, zodat de
   rij eronder gewoon bereikbaar blijft, en ze ligt onder de vastgezette
   labelkolom, zodat een pijl niet over de namen heen loopt wanneer je
   horizontaal schuift. */
.c-tijdlijn-pijlen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
/* R87 punt 9 — een afhankelijkheid is in rust onzichtbaar. Ze verschijnt bij
   hover of selectie van een van de twee balken, in petrol: het verband is een
   lezing, geen handeling, dus geen terracotta. */
.c-tijdlijn-pijl{
  stroke:var(--petrol);
  stroke-width:var(--rand-fijn);
  fill:none;
  opacity:0;
  transition:opacity .12s ease-out;
}
.c-tijdlijn-pijl.is-op,
.c-tijdlijn-pijl.is-hover{ opacity:1; }
/* het bijbehorende label in woorden, links van de balk uitgelijnd op de rij.
   Zelfde regel als de lijn: alleen bij hover of selectie. */
/* 87b — het label staat ná de balk en een tikje erboven (top:2px tegen de
   balk op top:9px), 9.5px ink-soft. Het stond op left:0 en verdween daardoor
   ónder de balk zelf. De x-positie komt uit de balk en staat inline. */
.c-tijdlijn-spoor[data-afh-label]::after{
  content:attr(data-afh-label);
  position:absolute; left:var(--afh-x,0); top:2px;
  font-size:9.5px; color:var(--ink-soft); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .12s ease-out;
}
.c-tijdlijn-rij:hover .c-tijdlijn-spoor[data-afh-label]::after,
.c-tijdlijn-rij.is-actief .c-tijdlijn-spoor[data-afh-label]::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .c-tijdlijn-spoor[data-afh-label]::after{ transition:none; } }
@media (prefers-reduced-motion:reduce){ .c-tijdlijn-pijl{ transition:none; } }
.c-tijdlijn-pijlpunt{ fill:var(--petrol); }
.c-tijdlijn-pijlpunt.is-op{ fill:var(--petrol); }
/* R87 — de mijlpalen-baan: alle projectmijlpalen op één regel, elk met hun
   ruit en naam op hun eigen datum. */
.c-tijdlijn-rij--baan{ align-items:stretch; }
.c-tijdlijn-baankop{
  display:flex; align-items:center;
  font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--ink-soft);
}
.c-tijdlijn-projmijl{
  position:absolute; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font:inherit; font-size:var(--t-pil); color:var(--ink);
  background:none; border:0; padding:0 var(--sp-3) 0 0; cursor:pointer;
  white-space:nowrap;
}
.c-tijdlijn-projmijl:hover .c-tijdlijn-projmijl-naam{ color:var(--petrol-deep); }
.c-ruit--mijl{ width:9px; height:9px; flex:none; }

/* de ghost-rij op de tijdlijn: zelfde stille regel als in de lijst. */
.c-tijdlijn-rij--ghost{ min-height:30px; }
.pl-gl-ghost{ font-size:var(--t-body); color:var(--line-ghost); text-align:left; background:none; border:0; cursor:pointer; }
.pl-gl-ghost:hover{ color:var(--ink-soft); }


/* ═══════════════════════════════════════════════════════════════════
   DETAILPANEEL, de geselecteerde balk onder de tijdlijn (3a)
   ═══════════════════════════════════════════════════════════════════ */

/* Het paneel hangt onder de tijdlijn en werpt zijn schaduw omhoog. */
.c-detailpaneel{
  flex:none;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-kaart-groot);
  box-shadow:var(--sch-detail);
  overflow:hidden;
  font-family:var(--font-ui);
}
.c-detailpaneel-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:9px var(--sp-7); /* 9px, tussen sp-4 en sp-5 in */
  background:var(--cream2);
  border-bottom:1px solid var(--line);
}
.c-detailpaneel-kop .c-lijstrij-titel{
  flex:none;
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-nav);
  color:var(--petrol-dark);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBIEL LIGGEND, de tijdlijn op volledig scherm (9b)
   ═══════════════════════════════════════════════════════════════════ */

/* Een telefoon in liggende stand: laag scherm, brede tijdlijn. De
   labelkolom krimpt naar 150px en alles gaat een maat kleiner. */
/* R87/87c — de telefoon rechtop: de labelkolom stond op de desktopmaat van
   200px, dus op een scherm van 390px ging meer dan de helft naar namen en bleef
   er 190px tijdlijn over. Op 120px is dat 270px. De kolom blijft vast staan
   (position:sticky, zie boven), dus je schuift de tijd langs de namen. */
@media (max-width:699px){
  .c-tijdlijn{ --labelkolom-nu:var(--w-labelkolom-smal); }
  .c-tijdlijn-labelkop,
  .c-tijdlijn-labelkolom{ padding:var(--sp-3) var(--sp-5); font-size:var(--t-meta); gap:var(--sp-2); }
  .c-tijdlijn-labelkolom b{ font-size:var(--t-micro); }
  .c-tijdlijn-maand{ padding:var(--sp-3) var(--sp-4); font-size:var(--t-micro); }
}

@media (orientation:landscape) and (max-height:520px){
  /* Eén eigenschap verzetten volstaat: kop, kolom, raster en vandaag-lijn
     rekenen er allemaal mee. */
  .c-tijdlijn{ --labelkolom-nu:var(--w-labelkolom-liggend); }
  .c-tijdlijn-labelkop,
  .c-tijdlijn-labelkolom{
    padding:var(--sp-3) var(--sp-5);
  }
  .c-tijdlijn-labelkop{ font-size:var(--t-meta); }
  .c-tijdlijn-labelkolom{
    font-size:var(--t-meta);
    gap:var(--sp-2);
  }
  .c-tijdlijn-labelkolom b{ font-size:var(--t-micro); }
  .c-tijdlijn-maand{
    padding:var(--sp-3) var(--sp-4);
    font-size:var(--t-micro);
  }
  /* Krappere rijen: 26px hoog met een balk van 12px. */
  .c-tijdlijn-spoor{ height:26px; }
  .c-tijdlijn-balk{
    top:7px; /* (26 - 12) / 2, geen ruimtetoken */
    height:var(--sp-6); /* 12px balk op een klein scherm */
  }
  .c-tijdlijn-mijlpaal{
    top:var(--sp-4);
    width:var(--sp-5);  /* 10px ruit op een klein scherm */
    height:var(--sp-5);
  }
  .c-tijdlijn-vandaag::after{
    top:26px; /* net onder de tijdas, die hier lager is */
    font-size:var(--t-mini);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   MOBIEL, de lijst- en fundamentcomponenten op een smal scherm
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:699px){
  /* De WBS-hiërarchie springt half zo ver in, anders blijft er geen
     titel over op 390px. */
  .c-lijstrij[data-niveau="2"]{ margin-left:var(--sp-8); }
  .c-lijstrij[data-niveau="3"]{ margin-left:var(--sp-16); }

  .c-lijstrij,
  .c-actiekaart,
  .c-actiekaart-kop{
    gap:9px; /* 9px, tussen sp-4 en sp-5 in */
    padding:var(--sp-5) var(--sp-6);
  }
  .c-lijstrij-titel{ font-size:var(--t-knop); }
  .c-lijstrij-body{ margin-left:calc(var(--sp-6) * -1); margin-right:calc(var(--sp-6) * -1); }

  /* De velden vallen onder elkaar in twee kolommen. */
  .c-veldgrid{ grid-template-columns:repeat(2,1fr); }
  .c-actiekaart-grid{ grid-template-columns:1fr; }

  .c-fundament-rij{
    gap:9px;
    padding:var(--sp-4) var(--sp-5);
    font-size:var(--t-knop);
  }
  .c-fundament-dot{
    width:7px;  /* 7px bolletje op mobiel, geen maattoken */
    height:7px;
  }
  .c-fundament-vers{ font-size:var(--t-overline); }
  .c-groepkop{ font-size:var(--t-overline); margin-bottom:var(--sp-3); }
}


/* ═══════════════════════════════════════════════════════════════════
   KNOP-RESETS
   Verschillende van de componenten hierboven worden als <button>
   gerenderd, omdat ze klikbaar zijn en dan toetsenbord en
   schermlezer meekrijgen. Een knop erft echter niet de kleur en het
   font van zijn omgeving, maar neemt de browserdefaults. Zonder deze
   regel wordt de tekst bijna zwart en valt ze weg tegen een donkere
   achtergrond. Dit is precies eenmaal misgegaan bij de trajectnaam en
   eenmaal bij de uitlijning van een navigatie-item, vandaar deze
   vangnetregel.
   ═══════════════════════════════════════════════════════════════════ */
.c-fundament-rij,
.c-rail-item,
.c-tab,
.c-opbouw-item{
  font:inherit;
  font-family:var(--font-ui);
  background:none;
  border:0;
  text-align:left;
  cursor:pointer;
}
.c-rail-item,
.c-tab{ text-align:center }
.c-fundament-rij{ color:var(--ink) }


/* ═══════════════════════════════════════════════════════════════════
   GROEPVELD, autosuggest met bron-labels (sensing ronde 1, frame 13c)
   ═══════════════════════════════════════════════════════════════════ */
.c-groepveld{ position:relative; }
.c-groepveld-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:var(--z-sticky);
  margin-top:var(--sp-1);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  box-shadow:var(--sch-flyout);
  max-height:240px;
  overflow-y:auto;
}
.c-groepveld-menu[hidden]{ display:none; }
.c-groepveld-optie{
  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);
  background:none;
  border:0;
  border-bottom:1px solid var(--cream2);
  padding:9px var(--sp-6);
  cursor:pointer;
}
.c-groepveld-optie:last-child{ border-bottom:0; }
/* de "uit stakeholdermap"-suggesties krijgen een cream2-tint (frame 13c) */
.c-groepveld-optie[data-bron="map"]{ background:var(--cream2); }
.c-groepveld-optie[data-bron="map"]:hover{ background:var(--cream2); }
.c-groepveld-optie:hover{ background:var(--cream2); }
.c-groepveld-optie-naam{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-groepveld-bron{ margin-left:auto; flex:none; font-size:var(--t-meta); color:var(--ink-soft); }
.c-groepveld-hint{
  display:flex;
  gap:var(--sp-3);
  align-items:flex-start;
  margin-top:var(--sp-4);
  border:1px solid var(--line);
  border-left:var(--rand-status) solid var(--geel);
  border-radius:var(--r-status);
  background:var(--wit);
  padding:9px var(--sp-6);
  font-size:var(--t-pil);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
.c-groepveld-hint[hidden]{ display:none; }
.c-groepveld-maplink{
  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;
  white-space:nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
   GESPREKSFORMULIER (sensing ronde 1, frame 14a)
   ═══════════════════════════════════════════════════════════════════ */
/* Het privé-blok, visueel afgezonderd: gestreepte rand, ingesloten cream2. */
.c-gesprek-prive{
  border:1px dashed var(--line-ghost);
  border-radius:var(--r-l);
  background:var(--cream2);
  padding:13px var(--sp-7);
}
/* Met wie (breder) en Datum als twee kolommen in één rij, samen vol breed. */
.c-gesprek-rij2{ display:flex; gap:var(--sp-6); }
.c-gesprek-rij2 .c-gesprek-col-wie{ flex:1.4 1 0; min-width:0; }
.c-gesprek-rij2 .c-gesprek-col-datum{ flex:1 1 0; min-width:0; }
/* Een type=date rendert door de browser lager dan een tekstveld; een vaste
   hoogte + border-box trekt beide velden op dezelfde lijn. R84-veldhoogte:
   34px i.p.v. 40px, gelijk aan de natuurlijke hoogte van een tekstveld. */
.c-gesprek-rij2 .c-veldvak-invoer{ box-sizing:border-box; height:34px; }
.c-gesprek-prive-kop{ display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.c-gesprek-prive-label{
  font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-breed);
  text-transform:uppercase; color:var(--ink-soft);
}
.c-gesprek-prive-uitleg{ font-size:var(--t-pil); color:var(--ink-soft); }
/* Mobiel (14b): de kop is een inklap-toggle met chevron; het blok kan dicht. */
.c-gesprek-prive-kop.is-toggle{ width:100%; align-items:center; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.c-gesprek-prive-chev{ margin-left:auto; flex:none; font-size:11px; color:var(--ink-soft); transition:transform .16s; }
.c-gesprek-prive.is-dicht .c-gesprek-prive-kop{ margin-bottom:0; }
.c-gesprek-prive.is-dicht .c-gesprek-prive-chev{ transform:rotate(-90deg); }
.c-gesprek-prive.is-dicht .c-gesprek-prive-body{ display:none; }
@media (max-width:699px){
  /* Met wie en Datum gestapeld, zonder per-veld-labels */
  .c-gesprek-prive-body{ display:flex; flex-direction:column; gap:var(--sp-4); }
}
.c-gesprek-deelbaar{ display:flex; flex-direction:column; gap:var(--sp-6); }
/* FB-U7 — "met hoeveel mensen sprak je?": een smal getalveld + zachte hint. */
.c-gesprek-gehoord{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.c-gesprek-gehoord-in{ width:5.5em; flex:none; }
.c-gesprek-gehoord-hint{ font-size:var(--t-klein); color:var(--ink-soft); flex:1; min-width:12ch; }
.c-gesprek-bewijs{ display:flex; flex-direction:column; gap:var(--sp-4);
  border-top:1px solid var(--line); padding-top:var(--sp-6); }
.c-gesprek-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.c-gesprek-chip{
  display:inline-flex; align-items:center; gap:var(--sp-4);
  font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-dark);
  /* petrol-was per frame 14a (.1, iets sterker dan het gedeelde --vul-petrol) */
  background:rgba(18,113,108,.1); border:1px solid var(--petrol-light);
  border-radius:var(--r-pil); padding:var(--sp-3) var(--sp-6); white-space:nowrap;
}
.c-gesprek-chip-x{
  font-size:var(--t-pil); color:var(--ink-soft); background:none; border:0; cursor:pointer; line-height:1;
}
/* De twee actie-chips: gestreept neutraal (koppelen) en gestreept terracotta
   (nieuw inzicht). */
.c-gesprek-chipknop{
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  background:var(--wit); border:1px dashed var(--line-ghost); border-radius:var(--r-pil);
  padding:var(--sp-3) var(--sp-6); cursor:pointer; white-space:nowrap; max-width:100%;
}
.c-gesprek-chipknop.is-koppel{ color:var(--ink-soft); }
.c-gesprek-chipknop.is-nieuw{ color:var(--terra); border-color:var(--terra); }
.c-gesprek-koppelwrap{ position:relative; display:inline-flex; }
.c-gesprek-koppelmenu{
  position:absolute; top:100%; left:0; z-index:var(--z-sheet);
  min-width:220px; max-width:320px; margin-top:var(--sp-2);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-s);
  box-shadow:var(--sch-flyout); max-height:220px; overflow-y:auto;
}
.c-gesprek-koppelmenu[hidden]{ display:none; }
.c-gesprek-koppeloptie{
  display:block; width:100%; text-align:left; font-family:var(--font-ui); font-size:var(--t-body);
  color:var(--ink); background:none; border:0; border-bottom:1px solid var(--cream2);
  padding:9px var(--sp-6); cursor:pointer;
}
.c-gesprek-koppeloptie:last-child{ border-bottom:0; }
.c-gesprek-koppeloptie:hover{ background:var(--cream2); }
.c-gesprek-koppelleeg{ font-size:var(--t-pil); color:var(--ink-soft); padding:var(--sp-6); line-height:var(--lh-body); }
.c-gesprek-voethint{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-lijst); }

/* ═══════════ RONDE 51 · SIGNAAL-KAARTEN (frame 51a) ═══════════
   Herhaalbare kaarten in het gesprekvenster: één kaart = één inzicht-record
   (model B). Purpose-built chips: grijs (neutraal) tot .is-actief — geen
   statuswissel-prefill. De kantlijn kleurt naar het gekozen signaal; "waar zit
   het?" + grondoorzaak verschijnen alleen bij een negatief/neutraal signaal. */
.c-sig-sectie{ display:flex; flex-direction:column; gap:var(--sp-5);
  border-top:1px solid var(--line); padding-top:var(--sp-6); }
.c-sig-kop{ display:flex; align-items:center; gap:var(--sp-5); }
.c-sig-kop-lab{ font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-breed); text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }
.c-sig-kop-lijn{ flex:1; height:1px; background:var(--line); }
.c-sig-lijst{ display:flex; flex-direction:column; gap:var(--sp-5); }

.c-sig-kaart{ display:flex; flex-direction:column; gap:var(--sp-4);
  background:var(--wit); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:0 var(--r-m) var(--r-m) 0; padding:var(--sp-5) var(--sp-6); }

.c-sig-rij1,.c-sig-rij2{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
/* FB18 — subtiele groepsscheider tussen signaal- en sterktepillen (haarlijn). */
.c-sig-scheid{ align-self:stretch; width:1px; min-height:18px; margin:0 2px; background:var(--line, #E2DAD0); }
.c-sig-rij3{ display:flex; flex-direction:column; gap:var(--sp-4); border-top:1px solid var(--cream2); padding-top:var(--sp-4); }
.c-sig-mini-lab{ font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }

/* De chip (design 51a): niet-gekozen = witte pil met grijze rand en grijze
   tekst; gekozen = MASSIEVE vulling met witte tekst. De vulkleur verschilt per
   chip-type en is nooit mint — sterkte/subgroep dragen petrol-deep, een rem een
   neutraal grijs (geen kleur-lading), en het signaal zijn eigen betekeniskleur. */
.c-sig-chip{ font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--ink-soft); background:var(--wit); border:1px solid var(--line);
  border-radius:var(--r-pil); padding:var(--sp-3) var(--sp-5); cursor:pointer; white-space:nowrap; line-height:1.1; }
.c-sig-chip.is-actief{ color:#fff; border-color:transparent; }
.c-sig-sterkte.is-actief,
.c-sig-sub.is-actief{ background:var(--petrol-deep); }
.c-sig-rem.is-actief{ background:var(--ink-soft); }
.c-sig-signaal.is-positief.is-actief{ background:var(--groen); }
.c-sig-signaal.is-neutraal.is-actief{ background:var(--geel); }
.c-sig-signaal.is-negatief.is-actief{ background:var(--rood); }

.c-sig-x{ margin-left:auto; font-size:var(--t-pil); color:var(--ink-soft);
  background:none; border:0; cursor:pointer; line-height:1; padding:var(--sp-2); }

.c-sig-aantal{ display:inline-flex; align-items:center; gap:4px; margin-left:auto;
  font-size:var(--t-klein); color:var(--ink-soft); white-space:nowrap; }
/* de type=number-invoer draagt een globale width:100% (huisstijl.css); vandaar
   de extra specificiteit hier zodat het aantal-veld compact blijft. */
.c-sig-rij2 .c-sig-aantal-in{ width:64px; flex:none; box-sizing:border-box;
  font-family:var(--font-ui); font-size:var(--t-klein);
  border:1px solid var(--line); border-radius:var(--r-s); padding:var(--sp-2) var(--sp-3); text-align:right; }

.c-sig-remrij{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.c-sig-anders{ flex:1; min-width:140px; }
/* grondoorzaak (design 51a): één veld op zand met een vast voorvoegsel-label. */
.c-sig-grondveld{ display:flex; align-items:baseline; gap:6px; width:100%;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-s); padding:8px 11px; }
.c-sig-grondlab{ flex:none; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink-soft); }
.c-sig-grond-in{ flex:1; min-width:0; border:0; background:none; font-family:var(--font-ui);
  font-size:var(--t-klein); color:var(--ink); padding:0; }
.c-sig-grond-in:focus{ outline:none; }

/* H-9 · "Gaat dit ook over…" — de laag-koppeling onder aan de kaart. Ingeklapt
   tot een stille toggle; open toont de drie evaluatie-lagen + de mini-wissel + een
   citaat. Is er een laag gekozen, dan draagt de rij een zachte petrol-tint. */
.c-sig-rij4{ border-top:1px solid var(--cream2); padding-top:var(--sp-4); margin-top:var(--sp-2); }
.c-sig-rij4.is-actief{ border-top-color:var(--petrol-light); }
.c-sig-laag-toggle{ font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-vet);
  color:var(--ink-soft); background:none; border:0; padding:0; cursor:pointer; }
.c-sig-laag-toggle.is-open{ color:var(--petrol-deep); }
.c-sig-laag-body{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-4); }
.c-sig-laag-soorten,.c-sig-laag-wissel{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); }
.c-sig-laag-soort.is-actief{ background:var(--petrol-deep); }
.c-sig-laag-w.is-actief{ background:var(--petrol-deep); }
/* "vol" raakt een capaciteitsplafond → statusrood i.p.v. petrol (geen readiness-kleur) */
.c-sig-laag-w.is-plafond.is-actief{ background:var(--rood); }
.c-sig-laag-citaat{ width:100%; }

.c-sig-voet{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.c-sig-plus{ font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:var(--wit); border:1px dashed var(--line-ghost);
  border-radius:var(--r-pil); padding:var(--sp-3) var(--sp-6); cursor:pointer; white-space:nowrap; }
.c-sig-tel{ font-size:var(--t-pil); color:var(--ink-soft); }

@media (max-width:699px){
  /* ruimere raakvlakken; de rij-uitlijners (marge-auto) laten los zodat alles wrapt */
  .c-sig-chip{ padding:9px var(--sp-5); }
  .c-sig-aantal,.c-sig-x{ margin-left:0; }
  .c-sig-rij1,.c-sig-rij2,.c-sig-rij3{ gap:var(--sp-4); }
}

/* ═══════════ MISSIES (ronde 19a) ═══════════ */
.c-missies{ display:flex; flex-direction:column; gap:var(--sp-7); }
.c-missies-kop{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.c-missies-titel{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-l); color:var(--petrol-dark); }
.c-missies-leeg{ text-align:center; padding:var(--sp-12) var(--sp-8); background:var(--wit); border:1px solid var(--line); border-radius:var(--r-l); display:flex; flex-direction:column; gap:var(--sp-5); align-items:center; }
.c-missies-leeg-kop{ margin:0; font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-m); color:var(--petrol-dark); }
.c-missies-leeg-uit{ margin:0; font-size:var(--t-body); color:var(--ink-soft); max-width:44ch; line-height:var(--lh-body); }
.c-missies-lijst{ display:flex; flex-direction:column; gap:var(--sp-6); }

.c-missiekaart{
  display:flex; flex-direction:column; gap:var(--sp-5); width:100%; text-align:left;
  background:var(--wit); border:1px solid var(--line); border-left:3px solid var(--st-loopt);
  border-radius:0 var(--r-l) var(--r-l) 0; padding:var(--sp-7) var(--sp-8); cursor:pointer;
}
/* Statuskleuren één-op-één uit de WBS-reeks (FB19): lopend = --st-loopt (groen),
   aflopend = amber, afgerond = --st-af (gedempt grijs). Missies dragen geen
   eigen kleurbetekenis. */
.c-missiekaart[data-stand="loopt-af"]{ border-left-color:var(--geel); }
.c-missiekaart[data-stand="af"]{ border-left-color:var(--st-af); }
.c-missiekaart[data-stand="af"] .c-missiekaart-titel,
.c-missiekaart[data-stand="af"] .c-missiekaart-doel{ color:var(--ink-soft); }
.c-missiekaart:hover{ box-shadow:var(--sch-kaart); }
.c-missiekaart-kop{ display:flex; align-items:center; gap:var(--sp-5); }
.c-missiekaart-vink{ flex:none; color:var(--st-af); font-weight:var(--gew-zwaar); }
.c-missiekaart-titel{ font-weight:var(--gew-vet); font-size:var(--t-body); color:var(--ink); }
/* F5 — start-status op de kaart: gedownload/bevroren = "gestart" (gevulde petrol
   pil), nog niet = "nog niet gestart" (neutrale, gestreepte pil). */
.c-missiekaart-status{ flex:none; display:inline-flex; align-items:center; padding:2px 8px;
  border-radius:999px; font-family:var(--font-ui); font-size:var(--t-pil);
  font-weight:var(--gew-vet); letter-spacing:.01em; line-height:1.5; white-space:nowrap; }
.c-missiekaart-status.is-gestart{ background:var(--petrol); color:#fff; }
.c-missiekaart-status.is-nietgestart{ background:transparent; color:var(--muted,#6b7472);
  border:1px dashed var(--lijn,rgba(18,113,108,.28)); }
/* de stille export-snelkoppeling rechts (alleen op lopende rijen) */
.c-missiekaart-export{
  margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-vet);
  color:var(--petrol-deep); white-space:nowrap; cursor:pointer;
}
.c-missiekaart-export:hover{ text-decoration:underline; }
.c-missiekaart-export .c-slot{ font-size:var(--t-pil); }
.c-missiekaart-doel{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); }
.c-missiekaart-loptaf{ font-size:var(--t-klein); color:var(--geel-tekst); line-height:var(--lh-body); }
/* FB-U2 — de streefdatum (missie-einde), neutraal, altijd op de kaart */
.c-missiekaart-streef{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); }
/* R71 — .c-missiekaart-voortgang + .c-missiekaart-tel vervielen: geen voortgang-
   teller meer op de kaart (één retourbestand, geen tussentijdse opladingen). */
/* import-fix — onverwerkte-oogst-strip op de missiekaart + de geen-match-waarschuwing
   in de import-review. */
.c-missiekaart-onverwerkt{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-3); padding:6px 10px; border-radius:8px; background:var(--geel-zacht,rgba(217,166,60,.14)); }
.c-missiekaart-onverwerkt-lab{ font-size:var(--t-klein); color:var(--geel-tekst); font-weight:var(--gew-vet); }
.c-missiekaart-verwerk{ font-size:var(--t-klein); color:var(--petrol-deep); font-weight:var(--gew-vet); cursor:pointer; margin-left:auto; }
.c-missiekaart-verwerk:hover{ text-decoration:underline; }
/* 65i — de rustige "verwerkt · {datum}"-regel nadat de oogst is toegepast. */
.c-missiekaart-verwerkt{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); font-size:var(--t-klein); color:var(--ink-soft); }
.c-missiekaart-verwerkt-vink{ width:15px; height:15px; border-radius:50%; background:var(--petrol,#12716C); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
.c-import-rijwrap{ display:flex; flex-direction:column; gap:4px; }
.c-import-waarschuw{ font-size:var(--t-klein); color:var(--geel-tekst); line-height:var(--lh-body); padding-left:22px; }
.c-missiekaart-onder{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-missiekaart-wie{ display:inline-flex; gap:var(--sp-3); flex-wrap:wrap; }
.c-missiekaart-geenwie{ font-size:var(--t-pil); color:var(--ink-soft); font-style:italic; }
.c-missie-afrondlijst{ margin:var(--sp-5) 0; padding-left:var(--sp-9); font-size:var(--t-klein); color:var(--ink); }
.c-missie-afrondlijst li{ margin:2px 0; }

/* ═══════════ BLINDE VLEKKEN (ronde 21a) ═══════════
   Een eigen kaart in "Wat we leren"; altijd amber, altijd ↗. */
.c-blindevlek{ background:var(--cream2); border-radius:var(--r-l); padding:var(--sp-7) var(--sp-8); margin:var(--sp-6) var(--sp-8); }
.c-blindevlek-kop{ display:flex; align-items:baseline; gap:var(--sp-5); margin-bottom:var(--sp-6); }
.c-blindevlek-label{ font-size:10.5px; font-weight:var(--gew-zwaar); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.c-blindevlek-sub{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-blindevlek-lijst{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-blindevlek-rij{
  display:flex; width:100%; text-align:left;
  border:1px solid var(--line); border-left:3px solid var(--geel); border-radius:0 var(--r-m) var(--r-m) 0;
  background:var(--wit); padding:11px var(--sp-7); cursor:pointer;
}
.c-blindevlek-rij:hover{ box-shadow:var(--sch-kaart); }
.c-blindevlek-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-body); }
.c-blindevlek-pijl{ color:var(--petrol-deep); font-weight:var(--gew-vet); white-space:nowrap; }
.c-blindevlek-meer{ margin-top:var(--sp-5); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; }
.c-blindevlek-meer:hover{ text-decoration:underline; }

/* ═══════════ HOE WE LUISTEREN — sensing-ratio's (ronde 21b) ═══════════
   Beschrijvend: Fraunces-cijfer + uitleg, geen kleur/label/oordeel. */
/* FB16: "How we listen" als strook — één witte kaart met een 4-koloms grid
   (2×2 mobiel), Fraunces-cijfers, verticale scheidingslijnen; reflectie, geen
   alarm (geen linksranden/statuskleuren). ≤120px hoog op web. */
.c-luisteren-strook{ border:1px solid var(--line); border-radius:var(--r-l); background:var(--wit); overflow:hidden; }
.c-luisteren-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.c-luisteren-cel{ display:flex; flex-direction:column; gap:4px; padding:14px var(--sp-7); border-left:1px solid #EFEBE3; min-width:0; }
.c-luisteren-grid > .c-luisteren-cel:first-child{ border-left:0; }
.c-luisteren-cijfer{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:24px; line-height:1.1; color:var(--petrol-dark); }
.c-luisteren-cijfer.is-signaal{ color:var(--geel-tekst); }
.c-luisteren-uitleg{ font-size:12px; color:var(--ink-soft); line-height:1.4; }
@media(max-width:640px){
  .c-luisteren-grid{ grid-template-columns:1fr 1fr; }
  .c-luisteren-cel:nth-child(odd){ border-left:0; }
  .c-luisteren-cel:nth-child(n+3){ border-top:1px solid #EFEBE3; }
}

/* ═══════════ HET EERSTE KWARTIER (ronde 22b) ═══════════
   Eén mint voorstelkaart bovenaan het dashboard. Mint = de app stelt voor. */
.c-eerstekwartier{ margin:var(--sp-6) 0 var(--sp-8); }
.c-ek-kaart{
  display:flex; align-items:center; gap:var(--sp-6);
  border:1px solid var(--mint-rand, #7FC4BE); border-radius:12px;
  background:rgba(127,196,190,.1); padding:14px var(--sp-8);
}
.c-ek-nr{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--petrol); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--t-klein); font-weight:var(--gew-zwaar);
}
.c-ek-tekst{ flex:1; min-width:0; font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-body); }
.c-ek-sub{ color:var(--ink-soft); }
.c-ek-doe{
  flex:none; display:inline-flex; align-items:center; min-height:38px;
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar);
  color:#fff; background:var(--terra); border:0; border-radius:var(--r-pil); padding:0 var(--sp-8); cursor:pointer; white-space:nowrap;
}
/* Ronde 26 (26a): "Doe het nu" + optioneel "Maak er een missie van" naast elkaar */
/* frame 26a: de twee acties gestapeld (primair boven, "maak er een missie van" eronder). */
.c-ek-knoppen{ flex:none; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
.c-ek-missie{
  flex:none; display:inline-flex; align-items:center; min-height:38px;
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:1px solid var(--petrol-light); border-radius:var(--r-pil);
  padding:0 var(--sp-7); cursor:pointer; white-space:nowrap;
}
.c-ek-missie:hover{ background:var(--vul-petrol); }
.c-ek-voet{ display:flex; align-items:center; gap:var(--sp-5); margin-top:10px; padding:0 4px; flex-wrap:wrap; }
/* FB12: de benoemde stapregel met status — ✓ af, benadrukt = nu, gedimd = nog. */
.c-ek-stappen{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--t-pil); }
.c-ek-stap{ display:inline-flex; align-items:center; gap:3px; color:var(--ink-soft); }
.c-ek-stap.is-vol{ color:var(--groen); }
.c-ek-stap.is-nu{ color:var(--petrol-deep); font-weight:var(--gew-zwaar); }
.c-ek-vink{ font-weight:var(--gew-zwaar); }
.c-ek-sep{ color:var(--line-sterk); }
.c-ek-over{ margin-left:auto; font-family:var(--font-ui); font-size:var(--t-pil); color:var(--ink-soft); background:none; border:0; cursor:pointer; white-space:nowrap; }
.c-ek-over:hover{ color:var(--ink); }

/* ═══════════ LEGE-STATEN-SJABLOON (ronde 22d, warm gemaakt in frame 32d) ═══════════
   Fraunces-belofte = wat je hier ziet, subregel = wat een rij draagt, één
   OMLIJNDE startknop, dan een gedempte voorproef. Géén kaart-in-kaart: de
   tab-inhoud is zelf het vlak, dus geen eigen achtergrond/rand/box hier. */
.c-legestaat{
  text-align:center;
  padding:var(--sp-10) var(--sp-8); display:flex; flex-direction:column; align-items:center; gap:var(--sp-5);
}
.c-legestaat-kop{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-m); color:var(--petrol-dark); }
.c-legestaat-uit{ margin:0; font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); max-width:44ch; }

/* 32d — de voorproef: twee voorbeeldrijen in de échte rij-layout, gedempt tot
   40% en niet interactief. Het label blijft leesbaar; alleen de rijen dempen. */
.c-legestaat-voorproef{ width:100%; margin-top:var(--sp-4); display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-4); }
.c-legestaat-vblabel{
  align-self:center; font-family:var(--font-ui); font-size:var(--t-pil);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.c-legestaat-vbrijen{ display:flex; flex-direction:column; gap:var(--sp-4); opacity:.4; pointer-events:none; user-select:none; text-align:left; }
.c-legestaat-vbrijen [inert]{ cursor:default; }

/* R71 — de voortgangsblokjes (frame 19b) vervielen met voortgangBalk. */

/* chips: naam (petrol-was), aanname (petrol-omlijnd), kies/toe (gestreept) */
.c-missie-chip{
  display:inline-flex; align-items:center; gap:var(--sp-4);
  font-size:var(--t-klein); font-weight:var(--gew-vet); border-radius:var(--r-pil);
  padding:var(--sp-3) var(--sp-6); white-space:nowrap;
}
.c-missie-chip.is-naam{ color:var(--petrol-dark); background:rgba(18,113,108,.1); border:1px solid var(--petrol-light); }
.c-missie-chip.is-aanname{ color:var(--petrol-dark); background:var(--vul-petrol); border:1px solid var(--petrol-light); }
.c-missie-chip.is-kies, .c-missie-chip.is-toe, .c-missie-chip.is-nieuwaanname{ color:var(--ink-soft); background:var(--wit); border:1px dashed var(--line-ghost); font-weight:var(--gew-normaal); cursor:pointer; }
/* FB8: de nog-niet-aangemaakte aanname draagt een mint noot "nieuw" */
.c-missie-chip.is-nieuw{ background:var(--vul-petrol); border:1px solid var(--petrol-light); }
.c-missie-chip-noot{ font-size:var(--t-pil); font-weight:var(--gew-normaal); color:var(--petrol-deep); opacity:.75; }
.c-missie-chip-x{ font-size:var(--t-pil); color:var(--ink-soft); background:none; border:0; cursor:pointer; line-height:1; }

.c-missie-aanname, .c-missie-toewijzing{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }
.c-missie-koppelrij{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }
.c-missie-aanname-geen{ font-size:var(--t-pil); color:var(--ink-soft); }
/* FB8: de stille hint dat de aanname pas bij Bewaar wordt aangemaakt */
.c-missie-aanname-hint{ flex-basis:100%; font-size:var(--t-pil); color:var(--ink-soft); }
.c-missie-aanname-input{
  font-family:var(--font-ui); font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-pil);
  padding:5px var(--sp-6); min-width:220px; background:var(--wit);
}
.c-missie-aanname-input[hidden]{ display:none; }

/* ═══════════════════════════════════════════════════════════════════
   FB22 — de vertrouwen-uitleg-popup (frame 16e), read-only
   ═══════════════════════════════════════════════════════════════════ */
.c-vertrouwen{ display:flex; flex-direction:column; gap:var(--sp-6); }
.c-vertrouwen-saldi{ display:flex; align-items:baseline; gap:var(--sp-4); }
.c-vertrouwen-pos{ font-family:var(--font-kop); font-size:22px; color:var(--groen); font-weight:var(--gew-zwaar); }
.c-vertrouwen-neg{ font-family:var(--font-kop); font-size:22px; color:var(--rood); font-weight:var(--gew-zwaar); }
.c-vertrouwen-sep{ color:var(--line-sterk); }
.c-vertrouwen-saldilab{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-vertrouwen-formule{ background:var(--cream2); border-radius:var(--r-m); padding:var(--sp-6); font-size:var(--t-body); color:var(--ink); line-height:var(--lh-lijst); }
.c-vertrouwen-koplijst{ font-size:var(--t-meta); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-half); color:var(--ink-soft); text-transform:uppercase; }
.c-vertrouwen-lijst{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-vertrouwen-rij{ display:flex; align-items:center; gap:var(--sp-5); }
.c-vertrouwen-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink-soft); }
.c-vertrouwen-dot[data-k="groen"]{ background:var(--groen); }
.c-vertrouwen-dot[data-k="rood"]{ background:var(--rood); }
.c-vertrouwen-naam{ flex:1; min-width:0; font-size:var(--t-body); color:var(--ink); }
.c-vertrouwen-bij{ flex:none; font-family:var(--font-kop); font-weight:var(--gew-zwaar); }
.c-vertrouwen-bij[data-k="pos"]{ color:var(--groen); }
.c-vertrouwen-bij[data-k="neg"]{ color:var(--rood); }
.c-vertrouwen-pijl{ flex:none; color:var(--petrol-deep); background:none; border:0; cursor:pointer; font-size:var(--t-body); }
.c-missie-koppelwrap{ position:relative; display:inline-flex; align-items:center; }
.c-missie-naaminput{
  font-family:var(--font-ui); font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-pil);
  padding:5px var(--sp-6); min-width:150px; background:var(--wit);
}
.c-missie-naaminput[hidden]{ display:none; }
.c-missie-koppelmenu{
  position:absolute; top:100%; left:0; z-index:var(--z-sheet);
  min-width:240px; max-width:340px; margin-top:var(--sp-2);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-s);
  box-shadow:var(--sch-flyout); max-height:220px; overflow-y:auto;
}
.c-missie-koppelmenu[hidden]{ display:none; }
.c-missie-koppeloptie{
  display:block; width:100%; text-align:left; font-family:var(--font-ui); font-size:var(--t-body);
  color:var(--ink); background:none; border:0; border-bottom:1px solid var(--cream2);
  padding:9px var(--sp-6); cursor:pointer;
}
.c-missie-koppeloptie:last-child{ border-bottom:0; }
.c-missie-koppeloptie:hover{ background:var(--cream2); }

/* twee-koloms-rij (doelgroep breed, richtaantal smal) */
.c-missie-rij2{ display:flex; gap:var(--sp-6); }
.c-missie-rij2 .c-missie-col-groot{ flex:1.6 1 0; min-width:0; }
.c-missie-rij2 .c-missie-col-klein{ flex:1 1 0; min-width:0; }
.c-veldvak-sub{ font-weight:var(--gew-normaal); color:var(--ink-soft); }

/* R71 — de "Maak missiebestand"-export-rij (c-missie-export*, c-missie-slot)
   verliet de missie-popup; download/upload leven nu in de kaart-uitklap. */

/* ── Ronde 26 §3 — het vraagsuggestie-blok (zand, gestreepte rand) ── */
.c-suggestieblok{
  margin-top:var(--sp-4); padding:var(--sp-5) var(--sp-6);
  background:var(--cream2); border:1px dashed var(--line-sterk, #D8CFC2); border-radius:var(--r-m);
}
.c-suggestieblok-kop{
  display:block; font-size:var(--t-pil); font-weight:var(--gew-vet);
  letter-spacing:.02em; color:var(--ink-soft); text-transform:uppercase;
  margin-bottom:var(--sp-4);
}
/* ingeklapt (gespreksformulier): summary met chevron */
details.c-suggestieblok > summary.c-suggestieblok-kop{ cursor:pointer; list-style:none; margin-bottom:0; }
details.c-suggestieblok > summary.c-suggestieblok-kop::-webkit-details-marker{ display:none; }
details.c-suggestieblok > summary.c-suggestieblok-kop::after{ content:' \0025BE'; }
details.c-suggestieblok[open] > summary.c-suggestieblok-kop::after{ content:' \0025B4'; }
details.c-suggestieblok[open] > summary.c-suggestieblok-kop{ margin-bottom:var(--sp-4); }
.c-suggestieblok-lijst{ display:flex; flex-direction:column; gap:var(--sp-3); }
/* 26c — de groep-context-regel: wat de app van de doelgroep weet */
.c-suggestie-context{ margin-top:var(--sp-3); font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
.c-suggestie-context:empty{ display:none; }
.c-suggestie-rij{ display:flex; align-items:flex-start; gap:var(--sp-4); }
.c-suggestie-tekst{ flex:1; font-size:var(--t-klein); color:var(--ink); line-height:1.45; }
.c-suggestie-voeg{
  flex:none; border:none; background:none; padding:0; cursor:pointer; white-space:nowrap;
  color:var(--petrol-deep); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
}
.c-suggestie-voeg:hover{ text-decoration:underline; }

/* Ronde 26 §5 — de deelnemer-suggestie (geloofwaardige stem) in het missieformulier */
.c-missie-stemsug{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  width:100%; margin-top:var(--sp-3); padding:var(--sp-4) var(--sp-5);
  background:var(--cream2); border:1px dashed var(--line-sterk, #D8CFC2); border-radius:var(--r-s);
}
.c-missie-stemsug-tekst{ flex:1; font-size:var(--t-klein); color:var(--ink); }
.c-missie-stemsug-reden{ display:block; font-size:var(--t-pil); color:var(--ink-soft); margin-top:2px; }
.c-missie-stemsug-voeg{
  flex:none; border:none; background:none; padding:0; cursor:pointer; white-space:nowrap;
  color:var(--petrol-deep); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
}
.c-missie-stemsug-voeg:hover{ text-decoration:underline; }

/* ═══════════ AGENT-SHELL (ronde 19b, uitgebreid ronde 28 §3) ═══════════
   Een missiebestand opent in deze compacte shell: geen rail, tabbalk of
   actie-FAB, en géén vier-ingangen-zijmenu. Ronde 28 zet in de missie-modus
   wél een zijmenu terug (De opdracht · Gesprekken · Het werkbord + de bewaar-/
   retour-acties). Het rustige retour-leesvenster heeft die niet en verbergt het
   zijmenu wél. */
body.agentshell-actief #rail,
body.agentshell-actief #tabbalk,
body.agentshell-actief #kopregel{ display:none !important; }
/* Fable-ruling 3: in missie-modus heeft de FAB één optie (+ gesprek); alleen in
   het rustige retour-leesvenster blijft hij verborgen. */
body.agentshell-actief:not(.missie-modus) #actieknop{ display:none !important; }
body.agentshell-actief:not(.missie-modus) #zijmenu{ display:none !important; }
body.agentshell-actief.missie-modus #zijmenu{ display:flex; flex-direction:column; }
body.agentshell-actief .werkvlak{ grid-column:1 / -1; }
body.agentshell-actief.missie-modus .werkvlak{ grid-column:2 / -1; }
/* §5b punt 1/10 — de shell-inhoud staat op een canvas (#F7F5F0) direct naast het
   petrol-zijmenu; de kaart krijgt zijn eigen binnenmarge, dus het houder-vlak zelf
   houdt padding:0. Geen dode kolom, geen tweede merk-band. */
body.agentshell-actief #kaart-houder{ padding:0; background:#F7F5F0; }
/* FB-12: op een telefoon staat .app in kolom-flex; het missie-zijmenu zou dan
   als een volle petrol-blok bóven de shell landen ("layout bij laden niet ok").
   De shell draagt daar zijn eigen kop (agentKop) én de bewaar-/retour-acties
   (priveHerinnering) al, dus het zijmenu is overbodig — we verbergen het. */
@media (max-width:699px){
  body.agentshell-actief.missie-modus #zijmenu{ display:none !important; }
}
/* FB-12b: op desktop staat de shell-inhoud gecentreerd in het werkvlak (rechts
   van het 264px-zijmenu), maar een detail-popup centreert op de volle viewport —
   dat gaf een zichtbare horizontale sprong ("de popup staat beter gecentreerd
   dan de achterliggende content"). We schuiven het centreervlak van de popup mee
   naar rechts, zodat popup en shell dezelfde as delen. De sluier blijft het volle
   scherm dekken (inset:0), dus het zijmenu dimt gewoon mee. */
@media (min-width:1101px){
  body.agentshell-actief.missie-modus .c-detailvenster-houder{
    padding-left:calc(var(--w-zijmenu) + var(--sp-12));
  }
}

/* §5b punt 1 — de shell staat links-uitgelijnd op het canvas, direct naast het
   zijmenu (geen auto-marge/dode kolom). De kaart draagt zijn eigen binnenmarge. */
/* R49-feedback — de shell mag breder, zodat het werkbord (vijf segmentkolommen)
   de volledige breedte benut. Alles even breed: geen aparte cap meer op de
   opdrachtkaart (die spant nu ook vol). */
.c-agentshell{ max-width:min(1160px, 100%); margin:0; padding:var(--pad-werkvlak); display:flex; flex-direction:column; gap:var(--sp-8); }
/* reliëf-briefing §1 — canvas ≠ kaart: het werkvlak achter de shell is canvas
   (#EDE9E1); de kaarten (opdrachtkaart, sectiekaarten) wit met rand + zachte
   schaduw. Eén contrast dat drie lagen maakt (menu / canvas / kaart). */
body.agentshell-actief #kaart-houder{ background:#EDE9E1; }
.c-agentmissie, .c-opdrachtkaart{ box-shadow:0 1px 3px rgba(10,57,54,.06); }

/* §5b punt 2 — de shell-kop als gewone Fraunces-paginakop (géén petrol-band). */
.c-agentshell-paginakop{ }
.c-agentshell-h1{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-titel); color:var(--petrol-dark); line-height:var(--lh-strak); margin:0; }
.c-agentshell-subregel{ font-size:var(--t-klein); color:var(--ink-soft); margin:6px 0 0; line-height:var(--lh-body); }

.c-agentshell-lijst{ display:flex; flex-direction:column; gap:var(--sp-6); }
.c-agentshell-leeg{ margin:0; font-size:var(--t-body); color:var(--ink-soft); text-align:center; padding:var(--sp-10) 0; }

/* §5b punt 3/5/10 — de opdrachtkaart en elke sectiekaart: cream (#FAF8F5). */
.c-agentmissie{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-l); padding:var(--sp-8); }
.c-agentmissie.is-actief{ }
.c-agentmissie-sectiekaart{ padding:2px var(--sp-8); }
.c-agentmissie-sectiekaart .c-modus-sectie{ border-bottom:0; }
.c-agentmissie-kop{ display:flex; align-items:baseline; gap:var(--sp-5); }
.c-agentmissie-titel{ font-weight:var(--gew-vet); font-size:var(--t-body); color:var(--ink); }
.c-agentmissie:not(.is-actief) .c-agentmissie-titel{ font-weight:var(--gew-normaal); }
.c-agentmissie-tel{ margin-left:auto; font-size:var(--t-klein); color:var(--ink-soft); white-space:nowrap; }
.c-agentmissie-doel{ font-size:var(--t-klein); color:var(--ink-soft); margin-top:4px; line-height:var(--lh-body); }
.c-agentmissie-rij{ display:flex; align-items:center; gap:var(--sp-5); margin-top:10px; }
.c-agentmissie-rij .c-agentmissie-tel{ margin-left:0; }
.c-agentmissie-gesprek{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-height:38px;
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar);
  color:#fff; background:var(--terra); border:0; border-radius:var(--r-pil); padding:0 var(--sp-8); cursor:pointer; white-space:nowrap;
}
.c-agentmissie-vragen{ border-top:1px solid var(--cream2); margin-top:11px; padding-top:9px; }
.c-agentmissie-vragen summary{ font-size:var(--t-klein); color:var(--ink-soft); cursor:pointer; list-style:none; }
.c-agentmissie-vragen summary::-webkit-details-marker{ display:none; }
.c-agentmissie-vragen summary::after{ content:" \0025BE"; }
.c-agentmissie-vragen[open] summary::after{ content:" \0025B4"; }
.c-agentmissie-vragentekst{ margin:8px 0 0; font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-body); white-space:pre-line; }

.c-agentshell-prive{
  display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap;
  margin:var(--sp-5) 0 0; padding:11px var(--sp-8);
  border:1px dashed var(--line-ghost); border-radius:var(--r-l); background:var(--cream2);
}
.c-agentshell-prive-tekst{ flex:1; min-width:200px; font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); }

/* §5b punt 8 — de blokkerende naamvraag: één gecentreerde kaart op het canvas. */
.c-agentshell-naamgate{ display:flex; justify-content:center; align-items:flex-start; padding:var(--sp-12) var(--sp-8) var(--sp-8); }
.c-naamkaart{
  width:100%; max-width:420px; display:flex; flex-direction:column; gap:var(--sp-5);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-l); padding:var(--sp-10) var(--sp-9);
}
.c-naamkaart-kop{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-xl); color:var(--petrol-dark); margin:0; }
.c-naamkaart-input{
  box-sizing:border-box; width:100%; height:40px; padding:0 var(--sp-6);
  font:inherit; font-size:var(--t-body); color:var(--ink);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-s);
}
.c-naamkaart-input:focus{ outline:none; border-color:var(--petrol); }
.c-naamkaart .c-knop{ align-self:flex-start; }
.c-naamkaart-uitleg{ font-size:var(--t-pil); color:var(--ink-soft); margin:0; line-height:var(--lh-body); }

/* ═══════════ MISSIEBESTANDEN IMPORTEREN (ronde 19c) ═══════════ */
.c-import-lijst{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-import-rij{
  display:flex; align-items:center; gap:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:11px var(--sp-7);
}
.c-import-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.c-import-dot[data-k="groen"]{ background:var(--groen); }
.c-import-dot[data-k="rood"]{ background:var(--rood); }
.c-import-naam{ font-size:var(--t-body); color:var(--ink); }
.c-import-stand{ margin-left:auto; font-size:var(--t-klein); color:var(--ink-soft); white-space:nowrap; }
.c-import-rij.is-fout .c-import-stand{ color:var(--rood); }

.c-import-botsing{
  border:1px solid rgba(217,166,60,.5); border-left:3px solid var(--geel);
  border-radius:0 var(--r-m) var(--r-m) 0; background:var(--wit); padding:11px var(--sp-7);
}
.c-import-botsing-kop{ display:flex; align-items:center; gap:var(--sp-5); }
.c-import-botsing-tel{ margin-left:auto; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--geel-tekst); white-space:nowrap; }
.c-import-botsing-uit{ font-size:var(--t-klein); color:var(--ink-soft); margin-top:6px; line-height:var(--lh-body); }
.c-import-naastelkaar{ font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:0; }
.c-import-naastelkaar:hover{ text-decoration:underline; }

.c-import-vergelijk{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:var(--sp-6) var(--sp-7); margin-bottom:var(--sp-5); }
.c-import-vergelijk-titel{ font-weight:var(--gew-vet); font-size:var(--t-body); color:var(--ink); }
.c-import-vergelijk-agents{ display:flex; gap:var(--sp-4); flex-wrap:wrap; margin:var(--sp-5) 0; }
.c-import-vergelijk-uit{ margin:0; font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); }

/* ═══════════ LICENTIE & PASSKEY (ronde 20) ═══════════ */
.c-licentie-kop{ display:flex; align-items:flex-start; gap:var(--sp-6); }
.c-licentie-slot{
  width:38px; height:38px; flex:none; border-radius:var(--r-m);
  background:rgba(200,121,65,.12); border:1px solid rgba(200,121,65,.4);
  display:inline-flex; align-items:center; justify-content:center; font-size:17px;
}
.c-licentie-koptekst{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.c-licentie-kop-titel{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-m); color:var(--petrol-dark); line-height:1.3; }
.c-licentie-kop-sub{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); }
.c-licentie-uitleg{ margin:0; font-size:var(--t-body); color:var(--ink); line-height:var(--lh-body); }
/* §AE — de vier Team-voordelen (cohentis.com-propositie) met een petrol-vinkje. */
.c-licentie-bullets{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.c-licentie-bullets li{ position:relative; padding-left:22px; font-size:var(--t-klein); color:var(--ink); line-height:1.45; }
.c-licentie-bullets li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--groen); font-weight:var(--gew-zwaar); }
.c-licentie-prijs{ margin:14px 0 0; font-size:var(--t-klein); font-weight:var(--gew-normaal); color:var(--ink-soft); }
.c-licentie-vraag{ display:block; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--ink-soft); margin-top:var(--sp-3); }
.c-licentie-knoprij{ display:flex; gap:var(--sp-5); }
.c-licentie-omlijnd{
  flex:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar);
  color:var(--petrol-deep); background:var(--wit); border:1.5px solid var(--petrol-deep);
  border-radius:var(--r-pil); padding:0 var(--sp-6); cursor:pointer; white-space:nowrap;
}
.c-licentie-koop{ width:100%; min-height:44px; }
.c-licentie-herstel{
  display:flex; align-items:center; justify-content:center; width:100%;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft);
  background:none; border:0; padding:var(--sp-4); cursor:pointer;
}
.c-licentie-herstel:hover{ text-decoration:underline; }
.c-licentie-fijndruk{ margin:0; font-size:var(--t-pil); color:var(--ink-soft); line-height:var(--lh-body); }

/* ═══════ Ronde 34 — Team koop-journey (frames 34a–34e) ═══════ */

/* Volle-breedte knoprij in de licentie-vensters (koop/betalen/sleutel). */
.c-licentie-koop{ display:flex; margin-top:var(--sp-4); }

/* 34b — de vier voordelen met een groene ✓. */
.c-licentie-bullets{ display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-5) 0; }
.c-licentie-voordeel{ display:flex; gap:var(--sp-4); font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-body); }
.c-licentie-vink{ flex:none; color:var(--groen); font-weight:var(--gew-zwaar); }

/* 34c — plankeuze: twee selecteerbare kaarten, jaar uitgelicht. */
.c-plan-rij{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin:var(--sp-5) 0; }
.c-plan-kaart{
  position:relative; display:flex; flex-direction:column; gap:3px; text-align:left;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-m);
  padding:16px var(--sp-6) 14px; cursor:pointer;
  transition:border-color var(--duur) var(--soepel), box-shadow var(--duur) var(--soepel);
}
.c-plan-kaart:hover{ border-color:var(--petrol); }
.c-plan-kaart.is-gekozen{ border:2px solid var(--petrol); box-shadow:0 0 0 3px rgba(18,113,108,.10); }
.c-plan-badge{
  position:absolute; top:-9px; left:12px; font-size:10px; font-weight:var(--gew-zwaar);
  color:var(--wit); background:var(--petrol); border-radius:var(--r-pil); padding:2px 9px; white-space:nowrap;
}
.c-plan-naam{ font-size:var(--t-klein); font-weight:var(--gew-zwaar); color:var(--ink); }
.c-plan-kaart[data-plan="jaar"] .c-plan-naam{ color:var(--petrol-dark); }
.c-plan-prijs{ font-family:Fraunces,Georgia,serif; font-weight:600; font-size:var(--t-h3,22px); color:var(--petrol-dark); margin-top:2px; }
.c-plan-sub{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-plan-veilig{ text-align:center; margin-top:var(--sp-4); }
@media (max-width:699px){ .c-plan-rij{ grid-template-columns:1fr; } }

/* 34d — "Team is actief": groene meldingsregel + het sleutel-vak. */
.c-klaar-groen{ display:flex; align-items:center; gap:var(--sp-4); font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-body); }
.c-klaar-vink{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:rgba(44,138,107,.12); border:1px solid var(--groen); color:var(--groen);
  display:inline-flex; align-items:center; justify-content:center; font-weight:var(--gew-zwaar);
}
.c-sleutel-box{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:14px var(--sp-6); margin-top:var(--sp-5); }
.c-sleutel-label{ font-size:var(--t-pil); font-weight:var(--gew-zwaar); letter-spacing:.06em; color:var(--ink-soft); }
.c-sleutel-rij{ display:flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-3); }
.c-sleutel-vak{
  flex:1; text-align:center; font-weight:var(--gew-zwaar); letter-spacing:.08em; color:var(--petrol-dark);
  border:1.5px dashed var(--line-sterk); border-radius:var(--r-s,8px); background:var(--cream2); padding:10px var(--sp-5);
}
.c-sleutel-kopieer{ flex:none; white-space:nowrap; min-height:42px; }
.c-sleutel-uitleg{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); margin:var(--sp-4) 0 0; }

/* 34e — abonnement-regel + toestellen-beheer. */
.c-abo-regel{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); margin:var(--sp-4) 0 0; }
.c-toestellen{ margin-top:var(--sp-6); }
.c-toestellen-kop{ font-size:var(--t-pil); font-weight:var(--gew-zwaar); letter-spacing:.06em; color:var(--ink-soft); }
.c-toestellen-lijst{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-3); }
/* De wisselnoot onder de lijst plakte tegen de laatste toestelkaart. */
.c-toestellen .c-licentie-fijndruk{ margin-top:var(--sp-4); }
.c-toestel-rij{ display:flex; align-items:center; gap:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:12px var(--sp-6); }
.c-toestel-info{ flex:1; min-width:0; }
.c-toestel-naam{ font-size:var(--t-klein); font-weight:var(--gew-halfvet); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-toestel-sinds{ font-size:var(--t-pil); color:var(--ink-soft); margin-top:1px; }
.c-toestel-chip{ flex:none; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep); background:rgba(18,113,108,.08); border:1px solid var(--petrol-light); border-radius:var(--r-pil); padding:2px 10px; white-space:nowrap; }
.c-toestel-vrij{ flex:none; font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; white-space:nowrap; }
.c-toestel-vrij:hover{ text-decoration:underline; }
.c-toestel-vrij.is-confirm{ color:var(--terra); }
.c-terugzet{ display:flex; align-items:center; gap:var(--sp-5); border-top:1px solid var(--line-ghost,#EFEBE3); margin-top:var(--sp-6); padding-top:var(--sp-5); font-size:var(--t-klein); color:var(--ink-soft); }
.c-terugzet .c-licentie-link{ margin-left:auto; }

/* 34e — de inklapbare licentiesleutel-rij. */
.c-sleutelrij{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); margin-top:var(--sp-5); overflow:hidden; }
.c-sleutelrij-kop{ display:flex; align-items:center; width:100%; background:none; border:0; cursor:pointer; padding:12px var(--sp-6); font-family:var(--font-ui); text-align:left; }
.c-sleutelrij-label{ font-size:var(--t-klein); font-weight:var(--gew-halfvet); color:var(--ink); }
.c-sleutelrij-toon{ margin-left:auto; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep); white-space:nowrap; }
.c-sleutelrij-lijf{ border-top:1px solid var(--line-ghost,#EFEBE3); padding:10px var(--sp-6) 12px; }
.c-sleutelrij-lijf[hidden]{ display:none; }
.c-sleutelrij-lijf .c-sleutel-rij{ margin:0; }
.c-sleutelrij-lijf .c-sleutel-kopieer{ min-height:38px; }

/* 34a — de tier-pill compact op de tablet-icoonrail (9a). */
.c-rail-team{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:22px; padding:0 8px; border-radius:var(--r-pil);
  background:var(--cream); color:var(--petrol-dark);
  font-family:var(--font-ui); font-size:9.5px; font-weight:var(--gew-zwaar);
  border:0; cursor:pointer; white-space:nowrap;
}

/* 34a — één tier-pill ("Cohentis Gratis ▸" → "Cohentis Team ▸").
   Geen aparte statuschip meer. */
.c-huisrij-pill{ display:inline-flex; align-items:center; font-family:var(--font-ui); border:0; border-radius:var(--r-pil); cursor:pointer; white-space:nowrap; }
/* zijmenu-variant: cream pill in een eigen zone onderin (op petrol) */
.c-huisrij-zone{ margin-top:auto; border-top:1px solid rgba(250,248,245,.15); padding:12px var(--sp-3) 2px; }
.c-huisrij-pill-menu{ font-size:var(--t-pil); font-weight:var(--gew-zwaar); color:var(--petrol-dark); background:var(--cream); padding:5px 14px; }
.c-huisrij-pill-menu:hover{ background:var(--wit); }
/* sheet-variant: volle-breedte pill-rij, alleen op de telefoon zichtbaar */
/* R89 · de rapport-ingang in de mobiele sheet (het zijmenu bestaat daar niet). */
.c-flyout-rapportrij{
  display:none; width:100%; align-items:center; gap:var(--sp-4); min-height:44px;
  margin-top:var(--sp-5); padding:0 var(--sp-6);
  font-family:var(--font-ui); font-size:var(--t-body); color:var(--ink);
  background:var(--cream2); border:0; border-radius:var(--r-veld); cursor:pointer;
}
/* het blok eromheen draagt de kop; op desktop staat de rapport-ingang in het
   zijmenu, dus blijft dit hele blok weg */
.c-sheet-rapport{ display:none; flex-direction:column; }
.c-sheet-rapport-kop{
  display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-7); padding:0 var(--sp-6);
  font-family:var(--font-ui); font-size:var(--t-meta); font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-breed); text-transform:uppercase; color:var(--ink-mist);
}
.c-sheet-rapport .c-flyout-rapportrij{ margin-top:var(--sp-3); }
@media (max-width:699px){ .c-flyout-rapportrij{ display:flex; } .c-sheet-rapport{ display:flex; } }

.c-huisrij-pill-sheet{ display:none; width:100%; justify-content:center; min-height:44px; padding:0 var(--sp-6);
  font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); background:var(--wit); border:1px solid var(--line); }
@media (max-width:699px){
  .c-huisrij-pill-sheet{ display:flex; }
  .c-flyout-liclink{ display:none; }   /* mobiel dekt de sheet-pill dit af */
}
/* 34a-web herzien — de tier-pill staat rechtsboven in de kopregel. Stil:
   canvas-kleur, 1px rand, geen terracotta.

   95a · DE TWEESPORENREGEL. De pill is een app-niveau element en geen
   scherm-actie. Spoor 1 is een eigen band rechtsboven, in alle drie de schillen
   op exact dezelfde plek; spoor 2 is de schermrij eronder, met titel en
   weergave-toggle links en de scherm-acties rechts.

   Hij stond hier absoluut, en dat was de fout. Absoluut betekent dat hij geen
   ruimte inneemt, dus zodra een schil rechts in de kopregel iets neerzette ging
   hij eroverheen: in het portfolio lag hij 108px over de actiegroep en
   verdrong hij "+ nieuw initiatief". Nu draagt hij zijn eigen regel, dus kan
   spoor 2 er per definitie niet meer onder komen. De pill wijkt niet; wat
   meegeeft is de actiezone, die bij weinig ruimte omlaag schuift. */
.c-kopregel{ position:relative; }
.c-kopregel-licentie{
  order:-1;                 /* altijd eerst, ongeacht waar de schil hem aanmaakt */
  flex:0 0 100%;            /* een eigen band, zodat spoor 2 eronder begint */
  display:flex; justify-content:flex-end; align-items:center;
  margin-bottom:var(--sp-2);
}
/* 95a · de vorm zoals vastgelegd: wit vlak (tokens.css legt vast dat --cream
   is wat de designer "wit" noemt), 1px --line = #DDD8CF, petrol-deep op
   12.5px/600 met een ▸. Geen terracotta, want het is geen handeling in het
   werk, en geen slotje, want dat teken hoort bij een geghoste knop.

   Stond op petrol-dark, --t-pil (11.5px) en --gew-zwaar (700). Drie kleine
   afwijkingen van de vastgelegde vorm; de 12.5px heeft geen token, dus staat
   hij hier als waarde. */
.c-huisrij-pill-kop{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--petrol-deep);
  background:var(--cream); border:1px solid var(--line); padding:6px 14px; }
.c-huisrij-pill-kop:hover{ background:var(--wit); border-color:var(--petrol); }
@media (max-width:699px){
  .c-kopregel-licentie{ display:none; }   /* mobiel blijft de 'Dit traject'-sheet de thuisbasis */
}

/* 34b — de stille sluit-link "Ik werk verder met de gratis versie". */
.c-licentie-verder{ display:block; width:100%; margin-top:var(--sp-3); padding:var(--sp-4);
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft);
  background:none; border:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.c-licentie-verder:hover{ color:var(--ink); }

/* een sober wachtspinnetje tijdens het bevestigen van de betaling */
.c-licentie-spinner{
  width:28px; height:28px; margin:var(--sp-6) auto; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--petrol-deep);
  animation:c-lic-draai .8s linear infinite;
}
@keyframes c-lic-draai{ to{ transform:rotate(360deg); } }

/* passkey */
.c-passkey-kaart{ display:flex; align-items:center; gap:var(--sp-6); border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:14px var(--sp-8); }
.c-passkey-ic{ font-size:22px; flex:none; }
.c-passkey-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-body); }
.c-passkey-titel{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-m); color:var(--petrol-dark); }
.c-herstelcode{
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--line-ghost); border-radius:var(--r-m); background:var(--cream2);
  padding:14px; font-size:15px; font-weight:var(--gew-zwaar); letter-spacing:.12em; color:var(--petrol-dark);
}

/* token */
.c-token-rij{ display:flex; gap:var(--sp-5); }
.c-token-invoer{
  flex:1; border:1px solid var(--petrol); border-radius:var(--r-s); background:var(--wit);
  padding:10px var(--sp-6); font-size:var(--t-body); letter-spacing:.08em; color:var(--ink);
}

/* overzicht */
.c-licentie-statuskop{ display:flex; align-items:baseline; gap:var(--sp-5); }
.c-licentie-statuschip{
  margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp-4);
  font-size:var(--t-klein); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:3px var(--sp-6); white-space:nowrap;
}
.c-licentie-statuschip[data-st="gratis"]{ color:var(--ink-soft); background:var(--cream2); border:1px solid var(--line); }
.c-licentie-statuschip[data-st="team"], .c-licentie-statuschip[data-st="company"]{ color:var(--petrol-deep); background:rgba(18,113,108,.08); border:1px solid var(--petrol-light); }
.c-licentie-regel{ display:flex; align-items:center; gap:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:11px var(--sp-7); font-size:var(--t-body); color:var(--ink); }
.c-licentie-link{ margin-left:auto; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; white-space:nowrap; }
.c-licentie-link:hover{ text-decoration:underline; }
.c-licentie-koopblok{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--cream2); padding:13px var(--sp-8); }
.c-licentie-koopblok-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-dark); }
.c-licentie-koopblok-rij{ display:flex; align-items:center; gap:var(--sp-6); margin-top:var(--sp-5); }
.c-licentie-koopblok-uit{ font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-body); }
.c-licentie-koopblok-rij .c-knop{ margin-left:auto; white-space:nowrap; }

/* seats */
.c-seats{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--wit); padding:var(--sp-6) var(--sp-7); }
.c-seats-kop{ display:flex; align-items:baseline; gap:var(--sp-5); }
.c-seats-titel{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-m); color:var(--petrol-dark); }
.c-seats-tel{ margin-left:auto; font-size:var(--t-klein); color:var(--ink-soft); white-space:nowrap; }
.c-seats-lijst{ display:flex; flex-direction:column; gap:7px; margin-top:var(--sp-5); }
.c-seats-rij{ display:flex; align-items:center; gap:var(--sp-5); border:1px solid var(--line); border-radius:var(--r-s); background:var(--wit); padding:9px var(--sp-6); }
.c-seats-naam{ font-size:var(--t-klein); color:var(--ink); white-space:nowrap; }
.c-seats-sinds{ margin-left:auto; font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }
.c-seats-intrekken{ font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--rood); background:none; border:0; cursor:pointer; white-space:nowrap; }
.c-seats .c-licentie-omlijnd{ flex:none; margin-top:var(--sp-5); }

/* 7a (9 aug) — de flyout-onderkant: 🔒 op de import-knop, de stille "Sluit
   bestand"-pill met muted subregel, en de licentiebeheer-link in de privacyregel
   (de aparte 20d-licentie-rij vervalt). */
.c-flyout-knop-slot{ margin-left:6px; font-size:.9em; line-height:1; }
/* stille pill: sober omlijnd, gedempte tekst — géén actie-accent zoals de drie
   knoppen erboven. Klik = werkbestand sluiten → welkomscherm. */
.c-flyout-sluit{
  width:100%; margin-top:var(--sp-4); font-family:var(--font-ui);
  font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--ink-soft);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-pil);
  padding:11px var(--sp-7); cursor:pointer; text-align:center;
}
.c-flyout-sluit:hover{ background:var(--cream2); color:var(--ink); }
.c-flyout-sluit-sub{
  margin-top:6px; text-align:center; font-size:var(--t-pil);
  color:var(--ink-soft); line-height:var(--lh-body);
}
/* privacyregel + stille licentiebeheer-link ernaast */
.c-flyout-privacyrij{ display:flex; align-items:baseline; gap:var(--sp-6); }
.c-flyout-privacyrij .c-venster-hulp{ flex:1 1 auto; min-width:0; }
.c-flyout-liclink{
  flex:none; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:0; padding:0; cursor:pointer; white-space:nowrap;
}
.c-flyout-liclink:hover{ text-decoration:underline; }
@media (max-width:699px){
  /* in de mobiele opslag-sheet (7c) stapelt de privacyregel: de nowrap
     licentiebeheer-link zakt onder de privacy-zin i.p.v. ernaast, zodat hij op
     smalle sheets niet tegen de tekst gedrukt wordt of afkapt. */
  .c-flyout-privacyrij{ flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
}
.c-gesprek-bewaar{
  margin-left:auto; font-family:var(--font-ui); font-size:var(--t-body-plus); font-weight:var(--gew-zwaar);
  color:var(--wit); background:var(--terra); border:0; border-radius:var(--r-pil);
  padding:10px var(--sp-10); cursor:pointer; white-space:nowrap;
}
.c-gesprek-bewaar:hover{ background:var(--terra-hover); }




/* ═══════════════════════════════════════════════════════════════════
   FAB "+" met twee opties (briefing-fab-plus)
   ═══════════════════════════════════════════════════════════════════ */
.c-fab-plus{
  gap:0;
  width:56px;
  height:56px;
  padding:0;
  justify-content:center;
  font-size:26px;
  line-height:1;
}
.c-fabmenu-houder{ position:fixed; inset:0; z-index:var(--z-sheet); }
.c-fabmenu-sluier{ position:absolute; inset:0; background:transparent; }
.c-fabmenu{
  position:absolute;
  z-index:1;
  min-width:190px;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sch-flyout);
  overflow:hidden;
  padding:var(--sp-2);
}
/* Een optie: kleurstip + titel-met-subregel (frame 23d). Terracotta = handelen,
   petrol = luisteren — dezelfde as als overal. */
.c-fabmenu-optie{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  width:100%;
  min-height:44px;
  font-family:var(--font-ui);
  background:none;
  border:0;
  border-radius:var(--r-m);
  padding:var(--sp-3) var(--sp-6);
  text-align:left;
  cursor:pointer;
}
.c-fabmenu-optie:hover{ background:var(--cream2); }
.c-fabmenu-stip{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--ink-soft); }
.c-fabmenu-stip[data-k="terra"]{ background:var(--terra); }
.c-fabmenu-stip[data-k="petrol"]{ background:var(--petrol-light); }
/* Ronde 26 §6: Missie-optie = open petrol ring (aanmaken is gratis) */
.c-fabmenu-stip[data-k="petrol-ring"]{ background:none; border:1.5px solid var(--petrol); box-sizing:border-box; }
/* ruling 27d (herzien 9 aug): risico = gevulde rode stip (#C0563A = --rood), één
   familie met actie/gesprek/missie; het eerdere mini-grid-icoon is geschrapt. */
.c-fabmenu-stip[data-k="risico"]{ background:var(--rood); }
/* Ronde 66: aanname = open amber ring-dot (iets dat je denkt, nog te toetsen). */
.c-fabmenu-stip[data-k="aanname"]{ background:none; border:2px solid var(--geel); box-sizing:border-box; }
.c-fabmenu-tekst{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-fabmenu-titel{ font-size:var(--t-body-plus); font-weight:var(--gew-vet); color:var(--ink); }
.c-fabmenu-sub{ font-size:var(--t-meta); color:var(--ink-soft); white-space:nowrap; }
/* de contextregel onderaan: "koppelt aan: …", vlak tot de rand */
.c-fabmenu-context{
  font-size:var(--t-meta); color:var(--ink-soft);
  background:var(--cream2); border-top:1px solid var(--line);
  padding:var(--sp-4) var(--sp-6);
  margin:var(--sp-3) calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2));
}
/* Mobiel: de opties als bottom sheet — zelfde c-sheet-component als de
   statuswissel (greep + rijen ≥52px). */
.c-fabsheet{ padding-bottom:var(--sp-8); }
.c-fabsheet .c-fabmenu-optie{ min-height:52px; padding:var(--sp-3) var(--sp-8); }
.c-fabsheet .c-fabmenu-stip{ width:10px; height:10px; }
.c-fabsheet .c-fabmenu-titel{ font-size:var(--t-nav); }
.c-fabsheet .c-fabmenu-context{ margin:var(--sp-3) 0 0; border-radius:0; }
@media (max-width:699px){
  .c-fabmenu-sluier{ background:var(--sluier-sterk); }
}
/* De "+" kantelt 45° naar een ✕ zolang het menu open is (frame 23d). */
.c-fab-plus span{ display:inline-block; transition:transform var(--duur) var(--soepel); }
.c-fab-plus.is-open span{ transform:rotate(45deg); }


/* ═══════════════════════════════════════════════════════════════════
   ACTIES & GESPREKKEN — inhouds-tabs in de kopregel (briefing-fab-plus)
   ═══════════════════════════════════════════════════════════════════ */
.c-kopregel-tabs{
  display:flex;
  gap:var(--sp-8);
  margin-top:var(--sp-3);
  /* de tabs zijn nu een sibling van het titel/sub-blok (zodat ze op mobiel niet
     met dat blok mee verborgen worden); flex-basis:100% legt ze op een eigen
     volle regel ónder de titel — op desktop en mobiel gelijk. */
  flex-basis:100%;
}
.c-kopregel-tab{
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:var(--sp-2) 0;
  border-bottom:2px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.c-kopregel-tab.is-actief{ color:var(--petrol-deep); border-bottom-color:var(--petrol-deep); }
.c-kopregel-tab-tel{ font-weight:var(--gew-normaal); color:var(--ink-soft); }
/* R42 (E1, story 1.1) — de Missies-tab "roept" zolang het instrument onontdekt
   is: een open terracotta contour die de aandacht trekt zonder de tab te vullen.
   Verdwijnt zodra er een missie is. */
.c-kopregel-tab.is-roept{
  border:2px solid var(--terra);
  border-radius:var(--r-veld, 8px);
  padding-left:var(--sp-3); padding-right:var(--sp-3);
}
.c-kopregel-tab.is-roept.is-actief{ border-bottom-color:var(--terra); }
/* Het hint-vlak onder de subtab-strook: één zachte zin die benoemt wat er te
   toetsen valt en wat een missie is, met een ✕ om het weg te leggen. */
.c-missie-hint{
  flex-basis:100%;
  display:flex; align-items:flex-start; gap:var(--sp-3);
  margin-top:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--cream2, #f6f1e7); border:1px solid var(--line);
  border-radius:10px;
}
.c-missie-hint-tekst{ flex:1; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); line-height:1.35; }
.c-missie-hint-weg{
  flex:none; background:none; border:0; cursor:pointer;
  color:var(--ink-soft); font-size:var(--t-klein); line-height:1; padding:2px;
}
.c-missie-hint-weg:hover{ color:var(--ink); }
@media (max-width:699px){
  /* Fable-UI-beslissing 4 — de vier Opvolging-tabs passen niet op één 360px-regel:
     één regel die horizontaal schuift (app-conventie), volle labels + tellers
     intact, elke tab flex:none, scrollbar verborgen. Een zachte fade aan de
     rechterrand (mask) is de scroll-affordance: "er staat nog meer". */
  .c-kopregel-tabs{
    gap:var(--sp-6); overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-top:var(--sp-4);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .c-kopregel-tabs::-webkit-scrollbar{ display:none; }
  .c-kopregel-tab{ flex:none; min-height:44px; }
}

/* Het gespreksoverzicht (Gesprekken-tab). */
/* Ronde 41 — de gesprekrij hergebruikt de vormgeving van de risico-kaart (bord.css
   .c-risbord-rij): witte kaart met kop-regel (onderwerp vet + groep-pill) en een
   met een hairline gescheiden meta-regel (stand · datum links, koppel-stand rechts). */
.c-gesprekkenlijst{ display:flex; flex-direction:column; gap:var(--sp-3); }
.c-gesprekrij{
  display:flex; flex-direction:column;
  width:100%; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:11px 15px; cursor:pointer;
}
.c-gesprekrij:hover{ border-color:var(--petrol); }
/* kop: onderwerp (t-knop, vet) groeit met ellipsis; groep-pill rechts */
.c-gesprekrij-kop{ display:flex; align-items:center; gap:var(--sp-5); }
.c-gesprekrij-onderwerp{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-knop); font-weight:var(--gew-vet); color:var(--ink); }
.c-gesprekrij-groep{
  flex:none; max-width:150px; min-width:0;
  display:inline-flex; align-items:center;
  font-size:var(--t-overline); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--r-pil);
  padding:1px var(--sp-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* meta-regel: hairline erboven, stand·datum links, koppel-stand rechts */
.c-gesprekrij-meta{
  display:flex; align-items:center; gap:var(--sp-5);
  margin-top:var(--sp-4); border-top:1px solid #EFEBE3; padding-top:var(--sp-4);
  font-size:var(--t-pil);
}
.c-gesprekrij-metalinks{ color:var(--ink-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-gesprekrij-metarechts{ margin-left:auto; white-space:nowrap; color:var(--petrol-deep); font-weight:var(--gew-vet); }
.c-gesprekrij-metarechts.is-leeg{ color:var(--ink-soft); font-weight:var(--gew-normaal); }

/* ═══════════ RONDE 27 — ADOPTIECURVE (frames 27a/27b/27c) ═══════════ */
/* De lens-tabs (Overzicht | Adoptie), zelfde vorm als de meetstrook-popup. */
.c-lens-tabs{ display:flex; gap:var(--sp-4); border-bottom:1px solid var(--line); margin-bottom:var(--sp-6); }
.c-lens-tab{
  font-family:var(--font-ui); font-size:var(--t-body); font-weight:var(--gew-vet);
  color:var(--ink-soft); background:none; border:0; border-bottom:2px solid transparent;
  padding:var(--sp-3) var(--sp-2); margin-bottom:-1px; cursor:pointer;
}
.c-lens-tab.is-actief{ color:var(--petrol-deep); border-bottom-color:var(--petrol); }

/* De bewijsregel + het werkbord. */
.ad-bewijs{ font-size:var(--t-klein); color:var(--ink-soft); margin-bottom:var(--sp-5); }
.ad-board{ transition:opacity .2s; }
.ad-board.is-gedempt{ opacity:.4; }

.ad-canvas{ position:relative; width:100%; }
.ad-svg{ display:block; width:100%; height:auto; }
.ad-spook{ stroke:#C9C2B4; stroke-width:1.4; stroke-dasharray:3 3; }
.ad-divider{ stroke:var(--line); stroke-width:1; }
.ad-kloof{ fill:rgba(200,121,65,.12); stroke:var(--terra); stroke-width:1; stroke-dasharray:2 2; }
.ad-zone{ fill:transparent; cursor:pointer; }
.ad-zone:hover{ fill:rgba(18,113,108,.05); }
.ad-zone:focus-visible{ outline:2px solid var(--petrol); outline-offset:-2px; }
.ad-stip{ cursor:pointer; }
.ad-stip[data-recent="1"]{ fill:#12716C; }
.ad-stip[data-recent="0"]{ fill:#7FC4BE; }
.ad-kloof-label{
  position:absolute; top:2px; transform:translateX(-50%); white-space:nowrap;
  font-size:var(--t-pil); color:var(--terra-tekst); font-weight:var(--gew-vet);
}

/* De labelrij onder de curve: vijf segmenten. */
.ad-labels{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-2); margin-top:var(--sp-4); }
.ad-label{ text-align:center; display:flex; flex-direction:column; gap:1px; }
.ad-label-naam{ font-size:var(--t-pil); color:var(--ink); line-height:1.2; }
.ad-label-pct{ font-size:var(--t-pil); color:var(--ink-zacht,#8A857D); }
.ad-label-tel{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); }
.ad-label-tel.is-leeg{ color:var(--ink-zacht,#8A857D); font-weight:var(--gew-normaal); }
.ad-label-stil{ font-size:var(--t-pil); color:var(--terra-tekst); }

/* De pool "nog niet gehoord": gestreepte zand-strook. */
.ad-pool{ margin-top:var(--sp-6); padding:var(--sp-5) var(--sp-6); background:var(--cream2);
  border:1px dashed var(--line-sterk,#D8CFC2); border-radius:var(--r-m); }
.ad-pool-kop{ font-size:var(--t-pil); font-weight:var(--gew-vet); text-transform:uppercase;
  letter-spacing:.02em; color:var(--ink-soft); }
.ad-pool-tel{ font-size:var(--t-body); color:var(--ink); margin-top:2px; }
.ad-pool-uitklaar{ font-size:var(--t-klein); color:var(--ink-soft); margin:var(--sp-3) 0 0; line-height:1.45; }

.ad-demping{ display:block; width:100%; text-align:left; margin-bottom:var(--sp-5);
  padding:var(--sp-4) var(--sp-5); background:var(--vul-amber-zacht); border:0; border-left:2px solid var(--geel);
  border-radius:var(--r-s); color:var(--geel-tekst); font-family:var(--font-ui); font-size:var(--t-klein); cursor:pointer; }

/* De bijdragende-inzichten-lijst. */
/* §AC b — de "hoe deze verdeling tot stand kwam ▸"-regel onder de curve + de
   per-segment kopjes in de gecombineerde bijdragende-lijst. */
.ad-herkomst{ align-self:flex-start; margin-top:var(--sp-3); font:inherit; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; padding:0; cursor:pointer; }
.ad-herkomst:hover{ text-decoration:underline; }
.ad-bijdr-segkop{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--ink-soft); margin:var(--sp-5) 0 var(--sp-3); }
.ad-bijdr-segkop:first-child{ margin-top:0; }
.ad-bijdr-lijst{ display:flex; flex-direction:column; gap:var(--sp-3); }
.ad-bijdr-rij{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3);
  text-align:left; background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-s);
  padding:var(--sp-4) var(--sp-5); cursor:pointer; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); }
.ad-bijdr-rij:hover{ border-color:var(--petrol-light); }
.ad-bijdr-pijl{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.ad-bijdr-leeg{ font-size:var(--t-klein); color:var(--ink-soft); }

/* De segmentkaart. */
.ad-seg-duiding{ font-size:var(--t-body); color:var(--ink); margin:0 0 var(--sp-5); line-height:1.5; }
/* 27b — lege segmentkaart: eyebrow (Fraunces-uppercase) + headline + intro */
.ad-seg-leeg{ margin:0 0 var(--sp-6); }
.ad-seg-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); margin-bottom:6px; }
.ad-seg-leeg-kop{ font-family:Fraunces,Georgia,serif; font-weight:600; font-size:19px; color:var(--petrol-dark); margin:0 0 6px; line-height:1.2; }
.ad-seg-leeg-intro{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; margin:0; }
.ad-seg-kop{ font-size:var(--t-pil); font-weight:var(--gew-vet); text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink-soft); margin-bottom:var(--sp-3); }
.ad-seg-vragen, .ad-seg-watpast{ margin-top:var(--sp-5); padding:var(--sp-5) var(--sp-6);
  background:var(--cream2); border-radius:var(--r-m); }
.ad-seg-vraag{ font-size:var(--t-klein); color:var(--ink); margin:0 0 var(--sp-3); line-height:1.45; }
.ad-seg-vraag:last-child{ margin-bottom:0; }
.ad-seg-watpast-tekst{ font-size:var(--t-body); color:var(--ink); margin:0; line-height:1.5; }
.ad-seg-voet{ font-size:var(--t-pil); color:var(--ink-soft); margin:var(--sp-6) 0 0; line-height:1.45; }

/* Dashboard-mini-curve op de dekking-rij (stuk 5). */
.wwl-dek-rij.is-adoptie{ align-items:center; }
.wwl-dek-curve{ display:flex; align-items:center; gap:var(--sp-3); background:none; border:0; padding:0;
  margin-left:auto; cursor:pointer; }
.wwl-mini{ display:inline-flex; align-items:center; gap:6px; width:auto; }
.wwl-mini-tel{ display:inline-flex; align-items:baseline; gap:2px; font-size:var(--t-klein); font-weight:var(--gew-half); color:var(--ink); white-space:nowrap; }
.wwl-mini-pijl{ color:#0E4F4B; font-weight:var(--gew-vet); }
.wwl-mini.is-gedempt{ opacity:.4; }
.wwl-mini-svg{ display:block; width:120px; height:28px; }
.wwl-dek-gedempt{ font-size:var(--t-pil); color:var(--geel-tekst); }

/* §11 — twee gelabelde delen + het "Aan tafel"-blok met de stem als kandidaat */
.gk-deelkop{ font-size:var(--t-pil); font-weight:var(--gew-vet); text-transform:uppercase; letter-spacing:.06em; color:var(--petrol-deep); margin:var(--sp-6) 0 var(--sp-3); }
.gk-tafel{ background:#F2EEE7; border-radius:var(--r-m); padding:var(--sp-6) var(--sp-7); display:flex; flex-direction:column; gap:var(--sp-4); }
.gk-tafel-vert{ font-size:var(--t-klein); color:var(--petrol-deep); }
.gk-stemrij{ display:flex; flex-direction:column; gap:6px; padding-bottom:var(--sp-4); border-bottom:1px solid rgba(0,0,0,.06); }
.gk-stemrij:last-of-type{ border-bottom:0; }
.gk-stemrij-kop{ display:flex; align-items:center; gap:8px; }
.gk-stemrij-kop > *:first-child{ flex:1; min-width:0; }
.gk-stemrij-toetsen{ display:flex; flex-wrap:wrap; gap:12px; }
.gk-stem-voeg{ align-self:flex-start; border:1px solid var(--petrol); background:var(--wit); color:var(--petrol-deep); font-size:var(--t-klein); border-radius:999px; padding:4px 12px; cursor:pointer; }
.gk-stem-voeg:hover{ background:var(--cream2); }
.gk-stem-plus{ align-self:flex-start; border:1px dashed #B9B4AA; background:transparent; color:var(--ink-soft); font-size:var(--t-pil); border-radius:999px; padding:2px 10px; cursor:pointer; }
.gk-stem-plus:hover{ color:var(--ink); border-color:var(--ink-soft); }
.gk-tafel-hint{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.45; margin:2px 0 0; }
.c-map-stembekend{ flex:0 0 auto; font-size:var(--t-pil); font-weight:var(--gew-half); color:var(--petrol-deep); }
.c-dg-suggestie-naam .c-dg-suggestie-stip{ margin-right:2px; }
/* Ronde 26-review — de geloofwaardige-stem naam (eigen veld) + opbouw-slotkop */
.gk-stem-naam{ display:flex; flex-direction:column; gap:2px; margin-bottom:var(--sp-4); }
.gk-stem-naamlabel{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-opbouw-slotkop{ margin-top:var(--sp-6); margin-bottom:var(--sp-3); font-size:var(--t-pil);
  font-weight:var(--gew-vet); text-transform:uppercase; letter-spacing:.02em; color:var(--ink-soft); }
/* Ronde 27 — de groepsgrootte-invoer op de stakeholdermap */
.gk-grootte-in{ width:100%; }

/* Ronde 27-review — FAB-verwijzing onderaan de weerstand-kaart */
.bs-sig-fab{ display:block; width:100%; text-align:left; margin-top:var(--sp-4); padding:var(--sp-3) 0 0;
  border:0; border-top:1px solid var(--line); background:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--petrol-deep); }
.bs-sig-fab:hover{ text-decoration:underline; }
.bs-sig-item.bs-sig-weerstand{ cursor:pointer; }

/* Ronde 28 §1 — geweigerd importbestand (origineel/werkkopie) + shell-knoprij */
.c-import-rij.is-geweigerd{ align-items:flex-start; }
.c-import-geweigerd{ display:flex; flex-direction:column; gap:2px; }
.c-import-geweigerd-reden{ font-size:var(--t-pil); color:var(--geel-tekst); line-height:1.4; }
.c-agentshell-prive-knoppen{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }

/* Ronde 28 §7 — RAG-statusstip per segment + de anonieme kopregel */
.ad-kopregel{ font-size:var(--t-pil); color:var(--ink-soft); margin-bottom:var(--sp-4); }
.ad-rag{ display:block; width:8px; height:8px; border-radius:50%; margin:0 auto 2px; background:var(--line); }
.ad-rag[data-rag="groen"]{ background:#2E7D57; }
.ad-rag[data-rag="amber"]{ background:var(--geel); }
.ad-rag[data-rag="rood"]{ background:var(--rood,#C0563A); }
.ad-rag[data-rag="grijs"]{ background:var(--line-sterk,#D8CFC2); }

/* ═══════════════ Ronde 28 — de missie als werkplaats (§2–§8) ═══════════════ */

/* ── §3 opdrachtkaart (vaste kop-inhoud) ── */
.c-opdracht{ margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.c-opdracht-regel{ display:flex; gap:var(--sp-4); font-size:var(--t-klein); line-height:var(--lh-body); }
.c-opdracht-label{ flex:0 0 auto; min-width:88px; color:var(--ink-soft); font-weight:var(--gew-vet); }
.c-opdracht-waarde{ color:var(--ink); }
.c-opdracht-regel.is-geslaagd .c-opdracht-waarde{ color:var(--petrol-deep); }
.c-opdracht-regel.is-aanname .c-opdracht-waarde{ font-style:italic; }

/* ── §4 aanpak-kiezer ── */
.ak-kiezer{ margin-top:12px; background:var(--cream2); border-radius:var(--r-m); padding:11px var(--sp-6); }
.ak-kiezer[open] > .ak-kiezer-kop, .ak-kiezer.is-open > .ak-kiezer-kop{ margin-bottom:8px; }
.ak-kiezer-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; list-style:none; }
.ak-kiezer-kop::-webkit-details-marker{ display:none; }
details.ak-kiezer > summary.ak-kiezer-kop::after{ content:" \0025B8"; color:var(--ink-soft); }
details.ak-kiezer[open] > summary.ak-kiezer-kop::after{ content:" \0025BE"; }
.ak-kiezer-body{ display:flex; flex-direction:column; gap:10px; }
.ak-kiezer-sub{ font-size:12px; color:var(--ink-soft); line-height:1.5; margin:-2px 0 2px; }
.ak-doel{ font-size:var(--t-klein); color:var(--ink); background:var(--wit); border-radius:var(--r-s); padding:8px 10px; border-left:3px solid var(--petrol-light); }
.ak-doel[data-status="gehaald"]{ border-left-color:var(--groen); }
.ak-doel[data-status="krap"]{ border-left-color:var(--geel); }
.ak-vorm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ak-vorm-chip{ font-size:var(--t-pil); padding:4px 10px; border-radius:var(--r-pil); border:1px solid var(--line-sterk); background:var(--wit); color:var(--ink-soft); cursor:pointer; }
.ak-vorm-chip.is-aan{ background:var(--vul-petrol); border-color:var(--petrol); color:var(--petrol-deep); font-weight:var(--gew-vet); }
.ak-leidraad{ font-size:var(--t-klein); }
.ak-leidraad summary{ cursor:pointer; color:var(--petrol-deep); list-style:none; }
.ak-leidraad summary::-webkit-details-marker{ display:none; }
.ak-leidraad-stappen{ margin:6px 0 0; padding-left:20px; color:var(--ink); line-height:var(--lh-body); }
.ak-leidraad-stappen li{ margin-bottom:3px; }
.ak-afspraak{ display:flex; align-items:center; gap:8px; }
.ak-afspraak-label{ font-size:var(--t-klein); color:var(--ink-soft); font-weight:var(--gew-vet); flex:0 0 auto; }
.ak-afspraak .c-veldvak-invoer{ flex:1; }

/* ── §5 voortgangsstrook ── */
.c-voortgang{ margin-top:11px; display:flex; flex-direction:column; gap:6px; }
.c-voortgang-regel{ font-size:var(--t-klein); color:var(--ink); font-weight:var(--gew-vet); }
.c-voortgang-blokjes{ display:flex; gap:3px; flex-wrap:wrap; }
.c-voortgang-blok{ width:14px; height:8px; border-radius:2px; background:var(--line); }
.c-voortgang-blok.is-vol{ background:var(--groen); }
/* 28e — subgroep-noot: onder de voortgang, volle breedte, amber op transparant */
.c-voortgang-subgroep{ display:block; width:100%; margin-top:6px; font-size:var(--t-pil); color:var(--geel-tekst); background:transparent; line-height:1.45; }

/* ── §3 accordeon-secties ── */
.c-modus-secties{ margin-top:12px; border-top:1px solid var(--cream2); }
.c-modus-sectie{ border-bottom:1px solid var(--cream2); }
.c-modus-sectie-kop{ display:flex; align-items:center; gap:8px; padding:10px 2px; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; list-style:none; }
.c-modus-sectie-kop::-webkit-details-marker{ display:none; }
.c-modus-sectie-kop::after{ content:"\0025B8"; margin-left:auto; color:var(--ink-soft); font-size:var(--t-pil); }
.c-modus-sectie[open] > .c-modus-sectie-kop::after{ content:"\0025BE"; }
.c-sectie-badge{ font-size:var(--t-pil); background:var(--cream2); color:var(--ink-soft); border-radius:var(--r-pil); padding:1px 7px; }
.c-modus-sectie-body{ padding:2px 2px 12px; }
.c-sectie-leeg{ font-size:var(--t-klein); color:var(--ink-soft); margin:8px 0 0; }
.c-gesprek-lijst{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.c-gesprek-rij{ font-size:var(--t-klein); color:var(--ink); padding:5px 8px; background:var(--cream2); border-radius:var(--r-s); }

/* ── §6 werkbord (28a) ── */
.mw-bord{ margin-top:6px; }
.mw-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); margin-bottom:6px; }
.mw-privacy{ font-size:var(--t-pil); color:var(--terra-tekst); background:var(--vul-terra-zacht); border-radius:var(--r-s); padding:6px 9px; letter-spacing:.02em; margin-bottom:9px; }
/* Fable-ruling 4: missie-brede aanpak/model (rechts bovenaan) + één resultaatveld */
.mw-model-rij{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:9px; }
.mw-model-lab{ font-size:11px; font-weight:var(--gew-vet); color:var(--ink-soft); }
.mw-model-in{ font:inherit; font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-s); padding:5px 9px; background:var(--wit); max-width:180px; }
.mw-missieres{ margin-top:12px; display:flex; flex-direction:column; gap:4px; }
.mw-missieres-in{ width:100%; resize:vertical; }
/* ⑥b werkbord-brug: de voorgestelde stem-strook boven de kolommen. */
.mw-stemstrook{ margin-bottom:10px; padding:8px 10px; background:#F2EEE7; border-radius:var(--r-m); }
.mw-stemstrook-kop{ font-size:10px; text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); margin-bottom:6px; }
.mw-stemstrook-rij{ display:flex; flex-wrap:wrap; gap:6px; }
.mw-stemchip{ font-size:var(--t-pil); color:var(--petrol-deep); background:rgba(18,113,108,.08); border:1px dashed #7FC4BE; border-radius:var(--r-pil); padding:2px 10px; cursor:pointer; opacity:.55; }
.mw-stemchip:hover{ opacity:.85; }
.mw-stemchip.is-geplaatst{ opacity:1; background:rgba(18,113,108,.16); border-style:solid; cursor:default; }
.mw-stemstrook-hint{ font-size:10px; color:var(--ink-soft); margin:6px 0 0; }
.mw-chip-stem{ border:none; background:none; cursor:pointer; color:var(--petrol-deep); font-size:11px; padding:0 1px; line-height:1; }
.mw-chip-stem:hover{ color:var(--petrol); }
/* Vijf gelijke kolommen die op gedeelde rij-tracks uitlijnen (subgrid): de
   chips-zone groeit overal mee met de hoogste, zodat naam-veld, trede en behoefte
   in elke kolom op dezelfde hoogte staan — ongeacht hoeveel namen erin staan. */
/* reliëf-briefing §3 — kolommen = witte kaarten op het beige bordvlak. Op gedeelde
   rij-tracks (subgrid) uitgelijnd; align-items:start houdt de pills op natuurlijke
   hoogte (rekken ze niet uit tot een cirkel in een korte kolom). */
.mw-kolommen{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(5,auto);
  gap:8px; background:var(--cream2); padding:10px; border-radius:var(--r-m); }
.mw-kol{ display:grid; grid-template-rows:subgrid; grid-row:1/span 5; row-gap:6px; align-items:start;
  background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:9px 10px; }
/* kolom mét namen/kleur springt eruit: volle opacity + petrol kop. */
.mw-kol:not(.is-leeg) .mw-kol-naam{ color:var(--petrol); }
/* lege kolom gedempt + behoefte-veld verborgen (rij-track blijft voor de uitlijning). */
.mw-kol.is-leeg{ opacity:.75; }
.mw-kol.is-leeg .mw-behoefte{ visibility:hidden; }
.mw-kol.is-droptarget{ outline:2px dashed var(--petrol); outline-offset:-2px; background:var(--vul-mint,#e7f1ee); opacity:1; }
/* naamchips: petrol-rand op wit (huisstijl-chip), niet mint. */
.mw-chip{ background:#fff; border:1px solid var(--petrol); color:var(--petrol-deep); }
.mw-chip[draggable="true"]{ cursor:grab; }
.mw-chip.is-sleep{ opacity:.4; }
.mw-behoefte{ min-height:64px; }
/* §V synthese-vraag onder de kolommen: de groep-synthese die de agent maakt na
   het kleuren van de subgroepen (voedt de communicatie-readiness bij reconciliatie). */
.mw-synth{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.mw-synth-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); }
.mw-synth-uitleg{ font-size:var(--t-meta); color:var(--ink-soft); line-height:1.45; margin:2px 0 8px; }
/* §W — het altijd-zichtbare opvolgdatum-veld op groepsniveau. */
.mw-opvolg{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex;
  align-items:center; gap:10px; flex-wrap:wrap; }
.mw-opvolg-lab{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); flex-basis:100%; }
.mw-opvolg-datum{ font-family:inherit; font-size:var(--t-pil); border:1px solid var(--line);
  border-radius:var(--r-s); padding:5px 7px; }
.mw-opvolg-geen{ display:inline-flex; align-items:center; gap:6px; font-size:var(--t-klein); color:var(--ink-soft); }
/* onbewaard-signaal bij de Save-knop (amber; hoofd-app-teller). */
.c-modus-onbewaard{ font-size:11.5px; font-weight:var(--gew-vet); color:var(--geel); line-height:1.4; }
.c-modus-bewaar.is-onbewaard, .c-agentshell-prive-bewaar.is-onbewaard{ box-shadow:0 0 0 3px rgba(217,166,60,.35); }
/* Op desktop (≥700px) staat het zijmenu met de Save-knop + signaal er al; de
   werkvlak-voet toont dan enkel de privacyregel. Op mobiel (≤699px) is het
   zijmenu weg, dus daar draagt de voet de knop + het signaal (49b-CTA). */
@media (min-width:700px){
  .c-agentshell-prive .c-agentshell-prive-bewaar,
  .c-agentshell-prive .c-bestandtip-knop,
  .c-agentshell-prive .c-modus-onbewaard{ display:none; }
}
/* Op mobiel is het zijmenu (met de nav én de Save-knop) verborgen; de werkvlak-voet
   draagt dan de enige Save-knop. Die stond onderaan een lange scroll, waardoor hij
   "verdween" tot je helemaal naar beneden schoof. We pinnen de voet daarom vast aan
   de onderrand van het scherm, zodat Bewaren altijd binnen bereik blijft. */
@media (max-width:699px){
  .c-agentshell-prive{ position:sticky; bottom:0; z-index:6;
    background:var(--cream2); box-shadow:0 -3px 12px rgba(10,57,54,.1); }
}
/* De tip "Wat kun je met dit bestand?" bij de Save-knop: inklapbaar, stil. Staat
   in de zijmenu-voet (desktop) en in de werkvlak-voet (mobiel; op desktop verborgen
   via de regel hierboven, zodat hij niet dubbel verschijnt). */
/* R64-fix — "Wat kun je met dit bestand?" is nu een link die een popup opent
   (geen inline-accordeon meer → geen layout-sprong). ▸ = opent iets. */
.c-bestandtip-knop{ margin-top:10px; background:none; border:0; padding:0; cursor:pointer; font:inherit;
  font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink-soft); text-align:left;
  display:inline-flex; align-items:center; gap:6px; }
.c-bestandtip-knop::after{ content:'▸'; font-size:10px; }
.c-modus-voet .c-bestandtip-knop{ color:var(--petrol-light); }
/* de lijst leeft nu in het popup-venster (cream); basisstijl volstaat. */
.c-bestandtip-lijst{ list-style:none; margin:0; padding:0; }
.c-bestandtip-lijst li{ margin:7px 0; line-height:1.5; color:var(--ink); }
.c-bestandtip-lijst a{ color:var(--petrol); font-weight:var(--gew-vet); }
/* Duiding-blok ("Waarom dit telt" / "Zo pak je het aan") in de shell — zelfde
   idioom als Het kompas, maar zelfstandig getoggeld (geen globale binder nodig). */
.c-shell-duiding{ margin:10px 0 4px; }
.c-shell-duiding-rij{ display:flex; flex-wrap:wrap; gap:14px; }
.c-shell-duiding .duiding-label{ font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--petrol); background:none; border:0; padding:0; cursor:pointer; display:inline-flex;
  align-items:center; gap:5px; }
.c-shell-duiding .duiding-label .chev{ font-size:10px; transition:transform .15s; }
.c-shell-duiding .duiding-label.is-open .chev{ transform:rotate(180deg); }
.c-duiding-p{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; margin:8px 0 0; }
/* FB-U8 — een alinea binnen een rijk duiding-paneel (naast bv. bullets of de mw-privacy-noot) */
.c-duiding-tekst{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; margin:0 0 8px; }
/* reliëf-briefing §2 — geen blauw selectievlak op de eyebrow: selectie in de
   petrol kop krijgt een petrol-light tint i.p.v. het browser-blauw. */
.c-opdrachtkop ::selection{ background:rgba(127,196,190,.35); color:#fff; }
.c-opdrachtkop-eyebrow{ background:none; }
/* Carrousel op elke smalle breedte (viewport-gedreven, ook een verkleind
   desktop-browservenster): de vijf kolommen worden een scroll-snap-carrousel in
   plaats van vijf naast elkaar. Subgrid vervalt (dat vraagt vijf tracks); elke
   kolom staat op ~82% breedte en snapt links vast, met een randje van de volgende
   in beeld als sleep-uitnodiging. Alleen .mw-kolommen scrollt — de synthese en
   het opvolgveld eronder blijven op volle breedte staan. */
@media(max-width:820px){
  .mw-kolommen{ display:flex; grid-template-columns:none; grid-template-rows:none;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:10px; min-width:0; scroll-padding-left:10px; }
  .mw-kol{ display:flex; flex-direction:column; grid-row:auto; grid-template-rows:none;
    flex:0 0 82%; scroll-snap-align:start; }
}
.mw-kol-kop{ display:flex; align-items:baseline; gap:6px; }
.mw-kol-naam{ font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--ink); }
.mw-kol-tel{ margin-left:auto; font-size:var(--t-pil); color:var(--ink-soft); }
.mw-chips{ display:flex; flex-wrap:wrap; gap:4px; }
/* frame 28a: naam-chips in petrol/mint i.p.v. wit-grijs. */
.mw-chip{ display:inline-flex; align-items:center; gap:4px; font-size:var(--t-pil); color:var(--petrol-deep); background:rgba(18,113,108,.1); border:1px solid #7FC4BE; border-radius:var(--r-pil); padding:2px 4px 2px 8px; }
.mw-chip-x{ border:none; background:none; cursor:pointer; color:var(--ink-soft); font-size:10px; padding:0 2px; }
.mw-toe-knop{ font-size:var(--t-pil); border:1px dashed var(--line-sterk); background:none; border-radius:var(--r-pil); padding:2px 8px; color:var(--ink-soft); cursor:pointer; }
.mw-toe-input{ font-size:var(--t-pil); border:1px solid var(--petrol); border-radius:var(--r-pil); padding:2px 8px; width:80px; }
.mw-veld-label{ font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:var(--ls-label); }
.mw-veld{ font-size:var(--t-pil); border:1px solid var(--line); border-radius:var(--r-s); padding:5px 7px; width:100%; font-family:inherit; box-sizing:border-box; }
textarea.mw-veld{ resize:vertical; }

/* ── §6 afrondkaart (28f) ── */
.c-afrond{ margin-top:14px; background:var(--vul-mint-zacht); border:1px solid var(--mint-rand); border-radius:var(--r-l); padding:14px var(--sp-8); display:flex; flex-direction:column; gap:8px; }
.c-afrond-kop{ font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--petrol-deep); }
.c-afrond-aanleiding{ font-size:var(--t-klein); color:var(--ink); margin:0; }
.c-afrond-veld-label{ font-size:var(--t-klein); color:var(--ink-soft); font-weight:var(--gew-vet); }
.c-afrond-veld{ font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-s); padding:7px 9px; font-family:inherit; resize:vertical; }
/* frame 28f: gaat-mee groen, blijft-hier terracotta (kleur-gecodeerd). */
.c-afrond-mee, .c-afrond-blijf{ font-size:var(--t-pil); margin:0; font-weight:var(--gew-vet); }
.c-afrond-mee{ color:var(--groen-tekst,#2C8A6B); }
.c-afrond-blijf{ color:var(--terra-tekst,#B4551F); }
.c-afrond-terra{ font-size:var(--t-pil); color:var(--terra-tekst); margin:2px 0 0; }
.c-afrond-knoppen{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.c-afrond-later{ border:none; background:none; color:var(--ink-soft); font-size:var(--t-klein); cursor:pointer; }
.c-afrond-later:hover{ color:var(--rood); }

/* ── §3 doorstart-kaart ── */
.c-doorstart{ margin:12px 0; background:var(--vul-mint-zacht); border:1px solid var(--mint-rand); border-radius:var(--r-l); padding:12px var(--sp-8); }
.c-doorstart-knop{ border:none; background:none; color:var(--petrol-deep); font-size:var(--t-klein); font-weight:var(--gew-vet); cursor:pointer; text-align:left; }
.c-doorstart-tekst{ margin:0; font-size:var(--t-klein); color:var(--ink); }

/* ── §3/§5b zijmenu missie-modus (petrol-schil, lichte tekst) ── */
.c-modus-kop{ padding:0 var(--sp-6) 10px; border-bottom:1px solid var(--op-lijn); margin-bottom:8px; }
.c-modus-kop-titel{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--op-vol); }
.c-modus-kop-voor{ font-size:var(--t-pil); color:var(--op-meta); margin-top:2px; }
.c-modus-nav{ display:flex; flex-direction:column; gap:2px; padding:0 var(--sp-4); }
.c-modus-rij{ display:flex; align-items:center; gap:8px; padding:9px var(--sp-4); border:none; border-left:3px solid transparent; background:none; text-align:left; font-size:var(--t-nav); color:var(--op-rust); border-radius:var(--r-s); cursor:pointer; }
.c-modus-rij:hover{ background:var(--op-vlak-zacht); }
/* 28h — actieve nav-rij: vlak + terracotta linkerrand (géén onderstreping) */
.c-modus-rij.is-actief{ background:var(--op-vlak); border-left-color:var(--terra); color:var(--op-vol); font-weight:var(--gew-vet); }
/* frame 28h: gesprekken-badge in terracotta met witte tekst. */
.c-modus-rij-badge{ margin-left:auto; font-size:var(--t-pil); background:var(--terra); color:#fff; border-radius:var(--r-pil); padding:1px 7px; }
.c-modus-voet{ margin-top:auto; padding:14px var(--sp-6) 0; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--op-lijn); }
.c-modus-retour{ width:100%; }
.c-modus-link{ border:none; background:none; text-align:left; color:var(--op-tekst); font-size:var(--t-klein); cursor:pointer; padding:0; }
.c-modus-link:hover{ text-decoration:underline; }
.c-modus-opslag{ font-size:var(--t-pil); color:var(--op-meta); }
/* §5b punt 7 — de voet-footer: stille "Bewaar je werkkopie ↓"-regel, daaronder de
   privacy-zin met de taalkiezer op één regel ("… · [taal]"). */
.c-modus-footer{ display:flex; flex-direction:column; gap:6px; margin-top:2px; padding-top:10px; border-top:1px solid var(--op-lijn); }
.c-modus-footer-privacy{ font-size:11.5px; color:var(--op-meta); line-height:1.4; margin:0; }
.c-modus-footer-rij{ display:flex; align-items:center; gap:6px; }
.c-modus-footer-sep{ font-size:11.5px; color:var(--op-meta); }
.c-modus-footer-bewaar{ border:none; background:none; padding:0; text-align:left; color:var(--op-tekst); font-size:var(--t-klein); cursor:pointer; }
.c-modus-footer-bewaar:hover{ text-decoration:underline; }
.c-modus-footer-rij .c-taalkiezer{ margin-left:auto; }

/* ── §7b merge-samenvatting ── */
.c-merge-sam{ background:var(--cream2); border-radius:var(--r-m); padding:12px var(--sp-6); margin-bottom:12px; }
.c-merge-sam-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); margin-bottom:8px; }
.c-merge-sam-kolom{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.c-merge-sam-titel{ font-size:var(--t-pil); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); margin-bottom:4px; }
.c-merge-regel{ font-size:var(--t-klein); line-height:var(--lh-body); padding-left:14px; position:relative; }
.c-merge-regel.is-mee::before{ content:"\002193"; position:absolute; left:0; color:var(--groen); }
.c-merge-regel.is-blijf::before{ content:"\0000B7"; position:absolute; left:2px; color:var(--terra); }

/* ── §7c RAG-strook op de dashboard-mini-curve ── */
.wwl-dek-rag{ display:flex; align-items:center; gap:10px; grid-column:1 / -1; margin-top:2px; padding-left:2px; }
.wwl-dek-rag-strook{ display:flex; gap:8px; align-items:flex-start; }
.ad-rag.is-knop{ width:9px; height:9px; margin:0; border:none; cursor:pointer; padding:0; }
/* Fable-ruling 9: per-segment stip + verplicht aantal eronder ("2 2 — — —") */
.ad-rag-kolom{ display:flex; flex-direction:column; align-items:center; gap:2px; border:none; background:none; cursor:pointer; padding:0; }
.ad-rag-kolom .ad-rag{ width:9px; height:9px; margin:0; }
.ad-rag-tel{ font-size:9px; line-height:1; color:var(--ink-soft); font-weight:var(--gew-vet); }
.wwl-dek-rag-kop{ font-size:var(--t-pil); color:var(--ink-soft); }

/* ── §8 werklast-regel (team-funnel) ── */
.c-missies-werklast{ display:block; width:100%; margin-top:14px; text-align:left; border:none; background:none; color:var(--petrol-deep); font-size:var(--t-klein); line-height:var(--lh-body); cursor:pointer; padding:8px 0; }
.c-missies-werklast:hover{ text-decoration:underline; }

/* ── §2 welkom-uitbreidingen ── */
.wk-weg-sub{ display:block; font-size:var(--t-pil); color:var(--ink-soft); margin-top:3px; line-height:1.4; }
.wk-vb-missielink{ display:block; margin-top:10px; border:none; background:none; color:var(--petrol-deep); font-size:var(--t-klein); cursor:pointer; padding:2px 0; }
.wk-vb-missielink:hover{ text-decoration:underline; }

/* ── §a retour-leesvenster ── */
.c-retourvenster{ max-width:560px; margin:40px auto; padding:0 var(--sp-8); text-align:center; }
.c-retour-merk svg{ width:64px; height:auto; }
.c-retour-kop{ font-size:var(--t-kop-m); color:var(--petrol-deep); margin:14px 0 8px; }
.c-retour-regel{ font-size:var(--t-body); color:var(--ink); margin:0 0 20px; }
.c-retour-instructie{ font-size:var(--t-klein); color:var(--terra-tekst); background:var(--vul-terra-zacht); border-radius:var(--r-m); padding:14px 18px; line-height:var(--lh-body); }

/* ═══════════════ Ronde 29 — de rapport-export (29c) ═══════════════ */
.c-rapport-publieken{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.c-rapport-publiek{ text-align:left; border:1px solid var(--line-sterk); background:var(--wit); border-radius:var(--r-m); padding:12px var(--sp-6); cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.c-rapport-publiek.is-aan{ border-color:var(--petrol); background:var(--vul-petrol); }
.c-rapport-publiek-titel{ font-weight:var(--gew-vet); color:var(--ink); font-size:var(--t-body); }
.c-rapport-publiek.is-aan .c-rapport-publiek-titel{ color:var(--petrol-deep); }
.c-rapport-publiek-sub{ font-size:var(--t-klein); color:var(--ink-soft); }
/* 31b werkweergave: het rapport in preview (↗ + inline-koppen + invulhinten) */
.c-rapport-werk-kop{ margin-top:12px; font-size:var(--t-pil); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); }
.c-rapport-werk{ width:100%; height:420px; border:1px solid var(--line-zacht); border-radius:var(--r-m); margin-top:6px; background:var(--cream); }
/* 31e/31f preview-regie: peildatum + "vraag aan het publiek"-vinkjes */
.c-rapport-regie{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.c-rapport-regie-rij{ display:flex; align-items:center; gap:8px; font-size:var(--t-klein); }
.c-rapport-regie-lab{ color:var(--ink-soft); }
.c-rapport-regie-datum{ font-size:var(--t-klein); border:1px solid var(--line-sterk); border-radius:var(--r-s); padding:3px 6px; }
.c-rapport-regie-kop{ font-size:var(--t-pil); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); margin-top:6px; }
.c-rapport-regie-vink{ display:flex; align-items:center; gap:8px; font-size:var(--t-klein); color:var(--ink); }
.c-rapport-preview{ background:var(--cream2); border-radius:var(--r-m); padding:12px var(--sp-6); }
.c-rapport-preview-kop{ font-size:var(--t-pil); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--ink-soft); }
.c-rapport-preview-sub{ font-size:var(--t-klein); color:var(--petrol-deep); font-weight:var(--gew-vet); margin:2px 0 8px; }
.c-rapport-preview-lijst{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.c-rapport-preview-rij{ display:flex; align-items:center; gap:8px; font-size:var(--t-klein); }
.c-rapport-preview-rij.is-uit{ color:var(--ink-soft); opacity:.55; }
.c-rapport-preview-mark{ width:14px; text-align:center; color:var(--groen); font-weight:var(--gew-vet); }
.c-rapport-preview-rij.is-uit .c-rapport-preview-mark{ color:var(--ink-soft); }

/* ═══════════════ Ronde 30 — de designgroep als motor ═══════════════ */
/* 30a — de vaste dashboard-kaart */
.c-dg-kaart{ background:var(--wit); border:1px solid var(--line); border-left:3px solid var(--petrol); border-radius:var(--r-l); padding:14px var(--sp-8); margin:12px 0; display:flex; flex-direction:column; gap:7px; }
.c-dg-kop{ display:flex; align-items:baseline; gap:8px; }
/* ⑧ — kompas-stijl duiding op de designgroep-kaart */
.c-dg-waarom{ margin:2px 0; }
.c-dg-waarom-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; list-style:none; }
.c-dg-waarom-kop::-webkit-details-marker{ display:none; }
.c-dg-waarom > summary.c-dg-waarom-kop::after{ content:" \0025BE"; color:var(--ink-soft); }
.c-dg-waarom[open] > summary.c-dg-waarom-kop::after{ content:" \0025B4"; }
.c-dg-waarom-tekst{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; margin:6px 0 8px; }
.c-dg-praktijk{ display:block; background:var(--cream2); border-left:3px solid var(--mint); border-radius:var(--r-s); padding:8px 10px; }
.c-dg-praktijk-kop{ display:block; font-size:var(--t-pil); font-weight:var(--gew-vet); letter-spacing:.06em; text-transform:uppercase; color:var(--petrol-deep); margin-bottom:3px; }
.c-dg-praktijk-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:1.5; }
.c-dg-titel{ font-weight:var(--gew-vet); color:var(--petrol-deep); font-size:var(--t-body); }
.c-dg-meta{ font-size:var(--t-klein); color:var(--ink-soft); }
.c-dg-pijl{ margin-left:auto; border:none; background:none; color:var(--petrol-deep); font-size:var(--t-body); cursor:pointer; }
.c-dg-sessie{ font-size:var(--t-klein); color:var(--ink); }
.c-dg-klaar{ font-size:var(--t-klein); color:var(--terra-tekst); }
.c-dg-acties{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2px; }
.c-dg-link{ border:none; background:none; color:var(--petrol-deep); font-size:var(--t-klein); cursor:pointer; padding:0; text-align:left; }
.c-dg-link:hover{ text-decoration:underline; }
.c-dg-link.is-slot{ color:var(--ink-soft); }
.c-dg-inricht{ margin-top:2px; }
.c-dg-rapport-teller{ display:block; margin-top:8px; border:none; background:none; padding:0; text-align:left; cursor:pointer; font-size:var(--t-klein); color:var(--petrol); line-height:1.4; }
.c-dg-rapport-teller:hover{ text-decoration:underline; }
/* Ronde 33 §6 — de stille proef-strook op de designgroepkaart. */
.c-dg-proef{ margin-top:8px; padding:5px 10px; background:var(--vul-mint-zacht); border:1px solid var(--mint-rand); border-radius:var(--r-s); font-size:var(--t-klein); color:var(--petrol-deep); line-height:1.4; }

/* 32a — de sjabloon-startbanner op het dashboard + gedimde suggestie-rijen */
.c-sjabloon-banner{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  background:var(--cream2); border:1px solid var(--line); border-left:3px solid var(--mint);
  border-radius:var(--r-s); padding:10px 14px; margin-bottom:var(--sp-5);
}
.c-sjabloon-banner-tekst{ font-size:var(--t-klein); color:var(--ink-soft); flex:1; min-width:0; line-height:1.4; }
.c-sjabloon-banner-knop{
  flex:none; border:1px solid var(--mint); background:var(--wit); color:var(--petrol);
  border-radius:var(--r-pil); padding:5px 14px; font-family:var(--font-ui); font-size:var(--t-pil);
  font-weight:var(--gew-zwaar); cursor:pointer; white-space:nowrap;
}
.c-sjabloon-banner-knop:hover{ background:var(--cream); }
.mx-rij.is-sjabloon-suggestie,
.c-map-rij.is-sjabloon-suggestie{ opacity:.6; }
.mx-rij.is-sjabloon-suggestie input::placeholder,
.mx-rij.is-sjabloon-suggestie textarea::placeholder{ font-style:italic; }

/* 32b — de geleide tien minuten: volscherm-vragen over het dashboard */
#geleideflow{ position:fixed; inset:0; z-index:60; background:var(--cream); overflow-y:auto; }
#geleideflow[hidden]{ display:none; }
.c-gflow-inner{ max-width:640px; margin:0 auto; min-height:100%; display:flex; flex-direction:column; padding:24px 24px 40px; box-sizing:border-box; }
.c-gflow-kop{ display:flex; align-items:center; gap:16px; }
.c-gflow-prog{ display:flex; gap:6px; flex:1; }
.c-gflow-streep{ height:4px; flex:1; border-radius:2px; background:var(--line); }
.c-gflow-streep.is-vol{ background:var(--mint); }
.c-gflow-streep.is-nu{ background:var(--petrol); }
.c-gflow-later{ flex:none; border:none; background:none; color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--t-klein); cursor:pointer; padding:4px; }
.c-gflow-later:hover{ color:var(--ink); }
.c-gflow-overslaan{ flex:none; border:none; background:none; color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--t-klein); cursor:pointer; padding:4px; text-decoration:underline; text-underline-offset:2px; }
.c-gflow-overslaan:hover{ color:var(--ink); }
.c-gflow-eyebrow{ margin-top:48px; font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--mint); }
.c-gflow-vraag{ font-family:var(--font-display,Georgia,serif); font-weight:600; font-size:30px; line-height:1.15; color:var(--petrol-deep); margin:10px 0 20px; }
.c-gflow-body{ flex:1; display:flex; flex-direction:column; gap:12px; }
.c-gflow-hint{ font-size:var(--t-klein); color:var(--ink-soft); margin:0 0 4px; }
.c-gflow-veld{ width:100%; box-sizing:border-box; font-family:var(--font-ui); font-size:var(--t-body); padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--wit); color:var(--ink); }
.c-gflow-veld:focus{ outline:none; border-color:var(--mint); box-shadow:0 0 0 2px rgba(18,113,108,.18); }
textarea.c-gflow-veld{ resize:vertical; line-height:1.5; }
.c-gflow-keuzerij{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.c-gflow-keuze{ border:1px solid var(--mint); background:var(--wit); color:var(--petrol); border-radius:var(--r-pil); padding:8px 16px; font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-zwaar); cursor:pointer; }
.c-gflow-keuze:hover{ background:var(--cream2); }
.c-gflow-startknop{ align-self:flex-start; border:none; background:var(--terra); color:var(--wit); border-radius:var(--r-pil); padding:12px 26px; font-family:var(--font-ui); font-size:var(--t-body); font-weight:var(--gew-zwaar); cursor:pointer; margin-top:8px; }
.c-gflow-voet{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.c-gflow-terug{ border:none; background:none; color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--t-body); cursor:pointer; padding:6px; }
.c-gflow-terug:hover{ color:var(--ink); }
.c-gflow-volgende{ margin-left:auto; border:none; background:var(--petrol); color:var(--wit); border-radius:var(--r-pil); padding:11px 30px; font-family:var(--font-ui); font-size:var(--t-body); font-weight:var(--gew-zwaar); cursor:pointer; }
.c-gflow-volgende:hover{ background:var(--petrol-deep); }
/* B7 — de hervat-kaart op het dashboard bij een gepauzeerde flow */
.c-gflow-hervat{ background:var(--petrol); color:var(--cream); border-radius:var(--r-kaart); padding:16px 18px; margin-bottom:var(--sp-5); }
.c-gflow-hervat-label{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-overline); text-transform:uppercase; color:var(--mint-licht,#9FC2BD); }
.c-gflow-hervat-tekst{ font-size:var(--t-body); margin:4px 0 10px; }
.c-gflow-hervat-cta{ border:none; background:var(--terra); color:var(--wit); border-radius:var(--r-pil); padding:8px 20px; font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-zwaar); cursor:pointer; }

/* 32c — het startbeeld: preview + de ene ritme-vraag */
.c-startbeeld-preview{ width:100%; height:min(62vh,560px); border:1px solid var(--line); border-radius:var(--r-s); background:var(--wit); }
.c-startbeeld-ritme{ margin-top:16px; padding:14px 16px; background:var(--cream2); border-radius:var(--r-s); border-left:3px solid var(--mint); }
.c-startbeeld-ritme-vraag{ font-size:var(--t-body); color:var(--ink); margin-bottom:10px; }
.c-startbeeld-ritme-rij{ display:flex; gap:12px; align-items:center; }
.c-startbeeld-ritme-nee{ border:none; background:none; color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--t-klein); cursor:pointer; }
.c-startbeeld-ritme-nee:hover{ color:var(--ink); }
/* B10 — de dashboard-wegwijzer naar het startbeeld */
.c-startbeeld-wegwijzer{ display:block; width:100%; text-align:left; border:none; background:none; padding:0; margin:0 0 var(--sp-5); color:var(--petrol); font-family:var(--font-ui); font-size:var(--t-klein); cursor:pointer; }
.c-startbeeld-wegwijzer:hover{ text-decoration:underline; }
/* §Y/35d — het deelbare startbeeld als bannertje met vaste stijl (geen zwevende
   link): cream met terra-linksrand, een deel-tekst en een ✕ om weg te leggen. */
.c-startbeeld-banner{
  display:flex; align-items:center; gap:var(--sp-5);
  margin:var(--sp-5) 0;
  padding:8px var(--sp-7);
  background:var(--cream); border:1px solid var(--line);
  border-left:3px solid var(--terra); border-radius:var(--r-l);
}
.c-startbeeld-banner-tekst{
  flex:1; min-width:0; text-align:left;
  border:none; background:none; padding:0;
  color:var(--petrol-deep); font-family:var(--font-ui); font-size:var(--t-klein);
  font-weight:var(--gew-vet); cursor:pointer;
}
.c-startbeeld-banner-tekst:hover{ text-decoration:underline; }
.c-startbeeld-banner-x{
  flex:none; border:none; background:none; cursor:pointer;
  color:var(--ink-soft); font-size:var(--t-pil); line-height:1; padding:2px 4px;
}
.c-startbeeld-banner-x:hover{ color:var(--ink); }
/* §Y/35c — de reflectieregel iets compacter dan de waarom-regel eronder. */
.c-reflectie{ padding-top:7px; padding-bottom:7px; }
/* §6a — de merge-sprong-wegwijzer op het dashboard */
/* R43 (E2, story 2.4) — de merge-wegwijzer is nu een kaart met groene kantlijn
   (resultaat, geen handeling): een tekstregel, twee ↗-links, en een ✕. */
.c-merge-wegwijzer{
  position:relative; width:100%; box-sizing:border-box;
  margin:0 0 var(--sp-5); padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  background:var(--cream2, #f6f1e7); border:1px solid var(--line);
  border-left:4px solid var(--mint); border-radius:10px;
  font-family:var(--font-ui);
}
.c-merge-wegwijzer-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:1.4; padding-right:22px; }
.c-merge-wegwijzer-links{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-2); }
.c-merge-wegwijzer-link{ background:none; border:0; padding:0; cursor:pointer; color:var(--petrol-deep); font-size:var(--t-klein); font-weight:var(--gew-vet); }
.c-merge-wegwijzer-link:hover{ text-decoration:underline; }
.c-merge-wegwijzer-x{ position:absolute; top:6px; right:8px; background:none; border:0; cursor:pointer; color:var(--ink-soft); font-size:var(--t-klein); line-height:1; padding:2px; }
.c-merge-wegwijzer-x:hover{ color:var(--ink); }

/* R43 (E2, story 2.1) — de statusstrook: vier afgeleide cellen. */
.c-missie-strook{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-bottom:var(--sp-4); }
.c-missie-strookcel{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:var(--sp-3) var(--sp-4); min-width:0; }
.c-missie-strookcel.is-amber{ border-color:var(--amber, #C89A3A); }
.c-missie-strook-waarde{ font-family:var(--font-kop, var(--font-ui)); font-size:1.4rem; font-weight:var(--gew-zwaar); color:var(--ink); line-height:1.1; }
.c-missie-strookcel.is-amber .c-missie-strook-waarde{ color:var(--amber, #C89A3A); }
.c-missie-strook-label{ font-size:var(--t-meta); color:var(--ink-soft); margin-top:2px; }
.c-missie-strook-sub{ font-size:var(--t-meta); color:var(--ink-soft); margin-top:2px; }
/* R71 — de mini-voortgangsbalk (c-missie-strook-bar/-barvul) verviel met de
   "gehoord"-cel: geen tussentijdse opladingen om te tellen. */
@media (max-width:699px){ .c-missie-strook{ grid-template-columns:repeat(2,1fr); } }

/* R43 (E2, story 2.2) — de import-pill (petrol contour) + drag-over-staat. */
.c-missie-import-pill{ display:flex; align-items:center; gap:var(--sp-3); width:100%; box-sizing:border-box; text-align:left;
  margin-bottom:var(--sp-4); padding:var(--sp-3) var(--sp-4); cursor:pointer;
  background:none; border:1.5px dashed var(--petrol-deep); border-radius:10px; color:var(--petrol-deep); font-family:var(--font-ui); }
.c-missie-import-pill:hover{ background:var(--cream2, #f6f1e7); }
.c-missie-import-ic{ font-size:1.1rem; flex:none; }
.c-missie-import-tek{ display:flex; flex-direction:column; min-width:0; }
.c-missie-import-knop{ font-size:var(--t-klein); font-weight:var(--gew-vet); }
.c-missie-import-sleep{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-missies.is-sleepover{ outline:2px dashed var(--petrol-deep); outline-offset:4px; border-radius:12px; }
/* F10 — een missiebestand op de kaart zelf droppen: dezelfde stippelrand-hint. */
.c-missiekaart.is-sleepover{ outline:2px dashed var(--petrol-deep); outline-offset:3px; background:var(--petrol-zacht,rgba(18,113,108,.06)); }

/* R43 (E2, story 2.3) — kaartregel "x van y kopieën binnen" + gestreepte chip. */
.c-missiekaart-voortgang{ display:flex; align-items:center; gap:var(--sp-3); }
.c-missiekaart-kopieen{ margin-left:auto; font-size:var(--t-meta); color:var(--ink-soft); }
.c-missie-chip.is-noretour{ border:1px dashed var(--line); opacity:.75; }

/* R44 (E3) — progressive disclosure (nieuw) en solo-onthulling (bestaand). */
.c-missie-meer, .c-missie-verdeel{ margin-top:var(--sp-3); border-top:1px solid var(--line); padding-top:var(--sp-3); }
.c-missie-meer > summary, .c-missie-verdeel > summary{ cursor:pointer; list-style:none; color:var(--petrol-deep); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); padding:var(--sp-2) 0; }
.c-missie-meer > summary::-webkit-details-marker, .c-missie-verdeel > summary::-webkit-details-marker{ display:none; }
/* R44 (E3, story 3.2) — het solo-oppervlak: voortgang + één terracotta actie. */
.c-missie-solo{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.c-missie-solo-geslaagd{ font-size:var(--t-klein); color:var(--ink-soft); }
.c-missie-solo-leg{ align-self:flex-start; background:none; border:1.5px solid var(--terra); color:var(--terra); border-radius:8px; padding:var(--sp-2) var(--sp-4); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); cursor:pointer; }
.c-missie-solo-leg:hover{ background:var(--terra); color:#fff; }

/* Epic 6 — het reconciliatie-scherm: per as huidig → voorgesteld, per regel te
   beslissen. */
.c-reconcil-intro{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.4; margin:0 0 var(--sp-4); }
.c-reconcil-lijst{ display:flex; flex-direction:column; gap:var(--sp-3); }
.c-reconcil-rij{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:var(--sp-3) var(--sp-4); }
.c-reconcil-kop{ display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap; }
.c-reconcil-as{ font-size:var(--t-meta); text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.c-reconcil-plek{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); }
.c-reconcil-stand{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2); flex-wrap:wrap; }
.c-reconcil-stipwrap{ display:inline-flex; align-items:center; gap:6px; }
.c-reconcil-stip{ width:12px; height:12px; border-radius:50%; display:inline-block; background:var(--line); }
.c-reconcil-stip[data-k="groen"]{ background:var(--mint,#3E8E7E); }
.c-reconcil-stip[data-k="geel"]{ background:var(--amber,#C89A3A); }
.c-reconcil-stip[data-k="rood"]{ background:var(--terra,#B5502F); }
.c-reconcil-stip[data-k="neutraal"]{ background:var(--line); }
.c-reconcil-standlabel{ font-size:var(--t-meta); color:var(--ink); }
.c-reconcil-pijl{ color:var(--ink-soft); }
.c-reconcil-herkomst{ font-size:var(--t-meta); color:var(--ink-soft); margin-top:var(--sp-2); font-style:italic; }
.c-reconcil-keuze{ display:flex; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.c-reconcil-keuzeknop{ background:none; border:1px solid var(--line); border-radius:16px; padding:4px 12px; cursor:pointer; font-family:var(--font-ui); font-size:var(--t-meta); color:var(--ink-soft); }
.c-reconcil-keuzeknop.is-aan{ border-color:var(--petrol-deep); background:var(--petrol-deep); color:#fff; }
.c-reconcil-pas{ margin-top:var(--sp-2); }
.c-reconcil-select{ font-family:var(--font-ui); font-size:var(--t-klein); padding:4px 8px; border:1px solid var(--line); border-radius:6px; }
.c-reconcil-ganaar{ display:block; margin-top:var(--sp-2); background:none; border:0; padding:0; cursor:pointer; color:var(--petrol-deep); font-size:var(--t-meta); font-weight:var(--gew-vet); text-align:left; }
.c-reconcil-ganaar:hover{ text-decoration:underline; }
/* Reconciliatie-epic (Fase 1) — de FAB-koppelrij per item: maak onmiddellijk een
   actie, risico of gesprek uit wat de agent meegaf. */
.c-reconcil-koppel{ display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-2); border-top:1px dashed var(--line); flex-wrap:wrap; }
/* FB-R9 — de koppel-mini-FAB "+" onderaan de regel, rechts uitgelijnd. */
.c-reconcil-koppelfab{ display:flex; justify-content:flex-end; margin-top:var(--sp-3); }
.c-reconcil-koppel-lab{ font-size:var(--t-klein); color:var(--ink-soft); }
.c-reconcil-koppelknop{ background:none; border:1px solid var(--line); border-radius:16px; padding:4px 12px; cursor:pointer; font-family:var(--font-ui); font-size:var(--t-meta); color:var(--petrol-deep); }
.c-reconcil-koppelknop:hover{ border-color:var(--petrol); background:rgba(18,113,108,.06); }
@media (max-width:699px){ .c-reconcil-koppelknop{ min-height:44px; } }
.c-reconcil-teller{ margin-right:auto; font-size:var(--t-klein); color:var(--ink-soft); }

/* ── H-3 · herziene reconciliatie-regel (frame 52d) ── */
/* Team-slot als eerlijke infostrook bovenaan, vóór de manager kiest */
.c-reconcil-slotstrook{ display:flex; align-items:center; gap:8px; background:var(--cream2);
  border-radius:9px; padding:9px 13px; margin-bottom:12px; font-size:var(--t-meta); color:var(--ink-soft); line-height:1.45; }
.c-reconcil-slot-ic{ flex:none; }
/* huidig → voorgesteld staat rechts in de kop */
.c-reconcil-kop{ align-items:center; }
.c-reconcil-kop .c-reconcil-stand{ margin-top:0; margin-left:auto; }
/* de herkomst als blok: petrol kantlijn (sterkste bron: agent-inbreng), grijs
   (uit de gesprekken: aanname met bewijs) of oranje (een attendering: enkel een
   signaal-hint, geen voorgestelde waarde). */
.c-reconcil-herkblok{ border-left:3px solid var(--line-ghost); border-radius:0 8px 8px 0;
  padding:8px 12px; margin-top:10px; }
.c-reconcil-herkblok.is-agent{ border-left-color:var(--petrol-deep); background:#F5F8F7; }
.c-reconcil-herkblok.is-gesprek{ border-left-color:var(--line-ghost); background:#F7F5F0; }
.c-reconcil-herkblok.is-signaal{ border-left-color:#E07B39; background:rgba(224,123,57,.06); }
.c-reconcil-herk-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:1.5; }
.c-reconcil-herk-bron{ font-size:var(--t-meta); color:var(--ink-soft); margin-top:3px; }
/* een attendering draagt geen huidig→voorgesteld-stand en geen keuze: enkel de
   verwijzing en "bekijk ▸". */
.c-reconcil-atttekst{ font-size:var(--t-klein); color:var(--ink); line-height:1.5; margin-top:2px; }
.c-reconcil-rij.is-attendering .c-reconcil-ganaar{ margin-top:10px; }
/* "ga naar de plek" rechts in de keuze-rij */
.c-reconcil-keuze{ align-items:center; }
.c-reconcil-keuze .c-reconcil-ganaar{ margin-left:auto; margin-top:0; }
@media (max-width:699px){
  .c-reconcil-kop{ flex-wrap:wrap; }
  .c-reconcil-kop .c-reconcil-stand{ margin-left:0; width:100%; }
  .c-reconcil-keuzeknop{ min-height:44px; }
  .c-reconcil-keuze .c-reconcil-ganaar{ margin-left:0; width:100%; min-height:44px; }
}

/* ── H-5 · clustering per groep (frame 53a/b) ── */
.c-recon-cluster{ border:1px solid var(--line); border-radius:12px; background:var(--wit); padding:12px 14px; margin-bottom:12px; }
.c-recon-cluster-kop{ display:flex; align-items:center; gap:10px; }
.c-recon-cluster-titel{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-dark); }
.c-recon-cluster-tel{ margin-left:auto; font-size:var(--t-meta); color:var(--ink-soft); white-space:nowrap; }
/* Fase 3 — het inklapbare context-paneel per groep (subgroepen · gesprekken ·
   signalen, in aantallen). Rustig, cream, boven de as-groepen. */
.c-recon-context{ margin-top:8px; border:1px solid var(--line); border-radius:8px; background:var(--cream2,rgba(18,113,108,.05)); }
.c-recon-context-kop{ list-style:none; cursor:pointer; padding:6px 10px; font-size:var(--t-meta); font-weight:var(--gew-vet); color:var(--petrol-deep); }
.c-recon-context-kop::-webkit-details-marker{ display:none; }
.c-recon-context-kop::before{ content:'▸ '; color:var(--ink-soft); }
.c-recon-context[open] .c-recon-context-kop::before{ content:'▾ '; }
.c-recon-context-body{ padding:0 10px 8px 10px; display:flex; flex-direction:column; gap:3px; }
.c-recon-context-rij{ font-size:var(--t-meta); color:var(--ink-soft); line-height:1.5; }
.c-recon-askop{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:12px; margin-bottom:2px; }
/* compacte regel: klikbare kop-rij + uitklapbare volle anatomie */
.c-recon-cregel{ border-top:1px solid var(--cream2); }
.c-recon-cregel:first-of-type{ border-top:0; }
.c-recon-ctop{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:0;
  padding:9px 2px; cursor:pointer; font-family:var(--font-ui); }
.c-recon-cplek{ font-size:var(--t-klein); color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-recon-cstand{ display:inline-flex; align-items:center; gap:5px; flex:none; }
.c-recon-cpijl{ color:var(--ink-soft); font-size:var(--t-meta); }
.c-recon-bron{ flex:none; font-size:var(--t-pil); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:2px 9px; white-space:nowrap; }
.c-recon-bron.is-agent{ color:var(--petrol-deep); background:rgba(18,113,108,.1); }
.c-recon-bron.is-gesprek{ color:var(--ink-soft); background:var(--cream2); }
/* een attendering: signaal-hint, geen voorstel — oranje proces-tint, geen stand-stips */
.c-recon-bron.is-signaal{ color:#B5642C; background:rgba(224,123,57,.1); }
.c-recon-cregel.is-attendering .c-recon-cplek{ white-space:normal; }
.c-recon-cgekozen{ flex:none; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep); min-width:0; }
.c-recon-chev{ flex:none; font-size:11px; color:var(--ink-soft); }
.c-recon-cbody{ padding:2px 0 10px; }
/* de geneste volle regel draagt geen eigen kaart-omlijsting binnen de cluster */
.c-recon-cbody .c-reconcil-rij{ border:0; border-left:3px solid transparent; border-radius:0; padding:4px 0 2px; }
.c-recon-cbody .c-reconcil-rij.is-agent{ border-left:3px solid var(--petrol-deep); padding-left:10px; }
/* geen verschuiving: gedempt mee, telt niet */
.c-recon-cregel.is-geen{ opacity:.55; }

/* H-7 (54b) — de drie nieuwe weergave-vormen. */
.c-recon-h7stand{ display:inline-flex; align-items:center; gap:6px; }
.c-recon-h7txt{ font-size:var(--t-meta); color:var(--ink-soft); }
/* FB-R7 — "geen huidige waarde" gedempt/cursief zodat de leegte duidelijk leest. */
.c-recon-h7txt.is-geen{ font-style:italic; opacity:.75; }
.c-recon-h7txt.is-voor{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
/* capaciteit: schaal-blokjes krap/ok/ruim — geen readiness-kleuren; "krap"(vol) rood */
.c-recon-schaal{ display:inline-flex; gap:2px; }
.c-recon-schaalblok{ width:8px; height:12px; border-radius:2px; background:var(--line-ghost); }
.c-recon-schaalblok.is-aan{ background:var(--petrol-deep); }
.c-recon-schaalblok.is-plafond{ background:var(--rood); }
/* risico: 3×3-matrix met oude cel (grijze ring) en nieuwe cel (vol + donkere ring) */
.c-recon-rismatrix{ display:grid; grid-template-columns:repeat(3,14px); gap:3px; margin:8px 0 0 2px; }
.c-recon-rmcel{ width:14px; height:14px; border-radius:3px; background:var(--cream2); border:1px solid var(--line); }
.c-recon-rmcel.is-oud{ box-shadow:0 0 0 2px var(--line-ghost); }
.c-recon-rmcel.is-nieuw{ background:var(--rood); box-shadow:0 0 0 2px var(--petrol-dark); }
/* positie: 2×2-kwadrant (invloed y · impact x), oude en nieuwe plek gemarkeerd */
.c-recon-poskwadrant{ margin-top:8px; display:grid; grid-template-columns:repeat(2, 16px); grid-auto-rows:16px; gap:3px; }
.c-recon-poscel{ border:1px solid var(--line); border-radius:3px; background:var(--cream2); }
.c-recon-poscel.is-oud{ box-shadow:inset 0 0 0 2px var(--line-ghost); }
.c-recon-poscel.is-nieuw{ background:var(--petrol-deep); border-color:var(--petrol-deep); }

/* H-8 (§AA, frame 54c) — de wijzigingshistoriek op een inschatting + de
   groep-tijdlijn. */
.c-hist{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--cream2); }
.c-hist-kop{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--sp-3); }
.c-hist-regel{ padding:var(--sp-2) 0; border-top:1px solid var(--cream2); }
.c-hist-regel:first-of-type{ border-top:0; }
.c-hist-hoofd{ display:flex; align-items:baseline; gap:var(--sp-4); }
.c-hist-waarde{ font-size:var(--t-klein); color:var(--ink); font-weight:var(--gew-vet); flex:1; min-width:0; }
.c-hist-datum{ flex:none; font-size:var(--t-meta); color:var(--ink-soft); }
.c-hist-bron{ display:block; margin-top:2px; background:none; border:0; padding:0; text-align:left; cursor:pointer; font-size:var(--t-meta); color:var(--petrol-deep); line-height:1.45; }
.c-hist-bron:hover{ text-decoration:underline; }
.c-hist-hand{ font-size:var(--t-meta); color:var(--ink-soft); font-style:italic; }
/* de groep-tijdlijn: verticale lijn met stippen, nieuwste boven */
.c-tijdlijn{ display:flex; flex-direction:column; gap:0; }
.c-tijdlijn-leeg{ font-size:var(--t-klein); color:var(--ink-soft); }
.c-tijdlijn-regel{ display:flex; gap:var(--sp-4); padding:var(--sp-3) 0; position:relative; }
.c-tijdlijn-regel+.c-tijdlijn-regel{ border-top:1px solid var(--cream2); }
.c-tijdlijn-stip{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--line-ghost); margin-top:5px; }
.c-tijdlijn-regel.is-missie .c-tijdlijn-stip{ background:var(--petrol-deep); }
.c-tijdlijn-inhoud{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.c-tijdlijn-datum{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-tijdlijn-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:var(--lh-kaart); }
.c-tijdlijn-regel.is-herziening{ opacity:.82; }   /* gedempte historie */
.c-tijdlijn-regel.is-missie .c-tijdlijn-tekst{ font-weight:var(--gew-vet); }
.c-tijdlijn-bron{ color:var(--ink-soft); }

/* R45 (E4) — het "zo werkt verdelen"-venster + de stille strook-link. */
.c-missie-strook-link{ display:inline-block; margin-top:4px; background:none; border:0; padding:0; cursor:pointer; color:var(--petrol-deep); font-size:var(--t-meta); font-weight:var(--gew-vet); }
.c-missie-strook-link:hover{ text-decoration:underline; }
.c-verdeel-stappen{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.c-verdeel-stap{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--cream2,#f6f1e7); border:1px solid var(--line); border-radius:10px; opacity:.9; }
.c-verdeel-stap-ic{ font-size:1.2rem; flex:none; }
.c-verdeel-stap-tekst{ font-size:var(--t-klein); color:var(--ink); }
.c-verdeel-privacy{ font-size:var(--t-meta); color:var(--ink-soft); font-style:italic; margin:0 0 var(--sp-3); }
.c-verdeel-belofte{ font-size:var(--t-klein); color:var(--ink); margin:0 0 var(--sp-2); }
.c-verdeel-prijs{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); margin:0; }

/* R48a — de trede/behoefte-velden op het werkbord. */
.mw-trede-lab{ font-size:var(--t-meta); color:var(--ink-soft); margin-top:var(--sp-2); }
.mw-behoefte{ margin-top:var(--sp-2); width:100%; box-sizing:border-box; }
/* R48a (frame 48a) — de trede als drie kleurvlakken (rood·geel·groen). Actief =
   vol vlak met witte inzet; rust = gedempt. Geen tekst in het vlak. */
.mw-trede{ display:flex; flex-direction:column; gap:4px; }
.mw-trede-vlakken{ display:flex; gap:6px; }
.mw-trede-vlak{ width:30px; height:24px; border-radius:var(--r-s); border:1px solid var(--line);
  padding:0; cursor:pointer; opacity:.25; transition:opacity .1s; }
.mw-trede-vlak:hover{ opacity:.55; }
.mw-trede-vlak.is-actief{ opacity:1; box-shadow:inset 0 0 0 2px #fff; border-color:transparent; }
.mw-trede-vlak[data-kleur="rood"]{ background:var(--rood); }
.mw-trede-vlak[data-kleur="geel"]{ background:var(--geel); }
.mw-trede-vlak[data-kleur="groen"]{ background:var(--groen); }
.mw-trede-lees{ font-size:var(--t-meta); color:var(--ink-soft); line-height:1.3; min-height:1.1em; }
.mw-trede-lees b{ color:var(--ink); font-weight:var(--gew-vet); }
.mw-trede-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:baseline; }
.mw-trede-dot[data-kleur="rood"]{ background:var(--rood); }
.mw-trede-dot[data-kleur="geel"]{ background:var(--geel); }
.mw-trede-dot[data-kleur="groen"]{ background:var(--groen); }
/* De kleur-betekenis-legende, één keer onder het bord. */
.mw-trede-legende{ margin-top:var(--sp-4); font-size:var(--t-meta); color:var(--ink-soft); }
.mw-trede-leg-item{ white-space:nowrap; }

/* ─────────────────────────────────────────────────────────────
   R49 (frames 49a/49b) — de missiepagina met reliëf: petrol opdrachtkaart als
   held, witte voortgangsonderregel, secties in het FAB-kleurstip-vocabulaire,
   en één "Bewaar je bestand ↓"-knop (werkkopie = retour).
   ───────────────────────────────────────────────────────────── */
.c-opdrachtkaart{ position:relative; border-radius:14px; overflow:hidden; background:var(--cream);
  border:1px solid var(--line); box-shadow:0 8px 24px rgba(10,57,54,.08); margin-bottom:12px; }
.c-opdrachtkop{ position:relative; background:var(--petrol-deep); padding:18px 22px; }
.c-opdrachtkop-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.09em; color:var(--petrol-light); text-transform:uppercase; }
.c-opdrachtkop-doel{ font-family:var(--font-kop); font-weight:600; font-size:21px; color:var(--cream); line-height:1.3; margin-top:6px; }
.c-opdrachtkop-chips{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.c-opdrachtchip{ font-size:11.5px; color:rgba(250,248,245,.85); border:1px solid rgba(250,248,245,.3);
  border-radius:999px; padding:4px 12px; background:none; font-family:inherit; }
.c-opdrachtchip.is-aanpak{ font-weight:600; color:#fff; background:var(--terra); border-color:transparent; cursor:pointer; }
.c-opdrachtchip.is-aanpak:hover{ background:var(--terra-hover); }
/* R55a — de twee opdracht-feiten in één omlijnde pill met een verticale deler. */
.c-opdrachtfeiten{ display:flex; align-items:center; gap:8px; border:1px solid rgba(250,248,245,.3); border-radius:999px; padding:4px 14px; }
.c-opdrachtfeit{ font-size:12px; color:var(--cream); white-space:nowrap; }
.c-opdrachtfeit-deler{ width:1px; height:14px; background:rgba(250,248,245,.3); flex:none; }
.c-opdracht-meer{ position:absolute; top:12px; right:14px; background:none; border:0; color:var(--petrol-light);
  font-size:18px; line-height:1; cursor:pointer; padding:2px 8px; border-radius:6px; }
.c-opdracht-meer:hover{ background:rgba(255,255,255,.12); }
.c-voortgang-onder{ display:flex; align-items:center; gap:16px; padding:14px 22px; background:var(--cream); }
.c-voortgang-getal{ font-family:var(--font-kop); font-weight:600; font-size:30px; color:var(--petrol-dark); flex:none; }
.c-voortgang-getal-sub{ font-size:15px; color:var(--ink-soft); font-family:var(--font-ui); font-weight:400; }
.c-voortgang-onder-blokjes{ display:flex; gap:4px; flex:1; }
.c-voortgang-onder-blok{ height:10px; flex:1; border-radius:3px; background:var(--cream2); }
.c-voortgang-onder-blok.is-vol{ background:var(--groen); }
.c-voortgang-onder-dagen{ font-size:11.5px; font-weight:600; color:var(--ink-soft); flex:none; }
.c-voortgang-onder-dagen.is-krap{ color:var(--geel); }
.c-opdracht-kiezer{ margin-bottom:12px; }

/* Secties in FAB-vocabulaire: petrol stip / open ring, terracotta telbadge,
   samenvattingsregel op de dichte sectie, petrol linkerrand op de open sectie. */
.c-agentmissie-sectiekaart:has(.c-modus-sectie[open]){ border-left:3px solid var(--petrol); }
.c-sectie-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.c-modus-sectie.is-petrol .c-sectie-dot{ background:var(--petrol); }
.c-modus-sectie.is-ring .c-sectie-dot{ background:none; border:1.5px solid var(--ink-soft); }
.c-modus-sectie.is-amber .c-sectie-dot{ background:var(--amber, #D9A63C); }
/* R58 — het werkbord-hulpblok (lege staat): intro + petrol aanmoedigingsblok. */
.c-werkbord-intro{ font-size:12px; color:var(--ink-soft); line-height:var(--lh-lijst); margin:0 0 10px; }
.c-werkbord-hulp{ background:#EAF1F0; border-radius:9px; padding:11px 14px; margin:0 0 12px; }
.c-werkbord-hulp-kop{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--petrol-deep, #0E4F4B); }
.c-werkbord-hulp-lijst{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.c-werkbord-hulp-item{ font-size:12px; color:var(--ink); line-height:1.5; }
.c-sectie-titel{ font-size:13.5px; font-weight:600; color:var(--ink); flex:1; }
/* de samenvatting duwt de bestaande ::after-pijl niet weg; zij staat er net vóór */
.c-sectie-sam{ font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:45%; }
.c-modus-sectie[open] .c-sectie-sam{ display:none; }

/* Zijmenu §3b: ingekorte contextregel + nav-stippen + één Save-knop. */
/* De contextregel draagt de naam van de groep waarvoor deze missie loopt; ze
   speelt in dit menu de rol die .c-traject-naam in de andere twee schillen
   speelt — de kop van het bestand dat je open hebt. Die kop is in alle drie wit
   (--op-vol). Ze stond op --petrol-light, en dat is sinds 116f binnen de schil
   het accent van de app: de regel werd daarmee lila in de missie-app terwijl ze
   in de andere twee wit is. Het accent-licht is voor labels, niet voor de kop. */
.c-modus-kop-ctx{ font-size:12.5px; font-weight:600; color:var(--op-vol); line-height:1.4; }
.c-modus-rij-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.c-modus-rij-dot.is-petrol{ background:var(--petrol-light); }
.c-modus-rij-dot.is-ring{ background:none; border:1.5px solid var(--petrol-light); }
.c-modus-rij-dot.is-amber{ background:var(--amber, #D9A63C); }
.c-modus-rij-lab{ flex:1; }
.c-modus-footer-uitleg{ font-size:11px; color:var(--petrol-light); opacity:.85; line-height:1.5; }
.c-agentshell-prive-bewaar{ flex:none; }
/* R48b — het opvolgdatum-blok op de afrondkaart. */
.c-afrond-opvolg{ margin-top:var(--sp-3); }
.c-afrond-opvolg-datum{ display:block; margin-top:var(--sp-2); }
.c-afrond-opvolg-geen{ display:flex; align-items:center; gap:8px; margin-top:var(--sp-2); font-size:var(--t-klein); color:var(--ink-soft); cursor:pointer; }
/* R48d — het oranje !-teken bij een verstreken opvolgdatum (proces-signaal,
   bewust naast terracotta/amber). */
.ad-opvolg{ display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3); flex-wrap:wrap; }
.ad-opvolg-teken{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#E07B39; color:#fff; font-weight:var(--gew-zwaar); box-shadow:0 0 0 2px #fff; flex:none; }
.ad-opvolg-tekst{ font-size:var(--t-klein); color:var(--ink); }
.ad-opvolg-plan{ background:none; border:0; padding:0; cursor:pointer; color:var(--petrol-deep); font-size:var(--t-klein); font-weight:var(--gew-vet); }
.ad-opvolg-plan:hover{ text-decoration:underline; }
/* R48c — de bewustzijnsladder-info op de communicatie-readiness-kop. */
.hm-ladder-info{ cursor:help; color:var(--petrol-deep); font-size:var(--t-meta); }
/* R48/6.8 — de behoefte-stuurregel in de segmentkaart. */
.ad-seg-behoefte{ margin:var(--sp-3) 0; padding:var(--sp-2) var(--sp-3); background:var(--cream2,#f6f1e7); border-left:3px solid var(--terra); border-radius:6px; }
.ad-seg-behoefte-lab{ display:block; font-size:var(--t-meta); color:var(--ink-soft); }
.ad-seg-behoefte-tekst{ font-size:var(--t-klein); color:var(--ink); }

/* R48c — de bewustzijnsladder-legende onder het heatmap-blok. */
.heat-ladder-leg{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-2); font-size:var(--t-meta); color:var(--ink-soft); }
.heat-ladder-leg .heat-ladder-lab{ font-weight:var(--gew-vet); }
.heat-ladder-leg span{ display:inline-flex; align-items:center; gap:5px; }
.heat-ladder-leg i{ width:10px; height:10px; border-radius:50%; display:inline-block; }

/* 6.0c — een agent-voorstel in de reconciliatie: petrol kantlijn, staat bovenaan. */
.c-reconcil-rij.is-agent{ border-left:3px solid var(--petrol-deep); }
.c-reconcil-rij.is-agent .c-reconcil-as{ color:var(--petrol-deep); font-weight:var(--gew-vet); }

/* R48/6.1 — de oogst in het retourvenster. */
.c-retour-oogst{ margin-top:var(--sp-5); text-align:left; }
.c-retour-oogst-kop{ font-family:var(--font-kop,var(--font-ui)); font-size:1.05rem; margin:0 0 var(--sp-3); }
.c-retour-inzicht{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); }
.c-retour-inzicht-tekst{ font-size:var(--t-klein); color:var(--ink); }
.c-retour-inzicht-meta{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-2); font-size:var(--t-meta); }
.c-retour-groepchip{ background:var(--cream2,#f6f1e7); border:1px solid var(--line); border-radius:12px; padding:1px 8px; color:var(--ink-soft); }
.c-retour-kenmerk, .c-retour-stage{ color:var(--ink-soft); }
.c-retour-sterkte{ color:var(--ink-soft); }
.c-retour-sterkte.is-sterk{ color:#C0563A; font-weight:var(--gew-vet); }
.c-retour-doorgang{ display:inline-block; margin-top:var(--sp-4); background:var(--petrol-deep); color:#fff; border:0; border-radius:8px; padding:var(--sp-2) var(--sp-4); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); cursor:pointer; }
.c-retour-doorgang:hover{ background:var(--petrol,#12716C); }

/* R48b (6.0b-2) — de as-is-terugblik op de afrondkaart. */
.c-asis{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.c-asis-kop{ font-family:var(--font-kop,var(--font-ui)); font-weight:var(--gew-vet); color:var(--ink); }
.c-asis-uitleg{ font-size:var(--t-meta); color:var(--ink-soft); margin:2px 0 var(--sp-3); }
.c-asis-rij{ padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.c-asis-as{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); }
.c-asis-geen{ font-size:var(--t-meta); color:var(--ink-soft); font-style:italic; }
.c-asis-stand{ font-size:var(--t-meta); color:var(--ink-soft); margin:2px 0; }
.c-asis-toggle{ display:flex; gap:var(--sp-2); margin-top:var(--sp-2); }
.c-asis-knop{ background:none; border:1px solid var(--line); border-radius:16px; padding:3px 12px; cursor:pointer; font-size:var(--t-meta); color:var(--ink-soft); white-space:nowrap; }
.c-asis-knop.is-aan{ border-color:var(--petrol-deep); background:var(--petrol-deep); color:#fff; }
.c-asis-anders{ margin-top:var(--sp-2); }
.c-asis-waarom{ width:100%; box-sizing:border-box; margin-top:var(--sp-2); }

/* H-6 (§AA, frame 54a) — de vier-lagen-terugblik: accordeon-kaarten per laag. */
.c-vlt{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.c-vlt-kop{ font-family:var(--font-kop,var(--font-ui)); font-weight:var(--gew-vet); color:var(--ink); }
.c-vlt-uitleg{ font-size:var(--t-meta); color:var(--ink-soft); margin:2px 0 var(--sp-4); }
/* elke laag: dichte kop met chevron; petrol kantlijn zodra er een reactie is */
.c-vlt-laag{ border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-s);
  background:var(--wit); margin-bottom:var(--sp-3); }
.c-vlt-laag.is-actief{ border-left-color:var(--petrol-deep); }
.c-vlt-laag.is-leeg{ opacity:.72; }
.c-vlt-laag-kop{ display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  background:none; border:0; padding:11px 13px; cursor:pointer; font-family:var(--font-ui); }
.c-vlt-laag-titel{ flex:1; min-width:0; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); }
.c-vlt-badge{ flex:none; font-size:var(--t-overline); font-weight:var(--gew-zwaar); color:var(--petrol-deep);
  background:rgba(18,113,108,.1); border-radius:var(--r-pil); padding:1px 8px; }
.c-vlt-chev{ flex:none; font-size:11px; color:var(--ink-soft); }
.c-vlt-laag-body{ padding:0 13px 13px; display:flex; flex-direction:column; gap:var(--sp-4); }
/* de voorgevulde-reactie-strook uit de gesprekken (H-9) */
.c-vlt-h9{ display:flex; flex-direction:column; gap:var(--sp-2); }
.c-vlt-h9-regel{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--t-meta);
  background:rgba(224,123,57,.06); border-left:3px solid #E07B39; border-radius:0 6px 6px 0; padding:6px 10px; }
.c-vlt-h9-chip{ flex:none; font-weight:var(--gew-vet); color:#B5642C; }
.c-vlt-h9-citaat{ flex:1; min-width:0; color:var(--ink); font-style:italic; }
.c-vlt-h9-bron{ flex:none; color:var(--ink-soft); }
.c-vlt-ref{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-vlt-vraag{ font-size:var(--t-klein); color:var(--ink); margin:0; }
.c-vlt-stem{ width:100%; box-sizing:border-box; }
/* capaciteit: veld-label + krap/ok/ruim-wissel per rij */
.c-vlt-caprij,.c-vlt-riswissel{ display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.c-vlt-caplab{ flex:none; min-width:96px; font-size:var(--t-meta); font-weight:var(--gew-vet); color:var(--ink-soft); }
/* risico: per blok de tekst + kans- en impact-wissel */
.c-vlt-risblok{ border-top:1px solid var(--cream2); padding-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-3); }
.c-vlt-risblok:first-child{ border-top:0; padding-top:0; }
.c-vlt-ristekst{ font-size:var(--t-klein); color:var(--ink); }
@media (max-width:699px){
  .c-vlt-laag-kop{ padding:14px 13px; }
  .c-vlt-caplab{ min-width:0; width:100%; }
}
/* §6c — de afsluit-suggestiekaart op het dashboard (nooit een popup) */
.c-afsluit-kaart{ background:var(--cream2); border:1px solid var(--line); border-left:3px solid var(--terra); border-radius:var(--r-s); padding:14px 16px; margin-bottom:var(--sp-5); }
.c-afsluit-kaart-tekst{ font-size:var(--t-klein); color:var(--ink); line-height:1.45; margin-bottom:10px; }
.c-afsluit-kaart-cta{ border:none; background:var(--terra); color:var(--wit); border-radius:var(--r-pil); padding:8px 18px; font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-zwaar); cursor:pointer; }
/* §6f — de stille "nog geen kopie op je toestel"-regel onder de opslagstatus.
   Het blok wikkelt de statusrij + die regel zodat ze samen in de flyout landen. */
.c-opslag-flyoutblok{ display:block; }
.c-opslag-geenkopie{ font-size:var(--t-klein); color:var(--ink-soft); margin-top:6px; padding-left:2px; }
/* sessie-agenda */
.c-dg-agenda-lijst{ display:flex; flex-direction:column; gap:6px; }
.c-dg-agenda-rij{ font-size:var(--t-klein); padding:9px 12px; background:var(--cream2); border-radius:var(--r-s); border-left:3px solid var(--line); }
.c-dg-agenda-rij[data-bron="besluit"]{ border-left-color:var(--petrol); }
.c-dg-agenda-rij[data-bron="aandacht"]{ border-left-color:var(--geel); }
.c-dg-agenda-leeg{ font-size:var(--t-klein); color:var(--ink-soft); }
/* 30b — inricht */
.c-dg-leden{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; }
.c-dg-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-pil); padding:4px 6px 4px 10px; font-size:var(--t-klein); }
.c-dg-chip.is-sponsor{ background:var(--vul-petrol); border-color:var(--petrol); }
.c-dg-chip.is-klik{ cursor:pointer; }
.c-dg-chip-rol,.c-dg-chip-groep{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-dg-chip-x{ border:none; background:none; cursor:pointer; color:var(--ink-soft); font-size:11px; padding:0 2px; }
.c-dg-chip-leeg{ border:1px dashed var(--line-sterk); background:none; border-radius:var(--r-pil); padding:4px 10px; color:var(--ink-soft); font-size:var(--t-klein); cursor:pointer; }
.c-dg-toe{ display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; width:100%; }
.c-dg-toe-naam{ font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-s); padding:6px 9px; flex:0 0 auto; }
.c-dg-toe .c-groepveld{ flex:1; min-width:140px; }
.c-dg-toe-knop{ font-size:var(--t-klein); border:1px dashed var(--line-sterk); background:none; border-radius:var(--r-s); padding:6px 12px; color:var(--petrol-deep); cursor:pointer; }
.c-dg-rem{ background:var(--vul-amber-zacht); border:1px solid var(--amber-rand); border-radius:var(--r-m); padding:12px var(--sp-6); margin:8px 0; }
.c-dg-rem-kop{ font-weight:var(--gew-vet); color:var(--geel-tekst); font-size:var(--t-klein); }
.c-dg-rem-tekst{ font-size:var(--t-klein); color:var(--ink); margin:4px 0 8px; }
/* 30c — ritme */
.c-dg-ritme{ border-top:1px solid var(--cream2); padding-top:14px; margin-top:6px; }
.c-dg-ritme-kop{ font-weight:var(--gew-vet); color:var(--petrol-deep); font-size:var(--t-klein); }
.c-dg-ritme-uitleg{ font-size:var(--t-pil); color:var(--ink-soft); margin:2px 0 10px; }
.c-dg-ritme-rij{ display:flex; gap:12px; flex-wrap:wrap; }
.c-dg-ritme-label{ display:flex; flex-direction:column; gap:3px; font-size:var(--t-pil); color:var(--ink-soft); }
.c-dg-ritme-veld{ font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-s); padding:6px 8px; }
.c-dg-focus{ border-top:1px solid var(--cream2); padding-top:14px; margin-top:14px; }
.c-dg-focus-kop{ display:flex; align-items:baseline; gap:8px; font-weight:var(--gew-vet); color:var(--petrol-deep); font-size:var(--t-klein); }
.c-dg-focus-sub{ font-size:var(--t-pil); color:var(--ink-soft); font-weight:var(--gew-normaal); }
/* 30b — focus-groep = ingesprongen subrij (16px) onder de hoofdgroep */
.c-dg-focus-rij{ padding:6px 0 6px 16px; font-size:var(--t-klein); }
.c-dg-focus-rij-kop{ display:flex; align-items:center; gap:0; }
.c-dg-focus-naam{ font-weight:var(--gew-half); color:var(--ink); }
.c-dg-focus-tel{ color:var(--ink-soft); }
.c-dg-focus-rij-kop .c-dg-chip-x{ margin-left:auto; }
.c-dg-focus-leden{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 0 0; }
.c-dg-focus-lidchip{ display:inline-flex; align-items:center; gap:5px; font-size:var(--t-pil); color:var(--ink); background:var(--cream2); border-radius:999px; padding:2px 8px; }
.c-dg-focus-lidpill{ display:inline-flex; align-items:center; font-size:var(--t-pil); color:var(--ink-soft); border:1px dashed #B9B4AA; background:transparent; border-radius:999px; padding:2px 10px; cursor:pointer; }
.c-dg-focus-lidpill:hover{ color:var(--ink); border-color:var(--ink-soft); }
.c-dg-focus-lidinput{ font-size:var(--t-pil); border:1px solid var(--petrol); border-radius:999px; padding:2px 10px; min-width:90px; }
.c-dg-focus-toe{ display:flex; gap:6px; margin-top:6px; }
.c-dg-woont{ font-size:var(--t-pil); color:var(--ink-soft); margin-top:14px; }
/* 30d — tafel-markering op de map + lens */
.c-map-tafel{ color:var(--petrol); font-size:12px; }
.c-map-tafel.is-niet{ color:var(--geel-tekst); }
.c-lens-tafel{ font-size:var(--t-klein); color:var(--petrol-deep); }
.c-lens-tafel.is-niet{ color:var(--geel-tekst); }

/* ── Ronde 30-bis deel 2 — snap-naar-sessie op meetpunt-datumvelden ── */
.c-meetpunt-datum{ display:flex; flex-direction:column; gap:4px; }
/* de reeks-samenvatting staat waar bij een los meetpunt het datumveld staat:
   leesbaar, niet invulbaar, want de datums wonen op het meetpunt zelf */
.c-reeks-samenvatting{ font-family:var(--font-ui); font-size:var(--t-body); color:var(--ink); }
.c-snap-hint{ font-size:var(--t-pil); line-height:1.4; min-height:0; }
.c-snap-hint:empty{ display:none; }
.c-snap-standaard{ color:var(--ink-soft); }
.c-snap-op{ color:var(--petrol-deep); }
.c-snap-aanbod{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); }
.c-snap-knop{ border:1px dashed var(--petrol); background:var(--vul-petrol); color:var(--petrol-deep); border-radius:var(--r-pil); padding:1px 9px; font-size:var(--t-pil); cursor:pointer; }
.c-snap-knop:hover{ background:var(--petrol); color:var(--wit); }
.c-snap-link{ border:none; background:none; color:var(--petrol-deep); font-size:var(--t-pil); cursor:pointer; padding:0; }
.c-snap-link:hover{ text-decoration:underline; }

/* ── Ronde 30-bis deel 3 — stale-markering: meer dan twee sessies over tijd ── */
.ms-stale{ display:inline-block; margin-left:8px; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--terra-tekst); background:var(--vul-terra-zacht); border:1px solid var(--terra); border-radius:var(--r-pil); padding:1px 9px; white-space:nowrap; }
.ms[data-stale="ja"] .ms-dot{ background:var(--terra); box-shadow:0 0 0 3px var(--vul-terra-zacht); }

/* ═══════ Ronde 30d — compacte stakeholdermap-kwadrantrijen ═══════ */
.c-map-rij{ display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-m);
  padding:9px 12px; margin-bottom:6px; cursor:pointer; font-size:var(--t-klein); }
/* Mobiel: de kwadrantrij (naam · aantal · stem · ⊙ · start ▸) is nowrap en
   liep buiten de smalle kwadrant-cel; alles rechts van de naam werd afgesneden.
   We laten de rij wrappen: de naam vult de eerste regel, de meta valt eronder. */
@media (max-width:699px){
  .c-map-rij{ flex-wrap:wrap; row-gap:6px; }
  .c-map-rij .c-map-start{ margin-left:auto; }
}
.c-map-rij:hover{ border-color:var(--petrol); background:var(--cream2); }
.c-map-stip{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; }
/* R91 — de groep-status-stip draagt de BUY-IN (draagvlak) kleur: groen/amber/rood
   zoals gezet, open ring (grijs) wanneer nog niet gezet. De oude volledigheids-
   standen (vol/deels/leeg) blijven bestaan voor de mensen-sectie-stip. */
.c-map-stip[data-d="groen"]{ background:var(--groen); }
.c-map-stip[data-d="amber"]{ background:var(--geel); }
.c-map-stip[data-d="rood"]{ background:var(--rood); }
.c-map-stip[data-d="grijs"]{ background:none; border:1.5px solid var(--line-sterk); }
.c-map-stip[data-d="vol"]{ background:var(--groen); }
.c-map-stip[data-d="deels"]{ background:var(--geel); }
.c-map-stip[data-d="leeg"]{ background:none; border:1.5px solid var(--line-sterk); }
.c-map-naam{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:var(--gew-halfvet); }
.c-map-naam.is-leeg{ color:var(--ink-soft); font-weight:var(--gew-normaal); font-style:italic; }
.c-map-grootte{ flex:0 0 auto; font-size:var(--t-pil); color:var(--ink-soft); }
.c-map-stem{ flex:0 0 auto; font-size:var(--t-pil); border-radius:var(--r-pil); padding:1px 8px; }
.c-map-stem.is-vol{ color:var(--groen-tekst); background:var(--vul-groen-zacht); }
.c-map-stem.is-zwak{ color:var(--geel-tekst); background:var(--vul-amber-zacht); }
.c-map-tafel-rij{ flex:0 0 auto; font-size:13px; color:var(--ink-soft); }
.c-map-tafel-rij.is-leegnaam{ color:var(--line-sterk); }
/* Fable-ruling 6/7: gehoord-stand + het impact-gated amber "niet aan tafel"-label */
.c-map-gehoord{ flex:0 0 auto; font-size:var(--t-pil); color:var(--ink-soft); }
.c-map-gehoord.is-nul{ color:var(--line-sterk); }
.c-map-nietaantafel{ flex:0 0 auto; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--geel-tekst); }
/* Individuele stakeholder-rij: ◐-glyph i.p.v. de dekking-stip, en een amber
   "change agent"-label. Geen grootte/gehoord/tafel-⊙ (dat zijn groep-begrippen). */
.c-map-persoon-ic{ flex:0 0 auto; width:9px; text-align:center; color:var(--line-ghost,#B9B4AA); font-size:11px; line-height:1; }
/* 76g — de persoon-◐ draagt dezelfde DRAAGVLAK-kleur als de groep-stip. */
.c-map-persoon-ic[data-d="groen"]{ color:var(--groen); }
.c-map-persoon-ic[data-d="amber"], .c-map-persoon-ic[data-d="geel"]{ color:var(--geel); }
.c-map-persoon-ic[data-d="rood"]{ color:var(--rood); }
.c-map-persoon-tag{ flex:0 0 auto; font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--terra); }
/* R82b/R84 — de stille toevoeg-ingang per kwadrant gebruikt het gedeelde
   naam-component (naamAutocomplete → .c-naamac*). Alleen de dropdownbreedte
   wijkt af: in een smal kwadrant volgt hij de veldbreedte i.p.v. de vaste 280px. */
.c-map-toevoeg{ display:block; }
.c-map-ac.c-naamac{ position:relative; }
.c-map-ac .c-naamac-lijst{ width:auto; left:0; right:0; max-width:none; }
/* Map-popups (groep + persoon): historiek links, de blok-actie-FAB rechts op
   dezelfde hoogte als de "History"-kop. flex-start houdt de + bovenaan als de
   historiek uitklapt. */
.c-gk-histrij{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.c-gk-histrij .c-historiek{ flex:1 1 auto; min-width:0; }
.c-gk-histrij .c-blok-fab{ flex:0 0 auto; }
.c-persoon-rolrij{ margin:9px 0; }
/* de groepskaart-popup */
/* 30b — lege-stoel-keten: twee stille omlijnde suggestie-knoppen (geen terracotta) */
.c-map-stoelketen{ display:flex; gap:8px; margin-top:10px; }
.c-map-stoelknop{ font-size:var(--t-klein); color:var(--petrol-deep); background:var(--wit); border:1px solid var(--line-sterk); border-radius:999px; padding:5px 14px; cursor:pointer; }
.c-map-stoelknop:hover{ border-color:var(--petrol); background:var(--cream2); }
.c-map-popup-acties{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--cream2); }
.c-map-notitie{ width:100%; margin-top:12px; border:1px solid var(--line); border-radius:var(--r-s); padding:8px; font:inherit; font-size:var(--t-klein); resize:none; }
.c-map-verwijder{ border:none; background:none; color:var(--terra-tekst); font-size:var(--t-pil); cursor:pointer; }
.c-map-verwijder:hover{ text-decoration:underline; }
/* R82b/OMZET — Verwijderen links-afgezonderd in de popup-voet (tokens §Bewerk-popup). */
.c-voet-links{ margin-right:auto; color:var(--rood); }

/* R81c/§117 — item-aan-item koppeling: koppel-chip · KOPPELINGEN-sectie · zoekveld. */
.c-koppelchip{ display:inline-flex; align-items:center; gap:3px; border:none; cursor:pointer;
  background:#EAF1F0; color:var(--petrol-deep); font-weight:var(--gew-vet);
  font-size:var(--t-pil); border-radius:999px; padding:2px 10px; line-height:1.4; }
.c-koppelchip:hover{ background:#e0ebe9; }
.c-koppelchip-meer{ font-weight:var(--gew-half); }
.c-koppel-sectie{ margin-top:12px; padding-top:10px; border-top:1px solid var(--line-zacht); }
.c-koppel-sectie-kop{ font-size:var(--t-overline); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mist); margin-bottom:6px; }
.c-koppel-sectie-lijst{ display:flex; flex-direction:column; gap:5px; }
.c-koppel-sectie-rij{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#EAF1F0; color:var(--petrol-deep); border-radius:8px; padding:5px 10px; font-size:var(--t-klein); }
.c-koppel-sectie-lab{ font-weight:var(--gew-half); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-koppel-sectie-x{ flex:0 0 auto; border:none; background:none; color:var(--ink-mist); cursor:pointer; font-size:12px; line-height:1; }
.c-koppel-sectie-x:hover{ color:var(--rood); }
.c-koppel-zoek{ position:relative; margin:8px 0 4px; }
.c-koppel-zoek-inp{ width:100%; box-sizing:border-box; }
.c-koppel-zoek-lijst{ position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:20;
  display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--line);
  border-radius:8px; box-shadow:0 8px 22px rgba(10,57,54,.16); overflow:hidden; }
.c-koppel-zoek-optie{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:none; border:0; padding:7px 10px; font-size:var(--t-body); color:var(--ink); cursor:pointer; }
.c-koppel-zoek-optie:hover{ background:var(--cream2); }
/* Gekozen: het veld houdt de titel vast en toont een ✕ om terug te gaan. Een
   koppeling ontstaat pas bij het bewaren, dus dit is de enige plek waar de
   gebruiker kan zien wat hij zo dadelijk vastlegt. */
.c-koppel-zoek.is-gekozen .c-koppel-zoek-inp{ border-color:var(--petrol); background:#EAF1F0;
  color:var(--petrol-deep); font-weight:var(--gew-half); padding-right:30px; }
.c-koppel-zoek-wis{ position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:none; padding:4px; line-height:1; cursor:pointer;
  color:var(--ink-mist); font-size:12px; }
.c-koppel-zoek-wis:hover{ color:var(--rood); }
.c-koppel-zoek-wis[hidden]{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Wizard-schaal — de geleide tien minuten (correctie 8 aug, frames 32w0–w6)
   ---------------------------------------------------------------------------
   welkom.css laadt ná dit bestand; deze regels winnen dus met een #geleideflow-
   scope waar ze de basis moeten overrulen. Eén gecentreerde kaart op een donker
   petrol-canvas, met een vaste kaartkop (6 klikbare segmenten) en een vaste
   kaartvoet — knoppen zweven nooit op een leeg canvas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* punt 0 — het donkere canvas + het cohentis-merkje linksboven */
#geleideflow{ background:linear-gradient(158deg,#0E4F4B 0%,#0A3936 100%); display:flex; align-items:center; justify-content:center; padding:32px 20px; overflow-y:auto; }
.c-gflow-merk{ position:fixed; top:20px; left:24px; z-index:1; display:flex; align-items:center; gap:6px; }
.c-gflow-merk-logo{ display:inline-flex; align-items:center; }
.c-gflow-merk-logo svg{ display:block; }
.c-gflow-merk-naam{ font-family:var(--font-ui); font-size:13px; font-weight:var(--gew-zwaar); color:var(--cream); }
.c-gflow-merk-dot{ color:var(--terra); font-weight:var(--gew-zwaar); }

/* punt 0 — de gecentreerde kaart: max 560px, min-hoogte 480px, kop/scroll/voet */
#geleideflow .c-gflow-inner{ max-width:560px; width:100%; min-height:480px; max-height:calc(100vh - 64px); margin:0; padding:0; background:var(--cream); border-radius:16px; box-shadow:0 24px 60px rgba(10,57,54,.35); display:flex; flex-direction:column; overflow:hidden; }
#geleideflow .c-gflow-kop{ flex:none; display:flex; align-items:center; gap:16px; padding:20px 28px 0; }
#geleideflow .c-gflow-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; padding:22px 28px 6px; }
#geleideflow .c-gflow-eyebrow{ margin-top:6px; color:var(--petrol); }
#geleideflow .c-gflow-vraag{ font-size:24px; line-height:1.2; margin:8px 0 14px; }
#geleideflow .c-gflow-body{ flex:1 1 auto; }
#geleideflow .c-gflow-voet{ flex:none; display:flex; align-items:center; gap:14px; margin:0; padding:14px 28px; border-top:1px solid var(--line); background:var(--cream); }
/* punt 0 — Volgende is terracotta (niet petrol) */
#geleideflow .c-gflow-volgende{ margin-left:auto; background:var(--terra); }
#geleideflow .c-gflow-volgende:hover{ background:var(--terra-hover); }

/* punt 2 — altijd 6 segmenten; afgerond = petrol + klikbaar, toekomst gedimd */
#geleideflow .c-gflow-prog{ display:flex; gap:6px; flex:1; }
#geleideflow .c-gflow-streep{ height:4px; flex:1; border-radius:2px; background:var(--line); border:none; padding:0; }
#geleideflow button.c-gflow-streep{ cursor:pointer; }
#geleideflow .c-gflow-streep.is-vol{ background:var(--petrol); }
#geleideflow .c-gflow-streep.is-nu{ background:var(--petrol); }
#geleideflow button.c-gflow-streep:hover{ background:var(--petrol-deep); }

/* punt 3 — type-chips: één actieve stijl (petrol) voor álle chips, nooit een
   eigen kleur per chip, nooit terracotta/amber voor een keuzestand */
#geleideflow .gf-typechip{ border:1px solid var(--line); color:var(--ink-soft); background:var(--wit); }
#geleideflow .gf-typechip:hover{ border-color:var(--petrol); }
#geleideflow .gf-typechip.is-gekozen{ border:1.5px solid var(--petrol); background:rgba(18,113,108,.07); color:var(--petrol-dark); box-shadow:none; font-weight:var(--gew-zwaar); }

/* punten 4–6 — W2: rij met naamveld + groep|persoon-toggle */
.gf-wie-rij{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gf-wie-in{ flex:1 1 auto; min-width:0; }
.gf-wie-toggle{ flex:none; display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pil); overflow:hidden; background:var(--wit); }
.gf-wie-toggle[hidden]{ display:none; }
.gf-wie-toggle.is-vraag{ border-color:var(--petrol); box-shadow:0 0 0 2px rgba(18,113,108,.14); }
.gf-wie-optie{ border:none; background:transparent; color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--t-pil); padding:6px 11px; cursor:pointer; }
.gf-wie-optie + .gf-wie-optie{ border-left:1px solid var(--line); }
.gf-wie-optie.is-actief{ background:rgba(18,113,108,.1); color:var(--petrol-dark); font-weight:var(--gew-vet); }

/* punt 7/8 — inline "gebruik dit als start ▸"-regel bij een veld */
.gf-adopt-regel{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; text-align:left; border:none; background:none; padding:2px 0 6px; cursor:pointer; }
.gf-adopt-lab{ color:var(--petrol-deep); font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet); }
.gf-adopt-ex{ color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--t-klein); }
.gf-adopt-regel:hover .gf-adopt-lab{ text-decoration:underline; }

/* punt 1 — de FAB is verborgen tijdens de wizard */
body.geleideflow-actief #actieknop{ display:none !important; }
/* de wizard is een fullscreen-overname; de mobiele tabbalk dekte anders de
   "Volgende"-knop onderaan af. Tijdens de wizard verbergen we hem — je stapt uit
   via "Sla over" / "Later verder ✕" bovenaan. */
body.geleideflow-actief .c-tabbalk{ display:none !important; }
/* extra ademruimte onder de kaartvoet op een telefoon (veilige zone / home-balk),
   zodat "Vorige/Volgende" nooit tegen de schermrand plakt. */
@media (max-width:699px){
  .c-gflow-inner{ padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* punt 10 — de plan-variant van het gespreksvenster */
.c-gesprek-planhint{ font-size:var(--t-klein); color:var(--ink-soft); margin:2px 0 0; }
.c-gesprek-algevoerd{ align-self:flex-start; border:none; background:none; padding:2px 0; color:var(--petrol-deep); font-family:var(--font-ui); font-size:var(--t-klein); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.c-gesprek-algevoerd:hover{ color:var(--petrol-dark); }
.c-gesprek-planhint[hidden], .c-gesprek-algevoerd[hidden]{ display:none; }

/* R55b — de voorbereidings-banner voor een nog-te-voeren missie-gesprek. Petrol-
   tint (#EAF1F0), géén amber: dit is aanmoediging, geen waarschuwing. Zelfde tint
   als de sectie-nudge. */
.c-gesprek-voorbereid{
  margin:2px 0 4px; padding:11px 13px; border-radius:9px;
  background:#EAF1F0; color:#0E4F4B; font-size:var(--t-klein); line-height:var(--lh-lijst);
}
.c-gesprek-voorbereid[hidden]{ display:none; }

/* ── R57 · de gesprek-wizard ── */
.c-wizbar{ display:flex; gap:6px; margin:2px 0 12px; }
.c-wizbar-seg{ flex:1; height:4px; border-radius:2px; background:var(--line, #DDD8CF); }
.c-wizbar-seg.is-done{ background:var(--petrol-deep, #0E4F4B); }
.c-wizpanels{ display:block; }
.c-wizpanel[hidden]{ display:none; }
.c-wizpanel-kop{ font-size:13px; font-weight:600; color:var(--ink); margin:0 0 9px; }
.c-wiznav-terug{ background:none; border:0; color:var(--ink-soft); font:inherit; font-size:var(--t-klein); cursor:pointer; padding:6px 4px; }
.c-wiznav-terug[hidden]{ display:none; }
.c-wiznav-terug:hover{ color:var(--ink); }

/* R59 — de terugblik/reconciliatie-wizard: hergebruikt de wizard-balk/panelen. */
.c-recon-wizuitleg{ font-size:var(--t-klein); color:var(--ink-soft); margin:0 0 12px; line-height:1.5; }
.c-recon-wizleeg{ font-size:var(--t-klein); color:var(--ink-soft); background:var(--cream2); border:1px dashed var(--line); border-radius:var(--r-kaart, 10px); padding:14px 16px; line-height:1.5; }
/* stap "het geheel": per groep een kopblok met teller + agent-afronding */
.c-recon-geheel{ display:flex; flex-direction:column; gap:12px; }
.c-recon-gehgroep{ background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-kaart, 10px); padding:12px 14px; }
.c-recon-gehgroep-kop{ font-size:14px; font-weight:var(--gew-vet); color:var(--ink); }
.c-recon-gehgroep-tel{ font-size:var(--t-pil); color:var(--ink-soft); margin-top:2px; }
.c-recon-gehtekst{ font-size:var(--t-klein); color:var(--ink); margin:8px 0 0; line-height:1.5; }
/* FB-R11 — beeld van de subgroepen (aantallen + kleur, geen namen) en de houding
   van de groep tov de change, zoals in het rapport, op het eerste wizard-scherm. */
.c-recon-geh-cap{ font-size:var(--t-mini, 11px); font-weight:var(--gew-vet); letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); margin:12px 0 6px; }
.c-recon-geh-balk{ display:flex; align-items:flex-end; gap:8px; min-height:46px; }
.c-recon-geh-kolom{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.c-recon-geh-bar{ width:24px; border-radius:4px 4px 0 0; background:var(--line); }
.c-recon-geh-bar[data-kleur="rood"]{ background:var(--rood, #C0563A); }
.c-recon-geh-bar[data-kleur="geel"]{ background:var(--geel, #D9A63C); }
.c-recon-geh-bar[data-kleur="groen"]{ background:var(--groen, #2C8A6B); }
.c-recon-geh-bar[data-kleur="neutraal"]{ background:var(--line, #DDD8CF); }
.c-recon-geh-bartel{ font-size:var(--t-mini, 11px); color:var(--ink-soft); }
.c-recon-geh-trede{ display:flex; gap:4px; }
.c-recon-geh-tredevlak{ flex:1; height:12px; border-radius:3px; opacity:.28; }
.c-recon-geh-tredevlak[data-kleur="rood"]{ background:var(--rood, #C0563A); }
.c-recon-geh-tredevlak[data-kleur="geel"]{ background:var(--geel, #D9A63C); }
.c-recon-geh-tredevlak[data-kleur="groen"]{ background:var(--groen, #2C8A6B); }
.c-recon-geh-tredevlak.is-aan{ opacity:1; }
/* stap "bevestig": teller + opsomming van gekozen voorstellen */
.c-recon-bevtel{ font-size:14px; font-weight:var(--gew-vet); color:var(--petrol-deep); margin:6px 0 10px; }
.c-recon-bevlijst{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.c-recon-bevlijst li{ font-size:var(--t-klein); color:var(--ink); line-height:1.45; }
/* input-only onderwerpen: geen keuze, alleen huidige waarde + bespreekbaar-chip */
.c-recon-cregel.is-input{ opacity:.92; }
.c-recon-cstand.is-input{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-recon-bron.is-input{ color:var(--ink-soft); background:var(--cream2); border:1px dashed var(--line); }
.c-reconcil-rij.is-input .c-reconcil-standlabel{ color:var(--ink-soft); }
.c-reconcil-herkblok.is-input{ border-left:3px solid var(--line); background:var(--cream2); }
/* overzicht-stap */
.c-wizover-rij{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line, #EFEBE3); }
.c-wizover-rij:first-child{ border-top:0; }
.c-wizover-lab{ flex:none; width:110px; font-size:12px; font-weight:600; color:var(--petrol-deep, #0E4F4B); }
.c-wizover-val{ flex:1; min-width:0; font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
.c-wizover-val.is-leeg{ color:var(--ink-soft); font-style:italic; }
.c-wizover-wijzig{ flex:none; background:none; border:0; color:var(--petrol-deep, #0E4F4B); font:inherit; font-size:var(--t-mini, 11px); font-weight:600; cursor:pointer; }
/* risico-stap */
.c-wizrisico-kaart{ border:1px solid var(--line, #DDD8CF); border-radius:10px; background:#fff; padding:11px 14px; margin-top:8px; }
.c-wizrisico-kaart.is-leeg{ opacity:.72; }
.c-wizrisico-kop{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.c-wizrisico-naam{ font-size:12.5px; font-weight:600; color:var(--ink); }
.c-wizrisico-nu{ font-size:11px; color:var(--ink-soft); }
.c-wizrisico-wissel{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; }
.c-wizrisico-lab{ font-size:11px; color:var(--ink-soft); flex:none; }
.c-wizrisico-kaart .c-veldvak-invoer{ margin-top:8px; }
.c-wizrisico-weg{ background:none; border:0; color:var(--ink-soft); font:inherit; font-size:12px; cursor:pointer; margin-top:4px; }
.c-wizrisico-nieuwknop{ display:block; width:100%; margin-top:10px; padding:10px 14px; border:1.5px dashed var(--line-strong, #B9B4AA); border-radius:10px; background:none; color:var(--petrol-deep, #0E4F4B); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; text-align:left; }
.c-wizrisico-nieuwknop:hover{ background:var(--vul-petrol, #EAF1F0); }

/* ronde 41 — de expliciete stand-pil (segment-toggle) bovenaan het venster.
   Twee helften; de actieve krijgt de terracotta-vulling. */
/* mobiel: het datum-label verschijnt enkel in de plan-stand (syncModus zet
   [hidden]); een beetje lucht erboven, geen lucht eronder naar het veld. */
.c-gesprek-datumlabel.is-mob{ margin-top:4px; }
.c-gesprek-datumlabel.is-mob[hidden]{ display:none; }

.c-gesprek-modus{ display:inline-flex; align-self:flex-start; gap:0; border:1px solid var(--rand); border-radius:999px; background:var(--cream2); padding:2px; }
.c-gesprek-modus-opt{ appearance:none; border:none; background:none; cursor:pointer; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:600; color:var(--ink-soft); padding:5px 14px; border-radius:999px; line-height:1; transition:background .12s, color .12s; }
.c-gesprek-modus-opt:hover{ color:var(--petrol-deep); }
.c-gesprek-modus-opt.is-aan{ background:var(--terra); color:#fff; }

/* de "na het gesprek"-sectie: oogst + bewijs onder één inklapbare kop. In de
   gevoerd-stand valt de kop weg en staat de body altijd open. */
.c-gesprek-na{ display:flex; flex-direction:column; gap:var(--sp-6); }
.c-gesprek-na-kop{ display:flex; align-items:center; gap:6px; align-self:flex-start; border:none; background:none; padding:2px 0; cursor:pointer; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:600; letter-spacing:.02em; color:var(--ink-soft); text-transform:uppercase; }
.c-gesprek-na-kop:hover{ color:var(--petrol-deep); }
.c-gesprek-na-chev{ font-size:10px; color:var(--ink-soft); }
.c-gesprek-na-body{ display:flex; flex-direction:column; gap:var(--sp-6); }
/* plan-stand: kop zichtbaar, body gedimd én ingeklapt (uitklapbaar als voorbeeld) */
.c-gesprek-na.is-gepland .c-gesprek-na-body{ display:none; opacity:.55; }
.c-gesprek-na.is-gepland.is-open .c-gesprek-na-body{ display:flex; }
/* gevoerd-stand: geen kop-chroom, body altijd open */
.c-gesprek-na.is-gevoerd .c-gesprek-na-kop{ display:none; }
.c-gesprek-na.is-gevoerd .c-gesprek-na-body{ display:flex; opacity:1; }

/* ── W6 (frame 32w6): de donkere kaart, miniatuur links, acties rechts ── */
#geleideflow[data-donker] .c-gflow-inner{ background:var(--schil); box-shadow:0 24px 60px rgba(0,0,0,.45); }
#geleideflow[data-donker] .c-gflow-kop{ background:transparent; }
#geleideflow[data-donker] .c-gflow-voet{ background:transparent; border-top-color:rgba(127,196,190,.2); }

/* punt 13 — de eerste-beweging-regel onder de kop */
.gf-beweging{ font-size:var(--t-klein); color:var(--petrol-light); background:rgba(127,196,190,.1); border:1px solid rgba(127,196,190,.22); border-radius:var(--r-s); padding:8px 12px; margin:0 0 12px; }

/* punt 15 — de inline trajectnaam-vraag boven de miniatuur (zonder naam) */
.gf-naamvraag{ margin:0 0 14px; padding:12px 14px; border-radius:var(--r-s); background:rgba(255,255,255,.05); border:1px solid rgba(250,248,245,.16); }
.gf-naamvraag-q{ display:block; font-family:var(--font-ui); font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--cream); margin-bottom:2px; }
.gf-naamvraag-h{ font-size:var(--t-pil); color:rgba(250,248,245,.7); margin-bottom:8px; }

/* punt 12 — geen scroll op 1280×800: miniatuur links, acties in een kolom rechts
   (naar je dashboard primair bovenaan, download secundair, dan het ritme-blok) */
#geleideflow .gf-sb-layout{ display:flex; gap:20px; align-items:flex-start; margin-top:8px; }
#geleideflow .gf-sb-mini{ flex:none; width:150px; height:213px; margin:0; padding:0; border:none; border-radius:5px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.35); cursor:pointer; }
#geleideflow .gf-sb-frame{ width:340px; height:483px; border:0; border-radius:0; background:#fff; box-shadow:none; transform:scale(.441); transform-origin:top left; pointer-events:none; }
#geleideflow .gf-sb-acties{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
#geleideflow .gf-sb-naar{ order:0; align-self:stretch; margin:0; text-align:center; background:var(--cream); color:var(--petrol-dark); }
#geleideflow .gf-sb-naar:hover{ background:var(--wit); }
#geleideflow .gf-sb-download{ order:1; align-self:stretch; margin:0; background:transparent; color:var(--cream); border:1px solid rgba(250,248,245,.35); font-weight:var(--gew-vet); }
#geleideflow .gf-sb-download:hover{ background:rgba(250,248,245,.08); }
#geleideflow .gf-sb-download:disabled{ opacity:.4; cursor:not-allowed; }
#geleideflow .gf-sb-download:disabled:hover{ background:transparent; }
#geleideflow .gf-sb-ritme{ order:2; margin:2px 0 0; }

/* punt 12 — de volledige preview-overlay (klik op de miniatuur) */
.gf-sb-overlay{ position:fixed; inset:0; z-index:80; background:rgba(10,57,54,.82); display:flex; align-items:center; justify-content:center; padding:24px; }
.gf-sb-overlay-inner{ position:relative; width:min(680px,92vw); height:min(88vh,920px); background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.gf-sb-overlay-frame{ width:100%; height:100%; border:0; background:#fff; }
.gf-sb-overlay-x{ position:absolute; top:10px; right:12px; z-index:1; width:32px; height:32px; border:none; border-radius:50%; background:rgba(10,57,54,.75); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.gf-sb-overlay-x:hover{ background:var(--petrol-dark); }

/* mobiel — de kaart vult het scherm, de voet plakt onderaan (punt 0) */
@media (max-width:699px){
  #geleideflow{ padding:0; align-items:stretch; }
  #geleideflow .c-gflow-merk{ display:none; }
  #geleideflow .c-gflow-inner{ max-width:none; width:100%; min-height:100vh; max-height:none; border-radius:0; }
  #geleideflow .gf-sb-layout{ flex-direction:column; align-items:center; }
  #geleideflow .gf-sb-acties{ width:100%; }
}

/* ── Ronde 30 eind-oplevering — FAB-stem-suggestie + sessie overslaan ── */
.c-fabmenu-context.is-suggestie{ color:var(--geel-tekst); background:var(--vul-amber-zacht); border-radius:var(--r-s); }
.c-dg-overslaan{ border:none; background:none; color:var(--ink-soft); font-size:var(--t-pil); cursor:pointer; padding:0; }
.c-dg-overslaan:hover{ color:var(--petrol-deep); text-decoration:underline; }

/* ── C4 — de 1-op-1 persoon/groep-kiezer in het rapport-export-venster ── */
.c-rapport-kiezer{ background:var(--vul-petrol); border:1px solid var(--petrol); border-radius:var(--r-m); padding:12px 14px; margin:12px 0; }
.c-rapport-kiezer-kop{ font-weight:var(--gew-vet); color:var(--petrol-deep); font-size:var(--t-klein); }
.c-rapport-kiezer-uitleg{ font-size:var(--t-pil); color:var(--ink-soft); margin:3px 0 8px; }
.c-rapport-kiezer-veld{ width:100%; border:1px solid var(--line); border-radius:var(--r-s); padding:7px 9px; font-size:var(--t-klein); background:var(--wit); }
.c-rapport-kiezer-wacht{ font-size:var(--t-pil); color:var(--geel-tekst); margin:8px 0 0; }
.c-knop.is-uit{ opacity:.45; cursor:not-allowed; }

/* ═══════ Feedback-batch — kleine element-stijlen ═══════ */
/* §10c n.v.t.-kruis + gedimde n.v.t.-lens */
.c-lens-nvt-kruis{ margin-left:8px; color:var(--ink-soft); cursor:pointer; font-size:11px; }
.c-lens-nvt-kruis:hover{ color:var(--terra-tekst); }
.c-lens-rij[data-staat="nvt"]{ opacity:.55; }
/* 16 klikbare gesprek-rij in de missie-shell */
.c-gesprek-rij.is-klik{ display:block; width:100%; text-align:left; border:none; background:var(--cream2); border-radius:var(--r-s); padding:9px 12px; cursor:pointer; font:inherit; font-size:var(--t-klein); }
.c-gesprek-rij.is-klik:hover{ background:var(--vul-petrol); }
/* R55a — verrijkte gesprek-rij: stip · (onderwerp + meta) · ▸ of vul-aan-knop. */
.c-gesprek-rij.is-verrijkt{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.c-gesprek-rij-stip{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--petrol, #12716C); }
.c-gesprek-rij-stip.is-amber{ background:var(--amber, #D9A63C); }
.c-gesprek-rij-kern{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.c-gesprek-rij-ond{ color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-gesprek-rij-meta{ color:var(--ink-soft); font-size:var(--t-mini, 11px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-gesprek-rij-car{ flex:none; color:var(--ink-soft); font-size:var(--t-mini, 11px); }
.c-gesprek-rij-vulaan{ flex:none; font-size:var(--t-mini, 11px); font-weight:600; color:#fff; background:var(--terra); border-radius:999px; padding:5px 13px; }
/* R55a — de nudge boven de gesprek-lijst: petrol-tint (#EAF1F0), geen border, met
   een tweede regel die de openstaande missievragen citeert. */
.c-gesprek-nudge{ margin:2px 0 8px; padding:9px 11px; border-radius:9px; background:#EAF1F0; color:#0E4F4B; font-size:var(--t-klein); line-height:var(--lh-lijst); }
.c-gesprek-nudge-kop b{ font-weight:600; }
.c-gesprek-nudge-hint{ color:#12716C; margin-top:2px; }
/* R55b mobiel — de vul-aan-knop zakt onder de metaregel, met een 44px raakvlak. */
@media (max-width:700px){
  .c-gesprek-rij-vulaan{ margin-left:19px; margin-top:6px; padding:11px 15px; }
}
/* 19 klikbare opslagstatus */
.c-opslagstatus.is-klik{ cursor:pointer; }
.c-opslagstatus.is-klik:hover{ text-decoration:underline; }
/* 20 logo als knop (reset) — kleur erven van het zijmenu (--op-vol, licht) en
   de masthead-maten van de basis-.c-merk behouden; een <button> erft standaard
   géén color/padding, waardoor het wordmerk zwart werd en de uitlijning brak. */
.c-merk{ border:none; background:none; cursor:pointer; display:flex; align-items:center; gap:var(--sp-5); padding:0 var(--sp-10) var(--sp-9); text-align:left; color:inherit; font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-merk); }
/* Het logo en het woordmerk horen bij elkaar; het app-label zoekt de andere kant
   van de regel. Met één gap voor allebei liep de rij over: 20+34+10+87+10+92+20
   = 273 in een menu van 264, en dan eet de browser stil de padding op — precies
   het soort krapte dat je pas ziet als een taal één letter langer wordt. De gap
   staat daarom op het woordmerk en niet op de rij, en het label eindigt op de
   12px-gutter van de bestandskop eronder in plaats van op de 20px van de regel.
   Zo blijft er ruimte over in plaats van dat het net past. */
.c-merk{ column-gap:0; padding-right:var(--sp-6); }
.c-merk .c-merk-woord{ margin-left:var(--sp-5); }

/* FB-13: de veld-flits bij een "vul eerst X in"-validatie — korte amber ring. */
@keyframes veldflits{ 0%{ box-shadow:0 0 0 0 var(--amber-rand); } 30%{ box-shadow:0 0 0 3px var(--amber-rand); } 100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); } }
.is-veldflits{ animation:veldflits 1.4s ease; border-color:var(--amber-rand) !important; }

/* ═══════ Feedback-batch 2 — wegwijzers + stem-herkomst ═══════ */
/* 9 herkomst-verwijzing op de stem-suggestie */
.c-missie-stemsug-herkomst{ display:block; margin-top:2px; border:none; background:none; color:var(--petrol-deep); font-size:var(--t-pil); cursor:pointer; padding:0; text-align:left; }
.c-missie-stemsug-herkomst:hover{ text-decoration:underline; }
/* 22 wegwijzer op de designgroep-kaart (terracotta-gestreept, FAB-suggestie-stijl) */
.c-dg-wegwijzer{ display:block; width:100%; text-align:left; border:1px dashed var(--terra); background:var(--vul-terra-zacht); color:var(--terra-tekst); border-radius:var(--r-m); padding:8px 12px; font-size:var(--t-klein); cursor:pointer; margin:2px 0 4px; }
.c-dg-wegwijzer:hover{ background:var(--vul-terra); }
/* 30a — suggestie-strook (FAB-suggestie-conventie): stippen vóór de tekst */
.c-dg-suggestie{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:1px dashed #C87941; background:rgba(200,121,65,.07); color:var(--terra-tekst); border-radius:var(--r-m); padding:8px 12px; font-size:var(--t-klein); cursor:pointer; margin:2px 0 4px; }
.c-dg-suggestie:hover{ background:rgba(200,121,65,.12); }
.c-dg-suggestie-stippen{ display:inline-flex; align-items:center; gap:4px; flex:none; }
.c-dg-suggestie-stip{ width:9px; height:9px; border-radius:50%; background:#C9C2B4; }
.c-dg-suggestie-stip[data-stand="stevig"]{ background:#D9A63C; }
.c-dg-suggestie-stip[data-stand="ingrijpend"]{ background:#C0563A; }
.c-dg-suggestie-tekst{ flex:1; min-width:0; }
/* 22 designgroep-stand op de map-kop */
.c-map-dgkop{ display:block; border:none; background:none; color:var(--petrol-deep); font-size:var(--t-klein); cursor:pointer; padding:0 0 10px; text-align:left; }
.c-map-dgkop:hover{ text-decoration:underline; }

/* 8: alle lege staten consistent gecentreerd + begrensd (gelijk aan de
   missies-variant), zodat de gesprekken-legestaat dezelfde layout krijgt. */
.c-legestaat{ max-width:560px; margin-left:auto; margin-right:auto; }

/* Mobiel: de lege staat (Gesprekken/Risico's) is een flex-item van het bord.
   Zonder min-width:0 kan het niet krimpen onder de min-content van de gedempte
   voorbeeldrijen, en dan loopt de hele tab over de schermrand (de kop, de
   uitleg én de rijen worden rechts afgesneden). We geven de hele keten
   krimp-ruimte en zetten de rand-padding smaller, zodat de voorbeeldrijen hun
   eigen ellipsis kunnen tonen in plaats van de tab breder te duwen. */
@media (max-width:699px){
  .c-legestaat{ min-width:0; width:100%; max-width:100%; padding-left:var(--sp-5); padding-right:var(--sp-5); }
  .c-legestaat-uit{ max-width:100%; }
  .c-legestaat-voorproef, .c-legestaat-vbrijen{ min-width:0; max-width:100%; }
  .c-legestaat-vbrijen > *{ min-width:0; max-width:100%; }
  .c-legestaat-vbrijen .c-risbord-rij, .c-legestaat-vbrijen .c-risbord-hoofd{ min-width:0; max-width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   §6u (#175) — risico-register per cel: teller, cel-popup, impact×kans-grid
   en de "Alle risico's"-weergave. Nieuw blok, niets hierboven aangepast.
   De weging-tint bouwt op --rood (rgb 192,86,58), gelijk aan de
   --vul-rood-conventie elders; werkt in licht én donker. Getallen blijven
   voor de gebruiker onzichtbaar — data-w stuurt enkel de kleurintensiteit.
   ════════════════════════════════════════════════════════════════════ */

/* ── de teller op een heatmap-cel ── */
.c-stap .heat td.hm-td{ position:relative; }
.risico-teller{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:var(--gew-vet); line-height:1;
  color:var(--petrol-dark);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:transform var(--duur-kort), border-color var(--duur-kort);
}
.risico-teller:hover{ transform:scale(1.08); border-color:var(--rood); }
.risico-teller[data-n="0"]{ color:var(--ink-soft); }

/* ── de cel-popup: de risico-lijst (in het detailvenster, dus ongescoped) ── */
.risico-lijst{ display:flex; flex-direction:column; gap:var(--sp-6); }
.risico-leeg{
  margin:0; padding:var(--sp-5) 0;
  font-size:var(--t-body); color:var(--ink-soft);
}
/* 32h — het open (te bewerken) risico: links de velden, rechts de matrix, een
   onderregel met de actie-stand + verwijderen. De zwaarste combo krijgt de
   rode linkerrand als enige gewichtssignaal buiten de matrix. */
.risico-item{
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:var(--r-l);
  padding:var(--sp-7) var(--sp-6);
  background:var(--wit);
  display:flex; flex-direction:column;
}
.risico-item[data-zwaarst="1"]{ border-left-color:var(--rood); }
.risico-item-body{ display:flex; align-items:flex-start; gap:var(--sp-6); }
.risico-velden{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.risico-veld{ display:flex; flex-direction:column; gap:var(--sp-1); }
.risico-veld-lab{
  font-size:var(--t-mini); font-weight:var(--gew-zwaar);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.risico-veldrij{ display:flex; gap:var(--sp-4); }
.risico-veldrij .risico-veld{ flex:1 1 0; min-width:0; }
.risico-tekst,.risico-meta-inv{
  width:100%; min-width:0;
  padding:var(--sp-4) var(--sp-5);
  font-size:var(--t-klein); color:var(--ink);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
}
.risico-tekst{ font-size:var(--t-body-plus); }
.risico-tekst:focus,.risico-meta-inv:focus{ outline:none; border-color:var(--rood); }
.risico-ik-blok{ flex:none; display:flex; flex-direction:column; align-items:center; }
.risico-onderregel{
  display:flex; align-items:center; gap:var(--sp-5);
  margin-top:var(--sp-5);
  border-top:1px solid #EFEBE3;
  padding-top:var(--sp-4);
  font-size:var(--t-pil);
}
.risico-onderregel .risico-actie{ flex:0 1 auto; min-width:0; font-size:var(--t-pil); }
.risico-weg{
  margin-left:auto; flex:none;
  padding:0; width:auto; height:auto;
  font-size:13px; line-height:1;
  color:var(--ink-soft);
  background:none; border:none; cursor:pointer;
}
.risico-weg:hover{ color:var(--rood); }

/* ── 37a — de open-staat van de Risico's-tab: volwaardige bewerk-in-de-lijst ──
   De 32h-editor krijgt in de Risico's-tab een petrol omranding (het is de actieve,
   bewerkbare kaart), een context-rij (Groep + Gekoppeld aan) en een voetregel met
   verwijder-tekstlink + autosave-hint + inklap-chevron i.p.v. de losse ✕. */
.c-risbord-open .risico-item{ border-color:var(--petrol); border-left-color:var(--petrol); }
.c-risbord-open .risico-item[data-zwaarst="1"]{ border-left-color:var(--rood); }
/* het sub-woord naast een veldlabel ("· over wie gaat het") — stil, niet in caps */
.risico-veld-sub{ text-transform:none; letter-spacing:0; font-weight:var(--gew-normaal); color:var(--ink-soft); }
/* de context-selects volgen de veld-inputs */
.risico-context-sel{
  width:100%; min-width:0;
  padding:var(--sp-4) var(--sp-5);
  font-size:var(--t-klein); color:var(--ink);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  cursor:pointer;
}
.risico-context-sel:focus{ outline:none; border-color:var(--petrol); }
/* de actie-stand op een eigen rij, met de scheidingslijn erboven */
.risico-actierij{
  margin-top:var(--sp-5);
  border-top:1px solid #EFEBE3;
  padding-top:var(--sp-4);
  font-size:var(--t-pil);
}
.risico-actierij .risico-actie{ font-size:var(--t-pil); }
/* de voetregel: verwijder-tekstlink links, autosave-hint + inklap-chevron rechts */
.risico-voet{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-4);
}
.risico-voet-rechts{ margin-left:auto; display:inline-flex; align-items:center; gap:var(--sp-4); }
.risico-autosave{ font-size:var(--t-meta); color:var(--ink-soft); }
.risico-inklap{ font:inherit; font-size:var(--t-meta); color:var(--ink-soft); background:none; border:0; padding:2px var(--sp-2); cursor:pointer; }
.risico-inklap:hover{ color:var(--petrol); }
.risico-verwijderlink{
  font:inherit; font-size:var(--t-meta); color:var(--rood);
  background:none; border:0; padding:0; cursor:pointer;
}
.risico-verwijderlink:hover{ text-decoration:underline; }
/* inline bevestiging "Zeker? verwijder · behoud" */
.risico-verwijderbev{ display:inline-flex; align-items:center; gap:var(--sp-3); font-size:var(--t-meta); }
.risico-verwijderbev-q{ color:var(--ink-soft); }
.risico-verwijderbev-ja{ font:inherit; font-size:var(--t-meta); color:var(--rood); background:none; border:0; padding:0; cursor:pointer; font-weight:var(--gew-zwaar); }
.risico-verwijderbev-nee{ font:inherit; font-size:var(--t-meta); color:var(--ink-soft); background:none; border:0; padding:0; cursor:pointer; }
.risico-verwijderbev-ja:hover,.risico-verwijderbev-nee:hover{ text-decoration:underline; }
/* mobiel — 37a: de open-staat stapelt (velden vol, context-rij onder elkaar) */
@media (max-width:699px){
  .c-risbord-open .risico-veldrij{ flex-direction:column; gap:var(--sp-4); }
  .c-risbord-open .risico-voet{ flex-wrap:wrap; }
}
.risico-toevoegen{
  align-self:flex-start;
  margin-top:var(--sp-3);
  padding:7px 14px;
  font-size:var(--t-klein);
  color:#8A4A22;
  background:transparent;
  border:1.5px dashed #C87941;
  border-radius:var(--r-pil);
  cursor:pointer;
}
.risico-toevoegen:hover{ background:rgba(192,86,58,.08); }

/* ── de impact × kans 3×3 tik-grid (26px, frame 32h) ──
   impact verticaal (boven = ingrijpend), kans horizontaal (rechts = groot);
   de wegingstint loopt van bijna-wit naar vol --rood; het woordlabel onder het
   grid benoemt de stand. Onaangeraakt = gedimd + "weeg dit risico". */
.risico-ik{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"y grid" ". x" ". lab";
  justify-content:center;
  align-items:center;
  gap:var(--sp-2) var(--sp-3);
  width:max-content;
}
.risico-ik-asY{
  grid-area:y;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9px; font-weight:var(--gew-zwaar);
  letter-spacing:.08em; text-transform:uppercase;
  color:#8A867E;
}
.risico-ik-asX{
  grid-area:x; text-align:center; padding-left:14px;
  font-size:9px; font-weight:var(--gew-zwaar);
  letter-spacing:.08em; text-transform:uppercase;
  color:#8A867E;
}
.risico-ik-lab{
  grid-area:lab; text-align:center; padding-left:14px;
  font-size:10px; font-weight:var(--gew-vet); color:#8A4A22;
}
.risico-ik-lab[data-leeg="1"]{ color:var(--ink-soft); font-weight:400; font-style:italic; }
.risico-ik-grid{
  grid-area:grid;
  display:grid;
  grid-template-columns:repeat(3,26px);
  grid-template-rows:repeat(3,26px);
  gap:3px;
}
.risico-ik[data-leeg="1"] .risico-ik-grid{ opacity:.55; }
.risico-ik-cel{
  border:none;
  border-radius:5px;
  background:rgba(192,86,58,.05);
  cursor:pointer;
  transition:background var(--duur-kort), outline-color var(--duur-kort);
}
.risico-ik-cel[data-w="1"]{ background:rgba(192,86,58,.05); }
.risico-ik-cel[data-w="2"]{ background:rgba(192,86,58,.10); }
.risico-ik-cel[data-w="3"]{ background:rgba(192,86,58,.18); }
.risico-ik-cel[data-w="4"]{ background:rgba(192,86,58,.18); }
.risico-ik-cel[data-w="6"]{ background:rgba(192,86,58,.34); }
.risico-ik-cel[data-w="9"]{ background:rgba(192,86,58,.50); }
.risico-ik-cel:hover{ outline:1.5px solid var(--rood); outline-offset:-1px; }
/* de gekozen cel: donkere outline (frame: outline #0A3936) + vollere tint */
.risico-ik-cel[data-sel="1"]{ outline:2px solid var(--petrol-dark); outline-offset:1px; }
.risico-ik-cel[data-sel="1"][data-w="1"]{ background:rgba(192,86,58,.24); }
.risico-ik-cel[data-sel="1"][data-w="2"]{ background:rgba(192,86,58,.36); }
.risico-ik-cel[data-sel="1"][data-w="3"]{ background:rgba(192,86,58,.46); }
.risico-ik-cel[data-sel="1"][data-w="4"]{ background:rgba(192,86,58,.58); }
.risico-ik-cel[data-sel="1"][data-w="6"]{ background:rgba(192,86,58,.76); }
.risico-ik-cel[data-sel="1"][data-w="9"]{ background:var(--rood); }

/* ── de ingeklapte samenvattingsrij + de read-only mini-matrix (frame 32h) ── */
.risico-rij{
  display:flex; align-items:center; gap:var(--sp-5);
  width:100%; text-align:left;
  padding:var(--sp-5) var(--sp-6);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  cursor:pointer;
}
.risico-rij:hover{ border-color:var(--rood); }
.risico-rij[data-zwaarst="1"]{ border-left:3px solid var(--rood); }
.risico-rij-tekst{
  flex:1 1 auto; min-width:0;
  font-size:var(--t-body-plus); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.risico-rij-woord{ flex:none; font-size:var(--t-pil); color:var(--ink-soft); }
.risico-rij-chev{ flex:none; color:var(--ink-soft); }
.risico-mini{
  flex:none; display:grid;
  grid-template-columns:repeat(3,8px); grid-template-rows:repeat(3,8px); gap:1.5px;
}
.risico-mini-c{ border-radius:2px; background:rgba(192,86,58,.08); }
.risico-mini-c[data-w="1"]{ background:rgba(192,86,58,.05); }
.risico-mini-c[data-w="2"]{ background:rgba(192,86,58,.10); }
.risico-mini-c[data-w="3"]{ background:rgba(192,86,58,.15); }
.risico-mini-c[data-w="4"]{ background:rgba(192,86,58,.15); }
.risico-mini-c[data-w="6"]{ background:rgba(192,86,58,.30); }
.risico-mini-c[data-w="9"]{ background:rgba(192,86,58,.30); }
.risico-mini-c[data-sel="1"]{ background:#C87941; }

/* ── de read-only "Alle risico's"-weergave onder de heatmap ── */
.risico-alle{ margin-top:var(--sp-10); }
.risico-alle-chip{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-6);
  font-size:var(--t-body); font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  background:var(--cream2);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
}
.risico-alle-chip::after{ content:"▾"; font-size:10px; color:var(--ink-soft); }
.risico-alle-chip[aria-expanded="true"]::after{ content:"▴"; }
.risico-alle-paneel{ margin-top:var(--sp-5); }
.risico-alle-paneel[hidden]{ display:none; }
.risico-alle-leeg{ margin:0; font-size:var(--t-body); color:var(--ink-soft); }
.risico-alle-groep{ margin-bottom:var(--sp-6); }
.risico-alle-groepnaam{
  font-size:var(--t-overline); font-weight:var(--gew-vet);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:var(--sp-2);
}
.risico-alle-rij{
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%;
  padding:var(--sp-3) var(--sp-5);
  text-align:left;
  background:var(--wit);
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:var(--r-s);
  margin-bottom:var(--sp-2);
  cursor:pointer;
}
.risico-alle-rij:hover{ border-color:var(--rood); }
.risico-alle-rij[data-zwaarst="1"]{ border-left-color:var(--rood); }
.risico-alle-dot{
  flex:none; width:10px; height:10px; border-radius:var(--r-xs);
  background:var(--geel);
}
.risico-alle-dot[data-w="0"]{ background:var(--line); }
.risico-alle-dot[data-w="1"]{ background:rgba(192,86,58,.28); }
.risico-alle-dot[data-w="2"]{ background:rgba(192,86,58,.40); }
.risico-alle-dot[data-w="3"]{ background:rgba(192,86,58,.52); }
.risico-alle-dot[data-w="4"]{ background:rgba(192,86,58,.64); }
.risico-alle-dot[data-w="6"]{ background:rgba(192,86,58,.80); }
.risico-alle-dot[data-w="9"]{ background:var(--rood); }
.risico-alle-tekst{
  flex:1 1 auto; min-width:0;
  font-size:var(--t-body); color:var(--petrol-dark);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.risico-alle-dim{
  flex:none;
  font-size:var(--t-klein); color:var(--ink-soft);
}
@media(max-width:600px){
  .risico-item-body{ flex-wrap:wrap; }
  .risico-ik-blok{ width:100%; align-items:flex-start; }
}


/* §5b-correctie (missie-shell): compacte taalkiezer in de zijmenu-voet — een
   stille inline "· [taal]" op de privacy-regel i.p.v. een los "Language"-blok. */
.c-modus-footer-rij{ flex-wrap:wrap; }
.c-modus-footer-rij .c-taalkiezer{ margin-left:0; display:inline-flex; align-items:center; }
.c-modus-footer-rij .c-taalkiezer-label{ display:none; }
/* R49 §3b — leesbare taalkiezer-pill in de petrol zijmenu-voet: donkere tekst op
   cream, óók voor de native opties (die anders de lichte schil-kleur erven en
   licht-op-wit onleesbaar worden). */
.c-modus-footer-rij .c-taalkiezer-select{ background:var(--cream); border:1px solid var(--op-lijn);
  border-radius:var(--r-s); color:var(--ink); font-size:11.5px; padding:3px 7px; cursor:pointer; font-family:inherit; }
.c-modus-footer-rij .c-taalkiezer-select:hover{ border-color:var(--petrol-light); }
.c-modus-footer-rij .c-taalkiezer-select option{ color:var(--ink); background:var(--cream); }
/* §5b-correctie: "+ gesprek" als stille actie onder in de Gesprekken-kaart
   (geen zwevende FAB meer). */
.c-sectie-plus{ margin-top:8px; border:none; background:none; padding:0; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar); color:var(--petrol); cursor:pointer; }
.c-sectie-plus:hover{ text-decoration:underline; }

/* ── §M+§N-merge (#192/#194): "Impact & readiness per groep" (frame 32g) ──
   Eén verkenning-grid: kolommen groep · impact-stippen · readiness-stippen ·
   landt · risico-teller. grid-template-columns wordt inline gezet (JS); hier
   staat de rest van de tabel-look, de legende en de popup-secties (32f/32h). */
/* R85 — de impact&readiness-kaart vult de beschikbare breedte (de middenkolom),
   net als het dashboard; geen 660px-cap meer die lege flanken liet. */
/* R77 dev-export — geen dubbele kaart: het stap-blok (article.kaart) IS al de kaart.
   De .c-ir-wrapper draagt daarom géén eigen achtergrond/rand/schaduw/padding meer —
   dat was een tweede crème kaart-in-kaart. Het WITTE grid is het enige omkaderde
   blok, direct op het stap-blok; legenda + signaal staan eronder op datzelfde vlak. */
.c-impactmatrix.c-ir{ max-width:900px; width:100%; box-sizing:border-box; background:none; border:0; border-radius:0; box-shadow:none; padding:0; }
.c-ir-kaartkop{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.c-ir-eyebrow{ font-size:10.5px; font-weight:var(--gew-zwaar); letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase; }
.c-ir-kopacties{ margin-left:auto; display:flex; align-items:baseline; gap:14px; }
.c-ir-plusdomein, .c-ir-alle{ background:none; border:none; padding:0; font-family:var(--font-ui); font-size:11.5px; color:#0E4F4B; cursor:pointer; }
.c-ir-plusdomein:hover, .c-ir-alle:hover{ text-decoration:underline; }
.c-ir-scroll{ overflow-x:auto; }
.c-ir-grid{ display:grid; align-items:stretch; border:1px solid var(--line); border-radius:10px; background:var(--wit); overflow:hidden; font-size:11px; }
.c-ir-kop{ padding:8px 12px; color:#8A867E; border-bottom:1px solid #EFEBE3; align-self:stretch; }
.c-ir-kop-risico{ text-align:right; }
.c-ir-hoek{ border-bottom:1px solid #EFEBE3; }
.c-ir-groep{ justify-self:stretch; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid #EFEBE3; margin:0; padding:8px 12px; font-family:var(--font-ui); font-size:11px; font-weight:var(--gew-zwaar); color:var(--ink); cursor:pointer; }
.c-ir-groep:hover{ color:var(--petrol); }
.c-ir-serie{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 12px; border-bottom:1px solid #EFEBE3; }
.c-ir-serie .c-impact-dot{ width:11px; height:11px; }
.c-ir-meer{ font-size:10px; color:var(--ink-soft); margin-left:2px; }
/* De zichtbare readiness-stip (9px vol / 1.5px ring) leeft op de .c-stip binnenin;
   deze regel is enkel het klik-vlak (zie de gedeelde .c-stip bij taak 36f). */
.c-ir-rdot{ width:11px; height:11px; border-radius:50%; border:1px solid #CFC9BE; background:var(--wit); padding:0; cursor:pointer; }
.c-ir-rdot[data-k="groen"]{ background:var(--groen); border-color:var(--groen); }
.c-ir-rdot[data-k="geel"]{ background:var(--geel); border-color:var(--geel); }
.c-ir-rdot[data-k="rood"]{ background:var(--rood); border-color:var(--rood); }
.c-ir-rdot[data-suggestie="1"]{ border-style:dashed; }
.c-ir-landt{ padding:6px 12px; border-bottom:1px solid #EFEBE3; display:flex; align-items:center; }
.c-ir-landtknop{ background:none; border:none; padding:0; font-family:var(--font-ui); font-size:11px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.c-ir-landtknop.is-gezet{ color:var(--ink); }
.c-ir-landtknop:hover{ color:var(--petrol); }
.c-ir-riskcel{ padding:8px 12px; border-bottom:1px solid #EFEBE3; display:flex; align-items:center; justify-content:flex-end; }
.c-ir-teller{ background:none; border:none; padding:0; font-family:var(--font-ui); font-size:11px; color:var(--ink-soft); cursor:pointer; }
.c-ir-teller.heeft{ color:var(--rood); font-weight:var(--gew-zwaar); }
.c-ir-teller:hover{ text-decoration:underline; }
.c-ir-fabrij{ grid-column:1 / -1; padding:6px 12px 8px; border-bottom:1px solid #EFEBE3; background:rgba(200,121,65,.05); }
.c-ir-fab{ background:none; border:none; padding:0; color:var(--terra); font-family:var(--font-ui); font-size:11px; font-weight:var(--gew-zwaar); cursor:pointer; }
.c-ir-fab:hover{ text-decoration:underline; }
.c-ir-allerisicos{ margin-top:10px; border-top:1px solid #EFEBE3; padding-top:8px; }
.c-ir-alle-rij{ display:flex; gap:10px; font-size:11px; padding:3px 0; }
.c-ir-alle-groep{ font-weight:var(--gew-zwaar); color:var(--ink); min-width:110px; }
.c-ir-alle-tekst{ color:var(--ink-soft); }
.c-ir-alle-leeg{ font-size:11px; color:var(--ink-soft); margin:0; }
.c-ir-leg{ margin-top:12px; display:flex; flex-direction:column; gap:3px; }
.c-ir-leg-rij{ font-size:10.5px; color:#8A867E; }
/* de groepsrij is op desktop transparant (display:contents): haar cellen doen
   gewoon mee in het grid. De regel-labels leven dan verborgen in de DOM. */
.c-ir-rij{ display:contents; }
.c-ir-vlabel{ display:none; }
@media (max-width:699px){
  /* Fable-UI-beslissing 3 — op de telefoon wordt de dichte tabel een gestapelde
     kaart per groep (géén horizontale scroll: die zou net readiness/risico's
     verbergen). Elke waarde-cel krijgt een eigen regel met een vast labelkolom. */
  .c-ir-scroll{ overflow-x:visible; }
  .c-ir-grid{ display:block; border:0; background:none; font-size:12px; }
  .c-ir-kop, .c-ir-hoek{ display:none; }
  .c-ir-rij{ display:block; border:1px solid var(--line); border-radius:10px; background:var(--wit); margin-bottom:var(--sp-4); overflow:hidden; }
  .c-ir-groep{ display:block; width:100%; border-bottom:1px solid #EFEBE3; font-size:13px; padding:11px 14px; }
  .c-ir-serie, .c-ir-landt, .c-ir-riskcel{ border-bottom:0; padding:8px 14px; justify-content:flex-start; }
  .c-ir-serie{ flex-wrap:nowrap; }
  .c-ir-vlabel{ display:inline-block; flex:none; width:96px; font-size:var(--t-overline); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
  .c-ir-serie .c-impact-dot, .c-ir-rdot{ width:13px; height:13px; }
  .c-ir-landtknop, .c-ir-teller{ min-height:44px; display:inline-flex; align-items:center; }
  .c-ir-fabrij{ margin:0; border-radius:0; }
  .c-impactmatrix.c-ir{ padding:16px; }
}
/* het samengevoegde popup: twee secties (impact 32f + readiness 32h) */
.c-ir-sectie{ margin:0 0 var(--sp-6); }
.c-ir-sectie:last-child{ margin-bottom:0; }
.c-ir-sectie-kop{ font-family:var(--font-ui); font-size:var(--t-body); font-weight:var(--gew-zwaar); color:var(--ink); margin:0 0 var(--sp-3); padding-bottom:var(--sp-2); border-bottom:1px solid var(--line); }
.c-ir-landtblok{ display:flex; align-items:center; gap:var(--sp-4); margin:var(--sp-3) 0 var(--sp-4); }
.c-ir-landt-lab{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-ir-domeinen{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-ir-overig{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:var(--sp-3); }
.c-ir-overig-lab{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-ir-overig-chip{ background:var(--cream2); border:1px solid var(--line); border-radius:var(--r-pil); padding:4px 12px; font-size:var(--t-pil); color:var(--ink-soft); cursor:pointer; }
.c-ir-overig-chip:hover{ border-color:var(--petrol); color:var(--petrol); }
.c-ir-dim{ padding:var(--sp-4) 0; border-bottom:1px solid var(--line); }
.c-ir-dim:last-child{ border-bottom:none; }
.c-ir-dim-kop{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.c-ir-dim-lab{ font-weight:var(--gew-vet); color:var(--ink); text-transform:capitalize; }
.c-ir-dim-stand{ display:flex; align-items:center; gap:8px; }
.c-ir-dim-standlab{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-ir-risicoregel{ margin-top:var(--sp-3); }
.c-ir-risico-toggle{ background:none; border:none; padding:0; color:var(--petrol); font-size:var(--t-pil); font-weight:var(--gew-vet); cursor:pointer; }
.c-ir-risico-toggle:hover{ text-decoration:underline; }
.c-ir-risico-sub{ margin-top:var(--sp-3); }

/* ═══════════ GO-ronde delta-merge (A·B·D) ═══════════ */
/* ══ delta A → css/componenten.css ══ */

/* #209 — de oogst-/deelbaar-velden en het bewijsblok moeten wijken zolang de
   plan-variant loopt ("al gevoerd?" zichtbaar). gesprek.js zet daarvoor
   .hidden op deze wrappers, maar .c-gesprek-deelbaar / .c-gesprek-bewijs
   dragen display:flex — even specifiek als [hidden], zodat de UA-regel
   [hidden]{display:none} verliest en de velden tóch bleven staan. Deze
   expliciete override (zelfde patroon als .c-gesprek-planhint[hidden] verderop)
   herstelt het verbergen. */
.c-gesprek-deelbaar[hidden], .c-gesprek-bewijs[hidden]{ display:none; }
/* ═══════════ delta B — §P/26 · stakeholdergroep-popup "de mensen centraal" (frame 32i) ═══════════
   Nieuwe gedeelde regels voor componenten.css. Kleuren via tokens (theme-aware);
   de frame-inline-stijlen (12.5px, 7/8px radii) blijven letterlijk overgenomen. */

/* DE GROEP — drie basisvelden op één rij (frame: flex 2 / 1 / 1.4) */
.c-gk-groepgrid{ display:flex; gap:8px; }
.c-gk-groepgrid .gk-cel{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.c-gk-groepgrid .gk-cel:nth-child(1){ flex:2; }
.c-gk-groepgrid .gk-cel:nth-child(3){ flex:1.4; }
.c-gk-groepgrid .gk-cel label{
  font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.c-gk-groepgrid .gk-cel input,
.c-gk-groepgrid .gk-cel select{
  width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:7px;
  background:var(--wit); padding:8px 11px; font-family:var(--font-ui);
  font-size:12.5px; color:var(--ink);
  /* de cellen strekken naar gelijke hoogte; het veld zakt naar de onderkant zodat
     alle drie de velden op één lijn staan, ook als één label over twee regels loopt. */
  margin-top:auto;
}
@media(max-width:560px){
  .c-gk-groepgrid{ flex-wrap:wrap; }
  .c-gk-groepgrid .gk-cel{ flex:1 1 46%; }
}

/* DE MENSEN — het ingesloten hart (#F2EEE7) */
.gk-mensen-host{ display:block; }
.c-mensen-blok{
  border:1px solid var(--line); border-radius:10px; background:var(--cream2);
  padding:13px 15px;
}
.c-mensen-kop{
  font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.08em;
  text-transform:uppercase; color:var(--petrol-dark);
}
.c-mensen-kop-sub{
  font-weight:var(--gew-normaal); text-transform:none; letter-spacing:0; color:var(--ink-soft);
}
/* de volledigheids-stip in een blokkop (ronde 41) — dezelfde indicator als op de
   map, herbruikbaar op elke blokkop in een detail-popup (THE GROUP, THE PEOPLE, …) */
.c-blok-stip{ display:inline-block; vertical-align:middle; margin-right:7px; position:relative; top:-1px; }
.c-mensen-lijst{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }

/* één kandidaat-rij */
.c-mensen-rij{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:8px; background:var(--wit); padding:9px 12px;
}
.c-mensen-rij.is-gedimd{ opacity:.65; }
.c-mensen-info{ flex:1; min-width:0; cursor:pointer; }
.c-mensen-naam{ font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.c-mensen-rol{ font-size:11px; color:var(--ink-soft); }

/* de status-pil, kleur-gecodeerd */
.c-mensen-status{
  display:inline-flex; align-items:center; gap:5px; font-size:11px;
  font-weight:var(--gew-vet); white-space:nowrap; border:0; background:none;
  font-family:var(--font-ui); cursor:pointer; padding:0;
}
.c-mensen-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.c-mensen-status[data-status="voorgedragen"]{ color:var(--ink-soft); }
.c-mensen-status[data-status="voorgedragen"] .c-mensen-dot{ background:var(--line-ghost); }
.c-mensen-status[data-status="gepland"]{ color:var(--geel-tekst); }
.c-mensen-status[data-status="gepland"] .c-mensen-dot{ background:var(--geel); }
.c-mensen-status[data-status="bevestigd"]{ color:var(--groen); }
.c-mensen-status[data-status="bevestigd"] .c-mensen-dot{ background:var(--groen); }
.c-mensen-status[data-status="nietAanvaard"]{ color:var(--ink-soft); }
.c-mensen-status[data-status="nietAanvaard"] .c-mensen-dot{ background:var(--line-ghost); }

/* "→ designgroep ▸" — alleen bij bevestigd */
.c-mensen-dglink{
  font-size:11px; color:var(--petrol-deep); font-weight:var(--gew-vet);
  cursor:pointer; white-space:nowrap; background:none; border:0; padding:0; font-family:var(--font-ui);
}
.c-mensen-dglink:hover{ text-decoration:underline; }

/* "+ kandidaat" — de enige toevoeg-ingang */
.c-mensen-plusrij{ display:flex; gap:6px; }
.c-mensen-plus{
  font-size:var(--t-pil); color:var(--ink-soft); border:1px dashed var(--line-ghost);
  border-radius:var(--r-pil); padding:5px 12px; cursor:pointer; background:transparent; font-family:var(--font-ui);
}
.c-mensen-plus:hover{ color:var(--ink); border-color:var(--ink-soft); }

/* de gesprek/missie-suggestie ín het blok (geen bevestigde tafel-vertegenwoordiging) */
.c-mensen-tafel{
  display:flex; align-items:center; gap:8px; margin-top:10px;
  border-top:1px solid var(--line); padding-top:9px; flex-wrap:wrap;
}
.c-mensen-tafel[hidden]{ display:none; }
.c-mensen-tafel-tekst{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-mensen-tafelknop{
  font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep);
  border:1.5px solid var(--petrol-deep); border-radius:var(--r-pil); padding:5px 12px;
  background:var(--wit); cursor:pointer; font-family:var(--font-ui);
}
.c-mensen-tafelknop:hover{ background:var(--cream2); }

/* de inline kandidaat-editor (geen frame — zie DOORGEVEN) */
.c-mensen-edit{
  position:relative;
  display:flex; flex-direction:column; gap:8px; border:1px solid var(--petrol);
  border-radius:8px; background:var(--wit); padding:10px 12px;
}
/* Ronde 41: de ✕ (verwijderen) zit in de rechter bovenhoek, los van de
   blok-actie-FAB — niet meer op één regel ernaast. */
.c-mensen-edit-wis{ position:absolute; top:5px; right:8px; font-size:13px; line-height:1; padding:2px 4px; z-index:1; }
/* Ronde 41 — de blok-actie-FAB: compacte terracotta "+" in de kop van een blok/
   kaart in een popup. Opent hetzelfde actiemenu als de globale FAB, voorgekoppeld
   aan de context van het blok. Herbruikbaar patroon (schil.js: blokActieFab). */
.c-blok-fab{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:0; background:var(--terra); color:var(--wit);
  font-size:19px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); transition:transform .15s ease;
}
.c-blok-fab:hover{ background:var(--terra-hover); }
.c-blok-fab.is-open{ transform:rotate(45deg); }
/* een compactere variant voor in een blokkop (bv. "THE GROUP") */
.c-blok-fab-kop{ width:24px; height:24px; font-size:16px; }
/* de blokkop met een actie-FAB rechts uitgelijnd */
.gk-deelkop-actie{ display:flex; align-items:center; }
.gk-deelkop-actie .c-blok-fab{ margin-left:auto; }

/* Ronde 41 — het historiek-blok van gekoppelde FAB-items (herbruikbaar patroon:
   persoon, groep, later andere entiteiten, en met een andere renderer een rapport). */
.c-historiek{ margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
.c-historiek-kop{ display:flex; align-items:center; gap:7px; width:100%; background:none; border:0; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-pil); font-weight:var(--gew-zwaar); letter-spacing:.05em;
  text-transform:uppercase; color:var(--petrol-deep); padding:2px 0; }
.c-historiek-chev{ color:var(--ink-soft); font-size:11px; }
.c-historiek-tel{ margin-left:6px; color:var(--ink-soft); font-weight:var(--gew-normaal); }
.c-historiek-body{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.c-historiek-filters{ display:flex; flex-wrap:wrap; gap:6px; }
.c-historiek-chip{ font-size:var(--t-pil); border:1px solid var(--line-sterk); border-radius:var(--r-pil);
  padding:3px 10px; background:transparent; color:var(--ink-soft); cursor:pointer; font-family:var(--font-ui); }
.c-historiek-chip.is-aan{ color:var(--petrol-deep); border-color:var(--petrol); background:var(--vul-petrol); font-weight:var(--gew-vet); }
.c-historiek-leeg{ font-size:var(--t-pil); color:var(--ink-soft); font-style:italic; padding:4px 0; }
.c-historiek-rij{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:1px solid var(--line); border-radius:8px; background:var(--wit); padding:7px 10px; cursor:pointer; font-family:var(--font-ui); }
.c-historiek-rij:hover{ border-color:var(--petrol); background:var(--cream2); }
.c-historiek-soort{ flex:0 0 auto; font-size:10px; font-weight:var(--gew-zwaar); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.c-historiek-titel{ flex:1; min-width:0; font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-historiek-stand{ flex:0 0 auto; font-size:11px; font-weight:var(--gew-vet); }
.c-historiek-stand[data-stand="gepland"]{ color:var(--geel-tekst); }
.c-historiek-stand[data-stand="lopend"]{ color:var(--petrol); }
.c-historiek-stand[data-stand="afgerond"]{ color:var(--groen); }
.c-historiek-datum{ flex:0 0 auto; font-size:11px; color:var(--ink-soft); }
.c-mensen-edit-kop{ display:flex; align-items:center; gap:8px; padding-right:22px; }
.c-mensen-edit-kop > input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:12.5px; font-family:var(--font-ui); }
.c-mensen-edit-klaar{
  border:1px solid var(--petrol); background:var(--wit); color:var(--petrol-deep);
  font-size:var(--t-pil); border-radius:var(--r-pil); padding:4px 12px; cursor:pointer; font-family:var(--font-ui);
}
.c-mensen-edit-klaar:hover{ background:var(--cream2); }
.c-mensen-rolchips{ display:flex; flex-wrap:wrap; gap:6px; }
.c-mensen-rolchip{
  font-size:var(--t-pil); color:var(--ink-soft); border:1px solid var(--line-sterk);
  border-radius:var(--r-pil); padding:4px 12px; cursor:pointer; background:transparent; font-family:var(--font-ui);
}
.c-mensen-rolchip.is-aan{ color:var(--petrol-deep); border-color:var(--petrol); background:var(--vul-petrol); font-weight:var(--gew-vet); }
.c-mensen-toetsen{ display:flex; flex-wrap:wrap; gap:12px; }
.c-mensen-edit-door{ display:flex; align-items:center; gap:8px; }
.c-mensen-edit-doorlabel{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-mensen-edit-door select{ font-size:var(--t-klein); border:1px solid var(--line); border-radius:var(--r-s); padding:5px 8px; font-family:var(--font-ui); }

/* status-keuze venster + bron-picker */
.c-mensen-status-hint{ font-size:var(--t-pil); color:var(--ink-soft); line-height:1.45; margin:8px 0 0; }
.c-mensen-bronlijst{ display:flex; flex-direction:column; gap:6px; }
.c-mensen-bronrij{
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--wit);
  padding:9px 12px; cursor:pointer; font-family:var(--font-ui);
}
.c-mensen-bronrij:hover{ border-color:var(--petrol); background:var(--cream2); }
.c-mensen-bron-soort{
  flex:0 0 auto; font-size:var(--t-pil); font-weight:var(--gew-vet); text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-soft);
}
.c-mensen-bron-label{ flex:1; min-width:0; font-size:var(--t-klein); color:var(--ink); }

/* notitie ingeklapt achter "notitie ▾" */
.c-mensen-notitie{ display:block; }
.c-mensen-notitie-toggle{
  border:0; background:none; padding:0; cursor:pointer; font-family:var(--font-ui);
  font-size:var(--t-pil); color:var(--ink-soft); text-align:left;
}
.c-mensen-notitie-toggle:hover{ color:var(--ink); }
.c-mensen-notitie-sub{ font-size:var(--t-overline); color:var(--ink-soft); }
.c-mensen-notitie-body[hidden]{ display:none; }

/* #200 — zachte markering van hoge-impact-groepen die nog niet aan tafel zitten
   (aangekomen via de dashboard-sprong "bekijk wie je mist"). Geen rand-flits. */
.c-map-rij.is-mist{
  background:var(--vul-amber-zacht); border-color:var(--amber-rand);
  box-shadow:inset 3px 0 0 var(--geel);
}
/* ═══ delta D — nieuwe regels voor de gedeelde css/componenten.css ═══
   Agent D · taken #202 / #205a / #195. Voeg samen met componenten.css. */

/* (verwijderd) #205a terra-ring: risico gebruikt nu de gevulde rode stip
   data-k="risico" (ruling 27d, herzien 9 aug). */

/* ── #205a — het risico-formulier van de FAB (32h-rij + groep/koppel-velden) ──
   Geen eigen frame: volgt het standaard veld-patroon in het detail-venster. */
.risico-fab-veld{ display:flex; flex-direction:column; gap:var(--sp-1); margin:0 0 var(--sp-4); }
.risico-fab-lab{ font-size:var(--t-pil); font-weight:var(--gew-zwaar); letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase; }
.risico-fab-koppel{ font-family:var(--font-ui); font-size:var(--t-body); color:var(--ink); }
.risico-fab-groepchip{ align-self:flex-start; font-size:var(--t-klein); color:var(--ink-soft); background:var(--cream2); border:1px solid var(--line); border-radius:999px; padding:var(--sp-1) var(--sp-3); margin:0 0 var(--sp-4); }

/* ── #195 — de "landt"-stand in de kop-meta van het impact&readiness-popup ──
   Frame 32f: onder de groepsnaam één meta-regel "De impact ... · landt [maand ▾]
   · zet als mijlpaal ▸". De landt-widget staat inline, zonder het blok-kader
   dat hij in sectie 1 had. */
.c-ir-headermeta{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); font-size:var(--t-klein); color:var(--ink-soft); line-height:var(--lh-lijst); margin:0 0 var(--sp-5); }
.c-ir-headermeta-txt{ color:var(--ink-soft); }
.c-ir-headermeta-landt.c-ir-landt{ padding:0; border-bottom:none; gap:var(--sp-2); flex-wrap:wrap; }

/* ═══ 27d-ronde delta-merge (F) ═══ */
/* ═══════════════════════════════════════════════════════════════════════
   Delta F — nieuwe regels bestemd voor de gedeelde css/componenten.css.
   (De owner voegt dit achteraan componenten.css samen; alle regels hier
   winnen dus van eerder in dat bestand.)
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   #196 / 33a §3 · de compacte designgroep-kaart (twee regels)
   #FAF8F5, linksrand 3px petrol #12716C. De modifier overschrijft de witte
   achtergrond van de basis-.c-dg-kaart en zet de twee-regel-layout.
   ─────────────────────────────────────────────────────────────────────── */
.c-dg-kaart-compact{
  background:var(--cream);            /* #FAF8F5 — frame 33a */
  gap:var(--sp-2);
  padding:14px 18px;
}

/* regel 1: naam · meta · sessie-agenda ▸ */
.c-dg-regel1{ display:flex; align-items:baseline; gap:var(--sp-5); flex-wrap:wrap; }
.c-dg-regel1 .c-dg-titel{ flex:none; color:var(--petrol-dark); font-weight:var(--gew-vet); }
.c-dg-regel1 .c-dg-meta{ min-width:0; }

/* "N leden" en het ritme zijn klikbaar (R2 bewerk-op-het-bord) — ze erven de
   meta-tint en tonen hun affordance pas op hover. */
.c-dg-meta-link{
  border:none; background:none; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}
.c-dg-meta-link:hover{ text-decoration:underline; }
.c-dg-meta-sep{ color:inherit; }

.c-dg-agenda-link{
  margin-left:auto; flex:none;
  border:none; background:none; padding:0;
  font-size:var(--t-klein); color:var(--petrol-deep);
  cursor:pointer; white-space:nowrap;
}
.c-dg-agenda-link:hover{ text-decoration:underline; }

/* regel 2: klaar om te bespreken · rapport-vulling · bekijk je rapport ↗ */
.c-dg-regel2{ font-size:var(--t-klein); color:var(--ink); line-height:1.5; }
.c-dg-regel2 b{ font-weight:var(--gew-vet); }
.c-dg-rapport-link{
  border:none; background:none; padding:0;
  font:inherit; color:var(--petrol-deep); cursor:pointer;
}
.c-dg-rapport-link:hover{ text-decoration:underline; }

/* ───────────────────────────────────────────────────────────────────────
   ruling 27d · 32f-kop · compacte "landt" + maandkiezer-popover
   De header-meta draagt alléén "september ▾"; de volledige maandkiezer-widget
   (maandkiezer + de twee mijlpaal-acties) leeft in de popover die op klik opent.
   ─────────────────────────────────────────────────────────────────────── */
.c-ir-headermeta-maand{
  border:none; background:none; padding:0;
  font:inherit; font-weight:var(--gew-vet); color:var(--ink);
  cursor:pointer; white-space:nowrap;
}
.c-ir-headermeta-maand:hover{ text-decoration:underline; }
.c-ir-headermeta-maand.is-gekoppeld{ color:var(--petrol-deep); }

/* de maandkiezer-popover (17d-licht): klein paneel aan de trigger, boven het
   detail-venster (z-detailvenster = 560). */
.c-ir-maandpop-houder{ position:fixed; inset:0; z-index:var(--z-sheet); }
.c-ir-maandpop-sluier{ position:absolute; inset:0; }
.c-ir-maandpop{
  position:fixed; min-width:220px; max-width:min(320px, 92vw);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:0 12px 32px rgba(10,57,54,.18);
  padding:12px 14px;
}
.c-ir-maandpop-kop{
  font-size:var(--t-meta); font-weight:var(--gew-vet); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
}
.c-ir-maandpop-body{ display:flex; flex-direction:column; gap:8px; }
/* R91 — in de landt-popover krijgen het maandveld én de mijlpaal-picker dezelfde
   breedte (volle popover-breedte); het maandveld verliest hier zijn 84px-cap. */
.c-ir-maandpop-body .c-impact-landt,
.c-ir-maandpop-body .c-ir-landt-koppel{ width:100%; max-width:none; box-sizing:border-box; }

/* mobiel: de maandkiezer-popover als bottom-sheet (briefing §3). */
@media (max-width:699px){
  .c-ir-maandpop{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    min-width:0; max-width:none;
    border-radius:var(--r-l) var(--r-l) 0 0;
  }
}

/* ═══ punt 36f — één stip-component voor impact- én readiness-reeksen ═══
   Zelfde diameter, vulling en open-stand (rand #C9C2B4). Het enige toegestane
   verschil zit in het aantal standen: impact 3 (leeg/amber/rood), readiness 4
   (leeg/groen/geel/rood). Gebruikt op het dashboard (33a §6c), in het grid en in
   de 32f-popup. */
.c-stip{ display:inline-block; width:9px; height:9px; border-radius:50%; background:transparent; box-sizing:border-box; vertical-align:middle; }
.c-stip[data-k="leeg"]{ background:transparent; border:1.5px solid #C9C2B4; }
.c-stip[data-k="groen"]{ background:var(--groen); }
.c-stip[data-k="geel"]{ background:var(--geel); }
.c-stip[data-k="amber"]{ background:var(--geel); }
.c-stip[data-k="rood"]{ background:var(--rood); }

/* ═══ 9-aug ronde delta-merge (H·J) ═══ */
/* ═══════════════════════════════════════════════════════════════════
   DELTA H — gedeelde componenten.css-regels (design-leading GO-ronde)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Taak 35 · venster-kop: een header-rechts-actie mag nooit over het kruis ──
   De kop is één flex-rij: titel (groeit) → kop-actie(s) → het kruis als vast
   laatste element, met tussenruimte. De kop-actie draagt de auto-marge die het
   cluster naar rechts duwt; het kruis volgt met een VASTE tussenruimte i.p.v.
   een tweede auto-marge (twee auto-marges zouden om dezelfde vrije ruimte
   vechten). Geen absolute positie → niets overlapt de ×; actie én × zijn elk
   apart klikbaar. Vensters zonder kop-actie blijven ongewijzigd (het kruis houdt
   daar zijn eigen margin-left:auto uit componenten.css). */
.c-venster-kop{ flex-wrap:nowrap; }
.c-venster-kopactie{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-4);
  flex:none;
  margin-left:auto;
}
.c-venster-kopactie > *{ flex:none; }
.c-venster-kop:has(.c-venster-kopactie) .c-venster-sluit{ margin-left:var(--sp-5); }

/* ── Taak 36f · gedeelde stip in het impact/readiness-grid en -popup ──
   De klik-knoppen dragen nu de gedeelde .c-stip (span). De knop is enkel
   klik-vlak — geen eigen schijf, rand of achtergrond meer; de stip binnenin
   tekent de kleur. Zo lezen grid, popup en dashboard dezelfde stip. */
.c-ir-rdot{
  width:auto; height:auto;
  border:0; background:none; padding:2px;
  line-height:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
}
/* sensing-suggestie (nog niet bevestigd) → gestreepte rand op de stip zelf. */
.c-ir-rdot[data-suggestie="1"] .c-stip{ border:1.5px dashed #C9C2B4; }
.c-ir-rdot[data-suggestie="1"] .c-stip[data-k="leeg"]{ border-style:dashed; }
/* De impact-stippenreeks in het grid: knop krimpt mee met de 9px-stip. */
.c-ir-serie .c-impact-dot{ width:auto; height:auto; padding:2px; }

/* ── Taak 36a/36f · de "geen impact"-tik-pillen ──
   Elke pil = domeinnaam + een open ○ (c-stip leeg); tik kleurt in. De naam en
   de stip staan op één lijn; de hint sluit de rij af. */
.c-ir-overig-chip{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.c-ir-overig-hint{ font-size:var(--t-pil); color:var(--ink-soft); }
/* ── Delta J · ruling §U punt 31 "de merge is de muur" ──
   De stille aankondiging-vooraf-regel (nooit een verrassing): op de missie-
   aanmaakvorm (velden/missies.js) en op het export-scherm van de agent-shell
   (agentshell.js). Zelfde rustige toon als de rapport-watermerkregel; alleen
   zichtbaar zolang er geen Team-licentie is. */
.c-agentshell-team-vooraf{
  margin:6px 0 0;
  font-size:var(--t-pil);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
.c-agentshell-team-vooraf{
  margin-top:10px;
}

/* A6.1-6 — de inzicht-duiding onder de bewijs-chips in het gespreksvenster.
   Hergebruikt de ms-* kiezers uit meetstrook.js; hier alleen het omhulsel. */
.c-gesprek-duiding{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.c-gesprek-duiding-blok{ border:1px solid var(--line); border-radius:var(--r-m); background:var(--cream2); padding:9px 12px; }
.c-gesprek-duiding-kop{ cursor:pointer; font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol); list-style:none; display:flex; align-items:center; gap:6px; }
.c-gesprek-duiding-kop::-webkit-details-marker{ display:none; }
.c-gesprek-duiding-kop::after{ content:'▾'; margin-left:auto; font-size:10px; color:var(--ink-soft); }
.c-gesprek-duiding-blok[open] .c-gesprek-duiding-kop::after{ transform:rotate(180deg); }
.c-gesprek-duiding-uitleg{ font-size:var(--t-meta); color:var(--ink-soft); line-height:1.45; margin:5px 0 9px; }
.c-gesprek-duiding .ms-duiding{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }

/* A6.1-3 — de ⓘ op de communicatie-readiness-cel + de rijke popover (hergebruikt
   het c-ir-maandpop-omhulsel uit impactmatrix.js). */
.hm-td{ position:relative; }
.hm-cel-info{ position:absolute; top:2px; left:2px; z-index:2; width:15px; height:15px; padding:0;
  border:0; background:rgba(255,255,255,.78); color:var(--petrol); border-radius:50%;
  font-size:11px; line-height:15px; cursor:pointer; }
.hm-cel-info:hover{ background:#fff; }
.c-ir-maandpop.hm-info{ min-width:240px; max-width:320px; }
.hm-info-body{ display:flex; flex-direction:column; gap:8px; }
.hm-info-trede{ display:flex; align-items:center; gap:7px; font-size:var(--t-klein); color:var(--ink); }
.hm-info-dot{ width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
.hm-info-lab{ font-size:var(--t-meta); font-weight:var(--gew-vet); color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.hm-info-lijst{ display:flex; flex-direction:column; gap:6px; }
.hm-info-rij{ display:flex; align-items:baseline; gap:7px; font-size:var(--t-klein); }
.hm-info-seg{ font-weight:var(--gew-vet); color:var(--ink); flex:none; }
.hm-info-beh{ color:var(--ink-soft); }
.hm-info-leeg{ font-size:var(--t-meta); color:var(--ink-soft); }
.hm-info-bron{ align-self:flex-start; margin-top:2px; background:none; border:0; padding:0;
  color:var(--petrol); font-weight:var(--gew-vet); font-size:var(--t-klein); cursor:pointer; }
/* A6.1-4 — de opvolgmissie-actie op de missiekaart + de privacy-conventieregel. */
.c-missie-opvolg{ margin-left:auto; background:none; border:0; padding:2px 0; color:var(--petrol);
  font-weight:var(--gew-vet); font-size:var(--t-pil); cursor:pointer; white-space:nowrap; }
.c-missies-privacy{ font-size:var(--t-meta); color:var(--ink-soft); line-height:1.5; margin:14px 2px 0; }

/* ═══════════ H-1 · OPVOLG-VIEW (§Y, frame 52a/52b) ═══════════
   De view die de agent-werkview vervangt bij klik op een missie. Petrol
   koptitelblad; op kaartwit de vraag-velden (read-only gedempt na download,
   bewerkbaar ervoor) + de streefdatum die bewust contrasteert. */
.c-opvolg{ display:flex; flex-direction:column; }
.c-opvolg-kop{ background:var(--petrol-deep); padding:18px 24px; }
.c-opvolg-eyebrow{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-breed);
  text-transform:uppercase; color:var(--petrol-light); }
.c-opvolg-titel{ font-family:var(--font-kop); font-weight:var(--gew-vet); font-size:var(--t-kop-l); color:#fff; margin-top:4px; line-height:1.25; }
.c-opvolg-chips{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.c-opvolg-chip{ font-size:var(--t-pil); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pil); padding:4px 12px; white-space:nowrap; }

.c-opvolg-body{ padding:16px 24px 20px; display:flex; flex-direction:column; gap:12px; }
.c-opvolg-info{ font-size:var(--t-pil); color:var(--ink-soft); background:var(--cream2); border-radius:var(--r-s); padding:8px 12px; line-height:1.5; }
.c-opvolg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.c-opvolg-rij{ display:flex; align-items:flex-end; gap:10px; }
.c-opvolg-rij > *{ flex:1; }
.c-opvolg-veld{ display:flex; flex-direction:column; gap:4px; }
.c-opvolg-veld-lab{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.c-opvolg-veld-lab.is-streef{ color:var(--petrol-deep); }
.c-opvolg-sub{ font-weight:var(--gew-normaal); letter-spacing:0; text-transform:none; color:var(--ink-soft); }
/* bevroren/read-only veld: gestreepte rand, gedempte zand-achtergrond */
.c-opvolg-veld-ro{ font-size:var(--t-klein); color:var(--ink-soft); border:1px dashed var(--line);
  border-radius:var(--r-s); background:#F5F2EC; padding:8px 11px; line-height:1.5; }
.c-opvolg-veld-ro.is-oogst{ color:var(--ink-soft); }
/* bewerkbaar veld (vóór download): wit, effen rand */
.c-opvolg-veld-in{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--wit); padding:8px 11px; box-sizing:border-box; }
/* streefdatum contrasteert bewust: wit, petrol rand, ✎ */
.c-opvolg-streef-box{ display:flex; align-items:center; gap:8px; border:1px solid var(--petrol-deep);
  border-radius:var(--r-s); background:var(--wit); padding:8px 11px; }
/* het type=date-veld draagt een globale padding (huisstijl.css); vandaar de extra
   specificiteit + reset zodat de streefdatum even hoog is als de andere velden. */
.c-opvolg-streef-box .c-opvolg-streef-in{ flex:1; min-width:0; border:0; background:none;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); padding:0; margin:0; line-height:1.5; }
.c-opvolg-streef-box .c-opvolg-streef-in:focus{ outline:none; }
.c-opvolg-pen{ color:var(--petrol-deep); }

.c-opvolg-acties{ display:flex; align-items:center; gap:16px; border-top:1px solid var(--line); margin-top:4px; padding-top:13px; }
.c-opvolg-zelf{ background:none; border:0; padding:0; font-family:var(--font-ui); font-size:var(--t-klein);
  font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; }
.c-opvolg-annuleer{ background:none; border:0; padding:0; font-family:var(--font-ui); font-size:var(--t-klein);
  font-weight:var(--gew-vet); color:var(--rood); cursor:pointer; }

/* de venster-chroom wijkt voor het petrol koptitelblad: geen titelbalk, het ×
   drijft wit over de kop, de body draagt geen eigen padding. */
.c-opvolg-venster .c-venster{ position:relative; overflow:hidden; }
.c-opvolg-venster .c-venster-body{ padding:0; }
.c-opvolg-venster .c-venster-kop{ position:absolute; top:0; right:0; left:auto; z-index:3;
  background:none; border:0; padding:8px 10px; min-height:0; }
.c-opvolg-venster .c-venster-titelblok, .c-opvolg-venster .c-venster-greep{ display:none; }
.c-opvolg-venster .c-venster-sluit{ color:#fff; }

@media (max-width:699px){
  .c-opvolg-grid{ grid-template-columns:1fr; }
  .c-opvolg-rij{ flex-direction:column; align-items:stretch; }
  .c-opvolg-streef-box{ min-height:44px; }
  .c-opvolg-acties{ flex-direction:column; align-items:flex-start; gap:2px; }
  .c-opvolg-zelf, .c-opvolg-annuleer{ min-height:44px; display:flex; align-items:center; }
}

/* ═══════════ H-2 · OOGST-LEZING (§U-bis fase 1, frame 52c) ═══════════
   Het enige donkere scherm aan de manager-kant: het beamer-moment "Wat hebben we
   geleerd?". Full-screen petrol, read-only, presentabel in de designgroep. */
.c-oogst-sluier{ position:fixed; inset:0; z-index:1000; background:#0A3936;
  overflow-y:auto; display:flex; justify-content:center; padding:44px 20px; }
.c-oogst-kaart{ width:100%; max-width:600px; }
.c-oogst-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7FC4BE; line-height:1.5; }
.c-oogst-synthese{ font-family:var(--font-kop); font-weight:500; font-size:23px; color:#FAF8F5; line-height:1.4; margin-top:12px; }
.c-oogst-synthese-sub{ font-size:11.5px; color:rgba(250,248,245,.6); margin-top:6px; }
.c-oogst-rij{ display:flex; gap:16px; margin-top:20px; align-items:flex-start; }
.c-oogst-paneel{ background:rgba(250,248,245,.06); border:1px solid rgba(250,248,245,.14); border-radius:12px; padding:13px 16px; }
.c-oogst-curve-paneel{ flex:1.2; }
.c-oogst-rechts{ flex:1; display:flex; flex-direction:column; gap:8px; }
.c-oogst-paneel-lab{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7FC4BE; }
.c-oogst-paneel-lab.is-opvolg{ color:#E07B39; }
.c-oogst-paneel-tekst{ font-size:12.5px; color:#FAF8F5; line-height:1.5; margin-top:5px; }
.c-oogst-curve{ display:flex; align-items:flex-end; gap:3px; height:64px; margin-top:12px; }
.c-oogst-staaf{ border-radius:5px 5px 0 0; min-width:6px; }
.c-oogst-staaf.is-stil{ background:rgba(250,248,245,.12); border:1px dashed rgba(250,248,245,.3); border-bottom:0; }
.c-oogst-curve-voet{ font-size:10px; color:rgba(250,248,245,.55); margin-top:7px; line-height:1.4; }
.c-oogst-quote{ border-left:3px solid rgba(250,248,245,.3); padding:2px 0 2px 14px; margin-top:16px; }
.c-oogst-quote-tekst{ font-family:var(--font-kop); font-size:15px; color:#FAF8F5; font-style:italic; line-height:1.5; }
.c-oogst-quote-meta{ font-size:10.5px; color:rgba(250,248,245,.6); margin-top:4px; }
.c-oogst-voet{ display:flex; align-items:center; gap:12px; border-top:1px solid rgba(250,248,245,.14); margin-top:20px; padding-top:14px; flex-wrap:wrap; }
.c-oogst-voet-note{ font-size:11.5px; color:rgba(250,248,245,.6); }
.c-oogst-cta{ margin-left:auto; background:#C87941; color:#fff; border:0; font-family:var(--font-ui); font-size:12.5px; font-weight:600; border-radius:999px; padding:9px 20px; cursor:pointer; }
@media (max-width:699px){
  .c-oogst-rij{ flex-direction:column; }
  .c-oogst-voet{ position:sticky; bottom:0; background:#0A3936; margin-left:-20px; margin-right:-20px; padding:14px 20px; }
  .c-oogst-cta{ margin-left:0; flex:1; min-height:44px; }
}

/* tombstone (§Y/§Z): een geannuleerde missie blijft gedempt in de lijst staan */
.c-missiekaart.is-tombstone{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-l); padding:12px 16px; opacity:.6; cursor:default; }
.c-missiekaart.is-tombstone .c-missiekaart-titel{ text-decoration:line-through; color:var(--ink-soft); }
.c-missie-tombpil{ font-size:var(--t-pil); color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--r-pil); padding:2px 9px; white-space:nowrap; }

/* ════════ R60 · tabs-aanpak in de missie-shell ════════ */
.c-missieview{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-missieview-inhoud{ display:block; }
.c-view{ display:flex; flex-direction:column; gap:var(--sp-3); }
.c-view-kop{ margin-bottom:2px; }
.c-view-titel{ font-family:Fraunces,Georgia,serif; font-weight:600; font-size:17px; color:var(--petrol-deep, #0A3936); }
.c-view-duiding{ font-size:var(--t-klein); color:var(--ink-soft); margin-top:4px; line-height:1.5; }
/* zijmenu: terracotta afrond-actie + autosave-regel */
.c-modus-afrond{ margin:10px var(--sp-4) 0; padding:8px 12px; background:var(--terra); color:#fff; border:none; border-radius:999px; font-size:12px; font-weight:var(--gew-vet); text-align:center; cursor:pointer; }
.c-modus-afrond.is-actief{ box-shadow:0 0 0 2px rgba(255,255,255,.35) inset; }
.c-modus-autosave{ margin:6px var(--sp-4) 0; font-size:10px; color:var(--op-zacht, rgba(250,248,245,.55)); }
/* Wat leeft er */
.c-watleefter-kaarten{ display:flex; flex-direction:column; gap:8px; }
.c-sig-toevoeg{ border:1.5px dashed var(--line-strong, #B9B4AA); border-radius:10px; padding:10px 14px; font-size:12.5px; font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; cursor:pointer; text-align:left; }
/* Het kompas */
.c-kompas-sectiekop{ font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px; }
.c-kompas-grid{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; background:var(--cream1, #FAF8F5); overflow:hidden; }
.c-kompas-rij{ padding:9px 14px; border-top:1px solid var(--cream2); }
.c-kompas-rij:first-child{ border-top:none; }
.c-kompas-rij-boven{ display:grid; grid-template-columns:1fr 180px 132px; gap:10px; align-items:center; }
.c-kompas-naam{ font-size:12.5px; color:var(--ink); }
.c-kompas-plan{ display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); }
.c-kompas-stip{ width:11px; height:11px; border-radius:50%; flex:none; background:#fff; border:1.5px solid var(--line); }
.c-kompas-stip.is-groen{ background:var(--groen); border-color:var(--groen); }
.c-kompas-stip.is-geel{ background:var(--geel); border-color:var(--geel); }
.c-kompas-stip.is-rood{ background:var(--rood); border-color:var(--rood); }
.c-kompas-rij-onder{ margin-top:9px; display:flex; flex-direction:column; gap:7px; }
.c-kompas-waarom{ font-size:12px; }
.c-kompas-positie{ border:1px solid var(--line); border-radius:10px; background:var(--cream1,#FAF8F5); padding:11px 14px; }
.c-kompas-pos-top{ display:flex; gap:14px; align-items:flex-start; }
.c-kompas-poskwadrant{ display:grid; grid-template-columns:26px 26px; grid-auto-rows:26px; gap:3px; flex:none; }
.c-kompas-poscel{ background:#EFEBE3; border-radius:4px; position:relative; display:flex; align-items:center; justify-content:center; }
.c-kompas-posplan{ color:var(--petrol-deep); font-size:12px; font-weight:700; }
.c-kompas-poscel:has(.c-kompas-posplan){ background:var(--petrol-deep); }
.c-kompas-poscel:has(.c-kompas-posplan) .c-kompas-posplan{ color:#fff; }
.c-kompas-posvoor{ color:var(--terra); font-size:12px; font-weight:700; }
.c-kompas-pos-uit{ flex:1; font-size:12.5px; color:var(--ink); }
.c-kompas-pos-hoor{ margin-top:4px; }
.c-kompas-pos-assen{ margin-top:9px; display:flex; flex-direction:column; gap:7px; }
.c-kompas-as-rij{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Risico's */
.c-risico-blok{ display:flex; flex-direction:column; gap:8px; }
.c-risico-nu{ font-size:11px; color:var(--ink-soft); margin:2px 0 6px; }
.c-risico-nieuw-houder{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
/* De planning */
.c-planning-tabel{ border:1px solid var(--line); border-radius:10px; background:var(--cream1,#FAF8F5); overflow:hidden; }
.c-planning-kop, .c-planning-rij{ display:grid; grid-template-columns:44px 22px 1fr 92px 110px 74px; gap:0 10px; align-items:center; padding:10px 13px; }
.c-planning-kop{ font-size:10px; font-weight:var(--gew-zwaar); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.c-planning-rij{ font-size:12px; color:var(--ink); border-top:1px solid var(--cream2); }
.c-planning-wbs{ font-weight:700; color:var(--petrol-deep); }
.c-planning-ic{ width:11px; height:11px; }
.c-planning-ic.is-planningsitem{ border-radius:3px; background:var(--petrol-deep); }
.c-planning-ic.is-mijlpaal{ background:var(--terra); transform:rotate(45deg); border-radius:2px; }
.c-planning-ic.is-meetpunt{ border:2px solid var(--geel); transform:rotate(45deg); border-radius:2px; background:#fff; }
.c-planning-eig, .c-planning-term{ color:var(--ink-soft); font-size:11px; }
.c-planning-status{ font-size:11px; font-weight:var(--gew-vet); border-radius:999px; padding:2px 10px; justify-self:start; background:var(--cream2); color:var(--ink-soft); }
.c-planning-status.is-loopt{ background:var(--groen); color:#fff; }
.c-planning-status.is-letop{ background:var(--geel); color:#fff; }
.c-planning-status.is-geblokkeerd{ background:var(--rood); color:#fff; }
.c-planning-notitie{ display:flex; align-items:center; gap:8px; border-top:1px dashed var(--line); padding:8px 13px 10px; background:#fff; }
.c-planning-notitie-lab{ font-size:11px; color:var(--ink-soft); flex:none; }
.c-planning-legende{ display:flex; gap:14px; margin-top:8px; font-size:10.5px; color:var(--ink-soft); align-items:center; }
.c-planning-legende span{ display:inline-flex; align-items:center; gap:5px; }
/* afrond-wijzer naar het kompas */
.c-afrond-kompaswijzer{ margin-top:10px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--cream2); font-size:12px; color:var(--petrol-deep); font-weight:var(--gew-vet); cursor:pointer; text-align:left; }
/* minimale gesprek-popup: tab-hint */
.c-gesprek-tabhint{ background:#F2EEE7; border-radius:9px; padding:9px 12px; margin-top:10px; font-size:11.5px; color:var(--ink-soft); line-height:1.5; }
.c-gesprek-tabhint b{ color:var(--petrol-deep); }

/* ══════════════════ R61–R64 · missie-shell ══════════════════ */

/* R61 — De opdracht: projectcontext */
.c-projectblok{ border:1px solid var(--line); border-radius:10px; background:var(--cream); padding:12px 15px; margin-top:12px; }
.c-projectblok-kop{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.c-projectblok-naam{ font-family:Fraunces,Georgia,serif; font-weight:600; font-size:16px; color:var(--petrol-dark); margin-top:4px; }
.c-projectblok-regel{ margin-top:8px; }
.c-projectblok-lab{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.c-projectblok-tekst{ font-size:12.5px; color:var(--ink); margin:2px 0 0; line-height:1.5; }

/* R61 — Het kompas: DE GROEP (read-only) */
.c-groepblok{ border:1px solid var(--line); border-radius:10px; background:var(--cream); padding:12px 15px; margin-top:8px; margin-bottom:6px; }
.c-groepblok-kop{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); }
.c-groepblok-grootte{ font-size:13px; font-weight:600; color:var(--petrol-dark); margin-top:4px; }
.c-groepblok-mensen{ display:flex; flex-direction:column; gap:5px; margin-top:8px; }
.c-groepblok-persoon{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-groepblok-naam{ font-size:12.5px; color:var(--ink); }
.c-groepblok-rol{ font-size:10.5px; color:var(--petrol-deep); background:var(--cream2); border:1px solid var(--line); border-radius:999px; padding:1px 9px; }
/* FB-U4 — de bewerkbare DE GROEP-editor (voorstel van de change agent) */
.c-groepblok-uitleg{ font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5; margin:6px 0 0; }
.c-groep-edit{ border:1px solid var(--line); border-radius:9px; background:var(--wit); padding:10px 12px; margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.c-groep-edit.is-nietmeer{ opacity:.62; }
.c-groep-edit.is-nietmeer .c-groep-edit-naam{ text-decoration:line-through; }
.c-groep-edit-kop{ display:flex; align-items:center; gap:8px; }
.c-groep-edit-naam{ flex:1; min-width:0; }
.c-groep-edit-wis{ flex:none; width:26px; height:26px; border:0; border-radius:6px; background:var(--cream2); color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; }
.c-groep-edit-wis:hover{ color:var(--rood); }
.c-groep-edit-rollen{ display:flex; gap:6px; flex-wrap:wrap; }
.c-rolchip{ font-size:11px; color:var(--ink-soft); background:var(--cream2); border:1px solid var(--line); border-radius:999px; padding:2px 11px; cursor:pointer; font-family:var(--font-ui); }
.c-rolchip.is-aan{ color:var(--petrol-deep); background:var(--vul-petrol); border-color:var(--petrol); font-weight:var(--gew-vet); }
.c-groep-edit-door{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-groep-edit-doorlab{ font-size:var(--t-pil); color:var(--ink-soft); flex:none; }
.c-groep-edit-door .c-veldvak-invoer{ flex:1; min-width:12ch; }
.c-groep-edit-nietmeer{ align-self:flex-start; font-size:11px; color:var(--terra-tekst); background:none; border:1px dashed var(--terra); border-radius:999px; padding:2px 11px; cursor:pointer; font-family:var(--font-ui); }
.c-groep-edit-nietmeer.is-aan{ color:var(--wit); background:var(--terra); border-style:solid; }
.c-groep-edit-fb{ display:flex; flex-direction:column; gap:4px; }
.c-groep-edit-fblab{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-groep-edit-histknop{ align-self:flex-start; background:none; border:0; color:var(--petrol-deep); font:inherit; font-size:var(--t-pil); cursor:pointer; padding:0; }
.c-groep-edit-histlijst{ display:flex; flex-direction:column; gap:3px; }
.c-groep-edit-histrij{ font-size:var(--t-pil); color:var(--ink-soft); }
.c-groepblok-toe{ margin-top:10px; font-size:12px; color:var(--petrol-deep); background:none; border:1.5px dashed var(--petrol); border-radius:999px; padding:4px 13px; cursor:pointer; font-family:var(--font-ui); }

/* R61 — Het kompas: CAPACITEIT */
.c-kompas-cap{ border:1px solid var(--line); border-radius:10px; background:var(--cream); padding:11px 14px; margin-top:6px; }
.c-kompas-cap-uit{ font-size:12px; color:var(--ink-soft); margin:0 0 8px; line-height:1.5; }
.c-kompas-caprij{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 0; border-top:1px solid var(--cream2); }
.c-kompas-caprij:first-of-type{ border-top:0; }
.c-kompas-caplab{ font-size:12.5px; color:var(--ink); flex:none; min-width:96px; font-weight:600; }
.c-kompas-capplan{ font-size:11px; color:var(--ink-soft); flex:1; }
.c-kompas-cap-waarom{ margin-top:8px; }

/* R61 — Risico's als tegelmodel (frame 61a) */
.c-ris-intro{ font-size:12px; color:var(--ink-soft); line-height:1.55; margin:2px 0 8px; }
.c-ris-legende{ display:flex; gap:12px; flex-wrap:wrap; font-size:10.5px; color:var(--ink-soft); margin-bottom:10px; }
.c-ris-kaart{ border:1px solid var(--line); border-radius:12px; background:var(--cream); padding:13px 16px; margin-bottom:8px; }
.c-ris-naam{ font-size:13px; font-weight:600; color:var(--ink); }
.c-ris-naaminvoer{ margin-bottom:4px; }
.c-ris-rij{ display:grid; grid-template-columns:56px 1fr; gap:8px 12px; align-items:center; margin-top:9px; }
.c-ris-aslab{ font-size:11px; color:var(--ink-soft); }
.c-ris-vlakken{ display:flex; gap:6px; }
.c-ris-tegel{ flex:1; text-align:center; border-radius:8px; font-size:11.5px; color:var(--ink-soft); padding:8px 0; border:2px solid transparent; cursor:pointer; font-weight:500; font-family:inherit; transition:background .12s; }
.c-ris-tegel.is-groen{ background:rgba(44,138,107,.18); }
.c-ris-tegel.is-geel{ background:rgba(217,166,60,.22); }
.c-ris-tegel.is-rood{ background:rgba(192,86,58,.16); color:var(--ink); }
.c-ris-tegel.is-huidig{ font-weight:600; color:var(--ink); }
.c-ris-tegel.is-huidig.is-groen{ border-color:var(--groen); }
.c-ris-tegel.is-huidig.is-geel{ border-color:var(--geel); }
.c-ris-tegel.is-huidig.is-rood{ border-color:var(--rood); }
.c-ris-tegel.is-gekozen{ color:#fff; font-weight:600; box-shadow:inset 0 0 0 2px #fff; border-color:transparent; }
.c-ris-tegel.is-gekozen.is-groen{ background:var(--groen); }
.c-ris-tegel.is-gekozen.is-geel{ background:var(--geel); }
.c-ris-tegel.is-gekozen.is-rood{ background:var(--rood); }
.c-ris-toelichting{ width:100%; box-sizing:border-box; margin-top:9px; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px 11px; resize:vertical; font:inherit; }
.c-ris-toelichting.is-ghost{ border-style:dashed; color:var(--ink-soft); background:var(--cream); }

/* R62 — De planning als boom (frame 62a) */
.c-planning-intro{ font-size:12px; color:var(--ink-soft); margin:2px 0 10px; line-height:1.5; }
.c-planning-boom{ display:flex; flex-direction:column; }
.c-planning-item{ margin-left:calc(var(--diepte,0) * 26px); }
.c-planning-rij2{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--petrol); border-radius:10px; padding:9px 14px; margin-top:6px; }
.c-planning-rij2.is-sub{ border-left-color:#9DBBB8; }
.c-planning-r-wbs{ font-size:12px; font-weight:700; color:var(--petrol-dark); width:44px; flex:none; }
.c-planning-r-wat{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink); flex:1; min-width:0; }
.c-planning-rij2.is-hoofd .c-planning-r-wat{ font-weight:600; }
/* FB-U5 — een gesynthetiseerd hoofdstuk (bv. "60" boven 60.x) ziet er nu als een
   gewone hoofd-rij uit: witte kaart, volle petrol-linkerrand, gewone tekstkleur.
   Voor de gebruiker is er geen echt verschil, dus ook geen zichtbaar verschil; het
   blijft functioneel enkel WBS + titel (geen eigenaar/status/notitie). */
.c-planning-rij2.is-hoofdstuk .c-planning-r-wat{ font-weight:600; }
.c-planning-r-meta{ font-size:11px; color:var(--ink-soft); flex:none; }
.c-planning-r-status{ width:10px; height:10px; border-radius:50%; flex:none; background:var(--cream2); border:1px solid var(--line); }
.c-planning-r-status.is-loopt{ background:var(--groen); border-color:transparent; }
.c-planning-r-status.is-letop{ background:var(--geel); border-color:transparent; }
.c-planning-r-status.is-geblokkeerd{ background:var(--rood); border-color:transparent; }
.c-planning-r-status.is-af{ background:var(--ink-soft); border-color:transparent; }
.c-planning-notknop{ font-size:11px; color:var(--ink-soft); flex:none; background:none; border:0; cursor:pointer; padding:2px 4px; font-family:inherit; }
.c-planning-notknop.is-gevuld{ font-weight:600; color:#B07A28; background:rgba(217,166,60,.18); border-radius:999px; padding:2px 10px; }
.c-planning-notwrap{ margin-top:-1px; }
.c-planning-notveld{ display:flex; align-items:center; gap:8px; background:var(--cream); border:1px solid var(--line); border-top:0; border-radius:0 0 10px 10px; padding:9px 14px 11px; }
.c-planning-notlab{ font-size:11px; color:var(--ink-soft); flex:none; }
.c-planning-notveld .c-veldvak-invoer{ flex:1; }

/* R64 — de missie-balk chips + inline paneel */
.c-voortgang-onder{ flex-wrap:wrap; row-gap:8px; }
.c-balk-deler{ width:1px; height:20px; background:var(--line); flex:none; }
.c-balk-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; border-radius:999px; padding:4px 11px; flex:none; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-family:inherit; }
.c-balk-chip.is-leeg{ font-weight:600; color:#B07A28; background:rgba(217,166,60,.18); border-color:var(--geel); }
.c-balk-chip.is-open{ box-shadow:0 0 0 2px rgba(18,113,108,.2); }
.c-balk-chip-ring{ width:11px; height:11px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#fff; }
.c-balk-chip.is-gevuld .c-balk-chip-ring{ background:var(--groen); }
.c-balk-chip.is-leeg .c-balk-chip-ring{ border:1.5px solid var(--geel); }
.c-balk-chip-car{ font-size:9px; }
.c-balk-paneel{ background:#fff; border-top:1px solid var(--line); padding:13px 20px; }
.c-balk-paneel-kop{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.c-balk-paneel-titel{ font-size:12.5px; font-weight:600; color:var(--ink); }
.c-balk-paneel-sub{ font-size:11px; color:var(--ink-soft); flex:1; }
.c-balk-sluit{ font-size:11px; color:var(--ink-soft); background:none; border:0; cursor:pointer; margin-left:auto; font-family:inherit; }
.c-balk-paneel-rij{ display:flex; align-items:center; gap:12px; margin-top:9px; flex-wrap:wrap; }
.c-balk-datum{ font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--cream); padding:7px 11px; font-family:inherit; }
.c-balk-geen{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); }
.c-balk-resultaat{ width:100%; box-sizing:border-box; margin-top:9px; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:8px; background:var(--cream); padding:8px 11px; resize:vertical; font:inherit; }

/* R64b — de aanpak-chip in de hero volgt de chip-grammatica */
.c-opdrachtchip.is-aanpak.is-gekozen{ background:rgba(250,248,245,.15); color:var(--cream); border-color:rgba(250,248,245,.3); font-weight:600; }
.c-opdrachtchip.is-aanpak.is-gekozen:hover{ background:rgba(250,248,245,.22); }
.c-opdrachtchip-vink{ color:var(--petrol-light); font-weight:700; }
.c-opdrachtchip-car{ font-size:9px; }

/* R63 — de klaar-meter boven de ene bewaarknop (zijmenu, petrol). Geen eigen
   border-top: de .c-modus-voet draagt al de scheidingslijn (anders twee lijnen). */
.c-klaarmeter{ padding-top:2px; margin-bottom:6px; }
.c-klaarmeter-kop{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol-light); }
.c-klaarmeter-regel{ display:flex; align-items:center; gap:8px; width:100%; margin-top:8px; background:none; border:0; cursor:pointer; text-align:left; padding:0; font-family:inherit; }
.c-klaarmeter-ring{ width:14px; height:14px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; border:1.5px solid var(--geel); box-sizing:border-box; }
.c-klaarmeter-ring.is-af{ background:var(--groen); border-color:transparent; }
.c-klaarmeter-lab{ font-size:11.5px; color:rgba(250,248,245,.85); flex:1; }
.c-klaarmeter-car{ font-size:11px; color:var(--petrol-light); }
.c-modus-bewaar-na{ font-size:10.5px; color:rgba(250,248,245,.6); line-height:1.5; margin-top:9px; text-align:center; }

/* R61-fix — de positie-assen hergebruiken .c-sig-chip; de kale is-actief zet enkel
   witte tekst zonder achtergrond (label werd onzichtbaar op wit). Geef de actieve
   positie-pill een petrol-vlak. */
.c-kompas-as-rij .c-sig-chip.is-actief{ background:var(--petrol); }

@media (max-width:699px){
  .c-planning-item{ margin-left:calc(var(--diepte,0) * 16px); }
  .c-planning-rij2{ flex-wrap:wrap; row-gap:4px; }
  .c-ris-rij{ grid-template-columns:1fr; gap:5px; }
}

/* ── R64-fb · planning in-/uitklappen + ontbreekt-veld + klikbare feiten-pill ── */
.c-planning-caret{ width:16px; flex:none; background:none; border:0; cursor:pointer; color:var(--ink-soft); font-size:10px; line-height:1; padding:0; text-align:center; font-family:inherit; }
.c-planning-caret.is-leeg{ cursor:default; visibility:hidden; }
.c-planning-caret:hover{ color:var(--petrol); }
.c-planning-ontbreekt{ margin-top:16px; }
.c-planning-ontbreekt-lab{ display:block; font-size:12.5px; font-weight:var(--gew-vet); color:var(--petrol-dark); margin-bottom:6px; }
.c-planning-ontbreekt-in{ width:100%; box-sizing:border-box; resize:vertical; }
.c-opdrachtfeiten.is-klik{ cursor:pointer; transition:background .12s, border-color .12s; }
.c-opdrachtfeiten.is-klik:hover, .c-opdrachtfeiten.is-klik:focus-visible{ background:rgba(250,248,245,.12); border-color:rgba(250,248,245,.55); outline:none; }

/* ═══════════════════ Ronde 65 — de manager-wizard na import ═══════════════════
   Eén regel-anatomie (NU/VOORSTEL-celpaar), petrol "gekozen"-label, terracotta ⊕,
   kompas-kantlijn-citaat, gevolg-regel. Kleuren exact uit het designcanvas (65a–65h). */
.c-r65-bar{ display:flex; gap:6px; margin:0 0 16px; }
.c-r65-seg{ flex:1; height:6px; border-radius:999px; border:0; background:#DDD8CF; cursor:pointer; padding:0; }
.c-r65-seg.is-done{ background:#7FC4BE; }
.c-r65-seg.is-nu{ background:#0E4F4B; }
.c-r65-seg.is-leeg{ background:#EAE6DE; }
.c-r65-panels{ }
.c-r65-panel{ }
.c-r65-stapkop{ font-family:var(--font-kop,Fraunces),Georgia,serif; font-weight:600; font-size:16px; color:#0A3936; }
.c-r65-stapsub{ font-size:11.5px; color:#8A867E; margin-top:3px; margin-bottom:14px; }
.c-r65-lijst{ display:flex; flex-direction:column; gap:10px; }
.c-r65-askop{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8A867E; margin-top:8px; }

/* — de dense regel — */
.c-r65-rij{ background:#fff; border:1px solid #DDD8CF; border-radius:10px; padding:11px 15px; }
.c-r65-rij.is-bevestigd{ opacity:.78; }
/* #269 — pijl, ⊕, naam en "gekozen"-pill centreren op het cel-midden: de caps
   ("NU"/"VOORSTEL") uit de verticale flow halen (absoluut boven de cel), zodat de
   cel-rij de referentie is. Non-bevestigd krijgt margin-top voor de zwevende caps. */
.c-r65-top{ display:flex; align-items:center; gap:12px; }
.c-r65-rij:not(.is-bevestigd) .c-r65-top{ margin-top:13px; }
.c-r65-naam{ font-size:12.5px; color:#2A2A28; flex:1; margin-top:0; }
.c-r65-rij.is-bevestigd .c-r65-naam{ margin-top:0; }
.c-r65-celpaar{ display:flex; align-items:center; gap:0; }
.c-r65-celkol{ text-align:center; display:flex; flex-direction:column; position:relative; }
.c-r65-caps{ font-size:9px; font-weight:700; letter-spacing:.06em; color:#8A867E; margin-bottom:2px; }
.c-r65-celkol .c-r65-caps{ position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); margin-bottom:0; white-space:nowrap; }
.c-r65-caps.is-voorstel{ color:#C87941; }
.c-r65-arrow{ color:#C87941; font-size:14px; margin:0 8px; }
.c-r65-cel{ display:inline-flex; align-items:center; gap:5px; border:1px solid #DDD8CF; border-radius:8px; background:#fff; padding:4px 10px; font-size:11.5px; color:#6B6862; }
.c-r65-cel.is-voorstel{ border:1.5px solid #C87941; font-weight:600; color:#2A2A28; }
.c-r65-cel.is-leeg{ border:1px dashed #B9B4AA; color:#B9B4AA; }
.c-r65-dot{ width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
.c-r65-standwoord{ white-space:nowrap; }
.c-r65-gekozen{ font-size:10px; font-weight:700; color:#fff; background:#0E4F4B; border-radius:999px; padding:3px 9px; margin-top:0; align-self:center; flex:none; }
.c-r65-gekozen.is-uit{ display:none; }
.c-r65-rij.is-bevestigd .c-r65-gekozen{ margin-top:0; }
.c-r65-bevchip{ font-size:11px; font-weight:600; color:#2C8A6B; background:rgba(44,138,107,.12); border-radius:999px; padding:3px 11px; flex:none; }

/* — de terracotta ⊕ — */
.c-r65-fab{ width:24px; height:24px; border-radius:50%; background:#C87941; color:#fff; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 9px rgba(200,121,65,.35); flex:none; border:0; cursor:pointer; margin-top:0; padding:0; line-height:1; align-self:center; }
.c-r65-rij.is-bevestigd .c-r65-fab, .c-r65-rolrij .c-r65-fab, .c-r65-gehcel-rechts .c-r65-fab{ margin-top:0; }
.c-r65-fab:hover{ filter:brightness(1.05); }

/* — het citaat (kompas-kantlijn) — */
.c-r65-citaat{ font-size:12px; color:#2A2A28; background:#FAF8F5; border-left:3px solid #12716C; border-radius:0 8px 8px 0; padding:8px 11px; margin-top:9px; line-height:1.5; }
.c-r65-citaat-bron{ color:#8A867E; }

/* — de gevolg-regel — */
.c-r65-gevolg{ display:flex; align-items:center; gap:8px; background:#EAF1F0; border-radius:8px; padding:7px 11px; margin-top:8px; }
.c-r65-gevolg[hidden]{ display:none; }
.c-r65-gekozen-pill{ font-size:10px; font-weight:700; color:#fff; background:#0E4F4B; border-radius:999px; padding:3px 9px; flex:none; }
.c-r65-gevolg-tekst{ font-size:11px; color:#2A2A28; line-height:1.4; }

/* — het ⊕-menu (popover) — */
.c-r65-menu-houder{ position:fixed; inset:0; z-index:1400; }
.c-r65-menu-sluier{ position:absolute; inset:0; }
.c-r65-menu{ position:fixed; width:210px; background:#fff; border:1px solid #DDD8CF; border-radius:12px; box-shadow:0 10px 26px rgba(10,57,54,.18); overflow:hidden; }
.c-r65-menu-kop{ font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#C87941; padding:9px 13px 4px; }
.c-r65-menu-switch{ display:flex; align-items:center; gap:8px; width:100%; font-size:12px; font-weight:600; color:#0A3936; padding:8px 13px; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left; }
.c-r65-switch-track{ margin-left:auto; width:30px; height:17px; border-radius:999px; background:#DDD8CF; position:relative; flex:none; transition:background .15s; }
.c-r65-menu-switch.is-aan .c-r65-switch-track{ background:#0E4F4B; }
.c-r65-switch-knop{ position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:#fff; transition:left .15s; }
.c-r65-menu-switch.is-aan .c-r65-switch-knop{ left:15px; }
.c-r65-menu-divider{ height:1px; background:#DDD8CF; margin:3px 0; }
.c-r65-menu-item{ display:flex; align-items:center; gap:8px; width:100%; font-size:12px; color:#2A2A28; padding:8px 13px; background:none; border:0; cursor:pointer; font-family:inherit; text-align:left; }
.c-r65-menu-item:hover{ background:#FAF8F5; }
.c-r65-menu-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.c-r65-menu-dot[data-k="teal"]{ background:#7FC4BE; }
.c-r65-menu-dot[data-k="terra"]{ background:#C87941; }
.c-r65-menu-itemtekst{ display:flex; flex-direction:column; }
.c-r65-menu-itemtitel{ font-weight:600; }
.c-r65-menu-itemsub{ font-size:10.5px; color:#8A867E; }

/* — 65e risico-kaart — */
.c-r65-riskaart, .c-r65-plankaart{ background:#fff; border:1px solid #DDD8CF; border-radius:10px; padding:13px 16px; }
.c-r65-plankaart{ border-left:3px solid #12716C; padding:10px 14px; }
.c-r65-risbody{ display:flex; gap:16px; align-items:flex-start; }
.c-r65-riscol{ flex:none; }
.c-r65-rismatrix{ display:grid; grid-template-columns:20px 20px 20px; grid-template-rows:20px 20px 20px; gap:2px; }
.c-r65-rmcel{ border-radius:3px; position:relative; }
.c-r65-rmcel[data-kans="klein"]{ background:rgba(44,138,107,.28); }
.c-r65-rmcel[data-kans="reeel"]{ background:rgba(217,166,60,.35); }
.c-r65-rmcel[data-kans="groot"]{ background:rgba(192,86,58,.4); }
.c-r65-rmplan, .c-r65-rmvoor{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.c-r65-rmplan{ color:#2A2A28; }
.c-r65-rmvoor{ color:#C87941; }
.c-r65-riscap{ display:block; font-size:9px; color:#8A867E; margin-top:3px; text-align:center; }
.c-r65-risrechts{ flex:1; }
.c-r65-ristitel{ display:block; font-size:13px; font-weight:600; color:#2A2A28; }
.c-r65-risregel{ display:block; font-size:12px; color:#2A2A28; margin-top:4px; }
.c-r65-riskeuze{ display:flex; align-items:center; gap:10px; margin-top:11px; }
.c-r65-riskeuze-links{ flex:1; }
.c-r65-gevolg.is-ris{ margin-top:10px; }

/* — 65f planning — */
.c-r65-plankop{ display:flex; align-items:center; gap:10px; font-size:12px; }
.c-r65-planwbs{ font-weight:700; color:#0A3936; min-width:34px; flex:none; }
.c-r65-planoms{ font-weight:600; color:#2A2A28; flex:1; }
.c-r65-planmeta{ color:#8A867E; font-size:11px; }
.c-r65-plangat{ background:#fff; border:1.5px dashed #C87941; border-radius:10px; padding:10px 14px; }
.c-r65-plangat-eyebrow{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#C87941; }
.c-r65-plangat-tekst{ font-size:12px; color:#2A2A28; margin-top:5px; line-height:1.5; }
.c-r65-plangat-knop{ background:none; border:0; padding:0; cursor:pointer; color:#0E4F4B; font-size:12px; font-weight:600; font-family:inherit; text-align:left; }
.c-r65-plangat-knop:hover{ text-decoration:underline; }

/* — 65b het geheel — */
.c-r65-geheel{ display:flex; flex-direction:column; gap:18px; }
.c-r65-gehtitel{ font-size:13px; font-weight:600; color:#2A2A28; }
.c-r65-gehsub{ font-size:11.5px; color:#6B6862; margin-top:3px; }
.c-r65-gehquote{ font-family:var(--font-kop,Fraunces),Georgia,serif; font-size:13px; color:#0A3936; background:#EAF1F0; border-radius:10px; padding:10px 13px; margin-top:10px; line-height:1.4; }
.c-r65-gehgrid{ display:grid; grid-template-columns:130px 1fr 1fr; gap:8px 12px; align-items:center; margin-top:12px; font-size:12px; }
.c-r65-caps.is-voorstel, .c-r65-gehgrid .c-r65-caps{ }
.c-r65-gehrij-naam{ color:#2A2A28; }
.c-r65-gehcel{ display:inline-flex; align-items:center; gap:5px; border:1px solid #DDD8CF; border-radius:8px; background:#fff; padding:6px 10px; color:#6B6862; }
.c-r65-gehcel.is-voorstel{ border:1.5px solid #C87941; font-weight:600; color:#2A2A28; flex:1; }
.c-r65-gehcel-rechts{ display:flex; align-items:center; gap:8px; }
.c-r65-gehbars{ display:inline-flex; gap:2px; border:1px solid #DDD8CF; border-radius:8px; background:#fff; padding:6px 8px; }
.c-r65-gehbars.is-voorstel{ border:1.5px solid #C87941; flex:1; justify-content:center; }
.c-r65-gehbar{ height:14px; border-radius:2px; display:inline-block; }
/* R92 — de resultaat-van-de-missie rij (oogst-quote): citaten wrappen en staan
   boven-uitgelijnd; de lege plan-kant is een gestreepte ghost. */
.c-r65-gehquote-nu{ display:block; font-style:italic; line-height:1.4; align-self:start; }
.c-r65-gehquote-nu.is-leeg{ color:#A8A29A; border-style:dashed; }
.c-r65-gehcel.is-voorstel.c-r65-gehquote-voor{ display:block; font-style:italic; text-align:left; line-height:1.4; }
.c-r65-gehcel-rechts:has(.c-r65-gehquote-voor){ align-items:flex-start; }
.c-r65-rolblok{ margin-top:14px; }
.c-r65-rolkop{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8A867E; }
.c-r65-rollijst{ background:#fff; border:1px solid #DDD8CF; border-radius:10px; margin-top:6px; overflow:hidden; }
.c-r65-rolrij{ display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:12px; }
.c-r65-rolrij + .c-r65-rolrij{ border-top:1px solid #EFEBE3; }
.c-r65-rolnaam{ color:#2A2A28; flex:1; }

/* — de lege staat (65c-recept) — */
.c-r65-leeg{ background:#FAF8F5; border:1px solid #DDD8CF; border-radius:10px; padding:16px 18px; }
.c-r65-leeg-kop{ font-size:13px; font-weight:600; color:#2A2A28; }
.c-r65-leeg-uit{ font-size:12px; color:#6B6862; line-height:1.6; margin-top:8px; }
.c-r65-leeg-actie{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #DDD8CF; border-radius:10px; padding:10px 13px; margin-top:12px; }
.c-r65-leeg-actietekst{ font-size:12px; color:#2A2A28; flex:1; }
.c-r65-leeg-link{ font-size:11px; font-weight:600; color:#0E4F4B; }

/* — 65g bevestig — */
.c-r65-bevkop{ font-size:13px; font-weight:600; color:#2A2A28; }
.c-r65-bevtel{ font-weight:400; color:#8A867E; margin-left:5px; }
.c-r65-bevleeg{ font-size:12px; color:#8A867E; margin-top:10px; }
.c-r65-bevlijst{ background:#fff; border:1px solid #DDD8CF; border-radius:10px; margin-top:10px; overflow:hidden; font-size:12px; }
.c-r65-bevrij{ display:flex; align-items:center; gap:10px; padding:9px 14px; }
.c-r65-bevrij + .c-r65-bevrij{ border-top:1px solid #EFEBE3; }
.c-r65-vink{ width:20px; height:20px; border-radius:6px; border:1.5px solid #DDD8CF; background:#fff; cursor:pointer; flex:none; font-size:12px; color:#2C8A6B; display:flex; align-items:center; justify-content:center; padding:0; }
.c-r65-vink.is-aan{ border-color:#2C8A6B; background:rgba(44,138,107,.1); }
.c-r65-bevnaam{ color:#2A2A28; flex:1; }
.c-r65-bevwaarde{ color:#6B6862; }
.c-r65-bevbekijk{ font-size:11px; color:#0E4F4B; background:none; border:0; cursor:pointer; font-family:inherit; flex:none; font-weight:600; }
.c-r65-bevbekijk:hover{ text-decoration:underline; }
.c-r65-bevnoot{ font-size:11px; color:#8A867E; margin-top:9px; }
/* Team-upsell op de bevestig-stap (alleen zonder Team): rustige petrol-tint kaart
   met tijdwinst-uitleg + de inlog/aankoop-knop. */
.c-r65-teamupsell{ margin-top:11px; padding:11px 13px; background:rgba(18,113,108,.06); border:1px solid rgba(18,113,108,.18); border-radius:10px; }
.c-r65-teamupsell-tekst{ font-size:12px; line-height:1.5; color:var(--ink,#2A2A28); }
.c-r65-teamupsell-knop{ margin-top:8px; font:inherit; font-size:12px; font-weight:600; color:#fff; background:var(--petrol-deep,#0E4F4B); border:0; border-radius:999px; padding:7px 14px; cursor:pointer; }
.c-r65-teamupsell-knop:hover{ background:var(--petrol,#12716C); }
/* Wizard-voet (design 52): ◂ terug · Team-noot (elke stap) · "{n} van {m}
   gekozen" · primaire knop. De Team-noot groeit en duwt terug naar links, de
   teller + knop naar rechts. */
.c-r65-voet{ flex-wrap:wrap; row-gap:var(--sp-4); }
.c-r65-voetnoot{ flex:1 1 200px; min-width:0; display:inline-flex; align-items:center; gap:var(--sp-4); font-size:11.5px; line-height:1.4; color:#8A867E; }
.c-r65-voetnoot-slot{ flex:none; opacity:.6; font-size:.9em; }
.c-r65-voettel{ flex:none; white-space:nowrap; font-size:11.5px; color:#8A867E; font-variant-numeric:tabular-nums; }
.c-r65-slot{ font-size:.92em; line-height:1; }
.c-r65-voetknop-slot{ gap:var(--sp-3); }
/* Statusrode voet-regel wanneer de Team-schrijf faalt (65g blijft staan). */
.c-r65-voet-fout{ flex:1 1 100%; order:-1; font-size:11.5px; font-weight:600; color:var(--rood,#C0563A); }

/* ── 65j — de aanmeld/aankoop-poort (dezelfde wizard-tint) ──
   Een kaartje over de gedimde bevestig-lijst; er wordt niets geschreven. */
.c-r65-poort-houder{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(14,79,75,.10); backdrop-filter:blur(1px); }
.c-r65-poort{ width:min(420px,100%); background:var(--cream,#FAF8F5); border:1px solid var(--line,#DDD8CF);
  border-radius:14px; box-shadow:0 12px 40px rgba(20,30,28,.18); padding:22px 22px 16px; }
.c-r65-poort-slot{ font-size:22px; line-height:1; }
.c-r65-poort-titel{ margin-top:8px; font-family:var(--font-titel,Fraunces),Georgia,serif; font-size:19px;
  font-weight:600; color:var(--petrol-deep,#0E4F4B); }
.c-r65-poort-uit{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--ink,#2A2A28); }
.c-r65-poort-knoppen{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.c-r65-poort-knoppen .c-knop{ width:100%; justify-content:center; }
.c-r65-poort-voet{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-zacht,#EFEBE3);
  display:flex; align-items:center; gap:10px; }
.c-r65-poort-gratis{ flex:1 1 auto; font-size:11px; line-height:1.4; color:#8A867E; }
.c-r65-poort-terug{ flex:none; background:none; border:0; font:inherit; font-size:12px; color:var(--ink-soft,#6B6862); cursor:pointer; padding:4px; }
.c-r65-poort-terug:hover{ color:var(--ink,#2A2A28); }

/* ── 65i — het reçu ná een geslaagde Team-schrijf ── */
.c-r65-recu-titel{ font-family:var(--font-titel,Fraunces),Georgia,serif; font-size:21px; font-weight:600; color:var(--petrol-deep,#0E4F4B); }
.c-r65-recu-sub{ margin-top:4px; font-size:12.5px; color:#8A867E; }
.c-r65-recu-sectie{ margin-top:16px; display:flex; align-items:center; gap:10px; }
.c-r65-recu-dot{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--petrol,#12716C); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.c-r65-recu-sectietekst{ font-size:13px; font-weight:600; color:var(--ink,#2A2A28); }
.c-r65-recu .c-r65-bevlijst{ margin-top:12px; }
.c-r65-bevrij.is-verborgen{ display:none; }
.c-r65-recu-meer{ margin-top:8px; background:none; border:0; font:inherit; font-size:12px; font-weight:600; color:var(--petrol-deep,#0E4F4B); cursor:pointer; padding:2px 0; }
.c-r65-nietover-hist{ margin-top:8px; font-size:11px; color:#8A867E; }
/* Reçu-voet: links "naar de missie-kaart ▸", rechts petrol "Klaar" (geen terracotta). */
.c-r65-voet-recu .c-r65-recu-naar{ margin-right:auto; background:none; border:0; font:inherit; font-size:12.5px; font-weight:600; color:var(--petrol-deep,#0E4F4B); cursor:pointer; padding:4px; }
.c-r65-voet-recu .c-r65-recu-naar:hover{ text-decoration:underline; }
.c-r65-nietover{ margin-top:12px; }
.c-r65-nietover-kop{ list-style:none; cursor:pointer; font-size:11.5px; font-weight:600; color:#6B6862; }
.c-r65-nietover-kop::-webkit-details-marker{ display:none; }
.c-r65-nietover-kop::before{ content:'▸ '; color:#8A867E; }
.c-r65-nietover[open] .c-r65-nietover-kop::before{ content:'▾ '; }
.c-r65-nietover-body{ margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.c-r65-nietover-rij{ font-size:11.5px; color:#8A867E; }

/* — 65a import — */
.c-r65-import{ }
.c-r65-import-sub{ font-size:12px; color:#6B6862; }
.c-r65-import-quote{ background:#0E4F4B; border-radius:12px; padding:13px 16px; margin-top:12px; }
.c-r65-import-quotetekst{ font-family:var(--font-kop,Fraunces),Georgia,serif; font-weight:600; font-size:15px; color:#FAF8F5; line-height:1.4; }
.c-r65-import-quotecap{ font-size:11px; color:#7FC4BE; margin-top:6px; }
.c-r65-import-tellers{ display:flex; gap:14px; margin-top:12px; }
.c-r65-teller{ flex:1; text-align:center; background:#fff; border:1px solid #DDD8CF; border-radius:10px; padding:9px 0; }
.c-r65-teller-getal{ display:block; font-family:var(--font-kop,Fraunces),Georgia,serif; font-weight:600; font-size:18px; color:#0A3936; }
.c-r65-teller-getal.is-accent{ color:#C87941; }
.c-r65-teller-lab{ font-size:10.5px; color:#8A867E; }
.c-r65-import-hulp{ font-size:11px; color:#8A867E; flex:1; }

@media (max-width:699px){
  .c-r65-top{ flex-wrap:wrap; }
  .c-r65-celpaar{ width:100%; }
  .c-r65-gehgrid{ grid-template-columns:1fr; }
  .c-r65-fab, .c-r65-vink{ min-width:24px; }
  .c-r65-menu{ width:min(260px,86vw); }
}

/* Ronde 65 (65h) — de missie-gesprekken alleen-lezen in de Opvolging-lijst. */
.c-gesprekrij-missiechip{ font-size:10.5px; font-weight:600; color:#0E4F4B; background:#EAF1F0; border-radius:999px; padding:2px 10px; flex:none; }
.c-gesprekrij-leeschip{ font-size:10.5px; color:#8A867E; border:1px solid #DDD8CF; border-radius:999px; padding:2px 10px; flex:none; }
.c-gesprek-readonly{ display:flex; flex-direction:column; gap:12px; }
.c-gesprek-ro-chips{ display:flex; gap:8px; }
.c-gesprek-ro-rij{ }
.c-gesprek-ro-label{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8A867E; }
.c-gesprek-ro-tekst{ font-size:13px; color:#2A2A28; line-height:1.5; margin-top:3px; }

/* #261 — de overschrijfbare groepsgrootte op het bord (boven mw-dyn). */
.mw-grootte{ display:flex; align-items:center; gap:8px; margin:2px 0 12px; }
.mw-grootte-lab{ font-size:12px; color:var(--ink-soft); }
.mw-grootte-pre{ color:var(--ink-soft); font-size:13px; }
/* Het invoerveld is een smal getal-vak, geen volle-breedte input: de
   compound-selector wint van .c-veldvak-invoer{width:100%} en flex:none
   belet dat de flex-rij hem uitrekt. */
.mw-grootte .mw-grootte-in{ flex:none; width:88px; text-align:center; }

/* De opvolg-navraag-rij (import): "geen opvolg nodig" = checkbox + label met
   ruimte ertussen, zoals elke andere checkbox-in-label in de app. */
.c-opvolg-navraag-geen{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }

/* ══════════════════ Ronde 66 — Aannames (Opvolging-tab 66a + FAB-popup 66b) ══════════════════ */

/* 66a — de lijst onder Opvolging → Aannames */
.c-aanlijst{ display:flex; flex-direction:column; gap:8px; padding:var(--pad-werkvlak); }
.c-aanlijst-sub{ font-size:var(--t-meta); color:var(--ink-soft); margin-bottom:2px; }
.c-aankaart{ background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-veld); padding:11px 14px; }
.c-aankaart[data-kant="groen"]{ border-left-color:var(--groen); }
.c-aankaart[data-kant="rood"]{ border-left-color:var(--rood); }
.c-aankaart[data-kant="grijs"]{ border-left-color:#B9B4AA; }
.c-aankaart.is-voorproef, .c-meetkaart.is-voorproef, .c-notkaart.is-voorproef{ opacity:.62; }
.c-aankaart-top{ display:flex; align-items:center; gap:8px; }
.c-aankaart-ring{ flex:none; width:9px; height:9px; border-radius:50%; border:2px solid var(--geel); box-sizing:border-box; }
.c-aankaart-tekst{ flex:1; min-width:0; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); cursor:pointer; }
.c-aankaart-tekst:hover{ color:var(--petrol); }
.c-aanchip{ flex:none; font-size:var(--t-meta); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:2px 10px; }
.c-aanchip[data-stand="bevestigd"]{ color:var(--groen); background:rgba(44,138,107,.12); }
.c-aanchip[data-stand="weerlegd"]{ color:var(--rood); background:rgba(192,86,58,.12); }
.c-aanchip[data-stand="verkennen"]{ color:var(--ink-soft); background:var(--cream2); }
.c-aankaart-fab{ flex:none; width:24px; height:24px; border-radius:50%; border:none; background:var(--terra); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 9px rgba(200,121,65,.32); }
.c-aanmeta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--t-meta); color:var(--ink-soft); margin-top:6px; }
.c-aanmeta-sep{ color:#C9C2B4; }
.c-aanmeta-herk{ color:var(--petrol); }

/* 66b — de popup "Nieuwe aanname" */
.c-aan66-kop{ display:flex; align-items:center; gap:8px; }
.c-aan66-ring{ flex:none; width:10px; height:10px; border-radius:50%; border:2px solid var(--geel); box-sizing:border-box; }
.c-aan66-koptekst{ font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--ink); }
.c-aan66-overtuiging{ width:100%; box-sizing:border-box; border:1.5px solid var(--petrol); border-radius:var(--r-veld); background:#fff; padding:10px 13px; font-size:var(--t-body); color:var(--ink); resize:vertical; margin-top:10px; font-family:inherit; }
.c-aan66-overtuiging.is-leeg{ border-color:var(--rood); }
.c-aan66-grid{ display:grid; grid-template-columns:70px 1fr; gap:8px 10px; align-items:start; margin-top:12px; }
.c-aan66-veldlabel{ font-size:var(--t-meta); color:var(--ink-soft); padding-top:9px; }
.c-aan66-hint{ background:var(--cream2); border-radius:var(--r-s); padding:9px 12px; margin-top:12px; font-size:var(--t-meta); color:var(--ink-soft); line-height:1.5; }
.c-aan66-landt{ flex:1; font-size:var(--t-meta); color:var(--ink-soft); }

/* de herbruikbare tag-input (chips + zoek/toevoeg) */
.c-tagveld{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; border:1px solid var(--line); border-radius:var(--r-s); background:#fff; padding:6px 9px; min-height:34px; box-sizing:border-box; }
.c-tagchip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink); border-radius:var(--r-pil); padding:3px 10px; }
.c-tagchip.is-groep{ background:#EAF1F0; }
.c-tagchip.is-persoon{ background:var(--cream2); }
.c-tagchip-x{ border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:10px; padding:0; line-height:1; }
.c-tagveld-inwrap{ position:relative; flex:1; min-width:120px; }
.c-tagveld-in{ width:100%; box-sizing:border-box; border:none; background:none; font-size:11.5px; color:var(--ink); padding:2px 0; outline:none; }
.c-tagveld-in::placeholder{ color:#B9B4AA; }
.c-tagveld-menu{ position:absolute; left:0; top:calc(100% + 4px); z-index:5; background:#fff; border:1px solid var(--line); border-radius:var(--r-s); box-shadow:0 10px 28px rgba(10,57,54,.14); min-width:180px; max-width:260px; overflow:hidden; }
.c-tagveld-optie{ display:block; width:100%; text-align:left; border:none; background:none; font-size:12px; color:var(--ink); padding:7px 12px; cursor:pointer; }
.c-tagveld-optie:hover{ background:var(--cream2); }
.c-tagveld-optie.is-nieuw{ color:var(--petrol); border-top:1px solid var(--line); }

/* 66b-detail (rij openen) */
.c-aan66-detailtekst{ font-size:var(--t-body); font-weight:var(--gew-vet); color:var(--ink); }
.c-aan66-detaildoel{ font-size:var(--t-meta); color:var(--ink-soft); margin-top:4px; }
.c-aan66-standrij{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.c-aan66-standlabel{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-aan66-bewijskop{ font-size:var(--t-meta); font-weight:var(--gew-vet); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; margin-top:16px; }
.c-aan66-bewijslijst{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.c-aan66-bewijsrij{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--cream2); border-radius:var(--r-s); padding:8px 11px; font-size:12px; color:var(--ink); }
.c-aan66-bewijsgroep{ flex:none; font-size:var(--t-meta); color:var(--ink-soft); }
.c-aan66-weg{ color:var(--rood); }
.c-aankoppelmenu{ min-width:220px; }

/* Ronde 66 / #276 — de aanname-rij is selecteerbaar (haak voor de globale FAB);
   geen mini-⊕ meer. Een sobere detail-knop (⋯) opent stand-wissel + bewijs. */
.c-aankaart{ cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.c-aankaart.is-selected{ border-color:var(--petrol); box-shadow:0 0 0 1.5px var(--petrol) inset; }
.c-aankaart.is-voorproef{ cursor:default; }
.c-aankaart-open{ flex:none; border:none; background:none; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-xs); }
.c-aankaart-open:hover{ background:var(--cream2); color:var(--ink); }
.c-aanlijst-hint{ font-size:var(--t-meta); color:var(--ink-soft); margin:-2px 0 6px; }

/* Ronde 66-update — de context-chip boven de applicatie-FAB + "VOOR {naam}"-menukop */
.c-fab-contextchip{ position:fixed; z-index:60; display:inline-flex; align-items:center; gap:8px; background:var(--petrol-deep); color:#fff; border-radius:var(--r-pil); padding:6px 8px 6px 14px; font-size:12px; box-shadow:0 6px 18px rgba(10,57,54,.28); max-width:min(80vw,340px); }
.c-fab-contextchip-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-fab-contextchip-x{ flex:none; border:none; background:rgba(255,255,255,.22); color:#fff; width:18px; height:18px; border-radius:50%; font-size:10px; line-height:1; cursor:pointer; }
.c-fab-contextchip-x:hover{ background:rgba(255,255,255,.38); }
.c-fabmenu-voor{ font-size:var(--t-meta); font-weight:var(--gew-vet); letter-spacing:.06em; color:var(--petrol); text-transform:uppercase; padding:2px 4px 8px; }

/* ══════════════════ Ronde 67 — Meetpunten (Opvolging-tab 67a + FAB-popup 67b + meet-nu 67d) ══════════════════ */

/* FAB-dot: meetpunt = open amber ruit (45° geroteerd vierkantje) */
.c-fabmenu-stip[data-k="meetpunt"]{ background:none; border:2px solid var(--geel); box-sizing:border-box; border-radius:1px; transform:rotate(45deg); }

/* 67a — de lijst */
.c-meetlijst{ display:flex; flex-direction:column; gap:8px; padding:var(--pad-werkvlak); }
.c-meetlijst-sub{ font-size:var(--t-meta); color:var(--ink-soft); margin-bottom:2px; }
.c-meetkaart{ background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-veld); padding:11px 14px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.c-meetkaart[data-kant="groen"]{ border-left-color:var(--groen); }
.c-meetkaart[data-kant="oranje"]{ border-left-color:#E07B39; }
.c-meetkaart[data-kant="grijs"]{ border-left-color:#B9B4AA; }
.c-meetkaart.is-selected{ border-color:var(--petrol); box-shadow:0 0 0 1.5px var(--petrol) inset; }
.c-meetkaart-top{ display:flex; align-items:center; gap:8px; }
.c-meetruit{ flex:none; width:10px; height:10px; border:2px solid var(--geel); box-sizing:border-box; border-radius:2px; transform:rotate(45deg); background:#fff; }
.c-meetkaart-naam{ flex:1; min-width:0; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); }
.c-meetkaart-soort{ font-weight:400; color:var(--ink-soft); }
.c-meetkaart-waarde{ flex:none; font-size:11.5px; color:var(--ink); }
.c-meetchip{ flex:none; font-size:var(--t-meta); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:2px 10px; }
.c-meetchip[data-stand="op-ritme"]{ color:var(--groen); background:rgba(44,138,107,.12); }
.c-meetchip[data-stand="over-tijd"]{ color:#fff; background:#E07B39; }
.c-meetchip[data-stand="wacht"]{ color:var(--ink-soft); background:var(--cream2); }

/* de ruitjes-strook */
.c-meetstrook67{ border-top:1px dashed var(--line); margin-top:9px; padding-top:10px; }
.c-meetruitjes{ display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap; }
.c-meetruitje{ border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; padding:2px; text-align:center; }
.c-meetruitje-ruit{ width:11px; height:11px; border:2px solid var(--geel); box-sizing:border-box; border-radius:2px; transform:rotate(45deg); background:#fff; }
/* De stand van de ruit hangt aan .c-ruitmerk en niet aan .c-meetruitje, want de
   legenda onder de strook draagt dezelfde ruiten als staal. Twee sets regels
   voor hetzelfde teken lopen binnen een maand uiteen, en dan wijst de legenda
   een ruit aan die er niet zo uitziet. */
.c-ruitmerk[data-status^="gedaan"] .c-meetruitje-ruit{ background:var(--geel); }
.c-ruitmerk.is-overtijd .c-meetruitje-ruit{ border-color:#E07B39; }
.c-ruitmerk.is-over{ opacity:.5; }
.c-ruitmerk.is-over .c-meetruitje-ruit{ border-color:#B9B4AA; text-decoration:line-through; }
.c-meetruitje.is-gekozen .c-meetruitje-ruit{ border-color:var(--petrol); box-shadow:0 0 0 3px #EAF1F0; }
.c-meetruitje-dl{ font-size:9.5px; color:var(--ink-soft); }
.c-meetruitje-wl{ font-size:9.5px; font-weight:var(--gew-vet); color:var(--ink); }
.c-meetruitje:not([data-status^="gedaan"]) .c-meetruitje-wl{ color:var(--ink-soft); font-weight:400; }
.c-meetruitje-plus{ align-self:center; border:1px dashed #B9B4AA; color:var(--petrol); background:none; font-size:11px; border-radius:var(--r-pil); padding:4px 11px; cursor:pointer; }

/* 67d — meet nu (in de uitklap) */
.c-meet67{ background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--geel); border-radius:var(--r-veld); padding:12px 14px; margin-top:10px; }
.c-meet67-kop{ font-size:12.5px; }
.c-meet67-koptitel{ font-weight:var(--gew-vet); color:var(--ink); }
.c-meet67-kopsub{ color:var(--ink-soft); }
.c-meet67-lab{ font-size:10px; font-weight:700; letter-spacing:.07em; color:var(--ink-soft); margin-top:12px; }
.c-meet67-getalrij{ display:flex; align-items:center; gap:10px; margin-top:5px; }
.c-meet67-getal{ flex:1; border:1.5px solid var(--petrol); border-radius:var(--r-s); background:#fff; padding:9px 12px; font-size:13px; color:var(--ink); }
.c-meet67-ref{ font-size:11px; color:var(--ink-soft); }
.c-meet67-inzrij{ display:flex; gap:8px; margin-top:5px; }
.c-meet67-veld{ flex:1; border:1px solid var(--line); border-radius:var(--r-s); background:#fff; padding:8px 11px; font-size:12px; color:var(--ink); }
.c-meet67-patroon{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:var(--r-s); background:#fff; padding:8px 11px; font-size:12px; color:var(--ink); margin-top:8px; font-family:inherit; resize:vertical; }
.c-meet67-seg{ display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; }
.c-meet67-seg.is-inline{ margin-top:0; }
.c-meet67-pil{ border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-size:11px; border-radius:var(--r-pil); padding:4px 12px; cursor:pointer; }
.c-meet67-pil.is-aan{ background:var(--petrol); color:#fff; border-color:var(--petrol); font-weight:var(--gew-vet); }
.c-meet67-voet{ display:flex; align-items:center; gap:10px; margin-top:12px; border-top:1px solid var(--cream2); padding-top:10px; }
.c-meet67-voetmeta{ flex:1; font-size:11px; color:var(--ink-soft); }
.c-meet67-over{ border:none; background:none; color:var(--ink-soft); font-size:11px; cursor:pointer; text-decoration:underline; }

/* 67b — popup-specifieke velden (deelt c-aan66-* met 66b) */
.c-meet67b-select{ border:1px solid var(--line); border-radius:var(--r-s); background:#fff; padding:8px 10px; font-size:12px; color:var(--ink); max-width:100%; }
.c-meet67b-aantal{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-meet67b-aantalin{ width:64px; border:1px solid var(--line); border-radius:var(--r-s); background:#fff; padding:8px 10px; font-size:12px; text-align:center; }
.c-meet67b-stel{ border:1.5px solid var(--petrol); color:var(--petrol); background:none; font-size:11px; font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:6px 13px; cursor:pointer; }
.c-meet67b-datums{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.c-meet67b-datumadd{ border:1px dashed var(--line); border-radius:var(--r-s); background:#fff; padding:4px 8px; font-size:11px; color:var(--ink-soft); }
.c-meet67b-richting{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-meet67b-verwacht{ flex:1; min-width:120px; border:1px solid var(--line); border-radius:var(--r-s); background:#fff; padding:8px 11px; font-size:12px; color:var(--ink); }

/* Ronde 67-D — een meetbare kompas-rij (kerngedrag) is selecteerbaar: klik erin en
   de applicatie-FAB → Meetpunt legt de koppeling. Geselecteerd = petrol-ring, net als
   de aanname-kaart. Geen ⊕ op de rij (globale regel: mini-fab enkel op popups). */
.c-mx-meetrij.is-fab-selected{ border-radius:var(--r-veld); box-shadow:0 0 0 1.5px var(--petrol) inset; }

/* Ronde 68 — de meetpunt-koppeling op een succescriterium als één koppel-taal.
   Gekoppeld = petrol chip met amber ruit-dot (reeksnaam + ritme, ↗ naar Opvolging →
   Meetpunten). Nog geen = gedempte gestreepte "nog geen meetpunt"-chip (een stáát;
   klik selecteert de rij en wijst naar de FAB, hij maakt nooit zelf de koppeling). */
.mx-koppel{ display:flex; align-items:center; min-height:34px; }
/* R127 §11 — de rand van de koppel-chip kreeg zijn token: vulling en rand
   horen bij elkaar, en de petrolrand zette de chip harder neer dan de rest
   van de koppel-taal. */
.c-koppelchip{ display:inline-flex; align-items:center; gap:5px; max-width:100%; border:1px solid var(--lijn-koppel); background:var(--vul-koppel); color:var(--petrol); border-radius:var(--r-pil); padding:5px 11px; font-size:11.5px; font-weight:var(--gew-vet); cursor:pointer; line-height:1.2; }
.c-koppelchip:hover{ background:#E0ECEA; }
.c-koppelchip-ruit{ flex:none; width:9px; height:9px; border:2px solid var(--geel); box-sizing:border-box; border-radius:2px; transform:rotate(45deg); background:var(--geel); }
.c-koppelchip-naam{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-koppelchip-sub{ font-weight:400; color:var(--ink-soft); }
.c-koppelchip-pijl{ font-weight:400; }
.c-koppelchip.is-leeg{ border:1px dashed #B9B4AA; background:none; color:var(--ink-soft); font-weight:400; }
.c-koppelchip.is-leeg:hover{ border-color:var(--petrol); color:var(--petrol); }

/* Ronde 69a — de open zone van een Opvolging-kaart: klik op de kaart klapt hem open
   (hier: de aanname-stand-wissel + het bewijs) én selecteert (teal/petrol rand). */
.c-aankaart-open-zone{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.c-aankaart-open-zone[hidden]{ display:none; }
.c-aankaart-open-zone .c-aan66-standrij{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ══ Ronde 69a — de risico-kaart onder Opvolging → Risico's, gedeelde
   kaartgrammatica (zelfde anatomie als .c-aankaart): status-kantlijn op de weging,
   rode soort-dot, titel, weging-chip, ⋯. Klik = selecteren + openklappen; de open
   zone draagt alléén het kans×impact-tikgrid. ══ */
.c-riskaart{ background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-veld); padding:11px 14px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.c-riskaart + .c-riskaart{ margin-top:8px; }
.c-riskaart[data-kant="rood"]{ border-left-color:var(--rood); }
.c-riskaart[data-kant="amber"]{ border-left-color:var(--geel); }
.c-riskaart[data-kant="grijs"]{ border-left-color:#B9B4AA; }
.c-riskaart.is-ongewogen{ opacity:.72; }
.c-riskaart.is-selected{ border-color:var(--petrol); box-shadow:0 0 0 1.5px var(--petrol) inset; }
.c-riskaart-top{ display:flex; align-items:center; gap:8px; }
.c-riskaart-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--rood); }
.c-riskaart-tekst{ flex:1; min-width:0; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-riskaart-chip{ flex:none; font-size:var(--t-meta); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:2px 10px; color:var(--ink-soft); background:var(--cream2); cursor:default; }
.c-riskaart[data-kant="rood"] .c-riskaart-chip{ color:var(--rood); background:rgba(192,86,58,.12); }
.c-riskaart[data-kant="amber"] .c-riskaart-chip{ color:#9A6B12; background:rgba(217,166,60,.16); }
.c-riskaart-open{ flex:none; border:none; background:none; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-xs); }
.c-riskaart-open:hover{ background:var(--cream2); color:var(--ink); }
.c-riskaart-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--t-meta); color:var(--ink-soft); margin-top:6px; }
.c-riskaart-sep{ color:#C9C2B4; }
.c-riskaart-metaleeg{ font-style:italic; color:#B9B4AA; }
.c-riskaart-actie{ border:none; background:none; padding:0; font-size:var(--t-meta); color:var(--petrol); cursor:pointer; }
.c-riskaart-actie:hover{ text-decoration:underline; }
.c-riskaart-open-zone{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.c-riskaart-open-zone[hidden]{ display:none; }

/* ══ Ronde 69a — de actie-kaart in de gedeelde Opvolging-kaartgrammatica: dichte
   kaart met soort-dot + titel + status-chip + ⋯, klik = openklappen + selecteren
   (teal rand via .is-open), open zone = status-stappen + besluit. De box is nu
   altijd een kolom (top-rij · metaregel · open zone), niet meer een flex-rij. ══ */
.c-actiekaart{ display:block; padding:11px 14px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.c-actiekaart.is-open{ display:block; padding:11px 14px; overflow:visible; border-radius:var(--r-status); border-color:var(--petrol); box-shadow:0 0 0 1.5px var(--petrol) inset; }
.c-actiekaart-top{ display:flex; align-items:center; gap:8px; }
.c-actiekaart-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--terra); }
.c-actiekaart-menu{ flex:none; border:none; background:none; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-xs); }
.c-actiekaart-menu:hover{ background:var(--cream2); color:var(--ink); }
.c-actiekaart-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--t-meta); color:var(--ink-soft); margin-top:6px; }
/* 87d — het scheidingsteken is tekst, dus het leest de tekst-trap: mist is de
   lichtste trede. #C9C2B4 is een lijnkleur en stond niet in de treden. */
.c-actiekaart-sep{ color:var(--line-ghost); }
.c-actiekaart-body{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; background:none; }
.c-actiekaart-body[hidden]{ display:none; }
.c-actiemenu-wijs{ color:var(--rood); }

/* ══ Ronde 69a — de gesprekkaart in de gedeelde Opvolging-kaartgrammatica: teal
   soort-dot (Gesprek) · onderwerp · status-chip · ⋯, open zone = modus-toggle +
   reflecties. Een missie-gesprek (is-lezen) draagt chips en opent readonly. ══ */
.c-gesprekkaart{ background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-veld); padding:11px 14px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.c-gesprekkaart + .c-gesprekkaart{ margin-top:8px; }
.c-gesprekkaart[data-kant="groen"]{ border-left-color:var(--groen); }
.c-gesprekkaart[data-kant="grijs"]{ border-left-color:#B9B4AA; }
.c-gesprekkaart.is-selected{ border-color:var(--petrol); box-shadow:0 0 0 1.5px var(--petrol) inset; }
.c-gesprekkaart-top{ display:flex; align-items:center; gap:8px; }
.c-gesprekkaart-dot{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--petrol); }
.c-gesprekkaart-titel{ flex:1; min-width:0; font-size:12.5px; font-weight:var(--gew-vet); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-gesprekkaart-groep{ flex:none; font-size:var(--t-meta); color:var(--ink-soft); background:var(--cream2); border-radius:var(--r-pil); padding:2px 8px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-gesprekkaart-chip{ flex:none; font-size:var(--t-meta); font-weight:var(--gew-vet); border-radius:var(--r-pil); padding:2px 10px; color:var(--ink-soft); background:var(--cream2); cursor:default; }
.c-gesprekkaart-chip[data-stand="gevoerd"]{ color:var(--groen); background:rgba(44,138,107,.12); }
.c-gesprekkaart-chip[data-stand="tevoeren"]{ color:var(--geel-tekst); background:var(--vul-amber); }
.c-gesprekkaart-missiechip{ flex:none; font-size:var(--t-meta); color:var(--petrol); background:var(--cream2); border-radius:var(--r-pil); padding:2px 8px; }
.c-gesprekkaart-leeschip{ flex:none; font-size:var(--t-meta); color:var(--ink-soft); }
.c-gesprekkaart-menu{ flex:none; border:none; background:none; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-xs); }
.c-gesprekkaart-menu:hover{ background:var(--cream2); color:var(--ink); }
.c-gesprekkaart-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--t-meta); color:var(--ink-soft); margin-top:6px; }
.c-gesprekkaart-sep{ color:#C9C2B4; }
.c-gesprekkaart-koppel.is-leeg{ color:#B9B4AA; }
.c-gesprekkaart-open-zone{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:9px; }
.c-gesprekkaart-open-zone[hidden]{ display:none; }
.c-gesprekkaart-modusrij{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.c-gesprekkaart-moduslabel{ font-size:var(--t-meta); color:var(--ink-soft); }
.c-gesprekkaart-planhint{ font-size:var(--t-meta); color:var(--ink-soft); margin:0; }

/* ══ Ronde 69a — de missie-statkaart krijgt de gedeelde shell-grammatica: soort-dot
   (Missie = open petrol ring), ⋯-object-menu rechts, teal-selectie (FAB-context). ══ */
.c-missiekaart-dot{ flex:none; width:10px; height:10px; border-radius:50%; border:2px solid var(--petrol); box-sizing:border-box; }
.c-missiekaart-menu{ flex:none; margin-left:auto; border:none; background:none; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-xs); }
.c-missiekaart-menu:hover{ background:var(--cream2); color:var(--ink); }
.c-missiekaart.is-selected{ border-color:var(--petrol); box-shadow:0 0 0 1.5px var(--petrol) inset; }

/* ══ Ronde 69b — het gedeelde popup-skelet (openSoortPopup) ══ */
.c-soortpop{ display:flex; flex-direction:column; gap:12px; }
/* De titel (+ soort-dot) staat sinds de kaart-grammatica-finale in de venster-
   titelbalk (openDetailVenster), gelijk aan de andere bewerk-popups; er is geen
   losse kop meer in de body. */
.c-soortpop-uitleg{ margin:-4px 0 0; font-size:var(--t-meta); color:var(--ink-soft); line-height:var(--lh-body); }
.c-soortpop-kern{ display:flex; flex-direction:column; gap:8px; }
.c-soortpop-veldlabel{ font-size:var(--t-meta); font-weight:var(--gew-vet); color:var(--petrol-deep, var(--petrol)); }
.c-soortpop-kernveld{ width:100%; box-sizing:border-box; }
.c-soortpop-kernveld:focus{ outline:none; border-color:var(--petrol); box-shadow:0 0 0 2px rgba(18,113,108,.18); }
.c-soortpop-kernveld.is-leeg{ border-color:var(--rood); box-shadow:0 0 0 2px rgba(192,86,58,.16); }
.c-soortpop-meer{ display:flex; flex-direction:column; gap:9px; }
.c-soortpop-meertoggle{ align-self:flex-start; border:none; background:none; padding:2px 0; font-size:var(--t-meta); font-weight:var(--gew-vet); color:var(--petrol); cursor:pointer; }
.c-soortpop-meertoggle:hover{ text-decoration:underline; }
.c-soortpop-meerzone{ display:flex; flex-direction:column; gap:9px; padding-top:2px; }
.c-soortpop-meerzone[hidden]{ display:none; }
.c-soortpop-landt{ font-size:var(--t-meta); color:var(--ink-soft); margin-right:auto; }

/* R88 — het rapport-archief in de samensteller: de zes laatste exports,
   klikbaar om terug te zien. Alleen met Team-licentie zichtbaar. */
.c-rapport-archief{ margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line-zacht); }
.c-rapport-archief-kop{
  font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-mist); margin-bottom:var(--sp-4);
}
.c-rapport-archief-rij{ display:flex; align-items:center; gap:var(--sp-3); padding:2px 0; }
.c-rapport-archief-open{
  flex:1; text-align:left; font:inherit; font-family:var(--font-ui);
  font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep);
  background:none; border:0; padding:0; cursor:pointer;
}
.c-rapport-archief-open:hover{ text-decoration:underline; }

/* R89/89d — de ghost-regels van de gratis staat. Geen balkje óver tekst: de
   tekst bestaat hier niet, alleen de maat ervan. */
.c-ghostregels{ display:block; }
.c-ghostregel{
  display:block; height:9px; border-radius:5px;
  background:var(--line-zacht); margin-bottom:5px;
}
.c-ghostregel:last-child{ margin-bottom:0; }
/* op een zacht vlak draagt het balkje de volgende trede, anders verdwijnt het */
.c-vlak-zacht .c-ghostregel,
[data-vlak="zacht"] .c-ghostregel{ background:var(--cream2); }

/* ═══════════════════════════════════════════════════════════════════════════
   Ronde 69 — consistentie-sweep over de Opvolging-kaarten (#298/#300/#301/#304).
   Eén soort-dot, één selectie-conventie zonder layout-shift, één status-chip,
   en cursor-hygiëne. Deze regels staan bewust achteraan zodat ze de eerdere
   per-tab varianten overschrijven (gelijke specificiteit → bronvolgorde wint).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── #301 — de gedeelde soort-dot. Vorm + kleur = soort, identiek op de kaarten,
   in de popup-koppen en (later) op de FAB. Vol = een bestaand ding, ring = iets
   dat je nog invult/opstart, ruit = meetpunt, vierkant = notitie. */
.soort-dot{ flex:none; width:10px; height:10px; box-sizing:border-box; background:none; }
.soort-dot[data-soort="actie"]{    border-radius:50%; background:var(--terra); }
.soort-dot[data-soort="gesprek"]{  border-radius:50%; background:var(--petrol); }
.soort-dot[data-soort="risico"]{   border-radius:50%; background:var(--rood); }
.soort-dot[data-soort="missie"]{   border-radius:50%; border:2px solid var(--petrol-deep); }
.soort-dot[data-soort="aanname"]{  border-radius:50%; border:2px solid var(--geel); }
.soort-dot[data-soort="meetpunt"]{ width:9px; height:9px; border:2px solid var(--geel); border-radius:2px; background:#fff; transform:rotate(45deg); }
.soort-dot[data-soort="notitie"]{  border-radius:2px; background:#B9B4AA; }
/* R107 · borging: een ring om een gevulde kern (⊙) — een kern die moet blijven
   staan. Dezelfde familie als de bestaande tekens (dot = doen, ◇ = meten,
   ◆ = mijlpaal), geen nieuw vormidioom, en hij leest ook klein. Petrol-deep,
   want borging is geen nieuwe handeling-soort maar de duurzame staat ervan.
   De kern komt uit een box-shadow: één element, geen tweede span, en dus
   bruikbaar overal waar de soort-dot al staat. */
.soort-dot[data-soort="borging"]{ border-radius:50%; background:none;
  border:1.5px solid var(--petrol-deep);
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 5px var(--petrol-deep); }

/* ── #298 — selectie zonder layout-shift. De randdikte blijft gelijk in rust én
   geselecteerd (1px); alleen de kleur wisselt (grijs → petrol) en er komt een
   zachte slagschaduw bij. Geen inset-schaduw meer die de kaart deed verspringen. */
.c-aankaart.is-selected, .c-riskaart.is-selected, .c-gesprekkaart.is-selected,
.c-meetkaart.is-selected, .c-actiekaart.is-open, .c-missiekaart.is-selected{
  border-color:var(--petrol); box-shadow:0 8px 22px rgba(10,57,54,.1);
}

/* ── #300 — de missie-status-chip volgt nu dezelfde gevulde chip-taal als de
   andere kaarten (zachte kleurvulling, geen dashed-outline). Nog-niet-gestart
   is neutraal grijs, gestart is petrol. */
.c-missiekaart-status.is-gestart{ background:rgba(18,113,108,.12); color:var(--petrol); border:none; }
.c-missiekaart-status.is-nietgestart{ background:rgba(107,104,98,.12); color:var(--ink-soft); border:none; }

/* ── #304 — cursor-hygiëne. De kaart, het ⋯-menu, sprong-chips en echte knoppen
   wijzen naar 'klikbaar'; status-chips en labels zijn tekst, geen doel. */
.c-riskaart-chip, .c-gesprekkaart-chip, .c-missiekaart-status,
.c-meetchip, .c-actiekaart-meta, .c-riskaart-meta, .c-gesprekkaart-meta,
.c-riskaart-metaleeg, .c-gesprekkaart-moduslabel,
.c-missiekaart-meta{ cursor:default; }

/* ── #299 — de compacte missie-statkaart: kop-regel + één metaregel i.p.v. vijf
   losse blokken. Doel · deadline · voortgang · agents (kleine chips). */
.c-missiekaart-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--ink-soft); margin-top:6px; }
.c-missiekaart-metasep{ color:#C9C2B4; }
.c-missiekaart-metadoel{ color:var(--ink); }
.c-missiekaart-metaaf{ color:var(--geel-tekst); }
.c-missiekaart-agentchip{ font-size:10.5px; color:var(--petrol); background:var(--cream2); border-radius:var(--r-pil); padding:1px 8px; }

/* ── #69b — de soort-dot in de titelbalk van de rijkere aanmaak-/bewerk-popups
   (Missie · Gesprek · Meetpunt · Actie). Eén rij: dot + titel, verticaal gecentreerd. */
.c-venster-titelrij{ display:flex; align-items:center; gap:8px; }

/* ═══ Ronde 70 — Notitie als 7de FAB-item + de Notities-tab ═══ */
/* de FAB-stip: grijs vierkant, in dezelfde familie als de andere zes iconen */
.c-fabmenu-stip[data-k="notitie"]{ background:#B9B4AA; border-radius:2px; }
/* R107 · dezelfde ⊙ als de soort-dot: ring om een kern, petrol-deep. */
.c-fabmenu-stip[data-k="borging"]{ background:none; border-radius:50%;
  border:1.5px solid var(--petrol-deep); box-sizing:border-box;
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 5px var(--petrol-deep); }
/* de notitie-kaart in de 69a-grammatica: soort-dot · tekst · herkomst-chip · ⋯ */
.c-notlijst{ display:flex; flex-direction:column; gap:8px; }
.c-notkaart{ background:var(--cream); border:1.5px solid var(--line); border-left:3px solid #B9B4AA; border-radius:var(--r-veld); padding:11px 14px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.c-notkaart.is-selected{ border-color:var(--petrol); box-shadow:0 8px 22px rgba(10,57,54,.1); }
.c-notkaart-top{ display:flex; align-items:flex-start; gap:8px; }
.c-notkaart-top .soort-dot{ margin-top:3px; }
.c-notkaart-tekst{ flex:1; min-width:0; font-size:12.5px; color:var(--ink); line-height:var(--lh-body); white-space:pre-wrap; word-break:break-word; }
.c-notkaart-herkomst{ flex:none; font-size:var(--t-meta); color:var(--ink-soft); background:var(--cream2); border-radius:var(--r-pil); padding:2px 8px; cursor:default; }
.c-notkaart-menu{ flex:none; border:none; background:none; color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:var(--r-xs); }
.c-notkaart-menu:hover{ background:var(--cream2); color:var(--ink); }

/* ═══ Ronde 70 (R70-C) — "markeer voor jezelf": persoonlijke vlag op elke
   Opvolging-kaart. Klein vlag-streepje rechtsboven; kiezer in het ⋯-menu. ═══ */
[data-vlag]{ position:relative; }
.c-vlagstreep{ position:absolute; top:9px; right:0; width:4px; height:15px; border-radius:2px 0 0 2px; pointer-events:none; }
.c-vlagstreep[data-vlag="groen"]{ background:var(--groen); }
.c-vlagstreep[data-vlag="amber"]{ background:var(--geel); }
.c-vlagstreep[data-vlag="rood"]{ background:var(--rood); }
/* #315 — .c-vlagkiezer/.c-vlagswatch (de oude 4-swatch kiezer) verviel: de vlag is
   nu één klikbare toggle op de kaart (.c-vlagstreep, zie r71-uniform.css sectie G). */


/* ═══════════════════════════════════════════════════════════════════
   R89a · DE FILM — hoe de verdeling van een groep bewoog
   Nieuwste kader boven. De laatste twee staan open, alles daarvoor klapt in tot
   zijn kopregel: een traject van twee jaar met een maandelijkse oogst wordt
   anders een lijst waarin niemand het begin nog vindt.
   Het onderscheid oorzaak/toeval zit in de POSITIE, niet in een label: de bron
   staat als chip ín de kaderkop, "wat er liep" staat ingesprongen eronder en
   draagt bewust géén eigen kaartrand. */
.c-film{ display:flex; flex-direction:column; gap:var(--sp-4); }
.c-film-kader{
  border:1px solid var(--line); border-radius:var(--r-veld);
  background:var(--wit); overflow:hidden;
}
/* Het eerste kader is het nulpunt van deze groep; de mint-rand zegt dat zonder
   een tweede kleur te introduceren. */
.c-film-kader.is-begin{ border-left:3px solid var(--petrol-light); }

.c-film-kop{
  display:flex; align-items:center; gap:var(--sp-4); width:100%;
  padding:var(--sp-5) var(--sp-6); border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--font-ui); font-size:var(--t-klein);
}
.c-film-kop:hover{ background:var(--cream); }
.c-film-datum{ flex:none; font-weight:var(--gew-vet); color:var(--ink); }
.c-film-merk{
  flex:none; font-size:var(--t-meta); font-weight:var(--gew-zwaar);
  letter-spacing:.06em; text-transform:uppercase; color:var(--groen);
}
.c-film-merk.is-nu{ color:var(--petrol-deep); }
/* De bron-chip: het enige element op dit scherm dat oorzaak mag beweren. */
.c-film-bron{
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:1px var(--sp-4); border-radius:var(--r-pil);
  background:var(--vul-mint); color:var(--petrol-deep); font-size:var(--t-meta);
}
.c-film-hand{ flex:0 1 auto; color:var(--ink-mist); font-size:var(--t-meta); }
.c-film-grootte{ flex:none; margin-left:auto; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.c-film-pijl{ flex:none; color:var(--ink-mist); font-size:var(--t-meta); transition:transform 140ms ease-out; }
.c-film-kader.is-open .c-film-pijl{ transform:rotate(180deg); }

.c-film-lijf{ display:none; padding:0 var(--sp-6) var(--sp-6); }
.c-film-kader.is-open .c-film-lijf{ display:block; }

/* De strip: het aantal staat ín het segment, de kleur versterkt. */
.c-film-strip{ display:flex; height:24px; border-radius:var(--r-veld); overflow:hidden; margin-bottom:var(--sp-5); }
.c-film-seg{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:var(--t-meta); font-weight:var(--gew-zwaar);
  color:var(--ink); background:var(--cream2);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.7);
}
.c-film-seg[data-k="groen"]{ background:rgba(44,138,107,.28); }
.c-film-seg[data-k="amber"],.c-film-seg[data-k="geel"]{ background:rgba(217,166,60,.32); }
.c-film-seg[data-k="rood"]{ background:rgba(192,86,58,.26); }
/* R94 — geen aantal ingevuld: het segment draagt "?" en een streepjesrand, en
   de breedtes zijn gelijk. Liever een open vraag dan een verzonnen getal. */
.c-film-seg.is-onzeker{ border:1px dashed rgba(185,180,170,.85); color:#8A867E; }

.c-film-quote{
  margin:0 0 var(--sp-5); padding-left:var(--sp-5);
  border-left:2px solid var(--petrol-light);
  font-family:var(--font-ui); font-size:var(--t-body); font-style:italic;
  color:var(--petrol-deep); line-height:1.45;
}
.c-film-afzender{ display:block; margin-top:var(--sp-2); font-style:normal; font-size:var(--t-klein); color:var(--ink-soft); }

.c-film-behoeftes{ list-style:none; margin:0 0 var(--sp-5); padding:0; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); }
.c-film-behoeftes li{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.c-film-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--line); }
.c-film-dot[data-k="groen"]{ background:var(--groen); }
.c-film-dot[data-k="amber"],.c-film-dot[data-k="geel"]{ background:var(--geel); }
.c-film-dot[data-k="rood"]{ background:var(--rood); }
.c-film-behn{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.c-film-beh{ flex:1 1 12em; min-width:0; color:var(--ink-soft); }

/* Ingesprongen, zonder kaartrand: de positie maakt het onderscheid met de
   verschuiving erboven. Een rand zou er een tweede feit van maken. */
.c-film-liep{ margin-left:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.c-film-liepkop{
  margin:0 0 var(--sp-3); font-family:var(--font-ui); font-size:var(--t-meta);
  font-weight:var(--gew-zwaar); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mist);
}
.c-film-liepitems{ list-style:none; margin:0; padding:0; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); }
.c-film-liepitems li{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-2); }
/* Een doorloper wisselde in dit venster niet van stand: stil, want herhalen is
   ruis en weglaten is liegen. */
.c-film-liepitems li.is-doorloper{ color:var(--ink-mist); }
.c-film-liepitems li.is-doorloper .c-film-sdot{ opacity:.5; }
.c-film-sdot{ flex:none; width:7px; height:7px; border-radius:2px; background:var(--petrol-light); }
.c-film-liepwat{ flex:1 1 auto; min-width:0; }
.c-film-stand{ flex:none; color:var(--ink-mist); font-size:var(--t-meta); }
.c-film-stil{ margin:0; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-mist); }

/* 89c · mobiel — alleen het nieuwste kader staat open (in JS), en de kop mag
   afbreken in plaats van te knijpen. */
@media (max-width:699px){
  .c-film-kop{ flex-wrap:wrap; min-height:44px; }
  .c-film-grootte{ margin-left:0; }
  .c-film-pijl{ margin-left:auto; }
  .c-film-liep{ margin-left:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   R91 · het bord als samenwerkingsbord
   De sessie beweegt van boven naar onder: check-in in de kop, de vorige
   check-out als punt 0, blok voor blok, check-out onderaan. */

/* De ritueelregel: één regel onder de kop, nooit per blok herhaald. */
.c-ritueel{
  margin:var(--sp-3) 0 var(--sp-6);
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); line-height:1.5;
}
.c-sessiekop-start{ margin-left:auto; }

/* Punt 0: wat er vorige keer over de sessie zelf gezegd is. */
.c-vorigecheckout{
  margin-bottom:var(--sp-6); padding:var(--sp-5) var(--sp-6);
  background:var(--cream2); border-radius:var(--r-veld);
}
.c-vorigecheckout-kop{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.c-vorigecheckout-lab{
  font-family:var(--font-ui); font-size:var(--t-meta); font-weight:var(--gew-zwaar);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mist);
}
.c-vorigecheckout-dots{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.c-vorigecheckout-wie{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.c-vorigecheckout-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); flex:none; }
.c-vorigecheckout-dot[data-k="groen"]{ background:var(--groen); }
.c-vorigecheckout-dot[data-k="amber"],.c-vorigecheckout-dot[data-k="geel"]{ background:var(--geel); }
.c-vorigecheckout-dot[data-k="rood"]{ background:var(--rood); }
.c-vorigecheckout-naam{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); }
.c-vorigecheckout-weg{
  margin-left:auto; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:var(--sp-2);
}
.c-vorigecheckout-weg:hover{ text-decoration:underline; }
.c-vorigecheckout-zinnen{
  margin:var(--sp-4) 0 0; font-family:var(--font-ui); font-size:var(--t-klein);
  color:var(--ink-soft); line-height:1.5;
}
.c-vorigecheckout-klaar{
  margin:var(--sp-4) 0 0; font-family:var(--font-ui); font-size:var(--t-klein);
  color:var(--ink-mist); line-height:1.5;
}

/* De bord-focus: alleen tijdens een lopende sessie. */
.c-dash-sec.is-bordfocus{
  position:relative;
  border:1.5px solid var(--petrol); box-shadow:0 0 0 3px rgba(18,113,108,.10);
  /* de pil hangt op de onderrand, dus het blok houdt ruimte vrij: anders legt
     ze zich over de laatste rij van het blok dat ze juist bespreekbaar maakt */
  padding-bottom:calc(var(--sp-7) + 30px);
}
.c-bordfocus-tag{
  position:absolute; top:calc(-1 * var(--sp-5)); left:var(--sp-6);
  font-family:var(--font-ui); font-size:9.5px; font-weight:var(--gew-zwaar);
  letter-spacing:.06em; text-transform:uppercase; color:var(--wit);
  background:var(--petrol); border-radius:var(--r-pil); padding:2px var(--sp-4);
}
/* Het vragenpilletje draagt overal dezelfde drie vragen. */
.c-bordfocus-pil{
  position:absolute; bottom:calc(-1 * var(--sp-5)); left:var(--sp-6); right:var(--sp-6);
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-pil);
  padding:var(--sp-3) var(--sp-5); box-shadow:0 2px 8px rgba(10,57,54,.08);
}
.c-bordfocus-vragen{ font-family:var(--font-ui); font-size:9.5px; color:var(--ink-soft); }
.c-bordfocus-vul,.c-bordfocus-af{
  font-family:var(--font-ui); font-size:9.5px; font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:2px var(--sp-3);
}
.c-bordfocus-af{ margin-left:auto; color:var(--ink-soft); }
.c-bordfocus-vul:hover,.c-bordfocus-af:hover{ text-decoration:underline; }
.c-dash-sec-besproken{
  font-family:var(--font-ui); font-size:10.5px; font-weight:var(--gew-vet); color:var(--petrol);
}

/* De check-out-band deelt de onderste rij met de FAB: band links met flex:1,
   en rechts blijft ruimte staan zodat de knop nooit onder de FAB valt. */
.c-checkoutrij{ display:flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-7); }
.c-checkoutband{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); background:var(--cream2); border-radius:var(--r-veld);
  margin-right:88px;
}
.c-checkout-knop{ flex:none; }
.c-checkoutband-tekst{
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Alle blokken besproken: de band is dan de enige stap die nog openstaat. */
.c-checkoutband.is-klaar{ background:var(--vul-mint); }
.c-checkoutband.is-klaar .c-checkoutband-tekst{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
@media (max-width:699px){
  .c-checkoutband{ flex-wrap:wrap; margin-right:72px; }
  /* de pil blijft op de onderrand hangen: static zette haar tussen de kop en
     de inhoud, want ze wordt vóór de inhoud in het blok gehangen */
  .c-bordfocus-pil{ padding:var(--sp-3) var(--sp-4); }
  .c-dash-sec.is-bordfocus{ padding-bottom:calc(var(--sp-7) + 56px); }
  .c-bordfocus-tag{ top:calc(-1 * var(--sp-4)); }
}

/* ═══════════════════════════════════════════════════════════════════
   R91 · de check-in als overnamescherm
   Vol petrol-deep: een deelnemer die kleur bekent mag niet beïnvloed worden
   door wat er achter het venster op het bord staat. Een sluier laat het bord
   doorschemeren, dit niet. */
.c-checkin{
  position:fixed; inset:0; z-index:160; background:var(--schil);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-7);
  overflow-y:auto;
}
body.is-checkin{ overflow:hidden; }
.c-ci-kaart{
  width:min(720px, 100%); background:var(--cream); border-radius:var(--r-kaart, 14px);
  padding:var(--sp-8) var(--sp-8) var(--sp-7); box-shadow:0 24px 64px rgba(10,57,54,.34);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.c-ci-kop{ display:flex; align-items:baseline; gap:var(--sp-5); }
.c-ci-over{
  font-family:var(--font-ui); font-size:var(--t-meta); font-weight:var(--gew-zwaar);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mist);
}
.c-ci-teller{ margin-left:auto; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-mist); }
.c-ci-titel{
  margin:0; font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:var(--t-titel); color:var(--petrol-deep); line-height:1.15;
}
.c-ci-sub,.c-ci-waarover,.c-ci-vraag{ margin:0; font-family:var(--font-ui); color:var(--ink-soft); font-size:var(--t-klein); }
.c-ci-titelgroep{ color:var(--petrol); }
.c-ci-noot{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-mist); }
.c-ci-waarover{ color:var(--petrol); font-weight:var(--gew-vet); }
.c-ci-vraag{ font-size:var(--t-body); color:var(--ink); }

/* de tafel */
.c-ci-tafel{ display:flex; flex-direction:column; }
.c-ci-rij{
  display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line);
}
.c-ci-rij.is-afwezig{ opacity:.45; }
.c-ci-naam{ font-family:var(--font-ui); font-size:var(--t-body); color:var(--ink); flex:none; }
.c-ci-gast{
  font-family:var(--font-ui); font-size:var(--t-meta); color:var(--terra);
  border:1px solid var(--terra); border-radius:var(--r-pil); padding:0 var(--sp-3);
}
.c-ci-chips{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; flex:1; min-width:0; }
.c-ci-chip{
  font-family:var(--font-ui); font-size:var(--t-meta); color:var(--petrol-deep);
  background:var(--vul-mint); border-radius:var(--r-pil); padding:1px var(--sp-4);
}
.c-ci-beurten{ font-family:var(--font-ui); font-size:var(--t-meta); color:var(--ink-mist); }
.c-ci-vink{
  flex:none; width:26px; height:26px; border-radius:var(--r-pil); cursor:pointer;
  border:1px solid var(--line); background:var(--wit); color:var(--groen);
  font-size:var(--t-klein); line-height:1;
}
/* de rol staat stil naast de naam: het zegt waarom iemand hier zit, en mag
   nooit zwaarder wegen dan de naam zelf */
.c-ci-rol{ font-family:var(--font-ui); font-size:var(--t-meta); color:var(--ink-mist); flex:none; }
.c-ci-meer{
  flex:none; width:26px; height:26px; border-radius:var(--r-pil); cursor:pointer;
  border:0; background:none; color:var(--ink-mist); font-size:var(--t-body); line-height:1;
}
.c-ci-meer:hover{ background:var(--cream2); color:var(--ink); }
/* de bevestiging staat ónder de rij, niet als popup: je ziet wie je weghaalt */
.c-ci-bevestig{
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5); margin:var(--sp-3) 0 var(--sp-4);
  background:var(--cream2); border-radius:var(--r-veld);
}
.c-ci-bevestig-t{ flex:1; min-width:180px; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); }
.c-ci-weg{
  flex:none; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-vet);
  color:var(--rood); background:none; border:1px solid var(--rood); border-radius:var(--r-pil);
  padding:var(--sp-2) var(--sp-5); cursor:pointer;
}
.c-ci-weg:hover{ background:var(--rood); color:var(--wit); }
.c-ci-rij.is-ghost{ border-bottom:0; flex-wrap:wrap; }
.c-ci-ghostveld,.c-ci-zin,.c-ci-mveld{
  flex:1; min-width:0; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-veld); padding:var(--sp-3) var(--sp-4); background:var(--wit);
}
/* Drie velden op één rij: de naam krijgt de ruimte, de twee keuzes nemen wat ze
   nodig hebben en wijken naar de volgende regel als de kaart smal wordt. */
.c-ci-ghostveld{ flex:1 1 40%; min-width:150px; max-width:100%; }

/* de drie standen */
.c-ci-standen{ display:flex; gap:var(--sp-9); flex-wrap:wrap; }
/* 91b · de drie standen zijn het hart van de beurt, dus krijgen ze de maat van
   het design: de stip boven het woord, niet ernaast, en een vlak dat groot
   genoeg is om zonder mikken te raken. De rand van de gekozen stand neemt de
   eigen kleur aan — petrol zou hier een vierde kleur toevoegen aan een keuze
   die er maar drie kent. */
.c-ci-stand{
  flex:1 1 0; min-width:140px; min-height:86px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-5);
  background:var(--wit); border:1.5px solid var(--line); border-radius:var(--r-veld);
  font-family:var(--font-ui); font-size:var(--t-nav); color:var(--ink-soft);
  transition:border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.c-ci-standdot{ width:20px; height:20px; border-radius:50%; background:var(--line); flex:none; }
.c-ci-stand[data-k="groen"] .c-ci-standdot{ background:var(--groen); }
.c-ci-stand[data-k="amber"] .c-ci-standdot{ background:var(--geel); }
.c-ci-stand[data-k="rood"] .c-ci-standdot{ background:var(--rood); }
.c-ci-stand:hover{ border-color:var(--line-sterk); color:var(--ink); }
.c-ci-stand.is-aan{ color:var(--ink); font-weight:var(--gew-vet); }
.c-ci-stand[data-k="groen"].is-aan{ border-color:var(--groen); box-shadow:0 0 0 3px rgba(44,138,107,.12); }
.c-ci-stand[data-k="amber"].is-aan{ border-color:var(--geel); box-shadow:0 0 0 3px rgba(217,166,60,.14); }
.c-ci-stand[data-k="rood"].is-aan{ border-color:var(--rood); box-shadow:0 0 0 3px rgba(192,86,58,.12); }
/* De keuze ís de volgende stap: geen knop, wel een overgang, zodat je ziet dat
   je keuze geland is voordat de volgende beurt binnenkomt. */
@keyframes ciKomt{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes ciWeg{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-10px); } }
.c-ci-kaart.is-beurt{ animation:ciKomt .24s ease both; }
.c-ci-kaart.is-weg{ animation:ciWeg .3s ease both; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .c-ci-kaart.is-beurt,.c-ci-kaart.is-weg{ animation:none; }
  .c-ci-kaart.is-weg{ opacity:.4; }
}

/* de matrix */
.c-ci-matrix{ display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; }
.c-ci-mrij{ display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.c-ci-mwie{ flex:0 0 40%; min-width:0; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-ci-mcellen{ display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.c-ci-mcel{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.c-ci-mcel[data-k="groen"]{ background:var(--groen); }
.c-ci-mcel[data-k="amber"]{ background:var(--geel); }
.c-ci-mcel[data-k="rood"]{ background:var(--rood); }
.c-ci-mcel.is-nu{ width:14px; height:14px; box-shadow:0 0 0 2px var(--petrol-deep); }
.c-ci-mwoord{ flex:1; min-width:0; font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); }
.c-ci-mplus{
  flex:none; margin-left:auto; font-family:var(--font-ui); font-size:var(--t-klein);
  font-weight:var(--gew-vet); color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:var(--sp-2);
}
.c-ci-mplus:hover{ text-decoration:underline; }
/* de sessie-rij sluit de matrix af: dezelfde kolommen, een eigen grens */
.c-ci-mrij.is-sessie{ border-bottom:0; border-top:1px solid var(--line-sterk); margin-top:var(--sp-3); padding-top:var(--sp-4); }
.c-ci-mrij.is-sessie .c-ci-mwie{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.c-ci-mrij.is-sessie .c-ci-mwoord{ color:var(--ink-mist); }

/* verzameld */
.c-ci-verzameld{ display:flex; flex-direction:column; }
.c-ci-vrij{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.c-ci-vdot{ width:11px; height:11px; border-radius:50%; background:var(--line); flex:none; }
.c-ci-vdot[data-k="groen"]{ background:var(--groen); }
.c-ci-vdot[data-k="amber"]{ background:var(--geel); }
.c-ci-vdot[data-k="rood"]{ background:var(--rood); }
.c-ci-vnaam{ font-family:var(--font-ui); font-size:var(--t-body); color:var(--ink); flex:none; }
.c-ci-vzin{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); font-style:italic; flex:1; min-width:0; }
.c-ci-vvraag{
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--petrol-deep);
  background:none; border:0; cursor:pointer; padding:var(--sp-2); text-align:left;
}
.c-ci-vvraag:hover{ text-decoration:underline; }

.c-ci-voet{ display:flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-4); }
.c-ci-voet .c-knop{ margin-left:auto; }
.c-ci-stil{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); background:none; border:0; cursor:pointer; padding:var(--sp-3); }
.c-ci-stil:hover{ text-decoration:underline; }

@media (max-width:699px){
  .c-checkin{ padding:0; align-items:stretch; }
  .c-ci-kaart{ width:100%; border-radius:0; min-height:100%; padding:var(--sp-7) var(--sp-5); }
  .c-ci-stand{ min-height:76px; min-width:92px; }
  .c-ci-ghostgroep,.c-ci-ghostsoort{ max-width:100%; flex:1 1 44%; }
  .c-ci-mwie{ flex:0 0 100%; }
}

/* R91 · een check-in-woordje als signaal: zelfde anatomie, met bron-chip. */
.c-signaal.is-checkin .c-signaal-bron{
  display:inline-block; margin-left:var(--sp-4);
  font-family:var(--font-ui); font-size:var(--t-meta); color:var(--petrol-deep);
  background:var(--vul-mint); border-radius:var(--r-pil); padding:1px var(--sp-4);
}
.c-ci-ghostgroep{
  flex:0 1 auto; max-width:26%; min-width:110px;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-veld);
  padding:var(--sp-3) var(--sp-4); background:var(--wit);
}
.c-ci-ghostsoort{
  flex:0 1 auto; max-width:26%; min-width:104px;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft);
  border:1px solid var(--line); border-radius:var(--r-veld);
  padding:var(--sp-3) var(--sp-4); background:var(--wit);
}
/* De sessiekop-regel is de deur naar het ritme: klikbaar, maar niet luid. */
.c-sessiekop-inricht{
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
}
.c-sessiekop-inricht:hover{ text-decoration:underline; }
/* R91 · de vooruitblik: wat de volgende ronde toevoegt. Stil, want het is een
   belofte, geen instructie. */
.c-ci-vooruit{
  margin:0; padding:var(--sp-4) var(--sp-5);
  background:var(--vul-mint); border-radius:var(--r-veld);
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--petrol-deep); line-height:1.5;
}
.c-bord-eerste{
  margin:0 0 var(--sp-6); font-family:var(--font-ui); font-size:var(--t-klein);
  color:var(--ink-mist); line-height:1.5;
}

/* ═══════════════════════════════════════════════════════════════════
   R93 · splash + verwelkoming bij een demo (93f → 93e)
   De splash vult het scherm in schil-kleur; de verwelkoming legt het bord
   eronder in petrol-deep op 30% en zet er één kaart op. Geen tweede
   dashboard: het échte bord ligt er al. */
.c-verwelkoming{ position:fixed; inset:0; z-index:930; }
body.is-verwelkoming{ overflow:hidden; }
.c-verwelkoming.is-weg{ opacity:0; transition:opacity .4s ease; pointer-events:none; }

/* 93f · de aanloop speelt ín de kaart. Ze is het eerste beeld van dít venster,
   geen laag over de app: de kaart staat er meteen op haar eigen maat, met haar
   inhoud nog onzichtbaar, en de lijn loopt binnen haar randen. Op dat crème
   vlak tekent de lijn weer in petrol, zoals in het ontwerp. */
.c-vw-intro{
  position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:var(--cream); padding:var(--sp-14) var(--sp-10) var(--sp-12);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--sp-5);
  transition:opacity .38s ease; cursor:pointer; overflow:hidden;
}
.c-vw-intro.is-weg{ opacity:0; }
.c-vw-intro svg{ width:100%; height:auto; }
.c-vw-lijn{ fill:none; stroke:var(--petrol-deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.c-vw-punt{ fill:var(--terra); opacity:0; transition:opacity .4s ease, transform .7s ease; }
.c-vw-intro.toon-punt .c-vw-punt{ opacity:1; }
/* De drie zinnen wisselen op dezelfde plek, dus ze liggen op elkaar. Dat stond
   hier als een vast vlak van 92px met drie absolute zinnen erin, en dat is een
   maat die alleen op een breed scherm klopt: op een telefoon telt de langste
   zin van de portfolio-app zes regels, en die liepen door de knop eronder.
   Eén grid-cel doet hetzelfde stapelen zonder een maat te verzinnen — het vlak
   is precies zo hoog als de langste zin, op elk scherm en in elke taal. */
.c-vw-zinnen{ position:relative; display:grid; width:100%; text-align:center; }
.c-vw-zinnen.is-een-zin{ height:auto; }
.c-vw-zin{
  grid-area:1 / 1; margin:0; opacity:0;
  font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:var(--t-kop-xl); line-height:1.35; color:var(--petrol-dark);
  transition:opacity .55s ease;
}
/* alleen de naam draagt de kleur: "Cohentis helpt je" in terracotta, de rest
   van de zin gewoon. Een hele zin in terracotta leest als een banner. */
.c-vw-merk{ color:var(--terra); }
.c-vw-intro.toon-een .is-een,
.c-vw-intro.toon-twee .is-twee,
.c-vw-intro.toon-drie .is-drie{ opacity:1; }
/* zolang de aanloop speelt houdt de kaart haar maat, maar niet haar inhoud */
.c-vw-kaart.is-aanloop > *:not(.c-vw-intro){ opacity:0; }

/* 93e · de verwelkoming */
.c-vw-dim{
  position:absolute; inset:0; background:rgba(10,57,54,.30);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-7);
  opacity:0; transition:opacity .5s ease;
}
.c-verwelkoming.is-open .c-vw-dim{ opacity:1; }
.c-vw-kaart{
  position:relative;
  width:min(460px, 92%); min-height:392px; background:var(--cream); border-radius:var(--r-venster);
  box-shadow:0 24px 60px rgba(10,57,54,.3); padding:var(--sp-14) var(--sp-16) var(--sp-12);
  text-align:center; transform:translateY(10px); transition:transform .5s ease;
  display:flex; flex-direction:column; justify-content:center;
}
.c-verwelkoming.is-open .c-vw-kaart{ transform:translateY(0); }
/* de kaart staat er al tijdens de aanloop, op maat, maar nog niet te lezen */
.c-vw-kaart.is-wacht{ opacity:0; }
.c-vw-kaart{ transition:transform .5s ease, opacity .4s ease; }
.c-vw-titel{
  margin:0; font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:var(--t-titel); line-height:1.2; color:var(--petrol-dark);
}
.c-vw-sub{ margin:var(--sp-3) 0 0; font-family:var(--font-ui); font-size:var(--t-knop); color:var(--ink-soft); }
.c-vw-tegels{ display:flex; gap:var(--sp-6); margin-top:var(--sp-10); }
.c-vw-tegel{
  flex:1; background:var(--wit); border:1px solid var(--line); border-radius:var(--r-veld);
  padding:var(--sp-6) var(--sp-4); display:flex; flex-direction:column; align-items:center; gap:var(--sp-5);
}
.c-vw-tegel-lbl{
  font-family:var(--font-ui); font-size:var(--t-meta); font-weight:var(--gew-vet);
  color:var(--ink); line-height:1.35;
}
.c-vw-dots{ display:flex; gap:var(--sp-3); align-items:center; }
.c-vw-dot{ width:11px; height:11px; border-radius:50%; background:var(--line); }
.c-vw-dot[data-k="groen"]{ background:var(--groen); }
.c-vw-dot[data-k="amber"]{ background:var(--geel); }
.c-vw-dot[data-k="rood"]{ background:var(--rood); }
.c-vw-dot[data-k="terra"]{ background:var(--terra); }
.c-vw-dot[data-k="petrol"]{ background:var(--petrol); }
.c-vw-loopt{
  display:flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-ui); font-size:var(--t-meta); color:var(--petrol-deep);
}
.c-vw-staven{ display:flex; align-items:flex-end; gap:3px; height:13px; }
.c-vw-staaf{ width:7px; border-radius:2px; background:var(--petrol-light); }
.c-vw-staaf.is-nu{ background:var(--petrol); }
.c-vw-cta{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-6); margin-top:var(--sp-12); }
.c-vw-zelf{
  font-family:var(--font-ui); font-size:var(--t-knop); font-weight:var(--gew-vet);
  color:var(--petrol-deep); background:none; border:0; padding:var(--sp-4); cursor:pointer;
}
.c-vw-zelf:hover{ text-decoration:underline; }
@media (max-width:699px){
  .c-vw-kaart{ min-height:500px; }
  .c-vw-tegels{ flex-direction:column; }
  .c-vw-tegel{ flex-direction:row; justify-content:flex-start; gap:var(--sp-6); text-align:left; }
  .c-vw-kaart{ padding:var(--sp-12) var(--sp-10) var(--sp-10); }
  .c-vw-cta{ flex-direction:column-reverse; gap:var(--sp-4); justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .c-vw-dim{ transition:none; }
  .c-vw-kaart{ transition:none; transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   R93 · de rondleiding over een demobestand (93b/93c/93d)
   Coach-mark-anatomie uit 35a: het scherm dimt, het doel wordt uitgespaard
   (vier rechthoeken rondom, dus het blijft aanklikbaar) en krijgt een dubbele
   ring — crème binnen, terracotta buiten. De ring pulseert nooit: knipperen
   leest als een fout, en dit is een aanwijzing. */
.c-gids{ position:fixed; inset:0; z-index:940; pointer-events:none; }
body.is-gids{ overflow:hidden; }
.c-gids-dim{
  position:fixed; background:rgba(10,57,54,.38); pointer-events:auto;
  opacity:0; transition:opacity .2s ease;
}
.c-gids.is-in .c-gids-dim{ opacity:1; }
.c-gids-ring{
  position:fixed; pointer-events:none; opacity:0; transition:opacity .2s ease;
  box-shadow:0 0 0 3px var(--cream), 0 0 0 5.5px var(--terra);
}
.c-gids-bubble{
  position:fixed; pointer-events:auto; cursor:pointer;
  /* 352 en niet 320: de voet draagt de teller, "stop rondleiding" en de
     volgende-knop naast elkaar, en in het Nederlands past dat net niet — dan
     brak "stap 2 van 8" op de 8 en stond dat cijfer verweesd op een eigen
     regel. Gemeten heeft de langste van de drie talen 325px nodig; de rest is
     ruimte voor een teller met twee cijfers ("stap 10 van 12" in de
     changeplan-rondleiding). Dit getal hoort gelijk te blijven aan bw in
     gids.js: dáár wordt de linkerpositie ermee berekend. */
  max-width:352px; background:var(--petrol-deep); color:var(--canvas);
  border-radius:var(--r-kaart); padding:var(--sp-8) var(--sp-9) var(--sp-6);
  box-shadow:0 18px 40px rgba(10,57,54,.36);
  opacity:0; transition:opacity .2s ease;
}
.c-gids.is-in .c-gids-bubble{ opacity:1; }
.c-gids-bubble.is-midden{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(352px,88vw); }
.c-gids-tekst{
  margin:0; font-family:var(--font-ui); font-size:var(--t-body); line-height:var(--lh-tekst);
}
.c-gids-voet{ display:flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-7); }
/* meta-communicatie: kleiner, mint, cursief — hoorbaar anders dan de boodschap */
.c-gids-meta{
  margin:0; font-family:var(--font-ui); font-size:var(--t-klein); font-style:italic;
  color:var(--petrol-light); line-height:var(--lh-body);
}
.c-gids-teller{
  font-family:var(--font-ui); font-size:var(--t-meta); font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--petrol-light);
  /* Een teller breekt niet. "stap 2 van" met de 8 op de volgende regel is geen
     krappe regel maar een kapot label. */
  white-space:nowrap;
}
.c-gids-stop{
  margin-left:auto; font-family:var(--font-ui); font-size:var(--t-meta);
  color:var(--canvas); background:none; border:0; padding:var(--sp-3); cursor:pointer; opacity:.85;
  white-space:nowrap;
}
.c-gids-stop:hover{ opacity:1; text-decoration:underline; }
.c-gids-volgende{
  flex:none; font-family:var(--font-ui); font-size:var(--t-knop); font-weight:var(--gew-vet);
  color:var(--wit); background:var(--terra); border:0; border-radius:var(--r-pil);
  padding:var(--sp-4) var(--sp-7); cursor:pointer; white-space:nowrap;
}
.c-gids-volgende:hover{ background:var(--terra-hover, #b96d38); }
/* 93d · op een telefoon is de bubble een vaste onderstrook: geen pijltje, en
   het doel wordt eerst vrijgescrold. */
.c-gids-bubble.is-onder-scherm{
  top:auto; bottom:0; left:0; right:0; width:auto; max-width:none; transform:none;
  border-radius:var(--r-sheet); padding:var(--sp-8) var(--sp-8) var(--sp-9);
}
@media (max-width:699px){
  .c-gids-voet{ flex-wrap:wrap; }
  .c-gids-volgende{ min-height:44px; }
}
@media (prefers-reduced-motion: reduce){
  .c-gids-dim,.c-gids-ring,.c-gids-bubble{ transition:none; }
}
/* de rondleidingspil in de VOORBEELD-band (93a): dit is nu de primaire actie */
.vk-tour{
  flex:none; font-family:var(--font-ui); font-size:var(--t-overline); font-weight:var(--gew-zwaar);
  color:var(--wit); background:var(--terra); border:0; border-radius:var(--r-pil);
  padding:3px var(--sp-5); cursor:pointer; white-space:nowrap;
}
.vk-tour:hover{ background:#b96d38; }

/* R93 · de verwelkoming groet eerst. De groet is klein en petrol, de zin
   eronder gewoon; de naam van het dossier blijft de titel. */
/* De begroeting is een aanspreking, geen labeltje: ze staat in de kopletter en
   op kopmaat. In hoofdletters op 11px las ze als een sectiekop, en dan valt de
   zin eronder er zwaarder uit dan de groet zelf. */
.c-vw-groet{
  margin:0; font-family:var(--font-kop); font-weight:var(--gew-vet);
  font-size:var(--t-kop-l); line-height:1.2; color:var(--petrol-dark);
}
.c-vw-welkom{
  margin:var(--sp-3) 0 var(--sp-7); font-family:var(--font-ui);
  font-size:var(--t-knop); color:var(--ink); line-height:var(--lh-body);
}
/* de sectiekop boven de tegels, en dezelfde vorm op donker in de aanloop */
.c-vw-kop{
  margin:var(--sp-10) 0 0; font-family:var(--font-ui); font-size:var(--t-meta);
  font-weight:var(--gew-zwaar); letter-spacing:var(--ls-breed); text-transform:uppercase;
  color:var(--ink-mist);
}
.c-vw-intro .c-vw-kop{ margin:var(--sp-5) 0 0; }
.c-vw-verder{ margin-top:var(--sp-4); align-self:center; }
.c-vw-intro .c-vw-groet{ text-align:center; }
.c-vw-intro .c-vw-welkom{ margin:0; text-align:center; }
.c-vw-intro svg{ margin-top:var(--sp-4); }
.c-vw-kaart .c-vw-tegels{ margin-top:var(--sp-6); }
/* De koppeling die een nieuw item van de FAB meekrijgt: label + chip, boven de
   velden. Bij bewerken staat hier de sectie KOPPELINGEN met haar ✕; bij
   aanmaken is er nog niets te ontkoppelen, dus toont de regel alleen waar dit
   aan gaat hangen. */
.c-soortpop-koppelnieuw{ display:flex; align-items:center; gap:var(--sp-4);
  flex-wrap:wrap; margin-top:var(--sp-4); }