/* Delta-T: a full-screen 3D scene with floating glass panels, on top of styles.css. */
body{display:flex;flex-direction:column;min-height:100vh}
.mock-strip{background:#febf0f;color:#1b1500;text-align:center;padding:6px 14px;font-weight:600;font-size:13px}
.top{position:static}
.logo{width:auto;min-width:34px;height:auto;padding:0;background:none;border-radius:0;letter-spacing:.06em;color:var(--brand-light,#5dc8d8)}
.logo img{height:38px;display:block}
a.btn{text-decoration:none}
button.primary.cta{display:block;width:100%;margin-top:10px;padding:11px 14px;font-weight:700;font-size:15px;background:var(--accent,#febf0f);color:#1b1500;border-color:var(--accent,#febf0f)}
button.primary.cta:hover{filter:brightness(1.08)}
.fld-seg button.dim{opacity:.45}

/* the stage: scene fills it, panels float over it */
.stage{position:relative;flex:1;min-height:600px;overflow:hidden;background:linear-gradient(#1b2a38,#0e1821)}
@media (prefers-color-scheme:light){.stage{background:linear-gradient(#e9f1f8,#cfdde7)}}
.stage .v3d{position:absolute;inset:0;height:auto;background:none}
.stage .plan{position:absolute;inset:0;box-sizing:border-box;padding:var(--pt,0) var(--pr,0) var(--pb,0) var(--pl,0);background:linear-gradient(#1b2a38,#0e1821)}
.stage .plan svg{width:100%;height:100%;background:#fff;border-radius:10px;user-select:none;-webkit-user-select:none}
.glass{position:absolute;color:#e6edf3;background:rgba(13,22,30,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.13);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.3);z-index:3}
.glass input,.glass select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
.glass select option{color:#111}
.glass button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.glass button:hover{border-color:var(--acc)}
.glass button.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.glass .ghost{background:transparent;border-color:transparent;color:var(--acc)}
.glass small,.glass .note{color:#aebdc9}

/* inputs, left */
.inputs{left:14px;top:14px;bottom:14px;width:304px;padding:12px 12px 14px;overflow:auto}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.chip{padding:6px 8px;font-size:12.5px;line-height:1.2;text-align:left}
.chip b{display:block;font-size:13px}
.chip span{color:#aebdc9;font-size:11.5px}
.inputs .seg{margin-bottom:10px;width:100%;display:flex}
.inputs .seg button{flex:1;padding:7px 4px;background:transparent}
.inputs .seg button.on{background:var(--acc);color:var(--acc-ink)}
.fld{display:grid;grid-template-columns:1fr 118px;gap:8px;align-items:center;margin:6px 0}
.fld label{color:#cfdbe5}
.fld.size{grid-template-columns:1fr}
.size-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.size-row div{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:#aebdc9}
.inputs details{margin-top:8px;border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
.inputs summary{cursor:pointer;color:#cfdbe5;padding:4px 0;font-weight:600}
.inputs summary:focus-visible{outline:2px solid var(--acc)}

/* the big number */
.hud-load{left:340px;top:14px;padding:10px 16px 12px;max-width:min(520px,calc(100% - 640px))}
.kw{font-size:54px;font-weight:700;line-height:1;color:#fff;letter-spacing:-.02em}
.kw small{font-size:20px;margin-left:6px;font-weight:600;letter-spacing:0}
.hud-load .sub{display:flex;gap:16px;margin-top:4px;color:#cfdbe5;font-weight:600}
.hud-load .req{margin-top:6px;font-size:13px;color:#cfdbe5}
.hud-load .req b{color:#fff}
.tag{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(254,191,15,.18);color:#ffd45a;border:1px solid rgba(254,191,15,.45)}

@media (max-height:820px){.kw{font-size:40px}.kw small{font-size:16px}.hud-load{padding:8px 14px 10px}.hud-load .sub{margin-top:2px}}

/* toolbar and heat panel, top right */

/* arrangement picker, bottom */
.arr-panel{left:calc(332px + (100% - 332px) / 2);transform:translateX(-50%);bottom:14px;width:min(560px,calc(100% - 700px));min-width:420px;padding:10px 12px 8px}
.arrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.arr{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 6px 5px;border:1px solid rgba(255,255,255,.2);border-radius:9px;font-size:12px;line-height:1.2}
.arr svg{width:100%;max-height:48px;height:auto;color:#aebdc9}
.arr.on{border:2px solid var(--acc);padding:5px 5px 4px}
.arr.on svg{color:#fff}
.glass .arr.on{background:rgba(93,200,216,.18);color:#fff}
.arr.off{opacity:.4;cursor:not-allowed}
.arr em{position:absolute;top:-7px;right:6px;font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;background:#febf0f;color:#1b1500}
.arr-note{margin:6px 2px 0;font-size:12px;color:#aebdc9}

/* equipment drawer, right */
.drawer{right:14px;top:66px;bottom:14px;width:400px;padding:12px 14px;overflow:auto;z-index:5}
.drawer[hidden]{display:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-mock{margin:6px 0 10px;padding:6px 10px;border-radius:8px;background:rgba(254,191,15,.15);color:#ffd45a;font-size:12.5px}
.drawer h2{color:#aebdc9;margin-top:14px}
.drawer table td,.drawer table th{border-color:rgba(255,255,255,.12)}
.options{display:grid;gap:10px}
.option{padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px}
.option.best{border:2px solid var(--acc);padding:9px 11px}
.option-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.model{font-size:16px;font-weight:700}
.option:not(.best) .model{font-size:14px;font-weight:600}
.cap{font-weight:700;color:var(--acc)}
.gauge{position:relative;height:9px;background:rgba(255,255,255,.16);border-radius:5px;margin:12px 0 8px}
.gauge i{position:absolute;left:0;top:0;bottom:0;background:#8aa0ae;opacity:.7;border-radius:5px}
.option.best .gauge i{background:var(--acc);opacity:1}
.gauge b{position:absolute;top:-6px;width:4px;height:21px;margin-left:-2px;background:#febf0f;border:1px solid #1b1500;border-radius:2px}
.spare{color:#aebdc9}.spare.tight{color:#ffb454;font-weight:600}
.key{display:flex;align-items:center;gap:8px;color:#aebdc9;font-size:12px;margin:10px 0 0}
.key b{display:inline-block;width:4px;height:14px;background:#febf0f;border:1px solid #1b1500;border-radius:2px}
.drawer .stack{display:flex;height:12px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.1);margin:6px 0 10px}
.drawer .stack i{display:block;height:100%}
.drawer .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}
.drawer td:not(:first-child),.drawer th:not(:first-child){text-align:right}

/* presentation mode: only the scene and the big number */
.present-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:5px 14px;border-radius:99px;background:rgba(13,22,30,.6);color:#cfdbe5;font-size:12.5px;z-index:4}
.stage.present .glass:not(.hud-load),.stage.present .rail{display:none}
.stage.present .hud-load{left:50%;transform:translateX(-50%);text-align:center}
.stage.present .hud-load .sub{justify-content:center}
.stage.present .kw{font-size:84px}

/* proposal paper: always white, it is a printed page */
#paperWrap{overflow:auto}
.paper{position:relative;background:#fff;color:#111;max-width:794px;margin:0 auto;padding:40px 48px 30px;box-shadow:0 4px 24px rgba(0,0,0,.35);font-size:13.5px;line-height:1.55;font-family:"Leelawadee UI",Tahoma,"Segoe UI",system-ui,sans-serif}
.paper h1{font-size:24px;line-height:1.2;margin:18px 0 10px;color:#0b7891}
.paper h1 small{font-size:15px;color:#555;font-weight:400;margin-left:10px}
.paper h2{font-size:15px;color:#0b7891;border-bottom:2px solid #5dc8d8;padding-bottom:3px;margin:20px 0 6px;text-transform:none;letter-spacing:0}
.p-head{display:flex;gap:16px;align-items:center;border-bottom:4px solid #0b7891;padding-bottom:14px}
.logo-mark{background:#0b7891;color:#fff;font-weight:700;letter-spacing:.06em;padding:10px 14px;border-radius:6px}
.logo-mark:has(img){background:none;padding:0}
.logo-mark img{height:46px;display:block}
.co{font-weight:700;font-size:15px}
.paper .tag{background:none;border:0;padding:0;font-size:12.5px;display:block;margin:0;color:#555}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px;background:#f1f7f8;border-radius:6px;padding:12px 14px}
.meta span{display:block;font-size:12px;color:#5a6b72}
.paper table{width:100%;border-collapse:collapse}
.paper td,.paper th{padding:5px 8px;border-bottom:1px solid #e1e8eb;text-align:left;vertical-align:top;color:#111}
.paper .plain td:last-child,.paper .num{text-align:right;font-variant-numeric:tabular-nums}
.load-big{font-size:44px;font-weight:800;line-height:1.1;color:#0b7891}.load-big span{font-size:17px;color:#555;font-weight:600}
table.opt{margin:10px 0;border:1px solid #c6d4d9}
table.opt.first{border:2px solid #0b7891}
table.opt th{background:#e7f2f5;color:#0a4a5a}
tr.total td{font-weight:700;border-top:2px solid #222}
.paper .warn{color:#9a3412;font-weight:600}.paper .muted{color:#5a6b72}
.notes{margin:4px 0 0;padding-left:18px;color:#444}
.p-foot{margin-top:22px;padding-top:10px;border-top:1px solid #c6d4d9;color:#222}
.watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:64px;font-weight:800;line-height:1.1;color:rgba(190,30,30,.12);transform:rotate(-24deg);text-align:center}

@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff;display:block}.mock-strip,.top,#sizeView,#propControls{display:none!important}
  #proposalView{display:block;padding:0}.paper{box-shadow:none;max-width:none;padding:0}
  .watermark{position:fixed}
}

/* bottom picker tabs, goods warning and the air model line */
.arr-tabs{display:inline-flex;margin-bottom:8px;border-color:rgba(255,255,255,.2)}
.arr-tabs button{padding:4px 14px;font-size:12.5px}
.arr.warn{border-color:#ffb454}
.arr-note span{display:block}
.arr-note span+span{margin-top:2px}
#handlingSeg{margin:6px 2px 0}

/* temperature indicator */

/* the note keeps one height per tab, so the panel does not jump when the text gets shorter or longer */
#handlingSeg.away{visibility:hidden}
.arrs{min-height:94px;align-content:start} /* goods cards wrap their names to two lines; fan coil cards do not, so both tabs reserve the taller height */

/* The description floats above the panel instead of sitting inside it, so its length cannot move the cards. */
.arr-panel{position:absolute}
.arr-note{position:absolute;left:0;right:0;bottom:calc(100% + 8px);margin:0;padding:8px 12px;line-height:1.4;border-radius:10px;background:rgba(13,22,32,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);pointer-events:none}
.arr-note:empty{display:none}

/* top toolbar: five groups (view, layers, door, time, camera), separated by hairlines */
.toolbar{right:14px;top:14px;display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:14px}
.toolbar[hidden],.toolbar [hidden]{display:none}
.tb-group{display:flex;align-items:center;gap:2px}
.tb-sep{width:1px;height:20px;background:rgba(255,255,255,.14);flex:none}
.toolbar .seg{display:inline-flex;align-items:stretch;border:0;border-radius:9px;background:rgba(255,255,255,.07);padding:2px;gap:1px}
.toolbar .seg button{border:0;border-radius:7px;padding:5px 9px;font-size:12.5px;font-weight:600;background:transparent;color:#aebdc9}
.toolbar .seg button:hover{color:#fff}
.toolbar .seg button.on{background:#2bd4d4;color:#04222a}
.tb-cap{display:flex;align-items:center;padding:0 5px 0 6px;color:#7f93a3}
.tb-cap svg{width:15px;height:15px}
.toolbar button.tb-icon{width:34px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:#aebdc9;position:relative}
.toolbar button.tb-icon:hover{background:rgba(255,255,255,.1);color:#fff}
.toolbar button.tb-icon.on{background:rgba(43,212,212,.18);color:#5fe3e3}
.toolbar button.tb-icon.on::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;background:#2bd4d4}
.tb-icon svg,.tb-cap svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-icon svg{width:19px;height:19px}
.toolbar button:focus-visible{outline:2px solid #5fe3e3;outline-offset:1px}
.slice-pop{right:342px;top:66px;display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:12.5px;border-radius:12px;flex-wrap:wrap;max-width:290px}
.slice-pop[hidden]{display:none}
.slice-pop input{width:120px;accent-color:#2bd4d4}
.slice-pop b{min-width:42px;font-variant-numeric:tabular-nums}
.slice-pop small{flex-basis:100%;color:#aebdc9;font-size:11px}

/* right rail: the temperature card the engineer watches, and the heat sources card he can fold away */
.rail{position:absolute;right:14px;top:66px;width:316px;display:flex;flex-direction:column;gap:8px;max-height:calc(100% - 80px);overflow-y:auto;z-index:3;scrollbar-width:none}
.rail[hidden],.rail .card[hidden]{display:none}
.rail .glass{position:relative;padding:12px 14px}
.rail h3{margin:0;font-size:13.5px;font-weight:600;color:#e6edf3}
.tc-head,.hc-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tc-chip{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.1);color:#aebdc9}
.tc-chip.open{background:rgba(235,77,75,.25);color:#ffb4b2}
.tc-hero{display:flex;align-items:center;gap:12px;margin:10px 0 12px}
.tc-hero b{font-size:42px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tc-hero small{font-size:16px;font-weight:600;letter-spacing:0}
.tc-hero strong{display:block;font-size:14px}
.tc-hero span{display:block;font-size:12.5px;color:#aebdc9;margin-top:2px}
.tc-hero.ok b,.tc-hero.ok strong{color:#8fd19e}.tc-hero.warm b,.tc-hero.warm strong{color:#f2c94c}.tc-hero.hot b,.tc-hero.hot strong{color:#ff8a80}
.tc-scale{position:relative;height:14px;border-radius:7px}
.tc-set{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#fff;border-radius:1px}
.tc-dot{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;border:2px solid #0d1620;background:#8fd19e;transition:left .6s}
.tc-dot.warm{background:#f2c94c}.tc-dot.hot{background:#ff6b6b}
.tc-dot.main{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-color:#fff}
.tc-ends{display:flex;justify-content:space-between;font-size:11.5px;color:#8fa3b3;margin-top:5px}
.tc-rows{list-style:none;margin:10px 0 0;padding:0}
.tc-rows li{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:4px 0;border-top:1px solid rgba(255,255,255,.07)}
.tc-rows li i{width:8px;height:8px;border-radius:50%;background:#8fd19e}
.tc-rows li i.warm{background:#f2c94c}.tc-rows li i.hot{background:#ff6b6b}
.tc-rows b{font-variant-numeric:tabular-nums;font-weight:600}
.tc-spark{display:block;width:100%;height:44px;margin-top:10px;background:rgba(255,255,255,.05);border-radius:6px}
.tc-spark path{fill:none;stroke-width:1.7;vector-effect:non-scaling-stroke}
.tc-spark .a{stroke:#8fd19e}.tc-spark .d{stroke:#f2994a}.tc-spark line{stroke:rgba(255,255,255,.4);stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.tc-key{display:flex;gap:12px;font-size:12px;color:#aebdc9;margin-top:4px}
.tc-key .a::before,.tc-key .d::before{content:"";display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle}
.tc-key .a::before{background:#8fd19e}.tc-key .d::before{background:#f2994a}
.tc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12.5px}
.rail button.tc-link{border:0;background:none;padding:0;color:#7fd8e6;font-size:12.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tc-about{margin:8px 0 0;font-size:12px;line-height:1.45;color:#aebdc9}
.rail button.hc-head{width:100%;border:0;background:none;padding:0;color:inherit;cursor:pointer;text-align:left}
.hc-head h3{flex:1}
.hc-head span{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.chev{width:7px;height:7px;border-right:2px solid #aebdc9;border-bottom:2px solid #aebdc9;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.chev.open{transform:rotate(-135deg) translate(-1px,-1px)}
.hc-row{display:grid;grid-template-columns:112px 1fr 64px;gap:8px;align-items:center;font-size:13px;margin:7px 0 0}
.hc-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-row i{display:block;height:8px;border-radius:4px;min-width:4px}
.hc-row b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.hc-legend{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#aebdc9}
.hc-legend i{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,rgb(47,128,237),rgb(43,212,212),rgb(246,224,94),rgb(242,153,74),rgb(235,77,75))}

/* left panel: grouped by what the customer talks about, steppers for the numbers that get nudged */
.chip.on{border-color:#2bd4d4;background:rgba(43,212,212,.14)}
.grp{margin-top:12px}
.grp h4{margin:0 0 4px;font-size:12.5px;font-weight:600;color:#7fd8e6}
.fld{grid-template-columns:1fr auto}
.fld.size{grid-template-columns:1fr}
.size-sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;font-size:12px;color:#aebdc9}
.size-sum b{color:#e6edf3;font-weight:600;font-variant-numeric:tabular-nums}
.step{display:flex;align-items:center;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(255,255,255,.06);overflow:hidden}
.step button{width:30px;height:32px;padding:0;border:0;border-radius:0;font-size:17px;line-height:1;background:transparent;color:#cfdbe5}
.step button:hover{background:rgba(255,255,255,.12);color:#fff}
.step input{width:58px;height:32px;border:0;border-radius:0;background:transparent;text-align:right;padding:0 2px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step em{font-style:normal;font-size:12px;color:#8fa3b3;padding-right:6px;min-width:20px}
.fld-seg{display:inline-flex;border:0;background:rgba(255,255,255,.07);padding:2px;gap:1px;border-radius:9px}
.fld-seg button{border:0;border-radius:7px;padding:5px 11px;font-size:12.5px;font-weight:600;background:transparent;color:#aebdc9}
.fld-seg button.on{background:#2bd4d4;color:#04222a}
.inputs .fld select{min-width:150px;height:34px}
.cta-bar{position:sticky;bottom:-14px;margin:14px -12px -14px;padding:12px 12px 14px;background:linear-gradient(rgba(13,22,30,0),rgba(13,22,30,.92) 28%)}
.cta-bar .cta{margin-top:0}
.fld:has(.fld-seg){grid-template-columns:1fr;gap:4px}
.fld-seg{display:flex}
.fld-seg button{flex:1;white-space:nowrap;padding:6px 4px}

/* pull-down timeline card */
.time-card{left:340px;top:172px;width:424px;padding:12px 16px 14px;z-index:4}
.time-card[hidden]{display:none}
.tl-head{display:flex;justify-content:space-between;align-items:center}
.time-card h3{margin:0;font-size:13.5px;font-weight:600}
.time-card button.tl-x{width:26px;height:26px;padding:0;border:0;background:transparent;font-size:20px;line-height:1;color:#aebdc9}
.tl-big{font-size:26px;font-weight:700;letter-spacing:-.01em;margin-top:6px;color:#8fd19e}
.tl-big.bad{color:#ff8a80;font-size:20px}
.tl-sub{margin:4px 0 8px;font-size:12.5px;line-height:1.45;color:#cfdbe5}
.tl-chart{display:block;width:100%;height:auto;background:rgba(255,255,255,.04);border-radius:8px}
.tl-chart text{fill:#8fa3b3;font-size:10px}
.tl-chart path{fill:none;stroke-width:2;stroke-linejoin:round}
.tl-chart .a{stroke:#2bd4d4}.tl-chart .g{stroke:#f2994a}
.tl-chart .set{stroke:rgba(255,255,255,.45);stroke-dasharray:4 3;stroke-width:1}
.tl-chart .rdy{stroke:#8fd19e;stroke-dasharray:2 3;stroke-width:1.2}
.tl-chart .rdyl{fill:#8fd19e;font-weight:600}
.tl-key{display:flex;gap:14px;font-size:12px;color:#aebdc9;margin:5px 0 8px}
.tl-key span::before{content:"";display:inline-block;width:12px;height:2px;margin-right:5px;vertical-align:middle;background:currentColor}
.tl-key .a::before{background:#2bd4d4}.tl-key .g::before{background:#f2994a}
.tl-ctl{margin-top:10px}
.tl-ctl label{display:block;font-size:12.5px;color:#cfdbe5;margin-bottom:4px}
.tl-ctl.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-ctl.row label{margin:0;flex:1 0 100%}
.tl-ctl small{color:#8fa3b3;font-size:12px}
.tl-note{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:#8fa3b3}
.time-card .tc-link{border:0;background:none;padding:0;color:#7fd8e6;font-size:12.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.fld-hint{margin:0;font-size:12px;color:#8fa3b3;line-height:1.35}

/* engineer view: tabs on the rail, the working, the assumptions */
.mode-seg{margin-right:4px}
.stage.engineer .rail{width:390px}
.stage.engineer .slice-pop{right:416px}
.rail-tabs{display:flex;width:100%;border:0;background:rgba(13,22,30,.66);backdrop-filter:blur(10px);padding:3px;border-radius:12px;gap:2px;flex:none}
.rail-tabs button{flex:1;border:0;border-radius:9px;padding:7px 4px;font-size:12.5px;font-weight:600;background:transparent;color:#aebdc9}
.rail-tabs button.on{background:#2bd4d4;color:#04222a}
.rail-tabs[hidden]{display:none}
.wk-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.wk-row{display:grid;grid-template-columns:1fr 64px 44px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.wk-row:first-child{border-top:0}
.wk-row span small{display:block;color:#8fa3b3;font-size:11.5px;line-height:1.3;margin-top:1px}
.wk-row i{display:block;height:7px;border-radius:4px;background:#2bd4d4;opacity:.8}
.wk-row b,.wk-sum b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.wk-sum{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.15);font-size:13px}
.wk-sum div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:#cfdbe5}
.wk-sum .big{font-size:15px;color:#fff;font-weight:700;padding:6px 0}
.wk-surf{margin-top:8px;font-size:12px}
.wk-surf summary{cursor:pointer;color:#7fd8e6;padding:3px 0}
.wk-surf table{width:100%;border-collapse:collapse;margin-top:4px;font-variant-numeric:tabular-nums}
.wk-surf th{font-weight:500;color:#8fa3b3;text-align:right;padding:2px 4px}
.wk-surf td{padding:2px 4px;text-align:right;border-top:1px solid rgba(255,255,255,.06)}
.wk-surf th:first-child,.wk-surf td:first-child{text-align:left}
.wk-note{margin:10px 0 0;font-size:11.5px;line-height:1.45;color:#8fa3b3}
.as-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:7px 0 7px 12px;border-top:1px solid rgba(255,255,255,.07);position:relative;font-size:13px}
.as-row:first-of-type{border-top:0}
.as-row.changed::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#f2c94c}
.as-row span small{display:block;color:#8fa3b3;font-size:11.5px;line-height:1.3;margin-top:1px}
.as-in{display:flex;align-items:center;gap:4px}
.as-in input{width:68px;height:32px;text-align:right;border-radius:8px}
.as-in em{font-style:normal;color:#8fa3b3;font-size:12px;min-width:22px}
.rail .glass button.tc-link{border:0;background:none}
.wk-dl{display:block;width:100%;margin-top:12px;padding:9px 12px;font-weight:600;background:rgba(43,212,212,.16)!important;border-color:rgba(43,212,212,.5)!important;color:#7fe6e6!important}

/* assumptions groups and the what-if bars */
.as-group{margin:14px 0 2px;font-size:12.5px;font-weight:600;color:#7fd8e6}
.as-group:first-of-type{margin-top:2px}
.as-in select{height:32px;max-width:150px}
.rail-tabs button{padding:7px 2px;font-size:12px}
.wi-sub{margin:0 0 8px;font-size:12.5px;color:#cfdbe5;line-height:1.4}
.wi-key{display:flex;gap:12px;font-size:11.5px;color:#aebdc9;margin-bottom:6px}
.wi-key span::before{content:"";display:inline-block;width:10px;height:6px;margin-right:5px;border-radius:2px;vertical-align:middle;background:#5b6b78}
.wi-key .lo::before,.wi-bar .lo{background:#2bd4d4}.wi-key .hi::before,.wi-bar .hi{background:#f2994a}
.wi-row{display:grid;grid-template-columns:1fr 112px 44px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.wi-l small{display:block;color:#8fa3b3;font-size:11.5px;margin-top:1px}
.wi-bar{position:relative;height:22px}
.wi-bar b{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}
.wi-bar i{position:absolute;height:8px;border-radius:2px;opacity:.9}
.wi-bar .lo{top:3px}.wi-bar .hi{top:11px}
.wi-n{font-size:11.5px;line-height:1.35;text-align:right;color:#cfdbe5;font-variant-numeric:tabular-nums}

.tc-air{margin-top:10px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.05);font-size:12.5px;line-height:1.4;color:#aebdc9}
.tc-air b{display:block;font-size:13.5px}
.tc-air.ok b{color:#8fd19e}.tc-air.warm b{color:#f2c94c}.tc-air.hot b{color:#ff8a80}

.arr small.arr-air{display:block;margin-top:2px;font-size:11px;line-height:1.2;min-height:13px;color:#8fa3b3}
.arr small.arr-air.ok{color:#8fd19e}.arr small.arr-air.warm{color:#f2c94c}.arr small.arr-air.hot{color:#ff8a80}

/* laptop widths: the panels sit in columns instead of overlapping */
.stage{--rail-w:316px}
.stage.engineer{--rail-w:390px}
.arr-panel{left:332px;right:calc(var(--rail-w) + 28px);transform:none;margin:0 auto;width:min(560px,calc(100% - 332px - var(--rail-w) - 28px));min-width:0}
.hud-load{max-width:min(520px,max(240px,calc(100% - 1130px)))}
.time-card{max-height:calc(100% - 172px - 200px);overflow:auto}
@media (max-width:1400px){.tb-cap{display:none}.toolbar{gap:6px}}

/* small screens (under 1280 px): stack the panels instead of floating them */
@media (max-width:1279px){
  .stage{min-height:0;overflow:visible;display:flex;flex-direction:column;--rail-w:0px}
  .stage .v3d{position:relative;height:60vh;order:1}
  .stage .glass,.stage .rail,.stage .arr-panel,.stage .time-card,.stage .slice-pop,.stage.engineer .rail{position:static;transform:none;width:auto;max-width:none;max-height:none;margin:10px 12px;min-width:0;overflow:visible}
  .stage .rail{display:flex}
  .hud-load{order:0}.toolbar{order:2;flex-wrap:wrap}.slice-pop{order:2}.rail{order:3}.time-card{order:3}.arr-panel{order:4}.inputs{order:5;max-height:none}.drawer{order:6}
  .arr-note{position:static;margin:6px 2px 0;border:0;background:none;padding:0;pointer-events:auto}
  .inputs .cta-bar{position:static;margin:14px 0 0;padding:0;background:none}
  .paper{padding:24px 20px}.meta{grid-template-columns:1fr 1fr}
}

.unit-status{margin-top:2px}
.unit-status.enough{color:#8fd19e}.unit-status.short{color:#ff8a80}

.cap-hint{margin-top:4px;min-height:4em} /* room for the 'brought down' notice, so the fields below do not move */
.cap-hint.cut{color:#f2c94c}

/* the Type choice: cards that say what each type is for */
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tier-card{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:left;padding:7px 8px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer}
.tier-card:hover{border-color:rgba(255,255,255,.4)}
.glass .tier-card.on{border:2px solid var(--acc);padding:6px 7px;background:rgba(93,200,216,.18);color:#fff}
.tier-auto{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:8px}
.tier-top{display:flex;justify-content:space-between;align-items:baseline}
.tier-card b{font-size:14px;letter-spacing:.04em}
.tier-range{font-style:normal;font-size:10.5px;color:#9fb3c2}
.tier-name{font-size:12px;font-weight:600}
.tier-use{font-size:11px;color:#9fb3c2;line-height:1.25;min-height:2.5em}
.tier-auto .tier-use{min-height:0}
.tier-card.dim{opacity:.55}
.tier-card.dim .tier-range{color:#f2c94c}