/*
 * doc-mermaid-finish.css — the fill of a diagram's boxes, the stroke of its lines and the canvas it
 * stands on (CH-REQ-20260929-A §11), and words kept clear of the lines they cross (§12). Corners are
 * the runtime's: finish.js rounds each rectangle box.
 *
 * The runtime (src/modules/markdown-engine/elements/mermaid/finish.js) marks the drawing
 * `data-fill` / `data-stroke` and the figure `data-diagram-canvas`; everything visual is here, so the
 * workspace, an exported page and /help draw the same diagram.
 *
 * Part of the diagram's frame, like doc-mermaid.css, and dark wherever the diagram is drawn dark
 * (`data-mermaid-scheme` or `data-doc-scheme`, as doc-mermaid-spectrum.css says). Every rule beats
 * Mermaid's own through `!important`, since Mermaid's <style> reaches its shapes by the
 * diagram's #id. Loaded after doc-mermaid-spectrum.css: an outline replaces Spectrum's tinted boxes by
 * matching their specificity and coming later.
 */

.doc-mermaid-viewer {
  --mermaid-canvas-line: rgba(15, 23, 42, 0.07);
  --mermaid-canvas-point: rgba(15, 23, 42, 0.18);
}

:root:is([data-mermaid-scheme='dark'], [data-doc-scheme='dark']) .doc-mermaid-viewer {
  --mermaid-canvas-line: rgba(255, 255, 255, 0.055);
  --mermaid-canvas-point: rgba(255, 255, 255, 0.15);
}

/* A sequence diagram's words sit across the lifelines between the participants they join; an edge in
   the canvas's colour, painted under each letter, keeps a lifeline from striking them through
   (CH-REQ-20260929-A §12). Mermaid gives them no stroke of their own. */
.doc-mermaid svg :is(text.messageText, text.loopText, text.sectionTitle) {
  paint-order: stroke fill !important;
  stroke: var(--mermaid-spectrum-ground, Canvas) !important;
  stroke-width: 4px !important;
  stroke-linejoin: round !important;
}

/* An edge's label sits on its line, and Mermaid gives it a half-see-through backing — a Hand-drawn line,
   different at every drawing, can run right behind the words. A group's title has no backing at all, and
   an edge into the group can cross it. A halo in the canvas's colour keeps both off the words, unseen on
   a fill of its own (§14). */
.doc-mermaid svg .labelBkg,
.doc-mermaid svg .cluster-label :is(span, p) {
  text-shadow: 0 0 1px var(--mermaid-spectrum-ground, Canvas), 0 0 2px var(--mermaid-spectrum-ground, Canvas),
    0 0 3px var(--mermaid-spectrum-ground, Canvas) !important;
}

/* Outline: a box is its outline on the canvas's own colour — a line behind it stays hidden — and a
   subgraph is left unfilled. */
svg[data-fill='outline'] :is(g.node, g.rough-node) :is(.label-container, .label-container > path, .outer-path > path, .row-rect-odd > path, .row-rect-even > path),
svg[data-fill='outline'] :is(g.node, g.cluster)[data-spectrum-node] :is(.label-container, .outer-path > path),
svg[data-fill='outline'] g.node[data-spectrum-node] .row-rect-odd > path,
svg[data-fill='outline'] rect.actor,
svg[data-fill='outline'] [data-spectrum-node] rect.actor {
  fill: var(--mermaid-spectrum-ground, Canvas) !important;
}

/* Hand-drawn draws a body as hatching, first, before its outline (measured on every Hand-drawn shape):
   an outlined box keeps only the outline (CH-REQ-20260929-A §14). */
svg[data-fill='outline'] [data-look='handDrawn'] :is(.label-container, .outer-path) > path:first-child,
svg[data-fill='outline'] g.cluster[data-look='handDrawn'] > g > path:first-child {
  stroke: transparent !important;
}

svg[data-fill='outline'] g.cluster > rect,
svg[data-fill='outline'] g.cluster[data-spectrum-node] > rect {
  fill: transparent !important;
}

/* Stroke: every line dashed or dotted — an author's own dotted, dashed or thick edge keeps its own. */
svg[data-stroke='dashed'] :is(.edgePaths > path, path.flowchart-link, .messageLine0, .architecture-edges path.edge):not(.edge-pattern-dotted, .edge-pattern-dashed, .edge-thickness-thick, .dashed-line, .dotted-line, .doc-mermaid-halo) {
  stroke-dasharray: 7 5 !important;
}

svg[data-stroke='dotted'] :is(.edgePaths > path, path.flowchart-link, .messageLine0, .architecture-edges path.edge):not(.edge-pattern-dotted, .edge-pattern-dashed, .edge-thickness-thick, .dashed-line, .dotted-line, .doc-mermaid-halo) {
  stroke-dasharray: 0.5 5.5 !important;
  stroke-linecap: round !important;
}

/* Canvas: a faint lattice behind the diagram, lines or points. Above the frame's own `background`,
   fullscreen included, whose shorthand would otherwise take the lattice away. */
:root .doc-mermaid-viewer[data-diagram-canvas='grid'] .doc-mermaid-canvas,
:root .doc-mermaid-viewer[data-diagram-canvas='grid']:fullscreen .doc-mermaid-canvas {
  background-image:
    linear-gradient(var(--mermaid-canvas-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mermaid-canvas-line) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-position: center center !important;
}

:root .doc-mermaid-viewer[data-diagram-canvas='dots'] .doc-mermaid-canvas,
:root .doc-mermaid-viewer[data-diagram-canvas='dots']:fullscreen .doc-mermaid-canvas {
  background-image: radial-gradient(circle, var(--mermaid-canvas-point) 1.2px, transparent 1.7px) !important;
  background-size: 18px 18px !important;
  background-position: center center !important;
}

/* Paper keeps the boxes and lines, and leaves the lattice off. */
@media print {
  :root .doc-mermaid-viewer[data-diagram-canvas] .doc-mermaid-canvas {
    background-image: none !important;
  }
}