/* Veridex Engineering Data — platform fidelity layer.
 *
 * Presentation only. Engineering Data domain, lifecycle, ownership, mapping,
 * import/export and persistence rules stay in their owning modules.
 *
 * Product rule: Engineering Data uses the same full-canvas engineering
 * workbench language as Extraction and MTR — compact context, one navigation
 * rail, flat working surfaces, shared typography and dense governed tables.
 */

html body:has(#page-engineering-data.active){
  overflow:hidden!important;
  --vxed-footer-h:28px;
}
html body:has(#page-engineering-data.active) .vx-page-area{
  padding-top:0!important;
  height:100vh!important;
  min-height:100vh!important;
  overflow:hidden!important;
}
html body:has(#page-engineering-data.active) .main{
  padding:0!important;
  height:100vh!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body:has(#page-engineering-data.active) .app-footer{
  display:flex!important;
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:var(--vxed-footer-h)!important;
  min-height:var(--vxed-footer-h)!important;
  margin:0!important;
  padding:0 16px!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:1200!important;
  box-sizing:border-box!important;
  border-top:1px solid var(--border)!important;
  background:var(--surface2)!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-1)!important;
  letter-spacing:0!important;
}

html body #app-shell #page-engineering-data.vx2-module-page-ed.active{
  position:fixed!important;
  inset:var(--vx2-topbar-h,52px) 0 var(--vxed-footer-h,28px) 0!important;
  z-index:1100!important;
  display:flex!important;
  flex-direction:column!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-4)!important;
  line-height:var(--lh-body,1.55)!important;
}

/* Compact module context — same grammar as MTR and Extraction. */
#page-engineering-data .ed-stage-head{
  flex:0 0 42px!important;
  min-height:42px!important;
  width:100%!important;
  margin:0!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-stage-copy{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
#page-engineering-data .ed-stage-title{
  flex:0 0 auto!important;
  color:var(--accent)!important;
  font-size:var(--fs-3)!important;
  line-height:var(--lh-tight,1.3)!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-stage-sub{
  min-width:0!important;
  max-width:820px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text2)!important;
  font-size:var(--fs-3)!important;
  line-height:var(--lh-tight,1.3)!important;
}
#page-engineering-data .ed-stage-meta{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:var(--text3)!important;
  font-size:var(--fs-2)!important;
}
#page-engineering-data .ed-stage-meta span+span{
  padding-left:10px!important;
  border-left:1px solid var(--border)!important;
}
#page-engineering-data #ed-stage-capability{
  color:var(--accent)!important;
  font-weight:500!important;
}

/* Outer ED workbench. */
#page-engineering-data #ed-page-body.vx2-module-workspace{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-viewswitch{
  flex:0 0 44px!important;
  min-height:44px!important;
  border-radius:0!important;
}
#page-engineering-data .ed-viewswitch>button{
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-3)!important;
  font-weight:500!important;
}

/* --------------------------------------------------------------------------
   KEY LISTS — Survey-style navigator + governed grid.
   -------------------------------------------------------------------------- */
#page-engineering-data .ed-keylist-workbench{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-list-rail{
  min-width:0!important;
  min-height:0!important;
  padding:16px 0 14px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-right:1px solid var(--border2)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-list-rail-head{
  flex:0 0 auto!important;
  padding:0 16px 12px!important;
}
#page-engineering-data .ed-list-rail-head strong{
  display:block!important;
  color:var(--text)!important;
  font-size:12.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
#page-engineering-data .ed-list-rail-head span{
  display:block!important;
  margin-top:4px!important;
  color:var(--text3)!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}
#page-engineering-data .ed-list-nav{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
}
#page-engineering-data .ed-list-nav-row{
  width:100%!important;
  min-height:52px!important;
  margin:0!important;
  padding:8px 10px 8px 13px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
  border:0!important;
  border-left:3px solid transparent!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  cursor:pointer!important;
}
#page-engineering-data .ed-list-nav-row:hover{
  background:var(--surface3)!important;
}
#page-engineering-data .ed-list-nav-row.is-active{
  border-left-color:var(--accent)!important;
  background:var(--accent-light)!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-list-icon{
  width:24px!important;
  height:24px!important;
  margin-top:1px!important;
  display:grid!important;
  place-items:center!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-list-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
}
#page-engineering-data .ed-list-copy{
  min-width:0!important;
  display:block!important;
}
#page-engineering-data .ed-list-copy strong{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:inherit!important;
  font-size:11.5px!important;
  line-height:1.28!important;
  font-weight:650!important;
}
#page-engineering-data .ed-list-copy small{
  display:block!important;
  margin-top:3px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text3)!important;
  font-size:9.5px!important;
  line-height:1.3!important;
  font-weight:400!important;
  text-transform:capitalize!important;
}
#page-engineering-data .ed-keylist-main{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-keylist-main>.vx2-module-content{
  height:100%!important;
  min-height:0!important;
  padding:10px 12px 12px!important;
  overflow:auto!important;
  background:var(--surface)!important;
}

