/* Natural Ventilation Visualizer: the look of the Solar Shading Explorer (A1 v9), its palette, type,
   settings bar, view bars and menus, carried over to the three.js views. */
:root{
  --paper:#EDF0EE; --panel:#FDFDFC; --ink:#18211F; --ink2:#4B5855; --ink3:#7D8A87;
  --rule:#C7D1CE; --rule2:#DDE4E1;
  --glass:#2F6F68; --glassfill:rgba(47,111,104,.15); --glasssoft:rgba(47,111,104,.08);
  --sun:#D9821A; --sunsoft:rgba(217,130,26,.16);
  --shade:#93A6AA; --shadefill:#C4D0D2; --poche:#243230;
  --warn:#8A5A12; --error:#A23A16;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--cond); font-weight:600; letter-spacing:.005em; margin:0}
a{color:var(--glass)}
button{font:inherit}
code{font-family:var(--mono); font-size:12px; background:var(--panel); border:1px solid var(--rule2); padding:1px 4px; border-radius:2px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule); background:var(--panel); padding:14px 22px; display:flex; flex-wrap:wrap; gap:14px 26px; align-items:baseline}
.masthead h1{font-size:23px; line-height:1.1}
.masthead .sub{color:var(--ink2); font-size:13.5px; max-width:60ch; margin:4px 0 0}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
.chip{font-family:var(--mono); font-size:11.5px; color:var(--ink2); border:1px solid var(--rule); border-radius:2px; padding:3px 8px; background:var(--paper)}
.chip b{color:var(--ink); font-weight:500}
.tipped{cursor:help; border-bottom:1px dotted var(--ink3)}

/* ---------- controls ---------- */
.minibtn{font-size:12px; padding:3px 9px; border:1px solid var(--rule); border-radius:2px; background:var(--panel); color:var(--ink2); cursor:pointer; line-height:1.4; display:inline-block}
.minibtn:hover:not(:disabled){border-color:var(--glass); color:var(--ink)}
.minibtn:disabled{opacity:.4; cursor:default}
.minibtn[hidden]{display:none}
.minibtn[aria-pressed=true]{background:var(--poche); color:#fff; border-color:var(--poche)}
.minibtn.iconbtn{display:inline-flex; align-items:center; justify-content:center; padding:3px 6px; line-height:0}
.linkbtn{border:0; background:none; color:var(--glass); text-decoration:underline; padding:0 2px; font-size:11.5px; cursor:pointer}
button.quiet{font-size:12px; padding:2px 8px; border:1px solid var(--rule); border-radius:2px; background:var(--panel); color:var(--glass); cursor:pointer}
button.quiet:hover{border-color:var(--glass)}
input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
input[type=range]{accent-color:var(--glass); height:18px; margin:0; vertical-align:middle}
select, input[type=number]{font:inherit; font-size:12px; padding:3px 6px; border:1px solid var(--rule); border-radius:2px; background:var(--panel); color:var(--ink)}
input[type=number]{width:4.6em; font-family:var(--mono)}
select:focus, input:focus{outline:none; border-color:var(--glass)}
.seg{display:inline-flex; gap:0}
.seg button{font-size:11.5px; padding:3px 9px; border:1px solid var(--rule); background:var(--panel); color:var(--ink2); cursor:pointer; margin-left:-1px}
.seg button:first-child{border-radius:2px 0 0 2px; margin-left:0}
.seg button:last-child{border-radius:0 2px 2px 0}
.seg button[aria-pressed=true]{background:var(--poche); color:#fff; border-color:var(--poche); position:relative}
.chk{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink2); margin:3px 0}
.chk input{margin:0; accent-color:var(--glass); flex:none}
.muted{color:var(--ink3)}
.error-text{color:var(--error)}
.warning-text{color:var(--warn)}

/* ---------- the calculation settings bar: stays at the top as the page scrolls ---------- */
.calcbar{position:sticky; top:0; z-index:30; display:flex; flex-direction:column; gap:6px; padding:8px 18px; background:var(--panel); border-bottom:1px solid var(--rule); box-shadow:0 2px 6px rgba(0,0,0,.05)}
.calcbar.over{outline:2px dashed var(--glass); outline-offset:-4px}
.cbrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px}
.cbtitle{font-family:var(--cond); font-weight:600; font-size:14px; color:var(--ink); white-space:nowrap}
.cbsep{width:1px; align-self:stretch; background:var(--rule2)}
.cbval{font-family:var(--mono); font-size:11.5px; color:var(--ink)}
.cbnote{font-family:var(--mono); font-size:11px; color:var(--ink3)}
.barsel{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); white-space:nowrap}
.barsel .unit{font-size:11.5px; color:var(--ink3)}
.barslide{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); white-space:nowrap}
.barslide input[type=range]{width:150px}
.barslide .val{min-width:4.2em; font-family:var(--mono); font-size:12px; color:var(--ink)}
.airrow{border-top:1px solid var(--rule2); margin:0 -18px -8px; padding:4px 18px 5px}
.airrow .cbfig{font-family:var(--mono); font-size:12px; color:var(--ink); border-left:3px solid var(--glass); padding-left:8px}
.stale{margin:0; padding:5px 10px; border-left:3px solid var(--sun); background:var(--sunsoft); font-size:12.5px; color:var(--ink)}

