@evotecit/canopyx 0.3.13 → 0.3.16

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

@@ -1,24 +1,7 @@
-/* CanopyX theme. */
+/* Shared semantic tokens are bundled by Sync-Assets.ps1. Only component geometry lives here. */
 .cx-host,.cx-static{
---cx-surface:#ffffff;
---cx-text:#16181c;
---cx-accent:#11776f;
---cx-line:#e2e4e7;
---cx-tone-info:#0a728b;
---cx-tone-success:#177345;
---cx-tone-warning:#8c5c05;
---cx-tone-danger:#b8292a;
---cx-font:Calibri,Carlito,"Segoe UI",system-ui,sans-serif;
---cx-font-mono:"IBM Plex Mono","Cascadia Mono",Consolas,monospace;
---cx-font-size:14px;
---cx-radius:6px;
---cx-radius-sm:4px;
---cx-control-h:32px;
---cx-row-h:28px;
---cx-head-h:36px;
---cx-cell-px:12px;
---cx-on-accent:#ffffff;
---cx-shadow-ink:#000;
+--cx-compact:0;
+--cx-row-h:var(--hfx-row-height,calc(40px - var(--cx-compact,0) * 8px));
 --cx-size-d04em:.04em;
 --cx-size-46ch:46ch;
 --cx-size-440px:440px;
@@ -90,59 +73,11 @@
 --cx-size-d875em:.875em;
 --cx-size-92px:92px;
 --cx-size-28px:28px;
---cx-text-2:color-mix(in srgb,var(--cx-text) 78%,var(--cx-surface));
---cx-muted:color-mix(in srgb,var(--cx-text) 66%,var(--cx-surface));
---cx-control-border:color-mix(in srgb,var(--cx-text) 54%,var(--cx-surface));
---cx-head-bg:color-mix(in srgb,var(--cx-text) 3.5%,var(--cx-surface));
---cx-group-bg:color-mix(in srgb,var(--cx-text) 2.5%,var(--cx-surface));
---cx-alt-bg:var(--cx-group-bg);
---cx-hover-bg:color-mix(in srgb,var(--cx-text) 4%,var(--cx-surface));
---cx-selected-bg:color-mix(in srgb,var(--cx-accent) 11%,var(--cx-surface));
---cx-accent-text:color-mix(in srgb,var(--cx-accent) 98%,var(--cx-text));
---cx-accent-soft:color-mix(in srgb,var(--cx-accent) 13%,var(--cx-surface));
---cx-line-strong:color-mix(in srgb,var(--cx-text) 22%,var(--cx-surface));
---cx-row-line:var(--cx-line);
---cx-panel-shadow:0 8px 28px color-mix(in srgb,var(--cx-shadow-ink) 14%,transparent),0 1px 3px color-mix(in srgb,var(--cx-shadow-ink) 8%,transparent);
---cx-tone-danger-bg:color-mix(in srgb,var(--cx-tone-danger) 11%,var(--cx-surface));
---cx-tone-warning-bg:color-mix(in srgb,var(--cx-tone-warning) 13%,var(--cx-surface));
---cx-tone-success-bg:color-mix(in srgb,var(--cx-tone-success) 11%,var(--cx-surface));
---cx-tone-info-bg:color-mix(in srgb,var(--cx-tone-info) 11%,var(--cx-surface));
---cx-quiet:color-mix(in srgb,var(--cx-tone-success) 55%,var(--cx-surface));
---cx-scrollbar-thumb:color-mix(in srgb,var(--cx-text) 28%,transparent);
---cx-scrollbar-thumb-hover:color-mix(in srgb,var(--cx-text) 46%,transparent);
+--cx-size-1px:1px;--cx-size-neg-1px:-1px;
+--cx-scrollbar-thumb:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 28%,transparent);
+--cx-scrollbar-thumb-hover:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 46%,transparent);
 --cx-scrollbar-track:transparent;
 --cx-scrollbar-size:10px;
