/* api-builder.css — live API-builder (docs-uitklap + bronpagina's)
   Parametervelden in de lichte kaartstijl, antwoord in het donkerblauwe
   codeblok van de huisstijl (#0a2036, plat). Geen dependencies. */

.apib{border:1px solid var(--color-divider); border-radius:14px;
  background:var(--color-surface); overflow:hidden}
.apib-kop{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--color-divider);
  background:var(--color-surface)}
.apib-titel{font-family:var(--font-heading); font-size:15px; font-weight:700;
  color:var(--color-navy)}
.apib-sub{font-size:12.5px; color:var(--color-text-muted)}
.apib-endpoint-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.apib-ep-tab{font-family:var(--font-mono); font-size:11.5px; padding:4px 10px;
  border-radius:99px; border:1px solid var(--color-divider);
  background:var(--color-surface); color:var(--color-text-muted); cursor:pointer;
  white-space:nowrap}
.apib-ep-tab:hover{color:var(--color-blue); border-color:var(--color-blue)}
.apib-ep-tab[aria-pressed="true"]{background:var(--color-navy);
  border-color:var(--color-navy); color:#fff}

.apib-lijf{padding:16px 18px}
.apib-params{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px 14px}
.apib-param{display:flex; flex-direction:column; gap:4px; min-width:0}
.apib-param label{display:flex; align-items:baseline; gap:7px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--color-text)}
.apib-param label i{font-style:normal; font-size:10px; color:var(--color-danger)}
.apib-param label small{font-size:10px; color:var(--color-text-muted);
  font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.apib input[type="text"], .apib select{
  font:inherit; font-size:13px; font-family:var(--font-mono);
  padding:7px 10px; border:1px solid #b9c6d4; border-radius:7px;
  background:var(--color-surface); color:var(--color-text); min-width:0}
.apib input:focus, .apib select:focus{outline:none; border-color:var(--color-blue);
  box-shadow:0 0 0 3px rgba(0,123,199,.14)}
.apib details{margin-top:12px; border-top:1px dashed var(--color-divider);
  padding-top:10px}
.apib details summary{cursor:pointer; font-size:12.5px;
  color:var(--color-text-muted); user-select:none}
.apib details summary:hover{color:var(--color-blue)}
.apib details[open] summary{margin-bottom:10px}

.apib-actie{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--color-divider)}
.apib-url{flex:1; min-width:220px; font-family:var(--font-mono); font-size:12px;
  color:var(--color-navy); background:#f2f7fc; border:1px solid var(--color-divider);
  border-radius:7px; padding:8px 11px; overflow-x:auto; white-space:nowrap}
.apib-url b{color:var(--color-green); font-weight:600}
.apib-knop{font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  color:#fff; background:var(--color-navy); border:none; border-radius:8px;
  padding:9px 20px; white-space:nowrap}
.apib-knop:disabled{opacity:.55; cursor:wait}

/* antwoord: het vertrouwde donkerblauwe codeblok */
.apib-antwoord{margin-top:14px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); background:#0a2036;
  box-shadow:0 32px 80px rgba(9,29,51,.30)}
.apib-antwoord-kop{display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.14)}
.apib-antwoord-kop .m{font-family:var(--font-mono); font-size:11px;
  color:#eaf3fb; letter-spacing:.06em; text-transform:uppercase}
.apib-antwoord-tabs{display:flex; gap:2px; margin-left:auto}
.apib-tab{font-family:var(--font-mono); font-size:11px; padding:3px 9px;
  border-radius:5px; border:1px solid rgba(255,255,255,.2);
  background:none; color:rgba(207,224,244,.72); cursor:pointer}
.apib-tab:hover{color:#fff}
.apib-tab[aria-selected="true"]{background:var(--color-navy);
  border-color:var(--color-navy); color:#fff}
.apib-antwoord-lijf{font-family:var(--font-mono); font-size:12.2px;
  line-height:1.6; color:#d5e6f6; padding:14px 16px 16px;
  max-height:420px; overflow:auto; scrollbar-width:thin;
  scrollbar-color:rgba(143,202,231,.35) transparent}
.apib-antwoord-lijf::-webkit-scrollbar{width:5px}
.apib-antwoord-lijf::-webkit-scrollbar-thumb{background:rgba(143,202,231,.35);
  border-radius:99px}
.apib-antwoord-lijf pre{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.apib-voet{display:flex; gap:16px; flex-wrap:wrap;
  padding:9px 14px; border-top:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); font-family:var(--font-mono);
  font-size:11px; color:#d9e8f7}
.apib-melding{padding:10px 14px; font-size:13px; color:#e8c98a;
  background:rgba(240,180,122,.08); border-bottom:1px solid rgba(255,255,255,.1)}

/* docs-uitklap: de builder opent als breed paneel over de leeskolom */
.apib-overlay{position:fixed; inset:0; z-index:80; display:none;
  background:rgba(9,29,51,.38); backdrop-filter:blur(2px)}
.apib-overlay.open{display:block}
.apib-paneel{position:absolute; top:0; right:0; bottom:0; width:min(760px,94vw);
  background:var(--color-surface); box-shadow:-24px 0 70px rgba(9,29,51,.28);
  display:flex; flex-direction:column; overflow:hidden}
.apib-paneel-kop{display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--color-divider)}
.apib-paneel-kop h3{margin:0; font-size:16px; color:var(--color-navy)}
.apib-paneel-kop button{margin-left:auto; font:inherit; font-size:13px;
  cursor:pointer; color:var(--color-text-muted); background:none;
  border:1px solid var(--color-divider); border-radius:7px; padding:6px 14px}
.apib-paneel-kop button:hover{color:var(--color-danger); border-color:var(--color-danger)}
.apib-paneel-lijf{overflow:auto; padding:18px 20px 40px}