/* ============================================================
   TravelAppBuilder — B2C-builder · dark/olijf zoals de hoofdsite,
   minimalistisch: één kolom, één actie per scherm, geen afleiding.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  color-scheme: dark;
  --bl-bg: #101014;
  --bl-surface: #1a1a20;
  --bl-surface-2: #22222b;
  --bl-line: #26262e;
  --bl-line-2: #2e2e38;
  --bl-text: #f2f2f5;
  --bl-dim: #9a9aa5;
  --bl-accent: #a3b763;
  --bl-accent-soft: rgba(163, 183, 99, .13);
  --bl-btn: #879a4c;
  /* Waarschuwingstint: gebruikt door het merk "aanname" in het reisprofiel en door de
     statuskaarten in de rapporten. Stond als losse hex in cp-panel.css — één naam, één
     waarde (12/9/2026). */
  --bl-warn: #dc9a6a;
  --bl-warn-soft: rgba(220, 154, 106, .14);
  --bl-red: #f87171;
  --bl-red-soft: rgba(248, 113, 113, .12);
}

body.b2c-builder {
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.b2c-builder a { color: var(--bl-accent); text-decoration: none; }
.b2c-builder :focus-visible { outline: 3px solid var(--bl-accent); outline-offset: 2px; border-radius: 6px; }

/* ── Kop: klein logo + voortgang ─────────────────────────── */
.bl-top { padding: 18px 20px 0; display: flex; justify-content: center; }
/* uniforme wordmark (card-y8jwx4b): icoon 32px · "Travelapp Builder" 23px/800 */
.bl-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 23px; color: var(--bl-text); }
.bl-logo img { width: 32px; border-radius: 8px; }
.bl-logo span { color: var(--bl-accent); }

.bl-progress { max-width: 560px; margin: 22px auto 0; padding: 0 20px; width: 100%; }
.bl-progress .bar { height: 6px; border-radius: 999px; background: var(--bl-surface-2); overflow: hidden; }
.bl-progress .bar i { display: block; height: 100%; border-radius: 999px; background: var(--bl-accent); transition: width .4s ease; }
.bl-progress .meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--bl-dim); }
.bl-progress .meta b { color: var(--bl-accent); }

/* ── Stapkaart ───────────────────────────────────────────── */
main.bl-main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 22px 20px 60px; }
.bl-card {
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 20px;
  padding: 28px 22px;
}
@media (min-width: 640px) { .bl-card { padding: 34px 32px; } }
.bl-card h1 { font-size: clamp(22px, 4.5vw, 26px); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 10px; }
.bl-card p.intro { color: var(--bl-dim); font-size: 15px; margin-bottom: 22px; }
.bl-card .hint { color: var(--bl-dim); font-size: 13px; margin-top: 14px; }
.bl-emoji { font-size: 38px; margin-bottom: 12px; display: block; }

/* ── Formulieren ─────────────────────────────────────────── */
.bl-field { margin-bottom: 16px; }
.bl-field label { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.bl-field .opt { color: var(--bl-dim); font-weight: 600; font-size: 12px; }
.bl-field input[type=text], .bl-field input[type=email], .bl-field input[type=password], .bl-field select {
  width: 100%; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2); border-radius: 12px;
  padding: 13px 14px; font: inherit; font-size: 15px; color: var(--bl-text);
}
.bl-field input:focus, .bl-field select:focus { border-color: var(--bl-accent); outline: none; }
.bl-grid2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .bl-grid2 { grid-template-columns: 1fr 1fr; } }

.bl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-chips label {
  display: flex; align-items: center; gap: 7px; background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 999px; padding: 10px 16px;
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--bl-text);
}
.bl-chips input { position: absolute; opacity: 0; pointer-events: none; }
.bl-chips label:has(input:checked) { border-color: var(--bl-accent); background: var(--bl-accent-soft); color: var(--bl-accent); }
.bl-chips label:has(input:focus-visible) { outline: 3px solid var(--bl-accent); outline-offset: 2px; }

/* ── Knoppen ─────────────────────────────────────────────── */
.bl-btn {
  display: inline-block; width: 100%; text-align: center;
  background: var(--bl-btn); color: #101014; border: none; border-radius: 14px;
  padding: 16px 24px; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
/* Hervatlink in de rail (card-600946304): discreet, geen extra funnelvraag. */
.lb-hervat { color: var(--bl-dim); text-decoration: underline dotted; cursor: pointer; }
.lb-hervat:hover { color: var(--bl-accent); }

/* display:inline-block hierboven wint van de UA-regel [hidden]{display:none} — daardoor
   stond "Zet mijn reisplanning klaar" ALTIJD in beeld, ook zonder één geldig bestand
   (E2E 24/8, card-600946203). Zelfde valkuil als .lb-inline[hidden] verderop. */
.bl-btn[hidden] { display: none; }
.bl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.bl-btn--ghost { background: var(--bl-surface-2); color: var(--bl-accent); border: 1px solid var(--bl-line-2); }

/* ── Aanmelden met Google/Microsoft op de accountstap (card-846653445, 8/9/2026) ──────────
   Bewust NIET in de accentkleur: de groene knop is in deze builder de weg vooruit ("Bewaar
   mijn reis-app"), en twee even luide knoppen naast elkaar laten de bezoeker kiezen in plaats
   van doorgaan. Deze twee zijn een snellere zijdeur, geen tweede hoofdweg. */
/* De accountstap als één gecentreerde kaart, zoals het loginscherm (card-fgx1vk6). De velden
   liepen over de volle breedte van het gesprek; nu staat alles in een kolom van 420 px,
   midden op het scherm, met dezelfde randen en hoeken als lg-card. */
.bl-accountcard { max-width: 420px; margin: 14px auto 0; padding: 22px 22px 20px;
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 16px; }
.bl-accountcard .bl-field { margin-bottom: 14px; }
.bl-accountcard .bl-actions, .bl-accountcard .lb-actionbar { margin-top: 18px; }
.bl-back--mid { display: block; text-align: center; }
@media (max-width: 460px) { .bl-accountcard { padding: 18px 16px 16px; border-radius: 14px; } }

.bl-sso { display: grid; gap: 10px; }
/* Donkere knoppen, gelijk aan de reisbureau-registratie (Carl 9/9/2026): daar zijn ze
   #101014 met rand #2a2a2a en lichte tekst. Zo voelt de accountstap als één huis. */
.bl-btn--sso {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #101014; color: #f4f4f5; border: 1px solid #2a2a2a; border-radius: 10px;
  min-height: 46px; text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.bl-btn--sso:hover { filter: none; background: #1c1c22; border-color: #3a3a3a; }
.bl-btn--sso svg { flex: none; }
/* "of vul je gegevens in" met een lijn links en rechts, zoals op de loginpagina. */
.bl-sso-of { display: flex; align-items: center; gap: 12px; margin: 4px 0 0;
  color: var(--bl-dim); font-size: 13px; }
.bl-sso-of::before, .bl-sso-of::after {
  content: ""; flex: 1; height: 1px; background: var(--bl-line-2); }
.bl-btn--ghost:hover { filter: brightness(1.15); }
.bl-actions { display: grid; gap: 10px; margin-top: 22px; }
.bl-back { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--bl-dim); }
.bl-back:hover { color: var(--bl-text); }
button.bl-back { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }

/* ── Meldingen ───────────────────────────────────────────── */
.bl-error {
  background: var(--bl-red-soft); color: var(--bl-red); border-radius: 12px;
  padding: 12px 15px; font-size: 14px; font-weight: 600; margin-bottom: 16px;
}
.bl-ok {
  background: var(--bl-accent-soft); color: var(--bl-accent); border-radius: 12px;
  padding: 12px 15px; font-size: 14px; font-weight: 600; margin-bottom: 16px;
}

/* ── Upload (stap documenten) ────────────────────────────── */
.bl-drop {
  border: 2px dashed var(--bl-line-2); border-radius: 18px; background: var(--bl-bg);
  padding: 34px 20px; text-align: center; cursor: pointer; display: block;
  transition: border-color .15s ease, background .15s ease;
}
.bl-drop.is-drag { border-color: var(--bl-accent); background: var(--bl-accent-soft); }
.bl-drop .ic { font-size: 34px; display: block; margin-bottom: 8px; }
.bl-drop b { font-size: 15.5px; }
.bl-drop p { color: var(--bl-dim); font-size: 13px; margin-top: 5px; }
.bl-drop input[type=file] { display: none; }
.bl-drop-fallback { margin-top: 12px; color: var(--bl-dim); font-size: 13px; }

/* ── Doormailen in plaats van uploaden (card-532916103) ──────
   Eén <details>, twee gedaanten. Op een telefoon staat hij open: daar is doorsturen vanuit
   de mailbox veruit de makkelijkste weg en moet het adres meteen in beeld staan. Vanaf
   tabletbreedte klapt hij dicht achter "Liever doormailen?", want op een groot scherm sleep
   je een bestand gewoon naar binnen en zou dit blok de aandacht wegnemen van de dropzone.
   ⚠️ Hij staat in de HTML altijd `open`, en builder.js klapt hem enkel dicht op een breed
   scherm. Andersom (dicht in de HTML, open via CSS) kan niet: de inhoud van een gesloten
   <details> zit in een shadow-slot die je met een gewone regel niet betrouwbaar terugkrijgt.
   Zo is het bovendien veilig zonder JS — dan staat het adres er gewoon, alleen uitgeklapt. */
.bl-mailbox {
  margin-top: 14px; border: 1px solid var(--bl-line); border-radius: 16px;
  background: var(--bl-bg); overflow: hidden;
}
.bl-mailbox > summary {
  list-style: none; cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; gap: 9px;
}
.bl-mailbox > summary::-webkit-details-marker { display: none; }
.bl-mailbox > summary::after {
  content: '›'; margin-left: auto; font-size: 20px; color: var(--bl-dim);
  transform: rotate(90deg); transition: transform .15s ease;
}
.bl-mailbox[open] > summary::after { transform: rotate(-90deg); }
.bl-mailbox-body { padding: 0 16px 15px; }

/* De wachtregel na «Kopieer» (card-48celdi). Geen bubbel van Alex: zij bevestigt wat er
   gebeurd is, dit is een instructie van het scherm. Vandaar een kader in de accentkleur
   en niet de ronde vorm van een gesprek. */
.bl-mailwacht { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0;
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.bl-mailwacht[hidden] { display: none; }
.bl-mailwacht .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-top-color: var(--accent); animation: blMailSpin 1.1s linear infinite; }
@keyframes blMailSpin { to { transform: rotate(360deg); } }
.bl-mailbox-body > p { color: var(--bl-dim); font-size: 13px; }
.bl-mailaddr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px;
}
.bl-mailaddr code {
  flex: 1; min-width: 0; overflow-wrap: anywhere;
  background: var(--bl-accent-soft); color: var(--bl-accent);
  border-radius: 11px; padding: 10px 13px; font-size: 13.5px; font-weight: 700;
}
/* Niet over de volle breedte: kopiëren is een hulpje naast het adres, geen hoofdactie.
   Zonder deze regel rekt .bl-btn zich uit tot een knop die groter is dan de uploadknop. */
.bl-mailaddr .bl-btn { flex: 0 0 auto; width: auto; padding: 10px 18px; }
.bl-mailbox > summary .ic { display: flex; color: var(--bl-dim); }
.bl-mailbox .hint { margin-top: 10px; font-size: 12px; }

/* Waar het voorgevulde e-mailadres vandaan komt (card-601255994). Een veld dat uit zichzelf
   ingevuld is zonder uitleg voelt alsof we meer weten dan we horen te weten — dus staat er
   één regel onder, klein en rustig. */
.bl-mailfrom { margin-top: 6px; font-size: 12px; }

/* ── Hetzelfde reisadres in het klantpaneel (card-601255994) ──────────────────────────
   Geen <details> hier: in het paneel is dit geen alternatief voor slepen maar een eigen
   onderwerp, en het staat al achter een tab. Hergebruikt .bl-mailaddr hierboven, zodat het
   adres in beide schermen identiek oogt. */
.cp-mailbox {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bl-line);
}
.cp-mailbox h3 { font-size: 15px; margin: 0 0 4px; }
.cp-mailbox .hint { font-size: 12.5px; }
.cp-mailpauze {
  margin-top: 10px; font-size: 12.5px; color: var(--bl-dim);
  background: var(--bl-bg); border-radius: 10px; padding: 8px 11px;
}
/* Wat er binnenkwam. Geweigerde mail staat er bewust net zo goed bij: een reiziger die niets
   ziet verschijnen hoort te kunnen lezen waaróm, in plaats van te blijven zoeken. */
