/*
 * Drie kleuren: donkerblauw, babyblauw en wit - wit is de huisstijl.
 * Alle tinten zijn doorzichtigheid van die drie. De enige uitzondering is rood,
 * en alleen op knoppen die iets weghalen; waarschuwingen vallen op door
 * contrast en randen.
 */

:root {
  /* Alles is afgeleid van een handvol drietallen, zodat een thema er maar een
     paar hoeft te zetten. Een drietal en geen hex: dan kan elke plek er zelf
     een doorzichtigheid bij kiezen met rgb(var(--x) / .4). */
  --vel-rgb: 255 255 255;      /* de achtergrond: wit, de huisstijl */
  --vlak-rgb: 255 255 255;     /* tegels en panelen: wit, met rand en schaduw */
  --inkt-rgb: 22 41 74;        /* tekst, lijnen, randen */
  --baby-rgb: 168 203 235;     /* de zachte accentkleur */
  /* Schaduwen apart: die blijven donker, ook als de inkt licht wordt. Anders
     geeft een donker thema lichtgevende schaduwen. */
  --schaduw-rgb: 22 41 74;

  --beige: rgb(var(--vel-rgb));
  --inkt: rgb(var(--inkt-rgb));
  --baby: rgb(var(--baby-rgb));

  --inkt-80: rgb(var(--inkt-rgb) / .8);
  --inkt-60: rgb(var(--inkt-rgb) / .6);
  --inkt-42: rgb(var(--inkt-rgb) / .42);
  --lijn: rgb(var(--inkt-rgb) / .12);
  --lijn-sterk: rgb(var(--inkt-rgb) / .22);
  --tint: rgb(var(--inkt-rgb) / .05);
  --tint-sterk: rgb(var(--inkt-rgb) / .095);

  /* Babyblauw met doorzichtigheid over dit warme beige wordt mintgroen: het
     beige heeft te weinig blauw. Daarom wordt babyblauw vol gebruikt, en zijn
     de rustige wassingen inkt met lage dekking - neutraal en warm. */
  --baby-zacht: rgb(var(--baby-rgb) / .5);

  /* Mona Sans, net als de website: één lettertype voor de hele tool, ook voor
     labels die vroeger mono waren (--mono volgt --sans, zoals op de site).
     Alleen echte code (codeblokken, tool-JSON) houdt een vaste breedte via
     --code, zodat inspringen klopt. Geen tabular-nums: Mona Sans heeft dan
     een doorgestreepte nul. */
  --sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: var(--sans);
  --code: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --kolom: 680px;
  --rand: 22px;

  /* Wat een agent maakt (antwoorden en blokken) staat in de stijl van de
     website: de tokens van public/styles.css, gespiegeld in
     packages/core/src/uitvoer/huisstijl.js. Mona Sans laadt uit
     vendor/lettertypen.css. Donkere thema's krijgen hieronder hun eigen
     variant, afgeleid van de drietallen. */
  --u-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --u-ink: #0c1330;
  --u-ink-2: #4b536e;
  --u-ink-3: #6b7189;
  --u-tag: #75757f;
  --u-line: rgba(12, 19, 48, .09);
  --u-line-2: rgba(12, 19, 48, .16);
  --u-line-zacht: rgba(12, 19, 48, .04);
  --u-panel: #f4f5f7;
  --u-surface: #ffffff;
  --u-signaal: #1f4fd6;
  --u-kern: #0d2580;
  --u-wassing: rgba(12, 19, 48, .04);
  --u-schaduw: 0 1px 2px rgba(12, 19, 48, .05), 0 14px 34px -16px rgba(12, 19, 48, .18);
}

:root[data-donker="ja"] {
  --u-ink: rgb(var(--inkt-rgb));
  --u-ink-2: rgb(var(--inkt-rgb) / .76);
  --u-ink-3: rgb(var(--inkt-rgb) / .62);
  --u-tag: rgb(var(--inkt-rgb) / .58);
  --u-line: rgb(var(--inkt-rgb) / .1);
  --u-line-2: rgb(var(--inkt-rgb) / .2);
  --u-line-zacht: rgb(var(--inkt-rgb) / .06);
  --u-panel: rgb(var(--inkt-rgb) / .06);
  --u-surface: rgb(var(--vlak-rgb));
  --u-signaal: #8fb0ff;
  --u-kern: rgb(var(--inkt-rgb));
  --u-wassing: rgb(var(--inkt-rgb) / .06);
  --u-schaduw: 0 1px 2px rgb(0 0 0 / .25), 0 14px 34px -16px rgb(0 0 0 / .55);
}

/*
 * De ontwerptaal van de blokken en panelen: een klein, vast vocabulaire.
 * Alles wat een blok op de kaart of een paneel tekent, pakt hieruit - geen
 * losse waarden meer per bestand. Afgeleid van de --u-*-tokens hierboven,
 * dus Night, Midnight en een eigen thema kleuren vanzelf mee.
 *
 *   vlakken    twee niveaus: --vlak-1 (een kaart, wit met een haarlijn) en
 *              --vlak-2 (een rustige wassing binnen een kaart). Nooit een
 *              kaart met schaduw in een kaart met schaduw.
 *   rand       één haarlijn (--haarlijn); --haarlijn-sterk alleen voor velden.
 *   schaduw    alleen voor wat zweeft (vellen, menu's, dialogen): --zweef.
 *              Een tegel op de kaart is een voorwerp: --voorwerp, amper.
 *   radius     --r-s 8 (klein spul), --r-m 12 (velden, tegels, regels),
 *              --r-l 16 (kaarten), --r-xl 22 (wat zweeft), --r-rond (knoppen,
 *              pillen, segmenten).
 *   letters    --t-xs 12 · --t-s 13 · --t-m 14.5 · --t-l 17 · --t-xl 24,
 *              --t-getal 48 voor één groot getal. Gewicht 400, 500, 600.
 *   ruimte     4 · 8 · 12 · 16 · 24 · 32 (--g-1 … --g-6).
 *   staat      een stip, geen gevulde badge: --staat-ok (inkt), --staat-wacht
 *              (het accent: wacht op jou), --staat-fout (een inktring plus
 *              gewicht), --staat-rust (een holle ring). Rood alleen op de kaart.
 *   icoon      18 px in panelen, 20 px op een tegel, lijn 1.5.
 */
:root {
  --vlak-1: var(--u-surface);
  --vlak-2: var(--u-panel);
  --haarlijn: var(--u-line);
  --haarlijn-sterk: var(--u-line-2);
  --zweef: 0 0 0 1px var(--u-line), 0 1px 2px rgb(var(--schaduw-rgb) / .05), 0 24px 56px -24px rgb(var(--schaduw-rgb) / .32);
  --voorwerp: 0 1px 2px rgb(var(--schaduw-rgb) / .07);

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 22px;
  --r-rond: 999px;

  --t-xs: 12px;
  --t-s: 13px;
  --t-m: 14.5px;
  --t-l: 17px;
  --t-xl: 24px;
  --t-getal: 48px;

  --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 24px; --g-6: 32px;

  --staat-ok: var(--u-ink);
  --staat-wacht: var(--baby);
  --staat-fout: var(--u-ink);
  --staat-rust: var(--u-tag);

  --icoon: 18px;
  --icoon-tegel: 20px;
}
:root[data-donker="ja"] {
  --zweef: 0 0 0 1px var(--u-line-2), 0 24px 56px -20px rgb(0 0 0 / .6);
  --voorwerp: 0 1px 2px rgb(0 0 0 / .3);
}

* { box-sizing: border-box; }

/* Een eigen `display` in een klasse wint van de browserregel voor [hidden].
   Zonder deze regel blijft het sleepvlak over het scherm liggen en vangt het
   elke klik weg - dus dit moet hier staan, niet per element. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--beige);
  color: var(--inkt);
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

/*
 * Het werkvlak is één laag: karakter, uitvoer, chatbalk. Dat maakt in- en
 * uitzoomen één transform in plaats van vijf die uit de pas lopen.
 */
.werkvlak {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  transform-origin: center center;
  /* Geen blijvende will-change: dit is het hele gesprek, schermvullend. Een
     eigen laag kost geheugen en scherpe tekst, en hij beweegt alleen bij de
     zoom naar de kaart. agents.js zet will-change voor die zoom en haalt hem
     erna weer weg (docs/beweging.md). */
}

/* ---------- het karakter ---------- */

/*
 * Schermvullend en achter alles. `transparent` op het element laat de gloed
 * uitlopen in het beige in plaats van in een eigen vlak - anders zie je een
 * lichte rechthoek op het vel staan.
 *
 * Het moet echt `inset: 0` zijn. De component tekent binnen zijn eigen doos en
 * knipt daarbuiten af; laat je onderaan ruimte voor de chatbalk, dan loopt er
 * een kaarsrechte lijn door de gloed. Over de volle hoogte valt de rand samen
 * met de schermrand, en daar is de gloed al vervaagd tot het beige.
 *
 * Het gezicht zit van zichzelf boven het midden, dus hij kijkt vanzelf over de
 * invoer heen.
 */
gloei-karakter {
  position: fixed;
  inset: 0;
  width: auto; height: auto;
  aspect-ratio: auto;
  z-index: 0;
  pointer-events: none;   /* de ogen volgen via window, dit blokkeert alleen klikken */
  transition: opacity .55s ease;
}

/*
 * Hoe nadrukkelijk hij in beeld staat, geregeld in src/karakter.js:
 *
 *   vol     leeg vel - hij vult het scherm
 *   actief  hij denkt, praat of luistert terwijl er een gesprek loopt
 *   terug   er staat tekst en hij wacht af
 *
 * De sprong tussen actief en terug is groot met opzet: tijdens het antwoorden
 * kijk je naar hem, daarna lees je de tekst. De overgang duurt lang genoeg om
 * als bewegen te lezen in plaats van als knipperen.
 */
/*
 * Het karakter vervaagt niet meer. Dat hoefde alleen zolang de tekst er
 * overheen liep; nu staat de uitvoer in een eigen blok met een eigen
 * oppervlak, dus hij mag gewoon blijven staan.
 */
/* Hij blijft staan. De stand wordt nog wel gezet, want het staartje van het
   uitvoerblok luistert ernaar terwijl hij nadenkt. */
body[data-karakter] gloei-karakter { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  gloei-karakter { transition: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--baby); }

:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 2px;
}

/* ---------- de menuknop ---------- */

.menuknop {
  position: fixed; z-index: 30;
  top: var(--rand); left: var(--rand);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  color: var(--inkt);
  background: transparent;
  border: 0; border-radius: 14px;
  transition: background var(--snel) ease, transform var(--snel) ease;
}
.menuknop svg { width: 26px; height: 26px; }
.menuknop:hover { background: var(--tint); }
.menuknop:active { transform: scale(.95); }
.menuknop[aria-expanded="true"] { background: var(--tint-sterk); }

/* Een stipje als er iets in het menu op je wacht - een waarschuwing over de
   opslag hoort niet als blok op het vel, maar mag ook niet onopgemerkt blijven. */
.menuknop[data-let-op="ja"]::after {
  content: '';
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--baby); border: 1.5px solid var(--inkt); border-radius: 50%;
}

/* ---------- het vel ---------- */

/* ---------- het uitvoerblok ---------- */

/*
 * De antwoorden staan in een eigen blok rechtsboven in plaats van als tekst
 * over het karakter heen. Dat lost het leesprobleem op zonder het karakter te
 * dimmen: het blok is een oppervlak, dus de gloed mag er vol achter blijven.
 *
 * Het laat de gloed er doorheen schemeren, net als de chatbalk en de lade.
 */
.uitvoer {
  position: fixed; z-index: 20;
  /* Onder de knop "All agents" rechtsboven, niet eroverheen: die knop blijft
     op zijn plek en het antwoord begint een rij lager. */
  top: calc(var(--rand) + 56px); right: var(--rand);
  width: min(440px, 40vw);
  /* Tot boven de invoer, met ruimte voor het staartje: --voet-hoogte zet
     app.js, want de invoer groeit mee met wat je typt. */
  max-height: calc(100dvh - var(--rand) - 56px - var(--voet-hoogte, 96px) - 34px);
  display: flex; flex-direction: column;
  /* De staart hangt onder de kaart, dus hier niets afknippen. Het scrollen
     gebeurt in het lijf eronder. */
  overflow: visible;
  animation: blok-op var(--rustig) var(--veer) both;
}

.uitvoer-lijf {
  min-height: 0;
  padding: 18px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--beige);
  border: 1px solid var(--lijn); border-radius: 22px;
  box-shadow: 0 14px 44px rgb(var(--schaduw-rgb) / .12);
  scrollbar-width: thin;
  scrollbar-color: var(--lijn-sterk) transparent;
}
/* Geen backdrop-filter: het karakter erachter beweegt elk beeld, dus de
   vervaging moest elk beeld opnieuw over het hele blok - voor een vlak dat
   voor 96% dicht was. Nu gewoon dicht (docs/beweging.md). */
