/* =============================================================================
 * vx-platform-standard.css — the rules every module page shares.
 *
 * ⚠️ NOT A NEW LOOK (owner, 2026-10-02: "I don't want you to build a new look
 * and feel but use the one which is already there and make that standard
 * across the platform so platform appears like whole one application").
 * Everything here is lifted from what Extraction / Engineering Data already
 * do, made page-independent:
 *
 *  1. The module stage head — Engineering Data's compact 42px strip.
 *  2. A pane's header never scrolls with its content — the inspector head on
 *     Results, Review and any page using the Results inspector stays put.
 *  3. The one drawing viewer (vx-occurrence-viewer.js), sized for any pane.
 * ========================================================================== */

/* 1. Module stage head (as #page-engineering-data .ed-stage-head). */
.vx-stage-head{
  flex:0 0 42px;min-height:42px;width:100%;margin:0;padding:0 14px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--border);background:var(--surface);box-sizing:border-box;
}
.vx-stage-copy{min-width:0;display:flex;align-items:center;gap:12px;}
.vx-stage-title{flex:0 0 auto;color:var(--accent);font-size:var(--fs-3);line-height:var(--lh-tight,1.3);
  font-weight:500;white-space:nowrap;}
.vx-stage-sub{min-width:0;max-width:820px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text2);font-size:var(--fs-3);line-height:var(--lh-tight,1.3);}
.vx-stage-meta{flex:0 0 auto;display:flex;align-items:center;gap:10px;color:var(--text3);font-size:var(--fs-2);}
@media(max-width:1100px){.vx-stage-sub{display:none;}}

/* 2. A pane header stays while its content scrolls. */
.vxcr-inspector>.vxcr-selected-head,
.vxpf-review-detail>.vxpf-review-head{
  position:sticky;top:0;z-index:2;background:var(--surface);
}
/* A head placed above the scroll area (the Asset Explorer) needs no stickiness. */
.vxcr-right>.vxcr-selected-head{flex:0 0 auto;}

/* 3. The shared drawing viewer, in any pane. */
.vxov-slot{display:contents;}
.vxov-host{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--surface2);}
.vxov-host>.vxcr-locate-canvas{height:calc(100% - 42px);min-height:0;}
.vxov-host>.vxcr-locate-canvas.vxov-full{height:100%;}
.vxov-host>.vxcr-locate-empty{background:var(--surface);height:100%;box-sizing:border-box;}
/* V-1: Autodesk fallback actions side by side */
.vxov-fb-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* =============================================================================
 * 4. WORKBENCH COMPONENTS — the parts every module page is built from
 *    (2026-10-15, owner: "a global rule ... to minimize or eliminate the
 *    surprises going forward").
 *
 * THE RULE (frontend/PLATFORM_UI_STANDARD.md, enforced by
 * backend/tests/test_platform_ui_standard.py):
 *   * a page builds from these classes, the stage head above and the
 *     Results workbench grid (vxcr-*) — it does NOT inject its own <style>;
 *   * colours, spacing and type come from the design tokens only — no hex;
 *   * a new kind of part is added HERE, once, for every page.
 * ========================================================================== */

/* The module page frame: stage head on top, the workbench fills the rest.
 * UI-2 (owner, 2026-10-19: Supplier & Vendor Data had "big space left at the
 * bottom", as Asset Explorer had): a calculated height left the page footer
 * below the page and the space under it wasted. Every standard page is now
 * PINNED between the top bar and a slim footer bar at the very bottom of the
 * window, as Engineering Data, the MTR and Asset Explorer are — one rule here,
 * so no page has to fix it again. */
html body #app-shell .page.vx-page.active{
  display:flex!important;flex-direction:column;padding:0!important;margin:0!important;
  position:fixed!important;inset:var(--vx2-topbar-h,52px) 0 28px 0!important;
  width:auto!important;height:auto!important;min-height:0!important;max-width:none!important;
  overflow:hidden;z-index:1100;background:var(--surface);color:var(--text);
}
html body:has(.page.vx-page.active) .main{overflow:hidden!important;}
html body:has(.page.vx-page.active) .app-footer{
  display:flex!important;position:fixed!important;left:0;right:0;bottom:0;
  height:28px;min-height:28px;margin:0!important;padding:0 16px!important;
  align-items:center;justify-content:center;z-index:1200;box-sizing:border-box;
  border-top:1px solid var(--border);background:var(--surface2);color:var(--text3);
  font-size:var(--fs-1);
}
.vxcr-grid.vx-wb{flex:1 1 auto;min-height:0;grid-template-columns:288px minmax(0,1fr) 400px;}
@media(max-width:1250px){.vxcr-grid.vx-wb{grid-template-columns:240px minmax(0,1fr) 340px;}}

/* Left pane: a search, a filter, and a list in sections. */
.vx-wb-left{display:flex;flex-direction:column;overflow:hidden;}
.vx-wb-left .vxcr-toolbar input{flex:1 1 auto;min-width:0;width:auto;margin:0;}
.vx-wb-filter{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border2);}
.vx-wb-filter select{flex:1 1 auto;min-width:0;width:auto;height:30px;margin:0;
  border:1px solid var(--border-control,var(--border2));border-radius:2px;
  background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-2);padding:0 6px;}
.vx-wb-list{flex:1 1 auto;min-height:0;overflow:auto;}
.vx-wb-list h4.vx-wb-group{cursor:pointer;justify-content:space-between;gap:8px;}
.vx-wb-list h4.vx-wb-group span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vx-wb-list h4.vx-wb-group small{flex:0 0 auto;white-space:nowrap;font-size:var(--fs-1);}
.vx-wb-list h4.vx-wb-group:hover{color:var(--accent);}
.vx-wb-list h4.vx-wb-group.active{color:var(--accent);box-shadow:inset 3px 0 0 var(--accent);}
.vx-wb-item span{font-family:var(--font-display);letter-spacing:.005em;}
.vx-wb-item small{grid-column:1/-1;font-size:var(--fs-1);color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vx-wb-foot{flex:0 0 auto;display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--border2);}

/* Status words. */
.vx-wb-st{font-weight:500;}
.vx-wb-st.good{color:var(--green)!important;}
.vx-wb-st.warn{color:var(--amber)!important;}
.vx-wb-st.bad{color:var(--red)!important;}
.vx-wb-late{font-style:normal;color:var(--red);font-size:var(--fs-1);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;}
.vxcr-status.bad i{background:var(--red);}

/* Centre: tabs that size to their count, a scrolling body. */
.vx-wb-main .vxcr-stats>div{min-width:0;flex:1 1 0;}
.vxcr-tabs.vx-wb-tabs{grid-template-columns:repeat(var(--vx-wb-tabs,4),1fr);}
.vx-wb-tabs[hidden]{display:none;}
.vx-wb-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;}
.vx-wb-body [hidden],.vx-wb [hidden]{display:none!important;}
.vx-wb-pad{padding:4px 16px 16px;}
.vx-wb-tools{flex:0 0 auto;}
.vx-wb-tools select{flex:0 1 160px;}
.vx-wb-lbl{font-size:var(--fs-2);color:var(--text3);}
.vxcr-table.vx-wb-table th:nth-child(n){width:auto;}
.vxcr-table.vx-wb-table th:nth-child(n),.vxcr-table.vx-wb-table td:nth-child(n){display:table-cell;}
.vxcr-table.vx-wb-table th.w-xs{width:44px;}
.vxcr-table.vx-wb-table th.w-s{width:70px;}
.vxcr-table.vx-wb-table th.w-m{width:110px;}
.vxcr-table.vx-wb-table th.w-l{width:200px;}
.vx-wb-table td small{color:var(--text3);font-size:var(--fs-1);}
.vx-wb-table td.wrap{white-space:normal;line-height:1.35;padding-top:6px;padding-bottom:6px;height:auto;}
.vx-wb-table input[type=checkbox]{width:auto;margin:0;}
.vx-wb-split{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.vx-wb-split-top{flex:0 0 auto;max-height:40%;overflow:auto;border-bottom:1px solid var(--border2);}
.vx-wb-split-rest{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.vx-wb-scroll{flex:1 1 auto;min-height:0;overflow:auto;}
.vx-wb-subhead{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-bottom:1px solid var(--border);}
.vx-wb-subhead b{font-weight:500;}
.vx-wb-subhead span{font-size:var(--fs-2);color:var(--text3);flex:1 1 auto;}

/* Text. */
.vx-wb-note{font-size:var(--fs-2);color:var(--text3);line-height:1.45;margin:6px 0;}
.vx-wb-quiet{font-size:var(--fs-2);color:var(--text3);}
/* Why something changed, in words (Revision Compare, 2026-10-20). */
.vx-wb-why{font-size:var(--fs-2);color:var(--text);line-height:1.45;margin:6px 0 8px;padding:6px 10px;border-left:3px solid var(--accent);background:var(--surface2);}
.vx-wb-why-row td{font-size:var(--fs-2);color:var(--text2);font-style:italic;padding-top:0;}
.vx-wb-err{font-size:var(--fs-2);color:var(--red);}
.vx-wb-warnnote{margin:10px 16px;padding:9px 12px;border:1px solid var(--border);
  border-left:3px solid var(--amber);font-size:var(--fs-2);line-height:1.45;color:var(--text2);}

/* Actions. */
.vx-wb-acts{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px;}
.vx-wb-acts .btn{width:auto;margin:0;}
.vxcr-inspector .vxcr-actions{border-top:0;}
.vx-wb-x{width:auto;height:auto;margin:0;padding:0 4px;border:0;background:none;
  color:var(--text3);font:inherit;font-size:14px;line-height:1;cursor:pointer;}
.vx-wb-x:hover{color:var(--red);}
.vx-wb-link{width:auto;height:auto;margin:0 0 0 4px;padding:0;border:0;background:none;
  color:var(--accent);font:inherit;cursor:pointer;}
.vx-wb-link:hover{text-decoration:underline;}
.vx-wb-headlink{margin:0;font-size:var(--fs-2);font-weight:500;letter-spacing:.04em;text-transform:uppercase;}

/* Steps a record has been through. */
.vx-wb-steps{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--border);}
.vx-wb-steps li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--border);}
.vx-wb-steps i{flex:0 0 24px;height:24px;border-radius:50%;border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:var(--fs-2);color:var(--text3);}
.vx-wb-steps li.done i{border-color:var(--green);color:var(--green);}
.vx-wb-steps b{display:block;font-weight:500;font-size:var(--fs-3);color:var(--text);}
.vx-wb-steps small{display:block;font-size:var(--fs-2);color:var(--text2);margin-top:2px;}

