/* Kurzverfügungseditor — was allein diese Anwendung betrifft.
 *
 * Tafel und Bausteine stehen in `gemeinsam/`: dort die Farben, Maße, Felder,
 * Knöpfe und Schirme, hier die drei Spalten, die Vorlagenliste, der Editor
 * und die Vorschau. Wer eine Farbe oder einen Knopf braucht, holt ihn von
 * dort und baut ihn nicht ein zweites Mal.
 *
 * Der Grundriss heißt `.werkstatt` und nicht `.buehne`: Letztere gehört in
 * den Bausteinen zu den Reitern von `rira` und `ggg` und ist ein Flexkasten
 * in Spaltenrichtung — genau falsch für drei Spalten nebeneinander.
 */

:root {
  /* Der Ton dieser Anwendung: violett, das Sachgebiet „Rechtsprechung“ auf der
     Übersicht — derselbe Ton, den `public/icon.svg` bereits trägt. Nur die
     Kopfleiste greift ihn ab. */
  --ton-app: var(--ton-violett);

  /* Die Breite der Seitenleiste. Sie steht als Variable da, weil sie an zwei
     Stellen gebraucht wird: im Raster und in der eingeklappten Fassung.
     Von 280 auf 308 Pixel — ein Zehntel mehr, seit rechts in jeder Zeile das
     Menü mitfährt und dem Namen Platz nimmt. */
  --leiste-breit: 308px;

  /* Zwei ruhige Flächen: die Zeile, über der die Maus steht, und die
     gewählte. Sie stehen hier und nicht in der Tafel, weil es sie nur hier
     gibt — und sie sind **nicht** `--merke` oder `--primaer`: Beide sind in
     der dunklen Fassung ein aufgehelltes Blau und leuchteten über die ganze
     Breite der Leiste. Ein Balken in der Farbe der Anwendung sagt dasselbe
     leiser. */
  --zeile-ueber: rgb(0 0 0 / 5%);
  --zeile-gewaehlt: rgb(0 0 0 / 9%);
}

:root[data-thema="dunkel"] {
  /* Im Dunkeln wird aufgehellt statt abgedunkelt. */
  --zeile-ueber: rgb(255 255 255 / 6%);
  --zeile-gewaehlt: rgb(255 255 255 / 11%);
}

/* ------------------------------------------------------------ Der Grundriss */

/* Drei Spalten, und dazwischen nichts als eine Linie: suchen, schreiben,
   sehen. Darüber, quer über die beiden rechten, die Felder der Vorlage.
   Die Höhe ist die des Fensters abzüglich der Leisten; deren Höhe
   meldet `gemeinsam/leistenhoehen.js` zur Laufzeit an die Wurzel, weil die
   Kopfleiste auf einem schmalen Fenster umbricht.

   Die Plätze stehen als **benannte Felder** und nicht als Spaltenzahlen: Die
   Felderzeile spannt über zwei Spalten, wenn die Liste offen steht, und über
   beide vorhandenen, wenn sie eingeklappt ist. Mit `grid-column: 2 / -1`
   wäre sie im zweiten Fall auf eine Spalte zusammengefallen — ein Name hält,
   was eine Zahl verliert. */
.werkstatt {
  display: grid;
  grid-template-columns: var(--leiste-breit) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "leiste felder   felder"
    "leiste werkbank vorschau";
  height: calc(100dvh - var(--hoehe-kopfleiste, 62px) - var(--hoehe-fusszeile, 84px));
  min-height: 420px;
}

.werkstatt > * { min-width: 0; }

.leiste { grid-area: leiste; }
.felder { grid-area: felder; }
.werkbank { grid-area: werkbank; }
.vorschau { grid-area: vorschau; }

/* Auf einem schmalen Fenster stehen sie untereinander. Die Vorschau
   bleibt dabei sichtbar: Sie ist der Grund, weshalb man im Dialekt schreiben
   kann, ohne ihn zu kennen. */
@media (max-width: 900px) {
  .werkstatt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "leiste" "felder" "werkbank" "vorschau";
    height: auto;
  }

  /* Untereinander gibt keine Zeile dem Editor eine Höhe; er bekäme die seines
     Textes und stünde bei einer kurzen Vorlage als Schlitz da. */
  .werkbank .editor { min-height: 260px; }
}

/* ------------------------------------------------------- Die Seitenleiste */

.leiste {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--linie);
  background: var(--flaeche);
}

/* Suchen und Anlegen in einer Zeile: Das Suchfeld nimmt, was übrig bleibt.
   Bis 0.1.7 standen darunter noch zwei Knöpfe für Kopieren und Löschen — die
   stehen jetzt im Menü der Zeile, zu der sie gehören, und die Zeile darunter
   entfällt samt ihrer Höhe. */
