/* billycrew.info — diagram primitives
 *
 * Shared visual language for inline-SVG diagrams. Every diagram on the site
 * should compose from these classes; never hardcode hex / stroke widths /
 * font in a diagram SVG. To restyle all diagrams, edit this file.
 *
 * Authoring rules:
 *   1) Color comes from .dg__* classes only (no inline fill="#..." / stroke="#...").
 *   2) Box corners: rx=8 for nodes, rx=12 for groups, rx=999 for pills.
 *   3) Default labels = 14px Inter (.dg__label). Strong = 16px Inter bold (.dg__label--strong).
 *      Captions = 12px Inter (.dg__caption). Use --mono only when literal mono is needed.
 *   4) Use the shared #dg-arrow marker from the page-level <defs>.
 */

.dg {
  font-family: var(--font-display);
  font-size: 14px;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Nodes ─────────────────────────────────────── */
.dg__node {
  fill: #fff;
  stroke: var(--cool-gray);
  stroke-width: 1.5;
}
.dg__node--soft    { fill: var(--bg-soft); stroke: var(--cool-gray); }
.dg__node--accent  { fill: var(--sky-soft); stroke: var(--sky); }
.dg__node--accent-soft { fill: var(--sky-soft); stroke: var(--cool-gray); }
.dg__node--indigo  { fill: var(--indigo-soft); stroke: var(--indigo); }
.dg__node--warn    { fill: var(--billy-yellow-soft); stroke: var(--billy-yellow-2); }
.dg__node--core    { fill: var(--text); stroke: var(--text); }
.dg__node--ghost   { fill: transparent; stroke: var(--cool-gray); stroke-dasharray: 4 4; }

/* ── Group (dashed bounding box for clusters) ─────────────── */
.dg__group {
  fill: var(--bg-soft);
  stroke: var(--cool-gray);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* ── Edges / arrows ─────────────────────────────── */
.dg__edge {
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.5;
}
.dg__edge--accent  { stroke: var(--sky); }
.dg__edge--muted   { stroke: var(--cool-gray); }
.dg__edge--dashed  { stroke-dasharray: 4 4; }
.dg__edge--thick   { stroke-width: 2.5; }

/* ── Arrow marker (referenced via marker-end="url(#dg-arrow)") ── */
.dg__marker        { fill: var(--text-dim); stroke: none; }
.dg__marker--accent{ fill: var(--sky); }

/* ── Labels ─────────────────────────────────────── */
.dg__label {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
}
.dg__label--muted   { fill: var(--text-muted); }
.dg__label--strong  { font-family: var(--font-display); font-size: 16px; font-weight: 700; fill: var(--text); letter-spacing: -0.2px; }
.dg__label--invert  { fill: #fff; }
.dg__label--mono    { font-family: var(--font-code); }

/* ── Pill (used for inline tags / badges inside a diagram) ── */
.dg__pill {
  fill: var(--bg-soft);
  stroke: var(--cool-gray);
  stroke-width: 1;
}
.dg__pill--accent { fill: var(--sky-soft); stroke: var(--sky); }

/* ── Caption (small note under a node) ───────────── */
.dg__caption {
  fill: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-display);
}
.dg__caption--invert { fill: rgba(255, 255, 255, 0.78); }