/* SAPSA studio: floating controls, neutral fades, restrained gold. */
:root{color-scheme:dark;--studio-gold:#c2a56d;--studio-text:#f2f0eb;--studio-muted:#aaa9a5}
html body{background:#101010;color:var(--studio-text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html body header,html body aside,html body .tools button,html body .tag,html body .legend,html body .badge,html body #opsCards button,html body #opsPanel,html body #agentPanel,html body select,html body button,html body input,html body textarea,html body #agentsHub,html body #sapsaFactoryStageNotice{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--studio-text)!important}
html body button{transition:color .18s,opacity .18s,transform .18s;touch-action:manipulation}
html body button:hover,html body button.active{color:var(--studio-gold)!important;background:transparent!important}
html body .tools button.active,html body #zones button.active{color:var(--studio-gold)!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body button:focus-visible,html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible{outline:none!important;color:var(--studio-gold)!important;text-decoration:underline;text-underline-offset:5px}
html body>header{position:fixed;inset:0 0 auto;height:96px;padding:22px 28px;z-index:50;pointer-events:none;align-items:flex-start;background:transparent!important}
html body header h1{font-size:18px;font-weight:500;letter-spacing:-.35px;margin:4px 0}
html body b.brand{color:var(--studio-gold)!important;font-size:9px;letter-spacing:3px;font-weight:600}
html body header small,html body .legend,html body .health-key{display:none!important}
html body .badge{font-size:9px;letter-spacing:.8px;padding:4px 0;max-width:none;line-height:1.4;color:#aaa69c!important}
html body .badge::before{width:4px;height:4px;background:var(--studio-gold);box-shadow:none;margin-right:7px}
html body main{height:100dvh;display:block}
html body #view{height:100%;width:100%;background:radial-gradient(ellipse at 48% 43%,#3c3b39 0%,#252524 34%,#161616 65%,#0b0b0b 100%)}
html body .tools{position:absolute;top:92px;left:20px;right:85px;gap:6px;z-index:55;align-items:flex-start;pointer-events:none}
html body .tools button{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:48px;height:56px;padding:8px 7px!important;font-size:8px;font-weight:500;letter-spacing:.15px;text-shadow:0 2px 12px #000}
html body .tools button svg{width:21px;height:21px;fill:currentColor}
html body #sapsaCreateAgent{top:91px;right:22px;color:var(--studio-text);z-index:60}
html body #sapsaCreateAgent svg{width:21px;height:21px}
html body #sapsaCreateAgent small{font-size:8px}
html body .assetInspector{position:absolute;right:24px!important;top:164px!important;max-width:190px!important;z-index:55}
html body .assetInspector select{font-size:9px;padding:8px 2px!important;max-width:185px;opacity:.65;cursor:pointer;text-align:right}
html body .assetInspector option,html body #hubDepartment option{background:#1a1a1a;color:#eee}
html body .loadingAssetStatus{position:absolute;top:160px!important;left:28px!important;max-width:250px!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;border-radius:0!important;color:#a6a39b!important;padding:0!important;font-size:9px!important;pointer-events:none;opacity:0;transition:opacity .7s}
html body .loadingAssetStatus[aria-busy="true"]{opacity:.7}
html body #loading{background:#131313;color:#c8c2b6;font-size:11px;letter-spacing:1px}
html body aside{position:fixed;right:24px;top:210px;bottom:135px;width:238px;padding:18px 4px 26px 26px;max-height:calc(100dvh - 330px);overflow:auto;z-index:65;display:none;text-shadow:0 2px 12px #000}
html body aside.studio-details-open{display:block}
html body aside::before{content:"";position:fixed;right:0;top:150px;bottom:100px;width:340px;z-index:-1;pointer-events:none;background:linear-gradient(270deg,rgba(0,0,0,.76),rgba(0,0,0,.4) 60%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent)}
html body aside .score{font-size:42px;font-weight:300;letter-spacing:-2px;margin:6px 0}
html body aside .score small{font-size:12px;color:#9d9b95}
html body aside progress{height:2px;accent-color:var(--studio-gold);opacity:.7}
html body aside>small,html body aside>.section.muted,html body #detail{display:none}
html body aside .stat{border:0;padding:9px 0;font-size:10px;color:#b8b6b0;gap:12px}
html body aside .stat b{font-weight:500;color:#f2f0eb;text-align:right}
html body aside .section{border:0;margin-top:18px;padding-top:0}
html body aside h2{font-weight:400;font-size:20px;line-height:1.25;margin:8px 0 14px}
html body #metrics{font-size:10px}
html body #zones{grid-template-columns:1fr 1fr;gap:4px;margin-top:14px}
html body #zones button{height:58px;min-height:0;padding:7px 1px;font-size:8px}
html body #zones button strong{background:transparent!important;color:#a6a39b;left:1px;top:2px;font-size:8px;padding:0}
html body .tag{font-size:8px;padding:3px 2px;max-width:160px;text-shadow:0 1px 8px #000,0 1px 3px #000;line-height:1.2}
html body .tag::before{width:4px;height:4px;margin-right:5px;background:var(--studio-gold)!important;box-shadow:none!important}
html body .track{border:0!important;background:transparent!important;color:#d6d1c5!important}
html body .track span{background:transparent!important;border:0!important;backdrop-filter:none!important;padding:2px 0;font-size:8px;text-shadow:0 1px 6px #000}
html body .track span::before{background:#b9aa87!important;box-shadow:none!important;width:3px;height:3px}
html body #opsCockpit{left:24px;right:24px;bottom:20px;z-index:70}
html body #opsCockpit::before{height:230px;background:linear-gradient(to top,rgba(0,0,0,.93),rgba(0,0,0,.58) 40%,transparent)}
html body #opsCards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:960px;margin:auto}
html body #opsCards button{display:flex;align-items:center;flex-direction:column;text-align:center;min-height:80px;font-size:8px;padding:8px 4px}
html body #opsCards button svg{width:22px;height:22px;fill:currentColor!important;display:block;margin:0 0 8px}
html body #opsCards b{font-size:16px;font-weight:400;color:#e9e7e1!important;margin:6px 0 2px;letter-spacing:-.4px}
html body #opsCards small{font-size:7px;letter-spacing:1px;color:var(--studio-gold)!important}
html body #opsPanel{background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.63) 75%,transparent)!important;bottom:112px;left:0;padding:22px 34px 22px 0;width:360px;max-height:54vh}
html body #opsTitle{font-size:19px;font-weight:400}
html body #opsBody{color:#c1beb7;font-size:11px}
html body #opsBody td{border:0;padding:8px 2px}
html body #opsBody input{background:rgba(255,255,255,.035)!important;padding:12px 6px}
html body #agentsHub{inset:155px 26px 125px;padding:22px 16px 30px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.94) 9%,rgba(0,0,0,.9) 84%,transparent)!important;z-index:110;scrollbar-color:#555 transparent}
html body #hubHeading h2{font-size:24px;font-weight:400;letter-spacing:-.5px;margin:0}
html body #hubNote{font-size:9px;color:#94928c;margin:8px 0}
html body #hubClose{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px;font-size:8px}
html body #hubClose svg{width:22px;height:22px;fill:currentColor}
html body #hubFilters{gap:20px;margin:22px 0}
html body #hubSearch{padding:10px 0;font-size:12px;background:linear-gradient(90deg,#ffffff08,transparent)!important}
html body #hubDepartment{font-size:10px;padding:8px 0;color:#b9b4a8!important}
html body #hubCards{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:26px 16px}
html body #hubCards button{min-height:180px;padding:0 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
html body #hubCards img.sapsaRosterPortrait{width:96px;height:122px;border-radius:0;margin:0 auto 10px;mask-image:linear-gradient(#000 80%,transparent);-webkit-mask-image:linear-gradient(#000 80%,transparent)}
html body #hubCards strong{font-size:12px;font-weight:500;margin:0 0 5px;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;color:var(--studio-text)!important}
html body #hubCards small{font-size:9px;line-height:1.5;color:#99958d}
html body .agentDot{width:4px;height:4px;background:var(--studio-gold);box-shadow:none}
html body #sapsaFactoryStageNotice{background:linear-gradient(90deg,transparent,#000c)!important;right:0;top:160px;padding:22px 26px 22px 55px;max-width:340px;font-size:11px}
html body:has(#sapsaAgentSidePanel:not([hidden])) aside,html body:has(#sapsaAgentSidePanel:not([hidden])) .assetInspector{display:none!important}
html body #sapsaAgentSidePanel:not(.create-mode){mask-image:linear-gradient(90deg,transparent,#000 18px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px)}
@media(max-width:900px){html body>header{padding:20px}html body .tools{left:12px;right:65px;gap:2px}html body .tools button{min-width:42px;padding:8px 4px!important;font-size:7px}html body #sapsaCreateAgent{right:12px}html body #opsCards{gap:4px}html body #opsCards button{font-size:7px}html body #opsCards b{font-size:13px}html body #opsCockpit{left:12px;right:12px}html body .assetInspector{top:216px!important;right:18px!important}html body .loadingAssetStatus{top:215px!important;left:20px!important}html body aside{top:255px}html body #agentsHub{inset:216px 10px 124px}}
@media(max-width:550px){html body header h1{font-size:16px}html body .badge{max-width:110px;font-size:7px;text-align:right}html body .tools{top:91px;right:55px}html body .tools button{min-width:40px;height:50px}html body #sapsaCreateAgent{top:92px;right:7px}html body #sapsaCreateAgent small{font-size:7px}html body .assetInspector{display:none!important}html body #opsCards button svg{width:19px;height:19px}html body #opsCards b{font-size:11px}html body #opsCards button{min-height:74px;font-size:7px}html body aside{right:16px;bottom:122px;width:225px;top:240px;max-height:calc(100dvh - 360px)}html body #hubCards{grid-template-columns:repeat(2,minmax(0,1fr))}html body #hubFilters{flex-wrap:wrap}html body #hubSearch{min-width:150px}html body #opsPanel{width:min(340px,calc(100vw - 30px))}html body #opsCockpit{bottom:14px}}
@media(prefers-reduced-motion:reduce){html body button,html body .loadingAssetStatus{transition:none}}
/* V17: protect each reading layer with black shades; only portrait stage has a frame. */
html body .tools{isolation:isolate}
html body aside.studio-details-open{isolation:isolate;overflow:auto;padding-left:24px;background:linear-gradient(90deg,#0000,#030303fa 12%,#030303fc)!important}
html body aside::before{position:absolute;inset:-35px -26px -40px -85px;width:auto;z-index:-1;background:linear-gradient(90deg,transparent,#020202f7 28%,#020202fc);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 95%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 95%,transparent)}
html body:has(aside.studio-details-open) #labels .tag{visibility:hidden!important}html body:has(aside.studio-details-open) .assetInspector{display:none!important}
html body #opsPanel{background:linear-gradient(90deg,#020202fc 0%,#030303fa 86%,#0000)!important;isolation:isolate;padding-top:24px;padding-bottom:24px}
html body #agentsHub{background:linear-gradient(180deg,#000e,#020202fc 4%,#020202fc 96%,#000e)!important;isolation:isolate;z-index:1150}
html body #agentsHub::before{content:'';position:fixed;inset:0;z-index:-1;background:#000c;pointer-events:none}
html body:has(#agentsHub.open) #sapsaWorkforceV14,html body:has(#agentsHub.open) #labels,html body:has(#agentsHub.open) #sapsaWorkforceKpiV14,html body:has(#agentsHub.open) aside,html body:has(#agentsHub.open) #opsCockpit,html body:has(#agentsHub.open) #sapsaWorkforceControlsV14,html body:has(#agentsHub.open) .assetInspector{visibility:hidden!important;pointer-events:none!important}
html body #hubCards .sapsaHubWorkforceV17{margin-top:7px;font-size:8px;color:#c2a56d}html body #hubCards [data-tone="warning"]{color:#e38378!important}
html body:has(#agentsHub.open) .tools{visibility:hidden!important;pointer-events:none!important}
html body #sapsaZoneOverviewButton small{font-size:8px;font-weight:400;line-height:1.1}
@media(max-width:550px){html body aside.studio-details-open{right:0;width:min(285px,86vw);padding:20px 22px 35px 30px;top:240px}html body #agentsHub{inset:200px 10px 115px}}

/* One continuous shade behind the header and floating controls, from the viewport top. */
html body::before{content:'';position:fixed;inset:0 0 auto;height:280px;z-index:49;pointer-events:none;background:linear-gradient(180deg,#000f 0%,#000e 30%,#0009 62%,transparent 100%)}
@media(max-width:550px){html body::before{height:320px}}
/* Shared workforce view has its own protected reading surface. */
html body #sapsaHrV14{inset:88px 24px 24px!important;padding:26px 32px 36px!important}
@media(max-width:800px){html body #sapsaHrV14{inset:76px 8px 16px!important;padding:20px 18px!important}}