@charset "UTF-8";
/* Distillation Lab — calm dark lab instrument. Tokens first, then layout, then parts. */
:root{
 --radius:16px;--radius-sm:10px;
 --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,sans-serif;
 font-family:var(--font);font-size:14px;line-height:1.45;color:var(--text);background:var(--bg);
 -webkit-font-smoothing:antialiased;font-synthesis:none;
}
*{box-sizing:border-box}
/* An SVG fill or stroke that is a theme token (theme-paint.js paint): of no weight, as a presentation attribute is. */
:where([data-fill]){fill:var(--p-fill)}:where([data-stroke]){stroke:var(--p-stroke)}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(1200px 500px at 50% -200px,var(--glow) 0%,transparent 70%),var(--bg);overflow:hidden;height:100dvh;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
a{color:inherit}
:focus-visible{outline:2px solid var(--cool);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
h2{font-size:18px}h3{font-size:15px}h4{font-size:13px;color:var(--muted);margin:22px 0 10px}
p{margin:0}
.muted{color:var(--faint);font-size:12px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.hint{font-size:12px;color:var(--faint);margin-top:8px}
.note{font-size:12px;color:var(--faint);line-height:1.6;margin-top:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid transparent;background:none;font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .05s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover:not(:disabled){background:var(--accent-strong)}
.btn.secondary{background:var(--surface-3);border-color:var(--line);color:var(--text)}
.btn.secondary:hover:not(:disabled){background:var(--surface-4);border-color:var(--line-strong)}
.btn.ghost{color:var(--muted)}
.btn.ghost:hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.btn.icon{width:36px;padding:0}
.btn.wide{width:100%}
.i-play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.running-now .i-play{width:10px;height:12px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin:0}
.i-reset:before{content:'↺';font-size:18px;line-height:1;font-weight:500}

/* Top bar */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 18px;background:var(--bg-top);border-bottom:1px solid var(--line-soft);min-height:60px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand strong{display:block;font-size:15px;letter-spacing:-.01em}
.brand small{display:block;font-size:12px;color:var(--faint)}
/* The server that many share: a guest is told that nothing of theirs is kept (account.js). */
.guest-note{padding:6px 18px;font-size:12px;color:var(--faint);background:var(--bg-top);border-bottom:1px solid var(--line-soft)}
.guest-note a{color:var(--accent)}
.account-link{font-size:12.5px}
/* The account as a dialog over the lab (account-dialog.js): the settings' cards, its forms, and what it keeps. */
.account-dialog{width:min(760px,calc(100% - 24px))}
.account-body{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.account-dialog .settings-card h3{font-size:15px;margin:0}
.account-dialog .settings-lead,.account-dialog .settings-note{font-size:13.5px;line-height:1.5}
.account-google{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.account-form{display:flex;flex-direction:column}
.account-form .btn{align-self:flex-start}
.account-dialog .account-status{margin:10px 0 0;font-size:13px;color:var(--good);min-height:1.2em;line-height:1.4}
.account-dialog .account-status.bad{color:var(--bad)}
.account-dialog .account-status:empty{min-height:0;margin:0}
.settings-card.account-who{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
.account-kept{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:0;font-size:13.5px;line-height:1.5}
.account-kept dt{color:var(--muted)}
.account-date{white-space:nowrap}
.account-kept dd{margin:0;overflow-wrap:anywhere}
.account-kept small{color:var(--faint);font-size:12.5px}
.account-kept .btn{margin-left:4px;vertical-align:baseline}
.scenario-chip{display:flex;align-items:center;gap:10px;min-width:0;max-width:340px;height:40px;padding:0 6px 0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-align:left}
.scenario-chip:hover{border-color:var(--line-strong);background:var(--surface-2)}
.chip-label{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
#run-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chip-edit{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--accent-ink);padding:6px 12px;border-radius:8px;background:var(--accent);white-space:nowrap}
.scenario-chip:hover .chip-edit{background:var(--accent-strong)}
.fresh .scenario-chip{border-color:var(--accent);animation:setup-pulse 2.4s ease-in-out infinite}
@keyframes setup-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 0 5px rgba(var(--accent-rgb),.22)}}
@media (prefers-reduced-motion:reduce){.fresh .scenario-chip{animation:none}}
/* Batch | Continuous | Learn switch in the top bar (every page). */
.section-switch{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.section-switch a{padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.section-switch a:hover{color:var(--text);background:var(--surface-3)}
.section-switch a[aria-current=page]{background:var(--surface-4);color:var(--text)}

.run-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.skip-heatup[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.skip-heatup[aria-pressed=true]:disabled{opacity:1}   /* heating up: shown, not greyed */
.status{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:99px;font-size:12px;font-weight:600;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.status:before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.run-controls .status{white-space:nowrap}
@media (max-width:600px){.run-controls .status{white-space:normal;height:auto;min-height:28px;padding-block:4px}}
.status.running{color:var(--good);border-color:rgba(var(--good-rgb),.35);background:rgba(var(--good-rgb),.08)}
.status.running:before{animation:pulse 1.4s ease-in-out infinite}
.status.paused{color:var(--warn);border-color:rgba(var(--warn-rgb),.3)}
.status.completed{color:var(--cool);border-color:rgba(var(--cool-rgb),.3)}
.status.error{color:var(--bad);border-color:rgba(var(--bad-rgb),.4);background:rgba(var(--bad-rgb),.08)}
.clock{font-variant-numeric:tabular-nums;font-size:18px;font-weight:600;letter-spacing:.02em;min-width:88px;text-align:center}
.run-toggle{min-width:104px}
.speed{display:flex;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.speed button{border:0;background:none;color:var(--muted);height:30px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600}
.speed button:hover{color:var(--text)}
.speed button[aria-checked=true]{background:var(--surface-4);color:var(--text)}
.actual-speed{font-size:12px;color:var(--faint);min-width:64px;font-variant-numeric:tabular-nums}
/* The jump to the next event (web/jump-bar.js): the events as buttons like the speeds', grey while the run has none of
   it ahead; while a jump is on, the line saying where it runs and its Stop in their place. Looking back it gives way to
   Run from here, as the quick heat-up does. */
.jump{display:flex;align-items:center;padding:3px;border-radius:11px;background:var(--surface);border:1px solid var(--line)}
.jump-label{font-size:12px;color:var(--faint);padding:0 6px 0 8px;white-space:nowrap}
.jump button{border:0;background:none;color:var(--muted);height:30px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600;white-space:nowrap}
.jump button:hover:not(:disabled){color:var(--text);background:var(--surface-3)}
.jump button:disabled{opacity:.4;cursor:default}
.jumping{display:flex;align-items:center;gap:8px;padding:3px 3px 3px 12px;border-radius:11px;border:1px solid var(--accent);color:var(--accent);font-size:12px;font-weight:600;white-space:nowrap}
body.looking-back .run-controls .jump{display:none}
@media (pointer:coarse){.jump button{min-height:40px}}
.help-button{font-size:16px;width:36px;padding:0}
.help-group{display:flex;gap:4px}
/* The File menu in the bar (app.js): save this run or its setup, open a saved one, the reports and the data. */
.file-menu{position:relative}
.file-menu>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.file-menu>summary::-webkit-details-marker{display:none}
.file-menu[open]>summary{background:var(--surface-3);color:var(--text)}
.file-list{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:330px;max-width:calc(100vw - 24px);padding:6px;display:flex;flex-direction:column;
 background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(var(--shade-rgb),.45)}
.file-list a,.file-list button{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);
 font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.file-list a:hover,.file-list button:hover:not(:disabled),.file-list a:focus-visible,.file-list button:focus-visible{background:var(--surface-3)}
.file-list strong{font-size:13px;font-weight:600}
.file-list small{font-size:12px;color:var(--muted);line-height:1.35}
.file-list hr{border:0;border-top:1px solid var(--line-soft);margin:4px 2px}
.file-list button:disabled{opacity:.65;cursor:progress}
.settings-link{width:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
/* The settings page (settings.html): the preferences, for now the units and the alcohol strength. */
body.settings-page{overflow:auto;height:auto;min-height:100dvh}
.settings{max-width:720px;width:100%;margin:0 auto;padding:28px 18px 60px;display:flex;flex-direction:column;gap:16px}
.settings h1{font-size:24px;margin:0}
.settings-lead,.settings-note{color:var(--muted);margin:0;font-size:13.5px;line-height:1.5}
.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.settings-card h2{font-size:15px;margin:0}
.settings-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.settings-choice{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);cursor:pointer}
.settings-choice:has(input:checked){border-color:var(--accent);background:var(--surface-3)}
.settings-choice input{margin-top:3px;accent-color:var(--accent)}
.settings-choice strong{display:block;font-size:14px}
.settings-choice small{display:block;color:var(--faint);font-size:12px;margin-top:2px}
/* A theme's picture: its page, a panel, its accent, its cool colour and its text, in its own tokens ([data-theme]). */
.theme-preview{flex:none;display:flex;gap:3px;padding:5px;border-radius:7px;background:var(--bg);border:1px solid var(--line)}
.theme-preview i{display:block;width:9px;height:24px;border-radius:3px;background:var(--surface-3)}
.theme-preview i:nth-child(2){background:var(--accent)}.theme-preview i:nth-child(3){background:var(--cool)}.theme-preview i:nth-child(4){background:var(--text)}
.settings-example{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;font-size:13.5px}
.settings-example dt{color:var(--muted)}
.settings-example dd{margin:0;font-variant-numeric:tabular-nums}
.settings-saved{color:var(--good);font-size:13px;min-height:1.2em;margin:0}
/* The settings as a dialog over the lab (settings-dialog.js) and as the page's form: the same cards. */
.settings-form,.settings-body{display:flex;flex-direction:column;gap:16px}
.settings-dialog{width:min(680px,calc(100% - 24px))}
.settings-dialog .settings-body{margin-top:16px}
.settings-dialog .settings-card h2{font-size:15px;margin:0}
.settings-dialog .settings-lead,.settings-dialog .settings-note{font-size:13.5px;line-height:1.5}
.valve-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--muted)}
.valve-lamp{width:9px;height:9px;border-radius:50%;background:var(--faint);flex:none}
.valve-state.closed .valve-lamp{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.valve-state.open .valve-lamp{background:var(--good);box-shadow:0 0 8px var(--good)}
.thermo-select{width:100%;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);padding:0 8px;font-size:13px}
.thermo-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.stepper-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 6px;font-size:12px;color:var(--muted)}
.stepper-field>span{grid-column:1/-1}
.stepper-field em{font-style:normal;color:var(--faint);font-size:12px}
.stepper{display:flex;height:32px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);overflow:hidden;min-width:0}
.stepper button{width:28px;flex:none;border:0;background:var(--surface-3);font-size:16px;line-height:1;color:var(--text)}
.stepper button:hover{background:var(--surface-4)}
.stepper input{width:100%;min-width:0;border:0;background:none;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper:focus-within{border-color:var(--line-focus)}
.stepper input:focus{outline:none}
.valve-hidden{display:none!important}
.plate.sensor .plate-no,.boiler.sensor .boiler-name{box-shadow:0 0 0 2px var(--cool);border-radius:50%}
.boiler.sensor .boiler-name{border-radius:6px;padding:0 4px}
@media (max-width:1700px){.chip-label{display:none}}   /* room for the experiment name, the top bar on one row */

/* Look back: a process-time slider under the header. */
.timeline{display:flex;align-items:center;gap:12px;padding:6px 18px;border-bottom:1px solid var(--line-soft);background:var(--timeline-bg)}
.timeline-label{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.timeline input[type=range]{flex:1;min-width:120px;--fill:100%}
.timeline input[type=range]:disabled{opacity:.45}
/* The right side keeps one width (text box and button space reserved), so the
   slider does not change length under the pointer when looking back starts. */
.timeline-side{display:flex;align-items:center;gap:8px;flex:none}
.time-view{width:230px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-side .btn{visibility:hidden}
body.looking-back .timeline-side .btn{visibility:visible}
.btn.small{height:28px;padding:0 10px;font-size:12px}
body.looking-back .timeline{background:rgba(var(--accent-rgb),.08);border-bottom-color:rgba(var(--accent-rgb),.35)}
body.looking-back .time-view{color:var(--accent);font-weight:600}
body.looking-back .clock{color:var(--accent)}
body.looking-back .card.control,body.looking-back #cut{opacity:.55}
#error{margin:10px 18px 0;padding:10px 14px;border-radius:10px;background:rgba(var(--bad-rgb),.1);border:1px solid rgba(var(--bad-rgb),.35);color:var(--bad-text);font-size:13px;
 position:sticky;top:8px;z-index:40;backdrop-filter:blur(8px)}   /* stays in view when the page scrolls */
.setup-error{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:rgba(var(--bad-rgb),.1);border:1px solid rgba(var(--bad-rgb),.35);color:var(--bad-text);font-size:13px;line-height:1.4}

/* Layout */
.layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,350px) minmax(0,1fr) minmax(290px,330px);gap:14px;padding:14px 18px 18px}
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);min-height:0;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px}
.legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint)}
.legend-ramp{display:block;width:54px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--scale-cold),var(--scale-mid),var(--scale-hot))}
.column-panel{display:flex;flex-direction:column;overflow:hidden}
#column{flex:1;overflow:auto;padding:4px 14px 16px;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
.view-panel{display:flex;flex-direction:column;overflow:hidden}
.control-panel{display:flex;flex-direction:column;gap:10px;padding:10px;overflow:auto;scrollbar-width:thin;background:transparent;border:0}