.cp-maillog { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; }
.cp-maillog li {
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-top: 1px solid var(--bl-line);
}
.cp-maillog .d { color: var(--bl-dim); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cp-maillog .s { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
.cp-maillog .r { flex: 0 0 auto; color: var(--bl-dim); }
.cp-maillog li.ok .r { color: var(--bl-accent); font-weight: 600; }
/* Een geweigerde mail krijgt de volle regel: die reden is een zin, geen label. */
.cp-maillog li.nok .r { flex: 1 0 100%; }
.cp-mailrotate { margin-top: 13px; }

/* Op een telefoon blijft hij open (builder.js klapt daar niets dicht); dan is de pijl een
   knop die niets belooft. Weg ermee, en de kop zelf ook niet aanklikbaar maken. */
@media (max-width: 700px) {
  .bl-mailbox > summary::after { display: none; }
  .bl-mailbox > summary { cursor: default; }
}
/* Smal scherm: het adres krijgt de volle breedte en de knop gaat eronder. Naast elkaar bleef
   er zo weinig ruimte over dat het adres middenin het domein afbrak ("…in.travel / appbuilder
   .com") — en een adres dat er stuk uitziet, typt niemand over. */
@media (max-width: 480px) {
  .bl-mailaddr { flex-direction: column; align-items: stretch; }
  .bl-mailaddr code { font-size: 13px; text-align: center; }
  .bl-mailaddr .bl-btn { width: 100%; }
}

.bl-files { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.bl-file {
  display: flex; align-items: center; gap: 11px;
  background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 13px; padding: 10px 13px;
  font-size: 13.5px;
}
.bl-file .ext {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: var(--bl-accent-soft); color: var(--bl-accent);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
}
.bl-file .nm { flex: 1; min-width: 0; }
.bl-file .nm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.bl-file .nm span { color: var(--bl-dim); font-size: 12px; }
.bl-file button {
  background: none; border: none; cursor: pointer; font-size: 17px; color: var(--bl-dim);
  padding: 4px 6px; border-radius: 8px; line-height: 1;
}
.bl-file button:hover { color: var(--bl-red); background: var(--bl-red-soft); }

.bl-upload-progress { margin-top: 16px; display: none; }
.bl-upload-progress.on { display: block; }
.bl-upload-progress .bar { height: 8px; border-radius: 999px; background: var(--bl-surface-2); overflow: hidden; }
.bl-upload-progress .bar i { display: block; height: 100%; background: var(--bl-accent); width: 0; transition: width .2s ease; }
.bl-upload-progress p { font-size: 13px; color: var(--bl-dim); margin-top: 7px; font-weight: 600; }

/* ── Analyse (voortgangsflow) ────────────────────────────── */
.bl-stages { list-style: none; display: grid; gap: 4px; margin-top: 20px; }
.bl-stage { display: flex; align-items: center; gap: 13px; padding: 11px 4px; font-size: 15px; font-weight: 700; color: var(--bl-dim); }
.bl-stage .dot {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--bl-line-2); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; background: var(--bl-bg); color: var(--bl-dim);
}
.bl-stage.done { color: var(--bl-text); }
.bl-stage.done .dot { background: var(--bl-accent); border-color: var(--bl-accent); color: #101014; }
.bl-stage.busy { color: var(--bl-accent); }
.bl-stage.busy .dot { border-color: var(--bl-accent); position: relative; }
.bl-stage.busy .dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2.5px solid var(--bl-accent); border-top-color: transparent;
  animation: blSpin .8s linear infinite;
}
@keyframes blSpin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .bl-stage.busy .dot::after { animation-duration: 2.4s; } }
.bl-reassure { margin-top: 18px; color: var(--bl-dim); font-size: 13.5px; min-height: 1.5em; }

/* ── Controle (herkende gegevens) ────────────────────────── */
.bl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.bl-fact { background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 13px; padding: 11px 13px; }
.bl-fact small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--bl-dim); }
.bl-fact b { font-size: 14.5px; }
.bl-days { display: grid; gap: 8px; margin: 6px 0 18px; }
.bl-day { display: flex; gap: 11px; background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 13px; padding: 11px 13px; }
.bl-day .em { font-size: 19px; }
.bl-day small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--bl-dim); }
.bl-day b { font-size: 14px; }
.bl-day span.stay { display: block; color: var(--bl-dim); font-size: 12.5px; margin-top: 2px; }

/* ── Resultaat ───────────────────────────────────────────── */
.bl-result-frame {
  width: min(280px, 74vw); margin: 20px auto; border-radius: 36px;
  background: #000; border: 1px solid #33333d; padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.bl-result-frame iframe {
  display: block; width: 100%; aspect-ratio: 9 / 17.5; border: none; border-radius: 27px; background: var(--bl-bg);
}
.bl-qr { display: flex; gap: 16px; align-items: center; background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 16px; padding: 14px; margin-top: 16px; }
.bl-qr img { width: 116px; height: 116px; border-radius: 10px; flex-shrink: 0; }
.bl-qr p { font-size: 13px; color: var(--bl-dim); }
.bl-qr--big { flex-direction: column; text-align: center; padding: 20px; }

/* ── Aanraakscherm: openen in plaats van scannen (card-534454586, 13/8/2026) ──
   Hier staat iemand die net betaald heeft. Las hij op zijn telefoon "scan de QR-code met je
   telefoon", dan stond hij stil bij de laatste stap van een aankoop — het duurste moment om
   iemand te laten vastlopen. Dezelfde omschakeling als op /probeer/: pointer:coarse en niet de
   schermbreedte, want een smal desktopvenster hoort de QR te houden en een tablet de knop. */
.bl-tik { display: none; margin-top: 16px; }
@media (pointer: coarse), (hover: none) {
  .bl-qr  { display: none; }
  .bl-tik { display: block; }
  .bl-tik .bl-btn { display: block; width: 100%; text-align: center; text-decoration: none; }
}
.bl-qr--big img { width: 180px; height: 180px; }
.bl-paydesk { border: 1px solid var(--bl-line); border-radius: 16px; background: var(--bl-bg); padding: 16px; margin-top: 18px; }
.bl-paydesk .lbl { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.bl-payplans { display: grid; gap: 8px; }
.bl-payplan { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--bl-line); border-radius: 12px; padding: 11px 13px; cursor: pointer; }
.bl-payplan:has(input:checked) { border-color: var(--bl-accent); background: rgba(163, 183, 99, .07); }
.bl-payplan input { margin-top: 3px; accent-color: var(--bl-accent); }
.bl-payplan span { font-size: 14px; line-height: 1.4; }
.bl-payplan em { display: block; font-style: normal; color: var(--bl-accent); font-weight: 800; }
.bl-unlock { border: 1px solid var(--bl-accent); border-radius: 16px; background: rgba(163, 183, 99, .06); padding: 16px; margin: 14px 0 16px; }
.bl-install { margin-top: 16px; }
.bl-install details { border: 1px solid var(--bl-line); border-radius: 13px; background: var(--bl-bg); margin-bottom: 8px; }
.bl-install summary { cursor: pointer; padding: 12px 15px; font-weight: 800; font-size: 14px; list-style: none; display: flex; gap: 9px; align-items: center; }
.bl-install summary::-webkit-details-marker { display: none; }
.bl-install .a { padding: 0 15px 13px; font-size: 13.5px; color: var(--bl-dim); }
.bl-linkrow { display: flex; gap: 8px; margin-top: 14px; }
.bl-linkrow input { flex: 1; min-width: 0; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 13px; color: var(--bl-dim); }
.bl-linkrow button { flex-shrink: 0; width: auto; padding: 11px 16px; font-size: 14px; }

/* ── Voet ────────────────────────────────────────────────── */
.bl-foot { text-align: center; padding: 0 20px 26px; color: var(--bl-dim); font-size: 12.5px; }
.bl-foot a { color: var(--bl-dim); text-decoration: underline; }

/* ── Uploadpagina: badges ────────────────────────────────── */
.bl-badges { list-style: none; display: grid; gap: 6px; margin-bottom: 18px; }
.bl-badges li { color: var(--bl-dim); font-size: 13.5px; font-weight: 600; }

/* ── Algemene extra elementen ────────────────────────────── */
.bl-linkbtn { background: none; border: none; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 700; color: var(--bl-dim); text-decoration: underline; }
.bl-linkbtn:hover { color: var(--bl-text); }
.bl-field textarea { width: 100%; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2);
  border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px; color: var(--bl-text); resize: vertical; }
.bl-field textarea:focus { border-color: var(--bl-accent); outline: none; }
.bl-field input[type=date], .bl-field input[type=file] { width: 100%; background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 12px; padding: 11px 14px; font: inherit;
  font-size: 14px; color: var(--bl-text); }