/* Shared ED controls use the same restrained geometry as MTR/Extraction. */
#page-engineering-data,
#page-engineering-data button,
#page-engineering-data input,
#page-engineering-data select,
#page-engineering-data textarea,
#page-engineering-data table{
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
}
#page-engineering-data .ed-toolbar{
  min-height:38px!important;
  margin:0 0 8px!important;
  padding:0!important;
  gap:5px!important;
  flex-wrap:wrap!important;
}
#page-engineering-data .ed-toolbar .vx-btn,
#page-engineering-data .ed-toolbar .btn{
  min-height:30px!important;
  height:30px!important;
  padding:0 9px!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  box-shadow:none!important;
  font-size:var(--fs-2)!important;
  font-weight:500!important;
}
#page-engineering-data .ed-toolbar .vx-btn:hover,
#page-engineering-data .ed-toolbar .btn:hover{
  border-color:var(--accent)!important;
  background:var(--accent-dim2)!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-toolbar .vx-btn.is-on{
  border-color:var(--accent)!important;
  background:var(--accent-light)!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-input{
  height:30px!important;
  min-height:30px!important;
  padding:4px 9px!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:none!important;
  font-size:var(--fs-3)!important;
}
#page-engineering-data .ed-input:focus{
  border-color:var(--accent)!important;
  outline:none!important;
  box-shadow:0 0 0 2px var(--accent-dim)!important;
}
#page-engineering-data .ed-input-search{
  min-width:190px!important;
}

/* Tables are the work surface, not rounded cards. */
#page-engineering-data .ed-gridwrap{
  width:100%!important;
  max-height:calc(100vh - 260px)!important;
  overflow:auto!important;
  border:1px solid var(--border)!important;
  border-radius:0!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-grid{
  color:var(--text2)!important;
  font-size:var(--fs-3)!important;
}
#page-engineering-data .ed-th{
  height:37px!important;
  padding:7px 9px!important;
  background:var(--surface2)!important;
  color:var(--text2)!important;
  border-color:var(--border2)!important;
  font-size:var(--fs-2)!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-cell{
  min-height:39px!important;
  padding:7px 9px!important;
  border-color:var(--border)!important;
  color:var(--text2)!important;
  font-size:var(--fs-3)!important;
}
#page-engineering-data .ed-cell-tag{
  color:var(--text)!important;
  font-weight:600!important;
}
#page-engineering-data .ed-chip,
#page-engineering-data .ed-fchip{
  border-radius:2px!important;
  box-shadow:none!important;
  font-size:var(--fs-1)!important;
}
#page-engineering-data .ed-problems,
#page-engineering-data .ed-savebar,
#page-engineering-data .ed-submitbar,
#page-engineering-data .ed-readybar{
  border-radius:2px!important;
  box-shadow:none!important;
}

/* --------------------------------------------------------------------------
   CONFIGURE — left capability navigator + one working surface.
   -------------------------------------------------------------------------- */
#page-engineering-data #ed-page-body:has(#ed-config-host)>.vx2-module-content{
  flex:1 1 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}
#page-engineering-data #ed-config-host{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
#page-engineering-data .ed-config-workbench{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-config-rail{
  min-width:0!important;
  min-height:0!important;
  padding:16px 0 14px!important;
  overflow:hidden!important;
  border-right:1px solid var(--border2)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-config-rail-head{
  padding:0 16px 12px!important;
}
#page-engineering-data .ed-config-rail-head strong{
  display:block!important;
  color:var(--text)!important;
  font-size:12.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
#page-engineering-data .ed-config-rail-head span{
  display:block!important;
  margin-top:4px!important;
  color:var(--text3)!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}
#page-engineering-data .ed-config-nav{
  min-height:0!important;
  overflow:auto!important;
}
#page-engineering-data .ed-config-nav-row{
  width:100%!important;
  min-height:52px!important;
  margin:0!important;
  padding:8px 10px 8px 13px!important;
  display:grid!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
  border:0!important;
  border-left:3px solid transparent!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  text-align:left!important;
  color:var(--text)!important;
  cursor:pointer!important;
}
#page-engineering-data .ed-config-nav-row:hover{
  background:var(--surface3)!important;
}
#page-engineering-data .ed-config-nav-row.is-active{
  border-left-color:var(--accent)!important;
  background:var(--accent-light)!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-config-nav-icon{
  width:24px!important;
  height:24px!important;
  margin-top:1px!important;
  display:grid!important;
  place-items:center!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-config-nav-icon svg{
  width:19px!important;
  height:19px!important;
  display:block!important;
}
#page-engineering-data .ed-config-nav-copy{
  min-width:0!important;
  display:block!important;
}
#page-engineering-data .ed-config-nav-copy strong{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:inherit!important;
  font-size:11.5px!important;
  line-height:1.28!important;
  font-weight:650!important;
}
#page-engineering-data .ed-config-nav-copy small{
  display:block!important;
  margin-top:3px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text3)!important;
  font-size:9.5px!important;
  line-height:1.3!important;
  font-weight:400!important;
}
#page-engineering-data .ed-config-main{
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  padding:12px 14px 16px!important;
  overflow:auto!important;
  background:var(--surface)!important;
}

/* Configuration content is a work surface, not a dashboard of rounded cards. */
#page-engineering-data .ed-cfg-head{
  min-height:42px!important;
  margin:0 0 10px!important;
  padding:0 0 9px!important;
  align-items:center!important;
  border-bottom:1px solid var(--border)!important;
}
#page-engineering-data .ed-cfg-intro{
  max-width:820px!important;
  color:var(--text2)!important;
  font-size:var(--fs-3)!important;
  line-height:1.45!important;
}
#page-engineering-data .ed-form,
#page-engineering-data .ed-stdll,
#page-engineering-data .ed-checklist{
  border-color:var(--border)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-form{
  max-width:none!important;
  padding:12px!important;
}
#page-engineering-data .ed-form-h{
  color:var(--text)!important;
  font-size:var(--fs-5)!important;
  font-weight:600!important;
}
#page-engineering-data .ed-form-foot{
  border-top-color:var(--border)!important;
}
#page-engineering-data .ed-config-main .vx-btn,
#page-engineering-data .ed-config-main .btn{
  min-height:30px!important;
  padding:4px 9px!important;
  border-radius:2px!important;
  box-shadow:none!important;
  font-size:var(--fs-2)!important;
  font-weight:500!important;
}
#page-engineering-data .ed-config-main .vx-btn-primary{
  border-color:var(--accent)!important;
  background:var(--accent)!important;
  color:var(--on-fill)!important;
}

