/* Svare EDI — de schil in de svare.com-huisstijl (richting 2).
   Bovenaan de tokens en componenten uit de goedgekeurde mockups; onderaan de
   klassen die de huidige schermen nog gebruiken, in dezelfde tokens. De
   schermen worden in taak 8–11 naar de mockup-klassen omgebouwd. */

/* ---------- Archivo, zelf gehost (OFL) — kopie van svare.com ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 250 750;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fonts/Archivo-Kern.d91ddb59a5.woff2") format("woff2");
  unicode-range: U+20-7E, U+A0, U+A7, U+A9, U+AD, U+B3, U+B7, U+D5, U+D7, U+DC, U+E4, U+E9, U+EB, U+ED, U+EF, U+F3, U+10D, U+117, U+161, U+173, U+17E, U+2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+203A, U+2060, U+20AC;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 250 750;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/assets/fonts/Archivo-Rest.b27b237827.woff2") format("woff2");
  unicode-range: U+A3, U+AB, U+B0-B2, U+BB-BE, U+C0-C2, U+C4-CF, U+D1-D4, U+D6, U+D8-DB, U+DF-E2, U+E5-E8, U+EA, U+EC, U+EE, U+F1-F2, U+F4-F6, U+F8-FC, U+FF-101, U+104-105, U+10C, U+112-113, U+116, U+118-119, U+122-123, U+12A-12B, U+12E-12F, U+136-137, U+13B-13C, U+145-146, U+14C-14D, U+156-157, U+160, U+16A-16B, U+172, U+17D, U+2009, U+201A, U+201E, U+202F-2030;
}

/* ---------- tokens ---------- */
:root {
  --diep: #0E2A27; --groen: #185350; --mint: #7FC79C; --mintl: #DCEFE3; --krijt: #F4F7F3; --wit: #FFFFFF;
  --oranje: #F2670A; --oranje-h: #DE5C06; --oranje-rand: #A84405; --op-oranje: #1A1208;
  --ink: #1B3B38; --ink2: #47605C; --ink3: #5C7370;
  --lijn: #D3DED8; --lijn2: #E6EDE9; --veldrand: #BFCEC6; --hover: #F7FAF8;
  --rood: #B42318; --rood-v: #FDEDEB; --oker: #855700; --oker-v: #FFF3D6;
  --op-diep: #EAF4EE; --op-diep-2: #B5CCC2;
  --r-vlak: .9333rem; --r-veld: .6667rem;
  --schaduw: 0 1px 2px rgba(14,42,39,.06), 0 2px .5333rem rgba(14,42,39,.04);
  --schaduw-hoog: 0 1.2rem 3.2rem rgba(14,42,39,.22), 0 .4rem .9333rem rgba(14,42,39,.12);
  --glij: cubic-bezier(.22,1,.36,1);

  /* oude namen, zodat de huidige schermen dezelfde kleuren krijgen */
  --ink-2: var(--ink2); --ink-3: var(--ink3); --lijn-licht: var(--lijn2);
  --vlak: var(--hover); --accent: var(--groen); --accent-d: var(--diep);
  --ok: var(--groen); --fout-s: var(--rood); --fout-vlak: var(--rood-v);
  --oker-vlak: var(--oker-v); --groen-v: var(--mintl); --geel-v: var(--oker-v);
  --r: var(--r-veld);
}

* { box-sizing: border-box; }
/* Het hidden-attribuut wint altijd, ook van een eigen display op de klasse. */
[hidden] { display: none !important; }
/* Meeschalen zoals svare.com: 15px tot 1920 breed, daarboven groeit de rem tot
   16px op 2560; op een telefoon 16px. Alle maten hieronder staan in rem (basis
   15px = het ontwerp op 1440 breed); randen, haarlijnen en kleine schaduwen in px. */