/* Column view */
.still{flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch;--row:50px;--glass:26px}
.still.compact{--row:42px;--glass:22px}
.still.dense{--row:35px;--glass:18px}
.condenser{border:1px solid var(--condenser-line);border-radius:14px;padding:10px 12px;background:linear-gradient(160deg,rgba(var(--cool-rgb),.10),rgba(var(--cool-rgb),.03));position:relative;overflow:hidden}
.condenser-head{display:flex;align-items:center;gap:8px}
.condenser-icon{width:10px;height:10px;border-radius:3px;background:var(--cool);box-shadow:0 0 10px rgba(var(--cool-rgb),.6)}
.condenser-title{font-weight:600}
.condenser-temp{margin-left:auto;font-size:12px;color:var(--cool);font-variant-numeric:tabular-nums}
.condenser-flows{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.coil{display:flex;gap:6px;margin-top:8px;height:6px}
.coil i{flex:1;border-radius:4px;background:rgba(var(--cool-rgb),.18)}
.condenser.active .coil i{background:linear-gradient(90deg,rgba(var(--cool-rgb),.15),rgba(var(--cool-rgb),.65),rgba(var(--cool-rgb),.15));background-size:200% 100%;animation:coil 1.6s linear infinite}
.condenser.active .coil i:nth-child(2n){animation-delay:-.4s}
.split{display:flex;justify-content:space-between;gap:8px;padding:8px 4px 6px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.split-reflux{color:var(--cool)}.split-product{color:var(--accent)}
.plates{display:flex;flex-direction:column;flex:1 0 auto;border-left:2px solid var(--column-wall);border-right:2px solid var(--column-wall);border-radius:6px;padding:0 6px;background:linear-gradient(90deg,rgba(var(--tint-rgb),.015),transparent 20%,transparent 80%,rgba(var(--tint-rgb),.015))}
.plate{display:grid;grid-template-columns:26px minmax(0,1fr) auto;grid-template-rows:var(--glass) auto;column-gap:10px;row-gap:3px;align-items:center;min-height:var(--row);padding:6px 6px;border:1px solid transparent;border-radius:10px;background:none;text-align:left;transition:background .15s,border-color .15s}
.plate:hover{background:var(--surface-2)}
.plate.selected{background:var(--surface-2);border-color:var(--line-selected)}
.plate-no{grid-row:1/3;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-3);font-size:12px;font-weight:700;color:var(--muted)}
.plate.selected .plate-no{background:var(--accent);color:var(--accent-ink)}
.plate-glass{position:relative;height:var(--glass);border-radius:7px;background:linear-gradient(180deg,rgba(var(--tint-rgb),.05),rgba(var(--tint-rgb),.015));border:1px solid var(--glass-line);overflow:hidden}
.plate-liquid,.boiler-liquid{position:absolute;left:0;right:0;bottom:0;height:0;opacity:.78;transition:height .4s ease,background .6s ease;border-top:1px solid rgba(var(--liquid-edge-rgb),.35)}
.plate-weir{position:absolute;left:0;right:0;bottom:calc(8% + 56%);border-top:1px dashed rgba(var(--tint-rgb),.18)}
.plate.dry .plate-glass{background:repeating-linear-gradient(135deg,rgba(var(--tint-rgb),.025) 0 6px,transparent 6px 12px)}
.plate-read{grid-row:1/3;grid-column:3;display:grid;grid-template-columns:62px 58px;gap:4px;text-align:right;font-variant-numeric:tabular-nums}
.plate-temp,.plate-abv{font-size:16px;font-weight:650;letter-spacing:-.01em}
.plate.dry .plate-abv{color:var(--faint);font-weight:500;font-size:13px}
.plate-sub{grid-column:2;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.still.compact .plate-temp,.still.compact .plate-abv{font-size:15px}
.still.dense .plate .plate-sub{display:none}
.still.dense .plate{grid-template-rows:var(--glass);padding:3px 6px}
.still.dense .plate .plate-no{grid-row:1;width:20px;height:20px;font-size:12px}
.still.dense .plate .plate-read{grid-row:1}
.riser{position:relative;flex:1 1 10px;min-height:10px;max-height:64px;margin:0 132px 0 42px}
.riser:before,.riser:after{content:'';position:absolute;top:0;bottom:0;width:4px;border-radius:3px;background:var(--riser)}
.riser:before{left:10%}.riser:after{right:14%}
.riser-vapor,.riser-liquid{position:absolute;top:0;bottom:0;width:4px;border-radius:3px;opacity:0;transition:opacity .3s;z-index:1}
.riser-vapor{right:14%;background:repeating-linear-gradient(0deg,var(--accent) 0 4px,transparent 4px 9px)}
.riser-liquid{left:10%;background:repeating-linear-gradient(0deg,var(--cool) 0 4px,transparent 4px 9px)}
.riser.vapor .riser-vapor,.riser.liquid .riser-liquid{opacity:.85}
.riser-flow{position:absolute;left:calc(10% + 10px);top:50%;transform:translateY(-50%);font-size:12px;line-height:1;color:var(--cool);white-space:nowrap;font-variant-numeric:tabular-nums;z-index:2}
.riser-flow.up{left:calc(86% + 10px);color:var(--accent)}     /* beside the vapor's stripe, over the readings' empty column */
.running .riser.vapor .riser-vapor{animation:rise .6s linear infinite}
.running .riser.liquid .riser-liquid{animation:fall .8s linear infinite}
.bubbles{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.boiling .bubbles{opacity:1}
.bubbles i{position:absolute;bottom:-4px;width:5px;height:5px;border-radius:50%;border:1px solid rgba(var(--liquid-edge-rgb),.75);background:rgba(var(--liquid-edge-rgb),.12)}
.bubbles i:nth-child(1){left:12%}.bubbles i:nth-child(2){left:28%;animation-delay:-.35s!important}.bubbles i:nth-child(3){left:45%;animation-delay:-.8s!important}
.bubbles i:nth-child(4){left:60%;animation-delay:-.2s!important}.bubbles i:nth-child(5){left:75%;animation-delay:-.6s!important}.bubbles i:nth-child(6){left:88%;animation-delay:-1s!important}
.bubbles i:nth-child(7){left:20%;animation-delay:-.5s!important}.bubbles i:nth-child(8){left:52%;animation-delay:-.15s!important}.bubbles i:nth-child(9){left:68%;animation-delay:-.9s!important}.bubbles i:nth-child(10){left:36%;animation-delay:-1.2s!important}
.running .boiling .bubbles i{animation:bubble var(--bubble-speed,1.2s) linear infinite}
/* A packed bed in the column panel: its segments as plates, with the vapor up and the liquid
   down between them; the packing drawn as a texture and the liquid on it as a tint that
   deepens with the hold-up. */
.still.packed .plates{background:linear-gradient(90deg,rgba(var(--packed-tint-rgb),.06),transparent 20%,transparent 80%,rgba(var(--packed-tint-rgb),.06))}
.plate.segment .plate-glass{border-radius:3px;border-color:var(--packing-line);background:
 radial-gradient(circle at 30% 35%,rgba(var(--packing-dot-rgb),.20) 0 1.3px,transparent 1.9px) 0 0/9px 8px,
 radial-gradient(circle at 70% 70%,rgba(var(--packing-dot-rgb),.13) 0 1.2px,transparent 1.8px) 4px 3px/11px 9px,
 linear-gradient(180deg,rgba(var(--tint-rgb),.05),rgba(var(--tint-rgb),.015))}
.plate.segment .plate-liquid{border-top:0;transition:opacity .4s ease,background .6s ease}
.plate.segment.dry .plate-glass{background:
 radial-gradient(circle at 30% 35%,rgba(var(--packing-dot-rgb),.14) 0 1.3px,transparent 1.9px) 0 0/9px 8px,
 radial-gradient(circle at 70% 70%,rgba(var(--packing-dot-rgb),.09) 0 1.2px,transparent 1.8px) 4px 3px/11px 9px}
.boiler{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 64px auto;column-gap:12px;row-gap:6px;margin-top:10px;padding:10px 12px 12px;border-radius:18px 18px 26px 26px;border:1px solid var(--boiler-line);background:linear-gradient(180deg,var(--surface-2),var(--boiler-deep));text-align:left}
.boiler:hover{border-color:var(--line-hover)}
.boiler.selected{border-color:var(--accent)}
.boiler-head{grid-column:1/3;display:flex;justify-content:space-between;align-items:baseline}
.boiler-name{font-weight:600}
.boiler-volume{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.boiler-glass{position:relative;border-radius:10px 10px 18px 18px;border:1px solid var(--boiler-glass-line);background:rgba(var(--tint-rgb),.03);overflow:hidden}
.boiler-read{grid-row:2;grid-column:2;grid-template-columns:62px 58px;align-self:center}
.boiler .plate-sub{grid-column:1/3}
.heater{display:block;height:6px;margin:8px 16% 0;border-radius:6px;background:var(--heater-off);transition:background .4s,box-shadow .4s}
.heater.on{background:linear-gradient(90deg,var(--heater-hot),var(--heater-hot-mid),var(--heater-hot));box-shadow:0 0 16px rgba(var(--heater-glow-rgb),.55)}
.running .heater.on{animation:glow 1.8s ease-in-out infinite}
.heater-text{display:block;text-align:center;font-size:12px;color:var(--accent);margin-top:10px;font-variant-numeric:tabular-nums}

/* View panel and tabs */
.tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.tabs button{border:0;background:none;color:var(--muted);padding:9px 14px 11px;font-weight:600;font-size:13px;border-radius:9px 9px 0 0;position:relative;white-space:nowrap}
.tabs button:hover{color:var(--text)}
.tabs button.active{color:var(--text)}
.tabs button.active:after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.tab{display:none;flex:1;min-height:0;overflow:auto;padding:16px 18px 20px;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent}
.tab.active{display:block}
#tab-lab{position:relative;padding:0;overflow:hidden}
#tab-lab.active{display:block}
/* 2D lab: a hand-drawn sketch on a paper card. */
#tab-lab2d{position:relative;padding:0;overflow:hidden}
/* Its settings: a note on the same paper, in the same hand, choices top to bottom. */
.sketch-panel{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;padding:7px 14px 10px 12px;
 background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M.8 1.6Q50 .6 99.4 1.4M98.6.6Q99.3 50 98.5 99.4M99.3 98.4Q50 99.4.6 98.7M1.4 99.3Q.7 50 1.5.7' fill='none' stroke='%232b2622' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/><path d='M1.6 2.3Q50 1.3 98.8 2.1M97.8 1.5Q98.6 50 98 98.6M98.6 97.7Q50 98.8 1.4 97.9M2.2 98.5Q1.4 50 2.3 1.6' fill='none' stroke='%232b2622' stroke-width='.6' stroke-opacity='.3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") 0 0/100% 100% no-repeat,var(--sk-note);color:var(--sk-ink);font:13px/1.45 "Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE",cursive;
 box-shadow:2px 3px 0 var(--sk-shadow);transform:rotate(-.5deg)}   /* its edge in ink, like the sketch's lines */
.sketch-panel fieldset{display:flex;flex-direction:column;border:0;margin:0;padding:0;min-width:0}
.sketch-panel legend{padding:0 2px 1px 0;margin-bottom:1px;font-size:14px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M1 3.6C22 2.2 48 4.8 99 2.8' fill='none' stroke='%232b2622' stroke-width='1.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") left bottom/100% 6px no-repeat}
.sketch-panel label{display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer}
.sketch-panel input{appearance:none;flex:none;width:14px;height:14px;margin:0;border:1.5px solid var(--sk-ink);background:var(--sk-card) center/100% no-repeat;cursor:pointer}
.sketch-panel input[type=checkbox]{border-radius:3px 5px 3px 6px/6px 3px 5px 3px}
.sketch-panel input[type=checkbox]:checked{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.4 7.6C3.6 8.6 4.6 9.9 5.4 11.2 7.4 7.6 9.6 4.8 12.2 2.4' fill='none' stroke='%232b2622' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.sketch-panel input[type=radio]{border-radius:50% 46% 52% 48%/48% 52% 46% 50%}
.sketch-panel input[type=radio]:checked{background-image:radial-gradient(circle at 48% 54%,var(--sk-ink) 0 3px,transparent 3.6px)}
.sketch-panel input:focus-visible{outline:2px dashed var(--sk-focus);outline-offset:2px}
/* On a phone the note sits above the sketch on the same paper, its two lists side by side. */
@media (max-width:760px){
 #tab-lab2d.active{display:flex;flex-direction:column;background:var(--sk-paper)}
 #tab-lab2d .sketch{position:relative;inset:auto;flex:1;min-height:0}
 .sketch-panel{position:static;order:-1;align-self:center;flex-direction:row;gap:22px;margin:10px 10px 0;padding:6px 16px 9px 13px;font-size:12px;transform:rotate(-.4deg)}
 .sketch-panel legend{font-size:13px}
}
.sketch{position:absolute;inset:0;background:var(--sk-paper);border-radius:0 0 var(--radius) var(--radius)}
.sketch-svg{display:block;width:100%;height:100%}
.sketch-svg.no-part-labels .sk-part{display:none}   /* the parts' labels hidden (the Show list's part labels, sketch2d.js labels) */
.sketch-text{font-family:"Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE",cursive;fill:var(--sk-ink)}
.sketch-hit{cursor:pointer}
.sketch-hint{color:var(--sk-hint);text-shadow:none;font-family:"Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE",cursive}
.world{position:absolute;inset:0;overflow:hidden;border-radius:0 0 var(--radius) var(--radius)}
.world canvas{display:block;width:100%;height:100%;touch-action:none}
#webgl-notice{position:absolute;z-index:2;inset:40% 15% auto;padding:16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);text-align:center}
/* The 3D lab's light placeholder: the view's dark floor and a still in outline until the still is built (app.js loads
   the 3D lab once the page shows its run, lab3d.js lifts this when its first still is drawn). */
.world-placeholder{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;
 background:radial-gradient(120% 70% at 50% 100%,var(--placeholder-glow) 0,var(--placeholder-deep) 70%);color:var(--faint);font-size:13px;text-align:center;transition:opacity .35s}
.world-placeholder.done{opacity:0;pointer-events:none}
.placeholder-still{width:min(40%,230px);height:auto;fill:none;stroke:var(--placeholder-still);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.placeholder-bar{position:relative;width:min(36%,200px);height:3px;border-radius:2px;background:var(--placeholder-bar);overflow:hidden}
.placeholder-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;border-radius:2px;background:var(--accent);opacity:.8;animation:placeholder-slide 1.4s ease-in-out infinite}
.world-placeholder.failed .placeholder-bar,.world-placeholder.failed .placeholder-text{display:none}
@keyframes placeholder-slide{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.placeholder-bar::after{animation:none;width:100%;opacity:.35}}
/* While the 3D lab loads its view shows the 2D sketch (app.js lendSketch): the placeholder is a small word and its bar at
   the foot of the view, and the 3D view's own buttons and hint wait for the 3D lab. */
.world .sketch{z-index:1}
.world .sketch.leaving{opacity:0;transition:opacity .35s}
.world-placeholder.with-sketch{inset:auto 12px 12px;width:fit-content;max-width:calc(100% - 24px);margin:0 auto;z-index:2;flex-direction:row;gap:12px;padding:8px 14px;
 border-radius:10px;background:rgba(var(--overlay-rgb),.9);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--muted)}
.world-placeholder.with-sketch .placeholder-still,.world-placeholder.with-sketch .placeholder-alone,.world-placeholder:not(.with-sketch) .placeholder-sketch{display:none}
.world-placeholder.with-sketch .placeholder-bar{flex:none;width:72px}
.world-placeholder.with-sketch.failed{display:none}
#tab-lab.sketch-lent .world-tools,#tab-lab.sketch-lent .world-move,#tab-lab.sketch-lent .world-hint,#tab-lab.sketch-lent #world-callout{display:none}
.world-tools{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:rgba(var(--overlay-rgb),.85);border:1px solid var(--line);backdrop-filter:blur(10px)}
.world-tools button{border:0;background:none;color:var(--muted);height:30px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600}
.world-tools button:hover{background:var(--surface-3);color:var(--text)}
.world-tools button[aria-pressed=true]{color:var(--cool)}
.color-by{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);padding:0 4px 0 8px}
.color-by select,.data-grid select{height:28px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);padding:0 6px;font-size:12px}
.world-move{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:4px;border-radius:12px;background:rgba(var(--overlay-rgb),.85);border:1px solid var(--line);backdrop-filter:blur(10px)}
.world-move button{width:38px;height:38px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:15px;line-height:1;touch-action:none;user-select:none;-webkit-user-select:none}
.world-move button:hover{background:var(--surface-3);color:var(--text)}
.world-move button:active{background:var(--surface-4);color:var(--accent)}
.world-hint{position:absolute;right:14px;bottom:12px;font-size:12px;color:var(--scene-hint);pointer-events:none;text-shadow:0 1px 4px rgb(var(--shade-rgb))}
/* The hint under a sketch, on its paper (a theme's own: navy's as it has been, faint with a dark glow). */
.world-hint.sketch-hint{color:var(--sketch-hint-ink);text-shadow:var(--sketch-hint-shadow)}
#world-callout{position:absolute;pointer-events:none;padding:8px 12px;border-radius:10px;background:rgba(var(--overlay-rgb),.9);border:1px solid var(--line-selected);transform:translate(14px,-50%);white-space:nowrap;box-shadow:var(--shadow)}
#world-callout span{display:block;font-size:12px;color:var(--faint)}
#world-callout strong{display:block;font-size:20px;font-variant-numeric:tabular-nums}
#callout-temperature,#callout-volume{font-size:14px!important;color:var(--text)!important;font-variant-numeric:tabular-nums}
.tab-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:12px}
.tab-intro p{font-size:13px;color:var(--muted);max-width:720px;margin-top:6px;line-height:1.6}
.tab-intro b{color:var(--text);font-weight:600}
.check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.check input{accent-color:var(--cool)}
.chart{display:block;width:100%;height:220px}
.chart.tall{height:min(62vh,560px);min-height:320px}
.chart.short{height:150px}
.chart.tall{height:250px}
.chart-card{padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-soft);margin-bottom:12px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--muted)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:3px;border-radius:2px}

