@charset "UTF-8";
/* Continuous plant page: what differs from the batch lab (style.css). */

.plant-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:14px;padding:14px 18px 18px}

/* The 2D plant: a sketch on paper that can be zoomed and moved. */
#tab-plant{position:relative;padding:0;overflow:hidden}
.plant-sketch{cursor:grab;touch-action:none}
.plant-sketch.dragging{cursor:grabbing}
.plant-sketch .sketch-hit{cursor:pointer}
.plant-zoom{position:absolute;left:10px;bottom:10px;display:flex;gap:4px}
.plant-zoom button{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--sk-ink);background:var(--sk-note);color:var(--sk-ink);font:600 15px/1 "Segoe Print","Bradley Hand","Comic Sans MS",cursive;
 box-shadow:1px 2px 0 var(--sk-shadow)}
.plant-zoom button.fit{width:auto;padding:0 10px;font-size:12px}
.plant-zoom button:hover{background:var(--sk-note-hover)}
/* The hint right of the zoom buttons, wrapped to the right on a narrow view (on a phone it ran under them). */
#tab-plant .sketch-hint{position:absolute;right:12px;bottom:8px;left:130px;margin:0;text-align:right}
#tab-plant .sketch-panel{left:10px;right:auto}   /* the drawing's empty corner, above the wash tank */
.plant-svg .flow{animation:plant-flow 1.2s linear infinite}
.plant-svg.paused .flow{animation-play-state:paused}
@keyframes plant-flow{to{stroke-dashoffset:-24}}
.plant-bubbles circle{animation:plant-bubble 1.4s ease-in infinite;opacity:0}
@keyframes plant-bubble{0%{transform:translateY(0);opacity:0}25%{opacity:.95}100%{transform:translateY(-9px);opacity:0}}
.plant-svg.no-streams .plant-stream-text{display:none}
.plant-stream-text{fill:var(--sk-stream-text)}
.plant-valve.open > g > path:first-child{fill:var(--sk-valve-open);fill-opacity:1}
.plant-svg .plant-warn{fill:var(--sk-red);font-weight:700}
/* A chosen tray's alerts in its card (the boxes and the list: style.css). */
#sel-rows .alert-item{margin:2px 0 6px}
/* The 3D plant fills its tab, as the batch lab's 3D view (style.css: .world, .world-tools, #world-callout). */
#tab-plant3d{position:relative;padding:0;overflow:hidden}
#tab-plant3d.active{display:block}
/* The 3D plant's names: a small block over (or under) each main part, its contents below its name. */
.plant3d-names{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.plant3d-names span{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;padding:3px 8px;border-radius:8px;
 background:var(--plant3d-name-bg);border:1px solid var(--plant3d-name-line);color:var(--plant3d-name-text);font-size:11px;line-height:1.3;white-space:nowrap;will-change:transform}
.plant3d-names span[hidden]{display:none}
.plant3d-names b{font-weight:650}
.plant3d-names small{font-size:10.5px;color:var(--plant3d-name-small);font-variant-numeric:tabular-nums}
.plant3d-names small:empty{display:none}
/* Text over a line stays readable: a halo of paper behind the glyphs. */
.plant-svg text{paint-order:stroke;stroke:var(--sk-paper);stroke-width:4px;stroke-linejoin:round;stroke-opacity:.92}
.plant-svg .tray-head text{fill:var(--sk-tray-head)}
.plant-svg .two-mark{fill:var(--two-liquids)}
.plant-svg .tank-title{fill:var(--sk-ink);font-size:1.04em}

/* Controls */
.plant-controls .card h3{font-size:14px}
.segmented{display:flex;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.segmented button{border:0;background:none;color:var(--muted);height:30px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600}
.segmented button:hover{color:var(--text)}
.segmented button[aria-checked=true]{background:var(--surface-4);color:var(--text)}
.supply-switch{margin:-2px 0 10px;width:max-content}
.tank-bar{height:10px;border-radius:6px;background:var(--surface-4);overflow:hidden;margin:-2px 0 4px}
.tank-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tank-bar),var(--tank-bar-end));border-radius:6px;transition:width .4s}
.valve-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-2px 0 8px}
.valve-toggle{gap:7px}
.valve-toggle .valve-lamp{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.valve-toggle[aria-pressed=true] .valve-lamp{background:var(--good);box-shadow:0 0 8px var(--good)}
.tray-pick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.tray-pick select{height:28px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);padding:0 6px;font-size:12px}
.plant-outputs{grid-template-columns:1fr 1fr;row-gap:12px;margin-bottom:4px}
.plant-outputs strong{font-size:19px}
.plant-outputs small{display:block;font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.balance-note{line-height:1.5}
.phase-note{line-height:1.5;color:var(--warn)}
.water-note{line-height:1.5}
.water-note.warn,#hydro-note.warn{color:var(--bad)}
.control-head label small,.control-head span small{font-weight:500;margin-left:4px}
.selected-card .control-head{margin-bottom:4px}
.small-x{width:28px;height:28px;font-size:18px}
.plant-receivers{display:block}
.plant-receivers .control-head{margin-bottom:2px}
/* A product tank's heads and fusel oil (6-congener wash), under its row (the table: style.css) */
.plant-receivers .row.with-congeners{border-bottom:0;padding-bottom:2px}
/* A product tank's energy (its share of the steam) under its volume and strength */
.plant-receivers .row strong small{display:block;font-weight:500;font-size:11.5px;color:var(--faint);text-align:right;margin-top:2px}
.glance-sep{display:none}
.tank-congeners{border-bottom:1px solid var(--line-soft);padding:0 0 8px;font-size:12px;color:var(--muted)}
.rect-fields.off,.side-fields.off,.hydro-fields.off,.sep-fields.off,.pressure-fields.off{opacity:.45}
#profile-legend,#legend-strength,#legend-flows{margin-top:6px}

/* Fusel oil and heads: the two liquids of a tray (the maps and profiles: style.css) */
.phase-table{display:grid;grid-template-columns:auto 1fr 1fr;gap:3px 12px;margin-top:8px;font-size:12px;font-variant-numeric:tabular-nums}
.phase-table span:nth-child(3n+2),.phase-table span:nth-child(3n){text-align:right}
.phase-table span:nth-child(-n+3){color:var(--muted);font-weight:600}

/* Responsive */
@media (max-width:1100px){
 body.plant-page{overflow:auto;height:auto}
 .plant-layout{grid-template-columns:1fr;grid-template-rows:auto auto}
 .plant-page .view-panel{min-height:640px}
 .plant-controls{grid-column:auto;grid-row:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;padding:0}
}
@media (max-width:760px){
 .plant-layout{display:flex;flex-direction:column;padding:10px;gap:10px}
 .plant-controls{display:flex;flex-direction:column}
 .plant-page .view-panel{min-height:560px}
 #tab-plant.active{display:flex;flex-direction:column;background:var(--sk-paper)}
 #tab-plant .plant-sketch{position:relative;inset:auto;flex:1;min-height:420px}
}

/* Looking back (lookback.js): the plant's controls show that moment and take no changes. */
body.plant-page.looking-back .control-panel .group-body :is(input,select,button){pointer-events:none;opacity:.55}

/* The Columns tab: a panel per column, its facts beside its trays' charts. */
.column-panels{display:grid;gap:14px}
.column-panel .column-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.column-panel .column-head h3{margin:0}
.column-panel .column-every{margin-left:auto}
.column-body{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start}
.column-charts{display:grid;gap:8px}
.column-charts .chart-head h4{margin:0;font-size:13px}
@media (max-width:1100px){.column-body{grid-template-columns:1fr}}