/* Forms (inspector and centre). Labels are never the global uppercase mono. */
.vx-wb-form{display:flex;flex-direction:column;gap:8px;padding:0 16px 14px;}
.vx-wb-form label,label.vx-wb-option,label.vx-wb-check,label.vx-wb-inline{
  font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:400;}
.vx-wb-form label{display:flex;flex-direction:column;gap:4px;margin:0;
  font-size:var(--fs-2);color:var(--text3);}
.vx-wb-form input,.vx-wb-form select,.vx-wb-form textarea,.vx-wb-field{
  width:100%;margin:0;box-sizing:border-box;border:1px solid var(--border-control,var(--border2));
  border-radius:2px;background:var(--surface);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-3);padding:5px 8px;}
.vx-wb-form input,.vx-wb-form select{height:32px;}
.vx-wb-form .btn{width:auto;align-self:flex-start;margin:0;}
.vx-wb-row{display:flex;gap:6px;align-items:center;}
.vx-wb-narrow{max-width:520px;padding-left:0;}
.vx-wb-field-s{width:150px!important;flex:0 0 auto;}
.vx-wb-row input{flex:1 1 auto;}
.vx-wb-check{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:var(--fs-2);
  color:var(--text2);white-space:nowrap;}
.vx-wb-check input{width:auto;margin:0;}
.vx-wb-inline{display:flex;align-items:center;gap:8px;font-size:var(--fs-3);color:var(--text2);}
.vx-wb-inline input{width:90px!important;}
.vx-wb-option{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;margin:0 0 6px;
  border:1px solid var(--border);border-radius:2px;cursor:pointer;max-width:640px;}
.vx-wb-option input{width:auto!important;height:auto!important;margin:3px 0 0!important;}
.vx-wb-option b{display:block;font-weight:500;font-size:var(--fs-3);color:var(--text);}
.vx-wb-option small{display:block;font-size:var(--fs-2);color:var(--text3);}
.vx-wb-settings .vxcr-kicker{padding-left:0;}
.vx-wb-settings .vx-wb-table{max-width:760px;margin-bottom:8px;}
.vx-wb-settings .vx-wb-table td{overflow:visible;}
.vx-wb-settings .vx-wb-field{height:30px;}

/* Chips, comments, a highlighted value. */
.vx-wb-chips{display:flex;flex-wrap:wrap;gap:6px;}
.vx-wb-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;
  border:1px solid var(--border2);border-radius:2px;font-size:var(--fs-2);color:var(--text);}
.vx-wb-li{font-size:var(--fs-3);padding:5px 0;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.vx-wb-li small{color:var(--text3);font-size:var(--fs-1);}
.vx-wb-comment{position:relative;padding:8px 24px 8px 10px;border:1px solid var(--border);
  border-left:3px solid var(--accent);font-size:var(--fs-3);background:var(--surface);}
.vx-wb-comment small{display:block;font-size:var(--fs-1);color:var(--text3);margin-bottom:2px;}
.vx-wb-comment .vx-wb-x{position:absolute;top:4px;right:4px;}
.vx-wb-on{font-size:var(--fs-2);color:var(--text2);}
.vx-wb-preview{padding:8px 10px;border:1px solid var(--border);background:var(--surface2);}
.vx-wb-preview small{display:block;font-size:var(--fs-1);color:var(--text3);}
.vx-wb-big{font-family:var(--font-display);font-size:var(--fs-5,16px);font-weight:600;color:var(--accent);}
.vx-wb-dot{color:var(--accent);font-size:9px;}
.vx-wb-chg{font-size:var(--fs-2);text-transform:capitalize;}
.vx-wb-chg.changed{color:var(--amber);}
.vx-wb-chg.added{color:var(--green);}
.vx-wb-chg.removed{color:var(--red);}
.vx-wb-discs{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:var(--fs-2);color:var(--text3);}
.vx-wb-discs>span:first-child{width:100%;}
.vx-wb-picker{padding:0 16px 12px;}

/* A small menu under a button (appended to <body>). */
.vx-wb-menu{position:fixed;z-index:10050;width:260px;background:var(--surface);color:var(--text);
  border:1px solid var(--border2);border-radius:3px;
  box-shadow:0 12px 32px rgba(20,24,40,.18);padding:4px 0;font-size:var(--fs-3);}
.vx-wb-menu .vx-wb-mh{padding:8px 14px;border-bottom:1px solid var(--border);font-weight:500;}
.vx-wb-menu .vx-wb-mh small{display:block;font-weight:400;font-size:var(--fs-2);color:var(--text3);}
.vx-wb-menu button{display:block;width:100%;height:auto;margin:0;padding:8px 14px;border:0;
  background:none;text-align:left;font:inherit;color:var(--text);cursor:pointer;}
.vx-wb-menu button:hover{background:var(--surface2);}

@media(prefers-reduced-motion:reduce){.vx-page *{transition:none!important;}}

/* =============================================================================
 * 5. SUPPLIER PORTAL MODE — the portal is the same workbench, full screen,
 *    for a supplier account (body.vx-vendor-mode). The internal shell is
 *    hidden wholesale; nothing else about the look differs.
 * ========================================================================== */
.vx-vendor-mode #app-shell,.vx-vendor-mode .app,.vx-vendor-mode main.main,
.vx-vendor-mode .vx-shell > .vx-bar,.vx-vendor-mode .vx-bar-toggle{display:none!important;}
.vx-vendor-mode #vx-portal{display:flex!important;}
#vx-portal{position:fixed;inset:0;flex-direction:column;background:var(--surface);
  color:var(--text);font-family:var(--font-body);}
#vx-portal .vx-portal-bar{flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 16px;background:var(--nav-bg);color:var(--on-fill);}
#vx-portal .vx-portal-brand{font-family:var(--font-display);font-weight:700;letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;font-size:var(--fs-4);}
#vx-portal .vx-portal-brand em{font-style:normal;color:var(--nav-text-active);font-weight:600;}
#vx-portal .vx-portal-who{display:flex;align-items:center;gap:12px;font-size:var(--fs-2);
  color:var(--nav-text,var(--on-fill));}
#vx-portal .vx-portal-who .btn{width:auto;margin:0;}
#vx-portal .vxcr-grid.vx-wb{flex:1 1 auto;height:auto;}

/* =============================================================================
 * 6. ONE BUTTON (owner, 2026-10-15: "update buttons across the platform to be
 *    consistent ... avoid typical AI generated feel").
 *
 * Every action button on the platform is one of four, on one height scale:
 *   default   hairline border, surface fill, text colour       (most actions)
 *   primary   solid accent — ONE per area, the main next step  (.primary/.accent)
 *   danger    red text, hairline border                       (.danger)
 *   quiet     no border, accent text                          (.ghost/.quiet)
 * Square-cornered like the tables they sit beside; no shadows, no glow, no
 * gradient, no pill shapes. Sizes: regular 30px, .sm 26px, .xs 22px.
 *
 * `html:root` raises the rule above page stylesheets (and the workbench's dark
 * theme overrides), so a page cannot drift from it by accident. A page that
 * needs a new KIND of button adds it HERE.
 * ========================================================================== */
