/* ===========================
   Sequence Diagrams

   Drawn by vp-diagram.js, in the Workbench and as static SVG in the
   documentation. The diagram is an instrument readout: principals are named
   in the paper's serif on plain plates, everything drawn from the model is
   set in mono and coloured exactly as the editor colours it, and the only
   accent is the azure mark that says "this is the instrument". Verdict
   colours appear only when an attack replay puts them there (workbench.css).

   Text over lifelines carries a halo in the colour of whatever the diagram
   sits on, set through --dg-bg by the container.
   =========================== */

.vpDiagram {
	--dg-bg: var(--paper);
	display: block;
	max-width: none;
	overflow: visible;
}

.vpDiagram text {
	font-family: var(--font-mono);
	fill: var(--ink-2);
}

.vpDiagram .dgCaption {
	font-size: 10.5px;
	letter-spacing: 0.06em;
	fill: var(--ink-3);
}

.vpDiagram .dgLife {
	stroke: var(--line);
	stroke-width: 1;
}

.vpDiagram .dgPlate {
	fill: var(--surface);
	stroke: var(--line);
	stroke-width: 1;
}

.vpDiagram .dgMark {
	fill: var(--azure);
}

.vpDiagram text.dgName {
	font-family: var(--font-serif);
	font-size: 16.5px;
	fill: var(--ink);
}

.vpDiagram .dgNoteBox {
	fill: var(--surface);
	stroke: var(--line);
	stroke-width: 1;
}

.vpDiagram .dgItemBg {
	fill: transparent;
	stroke: none;
}

.vpDiagram text.dgCode {
	font-size: 11.5px;
	fill: var(--ink-2);
}

.vpDiagram text.dgLabel {
	font-size: 12px;
	fill: var(--ink);
}

.vpDiagram text.dgLabel,
.vpDiagram text.dgHop,
.vpDiagram text.dgPhaseLabel,
.vpDiagram text.dgCaption,
.vpDiagram text.dgLegend {
	paint-order: stroke;
	stroke: var(--dg-bg);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.vpDiagram .dgComma {
	fill: var(--ink-4);
}

.vpDiagram text.dgHop {
	font-size: 10px;
	letter-spacing: 0.04em;
	fill: var(--ink-4);
}

.vpDiagram .dgArrow {
	stroke: var(--ink-3);
	stroke-width: 1.3;
}

.vpDiagram .dgTip {
	fill: var(--ink-3);
}

.vpDiagram .dgDot {
	fill: var(--dg-bg);
	stroke: var(--ink-3);
	stroke-width: 1.2;
}

.vpDiagram .dgTarget {
	stroke: transparent;
	stroke-width: 14;
}

.vpDiagram .dgIntercept {
	display: none;
}

.vpDiagram .dgPhaseLine {
	stroke: var(--ink-4);
	stroke-width: 1;
	stroke-dasharray: 2 4;
}

.vpDiagram text.dgPhaseLabel {
	font-size: 11px;
	font-weight: 500;
	fill: var(--syn-structure);
}

.vpDiagram text.dgLegend {
	font-size: 10.5px;
	fill: var(--ink-3);
}

/* The editor's syntax classes, as fills. */
.vpDiagram .vp-keyword {
	fill: var(--olive-deep);
	font-weight: 500;
}

.vpDiagram .vp-literal {
	fill: var(--syn-literal);
}

.vpDiagram .vp-builtin {
	fill: var(--syn-primitive);
}

.vpDiagram .vp-qualifier {
	fill: var(--syn-qualifier);
}

.vpDiagram .vp-nil,
.vpDiagram .vp-comment {
	fill: var(--ink-4);
}

.vpDiagram .vp-arrow,
.vpDiagram .vp-operator {
	fill: var(--syn-operator);
}

.vpDiagram .vp-principal {
	fill: var(--syn-principal);
}

.vpDiagram .vp-guard,
.vpDiagram .vp-phase {
	fill: var(--syn-structure);
}

.vpDiagram .vp-query {
	fill: var(--azure-deep);
}

.vpDiagram .vp-capability {
	fill: var(--sienna);
	font-weight: 700;
}