/* afwerking.css — de onderdelen van ronde 8 en 10
   ──────────────────────────────────────────────────────────────
   Bij elkaar gehouden en als laatste geladen: de afronding (suggestie-
   kaart, oogst), de feedback-flyout en -ingang, de micro-vraag-strook op
   de toast, en de meet-toggle in de opslag-flyout. Alles verwijst naar
   tokens.css; geen kale hex, geen kale radius.

   Bronframes: 10a (feedback + micro-vraag), 10b (meet-instellingen), en de
   afrond-briefing voor de suggestiekaart en het afrondscherm.
   ────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════
   DE SUGGESTIEKAART — "Het noorden is bereikt" (afrond-briefing)
   ═══════════════════════════════════════════════════════════════════
   Zelfde vorm als .c-helper (die staat in het donkere zijmenu), maar
   feestelijker: een petrol-light rand en kop, en een "nog niet"-wegknip. */

.c-helper.is-noorden{
  background:var(--vul-mint-zacht);
  border-color:var(--petrol-light);
  border-left:3px solid var(--petrol-light);
}
.c-helper.is-noorden .c-helper-kop{
  color:var(--petrol-light);
}
/* De "Start de afronding"-link draagt al .c-helper-cta (terracotta). De
   "nog niet"-wegknip is klein en rustig eronder. */
.c-helper-weg{
  display:block;
  margin-top:var(--sp-3);
  font-family:var(--font-ui);
  font-size:var(--t-meta);
  color:var(--op-meta);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
}
.c-helper-weg:hover{ color:var(--op-tekst); }


/* ═══════════════════════════════════════════════════════════════════
   DE FEEDBACK-INGANG onderaan het zijmenu (10a)
   ═══════════════════════════════════════════════════════════════════
   In het zijmenu staat "✎ Feedback"; het icoon zit in de tekst. De ingang
   leeft op het donkere menu, dus de tekstkleur leunt op de alfa-schaal. */

.c-feedback-ingang{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  width:calc(100% - var(--sp-6));
  /* de stille regel onder de companion-kaart (23c): geen vlak, alleen een
     fijne scheiding erboven. Eén kaart onderin, Feedback als rustige regel. */
  margin:var(--sp-5) var(--sp-5) 0;
  padding:var(--sp-5) var(--sp-3) var(--sp-2);
  border-radius:0;
  border:0;
  border-top:1px solid var(--op-lijn);
  background:none;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  font-weight:var(--gew-half);
  color:var(--op-rust);
  text-align:left;
  cursor:pointer;
}
.c-feedback-ingang::before{
  content:"\270e"; /* ✎ */
  flex:none;
  width:16px;
  text-align:center;
  opacity:var(--op-icoon);
}
.c-feedback-ingang:hover{ background:none; color:var(--op-vol); }

/* In de mobiele opslag-sheet staat de ingang op een lichte achtergrond;
   daar draagt hij de gewone tekstkleur in plaats van wit. */
.c-feedback-ingang-sheet{
  color:var(--petrol-deep);
  background:var(--cream2);
  width:100%;
  margin:var(--sp-5) 0 0;
}
.c-feedback-ingang-sheet::before{ opacity:.6; }
.c-feedback-ingang-sheet:hover{ background:var(--cream); }


/* ═══════════════════════════════════════════════════════════════════
   DE FEEDBACK-FLYOUT (10a)
   ═══════════════════════════════════════════════════════════════════
   Op web een wit paneel van 380px, links-onder naast het zijmenu — geen
   bottom-sheet. Op mobiel wél een sheet vanaf de onderkant. */

.c-feedback-houder{
  position:fixed;
  inset:0;
  z-index:var(--z-venster);
}
/* De sluier vult de houder; een klik ernaast sluit. De basis-.c-sluier
   draagt z-index:var(--z-paneel); zonder een hogere z-index op het paneel
   zou de sluier eroverheen liggen en elke klik in het formulier opvangen
   als een klik-buiten (het formulier sloot dan bij elke chip of verstuur). */
.c-feedback-houder .c-sluier{
  position:absolute;
  inset:0;
  z-index:var(--z-paneel);
  background:var(--sluier);
}
.c-feedback-houder .c-feedback{ z-index:calc(var(--z-paneel) + 1); }