/* Holds Register (moved from the MTR, 2026-10-25): its own full-height
   workbench, as it was on the MTR page. */
#page-engineering-data #ed-page-body:has(#ed-holds-host)>.vx2-module-content{
  flex:1 1 auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:var(--surface)!important;
}

/* Datasheets remain a document-oriented full-width view. */
#page-engineering-data #ed-page-body:has(#ed-datasheet-host)>.vx2-module-content{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding:12px 14px 16px!important;
}

/* Mobile / narrow fallback: navigator becomes a bounded top section rather
   than cramming a two-column workbench. */
@media(max-width:900px){
  #page-engineering-data .ed-stage-sub,
  #page-engineering-data .ed-stage-meta{display:none!important;}
  #page-engineering-data .ed-keylist-workbench,
  #page-engineering-data .ed-config-workbench{
    display:block!important;
    height:auto!important;
    overflow:auto!important;
  }
  #page-engineering-data .ed-list-rail,
  #page-engineering-data .ed-config-rail{
    max-height:300px!important;
    border-right:0!important;
    border-bottom:1px solid var(--border2)!important;
  }
  #page-engineering-data .ed-keylist-main,
  #page-engineering-data .ed-config-main{
    height:auto!important;
    overflow:visible!important;
  }
}


/* --------------------------------------------------------------------------
   CONFIGURE > KEY LISTS > COLUMNS
   The column picker is a governed table, not a legacy field form.
   -------------------------------------------------------------------------- */
#page-engineering-data .ed-config-main:has(.ed-column-picker){
  padding:0!important;
  overflow:hidden!important;
}
#page-engineering-data .ed-column-picker{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-column-picker-head{
  flex:0 0 auto!important;
  min-height:48px!important;
  padding:10px 14px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
}
#page-engineering-data .ed-column-picker-head .ed-form-h{
  margin:0!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-5)!important;
  line-height:1.3!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-column-count{
  flex:0 0 auto!important;
  padding:2px 7px!important;
  border:1px solid var(--border)!important;
  border-radius:2px!important;
  background:var(--surface2)!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-1)!important;
  line-height:1.35!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-column-picker-intro{
  flex:0 0 auto!important;
  max-width:none!important;
  margin:0!important;
  padding:3px 14px 10px!important;
  border-bottom:1px solid var(--border)!important;
  color:var(--text2)!important;
  font-size:var(--fs-3)!important;
  line-height:1.42!important;
}
#page-engineering-data .ed-column-picker>.ed-fhint{
  flex:0 0 auto!important;
  margin:0!important;
  padding:7px 14px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--amber-dim)!important;
  color:var(--text2)!important;
  font-size:var(--fs-2)!important;
}
#page-engineering-data .ed-column-gridwrap{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 14px!important;
  overflow:auto!important;
  border:1px solid var(--border)!important;
  border-radius:0!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-column-grid{
  width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
}
#page-engineering-data .ed-column-grid .ed-th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  height:35px!important;
  padding:7px 10px!important;
  border-right:1px solid var(--border)!important;
  border-bottom:1px solid var(--border2)!important;
  background:var(--surface2)!important;
  color:var(--text2)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-2)!important;
  line-height:1.2!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-column-grid .ed-th:nth-child(1){width:43%!important;}
#page-engineering-data .ed-column-grid .ed-th:nth-child(2){width:18%!important;}
#page-engineering-data .ed-column-grid .ed-th:nth-child(3){width:auto!important;}
#page-engineering-data .ed-column-grid .ed-th:nth-child(4){width:86px!important;}
#page-engineering-data .ed-column-row .ed-cell{
  height:47px!important;
  min-height:47px!important;
  padding:6px 10px!important;
  vertical-align:middle!important;
  border-right:1px solid var(--border)!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-3)!important;
  line-height:1.35!important;
  white-space:normal!important;
}
#page-engineering-data .ed-column-row:hover .ed-cell{
  background:var(--surface2)!important;
}
#page-engineering-data .ed-column-cell{
  padding-left:10px!important;
}
#page-engineering-data .ed-column-choice{
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  cursor:pointer!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-3)!important;
  font-weight:500!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-column-choice input{
  flex:0 0 auto!important;
  width:13px!important;
  height:13px!important;
  margin:0!important;
  accent-color:var(--accent)!important;
}
#page-engineering-data .ed-column-name{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-column-code{
  margin:3px 0 0 21px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
