/* schil.css — de layout van de vier ingangen.

   Laadt na huisstijl.css en wint dus waar ze elkaar raken. Dat is met
   opzet: huisstijl.css houdt voorlopig de kaart van een stap overeind,
   deze laag zet er de nieuwe schil omheen. Naarmate de rondes vorderen
   krimpt huisstijl.css en groeit deze.

   Componentstijl staat hier niet: dat is componenten.css. Hier staat
   alleen waar dingen staan. */

/* ── de romp ──────────────────────────────────────────────────── */
html, body{ height:100% }
body{ overflow:hidden } /* het werkvlak scrolt, niet de pagina */

.app{
  display:flex;
  height:100vh;
  height:100dvh; /* zodat de tabbalk op een telefoon niet onder de browserbalk valt */
  background:var(--cream);
}

.werkvlak{
  flex:1;
  min-width:0;
  /* Zonder min-height:0 groeit dit vlak in een kolom-flex door tot voorbij
     de romp, slaat de binnenste overflow nooit aan, en verdwijnt de
     tabbalk onder de onderkant van het scherm. */
  min-height:0;
  display:flex;
  flex-direction:column;
  position:relative; /* de actieknop hangt hierin */
  /* R84-kruimelupdate — het werkvlak is het app-canvas (#EDE9E1), niet het
     bijna-witte kaartvlak: zo staan de kruimel én de kaarten zichtbaar óp het
     canvas en is er geen witte kopstrook meer die de rest wit "meetrekt". */
  background:var(--canvas);
}

.werkvlak-inhoud{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--pad-werkvlak);
  /* de bovenpadding als eigen variabele, zodat de sticky dashboard-nav de
     band tussen de kopregel en zijn pin-lijn kan afdekken (FB7) */
  --wv-pt:var(--sp-8);
  scroll-behavior:smooth;
}

/* Globaal (elk scherm, niet enkel mobiel): op een scherm mét een zichtbare FAB
   reserveren we onderaan scroll-ruimte, zodat de laatste inhoud vrij boven de
   knop uit te scrollen is en de FAB nergens tekst afdekt.

   R5 in tokens.md zet die ruimte op ≥90px, app-breed. Dit is de plek waar dat
   hoort: één regel, geconditioneerd op een FAB die er echt staat, met de
   safe-area erbij. Schermen die het nóg eens los instelden telden er gewoon bij
   op — het portfolio kwam zo op 178px dode ruimte onderaan. Die losse regels
   zijn weg; wie een FAB toont krijgt zijn uitloop hier. */
.werkvlak-inhoud:has(~ .c-fab:not([hidden])){ padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); }

/* De kaart van een stap blijft leesbaar breed; een werkoppervlak
   (het dashboard, het veranderplan) mag de volle breedte nemen. */
.werkvlak-inhoud .kaart{ max-width:820px; margin:0 auto }
.werkvlak-inhoud .kaart.breed{ max-width:none }

/* ── wat de oude schil achterliet ─────────────────────────────── */
/* De opslagbalk, de fasenbalk, de subnavigatie en de vorige/volgende-
   balk bestaan niet meer in de DOM. Hun regels in huisstijl.css doen
   dus niets. Wat wel nog kan bijten is .wrap, die een eigen breedte en
   een eigen buitenmarge zette; die container is er niet meer. */

/* De actieknop is een component met display:flex; het hidden-attribuut
   moet dat kunnen overrulen. */
#actieknop[hidden]{ display:none }

/* (ruling 27d, herzien 9 aug) — het risico-optie-icoon is nu een gevulde rode
   stip (.c-fabmenu-stip[data-k="risico"], zie componenten.css); het eerdere
   mini-grid-icoon is geschrapt zodat de vier FAB-iconen één familie blijven. */

/* ── de opslag-flyout ─────────────────────────────────────────── */
/* De flyout moet boven de tabbalk uitkomen, anders valt de sheet er
   achter en is de onderste knop onbereikbaar. */
#flyout{ position:fixed; inset:0; z-index:var(--z-sheet) }
#flyout[hidden]{ display:none }
#flyout .c-sluier{ position:absolute; inset:0 }

