:root{--bg:#08080b;--nav:#09070e;--surface:#111116;--raised:#1b1425;--text:#f4f2f7;--muted:#aaa6b2;--descriptor:#8d8994;--line:rgba(255,255,255,.10);--violet:#a999ff;--lav:#d8d0ff;--success:#72e3ac;--warn:#f7b967;--danger:#ff8295}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}button{font:inherit;color:inherit}.ferment{height:100vh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 76% 18%,rgba(118,91,255,.055),transparent 35rem),var(--bg)}.topbar{height:58px;flex:0 0 58px;border-bottom:1px solid var(--line);background:rgba(8,8,11,.96);position:relative;z-index:20}.topHandle{width:100%;height:58px;border:0;background:transparent;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 18px;cursor:pointer}.brand{display:flex;align-items:center;gap:10px}.mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(169,153,255,.35);border-radius:8px;background:rgba(169,153,255,.08);color:var(--lav);font-weight:800}.brand strong{display:block;font-size:14px;letter-spacing:-.03em}.brand strong i,.brand strong em{font-style:normal}.brand strong em{color:var(--violet)}.brand small{display:block;font-size:7px;font-weight:800;letter-spacing:.22em;color:var(--descriptor)}.alarmSummary,.connection{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.alarmSummary b{font-size:10px;letter-spacing:.12em;color:var(--text)}.connection{justify-self:end}.connection i{font-style:normal;color:var(--violet);font-size:14px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.good{background:var(--success)}.warn{background:var(--warn)}.topPanel{position:absolute;display:grid;grid-template-columns:1fr 1fr 280px;left:0;right:0;top:58px;height:0;overflow:hidden;background:rgba(9,7,14,.98);border-bottom:1px solid transparent;box-shadow:0 18px 40px rgba(0,0,0,.28);transition:height .16s ease}.topbar.open .topPanel{height:150px;border-color:var(--line)}.topPanel section{padding:18px;border-right:1px solid var(--line)}h3{font-size:9px;letter-spacing:.18em;color:var(--violet);margin:0 0 10px}.empty{padding:10px 0;color:var(--muted);border-top:1px solid var(--line)}dl{display:grid;grid-template-columns:1fr 1fr;margin:0;gap:8px}dt{color:var(--muted)}dd{margin:0;text-align:right}.body{display:flex;flex:1;min-height:0}.side{display:flex;background:rgba(9,7,14,.96);overflow:hidden;transition:width .16s ease;z-index:10}.side.left{width:30px;border-right:1px solid var(--line)}.side.right{width:30px;border-left:1px solid var(--line)}.side.open{width:300px}.edgeHandle{flex:0 0 30px;width:30px;border:0;background:rgba(255,255,255,.018);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.16em;font-size:9px;color:var(--muted);padding:10px 6px;cursor:pointer}.edgeHandle:hover,.edgeHandle:focus-visible{color:var(--lav);background:rgba(169,153,255,.06);outline:0}.edgeHandle i{font-size:18px;color:var(--violet);font-style:normal}.sidePanel{width:270px;flex:0 0 270px;padding:18px;overflow:auto}.sidePanel header{padding-bottom:14px;border-bottom:1px solid var(--line)}.sidePanel header small,.identity small,.metric small{font-size:9px;letter-spacing:.16em;color:var(--descriptor)}.sidePanel h2,.identity h2{margin:3px 0;font-size:18px;letter-spacing:-.03em}.sidePanel header span,.identity span{color:var(--warn);font-size:10px}.sidePanel section{padding:15px 0;border-bottom:1px solid var(--line)}.sidePanel label{display:block;color:var(--muted);font-size:12px;margin:9px 0}.field,.wide,.seg button,.sequenceTools button{border:1px solid var(--line);background:rgba(255,255,255,.025);padding:8px 10px;border-radius:7px}.field{margin-top:5px;color:var(--text)}.wide{width:100%;text-align:left;margin:4px 0}.seg{display:flex}.seg button{flex:1;border-radius:0}.seg button:first-child{border-radius:7px 0 0 7px}.seg button:last-child{border-radius:0 7px 7px 0}.wide:hover,.seg button:hover,.sequenceTools button:hover{border-color:rgba(169,153,255,.55)}.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.readout{display:grid;grid-template-columns:1fr auto;gap:8px;color:var(--muted)}.readout b{color:var(--text)}.center{flex:1;min-width:0;display:flex;flex-direction:column}.processHeader{height:34px;flex:0 0 34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:9px;letter-spacing:.15em}.processHeader b{font-size:9px;color:var(--warn)}.synoptic{position:relative;flex:1;min-height:420px;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:26px 26px}.pipes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.processPipe{fill:none;stroke:#6d6875;stroke-width:2}.gasPipe{stroke:#827b90}.additionPipe{stroke:#756e7d}.utilityPipe{stroke:#625c6c}.exhaustPipe{stroke:#756e7d}.valves path{fill:var(--bg);stroke:#a69daf;stroke-width:2}.node{position:absolute;border:1px solid var(--line);background:rgba(17,17,22,.94);border-radius:7px;cursor:pointer;text-align:left;transition:border-color .1s,background .1s,box-shadow .1s}.node:hover{border-color:rgba(216,208,255,.42)}.node:focus-visible{outline:2px solid var(--violet);outline-offset:2px}.node.selected{border-color:var(--violet);background:var(--raised);box-shadow:0 0 0 1px rgba(169,153,255,.18),0 0 24px rgba(118,91,255,.10)}.node.selected:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--violet);top:7px;right:7px}.gasBank{position:absolute;top:7%;left:50%;transform:translateX(-50%);display:flex;gap:10px}.gasBank .node{position:relative;width:95px;height:56px;padding:8px;text-align:center}.gasBank strong,.gasBank .value{display:block}.gasBank .value{font-size:17px}.pumpBank{position:absolute;left:7%;top:34%;width:165px}.pumpBank .node{position:relative;width:100%;height:49px;margin-bottom:7px;padding:7px;display:flex;gap:9px;align-items:center}.pumpIcon,.utilitySymbol,.probeSymbol,.symbol{display:grid;place-items:center;border:1px solid rgba(169,153,255,.26);color:var(--lav);background:rgba(169,153,255,.055)}.pumpIcon{width:30px;height:30px;border-radius:50%;font-size:10px}.pumpBank strong,.pumpBank small,.utilityBank strong,.utilityBank small{display:block}.pumpBank small,.utilityBank small{font-size:9px;color:var(--muted)}.vesselWrap{position:absolute;width:330px;height:350px;left:50%;top:51%;transform:translate(-50%,-50%)}.vessel{position:absolute;width:220px;height:280px;left:55px;top:35px;border:3px solid #77717e;border-radius:38% 38% 25% 25%;overflow:hidden}.liquid{position:absolute;bottom:0;left:0;right:0;height:45%;background:rgba(169,153,255,.035);border-top:1px solid rgba(216,208,255,.18)}.motor{top:10px;left:82px;width:56px;height:60px;text-align:center;padding:5px;z-index:3}.motor .symbol{position:relative;width:22px;height:22px;border-radius:5px;margin:auto}.motor strong{font-size:7px;display:block;margin-top:2px}.motor .value{font-size:9px}.shaft{position:absolute;left:108px;top:70px;height:128px;border-left:2px solid #77717e}.impeller{position:absolute;left:83px;top:190px;width:50px;border-top:3px solid #77717e}.vesselName{position:absolute;bottom:13px;width:100%;text-align:center;font-size:9px;letter-spacing:.16em}.probe{width:105px;height:46px;padding:6px;display:flex;gap:6px;align-items:center;z-index:4}.probeSymbol{width:29px;height:29px;border-radius:5px;font-size:10px}.probe strong,.probe .value{display:block}.probe strong{font-size:9px}.probe .value{font-size:12px}.leftProbe{left:0;top:112px}.tempProbe{left:0;top:171px}.rightProbe{right:0;top:112px}.pressureProbe{right:0;top:171px}.utilityBank{position:absolute;right:6%;top:40%;width:165px}.utilityBank .node{position:relative;width:100%;height:49px;margin-bottom:7px;padding:7px;display:flex;align-items:center;gap:8px}.utilitySymbol{width:29px;height:29px;border-radius:6px}.exhaust{left:72%;top:23%;width:110px;padding:7px;text-align:center}.exhaust span,.exhaust strong,.exhaust small{display:block}.exhaust strong{font-size:8px}.exhaust small{color:var(--muted)}.faceplate{height:126px;flex:0 0 126px;border-top:1px solid var(--line);background:rgba(17,17,22,.96);display:grid;grid-template-columns:minmax(190px,1.35fr) repeat(5,minmax(105px,1fr))}.identity,.metric{padding:14px;border-right:1px solid var(--line)}.metric b{display:block;font-size:22px;margin-top:8px}.metric span{font-size:10px;color:var(--muted)}.sequenceTools{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:14px 0}.sequenceSteps{min-height:230px}.sequenceSteps .wide{margin-top:10px}@media(max-width:1100px){.side.open{width:270px}.sidePanel{width:240px;flex-basis:240px}.pumpBank{left:3%}.utilityBank{right:3%}.faceplate{grid-template-columns:1.25fr repeat(5,1fr)}.metric{padding:11px}}@media(max-width:760px){.alarmSummary span:last-child{display:none}.brand strong{font-size:12px}.side.open{position:absolute;top:58px;bottom:0;width:min(92vw,320px);z-index:30}.right.open{right:0}.faceplate{overflow-x:auto;grid-template-columns:180px repeat(5,120px)}.pumpBank{left:1%;transform:scale(.85);transform-origin:left center}.utilityBank{right:1%;transform:scale(.85);transform-origin:right center}.vesselWrap{transform:translate(-50%,-50%) scale(.82)}.topPanel{grid-template-columns:1fr;height:0}.topbar.open .topPanel{height:320px}.topPanel section{border-bottom:1px solid var(--line)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Main process workspace usability pass */
.processHeader{height:42px;flex-basis:42px;padding:0 18px}.processHeader>div{display:flex;align-items:baseline;gap:10px}.processHeader small{font-size:8px;color:var(--descriptor);letter-spacing:.13em}.synoptic{min-height:450px}.gasBank{top:5.5%;width:330px}.gasBank h3{text-align:center;margin-bottom:7px}.gasNodes{display:flex;gap:8px}.gasBank .node{width:104px;height:59px}.pumpBank{left:5.5%;top:31%;width:178px}.pumpBank .node{height:52px}.utilityBank{right:5%;top:36%;width:184px}.utilityGroup{border-left:1px solid rgba(169,153,255,.25);padding-left:10px}.utilityBank .node{height:52px}.vesselWrap{width:390px;height:390px;top:52%}.vessel{width:250px;height:310px;left:70px;top:35px;border-color:#918a99}.motor{left:96px}.shaft{left:123px;height:148px}.impeller{left:96px;top:210px;width:55px}.leftProbe{left:0;top:122px}.tempProbe{left:0;top:184px}.rightProbe{right:0;top:122px}.pressureProbe{right:0;top:184px}.probe{width:118px;height:49px}.probe strong{font-size:10px}.probe .value{font-size:14px}.vesselName{font-weight:700;color:var(--muted)}.node.selected{border-color:var(--lav);background:linear-gradient(90deg,rgba(169,153,255,.16),rgba(27,20,37,.98));box-shadow:inset 3px 0 0 var(--violet),0 0 0 1px rgba(169,153,255,.14)}.node.selected:after{width:7px;height:7px;top:8px;right:8px;box-shadow:0 0 8px rgba(169,153,255,.55)}.faceplate{height:108px;flex-basis:108px}.identity,.metric{padding:12px 14px}.metric b{font-size:20px;margin-top:5px}.identity h2{font-size:17px}.pipes .processPipe{stroke-width:2.25}.exhaust{left:71%;top:21%}
@media(max-width:1150px){.gasBank{top:5%;transform:translateX(-50%) scale(.92)}.pumpBank{left:3%;top:30%;width:166px}.utilityBank{right:3%;top:35%;width:166px}.vesselWrap{transform:translate(-50%,-50%) scale(.90)}.probe{width:112px}.faceplate{height:100px;flex-basis:100px}.metric b{font-size:18px}}
@media(max-width:900px){.pumpBank{left:2%;transform:scale(.86);transform-origin:left center}.utilityBank{right:2%;transform:scale(.86);transform-origin:right center}.vesselWrap{transform:translate(-50%,-50%) scale(.78)}.gasBank{transform:translateX(-50%) scale(.84)}}.faceplate{height:96px;flex-basis:96px}.identity,.metric{padding-top:10px;padding-bottom:9px}.metric b{margin-top:3px}@media(max-width:1150px){.faceplate{height:94px;flex-basis:94px}}
/* Phone portrait: preserve the process as one coherent canvas instead of independently shrinking equipment */
@media(max-width:600px){
 html,body{overflow:hidden}
 .topHandle{grid-template-columns:auto 1fr auto;padding:0 10px;gap:8px}
 .brand{gap:7px}.brand .mark{width:28px;height:28px}.brand strong{font-size:11px}.brand small{font-size:6px}
 .alarmSummary{justify-self:center}.alarmSummary b{font-size:8px}.alarmSummary span:last-child{display:none}
 .connection{font-size:0}.connection .dot,.connection i{font-size:12px}
 .side.left,.side.right{width:24px;flex-basis:24px}.edgeHandle{width:24px;flex-basis:24px;padding:8px 3px;font-size:7px}
 .center{width:calc(100vw - 48px);overflow:hidden}
 .processHeader{height:38px;flex-basis:38px;padding:0 10px}.processHeader>div{gap:6px}.processHeader small{display:none}.processHeader b{font-size:8px;white-space:nowrap}
 .synoptic{min-height:0;overflow:hidden}
 .synoptic>.pipes{width:720px;height:520px;left:50%;top:46%;transform:translate(-50%,-50%) scale(.49);transform-origin:center}
 .gasBank{top:4%;width:286px;transform:translateX(-50%) scale(.72);transform-origin:top center}.gasBank h3{font-size:8px}.gasBank .node{width:90px}
 .pumpBank{left:2%;top:31%;width:126px;transform:none}.pumpBank h3{font-size:8px}.pumpBank .node{height:42px;padding:5px}.pumpIcon{width:25px;height:25px}.pumpBank strong{font-size:11px}.pumpBank small{font-size:7px}
 .vesselWrap{width:270px;height:300px;left:53%;top:50%;transform:translate(-50%,-50%) scale(.72)}
 .vessel{width:210px;height:265px;left:30px;top:20px}.motor{left:77px}.shaft{left:103px}.impeller{left:78px}
 .probe{width:90px;height:42px;padding:5px}.probeSymbol{width:25px;height:25px}.probe strong{font-size:8px}.probe .value{font-size:10px}
 .leftProbe{left:-32px;top:105px}.tempProbe{left:-32px;top:157px}.rightProbe{right:-32px;top:105px}.pressureProbe{right:-32px;top:157px}
 .utilityBank{right:1%;top:34%;width:122px;transform:none}.utilityBank h3{font-size:7px;white-space:nowrap}.utilityGroup{padding-left:6px}.utilityBank .node{height:42px;padding:5px}.utilitySymbol{width:25px;height:25px}.utilityBank strong{font-size:10px}.utilityBank small{font-size:7px}
 .exhaust{left:auto;right:4%;top:19%;width:82px;padding:5px;transform:scale(.82)}
 .faceplate{height:116px;flex-basis:116px;display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:58px 58px;overflow:hidden}
 .identity,.metric{padding:8px 10px;min-width:0}.identity{grid-row:1 / 3}.identity h2{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity small,.metric small{font-size:7px}.identity span{font-size:8px}
 .metric b{font-size:16px;margin-top:1px}.metric span{font-size:8px}
 .metric:nth-child(5),.metric:nth-child(6){display:none}
}
@media(max-width:380px){
 .pumpBank{width:116px}.utilityBank{width:112px}.vesselWrap{left:54%;transform:translate(-50%,-50%) scale(.68)}
 .gasBank{transform:translateX(-50%) scale(.68)}
}
@media(max-width:600px){
 .gasBank{width:214px;top:4%;}.gasNodes{gap:5px}.gasBank .node{width:68px;height:46px;padding:5px}.gasBank .value{font-size:13px}.gasBank strong{font-size:10px}
 .pumpBank{left:2.5%;top:30%;width:116px}.pumpBank .node{height:40px;margin-bottom:5px}.pumpIcon{width:23px;height:23px}.pumpBank strong{font-size:10px}
 .utilityBank{right:2.5%;top:32%;width:108px}.utilityBank .node{height:40px;margin-bottom:5px}.utilitySymbol{width:23px;height:23px}.utilityBank strong{font-size:9px}
 .vesselWrap{left:51%;top:50%;transform:translate(-50%,-50%) scale(.64)}
 .leftProbe{left:-20px}.tempProbe{left:-20px}.rightProbe{right:-20px}.pressureProbe{right:-20px}
 .exhaust{right:3%;top:18%;width:68px;transform:scale(.72)}
 .synoptic>.pipes{transform:translate(-50%,-50%) scale(.43)}
}
@media(max-width:380px){
 .pumpBank{width:108px}.utilityBank{width:100px}.vesselWrap{left:51%;transform:translate(-50%,-50%) scale(.59)}
 .gasBank{transform:translateX(-50%) scale(.92)}
}
@media(max-width:600px){
 .utilityBank{left:50%;right:auto;top:auto;bottom:3%;width:250px;transform:translateX(-50%)}
 .utilityBank h3{text-align:center;margin-bottom:5px}
 .utilityGroup{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border-left:0;border-top:1px solid rgba(169,153,255,.25);padding:6px 0 0}
 .utilityBank .node{width:100%;height:38px;margin:0;justify-content:center}
 .utilityBank .node div{display:none}
 .exhaust{right:3%;top:18%}
}
@media(max-width:380px){.utilityBank{width:225px}}@media(max-width:600px){.gasBank{left:50%;width:214px;transform:translateX(-50%)}.gasBank .node{width:68px}}@media(max-width:380px){.gasBank{width:208px;transform:translateX(-50%)}.gasBank .node{width:66px}}@media(max-width:600px){.gasBank{display:block}.gasNodes{width:100%;display:flex;gap:5px}.gasBank h3{width:100%}}
/* Unified process geometry: SVG and controls now share one 1000x590 coordinate system */
.synoptic{display:flex;align-items:center;justify-content:center;overflow:hidden}
.processCanvas{position:relative;width:1000px;height:590px;flex:0 0 1000px;transform-origin:center center}
.processCanvas>.pipes{position:absolute;inset:0;width:1000px;height:590px;transform:none}
.processCanvas .gasBank{position:absolute;left:335px;top:20px;width:330px;transform:none}
.processCanvas .pumpBank{position:absolute;left:40px;top:220px;width:165px;transform:none}
.processCanvas .vesselWrap{position:absolute;left:305px;top:165px;width:390px;height:390px;transform:none}
.processCanvas .utilityBank{position:absolute;left:790px;right:auto;top:300px;bottom:auto;width:165px;transform:none}
.processCanvas .exhaust{position:absolute;left:720px;right:auto;top:125px;width:110px;transform:none}
.processCanvas .vessel{width:250px;height:310px;left:70px;top:35px}
.processCanvas .motor{left:96px}.processCanvas .shaft{left:123px;height:148px}.processCanvas .impeller{left:96px;top:210px;width:55px}
.processCanvas .leftProbe{left:0;top:122px}.processCanvas .tempProbe{left:0;top:184px}.processCanvas .rightProbe{right:0;top:122px}.processCanvas .pressureProbe{right:0;top:184px}
@media(min-width:1151px){.processCanvas{transform:scale(min(1,calc((100vw - 100px)/1000)))}} 
@media(max-width:1150px) and (min-width:601px){.processCanvas{transform:scale(.86)}}
@media(max-width:600px){
 .synoptic{overflow:hidden}
 .processCanvas{width:1000px;height:590px;flex-basis:1000px;transform:scale(.34);transform-origin:center center}
 .processCanvas .gasBank{left:335px;top:20px;width:330px;transform:none;display:block}
 .processCanvas .gasNodes{display:flex;gap:8px}.processCanvas .gasBank .node{width:104px;height:59px;padding:8px}
 .processCanvas .pumpBank{left:40px;top:220px;width:165px;transform:none}.processCanvas .pumpBank .node{height:49px;padding:7px;margin-bottom:7px}.processCanvas .pumpIcon{width:30px;height:30px}
 .processCanvas .vesselWrap{left:305px;top:165px;width:390px;height:390px;transform:none}
 .processCanvas .vessel{width:250px;height:310px;left:70px;top:35px}
 .processCanvas .probe{width:118px;height:49px;padding:6px}.processCanvas .probeSymbol{width:29px;height:29px}
 .processCanvas .leftProbe{left:0;top:122px}.processCanvas .tempProbe{left:0;top:184px}.processCanvas .rightProbe{right:0;top:122px}.processCanvas .pressureProbe{right:0;top:184px}
 .processCanvas .utilityBank{left:790px;right:auto;top:300px;bottom:auto;width:165px;transform:none}
 .processCanvas .utilityBank h3{text-align:left}.processCanvas .utilityGroup{display:block;border-left:1px solid rgba(169,153,255,.25);border-top:0;padding:0 0 0 10px}
 .processCanvas .utilityBank .node{width:100%;height:49px;margin-bottom:7px;padding:7px;justify-content:flex-start}.processCanvas .utilityBank .node div{display:block}.processCanvas .utilitySymbol{width:29px;height:29px}
 .processCanvas .exhaust{left:720px;right:auto;top:125px;width:110px;transform:none}
}
@media(max-width:380px){.processCanvas{transform:scale(.31)}}
/* Process canvas is JS-fit to the actual synoptic viewport; CSS breakpoints must not compete with it */
.processCanvas{transform:scale(var(--process-scale,1))!important}
@media(max-width:600px){.processCanvas{transform:scale(var(--process-scale,1))!important}}
/* Maintenance drawer: configuration tools, not duplicate live operation */
.maintenanceSummary{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:10px}
.maintenanceSummary b{font-size:10px}
.sidePanel section:last-child{border-bottom:0}
.sidePanel .wide{position:relative;padding-right:28px}
.sidePanel .wide:after{content:"›";position:absolute;right:10px;color:var(--violet)}
/* Maintenance accordion + drawer-edge handle */
.maintenanceGroup{border-bottom:1px solid var(--line);margin:0}
.maintenanceGroup summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:14px 0;color:var(--lav);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}
.maintenanceGroup summary::-webkit-details-marker{display:none}.maintenanceGroup summary span{font-size:13px;transition:transform .18s ease}.maintenanceGroup[open] summary span{transform:rotate(180deg)}
.maintenanceBody{padding:0 0 13px}.maintenanceField{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 9px;margin:4px 0;background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.045);border-radius:5px;font-size:10px;cursor:default}
.maintenanceField span{color:var(--descriptor)}.maintenanceField b{font-weight:500;color:var(--text)}
.left{position:relative}.left .edgeHandle{position:absolute;right:0;top:0;bottom:0;z-index:4;transition:right .22s ease}
.left.open .edgeHandle{right:0}.left.open .sidePanel{margin-right:25px}
.left.open{overflow:visible}
/* Drawer rail regression fix: opaque rail, clipped content, handle remains on drawer edge */
.left{overflow:hidden!important;background:var(--bg)!important}
.left .edgeHandle{background:var(--bg)!important;z-index:20;border-right:1px solid var(--line)}
.left .sidePanel{overflow:hidden;background:var(--bg);z-index:2}
.left.open{overflow:hidden!important}
.left.open .edgeHandle{right:0}
/* cBio2-derived maintenance forms */
.formField{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px;margin:7px 0;font-size:9px}.formField>span{color:var(--descriptor)}
.formField input,.formField select,.formField textarea{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);border-radius:4px;background:#0b0b10;color:var(--text);font:inherit;padding:7px 8px;outline:none}
.formField select{cursor:pointer}.formField input:focus,.formField select:focus,.formField textarea:focus{border-color:var(--violet)}
.inputUnit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.inputUnit input{grid-column:1/-1;grid-row:1}.inputUnit i{grid-column:2;grid-row:1;padding-right:8px;color:var(--descriptor);font-style:normal;pointer-events:none}
.subhead{margin:13px 0 6px;padding-top:9px;border-top:1px solid rgba(255,255,255,.055);color:var(--lav);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.actionRow{display:flex;gap:5px;margin:8px 0}.actionRow button{flex:1;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.025);color:var(--text);padding:7px 5px;font:inherit;font-size:9px;cursor:pointer}.actionRow button:hover{border-color:var(--violet)}
.historyStub{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:8px;border:1px solid var(--line);border-radius:4px}.historyStub span{font-size:9px}.historyStub small{font-size:8px;color:var(--descriptor)}
.profileHead,.profilePoint{display:grid;grid-template-columns:20px 1fr 1fr;gap:5px;align-items:center}.profileHead{font-size:7px;color:var(--descriptor);padding:0 4px 4px}.profilePoint{margin:4px 0}.profilePoint b{font-size:8px;color:var(--descriptor);text-align:center}.profilePoint input{min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:4px;background:#0b0b10;color:var(--text);padding:6px;font:inherit;font-size:8px}
.formulaField{align-items:start}.formulaField textarea{height:58px;resize:vertical}
.maintenanceBody{max-height:430px;overflow-y:auto;padding-right:3px}.maintenanceBody::-webkit-scrollbar{width:4px}.maintenanceBody::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
/* Sequence module: cBio2 workflow adapted to Home Reactor */
.sequencePanel{padding:18px 14px}.seqMode{display:grid;grid-template-columns:1fr 1fr;margin:12px 0;border:1px solid var(--line);border-radius:5px;overflow:hidden}.seqMode button{border:0;background:transparent;color:var(--muted);padding:7px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer}.seqMode button.active{background:rgba(169,153,255,.12);color:var(--lav)}
.sequencePanel section{padding:12px 0}.seqField{display:grid!important;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:7px;margin:6px 0!important;font-size:9px!important}.seqField>span{color:var(--descriptor)}.seqField input,.seqField select,.seqCommandBuilder>select{width:100%;min-width:0;border:1px solid var(--line);border-radius:4px;background:#0b0b10;color:var(--text);padding:7px;font:inherit;font-size:9px;outline:none}.seqField input:focus,.seqField select:focus,.seqCommandBuilder>select:focus{border-color:var(--violet)}
.seqStatus{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.seqStatus span,.seqCommandNow,.seqSlot{border:1px solid var(--line);border-radius:5px;padding:8px;color:var(--descriptor);font-size:8px}.seqStatus b,.seqCommandNow b,.seqSlot b{display:block;color:var(--text);font-size:10px;margin-top:3px}.seqCommandNow{margin-bottom:9px}.seqSlot{display:flex;align-items:center;justify-content:space-between;margin:5px 0}.seqSlot b{margin:0;color:var(--muted);font-size:8px}
.seqDocActions{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:9px}.seqDocActions button{border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.025);color:var(--text);padding:7px 5px;font-size:8px;cursor:pointer}.seqDocActions button:hover{border-color:var(--violet)}
.seqStepList{max-height:190px;overflow-y:auto}.seqStep{width:100%;display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;text-align:left;gap:0 7px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.018);color:var(--text);padding:7px;margin:4px 0;cursor:pointer}.seqStep>b{grid-row:1/3;align-self:center;display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(169,153,255,.25);border-radius:4px;color:var(--lav);font-size:8px}.seqStep span{font-size:9px}.seqStep small{font-size:7px;color:var(--descriptor)}
.seqCommandBuilder>select{margin-bottom:5px}.seqCommandBuilder>small{display:block;min-height:28px;color:var(--descriptor);font-size:8px;line-height:1.35;margin-bottom:7px}.seqNote{border:1px solid var(--line);border-radius:5px;padding:8px;color:var(--muted);font-size:8px;line-height:1.4}
.right.open{width:330px}.right .sidePanel{width:300px;flex-basis:300px}
@media(max-width:760px){.right.open{width:min(94vw,350px)}.right .sidePanel{width:calc(min(94vw,350px) - 30px);flex-basis:calc(min(94vw,350px) - 30px)}}
/* Sequence workflow v2 */
.sequenceHomeHead{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.sequenceManage{display:flex;gap:5px}.sequenceManage button,.seqBack{border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.025);color:var(--text);padding:6px 8px;font-size:8px;cursor:pointer}.seqBack{margin-bottom:8px;color:var(--lav)}
.loadedList{padding:12px 0}.loadedSequence{border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.018);padding:11px;margin-bottom:9px}.loadedHead{display:flex;justify-content:space-between;gap:8px}.loadedHead small{font-size:7px;letter-spacing:.14em;color:var(--descriptor)}.loadedHead h3{margin:2px 0;color:var(--text);font-size:13px;letter-spacing:0}.seqState{height:max-content;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.seqState.running{color:var(--success)}.seqState.paused{color:var(--warn)}
.loadedProgress{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}.loadedProgress span{display:block;color:var(--descriptor);font-size:8px}.loadedProgress strong{display:block;margin-top:3px;font-size:9px;font-weight:500}.loadedActions{display:flex;gap:5px;margin-top:9px}.loadedActions button,.builderFooter button,.stepEditorActions button{flex:1;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.025);padding:7px 5px;font-size:8px;cursor:pointer}.primary{border-color:rgba(169,153,255,.5)!important;background:rgba(169,153,255,.09)!important;color:var(--lav)!important}.danger{color:var(--danger)!important}
.addSequenceLine{width:100%;border:1px dashed rgba(169,153,255,.4);border-radius:6px;background:rgba(169,153,255,.035);color:var(--lav);padding:10px;font-size:8px;letter-spacing:.1em;cursor:pointer}.sequenceLibrary{padding-top:12px}.libraryRow{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);padding:11px 4px;text-align:left;cursor:pointer}.libraryRow b,.libraryRow small{display:block}.libraryRow b{font-size:10px}.libraryRow small{font-size:8px;color:var(--descriptor);margin-top:2px}.libraryRow i{font-style:normal;color:var(--violet);font-size:16px}
.builderMeta{padding-bottom:8px!important}.builderSteps{padding-top:8px!important}.seqStep.selected{border-color:var(--violet);background:rgba(169,153,255,.07)}.inlineStepEditor{margin:8px -4px 0;padding:12px 4px!important;border-top:1px solid rgba(169,153,255,.35)!important}.stepEditorHead{display:flex;align-items:center;justify-content:space-between}.stepEditorHead h3{margin:0}.stepEditorHead button{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}.inlineStepEditor>small{display:block;color:var(--descriptor);font-size:8px;margin:5px 0 8px}.stepEditorActions,.builderFooter{display:flex;gap:5px;margin-top:10px}.builderFooter{padding-top:12px;border-top:1px solid var(--line)}
/* Flat sequence builder: list rows + drag reorder */
.builderMeta,.builderSteps,.inlineStepEditor{border:0!important;border-radius:0!important;background:transparent!important}
.builderMeta{border-bottom:1px solid var(--line)!important}
.builderSteps{padding:8px 0 0!important}
.builderSteps>h3{padding:0 0 8px;margin:0;border-bottom:1px solid var(--line)}
.seqStepList{max-height:330px;overflow-y:auto}
.seqStep{display:grid!important;grid-template-columns:22px 1fr!important;align-items:stretch;width:100%;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;color:var(--text);cursor:grab}
.seqStep:first-child{border-top:1px solid var(--line)!important}.seqStep.selected{background:rgba(169,153,255,.07)!important;border-left:2px solid var(--violet)!important}.seqStep.dragging{opacity:.38}.seqStep.dragOver{border-top:2px solid var(--violet)!important}
.dragGrip{display:grid;place-items:center;color:var(--descriptor);font-size:10px;letter-spacing:-3px;cursor:grab;user-select:none}
.seqStep>button{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:7px;width:100%;border:0;background:transparent;color:inherit;padding:10px 6px;text-align:left;cursor:pointer}
.seqStep>button>b{display:grid;place-items:center;color:var(--descriptor);font-size:8px;font-weight:500}.seqStep>button>span{font-size:9px}
.builderSteps>.addSequenceLine{margin:8px 0 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;padding:10px 8px}
.inlineStepEditor{margin:10px 0 0!important;padding:12px 0!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}.stepEditorHead{padding-bottom:8px}.stepEditorHead small{display:block;color:var(--descriptor);font-size:7px;letter-spacing:.12em}.stepEditorHead h3{margin:2px 0 0;font-size:11px}
.builderFooter{border-top:0;margin-top:10px}
/* UX audit pass: operational faceplate, flatter runtime lists, trend surface */
.alarmSummary{gap:8px}.alarmSummary>div{display:flex;align-items:baseline;gap:8px}.alarmSummary>div span{font-size:8px;color:var(--descriptor);font-weight:400}.processHeader small#processStatus{font-size:8px;letter-spacing:.08em;text-transform:none;color:var(--descriptor)}
.faceplate{display:grid!important;grid-template-columns:210px minmax(0,1fr) auto!important}.faceMetrics{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));min-width:0}.faceMetrics .metric{border-left:1px solid var(--line)}.faceActions{display:grid;grid-template-columns:repeat(2,62px);align-content:center;gap:5px;padding:10px 12px;border-left:1px solid var(--line)}.faceActions button{height:28px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--text);font-size:8px;letter-spacing:.06em}.faceActions button:disabled{color:var(--descriptor);cursor:not-allowed}.faceActions .trendAction{grid-column:1/-1;color:var(--lav);border-color:rgba(169,153,255,.28);cursor:pointer}
.loadedList{padding:8px 0}.loadedSequence{border:0!important;border-radius:0!important;background:transparent!important;padding:11px 0!important;margin:0!important;border-bottom:1px solid var(--line)!important}.loadedSequence:first-child{border-top:1px solid var(--line)!important}.loadedProgress{border-top:0!important;margin-top:6px!important;padding-top:0!important}.loadedActions{padding-top:7px}.loadedActions button{border-radius:3px!important;background:transparent!important}.addSequenceLine{border:0!important;border-radius:0!important;background:transparent!important;border-bottom:1px solid var(--line)!important;text-align:left}
.trendOverlay{position:fixed;inset:57px 30px 108px;z-index:50;background:rgba(5,5,8,.78);backdrop-filter:blur(4px);display:none;align-items:stretch;justify-content:center;padding:28px}.trendOverlay.open{display:flex}.trendWindow{width:min(1000px,100%);background:#09090d;border:1px solid var(--line);display:flex;flex-direction:column}.trendWindow header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.trendWindow header small{font-size:7px;letter-spacing:.16em;color:var(--descriptor)}.trendWindow h2{margin:3px 0 0;font-size:16px}.trendWindow header button{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.trendTools{display:flex;gap:0;border-bottom:1px solid var(--line)}.trendTools button{border:0;border-right:1px solid var(--line);background:transparent;color:var(--descriptor);padding:9px 14px;font-size:8px}.trendTools button.active{color:var(--lav);background:rgba(169,153,255,.07)}.trendEmpty{flex:1;display:grid;place-content:center;text-align:center;gap:5px;color:var(--descriptor)}.trendEmpty b{color:var(--text);font-size:12px}.trendEmpty span{font-size:9px}
@media(max-width:900px){.faceplate{grid-template-columns:170px minmax(0,1fr)!important}.faceActions{display:none}.faceMetrics{grid-template-columns:repeat(3,1fr)}.faceMetrics .metric:nth-child(n+4){display:none}}
@media(max-width:600px){.alarmSummary>div span{display:none!important}.faceplate{grid-template-columns:1.1fr 2fr!important}.faceMetrics{grid-template-columns:repeat(2,1fr)}.faceMetrics .metric:nth-child(n+3){display:none}.trendOverlay{inset:57px 0 0;padding:0}.trendWindow{border-left:0;border-right:0}}
/* Maintenance transaction + progressive disclosure */
.cascadeFields[hidden]{display:none}.maintenanceCommit{position:sticky;bottom:0;margin:10px -14px -18px;padding:9px 14px;background:rgba(8,8,11,.97);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:5}.maintenanceCommit[hidden]{display:none}.maintenanceCommit>span{font-size:8px;color:var(--warn)}.maintenanceCommit>div{display:flex;gap:5px}.maintenanceCommit button{border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--text);padding:6px 9px;font-size:8px}.maintenanceCommit button:disabled{opacity:.45}
/* Mobile drawers overlay the process instead of crushing it */
@media(max-width:600px){
 .body{position:relative}
 .side.left.open,.side.right.open{position:absolute;top:0;bottom:0;z-index:40;width:min(94vw,350px)!important;flex-basis:auto!important;box-shadow:0 0 28px rgba(0,0,0,.55)}
 .side.left.open{left:0}.side.right.open{right:0}
 .side.left.open .sidePanel,.side.right.open .sidePanel{display:block;width:calc(min(94vw,350px) - 24px)!important;flex-basis:auto!important;height:100%;overflow-y:auto}
 .side.left.open .edgeHandle,.side.right.open .edgeHandle{height:100%}
}
/* Sequence structural review */
.sequenceValidation{border-top:1px solid var(--line);padding:10px 0!important}.sequenceValidation h3{margin:0 0 7px}.sequenceValidation>div{display:grid;grid-template-columns:16px 1fr;gap:5px;align-items:center;padding:4px 0;font-size:8px;color:var(--descriptor)}.sequenceValidation>div b{font-size:10px;text-align:center}.sequenceValidation .ok b{color:var(--success)}.sequenceValidation .warn b{color:var(--warn)}.sequenceValidation .error b{color:var(--danger)}