@evotecit/canopyx 0.3.13 → 0.3.16

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

@@ -1,47 +1,47 @@
 /* Flow part: steps,fields,the review page and the result,in the grid's tokens,density and type (docs/flow.md#layouts). */
 .cx-flow{--cx-flow-pad:var(--cx-size-20px);--cx-flow-gap:var(--cx-size-16px);--cx-flow-control:var(--cx-size-34px);
---cx-size-220px:220px;--cx-size-720px:720px;container-type:inline-size;position:relative;color:var(--cx-text);background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-size-8px);font:var(--cx-size-14px)/1.45 var(--cx-font);}
+--cx-size-220px:220px;--cx-size-720px:720px;container-type:inline-size;position:relative;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));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-control,var(--hfx-radius-md,6px));font:var(--cx-size-14px)/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
 .cx-flow[data-cx-density="compact"]{--cx-flow-pad:var(--cx-size-14px);--cx-flow-gap:var(--cx-size-12px);--cx-flow-control:var(--cx-size-30px);}
 .cx-flow[data-cx-density="comfortable"]{--cx-flow-pad:var(--cx-size-24px);--cx-flow-gap:var(--cx-size-20px);--cx-flow-control:var(--cx-size-38px);}
 .cx-flow :where(h2,h3,h4,p,ul,ol,dl,dd){margin:0;}
 .cx-flow [hidden]{display:none !important;}
-.cx-flow-head{padding:var(--cx-size-14px) var(--cx-flow-pad);border-bottom:var(--cx-size-1px) solid var(--cx-line);}
+.cx-flow-head{padding:var(--cx-size-14px) var(--cx-flow-pad);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-flow-title{font-size:var(--cx-size-17px);font-weight:600;line-height:1.3;}
-.cx-flow-desc{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--cx-muted);}
+.cx-flow-desc{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-marks{list-style:none;padding:0;}
-.cx-flow-mark-btn{display:flex;align-items:center;gap:var(--cx-size-10px);width:100%;min-height:var(--cx-size-44px);padding:var(--cx-size-6px) var(--cx-size-8px);border:0;border-radius:var(--cx-radius);background:transparent;color:var(--cx-muted);font:inherit;text-align:start;cursor:pointer;}
-.cx-flow-mark-btn:hover{background:var(--cx-hover-bg);}
+.cx-flow-mark-btn{display:flex;align-items:center;gap:var(--cx-size-10px);width:100%;min-height:var(--cx-size-44px);padding:var(--cx-size-6px) var(--cx-size-8px);border:0;border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:transparent;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font:inherit;text-align:start;cursor:pointer;}
+.cx-flow-mark-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
 .cx-flow-mark-btn[aria-disabled="true"]{cursor:default;}
 .cx-flow-mark-btn[aria-disabled="true"]:hover{background:transparent;}
-.cx-flow-mark-btn:focus-visible,.cx-flow :is(.cx-flow-btn,.cx-flow-link,.cx-flow-icon-btn):focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-1px);}
-.cx-flow-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-24px);height:var(--cx-size-24px);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:50%;
-background:var(--cx-surface);font-size:var(--cx-size-12d5px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--cx-muted);}
+.cx-flow-mark-btn:focus-visible,.cx-flow :is(.cx-flow-btn,.cx-flow-link,.cx-flow-icon-btn):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-flow-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-24px);height:var(--cx-size-24px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:50%;
+background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));font-size:var(--cx-size-12d5px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-mark-text{display:flex;flex-direction:column;min-width:0;}
 .cx-flow-mark-title{font-size:var(--cx-size-13d5px);line-height:1.3;overflow-wrap:anywhere;}
-.cx-flow-mark-state{font-size:var(--cx-size-12px);color:var(--cx-muted);}
-.cx-flow-mark[data-cx-state="current"] .cx-flow-num{background:var(--cx-accent);border-color:var(--cx-accent);color:var(--cx-on-accent);}
-.cx-flow-mark[data-cx-state="current"] .cx-flow-mark-title{color:var(--cx-text);font-weight:600;}
-.cx-flow-mark[data-cx-state="complete"] .cx-flow-mark-title{color:var(--cx-text-2);}
-.cx-flow-mark[data-cx-state="complete"] .cx-flow-num{color:var(--cx-tone-success);border-color:color-mix(in srgb,var(--cx-tone-success) 45%,var(--cx-surface));}
-.cx-flow-mark[data-cx-state="error"] .cx-flow-num{color:var(--cx-tone-danger);border-color:var(--cx-tone-danger);background:var(--cx-tone-danger-bg);}
-.cx-flow-mark[data-cx-state="error"] :is(.cx-flow-mark-title,.cx-flow-mark-state){color:var(--cx-tone-danger);}
+.cx-flow-mark-state{font-size:var(--cx-size-12px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-flow-mark[data-cx-state="current"] .cx-flow-num{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));}
+.cx-flow-mark[data-cx-state="current"] .cx-flow-mark-title{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-weight:600;}
+.cx-flow-mark[data-cx-state="complete"] .cx-flow-mark-title{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
+.cx-flow-mark[data-cx-state="complete"] .cx-flow-num{color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));border-color:color-mix(in srgb,var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a)) 45%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
+.cx-flow-mark[data-cx-state="error"] .cx-flow-num{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));}
+.cx-flow-mark[data-cx-state="error"] :is(.cx-flow-mark-title,.cx-flow-mark-state){color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
 .cx-flow-mark[data-cx-state="locked"]{opacity:.72;}
-.cx-flow-horizontal > .cx-flow-rail{padding:var(--cx-size-8px) calc(var(--cx-flow-pad) - var(--cx-size-8px));border-bottom:var(--cx-size-1px) solid var(--cx-line);background:var(--cx-head-bg);overflow-x:auto;scrollbar-width:thin;}
+.cx-flow-horizontal > .cx-flow-rail{padding:var(--cx-size-8px) calc(var(--cx-flow-pad) - var(--cx-size-8px));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));overflow-x:auto;scrollbar-width:thin;}
 .cx-flow-horizontal .cx-flow-marks{display:flex;align-items:center;gap:var(--cx-size-4px);min-width:max-content;}
 .cx-flow-horizontal .cx-flow-mark{display:flex;align-items:center;gap:var(--cx-size-4px);}
-.cx-flow-horizontal .cx-flow-mark + .cx-flow-mark::before{content:"";flex:none;width:var(--cx-size-24px);border-top:var(--cx-size-1px) solid var(--cx-line-strong);}
+.cx-flow-horizontal .cx-flow-mark + .cx-flow-mark::before{content:"";flex:none;width:var(--cx-size-24px);border-top:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
 .cx-flow-horizontal .cx-flow-mark-btn{width:auto;min-height:var(--cx-size-36px);}
 .cx-flow-horizontal .cx-flow-mark-title{white-space:nowrap;}
 .cx-flow-horizontal .cx-flow-mark-state:not(.cx-sr-only){display:none;}
 .cx-flow-horizontal .cx-flow-mark[data-cx-state="error"] .cx-flow-mark-state{display:block;}
 .cx-flow-vertical{display:grid;grid-template-columns:minmax(var(--cx-size-180px),var(--cx-size-240px)) minmax(0,1fr);}
-.cx-flow-vertical > .cx-flow-rail{padding:var(--cx-size-12px) var(--cx-size-8px);border-inline-end:var(--cx-size-1px) solid var(--cx-line);background:var(--cx-head-bg);border-end-start-radius:var(--cx-size-8px);}
+.cx-flow-vertical > .cx-flow-rail{padding:var(--cx-size-12px) var(--cx-size-8px);border-inline-end:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border-end-start-radius:var(--cx-size-8px);}
 .cx-flow-vertical .cx-flow-marks{display:flex;flex-direction:column;gap:var(--cx-size-2px);}
 .cx-flow-vertical .cx-flow-mark-btn{align-items:flex-start;}
-.cx-flow-vertical .cx-flow-mark-btn[aria-current="step"]{background:var(--cx-surface);box-shadow:inset 0 0 0 var(--cx-size-1px) var(--cx-line);}
+.cx-flow-vertical .cx-flow-mark-btn[aria-current="step"]{background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));box-shadow:inset 0 0 0 var(--cx-size-1px) var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-flow-single > .cx-flow-rail{display:none;}
 .cx-flow-single .cx-flow-actions{border-end-start-radius:var(--cx-size-8px);}