/* ---------- views ---------- */
.views{background:#fff; border-bottom:1px solid var(--rule)}
.view{background:var(--panel); display:flex; flex-direction:column; min-width:0; position:relative}
.v3dbar{padding:7px 10px; border-bottom:1px solid var(--rule2); position:relative; z-index:6; background:var(--panel)}
.vbarrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; padding-right:70px}
.vtitle{font-family:var(--cond); font-weight:600; font-size:13.5px; color:var(--ink); margin-right:4px}
.vbtns{position:absolute; right:10px; top:7px; display:inline-flex; gap:4px}
.vb{min-width:26px; padding:2px 6px; font-size:13px; line-height:1}
.viewer{position:relative; height:calc(100vh - var(--cbh, 200px) - 82px); min-height:380px; overflow:hidden; background:var(--panel); touch-action:none}
.viewer canvas{display:block; width:100%; height:100%}
.view.full{position:fixed; inset:0; z-index:40}
.view.full .viewer{flex:1; height:auto}
body.hasfull{overflow:hidden}
.viewcube{position:absolute; top:8px; right:8px; width:112px; height:112px; z-index:4; cursor:pointer}

/* drop-down menus in a view's bar */
.dd{position:relative}
.dd>summary{list-style:none; cursor:pointer; font-size:12px; padding:3px 9px; user-select:none; border:1px solid var(--rule); border-radius:2px; background:var(--panel); color:var(--ink2)}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::after{content:" \25BE"; color:var(--ink3)}
.dd>summary:hover{border-color:var(--glass)}
.dd[open]>summary{border-color:var(--glass); color:var(--ink)}
.ddmenu{position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:272px; background:var(--panel); border:1px solid var(--rule); border-radius:2px; padding:7px 11px; box-shadow:0 7px 20px rgba(24,33,31,.14); font-size:12px; color:var(--ink2)}
.ddmenu .ddsel{font-size:11.5px; padding:2px 4px}
.laygrp{border-top:1px solid var(--rule2); padding:4px 0 2px}
.laygrp:first-child{border-top:0}
.layhd{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:24px}
.layhd b{font-weight:500; color:var(--ink)}
.laylab{font-size:11px; color:var(--ink3); margin-left:auto}
.layitem{padding-left:22px}
.layrow{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px; white-space:nowrap}
.layrow input[type=range]{width:100px}
.opv{font-family:var(--mono); font-size:11px; color:var(--ink3); min-width:3.2em; display:inline-block; text-align:right}

/* the foot of a view: its legend */
.tblock{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; border-top:1px solid var(--rule2); padding:7px 12px; font-size:11.5px; color:var(--ink2)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:12px; height:12px; border-radius:1px; display:inline-block; border:1px solid rgba(0,0,0,.12)}

