/* diagram base */
.dgfig{margin:34px auto 0;max-width:880px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dgfig svg{display:block;width:100%;min-width:720px;max-width:880px;height:auto}
.dgscroll{display:none}
@media(max-width:760px){.dgscroll{display:block;margin:10px auto 0;max-width:880px;font-size:12px;color:var(--muted)}}
.dgcap{margin:12px auto 0;max-width:880px;font-size:13px;color:var(--muted)}
.dg-paper{fill:var(--navy-deep)}
.dg-mask{fill:var(--navy-deep)}
.dg-zone{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:4 4}
.dg-box{fill:color-mix(in srgb,var(--ivory) 4%,transparent);stroke:color-mix(in srgb,var(--ivory) 28%,transparent);stroke-width:1}
.dg-input{fill:color-mix(in srgb,var(--muted) 12%,transparent);stroke:color-mix(in srgb,var(--muted) 55%,transparent);stroke-width:1}
.dg-store{fill:color-mix(in srgb,var(--ivory) 7%,transparent);stroke:var(--muted);stroke-width:1}
.dg-focal{fill:color-mix(in srgb,var(--gold) 10%,transparent);stroke:var(--gold);stroke-width:1}
.dg-row{fill:color-mix(in srgb,var(--ivory) 5%,transparent);stroke:color-mix(in srgb,var(--ivory) 18%,transparent);stroke-width:.8}
.dg-row-acc{fill:color-mix(in srgb,var(--gold) 14%,transparent);stroke:color-mix(in srgb,var(--gold) 60%,transparent);stroke-width:.8;stroke-dasharray:4 4}
.dg-line{fill:none;stroke:var(--muted);stroke-width:1}
.dg-dash{stroke-dasharray:5 4}
.dg-rule{stroke:var(--line);stroke-width:.8}
.dg-mk{fill:var(--muted)}
.dg-t{fill:var(--ivory);font:600 12px 'Inter',system-ui,-apple-system,sans-serif;text-anchor:middle}
.dg-t16{fill:var(--ivory);font:600 16px 'Inter',system-ui,-apple-system,sans-serif;text-anchor:middle}
.dg-s{fill:var(--muted);font:400 9px ui-monospace,SFMono-Regular,Menlo,monospace;text-anchor:middle}
.dg-left{text-anchor:start}
.dg-eb{fill:var(--gold-soft);font:600 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-anchor:start}
.dg-al{fill:var(--muted);font:500 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-anchor:middle}
.dg-lg{fill:var(--muted);font:400 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-anchor:start}
.dg-ebc{fill:var(--gold-soft);font:600 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;text-anchor:middle}
.dg-rep{fill:var(--muted);font:500 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-anchor:middle}

/* Flow player: interactive workflow diagrams. Pairs with flow-player.js. */
.dg-trail{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none}
.dg-trail.on{opacity:1}
.dg-dot{fill:var(--fill,var(--gold));stroke:var(--navy-deep);stroke-width:2;opacity:0;pointer-events:none}
.dg-ring{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}
.dg-dot{transition:opacity .18s ease}
.dg.live.moving .dg-dot{opacity:1}
.dg.hold .dg-ring{animation:dgRing 1s ease-out 1}
@keyframes dgRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.dg [data-n]{transition:stroke .28s ease,fill .28s ease,stroke-width .28s ease;cursor:pointer;outline:none}
.dg [data-n]:hover{stroke:var(--gold)}
.dg [data-n]:focus-visible{stroke:var(--gold);stroke-width:2.4}
.dg [data-n].lit{stroke:var(--gold);stroke-width:1.6;fill:color-mix(in srgb,var(--gold) 11%,transparent)}
.dg [data-n].now{stroke-width:2.4;fill:color-mix(in srgb,var(--gold) 20%,transparent)}
.dg [data-n].fail{stroke:var(--gold);stroke-width:2;stroke-dasharray:5 4;fill:color-mix(in srgb,var(--gold) 6%,transparent)}
.dg .dg-mark{fill:var(--gold);font:700 13px 'Inter',system-ui,sans-serif;text-anchor:end;opacity:0;transition:opacity .25s ease;pointer-events:none}
.dg .dg-mark.on{opacity:1}
.flow-ui{max-width:880px;margin:18px auto 0}
.flow-ui-top{margin:0 auto 18px}
.flow-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.flow-bar button{all:unset;box-sizing:border-box;cursor:pointer;font-size:13.5px;line-height:1;color:color-mix(in srgb,var(--ivory) 82%,transparent);border:1px solid var(--line);border-radius:999px;padding:10px 16px;min-height:38px;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s,color .2s}
.flow-bar button:hover{border-color:var(--gold)}
.flow-bar button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.flow-bar button[aria-pressed=true]{background:var(--fill,var(--gold));border-color:transparent;color:var(--fill-ink,#fff)}
.flow-bar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.flow-cap{margin:14px auto 0;border:1px solid var(--line);border-radius:12px;padding:14px 18px;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;min-height:64px;background:color-mix(in srgb,var(--ivory) 3%,transparent)}
.flow-cap .k{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap}
.flow-cap .v{font-size:15.5px;line-height:1.5;color:var(--ivory)}
.flow-prog{grid-column:1/-1;height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
.flow-prog i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s ease}
@media(max-width:600px){.flow-cap{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.dg.hold .dg-ring{animation:none}.flow-bar [data-act=play]{display:none}}
figure[data-flow] .dg text,figure[data-flow] .dg .dg-mask{pointer-events:none}

/* bolder pass, 2026-09-20 */
.dg-trail{stroke-width:3.5;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--gold) 60%,transparent))}
.dg-dot{r:8px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gold) 85%,transparent))}
.dg-ring{stroke-width:2}
.dg.hold-big .dg-ring{animation:dgRingBig 1.6s ease-out 1}
@keyframes dgRingBig{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(7)}}
.dg [data-n],.dg text{transition:stroke .35s ease,fill .35s ease,stroke-width .35s ease,opacity .35s ease}
.dg [data-n].dim,.dg text.dim{opacity:.5}
.dg [data-n].lit{stroke-width:2;fill:color-mix(in srgb,var(--gold) 18%,transparent)}
.dg [data-n].now:not(.fail){fill:var(--fill,var(--gold));stroke:var(--fill,var(--gold));stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:dgPop .45s ease-out 1}
.dg text.now:not(.fail){fill:var(--fill-ink,#faf6ec)}
.dg [data-n].fail{stroke-width:2.6;fill:color-mix(in srgb,var(--gold) 12%,transparent)}
.dg .dg-mark{font-size:16px}
@keyframes dgPop{0%{transform:scale(.96)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
.flow-bar button{font-size:14.5px;padding:12px 20px;min-height:44px}
.flow-cap{border-left:3px solid var(--gold);padding:18px 22px;min-height:78px}
.flow-cap .v{font-size:18.5px;font-weight:500}
.flow-prog{height:3px}
@media (prefers-reduced-motion: reduce){.dg [data-n].now{animation:none}.dg.hold-big .dg-ring{animation:none}}
/* line-only by default: the line draws box to box, no travelling dot. Add data-dot to the figure to bring the dot back. */
figure[data-flow]:not([data-dot]) .dg-dot,figure[data-flow]:not([data-dot]) .dg-ring{display:none}
.dg-trail{stroke-width:3;filter:none;stroke-linecap:butt}