-.cx-flow-stack .cx-flow-mark{border-bottom:var(--cx-size-1px) solid var(--cx-line);}
+.cx-flow-stack .cx-flow-mark{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-flow-stack .cx-flow-mark:last-child{border-bottom:0;}
 .cx-flow-stack .cx-flow-mark-btn{padding:var(--cx-size-8px) var(--cx-flow-pad);border-radius:0;}
 .cx-flow-stack .cx-flow-mark[data-cx-state="current"] > .cx-flow-mark-btn{padding-bottom:var(--cx-size-2px);}
@@ -52,83 +52,83 @@ background:var(--cx-surface);font-size:var(--cx-size-12d5px);font-weight:600;fon
 .cx-flow-stage{padding:var(--cx-size-20px) var(--cx-flow-pad) var(--cx-size-8px);}
 .cx-flow-step{max-width:var(--cx-size-720px);}
 .cx-flow-step-title{font-size:var(--cx-size-16px);font-weight:600;line-height:1.3;outline:none;}
-.cx-flow-step-desc{margin-top:var(--cx-size-4px);color:var(--cx-muted);font-size:var(--cx-size-13d5px);}
+.cx-flow-step-desc{margin-top:var(--cx-size-4px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13d5px);}
 .cx-flow-step > :is(.cx-flow-block,.cx-flow-section,.cx-flow-summary,.cx-flow-banner,.cx-flow-answer-banner,.cx-flow-review-tools,.cx-flow-review-lists,.cx-flow-declaration,.cx-flow-panel-text,.cx-flow-answers,.cx-flow-links,.cx-flow-bar){margin-top:var(--cx-flow-gap);}
-.cx-flow-section{padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--cx-line);}
-.cx-flow-section-title{padding-top:var(--cx-size-10px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--cx-muted);}
-.cx-flow-section-desc{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--cx-muted);}
+.cx-flow-section{padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-flow-section-title{padding-top:var(--cx-size-10px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-flow-section-desc{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-section > .cx-flow-grid{margin-top:var(--cx-size-12px);}
 .cx-flow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cx-flow-gap) var(--cx-size-16px);}
 .cx-flow-field{grid-column:1 / -1;min-width:0;}
 .cx-flow-field.cx-flow-half{grid-column:auto;}
 @container (max-width:520px){.cx-flow-field.cx-flow-half{grid-column:1 / -1;}}
-.cx-flow-label{display:block;font-weight:600;font-size:var(--cx-size-13d5px);color:var(--cx-text);}
-.cx-flow-optional{font-weight:400;color:var(--cx-muted);}
-.cx-flow-help{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--cx-muted);}
+.cx-flow-label{display:block;font-weight:600;font-size:var(--cx-size-13d5px);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-flow-optional{font-weight:400;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-flow-help{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-control{margin-top:var(--cx-size-6px);}
-.cx-flow-error{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--cx-tone-danger);}
+.cx-flow-error{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
 .cx-flow .cx-flow-input{box-sizing:border-box;width:100%;max-width:var(--cx-size-440px);min-height:var(--cx-flow-control);height:var(--cx-flow-control);margin:0;padding:0 var(--cx-size-10px);
-font:inherit;color:var(--cx-text);background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-control-border);border-radius:var(--cx-radius-sm);color-scheme:inherit;}
+font:inherit;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-sm,4px);color-scheme:inherit;}
 .cx-flow-half .cx-flow-input{max-width:100%;}
-.cx-flow .cx-flow-input::placeholder{color:color-mix(in srgb,var(--cx-text) 60%,var(--cx-surface));font-style:italic;opacity:1;}
-.cx-flow .cx-flow-input:focus-visible{outline:none;border-color:var(--cx-accent);box-shadow:0 0 0 var(--cx-size-2px) var(--cx-accent-soft);}
-.cx-flow .cx-flow-input[aria-invalid="true"],.cx-flow :not(.cx-flow-list)[aria-invalid="true"] .cx-flow-input{border-color:var(--cx-tone-danger);}
-.cx-flow .cx-flow-input:read-only:not(select){background:var(--cx-head-bg);color:var(--cx-text-2);}
+.cx-flow .cx-flow-input::placeholder{color:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 60%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));font-style:italic;opacity:1;}
+.cx-flow .cx-flow-input:focus-visible{outline:none;border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));box-shadow:0 0 0 var(--cx-size-2px) var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
+.cx-flow .cx-flow-input[aria-invalid="true"],.cx-flow :not(.cx-flow-list)[aria-invalid="true"] .cx-flow-input{border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-flow .cx-flow-input:read-only:not(select){background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
 .cx-flow .cx-flow-textarea{height:auto;max-width:100%;padding:var(--cx-size-8px) var(--cx-size-10px);resize:vertical;}
 .cx-flow .cx-flow-type-number .cx-flow-input{max-width:var(--cx-size-180px);text-align:end;font-variant-numeric:tabular-nums;}
 .cx-flow .cx-editor-combo{display:block;max-width:var(--cx-size-440px);}
 .cx-flow-toggle{display:flex;align-items:center;gap:var(--cx-size-10px);margin-top:0;}
 .cx-flow-toggle .cx-flow-label{font-weight:500;}
-.cx-flow .cx-flow-toggle input{appearance:none;flex:none;position:relative;width:var(--cx-size-36px);height:var(--cx-size-20px);min-height:0;margin:0;padding:0;border:var(--cx-size-1px) solid var(--cx-control-border);border-radius:var(--cx-size-999px);background:var(--cx-head-bg);cursor:pointer;box-shadow:none;}
-.cx-flow .cx-flow-toggle input::after{content:"";position:absolute;inset-block-start:var(--cx-size-2px);inset-inline-start:var(--cx-size-2px);width:var(--cx-size-14px);height:var(--cx-size-14px);border-radius:50%;background:var(--cx-muted);}
-.cx-flow .cx-flow-toggle input:checked{background:var(--cx-accent);border-color:var(--cx-accent);}
-.cx-flow .cx-flow-toggle input:checked::after{inset-inline-start:calc(100% - var(--cx-size-16px));background:var(--cx-on-accent);}
-.cx-flow .cx-flow-toggle input:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-2px);}
+.cx-flow .cx-flow-toggle input{appearance:none;flex:none;position:relative;width:var(--cx-size-36px);height:var(--cx-size-20px);min-height:0;margin:0;padding:0;border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));cursor:pointer;box-shadow:none;}
+.cx-flow .cx-flow-toggle input::after{content:"";position:absolute;inset-block-start:var(--cx-size-2px);inset-inline-start:var(--cx-size-2px);width:var(--cx-size-14px);height:var(--cx-size-14px);border-radius:50%;background:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-flow .cx-flow-toggle input:checked{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-flow .cx-flow-toggle input:checked::after{inset-inline-start:calc(100% - var(--cx-size-16px));background:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));}
+.cx-flow .cx-flow-toggle input: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-flow-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cx-size-220px)),1fr));gap:var(--cx-size-8px);}
-.cx-flow-card{position:relative;display:flex;align-items:flex-start;gap:var(--cx-size-10px);padding:var(--cx-size-10px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-radius);background:var(--cx-surface);cursor:pointer;}
-.cx-flow-card:hover{background:var(--cx-hover-bg);}
-.cx-flow-card:has(input:checked){border-color:var(--cx-accent);box-shadow:inset 0 0 0 var(--cx-size-1px) var(--cx-accent);background:color-mix(in srgb,var(--cx-accent) 5%,var(--cx-surface));}
-.cx-flow-card:has(input:focus-visible){outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-2px);}
+.cx-flow-card{position:relative;display:flex;align-items:flex-start;gap:var(--cx-size-10px);padding:var(--cx-size-10px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));cursor:pointer;}
+.cx-flow-card:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-flow-card:has(input:checked){border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));box-shadow:inset 0 0 0 var(--cx-size-1px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 5%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
+.cx-flow-card:has(input: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-flow-card .cx-flow-choice-input{position:absolute;opacity:0;width:var(--cx-size-1px);height:var(--cx-size-1px);margin:0;}
 .cx-flow-card-body{display:flex;flex-direction:column;gap:var(--cx-size-2px);flex:1;min-width:0;}
 .cx-flow-card-title{font-weight:600;}
-.cx-flow-card-desc{font-size:var(--cx-size-13px);color:var(--cx-muted);}
-.cx-flow-card-reason{font-size:var(--cx-size-13px);color:var(--cx-text-2);font-style:italic;}
-.cx-flow-card-check{flex:none;width:var(--cx-size-18px);height:var(--cx-size-18px);margin-top:var(--cx-size-1px);border:var(--cx-size-1px) solid var(--cx-control-border);border-radius:50%;}
-.cx-flow-card:has(input:checked) .cx-flow-card-check{border-color:var(--cx-accent);background:var(--cx-accent);box-shadow:inset 0 0 0 var(--cx-size-4px) var(--cx-surface);}
+.cx-flow-card-desc{font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-flow-card-reason{font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-style:italic;}
+.cx-flow-card-check{flex:none;width:var(--cx-size-18px);height:var(--cx-size-18px);margin-top:var(--cx-size-1px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:50%;}
+.cx-flow-card:has(input:checked) .cx-flow-card-check{border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));box-shadow:inset 0 0 0 var(--cx-size-4px) var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
 .cx-flow-card.cx-flow-disabled,.cx-flow-radio.cx-flow-disabled{cursor:default;opacity:.62;}
-.cx-flow-card.cx-flow-disabled:hover{background:var(--cx-surface);}
-.cx-flow-badge{display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--cx-size-999px);background:var(--cx-head-bg);border:var(--cx-size-1px) solid var(--cx-line);font-size:var(--cx-size-11d5px);font-weight:600;color:var(--cx-text-2);vertical-align:1px;}
+.cx-flow-card.cx-flow-disabled:hover{background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
+.cx-flow-badge{display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--cx-size-11d5px);font-weight:600;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));vertical-align:1px;}
 .cx-flow-radios,.cx-flow-multi-list{display:flex;flex-direction:column;gap:var(--cx-size-2px);}
 :is(.cx-flow-radio,.cx-flow-check){display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-2px) var(--cx-size-8px);min-height:var(--cx-size-28px);cursor:pointer;}
-:is(.cx-flow-radio,.cx-flow-check) input{flex:none;width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--cx-accent);}
+:is(.cx-flow-radio,.cx-flow-check) input{flex:none;width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-flow-radio .cx-flow-card-body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--cx-size-2px) var(--cx-size-8px);}
 .cx-flow-radio .cx-flow-card-title{font-weight:400;}
 .cx-flow-check > .cx-flow-card-desc{flex-basis:100%;padding-inline-start:var(--cx-size-24px);}
 @container (min-width:560px){.cx-flow-multi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cx-size-16px);}}
-.cx-flow-multi-group{grid-column:1 / -1;margin-top:var(--cx-size-6px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--cx-muted);}
+.cx-flow-multi-group{grid-column:1 / -1;margin-top:var(--cx-size-6px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-multi-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-4px) var(--cx-size-14px);margin-top:var(--cx-size-6px);font-size:var(--cx-size-13px);}
-.cx-flow-count{color:var(--cx-muted);font-size:var(--cx-size-13px);}
+.cx-flow-count{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);}
 .cx-flow-list-items{display:flex;flex-direction:column;gap:var(--cx-size-6px);list-style:none;padding:0;}
 .cx-flow-list-item{display:flex;gap:var(--cx-size-6px);max-width:var(--cx-size-440px);}
 .cx-flow-list-item .cx-flow-input{flex:1;}
