/* Inline SVG diagrams: text and rules use the palette variables, so they follow the light and dark schemes. */
/* The theme sizes figures to their content, and an inline SVG has no intrinsic width. */
.md-typeset .svg-diagram {
  display: block;
  width: 100%;
  margin: 1.5em 0;
}

.svg-diagram svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  font-family: var(--md-text-font-family);
}

.svg-diagram text {
  fill: var(--md-default-fg-color);
  font-size: 15px;
}

.svg-diagram .small {
  fill: var(--md-default-fg-color--light);
  font-size: 13px;
}

.svg-diagram .num {
  font-family: var(--md-code-font-family);
}

.svg-diagram .node rect {
  stroke-width: 1.5;
}

/* Node fills stay light in both schemes, so their text stays black. */
.svg-diagram .node text {
  fill: #000;
}

.svg-diagram .receiver rect {
  fill: #dbeafe;
  stroke: #2563eb;
}

.svg-diagram .sender rect {
  fill: #fde7c8;
  stroke: #c77700;
}

.svg-diagram line {
  stroke-width: 2;
}

.svg-diagram .line-ok { stroke: #16a34a; }
.svg-diagram .line-max { stroke: #c77700; }
.svg-diagram .line-off { stroke: var(--md-default-fg-color--lighter); stroke-dasharray: 5 4; }
.svg-diagram .rule { stroke: var(--md-default-fg-color--lightest); stroke-width: 1; }

.svg-diagram .head-ok,
.svg-diagram text.ok,
.svg-diagram tspan.ok { fill: #16a34a; }

.svg-diagram .head-max,
.svg-diagram text.max,
.svg-diagram tspan.max { fill: #c77700; }

.svg-diagram .head-off,
.svg-diagram text.off { fill: var(--md-default-fg-color--lighter); }