/* =====================================================================
   MyPrompts – Darstellung des gerenderten Markdown (Lesemodus).
   Alles ist auf ".mpl-md" begrenzt, damit es die Oberfläche nicht beeinflusst.
   Enthält außerdem ein schlankes, eigenes highlight.js-Lichtthema.
   ===================================================================== */

.mpl-md {
  font-size: var(--mpl-fs-md);
  line-height: 1.7;
  color: var(--mpl-ink);
  overflow-wrap: break-word;
  word-break: break-word;
}
.mpl-md > *:first-child { margin-top: 0; }
.mpl-md > *:last-child { margin-bottom: 0; }

/* Überschriften */
.mpl-md h1, .mpl-md h2, .mpl-md h3, .mpl-md h4, .mpl-md h5, .mpl-md h6 {
  font-weight: 650; line-height: 1.3; margin: 1.6em 0 0.6em; scroll-margin-top: 1rem;
}
.mpl-md h1 { font-size: 1.6rem; letter-spacing: -0.01em; }
.mpl-md h2 { font-size: 1.35rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--mpl-border); }
.mpl-md h3 { font-size: 1.15rem; }
.mpl-md h4 { font-size: 1rem; }
.mpl-md h5 { font-size: 0.9rem; }
.mpl-md h6 { font-size: 0.85rem; color: var(--mpl-ink-soft); }
.mpl-md .mpl-anchor { color: var(--mpl-ink-faint); text-decoration: none; margin-left: 0.3em; opacity: 0; font-weight: 400; }
.mpl-md h1:hover .mpl-anchor, .mpl-md h2:hover .mpl-anchor, .mpl-md h3:hover .mpl-anchor,
.mpl-md h4:hover .mpl-anchor { opacity: 1; }