.c-feedback{
  position:absolute;
  left:calc(var(--w-zijmenu) + var(--sp-5));
  bottom:var(--sp-6);
  width:380px;
  max-width:calc(100vw - var(--sp-8));
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-venster);
  box-shadow:var(--sch-flyout);
  overflow:hidden;
}
.c-feedback-kop{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-7) var(--sp-4);
}
.c-feedback-titel{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-s);
  color:var(--petrol-deep);
}
.c-feedback-sluit{
  margin-left:auto;
  font-size:var(--t-titel);
  line-height:1;
  color:var(--ink-soft);
  background:none;
  border:0;
  cursor:pointer;
}
.c-feedback-body{
  padding:0 var(--sp-7) var(--sp-7);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

/* de drie soort-chips */
.c-feedback-soort{ display:flex; gap:var(--sp-3); }
.c-feedback-chip{
  flex:1;
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  text-align:center;
  color:var(--ink-soft);
  background:var(--wit);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:var(--sp-4) 0;
  cursor:pointer;
  white-space:nowrap;
}
.c-feedback-chip.is-actief{
  color:var(--wit);
  background:var(--petrol);
  border-color:var(--petrol);
}

/* het tekstveld met zijn meebewegende overline-label */
.c-feedback-veld{ display:flex; flex-direction:column; gap:var(--sp-2); }
.c-feedback-lab{
  font-size:var(--t-overline);
  font-weight:var(--gew-zwaar);
  letter-spacing:var(--ls-overline);
  color:var(--petrol-deep);
}
.c-feedback-tekst{
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:9px 11px; /* gelijk aan de placeholder-box in 10a */
  min-height:64px;
  resize:vertical;
  line-height:var(--lh-body);
}
.c-feedback-tekst::placeholder{ color:var(--ink-soft); font-style:italic; }

/* de onderregel: hulp links, Verstuur rechts */
.c-feedback-onder{
  display:flex;
  align-items:center;
  gap:var(--sp-5);
}
.c-feedback-hulp{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}
.c-feedback-hulp b{ color:var(--petrol-deep); font-weight:var(--gew-vet); }
.c-feedback-verstuur{
  margin-left:auto;
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  font-weight:var(--gew-zwaar);
  color:var(--wit);
  background:var(--terra);
  border:0;
  border-radius:var(--r-pil);
  padding:9px var(--sp-8); /* 9px hoog, pill zoals in 10a */
  cursor:pointer;
  white-space:nowrap;
}
.c-feedback-verstuur:hover{ background:var(--terra-hover); }
.c-feedback-verstuur:disabled{ opacity:var(--op-half); cursor:default; }


/* ═══════════════════════════════════════════════════════════════════
   DE MICRO-VRAAG als meelifter op de toast (10a)
   ═══════════════════════════════════════════════════════════════════
   De erkennings-toast draagt een tweede regel: de vraag met twee
   antwoorden en een eigen kruis. Nooit een los venster. De toast-basis
   staat in componenten.css; hier alleen de rijopbouw en de strook. */

.c-toasts{
  position:fixed;
  left:50%;
  bottom:var(--sp-12);
  transform:translateX(-50%);
  z-index:var(--z-toast);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  align-items:center;
  width:min(92vw, 520px);
  pointer-events:none;
}
/* De toast zelf krijgt weer pointer-events; de houder liet ze door. Sinds
   ronde 8 draagt de toast .c-toast (componenten.css); we zetten hem hier
   als kolom zodat de micro-strook eronder past, en overschrijven de
   position:fixed uit componenten.css want de houder plaatst nu. */
.c-toasts .c-toast{
  position:static;
  transform:none;
  left:auto;
  bottom:auto;
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-3);
  width:100%;
  pointer-events:auto;
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--duur) var(--soepel), transform var(--duur) var(--soepel);
}
.c-toasts .c-toast.in{ opacity:1; transform:translateY(0); }

/* de bovenste regel: tekst, eventueel een knop, en het kruis */
.c-toast-rij{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
}
.c-toast-rij .c-toast-tekst{ flex:1; min-width:0; }
/* Frame 10a: een erkenning draagt een ✓ vóór de tekst. */
.c-toast[data-soort="erkenning"] .c-toast-rij .c-toast-tekst::before{
  content:"\2713\00a0\00a0"; /* ✓ + twee spaties */
  font-weight:var(--gew-zwaar);
  opacity:.9;
}
/* De score-toast leent het petrol-vlak van de erkenning, maar de kop is een
   vraag ("Kan je ons helpen…?"), geen bevestiging — dus geen ✓. */