html:root .btn,html:root .vx-btn,html:root .vp-btn,html:root .vxpg-btn,
html:root .vd-ds-nav .vd-del,html:root .vd-mx-tbl .vd-mx-focus,
html:root .rc-btn-primary,html:root .rc-btn-secondary,
html:root .vxcr-actions button,html:root .vxcr-toolbar button,
html:root .vxcr-locate-tools button,html:root .vxcr-locate-empty button{
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  min-height:30px!important;height:auto!important;padding:0 12px!important;margin:0;
  border:1px solid var(--border-control,var(--border2))!important;border-radius:2px!important;
  background:var(--surface)!important;color:var(--text)!important;
  font-family:var(--font-body)!important;font-size:var(--fs-3)!important;font-weight:500!important;
  line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;
  box-shadow:none!important;background-image:none!important;text-shadow:none!important;
  cursor:pointer;white-space:nowrap;transition:background-color .12s,border-color .12s,color .12s;
}
html:root .btn:hover:not(:disabled),html:root .vx-btn:hover:not(:disabled),
html:root .vd-ds-nav .vd-del:hover:not(:disabled),html:root .vd-mx-tbl .vd-mx-focus:hover,
html:root .vp-btn:hover:not(:disabled),html:root .vxpg-btn:hover:not(:disabled),
html:root .rc-btn-secondary:hover:not(:disabled),
html:root .vxcr-actions button:hover:not(:disabled),html:root .vxcr-toolbar button:hover:not(:disabled),
html:root .vxcr-locate-tools button:hover:not(:disabled),html:root .vxcr-locate-empty button:hover:not(:disabled){
  background:var(--surface2)!important;border-color:var(--text3)!important;color:var(--text)!important;
}
html:root .btn:active:not(:disabled),html:root .vx-btn:active:not(:disabled),
html:root .vxcr-actions button:active:not(:disabled),html:root .vxcr-toolbar button:active:not(:disabled){
  background:var(--surface3,var(--surface2))!important;
}
/* Primary — the one main step. */
html:root .btn.primary,html:root .btn.accent,html:root .btn-primary,html:root .vx-btn-primary,
html:root .vxpg-btn.primary,html:root .rc-btn-primary,
html:root .vxcr-actions button.primary,html:root .vxcr-toolbar button.primary{
  background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-fill)!important;
}
html:root .btn.primary:hover:not(:disabled),html:root .btn.accent:hover:not(:disabled),
html:root .btn-primary:hover:not(:disabled),html:root .vx-btn-primary:hover:not(:disabled),
html:root .vxpg-btn.primary:hover:not(:disabled),html:root .rc-btn-primary:hover:not(:disabled),
html:root .vxcr-actions button.primary:hover:not(:disabled),
html:root .vxcr-toolbar button.primary:hover:not(:disabled){
  background:var(--accent2,var(--accent))!important;border-color:var(--accent2,var(--accent))!important;
  color:var(--on-fill)!important;
}
/* Danger — destructive. Red text, never a red block. */
html:root .btn.danger,html:root .vx-btn-danger,html:root .vxcr-actions button.danger{
  color:var(--red)!important;
}
html:root .btn.danger:hover:not(:disabled),html:root .vx-btn-danger:hover:not(:disabled),
html:root .vxcr-actions button.danger:hover:not(:disabled){
  background:var(--red-light,var(--surface2))!important;border-color:var(--red)!important;color:var(--red)!important;
}
html:root .btn.warn{color:var(--amber)!important;}
/* Quiet — secondary actions that should not compete. */
html:root .btn.ghost,html:root .vx-btn-quiet,html:root .btn.quiet{
  background:transparent!important;border-color:transparent!important;color:var(--accent)!important;
}
html:root .btn.ghost:hover:not(:disabled),html:root .vx-btn-quiet:hover:not(:disabled),
html:root .btn.quiet:hover:not(:disabled){background:var(--surface2)!important;border-color:transparent!important;}
/* Sizes. */
html:root .btn.sm,html:root .btn-sm,html:root .vx-btn-sm,html:root .vxpg-btn,
html:root .vd-ds-nav .vd-del{
  min-height:26px!important;padding:0 10px!important;font-size:var(--fs-2)!important;
}
html:root .btn.xs,html:root .btn-xs,html:root .vd-mx-tbl .vd-mx-focus{min-height:22px!important;padding:0 8px!important;font-size:var(--fs-1)!important;}
html:root .btn.icon,html:root .vx-btn-icon{padding:0 8px!important;min-width:30px;}
/* Disabled — visibly unavailable, never a hover response. */
html:root .btn:disabled,html:root .vx-btn:disabled,html:root .vd-ds-nav .vd-del:disabled,html:root .vp-btn:disabled,html:root .vxpg-btn:disabled,
html:root .vxcr-actions button:disabled,html:root .vxcr-toolbar button:disabled{
  opacity:.45!important;cursor:not-allowed!important;
}
html:root .btn:focus-visible,html:root .vx-btn:focus-visible,html:root .vxcr-actions button:focus-visible,
html:root .vxcr-toolbar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
/* A panel's actions sit in a row, left-aligned — not a stack of full-width bars. */
html:root .vxcr-actions{display:flex!important;flex-wrap:wrap;gap:8px;align-items:center;
  grid-template-columns:none!important;}
html:root .vxcr-actions button{width:auto!important;}

/* Head actions — a button row under the selected item's name (always visible). */
.vx-wb-headactions{display:flex;gap:8px;margin-top:10px;}
/* ============================================================================
   §7 Data grid — the shared matrix / datasheet (vx-matrix.js) wherever it is
   mounted (supplier portal, internal). One look for every editable grid:
   flat spreadsheet cells, one row height, the value and its unit as two equal
   halves of the cell, and validation colouring the CELL (inputs are
   transparent, so the colour always shows). `html:root` outranks the generic
   input rule in styles.css.
   ========================================================================== */
html:root .vd-mx-tbl td.vd-mx-cell{padding:0;height:var(--vd-rh,34px);min-width:var(--vd-cw,150px);
  background:var(--surface);vertical-align:middle;}
html:root .vd-mx-tbl td.vd-mx-hasunit{min-width:max(var(--vd-cw,150px),180px);}
html:root .vd-mx-tbl .vd-mx-val{display:block;height:var(--vd-rh,34px);line-height:var(--vd-rh,34px);padding:0 8px;
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html:root .vd-mx-vu{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;height:var(--vd-rh,34px);}
html:root .vd-mx-tbl .vd-mx-in,
html:root .vd-mx-tbl .vd-mx-unit,
html:root .vd-ds2-wrap .vd-ds2-in,
html:root .vd-ds2-wrap .vd-ds2-unitsel{
  display:block;width:100%;min-width:0;height:var(--vd-rh,34px);margin:0;padding:0 8px;
  border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
  font:inherit;font-size:var(--vd-fs,var(--fs-3));color:var(--text);}
html:root .vd-mx-tbl .vd-mx-in{text-align:right;}
html:root .vd-mx-tbl .vd-mx-unit,
html:root .vd-ds2-wrap .vd-ds2-unitsel{border-left:1px solid var(--surface3);color:var(--text2);
  cursor:pointer;max-width:none;}
html:root .vd-mx-tbl .vd-mx-unit:hover,
html:root .vd-ds2-wrap .vd-ds2-unitsel:hover{color:var(--text);}
/* Focus: the whole cell is outlined, value and unit together. */
html:root .vd-mx-tbl td.vd-mx-cell:focus-within,
html:root .vd-ds2-wrap .vd-ds2-edit:focus-within{box-shadow:inset 0 0 0 2px var(--accent);}
/* States — on the cell. Error / warning / passed come from validation; edited =
   typed but not yet saved; save failed = the server refused it. */
html:root .vd-mx-tbl td.vd-mx-err,html:root .vd-ds2-wrap .vd-ds2-err{
  background:var(--red-dim);box-shadow:inset 3px 0 0 var(--red);}
html:root .vd-mx-tbl td.vd-mx-warn,html:root .vd-ds2-wrap .vd-ds2-warn{
  background:var(--amber-dim);box-shadow:inset 3px 0 0 var(--amber);}
html:root .vd-mx-tbl td.vd-mx-ok,html:root .vd-ds2-wrap .vd-ds2-ok{
  background:var(--green-dim);box-shadow:inset 3px 0 0 var(--green);}
html:root .vd-mx-tbl td.vd-mx-dirty,html:root .vd-ds2-wrap .vd-ds2-dirty{background:var(--accent-dim);}
html:root .vd-mx-tbl td.vd-mx-cellerr,html:root .vd-ds2-wrap .vd-ds2-cellerr{
  background:var(--red-dim);box-shadow:inset 0 0 0 2px var(--red);}
html:root .vd-mx-tbl td.vd-mx-err .vd-mx-in,html:root .vd-ds2-wrap .vd-ds2-err .vd-ds2-in{color:var(--red);}
/* Excel-like sizing (SD-1f). A dragged row sets --vd-rh on its <tr>; a
   dragged column sets its width inline. Handles sit on the header edges and
   show only on hover, so the grid stays flat. */
html:root .vd-mx-tbl .vd-mx-corner,html:root .vd-mx-tbl .vd-mx-colh,
html:root .vd-mx-tbl .vd-mx-rowh{background-clip:padding-box;}
html:root .vd-mx-tbl .vd-mx-colh{position:sticky;}
html:root .vd-mx-tbl .vd-mx-rowh{position:sticky;}
html:root .vd-mx-rsz-c,html:root .vd-mx-rsz-r,html:root .vd-mx-rsz-h{position:absolute;z-index:3;}
html:root .vd-mx-rsz-c{top:0;right:-3px;width:7px;height:100%;cursor:col-resize;}
html:root .vd-mx-rsz-r{left:0;right:0;bottom:-3px;height:7px;cursor:row-resize;}
html:root .vd-mx-rsz-h{left:0;right:0;bottom:-3px;height:7px;cursor:row-resize;}
html:root .vd-mx-rsz-c:hover,html:root .vd-mx-rsz-r:hover,html:root .vd-mx-rsz-h:hover,
html:root .vd-mx-resizing .vd-mx-rsz-c,html:root .vd-mx-resizing .vd-mx-rsz-r{
  background:var(--accent);opacity:.55;}
html:root body.vd-mx-resizing,html:root body.vd-mx-resizing *{user-select:none;}
html:root .vd-mx-tbl td.vd-mx-cell{overflow:hidden;}
/* Row header: tag and its two small actions on one line, one row height. */
html:root .vd-mx-tbl .vd-mx-rowh{height:var(--vd-rh,34px);padding:0 8px 0 10px;}
html:root .vd-mx-tbl .vd-mx-rowh-in{flex-wrap:nowrap;gap:6px;}
html:root .vd-mx-tbl .vd-mx-tag{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:500;}
html:root .vd-mx-tbl .vd-mx-focus{flex:0 0 auto;}
/* Datasheet value row: the value and unit share the row like the matrix. */
html:root .vd-ds2-wrap .vd-ds2-edit{padding:0;gap:0;display:flex;align-items:stretch;}
html:root .vd-ds2-wrap .vd-ds2-edit .vd-ds2-in,
html:root .vd-ds2-wrap .vd-ds2-edit .vd-ds2-unitsel{flex:1 1 0;width:auto;}
html:root .vd-ds2-wrap .vd-ds2-edit .vd-ds2-flag{flex:0 0 auto;align-self:center;padding:0 8px;margin:0;}

/* Grid toolbar (class / tag pickers, save state) — aligned with the page's
   own toolbar: same gutter, same control height. */
html:root .vxpg-wrap{margin:0;padding:12px 12px 16px;}
html:root .vxpg-bar{gap:8px;margin-bottom:10px;}
html:root .vxpg-nav{width:auto;min-width:160px;max-width:260px;height:30px;padding:0 8px;
  border:1px solid var(--border-control);border-radius:2px;background:var(--surface);
  font-size:var(--fs-2);color:var(--text);}
html:root .vxpg-navlbl{margin-left:4px;}
html:root .vxpg-navlbl:first-child{margin-left:0;}
html:root .vxpg-sub,html:root .vxpg-mand{font-size:var(--fs-2);}
/* A question the platform asks a person, above a workspace (e.g. "which
   revision is this file?" in Review): the warn note with its rows of
   answer controls. */
.vx-wb-question{margin:0 0 10px;}
.vx-wb-question .vx-wb-acts{align-items:center;margin:8px 0 0;padding-top:8px;
  border-top:1px solid var(--border);}
.vx-wb-question .vx-wb-acts>span{flex:1 1 260px;color:var(--text);}
.vx-wb-question select{height:26px;max-width:420px;font-size:var(--fs-2);}
/* A full-screen workbench over the page (the revision comparison): the stage
   head on top, the three-pane grid below. Closed with its own button / Esc. */
.vx-workbench{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  background:var(--surface);color:var(--text);}
.vx-workbench>.vxcr-grid{flex:1 1 auto;min-height:0;}
.vx-stage-meta select{height:28px;max-width:300px;margin:0;padding:0 6px;font-size:var(--fs-2);}
.vx-workbench>.vxcr-grid.vx-wb{width:100%;max-width:none;margin:0;}
/* Two panes side by side in the centre (From | To), each with a small head. */
.vx-wb-pair{display:grid;grid-template-columns:1fr 1fr;flex:1 1 auto;min-height:0;}
.vx-wb-pair>div{display:flex;flex-direction:column;min-width:0;min-height:0;
  border-right:1px solid var(--border2);}
.vx-wb-pair>div:last-child{border-right:0;}
.vx-wb-pair-head{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 12px;
  font-size:var(--fs-2);color:var(--text2);border-bottom:1px solid var(--border2);}
.vx-wb-pair-head b{color:var(--text);font-weight:500;}
/* P&ID + 3D switch (2026-10-25): one pane takes the full width; the hidden
   pane's viewer is closed, not just hidden. */
.vx-wb-viewsw .vx-seg-opt{padding:3px 10px;}
.vx-wb-pair.one{grid-template-columns:1fr;}
.vx-wb-pair>div[hidden]{display:none;}
/* 2026-10-26: a collapsed viewer is a bar at the bottom; the other takes the whole area. */
.vx-wb-pair-head>.vx-wb-tog{margin-left:auto;}
.vx-wb-pair.vx-wb-oneopen{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;}
.vx-wb-pair.vx-wb-oneopen>div:not(.vx-wb-shut){grid-row:1;}
.vx-wb-pair.vx-wb-oneopen>div.vx-wb-shut{grid-row:2;border-right:0;border-top:1px solid var(--border2);}
.vx-wb-pair>div.vx-wb-shut>.vx-wb-view{display:none;}
/* A list item's status word on the right of its line. */
.vx-wb-item .vx-wb-st{font-size:var(--fs-1);}
/* A before / after table: what changed, from, to. */
.vx-wb-diff{width:100%;border-collapse:collapse;font-size:var(--fs-2);}
.vx-wb-diff th,.vx-wb-diff td{text-align:left;vertical-align:top;padding:6px 8px;
  border-bottom:1px solid var(--border);}
.vx-wb-diff th{color:var(--text3);font-weight:500;}
.vx-wb-diff td.was{color:var(--text3);text-decoration:line-through;}
.vx-wb-diff td.now{color:var(--text);}

/* Changes as stacked cards (2026-10-16): long property names and values
   wrap inside the pane instead of pushing "To" off the page. A list value
   (From/To, components) shows what was removed and added, not two strings. */
.vx-wb-chg-group{margin:12px 0 4px;font-size:var(--fs-1);color:var(--text3);
  text-transform:uppercase;letter-spacing:.04em;}
.vx-wb-chg{padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--fs-2);
  min-width:0;overflow-wrap:anywhere;}
