/* CDE app styles — brand tokens only (loaded from brand.xyzbim.eu/v1/brand.css),
   no hex values. Application interface: data-font="inter" is set on <body>. */

/* App identity: the PROJECT colour is the accent — primary buttons, focus,
   hovers carry the same cyan as the CD/15 badge. The product is declared once
   and brand.css derives --accent from it in all three themes (light, dark
   chosen, dark OS); the old re-bind needed a mirror of brand.css's dark-OS
   block to win. The literal fallbacks mirror the brand values. */
:root{ --product: var(--c-cde, #0E7490); --product-up: var(--c-cde-up, #22A0B8); }

.cde-app{ max-width: 1280px; margin: 0 auto; padding: 24px var(--pad, 24px) 80px; min-height: 60vh; }

/* ------------------------------ shared bits ------------------------------ */
.cde-mono{ font-family: var(--f-mono); }
.cde-btn{
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 7px 14px; transition: border-color var(--tr-fast), background var(--tr-fast);
}
.cde-btn:hover{ border-color: var(--accent); }
.cde-btn--primary{ background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 500; }
.cde-btn--danger{ color: var(--attn); border-color: var(--attn); }
.cde-btn--primary:hover{ filter: brightness(1.08); }
.cde-btn--ghost{ background: transparent; }
.cde-btn[disabled]{ opacity: .45; cursor: default; }
.cde-input{
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 8px 12px; width: 100%;
}
.cde-input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
.cde-error{ color: var(--attn); font-size: 13px; margin-top: 10px; min-height: 1.2em; }

/* ------------------------------ login ------------------------------ */
.cde-login{ max-width: 380px; margin: clamp(40px, 12vh, 120px) auto 0; }
.cde-login h1{
  font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: 26px; line-height: 1.1; margin: 0 0 6px;
}
.cde-login .cde-mono{ font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.cde-login form{ display: grid; gap: 12px; margin-top: 22px; }
.cde-login label{ font-size: 12.5px; color: var(--ink-3); display: grid; gap: 5px; }

/* ------------------------------ workspace frame ------------------------------ */
.cde-top{
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.cde-top h1{
  font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: 22px; margin: 0;
}
.cde-top .cde-mono{ font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.cde-top__actions{ margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cde-user{ font-size: 12.5px; color: var(--ink-3); }
.cde-user b{ color: var(--ink); font-weight: 500; }

.cde-frame{
  display: grid; grid-template-columns: 240px minmax(0,1fr) 320px;
  gap: 0; border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--bg-2); min-height: 460px;
}
.cde-pane{ padding: 14px; overflow: auto; max-height: 66vh; }
.cde-pane + .cde-pane{ border-left: 1px solid var(--rule-2); }
.cde-pane__head{
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
@media (max-width: 1000px){
  .cde-frame{ grid-template-columns: 1fr; }
  .cde-pane + .cde-pane{ border-left: 0; border-top: 1px solid var(--rule-2); }
  .cde-pane{ max-height: none; }
}

/* ------------------------------ tree ------------------------------ */
.cde-tree{ list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.cde-tree ul{ list-style: none; margin: 0; padding-left: 14px; }
.cde-tree-row{
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 4.5px 8px; border: 0; background: none; color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius);
}
.cde-tree-row:hover{ color: var(--ink); background: var(--bg); }
.cde-tree-row.is-active{ color: var(--ink); background: var(--bg); box-shadow: inset 2px 0 0 var(--accent); }
.cde-tree-row .cde-mono{ color: var(--ink-3); font-size: 10px; }

/* ------------------------------ file list ------------------------------ */
.cde-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cde-table th{
  text-align: left; font-family: var(--f-mono); font-weight: 400;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 8px 8px; border-bottom: 1px solid var(--rule);
}
.cde-table td{ padding: 7px 8px; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); }
.cde-table td:first-child{ color: var(--ink); }
.cde-table tr[data-row]:hover td{ background: var(--bg); cursor: pointer; }
.cde-table .cde-mono{ font-size: 12px; }
.cde-empty{ color: var(--ink-3); font-size: 13.5px; padding: 18px 4px; }
.cde-breadcrumb{ font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.cde-breadcrumb button{
  background: none; border: 0; color: var(--ink-2); font: inherit; cursor: pointer; padding: 0;
}
.cde-breadcrumb button:hover{ color: var(--ink); text-decoration: underline; }

/* ------------------------------ detail pane ------------------------------ */
.cde-detail dt{
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 12px;
}
.cde-detail dd{ margin: 3px 0 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.cde-detail .cde-mono{ font-size: 11.5px; }
.cde-version{ padding: 7px 0; border-bottom: 1px solid var(--rule-2); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.cde-version__no{
  font-family: var(--f-mono); font-size: 11px; color: var(--bg);
  background: var(--ink-3); padding: 2px 6px; border-radius: var(--radius); flex: 0 0 auto;
}
.cde-version.is-current .cde-version__no{ background: var(--accent); }
.cde-version__meta{ color: var(--ink-3); font-size: 11px; }
.cde-version__actions{ margin-left: auto; display: flex; gap: 5px; }
.cde-version__actions .cde-btn{ padding: 3px 8px; font-size: 12px; }
.cde-caps{ display: flex; flex-wrap: wrap; gap: 5px; }
.cde-cap{
  font-family: var(--f-mono); font-size: 10px; padding: 2px 7px;
  border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-2);
}
.cde-cap.is-dim{ opacity: .38; }

/* ------------------------------ audit ------------------------------ */
.cde-audit{ list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cde-audit li{ padding: 8px 0; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); }
.cde-audit .cde-mono{ color: var(--ink-3); font-size: 10.5px; overflow-wrap: anywhere; }
.cde-audit b{ color: var(--ink); font-weight: 500; }
.cde-chain{ display: inline-block; margin-top: 10px; }

/* ------------------------------ history graph (git-style) ------------------------------ */
.cde-graph{ margin-top: 14px; }
.cde-node{ display: flex; gap: 12px; }
.cde-rail{
  width: 14px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
}
.cde-dot2{
  width: 10px; height: 10px; flex: 0 0 auto; margin-top: 5px;
  background: var(--ink-3); border: 1px solid var(--bg-2);
}
.cde-node.is-current .cde-dot2{ background: var(--accent); }
.cde-node::after{
  content: ""; width: 1px; flex: 1 0 auto; background: var(--rule); margin-bottom: 10px;
}
.cde-node:last-child::after{ display: none; }
.cde-node__body{ flex: 1; padding: 2px 0 16px; min-width: 0; }
.cde-node__head{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.cde-chip{
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .05em;
  padding: 2px 7px; border-radius: var(--radius);
  border: 1px solid var(--rule); color: var(--ink-2);
}
.cde-chip--suit{ color: var(--ink-3); }
.cde-chip--current{ color: var(--bg); background: var(--ink-3); border-color: var(--ink-3); }
.cde-state-wip{ color: var(--ink-3); }
.cde-state-shared{ color: var(--attn); border-color: var(--attn); }
.cde-state-published{ color: var(--ok); border-color: var(--ok); }
.cde-state-archived{ color: var(--ink-3); border-style: dashed; }
.cde-state-consumed{ color: var(--ink-3); border-style: dashed; }

.cde-approval{
  margin-top: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--attn); border-radius: var(--radius); background: var(--attn-bg);
}
.cde-node.is-current .cde-version__no{ background: var(--accent); }

/* ------------------------------ dialog ------------------------------ */
.cde-dialog-back{
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: grid; place-items: center; z-index: 40;
}
.cde-dialog{
  width: min(560px, calc(100vw - 40px)); max-height: 80vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 20px 22px;
}
.cde-dialog h2{ font-family: var(--f-display); font-weight: 500; font-size: 18px; margin: 0 0 4px; }
.cde-dialog .cde-mono{ font-size: 10px; color: var(--ink-3); letter-spacing: .07em; text-transform: uppercase; }
.cde-dialog form{ display: grid; gap: 10px; margin-top: 14px; }
.cde-grant-row{ display: grid; grid-template-columns: 1fr 130px 34px; gap: 8px; align-items: center; }
.cde-grant-row .cde-mono{ font-size: 11px; }
.cde-select{
  font: inherit; font-size: 13px; color: var(--ink); background: var(--bg-2);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 8px;
}

/* collapsible folder tree */
.cde-tree-row{ cursor: default; }
.cde-tree-name{
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cde-caret{
  width: 16px; height: 18px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-3); font-size: 10px; line-height: 1;
  transition: transform var(--tr-fast), color var(--tr-fast);
}
.cde-caret:hover{ color: var(--ink); }
.cde-caret.is-collapsed{ transform: rotate(-90deg); }
.cde-caret--leaf{ cursor: default; visibility: hidden; }

/* Documents workspace: observed ACC hierarchy, XYZ BIM tokens and controls.
   Scope to the authenticated shell so login and viewer retain their layout. */
.cde-app:has(.cde-workspace){ max-width:none; padding:0; margin:0; }
.cde-app:has(.cde-workspace) .cde-top{
  min-height:64px; padding:12px 22px; margin:0; align-items:center;
  border-bottom:1px solid var(--rule); background:var(--bg);
}
/* chromeless app topbar (pointcloud pattern): the app carries the house coin,
   the language switcher and the estate's theme switch itself */
.cde-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0; }
.cde-brand__w{ display:flex; flex-direction:column; line-height:1.15; }
.cde-brand__w b{ font-size:13.5px; font-weight:600; }
.cde-brand__w em{ font-style:normal; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; }
.cde-langs{ display:flex; align-items:center; gap:2px; }
.cde-lang{ padding:5px 7px; border-radius:var(--radius); color:var(--ink-3); font-size:11.5px; letter-spacing:.05em; text-decoration:none; }
.cde-lang:hover{ color:var(--ink); background:var(--bg-2); }
.cde-lang.is-current{ color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent); border-radius:0; }
.cde-top .xsite-nav__toggle{ --xsite-toggle:22px; --xsite-toggle-gap:0; }
/* static language strip on chromeless pages: readable before JS boots, then
   removed by boot() — the app topbar owns the switcher from then on */
.cde-prelang{ display:flex; justify-content:flex-end; gap:2px; padding:10px 14px 0; }
.cde-app:has(.cde-workspace) .cde-top__actions{ flex:1; align-items:center; gap:14px; }
.cde-top__actions .cde-select{ order:-1; max-width:280px; min-width:160px; border-color:transparent; font-weight:500; }
.cde-top__actions .cde-input{ margin-left:auto; }
.cde-top__actions .cde-user{ max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cde-workspace{ display:grid; grid-template-columns:220px minmax(0,1fr); }
/* Viewport fit (desktop): the page NEVER scrolls — the app is the viewport and
   only the tree/list/detail panes scroll inside it. The old calc()+min-height
   sums exceeded short viewports and produced the double scrollbar. */
@media(min-width:761px){
  .cde-app:has(.cde-workspace){ height:100dvh; min-height:0; display:flex; flex-direction:column; }
  body:has(.cde-workspace){ overflow:hidden; }
  .cde-workspace{ flex:1 1 auto; min-height:0; }
  .cde-sidebar{ min-height:0; overflow:auto; }
  .cde-documents{ display:flex; flex-direction:column; min-height:0; }
  .cde-workspace .cde-frame{ flex:1 1 auto; min-height:0; }
  .cde-workspace .cde-pane{ max-height:none; min-height:0; }
}
.cde-sidebar{ display:flex; flex-direction:column; gap:4px; padding:12px 0; background:var(--bg-2); border-right:1px solid var(--rule-2); }
.cde-sidebar .cde-btn{ min-height:44px; padding:10px 22px; text-align:left; border:0; border-left:3px solid transparent; }
.cde-sidebar .cde-btn:hover{ background:var(--bg); color:var(--accent); }
.cde-sidebar .is-active{ background:var(--bg); color:var(--accent); border-left-color:var(--accent); font-weight:500; }
.cde-sidebar #btnPeople{ margin-top:auto; }
.cde-documents{ min-width:0; background:var(--bg); }
.cde-documents__heading{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 24px 22px; }
.cde-documents__heading h1{ margin:0; font:500 28px/1.2 var(--f-display); letter-spacing:-.02em; }
.cde-document-tabs{ display:flex; align-items:stretch; gap:24px; margin:0 24px; border-bottom:1px solid var(--rule); font-size:14px; }
.cde-document-tabs > *{ padding:12px 0; }
.cde-document-tabs .is-active{ border-bottom:2px solid var(--accent); }
.cde-document-tabs .cde-btn{ border:0; }
.cde-workspace .cde-frame{ grid-template-columns:210px minmax(0,1fr); border:0; background:var(--bg); }
.cde-workspace .cde-frame.has-detail{ grid-template-columns:210px minmax(0,1fr) 300px; }
.cde-workspace .cde-pane{ max-height:none; min-height:0; padding:18px 16px; }
.cde-workspace #paneDetail{ display:none; }
.cde-workspace .has-detail #paneDetail{ display:block; background:var(--bg-2); }
.cde-workspace #paneTree{ padding:20px 8px; }
.cde-workspace #paneTree > .cde-pane__head{ padding:0 14px 12px; }
.cde-workspace .cde-tree-row{ min-height:38px; }
.cde-workspace .cde-tree-name{ line-height:1.6; }
.cde-workspace .cde-tree-row:hover,.cde-workspace .cde-tree-row.is-active{ background:var(--bg-2); }
.cde-workspace #paneList > .cde-pane__head{ flex-wrap:wrap; gap:12px; }
.cde-workspace #paneList > .cde-pane__head > span:last-child{ flex-wrap:wrap; }
.cde-workspace #uploadMsg:empty{ display:none; }
.cde-workspace .cde-breadcrumb{ padding:8px 0; }
.cde-workspace .cde-table th{ padding:14px 10px; font:500 12px/1.5 var(--f-body, sans-serif); text-transform:none; letter-spacing:0; white-space:nowrap; }
.cde-workspace .cde-table td{ height:48px; padding:10px; }
.cde-workspace .cde-table th:nth-child(2){ min-width:240px; }
.cde-workspace .cde-table tr[data-row]:hover td{ background:var(--bg-2); }
.cde-workspace .cde-table td:not(:first-child){ white-space:nowrap; }
.cde-folder-link::before{ content:""; display:inline-block; width:16px; height:12px; border:1.5px solid currentColor; margin-right:9px; vertical-align:-1px; clip-path:polygon(0 0,40% 0,52% 20%,100% 20%,100% 100%,0 100%); background:var(--bg-2); }
.cde-workspace button:focus-visible,.cde-workspace select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:1200px){
  .cde-workspace{ grid-template-columns:180px minmax(0,1fr); }
  .cde-top__actions .cde-user{ display:none; }
  .cde-workspace .cde-frame,.cde-workspace .cde-frame.has-detail{ grid-template-columns:180px minmax(0,1fr); }
  .cde-workspace .has-detail #paneDetail{ grid-column:1/-1; border-top:1px solid var(--rule); max-height:none; min-height:0; }
  /* detail drops below the list: both rows share the fixed frame height and
     scroll internally — the page still never scrolls */
  .cde-workspace .cde-frame.has-detail{ grid-template-rows:minmax(0,1.4fr) minmax(0,1fr); }
  .cde-workspace .cde-pane + .cde-pane{ border-left:1px solid var(--rule-2); border-top:0; }
}
@media(max-width:760px){
  .cde-app:has(.cde-workspace) .cde-top{ padding:12px; gap:8px; }
  .cde-brand__w em{ display:none; }
  .cde-top__actions .cde-user{ display:none; }
  .cde-app:has(.cde-workspace) .cde-top__actions{ flex-basis:100%; gap:8px; }
  .cde-top__actions .cde-select{ min-width:0; max-width:45%; }
  .cde-workspace{ display:block; }
  .cde-sidebar{ flex-direction:row; overflow-x:auto; padding:0; border-right:0; border-bottom:1px solid var(--rule); }
  .cde-sidebar .cde-btn{ flex-shrink:0; padding:12px 16px; border-left:0; border-bottom:2px solid transparent; }
  .cde-sidebar .is-active{ border-bottom-color:var(--accent); }
  .cde-sidebar #btnPeople{ margin-top:0; }
  .cde-documents__heading{ padding:22px 16px; }
  .cde-document-tabs{ margin:0 16px; }
  .cde-workspace .cde-frame,.cde-workspace .cde-frame.has-detail{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .cde-workspace .cde-pane{ max-height:none; min-height:0; }
  .cde-workspace #paneTree{ max-height:200px; border-bottom:1px solid var(--rule-2); }
  .cde-workspace .cde-pane + .cde-pane{ border-left:0; }
}

/* Forma phase 1: context menus, selection, columns, upload progress.
   Brand tokens only; the menu floats on <body> in brand surface colours. */
.cde-menu{
  position:fixed; z-index:80; min-width:210px; max-height:calc(100vh - 16px);
  overflow:auto; padding:4px;
  background:var(--bg); border:1px solid var(--rule-2); border-radius:var(--radius);
  box-shadow:0 10px 30px rgb(0 0 0 / .14);
}
.cde-menu__item{
  display:flex; width:100%; align-items:center; gap:8px;
  padding:7px 10px; border:0; border-radius:calc(var(--radius) - 2px);
  background:none; color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer;
}
.cde-menu__item:hover,.cde-menu__item:focus-visible{ background:var(--bg-2); outline:none; }
.cde-menu__item[aria-disabled="true"]{ color:var(--ink-3); cursor:default; }
.cde-menu__item[aria-disabled="true"]:hover{ background:none; }
.cde-menu__item.is-danger{ color:var(--attn); }
.cde-menu__check{ display:inline-block; width:14px; color:var(--accent); font-weight:600; }
.cde-menu__sep{ height:1px; margin:4px 6px; background:var(--rule); }

/* selection column + contextual toolbar */
#paneList input[type="checkbox"],#paneDetail input[type="checkbox"]{ accent-color:var(--accent); width:15px; height:15px; }
.cde-col-sel{ width:34px; text-align:center; }
.cde-col-sel input{ vertical-align:middle; }
.cde-selbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 12px; margin-bottom:12px;
  background:var(--bg-2); border:1px solid var(--rule); border-radius:var(--radius); font-size:13px;
}
.cde-selbar[hidden]{ display:none; }
.cde-selbar__count{ color:var(--ink); font-weight:500; }
.cde-selbar__actions{ display:flex; gap:6px; flex-wrap:wrap; }
.cde-selbar__actions .cde-btn{ padding:3px 10px; font-size:12px; }

/* sortable column headers */
.cde-sortbtn{
  background:none; border:0; padding:0; cursor:pointer;
  color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit;
}
.cde-sortbtn:hover,.cde-sortbtn.is-active{ color:var(--ink); }
.cde-sortbtn.is-active .cde-sortarrow{ color:var(--accent); }
.cde-dim{ color:var(--ink-3); }

/* per-row menu affordance */
.cde-rowmenu{ margin-left:6px; padding:1px 7px; font-size:12px; opacity:0; }
.cde-table tr:hover .cde-rowmenu,.cde-rowmenu:focus-visible{ opacity:1; }

/* upload progress — one row per file, real bytes via XHR */
.cde-uplist{ display:grid; gap:6px; margin-bottom:12px; }
.cde-up{ display:flex; align-items:center; gap:10px; font-size:12.5px; }
.cde-up__name{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
.cde-up__state{ color:var(--ink-3); }
.cde-up.is-ok .cde-up__state{ color:var(--ink-2); }
.cde-up.is-error .cde-up__state{ color:var(--attn); }
.cde-progress{
  flex:0 0 120px; height:6px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--rule); border-radius:var(--radius);
}
.cde-progress > span{ display:block; height:100%; width:0; background:var(--accent); }