/* ceeme-agentcanvas.css — het node-canvas van de agent pipeline, als component.
   ------------------------------------------------------------------------------------------------
   Uit componenten/agent-canvas.html gelicht. Uit componenten/LEESMIJ.md:

     "De <style> eruit, elke selector voorzien van een eigen voorvoegsel (.cmp-ac), en in een eigen
      bestand in public/. Zonder voorvoegsel botsen deze regels met ceeme.css — allebei gebruiken
      ze generieke namen als .wrap, .romp, .bal."

   Alles hieronder staat daarom binnen .cmp-ac. Het component had ook een eigen body-regel, een
   eigen h1 en een eigen taalkiezer; die zijn weg. De pagina eromheen weet al in welke taal ze
   staat, en twee taalkiezers op één scherm is een fout die je pas ziet als een klant hem meldt.

   Kleuren: ink, cream en amber — plus GROEN voor "draait nu" sinds J71. Dat groen is geen
   merkkleur maar een signaal, en het is de universele conventie voor een node-editor: Visiblie,
   n8n, Zapier en GitHub Actions doen het alle vier zo.

   ── EN DIT SCHERM IS DONKER, MET REDEN ───────────────────────────────────────────────────────
   Op 10 augustus heb ik het licht gemaakt met het argument "ons dashboard is licht, dus de mock-up
   van ons dashboard moet licht". Dat was een denkfout: dit is geen dashboard maar een AGENT
   BUILDER — een node-editor — en die zijn universeel donker. Njusja: *"moet donker dit!!!! dat was
   bij ons ook zo"*, en over Visiblie: *"dat is universele standaard!!!!! dat mag zelfs bijna
   identiek zijn want is universeel"*. Een universele vorm nadoen is herkenbaarheid; het verschil
   maken we in de INHOUD, niet in de tint.

   ── EN DE PIJPLIJN LOOPT VERTICAAL, MET HORIZONTALE VERTAKKINGEN ─────────────────────────────
   Ook dat heb ik gedraaid zonder dat het gevraagd was. Njusja: *"nooit gezegd allemaal opzij!!!!!!
   dat is afhankelijk van hun taak"*. Kijk naar Visiblie: de hoofdstroom loopt naar BENEDEN, en
   alleen waar de taak vertakt gaat het OPZIJ — de NO-tak naar de monitor, en de LOOP eromheen.
   Precies wat DRADEN in het js-bestand al deed. Teruggezet.

   En de belangrijkste regel, uit dezelfde LEESMIJ: het tekstraster met de agenten BLIJFT naast dit
   canvas staan. Het canvas is voor mensen, het raster voor crawlers. Een animatie die niemand kan
   lezen is voor GEO hetzelfde als een foto. */

/* ══ VOLLE BREEDTE — het is een SCHERM, geen plaatje in een tekstkolom ═════════════════════════
   Njusja, 10 augustus: *"waarom maak je dit vierkant?????? dat moet de ruimte van een scherm
   zogezegd innemen en jij zet een mini ding in het vierkant! ik vroeg je zoals visiblie!!!!!!"*

   Ze heeft gelijk en de oorzaak is één regel elders: `.hw` in ceeme-hoe.css is 880 px breed, want
   dat is een LEESKOLOM — de juiste breedte voor een alinea. Het canvas staat binnen die kolom en
   erfde dus 880 px. Bij Visiblie vult de agent builder het hele venster: zijbalk, doek en
   inspector naast elkaar, van rand tot rand. Een app-scherm dat in een tekstkolom past, ziet er
   niet uit als een app-scherm maar als een screenshot.

   De truc hieronder (`margin-left: calc(50% - 50vw)`) haalt het element uit de kolom en zet het op
   de volle vensterbreedte, zonder de kolom eromheen te breken en zonder een wrapper in de HTML —
   die HTML komt uit een generator die door zes families gedeeld wordt.

   `100vw` bevat op Windows de breedte van de schuifbalk, wat een horizontale schuifbalk kan geven.
   Daarom `100dvw` met `100vw` als terugval voor browsers die het niet kennen. */
