/* stap.css — het detailscherm van een stap, en de uitkomstsoorten
   ──────────────────────────────────────────────────────────────
   Laadt na schil.css en wint dus waar ze elkaar raken. Twee dingen staan
   hier:

   1. Het sjabloon uit frame 4a: kruimelpad in de kopregel, inhoudskolom
      links, companion-rail van 290px rechts, en op een telefoon een
      vaste balk onderaan in plaats van die rail.

   2. De acht uitkomstsoorten waar geen ontwerpframe van bestaat:
      matrix, matrixLive, betrokkenen, perPersoon, posities, inschatting,
      heatmap en go/no-go. Die zijn geëxtrapoleerd uit het tokensysteem
      en uit de enige matrix die wel getekend is, de criteriumkaart in
      frame 4a. Vandaar dat elke rij dezelfde vorm draagt: een vlak in
      cream met een lijnrand, labels in de overline-stijl, en de velden
      zelf wit zodat ze als invulplek leesbaar blijven.

   Geen kale hex, geen kale radius, geen kale z-index: alles verwijst
   naar tokens.css. Waar een maat er bewust naast valt, staat waarom. */


/* ═══════════════════════════════════════════════════════════════
   DE TWEE KOLOMMEN
   ═══════════════════════════════════════════════════════════════ */

.c-stap{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-10);
  /* §CC (Epic 6): het rechterpaneel is weg — de inhoud is één gecentreerde
     kolom, geen 820+290-tweekolom meer. R84-kruimelupdate: de middenkolom
     is 1040px, zodat een stap dezelfde breedte vult als het dashboard en er
     geen brede lege flanken links en rechts overblijven. */
  max-width:var(--kolom-midden);
  margin:0 auto;
}
.c-stap-inhoud{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--sp-7);
}
.c-stap-rail{
  flex:none;
  width:var(--w-companion);
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
}
/* De afrondknop zakt naar de onderkant van de rail, zoals in frame 4a. */
.c-rail-afrond{ margin-top:var(--sp-2) }

/* De kaart staat nu in een kolom, dus haar eigen breedtebegrenzing en
   centrering uit schil.css mogen wijken. */
.c-stap .kaart{
  max-width:none;
  margin:0;
  padding:var(--sp-9) var(--sp-10);
}
/* R84-kleuren: velden die hun éigen werk-kaart(en) tekenen (de activatie met twee
   #FAF8F5-blokken, de verankering met gedrag-kaarten) krijgen géén omhullende
   kaart — die blokken horen rechtstreeks op het #EDE9E1-canvas, zoals 84a. Anders
   zit een crème kaart in een crème kaart en verdwijnt het onderscheid. */
.c-stap .kaart:has(.c-activatie),
.c-stap .kaart:has(.c-verankering){
  background:transparent; border:0; box-shadow:none; padding:0;
}


/* ═══════════════════════════════════════════════════════════════
   WAAR DEZE STAP OP MIKT
   ═══════════════════════════════════════════════════════════════ */

