/* DyReP Experience — /demo/ (designcontract v9). Alleen binnen .dx; de rest van de site houdt zijn eigen kleuren
   (Rob, 30 sept, besluit 3). Oranje = signaal en vertrouwen, nooit vragerkleur; vragerkleur nooit signaal. */
.dx{
  --oranje-op-donker:#ff7a1a;--oranje-kop-licht:#e05a00;--oranje-tekst-licht:#9e3f00;--oranje-vlak:#fff1e6;
  --gebruikt:#2f6f4e;--gebruikt-vlak:#e4f1ea;--neutraal-rand:#8e979b;--neutraal-vlak:#fbfaf6;--neutraal-chip:#e7e9ea;
  --v:#00a4df;--v-tekst:#006f98;--v-vlak:#e6f5fb;--v-op:#08202b;
  font-family:var(--font-sans);color:var(--ink-text);background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden
}
.dx .is-opvolger,.dx-vrager.is-opvolger{--v:#00a4df;--v-tekst:#006f98;--v-vlak:#e6f5fb;--v-op:#08202b}
.dx .is-management,.dx-vrager.is-management{--v:#151719;--v-tekst:#151719;--v-vlak:#f2f0ea;--v-op:#ffffff}
.dx .is-reviewer,.dx-vrager.is-reviewer{--v:#006f98;--v-tekst:#006f98;--v-vlak:#eef6f9;--v-op:#ffffff}
.dx .is-agent,.dx-vrager.is-agent{--v:#08202b;--v-tekst:#65d5f6;--v-vlak:#e3eef2;--v-op:#65d5f6}

.dx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dx-icoon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dx-getal{font-family:var(--font-serif);font-size:1.9rem;line-height:1;font-weight:400}
.dx-label,.dx-kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.dx-klein{font-size:.8rem;color:var(--muted)}
.dx button{font:inherit;cursor:pointer;min-height:44px}
.dx button:focus-visible,.dx a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

.dx-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--white)}
.dx-badge{white-space:nowrap;font-family:var(--font-mono);font-size:.74rem;background:var(--neutraal-chip);color:var(--ink-text);border-radius:999px;padding:6px 12px}
.dx-schakel{display:none;gap:6px}
.dx-schakel button{border:1px solid var(--line-strong);background:var(--white);border-radius:999px;padding:0 14px}
.dx-schakel button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.dx-raster{display:grid;grid-template-columns:260px 440px minmax(0,1fr);min-height:640px}
.dx-routes{display:grid;align-content:start;gap:8px;padding:18px;border-right:1px solid var(--line);background:var(--white)}
.dx-route{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:12px;color:var(--ink-text)}
.dx-route span{display:grid;gap:2px}.dx-route small{color:var(--muted);font-size:.82rem}
.dx-route.is-ok .dx-icoon{color:var(--gebruikt)}
.dx-route.is-signal .dx-icoon{color:var(--oranje-kop-licht)}
.dx-route[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}

.dx-gesprek{display:flex;flex-direction:column;gap:14px;padding:18px;border-right:1px solid var(--line)}
.dx-casus{list-style:none;margin:0;padding:12px;display:flex;justify-content:space-between;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:10px}
.dx-casus li{display:grid;justify-items:center;gap:4px;text-align:center;font-size:.8rem;color:var(--muted)}
.dx-casus .dx-icoon{width:28px;height:28px;color:var(--ink-text)}
.dx-bubbel{margin:0;padding:12px 14px;border-radius:12px;max-width:92%;line-height:1.45}
.dx-bubbel.is-vraag{align-self:flex-end;background:var(--ink);color:#fff}
.dx-bubbel.is-antwoord{align-self:flex-start;background:var(--white);border:1px solid var(--line)}
.dx-trace button{background:none;border:0;padding:0;color:var(--cyan-text);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.dx-trace ol{margin:8px 0 4px;padding-left:1.2em;display:grid;gap:4px}
.dx-invoer{margin-top:auto}.dx-invoer input{width:100%;min-height:44px;border:1px dashed var(--line-strong);border-radius:10px;padding:0 12px;background:var(--neutraal-vlak);color:var(--muted)}

.dx-resultaat{padding:18px;min-width:0}
.dx-uitkomst{display:grid;gap:14px}
.dx-vragers{display:flex;flex-wrap:wrap;gap:8px}
.dx-vrager{border:2px solid var(--v);background:var(--white);color:var(--v-tekst);border-radius:999px;padding:0 16px;font-weight:600}
.dx-vrager.is-agent{color:#08202b}
.dx-vrager[aria-pressed="true"]{background:var(--v);color:var(--v-op)}
.dx-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.dx-tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:0 12px;color:var(--muted)}
.dx-tabs button[aria-selected="true"]{color:var(--ink-text);border-bottom-color:var(--v)}
.dx-paneel{display:grid;gap:12px;padding:18px;border-radius:12px;background:var(--v-vlak);border-top:4px solid var(--v)}
.dx-paneel h2,.dx-grens h2{margin:0;font-family:var(--font-serif);font-weight:400;font-size:1.7rem;line-height:1.15}
.dx-paneel.is-donker{background:var(--v-op, #08202b);background:#08202b;color:#eaf6fb}
.dx-paneel.is-donker .dx-kicker{color:#65d5f6}
.dx-stappen{margin:0;padding-left:1.3em;display:grid;gap:8px}
.dx-cijfers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dx-cijfers li{display:grid;gap:4px;background:var(--white);border-radius:10px;padding:12px;font-size:.85rem}
.dx-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dx-check li{display:flex;gap:10px;align-items:flex-start;background:var(--white);border-radius:10px;padding:10px 12px}
.dx-check li span{display:grid;gap:2px}.dx-check small{color:var(--muted)}
.dx-check li.is-ok .dx-icoon{color:var(--gebruikt)}.dx-check li.is-excluded{background:var(--neutraal-vlak);color:var(--muted)}
.dx-velden{margin:0;display:grid;gap:6px;font-family:var(--font-mono);font-size:.85rem}
.dx-velden div{display:grid;grid-template-columns:9em 1fr;gap:8px}.dx-velden dt{color:#8fb9c9}.dx-velden dd{margin:0}

/* Signaal: oranje, alleen waar een mens of grens aan zet is. Tekst op licht altijd #9e3f00 (contrast). */
.dx-signaal{color:var(--oranje-tekst-licht)}
.dx-status.dx-signaal,.dx-besluit.dx-signaal{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:var(--oranje-vlak);border:1px solid var(--oranje-kop-licht);border-radius:999px;padding:6px 12px;margin:0;font-size:.85rem}
.dx-besluit.dx-signaal{border-radius:10px;display:block}
.dx-paneel.is-donker .dx-signaal{color:var(--oranje-op-donker)}
.dx-paneel.is-donker .dx-status.dx-signaal{background:transparent;border-color:var(--oranje-op-donker)}

.dx-strook{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--white);transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.dx-strook ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dx-strook li{display:grid;gap:4px;font-size:.8rem;color:var(--muted)}
.dx-strook .dx-getal{font-size:1.4rem;color:var(--ink-text)}.dx-strook .dx-icoon{color:var(--ink-text)}
.dx-flash{margin:6px 0 0;min-height:1.2em;font-size:.8rem;font-weight:600;color:var(--oranje-tekst-licht)}
.dx-strook.is-flash{border-color:var(--oranje-kop-licht);box-shadow:0 0 0 3px rgba(255,122,26,.25)}
.dx-strook.is-stil{box-shadow:none}
@media (prefers-reduced-motion:reduce){.dx-strook{transition:none}.dx-strook.is-flash{box-shadow:none}}

.dx-waarom{display:grid;gap:12px}
.dx-selectie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dx-selectie li{display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--white);font-size:.85rem}
.dx-selectie small{font-family:var(--font-mono);font-size:.72rem}
.dx-selectie li.is-gekozen{border-color:var(--gebruikt);background:var(--gebruikt-vlak)}.dx-selectie li.is-gekozen small{color:var(--gebruikt)}
.dx-selectie li.is-bewust-niet{border-style:dashed;color:var(--muted)}
.dx-selectie li.is-extern{border-color:var(--neutraal-rand);background:var(--neutraal-vlak);color:var(--muted)}
.dx-paspoort{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.dx-paspoort div{display:grid;grid-template-columns:9em 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.dx-paspoort dt{color:var(--muted)}.dx-paspoort dd{margin:0}
.dx-uitklap{justify-self:start;background:none;border:0;padding:0;color:var(--cyan-text);font-weight:600;text-decoration:underline;text-underline-offset:4px}

.dx-grens{display:grid;gap:14px}
.dx-tijdlijn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-top:3px solid var(--line)}
.dx-tijdlijn li{display:grid;gap:2px;padding-top:10px;font-size:.82rem;color:var(--muted)}
.dx-tijdlijn li b{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-text)}
.dx-tijdlijn li.is-ok{border-top:3px solid var(--gebruikt);margin-top:-3px}
.dx-tijdlijn li.is-signal{border-top:3px solid var(--oranje-kop-licht);margin-top:-3px}
.dx-tijdlijn li.is-signal b{color:var(--oranje-tekst-licht)}
.dx-blokken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.dx-blokken li{display:grid;gap:4px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--white);font-size:.9rem}
.dx-blokken li.is-ok{border-color:var(--gebruikt);background:var(--gebruikt-vlak)}
.dx-blokken li.is-signal{border-color:var(--oranje-kop-licht);background:var(--oranje-vlak)}
.dx-blokken li.is-dashed{border-style:dashed;background:var(--white)}
.dx-slot{margin:0;font-family:var(--font-serif);font-size:1.15rem}
.dx-cta{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:var(--ink);color:#fff;font-weight:600;text-decoration:none}

.dx-voet{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 18px;border-top:1px solid var(--line);background:var(--white);font-size:.85rem;color:var(--muted)}
.dx-voet p{margin:0}.dx-voet .dx-vraag{color:var(--ink-text);font-weight:600;margin-left:auto}

@media (max-width:1100px){.dx-raster{grid-template-columns:220px minmax(0,1fr) minmax(0,1.2fr)}}
@media (max-width:900px){
  .dx-schakel{display:flex}
  .dx-raster{grid-template-columns:1fr;min-height:0}
  .dx-routes{border-right:0;border-bottom:1px solid var(--line);grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto}
  .dx-raster.toon-werkruimte .dx-resultaat,.dx-raster.toon-resultaat .dx-gesprek{display:none}
  .dx-gesprek{border-right:0}
  .dx-cijfers,.dx-selectie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-strook ul,.dx-tijdlijn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-velden div,.dx-paspoort div{grid-template-columns:7em 1fr}
  .dx-voet .dx-vraag{margin-left:0}
}

/* HomepageDemoPreview: compacte kaart op de homepage (designcontract v9). */
.dx-preview .dx-kaart{display:grid;gap:14px;padding:20px;max-width:760px;background:var(--white)}
.dx-kaart .dx-bubbel.is-vraag{justify-self:end}
.dx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dx-chips .dx-vrager{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.dx-kaart .dx-paspoort div.dx-signaal dd{color:var(--oranje-tekst-licht);font-weight:600}
.dx-preview-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

/* Slag 3 · Bronnen en Als de bron verandert. Extern en simulatie zijn neutraal gelabeld; oranje blijft signaal. */
.dx-bron,.dx-dynamiek{display:grid;gap:16px}
.dx-bronnen,.dx-niet-geraakt{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dx-bronnen li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:12px}
.dx-bronnen li.is-goedgekeurd,.dx-bronnen li.is-gevalideerd{color:var(--gebruikt)}
.dx-bronnen li.is-opgevolgd{color:var(--muted)}
.dx-bronnen span,.dx-niet-geraakt li{display:grid;gap:2px;color:var(--ink-text)}
.dx-bronnen small,.dx-niet-geraakt span{color:var(--muted)}
.dx-extern{border:1px dashed var(--neutraal-rand);background:var(--neutraal-vlak);border-radius:10px;padding:14px;display:grid;gap:8px}
.dx-extern p{margin:0}
.dx-extern-label,.dx-simulatie{justify-self:start;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:var(--neutraal-chip);color:var(--ink-text);border-radius:999px;padding:4px 10px;margin:0}
.dx-extern-acties{display:flex;flex-wrap:wrap;gap:8px}
.dx-extern-acties button{border:1px solid var(--line-strong);background:var(--white);border-radius:999px;padding:0 16px;color:var(--ink-text)}
.dx-extern-acties button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.dx-extern-stand{display:flex;align-items:center;gap:10px;font-size:.9rem}
.dx-naast{display:grid;gap:6px;border:1px dashed var(--neutraal-rand);background:var(--neutraal-vlak);color:var(--ink-text);border-radius:10px;padding:12px;font-size:.9rem}
.dx-paneel.is-donker .dx-naast{background:transparent;color:#fff}
.dx-wijziging{margin:0;display:flex;align-items:baseline;gap:8px}
.dx-dynamiek .dx-chips li{display:inline-flex;align-items:center;min-height:36px;background:var(--v-vlak)}
.dx-niet-geraakt li{border:1px dashed var(--neutraal-rand);border-radius:10px;padding:10px 12px;background:var(--neutraal-vlak)}