/* Shared diagram components (assets/js/diagram.mjs). Tokens come from system.css. */
.dg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "bar bar" "stage stage" "cap insp"; gap: var(--dg-flow) 20px; padding: var(--dg-pad); border: 1px solid var(--border); border-radius: var(--r-panel); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006)), var(--surface-1); box-shadow: var(--elev); }
.dg__bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; }
.dg__bar:empty { display: none; }
.dg__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--btn-row); max-width: 100%; }
/* a chip whose label is an outcome code (SERVER_OVERLOADED, REPLAY_DETECTED): the code size, the chip height unchanged */
.dg__chip--code { font: var(--text-code); }
/* chips select a scenario; .dg__btn is for demo buttons that change the demo state (never for playback) */
.dg__chip[aria-pressed="true"] { color: var(--text); border-color: transparent; background: linear-gradient(135deg, rgba(196, 86, 29, .55), rgba(176, 42, 94, .55) 55%, rgba(63, 98, 200, .55)); }
.dg__chip:focus-visible, .dg__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dg__stage { grid-area: stage; min-width: 0; display: flex; justify-content: center; }
.dg__svg { width: 100%; max-width: var(--dg-max-w); height: auto; display: block; overflow: visible; margin-inline: auto; }
.dg__cap { grid-area: cap; align-self: stretch; min-height: var(--dg-cap-h, 0); display: flex; align-items: center; color: var(--text); font-size: var(--text-body-size); line-height: 1.5; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(255, 255, 255, .025); }
.dg__cap:empty { visibility: hidden; }
.dg__insp { grid-area: insp; align-self: stretch; min-height: var(--dg-insp-h, 0); align-content: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-control); background: rgba(0, 0, 0, .22); display: grid; gap: .4rem; font-size: var(--text-body-size); }
.dg__insp { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; }
.dg__insp b { grid-column: 1; font-weight: 500; color: var(--text); } .dg__insp p { grid-column: 1 / -1; color: var(--text-dim); line-height: 1.45; } .dg__insp-hint { color: var(--text-faint) !important; }
.dg__insp .link-arrow { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; font-size: var(--btn-fs); }
@media (max-width: 47.99rem) { .dg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "stage" "cap" "insp"; } .dg__insp { min-height: 0; } .dg__insp.is-idle { display: none; } }
/* svg parts */
.dg .g { fill: none; stroke: rgba(255, 255, 255, .14); stroke-dasharray: 5 6; }
.dg .gl { fill: var(--text-faint); font: 500 11px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.dg .n { cursor: pointer; outline: none; --c: #8ab4ff; }
.dg .n rect { fill: var(--surface-2); stroke: var(--border-hover); stroke-width: 1; transition: stroke var(--dg-hover) var(--ease), fill var(--dg-hover) var(--ease), filter var(--dg-hover) var(--ease); }
.dg .n--core rect { fill: rgba(90, 93, 203, .14); }
.dg .n--dark rect { fill: rgba(0, 0, 0, .35); }
.dg .nl { fill: var(--text-dim); font: 500 13.5px var(--font); transition: fill var(--dg-hover) var(--ease); }
.dg .ns { fill: var(--text-faint); font: 400 11px var(--font); }
.dg .n.is-on rect { stroke: var(--c); }
.dg .n.is-on .nl { fill: var(--text); }
.dg .n.is-now rect { stroke-width: 1.8; filter: drop-shadow(0 0 8px var(--c)); }
.dg .n.is-bad rect { stroke: var(--invalid); filter: drop-shadow(0 0 8px rgba(255, 107, 122, .7)); fill: rgba(255, 107, 122, .08); }
.dg .n:focus-visible rect { stroke: var(--focus); stroke-width: 2.2; }
.dg .e { --c: #8ab4ff; }
.dg .e__base { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.4; }
.dg .e.is-dashed .e__base { stroke-dasharray: 4 6; }
.dg .e__lit { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset var(--dg-step, var(--dg-step-default)) linear; }
.dg .e.is-on .e__lit { stroke-dashoffset: 0; }
.dg .e.is-now .e__lit { filter: drop-shadow(0 0 5px var(--c)); }
.dg .e.is-bad .e__lit { stroke: var(--invalid); opacity: .9; }
.dg .el { fill: var(--text-faint); font: 400 11px var(--font); }
.dg .pulse { fill: #fff; filter: drop-shadow(0 0 7px var(--c, #8ab4ff)) drop-shadow(0 0 2px #fff); }
/* sequence */
.dg .life { stroke: rgba(255, 255, 255, .12); stroke-dasharray: 3 6; }
.dg .m { cursor: pointer; outline: none; color: rgba(255, 255, 255, .22); --c: #8ab4ff; }
.dg .m .ma { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .45; transition: color var(--dg-step, 260ms) var(--ease), opacity var(--dg-step, 260ms) var(--ease); }
.dg .m .mt { fill: var(--text-faint); font: 400 12px var(--font); transition: fill var(--t-fast) var(--ease); }
.dg .m .mb circle { fill: var(--surface-2); stroke: var(--border-hover); } .dg .m .mb text { fill: var(--text-faint); font: 500 10px var(--mono); }
.dg .m.is-on { color: var(--c); } .dg .m.is-on .ma { opacity: 1; } .dg .m.is-on .mt { fill: var(--text); } .dg .m.is-on .mb circle { stroke: var(--c); }
.dg .m.is-now .ma { stroke-width: 2.2; filter: drop-shadow(0 0 5px var(--c)); } .dg .m.is-now .mt { fill: #fff; }
.dg .m.is-bad.is-on { color: var(--invalid); } .dg .m.is-bad.is-on .mb circle { stroke: var(--invalid); }
.dg .m:focus-visible .mb circle { stroke: var(--focus); stroke-width: 2; }
.seq-list { display: grid; gap: .5rem; counter-reset: sq; }
.seq-item { counter-increment: sq; display: grid; grid-template-columns: 22px 1fr; gap: .1rem .75rem; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: var(--r-control); color: var(--text-faint); cursor: pointer; }
.seq-item::before { content: counter(sq); grid-row: span 2; align-self: center; --bf: var(--text-faint); }
.seq-route { font-size: var(--text-small-size); letter-spacing: .06em; text-transform: uppercase; } .seq-text { font-size: var(--text-body-size); }
.seq-item.is-on { color: var(--text-dim); border-color: var(--c, var(--border-hover)); } .seq-item.is-now { color: var(--text); box-shadow: 0 0 0 1px var(--c); }
.seq-item.is-bad.is-on { border-color: var(--invalid); }
.seq-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dg .n rect, .dg .e__lit, .dg .m .ma { transition: none; } }

/* hover and focus light a node (or message) and its connections at once; they never pause the diagram */
.dg .n.is-hot rect { stroke: var(--c, #8ab4ff); stroke-width: 1.8; filter: drop-shadow(0 0 8px var(--c, #8ab4ff)); }
.dg .n.is-hot .nl { fill: var(--text); }
.dg .e.is-hot .e__base { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.dg .m.is-hot .ma { opacity: 1; stroke-width: 2.2; color: var(--c, #8ab4ff); } .dg .m.is-hot .mt { fill: #fff; }
.dg--instant, .dg--instant * { transition-duration: 0s !important; transition-delay: 0s !important; }

.dg .e.is-bad .e__lit { stroke-dashoffset: 0; }
/* label floor: --k (screen px per svg unit, set by calm.js) makes labels grow in svg units when a diagram is scaled down, so no label renders under 11px */
.dg .gl, .dg .ns, .dg .el, .dg .m .mb text, .dg text:not([class]) { font-size: max(11px, calc(11px / var(--k, 1))); }
.dg .nl { font-size: max(13.5px, calc(11px / var(--k, 1))); }

/* ---- DIAGRAM FRAME (one shared look for every diagram: .dg and .diagram-frame) ------------------------------------------------------------------
   a fine dot grid, faint corner ticks, a thin top bar with the diagram name and three status dots, a soft brand glow in two corners, an inner hairline,
   and one light that travels along the top bar's rule. Everything is low contrast (text inside the diagrams keeps its AA colours); the light stops
   under prefers-reduced-motion. */
.dg, .diagram-frame {
  --dgf-tick: rgba(255, 255, 255, .2);
  position: relative; padding-top: calc(var(--dg-pad) + 28px);
  background:
    linear-gradient(var(--dgf-tick), var(--dgf-tick)) left 8px top 38px / 9px 1px no-repeat, linear-gradient(var(--dgf-tick), var(--dgf-tick)) left 8px top 38px / 1px 9px no-repeat,
    linear-gradient(var(--dgf-tick), var(--dgf-tick)) right 8px top 38px / 9px 1px no-repeat, linear-gradient(var(--dgf-tick), var(--dgf-tick)) right 8px top 38px / 1px 9px no-repeat,
    linear-gradient(var(--dgf-tick), var(--dgf-tick)) left 8px bottom 8px / 9px 1px no-repeat, linear-gradient(var(--dgf-tick), var(--dgf-tick)) left 8px bottom 8px / 1px 9px no-repeat,
    linear-gradient(var(--dgf-tick), var(--dgf-tick)) right 8px bottom 8px / 9px 1px no-repeat, linear-gradient(var(--dgf-tick), var(--dgf-tick)) right 8px bottom 8px / 1px 9px no-repeat,
    radial-gradient(ellipse 55% 75% at 0% 0%, rgba(252, 106, 2, .085), rgba(192, 46, 98, .05) 45%, transparent 72%),
    radial-gradient(ellipse 45% 65% at 100% 100%, rgba(1, 137, 253, .07), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .075) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006)), var(--surface-1);
  box-shadow: var(--elev), inset 0 0 0 1px rgba(255, 255, 255, .035);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dg:hover, .diagram-frame:hover { border-color: var(--border-hover); box-shadow: var(--elev), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 0 0 1px rgba(1, 137, 253, .16); }
.dg::before, .diagram-frame::before {
  content: attr(data-label); position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 28px; box-sizing: border-box; padding: 0 76px 0 14px; pointer-events: none;
  font: 500 var(--text-small-size)/28px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--border); border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: linear-gradient(90deg, transparent, #FC6A02, #C02E62, #0189FD, transparent) -30% 100% / 22% 1px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.dg:not([data-label])::before, .diagram-frame:not([data-label])::before { content: 'diagram'; }
.dg::after, .diagram-frame::after {
  content: ''; position: absolute; z-index: 1; top: 11px; right: 14px; width: 34px; height: 6px; pointer-events: none; opacity: .6;
  background: radial-gradient(circle 3px at 3px 3px, #FC6A02 98%, transparent) 0 0 / 34px 6px no-repeat, radial-gradient(circle 3px at 17px 3px, #C02E62 98%, transparent) 0 0 / 34px 6px no-repeat, radial-gradient(circle 3px at 31px 3px, #0189FD 98%, transparent) 0 0 / 34px 6px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes dgf-run { from { background-position: -30% 100%, 0 0; } to { background-position: 130% 100%, 0 0; } }
  @keyframes dgf-dot { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
  .dg::before, .diagram-frame::before { animation: dgf-run 9s linear infinite; }
  .dg::after, .diagram-frame::after { animation: dgf-dot 4s ease-in-out infinite; }
}