.cmp-ac {
  /* LET OP DE VOLGORDE: de shorthand `margin` hieronder zet margin-left terug op 0. Hij staat
     daarom vóór de uitbraak en niet erna. Dit koste een render om te zien. */
  margin: 22px 0 6px;
  width: 100vw; width: 100dvw;
  margin-left: calc(50% - 50vw); margin-left: calc(50% - 50dvw);
  --ac-ink: #16150F; --ac-ink2: #3a382f; --ac-dim: #7a7869; --ac-cream: #F6F2E9;
  --ac-line: #e7e1d3; --ac-accent: #C6892B;
  --ac-pane: #1b1a13; --ac-pane2: #211f17; --ac-rand: rgba(246,242,233,.14);
  --ac-mono: "Space Mono", ui-monospace, monospace;
  --ac-sans: "Manrope", system-ui, sans-serif;
  font-family: var(--ac-sans); line-height: 1.55;
}
.cmp-ac *, .cmp-ac *::before, .cmp-ac *::after { box-sizing: border-box }

/* ── de bak ───────────────────────────────────────────────────────────────────────────────── */
/* Van rand tot rand: geen ronde hoeken, wel een lijn boven en onder zodat het als een apart
   scherm leest in plaats van als een gat in de pagina. */
.cmp-ac .ac-bouwer { background: var(--ac-ink); overflow: hidden; color: var(--ac-cream);
  border-top: 1px solid var(--ac-rand); border-bottom: 1px solid var(--ac-rand) }
.cmp-ac .ac-bal { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--ac-rand) }
.cmp-ac .ac-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--ac-accent);
  animation: ac-pols 1.4s infinite }
@keyframes ac-pols { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .cmp-ac * { animation: none !important; transition: none !important } }
.cmp-ac .ac-nm { font-family: var(--ac-mono); font-size: 13px }
.cmp-ac .ac-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center }
.cmp-ac .ac-knop { font-family: var(--ac-sans); font-weight: 600; font-size: 12.5px;
  border: 1px solid rgba(246,242,233,.28); background: transparent; color: var(--ac-cream);
  border-radius: 999px; padding: 6px 14px; cursor: pointer }