-color-scheme:light;
-}
-.cx-host[data-cx-theme="dark"],.cx-static[data-cx-theme="dark"]{
-color-scheme:dark;
---cx-surface:#16181c;
---cx-text:#f2f3f5;
---cx-accent:#37c9b8;
---cx-line:#272a30;
---cx-tone-info:#3ec3dd;
---cx-tone-success:#4cc78a;
---cx-tone-warning:#eeb640;
---cx-tone-danger:#f47171;
---cx-on-accent:#0c0d10;
---cx-head-bg:color-mix(in srgb,var(--cx-text) 4.5%,var(--cx-surface));
---cx-panel-shadow:0 10px 32px color-mix(in srgb,var(--cx-shadow-ink) 55%,transparent),0 0 0 1px var(--cx-line);
-}
-@media (prefers-color-scheme:dark){
-.cx-host[data-cx-theme="auto"],.cx-static[data-cx-theme="auto"]{
-color-scheme:dark;
---cx-surface:#16181c;
---cx-text:#f2f3f5;
---cx-accent:#37c9b8;
---cx-line:#272a30;
---cx-tone-info:#3ec3dd;
---cx-tone-success:#4cc78a;
---cx-tone-warning:#eeb640;
---cx-tone-danger:#f47171;
---cx-on-accent:#0c0d10;
---cx-head-bg:color-mix(in srgb,var(--cx-text) 4.5%,var(--cx-surface));
---cx-panel-shadow:0 10px 32px color-mix(in srgb,var(--cx-shadow-ink) 55%,transparent),0 0 0 1px var(--cx-line);
-}
 }
 .cx-host{
 box-sizing:border-box;
@@ -150,10 +85,10 @@ display:flex;
 flex-direction:column;
 height:var(--cx-size-480px);
 min-height:0;
-color:var(--cx-text);
-background:var(--cx-surface);
-font-family:var(--cx-font,inherit);
-font-size:var(--cx-font-size,var(--cx-size-14px));
+color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));
+background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));
+font-family:var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);
+font-size:var(--hfx-control-font-size,calc(var(--hfx-type-body-size,0.875rem) - var(--cx-compact,0) * .0625rem));
 line-height:1.4;
 }
 .cx-host *,.cx-host *::before,.cx-host *::after{box-sizing:border-box;}
@@ -165,7 +100,7 @@ line-height:1.4;
 :where(.cx-host,.cx-host *){scrollbar-color:var(--cx-scrollbar-thumb) var(--cx-scrollbar-track);scrollbar-width:thin;}
 .cx-host::-webkit-scrollbar,.cx-host ::-webkit-scrollbar{width:var(--cx-scrollbar-size);height:var(--cx-scrollbar-size);}
 .cx-host::-webkit-scrollbar-track,.cx-host ::-webkit-scrollbar-track,.cx-host ::-webkit-scrollbar-corner{background:var(--cx-scrollbar-track);}
-.cx-host::-webkit-scrollbar-thumb,.cx-host ::-webkit-scrollbar-thumb{background:var(--cx-scrollbar-thumb) padding-box;border:var(--cx-size-2px) solid transparent;border-radius:var(--cx-size-999px);}
+.cx-host::-webkit-scrollbar-thumb,.cx-host ::-webkit-scrollbar-thumb{background:var(--cx-scrollbar-thumb) padding-box;border:var(--cx-size-2px) solid transparent;border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
 .cx-host ::-webkit-scrollbar-thumb:hover{background-color:var(--cx-scrollbar-thumb-hover);}
 }
 .cx-sr-only{
@@ -174,51 +109,57 @@ position:absolute !important;
 width:var(--cx-size-1px);height:var(--cx-size-1px);padding:0;margin:var(--cx-size-neg-1px);
 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
 }
+.cx-host[data-cx-density="compact"]{--cx-compact:1;}
+@layer hfx.fallbacks{
+:where([data-cx-fallback-mode="auto"],.cx-static[data-theme="auto"],.cx-static[data-cx-theme="auto"]){color-scheme:light dark;}
+:where([data-cx-fallback-mode="light"],.cx-static[data-theme="light"],.cx-static[data-cx-theme="light"]){color-scheme:light;}
+:where([data-cx-fallback-mode="dark"],.cx-static[data-theme="dark"],.cx-static[data-cx-theme="dark"]){color-scheme:dark;}
+}
 .cx-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-12px);padding:var(--cx-size-4px) 0 var(--cx-size-10px);}
 .cx-search{position:relative;min-width:0;max-width:100%;}
