/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: diagram
   A node diagram: boxes in a grid, joined by 1px wires with pixel arrowheads, in lanes if you like. For how a thing
   flows (a pipeline, a protocol, a game loop). js/diagram.js draws the wires from data-wires; the layout is CSS.
   <div class="diagram" style="--diagram-cols: 80px repeat(4, minmax(128px, 1fr))" data-wires="a > b : label">
     <div class="diagram-lane px-box" style="grid-row: 1 / 3"></div>        a lane: a box behind a band of rows
     <span class="diagram-lane-name" style="grid-area: 1 / 1">Upstream</span>
     <div class="diagram-node px-box" data-node="a" style="grid-area: 1 / 2">
       <div class="diagram-head"><b>Build</b><span class="tag still">main</span></div>   (or just <b>Build</b>)
       <span>tokens only, drift check</span>
       <div class="diagram-tags"><span class="tag still">smoke</span>…</div>
     </div>
   </div>
   Nodes: 1px edge in 400, the name in 1000, a note in 700 (14 on 16). .gate: a step that checks (edge 800);
   .goal: where it ends up (the accent edge); .bad: what failing leads to (--bad); .quiet: on the side (edge 400, the
   default, said outright). Wires (js/diagram.js): 700 (--diagram-wire); .live the accent; .fail --bad, dashed 2/2;
   .ghost 600, dashed. Labels: Mono 14 on the diagram's ground, centred on the wire on a whole pixel.
   Wide diagrams: put one in .diagram-scroll, which scrolls sideways under --diagram-min (default 0) and keeps the
   diagram whole; a phone gets the whole picture, a finger's swipe wide.
   In the mek.parts layer, so a project's own CSS wins over it. */

@layer mek.parts {

.diagram { --diagram-cols: repeat(3, minmax(0, 1fr)); --diagram-ground: var(--bg);
  position: relative; isolation: isolate; display: grid; grid-template-columns: var(--diagram-cols);
  gap: var(--diagram-gap-y) var(--diagram-gap-x); padding: var(--space-3); min-width: var(--diagram-min, 0); }
.diagram > * { position: relative; z-index: 2; min-width: 0; }
.diagram-scroll { overflow-x: auto; }

/* Lanes: a box behind a band of rows, the whole width, 12px round what's in it. Its name sits in the first column. */
.diagram > .diagram-lane { z-index: 0; grid-column: 1 / -1; margin: calc(-1 * var(--space-3)); --fill: var(--diagram-ground); }
.diagram-lane-name { align-self: start; padding-top: var(--space-3); font-size: var(--text-xs); line-height: 16px; color: var(--text-muted); }

/* Nodes. */
.diagram-node { display: grid; gap: var(--space-1); align-self: center; padding: var(--space-2) var(--space-3) 10px;
  --fill: var(--diagram-ground); --fill-to: var(--diagram-ground); }
.diagram-node b, .diagram-node strong { font-weight: normal; color: var(--text-strong); }
.diagram-node > span { font-size: var(--text-xs); line-height: 16px; color: var(--text-muted); }
.diagram-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-2); }   /* a narrow node: the tag goes under its name */
.diagram-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.diagram-tags .tag { background: var(--line-hover); }
.diagram-node.gate { --edge: var(--text-soft); --edge-to: var(--text-soft); }
.diagram-node.goal { --edge: var(--accent); --edge-to: var(--accent); }
.diagram-node.bad { --edge: var(--bad); --edge-to: var(--bad); }
.diagram-node.quiet { --edge: var(--line); --edge-to: var(--line); }

/* Wires: drawn by js/diagram.js in an SVG over the lanes and under the nodes, on whole pixels. */
.diagram > svg.diagram-wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible;
  pointer-events: none; shape-rendering: crispEdges; }
.diagram-wires polyline { fill: none; stroke: var(--diagram-wire); stroke-width: 1; }
.diagram-wires path { fill: var(--diagram-wire); }
.diagram-wires .live polyline { stroke: var(--diagram-live); } .diagram-wires .live path { fill: var(--diagram-live); }
.diagram-wires .fail polyline { stroke: var(--diagram-fail); stroke-dasharray: 2 2; } .diagram-wires .fail path { fill: var(--diagram-fail); }
.diagram-wires .ghost polyline { stroke: var(--diagram-ghost); stroke-dasharray: 2 2; } .diagram-wires .ghost path { fill: var(--diagram-ghost); }
.diagram > .diagram-label { position: absolute; z-index: 3; padding: 0 var(--space-1);
  background: var(--diagram-ground); font: var(--text-2xs)/14px var(--font-mono); color: var(--diagram-wire); white-space: nowrap; }
.diagram > .diagram-label.live { color: var(--diagram-live); }
.diagram > .diagram-label.fail { color: var(--diagram-fail); }
.diagram > .diagram-label.ghost { color: var(--text-muted); }

} /* @layer mek.parts */