/* Blind custody · figure styles */
.zfig-f{padding:26px 22px;border:1px solid var(--p-line);border-radius:6px;background:#fff;overflow-x:auto}
.fg{display:flex;gap:10px;font-family:var(--sans);font-size:13.5px;line-height:1.35}
.fg-row{flex-direction:row;align-items:stretch}
.fg-row.in{gap:8px}
.fg-col{flex-direction:column;align-items:center}
.fn{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 12px;border:1px solid #cfccc4;border-radius:6px;background:var(--paper);text-align:center}
.fg-col>.fn,.fcol>.fn{flex:none;width:min(300px,100%)}
.fn b{font-weight:600;color:var(--p-ink)}
.fn small{font-family:var(--mono);font-size:11.5px;color:var(--p-sec)}
.fn.key{border-color:rgba(91,79,207,.55);background:var(--acc-l)}
.fn.key b{color:#3f35a8}
.fn.in{border-color:var(--p-ink)}
.fn.out{border-color:rgba(13,158,114,.5);background:var(--ok-l)}
.fn.store,.fn.srvn{border-style:dashed;border-color:#9a9a9a;background:#f2f1ee}
.fn.wrap{border-color:#cfccc4;background:#fff;font-family:var(--mono)}
.fn.bad{border-color:rgba(200,68,58,.6);background:var(--bad-l)}
.fn.bad b{color:var(--bad)}
.fa{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:72px;padding:0 4px}
.fa i{position:relative;display:block;width:100%;height:1.5px;background:var(--p-ink)}
.fa i::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--p-ink);border-right:0}
.fa span{font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--p-sec);text-align:center;max-width:150px}
.fa.v{min-width:0;min-height:38px;flex-direction:row;gap:10px;padding:2px 0}
.fa.v i{width:1.5px;height:30px}
.fa.v i::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:7px solid var(--p-ink);border-bottom:0}
.fa.v span{text-align:left;max-width:240px}
.fa.bad i{background:var(--bad)}.fa.bad i::after{border-left-color:var(--bad)}.fa.bad span{color:var(--bad)}
.fz{flex:1 1 0;display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px;border:1px solid var(--p-line);border-radius:8px;background:#fafaf8}
.fz-l{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-sec)}
.fz-in{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex:1;justify-content:center}
.fz-in .fa.v{align-self:center}
.fz.dev,.fz.dev2{border-color:rgba(13,158,114,.35);background:#f4fbf8}
.fz.srv{border-style:dashed;border-color:#a8a8a8;background:#f2f1ee}
.fz.app{flex:3;border-color:var(--p-ink)}
.fz.main{border-color:rgba(91,79,207,.4);background:#f7f6fc}
.fz.ai{background:#fff}
.fa2{flex:none;display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:150px;max-width:190px;font-family:var(--mono);font-size:11px;line-height:1.35;color:var(--p-sec)}
.fa2 span{padding:5px 8px;border-top:1.5px solid var(--p-ink)}
.fsplit{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%}
.fsplit.three{grid-template-columns:repeat(3,1fr);gap:14px}
.fcol{display:flex;flex-direction:column;align-items:center}
.fai2{margin-top:14px;max-width:560px}
.fseats{flex-direction:column;gap:14px}
.fseats-k{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fseats-k .fn{width:auto}
.fseats-r{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fseat{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 12px;border:1px solid var(--p-line);border-radius:6px;background:var(--paper)}
.fseat b{flex:1 1 100%;font-weight:600;font-size:13.5px}
.ch{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:4px}
.ch.fnk{background:var(--acc-l);color:#3f35a8}
.ch.wk{background:#3f35a8;color:#fff}
.ch.none{border:1px dashed #b5b5b5;color:#8a8a8a}
.fbind .fn{min-width:120px}
/* sequence */
.fseq{display:grid;gap:0;font-family:var(--sans);font-size:13px;min-width:520px;position:relative}
.fseq-h,.fseq-r{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.fseq-h{margin-bottom:6px}
.fseq-h span{justify-self:center;padding:7px 12px;border:1px solid var(--p-ink);border-radius:6px;background:var(--paper);font-weight:600;font-size:13px;white-space:nowrap}
.fseq-h span.srv{border-style:dashed;background:#f2f1ee}
.fseq-r{position:relative;min-height:40px;background:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--n) / 2 - .5px),#c9c6be calc(100% / var(--n) / 2 - .5px) calc(100% / var(--n) / 2 + .5px),transparent calc(100% / var(--n) / 2 + .5px) calc(100% / var(--n)))}
.fseq-m{position:relative;align-self:center;margin:0 calc(50% / var(--n) * 0);padding:0 calc(100% / 2 / var(--n) * 0)}
.fseq-m{margin-left:calc((100% / var(--span,2)) / 2);margin-right:calc((100% / var(--span,2)) / 2)}
.fseq-m span{display:block;padding:6px 8px 3px;font-family:var(--mono);font-size:11.5px;line-height:1.3;color:var(--p-ink);text-align:center;background:linear-gradient(#fff,#fff) center/auto 100% no-repeat}
.fseq-m i{position:relative;display:block;height:1.5px;background:var(--p-ink);margin-bottom:6px}
.fseq-m i::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--p-ink);border-right:0}
.fseq-m.back i::after{right:auto;left:-1px;border-left:0;border-right:7px solid var(--p-ink)}
.fseq-m.dash i{background:repeating-linear-gradient(90deg,var(--p-ink) 0 6px,transparent 6px 10px)}
.fseq-self{align-self:center;justify-self:center;max-width:94%;margin:5px 0;padding:6px 10px;border:1px solid rgba(91,79,207,.4);border-radius:6px;background:var(--acc-l);font-family:var(--mono);font-size:11.5px;line-height:1.3;color:#3f35a8;text-align:center}
/* motion: rows and links appear in order once the figure is in view */
.zfig-f .fseq-r,.zfig-f .fg-chain>*,.zfig-f .fg-chain .fcol>*{opacity:0;transform:translateY(4px)}
.zfig-f.seen .fseq-r{opacity:1;transform:none;transition:opacity .25s ease-out calc(var(--k) * 120ms),transform .25s ease-out calc(var(--k) * 120ms)}
.zfig-f.seen .fg-chain>*,.zfig-f.seen .fg-chain .fcol>*{opacity:1;transform:none;transition:opacity .25s ease-out calc(var(--k,0) * 110ms),transform .25s ease-out calc(var(--k,0) * 110ms)}
/* journey packet */
.fj{position:relative;height:34px;margin-top:14px;border-top:1px dashed var(--p-line)}
.fj-p{position:absolute;top:8px;left:0;display:grid;font-family:var(--mono);font-size:12px;white-space:nowrap;animation:fjMove 7s ease-in-out infinite}
.fj-p em{grid-area:1/1;font-style:normal;padding:3px 8px;border-radius:4px}
.fj-p .pl{background:var(--ok-l);color:var(--ok);animation:fjPl 7s ease-in-out infinite}
.fj-p .ct{background:#e9e7e1;color:#6a6a6a;opacity:0;animation:fjCt 7s ease-in-out infinite}
@keyframes fjMove{0%{left:0;transform:none}100%{left:100%;transform:translateX(-100%)}}
@keyframes fjPl{0%,30%{opacity:1}36%,64%{opacity:0}70%,100%{opacity:1}}
@keyframes fjCt{0%,30%{opacity:0}36%,64%{opacity:1}70%,100%{opacity:0}}
@media(max-width:900px){.fg-row{flex-direction:column}.fa:not(.v){min-height:40px;flex-direction:row}.fa:not(.v) i{width:1.5px;height:28px}.fa:not(.v) i::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:7px solid var(--p-ink);border-bottom:0}.fa2{max-width:none}.fsplit,.fsplit.three,.fseats-k,.fseats-r{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fj-p,.fj-p em{animation:none}.fj-p .ct{display:none}.zfig-f .fseq-r,.zfig-f .fg-chain>*,.zfig-f .fg-chain .fcol>*{opacity:1;transform:none}}

/* your view vs server view */
.zpair{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:1px solid var(--p-ink);border-radius:6px;overflow:hidden}
.zpair-k{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.zpair-y{padding:20px 22px;background:#fff}
.zpair-y .zpair-k{color:var(--ok)}
.zpair-y dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;font-size:17px;line-height:1.45}
.zpair-y dt{font-family:var(--mono);font-size:12px;color:var(--p-sec);padding-top:4px}
.zpair-y dd{margin:0}
.zpair-s{padding:20px 22px;background:#0d1b30;color:#dfe5ef}
.zpair-s .zpair-k{color:#9aa8bd}
.zpair-s pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all}
@media(max-width:900px){.zpair{grid-template-columns:1fr}}

/* figures reflow by their own width, not the viewport */
.zfig-f{container-type:inline-size}
.fz{min-width:min-content}
.fz .fn{min-width:0}
@container (max-width:700px){
 .fg-row,.fg-row.in{flex-direction:column;align-items:stretch}
 .fa:not(.v){min-height:40px;min-width:0;flex-direction:row;gap:10px;align-self:center}
 .fa:not(.v) i{width:1.5px;height:28px}
 .fa:not(.v) i::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4.5px solid transparent;border-top:7px solid var(--p-ink);border-bottom:0}
 .fa:not(.v) span{text-align:left;max-width:260px}
 .fa2{max-width:none;min-width:0;flex-direction:row;flex-wrap:wrap;gap:8px}
 .fa2 span{flex:1 1 200px;border-top:0;border-left:1.5px solid var(--p-ink)}
 .fsplit,.fsplit.three,.fseats-k{grid-template-columns:1fr}
 .fseats-r{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fz{min-width:0}
}