/* Plate details */
.stage-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.stage-hero h3{font-size:24px;margin:4px 0 8px}
.hero-values{display:flex;gap:28px}
.hero-values span{display:block;font-size:12px;color:var(--faint)}
.hero-values strong{display:block;font-size:38px;font-weight:650;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.hero-values small{display:block;font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--surface-3);color:var(--muted)}
.chip.hot{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.chip.cool{background:rgba(var(--cool-rgb),.12);color:var(--cool)}
.stage-flows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 8px}
.stage-flows>div{padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-soft)}
.stage-flows span{display:block;font-size:12px;color:var(--faint)}
.stage-flows strong{display:block;font-size:20px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.stage-flows small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.rows{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.row strong{color:var(--text);font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.bar-row{display:grid;grid-template-columns:120px minmax(0,1fr) 110px;align-items:center;gap:10px;margin:8px 0;font-size:12px;color:var(--muted)}
.bar-row .bar{height:8px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.bar-row .bar i{display:block;height:100%;border-radius:5px}
.bar-row b{font-weight:500;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* Data tab */
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:14px}
.data-grid .card{background:var(--surface-2)}
.data-grid .card h3{margin-bottom:8px}
.data-grid .wide{grid-column:1/-1}
.balance-ok{padding:10px 12px;border-radius:10px;background:rgba(var(--good-rgb),.08);border:1px solid rgba(var(--good-rgb),.3);color:var(--good);font-size:13px;margin-bottom:6px}
.balance-bad{padding:10px 12px;border-radius:10px;background:rgba(var(--bad-rgb),.08);border:1px solid rgba(var(--bad-rgb),.35);color:var(--bad);font-size:13px}
#events{max-height:300px;overflow:auto}
.event{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.event time{color:var(--faint);font-variant-numeric:tabular-nums;min-width:70px}
#model-info p{font-size:13px;color:var(--muted);margin:4px 0;overflow-wrap:anywhere}
.exports{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* Controls */
.control{padding:14px 14px 12px}
.control-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.control-head label{font-weight:600}
.control-head output{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:none;margin:0;cursor:pointer;--fill:50%;--track:var(--accent)}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--track) var(--fill),var(--surface-4) var(--fill))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--track) var(--fill),var(--surface-4) var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:var(--thumb);border:0;box-shadow:0 2px 8px rgba(var(--shade-rgb),.4)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--thumb);border:0;box-shadow:0 2px 8px rgba(var(--shade-rgb),.4)}
#reflux{--track:var(--cool)}
.range-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);margin-top:4px}
/* A mark on a slider's track (process-view.js markRange: the dephlegmator's total reflux): a line across the track at
   --at of its range (the thumb's 20 px kept off its ends) and its text under it, inside the track's width. */