#page-engineering-data .ed-column-source{
  color:var(--text2)!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-column-extraction{
  color:var(--text3)!important;
  font-size:var(--fs-2)!important;
}
#page-engineering-data .ed-column-order{
  padding:0 8px!important;
  white-space:nowrap!important;
  text-align:left!important;
}
#page-engineering-data .ed-column-order .ed-order-btn{
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  min-height:26px!important;
  margin:0 3px 0 0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  box-shadow:none!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:500!important;
}
#page-engineering-data .ed-column-order .ed-order-btn:hover:not(:disabled){
  border-color:var(--accent)!important;
  background:var(--accent-dim2)!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-column-order .ed-order-btn:disabled{
  opacity:.28!important;
  cursor:default!important;
}
#page-engineering-data .ed-column-picker-foot{
  flex:0 0 48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:8px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border-top:1px solid var(--border)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-column-foot-left{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
}
#page-engineering-data .ed-column-picker-foot .vx-btn{
  min-height:30px!important;
  padding:4px 10px!important;
  border-radius:2px!important;
  box-shadow:none!important;
  font-size:var(--fs-2)!important;
  font-weight:500!important;
}
#page-engineering-data .ed-column-picker-foot #f-save{
  min-width:112px!important;
}

@media(max-width:1050px){
  #page-engineering-data .ed-column-grid .ed-th:nth-child(1){width:38%!important;}
  #page-engineering-data .ed-column-grid .ed-th:nth-child(2){width:20%!important;}
  #page-engineering-data .ed-column-name{font-size:11px!important;}
}


/* --------------------------------------------------------------------------
   CONFIGURE > KEY LISTS > EDIT / NEW
   A governed configuration form, not a legacy stacked admin form.
   -------------------------------------------------------------------------- */
#page-engineering-data .ed-config-main:has(.ed-keylist-form){
  padding:0!important;
  overflow:hidden!important;
}
#page-engineering-data .ed-keylist-form{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  border:0!important;
  border-radius:0!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-keylist-form-head{
  flex:0 0 auto!important;
  min-height:58px!important;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-keylist-form-head .ed-form-h{
  margin:0!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-5)!important;
  line-height:1.3!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-keylist-form-sub{
  margin-top:3px!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-2)!important;
  line-height:1.35!important;
}
#page-engineering-data .ed-keylist-form-state{
  flex:0 0 auto!important;
  padding:2px 7px!important;
  border:1px solid var(--border)!important;
  border-radius:2px!important;
  background:var(--surface2)!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-1)!important;
  line-height:1.35!important;
  font-weight:500!important;
}
#page-engineering-data .ed-keylist-form-body{
  flex:1 1 auto!important;
  min-height:0!important;
  padding:12px 14px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr)!important;
  gap:14px!important;
  overflow:auto!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-keylist-section{
  min-width:0!important;
  align-self:start!important;
  border:1px solid var(--border)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
}
#page-engineering-data .ed-keylist-section-head{
  min-height:45px!important;
  padding:8px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-keylist-section-head strong{
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-3)!important;
  line-height:1.25!important;
  font-weight:600!important;
}
#page-engineering-data .ed-keylist-section-head span{
  margin-top:2px!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-1)!important;
  line-height:1.35!important;
}
#page-engineering-data .ed-keylist-details{
  padding-bottom:10px!important;
}
#page-engineering-data .ed-keylist-field-grid,
#page-engineering-data .ed-keylist-source-grid{
  padding:10px 10px 0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px 12px!important;
}
#page-engineering-data .ed-keylist-source-grid{
  padding-top:0!important;
}
#page-engineering-data .ed-keylist-form .ed-field{
  min-width:0!important;
  margin:0 0 10px!important;
}
#page-engineering-data .ed-keylist-form .ed-flabel{
  display:block!important;
  margin:0 0 4px!important;
  color:var(--text2)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-2)!important;
  line-height:1.25!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-keylist-form .ed-input{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  padding:4px 9px!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:none!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-3)!important;
  line-height:1.3!important;
  font-weight:400!important;
}
#page-engineering-data .ed-keylist-form .ed-input:focus{
  border-color:var(--accent)!important;
  outline:none!important;
  box-shadow:0 0 0 2px var(--accent-dim)!important;
}
#page-engineering-data .ed-keylist-form .ed-input:disabled{
  background:var(--surface2)!important;
  color:var(--text3)!important;
  opacity:1!important;
  cursor:not-allowed!important;
}
#page-engineering-data .ed-keylist-form .ed-fhint{
  margin:4px 0 0!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-1)!important;
  line-height:1.4!important;
}
#page-engineering-data .ed-keylist-setwrap{
  min-width:0!important;
}
#page-engineering-data .ed-keylist-types{
  padding-bottom:0!important;
}
#page-engineering-data .ed-keylist-type-list{
  max-height:360px!important;
  overflow:auto!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
#page-engineering-data .ed-keylist-type-option{
  min-height:48px!important;
  margin:0!important;
  padding:8px 10px!important;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface)!important;
  cursor:pointer!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
#page-engineering-data .ed-keylist-type-option:last-child{
  border-bottom:0!important;
}
#page-engineering-data .ed-keylist-type-option:hover{
  background:var(--surface2)!important;
}
#page-engineering-data .ed-keylist-type-option:has(input:checked){
  background:var(--accent-light)!important;
}
#page-engineering-data .ed-keylist-type-option input{
  width:13px!important;
  height:13px!important;
  margin:2px 0 0!important;
  accent-color:var(--accent)!important;
}
#page-engineering-data .ed-keylist-type-copy{
  min-width:0!important;
  display:block!important;
}
#page-engineering-data .ed-keylist-type-copy strong{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:11.5px!important;
  line-height:1.25!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#page-engineering-data .ed-keylist-type-option:has(input:checked) .ed-keylist-type-copy strong{
  color:var(--accent)!important;
}
#page-engineering-data .ed-keylist-type-copy small{
  display:block!important;
  margin-top:3px!important;
  color:var(--text3)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:9.5px!important;
  line-height:1.3!important;
  font-weight:400!important;
}
#page-engineering-data .ed-keylist-form-foot{
  flex:0 0 48px!important;
  min-height:48px!important;
  margin:0!important;
  padding:8px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border-top:1px solid var(--border)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-keylist-form-foot .vx-btn{
  min-height:30px!important;
  padding:4px 10px!important;
  border-radius:2px!important;
  box-shadow:none!important;
  font-size:var(--fs-2)!important;
  font-weight:500!important;
}
#page-engineering-data .ed-keylist-form-foot #f-save{
  min-width:112px!important;
}

