/* ===== MarkdownView =====
   Formatierter Text aus Markdig. Syntaxfarben, Kopierknöpfe, Formeln und Diagramme setzt markdown-view.js.
   Die Schriftgröße erbt der Text, außer Size ist gesetzt. Festbreitenschrift für Code kommt aus reset.css.
   ======================== */

.oo-markdown {
    line-height: 1.65;
    overflow-wrap: anywhere;
    /* Der Inhalt wird bei jedem gestreamten Stück neu aufgebaut; als Scroll-Anker ließe er die Ansicht springen. */
    overflow-anchor: none;
}

.oo-markdown.oo-size-xs { font-size: var(--oo-font-size-xs); }
.oo-markdown.oo-size-sm { font-size: var(--oo-font-size-sm); }
.oo-markdown.oo-size-md { font-size: var(--oo-font-size-md); }
.oo-markdown.oo-size-lg { font-size: var(--oo-font-size-lg); }
.oo-markdown.oo-size-xl { font-size: var(--oo-font-size-xl); }

/* ═════ Fließtext (oo-prose): gemeinsam für die Anzeige (.oo-markdown__content) und die Schreibfläche des MarkdownEditors,
   damit der Editor aussieht wie das Ergebnis. reset.css nimmt Überschriften und Absätzen die Abstände; hier kommen sie zurück.
   Nur Abstände, Überschriften, Listen, Zitate und Markierungen – Tabellen und Code gestaltet im Editor Jodit selbst. ═════ */

.oo-prose {
    line-height: 1.65;
}

/* ── Abstände: jeder Block oben, der erste nicht. Auf oberster Ebene gilt das für alles, auch eigene Container (:::name). ── */

.oo-prose > *,
.oo-prose :is(p, ul, ol, dl, blockquote, pre, table, img, video, hr, .oo-code-block-wrapper, .math) {
    margin: var(--oo-space-3) 0 0;
}

.oo-prose :is(h1, h2, h3, h4, h5, h6) {
    margin: var(--oo-space-6) 0 0;
    line-height: 1.3;
    font-weight: 600;
}

.oo-prose > :first-child,
.oo-prose :is(blockquote, li) > :first-child {
    margin-top: 0;
}

.oo-prose h1 { font-size: 1.5em; }
.oo-prose h2 { font-size: 1.25em; }
.oo-prose h3 { font-size: 1.125em; }
.oo-prose :is(h4, h5, h6) { font-size: 1em; }

/* ── Listen ── */

.oo-prose :is(ul, ol) {
    padding-left: var(--oo-space-6);
}

.oo-prose li + li,
.oo-prose li > :is(ul, ol) {
    margin-top: var(--oo-space-1);
}

/* ── Zitate: abgesetzt und gedämpft ── */

.oo-prose blockquote {
    padding-left: var(--oo-space-4);
    border-left: 3px solid var(--oo-color-border-strong);
    color: var(--oo-color-text-subtle);
}

.oo-prose mark {
    background: var(--oo-warning-lighter);
    border-radius: var(--oo-radius-sm);
}

/* ═════ Nur MarkdownView ═════ */

/* Aufgaben ohne Aufzählungszeichen, die Checkbox steht an seiner Stelle. Nur an den Aufgaben selbst: Markdig setzt
   contains-task-list an die ganze Liste, auch wenn darin gewöhnliche Punkte stehen. */
.oo-markdown .task-list-item {
    list-style: none;
}

/* Markdig gibt der Checkbox keine eigene Klasse. Nach links gerückt, damit der Text bündig mit gewöhnlichen Punkten steht. */
.oo-markdown .task-list-item input[type="checkbox"] {
    margin: 0 var(--oo-space-2) 0 calc(-1 * var(--oo-space-5));
}

.oo-markdown dt {
    font-weight: 600;
}

.oo-markdown dd {
    margin-left: var(--oo-space-6);
}

/* ── Tabellen scrollen seitlich, statt die Umgebung zu verbreitern; Zellen brechen nur zwischen Wörtern um. ── */

.oo-markdown table {
    display: block;
    overflow-x: auto;
    font-size: 0.875em;
}

.oo-markdown :is(th, td) {
    overflow-wrap: normal;
    min-width: 6rem;
    padding: var(--oo-space-2) var(--oo-space-3);
    border: var(--oo-border-width) solid var(--oo-color-border);
}

.oo-markdown th {
    background: var(--oo-color-surface);
    font-weight: 600;
}

/* Schmal: schmalere Spalten, damit eine vierspaltige Tabelle am Handy ohne seitliches Scrollen passt. Die Container-Abfrage
   gilt, wenn die Anwendung einen Container setzt (etwa ein Panel neben einer Anwendung), sonst die Fensterbreite. */
@container (max-width: 48rem) {
    .oo-markdown :is(th, td) {
        min-width: 5rem;
    }
}

@media (max-width: 48rem) {
    .oo-markdown :is(th, td) {
        min-width: 5rem;
    }
}

/* ── Code: kleiner als der Text, einmal, nicht noch einmal für den Code innerhalb eines Blocks. ── */

.oo-markdown :is(pre, code) {
    font-size: 0.875em;
}

.oo-markdown pre {
    line-height: 1.5;
}

/* Wie nach dem Färben durch Highlight.js (code.hljs), damit der Block beim Färben seine Höhe behält. */
.oo-markdown pre code {
    display: block;
    overflow-x: auto;
    font-size: inherit;
}

.oo-markdown .oo-code-block-wrapper pre {
    margin: 0;
}

.oo-markdown pre.mermaid {
    display: flex;
    justify-content: center;
    background: transparent;
    border: none;
}

/* ── Bilder und Videos ── */

.oo-markdown :is(img, video) {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--oo-radius-md);
}

/* Bilder öffnen sich beim Klick groß (EnableImageLightbox), außer sie stehen in einem Link. */
.oo-markdown--lightbox img:not(a img) {
    cursor: zoom-in;
}

/* ── Übrige Elemente ── */

.oo-markdown hr {
    margin: var(--oo-space-6) 0;
    border: none;
    border-top: var(--oo-border-width) solid var(--oo-color-border);
}

.oo-markdown .footnotes {
    margin-top: var(--oo-space-6);
    font-size: 0.875em;
    color: var(--oo-color-text-subtle);
}

.oo-markdown .footnotes hr {
    display: none;
}

/* Ohne Maus: Chrome unter Android blendet den seitlichen Scrollbalken eines Codeblocks nicht aus; er lag dauerhaft über der
   letzten Zeile. Gewischt wird ohne ihn, und die abgeschnittene Zeile zeigt, dass es weitergeht. */
@media (hover: none) {
    .oo-markdown pre code {
        scrollbar-width: none;
    }
}