@keyframes blok-op { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

.uitvoer-lijf::-webkit-scrollbar { width: 10px; }
.uitvoer-lijf::-webkit-scrollbar-thumb { background: var(--lijn); border-radius: 10px; }
.uitvoer-lijf::-webkit-scrollbar-thumb:hover { background: var(--lijn-sterk); }

/*
 * Het staartje: drie belletjes richting het karakter, zoals bij een denkwolk.
 * Ze zijn de voortzetting van de belletjes die het karakter zelf maakt terwijl
 * hij nadenkt. Tijdens dat denken pulseren ze mee.
 */
.uitvoer-staart {
  display: flex; align-items: center; gap: 5px;
  margin: 7px 0 0 14px;
  pointer-events: none;
}
.uitvoer-staart i {
  display: block;
  background: var(--beige);
  border: 1px solid var(--lijn); border-radius: 50%;
}
.uitvoer-staart i:nth-child(1) { width: 13px; height: 13px; }
.uitvoer-staart i:nth-child(2) { width: 9px;  height: 9px;  }
.uitvoer-staart i:nth-child(3) { width: 5px;  height: 5px;  }

body[data-karakter="actief"] .uitvoer-staart i {
  animation: bel 1.25s ease-in-out infinite;
  border-color: var(--lijn-sterk);
}
body[data-karakter="actief"] .uitvoer-staart i:nth-child(2) { animation-delay: .16s; }
body[data-karakter="actief"] .uitvoer-staart i:nth-child(3) { animation-delay: .32s; }
@keyframes bel {
  0%, 100% { transform: translateY(0) scale(1); }
  45%      { transform: translateY(-4px) scale(1.14); }
}

.berichten {
  width: 100%;
  display: flex; flex-direction: column; gap: 22px;
}

/* Smal scherm: geen kolom naast het karakter, dus bovenaan over de volle
   breedte. Het staartje wijst dan recht naar beneden. */
@media (max-width: 760px) {
  .uitvoer {
    top: calc(var(--rand) + 50px); right: var(--rand); left: var(--rand);
    width: auto;
    /* Niet hoger dan ruim de helft: het karakter blijft eronder te zien. */
    max-height: min(52dvh, calc(100dvh - var(--rand) - 50px - var(--voet-hoogte, 96px) - 44px));
  }
  .uitvoer-lijf { padding: 16px; }
  .uitvoer-staart { margin: 7px auto 0; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .uitvoer { animation: none; }
  body[data-karakter="actief"] .uitvoer-staart i { animation: none; }
}

/* ---------- berichten ---------- */

.bericht { display: flex; flex-direction: column; gap: 5px; animation: opkomen var(--rustig) ease both; }
.inhoud { min-width: 0; }
/*
 * Wat je zelf vroeg staat rechts in een zacht vlak, zonder label: zo lees je
 * het gesprek in één oogopslag als vraag en antwoord. Het antwoord houdt de
 * volle breedte, want daar staan de tabellen en de bestanden.
 */
.bericht-gebruiker { align-items: flex-end; }
.bericht-gebruiker .afzender { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bericht-gebruiker .inhoud {
  max-width: 88%;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px;
  padding: 9px 14px;
  background: var(--tint-sterk); border-radius: 18px 18px 6px 18px;
}
.bericht-gebruiker .prose { flex-basis: 100%; white-space: pre-wrap; }
.bericht-gebruiker .bijlage-in-bericht { margin: 0; background: rgb(var(--vlak-rgb)); }
.bericht-gebruiker .bijlage-beeld { margin: 0; }
@keyframes opkomen { from { opacity: 0; transform: translateY(6px); } }

.afzender {
  font-size: 12px; font-weight: 600;
  /* Geen hoofdletters: labels zijn klein en in kleine letters, zoals de rest. */
  text-transform: lowercase;
  color: var(--inkt-42);
}

.prose { overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3, .prose h4, .prose h5 { margin: 22px 0 8px; line-height: 1.28; font-weight: 600; }
.prose h2 { font-size: 19px; }
.prose h3 { font-size: 17px; }
.prose h4, .prose h5 { font-size: 16px; }
.prose p, .prose ul, .prose ol { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose li::marker { color: var(--inkt-42); }
.prose code {
  font: 13.5px var(--mono);
  padding: 1px 5px;
  background: var(--tint-sterk); border-radius: 5px;
}
.prose pre {
  margin: 0 0 13px; padding: 14px;
  overflow-x: auto;
  background: var(--tint); border-radius: 12px;
}
.prose pre code { padding: 0; background: none; }
.prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { padding: 7px 10px; text-align: left; border: 1px solid var(--lijn); vertical-align: top; }
.prose th { background: var(--tint); font-weight: 600; }
/* Een brede tabel schuift in zijn eigen vak, niet het hele antwoord. */
.prose .tabel-scroll { margin: 0 0 13px; overflow-x: auto; scrollbar-width: thin; }
.prose .tabel-scroll table { min-width: max-content; max-width: none; }
.prose td.getal, .prose th.getal { white-space: nowrap; }
.prose blockquote {
  margin: 0 0 13px; padding: 4px 0 4px 16px;
  color: var(--inkt-80); border-left: 2px solid var(--baby);
}
.prose blockquote p { margin: 0 0 6px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { color: var(--inkt); text-underline-offset: 3px; }
.prose hr { margin: 18px 0; border: 0; border-top: 1px solid var(--lijn-sterk); }
.prose del { color: var(--inkt-60); }
.prose li > ul, .prose li > ol { margin: 4px 0 0; }
.prose .taak { color: var(--inkt-60); }
/* Codeblokken met een kopieerknop, die pas verschijnt als je erbij komt. */
.prose .codevak { position: relative; margin: 0 0 13px; }
.prose .codevak pre { margin: 0; }
.code-kopieer {
  position: absolute; top: 7px; right: 7px;
  padding: 3px 9px;
  font-size: 11.5px; color: var(--inkt-60);
  background: var(--beige); border: 1px solid var(--lijn); border-radius: 7px;
  opacity: 0; transition: opacity var(--snel) ease;
}
.codevak:hover .code-kopieer, .code-kopieer:focus-visible { opacity: 1; }
@media (hover: none) { .code-kopieer { opacity: 1; } }

.cursor::after {
  content: '';
  display: inline-block; width: 2px; height: 1.05em;
  margin-left: 3px; vertical-align: text-bottom;
  background: var(--inkt);
  animation: knipper 1.05s steps(2) infinite;
}
@keyframes knipper { 50% { opacity: 0; } }

.tool {
  margin: 4px 0 12px;
  font-size: 13px;
  background: var(--tint);
  border-radius: 11px;
  overflow: hidden;
}
.tool summary {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  color: var(--inkt-60); cursor: pointer; list-style: none;
}
.tool summary::-webkit-details-marker { display: none; }
.tool-naam { font: 12px var(--mono); color: var(--inkt); }
.tool-staat { margin-left: auto; font-size: 11.5px; }
/* Mislukt: geen rood, maar een streep en volle inkt. */
.tool.fout { box-shadow: inset 3px 0 0 var(--inkt); }
.tool.fout .tool-staat { color: var(--inkt); font-weight: 600; }
.tool-lijf { padding: 0 12px 12px; }
.tool-lijf pre {
  margin: 0; padding: 10px; max-height: 300px; overflow: auto;
  font: 12px var(--code);
  background: rgb(var(--vel-rgb) / .75); border-radius: 8px;
}
.tool-samenvatting { padding: 4px 12px 0; color: var(--inkt); }

/* Een agent vraagt om toegang (toestemming.js): een kaart met drie knoppen.
   Wit met een inktstreep, geen kleur: het is een vraag, geen waarschuwing. */
/* Een vraag in het gesprek (toegang, of iets versturen): een kaart met een
 * haarlijn en een duidelijke vraag. Geen streep, geen kleur: de knoppen
 * zeggen dat er iets van je verwacht wordt. */
.toestemming {
  margin: 6px 0 14px; padding: var(--g-4);
  font-size: 14px; line-height: 1.5;
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--haarlijn-sterk); border-radius: var(--r-l);
  box-shadow: none;
}
.toestemming p { margin: 0; }
.tt-kop { color: var(--u-ink); font-size: var(--t-m); line-height: 1.45; }
.tt-kop strong { font-weight: 500; }
.tt-soort {
  display: inline-block; margin-left: 6px; padding: 0;
  font-size: var(--t-xs); color: var(--u-tag); border: 0;
}
.tt-soort::before { content: "·"; margin-right: 6px; }
.tt-waarom, .tt-gevolg { margin-top: 4px !important; color: var(--u-ink-2); overflow-wrap: anywhere; }
.tt-zacht { color: var(--u-tag); }
.tt-knoppen { display: flex; flex-wrap: wrap; gap: var(--g-2); }
.tt-knoppen:not(:empty) { margin-top: var(--g-3); }
.tt-knoppen .dlg-knop { height: 36px; padding: 0 16px; font-size: 13.5px; }
.tt-uitkomst:not(:empty) { margin-top: 8px !important; font-weight: 600; color: var(--inkt); }
/* "Allow once" intrekken: een knopje in de regel, geen vierde grote knop. */
.tt-intrekken {
  font: inherit; font-weight: 500; color: inherit; padding: 0; background: none; border: none;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tt-intrekken:disabled { opacity: .5; cursor: default; }
.tt-fout:not(:empty) { margin-top: 8px !important; font-weight: 600; color: var(--inkt); }
.toestemming[data-status="nee"] { border-color: var(--haarlijn); }
.toestemming[data-status="nee"] .tt-kop { color: var(--u-ink-3); }
/* Een aanroep die op bevestiging wacht (bevestiging.js): dezelfde kaart, met
   de argumenten als tekst in een rustig vak. */
.bv-uitleg { margin-top: 4px !important; font-size: var(--t-s); color: var(--u-ink-3); }
.bv-argumenten {
  margin: var(--g-3) 0 0; padding: 4px 12px; max-height: 220px; overflow: auto;
  background: var(--vlak-2); border-radius: var(--r-m);
}
.bv-regel { display: grid; grid-template-columns: minmax(60px, max-content) 1fr; gap: 12px; padding: 6px 0; font-size: var(--t-s); }
.bv-regel + .bv-regel { border-top: 1px solid var(--haarlijn); }
.bv-regel dt { color: var(--u-tag); }
.bv-regel dd { margin: 0; color: var(--u-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.bevestiging:is([data-status="geweigerd"], [data-status="verlopen"]) { border-color: var(--haarlijn); }

/* Meldingen onderscheiden zich door gewicht en rand, niet door kleur. */
.melding {
  padding: 10px 13px; margin: 6px 0;
  font-size: 14px; line-height: 1.5;
  background: var(--tint); border-radius: 11px;
}
.melding.fout {
  background: var(--baby-zacht);
  box-shadow: inset 3px 0 0 var(--inkt);
  font-weight: 500;
}

.bijlage-in-bericht {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 6px 6px 0; padding: 4px 10px;
  font-size: 13px; color: var(--inkt-80);
  background: var(--tint-sterk); border-radius: 8px;
}
/* Een afbeelding die je meestuurde, in je eigen bericht. */
.bijlage-beeld {
  display: block;
  max-width: min(260px, 100%); max-height: 200px;
  margin: 2px 0 8px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--tint-sterk);
}

/* ---------- de invoerkaart ---------- */

.voet {
  position: relative; z-index: 1;
  /* Het uitvoerblok staat vast gepositioneerd en telt dus niet mee in de
     kolom. Zonder dit zou de voet naar boven schuiven zodra er verder niets
     in de flow zit. */
  margin-top: auto;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px;
  padding: 10px var(--rand) max(var(--rand), env(safe-area-inset-bottom));
}


/* ---------- wat hij hoort ---------- */

.golf {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; height: 44px;
}
.golf i {
  display: block;
  /* De rusthoogte is met opzet fors: bij stilte hoort er een golf te staan,
     geen rij stippen. Schalen gebeurt vanaf deze hoogte. */
  width: 5px; height: 10px;
  background: var(--inkt); border-radius: 3px;
  /* --hoog wordt per staaf gezet vanuit de niveaumeter. */
  transform: scaleY(var(--hoog, 1));
  transform-origin: center;
  transition: transform .08s linear;
}
@media (prefers-reduced-motion: reduce) {
  .golf i { transition: none; }
}

/* ---------- de agentkaart ---------- */

/* Uitzoomknop, rechtsboven tegenover de menuknop. */
.kaartknop {
  position: fixed; z-index: 30;
  top: var(--rand); right: var(--rand);
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--inkt); background: transparent;
  border: 0; border-radius: 14px;
  transition: background var(--snel) ease, transform var(--snel) ease;
}
.kaartknop svg { width: 22px; height: 22px; }
.kaartknop:hover { background: var(--tint); }
.kaartknop:active { transform: scale(.95); }
.kaartknop[aria-expanded="true"] { background: var(--tint-sterk); }
/* Op de kaart blijft hij staan, boven de agents: dezelfde knop brengt je
   terug naar het gesprek, net als Escape. */
.kaartknop[aria-expanded="true"] {
  z-index: 75;
  color: var(--inkt);
  background: rgb(var(--vel-rgb) / .86);
  box-shadow: inset 0 0 0 1px var(--lijn);
}

/* Needs you (src/nodig.js), naast "All agents"; de teller telt wat op jou wacht. */
.nodigknop {
  position: fixed; z-index: 30;
  top: var(--rand); right: calc(var(--rand) + 48px);
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--inkt); background: transparent;
  border: 0; border-radius: 14px;
  transition: background var(--snel) ease, transform var(--snel) ease;
}
.nodigknop svg { width: 22px; height: 22px; }
.nodigknop:hover, .nodigknop[aria-expanded="true"] { background: var(--tint); }
.nodigknop:active { transform: scale(.95); }
.nodigteller {
  position: absolute; top: 3px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 650; line-height: 18px; text-align: center;
  color: rgb(var(--vel-rgb)); background: var(--inkt);
  box-shadow: 0 0 0 2px rgb(var(--vel-rgb));
}
.nodigknop[data-tip]::after { left: auto; right: 0; transform: translate(0, -3px); }
.nodigknop[data-tip]:hover::after, .nodigknop[data-tip]:focus-visible::after { transform: translate(0, 0); }
/* Met de agentkaart open ligt die over de knop heen: dan erboven, op dezelfde
 * plek naast "All agents" en in dezelfde ronde vorm. De knoppen van de kaart
 * (.kaartbalk) schuiven een plek op. Eerder sprong hij naar linksboven, en
 * zocht je hem op de kaart ergens anders dan in het gesprek. */
body:has(#kaartknop[aria-expanded="true"]) .nodigknop {
  z-index: 75;
  color: var(--u-ink); background: var(--u-surface);
  border-radius: 50%;
  box-shadow: var(--s-rand), var(--s-schaduw-sm);
}
body:has(#kaartknop[aria-expanded="true"]) .nodigknop:hover,
body:has(#kaartknop[aria-expanded="true"]) .nodigknop[aria-expanded="true"] { background: var(--u-panel); }
.agentkaart {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: stretch;
  background: var(--beige);
  overflow: hidden;
}

/*
 * De kaart is een vlak met poppetjes, geen lijst met kaartjes. Geen kaders en
 * geen namen: de kleur is de identiteit, en een kader eromheen maakt er een
 * formulier van. De naam staat in aria-label, voor toetsenbord en schermlezer.
 *
 * De ruimte tussen de poppetjes is ruim met opzet. De gloed loopt ver door;
 * staan ze dichter bij elkaar, dan lopen ze in elkaar over en is het één vlek.
 */
.agentvlak {
  /* Flex en geen grid: een halve laatste rij staat dan in het midden. */
  display: flex; flex-wrap: wrap;
  justify-content: center; align-content: center;
  width: 100%; height: 100%;
  transform-origin: center center;
  will-change: transform;
}

.agentkaartje {
  flex: 0 0 calc(100% / var(--kolommen, 4));
  height: calc(100% / var(--rijen, 1));
  max-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
  padding: 0;
  background: none; border: 0;
  cursor: pointer;
  transition: transform var(--rustig) var(--veer);
}
/* Niemand vervaagt. Wie aan de beurt is staat iets groter - dat is genoeg,
   en het houdt alle kleuren even vol. */
.agentkaartje:hover { transform: scale(1.05); }
.agentkaartje:focus-visible { outline: 2px solid var(--inkt); outline-offset: -12px; border-radius: 28px; }
.agentkaartje.actief { transform: scale(1.07); }
.agentkaartje.actief:hover { transform: scale(1.1); }

/*
 * De draaiing staat op de wikkel en niet op het element zelf, zodat de stand
 * van de component (position, inset) uit de app-opmaak niet meedoet.
 */
/*
 * Zo groot als het vak toelaat. Bij vier kolommen en drie rijen is dat ruwweg
 * een kwart van de breedte of een derde van de hoogte - de kleinste van de
 * twee wint, anders lopen ze over elkaar heen.
 */
.agentnaam {
  margin-top: -6%;
  font-size: .82rem; font-weight: 500; color: var(--inkt-60);
  white-space: nowrap; pointer-events: none;
  transition: color var(--snel) ease;
}
.agentkaartje:hover .agentnaam, .agentkaartje.actief .agentnaam { color: var(--inkt); }
.agentvlak.infra-vrij .agentnaam { display: none; }
.agentorb {
  --maat: min(calc(92vw / var(--kolommen, 4)), calc(82vh / var(--rijen, 1)), 420px);
  width: var(--maat); height: var(--maat);
  display: grid; place-items: center;
  pointer-events: none;
}
.agentorb gloei-karakter {
  position: static; inset: auto;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  opacity: 1; z-index: auto;
}

@media (max-width: 760px) {
  /* Drie kolommen; het aantal rijen volgt vanzelf uit het aantal agents. */
  .agentorb { --maat: min(calc(92vw / var(--kolommen, 3)), calc(78vh / var(--rijen, 1))); }
  /* Smal scherm: rijen zo hoog als het poppetje, en het geheel in het midden. */
  .agentvlak { padding: 64px 0 24px; overflow-y: auto; }
  .agentkaartje { height: auto; padding: 10px 0; }
}

/* Geen zoom bij beperkte beweging: een korte kruisfade tussen gesprek en
   kaart (agents.js laat de schaal dan weg). */
@media (prefers-reduced-motion: reduce) {
  .agentvlak { transition: none !important; }
  .werkvlak, .agentkaart { transition: opacity var(--snel) ease !important; }
}

/* ---------- uitvoerblokken ---------- */

/*
 * Alles wat een agent maakt - zijn antwoord en elk blok - heeft de stijl van
 * de website: Mona Sans, inkt #0c1330, een getint vlak per blok met een witte
 * kaart erop (zoals de tegels op de site), labels in grijs met een gekleurd
 * bolletje ervoor, haarlijnen en zachte schaduwen. Elk soort blok heeft een
 * eigen accent uit het palet van de website. De tokens (--u-*) staan in
 * :root, met een donkere variant voor de donkere thema's.
 *
 * Vier soorten, één vorm. Wat je ermee kunt verschilt: een bestand sla je op,
 * een overzicht lees je, een artefact open je of kopieer je.
 */
.blok {
  --c: #3b6fe0; --c-tint: #eef3fd;
  margin-top: 4px;
  padding: 6px;
  font-family: var(--u-sans);
  color: var(--u-ink);
  background: var(--c-tint);
  border-radius: 24px;
  box-shadow: 0 0 0 1px var(--u-line-zacht);
}
.blok-bestanden { --c: #3b6fe0; --c-tint: #eef3fd; }
.blok-overzicht { --c: #1fc48c; --c-tint: #ecfaf3; }
.blok-grafiek   { --c: #8b6cff; --c-tint: #f2effe; }
.blok-artefact  { --c: #ffb42e; --c-tint: #fdf5e6; }
.blok-tekst     { --c: #1bb5e3; --c-tint: #ebf8fd; }
:root[data-donker="ja"] .blok { background: color-mix(in srgb, var(--c) 10%, rgb(var(--vel-rgb))); }

.blok-kop {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 10px 12px;
}
/* Een bolletje in plaats van een pictogram, zoals de labels op de site. */
.blok-merk { display: none; }
.blok-titel {
  flex: 1; min-width: 0;
  font-size: 15.5px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blok-soort {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--u-tag);
}
.blok-soort::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c);
}
.blok-toelichting {
  margin: -4px 0 0; padding: 0 12px 10px;
  font-size: 13px; line-height: 1.45; color: var(--u-ink-2);
}
.blok-lijf {
  padding: 16px;
  background: var(--u-surface);
  border-radius: 18px;
  box-shadow: var(--u-schaduw);
}
.blok-lijf .prose { font-size: 14.5px; }

.blok-acties { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

/* De pil van de website: wit met een haarlijn, of inkt voor de hoofdactie. */
.blokknop {
  min-height: 32px;
  padding: 6px 14px;
  font: 500 13px/1.2 var(--u-sans);
  color: var(--u-ink); background: var(--u-surface);
  border: 0; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--u-line), 0 1px 2px rgba(12, 19, 48, .04);
  transition: box-shadow var(--snel) ease, background var(--snel) ease, color var(--snel) ease;
}
.blokknop:hover { box-shadow: 0 0 0 1px var(--u-line-2), 0 8px 18px -10px rgba(12, 19, 48, .35); }
.blokknop.sterk { color: var(--u-surface); background: var(--u-ink); box-shadow: none; }
.blokknop.sterk:hover { background: var(--u-kern); box-shadow: 0 8px 18px -10px rgba(12, 19, 48, .45); }
:root[data-donker="ja"] .blokknop.sterk:hover { background: var(--u-ink); filter: brightness(1.12); }

/* bestanden: een regel per bestand, met een pictogram in het accent */
.bestand {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.bestand:first-child { padding-top: 0; }
.bestand:last-child { padding-bottom: 0; }
.bestand + .bestand { border-top: 1px solid var(--u-line); }
.bestand-icoon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--c);
  background: var(--c-tint); border-radius: 12px;
}
:root[data-donker="ja"] .bestand-icoon { background: color-mix(in srgb, var(--c) 16%, transparent); }
.bestand-icoon svg { width: 21px; height: 21px; }
.bestand-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bestand-naam {
  font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bestand-meta { font-size: 12.5px; line-height: 1.4; color: var(--u-tag); }
.bestand-meta span { white-space: nowrap; }
.bestand-acties { display: flex; gap: 6px; flex-shrink: 0; }
.blokknop:disabled { cursor: progress; opacity: .7; }
@media (max-width: 420px) {
  .bestand { flex-wrap: wrap; }
  .bestand-acties { width: 100%; padding-left: 52px; }
}

/* kerncijfers bovenaan een overzicht: zoals "in getallen" op de website */
.cijfers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 6px;
}
.cijfer {
  --c: #3b6fe0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 12px 13px;
  background: var(--u-panel); border-radius: 16px;
}
.cijfer:nth-child(6n+2) { --c: #ff5c9a; }
.cijfer:nth-child(6n+3) { --c: #1fc48c; }
.cijfer:nth-child(6n+4) { --c: #ffb42e; }
.cijfer:nth-child(6n+5) { --c: #8b6cff; }
.cijfer:nth-child(6n)   { --c: #1bb5e3; }
.cijfer-label { font-size: 13px; line-height: 1.35; color: var(--u-ink-2); }
.cijfer-label::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; margin-right: 7px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: .06em;
}
.cijfer-waarde { font-size: 22px; font-weight: 500; line-height: 1.05; letter-spacing: -.045em; overflow-wrap: anywhere; }
.cijfer-onder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cijfer-verandering { font-size: 12.5px; font-weight: 500; color: var(--u-ink-2); }
.cijfer-pijl { font-weight: 600; }
/* Gemeten, opgegeven of aanname - dat label hoort bij elk getal. */
.blok .herkomst {
  flex-shrink: 0;
  padding: 1px 8px;
  font-size: 11.5px; line-height: 1.5; color: var(--u-tag);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--u-line-2);
}
.cijfers + .overzicht, .cijfers + .tabelvak { margin-top: 12px; }

/* grafiek: tekent zelf (zie src/grafiek.js); reeksen in de accenten van de
   website, tekst en lijnen uit het thema */
.grafiek {
  --gr-0: #3b6fe0;
  --gr-1: #ff5c9a;
  --gr-2: #1fc48c;
  --gr-3: #ffb42e;
  --gr-4: #8b6cff;
  --gr-5: #1bb5e3;
  position: relative;
  padding: 2px 0 0;
}
.grafiek-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gr-k0 { fill: var(--gr-0); background-color: var(--gr-0); }
.gr-k1 { fill: var(--gr-1); background-color: var(--gr-1); }
.gr-k2 { fill: var(--gr-2); background-color: var(--gr-2); }
.gr-k3 { fill: var(--gr-3); background-color: var(--gr-3); }
.gr-k4 { fill: var(--gr-4); background-color: var(--gr-4); }
.gr-k5 { fill: var(--gr-5); background-color: var(--gr-5); }
.gr-l0 { stroke: var(--gr-0); }
.gr-l1 { stroke: var(--gr-1); }
.gr-l2 { stroke: var(--gr-2); }
.gr-l3 { stroke: var(--gr-3); }
.gr-ring, .gr-naad { stroke: var(--u-surface); }
.gr-tekst { fill: var(--u-ink); }
.gr-zacht { fill: var(--u-ink-3); }
.gr-raster { stroke: var(--u-line); }
.gr-as { stroke: var(--u-line-2); }
.gr-raak rect.gr-actief { fill: var(--u-wassing); }
.gr-taart path { transition: opacity var(--snel) ease; }
.gr-taart path.gr-actief { opacity: .82; }
.grafiek-tip {
  position: absolute; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 96px; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.35;
  background: var(--u-surface); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--u-line), var(--u-schaduw);
}
.grafiek-tip strong { font-weight: 600; }
.grafiek-tip span { display: flex; align-items: center; gap: 6px; color: var(--u-ink-2); white-space: nowrap; }
.gr-staal { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.gr-tip-som { margin-top: 2px; padding-top: 3px; border-top: 1px solid var(--u-line); font-weight: 500; }
.grafiek-data { margin-top: 10px; }
.grafiek-data summary { font-size: 13px; color: var(--u-tag); padding: 4px 0; cursor: pointer; }
.grafiek-data summary:hover { color: var(--u-ink); }
.grafiek-data .tabelvak { margin-top: 4px; }

/* Het onzichtbare venster waarin een artefact wordt afgedrukt. */
.afdrukvak { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; visibility: hidden; }

/* overzicht */
.overzicht { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
.overzicht dt {
  padding: 9px 10px 9px 0;
  font-size: 13.5px; color: var(--u-ink-2);
  border-bottom: 1px solid var(--u-line);
}
.overzicht dd {
  margin: 0; padding: 9px 0;
  display: flex; align-items: baseline; gap: 8px; justify-content: flex-end;
  text-align: right;
  border-bottom: 1px solid var(--u-line);
}
.overzicht dt:last-of-type, .overzicht dd:last-of-type { border-bottom: 0; }
.overzicht .waarde { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }

/* Tabellen: kop in grijs, haarlijnen, getallen rechts. Geen tabular-nums:
   Mona Sans heeft daar een doorgestreepte nul. */
.tabelvak { margin-top: 12px; overflow-x: auto; }
.blok-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.blok-tabel th, .blok-tabel td {
  padding: 8px 12px 8px 0; text-align: left;
  border-bottom: 1px solid var(--u-line);
  white-space: nowrap;
}
.blok-tabel thead th { font-size: 12.5px; font-weight: 500; color: var(--u-tag); }
.blok-tabel tbody th { font-weight: 500; color: var(--u-ink); }
.blok-tabel tr:last-child td, .blok-tabel tr:last-child th { border-bottom: 0; }
.blok-tabel .getal { text-align: right; }
.blok-tabel th:last-child, .blok-tabel td:last-child { padding-right: 0; }
.blok-tabel td.getal + td, .blok-tabel th.getal + th { padding-left: 14px; }

/* artefact */
.artefact-voorbeeld {
  width: 100%; height: 240px;
  background: #fff;
  border: 0; border-radius: 14px;
  box-shadow: 0 0 0 1px var(--u-line);
}
.artefact-code, .artefact-bron pre {
  margin: 0; padding: 12px 14px;
  max-height: 260px; overflow: auto;
  font: 12.5px/1.6 var(--code);
  color: var(--u-ink);
  background: var(--u-panel); border-radius: 14px;
}
.artefact-bron { margin-top: 10px; }
.artefact-bron summary {
  font-size: 13px; color: var(--u-tag);
  padding: 4px 0;
}
.artefact-bron summary:hover { color: var(--u-ink); }

/*
 * Het antwoord zelf, en tekst in een blok: ook in de stijl van de website.
 * Alles in de tool is Mona Sans, net als de website.
 */
.bericht-assistent .prose, .blok .prose { font-family: var(--u-sans); color: var(--u-ink); }
.bericht-assistent .prose h2, .blok .prose h2,
.bericht-assistent .prose h3, .blok .prose h3,
.bericht-assistent .prose h4, .blok .prose h4,
.bericht-assistent .prose h5, .blok .prose h5 { font-weight: 500; letter-spacing: -.02em; }
.bericht-assistent .prose h2, .blok .prose h2 { font-size: 21px; line-height: 1.15; letter-spacing: -.03em; }
.bericht-assistent .prose h1, .blok .prose h1 { margin: 0 0 12px; font-size: 26px; font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.bericht-assistent .prose strong, .blok .prose strong { font-weight: 600; }
.bericht-assistent .prose li::marker, .blok .prose li::marker { color: var(--u-ink-3); }
.bericht-assistent .prose a, .blok .prose a { color: var(--u-signaal); }
.bericht-assistent .prose code, .blok .prose code { font: inherit; font-size: .94em; background: var(--u-panel); border-radius: 6px; }
.bericht-assistent .prose pre, .blok .prose pre { background: var(--u-panel); border-radius: 14px; }
.bericht-assistent .prose pre code, .blok .prose pre code { font: 13px/1.6 var(--code); background: none; }
.bericht-assistent .prose blockquote, .blok .prose blockquote {
  padding: 10px 14px;
  color: var(--u-ink-2);
  background: var(--u-panel); border: 0; border-radius: 14px;
}
.bericht-assistent .prose hr, .blok .prose hr { border-top-color: var(--u-line-2); }
.bericht-assistent .prose table, .blok .prose table {
  border-collapse: separate; border-spacing: 0;
  font-size: 14px;
  background: var(--u-panel); border-radius: 14px;
}
.bericht-assistent .prose th, .blok .prose th,
.bericht-assistent .prose td, .blok .prose td { padding: 8px 12px; border: 0; }
.bericht-assistent .prose th, .blok .prose th { font-weight: 500; color: var(--u-tag); background: none; }
.bericht-assistent .prose td, .blok .prose td { border-top: 1px solid var(--u-line); }
.bericht-assistent .prose .tabel-scroll, .blok .prose .tabel-scroll { border-radius: 14px; }

/* ---------- de invoer ----------
 *
 * Eén witte balk onderin, altijd open: links het plusje voor bestanden, in
 * het midden het veld dat meegroeit, rechts de microfoon en versturen. Alle
 * knoppen zijn even groot en staan onderaan, zodat ze bij een lange vraag
 * naast de laatste regel blijven staan in plaats van ergens in het midden.
 *
 * De balk laat de gloed er niet doorheen: tekst typen op een bewegende kern
 * leest onrustig. Een zachte schaduw houdt hem los van het karakter.
 */
.kaart {
  width: 100%; max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: 6px;
  background: rgb(var(--vlak-rgb));
  border: 1px solid var(--lijn-sterk); border-radius: 26px;
  box-shadow: 0 1px 2px rgb(var(--schaduw-rgb) / .05), 0 12px 32px -10px rgb(var(--schaduw-rgb) / .22);
  transition: border-color var(--snel) ease, box-shadow var(--snel) ease;
}
.kaart:focus-within {
  border-color: rgb(var(--inkt-rgb) / .38);
  box-shadow: 0 0 0 4px var(--tint-sterk), 0 12px 32px -10px rgb(var(--schaduw-rgb) / .24);
}
.kaart[data-luistert="ja"] { border-color: var(--baby); box-shadow: 0 0 0 4px var(--baby-zacht), 0 12px 32px -10px rgb(var(--schaduw-rgb) / .24); }

.kaartrij { display: flex; align-items: flex-end; gap: 4px; }

.kaartplus, .praatknop, .verstuur {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
}
.kaartplus { color: var(--inkt-60); }
.kaartplus svg { width: 21px; height: 21px; }
.kaartplus:hover:not(:disabled) { color: var(--inkt); background: var(--tint-sterk); }

textarea#invoerveld {
  flex: 1; min-width: 0;
  resize: none;
  min-height: 40px; max-height: min(200px, 30vh);
  margin: 0; padding: 9px 6px;
  /* 16px en niet kleiner: daaronder zoomt Safari op de iPhone in bij typen. */
  font: 16px/1.4 var(--sans); color: var(--inkt);
  background: none; border: 0; outline: none;
  overflow-y: auto; scrollbar-width: thin;
}
textarea#invoerveld::placeholder { color: var(--inkt-42); }
/* Terwijl hij nog luistert kan de tekst veranderen: iets zachter. */
.kaart[data-voorlopig="ja"] textarea#invoerveld { color: var(--inkt-80); }
/* De rand hoort bij de balk, niet bij het veld erin. */
textarea#invoerveld:focus-visible { outline: none; }

/*
 * Praten. In rust een microfoon; luistert hij, dan een babyblauw vlak met een
 * blokje (stoppen en versturen) en een ring die meeademt met je stem; loopt
 * er een antwoord, dan een donker vlak met een blokje (afbreken). Rond is
 * beginnen, vierkant is stoppen - dezelfde taal als altijd, maar klein.
 */
.praatknop {
  position: relative;
  color: var(--inkt-60); background: none;
  transition: background var(--snel) ease, color var(--snel) ease, transform var(--snel) ease;
}
.praatknop:hover { color: var(--inkt); background: var(--tint-sterk); }
.praatmic { width: 21px; height: 21px; }
.praatvorm {
  display: none;
  width: 12px; height: 12px;
  background: currentColor; border-radius: 3px;
}
.praatknop[data-actie="stoppen"], .praatknop[data-actie="afbreken"] { color: rgb(var(--vlak-rgb)); }
.praatknop[data-actie="stoppen"] .praatmic, .praatknop[data-actie="afbreken"] .praatmic { display: none; }
.praatknop[data-actie="stoppen"] .praatvorm, .praatknop[data-actie="afbreken"] .praatvorm { display: block; }
.praatknop[data-actie="stoppen"] { color: var(--inkt); background: var(--baby); }
.praatknop[data-actie="afbreken"], .praatknop[data-actie="afbreken"]:hover { background: var(--inkt); color: rgb(var(--vlak-rgb)); }
.praatknop:active { transform: scale(.92); }

/* Een ring terwijl hij luistert, die meeademt met het niveau. */
.praatknop::after {
  content: '';
  position: absolute; inset: -4px;
  border: 1.5px solid var(--baby);
  border-radius: 50%;
  opacity: 0; transform: scale(.94);
  transition: opacity var(--snel) ease, transform var(--snel) ease;
  pointer-events: none;
}
.praatknop[data-actie="stoppen"]::after {
  opacity: 1;
  transform: scale(calc(1 + var(--luid, 0) * .22));
  transition: transform .09s linear, opacity var(--snel) ease;
}

.verstuur {
  color: rgb(var(--vlak-rgb)); background: var(--inkt);
  transition: background var(--snel) ease, color var(--snel) ease, transform var(--snel) ease;
}
.verstuur svg { width: 20px; height: 20px; }
.verstuur:hover:not(:disabled) { transform: translateY(-1px); }
.verstuur:active:not(:disabled) { transform: scale(.92); }
/* Leeg veld: een stil rondje, geen halfdoorzichtige donkere knop. */
.verstuur:disabled { color: var(--inkt-42); background: var(--tint-sterk); cursor: default; }
/* Loopt er een antwoord, dan is de stopknop de knop rechts. */
.kaart[data-bezig="ja"] .verstuur { display: none; }

.praatknop:focus-visible, .verstuur:focus-visible, .kaartplus:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .praatknop, .praatknop::after, .verstuur { transition: none; }
}

/* Wat er nu speelt: klein en stil linksboven, naast de menuknop. Onderin staat
   alleen de knop - daar hoort geen tekst bij. */
.bovenregel {
  position: fixed; z-index: 30;
  top: calc(var(--rand) + 13px); left: calc(var(--rand) + 52px);
  margin: 0; max-width: calc(100vw - var(--rand) * 2 - 160px);
  display: flex; align-items: baseline; gap: 7px;
  font-size: 13px; line-height: 1.3;
  pointer-events: none;
}
.kaarttitel { font-weight: 550; color: var(--inkt); white-space: nowrap; }
.kaartregel {
  font-size: 12px; color: var(--inkt-42);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.stopknop {
  margin-left: auto; flex-shrink: 0;
  padding: 5px 13px;
  font-size: 13px; font-weight: 550;
  color: var(--inkt); background: var(--beige);
  border: 1px solid var(--lijn-sterk); border-radius: 9px;
  transition: background var(--snel) ease;
}
.stopknop:hover { background: var(--baby-zacht); }

.bijlagenrij { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 6px; }
.chip {
  display: flex; align-items: center; gap: 9px;
  max-width: 100%; min-width: 0;
  padding: 5px 5px 5px 6px;
  font-size: 13px; line-height: 1.25;
  background: var(--tint); border: 1px solid var(--lijn); border-radius: 14px;
  animation: opkomen var(--rustig) ease both;
}
.chip.bezig { opacity: .6; }
.chip.fout { box-shadow: inset 3px 0 0 var(--inkt); font-weight: 500; }
.chip-icoon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--inkt-80); background: rgb(var(--vlak-rgb));
  border: 1px solid var(--lijn); border-radius: 9px;
}
.chip-icoon svg { width: 17px; height: 17px; }
.chip .chip-beeld {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px; object-fit: cover;
}
.chip-tekst { display: flex; flex-direction: column; min-width: 0; }
.chip-naam { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chip .meta { color: var(--inkt-60); font-size: 11.5px; white-space: nowrap; }
.chip.bezig .meta::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; border: 1.5px solid var(--inkt-42); border-top-color: transparent; animation: ob-draai .8s linear infinite; vertical-align: -1px; }
.chip button {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  color: var(--inkt-60); background: none; border: 0; border-radius: 50%;
}
.chip button svg { width: 14px; height: 14px; }
.chip button:hover { background: var(--tint-sterk); color: var(--inkt); }


/* Een knop met alleen een pictogram: sluiten, en de kleine knoppen in panelen. */
.icoonknop {
  position: relative;
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0; padding: 0;
  color: var(--inkt-60); background: none;
  border: 0; border-radius: 11px;
  transition: background var(--snel) ease, color var(--snel) ease;
}
.icoonknop svg { width: 20px; height: 20px; }
.icoonknop:hover:not(:disabled) { background: var(--tint-sterk); color: var(--inkt); }
.icoonknop:disabled { opacity: .3; cursor: not-allowed; }
/* In de invoerbalk is het plusje rond, net als de knoppen ernaast. */
.icoonknop.kaartplus { width: 40px; height: 40px; border-radius: 50%; }

/* Alleen als er iets te melden is: een lege regel houdt geen ruimte vast. */
.voetnoot {
  max-width: 720px; margin: 0 auto;
  font-size: 12.5px; line-height: 1.4; color: var(--inkt-60); text-align: center;
  /* Staat los boven de gloed, dus een randje vel eromheen houdt hem leesbaar. */
  text-shadow: 0 0 8px var(--beige), 0 0 4px var(--beige);
}
.voetnoot:empty { display: none; }
.voetnoot.luisteren { color: var(--inkt); }

/* ---------- zijmenu ---------- */

.overlay { position: fixed; inset: 0; z-index: 40; background: rgb(var(--inkt-rgb) / .16); }

/*
 * Het zijmenu is gesprekken, verder niets. Welk model er draait is een
 * instelling van de server, dus dat staat hier niet meer: kiezen wat je niet
 * hoort te kiezen levert alleen verkeerde keuzes op.
 *
 * De lade laat de gloed er doorheen schemeren, net als de chatbalk - dan valt
 * hij niet als een vreemd wit vlak over het vel.
 */
.lade {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
  width: 316px; max-width: 86vw;
  display: flex; flex-direction: column;
  padding: 16px 14px;
  background: var(--beige);
  box-shadow: 1px 0 40px rgb(var(--schaduw-rgb) / .1);
  animation: schuif-in var(--rustig) var(--veer) both;
}
/* Dicht en zonder backdrop-filter, net als het uitvoerblok: anders moet de
   vervaging elk beeld van het inschuiven opnieuw. */
@keyframes schuif-in { from { transform: translateX(-100%); } }

.lade-kop {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; margin-bottom: 12px;
}
.lade-titel { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

/* Dezelfde taal als de praatknop: donker, rond, geen omhaal. */
.nieuwknop {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 14px; margin-bottom: 8px;
  font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  color: var(--beige); background: var(--inkt);
  border: 0; border-radius: 14px;
  transition: transform var(--snel) ease, filter var(--snel) ease;
}
.nieuwknop svg { width: 17px; height: 17px; }
.nieuwknop:hover { filter: brightness(1.25); }
.nieuwknop:active { transform: scale(.985); }

.ladezoek {
  padding: 11px 13px; margin-bottom: 8px;
  font: inherit; font-size: 14px; color: var(--inkt);
  background: var(--tint); border: 1px solid transparent; border-radius: 14px;
  outline: none;
  transition: background var(--snel) ease, border-color var(--snel) ease;
}
.ladezoek::placeholder { color: var(--inkt-42); }
.ladezoek:focus { background: transparent; border-color: var(--lijn-sterk); }

/* Elk gesprek een eigen blokje, net als de uitvoerblokken. */
.lade-lijst { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 4px -2px 0; padding: 0 2px; }

.gespreksitem {
  display: flex; align-items: center; gap: 4px;
  padding: 11px 13px;
  background: var(--tint); border-radius: 14px;
  transition: background var(--snel) ease;
}
.gespreksitem:hover { background: var(--tint-sterk); }
.gespreksitem.actief { background: rgb(var(--baby-rgb) / .34); }
.gespreksitem.actief .meta { color: var(--inkt-60); }
.gespreksitem .opener { flex: 1; min-width: 0; padding: 0; text-align: left; background: none; border: 0; }
.gespreksitem .naam {
  display: block; font-size: 14px; font-weight: 500; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gespreksitem.actief .naam { font-weight: 600; }
.gespreksitem .meta { display: block; font-size: 12px; color: var(--inkt-42); margin-top: 2px; }
.gespreksitem .acties { display: flex; gap: 1px; opacity: 0; }
.gespreksitem:hover .acties, .gespreksitem:focus-within .acties { opacity: 1; }
.gespreksitem .acties button {
  display: grid; place-items: center;
  width: 25px; height: 25px; padding: 0;
  font-size: 12px; color: var(--inkt-42);
  background: none; border: 0; border-radius: 7px;
}
.gespreksitem .acties button:hover { background: var(--beige); color: var(--inkt); }
.lade-leeg { padding: 26px 4px; font-size: 13.5px; color: var(--inkt-42); text-align: center; }

.lade-voet {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--lijn);
  display: flex; flex-direction: column; gap: 4px;
}
.schakelaar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px;
  font-size: 14px; font-weight: 500; color: var(--inkt-60);
  background: var(--tint); border: 0; border-radius: 14px;
  transition: background var(--snel) ease, color var(--snel) ease;
}
.schakelaar:hover { background: var(--tint-sterk); }
.schakelaar-vak {
  position: relative;
  width: 34px; height: 20px; flex-shrink: 0;
  background: var(--tint-sterk); border-radius: 999px;
  transition: background var(--snel) ease;
}
.schakelaar-vak::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: var(--beige); border-radius: 50%;
  box-shadow: 0 1px 2px rgb(var(--schaduw-rgb) / .28);
  transition: transform var(--rustig) var(--veer);
}
.schakelaar[aria-pressed="true"] { color: var(--inkt); }
.schakelaar[aria-pressed="true"] .schakelaar-vak { background: var(--inkt); }
.schakelaar[aria-pressed="true"] .schakelaar-vak::after { transform: translateX(14px); }
.schakelaar:disabled { opacity: .4; cursor: not-allowed; }

/* Eén regel, geen alinea. Dat er iets te weten valt zie je aan het stipje op
   de menuknop; hier staat alleen wat er aan de hand is. */
.ladewaarschuwing {
  margin: 4px 0 0; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45; color: var(--inkt-80);
  background: var(--tint); border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--inkt-42);
}

/* ---------- toegangspoort ---------- */

.poort {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgb(var(--vel-rgb) / .96);
  /* Geen backdrop-filter: het karakter eronder beweegt, dus een vervaging
     over het hele scherm moest elk beeld opnieuw (docs/beweging.md). */
}
.poortkaart {
  width: 100%; max-width: 410px;
  padding: 26px;
  background: var(--beige);
  border: 1px solid var(--lijn-sterk); border-radius: 20px;
  box-shadow: 0 16px 50px rgb(var(--schaduw-rgb) / .14);
}
.poortkaart h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
.poortkaart p { margin: 0 0 16px; font-size: 14px; color: var(--inkt-60); line-height: 1.55; }
.poortveld {
  width: 100%; padding: 11px 13px; margin-bottom: 10px;
  font: inherit; font-size: 15px; color: var(--inkt);
  background: var(--tint); border: 1px solid transparent; border-radius: 11px;
  outline: none;
}
.poortveld:focus { border-color: var(--inkt); }
.poortknop {
  width: 100%; padding: 11px;
  font-size: 15px; font-weight: 600;
  color: var(--beige); background: var(--inkt);
  border: 0; border-radius: 11px;
}
.poortknop:hover:not(:disabled) { filter: brightness(1.3); }
.poortknop:disabled { opacity: .45; }
.poortfout { margin: 10px 0 0; font-size: 13.5px; font-weight: 500; color: var(--inkt); }

/* ---------- slepen ---------- */

.sleepvlak {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgb(var(--vel-rgb) / .85);
}
.sleepvlak-tekst {
  padding: 18px 26px;
  font-size: 15px; font-weight: 600; color: var(--inkt);
  background: var(--baby); border: 1.5px dashed var(--inkt); border-radius: 15px;
}

@media (max-width: 640px) {
  :root { --rand: 14px; }
  html, body { font-size: 15.5px; }
  .vel { padding-top: calc(var(--rand) + 44px); }
}




/* ---------------- infrastructuurcanvas ----------------
 *
 * Een laag óver de agentkaart, geen tweede scherm. Vier soorten knopen:
 * agent (het poppetje zelf), groep, gereedschapsblok en werkwijze. Pannen en
 * zoomen zit in één transform op het doek én op het agentvlak, zodat beide
 * lagen precies gelijk blijven lopen.
 */

.kaartbalk {
  /* Op één lijn met de knop "All agents" rechtsboven, en er vlak naast. */
  position: absolute; top: calc(var(--rand) + 2px); right: calc(var(--rand) + 100px);
  /* Boven het scherm van de instellingen: de knoppen blijven bruikbaar
   * terwijl het paneel openstaat. */
  display: flex; gap: 8px; z-index: 22;
}

.kaartbalkknop {
  font: inherit; font-size: .78rem; font-weight: 500;
  color: var(--inkt-60); background: rgb(var(--vel-rgb) / .82);
  border: 1px solid var(--tint-sterk); border-radius: 999px;
  padding: 6px 13px; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--snel) ease, color var(--snel) ease;
}
.kaartbalkknop:hover { background: var(--beige); color: var(--inkt); }
.kaartbalkknop[aria-pressed="true"], .kaartbalkknop[aria-expanded="true"] { background: var(--inkt); color: var(--beige); border-color: var(--inkt); }

/* ---------------- instellingen ----------------
 *
 * Een eigen paneel op de kaart, onder de knoppen rechtsboven. Het zijmenu is
 * voor gesprekken; wat je instelt staat hier, waar je ook meteen ziet wat het
 * doet. Het scherm eronder is doorzichtig en vangt alleen de klik ernaast.
 */
.instelscherm { position: absolute; inset: 0; z-index: 20; }
.instellingen {
  position: absolute; top: 64px; right: 16px; z-index: 21;
  width: min(calc(100vw - 32px), 340px);
  max-height: calc(100% - 88px); overflow-y: auto; overscroll-behavior: contain;
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn); border-radius: 20px;
  box-shadow: 0 24px 60px -24px rgb(var(--schaduw-rgb) / .35), 0 2px 6px rgb(var(--schaduw-rgb) / .06);
  padding: 10px 16px 16px;
}
.instellingen-kop {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -8px 2px 0;
}
.instellingen-kop strong { font-size: .92rem; font-weight: 600; color: var(--inkt); }
.instellingen .weergave { margin-top: 4px; }
.instellingen .schakelaar { width: 100%; }

/* Los van het raster: neerzetten waar je wilt. */
.agentvlak.infra-vrij { display: block; position: relative; transform-origin: 0 0; }
/* Iets kleiner dan op de agentkaart, maar niet tot een stip: dit blijft de
 * kaart. Op ware grootte overlappen twaalf gloeden elkaar zo sterk dat een
 * klik de verkeerde raakt; op .78 is er net genoeg lucht tussen. */
.agentvlak.infra-vrij .agentkaartje {
  position: absolute; margin: 0;
  height: auto; max-height: none; flex: none;
  transform: translate(-50%, -50%) scale(.78);
  transition: opacity var(--snel) ease;
  cursor: grab; touch-action: none;
}
.agentvlak.infra-vrij .agentkaartje.actief { transform: translate(-50%, -50%) scale(.78); }
.agentvlak.infra-vrij .agentkaartje:active { cursor: grabbing; }
.agentkaartje.infra-uit { opacity: .16; }

/* De laag ligt bovenop, maar vangt zelf niets op: anders komt geen enkele
 * klik nog bij de poppetjes eronder. Alleen de knopen en de balk luisteren. */
.infralaag { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.infra-melding { position: absolute; inset: 0; display: grid; place-items: center; color: var(--inkt-60); }

/* Het doek pant en zoomt mee; de balk eromheen niet. */
.infra-doek { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }
.infra-pant { cursor: grabbing; }

.infra-draden { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* Lijnen liggen ónder de blokjes en houden zich stil.
 *
 * Twaalf agents aan één groep is al snel veertig lijnen over de hele kaart.
 * Op volle sterkte wordt dat een web waar niets meer uit te lezen valt; het
 * oog moet de blokjes zien en de lijnen alleen vermoeden. Wijs je iets aan,
 * dan komt de bijbehorende bundel lijnen wél naar voren. */
/* De dikte wordt teruggedeeld door de zoom: het doek schaalt de lijnen mee,
 * en zonder dit worden ze bij inzoomen touwen en bij uitzoomen onzichtbaar. */
.infra-draad {
  fill: none; stroke-width: calc(1.4px / var(--zoom, 1)); stroke-linecap: round;
  opacity: .34; transition: opacity var(--snel) ease, stroke-width var(--snel) ease;
}
/* Eén streepjestaal: doorgetrokken is "helemaal", onderbroken is "voor een
 * deel". Drie verschillende stippellijnen door elkaar leest als ruis. */
.infra-draad--deels { stroke-dasharray: calc(6px / var(--zoom, 1)) calc(5px / var(--zoom, 1)); }
.infra-draad--lid { opacity: .28; }
/* Een lijn naar een werkblok is gewoon een lijn: doorgetrokken en rustig.
 * Streepjes blijven voor wat maar voor een deel geldt of nog niet werkt. */
.infra-draad--werk { opacity: .32; }
.infra-draad--nieuw { stroke-dasharray: calc(6px / var(--zoom, 1)) calc(5px / var(--zoom, 1)); opacity: .85; stroke-width: calc(2.2px / var(--zoom, 1)); }
.infra-kiest .infra-draad { opacity: .05; }

/* Een blokje is een punt op het vel, geen doos.
 *
 * De knoop zelf is nul bij nul groot; de tegel en de bijschriften hangen
 * eromheen. Daardoor ligt het ankerpunt precies in het midden van de tegel,
 * wat er ook onder staat - en een lange naam duwt de lijnen niet omlaag. */
.infra-knoop {
  position: absolute; width: 0; height: 0;
  pointer-events: none;
  font-size: .72rem; color: var(--inkt);
}

.infra-tegel {
  position: absolute; left: -23px; top: -23px;
  width: 46px; height: 46px; border-radius: var(--r-m);
  display: grid; place-items: center;
  pointer-events: auto; cursor: grab; touch-action: none;
  /* Een tegel is neutraal: wit met een haarlijn. Alleen het tekentje draagt
   * de kleur van zijn soort, anders wordt de kaart een regenboog. */
  background: var(--vlak-1);
  border: 1px solid var(--haarlijn-sterk);
  box-shadow: var(--voorwerp);
  transition: box-shadow var(--snel) ease, transform var(--snel) ease, border-color var(--snel) ease;
}
.infra-tegel:active { cursor: grabbing; }
.infra-knoop:hover .infra-tegel {
  border-color: color-mix(in srgb, var(--kleur) 45%, var(--haarlijn-sterk));
  box-shadow: 0 1px 2px rgb(var(--schaduw-rgb) / .06), 0 8px 18px -10px rgb(var(--schaduw-rgb) / .35);
  transform: translateY(-1px);
}

/* Naam en bijschrift onder de tegel, gecentreerd op het ankerpunt. Eén kolom
 * en geen twee losse regels: een naam die over twee regels loopt schuift het
 * bijschrift dan gewoon mee omlaag in plaats van eroverheen te vallen. Vaste
 * breedte, zodat namen van blokjes naast elkaar netjes uitlijnen. */
.infra-bijschrift {
  position: absolute; left: -54px; top: 28px; width: 108px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  text-align: center; pointer-events: none;
  line-height: 1.25;
}
.infra-naam { font-weight: 500; }
.infra-onder { font-size: .62rem; color: var(--inkt-42); }
.infra-knoop--blok .infra-naam { font-family: var(--mono); font-size: .66rem; }
.infra-knoop--blok .infra-onder { font-family: var(--mono); }

/* Het tekentje vult de tegel en draagt haar kleur. */
.infra-teken {
  width: var(--icoon-tegel); height: var(--icoon-tegel); flex: none; pointer-events: none;
  fill: none; stroke: var(--kleur-teken, var(--kleur));
  stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round;   /* viewBox 14: ≈ 1.6 px */
}
.infra-teken--blok, .infra-teken--groep { fill: var(--kleur-teken, var(--kleur)); stroke: none; }
/* Op een donker vel is een soortkleur van 30-45% lichtheid te zwaar: de
 * inkt van het thema erdoor, zodat het tekentje leesbaar blijft (AA). */
:root[data-donker="ja"] .infra-tegel, :root[data-donker="ja"] .infra-werkblokteken,
:root[data-donker="ja"] .infra-werktuig--werkblok .infra-werktuigteken {
  --kleur-teken: color-mix(in srgb, var(--kleur) 55%, rgb(var(--inkt-rgb)));
}

/* Een blokje dat je hebt neergezet maar nog niet hebt gevuld. Gestippeld en
 * bleek: het staat er wel, maar het is nog niets. Klik erop om het te vullen. */
.infra-knoop--ontwerp .infra-tegel {
  border-style: dashed; border-width: 1px; border-color: rgb(var(--inkt-rgb) / .32);
  background: transparent; box-shadow: none;
  cursor: pointer;
}
.infra-knoop--ontwerp .infra-teken { opacity: .55; }
.infra-knoop--ontwerp .infra-naam { color: var(--inkt-60); font-style: italic; }
.infra-knoop--ontwerp:hover .infra-tegel { border-style: solid; }
.infra-knoop--ontwerp:hover .infra-teken { opacity: 1; }

/* Het handvat hangt op de rand van de tegel. In rust een stipje, bij
 * aanwijzen een knop waar je een draad uit trekt. */
.infra-handvat {
  font: inherit; font-size: .8rem; line-height: 1;
  position: absolute; right: -7px; top: 50%;
  width: 16px; height: 16px; padding: 0;
  display: grid; place-items: center;
  pointer-events: auto;
  color: transparent; background: color-mix(in srgb, var(--kleur-teken, var(--kleur)) 55%, transparent);
  border: 1.5px solid rgb(var(--vel-rgb)); border-radius: 50%;
  cursor: crosshair;
  transform: translateY(-50%) scale(.5);
  transition: background var(--snel) ease, color var(--snel) ease, transform var(--snel) ease;
}
.infra-knoop:hover .infra-handvat {
  transform: translateY(-50%) scale(1);
  color: rgb(var(--vlak-rgb)); background: var(--kleur);
}
.infra-handvat:hover { background: var(--inkt) !important; }

.infra-stip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.infra-telling { font-family: var(--mono); font-size: .64rem; opacity: .55; }

.infra-trekt .infra-knoop, .infra-trekt .agentkaartje { cursor: crosshair; }

/* De balk spant de hele breedte en centreert zijn inhoud zelf.
 *
 * Eerder stond hij op left:50% met een translate erachter. Dat ziet er
 * gecentreerd uit, maar voor de opmaak begint zo'n doos pas op de helft van
 * het scherm: de beschikbare breedte was dus de hélft, waardoor de knoppen
 * over twee regels braken terwijl er ruimte zat. */
.infra-balk {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center;
  padding: 0 16px;
  z-index: 2; pointer-events: none;
}

.infra-gereedschap {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 2px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  pointer-events: auto;
  background: rgb(var(--vel-rgb) / .86);
  border: 1px solid var(--tint-sterk); border-radius: 999px;
  padding: 5px 7px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgb(var(--schaduw-rgb) / .1);
}

/* Een knop in de balk: pil met een tekentje ervoor, zelfde vorm als de
 * knoppen rechtsboven. Een tekentje zegt in één blik wat voor ding je
 * neerzet; het woord ernaast zegt welke. */
.infra-werktuig, .infra-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .76rem; font-weight: 500;
  color: var(--inkt-60); background: none;
  border: 1px solid transparent; border-radius: 999px;
  padding: 6px 12px 6px 10px; cursor: pointer;
  transition: background var(--snel) ease, color var(--snel) ease, border-color var(--snel) ease;
}
.infra-werktuig--enkel { padding: 6px 9px; }
/* Het plusje steekt rechtsonder uit het tekentje, dus een knop die er een
 * heeft moet iets meer lucht tussen teken en woord houden. */
.infra-werktuig:has(.infra-plusteken) { gap: 10px; }

/* Het tekentje draagt het plusje rechtsonder, als een schaduwtje: zo zie je
 * dat deze knop iets nieuws maakt zonder dat er een los teken naast staat. */
.infra-werktuigteken { position: relative; display: grid; place-items: center; flex: none; }
.infra-balkteken {
  width: 15px; height: 15px; display: block;
  fill: none; stroke: currentColor;
  stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round;
}
.infra-balkteken--vol { fill: currentColor; stroke: none; }
.infra-werktuig:hover, .infra-chip:hover {
  background: var(--beige); color: var(--inkt); border-color: var(--tint-sterk);
}
.infra-chip[aria-pressed="true"] { background: var(--inkt); color: var(--beige); }
.infra-plusteken {
  position: absolute; right: -5px; bottom: -4px;
  font-size: .62rem; font-weight: 700; line-height: 1;
  width: 10px; height: 10px; display: grid; place-items: center;
  color: var(--beige); background: var(--inkt-60);
  border-radius: 50%;
  transition: background var(--snel) ease;
}
.infra-werktuig:hover .infra-plusteken { background: var(--inkt); }
.infra-werktuiglabel { white-space: nowrap; }
.infra-scheiding { width: 1px; height: 20px; background: var(--tint-sterk); margin: 0 3px; }

.infra-status {
  position: absolute; left: 50%; bottom: 78px; pointer-events: auto; transform: translateX(-50%);
  max-width: min(80vw, 560px); text-align: center;
  font-size: .72rem; color: var(--inkt-60);
  background: rgb(var(--vel-rgb) / .94); border: 1px solid var(--tint-sterk);
  border-radius: 12px; padding: 6px 14px; z-index: 9;
}
.infra-status--fout { color: var(--inkt); font-weight: 500; }
.infra-status--link { color: var(--inkt); }
.infra-status--link a { color: var(--inkt); font-weight: 600; }

/* Rechtsklikmenu. Hangt aan de body, zodat het niet met het doek meepant. */
/* Boven de kaart uit.
 *
 * Het menu hangt aan de body en de kaart staat op z-index 70; met 60 viel het
 * er dus precies achter - onzichtbaar, want de kaart heeft een dekkende
 * achtergrond. Alles wat aan de body hangt en over de kaart heen moet, moet
 * daar overheen. */
/* Het rechtsklikmenu. Een kop met wat het is, daaronder de regels: een
 * kolom voor het vinkje, het label, en rechts een sneltoets of een pijltje.
 * Zo staan alle labels recht onder elkaar, met of zonder vinkje. */
.infra-menu {
  position: fixed; z-index: 80;
  min-width: 236px; max-width: min(330px, calc(100vw - 16px));
  max-height: 72vh; overflow-y: auto;
  background: var(--beige);
  border: 1px solid var(--tint-sterk); border-radius: 12px;
  padding: 5px; box-shadow: 0 10px 32px rgb(var(--schaduw-rgb) / .18);
}
.infra-submenu { z-index: 81; min-width: 212px; }
.infra-menukop { display: grid; gap: 1px; margin: 5px 9px 7px; min-width: 0; }
.infra-menukop strong, .infra-menukop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-menukop strong { font-size: .8rem; font-weight: 600; color: var(--inkt); }
.infra-menukop span { font-size: .66rem; color: var(--inkt-60); }
.infra-menukopje {
  font-size: .7rem; font-weight: 600; text-transform: lowercase;
  color: var(--inkt-60); margin: 7px 9px 3px 26px;
}
.infra-menuknop {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 6px;
  width: 100%; text-align: left;
  font: inherit; font-size: .78rem; color: var(--inkt);
  background: none; border: none; border-radius: 8px;
  padding: 6px 9px 6px 6px; cursor: pointer;
}
.infra-menuknop:hover, .infra-menuknop--open { background: var(--tint-sterk); }
.infra-menuknop:disabled { opacity: .45; cursor: default; background: none; }
.infra-menuknop--gevaar { color: #c0564b; }
.infra-menuknop--gevaar:hover { background: rgb(192 86 75 / .12); }
.infra-menuvink { font-size: .74rem; font-weight: 700; text-align: center; }
.infra-menulabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-menuhint { font-size: .66rem; color: var(--inkt-60); white-space: nowrap; padding-left: 10px; }
.infra-menupijl { font-size: 1rem; line-height: 1; color: var(--inkt-60); padding-left: 10px; }
.infra-menuscheiding { display: block; height: 1px; background: var(--tint-sterk); margin: 5px 9px; }

@media (max-width: 760px) {
  .kaartbalk { top: calc(var(--rand) + 3px); right: calc(var(--rand) + 98px); }
  .kaartbalkknop { font-size: .72rem; padding: 5px 10px; }
  .infra-balk { bottom: 14px; }
  .infra-werktuig, .infra-chip { font-size: .7rem; padding: 5px 8px; }
}
/* Op een telefoon past de hele balk alleen als tekentjes; het woord staat
 * dan in aria-label en in de tooltip. */
@media (max-width: 640px) {
  .infra-werktuig { padding: 6px; gap: 0; }
  .infra-gereedschap { padding: 4px 5px; }
  .infra-werktuig:has(.infra-plusteken) { gap: 0; }
  .infra-werktuiglabel { display: none; }
  .infra-scheiding { margin: 0 2px; }
}

/* Het formulier om een connector aan te sluiten. Boven de balk, zodat je
 * ziet waar het blok straks bij komt te staan. */
.infra-formulier {
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%);
  width: min(92vw, 460px); pointer-events: auto; z-index: 4;
  /* Nooit hoger dan het scherm: een formulier dat boven de rand uitsteekt
   * heeft een kop die je niet meer kunt bereiken, en daar zit het kruisje. */
  max-height: calc(100vh - 110px); overflow-y: auto;
  background: var(--beige); border: 1px solid var(--tint-sterk);
  border-radius: 14px; padding: 14px 16px 16px;
  box-shadow: 0 8px 28px rgb(var(--schaduw-rgb) / .16);
}
.infra-formulierkop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.infra-formulierkop strong { font-size: .86rem; }
.infra-sluit {
  font: inherit; font-size: 1.1rem; line-height: 1;
  color: var(--inkt-60); background: none; border: none; cursor: pointer;
  padding: 0 4px;
}
.infra-velden { display: grid; gap: 8px; }
.infra-veld { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 10px; }
.infra-veld > span { font-size: .74rem; color: var(--inkt-60); }
.infra-veld input, .infra-veld select {
  font: inherit; font-size: .78rem; color: var(--inkt);
  background: rgb(var(--vel-rgb) / .7);
  border: 1px solid var(--tint-sterk); border-radius: 8px;
  padding: 6px 9px; width: 100%;
}
.infra-veld input:focus, .infra-veld select:focus { outline: 2px solid var(--inkt); outline-offset: 1px; }
/* Een formulier met een schrijfvlak erin mag breder en hoger. */
.infra-formulier--breed { width: min(94vw, 560px); }
.infra-veld--vol { display: block; margin-top: 2px; }
.infra-veld--vol textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  color: var(--inkt); background: var(--beige);
  border: 1px solid var(--tint-sterk); border-radius: 9px;
  padding: 9px 10px;
}
.infra-veld--vol textarea:focus { outline: 2px solid var(--inkt); outline-offset: -1px; }

.infra-formulieruitleg { font-size: .7rem; color: var(--inkt-60); margin: 10px 0 12px; line-height: 1.45; }
.infra-aansluiten {
  font: inherit; font-size: .78rem; font-weight: 500;
  color: var(--beige); background: var(--inkt);
  border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer; width: 100%;
}
.infra-aansluiten:disabled { opacity: .6; cursor: default; }

/* De lade boven de balk: wat je op het vel kunt zetten. */
.infra-lade {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  width: min(92vw, 420px); max-height: min(52vh, 380px); overflow-y: auto;
  pointer-events: auto; z-index: 4;
  display: grid; gap: 1px;
  background: var(--beige); border: 1px solid var(--tint-sterk);
  border-radius: 14px; padding: 6px;
  box-shadow: 0 8px 28px rgb(var(--schaduw-rgb) / .16);
}
.infra-laderegel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  font: inherit; font-size: .78rem; color: var(--inkt); text-align: left;
  background: none; border: none; border-radius: 9px;
  padding: 7px 10px; cursor: pointer;
}
.infra-laderegel:hover { background: var(--tint); }
/* Wat al op het vel ligt kun je niet nog een keer neerzetten. */
.infra-laderegel--staat { opacity: .42; }
.infra-laderegel--staat::after { content: 'on map'; font-size: .64rem; }
.infra-laderegeltekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-laderegel .infra-stip { grid-column: 1; }
.infra-laderegel:not(:has(.infra-stip)) .infra-laderegeltekst { grid-column: 1 / 3; }

/* Het handvat op een poppetje: kleiner dan op een tegel en rechtsonder aan de
 * kern, want een poppetje is rond en heeft geen rand om op te hangen. */
/* Het poppetje is zelf al verkleind, dus een handvat op tegelmaat wordt hier
 * een stip van zes pixels: niet te vinden en niet te pakken. Groter, en in
 * rust minder ver teruggeschaald. */
.infra-handvat--agent {
  right: 24%; top: 76%;
  width: 22px; height: 22px; font-size: .95rem;
  background: color-mix(in srgb, var(--kleur) 60%, transparent);
  transform: translateY(-50%) scale(.66);
}
.agentkaartje:hover .infra-handvat--agent,
.infra-handvat--agent:hover {
  transform: translateY(-50%) scale(1);
  color: rgb(var(--vlak-rgb)); background: var(--kleur);
}

/* De kaart wacht op een tweede poppetje. */
.infra-wacht .agentkaartje { cursor: crosshair; }
.agentkaartje.infra-bron { outline: 2px solid var(--inkt); outline-offset: 6px; border-radius: 50%; }

/* Het handvat heeft een onzichtbare rand eromheen, zodat je hem raakt zonder
 * precies te mikken. De knop blijft klein; het doelgebied niet. */
.infra-handvat::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
}
/* In rust staat het handvat op halve grootte (een stip), en dan kromp dat
 * doelgebied mee tot zo'n 11 à 16 pixels. Het gebied schaalt daarom
 * tegengesteld mee: met een muis steeds rond de 30 pixels, in rust en bij
 * aanwijzen. Samen schalen ze nooit onder 1, dus het gebied krimpt ook
 * tijdens de overgang niet onder de muis weg (anders flakkert het). */
.infra-handvat::after { transform: scale(2); transition: transform var(--snel) ease; }
.infra-handvat--agent::after { transform: scale(1.5); }
.infra-knoop:hover .infra-handvat::after, .infra-handvat:hover::after, .infra-handvat:focus-visible::after,
.infra-knoop--los .infra-handvat::after, .agentkaartje:hover .infra-handvat--agent::after { transform: none; }
.infra-knoop--wijs .infra-handvat::after { transform: scale(.8); }

/* Waar je een draad naartoe trekt terwijl je hem vasthoudt. Een poppetje is
 * een wolk zonder rand, dus zonder dit weet je pas na loslaten of je raak
 * zat. */
.infra-doel .infra-tegel,
.infra-tegel.infra-doel { outline: 2px solid var(--inkt); outline-offset: 3px; }
.agentkaartje.infra-doel { outline: 2px solid var(--inkt); outline-offset: 6px; border-radius: 50%; }

/* Een blokje dat je hebt aangewezen: zijn lijnen voorop, de rest terug. */
.infra-kiest .infra-draad--aan { opacity: .95; stroke-width: calc(2.2px / var(--zoom, 1)); }
.infra-knoop.infra-uit { opacity: .2; }

/* Het kader dat je over het vel trekt om dingen aan te wijzen. */
.infra-kader {
  position: absolute; pointer-events: none; z-index: 3;
  background: rgb(var(--inkt-rgb) / .07);
  border: 1px solid var(--inkt-42); border-radius: 4px;
}
.infra-schuift .infra-doek { cursor: grab; }

/* Wat er in de selectie zit. Een ring eromheen, en niet gedimd zoals de rest. */
.infra-knoop.infra-aan .infra-tegel { outline: 2px solid var(--inkt); outline-offset: 3px; }
.agentkaartje.infra-aan { outline: 2px solid var(--inkt); outline-offset: 6px; border-radius: 50%; }
.infra-knoop.infra-aan, .agentkaartje.infra-aan { opacity: 1; }

/* Wat je met de selectie kunt, boven de gereedschapsbalk. */
.infra-selectiebalk {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  /* Op left:50% is de beschikbare breedte maar de helft van het scherm: dan
   * brak hij op een telefoon in een hoge kolom die over het gekozen blok lag. */
  width: max-content;
  max-width: min(94vw, 720px);
  pointer-events: auto; z-index: 4;
  background: var(--beige); border: 1px solid var(--tint-sterk);
  border-radius: 999px; padding: 5px 7px 5px 13px;
  box-shadow: 0 8px 24px rgb(var(--schaduw-rgb) / .16);
}
.infra-selectiebalk .infra-telling { margin-right: 4px; white-space: nowrap; }
.infra-chip--sterk { color: var(--beige); background: var(--inkt); }
.infra-chip--sterk:hover { color: var(--beige); background: var(--inkt); opacity: .88; }

/* Terwijl je mikt: wat een geldig doel is licht op, de rest wijkt terug.
 * Zo is de kaart zelf het antwoord op "waar kan dit aan vast". */
.infra-mikt .agentkaartje:not(.infra-kan),
.infra-mikt .infra-knoop:not(.infra-kan) { opacity: .25; }
/* Een ring om de kern en niet om de hele kaart: het poppetje is grotendeels
 * doorzichtige gloed, dus een rand op de doos staat zo ver weg dat je hem niet
 * met het poppetje in verband brengt. */
.infra-mikt .agentkaartje.infra-kan::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 48%; height: 48%; transform: translate(-50%, -50%);
  border: 2px dashed rgb(var(--inkt-rgb) / .3); border-radius: 50%;
  pointer-events: none;
}
.infra-mikt .agentkaartje.infra-doel::after { border-style: solid; border-color: var(--inkt); }
.infra-mikt .infra-knoop.infra-kan .infra-tegel { outline: 1.5px dashed var(--inkt-42); outline-offset: 3px; }
.infra-wacht .agentkaartje, .infra-wacht .infra-tegel { cursor: crosshair; }
.infra-knoop.infra-bron .infra-tegel { outline: 2px solid var(--inkt); outline-offset: 3px; }

/* De bedieningsuitleg: breder dan de gewone lade, want er staat tekst in. */
.infra-lade--hulp { width: min(94vw, 460px); max-height: min(74vh, 560px); gap: 0; padding: 10px 12px; }
.infra-hulpregel {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline;
  padding: 4px 0; font-size: .74rem; color: var(--inkt-80);
}
.infra-hulpregel kbd {
  /* Sans en op één regel: in mono breekt "Space or middle button" in tweeën. */
  font-family: var(--sans); font-size: .7rem; font-weight: 500; color: var(--inkt);
  background: var(--tint); border: 1px solid var(--tint-sterk); border-radius: 6px;
  padding: 2px 7px; justify-self: start; white-space: nowrap;
}

/* Het kijkvenster: wat zit er in dit ding, en wat kun je ermee.
 * Rechts vastgezet en niet boven het blokje: je wilt de kaart erbij zien
 * terwijl je leest, anders ben je het blokje kwijt waar het over gaat. */
.infra-kijker {
  /* Onder de knoppen rechtsboven, niet eroverheen: die wil je kunnen blijven
   * gebruiken terwijl het paneel openstaat. */
  position: absolute; right: 16px; top: 64px; bottom: 92px;
  width: min(42vw, 380px);
  display: flex; flex-direction: column;
  pointer-events: auto; z-index: 5;
  background: var(--beige); border: 1px solid var(--tint-sterk);
  border-radius: 14px;
  box-shadow: 0 10px 34px rgb(var(--schaduw-rgb) / .18);
}
/* Op een telefoon is 42vw een smalle strook waar de tekst per lettergreep
 * afbreekt: dan de hele breedte, met de kaart erboven en eronder. */
@media (max-width: 640px) {
  .infra-kijker { left: 12px; right: 12px; width: auto; }
}
.infra-kijkerkop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px 8px 16px; border-bottom: 1px solid var(--tint-sterk);
}
.infra-kijkerkop strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-kijkerlijf { flex: 1; overflow-y: auto; padding: 12px 16px 16px; }
.infra-kijkerleeg { font-size: .74rem; color: var(--inkt-42); margin: 8px 0; }
.infra-kijkerkopje {
  font-size: .74rem; font-weight: 600; text-transform: lowercase;
  color: var(--inkt-42); margin: 14px 0 4px;
}

.infra-kijkrij {
  display: grid; grid-template-columns: 88px 1fr; gap: 8px;
  font-size: .74rem; padding: 3px 0; align-items: baseline;
}
.infra-kijkrij > span { color: var(--inkt-42); }
.infra-kijkrij > strong { font-weight: 500; overflow-wrap: anywhere; }

.infra-kijklijst { display: grid; gap: 1px; margin: 8px 0; }
.infra-kijkregel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: .74rem; text-align: left; color: var(--inkt);
  background: var(--tint); border: none; border-radius: 8px;
  padding: 7px 9px; cursor: pointer;
}
.infra-kijkregel:hover { background: var(--tint-sterk); }
.infra-kijkregel--stil { cursor: default; }
.infra-kijkregel--stil:hover { background: var(--tint); }
.infra-kijkregeltekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-kijkregeltekst--mono { font-family: var(--mono); font-size: .68rem; }
.infra-kijkweg {
  font: inherit; font-size: .9rem; line-height: 1; flex: none;
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--inkt-42); background: none; border: none; border-radius: 50%; cursor: pointer;
}
.infra-kijkweg:hover { color: var(--beige); background: var(--inkt); }

.infra-kijktekst {
  font-family: var(--mono); font-size: .68rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--inkt-80); background: var(--tint);
  border-radius: 9px; padding: 10px 12px; margin: 10px 0 0;
  max-height: 44vh; overflow-y: auto;
}
.infra-kijkknoppen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }

/* De keuzelijst met connectors: een rooster van merktegels. */
.infra-merkrooster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px; margin: 6px 0 4px;
}
.infra-merktegel {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; font-size: .68rem; font-weight: 500; color: var(--inkt);
  background: color-mix(in srgb, var(--kleur) 7%, var(--beige));
  border: 1px solid color-mix(in srgb, var(--kleur) 24%, transparent);
  border-radius: 11px; padding: 10px 6px 8px; cursor: pointer;
  transition: border-color var(--snel) ease, transform var(--snel) ease, box-shadow var(--snel) ease;
}
.infra-merktegel:hover {
  border-color: color-mix(in srgb, var(--kleur) 60%, transparent);
  box-shadow: 0 4px 12px -4px rgb(var(--schaduw-rgb) / .24);
  transform: translateY(-1px);
}
.infra-merktegel--al { opacity: .55; }
.infra-merkvak { display: grid; place-items: center; width: 26px; height: 26px; }
.infra-merknaam { text-align: center; line-height: 1.2; overflow-wrap: anywhere; }
.infra-merkvink {
  position: absolute; top: 5px; right: 6px;
  font-size: .62rem; color: var(--kleur);
}

/* Het merkteken zelf, met de hand nagetekend in de kleur van het merk. */
.infra-merk {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: var(--kleur);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.infra-merk--vol { fill: var(--kleur); stroke: none; }
/* Een bijna zwart merk op een donker thema: de inkt van het thema. */
:root[data-donker="ja"] .infra-merk--donker { --kleur: var(--inkt); }
/* In een tegel op de kaart draagt het merk de tegelkleur en is het kleiner. */
.infra-tegel > .infra-merk { width: 24px; height: 24px; }

.infra-waarschuwing {
  font-size: .7rem; line-height: 1.5; color: var(--inkt-80);
  background: rgb(240 106 106 / .1);
  border-left: 2px solid rgb(240 106 106 / .55);
  border-radius: 0 8px 8px 0;
  padding: 8px 10px; margin: 0 0 10px;
}
.infra-formulieruitleg a { color: var(--inkt); overflow-wrap: anywhere; }
/* Een adres om over te nemen: in één stuk, en makkelijk te selecteren. */
.infra-adres {
  display: inline-block; margin-top: 4px; padding: 2px 6px;
  font-family: var(--mono); font-size: .7rem; color: var(--inkt);
  background: var(--tint-sterk); border-radius: 6px;
  user-select: all; overflow-wrap: anywhere;
}

/* Twee groepen die samenwerken: een dubbele lijn zegt "deze twee horen bij
 * elkaar" zonder dat het een richting heeft zoals de andere lijnen. */
.infra-draad--samen { stroke-width: calc(3px / var(--zoom, 1)); opacity: .3; stroke-linecap: round; }

/* Een lijn naar iets dat nog niet is ingevuld: hij staat er, maar doet nog
 * niets. Rood en onderbroken, zodat je hem niet voor een werkende aanziet. */
.infra-draad--wacht {
  stroke: #c0564b; opacity: .55;
  stroke-dasharray: calc(3px / var(--zoom, 1)) calc(5px / var(--zoom, 1));
}
.infra-kiest .infra-draad--wacht.infra-draad--aan { opacity: .9; }
/* Een lijn naar een plekje uit een template dat nog ingevuld moet worden:
 * onderbroken in inkt. Werk voor later, geen fout. */
.infra-draad--klus {
  stroke: var(--inkt-42);
  stroke-dasharray: calc(3px / var(--zoom, 1)) calc(5px / var(--zoom, 1));
}
.infra-kiest .infra-draad--klus.infra-draad--aan { stroke: var(--inkt-60); }

/* Een lijn naar een connector die je zelf hebt uitgezet: er is niets mis,
 * hij rust. Grijs en onderbroken, en de tegel zelf verbleekt mee. */
.infra-draad--rust {
  stroke: rgb(var(--inkt-rgb) / .45); opacity: .5;
  stroke-dasharray: calc(3px / var(--zoom, 1)) calc(5px / var(--zoom, 1));
}
.infra-kiest .infra-draad--rust.infra-draad--aan { opacity: .85; }
.infra-knoop--rust .infra-tegel { filter: grayscale(1); opacity: .5; }
.infra-knoop--rust .infra-onder { font-style: italic; }

.infra-wachtstip {
  position: absolute; top: -6px; right: -6px;
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; line-height: 1;
  color: rgb(var(--vlak-rgb)); background: #c0564b;
  border: 1.5px solid rgb(var(--vlak-rgb));
  pointer-events: auto; cursor: help;
}
.infra-knoop--wacht .infra-tegel { border-color: rgb(192 86 75 / .6); }
.infra-wachtstip--klus { background: var(--inkt-42); }

/* ---------------- agent maken ---------------- */

/* Het karakter zelf naast de velden: wat je kiest zie je meteen, op het echte
 * ding en niet op een vlakje dat erop lijkt. */
.infra-agentkop { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.infra-agentvoorbeeld { width: 112px; height: 112px; transition: filter var(--snel) ease; }
.infra-agentvoorbeeld gloei-karakter { width: 100%; height: 100%; display: block; }

.infra-rolkeuze { display: flex; gap: 4px; margin: 2px 0 2px; }
.infra-rol {
  flex: 1; font: inherit; font-size: .74rem; font-weight: 500;
  color: var(--inkt-60); background: var(--tint);
  border: 1px solid transparent; border-radius: 9px;
  padding: 7px 8px; cursor: pointer;
  transition: background var(--snel) ease, color var(--snel) ease, border-color var(--snel) ease;
}
.infra-rol:hover { color: var(--inkt); background: var(--tint-sterk); }
.infra-rol--aan { color: var(--beige); background: var(--inkt); }
.infra-rol--aan:hover { color: var(--beige); background: var(--inkt); }

.infra-kleurrij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.infra-kleurveld {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid var(--tint-sterk); border-radius: 50%; background: none;
}
.infra-kleurveld::-webkit-color-swatch-wrapper { padding: 3px; }
.infra-kleurveld::-webkit-color-swatch { border: none; border-radius: 50%; }
.infra-kleurveld::-moz-color-swatch { border: none; border-radius: 50%; }
.infra-staaltje {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 2px solid var(--beige); border-radius: 50%;
  box-shadow: 0 0 0 1px var(--tint-sterk);
  transition: transform var(--snel) ease;
}
.infra-staaltje:hover { transform: scale(1.15); }

.infra-fijn { margin: 0 0 10px; font-size: .72rem; }
.infra-fijn summary { cursor: pointer; color: var(--inkt-60); padding: 4px 0; }
.infra-regelaar {
  display: grid; grid-template-columns: 82px 1fr 44px; gap: 8px; align-items: center;
  padding: 3px 0; color: var(--inkt-60);
}
.infra-regelaar input[type="range"] { width: 100%; accent-color: var(--inkt); }
.infra-regelaar .infra-telling { text-align: right; }

/* De rol op de kaart. Een orchestrator draagt een dunne ring - hij staat
 * boven de rest, niet ernaast. Een sub-agent is kleiner: hij doet één stuk. */
.agentkaartje[data-rol="orchestrator"] .agentorb::after {
  content: ''; position: absolute; inset: 14%;
  border: 1.5px solid var(--inkt-42); border-radius: 50%;
  pointer-events: none;
}
.agentkaartje[data-rol="orchestrator"] .agentorb { position: relative; }
.agentkaartje[data-rol="sub"] .agentorb { transform: scale(.8); }

/* ---------------- weergave ---------------- */

.weergave { margin-top: 14px; }
.weergavekop {
  font-size: .74rem; font-weight: 600; text-transform: lowercase;
  color: var(--inkt-42); margin: 0 0 8px;
}
.weergaverooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.weergavetegel {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  font: inherit; font-size: .7rem; color: var(--inkt-80);
  background: none; border: 1px solid transparent; border-radius: 11px;
  padding: 4px; cursor: pointer; text-align: center;
  transition: border-color var(--snel) ease, background var(--snel) ease;
}
.weergavetegel:hover { background: var(--tint); }
.weergavetegel--aan { border-color: var(--inkt); }
/* Het voorbeeld is zelf het thema in het klein: vel, inkt en accent. */
.weergavevoorbeeld {
  height: 38px; border-radius: 8px;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px;
  padding: 6px;
  box-shadow: inset 0 0 0 1px rgb(var(--schaduw-rgb) / .12);
}
.weergavestip { width: 10px; height: 10px; border-radius: 50%; }
.weergavenaam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.weergavevelden { display: grid; gap: 6px; margin: 10px 0 4px; }
.weergaveveld {
  display: flex; align-items: center; gap: 10px;
  font-size: .76rem; color: var(--inkt-80); cursor: pointer;
}
.weergaveveld input[type="color"] {
  width: 30px; height: 30px; padding: 0; flex: none; cursor: pointer;
  border: 1px solid var(--tint-sterk); border-radius: 50%; background: none;
}
.weergaveveld input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.weergaveveld input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.weergaveveld input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.weergave .schakelaar { margin-top: 10px; }

/* Stippen op de kaart, zoals in een flow-editor. Ze schuiven en zoomen mee
 * met het vel (zie pasTransformToe in infra.js): een raster dat blijft staan
 * terwijl alles eroverheen beweegt, voelt als een sticker op het glas. */
:root[data-stippen="aan"] .agentkaart {
  background-image: radial-gradient(rgb(var(--inkt-rgb) / .16) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ---------------- beweging op de agentkaart ----------------
 *
 * Een nieuwe agent springt erin: van klein en wazig naar zijn plek, met een
 * klein doorschieten. Alleen wie er nieuw is; de rest blijft staan.
 */
.agentkaartje.erbij { animation: erbij var(--traag) var(--plof) backwards; }
@keyframes erbij {
  from { opacity: 0; transform: scale(.35); filter: blur(8px); }
  60% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: scale(1); filter: none; }
}
.agentvlak.infra-vrij .agentkaartje.erbij { animation: none; }

.kaartbalkknop--plus { color: var(--inkt); font-weight: 600; }

/* ---------------- het logo ----------------
 *
 * Het logo van Tougather als masker over `currentColor`: één bestand, en in
 * een donker thema wordt het vanzelf licht. Breedte volgt de hoogte.
 */
.merk {
  display: block; flex: none;
  height: 18px; aspect-ratio: 1460 / 257;
  background: currentColor;
  -webkit-mask: url(assets/logo.svg) center / contain no-repeat;
  mask: url(assets/logo.svg) center / contain no-repeat;
}
.lade-titel.merk { height: 16px; color: var(--inkt); }

/* ---------------- onboarding: gedeelde stukjes ----------------
 *
 * De onboarding zelf staat in onboarding.css en laadt pas als hij nodig is.
 * Hier alleen wat ook "add agent" (snelagent.js) gebruikt: de stip in de
 * kleur van een agent, een rij stippen en de ronde plus/min-knop.
 */
/* De stip: het blauw van het karakter, gedraaid met dezelfde hue-rotate als
   de agent zelf. Zo is de kleur hier precies die op de kaart. */
.ob-stip {
  flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #cfe2ff 0 14%, #5c8dff 42%, #1d3fb8 100%);
  box-shadow: 0 0 0 2px rgb(var(--vlak-rgb));
}
.ob-stippen { display: flex; margin-top: auto; padding-top: 6px; }
.ob-stippen .ob-stip { box-shadow: 0 0 0 2px var(--u-surface); }
.ob-stippen .ob-stip + .ob-stip { margin-left: -4px; }
.ob-rond {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  font: 400 22px/1 var(--u-sans); color: var(--u-ink);
  background: var(--u-surface); border: 0; cursor: pointer;
  box-shadow: 0 1px 2px rgb(var(--schaduw-rgb) / .06), 0 6px 18px -6px rgb(var(--schaduw-rgb) / .12);
  transition: transform var(--snel) ease, opacity var(--snel) ease;
}
.ob-rond:hover:not(:disabled) { transform: translateY(-1px); }
.ob-rond:active:not(:disabled) { transform: scale(.92); }
.ob-rond:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 3px; }
.ob-rond:disabled { opacity: .3; cursor: default; }

/* ---------------- snel een agent ---------------- */
.sa-scherm { position: absolute; inset: 0; z-index: 30; }
.sa {
  position: absolute; top: 62px; right: 18px; z-index: 31;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 90px); overflow: auto;
  background: rgb(var(--vlak-rgb));
  border: 1px solid var(--lijn); border-radius: 22px;
  padding: 16px 16px 14px;
  box-shadow: 0 24px 60px -24px rgb(var(--schaduw-rgb) / .35);
  transform-origin: top right;
  animation: sa-in var(--rustig) var(--veer) both;
}
.sa.sa-uit { animation: sa-uit var(--snel) var(--uit) both; }
@keyframes sa-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes sa-uit { to { opacity: 0; transform: translateY(-4px) scale(.97); } }
.sa-kop { display: flex; align-items: center; justify-content: space-between; }
.sa-kop strong { font-size: 1.05rem; }
.sa-kop svg { width: 20px; height: 20px; display: block; }
.sa-uitleg { margin: 10px 0 8px; font-size: .82rem; color: var(--inkt-60); }
.sa-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sa-rol {
  display: flex; align-items: center; gap: 10px;
  font: inherit; text-align: left; color: var(--inkt);
  background: var(--tint); border: 1px solid transparent; border-radius: 12px;
  padding: 9px 10px; cursor: pointer; min-width: 0;
  animation: ob-lid var(--rustig) ease both;
  transition: background var(--snel) ease, border-color var(--snel) ease, transform var(--snel) ease;
}
.sa-rol:hover { background: var(--tint-sterk); transform: translateY(-1px); }
.sa-rol:focus-visible { border-color: var(--inkt); outline: none; }
.sa-rol span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sa-rol strong { font-size: .86rem; }
.sa-rol small { font-size: .72rem; color: var(--inkt-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-rol.bezig, .sa-knop.bezig { opacity: .5; pointer-events: none; }
.sa-eigen { display: grid; grid-template-columns: 1fr; gap: 6px; }
.sa-veld {
  font: inherit; font-size: .9rem; color: var(--inkt);
  background: rgb(var(--vel-rgb) / .6);
  border: 1px solid var(--lijn); border-radius: 12px; padding: 9px 12px; outline: none;
}
.sa-veld:focus { border-color: var(--inkt); }
.sa-knop {
  justify-self: end; font: inherit; font-size: .86rem; font-weight: 600;
  background: var(--inkt); color: var(--beige); border: 0; border-radius: 999px;
  padding: 8px 18px; cursor: pointer;
}
.sa-fout:empty { display: none; }
.sa-fout { margin: 10px 0 0; font-size: .82rem; }

.instellingen-team { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.instellingen-team strong { font-size: .9rem; }
.instellingen-team p { margin: 4px 0 10px; font-size: .8rem; color: var(--inkt-60); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .sa, .sa-rol, .agentkaartje.erbij { animation: none !important; }
}

/* ---------------- agent aanpassen (rechtsklik) ---------------- */
.ab-scherm { position: fixed; inset: 0; z-index: 150; }
.ab {
  position: fixed; z-index: 151;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow: auto;
  background: rgb(var(--vlak-rgb));
  border: 1px solid var(--lijn); border-radius: 20px;
  padding: 14px 16px 14px;
  box-shadow: 0 24px 60px -24px rgb(var(--schaduw-rgb) / .38), 0 2px 6px rgb(var(--schaduw-rgb) / .06);
  animation: ab-in var(--rustig) var(--veer) both;
  transform-origin: top left;
}
.ab.ab-uit { animation: ab-uit var(--snel) var(--uit) both; }
.ab.bezig { opacity: .7; pointer-events: none; }
@keyframes ab-in { from { opacity: 0; transform: scale(.95) translateY(-4px); } }
@keyframes ab-uit { to { opacity: 0; transform: scale(.97); } }
.ab-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ab-kop strong { font-size: 1rem; }
.ab-stip { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 3px var(--tint-sterk); }
.ab-vorm { display: grid; gap: 10px; }
.ab-regel { display: grid; gap: 4px; }
.ab-regel > span { font-size: .74rem; font-weight: 600; color: var(--inkt-60); }
.ab-regel--kleur { grid-template-columns: 1fr auto; align-items: center; }
.ab-veld {
  font: inherit; font-size: .9rem; color: var(--inkt);
  background: rgb(var(--vel-rgb) / .6);
  border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; outline: none;
  width: 100%;
}
.ab-veld:focus { border-color: var(--inkt); }
.ab-lang { resize: vertical; min-height: 84px; line-height: 1.45; }
.ab-kleur { width: 44px; height: 30px; padding: 0; border: 1px solid var(--lijn); border-radius: 8px; background: none; cursor: pointer; }
.ab-rollen { display: flex; gap: 4px; background: var(--tint); padding: 3px; border-radius: 10px; }
.ab-rol {
  flex: 1; font: inherit; font-size: .8rem; color: var(--inkt-60);
  background: none; border: 0; border-radius: 8px; padding: 6px 4px; cursor: pointer;
  transition: background var(--snel) ease, color var(--snel) ease;
}
.ab-rol.gekozen { background: rgb(var(--vlak-rgb)); color: var(--inkt); box-shadow: 0 1px 3px rgb(var(--schaduw-rgb) / .12); }
.ab-fout:empty { display: none; }
.ab-fout { margin: 0; font-size: .82rem; }
.ab-voet { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ab-ruimte { flex: 1; }
.ab-knop {
  font: inherit; font-size: .84rem; font-weight: 600;
  border: 1px solid var(--lijn); background: none; color: var(--inkt);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.ab-primair { background: var(--inkt); color: var(--beige); border-color: var(--inkt); }
.ab-gevaar { color: var(--inkt-60); border-color: transparent; padding-inline: 8px; }
.ab-gevaar:hover:not(:disabled) { color: var(--inkt); text-decoration: underline; }
.ab-knop:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .ab { animation: none !important; } }

/* ---------------- dialoogblok (hernoemen, bevestigen) ----------------
 * In plaats van prompt() en confirm(): hetzelfde witte blok als de rest,
 * midden op het scherm boven alles.
 */
.dlg-scherm {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 16px;
  background: rgb(var(--schaduw-rgb) / .16);
  /* Geen backdrop-filter: een vervaging over het hele scherm moet elk beeld
     van het infaden opnieuw, en daarna elk beeld dat het karakter beweegt. */
  animation: dlg-scherm var(--snel) ease both;
}
.dlg-scherm.dlg-weg { animation: dlg-scherm-weg var(--snel) var(--uit) both; }
@keyframes dlg-scherm { from { opacity: 0; } }
@keyframes dlg-scherm-weg { to { opacity: 0; } }
.dlg {
  width: min(400px, 100%);
  display: grid; gap: 10px;
  background: rgb(var(--vlak-rgb));
  border: 1px solid var(--lijn); border-radius: 20px;
  padding: 20px 20px 16px;
  box-shadow: 0 30px 70px -28px rgb(var(--schaduw-rgb) / .45), 0 2px 6px rgb(var(--schaduw-rgb) / .08);
  animation: dlg-in var(--rustig) var(--veer) both;
}
.dlg-weg .dlg { animation: dlg-uit var(--snel) var(--uit) both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes dlg-uit { to { opacity: 0; transform: scale(.97); } }
.dlg-titel { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.dlg-uitleg { margin: -4px 0 0; font-size: .88rem; line-height: 1.5; color: var(--inkt-60); }
.dlg-lijst { margin: 0; padding: 0 0 0 18px; max-height: 40vh; overflow: auto; font-size: .86rem; line-height: 1.55; color: var(--inkt-80, currentColor); }
.dlg-veld {
  font: inherit; font-size: .95rem; color: var(--inkt);
  background: rgb(var(--vel-rgb));
  border: 1.5px solid var(--lijn-sterk); border-radius: 12px;
  padding: 10px 12px; outline: none; width: 100%;
  transition: border-color var(--snel) ease, box-shadow var(--snel) ease;
}
.dlg-veld:focus { border-color: var(--inkt); box-shadow: 0 0 0 3px var(--tint-sterk); }
.dlg-voet { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dlg-knop {
  font: inherit; font-size: .86rem; font-weight: 600;
  border: 1px solid var(--lijn-sterk); background: none; color: var(--inkt);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  transition: background var(--snel) ease, transform var(--snel) ease, opacity var(--snel) ease;
}
.dlg-knop:hover:not(:disabled) { background: var(--tint); }
.dlg-knop:active:not(:disabled) { transform: scale(.97); }
.dlg-primair { background: var(--inkt); color: rgb(var(--vel-rgb)); border-color: var(--inkt); }
.dlg-primair:hover:not(:disabled) { background: var(--inkt); opacity: .9; }
.dlg-gevaar { background: #c8372d; border-color: #c8372d; color: #fff; }
.dlg-gevaar:hover:not(:disabled) { background: #b12f26; opacity: 1; }
.dlg-knop:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .dlg-scherm, .dlg { animation: none !important; } }

/* Een lege lade: een blok met uitleg in plaats van een lege strook. */
.infra-ladeleeg { display: grid; justify-items: start; gap: 4px; padding: 12px 12px 10px; }
.infra-ladeleeg strong { font-size: .86rem; }
.infra-ladeleeg span { font-size: .78rem; line-height: 1.45; color: var(--inkt-60); }
.infra-ladeknop {
  margin-top: 6px; font: inherit; font-size: .78rem; font-weight: 600;
  background: var(--inkt); color: rgb(var(--vel-rgb)); border: 0; border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
}

/* ---------------- beweging: één taal voor de hele tool ----------------
 *
 * Drie tempo's en drie curves; docs/beweging.md heeft de regels en de
 * metingen, src/beweging.js dezelfde getallen voor JavaScript (een test houdt
 * ze gelijk). Alles wat verschijnt komt met de veer binnen (snel op gang,
 * rustig aankomen) en gaat met een korte ease-in weg: weggaan is sneller dan
 * komen, anders voelt de tool traag. Wat erbij komt en even mag doorschieten
 * (een agent, een kaartje) plooft. Niets in de interface duurt langer dan
 * --traag; alleen de karakters en wat blijft lopen (een spinner, een puls)
 * hebben hun eigen tempo.
 *
 * Alleen transform en opacity bewegen. Nooit width, height, top of left: dat
 * is elk beeld de hele pagina opnieuw opmaken (apps/server/test/beweging.test.js).
 */
:root {
  --veer: cubic-bezier(.2, .9, .25, 1);   /* binnenkomen: de standaard ease-out */
  --uit: cubic-bezier(.4, 0, 1, 1);       /* weggaan: kort en versnellend */
  --plof: cubic-bezier(.34, 1.56, .64, 1); /* erbij komen, met een zweem doorschieten */
  --snel: 160ms;    /* knoppen, hover, alles wat weggaat */
  --rustig: 280ms;  /* panelen, vellen en dialogen die binnenkomen */
  --traag: 380ms;   /* hele vlakken: in- en uitzoomen naar de kaart, een onthulling */
}

/* Knoppen reageren direct op een druk, overal hetzelfde. */
button { -webkit-tap-highlight-color: transparent; }
.menuknop, .kaartknop, .icoonknop, .kaartbalkknop, .nieuwknop, .dlg-knop, .ab-knop, .ob-knop, .sa-rol, .sa-knop {
  transition: background var(--snel) ease, color var(--snel) ease, border-color var(--snel) ease, transform var(--snel) var(--veer), opacity var(--snel) ease;
}
.menuknop:active, .kaartknop:active, .icoonknop:active, .kaartbalkknop:active, .nieuwknop:active { transform: scale(.92); }

/* De knoppen op de kaart: iconen, met een label als tooltip. */
.kaartbalkknop--icoon {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: 13px;
  color: var(--inkt-80);
  background: rgb(var(--vel-rgb) / .86);
  border: 1px solid var(--lijn);
  box-shadow: 0 1px 2px rgb(var(--schaduw-rgb) / .06);
}
.kaartbalkknop--icoon svg { width: 20px; height: 20px; }
.kaartbalkknop--icoon:hover { color: var(--inkt); background: rgb(var(--vel-rgb)); border-color: var(--lijn-sterk); }
.kaartbalkknop--plus { color: rgb(var(--vel-rgb)); background: var(--inkt); border-color: var(--inkt); }
.kaartbalkknop--plus:hover { color: rgb(var(--vel-rgb)); background: var(--inkt); opacity: .88; }
.kaartbalk { gap: 6px; }
@media (max-width: 760px) {
  .kaartbalkknop--icoon { width: 38px; height: 38px; padding: 0; }
}

/* Tooltip: een klein blok onder de knop, na een korte pauze. */
/* :where() weegt niets: een knop die al fixed of absolute staat (de agentknop
   rechtsboven, de menuknop) houdt zijn eigen positie. */
:where([data-tip]) { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, -3px);
  padding: 5px 9px; border-radius: 8px;
  background: var(--inkt); color: rgb(var(--vel-rgb));
  font: 500 .72rem/1.2 var(--sans); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--snel) ease, transform var(--snel) var(--veer);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1; transform: translate(-50%, 0);
  transition-delay: 350ms;
}
/* Links en rechts aan de rand: de tooltip naar binnen laten wijzen. */
.menuknop[data-tip]::after { left: 0; transform: translate(0, -3px); }
.menuknop[data-tip]:hover::after, .menuknop[data-tip]:focus-visible::after { transform: translate(0, 0); }
.kaartknop[data-tip]::after, #instelknop[data-tip]::after { left: auto; right: 0; transform: translate(0, -3px); }
.kaartknop[data-tip]:hover::after, #instelknop[data-tip]:hover::after, .kaartknop[data-tip]:focus-visible::after, #instelknop[data-tip]:focus-visible::after { transform: translate(0, 0); }
@media (hover: none) { [data-tip]::after { display: none; } }

/* Het zijmenu: schuift erin en ook weer weg; de schaduw erachter vloeit mee. */
.lade { animation: schuif-in var(--rustig) var(--veer) both; }
.lade.weg { animation: schuif-uit var(--snel) var(--uit) both; }
@keyframes schuif-uit { to { transform: translateX(-104%); } }
.overlay { animation: vervaag-in var(--rustig) ease both; }
.overlay.weg { animation: vervaag-uit var(--snel) var(--uit) both; }
@keyframes vervaag-in { from { opacity: 0; } }
@keyframes vervaag-uit { to { opacity: 0; } }

/* Instellingen: groeien uit hun knop. Die staat sinds Needs you op de kaart
 * op zijn plek blijft (.kaartbalk: rand + 100px) zo'n 125 pixels van de
 * rechterrand van het paneel, niet in de hoek. */
.instellingen { transform-origin: calc(100% - 125px) top; animation: paneel-in var(--rustig) var(--veer) both; }
.instellingen.weg { animation: paneel-uit var(--snel) var(--uit) both; }
@keyframes paneel-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes paneel-uit { to { opacity: 0; transform: translateY(-4px) scale(.97); } }

/* De infrastructuurlaag: de balk komt omhoog, de draden vloeien in. */
.infralaag:not([hidden]) .infra-balk { animation: balk-op var(--rustig) var(--veer) both; }
.infralaag:not([hidden]) .infra-doek { animation: vervaag-in var(--traag) ease both; }
@keyframes balk-op { from { opacity: 0; transform: translateY(14px); } }

/* Wat boven de kaart opengaat (rechtsklikmenu, lades, de bibliotheek, het
 * formulier, de kijker, de melding) komt net zo binnen als de panelen elders,
 * in plaats van ineens te staan. Met `translate`/`scale` als losse
 * eigenschappen: die tellen op bij de translateX(-50%) die ze centreert. */
.infra-menu, .infra-lade, .infra-formulier, .infra-kijker, .infra-status {
  animation: zweef-in var(--rustig) var(--veer) both;
}
.infra-menu { transform-origin: top left; }
.infra-status.infra-weg, .infra-lade.infra-weg { animation: zweef-uit var(--snel) var(--uit) both; pointer-events: none; }
@keyframes zweef-in { from { opacity: 0; translate: 0 8px; scale: .98; } }
@keyframes zweef-uit { to { opacity: 0; translate: 0 4px; } }

/* Het werkvlak komt bij het laden zacht op in plaats van in één klap. */
.werkvlak { animation: vervaag-in var(--traag) ease backwards; }

@media (prefers-reduced-motion: reduce) {
  .lade, .overlay, .instellingen, .werkvlak, .infra-balk, .infra-doek { animation: none !important; }
  [data-tip]::after { transition: none; }
}

/* Minder beweging, overal: ook voor panelen die later laden (planner.css,
 * nodig.css, ...) en wat er nog bijkomt. Dingen verschijnen en verdwijnen
 * meteen; een draaiend rondje blijft als stil rondje staan. Het karakter
 * regelt dit zelf (vendor/gloei-karakter.js). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Minder beweging is niet géén beweging: wat binnenkomt of weggaat
     vervaagt kort (--snel), zonder te schuiven, te groeien of door te
     schieten. Anders springt een paneel er in één beeld, en verlies je waar
     het vandaan kwam. `:root` ervoor weegt zwaarder dan de losse
     `animation: none` per paneel (planner.css, nodig.css, …). De kaart doet
     hetzelfde met een kruisfade (agents.js). docs/beweging.md. */
  :root :is(.dlg-scherm, .dlg, .instellingen, .lade, .overlay, .sa, .ab, .wb, .pl, .pl-vel, .pl-velscherm,
    .nd, .nd-scherm, .infra-menu, .infra-lade, .infra-formulier, .infra-kijker, .infra-status,
    .ob, .ob-kaart, .au, .au-kaart, .bericht) {
    animation: rustig-in var(--snel) ease both !important;
  }
  :root :is(.dlg-weg .dlg, .dlg-scherm.dlg-weg, .instellingen.weg, .lade.weg, .overlay.weg, .sa.sa-uit, .ab.ab-uit,
    .wb.wb-uit, .pl.pl-uit, .pl-vel.pl-vel-uit, .nd.weg, .nd-scherm.weg, .infra-status.infra-weg, .infra-lade.infra-weg,
    .ob.ob-weg) {
    animation: rustig-uit var(--snel) ease both !important;
  }
  @keyframes rustig-in { from { opacity: 0; } }
  @keyframes rustig-uit { to { opacity: 0; } }
}

/* Van agent wisselen: de kleur van het karakter vloeit over in plaats van te springen. */
#karakter { transition: filter 480ms ease; }
/* Staat het paneel van een knop al open, dan is de tooltip overbodig. */
[aria-expanded="true"][data-tip]::after, [aria-pressed="true"][data-tip]::after { display: none; }

/* ---------------- routeregel: welk model "auto" koos ----------------
 * Eén stille regel boven het antwoord, in de stijl van de uitvoer (--u-*).
 * Klik erop en het tabelletje met kandidaten, stappen en kosten klapt open.
 * Geen tabular-nums: Mona Sans heeft dan een doorgestreepte nul.
 */
.route { margin: 0 0 6px; font-family: var(--u-sans); font-size: 12px; line-height: 1.45; color: var(--u-tag); }
.route summary {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  padding: 1px 0; cursor: pointer; list-style: none;
  border-radius: 6px;
}
.route summary::-webkit-details-marker { display: none; }
.route summary:hover .route-regel, .route[open] .route-regel { color: var(--u-ink-2); }
.route summary:focus-visible { outline: 2px solid var(--u-line-2); outline-offset: 2px; }
.route-regel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--snel) ease; }
.route[open] .route-regel { white-space: normal; }
.route-kosten { flex-shrink: 0; color: var(--u-ink-2); }
.route-kosten::before { content: '·'; margin-right: 6px; color: var(--u-tag); }
.route-lijf {
  display: grid; gap: 10px;
  margin: 6px 0 10px; padding: 10px 12px;
  background: var(--u-panel); border-radius: 14px;
}
.route-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--u-ink); }
.route-tabel caption { caption-side: top; text-align: left; padding: 0 0 4px; font-size: 12px; color: var(--u-tag); }
.route-tabel th, .route-tabel td { padding: 5px 0; text-align: left; font-weight: 400; border-top: 1px solid var(--u-line); vertical-align: baseline; }
.route-tabel thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 500; color: var(--u-tag); }
.route-tabel tfoot th, .route-tabel tfoot td { font-weight: 500; border-top-color: var(--u-line-2); }
.route-tabel .getal { text-align: right; padding-left: 12px; white-space: nowrap; }
.route-gekozen td { font-weight: 600; }
.route-aanbieder { font-weight: 400; color: var(--u-tag); }
.route-mislukt { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--u-ink-2); }
.route-mislukt li + li { margin-top: 3px; }
.route-mislukt span { color: var(--u-ink); overflow-wrap: anywhere; }
.route-noot { margin: 0; font-size: 12px; color: var(--u-tag); }
/* Een collega (vraag_agent): kort in de kop van zijn kaart, uitgebreid erin. */
.route--klein { margin: 0 0 8px; }
.route--klein .route-lijf { background: rgb(var(--vel-rgb) / .75); }
.tool-model {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--inkt-60);
}
.tool-model:empty { display: none; }