-.cx-search::before{content:"";position:absolute;left:var(--cx-size-12px);top:var(--cx-size-11px);width:var(--cx-size-10px);height:var(--cx-size-10px);border:var(--cx-size-1d5px) solid var(--cx-muted);border-radius:50%;pointer-events:none;}
-.cx-search::after{content:"";position:absolute;left:var(--cx-size-21px);top:var(--cx-size-21px);width:var(--cx-size-5px);border-top:var(--cx-size-1d5px) solid var(--cx-muted);transform:rotate(45deg);pointer-events:none;}
+.cx-search::before{content:"";position:absolute;left:var(--cx-size-12px);top:var(--cx-size-11px);width:var(--cx-size-10px);height:var(--cx-size-10px);border:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));border-radius:50%;pointer-events:none;}
+.cx-search::after{content:"";position:absolute;left:var(--cx-size-21px);top:var(--cx-size-21px);width:var(--cx-size-5px);border-top:var(--cx-size-1d5px) solid var(--hfx-color-text-muted,light-dark(#626770,#8f949d));transform:rotate(45deg);pointer-events:none;}
 .cx-search-input{
-font:inherit;width:var(--cx-size-280px);max-width:100%;min-height:var(--cx-size-34px);padding:var(--cx-size-6px) var(--cx-size-10px) var(--cx-size-6px) var(--cx-size-32px);border-radius:var(--cx-size-7px);
-border:var(--cx-size-1px) solid var(--cx-line-strong);background:var(--cx-surface);color:var(--cx-text);
+font:inherit;width:var(--cx-size-280px);max-width:100%;min-height:var(--cx-size-34px);padding:var(--cx-size-6px) var(--cx-size-10px) var(--cx-size-6px) var(--cx-size-32px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));
+border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));
 }
-.cx-search-input::placeholder{color:var(--cx-muted);opacity:1;}
+.cx-search-input::placeholder{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));opacity:1;}
 .cx-results{
 position:absolute;z-index:20;top:100%;left:0;width:var(--cx-size-420px);max-width:calc(var(--cx-size-100vw) - var(--cx-size-16px));max-height:var(--cx-size-320px);overflow:auto;
-margin:0;padding:var(--cx-size-4px);list-style:none;background:var(--cx-surface);
-border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-8px);box-shadow:var(--cx-panel-shadow);
+margin:0;padding:var(--cx-size-4px);list-style:none;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));
+border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));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-result{display:grid;grid-template-columns:1fr auto;gap:var(--cx-size-2px) var(--cx-size-8px);padding:var(--cx-size-6px) var(--cx-size-8px);border-radius:var(--cx-size-4px);cursor:pointer;}
+.cx-result{display:grid;grid-template-columns:1fr auto;gap:var(--cx-size-2px) var(--cx-size-8px);padding:var(--cx-size-6px) var(--cx-size-8px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));cursor:pointer;}
 .cx-result-label{min-width:0;overflow-wrap:anywhere;}
-.cx-result[aria-selected="true"],.cx-result:hover{background:var(--cx-selected-bg);}
-.cx-result-kind{font-size:var(--cx-size-d8em);color:var(--cx-muted);text-transform:uppercase;}
-.cx-result-context{grid-column:1 / -1;font-size:var(--cx-size-d85em);color:var(--cx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cx-result[aria-selected="true"],.cx-result:hover{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
+.cx-result-kind{font-size:var(--cx-size-d8em);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));text-transform:uppercase;}
+.cx-result-context{grid-column:1 / -1;font-size:var(--cx-size-d85em);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .cx-switch{display:inline-flex;align-items:center;gap:var(--cx-size-7px);min-height:var(--cx-size-34px);cursor:pointer;}
-.cx-switch input{accent-color:var(--cx-accent);width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;}
+.cx-switch input{accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;}
 .cx-columns{position:relative;}
 .cx-columns:not([open]) > .cx-columns-list{display:none;}
-.cx-columns > summary{display:flex;align-items:center;gap:var(--cx-size-10px);min-height:var(--cx-size-34px);cursor:pointer;padding:var(--cx-size-6px) var(--cx-size-10px);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-7px);list-style:none;}
+.cx-columns > summary{display:flex;align-items:center;gap:var(--cx-size-10px);min-height:var(--cx-size-34px);cursor:pointer;padding:var(--cx-size-6px) var(--cx-size-10px);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));list-style:none;}
 .cx-columns > summary::after{content:"";width:var(--cx-size-6px);height:var(--cx-size-6px);border-right:var(--cx-size-1d5px) solid currentColor;border-bottom:var(--cx-size-1d5px) solid currentColor;transform:rotate(45deg) translateY(var(--cx-size-neg-2px));}