.leiste__kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
}

.leiste__filter {
  flex: 1;
  min-width: 0;
  min-height: var(--tippflaeche);
  padding: 8px 10px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--eingabe-grund);
  color: inherit;
  font: inherit;
}

.leiste__filter:focus { border-color: var(--primaer); }

/* Die Liste rollt für sich; der Rest der Leiste steht still. */
.leiste__liste {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0;
}

/* Der Fokus liegt auf der Liste als Ganzer, nicht auf der Zeile: Gebaut ist
   sie als `listbox` mit `aria-activedescendant`, damit der Tabulator sie in
   einem Schritt überspringt. Deshalb muss die gewählte Zeile auch dann
   sichtbar sein, wenn der Rahmen um die ganze Liste liegt. */
/* Die Gruppe trägt den Ton der Anwendung und eine Linie darunter: In einer
   dichten Liste ist der Abstand allein zu schwach, um zu trennen. Die Linie
   nimmt `currentColor` und damit denselben Ton — eine zweite Farbangabe
   liefe ihm bei jeder Änderung nach. */
.leiste__gruppe {
  margin: 10px 12px 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ton-app);
}

/* Enge Zeilen: Die Liste führt achtundvierzig Vorlagen und soll möglichst
   viele auf einmal zeigen. Der Name steht links, das Menü rechts — daher ein
   Flexkasten, und rechts weniger Polster, weil es der Knopf mitbringt. */
.leiste__zeile {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 12px;
  cursor: pointer;
}

/* Was nicht in die Zeile passt, endet mit einer Ellipse und bricht nicht um:
   In einer Liste aus achtundvierzig Zeilen zählt, dass alle gleich hoch sind
   und die Namen an derselben Stelle beginnen. Der **ganze** Name steht im
   Mouseover der Zeile — samt Gruppenkürzel, das die Liste sonst nur in ihrer
   Überschrift trägt.

   `min-width: 0` gehört dazu: Ein Flexkind schrumpft von sich aus nicht unter
   seinen Inhalt, und dann käme `text-overflow` nie zum Zug. */
.leiste__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.leiste__zeile:hover { background: var(--zeile-ueber); }

/* Der Balken links trägt den Ton der Anwendung — er zeigt die Auswahl, ohne
   die Zeile einzufärben. */
.leiste__zeile--gewaehlt {
  background: var(--zeile-gewaehlt);
  box-shadow: inset 3px 0 0 var(--ton-app);
  font-weight: 600;
}

/* ---------------------------------------- Das Menü an der Zeile */

/* Drei Punkte rechts in jeder Zeile; wer sie überfährt, bekommt Umbenennen,
   Kopieren und Löschen. Sie stehen gedämpft da und nicht erst beim
   Überfahren der Zeile: Ein Knopf, der nur erscheint, wenn man schon auf ihm
   steht, wird nicht gefunden. */
.leiste__mehr {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-leise);
  cursor: pointer;
  opacity: 0.4;
}

.leiste__zeile:hover .leiste__mehr,
.leiste__zeile--gewaehlt .leiste__mehr,
.leiste__mehr--offen { opacity: 1; }

.leiste__mehr:hover { background: var(--zeile-gewaehlt); color: var(--text); }

/* Das Zeichen ist eine Maske wie alle anderen — nur seine Zeichnung steht
   hier und nicht in `gemeinsam/bausteine.css`: Bisher braucht sie allein
   diese Liste, und eine Zeile dort zöge die Neuveröffentlichung aller acht
   Anwendungen nach sich. Braucht sie eine zweite, wandert sie hinüber. */
.leiste__mehr .ikon { width: 16px; height: 16px; }

.ikon[data-ikon="mehr"] { --zeichnung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='5.5' r='1.9' fill='black'/><circle cx='12' cy='12' r='1.9' fill='black'/><circle cx='12' cy='18.5' r='1.9' fill='black'/></svg>"); }

/* Das Menü steht mit `position: fixed` und liegt **außerhalb** der Liste:
   Die rollt, und was in ihr liegt, schnitte sie an ihrem unteren Rand ab —
   gerade die letzte Zeile hätte kein Menü mehr. Gestellt wird es zur
   Laufzeit an den Knopf, der es gerufen hat. */
.leiste__menue {
  position: fixed;
  z-index: 30;
  min-width: 168px;
  padding: 4px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--flaeche);
  box-shadow: var(--schatten-schwebend);
}

.leiste__eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leiste__eintrag:hover,
.leiste__eintrag:focus-visible { background: var(--zeile-ueber); }

