/* ============================================================
   richtext.css — FASE 13.6 (WYSIWYG offline, quiz)
   ============================================================
   Gaya pembaca untuk konten rich text hasil editor guru
   (dirender lewat App\Core\RichText), termasuk dukungan
   rumus KaTeX, gambar soal, dan blok <pre> (rumus tertunda).
   ============================================================ */

/* Ikon Material Symbols via <span class="msym">nama</span> —
   dipakai halaman yang tidak memuat kelas global layout. */
.msym {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Pembaca rich text (soal, hasil, koreksi) ---------- */
.richtext { line-height: 1.65; overflow-wrap: break-word; }
.richtext p { margin-bottom: .6rem; }
.richtext p:last-child { margin-bottom: 0; }
.richtext h2, .richtext h3, .richtext h4 { margin: .9rem 0 .4rem; font-weight: 700; }
.richtext ul, .richtext ol { padding-left: 1.5rem; margin-bottom: .6rem; }
.richtext img {
    max-width: 100%;
    height: auto;
    max-height: 320px;
    border-radius: .5rem;
    margin: .5rem 0;
}
.richtext blockquote {
    border-left: 4px solid var(--primary, #1d4ed8);
    padding-left: .75rem;
    color: #475569;
    margin: .5rem 0;
}
.richtext a { color: var(--primary, #1d4ed8); text-decoration: underline; }
.richtext pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: .5rem;
    padding: .75rem 1rem;
    overflow-x: auto;
    font-size: .95em;
    margin: .5rem 0;
}
.richtext code { background: rgba(15, 23, 42, .06); border-radius: .25rem; padding: .1rem .3rem; }
.richtext pre code { background: transparent; padding: 0; }

/* Rumus inline/inline-block dirender KaTeX */
.richtext .katex { font-size: 1.05em; }
.richtext .katex-display { margin: .6rem 0; overflow-x: auto; overflow-y: hidden; }

/* Blok rumus yang belum ter-render (fallback JS mati):
   isi <pre> adalah sumber LaTeX — tampilkan sebagai kode agar
   konten tetap terbaca, bukan hilang. */
.richtext pre[data-katex] {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
}
.richtext .katex-fallback { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }