/* Mermaid Diagrams */

.div-diagram-mermaid, .mermaid {
    position: relative;
    width: 100%;
    margin: var(--DM-margin-h) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    box-sizing: border-box;
    padding: var(--DM-margin-h);
    background-color: var(--BG-panel);
    border: 1px solid var(--BD-panel-l);
    border-radius: var(--DM-margin-q);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.div-diagram-mermaid svg, .mermaid svg, svg[id^=mermaid] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(65vh, 600px) !important;
    box-sizing: border-box;
    font-family: inherit !important;
    background-color: transparent !important;
}

/* Mermaid theme matching overrides */
svg[id^=mermaid] .node rect,
svg[id^=mermaid] .node circle,
svg[id^=mermaid] .node ellipse,
svg[id^=mermaid] .node polygon,
svg[id^=mermaid] .node path,
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node ellipse,
.mermaid svg .node polygon,
.mermaid svg .node path {
    fill: var(--BG-panel2) !important;
    stroke: var(--AC-trim) !important;
    stroke-width: 1.5px !important;
}

svg[id^=mermaid] .node .label,
svg[id^=mermaid] .node text,
svg[id^=mermaid] .node span,
svg[id^=mermaid] foreignObject span,
svg[id^=mermaid] foreignObject div,
.mermaid svg .node .label,
.mermaid svg .node text,
.mermaid svg .node span,
.mermaid svg foreignObject span,
.mermaid svg foreignObject div {
    color: var(--FG-base) !important;
    fill: var(--FG-base) !important;
    font-size: 0.9em !important;
}

/* Node labels: mermaid pre-measures label widths with the font available at
   render time, so on devices where the resolved font is wider (e.g. phones)
   the pre-computed lines overflow the shape. Force normal wrapping so the
   text re-wraps inside the shape -- same treatment that fixed edge labels */
svg[id^="mermaid"] .node foreignObject > div,
.mermaid svg .node foreignObject > div,
svg[id^="mermaid"] .node foreignObject span,
.mermaid svg .node foreignObject span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
    max-width: 12em !important;
}

svg[id^=mermaid] .cluster rect,
.mermaid svg .cluster rect {
    fill: var(--BG-base) !important;
    stroke: var(--BD-panel-l) !important;
    stroke-width: 1px !important;
    rx: 4px;
    ry: 4px;
}

svg[id^=mermaid] .cluster span,
svg[id^=mermaid] .cluster text,
.mermaid svg .cluster span,
.mermaid svg .cluster text {
    color: var(--FG-muted) !important;
    fill: var(--FG-muted) !important;
    font-weight: bold !important;
}

svg[id^=mermaid] .edgePath .path,
svg[id^=mermaid] .flowchart-link,
.mermaid svg .edgePath .path,
.mermaid svg .flowchart-link {
    stroke: var(--AC-trim) !important;
    stroke-width: 1.5px !important;
}

svg[id^=mermaid] marker path,
svg[id^=mermaid] marker,
.mermaid svg marker path,
.mermaid svg marker {
    fill: var(--AC-trim) !important;
    stroke: var(--AC-trim) !important;
}

/* Edge labels padding and styling */
svg[id^="mermaid"] .edgeLabel,
.mermaid svg .edgeLabel {
    color: var(--FG-base) !important;
    fill: var(--FG-base) !important;
}

svg[id^="mermaid"] .edgeLabel rect,
.mermaid svg .edgeLabel rect {
    fill: var(--BG-panel2) !important;
    stroke: var(--BD-panel-l) !important;
    stroke-width: 1px !important;
    rx: 4px !important;
    ry: 4px !important;
    opacity: 0.95 !important;
}

/* Reset nested elements inside edgeLabel to prevent duplicate padded boxes */
svg[id^="mermaid"] .edgeLabel span,
svg[id^="mermaid"] .edgeLabel p,
svg[id^="mermaid"] .edgeLabel div,
.mermaid svg .edgeLabel span,
.mermaid svg .edgeLabel p,
.mermaid svg .edgeLabel div {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Target central edge label container for padding and background */
svg[id^="mermaid"] .edgeLabel foreignObject > div,
.mermaid svg .edgeLabel foreignObject > div,
svg[id^="mermaid"] .edgeLabel text,
.mermaid svg .edgeLabel text {
    color: var(--FG-base) !important;
    fill: var(--FG-base) !important;
    padding: 3px 8px !important;
    display: inline-block !important;
    background-color: var(--BG-panel2) !important;
    border: 1px solid var(--BD-panel-l) !important;
    border-radius: 4px !important;
    font-size: 0.82em !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Sequence diagram styling */
svg[id^=mermaid] .actor,
.mermaid svg .actor {
    fill: var(--BG-panel2) !important;
    stroke: var(--AC-trim) !important;
}

svg[id^=mermaid] text.actor,
.mermaid svg text.actor {
    fill: var(--FG-base) !important;
    stroke: none !important;
}

svg[id^=mermaid] .actor-line,
.mermaid svg .actor-line {
    stroke: var(--BD-panel-l) !important;
}

svg[id^=mermaid] .messageLine0,
svg[id^=mermaid] .messageLine1,
.mermaid svg .messageLine0,
.mermaid svg .messageLine1 {
    stroke: var(--AC-trim) !important;
}

svg[id^=mermaid] .labelBox,
.mermaid svg .labelBox {
    fill: var(--BG-panel2) !important;
    stroke: var(--BD-panel-l) !important;
}

svg[id^=mermaid] .labelText,
svg[id^=mermaid] .loopText,
.mermaid svg .labelText,
.mermaid svg .loopText {
    fill: var(--FG-base) !important;
}

svg[id^=mermaid] .note,
.mermaid svg .note {
    fill: var(--BG-base) !important;
    stroke: var(--BD-panel-l) !important;
}

/* MathJax inside diagram labels: stop the label box clipping the bottom edge
   and keep equations centered within their shapes */
svg[id^="mermaid"] foreignObject,
.mermaid svg foreignObject {
    overflow: visible !important;
}

svg[id^="mermaid"] foreignObject > div,
.mermaid svg foreignObject > div,
svg[id^="mermaid"] mjx-container,
.mermaid svg mjx-container {
    text-align: center !important;
}

/* Neo-look shadows: mermaid hard-codes light-theme flood colors (white on
   non-redux themes), so derive the flood from the theme's muted color --
   reads as a soft shadow in light themes and a soft glow in dark ones */
svg[id^="mermaid"] feDropShadow,
.mermaid svg feDropShadow {
    flood-color: var(--FG-muted);
    flood-opacity: 0.35;
}