@evotecit/canopyx 0.3.18 → 0.3.20

package/CanopyX.Html/Assets/canopyx-pivot.css

@@ -1,23 +1,23 @@
 .cx-pivot-active > :is(.cx-grid,.cx-groupbar,.cx-grid-pager,.cx-grid-status,.cx-grid-summary){display:none !important;}
 .cx-host.cx-pivot-active{min-height:0;}
 body.cx-page > .cx-host.cx-pivot-active,body.cx-page > .cx-main > .cx-host.cx-pivot-active{height:auto;max-height:100dvh;min-height:0;}
-.cx-pivot{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-pivot{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden;background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
 .cx-pivot[hidden]{display:none;}
-.cx-pivot-zones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hfx-space-2,0.5rem);padding:calc(var(--hfx-space-1,0.25rem)*2.5) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-pivot-zones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--hfx-space-2,0.5rem);padding:calc(var(--hfx-space-1,0.25rem)*2.5) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-pivot-zone{display:flex;align-items:center;gap:var(--hfx-space-1-5,6px);min-width:0;max-width:100%;}
 .cx-pivot-zone > span:first-child{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--hfx-type-caption-size,0.75rem);}
 .cx-pivot-zone .cx-gchip{block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .cx-pivot-zone .cx-gchip-name{overflow:hidden;text-overflow:ellipsis;}
 .cx-pivot-scroll{min-height:0;min-width:0;overflow:auto;flex:1 1 auto;}
 .cx-pivot-table{border-collapse:separate;border-spacing:0;font-size:var(--hfx-type-small-size,0.8125rem);width:max-content;min-width:100%;font-variant-numeric:tabular-nums;}
-.cx-pivot-table :is(th,td){padding:calc(var(--hfx-space-1,0.25rem)*1.75) calc(var(--hfx-space-1,0.25rem)*2.5);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-right:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));vertical-align:middle;}
-.cx-pivot-table thead th{--cx-pivot-header-layer:1;background:var(--hfx-table-header-background,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));text-align:right;position:sticky;top:0;z-index:var(--cx-pivot-header-layer);}
+.cx-pivot-table :is(th,td){padding:calc(var(--hfx-space-1,0.25rem)*1.75) calc(var(--hfx-space-1,0.25rem)*2.5);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-right:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));vertical-align:middle;}
+.cx-pivot-table thead th{--cx-pivot-header-layer:1;background:var(--hfx-table-header-background,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));text-align:right;position:sticky;top:0;z-index:var(--cx-pivot-header-layer);}
 .cx-pivot-table thead th > span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.cx-pivot-table th[scope=row]{text-align:left;white-space:nowrap;padding-left:calc(var(--hfx-space-3,0.75rem) + var(--cx-pivot-depth,0) * var(--hfx-space-6,2rem));position:sticky;left:0;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-pivot-table th[scope=row]{text-align:left;white-space:nowrap;padding-left:calc(var(--hfx-space-3,0.75rem) + var(--cx-pivot-depth,0) * var(--hfx-space-6,2rem));position:sticky;left:0;background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 .cx-pivot-table td{text-align:right;}
-.cx-pivot-table tbody tr:hover{background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 5%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
-.cx-pivot-subtotal{font-weight:var(--hfx-weight-semibold,600);background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 3%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
-.cx-pivot-table tfoot{font-weight:var(--hfx-weight-display,600);position:sticky;bottom:0;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-pivot-table tbody tr:hover{background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 5%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));}
+.cx-pivot-subtotal{font-weight:var(--hfx-weight-semibold,600);background:color-mix(in srgb,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 3%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));}
+.cx-pivot-table tfoot{font-weight:var(--hfx-weight-display,600);position:sticky;bottom:0;background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 .cx-pivot-cell,.cx-pivot-value-menu{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;padding:var(--hfx-space-0-5,2px) 0;}
 .cx-pivot-cell{width:100%;text-align:right;min-width:72px;}
 .cx-pivot-cell:hover,.cx-pivot-value-menu:hover{color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));text-decoration:underline;}
@@ -32,7 +32,7 @@ body.cx-page > .cx-host.cx-pivot-active,body.cx-page > .cx-main > .cx-host.cx-pi
 .cx-pivot-editor :is(select,input){min-width:0;}
 .cx-pivot-editor .cx-pivot-setting{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hfx-space-2,0.5rem);}
 .cx-pivot-setting > :is(span,input){grid-column:1/-1;}