-.cx-flow-icon-btn{flex:none;width:var(--cx-flow-control);height:var(--cx-flow-control);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-radius-sm);background:var(--cx-surface);color:var(--cx-muted);font:inherit;font-size:var(--cx-size-17px);line-height:1;cursor:pointer;}
-.cx-flow-icon-btn:hover{background:var(--cx-hover-bg);color:var(--cx-text);}
+.cx-flow-icon-btn{flex:none;width:var(--cx-flow-control);height:var(--cx-flow-control);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font:inherit;font-size:var(--cx-size-17px);line-height:1;cursor:pointer;}
+.cx-flow-icon-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
 .cx-flow-list-add{margin-top:var(--cx-size-8px);}
 .cx-flow-secret,.cx-flow-duration{display:flex;gap:var(--cx-size-6px);max-width:var(--cx-size-440px);}
 .cx-flow-secret .cx-flow-input{flex:1;}
 .cx-flow .cx-flow-duration .cx-flow-amount{width:var(--cx-size-92px);max-width:var(--cx-size-92px);text-align:end;font-variant-numeric:tabular-nums;}
 .cx-flow .cx-flow-duration .cx-flow-unit{width:auto;max-width:var(--cx-size-180px);}
-.cx-flow-hint{color:var(--cx-text-2);}
-.cx-flow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-size-6px);height:var(--cx-flow-control);min-height:var(--cx-flow-control);padding:0 var(--cx-size-14px);border:var(--cx-size-1px) solid var(--cx-line-strong);
-border-radius:var(--cx-radius);background:var(--cx-surface);color:var(--cx-text);font:500 var(--cx-size-14px) var(--cx-font);white-space:nowrap;cursor:pointer;}
-.cx-flow-btn:hover{background:var(--cx-hover-bg);}
+.cx-flow-hint{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
+.cx-flow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-size-6px);height:var(--cx-flow-control);min-height:var(--cx-flow-control);padding:0 var(--cx-size-14px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));
+border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:500 var(--cx-size-14px) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);white-space:nowrap;cursor:pointer;}
+.cx-flow-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
 .cx-flow-btn:disabled{opacity:.5;cursor:default;}
-.cx-flow-btn.cx-primary{background:var(--cx-accent);border-color:var(--cx-accent);color:var(--cx-on-accent);font-weight:600;}
-.cx-flow-btn.cx-primary:hover:not(:disabled){background:color-mix(in srgb,var(--cx-accent) 88%,var(--cx-text));}
-.cx-flow-link{padding:0;border:0;background:none;color:var(--cx-accent-text);font:inherit;text-align:start;text-decoration:underline;text-underline-offset:var(--cx-size-2px);cursor:pointer;}
+.cx-flow-btn.cx-primary{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));font-weight:600;}
+.cx-flow-btn.cx-primary:hover:not(:disabled){background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 88%,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
+.cx-flow-link{padding:0;border:0;background:none;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));font:inherit;text-align:start;text-decoration:underline;text-underline-offset:var(--cx-size-2px);cursor:pointer;}
 .cx-flow-link:hover{text-decoration-thickness:var(--cx-size-2px);}
-.cx-flow-actions{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:var(--cx-size-8px);padding:var(--cx-size-12px) var(--cx-flow-pad);border-top:var(--cx-size-1px) solid var(--cx-line);background:var(--cx-surface);border-end-end-radius:var(--cx-size-8px);}
+.cx-flow-actions{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:var(--cx-size-8px);padding:var(--cx-size-12px) var(--cx-flow-pad);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border-end-end-radius:var(--cx-size-8px);}
 .cx-flow-actions[hidden]{display:none;}
 .cx-flow-spacer{flex:1;}
 .cx-flow-stack .cx-flow-actions{position:static;border-radius:0;}
@@ -136,40 +136,40 @@ border-radius:var(--cx-radius);background:var(--cx-surface);color:var(--cx-text)
 .cx-flow.cx-flow-narrow .cx-flow-input:not(textarea,[type="checkbox"]){min-height:var(--cx-size-44px);height:var(--cx-size-44px);}
 .cx-flow-narrow .cx-flow-icon-btn{width:var(--cx-size-44px);}
 .cx-flow-narrow .cx-flow-next{flex:1;}
-.cx-flow-summary,.cx-flow-banner,.cx-flow-answer-banner{padding:var(--cx-size-10px) var(--cx-size-14px);border-radius:var(--cx-radius);border-inline-start:var(--cx-size-3px) solid var(--cx-line-strong);background:var(--cx-head-bg);outline:none;}
-.cx-flow-summary,.cx-flow-problems{border-inline-start-color:var(--cx-tone-danger);background:var(--cx-tone-danger-bg);}
-.cx-flow-ready{border-inline-start-color:var(--cx-tone-success);background:var(--cx-tone-success-bg);}
+.cx-flow-summary,.cx-flow-banner,.cx-flow-answer-banner{padding:var(--cx-size-10px) var(--cx-size-14px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));border-inline-start:var(--cx-size-3px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));outline:none;}
+.cx-flow-summary,.cx-flow-problems{border-inline-start-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));}
+.cx-flow-ready{border-inline-start-color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));}
 .cx-flow-summary-title,.cx-flow-banner-title{font-weight:600;}
 .cx-flow-summary ul,.cx-flow-banner-list{margin-top:var(--cx-size-4px);padding-inline-start:var(--cx-size-18px);}
-.cx-flow-summary .cx-flow-link,.cx-flow-problems .cx-flow-link{color:var(--cx-tone-danger);}
-.cx-flow-banner-warn{margin-top:var(--cx-size-4px);color:var(--cx-tone-warning);font-weight:600;}
-.cx-flow-warning{color:var(--cx-tone-warning);}
+.cx-flow-summary .cx-flow-link,.cx-flow-problems .cx-flow-link{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-flow-banner-warn{margin-top:var(--cx-size-4px);color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));font-weight:600;}
+.cx-flow-warning{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));}
 .cx-flow-answer-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-12px);}
 .cx-flow-answer-banner .cx-flow-btn{margin-inline-start:auto;}
 .cx-flow-review-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-16px);}
 .cx-flow-switch{display:inline-flex;align-items:center;gap:var(--cx-size-8px);min-height:var(--cx-size-28px);cursor:pointer;}
-.cx-flow-switch input{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--cx-accent);}
+.cx-flow-switch input{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-flow-review-group + .cx-flow-review-group{margin-top:var(--cx-size-20px);}
-.cx-flow-review-title{padding-bottom:var(--cx-size-6px);border-bottom:var(--cx-size-1px) solid var(--cx-line-strong);font-size:var(--cx-size-14px);font-weight:600;}
+.cx-flow-review-title{padding-bottom:var(--cx-size-6px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));font-size:var(--cx-size-14px);font-weight:600;}
 .cx-flow-answers{display:flex;flex-direction:column;}
-.cx-flow-answer{display:grid;grid-template-columns:minmax(var(--cx-size-140px),36%) minmax(0,1fr) auto;gap:var(--cx-size-4px) var(--cx-size-16px);padding:var(--cx-size-8px) 0;border-bottom:var(--cx-size-1px) solid var(--cx-line);}
-.cx-flow-answer dt{color:var(--cx-muted);font-size:var(--cx-size-13d5px);}
+.cx-flow-answer{display:grid;grid-template-columns:minmax(var(--cx-size-140px),36%) minmax(0,1fr) auto;gap:var(--cx-size-4px) var(--cx-size-16px);padding:var(--cx-size-8px) 0;border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-flow-answer dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13d5px);}
 .cx-flow-answer-value{display:flex;flex-direction:column;gap:var(--cx-size-2px);min-width:0;overflow-wrap:anywhere;white-space:pre-line;}
-.cx-flow-empty{color:var(--cx-muted);}
-.cx-flow-was{font-size:var(--cx-size-13px);color:var(--cx-muted);}
+.cx-flow-empty{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-flow-was{font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-changed .cx-flow-now{font-weight:600;}
 .cx-flow-answer-action{text-align:end;}
 @container (max-width:520px){.cx-flow-answer{grid-template-columns:minmax(0,1fr) auto;}.cx-flow-answer dt{grid-column:1 / -1;}}
-.cx-flow-declaration{padding:var(--cx-size-10px) 0 0;border-top:var(--cx-size-1px) solid var(--cx-line);color:var(--cx-text-2);font-size:var(--cx-size-13d5px);}
-.cx-flow-none{color:var(--cx-muted);}
+.cx-flow-declaration{padding:var(--cx-size-10px) 0 0;border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--cx-size-13d5px);}
+.cx-flow-none{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-flow-panel .cx-flow-step-title{display:flex;align-items:center;gap:var(--cx-size-10px);}
-.cx-flow-panel-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-28px);height:var(--cx-size-28px);border-radius:50%;background:var(--cx-tone-success-bg);color:var(--cx-tone-success);font-size:var(--cx-size-14px);}
-.cx-flow-progress .cx-flow-panel-mark{background:var(--cx-accent-soft);color:var(--cx-accent-text);}
-.cx-flow-result-value{display:inline-block;max-width:100%;padding:var(--cx-size-4px) var(--cx-size-8px);border-radius:var(--cx-radius-sm);background:var(--cx-head-bg);font-family:var(--cx-font-mono);font-size:var(--cx-size-13px);overflow-wrap:anywhere;white-space:normal;}
+.cx-flow-panel-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-28px);height:var(--cx-size-28px);border-radius:50%;background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));font-size:var(--cx-size-14px);}
+.cx-flow-progress .cx-flow-panel-mark{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
+.cx-flow-result-value{display:inline-block;max-width:100%;padding:var(--cx-size-4px) var(--cx-size-8px);border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));font-family:var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);font-size:var(--cx-size-13px);overflow-wrap:anywhere;white-space:normal;}
 .cx-flow-once .cx-flow-answer-value{align-items:flex-start;gap:var(--cx-size-6px);}
 .cx-flow-links{display:flex;flex-direction:column;gap:var(--cx-size-4px);padding-inline-start:var(--cx-size-18px);}
 .cx-flow-panel-actions{position:static;margin-top:var(--cx-flow-gap);padding-inline:0;border-top:0;}
