/* diagram.css — clickable SVG diagrams (pairs with diagram.js). Natural size, wrapper scrolls. */
.dg-card{border:1px solid var(--line);border-radius:14px;background:var(--card-bg);box-shadow:var(--card-shadow);margin:0 0 22px}
.dg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 18px 8px;border-bottom:1px dashed var(--line)}
.dg-title{font-size:16px;font-weight:800}
.dg-talk{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.55;max-width:110ch}
.dg-hint{flex:0 1 270px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.dg-wrap{overflow:auto;padding:18px 18px 12px;max-height:none;position:relative}
.dg-wrap{cursor:grab;user-select:none;-webkit-user-select:none}
.dg-node{cursor:pointer}
.dg-wrap.dragging,.dg-wrap.dragging *{cursor:grabbing!important}
/* wide diagram: a fading right edge + a scroll cue, removed once the reader scrolls */
.dg-wrap.wide{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 70px),transparent)}
.dg-scroll-cue{position:absolute;right:14px;top:8px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:var(--card-bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px;pointer-events:none}

.dg-svg{display:block}
.dg-lane{fill:var(--elevated);stroke:var(--line);stroke-width:1}
.dg-lane-t{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;fill:var(--cyan)}
.dg-node rect{fill:var(--card-bg);stroke:var(--line-strong);stroke-width:1.4;filter:drop-shadow(0 2px 5px rgba(16,75,60,.14));cursor:pointer;transition:stroke .12s}
.dg-node:hover rect,.dg-node:focus rect{stroke:var(--teal);stroke-width:2.2}
.dg-node:focus{outline:none}
.dg-node.has-term rect{stroke:var(--sky)}
.dg-t{font-size:15px;font-weight:700;fill:var(--fg);pointer-events:none}
.dg-sub{font-size:12.5px;fill:var(--muted);pointer-events:none}
.dg-q{font-size:11px;font-weight:900;fill:var(--sky);pointer-events:none}
.dg-edge{fill:none;stroke:var(--muted);stroke-width:1.8}
.dg-arrowhead{fill:var(--muted)}
.dg-edge-t{font-size:11.5px;fill:var(--muted);font-weight:700;paint-order:stroke;stroke:var(--card-bg);stroke-width:5px;stroke-linejoin:round}
.dg-life{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 4}
.dg-actor rect{fill:var(--elevated)}
.dg-msg .dg-hit{fill:transparent;cursor:pointer}
.dg-msg:hover .dg-msg-t,.dg-msg:focus .dg-msg-t{fill:var(--teal)}
.dg-msg-t{font-size:12.5px;font-weight:600;fill:var(--fg);pointer-events:none}
.dg-res .dg-edge{stroke-dasharray:6 4}
.dg-async .dg-edge{stroke-dasharray:2 4}
.dg-notebox{fill:var(--amber);opacity:.18;stroke:var(--amber)}
.dg-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);padding:0 18px 12px}
.dg-legend b{display:inline-block;width:26px;border-top:2px solid var(--muted);vertical-align:middle;margin-right:5px}
.dg-legend b.res{border-top-style:dashed}.dg-legend b.async{border-top-style:dotted}
/* swimlane — horizontal role lanes, the pool seen from above */
.dg-swim-lane{fill:var(--card-bg)}
.dg-swim-lane.alt{fill:var(--elevated)}
.dg-swim-head{fill:var(--teal);opacity:.10}
.dg-swim-t{font-size:13.5px;font-weight:800;fill:var(--fg)}
.dg-swim-col{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 5}
.dg-swim-frame{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.dg-handoff{stroke:var(--teal);stroke-width:2.2}
.dg-readme{font-size:12.5px;color:var(--muted);padding:8px 18px 10px;border-top:1px dashed var(--line);line-height:1.6}
.dg-readme b{color:var(--cyan);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-right:8px}
.dg-readme i.ho{display:inline-block;width:22px;border-top:2.2px solid var(--teal);vertical-align:middle;margin:0 2px}
/* abbreviation key — every short-form in the diagram, expanded, no click needed */
.dg-abbr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 18px 14px;border-top:1px dashed var(--line)}
.dg-abbr-h{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-right:4px}
.dg-abbr-i{font:inherit;font-size:12.5px;line-height:1.4;color:var(--muted);background:var(--elevated);border:1px solid var(--line);border-radius:8px;padding:3px 9px}
.dg-abbr-i b{color:var(--fg);font-weight:800}
button.dg-abbr-i{cursor:pointer}
button.dg-abbr-i:hover,button.dg-abbr-i:focus-visible{border-color:var(--teal);color:var(--fg);outline:none}
.dg-abbr-i.has-term{border-color:var(--sky)}
.dg-abbr-i.missing{border-color:#c0392b;color:#c0392b}
/* diagram index tiles */
.dg-index{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.dg-index button{border:1px solid var(--line);background:var(--elevated);color:var(--fg);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
.dg-index button[aria-pressed="true"]{background:var(--teal);color:var(--tab-fg);border-color:var(--teal)}
/* node card in the drawer */
.nd-kind{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.nd-say{border-left:3px solid var(--teal);padding:8px 12px;background:var(--elevated);border-radius:0 8px 8px 0;font-size:13px;line-height:1.6}