/* Neon Lab α5.0 · the wall-first shell (DESIGN §3): top bar · layers tree · sheet · Properties · checks drawer.
   On while #app has .wf; the old header, panel, lower charts and tool bar stay in the page, hidden (進階 shows the § list). */
#app.wf { grid-template-columns: var(--treeW, 264px) minmax(0, 1fr) var(--propsW, 304px); grid-template-rows: 40px minmax(0, 1fr) auto; }
#app.wf > header, #app.wf > #lower, #app.wf #tools, #app.wf #ftool { display: none !important; }
#app.wf > #panel { display: none; }
#app.wf.adv > #panel { display: block; grid-column: 3; grid-row: 2 / 4; border-left: 1.5px solid var(--ink); }
#app.wf.adv > #props .pbody { display: none; }
#app.wf.adv > #props { grid-row: 2; height: 34px; overflow: hidden; border-bottom: 0; }
#app.wf.adv > #panel { grid-row: 2 / 4; margin-top: 34px; }
#app.wf #panel #ptabs, #app.wf #panel #insp, #app.wf #panel > .advh { display: none !important; }
#app.wf #panel > .sec[hidden] { display: block !important; }
#app.wf.slim { --treeW: 0px; --propsW: 0px; }
#app.wf.slim > #tree, #app.wf.slim > #props { display: none; }
#app.wf > #sheet { grid-column: 2; grid-row: 2; border-right: 0; }
#app.wf.night > #sheet { grid-row: 2 / 4; }
#app.wf.night > #drawer { display: none; }
#app:not(.wf) > #topbar, #app:not(.wf) > #tree, #app:not(.wf) > #props, #app:not(.wf) > #drawer { display: none !important; }

/* ---------- the top bar ---------- */
#topbar { grid-column: 1 / 4; grid-row: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1.5px solid var(--ink); background: var(--panel); white-space: nowrap; min-width: 0; overflow: hidden; }
#topbar .brand { flex: none; margin-right: 4px; }
#topbar .bsub { color: var(--ink2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#topbar .tgrp { display: flex; flex: none; }
#topbar .tgrp > button { padding: 2px 8px; min-width: 26px; font-weight: 700; margin-left: -1px; }
#topbar .tgrp > button:first-child { margin-left: 0; }
#topbar .tgrp > button.on { background: var(--ink); color: var(--board); }
#topbar .tgrp > button small { font-weight: 400; color: inherit; opacity: .7; margin-left: 3px; }
#topbar .sp { flex: 1; min-width: 4px; }
#topbar .zoom { min-width: 58px; text-align: center; }
#topbar .badge { border-color: var(--ink); }
#topbar .badge .bad { color: var(--acc); font-weight: 700; }
#topbar .badge .warn { color: #b07400; font-weight: 700; }
#topbar .badge.clean { color: var(--ok); }
#topbar .insb { font-weight: 700; }
#topbar .status { font-size: 9.5px; color: var(--ink2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#topbar #find { position: absolute; top: 40px; left: 280px; z-index: 40; }

