/* Constrain Mermaid diagrams to their container (issue #19).
 * Inline SVGs have no width/height attributes; the natural width
 * is carried as an inline max-width style on the SVG root, so
 * width: 100% fills the container without upscaling small
 * diagrams, and the viewBox preserves the aspect ratio. */
figure.diagrams-mermaid {
    max-width: 100%;
    overflow-x: auto;
}

figure.diagrams-mermaid svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

figure.diagrams-mermaid img {
    display: block;
    max-width: 100%;
    height: auto;
}

div.diagrams-render-error {
    border: 4px solid red;
}

span.diagrams-title {
    display: block;
    background-color: darkred;
    color: white;
    font-style: bold;
}

span.diagrams-error-files {
    display: block;
    border: 1px dotted grey;
}

span.diagrams-error-input {
    display: block;
    background-color: lightgray;
}