.range-marked{position:relative}
.range-marked.marked{padding-bottom:16px}
.range-mark{position:absolute;top:0;left:calc(10px + (100% - 20px) * var(--at,0));pointer-events:none}
.range-mark i{position:absolute;top:4px;left:-1px;width:2px;height:16px;border-radius:1px;background:var(--series-teal)}
.range-mark em{position:absolute;top:24px;left:0;transform:translateX(calc(-100% * var(--at,0)));white-space:nowrap;font-style:normal;font-size:12px;color:var(--series-teal)}
/* A slider between its − and + (the dephlegmator's water): a step at a time. */
.range-row{display:flex;align-items:flex-start;gap:6px}
.range-row .range-marked{flex:1;min-width:0}
.range-step{flex:none;width:22px;height:22px;margin-top:1px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--surface-3);font-size:14px;line-height:1;color:var(--text)}
.range-step:hover{background:var(--surface-4)}
.range-step:disabled{opacity:.45}
/* The dephlegmator's reflux ratio under its slider, in its colour (the charts' dephlegmator). */
.deph-ratio{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--series-teal)}
#reflux-note{margin-top:8px}
.output{padding:14px}
.control .control-head.second{margin-top:16px}
.jars-head{margin:16px 0 8px}
.profile-card{padding:12px 12px 8px}
.profile-card .control-head{margin-bottom:4px}
.profile-svg{display:block;width:100%;height:auto;font-family:var(--font);user-select:none}
.profile-svg .grid{stroke:var(--profile-grid);stroke-width:1}
.profile-svg .grid.minor{stroke-dasharray:2 4;stroke:var(--profile-grid-minor)}
.profile-svg .axis{fill:var(--faint);font-size:10px;font-variant-numeric:tabular-nums}
.profile-svg .row{fill:transparent;cursor:pointer}
.profile-svg .row:hover{fill:rgba(var(--tint-rgb),.035)}
.profile-svg .row.selected{fill:rgba(var(--accent-rgb),.10)}
.profile-svg .row.out{cursor:default}
.profile-svg .row:focus-visible{outline:none;stroke:var(--cool);stroke-width:1}
.profile-svg .label{fill:var(--muted);font-size:11px;pointer-events:none}
.profile-svg .value{fill:var(--text);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;pointer-events:none}
.profile-svg .value.muted{fill:var(--faint);font-weight:400}
.profile-svg .separator{stroke:var(--profile-separator);stroke-dasharray:3 3}
.profile-svg .line{fill:none;stroke:var(--profile-line);stroke-width:2;stroke-linejoin:round;opacity:.9;pointer-events:none}
.profile-svg .point{stroke:var(--profile-point-edge);stroke-width:1.5;pointer-events:none}
.profile-svg .point.selected{stroke:var(--highlight);stroke-width:2}
.profile-svg .point.out{stroke:var(--highlight);stroke-width:1.2}
.output-now{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.output-now span,.summary span{display:block;font-size:12px;color:var(--faint)}
.output-now strong{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
#out-abv{color:var(--accent)}
.receiver h3{font-size:14px}
#jars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
 max-height:330px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}   /* many cuts scroll inside the card */
.jar{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid transparent}
.jar.current{border-color:rgba(var(--accent-rgb),.4)}
.jar.moved .jar-icon,.jar.moved .jar-values{opacity:.5}
.jar-icon{position:relative;width:24px;height:30px;border:2px solid var(--jar-line);border-top-width:3px;border-radius:5px 5px 7px 7px;overflow:hidden}
.jar-icon i{position:absolute;left:0;right:0;bottom:0}
.jar-name{font-weight:600;font-size:13px}
.jar-name small{display:block;font-weight:400;color:var(--faint);font-size:12px}
/* The run program: its steps in Setup, its card beside the still. */
.program-tools{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.program-steps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.program-step{display:grid;gap:6px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.program-head{display:flex;align-items:center;gap:8px}
.program-num{font-weight:700;color:var(--faint);min-width:1.4em;text-align:right}
.program-when,.program-do{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.program-step input:not([type=checkbox]),.program-step select{height:30px;border-radius:8px;border:1px solid var(--line);background:var(--bg);padding:0 8px;color:var(--text);font-size:13px;min-width:0}
.program-step input[type=number]{width:5.5em}
.program-name{flex:1}
.program-step em{font-style:normal;color:var(--faint)}
.program-step label{display:inline-flex;align-items:center;gap:4px}
.program-card .program-now{margin:4px 0 2px;font-weight:600;font-size:13px}
.program-buttons{display:flex;gap:8px;margin-top:6px}
/* The cut guide (web/cut-guide.js): how near the next cut is and why, over the New jar button. */
.cut-guide{margin:0 0 12px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:10px;font-size:12.5px}
.cut-guide .cut-head{margin:0 0 2px}
.cut-guide .cut-when{margin:0;color:var(--muted);font-size:12px}
.cut-table{width:100%;border-collapse:collapse;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.cut-table th,.cut-table td{padding:1px 4px;text-align:left;font-weight:400}
.cut-table thead th{color:var(--faint);font-size:12px}
.cut-table tbody th{color:var(--muted)}
.cut-table td+td,.cut-table th+th+th{text-align:right}
.cut-up{color:var(--warn)}.cut-down{color:var(--good)}
.cut-guide .cut-move,.cut-guide .cut-trend{margin:4px 0 0;line-height:1.45}
.jar-values{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.jar-values strong{display:block;font-size:15px}
.jar-values span{color:var(--muted);font-size:12px}
.jar-empty{font-size:12px;color:var(--faint);padding:6px 2px}
.jar-congeners{grid-column:1/-1;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;margin-top:-2px}
.jar-congeners summary{cursor:pointer;padding-left:40px}   /* under the jar's name; the table takes the whole row */
.jar-congeners .tank-table{margin:6px 0 2px;gap:2px 8px}
.jar-congeners .tank-table .member{padding-left:8px}
.jar-congeners summary:hover{color:var(--text)}
/* Side draws: the list (as the jars, with a rate slider and a thermostat under each) and the add row. */
.side-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
 max-height:480px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.jar.side.closed .jar-values,.jar.side.closed .jar-icon{opacity:.6}
.side-rate,.side-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.side-rate{grid-column:1/-1}
.side-move{grid-column:1/-1;display:flex;align-items:center;gap:6px}
.side-place-field{flex:1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--faint)}
.side-place-field .thermo-select{flex:1;min-width:0;height:28px;font-size:12px;color:var(--text)}
.side-rate .side-slider,.side-add .side-slider{flex:1 1 100px;min-width:70px;height:22px}
.side-number{width:62px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);padding:0 6px;color:var(--text);font-size:12.5px}
.side-thermo{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.side-thermo .thermo-select{flex:1 1 150px;min-width:0;height:28px;font-size:12px}
.side-thermo-field{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--faint)}
.side-thermo-field input{width:48px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);padding:0 5px;color:var(--text);font-size:12px}
.side-thermo-action{height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);padding:0 4px;color:var(--text);font-size:12px}
.side-thermo-field[hidden]{display:none}
.side-thermo-note{flex-basis:100%;margin:0;font-size:12px;color:var(--faint)}
.side-thermo-note:empty{display:none}
.side-rate em,.side-add em{font-style:normal;color:var(--faint);font-size:12px}
.side-thermo-field em{font-style:normal}
.side-rate .side-toggle{margin-left:auto}
.side-add{margin-top:8px}
.side-add .thermo-select{flex:1 1 130px;min-width:0;height:30px;font-size:12px}
.side-draws[hidden],.side-add[hidden]{display:none}
/* Summary tab: the server's summary report (its own paper styles) under a tool row. */
.summary-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.summary-tools p{margin:0;font-size:13px}.summary-tools div{display:flex;gap:6px}
.summary-host{max-width:1120px;margin:0 auto;container-type:inline-size}   /* the report's layout follows this width */

/* Fusel oil and heads (6-congener model), in both labs: the build-up maps, the profiles,
   a vessel's table of congeners and the colour choices that need the congeners */
.sketch-panel label.off,.color-by option:disabled{opacity:.45}
.profile-group{margin-top:16px}
.group-map-wrap{position:relative}
.group-map{display:block;width:100%;height:360px;cursor:crosshair}
.group-tip{position:absolute;pointer-events:none;background:var(--surface-3,var(--surface-2));border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px;white-space:nowrap;box-shadow:0 6px 18px rgba(var(--shade-rgb),.28);z-index:2}
.group-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;font-size:12px;color:var(--muted)}
.group-legend .group-scale{display:inline-block;width:150px;height:10px;border-radius:4px}
.group-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.group-off{padding:16px 4px;max-width:680px}
.group-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;font-size:13px}
.group-pick select{height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 8px;font-size:13px}
.group-pick .muted{font-size:12px}
.group-now{line-height:1.55}
/* The fusel alcohols apart: the column chosen in a chart's head, the lines' legend, the balance table,
   the 2D plant's key to its peak markers. */