/* ---------- the menus (insert, context, view) ---------- */
.wfmenu { position: fixed; z-index: 60; background: var(--board); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 rgba(28,33,39,.18); min-width: 230px; padding: 3px 0; font-size: 11px; }
.wfmenu > button { display: flex; width: 100%; align-items: baseline; gap: 8px; border: 0; background: none; text-align: left; padding: 4px 10px; letter-spacing: .02em; }
.wfmenu > button:hover, .wfmenu > button.on { background: var(--hl); }
.wfmenu > button[disabled] { color: var(--ink3); cursor: not-allowed; background: none; }
.wfmenu > button .k { margin-left: auto; color: var(--ink2); font-size: 10px; }
.wfmenu > button small { color: var(--ink2); }
.wfmenu > hr { border: 0; border-top: 1px solid var(--rule); margin: 3px 0; }
.wfmenu .mh { padding: 4px 10px 2px; color: var(--ink2); font-size: 9.5px; letter-spacing: .08em; }
.wfmenu .pick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 10px; }
.wfmenu .pick2 button { display: block; text-align: left; padding: 6px; border: 1px solid var(--ink); background: var(--board); }
.wfmenu .pick2 button.on { outline: 2px solid #e89a00; }
.wfmenu .pick2 button[disabled] { opacity: .45; cursor: not-allowed; }
.wfmenu .pick2 svg { display: block; width: 100%; height: 64px; }
.wfmenu .pick2 b { font-size: 13px; }

/* ---------- the layers tree ---------- */
#tree { grid-column: 1; grid-row: 2 / 4; display: flex; flex-direction: column; min-height: 0; border-right: 1.5px solid var(--ink); background: var(--panel); }
#tree .th { display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px; border-bottom: 1px solid var(--rule); }
#tree .th b { letter-spacing: .1em; }
#tree .th input { flex: 1; min-width: 0; font-size: 10px; padding: 2px 5px; border: 1px solid var(--rule); background: var(--board); }
#tree .tl { flex: 1; overflow: auto; padding: 2px 0 12px; outline: none; }
#tree .tr { position: relative; display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 calc(6px + var(--d, 0) * 12px); cursor: default; user-select: none; white-space: nowrap; border-left: 3px solid transparent; }
#tree .tr:hover { background: rgba(255,246,204,.6); }
#tree .tr.sel { background: #e5ecf7; }
#tree .tr.pri { border-left-color: #2c62c4; background: #dbe5f5; }
#tree .tr.hid .nm, #tree .tr.hid .ic, #tree .tr.hid .sb { opacity: .45; }
#tree .tr.virt { color: var(--ink2); font-style: italic; }
#tree .tr.virt .nm { font-weight: 400; }
#tree .tr.drop { outline: 1.5px dashed #2c62c4; outline-offset: -2px; }
#tree .tw { width: 14px; flex: none; border: 0; background: none; padding: 0; color: var(--ink2); font-size: 9px; line-height: 1; }
#tree .tw:hover { background: none; color: var(--ink); }
#tree .ic { width: 16px; flex: none; text-align: center; font-style: normal; color: var(--ink2); font-size: 11px; }
#tree .tr[data-k=row] .nm { font-weight: 700; letter-spacing: .04em; }
#tree .tr[data-k=board] .ic { color: var(--ink); }
#tree .tr[data-k=obj] .ic { color: #b06d00; font-weight: 700; }
#tree .tr[data-k=land] .ic { color: var(--ok); }
#tree .nm { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 20px; }
#tree .nm input { width: 120px; font-size: 11px; padding: 0 3px; border: 1px solid #2c62c4; }
#tree .sb { color: var(--ink3); font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; }
#tree .fl { flex: none; font-size: 9.5px; font-weight: 700; display: flex; gap: 3px; }
#tree .fl .bad { color: var(--acc); }
#tree .fl .warn { color: #b07400; }
#tree .tb { flex: none; width: 18px; height: 18px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink2); visibility: hidden; }
#tree .tb:hover { background: none; color: var(--ink); }
#tree .tb svg { width: 13px; height: 13px; }
#tree .tr:hover .tb.can, #tree .tb.on { visibility: visible; }
#tree .tb.on { color: var(--ink); }
#tree .tf { padding: 8px 10px; border-top: 1px solid var(--rule); color: var(--ink2); font-size: 9.5px; line-height: 1.6; }

/* ---------- Properties ---------- */
#props { grid-column: 3; grid-row: 2 / 4; display: flex; flex-direction: column; min-height: 0; border-left: 1.5px solid var(--ink); background: var(--panel); }
#props .ptabs { display: flex; border-bottom: 1px solid var(--ink); flex: none; }
#props .ptabs button { flex: 1; border: 0; border-right: 1px solid var(--rule); background: none; padding: 7px 4px 6px; font-weight: 700; letter-spacing: .08em; color: var(--ink2); }
#props .ptabs button.on { color: var(--ink); background: var(--board); box-shadow: inset 0 -2px 0 var(--ink); }
#props .pbody { flex: 1; overflow-y: auto; padding-bottom: 40px; }
#props .ph { padding: 8px 10px 6px; border-bottom: 1px solid var(--rule); background: var(--board); }
#props .ph .t { display: flex; align-items: center; gap: 6px; }
#props .ph .t .ic { font-weight: 700; color: var(--ink2); }
#props .ph .t b { font-size: 13px; }
#props .ph .t .pill { margin-left: auto; }
#props .ph .ty { color: var(--ink2); font-size: 10px; margin-top: 2px; }
#props .ph .bc { font-size: 10px; margin-top: 2px; color: #2c62c4; }
#props .ph .bc a { color: inherit; text-decoration: none; cursor: pointer; }
#props .ph .bc a:hover { text-decoration: underline; }
#props .ph .wl { font-size: 9.5px; color: var(--ink2); margin-top: 3px; }
.pill { display: inline-block; border: 1px solid currentColor; border-radius: 9px; padding: 0 7px; font-size: 9.5px; line-height: 15px; white-space: nowrap; }
.pill.real { color: #b06d00; background: #fff4dc; }
.pill.row { color: #2c62c4; background: #e8effa; }
.pill.new { color: var(--ok); background: #e6f4ec; }
.pill.bad { color: var(--acc); background: #fbe9e6; }
.pill.warn { color: #b07400; background: #fff4dc; }
#props .ps { border-bottom: 1px solid var(--rule); }
#props .ps > h5 { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px 5px; font-size: 11px; cursor: pointer; user-select: none; }
#props .ps > h5 .tg { width: 10px; color: var(--ink2); font-weight: 400; }
#props .ps > h5 .zh { font-weight: 400; color: var(--ink2); }
#props .ps > h5 .r { margin-left: auto; display: flex; gap: 4px; align-items: center; }
#props .ps > h5 .sec { font-weight: 400; color: #2c62c4; font-size: 10px; cursor: pointer; border: 0; background: none; padding: 0 2px; }
#props .ps > .pb { padding: 2px 10px 9px; }
#props .ps.shut > .pb { display: none; }
#props .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 3px 0; }
#props .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 6px; margin: 3px 0; }
#props .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 3px 0; }
#props .nf { display: flex; align-items: center; border: 1px solid var(--rule); background: var(--board); height: 22px; min-width: 0; }
#props .nf:focus-within { border-color: #2c62c4; }
#props .nf > span { flex: none; padding: 0 4px 0 5px; color: var(--ink2); cursor: ew-resize; font-size: 10px; user-select: none; }
#props .nf > input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 0 2px; font-size: 11px; outline: none; }
#props .nf > i { flex: none; font-style: normal; color: var(--ink3); padding-right: 4px; font-size: 9.5px; }
#props .nf.mixed > input { background: #fff4dc; }
#props .nf.dis { opacity: .55; }
#props .nf.lock > i::before { content: "⚿ "; }
#props .lab { color: var(--ink2); font-size: 10px; margin: 6px 0 2px; }
#props .seg2 { display: flex; margin: 3px 0; }
#props .seg2 > button { flex: 1; padding: 2px 3px; font-size: 10px; margin-left: -1px; letter-spacing: .02em; }
#props .seg2 > button:first-child { margin-left: 0; }
#props .seg2 > button.on { background: var(--ink); color: var(--board); }
#props .seg2 > button[disabled] { opacity: .4; cursor: not-allowed; background: var(--board); color: var(--ink); }
#props .seg2 > button small { display: block; font-size: 8.5px; opacity: .75; }
#props .rowl { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px; align-items: center; margin: 3px 0; }
#props .rowl > label { color: var(--ink2); font-size: 10px; }
#props .btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; }
#props .btns > button { font-size: 10px; padding: 2px 7px; }
#props .note { color: var(--ink2); font-size: 9.5px; margin: 4px 0; line-height: 1.5; }
#props .note.why { color: #2c62c4; }
#props .note.bad { color: var(--acc); }
#props .note.warn { color: #9a6400; }
#props .mats { display: flex; flex-direction: column; margin: 3px 0; }
#props .mats > button { display: flex; align-items: center; gap: 6px; text-align: left; border: 0; border-bottom: 1px solid var(--rule); background: none; padding: 3px 2px; font-size: 10px; letter-spacing: 0; }
#props .mats > button.on { background: #e5ecf7; }
#props .mats > button.off { color: var(--ink3); }
#props .mats > button .o { width: 9px; height: 9px; border: 1px solid var(--ink); border-radius: 50%; flex: none; }
#props .mats > button.on .o { background: var(--ink); }
#props .mats > button .fc { margin-left: auto; }
#props .mats > button > i { width: 12px; height: 12px; border: 1px solid var(--rule); flex: none; }   /* (自立架 物料: its swatch) */
#props .fixes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 3px 0; }
#props .fixes > button { text-align: left; padding: 3px 5px; font-size: 10px; letter-spacing: 0; }
#props .fixes > button small { display: block; color: var(--ink2); font-size: 8.5px; }
#props .fixes > button.on { background: var(--ink); color: var(--board); }
#props .fixes > button.on small { color: var(--board); opacity: .75; }
#props .fixes > button.no { background: repeating-linear-gradient(45deg, rgba(200,57,43,.07) 0 4px, transparent 4px 8px); color: var(--ink3); }
#props .sw { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0; width: auto; height: auto; vertical-align: baseline; }   /* (not the legend's 9 × 3 px .sw of style.css) */
#props .sw > button { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 10px; letter-spacing: 0; }
#props .sw > button i { width: 11px; height: 11px; border: 1px solid var(--ink); display: inline-block; }
#props .sw > button.on { outline: 2px solid #2c62c4; outline-offset: -1px; }
#props .kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; font-size: 10px; margin: 3px 0; }
#props .kv > span:nth-child(odd) { color: var(--ink2); }
#props .stat { border: 1px solid var(--rule); background: var(--board); padding: 5px 7px; font-size: 10px; margin: 5px 0; line-height: 1.55; }
#props .ckl { display: flex; align-items: baseline; gap: 6px; font-size: 10px; padding: 2px 0; cursor: pointer; }
#props .ckl:hover { background: var(--hl); }
#props .ckl i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink3); transform: translateY(-1px); }
#props .ckl.bad i { background: var(--acc); } #props .ckl.warn i { background: #d69a1e; } #props .ckl.ok i { background: var(--ok); }
#props .ckl span { flex: 1; }
#props .ckl b { color: var(--ink2); font-weight: 400; }
#props .ckl button { font-size: 9.5px; padding: 0 5px; }
#props .portal { margin: 0 -10px; }
#props .portal > .sec { border-top: 0; }
#props .portal > .sec[hidden] { display: block !important; }
#props .old { margin: 0 -10px; }
#props .old .bg { display: inline-flex; flex-wrap: wrap; max-width: 100%; }
#props .old .bg > button { margin-bottom: -1px; }   /* (the old groups' button rows wrap in the narrow panel) */
#props .old .ig { border-top: 0; }
#props .old .ig > h4 { display: none; }
#props .old.keeph .ig > h4 { display: flex; }
#props .empty { padding: 14px 10px; color: var(--ink2); }

/* ---------- the sheet's overlay and the drawer ---------- */
#ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#sheet.wfv #cv { cursor: default; }
#sheet.wfv.mv #cv { cursor: move; }
#sheet.wfv.rs-ew #cv { cursor: ew-resize; } #sheet.wfv.rs-ns #cv { cursor: ns-resize; }
#sheet.wfv.rs-nwse #cv { cursor: nwse-resize; } #sheet.wfv.rs-nesw #cv { cursor: nesw-resize; }
#sheet.wfv.rot #cv { cursor: alias; } #sheet.wfv.no #cv { cursor: not-allowed; } #sheet.wfv.ins #cv { cursor: crosshair; }
#ruler-x, #ruler-y { position: absolute; pointer-events: none; z-index: 2; }
#drawer { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; min-height: 32px; border-top: 1.5px solid var(--ink); background: var(--panel); }
#drawer .dbar { display: flex; align-items: center; gap: 8px; height: 31px; padding: 0 8px; flex: none; white-space: nowrap; overflow: hidden; }
#drawer .dbar .tg { border: 0; background: none; padding: 2px 4px; font-weight: 700; letter-spacing: .08em; }
#drawer .dbar .cnt { font-weight: 700; }
#drawer .dbar .cnt .bad { color: var(--acc); } #drawer .dbar .cnt .warn { color: #b07400; }
#drawer .dbar .peek { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 12px; color: var(--ink2); font-size: 10px; }
#drawer .dbar .peek span { cursor: pointer; } #drawer .dbar .peek span:hover { color: var(--ink); }
#drawer .grip { height: 5px; cursor: ns-resize; margin-top: -3px; flex: none; }
#drawer .dbody { flex: none; overflow: hidden; display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
#drawer .dtabs { display: flex; gap: 0; align-items: center; padding: 4px 8px; flex: none; flex-wrap: wrap; gap: 6px; }
#drawer .dtabs .seg2 { display: flex; }
#drawer .dtabs .seg2 > button { padding: 1px 8px; font-size: 10px; margin-left: -1px; }
#drawer .dtabs .seg2 > button.on { background: var(--ink); color: var(--board); }
#drawer .dmain { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: 180px minmax(0, 1fr); }
#drawer .dmain.one { display: block; }
#drawer .cats { padding: 4px 8px; border-right: 1px solid var(--rule); }
#drawer .cats button { display: block; width: 100%; text-align: left; margin: 0 0 4px; padding: 4px 6px; font-size: 10px; letter-spacing: 0; }
#drawer .cats button.on { background: #e5ecf7; border-color: #2c62c4; }
#drawer .cats button .n { float: right; font-weight: 700; }
#drawer .cats button small { display: block; color: var(--ink2); font-size: 8.5px; }
#drawer .list { padding: 2px 8px 10px; }
#drawer .lh { font-weight: 700; padding: 6px 0 2px; border-bottom: 1px solid var(--rule); display: flex; gap: 8px; }
#drawer .lh small { font-weight: 400; color: var(--ink2); margin-left: auto; }
#drawer .ck { display: grid; grid-template-columns: 12px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; padding: 2px 4px; font-size: 10px; border-bottom: 1px solid rgba(200,195,180,.4); cursor: pointer; }
#drawer .ck:hover, #drawer .ck.on { background: var(--hl); }
#drawer .ck i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
#drawer .ck.bad i { background: var(--acc); } #drawer .ck.warn i { background: #d69a1e; }
#drawer .ck .v { color: #9a6400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drawer .ck.bad .v { color: var(--acc); }
#drawer .ck .bc { color: #2c62c4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drawer .ck .who { font-size: 9px; }
#drawer .ck button { font-size: 9.5px; padding: 0 6px; white-space: nowrap; }
#drawer .hidl { padding: 4px 8px; color: #9a6400; font-size: 10px; border-bottom: 1px solid var(--rule); }
#drawer .cons { padding: 6px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
#drawer .cons .cg { border: 1px solid var(--rule); background: var(--board); padding: 6px 8px; }
#drawer .cons .cg b { display: block; }
#drawer .cons .cg div { font-size: 10px; color: var(--ink2); padding: 1px 0; }
#drawer .data { display: block; height: 100%; }
#drawer .data > #lower { display: grid !important; height: 100%; border: 0; }

/* ---------- dialogs ---------- */
.wfdlg { position: fixed; z-index: 70; inset: 0; background: rgba(28,33,39,.25); display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; }
.wfdlg > div { background: var(--panel); border: 1.5px solid var(--ink); box-shadow: 4px 4px 0 rgba(28,33,39,.2); width: min(560px, 92vw); max-height: 76vh; overflow: auto; padding: 0 0 10px; }
.wfdlg h3 { margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--ink); font-size: 12px; display: flex; }
.wfdlg h3 button { margin-left: auto; }
.wfdlg .dl { padding: 6px 12px; }
.wfdlg .dl .ig > h4 { display: none; }
.wfdlg .keys { display: grid; grid-template-columns: 90px 1fr 90px 1fr; gap: 2px 10px; padding: 8px 12px; font-size: 10.5px; }
.wfdlg .keys kbd { font: inherit; font-weight: 700; }
.wfdlg .keys .gh { grid-column: 1 / -1; color: var(--ink2); margin-top: 6px; letter-spacing: .08em; font-size: 9.5px; }
body.wfdrag, body.wfdrag * { user-select: none !important; -webkit-user-select: none !important; }

/* 霓虹管 · 曲線 (curves.js): the section's rows, its chips (全場 grey · 行 blue · 自己 filled), its readout */
.pill.site { color: var(--ink3); background: transparent; }
.pill.new.own { color: var(--board); background: var(--ok); border-color: var(--ok); }
#props .cvrow { grid-template-columns: 88px minmax(0, 1fr); }
#props .cvc { display: flex; align-items: center; gap: 4px; min-width: 0; }
#props .cvc > .seg2, #props .cvc > .nf, #props .cvc > .cvr { flex: 1; min-width: 0; }
#props .cvc > .pill { flex: none; }
#props .cvr { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
#props .cvr > .nf { flex: 1 1 64px; }
#props .cvr > button { font-size: 9.5px; padding: 1px 5px; }
#props .cvr > button.on, #props .btns > button.on { background: var(--ink); color: var(--board); }
#props .stat.cvsum.bad { border-color: var(--acc); color: var(--acc); }
#props .stat.cvsum.warn { border-color: #b07400; color: #9a6400; }
/* the classic panel (α4.4's #insp): Properties' own 龍鱗 sections shown in its ② 內容 group (app.js grpScales,
   shell.js SHELL.classicScales), drawn as they are in #props */
#insp .wfps .ps { border-top: 1px solid var(--rule); }
#insp .wfps .ps > h5 { display: flex; align-items: center; gap: 6px; margin: 0; padding: 7px 10px 5px; font-size: 11px; cursor: pointer; user-select: none; }
#insp .wfps .ps > h5 .tg { width: 10px; color: var(--ink2); font-weight: 400; }
#insp .wfps .ps > h5 .zh { font-weight: 400; color: var(--ink2); }
#insp .wfps .ps > h5 .r { margin-left: auto; display: flex; gap: 4px; align-items: center; }
#insp .wfps .ps > .pb { padding: 2px 10px 9px; }
#insp .wfps .ps.shut > .pb { display: none; }
#insp .wfps .ps.flash { background: var(--hl); }
#insp .wfps .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 3px 0; }
#insp .wfps .nf { display: flex; align-items: center; border: 1px solid var(--rule); background: var(--board); height: 22px; min-width: 0; }
#insp .wfps .nf:focus-within { border-color: #2c62c4; }
#insp .wfps .nf > span { flex: none; padding: 0 4px 0 5px; color: var(--ink2); cursor: ew-resize; font-size: 10px; user-select: none; }
#insp .wfps .nf > input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 0 2px; font-size: 11px; outline: none; }
#insp .wfps .nf > i { flex: none; font-style: normal; color: var(--ink3); padding-right: 4px; font-size: 9.5px; }
#insp .wfps .nf.mixed > input { background: #fff4dc; }
#insp .wfps .lab { color: var(--ink2); font-size: 10px; margin: 6px 0 2px; }
#insp .wfps .seg2 { display: flex; margin: 3px 0; }
#insp .wfps .seg2 > button { flex: 1; padding: 2px 3px; font-size: 10px; margin-left: -1px; letter-spacing: .02em; }
#insp .wfps .seg2 > button:first-child { margin-left: 0; }
#insp .wfps .seg2 > button.on, #insp .wfps .btns > button.on { background: var(--ink); color: var(--board); }
#insp .wfps .seg2 > button[disabled] { opacity: .4; cursor: not-allowed; background: var(--board); color: var(--ink); }
#insp .wfps .seg2 > button small { display: block; font-size: 8.5px; opacity: .75; }
#insp .wfps .rowl { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 4px; align-items: center; margin: 3px 0; }
#insp .wfps .rowl > label { color: var(--ink2); font-size: 10px; }
#insp .wfps .btns { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; }
#insp .wfps .btns > button { font-size: 10px; padding: 2px 7px; }
#insp .wfps .note { color: var(--ink2); font-size: 9.5px; margin: 4px 0; padding: 0; line-height: 1.5; }
#insp .wfps .stat { border: 1px solid var(--rule); background: var(--board); padding: 5px 7px; font-size: 10px; margin: 5px 0; line-height: 1.55; }
#insp .wfps .chk { display: block; font-size: 10px; margin: 4px 0; }