/* Hand-drawn SVG diagrams (diagrams/*.svg, inlined via pymdownx.snippets).
   Colours come from the theme, so diagrams follow light and dark mode. */

.dg {
  margin: 1.6em 0;
}

.dg svg {
  display: block;
  width: 100%;
  max-width: 46rem;
  height: auto;
  margin: 0 auto;
  color: var(--md-default-fg-color);
  font-family: var(--md-text-font-family, inherit);
}

.dg figcaption {
  max-width: 40rem;
  margin: 0.8em auto 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  text-align: center;
}

/* text */
.dg text { fill: currentColor; font-size: 13px; }
.dg .t-title { font-size: 14px; font-weight: 600; }
.dg .t-sub { font-size: 11.5px; fill: var(--md-default-fg-color--light); }
.dg .t-label { font-size: 11.5px; fill: var(--md-default-fg-color--light); }
.dg .t-head { font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
              text-transform: uppercase; fill: var(--md-default-fg-color--light); }
.dg .t-accent { fill: var(--md-accent-fg-color); font-weight: 600; }
.dg .t-warn { fill: var(--dg-warn); font-weight: 600; }
.dg .t-mono { font-family: var(--md-code-font-family, monospace); font-size: 12px; }

/* shapes */
.dg .box { fill: var(--md-default-bg-color); stroke: currentColor; stroke-width: 1.5; }
.dg .soft { fill: var(--md-default-fg-color--lightest); stroke: var(--md-default-fg-color--lighter); stroke-width: 1; }
.dg .panel { fill: none; stroke: var(--md-default-fg-color--lighter); stroke-width: 1; stroke-dasharray: 3 4; }
.dg .accent { fill: var(--md-accent-fg-color--transparent); stroke: var(--md-accent-fg-color); stroke-width: 2; }
.dg .warn { fill: var(--dg-warn-bg); stroke: var(--dg-warn); stroke-width: 2; }

/* connectors */
.dg .line { fill: none; stroke: var(--md-default-fg-color); stroke-width: 1.5; }
.dg .line-soft { fill: none; stroke: var(--md-default-fg-color--light); stroke-width: 1.5; }
.dg .line-accent { fill: none; stroke: var(--md-accent-fg-color); stroke-width: 2; }
.dg .line-warn { fill: none; stroke: var(--dg-warn); stroke-width: 2; }
.dg .dash { stroke-dasharray: 5 4; }
.dg .head { fill: var(--md-default-fg-color); }
.dg .head-soft { fill: var(--md-default-fg-color--light); }
.dg .head-accent { fill: var(--md-accent-fg-color); }
.dg .head-warn { fill: var(--dg-warn); }

/* tracking sheet colours, as in grandMA2 (cyan = stored, magenta = tracked,
   white = blocked) */
.dg .c-stored { fill: var(--dg-stored-bg); stroke: var(--dg-stored); stroke-width: 1.5; }
.dg .c-tracked { fill: var(--dg-tracked-bg); stroke: var(--dg-tracked); stroke-width: 1; }
.dg .c-blocked { fill: var(--md-default-bg-color); stroke: currentColor; stroke-width: 1.5; }
.dg .c-empty { fill: none; stroke: var(--md-default-fg-color--lightest); stroke-width: 1; }
.dg .t-stored { fill: var(--dg-stored); font-weight: 600; }
.dg .t-tracked { fill: var(--dg-tracked); }

:root {
  --dg-warn: #d84315;
  --dg-warn-bg: rgba(216, 67, 21, 0.08);
  --dg-stored: #00838f;
  --dg-stored-bg: rgba(0, 131, 143, 0.12);
  --dg-tracked: #ad1f9e;
  --dg-tracked-bg: rgba(173, 31, 158, 0.08);
}

[data-md-color-scheme="slate"] {
  --dg-warn: #ff8a65;
  --dg-warn-bg: rgba(255, 138, 101, 0.12);
  --dg-stored: #4dd0e1;
  --dg-stored-bg: rgba(77, 208, 225, 0.14);
  --dg-tracked: #e57ee0;
  --dg-tracked-bg: rgba(229, 126, 224, 0.12);
}