/* Textschleuse – sandbox.css
   Ergänzt app.css um den API-Sandkasten; Tokens und Komponenten (.ph, .pill, .seg, .bp) kommen von dort.
   sb-row und sb-note statt row und note: app.css belegt beide schon für die Prüfansicht. */

.sb{max-width:1320px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);display:flex;flex-direction:column;gap:var(--s5)}
.sb-head h1{font-size:var(--fs-xl)}
.sb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.pnl{background:var(--raised);display:flex;flex-direction:column;min-width:0}
.pnl-h{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.pnl-h h2{font-size:var(--fs-l)}
.pnl-b{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.pnl-f{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--bg)}

.ep{display:flex;flex-direction:column;border:1px solid var(--line)}
.ep-opt{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 12px;border:0;background:transparent;text-align:left;cursor:pointer}
.ep-opt+.ep-opt{border-top:1px solid var(--line-soft)}
.ep-opt:hover{background:var(--hover)}
.ep-opt[aria-checked="true"]{background:var(--accent-wash);box-shadow:inset 3px 0 0 var(--accent)}
.ep-m{font:700 10.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.ep-opt[aria-checked="true"] .ep-m{color:var(--accent-text)}
.ep-p{font:500 13px/1.3 var(--font-mono);color:var(--text)}
.ep-d{grid-column:2;font-size:12px;color:var(--muted);margin-top:2px}

.sb-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.lbl{font-size:12px;color:var(--muted)}
.sel{height:30px;padding:0 8px;border:1px solid var(--line);background:var(--raised);font-size:var(--fs-s)}
.ed{display:block;width:100%;min-height:300px;resize:vertical;padding:var(--s3) var(--s4);border:1px solid var(--line);background:var(--raised);color:var(--text);font:400 14px/1.6 var(--font-ui)}
.ed.mono{font:400 12.5px/1.6 var(--font-mono);white-space:pre;overflow-wrap:normal;overflow-x:auto}
.ed:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-note{font-size:12px;color:var(--muted);text-wrap:pretty}
#mode-note{margin-top:6px}
.sb-note code{font:500 12px var(--font-mono);color:var(--text)}
.drop2{display:grid;place-items:center;gap:6px;min-height:200px;border:1px dashed var(--line);text-align:center;padding:var(--s5);color:var(--muted);font-size:var(--fs-s)}
.drop2.over{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-text)}
.sb-sample-file{margin-top:var(--s2)}
.meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.curl{border-top:1px solid var(--line)}
.curl>summary{display:flex;align-items:center;gap:10px;padding:10px var(--s4);cursor:pointer;list-style:none;font-size:var(--fs-s);font-weight:600;color:var(--accent-text)}
.curl>summary::-webkit-details-marker{display:none}
.curl>summary:hover{background:var(--hover)}
/* Gleicher Winkel wie .panel in app.css, damit Aufklappbares überall gleich aussieht. */
.curl-chev{width:7px;height:7px;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg);transition:transform .15s;flex:none}
.curl[open] .curl-chev{transform:rotate(45deg)}
.curl-open,.curl[open] .curl-closed{display:none}
.curl[open] .curl-open{display:inline}
.curl>summary .btn{margin-left:auto}
.code-box{margin:0 var(--s4) var(--s4);padding:var(--s3);border:1px solid var(--line-soft);background:var(--bg);font:400 12px/1.6 var(--font-mono);white-space:pre-wrap;word-break:break-word;max-height:220px;overflow:auto}

.res{position:sticky;top:calc(var(--top) + 16px);max-height:calc(100vh - var(--top) - 32px)}
.http{font:700 12px/1 var(--font-mono);padding:5px 8px;border:1px solid var(--ok);color:var(--ok-text);background:var(--ok-wash)}
.http.err{border-color:var(--danger);color:var(--danger-text);background:var(--danger-wash)}
.counts{display:flex;flex-wrap:wrap;gap:6px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-soft)}
.cnt{display:inline-flex;align-items:center;gap:6px;padding:2px 7px 2px 3px;font-size:12px;border:1px solid var(--line-soft);background:var(--bg)}
.cnt .ph,.out-text .ph,.mtab .ph{cursor:default}
.cnt b{font:600 12px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:0;padding:0 var(--s4);border-bottom:1px solid var(--line)}
.tab{padding:9px 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;font-size:var(--fs-s);color:var(--muted);cursor:pointer;display:flex;gap:6px;align-items:baseline}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.tab small{font:500 11px/1 var(--font-mono);color:var(--faint)}
.res-b{position:relative;overflow:auto;min-height:0;flex:1}
.res-copy{position:sticky;top:10px;float:right;margin:10px 10px 0 0;z-index:2;background:var(--raised)}
.out-text{padding:var(--s4) var(--s5);font:400 14px/1.75 var(--font-ui);white-space:pre-wrap;text-wrap:pretty}
.out-text.err{color:var(--danger-text)}
.out-json{margin:0;padding:var(--s4);font:400 12px/1.6 var(--font-mono);white-space:pre-wrap;word-break:break-word}
.j-k{color:var(--muted)} .j-s{color:var(--accent-text)} .j-n{color:var(--ok-text)}
.mtab{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
.mtab th{position:sticky;top:0;background:var(--raised);text-align:left;font:600 11px/1 var(--font-mono);letter-spacing:.04em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.mtab td{padding:7px 12px;border-bottom:1px solid var(--line-soft);vertical-align:baseline}
.mtab td.n{font:400 12px/1 var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hdrs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;margin:0;font:400 12.5px/1.5 var(--font-mono)}
.hdrs>*{padding:8px 16px;border-bottom:1px solid var(--line-soft)}
.hdrs dt{color:var(--muted)} .hdrs dd{margin:0;overflow-wrap:anywhere}

.ref{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line)}
.ref>h2{font-size:22px}
.ref-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5) var(--s6)}
.ref-col{display:flex;flex-direction:column;gap:var(--s5)}
.ref h3{font-size:17px;margin-bottom:4px}
.ref h3 code{font:500 13px var(--font-mono);color:var(--muted)}
.ref .sb-note{margin-bottom:6px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:0;font-size:var(--fs-s)}
.kv>*{padding:7px 0;border-bottom:1px solid var(--line-soft)}
.kv dt{font:500 12px/1.6 var(--font-mono);padding-right:var(--s4);color:var(--text);white-space:nowrap}
.kv dd{margin:0;color:var(--muted)}
.kv code{font:500 12px var(--font-mono);color:var(--text)}
.kv .m{font:700 10px/1 var(--font-mono);color:var(--faint);margin-right:6px}

@media (max-width:1000px){
  .sb{padding:var(--s5) var(--s3)}
  .sb-grid,.ref-grid{grid-template-columns:minmax(0,1fr)}
  .res{position:static;max-height:none}
  .kv dt{white-space:normal}
}