.c-venster.is-flyout{
  position:absolute;
  z-index:var(--z-venster);
  left:calc(var(--w-zijmenu) + var(--sp-10));
  top:var(--sp-16);
  width:var(--w-flyout);
  box-shadow:var(--sch-flyout);
}
.c-venster.is-flyout .c-venster-body{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
}
.c-flyout-knoppen{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
.c-venster-hulp{
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
}

/* ── het fundament-overzicht ──────────────────────────────────
   Ronde 1 zette de zeventien stappen als lijst in het werkvlak, met een
   maximumbreedte van 720px. Sinds ronde 4 is het fundament een paneel
   en toont het werkvlak onder die ingang altijd een stap. Die
   maximumbreedte kneep de stap-detail dus tot 720px samen, waar het
   ontwerp twee kolommen naast elkaar vraagt. De hele tussenvorm is
   hier weg; de paneelstijl staat verderop. */

/* Het kruimelpad woont sinds ronde 5 in de kopregel, niet meer in de
   kaart. De regels ervoor staan in stap.css. */

/* ── de drie standen ──────────────────────────────────────────── */

/* Mobiel: de tabbalk onderaan, dus de romp wordt een kolom. */
@media (max-width:699px){

  /* De trajectnaam is op een telefoon de enige weg naar het opslagmenu, dus
     ook een tiktarget. De design-QA vraagt 44px; gemeten was 25px. De hoogte
     komt uit vulling, zodat de tekst niet groeit. Bewust niet in de
     liggend-query hieronder: daar wordt de kopregel juist lager. */
  .c-kopregel-naam{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .app{ flex-direction:column }
  .werkvlak{ order:1; min-height:0 }
  /* de tabbalk mag nooit meekrimpen of wegvallen */
  .c-tabbalk{ order:2; flex:none }
  .werkvlak-inhoud{ padding:var(--pad-mobiel); --wv-pt:var(--sp-7) }
  /* De zwevende FAB (+ knop) staat vast onderin het werkvlak en dekte de
     laatste rij/knop van de inhoud af. Op schermen mét een FAB geven we de
     scroll-inhoud onderaan ruimte, zodat je de laatste rij vrij kunt scrollen
     boven de knop (plus de veilige zone van de telefoon). */
  .werkvlak-inhoud:has(~ .c-fab){ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
  .werkvlak-inhoud .kaart{ max-width:none }
  .c-venster.is-flyout{
    left:0; right:0; top:auto; bottom:0;
    width:auto;
    max-height:82vh;
    overflow-y:auto;
    border-radius:var(--r-sheet);
    box-shadow:var(--sch-sheet);
  }
  /* de sheet dekt de tabbalk af, dus onderaan ruimte voor de duimzone */
  .c-venster.is-flyout .c-venster-voet{ padding-bottom:var(--sp-12) }
}

/* Tablet: de icoonrail links, de kopregel draagt de waarom-regel. */
@media (min-width:700px) and (max-width:1100px){
  .werkvlak-inhoud{ padding:var(--sp-7) var(--sp-10) var(--sp-10); --wv-pt:var(--sp-7) }
  .c-venster.is-flyout{ left:calc(var(--w-rail) + var(--sp-8)) }
}

/* ── de meetstrook ────────────────────────────────────────────────
   Hangt onder een meetbare rij: het ritme, de stand, en de knop die het
   volgende meetpunt zet. Rustig van toon: dit is een afspraak maken, geen
   waarschuwing. Alleen "te laat" en "nog geen meetpunt" kleuren mee. */
.ms{
  margin-top:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);
  /* ingesloten blok binnen een witte kaart: --cream2, niet --cream
     (vlakkenhiërarchie, design-review §2). Statusvarianten hieronder
     houden hun eigen vulling. */
  background:var(--cream2);
  border:1px solid var(--line);
  border-left:var(--rand-status) solid var(--line);
  border-radius:var(--r-status);
}
.ms-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  margin-bottom:var(--sp-3);
}
.ms-label{
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.ms-ritme{
  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);
  margin-left:auto;
  /* een keuzelijst rekt zich anders over de volle breedte uit */
  width:auto;
  max-width:180px;
}
.ms-regel{
  display:flex;
  align-items:baseline;
  gap:var(--sp-4);
  font-size:var(--t-body);
  line-height:var(--lh-lijst);
}
.ms-dot{
  flex:none;
  width:var(--sp-4);
  height:var(--sp-4);
  border-radius:50%;
  background:var(--line-sterk);
  transform:translateY(-1px);
}
.ms-tekst{ color:var(--ink) }
.ms-acties{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-5);
  margin-top:var(--sp-4);
}
.ms-knop{
  font-family:var(--font-ui);
  font-size:var(--t-knop);
  font-weight:var(--gew-vet);
  color:var(--petrol-deep);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-pil);
  padding:var(--sp-3) var(--sp-7);
  cursor:pointer;
}
.ms-knop:hover{ border-color:var(--petrol); color:var(--petrol) }
.ms-link{
  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;
}
.ms-hint{
  font-size:var(--t-pil);
  color:var(--ink-soft);
}

/* Nog geen meetpunt: een volledigheidsgebrek, dus terracotta en geen rood.
   Het hoort in Vraagt een blik, niet in de aandacht-laag. */
.ms[data-staat="geen-meetpunt"]{
  border-left-color:var(--terra);
  background:var(--vul-terra-rij);
}
.ms[data-staat="geen-meetpunt"] .ms-dot{ background:var(--terra) }

/* Te laat: hier is wel een afspraak, en die is voorbij. */
.ms[data-staat="te-laat"]{
  border-left-color:var(--rood);
  background:var(--vul-amber-fijn);
}
.ms[data-staat="te-laat"] .ms-dot{ background:var(--rood) }
.ms[data-staat="te-laat"] .ms-tekst{ font-weight:var(--gew-vet) }

/* Op koers of wachtend op de afspraak: geen kleur nodig. */
.ms[data-staat="wacht"] .ms-dot,
.ms[data-staat="op-tijd"] .ms-dot{ background:var(--groen) }

/* ── de opname-strook (sensing ronde 1, frame 13a/13b) ──
   Zodra er een lopend meetpunt is, wordt de strook de plek waar je de
   meetwaarde en het inzicht vastlegt. De strook zelf is het ingesloten
   cream2-vlak (vlakkenhiërarchie); de velden erin zijn wit. */