/* Löschen ist rot wie im ganzen Haus — der Text, nicht die Fläche. */
.leiste__eintrag--gefahr { color: var(--fehler); }

/* Das Kürzel steht rechts daneben: Wer das Menü zweimal gebraucht hat, merkt
   sich die Taste und braucht es nicht mehr. */
.leiste__kuerzel {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-leise);
}

/* Die Umbenennung an ihrem Platz — das Feld füllt die Zeile aus, damit der
   Name so breit dasteht, wie er nachher in der Liste steht. */
.leiste__eingabe {
  width: 100%;
  padding: 2px 4px;
  border: 1px solid var(--primaer);
  border-radius: 4px;
  background: var(--eingabe-grund);
  color: var(--text);
  font: inherit;
}

.leiste__zahl {
  margin: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--linie);
  font-size: 11px;
  color: var(--text-leise);
}

/* Eingeklappt bleibt von der Leiste ein Streifen, der als Ganzes der Knopf
   » ist — dort, wo die Liste war, und dort, wo man sie wieder sucht. Offen
   steht der Streifen nicht da; eingeklappt steht nur er da. */
.leiste__streifen { display: none; }
.leiste--zu > :not(.leiste__streifen) { display: none; }
.leiste--zu > .leiste__streifen {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text-leise);
  cursor: pointer;
}
.leiste__streifen:hover { background: var(--zeile-ueber); color: var(--primaer); }
.leiste__streifen:focus-visible { outline: 2px solid var(--primaer); outline-offset: -2px; }

/* Die Spalte schrumpft auf die Breite des Streifens; ihr Name bleibt, und die
   Felderzeile spannt weiter über die beiden anderen. */
.werkstatt:has(.leiste--zu) { --leiste-breit: 36px; }

/* Untereinander — auf schmalem Fenster — ist der Streifen eine Zeile, und das
   » steht links, wo die Liste beginnt. */
@media (max-width: 900px) {
  .leiste--zu > .leiste__streifen { justify-content: flex-start; padding: 8px 12px; }
}

/* --------------------------------------------------------- Die Werkbank */

.werkbank {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--linie);
  overflow: hidden;
}

/* `--farbe` ist der Griff, mit dem ein Abschnitt seinen Ton an die Bausteine
   in ihm weiterreicht. Er **muss** hier gesetzt werden: `.schalter--an` in
   `gemeinsam/bausteine.css` greift ihn ohne Ersatzwert ab, und ohne ihn bleibt
   die Lampe des eingeschalteten Schalters ohne Hintergrund — sichtbar war der
   Schalter dann noch, seine Lampe nicht mehr. Der Ton ist der der Anwendung:
   Die Felder gehören zur Vorlage, und die ist deren Sachgebiet. */
.felder {
  --farbe: var(--ton-app);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linie);
}

.editor { display: flex; flex: 1; min-height: 0; }

.editor__leer {
  margin: 0;
  padding: 24px 16px;
  max-width: 46ch;
  color: var(--text-leise);
}

/* Das Textfeld füllt seine Spalte aus. Die Schrift ist die feste: Im Dialekt
   zählen Leerzeichen — zwei davon sind eine Unterliste —, und in einer
   Proportionalschrift sieht man sie nicht. */
.editor__feld {
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: var(--eingabe-grund);
  color: inherit;
  font: 14px/1.6 var(--schrift-fest);
  resize: none;
}

.editor__feld:focus { outline: 2px solid var(--primaer); outline-offset: -2px; }

/* ------------------------------------------------------------ CodeMirror */

/* CodeMirror bringt seine Gestaltung als eingespritztes CSS mit — die
   Ausnahme von der Regel, dass Farben und Maße in der Tafel stehen.
   Überschrieben wird nur, was sichtbar aus dem Rahmen fällt: Grund, Schrift
   und die Leiste mit den Zeilennummern. So folgt der Editor der dunklen
   Fassung, ohne dass ein zweites Farbschema zu pflegen wäre. */
.editor__cm { flex: 1; min-height: 0; display: flex; }

.editor__cm .cm-editor {
  flex: 1;
  min-height: 0;
  background: var(--eingabe-grund);
  color: var(--text);
  font: 14px/1.6 var(--schrift-fest);
}

.editor__cm .cm-editor.cm-focused { outline: 2px solid var(--primaer); outline-offset: -2px; }
.editor__cm .cm-scroller { font: inherit; }
.editor__cm .cm-content { padding: 12px 0; caret-color: var(--text); }

.editor__cm .cm-gutters {
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  color: var(--text-leise);
}