label.chk { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; font-weight: 600;
  cursor: pointer; margin: 6px 0; }
label.chk input { width: 17px; height: 17px; accent-color: var(--bl-accent); margin-top: 2px; }
/* Niet van toepassing voor deze reis (bv. valuta in een euroland): tonen dat het bestaat,
   maar grijs en niet bedienbaar. Zelfde principe als in de app-instellingen. */
label.chk--off { cursor: default; opacity: .5; }
label.chk--off input { pointer-events: none; }
.bl-checks-inline { display: grid; gap: 2px; }
.dim { color: var(--bl-dim); }
.bl-actions--row { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-actions--row .bl-btn { width: auto; flex: 1; min-width: 180px; }
.bl-btn--mini { width: auto; padding: 9px 14px; font-size: 13.5px; border-radius: 10px; }
.bl-btn--danger { background: var(--bl-red-soft); color: var(--bl-red); border: 1px solid rgba(248,113,113,.3); }
.bl-btn--danger:hover { filter: none; background: rgba(248,113,113,.2); }
.bl-rowbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }

/* ── Preview (stap 5) ────────────────────────────────────── */
.bl-preview { display: grid; gap: 12px; margin: 6px 0 4px; }
.bl-cover { border-radius: 18px; padding: 26px 20px;
  background: linear-gradient(140deg, rgba(163,183,99,.35), var(--bl-surface-2) 70%);
  border: 1px solid var(--bl-line-2); }
.bl-cover small { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: 10.5px; color: var(--bl-accent); }
.bl-cover .t { font-size: 23px; font-weight: 800; letter-spacing: -.015em; margin: 4px 0 10px; }
.bl-cover .chips, .bl-pweer .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bl-cover .chips span, .bl-pweer .chips span { background: rgba(16,16,20,.5); border: 1px solid var(--bl-line-2);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; }
.bl-pday, .bl-pweer, .bl-ptip { background: var(--bl-bg); border: 1px solid var(--bl-line);
  border-radius: 16px; padding: 16px; }
.bl-pday .lbl, .bl-pweer .lbl, .bl-ptip .lbl, .bl-locked-days .lbl {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--bl-accent); margin-bottom: 8px; }
.bl-pday h2 { font-size: 17px; margin-bottom: 8px; }
.bl-pday .story, .bl-readonly .story { color: var(--bl-dim); font-size: 14px; line-height: 1.65; }
.bl-pday .story a, .bl-readonly .story a { color: var(--bl-accent); }
.bl-pday .stay, .bl-readonly .stay { margin-top: 10px; font-size: 13.5px; font-weight: 700; }
.bl-ptip p { color: var(--bl-dim); font-size: 13.5px; margin-top: 4px; }
.bl-locked-days { background: var(--bl-bg); border: 1px dashed var(--bl-line-2); border-radius: 16px; padding: 16px; }
.bl-locked-days .row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--bl-line); font-size: 14px; font-weight: 700; color: var(--bl-dim); }
.bl-locked-days .row:last-child { border-bottom: none; }
.bl-locked-feats { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-locked-feats span { background: var(--bl-bg); border: 1px dashed var(--bl-line-2); border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--bl-dim); }

/* ── Formulekaarten (stap 6) ─────────────────────────────── */
.bl-card--wide { max-width: none; }
main.bl-main:has(.bl-card--wide) { max-width: 980px; }
.bl-plans { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 16px; }
@media (min-width: 860px) { .bl-plans { grid-template-columns: repeat(3, 1fr); } }
/* 2-tier-variant (b2cPricingColumns): twee gelijke kolommen, stapelt smal */
@media (min-width: 660px) { .bl-plans.bl-plans--2 { grid-template-columns: repeat(2, 1fr); } }
/* Eerste-login-keuzescherm (card-cm7j6is): twee grote keuzekaarten */
.bl-choice { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 8px 0 18px; }
@media (min-width: 860px) { .bl-choice { grid-template-columns: repeat(2, 1fr); } }
.bl-choice .bl-plan h2 { font-size: 17px; margin-bottom: 4px; }
.bl-choice form { margin-top: auto; }
.bl-plan { position: relative; background: var(--bl-bg); border: 1px solid var(--bl-line-2);
  border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; }
.bl-plan.hl { border-color: var(--bl-accent); box-shadow: 0 0 0 1px var(--bl-accent); }
.bl-plan .tag { position: absolute; top: -11px; left: 18px; background: var(--bl-accent); color: #101014;
  border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.bl-plan h2 { font-size: 18px; }
.bl-plan .prijs { color: var(--bl-accent); font-weight: 800; font-size: 16px; margin: 2px 0 6px; }
.bl-plan .pitch { color: var(--bl-dim); font-size: 13.5px; margin-bottom: 12px; }
.bl-plan ul { list-style: none; display: grid; gap: 6px; margin-bottom: 16px; flex: 1; }
.bl-plan li { font-size: 13px; color: var(--bl-dim); padding-left: 18px; position: relative; }
.bl-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--bl-accent); font-weight: 800; }

/* ── Controlepaneel ──────────────────────────────────────── */
.bl-ptop { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface); }
.bl-ptop .who { margin-left: auto; color: var(--bl-dim); font-size: 13.5px; font-weight: 700; }
.bl-tripswitch { display: flex; gap: 8px; flex-wrap: wrap; max-width: 860px; margin: 14px auto 0; padding: 0 20px; }
.bl-tripswitch a { background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--bl-dim); }
.bl-tripswitch a.on { border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-nav { display: flex; gap: 6px; flex-wrap: wrap; max-width: 860px; margin: 16px auto 0; padding: 0 20px; }
.bl-nav a { background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 11px;
  padding: 9px 13px; font-size: 13.5px; font-weight: 700; color: var(--bl-dim); }
.bl-nav a:hover { color: var(--bl-text); }
.bl-nav a.on { background: var(--bl-accent-soft); border-color: var(--bl-accent); color: var(--bl-accent); }
.bl-main--panel { max-width: 860px; }
.bl-facts--3 { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .bl-facts--3 { grid-template-columns: repeat(3, 1fr); } }
.bl-upgradebar { max-width: 860px; margin: 0 0 16px; background: rgba(163,183,99,.1);
  border: 1px solid var(--bl-accent); border-radius: 13px; padding: 12px 15px; font-size: 14px; color: var(--bl-dim); }
.bl-upgradebar b { color: var(--bl-text); }
.bl-upgradebar a { font-weight: 800; }
.bl-daybox { border: 1px solid var(--bl-line); border-radius: 14px; background: var(--bl-bg);
  margin-bottom: 10px; padding: 0 14px; }
.bl-daybox summary { cursor: pointer; padding: 13px 2px; font-weight: 800; font-size: 14.5px; }
.bl-daybox > form, .bl-daybox .bl-readonly { padding-bottom: 14px; }
.bl-extra { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 11px;
  padding: 9px 12px; margin-bottom: 7px; font-size: 13.5px; flex-wrap: wrap; }
.bl-extra.off { opacity: .45; }
/* ── QR met TAB-logo (b2cQrImg, card-mvqw5di) ── */
.bl-qrwrap { position: relative; display: inline-block; flex-shrink: 0; }
.bl-qrwrap > img:first-child { display: block; width: 100% !important; height: 100% !important; border-radius: 10px; }
.bl-qrwrap .logo { position: absolute; inset: 0; margin: auto; border-radius: 20%;
  background: #1a1a20; padding: 3px; box-sizing: content-box;
  width: 24% !important; height: 24% !important; }

/* ── Mini-WYSIWYG in het CP (textarea[data-wysiwyg], zie builder.js) ──
   De werkbalk toont line-SVG-iconen (geen letters/emoji — icoonconventie). */
.cp-wys { border: 1px solid var(--bl-line); border-radius: 12px; overflow: hidden; background: var(--bl-bg); }
.cp-wysbar { display: flex; align-items: center; gap: 2px; padding: 5px 6px;
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface); }
.cp-wysbar button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0;
  border: none; background: none; color: var(--bl-dim); border-radius: 7px; cursor: pointer; }
.cp-wysbar button:hover { background: var(--bl-bg); color: var(--bl-text); }
.cp-wysbar button:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
.cp-wysbar button svg { display: block; }
.cp-wyssep { width: 1px; height: 17px; margin: 0 5px; background: var(--bl-line-2); flex-shrink: 0; }
.cp-wysed { min-height: 110px; padding: 10px 13px; font-size: 14px; line-height: 1.6; outline: none; }
.cp-wysed--mini { min-height: 48px; }
/* Blocnote van de Notities-sectie: ruim schrijfvlak, zodat het als een notitieblok voelt. */
.cp-wysed--note { min-height: 300px; padding: 14px 16px; font-size: 14.5px; line-height: 1.7; }
.cp-wysed:focus { box-shadow: inset 0 0 0 1.5px var(--bl-accent); border-radius: 0 0 12px 12px; }
.cp-wysed a { color: var(--bl-accent); text-decoration: underline; }
.cp-wysed h4 { font-size: 15px; margin: 6px 0 2px; }
.cp-wysed ul, .cp-wysed ol { padding-left: 22px; margin: 4px 0; }
.cp-wysed:empty::before { content: attr(data-ph); color: var(--bl-dim); opacity: .65; }

/* Inline bewerken van een suggestie (card-cm7j6is): uitklapformulier onder de rij */
.bl-extraedit { flex-basis: 100%; }
.bl-extraedit summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--bl-accent); padding: 2px 0; }
.bl-extraedit form { margin-top: 8px; }
.bl-extra .bl-rowbtns { margin-top: 0; flex-shrink: 0; }
.bl-subform { border: 1px dashed var(--bl-line-2); border-radius: 12px; padding: 0 12px; margin: 10px 0; }
.bl-subform summary { cursor: pointer; padding: 11px 2px; font-weight: 700; font-size: 13.5px; color: var(--bl-accent); }
.bl-subform form { padding-bottom: 12px; }
.bl-inlineform { display: flex; gap: 8px; margin-top: 8px; }
.bl-inlineform input[type=text] { flex: 1; min-width: 0; background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 11px; padding: 10px 13px; font: inherit;
  font-size: 14px; color: var(--bl-text); }
.bl-doclist { margin-top: 16px; display: grid; gap: 8px; }
.bl-docrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: 12px; padding: 10px 12px; }
.bl-docrow .ext { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: var(--bl-accent-soft); color: var(--bl-accent); display: grid; place-items: center;
  font-size: 10px; font-weight: 800; }
.bl-docrow form.grow { flex: 1; min-width: 240px; display: flex; gap: 8px; }
.bl-docrow form.grow input[type=text] { flex: 1.4; min-width: 0; background: var(--bl-surface);
  border: 1px solid var(--bl-line-2); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--bl-text); }