.c-mikt{
  background:var(--cream2);
  border-radius:var(--r-kaart);
  padding:var(--sp-8) var(--sp-10);
}
.c-mikt-label{
  display:block;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.c-mikt-tekst{
  margin-top:var(--sp-3);
  font-family:var(--font-kop);
  font-style:italic;
  font-size:var(--t-nadruk);   /* 72a: 14.5px (was 16px) */
  color:var(--petrol-deep);
  line-height:var(--lh-ruim);
}
.c-mikt-duiding{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-9);
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.c-mikt-duiding .duiding-label{
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
}

/* De uitklappanelen staan los onder het mikt-blok, niet erin: ze kunnen
   lang zijn en zouden het blok anders uit balans trekken. */
.c-stap-inhoud .duiding-paneel{
  margin:0;
  background:var(--cream2);
  border-radius:var(--r-kaart);
  padding:var(--sp-8) var(--sp-10);
  font-size:var(--t-nav);
  line-height:var(--lh-tekst);
}

/* ── R82a — mik-kop met de ene uitklap rechts ("hoe je dit aanpakt ▸"), de
   werkwijze-secties ín het paneel, en de lensregel onder de kaart. Alles met
   bestaande design-system-tokens en -componenten (.c-mikt-label = overline). */
.c-mikt-kop{ display:flex; align-items:baseline; gap:var(--sp-5); }
.c-mikt-kop .c-mikt-label{ flex:1; }
.c-mikt-uitklap{
  flex:none; border:0; background:none; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--t-pil); font-weight:var(--gew-vet); color:var(--petrol-deep);
}
.c-mikt-uitklap[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.c-mikt-sec + .c-mikt-sec{ margin-top:var(--sp-7); }
.c-mikt-sec .c-mikt-label{ margin-bottom:var(--sp-2); }
.duiding-paneel .bron{ margin-top:var(--sp-7); }
/* de lensregel "▸ waar dit terugkomt · n" — R84/82a: de láátste rij ín de
   werk-kaart, niet een losse regel op het canvas. Border-top scheidt hem van
   de kaartinhoud (zelfde patroon als de blokkop-teller: wat over het blok gaat
   leeft op het blok). Toggle: ingeklapt toont alleen de kop; klik op ▸ vouwt de
   lezers-links uit (data-open). ≥1400px staat hij standaard open. */
.c-lensregel{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  margin-top:var(--sp-7); padding-top:var(--sp-7); border-top:1px solid var(--line-zacht);
  font-size:var(--t-pil); color:var(--ink-soft);
}
/* leeg (geen lezers) = de rij verdwijnt volledig, geen dangling border-top. */
.c-lensregel[hidden]{ display:none; }
.c-lensregel-kop{
  display:inline-flex; align-items:center; gap:6px;
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  color:var(--ink-soft);
}
.c-lensregel-pijl{ font-size:10px; color:var(--ink-soft); transition:transform .12s ease; }
.c-lensregel[data-open] .c-lensregel-pijl{ transform:rotate(90deg); }
.c-lensregel-uit{ display:none; flex-wrap:wrap; gap:6px 10px; padding-left:14px; }
.c-lensregel[data-open] .c-lensregel-uit{ display:flex; }
.c-lensregel-link{
  border:0; background:none; padding:0; cursor:pointer; font:inherit; color:var(--ink-mist);
}
.c-lensregel-link:hover{ color:var(--petrol-deep); text-decoration:underline; }
/* R71-review §8 — de lensregel is óók op breed scherm default ingeklapt: alleen de
   ghost-grijze samenvatting "waar dit terugkomt · n" op één regel; ▸ vouwt uit. */


/* ═══════════════════════════════════════════════════════════════
   ONDERAAN DE KAART: KLAAR WANNEER, DE NUDGE, DE BRON
   ═══════════════════════════════════════════════════════════════ */

.c-klaar{
  margin-top:var(--sp-10);
  background:var(--cream2);
  border-radius:var(--r-l);
  padding:var(--sp-6) var(--sp-8);
}
.c-klaar-label{
  display:block;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-breed);
  text-transform:uppercase;
  color:var(--petrol-deep);
}
.c-klaar-tekst{
  margin-top:var(--sp-2);
  font-size:var(--t-knop);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}

