/* ==========================================================================
   Inline-SVG diagrams for posts (set `diagrams: true` in the front matter).
   Uses the site tokens so figures read as part of the article: IBM Plex,
   ivory ground, hairline rules, accent red for the highlighted path.
   ========================================================================== */
.article figure.diagram { margin: 1.4rem 0; }
.diagram svg { display: block; width: 100%; height: auto; max-width: 100%; }

.diagram text { font-family: var(--mono); fill: var(--fg); }
.diagram .d-sans { font-family: var(--sans); }
.diagram .d-mut  { fill: var(--muted); }
.diagram .d-head { fill: var(--heading); }
.diagram .d-acc  { fill: var(--accent); }
.diagram .d-inv  { fill: var(--bg); }
.diagram .d-cap  { fill: var(--muted); font-family: var(--sans); letter-spacing: 0.06em; }

.diagram .box      { fill: var(--code-bg); stroke: rgba(0, 0, 15, 0.82); stroke-width: 1; }
.diagram .box-acc  { fill: rgba(127, 19, 21, 0.06); stroke: var(--accent); stroke-width: 1.3; }
.diagram .box-dim  { fill: #eceadf; stroke: #cbc9bc; stroke-width: 1; }
.diagram .seg      { stroke: var(--bg); stroke-width: 1.5; }

.diagram .ln     { stroke: rgba(0, 0, 15, 0.5); stroke-width: 1.2; fill: none; }
.diagram .ln-acc { stroke: var(--accent); stroke-width: 1.4; fill: none; }
.diagram .ln-dash { stroke: rgba(0, 0, 15, 0.4); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.diagram .ah     { fill: rgba(0, 0, 15, 0.5); }
.diagram .ah-acc { fill: var(--accent); }
.diagram .rule   { stroke: #cfcdc0; stroke-width: 1; }