/*
 * page-text -- der Editor in der Maske der Seitentexte (F-76) und der fertige Text auf der
 * öffentlichen Seite.
 *
 * page-text-editor         der Rahmen um Werkzeugleiste und Schreibfläche; page-text-editor.js
 *                          legt ihn neben das versteckte Feld
 * page-text-editor__area   die Schreibfläche darin, Quill hängt seine eigenen Klassen dazu
 * page-text               der gepflegte Text auf Impressum und Datenschutz
 *
 * Quill bringt sein Aussehen selbst mit (`vendor/quill/quill.snow.css`): Leiste und Fläche
 * tragen dort je einen eigenen Rahmen mit eckigen Kanten. Hier steht nur, was beides zu
 * einem Feld zusammenzieht -- dieselben Farben und Radien wie bei jedem anderen Feld
 * (`components/field.css`), oben rund, unten rund, dazwischen eine Linie.
 */

.page-text-editor {
  display: flex;
  flex-direction: column;
}

.page-text-editor .ql-toolbar.ql-snow {
  border: var(--border-width) solid var(--color-border-strong);
  border-block-end: 0;
  border-start-start-radius: var(--radius-medium);
  border-start-end-radius: var(--radius-medium);
  background-color: var(--color-surface);
}

.page-text-editor .ql-container.ql-snow {
  border: var(--border-width) solid var(--color-border-strong);
  border-end-start-radius: var(--radius-medium);
  border-end-end-radius: var(--radius-medium);
  background-color: var(--color-surface);
  color: var(--color-text);
  /* Geschrieben wird in der Schrift der Anwendung, nicht in Quills eigener. */
  font-family: inherit;
  font-size: var(--font-size-base);
}

/* Wie ein Feld: Der Rahmen färbt sich, sobald jemand darin schreibt. */
.page-text-editor:focus-within .ql-toolbar.ql-snow,
.page-text-editor:focus-within .ql-container.ql-snow {
  border-color: var(--color-primary);
}

.page-text-editor .ql-editor {
  min-height: 18rem;
}

/* Die Zeichen der Werkzeugleiste kommen mit fester Farbe; im dunklen Modus wären sie
   sonst kaum zu sehen. */
.page-text-editor .ql-snow .ql-stroke {
  stroke: var(--color-text);
}

.page-text-editor .ql-snow .ql-fill {
  fill: var(--color-text);
}

.page-text-editor .ql-snow .ql-picker {
  color: var(--color-text);
}

.page-text-editor .ql-snow .ql-picker-options {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface);
}

/* ---------- Der Text auf der Seite ---------- */

/* Abstand zwischen den Absätzen wie in einem Fließtext; Listen rücken ein. */
.page-text > * + * {
  margin-block-start: var(--space-4);
}

.page-text ul,
.page-text ol {
  padding-inline-start: var(--space-5);
}

.page-text li + li {
  margin-block-start: var(--space-2);
}

.page-text blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
}