/* KobiVoice - documentatielaag.
 *
 * Alles wat een documentatiepagina nodig heeft en een marketingpagina niet:
 * kruimels, zijmenu, inhoudsopgave, genummerde stappen, tabellen, codeblokken,
 * aandachtsblokken, vraag-en-antwoord, changelog en een vorige/volgende.
 *
 * TWEE REGELS
 *
 * 1. Geen leveranciersnaam. Geen enkele regel hieronder weet van welke
 *    koppeling de pagina is. Dezelfde onderdelen dragen /help/hubspot,
 *    /integrations/pipedrive en straks /developers/api en /guides/<slug>.
 *
 * 2. Namen beschrijven het onderdeel, niet de pagina waarop het toevallig
 *    voor het eerst stond: doc-step, doc-faq, doc-table, doc-code, doc-figure,
 *    doc-callout, doc-nav, doc-toc, doc-breadcrumb.
 *
 * Bouwt voort op kv-base.css (tokens, wrap, knoppen, nav, footer).
 */

/* ── Kruimelpad ──────────────────────────────────────────────────────────── */
.doc-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;
  color:var(--faint);padding:22px 0 0}
.doc-breadcrumb a:hover{color:var(--petrol)}
.doc-breadcrumb-sep{opacity:.5}
.doc-breadcrumb [aria-current]{color:var(--text);font-weight:600}

/* ── Raamwerk: zijmenu + inhoud + inhoudsopgave ──────────────────────────── */
/* Documentatie is geen artikel. Een API-tabel, een codeblok en een
   schermafbeelding van de werkplek hebben breedte nodig; in de 1180px van de
   marketingpagina's blijft daar 586px inhoud van over en dat is te weinig.
   Deze laag zet daarom zijn eigen breedte, zonder de 28 bestaande pagina's
   aan te raken - die gebruiken .wrap en niet .doc-wrap. */
.doc-wrap{--doc-zij:264px;--doc-toc:236px;--doc-gat:56px;
  max-width:1720px;padding-inline:36px;padding-bottom:10px}
.doc-shell{display:grid;
  grid-template-columns:var(--doc-zij) minmax(0,1fr) var(--doc-toc);
  gap:var(--doc-gat);align-items:start;padding:30px 0 90px}

.doc-nav{position:sticky;top:96px}
.doc-nav-kop{font-family:var(--fb);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin:0 0 12px}
.doc-nav-kop + .doc-nav-groep{margin-bottom:26px}
.doc-nav a{display:block;font-size:14.5px;color:var(--soft);padding:7px 12px;border-radius:9px;
  transition:background .15s,color .15s}
.doc-nav a:hover{background:rgba(15,95,91,.06);color:var(--petrol)}
.doc-nav a[aria-current="page"]{background:rgba(15,95,91,.09);color:var(--petrol);font-weight:600}
/* Nog geen pagina. Ziet er bewust niet uit als een link, en zegt waarom. */
.doc-nav-straks{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:14.5px;color:var(--faint);padding:7px 12px;cursor:default}
.doc-nav-straks em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);opacity:.75;white-space:nowrap}

.doc-toc{position:sticky;top:96px;font-size:13.5px}
.doc-toc-kop{font-family:var(--fb);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin:0 0 12px}
.doc-toc a{display:block;color:var(--soft);padding:5px 0 5px 13px;border-left:2px solid var(--line);
  line-height:1.45}
.doc-toc a:hover{color:var(--petrol);border-color:var(--petrol-l)}
.doc-toc a.aan{color:var(--petrol);border-color:var(--petrol);font-weight:600}

@media(max-width:1320px){
  .doc-wrap{--doc-zij:240px;--doc-toc:210px;--doc-gat:44px}
}
@media(max-width:1100px){
  .doc-shell{grid-template-columns:var(--doc-zij) minmax(0,1fr);gap:40px}
  .doc-toc{display:none}
}
@media(max-width:860px){
  .doc-shell{grid-template-columns:minmax(0,1fr);gap:0;padding-top:18px}
  .doc-nav{position:static;border-bottom:1px solid var(--line);padding-bottom:20px;
    margin-bottom:28px}
  .doc-nav-groep{display:flex;flex-wrap:wrap;gap:6px}
  .doc-nav a{padding:7px 13px;background:var(--paper2)}
  .doc-nav-straks{padding:7px 13px;background:var(--paper2);border-radius:9px}
}

