/* PlanSift UX layer (ws/ux): shell layout, component polish, welcome card, legend, guided demo, presenter mode. Loaded after app.css and tokens.css. Rules here refine look and hierarchy only: no row heights of virtual lists change (the JS computes positions from them) and no element ids / classes the viewer logic uses are renamed. Sections: 1 base 2 shell 3 sidebar 4 status strip 5 controls 6 drawing 7 factsheet table 8 evidence panel 9 dock + overlays 10 views 11 welcome / legend / strip extras 12 guided demo 13 presenter 14 responsive / motion / print */ /* ------------------------------------------------------------------ 1 base */ body{font:var(--fs-md)/1.45 var(--font);background:var(--bg);color:var(--ink);font-feature-settings:"cv05","cv08","ss03";text-rendering:optimizeLegibility} h2{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em} h3{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3)} ::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)} *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-3) 45%,transparent) transparent} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)} code,.mono{font-family:var(--mono);font-size:12px} .num,.c-val,.cval,.big,.tn-val,.wn-val,.cnt b,.xc-v,.dc-v,.ecoval{font-variant-numeric:tabular-nums lining-nums} svg.ic{width:1.15em;height:1.15em} kbd{font:600 11.5px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-sm);padding:1px 6px;background:var(--surface-2);color:var(--ink-2)} /* ------------------------------------------------------------------ 2 shell: sidebar | stage (status strip, workspace, dock) */ .app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100vh;height:100dvh} .stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)} .main{gap:0;padding:0} .left{background:var(--page-bg);background-image:radial-gradient(var(--grid-dot) 1px,transparent 1.2px);background-size:22px 22px} .view-extra{background:var(--bg)} .right{background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 24px -18px rgba(23,26,44,.25);z-index:2;min-width:340px} .splitter.v{width:9px;margin:0 -4px} .splitter.h{height:9px;margin:-4px 0} .splitter::after{content:"";position:absolute;inset:0;margin:auto;border-radius:3px;background:var(--line);opacity:0;transition:opacity var(--t) var(--ease)} .splitter.v::after{width:3px;height:36px} .splitter.h::after{height:3px;width:36px} .splitter:hover::after,.splitter:focus-visible::after{opacity:1;background:var(--accent)} .splitter:hover,.splitter:focus-visible{background:transparent} /* ------------------------------------------------------------------ 3 sidebar */ .rail{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) var(--s2) var(--s2);background:linear-gradient(180deg,var(--rail-a),var(--rail-b));border-right:1px solid var(--line);min-height:0;min-width:0;z-index:3} .rail-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:2px 4px 0 6px;min-height:32px} .brand{font-size:17px;gap:8px;margin:0} .brand svg.ic{width:28px;height:28px;border-radius:8px;box-shadow:var(--brand-glow)} .rail-toggle{border:0;background:transparent;color:var(--ink-3);padding:6px;border-radius:var(--r);display:inline-flex} .rail-toggle:hover{background:var(--surface-3);color:var(--ink)} .rail-project{display:flex;flex-direction:column;gap:3px;padding:0 4px} .rail-lbl,.navgroup{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)} .rail-lbl{padding-left:4px} .rail .field select{max-width:none;width:100%} .field select{height:32px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:var(--r);background-color:var(--surface);font-weight:500;box-shadow:var(--e1);appearance:none;-webkit-appearance:none;text-overflow:ellipsis; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 15px) 14px,calc(100% - 10px) 14px;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .field select:hover{border-color:var(--accent-line)} .viewtabs{flex:1;min-height:0;overflow:auto;flex-direction:column;gap:1px;background:transparent;padding:0 0 var(--s2);border-radius:0;margin:0} .navgroup{padding:10px 10px 4px} .navgroup:first-child{padding-top:2px} .vtab{position:relative;display:flex;align-items:center;width:100%;border:0;background:transparent;cursor:pointer;justify-content:flex-start;gap:10px;padding:7px 10px!important;border-radius:var(--r)!important;color:var(--ink-2);font-weight:500;text-align:left;line-height:1.25;min-height:34px;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)} .vtab svg.ic{width:18px;height:18px;color:var(--ink-3);flex:none} .vtab>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vtab:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)!important;color:var(--ink)} .vtab.on{background:var(--surface)!important;color:var(--accent);font-weight:600;box-shadow:var(--e1),0 0 0 1px var(--line-2)} .vtab.on svg.ic{color:var(--accent)} .vtab.on::before{content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)} .vbadge{background:var(--surface-3);color:var(--ink-2);border:1px solid var(--line);font-size:11px;font-weight:700;padding:0 6px;border-radius:var(--r-pill);margin:0;font-variant-numeric:tabular-nums;line-height:17px} .vtab[data-view="attn"] .vbadge,.vtab[data-view="rules"] .vbadge{background:var(--verify-bg);color:var(--verify-ink);border-color:var(--verify-line)} .vtab.on .vbadge{background:var(--surface);border-color:var(--accent-line);color:var(--accent)} .rail-foot{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) 4px 2px;border-top:1px solid var(--line-2)} .rail-meta{display:flex;flex-wrap:wrap;gap:4px} .rail-demo{justify-content:center;height:38px;font-size:var(--fs-md);border-radius:var(--r-lg)} .btn.primary.rail-demo,.ux-w-actions .btn.primary,.tour-nav .btn.primary{background:var(--brand-grad);border-color:transparent;color:#fff;box-shadow:var(--brand-glow)} .btn.primary.rail-demo:hover,.ux-w-actions .btn.primary:hover,.tour-nav .btn.primary:hover{filter:brightness(1.08);background:var(--brand-grad)} .rail-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2px} .rail-tools>button{border:0;background:transparent;color:var(--ink-2);padding:6px;border-radius:var(--r);display:inline-flex} .rail-tools>.langsw{flex:none} .rail-tools>button:hover{background:var(--surface-3);color:var(--ink)} .rail-tools>button[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent)} .langsw{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)} .langsw button{border:0!important;background:transparent;padding:4px 8px;font-size:12px;font-weight:600;color:var(--ink-3);border-radius:0!important;line-height:1.3} .langsw button.on,.langsw button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:var(--e1)} /* collapsed sidebar: icons only */ :root[data-rail="mini"]{--rail-w:var(--rail-mini)} :root[data-rail="mini"] .rail{padding-left:6px;padding-right:6px;align-items:stretch} :root[data-rail="mini"] .brand .word,:root[data-rail="mini"] .rail-project,:root[data-rail="mini"] .navgroup,:root[data-rail="mini"] .vtab>span:first-of-type,:root[data-rail="mini"] .rail-demo span,:root[data-rail="mini"] .langsw,:root[data-rail="mini"] .rail-meta{display:none} :root[data-rail="mini"] .rail-head{flex-direction:column;gap:6px;padding:0} :root[data-rail="mini"] .vtab{justify-content:center;padding:9px 0!important} :root[data-rail="mini"] .vtab .vbadge{position:absolute;top:1px;right:1px;font-size:10px;padding:0 4px;line-height:14px} :root[data-rail="mini"] .vtab.on::before{left:-6px} :root[data-rail="mini"] .rail-tools{flex-direction:column} :root[data-rail="mini"] .rail-demo{padding:0} :root[data-rail="mini"] .viewtabs{gap:3px} /* ------------------------------------------------------------------ 4 status strip */ .topbar{overflow:hidden;flex-wrap:nowrap;gap:10px;padding:0 var(--s3);min-height:56px;height:56px;background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:4} .sheet-pick{position:absolute;left:62px;top:var(--s3);z-index:3} .sheet-pick select{max-width:230px;box-shadow:var(--e2);border-color:var(--line)} #app:not([data-view="drawing"]) .sheet-pick,#app[data-compare-only="1"] .sheet-pick{display:none} .counters{flex-wrap:nowrap;gap:1px;flex:none;padding:0;border:0;background:transparent} .cnt{position:relative;border:0;background:transparent;padding:4px 9px;border-radius:var(--r);gap:6px;color:var(--ink-2);line-height:1.2;height:34px;cursor:pointer;transition:background var(--t-fast) var(--ease)} .cnt:hover{background:var(--surface-2)} span.cnt:not([role="button"]){cursor:default} .cnt b{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .c-found svg{color:var(--ok)} .c-nf svg{color:var(--nf)} .c-conflict svg{color:var(--conflict)} .c-find svg{color:var(--ok)} .c-find.bad svg{color:var(--alarm)} .cnt .lbl{color:var(--ink-3);font-size:12.5px} /* KPI layout: icon + number, a micro label underneath (fits a 1280 px projector without dropping the words) */ .cnt,.topbar .cnt{display:inline-grid;grid-template-columns:auto auto;justify-content:start;align-content:center;column-gap:5px;row-gap:1px;height:42px;padding:2px 10px} .cnt .lbl{grid-column:1 / -1;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.055em;line-height:1.15;color:var(--ink-3)} .cnt .lbl.faint{display:none} .cnt b{line-height:1.1} .topbar .cnt.cov{column-gap:9px;padding:2px 16px 2px 7px} .cnt.cov .lbl{grid-column:2} .cnt.cov b{font-size:17px;grid-column:2} .cnt svg.ic{width:16px;height:16px} button.cnt{cursor:pointer;transition:background var(--t-fast) var(--ease)} button.cnt:hover{background:var(--surface);box-shadow:var(--e1)} .cnt.cov{order:-1;padding:2px 16px 2px 7px;margin-right:6px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--e1),0 0 0 1px var(--line)} .cnt.cov:hover{background:var(--surface);box-shadow:var(--e2),0 0 0 1px var(--accent-line)} .cnt.cov .ux-meter{order:3} /* coverage ring: the share of mandatory parameters with a value (js/ui sets --pct) */ .ux-ring{grid-row:1 / span 2;grid-column:1;align-self:center;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--pct,0) * 1%),var(--surface-3) 0);-webkit-mask:radial-gradient(circle,transparent 9px,#000 9.6px);mask:radial-gradient(circle,transparent 9px,#000 9.6px)} .ux-ring.part{background:conic-gradient(var(--verify) calc(var(--pct,0) * 1%),var(--surface-3) 0)} .c-guess svg{color:var(--ok)} .c-guess b{color:var(--ok-ink)} .c-guess.bad,.c-find.bad{background:var(--alarm-bg)} .c-guess.bad b,.c-find.bad b{color:var(--alarm-ink)} .ux-meter{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;flex:none} .ux-meter i{display:block;height:100%;background:var(--ok);border-radius:3px;transition:width var(--t-slow) var(--ease)} .badge{font-size:11.5px;padding:2px 8px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} #run-badge{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)} .btns{gap:6px;flex:none} .topbar .btns button span{display:inline} .topbar .btns #btn-infer span,.topbar .btns #btn-corr>span{display:none} /* first load: a thin progress line under the strip until the first project is on screen */ .app:not(.ready) .topbar::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:34%;border-radius:2px;background:var(--accent);animation:ux-load 1.15s var(--ease) infinite} @keyframes ux-load{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}} /* ------------------------------------------------------------------ 5 controls: buttons, chips, inputs */ .btn,.topbar button,.tool{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:6px 11px;font-weight:500;color:var(--ink);box-shadow:var(--e1);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)} .btn:hover,.topbar button:hover,.tool:hover{background:var(--surface-2);border-color:var(--accent-line)} .btn:active,.topbar button:active,.tool:active{transform:translateY(.5px);box-shadow:none} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600;box-shadow:0 1px 2px rgba(67,56,202,.3),0 4px 12px -4px rgba(67,56,202,.5)} .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);filter:none} .btn.small{padding:3px 9px;font-size:12px;border-radius:var(--r-sm)} .btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2)} .btn.ghost:hover{background:var(--surface-3);border-color:transparent;color:var(--ink)} .topbar .cnt{box-shadow:none;font-weight:400;border:0} .topbar button.cnt:not(.cov){background:transparent} .topbar button.cnt:not(.cov):hover{background:var(--surface-2);box-shadow:none} .topbar .c-find.bad{background:var(--alarm-bg)} .topbar .cnt.cov{box-shadow:var(--e1),0 0 0 1px var(--line)} .chip{padding:2px 8px;font-size:11.5px;font-weight:600;border:1px solid var(--c-line,var(--line));line-height:1.35} .chip svg.ic{width:13px;height:13px} .keychip{border-radius:var(--r-sm)} .editin,.search,.runform select,.runform input{border-radius:var(--r)} .editin{background:var(--surface);border-color:var(--line);box-shadow:inset 0 1px 2px rgba(23,26,44,.05)} .editin:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)} .segs{box-shadow:var(--e1);border-radius:var(--r)} .seg{padding:5px 11px;font-weight:500} .seg.on{font-weight:600} /* ------------------------------------------------------------------ banners, document strip */ .banner{margin:var(--s2) var(--s3) 0;padding:8px 12px;border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--accent-bg);box-shadow:var(--e1);align-items:center} .banner.warn{background:var(--verify-bg);color:var(--verify-ink);border-color:var(--verify-line)} .banner.warn>svg.ic:first-child{color:var(--verify)} .banner .btext>div{margin:1px 0;border:0;background:transparent;padding:0;border-radius:0} .docstrip{background:transparent;border-bottom:0;padding:6px var(--s3) 0;min-height:0} .dsum{color:var(--ink-3);font-size:12px} .dchip{border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--e1);padding:2px 10px 2px 7px;font-size:12px} .dchip:hover,.dchip[aria-expanded="true"]{border-color:var(--accent-line);border-left-color:var(--accent-line)} .docstrip>button:first-child,.docstrip .dtoggle{box-shadow:none;border-color:transparent;background:transparent} /* ------------------------------------------------------------------ 6 drawing */ .plan-stage{background:var(--paper);box-shadow:var(--paper-shadow);border-radius:2px} .plan-tools{left:var(--s3);top:var(--s3);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2);padding:3px} .plan-tools .tool{border:0;box-shadow:none;background:transparent;padding:7px;border-radius:var(--r);color:var(--ink-2)} .plan-tools .tool:hover{background:var(--surface-3);color:var(--ink)} .plan-tools .tool.on{background:var(--accent-bg);color:var(--accent)} .plan-status{left:var(--s3);bottom:var(--s3);font:600 11px var(--mono);padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);box-shadow:var(--e1);opacity:1;color:var(--ink-2)} .plan-tip{border-radius:var(--r-lg);box-shadow:var(--e3);padding:8px 11px;border-color:var(--line)} .plan-msg,.plan-pickhint{border-radius:var(--r-lg);box-shadow:var(--e2);top:58px;max-width:min(560px,80%);border:1px solid var(--verify-line)} .plan-pickhint{border-color:var(--accent-line)} .backpill{box-shadow:var(--e2);border-radius:var(--r-pill)} /* evidence boxes: confident values recede, values that need a look carry the ink; the selected box never covers the number it proves */ .box{stroke-width:1.4;--bx-fill:color-mix(in srgb,var(--c,var(--ok)) 9%,transparent);transition:stroke-width var(--t-fast) var(--ease),opacity var(--t) var(--ease)} .box.st-ok{--bx-fill:color-mix(in srgb,var(--ok) 4%,transparent);stroke-width:1.1;stroke-opacity:.72} .box.st-verify{stroke-width:1.8;--bx-fill:color-mix(in srgb,var(--verify) 12%,transparent)} .box.st-conflict{stroke-width:1.9;stroke-dasharray:7 3 2 3} .box.st-not_found{stroke-dasharray:4 3} .box.st-alarm{stroke-width:2.4} .box:hover,.box.hover{stroke-width:2.6;stroke-opacity:1;filter:none} .has-hl .box:not(.sel):not(.leaf):not(.strong):not(.soft):not(.hover){opacity:.32} .box.sel{stroke-width:2.4;stroke-opacity:1;opacity:1;fill:none;--bx-fill:transparent} .box.leaf{stroke:var(--c);--c:initial;stroke-width:1.6;stroke-opacity:1;fill:var(--bx-fill)} .box.leaf.st-ok{--c:var(--ok)} .box.leaf.st-verify{--c:var(--verify)} .box.leaf.st-conflict{--c:var(--conflict)} .box.leaf.st-not_found{--c:var(--nf)} .box.leaf.st-alarm{--c:var(--alarm)} .box.leaf.st-assumed{--c:var(--assumed)} .box.strong{stroke-width:3;stroke:var(--alarm);fill:color-mix(in srgb,var(--alarm) 10%,transparent)} .halo{stroke:var(--accent);stroke-width:2;stroke-opacity:.95;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 70%,transparent));animation:ux-halo 1.1s var(--ease) 1} .halo.leaf{stroke:var(--accent);stroke-width:1.3;stroke-dasharray:5 3;filter:none;animation:none;stroke-opacity:.9} .halo.cand{stroke:var(--verify);stroke-width:1.5;stroke-opacity:.85;stroke-dasharray:6 4;filter:none;animation:none} .cand-box{stroke-width:1.3;stroke-opacity:.8} .halo.alarm{stroke:var(--alarm);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--alarm) 70%,transparent))} @keyframes ux-halo{0%{stroke-width:12;stroke-opacity:.15}60%{stroke-width:2;stroke-opacity:1}100%{stroke-width:2;stroke-opacity:.95}} .emptycard{border-radius:var(--r-xl);box-shadow:var(--e3);border-color:var(--line);padding:28px 30px;gap:10px} /* ------------------------------------------------------------------ 7 factsheet table */ .tbl-tools{padding:10px var(--s3) 8px;gap:var(--s2);border-bottom:0} .fchip{padding:3px 10px;font-size:12px;font-weight:500;border-color:var(--line);background:var(--surface);color:var(--ink-2);transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .fchip:hover{border-color:var(--accent-line);color:var(--ink)} .fchip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;box-shadow:0 1px 2px rgba(67,56,202,.3)} .fchip .n{font-weight:700;opacity:.8} .searchbox{height:32px;border-radius:var(--r);background:var(--surface-2);border-color:var(--line-2);padding:0 10px;gap:6px;color:var(--ink-3);transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)} .searchbox:focus-within{outline:0;border-color:var(--focus);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)} .search{color:var(--ink)} .tbl-head{height:28px;font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--surface);border-bottom:1px solid var(--line);border-top:1px solid var(--line-2);color:var(--ink-3)} .tbl-head .c-val{text-align:right} .row{border-bottom:1px solid var(--line-2);border-left-width:3px;transition:background var(--t-fast) var(--ease)} .row:hover,.row.hover{background:var(--surface-2)} .row.sel{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent);border-left-color:var(--accent)} .row .c-state svg.ic{width:16px;height:16px} .row.st-ok .c-state svg{color:color-mix(in srgb,var(--ok) 78%,var(--surface))} .row.st-not_found .c-val,.row.st-conflict .c-val{font-weight:500} .row.st-not_found .pname{color:var(--ink-2)} .pname{font-weight:500;color:var(--ink)} .row.sel .pname{font-weight:600} .c-val{font-weight:600;color:var(--ink)} .c-val .dash{color:var(--nf-ink);background:repeating-linear-gradient(135deg,var(--nf-bg) 0 4px,transparent 4px 8px);border-radius:var(--r-sm);padding:1px 7px;font-size:11.5px;font-weight:500} .row.st-conflict .c-val .dash{color:var(--conflict-ink);background:var(--conflict-bg)} .ent{font-size:11px;color:var(--ink-3)} .c-meth svg.ic{color:var(--ink-3);width:15px;height:15px} .c-src{font:500 11.5px var(--mono);color:var(--ink-3)} .bar{height:5px;border-radius:3px;background:var(--surface-3)} .bar .fill{border-radius:3px} .st-ok .bar .fill,.row.st-ok .bar .fill{background:color-mix(in srgb,var(--ok) 80%,var(--surface))} .c-conf .num{color:var(--ink-2);font-size:12px;min-width:2ch} .row.group{background:var(--surface-2);font-weight:600;font-size:12.5px;color:var(--ink);border-bottom:1px solid var(--line-2)} .row.group .gcount{font-weight:500} .tbl-empty{padding:40px 24px;color:var(--ink-3)} .tag{border-radius:var(--r-sm);font-size:11px;font-weight:600;padding:0 5px} /* ------------------------------------------------------------------ 8 evidence panel: value card, then proof, then the rest */ .provpanel:has(>.pempty){height:auto;min-height:0;max-height:46%;flex:none} .provpanel{border-top:1px solid var(--line);background:var(--surface-2);box-shadow:inset 0 6px 8px -8px rgba(23,26,44,.18)} .prov{padding:var(--s3) var(--s3) var(--s5);display:flex;flex-direction:column;gap:var(--s2)} .prov>*{margin:0} .phead{border:1px solid var(--line);border-left:4px solid var(--c,var(--line));border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1);padding:12px 14px 12px 14px;margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);row-gap:2px} .ptitle{grid-column:1 / -1;gap:10px;align-items:flex-start} .ptitle h2{font-size:var(--fs-lg);line-height:1.25} .ptitle .muted{font-size:12.5px} .ptitle .state{width:20px;height:20px;margin-top:1px} .pkey{grid-column:1 / -1;margin:0;gap:6px;flex-wrap:wrap;min-height:26px} .pkey code{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;flex:1 1 auto;min-width:0} .pvalue{grid-column:1 / -1;margin-top:4px;gap:10px;align-items:baseline} .pvalue .big{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)} .pvalue .big.dash{font-size:var(--fs-xl);font-weight:600;color:var(--nf-ink)} .pvalue .chip{align-self:center;padding:3px 10px;font-size:12px} .facts{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line-2);font-size:var(--fs-sm)} .facts dt{color:var(--ink-3)} .facts dd{color:var(--ink);font-weight:500;min-width:0;flex-wrap:wrap} .facts dd.mono{font-weight:400;color:var(--ink-3);font-size:11px} /* registry internals and raw box fractions are not evidence a reader needs (the key stays in the header, the place is the crop) */ .facts dd.mono.small,.facts dt:has(+ dd.mono.small),.src-head .mono{display:none} .bar.wide{width:96px;height:6px} .psec{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1)} .psec h3{margin-bottom:8px} .src{gap:12px;margin-bottom:0;align-items:stretch} .src+.src{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)} .src-main{min-width:0;flex:1 1 180px} .src-head{overflow-wrap:anywhere;line-height:1.35} .src-head strong{font-weight:600} .src-head .mono{font-size:10.5px;color:var(--ink-3);opacity:.75} .quote{margin:6px 0 8px;padding:6px 10px;background:var(--surface-2);border-left:3px solid var(--hi);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink);font-size:12.5px} .crop{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--e1);background-color:var(--paper)} .crop-box{border:2px solid var(--accent);border-radius:3px;box-shadow:0 0 0 1px #fff,0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)} .cand{padding:6px 0;border-bottom:1px solid var(--line-2)} .cand:last-child{border-bottom:0} .warn{border-radius:var(--r);padding:7px 10px;border:1px solid var(--verify-line)} .warn.w-conflict{border-color:var(--conflict-line)} .warn.w-ratio_outlier{border-color:var(--alarm-line)} .why{border-radius:var(--r);padding:8px 10px;border:1px solid var(--verify-line)} .alarmref{border-radius:var(--r);background:var(--surface-2)} .pempty{padding:var(--s4);border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink-2);display:flex;flex-direction:column;gap:6px;align-items:flex-start} .pempty h2{font-size:var(--fs-lg)} details.psec.edit>summary{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3)} details.psec.edit[open]>summary{margin-bottom:8px} .tree{font-size:12.5px} .tn{border-radius:var(--r-sm);padding-top:4px;padding-bottom:4px} .tn:hover{background:var(--surface-2)} .tn.weak{background:color-mix(in srgb,var(--verify-bg) 70%,transparent)} .formula{font-size:12px} /* ------------------------------------------------------------------ 9 dock, toasts, dialogs, menus */ .bottom{border-top:1px solid var(--line);box-shadow:0 -6px 16px -14px rgba(23,26,44,.3);z-index:3;max-height:30vh} .bhead{padding:4px var(--s3);border-bottom-color:var(--line-2);min-height:38px} .btab{padding:6px 10px;color:var(--ink-2);font-weight:500;border-radius:var(--r) var(--r) 0 0} .btab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)} .btab .n{font-weight:700;color:var(--ink-2)} .btab .n.alert{background:var(--alarm);color:#fff} .bbody{padding:var(--s3)} .gcard{border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1);padding:10px 12px;transition:box-shadow var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)} .gcard:hover{box-shadow:var(--e2);border-color:var(--accent-line);transform:translateY(-1px)} .gcard.sel{outline:2px solid var(--accent);outline-offset:1px} .gcard.sev-alarm{border-color:var(--alarm-line);background:color-mix(in srgb,var(--alarm-bg) 55%,var(--surface))} .gcard.sev-warn{border-color:var(--verify-line)} .toasts{right:var(--s4);bottom:var(--s4);gap:var(--s2)} .toast{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--e3);padding:10px 12px;animation:ux-rise var(--t-slow) var(--ease)} .toast .btn{background:var(--surface-2);color:var(--ink)} .toast.alarm,.toast.error{background:var(--surface);color:var(--ink);border-left-color:var(--alarm)} .toast.ok{background:var(--surface);color:var(--ink);border-left-color:var(--ok)} .toast.warn{background:var(--surface);color:var(--ink);border-left-color:var(--verify)} @keyframes ux-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .modal{background:var(--scrim);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:ux-fade var(--t) var(--ease)} .modal-card{border-radius:var(--r-xl);box-shadow:var(--e3);border:1px solid var(--line);padding:20px 22px;animation:ux-pop var(--t-slow) var(--ease)} @keyframes ux-fade{from{opacity:0}to{opacity:1}} @keyframes ux-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .keys{gap:7px 16px} .menu{border-radius:var(--r-lg);box-shadow:var(--e3);padding:5px;border-color:var(--line);animation:ux-pop var(--t) var(--ease)} .menu button{padding:8px 12px;border-radius:var(--r);font-weight:500} .menu button:hover:not(:disabled){background:var(--accent-bg);color:var(--accent)} .dropzone{border-radius:var(--r-xl);backdrop-filter:blur(4px)} .diffcard{border-radius:var(--r-lg);box-shadow:var(--e3);border-color:var(--line);border-left:4px solid var(--accent);padding:12px 14px;left:calc(var(--rail-w) + var(--s4));bottom:var(--s4);animation:ux-rise var(--t-slow) var(--ease)} .drawer{box-shadow:var(--e3)} /* ------------------------------------------------------------------ 10 views (light touch: headings, cards, canvases) */ .xview{padding:var(--s4)} .xview h2{font-size:var(--fs-xl);letter-spacing:-.01em} .tmhost,.daghost,.wfhost,.v3host,.dagside,.rcat,.fcard,.ecosec{border-radius:var(--r-lg);box-shadow:var(--e1);border-color:var(--line)} .fcard{border-left-width:4px} .whyhost{background-color:var(--page-bg);background-image:radial-gradient(var(--grid-dot) 1px,transparent 1.2px);background-size:22px 22px} .wnode{border-width:1.5px;border-radius:var(--r-lg);box-shadow:var(--e2);padding:8px 10px} .wnode.focus{border-width:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 24%,transparent),var(--e2)} .wnode.weak{box-shadow:0 0 0 3px var(--hi),var(--e2)} .whysum{border-bottom-color:var(--line-2)} .whyside{box-shadow:-8px 0 24px -18px rgba(23,26,44,.25)} .attnview,.xcview,.cmpview,.rbview{background:var(--surface)} .attn-head h2,.xc-title h2{font-size:var(--fs-xl)} .attn-row{border-left-width:3px;transition:background var(--t-fast) var(--ease)} .attn-row.sel{box-shadow:inset 3px 0 0 var(--accent);border-left-color:var(--accent)} .attn-decision{border-top:1px solid var(--line-2);padding:10px 12px} .attn-prog{height:8px;border-radius:4px} .chip.kind.k-alarm{border-color:var(--alarm-line)} .chip.kind.k-conflict{border-color:var(--conflict-line)} .chip.kind.k-contradicted{border-color:var(--verify-line)} .cov-bar{border-radius:var(--r-sm);height:14px;border-color:var(--line-2)} /* room book: a rail only where a cell needs a look (same rule as the factsheet table) */ .rb-cell.st-ok{--c:transparent} .rb-row.group{font-weight:600} .rb-head{font-weight:600;letter-spacing:.04em} .tmlegend .sw{border-radius:3px} /* quantity tiles: tints, not walls of colour (the label and the percentage carry the meaning) */ .tmn rect{fill-opacity:.6;rx:4px} .tmn:hover rect,.tmn:focus-visible rect{fill-opacity:.8} /* ------------------------------------------------------------------ 11 strip extras, legend, welcome card */ .ux-strip{display:flex;align-items:center;gap:6px;flex:none} .ux-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:var(--r-pill);border:1px solid var(--c-line,var(--line));background:var(--c-bg,var(--surface));color:var(--c-ink,var(--ink-2));font-weight:600;font-size:12.5px;white-space:nowrap;box-shadow:var(--e1);cursor:pointer;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)} .ux-pill:hover{box-shadow:var(--e2);transform:translateY(-1px)} .ux-pill svg.ic{width:15px;height:15px;color:var(--c,currentColor)} .ux-pill.attn{--c:var(--verify);--c-bg:var(--verify-bg);--c-ink:var(--verify-ink);--c-line:var(--verify-line)} .ux-pill.alarm{--c:var(--alarm);--c-bg:var(--alarm-bg);--c-ink:var(--alarm-ink);--c-line:var(--alarm-line)} .ux-pill.alarm.new{animation:ux-attn 1.4s var(--ease) 2} .ux-pill.calm{--c:var(--ok);--c-bg:var(--surface);--c-ink:var(--ink-2);font-weight:500} .ux-pill.quiet{font-weight:500;color:var(--ink-2)} @keyframes ux-attn{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--alarm) 50%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--alarm) 0%,transparent)}} .ux-pill.cost{font-variant-numeric:tabular-nums lining-nums;color:var(--ink)} .ux-pill.cost svg.ic{color:var(--hi)} .ux-pill.cost .lbl{font-weight:500;color:var(--ink-3)} .ux-pill.cost.part{border-style:dashed} .ux-xlsx{color:var(--ok-ink)} .ux-xlsx svg.ic{color:var(--ok)} .ux-pop{position:fixed;z-index:76;width:min(430px,94vw);max-height:min(76vh,640px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e3);padding:16px 18px;animation:ux-pop var(--t) var(--ease)} .ux-pop h2{font-size:var(--fs-lg);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px} .ux-pop h3{margin:12px 0 6px} .ux-leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .ux-leg li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;font-size:12.5px;color:var(--ink-2)} .ux-leg li svg.ic{width:18px;height:18px;color:var(--c,var(--ink-3));margin-top:1px} .ux-leg li b{color:var(--ink);font-weight:600} .ux-confdemo{display:flex;align-items:center;gap:8px;margin:4px 0} .ux-note{font-size:12.5px;color:var(--ink-2);margin:10px 0 0;padding:8px 10px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2)} /* welcome: one sentence, three steps, one primary action */ .ux-welcome-wrap{position:fixed;inset:0;z-index:85;display:grid;place-items:center;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:ux-fade var(--t-slow) var(--ease);padding:var(--s4)} .ux-welcome{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--e3);padding:34px 38px 28px;animation:ux-pop var(--t-slow) var(--ease)} .ux-welcome::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--tile) 0 72%,var(--hi) 72% 100%)} .ux-w-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px} .ux-w-brand svg.ic{width:34px;height:34px;color:var(--tile);border-radius:9px;box-shadow:0 6px 16px -4px rgba(67,56,202,.55)} .ux-w-brand .word{font-size:20px} .ux-kicker{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:0 0 6px} .ux-welcome h1{font-size:30px;line-height:1.14;letter-spacing:-.025em;font-weight:700;margin:0 0 12px;max-width:21ch;color:var(--ink)} .ux-welcome h1 em{font-style:normal;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--hi) 55%,transparent) 62%)} .ux-w-text{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0 0 22px} .ux-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px;padding:0;list-style:none;counter-reset:s} .ux-steps li{counter-increment:s;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 14px 13px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px} .ux-steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font-weight:700;font-size:12.5px;margin-bottom:4px} .ux-steps b{font-size:14px;font-weight:600;color:var(--ink)} .ux-steps span{font-size:12.5px;color:var(--ink-2);line-height:1.45} .ux-w-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ux-w-actions .btn{height:40px;padding:0 16px;font-size:14px} .ux-w-actions .btn.primary{padding:0 18px} .ux-w-actions .sub{font-weight:500;opacity:.8;font-size:12.5px;margin-left:2px} .ux-w-close{position:absolute;right:14px;top:16px;border:0;background:transparent;color:var(--ink-3);padding:8px;border-radius:var(--r);display:inline-flex} .ux-w-close:hover{background:var(--surface-3);color:var(--ink)} /* the evidence thread: value card -> its box on the sheet (js/ui/thread.js) */ .ux-thread{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;opacity:0;transition:opacity var(--t) var(--ease);overflow:visible} .ux-thread.on{opacity:1} .ux-thread-under{fill:none;stroke:rgba(23,26,44,.4);stroke-width:3.6;stroke-linecap:round} .ux-thread-line{fill:none;stroke:var(--hi);stroke-width:1.8;stroke-linecap:round} .ux-thread-node{fill:var(--hi);stroke:#fff;stroke-width:2;filter:drop-shadow(0 1px 3px rgba(23,26,44,.45))} .ux-thread-tail{fill:var(--hi);stroke:var(--surface);stroke-width:1.5} .ux-thread.draw .ux-thread-line,.ux-thread.draw .ux-thread-under{stroke-dasharray:1;stroke-dashoffset:1;animation:ux-thread-draw .42s var(--ease) forwards} .ux-thread.draw .ux-thread-node{animation:ux-thread-pop .5s var(--ease)} @keyframes ux-thread-draw{to{stroke-dashoffset:0}} @keyframes ux-thread-pop{0%{r:0}60%{r:7px}100%{r:4.5px}} .ux-helpcta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px} /* ------------------------------------------------------------------ 12 guided demo */ .tour-ring{position:fixed;z-index:86;pointer-events:none;border:2px solid var(--accent);border-radius:var(--r-lg);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent),0 0 28px 2px color-mix(in srgb,var(--accent) 35%,transparent);transition:left var(--t-slow) var(--ease),top var(--t-slow) var(--ease),width var(--t-slow) var(--ease),height var(--t-slow) var(--ease),opacity var(--t) var(--ease);opacity:0} .tour-ring.on{opacity:1} .tour-ring.amber{border-color:var(--hi);box-shadow:0 0 0 4px color-mix(in srgb,var(--hi) 26%,transparent),0 0 28px 2px color-mix(in srgb,var(--hi) 40%,transparent)} .tour-ring.alarm{border-color:var(--alarm);box-shadow:0 0 0 4px color-mix(in srgb,var(--alarm) 22%,transparent),0 0 28px 2px color-mix(in srgb,var(--alarm) 35%,transparent)} .tour-ring.pulse{animation:tour-pulse 1.6s var(--ease) infinite} @keyframes tour-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}} .tour-card{position:fixed;z-index:88;width:min(430px,calc(100vw - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e3);padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px;transition:left var(--t-slow) var(--ease),top var(--t-slow) var(--ease);animation:ux-pop var(--t-slow) var(--ease)} .tour-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:linear-gradient(90deg,var(--tile) 0 72%,var(--hi) 72% 100%)} .tour-top{display:flex;align-items:center;gap:8px;margin-top:2px} .tour-step{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)} .tour-dots{display:flex;gap:4px;margin-left:auto;align-items:center} .tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background var(--t) var(--ease),width var(--t) var(--ease)} .tour-dots i.done{background:var(--accent-line)} .tour-dots i.cur{background:var(--accent);width:16px;border-radius:3px} .tour-x{border:0;background:transparent;color:var(--ink-3);padding:5px;border-radius:var(--r);display:inline-flex;margin:-4px -6px -4px 2px} .tour-x:hover{background:var(--surface-3);color:var(--ink)} .tour-card h2{font-size:19px;line-height:1.22;letter-spacing:-.015em;font-weight:700} .tour-body{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0} .tour-say{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--hi) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--hi) 45%,var(--line));border-radius:var(--r);padding:8px 10px;margin:2px 0 0} .tour-say::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--hi);margin-top:6px;box-shadow:0 0 0 3px color-mix(in srgb,var(--hi) 30%,transparent)} .tour-nav{display:flex;align-items:center;gap:8px;margin-top:4px} .tour-nav .keys-hint{font-size:11.5px;color:var(--ink-3);margin-right:auto} .tour-nav .btn{height:34px;padding:0 14px} .tour-busy .tour-nav .btn.primary{opacity:.6;pointer-events:none} .tour-card.compact .tour-body{display:none} .tour-card.compact{width:min(380px,calc(100vw - 24px))} .tour-more{margin-right:-2px} .tour-more[aria-pressed="true"]{color:var(--accent)} /* ------------------------------------------------------------------ 13 presenter mode: less chrome, bigger evidence */ :root[data-present="on"]{--rail-w:var(--rail-mini);--right-w:clamp(460px,40vw,720px)} :root[data-present="on"] .brand .word,:root[data-present="on"] .rail-project,:root[data-present="on"] .navgroup,:root[data-present="on"] .vtab>span:first-of-type,:root[data-present="on"] .rail-demo span,:root[data-present="on"] .langsw,:root[data-present="on"] .rail-meta,:root[data-present="on"] .rail-toggle{display:none} :root[data-present="on"] .rail{padding-left:6px;padding-right:6px} :root[data-present="on"] .rail-head{justify-content:center;padding:0} :root[data-present="on"] .vtab{justify-content:center;padding:9px 0!important} :root[data-present="on"] .vtab .vbadge{position:absolute;top:1px;right:1px;font-size:10px;padding:0 4px;line-height:14px} :root[data-present="on"] .rail-tools{flex-direction:column} :root[data-present="on"] .rail-demo{padding:0} :root[data-present="on"] .docstrip,:root[data-present="on"] #engine-badge,:root[data-present="on"] #run-badge,:root[data-present="on"] #btn-infer,:root[data-present="on"] #btn-run,:root[data-present="on"] .plan-status{display:none!important} :root[data-present="on"] .right{zoom:1.14} :root[data-present="on"] .topbar{zoom:1.1} :root[data-present="on"] .tour-card{zoom:1.18} :root[data-present="on"] .view-extra{zoom:1.08} :root[data-present="on"] .bottom{zoom:1.08} /* ------------------------------------------------------------------ 13b second pass: the proof is lit, recalculation is visible */ /* spotlight (js/ui/thread.js): the sheet dims a little around the boxes that prove the selected value */ .ux-spot{fill:var(--spot);opacity:0;pointer-events:none;transition:opacity .28s var(--ease)} .ux-spot.on{opacity:1} /* the sheet is a compositor layer only while it moves (js/ui/thread.js): at rest boxes and vector pages are redrawn sharp at any zoom */ .plan-stage{will-change:auto} .plan-stage.ux-moving{will-change:transform} /* the overlay is always drawn on white paper: inside the sheet and the crops the status colours keep their light-theme values */ .plan-ov,.crop{--surface:#ffffff;--ink:#171a2c;--ok:#12805c;--verify:#b96d00;--verify-ink:#784500;--nf:#69718a;--alarm:#c8242c;--conflict:#8a3fc4;--assumed:#b5348a;--accent:#4338ca;--hi:#f59e0b} .cand-label{fill:var(--verify-ink);stroke:#fff} /* a value that was just recalculated: one amber sweep over its row, the number settles */ .row.flash{animation:ux-flash 1.8s var(--ease) 1} .row.flash .c-val{animation:ux-settle .5s var(--ease) 1} @keyframes ux-flash{0%,35%{background:var(--hi-bg);box-shadow:inset 3px 0 0 var(--hi)}100%{background:transparent;box-shadow:inset 3px 0 0 transparent}} @keyframes ux-settle{0%{transform:translateY(-4px);opacity:.2}100%{transform:none;opacity:1}} .row.edited .c-val{color:var(--accent)} /* value card: the number is the hero, confidence reads as a gauge */ .phead{padding:14px 16px;box-shadow:var(--e2)} .pvalue .big{font-size:32px} .bar.wide{width:132px;height:7px;border-radius:4px} .facts dd .num{font-weight:600} .psec{padding:12px 16px} .psec>h3:first-child{display:flex;align-items:center;gap:6px} .quote{background:var(--hi-bg);color:var(--ink);border-left-color:var(--hi);font-weight:500} .crop{box-shadow:var(--e1),0 0 0 3px var(--surface)} /* empty evidence panel: say what a click gives, in plain words */ .pempty.ux-empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;border-style:solid;border-color:var(--line-2);box-shadow:var(--e1);padding:16px 18px} .ux-empty-art{grid-row:1 / span 3;width:128px;height:96px;flex:none} .ux-empty-art .sheet{fill:var(--paper);stroke:var(--line)} .ux-empty-art .wall{fill:none;stroke:var(--ink-3);stroke-width:2} .ux-empty-art .hit{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:var(--accent);stroke-width:1.6} .ux-empty-art .thread{fill:none;stroke:var(--hi);stroke-width:1.8;stroke-linecap:round} .ux-empty-art .node{fill:var(--hi);stroke:var(--surface);stroke-width:1.5} .ux-empty-art .card{fill:var(--surface);stroke:var(--line)} .ux-empty-art .l1{fill:var(--ink)} .ux-empty-art .l2{fill:var(--line)} .ux-empty-art .l3{fill:var(--ok)} .pempty.ux-empty h2{font-size:var(--fs-lg);margin:0} .pempty.ux-empty p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5} .ux-empty-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px} .ux-empty-actions .hint{font-size:12px;color:var(--ink-3);display:inline-flex;align-items:center;gap:4px} /* quantity tiles: the lowest confidence tier is a deep warm tone, not the alarm red (red is reserved for alarms). boqview blends --alarm with --surface at 50 %; these are the two results (light, dark) of the tokens above. */ .tmn rect[fill="rgb(228,146,150)"]{fill:#e8b08a} .tmn rect[fill="rgb(139,74,84)"]{fill:#8a5a34} .tmlegend .sw.b-vlow{background:#e8b08a!important} :root[data-theme="dark"] .tmlegend .sw.b-vlow{background:#8a5a34!important} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tmlegend .sw.b-vlow{background:#8a5a34!important}} .tmbar .crumbs:has(.crumb:only-child){display:none} /* cross-checks: every column fits the drawing zone at 1440 (the verdict was cut off) */ .xc-cols,.xc-row{grid-template-columns:minmax(104px,1.2fr) repeat(var(--ncols,2),minmax(70px,1fr)) 104px 98px 96px;gap:0 6px} .xc-row .chip{white-space:nowrap} /* dock */ .bottom{background:var(--surface)} /* ------------------------------------------------------------------ 13c start-up: what is loading, what failed (js/main.js bootStatus) */ .bootline{position:absolute;left:50%;top:var(--s3);transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;max-width:min(640px,calc(100% - 150px));padding:8px 12px 8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--e2);font-size:var(--fs-md);font-weight:500} .bootline[hidden]{display:none} .bootline .msg{min-width:0;overflow-wrap:anywhere} .bootline .spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-line);border-top-color:var(--accent);animation:ux-spin .8s linear infinite} .bootline.error{border-radius:var(--r-lg);border-color:var(--alarm-line);background:var(--alarm-bg);color:var(--alarm-ink);align-items:flex-start;padding:10px 12px} .bootline.error svg.ic{flex:none;color:var(--alarm);margin-top:2px} .bootline .btn{flex:none} @keyframes ux-spin{to{transform:rotate(360deg)}} #app:not([data-view="drawing"]) .bootline:not(.error){top:auto;bottom:var(--s3)} /* browsers without color-mix() / :has() (the start-up guard sets the classes): plain tints instead of mixed ones, nothing breaks */ .no-color-mix .vtab:hover{background:var(--surface-3)!important} .no-color-mix ::selection{background:var(--accent-bg)} .no-color-mix .tour-say{background:var(--hi-bg);border-color:var(--hi-line)} .no-color-mix .box{--bx-fill:transparent} .no-has .provpanel{min-height:0} /* ------------------------------------------------------------------ 13d Overview: coverage map + review queue (web/viz), key ratios with status */ .ovview{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);overflow:auto;height:100%;background:var(--bg)} .ov-lead{flex:none;display:flex;align-items:baseline;gap:6px var(--s4);flex-wrap:wrap} .ov-lead h2{font-size:var(--fs-xl);letter-spacing:-.01em} .ov-sentence{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;color:var(--ink-2);font-size:var(--fs-md)} .ov-sentence b{color:var(--ink);font-size:var(--fs-lg);font-weight:700} .ov-sentence .bad b{color:var(--alarm-ink)} .ov-sentence .good{display:inline-flex;align-items:center;gap:5px;color:var(--ok-ink);font-weight:600} .ov-sentence .good svg.ic{color:var(--ok)} .ov-sentence{align-items:center} .ov-sentence .ov-open{margin-left:auto} .ov-card{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e1);padding:var(--s3) var(--s4);min-width:0} .ov-cov{padding:0;overflow:hidden} .ov-cov .pv-coverage{border:0;border-radius:0;background:transparent} .ov-cov .pv-cov-queue{max-height:none} /* one count per screen: the engine's coverage of the mandatory parameters is in the line above; the component's own headline counts a parameter as supported when any of its values is usable, which is a different number */ .ov-cov .pv-cov-big,.ov-cov .pv-cov-cap,.ov-cov .pv-cov-tiers,.ov-cov .pv-cov-qn{display:none} .ov-missing{margin:0;padding:var(--s4);color:var(--ink-2)} .ov-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .ov-head h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-transform:none;margin:0} .ov-head .muted{font-size:var(--fs-sm)} .ov-chips{display:inline-flex;gap:6px;flex-wrap:wrap} .ov-ratios{display:flex;flex-direction:column} .ov-rrow{display:grid;grid-template-columns:minmax(200px,2fr) 76px minmax(170px,1.1fr) minmax(110px,.9fr);gap:0 14px;align-items:center;padding:7px 8px;border:0;border-top:1px solid var(--line-2);background:transparent;color:var(--ink);text-align:left;font:inherit;border-radius:0;width:100%;min-height:38px} .ov-rrow.head{border-top:0;min-height:26px;padding-top:0;padding-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} button.ov-rrow{cursor:pointer;transition:background var(--t-fast) var(--ease)} button.ov-rrow:hover{background:var(--surface-2)} .ov-rrow.s-alarm{background:color-mix(in srgb,var(--alarm-bg) 60%,transparent)} .ov-rrow .name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500} .ov-rrow .name .lbl{display:flex;flex-direction:column;min-width:0} .ov-rrow .name .l1,.ov-rrow .name .l2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ov-rrow .name .l2{font-size:12px;font-weight:400;color:var(--ink-3)} .ov-rrow .name svg.ic{flex:none;width:16px;height:16px;color:var(--ok)} .ov-rrow.s-warn .name svg.ic{color:var(--verify)} .ov-rrow.s-alarm .name svg.ic{color:var(--alarm)} .ov-rrow.s-na .name svg.ic{color:var(--nf)} .ov-rrow .num{text-align:right;font-variant-numeric:tabular-nums lining-nums} .ov-rrow .val{font-weight:700;font-size:var(--fs-lg)} .ov-rrow.s-na .val{color:var(--ink-3);font-weight:500} .ov-rrow .bandcell{display:flex;align-items:center;gap:10px;min-width:0} .ov-rrow .bandtxt{font-size:12px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums} .ov-rrow .status{display:flex;align-items:center;gap:8px;min-width:0} .ov-rrow .status .ov-why{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ov-gauge{position:relative;flex:1 1 90px;max-width:150px;height:8px;border-radius:4px;background:var(--surface-3)} .ov-gauge .band{position:absolute;top:0;bottom:0;border-radius:4px;background:color-mix(in srgb,var(--ok) 38%,var(--surface))} .ov-gauge .mark{position:absolute;top:-4px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:var(--ok);box-shadow:0 0 0 2px var(--surface)} .ov-gauge.s-warn .mark{background:var(--verify)} .ov-gauge.s-alarm .mark{background:var(--alarm)} .ov-gauge.s-na{background:repeating-linear-gradient(135deg,var(--nf-bg) 0 4px,transparent 4px 8px)} .no-color-mix .ov-gauge .band{background:var(--ok-line)} /* ------------------------------------------------------------------ 13e 3D: the model gets the whole pane (the viewer wants height) */ .xview.v3{display:flex;flex-direction:column;height:100%;min-height:0} .xview.v3 .v3body{flex:1 1 auto;min-height:0;display:flex;gap:var(--s3)} .xview.v3 .v3host{flex:1 1 0;height:auto;min-height:320px;min-width:0} .xview.v3>p.muted{flex:none;margin:6px 0 0} /* linked split view (js/buildinglink.js): 3D left, building graph right, one bar for both */ .bldbar{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 var(--s2)} .bldbar .bld-sel{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-weight:500;box-shadow:var(--e1);max-width:240px} .bld-chips{display:flex;gap:4px;flex-wrap:wrap} .bld-key{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .bld-approx{white-space:nowrap} .bld-graph{flex:1 1 0;min-width:0;min-height:320px;position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e1);overflow:hidden;display:flex;flex-direction:column} .bld-graph>.pv,.bld-graph.pv{flex:1 1 auto;min-height:0;height:100%} .v3body[data-layout="3d"] .bld-graph,.v3body[data-layout="graph"] .v3host{display:none} .v3body[data-layout="split"] .v3host{flex:1.15 1 0} /* two views side by side need the width: the factsheet column steps back while the split is open (a dragged divider keeps its place) */ .app[data-view="3d"] #main:has(.v3body[data-layout="split"]){--right-w:clamp(340px,26vw,480px)} .app[data-view="3d"] #main:has(.v3body[data-layout="split"]) .pempty.ux-empty{grid-template-columns:minmax(0,1fr)} .app[data-view="3d"] #main:has(.v3body[data-layout="split"]) .ux-empty-art{display:none} /* the graph brings its own frame; in the split its details panel keeps the legend only on a low screen (the evidence panel next to it says the rest) */ .bld-graph>.pv-bld{border:0;border-radius:0} @media (max-height:960px){.v3body[data-layout="split"] .pv-bld-panel>:not(.pv-bld-legend){display:none}} /* colour mode and unit filter live in the shared bar: the graph's own copies are left out here, its exports stay for the graph-only layout */ .bld-graph .pv-bld-grp:has(select[id$="-color"]),.bld-graph .pv-bld-grp:has(select[id$="-unit"]){display:none} .v3body[data-layout="split"] .bld-graph .pv-btn[data-act="svg"],.v3body[data-layout="split"] .bld-graph .pv-btn[data-act="png"]{display:none} .bldbar .bld-key{font-size:var(--fs-xs)} @media (max-width:1700px){.bldbar .bld-key .bld-key-t{display:none}.bldbar .bld-sel{max-width:190px}} @media (max-width:1100px){.xview.v3 .v3body[data-layout="split"]{flex-direction:column}} /* ------------------------------------------------------------------ 13f Factsheet view (js/sheets): the sheet IS the table */ /* The value table on the right would say the same thing twice. In this view the right column holds the evidence of the picked cell only, and it steps aside completely while nothing is picked: a click on a cell brings it in, Esc sends it away. */ .app[data-view="sheets"] #table-panel,.app[data-view="sheets"] #split-h{display:none} .app[data-view="sheets"] #prov-panel{height:auto;flex:1 1 auto;border-top:0} .app[data-view="sheets"] #main{--right-w:clamp(340px,27vw,460px)} .app[data-view="sheets"] #main:has(#prov-panel>.pempty) #right,.app[data-view="sheets"] #main:has(#prov-panel>.pempty) #split-v{display:none} .ux-prov-close{display:none;margin-left:auto;flex:none} .ux-pop-actions{margin:12px 0 0} .app[data-view="sheets"] .ux-prov-close{display:inline-flex} /* the brand leads back to the front page when the viewer is served next to it (js/ui sets .linked) */ .brand.linked{cursor:pointer;border-radius:var(--r)} .brand.linked:hover .word{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:3px} /* ------------------------------------------------------------------ 14 responsive, motion, print */ @media (max-width:1700px){.btns button span{display:inline}} /* the strip never wraps: js/ui measures it and drops labels step by step (snug, tight, tighter, tightest); the numbers always stay, the labels of the deliverables (Excel, Export) and of the coverage go last */ .topbar .btns #btn-open span,.topbar .btns #btn-infer span,.ux-pill.quiet .lbl{display:none} .topbar.snug .ux-pill.cost .lbl,.topbar.snug .btns #btn-run span{display:none} .topbar.tight .cnt:not(.cov) .lbl{display:none} .topbar.tight .cnt:not(.cov){height:34px;padding:4px 8px} .topbar.tighter .cnt.cov .lbl{display:none} .topbar.tighter .cnt.cov b{grid-row:1 / span 2;align-self:center} .topbar.tightest .cnt .lbl,.topbar.tightest .btns button span,.topbar.tightest .ux-meter{display:none} @media (min-width:901px) and (max-width:1180px){ :root:not([data-rail="full"]){--rail-w:var(--rail-mini)} :root:not([data-rail="full"]) .brand .word,:root:not([data-rail="full"]) .rail-project,:root:not([data-rail="full"]) .navgroup,:root:not([data-rail="full"]) .vtab>span:first-of-type,:root:not([data-rail="full"]) .rail-demo span,:root:not([data-rail="full"]) .langsw,:root:not([data-rail="full"]) .rail-meta{display:none} :root:not([data-rail="full"]) .rail{padding-left:6px;padding-right:6px} :root:not([data-rail="full"]) .rail-head{flex-direction:column;gap:6px;padding:0} :root:not([data-rail="full"]) .vtab{justify-content:center;padding:9px 0!important} :root:not([data-rail="full"]) .vtab .vbadge{position:absolute;top:1px;right:1px;font-size:10px;padding:0 4px;line-height:14px} :root:not([data-rail="full"]) .rail-tools{flex-direction:column} :root:not([data-rail="full"]) .rail-demo{padding:0} .ux-pill span.lbl{display:none} } @media (max-width:900px){ /* phone / narrow: brand + project + tools in one row, the views as a scrolling tab row, then the workspace stacked */ .app{display:flex;flex-direction:column;height:auto;min-height:100vh} .rail,:root[data-rail] .rail,:root[data-present] .rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px var(--s2);padding:var(--s2) var(--s3) 0;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:0} .rail-head,:root[data-rail] .rail-head{order:1;flex-direction:row;padding:0;min-height:0} .rail-toggle,#btn-present,.rail-lbl,.rail-meta,:root[data-rail] .rail-meta{display:none} .brand .word,:root[data-rail] .brand .word{display:none} .rail-project,:root[data-rail] .rail-project{order:2;display:flex;flex:1;min-width:110px;padding:0} .rail-foot{order:3;flex-direction:row;align-items:center;border-top:0;padding:0;gap:4px} .rail-demo,:root[data-rail] .rail-demo{height:32px;padding:0 10px} .rail-demo span,:root[data-rail] .rail-demo span{display:none} .rail-tools,:root[data-rail] .rail-tools{flex-direction:row;gap:0} .langsw,:root[data-rail] .langsw{display:inline-flex} .viewtabs,:root[data-rail] .viewtabs{order:5;flex:1 0 100%;flex-direction:row;overflow-x:auto;padding:0 0 6px;gap:2px;scrollbar-width:none} .navgroup,:root[data-rail] .navgroup{display:none} .vtab,:root[data-rail] .vtab{width:auto;flex:none;padding:6px 10px!important;justify-content:flex-start;min-height:32px} .vtab>span:first-of-type,:root[data-rail] .vtab>span:first-of-type{display:inline;overflow:visible;flex:none} .vtab.on::before{display:none} .vtab .vbadge,:root[data-rail] .vtab .vbadge{position:static;font-size:11px;padding:0 6px;line-height:17px} .stage{min-height:0} .topbar{height:auto;min-height:44px;flex-wrap:wrap;overflow:visible;padding:6px var(--s3);gap:6px} .counters{flex:1 1 100%;overflow-x:auto;scrollbar-width:none} .topbar .spacer{display:none} .topbar .btns{margin-left:auto} .right{min-width:0;box-shadow:none} .left{height:54vh} .sheet-pick select{max-width:180px} .diffcard{left:var(--s3)} .ux-welcome{padding:26px 20px 20px} .ux-welcome h1{font-size:24px} .ux-steps{grid-template-columns:1fr;gap:8px} .ux-steps li{padding:10px 12px} .tour-card{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto} } @media (prefers-reduced-motion:reduce){ .tour-ring,.tour-card,.ux-pill,.gcard,.toast,.modal,.modal-card,.menu,.ux-pop,.ux-welcome,.ux-welcome-wrap,.halo,.ux-thread,.ux-thread *,.row.flash,.row.flash .c-val,.ux-spot{animation:none!important;transition:none!important} .bootline .spin{animation-duration:2.4s} } @media (forced-colors:active){.tour-ring{border-color:Highlight}.vtab.on{outline:2px solid Highlight}} @media print{.rail,.tour-card,.tour-ring,.ux-welcome-wrap,.ux-pop,.ux-thread{display:none!important}.app{display:block}.stage{display:block}} /* ---- "Saved in this browser" (web/js/ui/storage.js): where the data lives, how much, stored projects, saved work, session file */ .st-card{width:min(700px,94vw)} .st-card h3{margin:16px 0 6px;font-size:var(--fs-md);color:var(--ink)} .st-where,.st-warn{display:flex;align-items:flex-start;gap:8px;margin:6px 0 10px;font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)} .st-where svg.ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ok)} .st-warn{padding:8px 10px;border:1px solid var(--verify-line);border-radius:var(--r);background:var(--verify-bg);color:var(--verify-ink)} .st-warn svg.ic{flex:none;width:16px;height:16px;margin-top:2px;color:var(--verify)} .st-usage{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:var(--fs-sm);color:var(--ink-2)} .st-bar{display:inline-block;width:140px;height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden} .st-bar .fill{display:block;height:100%;background:var(--accent)} .st-persist{padding:1px 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);font-size:var(--fs-xs)} .st-persist.on{background:var(--ok-bg);color:var(--ok-ink)} .st-list{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden} .st-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-top:1px solid var(--line-2)} .st-row:first-child{border-top:0} .st-row .st-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .st-row .btn.small{flex:none} .chip.st-absent{background:transparent;border:1px dashed var(--line);color:var(--ink-3);font-weight:500} .st-del svg.ic{width:13px;height:13px} .st-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)} .st-actions .spacer{flex:1 1 auto} .btn.danger{border-color:var(--alarm-line);color:var(--alarm-ink);background:var(--surface)} .btn.danger:hover{background:var(--alarm-bg)} .st-problems{margin-top:12px;font-size:var(--fs-xs);color:var(--ink-3)} .st-problems pre{white-space:pre-wrap;max-height:160px;overflow:auto} /* ---- settings: model budget (web/js/ui/budget.js) */ .st-card h3.st-h{margin:18px 0 6px;padding-top:12px;border-top:1px solid var(--line-2);font-size:var(--fs-md)} .st-card h3.st-h:first-of-type{margin-top:8px;padding-top:0;border-top:0} .bud-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end} .bud-f{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);color:var(--ink-3);min-width:0} .bud-in{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm);min-width:0} .bud-act{display:flex;gap:6px} .bud-out{margin-top:8px;font-size:var(--fs-sm)} .bud-line{margin:4px 0} .bud-bar{width:100%;max-width:320px;height:8px} .bud-bar .fill.hot{background:var(--alarm)} .bud-list{margin:6px 0;padding-left:18px} .bud-free{display:flex;align-items:center;gap:6px;color:var(--ok-ink)} .bud-free svg.ic{width:15px;height:15px;color:var(--ok)} @media (max-width:640px){.bud-form{grid-template-columns:1fr}} /* ---- product top bar (owner clean-up, Sat): the project, one status summary, search, ONE "More" menu (web/js/ui/topbar.js) */ .topbar{gap:12px} .top-proj{flex:0 1 auto;min-width:0;max-width:30ch;display:flex;align-items:baseline;gap:8px} .top-proj .tp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;color:var(--ink)} .top-proj .tp-kind{flex:none;padding:1px 8px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap} .topbar .counters .cnt:not(.cov){display:none} .topbar .cnt.cov{margin-right:0} .topbar .cnt.cov .lbl{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:600} .ux-pill.attn.primary{--c:#fff;background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);font-weight:600} .ux-pill.attn.primary:hover{filter:brightness(1.06)} .ux-pill.attn.primary svg.ic{color:currentColor} .ux-pill.attn .sub{font-weight:400;opacity:.85;font-size:11.5px} .ux-pill.attn .sub::before{content:'ยท';margin-right:6px} .topbar.snug .ux-pill.attn .sub{display:none} @media (max-width:1100px){.ux-pill.attn .sub{display:none}} /* search */ .top-search{position:relative;flex:0 1 280px;min-width:150px} .ts-box{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-3)} .ts-box:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-bg)} .ts-box svg.ic{flex:none;width:15px;height:15px} .ts-in{flex:1 1 auto;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-sm);outline:0} .ts-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(420px,92vw);max-height:60vh;overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:var(--r-lg,10px);background:var(--surface);box-shadow:var(--e3)} .ts-list .ts-head{padding:6px 8px 2px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .ts-list li[role=option]{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r);cursor:pointer;font-size:var(--fs-sm)} .ts-list li[role=option].on,.ts-list li[role=option]:hover{background:var(--accent-bg)} .ts-list li svg.ic{flex:none;width:15px;height:15px} .ts-list .ts-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ts-list .ts-v{flex:none;color:var(--ink-2)} .ts-list .ts-none{padding:8px;color:var(--ink-3)} /* the More menu: a disclosure; folded it stays laid out (so a dialog can give the focus back to its opener) but is invisible */ .more{position:relative;flex:none} #btn-more span{display:inline} .more-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:270px;padding:6px;border:1px solid var(--line);border-radius:var(--r-lg,10px);background:var(--surface);box-shadow:var(--e3);opacity:0;visibility:visible;pointer-events:none;transform:translateY(-4px) scale(.98);transform-origin:top right;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);clip-path:inset(0 0 100% 0)} .more-menu.open{opacity:1;pointer-events:auto;transform:none;clip-path:none} .more-menu .mgroup{display:flex;flex-direction:column;gap:1px;padding:4px 0;border-top:1px solid var(--line-2)} .more-menu .mgroup:first-child{border-top:0} .topbar .more-menu button.mitem,.more-menu .mitem{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:var(--r);background:transparent;box-shadow:none;color:var(--ink);font-weight:500;text-align:left} .topbar .more-menu button.mitem span,.more-menu .mitem span{display:inline} .more-menu .mitem:hover,.more-menu .mitem:focus-visible{background:var(--surface-2)} .more-menu .mitem svg.ic{flex:none;width:16px;height:16px;color:var(--ink-3)} .more-menu .mitem[aria-pressed="true"]{color:var(--accent)} .more-menu .mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 10px;font-size:var(--fs-sm);color:var(--ink-2)} .more-menu .mabout{display:flex;flex-wrap:wrap;gap:4px;padding:6px 10px 2px;border-top:1px solid var(--line-2)} .more-menu .mabout .badge{font-size:11px} .more-menu #btn-pdf{display:flex;width:100%;justify-content:flex-start;border:0;box-shadow:none;background:transparent} @media (prefers-reduced-motion:reduce){.more-menu{transition:none}} @media (max-width:900px){.top-search{flex-basis:44px;min-width:44px}.top-search .ts-in{width:0;flex:0}.top-search:focus-within{flex-basis:220px}.top-search:focus-within .ts-in{width:auto;flex:1 1 auto}.top-proj .tp-kind{display:none}} @media (max-width:640px){.top-proj{display:none}#btn-more span{display:none}} /* the bar no longer clips: the More menu and the search results hang below it (the strip fitting measures scrollWidth either way) */ .topbar{overflow:visible} .topbar>.counters,.topbar>.ux-strip{min-width:0} .topbar .btns .more-menu button span,.topbar .btns .more-menu .mitem span{display:inline} /* ---- dropdown (web/js/ui/dropdown.js): a styled, searchable listbox over the native