.vx-wb-chg-name{color:var(--text2);font-weight:500;margin-bottom:4px;}
.vx-wb-chg-row{display:flex;gap:8px;align-items:baseline;line-height:1.45;}
.vx-wb-chg-rev{flex:0 0 auto;min-width:56px;font-size:var(--fs-1);color:var(--text3);}
.vx-wb-chg-row .was{color:var(--text3);text-decoration:line-through;min-width:0;}
.vx-wb-chg-row .now{color:var(--text);min-width:0;}
.vx-wb-chg-row .gone{color:var(--red);min-width:0;}
.vx-wb-chg-row .new{color:var(--green);min-width:0;}

/* A viewer filling its pane of a side-by-side workbench (model compare). */
.vx-wb-view{position:relative;flex:1 1 auto;min-height:0;}
.vx-wb-view>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* A dialog over the page (2026-10-16, model tag set-up): a title, a body
   that scrolls, a foot whose summary sits left and actions right. */
.vx-dialog-back{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:20px;background:color-mix(in srgb,var(--text) 40%,transparent);}
.vx-dialog{background:var(--surface);color:var(--text);border:1px solid var(--border2);
  width:min(880px,96vw);max-height:90vh;display:flex;flex-direction:column;}
.vx-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border);}
.vx-dialog-title{font-size:var(--fs-5);font-weight:600;}
.vx-dialog-body{padding:14px 18px;overflow:auto;}
.vx-dialog-body h4{margin:14px 0 6px;font-size:var(--fs-3);font-weight:600;}
.vx-dialog-body h4:first-child{margin-top:0;}
.vx-dialog-body select{max-width:100%;}
.vx-dialog-foot{display:flex;gap:8px;align-items:center;padding:12px 18px;
  border-top:1px solid var(--border);}
.vx-dialog-foot>.vx-wb-quiet{margin-right:auto;}
.vx-dialog-body .vx-wb-acts{align-items:center;}
.vx-dialog-body .vx-wb-acts select{width:auto;flex:0 1 auto;max-width:100%;}
.vx-dialog-body .vx-wb-table td{white-space:normal;overflow:visible;vertical-align:top;}
.vx-dialog-body .vx-wb-table th:nth-child(2),.vx-dialog-body .vx-wb-table td:nth-child(2){width:84px;}
.vx-dialog-body .vx-wb-table th:nth-child(3){width:40%;}
.vx-dialog-body .vx-wb-table td select{width:100%;}

/* =============================================================================
 * Tag reconciliation workbench (vx-tag-reconcile.js, 2026-10-16): a wide
 * table on the left, the P&ID over the 3D model in the middle, the tag's
 * facts and decisions on the right. Parts, not a page style.
 * ========================================================================== */
.vxcr-grid.vx-wb.vx-wb-wide{grid-template-columns:minmax(440px,40%) minmax(0,1fr) 360px;}
@media(max-width:1350px){.vxcr-grid.vx-wb.vx-wb-wide{grid-template-columns:minmax(380px,42%) minmax(0,1fr) 320px;}}
.vx-wb-pair.vx-wb-stack{grid-template-columns:1fr;grid-template-rows:1fr 1fr;}
.vx-wb-pair.vx-wb-stack>div{border-right:0;border-bottom:1px solid var(--border2);}
.vx-wb-pair.vx-wb-stack.vx-wb-oneopen{grid-template-rows:minmax(0,1fr) auto;}
.vx-wb-pair.vx-wb-stack>div:last-child{border-bottom:0;}
/* Filter chips with counts. */
.vx-wb-chips{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;
  border-bottom:1px solid var(--border2);}
.vx-wb-chip{width:auto;height:auto;margin:0;padding:3px 9px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--text2);font:inherit;
  font-size:var(--fs-1);cursor:pointer;white-space:nowrap;}
.vx-wb-chip b{font-weight:600;color:var(--text);margin-left:4px;}
.vx-wb-chip:hover{border-color:var(--accent);}
.vx-wb-chip.on{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);}
/* A clickable table row, and the chosen one. */
.vx-wb-table tr[data-k]{cursor:pointer;}
.vx-wb-table tr[data-k]:hover td{background:var(--surface2);}
.vx-wb-table tr.on td{background:var(--accent-dim);}
.vx-wb-table td.c{text-align:center;}
/* A block of facts in the right pane. */
.vx-wb-block{padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--fs-2);
  overflow-wrap:anywhere;}
.vx-wb-block h5{margin:0 0 4px;font-size:var(--fs-1);font-weight:500;color:var(--text3);
  text-transform:uppercase;letter-spacing:.04em;}
.vx-wb-block textarea{width:100%;min-height:56px;margin:4px 0;box-sizing:border-box;font:inherit;
  font-size:var(--fs-2);}

/* Asset Explorer route (item 4, 2026-10-16): the drawing over the 3D model,
   each step brought forward in both. The 3D half appears only when the line
   is in a model. */
.vx-wb-rmain{display:flex;flex-direction:column;min-width:0;min-height:0;}
.vx-wb-rmain>.vxax-rview{flex:1 1 0;min-height:0;}
.vx-wb-r3{flex:1 1 0;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--border2);}
.vx-wb-r3[hidden]{display:none;}
/* R3-1 (2026-10-18): shut, the 3D half is only its bar (the message and
   Show 3D); the drawing takes the room. */