.c-stap .stap-nudge{
  margin-top:var(--sp-8);
  border-left:var(--rand-status) solid var(--petrol-light);
  border-radius:var(--r-status);
  background:var(--vul-mint-zacht);
  padding:var(--sp-5) var(--sp-8);
}
.c-stap .sn-lab{
  display:block;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.c-stap .sn-tekst{
  margin-top:var(--sp-2);
  font-size:var(--t-body-plus);
  color:var(--ink);
  line-height:var(--lh-body);
}
.c-stap .bron{
  margin-top:var(--sp-6);
  font-size:var(--t-pil);
  color:var(--ink-soft);
}
/* Een bron-URL is één ononderbroken tekenreeks zonder breekpunten; op een smal
   scherm liep hij daardoor net buiten de rand. Laten afbreken waar nodig. */
.c-stap .bron a{ overflow-wrap:anywhere; word-break:break-word; }


/* De vaste balk zelf is een component (componenten.css). Waar en wanneer
   hij verschijnt staat hieronder, bij de breekpunten. */


/* ═══════════════════════════════════════════════════════════════
   BLOKKOP EN UITLEG binnen de uitkomst
   ═══════════════════════════════════════════════════════════════ */

.c-stap .blok-titel{
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
  flex-wrap:wrap;
  margin:var(--sp-10) 0 var(--sp-2);
}
.c-stap .blok-titel:first-child{ margin-top:0 }
.c-stap .blok-titel h3{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-m);
  color:var(--petrol-dark);
}
.c-stap .blok-titel span{
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-stap .blok-uitleg{
  font-size:var(--t-body);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
  margin:0 0 var(--sp-6);
}
.c-stap .leeg-tip{
  margin-top:var(--sp-4);
  font-size:var(--t-body);
  color:var(--ink-soft);
  font-style:italic;
}


/* ═══════════════════════════════════════════════════════════════
   DE RIJ, gedeelde vorm van matrix, matrixLive, posities, inschatting
   Geëxtrapoleerd uit de criteriumkaart in frame 4a: een vlak in cream
   met een lijnrand, labels in overline, en witte velden erin.
   ═══════════════════════════════════════════════════════════════ */

.c-stap .matrix{ margin-top:var(--sp-2) }

.c-stap .mx-rij,
.c-stap .groep-kaart,
.c-stap .risk-rij{
  background:var(--cream2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:var(--sp-6) var(--sp-7);
  margin-bottom:var(--sp-5);
}
.c-stap .mx-rij-top{
  display:flex;
  justify-content:flex-end;
  margin:calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
}
.c-stap .mx-grid{
  display:grid;
  gap:var(--sp-5) var(--sp-5);
}
.c-stap .mx-cel{
  display:flex;
  flex-direction:column;
  gap:3px; /* 3px, krapper dan sp-2: het label plakt aan zijn veld */
  min-width:0;
}
.c-stap .mx-lab,
.c-stap .gk-cel label{
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.c-stap .mx-breed{ margin-top:var(--sp-5) }

/* De velden zelf. Ze staan op een vlak in cream, dus wit maakt ze
   herkenbaar als invulplek. */
.c-stap .mx-rij input[type=text],
.c-stap .mx-rij textarea,
.c-stap .mx-rij select,
.c-stap .groep-kaart input[type=text],
.c-stap .groep-kaart textarea,
.c-stap .groep-kaart select,
.c-stap .risk-rij input[type=text]{
  width:100%;
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  line-height:var(--lh-ruim);
  color:var(--ink);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:var(--sp-4) var(--sp-5);
}
.c-stap textarea{ resize:vertical; overflow:hidden }

/* Een read-only waarde uit een bronstap: geen invulplek, dus geen veld. */
.c-stap .mx-vast{
  font-size:var(--t-body-plus);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  line-height:var(--lh-ruim);
  padding:var(--sp-4) 0;
}

/* van → naar, met de pijl in terracotta zoals in frame 4a en 4b. */
.c-stap .vannaar{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
}
.c-stap .vannaar input{ flex:1; min-width:0 }
.c-stap .vannaar .pijl{
  flex:none;
  color:var(--terra);
  font-weight:var(--gew-vet);
}

/* De schaalpillen (laag/midden/hoog, in orde/aandacht nodig). */
.c-stap .schaal{ display:flex; gap:var(--sp-3) }
.c-stap .schaal button{
  flex:1;
  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-s);
  padding:var(--sp-4) var(--sp-2);
  cursor:pointer;
  transition:background var(--duur-kort), color var(--duur-kort), border-color var(--duur-kort);
}
.c-stap .schaal button:hover{ border-color:var(--petrol) }
.c-stap .schaal button[data-aan="1"]{
  color:var(--wit);
  background:var(--petrol);
  border-color:var(--petrol);
}

/* Rij toevoegen en verwijderen. */
.c-stap .rij-toe{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  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-3) 0;
  cursor:pointer;
}
.c-stap .rij-toe:hover{ color:var(--petrol) }
.c-stap .rij-weg{
  flex:none;
  display:grid;
  place-items:center;
  width:var(--sp-14);
  height:var(--sp-14);
  font-family:var(--font-ui);
  font-size:var(--t-kop-l);
  line-height:1;
  color:var(--ink-soft);
  background:none;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  cursor:pointer;
}
.c-stap .rij-weg:hover{ border-color:var(--terra); color:var(--terra) }
.c-stap .rij-weg-plek{ flex:none; width:var(--sp-14); height:var(--sp-14) }

/* De toelichting per rij: klein en gedempt, want ze is optioneel. */
.c-stap .mx-info-toggle{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:var(--sp-3) 0 0;
  cursor:pointer;
}
.c-stap .mx-info-toggle:hover{ color:var(--ink) }
.c-stap .mx-info-toggle .chev{ font-size:var(--t-mini); transition:transform var(--duur) }
.c-stap .mx-info-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.c-stap .mx-info{ display:none; margin-top:var(--sp-3) }
.c-stap .mx-info.zichtbaar{ display:block }

/* De lege verwijzing wanneer een bronstap nog niets opleverde. */
.c-stap .leeg-ref{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--t-body);
  color:var(--ink-soft);
  background:var(--cream2);
  border-radius:var(--r-m);
  padding:var(--sp-5) var(--sp-7);
  margin-top:var(--sp-2);
}