.ms-sub{ font-size:var(--t-klein); color:var(--ink-soft); }
.ms-modus{ display:inline-flex; align-items:center; gap:var(--sp-3); margin-left:auto; }
.ms-modus-label{ font-size:var(--t-meta); color:var(--ink-soft); }
.ms-seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pil); overflow:hidden; background:var(--wit); }
.ms-seg-knop{
  font-family:var(--font-ui); font-size:var(--t-pil); color:var(--ink-soft);
  background:none; border:0; padding:var(--sp-2) var(--sp-5); cursor:pointer; white-space:nowrap;
}
.ms-seg-knop.is-actief{ background:var(--petrol-deep); color:var(--wit); font-weight:var(--gew-vet); }

.ms-opname{ display:flex; flex-direction:column; gap:var(--sp-6); margin-top:var(--sp-5); }

/* het getalblok: gemeten waarde, verwacht, afwijkings-chip */
.ms-getal{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--sp-5); }
.ms-getal-label{ font-size:var(--t-klein); color:var(--ink-soft); }
.ms-getal-in{
  font-family:var(--font-ui); font-size:var(--t-body-plus); 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); width:110px; text-align:right;
}
.ms-getal-verw{ font-size:var(--t-klein); color:var(--ink-soft); white-space:nowrap; }
.ms-afwijking{
  margin-left:auto; display:inline-flex; align-items:center; font-size:var(--t-pil); font-weight:var(--gew-vet);
  border-radius:var(--r-pil); padding:var(--sp-1) var(--sp-6); white-space:nowrap;
}
.ms-afwijking.is-slecht{ color:var(--geel-tekst); background:var(--vul-amber); border:1px solid var(--amber-rand); }
.ms-afwijking.is-goed{ color:var(--groen); background:var(--vul-groen); border:1px solid rgba(44,138,107,.4); }

/* het inzichtblok */
.ms-inzicht{ display:flex; flex-direction:column; gap:var(--sp-6);
  border-top:1px solid var(--line); padding-top:var(--sp-6); }
.ms-inzicht-kop{ display:flex; align-items:baseline; gap:var(--sp-5); flex-wrap:wrap; }
.ms-inzicht-koplabel{
  font-size:var(--t-overline); font-weight:var(--gew-zwaar); letter-spacing:var(--ls-breed);
  text-transform:uppercase; color:var(--petrol-deep);
}
.ms-inzicht-kopsub{ font-size:var(--t-pil); color:var(--ink-soft); }
.ms-inzicht-veld{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ms-inzicht-nudge{ font-size:var(--t-meta); color:var(--ink-soft); }
.ms-ladders{ display:flex; gap:var(--sp-8); flex-wrap:wrap; }
.ms-ladder{ display:flex; flex-direction:column; gap:var(--sp-2); }
/* Signaal · Sterkte · (rechts) Bewijs op één rij (frame 13a) */
.ms-sig-rij{ display:flex; gap:var(--sp-8); flex-wrap:wrap; align-items:flex-start; }
.ms-bewijs-veld{ display:flex; flex-direction:column; gap:var(--sp-2); margin-left:auto; }
/* Stadium als levenscyclus-onderregel, label inline met de pillen, plus de
   lopende-acties-sprong rechts uitgelijnd */
.ms-stadium-rij{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:var(--sp-5); }
.ms-stadium-rij .ms-ladder{ flex-direction:row; align-items:center; gap:var(--sp-5); }
.ms-stadium-acties{ margin-left:auto; }
.ms-bewijs{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.ms-bewijs-telling{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); }
.ms-bewijs-gesprek{
  margin-left:auto; font-family:var(--font-ui); font-size:var(--t-knop); font-weight:var(--gew-zwaar);
  color:var(--terra); background:none; border:0; cursor:pointer; white-space:nowrap;
}
.ms-bewijs-gesprek:hover{ text-decoration:underline; }
.ms-voet{ margin-top:var(--sp-4); }

/* Adoption-stage + gewicht (addendum §1): één optionele regel onder sterkte. */
/* Fable-ruling 5: de twee adoptie-verdiepingen samen achter één inklapregel. */
.ms-verdieping{ border-top:1px solid var(--cream2); padding-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-6); }
.ms-verdieping > .ms-stage, .ms-verdieping > .ms-kenmerk{ margin:0; }
.ms-verdieping-kop{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--petrol-deep); cursor:pointer; list-style:none; }
.ms-verdieping-kop::-webkit-details-marker{ display:none; }
.ms-verdieping-kop::before{ content:"\0025B8 "; color:var(--ink-soft); }
.ms-verdieping[open] > .ms-verdieping-kop::before{ content:"\0025BE "; }
.ms-stage{ display:flex; flex-direction:column; gap:var(--sp-3); }
.ms-stage-rij{ display:flex; gap:var(--sp-8); flex-wrap:wrap; align-items:flex-end; }
.ms-stage .c-statustoggle{ flex-wrap:wrap; }  /* zes standen mogen doorbreken */
.ms-gewicht{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ms-gewicht-in{ width:96px; }
.ms-stage-meta{ font-size:var(--t-meta); color:var(--ink-soft); }
/* Rogers-kenmerk-chips (addendum §2), boven het grondoorzaak-tekstveld. */
.ms-kenmerk-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.ms-kenmerk-chip{ font-family:var(--font-ui); font-size:var(--t-pil); color:var(--ink-soft);
  background:var(--wit); border:1px solid var(--line); border-radius:var(--r-pil);
  padding:var(--sp-2) var(--sp-6); cursor:pointer; }
.ms-kenmerk-chip:hover{ border-color:var(--petrol-light); }
.ms-kenmerk-chip.is-actief{ background:var(--petrol-deep); color:var(--wit); border-color:var(--petrol-deep); }

/* de ladders vallen op een telefoon onder elkaar, elk vol breed */
@media (max-width:699px){
  .ms-ladders{ gap:var(--sp-5); }
  .ms-ladder{ flex:1 1 100%; }
  .ms-modus{ margin-left:0; }
}

/* de telling per stap in het fundament-overzicht */
.c-fundament-blik{
  margin-left:auto;
  font-size:var(--t-meta);
  font-weight:var(--gew-zwaar);
  color:var(--terra);
  white-space:nowrap;
}

/* ── de trajectnaam in de kopregel ────────────────────────────────
   Op een telefoon is het zijmenu weg. De weg naar het opslagmenu loopt
   daar via de kopregel, zoals frame 7c toont. Op groter formaat woont de
   trajectnaam in het zijmenu en is deze variant onzichtbaar. */
.c-kopregel-traject{ display:none }
.c-kopregel-naam{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-m);
  color:var(--petrol-dark);
  background:none;
  border:0;
  padding:0;
  text-align:left;
  cursor:pointer;
}
.c-kopregel-naam:hover{ color:var(--petrol) }