-.cx-pivot-return{padding:var(--hfx-space-2,0.5rem) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-pivot-return{padding:var(--hfx-space-2,0.5rem) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 @media (max-width:640px){
 .cx-pivot-zones{gap:var(--hfx-space-1-5,6px);padding:var(--hfx-space-2,0.5rem);}
 .cx-pivot-zone{width:100%;}
@@ -70,6 +70,6 @@ body.cx-page > .cx-host.cx-pivot-active,body.cx-page > .cx-main > .cx-host.cx-pi
 .cx-pivot-table th[scope=row]{position:static;}
 }
 .cx-pivot-column-jump{margin-inline-start:var(--hfx-space-1,0.25rem);}
-.cx-pivot-column-jump::before{content:"▾" / "";}
+.cx-pivot-column-jump::before{content:"⇥" / "";}
 .cx-pivot-table thead th:first-child[rowspan]{white-space:nowrap;}
 @media print{.cx-pivot-column-jump{display:none !important;}}

package/CanopyX.Html/Assets/canopyx-pivot.js

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"230b05b7fcab6cf1",requires:["grouping","values","buckets"],install(context){if(installed.has(context.GRID_PIVOT))return;const{DataGrid,GRID_PIVOT,GRID_ROWS,GRID_SHOW_AS,GRID_SHOW_AS_MODES,GRID_BUCKETS,GRID_CALCULATIONS,h,setText,fill,gridButton,gridFreeze,gridQuery,gridQueryStart,gridQueryRows,gridScalar,cellValue,cellText,gridKeyCompare,gridOrder,numberFormat,formatting,gridExportSignal,validateGridPage,checkDocument,validStructuralCount,gridOperationActive,pivotDefinition,pivotIntent,pivotRequestOf,showAsMode,showAsCaption,reportingAggregateName,reportingValueText,UI_IMPL,UI_TOOLS}=context;const pivotColumn=(grid,id)=>grid.view.columns.find(column=>column.id===id);function pivotRaw(grid,level,row){const column=pivotColumn(grid,level.column),value=gridScalar(row.cells[column.id],column);return level.bucket?GRID_BUCKETS.key(level.bucket,value):column.kind==="datetime"&&value!==null?new Date(value).toISOString().replace(".000Z","Z"):value}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"577443c67c7ed719",requires:["grouping","values","buckets"],install(context){if(installed.has(context.GRID_PIVOT))return;const{DataGrid,GRID_PIVOT,GRID_ROWS,GRID_SHOW_AS,GRID_SHOW_AS_MODES,GRID_BUCKETS,GRID_CALCULATIONS,h,setText,fill,gridButton,gridFreeze,gridQuery,gridQueryStart,gridQueryRows,gridScalar,cellValue,cellText,gridKeyCompare,gridOrder,numberFormat,formatting,gridExportSignal,validateGridPage,checkDocument,validStructuralCount,gridOperationActive,pivotDefinition,pivotIntent,pivotRequestOf,showAsMode,showAsCaption,reportingAggregateName,reportingValueText,UI_IMPL,UI_TOOLS}=context;const pivotColumn=(grid,id)=>grid.view.columns.find(column=>column.id===id);function pivotRaw(grid,level,row){const column=pivotColumn(grid,level.column),value=gridScalar(row.cells[column.id],column);return level.bucket?GRID_BUCKETS.key(level.bucket,value):column.kind==="datetime"&&value!==null?new Date(value).toISOString().replace(".000Z","Z"):value}
 function pivotKey(axis,path,levels,grid){return axis+path.map((value,index)=>{const kind=pivotColumn(grid,levels[index].column).kind;const text=value===null?"z":!levels[index].bucket&&kind==="datetime"?"d"+Date.parse(value):
 typeof value==="string"?"s"+value:typeof value==="boolean"?value?"b1":"b0":"n"+String(value);return "|"+text.length+":"+text}).join("")}
 function pivotCompare(grid,levels,left,right){for(let index=0;index<Math.min(left.length,right.length);index++){const level=levels[index],column=level.bucket?{kind:"number"}:pivotColumn(grid,level.column);const scalar=value=>!level.bucket&&column.kind==="datetime"&&value!==null?Date.parse(value):value;const compare=gridKeyCompare(scalar(left[index]),scalar(right[index]),column,level.direction);if(compare)return compare}
@@ -45,7 +45,7 @@ catch(error){pivotIntent(this).active=false;this.render();this.emit("error",{err
 function pivotVisible(nodes,collapsed,leavesOnly){const byKey=new Map(nodes.map(node=>[node.key,node])),closed=new Set(collapsed);return nodes.filter(node=>{if(!node.parent)return false;let parent=byKey.get(node.parent);while(parent){if(closed.has(parent.key))return false;parent=byKey.get(parent.parent)}
 return!leavesOnly||closed.has(node.key)||!nodes.some(child=>child.parent===node.key)})}
 function pivotToggle(grid,node,axis){const state=pivotIntent(grid),collapsed=state[axis==="rows"?"collapsedRows":"collapsedColumns"].includes(node.key);const button=gridButton(collapsed?"▸":"▾",()=>grid.setPivotCollapsed(axis,node.key,!collapsed));button.classList.add("cx-pivot-collapse");button.setAttribute("aria-label",(collapsed?grid.labels.gridGroupExpand:grid.labels.gridGroupCollapse)+ ": "+pivotLabel(grid,state,axis,node));button.setAttribute("aria-expanded",String(!collapsed));button.dataset.pivotFocus=axis+":"+node.key;return button}
-DataGrid.prototype.renderPivot=function(){if(!this.pivotPanel||this.pivotPanel.hidden||!pivotIntent(this)?.active||!this.pivotResult||this.destroyed)return;this.updateGridPhone();const state=pivotIntent(this),result=this.pivotResult,phone=this.host.clientWidth<=640,active=document.activeElement;const hadFocus=this.pivotPanel.contains(active),focus=hadFocus?active.dataset.pivotFocus:null;const columns=pivotVisible(result.columns,state.collapsedColumns,true),rows=pivotVisible(result.rows,state.collapsedRows,false),totalColumn=result.columns[0];const aggregates=state.values.map(id=>this.view.reporting.aggregates.find(value=>value.id===id));const zones=this.pivotZones(),displayedColumns=[...columns,totalColumn];this.pivotPanel.dataset.phone=String(phone);if(this.pivotButton)setText(this.pivotButton,phone?this.labels.gridPivotConfigure:this.labels.gridPivot);const scroll=h("div","cx-pivot-scroll"),table=h("table","cx-pivot-table"),caption=h("caption","cx-pivot-description");const describe=axis=>state[axis].map(level=>pivotColumn(this,level.column).title).join(" / ");setText(caption,this.view.label+" · "+describe("rows")+(state.columns.length?" × "+describe("columns"):"")+ " · "+aggregates.map(value=>reportingAggregateName(this,value)).join(", "));table.append(caption);scroll.tabIndex=0;scroll.setAttribute("aria-label",this.labels.gridPivot);const head=h("thead"),axisDepth=Math.max(1,state.columns.length),leading=h("th");leading.scope="col";leading.rowSpan=axisDepth+1;setText(leading,describe("rows")||this.view.label);const jump=gridButton("",()=>this.openPivotColumnMenu(jump).catch(error=>this.emit("error",{error})));jump.classList.add("cx-pivot-column-jump");jump.dataset.size="sm";jump.dataset.pivotFocus="column-picker";jump.setAttribute("aria-label",this.labels.gridPivotColumn);jump.setAttribute("aria-haspopup","menu");jump.title=this.labels.gridPivotColumn;leading.append(jump);const ancestor=(node,depth)=>{while(node.path.length>depth)node=result.columns.find(parent=>parent.key===node.parent);return node};for(let depth=0;depth<axisDepth;depth++){const row=h("tr");if(!depth)row.append(leading);for(let index=0;index<displayedColumns.length;){const column=displayedColumns[index];if(depth&&column.path.length<=depth){index++;continue}
+DataGrid.prototype.renderPivot=function(){if(!this.pivotPanel||this.pivotPanel.hidden||!pivotIntent(this)?.active||!this.pivotResult||this.destroyed)return;this.updateGridPhone();const state=pivotIntent(this),result=this.pivotResult,phone=this.host.clientWidth<=640,active=document.activeElement;const editorExit=this.reportingText?.querySelector(".cx-pivot-editor-flat");if(editorExit)editorExit.hidden=!state.active||!phone;const hadFocus=this.pivotPanel.contains(active),focus=hadFocus?active.dataset.pivotFocus:null;const columns=pivotVisible(result.columns,state.collapsedColumns,true),rows=pivotVisible(result.rows,state.collapsedRows,false),totalColumn=result.columns[0];const aggregates=state.values.map(id=>this.view.reporting.aggregates.find(value=>value.id===id));const zones=this.pivotZones(),displayedColumns=[...columns,totalColumn];this.pivotPanel.dataset.phone=String(phone);if(this.pivotButton)setText(this.pivotButton,phone?this.labels.gridPivotConfigure:this.labels.gridPivot);const scroll=h("div","cx-pivot-scroll"),table=h("table","cx-pivot-table"),caption=h("caption","cx-pivot-description");const describe=axis=>state[axis].map(level=>pivotColumn(this,level.column).title).join(" / ");setText(caption,this.view.label+" · "+describe("rows")+(state.columns.length?" × "+describe("columns"):"")+ " · "+aggregates.map(value=>reportingAggregateName(this,value)).join(", "));table.append(caption);scroll.tabIndex=0;scroll.setAttribute("aria-label",this.labels.gridPivot);const head=h("thead"),axisDepth=Math.max(1,state.columns.length),leading=h("th");leading.scope="col";leading.rowSpan=axisDepth+1;setText(leading,describe("rows")||this.view.label);const jump=gridButton("",()=>this.openPivotColumnMenu(jump).catch(error=>this.emit("error",{error})));jump.classList.add("cx-pivot-column-jump");jump.dataset.size="sm";jump.dataset.pivotFocus="column-picker";jump.setAttribute("aria-label",this.labels.gridPivotColumn);jump.setAttribute("aria-haspopup","menu");jump.title=this.labels.gridPivotColumn;leading.append(jump);const ancestor=(node,depth)=>{while(node.path.length>depth)node=result.columns.find(parent=>parent.key===node.parent);return node};for(let depth=0;depth<axisDepth;depth++){const row=h("tr");if(!depth)row.append(leading);for(let index=0;index<displayedColumns.length;){const column=displayedColumns[index];if(depth&&column.path.length<=depth){index++;continue}
 const group=ancestor(column,depth+1);let end=index+1;while(end<displayedColumns.length&&ancestor(displayedColumns[end],depth+1).key===group.key)end++;const th=h("th"),label=h("span");th.scope="colgroup";th.colSpan=(end-index)*aggregates.length;th.rowSpan=group.path.length<axisDepth?axisDepth-depth:1;setText(label,pivotLabel(this,state,"columns",group,false));label.title=pivotLabel(this,state,"columns",group);if(group.parent&&result.columns.some(child=>child.parent===group.key))th.append(pivotToggle(this,group,"columns"));th.append(label);row.append(th);index=end}
 head.append(row)}
 const measures=h("tr");for(const column of displayedColumns)for(const aggregate of aggregates){const th=h("th"),value=h("button","cx-pivot-value-menu");th.scope="col";th.dataset.pivotColumn=column.key;setText(value,reportingAggregateName(this,aggregate));value.type="button";value.title=this.labels.gridShowAs;value.dataset.pivotFocus="value:"+column.key+":"+aggregate.id;value.addEventListener("click",()=>this.pivotValueMenu(aggregate,value));th.append(value);const mode=showAsMode(this,aggregate);if(mode!=="value"){const label=h("span","cx-pivot-caption");setText(label,showAsCaption(this,mode));th.append(label)}
@@ -60,7 +60,7 @@ select.value=showAsMode(this,aggregate);const apply=gridButton(this.labels.gridA
 {kind,edges:width.value.split(",").map(value=>value.trim()?Number(value):NaN)}:{kind,timeZone:current?.bucket?.timeZone||"UTC",firstWeekday:current?.bucket?.firstWeekday??1};return{column:column.value,direction:direction.value,...(spec?{bucket:spec}:{})}})}
 form.append(group)}
 const group=h("fieldset"),legend=h("legend");setText(legend,this.labels.gridPivotValues);group.append(legend);for(const aggregate of this.view.reporting.aggregates){const label=h("label"),check=h("input"),text=h("span");check.type="checkbox";check.className="cx-check";check.checked=initial.values.includes(aggregate.id);setText(text,reportingAggregateName(this,aggregate));label.append(check,text);group.append(label);values.push(()=>check.checked?aggregate.id:null)}
-const topLabel=h("label","cx-pivot-setting"),topText=h("span"),top=h("input","cx-input");top.type="number";top.placeholder="1–200";top.min="1";top.max="200";top.value=initial.topNColumns===undefined?"":String(initial.topNColumns);setText(topText,this.labels.gridPivotTopN);topLabel.append(topText,top);top.setAttribute("aria-label",this.labels.gridPivotTopN);const sortLabel=h("label","cx-pivot-setting"),sortText=h("span"),sort=h("select","cx-input"),descending=h("select","cx-input");setText(sortText,this.labels.gridPivotSort);option(sort,"",this.labels.gridGroupSortValue);for(const aggregate of this.view.reporting.aggregates)option(sort,aggregate.id,reportingAggregateName(this,aggregate));sort.value=initial.sortByTotal?.aggregate||"";sort.setAttribute("aria-label",this.labels.gridPivotSort);option(descending,"desc",this.labels.gridSortDescending);option(descending,"asc",this.labels.gridSortAscending);descending.value=initial.sortByTotal?.direction||"desc";sortLabel.append(sortText,sort,descending);const error=h("p","cx-pivot-note");error.setAttribute("role","alert");error.hidden=true;const apply=gridButton(this.labels.gridApply,()=>{});apply.type="submit";apply.dataset.variant="primary";const flat=gridButton(this.labels.gridPivotFlat,()=>{this.reportingText?._cxOverlay.close();this.setPivot(false).catch(error=>this.emit("error",{error}))});flat.hidden=!state?.active;form.append(group,topLabel,sortLabel,flat,error,apply);for(const select of form.querySelectorAll("select")){const title=()=>{select.title=select.selectedOptions[0]?.textContent||""};title();select.addEventListener("change",title)}
+const topLabel=h("label","cx-pivot-setting"),topText=h("span"),top=h("input","cx-input");top.type="number";top.placeholder="1–200";top.min="1";top.max="200";top.value=initial.topNColumns===undefined?"":String(initial.topNColumns);setText(topText,this.labels.gridPivotTopN);topLabel.append(topText,top);top.setAttribute("aria-label",this.labels.gridPivotTopN);const sortLabel=h("label","cx-pivot-setting"),sortText=h("span"),sort=h("select","cx-input"),descending=h("select","cx-input");setText(sortText,this.labels.gridPivotSort);option(sort,"",this.labels.gridGroupSortValue);for(const aggregate of this.view.reporting.aggregates)option(sort,aggregate.id,reportingAggregateName(this,aggregate));sort.value=initial.sortByTotal?.aggregate||"";sort.setAttribute("aria-label",this.labels.gridPivotSort);option(descending,"desc",this.labels.gridSortDescending);option(descending,"asc",this.labels.gridSortAscending);descending.value=initial.sortByTotal?.direction||"desc";sortLabel.append(sortText,sort,descending);const error=h("p","cx-pivot-note");error.setAttribute("role","alert");error.hidden=true;const apply=gridButton(this.labels.gridApply,()=>{});apply.type="submit";apply.dataset.variant="primary";const flat=gridButton(this.labels.gridPivotFlat,()=>{this.reportingText?._cxOverlay.close();this.setPivot(false).catch(error=>this.emit("error",{error}))});flat.classList.add("cx-pivot-editor-flat");flat.hidden=!state?.active||this.host.clientWidth>640;form.append(group,topLabel,sortLabel,flat,error,apply);for(const select of form.querySelectorAll("select")){const title=()=>{select.title=select.selectedOptions[0]?.textContent||""};title();select.addEventListener("change",title)}
 form.addEventListener("submit",event=>{event.preventDefault();try{const definition=pivotDefinition(this.view,{rows:axes.rows.map(read=>read()).filter(Boolean),columns:axes.columns.map(read=>read()).filter(Boolean),values:values.map(read=>read()).filter(Boolean),maxColumns:initial.maxColumns,...(top.value.trim()?{topNColumns:Number(top.value)}:{}),...(sort.value?{sortByTotal:{aggregate:sort.value,direction:descending.value}}:{})});this.reportingText?._cxOverlay.close();this.setPivot(definition).catch(error=>this.emit("error",{error}))}catch(_){error.hidden=false;setText(error,this.labels.gridPivotInvalid)}});this.showReportingText({...this.view.columns[0],title:this.labels.gridPivotConfigure},"",button,undefined,false,form)};function pivotExportAxis(nodes,collapsed){const children=new Map(),ordered=[],closed=new Set(collapsed);for(const node of nodes)if(node.parent){if(!children.has(node.parent))children.set(node.parent,[]);children.get(node.parent).push(node)}
 const visit=(node,hidden)=>{const descendants=children.get(node.key)||[];ordered.push({node,axisKey:node.key,outlineLevel:Math.max(0,node.path.length-1),summary:!node.parent||!!descendants.length,grandTotal:!node.parent,collapsed:closed.has(node.key),hidden});for(const child of descendants)visit(child,hidden||closed.has(node.key))};visit(nodes[0],false);return ordered.slice(1).concat(ordered.slice(0,1))}
 DataGrid.prototype.pivotExport=function(){const state=pivotIntent(this),result=this.pivotResult;if(!state?.active||!result||this.pendingQuery)throw new Error("CanopyX: export needs an accepted pivot.");const aggregates=state.values.map(id=>this.view.reporting.aggregates.find(value=>value.id===id)),columns=[{id:"axis",title:this.labels.gridPivotRows,kind:"text"}];const selected=pivotExportAxis(result.columns,state.collapsedColumns),rowAxis=pivotExportAxis(result.rows,state.collapsedRows),rows=[],columnGroups=[];selected.forEach(({node,...presentation},ci)=>aggregates.forEach((aggregate,ai)=>columns.push({id:"v"+ci+"_"+ai,title:pivotLabel(this,state,"columns",node)+ ": "+reportingAggregateName(this,aggregate),kind:"number",aggregate:aggregate.id,...presentation})));selected.forEach(({node,collapsed,hidden},index)=>{if(!node.parent||!selected.some(item=>item.node.parent===node.key))return;let end=index+1;while(end<selected.length&&selected[end].node.path.length>node.path.length)end++;columnGroups.push({key:node.key,...(node.parent==="c"?{}:{parent:node.parent}),firstColumn:1 +(index+1)*aggregates.length,columnCount:(end-index-1)*aggregates.length,depth:node.path.length,collapsed,hidden})});for(const{node,...presentation}of rowAxis){const cells={axis:{value:pivotLabel(this,state,"rows",node,false),text:pivotLabel(this,state,"rows",node,false)}};selected.forEach(({node:column},ci)=>aggregates.forEach((aggregate,ai)=>{const display=pivotDisplay(this,result,node.key,column.key,aggregate);cells["v"+ci+"_"+ai]={...display,text:display.value===null?"":reportingValueText(this,aggregate,display.value,display.mode)}}));rows.push({id:"p"+rows.length,...presentation,cells})}

package/CanopyX.Html/Assets/canopyx-plan.css

@@ -1,47 +1,52 @@
-.cx-plan-legend{display:flex;flex-wrap:wrap;gap:var(--hfx-space-2,0.5rem) var(--hfx-space-4,1rem);padding:calc(var(--hfx-space-1,0.25rem)*1.75) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--hfx-type-caption-size,0.75rem);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-plan-legend{display:flex;flex-wrap:wrap;gap:var(--hfx-space-2,0.5rem) var(--hfx-space-4,1rem);padding:calc(var(--hfx-space-1,0.25rem)*1.75) var(--hfx-space-3,0.75rem);border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));font-size:var(--hfx-type-caption-size,0.75rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 [data-cx-calendar-view]:not([data-cx-calendar-view="timeline"]) .cx-plan-legend{display:none;}
 .cx-plan-legend > span{display:inline-flex;align-items:center;gap:var(--hfx-space-1-5,6px);white-space:nowrap;}
 .cx-plan-legend i{display:inline-block;box-sizing:border-box;width:calc(var(--hfx-space-1,0.25rem)*4.5);height:var(--hfx-space-2,0.5rem);}
 .cx-plan-key-critical{border:var(--hfx-border-width,1px) solid var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
-.cx-plan-key-baseline{border-bottom:calc(var(--hfx-space-1,0.25rem)*0.75) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
-.cx-plan-key-dependency{border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-text,light-dark(#16181c,#f2f3f5));position:relative;}
-.cx-plan-key-dependency::after{content:"";position:absolute;right:0;bottom:calc(var(--hfx-space-1,0.25rem)*-0.75);border:solid var(--hfx-color-text,light-dark(#16181c,#f2f3f5));border-width:0 calc(var(--hfx-space-1,0.25rem)*0.25) calc(var(--hfx-space-1,0.25rem)*0.25) 0;padding:var(--hfx-space-0-5,2px);transform:rotate(-45deg);}
+.cx-plan-key-baseline{border-bottom:calc(var(--hfx-space-1,0.25rem)*0.75) solid var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-plan-key-dependency{border-bottom:var(--hfx-border-width,1px) solid var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));position:relative;}
+.cx-plan-key-dependency::after{content:"";position:absolute;right:0;bottom:calc(var(--hfx-space-1,0.25rem)*-0.75);border:solid var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));border-width:0 calc(var(--hfx-space-1,0.25rem)*0.25) calc(var(--hfx-space-1,0.25rem)*0.25) 0;padding:var(--hfx-space-0-5,2px);transform:rotate(-45deg);}
 .cx-plan-critical{border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));outline:var(--hfx-border-width,1px) solid var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
 .cx-plan-conflict,.cx-plan-proposal-conflict{outline:var(--hfx-border-width,1px) dashed var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));outline-offset:calc(var(--hfx-space-1,0.25rem)*0.25);}
 .cx-plan .cx-tl-lane .cx-plan-milestone{overflow:visible!important;min-width:calc(var(--hfx-space-1,0.25rem)*3.5)!important;width:calc(var(--hfx-space-1,0.25rem)*3.5)!important;margin-inline-start:calc(var(--hfx-space-1,0.25rem)*-1.75);padding:0;border:0!important;background:transparent!important;box-shadow:none;}
 .cx-plan .cx-tl-lane .cx-plan-milestone::before{content:"";position:absolute;width:var(--hfx-space-3,0.75rem);height:var(--hfx-space-3,0.75rem);margin-top:0;background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));transform:rotate(45deg);inset-inline-start:calc(var(--hfx-space-1,0.25rem)*0.25);top:calc(50% - var(--hfx-space-1-5,6px));}
 .cx-plan-milestone > *{visibility:hidden;}
-.cx-plan-milestone:focus-visible::before{outline:var(--hfx-border-width,1px) solid var(--hfx-color-text,light-dark(#16181c,#f2f3f5));outline-offset:calc(var(--hfx-space-1,0.25rem)*0.75);}
-.cx-plan-baseline{position:absolute;height:calc(var(--hfx-space-1,0.25rem)*0.75);background:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));pointer-events:none;}
+.cx-plan-milestone:focus-visible::before{outline:var(--hfx-border-width,1px) solid var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));outline-offset:calc(var(--hfx-space-1,0.25rem)*0.75);}
+.cx-plan-baseline{position:absolute;height:calc(var(--hfx-space-1,0.25rem)*0.75);background:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));pointer-events:none;}
 .cx-plan-links{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
 .cx-plan-task > .cx-cal-ev-title{line-height:var(--hfx-type-small-line,1.4);}
-.cx-plan-links path{stroke:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));stroke-width:1.5;fill:none;}
+.cx-plan-links path{stroke:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));stroke-width:1.5;fill:none;}
 .cx-plan-links .cx-plan-link-critical{stroke:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));stroke-width:2;}
 .cx-plan-links .cx-plan-link-conflict{stroke:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));stroke-dasharray:4 3;}