.bl-docrow form.grow select { flex: 1; min-width: 0; background: var(--bl-surface);
  border: 1px solid var(--bl-line-2); border-radius: 9px; padding: 8px; font: inherit; font-size: 12.5px; color: var(--bl-text); }
.bl-planfeats { list-style: none; display: grid; gap: 6px; }
.bl-planfeats li { font-size: 14px; color: var(--bl-dim); }
.bl-chipsrow { display: flex; flex-wrap: wrap; gap: 7px; }
.bl-chipsrow .chip { background: var(--bl-bg); border: 1px solid var(--bl-line-2); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--bl-dim); }
.bl-danger { margin-top: 24px; border: 1px solid rgba(248,113,113,.3); border-radius: 14px; padding: 14px 16px; }

/* ════════════════════════════════════════════════════════════
   Alex-builder (lb-) — 3 kolommen op desktop, stepper op tablet,
   single column + bottom sheets + previewoverlay op mobiel.
   ════════════════════════════════════════════════════════════ */

body.lb { display: block; }

/* ── Bovenbalk (mobiel + tablet) ─────────────────────────── */
.lb-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface);
  position: sticky; top: 0; z-index: 30; }
.lb-topbtns { margin-left: auto; display: flex; gap: 8px; }
.lb-iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bl-line-2);
  background: var(--bl-bg); color: var(--bl-text); font-size: 16px; cursor: pointer;
  display: grid; place-items: center; text-decoration: none; }
.lb-iconbtn:hover { border-color: var(--bl-accent); }

/* ── Reisbureaus zoeken in de partnerpopup ───────────────────────────────────
   Ruimere popup dan de standaard-sheet, en de zoekknop is een gewone knop naast het
   postcodeveld — .bl-btn is standaard width:100%, waardoor hij anders over de volle
   breedte ging staan (feedback Carl 30/7). */
#partnerSheet { width: min(720px, 100vw); padding: 20px 22px calc(22px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { #partnerSheet { padding: 26px 30px 28px; } }
#partnerSheet .lb-sheethead { margin-bottom: 14px; }
#partnerSheet .lb-sheethead b { font-size: 17px; }
/* Land · postcode · knop op één lijn (1/8/2026, feedback Carl). Drie punten die eerder
   misgingen: het landveld nam alle ruimte, het postcodeveld stond iets hoger, en de popup
   kreeg een horizontale scrollbalk. Vandaar vaste, bescheiden kolombreedtes, exact
   dezelfde opmaak voor select en input, en min-width:0 zodat niets buiten de popup duwt. */
.lb-partnerzoek { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 120px) auto;
  gap: 12px; align-items: end; margin-bottom: 18px; max-width: 100%; }
@media (max-width: 460px) { .lb-partnerzoek { grid-template-columns: minmax(0, 1fr) minmax(0, 110px); }
  .lb-partnerzoek .bl-btn { grid-column: 1 / -1; } }
.lb-partnerzoek label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 700;
  color: var(--bl-dim); min-width: 0; margin: 0; }
.lb-partnerzoek select, .lb-partnerzoek input { background: var(--bl-bg);
  border: 1.5px solid var(--bl-line-2); border-radius: 10px; color: var(--bl-text);
  font: inherit; font-size: 14.5px; line-height: 1.2; padding: 0 12px; width: 100%;
  min-width: 0; height: 44px; box-sizing: border-box; margin: 0; }
.lb-partnerzoek .bl-btn { width: auto; height: 44px; padding: 0 20px; font-size: 14.5px;
  border-radius: 11px; align-self: end; }
#partnerUitslag .lb-ctxrow { padding: 11px 2px; }
.lb-pznul { color: var(--bl-text) !important; font-weight: 700; }

/* ── Antwoordknoppen in de chat ──────────────────────────────────────────────
   .bl-btn is standaard width:100%, dus elk antwoord kreeg een eigen regel als een groot
   blok. In een gesprek horen antwoorden compacte knoppen naast elkaar te zijn (feedback
   Carl 30/7). Geldt voor de hele Alex-chat: elke knop binnen een antwoordveld. De grote
   hoofdactie onderaan (.lb-actionbar) blijft bewust wél breed. */
.lb-qa-in .bl-btn, .lb-gdkeuze .bl-btn {
  width: auto; flex: 0 0 auto; padding: 10px 20px; font-size: 14.5px; border-radius: 11px;
}
.lb-qa-in .lb-send { padding: 9px 12px; }   /* vliegtuigje: vierkant houden */

/* ── Gesprek "geen documenten": keuzeknoppen + datumvraag ─────────────────── */
.lb-gdkeuze { display: flex; gap: 10px; flex-wrap: wrap; }
.lb-gddates { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 16px; padding: 12px 14px; }
.lb-gddate { display: grid; gap: 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bl-dim); }
/* Vaste, krappe veldbreedte: met de standaardbreedte werd de rij een paar pixels te
   breed en klapte de knop naar een tweede regel. */
.lb-gddates input[type=date] { width: 148px; background: var(--bl-bg); border: 1.5px solid var(--bl-line-2);
  border-radius: 11px; color: var(--bl-text); font: inherit; font-size: 15px; font-weight: 700;
  padding: 11px 12px; }
.lb-gddates input[type=date]:focus { border-color: var(--bl-accent); outline: none; }
.lb-gdpijl { align-self: center; padding: 0 2px 8px; color: var(--bl-dim); font-weight: 800; }
.lb-gddates .bl-btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .lb-gdpijl { display: none; }
  .lb-gddates .bl-btn { width: 100%; }   /* op een smal scherm mag hij wél de rij vullen */
}

/* ── Documenten-snelweg: één regel boven het gesprek (card-593369289) ──
   Bewust ingetogen: dit is een afslag voor wie al weet wat hij wil, geen tweede
   hoofdknop. Op een smal scherm gaat de knop onder de zin staan. */
.lb-snelweg { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 18px; padding: 11px 14px; border: 1px dashed var(--bl-line-2);
  border-radius: 14px; background: var(--bl-surface); }
.lb-snelweg p { margin: 0; font-size: 14px; font-weight: 700; color: var(--bl-dim); }
.lb-snelweg .bl-btn { width: auto; padding: 8px 14px; font-size: 13.5px; border-radius: 10px;
  white-space: nowrap; }

/* ── Vrijwillig seintje op het afscheidsscherm (card-593374765) ──
   Rustig blok: één veld, één vinkje, één knop, en een tekstlinkje om het weg te klikken.
   Het mag nooit aanvoelen als een verplichte stap — de bezoeker is hier klaar. */
.lb-seintje { display: grid; gap: 10px; background: var(--bl-surface); border: 1px solid var(--bl-line);
  border-radius: 16px; padding: 14px; }
.lb-seintje input[type=email] { background: var(--bl-bg); border: 1.5px solid var(--bl-line-2);
  border-radius: 11px; color: var(--bl-text); font: inherit; font-size: 15px; padding: 11px 12px;
  width: 100%; box-sizing: border-box; }
.lb-seintje input[type=email]:focus { border-color: var(--bl-accent); outline: none; }
.lb-seincheck { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45;
  color: var(--bl-dim); cursor: pointer; }
.lb-seincheck input { margin-top: 2px; accent-color: var(--bl-accent); }
.lb-seinknoppen .bl-btn { width: 100%; }
.lb-seinfout { margin: 0; font-size: 13px; font-weight: 700; color: #e06a6a; }
.lb-seinnee { text-align: center; margin-top: 10px; }

/* ── Dagenlijst: melding na een periodewijziging + dag buiten de reisperiode ── */
.bl-daynotice { margin: 8px 2px 0; font-size: 12.5px; color: var(--bl-dim); }
.bl-daynotice .lb-linklike { margin-left: 2px; }
.bl-day--buiten { border-color: #7a5a2a !important; }
.bl-dayout { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #e0a955; }

/* ── Twee gelijkwaardige acties op één lijn (uploadstap zonder boeking) ────
   De rij zelf is .lb-actionbar--duo (bestond al). Hier alleen wat de lange labels
   nodig hebben: nooit uit de kolom lopen, en op een smal scherm netjes stapelen. */
.lb-actionbar--duo .bl-btn { min-width: 0; }
@media (max-width: 560px) { .lb-actionbar--duo { grid-template-columns: 1fr; } }
.lb-uploadhint { margin: 10px 2px 0; text-align: center; }
.lb-partnerregio { margin-bottom: 14px; }
.lb-partnerregio h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--bl-dim); }
.lb-partnerregio h4 small { font-weight: 700; }

/* ── Preview groeit mee: korte puls op wat er net veranderde ──────────────
   pvFlash() in builder.js zet .pv-flash op het onderdeel dat net bijgewerkt is.
   ⚠️ Die klasse had GEEN styling, dus elke previewwijziging bleef onzichtbaar
   (30/7/2026). Zacht maar merkbaar: accentring + lichte lift, 1,1 s, één keer. */
.lb-phone .pv-flash { animation: pvFlash 1.15s ease-out 1; border-radius: 12px; }
@keyframes pvFlash {
  0%   { box-shadow: 0 0 0 0 var(--bl-accent); background-color: var(--bl-accent-soft); transform: scale(1); }
  15%  { box-shadow: 0 0 0 2px var(--bl-accent); background-color: var(--bl-accent-soft); transform: scale(1.03); }
  55%  { box-shadow: 0 0 0 2px var(--bl-accent-soft); background-color: var(--bl-accent-soft); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 transparent; background-color: transparent; transform: scale(1); }
}
/* Wie beweging liever mijdt, ziet enkel de kleurmarkering — geen scale, geen sprong. */
@media (prefers-reduced-motion: reduce) {
  .lb-phone .pv-flash { animation: pvFlashSoft 1.1s ease-out 1; }
  @keyframes pvFlashSoft {
    0%, 60% { background-color: var(--bl-accent-soft); }
    100%    { background-color: transparent; }
  }
}

/* ── Rail-voet: discrete acties (Start opnieuw / Reset sessie) ──────────── */
.lb-railfoot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bl-line);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lb-ghost { background: none; border: 1px solid var(--bl-line); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: center;
  color: var(--bl-dim); text-decoration: none; transition: color .15s, border-color .15s; }
/* ⚠️ `.b2c-builder a` (bovenaan dit bestand) zet élke link op de accentkleur en is
   specifieker dan `.lb-ghost` — de tekstkleur moet hier dus op de a-variant staan,
   anders wordt de grijze pill groen. */
.b2c-builder a.lb-ghost { color: var(--bl-dim); }
.lb-ghost:hover, .lb-ghost:focus-visible,
.b2c-builder a.lb-ghost:hover, .b2c-builder a.lb-ghost:focus-visible {
  color: var(--bl-text); border-color: var(--bl-dim); }