-progress.cx-flow-bar{display:block;width:100%;max-width:var(--cx-size-440px);height:var(--cx-size-8px);accent-color:var(--cx-accent);}
+progress.cx-flow-bar{display:block;width:100%;max-width:var(--cx-size-440px);height:var(--cx-size-8px);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 @media (forced-colors:active){
 .cx-flow-mark[data-cx-state="current"] .cx-flow-num{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight;}
 .cx-flow-card:has(input:checked){outline:var(--cx-size-2px) solid Highlight;}

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

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"842e1f1956f6213f",requires:["forms"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,foldText,boundedPattern,numberFormat,gridFreeze}=context;const{editParseNumber,EDIT_EDITORS,formRuleSpec,formCheck,FORM_LABELS}=FORMS_IMPL;const FLOW_LABELS={flowSteps:"Steps",flowStepOf:"Step {current} of {count}",flowStepAnnounce:"Step {current} of {count}, {title}",flowNext:"Next",flowBack:"Back",flowSubmit:"Submit",flowSubmitting:"Submitting…",flowReviewTitle:"Check your answers",flowChange:"Change",flowChangeField:"Change {field}",flowNotProvided:"Not provided",flowOptional:"(optional)",flowStepOptional:"Optional",flowStepComplete:"Complete",flowStepCurrent:"Current step",flowStepErrors:"Errors: {count}",flowStepLocked:"Complete the earlier steps first",flowStepNotStarted:"Not started",flowErrorSummary:"Fix these before you continue",flowReady:"Ready to submit",flowNotReady:"Errors to fix: {count}",flowWarnings:"Warnings: {count}",flowChangesOnly:"Show changes only",flowNoChanges:"No answers have changed.",flowWas:"Was: {value}",flowChangedCount:"Changed answers: {count}",flowSecretSet:"Set",flowSecretKept:"Unchanged",flowSecretNotSet:"Not set",flowSecretHint:"A value is saved. Leave blank to keep it.",flowSecretShow:"Show",flowSecretHide:"Hide",flowSecretReveal:"Show {field}",flowOn:"On",flowOff:"Off",flowAdd:"Add",flowAddItem:"Add to {field}",flowRemoveItem:"Remove {item}",flowItemLabel:"{field}, item {index}",flowSelectAll:"Select all",flowSelectNone:"Clear",flowSelectedCount:"{count} of {total} selected",flowUnit:"Unit",flowUnitSeconds:"seconds",flowUnitMinutes:"minutes",flowUnitHours:"hours",flowUnitDays:"days",flowSeconds:"[one]{count} second[other]{count} seconds",flowMinutes:"[one]{count} minute[other]{count} minutes",flowHours:"[one]{count} hour[other]{count} hours",flowDays:"[one]{count} day[other]{count} days",flowDurationInvalid:"{field} must be a whole number.",flowItemsMin:"{field} needs at least {min}.",flowItemsMax:"{field} allows at most {max}.",flowItemEmail:"“{item}” is not an email address.",flowItemHost:"“{item}” is not a host name.",flowItemIp:"“{item}” is not an IP address.",flowItemCidr:"“{item}” is not a network range.",flowItemUrl:"“{item}” is not a web address.",flowItemPattern:"“{item}” does not have the expected format.",flowSaved:"Saved",flowAccepted:"In progress",flowProgress:"{done} of {total}",flowConflict:"These settings changed while you were editing them.",flowReload:"Reload current settings",flowNotSubmitted:"The answers were not submitted.",flowNoHost:"No host received the answers.",flowStartAgain:"Start another",flowCopy:"Copy",flowCopied:"Copied",flowSavedIt:"I have saved it",flowShownOnce:"Shown only once. Copy it now."};function flowLabels(...sources){const labels={...FORM_LABELS,...FLOW_LABELS};for(const source of sources){if(source==null)continue;if(!flowIs(source))flowFail("labels must be an object of strings");for(const[name,text]of Object.entries(source)){if(!Object.hasOwn(labels,name))continue;if(typeof text!=="string"||!/\S/.test(text)) flowFail("label '" + name + "' must be a string with visible text");
+(function(global){"use strict";const installed=new WeakSet();const part={version:"93f8d2eb57cc1770",requires:["forms"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,foldText,boundedPattern,numberFormat,gridFreeze}=context;const{editParseNumber,EDIT_EDITORS,formRuleSpec,formCheck,FORM_LABELS}=FORMS_IMPL;const FLOW_LABELS={flowSteps:"Steps",flowStepOf:"Step {current} of {count}",flowStepAnnounce:"Step {current} of {count}, {title}",flowNext:"Next",flowBack:"Back",flowSubmit:"Submit",flowSubmitting:"Submitting…",flowReviewTitle:"Check your answers",flowChange:"Change",flowChangeField:"Change {field}",flowNotProvided:"Not provided",flowOptional:"(optional)",flowStepOptional:"Optional",flowStepComplete:"Complete",flowStepCurrent:"Current step",flowStepErrors:"Errors: {count}",flowStepLocked:"Complete the earlier steps first",flowStepNotStarted:"Not started",flowErrorSummary:"Fix these before you continue",flowReady:"Ready to submit",flowNotReady:"Errors to fix: {count}",flowWarnings:"Warnings: {count}",flowChangesOnly:"Show changes only",flowNoChanges:"No answers have changed.",flowWas:"Was: {value}",flowChangedCount:"Changed answers: {count}",flowSecretSet:"Set",flowSecretKept:"Unchanged",flowSecretNotSet:"Not set",flowSecretHint:"A value is saved. Leave blank to keep it.",flowSecretShow:"Show",flowSecretHide:"Hide",flowSecretReveal:"Show {field}",flowOn:"On",flowOff:"Off",flowAdd:"Add",flowAddItem:"Add to {field}",flowRemoveItem:"Remove {item}",flowItemLabel:"{field}, item {index}",flowSelectAll:"Select all",flowSelectNone:"Clear",flowSelectedCount:"{count} of {total} selected",flowUnit:"Unit",flowUnitSeconds:"seconds",flowUnitMinutes:"minutes",flowUnitHours:"hours",flowUnitDays:"days",flowSeconds:"[one]{count} second[other]{count} seconds",flowMinutes:"[one]{count} minute[other]{count} minutes",flowHours:"[one]{count} hour[other]{count} hours",flowDays:"[one]{count} day[other]{count} days",flowDurationInvalid:"{field} must be a whole number.",flowItemsMin:"{field} needs at least {min}.",flowItemsMax:"{field} allows at most {max}.",flowItemEmail:"“{item}” is not an email address.",flowItemHost:"“{item}” is not a host name.",flowItemIp:"“{item}” is not an IP address.",flowItemCidr:"“{item}” is not a network range.",flowItemUrl:"“{item}” is not a web address.",flowItemPattern:"“{item}” does not have the expected format.",flowSaved:"Saved",flowAccepted:"In progress",flowProgress:"{done} of {total}",flowConflict:"These settings changed while you were editing them.",flowReload:"Reload current settings",flowNotSubmitted:"The answers were not submitted.",flowNoHost:"No host received the answers.",flowStartAgain:"Start another",flowCopy:"Copy",flowCopied:"Copied",flowSavedIt:"I have saved it",flowShownOnce:"Shown only once. Copy it now."};function flowLabels(...sources){const labels={...FORM_LABELS,...FLOW_LABELS};for(const source of sources){if(source==null)continue;if(!flowIs(source))flowFail("labels must be an object of strings");for(const[name,text]of Object.entries(source)){if(!Object.hasOwn(labels,name))continue;if(typeof text!=="string"||!/\S/.test(text)) flowFail("label '" + name + "' must be a string with visible text");
 labels[name]=text}}
 return Object.freeze(labels)}
 const FLOW_NAME=/^[A-Za-z][A-Za-z0-9_-]{0,63}$/;
@@ -19,12 +19,12 @@ if(field.path!==undefined&&(typeof field.path!=="string"||!/^[A-Za-z0-9_-]+(\.[A
 if(raw.keepWhenBlank!==undefined&&(type!=="secret"||typeof raw.keepWhenBlank!=="boolean"))bad("can keep a blank value only as a secret");if(raw.reveal!==undefined&&(type!=="secret"||typeof raw.reveal!=="boolean"))bad("has a reveal setting but is not a secret");if((raw.onText!==undefined||raw.offText!==undefined)&&type!=="toggle")bad("names on and off texts but is not a toggle");if(raw.rows!==undefined&&(type!=="textarea"||!Number.isInteger(raw.rows)||raw.rows<2||raw.rows>20))bad("needs 2 to 20 rows, as a text area only");if(raw.display!==undefined&&(type!=="choice"||!["cards","list"].includes(raw.display)))bad("has an unknown display");if(raw.editor!==undefined?type!=="custom"||typeof raw.editor!=="string"||!/^[A-Za-z][A-Za-z0-9_-]{0,63}$/.test(raw.editor) : type === "custom") bad("needs an editor name as a custom field only");
 if(raw.step!==undefined&&type!=="number")bad("has a step but is not a number");if(raw.placeholder!==undefined&&!["text","number","lookup","textarea","list"].includes(type))bad("has a placeholder, which text, number, lookup, text area and list fields take");const choosing=["select","choice","multiChoice","lookup"].includes(type);if(raw.source!==undefined&&(raw.source!=="document"||!choosing)||raw.dependsOn!==undefined)flowHost("options").field(field,raw,choosing,bad);if(raw.options!==undefined&&!choosing)bad("has options but does not choose");if(choosing&&!field.host&&!(Array.isArray(raw.options)&&raw.options.length))bad("needs options");if(raw.options!==undefined&&!Array.isArray(raw.options))bad("needs a list of options");field.options=flowOptions(raw.options||[],bad);if((raw.columns!==undefined)!==(type==="records"))bad("needs columns as a records field only");if(type==="records")field.columns=flowHost("records").columns(raw.columns,bad);const list=type==="list"||type==="multiChoice"||type==="records"||type==="pick";if(list&&[rules.min,rules.max,rules.minLength,rules.maxLength,rules.pattern].some(value=>value!==undefined))bad("checks items, not lengths or ranges");if(!list&&[rules.minItems,rules.maxItems].some(value=>value!==undefined)||type!=="list"&&(rules.item!==undefined||rules.itemPattern!==undefined))bad("has rules only lists take");if((rules.min!==undefined||rules.max!==undefined)&&!["number","datetime","duration"].includes(type))bad("has a range but is not a number, date and time or duration");if([rules.minLength,rules.maxLength,rules.pattern].some(value=>value!==undefined)&&!["text","textarea","secret"].includes(type))bad("has lengths or a pattern, which text, text area and secret fields take");if(rules.minLength>rules.maxLength)bad("needs the shorter length first");const count=value=>value===undefined||Number.isInteger(value)&&value>=0&&value<=1000;if(!count(rules.minItems)||!count(rules.maxItems)||rules.minItems>rules.maxItems)bad("needs 0 to 1000 items, the fewest first");if(rules.item!==undefined&&!["email","host","ip","cidr","url"].includes(rules.item))bad("has an unknown item rule");let itemPattern=null;if(rules.itemPattern!==undefined)try{itemPattern=boundedPattern(rules.itemPattern,true,true)}catch(error){bad("has an invalid or unsafe item pattern")}
 const range=type==="duration"?{min:rules.min===undefined?undefined:flowSeconds(rules.min),max:rules.max===undefined?undefined:flowSeconds(rules.max)}:rules;if(type==="duration"&&(range.min===null||range.max===null))bad("needs ISO 8601 durations as its range");if(type==="number"&&![rules.min,rules.max].every(bound=>bound===undefined||Number.isFinite(bound)&&Math.abs(bound)<=Number.MAX_SAFE_INTEGER))bad("needs numbers as its range");if(type==="datetime"&&![rules.min,rules.max].every(bound=>bound===undefined||flowFits({type:"datetime"},bound)))bad("needs ISO 8601 moments as its range");const low=type==="datetime"&&typeof range.min==="string"?Date.parse(range.min):range.min,high=type==="datetime"&&typeof range.max==="string"?Date.parse(range.max):range.max;if(low!==undefined&&high!==undefined&&low>high)bad("needs the lower limit first");const shared=formRuleSpec({step:raw.step,placeholder:raw.placeholder},{required:field.required,min:range.min,max:range.max,minLength:rules.minLength,maxLength:rules.maxLength,pattern:rules.pattern,message:rules.message},bad);field.spec=Object.freeze({id,pattern:shared.pattern,rules:shared.rules});field.items=Object.freeze({min:rules.minItems,max:rules.maxItems,rule:rules.item,pattern:itemPattern});const units=raw.units??["minutes","hours","days"];if(raw.units!==undefined&&type!=="duration"||!Array.isArray(units)||!units.length||units.some(unit=>!Object.hasOwn(FLOW_UNITS,unit))||new Set(units).size!==units.length)bad("has invalid duration units");field.units=Object.keys(FLOW_UNITS).filter(unit=>units.includes(unit));if(raw.default!==undefined&&(type==="secret"||list&&!Array.isArray(raw.default)||!flowFits(field,raw.default)))bad("has a default that does not fit it");field.start=raw.default===undefined?(list?[]:null):raw.default;model.fields.set(id,field);return field}
-function flowRead(doc){flowKeys(doc,["kind","version","id","title","description","mode","layout","density","timeZone","steps","initial","storedSecrets","baseline","submit","labels","command","presets","draft","deepLinks","endpoint"],"A flow document");if(doc.kind!=="flow"||doc.version!==1)flowFail("a flow document needs kind \"flow\" and version 1");const model={id:flowName(doc.id,"The flow id"),title:flowString(doc.title,200,"The flow title",true),description:flowString(doc.description,1000,"The flow description"),mode:doc.mode??"linear",density:doc.density??"normal",local:doc.timeZone==="local",fields:new Map(),steps:[],sections:new Set(),checks:new Map()};if(!["linear","free","tasks"].includes(model.mode)||!["compact","normal","comfortable"].includes(model.density)||doc.timeZone!==undefined&&!["utc","local"].includes(doc.timeZone))flowFail("the flow's mode, density or time zone is unknown");if(doc.layout!==undefined)flowKeys(doc.layout,["orientation","container","launch"],"The flow layout");model.orientation=doc.layout?.orientation??"auto";if(!["auto","horizontal","vertical"].includes(model.orientation))flowFail("the flow layout has an unknown orientation");if(!Array.isArray(doc.steps)||!doc.steps.length||doc.steps.length>64)flowFail("a flow needs 1 to 64 steps");for(const[index,raw]of doc.steps.entries()){flowKeys(raw,["id","title","description","type","fields","sections","when","optional","declaration","changesOnly","checks","group","pick","confirm","acknowledge","preview"],"A flow step");const step={id:flowName(raw.id,"A step id"),title:flowString(raw.title,200,"A step title",raw.type!=="review"),description:flowString(raw.description,1000,"A step description"),type:raw.type??"form",optional:flowFlag(raw.optional,"optional"),declaration:flowString(raw.declaration,1000,"The declaration"),changesOnly:raw.changesOnly!==false,group:flowString(raw.group,200,"A step group"),blocks:[],checks:[],raw};if(model.steps.some(other=>other.id===step.id))flowFail("the step id '"+step.id+"' is used twice");if(!["form","info","review","pick"].includes(step.type))flowFail("step "+step.id+" has an unknown type");step.asks=step.type==="form"||step.type==="pick";if(step.type==="review"&&index!==doc.steps.length-1)flowFail("the review step must be the last step");if(step.type==="review"&&(raw.when!==undefined||raw.optional===true||raw.group!==undefined))flowFail("the review step takes no condition or group and is never optional");const reviewKey=["declaration","changesOnly","confirm","acknowledge","preview"].find(key=>raw[key]!==undefined);if(step.type!=="review"&&reviewKey)flowFail("only a review step has "+reviewKey);if(raw.changesOnly!==undefined&&typeof raw.changesOnly!=="boolean")flowFail("changesOnly must be true or false");if(step.type!=="form"&&(raw.fields!==undefined||raw.sections!==undefined))flowFail("only a form step has fields and sections");if((raw.pick!==undefined)!==(step.type==="pick"))flowFail("step "+step.id+" has a pick only as a pick step, and a pick step needs one");if(raw.fields!==undefined&&!Array.isArray(raw.fields)||raw.sections!==undefined&&!Array.isArray(raw.sections))flowFail("step "+step.id+" needs arrays of fields and sections");if(raw.fields?.length)step.blocks.push({section:null,fields:raw.fields.map(field=>flowField(field,step,null,model))});if((raw.sections||[]).length>64)flowFail("step "+step.id+" holds at most 64 sections");for(const rawSection of raw.sections||[]){flowKeys(rawSection,["id","label","description","fields","when","source","dependsOn"],"A flow section");const section={id:flowName(rawSection.id,"A section id"),label:flowString(rawSection.label,200,"A section label",true),description:flowString(rawSection.description,1000,"A section description"),host:false,dependsOn:[],raw:rawSection};if(model.sections.has(section.id))flowFail("the section id '"+section.id+"' is used twice");model.sections.add(section.id);if(rawSection.source!==undefined||rawSection.dependsOn!==undefined)flowHost("options").section(section,rawSection);else if(!Array.isArray(rawSection.fields))flowFail("section "+section.id+" needs an array of fields");step.blocks.push({section,fields:(rawSection.fields||[]).map(field=>flowField(field,step,section,model))})}
+function flowRead(doc){flowKeys(doc,["kind","version","id","title","description","mode","layout","density","timeZone","steps","initial","storedSecrets","baseline","submit","labels","command","presets","draft","deepLinks","endpoint"],"A flow document");if(doc.kind!=="flow"||doc.version!==1)flowFail("expected flow document version 1");const model={id:flowName(doc.id,"The flow id"),title:flowString(doc.title,200,"The flow title",true),description:flowString(doc.description,1000,"The flow description"),mode:doc.mode??"linear",density:doc.density??"normal",local:doc.timeZone==="local",fields:new Map(),steps:[],sections:new Set(),checks:new Map()};if(!["linear","free","tasks"].includes(model.mode)||!["compact","normal","comfortable"].includes(model.density)||doc.timeZone!==undefined&&!["utc","local"].includes(doc.timeZone))flowFail("unknown flow mode, density or time zone");if(doc.layout!==undefined)flowKeys(doc.layout,["orientation","container","launch"],"The flow layout");model.orientation=doc.layout?.orientation??"auto";if(!["auto","horizontal","vertical"].includes(model.orientation))flowFail("the flow layout has an unknown orientation");if(!Array.isArray(doc.steps)||!doc.steps.length||doc.steps.length>64)flowFail("a flow needs 1 to 64 steps");for(const[index,raw]of doc.steps.entries()){flowKeys(raw,["id","title","description","type","fields","sections","when","optional","declaration","changesOnly","checks","group","pick","confirm","acknowledge","preview","facts"],"A flow step");const step={id:flowName(raw.id,"A step id"),title:flowString(raw.title,200,"A step title",raw.type!=="review"),description:flowString(raw.description,1000,"A step description"),type:raw.type??"form",optional:flowFlag(raw.optional,"optional"),declaration:flowString(raw.declaration,1000,"The declaration"),changesOnly:raw.changesOnly!==false,group:flowString(raw.group,200,"A step group"),blocks:[],checks:[],raw};if(model.steps.some(other=>other.id===step.id))flowFail("the step id '"+step.id+"' is used twice");if(!["form","info","review","pick"].includes(step.type))flowFail("step "+step.id+" has an unknown type");step.asks=step.type==="form"||step.type==="pick";if(step.type==="review"&&index!==doc.steps.length-1)flowFail("the review step must be the last step");if(step.type==="review"&&(raw.when!==undefined||raw.optional===true||raw.group!==undefined))flowFail("the review step takes no condition or group and is never optional");const reviewKey=["declaration","changesOnly","confirm","acknowledge","preview"].find(key=>raw[key]!==undefined);if(step.type!=="review"&&reviewKey)flowFail("only a review step has "+reviewKey);if(raw.changesOnly!==undefined&&typeof raw.changesOnly!=="boolean")flowFail("changesOnly must be true or false");if(step.type!=="form"&&(raw.fields!==undefined||raw.sections!==undefined))flowFail("only a form step has fields and sections");if((raw.pick!==undefined)!==(step.type==="pick"))flowFail("only pick steps require a pick");if(raw.fields!==undefined&&!Array.isArray(raw.fields)||raw.sections!==undefined&&!Array.isArray(raw.sections))flowFail("fields and sections must be arrays");if(raw.fields?.length)step.blocks.push({section:null,fields:raw.fields.map(field=>flowField(field,step,null,model))});if((raw.sections||[]).length>64)flowFail("step "+step.id+" holds at most 64 sections");for(const rawSection of raw.sections||[]){flowKeys(rawSection,["id","label","description","fields","when","source","dependsOn"],"A flow section");const section={id:flowName(rawSection.id,"A section id"),label:flowString(rawSection.label,200,"A section label",true),description:flowString(rawSection.description,1000,"A section description"),host:false,dependsOn:[],raw:rawSection};if(model.sections.has(section.id))flowFail("the section id '"+section.id+"' is used twice");model.sections.add(section.id);if(rawSection.source!==undefined||rawSection.dependsOn!==undefined)flowHost("options").section(section,rawSection);else if(!Array.isArray(rawSection.fields))flowFail("section "+section.id+" needs an array of fields");step.blocks.push({section,fields:(rawSection.fields||[]).map(field=>flowField(field,step,section,model))})}
 if(step.type==="pick")flowHost("pick").read(raw.pick,step,model);if(step.type==="review"){step.preview=flowFlag(raw.preview,"preview");if(raw.confirm!==undefined||raw.acknowledge!==undefined)flowHost("consent").read(raw,step)}
 if(raw.checks!==undefined)flowHost("checks").read(raw.checks,step,model);model.steps.push(step)}
 const paths=new Set();for(const path of[...model.fields.values()].map(field=>field.path).filter(Boolean)){if(paths.has(path))flowFail("the path '"+path+"' is used twice");paths.add(path)}
 for(const path of paths)for(let at=path.indexOf(".");at>0;at=path.indexOf(".",at+1))if(paths.has(path.slice(0,at)))flowFail("the path '"+path+"' lies inside '"+path.slice(0,at)+ "'");flowConditions(model);flowEach("finish",model);flowEditMode(doc,model);Object.assign(model,{container:"inline",command:null,presets:[],draft:"none",deepLinks:false,endpoint:null});flowEach("document",doc,model);if(doc.submit!==undefined)flowKeys(doc.submit,["label"],"The flow's submit");model.submitLabel=flowString(doc.submit?.label,80,"The submit label");model.labels=doc.labels;return model}
-function flowEditMode(doc,model){if(doc.initial!==undefined){if(!flowIs(doc.initial))flowFail("initial must be an object of field values");for(const[id,value]of Object.entries(doc.initial)){const field=model.fields.get(id);if(!field||field.type==="secret"||!flowFits(field,value))flowFail("initial has no value for '"+id+"' that fits a field")}}
+function flowEditMode(doc,model){if(doc.initial!==undefined){if(!flowIs(doc.initial))flowFail("initial must be an object of field values");for(const[id,value]of Object.entries(doc.initial)){const field=model.fields.get(id);if(!field||field.type==="secret"||!flowFits(field,value))flowFail("initial value does not fit field "+id)}}
 model.initial=doc.initial?{...doc.initial}:null;if(doc.storedSecrets!==undefined&&(!Array.isArray(doc.storedSecrets)||doc.storedSecrets.some(id=>model.fields.get(id)?.type!=="secret")||new Set(doc.storedSecrets).size!==doc.storedSecrets.length))
 flowFail("storedSecrets lists only secret fields");model.stored=new Set(doc.storedSecrets||[]);if(doc.baseline!==undefined&&(typeof doc.baseline!=="string"||!doc.baseline.length||doc.baseline.length>256))flowFail("the baseline is 1 to 256 characters");model.baseline=doc.baseline??null;if(!model.initial&&(model.stored.size||model.baseline!==null))model.initial={}}
 function flowOptions(raw,bad){if(raw.length>1000)bad("needs at most 1000 options");const options=raw.map(option=>{flowKeys(flowIs(option)?option:{value:option},["value","label","description","badge","disabledReason","group"],"An option");const item=flowIs(option)?option:{value:option};if(!flowScalar(item.value))bad("has an invalid option value");return Object.freeze({value:item.value,label:flowString(item.label,200,"An option label")??String(item.value),description:flowString(item.description,1000,"An option description"),badge:flowString(item.badge,40,"An option badge"),disabledReason:flowString(item.disabledReason,400,"A disabled reason"),group:flowString(item.group,200,"An option group")})});if(new Set(options.map(option=>option.value)).size!==options.length)bad("needs options with distinct values");return options}
@@ -97,7 +97,7 @@ stepFields(step){return step.blocks.flatMap(block=>block.fields).filter(field=>t
 reviewStep(){const last=this.model.steps[this.model.steps.length-1];return last.type==="review"?last:null}
 getValues(){const values={};for(const field of this.model.fields.values())if(field.type!=="secret"&&this.visible(field))values[field.id]=flowCopy(this.values.get(field.id)??null);return values}
 answersChanged(){this.answerRevision++;this.retireOperation()}
-beginOperation(){let cancel;const cancelled=new Promise(resolve=>{cancel=resolve});const generation=this.generation,revision=this.answerRevision,ticket={cancel};ticket.current=()=>!this.destroyed&&generation===this.generation&&revision===this.answerRevision&&this.operation===ticket;ticket.wait=work=>Promise.race([work,cancelled]);this.operation=ticket;this.busy=true;return ticket}
+beginOperation(){let cancel;const cancelled=new Promise(resolve=>cancel=resolve);const abort=new AbortController();const generation=this.generation,revision=this.answerRevision,ticket={cancel:()=>{abort.abort();cancel()},signal:abort.signal};ticket.current=()=>!this.destroyed&&generation===this.generation&&revision===this.answerRevision&&this.operation===ticket;ticket.wait=work=>Promise.race([work,cancelled]);this.operation=ticket;this.busy=true;return ticket}
 retireOperation(render=true){const ticket=this.operation;if(!ticket)return;this.operation=null;ticket.close?.();this.busy=false;ticket.cancel();if(render&&!this.destroyed&&this.phase==="form"&&this.actions)this.renderActions()}
 changed(field,source){const fv=this.fields.get(field.id);if(!fv||this.destroyed||field.readOnly)return;const result=fv.read();if(fv.pending!==(result.error||null))this.answersChanged();fv.pending=result.error||null;if(result.error)this.completed.delete(field.step.id);if(field.type==="secret"){const before=this.secrets.get(field.id)??null;if(result.value)this.secrets.set(field.id,result.value);else this.secrets.delete(field.id);if(before!==(result.value||null)){this.answersChanged();this.forgetHost(field);this.emit("flowValueChanged",{field:field.id,source:"edit"},"onValueChange")}}else if(!result.error){const previous=this.values.get(field.id)??null;if(!flowSameValue(previous,result.value)){this.answersChanged();this.values.set(field.id,result.value);this.forgetHost(field);this.emit("flowValueChanged",{field:field.id,value:flowCopy(result.value),previous:flowCopy(previous),source:"edit"},"onValueChange")}}
 if(source!=="blur"&&this.errors.has(field.id))this.checkField(field);this.refreshVisibility()}
@@ -145,7 +145,8 @@ flowEach("built",this,step,section);return section},async go(target,direction,qu
 if(target!==from){this.emit("flowStepChanged",{from:from.id,to:target.id},"onStepChange");this.stepMoved?.()}
 return true},async next(){if(this.busy||this.phase!=="form"||this.step===this.hub)return false;const step=this.step,steps=this.visibleSteps(),pressed=document.activeElement,generation=this.generation;if(step.asks){const ticket=this.beginOperation();this.renderActions();let result;try{result=await ticket.wait(this.validateStep(step,true,ticket.current));if(!ticket.current())return false}finally{if(ticket.current())this.retireOperation()}
 if(this.destroyed||generation!==this.generation||this.step!==step||result.moved)return false;if(!result.valid){const stayed=document.activeElement===pressed||!this.root.contains(document.activeElement);this.renderRail();this.renderActions();this.showSummary(step,stayed);return false}
-const summary=this.sections.get(step.id)?._cxSummary;if(summary)summary.hidden=true;this.completed.add(step.id)}else this.completed.add(step.id);const review=this.reviewStep();const target=this.returnToReview&&review&&this.stepVisible(review)?review:this.hub||steps[steps.indexOf(step)+ 1];if(target===review)this.returnToReview=false;return this.go(target,"forward")},async back(){if(this.busy||this.phase!=="form")return false;const steps=this.visibleSteps(),at=steps.indexOf(this.step);return at>0?this.go(steps[at-1],"back"):false},async goTo(id){if(this.busy||this.phase!=="form")return false;const steps=this.visibleSteps(),target=steps.find(step=>step.id===id);if(!target)return false;const open=this.reachable(target,steps)?target:steps.find(step=>step.asks&&!this.completed.has(step.id))||target;return this.go(open,steps.indexOf(open)<steps.indexOf(this.step)?"back":"forward")},change(field){this.returnToReview=true;return this.go(field.step,"back").then(moved=>{if(moved){const fv=this.fields.get(field.id);if(fv)fv.focus()}
+const summary=this.sections.get(step.id)?._cxSummary;if(summary)summary.hidden=true}
+this.completed.add(step.id);const review=this.reviewStep();const target=this.returnToReview&&review&&this.stepVisible(review)?review:this.hub||steps[steps.indexOf(step)+ 1];if(target===review)this.returnToReview=false;return this.go(target,"forward")},async back(){if(this.busy||this.phase!=="form")return false;const steps=this.visibleSteps(),at=steps.indexOf(this.step);return at>0?this.go(steps[at-1],"back"):false},async goTo(id){if(this.busy||this.phase!=="form")return false;const steps=this.visibleSteps(),target=steps.find(step=>step.id===id);if(!target)return false;const open=this.reachable(target,steps)?target:steps.find(step=>step.asks&&!this.completed.has(step.id))||target;return this.go(open,steps.indexOf(open)<steps.indexOf(this.step)?"back":"forward")},change(field){this.returnToReview=true;return this.go(field.step,"back").then(moved=>{if(moved){const fv=this.fields.get(field.id);if(fv)fv.focus()}
 return moved})}});const FLOW_ITEM_RULES={email:value=>/^[^\s@]+@[^\s@]+\.[^\s@.]+$/.test(value),
 host:value=>value.length<=253&&/^(?:[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.)*[A-Za-z0-9](?:[A-Za-z0-9-]{0,61}[A-Za-z0-9])?\.?$/.test(value),
 ip:value=>flowIPv4(value)||flowIPv6(value),cidr:value=>{const[address,prefix,extra]=value.split("/");return extra===undefined&&/^\d{1,3}$/.test(prefix || "") && (flowIPv4(address) && Number(prefix) <= 32 || flowIPv6(address) && Number(prefix) <= 128); },
@@ -185,7 +186,7 @@ const value=flowCopy(this.values.get(field.id)??null),from=flowNormal(this.initi
 const proposal={kind:"flowSubmission",flow:model.id,version:1,mode:edit?"edit":"create"};if(model.baseline!==null)proposal.baseline=model.baseline;Object.assign(proposal,{values,secrets,changes,patch});flowEach("proposal",this,proposal);return proposal},async submit(){if(this.busy||this.phase!=="form")return null;const ticket=this.beginOperation(),current=ticket.current,wait=ticket.wait;this.banner=null;this.hostErrors.clear();this.hostStepErrors.clear();this.renderActions();try{const result=await wait(this.validateAll(current));if(!current())return null;if(!result.valid){const review=this.reviewStep();if(review&&this.stepVisible(review)){if(this.step!==review)await this.go(review,"forward");else{this.reviewStale=true;this.render()}}
 else{const first=result.errors.find(error=>error.step);await this.go(this.model.steps.find(step=>step.id===first?.step)||this.step,"back");if(first?.step)this.showSummary(this.step)}
 return null}
-const proposal=this.submission(),secrets=new Map([...this.secrets].filter(([id])=>this.visible(this.model.fields.get(id)))),read=new Set();let answer,answered=false,open=true;const close=ticket.close=()=>{open=false;secrets.clear()};const detail=Object.assign(flowCopy(proposal),{respondWith:value=>{if(!answered&&open){answered=true;answer=Promise.resolve(value);answer.catch(()=>{})}},secret:id=>{if(!open||read.has(id)||!secrets.has(id))return null;read.add(id);return secrets.get(id)}});Object.freeze(detail);const go=this.emit("flowSubmit",detail,null,true);if(!go||!current()){close();return null}
+const proposal=this.submission(),secrets=new Map([...this.secrets].filter(([id])=>this.visible(this.model.fields.get(id)))),read=new Set();let answer,answered=false,open=true;const close=ticket.close=()=>{open=false;secrets.clear()};const detail=Object.assign(flowCopy(proposal),{respondWith:value=>{if(!answered&&open){answered=true;answer=Promise.resolve(value);answer.catch(()=>{})}},secret:id=>{if(!open||read.has(id)||!secrets.has(id))return null;read.add(id);return secrets.get(id)}});Object.freeze(Object.defineProperty(detail,"signal",{value:ticket.signal}));const go=this.emit("flowSubmit",detail,null,true);if(!go||!current()){close();return null}
 if(!answered&&typeof this.options.onSubmit==="function"){const value=await wait(this.hook("onSubmit",()=>this.options.onSubmit(detail)));if(!current()){close();return null}
 if(value.failed){answered=true;answer={status:"error",message:value.failed}}
 else if(value.value!==undefined){answered=true;answer=value.value}}
@@ -213,5 +214,5 @@ item.append(term,value);list.appendChild(item)}
 panel.appendChild(list)}
 if(answer.links.length){const links=h("ul","cx-flow-links");for(const link of answer.links){const item=h("li"),anchor=h("a","cx-flow-link");anchor.href=link.href;setText(anchor,link.label);item.appendChild(anchor);links.appendChild(item)}
 panel.appendChild(links)}
-const actions=h("div","cx-flow-actions cx-flow-panel-actions"),again=h("button","cx-flow-btn");again.type="button";setText(again,labels.flowStartAgain);const acknowledged=()=>{again.disabled=[...panel.querySelectorAll(".cx-flow-saved-it")].some(box=>!box.checked)};panel.addEventListener("change",acknowledged);acknowledged();again.addEventListener("click",()=>{this.panel=null;this.reset();this.stage.querySelector(".cx-flow-step-title")?.focus()});actions.appendChild(again);panel.appendChild(actions);return panel},progressPanel(answer){const panel=this.panelShell("progress",this.labels.flowAccepted),text=h("p","cx-flow-panel-text"),bar=h("progress","cx-flow-bar");setText(text,answer.message||"");bar.setAttribute("aria-labelledby",panel.firstChild.id);panel.append(text,bar);return panel}});function flowCreate(host,options,editors){const view=new FlowView(host,options,editors);const impl={ready:Promise.resolve().then(()=>{if(!view.destroyed)host.setAttribute("data-cx-ready","");view.emit("flowReady",{flow:view.model.id,step:view.step.id},"onReady");return impl}),next:()=>view.next(),back:()=>view.back(),goTo:id=>view.goTo(id),getStep:()=>view.getStep(),getValues:()=>view.getValues(),setValues:values=>view.setValues(values),getState:()=>view.getState(),setState:state=>view.setState(state),isDirty:()=>view.isDirty(),reset:()=>view.reset(),validate:id=>view.validate(id),setFieldError:(id,message)=>view.setFieldError(id,message),submit:()=>view.submit(),setProgress:progress=>view.setProgress(progress),complete:answer=>view.complete(answer),destroy:()=>view.destroy()};const part=(name,none)=>(...args)=>view[name]?view[name](...args):none??flowFail("this flow does not use "+name);return Object.assign(impl,{runCheck:part("runCheck"),refreshOptions:part("refreshOptions"),setStepState:part("setStepState"),setPreset:part("setPreset"),saveDraft:()=>part("saveDraft",false)(true),open:()=>part("open",false)(),close:()=>part("close",false)()})}
+const actions=h("div","cx-flow-actions cx-flow-panel-actions"),again=h("button","cx-flow-btn");again.type="button";setText(again,labels.flowStartAgain);const acknowledged=()=>{again.disabled=[...panel.querySelectorAll(".cx-flow-saved-it")].some(box=>!box.checked)};panel.addEventListener("change",acknowledged);acknowledged();again.addEventListener("click",()=>{this.panel=null;this.reset();this.stage.querySelector(".cx-flow-step-title")?.focus()});actions.appendChild(again);panel.appendChild(actions);return panel},progressPanel(answer){const panel=this.panelShell("progress",this.labels.flowAccepted),text=h("p","cx-flow-panel-text"),bar=h("progress","cx-flow-bar");setText(text,answer.message||"");bar.setAttribute("aria-labelledby",panel.firstChild.id);panel.append(text,bar);return panel}});function flowCreate(host,options,editors){const view=new FlowView(host,options,editors);const impl={ready:Promise.resolve().then(()=>{if(!view.destroyed)host.setAttribute("data-cx-ready","");view.emit("flowReady",{flow:view.model.id,step:view.step.id},"onReady");return impl}),next:()=>view.next(),back:()=>view.back(),goTo:id=>view.goTo(id),getStep:()=>view.getStep(),getValues:()=>view.getValues(),setValues:values=>view.setValues(values),getState:()=>view.getState(),setState:state=>view.setState(state),isDirty:()=>view.isDirty(),reset:()=>view.reset(),validate:id=>view.validate(id),setFieldError:(id,message)=>view.setFieldError(id,message),submit:()=>view.submit(),setProgress:progress=>view.setProgress(progress),complete:answer=>view.complete(answer),destroy:()=>view.destroy()};const part=(name,none)=>(...args)=>view[name]?view[name](...args):none??flowFail("this flow does not use "+name);return Object.assign(impl,{runCheck:part("runCheck"),invalidateChecks:part("invalidateChecks"),refreshOptions:part("refreshOptions"),setStepState:part("setStepState"),setPreset:part("setPreset"),saveDraft:()=>part("saveDraft",false)(true),open:()=>part("open",false)(),close:()=>part("close",false)()})}
 Object.assign(FLOW_IMPL,{create:flowCreate,core:{FlowView,FLOW_HOST,FLOW_LABELS,flowFail,flowIs,flowKeys,flowName,flowString,flowFlag,flowScalar,flowFits,flowField,flowOptions,flowCondition,flowRefs,flowTest,flowCopy,flowSameValue,flowEmpty,flowNormal,flowDate,flowFieldView}});installed.add(context.FLOW_IMPL)}};(global.CanopyXParts||=[]).push(["flow",part])})(typeof window!=="undefined"?window:globalThis);

package/CanopyX.Html/Assets/canopyx-format-editor.css

@@ -1,61 +1,61 @@
-.cx-format-editor{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-720px,720px);max-height:var(--cx-size-85vh);padding:0;border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);background:var(--cx-surface);box-shadow:var(--cx-panel-shadow);flex-direction:column;overflow:hidden;}
+.cx-format-editor{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-720px,720px);max-height:var(--cx-size-85vh);padding:0;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));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));flex-direction:column;overflow:hidden;}
 .cx-format-editor[open]{display:flex;}
 body .cx-host.cx-grid-overlay.cx-format-editor{height:fit-content;}
