/* rhyswtf-mermaid: Mermaid diagrams drawn on the server (inline SVG).

   The SVG's colours are these variables (each with a Gruvbox-light
   fallback inside the SVG), worked out from the palette slots every app
   has (see rhyswtf-apps' palettes.css), so a diagram follows light/dark
   and the chosen palette without being drawn again.

   An app sets one thing, where its page background isn't --gruvbox-bg0:

     .mermaid { --mermaid-page: var(--color-bg); }

   Surfaces are the page's background with a little ink mixed in, so they
   stand off it in both schemes; lines and text are the ink's own. */

.mermaid {
    --mermaid-page: var(--gruvbox-bg0, #fbf1c7);
    --mermaid-ink: var(--gruvbox-fg1, #3c3836);

    --mermaid-canvas: var(--mermaid-page);
    --mermaid-surface: color-mix(in srgb, var(--mermaid-ink) 8%, var(--mermaid-page));
    --mermaid-surface-alt: color-mix(in srgb, var(--mermaid-ink) 13%, var(--mermaid-page));
    --mermaid-surface-muted: color-mix(in srgb, var(--mermaid-ink) 20%, var(--mermaid-page));
    --mermaid-text: var(--mermaid-ink);
    --mermaid-subtle-text: var(--gruvbox-fg3, #665c54);
    --mermaid-border: var(--gruvbox-fg4, #7c6f64);
    --mermaid-line: var(--gruvbox-fg2, #504945);
    --mermaid-edge-label-background: var(--mermaid-page);
    --mermaid-cluster-background: color-mix(in srgb, var(--mermaid-ink) 4%, var(--mermaid-page));
    --mermaid-cluster-border: var(--gruvbox-bg3, #bdae93);
    --mermaid-note-background: color-mix(in srgb, var(--gruvbox-yellow, #d79921) 22%, var(--mermaid-page));
    --mermaid-note-border: var(--gruvbox-yellow-faded, #b57614);
    --mermaid-note-text: var(--mermaid-ink);
    --mermaid-actor-background: var(--mermaid-surface-alt);
    --mermaid-actor-border: var(--mermaid-border);
    --mermaid-actor-text: var(--mermaid-ink);
    --mermaid-activation-background: var(--mermaid-surface-muted);
    --mermaid-activation-border: var(--mermaid-border);
    --mermaid-error: var(--gruvbox-red-faded, #9d0006);
    --mermaid-warning: var(--gruvbox-orange-faded, #af3a03);
    --mermaid-success: var(--gruvbox-green-faded, #79740e);
    /* Pie slices, gantt sections, mind-map branches… */
    --mermaid-series-0: var(--gruvbox-blue-faded, #076678);
    --mermaid-series-1: var(--gruvbox-aqua-faded, #427b58);
    --mermaid-series-2: var(--gruvbox-green-faded, #79740e);
    --mermaid-series-3: var(--gruvbox-yellow-faded, #b57614);
    --mermaid-series-4: var(--gruvbox-orange-faded, #af3a03);
    --mermaid-series-5: var(--gruvbox-red-faded, #9d0006);
    --mermaid-series-6: var(--gruvbox-purple-faded, #8f3f71);
    --mermaid-series-7: var(--gruvbox-gray, #928374);

    margin: 1.25rem 0;
}

figure.mermaid {
    /* A wide diagram on a narrow screen shrinks to fit, down to 60% of
       its size (its own stylesheet sets that min-width), then scrolls
       sideways rather than shrinking past reading. */
    overflow-x: auto;
    padding: 0;
}

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

.mermaid__source {
    margin-top: 0.35rem;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 0.8rem;
    color: var(--gruvbox-fg3, #665c54);
}

.mermaid__source > summary {
    cursor: pointer;
    width: fit-content;
}

.mermaid__source > pre {
    margin-top: 0.4rem;
}

.mermaid__note {
    margin: 0 0 0.35rem;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 0.85rem;
    color: var(--gruvbox-fg3, #665c54);
}