/* ---------------- model kiezen (instellingen) ---------------- */
.modelkeuze { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.modelkeuze:empty { display: none; }
.mk-auto {
  padding: 10px 12px 12px;
  border: 1px solid var(--lijn); border-radius: 14px;
  transition: border-color var(--snel) ease;
}
.mk-auto--aan { border-color: var(--inkt); }
.mk-autokop {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; width: 100%;
  padding: 0; font: inherit; font-size: .86rem; font-weight: 600; text-align: left;
  color: var(--inkt); background: none; border: 0; cursor: pointer;
}
.mk-autokop:disabled { cursor: not-allowed; }
.mk-naam { min-width: 0; }
.mk-badge {
  font-size: .68rem; font-weight: 500; color: var(--inkt-60);
  background: var(--tint-sterk); border-radius: 999px; padding: 2px 8px;
}
.mk-uitleg { margin: 4px 0 10px; font-size: .76rem; line-height: 1.45; color: var(--inkt-60); }
.mk-standen { display: flex; gap: 4px; padding: 3px; background: var(--tint); border-radius: 10px; }
.mk-stand {
  flex: 1; min-width: 0;
  font: inherit; font-size: .76rem; line-height: 1.2; color: var(--inkt-60);
  background: none; border: 0; border-radius: 8px; padding: 6px 4px; cursor: pointer;
  transition: background var(--snel) ease, color var(--snel) ease;
}
.mk-stand:hover:not(:disabled) { color: var(--inkt); }
.mk-stand--aan { background: rgb(var(--vlak-rgb)); color: var(--inkt); box-shadow: 0 1px 3px rgb(var(--schaduw-rgb) / .14); }
:root[data-donker="ja"] .mk-stand--aan { background: var(--tint-sterk); box-shadow: none; }
.mk-stand:disabled { cursor: not-allowed; }
.mk-standuitleg { margin: 7px 2px 0; font-size: .74rem; line-height: 1.4; color: var(--inkt-60); }
/* Uit: alleen de knoppen gedimd. De uitleg blijft leesbaar, want die zegt waarom. */
.mk-auto--uit .mk-naam, .mk-auto--uit .mk-standen { opacity: .5; }
.mk-let { margin: 8px 0 0; font-size: .76rem; line-height: 1.4; font-weight: 500; color: var(--inkt); }
.mk-zelf { margin-top: 8px; }
.mk-zelf summary {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; font-size: .8rem; color: var(--inkt-60); cursor: pointer; list-style: none;
}
.mk-zelf summary::-webkit-details-marker { display: none; }
.mk-zelf summary::before {
  content: ''; width: 6px; height: 6px; margin: 0 2px 2px 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--snel) ease;
}
.mk-zelf[open] summary::before { transform: rotate(45deg); margin-bottom: 4px; }
.mk-zelf summary:hover { color: var(--inkt); }
.mk-select, select.ab-veld {
  width: 100%; font: inherit; font-size: .86rem; color: var(--inkt);
  background: rgb(var(--vel-rgb) / .6); border: 1px solid var(--lijn); border-radius: 10px;
  padding: 8px 10px; outline: none; cursor: pointer;
}
.mk-select:focus, select.ab-veld:focus { border-color: var(--inkt); }
:root[data-donker="ja"] .mk-select, :root[data-donker="ja"] .ab-veld { color-scheme: dark; }
.mk-select option, .mk-select optgroup, select.ab-veld option, select.ab-veld optgroup { color: var(--inkt); background: rgb(var(--vlak-rgb)); }
.mk-noot { margin: 6px 2px 0; font-size: .74rem; line-height: 1.4; color: var(--inkt-60); }
.mk-select:disabled { cursor: not-allowed; opacity: .6; }
.mk-anders { margin-top: 10px; }
.mk-anders summary { font-size: .76rem; color: var(--inkt-60); cursor: pointer; padding: 4px 0; }
.mk-anders summary:hover { color: var(--inkt); }
.mk-anderslijst { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.mk-anderslijst li { display: flex; justify-content: space-between; gap: 8px; font-size: .76rem; color: var(--inkt-60); padding: 3px 2px; }
.mk-anderslijst small { font-size: .72rem; }

/* ---------------- modelbeleid in de agentbewerker ---------------- */
.ab-model { border-top: 1px solid var(--lijn); padding-top: 8px; }
.ab-model summary {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; color: var(--inkt-60);
  cursor: pointer; list-style: none; padding: 2px 0;
}
.ab-model summary::-webkit-details-marker { display: none; }
.ab-model summary::before {
  content: ''; width: 6px; height: 6px; margin: 0 1px 2px 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--snel) ease;
}
.ab-model[open] summary::before { transform: rotate(45deg); margin-bottom: 4px; }
.ab-model summary:hover { color: var(--inkt); }
.ab-model-staat { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--inkt-42); }
.ab-model-lijf { display: grid; gap: 10px; padding-top: 10px; }
.ab-hint { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--inkt-60); }
/* De regels die voor een agent gelden (docs/regels.md): alleen lezen. */
.ab-regellijst { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; font-size: .8rem; line-height: 1.4; color: var(--inkt); }
.ab-regellijst small { color: var(--inkt-60); }
.ab-twee { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ab-tot { font-size: .78rem; color: var(--inkt-60); }
.route[open] summary { display: block; }
.route[open] .route-kosten { margin-left: 6px; }

/* ---------------- geheugen: herinneren, vermelden, werkboek ---------------- */

/* Wat de agent erbij pakte: een stille regel boven het antwoord, zoals de routeregel. */
.herinnering { margin: 0 0 8px; font-family: var(--u-sans); font-size: 12px; line-height: 1.45; color: var(--u-tag); }
.hr summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; padding: 1px 0; }
.hr summary::-webkit-details-marker { display: none; }
.hr summary::before {
  content: ''; width: 5px; height: 5px; margin: 0 1px 2px 0;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--snel) ease;
}
.hr[open] summary::before { transform: rotate(45deg); margin-bottom: 4px; }
.hr summary:hover, .hr[open] summary { color: var(--u-ink-2); }
.hr--los { margin: 0; }
.hr-lijf { margin: 6px 0 4px; padding: 6px; background: var(--u-panel); border-radius: 14px; }
.hr-kop { margin: 8px 8px 2px; font-size: 12px; color: var(--u-tag); }
.hr-lijst { margin: 0; padding: 0; list-style: none; }
.hr-gesprek {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  padding: 6px 8px; font: inherit; font-size: 13px; text-align: left;
  color: var(--u-ink); background: none; border: 0; border-radius: 9px; cursor: pointer;
}
.hr-gesprek:hover { background: var(--u-wassing); }
.hr-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-meta { flex-shrink: 0; font-size: 12px; color: var(--u-tag); }
.hr-notities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hr-chip {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  padding: 3px 10px; font-size: 12px; color: var(--u-ink-2);
  background: var(--u-panel); border-radius: 999px;
}
.hr-chip-kop { flex-shrink: 0; font-weight: 500; color: var(--u-tag); }
.hr-chip-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Onder het antwoord: duimen en wat hij leerde. */
.antwoordvoet { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 0; font-family: var(--u-sans); }
.oordeel { display: flex; gap: 2px; }
.oordeel { align-items: center; }
.oordeel-dank { margin-left: 6px; font-size: .74rem; color: var(--inkt-60); animation: ob-lid var(--rustig) ease both; }
.oordeel-knop {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  color: var(--u-tag); background: none; border: 0; border-radius: 8px; cursor: pointer;
  opacity: .7; transition: opacity var(--snel) ease, background var(--snel) ease, color var(--snel) ease;
}
.oordeel-knop svg { width: 16px; height: 16px; }
.bericht-assistent:hover .oordeel-knop, .oordeel-knop:focus-visible { opacity: 1; }
.oordeel-knop:hover { background: var(--u-wassing); color: var(--u-ink); }
.oordeel[data-gekozen] .oordeel-knop { cursor: default; }
.oordeel[data-gekozen] .oordeel-knop[aria-pressed="false"] { display: none; }
.oordeel-knop[aria-pressed="true"] { opacity: 1; color: var(--u-ink); background: var(--u-wassing); }
/* De eerste knop staat tegen de linkerrand van het antwoord: zijn tooltip naar rechts, niet het venster uit. */
.oordeel-knop:first-child[data-tip]::after { left: 0; transform: translate(0, 3px); }
.oordeel-knop:first-child[data-tip]:hover::after, .oordeel-knop:first-child[data-tip]:focus-visible::after { transform: translate(0, 0); }
.oordeel-knop[data-tip]::after, .vermeldknop[data-tip]::after { top: auto; bottom: calc(100% + 8px); transform: translate(-50%, 3px); }
.oordeel-knop[data-tip]:hover::after, .vermeldknop[data-tip]:hover::after { transform: translate(-50%, 0); }
@media (hover: none) { .oordeel-knop { opacity: 1; } }
.geleerd {
  padding: 2px 0; font: inherit; font-size: 12px; color: var(--u-tag);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--u-line-2); text-underline-offset: 3px;
}
button.geleerd:hover { color: var(--u-ink); }
p.geleerd { margin: 0; text-decoration: none; cursor: default; }