-.cx-format-editor::backdrop{background:color-mix(in srgb,var(--cx-shadow-ink) 35%,transparent);}
-.cx-format-editor .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-12px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--cx-line);}
+.cx-format-editor::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
+.cx-format-editor .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-12px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
 .cx-format-editor .cx-drawer-h h4{margin:0;flex:1;font-size:var(--cx-size-17px);}
 .cx-format-body{flex:0 1 auto;min-height:0;overflow:auto;padding:var(--cx-size-14px) var(--cx-size-16px);}
 .cx-format-editor > .cx-grid-control-error{margin:0;padding:0 var(--cx-size-16px) var(--cx-size-8px);}
 .cx-format-editor > .cx-pop-f{gap:var(--cx-size-12px);flex-wrap:wrap;}
 .cx-format-editor .cx-pop-f > .cx-format-legend-switch{margin-right:auto;font-size:var(--cx-size-13px);}
-.cx-format-editor .cx-pop-f > .cx-link{border:0;background:transparent;color:var(--cx-accent);font-weight:600;}
-.cx-format-editor .cx-muted{color:var(--cx-muted);}
+.cx-format-editor .cx-pop-f > .cx-link{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;}
+.cx-format-editor .cx-muted{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-format-rules{list-style:none;margin:0;padding:0;display:grid;gap:var(--cx-size-2px);}
-.cx-format-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--cx-size-10px);padding:var(--cx-size-6px) var(--cx-size-4px);border-bottom:var(--cx-size-1px) solid var(--cx-line);}
-.cx-format-item input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--cx-accent);}
+.cx-format-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--cx-size-10px);padding:var(--cx-size-6px) var(--cx-size-4px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-format-item input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-format-item-text{display:grid;min-width:0;}
 .cx-format-item-text > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .cx-format-item-text .cx-muted{font-size:var(--cx-size-12d5px);}
 .cx-format-actions{display:flex;gap:var(--cx-size-4px);}
-.cx-format-editor .cx-button.icon{width:var(--cx-control-h);min-width:var(--cx-control-h);padding:0;display:inline-grid;place-items:center;}
+.cx-format-editor .cx-button.icon{width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));min-width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;display:inline-grid;place-items:center;}
 .cx-format-editor .cx-button:disabled{opacity:.45;cursor:default;}