.lb-ghost.dev { font-size: 12px; opacity: .75; }
.lb-ghost.dev::before { content: "⚙"; margin-right: 5px; }

/* ── Stepper (mobiel + tablet) ───────────────────────────── */
.lb-stepper { max-width: 680px; margin: 14px auto 0; padding: 0 18px; }
.lb-stepline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lb-stepline b { font-size: 14.5px; }
.lb-linklike { background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 700; color: var(--bl-accent); padding: 0; }
.lb-segs { display: flex; gap: 5px; margin-top: 9px; }
.lb-segs i { flex: 1; height: 5px; border-radius: 999px; background: var(--bl-surface-2); }
.lb-segs i.done { background: var(--bl-accent); opacity: .55; }
.lb-segs i.on { background: var(--bl-accent); }
.lb-stephint { color: var(--bl-dim); font-size: 12.5px; margin-top: 8px; }
.lb-ctxline { display: block; width: 100%; text-align: left; background: var(--bl-surface);
  border: 1px solid var(--bl-line); border-radius: 11px; padding: 9px 12px; margin-top: 10px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--bl-dim); cursor: pointer; }
.lb-ctxline:hover { border-color: var(--bl-accent); }

/* ── Shell ───────────────────────────────────────────────── */
.lb-shell { display: block; }
.lb-rail, .lb-right { display: none; }
.lb-convo { max-width: 680px; margin: 0 auto; padding: 18px 18px 90px; }

/* ── Alex-gesprek ────────────────────────────────────────── */
.lb-msg { display: flex; gap: 11px; align-items: flex-start; margin: 16px 0 14px; }
.lb-ava { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--bl-accent), #6b7f3a); display: grid; place-items: center;
  font-size: 19px; box-shadow: 0 4px 12px rgba(163, 183, 99, .3); }
.lb-bubble { background: var(--bl-surface); border: 1px solid var(--bl-line);
  border-radius: 4px 18px 18px 18px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6;
  color: var(--bl-dim); max-width: 560px; }
.lb-bubble b { color: var(--bl-text); }
.lb-bubble a { color: var(--bl-accent); }
/* Een beantwoorde vraag (card-y4tzyc3). Vraag en antwoord stonden op één regel tegen elkaar
   geplakt met een vinkje en een potlood-emoji erachter; bij een lang antwoord liep het in
   elkaar over. Nu: de vraag als klein kopje, het antwoord eronder, een rustig vinkje links,
   en het potlood pas bij aanraking. */
.lb-done { display: flex; gap: 11px; align-items: flex-start;
  background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 13px;
  padding: 11px 14px; margin: 6px 0 6px 49px; font-size: 13px; color: var(--bl-dim); }
.lb-done--edit { padding: 0; border: 0; background: none; }
.lb-done--edit button { display: flex; gap: 11px; align-items: flex-start; width: 100%;
  padding: 11px 14px; border: 1px solid var(--bl-line); border-radius: 13px; cursor: pointer;
  background: var(--bl-surface); color: inherit; font: inherit; text-align: left;
  transition: border-color .15s ease, background .15s ease; }
.lb-done--edit button:hover, .lb-done--edit button:focus-visible {
  border-color: color-mix(in srgb, var(--bl-accent) 55%, transparent);
  background: color-mix(in srgb, var(--bl-accent) 7%, var(--bl-surface)); }
.lb-done-ok { flex: 0 0 auto; display: grid; place-items: center; width: 19px; height: 19px;
  margin-top: 1px; border-radius: 50%; color: var(--bl-accent);
  background: color-mix(in srgb, var(--bl-accent) 16%, transparent); }
.lb-done-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-done-t > span { font-size: 12px; line-height: 1.35; color: var(--bl-dim); }
.lb-done b { color: var(--bl-text); font-size: 14px; font-weight: 600; line-height: 1.45; }
.lb-done-pen { flex: 0 0 auto; margin-top: 1px; color: var(--bl-dim); opacity: 0;
  transition: opacity .15s ease; }
.lb-done--edit button:hover .lb-done-pen,
.lb-done--edit button:focus-visible .lb-done-pen { opacity: 1; }
@media (hover: none) { .lb-done-pen { opacity: .55; } }
.lb-help { color: var(--bl-dim); font-size: 12.5px; }
.lb-answer { margin-left: 0; }
@media (min-width: 560px) { .lb-answer { margin-left: 49px; } .lb-done { margin-left: 49px; } }

.lb-privacycard { background: var(--bl-accent-soft); border: 1px solid rgba(163, 183, 99, .35);
  border-radius: 13px; padding: 13px 15px; margin-top: 14px; font-size: 13px; }
.lb-privacycard b { display: block; margin-bottom: 4px; font-size: 13.5px; }
.lb-privacycard p { color: var(--bl-dim); line-height: 1.55; }
.lb-privacycard a { font-weight: 700; }

/* ── Actiebalk: sticky onderaan op mobiel ────────────────── */
/* Instemming onmiddellijke levering — verplicht vóór de betaalknop (WER VI.53, 13°). */
.lb-consent { display:flex; gap:10px; align-items:flex-start; margin:6px 0 10px;
  font-size:13.5px; line-height:1.45; color:var(--bl-dim); cursor:pointer; }
.lb-consent input { flex:none; width:18px; height:18px; margin-top:1px; accent-color:var(--bl-accent); }
.lb-actionbar { margin-top: 20px; display: grid; gap: 10px; }
/* Hoofdactie en "Sla over" op één rij (Carl, 9/9/2026): de hoofdactie krijgt twee derde,
   het overslaan één derde — zo blijft duidelijk welke van de twee de gewone weg is. */
.lb-actionbar--rij { grid-template-columns: 2fr 1fr; }
@media (max-width: 380px) { .lb-actionbar--rij { grid-template-columns: 1fr; } }
/* groene (accent)knoppen krijgen ALTIJD donkere tekst — de generieke a-kleurregel
   (.b2c-builder a) maakte linkknoppen anders groen-op-groen */
.b2c-builder a.bl-btn { color: #101014; }
.b2c-builder a.bl-btn--ghost, .b2c-builder a.bl-btn.bl-btn--ghost { color: var(--bl-accent); }
.lb-actionbar--duo { grid-template-columns: 1fr 1fr; }
@media (max-width: 767px) {
  .lb-actionbar { position: sticky; bottom: 0; z-index: 10; padding: 12px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bl-bg) 65%, transparent); }
}

/* ── Previewknop in het gesprek (mobiel/tablet) ──────────── */
.lb-previewbtn { display: block; width: 100%; margin-top: 18px; background: var(--bl-surface);
  border: 1.5px dashed var(--bl-line-2); border-radius: 13px; padding: 13px; font: inherit;
  font-size: 14px; font-weight: 800; color: var(--bl-accent); cursor: pointer; }
.lb-previewbtn:hover { border-color: var(--bl-accent); }

/* ── Previewtelefoon ─────────────────────────────────────── */
.lb-phone { width: min(300px, 82vw); margin: 0 auto; border-radius: 34px; border: 1px solid #33333d;
  background: #000; padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
/* Mockup-variant (16/7/2026): previewPhone rendert exact het .tabmock-ontwerp uit
   mock.css — het telefoonkader komt dan uit .tabmock .phone, niet uit .lb-phone. */
.lb-phone--mock { width: auto; border: none; background: none; padding: 0; box-shadow: none;
  border-radius: 0; display: flex; justify-content: center; }
.lb-phone--mock .lb-screen { border: none; }
.lb-phone--mock .lb-screen-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lb-phone--mock .tabmock { --s: 1; }
@media (max-width: 400px) { .lb-phone--mock .tabmock { --s: .84; } }
/* de preview heeft twee sbody's (Vandaag + Planning/voorproef): [hidden] wint van
   mock.css' display:flex, anders delen ze de hoogte */
.tabmock .sbody[hidden] { display: none; }
/* reistype/gezelschap-chips in de apphead volgen de antwoorden live (JS: data-pchips) */
.tabmock [data-pchips] { display: flex; gap: 5px; flex-wrap: wrap; }
.tabmock [data-pchips] .chip { margin-top: 6px; }
.tabmock [data-pchips] span[hidden], .tabmock .lb-apptabs span[hidden] { display: none; }
.lb-screen { border-radius: 25px; overflow: hidden; background: #14141a; border: 1px solid var(--bl-line);
  font-size: 12px; line-height: 1.45; position: relative; }
.lb-apphead { padding: 26px 15px 13px; background: linear-gradient(150deg, #5f7029, #7c8f3e); color: #fff; }
.lb-apphead small { opacity: .85; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 9px; }
.lb-apphead .t { font-size: 16px; font-weight: 800; margin-top: 2px; }
.lb-apphead .chips { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.lb-apphead .chips span { background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 3px 9px;
  font-size: 9.5px; font-weight: 700; }
.lb-appbody { padding: 11px; display: grid; gap: 8px; min-height: 150px; }
.lb-appcard { background: var(--bl-surface); border: 1px solid var(--bl-line); border-radius: 13px; padding: 10px 12px; }
.lb-appcard .lbl { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bl-dim); }
.lb-appcard .row { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-weight: 700; font-size: 12px; color: var(--bl-text); }
.lb-appcard .row .em { font-size: 15px; }
.lb-appcard .sub { color: var(--bl-dim); margin-top: 2px; font-size: 11px; }
/* nowrap: sinds Alex een eigen tab heeft passen er meer tabs dan er in beeld staan.
   De echte app laat de balk dan horizontaal scrollen (style.css .tabbar), dus wrappen
   naar een tweede rij zou een ontwerp tonen dat niet bestaat. */
.lb-apptabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2px 0;
  border-top: 1px solid var(--bl-line); padding: 7px 4px 11px; background: var(--bl-surface);
  font-size: 8px; font-weight: 700; color: var(--bl-dim); text-align: center; }
.lb-apptabs span { min-width: 44px; }
.lb-apptabs span[hidden] { display: none; }
.lb-apptabs b { display: block; font-size: 14px; margin-bottom: 1px; }
.lb-apptabs .on { color: var(--bl-accent); }
.lb-appframe { display: block; width: 100%; aspect-ratio: 9 / 17; border: none; border-radius: 25px; background: var(--bl-bg); }

/* ── Rechterrail ─────────────────────────────────────────── */
.lb-previewhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  text-align: center; gap: 6px 12px; margin-bottom: 12px; }
.lb-previewhead b { font-size: 14.5px; }
.lb-previewhead .dim { font-size: 11.5px; }
.lb-previewnote { color: var(--bl-dim); font-size: 12px; text-align: center; margin-top: 12px; }

/* ── Linkerrail ──────────────────────────────────────────── */
.lb-brand { padding-bottom: 14px; border-bottom: 1px solid var(--bl-line); }
.lb-brandsub { display: block; color: var(--bl-dim); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; margin: 6px 0 10px 38px; }
.lb-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.lb-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bl-accent);
  box-shadow: 0 0 8px rgba(163, 183, 99, .8); }