-.cx-plan-proposal{position:absolute;top:var(--hfx-space-0-5,2px);height:calc(100% - var(--hfx-space-1,0.25rem));box-sizing:border-box;border:var(--hfx-border-width,1px) dashed var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 18%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));padding:0 var(--hfx-space-1,0.25rem);overflow:hidden;white-space:nowrap;pointer-events:none;}
-.cx-plan-proposal-invalid{border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:color-mix(in srgb,var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171)) 18%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
+.cx-plan-proposal{position:absolute;top:var(--hfx-space-0-5,2px);height:calc(100% - var(--hfx-space-1,0.25rem));box-sizing:border-box;border:var(--hfx-border-width,1px) dashed var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 18%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));padding:0 var(--hfx-space-1,0.25rem);overflow:hidden;white-space:nowrap;pointer-events:none;}
+.cx-plan-proposal-invalid{border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:color-mix(in srgb,var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171)) 18%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));}
 .cx-plan-print table{width:100%;border-collapse:collapse;font-size:var(--hfx-type-caption-size,0.75rem);}
-.cx-plan-print th,.cx-plan-print td{padding:calc(var(--hfx-space-1,0.25rem)*1.25);border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));text-align:start;overflow-wrap:anywhere;}
+.cx-plan-print th,.cx-plan-print td{padding:calc(var(--hfx-space-1,0.25rem)*1.25);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));text-align:start;overflow-wrap:anywhere;}
 .cx-plan-print caption{text-align:start;font-weight:var(--hfx-weight-semibold,600);padding-bottom:var(--hfx-space-1-5,6px);}
 @media print{.cx-plan-links,.cx-plan-proposal{display:none!important;}.cx-plan-print{display:block!important;}}
 .cx-plan-critical.cx-plan-milestone::before{background:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
 .cx-plan .cx-tl-main{overflow:auto;}
+.cx-plan .cx-tl-tree.cx-host > .cx-grid{overflow-x:auto;}
+.cx-plan .cx-tl-canvas{padding-block-end:var(--hfx-space-3,0.75rem);}
+.cx-plan .cx-plan-milestone.cx-plan-conflict{outline:0;}
+.cx-plan .cx-plan-milestone.cx-plan-conflict::before{outline:var(--hfx-border-width,1px) dashed var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));outline-offset:var(--hfx-border-width,1px);}
+.cx-plan .cx-plan-milestone.cx-plan-conflict:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
 .cx-plan .cx-tl-now{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-plan-today{position:absolute;inset-block-start:0;transform:translateX(-50%);padding:var(--hfx-space-1,0.25rem) var(--hfx-space-2,0.5rem);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));font-size:var(--hfx-type-caption-size,0.75rem);font-weight:var(--hfx-weight-semibold,600);}
 .cx-plan-key-conflict{border:var(--hfx-border-width,1px) dashed var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
 .cx-plan .cx-tl-lane .cx-plan-label-outside{overflow:visible;}
-.cx-plan .cx-tl-lane .cx-plan-label-outside > .cx-cal-ev-title{--cx-plan-label-layer:1;display:block;position:absolute;z-index:var(--cx-plan-label-layer);inset-inline-start:calc(100% + var(--hfx-space-2,0.5rem));max-inline-size:calc(var(--hfx-space-1,0.25rem) * 40);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));font-weight:var(--hfx-weight-semibold,600);visibility:visible;}
-.cx-plan-links path{pointer-events:stroke;stroke:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
+.cx-plan .cx-tl-lane .cx-plan-label-outside > .cx-cal-ev-title{--cx-plan-label-layer:2;display:block;position:absolute;z-index:var(--cx-plan-label-layer);inset-inline-start:calc(100% + var(--hfx-space-2,0.5rem));max-inline-size:calc(var(--hfx-space-1,0.25rem) * 40);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));font-weight:var(--hfx-weight-semibold,600);visibility:visible;}
+.cx-plan-links path{pointer-events:stroke;stroke:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
 .cx-plan-links path:hover{stroke:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));stroke-width:3;}
 .cx-plan-agenda{display:none;box-sizing:border-box;height:100%;min-height:0;padding:var(--hfx-space-3,0.75rem);flex-direction:column;}
 .cx-plan-agenda-scroll{flex:1 1 auto;min-height:0;overflow:auto;}
 .cx-plan-agenda-list{display:flow-root;}
 .cx-plan-agenda h3{font-size:var(--hfx-type-body-size,0.875rem);margin:var(--hfx-space-3,0.75rem) 0;font-weight:var(--hfx-weight-semibold,600);}
 .cx-plan-agenda ul{list-style:none;margin:0;padding:0;}