@media (max-width:699px){
  /* de tabbalk zegt al waar je bent, dus de ankertitel mag wijken */
  .c-kopregel-blok{ display:none }
  .c-kopregel-traject{ display:block }
}

/* ── het dashboard ────────────────────────────────────────────────
   De waarom-regel en de aandacht-laag staan boven de drie lagen, met
   lucht ertussen. De rest van de dashboardstijl woont nog in
   huisstijl.css onder het bs-voorvoegsel; die krimpt in ronde 7. */
.bs > .c-waarom{ margin-bottom:var(--sp-6) }
.bs > .c-aandacht{ margin-bottom:var(--sp-8) }

/* De pijl waarmee je van een aandachtsregel naar de plek springt. */
.c-aandacht-naar{
  flex:none;
  margin-left:auto;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  color:var(--ink-soft);
  background:none;
  border:0;
  padding:0 0 0 var(--sp-3);
  cursor:pointer;
}
.c-aandacht-naar:hover{ color:var(--terra) }

/* ── de carrousel van het noorden ─────────────────────────────────
   Scroll-snap, geen framework. Het volgende kaartje piept aan de rand
   door zodat zichtbaar is dat er meer is. */
/* De oude .bs-noord-lijst-stijl is van de rail gehaald, dus deze regels
   staan er alleen. De padding die die klasse gaf, hoort er nog wel bij. */
.c-carrousel{
  display:flex;
  gap:var(--sp-6);
  padding:var(--sp-7) var(--sp-8);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* de doorpiepende rand valt weg als de scrollbalk ruimte pakt */
  padding-bottom:var(--sp-3);
  -webkit-overflow-scrolling:touch;
}
.c-carrousel-item{
  flex:none;
  width:calc(100% - 90px); /* 90px, de rand waarover het volgende doorpiept */
  scroll-snap-align:start;
}

.c-punt{
  border:0;
  padding:0;
  cursor:pointer;
}
.c-puntjes-bijschrift{
  text-align:center;
  font-size:var(--t-meta);
  color:var(--ink-soft);
  margin-top:var(--sp-3);
}

@media (max-width:699px){
  .c-carrousel-item{ width:calc(100% - 34px) }
}
@media (min-width:700px) and (max-width:1100px){
  .c-carrousel-item{ width:calc(100% - 70px) }
}


/* ── twee losse reparaties in de oude dashboardstijl ───────────────
   De "+ actie"-knop bij een signaal staat absoluut binnen zijn kaart.
   Eén houder miste position:relative, waardoor die knop tot in de
   rechterbovenhoek van het werkvlak sprong. */
.bs-mp-laatste{ position:relative }
/* vangnet: elke houder van zo'n knop moet zijn eigen anker zijn */
.bs-sig-actie{ z-index:1 }

/* ── het fundament-paneel ─────────────────────────────────────────
   Geen scherm maar een paneel: het schuift over het werkvlak, met de
   rest gedimd eronder. Op een telefoon wordt het een bottom sheet. */
#fundament{ position:fixed; inset:0; z-index:var(--z-sheet); pointer-events:none }
#fundament[hidden]{ display:none }
/* De houder zelf vangt niets op: alleen de sluier en het paneel zijn er, en
   alles daarbuiten hoort bij het scherm eronder. Zonder dit zou de houder over
   het zijmenu liggen en elke klik daarop opeten. */
#fundament > *{ pointer-events:auto }
/* De sluier begint waar het paneel begint: naast het zijmenu. Het paneel staat
   bewust náást het menu en niet erover, en dan hoort het menu ook te blijven
   werken — een menu dat je ziet en dat de hand toont, maar dat alleen het
   paneel sluit, liegt over wat het is. */
