/* JSON-Validator: Ausgabe, Fehlerausschnitt, Baumansicht. */
.tl-json-indent { display: inline-flex; align-items: center; gap: 8px; }
.tl-json-indent .tl-label { display: inline; }
.tl-json-indent .tl-select { width: auto; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; }
.tl-json-out { min-height: 260px; }

/* Fehlerausschnitt mit Zeilennummern */
.tl-json-snip { max-height: 260px; }
.tl-json-line { display: block; min-height: 1.65em; }
.tl-json-line.is-err { background: rgba(248, 113, 113, .1); border-radius: 3px; }
.tl-json-caret { color: #f87171; font-weight: 700; }
.tl-json-fix > * + * { margin-top: 12px; }
.tl-json-fixcode { max-height: 320px; }
.tl-json-notes:empty { display: none; }
.tl-json-notes > * + * { margin-top: 10px; }

/* Baumansicht (auf dunklem Code-Hintergrund) */
.tl-json-tree { white-space: normal; min-height: 260px; }
.tl-json-tree details > summary { list-style: none; cursor: pointer; padding: 1px 4px 1px 0; border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-json-tree details > summary::-webkit-details-marker { display: none; }
.tl-json-tree details > summary::before { content: ""; display: inline-block; width: 0; height: 0; margin: 0 7px 1px 2px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--code-comment); transition: transform .12s ease; }
.tl-json-tree details[open] > summary::before { transform: rotate(90deg); }
.tl-json-tree details > summary:hover { background: rgba(255, 255, 255, .05); }
.tl-json-tree details > summary:focus-visible { outline: 2px solid hsl(var(--tl-hue) 80% 60%); outline-offset: 1px; }
.tl-json-kids { margin-left: 5px; padding-left: 14px; border-left: 1px dashed rgba(255, 255, 255, .14); }
.tl-json-leaf { padding: 1px 0 1px 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-json-badge { margin-left: 8px; font-size: 11.5px; color: var(--code-comment); }
.tl-json-more { margin: 4px 0 4px 15px; padding: 3px 10px; font: 500 12px/1.4 var(--font-sans); color: var(--code-fg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; cursor: pointer; }
.tl-json-more:hover { background: rgba(255, 255, 255, .12); }
.tl-json-more:focus-visible { outline: 2px solid hsl(var(--tl-hue) 80% 60%); }
@media (prefers-reduced-motion: reduce) { .tl-json-tree details > summary::before { transition: none; } }