html { font-size: clamp(93.75%, calc(12px + 0.15625vw), 100%); --goot: 1rem; --kader: calc(100% - 2 * max(0px, 4.5vw - var(--goot))); }
@media (min-width: 48rem) { html { --goot: 2rem; } }
@media (max-width: 47.99rem) { html { font-size: 100%; } }
html, body { margin: 0; }
body { font-family: "Archivo", system-ui, sans-serif; font-size: .9rem; line-height: 1.45; color: var(--ink); background: var(--krijt); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: var(--mint); color: var(--diep); }
:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
a { color: var(--groen); text-underline-offset: 3px; }
a:hover { color: var(--diep); }
.mono, code { font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace; font-size: .8333rem; }
code { background: var(--krijt); border: 1px solid var(--lijn2); border-radius: .4rem; padding: 1px .4rem; color: var(--ink); }
.tab { font-variant-numeric: tabular-nums; }
.wijd { font-stretch: 125%; }
.muted { color: var(--ink3); }
.klein { font-size: .8333rem; }
svg.i { width: 1.0667rem; height: 1.0667rem; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- schil: topbalk ---------- */
.top { background: var(--diep); color: var(--op-diep); }
.top-in { width: var(--kader); margin: 0 auto; height: 3.8667rem; padding: 0 var(--goot); display: flex; align-items: center; gap: 1.8667rem; }
.merk { display: flex; align-items: center; gap: .6667rem; color: var(--op-diep); text-decoration: none; }
a.merk:hover { color: var(--op-diep); }
.merk img { width: 1.6rem; height: 1.6rem; display: block; }
.merk-woord { display: flex; align-items: baseline; gap: .7333rem; }
.merk b { font-stretch: 125%; font-weight: 650; font-size: 1.2667rem; letter-spacing: -0.01em; line-height: 1; }
/* "EDI" op de basislijn van "svare"; de scheidingslijn houdt teksthoogte (line-height 1). */
.merk-edi { font-weight: 500; font-size: .8667rem; line-height: 1; color: var(--mint); padding-left: .7333rem; border-left: 1px solid rgba(234,244,238,.22); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { color: var(--op-diep-2); text-decoration: none; padding: .4667rem .9333rem; border-radius: 999px; font-weight: 500; }
.nav a:hover { color: var(--op-diep); background: rgba(234,244,238,.08); }
.nav a[aria-current="page"] { background: var(--mint); color: var(--diep); font-weight: 600; }
.top-r { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; color: var(--op-diep-2); font-size: .8333rem; }
.top-r a { color: var(--op-diep-2); text-decoration: none; }
.top-r a:hover, .top-r a[aria-current="page"] { color: var(--op-diep); }
.top-r form { margin: 0; display: contents; }
.top-r .linkknop { background: none; border: 0; padding: 0; font: inherit; color: var(--op-diep-2); cursor: pointer; }
.top-r .linkknop:hover { color: var(--op-diep); }
.top :focus-visible { outline-color: var(--mint); }
.gezond { display: inline-flex; align-items: center; gap: .4667rem; }
.gezond::before { content: ""; width: .4667rem; height: .4667rem; border-radius: 50%; background: var(--mint); }
.gezond.storing::before { background: #FF8A7A; }
.wie { color: var(--op-diep-2); }
.wie b { color: var(--op-diep); font-weight: 600; }
.wie a { color: var(--op-diep); }

/* ---------- pagina ---------- */
/* Het kader vult het scherm zoals op svare.com: een marge van 4,5vw (minimaal de goot). */
.pagina { width: var(--kader); margin: 0 auto; padding: 1.7333rem var(--goot) 3.7333rem; flex: 1 0 auto; }
.kruimel { font-size: .8333rem; color: var(--ink3); margin: 0 0 .5333rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.kruimel a { color: var(--ink2); text-decoration: none; }
.kruimel a:hover { color: var(--groen); text-decoration: underline; }
.kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.3333rem; flex-wrap: wrap; margin-bottom: 1.4667rem; }
.kop-l { min-width: 0; }
h1 { font-stretch: 125%; font-weight: 650; font-size: 1.8rem; line-height: 1.15; letter-spacing: -0.012em; margin: 0; color: var(--diep); overflow-wrap: anywhere; }
h2 { font-size: 1rem; font-weight: 650; margin: 0; color: var(--diep); }
h3 { font-size: .9rem; font-weight: 650; margin: 0; color: var(--diep); }
.onder { color: var(--ink2); margin-top: .4667rem; display: flex; gap: .5333rem; align-items: center; flex-wrap: wrap; }
.onder .sep { color: var(--lijn); }
.acties { display: flex; gap: .5333rem; align-items: center; flex-wrap: wrap; }
td.acties, th.acties { display: table-cell; }

/* ---------- voetregel van de schil ---------- */
.schilvoet { width: var(--kader); margin: 0 auto; padding: 0 var(--goot) 1.8667rem; font-size: .8rem; color: var(--ink3); }
.schilvoet a { color: var(--ink3); text-decoration: none; }
.schilvoet a:hover { color: var(--groen); text-decoration: underline; }

/* ---------- knoppen: pillen zoals svare.com ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .4667rem; height: 2.4rem; padding: 0 1.0667rem; border-radius: 999px; border: 1.5px solid var(--veldrand); background: var(--wit); color: var(--ink); font: 600 .8667rem/1 "Archivo", system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color .16s var(--glij), background .16s var(--glij); }
.knop:hover { border-color: var(--groen); color: var(--diep); }
.knop-p { background: var(--oranje); border-color: var(--oranje-rand); color: var(--op-oranje); }
.knop-p:hover { background: var(--oranje-h); border-color: var(--oranje-rand); color: var(--op-oranje); }
.knop-stil { background: transparent; border-color: transparent; color: var(--groen); padding: 0 .6667rem; }
.knop-stil:hover { background: var(--mintl); border-color: transparent; }
.knop-k { height: 2rem; padding: 0 .8rem; font-size: .8333rem; }
.knop-i { width: 2.4rem; padding: 0; }
.knop-k.knop-i { width: 2rem; }
.knop[disabled] { opacity: .45; cursor: default; }
/* Niets live te zetten: grijs, niet oranje. */
.knop-p[disabled], .knop-p[disabled]:hover { opacity: 1; background: var(--krijt); border-color: var(--lijn); color: #8A9C97; }

/* ---------- vlakken ---------- */
.vlak { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); box-shadow: var(--schaduw); }
.vlak-kop { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .9333rem 1.3333rem; border-bottom: 1px solid var(--lijn2); min-height: 3.6rem; }
.vlak-kop .links { display: flex; align-items: center; gap: .5333rem; }
.sectie { padding: 1.2rem 1.3333rem; }
.sectie + .sectie { border-top: 1px solid var(--lijn2); }
.hulp { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1px solid var(--lijn); background: var(--wit); color: var(--ink3); font: 600 .7333rem/1 "Archivo", sans-serif; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.hulp:hover { border-color: var(--groen); color: var(--groen); }

/* ---------- tabellen ---------- */
.tbl-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
.t th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--ink3); padding: .7333rem 1.0667rem; border-bottom: 1.5px solid var(--lijn); white-space: nowrap; }
.t td { padding: .8rem 1.0667rem; border-bottom: 1px solid var(--lijn2); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t tbody tr.klik { cursor: pointer; }
.t tbody tr.klik:hover td { background: var(--hover); }
.t .r { text-align: right; }
.t .naam { font-weight: 600; color: var(--diep); }
.t .naam a { color: var(--diep); text-decoration: none; }
.t .naam a:hover { text-decoration: underline; }

/* ---------- status: kleur alleen voor afwijkingen ---------- */
.st { display: inline-flex; align-items: center; gap: .4667rem; white-space: nowrap; }
.st::before { content: ""; width: .4667rem; height: .4667rem; border-radius: 50%; background: currentColor; flex: none; }
.st-ok { color: var(--ink3); }
.st-fout { color: var(--rood); font-weight: 600; }
.st-dup { color: var(--oker); font-weight: 600; }
.st-loopt { color: var(--groen); }
.st-uit { color: var(--ink3); }
.st-uit::before { background: transparent; border: 1.5px solid currentColor; }
/* Wachtend vervolgbericht: open groen bolletje. */
.st-wacht { color: var(--ink2); }
.st-wacht::before { background: var(--wit); border: 1.5px solid var(--groen); }
a.st { text-decoration: none; }
a.st:hover { text-decoration: underline; }
.pil { display: inline-flex; align-items: center; gap: .4rem; height: 1.4667rem; padding: 0 .6667rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.pil-live { background: var(--mintl); color: #10403B; }
.pil-concept { background: var(--oker-v); color: var(--oker); }
.pil-grijs { background: var(--krijt); color: var(--ink2); border: 1px solid var(--lijn); }
.pil-oker { background: var(--oker-v); color: var(--oker); }
.s-let { color: var(--oker); font-weight: 600; }

/* ---------- formulieren ---------- */
.veld { display: grid; gap: .4rem; min-width: 0; }
.veld > label, .lbl { font-size: .8333rem; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: .4rem; margin: 0; }
.in { height: 2.4rem; padding: 0 .8rem; border: 1.5px solid var(--veldrand); border-radius: var(--r-veld); background: var(--wit); font: inherit; color: var(--ink); width: 100%; min-width: 0; }
.in::placeholder { color: #8A9C97; }
.in:focus { outline: 2px solid var(--groen); outline-offset: 1px; border-color: var(--groen); }
select.in { appearance: none; padding-right: 2.1333rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23185350' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; }
.in.mono { font-size: .8333rem; }
.rij { display: grid; gap: .9333rem; }
.wissel { display: inline-flex; align-items: center; gap: .6667rem; cursor: pointer; font-weight: 500; }
.wissel input { appearance: none; width: 2.2667rem; height: 1.3333rem; border-radius: 999px; background: var(--veldrand); position: relative; margin: 0; cursor: pointer; transition: background .16s var(--glij); flex: none; }
.wissel input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.0667rem; height: 1.0667rem; border-radius: 50%; background: var(--wit); box-shadow: 0 1px 2px rgba(14,42,39,.25); transition: left .16s var(--glij); }
.wissel input:checked { background: var(--groen); }
.wissel input:checked::after { left: 1.0667rem; }
.segment { display: inline-flex; padding: .2rem; background: var(--krijt); border: 1px solid var(--lijn); border-radius: 999px; gap: 2px; }
.segment button { border: 0; background: transparent; font: 500 .8333rem/1 "Archivo", sans-serif; color: var(--ink2); padding: .4667rem .8667rem; border-radius: 999px; cursor: pointer; }
.segment button[aria-pressed="true"] { background: var(--wit); color: var(--diep); font-weight: 600; box-shadow: 0 1px 2px rgba(14,42,39,.12); }

/* ---------- concept-balk (alles in één concept) ---------- */
.concept { display: inline-flex; align-items: center; gap: .8rem; padding: .2667rem .2667rem .2667rem 1.0667rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; box-shadow: var(--schaduw); }
.concept .tekst { font-size: .8333rem; color: var(--ink2); display: inline-flex; align-items: center; gap: .5333rem; white-space: nowrap; }
.concept .tekst b { color: var(--oker); font-weight: 600; }
.concept .stip { width: .4667rem; height: .4667rem; border-radius: 50%; background: #D69A1E; }

/* ---------- overlays ---------- */
.dek { position: absolute; inset: 0; background: rgba(14,42,39,.38); }
.paneel { position: absolute; background: var(--wit); border-radius: var(--r-vlak); box-shadow: var(--schaduw-hoog); border: 1px solid var(--lijn); }
.menu { padding: .4rem; min-width: 14.6667rem; }
.menu a, .menu button, .menu label { display: flex; width: 100%; align-items: center; gap: .6rem; padding: .5333rem .6667rem; border-radius: .5333rem; color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; font-weight: 400; cursor: pointer; text-align: left; margin: 0; }
.menu a:hover, .menu button:hover, .menu label:hover { background: var(--krijt); }
.menu button[disabled] { color: var(--ink3); cursor: not-allowed; }
.menu button[disabled]:hover { background: none; }
.menu form { margin: 0; }
.menu .gevaar { color: var(--rood); }
.menu hr { border: 0; border-top: 1px solid var(--lijn2); margin: .4rem .2667rem; }
/* sectiekop in een ⋯-menu: vet, iets groter, met een scheidingslijn boven elke volgende sectie */
.menu .menu-kop { font-size: .8667rem; color: var(--diep); font-weight: 700; margin: .2667rem 0 2px; padding: .2667rem .6667rem 2px; }
.menu > .menu-kop ~ .menu-kop { margin-top: .5333rem; padding-top: .8rem; border-top: 1px solid var(--lijn); }

/* ---------- voetregel in een lijst ---------- */
.voet { color: var(--ink3); font-size: .8333rem; display: flex; gap: .6667rem; align-items: center; flex-wrap: wrap; margin-top: 1.0667rem; }
.voet .sep { color: var(--lijn); }

/* ---------- inlogpagina's (rol null): diepe kolom links, witte kaart rechts ---------- */
body.auth { background: var(--diep); }
.grond { flex: 1 0 auto; min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 3.2rem; padding: 3.2rem 8vw; }
.zij { color: var(--op-diep); display: grid; gap: 1.4667rem; max-width: 34.6667rem; }
.zij .merk b { font-size: 1.6rem; }
.zij .merk img { width: 2rem; height: 2rem; }
.zij p { margin: 0; color: var(--op-diep-2); font-size: 1rem; line-height: 1.6; max-width: 42ch; }
.authkaart { background: var(--wit); border-radius: 1.4667rem; padding: 2.4rem 2.4rem 2rem; max-width: 28rem; width: 100%; justify-self: center; box-shadow: 0 1.6rem 3.7333rem rgba(0,0,0,.28); }
.authkaart.breed { max-width: 32rem; }
.authkaart h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.authkaart h1 + .form, .authkaart h1 + .fout, .authkaart h1 + .melding { margin-top: 1.2rem; }
.authkaart h2 { margin-bottom: .6667rem; }
.authkaart .onder { display: block; margin: 0 0 1.6rem; }
.authkaart form { margin: 0; }
.form { display: grid; gap: 1.0667rem; }
.authkaart .form .knop-p { height: 2.9333rem; width: 100%; font-size: .9333rem; }
.rijtje { display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: .8333rem; }
.uitnod { margin-top: 1.4667rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn2); font-size: .8333rem; color: var(--ink3); }
.grondvoet { grid-column: 1 / -1; justify-self: center; color: var(--op-diep-2); font-size: .8333rem; text-decoration: none; }
.grondvoet:hover { color: var(--op-diep); text-decoration: underline; }
.qr { width: 12rem; height: 12rem; margin: .2667rem 0 .8rem; }
.qr svg { width: 100%; height: 100%; }
.blok { padding: 1.2rem 0; border-top: 1px solid var(--lijn2); }
.blok:first-of-type { border-top: 0; padding-top: 0; }
.stil { color: var(--ink3); }
.accountkaart { max-width: 37.3333rem; padding: 1.4667rem 1.6rem; }
.accountkaart .blok:first-of-type { padding-top: .2667rem; }
.accountkaart .blok > h2 { margin-bottom: .9333rem; }

/* foutpagina's */
.foutkaart { max-width: 37.3333rem; padding: 1.8667rem 1.8667rem 1.6rem; }
.foutkaart p { margin: .5333rem 0 1.2rem; color: var(--ink2); }
.foutkaart pre { white-space: pre-wrap; word-break: break-word; margin: 0 0 1.2rem; }

@media (max-width: 860px) {
  .grond { grid-template-columns: 1fr; align-content: center; padding: 2.6667rem 1.0667rem 1.8667rem; gap: 2.1333rem; }
  .zij { justify-self: center; text-align: center; }
  .zij .merk { justify-content: center; }
  .authkaart { padding: 1.8667rem 1.3333rem 1.6rem; }
}
@media (max-width: 760px) {
  .top-in { padding: .6667rem var(--goot); gap: .6667rem .9333rem; height: auto; min-height: 3.8667rem; flex-wrap: wrap; }
  .nav { order: 3; width: 100%; margin: 0 -.9333rem; }
  .nav a { padding: .4rem .8rem; }
  .top-r { margin-left: auto; gap: .9333rem; }
  .pagina { padding: 1.3333rem var(--goot) 3.2rem; }
  .schilvoet { padding: 0 var(--goot) 1.6rem; }
  h1 { font-size: 1.5333rem; }
}

/* ======================================================================
   Huidige schermen (tot taak 8–11): dezelfde klassen als voorheen, in de
   nieuwe tokens. Element-regels staan in :where(), zodat de klassen hierboven
   (.in, .veld, .wissel …) altijd winnen.
   ====================================================================== */

/* hulpklassen in plaats van style-attributen (die staan onder de CSP niet toe) */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .3733rem; }
.mt-2 { margin-top: .8rem; }
.inline { display: inline; }
.midden { text-align: center; }
.smal-vlak { max-width: 46.9333rem; }
.tpl-vlak { max-width: 65.3333rem; }
col.w8 { width: 8%; } col.w12 { width: 12%; } col.w14 { width: 14%; } col.w16 { width: 16%; }
col.w18 { width: 18%; } col.w20 { width: 20%; } col.w22 { width: 22%; } col.w24 { width: 24%; }
col.w26 { width: 26%; } col.w28 { width: 28%; } col.w30 { width: 30%; }
th.w34 { width: 34%; } th.w-kort { width: 6.9333rem; } th.w-bron { width: 10.1333rem; }
.voorbeeld-frame { width: 100%; height: 65vh; border: 1px solid var(--lijn); border-radius: var(--r-veld); background: var(--wit); }

.titelrij { display: flex; align-items: center; gap: .8rem 1.0667rem; margin-bottom: 1.4667rem; flex-wrap: wrap; }
.titelrij .rechts { margin-left: auto; display: flex; gap: .5333rem; align-items: center; flex-wrap: wrap; }
.titelrij form { margin: 0; }

/* badges → pillen */
.badge { display: inline-flex; align-items: center; gap: .32rem; height: 1.4667rem; padding: 0 .6667rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.b-groen { background: var(--mintl); color: #10403B; }
.b-rood { background: var(--rood-v); color: var(--rood); }
.b-grijs { background: var(--krijt); color: var(--ink2); border: 1px solid var(--lijn); }
.b-oker { background: var(--oker-v); color: var(--oker); }
a .badge, a.badge { text-decoration: none; }

/* .btn → dezelfde pil als .knop */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.2667rem; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--veldrand); background: var(--wit); color: var(--ink); font: 600 .8667rem/1 "Archivo", system-ui, sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; margin: 0; transition: border-color .16s var(--glij), background .16s var(--glij); }
.btn:hover { border-color: var(--groen); color: var(--diep); }
.btn-primair { background: var(--oranje); border-color: var(--oranje-rand); color: var(--op-oranje); }
.btn-primair:hover { background: var(--oranje-h); border-color: var(--oranje-rand); color: var(--op-oranje); }
.btn-secundair { background: var(--wit); color: var(--ink); }
.btn-klein { height: 1.8667rem; padding: 0 .7333rem; font-size: .8333rem; }
.btn-x { border: none; background: none; color: var(--ink3); cursor: pointer; font-size: 1.0667rem; padding: .1067rem .4267rem; border-radius: .4rem; line-height: 1; }
.btn-x:hover { background: var(--rood-v); color: var(--rood); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

/* statustekst — kleur alleen voor afwijkingen */
.s-ok { color: var(--groen); }
.s-fout { color: var(--rood); font-weight: 600; }
.s-dup { color: var(--oker); font-weight: 600; }
.s-hold { color: var(--oker); }
.s-stil { color: var(--ink3); }
.s-gedempt { color: var(--ink2); }
a.s-fout, a.s-dup, a:has(> .s-fout), a:has(> .s-dup) { text-decoration: none; }

.voetregel { color: var(--ink3); font-size: .8333rem; margin-top: 1.0667rem; }
.voetregel .bol { display: inline-block; width: .4667rem; height: .4667rem; border-radius: 50%; background: var(--mint); margin-right: .4667rem; }
.voetregel .bol.rood { background: var(--rood); }

/* stapnavigatie (Source · Read · Translate · Check · Deliver) */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 1.0667rem; border-bottom: 2px solid var(--lijn); }
.stepper .st { display: block; padding: .5333rem .2667rem .6rem; font-size: .8667rem; color: var(--ink2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.stepper .st::before { content: none; }
.stepper a.st:hover { color: var(--diep); }
.stepper .st.aan { color: var(--diep); border-bottom-color: var(--groen); font-weight: 650; }
.stepper .st.groen { color: var(--groen); }
.stepper .st.rood { color: var(--rood); border-bottom-color: var(--rood); }
.stepper .st.uit { color: #A9B8B2; }

/* kaarten → vlakken */
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); margin-bottom: 1.0667rem; box-shadow: var(--schaduw); }
.kaart-kop { display: flex; align-items: center; gap: .64rem; padding: .8rem 1.3333rem; min-height: 3.4667rem; border-bottom: 1px solid var(--lijn2); }
.kaart-kop h2 { font-size: 1rem; margin: 0; }
.kaart-kop .rechts { margin-left: auto; display: flex; gap: .5333rem; align-items: center; }
.kaart-body { padding: 1.2rem 1.3333rem; }
.kaart-voet { padding: .8rem 1.3333rem; border-top: 1px solid var(--lijn2); display: flex; align-items: center; gap: .8rem; background: var(--hover); border-radius: 0 0 var(--r-vlak) var(--r-vlak); }
.kaart-voet .muted { margin-left: auto; }

.muted, table.flows td, table.data td { font-variant-numeric: tabular-nums; }
.uitleg { color: var(--ink2); margin: .2133rem 0 .7467rem; }
.subkop { font-size: .8rem; color: var(--ink3); font-weight: 600; margin: 1.4933rem 0 .5333rem; }
.subkop:first-child { margin-top: 0; }

/* velden */
:where(label) { font-weight: 600; font-size: .8333rem; display: block; margin: 0 0 .7467rem; }
label.checkbox { display: flex; align-items: center; gap: .48rem; }
label.checkbox input { width: auto; margin: 0; }
:where(input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], select) { min-height: 2.2667rem; padding: 0 .6667rem; font: inherit; font-weight: 400; color: var(--ink); border: 1.5px solid var(--veldrand); border-radius: var(--r-veld); background: var(--wit); }
:where(label) > :where(input[type=text], input[type=password], input[type=url], input[type=email], select, textarea) { display: block; margin-top: .4rem; }
:where(input, select, textarea):focus { outline: 2px solid var(--groen); outline-offset: 1px; border-color: var(--groen); }
input[type=file] { font: inherit; font-size: .8333rem; color: var(--ink2); }
input[type=file]::file-selector-button { height: 2rem; padding: 0 .8rem; margin-right: .6667rem; border-radius: 999px; border: 1.5px solid var(--veldrand); background: var(--wit); color: var(--ink); font: 600 .8333rem/1 "Archivo", system-ui, sans-serif; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--groen); color: var(--diep); }
.bestand-kies { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; }
input[disabled] { background: var(--hover); color: var(--ink3); }
input.mono, textarea.mono { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .8333rem; }
/* meegroeiend tekstvak (app.js): één regel hoog, lange expressies lopen door op een volgende regel */
textarea.groei { display: block; width: 100%; min-height: 2.4rem; height: 2.4rem; padding: .4667rem .6667rem; line-height: 1.2667rem; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-weight: 400; color: var(--ink); border: 1.5px solid var(--veldrand); border-radius: var(--r-veld); background: var(--wit); }
textarea.groei.mono { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .8333rem; }
::placeholder { color: #8A9C97; }
.veldrij { display: flex; gap: 1.0667rem; flex-wrap: wrap; margin-bottom: 1.0667rem; align-items: flex-end; }
.veldrij label { margin-bottom: 0; }
.veld-s input, .veld-s select { width: 13.8667rem; max-width: 100%; }
.veld-m input { width: 23.4667rem; max-width: 100%; }
.veld-groei { flex: 1; min-width: 17.0667rem; }
.veld-groei input { width: 100%; }
.veldgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.0667rem; margin-bottom: 1.0667rem; }
.veldgrid-2 input { width: 100%; }
.veld-kop { font-size: .9rem; margin: 0 0 .32rem; }
.key-status { margin: .2133rem 0 .7467rem; }
.scheiding { border: none; border-top: 1px solid var(--lijn2); margin: 1.3867rem 0; }
.spinner { display: inline-block; width: .95em; height: .95em; border: 2px solid var(--lijn); border-top-color: var(--groen); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -.12em; }
@keyframes spin { to { transform: rotate(360deg); } }
.bezig-regel { display: flex; align-items: center; gap: .5333rem; margin: .7467rem 0 0; color: var(--ink2); }

/* herhaalrijen als grid-tabel */
table.rijen { width: 100%; border-collapse: collapse; }
table.rijen th { text-align: left; font-size: .8rem; color: var(--ink3); font-weight: 600; padding: .5333rem .5333rem .6rem; border-bottom: 1.5px solid var(--lijn); }
table.rijen td { padding: .5333rem .5333rem; vertical-align: middle; }
table.rijen tr.uitlegrij td { padding: .1067rem .5333rem .5867rem; border-bottom: 1px solid var(--lijn2); vertical-align: top; }
table.rijen tr:last-child td { border-bottom: none; }
table.rijen input, table.rijen select { width: 100%; }
td.smal, th.smal { text-align: center; }
td.smal { width: 2.3467rem; white-space: nowrap; }
th.smal { white-space: nowrap; padding-right: .8rem; }
th.kolom-veldnaam { width: 12.2667rem; }
td.smal.acties, th.smal.acties { width: 3.9467rem; }
.uitleg-inline { color: var(--ink3); font-size: .8333rem; }
.rij-toevoegen { margin-top: .64rem; }
tr.uitlegrij .uitleg-invoer { width: calc(100% - 2.1333rem); border: none; background: none; color: var(--ink3); font-size: .8333rem; padding: .1067rem .2133rem; }
tr.uitlegrij:not(.open) { display: none; }

/* aanvullende bronnen (stap Read) */
.aanvulling { border: 1px solid var(--lijn); border-radius: var(--r-veld); padding: .8rem .9333rem; margin: 0 0 .8rem; min-width: 0; }
.aanvulling-kop { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .5333rem; }
.aanvulling-kop .verwijder-aanvulling { margin-left: auto; }
.aanvulling-onderwerp { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-top: .96rem; }
#aanvullingen-kaart label input, #aanvullingen-kaart label select { display: block; margin-top: .2667rem; }

/* twee kolommen (stap Read) */
.leesgrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.3333rem; align-items: start; }
.kolom-rechts { position: sticky; top: 1.0667rem; }
@media (max-width: 900px) { .leesgrid { grid-template-columns: minmax(0, 1fr); } .kolom-rechts { position: static; } }

/* live voorbeeld */
dl.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .32rem 1.0667rem; }
dl.kv dt { font-weight: 600; font-size: .8333rem; color: var(--ink2); }
dl.kv dd { margin: 0; font-family: ui-monospace, monospace; font-size: .8333rem; overflow-wrap: anywhere; }
.ok { color: var(--groen); } .mis { color: var(--rood); }
table.data { width: 100%; border-collapse: collapse; font-size: .8333rem; }
#voorbeeld-leesbaar { overflow-x: auto; }
table.data th { text-align: left; color: var(--ink3); font-weight: 600; font-size: .8rem; padding: .5333rem .5333rem; border-bottom: 1.5px solid var(--lijn); }
table.data td { padding: .6rem .5333rem; border-bottom: 1px solid var(--lijn2); font-family: ui-monospace, monospace; font-size: .8333rem; }
td.getal { text-align: right; font-variant-numeric: tabular-nums; }
tr.totaalrij td { border-top: 2px solid var(--lijn); }
details.json summary { cursor: pointer; color: var(--ink3); font-size: .8333rem; margin-top: .64rem; }
details.json pre { background: var(--krijt); border: 1px solid var(--lijn); border-radius: var(--r-veld); padding: .64rem; font-size: .8rem; overflow: auto; max-height: 13.3333rem; }

/* lijsten (flows, berichten, klanten, templates) — zoals table.t in een vlak */
table.flows { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); overflow: hidden; box-shadow: var(--schaduw); }
table.flows.berichten { table-layout: fixed; }
table.flows th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--ink3); padding: .7333rem 1.0667rem; border-bottom: 1.5px solid var(--lijn); background: var(--wit); white-space: nowrap; }
table.flows td { padding: .8rem 1.0667rem; border-bottom: 1px solid var(--lijn2); vertical-align: middle; }
table.flows tbody tr:last-child td { border-bottom: 0; }
table.flows tbody tr[data-href] { cursor: pointer; }
table.flows tbody tr[data-href]:hover td { background: var(--hover); }
.flownaam { font-weight: 600; color: var(--diep); } .flownaam .muted { font-weight: 400; }
.flownaam a { color: var(--diep); text-decoration: none; }
.flownaam a:hover { text-decoration: underline; }
table.berichten .kolom-onderwerp, table.berichten .kolom-afzender { max-width: 0; }
table.berichten td.kolom-onderwerp, table.berichten td.kolom-afzender { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
table.berichten .kolom-tijd, table.berichten .kolom-download { white-space: nowrap; }
.lijst-wrap { overflow-x: auto; border-radius: var(--r-vlak); }

/* meldingen */
.fout { color: var(--rood); background: var(--rood-v); padding: .8rem 1.0667rem; border-radius: var(--r-veld); margin-bottom: 1.0667rem; }
.fout ul { margin: .32rem 0 0; padding-left: 1.28rem; }
.melding { color: var(--diep); background: var(--mintl); padding: .8rem 1.0667rem; border-radius: var(--r-veld); margin-bottom: 1.0667rem; }
.waarschuwing { color: var(--oker); background: var(--oker-v); padding: .8rem 1.0667rem; border-radius: var(--r-veld); margin-bottom: 1.0667rem; }
.waarschuwing p { margin: 0 0 .5333rem; }
.status-regel { margin: .4267rem 0; }
.status-regel:empty, .formule-fout:empty { display: none; }
.fout.status-regel, .melding.status-regel { padding: .5333rem .8rem; margin: .4267rem 0; }
.formule-fout { font-size: .8rem; color: var(--rood); margin-top: .1067rem; min-height: 1em; }
:where(textarea) { width: 100%; font-family: ui-monospace, monospace; font-size: .8333rem; min-height: 12rem; padding: .5333rem .6667rem; border: 1.5px solid var(--veldrand); border-radius: var(--r-veld); color: var(--ink); background: var(--wit); }
:where(pre) { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-veld); padding: .8rem; overflow-x: auto; font-size: .8333rem; }
details summary { cursor: pointer; font-weight: 600; }

