:root{--bg:#c5c5c5;--panel:#e3e3e3;--line:#a2a2a2;--text:#242424;--muted:#555;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:12px Arial,Helvetica,sans-serif}
button,select,input{font:inherit;color:inherit}
button,select,input[type=number]{border:1px solid #909090;background:#f3f3f3;border-radius:0}
button,select{min-height:28px;padding:5px 8px}
button{cursor:pointer;white-space:nowrap}
button:hover{background:#fff;border-color:#444}
button:disabled,input:disabled,select:disabled{opacity:.48;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,.instrument:focus-visible{outline:2px solid #111;outline-offset:2px}
.primary{background:#404040;color:white;border-color:#333;font-weight:700}
.primary:hover{background:#222;color:white}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.masthead{height:60px;background:#2e2e2e;color:#eee;border-bottom:3px solid #929292;padding:9px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:bold;color:#c6c6c6}
.eyebrow>span{margin:0 8px;color:#999}
.eyebrow>.author{font-weight:400;letter-spacing:.3px;color:#ccc}
.brand h1{font-size:21px;letter-spacing:.7px;margin:5px 0 0}
.brand h1 small{font:9px var(--mono);letter-spacing:.8px;margin-left:12px;color:#bbb}
.ho-logo{width:68px;height:43px;flex-shrink:0}
main{padding:7px 12px;margin:auto;max-width:2400px;display:flex;flex-direction:column;gap:6px}
.toolbar{display:flex;align-items:end;gap:12px;min-height:42px;flex-shrink:0}
.toolbar label,.toolbar-reading{display:grid;gap:4px;font:9px var(--mono)}
.toolbar select{font:11px Arial,sans-serif;max-width:245px;height:28px}
.toolbar-reading output,.toolbar-reading strong{height:28px;min-width:98px;border:1px solid #999;background:#eee;font:13px var(--mono);padding:6px 8px;text-align:center}
.transport{margin-left:auto;display:flex;gap:5px}
.transport button{font-size:11px}
.tabs{display:flex;min-height:28px;flex-shrink:0;background:#b7b7b7;border:1px solid #969696}
.tabs button{font:9px var(--mono);background:transparent;border:0;border-right:1px solid #999;border-bottom:2px solid transparent;padding:6px 13px;min-height:27px}
.tabs button.active{background:#eee;border-bottom-color:#333;font-weight:bold}
.tabs #status{margin-left:auto;align-self:center;padding:0 12px;font:10px var(--mono);letter-spacing:.5px}
.indicators{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;flex-shrink:0}
.indicators article{padding:6px 8px;border:1px solid #999;background:var(--panel);min-width:0}
.indicators small{font:9px var(--mono);display:block;margin-bottom:5px;white-space:nowrap}
.indicators strong{display:block;border:1px solid #b2b2b2;background:#f6f6f6;padding:3px 7px;font:20px var(--mono);white-space:nowrap}
.indicators em{font:11px var(--mono);font-style:normal}
.danger{background:#333!important;color:#fff!important;border-color:#111!important}
.view[hidden]{display:none!important}
.workspace{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(390px,1fr);gap:7px;min-height:0;height:100%}
.left-stack{display:grid;grid-template-rows:minmax(0,1fr) 116px;gap:6px;min-width:0;min-height:0}
.right-stack{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
.panel{border:1px solid #969696;background:var(--panel);min-width:0}
.panel-title{display:flex;align-items:center;justify-content:space-between;background:#d0d0d0;border-bottom:1px solid #aaa;padding:5px 9px;min-height:26px;gap:8px}
.panel-title h1,.panel-title h2{font-size:11px;text-transform:uppercase;letter-spacing:.3px;margin:0}
.badge{font:8px var(--mono);border:1px solid #999;padding:2px 4px;white-space:nowrap}
.process{display:flex;flex-direction:column;min-height:0}
.legend{display:flex;gap:14px;padding:6px 10px 3px;flex-wrap:wrap;font-size:9px;color:#444}
.legend>span:before{content:'';display:inline-block;width:19px;vertical-align:middle;margin-right:5px;border-top:2px solid #333}
.legend .dash:before{border-top-style:dashed}
.legend .double:before{border-top:3px double #777}
.legend .return:before{border-top-color:#999}
.legend .dot:before{border-top-style:dotted}
.legend .dashdot:before{border-top:2px dashed #777}
.legend .hmr-reference{margin-left:auto;font:9px var(--mono)}
.legend .hmr-reference:before{display:none}
.hmr-reference b{font-weight:400}
.hmr-reference em{font-style:normal}
.schematic-viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 7px 4px}
#process{width:100%;height:100%;display:block;min-height:0}
.instrument rect{fill:#f5f5f5;stroke:#aaa}
.instrument-leader{stroke:#999;stroke-width:1;fill:none}
.hist-tag{font:16px var(--mono);fill:#333}
.hist-value{font:23px var(--mono);fill:#111}
.instrument-basis{font:11px var(--mono);fill:#555}
.hist-text{font:15px var(--mono);fill:#444}
.vessel-name{font-weight:700}
.tube-pipe{fill:none;stroke-width:2.4;stroke-linejoin:round}
.feed-tube{stroke:#888;stroke-width:3.2}
.lmr-tube{stroke:#333}
.hmr-tube{stroke:#666;stroke-dasharray:8 4}
.tube-directions{stroke:#555;stroke-width:1.5;fill:none}
.spray-bars{stroke:#555;stroke-width:2;fill:none}
.shell-flow{stroke:#888;stroke-width:2;stroke-dasharray:3 3;fill:none}
.vapour-return{stroke:#777;stroke-width:3;fill:none}
.jt-valves{fill:#fafafa;stroke:#444;stroke-width:2}
.supply{display:flex;flex-direction:column}
.supply-phase{font:8px var(--mono)}
.supply-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:8px;padding:4px 9px;flex:1;min-height:0;align-items:center}
#supplyProcess{width:100%;height:100%;min-height:0}
.supply-pipes{fill:none;stroke:#666;stroke-width:1.8}
.supply-labels{font:12px var(--mono);fill:#333}
#sepSvg{font-weight:bold}
.supply-values{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.supply-values>div{display:grid;gap:3px}
.supply-values small{font:8px var(--mono);color:#555}
.supply-values strong{font:14px var(--mono);padding:3px 6px;background:#f3f3f3;border:1px solid #aaa;white-space:nowrap}
.controls,.makeup-panel{flex-shrink:0}
.control{padding:3px 9px;border-bottom:1px solid #bdbdbd}
.control:last-child{border-bottom:0}
.control-top{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:27px}
.control-top label{font-size:10px;font-weight:bold;flex:1}
.control-top label small{display:block;margin-top:2px;font:8px var(--mono);color:#555;font-weight:400}
.value-entry{display:flex;align-items:center;position:relative;background:#f6f6f6;border:1px solid #999;font:10px var(--mono)}
.value-entry input{width:67px;padding:3px 18px 3px 5px;border:0;font:15px var(--mono);text-align:right;background:transparent;appearance:textfield;min-width:0}
.value-entry input::-webkit-inner-spin-button{appearance:none}
.value-entry>span:not(.output-arrows){position:absolute;right:30px;pointer-events:none;font-size:9px}
.output-arrows{display:grid;width:25px;border-left:1px solid #999}
.output-arrows button{height:15px;min-height:15px;padding:0;font:8px Arial,sans-serif;border:0;background:#eee}
.output-arrows button+button{border-top:1px solid #aaa}
.output-arrows button:hover{background:white}
.mode-pill{font:9px var(--mono);border:1px solid #999;padding:5px 6px;min-width:40px;text-align:center}
.lmr-controller{border-top:1px solid #999;background:#dadada;padding:5px 9px}
.controller-top{display:flex;align-items:center;justify-content:space-between;gap:5px}
.controller-top strong{font:9px var(--mono)}
.controller-top select{font:10px var(--mono);min-height:24px;padding:3px 5px}
.controller-values{display:flex;align-items:end;gap:7px;padding-top:4px}
.flow-pv{margin-right:auto;display:grid;gap:2px}
.flow-pv small,.controller-values label{font:8px var(--mono)}
.flow-pv strong{font:14px var(--mono)}
.controller-values label{display:grid;gap:2px}
.controller-values input{width:115px;padding:3px 5px;font:13px var(--mono);height:25px}
.controller-values button{font-size:10px;min-height:25px;padding:4px 6px}
.controller-status{display:flex;justify-content:space-between;gap:4px;padding-top:4px;font:8px var(--mono);color:#555}
.controller-status small{font-size:inherit}
#makeupControls{display:grid;grid-template-columns:1fr 1fr}
#makeupControls .control{border-bottom:1px solid #bbb;padding:4px 9px}
#makeupControls .control:nth-child(even){border-left:1px solid #bbb}
#makeupControls .control:nth-child(n+3){border-bottom:0}
#makeupControls .control-top label{font:13px var(--mono)}
#makeupControls .control-top small{font:8px Arial,sans-serif}
#makeupControls .value-entry input{width:59px;font-size:14px}
.composition{flex:1;display:flex;flex-direction:column}
.composition-note{font:8px var(--mono)}
.composition-body{padding:0 9px;flex:1;display:grid;grid-template-rows:repeat(4,1fr)}
.composition-row{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #bdbdbd;min-height:20px;font:12px var(--mono)}
.composition-row:last-child{border-bottom:0}
.composition-row small{display:inline-block;font:10px Arial,sans-serif;margin-left:9px;color:#555}
.composition-row strong{font:12px var(--mono)}
.composition-footer{display:flex;align-items:center;gap:8px;border-top:1px solid #aaa;padding:4px 8px;font:8px var(--mono);flex-wrap:wrap}
.composition-footer strong{font:10px var(--mono)}
.exports{display:flex;margin-left:auto;gap:4px}
.exports button{min-height:22px;padding:3px 6px;font:9px Arial,sans-serif}
.alarm-panel{display:flex;align-items:center;gap:8px;flex-shrink:0;min-height:29px;border:1px solid #999;background:#ddd;padding:2px 4px}
.alarm-panel button{min-height:23px;padding:3px 7px;font-size:10px}
.alarm-panel #alarms{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.alarm-panel #displayBadge{font:8px var(--mono);padding:0 5px;white-space:nowrap}
#alarmCount{display:inline-block;font:10px var(--mono);font-weight:bold;margin-left:5px}
.unacked{background:#333!important;color:white!important}
.alarm-row{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid #aaa;font-size:12px;line-height:1.5}
.alarm-state{font:9px var(--mono);min-width:80px}
.normal-row{padding:14px}
.input-error{font-size:10px;font-weight:bold;margin-top:3px}
.input-error:empty{display:none}
.input-invalid{outline:2px solid #333}
.phase-banner{display:flex;align-items:center;gap:20px;padding:12px;border:1px solid #aaa;margin-bottom:8px;background:#ddd}
.phase-banner small{font:9px var(--mono)}
.phase-banner h2{font-size:14px;margin:5px 0}
.phase-banner p{font-size:12px;line-height:1.5;margin:0;flex:1}
.trend-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8px}
.trend-grid svg{width:100%;padding:8px}
.temperature-panel{margin-top:8px}
.table-wrap{overflow:auto;padding:0 12px}
table{border-collapse:collapse;width:100%;font:12px var(--mono)}
th,td{border-bottom:1px solid #bbb;padding:12px 8px;text-align:right}
th{font-size:10px;color:#555;font-weight:normal}
td:first-child,th:first-child{text-align:left}
.fine{font-size:11px;color:#555;line-height:1.5;padding:0 12px}
.sequence-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.learning-intro,.learning-note{padding:12px;margin:0;font-size:12px;line-height:1.6}
.learning-prompt{padding:12px;border-top:1px solid #bbb}
.learning-prompt h3,.learning-note h3{font-size:12px;margin:0 0 6px}
.learning-prompt p{margin:0;font-size:12px;line-height:1.6;color:#555}
.event{display:grid;grid-template-columns:68px 72px 1fr;gap:8px;padding:10px 12px;border-bottom:1px solid #bbb;font-size:11px;line-height:1.5}
.event time,.event-type{font:10px var(--mono);color:#555}
#events{max-height:640px;overflow:auto}
.assumptions-mode .indicators,.assumptions-mode .toolbar,.assumptions-mode .alarm-panel{display:none}
.assumption-intro{padding:12px;font-size:12px;line-height:1.6;margin:0}
#assumptionFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px}
#assumptionFields fieldset{border:1px solid #999;padding:8px;margin:0;min-width:0}
#assumptionFields legend{font:700 10px var(--mono);padding:0 5px}
#assumptionFields label{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;border-bottom:1px solid #bbb;padding:10px 0;font-size:11px}
.assumption-copy{display:grid;gap:5px;min-width:0}
.assumption-copy>span{font-weight:bold}
.assumption-help{display:block;font:10px/1.5 Arial,sans-serif;color:#555}
.assumption-input{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-top:1px}
.assumption-input input{width:72px;padding:5px;font:12px var(--mono)}
.assumption-input small{width:38px;font-size:9px}
.assumption-actions{padding:10px 12px;display:flex;gap:12px;align-items:center;border-top:1px solid #aaa}
#assumptionStatus{font:10px var(--mono)}
.target-balance{display:grid;gap:6px;padding:10px 0;font-size:10px}
.target-balance output{font:15px var(--mono)}
.target-balance small{font:10px/1.5 Arial,sans-serif;color:#555}
.target-balance>span{font:10px var(--mono)}
dialog{background:#ededed;border:1px solid #555;padding:20px;width:min(780px,94vw);max-height:88vh;color:#222}
dialog::backdrop{background:#0008}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #aaa;padding-bottom:12px;margin-bottom:10px}
.dialog-head h2{font-size:18px;margin:0}
dialog p{font-size:12px;line-height:1.7;color:#444}
.dialog-actions{display:flex;justify-content:end;gap:10px;margin-top:20px}

@media(min-width:1100px) and (min-height:700px){body[data-view=overview] main{height:calc(100dvh - 60px)}
body[data-view=overview] #view-overview{flex:1;min-height:0}
.workspace{min-height:455px}
}

@media(min-width:1500px) and (min-height:900px){.masthead{height:78px;padding:12px 24px}
.eyebrow{font-size:11px}
.brand h1{font-size:26px}
.brand h1 small{font-size:11px}
.ho-logo{width:90px;height:55px}
main{padding:10px 18px;gap:9px}
body[data-view=overview] main{height:calc(100dvh - 78px)}
.toolbar{min-height:48px;gap:16px}
.toolbar label,.toolbar-reading{font-size:10px}
.toolbar select,.toolbar-reading output,.toolbar-reading strong{height:32px}
.toolbar select{font-size:12px}
.transport button{min-height:32px;font-size:12px}
.tabs button{font-size:10px;padding:8px 17px}
.indicators{gap:9px}
.indicators article{padding:9px 11px}
.indicators small{font-size:10px}
.indicators strong{font-size:24px;padding:5px 9px}
.indicators em{font-size:13px}
.workspace{gap:10px}
.left-stack{grid-template-rows:minmax(0,1fr) 153px;gap:9px}
.right-stack{gap:9px}
.panel-title{min-height:32px;padding:8px 11px}
.panel-title h2{font-size:12px}
.badge,.composition-note,.supply-phase{font-size:9px}
.legend{font-size:10px;padding:9px 12px 5px}
.legend .hmr-reference{font-size:10px}
.control{padding:8px 11px}
.control-top{min-height:34px}
.control-top label{font-size:12px}
.control-top label small{font-size:10px}
.value-entry input{width:81px;font-size:18px;padding-right:21px}
.value-entry>span:not(.output-arrows){right:35px;font-size:10px}
.output-arrows{width:30px}
.output-arrows button{height:19px;min-height:19px;font-size:10px}
.mode-pill{font-size:10px;padding:7px 8px;min-width:46px}
.lmr-controller{padding:9px 11px}
.controller-top strong{font-size:10px}
.controller-top select{font-size:11px;min-height:28px}
.controller-values{padding-top:9px}
.flow-pv small,.controller-values label{font-size:10px}
.flow-pv strong{font-size:17px}
.controller-values input{font-size:16px;width:140px;height:30px}
.controller-values button{font-size:11px;min-height:30px}
.controller-status{font-size:9px;padding-top:8px}
#makeupControls .control{padding:9px 11px}
#makeupControls .control-top label{font-size:15px}
#makeupControls .control-top small{font-size:10px}
#makeupControls .value-entry input{width:69px;font-size:16px}
.composition-row{min-height:27px;font-size:14px}
.composition-row strong{font-size:15px}
.composition-row small{font-size:12px}
.composition-body{padding:0 12px}
.composition-footer{padding:7px 11px;font-size:9px}
.composition-footer strong{font-size:11px}
.exports button{font-size:10px;min-height:26px}
.supply-values{gap:10px}
.supply-values small{font-size:9px}
.supply-values strong{font-size:18px;padding:6px 8px}
.supply-grid{padding:6px 12px}
.alarm-panel{min-height:32px}
.alarm-panel button,.alarm-panel #alarms{font-size:11px}
.alarm-panel #displayBadge{font-size:9px}
}

@media(max-width:1099px),(max-height:699px){.workspace{height:auto;align-items:start}
.left-stack{grid-template-rows:auto auto}
.process .schematic-viewport{aspect-ratio:1100/592}
.supply-grid{min-height:100px}
.composition-body{min-height:100px}
.toolbar{flex-wrap:wrap}
.transport{margin-left:auto}
.indicators{grid-template-columns:repeat(3,minmax(0,1fr))}
.workspace{grid-template-columns:minmax(0,1.4fr) minmax(350px,1fr)}
.legend .hmr-reference{margin-left:0}
.composition-footer>span{display:none}
}

@media(max-width:850px){.masthead{height:auto;min-height:70px;padding:12px}
.brand h1{font-size:19px}
.brand h1 small{display:block;margin:4px 0 0;font-size:8px}
.eyebrow{font-size:8px;letter-spacing:.7px}
.eyebrow>.author{display:block;margin:4px 0 0}
.ho-logo{width:57px;height:40px}
main{padding:8px;gap:8px}
.toolbar{gap:8px}
.toolbar>label{flex:1}
.toolbar select{max-width:none;width:100%}
.toolbar-reading{flex:1}
.transport{width:100%;justify-content:end}
.transport button{flex:1}
.tabs{overflow-x:auto}
.tabs button{padding:9px 10px;font-size:9px}
.tabs #status{display:none}
.indicators article{padding:6px}
.indicators small{font-size:8px;white-space:normal;line-height:1.4}
.indicators strong{font-size:18px;padding:4px}
.workspace{grid-template-columns:1fr;gap:8px}
.left-stack,.right-stack{gap:8px}
.process .legend{gap:9px}
.legend .hmr-reference{display:none}
.process .schematic-viewport{aspect-ratio:1100/680;overflow-x:auto;justify-content:flex-start}
.schematic-viewport #process{min-width:620px;min-height:340px}
.supply-grid{grid-template-columns:1fr 1fr;min-height:110px}
.supply-values strong{font-size:12px}
.supply-values small{font-size:8px}
.control{padding:7px 10px}
.control-top label{font-size:12px}
.control-top label small{font-size:10px}
.value-entry input{font-size:17px;width:80px;padding-right:19px}
.output-arrows{width:32px}
.output-arrows button{height:22px;min-height:22px;font-size:10px}
.value-entry>span:not(.output-arrows){right:37px}
.mode-pill{font-size:11px;padding:8px}
.controller-top select{min-height:32px;font-size:11px}
.controller-top strong{font-size:10px}
.controller-values{padding-top:8px}
.controller-values input{height:31px}
.controller-values button{min-height:31px}
.controller-status{padding:7px 0;font-size:9px}
#makeupControls .control{padding:7px}
#makeupControls .control-top label{font-size:14px}
#makeupControls .control-top small{font-size:10px}
.composition-row{min-height:31px;font-size:14px}
.composition-row strong{font-size:14px}
.composition-footer{padding:7px}
.composition-footer>span{display:block}
.composition-footer .exports button{min-height:28px;font-size:10px}
.alarm-panel{flex-wrap:wrap}
.alarm-panel #alarms{order:4;flex-basis:100%;white-space:normal;line-height:1.5;padding:3px}
.alarm-panel #displayBadge{margin-left:auto}
.trend-grid,.sequence-grid{grid-template-columns:1fr}
.phase-banner{align-items:start;flex-direction:column;gap:5px}
#assumptionFields{grid-template-columns:1fr 1fr}
}

@media(max-width:550px){.indicators{grid-template-columns:1fr 1fr}
.supply-grid{grid-template-columns:1fr}
.supply-grid #supplyProcess{height:125px}
.supply-values{gap:7px;padding:0 2px 7px}
.supply-values strong{font-size:15px}
.supply-phase{font-size:7px}
#assumptionFields{grid-template-columns:1fr}
.assumption-actions{flex-direction:column;align-items:start}
.composition-footer>span{display:none}
.composition-row small{font-size:11px}
.event{grid-template-columns:60px 62px 1fr;font-size:10px}
.toolbar-reading>span{font-size:8px}
.tabs button{font-size:8px}
.controller-values input{width:105px}
.control-top{gap:5px}
}


/* Laptop density: all four faceplates remain visible without an internal scrollbar. */
@media(min-width:851px) and (max-width:1499px), (min-width:851px) and (max-height:899px){#flowControls{display:grid;grid-template-columns:1fr 1fr}
#flowControls .control{padding:6px 8px;border-bottom:1px solid #bbb}
#flowControls .control:nth-child(even){border-left:1px solid #bbb}
#flowControls .mode-pill{display:none}
#flowControls .control-top{gap:4px}
#flowControls .control-top label{font-size:9px}
#flowControls .value-entry input{width:60px;font-size:14px}
.composition-row small{margin-left:5px}
.left-stack{grid-template-rows:minmax(0,1fr) 108px}
}


.workspace:has(.input-invalid){min-height:490px}


#process [data-pv=lmrFlow]{font-size:21px}

@media(max-width:850px){.toolbar>label,.toolbar-reading{flex:1 1 calc(50% - 8px);min-width:0}
.toolbar select{min-width:0}
.process .schematic-viewport{aspect-ratio:auto;height:355px;flex:none;align-items:flex-start}
.schematic-viewport #process{height:340px}
}


/* Welcome-page navigation keeps the HMI palette. */
.eyebrow a,.eyebrow a:visited{color:inherit;text-decoration:none}.eyebrow a:hover{text-decoration:underline}.eyebrow a:focus-visible{outline:2px solid currentColor;outline-offset:3px}