.c-toast.is-score .c-toast-rij .c-toast-tekst::before{ content:none; }
/* FB17: een validatie draagt een amber → vóór de tekst; nooit een ✓. Een
   waarschuwing draagt geen icoon — de rode linksrand is het signaal. */
.c-toast[data-soort="validatie"] .c-toast-rij .c-toast-tekst::before{
  content:"\2192\00a0\00a0"; /* → + twee spaties */
  color:var(--geel-tekst);
  font-weight:var(--gew-zwaar);
}

/* de micro-vraag-strook eronder */
.c-toast-micro{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--wit-transp);
}
.c-toast-micro-vraag{
  flex:1;
  min-width:0;
  font-size:var(--t-pil);
  color:var(--wit);
  opacity:.92;
  line-height:var(--lh-lijst);
}
.c-toast-micro-knop{
  flex:none;
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  font-weight:var(--gew-vet);
  color:var(--wit);
  background:var(--wit-transp);
  border:0;
  border-radius:var(--r-s);
  padding:5px var(--sp-5);
  cursor:pointer;
  white-space:nowrap;
}
.c-toast-micro-knop:hover{ background:var(--wit); color:var(--petrol-deep); }
.c-toast-micro-sluit{
  flex:none;
  font-size:var(--t-body-plus);
  line-height:1;
  color:var(--wit);
  opacity:.7;
  background:none;
  border:0;
  cursor:pointer;
}

/* de ster-score-strook — dezelfde plek en toon als de micro-strook, maar met
   een 1–5-sterrenschaal (fase 1) die morpht naar een invoerregel (fase 2) */
.c-toast-score{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--wit-transp);
}
.c-toast-score-vraag{
  flex:1 1 100%;
  min-width:0;
  font-size:var(--t-pil);
  color:var(--wit);
  opacity:.95;
  line-height:var(--lh-lijst);
}
.c-toast-sterren{ display:flex; gap:2px; flex:1 1 auto; }
.c-toast-ster{
  font-size:19px;
  line-height:1;
  color:var(--wit-transp);
  background:none;
  border:0;
  padding:2px;
  cursor:pointer;
  transition:color .12s ease, transform .12s ease;
}
.c-toast-ster.is-vol{ color:#E8C36A; }
.c-toast-ster:hover{ transform:translateY(-1px); }
.c-toast-score-in{
  flex:1 1 130px;
  min-width:110px;
  font-family:var(--font-ui);
  font-size:var(--t-pil);
  color:var(--wit);
  background:var(--wit-transp);
  border:0;
  border-radius:var(--r-s);
  padding:6px var(--sp-4);
}
.c-toast-score-in::placeholder{ color:var(--wit); opacity:.55; }
.c-toast-score-send{
  flex:none;
  font-size:var(--t-body-plus);
  line-height:1;
  color:var(--petrol-deep);
  background:var(--wit);
  border:0;
  border-radius:var(--r-s);
  padding:5px var(--sp-5);
  cursor:pointer;
}
@media (prefers-reduced-motion:reduce){ .c-toast-ster{ transition:none; } }


/* ═══════════════════════════════════════════════════════════════════
   DE OPSLAG-FLYOUT-VOET (7c)
   ═══════════════════════════════════════════════════════════════════ */

/* De voet van de opslag-flyout draagt sinds ronde 8/10 nog maar twee dingen:
   de privacyregel en de feedback-ingang. De basis-.c-venster-voet is een
   horizontale rij (gedeeld met andere vensters); hier stapelen we ze netjes
   onder elkaar, zodat de tekst niet in een smalle kolom geperst wordt. */
.c-venster.is-flyout .c-venster-voet{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--sp-5);
}
.c-venster.is-flyout .c-venster-voet .c-venster-hulp{
  line-height:var(--lh-lijst);
}


/* ═══════════════════════════════════════════════════════════════════
   HET AFRONDSCHERM — de oogst (afrond-briefing)
   ═══════════════════════════════════════════════════════════════════
   Drie voorgevulde secties boven het bestaande eren/vieren-blok, en de
   afsluit-actie eronder. Ze leunen op de kaart- en rijpatronen die er al
   zijn; hier alleen wat deze secties eigen is. */

.afrond-oogst{
  margin-bottom:var(--sp-8);
}
.afrond-oogst-kop{
  font-family:var(--font-kop);
  font-weight:var(--gew-vet);
  font-size:var(--t-kop-s);
  color:var(--petrol-deep);
  margin:0 0 var(--sp-4);
}