/* detailtabellen (bericht-detail, versiepaneel) */
table:not(.rijen):not(.data):not(.flows):not(.t) { border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: 1.6rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-veld); }
table:not(.rijen):not(.data):not(.flows):not(.t) th, table:not(.rijen):not(.data):not(.flows):not(.t) td { border-bottom: 1px solid var(--lijn2); padding: .6rem .8rem; text-align: left; vertical-align: top; }
table:not(.rijen):not(.data):not(.flows):not(.t) th { font-size: .8rem; color: var(--ink3); font-weight: 600; border-bottom: 1.5px solid var(--lijn); }
table:not(.rijen):not(.data):not(.flows):not(.t) tr:last-child td { border-bottom: 0; }

/* JSONata-editor (stap Translate) */
.jsonata-editor-wrap { position: relative; font-family: ui-monospace, monospace; font-size: .8333rem; line-height: 1.4; }
.jsonata-editor-wrap textarea, .jsonata-editor-wrap pre { margin: 0; padding: .64rem; border: 1px solid var(--lijn); border-radius: var(--r-veld); font-family: ui-monospace, monospace; font-size: .8333rem; line-height: 1.4; min-height: 21.3333rem; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.jsonata-editor-wrap pre { position: absolute; inset: 0; overflow: auto; pointer-events: none; background: var(--wit); color: var(--ink); }
.jsonata-editor-wrap textarea { position: relative; width: 100%; background: transparent; color: transparent; caret-color: var(--ink); resize: vertical; z-index: 1; }
.jsonata-string { color: #0b6b3a; }
.jsonata-sleutel { color: #8a3b00; }
.jsonata-getal { color: #1a56c4; }
.jsonata-functie { color: #7a1fa2; }
.jsonata-sleutelwoord { color: var(--rood); font-weight: 600; }
.jsonata-commentaar { color: var(--ink3); font-style: italic; }
.jsonata-fout-teken { background: var(--rood-v); outline: 1px solid var(--rood); border-radius: 2px; }
.mapping-xml-fout { color: var(--rood); background: var(--rood-v); padding: .64rem .8rem; border-radius: var(--r-veld); }

/* drieluik (stap Translate) */
.drieluik { display: grid; grid-template-columns: minmax(0, var(--dl-1, 3fr)) .4rem minmax(0, var(--dl-2, 5fr)) .4rem minmax(0, var(--dl-3, 4fr)); gap: .5333rem; align-items: stretch; margin-bottom: 1.0667rem; }
.dl-handle { width: .4rem; align-self: stretch; cursor: col-resize; background: transparent; border-radius: 2px; position: relative; touch-action: none; }
.dl-handle::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; border-radius: 1px; background: var(--lijn); transition: background .12s; }
.dl-handle:hover::after, .dl-handle:active::after, .dl-handle:focus-visible::after { background: var(--groen); }
body.dl-sleept { user-select: none; -webkit-user-select: none; cursor: col-resize; }
.drieluik .kaart { margin-bottom: 0; }
.drieluik > .kaart { display: flex; flex-direction: column; }
.drieluik > .kaart .kaart-body { flex: 1; display: flex; flex-direction: column; }
.drieluik .jsonata-editor-wrap { flex: 1; display: flex; }
.drieluik .jsonata-editor-wrap textarea { height: 100%; }
.drieluik #mapping-bericht-json { flex: 1; margin: 0; }
.drieluik #mapping-xml-uitkomst { flex: 1; display: flex; }
.drieluik #mapping-xml-uitkomst pre { flex: 1; margin: 0; }
#mapping-bericht-json, #mapping-xml-preview { min-height: 21.3333rem; white-space: pre-wrap; word-break: break-word; }
.spring-knop { position: fixed; right: 1.4933rem; bottom: 1.4933rem; z-index: 25; gap: 0; box-shadow: var(--schaduw-hoog); }
.drieluik .kaart-kop { flex-wrap: wrap; row-gap: .4rem; }
.drieluik .kaart-kop h2 { white-space: nowrap; }
.drieluik .kaart-kop .rechts { max-width: 100%; min-width: 0; flex: 1 0 auto; justify-content: flex-end; }
.drieluik .kaart-kop select { min-width: 0; max-width: 100%; }

/* lookups */
.lookup-tabel { border: 1px solid var(--lijn); border-radius: var(--r-veld); margin-bottom: .64rem; background: var(--wit); overflow: hidden; }
.lookup-kop { display: flex; align-items: center; gap: .64rem; padding: .6rem .8rem; cursor: pointer; background: var(--krijt); border-bottom: 1px solid transparent; list-style: none; }
.lookup-tabel:nth-child(even) > .lookup-kop { background: var(--wit); }
.lookup-kop::-webkit-details-marker { display: none; }
.lookup-kop::before { content: "▸"; color: var(--ink3); font-size: .7333rem; transition: transform .12s; }
.lookup-tabel[open] > .lookup-kop::before { transform: rotate(90deg); }
.lookup-tabel[open] > .lookup-kop { border-bottom-color: var(--lijn); }
.lookup-kop:hover { background: var(--mintl); }
.lookup-titel { font-weight: 600; }
.lookup-telling { margin-left: auto; font-size: .8rem; }
.lookup-body { padding: .6667rem .8rem .8rem; }
.lookup-body .veldrij { margin-bottom: .4267rem; }
.lookup-body table.rijen { max-width: 59.7333rem; }
.lookup-body table.rijen th:first-child, .lookup-body table.rijen td:first-child { padding-left: 0; }
.lookup-body table.rijen td { padding-top: .2667rem; padding-bottom: .2667rem; }
.lookup-body table.rijen tbody tr:first-child td { padding-top: .6667rem; }
.lookup-body table.rijen td.smal { text-align: right; padding-right: 0; }
.lookup-voet { display: flex; align-items: center; gap: .64rem; flex-wrap: wrap; margin-top: .64rem; max-width: 59.7333rem; }
.lookup-plak { flex: 1; min-width: 14.9333rem; }
.lookup-plak summary { font-size: .8333rem; color: var(--ink2); cursor: pointer; }
.lookup-plak textarea { width: 100%; margin-top: .3733rem; }

/* uitvoervarianten */
.variant-kaart > .variant-kop { display: flex; align-items: center; justify-content: space-between; gap: .64rem; cursor: pointer; list-style: none; }
.variant-kop::-webkit-details-marker { display: none; }
.variant-kop-rechts { display: flex; align-items: center; justify-content: flex-end; gap: .64rem; min-width: 0; flex: 1; }
.variant-kort { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.variant-pijl { color: var(--ink3); font-size: .7333rem; transition: transform .12s; }
.variant-kaart[open] > .variant-kop .variant-pijl { transform: rotate(180deg); }
.variant-kaart[open] > .variant-kop .variant-kort { display: none; }
.varianten-balk { margin-bottom: .64rem; }
/* Outputs: tabbalk met per tab een pilletje (per message / once per file) */
.uitvoer-balk { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; border-bottom: 1px solid var(--lijn2); margin-bottom: 1.0667rem; }
.uitvoer-balk .varianten-balk { display: flex; gap: .2667rem; margin: 0; border-bottom: 0; min-width: 0; overflow-x: auto; }
.uitvoer-balk .varianten-balk .st { display: inline-flex; align-items: center; gap: .5333rem; padding: .6667rem .9333rem; font-size: .9rem; font-weight: 600; text-align: left; border-bottom-width: 2.5px; margin-bottom: -1px; }
.uitvoer-balk .varianten-balk .st.aan { color: var(--diep); border-bottom-color: var(--groen); }
.uitvoer-balk .st .muted { font-weight: 500; }
.uitvoer-balk .soort { font-weight: 500; font-size: .7667rem; color: var(--ink3); background: var(--krijt); border: 1px solid var(--lijn2); border-radius: 999px; padding: 1px .5333rem; }
.uitvoer-balk .st.aan .soort { background: var(--mintl); border-color: #BFDCCB; color: #10403B; }
.tab-acties { display: flex; align-items: center; gap: .4rem; padding-bottom: .5333rem; flex: none; }
/* Check en Deliver: dezelfde balk tussen de stap-rij en het werkvlak */
.uitvoer-kop { border-top: 1px solid var(--lijn2); padding: .4rem 1.4667rem 0; }
.uitvoer-kop .uitvoer-balk { border-bottom: 0; margin-bottom: 0; }
/* Per-file-uitvoer op Deliver: timing en Same / Other address */
.in.in-na { width: auto; max-width: 20rem; }
.in.in-getal { width: 5.3333rem; }
.in.in-eenheid { width: 7.3333rem; }
.zelfde-regel { margin: .6667rem 0 0; }
#vervolg-delivery-form { margin-top: .9333rem; }
.tijdlijn { list-style: none; margin: 0; padding: 0; font-size: .8333rem; }
.tijdlijn li { display: grid; grid-template-columns: 4.1333rem .9333rem minmax(0,1fr); gap: .6667rem; align-items: start; padding: .3333rem 0; }
.tijdlijn .t { color: var(--ink3); font-variant-numeric: tabular-nums; }
.tijdlijn .p { width: 9px; height: 9px; border-radius: 50%; background: var(--groen); margin-top: .2667rem; }
.tijdlijn .p.wacht { background: var(--wit); border: 2px solid var(--groen); width: 7px; height: 7px; }
.tijdlijn .p.vervolg { background: var(--oranje); }
.tijdlijn .p.uit { background: var(--wit); border: 2px solid var(--ink3); width: 7px; height: 7px; }
.tijdlijn .sub { color: var(--ink3); }
.tijdlijn li.grijs-lijn { display: block; color: var(--ink3); padding-left: 5.7333rem; font-size: .8rem; }
.velden-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9333rem 1.0667rem; margin-bottom: 1.0667rem; }
.velden-4 .segment { justify-self: start; }
.vw-kop { margin-bottom: .4rem; }
@media (max-width: 900px) { .velden-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .velden-4 { grid-template-columns: minmax(0,1fr); } }
.validatie-status { font-size: .8333rem; overflow-wrap: anywhere; }
/* Check: één grid — regel breed (de rest), melding breed, status smal, ✕ vast */
table.regels-tabel { table-layout: fixed; }
table.regels-tabel col.k-melding { width: 36%; }
table.regels-tabel col.k-status { width: 7.4667rem; }
table.regels-tabel col.k-x { width: 2.6667rem; }
table.regels-tabel th { padding: 0 .4rem .5333rem; }
table.regels-tabel th:first-child, table.regels-tabel td:first-child { padding-left: 0; }
table.regels-tabel td { padding: .3333rem .4rem; vertical-align: top; border-bottom: 0; }
table.regels-tabel td.k-status { padding-top: .8667rem; line-height: 1.35; }
table.regels-tabel td.k-x { padding-top: .8667rem; }
table.regels-tabel .k-x { text-align: right; padding-right: 0; }
table.regels-tabel .k-status { white-space: normal; }
table.regels-tabel tbody tr:first-child td { padding-top: .7333rem; }
table.regels-tabel tbody tr:first-child td.k-status { padding-top: 1.2667rem; }
table.regels-tabel tbody tr:first-child td.k-x { padding-top: 1.2667rem; }
.validatie-status-geldig { color: var(--groen); }
.bericht-blok > .meer { padding: .2rem 0; }
.bericht-blok .kaart-kop, .stap .bericht-blok .kaart-body, .stap .bericht-blok .kaart-voet { padding-left: 0; padding-right: 0; }
.bericht-blok #output-xml-preview { max-height: 60vh; overflow: auto; }
/* Translate: het drieluik is schermhoog en elk luik scrolt zelf, zodat een lang
   voorbeeld de pagina niet oprekt en de lookups eronder in zicht blijven. */
.stap .drieluik { height: max(30rem, calc(100vh - 8rem)); }
.drieluik > .kaart, .drieluik > .kaart .kaart-body, .drieluik .jsonata-editor-wrap, .drieluik #mapping-xml-uitkomst { min-height: 0; }
.drieluik > .kaart .kaart-body { overflow: hidden; }
.drieluik #mapping-bericht-json, .drieluik #mapping-xml-preview { min-height: 0; overflow: auto; }
.drieluik #mapping-xml-uitkomst { overflow: auto; }
.drieluik .jsonata-editor-wrap textarea, .drieluik .jsonata-editor-wrap pre { min-height: 0; }
.drieluik .jsonata-editor-wrap textarea { resize: none; overflow: auto; }
/* Drie even hoge koppen: de keuzelijst bij Sample input duwt die kop anders omlaag. */
.stap .drieluik .kaart-kop { min-height: 3.8667rem; }
@media (max-width: 760px) {
  .stap .drieluik { height: auto; }
  .drieluik #mapping-bericht-json, .drieluik #mapping-xml-preview { max-height: 60vh; }
  .drieluik .jsonata-editor-wrap textarea { min-height: 18rem; }
}
.validatie-status-fout { color: var(--rood); }


/* ?-hulpknop + notitieknop */
.help-knop { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1px solid var(--lijn); background: var(--wit); color: var(--ink3); font: 600 .7333rem/1 "Archivo", sans-serif; cursor: pointer; padding: 0; }
.help-knop:hover { color: var(--groen); border-color: var(--groen); }
.help-uitleg { padding: 0 1.3333rem .9333rem; margin-top: -.32rem; color: var(--ink); }
.btn-x.notitie:hover { background: var(--krijt); color: var(--groen); }
.btn-x.notitie.heeft-notitie { background: var(--krijt); color: var(--groen); }

/* stap-kaarten + sticky actiebalk */
.stapnr { display: inline-flex; align-items: center; justify-content: center; width: 1.6533rem; height: 1.6533rem; border-radius: 50%; background: var(--mintl); color: var(--diep); font-size: .8rem; font-weight: 700; flex: none; }
.stap-kaarten { display: flex; flex-direction: column; gap: 1.0667rem; margin-bottom: 1.6rem; }
.stap-kaarten .kaart { margin-bottom: 0; }
.actiebalk { position: sticky; bottom: .8rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: 999px; padding: .4rem .4rem .4rem 1.2rem; display: flex; align-items: center; gap: .8rem; box-shadow: var(--schaduw-hoog); }
.actiebalk .muted { margin-left: auto; }

/* Edit with AI- en Versions-overlay */
.ai-paneel, .versies-overlay { position: absolute; right: 0; top: calc(100% + .4rem); background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); box-shadow: var(--schaduw-hoog); max-width: calc(100vw - 2.1333rem); padding: .9333rem 1.0667rem; z-index: 30; text-align: left; }
.ai-paneel { width: 25.3333rem; }
.ai-paneel form { margin: 0; }
.ai-paneel label { display: block; font-size: .8333rem; margin-bottom: .4rem; }
.ai-paneel textarea { width: 100%; min-height: unset; font-size: .8333rem; }
.ai-paneel .paneel-voet { display: flex; justify-content: flex-end; gap: .5333rem; margin-top: .5333rem; }
.ai-paneel .bezig-regel { font-size: .8rem; }
.versies-overlay { width: 33.3333rem; max-height: 60vh; overflow-y: auto; }
.versies-overlay .kaart-kop { padding: 0 0 .5333rem; border-bottom: 0; min-height: 0; }
.versies-overlay td.versie-export a { font-size: .8rem; margin-right: .5333rem; white-space: nowrap; }
.versies-voet { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .6667rem; padding-top: .6rem; border-top: 1px solid var(--lijn2); }
.versies-voet .muted { font-size: .8rem; }
.versies-voet form { margin: 0; }

/* AI-resultaat */
.ai-checks { list-style: none; margin: .5333rem 0 .96rem; padding: 0; }
.ai-checks li { margin: .192rem 0; }
table.ai-diff td { word-break: break-word; }

/* bericht-detail: tekst links, feiten rechts */
.detail-kolommen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.0667rem; align-items: start; margin-bottom: 1.0667rem; }
@media (max-width: 900px) { .detail-kolommen { grid-template-columns: minmax(0, 1fr); } }
.foutvlak { background: var(--rood-v); padding: .8rem 1.0667rem; border-radius: var(--r-veld); }
.dupvlak { background: var(--oker-v); padding: .8rem 1.0667rem; border-radius: var(--r-veld); }
.foutvlak p, .dupvlak p { margin: 0 0 .4267rem; }
.foutvlak ul { margin: 0 0 .5333rem; padding-left: 1.1733rem; }
.foutvlak li { margin: .1067rem 0; }
.ruwe-fout { font-size: .7333rem; font-family: ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; margin: 0; background: none; border: none; padding: 0; }
.tijdlijn-voet { text-align: right; font-size: .8rem; margin: -.5333rem 0 .9333rem; }
.detail-onderkop { margin: -.9333rem 0 1.2rem; }

/* ⋯-menu: overlay, duwt nooit inhoud weg */
.overloop { position: relative; display: inline-block; }
.overloop summary { list-style: none; user-select: none; }
.overloop summary::-webkit-details-marker { display: none; }
.overloop .menu { position: absolute; right: 0; top: calc(100% + .4rem); background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); box-shadow: var(--schaduw-hoog); min-width: 16.6667rem; z-index: 30; }
.sample-bestand { display: inline-block; }
.menu .sample-bestand { display: block; }
.sample-bestand .s-stil:empty { display: none; }
.menu .sample-bestand .s-stil { display: block; padding: 0 .6667rem .2667rem; }
.menu .sample-bestand .s-stil:empty { display: none; }

@media (max-width: 760px) {
  .titelrij .rechts { margin-left: 0; }
  .veldgrid-2 { grid-template-columns: 1fr; }
  .drieluik { grid-template-columns: minmax(0, 1fr); }
  .dl-handle { display: none; }
  .actiebalk { border-radius: var(--r-vlak); flex-wrap: wrap; }
}

/* ======================================================================
   Flow-scherm, indeling A (FlowA / Deliver / Review): kop met conceptpil,
   vijf stap-rijen, één open stap, overlays voor Versions en Make live.
   ====================================================================== */
.flow-kop { align-items: flex-end; }
.feit { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink2); flex-wrap: wrap; }
.feit a { color: var(--groen); text-decoration: underline; text-decoration-color: var(--veldrand); text-underline-offset: 3px; }
.feit a:hover { text-decoration-color: var(--groen); }
.concept-live .tekst b.live { color: #10403B; }
.concept .stip-live { background: var(--mint); }
.concept-fout { border-color: var(--rood); }
.pil-actie { border: 0; background: none; padding: 0; font: 600 .8333rem/1 "Archivo", sans-serif; color: var(--rood); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
a.pil-actie:hover, .pil-actie:hover { color: var(--rood); }
.concept-melding { margin: -.6667rem 0 1.0667rem; }
.versie-banner { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.versie-banner form { margin: 0; }
.normaal { font-weight: 400; }
.mt-3 { margin-top: 1.0667rem; }

.stappen { display: grid; gap: .6667rem; }
.stap { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); box-shadow: 0 1px 2px rgba(14,42,39,.06); min-width: 0; }
.stap-rij { display: grid; grid-template-columns: 2rem 8rem minmax(0,1fr) auto; align-items: center; gap: .9333rem; padding: .9333rem 1.2rem; color: inherit; text-decoration: none; border-radius: var(--r-vlak); }
.stap-rij:hover { background: var(--hover); color: inherit; }
.stap.open > .stap-rij { border-radius: var(--r-vlak) var(--r-vlak) 0 0; }
.nr { width: 1.7333rem; height: 1.7333rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; background: var(--mintl); color: #10403B; }
.nr svg { width: .9333rem; height: .9333rem; }
.nr-fout { background: var(--rood-v); color: var(--rood); }
.stap-naam { font-weight: 650; color: var(--diep); font-size: .9667rem; }
.stap-sam { color: var(--ink2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stap-r { display: flex; align-items: center; gap: .8rem; color: var(--ink3); }
.gewijzigd { font-size: .8rem; font-weight: 600; color: var(--oker); display: inline-flex; align-items: center; gap: .4rem; }
.gewijzigd::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: #D69A1E; }
.stap.open { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen), 0 .4rem 1.3333rem rgba(14,42,39,.08); }
.stap.open .stap-rij .nr { background: var(--groen); color: var(--wit); }
/* Source en Deliver stel je één keer in: gestippeld, lichter, met een label. */
.stap-eenmalig { border-style: dashed; border-color: var(--veldrand); background: #FBFCFB; box-shadow: none; }
.stap-eenmalig .stap-rij:hover { background: var(--wit); }
.stap-eenmalig.open { border-style: solid; border-color: var(--groen); background: var(--wit); }
.stap-eenmalig .nr { background: var(--wit); border: 1px solid var(--lijn); color: var(--ink2); }
.stap-eenmalig .nr.nr-fout { background: var(--rood-v); border-color: transparent; color: var(--rood); }
.eenmalig { display: inline-block; vertical-align: 1px; font-size: .7333rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--lijn); border-radius: 999px; padding: 1px .5333rem; margin-right: .6rem; background: var(--wit); line-height: 1.4; }
.stap-stip { display: inline-block; width: .5333rem; height: .5333rem; border-radius: 50%; margin-right: .5333rem; vertical-align: 1px; background: #B5C4BE; }
.stap-stip.stip-ok { background: #3E9B6A; }
.stap-stip.stip-fout { background: var(--rood); }
.stap-stip.stip-wijz { background: #D69A1E; }

.werk { display: grid; grid-template-columns: minmax(0,1fr) 28rem; border-top: 1px solid var(--lijn2); }
.werk.werk-enkel { grid-template-columns: minmax(0,1fr); }
.werk-l { padding: .4rem 1.4667rem 1.4667rem; min-width: 0; }
.werk-r { border-left: 1px solid var(--lijn2); background: #FBFCFB; border-radius: 0 0 var(--r-vlak) 0; padding: 1.2rem 1.3333rem; min-width: 0; }
.werk-r-breed { padding: .4rem 0 0; }
.werk-vol { border-top: 1px solid var(--lijn2); padding: 1.0667rem 1.4667rem 1.4667rem; min-width: 0; }
.stap .blok { padding: 1.0667rem 0; border-top: 0; }
.stap .blok + .blok { border-top: 1px solid var(--lijn2); }
.blok-kop { display: flex; align-items: center; justify-content: space-between; gap: .6667rem; margin-bottom: .8rem; }
.blok-kop .links { display: flex; align-items: center; gap: .5333rem; }
.stap .help-uitleg { padding: 0 0 .8rem; margin-top: -.2667rem; color: var(--ink2); max-width: 80ch; }
.zin { display: grid; grid-template-columns: 14rem minmax(0,1fr); align-items: center; gap: .8rem; padding: .4rem 0; }
.zin .lbl { font-weight: 500; font-size: .9rem; }
.zin-r { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; min-width: 0; }
.velden-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9333rem 1.0667rem; max-width: 65.3333rem; }
.velden-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9333rem 1.0667rem; max-width: 50.6667rem; margin-top: .9333rem; }
.velden-url { display: grid; grid-template-columns: minmax(0,1fr) 13.3333rem; gap: .9333rem 1.0667rem; max-width: 50.6667rem; }
.stap .veld > label { margin: 0; }
.veld-fout { margin: 0; font-size: .8rem; color: var(--rood); }
.meer-opties > summary { list-style: none; }
.meer-opties > summary::-webkit-details-marker { display: none; }
.meer { display: inline-flex; align-items: center; gap: .5333rem; color: var(--groen); font-weight: 600; font-size: .8667rem; cursor: pointer; }
.meer svg { transition: transform .16s var(--glij); }
.meer-opties[open] > .meer svg { transform: rotate(90deg); }
.opgeslagen { display: flex; align-items: center; gap: .6667rem; height: 2.4rem; padding: 0 .8rem; border: 1.5px dashed var(--veldrand); border-radius: var(--r-veld); color: var(--ink2); }
.opgeslagen .stippen { letter-spacing: 2px; color: var(--ink); }
.opgeslagen button { margin-left: auto; border: 0; background: none; color: var(--groen); font: 600 .8333rem "Archivo", sans-serif; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.schakelregel { display: flex; align-items: center; gap: .6667rem; }
.schakelregel label, .zin-r label { margin: 0; }
.hold-hint { color: var(--oker); }
.delivery-notities { margin: .9333rem 0 0; max-width: 50.6667rem; }
.test-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.werk-r .status-regel { margin-top: .8rem; font-size: .8333rem; }
.bc-test { margin-top: 1.0667rem; display: grid; justify-items: start; gap: .6667rem; }
.bc-test .status-regel { margin: 0; font-size: .8333rem; max-width: 50.6667rem; }
/* De bestaande kaarten (Read, Translate, het bericht bij Check) staan nu ín een
   stap: geen kaart-in-kaart, alleen een lijn ertussen. */
.stap .kaart { border: 0; box-shadow: none; border-radius: 0; margin: 0; background: transparent; }
.stap .stap-kaarten { gap: 0; margin-bottom: 0; }
.stap .stap-kaarten > .kaart + .kaart { border-top: 1px solid var(--lijn2); }
.stap .kaart-kop { padding: .8rem 0; min-height: 0; border-bottom: 0; }
.stap .kaart-body { padding: 0 0 1.0667rem; }
.stap .kaart-voet { background: none; padding: .6667rem 0; }
.stap .help-uitleg { padding-left: 0; }
.stap .leesgrid { gap: 1.8667rem; }
.stap .kolom-rechts { border-left: 1px solid var(--lijn2); padding-left: 1.6rem; top: .8rem; }
.stap .drieluik > .kaart { border: 1px solid var(--lijn2); border-radius: var(--r-veld); padding: 0 .9333rem; background: var(--wit); }
.stap .werk-r .kaart-kop, .stap .werk-r .kaart-body, .stap .werk-r .kaart-voet { padding-left: 1.3333rem; padding-right: 1.3333rem; }
.stap .werk-r pre { max-height: 60vh; }

/* Overlays (Versions, Make live): Esc of de achtergrond sluit. */
body.overlay-open { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 60; overflow-y: auto; }
.overlay .dek { position: fixed; inset: 0; background: rgba(14,42,39,.38); display: block; }
.overlay .laag { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 1.3333rem; padding: 5.6rem 2.1333rem 3.2rem; flex-wrap: wrap; pointer-events: none; }
.overlay .laag > * { pointer-events: auto; }
.overlay .laag-rechts { justify-content: flex-end; }
.dialoog { position: relative; width: 50.6667rem; max-width: 100%; }
.dialoog-kop { padding: 1.4667rem 1.7333rem 1.0667rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.0667rem; }
.dialoog-kop h2 { font-stretch: 125%; font-size: 1.4rem; letter-spacing: -0.01em; }
.sluit { border: 0; background: none; color: var(--ink3); cursor: pointer; padding: .4rem; border-radius: .5333rem; display: inline-flex; }
.sluit:hover { background: var(--krijt); color: var(--diep); }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 0 1.7333rem 1.2rem; }
.vak { border: 1px solid var(--lijn2); border-radius: var(--r-veld); padding: .8rem .9333rem; display: grid; gap: .2667rem; }
.vak .lbl { font-size: .8rem; color: var(--ink3); font-weight: 500; }
.vak b { color: var(--diep); font-weight: 650; }
.romp { padding: 0 1.7333rem; }
.romp > .fout { margin: 0 0 .9333rem; }
.romp .groep { padding: .9333rem 0; border-top: 1px solid var(--lijn2); margin: 0; }
.romp .groep h3 { margin-bottom: .5333rem; }
.romp .groep .review-let { margin: 0 0 .5333rem; font-size: .8667rem; color: var(--ink2); }
.wijziging { display: grid; grid-template-columns: minmax(0, 14.6667rem) minmax(0,1fr); gap: .8rem; padding: .3333rem 0; align-items: baseline; }
.wijziging .soort { color: var(--ink2); overflow-wrap: anywhere; }
.wijziging .mono { overflow-wrap: anywhere; }
.oud { color: var(--ink3); text-decoration: line-through; text-decoration-color: #8A9C97; }
.pijl { color: var(--ink3); margin: 0 .4rem; }
.toets { display: flex; flex-wrap: wrap; gap: .5333rem 1.4667rem; padding: .9333rem 0; border-top: 1px solid var(--lijn2); align-items: center; }
.toets .lbl { font-weight: 600; color: var(--diep); margin-right: .2667rem; font-size: .9rem; }
.toets .ok, .toets .mis { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); }
.toets .ok svg { color: var(--groen); width: .9333rem; height: .9333rem; }
.toets .mis svg { color: var(--rood); width: .9333rem; height: .9333rem; }
.toets-fouten { margin: -.4rem 0 .8rem; padding-left: 1.2rem; color: var(--rood); font-size: .8333rem; }
.dialoog .notitie { padding: .9333rem 0 1.2rem; border-top: 1px solid var(--lijn2); }
.dialoog-voet { display: flex; align-items: center; gap: .6667rem; padding: 1.0667rem 1.7333rem; border-top: 1px solid var(--lijn2); background: #FBFCFB; border-radius: 0 0 var(--r-vlak) var(--r-vlak); flex-wrap: wrap; }
.dialoog-voet form { margin: 0; }
.dialoog-voet .rechts { margin-left: auto; display: flex; gap: .5333rem; flex-wrap: wrap; }
.knop.gevaar { color: var(--rood); }
.knop.gevaar:hover { background: var(--rood-v); color: var(--rood); }
.versies-wrap { position: relative; width: 25.3333rem; max-width: 100%; }
.versies { position: relative; width: 25.3333rem; max-width: 100%; }
.versies-kop { display: flex; align-items: center; gap: .6667rem; padding: 1.0667rem 1.2rem .8rem; }
.versies-kop h2 { margin-right: auto; }
.versies-kop .sluit { margin: -.4rem -.5333rem -.4rem 0; }
.versie { padding: .8rem 1.2rem; border-top: 1px solid var(--lijn2); display: grid; gap: .2667rem; }
.versie-r1 { display: flex; align-items: center; gap: .5333rem; }
.versie-r1 b { color: var(--diep); font-weight: 650; }
.versie-r2 { font-size: .8333rem; color: var(--ink3); overflow-wrap: anywhere; }
.versie-acties { display: flex; gap: 2px; margin-left: -.6667rem; flex-wrap: wrap; }
.versie-acties form { margin: 0; }
.versie-onder { padding: .8rem 1.2rem; border-top: 1px solid var(--lijn2); }
.versie-onder form { margin: 0; }

/* ---------- stap Read (taak 9): zinnen, veldentabel, voorbeeldpaneel ---------- */
.werk-read .zin { grid-template-columns: 12rem minmax(0,1fr); }
/* Read: instellingen links, voorbeeld rechts. De breedte van het voorbeeld is
   --sample-b (flow-client.js.ts: slepen, S/M/L, dubbelklik); het paneel blijft
   schermhoog in beeld en scrolt zelf, zodat een lang voorbeeld de pagina niet oprekt. */
.werk.werk-read { grid-template-columns: minmax(0,1fr) .6rem var(--sample-b, 38%); }
.werk-read > .werk-r { border-left: 0; position: sticky; top: .8rem; align-self: start; height: calc(100vh - 1.6rem); display: flex; flex-direction: column; overflow-y: auto; border-radius: 0 0 var(--r-vlak) 0; }
.werk-read .boom { flex: 1 0 16rem; max-height: none; }
.werk-read .patroon-paneel, .werk-read .paneel-onder, .werk-read .splitbalk, .werk-read .bestand { flex: none; }
.sample-splitter { position: sticky; top: .8rem; align-self: start; height: calc(100vh - 1.6rem); cursor: col-resize; touch-action: none; background: var(--lijn2); }
.sample-splitter::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 2.4rem; margin: -1.2rem 0 0 -1.5px; border-radius: 2px; background: #9FB3AB; }
.sample-splitter:hover, .sample-splitter.sleept { background: var(--mintl); }
.sample-splitter:hover::after, .sample-splitter.sleept::after { background: var(--groen); }
.sample-splitter:focus-visible { outline: 2px solid var(--groen); outline-offset: -2px; }
.bestand-r { display: inline-flex; align-items: center; gap: .4rem; }
.segment-k button { padding: .3333rem .6rem; font-size: .7667rem; min-width: 1.8667rem; }
.zin .zin-keuze, .zin .zin-vrij, .zin .zin-invoer { flex: 1 1 20rem; width: auto; min-width: 0; max-width: 30.6667rem; }
.zin .zin-vrij { height: 2.4rem; }
.zin .zin-invoer { min-height: 2.4rem; height: 2.4rem; }
.zin .wissel { margin-left: .2667rem; }
.link-knop { border: 0; background: none; padding: 0; color: var(--groen); font: 500 .8333rem "Archivo", sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-knop:hover { color: var(--diep); }
.uitkomst { color: var(--ink2); font-size: .8333rem; display: inline-flex; align-items: center; gap: .4rem; }
.uitkomst svg { color: var(--groen); width: .9333rem; height: .9333rem; }
.uitkomst:empty { display: none; }
.tabel-scroll { position: relative; overflow-x: auto; margin: 0 -2px; padding: 0 2px; } /* relative: .sr-only in de tabel blijft binnen het scrollvlak */
/* Read: één grid voor "Once per message" én "Every line item" — vaste kolommen, Taken from krijgt de rest */
table.velden { min-width: 44rem; table-layout: fixed; }
table.velden col.k-naam { width: 8.8rem; }
table.velden col.k-soort { width: 8.1333rem; }
table.velden col.k-waarde { width: 16%; }
table.velden col.k-req { width: 4.2667rem; }
table.velden col.k-acties { width: 3.8667rem; }
table.velden th { padding-top: 0; }
/* Bovenaan uitlijnen, zodat bij een lange expressie naam, soort en waarde naast de
   eerste regel staan; de extra marges zetten elke cel op het midden van die regel. */
table.velden td { vertical-align: top; }
table.velden td.soort .soortchip { margin-top: .3rem; }
table.velden td.waarde { padding-top: .7333rem; }
table.velden td.midden input { margin-top: .5333rem; }
table.velden td.acties .btn-x { margin-top: 2px; }
table.velden .vnaam-tekst, table.velden .pad { line-height: 2rem; }
table.velden th:first-child, table.velden td:first-child { padding-left: 0; }
table.velden td { padding-top: .3333rem; padding-bottom: .3333rem; border-bottom: 1px solid var(--lijn2); }
table.velden tbody tr:last-child td { border-bottom: 1px solid var(--lijn2); }
table.velden tr.uitlegrij td { border-bottom: 1px solid var(--lijn2); }
table.velden .vnaam { font-weight: 600; color: var(--diep); border-color: transparent; background: transparent; padding: 0 .4rem; min-height: 2rem; }
table.velden .vnaam { width: 100%; }
table.velden .taken textarea { border-color: transparent; background: transparent; color: var(--ink2); padding: .2667rem .4rem; min-height: 2rem; height: 2rem; }
table.velden .vnaam:hover, table.velden .taken textarea:hover { border-color: var(--lijn); }
table.velden .vnaam:focus, table.velden .taken textarea:focus { border-color: var(--groen); background: var(--wit); color: var(--ink); }
table.velden td.waarde { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8333rem; color: var(--diep); overflow-wrap: anywhere; padding-left: .8rem; }
table.velden td.waarde .mis { font-family: "Archivo", sans-serif; font-weight: 600; }
table.velden td.acties, table.velden th.acties { display: table-cell; white-space: nowrap; text-align: right; padding-right: 0; }
table.velden td.acties .btn-x { width: 1.7333rem; height: 1.7333rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
table.velden td.acties .btn-x svg { width: 1rem; height: 1rem; }
table.velden tr[data-patroon-groep] td { height: 2.7333rem; }
table.velden .vnaam-tekst { font-weight: 600; color: var(--diep); padding-left: .4rem !important; }
table.velden .pad { color: var(--ink3); font-size: .8333rem; padding-left: .4rem; }
/* Soort veld (kolom Kind) */
.soortchip { display: inline-flex; align-items: center; gap: .3333rem; font-size: .7667rem; font-weight: 600; line-height: 1.4; padding: 2px .5333rem; border-radius: 999px; white-space: nowrap; }
.k-lees { background: var(--mintl); color: #10403B; }
.k-ber { background: var(--oker-v); color: var(--oker); }
.k-patroon { background: #E5EEF6; color: #2B5F8A; }
.k-vast { background: #EEF0EF; color: var(--ink2); }
.soortchip .fx { font-style: normal; font-family: Georgia, serif; font-size: .8667rem; line-height: 1; }
.blok-kop .tel { color: var(--ink3); font-weight: 500; font-size: .8333rem; }
.stap #velden-tabel > .blok:first-child { border-top: 1px solid var(--lijn2); }
#velden-tabel > .blok > .voeg { margin-top: .6667rem; }
.taken-in { display: flex; align-items: flex-start; gap: 2px; }
.taken-in .is { line-height: 2rem; }
.taken-in .is { color: var(--ink3); font-family: ui-monospace, Menlo, monospace; font-size: .8333rem; padding-left: .4rem; }
/* De chip in Kind zegt al dat een veld berekend is: het "=" ervoor is overbodig. */
.taken-in .is { display: none; }
table.velden tr.nieuw td { background: #FFFBF0; }
.voeg { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; color: var(--ink3); font-size: .8333rem; }
/* Read › Reference fields: staat buiten #input-form, dus eigen scheidingslijn */
#read-referenties { border-top: 1px solid var(--lijn2); }
#read-referenties .veld-fout { margin-top: .5333rem; }
#read-referenties > .voeg { margin-top: .6667rem; }
table.ref-velden { table-layout: fixed; }
table.ref-velden col.k-kolom { width: 30%; }
table.ref-velden col.k-veld { width: 42%; }
table.ref-velden col.k-acties { width: 2.6667rem; }
table.ref-velden th:first-child, table.ref-velden td:first-child { padding-left: 0; }
table.ref-velden td { border-bottom: 1px solid var(--lijn2); }
table.ref-velden .in { height: 2.1333rem; }
table.ref-velden td.ref-waarde { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8333rem; color: var(--diep); overflow-wrap: anywhere; }
table.ref-velden td.acties, table.ref-velden th.acties { text-align: right; padding-right: 0; }
.ref-vrij { display: flex; gap: .5333rem; }
.ref-vrij .ref-bron { flex: none; width: 7.4667rem; }
.uitleg-in { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; padding: 2px 0 .2667rem .4rem; }
.uitleg-bron { display: inline-flex; align-items: center; gap: .5333rem; margin: 0; font-weight: 500; color: var(--ink2); }
table.rijen .uitleg-bron select { width: auto; min-height: 2rem; }
tr.uitlegrij .uitleg-in .uitleg-invoer { flex: 1; min-width: 12.8rem; width: auto; }
.meer .meer-sub { font-weight: 400; }
#read-meer > .meer, .bericht-blok > .meer { flex-wrap: wrap; row-gap: 2px; }
table.velden td.acties .btn-x { vertical-align: middle; }
.meer-in { padding-top: .9333rem; display: grid; gap: .9333rem; }
.meer-in .velden-2 { margin-top: 0; }
.meer-in .veld label > input, .meer-in .veld label > select { width: 100%; }
.meer-in #aanvullingen-kaart .kaart-kop { padding-top: .2667rem; }
.voorbeeld-paneel .bestand { display: flex; align-items: center; justify-content: space-between; gap: .6667rem; margin-bottom: .8rem; }
.voorbeeld-paneel .bestand .naam { font-weight: 600; color: var(--diep); display: flex; align-items: center; gap: .5333rem; }
.splitbalk { display: flex; gap: .5333rem; align-items: center; margin-bottom: .6667rem; font-size: .8333rem; color: var(--ink2); }
.splitbalk select { min-height: 2rem; }
.boom { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8333rem; line-height: 1.95; background: var(--wit); border: 1px solid var(--lijn2); border-radius: var(--r-veld); padding: .6667rem .8rem; max-height: 70vh; overflow: auto; min-width: 0; }
.boom .knoop { white-space: nowrap; }
.boom .d1 { padding-left: 1.0667rem; } .boom .d2 { padding-left: 2.1333rem; } .boom .d3 { padding-left: 3.2rem; }
.boom .d4 { padding-left: 4.2667rem; } .boom .d5 { padding-left: 5.3333rem; } .boom .d6 { padding-left: 6.4rem; }
.boom .d7 { padding-left: 7.4667rem; } .boom .d8 { padding-left: 8.5333rem; } .boom .d9 { padding-left: 9.6rem; }
.boom .tag { color: var(--ink3); }
.boom .gekozen { background: var(--mintl); color: var(--diep); border-radius: .3333rem; padding: 1px .4rem; }
.boom .kiesbaar { border: 0; border-bottom: 1.5px dashed var(--veldrand); background: none; color: var(--ink); font: inherit; padding: 0 1px; cursor: pointer; border-radius: 0; line-height: 1.5; }
.boom .kiesbaar:hover, .boom .kiesbaar:focus-visible { border-bottom-color: var(--groen); background: var(--krijt); }
.boom .waarde-tekst { color: var(--ink); }
.boom .leeg-boom { font-family: "Archivo", sans-serif; font-size: .8667rem; line-height: 1.5; color: var(--ink2); margin: .2667rem 0; white-space: normal; }
.boom-pdf { padding: .4rem 0; line-height: 1.6; }
.boom-pdf .regel { display: flex; align-items: baseline; gap: .5333rem; width: max-content; min-width: 100%; padding: 1px .6667rem 1px 0; cursor: text; }
.boom-pdf .regelnr { flex: none; width: 2rem; }
.boom-pdf .regel:hover { background: var(--krijt); }
.boom-pdf .regel.actief { background: var(--mintl); box-shadow: inset 0 0 0 1px var(--mint); }
.boom-pdf .regel.gekozen-regel .tekst { background: var(--mintl); border-radius: .2667rem; }
.boom-pdf .regelnr { color: #8A9C97; text-align: right; user-select: none; }
.boom-pdf .tekst { white-space: pre; }
.boom-pdf .veld-merk { font-family: "Archivo", sans-serif; font-size: .7667rem; color: var(--groen); font-weight: 600; white-space: nowrap; }
.patroon-paneel { margin-top: .8rem; border: 1px solid var(--lijn); border-radius: var(--r-veld); background: var(--wit); padding: .8rem .9333rem; display: grid; gap: .6667rem; }
.patroon-paneel label { margin: 0; }
.patroon-paneel label input { width: 100%; }
.pp-kop { display: flex; align-items: center; justify-content: space-between; gap: .5333rem; }
.pp-kop .sluit { padding: .2667rem; }
.pp-regel { background: var(--krijt); border-radius: .4rem; padding: .4rem .5333rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-test { margin: -.2667rem 0 0; color: var(--ink2); display: flex; align-items: center; gap: .4rem; }
.pp-test svg { color: var(--groen); width: .9333rem; height: .9333rem; }
.pp-test:empty { display: none; }
.paneel-onder { margin-top: .9333rem; padding-top: .8rem; border-top: 1px solid var(--lijn2); }
.paneel-onder .voorbeeld-frame { width: 100%; height: 28rem; border: 1px solid var(--lijn); border-radius: var(--r-veld); background: var(--wit); margin-top: .6667rem; }
@media (max-width: 760px) {
  .werk-read .zin { grid-template-columns: minmax(0,1fr); }
  .zin .zin-keuze, .zin .zin-vrij, .zin .zin-invoer { flex-basis: 100%; max-width: none; }
  /* Smal: elke rij van de tabellen wordt een kaartje — eerst naam/regel, daaronder de rest, geen horizontaal scrollen */
  .tabel-scroll { overflow-x: visible; }
  table.velden, table.regels-tabel { min-width: 0; }
  table.velden, table.velden tbody, table.regels-tabel, table.regels-tabel tbody { display: block; width: 100%; }
  table.velden thead, table.velden colgroup, table.regels-tabel thead, table.regels-tabel colgroup { display: none; }
  table.velden tr[data-rij], table.velden tr[data-patroon-groep] { display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-areas: "naam naam acties" "soort req req" "waarde waarde waarde" "taken taken taken"; align-items: center; column-gap: .5333rem; padding: .5333rem 0; border-bottom: 1px solid var(--lijn2); }
  table.velden tr[data-rij] > td, table.velden tr[data-patroon-groep] > td { display: block; padding: 0; border-bottom: 0; width: auto; }
  table.velden tr > td:nth-child(1) { grid-area: naam; }
  table.velden tr > td.soort { grid-area: soort; }
  table.velden tr > td:nth-child(5) { justify-self: start; }
  table.velden tr > td.soort { padding-left: .4rem; }
  table.velden td.soort .soortchip, table.velden td.midden input, table.velden td.acties .btn-x { margin-top: 0; }
  table.velden td.waarde, table.velden tr > td.waarde { padding-top: .2667rem; }
  table.velden tr > td.waarde { grid-area: waarde; padding: 2px .4rem .2667rem; }
  table.velden tr > td.waarde:empty, table.velden tr > td.waarde:has(.w:empty) { display: none; }
  table.velden tr > td.taken { grid-area: taken; }
  table.velden tr > td:nth-child(5) { grid-area: req; }
  table.velden tr > td:nth-child(6) { grid-area: acties; }
  table.velden td.midden:has(input:not([hidden]))::before { content: "Required"; font-size: .8rem; color: var(--ink3); margin-right: .4rem; }
  table.velden td.midden { display: flex !important; align-items: center; }
  table.velden tr.uitlegrij.open { display: block; }
  table.velden tr.uitlegrij.open td { display: block; }
  table.regels-tabel tr { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "regel regel" "melding melding" "status x"; gap: .4rem; padding: .6667rem 0; border-bottom: 1px solid var(--lijn2); }
  table.regels-tabel tr > td { display: block; padding: 0 !important; }
  table.regels-tabel td.k-regel { grid-area: regel; }
  table.regels-tabel td.k-melding { grid-area: melding; }
  table.regels-tabel td.k-status { grid-area: status; align-self: center; }
  table.regels-tabel td.k-x { grid-area: x; }
  table.velden tr[data-patroon-groep] td { height: auto; }
  .werk-r.werk-r-breed { padding: .4rem 0 0; }
  .stap .werk-r .kaart-kop, .stap .werk-r .kaart-body, .stap .werk-r .kaart-voet { padding-left: .9333rem; padding-right: .9333rem; }
  .kop { row-gap: .9333rem; }
}

@media (max-width: 1100px) {
  .werk, .werk.werk-read { grid-template-columns: minmax(0,1fr); }
  .sample-splitter, #sample-maat { display: none; }
  .werk-read > .werk-r { position: static; height: auto; overflow: visible; border-top: 1px solid var(--lijn2); }
  .werk-read .boom { flex: none; max-height: 70vh; }
  .werk-r { border-left: 0; border-top: 1px solid var(--lijn2); border-radius: 0 0 var(--r-vlak) var(--r-vlak); }
  .stap .kolom-rechts { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .flow-kop .acties { width: 100%; }
  .concept { width: 100%; justify-content: space-between; }
  .stap-rij { grid-template-columns: 1.7333rem minmax(0,1fr) auto; gap: .2667rem .8rem; padding: .8rem .9333rem; }
  .stap-r { grid-column: 3; grid-row: 1; }
  .stap-sam { grid-column: 2 / 4; grid-row: 2; white-space: normal; }
  .werk-l, .werk-vol { padding-left: .9333rem; padding-right: .9333rem; }
  .werk-r { padding: 1.0667rem .9333rem; }
  .zin { grid-template-columns: minmax(0,1fr); gap: .5333rem; }
  .velden-3, .velden-2, .velden-url { grid-template-columns: minmax(0,1fr); }
  .segment { flex-wrap: wrap; border-radius: 1.2rem; }
  .overlay .laag { padding: 1.0667rem .8rem 2.1333rem; }
  .versus { grid-template-columns: 1fr; padding: 0 1.2rem .9333rem; }
  .romp { padding: 0 1.2rem; }
  .dialoog-kop { padding: 1.2rem 1.2rem .8rem; }
  .dialoog-voet { padding: .9333rem 1.2rem; }
  .dialoog-voet .rechts { margin-left: 0; width: 100%; }
  .wijziging { grid-template-columns: minmax(0,1fr); gap: 2px; }
}

/* ======================================================================
   Lijsten en overige schermen (taak 10): Flows, Messages, Message,
   Customers, Settings, Templates — klassen uit de mockups.
   ====================================================================== */
.filter { display: flex; gap: .5333rem; align-items: center; flex-wrap: wrap; margin: 0; }
.zoek { position: relative; display: block; margin: 0; font-weight: 400; }
label.knop { margin: 0; }
.schakel .wissel { margin: 0; }
.zoek svg { position: absolute; left: .8rem; top: .6667rem; color: var(--ink3); pointer-events: none; }
.zoek .in { padding-left: 2.2667rem; width: 14.6667rem; }
.in-klant, .in-flow { width: 12.6667rem; }
.in-status { width: 10.6667rem; }
.in-klantnaam { width: 14.6667rem; }
.filterrij { margin: -.5333rem 0 1.0667rem; }
.datumveld { display: inline-flex; align-items: center; gap: .4667rem; margin: 0; font-weight: 400; font-size: .8333rem; color: var(--ink3); }
.datumveld .in { width: 13.0667rem; }
.t th.kolom-tijd, .t td.kolom-tijd { white-space: nowrap; width: 10rem; }
.in-model { max-width: 18.6667rem; }
.nowrap { white-space: nowrap; }
.t th.k-flow { width: 30%; }
.t td.leeg { color: var(--ink2); padding: 1.4667rem 1.0667rem; }
.leeg-regel { color: var(--ink2); margin: .2667rem 0 2px; }
span.knop[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }

/* Flows */
.flowcel { display: grid; gap: 2px; min-width: 0; }
.flowcel .klein { overflow-wrap: anywhere; }
.route { display: inline-flex; align-items: center; gap: .5333rem; color: var(--ink2); flex-wrap: wrap; }
.route svg { color: var(--ink3); width: .9333rem; height: .9333rem; }
.week { display: flex; gap: .4rem .9333rem; flex-wrap: wrap; }
.voet .bol { display: inline-block; width: .4667rem; height: .4667rem; border-radius: 50%; background: var(--mint); }
.voet .bol.rood { background: var(--rood); }

/* Messages */
.t td.ref { min-width: 0; }
.t.berichten td.ref { min-width: 12rem; }
.ref a { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8333rem; color: var(--diep); text-decoration: none; overflow-wrap: anywhere; }
.ref a:hover { text-decoration: underline; }
.ref .afzender { display: block; font-size: .8rem; color: var(--ink3); overflow-wrap: anywhere; }
.t.berichten th.k-flow { width: 22%; }
.t td.k-type { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8rem; color: var(--ink2); overflow-wrap: anywhere; }
/* Berichten uit één bestand: kopregel, ingesprongen rijen, het vervolgbericht bovenaan. */
.t tr.bestandkop td { background: var(--krijt); font-size: .8333rem; color: var(--ink2); padding-top: .5333rem; padding-bottom: .5333rem; overflow-wrap: anywhere; }
.t tr.bestandkop b { color: var(--diep); font-weight: 600; }
.t tr.in-bestand td:first-child { padding-left: 1.8667rem; }
.t tr.is-vervolg td { background: #FFFBF5; }
/* Referentiekolommen: cel in mono zoals Message; kolompaneel (tandwiel) en het klantblok */
.t td.k-ref { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8333rem; color: var(--diep); overflow-wrap: anywhere; }
.overloop .kolom-paneel { position: absolute; right: 0; top: calc(100% + .4rem); background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-vlak); box-shadow: var(--schaduw-hoog); z-index: 30; width: 20rem; max-width: calc(100vw - 2rem); padding: .4rem; }
.kolomlijst { list-style: none; margin: 0; padding: 0; }
.kolom-paneel .kolomlijst { max-height: 60vh; overflow-y: auto; }
.kolom-rij { display: flex; align-items: center; gap: .2667rem; min-height: 2.2667rem; padding: 0 .1333rem 0 .6667rem; border-radius: .5333rem; }
.kolom-rij:hover { background: var(--krijt); }
.kolom-vink { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; margin: 0; font-weight: 400; color: var(--ink); cursor: pointer; }
.kolom-vink span { overflow-wrap: anywhere; }
.kolom-vink input { margin: 0; flex: none; }
.kolom-vink input[disabled] { cursor: default; }
.kolom-rij .kolom-tag { height: 1.2rem; padding: 0 .5rem; font-size: .7333rem; }
.kolom-flows { font-size: .8rem; white-space: nowrap; margin: 0 .2667rem; }
.kolom-rij .knop[disabled] { opacity: .3; }
.kolom-voet { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; }
.kolom-paneel .kolom-voet { border-top: 1px solid var(--lijn2); margin-top: .4rem; padding: .4rem .2667rem 0; }
#berichtkolommen .kolomlijst { max-width: 30rem; margin: -2px 0 .4rem -.6667rem; }
#berichtkolommen .kolom-voet { margin-top: .4rem; }
.kolom-voorbeeld { border: 1px solid var(--lijn); border-radius: var(--r-veld); }
.kolom-voorbeeld .t { font-size: .8333rem; }
.kolom-voorbeeld .t th, .kolom-voorbeeld .t td { white-space: nowrap; overflow-wrap: normal; padding: .5333rem .8rem; }
.kolom-voorbeeld .t td.mono { color: var(--diep); }
.vervolg-link a { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8333rem; }
.dl { display: inline-flex; align-items: center; gap: .3333rem; font-size: .8333rem; text-decoration: none; }
.dl svg { width: .9333rem; height: .9333rem; }
.pagin { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .9333rem; color: var(--ink3); font-size: .8333rem; flex-wrap: wrap; }
.pagin .acties { gap: .4rem; }
/* Activity (Settings): eigen scrollvlak met vaste kop, bladeren eronder. */
.activity-scroll { max-height: min(70vh, 42.6667rem); overflow: auto; }
.activity-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--wit); }
.activity-pagin { margin: 0; padding: .8rem 1.3333rem; border-top: 1px solid var(--lijn2); }
.activity-pagin .acties { display: flex; align-items: center; flex-wrap: wrap; }
.per-pagina { display: flex; align-items: center; gap: .5333rem; margin: 0; }
.per-pagina label { margin: 0; font-weight: 500; }
.per-pagina select.in { width: auto; height: 2rem; padding-top: 0; padding-bottom: 0; }
.pagina-nr { padding: 0 .4rem; }
@media (max-width: 600px) {
  .activity-pagin { padding: .8rem 1.0667rem; }
  .activity-pagin .acties { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: .2667rem; }
  .activity-pagin .knop-k { padding: 0 .6rem; }
  .pagina-nr { padding: 0; white-space: nowrap; }
}
/* Customers: sluitknop rechtsboven in het paneel, ook als de kop op smal scherm breekt. */
.detail { position: relative; }
.detail > .vlak-kop { padding-right: 3.4667rem; }
.paneel-sluit { position: absolute; top: .8667rem; right: .9333rem; }
/* Schakelaar met de sectie eronder (SFTP account, Their server). */
.schakel-sectie { margin-top: .8rem; }

/* Message: tijdlijn, vlakken */
.lijn { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-bottom: 2px solid var(--lijn2); margin: 0 0 1.4667rem; }
.seg { display: flex; align-items: center; justify-content: center; gap: .4667rem; padding: .6rem .2667rem .6667rem; font-size: .8667rem; color: #8A9C97; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg svg { width: .9333rem; height: .9333rem; }
.seg.seg-ok { color: var(--ink); border-bottom-color: var(--mint); }
.seg.seg-ok svg { color: var(--groen); }
.seg.seg-fout { color: var(--rood); font-weight: 650; border-bottom-color: var(--rood); }
.niet { display: flex; justify-content: flex-end; margin: -.9333rem 0 1.2rem; font-size: .8rem; color: var(--ink3); }
.stapel { display: grid; gap: .9333rem; }
.uitleg-groot { font-size: 1rem; color: var(--diep); margin: 0 0 .6667rem; max-width: 70ch; }
.bewijs { margin: 0 0 .6667rem; padding-left: 1.1733rem; color: var(--ink); }
.bewijs li { margin: .16rem 0; }
.ruw { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--ink3); background: var(--krijt); border: 1px solid var(--lijn2); border-radius: var(--r-veld); padding: .6667rem .8rem; white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 28rem; overflow: auto; }
.bestand { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.bestand .naam { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--diep); overflow-wrap: anywhere; min-width: 0; }
.bestand .naam span { font-weight: 400; color: var(--ink3); font-size: .8333rem; }
.techniek > summary.tech { display: flex; align-items: center; gap: .5333rem; color: var(--groen); font-weight: 600; font-size: .8667rem; cursor: pointer; list-style: none; }
.techniek > summary.tech::-webkit-details-marker { display: none; }
.techniek > summary.tech svg { transition: transform .16s var(--glij); }
.techniek[open] > summary.tech svg { transform: rotate(90deg); }
.techniek > summary.tech .muted { font-weight: 400; }
.techniek .subkop { margin-top: 1.2rem; }
.techniek .t td { vertical-align: top; }
.vlak-kop .acties form { margin: 0; }

/* Message: blokken Input · Raw translation · Output, met zoekbalk */
.berichtblokken { display: grid; gap: .9333rem; min-width: 0; }
.berichtblokken > * { min-width: 0; }
.blok-zoek { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: .5333rem; flex-wrap: wrap; padding: .5333rem 0; margin: -.5333rem 0 -.4rem; background: var(--krijt); }
.blok-zoek[hidden] { display: none; }
.blok-zoek .zoek { flex: 0 1 21.3333rem; min-width: 0; }
.blok-zoek .zoek .in { width: 100%; }
.zoek-telling { font-size: .8333rem; color: var(--ink3); white-space: nowrap; }
.zoek-telling:empty { display: none; }
/* berichtblokken: .vlak wint van de algemene .blok-opvulling, zodat Input/Raw translation/Output even hoge koppen hebben */
details.vlak.blok { padding: 0; border-top: 1px solid var(--lijn); }
.blok > summary { list-style: none; cursor: pointer; user-select: none; }
.blok > summary::-webkit-details-marker { display: none; }
.blok > summary .links { min-width: 0; }
.blok > summary .links > svg { color: var(--ink3); flex: none; transition: transform .16s var(--glij); }
.blok[open] > summary .links > svg { transform: rotate(90deg); }
.blok:not([open]) > summary { border-bottom: 0; }
.blok > summary:hover h2 { color: var(--groen); }
.blok > summary .knop { flex: none; }
.blok-bij { color: var(--ink3); font-size: .8333rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.blok-inhoud { padding: .9333rem 1.3333rem; max-height: 70vh; overflow: auto; }
.blok-tekst { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.blok-noot { margin: .6667rem 0 0; font-size: .8333rem; color: var(--ink3); }
.blok-inhoud .leeg-regel { margin: 0; }
.xboom, .xboom ul { list-style: none; margin: 0; padding: 0; }
.xboom { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .8rem; line-height: 1.6; }
.xboom ul { padding-left: 1.2rem; }
.xboom li { overflow-wrap: anywhere; }
.x-tag { color: var(--groen); font-weight: 600; }
.x-attr { color: var(--ink3); }
.x-tekst { color: var(--ink); }
table.data.blad { width: auto; min-width: 100%; }
table.data.blad th, table.data.blad td { white-space: nowrap; padding: .3333rem .6667rem; }
table.data.blad td { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }
table.data.blad th.rijnr { color: var(--ink3); font-weight: 400; text-align: right; }
mark.zoektreffer { background: var(--oker-v); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px #F0D9A0; }
mark.zoektreffer.huidig { background: var(--mint); box-shadow: 0 0 0 1.5px var(--groen); }

/* Send now met aftellen (app.js: data-aftellen) */
.aftel-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.aftel-form .knop.telt { font-variant-numeric: tabular-nums; min-width: 8.5333rem; }
.aftel-form .knop-k.telt { min-width: 7.4667rem; }
.aftel-stop { color: var(--ink2); }
.aftel-stop:hover { color: var(--rood); border-color: var(--rood); }
.status-actie { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; }

/* Customers: lijst + detailpaneel */
.twee { display: flex; flex-wrap: wrap; gap: 1.0667rem; align-items: flex-start; }
.twee > .lijst { flex: 999 1 37.3333rem; min-width: 0; }
.twee > .detail { flex: 1 1 34.6667rem; min-width: 0; }
.leeg-paneel { padding: 1.4667rem 1.3333rem; }
.leeg-paneel p { margin: 0; }
.t tr.gekozen td { background: #EEF4F0; }
.t .naam .pil { margin-left: .4rem; }
.mails { color: var(--ink2); font-size: .8333rem; overflow-wrap: anywhere; }
div.rijen { display: grid; }
.instel { display: grid; grid-template-columns: 8.6667rem minmax(0,1fr); gap: .9333rem; align-items: start; padding: .9333rem 1.3333rem; }
.instel + .instel { border-top: 1px solid var(--lijn2); }
.instel > .lbl { padding-top: .4rem; }
.instel-w { min-width: 0; }
.hulp-tekst { margin: 0 0 .6667rem; font-size: .8333rem; color: var(--ink2); max-width: 62ch; }
.vlak > .hulp-tekst { padding: .8rem 1.3333rem 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .2667rem; height: 1.8667rem; padding: 0 .2667rem 0 .7333rem; border-radius: 999px; background: var(--krijt); border: 1px solid var(--lijn); font-size: .8333rem; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; }
.chip button { width: 1.4667rem; height: 1.4667rem; border-radius: 50%; border: 0; background: none; color: var(--ink3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none; }
.chip button:hover { background: var(--lijn2); color: var(--diep); }
.chip svg { width: .8rem; height: .8rem; }
.chip-nieuw { display: inline-flex; gap: .4rem; align-items: center; flex: 1 1 16rem; min-width: 0; }
.chip-nieuw .in { height: 2rem; flex: 1; width: auto; min-width: 0; font-size: .8333rem; }
.opslag { font-size: .8rem; color: var(--ink3); }
.opslag.fout-k { color: var(--rood); }
.schakel { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-top: .2667rem; }
.geen-js { display: grid; gap: .5333rem; margin-top: .6667rem; }
.sftp { display: grid; gap: .5333rem; }
.sftp .mono { color: var(--diep); }
.sftp .acties form { margin: 0; }
.meer-info > summary { cursor: pointer; color: var(--groen); font-weight: 600; font-size: .8333rem; padding-top: .3333rem; }
.meer-info[open] > summary { margin-bottom: .6667rem; }
.meer-info .velden-2 { margin-top: 0; }
.inline-form { display: flex; gap: .5333rem; align-items: center; flex-wrap: wrap; margin: 0; }
.inline-form .in { width: 13.3333rem; }
.gebr { display: grid; }
.gebr-rij { display: grid; grid-template-columns: minmax(0,1fr) auto 2rem; gap: .6667rem; align-items: center; padding: .6rem 0; }
.gebr-rij + .gebr-rij { border-top: 1px solid var(--lijn2); }
.gebr-rij:first-child { padding-top: 2px; }
.gebr-wie { min-width: 0; }
.gebr-naam { font-weight: 600; color: var(--diep); }
.gebr-mail { color: var(--ink3); font-size: .8333rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gebr-staat { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.gebr-staat form { margin: 0; }
.gebr-st { font-size: .8333rem; color: var(--ink2); white-space: nowrap; }
.gebr-st.wacht { color: var(--oker); }
.knop-plek { display: inline-block; width: 2rem; }
.uitnodig { display: flex; gap: .5333rem; align-items: center; flex-wrap: wrap; margin: .6667rem 0 0; padding-top: .8rem; border-top: 1px solid var(--lijn2); }
.uitnodig.geen-rand { border-top: 0; padding-top: 0; margin-top: 0; }
.uitnodig .in { flex: 1 1 9.3333rem; height: 2.1333rem; min-width: 0; }
.voetje { display: flex; justify-content: space-between; align-items: center; gap: .6667rem; padding: .9333rem 1.3333rem; border-top: 1px solid var(--lijn2); font-size: .8333rem; color: var(--ink3); flex-wrap: wrap; }
.voetje form { margin: 0; }
.voetje-r { justify-content: flex-end; }
.menu .menu-form { display: grid; gap: .4rem; padding: .4rem .6667rem .5333rem; }
.menu .menu-form .menu-kop { padding: 0; margin: 0; }
.menu .menu-form .knop { display: inline-flex; width: auto; justify-self: start; padding: 0 .8rem; border: 1.5px solid var(--veldrand); border-radius: 999px; font-weight: 600; justify-content: center; }
.menu .menu-form .knop:hover { background: var(--wit); border-color: var(--groen); }
.rij-acties { display: inline-flex; align-items: center; gap: .2667rem; justify-content: flex-end; }
.rij-acties form { margin: 0; }
/* Archive customer: de flows die uitgaan en wat er gebeurt */
.archiveer-flows, .archiveer-gevolgen { margin: 0; padding: 0; list-style: none; display: grid; }
.archiveer-flows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1333rem .6667rem; padding: .4rem 0; min-width: 0; }
.archiveer-flows li + li { border-top: 1px solid var(--lijn2); }
.archiveer-flows li:first-child { padding-top: .4rem; }
.archiveer-flows a { font-weight: 600; color: var(--diep); text-decoration: none; overflow-wrap: anywhere; }
.archiveer-flows a:hover { color: var(--groen); text-decoration: underline; }
.archiveer-flows .route { font-size: .8333rem; display: inline-flex; align-items: center; gap: .2667rem; }
.archiveer-flows .route svg { width: .8rem; height: .8rem; }
.archiveer-gevolgen { gap: .4rem; padding-top: .4rem; }
.archiveer-gevolgen li { position: relative; padding-left: 1rem; }
.archiveer-gevolgen li::before { content: ""; position: absolute; left: 0; top: .6rem; width: .3333rem; height: .3333rem; border-radius: 50%; background: var(--ink3); }
@media (max-width: 760px) { .archiveer-flows li { display: grid; } }

/* Settings: ankers links, vlakken rechts, Save changes-balk onderaan */
.indeling { display: flex; flex-wrap: wrap; gap: 1.8667rem; align-items: flex-start; }
.ankers { flex: 1 1 12rem; max-width: 14.6667rem; display: grid; gap: 2px; position: sticky; top: 1.0667rem; }
.ankers a { display: block; padding: .5333rem .8rem; border-radius: var(--r-veld); color: var(--ink2); text-decoration: none; font-weight: 500; }
.ankers a:hover { background: var(--lijn2); color: var(--diep); }
/* Settings is geen datascherm: het kader mag breed worden, de vlakken niet. */
.inhoud { flex: 999 1 42.6667rem; min-width: 0; display: grid; gap: 1.0667rem; max-width: 80rem; }
.inhoud > .vlak { scroll-margin-top: 1.0667rem; }
.instel-breed { grid-template-columns: 13.3333rem minmax(0,1fr); align-items: center; }
.instel-breed > .lbl { padding-top: 0; }
div.waarde { display: flex; align-items: center; gap: .6667rem; flex-wrap: wrap; min-width: 0; }
.opgeslagen-k { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink2); }
.opgeslagen-k svg { color: var(--groen); width: .9333rem; height: .9333rem; }
.vervang { display: inline-flex; align-items: center; gap: .5333rem; flex-wrap: wrap; }
.vervang > summary { list-style: none; }
.vervang > summary::-webkit-details-marker { display: none; }
.vervang[open] { display: flex; width: 100%; }
.vervang .in { max-width: 21.3333rem; }
.plakbalk { position: sticky; bottom: 1.0667rem; display: flex; justify-content: flex-end; margin-top: .2667rem; z-index: 20; }
.plakbalk .concept { box-shadow: 0 .6667rem 2rem rgba(14,42,39,.18), 0 2px .4rem rgba(14,42,39,.08); }

@media (max-width: 760px) {
  .zoek .in, .in-klant, .in-flow, .in-status, .in-klantnaam { width: 100%; }
  .filter, .filter .zoek, .kop > .acties, .kop > form.acties { width: 100%; }
  .filter > * { flex: 1 1 9.3333rem; }
  .datumveld .in { width: auto; flex: 1 1 auto; }
  .datumveld > span { min-width: 2.2667rem; }
  .instel, .instel-breed { grid-template-columns: minmax(0,1fr); gap: .4rem; padding: .8rem 1.0667rem; }
  .instel > .lbl { padding-top: 0; }
  .gebr-rij { grid-template-columns: minmax(0,1fr) 2rem; }
  .gebr-staat { grid-column: 1; justify-content: flex-start; }
  .gebr-rij > .overloop, .gebr-rij > .knop-plek { grid-column: 2; grid-row: 1; }
  .lijn { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .seg { font-size: .7667rem; gap: .2667rem; padding: .5333rem 2px; }
  .seg svg { display: none; }
  .ankers { position: static; max-width: none; display: flex; flex-wrap: wrap; flex-basis: 100%; }
  .chip-nieuw { width: 100%; }
  .tbl-wrap > table.t { min-width: 45.3333rem; }
  .tbl-wrap > table.t.berichten { min-width: 64rem; }
  .tbl-wrap > table.t.t-archief { min-width: 0; }
  /* Twee kolommen: past op een telefoon, de status mag niet buiten beeld vallen. */
  .tbl-wrap > table.t.t-bestand { min-width: 0; }
  .t.berichten th.k-flow { width: 10rem; }
  .blok-zoek { flex-wrap: nowrap; }
  .blok-zoek .zoek { flex: 1 1 0; }
  .blok-zoek .zoek-telling { white-space: nowrap; }
  .blok-inhoud { padding: .8rem 1.0667rem; }
  .blok > summary { flex-wrap: nowrap; }
  .blok > summary h2 { white-space: nowrap; }
  .blok-bij { display: none; }
  .vlak-kop { flex-wrap: wrap; }
  .voetje { padding: .8rem 1.0667rem; }
}
.instel.veranderd { background: #FFFBF0; }
.inhoud > *, .stapel > * { min-width: 0; }
.tbl-wrap { position: relative; } /* houdt .sr-only-tekst in een scrollende tabel binnen het vlak */

/* ── Klantportaal (PortalFlows, PortalFlow) ─────────────────────────────── */
.portaal-instel { margin-top: 1.6rem; }
.portaal-indeling { display: grid; grid-template-columns: minmax(0,1fr) 25.3333rem; gap: 1.6rem; align-items: start; }
.portaal-indeling > * { min-width: 0; }
.links-kol { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.7333rem; min-width: 0; }
.sectiekop { display: flex; align-items: center; justify-content: space-between; gap: .6667rem; margin: 0 0 .8rem; }
.sectiekop .links { display: flex; align-items: center; gap: .5333rem; }
.sectiekop h2 { margin: 0; }
.stap-rij.portaal-stap { grid-template-columns: 2rem 7.3333rem minmax(0,1fr); }
.portaal-stap:hover { background: none; }
.portaal-stap .stap-sam { white-space: normal; }
.reden { display: block; font-size: .8333rem; color: var(--ink2); margin-top: .2rem; }
.test-kop { margin-bottom: 0; }
.test-kop form { margin: 0; }
.test-bestand { padding: .9333rem 1.3333rem; border-bottom: 1px solid var(--lijn2); }
.test-leeg { display: grid; gap: .9333rem; justify-items: start; }
.test-form { margin: 0; }
.uitslag { list-style: none; margin: 0; padding: .5333rem 1.3333rem; }
.uitslag li { display: grid; grid-template-columns: 1.4667rem minmax(0,1fr) auto; align-items: center; gap: .6667rem; padding: .5333rem 0; }
.uitslag li + li { border-top: 1px solid var(--lijn2); }
.uitslag .naam { font-weight: 600; color: var(--diep); }
.vink { width: 1.3333rem; height: 1.3333rem; border-radius: 50%; background: var(--mintl); color: var(--groen); display: inline-flex; align-items: center; justify-content: center; }
.vink svg { width: .8rem; height: .8rem; }
.vink.kruis { background: var(--rood-v); color: var(--rood); }
.vink.leeg { background: var(--krijt); border: 1px solid var(--lijn); }
.zou { padding: .9333rem 1.3333rem; border-top: 1px solid var(--lijn2); display: grid; gap: .8rem; background: #FBFCFB; border-radius: 0 0 var(--r-vlak) var(--r-vlak); }
.zou p { margin: 0; color: var(--ink2); }
.zou b { color: var(--diep); font-weight: 600; }
.zou .acties { justify-content: flex-start; flex-wrap: wrap; }
.zou-fout > p:first-child { color: var(--diep); }
.zou .bewijs { margin: 0; }
#test > .hulp-tekst { padding: .6667rem 1.3333rem 0; margin: 0; }
#test > .fout { margin: .9333rem 1.3333rem 0; }
.contact { margin: .9333rem 2px 0; font-size: .8333rem; color: var(--ink3); }
@media (max-width: 1000px) { .portaal-indeling { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 760px) {
  .stap-rij.portaal-stap { grid-template-columns: 1.7333rem minmax(0,1fr); }
  .portaal-stap .stap-sam { grid-column: 2; grid-row: 2; }
}

/* Sessiewaarschuwing (app.js): niet-modaal, rechtsonder. */
.sessie-waarschuwing { position: fixed; right: 1.0667rem; bottom: 1.0667rem; z-index: 80; display: flex; align-items: center; gap: .9333rem; max-width: calc(100vw - 2.1333rem); padding: .8rem .9333rem .8rem 1.0667rem; background: var(--diep); color: var(--op-diep, #fff); border-radius: var(--r-veld); box-shadow: 0 .5333rem 1.6rem rgba(14,42,39,.28); }
.sessie-waarschuwing .sessie-tekst { font-weight: 600; }
.sessie-knop { font: inherit; font-weight: 600; background: var(--mint); color: var(--diep); border: 1px solid var(--mint); border-radius: var(--r-veld); padding: .4rem .8rem; cursor: pointer; }
.sessie-knop:hover { background: var(--mintl); }
.sessie-waarschuwing :focus-visible { outline-color: var(--mint); }
@media (max-width: 520px) { .sessie-waarschuwing { left: 1.0667rem; right: 1.0667rem; flex-wrap: wrap; } }

/* ======================================================================
   AI-assistent: zijpaneel op het flow-scherm (assistent-html.ts,
   assistent.js). Zweeft rechts over de content, onder de topbalk.
   ====================================================================== */
.assistent { position: fixed; top: var(--as-top, 3.8667rem); right: 0; bottom: 0; width: 28rem; max-width: 100vw; z-index: 40; display: flex; flex-direction: column; background: var(--wit); border-left: 1px solid var(--lijn); box-shadow: var(--schaduw-hoog); }
.assistent.as-sleep { outline: 2px dashed var(--groen); outline-offset: -.5333rem; }
.as-kop { display: flex; align-items: center; gap: .2667rem; padding: .6667rem .6667rem .6667rem 1.3333rem; border-bottom: 1px solid var(--lijn2); min-height: 3.6rem; }
.as-kop h2 { margin-right: auto; }
.as-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.0667rem 1.3333rem; display: flex; flex-direction: column; gap: .6667rem; }
.as-leeg { margin: auto; color: var(--ink3); }
.as-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.as-gebruiker { align-self: flex-end; max-width: 85%; display: grid; gap: .4rem; padding: .6rem .8rem; background: var(--mintl); color: var(--diep); border-radius: var(--r-vlak) var(--r-vlak) .2667rem var(--r-vlak); }
.as-assistent { color: var(--ink); }
.as-stap { display: flex; align-items: center; gap: .4rem; color: var(--ink3); font-size: .8333rem; }
.as-stap svg { color: var(--groen); }
.as-wijziging { display: flex; align-items: center; gap: .5333rem; padding: .4rem .4rem .4rem .8rem; border: 1px solid var(--lijn); border-radius: var(--r-veld); background: var(--hover); font-size: .8667rem; }
.as-wijziging > svg { color: var(--groen); }
.as-wijziging-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.as-undo-hul { display: inline-flex; flex: none; }
.as-teruggedraaid .as-wijziging-tekst { color: var(--ink3); text-decoration: line-through; }
.as-teruggedraaid > svg { color: var(--ink3); }
.as-alles { display: flex; justify-content: flex-end; margin-top: -.4rem; }
.as-vraag { display: grid; gap: .5333rem; padding: .6667rem .8rem; border: 1px solid var(--lijn); border-radius: var(--r-veld); background: var(--hover); }
.as-keuzes { display: flex; flex-wrap: wrap; gap: .4rem; }
.as-keuzes .knop { height: auto; min-height: 2rem; padding: .3333rem .8rem; white-space: normal; text-align: left; line-height: 1.25; }
.as-werkt { display: flex; align-items: center; gap: .5333rem; color: var(--ink2); font-size: .8333rem; }
.as-invoer { display: grid; gap: .5333rem; margin: 0; padding: .8rem 1.3333rem 1.0667rem; border-top: 1px solid var(--lijn2); }
.as-test { display: flex; align-items: center; gap: .6667rem; }
.as-test label { margin: 0; font-size: .8333rem; font-weight: 600; white-space: nowrap; }
.as-test select.in { height: 2rem; font-size: .8333rem; }
textarea.as-tekst { display: block; height: auto; min-height: 4.8rem; max-height: 12rem; padding: .5333rem .8rem; line-height: 1.4; resize: vertical; }
.as-voet { display: flex; align-items: center; gap: .5333rem; }
.as-status { flex: 1; min-width: 0; color: var(--ink3); }
.as-status.as-fout { color: var(--rood); }
.as-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.as-chip { display: inline-flex; align-items: center; gap: .3333rem; max-width: 100%; height: 1.7333rem; padding: 0 .5333rem; border: 1px solid var(--lijn); border-radius: 999px; background: var(--wit); color: var(--ink2); font-size: .8rem; }
.as-chip-naam { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-chip-x { display: inline-flex; padding: 0; border: 0; background: none; color: var(--ink3); cursor: pointer; }
.as-chip-x:hover { color: var(--rood); }
.as-geblokkeerd { opacity: .55; transition: opacity .2s var(--glij); }
/* De knop in de kop draait mee zolang er een beurt loopt (ook met het paneel dicht). */
#assistent-knop.as-bezig::before { content: ""; width: .8rem; height: .8rem; border: 2px solid var(--lijn); border-top-color: var(--groen); border-radius: 50%; animation: spin .7s linear infinite; }
@media (max-width: 47.99rem) { .assistent { width: 100%; } }

/* Settings › AI usage (ai-gebruik.ts) */
.ai-maand { margin-bottom: 1.0667rem; }
.ai-totalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.0667rem 1.6rem; margin: 0; padding: 1.0667rem 1.3333rem 1.2rem; }
.ai-totalen dt { font-size: .8rem; font-weight: 600; color: var(--ink3); }
.ai-totalen dd { margin: .2667rem 0 0; font-size: 1.2rem; font-weight: 600; color: var(--diep); }
.ai-gesprek .vlak-kop { flex-wrap: wrap; }
.ai-verzonden, .ai-antwoord { display: grid; gap: .6667rem; }
.ai-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink3); margin-bottom: .2667rem; }
.ai-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-denken { margin: 0; font-style: italic; }
.ai-pre { margin: 0; max-height: 24rem; overflow: auto; padding: .6667rem .8rem; background: var(--krijt); border: 1px solid var(--lijn2); border-radius: var(--r-veld); font-family: ui-monospace, "Cascadia Code", monospace; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-details summary { cursor: pointer; color: var(--groen); font-weight: 600; font-size: .8333rem; }
.ai-details[open] summary { margin-bottom: .4rem; }
.ai-details + .ai-details { margin-top: .4rem; }
.ai-bijlagen { margin: 0; padding-left: 1.0667rem; }