/* ============================================================
   diagrams.css — inline SVG diagrams
   ============================================================ */

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px 10px;
}

.diagram figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 860px;
}

.diagram figcaption strong {
  color: var(--text);
}

/* ---------- drawing primitives ---------- */

.arr-head {
  fill: var(--border-strong);
}

.d-title {
  font: 700 15px var(--font-sans);
  fill: var(--text);
}

.d-text {
  font: 400 14px var(--font-sans);
  fill: var(--text);
}

.d-small {
  font: 400 12.5px var(--font-sans);
  fill: var(--text-soft);
}

.d-tiny {
  font: 400 11px var(--font-sans);
  fill: var(--text-faint);
}

.d-mono {
  font: 400 12px var(--font-mono);
  fill: var(--text-soft);
}

.d-strong {
  font-weight: 800;
}

.d-accent {
  fill: var(--accent-deep);
}

.d-ok {
  fill: var(--ok);
}

.d-err {
  fill: var(--err);
}

.d-box {
  fill: var(--bg-elev);
  stroke: var(--border-strong);
  stroke-width: 1.5;
}

.d-box-hi {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.6;
}

.d-chip {
  fill: var(--bg-sunken);
  stroke: var(--border-strong);
  stroke-width: 1.2;
}

.d-chip-accent {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.3;
}

.d-mint {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2;
}

.d-ring {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.3;
}

.d-line {
  stroke: var(--border-strong);
  stroke-width: 1;
  fill: none;
}

.d-dash {
  stroke-dasharray: 5 4;
}

.d-arrow {
  stroke: var(--border-strong);
  stroke-width: 1.7;
  fill: none;
}

.d-arrow-accent {
  stroke: var(--accent);
}

.d-arrow-strong {
  stroke: var(--accent);
  stroke-width: 2.2;
}

.d-warn {
  stroke: var(--err);
}

/* small screens: keep svg text legible by letting it scale */
@media (max-width: 560px) {
  .diagram {
    margin-left: -8px;
    margin-right: -8px;
  }
}