/* Voice Studio, Why Atlas (B1, round 14, DIRECTION_3): the reader's contact centre with the call heard in one room. Prefix vs-. */
.vs-cc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-top:clamp(64px,7vw,104px)}
.vs-cc-side{grid-column:9 / 13;grid-row:2;align-self:center;position:relative;z-index:2;padding:22px 22px 24px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,15,.1)}
.vs-cc-side .vs-cc-panel{margin-top:0}
/* r19 (client 341-343): the pills and Preview conversation on one row above the whole diagram; the conversation a panel over its right */
.vs-cc-bar{grid-column:1 / 11;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.vs-cc-bar .vs-listen{margin-left:auto}
/* r17 (client 307), r19 (342): the three calls as pills, like page tabs, now above the whole diagram */
.vs-cc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.vs-cc-tabs button{all:unset;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#e6e7e4;font:var(--w-h3) var(--s-body)/1.2 var(--f);color:var(--ink2);transition:background-color var(--t1) var(--ease),color var(--t1) var(--ease)}
.vs-cc-tabs button:hover{color:var(--ink)}
.vs-cc-tabs button.on{background:var(--ink);color:#fff}
.vs-cc-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vs-cc-panel{margin-top:26px}
.vs-cc-panel[hidden]{display:none}
.paper .vs-cc-ctx{font:500 var(--s-small)/1.4 var(--f);color:var(--ink2)}
.vs-cc-agent{display:flex;align-items:center;gap:10px;margin-top:18px}
.vs-cc-agent .vs-mk{width:30px;height:30px}
.vs-cc-agent strong{font:560 var(--s-body)/1.25 var(--f);color:var(--ink)}
.vs-meter{display:inline-flex;align-items:center;gap:3px;height:18px;margin-left:6px}
.vs-meter i{display:block;width:3px;height:5px;border-radius:2px;background:rgba(14,15,15,.3);transition:background-color .2s}
.vs-cc-panel.talking .vs-meter i{background:var(--verm);animation:vs-meter .55s ease-in-out infinite alternate}
.vs-cc-panel.talking .vs-meter i:nth-child(2){animation-delay:.12s}.vs-cc-panel.talking .vs-meter i:nth-child(3){animation-delay:.24s}
.vs-cc-panel.talking .vs-meter i:nth-child(4){animation-delay:.08s}.vs-cc-panel.talking .vs-meter i:nth-child(5){animation-delay:.2s}
@keyframes vs-meter{from{height:4px}to{height:17px}}
.vs-cc-lines{margin:14px 0 0;padding:0;list-style:none}
.paper .vs-cc-lines li{position:relative;padding:9px 0 9px 18px;border-top:1px solid var(--iline);font:400 var(--s-body)/1.45 var(--f);color:var(--ink2);transition:opacity .25s,color .25s}
.paper .vs-cc-lines li.a{color:var(--ink)}
.vs-cc-lines li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(14,15,15,.45)}
.vs-cc-lines li.a::before{background:var(--ink);border-color:var(--ink)}
.vs-cc-panel.playing li{opacity:.14}
.vs-cc-panel.playing li.on{opacity:1}
.paper .vs-cc-panel.playing li.now{color:var(--ink)}
.vs-cc-panel.playing li.now::before{border-color:var(--verm)}
.vs-cc-panel.playing li.a.now::before{background:var(--verm)}
.paper .vs-cc-res{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,15,.08);font:560 var(--s-body)/1.4 var(--f);color:var(--ink);transition:opacity .3s,transform .4s var(--spring)}
.vs-cc-panel.playing .vs-cc-res{opacity:.14}
.vs-cc-panel.done .vs-cc-res{animation:vs-land .5s var(--spring)}
@keyframes vs-land{from{transform:translateY(8px) scale(.98)}to{transform:none}}

/* the schematic: a technical line diagram of the call on a drawing sheet */
.vs-sch{grid-column:1 / 11;grid-row:2;position:relative;margin:0;padding:30px calc(28px + (100% + var(--gap)) / 5) 26px 28px;border-radius:16px;background:#fff radial-gradient(circle,rgba(14,15,15,.11) 1px,transparent 1.3px) 0 0 / 18px 18px;box-shadow:0 0 0 1px rgba(14,15,15,.1);--sch:row}
.vs-sch::before,.vs-sch::after{content:'';position:absolute;width:16px;height:16px;border:1.5px solid var(--ink)}
.vs-sch::before{left:12px;top:12px;border-right:0;border-bottom:0}
.vs-sch::after{right:12px;bottom:12px;border-left:0;border-top:0}
.vs-sch-grid{position:relative;z-index:1;display:grid;grid-template-columns:44px repeat(3,minmax(0,1fr));grid-template-areas:"call speech op hand" ". acc sys done";column-gap:34px;row-gap:92px;align-items:center}
.vs-blk--op{margin-left:44px}
.vs-caller{grid-area:call}.vs-blk[data-n="speech"]{grid-area:speech}.vs-blk--op{grid-area:op}.vs-blk--acc{grid-area:acc}.vs-blk[data-n="sys"]{grid-area:sys}
.vs-out{display:contents}
.vs-c2--res{grid-area:done;justify-self:start}.vs-c2--hand{grid-area:hand;justify-self:start}
.vs-sub{white-space:nowrap}
.vs-caller svg{display:block;width:40px;height:auto;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vs-caller .vs-fine{stroke-width:1.1}
.vs-caller.now svg{stroke:var(--verm)}
.vs-blk{position:relative;display:flex;flex-direction:column;gap:7px;padding:10px 10px 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.3px rgba(14,15,15,.75);transition:box-shadow .2s}
.vs-blk-t{padding:0 2px 8px;margin-bottom:2px;border-bottom:1px solid var(--iline);font:560 var(--s-small)/1.25 var(--f);color:var(--ink)}
.vs-sub{display:block;padding:7px 9px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(14,15,15,.16);background:#fbfbfa;font:500 var(--s-small)/1.25 var(--f);color:var(--ink2);transition:box-shadow .2s,color .2s,background-color .2s}
.vs-blk--acc{background:repeating-linear-gradient(135deg,rgba(14,15,15,.06) 0 1px,transparent 1px 7px),#fff;box-shadow:none;outline:1.3px dashed rgba(14,15,15,.7);outline-offset:-1px}
.vs-blk.now{box-shadow:inset 0 0 0 1.6px var(--verm)}
.vs-blk--acc.now{outline-color:var(--verm)}
.vs-sub.now{box-shadow:inset 0 0 0 1.4px var(--verm);color:var(--ink);background:#fff}
.vs-sub.sel{color:var(--ink);box-shadow:inset 0 0 0 1.2px rgba(14,15,15,.6)}
.vs-sub.sel.now{box-shadow:inset 0 0 0 1.6px var(--verm);background:rgba(226,70,42,.06)}
.vs-c2{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,15,.3);font:500 var(--s-small)/1.2 var(--f);color:var(--ink);white-space:nowrap;transition:box-shadow .25s}
.vs-c2--res{font-weight:560}
.vs-c2--res .vs-tick{width:18px;height:18px;margin-left:-5px;background:rgba(14,15,15,.2);transition:background-color .25s}
.vs-c2--res .vs-tick::after{left:6px;top:3px;width:5px;height:9px}
.vs-c2--res.lit{box-shadow:0 0 0 1.6px var(--verm)}
.vs-c2--res.lit .vs-tick{background:var(--verm)}
.vs-c2--hand{display:none}
.vs-sch.is-branch .vs-c2--hand{display:inline-flex}
.vs-wl{position:absolute;left:0;top:0;z-index:2;padding:1px 5px;border-radius:4px;background:#fff;font:500 var(--s-small)/1.2 var(--f);color:var(--ink2);white-space:nowrap;pointer-events:none}
.vs-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.vs-w{fill:none;stroke:rgba(14,15,15,.3);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.vs-w.on{stroke:rgba(14,15,15,.85)}
.vs-sch.is-playing .vs-w.on{stroke:var(--verm);stroke-width:1.7}
.vs-w.off{stroke:rgba(14,15,15,.16);stroke-dasharray:2 4}
.vs-listen{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:54px;margin-top:0;padding:0 24px 0 12px;border-radius:999px;background:var(--ink);color:#fff;font:var(--w-h3) var(--s-lede)/1 var(--f);white-space:nowrap;transition:background-color .2s;position:relative;z-index:2}
.vs-listen i{width:32px;height:32px;border-radius:50%;background:#fff;position:relative;flex:none}
.vs-listen i::after{content:'';position:absolute;left:12px;top:9px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink)}
.vs-listen[aria-pressed="true"]{background:var(--verm)}
.vs-listen[aria-pressed="true"] i::after{left:10px;top:10px;width:4px;height:12px;border:0;background:var(--verm);box-shadow:8px 0 0 var(--verm)}
.vs-listen:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:900px){
  .vs-cc{display:flex;flex-direction:column;align-items:stretch}
  .vs-cc-side{margin-top:24px;padding:20px 16px 22px}
  .vs-cc-bar{margin-bottom:20px}
  .vs-sch{padding:22px 16px 20px 30px;--sch:col}
  .vs-sch-grid{display:flex;flex-direction:column;align-items:stretch;gap:26px}
  .vs-caller{align-self:flex-start;order:1}.vs-blk[data-n="speech"]{order:2}.vs-blk--op{order:3}.vs-blk--acc{order:4}.vs-blk[data-n="sys"]{order:5}
  .vs-c2--res{order:6;align-self:flex-start}.vs-c2--hand{order:7;align-self:flex-start}
  .vs-sub{white-space:normal}
  .vs-blk--op{margin-left:0}
  .vs-wl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vs-blk,.vs-sub,.vs-c2,.vs-w,.vs-listen{transition:none!important}
  .vs-cc-panel.talking .vs-meter i{animation:none}
}

/* r19 (client 363): the conversation is a smaller screen in front of the larger diagram (it covers two of the diagram's columns, kept
   clear inside it), set in the smaller type step so it stands within the diagram's height */
.paper .vs-cc-side .vs-cc-lines li{padding:7px 0 7px 16px;font-size:var(--s-small);line-height:1.4}
.vs-cc-side .vs-cc-lines li::before{top:13px}
.vs-cc-side .vs-cc-agent{margin-top:12px}
.paper .vs-cc-side .vs-cc-res{margin-top:12px;padding:11px 12px;font-size:var(--s-small)}