/* Code-Darstellung — Baustein Core\Design::codeBlock. Farben ausschliesslich aus Kern-Token,
   damit helles und dunkles Thema ohne Sonderregeln funktionieren. */
/* Schrift-Massgabe steht EINMAL am Rahmen: Eingabefeld und Färbung erben davon. Wären es zwei
   getrennte Angaben, liefen Text und Farbe beim Tippen auseinander (Browser runden Zeilenhöhen
   je Element unterschiedlich) — genau das war der Fall. */
.cc-codewrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius);
               overflow: hidden; font-family: var(--mono); font-size: var(--fs-sm);
               line-height: 1.5; letter-spacing: normal; tab-size: 2; }
.cc-code { margin: 0; padding: var(--sp-4); overflow-x: auto; background: var(--grey-50);
           font: inherit; letter-spacing: inherit; tab-size: inherit; }
.cc-code code { font: inherit; letter-spacing: inherit; tab-size: inherit; white-space: pre; }

.cs-kw      { color: var(--accent-2); font-weight: var(--fw-bold); }
.cs-string  { color: var(--ok); }
.cs-comment { color: var(--muted); font-style: italic; }
.cs-num     { color: var(--info); }
.cs-var     { color: var(--danger); }
.cs-tag     { color: var(--accent-2); }

/* Bearbeitbar: das Eingabefeld liegt DECKUNGSGLEICH über der Hervorhebung. Beide teilen exakt
   Schrift, Zeilenhoehe und Innenabstand — sonst laufen Text und Farbe auseinander. */
.cc-code-editable .cc-code { pointer-events: none; }
.cc-code-editable .cc-code-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: var(--sp-4); border: 0; resize: none;
    background: transparent; color: transparent; caret-color: var(--ink);
    white-space: pre; overflow: auto;
    /* Die globale Textfeld-Regel (forms.css) setzt Schriftgroesse und Innenabstand mit !important.
       Ein Code-Feld MUSS aber zeichengenau auf der Faerbung darunter liegen — sonst wandert der
       Text beim Tippen gegenueber den Farben. Deshalb hier die einzige begruendete Ausnahme. */
    font: inherit !important;
    letter-spacing: inherit !important;
    tab-size: inherit;
    padding: var(--sp-4) !important;
    border: 0 !important;
    background: transparent !important;
    height: 100% !important;
    /* Die globale Textfeld-Regel (forms.css) setzt `color` mit !important. Ohne dieselbe Staerke
       hier blieb der Text des Eingabefeldes SICHTBAR und lag als zweite, verschobene Schrift ueber
       der Faerbung — jedes bearbeitbare Code-Feld las sich doppelt. Der Cursor bleibt sichtbar
       (caret-color oben), nur die Glyphen sind es nicht. */
    color: transparent !important;
}
/* ['softwrap'=>true] (Design::codeBlock): Fliesstext in Monospace — lange Zeilen brechen um, statt
   waagerecht wegzulaufen. Hervorhebung UND Eingabefeld brechen identisch um, sonst wandern Text und
   Farbe auseinander. Der waagerechte Rollbalken entfällt damit. Nicht mit der Zeilenleiste nutzen. */
