/* ==========================================================================
   tp-readout — Beschrifteter Nur-Lese-Textblock mit Aktionsslot
   --------------------------------------------------------------------------
   Für Inhalte, die man ansieht und kopiert, aber nicht bearbeitet:
   Prompt-Vorschau, JSON-Export, Kontextauszüge.

     .tp-readout
       ├── .tp-readout__head
       │     ├── .tp-readout__label
       │     └── (Aktion, z. B. Kopieren-Button)
       └── .tp-readout__body   (oder ein textarea.tp-field__control[readonly])
   ========================================================================== */

.tp-readout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
}

.tp-readout__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
}

.tp-readout__label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-4);
}

.tp-readout__body {
    flex: 1;
    min-height: 0;
    max-height: var(--tp-readout-max-h, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
    /* Vorformatierter Text ohne <pre>: Zeilenumbrüche bleiben erhalten,
       lange Zeilen brechen trotzdem um statt seitlich zu scrollen. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tp-readout__body--mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
}

/* ── Nummerierte Teilstücke (z. B. Prompt-Schritte) ──────────────────────── */

.tp-readout__steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: var(--tp-readout-max-h, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tp-readout__step {
    padding: 8px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.tp-readout__step-label {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-4);
}

.tp-readout__step-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}