@media(max-width:1150px){
  #page-engineering-data .ed-keylist-form-body{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #page-engineering-data .ed-keylist-type-list{
    max-height:260px!important;
  }
}
@media(max-width:760px){
  #page-engineering-data .ed-keylist-field-grid,
  #page-engineering-data .ed-keylist-source-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* --------------------------------------------------------------------------
   ED ACTION PLACEMENT + HORIZONTAL TABLE SCROLL
   -------------------------------------------------------------------------- */

/* Edit/New key-list actions belong to the form, not opposite viewport corners.
   Keep them together immediately below the form content. */
#page-engineering-data .ed-keylist-form-body{
  flex:0 0 auto!important;
  overflow:visible!important;
}
#page-engineering-data .ed-keylist-form-foot{
  flex:0 0 auto!important;
  min-height:48px!important;
  justify-content:flex-end!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-keylist-form-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
}
#page-engineering-data .ed-keylist-form-actions #f-cancel,
#page-engineering-data .ed-keylist-form-actions #f-save{
  min-width:104px!important;
}

/* ED tables are engineering work surfaces. They must preserve meaningful
   column widths and scroll horizontally instead of compressing every field
   into the available viewport. */
#page-engineering-data .ed-gridwrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable both-edges!important;
}
#page-engineering-data .ed-gridwrap>.ed-grid{
  width:max-content!important;
  min-width:100%!important;
  table-layout:auto!important;
}

/* Key Lists need this most: tag identity stays visible while attribute
   columns retain usable engineering widths and scroll horizontally. */
#page-engineering-data .ed-keylist-main .ed-gridwrap{
  max-height:calc(100vh - 265px)!important;
}
#page-engineering-data .ed-keylist-main .ed-grid{
  width:max-content!important;
  min-width:100%!important;
}
#page-engineering-data .ed-keylist-main .ed-th-tag{
  min-width:190px!important;
}
#page-engineering-data .ed-keylist-main .ed-th-narrow{
  min-width:118px!important;
}
#page-engineering-data .ed-keylist-main .ed-th:not(.ed-th-tag):not(.ed-th-narrow){
  min-width:175px!important;
}
#page-engineering-data .ed-keylist-main .ed-cell{
  white-space:nowrap!important;
}

/* Configuration list tables follow the same rule. The specialised Columns
   picker keeps its deliberate four-column fixed layout. */
#page-engineering-data .ed-config-main .ed-gridwrap:not(.ed-column-gridwrap)>.ed-grid{
  width:max-content!important;
  min-width:100%!important;
  table-layout:auto!important;
}
#page-engineering-data .ed-config-main .ed-gridwrap:not(.ed-column-gridwrap) .ed-th,
#page-engineering-data .ed-config-main .ed-gridwrap:not(.ed-column-gridwrap) .ed-cell{
  min-width:145px!important;
  white-space:nowrap!important;
}

/* The Columns picker also scrolls horizontally when the viewport is narrow,
   while retaining its governed column proportions. */
#page-engineering-data .ed-column-gridwrap{
  overflow-x:auto!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable both-edges!important;
}
#page-engineering-data .ed-column-grid{
  min-width:760px!important;
}


/* --------------------------------------------------------------------------
   KEY LIST GRID — deterministic horizontal scroll.
   -------------------------------------------------------------------------- */
#page-engineering-data .ed-keylist-gridwrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  max-height:min(58vh,620px)!important;
  overflow-x:scroll!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable!important;
  overscroll-behavior:contain!important;
  border-radius:0!important;
}
#page-engineering-data .ed-keylist-grid{
  width:max-content!important;
  min-width:100%!important;
  table-layout:auto!important;
}
#page-engineering-data .ed-keylist-grid .ed-th,
#page-engineering-data .ed-keylist-grid .ed-cell{
  white-space:nowrap!important;
}
#page-engineering-data .ed-keylist-grid .ed-th-tag{
  min-width:190px!important;
}
#page-engineering-data .ed-keylist-grid .ed-th-narrow{
  min-width:118px!important;
}
#page-engineering-data .ed-keylist-grid .ed-th:not(.ed-th-tag):not(.ed-th-narrow){
  min-width:180px!important;
}


/* --------------------------------------------------------------------------
   KEY LIST MOUSE SCROLL RAIL + STICKY IDENTITY HEADER
   -------------------------------------------------------------------------- */

/* Keep the table and its horizontal rail inside one bounded work surface. */
#page-engineering-data .ed-keylist-main>.vx2-module-content{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
}
#page-engineering-data .ed-keylist-gridwrap{
  flex:1 1 auto!important;
  min-height:180px!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable!important;
}

/* Chrome/Edge: the visible mouse affordance is the governed rail below.
   Keep the native vertical scrollbar, suppress only the easy-to-miss
   horizontal one inside the grid. */
#page-engineering-data .ed-keylist-gridwrap::-webkit-scrollbar:horizontal{
  height:0!important;
}
#page-engineering-data .ed-keylist-gridwrap::-webkit-scrollbar:vertical{
  width:10px!important;
}