.lb-saved { color: var(--bl-dim); font-size: 11.5px; font-weight: 700; margin-top: 5px; }
.lb-phases { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--bl-line); }
.lb-phase { display: flex; gap: 10px; align-items: flex-start; padding: 8px 8px; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: var(--bl-dim); text-decoration: none; }
a.lb-phase:hover { background: var(--bl-surface-2); color: var(--bl-text); }
.lb-phase .n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bl-line-2);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.lb-phase.done { color: var(--bl-text); }
.lb-phase.done .n { background: var(--bl-accent); border-color: var(--bl-accent); color: #101014; }
.lb-phase.on { background: var(--bl-accent-soft); color: var(--bl-accent); }
.lb-phase.on .n { border-color: var(--bl-accent); color: var(--bl-accent); }
.lb-phase.todo { opacity: .55; }
.lb-phase .t small { display: block; font-weight: 600; font-size: 11px; color: var(--bl-dim); margin-top: 2px; }
.lb-ctxcard { padding: 14px 4px; border-bottom: 1px solid var(--bl-line); }
.lb-ctxcard h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--bl-dim); margin-bottom: 7px; }
.lb-ctxcard b { font-size: 13.5px; }
.lb-ctxcard p { color: var(--bl-dim); font-size: 12.5px; line-height: 1.55; margin-top: 3px; }
.lb-privacy { padding: 14px 4px 6px; font-size: 12px; }
.lb-privacy b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.lb-privacy p { color: var(--bl-dim); line-height: 1.55; }
.lb-privacy a { font-weight: 700; font-size: 12px; }

/* ── Bottom sheets & overlay (dialog) ────────────────────── */
.lb-sheet, .lb-overlay { border: none; padding: 0; background: var(--bl-surface); color: var(--bl-text); }
.lb-sheet::backdrop, .lb-overlay::backdrop { background: rgba(10, 10, 14, .6); backdrop-filter: blur(2px); }
.lb-sheet { width: min(560px, 100vw); max-height: 80dvh; overflow-y: auto; overflow-x: hidden;
  border-radius: 20px 20px 0 0; border: 1px solid var(--bl-line);
  margin: auto auto 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .lb-sheet { border-radius: 18px; margin: auto; } }
.lb-sheethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lb-sheethead b { font-size: 15.5px; }
.lb-ctxrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px;
  border-bottom: 1px solid var(--bl-line); font-size: 13.5px; }
.lb-ctxrow:last-child { border-bottom: none; }
.lb-ctxrow small { color: var(--bl-dim); font-weight: 700; }
.lb-overlay { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: var(--bl-bg); }
.lb-overlayhead { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--bl-line); background: var(--bl-surface); position: sticky; top: 0; }
.lb-overlayhead b { color: var(--bl-accent); font-size: 13px; }
.lb-overlayhead .dim { font-size: 13px; }
.lb-overlaybody { padding: 22px 16px calc(30px + env(safe-area-inset-bottom)); overflow-y: auto;
  height: calc(100dvh - 62px); }
.lb-overlaybody .lb-phone { width: min(420px, 94vw); }
.lb-appframe--full { border-radius: 14px; aspect-ratio: auto; height: 100%; min-height: 70dvh; }

/* ── Tablet (≥768) ───────────────────────────────────────── */
@media (min-width: 768px) {
  .lb-stepper { max-width: 640px; }
  .lb-convo { padding-bottom: 40px; }
}

/* ── Desktop (≥1200): full width, logobalk boven, 3 kolommen ─ */
/* ── "Rechts" bestaat alleen op desktop ────────────────────────────────────────────────
   Onder 1200 px staat de preview niet naast het gesprek maar achter de knop Preview. Een
   zin die naar rechts wijst klopt daar dus niet (card-v8f98br). Twee varianten in dezelfde
   bubbel, en de CSS kiest — geen flits, en het werkt ook zonder JavaScript. */
.lb-desk { display: none; }
@media (min-width: 1200px) {
  .lb-desk { display: inline; }
  .lb-mob { display: none; }
}

@media (min-width: 1200px) {
  .lb-stepper, .lb-previewbtn { display: none; }
  .lb-topbar { padding: 13px 28px; }
  .lb-topbar .lb-topbtns { display: none; }
  /* kolommen stretchen mee (geen align-items:start!) zodat sticky binnenin werkt */
  .lb-shell { display: grid; grid-template-columns: 300px minmax(520px, 1fr) 460px;
    gap: 36px; max-width: none; margin: 0; padding: 28px 36px 48px; }
  .lb-rail, .lb-right { display: block; }
  /* fijne verticale scheidingslijnen tussen de drie kolommen */
  .lb-rail { border-right: 1px solid var(--bl-line); padding-right: 32px; }
  .lb-right { border-left: 1px solid var(--bl-line); padding-left: 36px; }
  .lb-rail .lb-sticky, .lb-right .lb-sticky { position: sticky; top: 92px; }
  .lb-convo { max-width: 780px; margin: 0 auto; padding: 0 0 40px; width: 100%; }
}
@media (min-width: 1200px) and (max-width: 1420px) {
  .lb-shell { grid-template-columns: 260px minmax(500px, 1fr) 430px; gap: 24px; padding: 24px 24px 40px; }
  .lb-rail { padding-right: 22px; }
  .lb-right { padding-left: 24px; }
}

/* ── Controlestap: bewerkbare dagplanning ────────────────── */
.bl-dayedit { display: flex; flex-direction: column; gap: 10px; }
/* Dag-widget met lichtgrijze achtergrond (zoals de previewkaarten) */
.bl-day { display: flex; align-items: center; gap: 10px; background: var(--bl-surface-2);
  border: 1px solid var(--bl-line-2); border-radius: 14px; padding: 11px 12px;
  transition: border-color .15s ease, background .15s ease; }
.bl-day:hover { border-color: var(--bl-line-2); background: var(--bl-surface); }
.bl-day.dragging { opacity: .55; border-color: var(--bl-accent); }
.bl-drag { flex-shrink: 0; color: var(--bl-dim); cursor: grab; font-size: 17px; line-height: 1;
  padding: 4px 2px; touch-action: none; user-select: none; }
.bl-drag:active { cursor: grabbing; }
/* Datumbadge: dag groot + maand eronder, afgeleid uit het datumveld */
.bl-daybadge { flex-shrink: 0; width: 48px; min-height: 52px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  background: var(--bl-accent-soft); border-radius: 12px; }
/* dubbele selector: wint van de generieke .bl-day b/small-typografie verderop */
.bl-day .bl-daybadge b { font-size: 20px; font-weight: 800; line-height: 1.05; color: var(--bl-text); }
.bl-day .bl-daybadge small { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--bl-accent); }
.bl-day-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bl-daystay { background: none; border: none; color: var(--bl-text); font: inherit;
  font-size: 15px; font-weight: 700; padding: 1px 0; width: 100%; }
.bl-dayplace { background: none; border: none; color: var(--bl-dim); font: inherit;
  font-size: 13px; padding: 1px 0; width: 100%; }
.bl-daydate { background: none; border: none; color: var(--bl-dim); font: inherit;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 0; width: 100%; opacity: .85; }
.bl-daydate:focus, .bl-dayplace:focus, .bl-daystay:focus { outline: none; }
.bl-day:focus-within { border-color: var(--bl-accent); }
.bl-inh { display: block; font-size: 11px; color: var(--bl-dim); margin-top: 2px; }
.bl-day--inh .bl-daystay, .bl-day--inh .bl-dayplace { color: var(--bl-dim); }
.bl-day--inh .bl-daybadge { background: var(--bl-surface); }
.bl-day--inh .bl-daybadge b { color: var(--bl-dim); }
/* Hint bij de dagen → wijst naar de Roadmap-tab in de preview */
.bl-roadhint { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--bl-accent); }
.bl-roadhint .arrow { display: inline-block; font-size: 15px; animation: bl-arrow 1.1s ease-in-out infinite; }
@keyframes bl-arrow { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(6px); opacity: 1; } }
/* Opvallende RODE pijl die naar de Planning-tab wijst (tijdens de controlestap) */
.lb-planarrow { display: none; }
body[data-autotab="roadmap"] .lb-planarrow {
  display: block; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 44px; z-index: 6; color: #ff3b30;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  animation: bl-planarrow 0.85s ease-in-out infinite; pointer-events: none; }
body[data-autotab="roadmap"] .lb-apptabs span[data-tabgo="roadmap"] { color: #ff3b30; }
@keyframes bl-planarrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); } }
@media (prefers-reduced-motion: reduce) {
  .bl-roadhint .arrow, body[data-autotab="roadmap"] .lb-planarrow { animation: none; } }

.bl-dayrm { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--bl-dim);
  font-size: 16px; width: 30px; height: 30px; border-radius: 8px; line-height: 1; }
.bl-dayrm:hover { color: var(--bl-red); background: var(--bl-red-soft); }
.bl-addday { margin-top: 10px; background: none; border: 1.5px dashed var(--bl-line-2);
  border-radius: 12px; padding: 11px; width: 100%; color: var(--bl-accent); font: inherit;
  font-size: 14.5px; font-weight: 800; cursor: pointer; }
.bl-addday:hover { border-color: var(--bl-accent); }


/* ── Uploadstap: rustige tweede (privacy)bubbel + modal ──── */
/* .lb-msg heeft display:flex → het [hidden]-attribuut moet dat overrulen */
.lb-msg[hidden] { display: none !important; }
/* privacybubbel: zelfde stijl als de eerste chatbubbel (erft van .lb-bubble) */
/* uploadstap compact houden: minder ruimte rond de twee bubbels → uploadzone hoger op mobiel */
#uploadFlow .lb-msg { margin: 10px 0 8px; }
#uploadFlow .lb-msg .lb-bubble { padding: 13px 15px; }
#uploadFlow #uploadForm { margin-top: 6px; }
@media (max-width: 767px) {
  #uploadFlow .lb-bubble { font-size: 14px; line-height: 1.5; }
  #uploadFlow #dropZone { padding: 20px 16px; }
}
.lb-privlink { display: block; margin-top: 9px; background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--bl-accent);
  text-decoration: underline; text-align: left; }