-.cx-plan-agenda li{padding:var(--hfx-space-3,0.75rem);margin-block-end:var(--hfx-space-2,0.5rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
-.cx-plan-agenda .cx-plan-agenda-title{height:auto;min-height:0;padding:0;border:0;box-shadow:none;background:transparent;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-weight:var(--hfx-weight-semibold,600);white-space:normal;text-align:start;}
+.cx-plan-agenda li{padding:var(--hfx-space-3,0.75rem);margin-block-end:var(--hfx-space-2,0.5rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
+.cx-plan-agenda .cx-plan-agenda-title{height:auto;min-height:0;padding:0;border:0;box-shadow:none;background:transparent;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));font-weight:var(--hfx-weight-semibold,600);white-space:normal;text-align:start;}
 .cx-plan-agenda p{margin:var(--hfx-space-2,0.5rem) 0 0;font-size:var(--hfx-type-caption-size,0.75rem);line-height:var(--hfx-type-body-line,1.5);}
-.cx-plan-agenda-meta{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-plan-agenda-meta{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-plan-agenda-critical{border-inline-start-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171))!important;}
 .cx-cal-phone .cx-plan-calendar .cx-plan{display:none;}
 .cx-cal-phone .cx-plan-agenda{display:flex;}
@@ -49,8 +54,10 @@
 @media print{.cx-plan-agenda{display:none;}}
 .cx-plan .cx-tl-lane .cx-plan-label-outside > .cx-cal-ev-title{display:block!important;visibility:visible!important;}
 .cx-plan .cx-tl-lane .cx-plan-label-before > .cx-cal-ev-title{inset-inline-start:auto;inset-inline-end:calc(100% + var(--hfx-space-2,0.5rem));}
-.cx-plan-agenda-pager{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--hfx-space-2,0.5rem);border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));padding-block-start:var(--hfx-space-2,0.5rem);}
+.cx-plan .cx-tl-lane .cx-plan-milestone.cx-plan-label-outside > .cx-cal-ev-title{inset-block-start:var(--hfx-border-width,1px);inset-inline-start:calc(100% + var(--hfx-space-3,0.75rem));}
+.cx-plan .cx-tl-lane .cx-plan-milestone.cx-plan-label-before > .cx-cal-ev-title{inset-inline-start:auto;inset-inline-end:calc(100% + var(--hfx-space-3,0.75rem));}
+.cx-plan-agenda-pager{display:flex;flex:none;align-items:center;justify-content:space-between;gap:var(--hfx-space-2,0.5rem);border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));padding-block-start:var(--hfx-space-2,0.5rem);}
 .cx-plan-agenda [hidden]{display:none;}
 .cx-plan-agenda .cx-plan-resource-toggle{padding:0;border:0;min-height:0;height:auto;background:transparent;font:inherit;color:inherit;}
-.cx-plan-agenda-count{margin-inline-start:var(--hfx-space-2,0.5rem);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--hfx-type-caption-size,0.75rem);}
+.cx-plan-agenda-count{margin-inline-start:var(--hfx-space-2,0.5rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);}
 .cx-plan .cx-tl-lane .cx-plan-task{z-index:auto;}