.editor__cm .cm-activeLine,
.editor__cm .cm-activeLineGutter { background: var(--zeile-ueber); }

/* Die Auswahl darf leuchten — sie ist immer nur ein Stück Text und nie eine
   Fläche über die ganze Spalte. */
.editor__cm .cm-selectionBackground,
.editor__cm .cm-focused .cm-selectionBackground,
.editor__cm .cm-content ::selection { background: var(--primaer); color: var(--auf-farbe); }

/* Die Anzeige des Vim-Modus sitzt am Fuß des Editors. */
.editor__cm .cm-vim-panel {
  background: var(--flaeche);
  color: var(--text-leise);
  border-top: 1px solid var(--linie);
  font: 12px/1.4 var(--schrift-fest);
}

/* -------------------------------------------- Der Dialekt im Editorfenster

   Die Auszeichnungen sind zu sehen, **und ihre Marker bleiben stehen**: Aus
   `**fett**` wird fetter Text, dessen Sterne blass daneben stehen. Die
   Schrift bleibt die feste — im Dialekt zählen Leerzeichen, und eine
   Proportionalschrift verbärge sie.

   Die Farben kommen aus `gemeinsam/tafel.css` und werden hier nur benannt.
   So folgen sie der dunklen Fassung von selbst; ein `#rrggbb` an dieser
   Stelle wäre in einer der beiden Tafeln unlesbar. */

.editor__cm .dialekt-fett { font-weight: 700; }
.editor__cm .dialekt-kursiv { font-style: italic; }
.editor__cm .dialekt-unterstrichen { text-decoration: underline; }

/* Rot ist die Farbe, die die Vorlage selbst führt — dieselbe, die die
   Vorschau daneben zeigt. */
.editor__cm .dialekt-rot { color: var(--ton-rot); }

/* Der Platzhalter in Petrol: Er ist kein Text, sondern eine Lücke, die das
   Aktensystem später füllt. Wer sich vertippt — Kleinbuchstaben, eine fehlende
   Klammer —, sieht es daran, dass die Farbe ausbleibt. */
.editor__cm .dialekt-platzhalter { color: var(--ton-petrol); }

/* Das geschützte Leerzeichen ist im Text unsichtbar; als Tilde soll man es
   finden können. */
.editor__cm .dialekt-schutz { color: var(--ton-ocker); font-weight: 600; }

/* Listenzeichen und das Mittig-Zeichen am Zeilenanfang: Struktur, nicht Text. */
.editor__cm .dialekt-block { color: var(--ton-blau); font-weight: 600; }

/* Die Marker selbst — blass, aber in der Farbe und Form dessen, was sie
   auszeichnen. `opacity` und nicht eine eigene Farbe: So bleibt ein roter
   Marker rot und ein fetter fett. */
.editor__cm .dialekt-marke { opacity: 0.45; }

/* ------------------------------------------------------------ Die Vorschau */

.vorschau {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: var(--grund);
}

/* Das Blatt zeigt, was gespeichert wird — deshalb sieht es aus wie Papier
   und nicht wie die Anwendung ringsum. Die Maße sind die einer
   Kurzverfügung: eine Spalte, in der zwei Sätze nebeneinander Platz haben. */
.vorschau__blatt {
  max-width: 70ch;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.vorschau__blatt--leer { display: none; }

/* Die Überschrift der Verfügung. Sie ist ein eigenes Feld und nicht Teil des
   Textes — die Linie darunter sagt das: Sie liest sich als Kopf des Blattes
   und nicht als erster Absatz. Größer als der Text, aber nicht viel: Es ist
   eine Aktenüberschrift und kein Titelblatt. */
.vorschau__titel {
  margin: 0 0 0.9em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--linie);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/* Der Inhalt der Vorschau ist das HTML des Aktensystems und trägt keine
   Klassen: Absätze, Listen, `b`, `i`, `u` und Farbe. Gestaltet wird deshalb
   über die Elemente — der einzige Ort in diesem Haus, an dem das richtig ist. */
.vorschau__inhalt > :first-child { margin-top: 0; }
.vorschau__inhalt > :last-child { margin-bottom: 0; }
.vorschau__blatt p { margin: 0 0 0.8em; }
.vorschau__blatt ul,
.vorschau__blatt ol { margin: 0 0 0.8em; padding-left: 1.6em; }
.vorschau__blatt li { margin: 0.15em 0; }

/* -------------------------------------------------------------- Der Dialekt
   in der Hilfe: Die Tabelle zeigt die Schreibweise neben ihrer Wirkung, und
   die linke Spalte ist Quelltext. */
.hilfe__tabelle code { font-family: var(--schrift-fest); }