.chart-head .chart-pick{margin:0 auto 0 10px;font-size:12px;color:var(--muted);white-space:nowrap}
.chart-head .chart-pick select{height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface-3);color:var(--text);padding:0 6px;font-size:12px}
.chart-legend i.line-key{width:20px;height:0;border-radius:0;border-top:2px solid}
b.glyph{font-weight:400;font-size:12px}
.balance-wrap{overflow-x:auto}
.fusel-balance{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.fusel-balance th,.fusel-balance td{padding:5px 10px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap;vertical-align:top}
.fusel-balance th:first-child{text-align:left;font-weight:400;color:var(--muted)}
.fusel-balance thead th{font-weight:600;color:var(--text);font-size:12px}
.fusel-balance td span{color:var(--text)}
.fusel-balance td small{display:block;color:var(--faint);font-size:12px}
.fusel-balance tr.whole th,.fusel-balance tr.whole td span{color:var(--text);font-weight:600}
.fusel-balance tr.rest th{font-style:italic}
.fusel-balance tr.inner th{padding-left:20px;color:var(--faint)}
.fusel-balance tr.inner td span{color:var(--muted)}
.sketch-panel .peak-key{padding-left:22px;font-size:12px;white-space:nowrap;display:flex;flex-direction:column;gap:1px}
.sketch-panel .peak-key span{display:flex;align-items:center;gap:5px}
.sketch-panel .peak-tri{width:9px;height:9px;flex:none}
.tank-congeners summary{cursor:pointer;padding:1px 0;font-variant-numeric:tabular-nums}
.tank-congeners summary:hover{color:var(--text)}
.tank-table{display:grid;grid-template-columns:1fr auto auto;gap:2px 14px;margin:6px 0 2px 14px;font-variant-numeric:tabular-nums}
.tank-table span:nth-child(3n+2),.tank-table span:nth-child(3n){text-align:right;white-space:nowrap}
.tank-table .group{color:var(--text);font-weight:600;margin-top:2px}
.tank-table .member{padding-left:10px}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.summary strong{display:block;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.summary .report-link{grid-column:1/-1}

/* Dialogs */
dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);padding:0;box-shadow:var(--shadow);max-height:92dvh}
/* The app's tooltips (tooltip.js): every title as a bubble, its arrow toward what it tells about. */
.tip-bubble{position:fixed;left:0;top:0;z-index:1000;max-width:min(340px,calc(100vw - 16px));padding:7px 11px;border-radius:9px;background:var(--tip-bg);color:var(--text);border:1px solid var(--tip-line);box-shadow:0 12px 32px rgba(var(--shade-rgb),.5);font-size:12.5px;font-weight:500;line-height:1.45;white-space:pre-line;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease}
.tip-bubble.shown{opacity:1;visibility:visible}
.tip-bubble::before{content:"";position:absolute;left:var(--arrow,50%);top:0;width:9px;height:9px;background:var(--tip-bg);border:1px solid var(--tip-line);border-width:1px 0 0 1px;transform:translate(-50%,-55%) rotate(45deg)}
.tip-bubble[data-side=above]::before{top:100%;border-width:0 1px 1px 0;transform:translate(-50%,-45%) rotate(45deg)}
/* The plate in a window of its own (setup.js): the designer large beside its fields and facts. */
.plate-dialog{width:min(1500px,calc(100vw - 24px));height:min(940px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
.plate-dialog[open]{display:flex;flex-direction:column}
.plate-dialog-head{display:flex;align-items:flex-start;gap:16px;padding:16px 20px 10px;border-bottom:1px solid var(--line-soft)}
.plate-dialog-head>div{flex:1}
.plate-dialog-head h2{margin:0 0 2px}
.plate-dialog-head .hint{margin:0}
.plate-dialog-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:18px;padding:14px 20px 18px}
.plate-dialog-view{min-height:0;display:flex;flex-direction:column}
.plate-dialog-view .plate-designer{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.plate-dialog-view .pd-stage{flex:1;height:auto;min-height:320px}
.plate-dialog-side{overflow:auto;padding-right:4px}
.plate-dialog-side h4{margin-top:16px}
.plate-dialog-side .plate-facts{font-size:12.5px}
@media (max-width:900px){.plate-dialog-body{grid-template-columns:1fr;overflow:auto}.plate-dialog-view .pd-stage{min-height:52dvh}}
.design-head{display:flex;align-items:center;gap:12px;margin:22px 0 10px}
.design-head h4{margin:0}
/* A dimension that drags (plate-designer.js): dashed, the pointer's cursor along its line. */
.pd-label.drag{pointer-events:auto;cursor:grab;border:1px dashed rgba(var(--pd-dim-rgb),.6);touch-action:none;user-select:none}
.pd-label.drag[data-dim=weir],.pd-label.drag[data-dim=downcomer]{cursor:ns-resize}
.pd-label.drag[data-dim=crest],.pd-label.drag[data-dim=diameter]{cursor:ew-resize}
.pd-label.drag:hover,.pd-label.held{background:var(--pd-held-bg);border-color:var(--pd-dim);color:var(--pd-held-text)}
body.pd-dragging,body.pd-dragging *{user-select:none}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(4px)}
.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(560px,100%);border-radius:18px 0 0 18px;border-right:0}
/* Setup: a window in the middle of the screen, wide enough for the drawings beside their facts. */
.drawer.setup-guide{margin:auto;width:min(1180px,96vw);height:min(980px,94dvh);max-height:94dvh;border-radius:18px;border-right:1px solid var(--line)}
.setup-guide .drawer-head,.setup-guide .setup-step,.setup-guide .drawer-foot{padding-left:28px;padding-right:28px}
.setup-guide .field-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.setup-guide .recipes{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.design-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:10px}
.design-row .plate-designer,.design-row .packing-designer{margin-bottom:0}
.design-facts .plate-facts{margin-top:2px}
/* The column's kinds as cards: a drawing, what it is and how it is set up now. */
.column-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:2px 0 18px}
.kind-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.column-card{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.column-card:hover{border-color:var(--line-hover)}
.column-card[aria-checked=true]{border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),var(--surface-2) 70%);box-shadow:inset 0 0 0 1px var(--accent)}
.column-icon{flex:0 0 46px;height:70px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.column-icon circle{fill:var(--muted);stroke:none}
.column-card[aria-checked=true] .column-icon{stroke:var(--accent)}
.column-card[aria-checked=true] .column-icon circle{fill:var(--accent)}
.column-card-text{display:flex;flex-direction:column;min-width:0}
.column-card-text strong{font-size:14.5px}
.column-card-text em{font-style:normal;font-size:12px;color:var(--muted);margin:1px 0 7px}
.column-card-about{font-size:12px;line-height:1.5;color:var(--faint)}
.column-card-now{margin-top:8px;font-size:12px;color:var(--cool)}
.column-card-now:empty{display:none}
/* The condenser at the side: the dephlegmator's block in Heat & cooling, the reflux step's words in place of its field. */
.deph-block{margin:2px 0 20px}
.side-reflux{margin:0 0 10px}
/* The apparatus to start from (templates.js): the four side by side where they fit. */
.template-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.template-cards .column-card{flex-direction:column;gap:8px}
.template-cards .column-icon{flex:0 0 auto;width:40px;height:60px}
@media (max-width:1100px){.template-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The packings as cards: a photo of the kind (or the pieces drawn), what it is, its HETP. */
.packing-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:2px 0 18px}
.packing-card{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);text-align:left;font:inherit;cursor:pointer;overflow:hidden;transition:border-color .15s}
.packing-card:hover{border-color:var(--line-hover)}
.packing-card[aria-checked=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pk-thumb{display:block;height:118px;background:var(--pk-thumb);border-bottom:1px solid var(--line-soft);overflow:hidden}
.pk-thumb img,.pk-thumb svg{display:block;width:100%;height:100%;object-fit:cover}
.pk-thumb.new{display:grid;place-items:center;font-size:34px;font-weight:300;color:var(--muted)}
.pk-body{display:flex;flex-direction:column;gap:3px;padding:10px 14px 13px}
.pk-body strong{font-size:14px}
.pk-meta{font-size:12px;color:var(--muted)}
.pk-hetp{font-size:12px;color:var(--text)}
.pk-rec{align-self:flex-start;margin:2px 0 1px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.pk-about{margin-top:3px;font-size:12px;line-height:1.5;color:var(--faint)}
.pk-now{margin-top:5px;font-size:12px;color:var(--cool)}
.pk-now:empty{display:none}
/* Setup's general look in the wide window: headings, the mash field, the review's names. */
.setup-guide .setup-step h3{font-size:16px}
.setup-guide .mash-field{grid-column:span 2}
.setup-guide .name-field,.setup-guide .save-row{max-width:640px}
@media (max-width:900px){.column-cards,.design-row{grid-template-columns:1fr}.setup-guide .mash-field{grid-column:auto}}
.drawer form{display:flex;flex-direction:column;min-height:100%}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px 8px;position:sticky;top:0;background:var(--surface);z-index:2}
.drawer-head h2{font-size:22px;margin-top:4px}
.drawer section,.drawer details.sub{padding:12px 22px}
.drawer section h3{margin-bottom:10px;font-size:14px}
/* Setup's plate designer: one plate to scale in 3D, its dimensions, its numbers. */
.plate-designer{margin-bottom:10px}
.pd-stage{position:relative;height:340px;border-radius:12px;overflow:hidden;background:var(--pd-stage);border:1px solid var(--line);isolation:isolate}
.pd-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.pd-stage canvas:active{cursor:grabbing}
.pd-tools{display:flex;flex-wrap:wrap;gap:3px;width:max-content;max-width:100%;padding:3px;margin-bottom:6px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.pd-tools button{border:0;background:none;color:var(--muted);height:26px;padding:0 8px;border-radius:7px;font-size:12px;font-weight:600}
.pd-tools button:hover{background:var(--surface-3);color:var(--text)}
.pd-tools button[aria-pressed=true]{color:var(--cool)}
.pd-tools .sep{width:1px;background:var(--line);margin:3px 2px}
.pd-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pd-label{position:absolute;font-size:11px;font-weight:600;line-height:1.5;color:var(--pd-label);background:var(--pd-label-bg);padding:0 6px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-50%)}
.pd-label.above{transform:translate(-50%,calc(-100% - 5px))}
.pd-label.right{transform:translate(8px,-50%)}
.pd-label.left{transform:translate(calc(-100% - 8px),-50%)}
.pd-label.liquid{color:var(--pd-liquid)}
.pd-label.can{color:var(--muted);font-weight:500}
.pd-fallback{position:absolute;inset:auto 12px 12px;font-size:12px;color:var(--faint)}
.plate-facts{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0 0 12px;font-size:12px}
.plate-facts dt{color:var(--faint)}
.plate-facts dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.plate-notes{color:var(--warn);margin:-4px 0 12px}
/* Setup: plates or packing, each with its own fields. */
#scenario-form.packed .plates-only,#scenario-form:not(.packed) .packing-only{display:none}
.packing-designer{margin-bottom:10px}
.packing-designer svg{display:block;width:100%;height:auto;border-radius:12px;background:var(--pd-stage);border:1px solid var(--line)}
.packing-designer .pk-dim{stroke:var(--pd-dim);stroke-width:1;fill:none}
.packing-designer .pk-label{font-size:11px;font-weight:600;fill:var(--pd-label)}
.packing-designer .pk-muted{font-size:10.5px;fill:var(--muted)}
.packing-designer .pk-tick{stroke:var(--pd-tick);stroke-width:1}
.packing-source{margin:-4px 0 10px;color:var(--faint)}
.packing-wide{grid-column:1/-1}
.packing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 4px}
.packing-actions .muted{font-size:12px}
/* Setup as a guide (both labs): the step bar in the header, the steps under it (the batch lab's at the end of this file). */
.setup-guide .drawer-head{flex-wrap:wrap;row-gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.setup-steps{flex-basis:100%;display:flex;gap:2px}
.setup-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;border:0;border-radius:9px;background:none;color:var(--faint);font-size:12px;line-height:1.2;text-align:center}
.setup-tab b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:12px}
.setup-tab:hover{background:var(--surface-2);color:var(--text)}
.setup-tab[aria-current=step]{color:var(--text)}
.setup-tab[aria-current=step] b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.setup-tab.done b{border-color:var(--accent);color:var(--accent)}
.setup-tab.invalid b{border-color:var(--bad);color:var(--bad)}
.setup-step h3{margin-top:14px}
.setup-step h3:first-child{margin-top:4px}
.setup-step h4{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.setup-step .hint{margin:-4px 0 12px;line-height:1.5}
.setup-step .step-intro{margin:-4px 0 14px}
.setup-step details.sub{padding:6px 0}
#scenario-form.potstill .plates-only,#scenario-form.potstill .stage-entries{display:none}
#scenario-form:not(.potstill) .potstill-only{display:none}
#scenario-form.potstill .column-only{display:none}
#boiler-use{margin:-4px 0 6px}
.suggest{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-self:end}
.suggest .hint{margin:0!important}
.my-recipes-head{margin-top:20px!important}
.my-recipe{position:relative}
.my-recipe .recipe{width:100%;height:100%;padding-right:34px}
.recipe-delete{position:absolute;top:4px;right:4px;width:28px!important;height:28px;font-size:17px}
.setup-review{margin-bottom:6px}
.review-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.review-row>div{flex:1;min-width:0}
.review-row b{font-size:13px}
.review-row p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.review-row p.review-warning{color:var(--warn)}
.review-row .btn{flex:none}
.save-recipe{margin-top:18px}
.save-row{display:flex;gap:8px}
.save-row input{flex:1;min-width:0;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--bg);padding:0 10px;color:var(--text);font-size:14px}
.save-row input:focus{border-color:var(--line-focus);outline:none}
.setup-nav{display:flex;align-items:center;gap:8px}
.setup-nav #setup-next,.setup-nav #apply-button{margin-left:auto}
.setup-guide .drawer-foot .hint{margin-top:8px}
.drawer-foot{margin-top:auto;padding:16px 22px 22px;position:sticky;bottom:0;background:linear-gradient(transparent,var(--surface) 22%)}
.recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.recipe{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);text-align:left}
.recipe:hover{border-color:var(--line-selected)}
.recipe.selected{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.recipe strong{display:block;font-size:13px}
.recipe span{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.4}
.recipe .recipe-note{color:var(--muted)}
details.demos{padding:10px 0 0!important}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);margin-bottom:12px;position:relative}
.field em{position:absolute;right:2px;top:0;font-style:normal;color:var(--faint);font-size:12px}
.field input,.field select,.field textarea{height:38px;border-radius:9px;border:1px solid var(--line);background:var(--bg);padding:0 10px;color:var(--text);font-size:14px;min-width:0}
.field textarea{height:auto;padding:8px 10px;font:12px/1.5 ui-monospace,Consolas,monospace}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--line-focus);outline:none}
/* A number out of its limits (field-limits.js), once it has been typed in. */
.setup-guide input:user-invalid{border-color:var(--bad)}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}   /* columns may shrink below the inputs' own width (phones) */
details.sub summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);padding:6px 0;list-style:none}
details.sub summary:before{content:'+';display:inline-block;width:16px;color:var(--accent)}
details.sub[open] summary:before{content:'−'}
details.sub[open] summary{margin-bottom:10px}
.close{position:absolute;right:14px;top:14px;font-size:20px}
.drawer .close{position:static}
.notice{width:min(440px,calc(100% - 32px));padding:24px 26px 20px}
.notice h2{font-size:20px;margin:4px 0 12px}
.notice-reason{font-size:17px;font-weight:650;color:var(--text);margin-bottom:8px}
.notice .muted{font-size:13px;line-height:1.5}
.notice-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.help{width:min(640px,calc(100% - 24px));padding:26px 28px;overflow-x:hidden}
.help h2{font-size:22px;margin:6px 0 14px}
.help h3{margin:18px 0 6px}
.help p{font-size:14px;color:var(--muted);line-height:1.65}
.help p b{color:var(--text)}
/* The questions where new users got stuck (Learn's, learn.js), each folded to its answer. */
.stuck details{border-top:1px solid var(--line-soft);border-radius:6px}
.stuck details:last-child{border-bottom:1px solid var(--line-soft)}
.stuck summary{cursor:pointer;padding:8px 4px;font-size:14px;font-weight:600;color:var(--text)}
.stuck details p{margin:0 4px 8px}
/* Two runs side by side (compare.js): the two places A and B, what came out, the containers, and a bar per run for each
   substance, split by where it went. */
