/* Department Colors Storybook adapter only. The actual Tunnel sample/stage
   frame comes from center-stories.css; this sheet never selects employee cards. */
.hm-orgchart-department-preview .hm-orgchart-department-colors-design {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sb-center-column-gap);
}

.hm-orgchart-department-preview .hm-orgchart-color-preview {
  grid-template-rows: auto 1fr;
  grid-row: auto;
}

.hm-orgchart-department-preview .hm-orgchart-representative-preview {
  grid-column: 1 / -1;
}

/* Group titles are OrgChart artwork. Preserve their established typography,
   white text and organization gradient within the common review header. */
.hm-orgchart-department-preview .hm-orgchart-color-preview > header > .hm-orgchart-color-department-name {
  box-sizing: border-box;
  width: 100%;
  color: var(--hm-orgchart-current-department-color);
  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);
}

.hm-orgchart-department-preview .hm-orgchart-department-stage {
  display: grid;
  justify-items: safe center;
  align-items: center;
}

.hm-orgchart-department-preview .hm-orgchart-preview-grid {
  margin-top: 0;
  gap: var(--sb-center-column-gap);
}

/* Keep Fixed's status presenter inside the existing review surface, without
   introducing the full canvas background or coordinates into the specimen. */
.hm-orgchart-department-preview .hm-orgchart-status-preview-composition {
  width: max-content;
  background: transparent;
}

@media (max-width: 960px) {
  .hm-orgchart-department-preview .hm-orgchart-department-colors-design {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hm-orgchart-department-preview .hm-orgchart-department-colors-design {
    grid-template-columns: minmax(0, 1fr);
  }
}