/* ═══════════════════════════════════════════════════════════════
   BETROKKENEN en PERPERSOON
   ═══════════════════════════════════════════════════════════════ */

.c-stap .uitkomst-veld{ margin-top:var(--sp-6) }
.c-stap .uitkomst-veld > label{
  display:block;
  margin-bottom:var(--sp-3);
  font-size:var(--t-nav);
  font-weight:var(--gew-vet);
  color:var(--ink);
}
.c-stap .uitkomst-veld > input[type=text],
.c-stap .uitkomst-veld > textarea{
  width:100%;
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  line-height:var(--lh-body);
  color:var(--ink);
  /* achtergrond NIET lokaal zetten: de globale veldregel (huisstijl.css) is de
     bron = wit. Voorheen zette dit --cream → veld verdween in de crème kaart. */
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:var(--sp-5) var(--sp-6);
}

.c-stap .betr-lijst{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.c-stap .mensen-rij{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin:0;
}
.c-stap .mensen-rij input{
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  color:var(--ink);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:var(--sp-4) var(--sp-5);
}
.c-stap .mensen-rij input.naam{ flex:0 0 36% }
.c-stap .mensen-rij input.rol{ flex:1; min-width:0 }
.c-stap .rol-vast{
  flex:1;
  display:flex;
  align-items:center;
  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-s);
  padding:var(--sp-4) var(--sp-5);
}

.c-stap .persoon-veld{
  margin-top:var(--sp-5);
  background:var(--cream2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:var(--sp-5) var(--sp-7);
}
.c-stap .persoon-veld label{
  display:block;
  margin-bottom:var(--sp-3);
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
}
.c-stap .persoon-veld .rol-inline{ color:var(--ink-soft); font-weight:var(--gew-normaal) }
.c-stap .persoon-veld textarea{
  width:100%;
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  line-height:var(--lh-body);
  /* achtergrond komt uit de globale veldregel (wit) — niet lokaal herhalen. */
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:var(--sp-4) var(--sp-5);
}


/* ═══════════════════════════════════════════════════════════════
   POSITIES, de stakeholder map als 2×2
   ═══════════════════════════════════════════════════════════════ */

.c-stap .positie-raster{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-6);
  margin-top:var(--sp-2);
}
.c-stap .positie{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  /* 76a dev-export — het kwadrant is een crème kaart (#FAF8F5) op het #EDE9E1-canvas;
     de groep-kaarten erin zijn wit. Zo ontstaat de drielaagse diepte van het frame. */
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  margin:0;
}
/* Zolang een toevoegveld openstaat mag het kwadrant niet klippen: de
   suggestielijst van het naamveld hangt onder het veld en verdween anders
   onder de kaartrand. De z-index tilt het openstaande kwadrant boven zijn buur. */