#fundament .c-sluier{ position:absolute; inset:0 0 0 var(--w-zijmenu) }
@media (min-width:700px) and (max-width:1100px){
  #fundament .c-sluier{ left:var(--w-rail) }
}
@media (max-width:699px){
  #fundament .c-sluier{ left:0 }
}

/* De sluier draagt zelf een z-index, dus het paneel moet er expliciet
   boven; anders vangt de sluier elke klik op het paneel op. */
.c-paneel{
  position:absolute;
  z-index:var(--z-flyout);
  top:0; bottom:0;
  left:var(--w-zijmenu);
  width:var(--w-paneel);
  display:flex;
  flex-direction:column;
  background:var(--wit);
  border-right:1px solid var(--line);
  box-shadow:var(--sch-paneel);
}
.c-paneel-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  padding:var(--sp-9) var(--sp-10) var(--sp-6);
  border-bottom:1px solid var(--line);
}
.c-paneel-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-xl);
  color:var(--petrol-dark);
}
.c-paneel-teller{
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  color:var(--ink-soft);
}
.c-paneel-sluit{
  margin-left:auto;
  font-family:var(--font-ui);
  font-size:var(--t-kop-m);
  color:var(--ink-soft);
  background:none;
  border:0;
  cursor:pointer;
  line-height:1;
}
.c-paneel-weergaven{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3);
  padding:var(--sp-6) var(--sp-10);
  border-bottom:1px solid var(--line);
}
.c-paneel-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:var(--sp-7) var(--sp-8) var(--sp-12);
}
.c-paneel-uitleg,
.c-paneel-rust{
  font-size:var(--t-klein);
  color:var(--ink-soft);
  line-height:var(--lh-lijst);
  margin:0 var(--sp-3) var(--sp-6);
}
.c-paneel-rust{ color:var(--groen); font-weight:var(--gew-vet) }
.c-paneel-body .c-groepkop{ margin:var(--sp-8) var(--sp-3) var(--sp-3) }
.c-paneel-body .c-groepkop:first-child{ margin-top:0 }
.c-paneel-body .c-fundament-rij{ width:100% }
.c-paneel-body .c-opbouwrij{ width:100%; margin-bottom:var(--sp-2) }
.c-paneel-body .c-opbouwrij.is-hier{ width:auto }
.c-opbouw-hoofd{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
  flex-wrap:wrap;
}
.c-paneel-body .c-opbouwrij.is-hier .c-knop{ margin-top:var(--sp-5) }

/* Tablet: het paneel begint na de icoonrail. */
@media (min-width:700px) and (max-width:1100px){
  .c-paneel{ left:var(--w-rail) }
}

/* Mobiel: een bottom sheet die de tabbalk afdekt. */
@media (max-width:699px){
  .c-paneel{
    left:0; right:0;
    top:auto;
    height:86vh;
    width:auto;
    border-right:0;
    border-radius:var(--r-sheet);
    box-shadow:var(--sch-sheet);
  }
  .c-paneel-kop{ padding:var(--sp-7) var(--sp-8) var(--sp-5) }
  .c-paneel-weergaven{ padding:var(--sp-5) var(--sp-8) }
  .c-paneel-body{ padding:var(--sp-6) var(--sp-7) var(--sp-14) }
}

/* ── de versheidregel ─────────────────────────────────────────────
   Die woont sinds ronde 5 in de companion-rail (het blok .c-railblok in
   componenten.css) en op mobiel in de ondertitel van het kruimelpad. De
   losse regel onder het kruimelpad bestaat niet meer. */


/* ── liggend op een telefoon ──────────────────────────────────────
   Bij een lage viewport eten de kopregel en de tabbalk het scherm op.
   Alles wat daar staat wordt compacter: de kopregel verliest zijn
   ondertitel en de tabbalk zijn labels. De inhoud houdt zo het grootste
   deel van de hoogte, wat bij een tijdlijn of een tabel het verschil
   maakt tussen bruikbaar en niet. */
@media (max-height:520px){
  .c-kopregel{ padding:var(--sp-4) var(--sp-8) }
  .c-kopregel-sub{ display:none }
  .c-kopregel-traject .c-opslagstatus{ display:none }
  .c-kopregel-naam{ font-size:var(--t-kop-s) }

  .c-tabbalk{ padding:var(--sp-2) var(--sp-3) var(--sp-3) }
  .c-tab{ gap:0 }
  .c-tab-label{ display:none }
  .c-tab-icoon{ font-size:var(--t-kop-m) }

  .werkvlak-inhoud{ padding:var(--sp-5) var(--sp-7); --wv-pt:var(--sp-5) }
  .c-fab{ padding:var(--sp-4) var(--sp-7); font-size:var(--t-knop) }

  /* het paneel en de sheet mogen bijna het hele scherm nemen */
  .c-paneel{ height:94vh }
  .c-paneel-kop{ padding:var(--sp-5) var(--sp-7) var(--sp-3) }
  .c-paneel-weergaven{ padding:var(--sp-3) var(--sp-7) }
  .c-venster.is-flyout{ max-height:94vh }
}