.vx-wb-r3.shut{flex:0 0 auto;}
.vx-wb-r3.shut>.vx-wb-view{display:none;}
.vx-wb-r3>.vx-wb-pair-head>.vx-wb-tog{margin-left:auto;}

/* =============================================================================
 * 9. ADMIN PANEL (roadmap item 6, 2026-10-19) — the standard module frame:
 *    a grouped list on the left (name + what it does), the open section on
 *    the right under one intro written from that list.
 * ========================================================================== */
#page-admin .admin-wrap{flex:1 1 auto;min-height:0;display:flex;}
#page-admin .admin-shell{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);}
#page-admin .admin-sidebar{display:block;min-height:0;overflow:auto;padding:6px 0 16px;margin:0;
  background:var(--surface);border:0;border-right:1px solid var(--border2);border-radius:0;}
#page-admin .admin-nav-group{padding:16px 16px 6px;font-size:var(--fs-1);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text3);}
#page-admin .admin-nav-group small{display:block;margin-top:2px;font-size:var(--fs-1);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--text3);}
#page-admin .admin-nav-item{display:block;width:100%;height:auto;margin:0;padding:8px 16px 9px;border:0;border-radius:0;
  background:transparent;color:var(--text);text-align:left;font:inherit;cursor:pointer;box-shadow:none;}
#page-admin .admin-nav-item:hover{background:var(--surface2);}
#page-admin .admin-nav-item.active{background:var(--accent-dim,var(--surface2));box-shadow:inset 3px 0 0 var(--accent);}
#page-admin .admin-nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
#page-admin .admin-nav-name{display:block;font-size:var(--fs-3);font-weight:500;color:var(--text);}
#page-admin .admin-nav-item.active .admin-nav-name{color:var(--accent);}
#page-admin .admin-nav-desc{display:block;margin-top:2px;font-size:var(--fs-2);line-height:1.4;color:var(--text3);}
#page-admin .admin-content{min-width:0;min-height:0;overflow:auto;padding:18px 26px 28px;background:var(--surface);}
#page-admin .admin-intro{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--border);}
#page-admin .admin-intro:empty{display:none;}
#page-admin .admin-intro-group{font-size:var(--fs-1);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);}
#page-admin .admin-intro-title{margin-top:4px;font-family:var(--font-display);font-size:var(--fs-5,16px);font-weight:600;color:var(--text);}
#page-admin .admin-intro-desc{margin-top:3px;font-size:var(--fs-3);color:var(--text2);max-width:880px;line-height:1.45;}
/* Each section used to carry its own title and blurb; the intro above now
   says both, so the section's own copy is not repeated. */
#page-admin .admin-section>.admin-section-header:first-child .card-title,
#page-admin .admin-section>.admin-section-header:first-child .card-title+div,
#page-admin .admin-section>.admin-section-header:first-child .card-title+.admin-section-sub{display:none;}
#page-admin .admin-section>.admin-section-header:first-child:not(:has(button:not(.vx-help-inline),select,input)){display:none;}
#page-admin .admin-section .card{box-shadow:none;border-radius:2px;}
@media(max-width:1000px){#page-admin .admin-shell{grid-template-columns:240px minmax(0,1fr);}}
/* Category titles stand out in the list (owner, 2026-10-19): a filled band,
   so a title can never be mistaken for the selected item. The selected item
   is marked by its left bar and tint, its name stays in text colour — it
   used to turn accent, the same colour as the titles. */
#page-admin .admin-nav-group{margin:10px 0 2px;padding:7px 16px 7px;background:var(--accent);color:var(--on-fill);}
#page-admin .admin-nav-group:first-child{margin-top:0;}
#page-admin .admin-nav-group small{color:var(--on-fill);opacity:.85;}
#page-admin .admin-nav-item.active{background:var(--surface2);box-shadow:inset 4px 0 0 var(--accent);}
#page-admin .admin-nav-item.active .admin-nav-name{color:var(--text);font-weight:700;}

/* THREE PANES: the list on the left, the section's table in the centre, the
   selected row's editor on the right (vx-admin-workbench.js). Both panes
   scroll on their own; the intro stays above them. */
#page-admin .admin-content:has(.admin-section.active .adm-wb){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;}
#page-admin .admin-section.active:has(.adm-wb){flex:1 1 auto;min-height:0;display:flex;}
#page-admin .admin-intro{flex:0 0 auto;}
.adm-wb{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;margin:0 -26px;
  border-top:1px solid var(--border);}
@media(max-width:1250px){.adm-wb{grid-template-columns:minmax(0,1fr) 340px;}}
.adm-center{min-width:0;min-height:0;display:flex;flex-direction:column;}
.adm-tools{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px 10px 26px;
  border-bottom:1px solid var(--border2);}
.adm-tools .vx-wb-chips{padding:0;border:0;flex:1 1 100%;}
.adm-search{flex:1 1 220px;max-width:360px;height:30px;margin:0;padding:0 10px;box-sizing:border-box;
  border:1px solid var(--border-control,var(--border2));border-radius:2px;background:var(--surface);color:var(--text);
  font:inherit;font-size:var(--fs-2);}
.adm-tools .btn{margin-left:auto;}
.adm-tools .adm-filter{width:auto;flex:0 0 auto;}
.adm-table-wrap{flex:1 1 auto;min-height:0;overflow:auto;padding:0 0 16px 10px;}
.adm-pad{padding:16px;}
.adm-table td small{display:block;margin-top:2px;white-space:normal;line-height:1.35;}
.adm-table td b{font-weight:500;}
.adm-table td{white-space:normal;height:auto;padding-top:7px;padding-bottom:7px;vertical-align:top;}
.adm-table tr[data-k]{cursor:pointer;}
.adm-table tr[data-k]:hover td{background:var(--surface2);}
.adm-table tr.on td{background:var(--accent-dim);}
.adm-table tr.on td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
.adm-table tr.adm-grp td{padding:14px 12px 5px;font-size:var(--fs-1);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);background:var(--surface);border-bottom:1px solid var(--border2);}
.adm-matrix th.c,.adm-matrix td.c{text-align:center;width:72px;color:var(--accent);font-weight:600;}
.adm-right{min-width:0;min-height:0;overflow:auto;padding:16px 20px 24px;border-left:1px solid var(--border2);background:var(--surface);}
.adm-right-empty{display:flex;flex-direction:column;gap:6px;padding:28px 6px;color:var(--text3);font-size:var(--fs-2);line-height:1.45;}
.adm-right-empty b{color:var(--text2);font-weight:500;font-size:var(--fs-3);}
.adm-right-head{padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.adm-right-head h3{margin:3px 0 0;font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;color:var(--text);
  overflow-wrap:anywhere;}
.adm-right-head p{margin:4px 0 0;font-size:var(--fs-2);color:var(--text2);line-height:1.45;}
.adm-kicker{font-size:var(--fs-1);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);}
.adm-right-body{margin-bottom:10px;}
.adm-note{margin:8px 0;font-size:var(--fs-2);color:var(--text3);line-height:1.45;}
.adm-right .vx-wb-err:empty{display:none;}
.adm-right .vx-wb-err{margin:8px 0;}
.adm-form{display:flex;flex-direction:column;gap:10px;}
.adm-field{display:flex;flex-direction:column;gap:4px;}
.adm-label{font-size:var(--fs-2);color:var(--text2);font-weight:500;}
.adm-in{width:100%;min-width:0;height:30px;margin:0;padding:0 8px;box-sizing:border-box;border:1px solid var(--border-control,var(--border2));
  border-radius:2px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-3);}
textarea.adm-in{height:auto;padding:6px 8px;line-height:1.4;resize:vertical;}
.adm-in[readonly]{background:var(--surface2);color:var(--text2);}
.adm-num{max-width:180px;}
.adm-row{display:flex;gap:6px;align-items:center;}
.adm-colour{width:36px;height:30px;padding:0;border:1px solid var(--border2);border-radius:2px;background:var(--surface);flex:0 0 auto;}
.adm-toggle{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-3);color:var(--text);cursor:pointer;
  text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:400;}
.adm-toggle input{width:auto;margin:0;}
.adm-pick{display:flex;flex-direction:column;gap:4px;}
.adm-check{display:flex;align-items:center;gap:8px;margin:0;padding:3px 0;font-size:var(--fs-3);color:var(--text);cursor:pointer;
  text-transform:none;letter-spacing:0;font-family:var(--font-body);font-weight:400;}
.adm-check input{width:auto;margin:0;}
.adm-list{display:flex;flex-direction:column;gap:6px;}
.adm-list-rows{display:flex;flex-direction:column;gap:4px;}
.adm-list-row{display:flex;align-items:center;gap:4px;}
.adm-list-n{flex:0 0 22px;font-size:var(--fs-1);color:var(--text3);text-align:right;padding-right:2px;}
.adm-list-row .vx-wb-x[disabled]{opacity:.3;cursor:default;}
.adm-list-add .btn{flex:0 0 auto;}
.adm-tablewrap{display:flex;flex-direction:column;gap:6px;overflow-x:auto;}
.adm-grid{border-collapse:collapse;width:100%;font-size:var(--fs-2);}
.adm-grid th{text-align:left;font-weight:500;color:var(--text3);padding:4px 4px;border-bottom:1px solid var(--border2);white-space:nowrap;}
.adm-grid td{padding:3px 4px;border-bottom:1px solid var(--border);vertical-align:middle;}
.adm-grid .adm-in{height:28px;font-size:var(--fs-2);}
.adm-grid textarea.adm-in{min-width:160px;}
.adm-tablewrap>.btn{align-self:flex-start;}
.adm-matrix{table-layout:auto;}
.adm-matrix th:first-child,.adm-matrix td:first-child{min-width:260px;width:auto;}
.adm-matrix th.c,.adm-matrix td.c{width:76px;min-width:64px;white-space:nowrap;}

