/* diagram svgs (src/assets/diagrams) carry only shapes and class names;
   colors and type come from here so they follow the theme */
.diagram {
  margin-block: 1.5rem;
  /* one hue per role, as in the Git Merge 2026 slides */
  --d-pds: #0ea5e9;
  --d-relay: #eab308;
  --d-index: #22c55e;
  --d-client: #a855f7;
  --d-knot: #f59e0b;
  --d-spindle: #ec4899;
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 48rem;
  margin-inline: auto;
  font-family: var(--font-sans);
}

.diagram figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-size: var(--sl-text-body-sm);
  color: var(--color-foreground-muted);
}

/* a service or component */
.diagram .box {
  fill: var(--color-background-default);
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

/* the thing the diagram is about */
.diagram .box-accent {
  fill: var(--color-background-info-subtle);
  stroke: var(--color-foreground-info);
  stroke-width: 1;
}

/* something outside tangled: a pds, plc, the user's machine */
.diagram .box-external {
  fill: var(--color-background-inset);
  stroke: var(--color-border-default);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

/* a dashed region grouping boxes, e.g. one operator's machines */
.diagram .group {
  fill: none;
  stroke: var(--color-border-default);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

/* role boxes: tinted fill, full-strength stroke */
.diagram :is(.box-pds, .box-relay, .box-index, .box-client, .box-knot, .box-spindle) {
  stroke-width: 1.5;
  fill: color-mix(in oklab, var(--d-role) 16%, var(--color-background-default));
  stroke: var(--d-role);
}

.diagram .box-pds { --d-role: var(--d-pds); }
.diagram .box-relay { --d-role: var(--d-relay); }
.diagram .box-index { --d-role: var(--d-index); }
.diagram .box-client { --d-role: var(--d-client); }
.diagram .box-knot { --d-role: var(--d-knot); }
.diagram .box-spindle { --d-role: var(--d-spindle); }

/* something you could run instead: dashed, untinted */
.diagram .yours {
  fill: var(--color-background-default);
  stroke-dasharray: 5 4;
}

.diagram .box.yours {
  stroke: var(--color-border-strong);
}

/* a small tag naming a supporting service */
.diagram .chip {
  fill: var(--color-background-muted);
  stroke: none;
}

.diagram .chip-label {
  fill: var(--color-foreground-muted);
  font-size: 10.5px;
}

.diagram .divider {
  stroke: var(--color-border-default);
  stroke-width: 1;
}

.diagram .label {
  fill: var(--color-foreground-default);
  font-size: 13px;
  font-weight: 590;
}

.diagram .sublabel {
  fill: var(--color-foreground-muted);
  font-size: 11px;
}

.diagram .group-label,
.diagram .edge-label {
  fill: var(--color-foreground-subtle);
  font-size: 11px;
}

.diagram .edge {
  fill: none;
  stroke: var(--color-foreground-subtle);
  stroke-width: 1.25;
}

.diagram .edge-dashed {
  fill: none;
  stroke: var(--color-foreground-subtle);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.diagram .arrowhead {
  fill: var(--color-foreground-subtle);
}