-.cx-format-editor .cx-format-swatch{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:var(--cx-size-24px);height:var(--cx-size-20px);border-radius:var(--cx-radius-sm);border:var(--cx-size-1px) solid var(--cx-line);font-size:var(--cx-size-12px);color:var(--cx-fmt,var(--cx-text-2));}
-.cx-format-editor .cx-format-swatch.cx-fmt-fill{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--cx-surface));border-color:color-mix(in srgb,var(--cx-fmt) 35%,var(--cx-surface));}
+.cx-format-editor .cx-format-swatch{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:var(--cx-size-24px);height:var(--cx-size-20px);border-radius:var(--hfx-radius-sm,4px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--cx-size-12px);color:var(--cx-fmt,var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc)));}
+.cx-format-editor .cx-format-swatch.cx-fmt-fill{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border-color:color-mix(in srgb,var(--cx-fmt) 35%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
 .cx-format-editor .cx-format-swatch.cx-fmt-gradient{width:var(--cx-size-36px);background:var(--cx-fmt-scale);opacity:.6;}
 .cx-format-editor .cx-format-swatch.cx-fmt-barred{width:var(--cx-size-36px);padding:0 var(--cx-size-3px);}
 .cx-format-editor .cx-format-swatch .cx-fmt-bar{width:100%;max-width:none;}
 .cx-format-form.cx-fb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cx-size-12px) var(--cx-size-16px);max-width:none;}
