/* df-flow.dev — diagramy SVG (realizacje) */

.diagram {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0;
  overflow-x: auto;
  padding: var(--space-3);
}

.diagram svg {
  display: block;
  height: auto;
  min-width: 56rem;
  width: 100%;
}

.d-box {
  fill: var(--surface-alt);
  stroke: var(--border);
  stroke-width: 1;
}

.d-box--tint {
  fill: var(--green-tint);
  stroke: none;
}

.d-box--badge {
  fill: var(--green-tint);
  stroke: none;
}

.d-box--dash {
  fill: var(--surface);
  stroke-dasharray: 4 4;
}

.d-label {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  text-anchor: middle;
}

.d-sub {
  fill: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  text-anchor: middle;
}

.d-sub--green {
  fill: var(--green);
}

.d-badge {
  fill: var(--green);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
}

.d-flow line {
  marker-end: url(#arw);
  stroke: var(--leaf);
  stroke-width: 1.2;
}

.d-dash line {
  stroke: var(--border);
  stroke-dasharray: 4 4;
  stroke-width: 1.2;
}