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

/* Fehlerausschnitt mit Zeilennummern */
.tl-yaml-snip { max-height: 240px; }
.tl-yaml-snip[hidden] { display: none; }
.tl-yaml-line { display: block; min-height: 1.65em; }
.tl-yaml-line.is-err { background: rgba(248, 113, 113, .1); border-radius: 3px; }
.tl-yaml-caret { color: #f87171; font-weight: 700; }
.tl-yaml-reason { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.tl-yaml-fix > * + * { margin-top: 12px; }
.tl-yaml-fixcode { max-height: 340px; }

/* Hinweise */
.tl-yaml-notes:empty, .tl-yaml-top:empty { display: none; }
.tl-yaml-notes > * + * { margin-top: 8px; }
.tl-yaml-h { margin: 4px 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

/* Strukturbaum (auf dunklem Code-Hintergrund) */
.tl-yaml-tree { white-space: normal; min-height: 260px; }
.tl-yaml-tree details > summary { list-style: none; cursor: pointer; padding: 1px 4px 1px 0; border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-yaml-tree details > summary::-webkit-details-marker { display: none; }
.tl-yaml-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-yaml-tree details[open] > summary::before { transform: rotate(90deg); }
.tl-yaml-tree details > summary:hover { background: rgba(255, 255, 255, .05); }
.tl-yaml-tree details > summary:focus-visible { outline: 2px solid hsl(var(--tl-hue) 80% 60%); outline-offset: 1px; }
.tl-yaml-kids { margin-left: 5px; padding-left: 14px; border-left: 1px dashed rgba(255, 255, 255, .14); }
.tl-yaml-leaf { padding: 1px 0 1px 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-yaml-badge { margin-left: 8px; font-size: 11.5px; color: var(--code-comment); }
.tl-yaml-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-yaml-more:hover { background: rgba(255, 255, 255, .12); }
.tl-yaml-more:focus-visible { outline: 2px solid hsl(var(--tl-hue) 80% 60%); }
@media (prefers-reduced-motion: reduce) { .tl-yaml-tree details > summary::before { transition: none; } }