/* Content composition only; no Header/Navigation or HM component overrides. */
/* Full Composition: Scale wrapper (.hm-orgchart-composition) > Base Stage (.hm-orgchart-stage).
   The stage keeps its natural width (tree + side) and is uniformly scaled by Core JS;
   there is no reflow breakpoint and no inner horizontal scroll. Column/group gaps are
   screen-only layout values (no data or parentId change). */
.hm-orgchart-composition { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.hm-orgchart-stage {
  /* Engine padding (32px) + node margins (16px) already separate the six 252px
     organization columns; the tree wrapper adds no extra width. */
  --hm-orgchart-column-gap: 0px;
  display: grid;
  grid-template-columns: max-content 330px;
  column-gap: var(--hm-orgchart-resolved-spacing-xl);
  align-items: start;
  width: max-content;
  transform-origin: 0 0;
}
.hm-orgchart-composition-no-side .hm-orgchart-stage { grid-template-columns: max-content; }
/* Stage-level rows: intro/hub are centered on the whole stage (tree + side). */
.hm-orgchart-main { display: contents; }
.hm-orgchart-slot-side, .hm-orgchart-slot-footer, .hm-orgchart-slot-belowTree { min-width: 0; }
.hm-orgchart-slot-side { grid-column: 2; grid-row: 1 / span 4; }
.hm-orgchart-slot-footer { grid-column: 1 / -1; grid-row: 5; margin-top: 16px; contain: inline-size; }
.hm-orgchart-slot-side, .hm-orgchart-slot-footer, .hm-orgchart-slot-belowTree { display: grid; gap: 16px; }
.hm-orgchart-slot-belowTree { grid-column: 1; grid-row: 4; margin-top: 16px; contain: inline-size; }
.hm-orgchart-intro { grid-column: 1 / -1; grid-row: 1; contain: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 16px; }
.hm-orgchart-intro .hm-orgchart-heading { grid-column: 1; }
.hm-orgchart-top-leaders { grid-column: 2; display: flex; justify-content: center; gap: 12px; }
.hm-orgchart-hub {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 18px;
  z-index: 1;
  padding: 8px 20px;
  border-radius: var(--hm-orgchart-resolved-radius-pill);
  background: var(--hm-orgchart-resolved-bg-brand);
  color: var(--hm-orgchart-resolved-on-action-primary);
  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
  overflow-wrap: anywhere;
}
.hm-orgchart-hub::before, .hm-orgchart-hub::after {
  content: '';
  position: absolute;
  left: 50%;
  height: 18px;
  border-left: 1px dashed var(--hm-orgchart-resolved-stroke-default);
  pointer-events: none;
}
.hm-orgchart-hub::before { bottom: 100%; }
.hm-orgchart-hub::after { top: 100%; }
/* Stage 4: hub-to-organization branch lines (visual only, not data relations).
   Each top-level tree draws its own bar segment so the six branches read as one row. */
.hm-orgchart-main > .hm-orgchart-viewport { grid-column: 1; grid-row: 3; overflow: visible; padding-top: 0; border-top-color: transparent; border-radius: 0 0 var(--hm-orgchart-resolved-radius-container) var(--hm-orgchart-resolved-radius-container); }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-forest { align-items: flex-start; justify-content: flex-start; }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree { position: relative; padding: 18px calc(var(--hm-orgchart-column-gap) / 2) 0; }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::before,
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::after { content: ''; position: absolute; top: 0; pointer-events: none; border-top: 1px dashed var(--hm-orgchart-resolved-stroke-default); }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::before { left: 0; right: 0; }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree:first-child::before { left: 50%; }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree:last-child::before { right: 50%; }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree:only-child::before { display: none; }
.hm-orgchart-main > .hm-orgchart-viewport .hm-orgchart-tree::after { left: 50%; height: 18px; border-top: 0; border-left: 1px dashed var(--hm-orgchart-resolved-stroke-default); }
/* Six top branches are siblings supplied by the data. Deeper cells/teams stack
   inside their branch, with engine hierarchy and collapse behavior intact. */
.hm-orgchart-engine.orgchart .node[data-depth] { width: 204px; }
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization {
  width: 204px;
  padding: 10px;
  background: var(--hm-orgchart-current-card-background);
  border-top: var(--hm-orgchart-resolved-border-top-width) solid var(--hm-orgchart-group-border, var(--hm-orgchart-current-border));
}
.hm-orgchart-engine.orgchart .node[data-depth="0"] { width: 244px; }
.hm-orgchart-engine.orgchart .node[data-depth="0"] .hm-orgchart-organization { width: 244px; }
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="1"]) > .nodes,
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="2"]) > .nodes,
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="3"]) > .nodes { flex-direction: column; align-items: center; }
/* Stacked siblings: the engine's horizontal sibling bar becomes a vertical
   spine through the 20px engine node margin above each cell/team. */
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="1"]) > .nodes > .hierarchy::before,
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="2"]) > .nodes > .hierarchy::before,
.hm-orgchart-engine.orgchart .hierarchy:has(> .node[data-depth="3"]) > .nodes > .hierarchy::before { top: -20px; left: calc(50% - 1px); width: 2px; height: 20px; border-width: 0 0 0 2px; }
/* Stage 3 headers. Colors come from the per-organization preset variables;
   sizes are DESIGN_ADAPTATION (Workdesk computed size/padding NOT VERIFIED). */
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-organization-name {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 0;
  text-align: center;
  border-radius: var(--hm-orgchart-resolved-radius-container);
  color: var(--hm-orgchart-group-title-color, var(--hm-orgchart-current-department-color));
}
.hm-orgchart-engine.orgchart .node[data-header-role="organization"] .hm-orgchart-organization-name {
  min-height: var(--hm-orgchart-title-height, 40px);
  padding: 6px 12px;
  background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-group-background));
  font-size: var(--hm-orgchart-title-font-size, 18px);
  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
  line-height: var(--hm-orgchart-title-line-height, 26px);
}
.hm-orgchart-engine.orgchart .node[data-header-role="group"] .hm-orgchart-organization-name {
  min-height: var(--hm-orgchart-group-header-height, 32px);
  padding: 4px 8px;
  background: var(--hm-orgchart-group-title-background, var(--hm-orgchart-current-border));
  font-size: var(--hm-orgchart-group-header-font-size, 14px);
  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
  line-height: var(--hm-orgchart-group-header-line-height, 20px);
}
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-leader { margin: 10px auto; }
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employees { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.hm-orgchart-engine.orgchart .node[data-depth] .hm-orgchart-employee { flex-shrink: 0; }
.hm-orgchart-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.hm-orgchart-card-specimen { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.hm-orgchart-card-caption { margin: 0; max-width: 180px; font-size: 11px; line-height: 16px; text-align: center; }
.hm-orgchart-component-cards { min-width: 0; }
.hm-orgchart-logo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hm-orgchart-resolved-spacing-lg); padding: 0; list-style: none; }
.hm-orgchart-logo-list li { display: flex; flex-direction: column; align-items: center; gap: var(--hm-orgchart-resolved-spacing-sm); padding: var(--hm-orgchart-resolved-spacing-lg); border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-resolved-stroke-default); border-radius: var(--hm-orgchart-resolved-radius-container); }
.hm-orgchart-logo-list .hm-orgchart-affiliation-mark { position: relative; width: 96px; height: 96px; }
.hm-orgchart-department-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--hm-orgchart-resolved-spacing-lg); }
.hm-orgchart-department-colors > p { grid-column: 1 / -1; }
.hm-orgchart-representative-preview { grid-column: 1 / -1; }
.hm-orgchart-color-preview { min-width: 0; padding: var(--hm-orgchart-resolved-spacing-lg); border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-current-border); border-radius: var(--hm-orgchart-resolved-radius-container); background: var(--hm-orgchart-current-card-background); overflow-wrap: anywhere; }
/* Align title, provenance, legend, cards and contrast blocks across each row
   of specimens even when their descriptions wrap to different heights. */