.cc-code-soft .cc-code { overflow-x: hidden; }
.cc-code-soft .cc-code code,
.cc-code-soft .cc-code-input { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

.cc-code-editable { min-height: var(--sz-180); }
.cc-code-stage { position: relative; min-height: var(--sz-140); }   /* Deckungsfläche: pre + Eingabe, ohne Werkzeugleiste */
.cc-code-editable .cc-code-input::selection { background: var(--accent-2-bg); color: var(--ink); }

.cc-code-tools { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
                 padding: var(--sp-2); border-bottom: 1px solid var(--border); background: var(--surface); }
.cc-code-tools .cc-code-lang { margin-left: auto; color: var(--muted); font-size: var(--fs-xs);
                               text-transform: uppercase; letter-spacing: var(--tracking); }
.cc-code-editable .cc-code { padding-top: var(--sp-4); }

/* ── Zeilenleiste (Design::codeBlock ['lines'=>true]) ─────────────────────────────────────────
   Sitzt absolut in der Deckungsfläche, trägt reinen Text (1\n2\n3 …) und wird beim Tippen/Scrollen
   vom syntax-JS nachgeführt (scrollTop) — deshalb overflow:hidden statt einer zweiten Bildlaufleiste.
   Feld und Färbung rücken um dieselbe Breite ein, sonst liefen Text und Nummern auseinander. */
.cc-code-lined .cc-code-stage { position: relative; }
.cc-code-lined .cc-code { padding-left: var(--sz-56); }
.cc-code-lined .cc-code-input { padding-left: var(--sz-56) !important; }
.cc-code-gutter {
    position: absolute; left: 0; top: 0; bottom: 0; width: var(--sz-48);
    padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; box-sizing: border-box;
    overflow: hidden; white-space: pre; text-align: right;
    color: var(--muted); background: var(--grey-100);
    border-right: 1px solid var(--border);
    user-select: none; pointer-events: none;
}

/* ── Code-Editor-Overlay (Design::codeEditor) ────────────────────────────────────────────────
   Fläche/Kopf/Fuss kommen aus den Kern-Overlay-Klassen (lightbox). Hier steht NUR, dass ein
   Code-Overlay breiter und höher ist als ein Melde-Dialog und dass das Feld die Fläche füllt. */
/* Doppelte Klasse bzw. eigener Kontext = hoehere Spezifitaet als die lightbox-Vorgabe; die
   Ladereihenfolge der Modul-CSS ist nicht garantiert, eine gleich starke Regel wuerde verlieren. */
/* Breite/Höhe schaltet der Grössen-Umschalter (lightbox cc-ov-*, Vorgabe „gross"); hier nur die Höhe,
   falls das Overlay einmal ohne Grössenklasse erscheint. */
.mage-overlay-panel.cc-codeed-panel { height: 84vh; max-height: 94vh; }
.cc-codeed-panel .mage-overlay-body.cc-codeed-body { max-height: none; flex: 1 1 auto; display: flex; min-height: 0; }
.cc-codeed-body .cc-codewrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cc-codeed-body .cc-code-stage { flex: 1 1 auto; min-height: 0; }
.cc-codeed-body .cc-code { height: 100%; overflow: auto; }
.cc-codeed-note { margin-right: auto; color: var(--danger); }

/* Konsole (Design::console) — dunkle Terminal-Fläche mit Kopfleiste (Terminals-Modul). */
.cc-console { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid var(--grey-700); border-radius: var(--radius); background: var(--grey-900); color: var(--grey-100); }
.cc-console.cc-console-active { border-color: var(--o); }
.cc-console-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); min-width: 0;
  background: var(--grey-800); color: var(--grey-100); }
.cc-console-meta { font-size: var(--fs-xs); color: var(--grey-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-console-gap { flex: 1; }
.cc-console-body { flex: 1; min-height: 0; }

/* ── Markierte Zeile (Design::codeBlock ['mark' => N]) ─────────────────────────────────────────
   „Zeig mir die Stelle im Quelltext": ein farbiges Band über genau einer Zeile. Seine Lage kommt
   aus der Zeilennummer (--cc-mark, vom Baustein gesetzt) und der gemeinsamen Zeilenhöhe von
   Zeilenleiste und Code — beide sitzen in derselben Deckungsfläche, deshalb trägt die Rechnung. */
.cc-code-mark { position: absolute; left: 0; right: 0; pointer-events: none; z-index: var(--z-base);
    top: calc(var(--sp-4) + (var(--cc-mark) - 1) * 1.5em); height: 1.5em;
    background: color-mix(in srgb, var(--o) 16%, transparent);
    border-left: 2px solid var(--o); }
.cc-code-marked .cc-code { position: relative; z-index: var(--z-raised); background: transparent; }
.cc-code-marked .cc-code-stage { background: var(--grey-50); border-radius: var(--radius); }