.c-stap .positie.is-toevoegen{ overflow:visible; position:relative; z-index:5; }
.c-stap .positie-kop{
  flex:none;
  /* 76a dev-export — GEEN aparte header-kleur/balk: de kwadrant-overline staat als
     tekst op de crème kaart zelf (geen cream2-vlak, geen border-bottom). §5 — de
     overline krijgt de volle kaartbreedte, geen ellipsis (mag wrappen). */
  background:none;
  border-bottom:0;
  padding:10px 12px 0;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
/* R76 §4 — de kwadrant-kop is een overline (geen Fraunces): "HOGE INVLOED · LAAG
   GERAAKT" in caps 10px/700/#8A867E, met de uitkomst ("· tevreden houden") op
   dezelfde regel in 11px grijs. */
.c-stap .positie-kop .p-as{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#8A867E;
}
.c-stap .positie-kop .p-uitkomst{
  font-size:11px;
  color:var(--ink-soft);
  text-transform:none;
}
.c-stap .positie-body{ padding:var(--sp-6) var(--sp-7) var(--sp-5) }
.c-stap .positie .groep-kaart{ background:var(--cream2) }
.c-stap .gk-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-5);
}
.c-stap .gk-cel{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.c-stap .gk-onder{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-7);
  margin-top:var(--sp-5);
}
.c-stap .lid-vink{
  display:inline-flex;
  align-items:center;
  gap:7px; /* 7px, tussen sp-3 en sp-4 in */
  font-size:var(--t-body);
  color:var(--ink);
  cursor:pointer;
}
.c-stap .lid-vink input{ display:none }
.c-stap .lid-vink .box{
  display:grid;
  place-items:center;
  width:var(--sp-8);
  height:var(--sp-8);
  font-size:var(--t-meta);
  color:var(--wit);
  border:2px solid var(--line);
  border-radius:var(--r-xs);
}
.c-stap .lid-vink .box .v{ opacity:0 }
.c-stap .lid-vink input:checked + .box{ background:var(--petrol); border-color:var(--petrol) }
.c-stap .lid-vink input:checked + .box .v{ opacity:1 }


/* ═══════════════════════════════════════════════════════════════
   INSCHATTING, de impact per ontwerpgroeplid
   ═══════════════════════════════════════════════════════════════ */

.c-stap .lid-blok{
  overflow:hidden;
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-kaart);
  margin-bottom:var(--sp-6);
}
.c-stap .lid-kop{
  background:var(--cream2);
  border-bottom:1px solid var(--line);
  padding:var(--pad-kaartkop-krap);
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-s);
  color:var(--petrol-dark);
}
.c-stap .lid-kop .lid-rol{
  font-family:var(--font-ui);
  font-weight:var(--gew-normaal);
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-stap .lid-body{ padding:var(--sp-6) var(--sp-7) var(--sp-5) }
.c-stap .lid-body .groep-kaart{ background:var(--cream2) }


/* ═══════════════════════════════════════════════════════════════
   HEATMAP, breed en dus schuivend met een vaste eerste kolom
   ═══════════════════════════════════════════════════════════════ */

.c-stap .heat-wrap{
  margin-top:var(--sp-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--wit);
  padding:var(--sp-5) var(--sp-6);
}
.c-stap .heat{
  border-collapse:separate;
  border-spacing:var(--sp-2);
  min-width:100%;
}
.c-stap .heat th{
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:center;
  vertical-align:bottom;
  padding:var(--sp-2) var(--sp-3);
  white-space:nowrap;
}
.c-stap .heat th.groep-h{ text-align:left }
.c-stap .heat td.groep-c{
  font-size:var(--t-body-plus);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
  white-space:nowrap;
  padding-right:var(--sp-6);
}
/* De vaste eerste kolom draagt een eigen dekkende vulling, anders schuift
   de tabel er zichtbaar onderdoor. Het schuifvlak-paar uit
   componenten.css doet de rest. */
.c-stap .heat th.groep-h,
.c-stap .heat td.groep-c{
  background:var(--wit);
}
.c-stap .heat-cel{
  width:46px;  /* 46×34, de celmaat uit de bestaande heatmap */
  height:34px;
  background:var(--cream2);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  cursor:pointer;
  transition:background var(--duur-kort), border-color var(--duur-kort);
}
.c-stap .heat-cel[data-k="groen"]{ background:var(--groen); border-color:var(--groen) }
.c-stap .heat-cel[data-k="geel"]{ background:var(--geel); border-color:var(--geel) }
.c-stap .heat-cel[data-k="rood"]{ background:var(--rood); border-color:var(--rood) }
/* §1c: een sensing-suggestie op de veerkracht-kolom — gestreepte rand, iets
   gedempt, om te tonen dat de kleur afgeleid is en niet handmatig gezet. */
.c-stap .heat-cel[data-suggestie="1"]{ border-style:dashed; border-color:var(--ink-soft); opacity:.72 }
.c-stap .heat-leg{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  margin-top:var(--sp-6);
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-stap .heat-leg span{ display:inline-flex; align-items:center; gap:7px }
.c-stap .heat-leg i{
  display:inline-block;
  width:13px;  /* 13px, het legendeblokje uit de bestaande heatmap */
  height:13px;
  border-radius:var(--r-xs);
}
.c-stap .risk{ margin-top:var(--sp-10) }
.c-stap .risk-rij .r-kop{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:var(--sp-5);
  font-size:var(--t-body);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
}
.c-stap .risk-rij .r-kop .r-dot{
  flex:none;
  width:11px;  /* 11px, het statusblokje bij een risicorij */
  height:11px;
  border-radius:var(--r-2);
}
.c-stap .risk-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-5);
}


