/* MERGE.ai Test: abstract synthetic-panel animation.
   Ten agents react to an idea one by one, the questions and flags get resolved, the idea is marked tested.
   test-panel.js runs the loop while it's on screen. Brand colours only. */
.wma-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#test .wma-agents-head{gap:12px;justify-items:start}
.wma-agents{margin:0;width:100%;max-width:360px}
.wma-agents svg{display:block;width:100%;height:auto;overflow:visible}
.wma-agents-cap{max-width:290px;font:400 14px/1.45 Epilogue,sans-serif;color:color-mix(in srgb,var(--paper) 86%,transparent)}
.wma-agents-cap b{display:block;margin-bottom:5px;font:600 11px/1 Epilogue,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}

.ag-links,.ag-nodes,.ag-card{transition:opacity .5s}
.ag-link{fill:none;stroke:color-mix(in srgb,var(--mint) 55%,transparent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease)}
.ag-card{transform-box:fill-box;transform-origin:50% 50%;transition:opacity .45s,transform .6s var(--ease)}
.ag-card-bg{fill:var(--web)}
.ag-bar{fill:color-mix(in srgb,var(--ink) 26%,transparent);transition:width .6s var(--ease),fill .5s}
.ag-badge{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.ag-badge rect{fill:var(--mint);stroke:var(--ink);stroke-width:2}
.ag-badge text{font:700 9.5px/1 Epilogue,sans-serif;letter-spacing:.02em;fill:var(--ink)}
.ag-ring{fill:transparent;stroke:color-mix(in srgb,var(--mint) 40%,transparent);stroke-width:1.5;transition:fill .35s,stroke .35s}
.ag-node [class^=av-]{transition:fill .35s,stroke .35s}
/* Agents are robots dressed by medical role (coats, scrubs, caps, stethoscope, cross, pill, clipboard).
   Grey silhouettes until the agent reacts, then in brand colours. */
.av-skin{fill:color-mix(in srgb,var(--paper) 55%,transparent)}
.av-coat,.av-scrub,.av-scrub2,.av-shirt,.av-cap,.av-capw,.av-mask,.av-visor{fill:color-mix(in srgb,var(--paper) 28%,transparent)}
.av-cross,.av-eye{fill:color-mix(in srgb,var(--ink) 55%,transparent)}
.av-line,.av-ecg{fill:none;stroke:color-mix(in srgb,var(--paper) 55%,transparent);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.av-ecg{stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:.9}
.av-dot{fill:color-mix(in srgb,var(--paper) 55%,transparent)}
.ag-chip{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ag-chip circle{fill:var(--mint);stroke:var(--ink);stroke-width:2;transition:fill .3s}
.ag-node[data-r=ask] .ag-chip circle{fill:var(--merge-cyan)}
.ag-node[data-r=flag] .ag-chip circle{fill:var(--paper)}
.ag-g{font:700 10px/1 Epilogue,sans-serif;fill:var(--ink);transition:opacity .25s}
.ag-g-ok{opacity:0}

/* States (set by test-panel.js) */
.motion .wma-agents:not(.is-card) .ag-card{opacity:0;transform:scale(.86)}
.ag-link.is-on{stroke-dashoffset:0}
.ag-node.is-on .ag-ring{fill:var(--mint);stroke:var(--mint)}
.ag-node.is-on .av-skin,.ag-node.is-on .av-dot{fill:var(--ink)}
.ag-node.is-on .av-coat,.ag-node.is-on .av-mask,.ag-node.is-on .av-capw,.ag-node.is-on .av-visor{fill:var(--web)}
.ag-node.is-on .av-scrub,.ag-node.is-on .av-cap,.ag-node.is-on .av-cross{fill:var(--merge-teal)}
.ag-node.is-on .av-scrub2,.ag-node.is-on .av-shirt{fill:var(--merge-deep-sea)}
.ag-node.is-on .av-eye{fill:var(--ink)}
.ag-node.is-on .av-line{stroke:var(--ink)}
.ag-node.is-on .av-ecg{stroke:var(--vir)}
.ag-node.is-said .ag-chip{transform:scale(1)}
.ag-node.is-ok .ag-chip circle{fill:var(--mint)}
.ag-node.is-ok .ag-g-first{opacity:0}
.ag-node.is-ok .ag-g-ok{opacity:1}
.wma-agents.is-refined .ag-bar-2{width:46px}
.wma-agents.is-refined .ag-bar-3{fill:var(--vir)}
.wma-agents.is-tested .ag-badge{transform:scale(1);opacity:1}
.wma-agents.is-out .ag-links,.wma-agents.is-out .ag-nodes,.wma-agents.is-out .ag-card{opacity:0}

/* Reduced motion or no script: the finished state. */
html:not(.motion) .ag-link{stroke-dashoffset:0}
html:not(.motion) .ag-ring{fill:var(--mint);stroke:var(--mint)}
html:not(.motion) .av-skin,html:not(.motion) .av-dot{fill:var(--ink)}
html:not(.motion) .av-coat,html:not(.motion) .av-mask,html:not(.motion) .av-capw,html:not(.motion) .av-visor{fill:var(--web)}
html:not(.motion) .av-scrub,html:not(.motion) .av-cap,html:not(.motion) .av-cross{fill:var(--merge-teal)}
html:not(.motion) .av-scrub2,html:not(.motion) .av-shirt{fill:var(--merge-deep-sea)}
html:not(.motion) .av-eye{fill:var(--ink)}
html:not(.motion) .av-line{stroke:var(--ink)}
html:not(.motion) .av-ecg{stroke:var(--vir)}
html:not(.motion) .ag-chip{transform:scale(1)}
html:not(.motion) .ag-node .ag-chip circle{fill:var(--mint)}
html:not(.motion) .ag-g-first{opacity:0}
html:not(.motion) .ag-node[data-r=ok] .ag-g-first,html:not(.motion) .ag-g-ok{opacity:1}
html:not(.motion) .ag-bar-2{width:46px}
html:not(.motion) .ag-bar-3{fill:var(--vir)}
html:not(.motion) .ag-badge{transform:scale(1);opacity:1}

@media (max-width:900px){
 .wma-agents{max-width:320px}
 .wma-agents-cap{font-size:13.5px}
}