.hm-orgchart-color-preview { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.hm-orgchart-color-department-name { display: flex; align-items: center; justify-content: center; min-height: var(--hm-orgchart-title-height, 40px); padding: 6px 12px; font-size: var(--hm-orgchart-title-font-size, 18px); line-height: var(--hm-orgchart-title-line-height, 26px); font-weight: var(--hm-orgchart-resolved-font-weight-bold); background: var(--hm-orgchart-current-gradient); color: var(--hm-orgchart-current-department-color); border-radius: var(--hm-orgchart-resolved-radius-container); }
.hm-orgchart-color-legend { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--hm-orgchart-resolved-spacing-sm); }
.hm-orgchart-color-legend dd { margin: 0; display: grid; gap: 4px; }
.hm-orgchart-color-swatch { display: block; width: 44px; height: 22px; border: 1px solid var(--hm-orgchart-resolved-stroke-default); }
.hm-orgchart-color-swatch-card-background { background-color: var(--hm-orgchart-current-card-background); }
.hm-orgchart-color-swatch-card-color { color: var(--hm-orgchart-current-card-color); }
.hm-orgchart-color-swatch-department-color { color: var(--hm-orgchart-current-department-color); }
.hm-orgchart-color-swatch-border { background-color: var(--hm-orgchart-current-border); }
.hm-orgchart-color-swatch-gradient { background-image: var(--hm-orgchart-current-gradient); }
.hm-orgchart-color-swatch[data-css-property="color"] { text-align: center; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
.hm-orgchart-contrast-normal, .hm-orgchart-contrast-candidate, .hm-orgchart-contrast-chip {
  margin: var(--hm-orgchart-resolved-spacing-sm) 0;
  padding: 4px 8px;
  font-size: 15px;
  font-weight: var(--hm-orgchart-resolved-font-weight-bold);
  line-height: 22px;
  border-radius: var(--hm-orgchart-resolved-radius-container);
  background: var(--hm-orgchart-current-gradient);
  color: var(--hm-orgchart-current-department-color);
}
.hm-orgchart-contrast-candidate { color: var(--hm-orgchart-contrast-candidate-color, #10243b); }
.hm-orgchart-contrast-chip-label { display: inline-block; background: var(--hm-orgchart-contrast-candidate-chip-background, #ffffff); color: var(--hm-orgchart-contrast-candidate-color, #10243b); padding: 0 4px; border-radius: var(--hm-orgchart-resolved-radius-control-md); }
.hm-orgchart-contrast-comparison { min-width: 0; }
.hm-orgchart-contrast-results { margin: var(--hm-orgchart-resolved-spacing-sm) 0; }
.hm-orgchart-contrast-results dd { margin-left: 0; }
.hm-orgchart-contrast-result, .hm-orgchart-contrast-stops { margin: var(--hm-orgchart-resolved-spacing-xs) 0; }