/* Vermelden: de kiezer boven de invoer, en de chips erin. */
.kaart { position: relative; }
.vm {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30;
  max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn); border-radius: 18px;
  box-shadow: 0 24px 60px -24px rgb(var(--schaduw-rgb) / .38), 0 2px 6px rgb(var(--schaduw-rgb) / .06);
  animation: opkomen var(--snel) ease both;
}
.vm-kop { margin: 4px 8px 6px; font-size: .74rem; font-weight: 600; color: var(--inkt-42); text-transform: lowercase; }
.vm-lijst { display: grid; gap: 2px; }
.vm-optie {
  display: grid; gap: 1px; width: 100%; padding: 7px 10px;
  font: inherit; text-align: left; color: var(--inkt);
  background: none; border: 0; border-radius: 11px; cursor: pointer;
}
.vm-optie:hover, .vm-optie--actief { background: var(--tint-sterk); }
.vm-titel { font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-meta { font-size: .74rem; color: var(--inkt-60); }
.vm-fragment { font-size: .76rem; color: var(--inkt-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-leeg { margin: 6px 10px 8px; font-size: .82rem; color: var(--inkt-60); }
.vermeldknop svg { width: 20px; height: 20px; }
.vermeld-in-bericht, .vermeld-chip { font-family: var(--sans); }
.vermeld-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.vermeld-label { font-size: 12px; color: var(--inkt-42); margin-right: 2px; }
.vermeld-chip { margin: 0; border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.vermeld-chip:hover { background: var(--tint-sterk); color: var(--inkt); }
@media (max-width: 420px) { .kaartrij .vermeldknop { width: 34px; } }

/* Het werkboek: een eigen paneel midden op het scherm, onderaan op een telefoon. */
.ab-kop .ab-werkboek {
  margin-left: auto; font: inherit; font-size: .78rem; font-weight: 600; color: var(--inkt-60);
  background: var(--tint); border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer;
}
.ab-kop .ab-werkboek:hover { background: var(--tint-sterk); color: var(--inkt); }
.wb-scherm { position: fixed; inset: 0; z-index: 160; background: rgb(var(--schaduw-rgb) / .12); }
.wb {
  position: fixed; z-index: 161; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px)); max-height: min(720px, calc(100dvh - 24px)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 12px; align-content: start;
  padding: 16px 18px 16px;
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn); border-radius: 22px;
  box-shadow: 0 30px 70px -28px rgb(var(--schaduw-rgb) / .45), 0 2px 6px rgb(var(--schaduw-rgb) / .08);
  animation: wb-in var(--rustig) var(--veer) both;
}
.wb.wb-uit { animation: wb-uit var(--snel) var(--uit) both; }
.wb.bezig { opacity: .75; pointer-events: none; }
@keyframes wb-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }
@keyframes wb-uit { to { opacity: 0; transform: translate(-50%, -50%) scale(.98); } }
.wb-kop { display: flex; align-items: center; gap: 10px; margin-right: -6px; }
.wb-kop strong { font-size: 1rem; }
.wb-naam { font-size: .9rem; color: var(--inkt-60); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-sluit { margin-left: auto; }
.wb-sluit[data-tip]::after { left: auto; right: 0; transform: translate(0, -3px); }
.wb-sluit[data-tip]:hover::after, .wb-sluit[data-tip]:focus-visible::after { transform: translate(0, 0); }
.wb-intro { margin: -4px 0 0; font-size: .84rem; line-height: 1.5; color: var(--inkt-60); }
.wb-schakelaars { display: grid; gap: 6px; }
.wb-schakelaar { width: 100%; text-align: left; padding: 9px 13px; }
.wb-schakel-tekst { display: grid; gap: 1px; min-width: 0; }
.wb-schakel-tekst small { font-size: .74rem; font-weight: 400; color: var(--inkt-60); }
.wb-lijstkop { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.wb-lijstkop > span:first-child { font-size: .74rem; font-weight: 600; color: var(--inkt-42); }
.wb-telling { font-size: .74rem; color: var(--inkt-42); }
.wb-nieuw { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.wb-soortkeuze { width: auto; }
.wb-notities { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.wb-notitie {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px;
  padding: 10px 8px 10px 12px; background: var(--tint); border-radius: 14px;
}
.wb-notitie--eigen { box-shadow: inset 3px 0 0 var(--inkt); }
.wb-tekst { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--inkt); overflow-wrap: anywhere; }
.wb-meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .74rem; color: var(--inkt-60); }
.wb-soort { padding: 1px 8px; border-radius: 999px; background: rgb(var(--vlak-rgb)); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--inkt-80); }
.wb-bron { padding: 0; font: inherit; color: var(--inkt-80); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lijn-sterk); text-underline-offset: 2px; }
.wb-bron:hover { color: var(--inkt); }
.wb-acties { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: flex-start; gap: 0; }
.wb-klein { width: 30px; height: 30px; border-radius: 9px; }
.wb-klein svg { width: 17px; height: 17px; }
.wb-leeg { margin: 0; padding: 14px 4px; font-size: .84rem; color: var(--inkt-60); text-align: center; }
.wb-fout:empty { display: none; }
.wb-fout { margin: 0; font-size: .82rem; color: var(--inkt); }
.wb-voet { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.wb-index { font-size: .76rem; color: var(--inkt-60); }
@media (max-width: 560px) {
  .wb { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none; max-height: calc(100dvh - 24px); }
  @keyframes wb-in { from { opacity: 0; transform: translateY(12px); } }
  .wb.wb-uit { animation: none; }
  .wb-nieuw { grid-template-columns: 1fr auto; }
  .wb-nieuw .ab-veld:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .wb, .vm { animation: none !important; } }

/* ---------------- privacy (instellingen, bij het model) ---------------- */
.mk-privacy { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.mk-privacy .schakelaar { font-size: .8rem; padding: 9px 12px; text-align: left; }
.mk-privacy .mk-noot { margin: 2px 4px 8px; }

/* ---------------- dagbegroting (instellingen) ----------------
 *
 * Geen vierde kleur: de balk is babyblauw zolang er ruimte is, wordt inkt
 * met halve dekking bij de waarschuwing en volle inkt op de limiet - met een
 * inktstreep ernaast, zoals een melding. Zie public/app/src/budget.js.
 */
.budget { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lijn); }
.budget:empty { display: none; }
.bg { display: flex; flex-direction: column; gap: 8px; }
.bg .weergavekop { margin-bottom: 0; }
.bg .schakelaar { font-size: .8rem; padding: 9px 12px; }
.bg-klein { color: var(--inkt-60); }

.bg-vandaag { padding: 10px 12px 11px; border: 1px solid var(--lijn); border-radius: 14px; transition: border-color var(--snel) ease, box-shadow var(--snel) ease; }
.bg-vandaag--op { border-color: var(--inkt); box-shadow: inset 3px 0 0 var(--inkt); }
.bg-bedragen { display: flex; align-items: baseline; gap: 6px; }
.bg-besteed { font-size: 1.25rem; font-weight: 600; color: var(--inkt); letter-spacing: -.01em; }
.bg-van { font-size: .78rem; color: var(--inkt-60); }
.bg-balk { position: relative; height: 8px; margin: 8px 0 7px; background: var(--tint-sterk); border-radius: 999px; overflow: hidden; }
.bg-vulling { position: absolute; inset: 0 auto 0 0; background: var(--baby); border-radius: inherit; transition: background var(--snel) ease; }
.bg-vandaag--bijna .bg-vulling { background: rgb(var(--inkt-rgb) / .55); }
.bg-vandaag--op .bg-vulling { background: var(--inkt); }
.bg-streep { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgb(var(--vlak-rgb)); }
.bg-regel { margin: 0; font-size: .74rem; line-height: 1.4; color: var(--inkt-60); }
.bg-vandaag--op .bg-regel { color: var(--inkt); font-weight: 500; }
.bg-geschat { color: var(--inkt-42); }

.bg-geschiedenis { padding: 2px 2px 0; }
.bg-geschiedeniskop { display: flex; justify-content: space-between; font-size: .7rem; color: var(--inkt-42); margin-bottom: 5px; }
.bg-staven { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.bg-staaf { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.bg-staaf > span { display: block; width: 100%; border-radius: 2px 2px 1px 1px; background: rgb(var(--inkt-rgb) / .2); }
.bg-staaf--vandaag > span { background: var(--baby); }
.bg-staaf--over > span { background: var(--inkt); }
.bg-staaf:hover > span { background: var(--inkt-60); }
.bg-limietlijn { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--lijn-sterk); pointer-events: none; }

.bg-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bg-velden:has(.bg-veld--breed) { grid-template-columns: 1fr; }
.bg-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bg-label { margin: 0; font-size: .72rem; font-weight: 500; color: var(--inkt-60); }
.bg-vak {
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px; border: 1px solid var(--lijn); border-radius: 10px;
  background: rgb(var(--vel-rgb) / .6); transition: border-color var(--snel) ease;
}
.bg-vak:focus-within { border-color: var(--inkt); }
.bg-eenheid { font-size: .82rem; color: var(--inkt-42); }
.bg-invoer {
  flex: 1; min-width: 0; width: 100%; padding: 8px 0;
  font: inherit; font-size: .86rem; color: var(--inkt);
  background: none; border: 0; outline: none; -moz-appearance: textfield; appearance: textfield;
}
.bg-invoer::-webkit-outer-spin-button, .bg-invoer::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bg-invoer::placeholder { color: var(--inkt-42); }
:root[data-donker="ja"] .bg-invoer { color-scheme: dark; }
.bg .mk-standuitleg { margin-top: -2px; }

.bg-agents summary {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; font-size: .8rem; color: var(--inkt-60); cursor: pointer; list-style: none;
}
.bg-agents summary::-webkit-details-marker { display: none; }
.bg-agents summary::before {
  content: ''; width: 6px; height: 6px; margin: 0 2px 2px 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--snel) ease;
}
.bg-agents[open] summary::before { transform: rotate(45deg); margin-bottom: 4px; }
.bg-agents summary:hover { color: var(--inkt); }
.bg-noot { margin: 2px 2px 8px; font-size: .74rem; line-height: 1.4; color: var(--inkt-60); }
.bg-agent { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; align-items: center; gap: 8px; padding: 3px 0; }
.bg-agentnaam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--inkt); }
.bg-agentbesteed { font-size: .74rem; color: var(--inkt-60); }
.bg-agent--op .bg-agentbesteed { color: var(--inkt); font-weight: 600; }
.bg-agent .bg-veld .bg-label { display: none; }
.bg-agent .bg-invoer { padding: 6px 0; font-size: .8rem; }
.bg-fout { margin: 0; padding: 8px 10px; font-size: .78rem; line-height: 1.4; font-weight: 500; color: var(--inkt); background: var(--tint); border-radius: 10px; box-shadow: inset 3px 0 0 var(--inkt); }

