/* Agent Bridge demo (Design B: two sides of the bridge). Arcvane design system; colours checked for WCAG 2.2 AA. */
.ab-hero{background:radial-gradient(900px 500px at 50% 0%,rgba(31,75,255,.55),transparent 70%),var(--bg)}
.ab-hero .wrap{text-align:center}.ab-hero h1{margin-inline:auto;max-width:20ch}.ab-hero .lede{margin-inline:auto;max-width:720px}.ab-hero .chips,.ab-hero .label{justify-content:center}
.ab-hdiag{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;max-width:860px;margin:30px auto 0;text-align:left}
.ab-hdiag>div:not(.ab-lane){border:1px solid var(--line2);background:var(--card);padding:14px;font-size:14px}
.ab-hdiag b{display:block;font:700 17px var(--display)}.ab-hdiag small{color:var(--muted)}
.ab-lane{height:2px;background:repeating-linear-gradient(90deg,var(--lime) 0 10px,transparent 10px 18px);position:relative}
.ab-lane span{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font:500 12px var(--mono);color:var(--lime);background:var(--bg);padding:2px 8px;border:1px solid var(--lime);white-space:nowrap}
.ab-h2{font-size:clamp(26px,3vw,38px);margin-top:10px;line-height:1.08}
.ab-sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 30px;margin:64px 0 18px}
.ab-sh p{margin:0;color:var(--muted);max-width:520px}
.ab-pad{padding:12px 16px}.ab-note{font-size:13px;color:var(--muted);margin:0}
.ab-tw{overflow-x:auto}
.ab-empty{color:var(--muted);font-size:13.5px;list-style:none;padding:14px 16px}