-.cx-columns[open] > summary,.cx-columns > summary:hover{background:var(--cx-hover-bg);}
+.cx-columns[open] > summary,.cx-columns > summary:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
 .cx-columns > summary::-webkit-details-marker{display:none;}
 .cx-columns-list{
 position:absolute;z-index:20;top:100%;left:0;margin:0;padding:var(--cx-size-6px);
 width:max-content;min-width:min(var(--cx-size-180px),calc(var(--cx-size-100vw) - var(--cx-size-16px)));max-width:calc(var(--cx-size-100vw) - var(--cx-size-16px));max-height:var(--cx-size-320px);overflow:auto;
-display:grid;gap:var(--cx-size-2px);background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-8px);box-shadow:var(--cx-panel-shadow);
+display:grid;gap:var(--cx-size-2px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));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-columns-list label{display:flex;gap:var(--cx-size-8px);align-items:center;min-height:var(--cx-size-32px);padding:var(--cx-size-4px) var(--cx-size-6px);border-radius:var(--cx-size-4px);cursor:pointer;overflow-wrap:anywhere;}
-.cx-columns-list label:hover{background:var(--cx-hover-bg);}
-.cx-columns-list input{flex:none;width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--cx-accent);}
-.cx-host :is(.cx-search-input,.cx-sort,.cx-columns > summary,.cx-switch input):focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-1px);}
+.cx-columns-list label{display:flex;gap:var(--cx-size-8px);align-items:center;min-height:var(--cx-size-32px);padding:var(--cx-size-4px) var(--cx-size-6px);border-radius:var(--hfx-radius-sm,4px);cursor:pointer;overflow-wrap:anywhere;}
+.cx-columns-list label:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-columns-list 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-host :is(.cx-search-input,.cx-sort,.cx-columns > summary,.cx-switch 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-grid{
 position:relative;flex:1 1 auto;min-height:0;overflow:auto;outline:none;contain:strict;
-background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line);border-radius:var(--cx-size-8px);
+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));
 }
-.cx-head{position:sticky;top:0;z-index:2;min-width:100%;width:max-content;background:var(--cx-head-bg);border-bottom:var(--cx-size-1px) solid var(--cx-line-strong);}
-.cx-hrow{display:flex;height:var(--cx-row-h);}
+.cx-head{position:sticky;top:0;z-index:2;min-width:100%;width:max-content;background:var(--hfx-table-header-background,var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317)));border-bottom:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
+.cx-hrow{display:flex;height:var(--hfx-table-header-height,calc(40px - var(--cx-compact,0) * 8px));}
 .cx-hcell{
 flex:none;position:relative;display:flex;align-items:center;padding:0 var(--cx-size-8px);overflow:hidden;white-space:nowrap;
-font-weight:600;font-size:var(--cx-size-d92em);color:var(--cx-text);border-right:var(--cx-size-1px) solid var(--cx-row-line);user-select:none;
+font-weight:var(--hfx-table-header-weight,var(--hfx-weight-semibold,600));font-size:var(--hfx-table-header-size,var(--hfx-type-caption-size,0.75rem));line-height:var(--hfx-table-header-line-height,var(--hfx-type-caption-line-height,1.35));color:var(--hfx-table-header-color,var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc)));border-right:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));user-select:none;
 }
 .cx-hcell.cx-kind-number{justify-content:flex-end;}
 .cx-sort{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:var(--cx-size-4px);align-items:center;min-height:var(--cx-size-24px);min-width:var(--cx-size-24px);}
@@ -226,22 +167,22 @@ font-weight:600;font-size:var(--cx-size-d92em);color:var(--cx-text);border-right
 .cx-hcell[aria-sort="descending"] .cx-sort::after{content:"\25BC";font-size:var(--cx-size-9px);}
 .cx-resize{padding:0;border:0;background:transparent;position:absolute;right:var(--cx-size-neg-3px);top:0;bottom:0;width:var(--cx-size-7px);cursor:col-resize;z-index:1;}
 .cx-pin-tree .cx-hcell:first-child,.cx-pin-tree .cx-row > .cx-tree{position:sticky;left:0;z-index:1;}
-.cx-pin-tree .cx-hcell:first-child{z-index:2;background:var(--cx-head-bg);}
+.cx-pin-tree .cx-hcell:first-child{z-index:2;background:var(--hfx-table-header-background,var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317)));}
 .cx-pin-tree .cx-row > .cx-tree{background:inherit;}
-.cx-pin-tree .cx-row:focus-visible > .cx-tree{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
+.cx-pin-tree .cx-row:focus-visible > .cx-tree{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:calc(-1 * var(--hfx-focus-width,2px));}
 .cx-canvas{position:relative;min-width:100%;}
 .cx-canvas[data-cx-scaled]{overflow:clip;}
 .cx-row{
 position:absolute;left:0;top:0;display:flex;height:var(--cx-row-h);min-width:100%;
-background:var(--cx-surface);border-bottom:var(--cx-size-1px) solid var(--cx-row-line);cursor:default;contain:strict;
+background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));cursor:default;contain:strict;
 }