/* In het gesprek: een stille regel voor de waarschuwing en de overstap. */
.melding.budgetmelding { font-size: 13px; color: var(--inkt-80); box-shadow: inset 3px 0 0 var(--inkt-42); }
.melding.budgetmelding.budget-op { color: var(--inkt); font-weight: 500; box-shadow: inset 3px 0 0 var(--inkt); }
/* Regels (docs/regels.md): de tweede poging als stille regel, het eerste antwoord zacht, en de waarschuwing in inkt. */
.regelopnieuw { margin: 8px 0; font-size: 12.5px; color: var(--inkt-60); }
.prose-vervangen { opacity: .55; }
.regelbadge {
  display: inline-block; margin: 8px 0 2px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; color: var(--inkt); background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--inkt);
}
.regelbadge strong { font-weight: 600; }

/* ---------------- uiterlijk: kleur, looks en accessoires (src/uiterlijk.js) ---------------- */
.ab-stip--klein { width: 12px; height: 12px; margin-left: auto; box-shadow: 0 0 0 2px var(--tint-sterk); }
.ab-uiterlijk .uk { padding-top: 10px; }
.uk { display: grid; gap: 8px; }
.uk-kop { display: flex; align-items: center; gap: 12px; }
.uk-orb {
  flex: none; width: 112px; height: 112px; margin: -6px 0 -6px -8px; border-radius: 50%;
  display: grid; place-items: center;
  /* De gloed loopt zacht uit in het vlak, ook in de donkere thema's: geen vierkante rand. */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 72%, transparent);
  mask-image: radial-gradient(circle closest-side, #000 72%, transparent);
}
.uk-orb gloei-karakter { position: relative; inset: auto; width: 100%; height: 100%; aspect-ratio: auto; opacity: 1; z-index: auto; }
.uk-uitleg { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--inkt-60); }
.uk-label { font-size: .7rem; font-weight: 600; color: var(--inkt-60); margin-top: 2px; }
.uk-staaltjes { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.uk-staal, .uk-eigen {
  width: 100%; height: auto; aspect-ratio: 1; min-width: 18px; padding: 0; margin: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--staal);
  box-shadow: inset 0 0 0 1px rgb(var(--inkt-rgb) / .14);
  transition: transform var(--snel) ease, box-shadow var(--snel) ease;
}
.uk-staal:hover { transform: scale(1.12); }
.uk-staal[aria-pressed="true"] { box-shadow: 0 0 0 2px rgb(var(--vlak-rgb)), 0 0 0 3.5px var(--inkt); }
.uk-staal:focus-visible, .uk-pil:focus-visible, .uk-eigen:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.uk-eigen { background: conic-gradient(#e03131, #f08c00, #ffd43b, #2f9e44, #1971c2, #9c36b5, #e03131); }
.uk-eigen::-webkit-color-swatch-wrapper { padding: 3px; }
.uk-eigen::-webkit-color-swatch { border: none; border-radius: 50%; }
.uk-eigen::-moz-color-swatch { border: none; border-radius: 50%; }
.uk-pillen { display: flex; flex-wrap: wrap; gap: 5px; }
.uk-pil {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: .78rem; color: var(--inkt-60);
  background: none; border: 1px solid var(--lijn); border-radius: 999px;
  padding: 5px 10px; cursor: pointer;
  transition: background var(--snel) ease, color var(--snel) ease, border-color var(--snel) ease;
}
.uk-pil:hover { color: var(--inkt); border-color: var(--tint-sterk); }
.uk-pil[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: rgb(var(--vlak-rgb)); }
.uk-stip { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(var(--inkt-rgb) / .12); }
.uk-blend { display: flex; align-items: center; gap: 6px; }
.uk-blend[hidden] { display: none; }
.uk-blend .uk-eigen { width: 30px; flex: none; }
.uk-klein {
  font: inherit; font-size: .74rem; color: var(--inkt-60); background: none;
  border: 0; padding: 4px 6px; cursor: pointer; border-radius: 6px;
}
.uk-klein:hover, .uk-herstel:hover { color: var(--inkt); text-decoration: underline; }
.uk-herstel {
  justify-self: start; font: inherit; font-size: .74rem; color: var(--inkt-60);
  background: none; border: 0; padding: 2px 0; cursor: pointer;
}
.uk-herstel[hidden] { display: none; }
@media (max-width: 420px) {
  .uk-staaltjes { grid-template-columns: repeat(8, 1fr); gap: 6px; }
}

/* ---------------- naamkaart: wie is dit? (src/naamkaart.js) ---------------- */
/* De rol klein onder de eigen naam, op de agentkaart. */
.agentrol {
  margin-top: 1px;
  font-size: .7rem; font-weight: 500; color: var(--inkt-42);
  white-space: nowrap; pointer-events: none;
}
.agentvlak.infra-vrij .agentrol { display: none; }

.nk {
  position: fixed; z-index: 160;
  width: min(300px, calc(100vw - 20px));
  background: rgb(var(--vlak-rgb));
  border: 1px solid var(--lijn); border-radius: 16px;
  padding: 12px 14px 12px;
  box-shadow: 0 18px 44px -20px rgb(var(--schaduw-rgb) / .38), 0 2px 6px rgb(var(--schaduw-rgb) / .06);
  pointer-events: none;
  color: var(--inkt);
  /* Hij staat op --nk-x/--nk-y (gezet door naamkaart.js) en schuift daar
     soepel heen; open/dicht is een korte fade met een zweem schaal, vanuit
     de kant van het poppetje. */
  left: 0; top: 0;
  --nk-dx: 0px; --nk-dy: 6px;
  transform: translate3d(calc(var(--nk-x, 0px) + var(--nk-dx)), calc(var(--nk-y, 0px) + var(--nk-dy)), 0) scale(.97);
  opacity: 0;
  transition:
    transform var(--rustig) var(--veer),
    opacity var(--snel) ease-out;
  will-change: transform, opacity;
}
.nk[data-kant="onder"] { --nk-dy: -6px; }
.nk[data-kant="rechts"] { --nk-dx: -6px; --nk-dy: 0px; transform-origin: left center; }
.nk[data-kant="links"] { --nk-dx: 6px; --nk-dy: 0px; transform-origin: right center; }
.nk[data-kant="boven"] { transform-origin: center bottom; }
.nk[data-kant="onder"] { transform-origin: center top; }
.nk.nk-open {
  --nk-dx: 0px; --nk-dy: 0px;
  transform: translate3d(var(--nk-x, 0px), var(--nk-y, 0px), 0) scale(1);
  opacity: 1;
}
.nk.nk-direct { transition: none; }
.nk.nk-wissel > * { animation: nk-wissel var(--snel) ease-out both; }
@keyframes nk-wissel { from { opacity: .25; } }
.nk[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nk { transition: opacity var(--snel) linear; }
  .nk, .nk.nk-open { --nk-dx: 0px; --nk-dy: 0px; }
  .nk.nk-wissel > * { animation: none; }
}
.nk-kop { display: flex; align-items: center; gap: 10px; }
.nk-stip { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--tint-sterk); }
.nk-namen { display: flex; flex-direction: column; min-width: 0; }
.nk-naam { font-size: .98rem; font-weight: 600; line-height: 1.2; }
.nk-rol { font-size: .74rem; color: var(--inkt-60); }
.nk-taak { margin: 8px 0 0; font-size: .82rem; line-height: 1.4; color: var(--inkt-80); }
.nk-lijst { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; margin: 10px 0 0; font-size: .76rem; }
.nk-lijst dt { color: var(--u-ink-3); font-weight: 500; }
.nk-lijst dd { margin: 0; min-width: 0; color: var(--inkt-80); }
.nk-leeg { color: var(--u-ink-3); }
.nk-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.nk-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  border: 1px dashed var(--lijn-sterk); color: var(--inkt-80);
}
.nk-chip small { font-size: .66rem; color: var(--inkt-42); }
.nk-chip--aan { border-style: solid; border-color: var(--inkt-42); font-weight: 600; }
.nk-chip--aan small { color: var(--inkt-60); }
.nk-hint { margin: 9px 0 0; font-size: .72rem; color: var(--u-ink-3); }

/* Het i'tje: alleen op aanraakschermen, daar is geen erover gaan. */
.nk-info {
  display: none;
  position: absolute; top: 14%; right: 18%;
  width: 22px; height: 22px; border-radius: 50%;
  font: 600 12px/1 var(--sans); color: var(--inkt-60);
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn); cursor: pointer;
}
.agentkaartje { position: relative; }
@media (hover: none) and (pointer: coarse) {
  .nk-info { display: grid; place-items: center; }
  .agentvlak.infra-vrij .nk-info { display: none; }
}

/*
 * Team seats (docs/team.md, "Per agent"): een agent die je niet mag gebruiken
 * staat wel op de kaart, gedimd en met een slotje. Geen gesprek, geen
 * bewerker; de zin staat in een tooltip (erover gaan, focus, of een tik).
 */
.agentkaartje[data-dicht="ja"] { cursor: default; }
.agentkaartje[data-dicht="ja"]:hover { transform: none; }
.agentkaartje[data-dicht="ja"] .agentorb { opacity: .32; filter: grayscale(.7); }
.agentkaartje[data-dicht="ja"] .agentnaam, .agentkaartje[data-dicht="ja"] .agentrol { color: var(--inkt-42); }
.agentslot {
  position: absolute; top: 14%; right: 18%;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn);
  pointer-events: none;
}
.agentslot::before {
  content: ''; width: 12px; height: 12px; background: var(--inkt-60);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 5V3.6a2.5 2.5 0 0 1 5 0V5h.4c.6 0 1.1.5 1.1 1.1v4.3c0 .6-.5 1.1-1.1 1.1H3.1c-.6 0-1.1-.5-1.1-1.1V6.1C2 5.5 2.5 5 3.1 5zm1.3 0h2.4V3.6a1.2 1.2 0 0 0-2.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 5V3.6a2.5 2.5 0 0 1 5 0V5h.4c.6 0 1.1.5 1.1 1.1v4.3c0 .6-.5 1.1-1.1 1.1H3.1c-.6 0-1.1-.5-1.1-1.1V6.1C2 5.5 2.5 5 3.1 5zm1.3 0h2.4V3.6a1.2 1.2 0 0 0-2.4 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.agenttip {
  /* Midden op het (gedimde) poppetje: de naam eronder blijft leesbaar. */
  position: absolute; left: 50%; top: 46%;
  translate: -50% -50%;
  width: max-content; max-width: min(240px, 80vw);
  padding: 7px 10px; border-radius: 10px;
  font-size: .74rem; line-height: 1.35; color: var(--inkt); text-align: center;
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn);
  box-shadow: 0 6px 18px rgb(var(--inkt-rgb) / .1);
  opacity: 0; pointer-events: none;
  transition: opacity var(--snel) var(--uit);
}
.agentkaartje[data-dicht="ja"]:hover .agenttip,
.agentkaartje[data-dicht="ja"]:focus-visible .agenttip,
.agentkaartje--tip .agenttip { opacity: 1; transition: opacity var(--rustig) var(--veer); }
.agentvlak.infra-vrij .agentslot, .agentvlak.infra-vrij .agenttip { display: none; }

/* ---------------- bijnaam in het bewerkformulier ---------------- */
.ab-naamrij { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.ab-dobbel {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--inkt); background: var(--tint); border: 1px solid var(--lijn); cursor: pointer;
  transition: background var(--snel) ease;
}
.ab-dobbel:hover { background: var(--tint-sterk); }
.ab-dobbel svg { width: 20px; height: 20px; display: block; }
.ab-dobbel.rolt svg { animation: ab-rol var(--traag) var(--veer); }
@keyframes ab-rol { from { transform: rotate(-200deg) scale(.8); } }

/* ---------------- templates in "add agent" (src/snelagent.js) ---------------- */
.sa-kopnaam { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sa-terug {
  font: inherit; font-size: 1rem; color: var(--inkt-60);
  background: none; border: 0; padding: 2px 6px 2px 0; cursor: pointer;
}
.sa-terug:hover { color: var(--inkt); }
.sa-melding {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 8px 10px; border-radius: 12px;
  font-size: .8rem; color: var(--inkt-80); background: var(--tint);
}
.sa-chip {
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--inkt);
  background: rgb(var(--vlak-rgb)); border: 1px solid var(--lijn-sterk); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
}
.sa-chip.bezig { opacity: .5; pointer-events: none; }
.sa-sjabloonknop {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  margin: 12px 0 2px; padding: 11px 12px;
  font: inherit; text-align: left; color: var(--inkt);
  background: var(--tint); border: 1px solid var(--lijn); border-radius: 14px; cursor: pointer;
  transition: background var(--snel) ease, transform var(--snel) ease;
}
.sa-sjabloonknop:hover { background: var(--tint-sterk); transform: translateY(-1px); }
.sa-sjabloonknop > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.sa-sjabloonknop strong { font-size: .9rem; }
.sa-sjabloonknop small { font-size: .74rem; color: var(--inkt-60); line-height: 1.35; }
.sa-pijl { font-size: 1.05rem; color: var(--inkt-60); }
.sa-galerij { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sa-sjabloon {
  display: flex; flex-direction: column; gap: 4px;
  font: inherit; text-align: left; color: var(--inkt);
  background: var(--tint); border: 1px solid transparent; border-radius: 12px;
  padding: 10px 11px; cursor: pointer; min-width: 0;
  animation: ob-lid var(--rustig) ease both;
  transition: background var(--snel) ease, transform var(--snel) ease;
}
.sa-sjabloon:hover { background: var(--tint-sterk); transform: translateY(-1px); }
.sa-sjabloon:focus-visible { border-color: var(--inkt); outline: none; }
.sa-sjabloonkop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sa-sjabloonkop strong { font-size: .86rem; }
.sa-sjabloon small { font-size: .72rem; color: var(--inkt-60); line-height: 1.35; }
.sa-sjabloon .sa-telling { color: var(--inkt-42); }
.sa-sjabloon .ob-stippen { margin: 0; padding: 0; }
.sa-sjabloon .ob-stip { width: 12px; height: 12px; }
.sa-teller { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; font-size: .8rem; color: var(--inkt-60); }
.sa-teller .ob-rond { width: 32px; height: 32px; font-size: 17px; background: var(--tint); box-shadow: none; }
.sa-getal { font-size: 1.6rem; font-weight: 600; min-width: 1.4em; text-align: center; color: var(--inkt); }
.sa-kopje { margin: 12px 0 5px; font-size: .72rem; font-weight: 600; color: var(--inkt-60); }
.sa-team, .sa-dingen { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sa-team li, .sa-dingen li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 9px; border-radius: 10px; background: var(--tint);
}
.sa-team li > span:last-child, .sa-dingen li { min-width: 0; }
.sa-team li > span:last-child { display: flex; flex-direction: column; }
.sa-dingen li { justify-content: space-between; }
.sa-team strong, .sa-dingen strong { font-size: .84rem; }
.sa-team small, .sa-dingen small { font-size: .72rem; color: var(--inkt-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-team li.sa-al { opacity: .55; }
.sa-noot { margin: 6px 0 0; font-size: .74rem; color: var(--inkt-60); }
.sa-knop--breed { display: block; width: 100%; margin-top: 14px; padding: 10px 18px; }
.sa-knop:disabled { opacity: .45; cursor: default; }
.sa-voorbeeld { min-height: 120px; }

@media (max-width: 560px) {
  .sa-galerij { grid-template-columns: 1fr; }
}

/* ---------------- website-stijl: chatbalk, menu's en kaart ----------------
 *
 * De chrome van de tool in de taal van de website (public/styles.css): witte
 * kaarten met een haarlijn en de zachte kaartschaduw, titels in gewicht 500
 * met krappe spatiëring, grijze labels met een gekleurd bolletje, pillen en
 * ronde knoppen, en de focusring van de site. Alles via de --u-*-tokens,
 * zodat Night, Midnight en een eigen thema meekleuren. Gewicht nooit boven
 * 600: Mona Sans heeft niet meer. Geen tabular-nums.
 *
 * Staat bewust onderaan en als één blok: het legt de vorm over de regels
 * erboven heen, het gedrag (data-attributen, [hidden], animaties) blijft
 * waar het was.
 */
:root {
  --s-schaduw-sm: 0 1px 2px rgba(12, 19, 48, .06), 0 6px 18px -6px rgba(12, 19, 48, .12);
  --s-rand: 0 0 0 1px var(--u-line);
  --s-ring: 0 0 0 3px color-mix(in srgb, var(--u-signaal) 14%, transparent);
  --s-knopschaduw: 0 12px 24px -10px rgba(12, 19, 48, .5);
  --s-bol: var(--baby);   /* het bolletje voor een label: de accentkleur van het thema */
}
:root[data-donker="ja"] {
  --s-schaduw-sm: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px -6px rgb(0 0 0 / .45);
  --s-knopschaduw: 0 12px 24px -10px rgb(0 0 0 / .6);
}

/* Velden nemen van zichzelf het systeemlettertype; hier Mona Sans, net als de rest. */
input, select, textarea { font-family: inherit; }
strong, b { font-weight: 600; }

/* Eén focusring voor alles wat je met het toetsenbord bereikt, zoals op de site. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--u-signaal); outline-offset: 3px;
}

/* Een label: klein, grijs, kleine letters, met een gekleurd bolletje ervoor. */
.lade-label, .vm-kop, .weergavekop, .instellingen-team > strong,
.infra-menukopje, .infra-kijkerkopje, .wb-lijstkop > span:first-child {
  font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.3;
  text-transform: lowercase; color: var(--u-tag);
}
.lade-label::before, .vm-kop::before, .weergavekop::before, .instellingen-team > strong::before,
.infra-menukopje::before, .infra-kijkerkopje::before, .wb-lijstkop > span:first-child::before,
.bericht-assistent > .afzender::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--s-bol); vertical-align: .08em;
}

/* Tooltips: een klein inktblok, in de letter van de site. */
[data-tip]::after {
  padding: 6px 10px; border-radius: 9px;
  background: var(--u-ink); color: var(--u-surface);
  font: 500 12px/1.2 var(--sans); letter-spacing: -.005em;
  box-shadow: var(--s-schaduw-sm);
}

/* ---- de chatbalk ---- */

.kaart {
  padding: 8px;
  background: var(--u-surface);
  border: 0; border-radius: 26px;
  box-shadow: var(--s-rand), var(--u-schaduw);
}
.kaart:focus-within { box-shadow: 0 0 0 1px var(--u-line-2), var(--s-ring), var(--u-schaduw); }
.kaart[data-luistert="ja"] { box-shadow: 0 0 0 1px var(--baby), 0 0 0 4px var(--baby-zacht), var(--u-schaduw); }
.kaartrij { gap: 6px; }

textarea#invoerveld {
  padding: 9px 4px;
  font: 400 16px/1.4 var(--sans); letter-spacing: -.005em;
  color: var(--u-ink);
}
textarea#invoerveld::placeholder { color: var(--u-tag); }
.kaart[data-voorlopig="ja"] textarea#invoerveld { color: var(--u-ink-2); }

/* Plus, @ en de microfoon: ronde knoppen zonder vlak, die bij aanwijzen het
   paneelgrijs van de site krijgen. */
.kaartplus, .praatknop { color: var(--u-ink-3); }
.kaartplus:hover:not(:disabled), .praatknop:hover { color: var(--u-ink); background: var(--u-panel); }
.praatknop[data-actie="stoppen"] { color: var(--u-ink); background: var(--baby); }
.praatknop[data-actie="afbreken"], .praatknop[data-actie="afbreken"]:hover { color: var(--u-surface); background: var(--u-ink); }

/* Versturen: de inktknop van de site, rond. */
.verstuur { color: var(--u-surface); background: var(--u-ink); }
.verstuur:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--s-knopschaduw); }
.verstuur:disabled { color: var(--u-tag); background: var(--u-panel); box-shadow: none; }

.praatknop:focus-visible, .verstuur:focus-visible, .kaartplus:focus-visible { outline: 2px solid var(--u-signaal); outline-offset: 2px; }

/* Bijlagen en vermeldingen: de pillen van de site. */
.bijlagenrij { gap: 8px; padding: 2px 2px 8px; }
.chip {
  gap: 10px; padding: 5px 6px 5px 5px;
  font-size: 13.5px; color: var(--u-ink);
  background: var(--u-surface);
  border: 0; border-radius: 999px;
  box-shadow: var(--s-rand), 0 1px 2px rgba(12, 19, 48, .04);
}
.chip.fout { box-shadow: var(--s-rand), inset 3px 0 0 var(--u-ink); }
.chip-icoon {
  width: 32px; height: 32px;
  color: var(--u-ink-2); background: var(--u-panel);
  border: 0; border-radius: 50%;
}
.chip .chip-beeld { border-radius: 50%; }
.chip-naam { font-weight: 500; letter-spacing: -.005em; }
.chip .meta { font-size: 12px; color: var(--u-tag); }
.chip button { width: 26px; height: 26px; color: var(--u-tag); }
.chip button:hover { color: var(--u-ink); background: var(--u-panel); }

/* De kiezer voor @: een witte kaart boven de balk. */
.vm {
  padding: 8px;
  background: var(--u-surface);
  border: 0; border-radius: 22px;
  box-shadow: var(--s-rand), var(--u-schaduw);
}
.vm-kop { margin: 6px 10px 8px; }
.vm-lijst { gap: 2px; }
.vm-optie { gap: 2px; padding: 9px 12px; border-radius: 14px; color: var(--u-ink); }
.vm-optie:hover, .vm-optie--actief { background: var(--u-panel); }
.vm-titel { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.vm-meta { font-size: 12.5px; color: var(--u-tag); }
.vm-fragment { font-size: 13px; color: var(--u-ink-3); }
.vm-leeg { font-size: 14px; color: var(--u-tag); }

.voetnoot { font-size: 13px; color: var(--u-tag); }
.voetnoot.luisteren { color: var(--u-ink); }
.bovenregel { font-size: 13.5px; }
.kaarttitel { font-weight: 500; letter-spacing: -.01em; color: var(--u-ink); }
.kaartregel { font-size: 12.5px; color: var(--u-tag); }

/* ---- het antwoord: dezelfde kaart als de balk ---- */

.uitvoer-lijf {
  background: var(--u-surface);
  border: 0; border-radius: 26px;
  box-shadow: var(--s-rand), var(--u-schaduw);
}
.uitvoer-staart i { background: var(--u-surface); border: 0; box-shadow: var(--s-rand), var(--s-schaduw-sm); }
body[data-karakter="actief"] .uitvoer-staart i { box-shadow: 0 0 0 1px var(--u-line-2), var(--s-schaduw-sm); }

/* Wie er antwoordt: een label zoals op de site. */
.afzender { font-size: 12.5px; font-weight: 400; color: var(--u-tag); }

/* Je eigen vraag: een zacht paneel, met de bijlagen als pillen erin. */
.bericht-gebruiker .inhoud {
  padding: 10px 16px;
  color: var(--u-ink);
  background: var(--u-panel); border-radius: 20px 20px 6px 20px;
}
.bijlage-in-bericht, .bericht-gebruiker .bijlage-in-bericht, .vermeld-chip {
  padding: 4px 12px;
  font-size: 12.5px; font-weight: 500; color: var(--u-ink-2);
  background: var(--u-surface); border-radius: 999px;
  box-shadow: var(--s-rand);
}
.vermeld-chip:hover { color: var(--u-ink); background: var(--u-surface); box-shadow: 0 0 0 1px var(--u-line-2), 0 8px 18px -10px rgba(12, 19, 48, .35); }
/* Een pil in je vraag draagt een bolletje, zoals op de site; geen emoji. */
.bijlage-in-bericht:not(.vermeld-in-bericht):not(.vermeld-chip)::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--s-bol);
}
.bijlage-in-bericht { gap: 7px; }
.vermeld-label { font-size: 12.5px; color: var(--u-tag); }

/* Een tool die draaide: een paneel, zonder tweede lettertype. */
.tool { font-size: 13px; background: var(--u-panel); border-radius: 14px; }
.tool summary { color: var(--u-tag); padding: 8px 12px; }
.tool-naam { font: 500 13px/1.3 var(--sans); letter-spacing: -.005em; color: var(--u-ink); }
.tool-staat { font-size: 12px; }
.tool-lijf pre { background: var(--u-surface); border-radius: 10px; }
.tool-samenvatting { color: var(--u-ink-2); }
.melding { font-size: 14px; color: var(--u-ink); background: var(--u-panel); border-radius: 14px; }