-.cx-format-editor .cx-format-field{display:grid;align-items:start;gap:var(--cx-size-4px);min-width:0;font-size:var(--cx-size-13px);color:var(--cx-text-2);}
-.cx-format-field > .cx-input{color:var(--cx-text);font-size:var(--cx-size-14px);}
+.cx-format-editor .cx-format-field{display:grid;align-items:start;gap:var(--cx-size-4px);min-width:0;font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
+.cx-format-field > .cx-input{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-size:var(--cx-size-14px);}
 .cx-format-form > :is(.cx-format-kinds,.cx-format-columns,.cx-format-when,.cx-format-conditions,.cx-format-style){grid-column:1/-1;}
 .cx-format-kind{justify-self:start;max-width:100%;flex-wrap:wrap;}
 .cx-format-editor .cx-fb .cx-format-kind button{text-transform:none;}
 .cx-format-editor h4:focus{outline:none;}
-.cx-format-columns{display:flex;flex-wrap:wrap;gap:var(--cx-size-6px) var(--cx-size-16px);margin:0;padding:var(--cx-size-8px) var(--cx-size-10px);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);font-size:var(--cx-size-13px);}
-.cx-format-columns legend{padding:0 var(--cx-size-4px);color:var(--cx-text-2);}
+.cx-format-columns{display:flex;flex-wrap:wrap;gap:var(--cx-size-6px) var(--cx-size-16px);margin:0;padding:var(--cx-size-8px) var(--cx-size-10px);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));font-size:var(--cx-size-13px);}
+.cx-format-columns legend{padding:0 var(--cx-size-4px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
 .cx-format-editor .cx-format-when{display:flex;align-items:center;gap:var(--cx-size-8px);font-weight:600;}
-.cx-format-conditions{display:grid;gap:var(--cx-size-8px);padding:var(--cx-size-10px);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-radius);}
+.cx-format-conditions{display:grid;gap:var(--cx-size-8px);padding:var(--cx-size-10px);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-format-style{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--cx-size-140px),1fr));gap:var(--cx-size-10px) var(--cx-size-12px);align-items:end;}
 .cx-format-bands{grid-column:1/-1;display:grid;gap:var(--cx-size-8px);}