/* ── Kop van de pagina ───────────────────────────────────────────────────── */
.doc-hero h1{font-size:clamp(30px,3.9vw,44px);font-weight:750;margin-top:16px;
  letter-spacing:-.02em;text-wrap:balance}
.doc-kop-breed{padding:8px 0 4px;max-width:64ch}
.doc-kop-breed h1{font-size:clamp(30px,4.2vw,46px);font-weight:750;letter-spacing:-.02em;
  margin-top:14px;text-wrap:balance}
.doc-lead{margin-top:18px;font-size:18.5px;line-height:1.66;color:var(--soft);max-width:68ch}
.doc-hero-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.doc-hero-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ── Blokken ─────────────────────────────────────────────────────────────── */
.doc-blok{margin-top:46px;scroll-margin-top:96px}
.doc-blok > h2{font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.015em;
  text-wrap:balance}
.doc-subkop{font-size:16px;font-weight:700;margin-top:26px;color:var(--text)}
.doc-blok p{margin-top:14px;font-size:16px;line-height:1.72;color:var(--soft);max-width:74ch}
.doc-blok p strong{color:var(--text);font-weight:650}
/* Alleen links IN lopende tekst onderstrepen. Niet "elke link in een blok" -
   een tegel is zelf een link, en dan wordt de hele kaart onderstreept. */
.doc-blok p a,.doc-blok li a,.doc-faq-a a,.doc-figure figcaption a{color:var(--petrol);
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.doc-tegel p a,.doc-tegel-meer a{text-decoration:none}
.doc-lijst{margin:14px 0 0;padding-left:20px;color:var(--soft);line-height:1.72;max-width:74ch;
  font-size:16px}
.doc-lijst li{margin-top:7px}
.doc-lijst li::marker{color:var(--petrol-l)}

/* ── Stappen ─────────────────────────────────────────────────────────────── */
.doc-step{list-style:none;counter-reset:s;margin:22px 0 0;padding:0;max-width:74ch}
.doc-step li{counter-increment:s;position:relative;padding:0 0 26px 52px}
.doc-step li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--petrol);color:#fff;font-family:var(--fh);font-weight:700;
  font-size:15px;display:grid;place-items:center}
.doc-step li::after{content:"";position:absolute;left:15.5px;top:34px;bottom:6px;width:1px;
  background:var(--line2)}
.doc-step li:last-child{padding-bottom:0}
.doc-step li:last-child::after{display:none}
.doc-step h3{color:var(--text);font-size:16.5px;font-weight:650;font-family:var(--fh);
  letter-spacing:-.01em}
.doc-step p{margin-top:6px}

/* ── Aandachtsblokken ────────────────────────────────────────────────────── */
.doc-callout{margin-top:22px;border-radius:14px;padding:18px 20px;border:1px solid;
  display:flex;gap:14px;align-items:flex-start;max-width:74ch}
.doc-callout-ic{display:block;flex:none;margin-top:2px}
.doc-callout svg{width:19px;height:19px;display:block}
.doc-callout p{margin:0;font-size:15px;line-height:1.65}
.doc-callout-info{background:rgba(15,95,91,.05);border-color:rgba(15,95,91,.16)}
.doc-callout-info svg{color:var(--petrol)}
.doc-callout-letop{background:rgba(232,163,60,.08);border-color:rgba(232,163,60,.24)}
.doc-callout-letop svg{color:#B8801E}
.doc-callout-stop{background:rgba(240,131,110,.09);border-color:rgba(240,131,110,.26)}
.doc-callout-stop svg{color:#B84A31}

/* ── Afbeeldingen ────────────────────────────────────────────────────────── */
.doc-figure{margin-top:26px;max-width:var(--eigen,none)}
.doc-figure img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);
  background:var(--paper2);box-shadow:0 18px 44px -30px rgba(8,32,29,.5)}
