:root{--hot:#ff2e93;--hot2:#ff7ab8;--ink:#2b0a1f;--muted:#5c2546;--bg:#fff0f7;--lime:#c6ff3d;--cyan:#2de2e6;--amber:#ffd23f;--red:#b00020;
  --rule:#e6c9d8;--rule2:#f6e4ee;--mut2:#a07890;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--px:ui-monospace,"Cascadia Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;--mono:var(--px);
  --hd:32px;--tb:32px;--st:24px;--ctx:28px;--tree:248px;--det:256px;--row:22px;--pad:8px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.35 var(--sans)}
a{color:var(--ink);text-underline-offset:2px}
.mono{font-family:var(--px);font-size:12px;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
/* ---- header + toolbar ---- */
header{height:var(--hd);flex:none;background:var(--hot);border-bottom:2px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 10px}
header .t{font-weight:750;font-size:14px;white-space:nowrap} header .sl{opacity:.6;font-weight:400}
header a{margin-left:auto;font-size:12px}
.bar{height:var(--tb);flex:none;display:flex;align-items:center;gap:2px;padding:0 6px;background:#fff;border-bottom:1px solid var(--ink);white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.bar::-webkit-scrollbar{display:none}
.bar .sep,.ctx .sep{width:1px;height:18px;background:var(--rule);margin:0 5px;flex:none}
.bar .tbv,.bar .tbo{display:inline-flex;align-items:center;gap:2px}
button,select,input,textarea{font:inherit;color:var(--ink)}
button{height:24px;min-width:24px;padding:0 8px;border:1px solid var(--ink);border-radius:2px;background:#fff;font:500 12px var(--sans);display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;white-space:nowrap;flex:none}
button:hover,button:focus-visible{background:var(--bg)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:0}
button:disabled{opacity:.4;cursor:not-allowed;background:#fff}
button.on,button[aria-pressed=true]{background:var(--ink);color:#fff}
button.main,button.pri,button.primary{background:var(--ink);color:#fff;box-shadow:2px 2px 0 var(--hot);font-weight:650}
button.main:hover,button.main:focus-visible,button.pri:hover,button.primary:hover{background:var(--hot);color:var(--ink)}
button.main:disabled{background:var(--ink);color:#fff}
button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;flex:none}
.bar>button,.ctx button,.tbo button{border-color:transparent}
.bar>button:hover,.bar>button:focus-visible,.ctx button:hover,.tbo button:hover,.tbo button:focus-visible{border-color:var(--ink);background:var(--bg)}
.bar>button.main{border-color:var(--ink)}
button.small{height:22px;padding:0 6px;font-size:12px}
button.link{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* 4-segment pick control: the one place mono caps are used */
.chips2{display:inline-flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.chips2 button{height:22px;border:0;border-right:1px solid var(--ink);border-radius:0;font:700 10px var(--px);letter-spacing:.06em;text-transform:uppercase;padding:0 7px;box-shadow:none}
.chips2 button:last-child{border-right:0}
.chips2 button.on{background:var(--ink);color:#fff}
.tabs{display:none}
/* ---- workspace grid ---- */
main.ws{display:grid;grid-template-columns:var(--tree) minmax(0,1fr) var(--det);min-height:0;background:#fff;border-bottom:1px solid var(--ink)}
.pane{background:#fff;min-width:0;min-height:0}
.pane.tree{border-right:1px solid var(--ink);overflow:auto;overscroll-behavior:contain}
.pane.det{border-left:1px solid var(--ink);display:flex;flex-direction:column;overflow:hidden}
.pane.view{display:flex;flex-direction:column;position:relative;overflow:hidden}
.ph,.pane h3{height:28px;flex:none;display:flex;align-items:center;gap:6px;margin:0;padding:0 var(--pad);font-size:13px;font-weight:650;border-bottom:1px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph small,.pane h3 small{font:11px var(--px);color:var(--muted);font-weight:400;margin-left:auto}
.pane h3 button{margin-left:auto}
.props{flex:0 1 auto;overflow:auto;overscroll-behavior:contain;min-height:0}
.props:only-child,.res:empty{}
.res{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--ink);padding:0 var(--pad) 8px}
.res:empty{display:none}
.det .props{max-height:100%}
.det:has(.res:not(:empty)) .props{max-height:45%}
.res[data-v=none]{display:none}
.det:has(.res[data-v=none]) .props{max-height:100%}
.det:has(.res[data-v=sum]:not(:empty)) .props,.det:has(.res[data-v=diag]:not(:empty)) .props,.det:has(.res[data-v=check]:not(:empty)) .props{flex:none;max-height:55%;overflow:auto}
.res[data-v=sum] .rs[data-s=diag],.res[data-v=sum] .rs[data-s=check],.res[data-v=diag] .rs:not([data-s=diag]),.res[data-v=check] .rs:not([data-s=check]){display:none}
.res h4{height:20px;display:flex;align-items:center;margin:8px calc(-1*var(--pad)) 4px;padding:0 var(--pad);background:var(--bg);font-size:11px;font-weight:650;color:var(--muted)}
/* ---- view ---- */
.ctx{flex:none;background:#fff}
.ctx{height:var(--ctx);border-bottom:1px solid var(--rule)} /* fixed height: picking or solving never resizes the view */
.view:has(#ov.start:not([hidden])) .ctx{display:none}
.ctx:has(>.selbar:not([hidden]))>.tools{display:none}
.ctx>.selbar,.ctx>.tools{border-bottom:0}
.selbar,.tools{height:var(--ctx);display:flex;align-items:center;gap:4px;padding:0 6px;border-bottom:1px solid var(--rule);white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;font-size:12px}
.selbar>*,.tools>*{flex:none}
.selbar .cnt{font-weight:650;margin-right:4px}
.selbar .tgt{background:var(--cyan);color:var(--ink);padding:1px 6px}
.tools label{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.tools select,.selbar select{height:22px;border:1px solid var(--ink);border-radius:2px;background:#fff;padding:0 4px;font-size:12px;max-width:180px;color:var(--ink)}
.tools input[type=text]{height:22px;border:1px solid var(--ink);border-radius:2px;padding:0 4px;font:12px var(--px)}
.tools .grow{flex:1}
.tools .rowbreak{display:none}
.cvwrap{position:relative;flex:1 1 auto;min-height:0;background:#fff}
canvas#cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;background:transparent}
canvas#cv.drag{cursor:grabbing}
.cvo{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.ptip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font:10px var(--px);letter-spacing:.04em;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3;max-width:calc(100% - 20px)}
.probe{position:absolute;right:10px;top:10px;background:#fff;border:1px solid var(--ink);padding:4px 8px;font:11px var(--px);max-width:min(330px,calc(100% - 20px));max-height:calc(100% - 20px);overflow:auto;white-space:pre-wrap}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(255,255,255,.88);overflow:auto;z-index:4}
.card{background:#fff;border:1px solid var(--ink);padding:12px 14px;max-width:520px;width:100%;max-height:100%;overflow:auto}
.card h2{margin:0 0 8px;font-size:14px;font-weight:650} .card p{margin:0 0 8px;color:var(--muted)}
.card .list{display:grid;gap:4px;margin-bottom:10px} .card .list button{justify-content:flex-start;height:26px;font-size:13px}
.card .list button small{color:var(--muted);font-size:11px;margin-left:auto}
.card .chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.card .sub{font-size:11px;font-weight:650;color:var(--muted);margin:4px 0}
.card .row button{height:26px}
/* empty view: three buttons centred in the canvas */
.overlay.start{background:transparent}
.start .card{border:0;padding:0;max-width:200px;background:transparent;overflow:visible;display:flex;flex-direction:column;gap:6px}
.start .card>button,.start .card details>summary{width:180px;height:28px;justify-content:space-between;font-size:13px;border:1px solid var(--ink);border-radius:2px;background:#fff;padding:0 8px;display:flex;align-items:center;cursor:pointer;list-style:none}
.start .card details>summary::-webkit-details-marker{display:none}
.start .card details{border:0;padding:0;margin:0;position:relative}
.start .card details>summary:hover,.start .card>button:hover{background:var(--bg)}
.start .card .k{font:11px var(--px);color:var(--muted)}
.start .card details .list{position:absolute;left:0;top:30px;width:240px;background:#fff;border:1px solid var(--ink);padding:3px;gap:0;z-index:5;margin:0}
.start .card details .list button{border:0;width:100%;height:24px}
.start .card details .list button:hover{background:var(--bg)}
.pbar{height:8px;border:1px solid var(--ink);background:#fff;margin:8px 0} .pbar i{display:block;height:100%;background:var(--ink);width:0}
/* ---- status bar ---- */
footer.status{height:var(--st);flex:none;display:flex;align-items:stretch;background:#fff;font:11px var(--px);white-space:nowrap;position:relative;min-width:0}
footer.status>span{padding:0 10px;border-right:1px solid var(--rule);display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis}
footer.status>span:empty{display:none}
footer.status .gr{flex:1;border-right:0;padding:0}
footer.status .r{border-left:1px solid var(--rule);border-right:0}
.tg{font:700 10px var(--px);padding:0 4px;border:1px solid var(--ink);line-height:14px}
.tg.ok{background:var(--lime)} .tg.hu,.tg.warn{background:var(--amber)} .tg.err{background:var(--red);color:#fff;border-color:var(--red)}
footer.status button.chip{height:18px;border:0;padding:0 4px;font:11px var(--px);background:transparent}
footer.status button.chip:hover{background:var(--bg)}
/* messages: the latest one shows as a status cell; the log opens above the bar */
.msgs{display:flex;align-items:center;min-width:0;max-width:55%;cursor:pointer;border-right:1px solid var(--rule)}
.msgs:empty{display:none}
.msgs>div{display:none;align-items:center;gap:6px;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px var(--px);border:0;margin:0;background:none;color:var(--ink)}
.msgs>div:last-child{display:flex}
body:not(.msgfresh) .msgs:not(:has(> .err)){display:none}
body:not(.msgfresh) .msgs:has(> .err)>div:not(.err){display:none}
body:not(.msgfresh) .msgs:has(> .err)>div.err:last-of-type{display:flex}
body.msgfresh #stSolve{display:none}
.msgs>div::before{font:700 10px var(--px);padding:0 4px;border:1px solid var(--ink);line-height:14px;flex:none}
.msgs>div.ok::before{content:"OK";background:var(--lime)} .msgs>div.warn::before{content:"HEADS UP";background:var(--amber)} .msgs>div.err::before{content:"ERROR";background:var(--red);color:#fff;border-color:var(--red)}
.msgs .x{display:none}
.msgs button.show{height:18px;font-size:11px}
.msgs.open{position:absolute;left:0;right:0;bottom:var(--st);max-width:none;flex-direction:column;align-items:stretch;background:#fff;border-top:1px solid var(--ink);max-height:40vh;overflow:auto;z-index:20;cursor:default;display:flex!important}
.msgs.open>div{display:flex!important;height:22px;border-bottom:1px solid var(--rule2)}
.msgs.open .x{display:inline-flex;height:18px;margin-left:auto;order:9;border-color:transparent}
/* inline field messages in details */
.warn,.err,.ok{font-size:12px;padding:3px var(--pad);margin:0;border:0}
.warn{background:var(--amber);color:var(--ink)}
.err{background:#fff;color:var(--red);border-left:2px solid var(--red)}
.ok{background:var(--lime);color:var(--ink)}
.hint{color:var(--muted);font-size:12px;margin:4px var(--pad)}
.tip{font-size:12px;margin:4px 0;padding:3px 8px;border-left:2px solid var(--ink);background:var(--bg)}
/* ---- outline tree (Mechanical hierarchy) ---- */
.tree ul.t{list-style:none;margin:2px 0 8px;padding:0}
.tree ul.t li{display:flex;flex-wrap:wrap;align-items:center;min-height:var(--row);padding-right:var(--pad);position:relative;cursor:default}
.tree ul.t li.i{padding-left:14px}
.tree ul.t li:hover{background:var(--bg)}
.tree ul.t li.sel{background:var(--ink);color:#fff}
.tree li .tw{width:14px;flex:none;text-align:center;color:var(--muted);font-size:9px;cursor:pointer;user-select:none}
.tree li button.it{all:unset;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;height:var(--row);cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden}
.tree li button.it:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.tree li .gl{width:14px;height:14px;flex:none;box-sizing:border-box;border:1px solid var(--ink);border-radius:2px;font:700 8px/12px var(--px);text-align:center}
.tree li.f>button.it .nm{font-weight:650}
.tree li .nm{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tree li button.it small{margin-left:auto;padding-left:6px;color:var(--muted);font:11px var(--px);flex:none;display:flex;align-items:center;gap:4px}
.tree li .scope{font:11px var(--px);color:var(--muted);flex:0 1 auto;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:6px}
.tree li .scope::before{content:"\00b7 "}
.tree li .scope.err{flex-basis:100%;max-width:none;white-space:normal;color:var(--red);padding:0 0 3px 33px}
.tree li .scope.err::before{content:none}
.tree li .scope button{margin-left:4px;height:18px}
.tree li.sel .gl,.tree li.sel small,.tree li.sel .scope,.tree li.sel .tw{color:#fff;border-color:#fff}
.tree li.mut{color:var(--mut2)} .tree li.mut .gl{border-color:#c9a9bb;color:var(--mut2)}
.tree li.bad>button.it{color:var(--red)} .tree li.bad .gl{border-color:var(--red)} .tree li.bad.sel{background:var(--red)} .tree li.bad.sel>button.it{color:#fff}
.tree li .tg{font:700 9px var(--px);padding:0 4px;border:0}
.tree li .stale{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);border:1px solid var(--ink)}
.tree li .add{height:18px;width:18px;min-width:0;padding:0;margin-left:4px;font-size:13px;line-height:1;border-color:transparent;color:var(--muted);background:transparent;opacity:0;flex:none}
.tree li:hover .add,.tree li .add:focus-visible{opacity:1} .tree li .add:hover{border-color:var(--ink)}
.tree li.sel .add{color:#fff}
@media (hover:none){.tree li .add{opacity:1}}
/* ---- details property grid ---- */
.props h3{position:sticky;top:0;background:#fff;z-index:1}
.f{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch;margin:0;border-bottom:1px solid var(--rule)}
.f>label,.f>*:not(label):not(.full){min-height:var(--row);display:flex;align-items:center;padding:2px var(--pad);border-top:1px solid var(--rule2);min-width:0}
.f>label{color:var(--muted);border-right:1px solid var(--rule2);font-size:12px;line-height:1.2;overflow:hidden}
.f>input,.f>select,.f>textarea,.f>.selrow,.f>.vec,.f>.dofs{margin:0}
.f input,.f select,.f textarea{width:100%;min-width:0;height:18px;border:1px solid var(--ink);border-radius:2px;padding:0 4px;background:#fff;font:12px var(--px)}
.f select{font-family:var(--sans)}
.f textarea{height:auto;min-height:40px}
.f>input,.f>select{height:auto;min-height:var(--row);border:0;border-top:1px solid var(--rule2);border-radius:0;padding:2px 4px}
.f>input{box-shadow:inset 0 0 0 1px var(--ink);margin:0;background-clip:padding-box}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--cyan);outline-offset:-1px}
.f input[type=checkbox]{width:auto;height:auto}
.f input.bad,input.bad{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.f .full{grid-column:1/-1;padding:3px var(--pad);border-top:1px solid var(--rule2)}
.f .full.mono,.sec{height:20px;display:flex;align-items:center;padding:0 var(--pad);background:var(--bg);font:650 11px var(--sans);color:var(--muted);border-top:1px solid var(--rule)}
.vec{display:grid;gap:2px} .vec input{padding:0 3px}
.dofs{display:flex;flex-wrap:wrap;gap:2px} .dofs label{display:inline-flex;align-items:center;gap:2px;font:11px var(--px);border:1px solid var(--ink);border-radius:2px;padding:0 4px;height:18px;cursor:pointer}
.dofs label.on{background:var(--ink);color:#fff}
.dofs input{position:absolute;opacity:0;pointer-events:none}
details{border:0;border-top:1px solid var(--rule);padding:0;margin:0}
summary{cursor:pointer;height:20px;display:flex;align-items:center;padding:0 var(--pad);background:var(--bg);font:650 11px var(--sans);color:var(--muted)}
details .def{font:11px var(--px);margin:4px var(--pad)}
.matinfo{padding:0;font-size:12px;margin:0}
.matinfo>div:first-child{padding:3px var(--pad)}
.matinfo table{margin:0}
.matinfo .note{color:var(--muted);margin:2px var(--pad);font-size:11px}
.row{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:6px var(--pad)}
.list2{border-top:1px solid var(--rule);padding:4px var(--pad);margin:0}
.list2 .item{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:center;border-bottom:1px solid var(--rule2);padding:2px 0}
.list2 .item:last-child{border-bottom:0}
.selrow{display:flex;gap:4px;align-items:center}
.selrow input{flex:1;min-width:0}
.selcnt{font:11px var(--px);color:var(--muted);display:block}
.selcnt.bad{color:#fff;background:var(--red);padding:0 4px}
.fld{display:inline-flex;gap:6px;align-items:center;margin:4px 10px 4px 0;font-size:13px}
.fld input,.fld select{height:22px;border:1px solid var(--ink);border-radius:2px;padding:0 4px}
/* ---- tables (results, quality, diagnostics) ---- */
table{border-collapse:collapse;width:100%;font-size:12px;margin:2px 0 6px}
th,td{border:0;border-bottom:1px solid var(--rule2);padding:2px 4px;text-align:right;vertical-align:top}
th{font-weight:400;color:var(--muted);font-size:11px;background:none}
td{font-family:var(--px);font-variant-numeric:tabular-nums}
td.l,th.l{text-align:left}
td.src{font-family:var(--sans);font-size:11px;text-align:left}
.tablewrap{overflow-x:auto}
.tablewrap td:last-child,.tablewrap th:last-child{white-space:nowrap}
.qtab{border-collapse:collapse;background:#fff;font:11px var(--px);width:100%}
.qtab th,.qtab td{border:0;border-bottom:1px solid var(--rule2);padding:1px 4px;text-align:right}
.qtab th:first-child,.qtab td:first-child{text-align:left}
.qtab tr.over td{background:#fff4d6}
.dmark{display:inline-block;padding:0 4px;border:1px solid var(--ink);font:700 10px var(--px);white-space:nowrap;color:var(--ink)}
.dmark.ok{background:var(--lime)}.dmark.hu{background:var(--amber)}
.diag td.mono{font-size:11px}
button.show{height:18px;padding:0 6px;margin-left:6px;font-size:11px}
body.dropping .cvwrap{outline:2px dashed var(--ink);outline-offset:-6px}
/* ---- fixed full-viewport layout: the page never scrolls ---- */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{display:grid;grid-template-rows:var(--hd) var(--tb) minmax(0,1fr) var(--st);height:100vh;height:100dvh}
@media (min-width:1500px){:root{--tree:256px;--det:288px}}
/* ---- narrow: outline / view / details tabs, still no page scroll ---- */
@media (max-width:900px){
  body{grid-template-rows:var(--hd) var(--tb) 30px minmax(0,1fr) var(--st)}
  .tabs{display:flex;background:#fff;border-bottom:1px solid var(--ink)} .tabs button{flex:1;height:30px;border:0;border-right:1px solid var(--rule);border-radius:0}
  .tabs button:last-child{border-right:0}
  main.ws{grid-template-columns:minmax(0,1fr)}
  main.ws>.pane{display:none;border:0} main.ws>.pane.show{display:flex;flex-direction:column}
  .pane.tree.show{display:block;overflow:auto}
  footer.status>span:not(#stSel):not(#stSolve){display:none} footer.status .gr{display:block}
  .msgs{max-width:60%}
}
@media (max-width:480px){header .t{font-size:13px} .bar .sep{margin:0 2px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* right-click / tree menus */
/* vertical legend with editable limits */
.legend{position:absolute;left:10px;top:10px;background:#fff0f7;border:1px solid var(--ink);padding:6px 8px 8px;font:11px var(--px);bottom:auto;min-width:0;width:max-content;max-width:min(260px,calc(100% - 20px));max-height:calc(100% - 84px);overflow:auto;overscroll-behavior:contain}
.legend .ttl{max-width:240px}
.legend .lgb{margin:10px 0 2px}
.legend .lb{display:flex;align-items:stretch;gap:6px;height:11px;font-size:11px}
.legend .lb i{display:block;width:16px;flex:none;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.legend .lb:first-child i{border-top:1px solid var(--ink)} .legend .lb.end i{border:0;border-top:1px solid var(--ink);height:0}
.legend .lb span{position:relative;top:-6px;line-height:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.legend .lb.end span{top:-7px}
.legend .lsm{display:flex;gap:6px;height:110px;font-size:11px}
.legend .lsm i{display:block;width:16px;border:1px solid var(--ink)}
.legend .lsm span{display:flex;flex-direction:column;justify-content:space-between;font-style:normal} .legend .lsm em{font-style:normal}
.legend .lnum{all:unset;cursor:text;text-decoration:underline dotted;text-underline-offset:1px;font:inherit;font-variant-numeric:tabular-nums}
.legend .lnum.set{font-weight:700;text-decoration-style:solid}
.legend .lnum:focus-visible{outline:2px solid #2de2e6}
.legend .lin{width:90px;font:inherit;padding:0 3px;height:16px}
.legend .ltrue{margin:4px 0 4px;white-space:nowrap;font-size:12px}
.legend .lctl{display:flex;gap:6px;align-items:center}
.legend .lctl select{font:inherit;padding:0 2px}
/* right-click view menu */
.vmenu{position:fixed;z-index:50;display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:3px;min-width:96px}
.vmenu button{all:unset;cursor:pointer;padding:3px 10px;font-family:var(--px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.vmenu button:hover,.vmenu button:focus-visible{background:var(--ink);color:#fff}

.legend .ttl{font:650 12px var(--sans)}
.vmenu{border:1px solid var(--ink);box-shadow:none;border-radius:0}
.vmenu button{font:12px var(--sans);text-transform:none;letter-spacing:0;padding:3px 10px;height:22px;display:flex;align-items:center}
.vmenu .msep{height:1px;background:var(--rule);margin:3px 0}
.vmenu.om{max-height:60vh;overflow:auto;min-width:180px}
.selbar .lb,.tools .lb{color:var(--muted);margin:0 2px 0 6px}
.selbar label{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.selbar input[type=text]{height:22px;border:1px solid var(--ink);border-radius:2px;padding:0 4px;font:12px var(--px)}
.msgs .mt{overflow:hidden;text-overflow:ellipsis}

/* viewport background (fem-next bg feature): layer behind #cv inside .cvwrap only */
canvas#cv{z-index:1}
.cvwrap>.legend,.cvwrap>.probe,.cvwrap>.cvo,.cvwrap>.overlay{z-index:2}
.cvwrap>.ptip{z-index:3}
.cvwrap.bgon canvas#cv{background:transparent}
.bgl{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;user-select:none}
.bgl .bgm{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.bgpop{position:fixed;z-index:50;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:8px;width:260px;font-size:13px}
.bgpop .bgrow{display:flex;gap:6px;align-items:center}
.bgpop input[type=url]{flex:1;min-width:0;border:1px solid var(--ink);padding:2px 5px;height:24px;background:#fff}
.bgpop input[type=range]{flex:1;min-width:0;accent-color:var(--ink)}
.bgpop .bgop{width:38px;text-align:right;font-variant-numeric:tabular-nums}
.bgpop .bgerr{margin:0;padding:4px 8px;font-size:12px}
/* solid backings over any background */
footer.status{background:#fff;z-index:5}
.bgpop .err{background:#fde8ec;color:var(--red);border:1px solid var(--red)}
.bgpop .bgsec{border-top:1px solid var(--ink);padding-top:6px;margin-top:2px}
.bgpop .bglbl{font-size:12px}
.bgpop .texerr{margin:0;padding:4px 8px;font-size:12px}
.bgpop .bgspd,.bgpop .texspd{width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- chunk 2: details grid read-only values, selection rows, legend title ---- */
.pane h3 small{margin-left:auto;font:400 11px var(--px);color:var(--muted)}
.f.ro>.v{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap}
.f .v .mono{font:12px var(--px)} .f .v .u{font:11px var(--px);color:var(--muted)}
.f .v .tg{font:700 9px var(--px);padding:0 4px}
.f>.v>select{height:18px;border:1px solid var(--ink);border-radius:2px;font:12px var(--sans);width:100%}
.f>.selwrap{flex-direction:column;align-items:stretch;justify-content:center;gap:1px;padding-top:2px;padding-bottom:2px}
.f>.selwrap .selrow{width:100%}
.f>.selwrap .selcnt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend .tsub{font:11px var(--px);color:var(--muted);white-space:nowrap;margin-bottom:2px}
.legend .tsub:empty{display:none}
/* ---- resizable panes (6px handles over the 1px dividers) ---- */
main.ws{position:relative}
.rz{position:absolute;top:0;bottom:0;width:6px;z-index:6;cursor:col-resize;touch-action:none;background:transparent}
.rz::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:2px;background:transparent}
.rz:hover::after,.rz.drag::after,.rz:focus-visible::after{background:var(--hot)}
.rz:focus-visible{outline:none}
main.ws.tcol>.pane.tree,main.ws.dcol>.pane.det{visibility:hidden;border:0;overflow:hidden}
main.ws.tcol>.rzL,main.ws.dcol>.rzR{width:8px;background:var(--rule2)}
@media (max-width:900px){.rz{display:none}}
/* ---- show / hide ---- */
.tree li .eye{all:unset;flex:none;width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-left:2px;cursor:pointer;color:var(--muted);border-radius:2px}
.tree li .eye svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3}
.tree li .eye:hover{background:var(--rule2)} .tree li .eye:focus-visible{outline:2px solid var(--cyan)}
.tree li.hid>button.it{color:var(--mut2)} .tree li.hid .gl{border-style:dashed}
.tree li.sel .eye{color:#fff}
footer.status #stHid{cursor:pointer} footer.status #stHid:hover{background:var(--bg)}
/* ---- draggable legend ---- */
.legend{cursor:move;touch-action:none} .legend button,.legend select,.legend input{cursor:pointer} .legend .lnum{cursor:text}
.legend.drag{box-shadow:2px 2px 0 var(--ink)}
.tree ul.t li>.scope{order:2}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tree .scope.err::before{content:"! "}
/* ---- chunk 3 ---- */
/* tree: one 22px line per row, sub-detail lives in the row tooltip */
.tree ul.t li{min-height:22px}
.tree li button.it{height:22px}
.tree li .scope:not(.err){display:none}
.tree li.sel button.it small,.tree li.sel button.it small *{color:#fff}
.tree li.sel button.it small{opacity:.9}
/* results: summary table duplicates the solution information grid in the summary view */
.res[data-v=sum] .tablewrap:has(>table.rsum){display:none}
/* reactions: compact grid, sideways scroll when narrow */
.res .tablewrap:has(>table.rx){overflow-x:auto}
table.rx{border-collapse:collapse;font:11px var(--px);white-space:nowrap;width:auto;min-width:100%}
table.rx th,table.rx td{padding:2px 5px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.rx th{font-weight:700;border-bottom:1px solid var(--ink)}
table.rx th.l,table.rx td.l{text-align:left;max-width:96px;overflow:hidden;text-overflow:ellipsis;position:sticky;left:0;background:#fff}
table.rx tr+tr td{border-top:1px solid var(--rule)}
/* legend: title, subtitle, bands and reset only (max/min live in details and in the view) */
.legend .ltrue{display:none}
/* context row: fits at 1280 */
.tools select{max-width:124px}
.tools select[aria-label='shell surface']{max-width:108px}
.tools input[aria-label='deformation scale']{width:46px!important}
.tools label{gap:3px}
.chips2.anim{height:22px;align-items:stretch}
.chips2.anim button{text-transform:none;letter-spacing:0;min-width:24px;padding:0 6px;font:12px var(--px)}
.chips2.anim #bAnim{font-size:0;width:26px;padding:0;display:flex;align-items:center;justify-content:center}
.chips2.anim #bAnim::before{content:"";width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.chips2.anim #bAnim[aria-pressed=true]::before{width:3px;height:10px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;margin-left:0}
.chips2.anim #bAnimStop{font-size:10px;width:24px;padding:0}
.chips2.anim input,.chips2.anim select{height:22px;border:0;border-left:1px solid var(--ink);border-radius:0;font:11px var(--px);padding:0 3px;background:#fff}
.chips2.anim #animFrames{width:30px!important;text-align:right}
.chips2.anim #animSpeed{width:46px}
.chips2.anim #animMode{width:62px}
.chips2.anim button:disabled{opacity:.45}
.res[data-v=sum] .rs[data-s=top]:not(:has(table:not(.rsum), select, .warn, .stl)){display:none}
.tools .medges,.tools .sep:has(+.medges){display:none} /* same toggle as the mesh-lines button in the view bar */
.tree li button.it small{max-width:52%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.tree li button.it small:has(>.stale,>.tg,>i){display:flex}
@media (max-width:1500px){.tools label>.lt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}} /* select values name themselves; label stays for screen readers and in the tooltip */
.lin.bad,.legend .lnum.bad{outline:2px solid var(--red);outline-offset:0}
.legend .lerr{color:var(--red);font-size:11px;white-space:normal;pointer-events:none}
#pTree li.drop>.it{outline:2px dashed currentColor;outline-offset:-2px}
/* ---- fem-ui chunk 4: legend 150px, 16px bands, footer, case line ---- */
.legend{width:150px;max-width:calc(100% - 20px)}
.legend .ttl{max-width:150px}
.legend .tsub{white-space:pre-line;line-height:14px}
.legend .lb{height:16px}
.legend .lb span{top:-7px}
.legend .lb.end span{top:-7px}
.legend .lb.end{height:12px}
.legend .lsm{height:144px}
.legend .hint{white-space:normal}
.legend .lctl{flex-wrap:wrap;gap:4px 6px;margin-top:2px}
.legend .lctl .lmode{margin-left:auto;font:11px var(--px);color:var(--muted)}
.legend .lctl .lreset{height:18px;padding:0 6px}
/* context-row probe / max-min toggles; busy buttons */
#tools .chips2.marks button{padding:0 6px}
#bSolve.busy,#bMesh.busy{cursor:progress}
@media (max-width:1500px){.tools{gap:3px}.tools select{max-width:112px}.tools select[aria-label='shell surface']{max-width:100px}.tools select[aria-label='result set']{max-width:96px}.tools input[aria-label='deformation scale']{width:40px!important}
  .chips2.anim #animSpeed{width:40px}.chips2.anim #animMode{width:52px}#tools .chips2.marks button{padding:0 5px}}
/* legend: one label per band boundary on a >=150px bar (9 x 17px), footer under the bar */
.legend{box-sizing:content-box;width:150px;display:flex;flex-direction:column}
.legend>.lgb{order:2;margin:12px 0 6px}
.legend>.lctl{order:3}
.legend>.hint:not(.ltrue){order:4}
.legend .lb{height:17px}
.legend .lb span{top:-7px;line-height:14px;height:14px;display:flex;align-items:center}
.legend .lb span .lnum{line-height:14px}
.legend .lb.end{height:0}
.legend .lsm{height:153px}
.legend .lctl{flex-wrap:nowrap;gap:4px}
.legend .lctl label{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.legend .lctl select{width:40px;height:18px;font:11px var(--px)}
.legend .lctl .lreset{padding:0 4px;font-size:11px}
/* custom materials */
.tg.cm{font:700 9px var(--px);padding:0 4px;margin-left:6px;background:#fff;vertical-align:middle}
.cmg .cmf{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.cmg .cmf input,.cmg .cmf textarea{flex:1 1 0;min-width:0}
.cmg .cmf textarea{font:inherit;resize:vertical;border:1px solid var(--rule);padding:2px 4px}
.cmg .merr{flex-basis:100%;font-size:12px;color:#b00020;padding:1px 0 2px}
.cmlib{width:100%;font-size:12px}
.f .v.cmrow{display:flex;flex-wrap:wrap;gap:4px;height:auto;padding-top:2px;padding-bottom:2px}
.cmlib td.cmact{display:flex;gap:4px;justify-content:flex-end}
.cmlib{table-layout:auto} .cmlib td.l,.cmlib th.l{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0} .cmlib td.n,.cmlib th.n{text-align:right;white-space:nowrap;width:1%;padding-left:8px} .cmlib th:last-child,.cmlib td.cmact{width:1%;white-space:nowrap} .cmlib td.cmact button{min-width:20px;padding:0 4px}
/* elements row: label on its own line so off / default / same as bg / upload fit as one segmented group */
.bgpop .bgsec{flex-wrap:wrap;row-gap:4px}
.bgpop .bgsec>.bglbl{flex-basis:100%}
.bgpop .bgsec>.chips2{display:flex;width:100%}
.bgpop .bgsec>.chips2>button{flex:1 1 auto;padding:0 6px;white-space:nowrap}
/* [eig] mode table: rows pick the plotted mode */
.eigt tr.pick{cursor:pointer}.eigt tr.pick:hover td{background:var(--bg)}.eigt tr.pick.sel td{background:var(--hot2);color:var(--ink);font-weight:650}.eigt tr.pick:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.eigt tr.sum th,.eigt tr.sum td{border-top:1.5px solid var(--ink)}.eigt td.mono{text-align:right}
.eigt tr.grp th{border-bottom:0;padding-bottom:0;text-align:center}
/* post P1: through-thickness readout */
.ttkey { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; margin: 2px 0 6px; }
.ttkey i { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 4px; }
table.tt { width: 100%; } table.tt th, table.tt td { white-space: nowrap; font-size: 11px; padding: 2px 2px; } table.tt td { text-align: right; } table.tt th.l { text-align: left; }
.ttsvg { margin-top: 6px; }

#res .stl{font-size:12px;padding:3px var(--pad);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmg .cmf textarea{border:1px solid var(--ink);border-radius:2px;background:#fff;font:12px var(--px);padding:2px 4px}
.pane h3.cmh,.pane h3:has(.cmn){min-width:0} .pane h3 .cmn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto} .pane h3.cmh .tg{flex:none} .pane h3.cmh button{flex:none}
.f.ro.cmro>.v{white-space:normal;overflow:visible;overflow-wrap:anywhere;flex-wrap:wrap}
.cmlib td.cmact{display:table-cell;text-align:right} .cmlib td.cmact button+button{margin-left:3px} .cmlib td.n,.cmlib th.n{padding-left:6px}
/* [contact] status legend counts, convergence folded into diagnostics, tighter reactions */
.legend .lcat{margin:8px 0 4px;display:flex;flex-direction:column;gap:3px}
.legend .lsw{display:flex;align-items:center;gap:6px;height:13px;font-size:11px}
.legend .lsw i{display:block;width:16px;height:11px;flex:none;border:1px solid var(--ink)}
.legend .ctn{margin-top:4px;font-size:10px;opacity:.8;max-width:200px;white-space:normal;line-height:13px}
details.ctconv{margin:6px 0}
details.ctconv>summary{cursor:pointer;font:11px var(--px);padding:2px 0}
#res table.rx{font-size:10px;min-width:0;width:100%}
#res table.rx th,#res table.rx td{padding:2px 2px}
#res table.rx th.l,#res table.rx td.l{max-width:56px}
.f input.pretty{font-size:10px;letter-spacing:-.3px;padding-left:3px;padding-right:2px;text-overflow:ellipsis}
/* fem-ui: reaction row names (support 1, total, applied) stay whole in the tighter #res table */
#res table.rx th.l,#res table.rx td.l{max-width:none;text-overflow:clip}
/* [ux2] reference values table, axes toggle, through-thickness */
table.reft{width:100%;border-collapse:collapse}table.reft th,table.reft td{font-size:11px;padding:2px 4px;border-bottom:1px solid var(--rule2);vertical-align:top}table.reft th{font-weight:400;text-align:left}table.reft td{text-align:right;white-space:nowrap}
.tools .axw{display:inline-flex;align-items:center;flex:none}.tools .axw .lb{margin:0 3px 0 2px}#tools .chips2.axes button{padding:0 5px;text-transform:none;letter-spacing:0}
.ttsvg svg{display:block}
/* [ux3] modal/buckling toolbar: only field + mode selects, so these two size to their label past the 112/124 cap; wing-box static caps unchanged */
.tools:has(select[aria-label='mode']) select[aria-label='result field'],.tools select[aria-label='mode']{max-width:136px}
/* [fem40b] through-thickness table: 4 numeric columns fit the right panel at 1280 (scrolls as the last resort) */
table.tt th,table.tt td{font-size:10px;padding:2px 0 2px 6px}table.tt th.l{padding-left:6px}table.tt tr>:last-child{padding-right:6px}table.tt td,table.tt th:not(.l){min-width:0} /* [fem40b] 6px gaps between columns and at both edges */
.ttbox .tablewrap{overflow-x:auto;scrollbar-width:thin}
/* [ux-edge4] legend title: up to two lines in the 150px legend instead of clipping one line */
.legend .ttl{max-width:150px;white-space:normal;overflow:hidden;text-overflow:clip;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25}
/* [ux-edge4] a long selection name shortens with an ellipsis (full text in its tooltip) before make buttons go into the '…' menu */
.selbar .cnt{flex:0 1 auto;min-width:9em;overflow:hidden;text-overflow:ellipsis}
.tools select[aria-label='result field']{max-width:130px} /* [ux-long] fits 'dir. deformation r' */
.f.ro>.v.wr{white-space:normal;overflow:visible;overflow-wrap:anywhere;height:auto;min-height:22px} /* [ux-long] details result row wraps long names */

/* [ld-ui] [lg-unit] legend items stay whole; ink checkboxes; model root row; clickable load steps */
.legend .tsub .li{white-space:nowrap}
input[type=checkbox]{accent-color:var(--ink)}
.tree h3.mroot{cursor:pointer}
.tree h3.mroot.sel{background:var(--ink);color:#fff}
table.ldh tr.ldst{cursor:pointer}
table.ldh tr.ldst:hover td{background:var(--bg)}
table.ldh tr.ldst.on td{background:var(--ink);color:#fff}