/* ═══ §10 HOME — the one page for projects (2026-10-19) ═══════════════════
   Standard frame (stage head + vx-wb workbench). Left: Projects and Packages
   under grey bands; centre: greeting + module picture tiles; right: tabs
   (PBS, Configure structure, and one per right-click action). */
#page-home .vh-grid{grid-template-columns:300px minmax(0,1fr) 460px;}
@media(max-width:1250px){#page-home .vh-grid{grid-template-columns:260px minmax(0,1fr) 380px;}}
#page-home .vh-band{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;background:var(--surface2);border-top:1px solid var(--border2);border-bottom:1px solid var(--border2);}
#page-home .vh-band:first-child{border-top:0;}
#page-home .vh-band b{font-weight:700;font-size:var(--fs-3);color:var(--text);letter-spacing:.01em;}
#page-home .vh-band small{font-size:var(--fs-2);color:var(--text3);}
#page-home .vh-tool select{flex:0 0 92px;width:92px;height:30px;margin:0;border:1px solid var(--border-control,var(--border2));
  border-radius:2px;background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-2);padding:0 4px;}
#page-home .vh-half{flex:1 1 0;min-height:90px;}
#page-home .vh-foot{flex-wrap:wrap;align-items:center;}
#page-home .vh-foot .vx-wb-quiet{font-size:var(--fs-1);}
/* Centre */
#page-home .vh-hero{flex:0 0 auto;padding:20px 22px 18px;border-bottom:1px solid var(--border2);background:var(--surface);}
#page-home .vh-hello{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2;color:var(--text);letter-spacing:-.01em;}
#page-home .vh-lede{margin-top:6px;font-size:var(--fs-4);color:var(--text2);}
#page-home .vh-lede b{color:var(--accent);font-weight:600;}
#page-home .vh-continue{border-left:3px solid var(--accent);}
#page-home .vh-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;padding:16px;}
#page-home .vh-tile{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:2px;background:var(--surface);overflow:hidden;}
#page-home .vh-tile.on{cursor:pointer;}
#page-home .vh-tile.on:hover{border-color:var(--accent);}
#page-home .vh-tile-img{position:relative;flex:0 0 96px;height:96px;background-image:var(--vh-img);background-size:cover;background-position:center;background-color:var(--nav-bg);}
#page-home .vh-tile:not(.on) .vh-tile-img{filter:grayscale(1);opacity:.5;}
#page-home .vh-tile-ic{position:absolute;left:10px;top:10px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:2px;background:var(--surface);color:var(--accent);}
#page-home .vh-tile-ic svg{width:16px;height:16px;}
#page-home .vh-tile-dot{position:absolute;right:10px;top:12px;width:9px;height:9px;border-radius:50%;background:var(--green);
  border:2px solid var(--surface);}
#page-home .vh-tile-body{flex:1;display:flex;flex-direction:column;padding:10px 12px 12px;}
#page-home .vh-tile-body b{font-weight:600;font-size:var(--fs-4);color:var(--text);}
#page-home .vh-tile-body small{margin-top:2px;font-size:var(--fs-2);color:var(--text2);line-height:1.4;}
#page-home .vh-tile-body .vx-wb-acts{margin:auto 0 0;padding-top:10px;}
/* Right */
#page-home .vh-right{display:flex;flex-direction:column;overflow:hidden;}
#page-home .vh-rbody{flex:1 1 auto;min-height:0;overflow:auto;}
#page-home .vh-rpane[hidden]{display:none!important;}
#page-home .vh-form{padding-top:12px;}
#page-home .vh-form label select,#page-home .vh-form label input,#page-home .vh-form label textarea{margin-top:2px;}
#page-home .vh-form .pp-form-hint{font-size:var(--fs-1);color:var(--text3);}
/* The breakdown tree (pbs-tree.js) in the PBS tab: always shown there, flat
   like every pane (pbs-tree.js gates it by setup step on the old page). */
#page-home #pbs-pane-tree{display:block!important;}
/* The set-up a project needs before its modules open. */
#page-home .vh-gate{margin:16px 16px 0;padding:14px 16px 6px;border:1px solid var(--border);border-left:3px solid var(--amber);background:var(--surface);}
#page-home .vh-gate-title{font-size:var(--fs-5,16px);font-weight:600;color:var(--text);}
#page-home .vh-gate-sub{margin:4px 0 10px;font-size:var(--fs-3);color:var(--text2);}
#page-home .vh-gate-steps{border-top:0;margin:0;}
#page-home .vh-gate-steps li:last-child{border-bottom:0;}
#page-home .vh-gate-steps li.vh-next i{border-color:var(--amber);color:var(--amber);font-weight:600;}
#page-home .vh-gate-steps li.vh-next b{color:var(--text);}
#page-home .vh-gate-steps li:not(.done):not(.vh-next){opacity:.7;}
#page-home .vh-gate-steps .vx-wb-acts{margin:8px 0 0;}
#page-home .vh-tile.locked .vh-tile-img{filter:grayscale(.85);opacity:.6;}
#page-home .vh-locked{font-size:var(--fs-2);color:var(--amber);}
#page-home .vh-pkg-acts{padding-top:10px;}
#page-home .vh-rpane .card{margin:0;border:0;border-radius:0;box-shadow:none;padding:14px 16px;background:transparent;}
.vx-wb-menu button.vh-danger{color:var(--red);}

/* Pane tabs: any number, each closable (a right pane that opens a tab per
   action). Lives here so any page can use it. */
.vx-wb-ptabs{flex:0 0 auto;display:flex;overflow-x:auto;min-height:40px;border-bottom:1px solid var(--border2);background:var(--surface);}
.vx-wb-ptabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:40px;margin:0;padding:0 12px;border:0;
  border-right:1px solid var(--border);border-radius:0;background:transparent;color:var(--text2);font:inherit;font-size:var(--fs-3);
  white-space:nowrap;cursor:pointer;}
.vx-wb-ptabs button span{max-width:180px;overflow:hidden;text-overflow:ellipsis;}
.vx-wb-ptabs button.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);}
.vx-wb-ptabs .vx-wb-x{font-style:normal;}

/* A dialog in the platform look (square, tokens, head / body / foot). Wide
   enough that its content shows without scrolling. */
.vx-wb-dialog{display:flex;flex-direction:column;width:min(1000px,94vw);max-height:92vh;background:var(--surface);color:var(--text);
  border:1px solid var(--border2);border-radius:2px;box-shadow:0 18px 48px rgba(20,24,40,.22);}
