/* Fit Mermaid diagrams to the chapter content width.
 * useMaxWidth:true in mermaid-init.js scales the SVG; CSS clamps as a
 * belt-and-suspenders so page-level horizontal overflow never appears.
 * overflow-x:auto remains only as a fallback for pathological diagrams.
 */
.mermaid {
    overflow-x: auto;
    margin: 1.2em 0;
    text-align: center;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.mermaid svg {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .mermaid {
        text-align: left;
    }
}