/* Suriva Digital Human Viewer — UI chrome. Consumes Suriva tokens; page canvas is the darker
 * instrument field per the viewer brief. Motion per Design & Motion Standard §1 (tokens only). */
:root{--dhv-field:#050B0C;--dhv-panel:rgba(10,24,24,.86);--dhv-line:rgba(77,189,188,.18);--dhv-line-strong:rgba(77,189,188,.36);--dhv-teal:#4DBDBC;--dhv-teal-bright:#86F2EC;--dhv-text:#EAF4F3;--dhv-text-2:#A8C4C2;--dhv-text-3:#6E8F8D;--dhv-amber:#E8B45A;--dhv-focus:#86F2EC;--dhv-r:16px;--dhv-r-sm:10px}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--dhv-field);color:var(--dhv-text);font-family:"Geist",system-ui,sans-serif;font-size:15px;line-height:1.55;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--dhv-focus);outline-offset:2px;border-radius:6px}
a{color:var(--dhv-teal-bright)}a:hover{color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#stage{position:fixed;inset:0}
#stage canvas{display:block}
/* ambient bokeh depth */
.bokeh{position:fixed;inset:0;pointer-events:none;background:radial-gradient(34% 30% at 78% 18%,rgba(77,189,188,.07),transparent 70%),radial-gradient(28% 26% at 14% 78%,rgba(77,189,188,.05),transparent 70%),radial-gradient(18% 14% at 66% 82%,rgba(232,180,90,.03),transparent 70%)}
/* ── top bar ── */
.dhv-top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:14px;padding:14px 20px;pointer-events:none}
.dhv-top>*{pointer-events:auto}
.dhv-top .brand{display:inline-flex;align-items:center;gap:10px;color:var(--dhv-text);text-decoration:none;font:600 14px/1 "Geist",sans-serif}
.dhv-top .brand img{height:17px;width:auto}
.dhv-top .brand .sub{color:var(--dhv-text-3);font-weight:500;font-size:12.5px}
.dhv-crumb{display:flex;align-items:center;gap:6px;margin-inline:auto;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:999px;padding:8px 16px;font-size:13px;backdrop-filter:blur(10px);max-width:60vw;overflow:hidden}
.dhv-crumb button{color:var(--dhv-text-2);white-space:nowrap;min-height:28px}
.dhv-crumb button:hover{color:var(--dhv-text)}
.dhv-crumb .sep{color:var(--dhv-text-3)}
.dhv-crumb [aria-current]{color:var(--dhv-teal-bright);font-weight:600}
.dhv-topbtns{display:flex;gap:8px}
.chipbtn{display:inline-flex;align-items:center;gap:8px;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:999px;padding:0 16px;min-height:44px;font:500 13.5px/1 "Geist",sans-serif;color:var(--dhv-text-2);backdrop-filter:blur(10px);transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.chipbtn:hover{border-color:var(--dhv-line-strong);color:var(--dhv-text)}
.chipbtn[aria-pressed="true"]{color:var(--dhv-teal-bright);border-color:var(--dhv-line-strong)}
.chipbtn svg{width:15px;height:15px;flex:none}
/* ── layer stack (left) ── */
.dhv-layers{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:25;width:248px;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:var(--dhv-r);padding:16px;backdrop-filter:blur(12px)}
.dhv-layers h2{font:600 11px/1 "Geist",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dhv-text-3);margin:0 0 12px}
.lyr{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:9px 0;border-top:1px solid rgba(77,189,188,.09)}
.lyr:first-of-type{border-top:none}
.lyr-eye{grid-row:1/3;align-self:center;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--dhv-r-sm);color:var(--dhv-text-3);transition:color var(--dur-fast) var(--ease-out),background var(--dur-instant) var(--ease-out)}
.lyr-eye:hover{background:rgba(77,189,188,.08)}
.lyr-eye[aria-pressed="true"]{color:var(--dhv-teal-bright)}
.lyr-eye svg{width:19px;height:19px}
.mob-lab{display:none}
.lyr-name{font:600 13.5px/1.2 "Geist",sans-serif;color:var(--dhv-text);align-self:end}
.lyr[data-off="1"] .lyr-name{color:var(--dhv-text-3)}
.lyr-op{display:flex;align-items:center;gap:8px}
.lyr-op input[type="range"]{flex:1;height:44px;margin:-16px 0;accent-color:var(--dhv-teal);background:transparent}
.lyr-op output{font:500 11.5px/1 "Geist Mono",monospace;color:var(--dhv-text-3);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
/* ── view / reset cluster (right of body, desktop) ── */
.dhv-views{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;gap:8px}
.dhv-views button{width:44px;height:44px;border-radius:var(--dhv-r-sm);background:var(--dhv-panel);border:1px solid var(--dhv-line);color:var(--dhv-text-2);font:600 11.5px/1 "Geist",sans-serif;backdrop-filter:blur(10px);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.dhv-views button:hover{color:var(--dhv-teal-bright);border-color:var(--dhv-line-strong)}
.dhv-views button svg{width:17px;height:17px}
/* ── variant switcher (bottom-left, collapsed pill → expanded card) ── */
.dhv-variant{position:fixed;left:20px;bottom:20px;z-index:26}
.dhv-variant .vx-pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:999px;font:600 13.5px/1 "Geist",sans-serif;color:var(--dhv-text);backdrop-filter:blur(12px);transition:border-color var(--dur-fast) var(--ease-out)}
.dhv-variant .vx-pill:hover{border-color:var(--dhv-line-strong)}
.dhv-variant .vx-pill .lab{color:var(--dhv-text-3);font-weight:500}
.dhv-variant .vx-pill svg{width:14px;height:14px;color:var(--dhv-text-3);transition:transform var(--dur-fast) var(--ease-standard,cubic-bezier(.2,.8,.2,1))}
.dhv-variant.open .vx-pill svg{transform:rotate(180deg)}
.vx-panel{position:absolute;bottom:calc(100% + 10px);left:0;width:280px;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:var(--dhv-r);padding:10px;backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),visibility var(--dur-fast)}
.dhv-variant.open .vx-panel{opacity:1;visibility:visible;transform:none}
.vx-panel [role="radio"]{display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;padding:10px 12px;min-height:48px;border-radius:var(--dhv-r-sm);transition:background var(--dur-instant) var(--ease-out)}
.vx-panel [role="radio"]:hover{background:rgba(77,189,188,.08)}
.vx-panel [role="radio"][aria-checked="true"]{background:rgba(77,189,188,.13);outline:1px solid var(--dhv-line-strong)}
.vx-panel [role="radio"] b{font:600 13.5px/1.2 "Geist",sans-serif}
.vx-panel [role="radio"] span{font-size:12px;color:var(--dhv-text-3)}
.vx-help{font-size:11.5px;line-height:1.5;color:var(--dhv-text-3);padding:10px 12px 6px;border-top:1px solid rgba(77,189,188,.09);margin-top:6px}
/* ── hover label ── */
.dhv-tip{position:fixed;z-index:40;pointer-events:none;background:rgba(5,14,14,.92);border:1px solid var(--dhv-line-strong);border-radius:8px;padding:6px 11px;font:600 12.5px/1 "Geist",sans-serif;color:var(--dhv-teal-bright);opacity:0;transition:opacity var(--dur-instant) var(--ease-out);white-space:nowrap}
.dhv-tip.on{opacity:1}
/* ── detail panel (right) ── */
.dhv-detail{position:fixed;right:20px;top:76px;bottom:20px;z-index:27;width:320px;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:var(--dhv-r);backdrop-filter:blur(14px);display:flex;flex-direction:column;transform:translateX(16px);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base)}
.dhv-detail.open{opacity:1;visibility:visible;transform:none}
.dhv-detail header{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 12px}
.dhv-detail header .ttl{flex:1}
.dhv-detail header .kicker{font:600 10.5px/1 "Geist",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--dhv-text-3)}
.dhv-detail h2{font:600 19px/1.25 "Geist",sans-serif;margin:5px 0 0}
.dhv-detail .x{width:44px;height:44px;margin:-8px -8px 0 0;display:flex;align-items:center;justify-content:center;border-radius:var(--dhv-r-sm);color:var(--dhv-text-3)}
.dhv-detail .x:hover{color:var(--dhv-text);background:rgba(77,189,188,.08)}
.dhv-detail .bd{flex:1;overflow:auto;padding:4px 18px 14px;display:flex;flex-direction:column;gap:10px}
.met{border:1px solid var(--dhv-line);border-radius:var(--dhv-r-sm);padding:12px 14px}
.met .k{font:500 12px/1.3 "Geist",sans-serif;color:var(--dhv-text-2)}
.met .v{font:600 20px/1.2 "Geist",sans-serif;color:var(--dhv-text);font-variant-numeric:tabular-nums;margin-top:2px}
.met .t{font-size:11.5px;color:var(--dhv-text-3);margin-top:2px}
.nodata{border:1px dashed var(--dhv-line-strong);border-radius:var(--dhv-r-sm);padding:16px 14px;text-align:center}
.nodata b{display:block;font:600 13.5px/1.3 "Geist",sans-serif}
.nodata p{margin:6px 0 0;font-size:12.5px;color:var(--dhv-text-3);line-height:1.5}
.dhv-detail footer{padding:14px 18px 18px;border-top:1px solid rgba(77,189,188,.1)}
.kora-btn{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:8px 14px;border-radius:999px;background:linear-gradient(120deg,rgba(93,82,226,.22),rgba(139,92,246,.14));border:1px solid rgba(139,122,246,.4);color:#DCD6FF;font:600 13.5px/1 "Geist",sans-serif;transition:border-color var(--dur-fast) var(--ease-out)}
.kora-btn:hover{border-color:rgba(160,140,255,.7)}
.kora-btn .orb{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#8b7af6,#4f46c8 70%);box-shadow:0 0 12px rgba(120,100,246,.5);flex:none}
/* ── list view (SR / reduced-motion first-class path) ── */
.dhv-list{position:fixed;inset:0;z-index:28;background:var(--dhv-field);overflow:auto;padding:90px 24px 40px;display:none}
.dhv-list.open{display:block}
.dhv-list .wrap{max-width:760px;margin:0 auto}
.dhv-list h1{font:600 24px/1.25 "Geist",sans-serif;margin:0 0 4px}
.dhv-list .lede{color:var(--dhv-text-2);margin:0 0 26px;font-size:14.5px}
.dhv-list section{margin-bottom:24px}
.dhv-list h3{font:600 11.5px/1 "Geist",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--dhv-text-3);margin:0 0 8px}
.dhv-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.dhv-list li button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--dhv-line);border-radius:var(--dhv-r-sm);color:var(--dhv-text);font:500 13.5px/1.3 "Geist",sans-serif;text-align:start;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-instant) var(--ease-out)}
.dhv-list li button:hover{border-color:var(--dhv-line-strong);background:rgba(77,189,188,.06)}
.dhv-list li button .dot{width:7px;height:7px;border-radius:50%;background:var(--dhv-teal);flex:none}
.dhv-list li button.nodot .dot{background:transparent;border:1px solid var(--dhv-text-3)}
/* ── loading (body assembling IS the loading state) ── */
.dhv-load{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:var(--dhv-field);transition:opacity var(--dur-slow) var(--ease-out),visibility var(--dur-slow)}
.dhv-load.done{opacity:0;visibility:hidden}
.dhv-load .ring{width:52px;height:52px;border-radius:50%;border:2px solid rgba(77,189,188,.2);border-top-color:var(--dhv-teal-bright);animation:dhvSpin .9s linear infinite}
.dhv-load p{font:500 13px/1 "Geist",sans-serif;color:var(--dhv-text-2);letter-spacing:.06em;text-transform:uppercase}
@keyframes dhvSpin{to{transform:rotate(360deg)}}
/* selected-part outline treatment is 3D-side; this is the a11y text echo */
.dhv-live{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:24;background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:999px;padding:8px 18px;font:600 13px/1 "Geist",sans-serif;color:var(--dhv-teal-bright);opacity:0;transition:opacity var(--dur-fast) var(--ease-out);pointer-events:none;backdrop-filter:blur(10px)}
.dhv-live.on{opacity:1}
/* ── breakpoints ── */
@media(max-width:1180px){
  .dhv-layers{width:auto;left:16px;right:auto;top:auto;bottom:84px;transform:none;display:flex;gap:6px;padding:8px;border-radius:999px;flex-direction:column}
  .dhv-layers h2,.lyr-op,.dhv-layers .lyr-name{display:none}
  .lyr{display:block;border:none;padding:0}
  .dhv-detail{right:0;left:0;top:auto;bottom:0;width:auto;max-height:56vh;border-radius:var(--dhv-r) var(--dhv-r) 0 0;transform:translateY(24px)}
  .dhv-detail.open{transform:none}
}
@media(max-width:680px){
  .dhv-crumb{display:none}
  .dhv-layers{left:0;right:0;bottom:76px;flex-direction:row;overflow-x:auto;border-radius:0;border-inline:none;background:transparent;border-color:transparent;padding:8px 16px;backdrop-filter:none}
  .dhv-layers .lyr-eye{background:var(--dhv-panel);border:1px solid var(--dhv-line);border-radius:999px;width:auto;padding:0 14px;gap:8px}
  .dhv-layers .mob-lab{display:inline;font:600 12.5px/1 "Geist",sans-serif;white-space:nowrap}
  .dhv-views{right:12px;top:auto;bottom:150px;transform:none;flex-direction:column}
  .dhv-variant{left:12px;bottom:14px}
  .dhv-detail{max-height:78vh}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}