.compare{width:min(1080px,calc(100% - 24px));padding:26px 28px}
.compare h2{font-size:22px;margin:6px 0 8px}
.compare h3{margin:20px 0 8px}
.compare h4{margin:4px 0 6px;font-size:13px}
.compare>.muted{font-size:13px;margin:0 0 12px}
.compare-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-slot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.compare-name{flex:1;min-width:120px;font-size:13px;color:var(--text)}
.compare-name.error{color:var(--bad-text)}
.compare-buttons{display:flex;gap:6px}
.compare-tag{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;background:var(--surface-4);font-size:12px;font-weight:700;color:var(--text)}
.compare-empty{margin:18px 0}
.compare-heads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.compare-run{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;align-items:center;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px}
.compare-run small{grid-column:2;color:var(--muted);font-size:12px}
.compare-scroll{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.compare-table th,.compare-table td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.compare-table thead th{color:var(--muted);font-weight:600;font-size:12px}
.compare-figures tbody th{font-weight:600;color:var(--muted)}
.compare-table small{color:var(--muted)}
.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.compare-fates{display:grid;gap:10px}
.compare-fate{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}
.compare-fate-name{font-size:13px;font-weight:600}
.compare-bar-row{display:flex;align-items:center;gap:8px;margin:2px 0}
.compare-bar{flex:1;display:flex;height:18px;border-radius:5px;overflow:hidden;background:var(--surface-3)}
.compare-bar i{display:block;min-width:2px;font-style:normal;font-size:12px;font-weight:700;line-height:18px;text-align:center;color:var(--accent-ink);overflow:hidden;white-space:nowrap}
.compare-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12px;color:var(--muted)}
.compare-legend b{color:var(--text)}
@media (max-width:760px){.compare-pick,.compare-heads,.compare-cols{grid-template-columns:1fr}.compare-fate{grid-template-columns:1fr}.compare{padding:22px 16px}}

/* Motion */
@keyframes pulse{50%{opacity:.35}}
@keyframes coil{to{background-position:-200% 0}}
@keyframes rise{to{background-position:0 -18px}}
@keyframes fall{to{background-position:0 18px}}
@keyframes bubble{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(calc(-1 * var(--glass,26px) - 6px)) scale(1.15);opacity:0}}
@keyframes glow{50%{box-shadow:0 0 26px rgba(var(--heater-glow-rgb),.8)}}
.motion-off *,.motion-off *:before,.motion-off *:after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Responsive */
@media (max-width:1280px){
 .layout{grid-template-columns:minmax(280px,320px) minmax(0,1fr) minmax(270px,300px);gap:12px;padding:12px}
 .actual-speed{display:none}
}
@media (max-width:1100px){
 body{overflow:auto;height:auto}
 .help-group{order:1;margin-left:auto}    /* the settings in the bar's first row, the run's controls on the rows under it */
 .run-controls{order:2}
 .layout{grid-template-columns:minmax(290px,340px) minmax(0,1fr);grid-template-rows:auto auto}
 .column-panel{grid-row:1/3;max-height:none}
 .view-panel{grid-column:2;grid-row:1;min-height:620px}    /* the still beside the column, first (the UX concept: always in view) */
 .control-panel{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;padding:0}
 .control-panel .receiver,.control-panel .summary{grid-column:span 1}
}
@media (max-width:760px){
 .topbar{gap:10px;padding:10px 12px}
 .brand small,.chip-label{display:none}
 .scenario-chip{order:3;max-width:none;flex:1 1 0}
 .file-menu{order:3}
 .file-list{left:auto;right:0}
 .run-controls{order:2;margin-left:0;width:100%;justify-content:space-between}
 .speed button{padding:0 7px}
 .help-group{order:1;margin-left:auto}      /* in the bar's first row, after the switch: nothing drawn over it (the user test) */
 .timeline{padding:6px 12px;gap:8px;flex-wrap:wrap}
 .timeline-label{display:none}
 .timeline input[type=range]{flex-basis:100%}
 .timeline-side{flex:1 1 100%}
 .time-view{width:auto;flex:1;min-width:0}
 .layout{display:flex;flex-direction:column;padding:10px;gap:10px}
 .layout>.view-panel{order:1;position:sticky;top:0;z-index:30;height:44dvh;min-height:260px}   /* the still held at the top */
 .layout>.control-panel{order:2}    /* the heater, the reflux and New jar under the still, the column after them */
 .layout>.column-panel{order:3}
 .tabs{padding-right:56px;-webkit-mask-image:linear-gradient(90deg,var(--text) calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,var(--text) calc(100% - 56px),transparent)}
 .setup-tab span{display:none}      /* the steps' numbers, and the name of the step shown */
 .setup-tab[aria-current=step] span{display:block}
 .control-panel{display:flex;flex-direction:column}
 .stage-flows{grid-template-columns:1fr}
 .hero-values strong{font-size:30px}
 .recipes{grid-template-columns:1fr}
 .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tab-intro{flex-direction:column}
}

/* A phone's width: the bar's name beside the icon goes, so the switch and the help fit one row. A touch screen: its
   buttons at least about a finger's size, and the hints in a finger's words (index.html .mouse-only, .touch-only). */
@media (max-width:420px){.time-toggle span{display:none}.brand div{display:none}.section-switch a{padding-left:9px;padding-right:9px}.help-group .account-link{padding:0 10px}}
@media (pointer:coarse){
 .speed button{min-width:40px;min-height:40px}
 .btn.small{min-height:36px}
 .guest-note a{display:inline-block;padding:8px 2px}
 .mouse-only{display:none}
}
@media (pointer:fine),(pointer:none){.touch-only{display:none}}
/* The Summary tab takes the page's width (the user test's tenth problem: in the middle column the report's tables were
   cut off): the column and the controls step aside while it is open (app.js showTab); a phone's page has it already. */
