/*
  The runner diagrams: inline SVG drawn in Graphite's tokens. Below 600px a diagram keeps its
  size and scrolls inside its frame, because shrunk to the column its labels would be 8px.
*/
.diagram {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--g-radius-card);
  background: var(--g-sunken);
}

.diagram svg {
  display: block;
  width: 100%;
  min-width: 600px;
  height: auto;
  font-family: var(--g-sans);
}

.diagram .box { fill: var(--bg-surface); stroke: var(--border-strong); }
.diagram .frame { fill: none; stroke: var(--border-strong); stroke-dasharray: 5 4; }
.diagram .hi { fill: var(--g-action-dim); stroke: var(--g-action-line); }
.diagram .free { fill: none; stroke: var(--border-strong); stroke-dasharray: 4 4; }
.diagram .fence { fill: var(--g-warn-dim); stroke: var(--g-warn); stroke-dasharray: 5 4; }
.diagram .off { fill: none; stroke: var(--g-danger-line); stroke-dasharray: 3 4; }

.diagram .t { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
.diagram .s { fill: var(--text-secondary); font-size: 11px; }
.diagram .m { font-family: var(--g-mono); font-size: 10.5px; }
.diagram .n { fill: var(--g-action-text); font-size: 11px; font-weight: 700; }
.diagram .wt { fill: var(--g-warn-text); }
.diagram .dt { fill: var(--g-danger-text); }

.diagram .wire { fill: none; stroke: var(--g-action-text); stroke-width: 1.5; }
.diagram .wire.back { stroke: var(--text-muted); stroke-dasharray: 4 3; }
.diagram .head { fill: var(--g-action-text); }
.diagram .head.back { fill: var(--text-muted); }
.diagram .cut { stroke: var(--g-danger-text); stroke-width: 1.5; }