.cmp-ac .ac-knop.aan { background: var(--ac-accent); border-color: var(--ac-accent); color: #1b1409 }

/* De drie kolommen van een agent builder, in de verhouding die Visiblie ook gebruikt: een smalle
   navigatie, een zo breed mogelijk doek, en een inspector die breed genoeg is voor een reden van
   twee regels. Op de volle vensterbreedte krijgt het doek zo ruim 900 px in plaats van 380. */
.cmp-ac .ac-romp { display: grid; grid-template-columns: 240px minmax(0,1fr) 380px }
@media (max-width: 1180px) { .cmp-ac .ac-romp { grid-template-columns: 200px minmax(0,1fr) 320px } }
@media (max-width: 900px)  { .cmp-ac .ac-romp { grid-template-columns: 1fr } .cmp-ac .ac-zij { display: none } }

/* ── zijbalk ──────────────────────────────────────────────────────────────────────────────── */
.cmp-ac .ac-zij { border-right: 1px solid var(--ac-rand); padding: 18px 0 }
.cmp-ac .ac-zij .kop { font-family: var(--ac-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(246,242,233,.4); padding: 0 18px 9px }
.cmp-ac .ac-zij .kop + .kop { padding-top: 16px }
.cmp-ac .ac-zij span.rij { display: flex; align-items: center; gap: 10px; padding: 8px 18px;
  font-size: 13.5px; color: rgba(246,242,233,.7) }
.cmp-ac .ac-zij .tel { margin-left: auto; font-family: var(--ac-mono); font-size: 10.5px;
  color: rgba(246,242,233,.42) }
.cmp-ac .ac-zij span.rij.aan { background: rgba(198,137,43,.14); color: var(--ac-accent);
  box-shadow: inset 2px 0 0 var(--ac-accent) }
.cmp-ac .ac-zij i { width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 4px;
  opacity: .55; flex: none }

/* ── canvas ───────────────────────────────────────────────────────────────────────────────── */
.cmp-ac .ac-doek { position: relative; overflow: hidden; height: 76vh; min-height: 560px; max-height: 860px; background:
  radial-gradient(circle at 1px 1px, rgba(246,242,233,.09) 1px, transparent 0) 0 0/26px 26px, var(--ac-ink) }
.cmp-ac .ac-pan { position: absolute; left: 0; top: 0; transition: transform .75s cubic-bezier(.4,0,.2,1) }
.cmp-ac svg.ac-draden { position: absolute; left: 0; top: 0; overflow: visible }
.cmp-ac .ac-node { position: absolute; width: 288px; background: var(--ac-pane);
  border: 1px solid var(--ac-rand); border-radius: 13px; padding: 13px 15px; display: flex;
  align-items: center; gap: 12px; transition: border-color .3s, background .3s, box-shadow .3s }
.cmp-ac .ac-node.klaar { border-color: rgba(198,137,43,.42) }
.cmp-ac .ac-node.bezig { border-color: var(--ac-accent); background: var(--ac-pane2);
  box-shadow: 0 0 0 4px rgba(198,137,43,.14) }
.cmp-ac .ac-node .ico { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--ac-rand);
  display: grid; place-items: center; font-size: 14px; color: rgba(246,242,233,.55); flex: none }
.cmp-ac .ac-node.klaar .ico { background: rgba(198,137,43,.8); border-color: transparent; color: #1b1409 }
.cmp-ac .ac-node.bezig .ico { background: var(--ac-accent); border-color: transparent; color: #1b1409 }
.cmp-ac .ac-node .tx { min-width: 0 }
.cmp-ac .ac-node .tt { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cmp-ac .ac-node .sb { display: block; font-family: var(--ac-mono); font-size: 10.5px;
  color: rgba(246,242,233,.5); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cmp-ac .ac-node .led { margin-left: auto; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(246,242,233,.2); flex: none }
.cmp-ac .ac-node.klaar .led { background: rgba(198,137,43,.75) }
.cmp-ac .ac-node.bezig .led { background: var(--ac-accent); animation: ac-pols 1.1s infinite }
.cmp-ac .ac-node.poort { border-style: dashed }

/* Een agent waarvan de backend nog niet bestaat. Hij staat in het canvas omdat het verhaal van de
   approval gate en de LOOP anders uit elkaar valt, maar hij wordt nooit "klaar" en draagt zichtbaar
   het label. Welke dat zijn, komt uit lib/agentstand.js — niet uit een lijstje hier. */
.cmp-ac .ac-node.gepland { opacity: .55; border-style: dashed }
.cmp-ac .ac-node.gepland .ico { background: transparent; color: rgba(246,242,233,.4) }
.cmp-ac .plan { font-family: var(--ac-mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(246,242,233,.5); border: 1px solid rgba(246,242,233,.28);
  border-radius: 4px; padding: 1px 5px; margin-left: 8px; vertical-align: 1px }

/* ── inspector ────────────────────────────────────────────────────────────────────────────── */
.cmp-ac .ac-insp { border-left: 1px solid var(--ac-rand); display: flex; flex-direction: column; min-width: 0 }
.cmp-ac .ac-insp .top { padding: 16px 18px; border-bottom: 1px solid var(--ac-rand); display: flex;
  gap: 11px; align-items: center }
.cmp-ac .ac-insp .top .ico { width: 30px; height: 30px; border-radius: 8px;
  background: rgba(198,137,43,.16); border: 1px solid rgba(198,137,43,.4); display: grid;
  place-items: center; color: var(--ac-accent); font-size: 14px; flex: none }
.cmp-ac .ac-insp .top .tt { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em }
.cmp-ac .ac-insp .top .sb { display: block; font-family: var(--ac-mono); font-size: 10.5px;
  color: rgba(246,242,233,.5) }
.cmp-ac .ac-insp .staat { display: flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-bottom: 1px solid var(--ac-rand); font-family: var(--ac-mono); font-size: 10.5px;
  color: rgba(246,242,233,.55); flex-wrap: wrap }
.cmp-ac .ac-insp .staat .led { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-accent);
  animation: ac-pols 1.1s infinite }
.cmp-ac .ac-insp .tabs { display: flex; border-bottom: 1px solid var(--ac-rand); padding: 0 8px }
.cmp-ac .ac-insp .tabs button { font-family: var(--ac-mono); font-size: 11.5px; background: transparent;
  border: 0; border-bottom: 2px solid transparent; color: rgba(246,242,233,.5); padding: 11px 13px;
  cursor: pointer }
.cmp-ac .ac-insp .tabs button.aan { color: var(--ac-cream); border-bottom-color: var(--ac-accent) }
.cmp-ac .ac-insp .vak { padding: 15px 18px; overflow: hidden; flex: 1; min-height: 0 }
.cmp-ac .ac-veld { margin-bottom: 13px }
.cmp-ac .ac-veld .l { font-family: var(--ac-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(246,242,233,.42); margin-bottom: 5px }
.cmp-ac .ac-veld .v { border: 1px solid var(--ac-rand); border-radius: 9px; padding: 9px 12px;
  font-size: 13px; color: rgba(246,242,233,.85); display: flex; align-items: center; gap: 8px }
.cmp-ac .ac-veld .v .car { margin-left: auto; color: rgba(246,242,233,.35); font-size: 11px }
.cmp-ac .ac-tuim { width: 34px; height: 19px; border-radius: 999px; background: rgba(246,242,233,.18);
  position: relative; margin-left: auto; flex: none }
.cmp-ac .ac-tuim.aan { background: var(--ac-accent) }
.cmp-ac .ac-tuim::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 14px;
  height: 14px; border-radius: 50%; background: var(--ac-cream); transition: left .2s }
.cmp-ac .ac-tuim.aan::after { left: 17px }
.cmp-ac .ac-pillen { display: flex; flex-wrap: wrap; gap: 6px }
.cmp-ac .ac-pil { font-family: var(--ac-mono); font-size: 11px; border: 1px solid var(--ac-rand);
  border-radius: 7px; padding: 5px 9px; color: rgba(246,242,233,.8) }
.cmp-ac .ac-log { font-family: var(--ac-mono); font-size: 11.5px; line-height: 1.5; display: flex;
  flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; overflow: hidden }
.cmp-ac .ac-log .ln { color: rgba(246,242,233,.8); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; animation: ac-in .3s ease-out }
@keyframes ac-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }
.cmp-ac .ac-log .who { color: var(--ac-accent) }
.cmp-ac .ac-log .ok { color: rgba(198,137,43,.8) }
.cmp-ac .ac-log .p { color: var(--ac-accent) }
.cmp-ac .ac-io { font-family: var(--ac-mono); font-size: 11.5px; color: rgba(246,242,233,.8);
  white-space: pre-wrap; line-height: 1.6 }
.cmp-ac .ac-io .k { color: rgba(246,242,233,.55) }


/* ══ TOEVOEGINGEN 10 AUGUSTUS 2026 — J69 · J71 · J72 ════════════════════════════════════════════
   Alles hieronder staat op de DONKERE bak en in het ENGELS. Dit is de chrome van een node-editor:
   universeel Engels in elke weergavetaal, net als "Config", "Logs" en "APPROVAL GATE" hierboven. */

/* De middenkolom: doek met daaronder de altijd zichtbare logstrook. */
.cmp-ac .ac-mid { display: flex; flex-direction: column; min-width: 0 }

/* ── het statuslampje MET het woord ────────────────────────────────────────────────────────────
   Visiblie toont een groen stipje en verder niets. Wij zetten het woord ernaast, want kleur mag
   nooit de enige drager zijn (J71) — een kleurenblinde bezoeker leest "running" en "queued". */
.cmp-ac .ac-st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--ac-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(246,242,233,.35) }
.cmp-ac .ac-st .led { margin-left: 0 }
.cmp-ac .ac-st.bezig { color: #8FB35F }
.cmp-ac .ac-st.bezig .led { background: #5B7B39; animation: ac-pols 1.1s infinite }
.cmp-ac .ac-st.klaar { color: rgba(198,137,43,.85) }
.cmp-ac .ac-st.klaar .led { background: rgba(198,137,43,.75) }
.cmp-ac .ac-st.plan .w { display: none }   /* de node draagt het label "planned" al */
@media (prefers-reduced-motion: reduce) {
  .cmp-ac .ac-st.bezig .led { box-shadow: 0 0 0 3px rgba(91,123,57,.3) }
}

/* ── de logstrook: agent-output.log, altijd in beeld ──────────────────────────────────────── */
.cmp-ac .ac-strook { border-top: 1px solid var(--ac-rand); padding: 10px 18px;
  font-family: var(--ac-mono); font-size: 11px; color: rgba(246,242,233,.8);
  display: flex; align-items: center; gap: 10px; min-height: 38px; overflow: hidden;
  background: rgba(0,0,0,.18) }
.cmp-ac .ac-strook .pijl { color: var(--ac-accent); flex: none }
.cmp-ac .ac-strook .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: ac-in .3s ease-out }
.cmp-ac .ac-strook .who { color: var(--ac-accent) }
.cmp-ac .ac-strook .ok { color: #8FB35F }
.cmp-ac .ac-strook .plan { border: 0; padding: 0 }

/* ── APPROVAL GATE: het oordeel per handeling, met de reden ────────────────────────────────────
   Drie standen: auto · required · conditional. Waarom precies die drie woorden staat in de
   toelichting bij oordeelVak() in het js-bestand, mét de bronnen. */
.cmp-ac .ac-oordeel { border: 1px solid var(--ac-rand); border-radius: 9px; padding: 9px 11px }
.cmp-ac .ac-oordeel .merk { display: inline-block; font-family: var(--ac-mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; padding: 2px 7px;
  font-weight: 700 }
.cmp-ac .ac-oordeel .reden { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.45;
  color: rgba(246,242,233,.62) }
.cmp-ac .ac-oordeel.auto        { border-color: rgba(91,123,57,.45) }
.cmp-ac .ac-oordeel.auto .merk  { background: #5B7B39; color: #fff }
.cmp-ac .ac-oordeel.required        { border-color: rgba(198,137,43,.5) }
.cmp-ac .ac-oordeel.required .merk  { background: var(--ac-accent); color: #1b1409 }
.cmp-ac .ac-oordeel.conditional .merk { background: rgba(246,242,233,.85); color: #16150F }
/* ══ .cmp-yml — de agent-config.yml die zichzelf schrijft (J72, animatie 2) ═══════════════════
   Dit blok is DONKER, en dat is geen terugval naar de oude canvas-kleur. Een terminal en een
   codeblok zijn de twee plekken waar donker de conventie is en niet de uitzondering — elke editor,
   elke README, elke docs-pagina toont code op donker. Het canvas hierboven is een DASHBOARD en
   hoort licht; dit is een BESTAND en hoort donker. Het onderscheid is precies het punt: de mock-up
   toont ons product, dit toont onze code. */
/* VOLLE BREEDTE, om dezelfde reden als het canvas — en omdat het anders niet PAST. Njusja zag op
   10 augustus twee regels buiten beeld lopen: die van scribe en herald, de enige twee met
   `conditional` en dus met twee redenen achter elkaar. Het blok stond nog in de leeskolom van
   880 px terwijl het canvas er al uit gebroken was; `overflow-x: auto` verstopte het probleem in
   plaats van het op te lossen, want niemand scrollt zijwaarts in een codeblok dat vanzelf typt. */
.cmp-yml { margin: 20px 0 6px; font-family: var(--ac-mono, "Space Mono", ui-monospace, monospace);
  width: 100vw; width: 100dvw;
  margin-left: calc(50% - 50vw); margin-left: calc(50% - 50dvw) }
.cmp-yml .yml-bak { background: #17170F; overflow: hidden;
  border-top: 1px solid rgba(246,242,233,.14); border-bottom: 1px solid rgba(246,242,233,.14) }
.cmp-yml .yml-bal { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid rgba(246,242,233,.12); flex-wrap: wrap }
.cmp-yml .yml-nm { color: #F6F2E9; font-size: 12.5px; font-weight: 700 }
.cmp-yml .yml-uit { color: rgba(246,242,233,.45); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase }
/* VASTE HOOGTE, en dat is geen smaakkwestie. Gemeten op 10 augustus tijdens het filmen: het blok
   groeide van 346 naar 654 px terwijl het zichzelf schreef, dus de hele pagina eronder schoof mee
   naar beneden — vier keer, in twaalf seconden. Dat is layout shift (CLS), precies wat wij bij
   klanten aanwijzen in de technische SEO. Een animatie die de pagina onder de lezer wegtrekt,
   weerlegt de pagina waarop ze staat.

   De hoogte is berekend en niet gegokt: 27 regels (1 commentaar + `agents:` + 23 agents +
   `default:` + 1) à 1.85 × 11.5 px ≈ 575 px, plus de padding. */
.cmp-yml .yml-tekst { margin: 0; padding: 16px 18px 18px; font-size: 11.5px; line-height: 1.85;
  color: rgba(246,242,233,.9); overflow-x: auto; overflow-y: hidden;
  height: 615px; white-space: pre }
.cmp-yml .ln { display: inline; animation: yml-in .22s ease-out }
@keyframes yml-in { from { opacity: 0 } to { opacity: 1 } }
.cmp-yml .c  { color: rgba(246,242,233,.42) }          /* commentaar en reden */
.cmp-yml .k  { color: #C6892B; font-weight: 700 }      /* sleutel op het hoogste niveau */
.cmp-yml .id { color: #F6F2E9; font-weight: 700 }      /* de agent */
.cmp-yml .v  { color: rgba(246,242,233,.6) }           /* veldnaam */
/* De drie oordelen krijgen de statuskleuren van J71. Groen = draait vanzelf, amber = jij tekent.
   Kleur is ook hier niet de enige drager: het WOORD auto/human/mixed staat er zelf. */
.cmp-yml .b-auto  { color: #8FB35F; font-weight: 700 }
.cmp-yml .b-required { color: #E0A94A; font-weight: 700 }
.cmp-yml .b-conditional { color: #F6F2E9; font-weight: 700 }
@media (prefers-reduced-motion: reduce) { .cmp-yml .ln { animation: none } }