-.cx-format-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) var(--cx-control-h);gap:var(--cx-size-8px);align-items:end;}
-.cx-format-above{align-self:center;font-size:var(--cx-size-13px);color:var(--cx-text-2);}
-.cx-format-style > .cx-link{justify-self:start;border:0;background:transparent;color:var(--cx-accent);font-weight:600;}
+.cx-format-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));gap:var(--cx-size-8px);align-items:end;}
+.cx-format-above{align-self:center;font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
+.cx-format-style > .cx-link{justify-self:start;border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;}
 .cx-format-editor .cx-fb .cx-grid-filter.cx-cond{grid-template-columns:var(--cx-size-56px) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr) auto var(--cx-size-32px);}
 .cx-format-editor .cx-fb .cx-grid-filter .cx-condition-column{grid-column:2;grid-row:1;}
 .cx-format-editor .cx-fb .cx-grid-filter .cx-condition-operator{grid-column:3;grid-row:1;}
 .cx-format-editor .cx-fb .cx-grid-filter .cx-condition-value{grid-column:4;grid-row:1;}
 .cx-format-editor .cx-fb .cx-grid-filter .cx-condition-upper{grid-column:4;grid-row:2;}
 .cx-format-editor .cx-fb .cx-grid-filter .cx-condition-type{grid-column:2;grid-row:2;}
-.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case{grid-column:5;grid-row:1;width:var(--cx-control-h);padding:0;font-weight:700;}
-.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case[aria-pressed="true"]{border-color:var(--cx-accent);background:var(--cx-accent-soft);color:var(--cx-accent-text);}
+.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case{grid-column:5;grid-row:1;width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;font-weight:700;}
+.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case[aria-pressed="true"]{border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
 .cx-format-editor .cx-fb .cx-grid-filter > button.icon{grid-column:6;grid-row:1;}
-.cx-format-editor .cx-fb .cx-adds .cx-link{border:0;background:transparent;color:var(--cx-accent);font-weight:600;padding:0;}
-.cx-format-editor .cx-fb .cx-cond .w{line-height:var(--cx-control-h);}
+.cx-format-editor .cx-fb .cx-adds .cx-link{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;padding:0;}
+.cx-format-editor .cx-fb .cx-cond .w{line-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));}
 body .cx-host.cx-format-editor.cx-phone{inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0;}
 .cx-format-editor.cx-phone .cx-format-form.cx-fb{grid-template-columns:minmax(0,1fr);}
 .cx-format-editor.cx-phone .cx-format-kind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch;}
 .cx-format-editor.cx-phone .cx-fb .cx-format-kind button:nth-child(3){border-left:0;}
-.cx-format-editor.cx-phone .cx-fb .cx-format-kind button:nth-child(n+3){border-top:var(--cx-size-1px) solid var(--cx-line-strong);}
+.cx-format-editor.cx-phone .cx-fb .cx-format-kind button:nth-child(n+3){border-top:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
 .cx-format-editor.cx-phone :is(.cx-input,.cx-button,select,input:not([type="checkbox"])){min-height:var(--cx-size-44px);}
 .cx-format-editor.cx-phone .cx-button.icon{width:var(--cx-size-44px);min-width:var(--cx-size-44px);}
 .cx-format-editor.cx-phone .cx-format-item{grid-template-columns:auto auto minmax(0,1fr);row-gap:var(--cx-size-6px);}