.bl-drop-meta { color: var(--bl-dim); font-size: 12.5px; margin-top: 4px; }
.lb-uploadalt { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--bl-dim); }
.lb-devbadge { display: inline-block; margin-bottom: 12px; background: rgba(248, 113, 113, .12);
  color: var(--bl-red); border: 1px solid rgba(248, 113, 113, .3); border-radius: 8px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
/* modal: gecentreerd op het scherm (dialog::backdrop + margin auto) */
.lb-modal { position: fixed; inset: 0; margin: auto; border: 1px solid var(--bl-line-2); padding: 0;
  background: var(--bl-surface); color: var(--bl-text); width: min(440px, 92vw); height: max-content;
  max-height: 86vh; border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.lb-modal::backdrop { background: rgba(10, 10, 14, .66); backdrop-filter: blur(3px); }
.lb-modalhead { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--bl-line); }
.lb-modalhead b { font-size: 16.5px; }
.lb-modalbody { padding: 16px 18px 18px; font-size: 14px; line-height: 1.55; color: var(--bl-text); }
.lb-modalbody ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lb-modalbody li { padding-left: 2px; }
/* Privacy-uitleg: kernboodschap in tekstkleur, toelichting één stap zachter — de hele
   lijst stond op --bl-dim en las daardoor als kleine lettertjes (feedback Carl 30/7). */
.lb-privlist { gap: 15px !important; }
.lb-privlist li { display: grid; gap: 3px; border-left: 2px solid var(--bl-accent);
  padding: 1px 0 1px 11px; color: var(--bl-dim2, #b9b9c4); }
.lb-privlist li b { color: var(--bl-text); font-size: 14.5px; }
.lb-modalfoot { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--bl-line); font-size: 13px; }
.lb-modalbody a { color: var(--bl-accent); font-weight: 700; }

/* ── "Wie is Alex?" (card-t23a95c) ────────────────────────────────────────────────────
   Zelfde venster als de privacy-uitleg, maar met zijn gezicht groot in beeld. Op mobiel
   bijna schermbreed, met genoeg buitenmarge zodat het geen volledig scherm wordt. */
.lb-whois { width: min(400px, calc(100vw - 32px)); }
.lb-whois .lb-modalbody { text-align: center; font-size: 14.5px; }
.lb-whoisface { width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  margin: 2px auto 14px; display: block; border: 2px solid var(--bl-line-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38); }
.lb-whois .lb-modalbody p { margin: 0 0 18px; line-height: 1.6; }
.lb-whois .lb-actionbar { margin: 0; }
.lb-whois .bl-btn { width: 100%; }
/* Subtiel openen: het venster komt een tikje omhoog en scherp in beeld. */
.lb-whois[open] { animation: lbWhoisIn .22s cubic-bezier(.2, .8, .3, 1); }
.lb-whois[open]::backdrop { animation: lbWhoisFade .22s ease; }
@keyframes lbWhoisIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes lbWhoisFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lb-whois[open], .lb-whois[open]::backdrop { animation: none; }
}

/* De avatar is een knop: zelfde vorm, maar aanwijsbaar en met een hint op desktop. */
.lb-ava--btn { border: 0; padding: 0; cursor: pointer; position: relative;
  -webkit-appearance: none; appearance: none; }
.lb-ava--btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
.lb-ava--btn::after { content: attr(data-hint); position: absolute; left: 50%; top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-3px); white-space: nowrap; pointer-events: none;
  background: var(--bl-surface); color: var(--bl-text); border: 1px solid var(--bl-line-2);
  border-radius: 8px; padding: 4px 9px; font-size: 12px; opacity: 0; transition: opacity .14s, transform .14s;
  z-index: 20; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
/* Alleen waar er écht een muis is: op een touchscreen blijft zo'n hint na het tikken hangen. */
@media (hover: hover) and (pointer: fine) {
  .lb-ava--btn:hover::after, .lb-ava--btn:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Chatbalk onderaan + antwoordbubbels van de gebruiker ── */
form.lb-chat { display: flex; flex-direction: column; min-height: calc(100dvh - 188px); }
@media (min-width: 1200px) { form.lb-chat { min-height: calc(100dvh - 88px); } }
.lb-dock { position: sticky; bottom: 0; z-index: 12; margin-top: auto;
  padding: 18px 0 30px; padding-bottom: calc(30px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bl-bg) 72%, transparent); }
.lb-dock[hidden] { display: none; }
.lb-dock .lb-inline[hidden] { display: none; }
.lb-user { display: flex; justify-content: flex-end; margin: 4px 0 14px; }
.lb-user .bubble { background: var(--bl-accent-soft); border: 1px solid rgba(163, 183, 99, .4);
  color: var(--bl-text); border-radius: 18px 4px 18px 18px; padding: 12px 17px;
  font-size: 15.5px; font-weight: 700; max-width: 75%; overflow-wrap: break-word; }
/* de hoofdactie hoort boven de (lege) dock te eindigen, niet eronder te plakken */
form.lb-chat .lb-qa-final { margin-bottom: 6px; }

/* ── Landenkeuze: geselecteerde landen als chips ─────────── */
.lb-landchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lb-landchips:empty { display: none; }
.lb-landchips .chip { display: inline-flex; align-items: center; gap: 7px;
  background: var(--bl-accent-soft); border: 1px solid rgba(163, 183, 99, .4); color: var(--bl-text);
  border-radius: 999px; padding: 7px 8px 7px 14px; font-size: 15px; font-weight: 700; }
.lb-landchips .chip button { background: rgba(255, 255, 255, .1); border: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; color: var(--bl-dim); font-size: 15px; line-height: 1;
  display: grid; place-items: center; }
.lb-landchips .chip button:hover { background: rgba(248, 113, 113, .25); color: var(--bl-red); }
.lb-landhint { color: var(--bl-dim); font-size: 13px; margin-top: 8px; }
.lb-landklaar { width: auto; margin-top: 12px; padding: 12px 20px; font-size: 15px; }
.lb-landklaar[hidden] { display: none; }

/* ── Landenkeuze: type-ahead dropdown (opent naar boven) ─── */
.lb-inline.lb-ac { position: relative; }
.lb-aclist { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 6px;
  background: var(--bl-surface); border: 1px solid var(--bl-line-2); border-radius: 15px;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .45); max-height: 300px; overflow-y: auto; z-index: 40; }
.lb-aclist li { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 10px; font-size: 15.5px; font-weight: 700; cursor: pointer; color: var(--bl-text); }
.lb-aclist li .vlag { font-size: 19px; }
.lb-aclist li:hover, .lb-aclist li.on { background: var(--bl-accent-soft); color: var(--bl-accent); }

.lb-apptabs span[data-tabgo] { cursor: pointer; }

/* ── Donkere scrollbar (pagina + sheets/overlay) ─────────── */
html { scrollbar-color: #2e2e38 #101014; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #101014; }
::-webkit-scrollbar-thumb { background: #2e2e38; border-radius: 999px; border: 3px solid #101014; }
::-webkit-scrollbar-thumb:hover { background: #3d3d4a; }
::-webkit-scrollbar-corner { background: #101014; }

/* ── Bovenbalk: logo identiek aan de homepage + accounticoon ─ */
.lb-brandlogo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.lb-brandlogo img { width: 40px; border-radius: 11px; }
.lb-wordmark { font-weight: 800; font-size: 23px; color: var(--bl-text); }
.lb-wordmark span { color: var(--bl-accent); }
.lb-beta { align-self: flex-start; margin: -2px 0 0 2px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; color: var(--bl-accent); border: 1px solid var(--bl-accent);
  border-radius: 6px; padding: 1px 5px; }
@media (max-width: 720px) {
  .lb-brandlogo { gap: 8px; }
  .lb-brandlogo img { width: 30px; border-radius: 8px; }
  .lb-wordmark { font-size: 16px; }
  .lb-beta { display: none; }
}
.lb-account { margin-left: auto; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--bl-line-2); border-radius: 999px; padding: 8px 16px 8px 10px;
  color: var(--bl-dim); font-size: 14px; font-weight: 700; text-decoration: none; }
.lb-account:hover { border-color: var(--bl-accent); color: var(--bl-text); }
.lb-account .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bl-surface-2); color: var(--bl-accent); }
@media (max-width: 560px) { .lb-account .nm { display: none; } .lb-account { padding: 8px 10px; } }
.lb-topbtns { margin-left: 0; }

/* ── Verzendknop: wit vliegtuigje (merk-icoon) ───────────── */
.lb-send { color: #fff !important; padding: 14px 20px; display: grid; place-items: center; }
.lb-send svg { display: block; }

/* ── Alex-avatar: foto (alex-avatar.png) met online-stip ─── */
.lb-ava { width: 42px; height: 42px; background: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.lb-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* ── Tekstbalans: links iets groter, chat iets rustiger ──── */
.lb-bubble { font-size: 16px; max-width: 600px; }
.bl-chips label { font-size: 15px; padding: 12px 18px; }
.bl-field input[type=text], .bl-field input[type=email], .bl-field input[type=password], .bl-field select,
.bl-field input[type=date], .bl-field textarea, .lb-inline input { font-size: 16px; padding: 14px 16px; }
.bl-btn { font-size: 16px; }
.lb-phase { font-size: 15.5px; padding: 10px 10px; }
.lb-phase .n { width: 27px; height: 27px; font-size: 12px; }
.lb-phase .t small { font-size: 13px; }
.lb-brandsub { font-size: 12px; margin-left: 0; }
.lb-status { font-size: 15px; }
.lb-saved { font-size: 12.5px; }
.lb-ctxcard h3 { font-size: 12px; }
.lb-ctxcard b { font-size: 15.5px; }
.lb-ctxcard p { font-size: 14px; }
.lb-privacy { font-size: 13.5px; }
.lb-privacy b { font-size: 14.5px; }
.lb-privacy p { font-size: 13.5px; }
.lb-privacy a { font-size: 13.5px; }

/* ── Chatvorm: één vraag per keer + typindicator ─────────── */
.lb-ava { position: relative; }
.lb-ava .on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
  border-radius: 50%; background: #4ade80; border: 2.5px solid var(--bl-bg); }
.lb-qa-in { margin: 4px 0 18px 56px; }
@media (max-width: 559px) { .lb-qa-in { margin-left: 0; } }
.lb-chat .lb-qa[hidden], .lb-chat .lb-qa-final[hidden] { display: none; }
.lb-chat .lb-qa.answered { opacity: .72; }
/* ⚠️ display:flex overrulet het [hidden]-attribuut (de UA-stijl is minder specifiek).
   Zonder deze regel bleef het typveld zichtbaar terwijl Alex nog aan haar vraag typte —
   precies wat Carl op 1/8/2026 zag. Dezelfde valkuil als bij .lb-msg hierboven. */
.lb-inline[hidden] { display: none !important; }
.lb-inline { display: flex; gap: 10px; }
.lb-inline input { flex: 1; min-width: 0; }
.lb-ok { width: auto; padding: 13px 22px; flex-shrink: 0; }
/* Postcode-rij: groot, prominent invoerveld + compacte "Zoek"-knop */
.lb-inline--postcode { align-items: stretch; }
.lb-inline--postcode input { font-size: 22px; font-weight: 800; letter-spacing: .5px;
  padding: 18px 20px; border-radius: 16px; }
.lb-inline--postcode .lb-ok { align-self: stretch; padding: 0 20px; font-size: 15px; }
.lb-typing { display: inline-flex; gap: 6px; align-items: center; padding: 19px 20px; }
.lb-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-dim);
  animation: lbTyping 1.1s ease-in-out infinite; }
.lb-typing i:nth-child(2) { animation-delay: .18s; }
.lb-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes lbTyping { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -5px; opacity: 1; } }