package/CanopyX.Html/Assets/canopyx-plan.js

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"640ca4be173c3310",requires:["timeline"],install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,fill,cellValue,cellText,gridFreeze}=context;DataGrid.prototype.validatePlanDefinition=function(decoded){const input=this.view.plan,calendar=this.view.calendar,columns=new Map(this.columns.map(column=>[column.id,column]));const kind=(id,type)=>typeof id==="string"&&columns.get(id)?.kind===type;if(!input||typeof input!=="object"||Array.isArray(input)||!calendar?.resources||!calendar.end||!calendar.resource||
+(function(global){"use strict";const installed=new WeakSet();const part={version:"db07c2eb53541d49",requires:["timeline"],install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,fill,cellValue,cellText,gridFreeze}=context;DataGrid.prototype.validatePlanDefinition=function(decoded){const input=this.view.plan,calendar=this.view.calendar,columns=new Map(this.columns.map(column=>[column.id,column]));const kind=(id,type)=>typeof id==="string"&&columns.get(id)?.kind===type;if(!input||typeof input!=="object"||Array.isArray(input)||!calendar?.resources||!calendar.end||!calendar.resource||
 calendar.recurrence||calendar.sources?.length||calendar.create||calendar.drop||calendar.views?.length&&!calendar.views.includes("timeline")||
 ["criticalPath","proposeMoves","avoidOverlap"].some(key=>input[key]!==undefined&&typeof input[key]!=="boolean")||
 (input.baselineStart===undefined)!==(input.baselineEnd===undefined)||input.baselineStart!==undefined&&
@@ -21,28 +21,32 @@ add("dependency",edge.to.task,this.planText("planDependencyConflict",{task:edge.
 this.calKit.calOverlaps(proposal.start,proposal.end,start,end);if(this.view.plan.avoidOverlap!==false)for(const other of network.nodes.values()){const item=other.task;if(item.key!==task.key&&item.resource===proposal.resource&&overlap(item.start,item.end))
 add("overlap",item,this.planText("planOverlapConflict",{task:item.title}))}
 for(const range of this.calRanges)if(range.kind==="unavailable"&&(range.resource==null||range.resource===proposal.resource)&&overlap(range.start,range.end))
-add("unavailable",null,this.calLabels.calendarUnavailable);return problems}});const PLAN_METRICS=Object.freeze({actualMinHeight:20,actualBaselineGap:16,baselineMinWidth:3,baselineBottom:7});function planTaskTemplate(element,event,node,labels,milestone,critical,proposeMoves){element.classList.add("cx-plan-task");element.classList.toggle("cx-plan-milestone",milestone);element.classList.toggle("cx-plan-critical",!!critical);element.classList.toggle("cx-plan-conflict",!!node&&[...node.before,...node.after].some(edge=>edge.conflict));if(milestone)labels.push(this.planText("planMilestone"));if(critical)labels.push(this.planText("planCritical"));for(const edge of node?.before||[])if(edge.conflict)labels.push(this.planText("planDependencyConflict",{task:edge.from.task.title}));if(proposeMoves){element.setAttribute("aria-keyshortcuts","Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown");labels.push(this.planText("planMoveHint"))}
+add("unavailable",null,this.calLabels.calendarUnavailable);return problems}});const PLAN_METRICS=Object.freeze({actualMinHeight:20,actualBaselineGap:16,baselineMinWidth:3,baselineBottom:7,dependencyLead:10});function planTaskTemplate(element,event,node,labels,milestone,critical,proposeMoves){element.classList.add("cx-plan-task");element.classList.toggle("cx-plan-milestone",milestone);element.classList.toggle("cx-plan-critical",!!critical);element.classList.toggle("cx-plan-conflict",!!node&&[...node.before,...node.after].some(edge=>edge.conflict));if(milestone)labels.push(this.planText("planMilestone"));if(critical)labels.push(this.planText("planCritical"));for(const edge of node?.before||[])if(edge.conflict)labels.push(this.planText("planDependencyConflict",{task:edge.from.task.title}));if(proposeMoves){element.setAttribute("aria-keyshortcuts","Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown");labels.push(this.planText("planMoveHint"))}
 element.setAttribute("aria-label",labels.join(", "));element.title=labels.join(", ")}
 function planLegendTemplate(){const legend=h("div","cx-plan-legend");for(const[kind,label]of[["critical","planCritical"],["baseline","planBaselineLabel"],["dependency","planDependencies"]]){const item=h("span"),mark=h("i","cx-plan-key-"+kind);mark.setAttribute("aria-hidden","true");item.append(mark,document.createTextNode(this.planText(label)));legend.appendChild(item)}
 const conflict=h("span"),mark=h("i","cx-plan-key-conflict");mark.setAttribute("aria-hidden","true");conflict.append(mark,document.createTextNode(this.planText("planConflict")));legend.appendChild(conflict);return legend}
 function planBaselineTemplate(element,lane,axis,from,to,text){const line=h("div","cx-plan-baseline");line.style.insetInlineStart=axis.x(from)+ "px";line.style.width=Math.max(PLAN_METRICS.baselineMinWidth,axis.x(to)- axis.x(from))+ "px";line.style.top=(Number.parseFloat(element.style.top)+ element._planHeight-PLAN_METRICS.baselineBottom)+ "px";line.title=text;line.setAttribute("aria-hidden","true");lane.appendChild(line)}
 function planLinksTemplate(axis,height){const svg=document.createElementNS("http://www.w3.org/2000/svg","svg");svg.classList.add("cx-plan-links");svg.setAttribute("aria-hidden","true");svg.style.width=axis.total+"px";svg.style.height=height;return svg}
-function planLinkTemplate(svg,axis,from,to,edge,critical,text){const mirror=x=>this.calRtl?axis.total-x:x,x1=mirror(from.end),x2=mirror(to.start),sign=this.calRtl?-1:1;const exit=x1-5*sign,entry=x2-10*sign;const edgeY=to.y>=from.y?from.bottom:from.top,corridor=edgeY +(to.y>=from.y?4:-4);const path=document.createElementNS(svg.namespaceURI,"path");const flat=Math.abs(from.y-to.y)<1&&(x2-x1)*sign>=-1;const route=flat?"M"+(Math.abs(x1-x2)<1?x1-5*sign:x1)+","+from.y+" H"+x2:"M"+exit+","+edgeY+" V"+corridor+" H"+entry+" V"+to.y+" H"+x2;const lead=x2-5*sign;const arrow=" M"+lead+","+(to.y-4)+" L"+x2+","+to.y+" L"+lead+","+(to.y+4);path.setAttribute("d",route+arrow);path.classList.toggle("cx-plan-link-conflict",edge.conflict);path.classList.toggle("cx-plan-link-critical",critical);const title=document.createElementNS(svg.namespaceURI,"title");title.textContent=text;path.appendChild(title);svg.appendChild(path)}
+function planLinkTemplate(svg,axis,from,to,edge,critical,text){const mirror=x=>this.calRtl?axis.total-x:x,x1=mirror(from.end),x2=mirror(to.start),sign=this.calRtl?-1:1;const exit=x1-5*sign,entry=x2-PLAN_METRICS.dependencyLead*sign;const edgeY=to.y>=from.y?from.bottom:from.top,corridor=edgeY +(to.y>=from.y?4:-4);const path=document.createElementNS(svg.namespaceURI,"path");const flat=Math.abs(from.y-to.y)<1&&(x2-x1)*sign>=-1;const crossesLabel=flat&&[from.label,to.label].some(label=>label&&from.y>=label.top-1&&from.y<=label.bottom+1&&Math.max(x1,x2)>label.left&&Math.min(x1,x2)<label.right);const below=Math.max(from.bottom,to.bottom)- 1;const route=crossesLabel?"M"+x1+","+from.y+" V"+below+" H"+entry+" V"+to.y+" H"+x2:flat?"M"+(Math.abs(x1-x2)<1?x1-5*sign:x1)+","+from.y+" H"+x2:"M"+exit+","+edgeY+" V"+corridor+" H"+entry+" V"+to.y+" H"+x2;const lead=x2-5*sign;const arrow=" M"+lead+","+(to.y-4)+" L"+x2+","+to.y+" L"+lead+","+(to.y+4);path.setAttribute("d",route+arrow);path.classList.toggle("cx-plan-link-conflict",edge.conflict);path.classList.toggle("cx-plan-link-critical",critical);const title=document.createElementNS(svg.namespaceURI,"title");title.textContent=text;path.appendChild(title);svg.appendChild(path)}
 function planAgendaTemplate(labels){const root=h("div","cx-plan-agenda"),scroll=h("div","cx-plan-agenda-scroll"),list=h("div","cx-plan-agenda-list");const pager=h("nav","cx-plan-agenda-pager"),previous=h("button","cx-btn cx-plan-agenda-previous"),next=h("button","cx-btn cx-plan-agenda-next"),position=h("span","cx-plan-agenda-position");previous.type=next.type="button";previous.setAttribute("aria-label",labels.gridPreviousPage);next.setAttribute("aria-label",labels.gridNextPage);setText(previous,"\u2039");setText(next,"\u203a");pager.setAttribute("aria-label",labels.gridPaging);pager.append(previous,position,next);scroll.appendChild(list);root.append(scroll,pager);return{root,scroll,list,pager,previous,next,position,page:0}}
 function planAgendaPageTemplate(items,moves){const fragment=document.createDocumentFragment();let current=null,list=null;const heading=group=>{const section=h("section"),title=h("h3"),count=h("span","cx-plan-agenda-count");if(group.expandable){const button=h("button","cx-btn cx-plan-resource-toggle"),mark=h("span");button.type="button";mark.setAttribute("aria-hidden","true");setText(mark,group.row._open?"\u25be":"\u25b8");button.append(mark,document.createTextNode(group.label));button.dataset.cxPlanToggle=group.id;button.setAttribute("aria-expanded",String(!!group.row._open));title.appendChild(button)}else setText(title,group.label);setText(count,String(group.items.length));title.appendChild(count);list=h("ul");list.setAttribute("aria-label",group.label);section.append(title,list);fragment.appendChild(section);current=group};for(const item of items){if(item.kind==="resource"){heading(item.group);continue}
 if(current!==item.group)heading(item.group);const row=h("li"),button=h("button","cx-btn cx-cal-ev cx-plan-agenda-title"),dates=h("p"),meta=h("p","cx-plan-agenda-meta");button.type="button";setText(button,item.task.title);button.title=item.task.title;button.dataset.cxPlanRecord=item.task.key;button.dataset.cxPlanResource=item.group.id;button.dataset.cxEvent=item.task.id;button.dataset.cxRecord=item.task.key;button._calEvent={...item.task,resource:item.group.id};button.setAttribute("aria-label",[item.task.title,item.fullDates,item.meta].join(", "));if(moves)button.setAttribute("aria-keyshortcuts","Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown");setText(dates,item.dates);setText(meta,item.meta);row.classList.toggle("cx-plan-agenda-critical",item.critical);row.append(button,dates,meta);list.appendChild(row)}
 return fragment}
-const PLAN_LABELS={planMilestone:"Milestone",planCritical:"Critical path",planBaseline:"Baseline: {start} – {end}",planDependency:"{from} finishes before {to} starts",planDependencyConflict:"Dependency conflict with {task}",planOverlapConflict:"Overlaps {task}",planIncomplete:"The complete task network is unavailable; the host must check this proposal.",planInvalidRange:"The task must finish at or after its start.",planInvalidResource:"Choose a task resource.",planProposal:"Proposed {task}: {start} – {end}",planMoveHint:"Alt+Left or Alt+Right proposes a new date; Alt+Up or Alt+Down proposes a resource.",planConflict:"Conflict",planActual:"Actual",planPending:"Proposal awaiting the host",planBaselineLabel:"Baseline",planDependencies:"Dependencies"};const PLAN_EVENT=DataGrid.prototype.calEventElement;DataGrid.prototype.calEventElement=function(event,kind){const element=PLAN_EVENT.call(this,event,kind);if(this.view.plan&&kind==="lane"){this.planDecorate(element,event);this.planStart()}
+const PLAN_LABELS={planMilestone:"Milestone",planCritical:"Critical path",planBaseline:"Baseline: {start} – {end}",planDependency:"{from} finishes before {to} starts",planDependencyConflict:"Dependency conflict with {task}",planOverlapConflict:"Overlaps {task}",planIncomplete:"The complete task network is unavailable; the host must check this proposal.",planInvalidRange:"The task must finish at or after its start.",planInvalidResource:"Choose a task resource.",planProposal:"Proposed {task}: {start} – {end}",planMoveHint:"Alt+Left or Alt+Right proposes a new date; Alt+Up or Alt+Down proposes a resource.",planConflict:"Conflict",planActual:"Actual",planPending:"Proposal awaiting the host",planBaselineLabel:"Baseline",planDependencies:"Dependencies"};const PLAN_EVENT=DataGrid.prototype.calEventElement;DataGrid.prototype.calEventElement=function(event,kind,day){const element=PLAN_EVENT.call(this,event,kind,day);if(this.view.plan&&kind==="lane"){this.planDecorate(element,event);this.planStart()}
 return element};const PLAN_LANES=DataGrid.prototype.tlPaintLanes;DataGrid.prototype.tlPaintLanes=function(...args){const result=PLAN_LANES.apply(this,args);if(this.view.plan&&this.tlCanvas&&this.calView==="timeline")this.planPaint();return result};Object.assign(DataGrid.prototype,{planDecorate(element,event){const network=this.planAnalyze(),node=network.nodes.get(event.key),labels=[this.calEventName(event)];const milestone=planMilestone(this,event),critical=this.view.plan.criticalPath!==false&&network.complete&&node?.critical;planTaskTemplate.call(this,element,event,node,labels,milestone,critical,this.view.plan.proposeMoves)},planPaint(){this.tlRoot.classList.add("cx-plan");this.host.classList.add("cx-plan-host");this.calRoot.classList.add("cx-plan-calendar");if(!this.planLegend){const legend=this.planLegend=planLegendTemplate.call(this);this.calBody.before(legend);this.lifetime.signal.addEventListener("abort",()=>{legend.remove();this.host.classList.remove("cx-plan-host");if(this.planFit&&this.host.style.maxHeight===this.planFit.written)this.host.style.maxHeight=this.planFit.inline;this.planAgendaModel=this.planAgendaState=null},{once:true})}
-const network=this.planAnalyze(),axis=this.tlAxis,positions=new Map(),canvasBox=this.tlCanvas.getBoundingClientRect();for(const lane of this.tlLanes.values()){for(const previous of lane.querySelectorAll(".cx-plan-baseline"))previous.remove();for(const element of lane.querySelectorAll(".cx-plan-task")){const task=element._calEvent;if(planMilestone(this,task))element.style.width="0px";const spec=this.view.plan;if(spec.baselineStart){element._planHeight??=Number.parseFloat(element.style.height);if(!planMilestone(this,task))element.style.height=Math.max(PLAN_METRICS.actualMinHeight,element._planHeight-PLAN_METRICS.actualBaselineGap)+ "px"}
-const rect=element.getBoundingClientRect(),start=axis.x(task.tlStart),end=axis.x(planMilestone(this,task)?task.tlStart:task.tlEnd);if(!positions.has(task.key))positions.set(task.key,{start,end,y:rect.top-canvasBox.top+rect.height / 2, top: rect.top - canvasBox.top, bottom: rect.bottom - canvasBox.top });
-const title=element.querySelector(".cx-cal-ev-title");if(title){title.title=task.title;element.classList.remove("cx-plan-label-before");const outside=title.scrollWidth>element.clientWidth-12||planMilestone(this,task);element.classList.toggle("cx-plan-label-outside",outside);const box=title.getBoundingClientRect(),x=axis.x(Date.now()),today=canvasBox.left+(this.calRtl?axis.total-x:x);element.classList.toggle("cx-plan-label-before",outside&&this.cal.now&&today>=box.left-4&&today<=box.right+4)}
+const network=this.planAnalyze(),axis=this.tlAxis,positions=new Map(),canvasBox=this.tlCanvas.getBoundingClientRect();for(const lane of this.tlLanes.values()){for(const previous of lane.querySelectorAll(".cx-plan-baseline"))previous.remove();for(const element of lane.querySelectorAll(".cx-plan-task")){const task=element._calEvent;if(planMilestone(this,task))element.style.width="0px";const spec=this.view.plan;if(spec.baselineStart){element._planHeight??=Number.parseFloat(element.style.height);element.style.height=Math.max(PLAN_METRICS.actualMinHeight,element._planHeight-PLAN_METRICS.actualBaselineGap)+ "px"}
+const rect=element.getBoundingClientRect(),start=axis.x(task.tlStart),end=axis.x(planMilestone(this,task)?task.tlStart:task.tlEnd);if(!positions.has(task.key))positions.set(task.key,{start,end,y:rect.top-canvasBox.top+rect.height / 2, top: rect.top - canvasBox.top, bottom: rect.bottom - canvasBox.top, element });
+const title=element.querySelector(".cx-cal-ev-title");if(title){title.style.maxInlineSize="";title.title=task.title;element.classList.remove("cx-plan-label-before");const outside=title.scrollWidth>element.clientWidth-12||planMilestone(this,task);element.classList.toggle("cx-plan-label-outside",outside);const box=title.getBoundingClientRect(),x=axis.x(Date.now()),today=canvasBox.left+(this.calRtl?axis.total-x:x);element.classList.toggle("cx-plan-label-before",outside&&this.cal.now&&today>=box.left-4&&today<=box.right+4)}
 if(!spec.baselineStart||!spec.baselineEnd)continue;const from=planInstant(task.row.cells[spec.baselineStart]),to=planInstant(task.row.cells[spec.baselineEnd]);if(!Number.isFinite(from)||!Number.isFinite(to)||to<=from||from>=axis.to||to<axis.from)continue;const text=this.planText("planBaseline",{start:this.calFmt.longDay(this.calZone.day(from)),end:this.calFmt.longDay(this.calZone.day(to))});planBaselineTemplate(element,lane,axis,from,to,text);element._planName||=element.getAttribute("aria-label");element.setAttribute("aria-label",element._planName+"; "+text)}}
 for(const lane of this.tlLanes.values()){const rows=new Map();for(const element of lane.querySelectorAll(".cx-plan-task")){const key=element.style.top;if(!rows.has(key))rows.set(key,[]);rows.get(key).push({element,title:element.querySelector(".cx-cal-ev-title"),box:element.getBoundingClientRect()})}
 const overlaps=(a,b)=>a.left<b.right&&a.right>b.left&&a.top<b.bottom&&a.bottom>b.top;for(const items of rows.values()){items.sort((a,b)=>a.box.left-b.box.left);for(const[index,item]of items.entries()){if(!item.title||!item.element.classList.contains("cx-plan-label-outside")||item.element.classList.contains("cx-plan-milestone"))continue;const box=item.title.getBoundingClientRect();if([items[index-1],items[index+1]].some(other=>other&&(overlaps(box,other.box)||other.title&&overlaps(box,other.title.getBoundingClientRect()))))
-item.element.classList.remove("cx-plan-label-outside","cx-plan-label-before")}}}
+item.element.classList.remove("cx-plan-label-outside","cx-plan-label-before")}}
+const tasks=[...lane.querySelectorAll(".cx-plan-task")];for(const element of tasks.filter(task=>task.classList.contains("cx-plan-milestone"))){const title=element.querySelector(".cx-cal-ev-title");if(!title)continue;const box=element.getBoundingClientRect(),label=title.getBoundingClientRect();const obstacles=tasks.filter(task=>task!==element).flatMap(task=>[task,task.querySelector(".cx-cal-ev-title")]).filter(Boolean)
+.map(task=>task.getBoundingClientRect()).filter(other=>other.top<label.bottom&&other.bottom>label.top);const rtl=this.calRtl,currentBefore=element.classList.contains("cx-plan-label-before");const gap=Math.max(0,currentBefore!==rtl?box.left-label.right:label.left-box.right);const successors=network.nodes.get(element._calEvent.key)?.after||[];const needsClearance=side=>successors.some(edge=>{const target=positions.get(edge.to.task.key);if(!target)return false;const x=canvasBox.left +(this.calRtl?axis.total-target.start:target.start);return side==="after"?x>box.right:x<box.left});const after=Math.max(0,Math.min(canvasBox.right,...obstacles.filter(other=>other.right>box.right+gap).map(other=>other.left))- box.right-gap -(needsClearance("after")?PLAN_METRICS.dependencyLead+2:0));const before=Math.max(0,box.left-gap-Math.max(canvasBox.left,...obstacles.filter(other=>other.left<box.left-gap).map(other=>other.right))-(needsClearance("before")?PLAN_METRICS.dependencyLead+2:0));const currentRoom=currentBefore!==rtl?before:after;const alternateRoom=currentBefore!==rtl?after:before;const flip=currentRoom<label.width&&alternateRoom>currentRoom;if(flip)element.classList.toggle("cx-plan-label-before");title.style.maxInlineSize=Math.min(parseFloat(getComputedStyle(title).maxInlineSize)||160,flip?alternateRoom:currentRoom)+ "px"}}
+for(const position of positions.values()){const title=position.element.querySelector(".cx-cal-ev-title"),rect=title?.getBoundingClientRect();if(rect?.width)position.label={left:rect.left-canvasBox.left,right:rect.right-canvasBox.left,top:rect.top-canvasBox.top,bottom:rect.bottom-canvasBox.top}}
 const svg=planLinksTemplate(axis,this.tlCanvas.style.height);for(const edge of network.edges){const from=positions.get(edge.from.task.key),to=positions.get(edge.to.task.key);if(!from||!to)continue;const tight=Math.abs(edge.from.early+edge.from.task.end-edge.from.task.start+edge.lag-edge.to.early)<1;const critical=this.view.plan.criticalPath!==false&&network.complete&&edge.from.critical&&edge.to.critical&&tight;planLinkTemplate.call(this,svg,axis,from,to,edge,critical,this.planText("planDependency",{from:edge.from.task.title,to:edge.to.task.title}))}
-this.planLinks?.remove();this.planLinks=svg;this.tlCanvas.appendChild(svg);this.tlRoot.dataset.cxPlanComplete=String(network.complete);if(!this.calPhone)this.planFitHeight((this.tlTree.tops[this.tlTree.rows.length]||0)+this.tlHead.offsetHeight+2);this.tlHead.querySelector(".cx-plan-today")?.remove();const now=Date.now();if(this.cal.now&&now>=axis.from&&now<axis.to){const label=h("span","cx-plan-today");setText(label,this.calLabels.calendarToday);label.style.insetInlineStart=axis.x(now)+ "px";this.tlHead.appendChild(label)}
+this.planLinks?.remove();this.planLinks=svg;this.tlCanvas.appendChild(svg);this.tlRoot.dataset.cxPlanComplete=String(network.complete);if(!this.calPhone){const padding=parseFloat(getComputedStyle(this.tlCanvas).paddingBottom)||0;const scrollbar=this.tlMain.offsetHeight-this.tlMain.clientHeight;this.planFitHeight((this.tlTree.tops[this.tlTree.rows.length]||0)+this.tlHead.offsetHeight+padding+scrollbar+2)}
+this.tlHead.querySelector(".cx-plan-today")?.remove();const now=Date.now();if(this.cal.now&&now>=axis.from&&now<axis.to){const label=h("span","cx-plan-today");setText(label,this.calLabels.calendarToday);label.style.insetInlineStart=axis.x(now)+ "px";this.tlHead.appendChild(label)}
 this.planPaintAgenda(network);this.planPaintProposal()}});const PLAN_AGENDA_PAGE=50;Object.assign(DataGrid.prototype,{planPaintAgenda(network){if(!this.calPhone){this.planAgenda?.remove();this.planAgenda=this.planAgendaState=this.planAgendaModel=null;return}
 let state=this.planAgendaState;if(!state){state=this.planAgendaState=planAgendaTemplate(this.labels);this.planAgenda=state.root;state.previous.addEventListener("click",()=>{--state.page;this.planPaintAgendaPage()});state.next.addEventListener("click",()=>{++state.page;this.planPaintAgendaPage()})}
 if(state.root.parentNode!==this.calBody)this.calBody.appendChild(state.root);const old=this.planAgendaModel;if(old?.events===this.calEvents&&old.rows===this.tlTree.rows&&old.network===network){this.planFitAgendaHeight();return}

package/CanopyX.Html/Assets/canopyx-record-panel.css

@@ -6,88 +6,88 @@ body .cx-host.cx-drawer.cx-record-drawer{max-width:var(--cx-size-640px);}
 .cx-record-btn .cx-ico{width:var(--cx-size-16px);height:var(--cx-size-16px);flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}
 .cx-drawer .cx-record-link{min-height:0;padding:0;border:0;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));text-decoration:underline;text-underline-offset:var(--cx-size-2px);overflow-wrap:anywhere;}
 .cx-drawer .cx-record-link:hover{background:transparent;text-decoration-thickness:var(--cx-size-2px);}
-.cx-record-trail{display:flex;align-items:center;gap:var(--cx-size-8px);min-width:0;margin:0 0 var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-trail{display:flex;align-items:center;gap:var(--cx-size-8px);min-width:0;margin:0 0 var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-drawer .cx-record-back{min-height:0;padding:0 var(--cx-size-4px) 0 0;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));font-weight:600;}
 .cx-record-crumbs{display:flex;align-items:center;gap:var(--cx-size-4px);min-width:0;margin:0;padding:0;list-style:none;overflow:hidden;}
 .cx-record-crumbs li{display:flex;align-items:center;gap:var(--cx-size-4px);min-width:0;}
 .cx-record-crumbs li::before{content:"›";}
-.cx-drawer .cx-record-crumb{display:block;max-width:var(--cx-size-160px);min-height:0;padding:0 var(--cx-size-2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
-.cx-record-summary{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-20px);padding:var(--cx-size-10px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));}
+.cx-drawer .cx-record-crumb{display:block;max-width:var(--cx-size-160px);min-height:0;padding:0 var(--cx-size-2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-record-summary{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-20px);padding:var(--cx-size-10px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));}
 .cx-record-status{display:flex;align-items:center;gap:var(--cx-size-6px);}
 .cx-record-facts{display:flex;flex-wrap:wrap;gap:var(--cx-size-6px) var(--cx-size-20px);margin:0;}
 .cx-record-fact{min-width:0;}
-.cx-record-fact dt{font-size:var(--cx-size-11d5px);letter-spacing:var(--cx-size-d04em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-fact dt{font-size:var(--cx-size-11d5px);letter-spacing:var(--cx-size-d04em);text-transform:uppercase;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-record-fact dd{margin:0;font-weight:600;overflow-wrap:anywhere;}
 .cx-drawer .cx-drawer-h > .cx-record-menu{position:relative;flex:none;}
 .cx-drawer .cx-record-menu-btn{justify-content:center;width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;}
-.cx-record-menu-list{position:absolute;right:0;top:calc(100% + var(--cx-size-4px));z-index:5;display:flex;flex-direction:column;min-width:var(--cx-size-180px);padding:var(--cx-size-4px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));}
+.cx-record-menu-list{position:absolute;right:0;top:calc(100% + var(--cx-size-4px));z-index:5;display:flex;flex-direction:column;min-width:var(--cx-size-180px);padding:var(--cx-size-4px);background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));}
 .cx-record-menu-item{justify-content:flex-start;min-height:var(--cx-size-32px);white-space:nowrap;}
-.cx-record-tools{position:sticky;top:0;z-index:3;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-record-tools{position:sticky;top:0;z-index:3;background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-record-tabs{display:flex;gap:var(--cx-size-2px);padding:0 var(--cx-size-10px);overflow-x:auto;scrollbar-width:thin;}
-.cx-record-tab{flex:none;padding:var(--cx-size-10px) var(--cx-size-10px) var(--cx-size-8px);border:0;border-bottom:var(--cx-size-2px) solid transparent;background:transparent;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;}
-.cx-record-tab:hover{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
-.cx-record-tab[aria-selected="true"]{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));border-bottom-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-record-tab{flex:none;padding:var(--cx-size-10px) var(--cx-size-10px) var(--cx-size-8px);border:0;border-bottom:var(--cx-size-2px) solid transparent;background:transparent;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;}
+.cx-record-tab:hover{color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
+.cx-record-tab[aria-selected="true"]{color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));border-bottom-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-record-subtools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-4px) var(--cx-size-12px);padding:var(--cx-size-6px) var(--cx-size-12px);}
-.cx-record-tabs + .cx-record-subtools{border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-record-tabs + .cx-record-subtools{border-top:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-record-jump{display:flex;flex-wrap:wrap;gap:var(--cx-size-4px);flex:1;min-width:0;}
-.cx-drawer .cx-record-jump-link{min-height:var(--cx-size-24px);padding:0 var(--cx-size-10px);border-color:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));font-size:var(--cx-size-13px);color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
-.cx-drawer .cx-record-empty{margin-inline-start:auto;min-height:var(--cx-size-24px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
-.cx-record-section{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-drawer .cx-record-jump-link{min-height:var(--cx-size-24px);padding:0 var(--cx-size-10px);border-color:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));font-size:var(--cx-size-13px);color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
+.cx-drawer .cx-record-empty{margin-inline-start:auto;min-height:var(--cx-size-24px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-record-section{border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-record-section:last-child{border-bottom:0;}
-.cx-record-section .cx-record-section{border-bottom:0;margin:0 var(--cx-size-16px) var(--cx-size-4px);border-inline-start:var(--cx-size-2px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-record-section .cx-record-section{border-bottom:0;margin:0 var(--cx-size-16px) var(--cx-size-4px);border-inline-start:var(--cx-size-2px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-record-section-h{margin:0;font:inherit;}
-.cx-drawer .cx-record-toggle{width:100%;padding:calc(var(--hfx-space-1,0.25rem)*2.5) 0 var(--hfx-space-1,0.25rem);border:0;border-radius:var(--hfx-radius-none,0);font-size:var(--hfx-type-small-size,0.8125rem);font-weight:var(--hfx-weight-semibold,600);letter-spacing:0;text-transform:none;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-drawer .cx-record-toggle{width:100%;padding:calc(var(--hfx-space-1,0.25rem)*2.5) 0 var(--hfx-space-1,0.25rem);border:0;border-radius:var(--hfx-radius-none,0);font-size:var(--hfx-type-small-size,0.8125rem);font-weight:var(--hfx-weight-semibold,600);letter-spacing:0;text-transform:none;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
 .cx-record-toggle > .cx-record-btn-label{flex:1;min-width:0;text-align:start;order:0;}
 .cx-record-toggle .cx-ico{width:var(--cx-size-14px);height:var(--cx-size-14px);order:1;margin-inline-start:auto;transform:rotate(90deg);transition:transform .12s;}
 .cx-record-toggle[aria-expanded="false"] .cx-ico{transform:none;}
-.cx-drawer .cx-record-section .cx-record-section .cx-record-toggle{padding:var(--cx-size-6px) var(--cx-size-10px) var(--cx-size-2px);font-size:var(--cx-size-13px);letter-spacing:0;text-transform:none;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-drawer .cx-record-section .cx-record-section .cx-record-toggle{padding:var(--cx-size-6px) var(--cx-size-10px) var(--cx-size-2px);font-size:var(--cx-size-13px);letter-spacing:0;text-transform:none;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
 .cx-record-section .cx-record-section .cx-dl{padding:var(--cx-size-4px) var(--cx-size-10px) var(--cx-size-6px);}
 .cx-record-section-b{padding-bottom:var(--cx-size-6px);}
 .cx-record-section-b > .cx-dl{padding-top:var(--cx-size-6px);padding-bottom:var(--cx-size-6px);}
-.cx-record-object{grid-template-columns:minmax(var(--cx-size-92px),max-content) 1fr;gap:var(--cx-size-2px) var(--cx-size-12px);padding:var(--cx-size-2px) 0 var(--cx-size-2px) var(--cx-size-10px);border-inline-start:var(--cx-size-2px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-record-object{grid-template-columns:minmax(var(--cx-size-92px),max-content) 1fr;gap:var(--cx-size-2px) var(--cx-size-12px);padding:var(--cx-size-2px) 0 var(--cx-size-2px) var(--cx-size-10px);border-inline-start:var(--cx-size-2px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-drawer .cx-record-object dd{margin-bottom:0;}
 .cx-record-section-b,.cx-record-object-value{container-type:inline-size;min-width:0;}
 @container (max-width:400px){
 .cx-record-object,.cx-record-section-b > .cx-dl{grid-template-columns:minmax(0,1fr);gap:var(--cx-size-2px) 0;}
 }
 .cx-record-block{padding:var(--cx-size-6px) var(--cx-size-16px) var(--cx-size-10px);}
-.cx-record-block-h{margin-bottom:var(--cx-size-6px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-block-h{margin-bottom:var(--cx-size-6px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-record-custom{padding:var(--cx-size-6px) var(--cx-size-16px);}
 .cx-record-custom:empty{display:none;}
 .cx-record-chips{display:flex;flex-wrap:wrap;gap:var(--cx-size-4px);}
 .cx-drawer .cx-record-chip{display:inline-flex;align-items:center;max-width:100%;min-height:var(--cx-size-22px);padding:0 var(--cx-size-8px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-status,999px);font-size:var(--cx-size-13px);overflow-wrap:anywhere;text-decoration:none;}
-.cx-drawer .cx-record-chip:is(.cx-tone-info,.cx-tone-success,.cx-tone-warning,.cx-tone-danger,.cx-toned){background:color-mix(in srgb,currentColor 9%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border-color:color-mix(in srgb,currentColor 38%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
+.cx-drawer .cx-record-chip:is(.cx-tone-info,.cx-tone-success,.cx-tone-warning,.cx-tone-danger,.cx-toned){background:color-mix(in srgb,currentColor 9%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));border-color:color-mix(in srgb,currentColor 38%,var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));}
 .cx-drawer .cx-record-chip.cx-record-link{color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
-.cx-drawer .cx-diff-removed{text-decoration:line-through;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-drawer .cx-diff-removed{text-decoration:line-through;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-drawer .cx-diff-added{font-weight:600;border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
-.cx-record-more-count{margin-inline-start:var(--cx-size-4px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-12d5px);}
-.cx-drawer :is(.cx-record-more,.cx-record-load-more,.cx-record-retry){margin-top:var(--cx-size-6px);border-color:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
+.cx-record-more-count{margin-inline-start:var(--cx-size-4px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--cx-size-12d5px);}
+.cx-drawer :is(.cx-record-more,.cx-record-load-more,.cx-record-retry){margin-top:var(--cx-size-6px);border-color:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
 :is(.cx-record-diff,.cx-record-table){width:100%;border-collapse:collapse;font-size:var(--cx-size-13px);}
-:is(.cx-record-diff,.cx-record-table) :is(th,td){padding:var(--cx-size-4px) var(--cx-size-8px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));text-align:start;vertical-align:top;overflow-wrap:anywhere;}
-:is(.cx-record-diff,.cx-record-table) thead th{font-size:var(--cx-size-12px);font-weight:600;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+:is(.cx-record-diff,.cx-record-table) :is(th,td){padding:var(--cx-size-4px) var(--cx-size-8px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));text-align:start;vertical-align:top;overflow-wrap:anywhere;}
+:is(.cx-record-diff,.cx-record-table) thead th{font-size:var(--cx-size-12px);font-weight:600;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-record-diff tbody th{width:30%;font-weight:600;}
-.cx-record-diff .cx-diff-before{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-diff .cx-diff-before{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-record-diff-compact{margin-top:var(--cx-size-6px);}
 .cx-record-diff-compact thead{display:none;}
-.cx-record-collection-h{display:flex;align-items:center;gap:var(--cx-size-8px);margin-bottom:var(--cx-size-6px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-collection-h{display:flex;align-items:center;gap:var(--cx-size-8px);margin-bottom:var(--cx-size-6px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-drawer .cx-record-open-all{margin-inline-start:auto;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));font-weight:600;}
-.cx-record-nested{height:var(--cx-size-360px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-record-nested{height:var(--cx-size-360px);border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 .cx-record-nested.cx-host{padding:0;}
-.cx-record-card{margin-bottom:var(--cx-size-8px);padding:var(--cx-size-8px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
+.cx-record-card{margin-bottom:var(--cx-size-8px);padding:var(--cx-size-8px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
 .cx-record-card-title{font-weight:600;}
 .cx-drawer .cx-record-card .cx-dl{grid-template-columns:1fr;gap:0;padding:var(--cx-size-4px) 0 0;}
-.cx-record-card dt{font-size:var(--cx-size-12px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-card dt{font-size:var(--cx-size-12px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-drawer .cx-record-card dd{margin-bottom:var(--cx-size-4px);}
 .cx-timeline{position:relative;margin:0;padding:0;list-style:none;}
-.cx-timeline-day{padding:var(--cx-size-8px) 0 var(--cx-size-2px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d04em);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-timeline-day{padding:var(--cx-size-8px) 0 var(--cx-size-2px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d04em);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-timeline-item{position:relative;display:grid;grid-template-columns:var(--cx-size-16px) 1fr;gap:var(--cx-size-8px);padding:var(--cx-size-4px) 0 var(--cx-size-8px);}
-.cx-timeline-item::before{content:"";position:absolute;left:calc(var(--cx-size-8px) - var(--cx-size-1px));top:var(--cx-size-20px);bottom:0;width:var(--cx-size-2px);background:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-timeline-item::before{content:"";position:absolute;left:calc(var(--cx-size-8px) - var(--cx-size-1px));top:var(--cx-size-20px);bottom:0;width:var(--cx-size-2px);background:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-timeline-item:last-child::before{display:none;}
-.cx-timeline-dot{width:var(--cx-size-10px);height:var(--cx-size-10px);margin:var(--cx-size-5px) auto 0;border-radius:50%;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));background:currentColor;}
+.cx-timeline-dot{width:var(--cx-size-10px);height:var(--cx-size-10px);margin:var(--cx-size-5px) auto 0;border-radius:50%;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));background:currentColor;}
 .cx-timeline-dot:is(.cx-tone-info,.cx-tone-success,.cx-tone-warning,.cx-tone-danger,.cx-toned){color:var(--cx-t,inherit);}
-.cx-timeline-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px);font-size:var(--cx-size-12d5px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-timeline-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px);font-size:var(--cx-size-12d5px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-timeline-summary{margin-top:var(--cx-size-2px);overflow-wrap:anywhere;}
-.cx-record-note{margin:var(--cx-size-8px) var(--cx-size-16px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-style:italic;}
+.cx-record-note{margin:var(--cx-size-8px) var(--cx-size-16px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-style:italic;}
 .cx-record-error{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px);color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));font-style:normal;}
 .cx-drawer.cx-phone :is(.cx-record-btn,.cx-record-tab){min-height:var(--cx-size-44px);}
 .cx-drawer.cx-phone .cx-record-menu-btn{width:var(--cx-size-44px);height:var(--cx-size-44px);}
@@ -95,26 +95,31 @@ body .cx-host.cx-drawer.cx-record-drawer{max-width:var(--cx-size-640px);}
 .cx-drawer.cx-phone :is(.cx-record-link,.cx-record-crumb){min-height:var(--cx-size-24px);}
 .cx-drawer.cx-phone .cx-record-nested{height:var(--cx-size-280px);}
 .cx-drawer.cx-phone .cx-record-section .cx-record-section{margin-inline:var(--cx-size-10px);}
+.cx-drawer.cx-phone .cx-record-subtools{flex-direction:column;align-items:stretch;}
+.cx-drawer.cx-phone .cx-record-jump{flex:none;flex-wrap:nowrap;width:100%;box-sizing:border-box;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-block:var(--hfx-space-0-5,2px);padding-inline-end:var(--hfx-space-4,1rem);mask-image:linear-gradient(to right,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) calc(100% - var(--hfx-space-4,1rem)),transparent);}
+.cx-drawer.cx-phone .cx-record-jump:dir(rtl){mask-image:linear-gradient(to left,var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) calc(100% - var(--hfx-space-4,1rem)),transparent);}
+.cx-drawer.cx-phone .cx-record-jump-link{flex:none;white-space:nowrap;scroll-snap-align:start;}
+.cx-drawer.cx-phone .cx-record-empty{align-self:flex-start;margin-inline-start:0;}
 .cx-record-print{display:none;}
 @media print{
 html.cx-record-printing body > :not(.cx-record-print){display:none !important;}
-html.cx-record-printing .cx-record-print{display:block;padding:0;font:var(--cx-size-12px)/1.4 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+html.cx-record-printing .cx-record-print{display:block;padding:0;font:var(--cx-size-12px)/1.4 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 .cx-record-print h1{margin:0 0 var(--cx-size-4px);font-size:var(--cx-size-20px);}
 .cx-record-print h2{margin:var(--cx-size-16px) 0 var(--cx-size-4px);font-size:var(--cx-size-16px);}
 .cx-record-print .cx-record-section{break-inside:avoid;border:0;}
-.cx-record-print .cx-record-section-h{margin:var(--cx-size-10px) 0 var(--cx-size-2px);font-size:var(--cx-size-11d5px);font-weight:700;text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-record-print .cx-record-section-h{margin:var(--cx-size-10px) 0 var(--cx-size-2px);font-size:var(--cx-size-11d5px);font-weight:700;text-transform:uppercase;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-record-print .cx-dl{display:grid;grid-template-columns:var(--cx-size-180px) 1fr;gap:var(--cx-size-2px) var(--cx-size-12px);margin:0;padding:0;}
 .cx-record-print dd{margin:0;}
-.cx-record-print .p-sub{margin-inline-start:var(--cx-size-6px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
-.cx-record-print .cx-record-summary{border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-record-print .p-sub{margin-inline-start:var(--cx-size-6px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-record-print .cx-record-summary{border:var(--cx-size-1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 }
 @media (prefers-reduced-motion:reduce){.cx-record-toggle .cx-ico{transition:none;}}
 @media (forced-colors:active){.cx-record-tab[aria-selected="true"]{border-bottom-color:Highlight;}.cx-timeline-dot{forced-color-adjust:none;background:CanvasText;}}
-.cx-record-footer{flex:none;display:flex;justify-content:flex-end;gap:var(--hfx-space-2,0.5rem);padding:var(--hfx-space-3,0.75rem) var(--hfx-space-4,1rem);border-top:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-record-footer{flex:none;display:flex;justify-content:flex-end;gap:var(--hfx-space-2,0.5rem);padding:var(--hfx-space-3,0.75rem) var(--hfx-space-4,1rem);border-top:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 .cx-record-footer .cx-record-primary{color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
-.cx-record-footer .cx-record-primary:disabled{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border-color:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));cursor:wait;}
-.cx-record-subtitle{margin:var(--hfx-space-1,0.25rem) 0 0;font-size:var(--hfx-type-small-size,0.8125rem);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
-.cx-record-drawer .cx-dl dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--hfx-type-caption-size,0.75rem);font-weight:normal;}
+.cx-record-footer .cx-record-primary:disabled{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border-color:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));cursor:wait;}
+.cx-record-subtitle{margin:var(--hfx-space-1,0.25rem) 0 0;font-size:var(--hfx-type-small-size,0.8125rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
+.cx-record-drawer .cx-dl dt{color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);font-weight:normal;}
 .cx-record-drawer .cx-dl dd{font-size:var(--hfx-type-body-size,0.875rem);}
 .cx-drawer.cx-record-drawer .cx-drawer-h h4{width:auto;max-width:100%;overflow-wrap:anywhere;}
 .cx-drawer.cx-record-drawer .cx-drawer-h > :not(:first-child){flex:none;margin-inline:0;}