.vx-wb-dialog-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border2);}
.vx-wb-dialog-head strong{font-size:var(--fs-5,16px);font-weight:600;}
.vx-wb-dialog-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 16px 12px;}
.vx-wb-dialog-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--border2);background:var(--surface2);}
/* Configure structure (pbs-tree.js) */
.pbs-le-intro{margin:10px 0 2px;}
.pbs-le-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;}
.pbs-le-grid .vxcr-kicker{padding-left:0;padding-right:0;}
.pbs-le-table td{vertical-align:middle;}
.pbs-le-table .vx-wb-field{height:30px;}
.pbs-le-depth{font-family:var(--font-mono);color:var(--text3);}
.pbs-le-order{white-space:nowrap;}
.pbs-le-order .btn{margin-right:3px;}
.pbs-le-warn td:first-child{box-shadow:inset 3px 0 0 var(--amber);}
.pbs-le-add{align-items:center;margin-top:8px;}
.pbs-le-hint{margin:0;padding:4px 10px;}
.pbs-le-preview{padding:10px 12px;background:var(--surface2);font-size:var(--fs-2);color:var(--text2);line-height:1.5;}
.pbs-le-chain{font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text3);margin-bottom:4px;}
.pbs-le-radios{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
@media(max-width:900px){.pbs-le-grid{grid-template-columns:1fr;}}

/* Class Library dialogs (upgrade report, approve a version). */
.vx-wb-dialog.cl-wide{width:min(1100px,95vw);}
.cl-pad{padding:16px 0;}
.cl-stats{height:auto;min-height:52px;margin-bottom:8px;border:1px solid var(--border);}
.cl-stats>div{flex:1 1 0;min-width:0;padding:8px 12px;}
.cl-form{padding:8px 0 0;}
.cl-reason{flex:1 1 auto;max-width:520px;margin-right:auto;}
.cl-sec{border-top:1px solid var(--border);padding:8px 0;}
.cl-sec summary{cursor:pointer;font-weight:500;color:var(--text);padding:4px 0;}
.cl-sec .vxcr-kicker{padding-left:0;}
.cl-list{margin:4px 0 8px 18px;padding:0;font-size:var(--fs-3);color:var(--text);line-height:1.5;}
.cl-rep-table{table-layout:auto;width:100%;margin:4px 0 10px;}
.cl-rep-table td{vertical-align:top;}
.cl-rep-table tr.cl-rep-first td{border-top:1px solid var(--border);}
.cl-rep-table td.cl-rep-cls{background:var(--surface2);width:26%;}
.cl-rep-table td.cl-rep-cls small{display:block;color:var(--text3);font-size:var(--fs-1);}
.cl-rep-table td.cl-rep-chg{width:22%;white-space:nowrap;}
.cl-rep-table td.num{text-align:right;width:70px;}

/* ═══ §11 CLASS LIBRARY IN THE PLATFORM LOOK (2026-10-19) ═════════════════
   Owner: "change the look and feel to align with the platform". The Class
   Library carried its own "Studio" palette (--clx-*) with dark grid heads and
   coloured panel borders. Its neutral colours now come from the platform
   tokens (they adapt to light and dark); only the colours that MEAN
   something there (required, pending, removing, kind markers) keep their own.
   Declared on body so the dialogs the module opens follow too. */
body{
  --clx-ink:var(--text);--clx-ink2:var(--text2);--clx-ink3:var(--text3);
  --clx-line:var(--border);--clx-line2:var(--border);--clx-card:var(--surface);
  --clx-teal:var(--accent);--clx-teal-soft:var(--surface2);--clx-indigo:var(--accent);
  --clx-purple:var(--accent);--clx-head:var(--surface2);--clx-input:var(--surface);
  --clx-gridhead:var(--surface2);--clx-gridhead-tx:var(--text3);--clx-gridhead-line:var(--border);
  --clx-grp:var(--surface2);--clx-band:var(--surface2);--clx-rowhover:var(--surface2);
  --clx-cell-line:var(--border);--clx-cell-vline:var(--border);--clx-filter-bg:var(--surface);
  --clx-filter-line:var(--border);--clx-fromlink:var(--accent);--clx-readonly:var(--surface2);
  --clx-aptab:var(--surface2);--clx-codebg:var(--surface2);
}
#page-cl-library .cl-body,#page-cl-classes .cl-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
#page-cl-library .cl-empty,#page-cl-classes .cl-empty{margin:auto;}
/* Library page */
.cl-lib-wb{flex:1 1 auto;min-height:0;}
/* the Library centre pane scrolls (sector libraries, organisation library, version detail) */
.cl-lib-wb .vx-wb-main{overflow:auto;}
.cl-centre{max-width:880px;}
.cl-ver-title{margin:4px 0 6px;font-size:var(--fs-6,18px);font-weight:500;color:var(--text);}
.cl-notes{margin:0 0 10px;font-size:var(--fs-4);color:var(--text);line-height:1.5;}
.cl-centre .vxcr-kicker,.cl-centre .vxcr-detail-grid{padding-left:0;padding-right:0;}
.cl-centre-acts{margin:14px 0 6px;}
.cl-insp{overflow:auto;}
.cl-insp .cl-card{margin:0;padding:12px 16px 14px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;}
.cl-insp .cl-card-h{margin:0 0 6px;font-size:var(--fs-2);font-weight:500;letter-spacing:.04em;color:var(--text3);}
.cl-insp .cl-danger .cl-card-h{color:var(--red);}
.cl-insp .cl-row{flex-direction:column;align-items:stretch;gap:6px;margin-top:8px!important;}
.cl-insp .cl-row select,.cl-insp .cl-row input{width:100%;min-width:0;height:32px;border:1px solid var(--border-control,var(--border2));border-radius:2px;font-size:var(--fs-3);padding:0 8px;background:var(--surface);color:var(--text);}
.cl-insp .cl-row .btn{align-self:flex-start;}
.cl-insp .cl-row input,.cl-insp .cl-row select{flex:0 0 auto!important;}
.cl-insp .cl-muted{line-height:1.45;}
/* Classes page: the standard three panes, full height, no coloured frames. */
#page-cl-classes .cl-classes-layout{flex:1 1 auto;min-height:0;display:grid;gap:0;align-items:stretch;
  grid-template-columns:300px minmax(0,1fr) 340px;}
#page-cl-classes .cl-side,#page-cl-classes .cl-main,#page-cl-classes .cl-changes{position:static;max-height:none;height:auto;min-height:0;
  border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--surface)!important;overflow:auto;}
#page-cl-classes .cl-side{border-right:1px solid var(--border2)!important;padding:12px;display:flex;flex-direction:column;}
#page-cl-classes .cl-changes{border-left:1px solid var(--border2)!important;}
#page-cl-classes .cl-main{display:flex;flex-direction:column;}
#page-cl-classes .cl-grid-wrap{max-height:none;flex:1 1 auto;}
#page-cl-classes .cl-mx-tbl{width:max-content!important;min-width:0!important;max-width:none!important;}
#page-cl-classes .cl-mx-cell{max-width:32px;}
#page-cl-classes .cl-mx-wrap{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 24px;box-sizing:border-box;}
#page-cl-classes .cl-mx-top .cl-viewsw{display:flex;gap:6px;flex-wrap:wrap;}
#page-cl-classes .cl-mx-scope,#page-cl-classes .cl-mx-colfilter{border-radius:2px;}
#page-cl-classes .cl-mx-scope select,#page-cl-classes .cl-mx-scope input,#page-cl-classes .cl-mx-colfilter select,#page-cl-classes .cl-mx-colfilter input{width:auto!important;flex:0 0 auto!important;display:inline-block;border-radius:2px;margin:0;}
#page-cl-classes .cl-grp-row td,#page-cl-classes .cl-inh-divider td{background:var(--surface2)!important;color:var(--text)!important;border-top:1px solid var(--border)!important;border-bottom:1px solid var(--border)!important;}
#page-cl-classes .cl-viewbtn,#page-cl-classes .cl-fam-tabs,#page-cl-classes .cl-fam-tab{border-radius:2px;}
#page-cl-classes .cl-fam-tab.on{background:var(--surface);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);}
#page-cl-classes .cl-viewbtn.active{background:var(--surface);color:var(--accent);border-color:var(--accent);}
#page-cl-classes #cl-search{height:32px;border:1px solid var(--border-control,var(--border2));border-radius:2px;padding:0 8px;}
/* §11b Class Library workbench parts (CL-B..F, 2026-10-19) */
.cl-wide-centre{max-width:1100px;}
.cl-sub{display:block;margin-top:2px;font-size:var(--fs-1);color:var(--text3);line-height:1.4;}
.cl-bad{color:var(--red);}
.cl-acts-cell{white-space:nowrap;text-align:right;width:1%;}
.cl-inuse-sw{display:flex;gap:6px;margin:0 0 8px;}
.cl-cls-n{margin-left:auto;padding:0 6px;border-radius:2px;background:var(--surface2);color:var(--text2);font-size:var(--fs-1);line-height:18px;}
.cl-cls-row .cl-pend-mark{margin-left:6px;}
#page-cl-classes .cl-changes{display:flex;flex-direction:column;padding:0;}
.cl-rbody{flex:1 1 auto;min-height:0;overflow:auto;}
.cl-rpad{padding:12px 16px 16px;}
.cl-rpad .vxcr-kicker{padding-left:0;padding-right:0;margin-top:12px;}
.cl-chg-acts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;}
.cl-chg-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);}
.cl-chg-item input{margin-top:3px;}
.cl-chg-txt{flex:1 1 auto;min-width:0;font-size:var(--fs-3);color:var(--text);}
.cl-chg-txt small{display:block;font-size:var(--fs-1);color:var(--text3);margin-top:2px;}
.cl-chg-foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.cl-inline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px;}
.cl-inline select,.cl-inline input{height:30px;border:1px solid var(--border-control,var(--border2));border-radius:2px;padding:0 8px;background:var(--surface);color:var(--text);font-size:var(--fs-2);min-width:0;}
.cl-inline input{flex:1 1 120px;}
.cl-add-row{margin-top:8px;}
.cl-chk{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-2);color:var(--text2);}
.cl-kv{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-size:var(--fs-2);color:var(--text);}
.cl-kv span{flex:1 1 auto;min-width:0;}
.cl-kv span small{color:var(--text3);}
.cl-kv b{font-weight:500;color:var(--text2);white-space:nowrap;}
.cl-big{margin:4px 0 8px;font-size:var(--fs-3);color:var(--text);}
.cl-ptitle{margin:2px 0 0;font-size:var(--fs-5,16px);font-weight:500;color:var(--text);}
.cl-req-sel{width:100%;max-width:220px;height:28px;border:1px solid var(--border-control,var(--border2));border-radius:2px;padding:0 6px;background:var(--surface);color:var(--text);font-size:var(--fs-2);}
.cl-req-sel.on{font-weight:500;}
.cl-req-sel.pending{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);}
.cl-req-src{display:block;font-size:var(--fs-1);color:var(--text3);margin-top:2px;}
.cl-req-src.pending{color:var(--amber);}
#page-cl-classes .cl-grid tbody tr.cl-row-sel td{background:var(--surface2);}
#page-cl-classes .cl-col-attr{width:auto;}#page-cl-classes .cl-col-from{width:15%;}#page-cl-classes .cl-col-type{width:84px;}
#page-cl-classes .cl-col-req{width:210px;}#page-cl-classes .cl-col-mod{width:72px;}#page-cl-classes .cl-col-sel{width:34px;}#page-cl-classes .cl-col-act{width:156px;}
.cl-rpad .cl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.cl-rpad .cl-stats>div{padding:6px 8px;flex-direction:column;align-items:flex-start;gap:0;}
.cl-rpad .cl-stats span{font-size:var(--fs-1);white-space:normal;line-height:1.25;}
.cl-mx-edit{cursor:pointer;}
.cl-mx-edit:focus{outline:2px solid var(--accent);outline-offset:-2px;}
.cl-mx-off{color:var(--text3);}
.cl-mx-pending{box-shadow:inset 0 0 0 2px var(--amber)!important;}
.cl-mx-menu{position:fixed;z-index:3000;min-width:220px;max-width:260px;padding:4px 0;background:var(--surface);border:1px solid var(--border2);box-shadow:var(--shadow-2,0 6px 20px rgba(0,0,0,.18));}
.cl-mx-menu-h{padding:6px 12px;font-size:var(--fs-1);color:var(--text3);border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-mx-menu button{display:block;width:100%;padding:7px 12px;border:0;background:transparent;text-align:left;font-size:var(--fs-2);color:var(--text);cursor:pointer;}
.cl-mx-menu button:hover,.cl-mx-menu button:focus{background:var(--surface2);}

/* =============================================================================
 * 10. DOCUMENTS & REVISION COMPARE (AR-1, 2026-10-21) — parts for the Asset
 *     pages, available to every page: a narrow dialog, a file drop area, a
 *     page-wide drop veil, a list group that folds, a viewer filling the
 *     centre under a sub-head.
 * ========================================================================== */
.vx-dialog-back[hidden],.vx-wb-dialog [hidden]{display:none!important;}
.vx-wb-dialog.vx-wb-dialog-s{width:min(640px,94vw);}
.vx-wb-dialog .vx-wb-form{padding:0;margin:8px 0;}
.vx-wb-dialog .vx-wb-form small{font-size:var(--fs-1);}
.vx-wb-drop{display:block;margin:8px 0 10px;padding:22px 16px;text-align:center;cursor:pointer;
  border:1px dashed var(--border-control,var(--border2));background:var(--surface2);
  font-size:var(--fs-3);color:var(--text2);}
.vx-wb-drop b{font-weight:500;color:var(--text);}
.vx-wb-drop small{display:block;margin-top:4px;font-size:var(--fs-1);color:var(--text3);}
.vx-wb-drop:hover,.vx-wb-drop:focus,.vx-wb-drop.on{border-color:var(--accent);outline:none;}
.vx-wb-drop.on{background:var(--accent-dim);}
.vx-wb-dropall{position:fixed;inset:0;z-index:8500;display:flex;align-items:center;justify-content:center;
  pointer-events:none;border:3px dashed var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:var(--fs-5,16px);font-weight:500;color:var(--accent);}
.vx-wb-dropall[hidden]{display:none;}
.vx-wb-list h4.vx-wb-group.shut{color:var(--text3);}
.vx-wb-list h4.vx-wb-group b{font-weight:400;font-size:var(--fs-1);color:var(--text3);}
.vx-wb-main>.vxov-host{border-top:0;}
.vx-wb-chip .vx-wb-x{font-size:12px;padding:0 0 0 2px;}
.vx-wb-chip button.vx-wb-link{margin:0;font-size:var(--fs-2);}
.vx-wb-li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.vx-wb-li>small{flex:0 0 auto;}
label.vx-wb-li{cursor:pointer;justify-content:flex-start;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:400;color:var(--text);}
label.vx-wb-li small{text-transform:none;letter-spacing:0;font-family:var(--font-body);}
label.vx-wb-li input{width:auto;margin:0;}
label.vx-wb-li small{margin-left:auto;}
.vx-wb-picklist{max-height:52vh;overflow:auto;margin-top:8px;border-top:1px solid var(--border);}

/* A list row with a tick box beside it (bulk actions — Asset › Documents). */
.vx-wb-tickrow{display:flex;align-items:stretch;}
.vx-wb-tickrow>label{flex:0 0 auto;display:flex;align-items:center;padding:0 0 0 12px;margin:0;
  border-bottom:1px solid var(--border);cursor:pointer;}
.vx-wb-tickrow>label input{width:auto;margin:0;}
.vxcr-left section .vx-wb-tickrow>button{flex:1 1 auto;min-width:0;width:auto;padding-left:8px;}
/* The bulk bar: what is ticked, and what to do with all of it. */
.vx-wb-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;
  border-bottom:1px solid var(--border2);background:var(--surface2);font-size:var(--fs-2);}