/* Persistent horizontal scrollbar. It is always visible directly under the
   grid and drives the grid's real scrollLeft in JavaScript. */
#page-engineering-data .ed-keylist-hscroll{
  flex:0 0 20px!important;
  min-height:20px!important;
  margin:0!important;
  padding:5px 8px!important;
  display:block!important;
  border:1px solid var(--border)!important;
  border-top:0!important;
  background:var(--surface2)!important;
  outline:none!important;
  cursor:default!important;
}
#page-engineering-data .ed-keylist-hscroll-track{
  position:relative!important;
  width:100%!important;
  height:10px!important;
  border:1px solid var(--border-control)!important;
  border-radius:5px!important;
  background:var(--surface3)!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
#page-engineering-data .ed-keylist-hscroll-thumb{
  position:absolute!important;
  left:0!important;
  top:0!important;
  height:100%!important;
  min-width:54px!important;
  border-radius:4px!important;
  background:var(--text3)!important;
  opacity:.72!important;
  cursor:grab!important;
  touch-action:none!important;
  will-change:transform,width!important;
}
#page-engineering-data .ed-keylist-hscroll-thumb:hover,
#page-engineering-data .ed-keylist-hscroll:focus .ed-keylist-hscroll-thumb{
  opacity:.95!important;
  background:var(--text2)!important;
}
#page-engineering-data .ed-keylist-hscroll-thumb:active{
  cursor:grabbing!important;
}
#page-engineering-data .ed-keylist-hscroll.is-disabled{
  opacity:.38!important;
}
#page-engineering-data .ed-keylist-hscroll.is-disabled .ed-keylist-hscroll-thumb{
  cursor:default!important;
}

/* Freeze the complete first column as one unit. Header and body share the
   same explicit width so the header cannot slide independently while the
   row identity remains frozen. */
#page-engineering-data .ed-keylist-grid .ed-th-tag{
  position:sticky!important;
  top:0!important;
  left:0!important;
  z-index:9!important;
  width:235px!important;
  min-width:235px!important;
  max-width:235px!important;
  background:var(--surface2)!important;
  box-shadow:1px 0 0 var(--border2)!important;
}
#page-engineering-data .ed-keylist-grid .ed-th-tag .ed-th-l{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-keylist-grid .ed-cell-tag{
  position:sticky!important;
  left:0!important;
  z-index:4!important;
  width:235px!important;
  min-width:235px!important;
  max-width:235px!important;
  background:var(--surface)!important;
  box-shadow:1px 0 0 var(--border)!important;
}
#page-engineering-data .ed-keylist-grid tbody tr:hover .ed-cell-tag{
  background:var(--surface2)!important;
}
#page-engineering-data .ed-keylist-grid thead .ed-th{
  position:sticky!important;
  top:0!important;
  z-index:6!important;
}
#page-engineering-data .ed-keylist-grid thead .ed-th-tag{
  z-index:10!important;
}

/* The pager follows the scroll rail rather than competing with table height. */
#page-engineering-data .ed-keylist-main .ed-pager{
  flex:0 0 auto!important;
  margin:0!important;
}


/* --------------------------------------------------------------------------
   KEY LIST TOOLBAR — explicit non-clipping rows.
   -------------------------------------------------------------------------- */
#page-engineering-data .ed-toolbar{
  flex:0 0 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  margin:0 0 8px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:5px!important;
  overflow:visible!important;
}
#page-engineering-data .ed-toolbar-query{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  /* One deliberate filter row: Basis | Value | Status | Tag search | Count. */
  grid-template-columns:145px minmax(180px,280px) 215px minmax(220px,1fr) auto!important;
  gap:5px!important;
  align-items:center!important;
}
#page-engineering-data .ed-toolbar-query .ed-input,
#page-engineering-data .ed-toolbar-query .ed-statuswrap{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}
#page-engineering-data .ed-toolbar-query .ed-count{
  align-self:center!important;
  white-space:nowrap!important;
}
@media(max-width:980px){
  #page-engineering-data .ed-toolbar-query{
    grid-template-columns:130px minmax(160px,220px) 190px minmax(180px,1fr) auto!important;
  }
}
@media(max-width:720px){
  #page-engineering-data .ed-toolbar-query{
    grid-template-columns:minmax(0,1fr)!important;
  }
}
/* Status multi-select uses the same compact control language as the rest of
   the Engineering Data workbench rather than reading like a separate card. */
#page-engineering-data .ed-status-menu{
  width:250px!important;
  padding:4px!important;
  border:1px solid var(--border2)!important;
  border-radius:4px!important;
  background:var(--surface)!important;
  box-shadow:0 4px 14px rgba(16,47,80,.12)!important;
}
#page-engineering-data .ed-status-item{
  min-height:34px!important;
  padding:5px 7px!important;
  gap:7px!important;
  align-items:center!important;
  border-radius:3px!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  color:var(--text)!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
#page-engineering-data .ed-status-item:hover{
  background:var(--accent-light)!important;
}
#page-engineering-data .ed-status-item input{
  width:13px!important;
  height:13px!important;
  margin:0!important;
  flex:0 0 auto!important;
}
#page-engineering-data .ed-status-item span{
  min-width:0!important;
  gap:1px!important;
}
#page-engineering-data .ed-status-item strong{
  font:600 11.5px/1.2 var(--font-body,'IBM Plex Sans',sans-serif)!important;
  color:var(--text)!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