.mpl-md p { margin: 0 0 1em; }
.mpl-md a { color: var(--mpl-primary); text-decoration: underline; text-underline-offset: 2px; }
.mpl-md a:hover { color: var(--mpl-primary-hover); }
.mpl-md strong { font-weight: 680; }
.mpl-md mark { background: #fff3bf; color: inherit; padding: 0 0.15em; border-radius: 3px; }
.mpl-md del { color: var(--mpl-ink-faint); }
.mpl-md hr { border: 0; border-top: 1px solid var(--mpl-border); margin: 1.8em 0; }
.mpl-md sub, .mpl-md sup { font-size: 0.75em; }

/* Listen */
.mpl-md ul, .mpl-md ol { margin: 0 0 1em; padding-left: 1.5em; }
.mpl-md li { margin: 0.3em 0; }
.mpl-md li > ul, .mpl-md li > ol { margin: 0.3em 0; }
.mpl-md li::marker { color: var(--mpl-ink-soft); }
.mpl-md .mpl-tasklist { list-style: none; padding-left: 0.2em; }
.mpl-md .mpl-tasklist li { display: flex; align-items: flex-start; gap: 0.5em; }
.mpl-md .mpl-tasklist input[type="checkbox"] { margin-top: 0.3em; width: 15px; height: 15px; accent-color: var(--mpl-primary); }

/* Definitionslisten */
.mpl-md dl { margin: 0 0 1em; }
.mpl-md dt { font-weight: 650; margin-top: 0.6em; }
.mpl-md dd { margin: 0 0 0.3em 1.2em; color: var(--mpl-ink-soft); }

/* Abkürzungen */
.mpl-md abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Zitate */
.mpl-md blockquote {
  margin: 0 0 1em; padding: 0.3em 1em;
  border-left: 3px solid var(--mpl-border-strong);
  color: var(--mpl-ink-soft);
}
.mpl-md blockquote > *:last-child { margin-bottom: 0; }

/* GitHub-Alerts / Callouts */
.mpl-md .mpl-alert {
  margin: 0 0 1em; padding: 0.75em 1em 0.75em 1em;
  border: 1px solid var(--mpl-border); border-left-width: 4px;
  border-radius: var(--mpl-radius-sm); background: var(--mpl-surface-2);
}
.mpl-md .mpl-alert > *:last-child { margin-bottom: 0; }
.mpl-md .mpl-alert__title { display: flex; align-items: center; gap: 0.4em; font-weight: 650; margin-bottom: 0.4em; }
.mpl-md .mpl-alert__title svg { width: 1.1em; height: 1.1em; }
.mpl-md .mpl-alert--note { border-left-color: #2563a8; } .mpl-md .mpl-alert--note .mpl-alert__title { color: #2563a8; }
.mpl-md .mpl-alert--tip { border-left-color: #11776a; } .mpl-md .mpl-alert--tip .mpl-alert__title { color: #11776a; }
.mpl-md .mpl-alert--important { border-left-color: #7c4dbf; } .mpl-md .mpl-alert--important .mpl-alert__title { color: #7c4dbf; }
.mpl-md .mpl-alert--warning { border-left-color: #c48a1a; } .mpl-md .mpl-alert--warning .mpl-alert__title { color: #9a6d11; }
.mpl-md .mpl-alert--caution { border-left-color: #b4323a; } .mpl-md .mpl-alert--caution .mpl-alert__title { color: #b4323a; }

/* Tabellen */
.mpl-md .mpl-table-wrap { overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--mpl-border); border-radius: var(--mpl-radius-sm); -webkit-overflow-scrolling: touch; }
.mpl-md table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.mpl-md th, .mpl-md td { padding: 0.5em 0.75em; border: 1px solid var(--mpl-border); text-align: left; vertical-align: top; }
.mpl-md th { background: var(--mpl-surface-2); font-weight: 650; white-space: nowrap; }
.mpl-md tbody tr:nth-child(even) { background: var(--mpl-surface-2); }

/* Bilder */
.mpl-md img { max-width: 100%; height: auto; border-radius: var(--mpl-radius-sm); }
.mpl-md .mpl-img-broken {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--mpl-fs-sm); color: var(--mpl-ink-faint);
  background: var(--mpl-surface-2); border: 1px dashed var(--mpl-border-strong);
  border-radius: var(--mpl-radius-sm); padding: 0.4em 0.7em;
}
.mpl-md figure { margin: 0 0 1em; }
.mpl-md figcaption { font-size: var(--mpl-fs-sm); color: var(--mpl-ink-faint); text-align: center; margin-top: 0.4em; }

/* Inline-Code */
.mpl-md :not(pre) > code {
  font-family: var(--mpl-font-mono); font-size: 0.86em;
  background: var(--mpl-surface-3); color: #8a3b2e;
  padding: 0.15em 0.4em; border-radius: 4px; word-break: break-word;
}

/* Codeblöcke */
.mpl-md .mpl-code {
  position: relative; margin: 0 0 1em;
  border: 1px solid var(--mpl-border); border-radius: var(--mpl-radius-sm);
  background: #1b2230; overflow: hidden;
}
.mpl-md .mpl-code__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35em 0.5em 0.35em 0.85em;
  background: #161c28; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mpl-md .mpl-code__lang { font-size: var(--mpl-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: #8b97ad; font-weight: 600; }
.mpl-md .mpl-code__copy {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--mpl-fs-xs); font-weight: 550; color: #cdd5e3;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px; padding: 0.25em 0.55em; cursor: pointer;
}
.mpl-md .mpl-code__copy:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.mpl-md .mpl-code__copy svg { width: 0.95em; height: 0.95em; }
.mpl-md .mpl-code pre { margin: 0; padding: 0.85em 1em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mpl-md .mpl-code code {
  font-family: var(--mpl-font-mono); font-size: 0.85rem; line-height: 1.6;
  color: #e6ebf4; background: none; padding: 0; tab-size: 2;
}
/* optionale Zeilennummern */
.mpl-md .mpl-code--numbered code { counter-reset: mpl-line; }
.mpl-md .mpl-code--numbered .mpl-line { counter-increment: mpl-line; display: inline-block; width: 100%; }
.mpl-md .mpl-code--numbered .mpl-line::before {
  content: counter(mpl-line); display: inline-block; width: 2.5em; margin-right: 1em;
  text-align: right; color: #55617a; user-select: none;
}

/* KaTeX */
.mpl-md .katex { font-size: 1.05em; }
.mpl-md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.5em 0; margin: 0 0 1em; }
.mpl-md .mpl-math-error {
  font-family: var(--mpl-font-mono); font-size: 0.85rem;
  background: var(--mpl-danger-soft); color: var(--mpl-danger);
  border: 1px solid #edc7c9; border-radius: var(--mpl-radius-sm);
  padding: 0.4em 0.7em; white-space: pre-wrap; word-break: break-word;
}
.mpl-md .mpl-math-error--block { display: block; margin: 0 0 1em; }

/* Mermaid */
.mpl-md .mpl-mermaid { margin: 0 0 1em; text-align: center; overflow-x: auto; }
.mpl-md .mpl-mermaid svg { max-width: 100%; height: auto; }
.mpl-md .mpl-mermaid-wrap { position: relative; }
.mpl-md .mpl-mermaid-fallback { /* bei Fehler: Originalcode als Codeblock sichtbar */ }

/* Fußnoten */
.mpl-md .footnotes { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--mpl-border); font-size: 0.9rem; color: var(--mpl-ink-soft); }
.mpl-md .footnotes ol { padding-left: 1.3em; }
.mpl-md [id^="footnote-ref"], .mpl-md .footnote-ref { text-decoration: none; }
.mpl-md sup a { font-size: 0.75em; padding: 0 0.1em; }

/* YAML-Frontmatter */
.mpl-md .mpl-frontmatter {
  margin: 0 0 1.2em; border: 1px solid var(--mpl-border); border-radius: var(--mpl-radius-sm);
  background: var(--mpl-surface-2); overflow: hidden;
}
.mpl-md .mpl-frontmatter summary { padding: 0.5em 0.85em; font-size: var(--mpl-fs-sm); font-weight: 600; color: var(--mpl-ink-soft); cursor: pointer; }
.mpl-md .mpl-frontmatter pre { margin: 0; padding: 0.75em 0.85em; border-top: 1px solid var(--mpl-border); overflow-x: auto; }
.mpl-md .mpl-frontmatter code { font-family: var(--mpl-font-mono); font-size: 0.82rem; color: var(--mpl-ink); }

/* Originalansicht (Quelltext) */
.mpl-source {
  font-family: var(--mpl-font-mono); font-size: 0.85rem; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word; tab-size: 2;
  color: var(--mpl-ink); margin: 0;
}

/* =====================================================================
   Schlankes highlight.js-Lichtthema (auf dunklem Codeblock-Hintergrund).
   Nur die gängigen Token-Klassen; unbekannte bleiben in der Standardfarbe.
   ===================================================================== */
.mpl-md .hljs { color: #e6ebf4; background: transparent; }
.mpl-md .hljs-comment, .mpl-md .hljs-quote { color: #7a8699; font-style: italic; }
.mpl-md .hljs-keyword, .mpl-md .hljs-selector-tag, .mpl-md .hljs-type, .mpl-md .hljs-name { color: #7db3ff; }
.mpl-md .hljs-string, .mpl-md .hljs-attr, .mpl-md .hljs-regexp, .mpl-md .hljs-addition { color: #8fd98a; }
.mpl-md .hljs-number, .mpl-md .hljs-literal, .mpl-md .hljs-variable, .mpl-md .hljs-template-variable { color: #f0a868; }
.mpl-md .hljs-title, .mpl-md .hljs-title.function_, .mpl-md .hljs-section { color: #e2c08d; }
.mpl-md .hljs-attribute, .mpl-md .hljs-built_in, .mpl-md .hljs-class .hljs-title { color: #6ad0c2; }
.mpl-md .hljs-symbol, .mpl-md .hljs-bullet, .mpl-md .hljs-link, .mpl-md .hljs-meta { color: #c3a6ff; }
.mpl-md .hljs-deletion { color: #ff9a9a; }
.mpl-md .hljs-emphasis { font-style: italic; }
.mpl-md .hljs-strong { font-weight: 700; }
.mpl-md .hljs-tag { color: #8b97ad; }