/* ═══════════════════════════════════════════════════════════════
   GO/NO-GO, vier signalen met de statusrand van het systeem
   ═══════════════════════════════════════════════════════════════ */

.c-stap .signaal{
  background:var(--cream2);
  border:1px solid var(--line);
  border-left:var(--rand-status) solid var(--line-sterk);
  border-radius:var(--r-status);
  padding:var(--sp-6) var(--sp-8);
  margin-bottom:var(--sp-5);
}
.c-stap .signaal.gunstig{ border-left-color:var(--groen) }
.c-stap .signaal.let{ border-left-color:var(--terra); background:var(--vul-terra-rij) }
.c-stap .sig-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  margin-bottom:var(--sp-2);
  font-size:var(--t-nadruk);
  font-weight:var(--gew-vet);
  color:var(--petrol-dark);
}
.c-stap .sig-dot{
  flex:none;
  width:11px;  /* 11px, dezelfde stip als bij een risicorij */
  height:11px;
  border-radius:50%;
  background:var(--line-sterk);
}
.c-stap .signaal.gunstig .sig-dot{ background:var(--groen) }
.c-stap .signaal.let .sig-dot{ background:var(--terra) }
.c-stap .sig-bev{
  margin-bottom:var(--sp-5);
  font-size:var(--t-body-plus);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
.c-stap .sig-oordeel{ max-width:300px } /* 300px: twee pillen naast elkaar */
.c-stap .gonogo-besluit{ margin-top:var(--sp-10) }
.c-stap .gonogo-besluit .schaal{ max-width:360px } /* 360px: twee brede keuzes */
.c-stap .gonogo-besluit textarea{
  width:100%;
  margin-top:var(--sp-5);
  font-family:var(--font-ui);
  font-size:var(--t-body-plus);
  line-height:var(--lh-body);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:var(--sp-5) var(--sp-6);
}


/* ═══════════════════════════════════════════════════════════════
   DRAAGVLAK, de rij naamchips onder de uitkomst
   ═══════════════════════════════════════════════════════════════ */

.c-stap .namen{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.c-stap .legende{
  display:grid;
  gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.c-stap .leg-rij{ font-size:var(--t-klein) }
/* §4: de stille draagvlak-regel op vervolg-stappen (legende alleen op de eerste). */
.c-stap .dv-stille{ margin-top:var(--sp-5); font-size:var(--t-klein); color:var(--ink-soft) }


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

/* Tablet: de rail wordt krapper, zodat de inhoudskolom leesbaar blijft
   naast de icoonrail van 64px. */
@media (min-width:700px) and (max-width:1100px){
  .c-stap{ gap:var(--sp-7) }
  .c-stap-rail{ width:250px } /* 250px: de rail wijkt, de inhoud niet */
  .c-stap .kaart{ padding:var(--sp-8) var(--sp-8) }
  .c-stap .gk-grid,
  .c-stap .risk-grid{ grid-template-columns:1fr }
}

/* De 2×2 stakeholder map valt terug op één kolom wanneer de KWADRANTKOLOM te
   smal wordt, niet wanneer het browservenster dat is: onder 900px schuift het
   detailpaneel onder de map, waardoor de kolom juist bréder wordt. Een
   viewport-drempel zette de kaart daar onterecht in één kolom naast een leeg
   vlak. Container query op .c-map-links, de enige ouder van dit raster. */
.c-stap .c-map-links{ container-type:inline-size; container-name:mapkolom; }
@container mapkolom (max-width:420px){
  .c-stap .positie-raster{ grid-template-columns:1fr }
}

/* Mobiel: één kolom. De rail wordt een reeks kaarten onder de inhoud,
   en onderaan komt de vaste balk uit frame 4b. */
@media (max-width:699px){
  .c-stap{ flex-direction:column; gap:var(--sp-7) }
  .c-stap-inhoud{ width:100%; gap:var(--sp-6) }
  .c-stap-rail{ width:100%; gap:var(--sp-5) }
  .c-stap .kaart{ padding:var(--sp-7) var(--sp-8) }
  .c-mikt{ padding:var(--sp-6) var(--sp-7) }
  .c-mikt-tekst{ font-size:var(--t-body-plus) }
  .c-stap-inhoud .duiding-paneel{ padding:var(--sp-6) var(--sp-7); font-size:var(--t-body-plus) }
  .c-stap .mx-grid{ grid-template-columns:1fr !important }
  .c-stap .gk-grid,
  .c-stap .risk-grid{ grid-template-columns:1fr }
  .c-stap .mensen-rij{ flex-wrap:wrap }
  .c-stap .mensen-rij input.naam{ flex:1 1 100% }

  /* De rail toont op mobiel zijn inhoud als kaarten onder de stap, maar de
     "Rond deze stap af"-knop hoort daar niet meer bij: de vaste balk
     onderaan draagt al "Rond af". Anders staat de afrond-actie er dubbel.
     De knop is .c-knop.is-blok (0-2-0), dus we matchen even specifiek. */
  .c-stap-rail .c-rail-afrond{ display:none }

  /* De vaste balk: twee knoppen die meescrollen tot ze onderaan blijven
     plakken, zodat bevestigen niet vraagt dat je eerst naar beneden
     scrolt. */
  .c-stapbalk{
    display:flex;
    position:sticky;
    bottom:calc(var(--sp-7) * -1); /* de onderrand van het werkvlak */
    /* uit de padding van het werkvlak treden, zodat de balk de volle
       breedte pakt en de scheiding doorloopt */
    margin:var(--sp-8) calc(var(--sp-8) * -1) 0;
  }

  /* De actieknop wijkt voor die balk. Zonder dit zweeft ze eroverheen. */
  .werkvlak-inhoud.heeft-stapbalk ~ .c-fab{ bottom:76px } /* balkhoogte plus lucht */
}

/* §7: op de telefoon (<640px) delen de twee knoppen wél de volle breedte —
   primair 2/3, secundair 1/3; de FAB schuift erboven (regel hierboven). */
@media (max-width:639px){
  .c-stapbalk{ justify-content:stretch; padding-left:var(--sp-6); padding-right:var(--sp-6); }
  .c-stapbalk .c-knop{ flex:1 1 0; }
  .c-stapbalk .c-knop[data-soort="primair"]{ flex:2 1 0; }
}

/* Liggend op een telefoon is elke pixel hoogte er een. De balk verliest
   haar lucht, de rail komt gewoon onder de inhoud. */
@media (max-height:520px) and (max-width:699px){
  .c-stapbalk{ padding:var(--sp-3) var(--sp-8) var(--sp-4) } /* liggend: minder lucht */
  .werkvlak-inhoud.heeft-stapbalk ~ .c-fab{ bottom:60px }
}

/* ═══════════════════════════════════════════════════════════════
   RONDE 32 §6h/§6i/§6j — reisaffordanties op de stap
   ═══════════════════════════════════════════════════════════════ */

/* §6i — wat de stap oplevert, als één zin onder het doel. Stil, met een
   overline-label zoals de rest van het mikt-blok. */
.c-stap-levert{
  margin-top:var(--sp-5);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
.c-stap-levert-lab{
  font-weight:var(--gew-zwaar);
  color:var(--petrol-deep);
}

/* §6h/§6i — de metastrook: tijdsbeslag links, live veldenteller rechts.
   Gedimd en klein; het is context, geen actie. */
.c-stap-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-5) var(--sp-9);
  margin-top:var(--sp-5);
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-stap-duur-lab{
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
}
.c-stap-velden{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}

/* §6j — het uitgewerkte voorbeeldantwoord onder een leeg veld. Gedempt op
   een zand-vlak, met een knop die het als vertrekpunt inzet. */
.c-veld-voorbeeld{
  margin-top:var(--sp-4);
  padding:var(--sp-6) var(--sp-8);
  background:var(--cream2);
  border-left:3px solid var(--mint);
  border-radius:var(--r-s);
}
.c-veld-voorbeeld-lab{
  display:block;
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.c-veld-voorbeeld-tekst{
  margin:var(--sp-3) 0 var(--sp-5);
  font-size:var(--t-klein);
  font-style:italic;
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
.c-veld-voorbeeld-knop{
  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-veld-voorbeeld-knop:hover{ text-decoration:underline; }

/* §6h — de duur-regel in de opbouw-hier-kaart, uitgelijnd onder de titel. */
.c-opbouw-duur{
  margin:var(--sp-3) 0 0 33px;
  font-size:var(--t-klein);
  color:var(--ink-soft);
}
.c-opbouw-duur-lab{ font-weight:var(--gew-vet); color:var(--petrol-deep); }

/* Ronde 33 — de meta-strook op een werkoppervlak (fase 3-5): geen kaartkader,
   maar wél tijdsbeslag + wat het oplevert, boven het werkvlak. */
/* #169 — de meta-tekst lijnt uit onder de schermtitel (die in de kopregel
   verder inspringt dan de werkvlak-inhoud); de border-bottom blijft op de
   content-kolom, zodat de scheidingslijn met de filter/tabel eronder uitlijnt. */
.c-werkvlak-meta{ margin:0 0 var(--sp-6); padding:var(--sp-5) 0 var(--sp-5) var(--sp-14); border-bottom:1px solid var(--line); }
.c-werkvlak-meta .c-stap-levert{ margin-top:0; padding-top:0; border-top:none; }
.c-werkvlak-meta .c-stap-meta{ margin-top:var(--sp-3); }

/* ═══════════════════════════════════════════════════════════════
   RONDE 32 §6t (#172) — meetpunt zet-journey: één zin, drie keuzes
   ═══════════════════════════════════════════════════════════════ */

/* De kopregel van de meetstrook blijft op één regel: het label mag met
   ellipsis inkorten, de keuzes (modus, ritme) houden hun breedte. Zo wringt
   de kop niet in een lelijke afbreking. */
.ms-kop{ flex-wrap:nowrap; min-width:0; }
.ms-kop .ms-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-kop .ms-sub{ white-space:nowrap; }
.ms-kop .ms-modus,
.ms-kop .ms-ritme{ flex:none; }
/* Mobiel: op één regel past het niet (de ritme-toggle Handmatig | Ritme is
   te breed) en liep rechts buiten het scherm. We laten de kop wrappen en
   zetten de keuze(s) op een eigen, volle regel. Deze regel staat bewust ná
   de nowrap-regel hierboven, in dit bestand, zodat hij de cascade wint. */
@media (max-width:699px){
  .ms-kop{ flex-wrap:wrap; }
  .ms-kop .ms-modus{ margin-left:0; flex-basis:100%; justify-content:flex-start; }
  .ms-kop .ms-ritme{ margin-left:0; }
}

/* De zet-zin zelf: "Meet [modus] · [ritme ▾] · eerste meting op [datum]".
   De delen breken enkel als geheel af (nooit middenin een keuze); op één
   regel wanneer de breedte het toelaat. */
.ms-zet{ margin-top:var(--sp-4); }
.ms-zet-zin{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3) var(--sp-4);
  font-size:var(--t-body);
  color:var(--ink);
}
.ms-zet-deel{ display:inline-flex; align-items:center; gap:var(--sp-3); white-space:nowrap; }
.ms-zet-woord{ color:var(--ink-soft); }
.ms-zet-sep{ color:var(--line-sterk); }
/* binnen de zin lijnt het ritme niet naar rechts uit (anders dan in de kop) */
.ms-zet .ms-ritme{ margin-left:0; }
.ms-zet-datum{
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  color:var(--petrol-deep);
  padding:var(--sp-1) var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--wit);
}