/* ============================================================
   Rayvn — Editor
   Aufbau: ein transparentes <textarea> liegt exakt über einem
   gefärbten <pre>. Der Browser übernimmt Cursor, Auswahl, Undo
   und IME; wir zeichnen nur die Farben darunter. Deshalb müssen
   Schrift, Größe, Zeilenhöhe und Padding beider Ebenen identisch
   sein — jede Abweichung verschiebt den Cursor.
   ============================================================ */
.editor{flex:1;display:flex;min-height:0;min-width:0;background:var(--editor)}

.gutter{
  flex:none;padding:10px 12px 60px 14px;text-align:right;
  font-family:var(--code-font);font-size:calc(var(--code-size) - 1px);
  line-height:var(--code-lh);color:var(--faint);
  user-select:none;overflow:hidden;background:var(--editor);
  border-right:1px solid var(--line-soft);
}
.gutter b{display:block;font-weight:400}
.gutter b.cur{color:var(--text-strong)}
[data-lines="aus"] .gutter{display:none}

.scroll{position:relative;flex:1;min-width:0;overflow:auto}

.hl,#ta{
  margin:0;
  padding:10px 20px 60px 8px;
  font-family:var(--code-font);
  font-size:var(--code-size);
  line-height:var(--code-lh);
  tab-size:2;
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
  border:0;
}
[data-wrap="an"] .hl,[data-wrap="an"] #ta{white-space:pre-wrap;overflow-wrap:anywhere}

.hl{
  position:absolute;inset:0;
  min-height:100%;min-width:100%;
  pointer-events:none;
  color:var(--text);
}
#ta{
  position:relative;
  display:block;
  width:100%;min-height:100%;
  background:transparent;
  color:transparent;
  caret-color:var(--accent);
  resize:none;outline:none;
  overflow:hidden;
}
#ta::selection{background:var(--sel)}

/* Syntaxfarben — die Klassen vergibt js/highlight.js */
.tk{color:var(--tok-key)}      /* Schlüsselwort */
.ts{color:var(--tok-str)}      /* Zeichenkette  */
.tn{color:var(--tok-num)}      /* Zahl          */
.tc{color:var(--tok-com);font-style:italic}
.tf{color:var(--tok-fn)}       /* Funktionsname */
.tt{color:var(--tok-type)}     /* Typ / Konstante */
.to{color:var(--tok-op)}       /* Operator      */
.tg{color:var(--tok-tag)}      /* HTML-Tag      */
.ta{color:var(--tok-attr)}     /* Attribut      */
.tp{color:var(--tok-punct)}    /* Klammern      */