/* Character Relationships (src/data/md/character-kin.md) — Mermaid flowcharts,
 * generated by create_character_kin_md.py as fenced ```mermaid code blocks and
 * rendered client-side by theme/family-tree.js.
 *
 * Mermaid bakes its colours into the rendered SVG at render time, so it can't
 * react to a live mdBook theme switch the way a CSS variable can. family-tree.js
 * renders each diagram twice (once per mermaid "theme") and this file toggles
 * which copy is visible — the same light/dark-pair trick toolbar.js uses for
 * the two logo images, applied to a generated SVG instead of a static one.
 */

.kin-mermaid {
    margin: 1.5rem 0;
    overflow-x: auto;
    max-width: 100%;
}

.kin-mermaid svg {
    display: block;
    margin: 0 auto;
}

.kin-mermaid-dark {
    display: none;
}

/* Dark surfaces: mdBook `coal`, `navy` and `ayu` — see graph.css. */
.coal .kin-mermaid-light,
.navy .kin-mermaid-light,
.ayu .kin-mermaid-light {
    display: none;
}

.coal .kin-mermaid-dark,
.navy .kin-mermaid-dark,
.ayu .kin-mermaid-dark {
    display: block;
}