/* Route- en herinneringsregel en wat hij leerde: open ze en je ziet een
   paneel met dezelfde ronding als de balk en de lade. */
.route-lijf, .hr-lijf { border-radius: 16px; }
.hr-gesprek { border-radius: 11px; }
.hr-gesprek:hover { background: var(--u-surface); }

/* ---- het zijmenu ---- */

.overlay { background: rgb(var(--schaduw-rgb) / .14); }
.lade {
  padding: 18px 14px 14px;
  background: var(--u-surface);
  box-shadow: 1px 0 0 var(--u-line), 24px 0 60px -34px rgb(var(--schaduw-rgb) / .45);
}
.lade-kop { margin-bottom: 14px; padding-left: 4px; }
.lade-titel { font-weight: 600; }

/* "New": de inktknop van de site. */
.nieuwknop {
  height: 44px; padding: 0 18px; margin-bottom: 10px;
  font: 500 15px/1 var(--sans); letter-spacing: -.005em;
  color: var(--u-surface); background: var(--u-ink);
  border-radius: 12px;
}
.nieuwknop:hover { filter: none; transform: translateY(-1px); box-shadow: var(--s-knopschaduw); }

.ladezoek {
  height: 42px; padding: 0 14px; margin-bottom: 14px;
  font-size: 15px; color: var(--u-ink);
  background: var(--u-panel); border: 0; border-radius: 12px;
  box-shadow: none;
  transition: background var(--snel) ease, box-shadow var(--snel) ease;
}
.ladezoek::placeholder { color: var(--u-tag); }
.ladezoek:focus { background: var(--u-surface); box-shadow: 0 0 0 1px var(--u-line-2), var(--s-ring); }
.ladezoek:focus-visible { outline: none; }

.lade-label { margin: 0 6px 6px; }
.lade-lijst { gap: 2px; }
.gespreksitem {
  padding: 10px 8px 10px 12px;
  background: none; border-radius: 14px;
}
.gespreksitem:hover { background: var(--u-panel); }
.gespreksitem.actief { background: var(--u-panel); }
.gespreksitem .naam { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; color: var(--u-ink-2); }
.gespreksitem:hover .naam, .gespreksitem.actief .naam { color: var(--u-ink); }
.gespreksitem.actief .naam { font-weight: 500; }
.gespreksitem .meta, .gespreksitem.actief .meta { font-size: 12.5px; color: var(--u-tag); }
.gespreksitem .acties { gap: 2px; }
.gespreksitem .acties button {
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--u-tag);
}
.gespreksitem .acties button svg { width: 16px; height: 16px; }
.gespreksitem .acties button:hover { color: var(--u-ink); background: var(--u-surface); box-shadow: var(--s-rand), var(--s-schaduw-sm); }
.gespreksitem .acties button:focus-visible { outline-offset: 1px; }
@media (hover: none) { .gespreksitem .acties { opacity: 1; } }
.lade-leeg { font-size: 14px; color: var(--u-tag); }

.lade-voet { margin-top: 12px; padding-top: 12px; border-top-color: var(--u-line); }
.ladewaarschuwing { font-size: 13px; color: var(--u-ink-2); background: var(--u-panel); border-radius: 14px; }

/* De schakelaar, overal: een paneelregel met een pilletje erin. */
.schakelaar {
  padding: 11px 14px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; color: var(--u-ink-2);
  background: var(--u-panel); border-radius: 14px;
}
.schakelaar:hover { color: var(--u-ink); background: var(--u-panel); box-shadow: inset 0 0 0 1px var(--u-line); }
.schakelaar[aria-pressed="true"] { color: var(--u-ink); }
.schakelaar-vak { background: var(--u-line-2); }
.schakelaar-vak::after { background: var(--u-surface); }
.schakelaar[aria-pressed="true"] .schakelaar-vak { background: var(--u-ink); }

/* Hernoemen en bevestigen: dezelfde kaart, knoppen als op de site. */
.dlg {
  gap: var(--g-3); padding: var(--g-5) var(--g-5) 20px;
  background: var(--u-surface);
  border: 0; border-radius: var(--r-xl);
  box-shadow: var(--zweef);
}
.dlg-titel { font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--u-ink); }
.dlg-uitleg { font-size: 14px; line-height: 1.55; color: var(--u-ink-3); }
/* Een opsomming in een dialoog (wat een kit toevoegt): regels met een
 * haarlijn, geen opsommingstekens. */
.dlg-lijst { list-style: none; padding: 0; margin: var(--g-1) 0 0; font-size: 14px; line-height: 1.45; color: var(--u-ink-2); border-top: 1px solid var(--haarlijn); }
.dlg-lijst > li { padding: 8px 0; border-bottom: 1px solid var(--haarlijn); }
.dlg-veld {
  height: 44px; padding: 0 14px;
  font-size: 15px; color: var(--u-ink);
  background: var(--u-surface); border: 0; border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--haarlijn-sterk);
}
.dlg-veld:focus { border: 0; background: var(--u-surface); box-shadow: inset 0 0 0 2px var(--u-ink); }
.dlg-knop {
  height: 40px; padding: 0 18px;
  font: 500 14px/1 var(--sans); letter-spacing: -.005em;
  color: var(--u-ink); background: transparent;
  border: 0; border-radius: var(--r-rond);
  box-shadow: inset 0 0 0 1px var(--haarlijn-sterk);
}
.dlg-knop:hover:not(:disabled) { background: var(--vlak-2); }
.dlg-primair { color: var(--u-surface); background: var(--u-ink); box-shadow: none; }
.dlg-primair:hover:not(:disabled) { opacity: .88; background: var(--u-ink); }
.dlg-gevaar, .dlg-gevaar:hover:not(:disabled) { color: #fff; background: #c0564b; box-shadow: none; }

/* ---- de knoppen rechtsboven en de kaart ---- */

.menuknop:hover, .kaartknop:hover { background: var(--u-panel); }
/* Op de kaart: de ronde knop van de site. */
.kaartknop[aria-expanded="true"] {
  color: var(--u-ink); background: var(--u-surface);
  border-radius: 50%;
  box-shadow: var(--s-rand), var(--s-schaduw-sm);
}
.kaartbalkknop--icoon {
  width: 42px; height: 42px;
  color: var(--u-ink); background: var(--u-surface);
  border: 0; border-radius: 50%;
  box-shadow: var(--s-rand), var(--s-schaduw-sm);
}
.kaartbalkknop--icoon:hover { color: var(--u-ink); background: var(--u-surface); transform: translateY(-1px); }
.kaartbalkknop--plus, .kaartbalkknop--plus:hover { color: var(--u-surface); background: var(--u-ink); box-shadow: none; opacity: 1; }
.kaartbalkknop--plus:hover { box-shadow: var(--s-knopschaduw); }
.kaartbalkknop--icoon[aria-pressed="true"], .kaartbalkknop--icoon[aria-expanded="true"] {
  color: var(--u-surface); background: var(--u-ink); box-shadow: none;
}
@media (max-width: 760px) {
  .kaartbalkknop--icoon { width: 40px; height: 40px; }
}

/* Een tekstknop op de kaart ("rebuild team"): de lijnknop van de site. */
.kaartbalkknop:not(.kaartbalkknop--icoon) {
  height: 38px; padding: 0 16px;
  font: 500 14px/1 var(--sans); letter-spacing: -.005em;
  color: var(--u-ink); background: transparent;
  border: 0; border-radius: 11px;
  box-shadow: inset 0 0 0 1px var(--u-line-2);
  backdrop-filter: none;
}
.kaartbalkknop:not(.kaartbalkknop--icoon):hover { background: var(--u-panel); }

/* Naam en rol onder een agent: een titel en een label. */
.agentnaam { font-size: 14.5px; font-weight: 500; letter-spacing: -.015em; color: var(--u-ink-2); }
.agentkaartje:hover .agentnaam, .agentkaartje.actief .agentnaam { color: var(--u-ink); }
.agentrol { font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--u-tag); }

/* ---- het instellingenpaneel ---- */

.instellingen {
  padding: 14px 18px 18px;
  background: var(--u-surface);
  border: 0; border-radius: 22px;
  box-shadow: var(--s-rand), var(--u-schaduw), 0 30px 60px -30px rgb(var(--schaduw-rgb) / .25);
}
.instellingen-kop strong { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--u-ink); }
.weergavekop { margin: 0 0 10px; }
.weergavetegel { font-size: 12.5px; color: var(--u-ink-2); border-radius: 14px; padding: 5px; }
.weergavetegel:hover { background: var(--u-panel); }
.weergavetegel--aan { border-color: var(--u-ink); color: var(--u-ink); }
.weergavevoorbeeld { border-radius: 10px; }
.weergaveveld { font-size: 13.5px; color: var(--u-ink-2); }
.modelkeuze, .budget { border-top-color: var(--u-line); }
.mk-auto, .bg-vandaag { border-color: var(--u-line); border-radius: 16px; }
.mk-auto--aan { border-color: var(--u-ink); }
.mk-autokop { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--u-ink); }
.mk-badge { font-size: 12px; color: var(--u-ink-2); background: var(--u-panel); }
.mk-uitleg, .mk-standuitleg, .mk-noot, .bg-regel, .bg-noot { font-size: 13px; color: var(--u-ink-3); }
.mk-standen { background: var(--u-panel); border-radius: 12px; }
.mk-stand { font-size: 13px; color: var(--u-ink-3); border-radius: 9px; }
.mk-stand:hover:not(:disabled) { color: var(--u-ink); }
.mk-stand--aan { color: var(--u-ink); background: var(--u-surface); box-shadow: var(--s-rand), var(--s-schaduw-sm); }
:root[data-donker="ja"] .mk-stand--aan { background: var(--u-line-2); box-shadow: none; }
.mk-let { font-size: 13px; color: var(--u-ink); }
.mk-zelf summary, .bg-agents summary { font-size: 13.5px; color: var(--u-ink-3); }
.mk-zelf summary:hover, .bg-agents summary:hover { color: var(--u-ink); }
.mk-select, select.ab-veld {
  font-size: 14.5px; color: var(--u-ink);
  background: var(--u-surface); border-color: var(--u-line-2); border-radius: 12px;
}
.mk-select:focus, select.ab-veld:focus { border-color: var(--u-line-2); box-shadow: var(--s-ring); }
.mk-privacy .schakelaar, .bg .schakelaar { font-size: 13.5px; }
.bg-besteed { font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--u-ink); }
.bg-van, .bg-label, .bg-geschiedeniskop { color: var(--u-tag); }
.bg-vak { border-color: var(--u-line-2); border-radius: 12px; background: var(--u-surface); }
.bg-vak:focus-within { border-color: var(--u-line-2); box-shadow: var(--s-ring); }
.instellingen-team { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--u-line); }
.instellingen-team > strong { display: block; margin: 0 0 6px; }
.instellingen-team p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--u-ink-3); }

/* ---- de infrastructuurkaart ---- */

/* Namen onder de blokjes: een titel en een label, met een randje vel eromheen
   zodat ze ook over een gloed leesbaar blijven. */
.infra-knoop { font-size: 12.5px; color: var(--u-ink); }
.infra-bijschrift { left: -72px; width: 144px; gap: 2px; text-shadow: 0 0 6px rgb(var(--vel-rgb)), 0 0 2px rgb(var(--vel-rgb)); }
.infra-naam, .infra-knoop--blok .infra-naam { font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; }
.infra-onder, .infra-knoop--blok .infra-onder { font-family: var(--sans); font-size: 11.5px; color: var(--u-tag); }
/* Geen schuine letter: Mona Sans heeft er geen, dus die werd nagebootst. */
.infra-knoop--ontwerp .infra-naam { font-style: normal; color: var(--u-ink-3); }
.infra-knoop--rust .infra-onder { font-style: normal; }
.infra-telling { font-family: var(--sans); font-size: 12px; opacity: 1; color: var(--u-tag); }
.infra-plusteken, .infra-wachtstip { font-weight: 600; }

/* De balk onderin: een witte pil, knoppen als pillen erin. */
.infra-gereedschap {
  gap: 2px; padding: 6px;
  background: var(--u-surface);
  border: 0; border-radius: 999px;
  box-shadow: var(--s-rand), var(--u-schaduw);
}
@supports (backdrop-filter: blur(1px)) {
  .infra-gereedschap { background: color-mix(in srgb, var(--u-surface) 94%, transparent); }
}
.infra-werktuig, .infra-chip {
  gap: 8px; padding: 8px 14px 8px 11px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
  color: var(--u-ink-2);
  border: 0; border-radius: 999px;
}
.infra-werktuig--enkel { padding: 8px 10px; }
.infra-werktuig:hover, .infra-chip:hover { color: var(--u-ink); background: var(--u-panel); border-color: transparent; }
.infra-chip[aria-pressed="true"] { color: var(--u-surface); background: var(--u-ink); }
.infra-plusteken { color: var(--u-surface); background: var(--u-ink-3); }
.infra-werktuig:hover .infra-plusteken { background: var(--u-ink); }
.infra-scheiding { background: var(--u-line); margin: 0 4px; }
/* "browse" en "add" voor de twee groepen knoppen in de balk (infra.js, balk). */
.infra-groeplabel {
  flex: none; padding: 0 4px 0 10px;
  font-size: 11.5px; line-height: 1; color: var(--u-tag); white-space: nowrap;
  user-select: none;
}
@media (max-width: 1180px) { .infra-groeplabel { display: none; } }
@media (max-width: 760px) {
  .infra-werktuig, .infra-chip { font-size: 12.5px; padding: 7px 10px; }
}
@media (max-width: 640px) {
  .infra-werktuig, .infra-werktuig--enkel { padding: 7px 6px; gap: 0; }
  .infra-werktuig:has(.infra-plusteken) { padding-right: 9px; }
  .infra-gereedschap { padding: 4px; gap: 0; }
  .infra-scheiding { margin: 0 2px; }
}

/* De balk is iets hoger geworden: wat erboven opengaat schuift mee. */
.infra-lade, .infra-selectiebalk { bottom: 84px; }
.infra-formulier, .infra-status { bottom: 86px; }
.infra-formulier { max-height: calc(100vh - 120px); }

/* Wat er net gebeurde: een pil boven de balk. */
.infra-status {
  padding: 8px 16px;
  font-size: 13px; line-height: 1.4; color: var(--u-ink-2);
  background: var(--u-surface); border: 0; border-radius: 999px;
  box-shadow: var(--s-rand), var(--s-schaduw-sm);
}
.infra-status--fout, .infra-status--link, .infra-status--link a { color: var(--u-ink); }
.infra-status--link a { font-weight: 500; }

/* Alles wat boven de kaart opengaat: dezelfde witte kaart met haarlijn. */
.infra-menu, .infra-lade, .infra-formulier, .infra-kijker, .infra-selectiebalk {
  background: var(--u-surface);
  border: 0;
  box-shadow: var(--zweef);
}

/* Het rechtsklikmenu. */
.infra-menu { padding: 6px; border-radius: var(--r-l); }
.infra-menukop { margin: 6px 10px 8px; }
.infra-menukop strong { font-size: 14.5px; font-weight: 500; letter-spacing: -.015em; color: var(--u-ink); }
.infra-menukop span { font-size: 12px; color: var(--u-tag); }
.infra-menukopje { margin: 8px 10px 4px 26px; }
.infra-menuknop {
  padding: 8px 10px 8px 6px;
  font-size: 14px; letter-spacing: -.005em; color: var(--u-ink);
  border-radius: 11px;
}
.infra-menuknop:hover, .infra-menuknop--open { background: var(--u-panel); }
.infra-menuknop--gevaar { color: #c0564b; }
.infra-menuknop--gevaar:hover { background: rgb(192 86 75 / .1); }
.infra-menuhint { font-size: 12px; color: var(--u-tag); }
.infra-menupijl { color: var(--u-tag); }
.infra-menuscheiding { background: var(--u-line); margin: 6px 10px; }
/* Het vinkje als lijntje: ✓ staat niet in Mona Sans en viel terug op een
   ander lettertype. De tekst blijft voor wie niet kijkt, alleen onzichtbaar. */
.infra-menuvink, .infra-merkvink { font-size: 0; color: transparent; }
.infra-menuvink { position: relative; align-self: stretch; }
.infra-menuvink:not(:empty)::before, .infra-merkvink:not(:empty)::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 8px; margin: -6px 0 0 -2px;
  border-right: 1.6px solid var(--u-ink); border-bottom: 1.6px solid var(--u-ink);
  transform: rotate(45deg);
}
.infra-merkvink { width: 12px; height: 12px; top: 8px; right: 9px; }
.infra-merkvink:not(:empty)::before { border-color: var(--kleur); }

/* De lade met wat je op het vel kunt zetten. */
.infra-lade { padding: 6px; border-radius: var(--r-xl); gap: 2px; }
.infra-laderegel {
  gap: 10px; padding: 9px 12px;
  font-size: 14px; letter-spacing: -.005em; color: var(--u-ink);
  border-radius: 12px;
}
.infra-laderegel:hover { background: var(--u-panel); }
.infra-laderegel--staat::after { font-size: 12px; color: var(--u-tag); }
.infra-ladeleeg strong { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--u-ink); }
.infra-ladeleeg span { font-size: 13px; color: var(--u-ink-3); }
.infra-ladeknop {
  height: 36px; padding: 0 16px; margin-top: 8px;
  font: 500 13.5px/1 var(--sans);
  color: var(--u-surface); background: var(--u-ink); border-radius: 11px;
}

/* De uitleg bij de kaart. */
.infra-lade--hulp { padding: 12px 16px; }
.infra-hulpregel { padding: 5px 0; font-size: 13px; color: var(--u-ink-2); }
.infra-hulpregel kbd {
  padding: 3px 10px;
  font: 500 12px/1.3 var(--sans); color: var(--u-ink);
  background: var(--u-panel); border: 0; border-radius: 999px;
}

/* Een formulier boven de balk: connector kiezen, aansluiten, invullen. */
.infra-formulier { padding: 20px 20px 20px; border-radius: var(--r-xl); }
.infra-formulierkop { margin-bottom: 12px; }
.infra-formulierkop strong { font-size: 19px; font-weight: 500; letter-spacing: -.025em; color: var(--u-ink); }
.infra-sluit {
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  font-size: 20px; color: var(--u-ink-3);
  border-radius: 50%;
}
.infra-sluit:hover { color: var(--u-ink); background: var(--u-panel); }
.infra-velden { gap: 10px; }
.infra-veld > span { font-size: 13px; color: var(--u-tag); }
.infra-veld input, .infra-veld select, .infra-veld--vol textarea {
  font-size: 14px; color: var(--u-ink);
  background: var(--u-surface);
  border: 1px solid var(--haarlijn-sterk); border-radius: var(--r-m);
}
.infra-veld input, .infra-veld select { min-height: 40px; padding: 8px 12px; }
.infra-veld input:focus, .infra-veld select:focus, .infra-veld--vol textarea:focus { outline: none; box-shadow: var(--s-ring); }
:root[data-donker="ja"] .infra-veld select { color-scheme: dark; }
.infra-formulieruitleg { margin: 4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--u-ink-3); }
.infra-formulieruitleg a { color: var(--u-ink); }
.infra-aansluiten {
  height: 44px; padding: 0 20px;
  font: 500 var(--t-m)/1 var(--sans); letter-spacing: -.005em;
  color: var(--u-surface); background: var(--u-ink);
  border-radius: var(--r-rond);
}
.infra-aansluiten:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--s-knopschaduw); }
/* Een waarschuwing: een inktstreep en gewicht, geen rode wassing. */
.infra-waarschuwing { font-size: var(--t-s); color: var(--u-ink); background: var(--vlak-2); border-left: 2px solid var(--u-ink); border-radius: 0 var(--r-s) var(--r-s) 0; }
.infra-adres { font-size: 12.5px; color: var(--u-ink); background: var(--u-panel); border-radius: var(--r-s); }

/* De connectortegels: kaartjes met het merk, in een zweem van zijn kleur. */
.infra-kijkerkopje { margin: 16px 0 2px; }
.infra-merkrooster { gap: 8px; margin: 8px 0 6px; }
/* Neutraal, zoals de tegels op de kaart: het merk zit in het tekentje. */
.infra-merktegel {
  gap: var(--g-2); padding: 14px var(--g-2) 12px;
  font-size: var(--t-s); font-weight: 500; letter-spacing: -.005em; color: var(--u-ink);
  background: var(--vlak-1);
  border: 0; border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--haarlijn);
  transform: none;
}
.infra-merktegel:hover { background: var(--vlak-2); box-shadow: inset 0 0 0 1px var(--haarlijn-sterk); transform: none; }
.infra-merktegel--al { opacity: .6; }
/* "Set up manually": de lijnknop van de site. */
.infra-kijkknoppen { gap: 6px; }
.infra-kijkknoppen .infra-chip, .infra-formulier .infra-chip {
  height: 38px; padding: 0 16px;
  color: var(--u-ink); background: transparent;
  border-radius: var(--r-rond);
  box-shadow: inset 0 0 0 1px var(--haarlijn-sterk);
}
.infra-kijkknoppen .infra-chip:hover, .infra-formulier .infra-chip:hover { background: var(--u-panel); }

/* Het kijkvenster rechts. */
.infra-kijker { border-radius: var(--r-xl); }
.infra-kijkerkop { padding: 14px 12px 12px 18px; border-bottom-color: var(--u-line); }
.infra-kijkerkop strong { font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--u-ink); }
.infra-kijkerlijf { padding: 12px 18px 18px; }
.infra-kijkerleeg { font-size: 13px; color: var(--u-tag); }
.infra-kijkrij { font-size: 13px; }
.infra-kijkrij > span { color: var(--u-tag); }
.infra-kijklijst { gap: 2px; }
.infra-kijkregel { padding: 8px 10px; font-size: 13.5px; color: var(--u-ink); background: var(--u-panel); border-radius: 11px; }
.infra-kijkregel:hover { background: var(--u-line); }
.infra-kijkregel--stil:hover { background: var(--u-panel); }
.infra-kijkregeltekst--mono { font-family: var(--sans); font-size: 12.5px; }
.infra-kijkweg { width: 22px; height: 22px; color: var(--u-tag); }
.infra-kijkweg:hover { color: var(--u-surface); background: var(--u-ink); }
/* Startpunt of alleen lezen (docs/toegang.md): een klein knopje in de regel. */
.infra-startwissel {
  font: inherit; font-size: 11.5px; line-height: 1; flex: none; margin-left: auto; white-space: nowrap;
  padding: 4px 8px; color: var(--u-tag); background: none; border: 1px solid var(--u-line); border-radius: 999px; cursor: pointer;
}
.infra-startwissel[aria-pressed="true"] { color: var(--u-surface); background: var(--u-ink); border-color: var(--u-ink); }
.infra-startwissel:hover { border-color: var(--u-ink); }
.infra-kijktekst { font-size: 12.5px; color: var(--u-ink-2); background: var(--u-panel); border-radius: 12px; }

/* Wat je met een selectie kunt. */
.infra-selectiebalk { padding: 6px 6px 6px 16px; border-radius: 999px; }
.infra-chip--sterk, .infra-chip--sterk:hover { color: var(--u-surface); background: var(--u-ink); }

/* Het werkboek: dezelfde kaart als de lade en de balk. */
.wb {
  background: var(--u-surface);
  border: 0; border-radius: 24px;
  box-shadow: var(--s-rand), 0 30px 70px -28px rgb(var(--schaduw-rgb) / .45);
}
.wb-kop strong { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--u-ink); }
.wb-naam { font-size: 15px; color: var(--u-tag); }
.wb-intro { font-size: 14px; color: var(--u-ink-3); }
.wb-schakel-tekst small { font-size: 12.5px; color: var(--u-tag); }
.wb-telling, .wb-index { font-size: 12.5px; color: var(--u-tag); }
.wb-notitie { background: var(--u-panel); border-radius: 16px; }
.wb-notitie--eigen { box-shadow: inset 3px 0 0 var(--u-ink); }
.wb-tekst { font-size: 15px; color: var(--u-ink); }
.wb-meta { font-size: 12.5px; color: var(--u-tag); }
.wb-soort { color: var(--u-ink-2); background: var(--u-surface); box-shadow: var(--s-rand); }
.wb-bron { color: var(--u-ink-2); text-decoration-color: var(--u-line-2); }
.wb-voet { border-top-color: var(--u-line); }
.wb .ab-veld { border-color: var(--u-line-2); border-radius: 11px; }
.wb .ab-knop {
  height: 38px; padding: 0 16px;
  font: 500 14px/1 var(--sans); letter-spacing: -.005em;
  color: var(--u-ink); background: transparent;
  border: 0; border-radius: 11px;
  box-shadow: inset 0 0 0 1px var(--u-line-2);
}
.wb .ab-knop:hover:not(:disabled) { background: var(--u-panel); }
.wb .ab-gevaar { color: var(--u-tag); box-shadow: none; }
.wb .ab-gevaar:hover:not(:disabled) { color: #c0564b; background: rgb(192 86 75 / .08); }

/* De rondleiding zelf: rondleiding.css. */

/* =====================================================================
 * PLANNER (src/planner.js, planner-formulier.js, planner-nakijken.js)
 * Alles met het voorvoegsel .pl-. Opdrachten die op tijd gebeuren: een
 * scherm over alles heen met Week, Month, List en Review, en een zijpaneel
 * voor het formulier. De stijl van de site: witte kaarten met een zachte
 * schaduw, haarlijnen, pillen, grijze labels met een bolletje. De enige
 * andere kleur is die van de agent (`--kleur`) - dat is het karakter, geen
 * chrome. Mislukt valt op door gewicht en een inktstreep, niet door rood.
 * ===================================================================== */

/* De knop op de kaart, met het rondje voor wat op nakijken wacht. */
.pl-rondje {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--u-ink); color: var(--u-surface);
  font: 600 11px/18px var(--sans); text-align: center;
  box-shadow: 0 0 0 2px rgb(var(--vel-rgb));
  pointer-events: none;
}
/* En een stipje op "All agents", zodat je het ook vanuit het gesprek ziet. */
.kaartknop[data-pl-nakijken="ja"]::before {
  content: ""; position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--baby); box-shadow: 0 0 0 2px rgb(var(--vel-rgb));
}

/* In het bewerkmenu van een agent: de rij "Tasks". */
.pl-abregel .pl-abknop { align-self: flex-start; }

/* =====================================================================
 * WERKBLOKKEN (src/werkblokken.js, infra.js, planner.js)
 * Ingebouwde apps als blok op de kaart; de agenda eerst. Een werkblok is
 * een tegel zoals de rest, maar voller - het is een ding dat je opent - met
 * een rondje voor wat op je wacht. Zonder lijnen wijst het naar zijn
 * handvat, want daar begint het.
 * ===================================================================== */
.infra-knoop--werkblok .infra-tegel { cursor: pointer; }
.infra-teken--werkblok { stroke-width: 1.15; }
.infra-knoop--werkblok .infra-onder { font-variant-numeric: normal; }
/* Wat op je wacht: een klein getal in inkt op de hoek, met een randje vel. */
.infra-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: var(--r-rond); background: var(--u-ink); color: var(--u-surface);
  font: 600 10.5px/17px var(--sans); text-align: center;
  box-shadow: 0 0 0 2px rgb(var(--vel-rgb));
  pointer-events: none;
}
.infra-badge[hidden] { display: none; }
/* Geen lijn: het handvat staat groot en klopt zacht, met de hint eronder. */
/* Stil, geen kloppende gloed: het handvat staat groot, de hint eronder zegt het. */
.infra-knoop--los .infra-handvat {
  transform: translateY(-50%) scale(1);
  color: rgb(var(--vel-rgb)); background: var(--kleur-teken, var(--kleur));
}
.infra-knoop--los .infra-onder { color: var(--u-ink-2); }
/* Aangewezen vanuit een paneel ("Show me on the map"). */
.infra-knoop--wijs .infra-tegel { animation: wb-wijs 1.1s ease-in-out 3; }
.infra-knoop--wijs .infra-handvat { transform: translateY(-50%) scale(1.25); color: rgb(var(--vel-rgb)); background: var(--kleur-teken, var(--kleur)); }
@keyframes wb-wijs {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kleur) 50%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--kleur) 0%, transparent); }
}