/* de "N acties loopt ↗"-regel onderaan de opname-strook (sensing §1) */
.ms-acties-lopend{ margin-top:var(--sp-5); border-top:1px solid var(--line); padding-top:var(--sp-5); }

/* ── Ronde 24: dashboard-sprong ──
   De terugkeer-banner is een flex-item tussen de kopregel en de scrollende
   inhoud, dus hij blijft vanzelf staan (ook op mobiel, "vaste balk onder de
   kop"). Mint-stijl = companion-voorstel/-context. */
.c-sprongbanner{
  flex:none;
  display:flex; align-items:center; gap:var(--sp-6);
  margin:var(--sp-6) 0 var(--sp-6); padding:11px 16px;   /* 11px buiten de schaal, per design; §AH/46: ook ruimte ONDER de banner zodat hij niet tegen het volgende element plakt */
  border:1px solid #7FC4BE; border-radius:12px;
  background:rgba(127,196,190,.1);
}
.c-sprongbanner-tekst{ flex:1; min-width:0; font-size:var(--t-body); color:var(--ink); line-height:1.5; }
.c-sprongbanner-tekst b{ color:var(--petrol-dark); font-weight:var(--gew-vet); }
/* de doe-zin: wat er te doen is, een tint zachter, op een eigen regel */
.c-sprongbanner-doe{ display:block; font-size:var(--t-klein); color:var(--ink-soft); margin-top:2px; }
.c-sprongbanner-terug{
  flex:none; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar);
  color:var(--petrol-deep); background:none; border:0; cursor:pointer; white-space:nowrap;
}
.c-sprongbanner-terug:hover{ text-decoration:underline; }
/* "volgende ▸": doorloop-knop, zelfde toon als "← terug" */
.c-sprongbanner-volgende{
  flex:none; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar);
  color:var(--petrol-deep); background:none; border:0; cursor:pointer; white-space:nowrap;
}
.c-sprongbanner-volgende:hover{ text-decoration:underline; }
/* ✕ sluit alleen de melding (geen navigatie); rustiger dan "← terug" */
.c-sprongbanner-sluit{
  flex:none; width:24px; height:24px; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:var(--t-klein);
  color:var(--ink-soft); background:none; border:0; cursor:pointer;
  border-radius:6px;
}
.c-sprongbanner-sluit:hover{ color:var(--ink); background:rgba(127,196,190,.18); }
/* Mobiel: de "← terug naar …"-knop heeft een lang label (white-space:nowrap)
   en flex:none, dus op één rij drukt hij de tekst plat tot één woord per regel
   en gaan de elementen over elkaar heen. We stapelen daarom: de tekst over de
   volle breedte, de terug-/volgende-knoppen eronder, en de ✕ vast in de
   rechterbovenhoek. */
@media (max-width:699px){
  .c-sprongbanner{ position:relative; margin:0; border-radius:0; border-left:0; border-right:0;
    flex-direction:column; align-items:stretch; gap:var(--sp-3); }
  .c-sprongbanner-tekst{ padding-right:28px; }   /* ruimte naast de ✕ */
  .c-sprongbanner-terug, .c-sprongbanner-volgende{ align-self:flex-start; white-space:normal; text-align:left; }
  .c-sprongbanner-sluit{ position:absolute; top:8px; right:8px; }
}

/* de amber landings-gloed: 2 s, dan fade. Ring + vulling via box-shadow, zodat
   de eigen rand en achtergrond van het item ongemoeid blijven. */
