/* Agent Onboarding demo: sources connect, an identity card fills in, the first task runs under its gates. */
.ao-h {min-height:1.05em;font:400 clamp(2.1rem,4.2vw,4.4rem)/1.04 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.ao-stage {position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.4rem,4vw,3.6rem);padding-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--rule)}
.ao-sources {list-style:none;margin:0;padding:0;display:grid;gap:.15rem;align-content:start}
.ao-sources li {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--rule);font-size:.875rem;line-height:1.35;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ao-sources b {font-weight:500;color:var(--ink)}
.ao-sources span {grid-column:1;color:var(--ink-2);font-size:.8125rem}
.ao-sources em {grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:.75rem;color:var(--ink-2);text-align:right;transition:color .4s}
.ao-sources em[data-scope="gated"] {color:var(--oxide)}
.ao-sources li.is-on b::before {content:'';display:inline-block;width:7px;height:7px;margin-right:.55rem;border-radius:50%;background:var(--oxide);vertical-align:.1em}
.ao-card {align-self:start;padding:clamp(1.4rem,2.4vw,2rem);border:1px solid var(--ink);background:var(--raised,transparent);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.ao-card-k,.ao-task-k {font-size:.75rem;letter-spacing:.02em;color:var(--ink-2)}
.ao-name {margin-top:.2rem;font:400 clamp(2.2rem,3.4vw,3rem)/1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.03em;color:var(--ink)}
.ao-id {margin:1.2rem 0 0;display:grid;gap:.55rem}
.ao-id div {display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.8rem;font-size:.8125rem;line-height:1.45}
.ao-id dt {color:var(--ink-2)}
.ao-id dd {margin:0;color:var(--ink);transition:opacity .4s}
.ao-gates {list-style:none;margin:1.3rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule);display:grid;gap:.7rem}
.ao-gates li {display:grid;gap:.1rem;padding-left:1rem;border-left:2px solid var(--oxide);font-size:.8125rem;line-height:1.4;transition:opacity .5s var(--ease)}
.ao-gates b {font-weight:500;color:var(--ink)}
.ao-gates span {color:var(--ink-2)}
.ao-task {align-self:start;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.ao-msg {margin-top:.6rem;padding:1rem 1.1rem;background:color-mix(in srgb,var(--ink) 6%,transparent);font:400 1.05rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.ao-msg span,.ao-draft span {display:block;margin-bottom:.35rem;font:400 .75rem/1.3 'Hanken Grotesk','Hanken Fallback',Arial,sans-serif;color:var(--ink-2)}
.ao-steps {list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem;font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.ao-steps li {padding-left:1.1rem;position:relative;transition:opacity .45s var(--ease)}
.ao-steps li::before {content:'';position:absolute;left:0;top:.55em;width:.5rem;height:1px;background:var(--oxide)}
.ao-draft {margin-top:1rem;padding:1rem 1.1rem;border:1px dashed var(--oxide);font:400 1.05rem/1.45 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink);transition:opacity .6s var(--ease)}
.ao-draft span {color:var(--oxide)}
.ao-wires {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ao-wires path {fill:none;stroke:var(--oxide);stroke-width:1;opacity:.45;transition:stroke-dashoffset .9s var(--ease)}
.ao-w {display:inline-block;animation:ao-word .6s var(--ease) both}
@keyframes ao-word {from{opacity:0;filter:blur(6px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}

/* Phases. Without a phase the markup shows the finished onboarding. */
.ao[data-phase] .ao-sources li:not(.is-on) {opacity:.28}
.ao[data-phase] .ao-card:not(.is-on) {opacity:0;transform:translateY(10px)}
.ao[data-phase] .ao-id dd:not(.is-on),.ao[data-phase] .ao-gates li:not(.is-on) {opacity:0}
.ao[data-phase] .ao-task:not(.is-on) {opacity:0;transform:translateY(10px)}
.ao[data-phase] .ao-steps li:not(.is-on),.ao[data-phase] .ao-draft:not(.is-on) {opacity:0}
.ao:not([data-phase]) .ao-sources li b::before {content:'';display:inline-block;width:7px;height:7px;margin-right:.55rem;border-radius:50%;background:var(--oxide);vertical-align:.1em}

@media(max-width:900px){
 .ao-stage {grid-template-columns:1fr;gap:2rem}
 .ao-wires {display:none}
}