/* De lade "Block": per soort een tekentje, de naam en één regel uitleg. */
.infra-lade--werkblok { width: min(92vw, 400px); }
.infra-werkblokregel { grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; padding: 9px 10px; }
/* Hetzelfde tekentje als op de kaart: neutraal vlak, de kleur in de lijn. */
.infra-werkblokteken {
  width: 36px; height: 36px; border-radius: var(--r-m); display: grid; place-items: center;
  background: var(--vlak-1);
  border: 1px solid var(--haarlijn-sterk);
}
.infra-werkblokteken .infra-teken { width: var(--icoon); height: var(--icoon); }
.infra-werkbloktekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.infra-werkbloktekst strong { font-weight: 500; }
.infra-werkbloktekst small { font-size: 12px; line-height: 1.35; color: var(--u-tag, var(--inkt-60)); white-space: normal; }

/* De rij "Tasks" in de agentbewerker; de rest van de agenda staat in planner.css. */
.pl-abknoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-abhint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--u-ink-3); }
@media (prefers-reduced-motion: reduce) {
  .infra-knoop--los .infra-handvat, .infra-knoop--wijs .infra-tegel { animation: none; }
}
/* ======================= einde werkblokken ======================= */

/* =====================================================================
 * BIBLIOTHEEK EN MEDIA (infra.js: toonWerkbloklade; media.js)
 * De blokkenbibliotheek achter "Block", vastgepinde werkblokken in de balk,
 * en de panelen van Image, Video en Content studio (.md-).
 * ===================================================================== */
.infra-bieb { width: min(94vw, 560px); max-height: min(70vh, 580px); overflow-y: auto; padding: var(--g-2); }
.infra-biebkop { display: grid; gap: 2px; padding: var(--g-3) var(--g-3) var(--g-2); }
.infra-biebkop strong { font-size: var(--t-l); font-weight: 500; letter-spacing: -.02em; color: var(--u-ink); }
.infra-biebkop span { font-size: var(--t-s); line-height: 1.45; color: var(--u-ink-3); }
/* De kits onder de blokken: een haarlijn ertussen, geen tweede kaart. */
.infra-biebkits:not(:empty) { margin-top: var(--g-2); padding-top: var(--g-2); border-top: 1px solid var(--haarlijn); }
.infra-biebrij {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--g-3);
  padding: 10px var(--g-3); border-radius: var(--r-m);
  transition: background var(--snel) ease;
}
.infra-biebrij:hover, .infra-biebrij:has(:focus-visible) { background: var(--vlak-2); }
.infra-biebrij .infra-werkbloktekst { gap: 2px; }
.infra-biebrij .infra-werkbloktekst strong { font-size: var(--t-m); font-weight: 500; letter-spacing: -.01em; color: var(--u-ink); }
.infra-biebrij .infra-werkbloktekst small { font-size: var(--t-s); line-height: 1.45; color: var(--u-ink-3); }
.infra-biebrij .infra-telling { font-size: var(--t-s); font-weight: 400; color: var(--u-tag); }
.infra-biebnodig { color: var(--u-ink) !important; font-weight: 500; padding-left: var(--g-2); box-shadow: inset 2px 0 0 var(--u-ink); margin-top: 3px; }
.infra-biebknoppen { display: flex; align-items: center; gap: var(--g-1); flex-wrap: wrap; justify-content: flex-end; }
/* Eén knop per rij die telt (Place, Preview): een lijnknop die vol wordt als
 * je de rij aanwijst. Vastpinnen is een stille tekstknop ernaast. */
.infra-biebknop {
  font: 500 var(--t-s)/1 var(--sans); letter-spacing: -.005em;
  height: 32px; padding: 0 var(--g-3); border: 0; border-radius: var(--r-rond); cursor: pointer; white-space: nowrap;
  color: var(--u-ink-3); background: transparent;
  transition: background var(--snel) ease, color var(--snel) ease, box-shadow var(--snel) ease;
}
.infra-biebknop:hover { color: var(--u-ink); background: var(--u-wassing); }
.infra-biebknop--sterk { color: var(--u-ink); background: var(--vlak-1); box-shadow: inset 0 0 0 1px var(--haarlijn-sterk); }
.infra-biebrij:hover .infra-biebknop--sterk:not(:disabled), .infra-biebknop--sterk:focus-visible,
.infra-biebknop--sterk:hover:not(:disabled) { color: var(--u-surface); background: var(--u-ink); box-shadow: none; }
.infra-biebknop:disabled { opacity: .45; cursor: not-allowed; }
.infra-biebknop[aria-pressed="true"] { color: var(--u-ink-2); }
.infra-biebknop:focus-visible { outline: 2px solid var(--u-signaal); outline-offset: 2px; }
@media (max-width: 520px) {
  .infra-biebrij { grid-template-columns: auto minmax(0, 1fr); }
  .infra-biebknoppen { grid-column: 1 / -1; justify-content: flex-start; padding-left: 48px; }
}
/* Een vastgepind werkblok in de balk: zijn eigen tekentje, in zijn kleur. */
.infra-werktuig--werkblok .infra-werktuigteken {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--vlak-1);
  box-shadow: inset 0 0 0 1px var(--haarlijn-sterk);
}
.infra-werktuig--werkblok .infra-teken { width: 15px; height: 15px; }

/* Het voorproefje op een mediablok: het laatste beeld over het tekentje,
   een draaiend randje zolang er iets gemaakt wordt. */
.infra-voorproef {
  position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  object-fit: cover; border-radius: 10px; pointer-events: none;
}
.infra-tegel--beeld > .infra-teken { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; padding: 2px; border-radius: 5px; background: rgb(var(--vlak-rgb) / .92); }
.infra-tegel--bezig::after {
  content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px;
  border-radius: 50%; pointer-events: none; box-sizing: border-box;
  background: rgb(var(--vlak-rgb));
  border: 2px solid color-mix(in srgb, var(--kleur) 25%, transparent); border-top-color: var(--kleur);
  box-shadow: 0 0 0 2px rgb(var(--vel-rgb));
  animation: md-draai .9s linear infinite;
}

/* De panelen van Image, Video en Content studio: media.css. */
@media (prefers-reduced-motion: reduce) {
  .infra-tegel--bezig::after { animation-duration: 2.4s; }
}
/* ======================= einde bibliotheek en media ======================= */

/* ======================= documenten, pakketten en connectors (eigenaar) ======================= */
/* De documenteditor (documentbewerk.js): een document openen en invullen,
 * koppen als kop en tabellen als raster. Alleen de tokens van het thema. */
.db-paneel {
  position: absolute; right: 16px; top: 64px; bottom: 16px; z-index: 8;
  width: min(760px, calc(100% - 32px));
  display: flex; flex-direction: column;
  pointer-events: auto;
  background: var(--u-surface); color: var(--u-ink);
  border-radius: 22px;
  box-shadow: var(--s-rand), var(--u-schaduw), 0 24px 50px -30px rgb(var(--schaduw-rgb) / .3);
  overflow: hidden;
}
.db-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 6px 20px; }
.db-kop strong { font-size: 19px; font-weight: 500; letter-spacing: -.02em; text-transform: lowercase; }
.db-balk { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid var(--u-line); }
.db-lijf { flex: 1; overflow: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.db-lijf > * { flex: none; }
.db-leeg { font-size: 13.5px; color: var(--u-tag); }
.db-voet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 12px 20px; border-top: 1px solid var(--u-line); }
.db-status { font-size: 13px; color: var(--u-tag); }
.db-bewaar { height: 40px; width: auto; flex: none; margin: 0; padding: 0 22px; }

.db-kopveld, .db-tekstveld, .db-cel {
  width: 100%; font: inherit; color: var(--u-ink);
  background: transparent; border: 0; border-radius: 9px;
}
.db-kopveld { padding: 6px 8px; margin-top: 8px; font-weight: 500; letter-spacing: -.015em; }
.db-kopveld--1 { font-size: 22px; }
.db-kopveld--2 { font-size: 17px; }
.db-kopveld--3 { font-size: 15px; }
.db-tekstveld { padding: 8px; font-size: 14px; line-height: 1.55; resize: none; overflow: hidden; background: var(--u-panel); }
.db-tekstveld--noot { font-size: 13px; color: var(--u-tag); background: transparent; box-shadow: inset 3px 0 0 var(--u-line); border-radius: 0; }
.db-kopveld:hover, .db-tekstveld--noot:hover { background: var(--u-panel); }
.db-kopveld:focus, .db-tekstveld:focus, .db-cel:focus { outline: none; box-shadow: var(--s-ring); }

.db-tabelvak { display: flex; flex-direction: column; gap: 6px; }
.db-tabelscroll { overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--u-line); }
.db-tabel { border-collapse: collapse; width: 100%; min-width: max-content; font-size: 13.5px; }
.db-tabel th, .db-tabel td { border-bottom: 1px solid var(--u-line); padding: 0; text-align: left; vertical-align: middle; }
.db-tabel thead th { background: var(--u-panel); font-weight: 500; }
.db-tabel tr:last-child td { border-bottom: 0; }
.db-tabel .db-cel { min-width: 96px; padding: 9px 10px; border-radius: 0; }
.db-tabel thead .db-cel { font-weight: 500; }
.db-cel::placeholder { color: var(--u-tag); font-style: italic; opacity: .8; }
.db-kolomkop { display: flex; align-items: center; }
.db-actiekolom { width: 34px; }
.db-mini {
  width: 28px; height: 28px; flex: none; margin: 0 3px;
  font: inherit; font-size: 15px; line-height: 1; color: var(--u-tag);
  background: none; border: 0; border-radius: 8px; cursor: pointer; opacity: .55;
}
.db-mini:hover, .db-mini:focus-visible { opacity: 1; background: var(--u-line); color: var(--u-ink); }
.db-tabelknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.db-plus {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--u-ink);
  background: var(--u-panel); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.db-plus:hover:not(:disabled) { background: var(--u-line); }
.db-plus:disabled { opacity: .5; cursor: default; }
.db-tip { font-size: 12px; color: var(--u-tag); }

.db-tabel--lees td, .db-tabel--lees th { padding: 8px 10px; }
.db-leeskop { margin: 10px 0 0; font-weight: 500; letter-spacing: -.015em; }
.db-leeskop--1 { font-size: 20px; }
.db-leeskop--2 { font-size: 16px; }
.db-leeskop--3 { font-size: 14.5px; }
.db-leestekst { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }

/* Het voorstel na "Fill from a file": over de editor heen, tot je kiest. */
.db-voorstel {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px; overflow: auto;
  background: var(--u-surface);
}
.db-voorstelkop { display: flex; flex-direction: column; gap: 4px; }
.db-voorstelkop strong { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.db-voorstelkop span { font-size: 13.5px; color: var(--u-ink-2, var(--u-ink)); }
.db-noot { font-size: 12.5px !important; color: var(--u-tag) !important; }
.db-voorstelnaam { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.db-nieuw td { background: rgb(var(--baby-rgb) / .35); }
.db-aangevuld td { background: var(--u-panel); }
.db-merkkolom { width: 64px; white-space: nowrap; font-size: 11.5px; color: var(--u-tag); }
.db-voorstelknoppen { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.db-voorstelknoppen .infra-aansluiten { width: auto; }

/* Documenten in de lade: eigen documenten openen, de rest achter een knop. */
.infra-ladekopje { margin: 8px 10px 4px; font-size: 12px; font-weight: 500; color: var(--u-tag); text-transform: lowercase; }
.infra-laderij { display: flex; align-items: stretch; gap: 2px; }
.infra-laderij > .infra-laderegel { flex: 1; min-width: 0; }
.infra-ladeplaats {
  flex: none; font: inherit; font-size: 12px; color: var(--u-tag);
  background: none; border: 0; border-radius: 10px; padding: 0 10px; cursor: pointer;
}
.infra-ladeplaats:hover, .infra-ladeplaats:focus-visible { color: var(--u-ink); background: var(--u-panel); }
.infra-ladeonder { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 6px 4px; border-top: 1px solid var(--u-line); margin-top: 6px; }

/* Een connectortegel die hier (nog) niet kan. */
.infra-merktegel--niet { opacity: .55; }
.infra-merkniet { font-size: 11px; font-weight: 400; color: var(--u-tag); }
.infra-tegelpaneel { display: flex; flex-direction: column; gap: var(--g-3); }
.infra-tegelpaneel .infra-merkvak {
  width: 44px; height: 44px; border-radius: var(--r-m);
  background: var(--vlak-1); box-shadow: inset 0 0 0 1px var(--haarlijn-sterk);
}
/* Een tegel waar je je eigen adres of sleutel plakt: de stappen, en een soort werk in de kiezer. */
.infra-stappen { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; font-size: var(--t-s); line-height: 1.5; color: var(--u-ink-2); }
.infra-stappen li::marker { color: var(--u-tag); }
.infra-tegelpaneel .infra-veld { grid-template-columns: 4.5rem 1fr; }
.infra-categorie { font-size: var(--t-s); font-weight: 500; color: var(--u-ink-2); margin: var(--g-4) 0 0; }

@media (max-width: 640px) {
  .db-paneel { inset: 64px 8px 8px; width: auto; border-radius: 18px; }
  .db-lijf { padding: 12px 14px 20px; }
  .db-tabel .db-cel { min-width: 104px; }
  .db-voet { padding: 10px 12px; }
  .db-tip { display: none; }
}
/* ======================= einde documenten, pakketten en connectors ======================= */
/* Wat alleen voor wie Tougather draait is, of zelden nodig: dichtgeklapt. */
.infra-meer { margin: 10px 0 12px; font-size: 13px; color: var(--u-ink-2); }
.infra-meer > summary { cursor: pointer; color: var(--u-tag); padding: 4px 0; }
.infra-meer > summary:hover { color: var(--u-ink); }
.infra-meer[open] > summary { margin-bottom: 8px; }

/* ---------------- toegankelijkheid en kleine schermen (audit T-11, T-12, T-14) ---------------- */
/* De chatbalk krijgt een duidelijke ring als je erin typt (ook met het toetsenbord). */
.kaart:focus-within:not([data-luistert="ja"]) { box-shadow: 0 0 0 2px rgb(var(--inkt-rgb) / .55), var(--u-schaduw); }
/* De tekst in het lege veld blijft op één regel; te lang loopt uit op "…". */
textarea#invoerveld::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* De rollen in "add agent": een zichtbare ring met het toetsenbord. */
.sa-rol:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; border-color: var(--inkt); }
/* Op een telefoon mag de uitleg van een rol twee regels. */
@media (max-width: 420px) {
  .sa-rol small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ======================= kaart, infrastructuur en karakter: veel agents, namen, aanraken, toetsenbord ======================= */
/* Vanaf drie rijen poppetjes reikt het raster tot boven in beeld: ruimte
 * laten voor de knoppen rechtsboven (agents.js zet agentvlak--vol). */
.agentvlak.agentvlak--vol:not(.infra-vrij) { padding-top: 76px; padding-bottom: 12px; }
@media (max-width: 760px) { .agentvlak.agentvlak--vol:not(.infra-vrij) { padding-top: 64px; } }
/* Lang drukken is het bewerkformulier (langdruk.js): geen tekstselectie of
 * iOS-menu eroverheen. */
.agentkaartje, .infra-tegel { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Op de infrastructuurlaag blijven de namen staan: zonder zijn het acht
 * vlekken in bijna dezelfde kleur, en weet niemand wie "een agent" is. Het
 * poppetje staat op .78, dus de letter is groter gezet dan hij oogt. */
.agentvlak.infra-vrij .agentnaam {
  display: block; margin-top: -12%;
  max-width: 11em; overflow: hidden; text-overflow: ellipsis;
  font-size: 17px; color: var(--u-ink, var(--inkt));
  text-shadow: 0 0 6px rgb(var(--vel-rgb)), 0 0 2px rgb(var(--vel-rgb));
}
@media (max-width: 640px) { .agentvlak.infra-vrij .agentnaam { font-size: 15px; max-width: 7.5em; } }

/* Het vel op een aanraakscherm: één vinger schuift, twee zoomen (infra.js).
 * De browser moet dan niet zelf de pagina gaan schuiven of zoomen. */
.agentkaart.infra-modus, .agentkaart.infra-modus .agentvlak { touch-action: none; }
/* Op de laag schuift de kaart zelf; het vlak is dan geen schuifvak meer. */
.agentvlak.infra-vrij { overflow: visible; }
.agentkaart.infra-modus .infra-gereedschap { touch-action: pan-x; overscroll-behavior-x: contain; }

/* Toetsenbord op de kaart: wat de focus heeft, is te zien. */
.infra-tegel:focus-visible { outline: 2px solid var(--u-ink, var(--inkt)); outline-offset: 3px; }
.agentvlak.infra-vrij .agentkaartje:focus-visible { outline: 2px solid var(--u-ink, var(--inkt)); outline-offset: -14%; border-radius: 50%; }
.infra-handvat:focus-visible { outline: 2px solid var(--u-ink, var(--inkt)); outline-offset: 2px; transform: translateY(-50%) scale(1); color: rgb(var(--vlak-rgb)); background: var(--kleur); }
.infra-menuknop:focus-visible { outline: 2px solid var(--u-ink, var(--inkt)); outline-offset: -2px; }

/* Aanraken: alles wat je aantikt minstens 44 pixels. Het handvat is altijd
 * zichtbaar (er is geen erover gaan) en heeft een ruimer doelgebied dan hij
 * groot is. De balk onderaan schuift opzij als hij niet past. */
@media (pointer: coarse) {
  .kaartbalkknop--icoon { width: 44px; height: 44px; }
  .infra-werktuig, .infra-werktuig--enkel, .infra-chip { min-width: 44px; min-height: 44px; justify-content: center; }
  .infra-gereedschap { max-width: calc(100vw - 16px); scroll-snap-type: x proximity; }
  .infra-balk { padding: 0 8px; }
  .infra-handvat {
    width: 28px; height: 28px; right: -30px;
    color: rgb(var(--vlak-rgb)); background: var(--kleur);
    transform: translateY(-50%) scale(1);
  }
  /* Het doelgebied groeit van de tegel af, niet ernaartoe: anders valt een
   * tik op de tegel op het handvat. Samen 44 bij 44. */
  .infra-handvat::after { inset: -8px -16px -8px 0; border-radius: 22px; }
  /* Het poppetje staat op .78: groter zetten dan hij oogt, doelgebied samen 44. */
  .infra-handvat--agent { width: 32px; height: 32px; top: 30%; right: 16%; transform: translateY(-50%) scale(1); }
  .infra-handvat--agent::after { inset: -13px -13px -13px -4px; }
  .infra-handvat::after, .infra-handvat--agent::after { transform: none; }   /* hier staat hij al op volle grootte */
  .infra-menuknop { min-height: 44px; }
  .nk-info { width: 30px; height: 30px; font-size: 13px; }
  .nk-info::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
}
/* ======================= einde kaart, infrastructuur en karakter ======================= */
/* Op een telefoon smallere namen onder de blokjes: 144 pixels per blokje is
 * een derde van het scherm, en dan past er niets meer naast elkaar. */
@media (max-width: 640px) {
  .infra-bijschrift { left: -56px; width: 112px; }
  .infra-naam, .infra-knoop--blok .infra-naam { font-size: 12px; }
  .infra-onder, .infra-knoop--blok .infra-onder { font-size: 11px; }
  .infra-handvat--agent { top: 30%; right: 16%; }
}

/* De incidenten in de instellingen (src/incidenten.js), alleen voor de beheerder. */
.ic-rol { overflow-x: auto; }
.ic-tabel { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--u-ink); }
.ic-tabel th { text-align: left; font-weight: 400; color: var(--u-tag); padding: 0 8px 6px 0; }
.ic-tabel td { vertical-align: top; padding: 6px 8px 6px 0; border-top: 1px solid var(--u-line); }
.ic-waar { display: block; font-weight: 500; }
.ic-bericht { display: block; color: var(--u-ink-3); overflow-wrap: anywhere; }

/* De trechter in de instellingen (src/trechter.js), alleen voor de beheerder. Balken zonder bibliotheek: een spoor met een vulling. */
.trechter[hidden] { display: none; }
.tr-periode { display: flex; gap: 6px; margin: 0 0 12px; }
.tr-periode button { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--u-line-2); background: transparent; color: var(--u-ink-2); cursor: pointer; }
.tr-periode button[aria-pressed="true"] { background: var(--u-ink); border-color: var(--u-ink); color: var(--u-surface); }
.tr-stappen, .tr-weken { list-style: none; margin: 0; padding: 0; }
.tr-stap { display: grid; gap: 4px; padding: 6px 0; }
.tr-stap + .tr-stap { border-top: 1px solid var(--u-line-zacht); }
.tr-kop { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--u-ink); }
.tr-getal { font-weight: 500; color: var(--u-ink); }
.tr-door { font-size: 12px; color: var(--u-ink-3); }
.tr-spoor { display: block; height: 8px; border-radius: 999px; background: var(--u-panel); overflow: hidden; }
.tr-vul { display: block; height: 100%; width: var(--tr-b, 0%); border-radius: inherit; background: var(--u-ink); }
.tr-noot { margin-top: 8px !important; font-size: 12px !important; }
.tr-sub { display: block; margin: 14px 0 6px; font-size: 12.5px; color: var(--u-tag); }
.tr-week { display: grid; grid-template-columns: 52px 1fr 32px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: var(--u-ink-2); }
.tr-week .tr-getal { text-align: right; }

/* ---------------- het plan (instellingen) en het upgrade-moment ----------------
 *
 * src/plan.js. Geen vierde kleur: vol is inkt met een inktstreep, zoals een
 * melding; de knop naar de betaalpagina is de enige volle inkt in het blok.
 */
.plan[hidden] { display: none; }
.pn-kop { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; }
.pn-naam { font-size: 22px; font-weight: 500; letter-spacing: -.03em; color: var(--u-ink); text-transform: lowercase; }
.pn-let { padding: 8px 10px; font-size: 13px; line-height: 1.45; color: var(--u-ink) !important; font-weight: 500; background: var(--vlak-2); border-radius: var(--r-m); box-shadow: inset 2px 0 0 var(--u-ink); }
.pn-gebruik { display: flex; flex-direction: column; margin: 0 0 12px; padding: 4px 12px; border: 1px solid var(--haarlijn); border-radius: var(--r-m); }
.pn-regel { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--u-ink-3); }
.pn-regel + .pn-regel { border-top: 1px solid var(--u-line-zacht); }
.pn-waarde { color: var(--u-ink); text-align: right; }
.pn-regel--vol .pn-waarde { font-weight: 600; }
.pn-regel--vol { box-shadow: inset 2px 0 0 var(--u-ink); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.pn-intervallen { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.pn-intervallen .mk-standen { display: flex; }
.pn-intervallen .mk-stand { flex: 1; }
.pn-prijs { margin: 0 2px; font-size: 13px; color: var(--u-ink); }
.pn-klein { color: var(--u-ink-3); }
.pn-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.kaartbalkknop.pn-primair { color: rgb(var(--vlak-rgb)); background: var(--inkt); border-color: var(--inkt); text-decoration: none; }
/* Een link als knop ("request pro"): inline liep zijn opvulling over de kop eronder heen. */
a.kaartbalkknop { display: inline-flex; align-items: center; }
.plan .pn-knoppen { margin-bottom: 18px; }
.kaartbalkknop.pn-primair:hover:not(:disabled) { background: rgb(var(--inkt-rgb) / .88); }
.pn-link { padding: 0; font: inherit; color: var(--u-ink); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; }
.pn-dlg { max-width: 400px; }
.pn-label { font-size: 12px; color: var(--u-tag); text-transform: lowercase; }
/* Referral (src/plan.js, docs/referral.md): de link om te delen. */
.pn-ref { display: grid; gap: 6px; margin: 0 0 18px; padding-top: 12px; border-top: 1px solid var(--u-line-zacht); }
.pn-ref p { margin: 0; font-size: 13px; }
.pn-refvak { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.pn-reflink { font: inherit; font-size: 12.5px; color: var(--u-ink); padding: 6px 10px; min-width: 0; border: 1px solid var(--u-line-2, var(--u-line)); border-radius: 12px; background: var(--u-surface); }
.pn-reflink:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 1px; }
.pn-moment:empty { display: none; }
.pn-moment .pn-intervallen { margin: 4px 0 0; }

/* De teststand (PA_TESTSTAND): een vast label, boven alles (app.js, toonTeststand).
 * Een lipje aan de bovenrand, in het midden: linksonder lag hij op een
 * telefoon over het plusje en de @ van de invoer, en over de rondleiding. */
.teststand {
  position: fixed;
  left: 50%;
  top: env(safe-area-inset-top, 0px);
  transform: translateX(-50%);
  z-index: 10000;
  padding: 0 9px 1px;
  border-radius: 0 0 8px 8px;
  background: var(--inkt);
  color: rgb(var(--vel-rgb));
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
}

/* Aanraken, de rest van de tool: alles wat je aantikt minstens 44 pixels
 * (de kaart heeft zijn eigen regel hierboven). De vorm blijft; alleen het
 * doelgebied groeit. Gemeten op 390 × 844: de knoppen in de invoerbalk,
 * sluitkruisjes, de rollen en de dobbelsteen bij een agent, de keuzes in
 * het takenformulier, Place in de bibliotheek, de tabs van Needs you. */
@media (pointer: coarse) {
  .kaartrij .icoonknop, .praatknop, .verstuur, .icoonknop,
  .ab-dobbel, .pl-icoon { min-width: 44px; min-height: 44px; }
  .ab-rol, .pl-seg, .pl-pil, .pl-chip, .infra-biebknop, .nd-tab, .sa-chip, .ab-knop, .pl-knop,
  .nd-knop, .dlg-knop, .wt-pil, .md-chip, .nd-kies { min-height: 44px; }
  /* In de teamlijst van de onboarding staan ze dicht op elkaar: daar groeit
   * alleen het onzichtbare doelgebied, zodat de kaartjes niet verspringen. */
  .ob-naam, .ob-ikoon { position: relative; }
  .ob-naam::after, .ob-ikoon::after { content: ''; position: absolute; inset: -12px -5px; }
  .ob-ikoon::after { inset: -5px; }
  .ob .ob-agent-acties { gap: 10px; }   /* de doelgebieden van dobbelen en weghalen raken elkaar niet */
}

/* De balk van de infrastructuur op een telefoon: in twee regels in plaats van
 * opzij te schuiven. Schuivend stonden Document, Block en de hulp buiten beeld,
 * zonder dat je zag dat er meer was. Wat erboven opengaat schuift mee omhoog. */
@media (max-width: 640px) and (pointer: coarse) {
  .infra-gereedschap { flex-wrap: wrap; justify-content: center; overflow-x: visible; border-radius: 24px; row-gap: 2px; }
  .infra-scheiding { display: none; }
  .infra-lade, .infra-selectiebalk { bottom: 132px; }
  .infra-formulier, .infra-status { bottom: 134px; }
  .infra-formulier { max-height: calc(100dvh - 170px); }
  .infra-kijker { bottom: 140px; }
}