.doc-figure figcaption{margin-top:11px;font-size:13.5px;color:var(--faint);line-height:1.6;
  max-width:60ch}
/* Twee grenzen: de vorm en de eigen pixels. De kleinste wint, zodat een
   telefoonbeeld niet uitklapt en niets wordt opgeblazen. */
.doc-figure.smal{max-width:min(460px,var(--eigen,460px))}
/* Breed loopt over de inhoudsopgave heen. Die is leesondersteuning; een
   schermafbeelding die je moet kunnen lezen weegt zwaarder. Alleen boven
   1120px, want daaronder is er niets om overheen te lopen. */
@media(min-width:1320px){
  .doc-figure.breed{width:calc(100% + var(--doc-toc) + var(--doc-gat))}
}
@media(min-width:1700px){
  .doc-figure.breed{width:calc(100% + var(--doc-toc) + var(--doc-gat) + 36px)}
}
/* Tabellen en codeblokken vullen de kolom - nooit ingeklemd in leesbreedte. */
.doc-table-wrap,.doc-code{max-width:none}

/* ── Tabellen ────────────────────────────────────────────────────────────── */
.doc-table-wrap{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;
  background:#fff;-webkit-overflow-scrolling:touch}
.doc-table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.doc-table thead th{text-align:left;font-family:var(--fb);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);font-weight:700;padding:14px 18px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.doc-table tbody th{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);
  color:var(--text);font-weight:600;white-space:nowrap;vertical-align:top}
.doc-table td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--soft);
  line-height:1.6;vertical-align:top}
.doc-table tbody tr:last-child th,.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table .ja{color:var(--signal);font-weight:650}
.doc-table .nee{color:var(--faint)}
.doc-table abbr{text-decoration:none;border-bottom:1px dotted var(--line2);cursor:help}