-.cx-row.cx-alt{background:var(--cx-alt-bg);}
-.cx-row:hover{background:var(--cx-hover-bg);}
-.cx-row[aria-selected="true"]{background:var(--cx-selected-bg);}
+.cx-row.cx-alt{background:var(--hfx-color-row-alt,light-dark(#fafafa,#1d1f23));}
+.cx-row:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-row[aria-selected="true"]{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
 .cx-row:focus{outline:none;}
-.cx-row:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
+.cx-row:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:calc(-1 * var(--hfx-focus-width,2px));}
 .cx-cell:focus,.cx-detail-body:focus{outline:none;}
-.cx-cell:focus-visible,.cx-detail-body:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
+.cx-cell:focus-visible,.cx-detail-body:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:calc(-1 * var(--hfx-focus-width,2px));}
 .cx-cell{
 flex:none;display:flex;align-items:center;gap:var(--cx-size-6px);padding:0 var(--cx-size-8px);min-width:0;overflow:hidden;
 white-space:nowrap;text-overflow:ellipsis;
@@ -252,48 +193,48 @@ white-space:nowrap;text-overflow:ellipsis;
 .cx-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .cx-indent{flex:none;display:inline-block;}
 .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-icon{flex:none;display:inline-flex;width:var(--cx-size-16px);height:var(--cx-size-16px);margin-right:var(--cx-size-4px);color:var(--cx-muted);}
+.cx-icon{flex:none;display:inline-flex;width:var(--cx-size-16px);height:var(--cx-size-16px);margin-right:var(--cx-size-4px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-icon svg{width:var(--cx-size-16px);height:var(--cx-size-16px);}
 .cx-exp{
 flex:none;width:var(--cx-size-18px);height:var(--cx-size-18px);display:inline-flex;align-items:center;justify-content:center;
-cursor:pointer;color:var(--cx-muted);border-radius:var(--cx-size-4px);position:relative;
+cursor:pointer;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));position:relative;
 }
 .cx-exp:not(.cx-leaf)::after{content:"";position:absolute;inset:var(--cx-size-neg-3px);}
 .cx-exp::before{content:"";width:var(--cx-size-7px);height:var(--cx-size-7px);border-right:var(--cx-size-1d6px) solid currentColor;border-bottom:var(--cx-size-1d6px) solid currentColor;transform:rotate(-45deg);transition:transform .12s ease;}
 .cx-row[aria-expanded="true"] > .cx-tree .cx-exp::before{transform:rotate(45deg);}
 .cx-exp.cx-leaf{cursor:default;}
-.cx-exp:not(.cx-leaf):hover{background:var(--cx-selected-bg);color:var(--cx-text);}
+.cx-exp:not(.cx-leaf):hover{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
 .cx-exp.cx-leaf::before{display:none;}
-.cx-row[aria-busy="true"] .cx-exp::before{width:var(--cx-size-10px);height:var(--cx-size-10px);transform:none;border:var(--cx-size-1d6px) solid var(--cx-line-strong);border-top-color:var(--cx-accent);border-radius:50%;animation:cx-spin .8s linear infinite;}
+.cx-row[aria-busy="true"] .cx-exp::before{width:var(--cx-size-10px);height:var(--cx-size-10px);transform:none;border:var(--cx-size-1d6px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-top-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-radius:50%;animation:cx-spin .8s linear infinite;}
 @keyframes cx-spin{to{transform:rotate(360deg);}}
 @media (prefers-reduced-motion:reduce){
 .cx-host,.cx-host *,.cx-host ::before,.cx-host ::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
 }
 .cx-group .cx-text{font-weight:600;}
-.cx-row.cx-status .cx-cell{color:var(--cx-muted);font-style:italic;}
-.cx-row.cx-more .cx-cell{color:var(--cx-accent);font-style:normal;}
+.cx-row.cx-status .cx-cell{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-style:italic;}
+.cx-row.cx-more .cx-cell{color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-style:normal;}
 .cx-more-btn{cursor:pointer;text-decoration:underline;text-underline-offset:var(--cx-size-2px);}
-.cx-row.cx-error .cx-cell{color:var(--cx-tone-danger);}
-.cx-mount-error{padding:var(--cx-size-8px);color:var(--cx-tone-danger);}
-.cx-tone-info{color:var(--cx-tone-info);}
-.cx-tone-success{color:var(--cx-tone-success);}
-.cx-tone-warning{color:var(--cx-tone-warning);}
-.cx-tone-danger{color:var(--cx-tone-danger);}
-.cx-tone-muted{color:var(--cx-muted);}
+.cx-row.cx-error .cx-cell{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-mount-error{padding:var(--cx-size-8px);color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-tone-info{color:var(--hfx-color-status-info-fg,light-dark(#2b5fc0,#74a2f7));}
+.cx-tone-success{color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));}
+.cx-tone-warning{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));}
+.cx-tone-danger{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
+.cx-tone-muted{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-badge{
-flex:none;display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--cx-size-999px);font-size:var(--cx-size-d8em);line-height:var(--cx-size-18px);
+flex:none;display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-badge,var(--hfx-radius-sm,4px));font-size:var(--cx-size-d8em);line-height:var(--cx-size-18px);
 font-style:normal;font-weight:400;font-variant-numeric:tabular-nums;
-color:var(--cx-text);background:var(--cx-alt-bg);border:var(--cx-size-1px) solid var(--cx-line);
+color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-row-alt,light-dark(#fafafa,#1d1f23));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
 }
-.cx-badge.cx-tone-info{color:var(--cx-tone-info);background:color-mix(in srgb,var(--cx-tone-info) 12%,var(--cx-surface));border-color:transparent;}
-.cx-badge.cx-tone-success{color:var(--cx-tone-success);background:color-mix(in srgb,var(--cx-tone-success) 12%,var(--cx-surface));border-color:transparent;}
-.cx-badge.cx-tone-warning{color:var(--cx-tone-warning);background:color-mix(in srgb,var(--cx-tone-warning) 12%,var(--cx-surface));border-color:transparent;}
-.cx-badge.cx-tone-danger{color:var(--cx-tone-danger);background:color-mix(in srgb,var(--cx-tone-danger) 12%,var(--cx-surface));border-color:transparent;}
-.cx-badge.cx-tone-muted{color:var(--cx-muted);}
+.cx-badge.cx-tone-info{color:var(--hfx-color-status-info-fg,light-dark(#2b5fc0,#74a2f7));background:var(--hfx-color-status-info-bg,light-dark(#e4ecfa,#262f41));border-color:transparent;}
+.cx-badge.cx-tone-success{color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));border-color:transparent;}
+.cx-badge.cx-tone-warning{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));background:var(--hfx-color-status-warn-bg,light-dark(#f8efde,#3b3322));border-color:transparent;}
+.cx-badge.cx-tone-danger{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));border-color:transparent;}
+.cx-badge.cx-tone-muted{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-toned{color:var(--cx-t,inherit);}
-.cx-badge.cx-toned{color:var(--cx-t,var(--cx-text));background:var(--cx-t-bg,color-mix(in srgb,var(--cx-t,var(--cx-text)) 12%,var(--cx-surface)));border-color:transparent;}
-.cx-row[aria-selected="true"] :is(.cx-tone-muted,.cx-badge.cx-tone-muted){color:var(--cx-text);}
-.cx-row.cx-detail{background:var(--cx-alt-bg);cursor:auto;contain:layout style;}
+.cx-badge.cx-toned{color:var(--cx-t,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));background:var(--cx-t-bg,color-mix(in srgb,var(--cx-t,var(--hfx-color-text,light-dark(#16181c,#f2f3f5))) 12%,var(--hfx-color-surface,light-dark(#ffffff,#16181c))));border-color:transparent;}
+.cx-row[aria-selected="true"] :is(.cx-tone-muted,.cx-badge.cx-tone-muted){color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-row.cx-detail{background:var(--hfx-color-row-alt,light-dark(#fafafa,#1d1f23));cursor:auto;contain:layout style;}
 .cx-row.cx-detail > .cx-cell{align-items:stretch;padding:0;white-space:normal;overflow:visible;}
 .cx-detail-body{overflow:auto;padding:var(--cx-size-8px) var(--cx-size-12px);}
 .cx-row .cx-detail-body{
@@ -303,58 +244,56 @@ width:max(var(--cx-size-12em),calc(var(--cx-view-w,100%) - var(--cx-detail-left,
 .cx-row.cx-detail-auto{min-height:var(--cx-row-h);}
 .cx-detail-auto .cx-detail-body{height:auto;}
 .cx-detail-table{width:100%;border-collapse:collapse;font-size:var(--cx-size-d92em);table-layout:fixed;}
-.cx-detail-table caption{text-align:left;color:var(--cx-muted);padding-bottom:var(--cx-size-6px);}
-.cx-detail-table th{text-align:left;font-weight:600;border-bottom:var(--cx-size-1px) solid var(--cx-line-strong);padding:var(--cx-size-5px) var(--cx-size-8px);overflow-wrap:anywhere;}
-.cx-detail-table td{padding:var(--cx-size-5px) var(--cx-size-8px);border-bottom:var(--cx-size-1px) solid var(--cx-row-line);vertical-align:top;overflow-wrap:anywhere;}
+.cx-detail-table caption{text-align:left;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));padding-bottom:var(--cx-size-6px);}
+.cx-detail-table th{text-align:left;font-weight:600;border-bottom:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));padding:var(--cx-size-5px) var(--cx-size-8px);overflow-wrap:anywhere;}
+.cx-detail-table td{padding:var(--cx-size-5px) var(--cx-size-8px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));vertical-align:top;overflow-wrap:anywhere;}
 .cx-props{display:grid;grid-template-columns:max-content 1fr;gap:var(--cx-size-2px) var(--cx-size-16px);margin:0;font-size:var(--cx-size-d92em);}
-.cx-props dt{color:var(--cx-muted);}
+.cx-props dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
 .cx-props dd{margin:0;overflow-wrap:anywhere;}
 .cx-outline{display:none;}
 .cx-outline-table{border-collapse:collapse;font-size:var(--cx-size-11px);}
-.cx-outline-table td,.cx-outline-table th{border:var(--cx-size-1px) solid var(--cx-control-border);padding:var(--cx-size-1px) var(--cx-size-4px);text-align:left;}
+.cx-outline-table td,.cx-outline-table th{border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));padding:var(--cx-size-1px) var(--cx-size-4px);text-align:left;}
 @media print{
 .cx-host,.cx-host[data-cx-theme],.cx-static,.cx-static[data-cx-theme]{
---cx-surface:#ffffff;--cx-text:#16181c;--cx-accent:#11776f;--cx-line:#e2e4e7;
---cx-tone-info:#0a728b;--cx-tone-success:#177345;--cx-tone-warning:#8c5c05;--cx-tone-danger:#b8292a;
-color-scheme:light;height:auto !important;color:var(--cx-text);background:var(--cx-surface);
+color-scheme:light !important;height:auto !important;color:#16181c !important;background:#ffffff !important;
 }
-.cx-outline-table{color:var(--cx-text);background:var(--cx-surface);}
+.cx-outline-table,.cx-outline-table :is(th,td),.cx-static :is(table,caption,th,td){color:#16181c !important;background:#ffffff !important;border-color:#8a8f98 !important;}
 .cx-grid,.cx-toolbar{display:none !important;}
 .cx-host:has(> .cx-outline:empty) > .cx-grid{display:block !important;}
 .cx-outline{display:block;}
 }
-body.cx-page{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
+body.cx-page{margin:0;font-family:var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
 body.cx-page > .cx-host,body.cx-page > .cx-main > .cx-host{height:var(--cx-size-100vh);padding:var(--cx-size-12px) var(--cx-size-16px);}
-.cx-resize:focus{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
+.cx-resize:focus{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:calc(-1 * var(--hfx-focus-width,2px));}
 @media (forced-colors:active){
 :is(.cx-row,.cx-result)[aria-selected="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;border:var(--cx-size-1px) solid Highlight;}
 :is(.cx-row,.cx-result)[aria-selected="true"] :not(input,select){forced-color-adjust:none;color:HighlightText!important;background-color:transparent!important;border-color:HighlightText!important;outline-color:HighlightText!important;}
 :is(.cx-row,.cx-result)[aria-selected="true"] .cx-cell{background-color:Highlight!important;}
 :is(.cx-row,.cx-result)[aria-selected="true"]:focus-visible{outline-color:HighlightText;}
-:where(.cx-host) :is([role^="menuitem"],[role="option"],.cx-result,summary,button):focus-visible{outline:var(--cx-size-2px) solid;outline-offset:var(--cx-size-neg-2px);}
+:where(.cx-host) :is([role^="menuitem"],[role="option"],.cx-result,summary,button):focus-visible{outline:var(--cx-size-2px) solid;outline-offset:var(--hfx-focus-offset,2px);}
 :where(.cx-host) [aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText;}
 .cx-badge{outline:var(--cx-size-1px) solid;outline-offset:calc(-1 * var(--cx-size-1px));}
 }
-.cx-check{flex:none;margin:0 0 0 var(--cx-size-6px);width:var(--cx-size-16px);height:var(--cx-size-16px);accent-color:var(--cx-accent);}
-.cx-check:focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-1px);}
-.cx-interaction-panel{position:fixed;z-index:20;box-sizing:border-box;width:min(var(--cx-size-340px),calc(var(--cx-size-100vw) - var(--cx-size-16px)));max-height:calc(var(--cx-size-100vh) - var(--cx-size-16px));overflow:auto;padding:var(--cx-size-12px);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-10px);background:var(--cx-surface);color:var(--cx-text);box-shadow:var(--cx-panel-shadow);font:inherit;}
-.cx-interaction-panel button,.cx-editor{box-sizing:border-box;font:inherit;color:inherit;background:var(--cx-surface);border:var(--cx-size-1px) solid var(--cx-line-strong);border-radius:var(--cx-size-6px);min-height:var(--cx-size-34px);padding:var(--cx-size-6px) var(--cx-size-12px);}
+.cx-check{flex:none;margin:0 0 0 var(--cx-size-6px);width:var(--cx-size-16px);height:var(--cx-size-16px);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-check: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-interaction-panel{position:fixed;z-index:20;box-sizing:border-box;width:min(var(--cx-size-340px),calc(var(--cx-size-100vw) - var(--cx-size-16px)));max-height:calc(var(--cx-size-100vh) - var(--cx-size-16px));overflow:auto;padding:var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));font:inherit;}
+.cx-interaction-panel button,.cx-editor{box-sizing:border-box;font:inherit;color:inherit;background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));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));min-height:var(--cx-size-34px);padding:var(--cx-size-6px) var(--cx-size-12px);}
 .cx-interaction-panel button{cursor:pointer;}
-.cx-interaction-panel button:disabled{color:var(--cx-muted);cursor:default;}
+.cx-interaction-panel button:disabled{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));cursor:default;}
 .cx-editor{width:100%;margin-bottom:var(--cx-size-12px);padding:var(--cx-size-7px) var(--cx-size-10px);}
 .cx-editor[type="checkbox"]{width:var(--cx-size-20px);height:var(--cx-size-20px);display:block;}
-.cx-editor[type="checkbox"]{min-height:var(--cx-size-20px);accent-color:var(--cx-accent);}
+.cx-editor[type="checkbox"]{min-height:var(--cx-size-20px);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 .cx-interaction-title{font-weight:600;margin-bottom:var(--cx-size-10px);}
 .cx-interaction-buttons{display:flex;justify-content:flex-end;gap:var(--cx-size-8px);}
-.cx-interaction-panel .cx-save{background:var(--cx-selected-bg);border-color:var(--cx-accent);font-weight:600;}
+.cx-interaction-panel .cx-save{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;}
 .cx-interaction-panel[role="menu"]{padding:var(--cx-size-5px);}
 .cx-action-item{display:block;width:100%;min-height:var(--cx-size-36px);text-align:start;border:0 !important;}
-.cx-action-item[aria-disabled="true"]{color:var(--cx-muted);}
-.cx-interaction-panel button:not(:disabled):not([aria-disabled="true"]):hover{background:var(--cx-hover-bg);}
-.cx-interaction-panel :focus-visible{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
-.cx-drop-target{outline:var(--cx-size-2px) solid var(--cx-accent);outline-offset:var(--cx-size-neg-2px);}
-.cx-drop-target[data-cx-drop-placement="before"]{outline:0;box-shadow:inset 0 var(--cx-size-3px) var(--cx-accent);}
-.cx-drop-target[data-cx-drop-placement="after"]{outline:0;box-shadow:inset 0 var(--cx-size-neg-3px) var(--cx-accent);}
+.cx-action-item[aria-disabled="true"]{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-interaction-panel button:not(:disabled):not([aria-disabled="true"]):hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
+.cx-interaction-panel :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-drop-target{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
+.cx-drop-target[data-cx-drop-placement="before"]{outline:0;box-shadow:inset 0 var(--cx-size-3px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
+.cx-drop-target[data-cx-drop-placement="after"]{outline:0;box-shadow:inset 0 var(--cx-size-neg-3px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
 @media (forced-colors: active){
 .cx-interaction-panel :focus-visible{outline-color:Highlight;}
 .cx-drop-target[data-cx-drop-placement="before"]{border-top:var(--cx-size-3px) solid Highlight;}