/* ── Grotere, rustigere typografie ───────────────────────── */
.lb-bubble { font-size: 16px; line-height: 1.65; padding: 16px 19px; max-width: 600px;
  color: var(--bl-text); font-weight: 700; }
.lb-done { font-size: 14.5px; }
.lb-done b { font-size: 15px; }
.bl-field label { font-size: 15.5px; }
.bl-field input[type=text], .bl-field input[type=email], .bl-field input[type=password], .bl-field select,
.bl-field input[type=date], .bl-field textarea, .lb-inline input {
  font-size: 16px; padding: 14px 16px; border-radius: 14px;
  background: var(--bl-bg); border: 1.5px solid var(--bl-line-2); color: var(--bl-text);
  width: 100%; font-family: inherit; }
.bl-chips label { font-size: 15px; padding: 12px 18px; }
.bl-btn { font-size: 16px; padding: 16px 24px; }
.bl-btn--mini { font-size: 14px; padding: 10px 16px; }
.lb-ok { font-size: 16px; }
.bl-card h1, .lb-convo h1 { font-size: 26px; }
.bl-card p.intro { font-size: 16px; }
.bl-error, .bl-ok { font-size: 15px; }
.lb-privacycard { font-size: 14px; }
.lb-privacycard b { font-size: 15px; }
.bl-day b { font-size: 15px; }
.bl-day small { font-size: 11.5px; }
.hint, .bl-card .hint { font-size: 14px; }
.lb-phase { font-size: 15.5px; padding: 10px; }
.lb-phase .n { width: 27px; height: 27px; font-size: 12px; }
.lb-phase .t small { font-size: 13px; }
.lb-ctxcard b { font-size: 15.5px; }
.lb-ctxcard p { font-size: 14px; }
.lb-privacy { font-size: 13.5px; }
.lb-privacy b { font-size: 14.5px; }
.lb-status { font-size: 15px; }

/* ── Previewtelefoon op ware grootte, donker, met leeg scherm ─ */
.lb-right .lb-phone { width: 400px; max-width: 100%; }
.lb-phone { border-radius: 44px; padding: 12px; }
.lb-screen { border-radius: 33px; background: #0b0b0f; display: flex; flex-direction: column;
  height: auto; }
.lb-right .lb-screen { height: min(750px, calc(100dvh - 180px)); }
.lb-overlaybody .lb-screen { height: min(760px, calc(100dvh - 140px)); }
.lb-screen-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lb-screen.is-empty .lb-screen-content { display: none; }
.lb-screen-empty { display: none; }
.lb-screen.is-empty .lb-screen-empty { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 30px 26px; }
.lb-screen-empty span { font-size: 40px; }
.lb-screen-empty .lb-empty-plane { color: #fff; }
.lb-screen-empty .lb-empty-plane svg { display: block; }
.lb-screen-empty b { font-size: 17px; }
.lb-screen-empty p { color: var(--bl-dim); font-size: 14px; line-height: 1.6; max-width: 240px; }

/* donkere app-kop (geen groene balk) */
.lb-apphead { background: #15151c; color: var(--bl-text); border-bottom: 1px solid var(--bl-line);
  padding: 30px 18px 15px; }
.lb-apphead small { color: var(--bl-accent); font-size: 10px; }
.lb-apphead .t { font-size: 20px; }
.lb-apphead .chips { margin-top: 11px; }
.lb-apphead .chips span { background: var(--bl-surface-2); border: 1px solid var(--bl-line-2);
  color: var(--bl-dim); font-size: 11px; padding: 4px 11px; }
.lb-apphead .chips em { font-style: normal; }
.lb-appbody { flex: 1; min-height: 0; overflow: hidden; padding: 14px; gap: 10px; }
.lb-appcard { padding: 13px 15px; border-radius: 15px; }
.lb-appcard .lbl { font-size: 10px; }
.lb-appcard .row { font-size: 14px; margin-top: 5px; }
.lb-appcard .row .em { font-size: 17px; }
.lb-appcard .sub { font-size: 12.5px; margin-top: 3px; }
.lb-apptabs { font-size: 9.5px; padding: 9px 4px 14px; }
.lb-apptabs b { font-size: 17px; }

/* ── Demo-QR: zichtbaar niet-werkend ────────────────────────────────────────
   Zolang de reis nog niet gepubliceerd is tonen we hoe de installatiecode eruit gaat
   zien, met een diagonale DEMO-band erover — scannen levert bewust niets op. */
/* ⚠️ Geen display-wijziging: .bl-qr--big is een gecentreerde flexkolom, en met
   display:inline-block kromp het blok en schoof de code naar links. Alleen relatief
   positioneren zodat het watermerk erover kan liggen. */
.cp-qrdemo { position: relative; }
.cp-qrdemo .bl-qrwrap { opacity: .9; }   /* verder identiek aan de echte code */
/* Discreet watermerk: alleen letters, geen balk — de code blijft herkenbaar als
   voorbeeld zonder dat het scherm er goedkoop uitziet (feedback Carl 30/7/2026). */
.cp-qrdemo-band { position: absolute; top: 50%; left: 50%; z-index: 3;
  /* Horizontaal en net bóven het logo in het midden van de code (feedback Carl 30/7). */
  transform: translate(-50%, calc(-50% - 34px));
  color: #000; opacity: .82;
  font-size: 20px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none; user-select: none; }
.cp-linkrow--demo input { opacity: .5; }
.cp-iconbtn--off, .cp-linkrow--demo .cp-iconbtn[disabled] { opacity: .35; cursor: default; pointer-events: none; }

/* ── "Reis vervolledigen": subtiel markeren wat nog ontbreekt ──────────────── */
.bl-field--todo input, .bl-field--todo textarea, .bl-field--todo select {
  border-color: rgba(248, 113, 113, .55) !important;
  background: rgba(248, 113, 113, .045);
}
/* ⚠️ panel.php heeft een INLINE <style> met `.content .bl-field label { color: var(--dim) }`.
   Dat is even specifiek als `.content .bl-field--todo label` (beide 2 klassen + 1 element) en
   staat later in het document, dus het won. Twee klassen op hetzelfde element geeft de
   doorslag. */
.bl-field--todo label,
.content .bl-field.bl-field--todo label { color: var(--bl-red, #f87171); }
.cp-btn-inline { width: auto; padding: 11px 22px; font-size: 15px; }
.cp-midden { display: flex; justify-content: center; margin-top: 16px; }

/* Bureau-banner in de previewtelefoon (card-9zvetg4): zelfde plek en toon als #brandbar in
   de echte app — vlak boven de tabbalk, subtiel, met plaats voor het logo. */
.lb-brandbar { flex-shrink: 0; background: var(--bl-surface); border-top: 1px solid var(--bl-line);
  text-align: center; font-size: 11px; color: var(--bl-dim); }
.lb-brandbar span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px; }
.lb-brandbar strong { color: var(--bl-text); font-weight: 600; }
.lb-brandbar img { height: 14px; width: auto; border-radius: 3px; }

/* ── Zichtbare toetsenbordfocus op tekstvelden (WCAG 2.4.7 Focus Visible) ──────
   ⚠️ DIT BLOK HOORT ACHTERAAN TE BLIJVEN STAAN, en gebruikt bewust een dubbele klasse.
   Wat er misging (gemeten 3/8/2026): r69 haalt de browserring weg (`outline: none`) en zet
   er een accentrand voor in de plaats. Het blok "Grotere, rustigere typografie" hierboven
   kopieerde later de `border`-shorthand mee op DEZELFDE selector met DEZELFDE specificiteit
   (0,2,1) én staat verderop in het bestand — dus dat won, ook tijdens focus. Netto: wie met
   Tab door een formulier liep zag in het bureaupaneel, het klant-CP en de builder letterlijk
   niets veranderen; je typte in het blinde.
   De dubbele klasse maakt er (0,3,1) van, zodat een volgend typografieblok dit niet meer
   ongemerkt kan inhalen. De OUTLINE is het echte signaal: een rand van 1,5px is op een
   donkere achtergrond te zwak, terwijl een outline lós van de rand ligt en altijd zichtbaar
   is. `:focus-visible` en niet `:focus`, zodat een muisklik geen ring geeft. */
.bl-field.bl-field input:focus-visible,
.bl-field.bl-field select:focus-visible,
.bl-field.bl-field textarea:focus-visible,
.lb-inline.lb-inline input:focus-visible,
.lb-gddates.lb-gddates input:focus-visible,
.lb-seintje.lb-seintje input:focus-visible {
  outline: 2px solid var(--bl-accent); outline-offset: 2px; border-color: var(--bl-accent);
}
/* Dagenlijst: die drie velden per dag hebben géén eigen rand, en `.bl-day:focus-within`
   kleurt enkel de rand van de hele rij — je zag dus wel dát je in de rij stond, niet in
   wélk veld. Een outline op het veld zelf lost dat op zonder de layout te verschuiven. */
.bl-daydate:focus-visible, .bl-dayplace:focus-visible, .bl-daystay:focus-visible {
  outline: 2px solid var(--bl-accent); outline-offset: 1px; border-radius: 6px;
}

/* ── Hervat-gesprek: samengevouwen antwoorden (card-k82anku, 5/8/2026) ──────────────────
   Eén regel per vraag die je al beantwoordde: de vraag, jouw antwoord, en een klik om hem
   weer open te zetten. Bewust rustig — dit is geschiedenis, geen actie. */
.lb-hervat {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--bl-line, #26262e);
  padding: 9px 2px; margin: 0; font: inherit; font-size: 13.5px; cursor: pointer;
  color: var(--bl-dim, #9096a1);
}
.lb-hervat:hover { color: var(--bl-text, #e8e8e8); }
.lb-hervat .v { flex: 0 0 auto; }
.lb-hervat .a { color: var(--bl-text, #e8e8e8); font-weight: 600; flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-hervat .w { flex: 0 0 auto; color: var(--bl-accent, #a3b763); font-size: 12.5px; }