.doc-table-status{min-width:900px}
.doc-table-status td{text-align:center}
.doc-table-status thead th:not(:first-child):not(:nth-child(2)){text-align:center;padding:14px 8px}
.doc-table-status tbody td{padding:12px 8px}
.doc-table-status tbody td:first-of-type{text-align:left;padding-left:18px}
.doc-lijst-breed{max-width:78ch;columns:2;column-gap:44px}
.doc-lijst-breed li{break-inside:avoid}
@media(max-width:760px){.doc-lijst-breed{columns:1}}
.doc-schakel{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%}
.doc-schakel svg{width:11px;height:11px}
.doc-table-status .ja .doc-schakel{background:rgba(55,192,143,.16);color:#15694C}
.doc-table-status .nee .doc-schakel{background:var(--paper2);color:#B4C2BF}
.doc-status-tel{display:block;font-family:var(--fb);font-size:11.5px;font-weight:600;
  color:var(--faint);margin-top:3px;font-variant-numeric:tabular-nums}

/* ── Code (draagt straks de API-documentatie) ────────────────────────────── */
.doc-code{margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--ink)}
.doc-code-kop{font-family:var(--fb);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:#8FAFA9;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
.doc-code pre{margin:0;padding:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  line-height:1.65;color:#DCEAE6;white-space:pre}

/* ── Vraag en antwoord ───────────────────────────────────────────────────── */
.doc-faq{margin-top:22px;max-width:80ch;border-top:1px solid var(--line)}
.doc-faq details{border-bottom:1px solid var(--line)}
.doc-faq summary{cursor:pointer;list-style:none;padding:17px 40px 17px 0;position:relative;
  font-size:16.5px;font-weight:650;color:var(--text);font-family:var(--fh);letter-spacing:-.01em}
.doc-faq summary::-webkit-details-marker{display:none}
.doc-faq summary::after{content:"";position:absolute;right:8px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.doc-faq details[open] summary::after{transform:rotate(-135deg)}
.doc-faq summary:hover{color:var(--petrol)}
.doc-faq-a{padding:0 0 20px;font-size:15.5px;line-height:1.72;color:var(--soft);max-width:74ch}
.doc-faq-a p + p{margin-top:12px}

/* ── Changelog ───────────────────────────────────────────────────────────── */
.doc-changelog{list-style:none;margin:22px 0 0;padding:0;max-width:80ch}
.doc-changelog li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;
  padding:18px 0;border-top:1px solid var(--line)}
.doc-changelog time{font-family:var(--fb);font-size:13px;color:var(--faint);
  font-variant-numeric:tabular-nums;padding-top:2px}
.doc-changelog h3{font-size:16px;font-weight:680}
.doc-changelog p{margin-top:6px;font-size:15px}
@media(max-width:620px){.doc-changelog li{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ── Statuslabel ─────────────────────────────────────────────────────────── */
.doc-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:100px;white-space:nowrap}
.doc-status i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.doc-status-beschikbaar{background:rgba(55,192,143,.14);color:#186A4E}
.doc-status-aanbouw{background:rgba(232,163,60,.16);color:#8F6214}
.doc-status-gepland{background:var(--paper2);color:#6C7B78}

/* ── Merkvierkant ────────────────────────────────────────────────────────── */
.doc-merk{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--merk,var(--petrol));color:#fff;font-family:var(--fh);font-weight:750;
  font-size:15px;letter-spacing:.02em}

/* ── Capabilities ────────────────────────────────────────────────────────── */
.doc-caps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.doc-caps li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--soft);
  background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:100px}
.doc-caps svg{width:12px;height:12px;color:var(--signal);flex:none}
.doc-caps-niet{margin-top:12px}
.doc-caps-niet li{background:var(--paper2);border-color:transparent;color:var(--faint)}
.doc-caps-niet svg{width:11px;height:11px;color:#B0817A}

/* ── Kaarten ─────────────────────────────────────────────────────────────── */
.doc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.doc-card h3{font-size:16px;font-weight:700}
.doc-card p{margin-top:8px;font-size:14.8px;line-height:1.65}
@media(max-width:720px){.doc-cards{grid-template-columns:minmax(0,1fr)}}

/* ── Tegels (overzichtspagina's) ─────────────────────────────────────────── */
.doc-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.doc-tegel{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:22px 24px;transition:transform .22s var(--ease),
  box-shadow .22s var(--ease),border-color .22s}
a.doc-tegel:hover{transform:translateY(-3px);box-shadow:0 16px 40px -26px rgba(8,32,29,.55);
  border-color:var(--line2)}
.doc-tegel-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.doc-tegel h3{font-size:17px;font-weight:730;color:var(--text)}
.doc-tegel p{font-size:14.5px;line-height:1.6;color:var(--soft);flex:1}
.doc-tegel-meer{font-size:13.5px;font-weight:650;color:var(--petrol)}
.doc-tegel-uit{background:var(--paper2);border-style:dashed}
.doc-tegel-uit h3{color:var(--soft)}
@media(max-width:960px){.doc-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.doc-tegels{grid-template-columns:minmax(0,1fr)}}

/* ── Afsluitende oproep ──────────────────────────────────────────────────── */
.doc-cta{margin-top:56px;background:var(--ink);border-radius:22px;padding:38px 40px;color:#EAF5F1;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;scroll-margin-top:96px}
.doc-cta h2{color:#fff;font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.015em}
.doc-cta p{margin-top:10px;color:#9FBDB7;font-size:15.5px;line-height:1.6;max-width:52ch}
.doc-cta .rest{flex:1;min-width:260px}
.doc-cta-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.doc-cta-uit{border-color:rgba(255,255,255,.24);color:#EAF5F1}
.doc-cta-uit:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}

/* ── Support ─────────────────────────────────────────────────────────────── */
.doc-support{margin-top:18px}
.doc-support-rij{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.doc-support-knop{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  color:var(--text);background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:10px 17px;transition:border-color .18s,transform .18s var(--ease)}
.doc-support-knop:hover{border-color:var(--petrol-l);transform:translateY(-1px)}
.doc-support-knop svg{width:16px;height:16px;color:var(--petrol);flex:none}

/* ── Vorige / volgende ───────────────────────────────────────────────────── */
.doc-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px;
  padding-top:26px;border-top:1px solid var(--line)}
.doc-pager a{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);
  border-radius:14px;padding:16px 20px;background:#fff;transition:border-color .18s,
  transform .18s var(--ease)}
.doc-pager a:hover{border-color:var(--petrol-l);transform:translateY(-2px)}
.doc-pager-volgende{text-align:right}
.doc-pager-label{font-family:var(--fb);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:700}
.doc-pager-naam{font-size:15.5px;font-weight:650;color:var(--text)}
@media(max-width:620px){.doc-pager{grid-template-columns:minmax(0,1fr)}
  .doc-pager-volgende{text-align:left}}

/* ── Toetsenbord ─────────────────────────────────────────────────────────── */
.doc-shell a:focus-visible,.doc-wrap a:focus-visible,.doc-faq summary:focus-visible{
  outline:2px solid var(--petrol);outline-offset:3px;border-radius:6px}

@media(prefers-reduced-motion:reduce){
  .doc-tegel,.doc-pager a,.doc-support-knop{transition:none}
  a.doc-tegel:hover,.doc-pager a:hover,.doc-support-knop:hover{transform:none}
}

/* ── Uitgelicht: wat af is, ziet er anders uit dan wat gepland is ──────────
   Een geplande koppeling en een werkende koppeling verschilden alleen in een
   pil en een streepjesrand. Dat leest als "bijna hetzelfde". Wat af is krijgt
   nu een eigen blok met de mogelijkheden erbij; de rest staat eronder als
   lijst. Het verschil zit zo in de opbouw van de pagina en niet in een woord. */
.doc-uitgelicht{margin-top:30px;padding:32px 0 34px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.doc-uit-kop{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.doc-uitgelicht h2{font-size:clamp(24px,3vw,32px);font-weight:780;letter-spacing:-.028em;margin:0}
.doc-uit-lead{font-size:17px;color:var(--soft);margin:12px 0 0;max-width:60ch;line-height:1.6}
.doc-uit-split{display:grid;grid-template-columns:1.15fr 1fr;gap:0;margin-top:26px;border-top:1px solid var(--line)}
.doc-uit-split>div{padding:22px 36px 4px 0;position:relative}
.doc-uit-split>div+div{padding-left:40px}
.doc-uit-split>div+div::before{content:"";position:absolute;left:0;top:22px;bottom:8px;width:1px;background:var(--line)}
.doc-uit-split h3{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--petrol);margin:0 0 12px}
.doc-uit-niet h3{color:var(--faint)}
ul.doc-uit-kan{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
.doc-uit-niet ul.doc-uit-kan{columns:1}
ul.doc-uit-kan li{position:relative;padding:5px 0 5px 18px;font-size:14.5px;line-height:1.5;color:var(--text);break-inside:avoid}
ul.doc-uit-kan li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--petrol)}
.doc-uit-niet ul.doc-uit-kan li{color:var(--soft)}
.doc-uit-niet ul.doc-uit-kan li::before{background:none;border:1.5px solid var(--line2);top:11px}
.doc-uit-knop{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:13px 24px;border-radius:6px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.doc-uit-knop:hover{background:var(--petrol)}
.doc-blok-bij{font-family:var(--fb);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-left:12px;vertical-align:middle}
.doc-tegel-gepland{opacity:.72}
@media(max-width:820px){
  .doc-uit-split{grid-template-columns:1fr}
  .doc-uit-split>div{padding:20px 0 4px}
  .doc-uit-split>div+div{padding-left:0;border-top:1px solid var(--line)}
  .doc-uit-split>div+div::before{display:none}
  ul.doc-uit-kan{columns:1}
}