@media (min-width:761px){
 .layout.wide-view{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
 .layout.wide-view>.column-panel,.layout.wide-view>.control-panel{display:none}
}

/* The parts of the 2D still and plant: a click target over each (a highlighter on hover and while its box
   is open), and the warning symbols (sketch2d.js, plant2d.js). */
svg .part-hit{outline:none}
svg .part-hit:hover,svg .part-hit:focus-visible{fill:var(--sk-marker);fill-opacity:.32}
svg .part-hit:focus-visible{stroke:var(--sk-focus);stroke-width:2;stroke-dasharray:4 3}
.plant-alert{cursor:pointer;outline:none}
.plant-alert .tri{fill:var(--alert-warn);stroke:var(--alert-ink);stroke-width:1.8;stroke-linejoin:round}
.plant-alert.alarm .tri{fill:var(--alert-alarm)}
svg .plant-alert text{font:800 15px/1 system-ui,sans-serif;fill:var(--alert-ink);stroke:none}
svg .plant-alert.alarm text{fill:var(--alert-alarm-ink)}
.plant-alert .pulse{transform-box:fill-box;transform-origin:50% 60%}
.plant-alert.alarm .pulse{animation:plant-alert 1.1s ease-in-out infinite}
.plant-alert:hover .tri,.plant-alert:focus-visible .tri{stroke-width:2.6}
@keyframes plant-alert{50%{transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.plant-alert.alarm .pulse{animation:none}}
/* A part's box (part-box.js): over the view, beside its part. */
.view-panel{position:relative}
.part-box{position:absolute;z-index:20;width:330px;max-width:calc(100% - 20px);max-height:calc(100% - 60px);overflow:auto;padding:12px 14px 14px;
 border-radius:14px;background:rgba(var(--overlay-rgb),.97);border:1px solid var(--line-strong);box-shadow:var(--shadow);scrollbar-width:thin;outline:none}
.part-box[hidden]{display:none}
.part-head{display:flex;align-items:flex-start;gap:8px;cursor:move;user-select:none;margin:-2px -4px 6px 0}
.part-head > div{flex:1;min-width:0}
.part-head h3{font-size:15px;margin-top:2px;line-height:1.25}
.part-head .small-x{margin-top:-2px;cursor:pointer}
.part-state{flex:none;margin-top:3px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:650;background:var(--surface-4);color:var(--muted)}
.part-state.on{background:rgba(var(--good-rgb),.16);color:var(--good)}
.part-state.idle{background:rgba(var(--warn-rgb),.14);color:var(--warn)}
.part-role{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 6px}
.part-rows .row{padding:6px 0;font-size:12.5px}
.part-rows .row.sub{padding:1px 0 1px 12px;border-top:0;font-size:12px}
.part-rows .row.sub span{color:var(--faint)}
.part-controls{margin-top:4px}
.part-control.range .control-head.second{margin:12px 0 4px}
.part-control.range output{font-size:16px}
.part-range{display:flex;align-items:center;gap:8px}
.part-range input[type=range],.part-range .range-marked{flex:1;min-width:0}
.part-number{width:74px;height:28px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 6px;font-size:12px;font-variant-numeric:tabular-nums}
.part-unit{min-width:26px;font-size:12px;color:var(--faint)}
.part-control.toggle,.part-control.select,.part-control.choice{margin-top:10px}
.part-control.toggle + .part-control.select{margin-top:8px}
.part-box .valve-toggle{min-width:96px}
.part-box[data-kind=pump] .valve-toggle .valve-lamp{background:var(--faint);box-shadow:none}
.part-box[data-kind=pump] .valve-toggle[aria-pressed=true] .valve-lamp{background:var(--good);box-shadow:0 0 8px var(--good)}
.part-box .tray-pick{justify-content:space-between;width:100%}
.part-box .tray-pick select{max-width:210px}
.part-choice{width:max-content}
.part-choice-label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.part-choice-label[hidden]{display:none}
/* What needs a look: the list beside the plant, the same items in a box and a chosen tray's card. */
.alerts-card{border-color:rgba(var(--alert-warn-rgb),.45)}
.alerts-card.alarm{border-color:rgba(var(--alert-alarm-rgb),.7)}
.alerts-card .control-head{margin-bottom:6px}
.alerts-list{display:flex;flex-direction:column;gap:6px}
.alert-item{display:flex;align-items:flex-start;gap:9px;width:100%;padding:7px 9px;border-radius:10px;border:1px solid transparent;background:rgba(var(--alert-warn-rgb),.08);
 color:var(--text);text-align:left;font:inherit}
button.alert-item{cursor:pointer}
button.alert-item:hover{border-color:rgba(var(--alert-warn-rgb),.5)}
.alert-item.alarm{background:rgba(var(--alert-alarm-rgb),.12)}
button.alert-item.alarm:hover{border-color:rgba(var(--bad-rgb),.6)}
.alert-item b{display:block;font-size:12.5px;font-weight:650}
.alert-item small{display:block;font-size:12px;line-height:1.45;color:var(--muted);margin-top:1px}
.alert-icon{flex:none;display:grid;place-items:center;width:20px;height:18px;margin-top:1px;font:800 12px/1 system-ui,sans-serif;font-style:normal;color:var(--alert-ink);
 background:var(--alert-warn);clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:4px}
.alert-item.alarm .alert-icon{background:var(--alert-alarm);color:var(--alert-alarm-ink)}
.part-alerts:not(:empty){display:flex;flex-direction:column;gap:6px;margin:4px 0 6px}

/* The 2D views' Show/Color note (both pages): a small tab until opened; open, a fold button at its corner. */
.sketch-fold{position:absolute;top:2px;right:5px;min-width:24px;height:24px;padding:0 4px;border:0;background:none;color:var(--sk-ink);
 font:600 15px/1 "Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE",cursive;cursor:pointer}
.sketch-fold:hover{color:var(--sk-hover)}
.sketch-fold:focus-visible{outline:2px dashed var(--sk-focus);outline-offset:1px}
.sketch-panel.folded{padding:4px 8px}
.sketch-panel.folded fieldset{display:none}
.sketch-panel.folded .sketch-fold{position:static;height:auto;min-height:24px;font-size:13px;font-weight:400;white-space:nowrap}

/* The batch top bar on one row: Look back's row only when its button asks for it or the past is shown. */
.timeline{display:none}
body.show-timeline .timeline,body.looking-back .timeline{display:flex}
.time-toggle[aria-pressed=true]{color:var(--accent);background:var(--surface-3)}
body.looking-back .time-toggle{color:var(--accent)}

/* The side panel's groups (panel-groups.js): a head that folds the card, its status open or its values
   folded; compact controls inside: the value beside the name, the slider under it, its ends in its tooltip. */
.card.pgroup{padding:0}
.group-h{margin:0;font:inherit;display:flex;align-items:center}
.group-h .group-head{flex:1;min-width:0}
/* A card's Details (panel-groups.js): its (i) in its head, its explaining sentences shown while it is pressed. */
.card-info{flex:none;width:26px;height:26px;margin-right:10px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:italic 600 13px/1 Georgia,'Times New Roman',serif}
.card-info:hover,.card-info[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}
.pgroup.closed .card-info{display:none}
.pgroup[data-details]:not(.details-open) .hint,.pgroup[data-details]:not(.details-open) .deph-ratio{display:none}
.setup-step h3.with-details{display:flex;align-items:center;gap:10px}
.setup-step h3.with-details .card-info{margin:0}
.setup-step:not(.details-open) :is(.step-intro,.recipe-note,.review-details,.column-card-about){display:none}
.review-details{font-size:12.5px;color:var(--muted);line-height:1.5}
.group-head{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:14px;background:none;color:var(--text);text-align:left}
.group-head:hover{background:var(--surface-2)}
.group-head:focus-visible{outline-offset:-2px}
.group-chev{flex:none;width:7px;height:7px;margin:0 4px 3px 1px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);transition:transform .15s}
.pgroup.closed .group-chev{transform:rotate(-45deg);margin:0 4px 0 0}
.group-head .group-title{display:block;flex:none;font-size:14px;font-weight:600;color:var(--text)}
.group-head .group-status,.group-head .group-sum{display:block;flex:1;min-width:0;text-align:right;font-size:12px;font-weight:400;color:var(--faint);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.group-head .group-sum{color:var(--muted)}
.pgroup.closed .group-status,.pgroup:not(.closed) .group-sum{display:none}
.group-body{padding:0 14px 14px}
.summary.pgroup{display:block}
.summary.pgroup>.group-body{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profile-card.pgroup>.group-body{padding:0 10px 8px}
.control-panel .control-head{margin-bottom:0}
.control-panel .control .control-head.second,.control-panel .pgroup .control-head.second{margin-top:12px}
.control-panel .control-head output{font-size:16px;font-weight:600}
.control-panel input[type=range]{height:22px}
.control-panel .range-ends{display:none}
.control-panel .hint{font-size:12px;margin-top:4px;line-height:1.45}
.control-panel .output-now strong{font-size:18px}
.control-panel .plant-outputs strong{font-size:17px}

/* Set up plant as a guide (the batch lab's .setup-guide): a step of several parts, each under a line. */
.plant-guide .step-part+.step-part{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-soft)}
.plant-guide .setup-step>.hint:last-child,.plant-guide .step-part>.hint:last-child{margin-bottom:4px}

/* The side panel's cards a step lighter than the panels around the views, with a clearer edge and a cool
   tint, so they stand out from the page; their small texts (hints, units) in a clearer grey. */
.control-panel .card{background:var(--control-card);border-color:var(--control-card-line)}
.control-panel .card .hint,.control-panel .muted,.control-panel .group-status{color:var(--control-hint)}
.panel{border-color:var(--panel-line)}

/* The Fusel oil and Heads tabs (and the plant's Profile tab): every member on its own, one under another,
   each under a clear line, with a band and a heading in its colour (congeners.js memberSections). */
.congener-part{margin-top:30px;padding:14px 0 0 16px;border-top:2px solid var(--line);border-left:4px solid var(--member,var(--line))}
.congener-parts>.congener-part:first-child{margin-top:18px}
.part-title{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 12px}
.part-title i{flex:none;width:13px;height:13px;border-radius:3px;background:var(--member,var(--muted))}
.profile-group.congener-part .part-title{font-size:15px;margin:0}

/* The Show · Color notes: each fusel alcohol and each heads compound under its group. */
.sketch-panel label.sub{padding-left:22px;font-size:.92em}

/* The run's notes (notes.js): above the summary report, in its paper colours; in Setup's Review. */
.run-notes{max-width:1120px;margin:0 auto 12px;padding:12px 16px 14px;border-radius:12px;background:var(--note-paper);color:var(--note-ink);border-left:4px solid var(--note-edge)}
.run-notes-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.run-notes-head label{font-weight:700;font-size:15px}
.run-notes-status{color:var(--note-status);font-size:12.5px}
.run-notes textarea{display:block;width:100%;min-height:64px;resize:vertical;border:1px solid var(--note-line);border-radius:8px;background:var(--note-field);color:var(--note-ink);padding:8px 10px;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.run-notes textarea:focus{outline:none;border-color:var(--note-edge)}
.run-notes textarea::placeholder{color:var(--note-placeholder)}
.setup-guide .notes-field{max-width:640px}
.field.notes-field textarea{min-height:70px;resize:vertical;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.export-notes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}

/* Save as product (products.js): the name and notes of what a container holds. */
.product-dialog{width:min(480px,calc(100% - 32px))}
.product-dialog form{display:grid;gap:10px}
.product-dialog .field textarea{min-height:70px;resize:vertical;font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.product-dialog .product-what{margin:0}

/* Setup's saved products (products.js): how much of each, water to a strength. */
/* Setup's saved products mixed in a picture (products.js): the products as cards with their bottles, the water, and the
   vessel with the layers poured into it. */
.mix-board{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;margin:8px 0 10px;align-items:start}
.mix-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.mix-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.mix-card.used{border-color:rgba(var(--accent-rgb),.55);background:var(--surface-3)}
.mix-bottle{width:40px;height:72px}
.mix-bottle-glass{fill:none;stroke:var(--mix-glass);stroke-width:1.4}
.mix-card-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.mix-card-body strong{font-size:13px;overflow-wrap:anywhere}
.mix-card-body small{font-size:12px;color:var(--faint);line-height:1.4}
.mix-card-body .product-notes{color:var(--muted)}
.mix-amount-row{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.mix-amount-row input[type=range]{flex:1 1 90px;min-width:80px;accent-color:var(--accent)}
.mix-amount{display:flex;align-items:center;gap:5px}
.mix-amount input{width:74px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 8px;font-size:13px}
.mix-amount em{font-style:normal;color:var(--faint);font-size:12px}
.mix-modes{display:flex;gap:4px;flex-wrap:wrap;margin:2px 0}
.mix-modes .btn[aria-checked=true]{background:var(--surface-4);color:var(--text);border-color:var(--line)}
.product-delete{width:30px!important;height:30px;font-size:17px}
.mix-side{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.mix-title{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.mix-pot{width:100%;max-width:220px;align-self:center}
.mix-pot-inside{fill:var(--mix-pot-inside)}
.mix-pot-wall{fill:none;stroke:var(--mix-pot-wall);stroke-width:3}
.mix-pot-rim{stroke:var(--mix-pot-wall);stroke-width:5;stroke-linecap:round}
.mix-pot-empty{fill:var(--faint);font-size:13px}
.mix-layer-edge{stroke:rgba(var(--liquid-edge-rgb),.35);stroke-width:1}
.mix-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
.mix-legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:6px;align-items:center}
.mix-legend i{width:12px;height:12px;border-radius:3px}
.mix-legend span{overflow-wrap:anywhere}
.mix-legend b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.mix-total{margin:0;font-size:13px;font-weight:600}
.mix-total.bad{color:var(--bad);font-weight:500}
.mix-side .product-use{align-self:stretch}
@media (max-width:760px){.mix-board{grid-template-columns:1fr}}

/* Setup: a heat loss field set aside while heat loss is off. */
.field.off{opacity:.45}

/* Looking back the quick heat-up (the plant's quick start) cannot be used: it gives way to Run from here, so the bar keeps one row. */
body.looking-back .run-controls .skip-heatup{display:none}

/* The apparatus builder (Setup's Apparatus step, builder.js): the units as boxes, the columns with their trays,
   the lines by what they carry, and the chosen unit's panel. */
.builder-figure{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:10px 12px;overflow:auto}
.builder-svg{display:block;width:100%;height:auto;max-height:64vh;margin:0 auto}
.b-unit{cursor:pointer;outline:none}
.b-unit rect{fill:var(--surface-3);stroke:var(--line);stroke-width:1.2}
.b-unit:hover rect{stroke:var(--b-unit-hover)}
.b-unit:focus-visible>rect{stroke:var(--cool);stroke-width:2}
.b-unit.selected>rect{stroke:var(--accent);stroke-width:2.2}
.b-title{fill:var(--text);font-size:12.5px;font-weight:600}
.b-fact{fill:var(--faint);font-size:11px}
.b-tray{stroke:var(--b-tray);stroke-width:1}
.b-column.packed>rect{fill:var(--b-packed)}
.b-bed{fill:rgba(var(--accent-rgb),.10);stroke:none}
.b-segment{stroke:rgba(var(--accent-rgb),.35);stroke-width:1;stroke-dasharray:3 3}
.b-line polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.b-line.vapor polyline{stroke:var(--accent)}.b-line.vapor polygon{fill:var(--accent)}
.b-line.liquid polyline{stroke:var(--cool)}.b-line.liquid polygon{fill:var(--cool)}
.b-line.product polyline{stroke:var(--good)}.b-line.product polygon{fill:var(--good)}
.b-line.heat polyline{stroke:var(--bad);stroke-dasharray:5 3}.b-line.heat polygon{fill:var(--bad)}
.b-line.signal polyline{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:2 4}
.b-valve circle{fill:var(--surface-4);stroke:var(--muted);stroke-width:1.2}
.b-valve text{fill:var(--text);font-size:11px;font-weight:700}
.builder-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--faint);margin:8px 2px 0}
.builder-legend .key i{display:inline-block;width:18px;border-top:2px solid;vertical-align:middle;margin-right:6px}
.builder-legend .vapor i{border-color:var(--accent)}.builder-legend .liquid i{border-color:var(--cool)}.builder-legend .product i{border-color:var(--good)}
.builder-legend .heat i{border-color:var(--bad);border-top-style:dashed}.builder-legend .signal i{border-color:var(--muted);border-top-style:dotted}
.builder-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.builder-add .btn em{font-style:normal;font-weight:400;color:var(--faint)}
.builder-inspector{margin-top:12px;padding:12px 16px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.builder-inspector>.hint:first-child{margin-top:0}
.builder-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.builder-head h4{margin:0;color:var(--text);font-size:14px}
.builder-text{font-size:12.5px;color:var(--muted);margin-top:8px}
.builder-remove{margin-top:10px;color:var(--bad)}
.builder-choice{display:flex;flex-direction:column;gap:6px}
.segmented{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;overflow:hidden;width:max-content;max-width:100%}
.segmented button{border:0;background:var(--surface-3);padding:6px 12px;font-size:12.5px;color:var(--muted)}
.segmented button+button{border-left:1px solid var(--line)}
.segmented button:hover{background:var(--surface-4);color:var(--text)}
.segmented button[aria-checked=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}
/* For now: "C#" by the brand when the C# server answers (engine-link.js). */
/* Setup in the batch lab, a still set up the way it is built (setup.js, docs/SETUP.md): the steps scroll in their own
   column beside the still's figure; the step bar and the buttons stay where they are. */
.drawer.batch-guide{overflow:hidden}
.batch-guide [hidden]{display:none!important}
.batch-guide form{height:100%;min-height:0}
.batch-guide .drawer-head{position:static;flex:none}
.batch-guide .setup-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px}
.batch-guide .setup-body.no-figure{grid-template-columns:minmax(0,1fr)}
.batch-guide .setup-body.no-figure .setup-figure{display:none}
.batch-guide .setup-main{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}
.batch-guide .setup-figure{min-height:0;display:flex;flex-direction:column;gap:8px;padding:14px 18px 12px;border-left:1px solid var(--line-soft)}
.batch-guide .mash-field{grid-column:auto}
.batch-guide .drawer-foot{position:static;flex:none;background:var(--surface);border-top:1px solid var(--line-soft);padding-top:12px;padding-bottom:14px}
@media (max-width:900px){.batch-guide .setup-body{grid-template-columns:minmax(0,1fr)}.batch-guide .setup-figure{display:none}}
/* How to begin: from scratch (the first and the largest), this experiment, then the recipes. */
.start-cards{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin:2px 0 24px}
.start-card{display:flex;gap:16px;align-items:center;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.start-card:hover{border-color:var(--line-hover)}
.start-card.scratch{border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.12),var(--surface-2) 75%)}
.start-card.scratch:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.start-icon{flex:0 0 46px;height:70px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.start-card.scratch .start-icon{stroke:var(--accent)}
.start-icon .start-next{stroke-dasharray:3 4}
.start-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.start-text strong{font-size:16px}
.start-about{font-size:12.5px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.start-cards{grid-template-columns:1fr}}
/* The boilers side by side, each beside a person at one scale (setup-figure.js boilerPicture). */
.boiler-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:2px 0 16px}
.boiler-card{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:8px 4px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.boiler-card:hover{border-color:var(--line-hover)}
.boiler-card[aria-checked=true]{border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.12),var(--surface-2) 75%);box-shadow:inset 0 0 0 1px var(--accent)}
.bc-pic{display:block;width:104px;max-width:100%;height:112px;margin-bottom:4px}
.bc-pic svg{display:block;width:100%;height:100%}
.boiler-card strong{font-size:15px}
.bc-line{font-size:12px;color:var(--muted);line-height:1.35}
.boiler-card[aria-checked=true] .sf-steel{stroke:var(--accent)}
.boiler-facts h4{margin-top:6px!important}
.boiler-facts .plate-facts{font-size:12.5px}
@media (max-width:1100px){.boiler-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.boiler-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The head on the boiler: its kinds as small cards. */
.head-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:2px 0 12px}
.head-card{display:flex;gap:12px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.head-card:hover:not(:disabled){border-color:var(--line-hover)}
.head-card[aria-checked=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.head-card:disabled{cursor:default;color:var(--text)}
.head-icon{flex:0 0 38px;height:48px}
.head-card[aria-checked=true] .head-icon{stroke:var(--accent)}
.head-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.head-text strong{font-size:13.5px}
.head-meta{font-size:12px;color:var(--muted)}
.head-tag{font-size:12px;color:var(--cool)}
.head-tag:empty,.head-meta:empty{display:none}
/* How full the boiler is. */
.fill-gauge{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:-2px 0 12px;font-size:13px;color:var(--muted)}
.fill-bar{position:relative;flex:0 0 160px;height:10px;border-radius:5px;background:var(--surface-3);border:1px solid var(--line);overflow:hidden}
.fill-bar i{position:absolute;inset:0 auto 0 0;background:var(--cool)}
.fill-gauge.over .fill-bar i{background:var(--bad)}
.fill-gauge.over .fill-text{color:var(--bad-text)}
/* The column as a whole, and the side draws from the start. */
.column-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 16px;align-items:start}
/* The plate recommended for the boiler, in the Column step: what it is and why, and a large button that takes it. */
.recommend-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;margin:4px 0 14px;padding:14px 16px;border:1px solid rgba(var(--accent-rgb),.55);border-radius:12px;background:rgba(var(--accent-rgb),.08)}
.recommend-card .recommend-text{flex:1 1 320px;min-width:0}
.recommend-card strong{display:block;font-size:14px;color:var(--text)}
.recommend-card p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.btn.recommend-use{height:44px;padding:0 22px;font-size:15px}
.recommend-in-use{font-weight:600;color:var(--good)}
.column-facts{margin:0 0 12px;font-size:13px;color:var(--cool);line-height:1.5}
.column-facts:empty{display:none}
.setup-draws{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.setup-draws:empty{display:none}
.setup-draw{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.setup-draw select{height:32px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 8px;font-size:13px}
.setup-draw .draw-rate{flex-direction:row;align-items:center;gap:6px;margin:0}
.setup-draw .draw-rate em{position:static;order:2}
.setup-draw .draw-rate input{width:7em;height:32px}
.setup-draw .muted{font-size:12px}
/* Heating shown, the condenser chosen. */
.heater-fact{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-soft);font-size:13px;line-height:1.55;color:var(--text)}
.condenser-list{display:grid;gap:8px;margin:2px 0 14px}
.condenser-row{display:flex;gap:12px;align-items:flex-start;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.condenser-row:hover{border-color:var(--line-hover)}
.condenser-row[aria-checked=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cr-dot{flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;border:2px solid var(--line-strong)}
.condenser-row[aria-checked=true] .cr-dot{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 38%,transparent 44%)}
.cr-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.cr-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cr-head strong{font-size:13.5px}
.cr-tag{font-size:12px;color:var(--cool)}
.cr-facts{font-size:12px;color:var(--muted);line-height:1.45}
.program-empty{margin:0 0 14px!important}
.general-settings h4:first-of-type{margin-top:8px}
/* The still to scale (setup-figure.js): its metal, its liquid and the person beside it; the parts of the steps still to
   come as outlines, those of the step on show in the accent. The lines keep their width however the picture is scaled. */
.setup-figure svg.sf-svg{flex:1 1 auto;min-height:0;width:100%;height:100%}
.sf-svg *{vector-effect:non-scaling-stroke}
.sf-steel{fill:var(--pk-stainless);stroke:var(--pk-stainless-edge);stroke-width:1}
.sf-copper,.sf-shell{fill:var(--pk-copper);stroke:var(--pk-copper-edge);stroke-width:1}
.sf-ideal{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3}
.sf-rib{stroke:var(--pk-stainless-edge);stroke-width:1}
.sf-liquid{fill:rgba(var(--cool-rgb),.55);stroke:none}
.sf-heater{fill:none;stroke:var(--heater-hot);stroke-width:1.6}
.sf-plate{stroke:var(--pk-copper-edge);stroke-width:1.4}
.sf-flange{stroke:var(--pk-copper-edge);stroke-width:2}
.sf-packing{fill:url(#sf-packing);stroke:var(--pk-copper-edge);stroke-width:.8}
.sf-piece{fill:none;stroke:var(--pk-copper-edge);stroke-width:.6}
.sf-water{fill:var(--cool);stroke:none}
.sf-line{fill:none;stroke:var(--muted);stroke-width:1.4}
.sf-jar{fill:rgba(var(--cool-rgb),.12);stroke:var(--muted);stroke-width:1}
.sf-person{fill:var(--faint);opacity:.45}
.sf-floor{stroke:var(--line-strong);stroke-width:1.2}
.sf-later,.sf-later *{fill:none!important;stroke:var(--line-strong)!important;stroke-dasharray:4 3}
.sf-now,.sf-now *{stroke:var(--accent)!important;stroke-width:2}
.sf-svg.has-now .sf-part:not(.sf-now){opacity:.55}
.figure-caption{margin:0;font-size:12px;line-height:1.45;color:var(--faint);text-align:center}