#page-engineering-data .ed-status-item small{
  font:400 9.5px/1.2 var(--font-body,'IBM Plex Sans',sans-serif)!important;
  color:var(--text3)!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
#page-engineering-data .ed-status-all{
  margin:0 0 3px!important;
  padding-bottom:6px!important;
  border-bottom:1px solid var(--border)!important;
}
#page-engineering-data .ed-status-foot{
  min-height:32px!important;
  margin:3px 0 0!important;
  padding:5px 3px 1px!important;
  gap:5px!important;
  border-top:1px solid var(--border)!important;
  background:transparent!important;
}
#page-engineering-data .ed-status-foot .vx-btn{
  min-height:27px!important;
  height:27px!important;
  padding:0 9px!important;
  border-radius:4px!important;
  font-size:10.5px!important;
  font-weight:600!important;
}
#page-engineering-data .ed-status-btn{
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:11.5px!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

#page-engineering-data .ed-toolbar-actions{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  overflow:visible!important;
}
#page-engineering-data .ed-toolbar-actions .vx-btn,
#page-engineering-data .ed-toolbar-actions .btn{
  flex:0 0 auto!important;
}
#page-engineering-data .ed-toolbar-actions .ed-chip{
  flex:0 1 auto!important;
  max-width:min(420px,35vw)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-toolbar-actions .ed-count{
  flex:0 0 auto!important;
  margin-left:auto!important;
  white-space:nowrap!important;
}
@media(max-width:1450px){
  #page-engineering-data .ed-toolbar-actions .ed-count{
    margin-left:0!important;
  }
}


/* --------------------------------------------------------------------------
   KEY LIST VERSION MODEL — WIP / PUBLISHED / COMPARE
   -------------------------------------------------------------------------- */
#page-engineering-data .ed-versionbar{
  flex:0 0 auto!important;
  min-height:52px!important;
  padding:6px 0 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface)!important;
}
#page-engineering-data .ed-version-modes{
  min-width:0!important;
  display:flex!important;
  align-items:stretch!important;
  gap:5px!important;
}
#page-engineering-data .ed-version-published{
  display:flex!important;
  align-items:stretch!important;
  gap:4px!important;
}
#page-engineering-data .ed-version-btn{
  min-width:132px!important;
  min-height:38px!important;
  padding:5px 9px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
}
#page-engineering-data .ed-version-btn:hover:not(:disabled){
  border-color:var(--accent)!important;
  background:var(--accent-dim2)!important;
}
#page-engineering-data .ed-version-btn.is-on{
  border-color:var(--accent)!important;
  background:var(--accent-light)!important;
  color:var(--accent)!important;
}
#page-engineering-data .ed-version-btn:disabled{
  opacity:.45!important;
  cursor:default!important;
}
#page-engineering-data .ed-version-btn strong{
  color:inherit!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  font-weight:650!important;
}
#page-engineering-data .ed-version-btn span{
  margin-top:2px!important;
  color:var(--text3)!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:400!important;
}
#page-engineering-data .ed-version-select{
  min-width:150px!important;
  max-width:230px!important;
  min-height:38px!important;
  padding:4px 8px!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-2)!important;
}
#page-engineering-data .ed-version-meta{
  flex:0 0 auto!important;
  color:var(--text3)!important;
  font-size:var(--fs-2)!important;
  white-space:nowrap!important;
}

/* Published is a read-only issued surface, not a modal/drawer. */
#page-engineering-data .ed-published-context{
  flex:0 0 auto!important;
  min-height:36px!important;
  margin:7px 0 0!important;
  padding:6px 9px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border:1px solid var(--border)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-published-context strong{
  color:var(--text)!important;
  font-size:var(--fs-3)!important;
  font-weight:600!important;
}
#page-engineering-data .ed-published-context span{
  color:var(--text3)!important;
  font-size:var(--fs-2)!important;
}
#page-engineering-data .ed-published-grid .ed-cell{
  background:var(--surface)!important;
}

/* Compare controls: explicit before/after selectors and change filters. */
#page-engineering-data .ed-comparebar{
  flex:0 0 auto!important;
  margin:7px 0 7px!important;
  padding:8px 9px!important;
  display:grid!important;
  grid-template-columns:minmax(360px,auto) minmax(260px,1fr) auto!important;
  gap:12px!important;
  align-items:end!important;
  border:1px solid var(--border)!important;
  background:var(--surface2)!important;
}
#page-engineering-data .ed-compare-pickers{
  display:flex!important;
  align-items:end!important;
  gap:7px!important;
}
#page-engineering-data .ed-compare-pickers label{
  min-width:150px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
#page-engineering-data .ed-compare-pickers label>span{
  color:var(--text3)!important;
  font-size:var(--fs-1)!important;
  font-weight:500!important;
}
#page-engineering-data .ed-compare-pickers select{
  min-width:170px!important;
  max-width:240px!important;
}
#page-engineering-data .ed-compare-arrow{
  padding-bottom:6px!important;
  color:var(--text3)!important;
  font-size:14px!important;
}
#page-engineering-data .ed-compare-summary{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:2px!important;
  align-self:center!important;
}
#page-engineering-data .ed-compare-summary strong{
  color:var(--text)!important;
  font-size:var(--fs-3)!important;
  font-weight:600!important;
}
#page-engineering-data .ed-compare-summary span{
  color:var(--text3)!important;
  font-size:var(--fs-2)!important;
}
#page-engineering-data .ed-diff-filters{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:4px!important;
}
#page-engineering-data .ed-diff-filter{
  min-height:28px!important;
  padding:3px 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  border:1px solid var(--border-control)!important;
  border-radius:2px!important;
  background:var(--surface)!important;
  color:var(--text2)!important;
  font-family:var(--font-body,'IBM Plex Sans',sans-serif)!important;
  font-size:var(--fs-2)!important;
  cursor:pointer!important;
}
#page-engineering-data .ed-diff-filter span{
  min-width:18px!important;
  padding:0 4px!important;
  border-radius:8px!important;
  background:var(--surface3)!important;
  color:var(--text3)!important;
  text-align:center!important;
  font-size:var(--fs-1)!important;
}
#page-engineering-data .ed-diff-filter.is-on{
  border-color:var(--accent)!important;
  background:var(--accent-light)!important;
  color:var(--accent)!important;
}

