/* Animated architecture diagrams: inline SVG inside <div class="flow-diagram">.
   Colours come from Material's variables, so they follow the light/dark toggle. */
.flow-diagram {
  margin: 1.5em 0;
}

.flow-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  font-family: var(--md-text-font-family);
}

.flow-diagram .node,
.flow-diagram .actor,
.flow-diagram .store,
.flow-diagram .queue {
  fill: var(--md-code-bg-color);
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5;
}

.flow-diagram .actor {
  stroke-dasharray: 5 4;
}

.flow-diagram .queue {
  stroke-width: 2.5;
}

.flow-diagram .title {
  fill: var(--md-default-fg-color);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}

.flow-diagram .sub {
  fill: var(--md-default-fg-color--light);
  font-size: 12.5px;
  text-anchor: middle;
}

.flow-diagram .edge {
  fill: none;
  stroke: var(--md-default-fg-color--light);
  stroke-width: 1.5;
}

.flow-diagram .arrowhead {
  fill: var(--md-default-fg-color--light);
}

.flow-diagram .label {
  fill: var(--md-default-fg-color--light);
  font-size: 12px;
}

.flow-diagram .label .num {
  fill: var(--md-accent-fg-color);
  font-weight: 700;
}

.flow-diagram .hl {
  fill: none;
  stroke: var(--md-accent-fg-color);
  stroke-width: 3.5;
}

.flow-diagram .token {
  fill: var(--md-accent-fg-color);
}

.flow-diagram .caption {
  fill: var(--md-default-fg-color);
  font-size: 16px;
  font-weight: 600;
  text-anchor: middle;
}

.flow-diagram-hint {
  margin: 0.25em 0 0;
  font-size: 0.7rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
}