.is-sprong-gloed{ animation:sprong-gloed 2s ease forwards; border-radius:10px; }
@keyframes sprong-gloed{
  0%, 55%{ box-shadow:0 0 0 1.5px #D9A63C, 0 0 0 5.5px rgba(217,166,60,.14), inset 0 0 0 999px rgba(217,166,60,.09); }
  100%{ box-shadow:0 0 0 1.5px rgba(217,166,60,0), 0 0 0 5.5px rgba(217,166,60,0), inset 0 0 0 999px rgba(217,166,60,0); }
}
.is-sprong-dim{ opacity:.55; transition:opacity .3s; }
@media (prefers-reduced-motion:reduce){ .is-sprong-gloed{ animation-duration:.01ms; } }

/* ═══════════════════════════════════════════════════════════════════
   #184 · de rapport-werkweergave (route #rapport/[publiek])
   ───────────────────────────────────────────────────────────────────
   Volscherm-laag met één scroll-vlak (de iframe). Boven de app (fab/geleide),
   onder het detailvenster (560) zodat de samensteller-popover erover valt. De
   slides zelf dragen deze chrome nooit — dit is app-chrome, geen rapport. */
/* R90 — de werkweergave woont náást het zijmenu in plaats van eroverheen. Het
   rapport is een scherm van de app geworden, geen los venster: je wisselt van
   rapport in dezelfde navigatie waarmee je van scherm wisselt. */
.c-werkweergave{
  position:fixed; inset:0 0 0 var(--w-zijmenu); z-index:120;
  display:flex; flex-direction:column;
  background:var(--canvas);
}
@media (max-width:1100px){ .c-werkweergave{ left:var(--w-rail); } }
@media (max-width:699px){ .c-werkweergave{ left:0; } }
.c-werkweergave[hidden]{ display:none; }

/* ── R90 · de rapport-kop ──────────────────────────────────────────
   Titel, een stille teller, de chips die het rapport sturen, en rechts
   presenteren (pil) en exporteren (tekstlink). Geen "maak"-knop: elke wijziging
   herbouwt de bladen meteen. */
.c-werk-kop{
  flex:none; background:var(--cream); border-bottom:1px solid var(--line);
  padding:var(--sp-6) var(--sp-7) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-5);
}
.c-werk-koprij{ display:flex; align-items:baseline; gap:var(--sp-5); flex-wrap:wrap; }
.c-werk-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-werk-kopmeta{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-mist); }
.c-werk-kopacties{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-5); }
.c-werk-export{
  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-werk-export:hover{ text-decoration:underline; }
.c-werk-export[disabled]{ opacity:.45; cursor:not-allowed; text-decoration:none; }
.c-werk-kopacties .c-knop[disabled]{ opacity:.45; cursor:not-allowed; }
.c-werk-sluit{
  flex:none; width:32px; height:32px; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:var(--t-body);
  color:var(--ink-soft); background:none; border:1px solid var(--line); border-radius:var(--r-pil); cursor:pointer;
}
.c-werk-sluit:hover{ color:var(--ink); background:rgba(0,0,0,.04); }

/* De chips: stil label, gekozen waarde in het zwart. Ze zijn geen filterbalk
   maar de instelling van het document dat je aan het lezen bent. */
.c-werk-chips{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.c-rapchip{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  min-height:32px; padding:var(--sp-2) var(--sp-5);
  font-family:var(--font-ui); font-size:var(--t-klein);
  color:var(--ink-soft); background:var(--wit);
  border:1px solid var(--line); border-radius:var(--r-pil); cursor:pointer;
}
.c-rapchip:hover{ border-color:var(--ink-mist); }
.c-rapchip-waarde{ color:var(--ink); font-weight:var(--gew-vet); }
.c-rapchip-pijl{ color:var(--ink-mist); font-size:var(--t-meta); }

.c-rapchip-menu{
  position:fixed; z-index:140; min-width:200px; max-width:min(320px, 92vw);
  max-height:min(60vh, 420px); overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-4); background:var(--wit);
  border:1px solid var(--line); border-radius:var(--r-veld);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
}
.c-rapchip-optie, .c-rapchip-wis{
  display:block; width:100%; text-align:left;
  padding:var(--sp-3) var(--sp-4); border:0; border-radius:var(--r-veld);
  background:none; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink);
}
.c-rapchip-optie:hover, .c-rapchip-wis:hover{ background:var(--cream2); }
.c-rapchip-wis{ color:var(--ink-soft); }
.c-rapchip-datum{
  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-rapchip-vink{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-veld); cursor:pointer;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink);
}
.c-rapchip-vink:hover{ background:var(--cream2); }
.c-rapchip-archiefrij{ display:flex; align-items:center; gap:var(--sp-3); }
.c-rapchip-archiefrij .c-rapchip-optie{ flex:1 1 auto; min-width:0; }
.c-rapchip-leeg{ margin:0; padding:var(--sp-3) var(--sp-4); font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-mist); }

/* ── R90b · mobiel ≤699px ──────────────────────────────────────────
   Geen apart scherm: de kop wordt sticky (titel + presenteren op rij één) en de
   chips schuiven eronder horizontaal weg. 44px raakvlak, want dit zijn de enige
   bedieningselementen van het scherm. */
@media (max-width:699px){
  .c-werk-kop{ position:sticky; top:0; z-index:2; padding:var(--sp-5) var(--sp-5) var(--sp-4); gap:var(--sp-4); }
  .c-werk-koprij{ align-items:center; flex-wrap:nowrap; }
  .c-werk-titel{ font-size:var(--t-body); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* De teller kost op deze breedte meer dan ze zegt. */
  .c-werk-kopmeta{ display:none; }
  .c-werk-kopacties{ gap:var(--sp-4); }
  .c-werk-export{ display:none; }
  .c-werk-chips{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    margin:0 calc(-1 * var(--sp-5)); padding:0 var(--sp-5) var(--sp-2);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .c-werk-chips::-webkit-scrollbar{ display:none; }
  .c-rapchip{ flex:none; min-height:44px; }
  .c-werk-slot{ position:sticky; top:0; }
  .c-rapchip-menu{ max-width:min(320px, 94vw); }
  .c-rapchip-optie, .c-rapchip-wis, .c-rapchip-vink{ min-height:44px; align-items:center; display:flex; }
}

/* 89f · het slot-vlak — één keer, bóven blad 1, nooit ín de slides en nooit per
   blad. De bladen zelf staan in de ghost-staat; dit vlak zegt alleen waaróm. */
.c-werk-slot{
  flex:none; display:flex; align-items:center; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-7);
  background:var(--cream2); border-bottom:1px solid var(--line);
}
.c-werk-slot-glyph{ flex:none; font-size:var(--t-body); line-height:1; }
.c-werk-slot-tekst{
  flex:1 1 auto; margin:0; max-width:62ch;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink);
}
/* De woorden staan onder elkaar in één kolom, zodat de band zijn rij-anatomie
   houdt: teken links, woorden in het midden, acties rechts. De eerste regel zegt
   wat dit is, de tweede wat Team toevoegt, de derde dat het rapport gratis
   leesbaar blijft — die laatste vlak vóór de knop. */