/* eindbalans: per criterium een rij met de beweging en de stand */
.afrond-balans-rij{
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
  flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);
  background:var(--wit);
  border:1px solid var(--line);
  border-left:4px solid var(--line-sterk);
  border-radius:0 var(--r-m) var(--r-m) 0;
}
.afrond-balans-rij + .afrond-balans-rij{ margin-top:var(--sp-3); }
.afrond-balans-rij[data-stand="behaald"]{ border-left-color:var(--groen); }
.afrond-balans-rij[data-stand="onder"]{ border-left-color:var(--rood); }
.afrond-balans-naam{
  font-size:var(--t-klein);
  font-weight:var(--gew-vet);
  color:var(--ink);
}
.afrond-balans-beweging{
  font-size:var(--t-meta);
  color:var(--ink-soft);
}
.afrond-balans-stand{
  margin-left:auto;
  font-size:var(--t-pil);
  color:var(--ink-soft);
  background:var(--cream2);
  border-radius:var(--r-pil);
  padding:2px var(--sp-5);
  white-space:nowrap;
}

/* kerngedrag-borging: per rij naam, wie, stand */
.afrond-borg-rij{
  display:flex;
  align-items:baseline;
  gap:var(--sp-5);
  flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5);
}
.afrond-borg-rij + .afrond-borg-rij{ border-top:1px solid var(--line); }
.afrond-borg-naam{ font-size:var(--t-klein); font-weight:var(--gew-vet); color:var(--ink); }
.afrond-borg-wie{ font-size:var(--t-meta); color:var(--ink-soft); }
.afrond-borg-stand{ margin-left:auto; font-size:var(--t-pil); color:var(--ink-soft); white-space:nowrap; }

/* geleerde lessen: aanvulbare regels */
.afrond-lessen{ display:flex; flex-direction:column; gap:var(--sp-3); }
.afrond-lessen-leeg{ font-size:var(--t-meta); color:var(--ink-soft); font-style:italic; margin:0; }
.afrond-les{ display:flex; gap:var(--sp-3); align-items:flex-start; }
.afrond-les-tekst{
  flex:1;
  font-family:var(--font-ui);
  font-size:var(--t-klein);
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  padding:var(--sp-3) var(--sp-5);
  resize:none;
  overflow:hidden;
  line-height:var(--lh-body);
}
.afrond-les-weg{
  flex:none;
  font-size:var(--t-body-plus);
  line-height:1;
  color:var(--ink-soft);
  background:none;
  border:0;
  cursor:pointer;
  padding:var(--sp-3);
}
.afrond-les-weg:hover{ color:var(--rood); }
.afrond-les-toevoegen{
  align-self:flex-start;
  margin-top:var(--sp-3);
  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;
  cursor:pointer;
}
.afrond-les-toevoegen:hover{ text-decoration:underline; }

/* de afsluit-actie */
.afrond-actie{
  display:flex;
  align-items:center;
  gap:var(--sp-6);
  flex-wrap:wrap;
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px dashed var(--line);
}
.afrond-actie-noot{
  font-size:var(--t-meta);
  color:var(--ink-soft);
  line-height:var(--lh-body);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBIEL: de feedback-flyout wordt een bottom-sheet (10a mobiel)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width:699px){
  .c-feedback{
    left:0;
    right:0;
    bottom:0;
    width:auto;
    max-width:none;
    /* --r-sheet is zelf al de volledige shorthand (18px 18px 0 0). Hem hier
       nog eens in een vierwaardige vorm zetten gaf tien waarden, en dat is
       ongeldig: border-radius viel terug op nul. De feedback-sheet had daardoor
       vierkante bovenhoeken terwijl elke andere sheet in de app rond is. */
    border-radius:var(--r-sheet);
    border-left:0;
    border-right:0;
    border-bottom:0;
  }
  /* De toasts blijven boven de tabbalk zweven. */
  .c-toasts{ bottom:calc(var(--sp-16) + var(--sp-8)); }
}

/* Feedback echt onderaan het zijmenu vastpinnen (10a): margin-top:auto duwt de
   ingang naar de bodem van de flex-kolom .c-zijmenu. De mobiele sheet-variant
   (.c-feedback-ingang-sheet, geen direct kind van .c-zijmenu) blijft ongemoeid. */
.c-zijmenu > .c-feedback-ingang{ margin-top:auto; }