/* ==========================================================================
   Diagram styles — shared CSS for inline SVG diagrams
   --------------------------------------------------------------------------
   Diagrams are inlined as SVG so they can read CSS custom properties
   (themeable, dark-mode-safe). Each diagram lives in src/components/diagrams/
   and produces SVG markup that uses these classes.

   The "wobble" filter is defined in defs.ts (shared <defs> block) and
   applied to a <g> wrapping the diagram's geometry — it makes straight
   lines feel pencil-drawn without going chaotic.
   ========================================================================== */

.diagram {
  margin: var(--space-6) 0 var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.diagram__svg {
  width: 100%;
  height: auto;
  max-width: 760px;
  display: block;
}

.diagram__caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0;
  font-style: italic;
}

/* ─── SVG sub-element styles ──────────────────────────────────
   The diagram functions emit <rect>/<line>/<text> with these
   classes. CSS controls colors so dark-mode just works. */

.diagram__svg .box {
  fill: var(--paper-deep);
  stroke: var(--ink-muted);
  stroke-width: 1.5;
}
.diagram__svg .box--accent {
  stroke: var(--cat-current);
  stroke-width: 2;
}
.diagram__svg .box--ghost {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

.diagram__svg .line {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagram__svg .line--accent {
  stroke: var(--cat-current);
  stroke-width: 2;
}
.diagram__svg .line--ghost {
  stroke: var(--ink-faint);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

.diagram__svg .label {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--ink-muted);
}
.diagram__svg .label--lead {
  fill: var(--ink);
  font-weight: 500;
  font-size: 13px;
}
.diagram__svg .label--accent {
  fill: var(--cat-current);
  font-weight: 500;
}
.diagram__svg .label--note {
  fill: var(--ink-faint);
  font-style: italic;
  font-size: 11px;
}

.diagram__svg .arrow-head {
  fill: var(--ink-muted);
  stroke: none;
}
.diagram__svg .arrow-head--accent {
  fill: var(--cat-current);
}