/* picker */
.ab-picker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:18px}
.ab-biz{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);padding:8px 14px 8px 8px;background:var(--card);color:#fff;font:inherit;text-align:left;cursor:pointer;min-height:52px}
.ab-biz[aria-pressed="true"]{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.ab-biz b{font-size:14.5px;display:block}.ab-biz small{font-size:12px;color:var(--muted);display:block}
.ab-av{width:34px;height:34px;display:grid;place-items:center;color:#fff;font:700 15px var(--display);flex:none}

/* the bridge */
.ab-bridge{display:grid;grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);border:1px solid var(--line2);min-height:560px}
.ab-bridge>*{min-width:0}
.ab-side-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ab-side-h h2{font:600 15px Inter,sans-serif;letter-spacing:0;margin:0}
.ab-client{background:#F6F7FB;color:#111A33;display:flex;flex-direction:column}
.ab-client .ab-side-h{border-color:#DDE2EE}.ab-client .ab-side-h small{color:#4A5370;font:12px var(--mono)}
.ab-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;max-height:640px;min-height:300px}
.ab-hint{color:#4A5370;font-size:14px;margin:0}
.ab-m{max-width:88%;padding:11px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ab-m.u{align-self:flex-end;background:#111A33;color:#fff}
.ab-m.a{align-self:flex-start;background:#fff;border:1px solid #DDE2EE;color:#111A33}
.ab-m .who{display:block;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#4A5370;margin-bottom:4px}
.ab-chip{display:inline-flex;gap:6px;align-items:center;font:500 12px var(--mono);color:#3A4360;border:1px dashed #A9B1C7;padding:3px 8px;margin:6px 6px 0 0}
.ab-typing{color:#4A5370;font:13px var(--mono)}
.ab-sugg{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.ab-sugg button{font:13px Inter,sans-serif;border:1px solid #B9C0D4;background:#fff;color:#111A33;padding:7px 11px;cursor:pointer;min-height:36px;text-align:left}
.ab-sugg button:hover{border-color:#111A33}
.ab-compose{display:flex;border-top:1px solid #DDE2EE;background:#fff}
.ab-compose input{flex:1;min-width:0;border:0;padding:14px 16px;font:15px Inter,sans-serif;color:#111A33;background:transparent}
.ab-compose input::placeholder{color:#5A6380}
.ab-compose button{border:0;background:var(--lime);color:var(--lime-ink);font:600 15px Inter,sans-serif;padding:0 22px;cursor:pointer;min-height:50px}
.ab-compose button:disabled{opacity:.6;cursor:wait}
.ab-client :focus-visible{outline:3px solid #1F4BFF;outline-offset:2px}

/* approval card (inside the white client and in the deep-link section) */
.ab-appr{border:2px solid #C27C00;background:#FFF8E6;color:#111A33;padding:14px 16px;display:grid;gap:10px;max-width:100%}
.ab-appr h3{margin:0;font:600 15.5px Inter,sans-serif;display:flex;gap:8px;align-items:center;flex-wrap:wrap;letter-spacing:0}
.ab-appr .exp{margin-left:auto;font:500 12px var(--mono);color:#6B4A00;border:1px solid #C27C00;padding:2px 7px}
.ab-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font:13px var(--mono);margin:0}
.ab-kv dt{color:#4A5370}.ab-kv dd{margin:0;color:#111A33;overflow-wrap:anywhere}
.ab-appr .row{display:flex;gap:8px;flex-wrap:wrap}
.ab-appr button{font:600 14.5px Inter,sans-serif;min-height:44px;padding:0 18px;border:0;cursor:pointer}
.ab-appr .yes{background:#111A33;color:#D4FF3F}.ab-appr .no{background:#fff;color:#111A33;box-shadow:inset 0 0 0 1.5px #8A93AD}
.ab-appr p{margin:0;font-size:13px;color:#3A4360}
.ab-appr.done{border-color:#1E7D45;background:#EEFAF2}.ab-appr.denied{border-color:#8A93AD;background:#F1F3F8}
.ab-rc{border:1px solid #2E7D52;background:rgba(83,214,138,.08);padding:12px 14px;display:grid;gap:8px}
.ab-rc .diff{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.ab-rc .diff div{padding:9px 11px;font:12.5px/1.55 var(--mono);color:var(--muted)}
.ab-rc .diff div:first-child{border-right:1px solid var(--line)}
.ab-rc .diff b{display:block;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ab-rc .diff div:last-child{color:#fff}
.ab-rc small{font:12px var(--mono);color:var(--muted)}

/* wire */
.ab-wire{background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px),#06144A;border-inline:1px solid var(--line2);padding:12px 10px;overflow-y:auto;max-height:760px}
.ab-wire h2{text-align:center;margin:0 0 10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em}
.ab-packets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ab-pk{border:1px solid var(--line2);background:var(--card);padding:8px 9px;font:11.5px/1.45 var(--mono);color:var(--muted);position:relative;animation:abIn .25s ease-out}
.ab-pk b{color:#fff;font-weight:500;display:block;overflow-wrap:anywhere}
.ab-pk .ms{color:var(--lime)}
.ab-pk.go{margin-right:16px}.ab-pk.go::after{content:"→";position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--lime)}
.ab-pk.back{margin-left:16px;border-color:#2E7D52}.ab-pk.back::after{content:"←";position:absolute;left:-15px;top:50%;transform:translateY(-50%);color:#53D68A}
.ab-pk.hold{border-color:#C27C00;background:rgba(255,194,75,.08)}
.ab-pk.err{border-color:#B44}
.ab-pk details summary{cursor:pointer;color:var(--lime);font-size:11px;margin-top:4px}
.ab-pk pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0;font:10.5px/1.45 var(--mono);color:var(--muted);max-height:200px;overflow:auto}
@keyframes abIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ab-pk{animation:none}}

/* server side */
.ab-server{background:var(--card);display:flex;flex-direction:column}
.ab-t{width:100%;border-collapse:collapse;font:12.5px var(--mono)}
.ab-t th,.ab-t td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;color:var(--muted);vertical-align:top}
.ab-t thead th{color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.ab-t tbody th{color:#fff;font-weight:500}
.ab-t tr.new td{background:rgba(83,214,138,.10);color:#fff}
.ab-t tr.held td{background:rgba(255,194,75,.10);color:#FFD58A}
.ab-t tr.mine td{background:rgba(212,255,63,.06)}
.ab-t .tag{white-space:nowrap}
.ab-t small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.tag.bad{color:#FFB3B3;border-color:#A84444}

/* trace timeline */
.ab-trace{margin-top:14px}
.ab-tl{list-style:none;margin:0;padding:0}
.ab-tl li.e{display:grid;grid-template-columns:28px 1fr auto;gap:2px 10px;padding:10px 16px;border-bottom:1px solid var(--line);align-items:start}
.ab-tl .ic{width:24px;height:24px;display:grid;place-items:center;font:600 10.5px var(--mono);border:1px solid var(--line2);color:var(--muted)}
.ab-tl .read .ic{border-color:#2E7D52;color:#53D68A}.ab-tl .write .ic{border-color:#C27C00;color:#FFC24B}.ab-tl .guard .ic{border-color:#A84444;color:#FF9C9C}.ab-tl .ai .ic,.ab-tl .human .ic{border-color:var(--lime);color:var(--lime)}.ab-tl .error .ic{border-color:#A84444;color:#FF9C9C}
.ab-tl .nm{font:500 13px var(--mono);color:#fff}.ab-tl .ms{font:12px var(--mono);color:var(--lime);white-space:nowrap}
.ab-tl .sub{grid-column:2/4;font-size:13px;color:var(--muted);overflow-wrap:anywhere}

/* approve deep link */
.ab-approve{margin-top:28px;border:1px solid var(--lime);padding:20px;background:rgba(212,255,63,.05)}
.ab-approve .ab-appr{max-width:620px;margin-top:14px}

/* server today */
.ab-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line2)}
.ab-kpis div{padding:16px 18px;border-right:1px solid var(--line2);background:var(--card)}
.ab-kpis div:last-child{border-right:0}
.ab-kpis b{display:block;font:800 32px var(--display);margin-top:6px}
.ab-clients{font:13px var(--mono);color:var(--muted);margin:10px 0 0}

/* connect */
.ab-cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.ab-cgrid>*{min-width:0}
.ab-term{background:#030C33;border:1px solid var(--line2);padding:16px}
.ab-url{display:flex;border:1px solid var(--line2);background:rgba(0,0,0,.3)}
.ab-url code{flex:1;min-width:0;padding:12px 14px;font:500 14.5px var(--mono);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-url button{border:0;background:var(--lime);color:var(--lime-ink);font:600 14px Inter,sans-serif;padding:0 16px;cursor:pointer;min-height:46px}
.ab-tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;margin-top:14px}
.ab-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:500 14px Inter,sans-serif;padding:11px 14px;cursor:pointer;white-space:nowrap;min-height:44px}
.ab-tabs button[aria-selected="true"]{color:#fff;border-color:var(--lime)}
.ab-steps{margin:16px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.ab-steps li{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:14.5px;color:var(--muted);counter-increment:s}
.ab-steps li::before{content:counter(s);width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--lime);color:var(--lime);font:600 12px var(--mono)}
.ab-steps b,.ab-steps code{color:#fff}.ab-steps code{font:13px var(--mono)}
.ab-term .chips{margin-top:16px}

/* attack arena */
.ab-arena{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ab-atk{border:1px solid var(--line2);background:var(--card);padding:18px;display:grid;gap:12px;align-content:start;min-width:0}
.ab-atk h3{font:700 19px var(--display)}.ab-atk>p{margin:0;color:var(--muted);font-size:14.5px}
.ab-red{background:#FF6B6B;color:#1A0000;justify-self:start}.ab-red:hover{background:#FF8A8A}
.ab-rule{font:12px var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin:0}
.ab-atk-out{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ab-atk-out:empty{display:none}
.ab-atk-out li{font-size:13px;color:var(--muted);border-left:2px solid var(--line2);padding:2px 0 2px 10px;overflow-wrap:anywhere}
.ab-atk-out li.guard{border-color:#FF6B6B;color:#fff}.ab-atk-out li.proof{border-color:#53D68A;color:#fff;font-weight:600}
.ab-atk-out code{display:block;font:11.5px/1.5 var(--mono);color:var(--muted);margin-top:3px}
.ab-stamp{font:800 12.5px var(--mono);letter-spacing:.12em;color:#FF9C9C;border:2px solid #FF9C9C;padding:2px 8px;transform:rotate(-3deg);display:inline-block;justify-self:start}
.ab-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.ab-g2>*{min-width:0}
.ab-meter{margin-bottom:12px}.ab-meter div{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}.ab-meter b{font:500 13px var(--mono);color:#fff}
.ab-meter .bar{height:6px;background:rgba(255,255,255,.1);margin-top:6px;position:relative}.ab-meter .bar i{position:absolute;inset:0 auto 0 0;background:var(--lime)}.ab-meter.warn .bar i{background:#FFC24B}

/* your turn (paper) */
.ab-paper{background:#F6F7FB;color:#111A33;border:1px solid #DDE2EE;padding:22px;min-width:0}
.ab-paper h3{font:700 22px var(--display);margin:0 0 14px;color:#111A33}
.ab-paper label{display:block;font-size:14px;color:#3A4360;margin-bottom:6px}
.ab-paper textarea,.ab-paper input{width:100%;border:1px solid #9AA3BC;background:#fff;color:#111A33;padding:11px 12px;font:15px Inter,sans-serif;resize:vertical}
.ab-paper :focus-visible{outline:3px solid #1F4BFF;outline-offset:2px}
.ab-row{display:flex;gap:8px}.ab-row input{flex:1;min-width:0}
.ab-dark{background:#111A33;color:#D4FF3F;margin-top:10px}.ab-row .ab-dark{margin-top:0}
.ab-paper .ab-note{color:#3A4360;margin-top:12px}
.ab-res{margin-top:16px;display:grid;gap:12px}
.ab-res .k{color:#4A5370}
.ab-chips{display:flex;flex-wrap:wrap;gap:6px}
.ab-chips span{font:500 12.5px var(--mono);border:1px solid #111A33;background:#111A33;color:#D4FF3F;padding:4px 9px}
.ab-tools{list-style:none;margin:0;padding:0}
.ab-tools li{display:flex;justify-content:space-between;gap:10px;font:12.5px var(--mono);padding:7px 0;border-bottom:1px solid #DDE2EE}
.ab-tools .w{color:#8A4B00}.ab-tools .r{color:#166534}
.ab-plan{background:#111A33;color:#fff;padding:16px}
.ab-plan .k{color:#C3CEF2}.ab-plan b{display:block;font:700 20px var(--display);margin-top:4px}.ab-plan .p{font:800 32px var(--display);color:#D4FF3F;margin-top:6px}.ab-plan small{color:#C3CEF2;font-size:13px}
.ab-score{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ab-ring{--p:0;width:120px;height:120px;border-radius:50%;background:conic-gradient(#1F4BFF calc(var(--p)*1%),#DDE2EE 0);display:grid;place-items:center;flex:none}
.ab-ring::before{content:"";grid-area:1/1;width:94px;height:94px;border-radius:50%;background:#F6F7FB}
.ab-ring b{grid-area:1/1;position:relative;font:800 30px var(--display);text-align:center;line-height:1}.ab-ring small{display:block;font:500 12px var(--mono);color:#4A5370}
.ab-crit{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ab-crit li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;font-size:14px;color:#111A33}
.ab-crit .ok{color:#166534}.ab-crit .mid{color:#8A4B00}.ab-crit .no{color:#B42318}
.ab-crit span:last-child{font:12.5px var(--mono);color:#3A4360}
.ab-err{color:#B42318;font-size:14px;margin:10px 0 0}

/* article + diagrams */
.ab-read{max-width:820px}
.ab-read p{color:var(--muted);font-size:17px;line-height:1.7}
.ab-read h3{font-size:22px;margin:34px 0 10px}
.ab-read a{color:var(--lime)}
.ab-fig{margin:26px 0;border:1px solid var(--line2);background:var(--card);padding:16px}
.ab-fig svg{width:100%;height:auto;display:block}
.ab-fig figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}
.ab-fig .n{fill:#12319A;stroke:#3D5CC8;stroke-width:1.5}.ab-fig .n.hl{stroke:#D4FF3F;stroke-width:2}.ab-fig .n.wt{stroke:#FFC24B}.ab-fig .n.ok{stroke:#53D68A}
.ab-fig .t{fill:#fff;font:600 15px Inter,sans-serif;text-anchor:middle}.ab-fig .s{fill:#C3CEF2;font:12.5px Inter,sans-serif;text-anchor:middle}.ab-fig .l{text-anchor:start}
.ab-fig .m{fill:#D4FF3F;font:600 11px ui-monospace,monospace;text-anchor:middle}
.ab-fig .w{stroke:#D4FF3F;stroke-width:2;fill:none;stroke-dasharray:6 5}.ab-fig .w.b{stroke:#53D68A}
.related{margin-top:26px;color:var(--muted);font-size:14.5px}.related a{color:#fff}

@media(max-width:1100px){.ab-bridge{grid-template-columns:1fr}.ab-wire{border-inline:0;border-block:1px solid var(--line2);max-height:340px}.ab-cgrid{grid-template-columns:1fr}}
@media(max-width:900px){.ab-arena{grid-template-columns:1fr}.ab-g2{grid-template-columns:1fr}.ab-kpis{grid-template-columns:1fr 1fr}.ab-kpis div:nth-child(2){border-right:0}.ab-kpis div:nth-child(-n+2){border-bottom:1px solid var(--line2)}}
@media(max-width:720px){.ab-hdiag{grid-template-columns:1fr;gap:34px}.ab-lane{height:30px;width:2px;margin:0 auto;background:repeating-linear-gradient(180deg,var(--lime) 0 8px,transparent 8px 14px)}.ab-lane span{left:14px;top:6px;transform:none}
 .ab-rc .diff{grid-template-columns:1fr}.ab-rc .diff div:first-child{border-right:0;border-bottom:1px solid var(--line)}.ab-m{max-width:96%}
 .ab-t thead{display:none}.ab-t,.ab-t tbody{display:block}.ab-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:9px 12px;border-bottom:1px solid var(--line)}.ab-t td,.ab-t th{border:0;padding:0}.ab-t td:nth-child(even){text-align:right}
 .ab-sh{margin-top:48px}.ab-biz{width:100%}}
/* shared .tier.hot used --dim on --card2 (4.39:1); lifted to --muted on this page for WCAG AA */
.tier.hot .k,.tier.hot .p small{color:var(--muted)}
.ab-tw:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
/* compact JSON toggles inside wire packets (site.css styles FAQ <details> boxes) */
.ab-pk details{border:0;padding:0;margin:4px 0 0;background:none}
.ab-pk details summary{display:inline;list-style:none;border:0;padding:0;margin:0;background:none;font:500 11px var(--mono);color:var(--lime);cursor:pointer;min-height:24px}
.ab-pk details summary::-webkit-details-marker{display:none}
.ab-pk details summary::after,.ab-pk details summary::before{content:none!important}
.ab-pk details summary::before{content:"▸ "!important}.ab-pk details[open] summary::before{content:"▾ "!important}
.ab-t td:first-child{white-space:nowrap}
.ab-audit .tag,#auditFull .tag{white-space:normal}
.ab-t .tag{display:inline-block;line-height:1.35}