/* Cell-level comparison. Colour is paired with a + / − / Δ mark so colour
   never carries the meaning alone. */
#page-engineering-data .ed-diff-cell{
  position:relative!important;
  padding-right:26px!important;
}
#page-engineering-data .ed-diff-cell.is-added{
  background:var(--green-light)!important;
  color:var(--green-on-tint)!important;
}
#page-engineering-data .ed-diff-cell.is-changed{
  background:var(--amber-light)!important;
  color:var(--amber-on-tint)!important;
}
#page-engineering-data .ed-diff-cell.is-removed{
  background:var(--red-light)!important;
  color:var(--red-on-tint)!important;
  text-decoration:line-through!important;
}
#page-engineering-data .ed-diff-cell.is-unchanged{
  background:var(--surface)!important;
  color:var(--text2)!important;
}
#page-engineering-data .ed-diff-main{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-engineering-data .ed-diff-before{
  display:block!important;
  margin-top:2px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--text3)!important;
  font-size:9px!important;
  line-height:1.15!important;
  text-decoration:none!important;
}
#page-engineering-data .ed-diff-mark{
  position:absolute!important;
  top:7px!important;
  right:7px!important;
  width:15px!important;
  height:15px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid currentColor!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:700!important;
  text-decoration:none!important;
}
#page-engineering-data .ed-diff-tagstate{
  margin-left:7px!important;
  padding:1px 5px!important;
  border:1px solid var(--border)!important;
  border-radius:2px!important;
  font-size:8.5px!important;
  font-weight:600!important;
  text-transform:capitalize!important;
}
#page-engineering-data .ed-diff-tagstate.is-added{
  border-color:var(--green-dim)!important;
  background:var(--green-light)!important;
  color:var(--green-on-tint)!important;
}
#page-engineering-data .ed-diff-tagstate.is-changed{
  border-color:var(--amber-dim)!important;
  background:var(--amber-light)!important;
  color:var(--amber-on-tint)!important;
}
#page-engineering-data .ed-diff-tagstate.is-removed{
  border-color:var(--red-dim)!important;
  background:var(--red-light)!important;
  color:var(--red-on-tint)!important;
}
#page-engineering-data .ed-diff-empty{
  height:64px!important;
  color:var(--text3)!important;
  text-align:center!important;
}

/* In Published/Compare modes there is no WIP toolbar consuming height, so the
   same grid scroll owner simply expands into the available workbench. */
#page-engineering-data .ed-keylist-main .ed-published-grid,
#page-engineering-data .ed-keylist-main .ed-compare-grid{
  width:max-content!important;
  min-width:100%!important;
}

@media(max-width:1250px){
  #page-engineering-data .ed-versionbar{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  #page-engineering-data .ed-version-meta{white-space:normal!important;}
  #page-engineering-data .ed-comparebar{
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
  }
  #page-engineering-data .ed-diff-filters{justify-content:flex-start!important;}
}
@media(max-width:850px){
  #page-engineering-data .ed-version-modes{
    width:100%!important;
    flex-wrap:wrap!important;
  }
  #page-engineering-data .ed-version-btn{min-width:118px!important;}
  #page-engineering-data .ed-compare-pickers{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  #page-engineering-data .ed-compare-arrow{display:none!important;}
  #page-engineering-data .ed-compare-pickers select{max-width:none!important;width:100%!important;}
}

#page-engineering-data .ed-compare-summary small{
  color:var(--text3)!important;
  font-size:var(--fs-1)!important;
  line-height:1.3!important;
  font-weight:400!important;
}

/* L-7: change the working copy from Compare */
#page-engineering-data .ed-diff-cell.is-editable{cursor:pointer}
#page-engineering-data .ed-diff-cell.is-editable:hover,#page-engineering-data .ed-diff-cell.is-editable:focus{outline:1px solid var(--accent);outline-offset:-1px}
#page-engineering-data .ed-cmp-pop{position:fixed;z-index:1200;width:300px;padding:12px 14px;background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.3);font-size:var(--fs-2)}
#page-engineering-data .ed-cmp-pop-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
#page-engineering-data .ed-cmp-x{margin-left:auto;border:0;background:none;color:var(--text2);cursor:pointer}
#page-engineering-data .ed-cmp-pop dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 10px}
#page-engineering-data .ed-cmp-pop dt{color:var(--text3)}
#page-engineering-data .ed-cmp-pop dd{margin:0;font-weight:500}
#page-engineering-data .ed-cmp-new{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px}
#page-engineering-data .ed-cmp-new span{color:var(--text3);font-size:var(--fs-1)}
#page-engineering-data .ed-cmp-note{color:var(--text3);font-size:var(--fs-1)}
#page-engineering-data .ed-cmp-f{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}