.c-werk-slot-woorden{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.c-werk-slot-woorden .c-werk-slot-tekst{ flex:none; }
.c-werk-slot-wat, .c-werk-slot-gratis{
  margin:0; max-width:62ch;
  font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft);
}
.c-werk-slot-acties{ flex:none; display:flex; align-items:center; gap:var(--sp-5); }
.c-werk-slot-vb{
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-half);
  color:var(--petrol-deep); text-decoration:none; white-space:nowrap;
}
.c-werk-slot-vb:hover{ text-decoration:underline; }

/* Dood, niet verstopt: je ziet dat presenteren en exporteren bestaan. */
.c-werk-rechts .c-knop[disabled]{ opacity:.45; cursor:not-allowed; }

@media (max-width:699px){
  .c-werk-slot{ flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); }
  .c-werk-slot-acties{ width:100%; justify-content:flex-start; }
}

/* het enige scroll-vlak: de rapportpagina's op ware grootte */
.c-werk-frame{ flex:1 1 auto; width:100%; border:0; background:var(--cream); }

@media (max-width:699px){
  .c-werk-bar{ gap:var(--sp-4); padding:var(--sp-4) var(--sp-5); }
  .c-werk-rechts{ width:100%; justify-content:flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════
   #184 · de samensteller — sectie-vinkjes, peildatum, onderwerpen
   (de preset-kaarten/1-op-1-kiezer staan in componenten.css) */
.c-rapport-peil{ margin:var(--sp-5) 0 0; }
.c-rapport-peil-rij{ display:flex; align-items:center; gap:var(--sp-4); font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); }
.c-rapport-peil-datum{ 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-rapport-secties{ margin:var(--sp-6) 0 0; }
.c-rapport-secties-kop{
  font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-zwaar);
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp-4);
}
.c-rapport-sectie{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-3); border-bottom:1px solid var(--line);
  font-family:var(--font-ui); font-size:var(--t-body); color:var(--ink); cursor:pointer;
}
.c-rapport-sectie input{ flex:none; }
.c-rapport-sectie.is-leeg{ color:var(--ink-soft); cursor:default; }
.c-rapport-sectie-lab{ min-width:0; }

/* §6o · de te-bespreken onderwerpen, ingesprongen onder "Gevraagd aan …" */
.c-rapport-onderwerpen{
  margin:var(--sp-2) 0 var(--sp-4) var(--sp-8);
  padding:var(--sp-4) var(--sp-5); border-left:2px solid var(--line-sterk);
  background:rgba(0,0,0,.015); border-radius:0 var(--r-s) var(--r-s) 0;
}
.c-rapport-onderwerpen-kop{
  font-family:var(--font-ui); font-size:var(--t-mini); font-weight:var(--gew-zwaar);
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--sp-3);
}
.c-rapport-onderwerpen-lijst{ display:flex; flex-direction:column; gap:var(--sp-2); }
.c-rapport-onderwerp{ display:flex; align-items:flex-start; gap:var(--sp-3); font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink); cursor:pointer; }
.c-rapport-onderwerp input{ flex:none; margin-top:2px; }
.c-rapport-onderwerpen-leeg{ font-family:var(--font-ui); font-size:var(--t-klein); color:var(--ink-soft); margin:0; }
.c-rapport-onderwerpen-meer{
  align-self:flex-start; font-family:var(--font-ui); font-size:var(--t-klein); font-weight:var(--gew-half);
  color:var(--petrol-deep); background:none; border:0; cursor:pointer; padding:var(--sp-2) 0;
}
.c-rapport-onderwerpen-meer:hover{ text-decoration:underline; }

/* ═══ §S / punt 29 — de inhoudskolom ═══════════════════════════════
   Eén links-uitgelijnde inhoudskolom per pagina: standaard 920px (lijst- en
   formulierpagina's), het dashboard en planning/gantt mogen breder (1200px).
   padding-inline 32px (mobiel 16px). Kop, tabs, filterbalk, rijen, "+ pill" en
   voetregels leven allemaal in die kolom — niets lijnt op de vensterrand, alles
   links op de kolom, zodat op brede schermen (1440/1920) alleen het canvas
   groeit, nooit de rijen. */
.werkvlak-inhoud{ --kolom:920px; padding-inline:32px; }
.werkvlak-inhoud.anker-dashboard,
.werkvlak-inhoud.anker-planning{ --kolom:1200px; }
/* elk direct kind van de werkvlak-inhoud zit in de kolom, links uitgelijnd */
.werkvlak-inhoud > *{ max-width:var(--kolom); margin-inline:0; }
/* de stap-/formulierkaart: was 820px gecentreerd → nu de kolom, links */
.werkvlak-inhoud .kaart{ max-width:var(--kolom); margin-inline:0; }
.werkvlak-inhoud .kaart.breed{ max-width:none; }
/* de kopregel-titel lijnt op dezelfde 32px-linkerinzet als de kolom */
.c-kopregel{ padding-inline:32px; }
@media (max-width:699px){
  .werkvlak-inhoud{ padding-inline:16px; }
  .c-kopregel{ padding-inline:16px; }
}