/* HumAva Voice Studio (4 Nov 2026). Builds on app.css + suite.css — same Resonance tokens. */
html{scroll-padding-top:92px}
.vs{padding:18px var(--pad) 70px;max-width:1500px;margin:0 auto}
.vs .vpanel,.vcard,#segList li{scroll-margin-top:92px}
.vs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vs-hero{margin:10px 0 22px}
.vs-hero h1{font:500 clamp(30px,4.4vw,54px)/1.05 var(--disp);letter-spacing:-.03em;margin:6px 0 10px}
.vs-hero .iri{background:var(--iri);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-hero .lede{max-width:72ch;color:var(--mute);margin:0}
.vs code{font:500 13px var(--mono);background:var(--base3);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--lilac)}
#labNote{color:var(--warn)}
.vs-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
@media (max-width:1100px){.vs-grid{grid-template-columns:1fr}}
.vs .vpanel{border:1px solid var(--line);border-radius:var(--r);background:rgba(22,12,28,.72);padding:18px 18px 16px;margin:0 0 18px}
.vhead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.vhead .hint{margin:0;max-width:70ch}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row-btns input,.row-btns select{width:auto;min-width:180px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{font:500 13px var(--body);color:var(--mute);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.tab.on{color:#1a0610;background:var(--coral);border-color:var(--coral)}
.filters{display:grid;grid-template-columns:180px 150px 1fr;gap:10px;margin-bottom:12px}
@media (max-width:640px){.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}}

/* voice cards */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;max-height:380px;overflow:auto;padding:2px}
.vcard{position:relative;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--base2);padding:12px 12px 10px 52px;cursor:pointer;color:var(--ink);font:inherit;min-height:74px;transition:border-color .25s,transform .25s var(--ease)}
.vcard:hover{border-color:var(--lilac);transform:translateY(-1px)}
.vcard.on{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral),0 14px 40px -18px rgba(255,92,138,.7)}
.vcard .av{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--disp);color:#1a0610;background:var(--iri);background-size:200% 100%}
.vcard.speaking .av{animation:pulse 1s var(--ease) infinite}
.vcard b{display:block;font:500 14px/1.25 var(--disp);letter-spacing:-.01em}
.vcard small{display:block;color:var(--mute);font-size:12.5px;line-height:1.35;margin-top:3px}
.vcard .tagl{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lilac)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,138,.6)}50%{box-shadow:0 0 0 8px rgba(255,92,138,0)}}

/* script */
#script{min-height:140px;font-size:16px;line-height:1.55}
.tagbar{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.tagbar .mono{padding-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 12px var(--mono);color:var(--lilac);background:var(--base3);border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.chip:hover{border-color:var(--lilac);color:var(--ink)}
.chip.act{color:var(--skin)}

/* vtransport */
.tp-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tp-btns.keep{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
#scope{width:100%;height:90px;margin:14px 0 10px;border-radius:12px;background:#07040a;border:1px solid var(--line)}
.readout{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:640px){.readout{grid-template-columns:1fr 1fr}}
.readout div{background:var(--base2);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.readout b{display:block;font:500 17px var(--disp);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.segs{list-style:none;margin:12px 0 0;padding:0;max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:4px}
.segs li{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:10px;color:var(--mute);font-size:14.5px;border:1px solid transparent}
.segs li .mono{flex:0 0 auto;min-width:96px;font-size:10.5px}
.segs li.done{color:var(--dim)}
.segs li.now{color:var(--ink);background:rgba(255,92,138,.08);border-color:rgba(255,92,138,.4)}
.segs li.wait .mono::after{content:" · making";color:var(--dim)}

/* mood monitor */
.vs-right{position:sticky;top:78px;max-height:calc(100vh - 92px);overflow:auto}
@media (max-width:1100px){.vs-right{position:static;max-height:none}}
.vs-right fieldset{border:0;border-top:1px solid var(--line);padding:14px 0 4px;margin:14px 0 0}
.vs-right legend{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lilac);padding:0 8px 0 0}
.monitor{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;margin:12px 0 10px;padding:12px;border-radius:16px;background:var(--base);border:1px solid var(--line);transition:border-color .4s}
.monitor.live{border-color:var(--coral)}
.m-face{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:38px;background:radial-gradient(circle,rgba(255,92,138,.25),transparent 70%);transition:transform .3s var(--ease)}
.monitor.live .m-face{animation:breathe 1.2s var(--ease-io) infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.m-name{font:500 20px var(--disp);margin:0}
.m-say{margin:2px 0 8px;color:var(--mute);font-size:14px;line-height:1.35}
.m-meter{height:6px;border-radius:99px;background:var(--base3);overflow:hidden}
.m-meter i{display:block;height:100%;width:50%;background:var(--iri);transition:width .25s}
.map{margin:0 0 8px}
#moodMap{width:100%;aspect-ratio:1;display:block;background:radial-gradient(circle at 50% 50%,#1e1226 0%,#0e0812 72%);border:1px solid var(--line);border-radius:16px;cursor:crosshair;touch-action:none}
#moodMap .dot{cursor:pointer}
#moodMap .dot circle{fill:var(--base3);stroke:var(--line);transition:fill .2s,r .2s}
#moodMap .dot:hover circle{stroke:var(--lilac)}
#moodMap .dot.on circle{fill:var(--coral);stroke:var(--pearl)}
#moodMap .dot text{font:500 6.4px var(--body);fill:var(--mute);pointer-events:none}
#moodMap .dot.on text{fill:var(--ink)}
.map figcaption{display:flex;justify-content:space-between;font-size:10px;margin-top:6px}
.mgroups{display:flex;flex-direction:column;gap:8px}
.mg .mono{font-size:10px;margin:0 0 4px}
.mg .chips .chip{font:500 12.5px var(--body);color:var(--ink)}
.mg .chip.on{background:var(--coral);color:#1a0610;border-color:var(--coral)}

/* design */
.mix{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mixrow{display:grid;grid-template-columns:minmax(180px,280px) 1fr 54px 36px;gap:10px;align-items:center}
.mixrow output{font:500 13px var(--mono);color:var(--mute)}
.how ul{margin:0;padding-left:20px;color:var(--mute);display:flex;flex-direction:column;gap:6px}
.how b{color:var(--ink)}

/* engine picker (4 Nov, emotional models) */
.engines{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.eng{flex:1 1 200px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--base2);color:var(--ink);padding:10px 12px;cursor:pointer;font:inherit}
.eng b{display:block;font:500 14px var(--disp)}
.eng small{display:block;color:var(--mute);font-size:12.5px;line-height:1.35;margin-top:2px}
.eng.on{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.eng:disabled{opacity:.4;cursor:not-allowed}
.eng .st{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lilac)}
#engineNote{margin:0 0 12px;color:var(--warn)}