.vx-wb-bulk .vx-wb-check{margin-right:auto;}
.vx-wb-bulk[hidden]{display:none;}
/* A group of tick boxes in a form (e.g. the Links template's tag types). */
.vx-wb-fieldset{border:0;margin:0;padding:0;min-width:0;}
.vx-wb-fieldset>legend{padding:0;margin:0 0 4px;font-family:var(--font-body);font-size:var(--fs-2);color:var(--text3);}
.vx-wb-checks{display:flex;flex-wrap:wrap;gap:6px 14px;}
.vx-wb-form label.vx-wb-check{flex-direction:row;align-items:center;gap:5px;color:var(--text2);}
.vx-wb-form .vx-wb-check input{height:auto;width:auto;}
.vx-wb-form label small{color:var(--text3);font-size:var(--fs-1);}

/* A long name in a workbench list wraps instead of being cut, so the whole
   name can be read (owner, 2026-10-24, Revision compare). */
.vx-wb-left .vx-wb-item span,.vx-wb-left .vx-wb-item small{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
.vx-wb-left .vx-wb-item{align-items:start;}
.vx-wb-filter[hidden],.vx-wb-filter select[hidden]{display:none;}

/* Model review (2026-10-24). The model fills the centre; screenshots in the
   right pane enlarge on click; the left filters wrap two to a row. */
.vxmr-view{display:flex;flex-direction:column;}
.vxmr-view .vxmr-ifc{position:absolute;inset:0;}
.vx-wb-left .vx-wb-filter[data-mr="filters"]{flex-wrap:wrap;}
.vx-wb-left .vx-wb-filter[data-mr="filters"] select{flex:1 1 45%;}
.vxmr-shot{display:block;width:100%;height:auto;margin:6px 0 4px;border:1px solid var(--border2);cursor:zoom-in;background:var(--surface2);}
.vxmr-shot-s{max-width:220px;margin-top:6px;}
.vxmr-shot-big{display:block;max-width:100%;height:auto;margin:8px auto;}
.vxmr-checks{display:flex;flex-direction:column;gap:4px;margin:4px 0 8px;max-height:180px;overflow:auto;}
.vxmr-hist small.vxmr-note{color:var(--text);white-space:normal;}
.vxmr-rfilters{flex-wrap:wrap;}
.vxmr-rfilters input,.vxmr-rfilters select{width:auto;flex:0 1 200px;height:30px;margin:0;
  border:1px solid var(--border-control,var(--border2));border-radius:2px;background:var(--surface);
  color:var(--text);font:inherit;font-size:var(--fs-2);padding:0 6px;}

/* A tag with open model review comments (Asset Explorer, 2026-10-24). */
.vxax-act.vxax-review{color:var(--amber);border-color:var(--amber);}

/* vx-asset-layout.js (L-5) */
.vxaxl-resize{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;z-index:5}
.vxaxl-resize:hover,.vxaxl-resize:active{background:var(--accent);opacity:.35}
.vxaxl-toggle{position:absolute;top:50%;width:16px;height:44px;margin-top:-22px;z-index:6;padding:0;border:1px solid var(--border2);border-radius:4px;background:var(--surface2);color:var(--text2);cursor:pointer;font-size:12px;line-height:1}
.vxaxl-toggle:hover{color:var(--accent);border-color:var(--accent)}
.vxaxl-left-off .vxax-left,.vxaxl-right-off .vxcr-right{visibility:hidden;overflow:hidden}
.vxaxl-hidden-note{margin:10px 14px;font-size:var(--fs-1);color:var(--text3)}
.vxaxl-panel{position:absolute;right:12px;top:60px;z-index:30;width:320px;max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--border2);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:12px 14px}
.vxaxl-head{display:flex;justify-content:space-between;align-items:center}
.vxaxl-x{border:0;background:none;color:var(--text2);cursor:pointer}
.vxaxl-sub{font-size:var(--fs-1);color:var(--text3);margin:4px 0 8px}
.vxaxl-list{list-style:none;margin:0;padding:0}
.vxaxl-list li{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border)}
.vxaxl-list label{display:flex;gap:6px;align-items:center;font-size:var(--fs-2);text-transform:none;letter-spacing:normal;font-weight:400}
.vxaxl-list span{display:flex;gap:4px}
.vxaxl-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px}

/* vx-asset-property-set.js (L-5) */
.vxaxps-back{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.vxaxps{width:min(760px,94vw);max-height:86vh;display:flex;flex-direction:column;background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.vxaxps-head{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.vxaxps-sub{font-size:var(--fs-1);color:var(--text3);margin-top:3px}
.vxaxps-x{border:0;background:none;color:var(--text2);cursor:pointer;font-size:14px}
.vxaxps-body{overflow:auto;padding:10px 16px}
.vxaxps-t{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.vxaxps-t th{text-align:left;font-weight:600;color:var(--text2);padding:6px 4px;border-bottom:1px solid var(--border2);position:sticky;top:0;background:var(--surface)}
.vxaxps-t td{padding:4px;border-bottom:1px solid var(--border);vertical-align:middle}
.vxaxps-t tr.off td{opacity:.55}
.vxaxps-label{width:100%;min-width:180px;padding:4px 6px;border:1px solid var(--border2);border-radius:4px;background:var(--surface2);color:var(--text)}
.vxaxps-from{color:var(--text3);font-size:var(--fs-1);white-space:nowrap;margin-top:2px}
.vxaxps-t select{padding:4px 6px;border:1px solid var(--border2);border-radius:4px;background:var(--surface2);color:var(--text);font-size:var(--fs-1)}
.vxaxps-t input[disabled]{opacity:.6;cursor:not-allowed}
.vxaxps-mv{white-space:nowrap;text-align:right}
.vxaxps-mv .btn{margin-left:2px}
.vxaxps-add{display:flex;gap:8px;margin:12px 0}
.vxaxps-add input{flex:1;padding:6px 8px;border:1px solid var(--border2);border-radius:4px;background:var(--surface2);color:var(--text)}
.vxaxps-prec{margin:8px 0 4px;font-size:var(--fs-2)}
.vxaxps-prec ol{margin:6px 0;padding-left:20px}
.vxaxps-prec li{padding:2px 0}
.vxaxps-prec li span{margin-left:8px}
.vxaxps-foot{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}