/* the picked item's details, floating over the view */
.pick-info{position:absolute; left:10px; top:10px; z-index:6; width:max-content; max-width:min(330px, calc(100% - 20px)); max-height:calc(100% - 20px); overflow:auto; padding:5px 8px 7px; border-radius:5px; background:var(--panel); border:1px solid var(--rule); box-shadow:0 3px 10px rgba(0,0,0,.13); font-size:11.5px; line-height:1.45; color:var(--ink2)}
/* the selection's pop-up, as the Solar Shading Explorer's: a header to drag it by, fold and close */
.pick-info .pophd,.lvpop .pophd,.zset .pophd{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; color:var(--ink); cursor:move; user-select:none; margin:-1px -4px 3px 0}
.pick-info .popbtns,.lvpop .popbtns,.zset .popbtns{display:inline-flex; gap:2px}
.pick-info .popbtns button,.lvpop .popbtns button,.zset .popbtns button{border:0; background:none; color:var(--ink3); font-size:13px; line-height:1; padding:1px 4px; margin:0; cursor:pointer; border-radius:3px}
.pick-info .popbtns button:hover,.lvpop .popbtns button:hover,.zset .popbtns button:hover{background:var(--rule2); color:var(--ink)}
.pick-info .popsec,.lvpop .popsec,.zset .popsec{margin-top:5px; padding-top:4px; border-top:1px solid var(--rule2); color:var(--ink3); font-weight:600}
.pick-info .popnum,.lvpop .popnum,.zset .popnum{width:5.2em; font:inherit; padding:0 4px; border:1px solid var(--rule); border-radius:2px; background:var(--panel); text-align:right}
.pick-info .popnum:focus,.pick-info .popname:focus,.lvpop .popnum:focus,.lvpop .popname:focus,.zset .popnum:focus,.zset .popname:focus{outline:none; border-color:var(--glass)}
.pick-info .popnum:disabled,.lvpop .popnum:disabled,.zset .popnum:disabled{background:none; border-color:transparent}
.pick-info .popsel,.lvpop .popsel,.zset .popsel{font:inherit; font-size:11px; max-width:13em; padding:0 2px}
.pick-info .popsel.wide,.lvpop .popsel.wide,.zset .popsel.wide{max-width:100%; width:100%}
.pick-info .popname,.lvpop .popname,.zset .popname{font:inherit; width:12em; padding:0 4px; border:1px solid var(--rule); border-radius:2px}
.pick-info .popkv,.lvpop .popkv,.zset .popkv{display:grid; grid-template-columns:8.5em auto; align-items:center; gap:6px}
.pick-info .popv,.lvpop .popv,.zset .popv{white-space:nowrap}
.pick-info .poprow,.lvpop .poprow,.zset .poprow{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center}
.pick-info .poplayer,.lvpop .poplayer,.zset .poplayer{display:flex; gap:4px; align-items:center}
.pick-info .poplayer .lnum,.lvpop .poplayer .lnum,.zset .poplayer .lnum{font-family:var(--mono); color:var(--ink3); width:1.2em}
.pick-info .pbtn,.lvpop .pbtn,.zset .pbtn{font:inherit; font-size:11px; padding:1px 7px; line-height:1.5; margin:0; border:1px solid var(--rule); border-radius:3px; background:var(--panel); color:var(--ink2); cursor:pointer}
.pick-info .pbtn:hover,.lvpop .pbtn:hover,.zset .pbtn:hover{border-color:var(--glass); color:var(--ink)}
.pick-info .pbtn.on,.lvpop .pbtn.on,.zset .pbtn.on{border-color:var(--glass); background:var(--glass); color:#fff}
.pick-info .pbtn.more,.lvpop .pbtn.more,.zset .pbtn.more{border:0; background:none; padding:0; color:var(--glass)}
.pick-info .pbtn.x,.lvpop .pbtn.x,.zset .pbtn.x{border:0; color:var(--ink3); padding:0 4px}
.pick-info .pbtn.x:hover,.lvpop .pbtn.x:hover,.zset .pbtn.x:hover{color:#C0442B}
.pick-info .chk,.lvpop .chk,.zset .chk{display:inline-flex; gap:4px; align-items:center; cursor:pointer}
.pick-info .popday svg rect,.lvpop .popday svg rect,.zset .popday svg rect{fill:var(--glassfill); stroke:none}
.pick-info .popday svg rect.now,.lvpop .popday svg rect.now,.zset .popday svg rect.now{fill:var(--glass)}
.pick-info .popday svg text,.lvpop .popday svg text,.zset .popday svg text{font-size:8px; fill:var(--ink3); font-family:var(--mono)}
.pick-info .popmsg,.lvpop .popmsg,.zset .popmsg{margin:2px 0 4px}
/* zone labels over the 3D view, and a window's figures while it is edited */
.zlabels,.winfigs{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4}
/* a zone's tag, as the Solar Shading Explorer labels its drawings: mono text on a small square backing */
.ztag{position:absolute; left:0; top:0; pointer-events:none; font:500 10.5px/1.35 var(--mono); color:var(--ink2); background:rgba(253,253,252,.92); border:0; border-radius:0; padding:0 4px; cursor:pointer; white-space:nowrap; margin:0}
.ztag:hover{color:var(--glass); box-shadow:inset 0 0 0 .6px var(--glass)}
.ztag.on{color:var(--ink); box-shadow:inset 0 -2px 0 #F2A900}
.wfig{position:absolute; left:0; top:0; pointer-events:auto; font:500 10.5px/1.3 var(--mono); color:var(--ink); background:rgba(253,253,252,.92); border:1px solid #F2A900; border-radius:2px; padding:0 4px; cursor:text; white-space:nowrap; margin:0}
.wfig.bad{border-color:#D93025; color:#D93025; cursor:default; font-family:var(--sans)}
.pick-info b,.lvpop b,.zset b{font-weight:600; color:var(--ink)}
.pick-info div + div,.lvpop div + div,.zset div + div{margin-top:3px}
.pick-info button,.lvpop button,.zset button{margin-top:4px}
.pick-info select,.lvpop select,.zset select{font-size:11.5px; padding:1px 4px}
.pick-info input[type=range],.lvpop input[type=range],.zset input[type=range]{width:120px}

/* ---------- model details, folded away under the view ---------- */
.refs{border-bottom:1px solid var(--rule)}
.refs>summary{font-family:var(--cond); font-weight:600; font-size:16px; padding:14px 24px; cursor:pointer; list-style:none; color:var(--ink2)}
.refs>summary::-webkit-details-marker{display:none}
.refs>summary::before{content:"+ "; font-family:var(--mono); color:var(--ink3)}
.refs[open]>summary::before{content:"– "}
.refs>section{padding:4px 24px 24px; border-top:1px solid var(--rule2)}
.refs h2{font-size:16px; margin:22px 0 8px}
.summary{display:flex; flex-wrap:wrap; gap:6px 22px; margin:12px 0 0; font-size:13px; color:var(--ink2)}
.summary b{color:var(--ink); font-weight:500; font-family:var(--mono)}
.checks{list-style:none; padding:0; margin:0; border-top:2px solid var(--poche); font-size:13px}
.checks li{padding:7px 2px; border-bottom:1px solid var(--rule2)}
.checks .level{display:inline-block; min-width:68px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.checks .error .level{color:var(--error)}
.checks .warning .level{color:var(--warn)}
.checks .info .level{color:var(--ink3)}
.checks button.object{font:inherit; padding:0; border:none; background:none; color:var(--glass); text-decoration:underline; cursor:pointer}
.scroll{overflow-x:auto; background:var(--panel); border:1px solid var(--rule2)}
table{border-collapse:collapse; width:100%; font-size:12.5px; font-variant-numeric:tabular-nums}
th, td{padding:5px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--rule2)}
td{font-family:var(--mono); font-size:12px}
th{font-weight:600; color:var(--ink2); font-size:11.5px; vertical-align:bottom}
th:first-child, td:first-child, #surfaces th:last-child, #surfaces td:last-child{text-align:left}
td:first-child{font-family:var(--sans)}
#surfaces td:last-child{white-space:normal}
tr:last-child td{border-bottom:none}
td[title]{text-decoration:underline dotted var(--ink3); text-underline-offset:3px; cursor:help}
footer{padding:18px 24px 40px; font-size:12px; color:var(--ink3); max-width:88ch}

/* Play day: the one control everyone looks for, as in the Solar Shading Explorer */
.playbtn{font-family:var(--sans); font-weight:600; font-size:13px; padding:3px 14px; border-radius:16px; border:1px solid var(--sun); background:var(--sun); color:#fff; cursor:pointer; white-space:nowrap; flex:none; box-shadow:0 1px 3px rgba(0,0,0,.15)}
.playbtn:hover:not(:disabled){filter:brightness(1.06)}
.playbtn.on{background:var(--panel); color:var(--sun)}
.playbtn:disabled{opacity:.4; cursor:default; box-shadow:none}
#play-dd>summary{font-family:var(--mono); font-size:11.5px}
#play-dd .ddmenu{min-width:200px}

/* the settings bar folds to its first line */
.tuck{border:1px solid var(--rule); background:var(--panel); color:var(--ink2); border-radius:2px; cursor:pointer; font-size:12px; padding:1px 7px; line-height:1.3}
.tuck:hover{border-color:var(--glass); color:var(--ink)}
.calcbar select#weather-file{max-width:20em}
.calcbar input[type=number]{width:5.2em}

/* placing a section plane: dragged in from the bar, or a click on the button then on the view */
body.placing .viewer, body.placing .viewer *{cursor:crosshair !important}
body.placedrag, body.placedrag *{cursor:copy !important; user-select:none}
/* a distance typed after a click on a gumball arrow */
.floatedit{position:absolute; z-index:80; width:7em; font-family:var(--mono); font-size:12px; padding:1px 4px; border:1px solid var(--glass); border-radius:2px; background:var(--panel); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* a view's bar stays on screen under the settings bar until the view scrolls past */
.view>.v3dbar{position:sticky; top:var(--cbh, 0px)}
.view.full>.v3dbar{position:relative; top:0}
/* figures beside sliders that can be typed over */
.typeable{cursor:text; border-bottom:1px dotted var(--rule)}
.typeable:hover{border-bottom-color:var(--glass); color:var(--ink)}
.valbox{width:9ch; padding:0 3px; font-family:var(--mono); font-size:12px; border:1px solid var(--glass); border-radius:2px; background:var(--panel); color:var(--ink)}

/* figures with a name that drags them (as on the Solar Shading Explorer's view feet) and a value that types */
.barval{display:inline-flex; align-items:baseline; gap:4px; font-size:12px; color:var(--ink2); white-space:nowrap}
.barval .val{font-family:var(--mono); font-size:12px; color:var(--ink); border-bottom:1px dotted var(--rule); cursor:text; min-width:2.5em; text-align:right}
.barval .val:hover{border-bottom-color:var(--glass)}
.barval .unit{font-size:11.5px; color:var(--ink3)}
.barval.off{opacity:.5}
.barval.off .scrub, .barval.off .val{cursor:default}
.scrub{cursor:ew-resize; border-bottom:1px dashed var(--rule); user-select:none; touch-action:none}
.scrub:hover{color:var(--ink)}
body.scrubbing, body.scrubbing *{cursor:ew-resize !important; user-select:none}

/* folded, the settings bar keeps the date, the time and Play day, as the Solar Shading Explorer does */

/* an assembly drawn in section, and its two sides */
.pick-info .popdraw,.library .popdraw{margin:3px 0 1px}
svg.asm .ly{stroke:var(--ink2); stroke-width:.6}
svg.asm .ly.res,svg.asm .ly.gap{stroke-dasharray:2 1.5}
svg.asm .lyn{font:500 8.5px var(--mono); fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:rgba(253,253,252,.85); stroke-width:2.2px}
svg.asm .side{font:500 9px var(--mono); fill:var(--ink3)}
.pick-info .lside,.library .lside{font:500 10px var(--mono); color:var(--ink3)}
.pick-info .pbtn.x:disabled,.library .pbtn.x:disabled{opacity:.25; cursor:default}

/* the Materials and assemblies window, over the page */
.library{position:fixed; right:18px; top:120px; z-index:30; width:min(760px, calc(100vw - 36px)); max-height:72vh; display:flex; flex-direction:column; padding:6px 9px 8px; border-radius:5px; background:var(--panel); border:1px solid var(--rule); box-shadow:0 6px 18px rgba(0,0,0,.16); font-size:11.5px; line-height:1.45; color:var(--ink2)}
.library[hidden]{display:none}
.library .pophd{display:flex; align-items:center; gap:12px; font-weight:600; color:var(--ink); cursor:move; user-select:none; margin-bottom:5px}
.library .pophd .popttl{flex:1}
.library .popbtns button{border:0; background:none; color:var(--ink3); font-size:13px; padding:1px 4px; cursor:pointer; border-radius:3px}
.library .popbtns button:hover{background:var(--rule2); color:var(--ink)}
.library .libbody{overflow:auto; min-height:0}
.library .libtable{border-collapse:collapse; width:100%}
.library .libtable{margin-bottom:10px}
.library .libtable th{text-align:left; font-weight:600; color:var(--ink3); border-bottom:1px solid var(--rule); padding:3px 4px; position:sticky; top:0; z-index:1; background:var(--panel); white-space:nowrap}
.library .libtable th:first-child{color:var(--ink)}
.library .libtable .num{text-align:right}
.library .libtable .unit{font-weight:400}
.library .libtable td{padding:2px 4px; border-bottom:1px solid var(--rule2); vertical-align:middle; white-space:nowrap}
.library .libtable label{display:inline-flex; gap:3px; align-items:center}
.library .libname{font:inherit; width:16em; padding:0 4px; border:1px solid transparent; border-radius:2px; background:none; color:var(--ink)}
.library .libname:hover{border-color:var(--rule2)}
.library .libname:focus{outline:none; border-color:var(--glass); background:var(--panel)}
.library .popnum{width:5.2em; font:inherit; padding:0 4px; border:1px solid var(--rule); border-radius:2px; background:var(--panel); text-align:right}
.library .popsel{font:inherit; font-size:11px; max-width:16em; padding:0 2px}
.library .pbtn{font:inherit; font-size:11px; padding:1px 7px; line-height:1.5; border:1px solid var(--rule); border-radius:3px; background:var(--panel); color:var(--ink2); cursor:pointer}
.library .pbtn:hover{border-color:var(--glass); color:var(--ink)}
.library .pbtn.more{border:0; background:none; padding:0 2px; color:var(--glass)}
.library .pbtn.x{border:0; color:var(--ink3); padding:0 4px}
.library .pbtn.x:hover{color:#C0442B}
.library .libasm{border-bottom:1px solid var(--rule2); padding:3px 0}
.library .libasm.open{background:var(--glasssoft); padding:3px 6px 7px}
.library .libasmhd{display:flex; gap:6px; align-items:center}
.library .poplayer{display:flex; gap:4px; align-items:center; margin:1px 0}
.library .poplayer .lnum{font-family:var(--mono); color:var(--ink3); width:1.2em}
.library .poprow{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; margin-top:3px}
.library .libfoot{margin-top:6px}
.library .seg.mini button{font-size:11px}

/* drags in the view orbit and pan; they do not select the page's text */
.viewer{user-select:none}
.viewer input,.viewer select{user-select:text}

/* a rule between groups in a menu */
.laysep{border-top:1px solid var(--rule2); margin:5px 0 3px}
#play-dd .minibtn + .minibtn{margin-left:4px}

/* the values of the air at the point of a cut pointed at */
.probetag{position:absolute; left:0; top:0; z-index:5; pointer-events:none; font:500 10.5px/1.35 var(--mono); color:var(--ink2); background:rgba(253,253,252,.94); padding:1px 5px; white-space:nowrap}
.probetag b{color:var(--ink); font-weight:600}
.pick-info input[type=range],.lvpop input[type=range],.zset input[type=range]{width:90px; vertical-align:middle}
.pick-info output,.lvpop output,.zset output{font-family:var(--mono); color:var(--ink3)}

/* window keyframes in the Play day menu */
.kflist{display:grid; gap:2px; margin:2px 0 4px; max-width:22em; white-space:normal}
.kfrow{display:grid; grid-template-columns:3.6em 1fr auto; gap:6px; align-items:baseline; font-size:11.5px; padding:1px 3px; border-radius:2px}
.kfrow.on{background:var(--glasssoft)}
.kfrow .pbtnx{border:0; background:none; color:var(--ink3); cursor:pointer; padding:0 3px}
.kfrow .pbtnx:hover{color:#C0442B}

/* the Massing window */
.library.massing{width:min(620px, calc(100vw - 36px)); top:150px}
.massing .poprow{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:4px 0}
.massing .libname.short{width:8em}
.massing .mstable tr.on td{background:var(--glasssoft)}
.massing .mstable .popnum{width:4.6em}
.massing .msub{font-weight:600; color:var(--ink); margin:8px 0 2px; border-top:1px solid var(--rule2); padding-top:6px}
.massing .pbtn.side{min-width:2.2em}
.massing .pbtn.side[aria-pressed=true]{border-color:var(--glass); background:var(--glasssoft); color:var(--ink)}
.massing .mbroken{display:inline-flex; gap:2px; align-items:center; font-family:var(--mono); font-size:11px}

/* a massing's handles over the 3D view (app/massedit.js, in the edit-handles skill's style) */
.mhandles{position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:4}
.mhandles .editable{pointer-events:auto; cursor:text}

/* ---------- the page fills the window: the 3D view takes what the bars leave, Model details a bar along
   the bottom that opens upward over it; nothing scrolls past the view ---------- */
html,body{height:100%}
body{display:flex; flex-direction:column; overflow:hidden}
.masthead,.calcbar{flex:none}
.calcbar{position:relative}
main#results{flex:1; min-height:0; display:flex; flex-direction:column; position:relative}
main#results[hidden]{display:none}
main#results>.views{flex:1; min-height:0; display:flex; flex-direction:column; border-bottom:0; background:#fff; position:relative}
#view3d .viewer{flex:1; height:auto; min-height:0}
#view3d>.v3dbar{position:relative; top:auto}
main#results>.refs{flex:none; border-top:1px solid var(--rule); border-bottom:0; background:var(--panel)}
main#results>.refs>summary{padding:6px 18px; font-size:13.5px}
main#results>.refs[open]>section{max-height:45vh; overflow:auto}
footer[hidden]{display:none}
#keep-seams-l[hidden]{display:none}

/* the Building window's tabs, and the storey-stack rows (the storey-stack skill) */
.library .pophd .tabs{display:flex; gap:2px; flex:1}
.library .pophd .popttl{flex:0 0 auto}
.library .tabs button{border:0; border-bottom:2px solid transparent; background:none; font:inherit; font-weight:500; color:var(--ink3); padding:1px 7px 2px; cursor:pointer}
.library .tabs button:hover{color:var(--ink)}
.library .tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--glass)}
.massing .mstable tr[data-lv]{cursor:pointer}
.massing .stgrid{display:grid; gap:3px; margin:2px 0 6px}
.massing .strow{display:grid; grid-template-columns:18px 22px 22px; align-items:center; gap:3px; color:var(--glass)}
.massing .pbtn.arw{padding:0; color:var(--glass); font-size:9px; height:18px}
.massing .pbtn:disabled{opacity:.35; cursor:default}
.massing .stico{display:block}
.massing .pbtn.danger{color:#C0442B; border-color:#e3b3a8}

/* ---------- the views in rows (the view-layout skill), filling the window ---------- */
main#results>.views{overflow-y:auto; overflow-x:hidden}
.views>.vrow{display:flex; align-items:stretch; background:#fff; flex:none; min-height:0}
.vrow>.view{flex:1 1 0; min-width:220px; min-height:0}
.vdiv{flex:0 0 7px; position:relative; background:#fff; cursor:col-resize}
.hdiv{flex:0 0 7px; position:relative; background:#fff; cursor:row-resize}
.vdiv.end,.hdiv.end{cursor:default}
.vdiv:not(.end):hover,.hdiv:not(.end):hover,body.sizingc .vdiv:hover,body.sizingr .hdiv:hover{background:var(--glasssoft)}
.vplus{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; border:1px solid var(--glass); background:var(--panel); color:var(--glass); font-size:15px; line-height:1; padding:0; cursor:pointer; opacity:0; transition:opacity .12s; z-index:8; box-shadow:0 1px 4px rgba(0,0,0,.12)}
.vdiv:hover>.vplus,.hdiv:hover>.vplus{opacity:1}
.views.empty .hdiv{flex-basis:90px}
.views.empty .hdiv>.vplus{opacity:1; width:auto; height:auto; border-radius:3px; padding:6px 12px; font-size:13px}
.views.empty .hdiv>.vplus::after{content:' Add a view'}
body.sizingc, body.sizingc *{cursor:col-resize !important; user-select:none}
body.sizingr, body.sizingr *{cursor:row-resize !important; user-select:none}
.vmenu{position:absolute; z-index:90; transform:translateX(-50%); background:var(--panel); border:1px solid var(--rule); box-shadow:0 6px 18px rgba(0,0,0,.14); padding:6px; display:flex; flex-direction:column; gap:3px; min-width:160px}
.vmenu p{margin:2px 4px 4px; font-size:11px; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em}
.vmenu button{text-align:left; border:1px solid transparent; background:none; padding:5px 8px; font-size:12.5px; color:var(--ink); cursor:pointer; border-radius:2px}
.vmenu button:hover{border-color:var(--glass); background:var(--glasssoft)}
.grip{cursor:grab; color:var(--ink3); font-size:15px; line-height:1; padding:0 2px; user-select:none; touch-action:none}
.grip:hover{color:var(--ink)}
body.moving, body.moving *{cursor:grabbing !important; user-select:none}
.view.dragging{opacity:.45}
.droptarget{position:absolute; z-index:70; pointer-events:none; background:var(--glass); opacity:.35; border-radius:2px}
.droptarget.swap{background:none; border:2px dashed var(--glass); opacity:.9}
.droptarget[hidden]{display:none}
.vtype{width:auto; margin:0; padding:2px 4px; font-size:13px; font-family:var(--cond); font-weight:600; color:var(--ink); border:1px solid transparent; border-radius:2px; background:transparent}
.vtype:hover{border-color:var(--rule)}
.vbarrow>.vbtns{position:absolute; right:10px; top:7px; display:inline-flex; gap:4px; background:var(--panel)}
.info{width:20px; height:20px; border-radius:50%; border:1px solid var(--ink3); background:var(--panel); color:var(--ink2); font-family:Georgia, serif; font-style:italic; font-weight:700; font-size:12px; line-height:1; padding:0; cursor:pointer}
.info:hover,.info[aria-expanded=true]{border-color:var(--glass); color:var(--glass)}
.infopop{position:absolute; top:calc(100% + 4px); right:10px; width:min(380px, 90%); z-index:45; background:var(--panel); border:1px solid var(--rule); box-shadow:0 6px 18px rgba(0,0,0,.12); padding:10px 13px; font-size:12.5px; color:var(--ink2)}
.infopop h4{margin:0 0 6px; font-size:14px; color:var(--ink)}
.infopop p{margin:0 0 7px}
.infopop[hidden]{display:none}
/* a plan or section: the drawing fills the view */
.vhost.draw2d{flex:1; min-height:0; position:relative; overflow:hidden; touch-action:none; user-select:none; cursor:grab; background:var(--panel)}
.vhost.draw2d>svg{position:absolute; inset:0; display:block}
.vhost.draw2d .vempty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-size:12.5px; color:var(--ink3)}
.vfloat{position:absolute; z-index:3; display:flex; align-items:center; gap:4px}
.vfloat.vfTR{top:8px; right:8px}
.view>.vtitle.tblock{display:flex; flex-wrap:nowrap; gap:2px 16px; align-items:baseline; overflow:hidden; white-space:nowrap; border-top:1px solid var(--rule2); padding:5px 12px; margin:0; font-family:var(--sans); font-weight:400}
.view>.vtitle.tblock:empty{display:none}
.tblock h3{font:600 13px var(--cond); margin:0 4px 0 0}
.tblock .m{font-family:var(--mono); font-size:11px; color:var(--ink3)}
.tblock .m b{color:var(--ink2); font-weight:400}
.view.flash{animation:vflash .9s}
@keyframes vflash{0%{box-shadow:inset 0 0 0 2px var(--glass)}100%{box-shadow:inset 0 0 0 2px transparent}}
#view3d .vbarrow{padding-right:104px}

.vhost.draw2d>svg.planov{pointer-events:none}
.vhost.draw2d.panning{cursor:grabbing}
.vhost.draw2d{cursor:default}
.vtools{margin-top:5px}
.vtools[hidden]{display:none}

/* views scroll in their own box: a view's bar stays at the top of its view */
main#results>.views .view>.v3dbar{position:relative; top:auto}

/* ---------- the top menu: File · Environment · Model · View, one panel at a time ---------- */
.masthead{padding:6px 18px; align-items:center; gap:10px 22px; flex-wrap:nowrap}
.masthead h1{font-size:18px; white-space:nowrap; border-bottom:0}
.ribtabs{display:flex; gap:2px; align-self:flex-end; margin-bottom:-7px}
.ribtabs button{border:1px solid transparent; border-bottom:0; background:none; font:500 13px var(--sans); color:var(--ink2); padding:5px 14px 6px; cursor:pointer; border-radius:3px 3px 0 0}
.ribtabs button:hover{color:var(--ink)}
.ribtabs button[aria-selected=true]{background:var(--panel); border-color:var(--rule); color:var(--ink); position:relative; z-index:2; box-shadow:0 1px 0 var(--panel)}
.masthead .tuck{margin-left:4px}
.calcbar{padding:6px 18px 6px; gap:4px}
.ribbon{display:flex; flex-wrap:wrap; align-items:center; gap:6px 0}
.ribbon[hidden]{display:none}
.ribgrp{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:2px 14px; border-left:1px solid var(--rule2)}
.ribgrp:first-child{padding-left:0; border-left:0}
.ribgrp[hidden]{display:none}
.ribttl{font:600 11px var(--sans); color:var(--ink3); text-transform:uppercase; letter-spacing:.05em}
body.bartucked .calcbar>.ribbon{display:none}
.calcbar .airrow{gap:6px 12px}

/* the levels: markers over the 3D view, the level's pop-up */
.lvmarks{position:absolute; pointer-events:none; overflow:visible; z-index:4}
.lvmarks .lvmark{pointer-events:auto; cursor:default}
.lvmarks .lvmark.on .lvhit{cursor:ns-resize}
.lvmarks text{font:9.5px var(--mono); paint-order:stroke; stroke:var(--panel); stroke-width:3px; stroke-linejoin:round}
.lvmarks .lvname{font:600 10.5px var(--sans)}
.lvmarks .lvfig{pointer-events:auto; cursor:text}
.lvmarks .lvfig:hover{fill:var(--glass)}
.floatedit.inplace{width:auto; padding:0 3px; box-shadow:none; line-height:1}
.lvpop{position:fixed; z-index:45; width:max-content; max-width:260px; padding:5px 8px 7px; border-radius:5px; background:var(--panel); border:1px solid var(--rule); box-shadow:0 3px 10px rgba(0,0,0,.13); font-size:11.5px; line-height:1.45; color:var(--ink2)}
.lvpop[hidden]{display:none}
.lvpop .msub{font-weight:600; color:var(--ink3); margin:6px 0 2px; border-top:1px solid var(--rule2); padding-top:4px}
.lvpop .libname.short{font:inherit; width:10em; padding:0 4px; border:1px solid var(--rule); border-radius:2px}
.lvpop .stgrid{display:grid; gap:3px; margin:2px 0 6px}
.lvpop .strow{display:grid; grid-template-columns:18px 22px 22px; align-items:center; gap:3px; color:var(--glass)}
.lvpop .pbtn.arw{padding:0; color:var(--glass); font-size:9px; height:18px}
.lvpop .pbtn:disabled{opacity:.35; cursor:default}
.lvpop .stico{display:block}
.lvpop .pbtn.danger{color:#C0442B; border-color:#e3b3a8}
.lvpop div + div{margin-top:3px}
/* the View tab's list of views */
.vblist{min-width:420px}
.vblist .layrow{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.vblist .vbkind{font:500 10px var(--mono); color:var(--ink3); width:4.5em}
.vblist .libname{font:inherit; width:11em; padding:0 4px; border:1px solid var(--rule); border-radius:2px}
#view-make .popnum{width:4em; font:inherit; padding:0 4px; border:1px solid var(--rule); border-radius:2px; text-align:right}
#view-make .popname{font:inherit; width:10em; padding:0 4px; border:1px solid var(--rule); border-radius:2px}
.zset{font-size:11.5px}
.zset div + div{margin-top:3px}
.vblist .vbpl{min-width:9em}
.vbmake{min-width:260px}
.vbmake .layrow{display:flex; gap:6px; align-items:center; justify-content:space-between}
.vbmake .popname{flex:1}
.massing .mstable tr[data-act]{cursor:pointer}
.massing .mstable tr[data-act]:hover td{background:var(--glasssoft)}
.massing .mstable tr.mslevel th{font:600 10px var(--mono); color:var(--ink3); text-align:left; padding:6px 4px 2px; border-bottom:1px solid var(--rule); background:none; position:static; text-transform:none; letter-spacing:0}
.pick-info .pbtn.danger{color:#C0442B; border-color:#e3b3a8}
/* figures that change as the air runs keep their room: the buttons beside them stay put */
#room-air-status,#results-status,#bake-status{display:inline-block; min-width:28ch; font-variant-numeric:tabular-nums; white-space:nowrap}
.playmenu{min-width:330px}
.playmenu .layrow{display:flex; align-items:center; justify-content:space-between; gap:8px}
.playmenu input[type=range]{width:120px; vertical-align:middle}
.playmenu .opv{display:inline-block; min-width:11ch; font-variant-numeric:tabular-nums}
#play-status{min-width:24ch; white-space:nowrap}
.fpsbox{position:absolute; left:10px; top:8px; z-index:5; font:10px var(--mono); color:var(--ink3); pointer-events:auto; user-select:none}
.rampsw{display:inline-block; width:46px; height:9px; border-radius:2px; vertical-align:middle; border:1px solid var(--rule)}
.pick-info .popnum.short{width:4.2em}
.probetag .probezone{color:var(--ink3); font-weight:400}
.pick-info .rampdd{display:inline-block; position:relative}
.pick-info .rampdd>summary{font-size:11px; padding:1px 6px; border:1px solid var(--rule); border-radius:3px; background:var(--panel); min-width:9em}
.rampmenu{min-width:180px; padding:4px; display:flex; flex-direction:column; gap:1px; z-index:60}
.ramppick{display:flex; align-items:center; gap:8px; border:1px solid transparent; background:none; font:inherit; font-size:11.5px; padding:3px 6px; cursor:pointer; text-align:left; color:var(--ink); border-radius:2px}
.ramppick:hover{border-color:var(--glass); background:var(--glasssoft)}
.ramppick.on{font-weight:600}
.ramppick .rampsw{width:60px}
.pick-info .flipsw{width:46px; height:14px; padding:0; margin:0; border:1px solid var(--rule); border-radius:2px; color:#fff; font-size:10px; line-height:12px; text-shadow:0 0 2px rgba(0,0,0,.6); cursor:pointer; vertical-align:middle}
.pick-info .scrubnum{cursor:ew-resize}
.rampmenu{z-index:120; box-shadow:0 6px 18px rgba(0,0,0,.14)}
.airbox{top:22px}
/* figures beside sliders keep their width, so the sliders do not move as they change */
.playmenu #play-speed-value{min-width:19ch; text-align:right}
.playmenu #play-step-value{min-width:13ch; text-align:right}
.playmenu #play-max{white-space:normal; max-width:310px; min-height:2.6em}
.playmenu .layrow:first-child{justify-content:flex-start; gap:14px}
/* the play menu keeps its size as its figures and the estimate change */
.ddmenu.playmenu{width:360px; min-width:360px; box-sizing:border-box}
.playmenu #play-max{display:block; width:100%; max-width:none; height:2.8em; overflow:hidden}
/* Run ▸ Playback: the speed's figure and the estimate keep their width */
#play-speed-value{display:inline-block; min-width:19ch; text-align:right; font-variant-numeric:tabular-nums}
.ribbon #play-max{display:inline-block; width:46ch; white-space:normal; line-height:1.25}