/* Shared diagram: an operation at scale, stopped at the action boundary. */
.es-fig { margin: 0; border: 1px solid var(--sy-line); background: var(--sy-panel); }
.es-scroll { overflow-x: auto; padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 6px; }
.es-svg { display: block; width: 100%; min-width: 760px; height: auto; }
.es-svg text { font-family: var(--sy-body); fill: #c8cad0; }
.es-svg .es-h { font-family: var(--sy-display); font-size: 19px; font-weight: 500; letter-spacing: -.02em; fill: var(--sy-white); }
.es-svg .es-s { font-size: 13.5px; fill: #a9adb6; }
.es-svg .es-k { font-family: var(--sy-mono); font-size: 11.5px; letter-spacing: .04em; fill: var(--sy-gray); }
.es-svg .es-ok-text { fill: #5ccb97; }
.es-svg .es-warn-text { fill: #e6ab52; }
.es-svg .es-bad-text { fill: #f07b7c; }
.es-node rect { fill: #0b0b0d; stroke: var(--sy-line-strong); stroke-width: 1; }
.es-fan path { fill: none; stroke: var(--sy-line-strong); stroke-width: 1.2; }
.es-agents rect { fill: var(--sy-blue); opacity: .85; }
.es-bad path { stroke: rgba(239, 69, 71, .55); stroke-width: 1.4; stroke-dasharray: 4 4; }
.es-x path { stroke: var(--sy-red, #ef4547); stroke-width: 2.2; }
.es-good { fill: none; stroke: #5ccb97; stroke-width: 2.2; }
.es-ok-fill { fill: #5ccb97; }
.es-band { fill: rgba(38, 77, 237, .16); stroke: var(--sy-blue); stroke-width: 1.2; }
.es-svg .es-band-label { font-family: var(--sy-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; fill: #c9d3ff; }
.es-dash path { stroke: var(--sy-line-strong); stroke-width: 1; stroke-dasharray: 2 5; }
.es-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 12px clamp(14px, 2vw, 24px) 16px; border-top: 1px solid var(--sy-line); font-size: 14px; line-height: 1.6; color: var(--sy-gray); }
.es-cap b { color: var(--sy-white); font-weight: 600; }
.es-cap > span:first-child { max-width: 82ch; }
.es-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 11px var(--sy-mono); color: var(--sy-gray-dim); white-space: nowrap; }
.es-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px dashed rgba(239, 69, 71, .8); margin-left: 6px; }
.es-legend i.es-l-ok { border-top: 2px solid #5ccb97; }
.es-legend i.es-l-band { height: 10px; border: 1px solid var(--sy-blue); background: rgba(38, 77, 237, .2); width: 12px; }
.es-hint { display: none; margin: 0; padding: 0 16px 10px; font: 11px var(--sy-mono); color: var(--sy-gray-dim); }
@media (max-width: 760px) { .es-svg { min-width: 700px; } .es-hint { display: block; } }